orcasvn-react-diagrams 0.2.1 → 0.2.2

package/src/displaybox/demos/DeletionEventsDemoTab.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type {
+  ElementDeletedEvent,
+  LinkDeletedEvent,
+  PortDeletedEvent,
+  TextDeletedEvent,
+} from '../../api';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { deletionEventsDemoConfig } from './deletionEventsDemo';
+
+type EventPayloads = {
+  elementDeleted: ElementDeletedEvent | null;
+  portDeleted: PortDeletedEvent | null;
+  linkDeleted: LinkDeletedEvent | null;
+  textDeleted: TextDeletedEvent | null;
+};
+
+const initialPayloads: EventPayloads = {
+  elementDeleted: null,
+  portDeleted: null,
+  linkDeleted: null,
+  textDeleted: null,
+};
+
+const eventBoxStyle: React.CSSProperties = {
+  width: '100%',
+  minHeight: 130,
+  padding: '8px 10px',
+  borderRadius: 8,
+  border: '1px solid #d0d5dd',
+  background: '#fff',
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace',
+  fontSize: 12,
+  resize: 'vertical',
+};
+
+const DeletionEventsDemo = () => {
+  const demo = deletionEventsDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const [payloads, setPayloads] = useState<EventPayloads>(initialPayloads);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setPayloads(initialPayloads);
+    const unsubs = [
+      editor.on('elementDeleted', (payload) => setPayloads((prev) => ({ ...prev, elementDeleted: payload }))),
+      editor.on('portDeleted', (payload) => setPayloads((prev) => ({ ...prev, portDeleted: payload }))),
+      editor.on('linkDeleted', (payload) => setPayloads((prev) => ({ ...prev, linkDeleted: payload }))),
+      editor.on('textDeleted', (payload) => setPayloads((prev) => ({ ...prev, textDeleted: payload }))),
+    ];
+    return () => {
+      unsubs.forEach((unsub) => unsub());
+    };
+  }, [editorRef]);
+
+  const hasPort = (diagramState?.ports ?? []).some((port) => port.id === 'delete-source-free-port');
+  const hasLink = (diagramState?.links ?? []).some((link) => link.id === 'delete-link');
+  const hasText = (diagramState?.texts ?? []).some((text) => text.id === 'delete-free-text');
+  const hasCascadeElement = (diagramState?.elements ?? []).some((element) => element.id === 'delete-source');
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>
+          Use direct delete buttons for port/link/text, then delete <code>delete-source</code> to trigger cascade
+          removals. Latest payloads are shown below for integration debugging.
+        </p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+      />
+      <div style={{ display: 'grid', gap: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+          <button type="button" onClick={() => editorRef.current?.removePort('delete-source-free-port')} disabled={!hasPort}>
+            Delete Port
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeLink('delete-link')} disabled={!hasLink}>
+            Delete Link
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeText('delete-free-text')} disabled={!hasText}>
+            Delete Text
+          </button>
+          <button type="button" onClick={() => editorRef.current?.removeElement('delete-source')} disabled={!hasCascadeElement}>
+            Delete Element (Cascade)
+          </button>
+        </div>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: 12 }}>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>elementDeleted</label>
+            <textarea readOnly value={payloads.elementDeleted ? JSON.stringify(payloads.elementDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>portDeleted</label>
+            <textarea readOnly value={payloads.portDeleted ? JSON.stringify(payloads.portDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>linkDeleted</label>
+            <textarea readOnly value={payloads.linkDeleted ? JSON.stringify(payloads.linkDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+          <div>
+            <label style={{ display: 'block', fontWeight: 600, marginBottom: 6 }}>textDeleted</label>
+            <textarea readOnly value={payloads.textDeleted ? JSON.stringify(payloads.textDeleted, null, 2) : ''} style={eventBoxStyle} />
+          </div>
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default DeletionEventsDemo;

package/src/displaybox/demos/EngineEventsDemoTab.tsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { EngineEventMap } from '../../api';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { engineEventsDemoConfig } from './engineEventsDemo';
+
+const engineEventOptions = [
+  'change',
+  'selection',
+  'config',
+  'elementDrop',
+  'element-drop',
+  'paperClick',
+  'portMouseDown',
+  'portMouseUp',
+  'portMoved',
+  'portSelected',
+  'elementClick',
+  'elementDragged',
+  'elementMoved',
+  'elementResized',
+  'elementDeleted',
+  'portDeleted',
+  'linkDeleted',
+  'textDeleted',
+  'elementSelected',
+  'elementLinkStarted',
+  'elementLinkConnecting',
+  'elementLinkEnded',
+  'textSelected',
+] as const;
+type EngineEventKey = typeof engineEventOptions[number];
+
+const formatEventPayload = (payload: EngineEventMap[EngineEventKey] | null) =>
+  payload ? JSON.stringify(payload, null, 2) : '';
+
+const EngineEventsDemo = () => {
+  const demo = engineEventsDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const [selectedEvent, setSelectedEvent] = useState<EngineEventKey>(engineEventOptions[0]);
+  const [eventPayload, setEventPayload] = useState<EngineEventMap[EngineEventKey] | null>(null);
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setEventPayload(null);
+    return editor.on(selectedEvent, (payload) => {
+      setEventPayload(payload);
+    });
+  }, [selectedEvent, editorRef]);
+
+  const payloadText = formatEventPayload(eventPayload);
+  const handleRerouteAll = () => {
+    editorRef.current?.rerouteAllLinks();
+  };
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>{demo.description}</p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+      />
+      <div style={{ display: 'grid', gap: 12, marginBottom: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <label htmlFor="engine-event-select" style={{ fontWeight: 600 }}>
+            Engine Event
+          </label>
+          <select
+            id="engine-event-select"
+            value={selectedEvent}
+            onChange={(event) => setSelectedEvent(event.target.value as EngineEventKey)}
+            style={{ padding: '6px 8px', minWidth: 200 }}
+          >
+            {engineEventOptions.map((eventName) => (
+              <option key={eventName} value={eventName}>
+                {eventName}
+              </option>
+            ))}
+          </select>
+          <button type="button" onClick={handleRerouteAll} style={{ padding: '6px 10px' }}>
+            Reroute All Links
+          </button>
+          <div style={{ fontSize: 12, color: '#555' }}>
+            {payloadText ? 'Latest payload captured below.' : 'Interact with the canvas to trigger the event.'}
+          </div>
+        </div>
+        <div>
+          <label htmlFor="engine-event-payload" style={{ display: 'block', fontWeight: 600, marginBottom: 4 }}>
+            Event Payload
+          </label>
+          <textarea
+            id="engine-event-payload"
+            readOnly
+            value={payloadText}
+            placeholder="No event payload captured yet."
+            style={{
+              width: '100%',
+              minHeight: 160,
+              padding: '8px 10px',
+              borderRadius: 8,
+              border: '1px solid #2d2d2d',
+              background: '#fff',
+              fontFamily: 'ui-monospace, SFMono-Regular, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace',
+              fontSize: 12,
+              resize: 'vertical',
+            }}
+          />
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default EngineEventsDemo;

package/src/displaybox/demos/EventHandlersDemoTab.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { DemoActionHelpers } from '../types';
+import { eventHandlersDemoConfig } from './eventHandlersDemo';
+
+const EventHandlersDemo = () => {
+  const demo = eventHandlersDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const [eventDemoEvent, setEventDemoEvent] = useState<'none' | 'elementDrop' | 'element-drop' | 'selection'>('none');
+  const [eventDemoLog, setEventDemoLog] = useState('');
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return undefined;
+    setEventDemoLog('');
+
+    if (eventDemoEvent === 'elementDrop' || eventDemoEvent === 'element-drop') {
+      return editor.on(eventDemoEvent, (event) => {
+        const state = editor.getState();
+        const element = state.elements.find((item) => item.id === event.elementId);
+        if (!element) return;
+        const start =
+          event.anchor === 'center'
+            ? {
+                x: event.startWorld.x - element.size.width / 2,
+                y: event.startWorld.y - element.size.height / 2,
+              }
+            : event.startWorld;
+        editor.moveElementTo(event.elementId, start.x, start.y);
+        setEventDemoLog(`${eventDemoEvent}: reverted ${event.elementId}`);
+      });
+    }
+
+    if (eventDemoEvent === 'selection') {
+      return editor.on('selection', (event) => {
+        const label = event.selectedIds.length > 0 ? event.selectedIds.join(', ') : 'none';
+        setEventDemoLog(`selection: ${label}`);
+      });
+    }
+
+    return undefined;
+  }, [eventDemoEvent, editorRef]);
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>{demo.description}</p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+      />
+      <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 12 }}>
+        <label htmlFor="event-handler-select" style={{ fontWeight: 600 }}>
+          Event
+        </label>
+        <select
+          id="event-handler-select"
+          value={eventDemoEvent}
+          onChange={(event) => setEventDemoEvent(event.target.value as 'none' | 'elementDrop' | 'element-drop' | 'selection')}
+          style={{ padding: '6px 8px' }}
+        >
+          <option value="none">None</option>
+          <option value="elementDrop">elementDrop (revert position)</option>
+          <option value="element-drop">element-drop (deprecated alias)</option>
+          <option value="selection">selection (log selection)</option>
+        </select>
+        <div style={{ fontSize: 12, color: '#555' }}>
+          {eventDemoLog || 'Trigger the selected event to see feedback.'}
+        </div>
+      </div>
+      <DisplayBoxStage containerRef={containerRef} />
+    </section>
+  );
+};
+
+export default EventHandlersDemo;

package/src/displaybox/demos/ExternalDragDropDemoTab.tsx

@@ -0,0 +1,261 @@
+import React, { useMemo, useRef, useState } from 'react';
+import DisplayBoxControls from '../DisplayBoxControls';
+import DisplayBoxStage from '../DisplayBoxStage';
+import useDemoControls from '../useDemoControls';
+import useDemoEditor from '../useDemoEditor';
+import useOffsetSequence from '../useOffsetSequence';
+import type { OverlayShapeHandle } from '../../api';
+import type { DemoActionHelpers, ToolboxItem } from '../types';
+import { createId } from '../../utils/ids';
+import { baseElementShapes, defaultGhostSize, externalToolboxItems } from './shared';
+import { externalDragDropDemoConfig } from './externalDragDropDemo';
+
+const ExternalDragDropDemo = () => {
+  const demo = externalDragDropDemoConfig;
+  const { containerRef, editorRef, diagramState, selection, snapEnabled, setSnapEnabled } = useDemoEditor({
+    createState: demo.createState,
+    elementShapes: demo.elementShapes,
+    portShapes: demo.portShapes,
+  });
+
+  const nextOffset = useOffsetSequence();
+  const actionHelpers: DemoActionHelpers = useMemo(() => ({ nextOffset }), [nextOffset]);
+
+  const controls = useDemoControls({
+    demo,
+    editorRef,
+    diagramState,
+    selection,
+    snapEnabled,
+    setSnapEnabled,
+    actionHelpers,
+  });
+
+  const ghostOverlayRef = useRef<OverlayShapeHandle | null>(null);
+  const dragPayloadRef = useRef<{ shapeId: string; size: { width: number; height: number } } | null>(null);
+  const dragImageRef = useRef<HTMLCanvasElement | null>(null);
+  const [ghostShapeId, setGhostShapeId] = useState(externalToolboxItems[0]?.shapeId ?? 'default');
+  const [ghostWidth, setGhostWidth] = useState(String(defaultGhostSize.width));
+  const [ghostHeight, setGhostHeight] = useState(String(defaultGhostSize.height));
+
+  React.useEffect(() => {
+    return () => {
+      ghostOverlayRef.current?.destroy();
+      ghostOverlayRef.current = null;
+      dragPayloadRef.current = null;
+      dragImageRef.current = null;
+    };
+  }, []);
+
+  const resolveGhostSize = (fallback = defaultGhostSize) => {
+    const width = Number(ghostWidth);
+    const height = Number(ghostHeight);
+    return {
+      width: Number.isFinite(width) && width > 0 ? width : fallback.width,
+      height: Number.isFinite(height) && height > 0 ? height : fallback.height,
+    };
+  };
+
+  const resolveDragPayload = (dataTransfer: DataTransfer) => {
+    const raw = dataTransfer.getData('application/x-react-diagrams-element') || dataTransfer.getData('text/plain');
+    if (!raw) return null;
+    let shapeId = demo.defaultElementShapeId ?? 'default';
+    let size = { width: 180, height: 120 };
+    try {
+      const parsed = JSON.parse(raw) as { shapeId?: string; size?: { width?: number; height?: number } };
+      if (parsed.shapeId) shapeId = parsed.shapeId;
+      if (parsed.size?.width && parsed.size?.height) {
+        size = { width: parsed.size.width, height: parsed.size.height };
+      }
+    } catch {
+      shapeId = raw;
+    }
+    return { shapeId, size };
+  };
+
+  const handleToolboxDragStart = (event: React.DragEvent<HTMLButtonElement>, item: ToolboxItem) => {
+    const payload = JSON.stringify({ shapeId: item.shapeId, size: item.size });
+    event.dataTransfer.setData('application/x-react-diagrams-element', payload);
+    event.dataTransfer.setData('text/plain', item.shapeId);
+    event.dataTransfer.effectAllowed = 'copy';
+    if (!dragImageRef.current && typeof document !== 'undefined') {
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+      dragImageRef.current = canvas;
+    }
+    if (dragImageRef.current && event.dataTransfer.setDragImage) {
+      event.dataTransfer.setDragImage(dragImageRef.current, 0, 0);
+    }
+    dragPayloadRef.current = { shapeId: item.shapeId, size: { ...item.size } };
+  };
+
+  const handleToolboxDragEnd = () => {
+    ghostOverlayRef.current?.destroy();
+    ghostOverlayRef.current = null;
+    dragPayloadRef.current = null;
+  };
+
+  const handleStageDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
+    const editor = editorRef.current;
+    const container = containerRef.current;
+    if (!editor || !container) return;
+    const payload = dragPayloadRef.current ?? resolveDragPayload(event.dataTransfer);
+    if (!payload) return;
+    const world = editor.clientToWorld({ x: event.clientX, y: event.clientY }, container);
+    const ghostSize = resolveGhostSize(payload.size);
+    const ghostShape = ghostShapeId || payload.shapeId;
+    const nextConfig = {
+      shapeId: ghostShape,
+      position: { x: world.x - ghostSize.width / 2, y: world.y - ghostSize.height / 2 },
+      size: ghostSize,
+      style: { opacity: 0.35 },
+    };
+    if (!ghostOverlayRef.current) {
+      ghostOverlayRef.current = editor.createOverlayShape(nextConfig);
+    } else {
+      ghostOverlayRef.current.update(nextConfig);
+    }
+  };
+
+  const handleStageDragLeave = () => {
+    ghostOverlayRef.current?.destroy();
+    ghostOverlayRef.current = null;
+  };
+
+  const handleStageDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const editor = editorRef.current;
+    const container = containerRef.current;
+    if (!editor || !container) return;
+
+    const payload = dragPayloadRef.current ?? resolveDragPayload(event.dataTransfer);
+    if (!payload) return;
+
+    const world = editor.clientToWorld({ x: event.clientX, y: event.clientY }, container);
+    const id = `drop-${createId()}`;
+    editor.addElement({
+      id,
+      position: { x: world.x - payload.size.width / 2, y: world.y - payload.size.height / 2 },
+      size: payload.size,
+      shapeId: payload.shapeId,
+    });
+    editor.setSelection([id]);
+    ghostOverlayRef.current?.destroy();
+    ghostOverlayRef.current = null;
+    dragPayloadRef.current = null;
+  };
+
+  return (
+    <section>
+      <div style={{ marginBottom: 12 }}>
+        <h2 style={{ marginTop: 0, marginBottom: 4 }}>{demo.title}</h2>
+        <p style={{ marginTop: 0 }}>{demo.description}</p>
+      </div>
+      <DisplayBoxControls
+        actions={demo.actions}
+        snapEnabled={controls.snapEnabled}
+        selectedLinkRouting={controls.selectedLinkRouting}
+        canToggleLinkRouting={controls.canToggleLinkRouting}
+        onReload={controls.handleReload}
+        onZoomIn={controls.handleZoomIn}
+        onZoomOut={controls.handleZoomOut}
+        onResetViewport={controls.handleResetViewport}
+        onToggleSnap={controls.handleToggleSnap}
+        onManualRender={controls.handleManualRender}
+        onToggleLinkRouting={controls.handleToggleLinkRouting}
+        onAction={controls.handleAction}
+      />
+      <div style={{ display: 'flex', gap: 16, marginBottom: 12, alignItems: 'stretch' }}>
+        <div
+          style={{
+            minWidth: 220,
+            border: '1px dashed #b0b0b0',
+            borderRadius: 8,
+            padding: 12,
+            background: '#fafafa',
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>External Toolbox</div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            {externalToolboxItems.map((item) => (
+              <button
+                key={item.id}
+                draggable
+                onDragStart={(event) => handleToolboxDragStart(event, item)}
+                onDragEnd={handleToolboxDragEnd}
+                style={{ padding: '8px 10px', textAlign: 'left', cursor: 'grab' }}
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div
+          style={{
+            minWidth: 240,
+            border: '1px solid #d6d6d6',
+            borderRadius: 8,
+            padding: 12,
+            background: '#ffffff',
+          }}
+        >
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>Ghost Settings</div>
+          <label htmlFor="ghost-shape-select" style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>
+            Shape
+          </label>
+          <select
+            id="ghost-shape-select"
+            value={ghostShapeId}
+            onChange={(event) => setGhostShapeId(event.target.value)}
+            style={{ width: '100%', marginBottom: 8, padding: '4px 6px' }}
+          >
+            {baseElementShapes.map((shape) => (
+              <option key={shape.id} value={shape.id}>
+                {shape.id}
+              </option>
+            ))}
+          </select>
+          <label htmlFor="ghost-width-input" style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>
+            Width
+          </label>
+          <input
+            id="ghost-width-input"
+            type="number"
+            min={20}
+            value={ghostWidth}
+            onChange={(event) => setGhostWidth(event.target.value)}
+            style={{ width: '100%', marginBottom: 8, padding: '4px 6px' }}
+          />
+          <label htmlFor="ghost-height-input" style={{ display: 'block', fontSize: 12, marginBottom: 4 }}>
+            Height
+          </label>
+          <input
+            id="ghost-height-input"
+            type="number"
+            min={20}
+            value={ghostHeight}
+            onChange={(event) => setGhostHeight(event.target.value)}
+            style={{ width: '100%', marginBottom: 8, padding: '4px 6px' }}
+          />
+          <div style={{ fontSize: 12, color: '#666' }}>Drag a toolbox item to preview the ghost.</div>
+        </div>
+        <div style={{ fontSize: 13, lineHeight: 1.5, maxWidth: 420 }}>
+          <strong>Host flow:</strong> keep drag data in your app, then on drop call <code>editor.clientToWorld</code>
+          with <code>event.clientX</code>/<code>event.clientY</code> and the stage container. The example centers the
+          dropped element at the cursor.
+        </div>
+      </div>
+      <DisplayBoxStage
+        containerRef={containerRef}
+        onDragOver={handleStageDragOver}
+        onDragLeave={handleStageDragLeave}
+        onDrop={handleStageDrop}
+      />
+    </section>
+  );
+};
+
+export default ExternalDragDropDemo;