@dtour/viewer 0.1.0

package/src/components/Gallery.tsx

@@ -0,0 +1,166 @@
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAnimatePosition } from '../hooks/useAnimatePosition.ts';
+import { computeGallerySizes } from '../layout/gallery-positions.ts';
+import { cn } from '../lib/utils.ts';
+import {
+  guidedSuspendedAtom,
+  previewCountAtom,
+  previewScaleAtom,
+  selectedKeyframeAtom,
+  tourPlayingAtom,
+  tourPositionAtom,
+} from '../state/atoms.ts';
+
+export type GalleryProps = {
+  /** Fixed pool of preview canvas elements (created at scatter init). */
+  previewCanvases: HTMLCanvasElement[];
+  /** Container width (px). */
+  containerWidth: number;
+  /** Container height (px). */
+  containerHeight: number;
+  /** Is toolbar visible? */
+  isToolbarVisible: boolean;
+};
+
+export const Gallery = ({
+  previewCanvases,
+  containerWidth,
+  containerHeight,
+  isToolbarVisible,
+}: GalleryProps) => {
+  const previewCount = useAtomValue(previewCountAtom);
+  const previewScale = useAtomValue(previewScaleAtom);
+  const position = useAtomValue(tourPositionAtom);
+  const [selectedKeyframe, setSelectedKeyframe] = useAtom(selectedKeyframeAtom);
+  const setPlaying = useSetAtom(tourPlayingAtom);
+  const setGuidedSuspended = useSetAtom(guidedSuspendedAtom);
+  const { animateTo } = useAnimatePosition();
+  const wrapperRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  // Grid area = container minus its CSS insets.
+  // When the toolbar is visible overlayOffsetY shifts the wrapper down by
+  // toolbarHeight/2 = 20px.  Bump the top & bottom CSS insets by the same
+  // amount so the *visual* padding from the visible edges stays at 32px.
+  const verticalInset = isToolbarVisible ? 36 : 16; // 16 + toolbarHeight/2
+  const gridWidth = containerWidth - 32; // left-4 + right-4 = 32px
+  const gridHeight = containerHeight - 2 * verticalInset;
+
+  const { gridTemplateColumns, gridTemplateRows, sizes } = useMemo(
+    () => computeGallerySizes(gridWidth, gridHeight, previewCount, previewScale),
+    [gridWidth, gridHeight, previewCount, previewScale],
+  );
+
+  // Adopt each canvas into its wrapper div (once, on mount)
+  useEffect(() => {
+    for (let i = 0; i < previewCanvases.length; i++) {
+      const wrapper = wrapperRefs.current[i];
+      const canvas = previewCanvases[i];
+      if (wrapper && canvas && canvas.parentElement !== wrapper) {
+        wrapper.appendChild(canvas);
+      }
+    }
+  }, [previewCanvases]);
+
+  const currentKeyframe = Math.round(position * previewCount) % previewCount;
+
+  const getBorderColor = (i: number): string | undefined => {
+    const isActive = i === selectedKeyframe || i === currentKeyframe;
+    if (isActive || i === hoveredIndex) return 'var(--color-dtour-highlight)';
+    return undefined;
+  };
+
+  const getBorderWidth = (i: number): number | undefined => {
+    const isActive = i === selectedKeyframe || i === currentKeyframe;
+    if (isActive) return 2;
+    return undefined;
+  };
+
+  const getBoxShadow = (i: number): string => {
+    if (i === selectedKeyframe)
+      return '0 0 8px color-mix(in srgb, var(--color-dtour-highlight) 30%, transparent)';
+    if (i === currentKeyframe)
+      return '0 0 8px color-mix(in srgb, var(--color-dtour-highlight) 30%, transparent)';
+    if (i === hoveredIndex) return '0 0 6px rgba(255, 255, 255, 0.15)';
+    return 'none';
+  };
+
+  const handleClick = useCallback(
+    (i: number) => {
+      setGuidedSuspended(false);
+      setSelectedKeyframe(i);
+      setPlaying(false);
+      animateTo(i / previewCount);
+    },
+    [previewCount, setSelectedKeyframe, setPlaying, setGuidedSuspended, animateTo],
+  );
+
+  const k = previewCount / 4;
+
+  return (
+    <div
+      className="absolute left-4 right-4 grid gap-8 justify-between content-between pointer-events-none"
+      style={{ top: verticalInset, bottom: verticalInset, gridTemplateColumns, gridTemplateRows }}
+    >
+      {previewCanvases.map((_, i) => {
+        const visible = i < previewCount;
+
+        let col: number;
+        let row: number;
+        if (i < k) {
+          // top edge: left → right
+          row = 0;
+          col = i;
+        } else if (i < 2 * k) {
+          // right edge: top → bottom
+          row = i - k;
+          col = k;
+        } else if (i < 3 * k) {
+          // bottom edge: right → left
+          row = k;
+          col = 3 * k - i;
+        } else {
+          // left edge: bottom → top
+          row = 4 * k - i;
+          col = 0;
+        }
+
+        const verticalAlignment =
+          row === 0 ? 'items-start' : row < k ? 'items-center' : 'items-end';
+        const horizontalAlignment =
+          col === 0 ? 'justify-start' : col < k ? 'justify-center' : 'justify-end';
+
+        return (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: fixed pool keyed by slot index
+            key={i}
+            className={cn('flex pointer-events-none', verticalAlignment, horizontalAlignment)}
+            style={{ gridColumn: col + 1, gridRow: row + 1 }}
+          >
+            <div
+              ref={(el) => {
+                wrapperRefs.current[i] = el;
+              }}
+              onClick={visible ? () => handleClick(i) : undefined}
+              onKeyDown={undefined}
+              onMouseEnter={visible ? () => setHoveredIndex(i) : undefined}
+              onMouseLeave={visible ? () => setHoveredIndex(null) : undefined}
+              className={cn(
+                'pointer-events-auto overflow-hidden border border-dtour-border rounded transition-[border-color,border-width,box-shadow] duration-200 ease-in-out z-20',
+                visible ? 'block cursor-pointer' : 'hidden',
+              )}
+              style={{
+                width: visible ? sizes[i] : 0,
+                height: visible ? sizes[i] : 0,
+                borderColor: getBorderColor(i),
+                borderWidth: getBorderWidth(i),
+                boxShadow: getBoxShadow(i),
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/LassoOverlay.tsx

@@ -0,0 +1,240 @@
+import type { ScatterInstance } from '@dtour/scatter';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useLongPressIndicator } from '../hooks/useLongPressIndicator.ts';
+import {
+  cameraPanXAtom,
+  cameraPanYAtom,
+  cameraZoomAtom,
+  guidedSuspendedAtom,
+  legendSelectionAtom,
+  viewModeAtom,
+} from '../state/atoms.ts';
+
+type LassoOverlayProps = {
+  scatter: ScatterInstance | null;
+  width: number;
+  height: number;
+};
+
+const LONG_PRESS_MS = 750;
+const MIN_MOVE_PX = 5;
+const MIN_POINT_DISTANCE = 5;
+const THROTTLE_MS = 10;
+
+/** Convert CSS coords to NDC accounting for camera. */
+const cssToNdc = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  panX: number,
+  panY: number,
+  zoom: number,
+): [number, number] => {
+  const aspect = width / height || 1;
+  const ndcX = (((x / width) * 2 - 1) * aspect) / zoom - panX;
+  const ndcY = -((y / height) * 2 - 1) / zoom - panY;
+  return [ndcX, ndcY];
+};
+
+export const LassoOverlay = ({ scatter, width, height }: LassoOverlayProps) => {
+  const panX = useAtomValue(cameraPanXAtom);
+  const panY = useAtomValue(cameraPanYAtom);
+  const zoom = useAtomValue(cameraZoomAtom);
+  const viewMode = useAtomValue(viewModeAtom);
+  const setViewMode = useSetAtom(viewModeAtom);
+  const setGuidedSuspended = useSetAtom(guidedSuspendedAtom);
+  const setLegendSelection = useSetAtom(legendSelectionAtom);
+
+  const [lassoMode, setLassoMode] = useState(false);
+  const [path, setPath] = useState<[number, number][]>([]);
+
+  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const startPos = useRef<[number, number] | null>(null);
+  const lastPointTime = useRef(0);
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const { show: showIndicator, hide: hideIndicator } = useLongPressIndicator();
+
+  const clearLongPress = useCallback(() => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+      hideIndicator(); // Only revert if cancelling (timer was still pending)
+    }
+  }, [hideIndicator]);
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (lassoMode || e.button !== 0) return;
+      startPos.current = [e.clientX, e.clientY];
+
+      showIndicator(e.clientX, e.clientY);
+
+      longPressTimer.current = setTimeout(() => {
+        setLassoMode(true);
+        setPath([]);
+        longPressTimer.current = null;
+      }, LONG_PRESS_MS);
+    },
+    [lassoMode, showIndicator],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      // Cancel long press if moved too far
+      if (!lassoMode && startPos.current && longPressTimer.current) {
+        const dx = e.clientX - startPos.current[0];
+        const dy = e.clientY - startPos.current[1];
+        if (Math.sqrt(dx * dx + dy * dy) > MIN_MOVE_PX) {
+          clearLongPress();
+        }
+        return;
+      }
+
+      if (!lassoMode) return;
+
+      const now = performance.now();
+      if (now - lastPointTime.current < THROTTLE_MS) return;
+
+      const rect = overlayRef.current?.getBoundingClientRect();
+      if (!rect) return;
+
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      setPath((prev) => {
+        if (prev.length > 0) {
+          const last = prev[prev.length - 1]!;
+          const dx = x - last[0];
+          const dy = y - last[1];
+          if (Math.sqrt(dx * dx + dy * dy) < MIN_POINT_DISTANCE) return prev;
+        }
+        return [...prev, [x, y]];
+      });
+
+      lastPointTime.current = now;
+    },
+    [lassoMode, clearLongPress],
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    // Pointer left the canvas area (e.g. moved to sidebar / resize handle).
+    // Cancel the long-press timer so we don't accidentally enter lasso mode.
+    if (!lassoMode) {
+      clearLongPress();
+      startPos.current = null;
+    }
+  }, [lassoMode, clearLongPress]);
+
+  // Also cancel on window blur (e.g. user switches tabs/apps mid-press)
+  useEffect(() => {
+    const handleBlur = () => {
+      if (!lassoMode) {
+        clearLongPress();
+        startPos.current = null;
+      }
+    };
+    window.addEventListener('blur', handleBlur);
+    return () => window.removeEventListener('blur', handleBlur);
+  }, [lassoMode, clearLongPress]);
+
+  const handlePointerUp = useCallback(() => {
+    clearLongPress();
+    hideIndicator();
+
+    if (!lassoMode || path.length < 3 || !scatter) {
+      setLassoMode(false);
+      setPath([]);
+      return;
+    }
+
+    // Convert CSS path to NDC polygon and send to GPU worker
+    const polygon = new Float32Array(path.length * 2);
+    for (let i = 0; i < path.length; i++) {
+      const [ndcX, ndcY] = cssToNdc(path[i]![0], path[i]![1], width, height, panX, panY, zoom);
+      polygon[i * 2] = ndcX;
+      polygon[i * 2 + 1] = ndcY;
+    }
+
+    scatter.lassoSelect(polygon);
+    setLegendSelection(null);
+
+    setLassoMode(false);
+    setPath([]);
+  }, [
+    lassoMode,
+    path,
+    scatter,
+    width,
+    height,
+    panX,
+    panY,
+    zoom,
+    clearLongPress,
+    hideIndicator,
+    setLegendSelection,
+  ]);
+
+  // Double-click or Escape clears selection
+  const handleDoubleClick = useCallback(() => {
+    scatter?.clearSelection();
+    setLegendSelection(null);
+  }, [scatter, setLegendSelection]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (viewMode === 'grand') {
+          // In grand mode, Escape returns to guided mode
+          setGuidedSuspended(true);
+          setViewMode('guided');
+        } else {
+          scatter?.clearSelection();
+        }
+        setLegendSelection(null);
+        setLassoMode(false);
+        setPath([]);
+        clearLongPress();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [scatter, clearLongPress, viewMode, setViewMode, setGuidedSuspended, setLegendSelection]);
+
+  // Build path string for SVG polygon
+  const pathStr = path.map(([x, y]) => `${x},${y}`).join(' ');
+
+  return (
+    <div
+      ref={overlayRef}
+      className="absolute top-0 left-0 touch-none"
+      style={{ width, height, cursor: lassoMode ? 'crosshair' : undefined }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+      onPointerLeave={handlePointerLeave}
+      onDoubleClick={handleDoubleClick}
+    >
+      {/* Lasso polygon */}
+      {lassoMode && path.length > 1 && (
+        <svg
+          width={width}
+          height={height}
+          role="img"
+          aria-label="Lasso selection path"
+          className="absolute top-0 left-0 pointer-events-none"
+        >
+          <polygon
+            points={pathStr}
+            fill="rgba(79, 143, 247, 0.1)"
+            stroke="#4f8ff7"
+            strokeWidth={1.5}
+            strokeDasharray="4 2"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};

package/src/components/Logo.tsx

@@ -0,0 +1,37 @@
+export const Logo = () => (
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 31.2 9.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlSpace="preserve"
+    version="1.1"
+  >
+    <title>dtour</title>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="M 3.036 8.82 C 2.413 8.82 1.875 8.67 1.422 8.369 C 0.968 8.068 0.618 7.66 0.371 7.143 C 0.123 6.626 0 6.044 0 5.396 C 0 4.744 0.124 4.161 0.373 3.646 C 0.621 3.131 0.974 2.725 1.432 2.427 C 1.89 2.129 2.432 1.98 3.06 1.98 C 3.694 1.98 4.227 2.129 4.66 2.427 C 5.093 2.725 5.42 3.132 5.643 3.647 C 5.865 4.162 5.976 4.745 5.976 5.396 C 5.976 6.043 5.864 6.624 5.642 7.141 C 5.419 7.658 5.089 8.067 4.653 8.368 C 4.217 8.669 3.678 8.82 3.036 8.82 Z M 2.96 7.684 C 3.372 7.684 3.708 7.587 3.967 7.392 C 4.226 7.197 4.417 6.928 4.538 6.583 C 4.659 6.238 4.72 5.843 4.72 5.396 C 4.72 4.947 4.659 4.55 4.537 4.207 C 4.415 3.864 4.227 3.596 3.973 3.404 C 3.719 3.212 3.395 3.116 3 3.116 C 2.585 3.116 2.244 3.218 1.975 3.421 C 1.706 3.624 1.507 3.898 1.378 4.243 C 1.249 4.588 1.184 4.972 1.184 5.396 C 1.184 5.824 1.249 6.211 1.378 6.557 C 1.507 6.903 1.703 7.177 1.965 7.38 C 2.227 7.583 2.559 7.684 2.96 7.684 Z M 6.187 8.682 C 5.998 8.644 5.821 8.587 5.656 8.513 C 5.348 8.374 5.115 8.153 4.956 7.852 C 4.817 7.584 4.743 7.312 4.734 7.035 C 4.725 6.758 4.72 6.444 4.72 6.092 L 4.72 0 L 5.976 0 L 5.976 6.028 C 5.976 6.289 5.979 6.516 5.985 6.708 C 5.991 6.9 6.032 7.061 6.108 7.192 C 6.156 7.275 6.214 7.346 6.281 7.405 C 6.463 7.217 6.718 7.1 7 7.1 C 7.552 7.1 8 7.548 8 8.1 C 8 8.652 7.552 9.1 7 9.1 C 6.665 9.1 6.369 8.935 6.187 8.682 Z"
+    />
+    <path
+      fill="currentColor"
+      d="M 6.187 8.682 C 5.998 8.644 5.821 8.587 5.656 8.513 C 5.348 8.374 5.115 8.153 4.956 7.852 C 4.817 7.584 4.743 7.312 4.734 7.035 C 4.725 6.758 4.72 6.444 4.72 6.092 L 4.72 0 L 5.976 0 L 5.976 6.028 C 5.976 6.289 5.979 6.516 5.985 6.708 C 5.991 6.9 6.032 7.061 6.108 7.192 C 6.156 7.275 6.214 7.346 6.281 7.405 C 6.463 7.217 6.718 7.1 7 7.1 C 7.552 7.1 8 7.548 8 8.1 C 8 8.652 7.552 9.1 7 9.1 C 6.665 9.1 6.369 8.935 6.187 8.682 Z"
+    />
+    <path
+      fill="currentColor"
+      d="M 11.928 8.64 C 11.521 8.72 11.122 8.754 10.73 8.741 C 10.338 8.728 9.988 8.652 9.68 8.513 C 9.372 8.374 9.139 8.153 8.98 7.852 C 8.841 7.584 8.767 7.312 8.758 7.035 C 8.749 6.758 8.744 6.444 8.744 6.092 L 8.744 0.36 L 10 0.36 L 10 6.028 C 10 6.289 10.003 6.516 10.009 6.708 C 10.015 6.9 10.056 7.061 10.132 7.192 C 10.276 7.44 10.505 7.582 10.82 7.617 C 11.135 7.652 11.504 7.639 11.928 7.576 L 11.928 8.64 Z M 7.5 3.168 L 7.5 2.16 L 11.928 2.16 L 11.928 3.168 L 7.5 3.168 Z"
+    />
+    <path
+      fill="currentColor"
+      d="M 15.8 8.82 C 15.152 8.82 14.591 8.674 14.116 8.382 C 13.641 8.09 13.275 7.687 13.016 7.172 C 12.757 6.657 12.628 6.065 12.628 5.396 C 12.628 4.719 12.76 4.123 13.024 3.61 C 13.288 3.097 13.658 2.697 14.133 2.41 C 14.608 2.123 15.164 1.98 15.8 1.98 C 16.449 1.98 17.012 2.126 17.488 2.417 C 17.964 2.708 18.332 3.111 18.591 3.624 C 18.85 4.137 18.98 4.728 18.98 5.396 C 18.98 6.072 18.849 6.667 18.588 7.181 C 18.327 7.695 17.958 8.097 17.481 8.386 C 17.004 8.675 16.444 8.82 15.8 8.82 Z M 15.8 7.636 C 16.421 7.636 16.885 7.428 17.19 7.011 C 17.495 6.594 17.648 6.056 17.648 5.396 C 17.648 4.717 17.494 4.176 17.185 3.771 C 16.876 3.366 16.415 3.164 15.8 3.164 C 15.38 3.164 15.034 3.259 14.763 3.448 C 14.492 3.637 14.29 3.899 14.158 4.234 C 14.026 4.569 13.96 4.956 13.96 5.396 C 13.96 6.076 14.116 6.619 14.427 7.026 C 14.738 7.433 15.196 7.636 15.8 7.636 Z"
+    />
+    <path
+      fill="currentColor"
+      d="M 22.744 8.816 C 22.296 8.816 21.92 8.743 21.615 8.598 C 21.31 8.453 21.063 8.263 20.873 8.029 C 20.683 7.795 20.538 7.541 20.438 7.266 C 20.338 6.991 20.27 6.722 20.234 6.457 C 20.198 6.192 20.18 5.96 20.18 5.76 L 20.18 2.16 L 21.452 2.16 L 21.452 5.344 C 21.452 5.596 21.473 5.855 21.515 6.122 C 21.557 6.389 21.637 6.636 21.754 6.865 C 21.871 7.094 22.037 7.278 22.251 7.418 C 22.465 7.558 22.744 7.628 23.088 7.628 C 23.313 7.628 23.526 7.59 23.725 7.515 C 23.924 7.44 24.099 7.32 24.25 7.156 C 24.401 6.992 24.519 6.776 24.606 6.508 C 24.693 6.24 24.736 5.915 24.736 5.532 L 25.516 5.824 C 25.516 6.412 25.406 6.931 25.186 7.381 C 24.966 7.831 24.65 8.183 24.237 8.436 C 23.824 8.689 23.327 8.816 22.744 8.816 Z M 24.884 8.64 L 24.884 6.768 L 24.736 6.768 L 24.736 2.16 L 26 2.16 L 26 8.64 L 24.884 8.64 Z"
+    />
+    <path
+      fill="currentColor"
+      d="M 27.68 8.64 L 27.68 2.16 L 28.796 2.16 L 28.796 3.732 L 28.64 3.528 C 28.719 3.32 28.822 3.129 28.95 2.956 C 29.078 2.783 29.227 2.64 29.396 2.528 C 29.559 2.407 29.742 2.313 29.945 2.247 C 30.148 2.181 30.356 2.141 30.568 2.127 C 30.78 2.113 30.983 2.124 31.176 2.16 L 31.176 3.336 C 30.967 3.279 30.733 3.262 30.474 3.287 C 30.215 3.312 29.979 3.395 29.764 3.536 C 29.56 3.665 29.398 3.825 29.279 4.014 C 29.16 4.203 29.074 4.413 29.022 4.643 C 28.97 4.873 28.944 5.115 28.944 5.368 L 28.944 8.64 L 27.68 8.64 Z"
+    />
+  </svg>
+);

package/src/components/ui/button.tsx

@@ -0,0 +1,36 @@
+import { Slot } from '@radix-ui/react-slot';
+import { type VariantProps, cva } from 'class-variance-authority';
+import type { ButtonHTMLAttributes } from 'react';
+import { cn } from '../../lib/utils.ts';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-1.5 rounded-md text-sm font-medium cursor-pointer transition-[color,background-color,border-color,transform] duration-150 ease-out active:scale-[0.97] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-dtour-accent disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-dtour-accent text-white hover:bg-dtour-accent-hover',
+        ghost: 'text-dtour-text hover:bg-dtour-surface hover:text-dtour-highlight',
+        outline: 'border border-dtour-border bg-transparent text-dtour-text hover:bg-dtour-surface',
+      },
+      size: {
+        default: 'h-8 px-3',
+        sm: 'h-7 px-2 text-xs',
+        icon: 'h-8 w-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  };
+
+export const Button = ({ className, variant, size, asChild = false, ...props }: ButtonProps) => {
+  const Comp = asChild ? Slot : 'button';
+  return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+};

package/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,92 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import type { ComponentPropsWithoutRef } from 'react';
+import { cn } from '../../lib/utils.ts';
+import { usePortalContainer } from '../../portal-container.tsx';
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+export const DropdownMenuContent = ({
+  className,
+  sideOffset = 4,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>) => {
+  const container = usePortalContainer();
+  return (
+    <DropdownMenuPrimitive.Portal container={container}>
+      <DropdownMenuPrimitive.Content
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border border-dtour-border bg-dtour-surface p-1 text-dtour-text shadow-md',
+          'origin-(--radix-dropdown-menu-content-transform-origin) animate-ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+};
+
+export const DropdownMenuItem = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-dtour-border focus:text-dtour-highlight data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const DropdownMenuLabel = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>) => (
+  <DropdownMenuPrimitive.Label
+    className={cn('px-2 py-1.5 text-xs font-semibold text-dtour-text-muted', className)}
+    {...props}
+  />
+);
+
+export const DropdownMenuCheckboxItem = ({
+  className,
+  children,
+  checked = false,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    className={cn(
+      'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-dtour-border focus:text-dtour-highlight data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+          <path
+            d="M11.5 3.5L5.5 9.5L2.5 6.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+);
+
+export const DropdownMenuSeparator = ({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>) => (
+  <DropdownMenuPrimitive.Separator
+    className={cn('-mx-1 my-1 h-px bg-dtour-border', className)}
+    {...props}
+  />
+);

package/src/components/ui/slider.tsx

@@ -0,0 +1,89 @@
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils.ts';
+
+const Slider = forwardRef<
+  ElementRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & { ticks?: number }
+>(({ className, orientation, ticks, value, ...props }, ref) => {
+  const current = value?.[0] ?? 0;
+  const min = props.min ?? 0;
+  const max = props.max ?? 100;
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      orientation={orientation}
+      {...(value ? { value } : {})}
+      className={cn(
+        'relative flex touch-none select-none',
+        orientation === 'vertical' ? 'h-full flex-col items-center' : 'w-full items-center',
+        className,
+      )}
+      {...props}
+    >
+      {ticks != null && ticks > 1 && (
+        <div
+          className={cn(
+            'pointer-events-none absolute',
+            orientation === 'vertical'
+              ? 'inset-y-0 left-1/2 flex -translate-x-1/2 flex-col justify-between'
+              : 'inset-x-0 top-1/2 flex -translate-y-1/2 justify-between',
+          )}
+        >
+          {Array.from({ length: ticks }, (_, i) => {
+            const tickValue =
+              orientation === 'vertical'
+                ? max - (i * (max - min)) / (ticks - 1)
+                : min + (i * (max - min)) / (ticks - 1);
+            const filled = tickValue <= current;
+            return (
+              <span
+                // biome-ignore lint/suspicious/noArrayIndexKey: static tick marks
+                key={i}
+                className={cn(
+                  'flex h-[9px] w-[9px] items-center justify-center rounded-full',
+                  filled ? 'bg-dtour-accent' : 'bg-dtour-border',
+                )}
+              />
+            );
+          })}
+        </div>
+      )}
+      <SliderPrimitive.Track
+        className={cn(
+          'relative grow overflow-hidden rounded-full bg-dtour-border',
+          orientation === 'vertical' ? 'w-1.5' : 'h-1.5 w-full',
+        )}
+      >
+        <SliderPrimitive.Range
+          className={cn(
+            'absolute rounded-full bg-dtour-accent',
+            orientation === 'vertical' ? 'w-full' : 'h-full',
+          )}
+        />
+      </SliderPrimitive.Track>
+      {ticks != null && ticks > 1 && (
+        <div
+          className={cn(
+            'pointer-events-none absolute',
+            orientation === 'vertical'
+              ? 'inset-y-0 left-1/2 flex -translate-x-1/2 flex-col justify-between'
+              : 'inset-x-0 top-1/2 flex -translate-y-1/2 justify-between',
+          )}
+        >
+          {Array.from({ length: ticks }, (_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+            <span key={i} className="h-[9px] w-[9px] flex items-center justify-center">
+              <span className="h-[3px] w-[3px] rounded-full bg-white/30" />
+            </span>
+          ))}
+        </div>
+      )}
+      <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-dtour-accent bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-dtour-accent disabled:pointer-events-none disabled:opacity-50" />
+    </SliderPrimitive.Root>
+  );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };