@threadlabs/looma 0.28.5 → 0.28.7

package/vue/chunks/UiEditable.js

@@ -1,5 +1,4 @@
-import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, t as _plugin_vue_export_helper_default, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
 import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } from "./props.js";
 import { r as vBindControl } from "./control.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
@@ -44,14 +43,6 @@ var _hoisted_9 = {
 	class: "cancel",
 	type: "button"
 };
-var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
-function htmlNextAuthoredCheck2(accepted, location, message) {
-	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-		htmlNextAuthoredCheck2Reported.add(location);
-		console.warn(message);
-	}
-	return accepted;
-}
 //#endregion
 //#region .build/vue/UiEditable.vue
 var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -287,18 +278,7 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		watchSyncEffect(() => {
 			checkedProps.value;
 		});
-		function nativeAttrs(attrs) {
-			const names = Object.keys(attrs);
-			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
-			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
-		}
-		const componentInstance = getCurrentInstance();
-		function reflectedProp(name, kebab, value, fallback, bound, separator) {
-			const incoming = componentInstance?.vnode.props;
-			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
-			if (value === null || value === void 0) return void 0;
-			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
-		}
+		const reflectedProp = useReflectedProp();
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
@@ -307,32 +287,10 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const internalEdit = ref(false);
 		const internalValue = ref("");
 		const draft = ref("");
-		let guardedPrevious;
-		const guarded = computed(() => {
-			if (!htmlNextAuthoredCheck2(internalValue.value == null || typeof internalValue.value === "string", "$internalValue:internalValue", "./components/ui-editable/ui-editable.html: HR007: Reference internalValue does not satisfy its declared type.")) return guardedPrevious;
-			return guardedPrevious = internalValue.value;
-		});
-		let guardedBindingPrevious;
-		computed(() => {
-			if (!htmlNextAuthoredCheck2(draft.value == null || typeof draft.value === "string", "$draft:draft", "./components/ui-editable/ui-editable.html: HR007: Reference draft does not satisfy its declared type.")) return guardedBindingPrevious;
-			return guardedBindingPrevious = draft.value;
-		});
-		let guardedBinding2Previous;
-		const guardedBinding2 = computed(() => {
-			if (!htmlNextAuthoredCheck2(internalEdit.value == null || typeof internalEdit.value === "boolean", "$disabled or not $internalEdit:internalEdit", "./components/ui-editable/ui-editable.html: HR007: Reference internalEdit does not satisfy its declared type.")) return guardedBinding2Previous;
-			return guardedBinding2Previous = checkedProps.value.disabled || !internalEdit.value;
-		});
 		provide("html-next:ui-editable:internalEdit", internalEdit);
 		provide("html-next:ui-editable:internalValue", internalValue);
 		provide("html-next:ui-editable:draft", draft);
-		const hydrationNode = hydrationInstance?.vnode.el;
-		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editable> has an incompatible root."), {
-			name: "HtmlDiagnosticError",
-			diagnostic: Object.freeze({
-				code: "HR005",
-				message: "Server markup for <ui-editable> has an incompatible root."
-			})
-		});
+		checkHydratedRoot("div", "ui-editable");
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [internalEdit.value && "internalEdit", checkedProps.value.disabled && "disabled"].filter(Boolean).join(" "));
 		const isInputDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["value", "trigger"].includes(key));
@@ -409,18 +367,18 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}
 		});
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-editable" }, nativeAttrs(_ctx.$attrs), {
-				"data-actions": reflectedProp("actions", "actions", checkedProps.value.actions, void 0, false),
-				"data-cancel-label": reflectedProp("cancelLabel", "cancel-label", checkedProps.value.cancelLabel, void 0, false),
-				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
-				"data-edit": reflectedProp("edit", "edit", checkedProps.value.edit, void 0, false),
-				"data-hint": reflectedProp("hint", "hint", checkedProps.value.hint, void 0, false),
-				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
-				"data-max-length": reflectedProp("maxLength", "max-length", checkedProps.value.maxLength, void 0, false),
-				"data-placeholder": reflectedProp("placeholder", "placeholder", checkedProps.value.placeholder, void 0, false),
-				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
-				"data-save-label": reflectedProp("saveLabel", "save-label", checkedProps.value.saveLabel, void 0, false),
-				"data-value": reflectedProp("value", "value", checkedProps.value.value, void 0, false),
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ class: "ui-editable" }, unref(nativeAttrs)(_ctx.$attrs), {
+				"data-actions": unref(reflectedProp)("actions", "actions", checkedProps.value.actions, void 0, false),
+				"data-cancel-label": unref(reflectedProp)("cancelLabel", "cancel-label", checkedProps.value.cancelLabel, void 0, false),
+				"data-disabled": unref(reflectedProp)("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-edit": unref(reflectedProp)("edit", "edit", checkedProps.value.edit, void 0, false),
+				"data-hint": unref(reflectedProp)("hint", "hint", checkedProps.value.hint, void 0, false),
+				"data-label": unref(reflectedProp)("label", "label", checkedProps.value.label, void 0, false),
+				"data-max-length": unref(reflectedProp)("maxLength", "max-length", checkedProps.value.maxLength, void 0, false),
+				"data-placeholder": unref(reflectedProp)("placeholder", "placeholder", checkedProps.value.placeholder, void 0, false),
+				"data-required": unref(reflectedProp)("required", "required", checkedProps.value.required, void 0, false),
+				"data-save-label": unref(reflectedProp)("saveLabel", "save-label", checkedProps.value.saveLabel, void 0, false),
+				"data-value": unref(reflectedProp)("value", "value", checkedProps.value.value, void 0, false),
 				"data-ui-editable-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -430,13 +388,13 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				disabled: checkedProps.value.disabled ?? void 0,
 				ref_key: "previewElement",
 				ref: previewElement
-			}, [createElementVNode("span", _hoisted_4, toDisplayString(guarded.value), 1), checkedProps.value.hint ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(checkedProps.value.hint), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_3), withDirectives(createElementVNode("input", {
+			}, [createElementVNode("span", _hoisted_4, toDisplayString(internalValue.value), 1), checkedProps.value.hint ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(checkedProps.value.hint), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_3), withDirectives(createElementVNode("input", {
 				class: "input",
 				type: "text",
 				"aria-label": checkedProps.value.label ?? void 0,
 				placeholder: checkedProps.value.placeholder ?? void 0,
 				required: checkedProps.value.required ?? void 0,
-				disabled: guardedBinding2.value,
+				disabled: checkedProps.value.disabled || !internalEdit.value,
 				ref_key: "inputElement",
 				ref: inputElement
 			}, null, 8, _hoisted_6), [[unref(vBindControl), {
@@ -451,6 +409,6 @@ var UiEditable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-cdc1c49d"]]);
+}), [["__scopeId", "data-v-00a0810b"]]);
 //#endregion
 export { UiEditable_default as t };

package/vue/chunks/UiEditorBlockActions.js

@@ -0,0 +1,127 @@
+import { i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./props.js";
+import { t as UiMenu_default } from "./UiMenu.js";
+import { t as UiMenuItem_default } from "./UiMenuItem.js";
+import { computed, createElementBlock, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
+//#region .build/vue/UiEditorBlockActions.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-for", "data-placement"];
+//#endregion
+//#region .build/vue/UiEditorBlockActions.vue
+var UiEditorBlockActions_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorBlockActions",
+	props: {
+		for: {
+			type: null,
+			default: ""
+		},
+		placement: {
+			type: null,
+			default: "bottom-start"
+		}
+	},
+	emits: ["action"],
+	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			for: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "for" },
+				description: "The id of the button that opens the menu and anchors it.",
+				default: ""
+			},
+			placement: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "placement" },
+				description: "Where the menu opens beside its button; top-start suits a toolbar docked at the bottom of the screen.",
+				values: ["bottom-start", "top-start"],
+				default: "bottom-start"
+			}
+		} };
+		const props = __props;
+		const acceptedProps = {
+			for: "",
+			placement: "bottom-start"
+		};
+		const checkedProps = computed(() => ({
+			for: checkedProp(props["for"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "for", acceptedProps),
+			placement: checkedProp(props["placement"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "placement", acceptedProps)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		const reflectedProp = useReflectedProp();
+		const hydrationInstance = getCurrentInstance();
+		const emit = __emit;
+		const root = ref(null);
+		checkHydratedRoot("div", "ui-editor-block-actions");
+		const isActionDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "insert-below" || detail["action"] === "duplicate" || detail["action"] === "delete") && Object.keys(detail).every((key) => ["action"].includes(key));
+		const dispatch = createDispatch(root, emit, { checks: { action: isActionDetail } });
+		useComponentHost(() => import("@threadlabs/looma/components/ui-editor-block-actions/ui-editor-block-actions.js"), {
+			root,
+			dispatch,
+			controllerSource: {
+				specifier: "../components/ui-editor-block-actions/ui-editor-block-actions.js",
+				definition: "./components/ui-editor-block-actions/ui-editor-block-actions.html"
+			},
+			props: checkedProps,
+			propInputs: (name) => {
+				const incoming = hydrationInstance?.vnode.props;
+				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
+				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
+			},
+			propNames: ["for", "placement"],
+			propValidity: (name) => propValidityState({
+				contract: propValidityContract,
+				values: { ...props }
+			}, name)
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(nativeAttrs)(_ctx.$attrs), {
+				"data-for": unref(reflectedProp)("for", "for", checkedProps.value.for, void 0, false),
+				"data-placement": unref(reflectedProp)("placement", "placement", checkedProps.value.placement, void 0, false),
+				ref_key: "root",
+				ref: root
+			}), [createVNode(UiMenu_default, {
+				"aria-label": "Block actions",
+				for: checkedProps.value.for,
+				placement: checkedProps.value.placement
+			}, {
+				default: withCtx(() => [
+					createVNode(UiMenuItem_default, { value: "insert-below" }, {
+						default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Insert paragraph below", -1)])]),
+						_: 1
+					}),
+					createVNode(UiMenuItem_default, { value: "duplicate" }, {
+						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Duplicate block", -1)])]),
+						_: 1
+					}),
+					createVNode(UiMenuItem_default, { value: "delete" }, {
+						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Delete block", -1)])]),
+						_: 1
+					})
+				]),
+				_: 1
+			}, 8, ["for", "placement"])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+});
+//#endregion
+export { UiEditorBlockActions_default as t };

package/vue/chunks/UiEditorImageToolbar.js

@@ -1,4 +1,4 @@
-import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { a as concat, i as checkHydratedRoot, o as createDispatch, p as nativeAttrs, v as useComponentHost, y as useReflectedProp } from "./_plugin-vue_export-helper.js";
 import { a as vPropValidity, n as checkedProp, r as propValidityState, t as acceptsControllerWrite } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
 import { t as UiButton_default } from "./UiButton.js";
@@ -20,14 +20,6 @@ var _hoisted_1 = [
 ];
 var _hoisted_2 = { "aria-label": "Image description" };
 var _hoisted_3 = ["for"];
-var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
-function htmlNextAuthoredCheck2(accepted, location, message) {
-	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-		htmlNextAuthoredCheck2Reported.add(location);
-		console.warn(message);
-	}
-	return accepted;
-}
 //#endregion
 //#region .build/vue/UiEditorImageToolbar.vue
 var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
@@ -117,18 +109,7 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 		watchSyncEffect(() => {
 			checkedProps.value;
 		});
-		function nativeAttrs(attrs) {
-			const names = Object.keys(attrs);
-			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
-			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
-		}
-		const componentInstance = getCurrentInstance();
-		function reflectedProp(name, kebab, value, fallback, bound, separator) {
-			const incoming = componentInstance?.vnode.props;
-			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
-			if (value === null || value === void 0) return void 0;
-			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
-		}
+		const reflectedProp = useReflectedProp();
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
@@ -137,7 +118,6 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 		const draft = ref("");
 		let guardedPrevious = null;
 		const guarded = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-block'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedPrevious;
 			const candidate = concat(base.value, "-block");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedPrevious;
 			return guardedPrevious = candidate;
@@ -159,7 +139,6 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 		});
 		let guardedBinding3Previous = null;
 		const guardedBinding3 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-center'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding3Previous;
 			const candidate = concat(base.value, "-center");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding3Previous;
 			return guardedBinding3Previous = candidate;
@@ -181,7 +160,6 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 		});
 		let guardedBinding6Previous = null;
 		const guardedBinding6 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-wrap-left'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding6Previous;
 			const candidate = concat(base.value, "-wrap-left");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding6Previous;
 			return guardedBinding6Previous = candidate;
@@ -203,7 +181,6 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 		});
 		let guardedBinding9Previous = null;
 		const guardedBinding9 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-wrap-right'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding9Previous;
 			const candidate = concat(base.value, "-wrap-right");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding9Previous;
 			return guardedBinding9Previous = candidate;
@@ -223,98 +200,58 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding11Previous;
 			return guardedBinding11Previous = candidate;
 		});
-		let guardedBinding12Previous;
+		let guardedBinding12Previous = null;
 		const guardedBinding12 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "$base:base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding12Previous;
-			return guardedBinding12Previous = base.value;
+			const candidate = concat(base.value, "-delete");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding12Previous;
+			return guardedBinding12Previous = candidate;
 		});
 		let guardedBinding13Previous = null;
 		const guardedBinding13 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-delete'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding13Previous;
-			const candidate = concat(base.value, "-delete");
+			const candidate = concat(base.value, "-block");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding13Previous;
 			return guardedBinding13Previous = candidate;
 		});
 		let guardedBinding14Previous = null;
 		const guardedBinding14 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-block'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding14Previous;
-			const candidate = concat(base.value, "-block");
+			const candidate = concat(base.value, "-center");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding14Previous;
 			return guardedBinding14Previous = candidate;
 		});
 		let guardedBinding15Previous = null;
 		const guardedBinding15 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-center'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding15Previous;
-			const candidate = concat(base.value, "-center");
+			const candidate = concat(base.value, "-wrap-left");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding15Previous;
 			return guardedBinding15Previous = candidate;
 		});
 		let guardedBinding16Previous = null;
 		const guardedBinding16 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-wrap-left'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding16Previous;
-			const candidate = concat(base.value, "-wrap-left");
+			const candidate = concat(base.value, "-wrap-right");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding16Previous;
 			return guardedBinding16Previous = candidate;
 		});
 		let guardedBinding17Previous = null;
 		const guardedBinding17 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-wrap-right'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding17Previous;
-			const candidate = concat(base.value, "-wrap-right");
+			const candidate = concat(base.value, "-delete");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding17Previous;
 			return guardedBinding17Previous = candidate;
 		});
-		let guardedBinding18Previous;
+		let guardedBinding18Previous = null;
 		const guardedBinding18 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "$base:base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding18Previous;
-			return guardedBinding18Previous = base.value;
+			const candidate = concat(base.value, "-alt");
+			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding18Previous;
+			return guardedBinding18Previous = candidate;
 		});
 		let guardedBinding19Previous = null;
 		const guardedBinding19 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-delete'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding19Previous;
-			const candidate = concat(base.value, "-delete");
+			const candidate = concat(base.value, "-alt");
 			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding19Previous;
 			return guardedBinding19Previous = candidate;
 		});
-		let guardedBinding20Previous;
-		const guardedBinding20 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "$base:base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding20Previous;
-			return guardedBinding20Previous = base.value;
-		});
-		let guardedBinding21Previous;
-		const guardedBinding21 = computed(() => {
-			if (!htmlNextAuthoredCheck2(describing.value == null || typeof describing.value === "boolean", "$describing:describing", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference describing does not satisfy its declared type.")) return guardedBinding21Previous;
-			return guardedBinding21Previous = describing.value;
-		});
-		let guardedBinding22Previous = null;
-		const guardedBinding22 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-alt'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding22Previous;
-			const candidate = concat(base.value, "-alt");
-			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding22Previous;
-			return guardedBinding22Previous = candidate;
-		});
-		let guardedBinding23Previous = null;
-		const guardedBinding23 = computed(() => {
-			if (!htmlNextAuthoredCheck2(base.value == null || typeof base.value === "string", "concat($base, '-alt'):base", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference base does not satisfy its declared type.")) return guardedBinding23Previous;
-			const candidate = concat(base.value, "-alt");
-			if (candidate === Symbol.for("html-next.invalid-result")) return guardedBinding23Previous;
-			return guardedBinding23Previous = candidate;
-		});
-		let guardedBinding24Previous;
-		const guardedBinding24 = computed(() => {
-			if (!htmlNextAuthoredCheck2(draft.value == null || typeof draft.value === "string", "$draft:draft", "./components/ui-editor-image-toolbar/ui-editor-image-toolbar.html: HR007: Reference draft does not satisfy its declared type.")) return guardedBinding24Previous;
-			return guardedBinding24Previous = draft.value;
-		});
 		provide("html-next:ui-editor-image-toolbar:base", base);
 		provide("html-next:ui-editor-image-toolbar:describing", describing);
 		provide("html-next:ui-editor-image-toolbar:draft", draft);
-		const hydrationNode = hydrationInstance?.vnode.el;
-		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editor-image-toolbar> has an incompatible root."), {
-			name: "HtmlDiagnosticError",
-			diagnostic: Object.freeze({
-				code: "HR005",
-				message: "Server markup for <ui-editor-image-toolbar> has an incompatible root."
-			})
-		});
+		checkHydratedRoot("div", "ui-editor-image-toolbar");
 		const isPlacementDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["placement"] === "block" || detail["placement"] === "center" || detail["placement"] === "wrap-left" || detail["placement"] === "wrap-right") && Object.keys(detail).every((key) => ["placement"].includes(key));
 		const isDescribeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["alt"] === "string" && Object.keys(detail).every((key) => ["alt"].includes(key));
 		const isDeleteDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Object.values(detail).every((item) => true);
@@ -368,17 +305,11 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 				draft
 			}
 		});
-		function concat(...values) {
-			if (values.some((value) => value === Symbol.for("html-next.invalid-result"))) return Symbol.for("html-next.invalid-result");
-			if (values.some((value) => value === void 0)) return void 0;
-			if (values.length === 0 || values.some((value) => typeof value === "object" && value !== null)) return Symbol.for("html-next.invalid-result");
-			return values.map((value) => value === null ? "" : String(value)).join("");
-		}
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-editor-image-toolbar" }, nativeAttrs(_ctx.$attrs), {
-				"data-alt": reflectedProp("alt", "alt", checkedProps.value.alt, void 0, false),
-				"data-placement": reflectedProp("placement", "placement", checkedProps.value.placement, void 0, false),
-				"data-target": reflectedProp("target", "target", checkedProps.value.target, void 0, false),
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps(unref(nativeAttrs)(_ctx.$attrs), {
+				"data-alt": unref(reflectedProp)("alt", "alt", checkedProps.value.alt, void 0, false),
+				"data-placement": unref(reflectedProp)("placement", "placement", checkedProps.value.placement, void 0, false),
+				"data-target": unref(reflectedProp)("target", "target", checkedProps.value.target, void 0, false),
 				ref_key: "root",
 				ref: root
 			}), [createVNode(UiText_default, {
@@ -399,10 +330,7 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								variant: guardedBinding.value,
 								"aria-pressed": guardedBinding2.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "panel-top",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "panel-top" })]),
 								_: 1
 							}, 8, [
 								"id",
@@ -417,10 +345,7 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								variant: guardedBinding4.value,
 								"aria-pressed": guardedBinding5.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "align-center",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "align-center" })]),
 								_: 1
 							}, 8, [
 								"id",
@@ -435,10 +360,7 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								variant: guardedBinding7.value,
 								"aria-pressed": guardedBinding8.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "panel-left",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "panel-left" })]),
 								_: 1
 							}, 8, [
 								"id",
@@ -453,10 +375,7 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								variant: guardedBinding10.value,
 								"aria-pressed": guardedBinding11.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "panel-right",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "panel-right" })]),
 								_: 1
 							}, 8, [
 								"id",
@@ -467,12 +386,9 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								label: "Image description",
 								size: "sm",
 								variant: "ghost",
-								id: guardedBinding12.value
+								id: base.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "file-text",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "file-text" })]),
 								_: 1
 							}, 8, ["id"]),
 							createVNode(UiIconButton_default, {
@@ -480,38 +396,35 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 								size: "sm",
 								variant: "ghost",
 								"data-image-action": "delete",
-								id: guardedBinding13.value
+								id: guardedBinding12.value
 							}, {
-								default: withCtx(() => [createVNode(UiIcon_default, {
-									name: "trash",
-									size: "sm"
-								})]),
+								default: withCtx(() => [createVNode(UiIcon_default, { name: "trash" })]),
 								_: 1
 							}, 8, ["id"])
 						]),
 						_: 1
 					}),
-					createVNode(UiTooltip_default, { for: guardedBinding14.value }, {
+					createVNode(UiTooltip_default, { for: guardedBinding13.value }, {
 						default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("Image in line", -1)])]),
 						_: 1
 					}, 8, ["for"]),
-					createVNode(UiTooltip_default, { for: guardedBinding15.value }, {
+					createVNode(UiTooltip_default, { for: guardedBinding14.value }, {
 						default: withCtx(() => [..._cache[1] || (_cache[1] = [createTextVNode("Center image", -1)])]),
 						_: 1
 					}, 8, ["for"]),
-					createVNode(UiTooltip_default, { for: guardedBinding16.value }, {
+					createVNode(UiTooltip_default, { for: guardedBinding15.value }, {
 						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode("Wrap text to the right", -1)])]),
 						_: 1
 					}, 8, ["for"]),
-					createVNode(UiTooltip_default, { for: guardedBinding17.value }, {
+					createVNode(UiTooltip_default, { for: guardedBinding16.value }, {
 						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode("Wrap text to the left", -1)])]),
 						_: 1
 					}, 8, ["for"]),
-					createVNode(UiTooltip_default, { for: guardedBinding18.value }, {
+					createVNode(UiTooltip_default, { for: base.value }, {
 						default: withCtx(() => [..._cache[4] || (_cache[4] = [createTextVNode("Image description", -1)])]),
 						_: 1
 					}, 8, ["for"]),
-					createVNode(UiTooltip_default, { for: guardedBinding19.value }, {
+					createVNode(UiTooltip_default, { for: guardedBinding17.value }, {
 						default: withCtx(() => [..._cache[5] || (_cache[5] = [createTextVNode("Delete image", -1)])]),
 						_: 1
 					}, 8, ["for"]),
@@ -519,20 +432,20 @@ var UiEditorImageToolbar_default = /* @__PURE__ */ defineComponent({
 						"data-image-description": "",
 						size: "sm",
 						"aria-label": "Image description",
-						for: guardedBinding20.value,
-						open: guardedBinding21.value
+						for: base.value,
+						open: describing.value
 					}, {
 						default: withCtx(() => [createElementVNode("form", _hoisted_2, [createVNode(UiStack_default, { gap: "s" }, {
 							default: withCtx(() => [
 								createVNode(UiFormField_default, null, {
 									default: withCtx(() => [createElementVNode("label", {
 										slot: "label",
-										for: guardedBinding22.value
+										for: guardedBinding18.value
 									}, "Alt text", 8, _hoisted_3), createVNode(UiInput_default, {
 										"data-image-alt": "",
 										size: "sm",
-										id: guardedBinding23.value,
-										value: guardedBinding24.value
+										id: guardedBinding19.value,
+										value: draft.value
 									}, null, 8, ["id", "value"])]),
 									_: 1
 								}),