@rozenite/vite-plugin 1.13.0 → 2.1.0

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

@@ -1,84 +1,93 @@
+import { Button, DataTable, ScrollArea } from '@rozenite/ui';
+import { Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
+import type { DataTableColumn } from '@rozenite/ui';
 import type { MessageEntry } from '../types.js';
-import { cn, formatMessageTableDate, formatPayloadPreview } from '../utils.js';
-import { ClearIcon } from './icons.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { IconButton } from './ui/IconButton.js';
+import { formatMessageTableDate, formatPayloadPreview } from '../utils.js';
 
 type MessageLogPaneProps = {
   messages: MessageEntry[];
-  selectedMessageId: string | null;
   onSelectMessage: (messageId: string) => void;
   onClearMessages: () => void;
 };
 
 export const MessageLogPane = ({
   messages,
-  selectedMessageId,
   onSelectMessage,
   onClearMessages,
 }: MessageLogPaneProps) => {
-  return (
-    <div className="rz-pane">
-      <div className="rz-log-pane">
-        <div className="rz-sidebar-header">
-          <div className="rz-sidebar-title">Message Log</div>
-          <div className="rz-header-actions">
-            <IconButton
-              type="button"
-              onClick={onClearMessages}
-              disabled={messages.length === 0}
-              aria-label="Clear message log"
-              title="Clear message log"
-            >
-              <ClearIcon />
-            </IconButton>
-          </div>
-        </div>
-
-        <ScrollArea className="rz-sidebar-scroll">
-          <div className="rz-message-list">
-            <div className="rz-message-list-header">
-              <div className="rz-message-header-cell">Dir</div>
-              <div className="rz-message-header-cell">Date</div>
-              <div className="rz-message-header-cell">Type</div>
-              <div className="rz-message-header-cell">Payload</div>
-            </div>
-
-            {messages.map((message) => (
-              <button
-                key={message.id}
-                type="button"
-                className="rz-message-row"
-                data-selected={message.id === selectedMessageId}
-                onClick={() => onSelectMessage(message.id)}
-              >
-                <div
-                  className={cn(
-                    'rz-message-cell rz-message-direction',
-                    message.direction === 'in' ? 'rz-message-dir-in' : 'rz-message-dir-out',
-                  )}
-                  aria-label={message.direction === 'in' ? 'Sent message' : 'Received message'}
-                  title={message.direction === 'in' ? 'Sent message' : 'Received message'}
-                >
-                  <span className="rz-message-arrow" aria-hidden="true">
-                    {message.direction === 'in' ? '↑' : '↓'}
-                  </span>
-                </div>
+  const columns = useMemo<DataTableColumn<MessageEntry>[]>(
+    () => [
+      {
+        accessorKey: 'direction',
+        header: 'Dir',
+        cell: ({ getValue }) => {
+          const direction = getValue<MessageEntry['direction']>();
+          const isSent = direction === 'in';
 
-                <div className="rz-message-cell rz-message-date">
-                  {formatMessageTableDate(message.date)}
-                </div>
+          return (
+            <span
+              className={isSent ? 'dev-host-direction-in' : 'dev-host-direction-out'}
+              aria-label={isSent ? 'Sent message' : 'Received message'}
+              title={isSent ? 'Sent message' : 'Received message'}
+            >
+              {isSent ? '↑' : '↓'}
+            </span>
+          );
+        },
+      },
+      {
+        accessorKey: 'date',
+        header: 'Date',
+        cell: ({ row }) => (
+          <span className="text-muted-foreground">{formatMessageTableDate(row.original.date)}</span>
+        ),
+      },
+      {
+        accessorKey: 'type',
+        header: 'Type',
+        cell: ({ getValue }) => <span className="font-medium">{getValue<string>()}</span>,
+      },
+      {
+        id: 'payload',
+        accessorFn: (message) => formatPayloadPreview(message.payload),
+        header: 'Payload',
+        cell: ({ getValue }) => (
+          <span className="block max-w-160 truncate font-mono text-xs text-muted-foreground">
+            {getValue<string>()}
+          </span>
+        ),
+      },
+    ],
+    [],
+  );
 
-                <div className="rz-message-cell rz-message-type">{message.type}</div>
+  return (
+    <section className="dev-host-pane">
+      <header className="dev-host-pane-header">
+        <h2 className="dev-host-pane-title">Message Log</h2>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClearMessages}
+          disabled={messages.length === 0}
+          aria-label="Clear message log"
+          title="Clear message log"
+        >
+          <Trash2 />
+        </Button>
+      </header>
 
-                <pre className="rz-message-cell rz-message-preview">
-                  {formatPayloadPreview(message.payload)}
-                </pre>
-              </button>
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
+      <ScrollArea className="dev-host-scroll" viewportClassName="dev-host-scroll-viewport">
+        <DataTable
+          className="dev-host-message-table"
+          columns={columns}
+          data={messages}
+          emptyMessage="No messages yet."
+          getRowId={(message) => message.id}
+          onRowClick={(message) => onSelectMessage(message.id)}
+        />
+      </ScrollArea>
+    </section>
   );
 };

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

@@ -1,5 +1,5 @@
+import { Select } from '@rozenite/ui';
 import type { DevHostPanelEntry } from '../types.js';
-import { ToggleGroup } from './ui/ToggleGroup.js';
 
 type PanelTabsProps = {
   panels: DevHostPanelEntry[];
@@ -8,15 +8,24 @@ type PanelTabsProps = {
 };
 
 export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
+  if (panels.length === 0) {
+    return null;
+  }
+
+  const activePanel = panels.find((panel) => panel.source === activeSource);
+
   return (
-    <ToggleGroup
-      aria-label="Plugin panels"
-      value={activeSource}
-      onChange={onValueChange}
-      options={panels.map((panel) => ({
-        key: panel.source,
-        label: panel.label,
-      }))}
-    />
+    <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">
+        {panels.map((panel) => (
+          <Select.Item key={panel.source} value={panel.source}>
+            {panel.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select>
   );
 };

package/src/dev-host/constants.ts

@@ -10,22 +10,3 @@ export const MIN_DETAILS_WIDTH = 280;
 export const DEFAULT_COMMAND_WIDTH = 320;
 export const MIN_COMMAND_WIDTH = 260;
 export const SPLITTER_SIZE = 6;
-
-export const jsonTreeTheme = {
-  base00: 'transparent',
-  base01: '#374151',
-  base02: '#4b5563',
-  base03: '#6b7280',
-  base04: '#9ca3af',
-  base05: '#d1d5db',
-  base06: '#e5e7eb',
-  base07: '#f9fafb',
-  base08: '#ef4444',
-  base09: '#f59e0b',
-  base0A: '#10b981',
-  base0B: '#3b82f6',
-  base0C: '#06b6d4',
-  base0D: '#8b5cf6',
-  base0E: '#ec4899',
-  base0F: '#f97316',
-};

package/src/dev-host/flow-runtime.ts

@@ -36,10 +36,7 @@ const toFlowMessage = (message: MessageEntry): DevFlowMessage => {
   };
 };
 
-const matchesMessage = (
-  message: DevFlowMessage,
-  matcher?: DevFlowMessageMatcher,
-) => {
+const matchesMessage = (message: DevFlowMessage, matcher?: DevFlowMessageMatcher) => {
   if (!matcher) {
     return true;
   }
@@ -138,12 +135,12 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
       }
     };
 
-      const cleanupRun = () => {
-        activeRun.cleanups.forEach((cleanup) => cleanup());
-        activeRun.cleanups.clear();
-        activeRun.listeners.clear();
-        activeRunsRef.current.delete(runId);
-      };
+    const cleanupRun = () => {
+      activeRun.cleanups.forEach((cleanup) => cleanup());
+      activeRun.cleanups.clear();
+      activeRun.listeners.clear();
+      activeRunsRef.current.delete(runId);
+    };
 
     const onMessage: DevFlowContext['onMessage'] = (matcher, listener) => {
       throwIfAborted();
@@ -203,7 +200,9 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
             resolve(message);
           });
 
-          controller.signal.addEventListener('abort', handleAbort, { once: true });
+          controller.signal.addEventListener('abort', handleAbort, {
+            once: true,
+          });
 
           if (options?.timeoutMs != null) {
             timeoutId = window.setTimeout(() => {
@@ -238,7 +237,11 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
       ...current,
     ]);
 
-    const updateRunState = (nextState: Partial<Omit<DevHostFlowRunState, 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'>>) => {
+    const updateRunState = (
+      nextState: Partial<
+        Omit<DevHostFlowRunState, 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'>
+      >,
+    ) => {
       setFlowRuns((current) =>
         current.map((run) =>
           run.id === runId

package/src/dev-host/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

package/src/dev-host/main.tsx

@@ -1,15 +1,10 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { BaseProvider, DarkTheme } from 'baseui';
-import { Client as Styletron } from 'styletron-engine-monolithic';
-import { Provider as StyletronProvider } from 'styletron-react';
 import { App } from './App.js';
 import { getDevHostFlows, getDevHostPresets } from './config.js';
 import './styles.css';
 import { readDevHostState } from './utils.js';
 
-const styletron = new Styletron();
-
 const rootElement = document.getElementById('root');
 
 if (!rootElement) {
@@ -22,10 +17,6 @@ const presets = getDevHostPresets();
 
 createRoot(rootElement).render(
   <StrictMode>
-    <StyletronProvider value={styletron}>
-      <BaseProvider theme={DarkTheme}>
-        <App {...state} flows={flows} presets={presets} />
-      </BaseProvider>
-    </StyletronProvider>
+    <App {...state} flows={flows} presets={presets} />
   </StrictMode>,
 );