@stonecrop/desktop 0.32.0 → 0.33.0

package/README.md

@@ -2,14 +2,14 @@
 
 A three-view UI shell for Stonecrop applications. Renders a doctype list → records list → record form layout driven by the host application's Registry and HST state.
 
-Desktop reads through Stonecrop — on navigating to a list or a record it calls `Stonecrop.getRecords` / `Stonecrop.getRecord`, which fetch through the host's registered `DataClient` and write into HST. Writes are the host's: Desktop emits `action` and the host dispatches it.
+Desktop reads through Stonecrop: on navigating to a list or a record it calls `Stonecrop.getRecords` / `Stonecrop.getRecord`, which fetch through the host's registered `DataClient` and write into HST. Writes are the host's: Desktop emits `action` and the host dispatches it.
 
 ## Features
 
 - **Three-view layout**: doctypes → records → record form, navigated by route or adapter
 - **ActionSet toolbar**: FSM transitions become action buttons/dropdowns automatically from the doctype workflow
 - **CommandPalette**: `Ctrl+K` / `Cmd+K` search across doctypes and records
-- **SheetNav**: tabbed navigation between open records
+- **SheetNav**: tabbed navigation between open records, with a toolbar for host controls in the footer (see [Slots](#slots))
 - **Event-driven**: all significant interactions emit typed events for the host to respond to
 
 ## Installation
@@ -28,7 +28,7 @@ import planDoctype from './doctypes/plan.json'
 
 const app = createApp(App)
 
-// The plugin constructs the Registry itself and provides it as `$registry` — it does not
+// The plugin constructs the Registry itself and provides it as `$registry`; it does not
 // accept one. Register doctypes on that instance, after install.
 app.use(Stonecrop, { router, client: new RestDataClient() })
 
@@ -38,8 +38,7 @@ registry.addDoctype(Doctype.fromObject(planDoctype))
 app.mount('#app')
 ```
 
-`client` is the `DataClient` Desktop reads through. It can also be supplied later with
-`stonecrop.setClient(client)` — Nuxt hosts do this from a plugin via `useStonecropSetup().registerClient`.
+`client` is the `DataClient` Desktop reads through. It can also be supplied later with `stonecrop.setClient(client)`; Nuxt hosts do this from a plugin via `useStonecropSetup().registerClient`.
 
 ## Basic Usage
 
@@ -50,7 +49,7 @@ import { useClientAction } from '@stonecrop/stonecrop'
 
 // Runs an action's clientHandler when the doctype declares one, dispatches to the server
 // otherwise, and reconciles the store and the route with the identity the server settled on.
-// In a Nuxt host this is auto-imported — drop the import line.
+// In a Nuxt host this is auto-imported, so drop the import line.
 const { run } = useClientAction()
 </script>
 
@@ -67,27 +66,47 @@ const { run } = useClientAction()
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `availableDoctypes` | `string[]` | `[]` | Doctype slugs to display in the doctypes list |
-| `routeAdapter` | `RouteAdapter` | — | Custom routing layer (required for Nuxt/custom hosts) |
+| `routeAdapter` | `RouteAdapter` | none | Custom routing layer (required for Nuxt/custom hosts) |
 
-Record identity is not a prop. It is declared per doctype (`primaryKey`, falling back to `id`) and
-resolved through `Doctype.getRecordId`, so a row's link always matches the key the record is stored
-under. One shell renders many doctypes, so a single prop could never answer this correctly.
+Record identity is not a prop. It is declared per doctype (`primaryKey`, falling back to `id`) and resolved through `Doctype.getRecordId`, so a row's link always matches the key the record is stored under. One shell renders many doctypes, so a single prop could never answer this correctly.
+
+## Slots
+
+| Slot | Renders |
+|------|---------|
+| `sheetnav-toolbar` | Host controls in the footer, immediately left of the navigation tabs |
+
+A control deeper in the page than this slot can reach, such as a custom field inside the record form, teleports into the same place:
+
+```vue
+<script setup lang="ts">
+import { SHEET_NAV_TOOLBAR_SELECTOR } from '@stonecrop/desktop'
+</script>
+
+<template>
+  <Teleport :to="SHEET_NAV_TOOLBAR_SELECTOR">
+    <MyToolbar />
+  </Teleport>
+</template>
+```
+
+Mount one SheetNav per page: with two, teleported content lands in the first and SheetNav logs a warning. When the toolbar and the tabs do not fit on one row, the toolbar moves to a row above the tabs. The Nuxt playground's country records (`/country/US`) carry a working example.
 
 ## Emitted Events
 
 | Event | When |
 |-------|------|
-| `action` | User triggers a declared action — an FSM transition or a Command |
+| `action` | User triggers a declared action: an FSM transition or a Command |
 | `navigate` | Desktop wants to change views |
 | `record:open` | User opens a specific record |
-| `load-records` | Desktop is about to read a records list (notification — Desktop performs the read) |
-| `load-record` | Desktop is about to read a single record (notification — Desktop performs the read) |
+| `load-records` | Desktop is about to read a records list (a notification: Desktop performs the read) |
+| `load-record` | Desktop is about to read a single record (a notification: Desktop performs the read) |
 
 See [api.md](./api.md) for payload type definitions.
 
 ### Event Handling Notes
 
-- **action**: Desktop merges `Doctype.getAvailableTransitions` and `Doctype.getAvailableCommands`, both resolved against `Stonecrop.getRecordState`, into one Actions dropdown. **Desktop never dispatches** — that is the host application's responsibility.
+- **action**: Desktop merges `Doctype.getAvailableTransitions` and `Doctype.getAvailableCommands`, both resolved against `Stonecrop.getRecordState`, into one Actions dropdown. **Desktop never dispatches**: that is the host application's responsibility.
 - **load-records / load-record**: notifications, not fetch requests. Desktop reads through `Stonecrop.getRecords` / `Stonecrop.getRecord` itself, using the registered `DataClient`; these events announce that read so a host can hang analytics off it. A host that fetches here races Desktop's own read into the same HST key. `load-record` is not emitted for a draft, which has nothing to fetch.
 
 ## Router Adapter
@@ -125,13 +144,9 @@ function useCustomRouteAdapter(): RouteAdapter {
 
 ## Handling `action` Events
 
-Dispatching is not the whole job: the result has to land in HST under the identity the *server*
-settled on, which for a newly created record is not the id that was dispatched.
+Dispatching is not the whole job: the result has to land in HST under the identity the *server* settled on, which for a newly created record is not the id that was dispatched.
 
-Bind `@action` to `useClientAction`'s `run`, as in Basic Usage above. It runs an action's
-`clientHandler` when it has one, dispatches otherwise, and reconciles the store and the route. It
-lives in `@stonecrop/stonecrop`, so every Vue 3 host gets the same one; Nuxt hosts also get it as an
-auto-import from `@stonecrop/nuxt`.
+Bind `@action` to `useClientAction`'s `run`, as in Basic Usage above. It runs an action's `clientHandler` when it has one, dispatches otherwise, and reconciles the store and the route. It lives in `@stonecrop/stonecrop`, so every Vue 3 host gets the same one; Nuxt hosts also get it as an auto-import from `@stonecrop/nuxt`.
 
 Three things are adjustable, for the cases that genuinely differ between applications:
 
@@ -141,18 +156,11 @@ Three things are adjustable, for the cases that genuinely differ between applica
 | `followRecord` | `router.replace('/{doctype}/{id}')` | a locale prefix, a nested route, or staying put |
 | `onError` | a blocking `window.alert` | your own notification system |
 
-`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.
+`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 — 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 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.
 
-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.
+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.
 
 See the [host integration guide](../nuxt/documentation/content/guides/desktop-integration.md) for the full wiring.
 
@@ -169,4 +177,4 @@ const { navigateToDoctype, openRecord, createNewRecord, emitAction } =
 
 `emitAction(name, data?)` is a convenience wrapper for emitting an `action` event from deeply nested slot content without passing refs down manually.
 
-Desktop blesses no action name. It used to expose a `handleDelete` method and a `confirmFn` prop, which together emitted a hardcoded `DELETE` action and prompted before it — but no doctype declares `DELETE`, so it failed on every click, and only the host knows which of its actions are destructive. Removal is a workflow outcome: declare an action with a `nextState` such as `Archived` or `CANCELLED`, and confirm inside your own `@action` handler before dispatching.
+Desktop blesses no action name. It used to expose a `handleDelete` method and a `confirmFn` prop, which together emitted a hardcoded `DELETE` action and prompted before it; but no doctype declares `DELETE`, so it failed on every click, and only the host knows which of its actions are destructive. Removal is a workflow outcome: declare an action with a `nextState` such as `Archived` or `CANCELLED`, and confirm inside your own `@action` handler before dispatching.

package/dist/assets/index.css

@@ -210,40 +210,68 @@ button.dropdown-item[data-v-8e18f635]:hover {
 	color: #666;
 }
 
-footer[data-v-cd118b06] {
+/* 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] {
 	position: fixed;
-	bottom: 0px;
-	width: 100%;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
 	background-color: transparent;
-	height: auto;
-	min-height: 2.4rem;
 	z-index: 100;
 	text-align: left;
 	font-size: 100%;
 	display: flex;
-	justify-content: right;
+	justify-content: flex-end;
+	align-items: flex-end;
 	padding: 0 0.75rem 0 0;
 	box-sizing: border-box;
 }
-ul[data-v-cd118b06] {
+
+/* 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] {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: flex-end;
+	column-gap: 0.5rem;
+	max-width: 100%;
+	min-width: 0;
+}
+.sheetnav-toolbar[data-v-7c905747] {
+	pointer-events: auto;
+	min-width: 0;
+	min-height: 2.4rem;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: center;
+}
+.tabs[data-v-7c905747] {
+	pointer-events: auto;
+	flex: 0 0 auto;
 	display: flex;
 	flex-direction: row-reverse;
+	align-items: stretch;
+	height: 2.4rem;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
-.tabs li[data-v-cd118b06] {
-	float: left;
+.tabs li[data-v-7c905747] {
+	display: flex;
+	align-items: stretch;
 	list-style-type: none;
 	position: relative;
 	margin-left: -1px;
 }
 
 /* Base tab styling */
-.tabs a[data-v-cd118b06] {
-	float: left;
-	padding: 0.5rem 1rem;
-	height: 2.4rem;
+.tabs a[data-v-7c905747] {
+	height: 100%;
+	min-height: 2.4rem;
+	padding: 0 1rem;
 	box-sizing: border-box;
 	display: flex;
 	align-items: center;
@@ -260,10 +288,10 @@ ul[data-v-cd118b06] {
 	border-top-left-radius: 2px;
 	border-top-right-radius: 2px;
 }
-.tabs a[data-v-cd118b06]:hover {
+.tabs a[data-v-7c905747]:hover {
 	background: var(--sc-btn-hover);
 }
-.tabs .router-link-active[data-v-cd118b06] {
+.tabs .router-link-active[data-v-7c905747] {
 	z-index: 3;
 	background: var(--sc-primary-color) !important;
 	border-color: var(--sc-primary-color) !important;
@@ -273,19 +301,15 @@ ul[data-v-cd118b06] {
 /* Pseudo-elements removed - minimal ornamentation style */
 
 /* Hide breadcrumbs tab */
-.hidebreadcrumbs a[data-v-cd118b06] {
+.hidebreadcrumbs a[data-v-7c905747] {
 	min-width: 2.4rem;
 	width: 2.4rem;
-	height: 2.4rem;
 	padding: 0.5rem;
-	background: var(--sc-btn-color);
-	border: 1px solid var(--sc-btn-border);
-	color: var(--sc-gray-60);
 }
-.hidebreadcrumbs a div[data-v-cd118b06] {
+.hidebreadcrumbs a div[data-v-7c905747] {
 	font-size: 1.2rem;
 }
-.rotated[data-v-cd118b06] {
+.rotated[data-v-7c905747] {
 	transform: rotate(45deg);
 	-webkit-transform: rotate(45deg);
 	-moz-transform: rotate(45deg);
@@ -293,7 +317,7 @@ ul[data-v-cd118b06] {
 	-o-transform: rotate(45deg);
 	transition: transform 250ms ease;
 }
-.unrotated[data-v-cd118b06] {
+.unrotated[data-v-7c905747] {
 	transform: rotate(0deg);
 	-webkit-transform: rotate(0deg);
 	-moz-transform: rotate(0deg);
@@ -301,34 +325,30 @@ ul[data-v-cd118b06] {
 	-o-transform: rotate(0deg);
 	transition: transform 250ms ease;
 }
-li[data-v-cd118b06]:active,
-li[data-v-cd118b06]:hover,
-li[data-v-cd118b06]:focus,
-li > a[data-v-cd118b06]:active,
-li > a[data-v-cd118b06]:hover,
-li > a[data-v-cd118b06]:focus {
+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 {
 	z-index: 3;
 }
-a[data-v-cd118b06]:active,
-a[data-v-cd118b06]:hover,
-a[data-v-cd118b06]:focus {
+a[data-v-7c905747]:active,
+a[data-v-7c905747]:hover,
+a[data-v-7c905747]:focus {
 	outline: 2px solid var(--sc-input-active-border-color);
 	z-index: 3;
 }
 
 /* Home tab */
-.hometab a[data-v-cd118b06] {
+.hometab a[data-v-7c905747] {
 	min-width: 2.4rem;
 	width: 2.4rem;
-	height: 2.4rem;
 	padding: 0.5rem;
-	background: var(--sc-btn-color);
-	border: 1px solid var(--sc-btn-border);
-	color: var(--sc-gray-60);
 }
 
 /* SVG icon styling */
-.icon[data-v-cd118b06] {
+.icon[data-v-7c905747] {
 	width: 1rem;
 	height: 1rem;
 	stroke: currentColor;
@@ -336,16 +356,12 @@ a[data-v-cd118b06]:focus {
 }
 
 /* Search tab with animation */
-.searchtab[data-v-cd118b06] {
+.searchtab[data-v-7c905747] {
 	overflow: hidden;
 }
-.searchtab a[data-v-cd118b06] {
+.searchtab a[data-v-7c905747] {
 	min-width: 2.4rem;
-	height: 2.4rem;
 	padding: 0.5rem;
-	background: var(--sc-btn-color);
-	border: 1px solid var(--sc-btn-border);
-	color: var(--sc-gray-60);
 	overflow: hidden;
 	/* Animation for smooth expand/collapse */
 	max-width: 2.4rem;
@@ -354,10 +370,10 @@ a[data-v-cd118b06]:focus {
 		padding 0.35s ease-in-out,
 		background 0.2s ease;
 }
-.searchtab .search-icon[data-v-cd118b06] {
+.searchtab .search-icon[data-v-7c905747] {
 	cursor: pointer;
 }
-.searchtab input[data-v-cd118b06] {
+.searchtab input[data-v-7c905747] {
 	outline: none;
 	border: 1px solid var(--sc-input-border-color);
 	border-radius: 0.25rem;
@@ -373,22 +389,22 @@ a[data-v-cd118b06]:focus {
 	transition: opacity 0.2s ease-in-out;
 	transition-delay: 0s;
 }
-.searchtab input[data-v-cd118b06]:focus {
+.searchtab input[data-v-7c905747]:focus {
 	border-color: var(--sc-input-active-border-color);
 	outline: none;
 }
-.searchtab input[data-v-cd118b06]::placeholder {
+.searchtab input[data-v-7c905747]::placeholder {
 	color: var(--sc-input-label-color);
 }
 
 /* Search active state - expanded with animation */
-.searchtab.search-active a[data-v-cd118b06] {
+.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-cd118b06] {
+.searchtab.search-active input[data-v-7c905747] {
 	opacity: 1;
 	transition-delay: 0.15s;
 }

package/dist/desktop.js

@@ -5,8 +5,8 @@ import './assets/index.css';//#region src/components/ActionSet.vue?vue&type=scri
 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$1 = { key: 0 };
-var _hoisted_5$1 = { class: "dropdown-header" };
+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" };
@@ -61,7 +61,7 @@ var ActionSet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						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$1, [createElementVNode("div", _hoisted_5$1, [createElementVNode("div", {
+					}, 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", {
@@ -100,8 +100,8 @@ var _hoisted_3$1 = {
 	key: 0,
 	class: "command-palette-results"
 };
-var _hoisted_4 = ["onClick", "onMouseover"];
-var _hoisted_5 = { class: "result-title" };
+var _hoisted_4$1 = ["onClick", "onMouseover"];
+var _hoisted_5$1 = { class: "result-title" };
 var _hoisted_6 = { class: "result-content" };
 var _hoisted_7 = {
 	key: 1,
@@ -187,7 +187,7 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 						class: normalizeClass(["command-palette-result", { selected: index === selectedIndex.value }]),
 						onClick: ($event) => selectResult(result),
 						onMouseover: ($event) => selectedIndex.value = index
-					}, [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "title", { result })]), createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "content", { result })])], 42, _hoisted_4);
+					}, [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)]),
 				_: 3
 			})]);
@@ -195,16 +195,27 @@ var CommandPalette_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#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">`. */
+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: "tabs" };
-var _hoisted_2$1 = { tabindex: "0" };
-var _hoisted_3 = { tabindex: "0" };
+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" };
 //#endregion
 //#region src/components/SheetNav.vue
 var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "SheetNav",
 	props: { breadcrumbs: { default: () => [] } },
 	setup(__props) {
+		onMounted(() => {
+			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("");
@@ -233,15 +244,18 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const navigateHome = () => {};
 		return (_ctx, _cache) => {
 			const _component_router_link = resolveComponent("router-link");
-			return openBlock(), createElementBlock("footer", null, [createElementVNode("ul", _hoisted_1$1, [
+			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_2$1, [createElementVNode("div", { class: normalizeClass(rotateHideTabIcon.value) }, "×", 2)])], 32),
+				}, [createElementVNode("a", _hoisted_4, [createElementVNode("div", { class: normalizeClass(rotateHideTabIcon.value) }, "×", 2)])], 32),
 				createElementVNode("li", {
 					class: "hometab",
-					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "block" : "none" }),
+					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" }),
 					onClick: navigateHome,
 					onKeydown: withKeys(navigateHome, ["enter"])
 				}, [createVNode(_component_router_link, {
@@ -260,8 +274,8 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				})], 36),
 				createElementVNode("li", {
 					class: normalizeClass(["searchtab", { "search-active": searchVisible.value }]),
-					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "block" : "none" })
-				}, [createElementVNode("a", _hoisted_3, [withDirectives((openBlock(), createElementBlock("svg", {
+					style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" })
+				}, [createElementVNode("a", _hoisted_5, [withDirectives((openBlock(), createElementBlock("svg", {
 					class: "icon search-icon",
 					role: "button",
 					"aria-label": "Search",
@@ -288,7 +302,7 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				(openBlock(true), createElementBlock(Fragment, null, renderList(__props.breadcrumbs, (breadcrumb) => {
 					return openBlock(), createElementBlock("li", {
 						key: breadcrumb.title,
-						style: normalizeStyle({ display: breadcrumbsVisibile.value ? "block" : "none" })
+						style: normalizeStyle({ display: breadcrumbsVisibile.value ? "flex" : "none" })
 					}, [createVNode(_component_router_link, {
 						tabindex: "0",
 						to: breadcrumb.to
@@ -297,10 +311,10 @@ var SheetNav_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 						_: 2
 					}, 1032, ["to"])], 4);
 				}), 128))
-			])]);
+			])])]);
 		};
 	}
-}), [["__scopeId", "data-v-cd118b06"]]);
+}), [["__scopeId", "data-v-7c905747"]]);
 //#endregion
 //#region src/components/Desktop.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
@@ -901,7 +915,10 @@ var Desktop_default = /* @__PURE__ */ defineComponent({
 					"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 }, null, 8, ["breadcrumbs"]),
+				createVNode(SheetNav_default, { breadcrumbs: navigationBreadcrumbs.value }, {
+					toolbar: withCtx(() => [renderSlot(_ctx.$slots, "sheetnav-toolbar")]),
+					_: 3
+				}, 8, ["breadcrumbs"]),
 				createVNode(CommandPalette_default, {
 					"is-open": commandPaletteOpen.value,
 					search: searchCommands,
@@ -930,6 +947,6 @@ var plugin = { install: (app) => {
 	app.component("SheetNav", SheetNav_default);
 } };
 //#endregion
-export { ActionSet_default as ActionSet, CommandPalette_default as CommandPalette, Desktop_default as Desktop, SheetNav_default as SheetNav, plugin as StonecropDesktop };
+export { ActionSet_default as ActionSet, CommandPalette_default as CommandPalette, Desktop_default as Desktop, SHEET_NAV_TOOLBAR_SELECTOR, SheetNav_default as SheetNav, plugin as StonecropDesktop };
 
 //# sourceMappingURL=desktop.js.map