@rool-dev/extension 0.3.7 → 0.3.8-dev.368b058

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
@@ -5638,8 +5676,8 @@ var GraphQLClient = class {
 	}
 	async prompt(spaceId, prompt, channelId, conversationId, options) {
 		return (await this.request(`
-      mutation Prompt($spaceId: String!, $prompt: String!, $objectIds: [String!], $responseSchema: JSON, $channelId: String!, $conversationId: String!, $effort: PromptEffort, $ephemeral: Boolean, $readOnly: Boolean, $attachments: [String!], $interactionId: String!) {
-        prompt(spaceId: $spaceId, prompt: $prompt, objectIds: $objectIds, responseSchema: $responseSchema, channelId: $channelId, conversationId: $conversationId, effort: $effort, ephemeral: $ephemeral, readOnly: $readOnly, attachments: $attachments, interactionId: $interactionId) {
+      mutation Prompt($spaceId: String!, $prompt: String!, $objectIds: [String!], $responseSchema: JSON, $channelId: String!, $conversationId: String!, $effort: PromptEffort, $ephemeral: Boolean, $readOnly: Boolean, $attachments: [String!], $interactionId: String!, $parentInteractionId: String) {
+        prompt(spaceId: $spaceId, prompt: $prompt, objectIds: $objectIds, responseSchema: $responseSchema, channelId: $channelId, conversationId: $conversationId, effort: $effort, ephemeral: $ephemeral, readOnly: $readOnly, attachments: $attachments, interactionId: $interactionId, parentInteractionId: $parentInteractionId) {
           message
           modifiedObjectIds
         }
@@ -5655,7 +5693,8 @@ var GraphQLClient = class {
 			ephemeral: options.ephemeral,
 			readOnly: options.readOnly,
 			attachments: options.attachmentUrls,
-			interactionId: options.interactionId
+			interactionId: options.interactionId,
+			parentInteractionId: options.parentInteractionId
 		})).prompt;
 	}
 	async getAccount() {
@@ -7220,6 +7259,29 @@ function generateEntityId() {
 	for (let i = 0; i < 6; i++) result += ID_CHARS[Math.floor(Math.random() * 62)];
 	return result;
 }
+/** Walk from a leaf interaction up through parentId to root, return in root→leaf order. */
+function walkBranch(interactions, leafId) {
+	const path = [];
+	let currentId = leafId;
+	while (currentId) {
+		const ix = interactions[currentId];
+		if (!ix) break;
+		path.push(ix);
+		currentId = ix.parentId;
+	}
+	return path.reverse();
+}
+/** Find the default leaf: the most recent interaction by timestamp that has no children. */
+function findDefaultLeaf(interactions) {
+	if (!interactions || Array.isArray(interactions)) return void 0;
+	const childSet = /* @__PURE__ */ new Set();
+	for (const ix of Object.values(interactions)) if (ix.parentId) childSet.add(ix.parentId);
+	let best;
+	for (const ix of Object.values(interactions)) if (!childSet.has(ix.id)) {
+		if (!best || ix.timestamp > best.timestamp) best = ix;
+	}
+	return best?.id;
+}
 var OBJECT_COLLECT_TIMEOUT = 3e4;
 /**
 * A channel is a space + channelId pair.
@@ -7260,6 +7322,7 @@ var RoolChannel = class extends EventEmitter {
 	_objectIds;
 	_objectStats;
 	_hasConnected = false;
+	_activeLeaves = /* @__PURE__ */ new Map();
 	_pendingMutations = /* @__PURE__ */ new Map();
 	_objectResolvers = /* @__PURE__ */ new Map();
 	_objectBuffer = /* @__PURE__ */ new Map();
@@ -7350,14 +7413,62 @@ var RoolChannel = class extends EventEmitter {
 		return this._channel?.extensionUrl ?? null;
 	}
 	/**
-	* Get interactions for the current conversation.
+	* Get the active branch of the current conversation as a flat array (root → leaf).
+	* Walks from the active leaf up through parentId pointers.
 	*/
 	getInteractions() {
 		return this._getInteractionsImpl(this._conversationId);
 	}
 	/** @internal */
 	_getInteractionsImpl(conversationId) {
-		return this._channel?.conversations[conversationId]?.interactions ?? [];
+		const interactions = this._channel?.conversations[conversationId]?.interactions;
+		if (!interactions) return [];
+		if (Array.isArray(interactions)) return interactions;
+		const leafId = this._getActiveLeafImpl(conversationId);
+		if (!leafId) return [];
+		return walkBranch(interactions, leafId);
+	}
+	/**
+	* Get the full interaction tree for a conversation as a record.
+	* For clients that need to render branch navigation UI.
+	*/
+	getTree() {
+		return this._getTreeImpl(this._conversationId);
+	}
+	/** @internal */
+	_getTreeImpl(conversationId) {
+		const interactions = this._channel?.conversations[conversationId]?.interactions;
+		if (!interactions || Array.isArray(interactions)) return {};
+		return interactions;
+	}
+	/**
+	* Get the active leaf interaction ID for a conversation.
+	* Returns undefined if the conversation has no interactions.
+	*/
+	get activeLeafId() {
+		return this._getActiveLeafImpl(this._conversationId);
+	}
+	/** @internal */
+	_getActiveLeafImpl(conversationId) {
+		return this._activeLeaves.get(conversationId) ?? findDefaultLeaf(this._channel?.conversations[conversationId]?.interactions);
+	}
+	/**
+	* Set the active leaf for a conversation (switch branches).
+	* Emits a conversationUpdated event so reactive wrappers refresh.
+	*/
+	setActiveLeaf(interactionId) {
+		this._setActiveLeafImpl(interactionId, this._conversationId);
+	}
+	/** @internal */
+	_setActiveLeafImpl(interactionId, conversationId) {
+		const interactions = this._channel?.conversations[conversationId]?.interactions;
+		if (!interactions || Array.isArray(interactions) || !interactions[interactionId]) throw new Error(`Interaction "${interactionId}" not found in conversation "${conversationId}"`);
+		this._activeLeaves.set(conversationId, interactionId);
+		this.emit("conversationUpdated", {
+			conversationId,
+			channelId: this._channelId,
+			source: "local_user"
+		});
 	}
 	/**
 	* Get all conversations in this channel.
@@ -7371,7 +7482,7 @@ var RoolChannel = class extends EventEmitter {
 			systemInstruction: conv.systemInstruction ?? null,
 			createdAt: conv.createdAt,
 			createdBy: conv.createdBy,
-			interactionCount: conv.interactions.length
+			interactionCount: Object.keys(conv.interactions).length
 		}));
 	}
 	/**
@@ -7780,7 +7891,7 @@ var RoolChannel = class extends EventEmitter {
 		if (!this._channel.conversations[conversationId]) this._channel.conversations[conversationId] = {
 			createdAt: Date.now(),
 			createdBy: this._userId,
-			interactions: []
+			interactions: {}
 		};
 	}
 	/**
@@ -7822,14 +7933,17 @@ var RoolChannel = class extends EventEmitter {
 	}
 	/** @internal */
 	async _promptImpl(prompt, options, conversationId) {
-		const { attachments, ...rest } = options ?? {};
+		const { attachments, parentInteractionId: explicitParent, ...rest } = options ?? {};
 		let attachmentUrls;
 		if (attachments?.length) attachmentUrls = await Promise.all(attachments.map((file) => this.mediaClient.upload(this._id, file)));
+		const parentInteractionId = explicitParent !== void 0 ? explicitParent : this._getActiveLeafImpl(conversationId) ?? null;
 		const interactionId = generateEntityId();
+		this._activeLeaves.set(conversationId, interactionId);
 		const result = await this.graphqlClient.prompt(this._id, prompt, this._channelId, conversationId, {
 			...rest,
 			attachmentUrls,
-			interactionId
+			interactionId,
+			parentInteractionId
 		});
 		const objects = [];
 		const missing = [];
@@ -8015,6 +8129,15 @@ var RoolChannel = class extends EventEmitter {
 					if (event.conversation) this._channel.conversations[event.conversationId] = event.conversation;
 					else delete this._channel.conversations[event.conversationId];
 					if (JSON.stringify(prev) === JSON.stringify(event.conversation)) break;
+					if (event.conversation && !Array.isArray(event.conversation.interactions)) {
+						const currentLeaf = this._getActiveLeafImpl(event.conversationId);
+						if (currentLeaf) {
+							for (const ix of Object.values(event.conversation.interactions)) if (ix.parentId === currentLeaf && ix.id !== currentLeaf) {
+								this._activeLeaves.set(event.conversationId, ix.id);
+								break;
+							}
+						}
+					}
 					this.emit("conversationUpdated", {
 						conversationId: event.conversationId,
 						channelId: event.channelId,
@@ -8123,10 +8246,22 @@ var ConversationHandle = class {
 	get conversationId() {
 		return this._conversationId;
 	}
-	/** Get interactions for this conversation. */
+	/** Get the active branch of this conversation as a flat array (root → leaf). */
 	getInteractions() {
 		return this._channel._getInteractionsImpl(this._conversationId);
 	}
+	/** Get the full interaction tree as a record. */
+	getTree() {
+		return this._channel._getTreeImpl(this._conversationId);
+	}
+	/** Get the active leaf interaction ID, or undefined if empty. */
+	get activeLeafId() {
+		return this._channel._getActiveLeafImpl(this._conversationId);
+	}
+	/** Switch to a different branch by setting the active leaf. */
+	setActiveLeaf(interactionId) {
+		this._channel._setActiveLeafImpl(interactionId, this._conversationId);
+	}
 	/** Get the system instruction for this conversation. */
 	getSystemInstruction() {
 		return this._channel._getSystemInstructionImpl(this._conversationId);
@@ -8871,6 +9006,9 @@ var ALLOWED_METHODS = new Set([
 	"alterCollection",
 	"dropCollection",
 	"getInteractions",
+	"getTree",
+	"setActiveLeaf",
+	"getActiveLeafId",
 	"getConversations",
 	"getSystemInstruction",
 	"setSystemInstruction",
@@ -8889,6 +9027,9 @@ var ALLOWED_METHODS = new Set([
 ]);
 var CONVERSATION_METHODS = new Set([
 	"getInteractions",
+	"getTree",
+	"setActiveLeaf",
+	"getActiveLeafId",
 	"getSystemInstruction",
 	"setSystemInstruction",
 	"renameConversation",
@@ -8903,14 +9044,19 @@ var CONVERSATION_METHODS = new Set([
 	"setMetadata"
 ]);
 var CONVERSATION_METHOD_MAP = { "renameConversation": "rename" };
+var GETTER_MAP = { "getActiveLeafId": "activeLeafId" };
 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) => {
@@ -8935,6 +9081,8 @@ var BridgeHost = class {
 			role: this.channel.role,
 			linkAccess: this.channel.linkAccess,
 			userId: this.channel.userId,
+			user: this.user,
+			colorScheme: this._colorScheme,
 			schema: this.channel.getSchema(),
 			metadata: this.channel.getAllMetadata()
 		};
@@ -8969,6 +9117,7 @@ var BridgeHost = class {
 				target = this.channel.conversation(conversationId);
 				methodName = CONVERSATION_METHOD_MAP[method] ?? method;
 			}
+			if (GETTER_MAP[methodName]) methodName = GETTER_MAP[methodName];
 			const fn = target[methodName];
 			let result;
 			if (typeof fn === "function") {
@@ -8989,6 +9138,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, "*");
@@ -9076,6 +9234,7 @@ var DevHostController = class {
 	publishedExtensions = [];
 	installedExtensionIds = [];
 	sidebarCollapsed = false;
+	colorScheme = "light";
 	publishState = "idle";
 	publishMessage = null;
 	publishUrl = null;
@@ -9095,6 +9254,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 [{
@@ -9296,6 +9456,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);
@@ -9307,12 +9473,22 @@ var DevHostController = class {
 		this.client.logout();
 		window.location.reload();
 	}
+	get _bridgeUser() {
+		const cu = this.client.currentUser;
+		return {
+			id: cu.id,
+			name: cu.name,
+			email: cu.email
+		};
+	}
 	_bindBridge(tabId) {
 		const el = this.iframeEls[tabId];
 		const ch = this.channels[tabId];
 		if (el && ch && !this.bridgeHosts[tabId]) this.bridgeHosts[tabId] = createBridgeHost({
 			channel: ch,
-			iframe: el
+			iframe: el,
+			user: this._bridgeUser,
+			colorScheme: this.colorScheme
 		});
 	}
 	_bindAllBridges() {
@@ -9355,6 +9531,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
@@ -9381,7 +9562,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);
@@ -9402,7 +9585,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);
@@ -9709,6 +9892,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(() => {
@@ -9720,6 +9916,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"));
@@ -9729,12 +9926,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();
@@ -15127,11 +15325,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...");
@@ -15142,11 +15336,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);
@@ -15154,6 +15354,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);
@@ -15162,7 +15363,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();
@@ -15179,10 +15380,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);
@@ -15202,6 +15403,9 @@ function HostShell($$anchor, $$props) {
 		get sidebarCollapsed() {
 			return get(sidebarCollapsed);
 		},
+		get colorScheme() {
+			return get(colorScheme);
+		},
 		get publishState() {
 			return get(publishState);
 		},
@@ -15268,14 +15472,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