@stonecrop/desktop 0.34.0 → 0.36.0

package/README.md

@@ -160,7 +160,7 @@ Three things are adjustable, for the cases that genuinely differ between applica
 
 `args` is an opaque JSON array: nothing validates it, so both ends of your own stack have to agree. A backend taking positional `[recordId, data]` supplies `buildArgs` to say so.
 
-Resolving a record's identity and keying it into HST are deliberately **not** adjustable. That rule is declared on the doctype and re-derived server-side by the adapter, and every host that re-derived it client-side got it wrong. If you dispatch through `Stonecrop.dispatchAction` directly instead of using this composable, that method still files the returned record under the settled identity, so you cannot store it under the wrong key by accident. What you lose is the stale-key cleanup and the route-follow, which need the id you dispatched.
+Resolving a record's identity and keying it into HST are deliberately **not** adjustable. That rule is declared on the doctype and re-derived server-side by the adapter, and every host that re-derived it client-side got it wrong. If you dispatch through `Stonecrop.dispatchAction` directly instead of using this composable, that method still files the result's `record` (the server's read of the record after the action) under the settled identity, so you cannot store it under the wrong key by accident. What you lose is the stale-key cleanup and the route-follow, which need the id you dispatched.
 
 Do not copy form data into HST before dispatching. Desktop already hands you the current form snapshot in `payload.data`, and an unsaved record has no HST node to write to.
 

package/dist/assets/index.css

@@ -23,8 +23,8 @@
 .command-palette {
 	width: 600px;
 	max-width: 90%;
-	background-color: white;
-	border-radius: 8px;
+	background-color: var(--sc-overlay-background);
+	border-radius: var(--sc-border-radius);
 	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 	overflow: hidden;
 	max-height: 80vh;
@@ -33,7 +33,7 @@
 }
 .command-palette-header {
 	display: flex;
-	border-bottom: 1px solid #eaeaea;
+	border-bottom: 1px solid var(--sc-gray-10);
 	padding: 12px;
 }
 .command-palette-input {
@@ -49,11 +49,11 @@
 	border: none;
 	font-size: 24px;
 	cursor: pointer;
-	color: #666;
+	color: var(--sc-input-label-color);
 	padding: 0 8px;
 }
 .command-palette-close:hover {
-	color: #333;
+	color: var(--sc-gray-80);
 }
 .command-palette-results {
 	overflow-y: auto;
@@ -62,23 +62,23 @@
 .command-palette-result {
 	padding: 12px 16px;
 	cursor: pointer;
-	border-bottom: 1px solid #f0f0f0;
+	border-bottom: 1px solid var(--sc-gray-10);
 }
 .command-palette-result:hover,
 .command-palette-result.selected {
-	background-color: #f5f5f5;
+	background-color: var(--sc-row-hover-color);
 }
 .command-palette-result.selected {
-	background-color: rgba(132, 60, 3, 0.1);
+	background-color: var(--sc-color-changed);
 }
 .result-title {
 	font-weight: 500;
 	margin-bottom: 4px;
-	color: #333;
+	color: var(--sc-gray-80);
 }
 .result-content {
 	font-size: 14px;
-	color: #666;
+	color: var(--sc-input-label-color);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -86,7 +86,7 @@
 .command-palette-no-results {
 	padding: 20px 16px;
 	text-align: center;
-	color: #666;
+	color: var(--sc-input-label-color);
 }
 
 .action-set[data-v-40295597] {
@@ -287,7 +287,7 @@
 
 /* Pinned to both edges: without `left`, a fixed box takes its container's offset and overflows the
    viewport. Only the toolbar and the tabs take pointer events; the empty strip passes clicks through. */
-footer[data-v-7c905747] {
+footer[data-v-cdbbd2a0] {
 	position: fixed;
 	right: 0;
 	bottom: 0;
@@ -300,12 +300,12 @@ footer[data-v-7c905747] {
 	display: flex;
 	justify-content: flex-end;
 	align-items: flex-end;
-	padding: 0 0.75rem 0 0;
+	padding: 0 1px 0 0;
 	box-sizing: border-box;
 }
 
 /* When the toolbar and the tabs do not fit on one row, the toolbar wraps onto its own row above. */
-.sheetnav-footer-cluster[data-v-7c905747] {
+.sheetnav-footer-cluster[data-v-cdbbd2a0] {
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: flex-end;
@@ -314,7 +314,7 @@ footer[data-v-7c905747] {
 	max-width: 100%;
 	min-width: 0;
 }
-.sheetnav-toolbar[data-v-7c905747] {
+.sheetnav-toolbar[data-v-cdbbd2a0] {
 	pointer-events: auto;
 	min-width: 0;
 	min-height: 2.4rem;
@@ -323,7 +323,7 @@ footer[data-v-7c905747] {
 	justify-content: flex-end;
 	align-items: center;
 }
-.tabs[data-v-7c905747] {
+.tabs[data-v-cdbbd2a0] {
 	pointer-events: auto;
 	flex: 0 0 auto;
 	display: flex;
@@ -334,16 +334,15 @@ footer[data-v-7c905747] {
 	padding: 0;
 	list-style: none;
 }
-.tabs li[data-v-7c905747] {
+.tabs li[data-v-cdbbd2a0] {
 	display: flex;
 	align-items: stretch;
 	list-style-type: none;
 	position: relative;
 	margin-left: -1px;
 }
-
-/* Base tab styling */
-.tabs a[data-v-7c905747] {
+.tabs a[data-v-cdbbd2a0],
+.hidebreadcrumbs-btn[data-v-cdbbd2a0] {
 	height: 100%;
 	min-height: 2.4rem;
 	padding: 0 1rem;
@@ -354,37 +353,38 @@ footer[data-v-7c905747] {
 	text-decoration: none;
 	color: var(--sc-gray-60);
 	background: var(--sc-btn-color);
-	border: 1px solid var(--sc-btn-border);
+	border: 1px solid var(--sc-form-border);
+	border-radius: var(--sc-border-radius);
 	font-size: 0.85rem;
 	font-family: var(--sc-font-family);
-	transition: all 0.15s ease;
+	transition:
+		background 0.15s ease,
+		border-color 0.15s ease;
+}
 
-	/* Minimal ornamentation - subtle top radius only */
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
+/* row-reverse: the last li is the left edge of the strip. */
+.tabs li:last-child a[data-v-cdbbd2a0],
+.tabs li:last-child .hidebreadcrumbs-btn[data-v-cdbbd2a0] {
+	border-left-width: 4px;
 }
-.tabs a[data-v-7c905747]:hover {
+.tabs a[data-v-cdbbd2a0]:hover,
+.hidebreadcrumbs-btn[data-v-cdbbd2a0]:hover {
 	background: var(--sc-btn-hover);
 }
-.tabs .router-link-active[data-v-7c905747] {
+.tabs .router-link-exact-active[data-v-cdbbd2a0] {
 	z-index: 3;
-	background: var(--sc-primary-color) !important;
-	border-color: var(--sc-primary-color) !important;
-	color: var(--sc-primary-text-color) !important;
+	background: var(--sc-gray-5);
+	color: var(--sc-gray-80);
 }
-
-/* Pseudo-elements removed - minimal ornamentation style */
-
-/* Hide breadcrumbs tab */
-.hidebreadcrumbs a[data-v-7c905747] {
+.hidebreadcrumbs-btn[data-v-cdbbd2a0] {
 	min-width: 2.4rem;
 	width: 2.4rem;
 	padding: 0.5rem;
-}
-.hidebreadcrumbs a div[data-v-7c905747] {
+	cursor: pointer;
 	font-size: 1.2rem;
+	line-height: 1;
 }
-.rotated[data-v-7c905747] {
+.rotated[data-v-cdbbd2a0] {
 	transform: rotate(45deg);
 	-webkit-transform: rotate(45deg);
 	-moz-transform: rotate(45deg);
@@ -392,7 +392,7 @@ footer[data-v-7c905747] {
 	-o-transform: rotate(45deg);
 	transition: transform 250ms ease;
 }
-.unrotated[data-v-7c905747] {
+.unrotated[data-v-cdbbd2a0] {
 	transform: rotate(0deg);
 	-webkit-transform: rotate(0deg);
 	-moz-transform: rotate(0deg);
@@ -400,90 +400,38 @@ footer[data-v-7c905747] {
 	-o-transform: rotate(0deg);
 	transition: transform 250ms ease;
 }
-li[data-v-7c905747]:active,
-li[data-v-7c905747]:hover,
-li[data-v-7c905747]:focus,
-li > a[data-v-7c905747]:active,
-li > a[data-v-7c905747]:hover,
-li > a[data-v-7c905747]:focus {
+li[data-v-cdbbd2a0]:active,
+li[data-v-cdbbd2a0]:hover,
+li[data-v-cdbbd2a0]:focus,
+li > a[data-v-cdbbd2a0]:active,
+li > a[data-v-cdbbd2a0]:hover,
+li > a[data-v-cdbbd2a0]:focus,
+.hidebreadcrumbs-btn[data-v-cdbbd2a0]:hover,
+.hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus {
 	z-index: 3;
 }
-a[data-v-7c905747]:active,
-a[data-v-7c905747]:hover,
-a[data-v-7c905747]:focus {
-	outline: 2px solid var(--sc-input-active-border-color);
+a[data-v-cdbbd2a0]:focus,
+.hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus {
+	outline: none;
+}
+a[data-v-cdbbd2a0]:focus-visible,
+.hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus-visible {
+	outline: 1px solid var(--sc-input-active-border-color);
+	outline-offset: -1px;
 	z-index: 3;
 }
-
-/* Home tab */
-.hometab a[data-v-7c905747] {
+.hometab a[data-v-cdbbd2a0] {
 	min-width: 2.4rem;
 	width: 2.4rem;
 	padding: 0.5rem;
 }
-
-/* SVG icon styling */
-.icon[data-v-7c905747] {
+.icon[data-v-cdbbd2a0] {
 	width: 1rem;
 	height: 1rem;
 	stroke: currentColor;
 	flex-shrink: 0;
 }
 
-/* Search tab with animation */
-.searchtab[data-v-7c905747] {
-	overflow: hidden;
-}
-.searchtab a[data-v-7c905747] {
-	min-width: 2.4rem;
-	padding: 0.5rem;
-	overflow: hidden;
-	/* Animation for smooth expand/collapse */
-	max-width: 2.4rem;
-	transition:
-		max-width 0.35s ease-in-out,
-		padding 0.35s ease-in-out,
-		background 0.2s ease;
-}
-.searchtab .search-icon[data-v-7c905747] {
-	cursor: pointer;
-}
-.searchtab input[data-v-7c905747] {
-	outline: none;
-	border: 1px solid var(--sc-input-border-color);
-	border-radius: 0.25rem;
-	background-color: var(--sc-form-background);
-	color: var(--sc-gray-80);
-	text-align: left;
-	font-size: 0.875rem;
-	padding: 0.25rem 0.5rem;
-	width: 180px;
-	height: 1.5rem;
-	flex-shrink: 0;
-	opacity: 0;
-	transition: opacity 0.2s ease-in-out;
-	transition-delay: 0s;
-}
-.searchtab input[data-v-7c905747]:focus {
-	border-color: var(--sc-input-active-border-color);
-	outline: none;
-}
-.searchtab input[data-v-7c905747]::placeholder {
-	color: var(--sc-input-label-color);
-}
-
-/* Search active state - expanded with animation */
-.searchtab.search-active a[data-v-7c905747] {
-	max-width: 200px;
-	min-width: auto;
-	width: auto;
-	padding: 0.5rem 0.75rem;
-}
-.searchtab.search-active input[data-v-7c905747] {
-	opacity: 1;
-	transition-delay: 0.15s;
-}
-
 .desktop[data-v-378bae6b] {
 	position: relative;
 	height: 100%;

package/dist/desktop.js

@@ -1,19 +1,29 @@
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, guardReactiveProps, h, inject, markRaw, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, provide, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, 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/CommandPalette.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$3 = { class: "command-palette-header" };
-var _hoisted_2$3 = ["placeholder"];
+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$3 = ["onClick", "onMouseover"];
+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
@@ -31,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");
@@ -80,6 +91,9 @@ 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$3, [withDirectives(createElementVNode("input", {
 					ref: "input",
@@ -87,12 +101,18 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 					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$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$3, [renderSlot(_ctx.$slots, "title", { result })]), createElementVNode("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "content", { result })])], 42, _hoisted_4$3);
@@ -422,8 +442,8 @@ var SHEET_NAV_TOOLBAR_SELECTOR = `#${SHEET_NAV_TOOLBAR_ID}`;
 var _hoisted_1$1 = { class: "sheetnav-footer-cluster" };
 var _hoisted_2$1 = ["id"];
 var _hoisted_3$1 = { class: "tabs" };
-var _hoisted_4$1 = { tabindex: "0" };
-var _hoisted_5$1 = { tabindex: "0" };
+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({
@@ -434,30 +454,12 @@ 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");
@@ -465,21 +467,26 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				id: unref(SHEET_NAV_TOOLBAR_ID),
 				class: "sheetnav-toolbar"
 			}, [renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)], 8, _hoisted_2$1), createElementVNode("ul", _hoisted_3$1, [
-				createElementVNode("li", {
-					class: "hidebreadcrumbs",
-					onClick: toggleBreadcrumbs,
-					onKeydown: withKeys(toggleBreadcrumbs, ["enter"])
-				}, [createElementVNode("a", _hoisted_4$1, [createElementVNode("div", { class: normalizeClass(rotateHideTabIcon.value) }, "×", 2)])], 32),
-				createElementVNode("li", {
+				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",
@@ -488,50 +495,20 @@ 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$1, [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");