@mcp-shark/mcp-shark 1.5.13 → 1.7.2

package/ui/src/components/TourOverlay.jsx

@@ -1,117 +0,0 @@
-function TourOverlay({ elementRect, _onClick }) {
-  if (!elementRect) {
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background: 'rgba(0, 0, 0, 0.8)',
-        }}
-      />
-    );
-  }
-
-  const highlightPadding = 8;
-  const highlightBorderWidth = 3;
-
-  return (
-    <>
-      {elementRect.top > 0 && (
-        <div
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            height: `${elementRect.top - highlightPadding}px`,
-            background: 'rgba(0, 0, 0, 0.8)',
-            zIndex: 9999,
-          }}
-        />
-      )}
-      {elementRect.bottom < window.innerHeight && (
-        <div
-          style={{
-            position: 'fixed',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: `${window.innerHeight - elementRect.bottom - highlightPadding}px`,
-            background: 'rgba(0, 0, 0, 0.8)',
-            zIndex: 9999,
-          }}
-        />
-      )}
-      {elementRect.left > 0 && (
-        <div
-          style={{
-            position: 'fixed',
-            top: `${Math.max(0, elementRect.top - highlightPadding)}px`,
-            left: 0,
-            width: `${elementRect.left - highlightPadding}px`,
-            height: `${elementRect.height + highlightPadding * 2}px`,
-            background: 'rgba(0, 0, 0, 0.8)',
-            zIndex: 9999,
-          }}
-        />
-      )}
-      {elementRect.right < window.innerWidth && (
-        <div
-          style={{
-            position: 'fixed',
-            top: `${Math.max(0, elementRect.top - highlightPadding)}px`,
-            right: 0,
-            width: `${window.innerWidth - elementRect.right - highlightPadding}px`,
-            height: `${elementRect.height + highlightPadding * 2}px`,
-            background: 'rgba(0, 0, 0, 0.8)',
-            zIndex: 9999,
-          }}
-        />
-      )}
-      <div
-        style={{
-          position: 'fixed',
-          left: elementRect.left - highlightPadding - highlightBorderWidth,
-          top: elementRect.top - highlightPadding - highlightBorderWidth,
-          width: elementRect.width + (highlightPadding + highlightBorderWidth) * 2,
-          height: elementRect.height + (highlightPadding + highlightBorderWidth) * 2,
-          border: `${highlightBorderWidth}px solid #4ec9b0`,
-          borderRadius: '8px',
-          boxShadow:
-            '0 0 0 2px rgba(78, 201, 176, 0.3), ' +
-            '0 0 20px rgba(78, 201, 176, 0.5), ' +
-            '0 0 40px rgba(78, 201, 176, 0.3), ' +
-            'inset 0 0 20px rgba(78, 201, 176, 0.1)',
-          zIndex: 10000,
-          pointerEvents: 'none',
-          animation: 'pulse 2s ease-in-out infinite',
-        }}
-      />
-      <style>
-        {`
-          @keyframes pulse {
-            0%, 100% {
-              box-shadow: 
-                0 0 0 2px rgba(78, 201, 176, 0.3),
-                0 0 20px rgba(78, 201, 176, 0.5),
-                0 0 40px rgba(78, 201, 176, 0.3),
-                inset 0 0 20px rgba(78, 201, 176, 0.1);
-            }
-            50% {
-              box-shadow: 
-                0 0 0 3px rgba(78, 201, 176, 0.4),
-                0 0 30px rgba(78, 201, 176, 0.7),
-                0 0 60px rgba(78, 201, 176, 0.5),
-                inset 0 0 30px rgba(78, 201, 176, 0.2);
-            }
-          }
-        `}
-      </style>
-    </>
-  );
-}
-
-export default TourOverlay;

package/ui/src/components/TourTooltip/TourTooltipButtons.jsx

@@ -1,120 +0,0 @@
-import { colors, fonts } from '../../theme';
-import { ChevronLeft, ChevronRight } from './TourTooltipIcons';
-
-export default function TourTooltipButtons({
-  currentStep,
-  totalSteps,
-  onNext,
-  onPrevious,
-  onSkip,
-}) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: '12px',
-        pointerEvents: 'none',
-      }}
-    >
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          onSkip();
-        }}
-        onMouseDown={(e) => e.stopPropagation()}
-        style={{
-          background: 'transparent',
-          border: `1px solid ${colors.borderMedium}`,
-          color: colors.textSecondary,
-          padding: '8px 16px',
-          borderRadius: '8px',
-          cursor: 'pointer',
-          fontSize: '13px',
-          fontFamily: fonts.body,
-          flex: 1,
-          pointerEvents: 'auto',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.background = colors.bgHover;
-          e.currentTarget.style.color = colors.textPrimary;
-          e.currentTarget.style.borderColor = colors.borderMedium;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.background = 'transparent';
-          e.currentTarget.style.color = colors.textSecondary;
-          e.currentTarget.style.borderColor = colors.borderMedium;
-        }}
-      >
-        Skip Tour
-      </button>
-      <div style={{ display: 'flex', gap: '8px', pointerEvents: 'auto' }}>
-        {currentStep > 0 && (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onPrevious();
-            }}
-            onMouseDown={(e) => e.stopPropagation()}
-            style={{
-              background: colors.buttonSecondary,
-              border: `1px solid ${colors.borderMedium}`,
-              color: colors.textPrimary,
-              padding: '8px 12px',
-              borderRadius: '8px',
-              cursor: 'pointer',
-              fontSize: '13px',
-              fontFamily: fonts.body,
-              display: 'flex',
-              alignItems: 'center',
-              gap: '4px',
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.background = colors.buttonSecondaryHover;
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.background = colors.buttonSecondary;
-            }}
-          >
-            <ChevronLeft size={14} />
-            Previous
-          </button>
-        )}
-        <button
-          type="button"
-          onClick={(e) => {
-            e.stopPropagation();
-            onNext();
-          }}
-          onMouseDown={(e) => e.stopPropagation()}
-          style={{
-            background: colors.buttonPrimary,
-            border: 'none',
-            color: colors.textInverse,
-            padding: '8px 16px',
-            borderRadius: '8px',
-            cursor: 'pointer',
-            fontSize: '13px',
-            fontFamily: fonts.body,
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px',
-            fontWeight: '500',
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = colors.buttonPrimaryHover;
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = colors.buttonPrimary;
-          }}
-        >
-          {currentStep === totalSteps - 1 ? 'Finish' : 'Next'}
-          {currentStep < totalSteps - 1 && <ChevronRight size={14} />}
-        </button>
-      </div>
-    </div>
-  );
-}

package/ui/src/components/TourTooltip/TourTooltipHeader.jsx

@@ -1,71 +0,0 @@
-import { colors, fonts } from '../../theme';
-import { CloseIcon } from './TourTooltipIcons';
-
-export default function TourTooltipHeader({ step, currentStep, totalSteps, isDragging, onSkip }) {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        marginBottom: '12px',
-      }}
-    >
-      <div style={{ flex: 1, pointerEvents: 'none' }}>
-        <h3
-          style={{
-            margin: 0,
-            color: colors.accentBlue,
-            fontSize: '16px',
-            fontWeight: '600',
-            fontFamily: fonts.body,
-          }}
-        >
-          {step.title}
-        </h3>
-        <p
-          style={{
-            margin: '4px 0 0 0',
-            color: colors.textTertiary,
-            fontSize: '12px',
-            fontFamily: fonts.body,
-          }}
-        >
-          Step {currentStep + 1} of {totalSteps}
-          {isDragging && <span style={{ marginLeft: '8px', fontSize: '11px' }}>• Dragging</span>}
-        </p>
-      </div>
-      <button
-        type="button"
-        onClick={(e) => {
-          e.stopPropagation();
-          onSkip();
-        }}
-        onMouseDown={(e) => e.stopPropagation()}
-        style={{
-          background: 'transparent',
-          border: 'none',
-          color: colors.textTertiary,
-          cursor: 'pointer',
-          padding: '4px',
-          display: 'flex',
-          alignItems: 'center',
-          borderRadius: '8px',
-          marginLeft: '12px',
-          pointerEvents: 'auto',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.background = colors.bgHover;
-          e.currentTarget.style.color = colors.textPrimary;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.background = 'transparent';
-          e.currentTarget.style.color = colors.textTertiary;
-        }}
-        title="Skip tour"
-      >
-        <CloseIcon size={18} />
-      </button>
-    </div>
-  );
-}

package/ui/src/components/TourTooltip/TourTooltipIcons.jsx

@@ -1,54 +0,0 @@
-export const CloseIcon = ({ size = 16, color = 'currentColor' }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    role="img"
-    aria-label="Close icon"
-  >
-    <title>Close icon</title>
-    <line x1="18" y1="6" x2="6" y2="18" />
-    <line x1="6" y1="6" x2="18" y2="18" />
-  </svg>
-);
-
-export const ChevronRight = ({ size = 16, color = 'currentColor' }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    role="img"
-    aria-label="Chevron right icon"
-  >
-    <title>Chevron right icon</title>
-    <polyline points="9 18 15 12 9 6" />
-  </svg>
-);
-
-export const ChevronLeft = ({ size = 16, color = 'currentColor' }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke={color}
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    role="img"
-    aria-label="Chevron left icon"
-  >
-    <title>Chevron left icon</title>
-    <polyline points="15 18 9 12 15 6" />
-  </svg>
-);

package/ui/src/components/TourTooltip/useTooltipPosition.js

@@ -1,135 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export function useTooltipPosition(elementRect, step, _currentStep) {
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-
-  useEffect(() => {
-    setTooltipPosition({ x: 0, y: 0 });
-  }, []);
-
-  const handleMouseDown = (e, tooltipRef) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (tooltipRef.current) {
-      const rect = tooltipRef.current.getBoundingClientRect();
-      setDragOffset({
-        x: e.clientX - rect.left,
-        y: e.clientY - rect.top,
-      });
-      setIsDragging(true);
-    }
-  };
-
-  useEffect(() => {
-    if (!isDragging) {
-      return;
-    }
-
-    const handleMouseMove = (e) => {
-      setTooltipPosition({
-        x: e.clientX - dragOffset.x,
-        y: e.clientY - dragOffset.y,
-      });
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-    };
-
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-
-    return () => {
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, [isDragging, dragOffset]);
-
-  const calculatePosition = () => {
-    if (!elementRect) {
-      return { left: 0, top: 0, transform: 'none' };
-    }
-
-    const tooltipWidth = 350;
-    const tooltipHeight = 200;
-    const spacing = 20;
-
-    if (tooltipPosition.x !== 0 || tooltipPosition.y !== 0) {
-      const left = Math.max(10, Math.min(tooltipPosition.x, window.innerWidth - tooltipWidth - 10));
-      const top = Math.max(
-        10,
-        Math.min(tooltipPosition.y, window.innerHeight - tooltipHeight - 10)
-      );
-      return { left, top, transform: 'none' };
-    }
-
-    const position = step.position || 'bottom';
-
-    const calculatePosition = (position, elementRect, tooltipWidth, tooltipHeight, spacing) => {
-      if (position === 'left') {
-        const baseLeft = elementRect.left - tooltipWidth - spacing;
-        const left = baseLeft < 10 ? elementRect.right + spacing : baseLeft;
-        return {
-          left,
-          top: elementRect.top + elementRect.height / 2,
-          transform: 'translateY(-50%)',
-        };
-      }
-
-      if (position === 'right') {
-        const baseLeft = elementRect.right + spacing;
-        const left =
-          baseLeft + tooltipWidth > window.innerWidth - 10
-            ? elementRect.left - tooltipWidth - spacing
-            : baseLeft;
-        return {
-          left,
-          top: elementRect.top + elementRect.height / 2,
-          transform: 'translateY(-50%)',
-        };
-      }
-
-      if (position === 'top') {
-        const baseTop = elementRect.top - tooltipHeight - spacing;
-        const top = baseTop < 10 ? elementRect.bottom + spacing : baseTop;
-        return {
-          left: elementRect.left + elementRect.width / 2,
-          top,
-          transform: 'translate(-50%, 0)',
-        };
-      }
-
-      // bottom (default)
-      const baseTop = elementRect.bottom + spacing;
-      const top =
-        baseTop + tooltipHeight > window.innerHeight - 10
-          ? elementRect.top - tooltipHeight - spacing
-          : baseTop;
-      return {
-        left: elementRect.left + elementRect.width / 2,
-        top,
-        transform: 'translate(-50%, 0)',
-      };
-    };
-
-    const rawPosition = calculatePosition(
-      position,
-      elementRect,
-      tooltipWidth,
-      tooltipHeight,
-      spacing
-    );
-    const left = Math.max(10, Math.min(rawPosition.left, window.innerWidth - tooltipWidth - 10));
-    const top = Math.max(10, Math.min(rawPosition.top, window.innerHeight - tooltipHeight - 10));
-
-    return { left, top, transform: rawPosition.transform };
-  };
-
-  return {
-    position: calculatePosition(),
-    isDragging,
-    handleMouseDown,
-  };
-}

package/ui/src/components/TourTooltip.jsx

@@ -1,91 +0,0 @@
-import { useRef } from 'react';
-import { colors, fonts } from '../theme';
-import TourTooltipButtons from './TourTooltip/TourTooltipButtons';
-import TourTooltipHeader from './TourTooltip/TourTooltipHeader';
-import { useTooltipPosition } from './TourTooltip/useTooltipPosition';
-
-function TourTooltip({ elementRect, step, currentStep, totalSteps, onNext, onPrevious, onSkip }) {
-  const tooltipRef = useRef(null);
-  const { position, isDragging, handleMouseDown } = useTooltipPosition(
-    elementRect,
-    step,
-    currentStep
-  );
-
-  if (!elementRect) {
-    return null;
-  }
-
-  return (
-    <button
-      type="button"
-      ref={tooltipRef}
-      onMouseDown={(e) => handleMouseDown(e, tooltipRef)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          handleMouseDown(e, tooltipRef);
-        }
-      }}
-      aria-label="Draggable tooltip"
-      style={{
-        position: 'fixed',
-        left: `${position.left}px`,
-        top: `${position.top}px`,
-        transform: position.transform,
-        background: colors.bgCard,
-        border: `2px solid ${colors.accentBlue}`,
-        borderRadius: '12px',
-        padding: '20px',
-        maxWidth: '350px',
-        minWidth: '300px',
-        boxShadow: `0 4px 20px ${colors.shadowLg}`,
-        zIndex: 10001,
-        pointerEvents: 'auto',
-        cursor: isDragging ? 'grabbing' : 'grab',
-        userSelect: 'none',
-      }}
-      onClick={(e) => {
-        const target = e.target;
-        if (
-          target.tagName !== 'BUTTON' &&
-          target.tagName !== 'INPUT' &&
-          !target.closest('button')
-        ) {
-          e.stopPropagation();
-        }
-      }}
-    >
-      <TourTooltipHeader
-        step={step}
-        currentStep={currentStep}
-        totalSteps={totalSteps}
-        isDragging={isDragging}
-        onSkip={onSkip}
-      />
-
-      <div
-        style={{
-          color: colors.textPrimary,
-          fontSize: '14px',
-          lineHeight: '1.6',
-          marginBottom: '20px',
-          pointerEvents: 'none',
-          fontFamily: fonts.body,
-        }}
-      >
-        {step.content}
-      </div>
-
-      <TourTooltipButtons
-        currentStep={currentStep}
-        totalSteps={totalSteps}
-        onNext={onNext}
-        onPrevious={onPrevious}
-        onSkip={onSkip}
-      />
-    </button>
-  );
-}
-
-export default TourTooltip;