@rozenite/vite-plugin 1.9.0 → 1.10.0

package/dist/dev-host/components/MessageLogPane.d.ts

@@ -1,10 +0,0 @@
-import { MessageEntry } from '../types.js';
-type MessageLogPaneProps = {
-    messages: MessageEntry[];
-    selectedMessageId: string | null;
-    onSelectMessage: (messageId: string) => void;
-    onClearMessages: () => void;
-};
-export declare const MessageLogPane: ({ messages, selectedMessageId, onSelectMessage, onClearMessages, }: MessageLogPaneProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=MessageLogPane.d.ts.map

package/dist/dev-host/components/MessageLogPane.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageLogPane.d.ts","sourceRoot":"","sources":["../../../src/dev-host/components/MessageLogPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,oEAK5B,mBAAmB,4CAkErB,CAAC"}

package/dist/dev-host/components/MessagePayloadDetail.d.ts

@@ -1,6 +0,0 @@
-type MessagePayloadDetailProps = {
-    payload: unknown;
-};
-export declare const MessagePayloadDetail: ({ payload }: MessagePayloadDetailProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=MessagePayloadDetail.d.ts.map

package/dist/dev-host/components/MessagePayloadDetail.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessagePayloadDetail.d.ts","sourceRoot":"","sources":["../../../src/dev-host/components/MessagePayloadDetail.tsx"],"names":[],"mappings":"AAIA,KAAK,yBAAyB,GAAG;IAC/B,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,aAAa,yBAAyB,4CAuB1E,CAAC"}

package/dist/dev-host/components/PanelTabs.d.ts

@@ -1,9 +0,0 @@
-import { DevHostPanelEntry } from '../types.js';
-type PanelTabsProps = {
-    panels: DevHostPanelEntry[];
-    activeSource: string;
-    onValueChange: (value: string) => void;
-};
-export declare const PanelTabs: ({ panels, activeSource, onValueChange }: PanelTabsProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=PanelTabs.d.ts.map

package/dist/dev-host/components/PanelTabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelTabs.d.ts","sourceRoot":"","sources":["../../../src/dev-host/components/PanelTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrD,KAAK,cAAc,GAAG;IACpB,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,yCAAyC,cAAc,4CAYhF,CAAC"}

package/dist/dev-host/components/ResizeHandle.d.ts

@@ -1,12 +0,0 @@
-import { PointerEvent as ReactPointerEvent } from 'react';
-type ResizeHandleProps = {
-    className?: string;
-    isDragging: boolean;
-    isHidden?: boolean;
-    orientation: 'horizontal' | 'vertical';
-    label: string;
-    onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
-};
-export declare const ResizeHandle: ({ className, isDragging, isHidden, orientation, label, onPointerDown, }: ResizeHandleProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/dev-host/components/ResizeHandle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../../src/dev-host/components/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,IAAI,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/D,KAAK,iBAAiB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACnE,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,yEAO1B,iBAAiB,4CAanB,CAAC"}

package/dist/dev-host/components/icons.d.ts

@@ -1,3 +0,0 @@
-export declare const ClearIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const SendIcon: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=icons.d.ts.map

package/dist/dev-host/components/icons.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/dev-host/components/icons.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,+CAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,+CAYpB,CAAC"}

package/dist/dev-host/components/ui/ScrollArea.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-    children: ReactNode;
-} & import('react').RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/dev-host/components/ui/ScrollArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../../src/dev-host/components/ui/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AAwBnE,eAAO,MAAM,UAAU;cApBX,SAAS;kDAiCnB,CAAC"}

package/dist/dev-host/components/ui/Tabs.d.ts

@@ -1,5 +0,0 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-export declare const Tabs: import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const TabsList: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/dev-host/components/ui/Tabs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/dev-host/components/ui/Tabs.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAGtD,eAAO,MAAM,IAAI,oHAAqB,CAAC;AAEvC,eAAO,MAAM,QAAQ,qLAKnB,CAAC;AAIH,eAAO,MAAM,WAAW,8LAWtB,CAAC"}

package/dist/dev-host/constants.d.ts

@@ -1,28 +0,0 @@
-export declare const DEV_HOST_STATE_ELEMENT_ID = "__rozenite-dev-host__";
-export declare const DEFAULT_DEVTOOLS_HEIGHT = 288;
-export declare const MIN_DEVTOOLS_HEIGHT = 180;
-export declare const MIN_IFRAME_HEIGHT = 220;
-export declare const DETAILS_PANEL_WIDTH = 360;
-export declare const MIN_DETAILS_WIDTH = 280;
-export declare const DEFAULT_COMMAND_WIDTH = 320;
-export declare const MIN_COMMAND_WIDTH = 260;
-export declare const SPLITTER_SIZE = 6;
-export declare const jsonTreeTheme: {
-    base00: string;
-    base01: string;
-    base02: string;
-    base03: string;
-    base04: string;
-    base05: string;
-    base06: string;
-    base07: string;
-    base08: string;
-    base09: string;
-    base0A: string;
-    base0B: string;
-    base0C: string;
-    base0D: string;
-    base0E: string;
-    base0F: string;
-};
-//# sourceMappingURL=constants.d.ts.map

package/dist/dev-host/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/dev-host/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,0BAA0B,CAAC;AAEjE,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,aAAa,IAAI,CAAC;AAE/B,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;CAiBzB,CAAC"}

package/dist/dev-host/index.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=index.d.ts.map

package/dist/dev-host/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dev-host/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC"}

package/dist/dev-host/types.d.ts

@@ -1,29 +0,0 @@
-export type DevHostPanelEntry = {
-    label: string;
-    source: string;
-};
-export type DevHostState = {
-    packageName: string;
-    packageDescription: string;
-    panels: DevHostPanelEntry[];
-};
-export type MessageEntry = {
-    id: string;
-    direction: 'in' | 'out';
-    date: string;
-    type: string;
-    payload: unknown;
-};
-export type PluginMessage = {
-    pluginId: string;
-    type: string;
-    payload: unknown;
-};
-export type ResizeHandleId = 'devtools-height' | 'command-width' | 'details-width';
-export type ResizeSession = {
-    handleId: ResizeHandleId;
-    pointerId: number;
-    element: HTMLElement;
-    onMove: (event: PointerEvent) => void;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/dev-host/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/dev-host/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,IAAI,GAAG,KAAK,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,iBAAiB,GAAG,eAAe,GAAG,eAAe,CAAC;AAEnF,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,cAAc,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CACvC,CAAC"}

package/dist/dev-host/utils.d.ts

@@ -1,13 +0,0 @@
-import { DevHostPanelEntry, DevHostState, MessageEntry, PluginMessage } from './types.js';
-export declare const cn: (...parts: Array<string | false | null | undefined>) => string;
-export declare const formatPayloadPreview: (payload: unknown) => string;
-export declare const isJsonTreeData: (value: unknown) => value is Record<string, unknown> | unknown[];
-export declare const formatMessageDate: (date: string) => string;
-export declare const formatMessageTableDate: (date: string) => string;
-export declare const formatPayloadForCommandInput: (payload: unknown) => string;
-export declare const isPluginMessage: (value: unknown) => value is PluginMessage;
-export declare const getInitialPanel: (panels: DevHostPanelEntry[]) => DevHostPanelEntry;
-export declare const createMessageEntry: (input: Omit<MessageEntry, "id" | "date">) => MessageEntry;
-export declare const clamp: (value: number, min: number, max: number) => number;
-export declare const readDevHostState: () => DevHostState;
-//# sourceMappingURL=utils.d.ts.map

package/dist/dev-host/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/dev-host/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE/F,eAAO,MAAM,EAAE,GAAI,GAAG,OAAO,KAAK,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,WAEpE,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,SAAS,OAAO,WAcpD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,EAEzF,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,MAAM,WAE7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,MAAM,WASlD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,SAAS,OAAO,WAM5D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,OAAO,OAAO,KAAG,KAAK,IAAI,aAQzD,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,QAAQ,iBAAiB,EAAE,sBAW1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,OAAO,IAAI,CAAC,YAAY,EAAE,IAAI,GAAG,MAAM,CAAC,KACvC,YAMF,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,WAE5D,CAAC;AAEF,eAAO,MAAM,gBAAgB,QAAO,YAQnC,CAAC"}

package/src/dev-host/App.tsx

@@ -1,403 +0,0 @@
-import {
-  useEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type FormEvent,
-  type PointerEvent as ReactPointerEvent,
-} from 'react';
-import {
-  DEFAULT_COMMAND_WIDTH,
-  DEFAULT_DEVTOOLS_HEIGHT,
-  DETAILS_PANEL_WIDTH,
-  MIN_COMMAND_WIDTH,
-  MIN_DETAILS_WIDTH,
-  MIN_DEVTOOLS_HEIGHT,
-  MIN_IFRAME_HEIGHT,
-  SPLITTER_SIZE,
-} from './constants.js';
-import type {
-  DevHostPanelEntry,
-  DevHostState,
-  MessageEntry,
-  ResizeHandleId,
-  ResizeSession,
-} from './types.js';
-import { clamp, createMessageEntry, getInitialPanel, isPluginMessage } from './utils.js';
-import { DispatchForm } from './components/DispatchForm.js';
-import {
-  MessageDetailsPane,
-  getDispatcherValuesFromMessage,
-} from './components/MessageDetailsPane.js';
-import { MessageLogPane } from './components/MessageLogPane.js';
-import { PanelTabs } from './components/PanelTabs.js';
-import { ResizeHandle } from './components/ResizeHandle.js';
-
-type CSSVariables = CSSProperties & Record<`--${string}`, string>;
-
-const getViewportMatch = () => {
-  return window.matchMedia('(max-width: 960px)').matches;
-};
-
-export const App = ({ packageName, packageDescription, panels }: DevHostState) => {
-  const [activePanel, setActivePanel] = useState<DevHostPanelEntry | null>(() => {
-    return getInitialPanel(panels);
-  });
-  const [commandType, setCommandType] = useState('');
-  const [commandPayload, setCommandPayload] = useState('');
-  const [messages, setMessages] = useState<MessageEntry[]>([]);
-  const [selectedMessageId, setSelectedMessageId] = useState<string | null>(null);
-  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
-  const [devToolsHeight, setDevToolsHeight] = useState(DEFAULT_DEVTOOLS_HEIGHT);
-  const [commandWidth, setCommandWidth] = useState(DEFAULT_COMMAND_WIDTH);
-  const [detailsWidth, setDetailsWidth] = useState(DETAILS_PANEL_WIDTH);
-  const [activeResizeHandle, setActiveResizeHandle] = useState<ResizeHandleId | null>(null);
-  const [isNarrowViewport, setIsNarrowViewport] = useState(getViewportMatch);
-  const workspaceRef = useRef<HTMLElement | null>(null);
-  const logWorkspaceRef = useRef<HTMLDivElement | null>(null);
-  const devtoolsRef = useRef<HTMLElement | null>(null);
-  const resizeSessionRef = useRef<ResizeSession | null>(null);
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-
-  const activeSource = activePanel?.source ?? '';
-  const activeLabel = activePanel?.label ?? '';
-  const emptyState = panels.length === 0;
-  const selectedMessage = messages.find((message) => message.id === selectedMessageId) ?? null;
-  const trimmedCommandType = commandType.trim();
-  const trimmedCommandPayload = commandPayload.trim();
-  const hasCommandType = trimmedCommandType.length > 0;
-  const hasValidCommandPayload = (() => {
-    if (!trimmedCommandPayload) {
-      return false;
-    }
-
-    try {
-      JSON.parse(commandPayload);
-      return true;
-    } catch {
-      return false;
-    }
-  })();
-  const canDispatch = hasCommandType && hasValidCommandPayload;
-  const panelDescription = packageDescription.trim();
-
-  useEffect(() => {
-    document.title = `${packageName} Dev Host`;
-  }, [packageName]);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia('(max-width: 960px)');
-
-    const handleChange = (event: MediaQueryListEvent) => {
-      setIsNarrowViewport(event.matches);
-    };
-
-    setIsNarrowViewport(mediaQuery.matches);
-    mediaQuery.addEventListener('change', handleChange);
-
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-
-  const selectPanel = (value: string) => {
-    const nextPanel = panels.find((panel) => panel.source === value);
-    if (!nextPanel) {
-      return;
-    }
-
-    setActivePanel(nextPanel);
-    const nextUrl = new URL(window.location.href);
-    nextUrl.searchParams.set('panel', nextPanel.label);
-    window.history.replaceState(null, '', nextUrl);
-  };
-
-  const appendMessage = (input: Omit<MessageEntry, 'id' | 'date'>) => {
-    const nextEntry = createMessageEntry(input);
-
-    setMessages((current) => [nextEntry, ...current]);
-    setSelectedMessageId(nextEntry.id);
-    setIsDetailsOpen(true);
-  };
-
-  useEffect(() => {
-    const handlePointerMove = (event: PointerEvent) => {
-      resizeSessionRef.current?.onMove(event);
-    };
-
-    const stopDragging = () => {
-      const session = resizeSessionRef.current;
-      if (!session) {
-        return;
-      }
-
-      if (session.element.hasPointerCapture(session.pointerId)) {
-        session.element.releasePointerCapture(session.pointerId);
-      }
-
-      resizeSessionRef.current = null;
-      setActiveResizeHandle(null);
-    };
-
-    window.addEventListener('pointermove', handlePointerMove);
-    window.addEventListener('pointerup', stopDragging);
-    window.addEventListener('pointercancel', stopDragging);
-
-    return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
-      window.removeEventListener('pointerup', stopDragging);
-      window.removeEventListener('pointercancel', stopDragging);
-    };
-  }, []);
-
-  const startResize = (
-    handleId: ResizeHandleId,
-    event: ReactPointerEvent<HTMLDivElement>,
-    onMove: (event: PointerEvent) => void,
-  ) => {
-    event.preventDefault();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    resizeSessionRef.current = {
-      handleId,
-      pointerId: event.pointerId,
-      element: event.currentTarget,
-      onMove,
-    };
-    setActiveResizeHandle(handleId);
-  };
-
-  useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      if (event.source !== iframeRef.current?.contentWindow) {
-        return;
-      }
-
-      if (
-        typeof event.data !== 'object' ||
-        event.data === null ||
-        !('type' in event.data) ||
-        event.data.type !== 'rozenite-message' ||
-        !('payload' in event.data)
-      ) {
-        return;
-      }
-
-      const payload = event.data.payload;
-
-      if (!isPluginMessage(payload)) {
-        return;
-      }
-
-      appendMessage({
-        direction: 'out',
-        type: payload.type,
-        payload: payload.payload,
-      });
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  const resetForm = () => {
-    setCommandType('');
-    setCommandPayload('');
-  };
-
-  const clearMessages = () => {
-    setMessages([]);
-    setSelectedMessageId(null);
-    setIsDetailsOpen(false);
-  };
-
-  const resizeDevtoolsHeight = (event: PointerEvent) => {
-    const workspace = workspaceRef.current;
-    if (!workspace) {
-      return;
-    }
-
-    const bounds = workspace.getBoundingClientRect();
-    const nextHeight = bounds.bottom - event.clientY;
-    const maxHeight = Math.max(MIN_DEVTOOLS_HEIGHT, bounds.height - MIN_IFRAME_HEIGHT - 12);
-
-    setDevToolsHeight(clamp(nextHeight, MIN_DEVTOOLS_HEIGHT, maxHeight));
-  };
-
-  const resizeCommandPane = (event: PointerEvent) => {
-    const devtools = devtoolsRef.current;
-    if (!devtools) {
-      return;
-    }
-
-    const bounds = devtools.getBoundingClientRect();
-    const nextWidth = isNarrowViewport
-      ? bounds.bottom - event.clientY
-      : bounds.right - event.clientX;
-    const maxWidth = Math.max(MIN_COMMAND_WIDTH, bounds.width - 280);
-
-    setCommandWidth(clamp(nextWidth, MIN_COMMAND_WIDTH, maxWidth));
-  };
-
-  const resizeDetailsPane = (event: PointerEvent) => {
-    const logWorkspace = logWorkspaceRef.current;
-    if (!logWorkspace || !isDetailsOpen || !selectedMessage) {
-      return;
-    }
-
-    const bounds = logWorkspace.getBoundingClientRect();
-    const nextWidth = isNarrowViewport
-      ? bounds.bottom - event.clientY
-      : bounds.right - event.clientX;
-    const maxWidth = Math.max(MIN_DETAILS_WIDTH, bounds.width - 280 - SPLITTER_SIZE);
-
-    setDetailsWidth(clamp(nextWidth, MIN_DETAILS_WIDTH, maxWidth));
-  };
-
-  const handleDispatch = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-
-    if (!canDispatch) {
-      return;
-    }
-
-    const type = trimmedCommandType;
-
-    let payload: unknown;
-
-    try {
-      payload = JSON.parse(commandPayload);
-    } catch (error) {
-      window.alert(
-        error instanceof Error
-          ? `Payload must be valid JSON. ${error.message}`
-          : 'Payload must be valid JSON.',
-      );
-      return;
-    }
-
-    iframeRef.current?.contentWindow?.postMessage(
-      {
-        pluginId: packageName,
-        type,
-        payload,
-      },
-      '*',
-    );
-
-    appendMessage({
-      direction: 'in',
-      type,
-      payload,
-    });
-
-    resetForm();
-  };
-
-  return (
-    <div className="rz-shell">
-      <header className="rz-topbar">
-        <div title={panelDescription || undefined}>
-          <PanelTabs panels={panels} activeSource={activeSource} onValueChange={selectPanel} />
-        </div>
-      </header>
-
-      <main
-        ref={workspaceRef}
-        className="rz-workspace"
-        style={{ '--rz-devtools-height': `${devToolsHeight}px` } as CSSVariables}
-      >
-        <section className="rz-card">
-          {emptyState ? (
-            <div className="rz-empty-state">No panels were defined in rozenite.config.ts.</div>
-          ) : (
-            <iframe
-              key={activeSource}
-              ref={iframeRef}
-              title={activeLabel || 'Rozenite panel preview'}
-              src={activeSource}
-              className="rz-iframe"
-              data-resizing={activeResizeHandle === 'devtools-height'}
-            />
-          )}
-        </section>
-
-        <ResizeHandle
-          className="rz-resize-handle"
-          isDragging={activeResizeHandle === 'devtools-height'}
-          orientation="horizontal"
-          label="Resize DevTools"
-          onPointerDown={(event) => startResize('devtools-height', event, resizeDevtoolsHeight)}
-        />
-
-        <section
-          ref={devtoolsRef}
-          className="rz-devtools"
-          style={
-            {
-              '--rz-command-width': `${commandWidth}px`,
-              '--rz-command-splitter-width': `${SPLITTER_SIZE}px`,
-            } as CSSVariables
-          }
-        >
-          <div
-            ref={logWorkspaceRef}
-            className="rz-log-workspace"
-            style={
-              {
-                '--rz-details-width':
-                  isDetailsOpen && selectedMessage ? `${detailsWidth}px` : '0px',
-                '--rz-details-splitter-width':
-                  isDetailsOpen && selectedMessage ? `${SPLITTER_SIZE}px` : '0px',
-              } as CSSVariables
-            }
-          >
-            <MessageLogPane
-              messages={messages}
-              selectedMessageId={selectedMessageId}
-              onSelectMessage={(messageId) => {
-                setSelectedMessageId(messageId);
-                setIsDetailsOpen(true);
-              }}
-              onClearMessages={clearMessages}
-            />
-
-            <MessageDetailsPane
-              selectedMessage={selectedMessage}
-              isOpen={isDetailsOpen}
-              isNarrowViewport={isNarrowViewport}
-              activeResizeHandle={activeResizeHandle}
-              onClose={() => setIsDetailsOpen(false)}
-              onUseMessage={(message) => {
-                const nextValues = getDispatcherValuesFromMessage(message);
-                setCommandType(nextValues.commandType);
-                setCommandPayload(nextValues.commandPayload);
-              }}
-              onResizeStart={(event) => startResize('details-width', event, resizeDetailsPane)}
-            />
-          </div>
-
-          <ResizeHandle
-            className="rz-column-resize-handle"
-            isDragging={activeResizeHandle === 'command-width'}
-            orientation={isNarrowViewport ? 'horizontal' : 'vertical'}
-            label="Resize command dispatcher"
-            onPointerDown={(event) => startResize('command-width', event, resizeCommandPane)}
-          />
-
-          <DispatchForm
-            commandType={commandType}
-            commandPayload={commandPayload}
-            canDispatch={canDispatch}
-            onCommandTypeChange={setCommandType}
-            onCommandPayloadChange={setCommandPayload}
-            onReset={resetForm}
-            onSubmit={handleDispatch}
-          />
-        </section>
-      </main>
-    </div>
-  );
-};

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

@@ -1,87 +0,0 @@
-import type { FormEvent } from 'react';
-import { ClearIcon, SendIcon } from './icons.js';
-import { ScrollArea } from './ui/ScrollArea.js';
-
-type DispatchFormProps = {
-  commandType: string;
-  commandPayload: string;
-  canDispatch: boolean;
-  onCommandTypeChange: (value: string) => void;
-  onCommandPayloadChange: (value: string) => void;
-  onReset: () => void;
-  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
-};
-
-export const DispatchForm = ({
-  commandType,
-  commandPayload,
-  canDispatch,
-  onCommandTypeChange,
-  onCommandPayloadChange,
-  onReset,
-  onSubmit,
-}: DispatchFormProps) => {
-  return (
-    <div className="rz-pane">
-      <div className="rz-sidebar">
-        <div className="rz-sidebar-header">
-          <div className="rz-sidebar-title">Dispatch Message</div>
-        </div>
-
-        <ScrollArea className="rz-sidebar-scroll">
-          <form className="rz-command-form" onSubmit={onSubmit}>
-            <div className="rz-field">
-              <label className="rz-label" htmlFor="command-type">
-                Command
-              </label>
-              <input
-                id="command-type"
-                className="rz-input"
-                value={commandType}
-                onChange={(event) => onCommandTypeChange(event.currentTarget.value)}
-                placeholder="get-snapshot"
-                spellCheck={false}
-              />
-            </div>
-
-            <div className="rz-field">
-              <label className="rz-label" htmlFor="command-payload">
-                Payload
-              </label>
-              <textarea
-                id="command-payload"
-                className="rz-textarea"
-                value={commandPayload}
-                onChange={(event) => onCommandPayloadChange(event.currentTarget.value)}
-                placeholder='{"example": true}'
-                spellCheck={false}
-              />
-            </div>
-
-            <div className="rz-button-row">
-              <button
-                type="button"
-                className="rz-sidebar-close"
-                aria-label="Reset dispatcher"
-                title="Reset dispatcher"
-                onClick={onReset}
-              >
-                <ClearIcon />
-              </button>
-
-              <button
-                type="submit"
-                className="rz-sidebar-close rz-sidebar-action-primary"
-                aria-label="Dispatch message"
-                title="Dispatch message"
-                disabled={!canDispatch}
-              >
-                <SendIcon />
-              </button>
-            </div>
-          </form>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-};