@threadlabs/looma 0.4.0 → 0.5.0

package/vue/chunks/UiEditorTableOverlay.js

@@ -0,0 +1,301 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, watchEffect } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-overlay/ui-editor-table-overlay.js";
+//#region .build/vue/UiEditorTableOverlay.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["hidden"];
+var _hoisted_2 = { class: "rows" };
+var _hoisted_3 = ["data-control-key"];
+var _hoisted_4 = [
+	"data-ui-affordance",
+	"data-action",
+	"data-boundary-index",
+	"aria-label"
+];
+var _hoisted_5 = {
+	class: "tooltip",
+	role: "tooltip"
+};
+var _hoisted_6 = { class: "cols" };
+var _hoisted_7 = ["data-control-key"];
+var _hoisted_8 = [
+	"data-ui-affordance",
+	"data-action",
+	"data-boundary-index",
+	"aria-label"
+];
+var _hoisted_9 = {
+	class: "tooltip",
+	role: "tooltip"
+};
+var _hoisted_10 = ["data-row-index", "data-column-index"];
+var _hoisted_11 = { class: "glyph" };
+var _hoisted_12 = ["data-row-index", "data-column-index"];
+var _hoisted_13 = { class: "glyph" };
+var _hoisted_14 = ["data-row-index", "data-column-index"];
+//#endregion
+//#region .build/vue/UiEditorTableOverlay.vue
+var UiEditorTableOverlay_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorTableOverlay",
+	props: {
+		geometry: {},
+		open: {
+			type: [Boolean, null],
+			default: false
+		}
+	},
+	emits: ["action"],
+	setup(__props, { emit: __emit }) {
+		const hn = {
+			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v),
+			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v),
+			shape: (items, where, sort, limit) => {
+				let list = Array.isArray(items) ? items.slice() : [];
+				if (where !== void 0) list = list.filter((item) => hn.t(where(item)));
+				if (sort.length > 0) {
+					const field = (item, path) => item !== null && typeof item === "object" && !Array.isArray(item) ? path.split(".").reduce((value, key) => value?.[key], item) : item;
+					const compare = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+					list.sort((a, b) => {
+						for (const key of sort) {
+							const descending = key.startsWith("-");
+							const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+							if (order !== 0) return descending ? -order : order;
+						}
+						return 0;
+					});
+				}
+				return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+			}
+		};
+		const props = __props;
+		const emit = __emit;
+		const root = ref(null);
+		const refs = {};
+		const state_rows = ref([]);
+		const state_cols = ref([]);
+		const state_hovered = ref(null);
+		const state_active = ref(null);
+		const state_activeKey = ref("");
+		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+		const dispatch = (name, detail) => {
+			const declared = { "action": {
+				"bubbles": true,
+				"composed": true,
+				"cancelable": false
+			} };
+			const checks = { "action": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after") && Number.isInteger(detail["boundaryIndex"]) && Object.keys(detail).every((key) => ["action", "boundaryIndex"].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "select-row" || detail["action"] === "select-column") && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && Object.keys(detail).every((key) => [
+				"action",
+				"rowIndex",
+				"columnIndex"
+			].includes(key)) || detail !== null && typeof detail === "object" && !Array.isArray(detail) && detail["action"] === "open-cell-menu" && Number.isInteger(detail["rowIndex"]) && Number.isInteger(detail["columnIndex"]) && detail["anchor"] !== null && typeof detail["anchor"] === "object" && !Array.isArray(detail["anchor"]) && typeof detail["anchor"]["left"] === "number" && Number.isFinite(detail["anchor"]["left"]) && typeof detail["anchor"]["top"] === "number" && Number.isFinite(detail["anchor"]["top"]) && typeof detail["anchor"]["right"] === "number" && Number.isFinite(detail["anchor"]["right"]) && typeof detail["anchor"]["bottom"] === "number" && Number.isFinite(detail["anchor"]["bottom"]) && Object.keys(detail["anchor"]).every((key) => [
+				"left",
+				"top",
+				"right",
+				"bottom"
+			].includes(key)) && Object.keys(detail).every((key) => [
+				"action",
+				"rowIndex",
+				"columnIndex",
+				"anchor"
+			].includes(key)) };
+			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+			emit(name, detail);
+			return root.value?.dispatchEvent(new CustomEvent(name, {
+				bubbles: true,
+				composed: true,
+				...declared[name],
+				detail
+			})) ?? true;
+		};
+		function read(name) {
+			if (name === "rows") return state_rows.value;
+			if (name === "cols") return state_cols.value;
+			if (name === "hovered") return state_hovered.value;
+			if (name === "active") return state_active.value;
+			if (name === "activeKey") return state_activeKey.value;
+			return props[name];
+		}
+		function write(name, value) {
+			if (name === "rows") {
+				state_rows.value = value;
+				return true;
+			}
+			if (name === "cols") {
+				state_cols.value = value;
+				return true;
+			}
+			if (name === "hovered") {
+				state_hovered.value = value;
+				return true;
+			}
+			if (name === "active") {
+				state_active.value = value;
+				return true;
+			}
+			if (name === "activeKey") {
+				state_activeKey.value = value;
+				return true;
+			}
+			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+		}
+		const stops = [];
+		const host = {
+			get element() {
+				return root.value;
+			},
+			state: new Proxy({}, {
+				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
+				set: (_target, name, value) => typeof name === "string" && write(name, value)
+			}),
+			refs,
+			elements: new Proxy({}, { get: (_target, name) => {
+				if (typeof name !== "string" || root.value === null) return void 0;
+				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
+			} }),
+			signal(initialValue) {
+				const value = shallowRef(initialValue);
+				return {
+					get: () => value.value,
+					set: (next) => {
+						if (!Object.is(value.value, next)) value.value = next;
+					},
+					update: (next) => {
+						const updated = next(value.value);
+						if (!Object.is(value.value, updated)) value.value = updated;
+					}
+				};
+			},
+			computed(compute) {
+				const value = computed(compute);
+				return { get: () => value.value };
+			},
+			effect(run) {
+				const stop = watchEffect((onCleanup) => {
+					const cleanup = run();
+					if (typeof cleanup === "function") onCleanup(cleanup);
+				}, { flush: "post" });
+				stops.push(stop);
+				return stop;
+			},
+			on(event, listener) {
+				const element = root.value;
+				element?.addEventListener(event, listener);
+				const off = () => element?.removeEventListener(event, listener);
+				stops.push(off);
+				return off;
+			},
+			dispatch
+		};
+		let cleanup;
+		onMounted(() => {
+			Promise.resolve(controllerModule.default(host)).then((result) => {
+				cleanup = result;
+			});
+		});
+		onBeforeUnmount(() => {
+			for (const stop of stops.splice(0)) stop();
+			if (typeof cleanup === "function") cleanup();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-component": "ui-editor-table-overlay",
+				"aria-label": "Table controls"
+			}, _ctx.$attrs, {
+				hidden: hn.attr(!hn.t(props.open)),
+				ref_key: "root",
+				ref: root
+			}), [
+				createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_rows.value, void 0, [], void 0), (control, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: control?.key,
+						class: normalizeClass(["control row", { "active": hn.t(control?.key === state_activeKey.value) }]),
+						"data-control-key": hn.attr(control?.key),
+						style: normalizeStyle({ "top": hn.text(control?.offset) })
+					}, [
+						_cache[0] || (_cache[0] = createElementVNode("span", {
+							class: "line",
+							"aria-hidden": "true"
+						}, null, -1)),
+						_cache[1] || (_cache[1] = createElementVNode("span", {
+							class: "guide",
+							"data-ui-guide": "",
+							"aria-hidden": "true"
+						}, null, -1)),
+						createElementVNode("button", {
+							type: "button",
+							class: "handle",
+							"data-ui-affordance": hn.attr(control?.affordance),
+							"data-action": hn.attr(control?.action),
+							"data-boundary-index": hn.attr(control?.index),
+							"aria-label": hn.enumerated(control?.label)
+						}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_5, toDisplayString(hn.text(control?.label)), 1)], 8, _hoisted_4)
+					], 14, _hoisted_3);
+				}), 128))]),
+				createElementVNode("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_cols.value, void 0, [], void 0), (control, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: control?.key,
+						class: normalizeClass(["control col", { "active": hn.t(control?.key === state_activeKey.value) }]),
+						"data-control-key": hn.attr(control?.key),
+						style: normalizeStyle({ "left": hn.text(control?.offset) })
+					}, [
+						_cache[2] || (_cache[2] = createElementVNode("span", {
+							class: "line",
+							"aria-hidden": "true"
+						}, null, -1)),
+						_cache[3] || (_cache[3] = createElementVNode("span", {
+							class: "guide",
+							"data-ui-guide": "",
+							"aria-hidden": "true"
+						}, null, -1)),
+						createElementVNode("button", {
+							type: "button",
+							class: "handle",
+							"data-ui-affordance": hn.attr(control?.affordance),
+							"data-action": hn.attr(control?.action),
+							"data-boundary-index": hn.attr(control?.index),
+							"aria-label": hn.enumerated(control?.label)
+						}, [createVNode(UiIcon_default, { name: "plus" }), createElementVNode("span", _hoisted_9, toDisplayString(hn.text(control?.label)), 1)], 8, _hoisted_8)
+					], 14, _hoisted_7);
+				}), 128))]),
+				hn.t(state_hovered.value) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+					type: "button",
+					class: "selector row",
+					"data-action": "select-row",
+					title: "Select row",
+					"aria-label": "Select row",
+					"data-row-index": hn.attr(state_hovered.value?.rowIndex),
+					"data-column-index": hn.attr(state_hovered.value?.columnIndex),
+					style: normalizeStyle({ "top": hn.text(state_hovered.value?.rowOffset) })
+				}, [createElementVNode("span", _hoisted_11, [createVNode(UiIcon_default, { name: "grip-vertical" })])], 12, _hoisted_10), createElementVNode("button", {
+					type: "button",
+					class: "selector column",
+					"data-action": "select-column",
+					title: "Select column",
+					"aria-label": "Select column",
+					"data-row-index": hn.attr(state_hovered.value?.rowIndex),
+					"data-column-index": hn.attr(state_hovered.value?.columnIndex),
+					style: normalizeStyle({ "left": hn.text(state_hovered.value?.columnOffset) })
+				}, [createElementVNode("span", _hoisted_13, [createVNode(UiIcon_default, { name: "grip-horizontal" })])], 12, _hoisted_12)], 64)) : createCommentVNode("v-if", true),
+				hn.t(state_active.value) ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "cell-menu",
+					"data-action": "open-cell-menu",
+					title: "Cell actions",
+					"aria-label": "Cell actions",
+					"data-row-index": hn.attr(state_active.value?.rowIndex),
+					"data-column-index": hn.attr(state_active.value?.columnIndex),
+					style: normalizeStyle({
+						"left": hn.text(state_active.value?.menuLeft),
+						"top": hn.text(state_active.value?.menuTop)
+					})
+				}, [createVNode(UiIcon_default, { name: "chevron-down" })], 12, _hoisted_14)) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-7b392ded"]]);
+//#endregion
+export { UiEditorTableOverlay_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -0,0 +1,299 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as UiIcon_default } from "./UiIcon.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, shallowRef, toDisplayString, watchEffect } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
+//#region .build/vue/UiEditorTableToolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["hidden"];
+var _hoisted_2 = {
+	key: 0,
+	class: "group",
+	role: "group",
+	"aria-label": "Cell alignment"
+};
+var _hoisted_3 = [
+	"data-action",
+	"aria-label",
+	"title",
+	"aria-pressed"
+];
+var _hoisted_4 = {
+	key: 1,
+	class: "sep",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = {
+	key: 2,
+	class: "group",
+	role: "group",
+	"aria-label": "Table structure"
+};
+var _hoisted_6 = ["data-action"];
+var _hoisted_7 = {
+	key: 3,
+	class: "sep",
+	"aria-hidden": "true"
+};
+var _hoisted_8 = {
+	key: 4,
+	class: "overflow"
+};
+var _hoisted_9 = ["aria-expanded"];
+var _hoisted_10 = { class: "chevron" };
+var _hoisted_11 = {
+	key: 0,
+	class: "menu",
+	role: "menu",
+	"aria-label": "More table actions"
+};
+var _hoisted_12 = {
+	key: 0,
+	class: "menu-section",
+	role: "none"
+};
+var _hoisted_13 = {
+	class: "swatches",
+	role: "group",
+	"aria-label": "Cell background"
+};
+var _hoisted_14 = ["aria-checked", "data-action"];
+var _hoisted_15 = {
+	class: "menu-heading",
+	role: "presentation"
+};
+var _hoisted_16 = ["data-action"];
+//#endregion
+//#region .build/vue/UiEditorTableToolbar.vue
+var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorTableToolbar",
+	props: {
+		actions: {},
+		cellAlignment: { default: "left" },
+		cellBackground: { default: "" },
+		open: {
+			type: [Boolean, null],
+			default: false
+		}
+	},
+	emits: ["action"],
+	setup(__props, { emit: __emit }) {
+		const hn = {
+			t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+			text: (v) => v === void 0 || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+			attr: (v) => v === void 0 || v === null || v === false ? void 0 : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? void 0 : String(v),
+			enumerated: (v) => typeof v === "boolean" ? String(v) : hn.attr(v),
+			shape: (items, where, sort, limit) => {
+				let list = Array.isArray(items) ? items.slice() : [];
+				if (where !== void 0) list = list.filter((item) => hn.t(where(item)));
+				if (sort.length > 0) {
+					const field = (item, path) => item !== null && typeof item === "object" && !Array.isArray(item) ? path.split(".").reduce((value, key) => value?.[key], item) : item;
+					const compare = (a, b) => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+					list.sort((a, b) => {
+						for (const key of sort) {
+							const descending = key.startsWith("-");
+							const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+							if (order !== 0) return descending ? -order : order;
+						}
+						return 0;
+					});
+				}
+				return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+			}
+		};
+		const props = __props;
+		const emit = __emit;
+		const root = ref(null);
+		const refs = {};
+		const state_alignments = ref([]);
+		const state_structure = ref([]);
+		const state_swatches = ref([]);
+		const state_sections = ref([]);
+		const state_hasOverflow = ref(false);
+		const state_overflowOpen = ref(false);
+		/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+		const dispatch = (name, detail) => {
+			const declared = { "action": {
+				"bubbles": true,
+				"composed": true,
+				"cancelable": false
+			} };
+			const checks = { "action": (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && (detail["action"] === "align-left" || detail["action"] === "align-center" || detail["action"] === "align-right" || detail["action"] === "background-none" || detail["action"] === "background-gray" || detail["action"] === "background-yellow" || detail["action"] === "background-blue" || detail["action"] === "background-green" || detail["action"] === "background-red" || detail["action"] === "add-row-before" || detail["action"] === "add-row-after" || detail["action"] === "add-column-before" || detail["action"] === "add-column-after" || detail["action"] === "clear-cells" || detail["action"] === "merge-cells" || detail["action"] === "split-cell" || detail["action"] === "delete-row" || detail["action"] === "delete-column" || detail["action"] === "delete-table") && Object.keys(detail).every((key) => ["action"].includes(key)) };
+			if (detail !== void 0 && checks[name] !== void 0 && !checks[name](detail)) throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+			emit(name, detail);
+			return root.value?.dispatchEvent(new CustomEvent(name, {
+				bubbles: true,
+				composed: true,
+				...declared[name],
+				detail
+			})) ?? true;
+		};
+		function read(name) {
+			if (name === "alignments") return state_alignments.value;
+			if (name === "structure") return state_structure.value;
+			if (name === "swatches") return state_swatches.value;
+			if (name === "sections") return state_sections.value;
+			if (name === "hasOverflow") return state_hasOverflow.value;
+			if (name === "overflowOpen") return state_overflowOpen.value;
+			return props[name];
+		}
+		function write(name, value) {
+			if (name === "alignments") {
+				state_alignments.value = value;
+				return true;
+			}
+			if (name === "structure") {
+				state_structure.value = value;
+				return true;
+			}
+			if (name === "swatches") {
+				state_swatches.value = value;
+				return true;
+			}
+			if (name === "sections") {
+				state_sections.value = value;
+				return true;
+			}
+			if (name === "hasOverflow") {
+				state_hasOverflow.value = value;
+				return true;
+			}
+			if (name === "overflowOpen") {
+				state_overflowOpen.value = value;
+				return true;
+			}
+			throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+		}
+		const stops = [];
+		const host = {
+			get element() {
+				return root.value;
+			},
+			state: new Proxy({}, {
+				get: (_target, name) => typeof name === "string" ? read(name) : void 0,
+				set: (_target, name, value) => typeof name === "string" && write(name, value)
+			}),
+			refs,
+			elements: new Proxy({}, { get: (_target, name) => {
+				if (typeof name !== "string" || root.value === null) return void 0;
+				return (root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form"))?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? void 0;
+			} }),
+			signal(initialValue) {
+				const value = shallowRef(initialValue);
+				return {
+					get: () => value.value,
+					set: (next) => {
+						if (!Object.is(value.value, next)) value.value = next;
+					},
+					update: (next) => {
+						const updated = next(value.value);
+						if (!Object.is(value.value, updated)) value.value = updated;
+					}
+				};
+			},
+			computed(compute) {
+				const value = computed(compute);
+				return { get: () => value.value };
+			},
+			effect(run) {
+				const stop = watchEffect((onCleanup) => {
+					const cleanup = run();
+					if (typeof cleanup === "function") onCleanup(cleanup);
+				}, { flush: "post" });
+				stops.push(stop);
+				return stop;
+			},
+			on(event, listener) {
+				const element = root.value;
+				element?.addEventListener(event, listener);
+				const off = () => element?.removeEventListener(event, listener);
+				stops.push(off);
+				return off;
+			},
+			dispatch
+		};
+		let cleanup;
+		onMounted(() => {
+			Promise.resolve(controllerModule.default(host)).then((result) => {
+				cleanup = result;
+			});
+		});
+		onBeforeUnmount(() => {
+			for (const stop of stops.splice(0)) stop();
+			if (typeof cleanup === "function") cleanup();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-component": "ui-editor-table-toolbar",
+				role: "toolbar",
+				"aria-label": "Table actions"
+			}, _ctx.$attrs, {
+				hidden: hn.attr(!hn.t(props.open)),
+				ref_key: "root",
+				ref: root
+			}), [
+				hn.t(state_alignments.value) ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_alignments.value, void 0, [], void 0), (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: item?.action,
+						type: "button",
+						class: normalizeClass(["icon-button", { "active": hn.t(item?.active) }]),
+						"data-action": hn.attr(item?.action),
+						"aria-label": hn.enumerated(item?.label),
+						title: hn.attr(item?.label),
+						"aria-pressed": hn.enumerated(item?.active)
+					}, [createVNode(UiIcon_default, { name: item?.action }, null, 8, ["name"])], 10, _hoisted_3);
+				}), 128))])) : createCommentVNode("v-if", true),
+				hn.t(hn.t(state_alignments.value) && hn.t(state_structure.value)) ? (openBlock(), createElementBlock("div", _hoisted_4)) : createCommentVNode("v-if", true),
+				hn.t(state_structure.value) ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_structure.value, void 0, [], void 0), (item, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: item?.action,
+						type: "button",
+						"data-action": hn.attr(item?.action)
+					}, [createVNode(UiIcon_default, { name: item?.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(hn.text(item?.label)), 1)], 8, _hoisted_6);
+				}), 128))])) : createCommentVNode("v-if", true),
+				hn.t(hn.t(hn.t(state_alignments.value) || hn.t(state_structure.value)) && hn.t(state_hasOverflow.value)) ? (openBlock(), createElementBlock("div", _hoisted_7)) : createCommentVNode("v-if", true),
+				hn.t(state_hasOverflow.value) ? (openBlock(), createElementBlock("div", _hoisted_8, [createElementVNode("button", {
+					type: "button",
+					class: "more",
+					"data-action": "toggle-overflow",
+					"aria-haspopup": "menu",
+					"aria-expanded": hn.enumerated(state_overflowOpen.value)
+				}, [
+					createVNode(UiIcon_default, { name: "table" }),
+					_cache[0] || (_cache[0] = createElementVNode("span", null, "Table options", -1)),
+					createElementVNode("span", _hoisted_10, [createVNode(UiIcon_default, { name: "chevron-down" })])
+				], 8, _hoisted_9), hn.t(state_overflowOpen.value) ? (openBlock(), createElementBlock("div", _hoisted_11, [hn.t(state_swatches.value) ? (openBlock(), createElementBlock("div", _hoisted_12, [_cache[1] || (_cache[1] = createElementVNode("div", {
+					class: "menu-heading",
+					role: "presentation"
+				}, "Background", -1)), createElementVNode("div", _hoisted_13, [(openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_swatches.value, void 0, [], void 0), (swatch, index) => {
+					return openBlock(), createElementBlock("button", {
+						key: swatch?.action,
+						type: "button",
+						class: normalizeClass(["swatch-button", { "selected": hn.t(swatch?.selected) }]),
+						role: "menuitemradio",
+						"aria-checked": hn.enumerated(swatch?.selected),
+						"data-action": hn.attr(swatch?.action)
+					}, [createElementVNode("span", {
+						class: normalizeClass(["swatch", { "default": hn.t(!hn.t(swatch?.color)) }]),
+						style: normalizeStyle({ "--ui-editor-table-toolbar-swatch": hn.text(swatch?.color) })
+					}, null, 6), createElementVNode("span", null, toDisplayString(hn.text(swatch?.label)), 1)], 10, _hoisted_14);
+				}), 128))])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(state_sections.value, void 0, [], void 0), (section, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: section?.heading,
+						class: "menu-section divided",
+						role: "none"
+					}, [createElementVNode("div", _hoisted_15, toDisplayString(hn.text(section?.heading)), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(hn.shape(section?.items, void 0, [], void 0), (item, index) => {
+						return openBlock(), createElementBlock("button", {
+							key: item?.action,
+							type: "button",
+							role: "menuitem",
+							"data-action": hn.attr(item?.action),
+							class: normalizeClass({ "danger": hn.t(item?.danger) })
+						}, [createVNode(UiIcon_default, { name: item?.icon }, null, 8, ["name"]), createElementVNode("span", null, toDisplayString(hn.text(item?.label)), 1)], 10, _hoisted_16);
+					}), 128))]);
+				}), 128))])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
+			], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-6f66c7f4"]]);
+//#endregion
+export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiEditorToolbar.js

@@ -0,0 +1,37 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+//#region .build/vue/UiEditorToolbar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-editor-toolbar-state"];
+//#endregion
+//#region .build/vue/UiEditorToolbar.vue
+var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorToolbar",
+	props: { floating: {
+		type: [Boolean, null],
+		default: false
+	} },
+	setup(__props) {
+		const hn = { t: (v) => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false) };
+		const props = __props;
+		/** The resolved values the styles' :host-state() rules test. */
+		const hostState = computed(() => ["floating"].flatMap((name) => {
+			const value = read(name);
+			const tokens = hn.t(value) ? [name] : [];
+			if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+			return tokens;
+		}).join(" "));
+		function read(name) {
+			return props[name];
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				"data-component": "ui-editor-toolbar",
+				role: "toolbar",
+				"aria-label": "Editor toolbar"
+			}, _ctx.$attrs, { "data-ui-editor-toolbar-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-2c94f261"]]);
+//#endregion
+export { UiEditorToolbar_default as t };