@rool-dev/extension 0.3.8 → 0.3.9-dev.c55b2b2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/README.md +29 -7
  2. package/dist/cli/build-pipeline.js +1 -1
  3. package/dist/cli/dev.js +1 -1
  4. package/dist/cli/init.js +1 -1
  5. package/dist/dev/DevHostController.d.ts +4 -0
  6. package/dist/dev/DevHostController.d.ts.map +1 -1
  7. package/dist/dev/DevHostController.js +18 -1
  8. package/dist/dev/HostShell.svelte +11 -8
  9. package/dist/dev/HostShell.svelte.d.ts +1 -8
  10. package/dist/dev/HostShell.svelte.d.ts.map +1 -1
  11. package/dist/dev/Sidebar.svelte +14 -1
  12. package/dist/dev/Sidebar.svelte.d.ts +1 -0
  13. package/dist/dev/Sidebar.svelte.d.ts.map +1 -1
  14. package/dist/dev/app.css +1 -0
  15. package/dist/dev/host-shell.js +154 -63
  16. package/dist/dev/host-shell.js.map +1 -1
  17. package/dist/host.d.ts +6 -1
  18. package/dist/host.d.ts.map +1 -1
  19. package/dist/host.js +11 -0
  20. package/dist/index.d.ts +1 -1
  21. package/dist/index.d.ts.map +1 -1
  22. package/dist/protocol.d.ts +3 -0
  23. package/dist/protocol.d.ts.map +1 -1
  24. package/dist/reactive.svelte.d.ts +2 -1
  25. package/dist/reactive.svelte.d.ts.map +1 -1
  26. package/dist/reactive.svelte.js +15 -1
  27. package/package.json +2 -2
package/README.md CHANGED
@@ -14,10 +14,10 @@ Everything else (Vite config, entry point, HTML, Tailwind CSS) is provided by th
14
14
  ## Quick Start
15
15
 
16
16
  ```bash
17
- npx rool-extension init my-extension
17
+ npx @rool-dev/cli extension create my-extension
18
18
  cd my-extension
19
19
  pnpm install
20
- npx rool-extension dev
20
+ pnpm dev
21
21
  ```
22
22
 
23
23
  This opens a dev host at `/__rool-host/` that loads your extension in a sandboxed iframe, connected to a real Rool Space.
@@ -158,6 +158,26 @@ A complete extension that lets users add tasks, mark them done, and ask the AI t
158
158
 
159
159
  This example covers the main patterns you'll use in most extensions: `watch` for a live query, `createObject` for direct mutations, `updateObject` for edits, and `prompt` to let the AI create or modify objects on the user's behalf.
160
160
 
161
+ ### Dark Mode
162
+
163
+ Extensions automatically receive the host's color scheme. The `dark` class is toggled on the extension's `<html>` element, so Tailwind's `dark:` variants work out of the box — no configuration needed.
164
+
165
+ Use the `neutral` color scale for dark mode backgrounds and borders to match the host app:
166
+
167
+ | Surface | Light | Dark |
168
+ |---------|-------|------|
169
+ | Page background | `bg-slate-50` | `dark:bg-neutral-950` |
170
+ | Panels / cards | `bg-white` | `dark:bg-neutral-900` |
171
+ | Inset surfaces | `bg-slate-50` | `dark:bg-neutral-800` |
172
+ | Borders | `border-slate-200` | `dark:border-neutral-700` |
173
+ | Primary text | `text-slate-800` | `dark:text-neutral-100` |
174
+ | Secondary text | `text-slate-500` | `dark:text-neutral-400` |
175
+ | Inputs | `bg-slate-50` | `dark:bg-neutral-800` |
176
+
177
+ Accent colors (teal, violet, emerald, etc.) should shift to the `400` weight in dark mode for better contrast against dark backgrounds — e.g. `text-emerald-600 dark:text-emerald-400`.
178
+
179
+ The reactive `channel.colorScheme` property (`'light'` or `'dark'`) is available if you need to branch in code rather than CSS.
180
+
161
181
  ## ReactiveChannel
162
182
 
163
183
  The channel is the extension's interface to the host Space — objects, schema, AI, metadata, undo/redo, and real-time events.
@@ -172,6 +192,7 @@ These are Svelte 5 `$state` properties — use them directly in templates or `$e
172
192
  | `objectIds` | `string[]` | All object IDs in the space (auto-updates on create/delete) |
173
193
  | `collections` | `string[]` | Collection names from the schema (auto-updates) |
174
194
  | `conversations` | `ConversationInfo[]` | Conversations in this channel (auto-updates on create/delete/rename) |
195
+ | `colorScheme` | `ColorScheme` | Host's color scheme: `'light'` or `'dark'` (auto-updates on toggle) |
175
196
 
176
197
  ### Properties
177
198
 
@@ -344,7 +365,7 @@ await thread.rename('Research Thread');
344
365
  thread.close(); // Stop listening for updates
345
366
  ```
346
367
 
347
- 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.
368
+ 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.
348
369
 
349
370
  ### Events
350
371
 
@@ -428,10 +449,10 @@ const host = createBridgeHost({
428
449
 
429
450
  | Command | Description |
430
451
  |---------|-------------|
431
- | `rool-extension init [name]` | Scaffold a new extension project |
432
- | `rool-extension dev` | Start the dev server with host shell |
433
- | `rool-extension build` | Build the extension |
434
- | `rool-extension publish` | Build and publish the extension |
452
+ | `rool extension create [name]` | Scaffold a new extension project |
453
+ | `rool extension dev` | Start the dev server with host shell |
454
+ | `rool extension build` | Build the extension |
455
+ | `rool extension publish` | Build and publish the extension |
435
456
 
436
457
  ## Exported Types
437
458
 
@@ -443,6 +464,7 @@ import type {
443
464
  ReactiveWatch,
444
465
  WatchOptions,
445
466
  BridgeUser,
467
+ ColorScheme,
446
468
  RoolObject,
447
469
  RoolObjectStat,
448
470
  SpaceSchema,
package/dist/cli/build-pipeline.js CHANGED
@@ -38,7 +38,7 @@ function roolExtensionBuildPlugin(root, tailwindCssPath) {
38
38
  },
39
39
  load(id) {
40
40
  if (id === RESOLVED_CSS)
41
- return `@import "${tailwindCssPath}";`;
41
+ return `@import "${tailwindCssPath}";\n@custom-variant dark (&:where(.dark, .dark *));`;
42
42
  if (id !== RESOLVED_ENTRY)
43
43
  return;
44
44
  return [
package/dist/cli/dev.js CHANGED
@@ -79,7 +79,7 @@ function roolExtensionPlugin(root, tailwindCssPath) {
79
79
  },
80
80
  load(id) {
81
81
  if (id === RESOLVED_CSS)
82
- return `@import "${tailwindCssPath}";`;
82
+ return `@import "${tailwindCssPath}";\n@custom-variant dark (&:where(.dark, .dark *));`;
83
83
  if (id !== RESOLVED_ENTRY)
84
84
  return;
85
85
  return [
package/dist/cli/init.js CHANGED
@@ -93,7 +93,7 @@ Additional \`.svelte\` and \`.ts\` files can be imported from \`App.svelte\`.
93
93
  ## Dev server
94
94
 
95
95
  \`\`\`
96
- npx rool-extension dev
96
+ pnpm dev
97
97
  \`\`\`
98
98
  `;
99
99
  writeFileSync(resolve(dir, 'manifest.json'), JSON.stringify(manifest, null, 2) + '\n');
package/dist/dev/DevHostController.d.ts CHANGED
@@ -11,6 +11,7 @@
11
11
  */
12
12
  import { RoolClient } from '@rool-dev/sdk';
13
13
  import type { RoolSpaceInfo, PublishedExtensionInfo } from '@rool-dev/sdk';
14
+ import type { ColorScheme } from '../protocol.js';
14
15
  import type { Manifest, Environment } from '../manifest.js';
15
16
  export interface ExtensionTab {
16
17
  id: string;
@@ -34,6 +35,7 @@ export declare class DevHostController {
34
35
  publishedExtensions: PublishedExtensionInfo[];
35
36
  installedExtensionIds: string[];
36
37
  sidebarCollapsed: boolean;
38
+ colorScheme: ColorScheme;
37
39
  publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
38
40
  publishMessage: string | null;
39
41
  publishUrl: string | null;
@@ -68,6 +70,7 @@ export declare class DevHostController {
68
70
  publish(): Promise<void>;
69
71
  switchEnv(newEnv: Environment): Promise<void>;
70
72
  toggleSidebar(): void;
73
+ toggleColorScheme(): void;
71
74
  registerIframe(tabId: string, el: HTMLIFrameElement): void;
72
75
  unregisterIframe(tabId: string): void;
73
76
  logout(): void;
@@ -82,5 +85,6 @@ export declare class DevHostController {
82
85
  */
83
86
  private _syncManifest;
84
87
  private _getSavedEnv;
88
+ private _getSavedColorScheme;
85
89
  }
86
90
  //# sourceMappingURL=DevHostController.d.ts.map
package/dist/dev/DevHostController.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DevHostController.d.ts","sourceRoot":"","sources":["../../src/dev/DevHostController.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DevHostController.d.ts","sourceRoot":"","sources":["../../src/dev/DevHostController.ts"],"names":[],"mappings":"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"}
package/dist/dev/DevHostController.js CHANGED
@@ -53,6 +53,7 @@ export class DevHostController {
53
53
  publishedExtensions = [];
54
54
  installedExtensionIds = [];
55
55
  sidebarCollapsed = false;
56
+ colorScheme = 'light';
56
57
  publishState = 'idle';
57
58
  publishMessage = null;
58
59
  publishUrl = null;
@@ -76,6 +77,7 @@ export class DevHostController {
76
77
  // Restore persisted state
77
78
  this.env = this._getSavedEnv();
78
79
  this.sidebarCollapsed = storageGet('rool-devhost:collapsed') === 'true';
80
+ this.colorScheme = this._getSavedColorScheme();
79
81
  }
80
82
  // ---------------------------------------------------------------------------
81
83
  // Derived
@@ -338,6 +340,14 @@ export class DevHostController {
338
340
  storageSet('rool-devhost:collapsed', String(this.sidebarCollapsed));
339
341
  this._onChange();
340
342
  }
343
+ toggleColorScheme() {
344
+ this.colorScheme = this.colorScheme === 'light' ? 'dark' : 'light';
345
+ storageSet('rool-devhost:colorScheme', this.colorScheme);
346
+ for (const host of Object.values(this.bridgeHosts)) {
347
+ host.setColorScheme(this.colorScheme);
348
+ }
349
+ this._onChange();
350
+ }
341
351
  // ---------------------------------------------------------------------------
342
352
  // Iframe registration (called by Svelte action)
343
353
  // ---------------------------------------------------------------------------
@@ -366,7 +376,7 @@ export class DevHostController {
366
376
  const el = this.iframeEls[tabId];
367
377
  const ch = this.channels[tabId];
368
378
  if (el && ch && !this.bridgeHosts[tabId]) {
369
- this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el, user: this._bridgeUser });
379
+ this.bridgeHosts[tabId] = createBridgeHost({ channel: ch, iframe: el, user: this._bridgeUser, colorScheme: this.colorScheme });
370
380
  }
371
381
  }
372
382
  _bindAllBridges() {
@@ -430,4 +440,11 @@ export class DevHostController {
430
440
  return saved;
431
441
  return 'prod';
432
442
  }
443
+ _getSavedColorScheme() {
444
+ const saved = storageGet('rool-devhost:colorScheme');
445
+ if (saved === 'light' || saved === 'dark')
446
+ return saved;
447
+ // Fall back to OS preference
448
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
449
+ }
433
450
  }
package/dist/dev/HostShell.svelte CHANGED
@@ -1,5 +1,5 @@
1
1
  <script lang="ts">
2
- import { onMount, tick } from 'svelte';
2
+ import { getContext, onMount, tick } from 'svelte';
3
3
  import { DevHostController } from './DevHostController.js';
4
4
  import type { ExtensionTab } from './DevHostController.js';
5
5
  import type { Manifest } from '../manifest.js';
@@ -8,15 +8,15 @@
8
8
  import Sidebar from './Sidebar.svelte';
9
9
  import AppGrid from './AppGrid.svelte';
10
10
 
11
- // Props injected from the mount entry
12
- interface Props {
11
+ // Static config injected via mount() context — not reactive, never changes
12
+ interface HostConfig {
13
13
  channelId: string;
14
14
  extensionUrl: string;
15
15
  manifest: Manifest | null;
16
16
  manifestError: string | null;
17
17
  }
18
18
 
19
- const props: Props = $props();
19
+ const { channelId, extensionUrl, manifest, manifestError } = getContext<HostConfig>('hostConfig');
20
20
 
21
21
  // ---------------------------------------------------------------------------
22
22
  // Controller + reactive state mirror
@@ -32,6 +32,7 @@
32
32
  let publishedExtensions: PublishedExtensionInfo[] = $state([]);
33
33
  let installedExtensionIds: string[] = $state([]);
34
34
  let tabs: ExtensionTab[] = $state([]);
35
+ let colorScheme: 'light' | 'dark' = $state('light');
35
36
  let publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error' = $state('idle');
36
37
  let publishMessage: string | null = $state(null);
37
38
  let publishUrl: string | null = $state(null);
@@ -40,7 +41,7 @@
40
41
  let dropdownOpen: boolean = $state(false);
41
42
 
42
43
  const controller = new DevHostController(
43
- props,
44
+ { channelId, extensionUrl, manifest, manifestError },
44
45
  syncState,
45
46
  tick,
46
47
  );
@@ -52,6 +53,7 @@
52
53
  statusState = controller.statusState;
53
54
  placeholderText = controller.placeholderText;
54
55
  sidebarCollapsed = controller.sidebarCollapsed;
56
+ colorScheme = controller.colorScheme;
55
57
  env = controller.env;
56
58
  publishedExtensions = controller.publishedExtensions;
57
59
  installedExtensionIds = controller.installedExtensionIds;
@@ -63,7 +65,7 @@
63
65
 
64
66
  // Derived: published apps not yet installed (excluding the local dev app)
65
67
  let uninstalledExtensions = $derived(
66
- publishedExtensions.filter((ext) => ext.extensionId !== props.channelId && !installedExtensionIds.includes(ext.extensionId)),
68
+ publishedExtensions.filter((ext) => ext.extensionId !== channelId && !installedExtensionIds.includes(ext.extensionId)),
67
69
  );
68
70
 
69
71
  // Initial sync
@@ -89,14 +91,15 @@
89
91
  <!-- Sidebar -->
90
92
  <Sidebar
91
93
  {controller}
92
- manifest={props.manifest}
93
- manifestError={props.manifestError}
94
+ {manifest}
95
+ {manifestError}
94
96
  {spaces}
95
97
  {currentSpaceId}
96
98
  {env}
97
99
  {statusText}
98
100
  {statusState}
99
101
  {sidebarCollapsed}
102
+ {colorScheme}
100
103
  {publishState}
101
104
  {publishMessage}
102
105
  {publishUrl}
package/dist/dev/HostShell.svelte.d.ts CHANGED
@@ -1,11 +1,4 @@
1
- import type { Manifest } from '../manifest.js';
2
- interface Props {
3
- channelId: string;
4
- extensionUrl: string;
5
- manifest: Manifest | null;
6
- manifestError: string | null;
7
- }
8
- declare const HostShell: import("svelte").Component<Props, {}, "">;
1
+ declare const HostShell: import("svelte").Component<Record<string, never>, {}, "">;
9
2
  type HostShell = ReturnType<typeof HostShell>;
10
3
  export default HostShell;
11
4
  //# sourceMappingURL=HostShell.svelte.d.ts.map
package/dist/dev/HostShell.svelte.d.ts.map CHANGED
@@ -1 +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"}
1
+ {"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 CHANGED
@@ -15,6 +15,7 @@
15
15
  statusText: string;
16
16
  statusState: 'ok' | 'loading' | 'off';
17
17
  sidebarCollapsed: boolean;
18
+ colorScheme: 'light' | 'dark';
18
19
  publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
19
20
  publishMessage: string | null;
20
21
  publishUrl: string | null;
@@ -31,6 +32,7 @@
31
32
  statusText,
32
33
  statusState,
33
34
  sidebarCollapsed,
35
+ colorScheme,
34
36
  publishState,
35
37
  publishMessage,
36
38
  publishUrl,
@@ -272,13 +274,24 @@
272
274
  <!-- Footer -->
273
275
  <div class="px-4 py-3 mt-auto flex items-center justify-between">
274
276
  <a
275
- href="https://docs.rool.dev/app"
277
+ href="https://docs.rool.dev/extension"
276
278
  target="_blank"
277
279
  rel="noopener noreferrer"
278
280
  class="text-[11px] text-slate-400 hover:text-indigo-500 transition-colors"
279
281
  >
280
282
  Documentation
281
283
  </a>
284
+ <button
285
+ class="p-1 text-slate-400 hover:text-indigo-500 transition-colors"
286
+ onclick={() => controller.toggleColorScheme()}
287
+ title={colorScheme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'}
288
+ >
289
+ {#if colorScheme === 'light'}
290
+ <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>
291
+ {:else}
292
+ <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>
293
+ {/if}
294
+ </button>
282
295
  <button
283
296
  class="text-[11px] text-slate-400 hover:text-red-500 transition-colors"
284
297
  onclick={() => controller.logout()}
package/dist/dev/Sidebar.svelte.d.ts CHANGED
@@ -11,6 +11,7 @@ interface Props {
11
11
  statusText: string;
12
12
  statusState: 'ok' | 'loading' | 'off';
13
13
  sidebarCollapsed: boolean;
14
+ colorScheme: 'light' | 'dark';
14
15
  publishState: 'idle' | 'building' | 'uploading' | 'done' | 'error';
15
16
  publishMessage: string | null;
16
17
  publishUrl: string | null;
package/dist/dev/Sidebar.svelte.d.ts.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1 +1,2 @@
1
1
  @import "tailwindcss";
2
+ @custom-variant dark (&:where(.dark, .dark *));