@rozenite/vite-plugin 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozenite/vite-plugin",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Vite plugin for developing React Native DevTools plugins with hot reload and development tools",
   "keywords": [
     "devtools",
@@ -47,7 +47,7 @@
     "lucide-react": "^0.263.1",
     "vite-plugin-dts": "~4.5.0",
     "vite-plugin-react-native-web": "^2.1.1",
-    "@rozenite/ui": "2.1.0"
+    "@rozenite/ui": "2.2.0"
   },
   "devDependencies": {
     "@types/ejs": "^3.1.5",

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

@@ -1,4 +1,4 @@
-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';
@@ -108,24 +108,17 @@ export const DispatchForm = ({
             </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'}
@@ -80,10 +85,19 @@ export const FlowList = ({
                 <div className="dev-host-flow-state-header">
                   <span className="dev-host-flow-title">
                     {flowRun.flowDisplayName}
-                    {flowRun.autoRun ? <Badge variant="outline">Auto</Badge> : null}
+                    {flowRun.autoRun ? (
+                      <Badge tone="neutral" variant="outline">
+                        Auto
+                      </Badge>
+                    ) : null}
                   </span>
                   {flowRun.status === 'running' ? (
-                    <Button variant="ghost" size="compact" onClick={() => onStopFlow(flowRun.id)}>
+                    <Button
+                      tone="neutral"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onStopFlow(flowRun.id)}
+                    >
                       <Square />
                       Stop
                     </Button>

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>
 

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';
@@ -66,16 +66,15 @@ 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">

package/src/dev-host/styles.css

@@ -219,7 +219,7 @@
 }
 
 .dev-host-flow-state[data-status='failed'] {
-  border-color: var(--destructive);
+  border-color: var(--danger);
 }
 
 .dev-host-flow-state-header {
@@ -246,7 +246,7 @@
 }
 
 .dev-host-flow-state-error {
-  color: var(--destructive);
+  color: var(--danger);
 }
 
 .dev-host-detail-section {