@rozenite/controls-plugin 1.13.0 → 2.1.0

package/src/ui/panel.tsx

@@ -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 {
@@ -7,7 +17,7 @@ import type {
   ControlsUpdateResultEvent,
 } from '../shared/messaging';
 import type { ControlsItemSnapshot, ControlsSectionSnapshot } from '../shared/types';
-import './globals.css';
+import '@rozenite/ui/styles.css';
 
 type ItemUiState = {
   pending: boolean;
@@ -32,13 +42,9 @@ 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>
-      {description ? (
-        <div className="mt-1 text-xs text-gray-400">{description}</div>
-      ) : null}
-      {errorMessage ? (
-        <div className="mt-1 text-xs text-red-400">{errorMessage}</div>
-      ) : null}
+      <div className="text-sm font-medium text-foreground">{title}</div>
+      {description ? <div className="mt-1 text-xs text-muted-foreground">{description}</div> : null}
+      {errorMessage ? <div className="mt-1 text-xs text-destructive">{errorMessage}</div> : null}
     </div>
     {children}
   </div>
@@ -56,21 +62,13 @@ const ToggleRow = ({
   onToggle: (sectionId: string, itemId: string, value: boolean) => void;
 }) => {
   return (
-    <RowShell
-      title={item.title}
-      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>
+    <RowShell title={item.title} description={item.description} errorMessage={uiState?.message}>
+      <Switch
+        aria-label={item.title}
+        checked={item.value}
+        disabled={item.disabled || uiState?.pending}
+        onCheckedChange={(checked) => onToggle(sectionId, item.id, checked)}
+      />
     </RowShell>
   );
 };
@@ -87,18 +85,15 @@ const ButtonRow = ({
   onPress: (sectionId: string, itemId: string) => void;
 }) => {
   return (
-    <RowShell
-      title={item.title}
-      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"
+    <RowShell title={item.title} description={item.description} errorMessage={uiState?.message}>
+      <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>
   );
 };
@@ -115,35 +110,35 @@ const SelectRow = ({
   onSelect: (sectionId: string, itemId: string, value: string) => void;
 }) => {
   return (
-    <RowShell
-      title={item.title}
-      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"
+    <RowShell title={item.title} description={item.description} errorMessage={uiState?.message}>
+      <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>
   );
 };
 
-const TextRow = ({
-  item,
-}: {
-  item: Extract<ControlsItemSnapshot, { type: 'text' }>;
-}) => {
+const TextRow = ({ item }: { item: Extract<ControlsItemSnapshot, { type: 'text' }> }) => {
   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>
@@ -168,29 +163,24 @@ const InputRow = ({
   const isChanged = draftValue !== item.value;
 
   return (
-    <RowShell
-      title={item.title}
-      description={item.description}
-      errorMessage={uiState?.message}
-    >
+    <RowShell title={item.title} description={item.description} 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}
           disabled={item.disabled || uiState?.pending}
-          onChange={(event) =>
-            onDraftChange(sectionId, item.id, event.target.value)
-          }
+          onChange={(event) => 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>
   );
@@ -222,25 +212,11 @@ const renderItem = ({
   }
 
   if (item.type === 'toggle') {
-    return (
-      <ToggleRow
-        sectionId={sectionId}
-        item={item}
-        uiState={uiState}
-        onToggle={onToggle}
-      />
-    );
+    return <ToggleRow sectionId={sectionId} item={item} uiState={uiState} onToggle={onToggle} />;
   }
 
   if (item.type === 'select') {
-    return (
-      <SelectRow
-        sectionId={sectionId}
-        item={item}
-        uiState={uiState}
-        onSelect={onSelect}
-      />
-    );
+    return <SelectRow sectionId={sectionId} item={item} uiState={uiState} onSelect={onSelect} />;
   }
 
   if (item.type === 'input') {
@@ -256,18 +232,12 @@ const renderItem = ({
     );
   }
 
-  return (
-    <ButtonRow
-      sectionId={sectionId}
-      item={item}
-      uiState={uiState}
-      onPress={onPress}
-    />
-  );
+  return <ButtonRow sectionId={sectionId} item={item} uiState={uiState} onPress={onPress} />;
 };
 
 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());
@@ -282,47 +252,48 @@ export default function ControlsPanel() {
       return;
     }
 
-    const snapshotSubscription = client.onMessage(
-      'snapshot',
-      (event: ControlsSnapshotEvent) => {
-        setSections(event.sections);
-        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);
-            }
-          });
+    const snapshotSubscription = client.onMessage('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);
+          }
         });
+      });
 
-        setInputDrafts((previous) => {
-          const next = new Map(previous);
-
-          next.forEach((_value, key) => {
-            if (!nextCommittedValues.has(key)) {
-              next.delete(key);
-            }
-          });
+      setInputDrafts((previous) => {
+        const next = new Map(previous);
 
-          nextCommittedValues.forEach((committedValue, key) => {
-            const previousCommitted = committedInputValuesRef.current.get(key);
-            const previousDraft = previous.get(key);
-            const isDirty =
-              previousDraft !== undefined && previousDraft !== previousCommitted;
+        next.forEach((_value, key) => {
+          if (!nextCommittedValues.has(key)) {
+            next.delete(key);
+          }
+        });
 
-            if (!isDirty || previousDraft === committedValue) {
-              next.set(key, committedValue);
-            }
-          });
+        nextCommittedValues.forEach((committedValue, key) => {
+          const previousCommitted = committedInputValuesRef.current.get(key);
+          const previousDraft = previous.get(key);
+          const isDirty = previousDraft !== undefined && previousDraft !== previousCommitted;
 
-          return next;
+          if (!isDirty || previousDraft === committedValue) {
+            next.set(key, committedValue);
+          }
         });
 
-        committedInputValuesRef.current = nextCommittedValues;
-      }
-    );
+        return next;
+      });
+
+      committedInputValuesRef.current = nextCommittedValues;
+    });
     const updateResultSubscription = client.onMessage(
       'update-result',
       (event: ControlsUpdateResultEvent) => {
@@ -336,7 +307,7 @@ export default function ControlsPanel() {
           });
           return next;
         });
-      }
+      },
     );
 
     client.send('get-snapshot', {
@@ -349,11 +320,7 @@ export default function ControlsPanel() {
     };
   }, [client]);
 
-  const sendUpdateRequest = (
-    sectionId: string,
-    itemId: string,
-    value: boolean | string
-  ) => {
+  const sendUpdateRequest = (sectionId: string, itemId: string, value: boolean | string) => {
     if (!client) {
       return;
     }
@@ -400,11 +367,7 @@ export default function ControlsPanel() {
     sendUpdateRequest(sectionId, itemId, value);
   };
 
-  const handleInputDraftChange = (
-    sectionId: string,
-    itemId: string,
-    value: string
-  ) => {
+  const handleInputDraftChange = (sectionId: string, itemId: string, value: string) => {
     const key = getItemKey(sectionId, itemId);
 
     setInputDrafts((previous) => {
@@ -437,65 +400,68 @@ 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

@@ -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}