@rool-dev/extension 0.3.8-dev.b3f8671 → 0.3.9-dev.e980598

package/README.md

@@ -14,10 +14,10 @@ Everything else (Vite config, entry point, HTML, Tailwind CSS) is provided by th
 ## Quick Start
 
 ```bash
-npx rool-extension init my-extension
+npx @rool-dev/cli extension create my-extension
 cd my-extension
 pnpm install
-npx rool-extension dev
+pnpm dev
 ```
 
 This opens a dev host at `/__rool-host/` that loads your extension in a sandboxed iframe, connected to a real Rool Space.
@@ -344,7 +344,7 @@ await thread.rename('Research Thread');
 thread.close();   // Stop listening for updates
 ```
 
-Conversations are auto-created on first interaction — no explicit create step needed. All conversations share one bridge connection. The 50-message cap applies per conversation.
+Conversations are auto-created on first interaction — no explicit create step needed. All conversations share one bridge connection. The 200-interaction cap applies per conversation.
 
 ### Events
 
@@ -428,10 +428,10 @@ const host = createBridgeHost({
 
 | Command | Description |
 |---------|-------------|
-| `rool-extension init [name]` | Scaffold a new extension project |
-| `rool-extension dev` | Start the dev server with host shell |
-| `rool-extension build` | Build the extension |
-| `rool-extension publish` | Build and publish the extension |
+| `rool extension create [name]` | Scaffold a new extension project |
+| `rool extension dev` | Start the dev server with host shell |
+| `rool extension build` | Build the extension |
+| `rool extension publish` | Build and publish the extension |
 
 ## Exported Types
 
@@ -443,6 +443,7 @@ import type {
   ReactiveWatch,
   WatchOptions,
   BridgeUser,
+  ColorScheme,
   RoolObject,
   RoolObjectStat,
   SpaceSchema,

package/dist/cli/build-pipeline.js

@@ -38,7 +38,7 @@ function roolExtensionBuildPlugin(root, tailwindCssPath) {
         },
         load(id) {
             if (id === RESOLVED_CSS)
-                return `@import "${tailwindCssPath}";`;
+                return `@import "${tailwindCssPath}";\n@custom-variant dark (&:where(.dark, .dark *));`;
             if (id !== RESOLVED_ENTRY)
                 return;
             return [

package/dist/cli/dev.js

@@ -79,7 +79,7 @@ function roolExtensionPlugin(root, tailwindCssPath) {
         },
         load(id) {
             if (id === RESOLVED_CSS)
-                return `@import "${tailwindCssPath}";`;
+                return `@import "${tailwindCssPath}";\n@custom-variant dark (&:where(.dark, .dark *));`;
             if (id !== RESOLVED_ENTRY)
                 return;
             return [

package/dist/cli/init.js

@@ -93,7 +93,7 @@ Additional \`.svelte\` and \`.ts\` files can be imported from \`App.svelte\`.
 ## Dev server
 
 \`\`\`
-npx rool-extension dev
+pnpm dev
 \`\`\`
 `;
     writeFileSync(resolve(dir, 'manifest.json'), JSON.stringify(manifest, null, 2) + '\n');

package/dist/dev/DevHostController.d.ts

@@ -11,6 +11,7 @@
  */
 import { RoolClient } from '@rool-dev/sdk';
 import type { RoolSpaceInfo, PublishedExtensionInfo } from '@rool-dev/sdk';
+import type { ColorScheme } from '../protocol.js';
 import type { Manifest, Environment } from '../manifest.js';
 export interface ExtensionTab {
     id: string;
@@ -34,6 +35,7 @@ export declare class DevHostController {
     publishedExtensions: PublishedExtensionInfo[];
     installedExtensionIds: string[];
     sidebarCollapsed: boolean;
+    colorScheme: ColorScheme;
     publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
     publishMessage: string | null;
     publishUrl: string | null;
@@ -68,6 +70,7 @@ export declare class DevHostController {
     publish(): Promise<void>;
     switchEnv(newEnv: Environment): Promise<void>;
     toggleSidebar(): void;
+    toggleColorScheme(): void;
     registerIframe(tabId: string, el: HTMLIFrameElement): void;
     unregisterIframe(tabId: string): void;
     logout(): void;
@@ -82,5 +85,6 @@ export declare class DevHostController {
      */
     private _syncManifest;
     private _getSavedEnv;
+    private _getSavedColorScheme;
 }
 //# sourceMappingURL=DevHostController.d.ts.map

package/dist/dev/DevHostController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DevHostController.d.ts","sourceRoot":"","sources":["../../src/dev/DevHostController.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DevHostController.d.ts","sourceRoot":"","sources":["../../src/dev/DevHostController.ts"],"names":[],"mappings":"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"}

package/dist/dev/DevHostController.js

@@ -53,6 +53,7 @@ export class DevHostController {
     publishedExtensions = [];
     installedExtensionIds = [];
     sidebarCollapsed = false;
+    colorScheme = 'light';
     publishState = 'idle';
     publishMessage = null;
     publishUrl = null;
@@ -76,6 +77,7 @@ export class DevHostController {
         // Restore persisted state
         this.env = this._getSavedEnv();
         this.sidebarCollapsed = storageGet('rool-devhost:collapsed') === 'true';
+        this.colorScheme = this._getSavedColorScheme();
     }
     // ---------------------------------------------------------------------------
     // Derived
@@ -338,6 +340,14 @@ export class DevHostController {
         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();
+    }
     // ---------------------------------------------------------------------------
     // Iframe registration (called by Svelte action)
     // ---------------------------------------------------------------------------
@@ -366,7 +376,7 @@ export class DevHostController {
         const el = this.iframeEls[tabId];
         const ch = this.channels[tabId];
         if (el && ch && !this.bridgeHosts[tabId]) {
-            this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el, user: this._bridgeUser });
+            this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el, user: this._bridgeUser, colorScheme: this.colorScheme });
         }
     }
     _bindAllBridges() {
@@ -430,4 +440,11 @@ export class DevHostController {
             return saved;
         return 'prod';
     }
+    _getSavedColorScheme() {
+        const saved = storageGet('rool-devhost:colorScheme');
+        if (saved === 'light' || saved === 'dark')
+            return saved;
+        // Fall back to OS preference
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
 }

package/dist/dev/HostShell.svelte

@@ -32,6 +32,7 @@
   let publishedExtensions: PublishedExtensionInfo[] = $state([]);
   let installedExtensionIds: string[] = $state([]);
   let tabs: ExtensionTab[] = $state([]);
+  let colorScheme: 'light' | 'dark' = $state('light');
   let publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error' = $state('idle');
   let publishMessage: string | null = $state(null);
   let publishUrl: string | null = $state(null);
@@ -52,6 +53,7 @@
     statusState = controller.statusState;
     placeholderText = controller.placeholderText;
     sidebarCollapsed = controller.sidebarCollapsed;
+    colorScheme = controller.colorScheme;
     env = controller.env;
     publishedExtensions = controller.publishedExtensions;
     installedExtensionIds = controller.installedExtensionIds;
@@ -97,6 +99,7 @@
   {statusText}
   {statusState}
   {sidebarCollapsed}
+  {colorScheme}
   {publishState}
   {publishMessage}
   {publishUrl}

package/dist/dev/HostShell.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HostShell.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/HostShell.svelte.ts"],"names":[],"mappings":"AAkHA,QAAA,MAAM,SAAS,2DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"HostShell.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/HostShell.svelte.ts"],"names":[],"mappings":"AAoHA,QAAA,MAAM,SAAS,2DAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/dev/Sidebar.svelte

@@ -15,6 +15,7 @@
     statusText: string;
     statusState: 'ok' | 'loading' | 'off';
     sidebarCollapsed: boolean;
+    colorScheme: 'light' | 'dark';
     publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
     publishMessage: string | null;
     publishUrl: string | null;
@@ -31,6 +32,7 @@
     statusText,
     statusState,
     sidebarCollapsed,
+    colorScheme,
     publishState,
     publishMessage,
     publishUrl,
@@ -272,13 +274,24 @@
     <!-- Footer -->
     <div class="px-4 py-3 mt-auto flex items-center justify-between">
       <a
-        href="https://docs.rool.dev/app"
+        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"
+        onclick={() => controller.toggleColorScheme()}
+        title={colorScheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
+      >
+        {#if colorScheme === 'light'}
+          <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"/></svg>
+        {:else}
+          <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"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        {/if}
+      </button>
       <button
         class="text-[11px] text-slate-400 hover:text-red-500 transition-colors"
         onclick={() => controller.logout()}

package/dist/dev/Sidebar.svelte.d.ts

@@ -11,6 +11,7 @@ interface Props {
     statusText: string;
     statusState: 'ok' | 'loading' | 'off';
     sidebarCollapsed: boolean;
+    colorScheme: 'light' | 'dark';
     publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
     publishMessage: string | null;
     publishUrl: string | null;

package/dist/dev/Sidebar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/Sidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI1D,UAAU,KAAK;IACb,UAAU,EAAE,iBAAiB,CAAC;IAE9B,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,GAAG,EAAE,WAAW,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACnE,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB;AA8NH,QAAA,MAAM,OAAO,uDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Sidebar.svelte.d.ts","sourceRoot":"","sources":["../../src/dev/Sidebar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI1D,UAAU,KAAK;IACb,UAAU,EAAE,iBAAiB,CAAC;IAE9B,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,GAAG,EAAE,WAAW,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;IACtC,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;IACnE,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;CACvB;AAsOH,QAAA,MAAM,OAAO,uDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/dev/app.css

@@ -1 +1,2 @@
 @import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));

package/dist/dev/host-shell.js

@@ -3213,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
 */
@@ -9003,12 +9049,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) => {
@@ -9034,6 +9082,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()
 		};
@@ -9089,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, "*");
@@ -9176,6 +9234,7 @@ var DevHostController = class {
 	publishedExtensions = [];
 	installedExtensionIds = [];
 	sidebarCollapsed = false;
+	colorScheme = "light";
 	publishState = "idle";
 	publishMessage = null;
 	publishUrl = null;
@@ -9195,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 [{
@@ -9396,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);
@@ -9421,7 +9487,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() {
@@ -9464,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
@@ -9490,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);
@@ -9511,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);
@@ -9818,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(() => {
@@ -9829,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"));
@@ -9838,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();
@@ -15247,6 +15336,7 @@ 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);
@@ -15264,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);
@@ -15312,6 +15403,9 @@ function HostShell($$anchor, $$props) {
 		get sidebarCollapsed() {
 			return get(sidebarCollapsed);
 		},
+		get colorScheme() {
+			return get(colorScheme);
+		},
 		get publishState() {
 			return get(publishState);
 		},