@tableslayer/ui 0.0.1

package/dist/components/Stage/components/Scene/Scene.svelte.d.ts

@@ -0,0 +1,88 @@
+import * as THREE from 'three';
+import { type StageProps } from '../Stage/types';
+import type { CursorData } from '../CursorLayer/types';
+interface Props {
+    props: StageProps;
+    cursors?: CursorData[];
+    trackLocalCursor?: boolean;
+    receivedMeasurement?: {
+        startPoint: {
+            x: number;
+            y: number;
+        };
+        endPoint: {
+            x: number;
+            y: number;
+        };
+        type: number;
+        beamWidth?: number;
+        coneAngle?: number;
+        color?: string;
+        thickness?: number;
+        outlineColor?: string;
+        outlineThickness?: number;
+        opacity?: number;
+        markerSize?: number;
+        autoHideDelay?: number;
+        fadeoutTime?: number;
+        showDistance?: boolean;
+        snapToGrid?: boolean;
+        enableDMG252?: boolean;
+    } | null;
+}
+declare const Scene: import("svelte").Component<Props, {
+    fill: () => void;
+    fit: () => void;
+    generateThumbnail: (quality?: number) => Promise<Blob>;
+    annotations: {
+        clear: (layerId: string) => void;
+        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+    map: {
+        fill: () => void;
+        fit: () => void;
+        getSize: () => {
+            width: number;
+            height: number;
+        } | null;
+    };
+    fogOfWar: {
+        clear: () => void;
+        reset: () => void;
+        toPng: () => Promise<Blob>;
+        toRLE: () => Promise<Uint8Array<ArrayBufferLike>>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+    markers: {
+        readonly isHoveringMarker: boolean;
+        readonly isDraggingMarker: boolean;
+        readonly hoveredMarker: import("../MarkerLayer/types").Marker | null;
+        readonly selectedMarker: import("../MarkerLayer/types").Marker | null;
+        maintainHover: (maintain: boolean) => void;
+        onSceneChange: () => void;
+    };
+    measurement: {
+        getCurrentMeasurement: () => {
+            startPoint: THREE.Vector2 | null;
+            endPoint: THREE.Vector2 | null;
+            type: number;
+        } | null;
+        isDrawing: () => boolean;
+    };
+    getMarkerSizeInScreenSpace: (markerSize?: number) => number;
+    getMarkerScreenPosition: (marker: {
+        position?: {
+            x: number;
+            y: number;
+        };
+    }) => {
+        x: number;
+        y: number;
+    } | null;
+}, "">;
+type Scene = ReturnType<typeof Scene>;
+export default Scene;

package/dist/components/Stage/components/Scene/luts.d.ts

@@ -0,0 +1,7 @@
+import { LookupTexture } from 'postprocessing';
+/**
+ * Gets a LUT
+ * @param url The URL of the LUT to get
+ * @returns A promise that resolves to the LookupTexture
+ */
+export declare const getLUT: (url: string | null) => Promise<LookupTexture | null>;

package/dist/components/Stage/components/Scene/luts.js

@@ -0,0 +1,33 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LookupTexture } from 'postprocessing';
+import * as THREE from 'three';
+import { LUTCubeLoader } from 'three/examples/jsm/loaders/LUTCubeLoader';
+const loadingManager = new THREE.LoadingManager();
+const lutLoader = new LUTCubeLoader(loadingManager);
+/**
+ * Gets a LUT
+ * @param url The URL of the LUT to get
+ * @returns A promise that resolves to the LookupTexture
+ */
+export const getLUT = (url) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!url)
+        return null;
+    const result = yield lutLoader.loadAsync(url);
+    try {
+        const lookupTexture = LookupTexture.from(result.texture3D);
+        lookupTexture.colorSpace = THREE.LinearSRGBColorSpace;
+        return lookupTexture;
+    }
+    catch (error) {
+        console.error(error);
+        return null;
+    }
+});

package/dist/components/Stage/components/Scene/types.d.ts

@@ -0,0 +1,207 @@
+import type { ToneMappingMode } from 'postprocessing';
+export declare enum SceneLoadingState {
+    LoadingMap = 1,
+    Resizing = 2,
+    Rendering = 3,
+    Initialized = 4
+}
+export declare enum SceneRotation {
+    Deg0 = 0,
+    Deg90 = 90,
+    Deg180 = 180,
+    Deg270 = 270
+}
+export declare enum SceneLayer {
+    Main = 0,
+    Overlay = 1,
+    Input = 2
+}
+export declare enum SceneLayerOrder {
+    Background = 0,
+    Map = 10,
+    Fog = 20,
+    Weather = 30,
+    EffectAnnotation = 35,// Effect annotations render under fog of war
+    Marker = 37,// Markers render above effect annotations but below fog of war
+    FogOfWar = 40,
+    Grid = 50,
+    EdgeOverlay = 70,
+    Annotation = 80,// Color annotations render over fog of war
+    Measurement = 90,
+    Cursor = 100
+}
+export interface SceneLayerProps {
+    /**
+     * Whether the scene layer should auto fit
+     */
+    autoFit: boolean;
+    /**
+     * The position of the scene layer within the canvas
+     */
+    offset: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The rotation of the scene layer in degrees
+     */
+    rotation: SceneRotation;
+    /**
+     * The scale of the scene layer
+     */
+    zoom: number;
+}
+import type { Marker } from '../MarkerLayer/types';
+export interface SceneExports {
+    fill: () => void;
+    fit: () => void;
+    generateThumbnail: () => Promise<Blob>;
+    getMarkerScreenPosition: (marker: Marker) => {
+        x: number;
+        y: number;
+    } | null;
+    annotations: {
+        clear: (layerId: string) => void;
+        toRLE: () => Promise<Uint8Array>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        loadMask: (layerId: string, rleData: Uint8Array) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+    fogOfWar: {
+        clear: () => void;
+        reset: () => void;
+        toPng: () => Promise<Blob>;
+        toRLE: () => Promise<Uint8Array>;
+        fromRLE: (rleData: Uint8Array, width: number, height: number) => Promise<void>;
+        isDrawing: () => boolean;
+    };
+    map: {
+        fit: () => void;
+        fill: () => void;
+        getSize: () => {
+            width: number;
+            height: number;
+        } | null;
+    };
+    markers: {
+        isHoveringMarker: boolean;
+        isDraggingMarker: boolean;
+        hoveredMarker: Marker | null;
+        selectedMarker: Marker | null;
+        maintainHover: (maintain: boolean) => void;
+        onSceneChange: () => void;
+    };
+    getMarkerSizeInScreenSpace: (markerSize: number) => number;
+    measurement: {
+        getCurrentMeasurement: () => {
+            startPoint: {
+                x: number;
+                y: number;
+            } | null;
+            endPoint: {
+                x: number;
+                y: number;
+            } | null;
+            type: number;
+        } | null;
+        isDrawing: () => boolean;
+    };
+}
+/**
+ * Properties for post-processing effects
+ */
+export interface PostProcessingProps {
+    /**
+     * Whether post-processing is enabled
+     */
+    enabled: boolean;
+    /**
+     * Bloom effect properties
+     */
+    bloom: {
+        /**
+         * Whether the bloom effect is enabled
+         */
+        enabled: boolean;
+        /**
+         * Overall intensity of the bloom effect (0-1)
+         */
+        intensity: number;
+        /**
+         * Luminance threshold for what pixels will bloom (0-1)
+         */
+        threshold: number;
+        /**
+         * How smoothly the bloom transitions at the threshold (0-1)
+         */
+        smoothing: number;
+        /**
+         * Radius of the bloom effect
+         */
+        radius: number;
+        /**
+         * Levels of the bloom effect
+         */
+        levels: number;
+        /**
+         * Whether to apply mipmap blur
+         */
+        mipmapBlur: boolean;
+    };
+    /**
+     * Chromatic aberration effect properties
+     */
+    chromaticAberration: {
+        /**
+         * Whether the chromatic aberration effect is enabled
+         */
+        enabled: boolean;
+        /**
+         * The offset of the chromatic aberration effect
+         */
+        offset: number;
+    };
+    /**
+     * LUT effect properties
+     */
+    lut: {
+        /**
+         * Whether the LUT3D effect is enabled
+         */
+        enabled: boolean;
+        /**
+         * The URL of the LUT to use
+         */
+        url: string | null;
+    };
+    /**
+     * Tone mapping effect properties
+     */
+    toneMapping: {
+        /**
+         * Whether the tone mapping effect is enabled
+         */
+        enabled: boolean;
+        /**
+         * The mode of the tone mapping effect
+         */
+        mode: ToneMappingMode;
+    };
+    /**
+     * Vignette effect properties
+     */
+    vignette: {
+        /**
+         * Whether the vignette effect is enabled
+         */
+        enabled: boolean;
+        /**
+         * How far from the center the vignette starts (0-1)
+         */
+        offset: number;
+        /**
+         * How dark the vignette effect is (0-1)
+         */
+        darkness: number;
+    };
+}

package/dist/components/Stage/components/Scene/types.js

@@ -0,0 +1,35 @@
+export var SceneLoadingState;
+(function (SceneLoadingState) {
+    SceneLoadingState[SceneLoadingState["LoadingMap"] = 1] = "LoadingMap";
+    SceneLoadingState[SceneLoadingState["Resizing"] = 2] = "Resizing";
+    SceneLoadingState[SceneLoadingState["Rendering"] = 3] = "Rendering";
+    SceneLoadingState[SceneLoadingState["Initialized"] = 4] = "Initialized";
+})(SceneLoadingState || (SceneLoadingState = {}));
+export var SceneRotation;
+(function (SceneRotation) {
+    SceneRotation[SceneRotation["Deg0"] = 0] = "Deg0";
+    SceneRotation[SceneRotation["Deg90"] = 90] = "Deg90";
+    SceneRotation[SceneRotation["Deg180"] = 180] = "Deg180";
+    SceneRotation[SceneRotation["Deg270"] = 270] = "Deg270";
+})(SceneRotation || (SceneRotation = {}));
+export var SceneLayer;
+(function (SceneLayer) {
+    SceneLayer[SceneLayer["Main"] = 0] = "Main";
+    SceneLayer[SceneLayer["Overlay"] = 1] = "Overlay";
+    SceneLayer[SceneLayer["Input"] = 2] = "Input";
+})(SceneLayer || (SceneLayer = {}));
+export var SceneLayerOrder;
+(function (SceneLayerOrder) {
+    SceneLayerOrder[SceneLayerOrder["Background"] = 0] = "Background";
+    SceneLayerOrder[SceneLayerOrder["Map"] = 10] = "Map";
+    SceneLayerOrder[SceneLayerOrder["Fog"] = 20] = "Fog";
+    SceneLayerOrder[SceneLayerOrder["Weather"] = 30] = "Weather";
+    SceneLayerOrder[SceneLayerOrder["EffectAnnotation"] = 35] = "EffectAnnotation";
+    SceneLayerOrder[SceneLayerOrder["Marker"] = 37] = "Marker";
+    SceneLayerOrder[SceneLayerOrder["FogOfWar"] = 40] = "FogOfWar";
+    SceneLayerOrder[SceneLayerOrder["Grid"] = 50] = "Grid";
+    SceneLayerOrder[SceneLayerOrder["EdgeOverlay"] = 70] = "EdgeOverlay";
+    SceneLayerOrder[SceneLayerOrder["Annotation"] = 80] = "Annotation";
+    SceneLayerOrder[SceneLayerOrder["Measurement"] = 90] = "Measurement";
+    SceneLayerOrder[SceneLayerOrder["Cursor"] = 100] = "Cursor";
+})(SceneLayerOrder || (SceneLayerOrder = {}));

package/dist/components/Stage/components/Stage/Stage.svelte

@@ -0,0 +1,332 @@
+<script lang="ts">
+  import { Canvas, T } from '@threlte/core';
+  import * as THREE from 'three';
+  import type { Callbacks, StageProps } from './types';
+  import Scene from '../Scene/Scene.svelte';
+  import { type SceneExports, SceneLayerOrder } from '../Scene/types';
+  import { setContext } from 'svelte';
+  import { PerfMonitor } from '@threlte/extras';
+  import { MarkerTooltip } from '../../../MarkerTooltip';
+
+  import type { CursorData } from './types';
+
+  /**
+   * Creates a custom WebGL renderer with high-performance settings.
+   * This fixes Chrome/Mac performance issues by:
+   * - Requesting high-performance GPU mode (critical for macOS)
+   * - Disabling unnecessary features like stencil buffer
+   */
+  const createRenderer = (canvas: HTMLCanvasElement) => {
+    return new THREE.WebGLRenderer({
+      canvas,
+      powerPreference: 'high-performance',
+      antialias: true,
+      alpha: false,
+      stencil: false,
+      depth: true
+    });
+  };
+
+  interface Props {
+    props: StageProps;
+    callbacks: Callbacks;
+    receivedMeasurement?: {
+      startPoint: { x: number; y: number };
+      endPoint: { x: number; y: number };
+      type: number;
+      beamWidth?: number;
+      coneAngle?: number;
+      // Visual properties
+      color?: string;
+      thickness?: number;
+      outlineColor?: string;
+      outlineThickness?: number;
+      opacity?: number;
+      markerSize?: number;
+      // Timing properties
+      autoHideDelay?: number;
+      fadeoutTime?: number;
+      // Distance properties
+      showDistance?: boolean;
+      snapToGrid?: boolean;
+      enableDMG252?: boolean;
+    } | null;
+    cursors?: CursorData[];
+    trackLocalCursor?: boolean;
+    hoveredMarkerId?: string | null;
+    pinnedMarkerIds?: string[];
+    onPinToggle?: (markerId: string, pinned: boolean) => void;
+  }
+
+  let {
+    props,
+    callbacks,
+    receivedMeasurement = null,
+    cursors = [],
+    trackLocalCursor = false,
+    hoveredMarkerId = null,
+    pinnedMarkerIds = [],
+    onPinToggle
+  }: Props = $props();
+
+  let sceneRef = $state<SceneExports>();
+  let containerElement = $state<HTMLDivElement>();
+  let tooltipPosition = $state<{ x: number; y: number } | null>(null);
+  interface MarkerData {
+    id: string;
+    title?: string;
+    note?: unknown;
+    visibility?: number;
+    size?: number;
+    tooltip?: {
+      title?: string;
+      content?: unknown;
+    };
+  }
+
+  let hoveredMarkerData = $state<MarkerData | null>(null);
+  let markerSizeInPixels = $state<number>(40);
+
+  let pinnedTooltips = $state<
+    Array<{
+      marker: MarkerData;
+      position: { x: number; y: number };
+      preferredPlacement: 'top' | 'bottom' | 'left' | 'right';
+    }>
+  >([]);
+
+  const renderedTooltips = new Map<string, { element: HTMLElement; bounds: DOMRect }>();
+
+  let stageContext = $state({ mode: props.mode, hoveredMarkerId, pinnedMarkerIds });
+  setContext('stage', stageContext);
+
+  $effect(() => {
+    stageContext.mode = props.mode;
+    stageContext.hoveredMarkerId = hoveredMarkerId;
+    stageContext.pinnedMarkerIds = pinnedMarkerIds;
+  });
+
+  setContext('callbacks', callbacks);
+
+  export const annotations = {
+    clear: (layerId: string) => sceneRef?.annotations.clear(layerId),
+    toRLE: () => sceneRef?.annotations?.toRLE() ?? Promise.resolve(new Uint8Array()),
+    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
+      sceneRef?.annotations?.fromRLE(rleData, width, height) ?? Promise.resolve(),
+    loadMask: (layerId: string, rleData: Uint8Array) =>
+      sceneRef?.annotations?.loadMask(layerId, rleData) ?? Promise.resolve(),
+    isDrawing: () => sceneRef?.annotations?.isDrawing() ?? false
+  };
+
+  export const map = {
+    fill: () => sceneRef?.map.fill(),
+    fit: () => sceneRef?.map.fit(),
+    getSize: () => sceneRef?.map?.getSize?.() ?? null
+  };
+
+  export const fogOfWar = {
+    clear: () => sceneRef?.fogOfWar.clear(),
+    reset: () => sceneRef?.fogOfWar.reset(),
+    toPng: () => sceneRef?.fogOfWar.toPng() ?? Promise.resolve(new Blob()),
+    toRLE: () => sceneRef?.fogOfWar.toRLE() ?? Promise.resolve(new Uint8Array()),
+    fromRLE: (rleData: Uint8Array, width: number, height: number) =>
+      sceneRef?.fogOfWar.fromRLE(rleData, width, height) ?? Promise.resolve(),
+    isDrawing: () => sceneRef?.fogOfWar?.isDrawing() ?? false
+  };
+
+  export const scene = {
+    fill: () => sceneRef?.fill(),
+    fit: () => sceneRef?.fit(),
+    generateThumbnail: () => sceneRef?.generateThumbnail() ?? Promise.resolve(new Blob())
+  };
+
+  export const markers = {
+    get isHoveringMarker() {
+      return sceneRef?.markers?.isHoveringMarker ?? false;
+    },
+    get isDraggingMarker() {
+      return sceneRef?.markers?.isDraggingMarker ?? false;
+    }
+  };
+
+  export const measurement = {
+    getCurrentMeasurement: () => sceneRef?.measurement?.getCurrentMeasurement() ?? null,
+    isDrawing: () => sceneRef?.measurement?.isDrawing() ?? false
+  };
+
+  /**
+   * Called when the scene changes to clear all transient state.
+   * Clears tooltips, marker hover/selection, and other scene-specific state.
+   */
+  export function onSceneChange() {
+    // Clear tooltip state
+    hoveredMarkerData = null;
+    tooltipPosition = null;
+
+    // Clear marker interaction state
+    sceneRef?.markers?.onSceneChange?.();
+  }
+
+  $effect(() => {
+    // Update marker size when zoom changes or marker data changes
+    const zoom = props.scene.zoom;
+    if (sceneRef?.getMarkerSizeInScreenSpace) {
+      const markerSize = hoveredMarkerData?.size || 1;
+      markerSizeInPixels = sceneRef.getMarkerSizeInScreenSpace(markerSize);
+    }
+    // Use zoom to avoid unused variable warning
+    void zoom;
+  });
+
+  $effect(() => {
+    // Only show pinned tooltips in DM mode when activeLayer is None (0) or Marker (2)
+    // In player mode, always show pinned tooltips
+    const shouldShowPinnedTooltips = props.mode === 1 || props.activeLayer === 0 || props.activeLayer === 2;
+
+    if (
+      pinnedMarkerIds &&
+      pinnedMarkerIds.length > 0 &&
+      containerElement &&
+      sceneRef?.getMarkerScreenPosition &&
+      shouldShowPinnedTooltips
+    ) {
+      const newPinnedTooltips = [];
+
+      const placementPatterns = [
+        ['top', 'bottom', 'left', 'right'],
+        ['bottom', 'top', 'right', 'left'],
+        ['left', 'right', 'top', 'bottom'],
+        ['right', 'left', 'bottom', 'top']
+      ];
+
+      for (let i = 0; i < pinnedMarkerIds.length; i++) {
+        const markerId = pinnedMarkerIds[i];
+        const marker = props.marker.markers.find((m) => m.id === markerId);
+        if (marker) {
+          const screenPos = sceneRef.getMarkerScreenPosition(marker);
+          if (screenPos) {
+            const pattern = placementPatterns[i % placementPatterns.length];
+            const preferredPlacement = pattern[0] as 'top' | 'bottom' | 'left' | 'right';
+
+            newPinnedTooltips.push({ marker, position: screenPos, preferredPlacement });
+          }
+        }
+      }
+      pinnedTooltips = newPinnedTooltips;
+    } else {
+      pinnedTooltips = [];
+    }
+  });
+
+  $effect(() => {
+    let markerForTooltip = null;
+
+    if (props.mode === 0) {
+      const hoveredMarker = sceneRef?.markers?.hoveredMarker;
+      const isDragging = sceneRef?.markers?.isDraggingMarker;
+      // Only show tooltips when activeLayer is None (0) or Marker (2)
+      // MapLayerType: None = 0, FogOfWar = 1, Marker = 2, Annotation = 3, Measurement = 4
+      const isMarkerOrNoneLayer = props.activeLayer === 0 || props.activeLayer === 2;
+      if (hoveredMarker && !pinnedMarkerIds.includes(hoveredMarker.id) && !isDragging && isMarkerOrNoneLayer) {
+        // Look up the current marker from the markers array by ID to handle Y.js updates
+        // This prevents stale marker references from breaking tooltips after sync
+        const currentMarker = props.marker.markers.find((m) => m.id === hoveredMarker.id);
+        markerForTooltip = currentMarker || hoveredMarker;
+      }
+    } else if (props.mode === 1) {
+      // Player mode - only show tooltips for markers where:
+      // 1. The marker is pinned (handled separately in pinnedTooltips)
+      // 2. The marker visibility is "On hover" (MarkerVisibility.Hover = 3) AND DM is hovering
+      // 3. The marker visibility is "Everyone" (MarkerVisibility.Always = 0) AND DM is hovering
+      let dmBroadcastMarker = null;
+      if (hoveredMarkerId) {
+        if (!pinnedMarkerIds.includes(hoveredMarkerId)) {
+          const marker = props.marker.markers.find((m) => m.id === hoveredMarkerId);
+          // Only show if marker visibility is "On hover" or "Everyone"
+          // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
+          if (marker && (marker.visibility === 0 || marker.visibility === 3)) {
+            dmBroadcastMarker = marker;
+          }
+        }
+      }
+
+      // In player mode, also check if player has selected a marker
+      // But only show tooltip if it has appropriate visibility (not DM-only)
+      const selectedByPlayer = sceneRef?.markers?.selectedMarker;
+      const isDragging = sceneRef?.markers?.isDraggingMarker;
+      let selectedNotPinned = null;
+      if (selectedByPlayer && !pinnedMarkerIds.includes(selectedByPlayer.id) && !isDragging) {
+        // Only show if marker visibility is not DM-only (i.e., not visibility = 1)
+        // MarkerVisibility: Always = 0, DM = 1, Player = 2, Hover = 3
+        if (selectedByPlayer.visibility !== 1) {
+          selectedNotPinned = selectedByPlayer;
+        }
+      }
+
+      markerForTooltip = dmBroadcastMarker || selectedNotPinned;
+    }
+
+    if (markerForTooltip && containerElement) {
+      hoveredMarkerData = markerForTooltip;
+      const screenPos = sceneRef?.getMarkerScreenPosition?.(markerForTooltip);
+      if (screenPos) {
+        tooltipPosition = screenPos;
+      }
+    } else {
+      hoveredMarkerData = null;
+      tooltipPosition = null;
+    }
+  });
+</script>
+
+<div bind:this={containerElement} style="height: 100%; width: 100%; position: relative;">
+  <Canvas {createRenderer} renderMode="always">
+    <T.Mesh scale={[100000, 100000, 1]} layers={[SceneLayerOrder.Background]}>
+      <T.PlaneGeometry />
+      <T.MeshBasicMaterial color={props.backgroundColor} />
+    </T.Mesh>
+
+    <Scene bind:this={sceneRef} {props} {receivedMeasurement} {cursors} {trackLocalCursor} />
+    {#if props.debug.enableStats}
+      <PerfMonitor logsPerSecond={props.debug.loggingRate} anchorX={'right'} anchorY={'bottom'} />
+    {/if}
+  </Canvas>
+
+  {#each pinnedTooltips as { marker, position, preferredPlacement }, index}
+    <MarkerTooltip
+      {marker}
+      {position}
+      {containerElement}
+      markerDiameter={sceneRef?.getMarkerSizeInScreenSpace ? sceneRef.getMarkerSizeInScreenSpace(marker.size || 1) : 40}
+      isDM={props.mode === 0}
+      isPinned={true}
+      {onPinToggle}
+      {preferredPlacement}
+      existingTooltips={Array.from(renderedTooltips.values()).filter((t, i) => i < index)}
+      onTooltipMount={(element, bounds) => {
+        renderedTooltips.set(marker.id, { element, bounds });
+      }}
+      onTooltipUnmount={() => {
+        renderedTooltips.delete(marker.id);
+      }}
+    />
+  {/each}
+
+  {#if hoveredMarkerData}
+    <MarkerTooltip
+      marker={hoveredMarkerData}
+      position={tooltipPosition}
+      {containerElement}
+      markerDiameter={markerSizeInPixels}
+      isDM={props.mode === 0}
+      isPinned={false}
+      {onPinToggle}
+      existingTooltips={Array.from(renderedTooltips.values())}
+      onTooltipHover={(isHovering) => {
+        if (props.mode === 0 && sceneRef?.markers?.maintainHover) {
+          sceneRef.markers.maintainHover(isHovering);
+        }
+      }}
+    />
+  {/if}
+</div>