@stonecrop/desktop 0.31.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

@@ -0,0 +1,410 @@
+
+#cross[data-v-8e18f635] {
+	position: relative;
+	transform: rotate(45deg);
+	cursor: pointer;
+	transition: all 0.2s ease-in-out;
+	user-select: none;
+	line-height: 1rem;
+}
+#cross.rotated[data-v-8e18f635],
+.cross.rotated[data-v-8e18f635] {
+	transform: rotate(0deg);
+}
+#cross svg[data-v-8e18f635] {
+	width: 1.5em;
+	height: 1.5em;
+}
+.action-set[data-v-8e18f635] {
+	position: fixed;
+	top: 300px;
+	right: 10px;
+	padding: 10px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	background: var(--sc-form-background);
+	border: 1px solid var(--sc-gray-20);
+	border-left: 4px solid var(--sc-gray-20);
+	border-radius: 0;
+	overflow: hidden;
+	z-index: 1001; /* Above SheetNav (100) and operation log button (999) */
+	-webkit-transition: all 0.5s ease-in-out;
+	-moz-transition: all 0.5s ease-in-out;
+	-o-transition: all 0.5s ease-in-out;
+	transition: all 0.5s ease-in-out;
+}
+.action-menu-icon[data-v-8e18f635] {
+	position: relative;
+	font-size: 2rem;
+	display: inline-block;
+	color: var(--sc-gray-60);
+	transition: all 0.2s ease-in-out;
+}
+.action-set.collapsed[data-v-8e18f635] {
+	max-width: 46px;
+	max-height: 40px;
+	overflow: hidden;
+}
+.action-set.collapsed .action-element[data-v-8e18f635] {
+	opacity: 0;
+	-webkit-transition: opacity 0.25s ease-in-out;
+	-moz-transition: opacity 0.25s ease-in-out;
+	-o-transition: opacity 0.25s ease-in-out;
+	transition: opacity 0.25s ease-in-out;
+}
+.action-element[data-v-8e18f635] {
+	width: 100%;
+	text-align: right;
+	border: 1px solid var(--sc-gray-20);
+	background: none;
+	font-size: 1.5rem;
+	font-family: var(--sc-font-family);
+	font-weight: 600;
+	margin-top: 10px;
+	position: relative; /* Make this the positioning context for absolute children */
+}
+.action-element-header[data-v-8e18f635] {
+	display: flex;
+	justify-content: end;
+}
+button.button-default[data-v-8e18f635] {
+	background-color: transparent;
+	padding: 5px 12px;
+	border-radius: 0px;
+	box-shadow: none;
+	border: none;
+	cursor: pointer;
+	white-space: nowrap;
+	font-weight: bold;
+	font-size: 1rem;
+	text-align: right;
+	color: var(--sc-gray-80);
+	padding-left: 50px;
+	font-family: var(--sc-font-family);
+}
+.dropdown-header:hover button.button-default[data-v-8e18f635],
+.dropdown-header[data-v-8e18f635]:hover,
+.action-element-header[data-v-8e18f635]:hover {
+	background-color: #f2f2f2;
+}
+.dropdown-title[data-v-8e18f635] {
+	position: relative;
+}
+.dropdown-header[data-v-8e18f635] {
+	display: flex;
+	align-items: center;
+}
+.cross[data-v-8e18f635] {
+	pointer-events: all;
+	margin-left: 5px;
+	font-family: var(--sc-font-family);
+	color: var(--sc-gray-60);
+	cursor: pointer;
+	transform: rotate(45deg);
+	user-select: none;
+	transition: all 0.2s ease-in-out;
+	line-height: 1rem;
+}
+button.dropdown-item[data-v-8e18f635] {
+	width: 100%;
+	padding: 5px 12px;
+	text-align: right;
+	border: none;
+	background-color: #ffffff;
+	cursor: pointer;
+	border-radius: 5px;
+	font-size: 1rem;
+}
+button.dropdown-item[data-v-8e18f635]:hover {
+	background-color: #f2f2f2;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+.command-palette-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.5);
+	display: flex;
+	align-items: flex-start;
+	justify-content: center;
+	z-index: 300;
+	padding-top: 100px;
+}
+.command-palette {
+	width: 600px;
+	max-width: 90%;
+	background-color: white;
+	border-radius: 8px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+	overflow: hidden;
+	max-height: 80vh;
+	display: flex;
+	flex-direction: column;
+}
+.command-palette-header {
+	display: flex;
+	border-bottom: 1px solid #eaeaea;
+	padding: 12px;
+}
+.command-palette-input {
+	flex: 1;
+	border: none;
+	outline: none;
+	font-size: 16px;
+	padding: 8px 12px;
+	background-color: transparent;
+}
+.command-palette-close {
+	background: transparent;
+	border: none;
+	font-size: 24px;
+	cursor: pointer;
+	color: #666;
+	padding: 0 8px;
+}
+.command-palette-close:hover {
+	color: #333;
+}
+.command-palette-results {
+	overflow-y: auto;
+	max-height: 60vh;
+}
+.command-palette-result {
+	padding: 12px 16px;
+	cursor: pointer;
+	border-bottom: 1px solid #f0f0f0;
+}
+.command-palette-result:hover,
+.command-palette-result.selected {
+	background-color: #f5f5f5;
+}
+.command-palette-result.selected {
+	background-color: rgba(132, 60, 3, 0.1);
+}
+.result-title {
+	font-weight: 500;
+	margin-bottom: 4px;
+	color: #333;
+}
+.result-content {
+	font-size: 14px;
+	color: #666;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.command-palette-no-results {
+	padding: 20px 16px;
+	text-align: center;
+	color: #666;
+}
+
+/* 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;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	pointer-events: none;
+	background-color: transparent;
+	z-index: 100;
+	text-align: left;
+	font-size: 100%;
+	display: flex;
+	justify-content: flex-end;
+	align-items: flex-end;
+	padding: 0 0.75rem 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] {
+	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-7c905747] {
+	display: flex;
+	align-items: stretch;
+	list-style-type: none;
+	position: relative;
+	margin-left: -1px;
+}
+
+/* Base tab styling */
+.tabs a[data-v-7c905747] {
+	height: 100%;
+	min-height: 2.4rem;
+	padding: 0 1rem;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-decoration: none;
+	color: var(--sc-gray-60);
+	background: var(--sc-btn-color);
+	border: 1px solid var(--sc-btn-border);
+	font-size: 0.85rem;
+	font-family: var(--sc-font-family);
+	transition: all 0.15s ease;
+
+	/* Minimal ornamentation - subtle top radius only */
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+}
+.tabs a[data-v-7c905747]:hover {
+	background: var(--sc-btn-hover);
+}
+.tabs .router-link-active[data-v-7c905747] {
+	z-index: 3;
+	background: var(--sc-primary-color) !important;
+	border-color: var(--sc-primary-color) !important;
+	color: var(--sc-primary-text-color) !important;
+}
+
+/* Pseudo-elements removed - minimal ornamentation style */
+
+/* Hide breadcrumbs tab */
+.hidebreadcrumbs a[data-v-7c905747] {
+	min-width: 2.4rem;
+	width: 2.4rem;
+	padding: 0.5rem;
+}
+.hidebreadcrumbs a div[data-v-7c905747] {
+	font-size: 1.2rem;
+}
+.rotated[data-v-7c905747] {
+	transform: rotate(45deg);
+	-webkit-transform: rotate(45deg);
+	-moz-transform: rotate(45deg);
+	-ms-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+	transition: transform 250ms ease;
+}
+.unrotated[data-v-7c905747] {
+	transform: rotate(0deg);
+	-webkit-transform: rotate(0deg);
+	-moz-transform: rotate(0deg);
+	-ms-transform: rotate(0deg);
+	-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 {
+	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);
+	z-index: 3;
+}
+
+/* Home tab */
+.hometab a[data-v-7c905747] {
+	min-width: 2.4rem;
+	width: 2.4rem;
+	padding: 0.5rem;
+}
+
+/* SVG icon styling */
+.icon[data-v-7c905747] {
+	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;
+}