camox 0.42.0 → 0.44.0

package/dist/core/editing/createEditableBlock.js

@@ -2,13 +2,14 @@ import { useLocation } from "../../features/navigation/navigation.js";
 import { useProjectSlug } from "../../lib/auth.js";
 import { isFileMarker, isItemMarker, resolveFileMarker, useNormalizedData } from "../../lib/normalized-data.js";
 import { Type as Type$1, resolveToMarkdown } from "../lib/contentType.js";
+import { IconSvg } from "../lib/icons.js";
 import { buildImageSrcSet, getDefaultImageSizes, getDefaultImageWidth, transformImageUrl } from "../lib/imageTransform.js";
 import { markdownToReactNodes } from "../lib/lexicalReact.js";
 import { blockMutations, pageQueries, projectQueries, repeatableItemMutations } from "../../lib/queries.js";
 import { previewStore, selectIsCommentMode } from "../../features/preview/previewStore.js";
 import { usePreviewSelection } from "../../features/preview/previewSelection.js";
-import { postOverlayMessage } from "../../features/preview/overlayMessages.js";
 import { useFrame } from "../../features/preview/components/Frame.js";
+import { postOverlayMessage } from "../../features/preview/overlayMessages.js";
 import { AddBlockControlBar } from "../components/AddBlockControlBar.js";
 import { InlineLexicalEditor } from "../components/lexical/InlineLexicalEditor.js";
 import { useFieldSelection } from "../hooks/useFieldSelection.js";
@@ -185,9 +186,9 @@ function createEditableBlock(options) {
 	};
 	const Field = (t0) => {
 		const $ = c(34);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, textStyle, linkStyle, children } = t0;
 		const selectTarget = usePreviewSelection();
@@ -387,11 +388,132 @@ function createEditableBlock(options) {
 		} else t17 = $[33];
 		return t17;
 	};
+	const Icon = (t0) => {
+		const $ = c(34);
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
+			for (let $i = 0; $i < 34; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
+		}
+		let name;
+		let props;
+		if ($[1] !== t0) {
+			({name, ...props} = t0);
+			$[1] = t0;
+			$[2] = name;
+			$[3] = props;
+		} else {
+			name = $[2];
+			props = $[3];
+		}
+		const block = React.use(Context);
+		const item = React.use(RepeaterItemContext);
+		const selectTarget = usePreviewSelection();
+		if (!block) throw new Error("Icon must be used within a Block Component");
+		const editable = useIsEditable(block.mode);
+		const fieldName = String(name);
+		const value = item ? item.itemContent[name] : block.content[name];
+		let t1;
+		if ($[4] !== block.blockId || $[5] !== fieldName || $[6] !== item) {
+			t1 = getOverlayFieldId(block.blockId, item, fieldName);
+			$[4] = block.blockId;
+			$[5] = fieldName;
+			$[6] = item;
+			$[7] = t1;
+		} else t1 = $[7];
+		const fieldId = t1;
+		const { window: iframeWindow } = useFrame();
+		const [isHovered, setIsHovered] = React.useState(false);
+		const isFocused = useFieldSelection(block.blockId, fieldName, "Icon", item?.itemId);
+		let t2;
+		if ($[8] !== fieldId) {
+			t2 = { fieldId };
+			$[8] = fieldId;
+			$[9] = t2;
+		} else t2 = $[9];
+		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, editable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
+		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
+		const t3 = editable ? fieldId : void 0;
+		const t4 = editable ? "icon" : void 0;
+		let t5;
+		if ($[10] !== editable || $[11] !== overlayState) {
+			t5 = editable ? overlayState : {};
+			$[10] = editable;
+			$[11] = overlayState;
+			$[12] = t5;
+		} else t5 = $[12];
+		const t6 = editable && options.synced ? "synced" : void 0;
+		let t7;
+		let t8;
+		if ($[13] !== editable || $[14] !== props) {
+			t7 = (event) => {
+				if (editable) setIsHovered(true);
+				props.onMouseEnter?.(event);
+			};
+			t8 = (event_0) => {
+				if (editable) setIsHovered(false);
+				props.onMouseLeave?.(event_0);
+			};
+			$[13] = editable;
+			$[14] = props;
+			$[15] = t7;
+			$[16] = t8;
+		} else {
+			t7 = $[15];
+			t8 = $[16];
+		}
+		let t9;
+		if ($[17] !== block.blockId || $[18] !== editable || $[19] !== fieldName || $[20] !== item || $[21] !== props.onClickCapture || $[22] !== selectTarget) {
+			t9 = editable ? (event_1) => selectTarget(item?.itemId != null ? {
+				type: "item-field",
+				blockId: block.blockId,
+				itemId: item.itemId,
+				fieldName,
+				fieldType: "Icon"
+			} : {
+				type: "block-field",
+				blockId: block.blockId,
+				fieldName,
+				fieldType: "Icon"
+			}, event_1) : props.onClickCapture;
+			$[17] = block.blockId;
+			$[18] = editable;
+			$[19] = fieldName;
+			$[20] = item;
+			$[21] = props.onClickCapture;
+			$[22] = selectTarget;
+			$[23] = t9;
+		} else t9 = $[23];
+		let t10;
+		if ($[24] !== props || $[25] !== t3 || $[26] !== t4 || $[27] !== t5 || $[28] !== t6 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9 || $[32] !== value) {
+			t10 = /* @__PURE__ */ jsx(IconSvg, {
+				...props,
+				iconId: value,
+				"data-camox-field-id": t3,
+				"data-camox-field-type": t4,
+				...t5,
+				"data-camox-overlay-mode": t6,
+				onMouseEnter: t7,
+				onMouseLeave: t8,
+				onClickCapture: t9
+			});
+			$[24] = props;
+			$[25] = t3;
+			$[26] = t4;
+			$[27] = t5;
+			$[28] = t6;
+			$[29] = t7;
+			$[30] = t8;
+			$[31] = t9;
+			$[32] = value;
+			$[33] = t10;
+		} else t10 = $[33];
+		return t10;
+	};
 	const Embed = (t0) => {
 		const $ = c(39);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 39; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
@@ -557,9 +679,9 @@ function createEditableBlock(options) {
 	};
 	const Link = (t0) => {
 		const $ = c(32);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
@@ -766,9 +888,9 @@ function createEditableBlock(options) {
 	};
 	const Image = (t0) => {
 		const $ = c(22);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, children } = t0;
 		const selectTarget = usePreviewSelection();
@@ -886,9 +1008,9 @@ function createEditableBlock(options) {
 	};
 	const File = (t0) => {
 		const $ = c(9);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 9; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -962,10 +1084,10 @@ function createEditableBlock(options) {
 	const ImageList = _AssetList;
 	const FileList = _AssetList;
 	const RepeaterItemWrapper = (t0) => {
-		const $ = c(20);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
-			for (let $i = 0; $i < 20; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+		const $ = c(23);
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
+			for (let $i = 0; $i < 23; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { itemId, blockId, mode, children } = t0;
 		const isContentEditable = useIsEditable(mode);
@@ -974,22 +1096,33 @@ function createEditableBlock(options) {
 		const isCommentMode = useSelector(previewStore, selectIsCommentMode);
 		const [isLocallyHovered, setIsLocallyHovered] = React.useState(false);
 		const isRepeaterHovered = React.useContext(RepeaterHoverContext);
-		const t1 = String(blockId);
-		const t2 = String(itemId);
-		let t3;
-		if ($[1] !== t1 || $[2] !== t2) {
-			t3 = {
-				blockId: t1,
-				itemId: t2
+		let t1;
+		if ($[1] !== blockId || $[2] !== itemId) {
+			t1 = (state) => {
+				const selection = state.context.selection;
+				return selection?.type === "item" && selection.blockId === blockId && selection.itemId === itemId;
 			};
-			$[1] = t1;
-			$[2] = t2;
-			$[3] = t3;
-		} else t3 = $[3];
-		const overlayState = useOverlayState(useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t3) || isRepeaterHovered || isCommentMode && isLocallyHovered);
+			$[1] = blockId;
+			$[2] = itemId;
+			$[3] = t1;
+		} else t1 = $[3];
+		const isSelected = useSelector(previewStore, t1);
+		const t2 = String(blockId);
+		const t3 = String(itemId);
 		let t4;
-		if ($[4] !== blockId || $[5] !== isCommentMode || $[6] !== isContentEditable || $[7] !== itemId || $[8] !== selectTarget) {
-			t4 = (event) => {
+		if ($[4] !== t2 || $[5] !== t3) {
+			t4 = {
+				blockId: t2,
+				itemId: t3
+			};
+			$[4] = t2;
+			$[5] = t3;
+			$[6] = t4;
+		} else t4 = $[6];
+		const overlayState = useOverlayState(useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_REPEATER_ITEM", "CAMOX_HOVER_REPEATER_ITEM_END", t4) || isRepeaterHovered || isCommentMode && isLocallyHovered, isSelected);
+		let t5;
+		if ($[7] !== blockId || $[8] !== isCommentMode || $[9] !== isContentEditable || $[10] !== itemId || $[11] !== selectTarget) {
+			t5 = (event) => {
 				if (!isContentEditable || !isCommentMode || itemId == null) return;
 				const target = event.target;
 				if (target.closest("[data-camox-field-id]")) return;
@@ -1000,57 +1133,57 @@ function createEditableBlock(options) {
 					itemId
 				}, event);
 			};
-			$[4] = blockId;
-			$[5] = isCommentMode;
-			$[6] = isContentEditable;
-			$[7] = itemId;
-			$[8] = selectTarget;
-			$[9] = t4;
-		} else t4 = $[9];
-		const handleClick = t4;
-		const t5 = isContentEditable ? itemId : void 0;
-		let t6;
+			$[7] = blockId;
+			$[8] = isCommentMode;
+			$[9] = isContentEditable;
+			$[10] = itemId;
+			$[11] = selectTarget;
+			$[12] = t5;
+		} else t5 = $[12];
+		const handleClick = t5;
+		const t6 = isContentEditable ? itemId : void 0;
 		let t7;
-		if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-			t6 = () => setIsLocallyHovered(true);
-			t7 = () => setIsLocallyHovered(false);
-			$[10] = t6;
-			$[11] = t7;
-		} else {
-			t6 = $[10];
-			t7 = $[11];
-		}
 		let t8;
-		if ($[12] !== isContentEditable || $[13] !== overlayState) {
-			t8 = isContentEditable ? overlayState : {};
-			$[12] = isContentEditable;
-			$[13] = overlayState;
+		if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+			t7 = () => setIsLocallyHovered(true);
+			t8 = () => setIsLocallyHovered(false);
+			$[13] = t7;
 			$[14] = t8;
-		} else t8 = $[14];
+		} else {
+			t7 = $[13];
+			t8 = $[14];
+		}
 		let t9;
-		if ($[15] !== children || $[16] !== handleClick || $[17] !== t5 || $[18] !== t8) {
-			t9 = /* @__PURE__ */ jsx("div", {
-				"data-camox-repeater-item-id": t5,
+		if ($[15] !== isContentEditable || $[16] !== overlayState) {
+			t9 = isContentEditable ? overlayState : {};
+			$[15] = isContentEditable;
+			$[16] = overlayState;
+			$[17] = t9;
+		} else t9 = $[17];
+		let t10;
+		if ($[18] !== children || $[19] !== handleClick || $[20] !== t6 || $[21] !== t9) {
+			t10 = /* @__PURE__ */ jsx("div", {
+				"data-camox-repeater-item-id": t6,
 				onClickCapture: handleClick,
-				onMouseEnter: t6,
-				onMouseLeave: t7,
-				...t8,
+				onMouseEnter: t7,
+				onMouseLeave: t8,
+				...t9,
 				"data-camox-overlay-mode": options.synced ? "synced" : void 0,
 				children
 			});
-			$[15] = children;
-			$[16] = handleClick;
-			$[17] = t5;
-			$[18] = t8;
-			$[19] = t9;
-		} else t9 = $[19];
-		return t9;
+			$[18] = children;
+			$[19] = handleClick;
+			$[20] = t6;
+			$[21] = t9;
+			$[22] = t10;
+		} else t10 = $[22];
+		return t10;
 	};
 	const RepeaterHoverProvider = (t0) => {
 		const $ = c(7);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 7; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { blockId, fieldName, children } = t0;
 		const isContentEditable = useIsEditable("site");
@@ -1081,9 +1214,9 @@ function createEditableBlock(options) {
 	};
 	const Repeater = (t0) => {
 		const $ = c(27);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 27; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { name, children } = t0;
 		const blockContext = React.use(Context);
@@ -1139,6 +1272,7 @@ function createEditableBlock(options) {
 					const itemApi = {
 						Field: ItemField,
 						Link: ItemLink,
+						Icon,
 						Embed: ItemEmbed,
 						Image: ItemImage,
 						File: ItemFile,
@@ -1208,9 +1342,9 @@ function createEditableBlock(options) {
 	};
 	const BlockComponent = (t0) => {
 		const $ = c(74);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 74; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { blockData, mode, isFirstBlock, showAddBlockTop, showAddBlockBottom, addBlockAfterPosition } = t0;
 		const isContentEditable = useIsEditable(mode);
@@ -1520,9 +1654,9 @@ function createEditableBlock(options) {
 	*/
 	const Detached = (t0) => {
 		const $ = c(32);
-		if ($[0] !== "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883") {
+		if ($[0] !== "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6") {
 			for (let $i = 0; $i < 32; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
-			$[0] = "9390cfa3e0bf4e772e82a3d1352a7d56d8ae67f112d215b6d45231db17c01883";
+			$[0] = "8c4e70844cd2f2752041099dd31f8aabc30492cc078e28f85c1026ddf30f63b6";
 		}
 		const { children } = t0;
 		const ctx = React.use(Context);
@@ -1651,6 +1785,7 @@ function createEditableBlock(options) {
 	};
 	return {
 		Detached,
+		Icon,
 		Field,
 		Embed,
 		Link,

package/dist/core/lib/contentType.d.ts

@@ -1,3 +1,4 @@
+import { IconId, IconValue } from "./iconTypes.js";
 import * as _$_sinclair_typebox0 from "@sinclair/typebox";
 import { Static, TArray, TObject, TSchema, TUnsafe } from "@sinclair/typebox";
 
@@ -79,6 +80,10 @@ type FileValue = {
  * All fields must have default values.
  */
 declare const Type$1: {
+  Icon: (options: {
+    default: IconId;
+    title?: string;
+  }) => TUnsafe<IconValue>;
   /**
    * Creates a string field with a required default value.
    *

package/dist/core/lib/contentType.js

@@ -127,6 +127,17 @@ function _fileList(options) {
 * All fields must have default values.
 */
 const Type$1 = {
+	Icon: (options) => {
+		const ids = typeof __CAMOX_ICON_IDS__ === "undefined" ? [] : __CAMOX_ICON_IDS__;
+		if (!ids.includes(options.default)) throw new Error(`Invalid icon default "${String(options.default)}". Configure icons in camox() first.`);
+		return Type.Unsafe({
+			type: "string",
+			fieldType: "Icon",
+			enum: [...ids],
+			default: options.default,
+			title: options.title
+		});
+	},
 	/**
 	* Creates a string field with a required default value.
 	*

package/dist/core/lib/fieldTypes.js

@@ -1,5 +1,6 @@
 //#region src/core/lib/fieldTypes.tsx
 const fieldTypesDictionary = {
+	Icon: { hasOwnView: true },
 	String: { hasOwnView: true },
 	Repeater: { hasOwnView: true },
 	Enum: { hasOwnView: true },

package/dist/core/lib/iconTypes.d.ts

@@ -0,0 +1,13 @@
+//#region src/core/lib/iconTypes.d.ts
+declare global {
+  interface CamoxIconRegistry {}
+}
+type IconId = CamoxIconRegistry extends {
+  ids: infer IDs extends string;
+} ? IDs : never;
+declare const iconBrand: unique symbol;
+type IconValue = string & {
+  readonly [iconBrand]: true;
+};
+//#endregion
+export { IconId, IconValue };

package/dist/core/lib/icons.d.ts

@@ -0,0 +1,6 @@
+import { QueryClient } from "@tanstack/react-query";
+import { SVGProps } from "react";
+//#region src/core/lib/icons.d.ts
+type IconProps = Omit<SVGProps<SVGSVGElement>, "children" | "dangerouslySetInnerHTML" | "name">;
+//#endregion
+export { IconProps };

package/dist/core/lib/icons.js

@@ -0,0 +1,130 @@
+import { c } from "react/compiler-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ICON_CATALOG_VERSION, scopeIconSvgIds } from "@camox/api-contract";
+
+//#region src/core/lib/icons.tsx
+const iconQuery = (id) => ({
+	queryKey: [
+		"camox-icon",
+		ICON_CATALOG_VERSION,
+		id
+	],
+	staleTime: Infinity,
+	queryFn: async () => {
+		if (!/^[a-z0-9-]+:[a-z0-9-]+$/.test(id)) throw new Error("Invalid icon ID");
+		const response = await fetch(`${__CAMOX_API_URL__}/icons/${ICON_CATALOG_VERSION}/${id.replace(":", "/")}`);
+		if (!response.ok) throw new Error(`Unable to resolve icon ${id}`);
+		return response.json();
+	}
+});
+function IconSvg(t0) {
+	const $ = c(22);
+	if ($[0] !== "8eab78246422a9042abf36067eb940cbd070510c54a187ee11896f87a1f6085b") {
+		for (let $i = 0; $i < 22; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "8eab78246422a9042abf36067eb940cbd070510c54a187ee11896f87a1f6085b";
+	}
+	let iconId;
+	let props;
+	if ($[1] !== t0) {
+		({iconId, ...props} = t0);
+		$[1] = t0;
+		$[2] = iconId;
+		$[3] = props;
+	} else {
+		iconId = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== iconId) {
+		t1 = iconQuery(iconId);
+		$[4] = iconId;
+		$[5] = t1;
+	} else t1 = $[5];
+	const { data } = useQuery(t1);
+	const t2 = useId();
+	let t3;
+	if ($[6] !== t2) {
+		let t4;
+		if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /[^a-zA-Z0-9_-]/g;
+			$[8] = t4;
+		} else t4 = $[8];
+		t3 = t2.replace(t4, "");
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	const instance = t3;
+	const t4 = data?.body ?? "";
+	const t5 = `camox-${instance}-`;
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5) {
+		t6 = scopeIconSvgIds(t4, t5);
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	const body = t6;
+	const labeled = !!(props["aria-label"] || props["aria-labelledby"]);
+	const t7 = data?.attributes;
+	const t8 = labeled ? void 0 : true;
+	const t9 = labeled ? "img" : void 0;
+	const t10 = data?.attribution?.url ?? data?.attribution?.license;
+	const t11 = data?.attribution?.author;
+	let t12;
+	if ($[12] !== body) {
+		t12 = { __html: body };
+		$[12] = body;
+		$[13] = t12;
+	} else t12 = $[13];
+	let t13;
+	if ($[14] !== props || $[15] !== t10 || $[16] !== t11 || $[17] !== t12 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+		t13 = /* @__PURE__ */ jsx("svg", {
+			...t7,
+			"aria-hidden": t8,
+			role: t9,
+			focusable: "false",
+			"data-icon-license": t10,
+			"data-icon-author": t11,
+			...props,
+			dangerouslySetInnerHTML: t12
+		});
+		$[14] = props;
+		$[15] = t10;
+		$[16] = t11;
+		$[17] = t12;
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t9;
+		$[21] = t13;
+	} else t13 = $[21];
+	return t13;
+}
+async function prefetchIcons(client, ...sources) {
+	const ids = /* @__PURE__ */ new Set();
+	const allowed = /* @__PURE__ */ new Set();
+	const collectSchemas = (value) => {
+		if (!value || typeof value !== "object") return;
+		const schema = value;
+		if (schema.fieldType === "Icon" && Array.isArray(schema.enum)) {
+			for (const id of schema.enum) if (typeof id === "string") allowed.add(id);
+			return;
+		}
+		Object.values(value).forEach(collectSchemas);
+	};
+	sources.forEach(collectSchemas);
+	const walk = (value) => {
+		if (!value || typeof value !== "object") return;
+		for (const [key, child] of Object.entries(value)) {
+			if (key === "enum") continue;
+			if (typeof child === "string" && allowed.has(child)) ids.add(child);
+			else walk(child);
+		}
+	};
+	sources.forEach(walk);
+	await Promise.all([...ids].map((id) => client.fetchQuery(iconQuery(id))));
+}
+
+//#endregion
+export { IconSvg, prefetchIcons };

package/dist/core/lib/lexicalReact.js

@@ -1,7 +1,7 @@
 import { FORMAT_FLAGS } from "./modifierFormats.js";
 import { getPageIdFromTextLinkTarget, isHttpTextLinkTarget, resolveTextLinkHref, shouldOpenTextLinkInNewTab } from "./textLinks.js";
 import { isLexicalState, markdownToLexicalState } from "./lexicalState.js";
-import { getGradientStyle, getTextAppearance } from "./textStyles.js";
+import { getHighlightStyle, getTextAppearance } from "./textStyles.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -23,9 +23,9 @@ function markdownToReactNodes(value, options = {}) {
 		}
 		if (node.type === "linebreak") return /* @__PURE__ */ jsx("br", {}, key);
 		const children = (node.children ?? []).map(render);
-		if (node.type === "gradient") return /* @__PURE__ */ jsx("span", {
-			"data-camox-gradient": "",
-			...getGradientStyle(options),
+		if (node.type === "highlight") return /* @__PURE__ */ jsx("span", {
+			"data-camox-highlight": "",
+			...getHighlightStyle(options),
 			children
 		}, key);
 		if (node.type === "link") {

package/dist/core/lib/lexicalState.js

@@ -36,7 +36,7 @@ function lexicalStateToMarkdown(serialized) {
 	}
 }
 function extractMarkdownFromNode(node) {
-	if (node.type === "gradient") return `<gradient>${serializeInlineChildren(node.children ?? [])}</gradient>`;
+	if (node.type === "highlight") return `<highlight>${serializeInlineChildren(node.children ?? [])}</highlight>`;
 	if (node.type === "link") {
 		const text = serializeInlineChildren(node.children ?? []);
 		const url = typeof node.url === "string" ? node.url : "";
@@ -50,9 +50,9 @@ function extractMarkdownFromNode(node) {
 function serializeInlineChildren(nodes) {
 	const marks = [
 		{
-			flag: FORMAT_FLAGS.underline,
-			open: "<u>",
-			close: "</u>"
+			flag: FORMAT_FLAGS.strikethrough,
+			open: "<s>",
+			close: "</s>"
 		},
 		{
 			flag: FORMAT_FLAGS.bold,
@@ -90,7 +90,7 @@ function serializeInlineChildren(nodes) {
 		let text = (node.text ?? "").replace(/[\\*_[\]<>]/g, "\\$&");
 		if (node.format & FORMAT_FLAGS.italic) text = `<em>${text}</em>`;
 		if (node.format & FORMAT_FLAGS.bold) text = `<strong>${text}</strong>`;
-		if (node.format & FORMAT_FLAGS.underline) text = `<u>${text}</u>`;
+		if (node.format & FORMAT_FLAGS.strikethrough) text = `<s>${text}</s>`;
 		return text;
 	}).join("");
 }
@@ -204,7 +204,7 @@ function parseTokens(tokens, format) {
 			else nodes.push(...children);
 			continue;
 		}
-		const tag = token.type === "html" ? /^<(gradient|u|strong|em)>$/.exec(token.raw)?.[1] : void 0;
+		const tag = token.type === "html" ? /^<(highlight|s|strong|em)>$/.exec(token.raw)?.[1] : void 0;
 		if (tag) {
 			let depth = 1;
 			let end = i + 1;
@@ -216,12 +216,12 @@ function parseTokens(tokens, format) {
 			}
 			if (!depth) {
 				const tagFlags = {
-					u: FORMAT_FLAGS.underline,
+					s: FORMAT_FLAGS.strikethrough,
 					strong: FORMAT_FLAGS.bold,
 					em: FORMAT_FLAGS.italic
 				};
 				const children = parseTokens(tokens.slice(i + 1, end), format | (tagFlags[tag] ?? 0));
-				if (tag === "gradient") nodes.push(inlineElement("gradient", children));
+				if (tag === "highlight") nodes.push(inlineElement("highlight", children));
 				else nodes.push(...children);
 				i = end;
 				continue;