@rool-dev/extension 0.3.8 → 0.3.9-dev.0d3e086

package/dist/dev/host-shell.js

@@ -313,6 +313,19 @@ function set_component_context(context) {
 	component_context = context;
 }
 /**
+* Retrieves the context that belongs to the closest parent component with the specified `key`.
+* Must be called during component initialisation.
+*
+* [`createContext`](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.
+*
+* @template T
+* @param {any} key
+* @returns {T}
+*/
+function getContext(key) {
+	return get_or_init_context_map("getContext").get(key);
+}
+/**
 * @param {Record<string, unknown>} props
 * @param {any} runes
 * @param {Function} [fn]
@@ -355,6 +368,27 @@ function pop(component) {
 function is_runes() {
 	return !legacy_mode_flag || component_context !== null && component_context.l === null;
 }
+/**
+* @param {string} name
+* @returns {Map<unknown, unknown>}
+*/
+function get_or_init_context_map(name) {
+	if (component_context === null) lifecycle_outside_component(name);
+	return component_context.c ??= new Map(get_parent_context(component_context) || void 0);
+}
+/**
+* @param {ComponentContext} component_context
+* @returns {Map<unknown, unknown> | null}
+*/
+function get_parent_context(component_context) {
+	let parent = component_context.p;
+	while (parent !== null) {
+		const context_map = parent.c;
+		if (context_map !== null) return context_map;
+		parent = parent.p;
+	}
+	return null;
+}
 //#endregion
 //#region ../../node_modules/.pnpm/svelte@5.54.0/node_modules/svelte/src/internal/client/dom/task.js
 /** @type {Array<() => void>} */
@@ -3179,6 +3213,52 @@ function from_html(content, flags) {
 	};
 }
 /**
+* @param {string} content
+* @param {number} flags
+* @param {'svg' | 'math'} ns
+* @returns {() => Node | Node[]}
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function from_namespace(content, flags, ns = "svg") {
+	/**
+	* Whether or not the first item is a text/element node. If not, we need to
+	* create an additional comment node to act as `effect.nodes.start`
+	*/
+	var has_start = !content.startsWith("<!>");
+	var is_fragment = (flags & 1) !== 0;
+	var wrapped = `<${ns}>${has_start ? content : "<!>" + content}</${ns}>`;
+	/** @type {Element | DocumentFragment} */
+	var node;
+	return () => {
+		if (hydrating) {
+			assign_nodes(hydrate_node, null);
+			return hydrate_node;
+		}
+		if (!node) {
+			var root = /* @__PURE__ */ get_first_child(create_fragment_from_html(wrapped));
+			if (is_fragment) {
+				node = document.createDocumentFragment();
+				while (/* @__PURE__ */ get_first_child(root)) node.appendChild(/* @__PURE__ */ get_first_child(root));
+			} else node = /* @__PURE__ */ get_first_child(root);
+		}
+		var clone = node.cloneNode(true);
+		if (is_fragment) {
+			var start = /* @__PURE__ */ get_first_child(clone);
+			var end = clone.lastChild;
+			assign_nodes(start, end);
+		} else assign_nodes(clone, clone);
+		return clone;
+	};
+}
+/**
+* @param {string} content
+* @param {number} flags
+*/
+/* @__NO_SIDE_EFFECTS__ */
+function from_svg(content, flags) {
+	return /* @__PURE__ */ from_namespace(content, flags, "svg");
+}
+/**
 * Don't mark this as side-effect-free, hydration needs to walk all nodes
 * @param {any} value
 */
@@ -4119,48 +4199,6 @@ function bind_this(element_or_component = {}, update, get_value, get_parts) {
 //#region ../../node_modules/.pnpm/svelte@5.54.0/node_modules/svelte/src/internal/client/reactivity/props.js
 /** @import { Effect, Source } from './types.js' */
 /**
-* The proxy handler for rest props (i.e. `const { x, ...rest } = $props()`).
-* Is passed the full `$$props` object and excludes the named props.
-* @type {ProxyHandler<{ props: Record<string | symbol, unknown>, exclude: Array<string | symbol>, name?: string }>}}
-*/
-var rest_props_handler = {
-	get(target, key) {
-		if (target.exclude.includes(key)) return;
-		return target.props[key];
-	},
-	set(target, key) {
-		return false;
-	},
-	getOwnPropertyDescriptor(target, key) {
-		if (target.exclude.includes(key)) return;
-		if (key in target.props) return {
-			enumerable: true,
-			configurable: true,
-			value: target.props[key]
-		};
-	},
-	has(target, key) {
-		if (target.exclude.includes(key)) return false;
-		return key in target.props;
-	},
-	ownKeys(target) {
-		return Reflect.ownKeys(target.props).filter((key) => !target.exclude.includes(key));
-	}
-};
-/**
-* @param {Record<string, unknown>} props
-* @param {string[]} exclude
-* @param {string} [name]
-* @returns {Record<string, unknown>}
-*/
-/* @__NO_SIDE_EFFECTS__ */
-function rest_props(props, exclude, name) {
-	return new Proxy({
-		props,
-		exclude
-	}, rest_props_handler);
-}
-/**
 * This function is responsible for synchronizing a possibly bound prop with the inner component state.
 * It is used whenever the compiler sees that the component writes to the prop, or when it has a default prop_value.
 * @template V
@@ -8470,14 +8508,10 @@ var RoolClient = class extends EventEmitter {
 		this.authManager.initialize();
 		const authenticated = await this.isAuthenticated();
 		if (authenticated) {
-			try {
-				const user = await this.getCurrentUser();
-				this._currentUser = user;
-				this._storageCache = user.storage ?? {};
-				this.saveStorageCache();
-			} catch (error) {
-				this.logger.warn("[RoolClient] Failed to sync user storage:", error);
-			}
+			const user = await this.getCurrentUser();
+			this._currentUser = user;
+			this._storageCache = user.storage ?? {};
+			this.saveStorageCache();
 			await this.ensureSubscribed();
 		}
 		return authenticated;
@@ -9011,12 +9045,14 @@ var BridgeHost = class {
 	channel;
 	iframe;
 	user;
+	_colorScheme;
 	eventCleanups = [];
 	_destroyed = false;
 	constructor(options) {
 		this.channel = options.channel;
 		this.iframe = options.iframe;
 		this.user = options.user;
+		this._colorScheme = options.colorScheme ?? "light";
 		window.addEventListener("message", this._onMessage);
 		for (const eventName of FORWARDED_EVENTS) {
 			const handler = (data) => {
@@ -9042,6 +9078,7 @@ var BridgeHost = class {
 			linkAccess: this.channel.linkAccess,
 			userId: this.channel.userId,
 			user: this.user,
+			colorScheme: this._colorScheme,
 			schema: this.channel.getSchema(),
 			metadata: this.channel.getAllMetadata()
 		};
@@ -9097,6 +9134,15 @@ var BridgeHost = class {
 			});
 		}
 	}
+	/** Update the color scheme and push to the extension iframe. */
+	setColorScheme(colorScheme) {
+		this._colorScheme = colorScheme;
+		this._postToApp({
+			type: "rool:event",
+			name: "colorSchemeChanged",
+			data: { colorScheme }
+		});
+	}
 	_postToApp(message) {
 		if (this._destroyed) return;
 		this.iframe.contentWindow?.postMessage(message, "*");
@@ -9184,6 +9230,7 @@ var DevHostController = class {
 	publishedExtensions = [];
 	installedExtensionIds = [];
 	sidebarCollapsed = false;
+	colorScheme = "light";
 	publishState = "idle";
 	publishMessage = null;
 	publishUrl = null;
@@ -9203,6 +9250,7 @@ var DevHostController = class {
 		this._spaceKey = `rool-devhost:${options.channelId}:space`;
 		this.env = this._getSavedEnv();
 		this.sidebarCollapsed = storageGet("rool-devhost:collapsed") === "true";
+		this.colorScheme = this._getSavedColorScheme();
 	}
 	get tabs() {
 		return [{
@@ -9404,6 +9452,12 @@ var DevHostController = class {
 		storageSet("rool-devhost:collapsed", String(this.sidebarCollapsed));
 		this._onChange();
 	}
+	toggleColorScheme() {
+		this.colorScheme = this.colorScheme === "light" ? "dark" : "light";
+		storageSet("rool-devhost:colorScheme", this.colorScheme);
+		for (const host of Object.values(this.bridgeHosts)) host.setColorScheme(this.colorScheme);
+		this._onChange();
+	}
 	registerIframe(tabId, el) {
 		this.iframeEls[tabId] = el;
 		this._bindBridge(tabId);
@@ -9429,7 +9483,8 @@ var DevHostController = class {
 		if (el && ch && !this.bridgeHosts[tabId]) this.bridgeHosts[tabId] = createBridgeHost({
 			channel: ch,
 			iframe: el,
-			user: this._bridgeUser
+			user: this._bridgeUser,
+			colorScheme: this.colorScheme
 		});
 	}
 	_bindAllBridges() {
@@ -9472,6 +9527,11 @@ var DevHostController = class {
 		if (saved === "local" || saved === "dev" || saved === "prod") return saved;
 		return "prod";
 	}
+	_getSavedColorScheme() {
+		const saved = storageGet("rool-devhost:colorScheme");
+		if (saved === "light" || saved === "dark") return saved;
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
 };
 //#endregion
 //#region src/dev/Sidebar.svelte
@@ -9498,7 +9558,9 @@ var root_19 = /* @__PURE__ */ from_html(`<div class="absolute top-full mt-1 left
 var root_28 = /* @__PURE__ */ from_html(`<a target="_blank" rel="noopener noreferrer" class="block text-[11px] text-indigo-500 hover:text-indigo-600 mt-1.5 truncate"> </a>`);
 var root_29 = /* @__PURE__ */ from_html(`<div class="text-[11px] text-red-500 mt-1.5"> </div>`);
 var root_22 = /* @__PURE__ */ from_html(`<div class="px-4 py-3 border-b border-slate-100"><div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Publish</div> <button><!></button> <!></div>`);
-var root_2$1 = /* @__PURE__ */ from_html(`<div class="w-[280px] shrink-0 bg-white border-r border-slate-200 flex flex-col overflow-y-auto"><div class="px-4 pt-4 pb-3 border-b border-slate-100"><div class="flex items-start justify-between mb-1"><!> <button class="p-1 -mr-1 text-slate-400 hover:text-slate-600 transition-colors shrink-0" title="Collapse sidebar"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg></button></div> <!> <!> <!></div> <!> <!> <!> <div class="px-4 py-3 border-b border-slate-100"><div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Environment</div> <div class="flex rounded-md border border-slate-200 overflow-hidden"><button>Local</button> <button>Dev</button> <button>Prod</button></div> <div class="text-[10px] text-slate-400 mt-1 font-mono"> </div></div> <div class="px-4 py-3 border-b border-slate-100"><div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Space</div> <div class="relative" data-dropdown=""><button type="button"> <svg class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></button> <!></div> <div class="text-[11px] text-slate-400 leading-normal mt-1.5"><span></span> </div></div> <!> <div class="px-4 py-3 mt-auto flex items-center justify-between"><a href="https://docs.rool.dev/app" target="_blank" rel="noopener noreferrer" class="text-[11px] text-slate-400 hover:text-indigo-500 transition-colors">Documentation</a> <button class="text-[11px] text-slate-400 hover:text-red-500 transition-colors">Sign out</button></div></div>`);
+var root_30 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>`);
+var root_31 = /* @__PURE__ */ from_svg(`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>`);
+var root_2$1 = /* @__PURE__ */ from_html(`<div class="w-[280px] shrink-0 bg-white border-r border-slate-200 flex flex-col overflow-y-auto"><div class="px-4 pt-4 pb-3 border-b border-slate-100"><div class="flex items-start justify-between mb-1"><!> <button class="p-1 -mr-1 text-slate-400 hover:text-slate-600 transition-colors shrink-0" title="Collapse sidebar"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"></path></svg></button></div> <!> <!> <!></div> <!> <!> <!> <div class="px-4 py-3 border-b border-slate-100"><div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Environment</div> <div class="flex rounded-md border border-slate-200 overflow-hidden"><button>Local</button> <button>Dev</button> <button>Prod</button></div> <div class="text-[10px] text-slate-400 mt-1 font-mono"> </div></div> <div class="px-4 py-3 border-b border-slate-100"><div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Space</div> <div class="relative" data-dropdown=""><button type="button"> <svg class="absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg></button> <!></div> <div class="text-[11px] text-slate-400 leading-normal mt-1.5"><span></span> </div></div> <!> <div class="px-4 py-3 mt-auto flex items-center justify-between"><a href="https://docs.rool.dev/extension" target="_blank" rel="noopener noreferrer" class="text-[11px] text-slate-400 hover:text-indigo-500 transition-colors">Documentation</a> <button class="p-1 text-slate-400 hover:text-indigo-500 transition-colors"><!></button> <button class="text-[11px] text-slate-400 hover:text-red-500 transition-colors">Sign out</button></div></div>`);
 function Sidebar($$anchor, $$props) {
 	push($$props, true);
 	let dropdownOpen = prop($$props, "dropdownOpen", 15);
@@ -9519,7 +9581,7 @@ function Sidebar($$anchor, $$props) {
 		delegated("click", button, () => $$props.controller.toggleSidebar());
 		append($$anchor, div);
 	};
-	var alternate_2 = ($$anchor) => {
+	var alternate_3 = ($$anchor) => {
 		var div_2 = root_2$1();
 		var div_3 = child(div_2);
 		var div_4 = child(div_3);
@@ -9826,6 +9888,19 @@ function Sidebar($$anchor, $$props) {
 		});
 		var div_38 = sibling(node_14, 2);
 		var button_8 = sibling(child(div_38), 2);
+		var node_17 = child(button_8);
+		var consequent_22 = ($$anchor) => {
+			append($$anchor, root_30());
+		};
+		var alternate_2 = ($$anchor) => {
+			append($$anchor, root_31());
+		};
+		if_block(node_17, ($$render) => {
+			if ($$props.colorScheme === "light") $$render(consequent_22);
+			else $$render(alternate_2, -1);
+		});
+		reset(button_8);
+		var button_9 = sibling(button_8, 2);
 		reset(div_38);
 		reset(div_2);
 		template_effect(() => {
@@ -9837,6 +9912,7 @@ function Sidebar($$anchor, $$props) {
 			set_text(text_12, `${get(selectedSpace)?.name ?? "Select a space..." ?? ""} `);
 			set_class(span_6, 1, `inline-block w-1.5 h-1.5 rounded-full mr-1 align-middle ${$$props.statusState === "ok" ? "bg-green-500" : $$props.statusState === "loading" ? "bg-amber-500" : "bg-slate-400"}`);
 			set_text(text_14, ` ${$$props.statusText ?? ""}`);
+			set_attribute(button_8, "title", $$props.colorScheme === "light" ? "Switch to dark mode" : "Switch to light mode");
 		});
 		delegated("click", button_1, () => $$props.controller.toggleSidebar());
 		delegated("click", button_2, () => $$props.controller.switchEnv("local"));
@@ -9846,12 +9922,13 @@ function Sidebar($$anchor, $$props) {
 			e.stopPropagation();
 			dropdownOpen(!dropdownOpen());
 		});
-		delegated("click", button_8, () => $$props.controller.logout());
+		delegated("click", button_8, () => $$props.controller.toggleColorScheme());
+		delegated("click", button_9, () => $$props.controller.logout());
 		append($$anchor, div_2);
 	};
 	if_block(node, ($$render) => {
 		if ($$props.sidebarCollapsed) $$render(consequent);
-		else $$render(alternate_2, -1);
+		else $$render(alternate_3, -1);
 	});
 	append($$anchor, fragment);
 	pop();
@@ -15244,11 +15321,7 @@ var root_1 = /* @__PURE__ */ from_html(`<div class="flex items-center justify-ce
 var root$1 = /* @__PURE__ */ from_html(`<!> <div class="flex-1 min-w-0 flex flex-col"><!></div>`, 1);
 function HostShell($$anchor, $$props) {
 	push($$props, true);
-	const props = /* @__PURE__ */ rest_props($$props, [
-		"$$slots",
-		"$$events",
-		"$$legacy"
-	]);
+	const { channelId, extensionUrl, manifest, manifestError } = getContext("hostConfig");
 	let spaces = /* @__PURE__ */ state(proxy([]));
 	let currentSpaceId = /* @__PURE__ */ state(null);
 	let statusText = /* @__PURE__ */ state("Initializing...");
@@ -15259,11 +15332,17 @@ function HostShell($$anchor, $$props) {
 	let publishedExtensions = /* @__PURE__ */ state(proxy([]));
 	let installedExtensionIds = /* @__PURE__ */ state(proxy([]));
 	let tabs = /* @__PURE__ */ state(proxy([]));
+	let colorScheme = /* @__PURE__ */ state("light");
 	let publishState = /* @__PURE__ */ state("idle");
 	let publishMessage = /* @__PURE__ */ state(null);
 	let publishUrl = /* @__PURE__ */ state(null);
 	let dropdownOpen = /* @__PURE__ */ state(false);
-	const controller = new DevHostController(props, syncState, tick);
+	const controller = new DevHostController({
+		channelId,
+		extensionUrl,
+		manifest,
+		manifestError
+	}, syncState, tick);
 	function syncState() {
 		set(spaces, controller.spaces, true);
 		set(currentSpaceId, controller.currentSpaceId, true);
@@ -15271,6 +15350,7 @@ function HostShell($$anchor, $$props) {
 		set(statusState, controller.statusState, true);
 		set(placeholderText, controller.placeholderText, true);
 		set(sidebarCollapsed, controller.sidebarCollapsed, true);
+		set(colorScheme, controller.colorScheme, true);
 		set(env, controller.env, true);
 		set(publishedExtensions, controller.publishedExtensions, true);
 		set(installedExtensionIds, controller.installedExtensionIds, true);
@@ -15279,7 +15359,7 @@ function HostShell($$anchor, $$props) {
 		set(publishMessage, controller.publishMessage, true);
 		set(publishUrl, controller.publishUrl, true);
 	}
-	let uninstalledExtensions = /* @__PURE__ */ user_derived(() => get(publishedExtensions).filter((ext) => ext.extensionId !== $$props.channelId && !get(installedExtensionIds).includes(ext.extensionId)));
+	let uninstalledExtensions = /* @__PURE__ */ user_derived(() => get(publishedExtensions).filter((ext) => ext.extensionId !== channelId && !get(installedExtensionIds).includes(ext.extensionId)));
 	syncState();
 	onMount(() => {
 		controller.boot();
@@ -15296,10 +15376,10 @@ function HostShell($$anchor, $$props) {
 			return controller;
 		},
 		get manifest() {
-			return $$props.manifest;
+			return manifest;
 		},
 		get manifestError() {
-			return $$props.manifestError;
+			return manifestError;
 		},
 		get spaces() {
 			return get(spaces);
@@ -15319,6 +15399,9 @@ function HostShell($$anchor, $$props) {
 		get sidebarCollapsed() {
 			return get(sidebarCollapsed);
 		},
+		get colorScheme() {
+			return get(colorScheme);
+		},
 		get publishState() {
 			return get(publishState);
 		},
@@ -15369,7 +15452,7 @@ function HostShell($$anchor, $$props) {
 }
 //#endregion
 //#region src/dev/app.css?inline
-var app_default = "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-50: oklch(97.1% .013 17.38);\n    --color-red-100: oklch(93.6% .032 17.717);\n    --color-red-200: oklch(88.5% .062 18.334);\n    --color-red-500: oklch(63.7% .237 25.331);\n    --color-red-600: oklch(57.7% .245 27.325);\n    --color-amber-50: oklch(98.7% .022 95.277);\n    --color-amber-200: oklch(92.4% .12 95.746);\n    --color-amber-500: oklch(76.9% .188 70.08);\n    --color-amber-700: oklch(55.5% .163 48.998);\n    --color-green-50: oklch(98.2% .018 155.826);\n    --color-green-200: oklch(92.5% .084 155.995);\n    --color-green-500: oklch(72.3% .219 149.579);\n    --color-green-600: oklch(62.7% .194 149.214);\n    --color-emerald-50: oklch(97.9% .021 166.113);\n    --color-emerald-100: oklch(95% .052 163.051);\n    --color-emerald-200: oklch(90.5% .093 164.15);\n    --color-emerald-300: oklch(84.5% .143 164.978);\n    --color-emerald-500: oklch(69.6% .17 162.48);\n    --color-emerald-600: oklch(59.6% .145 163.225);\n    --color-emerald-700: oklch(50.8% .118 165.612);\n    --color-blue-200: oklch(88.2% .059 254.128);\n    --color-blue-600: oklch(54.6% .245 262.881);\n    --color-indigo-50: oklch(96.2% .018 272.314);\n    --color-indigo-100: oklch(93% .034 272.788);\n    --color-indigo-400: oklch(67.3% .182 276.935);\n    --color-indigo-500: oklch(58.5% .233 277.117);\n    --color-indigo-600: oklch(51.1% .262 276.966);\n    --color-violet-600: oklch(54.1% .281 293.009);\n    --color-slate-50: oklch(98.4% .003 247.858);\n    --color-slate-100: oklch(96.8% .007 247.896);\n    --color-slate-200: oklch(92.9% .013 255.508);\n    --color-slate-300: oklch(86.9% .022 252.894);\n    --color-slate-400: oklch(70.4% .04 256.788);\n    --color-slate-500: oklch(55.4% .046 257.417);\n    --color-slate-600: oklch(44.6% .043 257.281);\n    --color-slate-700: oklch(37.2% .044 257.287);\n    --color-slate-800: oklch(27.9% .041 260.031);\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: .025em;\n    --tracking-wider: .05em;\n    --leading-tight: 1.25;\n    --leading-snug: 1.375;\n    --leading-normal: 1.5;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .visible {\n    visibility: visible;\n  }\n\n  .absolute {\n    position: absolute;\n  }\n\n  .relative {\n    position: relative;\n  }\n\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n\n  .top-1\\/2 {\n    top: 50%;\n  }\n\n  .top-full {\n    top: 100%;\n  }\n\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n\n  .right-2\\.5 {\n    right: calc(var(--spacing) * 2.5);\n  }\n\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n\n  .z-10 {\n    z-index: 10;\n  }\n\n  .z-50 {\n    z-index: 50;\n  }\n\n  .mx-3 {\n    margin-inline: calc(var(--spacing) * 3);\n  }\n\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * .5);\n  }\n\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n\n  .mt-1\\.5 {\n    margin-top: calc(var(--spacing) * 1.5);\n  }\n\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n\n  .mt-auto {\n    margin-top: auto;\n  }\n\n  .-mr-1 {\n    margin-right: calc(var(--spacing) * -1);\n  }\n\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * .5);\n  }\n\n  .mr-1 {\n    margin-right: calc(var(--spacing) * 1);\n  }\n\n  .-mb-px {\n    margin-bottom: -1px;\n  }\n\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * .5);\n  }\n\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n\n  .ml-auto {\n    margin-left: auto;\n  }\n\n  .block {\n    display: block;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .grid {\n    display: grid;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .inline-block {\n    display: inline-block;\n  }\n\n  .inline-flex {\n    display: inline-flex;\n  }\n\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n\n  .h-full {\n    height: 100%;\n  }\n\n  .max-h-24 {\n    max-height: calc(var(--spacing) * 24);\n  }\n\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n\n  .w-\\[280px\\] {\n    width: 280px;\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .max-w-\\[360px\\] {\n    max-width: 360px;\n  }\n\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .min-w-\\[200px\\] {\n    min-width: 200px;\n  }\n\n  .min-w-full {\n    min-width: 100%;\n  }\n\n  .flex-1 {\n    flex: 1;\n  }\n\n  .shrink {\n    flex-shrink: 1;\n  }\n\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .cursor-grab {\n    cursor: grab;\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .cursor-wait {\n    cursor: wait;\n  }\n\n  .flex-col {\n    flex-direction: column;\n  }\n\n  .items-baseline {\n    align-items: baseline;\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .items-end {\n    align-items: flex-end;\n  }\n\n  .items-start {\n    align-items: flex-start;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  :where(.space-y-0\\.5 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.space-y-2\\.5 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .overflow-auto {\n    overflow: auto;\n  }\n\n  .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .rounded {\n    border-radius: .25rem;\n  }\n\n  .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .rounded-t-md {\n    border-top-left-radius: var(--radius-md);\n    border-top-right-radius: var(--radius-md);\n  }\n\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0;\n  }\n\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .border-l-2 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 2px;\n  }\n\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n\n  .border-blue-200 {\n    border-color: var(--color-blue-200);\n  }\n\n  .border-emerald-200 {\n    border-color: var(--color-emerald-200);\n  }\n\n  .border-emerald-300 {\n    border-color: var(--color-emerald-300);\n  }\n\n  .border-green-200 {\n    border-color: var(--color-green-200);\n  }\n\n  .border-indigo-500 {\n    border-color: var(--color-indigo-500);\n  }\n\n  .border-red-200 {\n    border-color: var(--color-red-200);\n  }\n\n  .border-slate-100 {\n    border-color: var(--color-slate-100);\n  }\n\n  .border-slate-200 {\n    border-color: var(--color-slate-200);\n  }\n\n  .border-transparent {\n    border-color: #0000;\n  }\n\n  .border-b-white {\n    border-bottom-color: var(--color-white);\n  }\n\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n\n  .bg-amber-500 {\n    background-color: var(--color-amber-500);\n  }\n\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n\n  .bg-emerald-50 {\n    background-color: var(--color-emerald-50);\n  }\n\n  .bg-emerald-100 {\n    background-color: var(--color-emerald-100);\n  }\n\n  .bg-emerald-500 {\n    background-color: var(--color-emerald-500);\n  }\n\n  .bg-green-50 {\n    background-color: var(--color-green-50);\n  }\n\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n\n  .bg-indigo-50 {\n    background-color: var(--color-indigo-50);\n  }\n\n  .bg-indigo-100 {\n    background-color: var(--color-indigo-100);\n  }\n\n  .bg-indigo-500 {\n    background-color: var(--color-indigo-500);\n  }\n\n  .bg-red-50 {\n    background-color: var(--color-red-50);\n  }\n\n  .bg-slate-50 {\n    background-color: var(--color-slate-50);\n  }\n\n  .bg-slate-100 {\n    background-color: var(--color-slate-100);\n  }\n\n  .bg-slate-400 {\n    background-color: var(--color-slate-400);\n  }\n\n  .bg-transparent {\n    background-color: #0000;\n  }\n\n  .bg-violet-600 {\n    background-color: var(--color-violet-600);\n  }\n\n  .bg-white {\n    background-color: var(--color-white);\n  }\n\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n\n  .p-0\\.5 {\n    padding: calc(var(--spacing) * .5);\n  }\n\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n\n  .py-px {\n    padding-block: 1px;\n  }\n\n  .pt-1 {\n    padding-top: calc(var(--spacing) * 1);\n  }\n\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .text-left {\n    text-align: left;\n  }\n\n  .align-middle {\n    vertical-align: middle;\n  }\n\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .text-\\[9px\\] {\n    font-size: 9px;\n  }\n\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n\n  .leading-normal {\n    --tw-leading: var(--leading-normal);\n    line-height: var(--leading-normal);\n  }\n\n  .leading-snug {\n    --tw-leading: var(--leading-snug);\n    line-height: var(--leading-snug);\n  }\n\n  .leading-tight {\n    --tw-leading: var(--leading-tight);\n    line-height: var(--leading-tight);\n  }\n\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n\n  .tracking-wider {\n    --tw-tracking: var(--tracking-wider);\n    letter-spacing: var(--tracking-wider);\n  }\n\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n\n  .text-amber-700 {\n    color: var(--color-amber-700);\n  }\n\n  .text-blue-600 {\n    color: var(--color-blue-600);\n  }\n\n  .text-emerald-600 {\n    color: var(--color-emerald-600);\n  }\n\n  .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n\n  .text-indigo-400 {\n    color: var(--color-indigo-400);\n  }\n\n  .text-indigo-500 {\n    color: var(--color-indigo-500);\n  }\n\n  .text-indigo-600 {\n    color: var(--color-indigo-600);\n  }\n\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n\n  .text-slate-600 {\n    color: var(--color-slate-600);\n  }\n\n  .text-slate-700 {\n    color: var(--color-slate-700);\n  }\n\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n\n  .text-white {\n    color: var(--color-white);\n  }\n\n  .uppercase {\n    text-transform: uppercase;\n  }\n\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-indigo-500\\/12 {\n    --tw-ring-color: #625fff1f;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .ring-indigo-500\\/12 {\n      --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 12%, transparent);\n    }\n  }\n\n  .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .hover\\:border-slate-300:hover {\n      border-color: var(--color-slate-300);\n    }\n\n    .hover\\:bg-indigo-600:hover {\n      background-color: var(--color-indigo-600);\n    }\n\n    .hover\\:bg-red-100:hover {\n      background-color: var(--color-red-100);\n    }\n\n    .hover\\:bg-slate-50:hover {\n      background-color: var(--color-slate-50);\n    }\n\n    .hover\\:bg-slate-100:hover {\n      background-color: var(--color-slate-100);\n    }\n\n    .hover\\:text-indigo-500:hover {\n      color: var(--color-indigo-500);\n    }\n\n    .hover\\:text-indigo-600:hover {\n      color: var(--color-indigo-600);\n    }\n\n    .hover\\:text-red-500:hover {\n      color: var(--color-red-500);\n    }\n\n    .hover\\:text-slate-600:hover {\n      color: var(--color-slate-600);\n    }\n\n    .hover\\:text-slate-700:hover {\n      color: var(--color-slate-700);\n    }\n  }\n\n  .focus\\:border-indigo-500:focus {\n    border-color: var(--color-indigo-500);\n  }\n\n  .focus\\:ring-2:focus {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .focus\\:ring-indigo-500\\/12:focus {\n    --tw-ring-color: #625fff1f;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .focus\\:ring-indigo-500\\/12:focus {\n      --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 12%, transparent);\n    }\n  }\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false\n}\n";
+var app_default = "/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n    *, :before, :after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-leading: initial;\n      --tw-font-weight: initial;\n      --tw-tracking: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-blur: initial;\n      --tw-brightness: initial;\n      --tw-contrast: initial;\n      --tw-grayscale: initial;\n      --tw-hue-rotate: initial;\n      --tw-invert: initial;\n      --tw-opacity: initial;\n      --tw-saturate: initial;\n      --tw-sepia: initial;\n      --tw-drop-shadow: initial;\n      --tw-drop-shadow-color: initial;\n      --tw-drop-shadow-alpha: 100%;\n      --tw-drop-shadow-size: initial;\n    }\n  }\n}\n\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-red-50: oklch(97.1% .013 17.38);\n    --color-red-100: oklch(93.6% .032 17.717);\n    --color-red-200: oklch(88.5% .062 18.334);\n    --color-red-500: oklch(63.7% .237 25.331);\n    --color-red-600: oklch(57.7% .245 27.325);\n    --color-amber-50: oklch(98.7% .022 95.277);\n    --color-amber-200: oklch(92.4% .12 95.746);\n    --color-amber-500: oklch(76.9% .188 70.08);\n    --color-amber-700: oklch(55.5% .163 48.998);\n    --color-green-50: oklch(98.2% .018 155.826);\n    --color-green-200: oklch(92.5% .084 155.995);\n    --color-green-500: oklch(72.3% .219 149.579);\n    --color-green-600: oklch(62.7% .194 149.214);\n    --color-emerald-50: oklch(97.9% .021 166.113);\n    --color-emerald-100: oklch(95% .052 163.051);\n    --color-emerald-200: oklch(90.5% .093 164.15);\n    --color-emerald-300: oklch(84.5% .143 164.978);\n    --color-emerald-400: oklch(76.5% .177 163.223);\n    --color-emerald-500: oklch(69.6% .17 162.48);\n    --color-emerald-600: oklch(59.6% .145 163.225);\n    --color-emerald-700: oklch(50.8% .118 165.612);\n    --color-blue-200: oklch(88.2% .059 254.128);\n    --color-blue-600: oklch(54.6% .245 262.881);\n    --color-indigo-50: oklch(96.2% .018 272.314);\n    --color-indigo-100: oklch(93% .034 272.788);\n    --color-indigo-400: oklch(67.3% .182 276.935);\n    --color-indigo-500: oklch(58.5% .233 277.117);\n    --color-indigo-600: oklch(51.1% .262 276.966);\n    --color-violet-600: oklch(54.1% .281 293.009);\n    --color-slate-50: oklch(98.4% .003 247.858);\n    --color-slate-100: oklch(96.8% .007 247.896);\n    --color-slate-200: oklch(92.9% .013 255.508);\n    --color-slate-300: oklch(86.9% .022 252.894);\n    --color-slate-400: oklch(70.4% .04 256.788);\n    --color-slate-500: oklch(55.4% .046 257.417);\n    --color-slate-600: oklch(44.6% .043 257.281);\n    --color-slate-700: oklch(37.2% .044 257.287);\n    --color-slate-800: oklch(27.9% .041 260.031);\n    --color-neutral-100: oklch(97% 0 0);\n    --color-neutral-400: oklch(70.8% 0 0);\n    --color-neutral-700: oklch(37.1% 0 0);\n    --color-neutral-800: oklch(26.9% 0 0);\n    --color-neutral-900: oklch(20.5% 0 0);\n    --color-neutral-950: oklch(14.5% 0 0);\n    --color-white: #fff;\n    --spacing: .25rem;\n    --text-xs: .75rem;\n    --text-xs--line-height: calc(1 / .75);\n    --text-sm: .875rem;\n    --text-sm--line-height: calc(1.25 / .875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --tracking-wide: .025em;\n    --tracking-wider: .05em;\n    --leading-tight: 1.25;\n    --leading-snug: 1.375;\n    --leading-normal: 1.5;\n    --radius-md: .375rem;\n    --radius-lg: .5rem;\n    --default-transition-duration: .15s;\n    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n\n@layer base {\n  *, :after, :before, ::backdrop {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  ::file-selector-button {\n    box-sizing: border-box;\n    border: 0 solid;\n    margin: 0;\n    padding: 0;\n  }\n\n  html, :host {\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    line-height: 1.5;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  b, strong {\n    font-weight: bolder;\n  }\n\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub, sup {\n    vertical-align: baseline;\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n  }\n\n  sub {\n    bottom: -.25em;\n  }\n\n  sup {\n    top: -.5em;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  ol, ul, menu {\n    list-style: none;\n  }\n\n  img, svg, video, canvas, audio, iframe, embed, object {\n    vertical-align: middle;\n    display: block;\n  }\n\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  button, input, select, optgroup, textarea {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    opacity: 1;\n    background-color: #0000;\n    border-radius: 0;\n  }\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentColor;\n    }\n\n    @supports (color: color-mix(in lab, red, red)) {\n      ::placeholder {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-year-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-month-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-day-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-hour-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-minute-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-second-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-millisecond-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n    appearance: button;\n  }\n\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  ::-webkit-inner-spin-button {\n    height: auto;\n  }\n\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n\n@layer components;\n\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n\n  .visible {\n    visibility: visible;\n  }\n\n  .absolute {\n    position: absolute;\n  }\n\n  .relative {\n    position: relative;\n  }\n\n  .end {\n    inset-inline-end: var(--spacing);\n  }\n\n  .top-1\\/2 {\n    top: 50%;\n  }\n\n  .top-full {\n    top: 100%;\n  }\n\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n\n  .right-2\\.5 {\n    right: calc(var(--spacing) * 2.5);\n  }\n\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n\n  .z-10 {\n    z-index: 10;\n  }\n\n  .z-50 {\n    z-index: 50;\n  }\n\n  .mx-3 {\n    margin-inline: calc(var(--spacing) * 3);\n  }\n\n  .mt-0\\.5 {\n    margin-top: calc(var(--spacing) * .5);\n  }\n\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n\n  .mt-1\\.5 {\n    margin-top: calc(var(--spacing) * 1.5);\n  }\n\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n\n  .mt-3 {\n    margin-top: calc(var(--spacing) * 3);\n  }\n\n  .mt-auto {\n    margin-top: auto;\n  }\n\n  .-mr-1 {\n    margin-right: calc(var(--spacing) * -1);\n  }\n\n  .mr-0\\.5 {\n    margin-right: calc(var(--spacing) * .5);\n  }\n\n  .mr-1 {\n    margin-right: calc(var(--spacing) * 1);\n  }\n\n  .-mb-px {\n    margin-bottom: -1px;\n  }\n\n  .mb-0\\.5 {\n    margin-bottom: calc(var(--spacing) * .5);\n  }\n\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n\n  .mb-1\\.5 {\n    margin-bottom: calc(var(--spacing) * 1.5);\n  }\n\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n\n  .ml-1 {\n    margin-left: calc(var(--spacing) * 1);\n  }\n\n  .ml-1\\.5 {\n    margin-left: calc(var(--spacing) * 1.5);\n  }\n\n  .ml-auto {\n    margin-left: auto;\n  }\n\n  .block {\n    display: block;\n  }\n\n  .flex {\n    display: flex;\n  }\n\n  .grid {\n    display: grid;\n  }\n\n  .hidden {\n    display: none;\n  }\n\n  .inline-block {\n    display: inline-block;\n  }\n\n  .inline-flex {\n    display: inline-flex;\n  }\n\n  .h-1\\.5 {\n    height: calc(var(--spacing) * 1.5);\n  }\n\n  .h-2 {\n    height: calc(var(--spacing) * 2);\n  }\n\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n\n  .h-8 {\n    height: calc(var(--spacing) * 8);\n  }\n\n  .h-full {\n    height: 100%;\n  }\n\n  .max-h-24 {\n    max-height: calc(var(--spacing) * 24);\n  }\n\n  .max-h-60 {\n    max-height: calc(var(--spacing) * 60);\n  }\n\n  .min-h-0 {\n    min-height: calc(var(--spacing) * 0);\n  }\n\n  .w-1\\.5 {\n    width: calc(var(--spacing) * 1.5);\n  }\n\n  .w-2 {\n    width: calc(var(--spacing) * 2);\n  }\n\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n\n  .w-10 {\n    width: calc(var(--spacing) * 10);\n  }\n\n  .w-\\[280px\\] {\n    width: 280px;\n  }\n\n  .w-full {\n    width: 100%;\n  }\n\n  .max-w-\\[360px\\] {\n    max-width: 360px;\n  }\n\n  .min-w-0 {\n    min-width: calc(var(--spacing) * 0);\n  }\n\n  .min-w-\\[200px\\] {\n    min-width: 200px;\n  }\n\n  .min-w-full {\n    min-width: 100%;\n  }\n\n  .flex-1 {\n    flex: 1;\n  }\n\n  .shrink {\n    flex-shrink: 1;\n  }\n\n  .shrink-0 {\n    flex-shrink: 0;\n  }\n\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n\n  .cursor-grab {\n    cursor: grab;\n  }\n\n  .cursor-pointer {\n    cursor: pointer;\n  }\n\n  .cursor-wait {\n    cursor: wait;\n  }\n\n  .flex-col {\n    flex-direction: column;\n  }\n\n  .items-baseline {\n    align-items: baseline;\n  }\n\n  .items-center {\n    align-items: center;\n  }\n\n  .items-end {\n    align-items: flex-end;\n  }\n\n  .items-start {\n    align-items: flex-start;\n  }\n\n  .justify-between {\n    justify-content: space-between;\n  }\n\n  .justify-center {\n    justify-content: center;\n  }\n\n  .gap-1\\.5 {\n    gap: calc(var(--spacing) * 1.5);\n  }\n\n  .gap-2 {\n    gap: calc(var(--spacing) * 2);\n  }\n\n  :where(.space-y-0\\.5 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.space-y-1 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  :where(.space-y-2\\.5 > :not(:last-child)) {\n    --tw-space-y-reverse: 0;\n    margin-block-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-y-reverse));\n    margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));\n  }\n\n  .truncate {\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .overflow-auto {\n    overflow: auto;\n  }\n\n  .overflow-hidden {\n    overflow: hidden;\n  }\n\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n\n  .rounded {\n    border-radius: .25rem;\n  }\n\n  .rounded-full {\n    border-radius: 3.40282e38px;\n  }\n\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n\n  .rounded-t-md {\n    border-top-left-radius: var(--radius-md);\n    border-top-right-radius: var(--radius-md);\n  }\n\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n\n  .border-0 {\n    border-style: var(--tw-border-style);\n    border-width: 0;\n  }\n\n  .border-r {\n    border-right-style: var(--tw-border-style);\n    border-right-width: 1px;\n  }\n\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n\n  .border-l-2 {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 2px;\n  }\n\n  .border-none {\n    --tw-border-style: none;\n    border-style: none;\n  }\n\n  .border-amber-200 {\n    border-color: var(--color-amber-200);\n  }\n\n  .border-blue-200 {\n    border-color: var(--color-blue-200);\n  }\n\n  .border-emerald-200 {\n    border-color: var(--color-emerald-200);\n  }\n\n  .border-emerald-300 {\n    border-color: var(--color-emerald-300);\n  }\n\n  .border-green-200 {\n    border-color: var(--color-green-200);\n  }\n\n  .border-indigo-500 {\n    border-color: var(--color-indigo-500);\n  }\n\n  .border-red-200 {\n    border-color: var(--color-red-200);\n  }\n\n  .border-slate-100 {\n    border-color: var(--color-slate-100);\n  }\n\n  .border-slate-200 {\n    border-color: var(--color-slate-200);\n  }\n\n  .border-transparent {\n    border-color: #0000;\n  }\n\n  .border-b-white {\n    border-bottom-color: var(--color-white);\n  }\n\n  .bg-amber-50 {\n    background-color: var(--color-amber-50);\n  }\n\n  .bg-amber-500 {\n    background-color: var(--color-amber-500);\n  }\n\n  .bg-blue-600 {\n    background-color: var(--color-blue-600);\n  }\n\n  .bg-emerald-50 {\n    background-color: var(--color-emerald-50);\n  }\n\n  .bg-emerald-100 {\n    background-color: var(--color-emerald-100);\n  }\n\n  .bg-emerald-500 {\n    background-color: var(--color-emerald-500);\n  }\n\n  .bg-green-50 {\n    background-color: var(--color-green-50);\n  }\n\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n\n  .bg-indigo-50 {\n    background-color: var(--color-indigo-50);\n  }\n\n  .bg-indigo-100 {\n    background-color: var(--color-indigo-100);\n  }\n\n  .bg-indigo-500 {\n    background-color: var(--color-indigo-500);\n  }\n\n  .bg-red-50 {\n    background-color: var(--color-red-50);\n  }\n\n  .bg-slate-50 {\n    background-color: var(--color-slate-50);\n  }\n\n  .bg-slate-100 {\n    background-color: var(--color-slate-100);\n  }\n\n  .bg-slate-400 {\n    background-color: var(--color-slate-400);\n  }\n\n  .bg-transparent {\n    background-color: #0000;\n  }\n\n  .bg-violet-600 {\n    background-color: var(--color-violet-600);\n  }\n\n  .bg-white {\n    background-color: var(--color-white);\n  }\n\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n\n  .p-0\\.5 {\n    padding: calc(var(--spacing) * .5);\n  }\n\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n\n  .p-1\\.5 {\n    padding: calc(var(--spacing) * 1.5);\n  }\n\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n\n  .px-1 {\n    padding-inline: calc(var(--spacing) * 1);\n  }\n\n  .px-1\\.5 {\n    padding-inline: calc(var(--spacing) * 1.5);\n  }\n\n  .px-2 {\n    padding-inline: calc(var(--spacing) * 2);\n  }\n\n  .px-2\\.5 {\n    padding-inline: calc(var(--spacing) * 2.5);\n  }\n\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n\n  .py-0\\.5 {\n    padding-block: calc(var(--spacing) * .5);\n  }\n\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n\n  .py-1\\.5 {\n    padding-block: calc(var(--spacing) * 1.5);\n  }\n\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n\n  .py-px {\n    padding-block: 1px;\n  }\n\n  .pt-1 {\n    padding-top: calc(var(--spacing) * 1);\n  }\n\n  .pt-4 {\n    padding-top: calc(var(--spacing) * 4);\n  }\n\n  .pr-8 {\n    padding-right: calc(var(--spacing) * 8);\n  }\n\n  .pb-3 {\n    padding-bottom: calc(var(--spacing) * 3);\n  }\n\n  .pl-2 {\n    padding-left: calc(var(--spacing) * 2);\n  }\n\n  .pl-2\\.5 {\n    padding-left: calc(var(--spacing) * 2.5);\n  }\n\n  .text-center {\n    text-align: center;\n  }\n\n  .text-left {\n    text-align: left;\n  }\n\n  .align-middle {\n    vertical-align: middle;\n  }\n\n  .font-mono {\n    font-family: var(--font-mono);\n  }\n\n  .text-2xl {\n    font-size: var(--text-2xl);\n    line-height: var(--tw-leading, var(--text-2xl--line-height));\n  }\n\n  .text-base {\n    font-size: var(--text-base);\n    line-height: var(--tw-leading, var(--text-base--line-height));\n  }\n\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n\n  .text-xs {\n    font-size: var(--text-xs);\n    line-height: var(--tw-leading, var(--text-xs--line-height));\n  }\n\n  .text-\\[9px\\] {\n    font-size: 9px;\n  }\n\n  .text-\\[10px\\] {\n    font-size: 10px;\n  }\n\n  .text-\\[11px\\] {\n    font-size: 11px;\n  }\n\n  .text-\\[12px\\] {\n    font-size: 12px;\n  }\n\n  .text-\\[13px\\] {\n    font-size: 13px;\n  }\n\n  .leading-none {\n    --tw-leading: 1;\n    line-height: 1;\n  }\n\n  .leading-normal {\n    --tw-leading: var(--leading-normal);\n    line-height: var(--leading-normal);\n  }\n\n  .leading-snug {\n    --tw-leading: var(--leading-snug);\n    line-height: var(--leading-snug);\n  }\n\n  .leading-tight {\n    --tw-leading: var(--leading-tight);\n    line-height: var(--leading-tight);\n  }\n\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n\n  .font-medium {\n    --tw-font-weight: var(--font-weight-medium);\n    font-weight: var(--font-weight-medium);\n  }\n\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n\n  .tracking-wide {\n    --tw-tracking: var(--tracking-wide);\n    letter-spacing: var(--tracking-wide);\n  }\n\n  .tracking-wider {\n    --tw-tracking: var(--tracking-wider);\n    letter-spacing: var(--tracking-wider);\n  }\n\n  .whitespace-pre-wrap {\n    white-space: pre-wrap;\n  }\n\n  .text-amber-700 {\n    color: var(--color-amber-700);\n  }\n\n  .text-blue-600 {\n    color: var(--color-blue-600);\n  }\n\n  .text-emerald-600 {\n    color: var(--color-emerald-600);\n  }\n\n  .text-emerald-700 {\n    color: var(--color-emerald-700);\n  }\n\n  .text-green-600 {\n    color: var(--color-green-600);\n  }\n\n  .text-indigo-400 {\n    color: var(--color-indigo-400);\n  }\n\n  .text-indigo-500 {\n    color: var(--color-indigo-500);\n  }\n\n  .text-indigo-600 {\n    color: var(--color-indigo-600);\n  }\n\n  .text-red-500 {\n    color: var(--color-red-500);\n  }\n\n  .text-red-600 {\n    color: var(--color-red-600);\n  }\n\n  .text-slate-400 {\n    color: var(--color-slate-400);\n  }\n\n  .text-slate-500 {\n    color: var(--color-slate-500);\n  }\n\n  .text-slate-600 {\n    color: var(--color-slate-600);\n  }\n\n  .text-slate-700 {\n    color: var(--color-slate-700);\n  }\n\n  .text-slate-800 {\n    color: var(--color-slate-800);\n  }\n\n  .text-white {\n    color: var(--color-white);\n  }\n\n  .uppercase {\n    text-transform: uppercase;\n  }\n\n  .shadow-lg {\n    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .shadow-sm {\n    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-2 {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .ring-indigo-500\\/12 {\n    --tw-ring-color: #625fff1f;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .ring-indigo-500\\/12 {\n      --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 12%, transparent);\n    }\n  }\n\n  .filter {\n    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n  }\n\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n\n  .outline-none {\n    --tw-outline-style: none;\n    outline-style: none;\n  }\n\n  .select-none {\n    -webkit-user-select: none;\n    user-select: none;\n  }\n\n  @media (hover: hover) {\n    .hover\\:border-slate-300:hover {\n      border-color: var(--color-slate-300);\n    }\n\n    .hover\\:bg-indigo-600:hover {\n      background-color: var(--color-indigo-600);\n    }\n\n    .hover\\:bg-red-100:hover {\n      background-color: var(--color-red-100);\n    }\n\n    .hover\\:bg-slate-50:hover {\n      background-color: var(--color-slate-50);\n    }\n\n    .hover\\:bg-slate-100:hover {\n      background-color: var(--color-slate-100);\n    }\n\n    .hover\\:text-indigo-500:hover {\n      color: var(--color-indigo-500);\n    }\n\n    .hover\\:text-indigo-600:hover {\n      color: var(--color-indigo-600);\n    }\n\n    .hover\\:text-red-500:hover {\n      color: var(--color-red-500);\n    }\n\n    .hover\\:text-slate-600:hover {\n      color: var(--color-slate-600);\n    }\n\n    .hover\\:text-slate-700:hover {\n      color: var(--color-slate-700);\n    }\n  }\n\n  .focus\\:border-indigo-500:focus {\n    border-color: var(--color-indigo-500);\n  }\n\n  .focus\\:ring-2:focus {\n    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n\n  .focus\\:ring-indigo-500\\/12:focus {\n    --tw-ring-color: #625fff1f;\n  }\n\n  @supports (color: color-mix(in lab, red, red)) {\n    .focus\\:ring-indigo-500\\/12:focus {\n      --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 12%, transparent);\n    }\n  }\n\n  .dark\\:border-neutral-700:where(.dark, .dark *) {\n    border-color: var(--color-neutral-700);\n  }\n\n  .dark\\:bg-neutral-800:where(.dark, .dark *) {\n    background-color: var(--color-neutral-800);\n  }\n\n  .dark\\:bg-neutral-900:where(.dark, .dark *) {\n    background-color: var(--color-neutral-900);\n  }\n\n  .dark\\:bg-neutral-950:where(.dark, .dark *) {\n    background-color: var(--color-neutral-950);\n  }\n\n  .dark\\:text-emerald-400:where(.dark, .dark *) {\n    color: var(--color-emerald-400);\n  }\n\n  .dark\\:text-neutral-100:where(.dark, .dark *) {\n    color: var(--color-neutral-100);\n  }\n\n  .dark\\:text-neutral-400:where(.dark, .dark *) {\n    color: var(--color-neutral-400);\n  }\n}\n\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n\n@property --tw-leading {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-tracking {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n\n@property --tw-blur {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-brightness {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-contrast {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-grayscale {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-hue-rotate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-invert {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-opacity {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-saturate {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-sepia {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-color {\n  syntax: \"*\";\n  inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n  syntax: \"*\";\n  inherits: false\n}\n";
 //#endregion
 //#region ../../node_modules/.pnpm/gridstack@12.4.2/node_modules/gridstack/dist/gridstack.css?inline
 var gridstack_default = "/**\n * gridstack SASS styles 12.4.2\n * Copyright (c) 2021-2025 Alain Dumesny - see GridStack root license\n */\n.grid-stack {\n  position: relative;\n}\n\n.grid-stack-rtl {\n  direction: ltr;\n}\n.grid-stack-rtl > .grid-stack-item {\n  direction: rtl;\n}\n\n.grid-stack-placeholder > .placeholder-content {\n  background-color: rgba(0, 0, 0, 0.1);\n  margin: 0;\n  position: absolute;\n  width: auto;\n  z-index: 0 !important;\n}\n\n.grid-stack > .grid-stack-item {\n  position: absolute;\n  padding: 0;\n  top: 0;\n  left: 0;\n  width: var(--gs-column-width);\n  height: var(--gs-cell-height);\n}\n.grid-stack > .grid-stack-item > .grid-stack-item-content {\n  margin: 0;\n  position: absolute;\n  width: auto;\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n.grid-stack > .grid-stack-item.size-to-content:not(.size-to-content-max) > .grid-stack-item-content {\n  overflow-y: hidden;\n}\n\n.grid-stack > .grid-stack-item > .grid-stack-item-content,\n.grid-stack > .grid-stack-placeholder > .placeholder-content {\n  top: var(--gs-item-margin-top);\n  right: var(--gs-item-margin-right);\n  bottom: var(--gs-item-margin-bottom);\n  left: var(--gs-item-margin-left);\n}\n\n.grid-stack-item > .ui-resizable-handle {\n  position: absolute;\n  font-size: 0.1px;\n  display: block;\n  -ms-touch-action: none;\n  touch-action: none;\n}\n.grid-stack-item.ui-resizable-disabled > .ui-resizable-handle, .grid-stack-item.ui-resizable-autohide > .ui-resizable-handle {\n  display: none;\n}\n.grid-stack-item > .ui-resizable-ne,\n.grid-stack-item > .ui-resizable-nw,\n.grid-stack-item > .ui-resizable-se,\n.grid-stack-item > .ui-resizable-sw {\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n}\n.grid-stack-item > .ui-resizable-ne {\n  transform: rotate(45deg);\n}\n.grid-stack-item > .ui-resizable-sw {\n  transform: rotate(45deg);\n}\n.grid-stack-item > .ui-resizable-nw {\n  transform: rotate(-45deg);\n}\n.grid-stack-item > .ui-resizable-se {\n  transform: rotate(-45deg);\n}\n.grid-stack-item > .ui-resizable-nw {\n  cursor: nw-resize;\n  width: 20px;\n  height: 20px;\n  top: var(--gs-item-margin-top);\n  left: var(--gs-item-margin-left);\n}\n.grid-stack-item > .ui-resizable-n {\n  cursor: n-resize;\n  height: 10px;\n  top: var(--gs-item-margin-top);\n  left: 25px;\n  right: 25px;\n}\n.grid-stack-item > .ui-resizable-ne {\n  cursor: ne-resize;\n  width: 20px;\n  height: 20px;\n  top: var(--gs-item-margin-top);\n  right: var(--gs-item-margin-right);\n}\n.grid-stack-item > .ui-resizable-e {\n  cursor: e-resize;\n  width: 10px;\n  top: 15px;\n  bottom: 15px;\n  right: var(--gs-item-margin-right);\n}\n.grid-stack-item > .ui-resizable-se {\n  cursor: se-resize;\n  width: 20px;\n  height: 20px;\n  bottom: var(--gs-item-margin-bottom);\n  right: var(--gs-item-margin-right);\n}\n.grid-stack-item > .ui-resizable-s {\n  cursor: s-resize;\n  height: 10px;\n  left: 25px;\n  bottom: var(--gs-item-margin-bottom);\n  right: 25px;\n}\n.grid-stack-item > .ui-resizable-sw {\n  cursor: sw-resize;\n  width: 20px;\n  height: 20px;\n  bottom: var(--gs-item-margin-bottom);\n  left: var(--gs-item-margin-left);\n}\n.grid-stack-item > .ui-resizable-w {\n  cursor: w-resize;\n  width: 10px;\n  top: 15px;\n  bottom: 15px;\n  left: var(--gs-item-margin-left);\n}\n.grid-stack-item.ui-draggable-dragging > .ui-resizable-handle {\n  display: none !important;\n}\n.grid-stack-item.ui-draggable-dragging {\n  will-change: left, top;\n}\n.grid-stack-item.ui-resizable-resizing {\n  will-change: width, height;\n}\n\n.ui-draggable-dragging,\n.ui-resizable-resizing {\n  z-index: 10000;\n}\n.ui-draggable-dragging > .grid-stack-item-content,\n.ui-resizable-resizing > .grid-stack-item-content {\n  box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);\n  opacity: 0.8;\n}\n\n.grid-stack-animate,\n.grid-stack-animate .grid-stack-item {\n  transition: left 0.3s, top 0.3s, height 0.3s, width 0.3s;\n}\n\n.grid-stack-animate .grid-stack-item.ui-draggable-dragging,\n.grid-stack-animate .grid-stack-item.ui-resizable-resizing,\n.grid-stack-animate .grid-stack-item.grid-stack-placeholder {\n  transition: left 0s, top 0s, height 0s, width 0s;\n}\n\n.grid-stack > .grid-stack-item[gs-y=\"0\"] {\n  top: 0px;\n}\n\n.grid-stack > .grid-stack-item[gs-x=\"0\"] {\n  left: 0%;\n}";
@@ -15385,14 +15468,18 @@ var style = document.createElement("style");
 style.textContent = app_default + "\n" + gridstack_default;
 document.head.appendChild(style);
 var root = document.getElementById("rool-host");
+var channelId = root.dataset.channelId ?? "extension-dev";
+var extensionUrl = root.dataset.extensionUrl ?? "/";
+var manifest = root.dataset.manifest ? JSON.parse(root.dataset.manifest) : null;
+var manifestError = root.dataset.manifestError ?? null;
 mount(HostShell, {
 	target: root,
-	props: {
-		channelId: root.dataset.channelId ?? "extension-dev",
-		extensionUrl: root.dataset.extensionUrl ?? "/",
-		manifest: root.dataset.manifest ? JSON.parse(root.dataset.manifest) : null,
-		manifestError: root.dataset.manifestError ?? null
-	}
+	context: new Map([["hostConfig", {
+		channelId,
+		extensionUrl,
+		manifest,
+		manifestError
+	}]])
 });
 //#endregion