@b10cks/client 1.11.0 → 1.12.0

package/dist/index.mjs

@@ -261,16 +261,17 @@ 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 = (e) => e.selectedItem === null || typeof e.selectedItem == "string", g = {
+	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: h,
+	HOVER_UPDATE: h,
+	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")
+}, _ = (e) => typeof e == "string" && Object.hasOwn(g, e), ee = "B10CKS_BRIDGE_READY", te = 2, ne = class e {
 	static instance;
 	listeners = {};
+	received = {};
 	initialized = !1;
 	allowedOrigins = null;
 	parentOrigin = null;
@@ -284,12 +285,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: ee,
+				payload: { protocol: 2 }
+			}, "*");
 		}
 	}
 	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 +305,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 +331,19 @@ var p = /* @__PURE__ */ new Set([
 			value: n
 		});
 	}
+	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 +353,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));
+		_(t) && p(n) && g[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 = ne.getInstance(), y = "rgb(59, 130, 246)", re = 2, ie = `
+  :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: ${re}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: ${re}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;
+  }
+`, ae = [
+	{
+		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\"/>"
+	}
+], oe = "<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\"/>", se = "<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\"/>", ce = "<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>", le = "Alt/Option-click to use links and buttons on the page";
+function ue(e) {
+	let t = document.createElement("div");
+	t.id = "b10cks-overlay";
+	let n = t.attachShadow({ mode: "open" }), r = document.createElement("style");
+	r.textContent = ie, 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 = le;
+	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(ce), d.addEventListener("pointerdown", (t) => e.onDragStart(t, d)), u.appendChild(d);
+	let f = /* @__PURE__ */ new Map();
+	for (let t of ae) {
+		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 ? se : oe);
+	};
+	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(...de(t.crumbs, e.onSelect))), l.textContent = t.label, u.hidden = !t.actions, pe(f.get("move-up"), !t.actions?.canMoveUp), pe(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 de(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, fe());
+	}
+	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, fe());
+	}
+	return n;
+}
+function fe() {
+	let e = b("span", "sep");
+	return e.textContent = "›", e.setAttribute("aria-hidden", "true"), e;
+}
+function pe(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 S = {
+	selected: "b10cks-selected",
+	hover: "b10cks-hover"
+}, C = "b10cks-hidden", w = 2, me = 24, T = 3, E = /* @__PURE__ */ new Map(), D = {
+	selected: null,
+	hover: null
+}, O = null, k = null, A = null, j = null, M = null, N = !1, P = !1, F = !1, I = null;
+function he(e, t) {
+	return E.set(e, t), t.kind === "block" && e.classList.toggle(C, Ie(t.id) === !0), k ||= ge(), t.kind === "block" && t.id === O && G(), () => {
+		if (E.get(e) === t) {
+			E.delete(e), t.kind === "block" && e.classList.remove(C);
+			for (let t of ["selected", "hover"]) D[t] === e && (D[t] = null, e.classList.remove(S[t]));
+			E.size === 0 ? (k?.(), k = null) : G();
+		}
+	};
+}
+function ge() {
+	O = v.latest("SELECT_UPDATE")?.selectedItem ?? O, O && G();
+	let e = v.on("SELECT_UPDATE", ({ selectedItem: e }) => {
+		O = e || null;
+		let t = D.selected && E.get(D.selected);
+		(t?.kind !== "field" || e && e !== t.id) && K("selected", B(O));
+	}), t = v.on("HOVER_UPDATE", ({ selectedItem: e }) => {
+		K("hover", B(e || null));
+	}), n = v.on("BLOCK_LABELS", q), r = v.on("HIDDEN_BLOCKS", ({ ids: e }) => {
+		let t = new Set(e);
+		for (let [e, n] of E) n.kind === "block" && e.classList.toggle(C, t.has(n.id));
+		q();
+	}), i = {
+		capture: !0,
+		passive: !0
+	};
+	return window.addEventListener("click", L, !0), window.addEventListener("auxclick", L, !0), window.addEventListener("keydown", _e, !0), document.addEventListener("pointerover", xe, !0), document.addEventListener("pointerout", Se, !0), window.addEventListener("scroll", J, i), window.addEventListener("resize", J), j = typeof ResizeObserver > "u" ? null : new ResizeObserver(J), M = typeof MutationObserver > "u" ? null : new MutationObserver(q), () => {
+		W(), e(), t(), n(), r(), window.removeEventListener("click", L, !0), window.removeEventListener("auxclick", L, !0), window.removeEventListener("keydown", _e, !0), document.removeEventListener("pointerover", xe, !0), document.removeEventListener("pointerout", Se, !0), window.removeEventListener("scroll", J, i), window.removeEventListener("resize", J), j?.disconnect(), j = null, M?.disconnect(), M = null, D.selected = null, D.hover = null, A?.host.remove(), A = null;
+	};
+}
+function L(e) {
+	if (e.altKey) return;
+	let t = Ce(e);
+	t && (R(e), e.type === "click" && z(t, e));
+}
+function _e(e) {
+	if (I) {
+		e.key === "Escape" && (R(e), W());
+		return;
+	}
+	let t = D.selected;
+	if (!t?.isConnected || e.defaultPrevented || ve(e) || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+	let n = null;
+	e.key === "Escape" ? n = H(t)[0] ?? null : e.key === "ArrowUp" ? n = U(t, -1) : e.key === "ArrowDown" && (n = U(t, 1)), n && (R(e), z(n));
+}
+function ve(e) {
+	let t = e.composedPath()[0];
+	return t instanceof HTMLElement && (t.isContentEditable || t.matches("input, textarea, select"));
+}
+function R(e) {
+	e.preventDefault(), e.stopImmediatePropagation();
+}
+function z(e, t) {
+	let n = E.get(e);
+	n && (n.activate(t), n.kind === "block" && (O = n.id), K("selected", e));
+}
+function ye(e) {
+	let t = B(e);
+	t && z(t);
+}
+function be(e) {
+	let t = D.selected && E.get(D.selected);
+	t?.kind === "block" && v.blockAction(t.id, e);
+}
+function xe(e) {
+	K("hover", Ce(e));
+}
+function Se(e) {
+	e.relatedTarget || K("hover", null);
+}
+function Ce(e) {
+	for (let t of e.composedPath()) if (t instanceof HTMLElement && E.has(t)) return t;
+	return null;
+}
+function B(e) {
+	if (!e) return null;
+	let t = null;
+	for (let [n, r] of E) r.kind === "block" && r.id === e && n.isConnected && (!t || t.contains(n)) && (t = n);
+	return t;
+}
+function V(e) {
+	if (e.parentElement) return e.parentElement;
+	let t = e.parentNode;
+	return t instanceof ShadowRoot ? t.host : null;
+}
+function H(e) {
+	let t = [], n = E.get(e), r = n?.kind === "block" ? n.id : null;
+	for (let n = V(e); n; n = V(n)) {
+		if (!(n instanceof HTMLElement)) continue;
+		let e = E.get(n);
+		e?.kind === "block" && e.id !== r && (t.push(n), r = e.id);
+	}
+	return t;
+}
+function we(e) {
+	let t = H(e)[0];
+	return (t && E.get(t)?.id) ?? null;
+}
+function U(e, t) {
+	let n = E.get(e);
+	if (n?.kind !== "block") return null;
+	let r = we(e), i = t === 1 ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING, a = null;
+	for (let [t, o] of E) o.kind === "block" && o.id !== n.id && t.isConnected && e.compareDocumentPosition(t) & i && (!a || t.compareDocumentPosition(a) & i) && we(t) === r && (a = t);
+	return a && B(E.get(a)?.id ?? null);
+}
+function Te(e) {
+	let t = E.get(e);
+	if (!t) return null;
+	let n = H(e).reverse().flatMap((e) => {
+		let t = E.get(e);
+		return t ? [{
+			id: t.id,
+			label: Y(t) || "Block"
+		}] : [];
+	});
+	return {
+		label: Y(t),
+		crumbs: n,
+		actions: t.kind === "block" && Fe() ? {
+			canMoveUp: !!U(e, -1),
+			canMoveDown: !!U(e, 1),
+			hidden: Ie(t.id)
+		} : null
+	};
+}
+function Ee(e, t) {
+	let n = D.selected, r = n && E.get(n);
+	n && r?.kind === "block" && e.button === 0 && (e.preventDefault(), e.isTrusted && t.setPointerCapture(e.pointerId), I = {
+		id: r.id,
+		el: n,
+		drop: null
+	}, A?.setDragging(!0), window.addEventListener("pointermove", De, !0), window.addEventListener("pointerup", Oe, !0), window.addEventListener("pointercancel", W, !0));
+}
+function De(e) {
+	I && (I.drop = ke(I, e.clientX, e.clientY), K("hover", I.drop?.el ?? null), J());
+}
+function Oe(e) {
+	let t = I, n = t && ke(t, e.clientX, e.clientY);
+	W(), t && n && v.moveBlock(t.id, n.id, n.position);
+}
+function W() {
+	I && (I = null, window.removeEventListener("pointermove", De, !0), window.removeEventListener("pointerup", Oe, !0), window.removeEventListener("pointercancel", W, !0), A?.setDragging(!1), K("hover", null), J());
+}
+function ke(e, t, n) {
+	let r = document.elementsFromPoint(t, n).find((e) => e !== A?.host), i = null;
+	for (let t = r ?? null; t; t = V(t)) {
+		if (!(t instanceof HTMLElement)) continue;
+		let n = E.get(t);
+		if (n?.kind === "block") {
+			if (n.id === e.id) return null;
+			i ??= t;
+		}
+	}
+	let a = i && E.get(i);
+	if (!i || !a || i.contains(e.el)) return null;
+	let o = i.getBoundingClientRect(), s = e.drop?.el === i ? e.drop.horizontal : Ae(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 Ae(e, t) {
+	let n = U(e, 1) ?? U(e, -1);
+	if (!n) return !1;
+	let r = n.getBoundingClientRect();
+	return r.top < t.bottom && r.bottom > t.top;
+}
+function G() {
+	P || (P = !0, queueMicrotask(() => {
+		P = !1;
+		let e = D.selected;
+		e?.isConnected && E.get(e)?.kind === "field" || K("selected", B(O));
+	}));
+}
+function K(e, t) {
+	let n = D[e];
+	n !== t && (D[e] = t, n && (n.classList.remove(S[e]), je(n, e, !1)), t && (t.classList.add(S[e]), je(t, e, !0), e === "selected" && E.get(t)?.scrollOnSelect && t.scrollIntoView?.({
+		block: "nearest",
+		behavior: "smooth"
+	})), j && (j.disconnect(), j.observe(document.documentElement), D.selected && j.observe(D.selected), D.hover && j.observe(D.hover)), e === "selected" && (M?.disconnect(), t && M?.observe(document.body, {
+		childList: !0,
+		subtree: !0
+	}), F = !0), J());
+}
+function je(e, t, n) {
+	let r = E.get(e);
+	t === "selected" ? r?.onSelectChange?.(n) : r?.onHoverChange?.(n);
+}
+function q() {
+	F = !0, J();
+}
+function J() {
+	N || (N = !0, requestAnimationFrame(() => {
+		N = !1, Me();
+	}));
+}
+function Me() {
+	if (!k) return;
+	let { selected: e } = D, t = D.hover === e ? null : D.hover;
+	if (!A && !e && !t) return;
+	A ??= ue({
+		onAction: be,
+		onSelect: ye,
+		onDragStart: Ee
+	}), F && (F = !1, A.renderBar(e?.isConnected ? Te(e) : null));
+	let n = Y(t ? E.get(t) : void 0);
+	A.hover.name.textContent !== n && (A.hover.name.textContent = n), Ne(A.selected, e), Ne(A.hover, t), Pe(A.indicator, I?.drop ?? null);
+}
+function Ne(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 - w}px, ${i.top - w}px)`, n.style.width = `${i.width + 4}px`, n.style.height = `${i.height + 4}px`;
+	let c = i.top < me;
+	n.toggleAttribute("data-inside", c);
+	let l = Math.min(w - i.top, i.height + 4 - o);
+	r.style.top = c ? `${Math.max(0, l)}px` : "";
+	let u = i.left - w + 8, d = u + a - s;
+	r.style.marginLeft = d > 0 ? `${-Math.min(d, u)}px` : "";
+}
+function Pe(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) - T / 2}px, ${n.top}px)`, i.width = `${T}px`, i.height = `${n.height}px`;
+	else {
+		let e = r ? n.top : n.bottom;
+		i.transform = `translate(${n.left}px, ${e - T / 2}px)`, i.width = `${n.width}px`, i.height = `${T}px`;
+	}
+}
+function Fe() {
+	return v.latest("BLOCK_LABELS") !== void 0;
+}
+function Ie(e) {
+	return v.latest("HIDDEN_BLOCKS")?.ids.includes(e) ?? null;
+}
+function Y(e) {
+	let t = e?.label;
+	return t ? (e.kind === "block" ? v.latest("BLOCK_LABELS")?.labels[t] : void 0) ?? Le(t) : "";
+}
+function Le(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 Re = "b10cks-preview-style", ze = "--b10cks-scroll-offset";
+function X() {
+	if (typeof document > "u" || document.getElementById(Re)) 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 = Re, e.textContent = `
+    .b10cks-preview { scroll-margin-top: var(${ze}, 0px); }
+    .b10cks-preview.b10cks-hidden { opacity: 0.4 !important; }
   `, document.head.appendChild(e);
 }
-function b(e) {
+function Be(e) {
 	if (typeof document > "u") return;
 	let t = typeof e == "number" ? `${e}px` : e;
-	document.documentElement.style.setProperty(v, t);
+	document.documentElement.style.setProperty(ze, t);
 }
-function x(e, t) {
-	if (!g.isInPreviewMode() || !t.id) return () => {};
-	y();
-	let { id: n, onSelectChange: r, onHoverChange: i, scrollOnSelect: a = !0 } = t;
+function Ve(e, t) {
+	if (!v.isInPreviewMode() || !t.id) return () => {};
+	X();
+	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 = he(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 He(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");
+		X(), e.classList.add("b10cks-preview");
+		let t = he(e, {
+			id: n,
+			kind: "field",
+			label: o ?? Ue(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 Ue(e) {
+	return e?.findLast((e) => typeof e == "string");
 }
 //#endregion
 //#region src/preview-store.ts
-function w(e, t) {
+function We(e, t) {
 	let n = e;
 	for (let e of t) {
 		if (typeof n != "object" || !n) return;
@@ -421,18 +849,18 @@ function w(e, t) {
 	}
 	return n;
 }
-function T(e, t, n) {
+function Z(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] = Z(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] = Z(a[r], i, n), a;
 }
-function E(e, t) {
+function Q(e, t) {
 	let n = (e, r) => {
 		if (Array.isArray(e)) {
 			for (let t = 0; t < e.length; t++) {
@@ -455,16 +883,16 @@ function E(e, t) {
 	};
 	return n(e, []);
 }
-function D(e, t) {
+function Ge(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 = Q(e, n);
+	return a ? Z(e, a, t) : !i && r.block !== void 0 && r.block === t.block ? t : e;
 }
-var O = class {
+var Ke = class {
 	content;
 	listeners = /* @__PURE__ */ new Set();
 	constructor(e) {
@@ -478,21 +906,27 @@ var O = class {
 		this.content = e, this.emit();
 	}
 	applyContentUpdate(e) {
-		let t = D(this.content, e);
+		let t = Ge(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 = Q(this.content, n);
+			if (!e) return;
+			r = e;
+		}
+		this.content = Z(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 qe(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();
@@ -500,17 +934,17 @@ function k(e) {
 }
 //#endregion
 //#region src/sitemap.ts
-function A(e) {
+function Je(e) {
 	return (e ?? "").trim().replace(/^\/+|\/+$/g, "");
 }
-function j(e, t) {
-	let n = A(e), r = A(t);
+function Ye(e, t) {
+	let n = Je(e), r = Je(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 Xe(e, t) {
 	if (!t) return null;
 	try {
 		return new URL(e, t).toString();
@@ -518,51 +952,51 @@ function M(e, t) {
 		return null;
 	}
 }
-function N(e) {
+function Ze(e) {
 	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
 }
-function P(e, t, n) {
+function Qe(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 ? Ye(e.full_slug, e.language_iso) : Ye(e.full_slug, null);
 }
-function F(e) {
+function $e(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 et(e, t = {}) {
+	let { siteUrl: n, locale: r } = t, i = /* @__PURE__ */ new Set(), a = $e(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 = Qe(e, t, a), c = n ? Xe(s, n) ?? s : s;
+		return !i.has(c) && (i.add(c), !0);
 	});
 }
-function L(e, t, n = {}) {
-	let r = F(e);
+function tt(e, t, n = {}) {
+	let r = $e(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 = Qe(e, n, r), a = t ? Xe(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>${Ze(a)}</loc>`];
+			return e.published_at && o.push(`    <lastmod>${Ze(e.published_at)}</lastmod>`), o.push("  </url>"), o.join("\n");
 		}).filter(Boolean).join("\n"),
 		"</urlset>"
 	].join("\n");
 }
-function R(e, t) {
+function nt(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 ? Xe(e, t) : e;
 			return n ? [
 				"  <sitemap>",
-				`    <loc>${N(n)}</loc>`,
+				`    <loc>${Ze(n)}</loc>`,
 				"  </sitemap>"
 			].join("\n") : "";
 		}).filter(Boolean).join("\n"),
@@ -571,14 +1005,14 @@ function R(e, t) {
 }
 //#endregion
 //#region src/types.ts
-var z = /* @__PURE__ */ t({}), B = class extends Error {
+var rt = /* @__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 {
+}, it = (e) => e === 429 || e >= 500 && e <= 599, at = (e) => new Promise((t) => setTimeout(t, e)), ot = class {
 	baseUrl;
 	token;
 	vid;
@@ -630,7 +1064,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 +1075,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 || it(e.status)))) throw e;
+			await at(200 * 2 ** r);
 		}
 		throw n;
 	}
@@ -677,7 +1111,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 +1178,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 { ot as ApiClient, $ as ApiError, d as B10cksDataApi, te as BRIDGE_PROTOCOL, ne as PreviewBridge, Ke as PreviewStore, Ve as attachEditable, He as attachEditableField, qe as bindPreviewStore, o as blockAnchorAttrs, r as breadcrumbJsonLd, Ye as buildLocalizedPath, f as createB10cksDataApi, X as ensurePreviewStyles, et as filterSitemapEntries, Q as findPathById, We as getAtPath, Ge as mergeContentUpdate, Je as normalizePathSegment, v as previewBridge, nt as renderSitemapIndex, tt as renderSitemapXml, a as resolveB10cksLink, c as serializeFilter, Z as setAtPath, Be as setPreviewScrollOffset, i as toRootBlock, rt as types };
 
 //# sourceMappingURL=index.mjs.map