@b10cks/client 1.11.0 → 2.0.0

package/dist/index.mjs

@@ -261,16 +261,26 @@ function f(e) {
 }
 //#endregion
 //#region src/preview-bridge.ts
-var p = /* @__PURE__ */ new Set([
-	"CONTENT_UPDATE",
-	"CONTENT_PATCH",
-	"SELECT_UPDATE",
-	"HOVER_UPDATE",
-	"FIELD_UPDATE",
-	"FIELD_SELECT"
-]), m = "B10CKS_BRIDGE_READY", h = class e {
+var p = (e) => typeof e == "object" && !!e && !Array.isArray(e), m = (e) => Array.isArray(e) && e.every((e) => typeof e == "string" || typeof e == "number" && Number.isInteger(e) && e >= 0), h = [
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"p"
+], g = (e) => p(e) && (e.features === void 0 || p(e.features) && Object.values(e.features).every((e) => typeof e == "boolean")) && (e.headingLevels === void 0 || Array.isArray(e.headingLevels) && e.headingLevels.every((e) => h.some((t) => t === e))), _ = (e) => e.selectedItem === null || typeof e.selectedItem == "string", ee = {
+	CONTENT_UPDATE: (e) => p(e.content),
+	CONTENT_PATCH: (e) => m(e.path) && "value" in e && (e.itemId === void 0 || typeof e.itemId == "string"),
+	SELECT_UPDATE: _,
+	HOVER_UPDATE: _,
+	FIELD_CONFIG: (e) => typeof e.itemId == "string" && e.itemId !== "" && m(e.path) && g(e.richtext),
+	BLOCK_LABELS: (e) => p(e.labels) && Object.values(e.labels).every((e) => typeof e == "string"),
+	HIDDEN_BLOCKS: (e) => Array.isArray(e.ids) && e.ids.every((e) => typeof e == "string")
+}, te = (e) => typeof e == "string" && Object.hasOwn(ee, e), ne = "B10CKS_BRIDGE_READY", re = 3, ie = class e {
 	static instance;
 	listeners = {};
+	received = {};
 	initialized = !1;
 	allowedOrigins = null;
 	parentOrigin = null;
@@ -284,12 +294,15 @@ var p = /* @__PURE__ */ new Set([
 				e.allowedOrigins && !this.allowedOrigins && (this.allowedOrigins = e.allowedOrigins, this.parentOrigin && !this.allowedOrigins.includes(this.parentOrigin) && (this.parentOrigin = null));
 				return;
 			}
-			this.allowedOrigins = e.allowedOrigins ?? null, window.addEventListener("message", this.handleMessage), this.initialized = !0, window.parent.postMessage({ type: m }, "*");
+			this.allowedOrigins = e.allowedOrigins ?? null, window.addEventListener("message", this.handleMessage), this.initialized = !0, window.parent.postMessage({
+				type: ne,
+				payload: { protocol: 3 }
+			}, "*");
 		}
 	}
 	destroy() {
 		this.initialized && typeof window < "u" && window.removeEventListener("message", this.handleMessage), this.initialized = !1, this.parentOrigin = null;
-		for (let e of Object.keys(this.listeners)) this.listeners[e]?.clear();
+		for (let e of Object.keys(this.listeners)) this.listeners[e]?.clear(), delete this.received[e];
 	}
 	isInPreviewMode() {
 		return typeof window < "u" && window.self !== window.top;
@@ -301,6 +314,9 @@ var p = /* @__PURE__ */ new Set([
 			n.delete(t);
 		};
 	}
+	latest(e) {
+		return this.received[e];
+	}
 	selectItem(e) {
 		this.post("SELECT_UPDATE", { selectedItem: e });
 	}
@@ -324,6 +340,22 @@ var p = /* @__PURE__ */ new Set([
 			value: n
 		});
 	}
+	patchLocal(e) {
+		this.isInPreviewMode() && this.notify("CONTENT_PATCH", e);
+	}
+	blockAction(e, t) {
+		this.post("BLOCK_ACTION", {
+			itemId: e,
+			action: t
+		});
+	}
+	moveBlock(e, t, n) {
+		this.post("BLOCK_MOVE", {
+			itemId: e,
+			targetId: t,
+			position: n
+		});
+	}
 	post(e, t) {
 		this.isInPreviewMode() && window.parent.postMessage({
 			type: e,
@@ -333,87 +365,495 @@ var p = /* @__PURE__ */ new Set([
 	handleMessage = (e) => {
 		if (!this.isOriginTrusted(e.origin) || !e.data || typeof e.data != "object") return;
 		let { type: t, payload: n } = e.data;
-		!t || !p.has(t) || !n || (!this.parentOrigin && e.origin && e.origin !== "null" && (this.parentOrigin = e.origin), this.notify(t, n));
+		te(t) && p(n) && ee[t](n) && (!this.parentOrigin && e.origin && e.origin !== "null" && (this.parentOrigin = e.origin), this.notify(t, n));
 	};
 	isOriginTrusted(e) {
 		return this.parentOrigin ? e === this.parentOrigin : !this.allowedOrigins || this.allowedOrigins.includes(e);
 	}
 	notify(e, t) {
+		this.received[e] = t;
 		let n = this.listeners[e];
 		if (n) for (let e of n) e(t);
 	}
-}, g = h.getInstance(), _ = "b10cks-preview-style", v = "--b10cks-scroll-offset";
-function y() {
-	if (typeof document > "u" || document.getElementById(_)) return;
+}, v = ie.getInstance(), y = "rgb(59, 130, 246)", ae = 2, oe = `
+  :host { all: initial; position: fixed; inset: 0; pointer-events: none; z-index: 2147483647; }
+  [hidden] { display: none !important; }
+  .box {
+    position: fixed; top: 0; left: 0; box-sizing: border-box;
+    border: ${ae}px solid ${y}; border-radius: 2px;
+  }
+  .box.hover { border-style: dashed; border-color: rgba(59, 130, 246, 0.6); }
+  .label {
+    position: absolute; left: 6px; bottom: 100%; margin-bottom: ${ae}px;
+    display: flex; align-items: center; padding: 0 6px; border-radius: 3px 3px 0 0; white-space: nowrap;
+    font: 500 11px/16px system-ui, -apple-system, sans-serif;
+    color: #fff; background: ${y};
+  }
+  .label:empty, .name:empty, .crumbs:empty { display: none; }
+  .box.hover .label { background: rgba(59, 130, 246, 0.8); }
+  .box[data-inside] .label { bottom: auto; top: 0; margin: 0; border-radius: 0 0 3px 3px; }
+  .bar { pointer-events: auto; line-height: 20px; padding-right: 2px; user-select: none; -webkit-user-select: none; }
+  .crumbs { display: flex; align-items: center; }
+  .crumb { all: unset; cursor: pointer; opacity: 0.75; max-width: 12em; overflow: hidden; text-overflow: ellipsis; border-radius: 2px; }
+  .crumb:hover { opacity: 1; text-decoration: underline; }
+  .sep, .more { opacity: 0.6; padding: 0 4px; }
+  .name { max-width: 16em; overflow: hidden; text-overflow: ellipsis; }
+  .tools { display: flex; margin-left: 6px; padding-left: 2px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
+  .tool {
+    all: unset; box-sizing: border-box; display: grid; place-items: center;
+    width: 20px; height: 20px; border-radius: 2px; cursor: pointer;
+  }
+  .tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); }
+  .tool[aria-pressed='true'] { background: rgba(255, 255, 255, 0.3); }
+  .tool:disabled { opacity: 0.4; cursor: default; }
+  .tool svg { width: 14px; height: 14px; }
+  .handle { cursor: grab; touch-action: none; }
+  :host([data-dragging]) .handle { cursor: grabbing; }
+  .crumb:focus-visible, .tool:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
+  .indicator {
+    position: fixed; top: 0; left: 0; border-radius: 2px;
+    background: ${y}; box-shadow: 0 0 0 1px #fff;
+  }
+`, se = [
+	{
+		action: "move-up",
+		label: "Move up",
+		icon: "<path d=\"M12 19V5M6 11l6-6 6 6\"/>"
+	},
+	{
+		action: "move-down",
+		label: "Move down",
+		icon: "<path d=\"M12 5v14M6 13l6 6 6-6\"/>"
+	},
+	{
+		action: "insert-before",
+		label: "Add block before",
+		icon: "<path d=\"M4 4h16M12 9v10M7 14h10\"/>"
+	},
+	{
+		action: "insert-after",
+		label: "Add block after",
+		icon: "<path d=\"M4 20h16M12 5v10M7 10h10\"/>"
+	},
+	{
+		action: "duplicate",
+		label: "Duplicate",
+		icon: "<rect x=\"8\" y=\"8\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2\"/>"
+	},
+	{
+		action: "delete",
+		label: "Delete",
+		icon: "<path d=\"M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3\"/>"
+	}
+], ce = "<path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/>", le = "<path d=\"M10.7 5.1A10.4 10.4 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-1.7 2.6M6.6 6.6A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M9.9 9.9a3 3 0 0 0 4.2 4.2M2 2l20 20\"/>", ue = "<g fill=\"currentColor\" stroke=\"none\"><circle cx=\"9\" cy=\"6\" r=\"1.5\"/><circle cx=\"15\" cy=\"6\" r=\"1.5\"/><circle cx=\"9\" cy=\"12\" r=\"1.5\"/><circle cx=\"15\" cy=\"12\" r=\"1.5\"/><circle cx=\"9\" cy=\"18\" r=\"1.5\"/><circle cx=\"15\" cy=\"18\" r=\"1.5\"/></g>", de = "Alt/Option-click to use links and buttons on the page";
+function fe(e) {
+	let t = document.createElement("div");
+	t.id = "b10cks-overlay";
+	let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
+	r.textContent = oe, n.appendChild(r);
+	let i = b("div", "box hover");
+	i.hidden = !0;
+	let a = b("div", "label name");
+	i.appendChild(a);
+	let o = b("div", "box selected");
+	o.hidden = !0;
+	let s = b("div", "label bar"), c = b("span", "crumbs"), l = b("span", "name");
+	l.title = de;
+	let u = b("div", "tools");
+	u.setAttribute("role", "toolbar"), u.setAttribute("aria-label", "Block actions");
+	let d = b("div", "tool handle");
+	d.title = "Drag to move", d.setAttribute("aria-hidden", "true"), d.innerHTML = x(ue), d.addEventListener("pointerdown", (t) => e.onDragStart(t, d)), u.appendChild(d);
+	let f = /* @__PURE__ */ new Map();
+	for (let t of se) {
+		let n = b("button", "tool");
+		n.type = "button", n.title = t.label, n.setAttribute("aria-label", t.label), n.innerHTML = x(t.icon), n.addEventListener("click", () => e.onAction(t.action)), f.set(t.action, n), u.appendChild(n);
+	}
+	let p = !1, m = b("button", "tool");
+	m.type = "button", m.addEventListener("click", () => e.onAction(p ? "show" : "hide"));
+	let h = (e) => {
+		p = e;
+		let t = p ? "Show" : "Hide";
+		m.title = t, m.setAttribute("aria-label", t), m.setAttribute("aria-pressed", String(p)), m.innerHTML = x(p ? le : ce);
+	};
+	h(!1), u.insertBefore(m, f.get("delete") ?? null), s.append(c, l, u), o.appendChild(s);
+	let g = b("div", "indicator");
+	g.hidden = !0, n.append(i, o, g), document.body.appendChild(t);
+	let _ = "";
+	return {
+		host: t,
+		selected: {
+			box: o,
+			label: s,
+			name: l
+		},
+		hover: {
+			box: i,
+			label: a,
+			name: a
+		},
+		indicator: g,
+		renderBar(t) {
+			if (s.hidden = !t || !t.label && t.crumbs.length === 0 && !t.actions, !t) return;
+			let n = t.crumbs.map((e) => `${e.id}\u0000${e.label}`).join("
");
+			n !== _ && (_ = n, c.replaceChildren(...pe(t.crumbs, e.onSelect))), l.textContent = t.label, u.hidden = !t.actions, he(f.get("move-up"), !t.actions?.canMoveUp), he(f.get("move-down"), !t.actions?.canMoveDown);
+			let r = t.actions?.hidden ?? null;
+			m.hidden = r === null, r !== null && r !== p && h(r);
+		},
+		setDragging(e) {
+			t.toggleAttribute("data-dragging", e);
+		}
+	};
+}
+function pe(e, t) {
+	let n = [], r = e.slice(0, -3);
+	if (r.length > 0) {
+		let e = b("span", "more");
+		e.textContent = "…", e.title = r.map((e) => e.label).join(" › "), n.push(e, me());
+	}
+	for (let r of e.slice(-3)) {
+		let e = b("button", "crumb");
+		e.type = "button", e.textContent = r.label, e.title = `Select ${r.label}`, e.addEventListener("click", () => t(r.id)), n.push(e, me());
+	}
+	return n;
+}
+function me() {
+	let e = b("span", "sep");
+	return e.textContent = "›", e.setAttribute("aria-hidden", "true"), e;
+}
+function he(e, t) {
+	e && (e.disabled = t);
+}
+function b(e, t) {
+	let n = document.createElement(e);
+	return n.className = t, n;
+}
+function x(e) {
+	return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${e}</svg>`;
+}
+//#endregion
+//#region src/preview-overlay.ts
+var ge = {
+	selected: "b10cks-selected",
+	hover: "b10cks-hover"
+}, _e = "b10cks-hidden", S = 2, ve = 24, C = 3, w = /* @__PURE__ */ new Map(), T = {
+	selected: null,
+	hover: null
+}, E = null, D = null, O = null, k = null, A = null, j = !1, M = !1, N = !1, P = null;
+function F(e, t) {
+	return w.set(e, t), t.kind === "block" && e.classList.toggle(_e, ze(t.id) === !0), D ||= ye(), t.kind === "block" && t.id === E && W(), () => {
+		if (w.get(e) === t) {
+			w.delete(e), t.kind === "block" && e.classList.remove(_e);
+			for (let t of ["selected", "hover"]) T[t] === e && (T[t] = null, e.classList.remove(ge[t]));
+			w.size === 0 ? (D?.(), D = null) : W();
+		}
+	};
+}
+function ye() {
+	E = v.latest("SELECT_UPDATE")?.selectedItem ?? E, E && W();
+	let e = v.on("SELECT_UPDATE", ({ selectedItem: e }) => {
+		E = e || null;
+		let t = T.selected && w.get(T.selected);
+		(t?.kind !== "field" || e && e !== t.id) && G("selected", z(E));
+	}), t = v.on("HOVER_UPDATE", ({ selectedItem: e }) => {
+		G("hover", z(e || null));
+	}), n = v.on("BLOCK_LABELS", K), r = v.on("HIDDEN_BLOCKS", ({ ids: e }) => {
+		let t = new Set(e);
+		for (let [e, n] of w) n.kind === "block" && e.classList.toggle(_e, t.has(n.id));
+		K();
+	}), i = {
+		capture: !0,
+		passive: !0
+	};
+	return window.addEventListener("click", I, !0), window.addEventListener("auxclick", I, !0), window.addEventListener("keydown", be, !0), document.addEventListener("pointerover", we, !0), document.addEventListener("pointerout", Te, !0), window.addEventListener("scroll", q, i), window.addEventListener("resize", q), k = typeof ResizeObserver > "u" ? null : new ResizeObserver(q), A = typeof MutationObserver > "u" ? null : new MutationObserver(K), () => {
+		U(), e(), t(), n(), r(), window.removeEventListener("click", I, !0), window.removeEventListener("auxclick", I, !0), window.removeEventListener("keydown", be, !0), document.removeEventListener("pointerover", we, !0), document.removeEventListener("pointerout", Te, !0), window.removeEventListener("scroll", q, i), window.removeEventListener("resize", q), k?.disconnect(), k = null, A?.disconnect(), A = null, T.selected = null, T.hover = null, O?.host.remove(), O = null;
+	};
+}
+function I(e) {
+	if (e.altKey) return;
+	let t = Ee(e);
+	t && !w.get(t)?.isEditing?.() && (L(e), e.type === "click" && R(t, e));
+}
+function be(e) {
+	if (P) {
+		e.key === "Escape" && (L(e), U());
+		return;
+	}
+	let t = T.selected;
+	if (!t?.isConnected || e.defaultPrevented || xe(e) || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+	let n = null;
+	e.key === "Escape" ? n = V(t)[0] ?? null : e.key === "ArrowUp" ? n = H(t, -1) : e.key === "ArrowDown" && (n = H(t, 1)), n && (L(e), R(n));
+}
+function xe(e) {
+	let t = e.composedPath()[0];
+	return t instanceof HTMLElement && (t.isContentEditable || t.matches("input, textarea, select"));
+}
+function L(e) {
+	e.preventDefault(), e.stopImmediatePropagation();
+}
+function R(e, t) {
+	let n = w.get(e);
+	n && (n.activate(t), n.kind === "block" && (E = n.id), G("selected", e));
+}
+function Se(e) {
+	let t = z(e);
+	t && R(t);
+}
+function Ce(e) {
+	let t = T.selected && w.get(T.selected);
+	t?.kind === "block" && v.blockAction(t.id, e);
+}
+function we(e) {
+	G("hover", Ee(e));
+}
+function Te(e) {
+	e.relatedTarget || G("hover", null);
+}
+function Ee(e) {
+	for (let t of e.composedPath()) if (t instanceof HTMLElement && w.has(t)) return t;
+	return null;
+}
+function z(e) {
+	if (!e) return null;
+	let t = null;
+	for (let [n, r] of w) r.kind === "block" && r.id === e && n.isConnected && (!t || t.contains(n)) && (t = n);
+	return t;
+}
+function B(e) {
+	if (e.parentElement) return e.parentElement;
+	let t = e.parentNode;
+	return t instanceof ShadowRoot ? t.host : null;
+}
+function V(e) {
+	let t = [], n = w.get(e), r = n?.kind === "block" ? n.id : null;
+	for (let n = B(e); n; n = B(n)) {
+		if (!(n instanceof HTMLElement)) continue;
+		let e = w.get(n);
+		e?.kind === "block" && e.id !== r && (t.push(n), r = e.id);
+	}
+	return t;
+}
+function De(e) {
+	let t = V(e)[0];
+	return (t && w.get(t)?.id) ?? null;
+}
+function H(e, t) {
+	let n = w.get(e);
+	if (n?.kind !== "block") return null;
+	let r = De(e), i = t === 1 ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING, a = null;
+	for (let [t, o] of w) o.kind === "block" && o.id !== n.id && t.isConnected && e.compareDocumentPosition(t) & i && (!a || t.compareDocumentPosition(a) & i) && De(t) === r && (a = t);
+	return a && z(w.get(a)?.id ?? null);
+}
+function Oe(e) {
+	let t = w.get(e);
+	if (!t) return null;
+	let n = V(e).reverse().flatMap((e) => {
+		let t = w.get(e);
+		return t ? [{
+			id: t.id,
+			label: J(t) || "Block"
+		}] : [];
+	});
+	return {
+		label: J(t),
+		crumbs: n,
+		actions: t.kind === "block" && Re() ? {
+			canMoveUp: !!H(e, -1),
+			canMoveDown: !!H(e, 1),
+			hidden: ze(t.id)
+		} : null
+	};
+}
+function ke(e, t) {
+	let n = T.selected, r = n && w.get(n);
+	n && r?.kind === "block" && e.button === 0 && (e.preventDefault(), e.isTrusted && t.setPointerCapture(e.pointerId), P = {
+		id: r.id,
+		el: n,
+		drop: null
+	}, O?.setDragging(!0), window.addEventListener("pointermove", Ae, !0), window.addEventListener("pointerup", je, !0), window.addEventListener("pointercancel", U, !0));
+}
+function Ae(e) {
+	P && (P.drop = Me(P, e.clientX, e.clientY), G("hover", P.drop?.el ?? null), q());
+}
+function je(e) {
+	let t = P, n = t && Me(t, e.clientX, e.clientY);
+	U(), t && n && v.moveBlock(t.id, n.id, n.position);
+}
+function U() {
+	P && (P = null, window.removeEventListener("pointermove", Ae, !0), window.removeEventListener("pointerup", je, !0), window.removeEventListener("pointercancel", U, !0), O?.setDragging(!1), G("hover", null), q());
+}
+function Me(e, t, n) {
+	let r = document.elementsFromPoint(t, n).find((e) => e !== O?.host), i = null;
+	for (let t = r ?? null; t; t = B(t)) {
+		if (!(t instanceof HTMLElement)) continue;
+		let n = w.get(t);
+		if (n?.kind === "block") {
+			if (n.id === e.id) return null;
+			i ??= t;
+		}
+	}
+	let a = i && w.get(i);
+	if (!i || !a || i.contains(e.el)) return null;
+	let o = i.getBoundingClientRect(), s = e.drop?.el === i ? e.drop.horizontal : Ne(i, o), c = s ? t < o.left + o.width / 2 : n < o.top + o.height / 2;
+	return {
+		el: i,
+		id: a.id,
+		position: c ? "before" : "after",
+		horizontal: s
+	};
+}
+function Ne(e, t) {
+	let n = H(e, 1) ?? H(e, -1);
+	if (!n) return !1;
+	let r = n.getBoundingClientRect();
+	return r.top < t.bottom && r.bottom > t.top;
+}
+function W() {
+	M || (M = !0, queueMicrotask(() => {
+		M = !1;
+		let e = T.selected;
+		e?.isConnected && w.get(e)?.kind === "field" || G("selected", z(E));
+	}));
+}
+function G(e, t) {
+	let n = T[e];
+	n !== t && (T[e] = t, n && (n.classList.remove(ge[e]), Pe(n, e, !1)), t && (t.classList.add(ge[e]), Pe(t, e, !0), e === "selected" && w.get(t)?.scrollOnSelect && t.scrollIntoView?.({
+		block: "nearest",
+		behavior: "smooth"
+	})), k && (k.disconnect(), k.observe(document.documentElement), T.selected && k.observe(T.selected), T.hover && k.observe(T.hover)), e === "selected" && (A?.disconnect(), t && A?.observe(document.body, {
+		childList: !0,
+		subtree: !0
+	}), N = !0), q());
+}
+function Pe(e, t, n) {
+	let r = w.get(e);
+	t === "selected" ? r?.onSelectChange?.(n) : r?.onHoverChange?.(n);
+}
+function K() {
+	N = !0, q();
+}
+function q() {
+	j || (j = !0, requestAnimationFrame(() => {
+		j = !1, Fe();
+	}));
+}
+function Fe() {
+	if (!D) return;
+	let { selected: e } = T, t = T.hover === e ? null : T.hover;
+	if (!O && !e && !t) return;
+	O ??= fe({
+		onAction: Ce,
+		onSelect: Se,
+		onDragStart: ke
+	}), N && (N = !1, O.renderBar(e?.isConnected ? Oe(e) : null));
+	let n = J(t ? w.get(t) : void 0);
+	O.hover.name.textContent !== n && (O.hover.name.textContent = n), Ie(O.selected, e), O.selected.label.style.visibility = e && w.get(e)?.isEditing?.() ? "hidden" : "", Ie(O.hover, t), Le(O.indicator, P?.drop ?? null);
+}
+function Ie(e, t) {
+	if (!t?.isConnected) {
+		e.box.hidden = !0;
+		return;
+	}
+	let { box: n, label: r } = e, i = t.getBoundingClientRect(), a = r.offsetWidth, o = r.offsetHeight, s = document.documentElement.clientWidth;
+	n.hidden = !1, n.style.transform = `translate(${i.left - S}px, ${i.top - S}px)`, n.style.width = `${i.width + 4}px`, n.style.height = `${i.height + 4}px`;
+	let c = i.top < ve;
+	n.toggleAttribute("data-inside", c);
+	let l = Math.min(S - i.top, i.height + 4 - o);
+	r.style.top = c ? `${Math.max(0, l)}px` : "";
+	let u = i.left - S + 8, d = u + a - s;
+	r.style.marginLeft = d > 0 ? `${-Math.min(d, u)}px` : "";
+}
+function Le(e, t) {
+	if (!t?.el.isConnected) {
+		e.hidden = !0;
+		return;
+	}
+	let n = t.el.getBoundingClientRect(), r = t.position === "before", { style: i } = e;
+	if (e.hidden = !1, t.horizontal) i.transform = `translate(${(r ? n.left : n.right) - C / 2}px, ${n.top}px)`, i.width = `${C}px`, i.height = `${n.height}px`;
+	else {
+		let e = r ? n.top : n.bottom;
+		i.transform = `translate(${n.left}px, ${e - C / 2}px)`, i.width = `${n.width}px`, i.height = `${C}px`;
+	}
+}
+function Re() {
+	return v.latest("BLOCK_LABELS") !== void 0;
+}
+function ze(e) {
+	return v.latest("HIDDEN_BLOCKS")?.ids.includes(e) ?? null;
+}
+function J(e) {
+	let t = e?.label;
+	return t ? (e.kind === "block" ? v.latest("BLOCK_LABELS")?.labels[t] : void 0) ?? Be(t) : "";
+}
+function Be(e) {
+	if (!e) return "";
+	if (!/^[a-z][a-z0-9]*([_-][a-z0-9]+)*$/.test(e)) return e;
+	let t = e.replace(/[_-]+/g, " ");
+	return t.charAt(0).toUpperCase() + t.slice(1);
+}
+//#endregion
+//#region src/editable.ts
+var Ve = "b10cks-preview-style", He = "--b10cks-scroll-offset";
+function Y() {
+	if (typeof document > "u" || document.getElementById(Ve)) return;
 	let e = document.createElement("style");
-	e.id = _, e.textContent = `
-    .b10cks-preview { scroll-margin-top: var(${v}, 0px); }
-    .b10cks-hover,
-    .b10cks-preview:hover {
-      outline: 2px dashed rgba(59, 130, 246, 0.5);
-      outline-offset: 2px;
-    }
-    .b10cks-selected {
-      outline: 2px solid rgb(59, 130, 246) !important;
-      outline-offset: 2px;
-    }
+	e.id = Ve, e.textContent = `
+    .b10cks-preview { scroll-margin-top: var(${He}, 0px); }
+    .b10cks-preview.b10cks-hidden { opacity: 0.4 !important; }
   `, document.head.appendChild(e);
 }
-function b(e) {
+function Ue(e) {
 	if (typeof document > "u") return;
 	let t = typeof e == "number" ? `${e}px` : e;
-	document.documentElement.style.setProperty(v, t);
+	document.documentElement.style.setProperty(He, t);
 }
-function x(e, t) {
-	if (!g.isInPreviewMode() || !t.id) return () => {};
-	y();
-	let { id: n, onSelectChange: r, onHoverChange: i, scrollOnSelect: a = !0 } = t;
+function We(e, t) {
+	if (!v.isInPreviewMode() || !t.id) return () => {};
+	Y();
+	let { id: n, label: r, onSelectChange: i, onHoverChange: a, scrollOnSelect: o = !0 } = t;
 	e.classList.add("b10cks-preview");
-	let o = (e) => {
-		e.preventDefault(), e.stopPropagation(), g.selectItem(n);
-	}, s = ({ selectedItem: t }) => {
-		let i = t === n;
-		e.classList.toggle("b10cks-selected", i), i && a && C(e), r?.(i);
-	}, c = ({ selectedItem: t }) => {
-		let r = t === n;
-		e.classList.toggle("b10cks-hover", r), i?.(r);
-	};
-	e.addEventListener("click", o);
-	let l = g.on("SELECT_UPDATE", s), u = g.on("HOVER_UPDATE", c);
+	let s = F(e, {
+		id: n,
+		kind: "block",
+		label: r,
+		scrollOnSelect: o,
+		onSelectChange: i,
+		onHoverChange: a,
+		activate: () => v.selectItem(n)
+	});
 	return () => {
-		e.removeEventListener("click", o), l(), u(), e.classList.remove("b10cks-preview", "b10cks-selected", "b10cks-hover");
+		s(), e.classList.remove("b10cks-preview", "b10cks-selected", "b10cks-hover");
 	};
 }
-function S(e, t) {
-	if (!g.isInPreviewMode() || !t.id) return () => {};
-	let { id: n, field: r, path: i, mode: a = "inline" } = t;
+function Ge(e, t) {
+	if (!v.isInPreviewMode() || !t.id) return () => {};
+	let { id: n, field: r, path: i, mode: a = "inline", label: o } = t;
 	if (a === "select") {
-		y(), e.classList.add("b10cks-preview");
-		let t = (e) => {
-			e.preventDefault(), e.stopPropagation(), i ? g.selectField(n, i) : g.selectItem(n);
-		};
-		return e.addEventListener("click", t), () => {
-			e.removeEventListener("click", t), e.classList.remove("b10cks-preview");
+		Y(), e.classList.add("b10cks-preview");
+		let t = F(e, {
+			id: n,
+			kind: "field",
+			label: o ?? Ke(i) ?? r,
+			activate: () => i ? v.selectField(n, i) : v.selectItem(n)
+		});
+		return () => {
+			t(), e.classList.remove("b10cks-preview", "b10cks-selected", "b10cks-hover");
 		};
 	}
 	e.setAttribute("contenteditable", "true");
-	let o = (e) => {
+	let s = (e) => {
 		let t = e.target.innerText;
-		i ? g.updateFieldAt(n, i, t) : g.updateField(n, r ?? "", t);
+		i ? v.updateFieldAt(n, i, t) : v.updateField(n, r ?? "", t);
 	};
-	return e.addEventListener("input", o), () => {
-		e.removeEventListener("input", o), e.removeAttribute("contenteditable");
+	return e.addEventListener("input", s), () => {
+		e.removeEventListener("input", s), e.removeAttribute("contenteditable");
 	};
 }
-function C(e) {
-	typeof e.scrollIntoView == "function" && e.scrollIntoView({
-		block: "nearest",
-		behavior: "smooth"
-	});
+function Ke(e) {
+	return e?.findLast((e) => typeof e == "string");
 }
 //#endregion
 //#region src/preview-store.ts
-function w(e, t) {
+function qe(e, t) {
 	let n = e;
 	for (let e of t) {
 		if (typeof n != "object" || !n) return;
@@ -421,18 +861,18 @@ function w(e, t) {
 	}
 	return n;
 }
-function T(e, t, n) {
+function X(e, t, n) {
 	if (t.length === 0) return n;
 	let [r, ...i] = t;
 	if (r === void 0) return n;
 	if (typeof r == "number") {
 		let t = Array.isArray(e) ? e.slice() : [];
-		return t[r] = T(t[r], i, n), t;
+		return t[r] = X(t[r], i, n), t;
 	}
 	let a = e && typeof e == "object" && !Array.isArray(e) ? { ...e } : {};
-	return a[r] = T(a[r], i, n), a;
+	return a[r] = X(a[r], i, n), a;
 }
-function E(e, t) {
+function Je(e, t) {
 	let n = (e, r) => {
 		if (Array.isArray(e)) {
 			for (let t = 0; t < e.length; t++) {
@@ -455,16 +895,16 @@ function E(e, t) {
 	};
 	return n(e, []);
 }
-function D(e, t) {
+function Ye(e, t) {
 	if (!t || typeof t != "object") return e;
 	let n = typeof t.id == "string" ? t.id : void 0;
 	if (!n || !e || typeof e != "object") return t;
 	let r = e, i = typeof r.id == "string" ? r.id : void 0;
 	if (i === n) return t;
-	let a = E(e, n);
-	return a ? T(e, a, t) : !i && r.block !== void 0 && r.block === t.block ? t : e;
+	let a = Je(e, n);
+	return a ? X(e, a, t) : !i && r.block !== void 0 && r.block === t.block ? t : e;
 }
-var O = class {
+var Xe = class {
 	content;
 	listeners = /* @__PURE__ */ new Set();
 	constructor(e) {
@@ -478,39 +918,141 @@ var O = class {
 		this.content = e, this.emit();
 	}
 	applyContentUpdate(e) {
-		let t = D(this.content, e);
+		let t = Ye(this.content, e);
 		t !== this.content && (this.content = t, this.emit());
 	}
-	patch(e, t) {
-		this.content = T(this.content, e, t), this.emit();
+	patch(e, t, n) {
+		let r = [];
+		if (n && this.content?.id !== n) {
+			let e = Je(this.content, n);
+			if (!e) return;
+			r = e;
+		}
+		this.content = X(this.content, [...r, ...e], t), this.emit();
 	}
 	emit() {
 		for (let e of this.listeners) e();
 	}
 };
-function k(e) {
-	let t = g.on("CONTENT_UPDATE", ({ content: t }) => {
+function Ze(e) {
+	let t = v.on("CONTENT_UPDATE", ({ content: t }) => {
 		e.applyContentUpdate(t);
-	}), n = g.on("CONTENT_PATCH", ({ path: t, value: n }) => {
-		e.patch(t, n);
+	}), n = v.on("CONTENT_PATCH", ({ itemId: t, path: n, value: r }) => {
+		e.patch(n, r, t);
 	});
 	return () => {
 		t(), n();
 	};
 }
 //#endregion
+//#region src/rich-text-field.ts
+var Qe = 300, $e = 2e3, et = {
+	type: "doc",
+	content: []
+}, tt = null;
+function nt() {
+	return tt ??= import("@b10cks/richtext/editor").catch(() => (tt = null, null)), tt;
+}
+function rt(e, t) {
+	if (!v.isInPreviewMode() || !t.id) return {
+		update() {},
+		destroy() {}
+	};
+	Y();
+	let { id: n, path: r, render: i, onEditingChange: a } = t, o = t.document ?? et, s = null, c = 0, l = o, u = null, d, f = () => {
+		clearTimeout(d), d = void 0;
+		let e = u;
+		u = null, e && !Z(e, l) && (l = e, o = e, v.updateFieldAt(n, r, e), v.patchLocal({
+			itemId: n,
+			path: r,
+			value: e
+		}));
+	}, p = (e) => {
+		u = e, d ??= setTimeout(f, Qe);
+	}, m = () => {
+		c++, s && (f(), s.destroy(), s = null, a?.(!1));
+	}, h = async (t) => {
+		if (s) return;
+		let u = ++c, d = it(n, r);
+		v.selectField(n, r);
+		let [h, g] = await Promise.all([nt(), d]);
+		u === c && h && g && e.isConnected && (s = h.createRichTextEditor(e, {
+			document: o,
+			config: g,
+			render: i,
+			at: t && {
+				x: t.clientX,
+				y: t.clientY
+			},
+			onChange: p,
+			onBlur: f,
+			onExit: () => {
+				m(), Se(n);
+			}
+		}), s && (l = o, a?.(!0)));
+	};
+	e.classList.add("b10cks-preview");
+	let g = F(e, {
+		id: n,
+		kind: "field",
+		label: t.label ?? r.findLast((e) => typeof e == "string"),
+		activate: (e) => void h(e),
+		isEditing: () => s !== null,
+		onSelectChange: (e) => {
+			e || m();
+		},
+		onHoverChange: (e) => {
+			e && nt();
+		}
+	});
+	return {
+		update(e) {
+			let t = e ?? et;
+			if (!s) {
+				o = l = t;
+				return;
+			}
+			if (!Z(t, l)) {
+				if (!s.setDocument(t)) {
+					m();
+					return;
+				}
+				o = l = t, u &&= s.getDocument();
+			}
+		},
+		destroy() {
+			m(), g(), e.classList.remove("b10cks-preview", "b10cks-selected", "b10cks-hover");
+		}
+	};
+}
+function it(e, t) {
+	return new Promise((n) => {
+		let r = (e) => {
+			i(), clearTimeout(a), n(e);
+		}, i = v.on("FIELD_CONFIG", (n) => {
+			n.itemId === e && Z(n.path, t) && r(n.richtext);
+		}), a = setTimeout(() => r(null), $e);
+	});
+}
+function Z(e, t) {
+	if (e === t) return !0;
+	if (typeof e != "object" || typeof t != "object" || e === null || t === null || Array.isArray(e) !== Array.isArray(t)) return !1;
+	let n = Object.entries(e), r = { ...t };
+	return n.length === Object.keys(r).length && n.every(([e, t]) => e in r && Z(t, r[e]));
+}
+//#endregion
 //#region src/sitemap.ts
-function A(e) {
+function at(e) {
 	return (e ?? "").trim().replace(/^\/+|\/+$/g, "");
 }
-function j(e, t) {
-	let n = A(e), r = A(t);
+function ot(e, t) {
+	let n = at(e), r = at(t);
 	if (!r) return n && n !== "home" ? `/${n}` : "/";
 	if (!n || n === "home") return `/${r}`;
 	let i = `${r}/`;
 	return n === r || n.startsWith(i) ? `/${n}` : `/${r}/${n}`;
 }
-function M(e, t) {
+function st(e, t) {
 	if (!t) return null;
 	try {
 		return new URL(e, t).toString();
@@ -518,51 +1060,51 @@ function M(e, t) {
 		return null;
 	}
 }
-function N(e) {
+function Q(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
-function P(e, t, n) {
+function ct(e, t, n) {
 	let { localePrefix: r = "auto", defaultLocale: i } = t;
-	return r === "always" || r === "auto" && n || r === "except-default" && e.language_iso !== i ? j(e.full_slug, e.language_iso) : j(e.full_slug, null);
+	return r === "always" || r === "auto" && n || r === "except-default" && e.language_iso !== i ? ot(e.full_slug, e.language_iso) : ot(e.full_slug, null);
 }
-function F(e) {
+function lt(e) {
 	let t = /* @__PURE__ */ new Set();
 	for (let n of e) if (n.language_iso && t.add(n.language_iso), t.size > 1) return !0;
 	return !1;
 }
-function I(e, t = {}) {
-	let { siteUrl: n, locale: r } = t, i = /* @__PURE__ */ new Set(), a = F(e);
+function ut(e, t = {}) {
+	let { siteUrl: n, locale: r } = t, i = /* @__PURE__ */ new Set(), a = lt(e);
 	return e.filter((e) => {
 		if (r && e.language_iso !== r) return !1;
 		let o = e.meta?.robots?.toLowerCase();
 		if (o?.includes("noindex") || o?.includes("none")) return !1;
-		let s = P(e, t, a), c = n ? M(s, n) ?? s : s;
-		return i.has(c) ? !1 : (i.add(c), !0);
+		let s = ct(e, t, a), c = n ? st(s, n) ?? s : s;
+		return !i.has(c) && (i.add(c), !0);
 	});
 }
-function L(e, t, n = {}) {
-	let r = F(e);
+function dt(e, t, n = {}) {
+	let r = lt(e);
 	return [
 		"<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
 		"<urlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">",
 		e.map((e) => {
-			let i = P(e, n, r), a = t ? M(i, t) : i;
+			let i = ct(e, n, r), a = t ? st(i, t) : i;
 			if (!a) return "";
-			let o = ["  <url>", `    <loc>${N(a)}</loc>`];
-			return e.published_at && o.push(`    <lastmod>${N(e.published_at)}</lastmod>`), o.push("  </url>"), o.join("\n");
+			let o = ["  <url>", `    <loc>${Q(a)}</loc>`];
+			return e.published_at && o.push(`    <lastmod>${Q(e.published_at)}</lastmod>`), o.push("  </url>"), o.join("\n");
 		}).filter(Boolean).join("\n"),
 		"</urlset>"
 	].join("\n");
 }
-function R(e, t) {
+function ft(e, t) {
 	return [
 		"<?xml version=\"1.0\" encoding=\"UTF-8\"?>",
 		"<sitemapindex xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\">",
 		e.map((e) => {
-			let n = t ? M(e, t) : e;
+			let n = t ? st(e, t) : e;
 			return n ? [
 				"  <sitemap>",
-				`    <loc>${N(n)}</loc>`,
+				`    <loc>${Q(n)}</loc>`,
 				"  </sitemap>"
 			].join("\n") : "";
 		}).filter(Boolean).join("\n"),
@@ -571,14 +1113,14 @@ function R(e, t) {
 }
 //#endregion
 //#region src/types.ts
-var z = /* @__PURE__ */ t({}), B = class extends Error {
+var pt = /* @__PURE__ */ t({}), $ = class extends Error {
 	status;
 	endpoint;
 	body;
 	constructor(e, t, n, r) {
 		super(e), this.status = t, this.endpoint = n, this.body = r, this.name = "ApiError";
 	}
-}, V = (e) => e === 429 || e >= 500 && e <= 599, H = (e) => new Promise((t) => setTimeout(t, e)), U = class {
+}, mt = (e) => e === 429 || e >= 500 && e <= 599, ht = (e) => new Promise((t) => setTimeout(t, e)), gt = class {
 	baseUrl;
 	token;
 	vid;
@@ -630,7 +1172,7 @@ var z = /* @__PURE__ */ t({}), B = class extends Error {
 				signal: n.signal
 			});
 		} catch (t) {
-			throw t instanceof Error && t.name === "AbortError" ? new B(`Request timed out after ${this.timeoutMs}ms`, 0, e) : t;
+			throw t instanceof Error && t.name === "AbortError" ? new $(`Request timed out after ${this.timeoutMs}ms`, 0, e) : t;
 		} finally {
 			clearTimeout(r);
 		}
@@ -641,8 +1183,8 @@ var z = /* @__PURE__ */ t({}), B = class extends Error {
 			let n = await this.fetchWithTimeout(e);
 			return await this.parseResponse(n, t);
 		} catch (e) {
-			if (n = e, !(r < this.retries && (!(e instanceof B) || e.status === 0 || V(e.status)))) throw e;
-			await H(200 * 2 ** r);
+			if (n = e, !(r < this.retries && (!(e instanceof $) || e.status === 0 || mt(e.status)))) throw e;
+			await ht(200 * 2 ** r);
 		}
 		throw n;
 	}
@@ -677,7 +1219,7 @@ var z = /* @__PURE__ */ t({}), B = class extends Error {
 		if (this.isFetchResponse(e)) {
 			if (!e.ok) {
 				let n = await this.readErrorBody(e);
-				throw new B(`Request to "${t}" failed with status ${e.status}`, e.status, t, n);
+				throw new $(`Request to "${t}" failed with status ${e.status}`, e.status, t, n);
 			}
 			return await e.json();
 		}
@@ -744,6 +1286,6 @@ var z = /* @__PURE__ */ t({}), B = class extends Error {
 	}
 };
 //#endregion
-export { U as ApiClient, B as ApiError, d as B10cksDataApi, h as PreviewBridge, O as PreviewStore, x as attachEditable, S as attachEditableField, k as bindPreviewStore, o as blockAnchorAttrs, r as breadcrumbJsonLd, j as buildLocalizedPath, f as createB10cksDataApi, y as ensurePreviewStyles, I as filterSitemapEntries, E as findPathById, w as getAtPath, D as mergeContentUpdate, A as normalizePathSegment, g as previewBridge, R as renderSitemapIndex, L as renderSitemapXml, a as resolveB10cksLink, c as serializeFilter, T as setAtPath, b as setPreviewScrollOffset, i as toRootBlock, z as types };
+export { gt as ApiClient, $ as ApiError, d as B10cksDataApi, re as BRIDGE_PROTOCOL, ie as PreviewBridge, Xe as PreviewStore, We as attachEditable, Ge as attachEditableField, rt as attachRichTextField, Ze as bindPreviewStore, o as blockAnchorAttrs, r as breadcrumbJsonLd, ot as buildLocalizedPath, f as createB10cksDataApi, Y as ensurePreviewStyles, ut as filterSitemapEntries, Je as findPathById, qe as getAtPath, Ye as mergeContentUpdate, at as normalizePathSegment, v as previewBridge, ft as renderSitemapIndex, dt as renderSitemapXml, a as resolveB10cksLink, c as serializeFilter, X as setAtPath, Ue as setPreviewScrollOffset, i as toRootBlock, pt as types };
 
 //# sourceMappingURL=index.mjs.map