@rozenite/vite-plugin 2.0.0 → 2.2.0

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,GACpC,WAAW,MAAM,EACjB,UAAU,MAAM,KACf,MAAM,GAAG,IAYX,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,IAAI,MAAM,CAAC,KAAG,CAAC,MAAM,CAAC,CAU7C,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,yBAAyB,GAAI,WAAW,MAAM,EAAE,UAAU,MAAM,KAAG,MAAM,GAAG,IAYxF,CAAC;AAEF,eAAO,MAAM,IAAI,GAAI,CAAC,EAAE,IAAI,MAAM,CAAC,KAAG,CAAC,MAAM,CAAC,CAU7C,CAAC"}

package/package.json

@@ -1,35 +1,32 @@
 {
   "name": "@rozenite/vite-plugin",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Vite plugin for developing React Native DevTools plugins with hot reload and development tools",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src",
-    "templates"
-  ],
   "keywords": [
-    "react-native",
     "devtools",
-    "vite",
-    "plugin"
+    "plugin",
+    "react-native",
+    "vite"
   ],
   "homepage": "https://github.com/callstackincubator/rozenite#readme",
   "bugs": {
     "url": "https://github.com/callstackincubator/rozenite/issues"
   },
+  "license": "MIT",
+  "author": "Szymon Chmal <szymon.chmal@callstack.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/callstackincubator/rozenite.git"
   },
-  "author": "Szymon Chmal <szymon.chmal@callstack.com>",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
+  "files": [
+    "dist",
+    "src",
+    "templates"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -39,20 +36,18 @@
       "default": "./dist/index.cjs"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@microsoft/api-extractor": "^7.50.1",
     "@tailwindcss/vite": "4.2.2",
     "@vitejs/plugin-react": "^4.3.4",
     "ejs": "^3.1.9",
+    "lucide-react": "^0.263.1",
     "vite-plugin-dts": "~4.5.0",
     "vite-plugin-react-native-web": "^2.1.1",
-    "lucide-react": "^0.263.1",
-    "@rozenite/ui": "2.0.0"
-  },
-  "peerDependencies": {
-    "react": "*",
-    "react-dom": "*",
-    "vite": "^7.3.1"
+    "@rozenite/ui": "2.2.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",
@@ -61,6 +56,11 @@
     "react": "19.2.3",
     "react-dom": "19.2.3"
   },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "vite": "^7.3.1"
+  },
   "engines": {
     "node": ">=20"
   },

package/src/bundle-dts.ts

@@ -1,10 +1,6 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
-import {
-  Extractor,
-  ExtractorConfig,
-  ExtractorLogLevel,
-} from '@microsoft/api-extractor';
+import { Extractor, ExtractorConfig, ExtractorLogLevel } from '@microsoft/api-extractor';
 
 type Target = 'react-native' | 'metro' | 'sdk';
 
@@ -37,16 +33,11 @@ export const normalizeRolledUpDeclarations = (content: string) => {
     );
 };
 
-export const bundleTargetDeclarations = async (
-  projectRoot: string,
-  target: Target,
-) => {
+export const bundleTargetDeclarations = async (projectRoot: string, target: Target) => {
   const targetRoot = path.join(projectRoot, 'dist', target);
   const publicEntryPath = path.join(targetRoot, 'index.d.ts');
   const bundleEntryPath =
-    target === 'sdk'
-      ? path.join(targetRoot, `${target}.d.ts`)
-      : publicEntryPath;
+    target === 'sdk' ? path.join(targetRoot, `${target}.d.ts`) : publicEntryPath;
   const entryPath = await fs
     .access(bundleEntryPath)
     .then(() => bundleEntryPath)

package/src/client-plugin.ts

@@ -7,10 +7,7 @@ import { fileURLToPath } from 'node:url';
 import { normalizePath } from 'vite';
 import { loadConfig, RozeniteConfig } from './load-config.js';
 import { getPackageJSON } from './package-json.js';
-import {
-  DEV_HOST_CONFIG_GLOBAL_KEY,
-  DEV_HOST_STATE_ELEMENT_ID,
-} from './dev-host/constants.js';
+import { DEV_HOST_CONFIG_GLOBAL_KEY, DEV_HOST_STATE_ELEMENT_ID } from './dev-host/constants.js';
 import {
   getBuiltDevHostAssets,
   getDevHostHtmlTemplate,
@@ -46,12 +43,7 @@ type DevHostState = {
   panels: DevHostPanelEntry[];
 };
 
-const TEMPLATES_DIR = path.resolve(
-  fileURLToPath(import.meta.url),
-  '..',
-  '..',
-  'templates',
-);
+const TEMPLATES_DIR = path.resolve(fileURLToPath(import.meta.url), '..', '..', 'templates');
 
 const PACKAGE_DIR = path.resolve(fileURLToPath(import.meta.url), '..', '..');
 
@@ -178,9 +170,7 @@ export const rozeniteClientPlugin = (): Plugin => {
 
       config.server ??= {};
       config.server.open =
-        config.server.open === true
-          ? DEV_HOST_ROUTE
-          : (config.server.open ?? DEV_HOST_ROUTE);
+        config.server.open === true ? DEV_HOST_ROUTE : (config.server.open ?? DEV_HOST_ROUTE);
       // Keep in sync with `DEV_SERVER_URL` in packages/runtime/src/dev-mode.ts
       config.server.port = 8888;
 
@@ -192,10 +182,7 @@ export const rozeniteClientPlugin = (): Plugin => {
       config.build.rollupOptions.input = {
         ...(config.build.rollupOptions.input as Record<string, string>),
         ...Object.fromEntries(
-          panels.map((panel) => [
-            panel.name,
-            `${DEVTOOLS_DIR}/${panel.htmlFile}`,
-          ]),
+          panels.map((panel) => [panel.name, `${DEVTOOLS_DIR}/${panel.htmlFile}`]),
         ),
       };
       config.build.rollupOptions.output = {
@@ -213,9 +200,7 @@ export const rozeniteClientPlugin = (): Plugin => {
         return devConfigModuleId;
       }
 
-      const isPanel = getPanels().some(
-        (panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id,
-      );
+      const isPanel = getPanels().some((panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id);
 
       if (isPanel) {
         return id;
@@ -231,9 +216,7 @@ export const rozeniteClientPlugin = (): Plugin => {
         return devConfigModule;
       }
 
-      const panel = getPanels().find(
-        (panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id,
-      );
+      const panel = getPanels().find((panel) => `${DEVTOOLS_DIR}/${panel.htmlFile}` === id);
 
       if (panel) {
         return generatePanelHtmlContent(panel);
@@ -287,14 +270,8 @@ export const rozeniteClientPlugin = (): Plugin => {
 
       server.middlewares.use((req, res, next) => {
         res.setHeader('Access-Control-Allow-Origin', '*');
-        res.setHeader(
-          'Access-Control-Allow-Methods',
-          'GET, POST, PUT, DELETE, OPTIONS',
-        );
-        res.setHeader(
-          'Access-Control-Allow-Headers',
-          'Content-Type, Authorization',
-        );
+        res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
 
         if (req.method === 'OPTIONS') {
           res.statusCode = 200;
@@ -336,9 +313,7 @@ export const rozeniteClientPlugin = (): Plugin => {
           return;
         }
 
-        const panel = panels.find(
-          (panel) => `/${DEVTOOLS_DIR}/` + panel.htmlFile === url,
-        );
+        const panel = panels.find((panel) => `/${DEVTOOLS_DIR}/` + panel.htmlFile === url);
 
         if (panel) {
           const htmlContent = generatePanelHtmlContent(panel);

package/src/dev-config-module.ts

@@ -18,10 +18,7 @@ export const resolveRozeniteDevConfigModuleId = (id: string) => {
   return null;
 };
 
-export const loadRozeniteDevConfigModule = (
-  id: string,
-  projectRoot: string,
-) => {
+export const loadRozeniteDevConfigModule = (id: string, projectRoot: string) => {
   if (id !== RESOLVED_ROZENITE_DEV_CONFIG_MODULE_ID) {
     return null;
   }

package/src/dev-host/App.tsx

@@ -31,9 +31,7 @@ type AppProps = DevHostState & {
 type MobileDevtoolsTab = 'log' | 'actions';
 
 const useNarrowViewport = () => {
-  const [isNarrow, setIsNarrow] = useState(
-    () => window.matchMedia('(max-width: 960px)').matches,
-  );
+  const [isNarrow, setIsNarrow] = useState(() => window.matchMedia('(max-width: 960px)').matches);
 
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 960px)');
@@ -50,50 +48,34 @@ const useNarrowViewport = () => {
   return isNarrow;
 };
 
-export const App = ({
-  packageName,
-  packageDescription,
-  panels,
-  flows,
-  presets,
-}: AppProps) => {
+export const App = ({ packageName, packageDescription, panels, flows, presets }: AppProps) => {
   const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() =>
     getInitialPanel(panels),
   );
   const [commandType, setCommandType] = useState('');
   const [commandPayload, setCommandPayload] = useState('');
   const [messages, setMessages] = useState<MessageEntry[]>([]);
-  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(
-    null,
-  );
+  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [activeMobileTab, setActiveMobileTab] =
-    useState<MobileDevtoolsTab>('log');
+  const [activeMobileTab, setActiveMobileTab] = useState<MobileDevtoolsTab>('log');
   const [iframeLoadNonce, setIframeLoadNonce] = useState(0);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const lastAutoRunLoadRef = useRef(0);
   const isNarrowViewport = useNarrowViewport();
-  const {
-    flowRuns,
-    runFlow,
-    stopFlow,
-    hasRunningFlow,
-    registerMessage,
-    resetMessages,
-  } = useFlowRunner({
-    sendMessage: (type, payload) => {
-      iframeRef.current?.contentWindow?.postMessage(
-        { pluginId: packageName, type, payload },
-        '*',
-      );
-      appendMessage({ direction: 'in', type, payload });
-    },
-  });
+  const { flowRuns, runFlow, stopFlow, hasRunningFlow, registerMessage, resetMessages } =
+    useFlowRunner({
+      sendMessage: (type, payload) => {
+        iframeRef.current?.contentWindow?.postMessage(
+          { pluginId: packageName, type, payload },
+          '*',
+        );
+        appendMessage({ direction: 'in', type, payload });
+      },
+    });
 
   const activeSource = activePanel?.source ?? '';
   const activeLabel = activePanel?.label ?? '';
-  const selectedMessage =
-    messages.find((message) => message.id === selectedMessageId) ?? null;
+  const selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
   const panelDescription = packageDescription.trim();
   const trimmedCommandType = commandType.trim();
   const trimmedCommandPayload = commandPayload.trim();
@@ -266,10 +248,7 @@ export const App = ({
       value={activeMobileTab}
       onValueChange={(value) => setActiveMobileTab(value as MobileDevtoolsTab)}
     >
-      <Tabs.List
-        className="dev-host-mobile-tab-list"
-        aria-label="DevTools sections"
-      >
+      <Tabs.List className="dev-host-mobile-tab-list" aria-label="DevTools sections">
         <Tabs.Tab value="log">Log</Tabs.Tab>
         <Tabs.Tab value="actions">Actions</Tabs.Tab>
       </Tabs.List>
@@ -319,34 +298,19 @@ export const App = ({
       <PluginHeader className="dev-host-header">
         <div className="dev-host-header-title">
           <PluginHeader.Title>Rozenite Dev Host</PluginHeader.Title>
-          <PluginHeader.Subtitle
-            className="dev-host-header-subtitle"
-            title={panelDescription}
-          >
+          <PluginHeader.Subtitle className="dev-host-header-subtitle" title={panelDescription}>
             {packageName}
           </PluginHeader.Subtitle>
         </div>
         <PluginHeader.Actions>
           <PluginHeader.ThemeSwitcher />
-          <PanelTabs
-            panels={panels}
-            activeSource={activeSource}
-            onValueChange={selectPanel}
-          />
+          <PanelTabs panels={panels} activeSource={activeSource} onValueChange={selectPanel} />
         </PluginHeader.Actions>
       </PluginHeader>
 
       <PluginShell.Body className="dev-host-body">
-        <Split
-          direction="vertical"
-          className="dev-host-main-split"
-          autoSaveId="dev-host"
-        >
-          <Split.Pane
-            defaultSize={64}
-            minSize={30}
-            className="dev-host-preview"
-          >
+        <Split direction="vertical" className="dev-host-main-split" autoSaveId="dev-host">
+          <Split.Pane defaultSize={64} minSize={30} className="dev-host-preview">
             {panels.length === 0 ? (
               <div className="flex h-full items-center justify-center p-8 text-center text-sm text-muted-foreground">
                 No panels were defined in rozenite.config.ts.

package/src/dev-host/components/DispatchForm.tsx

@@ -1,11 +1,7 @@
-import { Button, Input, Select, Tabs, Textarea } from '@rozenite/ui';
+import { IconButton, Input, Select, Tabs, Textarea } from '@rozenite/ui';
 import { RotateCcw, Send } from 'lucide-react';
 import { useState, type FormEvent } from 'react';
-import type {
-  DevHostFlowEntry,
-  DevHostFlowRunState,
-  DevHostPresetEntry,
-} from '../types.js';
+import type { DevHostFlowEntry, DevHostFlowRunState, DevHostPresetEntry } from '../types.js';
 import { FlowList } from './FlowList.js';
 
 type DispatchFormProps = {
@@ -72,9 +68,7 @@ export const DispatchForm = ({
             >
               <Select.Trigger
                 className="w-auto"
-                aria-label={
-                  presets.length > 0 ? 'Open presets' : 'No presets available'
-                }
+                aria-label={presets.length > 0 ? 'Open presets' : 'No presets available'}
                 disabled={presets.length === 0}
                 title={presets.length > 0 ? 'Presets' : 'No presets available'}
               >
@@ -97,9 +91,7 @@ export const DispatchForm = ({
               <span className="dev-host-label">Command</span>
               <Input
                 value={commandType}
-                onChange={(event) =>
-                  onCommandTypeChange(event.currentTarget.value)
-                }
+                onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
                 placeholder="get-snapshot"
                 spellCheck={false}
               />
@@ -109,33 +101,24 @@ export const DispatchForm = ({
               <span className="dev-host-label">Payload</span>
               <Textarea
                 value={commandPayload}
-                onChange={(event) =>
-                  onCommandPayloadChange(event.currentTarget.value)
-                }
+                onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
                 placeholder='{"example": true}'
                 spellCheck={false}
               />
             </label>
 
             <div className="dev-host-actions">
-              <Button
+              <IconButton
+                tone="neutral"
                 variant="outline"
-                size="icon"
                 onClick={onReset}
-                aria-label="Reset dispatcher"
-                title="Reset dispatcher"
+                label="Reset dispatcher"
               >
                 <RotateCcw />
-              </Button>
-              <Button
-                type="submit"
-                size="icon"
-                disabled={!canDispatch}
-                aria-label="Dispatch message"
-                title="Dispatch message"
-              >
+              </IconButton>
+              <IconButton type="submit" disabled={!canDispatch} label="Dispatch message">
                 <Send />
-              </Button>
+              </IconButton>
             </div>
           </form>
         </Tabs.Panel>

package/src/dev-host/components/FlowList.tsx

@@ -52,7 +52,8 @@ export const FlowList = ({
             return (
               <Button
                 key={flow.name}
-                variant={isRunning ? 'secondary' : 'outline'}
+                tone="neutral"
+                variant={isRunning ? 'solid' : 'outline'}
                 className="dev-host-flow-button"
                 onClick={() => onRunFlow(flow)}
                 aria-label={`Run ${flow.displayName}`}
@@ -60,7 +61,11 @@ export const FlowList = ({
                 <span className="dev-host-flow-name">
                   <Play />
                   {flow.displayName}
-                  {flow.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                  {flow.autoRun ? (
+                    <Badge tone="neutral" variant="outline">
+                      Auto
+                    </Badge>
+                  ) : null}
                 </span>
                 <span className="text-xs text-muted-foreground">
                   {isRunning ? 'Running' : 'Run'}
@@ -76,22 +81,21 @@ export const FlowList = ({
           <span className="dev-host-label">Flow runs</span>
           <div className="dev-host-flow-runs">
             {flowRuns.map((flowRun) => (
-              <div
-                key={flowRun.id}
-                className="dev-host-flow-state"
-                data-status={flowRun.status}
-              >
+              <div key={flowRun.id} className="dev-host-flow-state" data-status={flowRun.status}>
                 <div className="dev-host-flow-state-header">
                   <span className="dev-host-flow-title">
                     {flowRun.flowDisplayName}
                     {flowRun.autoRun ? (
-                      <Badge variant="outline">Auto</Badge>
+                      <Badge tone="neutral" variant="outline">
+                        Auto
+                      </Badge>
                     ) : null}
                   </span>
                   {flowRun.status === 'running' ? (
                     <Button
+                      tone="neutral"
                       variant="ghost"
-                      size="compact"
+                      size="sm"
                       onClick={() => onStopFlow(flowRun.id)}
                     >
                       <Square />
@@ -103,9 +107,7 @@ export const FlowList = ({
                   {getStatusLabel(flowRun.status)}
                 </span>
                 {flowRun.error ? (
-                  <div className="dev-host-flow-state-error">
-                    {flowRun.error}
-                  </div>
+                  <div className="dev-host-flow-state-error">{flowRun.error}</div>
                 ) : null}
                 {flowRun.result != null ? (
                   <pre className="dev-host-flow-state-result">

package/src/dev-host/components/MessageDetailsPane.tsx

@@ -1,4 +1,4 @@
-import { Button, JsonInspector, ScrollArea } from '@rozenite/ui';
+import { IconButton, JsonInspector, ScrollArea } from '@rozenite/ui';
 import { Send, X } from 'lucide-react';
 import type { MessageEntry } from '../types.js';
 import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
@@ -19,24 +19,22 @@ export const MessageDetailsPane = ({
       <header className="dev-host-pane-header">
         <h2 className="dev-host-pane-title">Message Details</h2>
         <div className="dev-host-pane-actions">
-          <Button
+          <IconButton
+            tone="neutral"
             variant="ghost"
-            size="icon"
             onClick={() => onUseMessage(selectedMessage)}
-            aria-label="Use message in dispatcher"
-            title="Use message in dispatcher"
+            label="Use message in dispatcher"
           >
             <Send />
-          </Button>
-          <Button
+          </IconButton>
+          <IconButton
+            tone="neutral"
             variant="ghost"
-            size="icon"
             onClick={onClose}
-            aria-label="Close message details"
-            title="Close message details"
+            label="Close message details"
           >
             <X />
-          </Button>
+          </IconButton>
         </div>
       </header>
 
@@ -44,9 +42,7 @@ export const MessageDetailsPane = ({
         <div className="dev-host-details">
           <div className="dev-host-detail-section">
             <span className="dev-host-label">Date</span>
-            <div className="dev-host-detail-value">
-              {formatMessageDate(selectedMessage.date)}
-            </div>
+            <div className="dev-host-detail-value">{formatMessageDate(selectedMessage.date)}</div>
           </div>
           <div className="dev-host-detail-section">
             <span className="dev-host-label">Type</span>
@@ -55,12 +51,8 @@ export const MessageDetailsPane = ({
           <div className="dev-host-detail-section">
             <span className="dev-host-label">Payload</span>
             <div className="dev-host-detail-payload">
-              {typeof selectedMessage.payload === 'object' &&
-              selectedMessage.payload !== null ? (
-                <JsonInspector
-                  data={selectedMessage.payload}
-                  defaultExpandedDepth={2}
-                />
+              {typeof selectedMessage.payload === 'object' && selectedMessage.payload !== null ? (
+                <JsonInspector data={selectedMessage.payload} defaultExpandedDepth={2} />
               ) : (
                 <pre className="m-0 whitespace-pre-wrap break-words">
                   {formatPayloadForCommandInput(selectedMessage.payload)}

package/src/dev-host/components/MessageLogPane.tsx

@@ -1,4 +1,4 @@
-import { Button, DataTable, ScrollArea } from '@rozenite/ui';
+import { DataTable, IconButton, ScrollArea } from '@rozenite/ui';
 import { Trash2 } from 'lucide-react';
 import { useMemo } from 'react';
 import type { DataTableColumn } from '@rozenite/ui';
@@ -27,9 +27,7 @@ export const MessageLogPane = ({
 
           return (
             <span
-              className={
-                isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'
-              }
+              className={isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'}
               aria-label={isSent ? 'Sent message' : 'Received message'}
               title={isSent ? 'Sent message' : 'Received message'}
             >
@@ -42,17 +40,13 @@ export const MessageLogPane = ({
         accessorKey: 'date',
         header: 'Date',
         cell: ({ row }) => (
-          <span className="text-muted-foreground">
-            {formatMessageTableDate(row.original.date)}
-          </span>
+          <span className="text-muted-foreground">{formatMessageTableDate(row.original.date)}</span>
         ),
       },
       {
         accessorKey: 'type',
         header: 'Type',
-        cell: ({ getValue }) => (
-          <span className="font-medium">{getValue<string>()}</span>
-        ),
+        cell: ({ getValue }) => <span className="font-medium">{getValue<string>()}</span>,
       },
       {
         id: 'payload',
@@ -72,22 +66,18 @@ export const MessageLogPane = ({
     <section className="dev-host-pane">
       <header className="dev-host-pane-header">
         <h2 className="dev-host-pane-title">Message Log</h2>
-        <Button
+        <IconButton
+          tone="neutral"
           variant="ghost"
-          size="icon"
           onClick={onClearMessages}
           disabled={messages.length === 0}
-          aria-label="Clear message log"
-          title="Clear message log"
+          label="Clear message log"
         >
           <Trash2 />
-        </Button>
+        </IconButton>
       </header>
 
-      <ScrollArea
-        className="dev-host-scroll"
-        viewportClassName="dev-host-scroll-viewport"
-      >
+      <ScrollArea className="dev-host-scroll" viewportClassName="dev-host-scroll-viewport">
         <DataTable
           className="dev-host-message-table"
           columns={columns}

package/src/dev-host/components/PanelTabs.tsx

@@ -7,11 +7,7 @@ type PanelTabsProps = {
   onValueChange: (value: string) => void;
 };
 
-export const PanelTabs = ({
-  panels,
-  activeSource,
-  onValueChange,
-}: PanelTabsProps) => {
+export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
   if (panels.length === 0) {
     return null;
   }
@@ -19,14 +15,8 @@ export const PanelTabs = ({
   const activePanel = panels.find((panel) => panel.source === activeSource);
 
   return (
-    <Select
-      value={activeSource}
-      onValueChange={(value) => onValueChange(String(value))}
-    >
-      <Select.Trigger
-        className="dev-host-panel-select"
-        aria-label="Plugin panel"
-      >
+    <Select value={activeSource} onValueChange={(value) => onValueChange(String(value))}>
+      <Select.Trigger className="dev-host-panel-select" aria-label="Plugin panel">
         <Select.Value>{activePanel?.label}</Select.Value>
       </Select.Trigger>
       <Select.Content align="end">