@almadar/ui 5.62.0 → 5.63.1

package/dist/components/index.cjs

@@ -3248,12 +3248,60 @@ var init_Avatar = __esm({
     exports.Avatar.displayName = "Avatar";
   }
 });
+function useTapReveal(options = {}) {
+  const { onReveal, onDismiss, refs, enabled = true } = options;
+  const [revealed, setRevealed] = React79.useState(false);
+  const onRevealRef = React79.useRef(onReveal);
+  const onDismissRef = React79.useRef(onDismiss);
+  onRevealRef.current = onReveal;
+  onDismissRef.current = onDismiss;
+  const reveal = React79.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (!wasRevealed) onRevealRef.current?.();
+      return true;
+    });
+  }, []);
+  const dismiss = React79.useCallback(() => {
+    setRevealed((wasRevealed) => {
+      if (wasRevealed) onDismissRef.current?.();
+      return false;
+    });
+  }, []);
+  const onPointerDown = React79.useCallback(
+    (e) => {
+      if (!enabled || e.pointerType === "mouse") return;
+      if (revealed) dismiss();
+      else reveal();
+    },
+    [enabled, revealed, reveal, dismiss]
+  );
+  React79.useEffect(() => {
+    if (!revealed || typeof document === "undefined") return;
+    const onDocDown = (ev) => {
+      const target = ev.target;
+      if (!(target instanceof Node)) return;
+      const inside = (refs ?? []).some((r) => r.current?.contains(target));
+      if (!inside) dismiss();
+    };
+    const id = setTimeout(() => document.addEventListener("pointerdown", onDocDown), 0);
+    return () => {
+      clearTimeout(id);
+      document.removeEventListener("pointerdown", onDocDown);
+    };
+  }, [revealed, refs, dismiss]);
+  return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
+}
+var init_useTapReveal = __esm({
+  "hooks/useTapReveal.ts"() {
+  }
+});
 var paddingStyles2, paddingXStyles, paddingYStyles, marginStyles, marginXStyles, marginYStyles, bgStyles, roundedStyles, shadowStyles2, displayStyles, overflowStyles, positionStyles; exports.Box = void 0;
 var init_Box = __esm({
   "components/core/atoms/Box.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
+    init_useTapReveal();
     paddingStyles2 = {
       none: "p-0",
       xs: "p-1",
@@ -3379,10 +3427,12 @@ var init_Box = __esm({
         action,
         actionPayload,
         hoverEvent,
+        tapReveal = true,
         maxWidth,
         onClick,
         onMouseEnter,
         onMouseLeave,
+        onPointerDown,
         ...rest
       }, ref) => {
         const eventBus = useEventBus();
@@ -3405,6 +3455,19 @@ var init_Box = __esm({
           }
           onMouseLeave?.(e);
         }, [hoverEvent, eventBus, onMouseLeave]);
+        const { triggerProps } = useTapReveal({
+          enabled: tapReveal && !!hoverEvent,
+          onReveal: React79.useCallback(() => {
+            if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+          }, [hoverEvent, eventBus]),
+          onDismiss: React79.useCallback(() => {
+            if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+          }, [hoverEvent, eventBus])
+        });
+        const handlePointerDown = React79.useCallback((e) => {
+          if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
+          onPointerDown?.(e);
+        }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
         const isClickable = action || onClick;
         return React79__namespace.default.createElement(
           Component2,
@@ -3432,6 +3495,7 @@ var init_Box = __esm({
             onClick: isClickable ? handleClick : void 0,
             onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
             onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+            onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
             style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
             ...rest
           },
@@ -4188,6 +4252,11 @@ var init_TextHighlight = __esm({
             if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false, annotationId });
             onMouseLeave?.();
           },
+          onPointerDown: (e) => {
+            if (e.pointerType === "mouse") return;
+            if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true, annotationId });
+            onMouseEnter?.();
+          },
           role: "button",
           tabIndex: 0,
           onKeyDown: (e) => {
@@ -4686,6 +4755,7 @@ var init_LawReferenceTooltip = __esm({
     init_Typography();
     init_Divider();
     init_cn();
+    init_useTapReveal();
     positionStyles2 = {
       top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
       bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
@@ -4707,6 +4777,7 @@ var init_LawReferenceTooltip = __esm({
       const { t } = hooks.useTranslate();
       const [isVisible, setIsVisible] = React79__namespace.default.useState(false);
       const timeoutRef = React79__namespace.default.useRef(null);
+      const triggerRef = React79__namespace.default.useRef(null);
       const handleMouseEnter = () => {
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -4715,6 +4786,8 @@ var init_LawReferenceTooltip = __esm({
         if (timeoutRef.current) clearTimeout(timeoutRef.current);
         setIsVisible(false);
       };
+      const { revealed, triggerProps } = useTapReveal({ refs: [triggerRef] });
+      const open = isVisible || revealed;
       React79__namespace.default.useEffect(() => {
         return () => {
           if (timeoutRef.current) clearTimeout(timeoutRef.current);
@@ -4723,6 +4796,7 @@ var init_LawReferenceTooltip = __esm({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         exports.Box,
         {
+          ref: triggerRef,
           as: "span",
           position: "relative",
           display: "inline-block",
@@ -4731,9 +4805,10 @@ var init_LawReferenceTooltip = __esm({
           onMouseLeave: handleMouseLeave,
           onFocus: handleMouseEnter,
           onBlur: handleMouseLeave,
+          onPointerDown: triggerProps.onPointerDown,
           children: [
             children,
-            isVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+            open && /* @__PURE__ */ jsxRuntime.jsxs(
               exports.Box,
               {
                 padding: "sm",
@@ -9378,6 +9453,36 @@ function useCamera() {
     cameraRef.current.zoom = Math.max(0.5, Math.min(3, cameraRef.current.zoom * zoomDelta));
     drawFn?.();
   }, []);
+  const handlePointerDown = React79.useCallback((e) => {
+    handleMouseDown(e);
+  }, [handleMouseDown]);
+  const handlePointerUp = React79.useCallback(() => {
+    handleMouseUp();
+  }, [handleMouseUp]);
+  const handlePointerMove = React79.useCallback((e, drawFn) => {
+    return handleMouseMove(e, drawFn);
+  }, [handleMouseMove]);
+  const panBy = React79.useCallback((dx, dy, drawFn) => {
+    cameraRef.current.x -= dx;
+    cameraRef.current.y -= dy;
+    targetCameraRef.current = null;
+    drawFn?.();
+  }, []);
+  const zoomAtPoint = React79.useCallback((factor, centerX, centerY, viewportSize, drawFn) => {
+    const cam = cameraRef.current;
+    const oldZoom = cam.zoom;
+    const newZoom = Math.max(0.5, Math.min(3, oldZoom * factor));
+    if (newZoom === oldZoom) {
+      drawFn?.();
+      return;
+    }
+    const inv = 1 / oldZoom - 1 / newZoom;
+    cam.x += (centerX - viewportSize.width / 2) * inv;
+    cam.y += (centerY - viewportSize.height / 2) * inv;
+    cam.zoom = newZoom;
+    targetCameraRef.current = null;
+    drawFn?.();
+  }, []);
   const screenToWorld = React79.useCallback((clientX, clientY, canvas, viewportSize) => {
     const rect = canvas.getBoundingClientRect();
     const screenX = clientX - rect.left;
@@ -9409,6 +9514,11 @@ function useCamera() {
     handleMouseMove,
     handleMouseLeave,
     handleWheel,
+    handlePointerDown,
+    handlePointerUp,
+    handlePointerMove,
+    panBy,
+    zoomAtPoint,
     screenToWorld,
     lerpToTarget
   };
@@ -9418,6 +9528,113 @@ var init_useCamera = __esm({
     "use client";
   }
 });
+function localPoint(canvas, clientX, clientY) {
+  if (!canvas) return { x: clientX, y: clientY };
+  const rect = canvas.getBoundingClientRect();
+  return { x: clientX - rect.left, y: clientY - rect.top };
+}
+function useCanvasGestures(options) {
+  const {
+    canvasRef,
+    enabled = true,
+    wheelStep = 1.1,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onZoom,
+    onPanDelta,
+    onMultiTouchStart
+  } = options;
+  const pointers = React79.useRef(/* @__PURE__ */ new Map());
+  const pinch = React79.useRef(null);
+  const computePinch = React79.useCallback(() => {
+    const pts = [...pointers.current.values()];
+    const dx = pts[1].x - pts[0].x;
+    const dy = pts[1].y - pts[0].y;
+    return {
+      distance: Math.hypot(dx, dy) || 1,
+      centroid: { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }
+    };
+  }, []);
+  const handlePointerDown = React79.useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pointers.current.set(e.pointerId, localPoint(canvasRef.current, e.clientX, e.clientY));
+      if (pointers.current.size === 2) {
+        onMultiTouchStart?.();
+        pinch.current = computePinch();
+      } else if (pointers.current.size === 1) {
+        onPointerDown?.(e);
+      }
+    },
+    [enabled, canvasRef, onMultiTouchStart, computePinch, onPointerDown]
+  );
+  const handlePointerMove = React79.useCallback(
+    (e) => {
+      if (!enabled) return;
+      if (pointers.current.has(e.pointerId)) {
+        pointers.current.set(e.pointerId, localPoint(canvasRef.current, e.clientX, e.clientY));
+      }
+      if (pointers.current.size >= 2 && pinch.current) {
+        const next = computePinch();
+        const prev = pinch.current;
+        if (next.distance !== prev.distance) {
+          onZoom?.(next.distance / prev.distance, next.centroid.x, next.centroid.y);
+        }
+        onPanDelta?.(next.centroid.x - prev.centroid.x, next.centroid.y - prev.centroid.y);
+        pinch.current = next;
+        return;
+      }
+      onPointerMove?.(e);
+    },
+    [enabled, canvasRef, computePinch, onZoom, onPanDelta, onPointerMove]
+  );
+  const endPointer = React79.useCallback(
+    (e, fireUp) => {
+      const wasMulti = pointers.current.size >= 2;
+      pointers.current.delete(e.pointerId);
+      if (pointers.current.size < 2) pinch.current = null;
+      if (wasMulti && pointers.current.size === 1) return;
+      if (pointers.current.size === 0 && fireUp) onPointerUp?.(e);
+    },
+    [onPointerUp]
+  );
+  const handlePointerUp = React79.useCallback(
+    (e) => {
+      if (!enabled) return;
+      endPointer(e, true);
+    },
+    [enabled, endPointer]
+  );
+  const handlePointerCancel = React79.useCallback(
+    (e) => {
+      if (!enabled) return;
+      endPointer(e, false);
+    },
+    [enabled, endPointer]
+  );
+  const handleWheel = React79.useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      const { x, y } = localPoint(canvasRef.current, e.clientX, e.clientY);
+      onZoom?.(e.deltaY < 0 ? wheelStep : 1 / wheelStep, x, y);
+    },
+    [enabled, canvasRef, wheelStep, onZoom]
+  );
+  return {
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onWheel: handleWheel
+  };
+}
+var init_useCanvasGestures = __esm({
+  "hooks/useCanvasGestures.ts"() {
+  }
+});
 
 // components/game/organisms/utils/spriteSheetConstants.ts
 exports.SHEET_COLUMNS = void 0; exports.SPRITE_SHEET_LAYOUT = void 0;
@@ -9923,13 +10140,13 @@ function IsometricCanvas({
   const {
     cameraRef,
     targetCameraRef,
-    isDragging,
     dragDistance,
-    handleMouseDown,
-    handleMouseUp,
-    handleMouseMove,
     handleMouseLeave,
-    handleWheel,
+    handlePointerDown,
+    handlePointerUp,
+    handlePointerMove,
+    panBy,
+    zoomAtPoint,
     screenToWorld,
     lerpToTarget
   } = useCamera();
@@ -10364,11 +10581,16 @@ function IsometricCanvas({
       cancelAnimationFrame(rafIdRef.current);
     };
   }, [draw, units.length, validMoves.length, attackTargets.length, selectedUnitId, hasActiveEffects2, pendingCount, atlasPending, lerpToTarget, targetCameraRef]);
-  const handleMouseMoveWithCamera = React79.useCallback((e) => {
-    if (enableCamera) {
-      const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
-      if (wasPanning) return;
-    }
+  const singlePointerActiveRef = React79.useRef(false);
+  const handleCanvasPointerDown = React79.useCallback((e) => {
+    singlePointerActiveRef.current = true;
+    if (enableCamera) handlePointerDown(e);
+  }, [enableCamera, handlePointerDown]);
+  const handleCanvasPointerMove = React79.useCallback((e) => {
+    if (enableCamera) handlePointerMove(e, () => draw(animTimeRef.current));
+  }, [enableCamera, handlePointerMove, draw]);
+  const handleCanvasHover = React79.useCallback((e) => {
+    if (singlePointerActiveRef.current) return;
     if (!onTileHover && !tileHoverEvent || !canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
@@ -10379,26 +10601,10 @@ function IsometricCanvas({
       if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
       onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
-  const handleMouseLeaveWithCamera = React79.useCallback(() => {
-    handleMouseLeave();
-    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
-    onTileLeave?.();
-  }, [handleMouseLeave, onTileLeave, tileLeaveEvent, eventBus]);
-  const handleWheelWithCamera = React79.useCallback((e) => {
-    if (enableCamera) {
-      handleWheel(e, () => draw(animTimeRef.current));
-    }
-  }, [enableCamera, handleWheel, draw]);
-  React79.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    canvas.addEventListener("wheel", handleWheelWithCamera, { passive: false });
-    return () => {
-      canvas.removeEventListener("wheel", handleWheelWithCamera);
-    };
-  }, [handleWheelWithCamera]);
-  const handleClick = React79.useCallback((e) => {
+  }, [onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
+  const handleCanvasPointerUp = React79.useCallback((e) => {
+    singlePointerActiveRef.current = false;
+    if (enableCamera) handlePointerUp();
     if (dragDistance() > 5) return;
     if (!canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
@@ -10416,7 +10622,32 @@ function IsometricCanvas({
         onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  }, [enableCamera, handlePointerUp, dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledDiamondTopY, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
+  const handleCanvasPointerLeave = React79.useCallback(() => {
+    handleMouseLeave();
+    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
+    onTileLeave?.();
+  }, [handleMouseLeave, onTileLeave, tileLeaveEvent, eventBus]);
+  const applyZoom = React79.useCallback((factor, centerX, centerY) => {
+    if (enableCamera) zoomAtPoint(factor, centerX, centerY, viewportSize, () => draw(animTimeRef.current));
+  }, [enableCamera, zoomAtPoint, viewportSize, draw]);
+  const applyPanDelta = React79.useCallback((dx, dy) => {
+    if (enableCamera) panBy(dx, dy, () => draw(animTimeRef.current));
+  }, [enableCamera, panBy, draw]);
+  const cancelSinglePointer = React79.useCallback(() => {
+    singlePointerActiveRef.current = false;
+    if (enableCamera) handlePointerUp();
+  }, [enableCamera, handlePointerUp]);
+  const gestureHandlers = useCanvasGestures({
+    canvasRef,
+    enabled: enableCamera || !!onTileHover || !!tileHoverEvent || !!onTileClick || !!tileClickEvent || !!onUnitClick || !!unitClickEvent,
+    onPointerDown: handleCanvasPointerDown,
+    onPointerMove: handleCanvasPointerMove,
+    onPointerUp: handleCanvasPointerUp,
+    onZoom: applyZoom,
+    onPanDelta: applyPanDelta,
+    onMultiTouchStart: cancelSinglePointer
+  });
   if (error) {
     return /* @__PURE__ */ jsxRuntime.jsx(exports.ErrorState, { title: t("canvas.errorTitle"), message: error.message, className });
   }
@@ -10448,13 +10679,17 @@ function IsometricCanvas({
           {
             ref: canvasRef,
             "data-testid": "game-canvas",
-            onClick: handleClick,
-            onMouseDown: enableCamera ? handleMouseDown : void 0,
-            onMouseMove: handleMouseMoveWithCamera,
-            onMouseUp: enableCamera ? handleMouseUp : void 0,
-            onMouseLeave: handleMouseLeaveWithCamera,
+            onPointerDown: gestureHandlers.onPointerDown,
+            onPointerMove: (e) => {
+              gestureHandlers.onPointerMove(e);
+              handleCanvasHover(e);
+            },
+            onPointerUp: gestureHandlers.onPointerUp,
+            onPointerCancel: gestureHandlers.onPointerCancel,
+            onPointerLeave: handleCanvasPointerLeave,
+            onWheel: gestureHandlers.onWheel,
             onContextMenu: (e) => e.preventDefault(),
-            className: "cursor-pointer",
+            className: "cursor-pointer touch-none",
             style: {
               width: viewportSize.width,
               height: viewportSize.height
@@ -10508,6 +10743,7 @@ var init_IsometricCanvas = __esm({
     init_ErrorState();
     init_useImageCache();
     init_useCamera();
+    init_useCanvasGestures();
     init_useUnitSpriteAtlas();
     init_verificationRegistry();
     init_isometric();
@@ -13623,6 +13859,10 @@ var init_StateMachineView = __esm({
         const handleMouseLeave2 = () => {
           onHover(null, 0, 0);
         };
+        const handlePointerDown2 = (e) => {
+          if (e.pointerType === "mouse") return;
+          handleMouseEnter2();
+        };
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "g",
           {
@@ -13632,6 +13872,7 @@ var init_StateMachineView = __esm({
             onClick: () => onClick?.(bundle),
             onMouseEnter: handleMouseEnter2,
             onMouseLeave: handleMouseLeave2,
+            onPointerDown: handlePointerDown2,
             style: { pointerEvents: "auto" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -13749,6 +13990,10 @@ var init_StateMachineView = __esm({
       const handleMouseLeave = React79.useCallback(() => {
         onHover(null, 0, 0);
       }, [onHover]);
+      const handlePointerDown = React79.useCallback((e) => {
+        if (e.pointerType === "mouse") return;
+        handleMouseEnter();
+      }, [handleMouseEnter]);
       const uniqueMarkerId = `arrow-${bundle.id}`;
       const hasDetails = bundle.labels.some((l) => l.hasDetails);
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -13760,6 +14005,7 @@ var init_StateMachineView = __esm({
           onClick: () => onClick?.(bundle),
           onMouseEnter: handleMouseEnter,
           onMouseLeave: handleMouseLeave,
+          onPointerDown: handlePointerDown,
           style: { pointerEvents: "auto" },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -22532,10 +22778,84 @@ function SubMenu({
   );
   return typeof document !== "undefined" ? reactDom.createPortal(panel, document.body) : panel;
 }
+function MenuItemRow({
+  item,
+  itemId,
+  hasSubMenu,
+  isDanger,
+  direction,
+  isSubMenuOpen,
+  activeSubMenuRef,
+  eventBus,
+  onItemClick,
+  openSubMenu
+}) {
+  const rowRef = React79.useRef(null);
+  const { triggerProps } = useTapReveal({
+    enabled: hasSubMenu,
+    onReveal: () => openSubMenu(itemId, rowRef.current),
+    refs: [rowRef]
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      exports.Box,
+      {
+        ref: rowRef,
+        as: "button",
+        onClick: () => onItemClick({ ...item, id: itemId }, itemId),
+        "aria-disabled": item.disabled || void 0,
+        onMouseEnter: (e) => {
+          if (hasSubMenu) openSubMenu(itemId, e.currentTarget);
+        },
+        onPointerDown: hasSubMenu ? triggerProps.onPointerDown : void 0,
+        "data-testid": item.event ? `action-${item.event}` : void 0,
+        className: cn(
+          "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
+          "text-sm transition-colors",
+          "hover:bg-muted",
+          "focus:outline-none focus:bg-muted",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          item.disabled && "cursor-not-allowed",
+          isDanger && "text-error hover:bg-error/10"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
+          item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Typography,
+            {
+              variant: "small",
+              className: cn("flex-1", isDanger && "text-red-600"),
+              children: item.label
+            }
+          ),
+          item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", size: "sm", children: item.badge }),
+          hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Icon,
+            {
+              name: direction === "rtl" ? "chevron-left" : "chevron-right",
+              size: "sm",
+              className: "flex-shrink-0"
+            }
+          )
+        ] })
+      }
+    ),
+    hasSubMenu && isSubMenuOpen && item.subMenu && /* @__PURE__ */ jsxRuntime.jsx(
+      SubMenu,
+      {
+        items: item.subMenu,
+        itemRef: activeSubMenuRef,
+        direction,
+        eventBus
+      }
+    )
+  ] });
+}
 var MENU_GAP, menuContainerStyles; exports.Menu = void 0;
 var init_Menu = __esm({
   "components/core/molecules/Menu.tsx"() {
     "use client";
+    init_useTapReveal();
     init_Box();
     init_Icon();
     init_Divider();
@@ -22590,6 +22910,10 @@ var init_Menu = __esm({
           setIsOpen(false);
         }
       };
+      const openSubMenu = (itemId, el) => {
+        setActiveSubMenu(itemId);
+        setActiveSubMenuRef(el);
+      };
       React79.useEffect(() => {
         if (isOpen) {
           updatePosition();
@@ -22633,61 +22957,22 @@ var init_Menu = __esm({
         if (isDivider) {
           return /* @__PURE__ */ jsxRuntime.jsx(exports.Divider, { className: "my-1" }, `divider-${index}`);
         }
-        return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            exports.Box,
-            {
-              as: "button",
-              onClick: () => handleItemClick({ ...item, id: itemId }, itemId),
-              "aria-disabled": item.disabled || void 0,
-              onMouseEnter: (e) => {
-                if (hasSubMenu) {
-                  setActiveSubMenu(itemId);
-                  setActiveSubMenuRef(e.currentTarget);
-                }
-              },
-              "data-testid": item.event ? `action-${item.event}` : void 0,
-              className: cn(
-                "w-full flex items-center justify-between gap-3 px-4 py-2 text-start",
-                "text-sm transition-colors",
-                "hover:bg-muted",
-                "focus:outline-none focus:bg-muted",
-                "disabled:opacity-50 disabled:cursor-not-allowed",
-                item.disabled && "cursor-not-allowed",
-                isDanger && "text-error hover:bg-error/10"
-              ),
-              children: /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "flex items-center gap-3 flex-1 min-w-0", children: [
-                item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, size: "sm", className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm", className: "flex-shrink-0" })),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  exports.Typography,
-                  {
-                    variant: "small",
-                    className: cn("flex-1", isDanger && "text-red-600"),
-                    children: item.label
-                  }
-                ),
-                item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", size: "sm", children: item.badge }),
-                hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx(
-                  exports.Icon,
-                  {
-                    name: direction === "rtl" ? "chevron-left" : "chevron-right",
-                    size: "sm",
-                    className: "flex-shrink-0"
-                  }
-                )
-              ] })
-            }
-          ),
-          hasSubMenu && activeSubMenu === itemId && item.subMenu && /* @__PURE__ */ jsxRuntime.jsx(
-            SubMenu,
-            {
-              items: item.subMenu,
-              itemRef: activeSubMenuRef,
-              direction,
-              eventBus
-            }
-          )
-        ] }, itemId);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItemRow,
+          {
+            item,
+            itemId,
+            hasSubMenu,
+            isDanger,
+            direction,
+            isSubMenuOpen: activeSubMenu === itemId,
+            activeSubMenuRef,
+            eventBus,
+            onItemClick: handleItemClick,
+            openSubMenu
+          },
+          itemId
+        );
       });
       const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -25932,6 +26217,7 @@ var init_Popover = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_useTapReveal();
     arrowClasses = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-white border-l-transparent border-r-transparent border-b-transparent",
       bottom: "bottom-full left-1/2 -translate-x-1/2 border-b-white border-l-transparent border-r-transparent border-t-transparent",
@@ -26002,18 +26288,32 @@ var init_Popover = __esm({
         document.addEventListener("mousedown", handleClickOutside);
         return () => document.removeEventListener("mousedown", handleClickOutside);
       }, [isOpen, trigger]);
-      const triggerProps = trigger === "click" ? {
+      const { triggerProps: tapTriggerProps } = useTapReveal({
+        enabled: trigger === "hover",
+        onReveal: handleOpen,
+        onDismiss: handleClose,
+        refs: [triggerRef, popoverRef]
+      });
+      const handlerProps = trigger === "click" ? {
         onClick: handleToggle
       } : {
         onMouseEnter: handleOpen,
-        onMouseLeave: handleClose
+        onMouseLeave: handleClose,
+        onPointerDown: tapTriggerProps.onPointerDown
       };
       const childElement = React79__namespace.default.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children });
+      const childPointerDown = childElement.props.onPointerDown;
       const triggerElement = React79__namespace.default.cloneElement(
         childElement,
         {
           ref: triggerRef,
-          ...triggerProps
+          ...handlerProps,
+          ...trigger === "hover" ? {
+            onPointerDown: (e) => {
+              tapTriggerProps.onPointerDown(e);
+              childPointerDown?.(e);
+            }
+          } : void 0
         }
       );
       const panel = isOpen && triggerRect ? /* @__PURE__ */ jsxRuntime.jsxs(
@@ -26794,6 +27094,7 @@ var init_Tooltip = __esm({
     "use client";
     init_Typography();
     init_cn();
+    init_useTapReveal();
     TRIGGER_GAP2 = 8;
     arrowClasses2 = {
       top: "top-full left-1/2 -translate-x-1/2 border-t-primary border-l-transparent border-r-transparent border-b-transparent",
@@ -26838,6 +27139,11 @@ var init_Tooltip = __esm({
           setIsVisible(false);
         }, hideDelay);
       };
+      const { triggerProps } = useTapReveal({
+        onReveal: handleMouseEnter,
+        onDismiss: handleMouseLeave,
+        refs: [triggerRef, tooltipRef]
+      });
       React79.useLayoutEffect(() => {
         if (isVisible) {
           updatePosition();
@@ -26850,12 +27156,17 @@ var init_Tooltip = __esm({
         };
       }, []);
       const triggerElement = React79__namespace.default.isValidElement(children) ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children });
+      const childPointerDown = triggerElement.props.onPointerDown;
       const trigger = React79__namespace.default.cloneElement(triggerElement, {
         ref: triggerRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onFocus: handleMouseEnter,
-        onBlur: handleMouseLeave
+        onBlur: handleMouseLeave,
+        onPointerDown: (e) => {
+          triggerProps.onPointerDown(e);
+          childPointerDown?.(e);
+        }
       });
       const tooltipContent = isVisible && triggerRect ? /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -30528,6 +30839,14 @@ var init_GraphView = __esm({
         },
         [onNodeClick]
       );
+      const handleNodePointerDown = React79.useCallback(
+        (e, node) => {
+          if (e.pointerType === "mouse") return;
+          handleNodeMouseEnter(node);
+          handleNodeClickInternal(node);
+        },
+        [handleNodeMouseEnter, handleNodeClickInternal]
+      );
       if (nodes.length === 0) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("flex items-center justify-center", className), style: { width: w, height: h }, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "text-muted-foreground text-sm", children: t("display.noGraphData") }) });
       }
@@ -30587,6 +30906,7 @@ var init_GraphView = __esm({
                       onMouseEnter: () => handleNodeMouseEnter(node),
                       onMouseLeave: handleNodeMouseLeave,
                       onClick: () => handleNodeClickInternal(node),
+                      onPointerDown: (e) => handleNodePointerDown(e, node),
                       children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "circle",
@@ -30667,13 +30987,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect82, useRef: useRef81, useCallback: useCallback125, useState: useState111 } = React79__namespace.default;
+      const { useEffect: useEffect83, useRef: useRef83, useCallback: useCallback127, useState: useState112 } = React79__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef81({ centerLat, centerLng, zoom });
-        useEffect82(() => {
+        const prevRef = useRef83({ centerLat, centerLng, zoom });
+        useEffect83(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -30684,7 +31004,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect82(() => {
+        useEffect83(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -30712,8 +31032,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus3();
-        const [clickedPosition, setClickedPosition] = useState111(null);
-        const handleMapClick = useCallback125((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState112(null);
+        const handleMapClick = useCallback127((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -30722,7 +31042,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback125((marker) => {
+        const handleMarkerClick = useCallback127((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -31063,7 +31383,7 @@ var init_StarRating = __esm({
           "aria-valuenow": value,
           tabIndex: readOnly ? void 0 : 0,
           onKeyDown: handleKeyDown,
-          onMouseLeave: () => setHoverValue(null),
+          onPointerLeave: () => setHoverValue(null),
           children: Array.from({ length: max }, (_, i) => {
             const fillLevel = Math.max(0, Math.min(1, displayValue - i));
             const isFull = fillLevel >= 1;
@@ -31073,7 +31393,7 @@ var init_StarRating = __esm({
               {
                 className: "relative inline-block",
                 onClick: () => handleStarClick(i, false),
-                onMouseMove: (e) => {
+                onPointerMove: (e) => {
                   if (readOnly) return;
                   const rect = e.currentTarget.getBoundingClientRect();
                   const isLeftHalf = e.clientX - rect.left < rect.width / 2;
@@ -34963,7 +35283,7 @@ var init_PositionedCanvas = __esm({
           {
             ref: containerRef,
             "data-testid": "positioned-canvas",
-            className: "relative bg-background border border-border rounded-container overflow-hidden",
+            className: "relative bg-background border border-border rounded-container overflow-hidden touch-none",
             style: { width, height },
             onClick: handleContainerClick,
             children: items.map((item) => {
@@ -39132,6 +39452,7 @@ var init_GraphCanvas = __esm({
     init_ErrorState();
     init_EmptyState();
     init_useEventBus();
+    init_useCanvasGestures();
     GROUP_COLORS2 = [
       "var(--color-primary)",
       "var(--color-success)",
@@ -39169,6 +39490,10 @@ var init_GraphCanvas = __esm({
       const animRef = React79.useRef(0);
       const [zoom, setZoom] = React79.useState(1);
       const [offset, setOffset] = React79.useState({ x: 0, y: 0 });
+      const zoomRef = React79.useRef(zoom);
+      zoomRef.current = zoom;
+      const offsetRef = React79.useRef(offset);
+      offsetRef.current = offset;
       const [hoveredNode, setHoveredNode] = React79.useState(null);
       const nodesRef = React79.useRef([]);
       const [, forceUpdate] = React79.useState(0);
@@ -39428,25 +39753,27 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
-      const handleWheel = React79.useCallback(
-        (e) => {
-          if (!interactive) return;
-          e.preventDefault();
-          const coords = toCoords(e);
-          if (!coords) return;
-          const oldZoom = zoom;
-          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
-          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
-          if (newZoom === oldZoom) return;
-          setOffset((o) => ({
-            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
-            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
-          }));
-          setZoom(newZoom);
-        },
-        [interactive, toCoords, zoom]
-      );
-      const handleMouseDown = React79.useCallback(
+      const applyZoom = React79.useCallback((factor, cx, cy) => {
+        if (!interactive) return;
+        const oldZoom = zoomRef.current;
+        const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+        if (newZoom === oldZoom) return;
+        const o = offsetRef.current;
+        setOffset({
+          x: cx - (cx - o.x) * (newZoom / oldZoom),
+          y: cy - (cy - o.y) * (newZoom / oldZoom)
+        });
+        setZoom(newZoom);
+      }, [interactive]);
+      const applyPanDelta = React79.useCallback((dx, dy) => {
+        if (!interactive) return;
+        setOffset((o) => ({ x: o.x + dx, y: o.y + dy }));
+      }, [interactive]);
+      const cancelSinglePointer = React79.useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+      }, []);
+      const handlePointerDown = React79.useCallback(
         (e) => {
           const coords = toCoords(e);
           if (!coords) return;
@@ -39468,7 +39795,7 @@ var init_GraphCanvas = __esm({
         },
         [toCoords, nodeAt, draggable, interactive, offset]
       );
-      const handleMouseMove = React79.useCallback(
+      const handlePointerMove = React79.useCallback(
         (e) => {
           const state = interactionRef.current;
           if (state.mode === "panning") {
@@ -39497,7 +39824,7 @@ var init_GraphCanvas = __esm({
         },
         [toCoords, nodeAt]
       );
-      const handleMouseUp = React79.useCallback(
+      const handlePointerUp = React79.useCallback(
         (e) => {
           const state = interactionRef.current;
           const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
@@ -39514,11 +39841,19 @@ var init_GraphCanvas = __esm({
         },
         [toCoords, nodeAt, handleNodeClick]
       );
-      const handleMouseLeave = React79.useCallback(() => {
-        interactionRef.current.mode = "none";
-        interactionRef.current.dragNodeId = null;
+      const handlePointerLeave = React79.useCallback(() => {
         setHoveredNode(null);
       }, []);
+      const gestureHandlers = useCanvasGestures({
+        canvasRef,
+        enabled: interactive || draggable,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onZoom: applyZoom,
+        onPanDelta: applyPanDelta,
+        onMultiTouchStart: cancelSinglePointer
+      });
       const handleDoubleClick = React79.useCallback(
         (e) => {
           const coords = toCoords(e);
@@ -39587,13 +39922,14 @@ var init_GraphCanvas = __esm({
             ref: canvasRef,
             width: Math.round(logicalW * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
             height: Math.round(height * (typeof window !== "undefined" && window.devicePixelRatio || 1)),
-            className: "w-full cursor-grab active:cursor-grabbing",
+            className: "w-full cursor-grab active:cursor-grabbing touch-none",
             style: { height },
-            onWheel: handleWheel,
-            onMouseDown: handleMouseDown,
-            onMouseMove: handleMouseMove,
-            onMouseUp: handleMouseUp,
-            onMouseLeave: handleMouseLeave,
+            onPointerDown: gestureHandlers.onPointerDown,
+            onPointerMove: gestureHandlers.onPointerMove,
+            onPointerUp: gestureHandlers.onPointerUp,
+            onPointerCancel: gestureHandlers.onPointerCancel,
+            onPointerLeave: handlePointerLeave,
+            onWheel: gestureHandlers.onWheel,
             onDoubleClick: handleDoubleClick
           }
         ) }),
@@ -44392,6 +44728,9 @@ var init_GameCanvas3D2 = __esm({
                             target: cameraTarget,
                             enableDamping: true,
                             dampingFactor: 0.05,
+                            enableZoom: true,
+                            enablePan: true,
+                            touches: { ONE: THREE3__namespace.TOUCH.ROTATE, TWO: THREE3__namespace.TOUCH.DOLLY_PAN },
                             minDistance: 2,
                             maxDistance: 100,
                             maxPolarAngle: Math.PI / 2 - 0.1
@@ -49877,20 +50216,21 @@ var init_SplitPane = __esm({
       const [ratio, setRatio] = React79.useState(initialRatio);
       const containerRef = React79.useRef(null);
       const isDragging = React79.useRef(false);
-      const handleMouseDown = React79.useCallback(
+      const handlePointerDown = React79.useCallback(
         (e) => {
           if (!resizable) return;
           e.preventDefault();
           isDragging.current = true;
-          const handleMouseMove = (e2) => {
+          e.currentTarget.setPointerCapture(e.pointerId);
+          const handlePointerMove = (ev) => {
             if (!isDragging.current || !containerRef.current) return;
             const rect = containerRef.current.getBoundingClientRect();
             let newRatio;
             if (direction === "horizontal") {
-              const x = e2.clientX - rect.left;
+              const x = ev.clientX - rect.left;
               newRatio = x / rect.width * 100;
             } else {
-              const y = e2.clientY - rect.top;
+              const y = ev.clientY - rect.top;
               newRatio = y / rect.height * 100;
             }
             const minRatio = minSize / (direction === "horizontal" ? rect.width : rect.height) * 100;
@@ -49898,13 +50238,15 @@ var init_SplitPane = __esm({
             newRatio = Math.max(minRatio, Math.min(maxRatio, newRatio));
             setRatio(newRatio);
           };
-          const handleMouseUp = () => {
+          const handlePointerUp = () => {
             isDragging.current = false;
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+            document.removeEventListener("pointercancel", handlePointerUp);
           };
-          document.addEventListener("mousemove", handleMouseMove);
-          document.addEventListener("mouseup", handleMouseUp);
+          document.addEventListener("pointermove", handlePointerMove);
+          document.addEventListener("pointerup", handlePointerUp);
+          document.addEventListener("pointercancel", handlePointerUp);
         },
         [direction, minSize, resizable]
       );
@@ -49933,9 +50275,9 @@ var init_SplitPane = __esm({
             resizable && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                onMouseDown: handleMouseDown,
+                onPointerDown: handlePointerDown,
                 className: cn(
-                  "flex-shrink-0 bg-border transition-colors",
+                  "flex-shrink-0 bg-border transition-colors touch-none",
                   isHorizontal ? "w-1 cursor-col-resize hover:w-1.5 hover:bg-muted-foreground" : "h-1 cursor-row-resize hover:h-1.5 hover:bg-muted-foreground"
                 )
               }