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

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.
@@ -183,6 +183,7 @@ These are Svelte 5 `$state` properties — use them directly in templates or `$e
 | `role` | `RoolUserRole` | User's role (`owner`, `admin`, `editor`, `viewer`) |
 | `linkAccess` | `LinkAccess` | URL sharing level |
 | `userId` | `string` | Current user's ID |
+| `user` | `BridgeUser` | Current user info (`{ id, name, email }`) |
 | `isReadOnly` | `boolean` | True if viewer role |
 
 ### Object Operations
@@ -343,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
 
@@ -409,18 +410,28 @@ Extensions run in a sandboxed iframe (`allow-scripts allow-same-origin`). The ho
 
 The bridge protocol:
 1. Extension sends `rool:ready`
-2. Host responds with `rool:init` (channel metadata, schema, space info)
+2. Host responds with `rool:init` (channel metadata, schema, space info, user identity)
 3. Extension calls channel methods → `rool:request` → host executes → `rool:response`
 4. Host pushes real-time events → `rool:event` → extension updates reactive state
 
+When creating a bridge host, pass `user` so the extension can display the current user's name:
+
+```typescript
+const host = createBridgeHost({
+  channel,
+  iframe,
+  user: { id: currentUser.id, name: currentUser.name, email: currentUser.email },
+});
+```
+
 ## CLI Commands
 
 | 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
 
@@ -431,6 +442,8 @@ import type {
   ReactiveObject,
   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,9 +70,11 @@ 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;
+    private get _bridgeUser();
     private _bindBridge;
     private _bindAllBridges;
     private _destroyTab;
@@ -81,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":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,aAAa,EAAe,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAExF,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAO5D,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAC;AAqBnD,qBAAa,iBAAiB;IAE5B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IACnC,QAAQ,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAGtC,MAAM,EAAG,UAAU,CAAC;IAGpB,MAAM,EAAE,aAAa,EAAE,CAAM;IAC7B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,UAAU,EAAE,MAAM,CAAqB;IACvC,WAAW,EAAE,WAAW,CAAS;IACjC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAuB;IACrD,GAAG,EAAE,WAAW,CAAC;IACjB,mBAAmB,EAAE,sBAAsB,EAAE,CAAM;IACnD,qBAAqB,EAAE,MAAM,EAAE,CAAM;IACrC,gBAAgB,EAAE,OAAO,CAAS;IAClC,YAAY,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,CAAU;IAC5E,cAAc,EAAE,MAAM,GAAG,IAAI,CAAQ;IACrC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,OAAO,CAAC,QAAQ,CAAmC;IACnD,OAAO,CAAC,SAAS,CAAyC;IAC1D,OAAO,CAAC,WAAW,CAAkC;IAGrD,OAAO,CAAC,SAAS,CAAa;IAC9B,OAAO,CAAC,KAAK,CAAsB;IAGnC,OAAO,CAAC,SAAS,CAAS;gBAGxB,OAAO,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;QAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;KAC9B,EACD,QAAQ,EAAE,MAAM,IAAI,EACpB,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC;IAoB3B,IAAI,IAAI,IAAI,YAAY,EAAE,CAoBzB;IAMK,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IA+DrB,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA0DjD;;;;;;OAMG;IACG,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAwB1D;;;OAGG;IACH,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAiBpC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAkExB,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAiBnD,aAAa,IAAI,IAAI;IAUrB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,iBAAiB,GAAG,IAAI;IAK1D,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAQrC,MAAM,IAAI,IAAI;IASd,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,6BAA6B;IAYrC;;;OAGG;YACW,aAAa;IA4B3B,OAAO,CAAC,YAAY;CAKrB"}
+{"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)
     // ---------------------------------------------------------------------------
@@ -358,11 +368,15 @@ export class DevHostController {
     // ---------------------------------------------------------------------------
     // Private helpers
     // ---------------------------------------------------------------------------
+    get _bridgeUser() {
+        const cu = this.client.currentUser; // Always available after boot() authenticates
+        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 });
+            this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el, user: this._bridgeUser, colorScheme: this.colorScheme });
         }
     }
     _bindAllBridges() {
@@ -426,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

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
+  import { getContext, onMount, tick } from 'svelte';
   import { DevHostController } from './DevHostController.js';
   import type { ExtensionTab } from './DevHostController.js';
   import type { Manifest } from '../manifest.js';
@@ -8,15 +8,15 @@
   import Sidebar from './Sidebar.svelte';
   import AppGrid from './AppGrid.svelte';
 
-  // Props injected from the mount entry
-  interface Props {
+  // Static config injected via mount() context — not reactive, never changes
+  interface HostConfig {
     channelId: string;
     extensionUrl: string;
     manifest: Manifest | null;
     manifestError: string | null;
   }
 
-  const props: Props = $props();
+  const { channelId, extensionUrl, manifest, manifestError } = getContext<HostConfig>('hostConfig');
 
   // ---------------------------------------------------------------------------
   // Controller + reactive state mirror
@@ -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);
@@ -40,7 +41,7 @@
   let dropdownOpen: boolean = $state(false);
 
   const controller = new DevHostController(
-    props,
+    { channelId, extensionUrl, manifest, manifestError },
     syncState,
     tick,
   );
@@ -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;
@@ -63,7 +65,7 @@
 
   // Derived: published apps not yet installed (excluding the local dev app)
   let uninstalledExtensions = $derived(
-    publishedExtensions.filter((ext) => ext.extensionId !== props.channelId && !installedExtensionIds.includes(ext.extensionId)),
+    publishedExtensions.filter((ext) => ext.extensionId !== channelId && !installedExtensionIds.includes(ext.extensionId)),
   );
 
   // Initial sync
@@ -89,14 +91,15 @@
 <!-- Sidebar -->
 <Sidebar
   {controller}
-  manifest={props.manifest}
-  manifestError={props.manifestError}
+  {manifest}
+  {manifestError}
   {spaces}
   {currentSpaceId}
   {env}
   {statusText}
   {statusState}
   {sidebarCollapsed}
+  {colorScheme}
   {publishState}
   {publishMessage}
   {publishUrl}

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

@@ -1,11 +1,4 @@
-import type { Manifest } from '../manifest.js';
-interface Props {
-    channelId: string;
-    extensionUrl: string;
-    manifest: Manifest | null;
-    manifestError: string | null;
-}
-declare const HostShell: import("svelte").Component<Props, {}, "">;
+declare const HostShell: import("svelte").Component<Record<string, never>, {}, "">;
 type HostShell = ReturnType<typeof HostShell>;
 export default HostShell;
 //# sourceMappingURL=HostShell.svelte.d.ts.map

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":"AAMA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ7C,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AAgGH,QAAA,MAAM,SAAS,2CAAwC,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 *));