@jbpark/live-editor 1.10.0 → 1.11.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { _ as DRAGGABLE_ITEMS, b as __toESM, d as require_lib$1, f as require_lib, g as DEFAULT_TEMPLATE, p as BINDING_PROP } from "./document-DJDRM79h.mjs";
-import { a as detectTypeScript, c as generateSections, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-D1tlgtgj.mjs";
-import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-DiVN0l7x.mjs";
+import { _ as DEFAULT_TEMPLATE, f as require_lib$1, m as BINDING_PROP, n as createSectionPreviewCache, p as require_lib, v as DRAGGABLE_ITEMS, x as __toESM } from "./document-CBw2uF_P.mjs";
+import { a as detectTypeScript, d as replaceSections, i as compile, l as getCachedScriptBlob, n as clearCompilationCache, o as extractSections, r as cn, s as generateSection, t as baseModules, u as preloadScripts } from "./utils-BjYg1Sh8.mjs";
+import { _ as parseArrayExpression, c as extract, d as getCurrentValue, f as parseBinding, g as extractObjectProperties, h as extractNodeValue, i as replaceIds, l as nanoid, m as createNodeFromValue, n as clone, o as update, p as arrayExpressionToCode, r as fillIds, t as validateBindingValue, u as findEditableChildren, v as parseValue, y as generateCode } from "./ast-C0FNDLFQ.mjs";
 import { generateTailwindCSS } from "./utils/tailwind/index.mjs";
 import "@jbpark/ui-kit/style.css";
 import React, { createContext, memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -9,7 +9,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndContext, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
+import { useDebounce, useDebouncedValue, useEventListener, useMultiSelect, useMutationObserver, useResizeObserver, useResponsiveSize } from "@jbpark/use-hooks";
 import { AlertCircle, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bookmark, Calendar, Camera, Check, ChevronDown, ChevronRight, Clock, Copy, Download, Edit, Eye, Filter, Heart, Home, Image, Info, LayoutGrid, Link, Mail, Map as Map$1, Menu, MessageCircle, Phone, Plus, Search, Settings, Share, ShoppingCart, Star, Trash, Upload as Upload$1, User, X } from "lucide-react";
 import { v4 } from "uuid";
 import { createPortal } from "react-dom";
@@ -70,6 +70,42 @@ const ContextProvider = ({ children }) => {
 	});
 };
 
+//#endregion
+//#region src/components/frame/measure.ts
+const FALLBACK_PROBE_HEIGHT = 812;
+const computeProbeHeight = (scrollContainerClientHeight, wrapperInsets) => {
+	const usable = scrollContainerClientHeight - wrapperInsets;
+	return usable > 0 ? usable : null;
+};
+const isVisuallyHidden = (computed) => computed.visibility === "hidden" || computed.opacity === "0";
+const parseTranslateY = (transform) => {
+	if (!transform || transform === "none") return 0;
+	const translateYMatch = transform.match(/translateY\(\s*([+-]?\d*\.?\d+)/);
+	if (translateYMatch?.[1]) return parseFloat(translateYMatch[1]);
+	const translateMatch = transform.match(/translate\([^,]+,\s*([+-]?\d*\.?\d+)/);
+	if (translateMatch?.[1]) return parseFloat(translateMatch[1]);
+	const matrixMatch = transform.match(/matrix\(\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*[^,]+,\s*([+-]?\d*\.?\d+)/);
+	return matrixMatch?.[1] ? parseFloat(matrixMatch[1]) : 0;
+};
+const estimatePositionedElementHeight = (offsetHeight, transform, probeHeight) => {
+	const offsetY = parseTranslateY(transform);
+	return Math.min(offsetY + offsetHeight, probeHeight);
+};
+
+//#endregion
+//#region src/components/frame/viewport-units.ts
+const UNIT_MAP = {
+	vh: "cqh",
+	svh: "cqh",
+	lvh: "cqh",
+	dvh: "cqh",
+	vmin: "cqmin",
+	vmax: "cqmax"
+};
+const UNITS_PATTERN = Object.keys(UNIT_MAP).sort((a, b) => b.length - a.length).join("|");
+const VIEWPORT_UNIT_RE = new RegExp(`(?<![\\w.-])(-?(?:\\d+\\.?\\d*|\\.\\d+))(${UNITS_PATTERN})(?![a-zA-Z0-9_-])`, "gi");
+const convertViewportUnits = (css) => css.replace(VIEWPORT_UNIT_RE, (_match, number, unit) => number + UNIT_MAP[unit.toLowerCase()]);
+
 //#endregion
 //#region src/components/frame/iframe.tsx
 const EMPTY_STRING_ARRAY = [];
@@ -113,7 +149,7 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 			const fragment = doc.createDocumentFragment();
 			newStyles.forEach((content) => {
 				const style = doc.createElement("style");
-				style.textContent = content;
+				style.textContent = convertViewportUnits(content);
 				fragment.appendChild(style);
 			});
 			doc.head.appendChild(fragment);
@@ -187,7 +223,8 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 				styleEl.id = styleId;
 				doc.head.appendChild(styleEl);
 			}
-			if (styleEl.textContent !== css) styleEl.textContent = css;
+			const convertedCss = convertViewportUnits(css);
+			if (styleEl.textContent !== convertedCss) styleEl.textContent = convertedCss;
 		});
 		for (let index = styles.length; index < prevStyleCountRef.current; index++) doc.getElementById(`injected-style-${index}`)?.remove();
 		prevStyleCountRef.current = styles.length;
@@ -205,50 +242,74 @@ const IFrame = ({ title = "Live Preview", sandbox, style = {}, scripts = EMPTY_S
 		for (let index = stylesheets.length; index < prevStylesheetCountRef.current; index++) doc.getElementById(`injected-stylesheet-${index}`)?.remove();
 		prevStylesheetCountRef.current = stylesheets.length;
 	}, [styles, stylesheets]);
+	const CONTAINER_STYLE_ID = "autoheight-container";
+	const ensureContainerStyle = (doc, probeHeight) => {
+		let styleEl = doc.getElementById(CONTAINER_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = CONTAINER_STYLE_ID;
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.textContent = `html { container-type: size !important; height: ${probeHeight}px !important; }`;
+	};
+	const MEASUREMENT_OVERRIDE_STYLE_ID = "autoheight-measurement-overrides";
+	const withMeasurementOverrides = (doc, measure) => {
+		let styleEl = doc.getElementById(MEASUREMENT_OVERRIDE_STYLE_ID);
+		if (!styleEl) {
+			styleEl = doc.createElement("style");
+			styleEl.id = MEASUREMENT_OVERRIDE_STYLE_ID;
+			styleEl.media = "not all";
+			styleEl.textContent = [
+				"*, *::before, *::after { transition: none !important; }",
+				"html, body { scrollbar-width: none !important; }",
+				"html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; }"
+			].join("\n");
+			doc.head?.appendChild(styleEl);
+		}
+		styleEl.media = "all";
+		measure();
+		styleEl.media = "not all";
+	};
 	const updateHeight = useCallback(() => {
 		if (!shouldAutoHeight || !mountNode || !iframeRef.current) return;
 		const iframe = iframeRef.current;
+		const doc = iframe.contentDocument;
+		const win = doc?.defaultView;
+		if (!doc || !win) return;
 		const scrollParent = iframe.closest("[data-frame-container]");
-		const savedScrollTop = scrollParent?.scrollTop ?? 0;
-		iframe.style.height = "0px";
-		let childrenHeight = 0;
-		Array.from(mountNode.children).forEach((child) => {
-			const el = child;
-			childrenHeight = Math.max(childrenHeight, el.scrollHeight);
-		});
-		const win = iframe.contentDocument?.defaultView;
-		mountNode.querySelectorAll("[data-floating-ui-focusable]").forEach((popup) => {
-			if (popup.offsetHeight > 0) {
-				let offsetY = 0;
-				const transform = popup.style.transform;
-				if (transform) {
-					const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-					if (match?.[1]) offsetY = parseFloat(match[1]);
-				}
-				const estimatedHeight = offsetY + popup.offsetHeight;
-				childrenHeight = Math.max(childrenHeight, estimatedHeight);
-			}
-		});
-		if (win) Array.from(mountNode.children).forEach((child) => {
-			const el = child;
-			const style = win.getComputedStyle(el);
-			if (style.position === "fixed" || style.position === "absolute") {
-				if (el.offsetHeight > 0) {
-					let offsetY = 0;
-					const transform = el.style.transform;
-					if (transform) {
-						const match = transform.match(/translate\([^,]+,\s*([+-]?\d+(?:\.\d+)?)/);
-						if (match?.[1]) offsetY = parseFloat(match[1]);
-					}
-					const estimatedHeight = offsetY + el.offsetHeight;
-					childrenHeight = Math.max(childrenHeight, estimatedHeight);
+		let probeHeight;
+		if (!scrollParent) probeHeight = FALLBACK_PROBE_HEIGHT;
+		else {
+			let wrapperInsets = 0;
+			let node = iframe.parentElement;
+			while (node && node !== scrollParent) {
+				const style = win.getComputedStyle(node);
+				wrapperInsets += parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth) + parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+				node = node.parentElement;
+			}
+			const computed = computeProbeHeight(scrollParent.clientHeight, wrapperInsets);
+			if (computed === null) return;
+			probeHeight = computed;
+		}
+		let contentHeight = 0;
+		withMeasurementOverrides(doc, () => {
+			ensureContainerStyle(doc, probeHeight);
+			contentHeight = mountNode.scrollHeight;
+			mountNode.querySelectorAll("*").forEach((el) => {
+				const style = win.getComputedStyle(el);
+				if (isVisuallyHidden(style)) return;
+				if ((style.position === "fixed" || style.position === "absolute") && el.offsetHeight > 0) {
+					const estimatedHeight = estimatePositionedElementHeight(el.offsetHeight, style.transform, probeHeight);
+					contentHeight = Math.max(contentHeight, estimatedHeight);
 				}
-			}
+			});
 		});
-		const contentHeight = Math.max(mountNode.scrollHeight, childrenHeight);
 		if (contentHeight > 0) iframe.style.height = `${Math.ceil(contentHeight)}px`;
-		if (scrollParent) scrollParent.scrollTop = savedScrollTop;
 	}, [shouldAutoHeight, mountNode]);
+	useEffect(() => {
+		if (shouldAutoHeight) return;
+		iframeRef.current?.contentDocument?.getElementById(CONTAINER_STYLE_ID)?.remove();
+	}, [shouldAutoHeight]);
 	useEffect(() => {
 		updateHeight();
 	}, [updateHeight]);
@@ -12236,6 +12297,43 @@ const parseDateValue = (value) => {
 const formatDateValue = (date) => {
 	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
 };
+const COLOR_COMMIT_DELAY = 75;
+const ColorPickerField = ({ id, label, value, onChange }) => {
+	const [liveValue, setLiveValue] = useState(value);
+	const [prevValue, setPrevValue] = useState(value);
+	const lastCommittedRef = useRef(value);
+	if (value !== prevValue) {
+		setPrevValue(value);
+		setLiveValue(value);
+	}
+	useEffect(() => {
+		lastCommittedRef.current = value;
+	}, [value]);
+	const commit = (next) => {
+		if (next === lastCommittedRef.current) return;
+		lastCommittedRef.current = next;
+		onChange?.({
+			id,
+			label,
+			value: next
+		});
+	};
+	const debouncedCommit = useDebounce(() => commit(liveValue), {
+		delay: COLOR_COMMIT_DELAY,
+		autoInvoke: false
+	});
+	return /* @__PURE__ */ jsx(ColorPicker, {
+		showText: true,
+		value: liveValue,
+		onChange: (next) => {
+			setLiveValue(next);
+			debouncedCommit();
+		},
+		onOpenChange: (open) => {
+			if (!open) commit(liveValue);
+		}
+	});
+};
 const ICON_OPTIONS = Object.entries(ICON_MAP).map(([name, Icon]) => ({
 	label: /* @__PURE__ */ jsxs("span", {
 		className: "flex items-center gap-2",
@@ -12350,16 +12448,11 @@ const Field = ({ binding, id, value, onChange }) => {
 			});
 		}
 	});
-	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPicker, {
-		showText: true,
+	if (binding.type === "color" || isColorProperty(binding.property)) return /* @__PURE__ */ jsx(ColorPickerField, {
+		id,
+		label: binding.label,
 		value: normalizeToHex(stringValue),
-		onChange: (next) => {
-			if (next !== value) onChange?.({
-				id,
-				label: binding.label,
-				value: next
-			});
-		}
+		onChange
 	});
 	if (binding.type === "date") return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(DatePicker, {
 		defaultValue: parseDateValue(stringValue),
@@ -12639,7 +12732,12 @@ const Dnd$1 = ({ value: _value, props, modules = {}, onChange: _onChange, classN
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 10 } }));
 	const value = _value || DEFAULT_TEMPLATE;
 	const sections = useMemo(() => extractSections(value), [value]);
-	const previews = useMemo(() => generateSections(sections.map((s) => s.code), value), [sections, value]);
+	const [previewCache] = useState(() => createSectionPreviewCache());
+	const previews = useMemo(() => previewCache.compute(value, sections), [
+		previewCache,
+		sections,
+		value
+	]);
 	const onDragStart = (_) => {};
 	const onDragOver = (_e) => {};
 	const onDragEnd = (event) => {