@questpie/admin 2.0.0 → 3.0.0

package/dist/client/components/blocks/block-item.mjs

@@ -1,15 +1,17 @@
 "use client";
 
+import { useTranslation } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { Card, CardContent, CardHeader } from "../ui/card.mjs";
-import { useBlockEditor, useBlockSchema, useIsBlockExpanded } from "./block-editor-context.mjs";
+import { useBlockEditorActions, useBlockSchema, useBlockValues, useIsBlockExpanded } from "./block-editor-context.mjs";
 import { BlockInsertButton } from "./block-insert-button.mjs";
 import { BlockFieldsRenderer } from "./block-fields-renderer.mjs";
 import { BlockIcon } from "./block-type-icon.mjs";
 import { BlockItemDropdownMenu } from "./block-item-menu.mjs";
 import { BlockTree } from "./block-tree.mjs";
+import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
-import * as React$1 from "react";
+import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -21,134 +23,377 @@ import { CSS } from "@dnd-kit/utilities";
 * Single block item with inline editable fields.
 * Click header to expand/collapse, drag handle for reordering.
 */
-function BlockItem({ block, level, index: _index, parentId: _parentId }) {
-	const { state, actions } = useBlockEditor();
+function areBlockItemPropsEqual(prev, next) {
+	return prev.block === next.block && prev.level === next.level && prev.index === next.index && prev.parentId === next.parentId;
+}
+const BlockItem = React.memo(function BlockItem$1(t0) {
+	const $ = c(100);
+	const { block, level } = t0;
+	const { t } = useTranslation();
+	const actions = useBlockEditorActions();
 	const blockSchema = useBlockSchema(block.type);
+	const values = useBlockValues(block.id);
 	const isExpanded = useIsBlockExpanded(block.id);
+	const isUnknownType = !blockSchema;
 	const canHaveChildren = blockSchema?.allowChildren ?? false;
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver, active } = useSortable({ id: block.id });
-	const style = {
-		transform: CSS.Transform.toString(transform),
-		transition
-	};
+	let t1;
+	if ($[0] !== block.id) {
+		t1 = { id: block.id };
+		$[0] = block.id;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging, isOver, active } = useSortable(t1);
+	let t2;
+	if ($[2] !== transform) {
+		t2 = CSS.Transform.toString(transform);
+		$[2] = transform;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t2 || $[5] !== transition) {
+		t3 = {
+			transform: t2,
+			transition
+		};
+		$[4] = t2;
+		$[5] = transition;
+		$[6] = t3;
+	} else t3 = $[6];
+	const style = t3;
 	const showDropIndicator = isOver && active?.id !== block.id;
-	const values = state.content._values[block.id];
-	const blockLabel = getBlockLabel(block, blockSchema, values);
-	const handleToggleExpand = (e) => {
-		const target = e.target;
-		if (target.closest("[data-drag-handle]") || target.closest("[data-actions-menu]")) return;
-		actions.toggleExpanded(block.id);
-	};
-	const handleDuplicate = React$1.useCallback(() => {
-		actions.duplicateBlock(block.id);
-	}, [actions, block.id]);
-	const handleRemove = React$1.useCallback(() => {
-		actions.removeBlock(block.id);
-	}, [actions, block.id]);
-	const handleKeyDown = (e) => {
-		if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault();
+	let t4;
+	if ($[7] !== block || $[8] !== blockSchema || $[9] !== values) {
+		t4 = getBlockLabel(block, blockSchema, values);
+		$[7] = block;
+		$[8] = blockSchema;
+		$[9] = values;
+		$[10] = t4;
+	} else t4 = $[10];
+	const blockLabel = t4;
+	let t5;
+	if ($[11] !== actions || $[12] !== block.id) {
+		t5 = (e) => {
+			const target = e.target;
+			if (target.closest("[data-drag-handle]") || target.closest("[data-actions-menu]")) return;
 			actions.toggleExpanded(block.id);
-		}
-	};
+		};
+		$[11] = actions;
+		$[12] = block.id;
+		$[13] = t5;
+	} else t5 = $[13];
+	const handleToggleExpand = t5;
+	let t6;
+	if ($[14] !== actions || $[15] !== block.id) {
+		t6 = () => {
+			actions.duplicateBlock(block.id);
+		};
+		$[14] = actions;
+		$[15] = block.id;
+		$[16] = t6;
+	} else t6 = $[16];
+	const handleDuplicate = t6;
+	let t7;
+	if ($[17] !== actions || $[18] !== block.id) {
+		t7 = () => {
+			actions.removeBlock(block.id);
+		};
+		$[17] = actions;
+		$[18] = block.id;
+		$[19] = t7;
+	} else t7 = $[19];
+	const handleRemove = t7;
+	let t8;
+	if ($[20] !== actions || $[21] !== block.id) {
+		t8 = (e_0) => {
+			if (e_0.key === "Enter" || e_0.key === " ") {
+				e_0.preventDefault();
+				actions.toggleExpanded(block.id);
+			}
+		};
+		$[20] = actions;
+		$[21] = block.id;
+		$[22] = t8;
+	} else t8 = $[22];
+	const handleKeyDown = t8;
 	const isRoot = level === 0;
-	return /* @__PURE__ */ jsxs("div", {
-		ref: setNodeRef,
-		style,
-		className: cn("relative", isDragging && "opacity-50"),
-		children: [
-			showDropIndicator && /* @__PURE__ */ jsx("div", { className: "absolute -top-0.5 left-0 right-0 z-10 h-0.5 bg-primary" }),
-			/* @__PURE__ */ jsxs(Card, {
-				className: cn("overflow-hidden transition-shadow p-0 gap-0"),
-				children: [/* @__PURE__ */ jsxs(CardHeader, {
-					role: "button",
-					tabIndex: 0,
-					className: cn("group flex flex-row items-center gap-2 px-3 py-2 cursor-pointer select-none", "hover:bg-muted/50 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-inset"),
-					onClick: handleToggleExpand,
-					onKeyDown: handleKeyDown,
-					children: [
-						/* @__PURE__ */ jsx("button", {
-							type: "button",
-							"data-drag-handle": true,
-							className: "cursor-grab active:cursor-grabbing p-1 -ml-1 rounded hover:bg-muted",
-							...attributes,
-							...listeners,
-							onClick: (e) => e.stopPropagation(),
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: "ph:dots-six-vertical",
-								className: "h-4 w-4 text-muted-foreground"
-							})
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "text-muted-foreground",
-							children: /* @__PURE__ */ jsx(Icon, {
-								icon: "ph:caret-right",
-								className: cn("h-4 w-4 transition-transform duration-150 ease-in-out", isExpanded && "rotate-90")
-							})
-						}),
-						/* @__PURE__ */ jsx(BlockIcon, {
-							icon: blockSchema?.admin?.icon,
-							size: 14,
-							className: isRoot ? "text-foreground" : "text-muted-foreground"
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex-1 min-w-0 flex items-baseline gap-2",
-							children: [/* @__PURE__ */ jsx("span", {
-								className: cn("text-sm font-medium truncate", isRoot ? "text-foreground" : "text-foreground/90"),
-								children: blockLabel
-							}), values && /* @__PURE__ */ jsx("span", {
-								className: "text-xs text-muted-foreground truncate hidden sm:inline",
-								children: getPreviewText(values)
-							})]
-						}),
-						/* @__PURE__ */ jsx("div", {
-							"data-actions-menu": true,
-							children: /* @__PURE__ */ jsx(BlockItemDropdownMenu, {
-								blockId: block.id,
-								canHaveChildren,
-								onDuplicate: handleDuplicate,
-								onRemove: handleRemove,
-								className: "h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity"
-							})
-						})
-					]
-				}), isExpanded && blockSchema && /* @__PURE__ */ jsx(CardContent, {
-					className: cn("p-3", !isRoot && "py-2"),
-					children: /* @__PURE__ */ jsx(BlockFieldsRenderer, {
-						blockId: block.id,
-						blockSchema
-					})
-				})]
-			}),
-			canHaveChildren && isExpanded && block.children.length > 0 && /* @__PURE__ */ jsxs("div", {
-				className: "relative",
-				children: [/* @__PURE__ */ jsx("div", { className: "absolute left-3 top-0 bottom-0 w-px bg-border" }), /* @__PURE__ */ jsx("div", {
-					className: "pl-8 pt-2 space-y-2",
-					children: /* @__PURE__ */ jsx(BlockTree, {
-						blocks: block.children,
-						level: level + 1,
-						parentId: block.id
-					})
-				})]
-			}),
-			canHaveChildren && isExpanded && /* @__PURE__ */ jsxs("div", {
-				className: "pl-8 relative mt-2",
-				children: [
-					/* @__PURE__ */ jsx("div", { className: "absolute left-3 -top-2 w-px h-[calc(50%+8px)] bg-border" }),
-					/* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 w-5 h-px bg-border" }),
-					/* @__PURE__ */ jsx(BlockInsertButton, {
-						position: {
-							parentId: block.id,
-							index: block.children.length
-						},
-						variant: "rail",
-						parentLabel: blockLabel
-					})
-				]
+	const t9 = isDragging && "opacity-50";
+	let t10;
+	if ($[23] !== t9) {
+		t10 = cn("relative", t9);
+		$[23] = t9;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== showDropIndicator) {
+		t11 = showDropIndicator && /* @__PURE__ */ jsx("div", { className: "bg-primary absolute -top-0.5 right-0 left-0 z-10 h-0.5" });
+		$[25] = showDropIndicator;
+		$[26] = t11;
+	} else t11 = $[26];
+	const t12 = isUnknownType && "border-destructive/50";
+	let t13;
+	if ($[27] !== t12) {
+		t13 = cn("gap-0 overflow-hidden p-0 transition-shadow", t12);
+		$[27] = t12;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = cn("group flex cursor-pointer flex-row items-center gap-2 px-3 py-2 select-none", "hover:bg-muted transition-colors", "focus-visible:ring-primary focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset");
+		$[29] = t14;
+	} else t14 = $[29];
+	let t15;
+	if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:dots-six-vertical",
+			className: "text-muted-foreground h-4 w-4"
+		});
+		$[30] = t15;
+	} else t15 = $[30];
+	let t16;
+	if ($[31] !== attributes || $[32] !== listeners) {
+		t16 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"data-drag-handle": true,
+			className: "hover:bg-muted -ml-1 cursor-grab rounded p-1 active:cursor-grabbing",
+			...attributes,
+			...listeners,
+			onClick: _temp,
+			children: t15
+		});
+		$[31] = attributes;
+		$[32] = listeners;
+		$[33] = t16;
+	} else t16 = $[33];
+	const t17 = isExpanded && "rotate-90";
+	let t18;
+	if ($[34] !== t17) {
+		t18 = cn("h-4 w-4 transition-transform duration-150 ease-in-out", t17);
+		$[34] = t17;
+		$[35] = t18;
+	} else t18 = $[35];
+	let t19;
+	if ($[36] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:caret-right",
+				className: t18
 			})
-		]
-	});
-}
+		});
+		$[36] = t18;
+		$[37] = t19;
+	} else t19 = $[37];
+	let t20;
+	if ($[38] !== blockSchema?.admin?.icon || $[39] !== isRoot || $[40] !== isUnknownType) {
+		t20 = isUnknownType ? /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:warning",
+			className: "text-destructive h-3.5 w-3.5"
+		}) : /* @__PURE__ */ jsx(BlockIcon, {
+			icon: blockSchema?.admin?.icon,
+			size: 14,
+			className: isRoot ? "text-foreground" : "text-muted-foreground"
+		});
+		$[38] = blockSchema?.admin?.icon;
+		$[39] = isRoot;
+		$[40] = isUnknownType;
+		$[41] = t20;
+	} else t20 = $[41];
+	const t21 = isUnknownType ? "text-destructive" : isRoot ? "text-foreground" : "text-foreground/90";
+	let t22;
+	if ($[42] !== t21) {
+		t22 = cn("truncate text-sm font-medium", t21);
+		$[42] = t21;
+		$[43] = t22;
+	} else t22 = $[43];
+	let t23;
+	if ($[44] !== blockLabel || $[45] !== t22) {
+		t23 = /* @__PURE__ */ jsx("span", {
+			className: t22,
+			children: blockLabel
+		});
+		$[44] = blockLabel;
+		$[45] = t22;
+		$[46] = t23;
+	} else t23 = $[46];
+	let t24;
+	if ($[47] !== values) {
+		t24 = values && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground hidden truncate text-xs sm:inline",
+			children: getPreviewText(values)
+		});
+		$[47] = values;
+		$[48] = t24;
+	} else t24 = $[48];
+	let t25;
+	if ($[49] !== t23 || $[50] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 items-baseline gap-2",
+			children: [t23, t24]
+		});
+		$[49] = t23;
+		$[50] = t24;
+		$[51] = t25;
+	} else t25 = $[51];
+	let t26;
+	if ($[52] !== block.id || $[53] !== canHaveChildren || $[54] !== handleDuplicate || $[55] !== handleRemove) {
+		t26 = /* @__PURE__ */ jsx("div", {
+			"data-actions-menu": true,
+			children: /* @__PURE__ */ jsx(BlockItemDropdownMenu, {
+				blockId: block.id,
+				canHaveChildren,
+				onDuplicate: handleDuplicate,
+				onRemove: handleRemove,
+				className: "h-7 w-7 opacity-0 transition-opacity group-hover:opacity-100"
+			})
+		});
+		$[52] = block.id;
+		$[53] = canHaveChildren;
+		$[54] = handleDuplicate;
+		$[55] = handleRemove;
+		$[56] = t26;
+	} else t26 = $[56];
+	let t27;
+	if ($[57] !== handleKeyDown || $[58] !== handleToggleExpand || $[59] !== t16 || $[60] !== t19 || $[61] !== t20 || $[62] !== t25 || $[63] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(CardHeader, {
+			role: "button",
+			tabIndex: 0,
+			className: t14,
+			onClick: handleToggleExpand,
+			onKeyDown: handleKeyDown,
+			children: [
+				t16,
+				t19,
+				t20,
+				t25,
+				t26
+			]
+		});
+		$[57] = handleKeyDown;
+		$[58] = handleToggleExpand;
+		$[59] = t16;
+		$[60] = t19;
+		$[61] = t20;
+		$[62] = t25;
+		$[63] = t26;
+		$[64] = t27;
+	} else t27 = $[64];
+	let t28;
+	if ($[65] !== block.id || $[66] !== blockSchema || $[67] !== isExpanded || $[68] !== isRoot) {
+		t28 = isExpanded && blockSchema && /* @__PURE__ */ jsx(CardContent, {
+			className: cn("p-3", !isRoot && "py-2"),
+			children: /* @__PURE__ */ jsx(BlockFieldsRenderer, {
+				blockId: block.id,
+				blockSchema
+			})
+		});
+		$[65] = block.id;
+		$[66] = blockSchema;
+		$[67] = isExpanded;
+		$[68] = isRoot;
+		$[69] = t28;
+	} else t28 = $[69];
+	let t29;
+	if ($[70] !== block.type || $[71] !== isExpanded || $[72] !== isUnknownType || $[73] !== t) {
+		t29 = isExpanded && isUnknownType && /* @__PURE__ */ jsx(CardContent, {
+			className: "p-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "text-destructive flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:warning",
+					className: "h-4 w-4 shrink-0"
+				}), /* @__PURE__ */ jsx("span", { children: t("blocks.unknownType", { type: block.type }) })]
+			})
+		});
+		$[70] = block.type;
+		$[71] = isExpanded;
+		$[72] = isUnknownType;
+		$[73] = t;
+		$[74] = t29;
+	} else t29 = $[74];
+	let t30;
+	if ($[75] !== t13 || $[76] !== t27 || $[77] !== t28 || $[78] !== t29) {
+		t30 = /* @__PURE__ */ jsxs(Card, {
+			className: t13,
+			children: [
+				t27,
+				t28,
+				t29
+			]
+		});
+		$[75] = t13;
+		$[76] = t27;
+		$[77] = t28;
+		$[78] = t29;
+		$[79] = t30;
+	} else t30 = $[79];
+	let t31;
+	if ($[80] !== block.children || $[81] !== block.id || $[82] !== canHaveChildren || $[83] !== isExpanded || $[84] !== level) {
+		t31 = canHaveChildren && isExpanded && block.children.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-0 bottom-0 left-3 w-px" }), /* @__PURE__ */ jsx("div", {
+				className: "space-y-2 pt-2 pl-8",
+				children: /* @__PURE__ */ jsx(BlockTree, {
+					blocks: block.children,
+					level: level + 1,
+					parentId: block.id
+				})
+			})]
+		});
+		$[80] = block.children;
+		$[81] = block.id;
+		$[82] = canHaveChildren;
+		$[83] = isExpanded;
+		$[84] = level;
+		$[85] = t31;
+	} else t31 = $[85];
+	let t32;
+	if ($[86] !== block.children || $[87] !== block.id || $[88] !== blockLabel || $[89] !== canHaveChildren || $[90] !== isExpanded) {
+		t32 = canHaveChildren && isExpanded && /* @__PURE__ */ jsxs("div", {
+			className: "relative mt-2 pl-8",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "bg-border absolute -top-2 left-3 h-[calc(50%+8px)] w-px" }),
+				/* @__PURE__ */ jsx("div", { className: "bg-border absolute top-1/2 left-3 h-px w-5" }),
+				/* @__PURE__ */ jsx(BlockInsertButton, {
+					position: {
+						parentId: block.id,
+						index: block.children.length
+					},
+					variant: "rail",
+					parentLabel: blockLabel
+				})
+			]
+		});
+		$[86] = block.children;
+		$[87] = block.id;
+		$[88] = blockLabel;
+		$[89] = canHaveChildren;
+		$[90] = isExpanded;
+		$[91] = t32;
+	} else t32 = $[91];
+	let t33;
+	if ($[92] !== setNodeRef || $[93] !== style || $[94] !== t10 || $[95] !== t11 || $[96] !== t30 || $[97] !== t31 || $[98] !== t32) {
+		t33 = /* @__PURE__ */ jsxs("div", {
+			ref: setNodeRef,
+			style,
+			className: t10,
+			children: [
+				t11,
+				t30,
+				t31,
+				t32
+			]
+		});
+		$[92] = setNodeRef;
+		$[93] = style;
+		$[94] = t10;
+		$[95] = t11;
+		$[96] = t30;
+		$[97] = t31;
+		$[98] = t32;
+		$[99] = t33;
+	} else t33 = $[99];
+	return t33;
+}, areBlockItemPropsEqual);
 function getBlockLabel(block, blockSchema, values) {
 	if (values) {
 		const title = values.title || values.name || values.label || values.heading;
@@ -181,7 +426,9 @@ function getPreviewText(values) {
 	}
 	return "";
 }
+function _temp(e_1) {
+	return e_1.stopPropagation();
+}
 
 //#endregion
-export { BlockItem };
-//# sourceMappingURL=block-item.mjs.map
+export { BlockItem };