@rozenite/vite-plugin 1.9.0 → 1.11.0

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

@@ -1,108 +0,0 @@
-import type { PointerEvent as ReactPointerEvent } from 'react';
-import type { MessageEntry, ResizeHandleId } from '../types.js';
-import { formatMessageDate, formatPayloadForCommandInput } from '../utils.js';
-import { MessagePayloadDetail } from './MessagePayloadDetail.js';
-import { ResizeHandle } from './ResizeHandle.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { SendIcon } from './icons.js';
-
-type MessageDetailsPaneProps = {
-  selectedMessage: MessageEntry | null;
-  isOpen: boolean;
-  isNarrowViewport: boolean;
-  activeResizeHandle: ResizeHandleId | null;
-  onClose: () => void;
-  onUseMessage: (message: MessageEntry) => void;
-  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
-};
-
-export const MessageDetailsPane = ({
-  selectedMessage,
-  isOpen,
-  isNarrowViewport,
-  activeResizeHandle,
-  onClose,
-  onUseMessage,
-  onResizeStart,
-}: MessageDetailsPaneProps) => {
-  const isHidden = !isOpen || !selectedMessage;
-
-  return (
-    <>
-      <ResizeHandle
-        className="rz-column-resize-handle"
-        isDragging={activeResizeHandle === 'details-width'}
-        isHidden={isHidden}
-        orientation={isNarrowViewport ? 'horizontal' : 'vertical'}
-        label="Resize message details"
-        onPointerDown={onResizeStart}
-      />
-
-      <div className="rz-pane" data-hidden={isHidden} aria-hidden={isHidden}>
-        <div className="rz-sidebar">
-          <div className="rz-sidebar-header">
-            <div className="rz-sidebar-title">Message Details</div>
-            <div className="rz-header-actions">
-              <button
-                type="button"
-                className="rz-sidebar-close"
-                aria-label="Use message in dispatcher"
-                title="Use message in dispatcher"
-                onClick={() => {
-                  if (selectedMessage) {
-                    onUseMessage(selectedMessage);
-                  }
-                }}
-              >
-                <SendIcon />
-              </button>
-
-              <button
-                type="button"
-                className="rz-sidebar-close"
-                aria-label="Close message details"
-                onClick={onClose}
-              >
-                ×
-              </button>
-            </div>
-          </div>
-
-          <ScrollArea className="rz-sidebar-scroll">
-            {selectedMessage ? (
-              <div className="rz-message-detail">
-                <div className="rz-detail-section">
-                  <div className="rz-label">Date</div>
-                  <div className="rz-detail-value rz-detail-mono">
-                    {formatMessageDate(selectedMessage.date)}
-                  </div>
-                </div>
-
-                <div className="rz-detail-section">
-                  <div className="rz-label">Type</div>
-                  <div className="rz-detail-value rz-detail-mono">{selectedMessage.type}</div>
-                </div>
-
-                <div className="rz-detail-section">
-                  <div className="rz-label">Payload</div>
-                  <div className="rz-detail-payload">
-                    <MessagePayloadDetail payload={selectedMessage.payload} />
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="rz-empty-state">Select a message to inspect its details.</div>
-            )}
-          </ScrollArea>
-        </div>
-      </div>
-    </>
-  );
-};
-
-export const getDispatcherValuesFromMessage = (message: MessageEntry) => {
-  return {
-    commandType: message.type,
-    commandPayload: formatPayloadForCommandInput(message.payload),
-  };
-};

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

@@ -1,84 +0,0 @@
-import type { MessageEntry } from '../types.js';
-import { cn, formatMessageTableDate, formatPayloadPreview } from '../utils.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-import { ClearIcon } from './icons.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">
-            <button
-              type="button"
-              className="rz-sidebar-close"
-              onClick={onClearMessages}
-              disabled={messages.length === 0}
-              aria-label="Clear message log"
-              title="Clear message log"
-            >
-              <ClearIcon />
-            </button>
-          </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>
-
-                <div className="rz-message-cell rz-message-date">
-                  {formatMessageTableDate(message.date)}
-                </div>
-
-                <div className="rz-message-cell rz-message-type">{message.type}</div>
-
-                <pre className="rz-message-cell rz-message-preview">
-                  {formatPayloadPreview(message.payload)}
-                </pre>
-              </button>
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-};

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

@@ -1,32 +0,0 @@
-import { JSONTree } from 'react-json-tree';
-import { jsonTreeTheme } from '../constants.js';
-import { isJsonTreeData } from '../utils.js';
-
-type MessagePayloadDetailProps = {
-  payload: unknown;
-};
-
-export const MessagePayloadDetail = ({ payload }: MessagePayloadDetailProps) => {
-  if (typeof payload === 'string') {
-    return <pre className="rz-detail-pre rz-detail-mono">{payload}</pre>;
-  }
-
-  if (typeof payload === 'number' || typeof payload === 'boolean' || payload == null) {
-    return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
-  }
-
-  if (isJsonTreeData(payload)) {
-    return (
-      <div className="rz-detail-json-tree">
-        <JSONTree
-          data={payload}
-          theme={jsonTreeTheme}
-          invertTheme={false}
-          shouldExpandNodeInitially={(keyPath) => keyPath.length <= 2}
-        />
-      </div>
-    );
-  }
-
-  return <pre className="rz-detail-pre rz-detail-mono">{String(payload)}</pre>;
-};

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

@@ -1,22 +0,0 @@
-import type { DevHostPanelEntry } from '../types.js';
-import { Tabs, TabsList, TabsTrigger } from './ui/Tabs.js';
-
-type PanelTabsProps = {
-  panels: DevHostPanelEntry[];
-  activeSource: string;
-  onValueChange: (value: string) => void;
-};
-
-export const PanelTabs = ({ panels, activeSource, onValueChange }: PanelTabsProps) => {
-  return (
-    <Tabs className="rz-tabs-root" value={activeSource} onValueChange={onValueChange}>
-      <TabsList aria-label="Plugin panels">
-        {panels.map((panel) => (
-          <TabsTrigger key={panel.source} value={panel.source}>
-            {panel.label}
-          </TabsTrigger>
-        ))}
-      </TabsList>
-    </Tabs>
-  );
-};

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

@@ -1,33 +0,0 @@
-import type { PointerEvent as ReactPointerEvent } from 'react';
-import { cn } from '../utils.js';
-
-type ResizeHandleProps = {
-  className?: string;
-  isDragging: boolean;
-  isHidden?: boolean;
-  orientation: 'horizontal' | 'vertical';
-  label: string;
-  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
-};
-
-export const ResizeHandle = ({
-  className,
-  isDragging,
-  isHidden = false,
-  orientation,
-  label,
-  onPointerDown,
-}: ResizeHandleProps) => {
-  return (
-    <div
-      className={cn(className)}
-      data-dragging={isDragging}
-      data-hidden={isHidden}
-      aria-hidden={isHidden}
-      onPointerDown={onPointerDown}
-      role="separator"
-      aria-orientation={orientation}
-      aria-label={label}
-    />
-  );
-};

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

@@ -1,27 +0,0 @@
-export const ClearIcon = () => {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-      <path
-        d="M2.5 3.5H11.5M5.5 1.75H8.5M4 3.5V10.5C4 10.9641 4.18437 11.4092 4.51256 11.7374C4.84075 12.0656 5.28587 12.25 5.75 12.25H8.25C8.71413 12.25 9.15925 12.0656 9.48744 11.7374C9.81563 11.4092 10 10.9641 10 10.5V3.5M5.75 5.5V9.625M8.25 5.5V9.625"
-        stroke="currentColor"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-
-export const SendIcon = () => {
-  return (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-      <path
-        d="M12.25 1.75L6.75 7.25M12.25 1.75L8.75 12.25L6.75 7.25M12.25 1.75L1.75 5.25L6.75 7.25"
-        stroke="currentColor"
-        strokeWidth="1.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};

package/src/dev-host/components/ui/ScrollArea.tsx

@@ -1,46 +0,0 @@
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-  type ReactNode,
-} from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-import { cn } from '../../utils.js';
-
-type ScrollAreaProps = ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-  children: ReactNode;
-};
-
-const ScrollBar = forwardRef<
-  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, ...props }, ref) => {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      ref={ref}
-      className={cn('rz-scrollbar', className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb className="rz-scrollbar-thumb" />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  );
-});
-
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export const ScrollArea = forwardRef<
-  ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaProps
->(({ className, children, ...props }, ref) => {
-  return (
-    <ScrollAreaPrimitive.Root ref={ref} className={cn('rz-scroll-area', className)} {...props}>
-      <ScrollAreaPrimitive.Viewport className="rz-scroll-viewport">
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar orientation="vertical" />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-});
-
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;

package/src/dev-host/components/ui/Tabs.tsx

@@ -1,33 +0,0 @@
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-} from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '../../utils.js';
-
-export const Tabs = TabsPrimitive.Root;
-
-export const TabsList = forwardRef<
-  ElementRef<typeof TabsPrimitive.List>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => {
-  return <TabsPrimitive.List ref={ref} className={cn('rz-tabs-list', className)} {...props} />;
-});
-
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-export const TabsTrigger = forwardRef<
-  ElementRef<typeof TabsPrimitive.Trigger>,
-  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  return (
-    <TabsPrimitive.Trigger
-      ref={ref}
-      className={cn('rz-tabs-trigger', className)}
-      {...props}
-    />
-  );
-});
-
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;

package/src/dev-host/constants.ts

@@ -1,29 +0,0 @@
-export const DEV_HOST_STATE_ELEMENT_ID = '__rozenite-dev-host__';
-
-export const DEFAULT_DEVTOOLS_HEIGHT = 288;
-export const MIN_DEVTOOLS_HEIGHT = 180;
-export const MIN_IFRAME_HEIGHT = 220;
-export const DETAILS_PANEL_WIDTH = 360;
-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/index.tsx

@@ -1,19 +0,0 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { App } from './App.js';
-import './styles.css';
-import { readDevHostState } from './utils.js';
-
-const rootElement = document.getElementById('root');
-
-if (!rootElement) {
-  throw new Error('Rozenite dev host failed to initialize.');
-}
-
-const state = readDevHostState();
-
-createRoot(rootElement).render(
-  <StrictMode>
-    <App {...state} />
-  </StrictMode>,
-);