@bemedev/mind-flow 1.3.0 → 1.4.1

package/lib/ui/Flow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../src/ui/Flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAGjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAG9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAChD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAkCN,CAAC"}
+{"version":3,"file":"Flow.d.ts","sourceRoot":"","sources":["../../src/ui/Flow.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAChD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAeN,CAAC"}

package/lib/ui/components/EditPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditPanel.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EditPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,cAAc,CAAC,CAAC,CAAC,KACvB,GAAG,CAAC,OA+DN,CAAC"}
+{"version":3,"file":"EditPanel.d.ts","sourceRoot":"","sources":["../../../src/ui/components/EditPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAE1C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,cAAc,CAAC,CAAC,CAAC,KACvB,GAAG,CAAC,OAoEN,CAAC"}

package/lib/ui/components/FlowChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,GAAG,EAAsB,MAAM,UAAU,CAAC;AAGtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAIpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OA6DN,CAAC"}
+{"version":3,"file":"FlowChart.d.ts","sourceRoot":"","sources":["../../../src/ui/components/FlowChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,GAAG,EAAsB,MAAM,UAAU,CAAC;AAGtE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAG1E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAGnD,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAIpC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACrD,OAAO,SAAS,CAAC,CAAC,CAAC,KAClB,GAAG,CAAC,OAuGN,CAAC"}

package/lib/ui/components/FlowChart.types.d.ts

@@ -15,8 +15,8 @@ export type FlowPanels = {
  * Configuration options and callback handlers for the {@linkcode FlowChart}
  * component.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type FlowProps<D extends NodeData = NodeData> = {
     /** Optional delay in milliseconds before mounting the flowchart canvas. */
@@ -64,24 +64,24 @@ export type FlowProps<D extends NodeData = NodeData> = {
 /**
  * Type alias extracting the non-undefined flowchart configuration object.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<FlowProps<D>['config']>;
 /**
  * Type alias extracting the non-undefined list of nodes from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>;
 /**
  * Type alias extracting the non-undefined list of edges from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type EdgesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['edges']>;
 //# sourceMappingURL=FlowChart.types.d.ts.map

package/lib/ui/components/NodeComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,OA+NN,CAAC"}
+{"version":3,"file":"NodeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/components/NodeComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAO,KAAK,GAAG,EAAQ,MAAM,UAAU,CAAC;AAQ/D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAK/D,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,IAAI;IAC9D,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,iEAAiE;IACjE,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,QAAQ,GAAG,QAAQ,EACzD,OAAO,kBAAkB,CAAC,CAAC,CAAC,KAC3B,GAAG,CAAC,OA4NN,CAAC"}

package/lib/ui/components/Panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panels.d.ts","sourceRoot":"","sources":["../../../src/ui/components/Panels.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAEhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,UAAU,CAkBxC,CAAC"}
+{"version":3,"file":"Panels.d.ts","sourceRoot":"","sources":["../../../src/ui/components/Panels.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAiCpD;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,UAAU,CAQxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bemedev/mind-flow",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Flow Chart UI library for Solid.js applications",
   "keywords": [
     "diagram",
@@ -65,13 +65,13 @@
     "@bemedev/app": "^2.5.0",
     "@bemedev/app-cli": "^2.5.0",
     "@bemedev/app-solidjs": "^2.5.1",
-    "@bemedev/dev-utils": "^1.2.0",
+    "@bemedev/dev-utils": "^1.5.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@size-limit/file": "^13.0.3",
     "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.3.0",
+    "@types/node": "^26.4.0",
     "@vitest/coverage-v8": "^4.1.11",
     "glob": "^13.0.6",
     "globals": "^17.11.0",
@@ -113,7 +113,8 @@
     "node": ">=22"
   },
   "scripts": {
-    "build": "pnpm rm:lib && pnpm run build:server && pnpm run build:client && pnpm run build:css",
+    "build": "pnpm rm:lib && pnpm run build:dev",
+    "build:dev": "pnpm run build:server && pnpm run build:client && pnpm run build:css",
     "build:client": "vite build",
     "build:server": "vite build --mode server",
     "build:css": "pnpx @tailwindcss/cli -i ./input.css -o ../lib/output.css --minify --cwd ./src",

package/src/ui/Flow.tsx

@@ -1,33 +1,27 @@
-import { createSignal, onMount, Show, type JSX } from 'solid-js';
-import {} from 'solid-js/web';
+import { type JSX } from 'solid-js';
 
 import type { NodeData } from '../services/main.machine.typings';
 import { FlowChart } from './components/FlowChart';
 import { Provider } from './components/FlowChart.context';
 import type { FlowProps } from './components/FlowChart.types';
-import { LoadingFallback } from './globals/components/organisms/LoadingFallback';
 
 /**
  * Root Flow component wrapping the {@linkcode FlowChart} inside the flow context
  * provider.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  *
  * @param props - Flow chart configuration and callbacks of type
  *   {@linkcode FlowProps}.
  *
  * @returns The rendered Solid component.
  *
- * @see {@linkcode Provider}, {@linkcode FlowChart}
+ * @see {@linkcode Provider}
  */
 export const Flow = <D extends NodeData = NodeData>(
   props: FlowProps<D>,
 ): JSX.Element => {
-  const [isMounted, setIsMounted] = createSignal(false);
-
-  // onMount never runs on the server, only in the browser
-  onMount(() => setTimeout(() => setIsMounted(true), props.delay));
   return (
     <div
       style={{
@@ -37,24 +31,9 @@ export const Flow = <D extends NodeData = NodeData>(
 
       class='relative flex h-full w-full rounded-lg border-2 border-gray-600 bg-white bg-size-[30px_30px]'
     >
-      <Show
-        when={isMounted()}
-        keyed
-        fallback={
-          <div class='relative flex flex-1 items-center justify-center'>
-            <LoadingFallback
-              message='Chart is loading...'
-              interval={35}
-              rewind
-              rewindDelay={1_000}
-            />
-          </div>
-        }
-      >
-        <Provider>
-          <FlowChart {...props} />
-        </Provider>
-      </Show>
+      <Provider>
+        <FlowChart {...props} />
+      </Provider>
     </div>
   );
 };

package/src/ui/components/EditPanel.tsx

@@ -25,6 +25,7 @@ export const EditPanel = <D extends NodeData = NodeData>(
   props: EditPanelProps<D>,
 ): JSX.Element => {
   void clickOutside;
+  // const editing
   const hooks = useHook<D>(props.timeout);
   const classList = () =>
     props.classList instanceof Function ? props.classList(hooks) : props.classList;
@@ -36,7 +37,11 @@ export const EditPanel = <D extends NodeData = NodeData>(
           class={cn(
             `w-80 cursor-default rounded-2xl border border-gray-200 bg-white/95 p-4 shadow-xl backdrop-blur-md transition-all ${props.class ?? ''}`,
           )}
-          classList={classList()}
+          classList={{
+            ...classList(),
+            'pointer-events-none! -z-10': !hooks.editing(),
+            'pointer-events-all! z-50': !!hooks.editing(),
+          }}
           style={props.style}
           onMouseDown={e => e.stopPropagation()}
           use:clickOutside={hooks.close}

package/src/ui/components/FlowChart.tsx

@@ -32,7 +32,9 @@ export const FlowChart = <D extends NodeData = NodeData>(
   const primaryNodes = props.config?.nodes ?? DEFAULT_NODES;
   const primaryEdges = props.config?.edges;
   const service = useFlow();
-  const hasNewEdge = createState(service, { selector: s => !!s.context.newEdge });
+  const fromSignal = createState(service, {
+    selector: s => s.context.newEdge?.from,
+  });
   onCleanup(service.pause);
 
   onMount(() => {
@@ -47,33 +49,73 @@ export const FlowChart = <D extends NodeData = NodeData>(
     });
   });
 
-  createEffect(() => {
-    if (!hasNewEdge()) return;
-
-    const handlePointerMove = (e: MouseEvent | PointerEvent) => {
-      service.send({
-        type: 'MOVE_NEW_EDGE',
-        payload: { x: e.clientX, y: e.clientY },
-      });
-    };
-
-    const handlePointerUp = (e: MouseEvent | PointerEvent) => {
-      const from = service.state.context.newEdge?.from;
-      if (from) {
-        const el = document.elementFromPoint(e.clientX, e.clientY);
-        const inputHandle = el?.closest('[data-handle-type="input"]');
-        const targetId = inputHandle?.getAttribute('data-node-id');
-        if (targetId && targetId !== from) {
-          service.send({ type: 'ADD_EDGE', payload: { from, to: targetId } });
-        }
+  let added = false;
+
+  // Track the currently enlarged handle during edge drag
+  let activeHandle: HTMLElement | null = null;
+
+  const clearActiveHandle = () => {
+    if (activeHandle) {
+      activeHandle.classList.remove('scale-150');
+      activeHandle = null;
+      added = false;
+    }
+  };
+
+  const handlePointerMove = (e: MouseEvent | PointerEvent) => {
+    service.send({ type: 'MOVE_NEW_EDGE', payload: { x: e.clientX, y: e.clientY } });
+
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+    const inputHandle = elements
+      .map(el => el.closest<HTMLElement>('.rounded-full[data-handle-type="input"]'))
+      .find((handle): handle is HTMLElement =>
+        Boolean(handle && handle.id !== 'inputs'),
+      );
+
+    // If cursor moved away from previous handle, reset its scale
+    if (activeHandle && activeHandle !== inputHandle) {
+      clearActiveHandle();
+    }
+
+    // If cursor entered a valid target handle, enlarge it
+    if (inputHandle) {
+      if (activeHandle !== inputHandle) {
+        inputHandle.classList.add('scale-150');
+        activeHandle = inputHandle;
+        added = true;
       }
-      service.send('CLEAR_NEW_EDGE');
-    };
+    }
+  };
+
+  const createHandlePointerUp = (from: string) => (e: MouseEvent | PointerEvent) => {
+    const elements = document.elementsFromPoint(e.clientX, e.clientY);
+    const inputHandle = elements
+      .map(el => el.closest<HTMLElement>('.rounded-full[data-handle-type="input"]'))
+      .find((handle): handle is HTMLElement =>
+        Boolean(handle && handle.id !== 'inputs'),
+      );
+    const to = inputHandle?.getAttribute('data-node-id');
+
+    if (inputHandle && to) {
+      service.send({ type: 'ADD_EDGE', payload: { from, to } });
+    }
+
+    // Cleanup on release
+    clearActiveHandle();
+    service.send('CLEAR_NEW_EDGE');
+  };
+
+  createEffect(() => {
+    const from = fromSignal();
+    if (!from || added) return;
 
+    const handlePointerUp = createHandlePointerUp(from);
     window.addEventListener('pointermove', handlePointerMove);
     window.addEventListener('pointerup', handlePointerUp);
 
     onCleanup(() => {
+      // Cleanup on effect disposal
+      clearActiveHandle();
       window.removeEventListener('pointermove', handlePointerMove);
       window.removeEventListener('pointerup', handlePointerUp);
     });
@@ -83,7 +125,7 @@ export const FlowChart = <D extends NodeData = NodeData>(
     <div class='relative h-full w-full'>
       <div
         class='h-full w-full'
-        style={{ cursor: hasNewEdge() ? 'inherit' : 'crosshair' }}
+        style={{ cursor: fromSignal() ? 'inherit' : 'crosshair' }}
       >
         <NodesBoard panels={props.panels} component={props.component} />
       </div>

package/src/ui/components/FlowChart.types.ts

@@ -19,8 +19,8 @@ export type FlowPanels = {
  * Configuration options and callback handlers for the {@linkcode FlowChart}
  * component.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type FlowProps<D extends NodeData = NodeData> = {
   /** Optional delay in milliseconds before mounting the flowchart canvas. */
@@ -66,8 +66,8 @@ export type FlowProps<D extends NodeData = NodeData> = {
 /**
  * Type alias extracting the non-undefined flowchart configuration object.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<
   FlowProps<D>['config']
@@ -77,8 +77,8 @@ export type ConfigFrom<D extends NodeData = NodeData> = NotUndefined<
  * Type alias extracting the non-undefined list of nodes from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>;
 
@@ -86,7 +86,7 @@ export type NodesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['nodes']>
  * Type alias extracting the non-undefined list of edges from flowchart
  * configuration.
  *
- * @template | {@linkcode NodeData} `D` - Custom node data dictionary type extending
- *   {@linkcode NodeData}.
+ * @template | Type {@linkcode NodeData} `D` - Custom node data dictionary type
+ *   extending type {@linkcode NodeData}.
  */
 export type EdgesFrom<D extends NodeData> = NotUndefined<ConfigFrom<D>['edges']>;

package/src/ui/components/NodeComponent.tsx

@@ -200,8 +200,6 @@ export const NodeComponent = <D extends NodeData = NodeData>(
 
       <div
         id='inputs'
-        data-handle-type='input'
-        data-node-id={props.id}
         class='pointer-events-none absolute top-0 z-10 flex cursor-default flex-col'
         style={{ left: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
       >
@@ -211,7 +209,7 @@ export const NodeComponent = <D extends NodeData = NodeData>(
           onMouseDown={event => event.stopPropagation()}
           onPointerDown={e => e.stopPropagation()}
 
-          class='cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform'
+          class='cursor-default rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150'
 
           style={{
             width: `${HANDLE_SIZE}px`,
@@ -233,8 +231,7 @@ export const NodeComponent = <D extends NodeData = NodeData>(
       </div>
       <div
         id='outputs'
-        data-handle-type='output'
-        data-node-id={props.id}
+
         style={{ right: `-${HANDLE_CONTAINER_OFFSET_X}px` }}
 
         class='pointer-events-none absolute top-0 z-10 flex flex-col'
@@ -242,7 +239,7 @@ export const NodeComponent = <D extends NodeData = NodeData>(
         <div
           data-handle-type='output'
           data-node-id={props.id}
-          class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform'
+          class='cursor-crosshair rounded-full bg-[#e38b29] shadow-md transition-transform duration-150 ease-in-out hover:scale-150'
           style={{
             width: `${HANDLE_SIZE}px`,
             height: `${HANDLE_SIZE}px`,

package/src/ui/components/Panels.tsx

@@ -1,7 +1,40 @@
+import { isDefined } from '@bemedev/app/bemedev';
 import { Show, type Component } from 'solid-js';
 
+import { cn } from '../utils';
 import type { FlowPanels } from './FlowChart.types';
 
+/** Properties for the internal {@linkcode Panel} wrapper component. */
+type PanelProps = {
+  /** Optional component to render inside the panel container. */
+  children?: Component;
+  /** CSS class names for positioning and layout. */
+  class: string;
+};
+
+/**
+ * Overlay slot component rendering an optional panel component with z-index
+ * positioning.
+ *
+ * @param props - Panel properties of type {@linkcode PanelProps}.
+ *
+ * @returns The rendered panel container element or fallback.
+ *
+ * @see {@linkcode cn}
+ */
+const Panel: Component<PanelProps> = props => {
+  const exists = isDefined(props.children);
+  return (
+    <Show when={props.children} keyed>
+      {Children => (
+        <div class={cn(props.class)} classList={{ 'z-50': exists }}>
+          <Children />
+        </div>
+      )}
+    </Show>
+  );
+};
+
 /**
  * Overlay container rendering custom panel slots positioned around the flowchart
  * canvas.
@@ -12,20 +45,10 @@ import type { FlowPanels } from './FlowChart.types';
  */
 export const Panels: Component<FlowPanels> = props => {
   return (
-    <>
-      <Show when={props.topLeft} keyed>
-        {Panel => <div class='absolute top-4 left-4 z-50'>{<Panel />}</div>}
-      </Show>
-
-      {/* Top-Right Panel */}
-      <Show when={props.topRight} keyed>
-        {Panel => <div class='absolute top-4 right-4 z-50'>{<Panel />}</div>}
-      </Show>
-
-      {/* Bottom-Left Panel */}
-      <Show when={props.bottomLeft} keyed>
-        {Panel => <div class='absolute bottom-4 left-4 z-50'>{<Panel />}</div>}
-      </Show>
-    </>
+    <div class='pointer-events-none absolute inset-0'>
+      <Panel children={props.topLeft} class='absolute top-4 left-4' />
+      <Panel children={props.topRight} class='absolute top-4 right-4' />
+      <Panel children={props.bottomLeft} class='absolute bottom-4 left-4' />
+    </div>
   );
 };