@stonecrop/desktop 0.33.0 → 0.34.0

package/README.md

@@ -7,7 +7,7 @@ Desktop reads through Stonecrop: on navigating to a list or a record it calls `S
 ## 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
+- **ActionSet tile column**: expandable tile UI with Search, host slots, and an Actions drawer; FSM transitions populate the actions list automatically from the doctype workflow
 - **CommandPalette**: `Ctrl+K` / `Cmd+K` search across doctypes and 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
@@ -67,6 +67,8 @@ const { run } = useClientAction()
 |------|------|---------|-------------|
 | `availableDoctypes` | `string[]` | `[]` | Doctype slugs to display in the doctypes list |
 | `routeAdapter` | `RouteAdapter` | none | Custom routing layer (required for Nuxt/custom hosts) |
+| `actionSetSlots` | `ActionSetSlot[]` | `[]` | Host drawer slots shown as tiles in ActionSet |
+| `hostActions` | `ActionElements[]` | none | Actions listed in the Actions drawer in place of those derived from the doctype; `[]` lists none |
 
 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.
 
@@ -106,7 +108,7 @@ 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 the ActionSet Actions drawer. **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

package/dist/assets/index.css

@@ -1,125 +1,4 @@
 
-#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;
@@ -210,6 +89,202 @@ button.dropdown-item[data-v-8e18f635]:hover {
 	color: #666;
 }
 
+.action-set[data-v-40295597] {
+	/* Right offset + tile column width + gap: the strip the drawer keeps clear for the tile column. */
+	--action-set-rail-inset: calc(10px + 2.75rem + 18px + 8px);
+	position: fixed;
+	top: var(--sc-action-set-offset-top);
+	right: 10px;
+	z-index: 1001;
+	display: flex;
+	flex-direction: row-reverse;
+	align-items: flex-start;
+	gap: 0;
+}
+
+/* Positioned above the drawer, which is a later sibling in the same stacking context. */
+.action-set__tile[data-v-40295597] {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 8px;
+	background: var(--sc-form-background);
+	border: 1px solid var(--sc-gray-20);
+}
+.action-set__toggle[data-v-40295597] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.75rem;
+	height: 2.75rem;
+	padding: 0;
+	border: none;
+	background: transparent;
+	font-size: 1.5rem;
+	font-weight: 300;
+	line-height: 1;
+	color: var(--sc-gray-60);
+	cursor: pointer;
+	transition: transform 0.2s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+.action-set__toggle[data-v-40295597] {
+		transition: none;
+}
+}
+.action-set__toggle--expanded[data-v-40295597] {
+	transform: rotate(45deg);
+}
+.action-set__toggle[data-v-40295597]:focus-visible,
+.action-set__item[data-v-40295597]:focus-visible,
+.action-set__drawer-close[data-v-40295597]:focus-visible,
+.action-set__actions-list-item[data-v-40295597]:focus-visible {
+	outline: 2px solid var(--sc-primary-color);
+	outline-offset: 2px;
+}
+.action-set__item[data-v-40295597] {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 2.75rem;
+	height: 2.75rem;
+	margin-top: 8px;
+	padding: 0;
+	border: 1px solid var(--sc-gray-20);
+	background: transparent;
+	cursor: pointer;
+	font-family: var(--sc-font-family);
+	color: var(--sc-gray-80);
+}
+.action-set__item[data-v-40295597]:hover,
+.action-set__item--active[data-v-40295597] {
+	background: var(--sc-btn-hover);
+}
+.action-set__item-icon[data-v-40295597] {
+	display: block;
+	width: 1rem;
+	height: 1rem;
+	flex-shrink: 0;
+}
+.action-set__item-fallback[data-v-40295597] {
+	font-size: 0.85rem;
+	font-weight: 600;
+	line-height: 1;
+}
+.action-set__item-badge[data-v-40295597] {
+	position: absolute;
+	top: 2px;
+	right: 2px;
+	min-width: 14px;
+	height: 14px;
+	padding: 0 3px;
+	border-radius: 7px;
+	background: var(--sc-badge-danger-accent);
+	color: var(--sc-primary-text-color);
+	font-size: 10px;
+	font-weight: 600;
+	line-height: 14px;
+	text-align: center;
+	pointer-events: none;
+}
+.action-set__drawer[data-v-40295597] {
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	box-sizing: border-box;
+	width: var(--sc-action-set-drawer-width);
+	padding-right: var(--action-set-rail-inset);
+	background: var(--sc-form-background);
+	border-left: 1px solid var(--sc-gray-20);
+	display: flex;
+	flex-direction: column;
+	z-index: 0;
+}
+.action-set__drawer-header[data-v-40295597] {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	padding: 8px 12px;
+	flex-shrink: 0;
+}
+.action-set__drawer-close[data-v-40295597] {
+	flex-shrink: 0;
+	border: none;
+	background: transparent;
+	font-size: 1.25rem;
+	line-height: 1;
+	cursor: pointer;
+	color: var(--sc-gray-60);
+	padding: 0.5rem;
+	min-width: 2.75rem;
+	min-height: 2.75rem;
+}
+.action-set__drawer-body[data-v-40295597] {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+.action-set__drawer-empty[data-v-40295597] {
+	padding: 16px 12px;
+	margin: 0;
+	color: var(--sc-gray-60);
+	font-style: italic;
+}
+.action-set__actions-list[data-v-40295597] {
+	padding: 8px;
+}
+.action-set__actions-list-item[data-v-40295597] {
+	display: block;
+	box-sizing: border-box;
+	width: 100%;
+	padding: 10px 12px;
+	margin-bottom: 4px;
+	border: 1px solid var(--sc-gray-20);
+	background: transparent;
+	text-align: left;
+	font-size: 0.9rem;
+	font-family: var(--sc-font-family);
+	font-weight: 500;
+	color: var(--sc-gray-80);
+	text-decoration: none;
+	cursor: pointer;
+}
+.action-set__actions-list-item[data-v-40295597]:hover {
+	background: var(--sc-btn-hover);
+}
+.action-set__actions-list-item[data-v-40295597]:disabled {
+	opacity: 0.5;
+	cursor: not-allowed;
+}
+.action-set__actions-list-item--nested[data-v-40295597] {
+	margin-left: 0;
+	width: 100%;
+	font-weight: 400;
+}
+.action-set__actions-group[data-v-40295597] {
+	margin-bottom: 8px;
+}
+.action-set__actions-group-label[data-v-40295597] {
+	margin: 4px 0 6px;
+	padding: 0 2px;
+	font-family: var(--sc-font-family);
+	font-size: 0.75rem;
+	font-weight: 600;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	color: var(--sc-gray-60);
+}
+.action-set__actions-empty[data-v-40295597] {
+	padding: 16px 12px;
+	margin: 0;
+	color: var(--sc-gray-60);
+	font-style: italic;
+}
+
 /* 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] {
@@ -408,3 +483,81 @@ a[data-v-7c905747]:focus {
 	opacity: 1;
 	transition-delay: 0.15s;
 }
+
+.desktop[data-v-378bae6b] {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	min-height: 0;
+	overflow: hidden;
+}
+.desktop__workspace[data-v-378bae6b] {
+	display: flex;
+	flex: 1;
+	min-height: 0;
+	min-width: 0;
+	margin-right: 0;
+	transition: margin-right 0.25s ease-out;
+}
+.desktop--action-set-open .desktop__workspace[data-v-378bae6b] {
+	margin-right: var(--sc-action-set-drawer-width);
+}
+
+/* SheetNav is fixed to the viewport, so the workspace margin does not move it clear of the drawer. */
+.desktop__sheetnav[data-v-378bae6b] {
+	transition: right 0.25s ease-out;
+}
+.desktop--action-set-open .desktop__sheetnav[data-v-378bae6b] {
+	right: var(--sc-action-set-drawer-width);
+}
+.desktop__main[data-v-378bae6b] {
+	flex: 1;
+	min-width: 0;
+	min-height: 0;
+	overflow: auto;
+}
+.desktop--preview-open .desktop__main[data-v-378bae6b] {
+	flex: 0 0 calc(50% - 10px);
+	max-width: calc(50% - 10px);
+}
+.desktop__preview[data-v-378bae6b] {
+	flex: 0 0 50%;
+	max-width: 50%;
+	min-width: 0;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+	border-left: 1px solid var(--sc-gray-20);
+	background: var(--sc-form-background);
+	overflow: hidden;
+}
+.desktop__preview-header[data-v-378bae6b] {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+	height: 40px;
+	padding: 0 8px;
+	border-bottom: 1px solid var(--sc-gray-20);
+	flex-shrink: 0;
+}
+.desktop__preview-close[data-v-378bae6b] {
+	border: none;
+	background: transparent;
+	font-size: 1.25rem;
+	line-height: 1;
+	cursor: pointer;
+	color: var(--sc-gray-60);
+}
+.desktop__preview-body[data-v-378bae6b] {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+}
+.loading[data-v-378bae6b] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 50vh;
+	color: var(--sc-gray-60);
+}