@visualli/react 0.1.1

package/src/components/KonvaNode.tsx

@@ -0,0 +1,177 @@
+// ─── KonvaNode ────────────────────────────────────────────────────────────────
+//
+// Renders a single FlatNode as a single organic blob shape with Konva.
+// Matches the visualli.ai rendering:
+//   - Centered blob at node (x, y) with radiusX / radiusY scaling
+//   - Single blob shape (no background depth layers)
+//   - HSL-based border darkening
+//   - 'Story Script' cursive font, text clipped to blob silhouette
+//   - External hover / pressed state (no Konva hit-canvas dependency)
+//   - All shapes are listening=false; hit detection uses spatial index
+
+import React, { useMemo } from 'react';
+import { KGroup as Group, KShape as Shape, KText as Text } from '../konvaCompat';
+import type { FlatNode } from '@visualli/core';
+import { CANVAS_COLORS, NODE_HEIGHT, TEXT_LABEL_HIDE_BELOW_ZOOM, darkenHexColor } from '@visualli/core';
+import { getBlobTypeForLayer, BLOB_TEXT_OFFSETS, BLOB_LAYER_CONFIG, NODE_LAYER_CONFIG, drawBlobPath, computeNodeTextWorldScale } from '../config';
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export interface KonvaNodeProps {
+  node: FlatNode;
+  zoomLevel: number;
+  /** True when the pointer is currently over this node (stage-level hit test). */
+  isExternallyHovered?: boolean;
+  /** True while this node is being pressed/dragged. */
+  isExternallyPressed?: boolean;
+  /** True while any node is being dragged — disables expensive shadows. */
+  isDragging?: boolean;
+}
+
+const KonvaNode = React.memo(function KonvaNode({
+  node,
+  zoomLevel,
+  isExternallyHovered = false,
+  isExternallyPressed = false,
+  isDragging = false,
+}: KonvaNodeProps) {
+  // Border: monochromatic HSL-darkened version of the fill color
+  const borderColor = useMemo(() => darkenHexColor(node.color, 0.13), [node.color]);
+
+  // Number of background layers (capped at 3), driven by branchCount
+  const layerCount = useMemo(() => {
+    const count = node.branchCount ?? 0;
+    return Math.min(count, 3);
+  }, [node.branchCount]);
+
+  // Base blob radii (same math as visualli.ai KonvaNode)
+  const baseRadiusX = node.width / 2;
+  const baseRadiusY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRadiusX * 0.74);
+
+  // Larger, consistent font size for better readability
+  // Text will wrap to multiple lines if needed
+  const calculateFontSize = useMemo(() => {
+    // Use a larger base font size for better visibility
+    return 30;
+  }, [node.title]);
+
+  // Text scale and layout
+  const textNaturalWidth  = node.width - 40;
+  // Increase text height to allow 2-3 lines of wrapped text
+  const textNaturalHeight = NODE_HEIGHT * 1.2;
+  const maxScale = computeNodeTextWorldScale(node.width, zoomLevel);
+
+  // Blob type and text offset
+  const blobType    = getBlobTypeForLayer(node.level);
+  const textOffsetX = (BLOB_TEXT_OFFSETS[blobType] ?? 0) * baseRadiusX;
+
+  // Interaction state (purely driven from stage-level delegation)
+  const effectiveHover = isExternallyHovered;
+  const isPressed      = isExternallyPressed;
+
+  // Blob fill/stroke:
+  //   default → fill=node.color,  stroke=borderColor
+  //   hover   → fill=borderColor, stroke=borderColor
+  //   pressed → fill=borderColor, stroke=node.color
+  const topFill   = effectiveHover || isPressed ? borderColor : node.color;
+  const topStroke = isPressed ? node.color : borderColor;
+
+  // Build the background layers config (outermost first for correct z-order)
+  const backgroundLayers = useMemo(() => {
+    if (layerCount === 0) return [];
+    const startIdx = BLOB_LAYER_CONFIG.length - layerCount;
+    const layers = [];
+    for (let i = startIdx; i < BLOB_LAYER_CONFIG.length; i++) {
+      const config = BLOB_LAYER_CONFIG[i];
+      layers.push({
+        ...config,
+        radiusX: baseRadiusX * config.scaleUp,
+        radiusY: baseRadiusY * config.scaleUp,
+      });
+    }
+    return layers;
+  }, [layerCount, baseRadiusX, baseRadiusY]);
+
+  return (
+    <Group x={node.x} y={node.y} listening={false}>
+      {/* Background blob layers (outermost rendered first, behind the node) */}
+      {backgroundLayers.map((layer, idx) => (
+        <Shape
+          key={`blob-layer-${idx}`}
+          rotation={layer.rotation}
+          opacity={layer.opacity}
+          sceneFunc={(ctx: any, shape: any) => {
+            drawBlobPath(ctx, layer.radiusX, layer.radiusY, blobType);
+            ctx.fillStrokeShape(shape);
+          }}
+          fill={node.color}
+          stroke={borderColor}
+          strokeWidth={layer.strokeWidth}
+          dash={layer.dash ? [...layer.dash] : undefined}
+          listening={false}
+          perfectDrawEnabled={false}
+        />
+      ))}
+
+      {/* Node (top layer) - main interactive blob */}
+      <Shape
+        rotation={NODE_LAYER_CONFIG.rotation}
+        opacity={NODE_LAYER_CONFIG.opacity}
+        sceneFunc={(ctx: any, shape: any) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+          ctx.fillStrokeShape(shape);
+        }}
+        hitFunc={(ctx: any, shape: any) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+          ctx.fillStrokeShape(shape);
+        }}
+        fill={topFill}
+        stroke={topStroke}
+        strokeWidth={NODE_LAYER_CONFIG.strokeWidth}
+        shadowEnabled={!isDragging}
+        shadowColor="rgba(255,255,255,1)"
+        shadowBlur={effectiveHover || isPressed ? 40 : 15}
+        shadowOpacity={effectiveHover || isPressed ? 0.4 : 0.15}
+        shadowOffsetX={0}
+        shadowOffsetY={0}
+        perfectDrawEnabled={false}
+      />
+
+      {/* Node Title — inverse-scaled so it stays legible at a constant screen size.
+           Clipped to the blob silhouette via clipFunc so the growing text never visually
+           bleeds outside the first layer boundary at low zoom levels. */}
+      <Group
+        clipFunc={(ctx: any) => {
+          drawBlobPath(ctx, baseRadiusX, baseRadiusY, blobType);
+        }}
+        visible={zoomLevel >= TEXT_LABEL_HIDE_BELOW_ZOOM}
+        listening={false}
+      >
+        <Text
+          x={textOffsetX}
+          y={0}
+          offsetX={textNaturalWidth / 2}
+          offsetY={textNaturalHeight / 2}
+          width={textNaturalWidth}
+          height={textNaturalHeight}
+          scaleX={maxScale}
+          scaleY={maxScale}
+          text={node.title}
+          fontSize={calculateFontSize}
+          fontFamily="'Story Script', cursive"
+          fontStyle="normal"
+          fill={CANVAS_COLORS.node.titleColor}
+          align="center"
+          verticalAlign="middle"
+          wrap="word"
+          ellipsis={false}
+          listening={false}
+          perfectDrawEnabled={false}
+        />
+      </Group>
+    </Group>
+  );
+});
+
+export default KonvaNode;
+

package/src/components/KonvaNodeLayer.tsx

@@ -0,0 +1,61 @@
+// ─── KonvaNodeLayer ───────────────────────────────────────────────────────────
+//
+// Konva <Layer> that renders all visible FlatNodes.
+// Uses viewport culling and passes external hover/pressed state to each node.
+
+import React, { useRef, useLayoutEffect, useEffect, useMemo } from 'react';
+import { KLayer as Layer } from '../konvaCompat';
+import type Konva from 'konva';
+import type { FlatNode } from '@visualli/core';
+import { useViewportStore } from '../stores/useViewportStore';
+import { useNodeStore } from '../stores/useNodeStore';
+import { useViewportNodes } from '../hooks/useViewportNodes';
+import KonvaNode from './KonvaNode';
+
+export interface KonvaNodeLayerProps {
+  nodes?: FlatNode[];
+  isTransitioning?: boolean;
+  isDragging?: boolean;
+  hoveredNodeId?: string | null;
+  pressedNodeId?: string | null;
+}
+
+export default function KonvaNodeLayer({
+  nodes: propNodes,
+  isTransitioning = false,
+  isDragging = false,
+  hoveredNodeId = null,
+  pressedNodeId = null,
+}: KonvaNodeLayerProps) {
+  const layerRef  = useRef<Konva.Layer | null>(null);
+  const zoomLevel = useViewportStore(s => s.zoomLevel);
+  const storeNodes = useNodeStore(s => s.nodes);
+  const allNodes: FlatNode[] = useMemo(
+    () => propNodes ?? Array.from(storeNodes.values()),
+    [propNodes, storeNodes],
+  );
+  const visibleNodes = useViewportNodes(allNodes, undefined, isTransitioning, isDragging);
+
+  // Redraw synchronously before paint whenever visible content changes.
+  // Tied to data deps so it does not fire on every parent re-render.
+  useLayoutEffect(() => { layerRef.current?.batchDraw(); }, [visibleNodes, hoveredNodeId, pressedNodeId, isDragging, zoomLevel]);
+
+  // Redraw when transition state toggles (opacity wrapper controls visibility,
+  // but the canvas still needs to be current when it fades back in).
+  useEffect(() => { layerRef.current?.batchDraw(); }, [isTransitioning]);
+
+  return (
+    <Layer ref={layerRef} name="nodes">
+      {visibleNodes.map(n => (
+        <KonvaNode
+          key={n.id}
+          node={n}
+          zoomLevel={zoomLevel}
+          isExternallyHovered={hoveredNodeId === n.id}
+          isExternallyPressed={pressedNodeId === n.id}
+          isDragging={isDragging}
+        />
+      ))}
+    </Layer>
+  );
+}

package/src/components/KonvaStage.tsx

@@ -0,0 +1,80 @@
+// ─── KonvaStage ───────────────────────────────────────────────────────────────
+//
+// Thin wrapper around react-konva <Stage> that:
+//  • Binds canvas position/scale from the viewport store
+//  • Accepts optional event handlers (wheel, mouse, touch, context-menu)
+//  • Calls stage.destroy() on unmount (memory hygiene)
+
+import React, { useRef, useEffect, forwardRef } from 'react';
+import { KStage as Stage } from '../konvaCompat';
+import type Konva from 'konva';
+import { useViewportStore } from '../stores/useViewportStore';
+
+export interface KonvaStageProps {
+  children: React.ReactNode;
+  onWheel?:       (e: Konva.KonvaEventObject<WheelEvent>) => void;
+  onMouseDown?:   (e: Konva.KonvaEventObject<MouseEvent>) => void;
+  onMouseMove?:   (e: Konva.KonvaEventObject<MouseEvent>) => void;
+  onMouseUp?:     (e: Konva.KonvaEventObject<MouseEvent>) => void;
+  onContextMenu?: (e: Konva.KonvaEventObject<MouseEvent>) => void;
+  onTouchStart?:  (e: Konva.KonvaEventObject<TouchEvent>) => void;
+  onTouchMove?:   (e: Konva.KonvaEventObject<TouchEvent>) => void;
+  onTouchEnd?:    (e: Konva.KonvaEventObject<TouchEvent>) => void;
+  onStageReady?:  (stage: Konva.Stage) => void;
+}
+
+const KonvaStage = forwardRef<Konva.Stage, KonvaStageProps>(function KonvaStage(
+  {
+    children,
+    onWheel, onMouseDown, onMouseMove, onMouseUp, onContextMenu,
+    onTouchStart, onTouchMove, onTouchEnd,
+    onStageReady,
+  },
+  ref,
+) {
+  const internalRef = useRef<Konva.Stage | null>(null);
+  const { centerX, centerY, zoomLevel, canvasWidth, canvasHeight } = useViewportStore();
+
+  useEffect(() => {
+    if (internalRef.current) {
+      if (typeof ref === 'function') ref(internalRef.current);
+      else if (ref) (ref as React.MutableRefObject<Konva.Stage | null>).current = internalRef.current;
+      onStageReady?.(internalRef.current);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    return () => { internalRef.current?.destroy(); };
+  }, []);
+
+  const w = canvasWidth  || 800;
+  const h = canvasHeight || 600;
+  const stageX = w / 2 - centerX * zoomLevel;
+  const stageY = h / 2 - centerY * zoomLevel;
+
+  return (
+    <Stage
+      ref={internalRef}
+      width={w}
+      height={h}
+      x={stageX}
+      y={stageY}
+      scaleX={zoomLevel}
+      scaleY={zoomLevel}
+      onWheel={onWheel}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+      onContextMenu={onContextMenu}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      draggable={false}
+      pixelRatio={1}
+    >
+      {children}
+    </Stage>
+  );
+});
+
+export default KonvaStage;

package/src/components/NavigationStack.tsx

@@ -0,0 +1,184 @@
+// ─── NavigationStack ─────────────────────────────────────────────────────────
+//
+// Vertical navigation stack rendered as a fixed left-side overlay.
+// Matches the visualli.ai VisualliNavigationStack design:
+//   • Organic hand-drawn circle SVGs per level
+//   • Vertical connector lines between levels
+//   • Active level highlighted, previous levels clickable to navigate back
+//   • Font: Nunito
+
+import React, { memo, useState } from 'react';
+import type { VisualliLayer } from '@visualli/core';
+
+export interface NavStackEntry {
+  layerId: string;
+  layer: VisualliLayer;
+  label: string;
+}
+
+export interface NavigationStackProps {
+  stack: NavStackEntry[];
+  onNavigateBack: (index: number) => void;
+  isDark?: boolean;
+  top?: string;
+  left?: string;
+}
+
+// Pastel fills cycled across levels
+const PASTEL_FILLS = [
+  '#b6eea7', '#d5bcfe', '#a1c4fc', '#a6f5d8',
+  '#ffc9de', '#c4e8ff', '#f0c4ff', '#ffe0a3',
+];
+
+// Organic circle SVG paths (small / active variants matching visualli.ai)
+const ORGANIC_PATHS_SMALL = [
+  'M13.72,6.31 C15.12,6.29 17.96,8.57 17.99,10.60 C18.07,14.62 16.72,17.90 11.12,18.00 C7.26,18.07 4.07,14.86 4.00,10.85 C3.93,6.83 9.44,2.02 13.69,4.85',
+  'M13.88,6.41 C15.28,6.43 18.04,8.82 18.00,10.85 C17.93,14.86 16.48,18.10 10.88,18.00 C7.02,17.93 3.94,14.62 4.01,10.60 C4.08,6.59 9.76,1.97 13.91,4.95',
+];
+const ORGANIC_PATH_ACTIVE =
+  'M16.55,9.22 C17.95,9.15 20.87,11.33 20.97,13.36 C21.19,17.37 19.96,20.70 14.37,20.99 C10.51,21.19 7.20,18.10 7.00,14.09 C6.78,10.08 12.13,5.08 16.48,7.77';
+
+const CIRCLE_SIZE = 14;
+
+function hexToRgba(hex: string, opacity: number): string {
+  const h = hex.replace('#', '');
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r},${g},${b},${opacity})`;
+}
+
+const OrganicCircle = memo(function OrganicCircle({
+  size, fill, stroke, strokeWidth, variant, isActive,
+}: {
+  size: number; fill: string; stroke: string; strokeWidth: number; variant: number; isActive?: boolean;
+}) {
+  const path = isActive ? ORGANIC_PATH_ACTIVE : ORGANIC_PATHS_SMALL[variant % ORGANIC_PATHS_SMALL.length];
+  const vb   = isActive ? '4 3 20 20' : '2 1 18 18';
+  const vbSz = isActive ? 20 : 18;
+  const sw   = strokeWidth * vbSz / size;
+  return (
+    <svg width={size} height={size} viewBox={vb} fill="none" style={{ display: 'block' }}>
+      <path d={path} fill={fill} fillOpacity={1} />
+      <path d={path} fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" />
+    </svg>
+  );
+});
+
+const NavigationStack = memo(function NavigationStack({
+  stack,
+  onNavigateBack,
+  isDark = false,
+  top = '16px',
+  left = '16px',
+}: NavigationStackProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  // Always render at least the root entry so the user knows where they are.
+  if (stack.length === 0) return null;
+
+  const visitedStroke  = isDark ? '#908e8c' : '#747270';
+  const visitedText    = isDark ? '#908e8c' : '#747270';
+  const activeStroke   = isDark ? '#e8e6e4' : '#1a1a18';
+  const activeText     = isDark ? '#e8e6e4' : '#1a1a18';
+  const connectorColor = isDark ? '#908e8c' : '#747270';
+  const connectorMarginLeft = 10.5; // padding(4) + circleHalf(7) - connectorHalf(0.5)
+  const currentIndex = stack.length - 1;
+
+  return (
+    <div
+      data-help="navigation-stack"
+      style={{
+        position: 'absolute',
+        top,
+        left,
+        zIndex: 30,
+        pointerEvents: 'auto',
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', padding: '8px' }}>
+        {stack.flatMap((entry, index) => {
+          const isCurrent   = index === currentIndex;
+          const isClickable = index < currentIndex;
+          const isHovered   = hoveredIndex === index;
+          const pastelFill  = PASTEL_FILLS[index % PASTEL_FILLS.length];
+          const rowBg = isCurrent
+            ? hexToRgba(pastelFill, 0.6)
+            : isHovered && isClickable
+            ? hexToRgba(pastelFill, 0.3)
+            : 'transparent';
+
+          const items: React.ReactNode[] = [];
+
+          if (index > 0) {
+            items.push(
+              <div
+                key={`conn-${index}`}
+                style={{
+                  width: '1px',
+                  height: '20px',
+                  marginLeft: `${connectorMarginLeft}px`,
+                  marginTop: '-6px',
+                  marginBottom: '-6px',
+                  background: connectorColor,
+                  alignSelf: 'flex-start',
+                  flexShrink: 0,
+                  position: 'relative',
+                  zIndex: 1,
+                }}
+              />,
+            );
+          }
+
+          items.push(
+            <div
+              key={`${entry.layerId}-${index}`}
+              style={{
+                position: 'relative',
+                zIndex: 2,
+                alignSelf: 'flex-start',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '4px',
+                height: '22px',
+                padding: '4px',
+                borderRadius: '8px',
+                cursor: isClickable ? 'pointer' : 'default',
+                background: rowBg,
+                transition: 'background 0.15s',
+              }}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
+              onClick={e => { e.stopPropagation(); if (isClickable) onNavigateBack(index); }}
+            >
+              <div style={{ width: CIRCLE_SIZE, height: CIRCLE_SIZE, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, zIndex: 4 }}>
+                {isCurrent ? (
+                  <OrganicCircle size={CIRCLE_SIZE} fill={pastelFill} stroke={activeStroke} strokeWidth={1.5} variant={index} isActive />
+                ) : (
+                  <OrganicCircle size={CIRCLE_SIZE} fill={pastelFill} stroke={visitedStroke} strokeWidth={1} variant={index} />
+                )}
+              </div>
+              <span
+                style={{
+                  fontFamily: "'Nunito', sans-serif",
+                  fontSize: isCurrent || (isHovered && isClickable) ? '11px' : '9px',
+                  fontWeight: isCurrent ? 600 : 400,
+                  color: isCurrent ? activeText : visitedText,
+                  lineHeight: 1,
+                  whiteSpace: 'nowrap',
+                  transition: 'color 0.15s, font-size 0.15s',
+                }}
+              >
+                {entry.label}
+              </span>
+            </div>,
+          );
+
+          return items;
+        })}
+      </div>
+    </div>
+  );
+});
+
+export default NavigationStack;

package/src/components/SketchyBoxKonva.tsx

@@ -0,0 +1,121 @@
+// ─── SketchyBoxKonva ─────────────────────────────────────────────────────────
+//
+// Renders the hand-drawn tooltip box using an imperative Konva canvas.
+// Two paths are scaled to fit the container:
+//  - BACK_PATH : shadow stroke, offset 8px down
+//  - FRONT_PATH: filled main box, offset 5.65px right
+//
+// Matches the visualli.ai SketchyBoxKonva component exactly.
+
+import React, { useEffect, useRef } from 'react';
+import Konva from 'konva';
+
+const BACK_PATH =
+  'M0.653,0 L485.653,1 C485.653,1,484.782,152.773,' +
+  '486.653,165 C413.653,171,14.653,178,5.653,168' +
+  'C2.653,158,0.653,0,0.653,0';
+
+const FRONT_PATH =
+  'M485,167.524 L0,166.524' +
+  'C0,166.524,1.870,8.751,0,0' +
+  'C73,0,479,0,487,8' +
+  'C490,18,485,167.524,485,167.524';
+
+const BACK_W  = 486;
+const BACK_H  = 178;
+const FRONT_W = 490;
+const FRONT_H = 168;
+
+const BACK_OFFSET_Y  = 8;
+const FRONT_OFFSET_X = 5.65;
+const SHADOW_PAD     = 12;
+
+export interface SketchyBoxKonvaProps {
+  children: React.ReactNode;
+  fill:      string;
+  stroke:    string;
+  backStroke: string;
+  padding?: string;
+}
+
+const SketchyBoxKonva: React.FC<SketchyBoxKonvaProps> = ({
+  children,
+  fill,
+  stroke,
+  backStroke,
+  padding = '1rem 1.25rem',
+}) => {
+  const wrapperRef      = useRef<HTMLDivElement>(null);
+  const konvaContainerRef = useRef<HTMLDivElement>(null);
+  const stageRef        = useRef<Konva.Stage | null>(null);
+
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const konvaEl = konvaContainerRef.current;
+    if (!wrapper || !konvaEl) return;
+
+    function draw(W: number, H: number) {
+      if (!konvaEl || W <= 0 || H <= 0) return;
+      if (stageRef.current) { stageRef.current.destroy(); stageRef.current = null; }
+
+      const stage = new Konva.Stage({ container: konvaEl, width: W, height: H });
+      const layer = new Konva.Layer({ listening: false });
+      const contentH = H - SHADOW_PAD;
+
+      layer.add(new Konva.Path({
+        x: 0, y: BACK_OFFSET_Y,
+        data: BACK_PATH,
+        scaleX: W / BACK_W,
+        scaleY: contentH / BACK_H,
+        fill: '#ffffff',
+        stroke: backStroke,
+        strokeWidth: 2,
+        strokeScaleEnabled: false,
+        listening: false,
+      }));
+
+      layer.add(new Konva.Path({
+        x: FRONT_OFFSET_X, y: 0,
+        data: FRONT_PATH,
+        scaleX: (W - FRONT_OFFSET_X) / FRONT_W,
+        scaleY: contentH / FRONT_H,
+        fill,
+        stroke,
+        strokeWidth: 3,
+        strokeScaleEnabled: false,
+        listening: false,
+      }));
+
+      stage.add(layer);
+      stageRef.current = stage;
+    }
+
+    draw(wrapper.offsetWidth, wrapper.offsetHeight);
+
+    const ro = new ResizeObserver(entries => {
+      const el = entries[0].target as HTMLElement;
+      draw(el.offsetWidth, el.offsetHeight);
+    });
+    ro.observe(wrapper);
+
+    return () => {
+      ro.disconnect();
+      stageRef.current?.destroy();
+      stageRef.current = null;
+    };
+  }, [fill, stroke, backStroke]);
+
+  return (
+    <div ref={wrapperRef} style={{ position: 'relative', paddingBottom: `${SHADOW_PAD}px` }}>
+      <div
+        ref={konvaContainerRef}
+        style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0, overflow: 'hidden' }}
+      />
+      <div style={{ position: 'relative', padding, zIndex: 1 }}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default SketchyBoxKonva;