npm - @rozenite/controls-plugin - Versions diffs - 1.13.0 → 2.0.0 - Mend

@rozenite/controls-plugin 1.13.0 → 2.0.0

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 (17) hide show

package/CHANGELOG.md +15 -0
package/dist/devtools/assets/panel-DOPs3JU-.css +1 -0
package/dist/devtools/assets/panel-bqV0H3UX.js +18 -0
package/dist/devtools/panel.html +2 -2
package/dist/react-native/index.d.ts +2 -2
package/dist/rozenite.json +1 -1
package/package.json +12 -15
package/sdk.ts +1 -4
package/src/__tests__/serialization.test.ts +10 -4
package/src/shared/agent-tools.ts +1 -4
package/src/shared/serialization.ts +2 -2
package/src/ui/panel.tsx +150 -99
package/dist/devtools/assets/panel-B5zz0XK3.css +0 -1
package/dist/devtools/assets/panel-BoQwJa2M.js +0 -17
package/postcss.config.js +0 -6
package/src/ui/globals.css +0 -86
package/tailwind.config.ts +0 -53

package/dist/devtools/panel.html CHANGED Viewed

@@ -22,8 +22,8 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="../devtools/assets/panel-BoQwJa2M.js"></script>
-    <link rel="stylesheet" crossorigin href="../devtools/assets/panel-B5zz0XK3.css">
+    <script type="module" crossorigin src="../devtools/assets/panel-bqV0H3UX.js"></script>
+    <link rel="stylesheet" crossorigin href="../devtools/assets/panel-DOPs3JU-.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/react-native/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { RozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import { RozeniteDevToolsRequestClient } from '@rozenite/plugin-bridge';
 export declare type ControlsButtonItem = {
     id: string;
@@ -133,6 +133,6 @@ export declare type RozeniteControlsPluginOptionsUpdater = (previousOptions: Roz
 export declare let useRozeniteControlsPlugin: typeof useRozeniteControlsPlugin_2;
-declare const useRozeniteControlsPlugin_2: (optionsInput: RozeniteControlsPluginOptionsInput) => RozeniteDevToolsClient<ControlsEventMap> | null;
+declare const useRozeniteControlsPlugin_2: (optionsInput: RozeniteControlsPluginOptionsInput) => RozeniteDevToolsRequestClient<ControlsEventMap> | null;
 export { }

package/dist/rozenite.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"name":"@rozenite/controls-plugin","version":"1.13.0","description":"A Rozenite plugin for exposing app-defined controls directly in React Native DevTools.","panels":[{"name":"Controls","source":"/devtools/panel.html"}]}
1	+ {"name":"@rozenite/controls-plugin","version":"2.0.0","description":"A Rozenite plugin for exposing app-defined controls directly in React Native DevTools.","panels":[{"name":"Controls","source":"/devtools/panel.html"}]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/controls-plugin",
-  "version": "1.13.0",
+  "version": "2.0.0",
   "description": "A Rozenite plugin for exposing app-defined controls directly in React Native DevTools.",
   "type": "module",
   "main": "./dist/react-native/index.cjs",
@@ -15,25 +15,22 @@
     "url": "https://github.com/callstackincubator/rozenite.git"
   },
   "dependencies": {
-    "@rozenite/agent-shared": "1.13.0",
-    "@rozenite/agent-bridge": "1.13.0",
-    "@rozenite/plugin-bridge": "1.13.0"
+    "@rozenite/agent-shared": "2.0.0",
+    "@rozenite/agent-bridge": "2.0.0",
+    "@rozenite/plugin-bridge": "2.0.0",
+    "@rozenite/ui": "2.0.0"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.1.7",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "react-native": "0.83.1",
+    "@types/react": "~19.2.3",
+    "@types/react-dom": "~19.2.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "react-native": "0.86.0",
     "react-native-web": "^0.21.2",
-    "tailwindcss": "^3.4.17",
-    "tailwindcss-animate": "^1.0.7",
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
-    "@rozenite/vite-plugin": "1.13.0",
-    "rozenite": "1.13.0"
+    "@rozenite/vite-plugin": "2.0.0",
+    "rozenite": "2.0.0"
   },
   "peerDependencies": {
     "react": "*",

package/sdk.ts CHANGED Viewed

@@ -4,10 +4,7 @@ import {
   controlsToolDefinitions,
 } from './src/shared/agent-tools.js';
-export {
-  CONTROLS_AGENT_PLUGIN_ID,
-  controlsToolDefinitions,
-};
+export { CONTROLS_AGENT_PLUGIN_ID, controlsToolDefinitions };
 export const controlsTools = defineAgentToolDescriptors(
   CONTROLS_AGENT_PLUGIN_ID,

package/src/__tests__/serialization.test.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import { describe, expect, it, vi } from 'vitest';
-import { buildActionRegistry, getActionRegistryKey, serializeSections } from '../shared/serialization';
+import {
+  buildActionRegistry,
+  getActionRegistryKey,
+  serializeSections,
+} from '../shared/serialization';
 import { createSection } from '../shared/types';
 describe('controls serialization', () => {
@@ -167,12 +171,14 @@ describe('controls serialization', () => {
     const registry = buildActionRegistry(sections);
     const toggleEntry = registry.get(getActionRegistryKey('controls', 'flag'));
-    const buttonEntry = registry.get(getActionRegistryKey('controls', 'refresh'));
+    const buttonEntry = registry.get(
+      getActionRegistryKey('controls', 'refresh'),
+    );
     const selectEntry = registry.get(
-      getActionRegistryKey('controls', 'environment')
+      getActionRegistryKey('controls', 'environment'),
     );
     const inputEntry = registry.get(
-      getActionRegistryKey('controls', 'release-label')
+      getActionRegistryKey('controls', 'release-label'),
     );
     expect(toggleEntry?.type).toBe('toggle');

package/src/shared/agent-tools.ts CHANGED Viewed

@@ -2,10 +2,7 @@ import {
   defineAgentToolContract,
   type AgentToolContract,
 } from '@rozenite/agent-shared';
-import type {
-  ControlsItem,
-  ControlsItemSnapshot,
-} from './types';
+import type { ControlsItem, ControlsItemSnapshot } from './types';
 export const CONTROLS_AGENT_PLUGIN_ID = '@rozenite/controls-plugin';

package/src/shared/serialization.ts CHANGED Viewed

@@ -34,7 +34,7 @@ export type ActionRegistryEntry =
 const validateValue = <TValue>(
   validate: ControlsMutableItemBase<TValue>['validate'],
-  value: TValue
+  value: TValue,
 ): ControlsValidationResult => {
   if (!validate) {
     return { valid: true };
@@ -95,7 +95,7 @@ const toSnapshotItem = (item: ControlsItem): ControlsItemSnapshot => {
 };
 export const serializeSections = (
-  sections: ControlsSection[]
+  sections: ControlsSection[],
 ): ControlsSectionSnapshot[] =>
   sections.map((section) => ({
     id: section.id,

package/src/ui/panel.tsx CHANGED Viewed

@@ -1,4 +1,14 @@
 import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';
+import {
+  Button,
+  EmptyState,
+  Input,
+  PluginShell,
+  Select,
+  Sidebar,
+  Split,
+  Switch,
+} from '@rozenite/ui';
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type {
@@ -6,15 +16,19 @@ import type {
   ControlsSnapshotEvent,
   ControlsUpdateResultEvent,
 } from '../shared/messaging';
-import type { ControlsItemSnapshot, ControlsSectionSnapshot } from '../shared/types';
-import './globals.css';
+import type {
+  ControlsItemSnapshot,
+  ControlsSectionSnapshot,
+} from '../shared/types';
+import '@rozenite/ui/styles.css';
 type ItemUiState = {
   pending: boolean;
   message?: string;
 };
-const getItemKey = (sectionId: string, itemId: string) => `${sectionId}:${itemId}`;
+const getItemKey = (sectionId: string, itemId: string) =>
+  `${sectionId}:${itemId}`;
 const createRequestId = () =>
   `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
@@ -32,12 +46,12 @@ const RowShell = ({
 }) => (
   <div className="flex items-start justify-between gap-4 py-3">
     <div className="min-w-0">
-      <div className="text-sm font-medium text-gray-100">{title}</div>
+      <div className="text-sm font-medium text-foreground">{title}</div>
       {description ? (
-        <div className="mt-1 text-xs text-gray-400">{description}</div>
+        <div className="mt-1 text-xs text-muted-foreground">{description}</div>
       ) : null}
       {errorMessage ? (
-        <div className="mt-1 text-xs text-red-400">{errorMessage}</div>
+        <div className="mt-1 text-xs text-destructive">{errorMessage}</div>
       ) : null}
     </div>
     {children}
@@ -61,16 +75,12 @@ const ToggleRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <label className="relative inline-flex cursor-pointer items-center">
-        <input
-          type="checkbox"
-          className="peer sr-only"
-          checked={item.value}
-          disabled={item.disabled || uiState?.pending}
-          onChange={(event) => onToggle(sectionId, item.id, event.target.checked)}
-        />
-        <div className="h-6 w-11 rounded-full bg-gray-700 transition peer-checked:bg-violet-500 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-5" />
-      </label>
+      <Switch
+        aria-label={item.title}
+        checked={item.value}
+        disabled={item.disabled || uiState?.pending}
+        onCheckedChange={(checked) => onToggle(sectionId, item.id, checked)}
+      />
     </RowShell>
   );
 };
@@ -92,13 +102,14 @@ const ButtonRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <button
-        className="rounded-md border border-violet-500/60 bg-violet-500/10 px-3 py-1.5 text-xs font-semibold text-violet-100 transition hover:bg-violet-500/20 disabled:cursor-not-allowed disabled:border-gray-700 disabled:bg-gray-800 disabled:text-gray-500"
+      <Button
+        size="compact"
+        variant="outline"
         disabled={item.disabled || uiState?.pending}
         onClick={() => onPress(sectionId, item.id)}
       >
-        {uiState?.pending ? 'Running...' : item.actionLabel ?? 'Run'}
-      </button>
+        {uiState?.pending ? 'Running...' : (item.actionLabel ?? 'Run')}
+      </Button>
     </RowShell>
   );
 };
@@ -120,18 +131,26 @@ const SelectRow = ({
       description={item.description}
       errorMessage={uiState?.message}
     >
-      <select
-        className="min-w-[160px] rounded-md border border-gray-700 bg-gray-950 px-3 py-2 text-xs text-gray-200 outline-none transition focus:border-violet-500 disabled:cursor-not-allowed disabled:opacity-50"
+      <Select
         value={item.value}
         disabled={item.disabled || uiState?.pending}
-        onChange={(event) => onSelect(sectionId, item.id, event.target.value)}
+        onValueChange={(value) => {
+          if (value !== null) {
+            onSelect(sectionId, item.id, value);
+          }
+        }}
       >
-        {item.options.map((option) => (
-          <option key={option.value} value={option.value}>
-            {option.label}
-          </option>
-        ))}
-      </select>
+        <Select.Trigger className="w-40">
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {item.options.map((option) => (
+            <Select.Item key={option.value} value={option.value}>
+              {option.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select>
     </RowShell>
   );
 };
@@ -143,7 +162,7 @@ const TextRow = ({
 }) => {
   return (
     <RowShell title={item.title} description={item.description}>
-      <div className="max-w-[50%] rounded-md bg-gray-950/80 px-3 py-1.5 text-right text-xs text-gray-300">
+      <div className="max-w-[50%] rounded-md bg-muted px-3 py-1.5 text-right text-xs text-muted-foreground">
         {item.value}
       </div>
     </RowShell>
@@ -174,8 +193,8 @@ const InputRow = ({
       errorMessage={uiState?.message}
     >
       <div className="flex min-w-[240px] items-center gap-2">
-        <input
-          className="flex-1 rounded-md border border-gray-700 bg-gray-950 px-3 py-2 text-xs text-gray-200 outline-none transition focus:border-violet-500 disabled:cursor-not-allowed disabled:opacity-50"
+        <Input
+          className="flex-1"
           type="text"
           value={draftValue}
           placeholder={item.placeholder}
@@ -184,13 +203,14 @@ const InputRow = ({
             onDraftChange(sectionId, item.id, event.target.value)
           }
         />
-        <button
-          className="rounded-md border border-violet-500/60 bg-violet-500/10 px-3 py-2 text-xs font-semibold text-violet-100 transition hover:bg-violet-500/20 disabled:cursor-not-allowed disabled:border-gray-700 disabled:bg-gray-800 disabled:text-gray-500"
+        <Button
+          size="compact"
+          variant="outline"
           disabled={!isChanged || item.disabled || uiState?.pending}
           onClick={() => onApply(sectionId, item.id)}
         >
-          {uiState?.pending ? 'Applying...' : item.applyLabel ?? 'Apply'}
-        </button>
+          {uiState?.pending ? 'Applying...' : (item.applyLabel ?? 'Apply')}
+        </Button>
       </div>
     </RowShell>
   );
@@ -214,7 +234,11 @@ const renderItem = ({
   onToggle: (sectionId: string, itemId: string, value: boolean) => void;
   onPress: (sectionId: string, itemId: string) => void;
   onSelect: (sectionId: string, itemId: string, value: string) => void;
-  onInputDraftChange: (sectionId: string, itemId: string, value: string) => void;
+  onInputDraftChange: (
+    sectionId: string,
+    itemId: string,
+    value: string,
+  ) => void;
   onInputApply: (sectionId: string, itemId: string) => void;
 }) => {
   if (item.type === 'text') {
@@ -268,9 +292,16 @@ const renderItem = ({
 export default function ControlsPanel() {
   const [sections, setSections] = useState<ControlsSectionSnapshot[]>([]);
+  const [selectedSectionId, setSelectedSectionId] = useState<string | null>(
+    null,
+  );
   const [loading, setLoading] = useState(true);
-  const [itemUiState, setItemUiState] = useState<Map<string, ItemUiState>>(new Map());
-  const [inputDrafts, setInputDrafts] = useState<Map<string, string>>(new Map());
+  const [itemUiState, setItemUiState] = useState<Map<string, ItemUiState>>(
+    new Map(),
+  );
+  const [inputDrafts, setInputDrafts] = useState<Map<string, string>>(
+    new Map(),
+  );
   const committedInputValuesRef = useRef<Map<string, string>>(new Map());
   const client = useRozeniteDevToolsClient<ControlsEventMap>({
@@ -286,13 +317,21 @@ export default function ControlsPanel() {
       'snapshot',
       (event: ControlsSnapshotEvent) => {
         setSections(event.sections);
+        setSelectedSectionId((previous) =>
+          event.sections.some((section) => section.id === previous)
+            ? previous
+            : (event.sections[0]?.id ?? null),
+        );
         setLoading(false);
         const nextCommittedValues = new Map<string, string>();
         event.sections.forEach((section) => {
           section.items.forEach((item) => {
             if (item.type === 'input') {
-              nextCommittedValues.set(getItemKey(section.id, item.id), item.value);
+              nextCommittedValues.set(
+                getItemKey(section.id, item.id),
+                item.value,
+              );
             }
           });
         });
@@ -310,7 +349,8 @@ export default function ControlsPanel() {
             const previousCommitted = committedInputValuesRef.current.get(key);
             const previousDraft = previous.get(key);
             const isDirty =
-              previousDraft !== undefined && previousDraft !== previousCommitted;
+              previousDraft !== undefined &&
+              previousDraft !== previousCommitted;
             if (!isDirty || previousDraft === committedValue) {
               next.set(key, committedValue);
@@ -321,7 +361,7 @@ export default function ControlsPanel() {
         });
         committedInputValuesRef.current = nextCommittedValues;
-      }
+      },
     );
     const updateResultSubscription = client.onMessage(
       'update-result',
@@ -336,7 +376,7 @@ export default function ControlsPanel() {
           });
           return next;
         });
-      }
+      },
     );
     client.send('get-snapshot', {
@@ -352,7 +392,7 @@ export default function ControlsPanel() {
   const sendUpdateRequest = (
     sectionId: string,
     itemId: string,
-    value: boolean | string
+    value: boolean | string,
   ) => {
     if (!client) {
       return;
@@ -403,7 +443,7 @@ export default function ControlsPanel() {
   const handleInputDraftChange = (
     sectionId: string,
     itemId: string,
-    value: string
+    value: string,
   ) => {
     const key = getItemKey(sectionId, itemId);
@@ -437,65 +477,76 @@ export default function ControlsPanel() {
     sendUpdateRequest(sectionId, itemId, draftValue);
   };
-  return (
-    <div className="h-screen bg-gray-900 text-gray-100 flex flex-col">
-      <div className="flex items-center gap-2 border-b border-gray-700 bg-gray-800 p-2">
-        <span className="text-sm font-medium text-gray-200">Controls</span>
-        <div className="flex-1" />
-        <span className="text-xs text-gray-400">{sections.length} sections</span>
-      </div>
+  const selectedSection = sections.find(
+    (section) => section.id === selectedSectionId,
+  );
-      <div className="flex-1 overflow-auto p-4">
-        {loading ? (
-          <div className="rounded-lg border border-gray-800 bg-gray-800 p-6 text-sm text-gray-400">
-            Loading controls snapshot...
-          </div>
-        ) : null}
+  return (
+    <PluginShell className="dark">
+      <PluginShell.Body>
+        {loading ? <EmptyState title="Loading controls…" /> : null}
         {!loading && sections.length === 0 ? (
-          <div className="rounded-lg border border-dashed border-gray-700 bg-gray-800/80 p-6 text-sm text-gray-400">
-            No controls registered on the device.
-          </div>
+          <EmptyState
+            title="No controls registered"
+            description="Register controls in the app to manage them here."
+          />
         ) : null}
-        <div className="space-y-4">
-          {sections.map((section) => (
-            <section
-              key={section.id}
-              className="rounded-xl border border-gray-800 bg-gray-800/90 shadow-lg shadow-black/10"
-            >
-              <div className="border-b border-gray-800 px-4 py-3">
-                <div className="text-sm font-semibold text-gray-100">
-                  {section.title}
-                </div>
-                {section.description ? (
-                  <div className="mt-1 text-xs text-gray-400">
-                    {section.description}
-                  </div>
+        {!loading && selectedSection ? (
+          <Split direction="horizontal" autoSaveId="controls-sections">
+            <Split.Pane defaultSize={22} minSize={15} maxSize={35}>
+              <Sidebar className="w-full border-r-0">
+                <Sidebar.Group>
+                  {sections.map((section) => (
+                    <Sidebar.Item
+                      key={section.id}
+                      selected={section.id === selectedSection.id}
+                      onClick={() => setSelectedSectionId(section.id)}
+                    >
+                      {section.title}
+                    </Sidebar.Item>
+                  ))}
+                </Sidebar.Group>
+              </Sidebar>
+            </Split.Pane>
+            <Split.Handle />
+            <Split.Pane>
+              <section className="h-full overflow-auto p-6">
+                <h1 className="text-base font-semibold text-foreground">
+                  {selectedSection.title}
+                </h1>
+                {selectedSection.description ? (
+                  <p className="mt-1 text-sm text-muted-foreground">
+                    {selectedSection.description}
+                  </p>
                 ) : null}
-              </div>
-              <div className="divide-y divide-gray-800 px-4">
-                {section.items.map((item) => (
-                  <div key={item.id}>
-                    {renderItem({
-                      sectionId: section.id,
-                      item,
-                      uiState: itemUiState.get(getItemKey(section.id, item.id)),
-                      inputDraft: inputDrafts.get(getItemKey(section.id, item.id)),
-                      onToggle: handleToggle,
-                      onPress: handlePress,
-                      onSelect: handleSelect,
-                      onInputDraftChange: handleInputDraftChange,
-                      onInputApply: handleInputApply,
-                    })}
-                  </div>
-                ))}
-              </div>
-            </section>
-          ))}
-        </div>
-      </div>
-    </div>
+                <div className="mt-5 divide-y divide-border">
+                  {selectedSection.items.map((item) => (
+                    <div key={item.id}>
+                      {renderItem({
+                        sectionId: selectedSection.id,
+                        item,
+                        uiState: itemUiState.get(
+                          getItemKey(selectedSection.id, item.id),
+                        ),
+                        inputDraft: inputDrafts.get(
+                          getItemKey(selectedSection.id, item.id),
+                        ),
+                        onToggle: handleToggle,
+                        onPress: handlePress,
+                        onSelect: handleSelect,
+                        onInputDraftChange: handleInputDraftChange,
+                        onInputApply: handleInputApply,
+                      })}
+                    </div>
+                  ))}
+                </div>
+              </section>
+            </Split.Pane>
+          </Split>
+        ) : null}
+      </PluginShell.Body>
+    </PluginShell>
   );
 }

package/dist/devtools/assets/panel-B5zz0XK3.css DELETED Viewed

@@ -1 +0,0 @@

- *,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background: 0 0% 100%;--foreground: 0 0% 3.9%;--card: 0 0% 100%;--card-foreground: 0 0% 3.9%;--popover: 0 0% 100%;--popover-foreground: 0 0% 3.9%;--primary: 0 0% 9%;--primary-foreground: 0 0% 98%;--secondary: 0 0% 96.1%;--secondary-foreground: 0 0% 9%;--muted: 0 0% 96.1%;--muted-foreground: 0 0% 45.1%;--accent: 0 0% 96.1%;--accent-foreground: 0 0% 9%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 0 0% 98%;--border: 0 0% 14.9%;--input: 0 0% 14.9%;--ring: 0 0% 83.1%;--radius: .5rem}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.relative{position:relative}.mt-1{margin-top:.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-6{height:1.5rem}.h-screen{height:100vh}.w-11{width:2.75rem}.min-w-0{min-width:0px}.min-w-\[160px\]{min-width:160px}.min-w-\[240px\]{min-width:240px}.max-w-\[50\%\]{max-width:50%}.flex-1{flex:1 1 0%}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-gray-800>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(31 41 55 / var(--tw-divide-opacity, 1))}.overflow-auto{overflow:auto}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-dashed{border-style:dashed}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.border-violet-500\/60{border-color:#8b5cf699}.bg-gray-700{--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-800\/80{background-color:#1f2937cc}.bg-gray-800\/90{background-color:#1f2937e6}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-950{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1))}.bg-gray-950\/80{background-color:#030712cc}.bg-violet-500\/10{background-color:#8b5cf61a}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-right{text-align:right}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-violet-100{--tw-text-opacity: 1;color:rgb(237 233 254 / var(--tw-text-opacity, 1))}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-black\/10{--tw-shadow-color: rgb(0 0 0 / .1);--tw-shadow: var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#1f2937;border-radius:4px}::-webkit-scrollbar-thumb{background:#374151;border-radius:4px;border:1px solid #1f2937}::-webkit-scrollbar-thumb:hover{background:#4b5563}::-webkit-scrollbar-thumb:active{background:#6b7280}::-webkit-scrollbar-corner{background:#1f2937}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content: "";content:var(--tw-content)}.hover\:bg-violet-500\/20:hover{background-color:#8b5cf633}.focus\:border-violet-500:focus{--tw-border-opacity: 1;border-color:rgb(139 92 246 / var(--tw-border-opacity, 1))}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:border-gray-700:disabled{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.disabled\:bg-gray-800:disabled{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.disabled\:text-gray-500:disabled{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.disabled\:opacity-50:disabled{opacity:.5}.peer:checked~.peer-checked\:bg-violet-500{--tw-bg-opacity: 1;background-color:rgb(139 92 246 / var(--tw-bg-opacity, 1))}.peer:checked~.peer-checked\:after\:translate-x-5:after{content:var(--tw-content);--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.peer:disabled~.peer-disabled\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\:opacity-50{opacity:.5}