@ntmats/hc-ui 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,3 +1,7 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
 // src/index.tsx
 import { cloneElement, createContext, forwardRef, Fragment, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
@@ -1434,16 +1438,1826 @@ var CommandPalette = forwardRef(function CommandPalette2({
     }
   );
 });
+var cx = (...names) => names.filter(Boolean).join(" ");
+var flag = (on) => on ? "" : void 0;
+function useImageChain(sources) {
+  const key = sources.join("\n");
+  const [state, setState] = useState({ key, index: 0 });
+  const index = state.key === key ? state.index : 0;
+  if (state.key !== key) setState({ key, index: 0 });
+  return {
+    src: sources[index],
+    index,
+    /** Call from `onError`: moves to the next address. */
+    next: () => setState({ key, index: index + 1 })
+  };
+}
+var MINI_DIAL_STATS = ["speed", "attack", "defense", "damage"];
+var MiniDialView = forwardRef(function MiniDialView2({ columns, currentClick, label, className }, ref) {
+  if (columns.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref,
+      className: cx("hc-ui-mini-dial", className),
+      role: "img",
+      "aria-label": label,
+      style: { gridTemplateColumns: `repeat(${columns.length}, var(--hc-mini-dial-cell, 7px))` },
+      children: MINI_DIAL_STATS.map(
+        (stat) => columns.map(({ click, cells }) => {
+          const { color, round, special } = cells[stat];
+          return /* @__PURE__ */ jsx(
+            "i",
+            {
+              className: "hc-ui-mini-dial__cell",
+              "data-round": flag(round),
+              "data-past": flag(currentClick !== void 0 && click < currentClick),
+              "data-now": flag(click === currentClick),
+              "data-special": flag(special),
+              "data-empty": flag(!color),
+              style: color ? { backgroundColor: color } : void 0
+            },
+            `${stat}-${click}`
+          );
+        })
+      )
+    }
+  );
+});
+var PowerIconView = forwardRef(function PowerIconView2({ color, glyphSrc, invertGlyph = false, size = 24 }, ref) {
+  return /* @__PURE__ */ jsx("span", { ref, className: "hc-ui-power-icon", style: { width: size, height: size, backgroundColor: color }, children: /* @__PURE__ */ jsx("img", { className: "hc-ui-power-icon__glyph", "data-invert": flag(invertGlyph), src: glyphSrc, alt: "" }) });
+});
+var StatGlyphView = forwardRef(function StatGlyphView2({ src, alt, size = 22 }, ref) {
+  return /* @__PURE__ */ jsx("img", { ref, className: "hc-ui-stat-glyph", src, alt, style: { width: size, height: size } });
+});
+var SpecialIconView = forwardRef(function SpecialIconView2({ backgroundSrc, glyphSrc, size = 24 }, ref) {
+  return /* @__PURE__ */ jsxs("span", { ref, className: "hc-ui-special-icon", style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx("img", { className: "hc-ui-special-icon__bg", src: backgroundSrc, alt: "" }),
+    /* @__PURE__ */ jsx("img", { className: "hc-ui-special-icon__glyph", src: glyphSrc, alt: "" })
+  ] });
+});
+function EquipmentIcon({ size = 24 }) {
+  return /* @__PURE__ */ jsx("span", { className: "hc-ui-equipment-icon", style: { width: size, height: size }, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "58%", height: "58%", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 2.5 L21.5 12 L12 21.5 L2.5 12 Z" }) }) });
+}
+var STAT_ICON_PATHS = {
+  speed: "M12 4 L17 9 L13 9 L13 17 L11 17 L11 9 L7 9 Z",
+  attack: "M4 12 L9 7 L9 11 L17 11 L17 13 L9 13 L9 17 Z",
+  defense: "M12 3 L20 6 V12 C20 16 16.5 19.5 12 21 C7.5 19.5 4 16 4 12 V6 Z",
+  damage: "M12 4 L20 12 L12 20 L4 12 Z"
+};
+function StatIcon({ type, size = 24, className }) {
+  return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", className, "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: STAT_ICON_PATHS[type] }) });
+}
+var preventDefault = (event) => event.preventDefault();
+var AvatarView = forwardRef(function AvatarView2({ sources, fallbackSrc, alt, shape = "round", className, onFallback, size }, ref) {
+  const { src, index, next } = useImageChain(sources);
+  const isFallback = src === void 0;
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ref,
+      src: src ?? fallbackSrc,
+      alt,
+      className: cx("hc-ui-avatar", className),
+      "data-shape": shape,
+      "data-fallback": flag(isFallback),
+      "data-sized": flag(size !== void 0),
+      style: size !== void 0 ? { "--hc-avatar-size": `${size}px` } : void 0,
+      loading: "lazy",
+      decoding: "async",
+      referrerPolicy: "no-referrer",
+      draggable: false,
+      onDragStart: preventDefault,
+      onContextMenu: preventDefault,
+      onMouseDown: preventDefault,
+      onTouchStart: preventDefault,
+      onError: () => {
+        if (isFallback) return;
+        next();
+        if (index + 1 >= sources.length) onFallback?.();
+      }
+    }
+  );
+});
+var SetIconView = forwardRef(function SetIconView2({ sources, className, title }, ref) {
+  const { src, next } = useImageChain(sources);
+  if (!src) return null;
+  return /* @__PURE__ */ jsx("img", { ref, className, src, alt: "", "aria-hidden": true, title, loading: "lazy", decoding: "async", onError: next }, src);
+});
+var COMBAT_DIAL_STATS = ["speed", "attack", "defense", "damage"];
+var PRINTED_ROW = 12;
+var CombatDialView = forwardRef(function CombatDialView2({
+  columns,
+  legend,
+  points,
+  selectedPointIndex,
+  focusClick,
+  currentClick,
+  labels,
+  presentation = "default",
+  onClickChange,
+  onSelectPoint,
+  tip,
+  onTipChange: setTip,
+  tipId,
+  tipSlot
+}, ref) {
+  const tracksClick = !!onClickChange;
+  const hasMultiplePoints = points.length > 1;
+  const selectedPointColumnRef = useRef(null);
+  const gridWrapRef = useRef(null);
+  const hideTip = () => setTip(null);
+  useEffect(() => {
+    const wrap = gridWrapRef.current;
+    const column = selectedPointColumnRef.current;
+    if (!wrap || !column) return;
+    const wrapRect = wrap.getBoundingClientRect();
+    const columnRect = column.getBoundingClientRect();
+    const delta = columnRect.left - wrapRect.left - (wrap.clientWidth - column.clientWidth) / 2;
+    wrap.scrollTo({ left: wrap.scrollLeft + delta, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" });
+  }, [selectedPointIndex, focusClick, points.length]);
+  if (columns.length === 0) return null;
+  const renderValueCell = (stat, cell, clickNumber) => {
+    const { tip: content } = cell;
+    const hasTip = !!content;
+    const key = `${clickNumber}:${stat}`;
+    const openTip = (trigger, x, y, mode) => {
+      if (content) setTip({ key, click: clickNumber, stat, content, anchor: { x, y, preferAbove: mode === "dialog" }, mode, trigger });
+    };
+    const cellProps = {
+      className: "hc-ui-combat-dial__cell",
+      "data-kind": "value",
+      "data-round": flag(cell.round),
+      "data-outlined": flag(cell.outlined),
+      style: { backgroundColor: cell.background, color: cell.color }
+    };
+    if (!hasTip && !tracksClick) return /* @__PURE__ */ jsx("span", { role: "img", "aria-label": cell.label, ...cellProps, children: cell.value });
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": cell.label,
+        "aria-haspopup": hasTip ? "dialog" : void 0,
+        "aria-expanded": hasTip ? tip?.key === key && tip.mode === "dialog" : void 0,
+        "aria-describedby": tip?.key === key && tip.mode === "hover" ? tipId : void 0,
+        ...cellProps,
+        "data-tip": flag(hasTip),
+        onPointerEnter: (event) => {
+          if (event.pointerType === "mouse" && hasTip && tip?.mode !== "dialog") openTip(event.currentTarget, event.clientX, event.clientY, "hover");
+        },
+        onPointerMove: (event) => {
+          if (event.pointerType === "mouse") setTip((previous) => previous?.key === key && previous.mode === "hover" ? { ...previous, anchor: { x: event.clientX, y: event.clientY } } : previous);
+        },
+        onPointerLeave: () => setTip((previous) => previous?.mode === "hover" ? null : previous),
+        onClick: (event) => {
+          event.stopPropagation();
+          onClickChange?.(clickNumber);
+          if (hasTip) {
+            const rect = event.currentTarget.getBoundingClientRect();
+            openTip(event.currentTarget, event.detail ? event.clientX : rect.left, event.detail ? event.clientY : rect.bottom, "dialog");
+          } else hideTip();
+        },
+        children: cell.value
+      }
+    );
+  };
+  const legendIcon = (icon) => !icon.glyph ? /* @__PURE__ */ jsx("img", { className: "hc-ui-combat-dial__special-icon hc-ui-stat-glyph", src: icon.src, alt: icon.alt, title: icon.title }) : presentation === "printed" ? /* @__PURE__ */ jsx("img", { className: "hc-ui-stat-glyph", src: icon.src, alt: icon.alt }) : /* @__PURE__ */ jsx(StatGlyphView, { src: icon.src, alt: icon.alt });
+  const rows = presentation === "printed" && columns.length > PRINTED_ROW ? [columns.slice(0, PRINTED_ROW), columns.slice(PRINTED_ROW)] : [columns];
+  const renderGridRow = (rowColumns, withKo, rowIndex) => /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__grid", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__col", "data-kind": "legend", children: [
+      /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__cell hc-ui-combat-dial__rangebox", "data-kind": "legend", children: [
+        /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__range", children: legend.range }),
+        /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__bolts", children: Array.from({ length: Math.max(legend.targets, 0) }).map((_, i) => /* @__PURE__ */ jsx("img", { className: "hc-ui-combat-dial__bolt", src: legend.boltSrc, alt: "" }, i)) })
+      ] }),
+      COMBAT_DIAL_STATS.map((stat) => /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__cell", "data-kind": "legend", children: legendIcon(legend.icons[stat]) }, stat))
+    ] }),
+    rowColumns.map((column) => {
+      const isCurrent = tracksClick && column.click === currentClick;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          ref: focusClick === column.click ? selectedPointColumnRef : null,
+          className: "hc-ui-combat-dial__col",
+          "data-kind": "click",
+          "data-current": flag(isCurrent),
+          "data-dimmed": flag(column.dimmed),
+          "data-start": flag(!!column.startColor),
+          style: column.startColor ? { "--hc-dial-start-color": column.startColor } : void 0,
+          "aria-label": column.label,
+          children: [
+            onClickChange ? /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-combat-dial__cell", "data-kind": "number", onClick: () => onClickChange(column.click), "aria-pressed": isCurrent, "aria-label": column.selectLabel, children: column.click }) : /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__cell", "data-kind": "number", children: column.click }),
+            COMBAT_DIAL_STATS.map((stat) => /* @__PURE__ */ jsx(Fragment, { children: renderValueCell(stat, column.cells[stat], column.click) }, stat))
+          ]
+        },
+        column.click
+      );
+    }),
+    withKo && /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__col", "data-kind": "ko", children: [
+      /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__cell", "data-kind": "number", children: columns.length + 1 }),
+      COMBAT_DIAL_STATS.map((stat) => /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__cell", "data-kind": "ko", children: labels.koCell }, stat))
+    ] })
+  ] }, rowIndex);
+  return /* @__PURE__ */ jsxs("section", { ref, className: "hc-ui-combat-dial", "data-presentation": presentation, "data-static": flag(!tracksClick), children: [
+    presentation !== "printed" && /* @__PURE__ */ jsxs("header", { className: "hc-ui-combat-dial__header", children: [
+      /* @__PURE__ */ jsxs("div", { className: "hc-ui-combat-dial__header-top", children: [
+        /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__label", children: labels.heading }),
+        /* @__PURE__ */ jsxs("span", { className: "hc-ui-combat-dial__status", children: [
+          /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__status-ko", children: labels.koMark }),
+          /* @__PURE__ */ jsx("span", { children: labels.koAt })
+        ] })
+      ] }),
+      points.some((point) => point.valueLabel) && /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__points", role: hasMultiplePoints ? "group" : void 0, children: points.map((point) => {
+        const isActive = point.index === selectedPointIndex;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "hc-ui-combat-dial__chip",
+            style: { "--hc-dial-chip-color": point.color },
+            onClick: () => onSelectPoint(point),
+            disabled: !hasMultiplePoints,
+            "aria-pressed": isActive,
+            title: hasMultiplePoints ? point.title : void 0,
+            children: [
+              point.valueLabel && /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__chip-value", children: point.valueLabel }),
+              /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__chip-bar" }),
+              /* @__PURE__ */ jsx("span", { className: "hc-ui-combat-dial__chip-clicks", children: point.clicksLabel })
+            ]
+          },
+          point.index
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hc-ui-combat-dial__grid-wrap", ref: gridWrapRef, children: rows.map((rowColumns, rowIndex) => renderGridRow(rowColumns, rowIndex === rows.length - 1, rowIndex)) }),
+    tip && tipSlot
+  ] });
+});
+var CARD_WIDTH = 375;
+var CARD_HEIGHT = 525;
+var BACK_TABLE_HEIGHT = 440;
+var BYSTANDER_DIAL_STEP = { x: 7, y: 24 };
+function nextDistribution(pages, overflowing) {
+  const last = pages.length ? Math.max(...pages) : 0;
+  for (let table = 0; table <= last; table += 1) {
+    if (!overflowing(table)) continue;
+    const items = pages.flatMap((page, index) => page === table ? [index] : []);
+    if (!items.length || table > 0 && items.length < 2) continue;
+    const next = pages.slice();
+    next[items.at(-1)] = table + 1;
+    return next;
+  }
+  return null;
+}
+function backCount(pages) {
+  const last = pages.length ? Math.max(...pages) : 0;
+  return Math.max(1, Math.ceil(last / 2));
+}
+var MAX_TILT_DEG = 3;
+var DIAL_DAMPING = 0.15;
+var CARD_DIAL_SELECTOR = ".hc-ui-physical-card__dial, .hc-ui-physical-card__bystander-dial";
+var CAN_TILT = "(hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference)";
+var CAN_DEVICE_TILT = "(hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference)";
+var DEVICE_RANGE_DEG = 18;
+var BASELINE_DRIFT = 0.01;
+var DEVICE_SMOOTHING = 0.2;
+function tiltAt(x, y, damping = 1) {
+  const offsetX = (x - 0.5) * 2 * damping;
+  const offsetY = (y - 0.5) * 2 * damping;
+  return {
+    rotateX: -offsetY * MAX_TILT_DEG,
+    rotateY: offsetX * MAX_TILT_DEG,
+    parallaxX: offsetX,
+    parallaxY: offsetY,
+    shineX: x * 100,
+    shineY: y * 100
+  };
+}
+var PARALLAX_ART_PX = 4;
+var PARALLAX_HEADER_PX = 1.5;
+var CARD_ART_SELECTOR = ".hc-ui-physical-card__token, .hc-ui-physical-card__terrain-art, .hc-ui-physical-card__bystander-token";
+function tiltStyles(tilt) {
+  return {
+    card: `perspective(1100px) rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg)`,
+    art: `${tilt.parallaxX * PARALLAX_ART_PX}px ${tilt.parallaxY * PARALLAX_ART_PX}px`,
+    header: `${tilt.parallaxX * PARALLAX_HEADER_PX}px ${tilt.parallaxY * PARALLAX_HEADER_PX}px`,
+    shine: `${tilt.shineX}% ${tilt.shineY}%`
+  };
+}
+var eachIn = (root, selector, write) => {
+  root.querySelectorAll(selector).forEach(write);
+};
+function applyTilt(root, tilt) {
+  const styles = tiltStyles(tilt);
+  root.dataset.tilt = "";
+  eachIn(root, ".hc-ui-physical-card-tilt", (element) => {
+    element.style.transform = styles.card;
+  });
+  eachIn(root, CARD_ART_SELECTOR, (element) => {
+    element.style.translate = styles.art;
+  });
+  eachIn(root, ".hc-ui-physical-card__header", (element) => {
+    element.style.translate = styles.header;
+  });
+  eachIn(root, ".hc-ui-physical-card__shine", (element) => {
+    element.style.setProperty("--hc-card-shine-at", styles.shine);
+  });
+}
+function clearTilt(root) {
+  delete root.dataset.tilt;
+  eachIn(root, ".hc-ui-physical-card-tilt", (element) => {
+    element.style.transform = "";
+  });
+  eachIn(root, `${CARD_ART_SELECTOR}, .hc-ui-physical-card__header`, (element) => {
+    element.style.translate = "";
+  });
+}
+function devicePosition(beta, gamma, baseline, screenAngle = 0) {
+  const clampAxis = (value) => Math.max(-1, Math.min(1, value / DEVICE_RANGE_DEG));
+  const front = clampAxis(beta - baseline.beta);
+  const side = clampAxis(gamma - baseline.gamma);
+  const [horizontal, vertical] = screenAngle === 90 ? [front, -side] : screenAngle === 270 ? [-front, side] : screenAngle === 180 ? [-side, -front] : [side, front];
+  return { x: (horizontal + 1) / 2, y: (vertical + 1) / 2 };
+}
+var motionAsked = false;
+function requestMotionAccess() {
+  const request = typeof DeviceOrientationEvent === "undefined" ? void 0 : DeviceOrientationEvent.requestPermission;
+  if (motionAsked || !request) return;
+  motionAsked = true;
+  request.call(DeviceOrientationEvent).catch(() => {
+    motionAsked = false;
+  });
+}
+function useDeviceTilt(ref, enabled) {
+  useEffect(() => {
+    const element = ref.current;
+    if (!enabled || !element || typeof DeviceOrientationEvent === "undefined" || !window.matchMedia(CAN_DEVICE_TILT).matches) return;
+    let touching = false;
+    let baseline = null;
+    let position = { x: 0.5, y: 0.5 };
+    let frame = 0;
+    const onOrientation = (event) => {
+      if (touching || event.beta == null || event.gamma == null) return;
+      baseline ?? (baseline = { beta: event.beta, gamma: event.gamma });
+      baseline.beta += (event.beta - baseline.beta) * BASELINE_DRIFT;
+      baseline.gamma += (event.gamma - baseline.gamma) * BASELINE_DRIFT;
+      const target = devicePosition(event.beta, event.gamma, baseline, screen.orientation?.angle ?? 0);
+      position = { x: position.x + (target.x - position.x) * DEVICE_SMOOTHING, y: position.y + (target.y - position.y) * DEVICE_SMOOTHING };
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => applyTilt(element, tiltAt(position.x, position.y)));
+    };
+    const onTouchStart = () => {
+      touching = true;
+    };
+    const onTouchEnd = (event) => {
+      touching = event.touches.length > 0;
+    };
+    const passive = { passive: true, capture: true };
+    window.addEventListener("deviceorientation", onOrientation);
+    window.addEventListener("touchstart", onTouchStart, passive);
+    window.addEventListener("touchend", onTouchEnd, passive);
+    window.addEventListener("touchcancel", onTouchEnd, passive);
+    return () => {
+      window.removeEventListener("deviceorientation", onOrientation);
+      window.removeEventListener("touchstart", onTouchStart, passive);
+      window.removeEventListener("touchend", onTouchEnd, passive);
+      window.removeEventListener("touchcancel", onTouchEnd, passive);
+      cancelAnimationFrame(frame);
+      clearTilt(element);
+    };
+  }, [ref, enabled]);
+}
+function useCardTilt() {
+  const frame = useRef(0);
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  const onPointerMove = (event) => {
+    if (event.pointerType !== "mouse" || !window.matchMedia(CAN_TILT).matches) return;
+    const slot = event.currentTarget;
+    const rect = slot.getBoundingClientRect();
+    const overDial = event.target.closest(CARD_DIAL_SELECTOR);
+    const tilt = tiltAt((event.clientX - rect.left) / rect.width, (event.clientY - rect.top) / rect.height, overDial ? DIAL_DAMPING : 1);
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(() => applyTilt(slot, tilt));
+  };
+  const onPointerLeave = (event) => {
+    cancelAnimationFrame(frame.current);
+    clearTilt(event.currentTarget);
+  };
+  return { onPointerMove, onPointerLeave };
+}
+var PHYSICAL_CARD_STATS = ["speed", "attack", "defense", "damage"];
+var CARD_GAP = 16;
+var MAX_CARD_SCALE = 1.2;
+var SIDE_BY_SIDE_MIN_SCALE = 0.86;
+var LONG_PRESS_MS = 450;
+var LONG_PRESS_SLOP = 10;
+var FOCUS_CHROME_HEIGHT = 112;
+function useCardScale(fitHeight, focus, scrollerSelector) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const scroller = fitHeight && scrollerSelector ? element.closest(scrollerSelector) : null;
+    const measure = () => {
+      setWidth(element.clientWidth);
+      if (focus) setHeight(window.innerHeight - FOCUS_CHROME_HEIGHT);
+      if (!scroller) return;
+      const top = element.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+      setHeight(scroller.clientHeight - top - 16);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    if (scroller) observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [fitHeight, focus, scrollerSelector]);
+  const columns = !focus && width >= CARD_WIDTH * SIDE_BY_SIDE_MIN_SCALE * 2 + CARD_GAP ? 2 : 1;
+  const byWidth = width ? Math.min(MAX_CARD_SCALE, (width - CARD_GAP * (columns - 1)) / columns / CARD_WIDTH) : 1;
+  const scale = (fitHeight || focus) && height > 0 ? Math.max(0.6, Math.min(byWidth, height / CARD_HEIGHT)) : byWidth;
+  return { ref, scale };
+}
+function useFitText(text, max, min) {
+  const ref = useRef(null);
+  const [fit, setFit] = useState({ text, size: max });
+  const size = fit.text === text ? fit.size : max;
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || size <= min || element.scrollWidth <= element.clientWidth + 1) return;
+    setFit({ text, size: size - 1 });
+  });
+  return { ref, size };
+}
+function CardRule({ name, text, icon, onCopy }) {
+  return /* @__PURE__ */ jsxs("section", { className: "hc-ui-physical-card__rule", children: [
+    name && /* @__PURE__ */ jsxs("h3", { children: [
+      icon,
+      /* @__PURE__ */ jsx("span", { children: name })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "hc-ui-physical-card__copy", onClick: onCopy, children: text })
+  ] });
+}
+function CardFrame({ side, label, children, legacySrc, backgroundSrc, away = false }) {
+  const tilt = useCardTilt();
+  return /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card-slot", "data-side": side, "data-away": flag(away), ...tilt, children: /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card-tilt", children: /* @__PURE__ */ jsxs("article", { className: "hc-ui-physical-card", "data-side": side, "aria-label": label, children: [
+    /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__bg", "data-side": side, src: backgroundSrc, alt: "", "aria-hidden": true, draggable: false }),
+    legacySrc && /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__legacy", src: legacySrc, alt: "", "aria-hidden": true, draggable: false }),
+    children,
+    /* @__PURE__ */ jsx("span", { className: "hc-ui-physical-card__shine", "aria-hidden": true })
+  ] }) }) });
+}
+function useLongPress(onLongPress, enabled) {
+  const press = useRef(null);
+  const cancel = () => {
+    if (press.current) window.clearTimeout(press.current.timer);
+    press.current = null;
+  };
+  useEffect(() => cancel, []);
+  if (!enabled) return {};
+  return {
+    onPointerDown: (event) => {
+      if (event.pointerType !== "touch" || !event.isPrimary) return;
+      cancel();
+      const timer = window.setTimeout(() => {
+        press.current = null;
+        navigator.vibrate?.(10);
+        onLongPress();
+      }, LONG_PRESS_MS);
+      press.current = { timer, x: event.clientX, y: event.clientY };
+    },
+    onPointerMove: (event) => {
+      const start = press.current;
+      if (start && Math.hypot(event.clientX - start.x, event.clientY - start.y) > LONG_PRESS_SLOP) cancel();
+    },
+    onPointerUp: cancel,
+    onPointerCancel: cancel,
+    // On Android, holding would open the image's menu over the focus view.
+    onContextMenu: (event) => {
+      if (press.current) event.preventDefault();
+    }
+  };
+}
+function PhysicalCardFocusView({ label, onClose, children }) {
+  const ref = useRef(null);
+  const released = useRef(false);
+  useLayoutEffect(() => {
+    const dialog = ref.current;
+    if (!dialog) return;
+    dialog.showModal();
+    const release = () => window.setTimeout(() => {
+      released.current = true;
+    }, 0);
+    window.addEventListener("pointerup", release, { once: true });
+    window.addEventListener("pointercancel", release, { once: true });
+    window.addEventListener("touchend", requestMotionAccess);
+    return () => {
+      window.removeEventListener("touchend", requestMotionAccess);
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("pointercancel", release);
+      dialog.close();
+    };
+  }, []);
+  const closeOutside = (event) => {
+    const target = event.target;
+    if (released.current && (target === event.currentTarget || target.classList.contains("hc-ui-physical-cards") && target.hasAttribute("data-focus"))) onClose();
+  };
+  return /* @__PURE__ */ jsx("dialog", { ref, className: "hc-ui-card-focus", "aria-label": label, onClick: closeOutside, onCancel: (event) => {
+    event.preventDefault();
+    onClose();
+  }, children });
+}
+var PhysicalCardView = forwardRef(function PhysicalCardView2({
+  images,
+  layout,
+  title,
+  gearSrc,
+  headerLines,
+  teamAbilities,
+  teamAbilityIcon,
+  collection,
+  dimensions,
+  token,
+  bystander,
+  keyphrases,
+  relic,
+  rules,
+  contentKey,
+  improved,
+  dial,
+  terrainDial,
+  points,
+  onSelectPoint,
+  backBar,
+  labels,
+  onCopy,
+  fitHeight = false,
+  fitHeightWithin,
+  focus = false,
+  onRequestFocus,
+  focusActions,
+  tip,
+  onTipChange: setTip,
+  tipId,
+  tipSlot
+}, forwardedRef) {
+  const { ref: wrapRef, scale } = useCardScale(fitHeight, focus, fitHeightWithin);
+  useDeviceTilt(wrapRef, focus);
+  const longPress = useLongPress(() => onRequestFocus?.(), !focus && !!onRequestFocus);
+  const [side, setSide] = useState(0);
+  const name = useFitText(title, 28, 12);
+  const setWrapRef = useCallback((element) => {
+    wrapRef.current = element;
+    if (typeof forwardedRef === "function") forwardedRef(element);
+    else if (forwardedRef) forwardedRef.current = element;
+  }, [wrapRef, forwardedRef]);
+  const tipProps = ({ key, tip: content }) => ({
+    "aria-haspopup": "dialog",
+    "aria-expanded": tip?.key === key && tip.mode === "dialog",
+    "aria-describedby": tip?.key === key && tip.mode === "hover" ? tipId : void 0,
+    onPointerEnter: (event) => {
+      if (event.pointerType === "mouse" && tip?.mode !== "dialog") setTip({ ...content, key, anchor: { x: event.clientX, y: event.clientY }, mode: "hover", trigger: event.currentTarget });
+    },
+    onPointerMove: (event) => {
+      if (event.pointerType === "mouse") setTip((value) => value?.key === key && value.mode === "hover" ? { ...value, anchor: { x: event.clientX, y: event.clientY } } : value);
+    },
+    onPointerLeave: () => setTip((value) => value?.mode === "hover" ? null : value),
+    onBlur: () => setTip((value) => value?.mode === "hover" ? null : value),
+    onClick: (event) => {
+      event.stopPropagation();
+      const rect = event.currentTarget.getBoundingClientRect();
+      setTip({ ...content, key, anchor: { x: event.detail ? event.clientX : rect.left, y: event.detail ? event.clientY : rect.bottom, preferAbove: true }, mode: "dialog", trigger: event.currentTarget });
+    }
+  });
+  const zeros = () => rules.map(() => 0);
+  const [distribution, setDistribution] = useState(() => ({ key: contentKey, pages: zeros() }));
+  const pages = distribution.key === contentKey && distribution.pages.length === rules.length ? distribution.pages : zeros();
+  const tables = useRef([]);
+  useLayoutEffect(() => {
+    const next = nextDistribution(pages, (table) => {
+      const element = tables.current[table];
+      return !!element && element.scrollHeight > element.clientHeight + 1;
+    });
+    if (next) setDistribution({ key: contentKey, pages: next });
+  });
+  const tableRef = (index) => (element) => {
+    tables.current[index] = element;
+  };
+  const renderRules = (table) => rules.map((rule, index) => pages[index] !== table ? null : /* @__PURE__ */ jsx(
+    CardRule,
+    {
+      name: rule.name,
+      text: rule.text,
+      icon: rule.icon,
+      onCopy: () => onCopy(rule.copyText)
+    },
+    index
+  ));
+  const tokenClass = "hc-ui-physical-card__token";
+  const tokenNode = !token ? null : token.kind === "portrait" ? token.render(tokenClass) : token.kind === "terrain" ? /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__terrain-art", src: token.src, alt: token.alt, loading: "lazy" }) : /* @__PURE__ */ jsx("span", { className: tokenClass, "data-object": "", style: token.color ? { "--hc-card-object-color": token.color } : void 0, children: token.src && /* @__PURE__ */ jsx("img", { src: token.src, alt: token.alt, loading: "lazy", onError: (event) => {
+    event.currentTarget.hidden = true;
+  } }) });
+  const objectLines = keyphrases ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+    keyphrases.map((line) => /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__keyphrase", children: line.content }, line.key)),
+    relic && /* @__PURE__ */ jsxs("p", { className: "hc-ui-physical-card__relic", children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        relic.label,
+        ":"
+      ] }),
+      " ",
+      relic.value
+    ] })
+  ] }) : null;
+  const improvedGroups = improved.map((group) => /* @__PURE__ */ jsxs("span", { className: "hc-ui-physical-card__improved-group", children: [
+    /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__improved-kind", src: group.kindIconSrc, alt: group.kindLabel }),
+    group.abilities.map((ability) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "hc-ui-physical-card__improved",
+        "aria-label": ability.label,
+        ...tipProps(ability),
+        children: /* @__PURE__ */ jsx("img", { src: ability.iconSrc, alt: "" })
+      },
+      ability.key
+    ))
+  ] }, group.kind));
+  const pointValues = points.kind === "none" ? null : points.kind === "object" ? /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__object-points", children: [
+    points.values,
+    " ",
+    points.suffix
+  ] }) : /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__points", "data-table": points.kind, role: points.items.length > 1 ? "group" : void 0, "aria-label": points.label, children: points.items.map((point) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "hc-ui-physical-card__point",
+      "data-active": flag(point.index === points.selectedIndex),
+      style: { color: point.color },
+      disabled: points.items.length < 2,
+      "aria-pressed": points.items.length > 1 ? point.index === points.selectedIndex : void 0,
+      "aria-label": point.label,
+      onClick: () => onSelectPoint(point),
+      children: point.value
+    },
+    point.index
+  )) });
+  const terrainDialNode = terrainDial && /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__terrain-dial", children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsx("img", { src: terrainDial.icons.range.src, alt: terrainDial.icons.range.alt }),
+      " / ",
+      /* @__PURE__ */ jsx("img", { src: terrainDial.icons.giantReach.src, alt: terrainDial.icons.giantReach.alt })
+    ] }),
+    /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("img", { src: terrainDial.icons.damage.src, alt: terrainDial.icons.damage.alt }) }),
+    /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx("img", { src: terrainDial.icons.destroy.src, alt: terrainDial.icons.destroy.alt }) }),
+    /* @__PURE__ */ jsx("b", { children: terrainDial.values[0] }),
+    /* @__PURE__ */ jsx("b", { children: terrainDial.values[1] }),
+    /* @__PURE__ */ jsx("b", { children: terrainDial.values[2] })
+  ] });
+  const teamAbilityButtons = teamAbilities.map((ability) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "hc-ui-physical-card__ability",
+      "aria-label": ability.label,
+      ...tipProps(ability),
+      children: [
+        teamAbilityIcon,
+        /* @__PURE__ */ jsx("img", { src: ability.iconSrc, alt: "", onError: (event) => {
+          event.currentTarget.hidden = true;
+        } })
+      ]
+    },
+    ability.key
+  ));
+  const bystanderToken = bystander && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander", children: /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-token", children: [
+    /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-clip", children: [
+      /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-art", children: /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-window", children: bystander.art && /* @__PURE__ */ jsx("img", { src: bystander.art.src, alt: bystander.art.alt, loading: "lazy", onError: (event) => {
+        event.currentTarget.hidden = true;
+      } }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-stripe", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-symbols", children: [
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-tab", "data-stat": "range", "aria-label": bystander.rangeLabel, role: "img", children: [
+          bystander.range != null && /* @__PURE__ */ jsx("span", { children: bystander.range }),
+          Array.from({ length: bystander.targets }, (_, index) => /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__bystander-bolt", src: bystander.boltSrc, alt: "", style: { left: 18 + index * 4 } }, index))
+        ] }),
+        PHYSICAL_CARD_STATS.map((type) => bystander.symbols[type] && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-tab", "data-stat": type, children: /* @__PURE__ */ jsx("img", { src: bystander.symbols[type], alt: "" }) }, type))
+      ] })
+    ] }),
+    bystander.improved.length > 0 && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-improved", children: bystander.improved.map(({ kind, iconSrc, label, ability }, index) => {
+      const angle = 2 * Math.PI / 22 * index;
+      const position = { left: Math.cos(angle) * 90 - 9, top: Math.sin(angle) * 90 - 9 };
+      if (!ability) return /* @__PURE__ */ jsx("img", { src: iconSrc, alt: label, style: position }, `${kind}-kind`);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "hc-ui-physical-card__bystander-improved-ability",
+          style: position,
+          "aria-label": ability.label,
+          ...tipProps(ability),
+          children: /* @__PURE__ */ jsx("img", { src: ability.iconSrc, alt: "" })
+        },
+        `${kind}-${ability.key}`
+      );
+    }) }),
+    (bystander.trait || teamAbilityButtons.length > 0) && /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-abilities", children: [
+      bystander.trait && /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__bystander-trait", src: bystander.trait.src, alt: bystander.trait.alt }),
+      teamAbilityButtons
+    ] }),
+    bystander.extra && /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__bystander-extra", "data-kind": bystander.extra.kind, children: [
+      /* @__PURE__ */ jsx("img", { src: bystander.extra.src, alt: bystander.extra.alt }),
+      bystander.extra.kind !== "construct" && /* @__PURE__ */ jsx("span", { children: bystander.extra.text })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-name", children: bystander.name }),
+    bystander.dial && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__bystander-dial", role: "group", "aria-label": bystander.dial.label, children: bystander.dial.cells.map((cell, row) => {
+      const position = { left: row * BYSTANDER_DIAL_STEP.x, top: row * BYSTANDER_DIAL_STEP.y };
+      const cellStyle = { ...position, backgroundColor: cell.background, color: cell.color };
+      const cellProps = { className: "hc-ui-physical-card__bystander-value", "data-special": flag(cell.special), style: cellStyle, "aria-label": cell.label };
+      if (!cell.tip) return /* @__PURE__ */ jsx("span", { ...cellProps, role: "img", children: cell.value }, cell.stat);
+      return /* @__PURE__ */ jsx("button", { type: "button", ...cellProps, "data-tip": "", ...tipProps(cell.tip), children: cell.value }, cell.stat);
+    }) })
+  ] }) });
+  const backs = backCount(pages);
+  const shownSide = Math.min(side, backs);
+  const nextSide = (shownSide + 1) % (backs + 1);
+  const style = { "--hc-card-scale": scale, "--hc-card-front-table-height": `${layout.frontTableHeight}px`, "--hc-card-back-table-height": `${BACK_TABLE_HEIGHT}px`, "--hc-card-width": `${CARD_WIDTH}px`, "--hc-card-height": `${CARD_HEIGHT}px` };
+  return /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-cards", "data-focus": flag(focus), ref: setWrapRef, style, ...longPress, children: [
+    /* @__PURE__ */ jsxs(CardFrame, { side: "front", backgroundSrc: images.front, legacySrc: images.legacy, label: labels.front, away: focus && shownSide !== 0, children: [
+      layout.teamUp && /* @__PURE__ */ jsx("span", { className: "hc-ui-physical-card__team-up", "aria-hidden": true }),
+      layout.rarityImage && /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__rarity", src: layout.rarityImage, alt: "", "aria-hidden": true, draggable: false }),
+      layout.dialImage && /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__dial-bg", "data-table": layout.frontTable, src: layout.dialImage, alt: "", "aria-hidden": true, draggable: false }),
+      /* @__PURE__ */ jsxs("header", { className: "hc-ui-physical-card__header", "data-team-up": flag(layout.teamUp), children: [
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__title", ref: name.ref, children: [
+          /* @__PURE__ */ jsx("h2", { style: { fontSize: name.size }, children: title }),
+          gearSrc && /* @__PURE__ */ jsx("img", { className: "hc-ui-physical-card__gear", src: gearSrc, alt: "" }),
+          !bystander && teamAbilityButtons
+        ] }),
+        headerLines.map((line, index) => /* @__PURE__ */ jsx("p", { className: "hc-ui-physical-card__header-line", "data-kind": line.kind, children: line.text }, index))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__collection", children: [
+        /* @__PURE__ */ jsx("strong", { children: collection.number }),
+        /* @__PURE__ */ jsx(SetIconView, { sources: collection.setSources, title: collection.setTitle, className: "hc-ui-physical-card__set" })
+      ] }),
+      dimensions && /* @__PURE__ */ jsx("span", { className: "hc-ui-physical-card__dimensions", "data-oval": flag(dimensions.oval), children: dimensions.text }),
+      /* @__PURE__ */ jsxs("div", { className: "hc-ui-physical-card__table", "data-column": "front", "data-table": layout.frontTable, "data-small-token": flag(layout.smallToken), ref: tableRef(0), children: [
+        tokenNode,
+        bystanderToken,
+        objectLines,
+        renderRules(0)
+      ] }),
+      improved.length > 0 && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__improved-row", style: { top: layout.improvedTop }, children: improvedGroups }),
+      dial && /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__dial", "data-tables": dial.tables, children: dial.node }),
+      terrainDialNode,
+      pointValues
+    ] }),
+    Array.from({ length: backs }, (_, back) => /* @__PURE__ */ jsxs(CardFrame, { side: "back", backgroundSrc: images.back, legacySrc: images.legacy, label: labels.back(back, backs), away: focus && shownSide !== back + 1, children: [
+      /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__table", "data-column": "left", ref: tableRef(back * 2 + 1), children: renderRules(back * 2 + 1) }),
+      /* @__PURE__ */ jsx("div", { className: "hc-ui-physical-card__table", "data-column": "right", ref: tableRef(back * 2 + 2), children: renderRules(back * 2 + 2) }),
+      back === backs - 1 && /* @__PURE__ */ jsxs("footer", { className: "hc-ui-physical-card__back-bar", children: [
+        backBar.realName && /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsxs("b", { children: [
+            backBar.realName.label,
+            ":"
+          ] }),
+          " ",
+          backBar.realName.value
+        ] }),
+        backBar.source && /* @__PURE__ */ jsxs("p", { children: [
+          /* @__PURE__ */ jsxs("b", { children: [
+            backBar.source.label,
+            ":"
+          ] }),
+          " ",
+          backBar.source.value
+        ] })
+      ] }),
+      back !== backs - 1 && /* @__PURE__ */ jsx("footer", { className: "hc-ui-physical-card__back-bar", "aria-hidden": true })
+    ] }, back)),
+    focus && /* @__PURE__ */ jsx("div", { className: "hc-ui-card-focus__actions", children: focusActions?.({ nextSide, backs, flip: () => setSide(nextSide) }) }),
+    tip && tipSlot
+  ] });
+});
+var TILE_SIZE = 64;
+var EDGE_SIZE = TILE_SIZE / 16;
+var WALL_SIZE = EDGE_SIZE * 2;
+var MAX_EDGES = 4;
+var HINDERING_TILE_COLOR = "#B4ECB4";
+var BLOCKING_TILE_COLOR = "#c9b8aa";
+var WATER_TILE_COLOR = "#dee8eb";
+var OBSCURING_TILE_COLOR = "#E8E8E8";
+var WINDOW_TILE_COLOR = "#dee8eb";
+var SPECIAL_TILE_COLOR = "#FFD394";
+var STARTING_ZONE_TILE_COLOR = "#fff8fa";
+var ELEVATION_TILE_COLORS = ["#FFFFFF", "#FB7A7F", "#D0424C", "#B02020", "#902020", "#702020"];
+var TERRAIN_TILE_COLORS = {
+  clear: ELEVATION_TILE_COLORS[0],
+  hindering: HINDERING_TILE_COLOR,
+  blocking: BLOCKING_TILE_COLOR,
+  water: WATER_TILE_COLOR,
+  obscuring: OBSCURING_TILE_COLOR,
+  window: WINDOW_TILE_COLOR,
+  special: SPECIAL_TILE_COLOR,
+  special2: SPECIAL_TILE_COLOR
+};
+var TERRAIN_EDGE_COLORS = {
+  clear: "#FFFFFF",
+  hindering: "#3ACE3A",
+  blocking: "#76491E",
+  water: "#1FA9E1",
+  obscuring: "#BBBBBB",
+  window: "#1FA9E1",
+  special: "#FF7600",
+  special2: "#FF7600"
+};
+var STARTING_ZONE_EDGE_COLOR = "#D560A9";
+var ELEVATION_EDGE_COLOR = "#FF0000";
+var INDOOR_EDGE_COLOR = "#FFFF00";
+var WALL_COLORS = {
+  normal: "#000000",
+  glass: "#E59400",
+  glass2: "#33BBFF",
+  door: "#000000",
+  door2: "#DDDDDD",
+  forceField: "#E59400",
+  chainLinkFence: "#555555",
+  levelSeparator: "#E5E500"
+};
+var DASHED_WALLS = /* @__PURE__ */ new Set(["glass", "glass2", "door", "door2", "levelSeparator"]);
+var Tile = class {
+  constructor(x, y, t, hideLabel) {
+    __publicField(this, "x");
+    __publicField(this, "y");
+    __publicField(this, "terrain");
+    __publicField(this, "type");
+    __publicField(this, "elevation");
+    __publicField(this, "isStartingZone");
+    __publicField(this, "isStartingZone4p");
+    __publicField(this, "group");
+    __publicField(this, "label");
+    __publicField(this, "hideLabel");
+    __publicField(this, "edges", new Array(4 * MAX_EDGES).fill(null));
+    __publicField(this, "ramps", [false, false, false, false]);
+    __publicField(this, "fillStyle");
+    this.x = x;
+    this.y = y;
+    this.terrain = t.terrain ?? "clear";
+    this.type = t.type;
+    this.elevation = t.elevation ?? 1;
+    this.isStartingZone = t.isStartingZone;
+    this.isStartingZone4p = t.isStartingZone4p;
+    this.group = t.group ?? 0;
+    this.label = t.label;
+    this.hideLabel = hideLabel;
+    if (this.terrain === "hindering") this.fillStyle = HINDERING_TILE_COLOR;
+    else if (this.terrain === "blocking") this.fillStyle = BLOCKING_TILE_COLOR;
+    else if (this.terrain === "water") this.fillStyle = WATER_TILE_COLOR;
+    else if (this.terrain === "obscuring") this.fillStyle = OBSCURING_TILE_COLOR;
+    else if (this.terrain === "window") this.fillStyle = WINDOW_TILE_COLOR;
+    else if (this.terrain === "special" || this.terrain === "special2") this.fillStyle = SPECIAL_TILE_COLOR;
+    else if (this.isStartingZone || this.isStartingZone4p) this.fillStyle = STARTING_ZONE_TILE_COLOR;
+    else if (typeof this.elevation === "string") this.fillStyle = ELEVATION_TILE_COLORS[1];
+    else this.fillStyle = ELEVATION_TILE_COLORS[this.elevation - 1] ?? ELEVATION_TILE_COLORS[0];
+  }
+  addEdge(edgeType, strokeStyle, dashed) {
+    while (this.edges[edgeType]) edgeType += 4;
+    if (edgeType < this.edges.length) this.edges[edgeType] = { strokeStyle, dashed };
+  }
+  hasEdge(edgeType) {
+    while (edgeType >= 0) {
+      if (this.edges[edgeType]) return true;
+      edgeType -= 4;
+    }
+    return false;
+  }
+  draw(ctx) {
+    ctx.fillStyle = this.fillStyle;
+    ctx.fillRect(this.x * TILE_SIZE, this.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+  }
+  drawEdges(ctx) {
+    const edgeLevels = [-1, -1, -1, -1];
+    for (let i = 0; i < MAX_EDGES; i++) {
+      for (let j = 0; j < 4; j++) {
+        if (this.edges[4 * i + j]) edgeLevels[j] = i;
+      }
+    }
+    for (let i = 0; i < 4; i++) {
+      this.drawEdge(ctx, 0 /* LEFT */, edgeLevels[0 /* LEFT */]--);
+      this.drawEdge(ctx, 1 /* RIGHT */, edgeLevels[1 /* RIGHT */]--);
+      this.drawEdge(ctx, 2 /* TOP */, edgeLevels[2 /* TOP */]--);
+      this.drawEdge(ctx, 3 /* BOTTOM */, edgeLevels[3 /* BOTTOM */]--);
+    }
+    this.drawRamps(ctx);
+    this.drawLabel(ctx);
+  }
+  drawEdge(ctx, edgeType, level) {
+    if (edgeType < 0 || level < 0) return;
+    const edge = this.edges[edgeType + level * 4];
+    if (!edge) return;
+    let x0 = 0;
+    let y0 = 0;
+    let x1 = 0;
+    let y1 = 0;
+    let lineDashOffset = 0;
+    const overhangSize = EDGE_SIZE * (level + 1);
+    const oLeft = this.hasEdge(0 /* LEFT */ + level * 4) ? 0 : overhangSize;
+    const oRight = this.hasEdge(1 /* RIGHT */ + level * 4) ? 0 : overhangSize;
+    const oTop = this.hasEdge(2 /* TOP */ + level * 4) ? 0 : overhangSize;
+    const oBottom = this.hasEdge(3 /* BOTTOM */ + level * 4) ? 0 : overhangSize;
+    switch (edgeType) {
+      case 0 /* LEFT */:
+        x0 = x1 = this.x * TILE_SIZE + EDGE_SIZE / 2 + EDGE_SIZE * level;
+        y0 = this.y * TILE_SIZE - oTop;
+        y1 = (this.y + 1) * TILE_SIZE + oBottom;
+        lineDashOffset = oTop;
+        break;
+      case 1 /* RIGHT */:
+        x0 = x1 = (this.x + 1) * TILE_SIZE - EDGE_SIZE / 2 - EDGE_SIZE * level;
+        y0 = this.y * TILE_SIZE - oTop;
+        y1 = (this.y + 1) * TILE_SIZE + oBottom;
+        lineDashOffset = oTop;
+        break;
+      case 2 /* TOP */:
+        x0 = this.x * TILE_SIZE - oLeft;
+        y0 = y1 = this.y * TILE_SIZE + EDGE_SIZE / 2 + EDGE_SIZE * level;
+        x1 = (this.x + 1) * TILE_SIZE + oRight;
+        lineDashOffset = oLeft;
+        break;
+      case 3 /* BOTTOM */:
+        x0 = this.x * TILE_SIZE - oLeft;
+        y0 = y1 = (this.y + 1) * TILE_SIZE - EDGE_SIZE / 2 - EDGE_SIZE * level;
+        x1 = (this.x + 1) * TILE_SIZE + oRight;
+        lineDashOffset = oLeft;
+        break;
+    }
+    ctx.strokeStyle = edge.strokeStyle;
+    ctx.lineWidth = EDGE_SIZE;
+    if (edge.dashed) {
+      ctx.setLineDash([EDGE_SIZE, EDGE_SIZE]);
+      ctx.lineDashOffset = lineDashOffset;
+    }
+    ctx.beginPath();
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.stroke();
+    ctx.setLineDash([]);
+  }
+  drawRamps(ctx) {
+    if (this.ramps[1 /* RIGHT */]) this.drawRamp(ctx, Math.PI * 3 / 2);
+    if (this.ramps[0 /* LEFT */]) this.drawRamp(ctx, Math.PI / 2);
+    if (this.ramps[2 /* TOP */]) this.drawRamp(ctx, Math.PI);
+    if (this.ramps[3 /* BOTTOM */]) this.drawRamp(ctx, 0);
+  }
+  drawRamp(ctx, angle) {
+    ctx.save();
+    ctx.translate(this.x * TILE_SIZE + TILE_SIZE / 2, this.y * TILE_SIZE + TILE_SIZE / 2);
+    ctx.rotate(angle);
+    ctx.beginPath();
+    ctx.moveTo(0, EDGE_SIZE);
+    ctx.lineTo(-(TILE_SIZE / 2 - EDGE_SIZE * 2), TILE_SIZE / 2 - EDGE_SIZE);
+    ctx.lineTo(TILE_SIZE / 2 - EDGE_SIZE * 2, TILE_SIZE / 2 - EDGE_SIZE);
+    ctx.closePath();
+    ctx.lineWidth = EDGE_SIZE * 2;
+    ctx.strokeStyle = ELEVATION_EDGE_COLOR;
+    ctx.stroke();
+    ctx.fillStyle = ELEVATION_TILE_COLORS[1];
+    ctx.fill();
+    ctx.font = "18px Arial";
+    ctx.fillStyle = "#000000";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(String(this.elevation), 0, TILE_SIZE / 4 + 4);
+    ctx.restore();
+  }
+  drawLabel(ctx) {
+    if (this.hideLabel || this.x !== 0 && this.y !== 0 && !this.label) return;
+    let text = "";
+    ctx.save();
+    ctx.translate(this.x * TILE_SIZE + TILE_SIZE / 2, this.y * TILE_SIZE + TILE_SIZE / 2);
+    if (this.label) {
+      text = this.label.text;
+      ctx.fillStyle = this.label.color ?? ELEVATION_EDGE_COLOR;
+      ctx.rotate((this.label.rotate ?? 0) * Math.PI / 180);
+    } else {
+      if (this.y === 0) text = String.fromCharCode("A".charCodeAt(0) + this.x);
+      if (this.x === 0) text += this.y + 1;
+      ctx.fillStyle = "#000000";
+    }
+    ctx.font = "30px Arial";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(text, 0, 0);
+    ctx.restore();
+  }
+};
+var HCMap = class {
+  constructor(json) {
+    __publicField(this, "width");
+    __publicField(this, "height");
+    __publicField(this, "type");
+    __publicField(this, "tiles", []);
+    __publicField(this, "walls");
+    __publicField(this, "ziplines");
+    this.width = json.width;
+    this.height = json.height;
+    this.type = json.type ?? "outdoor";
+    const hideLabels = json.hideLabels ?? false;
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const jt = { ...json.rows[y]?.tiles[x] ?? {} };
+        if (!jt.terrain && json.defaultTerrain) jt.terrain = json.defaultTerrain;
+        if (!jt.elevation && json.defaultElevation) jt.elevation = json.defaultElevation;
+        if (!jt.type) jt.type = json.defaultType ?? this.type;
+        this.tiles.push(new Tile(x, y, jt, hideLabels));
+      }
+    }
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const tile = this.getTile(x, y);
+        this.tryAddEdge(tile, this.getTile(x - 1, y), 0 /* LEFT */);
+        this.tryAddEdge(tile, this.getTile(x + 1, y), 1 /* RIGHT */);
+        this.tryAddEdge(tile, this.getTile(x, y - 1), 2 /* TOP */);
+        this.tryAddEdge(tile, this.getTile(x, y + 1), 3 /* BOTTOM */);
+      }
+    }
+    for (const ramp of json.ramps ?? []) {
+      let { x0, y0, x1, y1 } = ramp;
+      if (x0 > x1 || y0 > y1) {
+        [x0, x1] = [x1, x0];
+        [y0, y1] = [y1, y0];
+      }
+      if (x0 < x1) {
+        if (x0 >= 0 && x0 < this.width) this.tiles[y0 * this.width + x0].ramps[1 /* RIGHT */] = true;
+        if (x1 >= 0 && x1 < this.width) this.tiles[y1 * this.width + x1].ramps[0 /* LEFT */] = true;
+      } else {
+        if (y0 >= 0 && y0 < this.height) this.tiles[y0 * this.width + x0].ramps[3 /* BOTTOM */] = true;
+        if (y1 >= 0 && y1 < this.height) this.tiles[y1 * this.width + x1].ramps[2 /* TOP */] = true;
+      }
+    }
+    this.walls = (json.walls ?? []).map((w) => ({ ...w, type: w.type ?? json.defaultWallType ?? "normal" }));
+    this.ziplines = json.ziplines ?? [];
+  }
+  getTile(x, y) {
+    if (x < 0 || y < 0 || x >= this.width || y >= this.height) return null;
+    return this.tiles[y * this.width + x];
+  }
+  tryAddEdge(t0, t1, edgeType) {
+    if (this.type === "indoorOutdoor" && t0.type === "indoor" && (t1 == null || t1.type === "outdoor")) {
+      t0.addEdge(edgeType, INDOOR_EDGE_COLOR, false);
+    }
+    if (typeof t0.elevation === "number" && t0.elevation > 1 && (t1 == null || t0.elevation !== t1.elevation)) {
+      t0.addEdge(edgeType, ELEVATION_EDGE_COLOR, false);
+    }
+    if (t0.isStartingZone && (t1 == null || !t1.isStartingZone)) {
+      t0.addEdge(edgeType, STARTING_ZONE_EDGE_COLOR, false);
+    }
+    if (t0.isStartingZone4p && (t1 == null || !t1.isStartingZone4p)) {
+      t0.addEdge(edgeType, STARTING_ZONE_EDGE_COLOR, true);
+    }
+    if (t0.terrain !== "clear" && (t1 == null || t0.terrain !== t1.terrain || t0.type !== t1.type || t0.elevation !== t1.elevation || t0.isStartingZone !== t1.isStartingZone || t0.isStartingZone4p !== t1.isStartingZone4p || t0.group !== t1.group)) {
+      const dashed = t0.terrain === "window" || t0.terrain === "special2";
+      t0.addEdge(edgeType, TERRAIN_EDGE_COLORS[t0.terrain] ?? "#FFFFFF", dashed);
+    }
+  }
+  draw(ctx) {
+    ctx.save();
+    for (const tile of this.tiles) tile.draw(ctx);
+    ctx.restore();
+    ctx.save();
+    for (const tile of this.tiles) tile.drawEdges(ctx);
+    ctx.restore();
+    ctx.save();
+    ctx.strokeStyle = "#222222";
+    ctx.lineWidth = 1;
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        ctx.strokeRect(x * TILE_SIZE, y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+      }
+    }
+    ctx.restore();
+    for (const wall of this.walls) {
+      ctx.save();
+      this.drawWall(ctx, wall);
+      ctx.restore();
+    }
+    for (const z of this.ziplines) {
+      ctx.save();
+      ctx.strokeStyle = WALL_COLORS.normal;
+      ctx.lineCap = "round";
+      ctx.lineWidth = 4;
+      ctx.beginPath();
+      ctx.moveTo(z.x0 * TILE_SIZE + TILE_SIZE / 2, z.y0 * TILE_SIZE + TILE_SIZE / 2);
+      ctx.lineTo(z.x1 * TILE_SIZE + TILE_SIZE / 2, z.y1 * TILE_SIZE + TILE_SIZE / 2);
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+  drawWall(ctx, wall) {
+    const type = wall.type ?? "normal";
+    ctx.lineWidth = WALL_SIZE;
+    if (type === "levelSeparator") {
+      ctx.strokeStyle = WALL_COLORS.normal;
+      ctx.lineWidth = WALL_SIZE * 2;
+      ctx.beginPath();
+      ctx.moveTo(wall.x0 * TILE_SIZE, wall.y0 * TILE_SIZE);
+      ctx.lineTo(wall.x1 * TILE_SIZE, wall.y1 * TILE_SIZE);
+      ctx.stroke();
+      ctx.lineWidth = WALL_SIZE;
+    }
+    ctx.strokeStyle = WALL_COLORS[type] ?? WALL_COLORS.normal;
+    if (DASHED_WALLS.has(type)) {
+      ctx.setLineDash([WALL_SIZE, WALL_SIZE]);
+      ctx.lineDashOffset = WALL_SIZE / 2;
+    } else {
+      ctx.lineCap = "round";
+    }
+    ctx.beginPath();
+    ctx.moveTo(wall.x0 * TILE_SIZE, wall.y0 * TILE_SIZE);
+    ctx.lineTo(wall.x1 * TILE_SIZE, wall.y1 * TILE_SIZE);
+    ctx.stroke();
+  }
+};
+function mapSquare(map, x, y) {
+  const tile = map.rows[y]?.tiles[x] || {};
+  const environment = tile.type || map.defaultType || map.type || "outdoor";
+  return {
+    x,
+    y,
+    terrain: tile.terrain || map.defaultTerrain || "clear",
+    elevation: tile.elevation ?? map.defaultElevation ?? 1,
+    environment: environment === "indoor" || environment === "outdoor" ? environment : "unknown",
+    starting: !!(tile.isStartingZone || tile.isStartingZone4p),
+    label: tile.label?.text
+  };
+}
+function elevationLevel(elevation) {
+  const value = typeof elevation === "number" ? elevation : Number.parseInt(elevation, 10);
+  return Number.isFinite(value) ? Math.max(1, value) : 2;
+}
+function mapMaxLevel(map) {
+  let level = 1;
+  for (let y = 0; y < map.height; y++) {
+    for (let x = 0; x < map.width; x++) level = Math.max(level, elevationLevel(mapSquare(map, x, y).elevation));
+  }
+  return level;
+}
+function distanceToLine(x, y, line) {
+  const dx = line.x1 - line.x0, dy = line.y1 - line.y0;
+  const length2 = dx * dx + dy * dy;
+  const t = length2 ? Math.max(0, Math.min(1, ((x - line.x0) * dx + (y - line.y0) * dy) / length2)) : 0;
+  return Math.hypot(x - line.x0 - t * dx, y - line.y0 - t * dy);
+}
+function inspectMap(map, x, y, tolerance = 0.16) {
+  if (x < 0 || y < 0 || x > map.width || y > map.height) return null;
+  const cx2 = Math.min(map.width - 1, Math.floor(x)), cy = Math.min(map.height - 1, Math.floor(y));
+  const square = mapSquare(map, cx2, cy);
+  const wall = (map.walls || []).map((line) => ({ line, distance: distanceToLine(x, y, line) })).filter((item) => item.distance <= tolerance).sort((a, b) => a.distance - b.distance)[0]?.line;
+  if (wall) return { square, wall: wall.type || map.defaultWallType || "normal", line: wall };
+  const vertical = Math.abs(x - Math.round(x)), horizontal = Math.abs(y - Math.round(y));
+  const alongX = vertical <= horizontal;
+  const edge = Math.round(alongX ? x : y);
+  if (Math.min(vertical, horizontal) <= tolerance) {
+    const a = alongX ? { x: edge - 1, y: cy } : { x: cx2, y: edge - 1 };
+    const b = alongX ? { x: edge, y: cy } : { x: cx2, y: edge };
+    const valid = (p) => p.x >= 0 && p.y >= 0 && p.x < map.width && p.y < map.height;
+    if (valid(a) && valid(b)) return {
+      square: mapSquare(map, a.x, a.y),
+      adjacent: mapSquare(map, b.x, b.y),
+      line: alongX ? { x0: edge, y0: cy, x1: edge, y1: cy + 1 } : { x0: cx2, y0: edge, x1: cx2 + 1, y1: edge }
+    };
+  }
+  return { square };
+}
+function squareCoordinate(square) {
+  let index = square.x + 1, column = "";
+  while (index > 0) {
+    index--;
+    column = String.fromCharCode(65 + index % 26) + column;
+    index = Math.floor(index / 26);
+  }
+  return `${column}${square.y + 1}`;
+}
+var LEVEL_HEIGHT = 0.62;
+var BASE_Z = -0.34;
+var WATER_DROP = 0.1;
+var TERRAIN_VOLUME = { obscuring: 0.42, window: 0.42 };
+var WALL_HEIGHT = { levelSeparator: 0.12, door: 0.62, door2: 0.62 };
+var DEFAULT_WALL_HEIGHT = 0.62;
+function sceneCell(scene, x, y) {
+  if (x < 0 || y < 0 || x >= scene.width || y >= scene.height) return null;
+  return scene.cells[y * scene.width + x];
+}
+function buildMapScene(map) {
+  const { width, height } = map;
+  const maxLevel = mapMaxLevel(map);
+  const cells = [];
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const square = mapSquare(map, x, y);
+      const level = elevationLevel(square.elevation);
+      const floor = (level - 1) * LEVEL_HEIGHT - (square.terrain === "water" ? WATER_DROP : 0);
+      const top = square.terrain !== "blocking" ? floor + (TERRAIN_VOLUME[square.terrain] ?? 0) : square.environment === "indoor" ? maxLevel * LEVEL_HEIGHT : floor + LEVEL_HEIGHT;
+      cells.push({ ...square, level, floor, top });
+    }
+  }
+  const scene = { width, height, cells };
+  const walls = [];
+  for (const wall of map.walls ?? []) {
+    const type = wall.type || map.defaultWallType || "normal";
+    const length = Math.hypot(wall.x1 - wall.x0, wall.y1 - wall.y0);
+    const pieces = Math.max(1, Math.round(length));
+    for (let i = 0; i < pieces; i++) {
+      const x0 = wall.x0 + (wall.x1 - wall.x0) * i / pieces, y0 = wall.y0 + (wall.y1 - wall.y0) * i / pieces;
+      const x1 = wall.x0 + (wall.x1 - wall.x0) * (i + 1) / pieces, y1 = wall.y0 + (wall.y1 - wall.y0) * (i + 1) / pieces;
+      const mx = (x0 + x1) / 2, my = (y0 + y1) / 2;
+      const nx = length ? (y1 - y0) / (length / pieces) : 0, ny = length ? (x0 - x1) / (length / pieces) : 0;
+      const sides = [[mx + nx * 0.25, my + ny * 0.25], [mx - nx * 0.25, my - ny * 0.25]].map(([px, py]) => sceneCell(scene, Math.floor(px), Math.floor(py))).filter((cell) => !!cell);
+      const floors = sides.length ? sides.map((cell) => cell.floor) : [0];
+      const z1 = Math.max(...floors) + (WALL_HEIGHT[type] ?? DEFAULT_WALL_HEIGHT);
+      walls.push({ x0, y0, x1, y1, type, z0: Math.min(...floors), z1 });
+    }
+  }
+  const ramps = [];
+  for (const ramp of map.ramps ?? []) {
+    const a = sceneCell(scene, ramp.x0, ramp.y0), b = sceneCell(scene, ramp.x1, ramp.y1);
+    if (!a || !b || Math.abs(a.x - b.x) + Math.abs(a.y - b.y) !== 1 || a.floor === b.floor) continue;
+    const [low, high] = a.floor < b.floor ? [a, b] : [b, a];
+    ramps.push({ x: low.x, y: low.y, dx: high.x - low.x, dy: high.y - low.y, from: low.floor, to: high.floor });
+  }
+  const ziplines = (map.ziplines ?? []).map((line) => ({
+    x0: line.x0 + 0.5,
+    y0: line.y0 + 0.5,
+    x1: line.x1 + 0.5,
+    y1: line.y1 + 0.5,
+    z: Math.max(sceneCell(scene, line.x0, line.y0)?.top ?? 0, sceneCell(scene, line.x1, line.y1)?.top ?? 0) + 0.7
+  }));
+  const maxTop = Math.max(...cells.map((cell) => cell.top), ...walls.map((wall) => wall.z1), ...ziplines.map((line) => line.z));
+  return { width, height, cells, walls, ramps, ziplines, maxTop };
+}
+var DEFAULT_CAMERA = { azimuth: -32, tilt: 52, zoom: 1, panX: 0, panY: 0 };
+var TILT_RANGE = [6, 90];
+var ZOOM_RANGE = [1, 6];
+var clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+function makeProjection(scene, camera, viewport) {
+  const rad = camera.azimuth * Math.PI / 180, tilt = camera.tilt * Math.PI / 180;
+  const sin = Math.sin(rad), cos = Math.cos(rad), sinT = Math.sin(tilt), cosT = Math.cos(tilt);
+  const cx2 = scene.width / 2, cy = scene.height / 2, midZ = (scene.maxTop + BASE_Z) / 2;
+  const halfWidth = Math.hypot(cx2, cy);
+  const halfHeight = Math.hypot(halfWidth, (scene.maxTop - BASE_Z) / 2);
+  const fit = Math.min(viewport.width / (halfWidth * 2.06), viewport.height / (halfHeight * 2.06));
+  const scale = fit * camera.zoom;
+  const ox = viewport.width / 2 + camera.panX, oy = viewport.height / 2 + camera.panY;
+  return {
+    scale,
+    sin,
+    cos,
+    point(x, y, z) {
+      const dx = x - cx2, dy = y - cy;
+      return [ox + scale * (dx * cos - dy * sin), oy + scale * ((dx * sin + dy * cos) * sinT - (z - midZ) * cosT)];
+    },
+    depth(x, y) {
+      return (x - cx2) * sin + (y - cy) * cos;
+    },
+    ground(px, py, z) {
+      const rx = (px - ox) / scale, ry = ((py - oy) / scale + (z - midZ) * cosT) / sinT;
+      return [cx2 + rx * cos + ry * sin, cy - rx * sin + ry * cos];
+    }
+  };
+}
+function clampPan(scene, camera, viewport) {
+  const limit = Math.hypot(scene.width, scene.height) / 2 * makeProjection(scene, camera, viewport).scale;
+  return { ...camera, panX: clamp(camera.panX, -limit, limit), panY: clamp(camera.panY, -limit, limit) };
+}
+function zoomCamera(scene, camera, viewport, factor, anchor = { x: 0, y: 0 }) {
+  const zoom = clamp(camera.zoom * factor, ZOOM_RANGE[0], ZOOM_RANGE[1]);
+  const applied = zoom / camera.zoom;
+  return clampPan(scene, {
+    ...camera,
+    zoom,
+    panX: anchor.x + (camera.panX - anchor.x) * applied,
+    panY: anchor.y + (camera.panY - anchor.y) * applied
+  }, viewport);
+}
+var CELL_SIDES = [
+  { ax: 0, ay: 1, bx: 0, by: 0, dx: -1, dy: 0 },
+  { ax: 1, ay: 0, bx: 1, by: 1, dx: 1, dy: 0 },
+  { ax: 0, ay: 0, bx: 1, by: 0, dx: 0, dy: -1 },
+  { ax: 1, ay: 1, bx: 0, by: 1, dx: 0, dy: 1 }
+];
+var inside = (px, py, polygon2) => {
+  let hit = false;
+  for (let i = 0, j = polygon2.length - 1; i < polygon2.length; j = i++) {
+    const [xi, yi] = polygon2[i], [xj, yj] = polygon2[j];
+    if (yi > py !== yj > py && px < (xj - xi) * (py - yi) / (yj - yi) + xi) hit = !hit;
+  }
+  return hit;
+};
+function pickScene(scene, view, px, py) {
+  const items = [];
+  for (const wall of scene.walls) {
+    items.push({
+      depth: view.depth((wall.x0 + wall.x1) / 2, (wall.y0 + wall.y1) / 2),
+      test() {
+        const a = view.point(wall.x0, wall.y0, wall.z0), b = view.point(wall.x1, wall.y1, wall.z0);
+        const c = view.point(wall.x1, wall.y1, wall.z1), d = view.point(wall.x0, wall.y0, wall.z1);
+        if (!inside(px, py, [a, b, c, d])) return null;
+        const length2 = (b[0] - a[0]) ** 2 + (b[1] - a[1]) ** 2;
+        const t = length2 ? clamp(((px - a[0]) * (b[0] - a[0]) + (py - a[1]) * (b[1] - a[1])) / length2, 0, 1) : 0.5;
+        return { x: wall.x0 + (wall.x1 - wall.x0) * t, y: wall.y0 + (wall.y1 - wall.y0) * t };
+      }
+    });
+  }
+  for (const cell of scene.cells) {
+    items.push({
+      depth: view.depth(cell.x + 0.5, cell.y + 0.5),
+      test() {
+        const p00 = view.point(cell.x, cell.y, cell.top), p10 = view.point(cell.x + 1, cell.y, cell.top);
+        const p11 = view.point(cell.x + 1, cell.y + 1, cell.top), p01 = view.point(cell.x, cell.y + 1, cell.top);
+        if (inside(px, py, [p00, p10, p11, p01])) {
+          const ax = p10[0] - p00[0], ay = p10[1] - p00[1], bx = p01[0] - p00[0], by = p01[1] - p00[1];
+          const det = ax * by - ay * bx;
+          if (!det) return { x: cell.x + 0.5, y: cell.y + 0.5 };
+          const u = ((px - p00[0]) * by - (py - p00[1]) * bx) / det, v = ((py - p00[1]) * ax - (px - p00[0]) * ay) / det;
+          return { x: cell.x + clamp(u, 0, 1), y: cell.y + clamp(v, 0, 1) };
+        }
+        for (const side of CELL_SIDES) {
+          if (side.dx * view.sin + side.dy * view.cos <= 0) continue;
+          const neighbor = sceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+          const low = neighbor ? neighbor.top : BASE_Z;
+          if (low >= cell.top) continue;
+          const a = view.point(cell.x + side.ax, cell.y + side.ay, low), b = view.point(cell.x + side.bx, cell.y + side.by, low);
+          const c = view.point(cell.x + side.bx, cell.y + side.by, cell.top), d = view.point(cell.x + side.ax, cell.y + side.ay, cell.top);
+          if (inside(px, py, [a, b, c, d])) {
+            return { x: cell.x + 0.5 + side.dx * 0.4, y: cell.y + 0.5 + side.dy * 0.4 };
+          }
+        }
+        return null;
+      }
+    });
+  }
+  items.sort((a, b) => b.depth - a.depth);
+  for (const item of items) {
+    const hit = item.test();
+    if (hit) return hit;
+  }
+  return null;
+}
+function footprintOutline({ x, y, width, height, cells }, boardWidth, boardHeight) {
+  const inside2 = (cx2, cy) => cx2 >= x && cy >= y && cx2 < x + width && cy < y + height && cx2 >= 0 && cy >= 0 && cx2 < boardWidth && cy < boardHeight && (!cells || !!cells[cy - y]?.[cx2 - x]);
+  const squares = [];
+  const edges = [];
+  for (let cy = Math.max(0, y); cy < Math.min(boardHeight, y + height); cy++) {
+    for (let cx2 = Math.max(0, x); cx2 < Math.min(boardWidth, x + width); cx2++) {
+      if (!inside2(cx2, cy)) continue;
+      squares.push([cx2, cy]);
+      if (!inside2(cx2, cy - 1)) edges.push([[cx2, cy], [cx2 + 1, cy]]);
+      if (!inside2(cx2 + 1, cy)) edges.push([[cx2 + 1, cy], [cx2 + 1, cy + 1]]);
+      if (!inside2(cx2, cy + 1)) edges.push([[cx2, cy + 1], [cx2 + 1, cy + 1]]);
+      if (!inside2(cx2 - 1, cy)) edges.push([[cx2, cy], [cx2, cy + 1]]);
+    }
+  }
+  const directions = /* @__PURE__ */ new Map();
+  for (const [a, b] of edges) {
+    const direction = a[1] === b[1] ? "h" : "v";
+    for (const point of [a, b]) {
+      const key = point.join(",");
+      directions.set(key, (directions.get(key) ?? /* @__PURE__ */ new Set()).add(direction));
+    }
+  }
+  const corners = [...directions].filter(([, set]) => set.size === 2).map(([key]) => key.split(",").map(Number));
+  return { squares, edges, corners };
+}
+var SIDE_COLORS = { indoor: "#7f8797", outdoor: "#a3906f", unknown: "#9a948a" };
+var MOVE_VALID_COLOR = "#1f7ae0";
+var MOVE_INVALID_COLOR = "#d0242c";
+var WALL_THICKNESS = 0.07;
+var HINDERING_BLOCK = "#5acb5a";
+var TRANSLUCENT_WALLS = { glass: 0.42, glass2: 0.42, forceField: 0.42, chainLinkFence: 0.55 };
+var GLASS_COLORS = { glass: "#e59400", glass2: "#33bbff", forceField: "#e59400" };
+function shade(hex, factor) {
+  const n = Number.parseInt(hex.slice(1), 16);
+  const c = [n >> 16, n >> 8 & 255, n & 255].map((v) => Math.round(Math.min(255, v * factor)));
+  return `rgb(${c[0]},${c[1]},${c[2]})`;
+}
+function faceLight(view, nx, ny) {
+  const sx = nx * view.cos - ny * view.sin;
+  return 0.74 - sx * 0.2;
+}
+function polygon(ctx, points) {
+  ctx.beginPath();
+  points.forEach(([x, y], index) => index ? ctx.lineTo(x, y) : ctx.moveTo(x, y));
+  ctx.closePath();
+}
+function face(ctx, points, color) {
+  polygon(ctx, points);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 0.7;
+  ctx.stroke();
+}
+function sideColor(cell) {
+  if (cell.terrain === "blocking") return TERRAIN_EDGE_COLORS.blocking;
+  if (cell.level > 1) return ELEVATION_TILE_COLORS[Math.min(cell.level, ELEVATION_TILE_COLORS.length) - 1];
+  if (cell.terrain === "water") return TERRAIN_EDGE_COLORS.water;
+  if (cell.terrain === "hindering") return TERRAIN_EDGE_COLORS.hindering;
+  if (cell.terrain === "obscuring") return TERRAIN_EDGE_COLORS.obscuring;
+  if (cell.terrain === "window") return TERRAIN_EDGE_COLORS.window;
+  return SIDE_COLORS[cell.environment] ?? SIDE_COLORS.unknown;
+}
+function drawCellSides(ctx, scene, view, cell) {
+  const { point } = view;
+  for (const side of CELL_SIDES) {
+    if (side.dx * view.sin + side.dy * view.cos <= 0) continue;
+    const neighbor = sceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+    const low = neighbor ? neighbor.top : BASE_Z;
+    if (low >= cell.top) continue;
+    const ax = cell.x + side.ax, ay = cell.y + side.ay, bx = cell.x + side.bx, by = cell.y + side.by;
+    const light = faceLight(view, side.dx, side.dy);
+    face(ctx, [point(ax, ay, low), point(bx, by, low), point(bx, by, cell.top), point(ax, ay, cell.top)], shade(sideColor(cell), light));
+    ctx.strokeStyle = "rgba(0,0,0,.26)";
+    ctx.lineWidth = 1;
+    for (let z = 0; z < cell.top - 0.01; z += LEVEL_HEIGHT) {
+      if (z <= low + 0.01) continue;
+      const [x0, y0] = point(ax, ay, z), [x1, y1] = point(bx, by, z);
+      ctx.beginPath();
+      ctx.moveTo(x0, y0);
+      ctx.lineTo(x1, y1);
+      ctx.stroke();
+    }
+  }
+}
+function drawCellTop(ctx, scene, view, cell, texture, shadows) {
+  const p00 = view.point(cell.x, cell.y, cell.top), p10 = view.point(cell.x + 1, cell.y, cell.top), p01 = view.point(cell.x, cell.y + 1, cell.top);
+  ctx.save();
+  ctx.transform(p10[0] - p00[0], p10[1] - p00[1], p01[0] - p00[0], p01[1] - p00[1], p00[0], p00[1]);
+  ctx.drawImage(texture, cell.x * TILE_SIZE, cell.y * TILE_SIZE, TILE_SIZE, TILE_SIZE, -0.012, -0.012, 1.024, 1.024);
+  if (cell.environment === "indoor") {
+    ctx.fillStyle = (cell.x + cell.y) % 2 ? "rgba(52,62,92,.13)" : "rgba(52,62,92,.07)";
+    ctx.fillRect(0, 0, 1, 1);
+  }
+  CELL_SIDES.forEach((side, index) => {
+    const neighbor = sceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+    if (!neighbor || neighbor.top <= cell.top + 0.01) return;
+    ctx.fillStyle = shadows[index];
+    ctx.fillRect(0, 0, 1, 1);
+  });
+  ctx.restore();
+}
+function hash(x, y, salt) {
+  const value = Math.sin(x * 127.1 + y * 311.7 + salt * 74.7) * 43758.5453;
+  return value - Math.floor(value);
+}
+function drawBox(ctx, view, x0, y0, x1, y1, z0, z1, color, topFactor = 1.08) {
+  const { point } = view;
+  const sides = [
+    { ax: x0, ay: y1, bx: x0, by: y0, dx: -1, dy: 0 },
+    { ax: x1, ay: y0, bx: x1, by: y1, dx: 1, dy: 0 },
+    { ax: x0, ay: y0, bx: x1, by: y0, dx: 0, dy: -1 },
+    { ax: x1, ay: y1, bx: x0, by: y1, dx: 0, dy: 1 }
+  ];
+  for (const side of sides) {
+    if (side.dx * view.sin + side.dy * view.cos <= 0) continue;
+    face(ctx, [point(side.ax, side.ay, z0), point(side.bx, side.by, z0), point(side.bx, side.by, z1), point(side.ax, side.ay, z1)], shade(color, faceLight(view, side.dx, side.dy)));
+  }
+  face(ctx, [point(x0, y0, z1), point(x1, y0, z1), point(x1, y1, z1), point(x0, y1, z1)], shade(color, topFactor));
+}
+function drawHindering(ctx, view, cell) {
+  const spots = [[0.28, 0.3], [0.7, 0.26], [0.3, 0.72], [0.72, 0.7]].map(([u, v], index) => {
+    const size = 0.13 + hash(cell.x, cell.y, index) * 0.07;
+    const x = cell.x + u + (hash(cell.x, cell.y, index + 4) - 0.5) * 0.1, y = cell.y + v + (hash(cell.x, cell.y, index + 8) - 0.5) * 0.1;
+    return { x, y, size, height: 0.12 + hash(cell.x, cell.y, index + 12) * 0.16 };
+  }).sort((a, b) => view.depth(a.x, a.y) - view.depth(b.x, b.y));
+  for (const spot of spots) {
+    drawBox(ctx, view, spot.x - spot.size, spot.y - spot.size, spot.x + spot.size, spot.y + spot.size, cell.top, cell.top + spot.height, HINDERING_BLOCK, 1.1);
+  }
+}
+function drawRamp(ctx, view, ramp) {
+  const { point } = view;
+  const cx2 = ramp.x + 0.5 + ramp.dx * 0.5, cy = ramp.y + 0.5 + ramp.dy * 0.5;
+  const sx = ramp.dy * 0.2, sy = ramp.dx * 0.2, lx = -ramp.dx * 0.38, ly = -ramp.dy * 0.38;
+  const a = [cx2 - sx, cy - sy], b = [cx2 + sx, cy + sy];
+  const c = [cx2 + sx + lx, cy + sy + ly], d = [cx2 - sx + lx, cy - sy + ly];
+  const color = ELEVATION_TILE_COLORS[1];
+  face(ctx, [point(a[0], a[1], ramp.from), point(d[0], d[1], ramp.from), point(a[0], a[1], ramp.to)], shade(color, 0.66));
+  face(ctx, [point(b[0], b[1], ramp.from), point(c[0], c[1], ramp.from), point(b[0], b[1], ramp.to)], shade(color, 0.66));
+  polygon(ctx, [point(a[0], a[1], ramp.to), point(b[0], b[1], ramp.to), point(c[0], c[1], ramp.from), point(d[0], d[1], ramp.from)]);
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.strokeStyle = "#ff0000";
+  ctx.lineWidth = 1.5;
+  ctx.stroke();
+}
+function drawWall(ctx, view, wall) {
+  if (wall.x0 !== wall.x1 && wall.y0 !== wall.y1) {
+    face(ctx, [view.point(wall.x0, wall.y0, wall.z0), view.point(wall.x1, wall.y1, wall.z0), view.point(wall.x1, wall.y1, wall.z1), view.point(wall.x0, wall.y0, wall.z1)], "#30343c");
+    return;
+  }
+  const half = WALL_THICKNESS / 2;
+  const ox = wall.y0 === wall.y1 ? 0 : half, oy = wall.y0 === wall.y1 ? half : 0;
+  const x0 = Math.min(wall.x0, wall.x1) - ox, x1 = Math.max(wall.x0, wall.x1) + ox;
+  const y0 = Math.min(wall.y0, wall.y1) - oy, y1 = Math.max(wall.y0, wall.y1) + oy;
+  const alpha = TRANSLUCENT_WALLS[wall.type];
+  const color = GLASS_COLORS[wall.type] ?? (wall.type === "normal" ? "#30343c" : WALL_COLORS[wall.type] ?? "#30343c");
+  ctx.save();
+  if (alpha) ctx.globalAlpha = alpha;
+  if (wall.type === "door" || wall.type === "door2") {
+    const along = wall.y0 === wall.y1;
+    const post = 0.16;
+    const pieces = along ? [[x0, y0, x0 + post, y1, wall.z0, wall.z1], [x1 - post, y0, x1, y1, wall.z0, wall.z1], [x0, y0, x1, y1, wall.z1 - 0.14, wall.z1]] : [[x0, y0, x1, y0 + post, wall.z0, wall.z1], [x0, y1 - post, x1, y1, wall.z0, wall.z1], [x0, y0, x1, y1, wall.z1 - 0.14, wall.z1]];
+    const doorColor = wall.type === "door2" ? "#dddddd" : "#30343c";
+    pieces.sort((a, b) => view.depth(a[0], a[1]) - view.depth(b[0], b[1]));
+    for (const p of pieces) drawBox(ctx, view, p[0], p[1], p[2], p[3], p[4], p[5], doorColor);
+  } else {
+    drawBox(ctx, view, x0, y0, x1, y1, wall.z0, wall.z1, color, 1.25);
+  }
+  ctx.restore();
+}
+function drawIndoorCurb(ctx, scene, view, cell) {
+  ctx.strokeStyle = INDOOR_EDGE_COLOR;
+  ctx.lineWidth = 2;
+  for (const side of CELL_SIDES) {
+    const neighbor = sceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+    if (neighbor?.environment !== "outdoor") continue;
+    const [x0, y0] = view.point(cell.x + side.ax, cell.y + side.ay, cell.top), [x1, y1] = view.point(cell.x + side.bx, cell.y + side.by, cell.top);
+    ctx.beginPath();
+    ctx.moveTo(x0, y0);
+    ctx.lineTo(x1, y1);
+    ctx.stroke();
+  }
+}
+function drawFootprint(ctx, scene, view, footprint) {
+  const { squares, edges, corners } = footprintOutline(footprint, scene.width, scene.height);
+  if (!squares.length) return;
+  const { top, valid } = footprint;
+  const color = valid ? MOVE_VALID_COLOR : MOVE_INVALID_COLOR;
+  ctx.save();
+  ctx.beginPath();
+  for (const [cx2, cy] of squares) {
+    const points = [[cx2, cy], [cx2 + 1, cy], [cx2 + 1, cy + 1], [cx2, cy + 1]].map(([px, py]) => view.point(px, py, 0));
+    ctx.moveTo(...points[0]);
+    for (const point of points.slice(1)) ctx.lineTo(...point);
+    ctx.closePath();
+  }
+  ctx.globalAlpha = 0.28;
+  ctx.fillStyle = color;
+  ctx.fill();
+  ctx.globalAlpha = 1;
+  ctx.strokeStyle = color;
+  ctx.lineWidth = 2;
+  if (!valid) ctx.setLineDash([6, 4]);
+  const strokeEdges = (z) => {
+    ctx.beginPath();
+    for (const [a, b] of edges) {
+      ctx.moveTo(...view.point(a[0], a[1], z));
+      ctx.lineTo(...view.point(b[0], b[1], z));
+    }
+    ctx.stroke();
+  };
+  strokeEdges(0);
+  if (top > 0.01) {
+    strokeEdges(top);
+    ctx.beginPath();
+    for (const [cx2, cy] of corners) {
+      ctx.moveTo(...view.point(cx2, cy, 0));
+      ctx.lineTo(...view.point(cx2, cy, top));
+    }
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+function drawHighlight(ctx, scene, view, highlight) {
+  if (highlight.footprint) {
+    drawFootprint(ctx, scene, view, highlight.footprint);
+    return;
+  }
+  if (highlight.line) {
+    const { x0, y0, x1, y1 } = highlight.line;
+    const mx = (x0 + x1) / 2, my = (y0 + y1) / 2;
+    const near = [[Math.floor(mx - 0.01), Math.floor(my - 0.01)], [Math.floor(mx + 0.01), Math.floor(my + 0.01)]].map(([x, y]) => sceneCell(scene, x, y)?.top ?? 0);
+    const z = Math.max(...near);
+    const [ax, ay] = view.point(x0, y0, z), [bx, by] = view.point(x1, y1, z);
+    ctx.strokeStyle = "rgba(0,0,0,.6)";
+    ctx.lineWidth = 4;
+    ctx.lineCap = "round";
+    ctx.beginPath();
+    ctx.moveTo(ax, ay);
+    ctx.lineTo(bx, by);
+    ctx.stroke();
+    ctx.lineCap = "butt";
+    return;
+  }
+  const cell = highlight.square && sceneCell(scene, highlight.square.x, highlight.square.y);
+  if (!cell) return;
+  polygon(ctx, [view.point(cell.x, cell.y, cell.top), view.point(cell.x + 1, cell.y, cell.top), view.point(cell.x + 1, cell.y + 1, cell.top), view.point(cell.x, cell.y + 1, cell.top)]);
+  ctx.fillStyle = "rgba(0,0,0,.16)";
+  ctx.fill();
+  ctx.strokeStyle = "rgba(0,0,0,.6)";
+  ctx.lineWidth = 2;
+  ctx.stroke();
+}
+function drawMapScene(ctx, scene, view, texture, highlight, { tufts = true } = {}) {
+  const pad = 0.35;
+  polygon(ctx, [view.point(-pad, -pad, BASE_Z - 0.16), view.point(scene.width + pad, -pad, BASE_Z - 0.16), view.point(scene.width + pad, scene.height + pad, BASE_Z - 0.16), view.point(-pad, scene.height + pad, BASE_Z - 0.16)]);
+  ctx.fillStyle = "rgba(0,0,0,.14)";
+  ctx.fill();
+  const shadowDepth = 0.24;
+  const shadows = [[0, 0, shadowDepth, 0], [1, 0, 1 - shadowDepth, 0], [0, 0, 0, shadowDepth], [0, 1, 0, 1 - shadowDepth]].map(([x0, y0, x1, y1]) => {
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    gradient.addColorStop(0, "rgba(0,0,0,.26)");
+    gradient.addColorStop(1, "rgba(0,0,0,0)");
+    return gradient;
+  });
+  const rampsByCell = /* @__PURE__ */ new Map();
+  for (const ramp of scene.ramps) {
+    const key = ramp.y * scene.width + ramp.x;
+    rampsByCell.set(key, [...rampsByCell.get(key) ?? [], ramp]);
+  }
+  const mixed = scene.cells.some((cell) => cell.environment === "indoor") && scene.cells.some((cell) => cell.environment === "outdoor");
+  const items = [];
+  for (const cell of scene.cells) {
+    items.push({
+      depth: view.depth(cell.x + 0.5, cell.y + 0.5),
+      draw() {
+        drawCellSides(ctx, scene, view, cell);
+        drawCellTop(ctx, scene, view, cell, texture, shadows);
+        if (mixed && cell.environment === "indoor") drawIndoorCurb(ctx, scene, view, cell);
+        for (const ramp of rampsByCell.get(cell.y * scene.width + cell.x) ?? []) drawRamp(ctx, view, ramp);
+        if (tufts && cell.terrain === "hindering") drawHindering(ctx, view, cell);
+      }
+    });
+  }
+  for (const wall of scene.walls) {
+    items.push({ depth: view.depth((wall.x0 + wall.x1) / 2, (wall.y0 + wall.y1) / 2), draw: () => drawWall(ctx, view, wall) });
+  }
+  items.sort((a, b) => a.depth - b.depth);
+  for (const item of items) item.draw();
+  ctx.strokeStyle = "#111";
+  ctx.lineWidth = 2;
+  for (const line of scene.ziplines) {
+    const [ax, ay] = view.point(line.x0, line.y0, line.z), [bx, by] = view.point(line.x1, line.y1, line.z);
+    ctx.beginPath();
+    ctx.moveTo(ax, ay);
+    ctx.lineTo(bx, by);
+    ctx.stroke();
+  }
+  if (highlight) drawHighlight(ctx, scene, view, highlight);
+}
+var MAP_THUMBNAIL_HEIGHT = 192;
+function renderMapThumbnail(json, height = MAP_THUMBNAIL_HEIGHT) {
+  if (!json?.width || !json?.height) return null;
+  const full = document.createElement("canvas");
+  full.width = json.width * TILE_SIZE;
+  full.height = json.height * TILE_SIZE;
+  const fctx = full.getContext("2d");
+  if (!fctx) return null;
+  new HCMap(json).draw(fctx);
+  const scale = height / full.height;
+  const thumb = document.createElement("canvas");
+  thumb.width = Math.max(1, Math.round(full.width * scale));
+  thumb.height = height;
+  const tctx = thumb.getContext("2d");
+  if (!tctx) return null;
+  tctx.imageSmoothingQuality = "high";
+  tctx.drawImage(full, 0, 0, thumb.width, thumb.height);
+  return thumb.toDataURL("image/png");
+}
+var MapBoardView = forwardRef(function MapBoardView2({ map, canvasLabel, selection, onInspect, onLeave, onDrawError, className, style, ...rest }, ref) {
+  const canvasRef = useRef(null);
+  const failed = useRef(onDrawError);
+  failed.current = onDrawError;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    try {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      new HCMap(map).draw(ctx);
+    } catch {
+      failed.current?.();
+    }
+  }, [map]);
+  function pointer(event) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    onInspect?.((event.clientX - bounds.left) / bounds.width * map.width, (event.clientY - bounds.top) / bounds.height * map.height, event.clientX, event.clientY);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cx("hc-ui-map-board", className),
+      style: { aspectRatio: `${map.width} / ${map.height}`, ...style },
+      ...rest,
+      onPointerMove: (event) => {
+        if (event.pointerType !== "touch") pointer(event);
+      },
+      onPointerDown: pointer,
+      onPointerLeave: (event) => {
+        if (event.pointerType !== "touch") onLeave?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: map.width * TILE_SIZE, height: map.height * TILE_SIZE, role: "img", "aria-label": canvasLabel }),
+        selection && /* @__PURE__ */ jsx("svg", { className: "hc-ui-map-board__selection", viewBox: `0 0 ${map.width} ${map.height}`, "aria-hidden": "true", children: selection.line ? /* @__PURE__ */ jsx("line", { x1: selection.line.x0, y1: selection.line.y0, x2: selection.line.x1, y2: selection.line.y1 }) : /* @__PURE__ */ jsx("rect", { x: selection.square.x, y: selection.square.y, width: "1", height: "1" }) })
+      ]
+    }
+  );
+});
+function MapBoardPlaceholder({ label }) {
+  return /* @__PURE__ */ jsx("div", { className: "hc-ui-map-board", "data-loading": "", role: "status", "aria-busy": "true", children: /* @__PURE__ */ jsx("span", { className: "hc-ui-map-board__status", children: label }) });
+}
+function MapSwatch({ fill, edge, children, lightText }) {
+  return /* @__PURE__ */ jsx("span", { className: "hc-ui-map-swatch", "data-light-text": flag(lightText), style: { backgroundColor: fill, borderColor: edge }, "aria-hidden": "true", children });
+}
+function MapSquareInfo({ square }) {
+  const { coordinate, terrain, elevation, environment, environmentNote, notes = [] } = square;
+  return /* @__PURE__ */ jsxs("div", { className: "hc-ui-map-tooltip__square", children: [
+    coordinate && /* @__PURE__ */ jsx("span", { className: "hc-ui-map-tooltip__coordinate", children: coordinate }),
+    /* @__PURE__ */ jsxs("span", { className: "hc-ui-map-tooltip__row", "data-kind": "terrain", children: [
+      /* @__PURE__ */ jsx(MapSwatch, { fill: terrain.fill, edge: terrain.edge }),
+      terrain.label
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "hc-ui-map-tooltip__row", children: [
+      /* @__PURE__ */ jsx(MapSwatch, { fill: elevation.fill, edge: elevation.edge, lightText: elevation.lightText, children: elevation.level }),
+      elevation.label
+    ] }),
+    environmentNote !== void 0 ? /* @__PURE__ */ jsx("span", { className: "hc-ui-map-tooltip__row", children: environmentNote }) : environment,
+    notes.map((note, index) => /* @__PURE__ */ jsx("span", { className: "hc-ui-map-tooltip__note", children: note }, index))
+  ] });
+}
+function MapTooltipView({ id, anchor, title, wallColor, squares }) {
+  const ref = useRef(null);
+  const [position, setPosition] = useState({ left: 0, top: 0 });
+  useLayoutEffect(() => {
+    const bounds = ref.current?.getBoundingClientRect();
+    if (!bounds) return;
+    setPosition({ left: Math.max(8, Math.min(anchor.x + 14, window.innerWidth - bounds.width - 8)), top: Math.max(8, anchor.y + 18 + bounds.height > window.innerHeight - 8 ? anchor.y - bounds.height - 14 : anchor.y + 18) });
+  }, [anchor]);
+  return /* @__PURE__ */ jsxs("div", { ref, id, role: "tooltip", className: "hc-ui-map-tooltip", style: position, children: [
+    /* @__PURE__ */ jsxs("strong", { className: "hc-ui-map-tooltip__title", children: [
+      wallColor && /* @__PURE__ */ jsx("span", { className: "hc-ui-map-swatch", "data-wall": "", style: { backgroundColor: wallColor }, "aria-hidden": "true" }),
+      title
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hc-ui-map-tooltip__squares", children: squares.map((square, index) => /* @__PURE__ */ jsx(MapSquareInfo, { square }, index)) })
+  ] });
+}
+function MapLegendView({ items, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: "hc-ui-map-legend", children: [
+    items.map((item) => /* @__PURE__ */ jsxs("span", { className: "hc-ui-map-legend__key", children: [
+      /* @__PURE__ */ jsx(MapSwatch, { fill: item.fill, edge: item.edge }),
+      item.label
+    ] }, item.label)),
+    children
+  ] });
+}
+function mapEnvironments(types) {
+  return [...new Set(types.flatMap((type) => {
+    const value = type.toLowerCase().replace(/[^a-z]/g, "");
+    return value === "indooroutdoor" ? ["indoor", "outdoor"] : value === "indoor" || value === "outdoor" ? [value] : [];
+  }))];
+}
+function MapEnvironmentView({ types, icons, labels, className }) {
+  const environments = mapEnvironments(types);
+  if (!environments.length) return null;
+  return /* @__PURE__ */ jsx("span", { className: cx("hc-ui-map-environment", className), children: environments.map((environment) => /* @__PURE__ */ jsxs("span", { className: "hc-ui-map-environment__item", children: [
+    /* @__PURE__ */ jsx("img", { src: icons[environment], alt: "", width: "18", height: "18" }),
+    /* @__PURE__ */ jsx("span", { children: labels[environment] })
+  ] }, environment)) });
+}
 export {
+  AvatarView,
+  BACK_TABLE_HEIGHT,
+  BASE_Z,
+  BYSTANDER_DIAL_STEP,
   Button,
+  CARD_HEIGHT,
+  CARD_WIDTH,
+  CELL_SIDES,
+  COMBAT_DIAL_STATS,
   Checkbox,
   Chip,
+  CombatDialView,
   CommandPalette,
+  DEFAULT_CAMERA,
   Dialog,
+  ELEVATION_EDGE_COLOR,
+  ELEVATION_TILE_COLORS,
+  EquipmentIcon,
   Field,
   FilterBar,
+  HCMap,
+  INDOOR_EDGE_COLOR,
   IconButton,
+  LEVEL_HEIGHT,
   ListRow,
+  MAP_THUMBNAIL_HEIGHT,
+  MINI_DIAL_STATS,
+  MapBoardPlaceholder,
+  MapBoardView,
+  MapEnvironmentView,
+  MapLegendView,
+  MapSwatch,
+  MapTooltipView,
   Menu,
   MenuItem,
   MenuItemCheckbox,
@@ -1452,16 +3266,54 @@ export {
   MenuRadioGroup,
   MenuSeparator,
   Meter,
+  MiniDialView,
+  PHYSICAL_CARD_STATS,
   PageHeader,
   PanelHeader,
+  PhysicalCardFocusView,
+  PhysicalCardView,
   Popover,
+  PowerIconView,
   SegmentedControl,
+  SetIconView,
   Sheet,
   SheetChips,
   SheetOptions,
   Skeleton,
   SortMenu,
+  SpecialIconView,
+  StatGlyphView,
+  StatIcon,
   Surface,
+  TERRAIN_EDGE_COLORS,
+  TERRAIN_TILE_COLORS,
+  TILE_SIZE,
+  TILT_RANGE,
   Table,
-  placePopup
+  WALL_COLORS,
+  ZOOM_RANGE,
+  backCount,
+  buildMapScene,
+  clamp,
+  clampPan,
+  devicePosition,
+  drawMapScene,
+  elevationLevel,
+  footprintOutline,
+  inspectMap,
+  makeProjection,
+  mapEnvironments,
+  mapMaxLevel,
+  mapSquare,
+  nextDistribution,
+  pickScene,
+  placePopup,
+  renderMapThumbnail,
+  requestMotionAccess,
+  sceneCell,
+  squareCoordinate,
+  tiltAt,
+  tiltStyles,
+  useImageChain,
+  zoomCamera
 };