entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/Minimap/Minimap.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React, { useRef, useMemo, useLayoutEffect, useImperativeHandle, useCallback, useEffect } from 'react';
+import { resolveVarValue } from '../../primitives/canvas/canvasTheme.js';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import { vars } from '../../../theme/contract.css.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cx } from '../../../utils/cx.js';
+import { minimapShellStyle, titleInsideStyle, titleOutsideStyle, footerInsideStyle, footerOutsideStyle, cornerTopLeftStyle, cornerTopRightStyle, cornerBottomLeftStyle, cornerBottomRightStyle, minimapBodyStyle, minimapCanvasStyle, minimapOverlayLayerStyle, ariaLiveRegionStyle } from './Minimap.css.js';
+import { MINIMAP_SLOT } from './Minimap.types.js';
+import { MinimapStoreContext, useMinimapDragState } from './MinimapContext.js';
+import { computeMinimapHeight } from './minimapCoords.js';
+import { drawMinimap } from './minimapDrawing.js';
+import { MinimapStore } from './MinimapStore.js';
+import { useMinimapGestures } from './useMinimapGestures.js';
+
+const DEFAULT_OUTSIDE_OVERLAY = 'rgba(0, 0, 0, 0.4)';
+const DEFAULT_INTERACTIONS = {
+    click: true,
+    dragViewportRect: true,
+    dragFromEmpty: true,
+};
+const DISABLED_INTERACTIONS = {
+    click: false,
+    dragViewportRect: false,
+    dragFromEmpty: false,
+};
+function getSlotKind(el) {
+    const marker = el.type[MINIMAP_SLOT];
+    return marker ?? null;
+}
+function categorizeChildren(children) {
+    const slots = {
+        titleAbove: null,
+        titleInside: null,
+        footerBelow: null,
+        footerInside: null,
+        corners: {},
+        other: [],
+    };
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child)) {
+            if (child !== null && child !== undefined && child !== false) {
+                slots.other.push(child);
+            }
+            return;
+        }
+        const kind = getSlotKind(child);
+        if (kind === null) {
+            // Dev warning: a child whose displayName looks like a Minimap slot
+            // (e.g. wrapped in React.memo) but lost the symbol marker.
+            if (process.env['NODE_ENV'] !== 'production') {
+                const displayName = child.type
+                    ?.displayName;
+                if (displayName?.startsWith('Minimap.')) {
+                    console.warn(`[Minimap] child "${displayName}" looks like a slot subcomponent ` +
+                        `but is missing the MINIMAP_SLOT symbol marker. It will render ` +
+                        `as a free-form overlay. If you wrapped a slot subcomponent ` +
+                        `(e.g. with React.memo), copy the symbol onto the wrapper.`);
+                }
+            }
+            slots.other.push(child);
+            return;
+        }
+        const props = child.props;
+        if (kind === 'title') {
+            const placement = props.placement === 'top-inside' ? 'top-inside' : 'top-outside';
+            const node = (jsx("div", { className: cx(placement === 'top-inside' ? titleInsideStyle : titleOutsideStyle, props.className), style: props.style, children: props.children }));
+            if (placement === 'top-inside')
+                slots.titleInside = node;
+            else
+                slots.titleAbove = node;
+        }
+        else if (kind === 'footer') {
+            const placement = props.placement === 'bottom-inside'
+                ? 'bottom-inside'
+                : 'bottom-outside';
+            const node = (jsx("div", { className: cx(placement === 'bottom-inside'
+                    ? footerInsideStyle
+                    : footerOutsideStyle, props.className), style: props.style, children: props.children }));
+            if (placement === 'bottom-inside')
+                slots.footerInside = node;
+            else
+                slots.footerBelow = node;
+        }
+        else {
+            // kind is narrowed to 'corner' here (only remaining slot kind).
+            const side = props.side ?? 'top-right';
+            const cornerStyle = side === 'top-left'
+                ? cornerTopLeftStyle
+                : side === 'top-right'
+                    ? cornerTopRightStyle
+                    : side === 'bottom-left'
+                        ? cornerBottomLeftStyle
+                        : cornerBottomRightStyle;
+            slots.corners[side] = (jsx("div", { className: cx(cornerStyle, props.className), style: props.style, children: props.children }));
+        }
+    });
+    return slots;
+}
+/**
+ * The interactive body that hosts canvas + overlay layer + pointer/keyboard
+ * handlers. Subscribes to the drag slice for its `data-dragging` attribute
+ * + aria-live announcement so neither lives in React state on the outer
+ * shell.
+ */
+function MinimapBody({ bodyRef, canvasRef, width, height, ariaLabel, disabled, handlers, overlayChildren, ariaLiveActive, }) {
+    const isDragging = useMinimapDragState();
+    return (
+    // The minimap body is a labelled landmark region that doubles as an
+    // interactive pan/zoom surface (focusable, with pointer + key handlers).
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    jsxs("div", { ref: bodyRef, className: minimapBodyStyle, "data-dragging": isDragging || undefined, "data-disabled": disabled || undefined, role: "region", "aria-label": ariaLabel, tabIndex: disabled ? -1 : 0, style: { width, height }, onPointerDown: handlers.onPointerDown, onPointerMove: handlers.onPointerMove, onPointerUp: handlers.onPointerUp, onPointerCancel: handlers.onPointerCancel, onPointerLeave: handlers.onPointerLeave, onKeyDown: handlers.onKeyDown, children: [jsx("canvas", { ref: canvasRef, className: minimapCanvasStyle, style: { width, height } }), jsx("div", { className: minimapOverlayLayerStyle, children: overlayChildren }), jsx("div", { className: ariaLiveRegionStyle, "aria-live": "polite", role: "status", children: ariaLiveActive && isDragging ? 'Panning viewport' : '' })] }));
+}
+/**
+ * Compact navigation widget for editor viewports. Renders a miniature of
+ * the world content alongside a draggable rectangle that mirrors the main
+ * viewport's visible region. Intended to be shared by NodeGraph, Timeline,
+ * and any custom 2D editor surface.
+ *
+ * Designed as a controlled primitive — pass the current `transform` /
+ * `viewportSize` from your `<Viewport>` and translate `onNavigate.worldPoint`
+ * into a `viewport.centerOn(...)` call.
+ *
+ * Children may include `<Minimap.Title>`, `<Minimap.Footer>`,
+ * `<Minimap.Corner>` slot subcomponents — any other nodes render as a
+ * free-form overlay layer above the canvas body. Children can read live
+ * state (hover position, hovered item id, transform) via
+ * `useMinimapContext()` / `useMinimapHover()` / `useMinimapGeometry()` /
+ * `useMinimapDragState()`.
+ */
+const Minimap = ({ items, worldBounds, transform, viewportSize, onNavigate, width = 200, minHeight = 60, maxHeight = 200, interactions = DEFAULT_INTERACTIONS, keyboardPanStep = 0.1, backgroundColor, defaultItemColor, viewportRectStroke, outsideOverlay = DEFAULT_OUTSIDE_OVERLAY, renderOverlay, disabled = false, ariaLabel = 'Minimap', className, style, testId, id, children, ref, ...rest }) => {
+    const bodyRef = useRef(null);
+    const canvasRef = useRef(null);
+    const height = useMemo(() => computeMinimapHeight(width, worldBounds, minHeight, maxHeight), [width, worldBounds, minHeight, maxHeight]);
+    const minimapSize = useMemo(() => ({ width, height }), [width, height]);
+    const interactionsConfig = useMemo(() => interactions === false
+        ? DISABLED_INTERACTIONS
+        : {
+            click: interactions.click ?? true,
+            dragViewportRect: interactions.dragViewportRect ?? true,
+            dragFromEmpty: interactions.dragFromEmpty ?? true,
+        }, [interactions]);
+    // ── Store ──
+    const store = useMemo(() => new MinimapStore(), []);
+    useLayoutEffect(() => {
+        store.setGeometry({ transform, viewportSize, worldBounds, minimapSize });
+    }, [store, transform, viewportSize, worldBounds, minimapSize]);
+    useLayoutEffect(() => {
+        store.configureHandle({
+            focus: () => bodyRef.current?.focus(),
+            getElement: () => bodyRef.current,
+        });
+    }, [store]);
+    useImperativeHandle(ref, () => store.handle, [store]);
+    // ── Gestures ──
+    const { handlers } = useMinimapGestures({
+        containerRef: bodyRef,
+        store,
+        worldBounds,
+        transform,
+        viewportSize,
+        minimapSize,
+        items,
+        interactions: interactionsConfig,
+        keyboardPanStep,
+        disabled,
+        onNavigate,
+    });
+    // ── Draw — useLayoutEffect + scheduleDraw, theme resolved per-frame ──
+    const renderOverlayRef = useLatest(renderOverlay);
+    const itemsRef = useLatest(items);
+    const rafRef = useRef(0);
+    const scheduleDraw = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(() => {
+            const canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+            const targetW = Math.max(1, Math.round(width * dpr));
+            const targetH = Math.max(1, Math.round(height * dpr));
+            if (canvas.width !== targetW || canvas.height !== targetH) {
+                canvas.width = targetW;
+                canvas.height = targetH;
+            }
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            const colors = {
+                background: backgroundColor ??
+                    resolveVarValue(canvas, vars.colors.background.secondary),
+                defaultItem: defaultItemColor ??
+                    resolveVarValue(canvas, vars.colors.accent.primary),
+                viewportRectStroke: viewportRectStroke ??
+                    resolveVarValue(canvas, vars.colors.accent.primary),
+                outsideOverlay,
+            };
+            drawMinimap({
+                ctx,
+                size: { width, height },
+                worldBounds,
+                transform,
+                viewportSize,
+                items: itemsRef.current,
+                colors,
+                renderOverlay: renderOverlayRef.current,
+            });
+        });
+    }, [
+        width,
+        height,
+        worldBounds,
+        transform,
+        viewportSize,
+        backgroundColor,
+        defaultItemColor,
+        viewportRectStroke,
+        outsideOverlay,
+        itemsRef,
+        renderOverlayRef,
+    ]);
+    useLayoutEffect(() => {
+        scheduleDraw();
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, [scheduleDraw]);
+    // Redraw when DPR changes (e.g. dragging to a different display).
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const handler = () => {
+            scheduleDraw();
+        };
+        mq.addEventListener('change', handler);
+        return () => {
+            mq.removeEventListener('change', handler);
+        };
+    }, [scheduleDraw]);
+    // ── Slots ──
+    const slots = useMemo(() => categorizeChildren(children), [children]);
+    const overlayChildren = (jsxs(Fragment, { children: [slots.titleInside, slots.footerInside, slots.corners['top-left'], slots.corners['top-right'], slots.corners['bottom-left'], slots.corners['bottom-right'], slots.other] }));
+    return (jsx(MinimapStoreContext.Provider, { value: store, children: jsxs("div", { className: cx(minimapShellStyle, className), "data-testid": testId, id: id, style: style, ...rest, children: [slots.titleAbove, jsx(MinimapBody, { bodyRef: bodyRef, canvasRef: canvasRef, width: width, height: height, ariaLabel: ariaLabel, disabled: disabled, handlers: handlers, overlayChildren: overlayChildren, ariaLiveActive: !disabled }), slots.footerBelow] }) }));
+};
+Minimap.displayName = 'Minimap';
+
+export { Minimap };
+//# sourceMappingURL=Minimap.js.map

package/dist/esm/components/editor/Minimap/Minimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.js","sources":["src/components/editor/Minimap/Minimap.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport { resolveVarValue } from '@/components/primitives/canvas/canvasTheme';\nimport { useLatest } from '@/hooks';\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  minimapShellStyle,\n  minimapBodyStyle,\n  minimapCanvasStyle,\n  minimapOverlayLayerStyle,\n  titleOutsideStyle,\n  titleInsideStyle,\n  footerOutsideStyle,\n  footerInsideStyle,\n  cornerTopLeftStyle,\n  cornerTopRightStyle,\n  cornerBottomLeftStyle,\n  cornerBottomRightStyle,\n  ariaLiveRegionStyle,\n} from './Minimap.css';\nimport { MINIMAP_SLOT } from './Minimap.types';\nimport { MinimapStoreContext, useMinimapDragState } from './MinimapContext';\nimport { computeMinimapHeight } from './minimapCoords';\nimport { drawMinimap } from './minimapDrawing';\nimport { MinimapStore } from './MinimapStore';\nimport { useMinimapGestures } from './useMinimapGestures';\n\nimport type {\n  MinimapCornerSide,\n  MinimapFooterPlacement,\n  MinimapInteractionConfig,\n  MinimapProps,\n  MinimapSlotKind,\n  MinimapSlotMarker,\n  MinimapTitlePlacement,\n} from './Minimap.types';\nimport type { MinimapDrawColors } from './minimapDrawing';\n\nconst DEFAULT_OUTSIDE_OVERLAY = 'rgba(0, 0, 0, 0.4)';\n\nconst DEFAULT_INTERACTIONS: Required<MinimapInteractionConfig> = {\n  click: true,\n  dragViewportRect: true,\n  dragFromEmpty: true,\n};\n\nconst DISABLED_INTERACTIONS: Required<MinimapInteractionConfig> = {\n  click: false,\n  dragViewportRect: false,\n  dragFromEmpty: false,\n};\n\ninterface CategorizedSlots {\n  titleAbove: React.ReactNode;\n  titleInside: React.ReactNode;\n  footerBelow: React.ReactNode;\n  footerInside: React.ReactNode;\n  corners: Partial<Record<MinimapCornerSide, React.ReactNode>>;\n  other: React.ReactNode[];\n}\n\nfunction getSlotKind(el: React.ReactElement): MinimapSlotKind | null {\n  const marker = (el.type as Partial<MinimapSlotMarker>)[MINIMAP_SLOT];\n  return marker ?? null;\n}\n\nfunction categorizeChildren(children: React.ReactNode): CategorizedSlots {\n  const slots: CategorizedSlots = {\n    titleAbove: null,\n    titleInside: null,\n    footerBelow: null,\n    footerInside: null,\n    corners: {},\n    other: [],\n  };\n\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) {\n      if (child !== null && child !== undefined && child !== false) {\n        slots.other.push(child);\n      }\n      return;\n    }\n    const kind = getSlotKind(child);\n    if (kind === null) {\n      // Dev warning: a child whose displayName looks like a Minimap slot\n      // (e.g. wrapped in React.memo) but lost the symbol marker.\n      if (process.env['NODE_ENV'] !== 'production') {\n        const displayName = (child.type as { displayName?: string } | undefined)\n          ?.displayName;\n        if (displayName?.startsWith('Minimap.')) {\n          console.warn(\n            `[Minimap] child \"${displayName}\" looks like a slot subcomponent ` +\n              `but is missing the MINIMAP_SLOT symbol marker. It will render ` +\n              `as a free-form overlay. If you wrapped a slot subcomponent ` +\n              `(e.g. with React.memo), copy the symbol onto the wrapper.`\n          );\n        }\n      }\n      slots.other.push(child);\n      return;\n    }\n\n    const props = child.props as {\n      children?: React.ReactNode;\n      placement?: MinimapTitlePlacement | MinimapFooterPlacement;\n      side?: MinimapCornerSide;\n      className?: string;\n      style?: React.CSSProperties;\n    };\n\n    if (kind === 'title') {\n      const placement: MinimapTitlePlacement =\n        props.placement === 'top-inside' ? 'top-inside' : 'top-outside';\n      const node = (\n        <div\n          className={cx(\n            placement === 'top-inside' ? titleInsideStyle : titleOutsideStyle,\n            props.className\n          )}\n          style={props.style}\n        >\n          {props.children}\n        </div>\n      );\n      if (placement === 'top-inside') slots.titleInside = node;\n      else slots.titleAbove = node;\n    } else if (kind === 'footer') {\n      const placement: MinimapFooterPlacement =\n        props.placement === 'bottom-inside'\n          ? 'bottom-inside'\n          : 'bottom-outside';\n      const node = (\n        <div\n          className={cx(\n            placement === 'bottom-inside'\n              ? footerInsideStyle\n              : footerOutsideStyle,\n            props.className\n          )}\n          style={props.style}\n        >\n          {props.children}\n        </div>\n      );\n      if (placement === 'bottom-inside') slots.footerInside = node;\n      else slots.footerBelow = node;\n    } else {\n      // kind is narrowed to 'corner' here (only remaining slot kind).\n      const side: MinimapCornerSide = props.side ?? 'top-right';\n      const cornerStyle =\n        side === 'top-left'\n          ? cornerTopLeftStyle\n          : side === 'top-right'\n            ? cornerTopRightStyle\n            : side === 'bottom-left'\n              ? cornerBottomLeftStyle\n              : cornerBottomRightStyle;\n      slots.corners[side] = (\n        <div className={cx(cornerStyle, props.className)} style={props.style}>\n          {props.children}\n        </div>\n      );\n    }\n  });\n\n  return slots;\n}\n\n/**\n * The interactive body that hosts canvas + overlay layer + pointer/keyboard\n * handlers. Subscribes to the drag slice for its `data-dragging` attribute\n * + aria-live announcement so neither lives in React state on the outer\n * shell.\n */\nfunction MinimapBody({\n  bodyRef,\n  canvasRef,\n  width,\n  height,\n  ariaLabel,\n  disabled,\n  handlers,\n  overlayChildren,\n  ariaLiveActive,\n}: {\n  bodyRef: React.RefObject<HTMLDivElement | null>;\n  canvasRef: React.RefObject<HTMLCanvasElement | null>;\n  width: number;\n  height: number;\n  ariaLabel: string;\n  disabled: boolean;\n  handlers: ReturnType<typeof useMinimapGestures>['handlers'];\n  overlayChildren: React.ReactNode;\n  ariaLiveActive: boolean;\n}): React.ReactElement {\n  const isDragging = useMinimapDragState();\n  return (\n    // The minimap body is a labelled landmark region that doubles as an\n    // interactive pan/zoom surface (focusable, with pointer + key handlers).\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={bodyRef}\n      className={minimapBodyStyle}\n      data-dragging={isDragging || undefined}\n      data-disabled={disabled || undefined}\n      role=\"region\"\n      aria-label={ariaLabel}\n      tabIndex={disabled ? -1 : 0}\n      style={{ width, height }}\n      onPointerDown={handlers.onPointerDown}\n      onPointerMove={handlers.onPointerMove}\n      onPointerUp={handlers.onPointerUp}\n      onPointerCancel={handlers.onPointerCancel}\n      onPointerLeave={handlers.onPointerLeave}\n      onKeyDown={handlers.onKeyDown}\n    >\n      <canvas\n        ref={canvasRef}\n        className={minimapCanvasStyle}\n        style={{ width, height }}\n      />\n      <div className={minimapOverlayLayerStyle}>{overlayChildren}</div>\n      <div className={ariaLiveRegionStyle} aria-live=\"polite\" role=\"status\">\n        {ariaLiveActive && isDragging ? 'Panning viewport' : ''}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Compact navigation widget for editor viewports. Renders a miniature of\n * the world content alongside a draggable rectangle that mirrors the main\n * viewport's visible region. Intended to be shared by NodeGraph, Timeline,\n * and any custom 2D editor surface.\n *\n * Designed as a controlled primitive — pass the current `transform` /\n * `viewportSize` from your `<Viewport>` and translate `onNavigate.worldPoint`\n * into a `viewport.centerOn(...)` call.\n *\n * Children may include `<Minimap.Title>`, `<Minimap.Footer>`,\n * `<Minimap.Corner>` slot subcomponents — any other nodes render as a\n * free-form overlay layer above the canvas body. Children can read live\n * state (hover position, hovered item id, transform) via\n * `useMinimapContext()` / `useMinimapHover()` / `useMinimapGeometry()` /\n * `useMinimapDragState()`.\n */\nexport const Minimap = ({\n  items,\n  worldBounds,\n  transform,\n  viewportSize,\n  onNavigate,\n  width = 200,\n  minHeight = 60,\n  maxHeight = 200,\n  interactions = DEFAULT_INTERACTIONS,\n  keyboardPanStep = 0.1,\n  backgroundColor,\n  defaultItemColor,\n  viewportRectStroke,\n  outsideOverlay = DEFAULT_OUTSIDE_OVERLAY,\n  renderOverlay,\n  disabled = false,\n  ariaLabel = 'Minimap',\n  className,\n  style,\n  testId,\n  id,\n  children,\n  ref,\n  ...rest\n}: MinimapProps): React.ReactElement => {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  const height = useMemo(\n    () => computeMinimapHeight(width, worldBounds, minHeight, maxHeight),\n    [width, worldBounds, minHeight, maxHeight]\n  );\n  const minimapSize = useMemo(() => ({ width, height }), [width, height]);\n\n  const interactionsConfig = useMemo<Required<MinimapInteractionConfig>>(\n    () =>\n      interactions === false\n        ? DISABLED_INTERACTIONS\n        : {\n            click: interactions.click ?? true,\n            dragViewportRect: interactions.dragViewportRect ?? true,\n            dragFromEmpty: interactions.dragFromEmpty ?? true,\n          },\n    [interactions]\n  );\n\n  // ── Store ──\n\n  const store = useMemo(() => new MinimapStore(), []);\n\n  useLayoutEffect(() => {\n    store.setGeometry({ transform, viewportSize, worldBounds, minimapSize });\n  }, [store, transform, viewportSize, worldBounds, minimapSize]);\n\n  useLayoutEffect(() => {\n    store.configureHandle({\n      focus: () => bodyRef.current?.focus(),\n      getElement: () => bodyRef.current,\n    });\n  }, [store]);\n\n  useImperativeHandle(ref, () => store.handle, [store]);\n\n  // ── Gestures ──\n\n  const { handlers } = useMinimapGestures({\n    containerRef: bodyRef,\n    store,\n    worldBounds,\n    transform,\n    viewportSize,\n    minimapSize,\n    items,\n    interactions: interactionsConfig,\n    keyboardPanStep,\n    disabled,\n    onNavigate,\n  });\n\n  // ── Draw — useLayoutEffect + scheduleDraw, theme resolved per-frame ──\n\n  const renderOverlayRef = useLatest(renderOverlay);\n  const itemsRef = useLatest(items);\n  const rafRef = useRef<number>(0);\n\n  const scheduleDraw = useCallback((): void => {\n    cancelAnimationFrame(rafRef.current);\n    rafRef.current = requestAnimationFrame(() => {\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const ctx = canvas.getContext('2d');\n      if (!ctx) return;\n\n      const dpr =\n        typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;\n      const targetW = Math.max(1, Math.round(width * dpr));\n      const targetH = Math.max(1, Math.round(height * dpr));\n      if (canvas.width !== targetW || canvas.height !== targetH) {\n        canvas.width = targetW;\n        canvas.height = targetH;\n      }\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n\n      const colors: MinimapDrawColors = {\n        background:\n          backgroundColor ??\n          resolveVarValue(canvas, vars.colors.background.secondary),\n        defaultItem:\n          defaultItemColor ??\n          resolveVarValue(canvas, vars.colors.accent.primary),\n        viewportRectStroke:\n          viewportRectStroke ??\n          resolveVarValue(canvas, vars.colors.accent.primary),\n        outsideOverlay,\n      };\n\n      drawMinimap({\n        ctx,\n        size: { width, height },\n        worldBounds,\n        transform,\n        viewportSize,\n        items: itemsRef.current,\n        colors,\n        renderOverlay: renderOverlayRef.current,\n      });\n    });\n  }, [\n    width,\n    height,\n    worldBounds,\n    transform,\n    viewportSize,\n    backgroundColor,\n    defaultItemColor,\n    viewportRectStroke,\n    outsideOverlay,\n    itemsRef,\n    renderOverlayRef,\n  ]);\n\n  useLayoutEffect(() => {\n    scheduleDraw();\n    return () => {\n      cancelAnimationFrame(rafRef.current);\n    };\n  }, [scheduleDraw]);\n\n  // Redraw when DPR changes (e.g. dragging to a different display).\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n    const mq = window.matchMedia(\n      `(resolution: ${window.devicePixelRatio}dppx)`\n    );\n    const handler = (): void => {\n      scheduleDraw();\n    };\n    mq.addEventListener('change', handler);\n    return () => {\n      mq.removeEventListener('change', handler);\n    };\n  }, [scheduleDraw]);\n\n  // ── Slots ──\n\n  const slots = useMemo(() => categorizeChildren(children), [children]);\n\n  const overlayChildren = (\n    <>\n      {slots.titleInside}\n      {slots.footerInside}\n      {slots.corners['top-left']}\n      {slots.corners['top-right']}\n      {slots.corners['bottom-left']}\n      {slots.corners['bottom-right']}\n      {slots.other}\n    </>\n  );\n\n  return (\n    <MinimapStoreContext.Provider value={store}>\n      <div\n        className={cx(minimapShellStyle, className)}\n        data-testid={testId}\n        id={id}\n        style={style}\n        {...rest}\n      >\n        {slots.titleAbove}\n        <MinimapBody\n          bodyRef={bodyRef}\n          canvasRef={canvasRef}\n          width={width}\n          height={height}\n          ariaLabel={ariaLabel}\n          disabled={disabled}\n          handlers={handlers}\n          overlayChildren={overlayChildren}\n          ariaLiveActive={!disabled}\n        />\n        {slots.footerBelow}\n      </div>\n    </MinimapStoreContext.Provider>\n  );\n};\n\nMinimap.displayName = 'Minimap';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA;AAEA;AACE;AACA;AACA;;AAGF;AACE;AACA;AACA;;AAYF;;;AAGA;AAEA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;;;;AAKE;AACE;;;;AAIJ;AACA;;;;AAII;AACE;AACF;AACE;;;AAII;;;AAIR;;;AAIF;AAQA;AACE;AAEA;;AAWgC;;AAC3B;;AACA;AACL;AAEI;;;AAMI;AACA;;AAQ2B;;AAC9B;;;;AAGL;AACA;AAEI;;AAEE;;AAEE;;AAER;;AAMJ;AAEA;AACF;AAEA;;;;;AAKG;AACH;AAqBE;;;;;AAKE;AA2BJ;AAEA;;;;;;;;;;;;;;;;AAgBG;AACI;AA0BL;AACA;AAEA;;;AASM;AACA;AACI;AACA;AACA;AACD;;AAMT;;AAGE;AACF;;;;AAKI;AACD;AACH;AAEA;;AAIA;AACE;;;;;;;AAOA;;;;AAID;;AAID;AACA;AACA;AAEA;AACE;AACA;AACE;AACA;;;AAEA;;AAEA;AAEA;AACA;AACA;AACE;AACA;;AAEF;AAEA;AACE;;AAGA;;AAGA;;;;AAMF;;AAEE;;;;;;;AAOD;AACH;AACF;;;;;;;;;;;;AAYC;;AAGC;AACA;AACE;AACF;AACF;;;;;AAKE;;AAIE;AACF;AACA;AACA;AACE;AACF;AACF;;AAIA;;AAcA;AAyBF;AAEA;;"}

package/dist/esm/components/editor/Minimap/Minimap.types.js

@@ -0,0 +1,11 @@
+// ─── Slot markers ───
+/**
+ * Symbol attached to `Minimap.Title` / `.Footer` / `.Corner` so the parent
+ * `<Minimap>` can identify slot children without relying on `displayName`
+ * (which gets clobbered by wrappers like `React.memo`, `React.forwardRef`,
+ * or Vanilla Extract recipes).
+ */
+const MINIMAP_SLOT = Symbol.for('etui.minimap.slot');
+
+export { MINIMAP_SLOT };
+//# sourceMappingURL=Minimap.types.js.map

package/dist/esm/components/editor/Minimap/Minimap.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Minimap.types.js","sources":["src/components/editor/Minimap/Minimap.types.ts"],"sourcesContent":["import type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type {\n  ViewportTransform,\n  ViewportSize,\n  WorldRect,\n} from '@/components/primitives/viewport';\nimport type { BaseComponent } from '@/types/common';\nimport type { Prettify } from '@/types/utilities';\nimport type React from 'react';\n\n// ─── Drawing info ───\n\n/**\n * Helpers and current state passed to `renderOverlay` and to custom item\n * `draw` callbacks. Exposes the same world ↔ minimap math the built-in\n * shapes use, so consumer drawing stays aligned with everything else.\n */\nexport interface MinimapDrawInfo {\n  /** Minimap size in CSS pixels (canvas already DPR-scaled). */\n  minimapSize: ViewportSize;\n  /** World rectangle this minimap maps from. */\n  worldBounds: WorldRect;\n  /** Current main-viewport transform (mirrored). */\n  transform: ViewportTransform;\n  /** Current main-viewport size in CSS pixels (mirrored). */\n  viewportSize: ViewportSize;\n  /** Uniform world → minimap scale (px per world unit). */\n  scale: number;\n  /** Letterbox offset applied when minimap aspect ≠ worldBounds aspect. */\n  offset: Point2D;\n  /** Map a world point to a minimap CSS-pixel point. */\n  worldToMinimap: (point: Point2D) => Point2D;\n  /** Inverse of `worldToMinimap`. */\n  minimapToWorld: (point: Point2D) => Point2D;\n}\n\n// ─── Items ───\n\ninterface MinimapItemBase {\n  /** Stable identity. Used for hover hit-testing and future selection support. */\n  id: string;\n  /** Override draw color for this item. Falls back to `defaultItemColor`. */\n  color?: string;\n}\n\nexport interface MinimapRectItem extends MinimapItemBase {\n  type: 'rect';\n  /** Top-left X in world units. */\n  x: number;\n  /** Top-left Y in world units. */\n  y: number;\n  /** Width in world units. */\n  width: number;\n  /** Height in world units. */\n  height: number;\n}\n\nexport interface MinimapCircleItem extends MinimapItemBase {\n  type: 'circle';\n  /** Center X in world units. */\n  cx: number;\n  /** Center Y in world units. */\n  cy: number;\n  /** Radius in world units. */\n  r: number;\n}\n\nexport interface MinimapLineItem extends MinimapItemBase {\n  type: 'line';\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  /** Stroke width in minimap CSS pixels (does not scale with content). @default 1 */\n  lineWidth?: number;\n}\n\n/**\n * Caller-defined item. `draw` is invoked with the minimap canvas context\n * and a `MinimapDrawInfo` object containing world ↔ minimap helpers.\n * `bounds` (world coords) is used for hover hit-testing.\n */\nexport interface MinimapCustomItem extends MinimapItemBase {\n  type: 'custom';\n  bounds: WorldRect;\n  draw: (ctx: CanvasRenderingContext2D, info: MinimapDrawInfo) => void;\n}\n\n/** Discriminated union of all minimap item shapes. */\nexport type MinimapItem =\n  | MinimapRectItem\n  | MinimapCircleItem\n  | MinimapLineItem\n  | MinimapCustomItem;\n\n// ─── Interactions ───\n\nexport type MinimapNavigatePhase = 'click' | 'drag-start' | 'drag' | 'drag-end';\n\n/**\n * Info passed to `onNavigate` for every navigation event.\n *\n * `worldPoint` is the world-space point the user wants at the center\n * of the main viewport — call `viewport.centerOn(info.worldPoint)`\n * (or update your transform accordingly) to satisfy the request.\n */\nexport interface MinimapNavigateInfo {\n  worldPoint: Point2D;\n  phase: MinimapNavigatePhase;\n}\n\n/** Fine-grained gesture toggles. Pass `false` to `interactions` to disable everything. */\nexport interface MinimapInteractionConfig {\n  /** Tap outside the viewport rect → `phase: 'click'`. @default true */\n  click?: boolean;\n  /** Drag the viewport rect itself → `phase: 'drag-*'`. @default true */\n  dragViewportRect?: boolean;\n  /** Drag starting outside the rect → immediately jumps + pans. @default true */\n  dragFromEmpty?: boolean;\n}\n\n// ─── Slot markers ───\n\n/**\n * Symbol attached to `Minimap.Title` / `.Footer` / `.Corner` so the parent\n * `<Minimap>` can identify slot children without relying on `displayName`\n * (which gets clobbered by wrappers like `React.memo`, `React.forwardRef`,\n * or Vanilla Extract recipes).\n */\nexport const MINIMAP_SLOT: unique symbol = Symbol.for('etui.minimap.slot');\n\nexport type MinimapSlotKind = 'title' | 'footer' | 'corner';\n\nexport interface MinimapSlotMarker {\n  [MINIMAP_SLOT]: MinimapSlotKind;\n}\n\nexport type MinimapTitlePlacement = 'top-outside' | 'top-inside';\nexport type MinimapFooterPlacement = 'bottom-outside' | 'bottom-inside';\nexport type MinimapCornerSide =\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right';\n\n// ─── Imperative handle ───\n\n/**\n * Imperative handle exposed via `ref` on `<Minimap>` and `<ViewportMinimap>`.\n * Stable for the lifetime of the component.\n */\nexport interface MinimapHandle {\n  /** Focus the minimap body so arrow keys start working. */\n  focus(): void;\n  /** Access the underlying body DOM element (the `role=\"region\"` div). */\n  getElement(): HTMLDivElement | null;\n  /** Convert a world-space point to minimap CSS-pixel coordinates. */\n  worldToMinimap(point: Point2D): Point2D;\n  /** Inverse of `worldToMinimap`. */\n  minimapToWorld(point: Point2D): Point2D;\n}\n\n// ─── Props ───\n\nexport interface MinimapBaseProps extends Omit<\n  BaseComponent,\n  'onChange' | 'ref'\n> {\n  /** Items rendered as the content miniature. */\n  items: ReadonlyArray<MinimapItem>;\n  /**\n   * World-space rectangle the minimap maps to. Use the exported\n   * `computeBoundsFromItems(items, padding?)` helper if you don't already\n   * track one yourself.\n   */\n  worldBounds: WorldRect;\n  /** Current main-viewport transform — drives the viewport rect overlay. */\n  transform: ViewportTransform;\n  /** Current main-viewport size in CSS pixels — drives the viewport rect overlay. */\n  viewportSize: ViewportSize;\n\n  /**\n   * Called when the user navigates via click, drag, or arrow keys.\n   * `info.worldPoint` is the world-space point that should sit at the\n   * center of the main viewport — pass it to `viewport.centerOn(...)`.\n   */\n  onNavigate?: (info: MinimapNavigateInfo) => void;\n\n  /**\n   * Minimap width in CSS pixels. Height is derived from `worldBounds`\n   * aspect ratio and clamped to `[minHeight, maxHeight]`.\n   * @default 200\n   */\n  width?: number;\n  /** @default 60 */\n  minHeight?: number;\n  /** @default 200 */\n  maxHeight?: number;\n\n  /**\n   * Gesture configuration. Pass `false` to disable all interactions.\n   * @default { click: true, dragViewportRect: true, dragFromEmpty: true }\n   */\n  interactions?: MinimapInteractionConfig | false;\n\n  /**\n   * Keyboard pan step, as a fraction of the current main-viewport's\n   * world-space extent per arrow-key press. Shift × 5.\n   * @default 0.1\n   */\n  keyboardPanStep?: number;\n\n  /** Override background color. Defaults to theme `--etui-color-bg-secondary`. */\n  backgroundColor?: string;\n  /** Default item color. Defaults to theme accent. */\n  defaultItemColor?: string;\n  /** Viewport-rect outline color. Defaults to theme accent. */\n  viewportRectStroke?: string;\n  /**\n   * Dimmed overlay color covering the area outside the viewport rect.\n   * @default 'rgba(0, 0, 0, 0.4)'\n   */\n  outsideOverlay?: string;\n\n  /**\n   * Custom canvas drawing pass executed after items and before the\n   * viewport-rect shroud + outline. Use for backdrops, playheads, grid\n   * overlays, selection regions — anything that should sit between items\n   * and the viewport-rect chrome.\n   */\n  renderOverlay?: (\n    ctx: CanvasRenderingContext2D,\n    info: MinimapDrawInfo\n  ) => void;\n\n  /** Disable interactions and dim the minimap. @default false */\n  disabled?: boolean;\n\n  /** @default 'Minimap' */\n  ariaLabel?: string;\n\n  /**\n   * Slot children. Pass `<Minimap.Title>`, `<Minimap.Footer>`,\n   * `<Minimap.Corner>` subcomponents for chrome, or arbitrary nodes for\n   * absolute overlays inside the canvas body. Children that aren't\n   * recognised slot markers render as a free-form overlay layer.\n   */\n  children?: React.ReactNode;\n\n  /** Imperative handle. */\n  ref?: React.Ref<MinimapHandle>;\n}\n\nexport type MinimapProps = Prettify<MinimapBaseProps>;\n\n// ─── Subcomponent props ───\n\nexport interface MinimapTitleProps {\n  children?: React.ReactNode;\n  /** @default 'top-outside' */\n  placement?: MinimapTitlePlacement;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface MinimapFooterProps {\n  children?: React.ReactNode;\n  /** @default 'bottom-outside' */\n  placement?: MinimapFooterPlacement;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport interface MinimapCornerProps {\n  children?: React.ReactNode;\n  /** Which corner of the canvas body to anchor in. @default 'top-right' */\n  side?: MinimapCornerSide;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n// ─── MinimapContext value ───\n\n/**\n * Live state available to children of a `<Minimap>` via `useMinimapContext()`.\n *\n * For perf-conscious consumers, prefer the per-slice hooks\n * (`useMinimapHover`, `useMinimapGeometry`, `useMinimapDragState`) — each\n * subscribes to a single slice and re-renders only when that slice\n * changes. `useMinimapContext()` re-renders on every store mutation.\n */\nexport interface MinimapContextValue {\n  worldBounds: WorldRect;\n  minimapSize: ViewportSize;\n  transform: ViewportTransform;\n  viewportSize: ViewportSize;\n  /** Current pointer position in world coordinates, or null when not hovering. */\n  hoverWorldPoint: Point2D | null;\n  /** Id of the item currently under the pointer (hit-test), or null. */\n  hoveredItemId: string | null;\n  /** True during an active drag (rect or pan). */\n  isDragging: boolean;\n  /** Uniform world → minimap scale. */\n  scale: number;\n  /** Letterbox offset. */\n  offset: Point2D;\n  /** Same helpers exposed in `MinimapDrawInfo`, for symmetry. */\n  worldToMinimap: (point: Point2D) => Point2D;\n  minimapToWorld: (point: Point2D) => Point2D;\n}\n"],"names":[],"mappings":"AAyHA;AAEA;;;;;AAKG;AACI,MAAM,YAAY,GAAkB,MAAM,CAAC,GAAG,CAAC,mBAAmB;;;;"}

package/dist/esm/components/editor/Minimap/MinimapContext.js

@@ -0,0 +1,48 @@
+"use client";
+import { createContext, useSyncExternalStore, useContext } from 'react';
+
+const MinimapStoreContext = createContext(null);
+function useMinimapStoreInternal() {
+    const store = useContext(MinimapStoreContext);
+    if (!store) {
+        throw new Error('useMinimap* hooks must be called inside a <Minimap> component');
+    }
+    return store;
+}
+/**
+ * Subscribe to **all** Minimap state. Convenient catch-all but re-renders
+ * on every store mutation. For perf-sensitive consumers, prefer the
+ * slice-specific hooks (`useMinimapHover`, `useMinimapGeometry`,
+ * `useMinimapDragState`).
+ */
+function useMinimapContext() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribe, store.getSnapshot);
+}
+/**
+ * Subscribe to the hover slice. Re-renders only when the pointer position
+ * or hovered item id changes.
+ */
+function useMinimapHover() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeHover, store.getHover);
+}
+/**
+ * Subscribe to the geometry slice (transform / sizes / bounds). Re-renders
+ * only on geometry mutations.
+ */
+function useMinimapGeometry() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeGeometry, store.getGeometry);
+}
+/**
+ * Subscribe to the drag slice — `true` while a pan/rect-drag gesture is
+ * in flight. Re-renders only on drag-state transitions.
+ */
+function useMinimapDragState() {
+    const store = useMinimapStoreInternal();
+    return useSyncExternalStore(store.subscribeDrag, store.getIsDragging);
+}
+
+export { MinimapStoreContext, useMinimapContext, useMinimapDragState, useMinimapGeometry, useMinimapHover };
+//# sourceMappingURL=MinimapContext.js.map

package/dist/esm/components/editor/Minimap/MinimapContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapContext.js","sources":["src/components/editor/Minimap/MinimapContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nimport type { MinimapContextValue } from './Minimap.types';\nimport type {\n  MinimapGeometryState,\n  MinimapHoverState,\n  MinimapStore,\n} from './MinimapStore';\n\nexport const MinimapStoreContext = createContext<MinimapStore | null>(null);\n\nfunction useMinimapStoreInternal(): MinimapStore {\n  const store = useContext(MinimapStoreContext);\n  if (!store) {\n    throw new Error(\n      'useMinimap* hooks must be called inside a <Minimap> component'\n    );\n  }\n  return store;\n}\n\n/**\n * Subscribe to **all** Minimap state. Convenient catch-all but re-renders\n * on every store mutation. For perf-sensitive consumers, prefer the\n * slice-specific hooks (`useMinimapHover`, `useMinimapGeometry`,\n * `useMinimapDragState`).\n */\nexport function useMinimapContext(): MinimapContextValue {\n  const store = useMinimapStoreInternal();\n  return useSyncExternalStore(store.subscribe, store.getSnapshot);\n}\n\n/**\n * Subscribe to the hover slice. Re-renders only when the pointer position\n * or hovered item id changes.\n */\nexport function useMinimapHover(): MinimapHoverState {\n  const store = useMinimapStoreInternal();\n  return useSyncExternalStore(store.subscribeHover, store.getHover);\n}\n\n/**\n * Subscribe to the geometry slice (transform / sizes / bounds). Re-renders\n * only on geometry mutations.\n */\nexport function useMinimapGeometry(): MinimapGeometryState {\n  const store = useMinimapStoreInternal();\n  return useSyncExternalStore(store.subscribeGeometry, store.getGeometry);\n}\n\n/**\n * Subscribe to the drag slice — `true` while a pan/rect-drag gesture is\n * in flight. Re-renders only on drag-state transitions.\n */\nexport function useMinimapDragState(): boolean {\n  const store = useMinimapStoreInternal();\n  return useSyncExternalStore(store.subscribeDrag, store.getIsDragging);\n}\n"],"names":[],"mappings":";;;;AAaA;AACE;;AAEE;;AAIF;AACF;AAEA;;;;;AAKG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;AAEA;;;AAGG;;AAED;;AAEF;;"}

package/dist/esm/components/editor/Minimap/MinimapCorner.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Small chrome block anchored in one of the four corners of the Minimap
+ * canvas body. Typical use cases: coordinate readouts, zoom-level chips,
+ * status badges. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`
+ * symbol — does not render itself in place.
+ */
+const MinimapCornerImpl = () => null;
+const MinimapCorner = Object.assign(MinimapCornerImpl, {
+    displayName: 'Minimap.Corner',
+    [MINIMAP_SLOT]: 'corner',
+});
+
+export { MinimapCorner };
+//# sourceMappingURL=MinimapCorner.js.map

package/dist/esm/components/editor/Minimap/MinimapCorner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapCorner.js","sources":["src/components/editor/Minimap/MinimapCorner.tsx"],"sourcesContent":["import { MINIMAP_SLOT } from './Minimap.types';\n\nimport type { MinimapCornerProps } from './Minimap.types';\n\n/**\n * Small chrome block anchored in one of the four corners of the Minimap\n * canvas body. Typical use cases: coordinate readouts, zoom-level chips,\n * status badges. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`\n * symbol — does not render itself in place.\n */\nconst MinimapCornerImpl: (props: MinimapCornerProps) => null = () => null;\n\nexport const MinimapCorner = Object.assign(MinimapCornerImpl, {\n  displayName: 'Minimap.Corner',\n  [MINIMAP_SLOT]: 'corner' as const,\n});\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,iBAAiB,GAAwC,MAAM,IAAI;MAE5D,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;AAC5D,IAAA,WAAW,EAAE,gBAAgB;IAC7B,CAAC,YAAY,GAAG,QAAiB;AAClC,CAAA;;;;"}

package/dist/esm/components/editor/Minimap/MinimapFooter.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Footer strip rendered below (or inside the bottom of) the Minimap
+ * canvas body. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`
+ * symbol — does not render itself in place, so its tree position has no
+ * effect on its placement.
+ */
+const MinimapFooterImpl = () => null;
+const MinimapFooter = Object.assign(MinimapFooterImpl, {
+    displayName: 'Minimap.Footer',
+    [MINIMAP_SLOT]: 'footer',
+});
+
+export { MinimapFooter };
+//# sourceMappingURL=MinimapFooter.js.map

package/dist/esm/components/editor/Minimap/MinimapFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapFooter.js","sources":["src/components/editor/Minimap/MinimapFooter.tsx"],"sourcesContent":["import { MINIMAP_SLOT } from './Minimap.types';\n\nimport type { MinimapFooterProps } from './Minimap.types';\n\n/**\n * Footer strip rendered below (or inside the bottom of) the Minimap\n * canvas body. Picked out of `<Minimap>` children by the `MINIMAP_SLOT`\n * symbol — does not render itself in place, so its tree position has no\n * effect on its placement.\n */\nconst MinimapFooterImpl: (props: MinimapFooterProps) => null = () => null;\n\nexport const MinimapFooter = Object.assign(MinimapFooterImpl, {\n  displayName: 'Minimap.Footer',\n  [MINIMAP_SLOT]: 'footer' as const,\n});\n"],"names":[],"mappings":";;AAIA;;;;;AAKG;AACH,MAAM,iBAAiB,GAAwC,MAAM,IAAI;MAE5D,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;AAC5D,IAAA,WAAW,EAAE,gBAAgB;IAC7B,CAAC,YAAY,GAAG,QAAiB;AAClC,CAAA;;;;"}

package/dist/esm/components/editor/Minimap/MinimapStore.js

@@ -0,0 +1,166 @@
+import { minimapToWorld, worldToMinimap, computeMinimapScale, computeMinimapOffset } from './minimapCoords.js';
+
+const IDENTITY_TRANSFORM = { x: 0, y: 0, zoom: 1 };
+const ZERO_SIZE = { width: 0, height: 0 };
+const ZERO_RECT = { x: 0, y: 0, width: 0, height: 0 };
+/**
+ * Single source of truth for Minimap runtime state — geometry, hover,
+ * drag. Designed for React's `useSyncExternalStore`: each slice has its
+ * own subscribe/get pair so subscribers re-render only when their slice
+ * changes (not on every store mutation).
+ *
+ * Wzorowane 1:1 na `primitives/viewport/ViewportStore.ts`.
+ */
+class MinimapStore {
+    constructor() {
+        this.geometry = {
+            transform: IDENTITY_TRANSFORM,
+            viewportSize: ZERO_SIZE,
+            worldBounds: ZERO_RECT,
+            minimapSize: ZERO_SIZE,
+        };
+        this.hover = {
+            hoverWorldPoint: null,
+            hoveredItemId: null,
+        };
+        this.isDragging = false;
+        this.snapshot = this.computeSnapshot();
+        this.allListeners = new Set();
+        this.geometryListeners = new Set();
+        this.hoverListeners = new Set();
+        this.dragListeners = new Set();
+        // ── Public read API (arrow functions so they can be passed as callbacks) ──
+        this.getSnapshot = () => this.snapshot;
+        this.getGeometry = () => this.geometry;
+        this.getHover = () => this.hover;
+        this.getIsDragging = () => this.isDragging;
+        // ── Subscriptions ──
+        this.subscribe = (cb) => {
+            this.allListeners.add(cb);
+            return () => {
+                this.allListeners.delete(cb);
+            };
+        };
+        this.subscribeGeometry = (cb) => {
+            this.geometryListeners.add(cb);
+            return () => {
+                this.geometryListeners.delete(cb);
+            };
+        };
+        this.subscribeHover = (cb) => {
+            this.hoverListeners.add(cb);
+            return () => {
+                this.hoverListeners.delete(cb);
+            };
+        };
+        this.subscribeDrag = (cb) => {
+            this.dragListeners.add(cb);
+            return () => {
+                this.dragListeners.delete(cb);
+            };
+        };
+        // ── Imperative handle ──
+        /**
+         * Stable handle whose methods proxy to the current store state. The
+         * handle reference is stable for the lifetime of the store.
+         */
+        this.handle = {
+            focus: () => {
+                this.focusElement?.();
+            },
+            getElement: () => this.elementGetter?.() ?? null,
+            worldToMinimap: (p) => worldToMinimap(p, this.geometry.worldBounds, this.geometry.minimapSize),
+            minimapToWorld: (p) => minimapToWorld(p, this.geometry.worldBounds, this.geometry.minimapSize),
+        };
+        this.focusElement = null;
+        this.elementGetter = null;
+    }
+    // ── Mutators ──
+    setGeometry(partial) {
+        const next = {
+            transform: partial.transform ?? this.geometry.transform,
+            viewportSize: partial.viewportSize ?? this.geometry.viewportSize,
+            worldBounds: partial.worldBounds ?? this.geometry.worldBounds,
+            minimapSize: partial.minimapSize ?? this.geometry.minimapSize,
+        };
+        if (next.transform === this.geometry.transform &&
+            sizeEqual(next.viewportSize, this.geometry.viewportSize) &&
+            rectEqual(next.worldBounds, this.geometry.worldBounds) &&
+            sizeEqual(next.minimapSize, this.geometry.minimapSize)) {
+            return;
+        }
+        this.geometry = next;
+        this.snapshot = this.computeSnapshot();
+        this.geometryListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setHover(next) {
+        if (hoverPointEqual(next.hoverWorldPoint, this.hover.hoverWorldPoint) &&
+            next.hoveredItemId === this.hover.hoveredItemId) {
+            return;
+        }
+        this.hover = next;
+        this.snapshot = this.computeSnapshot();
+        this.hoverListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    setIsDragging(next) {
+        if (next === this.isDragging)
+            return;
+        this.isDragging = next;
+        this.snapshot = this.computeSnapshot();
+        this.dragListeners.forEach(cb => {
+            cb();
+        });
+        this.allListeners.forEach(cb => {
+            cb();
+        });
+    }
+    /** Wired up by `Minimap.tsx` so the handle knows which element to act on. */
+    configureHandle(config) {
+        this.focusElement = config.focus;
+        this.elementGetter = config.getElement;
+    }
+    computeSnapshot() {
+        const { worldBounds, minimapSize, transform, viewportSize } = this.geometry;
+        const scale = computeMinimapScale(worldBounds, minimapSize);
+        const offset = computeMinimapOffset(worldBounds, minimapSize, scale);
+        return {
+            worldBounds,
+            minimapSize,
+            transform,
+            viewportSize,
+            hoverWorldPoint: this.hover.hoverWorldPoint,
+            hoveredItemId: this.hover.hoveredItemId,
+            isDragging: this.isDragging,
+            scale,
+            offset,
+            worldToMinimap: (p) => worldToMinimap(p, worldBounds, minimapSize),
+            minimapToWorld: (p) => minimapToWorld(p, worldBounds, minimapSize),
+        };
+    }
+}
+function sizeEqual(a, b) {
+    return a.width === b.width && a.height === b.height;
+}
+function rectEqual(a, b) {
+    return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+}
+function hoverPointEqual(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.x === b.x && a.y === b.y;
+}
+
+export { MinimapStore };
+//# sourceMappingURL=MinimapStore.js.map

package/dist/esm/components/editor/Minimap/MinimapStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MinimapStore.js","sources":["src/components/editor/Minimap/MinimapStore.ts"],"sourcesContent":["import {\n  computeMinimapOffset,\n  computeMinimapScale,\n  minimapToWorld as minimapToWorldFn,\n  worldToMinimap as worldToMinimapFn,\n} from './minimapCoords';\n\nimport type { MinimapContextValue, MinimapHandle } from './Minimap.types';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type {\n  ViewportSize,\n  ViewportTransform,\n  WorldRect,\n} from '@/components/primitives/viewport';\n\nconst IDENTITY_TRANSFORM: ViewportTransform = { x: 0, y: 0, zoom: 1 };\nconst ZERO_SIZE: ViewportSize = { width: 0, height: 0 };\nconst ZERO_RECT: WorldRect = { x: 0, y: 0, width: 0, height: 0 };\n\n/** Snapshot of the geometry slice — the data needed to position anything. */\nexport interface MinimapGeometryState {\n  transform: ViewportTransform;\n  viewportSize: ViewportSize;\n  worldBounds: WorldRect;\n  minimapSize: ViewportSize;\n}\n\n/** Snapshot of the hover slice. */\nexport interface MinimapHoverState {\n  hoverWorldPoint: Point2D | null;\n  hoveredItemId: string | null;\n}\n\n/**\n * Single source of truth for Minimap runtime state — geometry, hover,\n * drag. Designed for React's `useSyncExternalStore`: each slice has its\n * own subscribe/get pair so subscribers re-render only when their slice\n * changes (not on every store mutation).\n *\n * Wzorowane 1:1 na `primitives/viewport/ViewportStore.ts`.\n */\nexport class MinimapStore {\n  private geometry: MinimapGeometryState = {\n    transform: IDENTITY_TRANSFORM,\n    viewportSize: ZERO_SIZE,\n    worldBounds: ZERO_RECT,\n    minimapSize: ZERO_SIZE,\n  };\n  private hover: MinimapHoverState = {\n    hoverWorldPoint: null,\n    hoveredItemId: null,\n  };\n  private isDragging = false;\n  private snapshot: MinimapContextValue = this.computeSnapshot();\n\n  private allListeners = new Set<() => void>();\n  private geometryListeners = new Set<() => void>();\n  private hoverListeners = new Set<() => void>();\n  private dragListeners = new Set<() => void>();\n\n  // ── Public read API (arrow functions so they can be passed as callbacks) ──\n\n  getSnapshot = (): MinimapContextValue => this.snapshot;\n  getGeometry = (): MinimapGeometryState => this.geometry;\n  getHover = (): MinimapHoverState => this.hover;\n  getIsDragging = (): boolean => this.isDragging;\n\n  // ── Subscriptions ──\n\n  subscribe = (cb: () => void): (() => void) => {\n    this.allListeners.add(cb);\n    return () => {\n      this.allListeners.delete(cb);\n    };\n  };\n\n  subscribeGeometry = (cb: () => void): (() => void) => {\n    this.geometryListeners.add(cb);\n    return () => {\n      this.geometryListeners.delete(cb);\n    };\n  };\n\n  subscribeHover = (cb: () => void): (() => void) => {\n    this.hoverListeners.add(cb);\n    return () => {\n      this.hoverListeners.delete(cb);\n    };\n  };\n\n  subscribeDrag = (cb: () => void): (() => void) => {\n    this.dragListeners.add(cb);\n    return () => {\n      this.dragListeners.delete(cb);\n    };\n  };\n\n  // ── Mutators ──\n\n  setGeometry(partial: Partial<MinimapGeometryState>): void {\n    const next: MinimapGeometryState = {\n      transform: partial.transform ?? this.geometry.transform,\n      viewportSize: partial.viewportSize ?? this.geometry.viewportSize,\n      worldBounds: partial.worldBounds ?? this.geometry.worldBounds,\n      minimapSize: partial.minimapSize ?? this.geometry.minimapSize,\n    };\n    if (\n      next.transform === this.geometry.transform &&\n      sizeEqual(next.viewportSize, this.geometry.viewportSize) &&\n      rectEqual(next.worldBounds, this.geometry.worldBounds) &&\n      sizeEqual(next.minimapSize, this.geometry.minimapSize)\n    ) {\n      return;\n    }\n    this.geometry = next;\n    this.snapshot = this.computeSnapshot();\n    this.geometryListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  setHover(next: MinimapHoverState): void {\n    if (\n      hoverPointEqual(next.hoverWorldPoint, this.hover.hoverWorldPoint) &&\n      next.hoveredItemId === this.hover.hoveredItemId\n    ) {\n      return;\n    }\n    this.hover = next;\n    this.snapshot = this.computeSnapshot();\n    this.hoverListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  setIsDragging(next: boolean): void {\n    if (next === this.isDragging) return;\n    this.isDragging = next;\n    this.snapshot = this.computeSnapshot();\n    this.dragListeners.forEach(cb => {\n      cb();\n    });\n    this.allListeners.forEach(cb => {\n      cb();\n    });\n  }\n\n  // ── Imperative handle ──\n\n  /**\n   * Stable handle whose methods proxy to the current store state. The\n   * handle reference is stable for the lifetime of the store.\n   */\n  readonly handle: MinimapHandle = {\n    focus: (): void => {\n      this.focusElement?.();\n    },\n    getElement: (): HTMLDivElement | null => this.elementGetter?.() ?? null,\n    worldToMinimap: (p: Point2D): Point2D =>\n      worldToMinimapFn(p, this.geometry.worldBounds, this.geometry.minimapSize),\n    minimapToWorld: (p: Point2D): Point2D =>\n      minimapToWorldFn(p, this.geometry.worldBounds, this.geometry.minimapSize),\n  };\n\n  /** Wired up by `Minimap.tsx` so the handle knows which element to act on. */\n  configureHandle(config: {\n    focus: () => void;\n    getElement: () => HTMLDivElement | null;\n  }): void {\n    this.focusElement = config.focus;\n    this.elementGetter = config.getElement;\n  }\n\n  private focusElement: (() => void) | null = null;\n  private elementGetter: (() => HTMLDivElement | null) | null = null;\n\n  private computeSnapshot(): MinimapContextValue {\n    const { worldBounds, minimapSize, transform, viewportSize } = this.geometry;\n    const scale = computeMinimapScale(worldBounds, minimapSize);\n    const offset = computeMinimapOffset(worldBounds, minimapSize, scale);\n    return {\n      worldBounds,\n      minimapSize,\n      transform,\n      viewportSize,\n      hoverWorldPoint: this.hover.hoverWorldPoint,\n      hoveredItemId: this.hover.hoveredItemId,\n      isDragging: this.isDragging,\n      scale,\n      offset,\n      worldToMinimap: (p: Point2D): Point2D =>\n        worldToMinimapFn(p, worldBounds, minimapSize),\n      minimapToWorld: (p: Point2D): Point2D =>\n        minimapToWorldFn(p, worldBounds, minimapSize),\n    };\n  }\n}\n\nfunction sizeEqual(a: ViewportSize, b: ViewportSize): boolean {\n  return a.width === b.width && a.height === b.height;\n}\n\nfunction rectEqual(a: WorldRect, b: WorldRect): boolean {\n  return (\n    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height\n  );\n}\n\nfunction hoverPointEqual(a: Point2D | null, b: Point2D | null): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return a.x === b.x && a.y === b.y;\n}\n"],"names":["worldToMinimapFn","minimapToWorldFn"],"mappings":"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"}

package/dist/esm/components/editor/Minimap/MinimapTitle.js

@@ -0,0 +1,16 @@
+import { MINIMAP_SLOT } from './Minimap.types.js';
+
+/**
+ * Title strip rendered above (or inside the top of) the Minimap canvas
+ * body. Picked out of `<Minimap>` children by the `MINIMAP_SLOT` symbol —
+ * does not render itself in place, so its tree position has no effect on
+ * its placement.
+ */
+const MinimapTitleImpl = () => null;
+const MinimapTitle = Object.assign(MinimapTitleImpl, {
+    displayName: 'Minimap.Title',
+    [MINIMAP_SLOT]: 'title',
+});
+
+export { MinimapTitle };
+//# sourceMappingURL=MinimapTitle.js.map