@dtour/viewer 0.1.0 → 0.2.0

package/src/components/DtourToolbar.tsx

@@ -1,6 +1,7 @@
 import {
   ArrowCounterClockwiseIcon,
   CaretDownIcon,
+  ChartScatterIcon,
   CompassIcon,
   CursorIcon,
   GaugeIcon,
@@ -13,17 +14,18 @@ import {
   PauseIcon,
   PlayIcon,
   SidebarSimpleIcon,
+  SlidersHorizontalIcon,
   SunIcon,
 } from '@phosphor-icons/react';
 import * as Popover from '@radix-ui/react-popover';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAnimatePosition } from '../hooks/useAnimatePosition.ts';
-import { usePlayback } from '../hooks/usePlayback.ts';
 import { usePortalContainer } from '../portal-container.tsx';
 import {
   activeColumnsAtom,
   cameraZoomAtom,
+  frameLoadingsAtom,
   grandExitTargetAtom,
   guidedSuspendedAtom,
   legendVisibleAtom,
@@ -32,15 +34,22 @@ import {
   previewCountAtom,
   previewScaleAtom,
   selectedKeyframeAtom,
+  showAxesAtom,
+  showFrameLoadingsAtom,
+  showFrameNumbersAtom,
   showLegendAtom,
+  showTourDescriptionAtom,
+  sliderSpacingAtom,
   themeModeAtom,
   tourByAtom,
+  tourDescriptionAtom,
   tourPlayingAtom,
   tourSpeedAtom,
   viewModeAtom,
 } from '../state/atoms.ts';
 import { Logo } from './Logo.tsx';
 import { Button } from './ui/button.tsx';
+import { Checkbox } from './ui/checkbox.tsx';
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -64,9 +73,10 @@ const DEFAULT_COLOR: [number, number, number] = [0.25, 0.5, 0.9];
 
 export type DtourToolbarProps = {
   onLoadData?: ((data: ArrayBuffer, fileName: string) => void) | undefined;
+  onLogoClick?: (() => void) | undefined;
 };
 
-export const DtourToolbar = ({ onLoadData }: DtourToolbarProps) => {
+export const DtourToolbar = ({ onLoadData, onLogoClick }: DtourToolbarProps) => {
   const [playing, setPlaying] = useAtom(tourPlayingAtom);
   const [speed, setSpeed] = useAtom(tourSpeedAtom);
   const [zoom, setZoom] = useAtom(cameraZoomAtom);
@@ -82,14 +92,18 @@ export const DtourToolbar = ({ onLoadData }: DtourToolbarProps) => {
   const [showLegend, setShowLegend] = useAtom(showLegendAtom);
   const legendVisible = useAtomValue(legendVisibleAtom);
   const [themeMode, setThemeMode] = useAtom(themeModeAtom);
+  const [showAxes, setShowAxes] = useAtom(showAxesAtom);
+  const [showFrameNumbers, setShowFrameNumbers] = useAtom(showFrameNumbersAtom);
+  const [showFrameLoadings, setShowFrameLoadings] = useAtom(showFrameLoadingsAtom);
+  const hasFrameLoadings = useAtomValue(frameLoadingsAtom) !== null;
+  const hasTourDescription = useAtomValue(tourDescriptionAtom) !== null;
   const [tourBy, setTourBy] = useAtom(tourByAtom);
+  const [sliderSpacing, setSliderSpacing] = useAtom(sliderSpacingAtom);
+  const [showTourDescription, setShowTourDescription] = useAtom(showTourDescriptionAtom);
 
   const portalContainer = usePortalContainer();
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  // Activate the rAF playback loop
-  usePlayback();
-
   const { animateTo, cancelAnimation } = useAnimatePosition();
 
   const handlePlayPause = useCallback(() => {
@@ -167,12 +181,29 @@ export const DtourToolbar = ({ onLoadData }: DtourToolbarProps) => {
 
       {/* Left: branding + mode switcher */}
       <div className="flex items-center gap-2">
-        <div className="relative text-sm font-semibold tracking-wide text-dtour-highlight">
-          <div className="opacity-0 pointer-events-none">dtour</div>
-          <div className="absolute inset-0" data-logo-target>
-            <Logo />
+        {onLogoClick ? (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onLogoClick}
+            className="-ml-1 -mr-1   relative font-semibold tracking-wide text-dtour-highlight"
+          >
+            <div className="opacity-0 px-2 pointer-events-none">dtour</div>
+            <div
+              className="absolute top-0 left-2 bottom-0 right-2 flex items-center justify-center"
+              data-logo-target
+            >
+              <Logo />
+            </div>
+          </Button>
+        ) : (
+          <div className="relative text-sm font-semibold tracking-wide text-dtour-highlight">
+            <div className="opacity-0 pointer-events-none">dtour</div>
+            <div className="absolute inset-0" data-logo-target>
+              <Logo />
+            </div>
           </div>
-        </div>
+        )}
         <div className="ml-2 flex items-center overflow-hidden rounded-md border border-dtour-surface">
           {/* Guided button — expands to include Dims/PCA sub-toggle when active */}
           <div
@@ -253,6 +284,62 @@ export const DtourToolbar = ({ onLoadData }: DtourToolbarProps) => {
 
       {/* Center: playback controls (guided mode) / speed (grand mode) */}
       <div className="flex items-center gap-1">
+        {viewMode === 'guided' && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" title="Tour settings">
+                <SlidersHorizontalIcon size={16} />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="center">
+              <DropdownMenuItem
+                className="gap-4"
+                onSelect={(e) => {
+                  e.preventDefault();
+                  setSliderSpacing(sliderSpacing === 'equal' ? 'geodesic' : 'equal');
+                }}
+              >
+                <span className="flex-1 text-xs">Geodesic spacing</span>
+                <Checkbox
+                  checked={sliderSpacing === 'geodesic'}
+                  onCheckedChange={() =>
+                    setSliderSpacing(sliderSpacing === 'equal' ? 'geodesic' : 'equal')
+                  }
+                />
+              </DropdownMenuItem>
+              {hasFrameLoadings && (
+                <DropdownMenuItem
+                  className="gap-4"
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setShowFrameLoadings((v) => !v);
+                  }}
+                >
+                  <span className="flex-1 text-xs">Feature correlations</span>
+                  <Checkbox
+                    checked={showFrameLoadings}
+                    onCheckedChange={() => setShowFrameLoadings((v) => !v)}
+                  />
+                </DropdownMenuItem>
+              )}
+              {hasTourDescription && (
+                <DropdownMenuItem
+                  className="gap-4"
+                  onSelect={(e) => {
+                    e.preventDefault();
+                    setShowTourDescription((v) => !v);
+                  }}
+                >
+                  <span className="flex-1 text-xs">Tour description</span>
+                  <Checkbox
+                    checked={showTourDescription}
+                    onCheckedChange={() => setShowTourDescription((v) => !v)}
+                  />
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
         <Popover.Root>
           <Popover.Trigger asChild>
             <Button variant="ghost" size="icon" title={`Zoom: ${zoomToDistance(zoom)}x`}>
@@ -376,11 +463,35 @@ export const DtourToolbar = ({ onLoadData }: DtourToolbarProps) => {
                       />
                     </div>
                   </div>
+                  <div className="my-1 h-px bg-dtour-border" />
+                  <div
+                    className="flex items-center gap-4 cursor-pointer select-none"
+                    onClick={() => setShowFrameNumbers((v) => !v)}
+                    onKeyDown={undefined}
+                  >
+                    <span className="flex-1 text-xs text-dtour-text-muted">Numbers</span>
+                    <Checkbox
+                      checked={showFrameNumbers}
+                      onCheckedChange={() => setShowFrameNumbers((v) => !v)}
+                    />
+                  </div>
                 </div>
               </Popover.Content>
             </Popover.Portal>
           </Popover.Root>
         )}
+
+        {viewMode === 'guided' && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowAxes((v) => !v)}
+            title={showAxes ? 'Hide axes' : 'Show axes'}
+            className={showAxes ? '' : 'opacity-40'}
+          >
+            <ChartScatterIcon size={16} weight={showAxes ? 'fill' : 'regular'} />
+          </Button>
+        )}
       </div>
 
       {/* Right: data info + settings */}

package/src/components/Gallery.tsx

@@ -1,16 +1,26 @@
+import { ArrowsLeftRightIcon, EqualsIcon } from '@phosphor-icons/react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAnimatePosition } from '../hooks/useAnimatePosition.ts';
-import { computeGallerySizes } from '../layout/gallery-positions.ts';
+import { LOADING_BAR_HEIGHT, computeGallerySizes } from '../layout/gallery-positions.ts';
 import { cn } from '../lib/utils.ts';
+import type { FrameLoading } from '../spec.ts';
 import {
+  arcLengthsAtom,
+  currentKeyframeAtom,
+  frameLoadingsAtom,
   guidedSuspendedAtom,
+  hoveredKeyframeAtom,
+  previewCentersAtom,
   previewCountAtom,
   previewScaleAtom,
   selectedKeyframeAtom,
+  showFrameLoadingsAtom,
+  showFrameNumbersAtom,
+  tourFrameDescriptionAtom,
   tourPlayingAtom,
-  tourPositionAtom,
 } from '../state/atoms.ts';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip.tsx';
 
 export type GalleryProps = {
   /** Fixed pool of preview canvas elements (created at scatter init). */
@@ -19,37 +29,54 @@ export type GalleryProps = {
   containerWidth: number;
   /** Container height (px). */
   containerHeight: number;
-  /** Is toolbar visible? */
-  isToolbarVisible: boolean;
+  /** Effective toolbar height in px (0 when hidden). */
+  toolbarHeight: number;
 };
 
+// ---------------------------------------------------------------------------
+// Loading pill helpers
+// ---------------------------------------------------------------------------
+
+/** Whether the two loadings in a pair have the same sign (co-vary vs contrast). */
+function sameSign(pairs: FrameLoading[]): boolean {
+  if (pairs.length < 2) return true;
+  return pairs[0]![1] * pairs[1]![1] >= 0;
+}
+
 export const Gallery = ({
   previewCanvases,
   containerWidth,
   containerHeight,
-  isToolbarVisible,
+  toolbarHeight,
 }: GalleryProps) => {
   const previewCount = useAtomValue(previewCountAtom);
   const previewScale = useAtomValue(previewScaleAtom);
-  const position = useAtomValue(tourPositionAtom);
+  const currentKeyframe = useAtomValue(currentKeyframeAtom);
   const [selectedKeyframe, setSelectedKeyframe] = useAtom(selectedKeyframeAtom);
   const setPlaying = useSetAtom(tourPlayingAtom);
   const setGuidedSuspended = useSetAtom(guidedSuspendedAtom);
+  const arcLengths = useAtomValue(arcLengthsAtom);
+  const [hoveredIndex, setHoveredIndex] = useAtom(hoveredKeyframeAtom);
+  const showFrameNumbers = useAtomValue(showFrameNumbersAtom);
+  const showFrameLoadings = useAtomValue(showFrameLoadingsAtom);
+  const frameLoadings = useAtomValue(frameLoadingsAtom);
+  const tourFrameDescription = useAtomValue(tourFrameDescriptionAtom);
+  const setPreviewCenters = useSetAtom(previewCentersAtom);
   const { animateTo } = useAnimatePosition();
+  const galleryRef = useRef<HTMLDivElement>(null);
   const wrapperRefs = useRef<(HTMLDivElement | null)[]>([]);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  // Whether loading pills are actually visible (data available + user toggle on)
+  const loadingsVisible = showFrameLoadings && frameLoadings !== null && frameLoadings.length > 0;
 
   // 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 verticalInset = 16 + toolbarHeight / 2;
+  const gridWidth = containerWidth - 32;
   const gridHeight = containerHeight - 2 * verticalInset;
 
   const { gridTemplateColumns, gridTemplateRows, sizes } = useMemo(
-    () => computeGallerySizes(gridWidth, gridHeight, previewCount, previewScale),
-    [gridWidth, gridHeight, previewCount, previewScale],
+    () => computeGallerySizes(gridWidth, gridHeight, previewCount, previewScale, loadingsVisible),
+    [gridWidth, gridHeight, previewCount, previewScale, loadingsVisible],
   );
 
   // Adopt each canvas into its wrapper div (once, on mount)
@@ -63,7 +90,29 @@ export const Gallery = ({
     }
   }, [previewCanvases]);
 
-  const currentKeyframe = Math.round(position * previewCount) % previewCount;
+  // Measure preview center positions relative to the container center.
+  useEffect(() => {
+    const galleryEl = galleryRef.current;
+    if (!galleryEl) return;
+    const galleryRect = galleryEl.getBoundingClientRect();
+    const centers: { x: number; y: number; size: number }[] = [];
+    for (let i = 0; i < previewCount; i++) {
+      const wrapper = wrapperRefs.current[i];
+      if (!wrapper) {
+        centers.push({ x: 0, y: 0, size: sizes[i] ?? 0 });
+        continue;
+      }
+      const r = wrapper.getBoundingClientRect();
+      const cx = r.left - galleryRect.left + r.width / 2;
+      const cy = r.top - galleryRect.top + r.height / 2;
+      centers.push({
+        x: cx + 16 - containerWidth / 2,
+        y: cy + verticalInset - containerHeight / 2,
+        size: sizes[i] ?? r.width,
+      });
+    }
+    setPreviewCenters(centers);
+  }, [containerWidth, containerHeight, previewCount, sizes, verticalInset, setPreviewCenters]);
 
   const getBorderColor = (i: number): string | undefined => {
     const isActive = i === selectedKeyframe || i === currentKeyframe;
@@ -91,15 +140,17 @@ export const Gallery = ({
       setGuidedSuspended(false);
       setSelectedKeyframe(i);
       setPlaying(false);
-      animateTo(i / previewCount);
+      const target = arcLengths && i < arcLengths.length ? arcLengths[i]! : i / previewCount;
+      animateTo(target);
     },
-    [previewCount, setSelectedKeyframe, setPlaying, setGuidedSuspended, animateTo],
+    [previewCount, arcLengths, setSelectedKeyframe, setPlaying, setGuidedSuspended, animateTo],
   );
 
   const k = previewCount / 4;
 
   return (
     <div
+      ref={galleryRef}
       className="absolute left-4 right-4 grid gap-8 justify-between content-between pointer-events-none"
       style={{ top: verticalInset, bottom: verticalInset, gridTemplateColumns, gridTemplateRows }}
     >
@@ -109,19 +160,15 @@ export const Gallery = ({
         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;
         }
@@ -131,6 +178,12 @@ export const Gallery = ({
         const horizontalAlignment =
           col === 0 ? 'justify-start' : col < k ? 'justify-center' : 'justify-end';
 
+        // For bottom-edge previews, put loading bar above (flex-col-reverse)
+        const isBottomEdge = row === k;
+        const loadingPairs: FrameLoading[] | null =
+          loadingsVisible && frameLoadings && i < frameLoadings.length ? frameLoadings[i]! : null;
+        const hasLoadingPills = loadingPairs !== null && loadingPairs.length >= 2;
+
         return (
           <div
             // biome-ignore lint/suspicious/noArrayIndexKey: fixed pool keyed by slot index
@@ -139,25 +192,130 @@ export const Gallery = ({
             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',
+                'flex pointer-events-auto group/preview',
+                isBottomEdge ? 'flex-col-reverse' : 'flex-col',
+                visible ? '' : 'hidden',
               )}
-              style={{
-                width: visible ? sizes[i] : 0,
-                height: visible ? sizes[i] : 0,
-                borderColor: getBorderColor(i),
-                borderWidth: getBorderWidth(i),
-                boxShadow: getBoxShadow(i),
-              }}
-            />
+              onMouseEnter={visible ? () => setHoveredIndex(i) : undefined}
+              onMouseLeave={visible ? () => setHoveredIndex(null) : undefined}
+            >
+              <div
+                ref={(el) => {
+                  wrapperRefs.current[i] = el;
+                }}
+                onClick={visible ? () => handleClick(i) : undefined}
+                onKeyDown={undefined}
+                className={cn(
+                  'overflow-hidden border border-dtour-border transition-[border-color,border-width,box-shadow] duration-200 ease-in-out z-20 relative group',
+                  hasLoadingPills ? (isBottomEdge ? 'rounded-b' : 'rounded-t') : 'rounded',
+                  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),
+                }}
+              >
+                {visible && showFrameNumbers && (
+                  <span
+                    className={cn(
+                      'absolute text-xs leading-none text-white pointer-events-none transition-opacity duration-200',
+                      row === 0 ? 'top-0.5' : row === k ? 'bottom-0.5' : 'top-1/2 -translate-y-1/2',
+                      col === 0 ? 'left-1' : col === k ? 'right-1' : 'left-1/2 -translate-x-1/2',
+                      i === selectedKeyframe || i === currentKeyframe
+                        ? 'opacity-100'
+                        : 'opacity-40 group-hover:opacity-100',
+                    )}
+                  >
+                    {i + 1}
+                  </span>
+                )}
+              </div>
+              {/* Loading pills: [name1] [≠ or =] [name2] */}
+              {visible &&
+                loadingPairs &&
+                loadingPairs.length >= 2 &&
+                (() => {
+                  const [n0] = loadingPairs[0]!;
+                  const [n1] = loadingPairs[1]!;
+                  const same = sameSign(loadingPairs);
+                  const isActive = i === selectedKeyframe || i === currentKeyframe;
+                  return (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <div
+                            className={cn(
+                              'flex items-center cursor-default select-none transition-[color,background-color,border-color] duration-200 relative z-20',
+                              'border border-dtour-border',
+                              isBottomEdge ? 'border-b-0 rounded-t-sm' : 'border-t-0 rounded-b-sm',
+                            )}
+                            style={{
+                              width: sizes[i],
+                              height: LOADING_BAR_HEIGHT,
+                              borderColor: getBorderColor(i),
+                              backgroundColor:
+                                isActive || i === hoveredIndex
+                                  ? 'var(--color-dtour-highlight)'
+                                  : 'var(--color-dtour-border)',
+                            }}
+                          >
+                            <div className="flex-1 flex items-center justify-center rounded-l-sm overflow-hidden h-full">
+                              <span
+                                className={cn(
+                                  'text-[10px] transition-colors duration-200 truncate px-1',
+                                  isActive || i === hoveredIndex
+                                    ? 'text-dtour-bg'
+                                    : 'text-dtour-highlight/70',
+                                )}
+                              >
+                                {n0}
+                              </span>
+                            </div>
+                            <span
+                              className={cn(
+                                'text-[10px] leading-none transition-colors duration-200 px-0.5 shrink-0',
+                                isActive || i === hoveredIndex
+                                  ? 'text-dtour-bg'
+                                  : 'text-dtour-highlight/70',
+                              )}
+                            >
+                              {same ? (
+                                <EqualsIcon size={10} weight="bold" />
+                              ) : (
+                                <ArrowsLeftRightIcon size={10} weight="bold" />
+                              )}
+                            </span>
+                            <div className="flex-1 flex items-center justify-center rounded-r-sm overflow-hidden h-full">
+                              <span
+                                className={cn(
+                                  'text-[10px] transition-colors duration-200 truncate px-1',
+                                  isActive || i === hoveredIndex
+                                    ? 'text-dtour-bg'
+                                    : 'text-dtour-highlight/70',
+                                )}
+                              >
+                                {n1}
+                              </span>
+                            </div>
+                          </div>
+                        </TooltipTrigger>
+                        <TooltipContent side={isBottomEdge ? 'top' : 'bottom'} sideOffset={0}>
+                          {tourFrameDescription
+                            ? tourFrameDescription
+                                .replace('{dim1}', n0)
+                                .replace('{dim2}', n1)
+                                .replace('{relation}', same ? 'co-varying' : 'contrasting')
+                            : `${same ? 'Co-varying' : 'Contrasting'} ${n0} and ${n1}`}
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  );
+                })()}
+            </div>
           </div>
         );
       })}

package/src/components/RevertCameraButton.tsx

@@ -0,0 +1,39 @@
+import { ArrowCounterClockwiseIcon } from '@phosphor-icons/react';
+import { useAtomValue } from 'jotai';
+import { useEffect, useState } from 'react';
+import { cn } from '../lib/utils.ts';
+import { is3dRotatedAtom } from '../state/atoms.ts';
+import { Button } from './ui/button.tsx';
+
+type RevertCameraButtonProps = {
+  onRevert: () => void;
+};
+
+export const RevertCameraButton = ({ onRevert }: RevertCameraButtonProps) => {
+  const is3dRotated = useAtomValue(is3dRotatedAtom);
+  // Delay visibility by a frame so the CSS transition triggers
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    if (is3dRotated) {
+      const id = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(id);
+    }
+    setVisible(false);
+  }, [is3dRotated]);
+
+  if (!is3dRotated) return null;
+
+  return (
+    <Button
+      variant="ghost"
+      className={cn(
+        'flex items-center gap-2 absolute bottom-8 left-1/2 -translate-x-1/2 text-xs cursor-pointer px-3 py-2 bg-dtour-surface/60 hover:bg-dtour-surface backdrop-blur-sm transition-opacity ease-out duration-250',
+        visible ? 'opacity-100' : 'opacity-0',
+      )}
+      onClick={onRevert}
+    >
+      <ArrowCounterClockwiseIcon size={12} />
+      Revert camera to adjust projection
+    </Button>
+  );
+};

package/src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+import { CheckIcon } from '@phosphor-icons/react';
+import type { ComponentPropsWithoutRef } from 'react';
+import { cn } from '../../lib/utils.ts';
+
+export const Checkbox = ({
+  checked,
+  onCheckedChange,
+  className,
+  ...props
+}: {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+} & Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'role'>) => (
+  <button
+    type="button"
+    // biome-ignore lint/a11y/useSemanticElements: <explanation>
+    role="checkbox"
+    aria-checked={checked}
+    onClick={(e) => {
+      e.stopPropagation();
+      onCheckedChange(!checked);
+    }}
+    className={cn(
+      'inline-flex h-4 w-4 shrink-0 items-center justify-center transition-colors',
+      checked ? 'text-dtour-text' : 'text-transparent',
+      className,
+    )}
+    {...props}
+  >
+    <CheckIcon size={14} weight="bold" />
+  </button>
+);