@exellix/diagrams-toolkit 0.2.0

package/src/GraphCanvas.jsx

@@ -0,0 +1,455 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { GraphCanvasZoomControl } from './GraphCanvasZoomControl.jsx';
+import { DefaultGraphEdge } from './DefaultGraphEdge.jsx';
+import {
+  clampGraphCanvasScale,
+  graphCanvasPercentToScale,
+  graphCanvasScaleToPercent,
+} from './lib/graphCanvasZoom.js';
+import { computeGraphViewportResizePan } from './lib/graphViewportResizePan.js';
+import { DEFAULT_NODE_CARD_WIDTH, GRAPH_NODE_CARD_APPROX_HEIGHT } from './lib/graphCanvasLayout.js';
+
+const DEFAULT_TRANSFORM = { x: 0, y: 0, scale: 0.8 };
+
+const ARROW_DEFS = (
+  <defs>
+    <marker id="arrowhead-normal" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#cbd5e1" />
+    </marker>
+    <marker id="arrowhead-condition" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#f59e0b" />
+    </marker>
+    <marker id="arrowhead-teal" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#0d9488" />
+    </marker>
+    <marker id="arrowhead-selected" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#4f46e5" />
+    </marker>
+    <marker id="arrowhead-virtual" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
+    </marker>
+  </defs>
+);
+
+/**
+ * Interactive graph topology canvas: pan, zoom, node drag, SVG edges, optional zoom controls.
+ *
+ * @param {{
+ *   nodes: object[],
+ *   edges: object[],
+ *   canvasNodes?: object[],
+ *   transform?: GraphTransform,
+ *   onTransformChange?: (t: GraphTransform) => void,
+ *   defaultTransform?: GraphTransform,
+ *   onNodesChange?: (nodes: object[]) => void,
+ *   selectedItem?: { type: string, id?: string, obj?: object } | null,
+ *   onSelectItem?: (item: { type: string, id?: string, obj?: object } | null) => void,
+ *   renderNode: (node: object, ctx: { selected: boolean, filteredOut?: boolean, highlightRole?: string }) => React.ReactNode,
+ *   renderEdge?: (edge: object, ctx: { sourceNode: object, targetNode: object, selected: boolean, index: number, filteredOut?: boolean }) => React.ReactNode,
+ *   renderExtraEdges?: () => React.ReactNode,
+ *   onNodePointerDown?: (e: React.PointerEvent, node: object) => void,
+ *   isNodeDraggable?: (node: object) => boolean,
+ *   onNodeDragStart?: () => void,
+ *   onNodeDragEnd?: (moved: boolean) => void,
+ *   fitViewNodes?: object[],
+ *   fitViewRequest?: number,
+ *   viewportResizeExtraNodes?: object[],
+ *   nodeWidth?: number,
+ *   nodeHeight?: number,
+ *   anchorY?: number,
+ *   showZoomControls?: boolean,
+ *   enableKeyboardZoom?: boolean,
+ *   className?: string,
+ *   children?: React.ReactNode,
+ * }} props
+ * @param {React.Ref<{ fitViewToContent: () => void, applyCanvasZoomScale: (scale: number) => void, getTransform: () => GraphTransform }>} ref
+ */
+export const GraphCanvas = forwardRef(function GraphCanvas(
+  {
+    nodes,
+    edges,
+    canvasNodes,
+    transform: controlledTransform,
+    onTransformChange,
+    defaultTransform = DEFAULT_TRANSFORM,
+    onNodesChange,
+    selectedItem = null,
+    onSelectItem,
+    renderNode,
+    renderEdge,
+    renderExtraEdges,
+    onNodePointerDown,
+    isNodeDraggable = (node) => !node?.isVirtual,
+    onNodeDragStart,
+    onNodeDragEnd,
+    fitViewNodes,
+    fitViewRequest = 0,
+    viewportResizeExtraNodes = [],
+    nodeWidth = DEFAULT_NODE_CARD_WIDTH,
+    nodeHeight = GRAPH_NODE_CARD_APPROX_HEIGHT,
+    anchorY = 60,
+    showZoomControls = true,
+    enableKeyboardZoom = true,
+    className = '',
+    children,
+  },
+  ref,
+) {
+  const containerRef = useRef(null);
+  const [internalTransform, setInternalTransform] = useState(defaultTransform);
+  const transform = controlledTransform ?? internalTransform;
+  const transformRef = useRef(transform);
+  transformRef.current = transform;
+
+  const setTransform = useCallback(
+    (updater) => {
+      const next = typeof updater === 'function' ? updater(transformRef.current) : updater;
+      transformRef.current = next;
+      if (onTransformChange) onTransformChange(next);
+      else setInternalTransform(next);
+    },
+    [onTransformChange],
+  );
+
+  const [dragState, setDragState] = useState(null);
+  const nodeDragMovedRef = useRef(false);
+  const viewportSizeRef = useRef(null);
+  const pendingFitViewRef = useRef(false);
+
+  const nodesToRender = canvasNodes ?? nodes;
+  const nodeById = Object.fromEntries(nodesToRender.map((n) => [n.id, n]));
+  const boundsNodes = fitViewNodes ?? nodesToRender;
+
+  const fitViewToContent = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const vw = rect.width;
+    const vh = rect.height;
+    const list = boundsNodes;
+    if (list.length === 0) {
+      setTransform({ x: Math.round(vw * 0.06), y: Math.round(vh * 0.08), scale: 0.85 });
+      return;
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const n of list) {
+      minX = Math.min(minX, n.x);
+      minY = Math.min(minY, n.y);
+      maxX = Math.max(maxX, n.x + nodeWidth);
+      maxY = Math.max(maxY, n.y + nodeHeight);
+    }
+    const bw = Math.max(maxX - minX, 420);
+    const bh = Math.max(maxY - minY, 280);
+    const pad = 56;
+    const s = Math.min(1.25, Math.max(0.1, Math.min((vw - 2 * pad) / bw, (vh - 2 * pad) / bh)));
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    setTransform({
+      scale: s,
+      x: vw / 2 - cx * s,
+      y: vh / 2 - cy * s,
+    });
+  }, [boundsNodes, nodeWidth, nodeHeight, setTransform]);
+
+  const applyCanvasZoomScale = useCallback(
+    (targetScale) => {
+      const el = containerRef.current;
+      const rect = el?.getBoundingClientRect();
+      const anchorX = rect ? rect.width / 2 : 0;
+      const anchorYCenter = rect ? rect.height / 2 : 0;
+      setTransform((prev) => {
+        const newScale = clampGraphCanvasScale(targetScale);
+        return {
+          scale: newScale,
+          x: anchorX - (anchorX - prev.x) * (newScale / prev.scale),
+          y: anchorYCenter - (anchorYCenter - prev.y) * (newScale / prev.scale),
+        };
+      });
+    },
+    [setTransform],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      fitViewToContent,
+      applyCanvasZoomScale,
+      getTransform: () => transformRef.current,
+      getContainer: () => containerRef.current,
+    }),
+    [fitViewToContent, applyCanvasZoomScale],
+  );
+
+  useLayoutEffect(() => {
+    if (fitViewRequest <= 0) return;
+    pendingFitViewRef.current = true;
+  }, [fitViewRequest]);
+
+  useLayoutEffect(() => {
+    if (!pendingFitViewRef.current || !containerRef.current) return;
+    pendingFitViewRef.current = false;
+    fitViewToContent();
+  }, [fitViewRequest, boundsNodes, fitViewToContent]);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return undefined;
+
+    const applyResizePan = () => {
+      const rect = el.getBoundingClientRect();
+      const nextSize = { width: rect.width, height: rect.height };
+      const prevSize = viewportSizeRef.current;
+      viewportSizeRef.current = nextSize;
+      if (!prevSize || pendingFitViewRef.current) return;
+
+      const { x: panX, y: panY } = computeGraphViewportResizePan({
+        prevSize,
+        nextSize,
+        transform: transformRef.current,
+        nodes,
+        extraNodes: viewportResizeExtraNodes,
+        cardWidth: nodeWidth,
+        cardHeight: nodeHeight,
+      });
+      if (Math.abs(panX) < 0.5 && Math.abs(panY) < 0.5) return;
+      setTransform((prev) => ({ ...prev, x: prev.x + panX, y: prev.y + panY }));
+    };
+
+    applyResizePan();
+    const ro = new ResizeObserver(applyResizePan);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [nodes, viewportResizeExtraNodes, nodeWidth, nodeHeight, setTransform]);
+
+  useEffect(() => {
+    if (!enableKeyboardZoom) return undefined;
+    const isEditableTarget = (el) => {
+      if (!(el instanceof HTMLElement)) return false;
+      const tag = el.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true;
+      if (el.isContentEditable) return true;
+      return Boolean(el.closest('[contenteditable="true"]'));
+    };
+    const onKeyDown = (e) => {
+      if (isEditableTarget(e.target)) return;
+      const mod = e.ctrlKey || e.metaKey;
+      if (!mod) return;
+      if (e.key === '=' || e.key === '+') {
+        e.preventDefault();
+        applyCanvasZoomScale(transformRef.current.scale * 1.2);
+      } else if (e.key === '-' || e.key === '_') {
+        e.preventDefault();
+        applyCanvasZoomScale(transformRef.current.scale * 0.8);
+      } else if (e.key === '0') {
+        e.preventDefault();
+        fitViewToContent();
+      }
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [enableKeyboardZoom, applyCanvasZoomScale, fitViewToContent]);
+
+  const handleWheel = (e) => {
+    if (!containerRef.current) return;
+    e.preventDefault();
+    const zoomSensitivity = 0.001;
+    const delta = -e.deltaY * zoomSensitivity;
+    const newScale = clampGraphCanvasScale(transform.scale * Math.exp(delta));
+    const rect = containerRef.current.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    setTransform((prev) => ({
+      scale: newScale,
+      x: mouseX - (mouseX - prev.x) * (newScale / prev.scale),
+      y: mouseY - (mouseY - prev.y) * (newScale / prev.scale),
+    }));
+  };
+
+  const handlePointerDown = (e) => {
+    if (
+      e.target.closest('.node-element') ||
+      e.target.closest('.edge-element') ||
+      e.target.closest('.panel-element') ||
+      e.target.closest('.graph-zoom-controls')
+    ) {
+      return;
+    }
+    onSelectItem?.(null);
+    setDragState({
+      type: 'pan',
+      startX: e.clientX,
+      startY: e.clientY,
+      initialX: transform.x,
+      initialY: transform.y,
+    });
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e) => {
+    if (!dragState) return;
+    if (dragState.type === 'pan') {
+      setTransform((prev) => ({
+        ...prev,
+        x: dragState.initialX + (e.clientX - dragState.startX),
+        y: dragState.initialY + (e.clientY - dragState.startY),
+      }));
+    } else if (dragState.type === 'node' && onNodesChange) {
+      const dx = (e.clientX - dragState.startX) / transform.scale;
+      const dy = (e.clientY - dragState.startY) / transform.scale;
+      if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+        if (!nodeDragMovedRef.current) {
+          nodeDragMovedRef.current = true;
+          onNodeDragStart?.();
+        }
+      }
+      onNodesChange(
+        nodes.map((n) =>
+          n.id === dragState.nodeId
+            ? { ...n, x: dragState.initialNodeX + dx, y: dragState.initialNodeY + dy }
+            : n,
+        ),
+      );
+    }
+  };
+
+  const handlePointerUp = (e) => {
+    if (!dragState) return;
+    if (
+      typeof e.currentTarget.hasPointerCapture === 'function' &&
+      e.currentTarget.hasPointerCapture(e.pointerId)
+    ) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    if (dragState.type === 'node') {
+      onNodeDragEnd?.(nodeDragMovedRef.current);
+      nodeDragMovedRef.current = false;
+    }
+    setDragState(null);
+  };
+
+  const handleNodePointerDown = (e, node) => {
+    onNodePointerDown?.(e, node);
+    if (e.defaultPrevented) return;
+    e.stopPropagation();
+    onSelectItem?.({ type: 'node', id: node.id, obj: node });
+    nodeDragMovedRef.current = false;
+    if (!isNodeDraggable(node) || !onNodesChange) return;
+    setDragState({
+      type: 'node',
+      nodeId: node.id,
+      startX: e.clientX,
+      startY: e.clientY,
+      initialNodeX: node.x,
+      initialNodeY: node.y,
+    });
+  };
+
+  const handleEdgeClick = (edge) => {
+    onSelectItem?.({ type: 'edge', id: `${edge.from}-${edge.to}`, obj: edge });
+  };
+
+  const renderEdgeFn = renderEdge ?? ((edge, ctx) => (
+    <DefaultGraphEdge
+      key={`${edge.from}-${edge.to}-${ctx.index}`}
+      edge={edge}
+      sourceNode={ctx.sourceNode}
+      targetNode={ctx.targetNode}
+      selected={ctx.selected}
+      filteredOut={ctx.filteredOut}
+      onClick={handleEdgeClick}
+      nodeWidth={nodeWidth}
+      anchorY={anchorY}
+    />
+  ));
+
+  return (
+    <main
+      ref={containerRef}
+      className={`flex-1 min-h-0 min-w-0 relative outline-none overflow-hidden ${className}`}
+      onWheel={handleWheel}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerLeave={handlePointerUp}
+      style={{ touchAction: 'none' }}
+    >
+      <div
+        className="absolute inset-0 pointer-events-none opacity-40"
+        style={{
+          backgroundImage: 'radial-gradient(circle, #94a3b8 1px, transparent 1px)',
+          backgroundSize: `${24 * transform.scale}px ${24 * transform.scale}px`,
+          backgroundPosition: `${transform.x}px ${transform.y}px`,
+        }}
+      />
+
+      <div
+        className="absolute inset-0 z-10 origin-top-left overflow-visible"
+        style={{
+          transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
+        }}
+      >
+        <svg
+          className="absolute inset-0 h-full w-full overflow-visible pointer-events-none bg-transparent"
+          style={{ zIndex: 0 }}
+        >
+          {ARROW_DEFS}
+          {renderExtraEdges?.()}
+          {edges.map((edge, idx) => {
+            const source = nodeById[edge.from];
+            const target = nodeById[edge.to];
+            if (!source || !target) return null;
+            const selected = selectedItem?.type === 'edge' && selectedItem?.obj === edge;
+            return (
+              <React.Fragment key={`${edge.from}-${edge.to}-${idx}`}>
+                {renderEdgeFn(edge, {
+                  sourceNode: source,
+                  targetNode: target,
+                  selected,
+                  index: idx,
+                  filteredOut: false,
+                })}
+              </React.Fragment>
+            );
+          })}
+        </svg>
+
+        <div className="absolute top-0 left-0" style={{ zIndex: 1 }}>
+          {nodesToRender.map((node) => {
+            const selected = selectedItem?.type === 'node' && selectedItem?.id === node.id;
+            return (
+              <div key={node.id} className="node-element absolute">
+                {renderNode(node, {
+                  selected,
+                  onPointerDown: (e) => handleNodePointerDown(e, node),
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {showZoomControls ? (
+        <GraphCanvasZoomControl
+          scalePercent={graphCanvasScaleToPercent(transform.scale)}
+          onScalePercentChange={(pct) => applyCanvasZoomScale(graphCanvasPercentToScale(pct))}
+          onFitView={fitViewToContent}
+        />
+      ) : null}
+
+      {children}
+    </main>
+  );
+});
+
+GraphCanvas.displayName = 'GraphCanvas';

package/src/GraphCanvasZoomControl.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Crosshair } from 'lucide-react';
+import {
+  GRAPH_CANVAS_MAX_PERCENT,
+  GRAPH_CANVAS_MIN_PERCENT,
+} from './lib/graphCanvasZoom.js';
+
+/**
+ * Graph canvas zoom: slider + fit view.
+ *
+ * @param {{
+ *   scalePercent: number,
+ *   onScalePercentChange: (percent: number) => void,
+ *   onFitView: () => void,
+ *   minPercent?: number,
+ *   maxPercent?: number,
+ *   className?: string,
+ * }} props
+ */
+export function GraphCanvasZoomControl({
+  scalePercent,
+  onScalePercentChange,
+  onFitView,
+  minPercent = GRAPH_CANVAS_MIN_PERCENT,
+  maxPercent = GRAPH_CANVAS_MAX_PERCENT,
+  className = '',
+}) {
+  const pct = Math.min(maxPercent, Math.max(minPercent, Math.round(scalePercent)));
+
+  return (
+    <div
+      className={`graph-zoom-controls panel-element absolute bottom-6 left-6 flex items-center gap-2 bg-white border border-slate-200 rounded-lg shadow-md z-30 pointer-events-auto px-2.5 py-2 min-w-[10rem] ${className}`}
+      onPointerDown={(e) => e.stopPropagation()}
+    >
+      <input
+        type="range"
+        min={minPercent}
+        max={maxPercent}
+        step={5}
+        value={pct}
+        onChange={(e) => onScalePercentChange(Number(e.target.value))}
+        className="graph-zoom-range flex-1 min-w-[6rem] h-1.5 cursor-pointer accent-indigo-600"
+        aria-label="Canvas zoom"
+        aria-valuemin={minPercent}
+        aria-valuemax={maxPercent}
+        aria-valuenow={pct}
+      />
+      <button
+        type="button"
+        className="shrink-0 p-1.5 rounded-md hover:bg-slate-50 text-slate-600 border border-slate-200"
+        onClick={onFitView}
+        title="Fit graph in view"
+        aria-label="Fit graph in view"
+      >
+        <Crosshair size={16} aria-hidden />
+      </button>
+    </div>
+  );
+}

package/src/InspectorShell.jsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useRef } from 'react';
+
+/**
+ * @param {{
+ *   width: number,
+ *   minWidth?: number,
+ *   maxWidth?: number,
+ *   onResize: (width: number) => void,
+ *   children: React.ReactNode,
+ *   className?: string,
+ * }} props
+ */
+export function InspectorShell({
+  width,
+  minWidth = 320,
+  maxWidth = 720,
+  onResize,
+  children,
+  className = '',
+}) {
+  const dragging = useRef(false);
+
+  const onPointerDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      const startX = e.clientX;
+      const startW = width;
+
+      const onMove = (ev) => {
+        if (!dragging.current) return;
+        const delta = startX - ev.clientX;
+        const next = Math.min(maxWidth, Math.max(minWidth, startW + delta));
+        onResize(next);
+      };
+
+      const onUp = () => {
+        dragging.current = false;
+        window.removeEventListener('pointermove', onMove);
+        window.removeEventListener('pointerup', onUp);
+      };
+
+      window.addEventListener('pointermove', onMove);
+      window.addEventListener('pointerup', onUp);
+    },
+    [width, minWidth, maxWidth, onResize],
+  );
+
+  return (
+    <aside
+      className={`relative shrink-0 border-l border-slate-200 bg-white flex flex-col min-h-0 ${className}`}
+      style={{ width }}
+    >
+      <div
+        className="absolute left-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-indigo-200/60 z-10"
+        onPointerDown={onPointerDown}
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Resize inspector"
+      />
+      {children}
+    </aside>
+  );
+}

package/src/JsonDocumentPanel.jsx

@@ -0,0 +1,95 @@
+import React, { useMemo, useState } from 'react';
+import { Check, RotateCcw } from 'lucide-react';
+
+/**
+ * @param {{
+ *   value: string,
+ *   onChange: (value: string) => void,
+ *   onApply?: () => void,
+ *   onRevert?: () => void,
+ *   error?: string | null,
+ *   dirty?: boolean,
+ *   readOnly?: boolean,
+ *   title?: string,
+ *   className?: string,
+ * }} props
+ */
+export function JsonDocumentPanel({
+  value,
+  onChange,
+  onApply,
+  onRevert,
+  error,
+  dirty = false,
+  readOnly = false,
+  title = 'JSON document',
+  className = '',
+}) {
+  const [formatError, setFormatError] = useState('');
+
+  const handleFormat = () => {
+    try {
+      const parsed = JSON.parse(value);
+      onChange(JSON.stringify(parsed, null, 2));
+      setFormatError('');
+    } catch (e) {
+      setFormatError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const statusLabel = useMemo(() => {
+    if (error || formatError) return 'Invalid JSON';
+    if (dirty) return 'Draft differs';
+    return 'In sync';
+  }, [error, formatError, dirty]);
+
+  return (
+    <div className={`flex flex-col flex-1 min-h-0 bg-slate-100 ${className}`}>
+      <div className="flex flex-wrap items-center gap-2 px-4 py-2.5 bg-white border-b border-slate-200 shrink-0">
+        <span className="text-sm font-semibold text-slate-800 mr-2">{title}</span>
+        {!readOnly && onApply ? (
+          <button
+            type="button"
+            onClick={onApply}
+            disabled={Boolean(error) || !dirty}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold text-white bg-indigo-600 hover:bg-indigo-700 disabled:opacity-45 rounded-md"
+          >
+            <Check size={14} /> Apply
+          </button>
+        ) : null}
+        {!readOnly && onRevert ? (
+          <button
+            type="button"
+            onClick={onRevert}
+            disabled={!dirty}
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-700 border border-slate-200 hover:bg-slate-50 disabled:opacity-45 rounded-md"
+          >
+            <RotateCcw size={14} /> Revert
+          </button>
+        ) : null}
+        {!readOnly ? (
+          <button
+            type="button"
+            onClick={handleFormat}
+            className="px-3 py-1.5 text-sm text-slate-700 border border-slate-200 hover:bg-slate-50 rounded-md"
+          >
+            Format
+          </button>
+        ) : null}
+        <span className="ml-auto text-xs text-slate-500">{statusLabel}</span>
+      </div>
+      {(error || formatError) && (
+        <p className="px-4 py-2 text-xs font-mono text-red-700 bg-red-50 border-b border-red-100">
+          {error || formatError}
+        </p>
+      )}
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        readOnly={readOnly}
+        spellCheck={false}
+        className="flex-1 min-h-0 w-full p-4 font-mono text-sm bg-slate-950 text-emerald-100 resize-none border-0 focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
+      />
+    </div>
+  );
+}