@stonecrop/desktop 0.33.0 → 0.35.0

package/dist/desktop.js

@@ -1,111 +1,29 @@
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, toDisplayString, unref, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeProps, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useTemplateRef, vModelText, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { DRAFT_RECORD_ID, isDraftRecordId, useStonecrop, useValidationStore } from "@stonecrop/stonecrop";
 import { AForm, resolvedFieldsToColumns } from "@stonecrop/aform";
-import './assets/index.css';//#region src/components/ActionSet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = { class: "action-menu-icon" };
-var _hoisted_2$3 = { class: "action-element-header" };
-var _hoisted_3$2 = ["disabled", "onClick"];
-var _hoisted_4$2 = { key: 0 };
-var _hoisted_5$2 = { class: "dropdown-header" };
-var _hoisted_6$1 = ["onClick"];
-var _hoisted_7$1 = ["onClick"];
-var _hoisted_8 = { class: "dropdown-container" };
-var _hoisted_9 = { class: "dropdown" };
-var _hoisted_10 = ["onClick"];
-var _hoisted_11 = ["href"];
-var _hoisted_12 = { class: "dropdown-item" };
-var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
-	__name: "ActionSet",
-	props: { elements: { default: () => [] } },
-	emits: ["actionClick"],
-	setup(__props, { emit: __emit }) {
-		const emit = __emit;
-		const dropdownStates = ref({});
-		const isOpen = ref(true);
-		const dropdownOpen = ref([]);
-		onMounted(() => {
-			closeDropdowns();
-		});
-		const closeDropdowns = () => {
-			dropdownStates.value = {};
-			dropdownOpen.value = [];
-		};
-		const onClick = () => {
-			isOpen.value = !isOpen.value;
-		};
-		const toggleDropdown = (index) => {
-			const showDropdown = !dropdownStates.value[index];
-			closeDropdowns();
-			if (showDropdown) {
-				dropdownStates.value[index] = true;
-				dropdownOpen.value[index] = true;
-			}
-		};
-		const handleClick = (action, label) => {
-			emit("actionClick", label, action);
-		};
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass([{ collapsed: !isOpen.value }, "action-set"]) }, [
-				createElementVNode("div", _hoisted_1$3, [createElementVNode("div", {
-					id: "cross",
-					class: normalizeClass({ rotated: isOpen.value }),
-					onClick
-				}, "×", 2)]),
-				_cache[0] || (_cache[0] = createElementVNode("div", { style: { "margin-right": "30px" } }, null, -1)),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (el, index) => {
-					return openBlock(), createElementBlock("div", {
-						key: el.label,
-						class: "action-element"
-					}, [createElementVNode("div", _hoisted_2$3, [el.type == "button" ? (openBlock(), createElementBlock("button", {
-						key: 0,
-						disabled: el.disabled,
-						class: "button-default",
-						onClick: ($event) => handleClick(el.action, el.label)
-					}, toDisplayString(el.label), 9, _hoisted_3$2)) : createCommentVNode("", true)]), el.type == "dropdown" ? (openBlock(), createElementBlock("div", _hoisted_4$2, [createElementVNode("div", _hoisted_5$2, [createElementVNode("div", {
-						class: normalizeClass(["cross", { rotated: dropdownOpen.value[index] }]),
-						onClick: ($event) => toggleDropdown(index)
-					}, "×", 10, _hoisted_6$1), createElementVNode("button", {
-						class: "button-default dropdown-title",
-						onClick: ($event) => toggleDropdown(index)
-					}, toDisplayString(el.label), 9, _hoisted_7$1)]), withDirectives(createElementVNode("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [(openBlock(true), createElementBlock(Fragment, null, renderList(el.actions, (item) => {
-						return openBlock(), createElementBlock("div", { key: item.label }, [item.action != null ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							class: "dropdown-item",
-							onClick: ($event) => handleClick(item.action, item.label)
-						}, toDisplayString(item.label), 9, _hoisted_10)) : item.link != null ? (openBlock(), createElementBlock("a", {
-							key: 1,
-							href: item.link
-						}, [createElementVNode("button", _hoisted_12, toDisplayString(item.label), 1)], 8, _hoisted_11)) : createCommentVNode("", true)]);
-					}), 128))])], 512), [[vShow, dropdownStates.value[index]]])])) : createCommentVNode("", true)]);
-				}), 128))
-			], 2);
-		};
-	}
-});
-//#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
-//#region src/components/ActionSet.vue
-var ActionSet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ActionSet_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-8e18f635"]]);
-//#endregion
-//#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "command-palette-header" };
-var _hoisted_2$2 = ["placeholder"];
-var _hoisted_3$1 = {
+import './assets/index.css';//#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$3 = { class: "command-palette-header" };
+var _hoisted_2$3 = ["placeholder", "aria-activedescendant"];
+var _hoisted_3$3 = {
 	key: 0,
-	class: "command-palette-results"
+	id: "command-palette-results",
+	class: "command-palette-results",
+	role: "listbox",
+	"aria-label": "Command results"
 };
-var _hoisted_4$1 = ["onClick", "onMouseover"];
-var _hoisted_5$1 = { class: "result-title" };
-var _hoisted_6 = { class: "result-content" };
-var _hoisted_7 = {
+var _hoisted_4$3 = [
+	"id",
+	"aria-selected",
+	"onClick",
+	"onMouseover"
+];
+var _hoisted_5$3 = { class: "result-title" };
+var _hoisted_6$2 = { class: "result-content" };
+var _hoisted_7$1 = {
 	key: 1,
-	class: "command-palette-no-results"
+	class: "command-palette-no-results",
+	role: "status",
+	"aria-live": "polite"
 };
 //#endregion
 //#region src/components/CommandPalette.vue
@@ -123,6 +41,7 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 	emits: ["select", "close"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const listboxId = useId();
 		const query = ref("");
 		const selectedIndex = ref(0);
 		const inputRef = useTemplateRef("input");
@@ -172,41 +91,359 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 					onClick: closeModal
 				}, [createElementVNode("div", {
 					class: "command-palette",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": "Command palette",
 					onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"]))
-				}, [createElementVNode("div", _hoisted_1$2, [withDirectives(createElementVNode("input", {
+				}, [createElementVNode("div", _hoisted_1$3, [withDirectives(createElementVNode("input", {
 					ref: "input",
 					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
 					type: "text",
 					class: "command-palette-input",
 					placeholder: __props.placeholder,
+					"aria-label": "Search commands",
+					"aria-activedescendant": results.value.length && selectedIndex.value >= 0 ? `${unref(listboxId)}-opt-${selectedIndex.value}` : void 0,
+					"aria-controls": "command-palette-results",
 					autofocus: "",
 					onKeydown: handleKeydown
-				}, null, 40, _hoisted_2$2), [[vModelText, query.value]])]), results.value.length ? (openBlock(), createElementBlock("div", _hoisted_3$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
+				}, null, 40, _hoisted_2$3), [[vModelText, query.value]])]), results.value.length ? (openBlock(), createElementBlock("div", _hoisted_3$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(results.value, (result, index) => {
 					return openBlock(), createElementBlock("div", {
+						id: `${unref(listboxId)}-opt-${index}`,
 						key: index,
 						class: normalizeClass(["command-palette-result", { selected: index === selectedIndex.value }]),
+						role: "option",
+						"aria-selected": index === selectedIndex.value,
 						onClick: ($event) => selectResult(result),
 						onMouseover: ($event) => selectedIndex.value = index
-					}, [createElementVNode("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "title", { result })]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "content", { result })])], 42, _hoisted_4$1);
-				}), 128))])) : query.value && !results.value.length ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(" No results found for \"" + toDisplayString(query.value) + "\" ", 1)])])) : createCommentVNode("", true)])])) : createCommentVNode("", true)]),
+					}, [createElementVNode("div", _hoisted_5$3, [renderSlot(_ctx.$slots, "title", { result })]), createElementVNode("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "content", { result })])], 42, _hoisted_4$3);
+				}), 128))])) : query.value && !results.value.length ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(" No results found for \"" + toDisplayString(query.value) + "\" ", 1)])])) : createCommentVNode("", true)])])) : createCommentVNode("", true)]),
 				_: 3
 			})]);
 		};
 	}
 });
 //#endregion
+//#region src/icons/index.ts
+/**
+* Shared 24×24 stroke chrome for ActionSet and shell icons.
+* Paths are Lucide (or a reduced Autoreader tray) so 16px tiles stay a distinct silhouette.
+*/
+function actionSetIcon(name, children) {
+	return defineComponent({
+		name,
+		inheritAttrs: false,
+		setup(_, { attrs }) {
+			return () => h("svg", mergeProps({
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "2",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				"aria-hidden": "true"
+			}, attrs), children());
+		}
+	});
+}
+/** Two flowchart nodes and a connecting elbow — FSM / BPA “move”. @public */
+var ActionSetIconActions = actionSetIcon("ActionSetIconActions", () => [
+	h("rect", {
+		width: "8",
+		height: "8",
+		x: "3",
+		y: "3",
+		rx: "2"
+	}),
+	h("path", { d: "M7 11v4a2 2 0 0 0 2 2h4" }),
+	h("rect", {
+		width: "8",
+		height: "8",
+		x: "13",
+		y: "13",
+		rx: "2"
+	})
+]);
+/** Magnifier. @public */
+var ActionSetIconSearch = actionSetIcon("ActionSetIconSearch", () => [h("circle", {
+	cx: "11",
+	cy: "11",
+	r: "8"
+}), h("path", { d: "m21 21-4.3-4.3" })]);
+/** Speech bubble with a tail. @public */
+var ActionSetIconChat = actionSetIcon("ActionSetIconChat", () => [h("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" })]);
+/** Autoreader stacked trays, reduced to 24 viewBox. @public */
+var ActionSetIconEmail = actionSetIcon("ActionSetIconEmail", () => [
+	h("rect", {
+		x: "5",
+		y: "3",
+		width: "14",
+		height: "8",
+		rx: "1.5"
+	}),
+	h("path", { d: "M8 7h8" }),
+	h("path", { d: "M3 12h18" }),
+	h("rect", {
+		x: "5",
+		y: "13",
+		width: "14",
+		height: "8",
+		rx: "1.5"
+	}),
+	h("path", { d: "M8 17h8" })
+]);
+/** Paperclip — attachments, not another document. @public */
+var ActionSetIconFiles = actionSetIcon("ActionSetIconFiles", () => [h("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486" })]);
+/** Page with a check — the Approvals stamp, simplified. @public */
+var ActionSetIconApprovals = actionSetIcon("ActionSetIconApprovals", () => [
+	h("path", { d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.687.687l3.626 3.626A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" }),
+	h("path", { d: "M14 2v5a1 1 0 0 0 1 1h5" }),
+	h("path", { d: "m9 15 2 2 4-4" })
+]);
+/** Three rising bars — reports / BI. @public */
+var ActionSetIconReports = actionSetIcon("ActionSetIconReports", () => [
+	h("path", { d: "M5 21v-6" }),
+	h("path", { d: "M12 21V3" }),
+	h("path", { d: "M19 21V9" })
+]);
+/** Printer. @public */
+var ActionSetIconPrint = actionSetIcon("ActionSetIconPrint", () => [
+	h("path", { d: "M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" }),
+	h("path", { d: "M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6" }),
+	h("rect", {
+		x: "6",
+		y: "14",
+		width: "12",
+		height: "8",
+		rx: "1"
+	})
+]);
+/** Gear. @public */
+var ActionSetIconSettings = actionSetIcon("ActionSetIconSettings", () => [h("path", { d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" }), h("circle", {
+	cx: "12",
+	cy: "12",
+	r: "3"
+})]);
+/** Circled question mark. @public */
+var ActionSetIconHelp = actionSetIcon("ActionSetIconHelp", () => [
+	h("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}),
+	h("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+	h("path", { d: "M12 17h.01" })
+]);
+//#endregion
+//#region src/components/ActionSet.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = {
+	class: "action-set__tile",
+	role: "presentation"
+};
+var _hoisted_2$2 = ["aria-expanded"];
+var _hoisted_3$2 = [
+	"aria-label",
+	"aria-current",
+	"title",
+	"onClick"
+];
+var _hoisted_4$2 = {
+	key: 1,
+	class: "action-set__item-fallback",
+	"aria-hidden": "true"
+};
+var _hoisted_5$2 = {
+	key: 2,
+	class: "action-set__item-badge"
+};
+var _hoisted_6$1 = { class: "action-set__drawer-header" };
+var _hoisted_7 = { class: "action-set__drawer-body" };
+var _hoisted_8 = {
+	key: 0,
+	class: "action-set__actions-list"
+};
+var _hoisted_9 = ["aria-label"];
+var _hoisted_10 = {
+	class: "action-set__actions-group-label",
+	"aria-hidden": "true"
+};
+var _hoisted_11 = ["onClick"];
+var _hoisted_12 = ["href"];
+var _hoisted_13 = ["href"];
+var _hoisted_14 = ["disabled", "onClick"];
+var _hoisted_15 = {
+	key: 0,
+	class: "action-set__actions-empty"
+};
+var _hoisted_16 = {
+	key: 1,
+	class: "action-set__drawer-empty"
+};
+var ACTIONS_TAB_ID = "__actions__";
+var SEARCH_TAB_ID = "__search__";
+var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "ActionSet",
+	props: {
+		slots: { default: () => [] },
+		elements: { default: () => [] },
+		controller: {}
+	},
+	emits: ["actionClick", "search"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const isExpanded = ref(true);
+		const drawerEl = ref(null);
+		const lastFocusedBeforeDrawer = ref(null);
+		const activeSlot = computed(() => __props.slots.find((slot) => slot.id === __props.controller.activeSlotId.value) ?? null);
+		const hasActions = computed(() => __props.elements.length > 0);
+		const activeTabId = computed(() => __props.controller.isActionsOpen.value ? ACTIONS_TAB_ID : __props.controller.activeSlotId.value);
+		const drawerOpen = computed(() => __props.controller.isDrawerOpen.value);
+		const allTabs = computed(() => {
+			const tabs = [{
+				id: SEARCH_TAB_ID,
+				label: "Search",
+				icon: markRaw(ActionSetIconSearch)
+			}];
+			for (const slot of __props.slots) tabs.push({
+				id: slot.id,
+				label: slot.label,
+				icon: slot.icon,
+				badge: slot.badge !== void 0 ? unref(slot.badge) : void 0
+			});
+			if (hasActions.value) tabs.push({
+				id: ACTIONS_TAB_ID,
+				label: "Actions",
+				icon: markRaw(ActionSetIconActions)
+			});
+			return tabs;
+		});
+		function slotFallback(label) {
+			return label.trim().charAt(0).toUpperCase() || "?";
+		}
+		function tabBadge(tab) {
+			const count = tab.badge;
+			return typeof count === "number" && count > 0 ? count : 0;
+		}
+		function onDrawerKeydown(event) {
+			if (event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			__props.controller.close();
+		}
+		function onToggle() {
+			isExpanded.value = !isExpanded.value;
+		}
+		function onTileClick(tabId) {
+			if (tabId === SEARCH_TAB_ID) emit("search");
+			else if (drawerOpen.value && activeTabId.value === tabId) __props.controller.close();
+			else if (tabId === ACTIONS_TAB_ID) __props.controller.openActions();
+			else __props.controller.openSlot(tabId);
+		}
+		function onActionClick(label, action) {
+			if (action) emit("actionClick", label, action);
+		}
+		watch(drawerOpen, async (open) => {
+			if (open) {
+				lastFocusedBeforeDrawer.value = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+				await nextTick();
+				drawerEl.value?.querySelector("button:not([disabled]), [href], input, select, textarea")?.focus();
+				return;
+			}
+			lastFocusedBeforeDrawer.value?.focus();
+			lastFocusedBeforeDrawer.value = null;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["action-set", {
+				"action-set--expanded": isExpanded.value,
+				"action-set--drawer-open": drawerOpen.value
+			}]) }, [createElementVNode("div", _hoisted_1$2, [createElementVNode("button", {
+				type: "button",
+				class: normalizeClass(["action-set__toggle", { "action-set__toggle--expanded": isExpanded.value }]),
+				"aria-label": "Toggle menu",
+				"aria-expanded": isExpanded.value,
+				onClick: onToggle
+			}, " + ", 10, _hoisted_2$2), isExpanded.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(allTabs.value, (tab) => {
+				return openBlock(), createElementBlock("button", {
+					key: tab.id,
+					type: "button",
+					class: normalizeClass(["action-set__item", { "action-set__item--active": drawerOpen.value && activeTabId.value === tab.id }]),
+					"aria-label": tab.label,
+					"aria-current": drawerOpen.value && activeTabId.value === tab.id ? "page" : void 0,
+					title: tab.label,
+					onClick: ($event) => onTileClick(tab.id)
+				}, [tab.icon ? (openBlock(), createBlock(resolveDynamicComponent(tab.icon), {
+					key: 0,
+					class: "action-set__item-icon"
+				})) : (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(slotFallback(tab.label)), 1)), tabBadge(tab) > 0 ? (openBlock(), createElementBlock("span", _hoisted_5$2, toDisplayString(tabBadge(tab)), 1)) : createCommentVNode("", true)], 10, _hoisted_3$2);
+			}), 128)) : createCommentVNode("", true)]), drawerOpen.value ? (openBlock(), createElementBlock("aside", {
+				key: 0,
+				ref_key: "drawerEl",
+				ref: drawerEl,
+				class: "action-set__drawer",
+				"aria-label": "Side panel",
+				onKeydown: onDrawerKeydown
+			}, [createElementVNode("header", _hoisted_6$1, [createElementVNode("button", {
+				type: "button",
+				class: "action-set__drawer-close",
+				"aria-label": "Close panel",
+				onClick: _cache[0] || (_cache[0] = ($event) => __props.controller.close())
+			}, " × ")]), createElementVNode("div", _hoisted_7, [activeTabId.value === ACTIONS_TAB_ID ? (openBlock(), createElementBlock("div", _hoisted_8, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.elements, (el) => {
+				return openBlock(), createElementBlock(Fragment, { key: el.label }, [el.type === "dropdown" ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "action-set__actions-group",
+					role: "group",
+					"aria-label": el.label
+				}, [createElementVNode("p", _hoisted_10, toDisplayString(el.label), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(el.actions, (item) => {
+					return openBlock(), createElementBlock(Fragment, { key: item.label }, [item.action ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "action-set__actions-list-item action-set__actions-list-item--nested",
+						onClick: ($event) => onActionClick(item.label, item.action)
+					}, toDisplayString(item.label), 9, _hoisted_11)) : item.link ? (openBlock(), createElementBlock("a", {
+						key: 1,
+						href: item.link,
+						class: "action-set__actions-list-item action-set__actions-list-item--nested"
+					}, toDisplayString(item.label), 9, _hoisted_12)) : createCommentVNode("", true)], 64);
+				}), 128))], 8, _hoisted_9)) : !el.action && el.link ? (openBlock(), createElementBlock("a", {
+					key: 1,
+					href: el.link,
+					class: "action-set__actions-list-item"
+				}, toDisplayString(el.label), 9, _hoisted_13)) : (openBlock(), createElementBlock("button", {
+					key: 2,
+					type: "button",
+					class: "action-set__actions-list-item",
+					disabled: el.disabled,
+					onClick: ($event) => onActionClick(el.label, el.action)
+				}, toDisplayString(el.label), 9, _hoisted_14))], 64);
+			}), 128)), __props.elements.length === 0 ? (openBlock(), createElementBlock("p", _hoisted_15, "No actions available")) : createCommentVNode("", true)])) : activeSlot.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [activeSlot.value.component ? (openBlock(), createBlock(resolveDynamicComponent(activeSlot.value.component), { key: activeSlot.value.id })) : (openBlock(), createElementBlock("p", _hoisted_16, "No content"))], 64)) : createCommentVNode("", true)])], 544)) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+//#region \0plugin-vue:export-helper
+var _plugin_vue_export_helper_default = (sfc, props) => {
+	const target = sfc.__vccOpts || sfc;
+	for (const [key, val] of props) target[key] = val;
+	return target;
+};
+//#endregion
+//#region src/components/ActionSet.vue
+var ActionSet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(ActionSet_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-40295597"]]);
+//#endregion
 //#region src/sheet-nav-toolbar.ts
 /** The id of the element SheetNav renders for footer controls, left of its tabs. */
 var SHEET_NAV_TOOLBAR_ID = "sheetnav-toolbar";
-/** Teleport target for footer controls rendered anywhere on the page: `<Teleport :to="SHEET_NAV_TOOLBAR_SELECTOR">`. */
+/**
+* Teleport target for footer controls rendered anywhere on the page: `<Teleport :to="SHEET_NAV_TOOLBAR_SELECTOR">`.
+* @public
+*/
 var SHEET_NAV_TOOLBAR_SELECTOR = `#${SHEET_NAV_TOOLBAR_ID}`;
 //#endregion
 //#region src/components/SheetNav.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = { class: "sheetnav-footer-cluster" };
 var _hoisted_2$1 = ["id"];
-var _hoisted_3 = { class: "tabs" };
-var _hoisted_4 = { tabindex: "0" };
-var _hoisted_5 = { tabindex: "0" };
+var _hoisted_3$1 = { class: "tabs" };
+var _hoisted_4$1 = { class: "hidebreadcrumbs" };
+var _hoisted_5$1 = ["aria-label", "aria-expanded"];
 //#endregion
 //#region src/components/SheetNav.vue
 var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -217,52 +454,39 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			if (document.querySelectorAll(SHEET_NAV_TOOLBAR_SELECTOR).length > 1) console.warn(`More than one SheetNav is mounted: content teleported to ${SHEET_NAV_TOOLBAR_SELECTOR} lands in the first one only.`);
 		});
 		const breadcrumbsVisibile = ref(true);
-		const searchVisible = ref(false);
-		const searchText = ref("");
-		const inputRef = useTemplateRef("searchinput");
 		const rotateHideTabIcon = computed(() => {
 			return breadcrumbsVisibile.value ? "unrotated" : "rotated";
 		});
 		const toggleBreadcrumbs = () => {
 			breadcrumbsVisibile.value = !breadcrumbsVisibile.value;
 		};
-		const toggleSearch = async () => {
-			searchVisible.value = !searchVisible.value;
-			await nextTick(() => {
-				inputRef.value?.focus();
-			});
-		};
-		const handleSearchInput = (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-		};
-		const handleSearch = async (event) => {
-			event.preventDefault();
-			event.stopPropagation();
-			await toggleSearch();
-		};
 		const navigateHome = () => {};
 		return (_ctx, _cache) => {
 			const _component_router_link = resolveComponent("router-link");
 			return openBlock(), createElementBlock("footer", null, [createElementVNode("div", _hoisted_1$1, [createElementVNode("div", {
 				id: unref(SHEET_NAV_TOOLBAR_ID),
 				class: "sheetnav-toolbar"
-			}, [renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)], 8, _hoisted_2$1), createElementVNode("ul", _hoisted_3, [
-				createElementVNode("li", {
-					class: "hidebreadcrumbs",
-					onClick: toggleBreadcrumbs,
-					onKeydown: withKeys(toggleBreadcrumbs, ["enter"])
-				}, [createElementVNode("a", _hoisted_4, [createElementVNode("div", { class: normalizeClass(rotateHideTabIcon.value) }, "×", 2)])], 32),
-				createElementVNode("li", {
+			}, [renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)], 8, _hoisted_2$1), createElementVNode("ul", _hoisted_3$1, [
+				createElementVNode("li", _hoisted_4$1, [createElementVNode("button", {
+					type: "button",
+					class: "hidebreadcrumbs-btn",
+					"aria-label": breadcrumbsVisibile.value ? "Hide breadcrumbs" : "Show breadcrumbs",
+					"aria-expanded": breadcrumbsVisibile.value,
+					onClick: toggleBreadcrumbs
+				}, [createElementVNode("span", {
+					class: normalizeClass(rotateHideTabIcon.value),
+					"aria-hidden": "true"
+				}, "×", 2)], 8, _hoisted_5$1)]),
+				breadcrumbsVisibile.value ? (openBlock(), createElementBlock("li", {
+					key: 0,
 					class: "hometab",
-					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" }),
 					onClick: navigateHome,
 					onKeydown: withKeys(navigateHome, ["enter"])
 				}, [createVNode(_component_router_link, {
 					to: "/",
 					tabindex: "0"
 				}, {
-					default: withCtx(() => [..._cache[5] || (_cache[5] = [createElementVNode("svg", {
+					default: withCtx(() => [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
 						class: "icon",
 						"aria-label": "Home",
 						viewBox: "0 0 24 24",
@@ -271,67 +495,103 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 						"stroke-width": "2"
 					}, [createElementVNode("path", { d: "M3 12l9-9 9 9" }), createElementVNode("path", { d: "M9 21V12h6v9" })], -1)])]),
 					_: 1
-				})], 36),
-				createElementVNode("li", {
-					class: normalizeClass(["searchtab", { "search-active": searchVisible.value }]),
-					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" })
-				}, [createElementVNode("a", _hoisted_5, [withDirectives((openBlock(), createElementBlock("svg", {
-					class: "icon search-icon",
-					role: "button",
-					"aria-label": "Search",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "2",
-					onClick: toggleSearch,
-					onKeydown: withKeys(toggleSearch, ["enter"])
-				}, [..._cache[6] || (_cache[6] = [createElementVNode("circle", {
-					cx: "11",
-					cy: "11",
-					r: "7"
-				}, null, -1), createElementVNode("path", { d: "M21 21l-4.35-4.35" }, null, -1)])], 544)), [[vShow, !searchVisible.value]]), withDirectives(createElementVNode("input", {
-					ref: "searchinput",
-					"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event),
-					type: "text",
-					placeholder: "Search...",
-					onClick: _cache[1] || (_cache[1] = withModifiers(() => {}, ["stop"])),
-					onInput: _cache[2] || (_cache[2] = ($event) => handleSearchInput($event)),
-					onBlur: _cache[3] || (_cache[3] = ($event) => handleSearch($event)),
-					onKeydown: [_cache[4] || (_cache[4] = withKeys(($event) => handleSearch($event), ["enter"])), withKeys(toggleSearch, ["escape"])]
-				}, null, 544), [[vShow, searchVisible.value], [vModelText, searchText.value]])])], 6),
-				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (breadcrumb) => {
-					return openBlock(), createElementBlock("li", {
-						key: breadcrumb.title,
-						style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" })
-					}, [createVNode(_component_router_link, {
+				})], 32)) : createCommentVNode("", true),
+				breadcrumbsVisibile.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.breadcrumbs, (breadcrumb) => {
+					return openBlock(), createElementBlock("li", { key: breadcrumb.title }, [createVNode(_component_router_link, {
 						tabindex: "0",
 						to: breadcrumb.to
 					}, {
 						default: withCtx(() => [createTextVNode(toDisplayString(breadcrumb.title), 1)]),
 						_: 2
-					}, 1032, ["to"])], 4);
-				}), 128))
+					}, 1032, ["to"])]);
+				}), 128)) : createCommentVNode("", true)
 			])])]);
 		};
 	}
-}), [["__scopeId", "data-v-7c905747"]]);
+}), [["__scopeId", "data-v-cdbbd2a0"]]);
+//#endregion
+//#region src/composables/useActionSet.ts
+var actionSetKey = Symbol("actionSet");
+function createActionSet(options) {
+	const activeSlotId = ref(null);
+	const actionsOpen = ref(false);
+	const previewSubject = shallowRef(null);
+	const previewId = ref(void 0);
+	function openActions() {
+		activeSlotId.value = null;
+		closePreview();
+		actionsOpen.value = true;
+	}
+	function openSlot(slotId) {
+		actionsOpen.value = false;
+		if (activeSlotId.value === slotId) return;
+		activeSlotId.value = slotId;
+		closePreview();
+	}
+	function present(subject) {
+		if (subject.id !== void 0 && subject.id === previewId.value) return;
+		previewId.value = subject.id;
+		previewSubject.value = {
+			...subject,
+			view: markRaw(subject.view)
+		};
+	}
+	function closePreview() {
+		previewSubject.value = null;
+		previewId.value = void 0;
+	}
+	function close() {
+		activeSlotId.value = null;
+		actionsOpen.value = false;
+		closePreview();
+	}
+	return {
+		doctype: options.doctype,
+		recordId: options.recordId,
+		activeSlotId: computed(() => activeSlotId.value),
+		previewSubject: computed(() => previewSubject.value),
+		isPreviewOpen: computed(() => previewSubject.value !== null),
+		isActionsOpen: computed(() => actionsOpen.value),
+		isDrawerOpen: computed(() => actionsOpen.value || activeSlotId.value !== null),
+		present,
+		closePreview,
+		close,
+		openActions,
+		openSlot
+	};
+}
+/** @public */
+function useActionSet() {
+	const actionSet = inject(actionSetKey, null);
+	if (!actionSet) throw new Error("useActionSet() must be called inside a component rendered by Desktop");
+	return actionSet;
+}
 //#endregion
 //#region src/components/Desktop.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
-	key: 1,
+var _hoisted_1 = { class: "desktop__workspace" };
+var _hoisted_2 = { class: "desktop__main" };
+var _hoisted_3 = {
+	key: 2,
 	class: "loading"
 };
-var _hoisted_2 = {
-	key: 2,
+var _hoisted_4 = {
+	key: 3,
 	class: "loading"
 };
+var _hoisted_5 = {
+	key: 0,
+	class: "desktop__preview"
+};
+var _hoisted_6 = { class: "desktop__preview-body" };
 //#endregion
 //#region src/components/Desktop.vue
-var Desktop_default = /* @__PURE__ */ defineComponent({
+var Desktop_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "Desktop",
 	props: {
 		availableDoctypes: { default: () => [] },
-		routeAdapter: {}
+		routeAdapter: {},
+		actionSetSlots: {},
+		hostActions: {}
 	},
 	emits: [
 		"action",
@@ -521,6 +781,7 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		const actionElements = computed(() => {
+			if (__props.hostActions) return __props.hostActions;
 			const elements = [];
 			switch (currentView.value) {
 				case "records":
@@ -887,8 +1148,36 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 				event.preventDefault();
 				commandPaletteOpen.value = true;
 			}
-			if (event.key === "Escape" && commandPaletteOpen.value) commandPaletteOpen.value = false;
+			if (event.key === "Escape") {
+				if (commandPaletteOpen.value) {
+					commandPaletteOpen.value = false;
+					return;
+				}
+				if (actionSetController.isPreviewOpen.value) {
+					actionSetController.closePreview();
+					return;
+				}
+				if (actionSetController.isDrawerOpen.value) actionSetController.close();
+			}
 		};
+		const visibleActionSetSlots = computed(() => (__props.actionSetSlots ?? []).filter((slot) => slot.show !== false).map((slot) => Object.assign({}, slot, {
+			icon: slot.icon ? markRaw(slot.icon) : void 0,
+			component: slot.component ? markRaw(slot.component) : void 0
+		})));
+		const actionSetController = createActionSet({
+			doctype: currentDoctype,
+			recordId: currentRecordId
+		});
+		provide(actionSetKey, actionSetController);
+		const actionSetDrawerOpen = computed(() => actionSetController.isDrawerOpen.value);
+		const actionSetPreviewOpen = computed(() => actionSetController.isPreviewOpen.value);
+		const actionSetPreviewSubject = computed(() => actionSetController.previewSubject.value);
+		watch([currentDoctype, currentRecordId], () => {
+			actionSetController.close();
+		});
+		function closeActionSetPreview() {
+			actionSetController.closePreview();
+		}
 		onMounted(() => {
 			document.addEventListener("keydown", handleKeydown);
 		});
@@ -897,15 +1186,14 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
-				class: "desktop",
+				class: normalizeClass(["desktop", {
+					"desktop--action-set-open": actionSetDrawerOpen.value,
+					"desktop--preview-open": actionSetPreviewOpen.value
+				}]),
 				onClick: handleClick
 			}, [
-				createVNode(ActionSet_default, {
-					elements: actionElements.value,
-					onActionClick: handleActionClick
-				}, null, 8, ["elements"]),
-				currentViewSchema.value.length > 0 ? (openBlock(), createBlock(unref(AForm), {
-					key: 0,
+				createElementVNode("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", {}, void 0, true, 0) : currentViewSchema.value.length > 0 ? (openBlock(), createBlock(unref(AForm), {
+					key: 1,
 					data: currentViewData.value,
 					"onUpdate:data": _cache[0] || (_cache[0] = ($event) => currentViewData.value = $event),
 					schema: currentViewSchema.value,
@@ -914,9 +1202,28 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 					"data",
 					"schema",
 					"errors"
-				])) : !unref(stonecrop) ? (openBlock(), createElementBlock("div", _hoisted_1, [..._cache[2] || (_cache[2] = [createElementVNode("p", null, "Initializing Stonecrop...", -1)])])) : (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("p", null, "Loading " + toDisplayString(currentView.value) + " data...", 1)])),
-				createVNode(SheetNav_default, { breadcrumbs: navigationBreadcrumbs.value }, {
-					toolbar: withCtx(() => [renderSlot(_ctx.$slots, "sheetnav-toolbar")]),
+				])) : !unref(stonecrop) ? (openBlock(), createElementBlock("div", _hoisted_3, [..._cache[3] || (_cache[3] = [createElementVNode("p", null, "Initializing Stonecrop...", -1)])])) : (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("p", null, "Loading " + toDisplayString(currentView.value) + " data...", 1)]))]), actionSetPreviewSubject.value ? (openBlock(), createElementBlock("aside", _hoisted_5, [createElementVNode("header", { class: "desktop__preview-header" }, [createElementVNode("button", {
+					type: "button",
+					class: "desktop__preview-close",
+					"aria-label": "Close preview",
+					onClick: closeActionSetPreview
+				}, " × ")]), createElementVNode("div", _hoisted_6, [(openBlock(), createBlock(resolveDynamicComponent(actionSetPreviewSubject.value.view), normalizeProps(guardReactiveProps(actionSetPreviewSubject.value.props ?? {})), null, 16))])])) : createCommentVNode("", true)]),
+				createVNode(ActionSet_default, {
+					slots: visibleActionSetSlots.value,
+					elements: actionElements.value,
+					controller: unref(actionSetController),
+					onActionClick: handleActionClick,
+					onSearch: _cache[1] || (_cache[1] = ($event) => commandPaletteOpen.value = true)
+				}, null, 8, [
+					"slots",
+					"elements",
+					"controller"
+				]),
+				createVNode(SheetNav_default, {
+					class: "desktop__sheetnav",
+					breadcrumbs: navigationBreadcrumbs.value
+				}, {
+					toolbar: withCtx(() => [renderSlot(_ctx.$slots, "sheetnav-toolbar", {}, void 0, true)]),
 					_: 3
 				}, 8, ["breadcrumbs"]),
 				createVNode(CommandPalette_default, {
@@ -924,16 +1231,16 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 					search: searchCommands,
 					placeholder: "Type a command or search...",
 					onSelect: executeCommand,
-					onClose: _cache[1] || (_cache[1] = ($event) => commandPaletteOpen.value = false)
+					onClose: _cache[2] || (_cache[2] = ($event) => commandPaletteOpen.value = false)
 				}, {
 					title: withCtx(({ result }) => [createTextVNode(toDisplayString(result.title), 1)]),
 					content: withCtx(({ result }) => [createTextVNode(toDisplayString(result.description), 1)]),
 					_: 1
 				}, 8, ["is-open"])
-			]);
+			], 2);
 		};
 	}
-});
+}), [["__scopeId", "data-v-378bae6b"]]);
 //#endregion
 //#region src/plugins/index.ts
 /**
@@ -941,12 +1248,11 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 * @public
 */
 var plugin = { install: (app) => {
-	app.component("ActionSet", ActionSet_default);
 	app.component("CommandPalette", CommandPalette_default);
 	app.component("Desktop", Desktop_default);
 	app.component("SheetNav", SheetNav_default);
 } };
 //#endregion
-export { ActionSet_default as ActionSet, CommandPalette_default as CommandPalette, Desktop_default as Desktop, SHEET_NAV_TOOLBAR_SELECTOR, SheetNav_default as SheetNav, plugin as StonecropDesktop };
+export { ActionSetIconActions, ActionSetIconApprovals, ActionSetIconChat, ActionSetIconEmail, ActionSetIconFiles, ActionSetIconHelp, ActionSetIconPrint, ActionSetIconReports, ActionSetIconSearch, ActionSetIconSettings, CommandPalette_default as CommandPalette, Desktop_default as Desktop, SHEET_NAV_TOOLBAR_SELECTOR, SheetNav_default as SheetNav, plugin as StonecropDesktop, useActionSet };
 
 //# sourceMappingURL=desktop.js.map