@stonecrop/desktop 0.31.0 → 0.32.0

package/dist/src/components/Desktop.vue.d.ts

@@ -0,0 +1,26 @@
+import type { RouteAdapter, NavigationTarget, ActionEventPayload, RecordOpenEventPayload, LoadRecordsEventPayload, LoadRecordEventPayload } from '../types';
+type __VLS_Props = {
+    availableDoctypes?: string[];
+    /**
+     * Pluggable router adapter. When provided, Desktop uses these functions for all
+     * routing instead of reaching into the registry's internal Vue Router instance.
+     * Nuxt hosts (or any host with custom route conventions) should supply this.
+     */
+    routeAdapter?: RouteAdapter;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (payload: ActionEventPayload) => any;
+    navigate: (target: NavigationTarget) => any;
+    "record:open": (payload: RecordOpenEventPayload) => any;
+    "load-records": (payload: LoadRecordsEventPayload) => any;
+    "load-record": (payload: LoadRecordEventPayload) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onAction?: ((payload: ActionEventPayload) => any) | undefined;
+    onNavigate?: ((target: NavigationTarget) => any) | undefined;
+    "onRecord:open"?: ((payload: RecordOpenEventPayload) => any) | undefined;
+    "onLoad-records"?: ((payload: LoadRecordsEventPayload) => any) | undefined;
+    "onLoad-record"?: ((payload: LoadRecordEventPayload) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=Desktop.vue.d.ts.map

package/dist/src/components/Desktop.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Desktop.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Desktop.vue"],"names":[],"mappings":"AA0+BA,OAAO,KAAK,EAEX,YAAY,EACZ,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,sBAAsB,EACtB,MAAM,UAAU,CAAA;AAEjB,KAAK,WAAW,GAAG;IAClB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;CAC3B,CAAC;AAqiCF,QAAA,MAAM,YAAY;;;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/components/SheetNav.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_Props = {
+    breadcrumbs?: {
+        title: string;
+        to: string;
+    }[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=SheetNav.vue.d.ts.map

package/dist/src/components/SheetNav.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetNav.vue.d.ts","sourceRoot":"","sources":["../../../src/components/SheetNav.vue"],"names":[],"mappings":"AA8SA,KAAK,WAAW,GAAG;IAAE,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,CAAC;AAqOrE,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/{tsdoc-metadata.json → src/tsdoc-metadata.json}

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.58.11"
+      "packageVersion": "7.59.0"
     }
   ]
 }

package/package.json

@@ -1,47 +1,56 @@
 {
   "name": "@stonecrop/desktop",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Desktop-specific components for Stonecrop UI",
+  "keywords": [
+    "components",
+    "desktop",
+    "shell",
+    "stonecrop",
+    "vue"
+  ],
+  "homepage": "https://github.com/agritheory/stonecrop#readme",
   "bugs": {
     "url": "https://github.com/agritheory/stonecrop/issues"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/agritheory/stonecrop",
-    "directory": "desktop"
-  },
   "license": "MIT",
   "author": {
     "name": "Tyler Matteson",
     "email": "tyler@agritheory.com"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agritheory/stonecrop",
+    "directory": "desktop"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
   "sideEffects": [
     "**/*.css"
   ],
-  "type": "module",
+  "types": "./dist/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/desktop.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/desktop.js"
     },
-    "./styles": "./dist/desktop.css",
-    "./types": "./dist/src/types/index.d.ts"
+    "./styles": "./dist/assets/index.css",
+    "./types": "./dist/src/types/index.d.ts",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
   },
-  "types": "./dist/desktop.d.ts",
-  "files": [
-    "dist/*",
-    "src/*"
-  ],
   "dependencies": {
-    "@stonecrop/aform": "0.31.0",
-    "@stonecrop/atable": "0.31.0",
-    "@stonecrop/schema": "0.31.0",
-    "@stonecrop/stonecrop": "0.31.0",
-    "@stonecrop/themes": "0.31.0"
+    "@stonecrop/schema": "0.32.0",
+    "@stonecrop/aform": "0.32.0",
+    "@stonecrop/themes": "0.32.0",
+    "@stonecrop/stonecrop": "0.32.0"
   },
   "devDependencies": {
-    "@microsoft/api-documenter": "^7.30.5",
-    "@rushstack/heft": "^1.2.17",
+    "@microsoft/api-extractor": "^7.58.7",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vitest/coverage-istanbul": "^4.1.5",
     "@vue/test-utils": "^2.4.10",
@@ -51,12 +60,13 @@
     "oxlint-tsgolint": "0.23.0",
     "pinia": "^3.0.4",
     "typescript": "^6.0.3",
-    "vite": "^7.3.2",
+    "vite": "^8.2.2",
+    "vite-plugin-lib-inject-css": "^2.2.2",
     "vitest": "^4.1.5",
     "vue": "^3.5.33",
+    "vue-component-meta": "^3.3.11",
     "vue-router": "^5.0.6",
-    "vue-tsc": "^3.3.6",
-    "stonecrop-rig": "0.7.0"
+    "vue-tsc": "^3.3.6"
   },
   "peerDependencies": {
     "pinia": "^3.0.4",
@@ -65,13 +75,9 @@
   "engines": {
     "node": ">=24.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "_phase:build": "heft build --clean && vite build && rushx docs",
-    "build": "heft build --clean && vite build && rushx docs",
-    "docs": "bash ../common/scripts/run-docs.sh desktop",
+    "dev": "vite build --watch",
+    "docs": "bash ../tools/scripts/run-docs.sh desktop",
     "lint": "oxlint",
     "lint:fix": "oxlint --fix",
     "test": "vitest run --coverage.enabled false",

package/dist/desktop.css

@@ -1 +0,0 @@
-#cross[data-v-8e18f635]{position:relative;transform:rotate(45deg);cursor:pointer;transition:all .2s ease-in-out;-webkit-user-select:none;user-select:none;line-height:1rem}#cross.rotated[data-v-8e18f635],.cross.rotated[data-v-8e18f635]{transform:rotate(0)}#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;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .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 .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 .25s ease-in-out;-moz-transition:opacity .25s ease-in-out;-o-transition:opacity .25s ease-in-out;transition:opacity .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}.action-element-header[data-v-8e18f635]{display:flex;justify-content:end}button.button-default[data-v-8e18f635]{background-color:transparent;border-radius:0;box-shadow:none;border:none;cursor:pointer;white-space:nowrap;font-weight:700;font-size:1rem;text-align:right;color:var(--sc-gray-80);padding:5px 12px 5px 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);-webkit-user-select:none;user-select:none;transition:all .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:#fff;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 .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:#00000080;display:flex;align-items:flex-start;justify-content:center;z-index:300;padding-top:100px}.command-palette{width:600px;max-width:90%;background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;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:#843c031a}.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}footer[data-v-cd118b06]{position:fixed;bottom:0;width:100%;background-color:transparent;height:auto;min-height:2.4rem;z-index:100;text-align:left;font-size:100%;display:flex;justify-content:right;padding:0 .75rem 0 0;box-sizing:border-box}ul[data-v-cd118b06]{display:flex;flex-direction:row-reverse;margin:0;padding:0;list-style:none}.tabs li[data-v-cd118b06]{float:left;list-style-type:none;position:relative;margin-left:-1px}.tabs a[data-v-cd118b06]{float:left;padding:.5rem 1rem;height:2.4rem;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:.85rem;font-family:var(--sc-font-family);transition:all .15s ease;border-top-left-radius:2px;border-top-right-radius:2px}.tabs a[data-v-cd118b06]:hover{background:var(--sc-btn-hover)}.tabs .router-link-active[data-v-cd118b06]{z-index:3;background:var(--sc-primary-color)!important;border-color:var(--sc-primary-color)!important;color:var(--sc-primary-text-color)!important}.hidebreadcrumbs a[data-v-cd118b06]{min-width:2.4rem;width:2.4rem;height:2.4rem;padding:.5rem;background:var(--sc-btn-color);border:1px solid var(--sc-btn-border);color:var(--sc-gray-60)}.hidebreadcrumbs a div[data-v-cd118b06]{font-size:1.2rem}.rotated[data-v-cd118b06]{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transition:transform .25s ease}.unrotated[data-v-cd118b06]{transform:rotate(0);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-o-transform:rotate(0deg);transition:transform .25s 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{z-index:3}a[data-v-cd118b06]:active,a[data-v-cd118b06]:hover,a[data-v-cd118b06]:focus{outline:2px solid var(--sc-input-active-border-color);z-index:3}.hometab a[data-v-cd118b06]{min-width:2.4rem;width:2.4rem;height:2.4rem;padding:.5rem;background:var(--sc-btn-color);border:1px solid var(--sc-btn-border);color:var(--sc-gray-60)}.icon[data-v-cd118b06]{width:1rem;height:1rem;stroke:currentColor;flex-shrink:0}.searchtab[data-v-cd118b06]{overflow:hidden}.searchtab a[data-v-cd118b06]{min-width:2.4rem;height:2.4rem;padding:.5rem;background:var(--sc-btn-color);border:1px solid var(--sc-btn-border);color:var(--sc-gray-60);overflow:hidden;max-width:2.4rem;transition:max-width .35s ease-in-out,padding .35s ease-in-out,background .2s ease}.searchtab .search-icon[data-v-cd118b06]{cursor:pointer}.searchtab input[data-v-cd118b06]{outline:none;border:1px solid var(--sc-input-border-color);border-radius:.25rem;background-color:var(--sc-form-background);color:var(--sc-gray-80);text-align:left;font-size:.875rem;padding:.25rem .5rem;width:180px;height:1.5rem;flex-shrink:0;opacity:0;transition:opacity .2s ease-in-out;transition-delay:0s}.searchtab input[data-v-cd118b06]:focus{border-color:var(--sc-input-active-border-color);outline:none}.searchtab input[data-v-cd118b06]::placeholder{color:var(--sc-input-label-color)}.searchtab.search-active a[data-v-cd118b06]{max-width:200px;min-width:auto;width:auto;padding:.5rem .75rem}.searchtab.search-active input[data-v-cd118b06]{opacity:1;transition-delay:.15s}

package/dist/desktop.d.ts

@@ -1,119 +0,0 @@
-import { ActionEventPayload } from '@stonecrop/stonecrop';
-import ActionSet from './components/ActionSet.vue';
-import CommandPalette from './components/CommandPalette.vue';
-import Desktop from './components/Desktop.vue';
-import { Plugin as Plugin_2 } from 'vue';
-import SheetNav from './components/SheetNav.vue';
-
-/**
- * Superset of all element types in the Action Set
- * @public
- */
-export declare type ActionElements = ButtonElement | DropdownElement;
-
-export { ActionEventPayload }
-
-export { ActionSet }
-
-/**
- * Base type for elements in the Action Set
- * @public
- */
-export declare type BaseElement = {
-    label: string;
-    show?: boolean;
-};
-
-/**
- * Button elements
- * @public
- */
-export declare type ButtonElement = BaseElement & ElementAction & {
-    type: 'button';
-    disabled?: boolean;
-};
-
-export { CommandPalette }
-
-export { Desktop }
-
-/**
- * Dropdown elements
- * @public
- */
-export declare type DropdownElement = BaseElement & {
-    type: 'dropdown';
-    actions: ElementAction[];
-};
-
-/**
- * Element actions
- * @public
- */
-export declare type ElementAction = BaseElement & {
-    link?: string;
-    action?: () => void;
-};
-
-/**
- * Payload emitted with the 'load-record' event when Desktop needs a single record
- * @public
- */
-export declare type LoadRecordEventPayload = {
-    doctype: string;
-    recordId: string;
-};
-
-/**
- * Payload emitted with the 'load-records' event when Desktop needs records for a list view
- * @public
- */
-export declare type LoadRecordsEventPayload = {
-    doctype: string;
-};
-
-/**
- * Navigation target passed to RouteAdapter.navigate and emitted with the 'navigate' event
- * @public
- */
-export declare type NavigationTarget = {
-    view: 'doctypes' | 'records' | 'record';
-    doctype?: string;
-    recordId?: string;
-};
-
-/**
- * Payload emitted with the 'record:open' event
- * @public
- */
-export declare type RecordOpenEventPayload = {
-    doctype: string;
-    recordId: string;
-};
-
-/**
- * Adapter that lets host applications (Nuxt, etc.) supply their own routing layer.
- * When provided as a prop, Desktop uses these functions instead of reaching into
- * the Vue Router instance baked into the Stonecrop registry.
- * @public
- */
-export declare type RouteAdapter = {
-    /** Returns the active doctype key (e.g. 'plan', 'recipe'). Called inside computed — should read reactive state. */
-    getCurrentDoctype: () => string;
-    /** Returns the active record ID, or '' when viewing a list. Called inside computed. */
-    getCurrentRecordId: () => string;
-    /** Returns which of the three views is currently active. Called inside computed. */
-    getCurrentView: () => 'doctypes' | 'records' | 'record';
-    /** Perform the navigation. Called after the host app has handled any side effects. */
-    navigate: (target: NavigationTarget) => void | Promise<void>;
-};
-
-export { SheetNav }
-
-/**
- * This is the main plugin that will be used to register all the desktop components.
- * @public
- */
-export declare const StonecropDesktop: Plugin_2;
-
-export { }

package/dist/desktop.tsbuildinfo

@@ -1 +0,0 @@
-{"version":"6.0.3"}

package/dist/src/index.js

@@ -1,6 +0,0 @@
-import ActionSet from './components/ActionSet.vue';
-import CommandPalette from './components/CommandPalette.vue';
-import Desktop from './components/Desktop.vue';
-import SheetNav from './components/SheetNav.vue';
-import StonecropDesktop from './plugins';
-export { ActionSet, CommandPalette, Desktop, SheetNav, StonecropDesktop };

package/dist/src/plugins/index.js

@@ -1,17 +0,0 @@
-import ActionSet from '../components/ActionSet.vue';
-import CommandPalette from '../components/CommandPalette.vue';
-import Desktop from '../components/Desktop.vue';
-import SheetNav from '../components/SheetNav.vue';
-/**
- * This is the main plugin that will be used to register all the desktop components.
- * @public
- */
-const plugin = {
-    install: (app) => {
-        app.component('ActionSet', ActionSet);
-        app.component('CommandPalette', CommandPalette);
-        app.component('Desktop', Desktop);
-        app.component('SheetNav', SheetNav);
-    },
-};
-export default plugin;

package/src/components/ActionSet.vue

@@ -1,211 +0,0 @@
-<template>
-	<div :class="{ collapsed: !isOpen }" class="action-set">
-		<div class="action-menu-icon">
-			<div id="cross" :class="{ rotated: isOpen }" @click="onClick">×</div>
-		</div>
-		<div style="margin-right: 30px"></div>
-		<div v-for="(el, index) in elements" :key="el.label" class="action-element">
-			<div class="action-element-header">
-				<button
-					v-if="el.type == 'button'"
-					:disabled="el.disabled"
-					class="button-default"
-					@click="handleClick(el.action, el.label)">
-					{{ el.label }}
-				</button>
-			</div>
-			<div v-if="el.type == 'dropdown'">
-				<div class="dropdown-header">
-					<div class="cross" :class="{ rotated: dropdownOpen[index] }" @click="toggleDropdown(index)">×</div>
-					<button class="button-default dropdown-title" @click="toggleDropdown(index)">
-						{{ el.label }}
-					</button>
-				</div>
-				<div v-show="dropdownStates[index]" class="dropdown-container">
-					<div class="dropdown">
-						<div v-for="item in el.actions" :key="item.label">
-							<button v-if="item.action != null" class="dropdown-item" @click="handleClick(item.action, item.label)">
-								{{ item.label }}
-							</button>
-							<a v-else-if="item.link != null" :href="item.link"
-								><button class="dropdown-item">{{ item.label }}</button></a
-							>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue'
-
-import type { ActionElements } from '../types'
-
-const { elements = [] } = defineProps<{ elements?: ActionElements[] }>()
-const emit = defineEmits<{
-	actionClick: [label: string, action: (() => void | Promise<void>) | undefined]
-}>()
-
-// Track dropdown open state separately (index -> boolean)
-const dropdownStates = ref<Record<number, boolean>>({})
-
-const isOpen = ref(true)
-const dropdownOpen = ref<boolean[]>([])
-
-onMounted(() => {
-	closeDropdowns()
-})
-
-const closeDropdowns = () => {
-	dropdownStates.value = {}
-	dropdownOpen.value = []
-}
-
-const onClick = () => {
-	isOpen.value = !isOpen.value
-}
-
-const toggleDropdown = (index: number) => {
-	const showDropdown = !dropdownStates.value[index]
-	closeDropdowns()
-	if (showDropdown) {
-		dropdownStates.value[index] = true
-		dropdownOpen.value[index] = true
-	}
-}
-
-const handleClick = (action: (() => void | Promise<void>) | undefined, label: string) => {
-	// Emit event to parent - parent will handle execution
-	emit('actionClick', label, action)
-}
-</script>
-
-<style scoped>
-#cross {
-	position: relative;
-	transform: rotate(45deg);
-	cursor: pointer;
-	transition: all 0.2s ease-in-out;
-	user-select: none;
-	line-height: 1rem;
-}
-#cross.rotated,
-.cross.rotated {
-	transform: rotate(0deg);
-}
-#cross svg {
-	width: 1.5em;
-	height: 1.5em;
-}
-
-.action-set {
-	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 {
-	position: relative;
-	font-size: 2rem;
-	display: inline-block;
-	color: var(--sc-gray-60);
-	transition: all 0.2s ease-in-out;
-}
-.action-set.collapsed {
-	max-width: 46px;
-	max-height: 40px;
-	overflow: hidden;
-}
-.action-set.collapsed .action-element {
-	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 {
-	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 {
-	display: flex;
-	justify-content: end;
-}
-button.button-default {
-	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,
-.dropdown-header:hover,
-.action-element-header:hover {
-	background-color: #f2f2f2;
-}
-
-.dropdown-title {
-	position: relative;
-}
-.dropdown-header {
-	display: flex;
-	align-items: center;
-}
-.cross {
-	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 {
-	width: 100%;
-	padding: 5px 12px;
-	text-align: right;
-	border: none;
-	background-color: #ffffff;
-	cursor: pointer;
-	border-radius: 5px;
-	font-size: 1rem;
-}
-
-button.dropdown-item:hover {
-	background-color: #f2f2f2;
-}
-</style>