@stonecrop/desktop 0.32.0 → 0.34.0

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,40 +89,264 @@ button.dropdown-item[data-v-8e18f635]:hover {
 	color: #666;
 }
 
-footer[data-v-cd118b06] {
+.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;
-	bottom: 0px;
+	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] {
+	position: fixed;
+	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 +363,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 +376,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 +392,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 +400,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 +431,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 +445,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 +464,100 @@ 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;
 }
+
+.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);
+}