@ntmats/hc-ui 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,8 +1,13 @@
+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 { forwardRef, useId, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function Surface({ tone = "content", className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone });
+import { cloneElement, createContext, forwardRef, Fragment, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function Surface({ tone = "content", radius, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone, "data-radius": radius });
 }
 function SegmentedControl({
   label,
@@ -12,12 +17,24 @@ function SegmentedControl({
   density = "comfortable",
   orientation = "horizontal",
   hideLabels = false,
+  indicator = "static",
+  equalWidth = false,
+  optionWidth,
   className,
+  style,
   ...props
 }) {
   const buttons = useRef([]);
   const selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);
   const tabStop = selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled);
+  const slide = indicator === "slide";
+  const equal = slide || equalWidth || optionWidth !== void 0;
+  const knobIndex = options.findIndex((option) => option.value === value);
+  const layout = {
+    ...equal ? { "--hc-segmented-count": options.length } : {},
+    ...slide ? { "--hc-segmented-index": Math.max(knobIndex, 0) } : {},
+    ...optionWidth !== void 0 ? { "--hc-segmented-option-width": `${optionWidth}px` } : {}
+  };
   const move = (index, key) => {
     if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
     const direction = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1;
@@ -36,7 +53,7 @@ function SegmentedControl({
     buttons.current[next]?.focus();
     return true;
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ...props,
@@ -47,35 +64,41 @@ function SegmentedControl({
       "data-density": density,
       "data-orientation": orientation,
       "data-labels": hideLabels ? "hidden" : void 0,
-      children: options.map((option, index) => {
-        const selected = option.value === value;
-        return /* @__PURE__ */ jsxs(
-          "button",
-          {
-            ref: (element) => {
-              buttons.current[index] = element;
-            },
-            type: "button",
-            role: "radio",
-            "aria-checked": selected,
-            "aria-label": option.label,
-            title: hideLabels ? option.label : void 0,
-            disabled: option.disabled,
-            tabIndex: !option.disabled && index === tabStop ? 0 : -1,
-            className: "hc-ui-segmented__option",
-            "data-selected": selected || void 0,
-            onClick: () => !option.disabled && onChange(option.value),
-            onKeyDown: (event) => {
-              if (move(index, event.key)) event.preventDefault();
+      "data-indicator": slide ? "slide" : void 0,
+      "data-equal-width": equal || void 0,
+      style: { ...layout, ...style },
+      children: [
+        slide && knobIndex >= 0 && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__indicator", "aria-hidden": "true" }),
+        options.map((option, index) => {
+          const selected = option.value === value;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (element) => {
+                buttons.current[index] = element;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": selected,
+              "aria-label": option.label,
+              title: hideLabels ? option.label : void 0,
+              disabled: option.disabled,
+              tabIndex: !option.disabled && index === tabStop ? 0 : -1,
+              className: "hc-ui-segmented__option",
+              "data-selected": selected || void 0,
+              onClick: () => !option.disabled && onChange(option.value),
+              onKeyDown: (event) => {
+                if (move(index, event.key)) event.preventDefault();
+              },
+              children: [
+                option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__icon", "aria-hidden": "true", children: option.icon }),
+                !hideLabels && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__label", children: option.label })
+              ]
             },
-            children: [
-              option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__icon", "aria-hidden": "true", children: option.icon }),
-              !hideLabels && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__label", children: option.label })
-            ]
-          },
-          option.value
-        );
-      })
+            option.value
+          );
+        })
+      ]
     }
   );
 }
@@ -106,7 +129,7 @@ var Button = forwardRef(function Button2({ variant = "secondary", size = "md", i
     }
   );
 });
-var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", tone = "primary", selected, type = "button", title, className, ...props }, ref) {
+var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", tone = "primary", variant = "muted", shape = "circle", selected, iconKey, type = "button", title, className, ...props }, ref) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -119,16 +142,63 @@ var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", ton
       className: classes("hc-ui-icon-button", className),
       "data-size": size,
       "data-tone": tone,
-      children: /* @__PURE__ */ jsx("span", { className: "hc-ui-icon-button__icon", "aria-hidden": "true", children: icon })
+      "data-variant": variant === "muted" ? void 0 : variant,
+      "data-shape": shape === "circle" ? void 0 : shape,
+      children: /* @__PURE__ */ jsx("span", { className: "hc-ui-icon-button__icon", "aria-hidden": "true", "data-swap": iconKey === void 0 ? void 0 : "", children: icon }, iconKey)
     }
   );
 });
-var Chip = forwardRef(function Chip2({ selected, icon, type = "button", className, children, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), children: [
+var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var CHEVRON_DOWN = "M6 9L12 15L18 9";
+var XMARK = "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426";
+var visible = (node) => node !== void 0 && node !== null && node !== false && node !== "";
+var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, chevron, onClear, clearLabel, type = "button", className, children, ...props }, ref) {
+  const popup = props["aria-haspopup"];
+  const withChevron = chevron ?? (popup !== void 0 && popup !== false && popup !== "false");
+  const look = {
+    "data-size": size === "md" ? void 0 : size,
+    "data-variant": variant === "outline" ? void 0 : variant,
+    "data-applied": applied || void 0
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
-    children
+    children,
+    visible(count) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__count", children: count }),
+    visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", children: badge }),
+    withChevron && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__chevron", "aria-hidden": "true", children: glyph(size === "xs" ? 12 : 14, CHEVRON_DOWN) })
+  ] });
+  if (!onClear) {
+    return /* @__PURE__ */ jsx("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), ...look, children: content });
+  }
+  const { style, id, onClick, disabled, ...rest } = props;
+  return /* @__PURE__ */ jsxs("span", { className: classes("hc-ui-chip", className), style, ...look, "data-clearable": "", "data-selected": selected || void 0, "data-disabled": disabled || void 0, children: [
+    onClick ? /* @__PURE__ */ jsx("button", { ...rest, id, ref, type, disabled, "aria-pressed": selected, className: "hc-ui-chip__main", onClick, children: content }) : /* @__PURE__ */ jsx("span", { id, className: "hc-ui-chip__main", children: content }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-chip__clear", "aria-label": clearLabel, title: clearLabel, disabled, onClick: onClear, children: glyph(12, XMARK) })
   ] });
 });
+var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layout = "auto", density = "comfortable", sticky = false, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref,
+      role: "group",
+      "aria-label": label,
+      className: classes("hc-ui-filter-bar", className),
+      "data-layout": layout,
+      "data-density": density === "comfortable" ? void 0 : density,
+      "data-sticky": sticky || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-filter-bar__line", children: [
+          start && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__start", children: start }),
+          /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__row", children }),
+          end && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__end", children: end })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: "hc-ui-filter-bar__footer", children: footer })
+      ]
+    }
+  );
+});
 var Field = forwardRef(function Field2({ label, hideLabel = false, density = "comfortable", icon, end, hint, error, id, className, disabled, "aria-describedby": describedBy, ...props }, ref) {
   const generated = useId();
   const inputId = id ?? generated;
@@ -169,12 +239,3081 @@ function Skeleton({ width, height, circle = false, className, style, ...props })
     }
   );
 }
+var finite = (number) => Number.isFinite(number) ? number : 0;
+var Meter = forwardRef(function Meter2({ value, max, label, valueText, decorative = false, thickness = 4, track = "muted", cap = "round", overflow = "clamp", tone = "auto", animated = false, className, ...props }, ref) {
+  const amount = Math.max(0, finite(value));
+  const limit = Math.max(0, finite(max));
+  const over = tone === "over" || tone === "auto" && amount > limit;
+  const scale = overflow === "mark" ? Math.max(limit, amount, 1) : limit;
+  const share = scale > 0 ? Math.min(100, amount / scale * 100) : amount > 0 ? 100 : 0;
+  const marker = overflow === "mark" && amount > limit ? limit / scale * 100 : null;
+  const semantics = decorative ? { "aria-hidden": true } : {
+    role: "meter",
+    "aria-label": label,
+    "aria-valuemin": 0,
+    "aria-valuemax": limit,
+    // ARIA keeps aria-valuenow inside the range; the text carries the real amount.
+    "aria-valuenow": Math.min(amount, limit),
+    "aria-valuetext": valueText ?? `${finite(value)} / ${finite(max)}`
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      ...semantics,
+      ref,
+      className: classes("hc-ui-meter", className),
+      "data-thickness": thickness,
+      "data-track": track,
+      "data-cap": cap,
+      "data-tone": over ? "over" : void 0,
+      "data-animated": animated || void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hc-ui-meter__fill", style: { width: `${share}%` } }),
+        marker !== null && /* @__PURE__ */ jsx("span", { className: "hc-ui-meter__limit", style: { left: `${marker}%` } })
+      ]
+    }
+  );
+});
+var checkboxIcon = (className, d) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", strokeWidth: 2.4, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var Checkbox = forwardRef(function Checkbox2({ size = "md", indeterminate = false, className, ...props }, ref) {
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => inputRef.current);
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsxs("span", { className: classes("hc-ui-checkbox", className), "data-size": size, children: [
+    /* @__PURE__ */ jsx("input", { ...props, ref: inputRef, type: "checkbox", className: "hc-ui-checkbox__input" }),
+    /* @__PURE__ */ jsxs("span", { className: "hc-ui-checkbox__box", "aria-hidden": "true", children: [
+      checkboxIcon("hc-ui-checkbox__mark", "M5 13L9 17L19 7"),
+      checkboxIcon("hc-ui-checkbox__mixed", "M6 12H18")
+    ] })
+  ] });
+});
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+var scrollLocks = 0;
+var restoreScroll = () => {
+};
+function lockScroll() {
+  if (scrollLocks++ === 0) {
+    const root = document.documentElement;
+    const { overflow, scrollbarGutter } = root.style;
+    const hasScrollbar = window.innerWidth > root.clientWidth;
+    root.style.overflow = "hidden";
+    if (hasScrollbar) root.style.scrollbarGutter = "stable";
+    restoreScroll = () => {
+      root.style.overflow = overflow;
+      root.style.scrollbarGutter = scrollbarGutter;
+    };
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--scrollLocks === 0) restoreScroll();
+  };
+}
+function DialogMount({ onMount }) {
+  useIsomorphicLayoutEffect(onMount, []);
+  return null;
+}
+var closeGlyph = /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var outside = (element, x, y) => {
+  const box = element.getBoundingClientRect();
+  return x < box.left || x > box.right || y < box.top || y > box.bottom;
+};
+var Dialog = forwardRef(function Dialog2({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  actions,
+  closeLabel,
+  closeIcon,
+  size = "md",
+  dismissible = true,
+  className,
+  onClick,
+  onPointerDown,
+  "aria-describedby": describedBy,
+  ...props
+}, ref) {
+  const dialogRef = useRef(null);
+  const setRef = useCallback((node) => {
+    dialogRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  const id = useId();
+  const titleId = `${id}-title`;
+  const descriptionId = description ? `${id}-description` : void 0;
+  const [mounted, setMounted] = useState(open);
+  const [closing, setClosing] = useState(false);
+  if (open && (!mounted || closing)) {
+    setMounted(true);
+    setClosing(false);
+  }
+  if (!open && mounted && !closing) setClosing(true);
+  const latest = useRef({ open, onClose, dismissible, closing });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onClose, dismissible, closing };
+  });
+  const keepFocus = useRef(null);
+  const handleMount = useCallback(() => {
+    const dialog = document.getElementById(titleId)?.closest("dialog");
+    if (!dialog) return () => {
+    };
+    const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    if (!dialog.open) dialog.showModal();
+    const kept = keepFocus.current;
+    keepFocus.current = null;
+    if (kept instanceof HTMLElement && dialog.contains(kept)) kept.focus();
+    const unlock = lockScroll();
+    return () => {
+      unlock();
+      keepFocus.current = dialog.contains(document.activeElement) ? document.activeElement : null;
+      if (dialog.open) dialog.close();
+      queueMicrotask(() => {
+        const active = document.activeElement;
+        const lost = !active || active === document.body || dialog.contains(active);
+        if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
+      });
+    };
+  }, [titleId]);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!closing || !dialog) return;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setMounted(false);
+      setClosing(false);
+    };
+    const animations = typeof dialog.getAnimations === "function" ? dialog.getAnimations({ subtree: true }).filter((animation) => {
+      const effect = animation.effect;
+      return effect?.target === dialog && effect.getComputedTiming().endTime !== Infinity;
+    }) : [];
+    if (animations.length) Promise.all(animations.map((animation) => animation.finished)).then(finish, finish);
+    else finish();
+    return () => {
+      done = true;
+    };
+  }, [closing]);
+  const ownEvent = (event) => event.target === event.currentTarget;
+  const handleCancel = (event) => {
+    if (!ownEvent(event)) return;
+    event.preventDefault();
+    if (latest.current.dismissible && !latest.current.closing) latest.current.onClose();
+  };
+  const handleNativeClose = (event) => {
+    const dialog = event.currentTarget;
+    if (!ownEvent(event) || dialog.open || !latest.current.open || latest.current.closing) return;
+    if (latest.current.dismissible) latest.current.onClose();
+    window.setTimeout(() => {
+      if (latest.current.open && !latest.current.closing && dialog.isConnected && !dialog.open) dialog.showModal();
+    }, 0);
+  };
+  const pressedBackdrop = useRef(false);
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    pressedBackdrop.current = ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    const fromBackdrop = pressedBackdrop.current && ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+    pressedBackdrop.current = false;
+    if (fromBackdrop && latest.current.dismissible && !latest.current.closing) latest.current.onClose();
+  };
+  if (!mounted) return null;
+  const hasBody = Boolean(description) || children !== void 0 && children !== null && children !== false;
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: setRef,
+      className: classes("hc-ui-dialog", className),
+      "data-size": size,
+      "data-closing": closing || void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": classes(descriptionId, describedBy) || void 0,
+      onCancel: handleCancel,
+      onClose: handleNativeClose,
+      onPointerDown: handlePointerDown,
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(DialogMount, { onMount: handleMount }),
+        /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__header", children: [
+          /* @__PURE__ */ jsx("h2", { className: "hc-ui-dialog__title", id: titleId, children: title }),
+          closeLabel && /* @__PURE__ */ jsx(IconButton, { className: "hc-ui-dialog__close", label: closeLabel, icon: closeIcon ?? closeGlyph, size: "sm", tone: "secondary", onClick: () => latest.current.onClose() })
+        ] }),
+        hasBody && /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__body", children: [
+          description && /* @__PURE__ */ jsx("p", { className: "hc-ui-dialog__description", id: descriptionId, children: description }),
+          children
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-dialog__actions", children: actions })
+      ]
+    }
+  );
+});
+var SHEET_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
+var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag]';
+function useSheetDrag(sheet, latest) {
+  useEffect(() => {
+    const el = sheet;
+    if (!el) return;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let startX = 0;
+    let startY = 0;
+    let lastY = 0;
+    let lastT = 0;
+    let velocity = 0;
+    let tracking = false;
+    let dragging = false;
+    let inHandle = false;
+    let scroller = null;
+    const timers = /* @__PURE__ */ new Set();
+    const later = (run, ms) => {
+      const id = window.setTimeout(() => {
+        timers.delete(id);
+        run();
+      }, ms);
+      timers.add(id);
+    };
+    const expanded = () => el.hasAttribute("data-expanded");
+    const findScroller = (node) => {
+      while (node && node !== el.parentElement) {
+        const overflowY = getComputedStyle(node).overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight + 1) return node;
+        if (node === el) break;
+        node = node.parentElement;
+      }
+      return null;
+    };
+    const settle = () => {
+      el.style.transition = reduce.matches ? "none" : `translate 320ms ${SHEET_EASE}`;
+      el.style.translate = "";
+      later(() => {
+        el.style.transition = "";
+      }, 340);
+    };
+    const onStart = (event) => {
+      if (event.touches.length !== 1 || getComputedStyle(el).getPropertyValue("--hc-sheet-drag").trim() !== "on") return;
+      const touch = event.touches[0];
+      const target = event.target;
+      if (target === el && outside(el, touch.clientX, touch.clientY)) return;
+      if (target.closest?.("dialog") !== el || target.closest(NO_DRAG)) return;
+      startX = touch.clientX;
+      startY = lastY = touch.clientY;
+      lastT = performance.now();
+      velocity = 0;
+      dragging = false;
+      tracking = true;
+      inHandle = Boolean(target.closest?.("[data-hc-sheet-handle]")) || touch.clientY - el.getBoundingClientRect().top < 64;
+      scroller = inHandle ? null : findScroller(target);
+    };
+    const onMove = (event) => {
+      if (!tracking) return;
+      const touch = event.touches[0];
+      const dy = touch.clientY - startY;
+      const dx = touch.clientX - startX;
+      if (!dragging) {
+        if (Math.abs(dx) > 8 && Math.abs(dx) > Math.abs(dy)) {
+          tracking = false;
+          return;
+        }
+        if (dy < -4 && !(inHandle && !expanded())) {
+          tracking = false;
+          return;
+        }
+        if (Math.abs(dy) < 8) return;
+        if (scroller && scroller.scrollTop > 0) {
+          tracking = false;
+          return;
+        }
+        dragging = true;
+        startY = touch.clientY;
+        el.style.transition = "none";
+      }
+      if (event.cancelable) event.preventDefault();
+      const now = performance.now();
+      velocity = (touch.clientY - lastY) / Math.max(1, now - lastT);
+      lastY = touch.clientY;
+      lastT = now;
+      const offset = touch.clientY - startY;
+      el.style.translate = `0 ${offset > 0 ? offset : offset / 6}px`;
+    };
+    const onEnd = () => {
+      if (!tracking) return;
+      tracking = false;
+      if (!dragging) return;
+      dragging = false;
+      const dy = lastY - startY;
+      const height = el.getBoundingClientRect().height || 1;
+      if (dy < -40 || velocity < -0.5) {
+        el.setAttribute("data-expanded", "");
+        settle();
+        return;
+      }
+      const goingDown = dy > height * 0.2 || velocity > 0.5 && dy > 20;
+      if (goingDown && expanded()) {
+        el.removeAttribute("data-expanded");
+        settle();
+        return;
+      }
+      if (!goingDown || !latest.current.dismissible) {
+        settle();
+        return;
+      }
+      el.style.transition = reduce.matches ? "none" : `translate 220ms ${SHEET_EASE}`;
+      el.style.translate = "0 105%";
+      el.setAttribute("data-dismissing", "");
+      later(() => latest.current.onClose(), reduce.matches ? 0 : 200);
+      later(() => {
+        if (!el.isConnected || el.hasAttribute("data-closing")) return;
+        el.removeAttribute("data-dismissing");
+        el.style.transition = reduce.matches ? "none" : `translate 320ms ${SHEET_EASE}`;
+        el.style.translate = "";
+      }, 900);
+    };
+    el.addEventListener("touchstart", onStart, { passive: true });
+    el.addEventListener("touchmove", onMove, { passive: false });
+    el.addEventListener("touchend", onEnd);
+    el.addEventListener("touchcancel", onEnd);
+    return () => {
+      el.removeEventListener("touchstart", onStart);
+      el.removeEventListener("touchmove", onMove);
+      el.removeEventListener("touchend", onEnd);
+      el.removeEventListener("touchcancel", onEnd);
+      timers.forEach((id) => window.clearTimeout(id));
+    };
+  }, [sheet, latest]);
+}
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, onClose, className, style, ...props }, ref) {
+  const [node, setNode] = useState(null);
+  const setRef = useCallback((element) => {
+    setNode(element);
+    setRefs(element, ref);
+  }, [ref]);
+  const latest = useRef({ onClose, dismissible });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { onClose, dismissible };
+  });
+  useSheetDrag(node, latest);
+  const sized = width === 440 ? style : { ...style, "--hc-sheet-width": `${width}px` };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ...props,
+      ref: setRef,
+      size: "md",
+      actions: footer,
+      dismissible,
+      onClose,
+      className: classes("hc-ui-sheet", className),
+      style: sized,
+      "data-presentation": presentation
+    }
+  );
+});
+function useRovingRadios(options, value) {
+  const buttons = useRef([]);
+  const [focusIndex, setFocusIndex] = useState(null);
+  const chosen = options.findIndex((option) => option.value === value && !option.disabled);
+  const fallback = chosen >= 0 ? chosen : options.findIndex((option) => !option.disabled);
+  const tabStop = focusIndex !== null && options[focusIndex] && !options[focusIndex].disabled ? focusIndex : fallback;
+  const onKeyDown = (index) => (event) => {
+    const enabled = options.map((option, at) => option.disabled ? -1 : at).filter((at) => at >= 0);
+    if (!enabled.length) return;
+    const position = enabled.indexOf(index);
+    let next;
+    if (event.key === "ArrowDown" || event.key === "ArrowRight") next = enabled[(position + 1) % enabled.length];
+    else if (event.key === "ArrowUp" || event.key === "ArrowLeft") next = enabled[(position - 1 + enabled.length) % enabled.length];
+    else if (event.key === "Home") next = enabled[0];
+    else if (event.key === "End") next = enabled[enabled.length - 1];
+    else return;
+    event.preventDefault();
+    setFocusIndex(next);
+    buttons.current[next]?.focus();
+  };
+  const item = (index) => ({
+    ref: (element) => {
+      buttons.current[index] = element;
+    },
+    tabIndex: index === tabStop ? 0 : -1,
+    onKeyDown: onKeyDown(index),
+    onFocus: () => setFocusIndex(index)
+  });
+  return item;
+}
+function SheetOptions({ label, options, value, onChange, variant = "card", className, ...props }) {
+  const item = useRovingRadios(options, value);
+  const list = variant === "list";
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-options", className), role: "radiogroup", "aria-label": label, "data-variant": list ? "list" : void 0, children: options.map((option, index) => {
+    const on = option.value === value;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...item(index),
+        type: "button",
+        role: "radio",
+        "aria-checked": on,
+        disabled: option.disabled,
+        className: "hc-ui-sheet-options__row",
+        "data-selected": on || void 0,
+        onClick: () => onChange(option.value),
+        children: [
+          option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__icon", "aria-hidden": "true", children: option.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "hc-ui-sheet-options__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__label", children: option.label }),
+            option.hint && /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__hint", children: option.hint })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__check", "aria-hidden": "true", children: on && /* @__PURE__ */ jsx("svg", { width: list ? 20 : 18, height: list ? 20 : 18, viewBox: "0 0 24 24", fill: "none", strokeWidth: list ? 1.8 : 2.4, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M5 13L9 17L19 7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+        ]
+      },
+      option.value
+    );
+  }) });
+}
+function SheetChips({ label, options, value, onChange, className, ...props }) {
+  const item = useRovingRadios(options, value);
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-chips", className), role: "radiogroup", "aria-label": label, children: options.map((option, index) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...item(index),
+      type: "button",
+      role: "radio",
+      "aria-checked": option.value === value,
+      disabled: option.disabled,
+      className: "hc-ui-chip",
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+}
+var GAP = 4;
+function boundaryOf(anchor, clip) {
+  const box = { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+  if (!clip) return box;
+  for (let node = anchor.parentElement; node && node !== document.documentElement; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    if (style.overflowX === "visible" && style.overflowY === "visible") continue;
+    const rect = node.getBoundingClientRect();
+    box.top = Math.max(box.top, rect.top);
+    box.left = Math.max(box.left, rect.left);
+    box.right = Math.min(box.right, rect.right);
+    box.bottom = Math.min(box.bottom, rect.bottom);
+  }
+  return box;
+}
+function placePopup(trigger, size, boundary, side, align) {
+  const room = { bottom: boundary.bottom - trigger.bottom - GAP, top: trigger.top - boundary.top - GAP };
+  const other = side === "bottom" ? "top" : "bottom";
+  const finalSide = size.height > room[side] && room[other] > room[side] ? other : side;
+  const fits = (edge) => edge === "end" ? trigger.right - size.width >= boundary.left : trigger.left + size.width <= boundary.right;
+  const finalAlign = !fits(align) && fits(align === "end" ? "start" : "end") ? align === "end" ? "start" : "end" : align;
+  return { side: finalSide, align: finalAlign };
+}
+var layers = [];
+function themeOf(element) {
+  const scoped = element?.closest("[data-theme]")?.getAttribute("data-theme");
+  if (scoped === "light" || scoped === "dark") return scoped;
+  const classed = element?.closest(".dark, .light");
+  return classed ? classed.classList.contains("dark") ? "dark" : "light" : void 0;
+}
+var setRefs = (node, ...refs) => {
+  for (const ref of refs) {
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }
+};
+function usePopup({ kind, trigger, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "end", portal = false, theme, contentId, onShown }) {
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const generated = useId();
+  const id = contentId ?? `${generated}-popup`;
+  const triggerRef = useRef(null);
+  const anchorRef = useRef(null);
+  const contentRef = useRef(null);
+  const focusAfter = useRef("none");
+  const reason = useRef("first");
+  const [placement, setPlacement] = useState({ side, align });
+  const [container, setContainer] = useState(null);
+  const latest = useRef({ open, onOpenChange, onShown });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onOpenChange, onShown };
+  });
+  const setOpen = useCallback((next, after = "none") => {
+    if (next === latest.current.open) return;
+    if (!next) focusAfter.current = after;
+    if (openProp === void 0) setUncontrolled(next);
+    latest.current.onOpenChange?.(next);
+  }, [openProp]);
+  const close = useCallback((after = "trigger") => setOpen(false, after), [setOpen]);
+  const show = (why) => {
+    reason.current = why;
+    setOpen(true);
+  };
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !portal) {
+      setContainer(null);
+      return;
+    }
+    const element = portal instanceof HTMLElement ? portal : triggerRef.current?.closest("dialog[open]") ?? document.body;
+    setContainer({ element, theme: theme ?? themeOf(triggerRef.current) });
+  }, [open, portal, theme]);
+  const place = useCallback(() => {
+    const content = contentRef.current;
+    const anchor = anchorRef.current;
+    if (!content || !anchor) return;
+    const triggerBox = (triggerRef.current ?? anchor).getBoundingClientRect();
+    const size = { width: content.offsetWidth, height: content.offsetHeight };
+    if (!portal) {
+      setPlacement(placePopup(anchor.getBoundingClientRect(), size, boundaryOf(anchor, true), side, align));
+      return;
+    }
+    const next = placePopup(triggerBox, size, boundaryOf(anchor, false), side, align);
+    const style = content.style;
+    style.top = "0px";
+    style.left = "0px";
+    const origin = content.getBoundingClientRect();
+    const top = next.side === "bottom" ? triggerBox.bottom + GAP : triggerBox.top - GAP - size.height;
+    const left = next.align === "end" ? triggerBox.right - size.width : triggerBox.left;
+    style.top = `${top - origin.top}px`;
+    style.left = `${left - origin.left}px`;
+    setPlacement({ ...next, top: top - origin.top, left: left - origin.left });
+  }, [portal, side, align]);
+  const ready = open && (!portal || container !== null);
+  useIsomorphicLayoutEffect(() => {
+    if (!ready) return;
+    place();
+    const content = contentRef.current;
+    if (content) latest.current.onShown?.(content, reason.current);
+  }, [ready]);
+  useIsomorphicLayoutEffect(() => {
+    if (!ready) setPlacement({ side, align });
+  }, [ready, side, align]);
+  const handlers = useRef({ close, place });
+  useIsomorphicLayoutEffect(() => {
+    handlers.current = { close, place };
+  });
+  useEffect(() => {
+    if (!ready) return;
+    const layer = { content: () => contentRef.current };
+    layers.push(layer);
+    const isTop = () => layers[layers.length - 1] === layer;
+    const onKey = (event) => {
+      if (event.key !== "Escape" || !isTop() || event.defaultPrevented) return;
+      event.preventDefault();
+      event.stopPropagation();
+      handlers.current.close("trigger");
+    };
+    const onPointer = (event) => {
+      const target = event.target;
+      if (anchorRef.current?.contains(target) || contentRef.current?.contains(target)) return;
+      const index = layers.indexOf(layer);
+      if (layers.slice(index + 1).some((other) => other.content()?.contains(target))) return;
+      handlers.current.close("none");
+    };
+    const onMove = () => handlers.current.place();
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
+    window.addEventListener("resize", onMove);
+    if (portal) window.addEventListener("scroll", onMove, true);
+    return () => {
+      layers.splice(layers.indexOf(layer), 1);
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
+      window.removeEventListener("resize", onMove);
+      window.removeEventListener("scroll", onMove, true);
+    };
+  }, [ready, portal]);
+  useIsomorphicLayoutEffect(() => {
+    if (open) return;
+    const after = focusAfter.current;
+    focusAfter.current = "none";
+    const active = document.activeElement;
+    const lost = !active || active === document.body;
+    if (after === "trigger" || after === "if-lost" && lost) triggerRef.current?.focus({ preventScroll: true });
+  }, [open]);
+  const triggerProps = {
+    ref: (node) => {
+      triggerRef.current = node;
+    },
+    "aria-haspopup": kind,
+    "aria-expanded": open,
+    "aria-controls": open ? id : void 0,
+    onClick: (event) => {
+      if (event.defaultPrevented) return;
+      if (open) close("none");
+      else show(event.detail === 0 ? "first" : "pointer");
+    },
+    onKeyDown: (event) => {
+      if (event.defaultPrevented || kind !== "menu") return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        show(event.key === "ArrowUp" ? "last" : "first");
+      }
+    }
+  };
+  let triggerNode;
+  if (typeof trigger === "function") triggerNode = trigger(triggerProps, { open });
+  else {
+    const own = trigger.props;
+    const elementRef = trigger.ref;
+    triggerNode = cloneElement(trigger, {
+      ...triggerProps,
+      ref: (node) => setRefs(node, triggerProps.ref, elementRef),
+      onClick: (event) => {
+        own.onClick?.(event);
+        triggerProps.onClick(event);
+      },
+      onKeyDown: (event) => {
+        own.onKeyDown?.(event);
+        triggerProps.onKeyDown(event);
+      }
+    });
+  }
+  const contentAttributes = {
+    id,
+    "data-side": placement.side,
+    "data-align": placement.align,
+    "data-portal": portal ? "" : void 0,
+    style: portal ? { top: placement.top ?? 0, left: placement.left ?? 0, right: "auto", bottom: "auto" } : void 0
+  };
+  const wrap = (content) => {
+    if (!open) return null;
+    if (!portal) return content;
+    if (!container) return null;
+    return createPortal(/* @__PURE__ */ jsx("div", { className: "hc-ui-portal", "data-hc-ds": "", "data-theme": container.theme, children: content }), container.element);
+  };
+  return { open, close, triggerNode, anchorRef, contentRef, contentAttributes, wrap, triggerRef };
+}
+var mergeStyle = (base, own) => base || own ? { ...own, ...base } : void 0;
+var MenuContext = createContext(null);
+var RadioContext = createContext(null);
+var ITEM_SELECTOR = '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+var itemsOf = (menu) => [...menu.querySelectorAll(ITEM_SELECTOR)].filter((item) => !item.disabled && item.closest('[role="menu"]') === menu);
+var itemText = (item) => (item.querySelector(".hc-ui-menu__text")?.firstChild?.textContent ?? item.textContent ?? "").trim().toLocaleLowerCase();
+var Menu = forwardRef(function Menu2({ label, trigger, children, open, defaultOpen, onOpenChange, side, align, portal, theme, anchorClassName, className, style, id, onKeyDown, ...props }, ref) {
+  const typed = useRef({ text: "", at: 0 });
+  const popup = usePopup({
+    kind: "menu",
+    trigger,
+    open,
+    defaultOpen,
+    onOpenChange,
+    side,
+    align,
+    portal,
+    theme,
+    contentId: id,
+    onShown: (menu, why) => {
+      typed.current = { text: "", at: 0 };
+      const items = itemsOf(menu);
+      const selected = items.find((item) => item.getAttribute("role") === "menuitemradio" && item.getAttribute("aria-checked") === "true");
+      (why === "last" ? items[items.length - 1] : selected ?? items[0])?.focus({ preventScroll: true });
+    }
+  });
+  const { close } = popup;
+  const context = useMemo(() => ({ close }), [close]);
+  useIsomorphicLayoutEffect(() => {
+    const menu = popup.contentRef.current;
+    const active = document.activeElement;
+    const lost = !active || active === document.body || menu?.contains(active) && active.disabled;
+    if (popup.open && menu && lost) itemsOf(menu)[0]?.focus({ preventScroll: true });
+  });
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented) return;
+    const menu = event.currentTarget;
+    const items = itemsOf(menu);
+    const current = items.indexOf(document.activeElement);
+    const focus = (index) => items[(index + items.length) % items.length]?.focus();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        focus(current + 1);
+        return;
+      case "ArrowUp":
+        event.preventDefault();
+        focus(current < 0 ? -1 : current - 1);
+        return;
+      case "Home":
+        event.preventDefault();
+        focus(0);
+        return;
+      case "End":
+        event.preventDefault();
+        focus(-1);
+        return;
+      case "Tab":
+        popup.triggerRef.current?.focus({ preventScroll: true });
+        close("none");
+        return;
+    }
+    if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey || !items.length) return;
+    const now = Date.now();
+    const typing = typed.current.text !== "" && now - typed.current.at <= 500;
+    if (event.key === " " && !typing) return;
+    event.preventDefault();
+    const key = event.key.toLocaleLowerCase();
+    typed.current.text = typing ? typed.current.text + key : key;
+    typed.current.at = now;
+    const query = [...typed.current.text].every((letter) => letter === key) ? key : typed.current.text;
+    const start = query.length === 1 ? current + 1 : Math.max(current, 0);
+    for (let step = 0; step < items.length; step += 1) {
+      const item = items[(start + step) % items.length];
+      if (itemText(item).startsWith(query)) {
+        item.focus();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-popup-anchor", anchorClassName), ref: popup.anchorRef, children: [
+    popup.triggerNode,
+    popup.wrap(
+      /* @__PURE__ */ jsx(MenuContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...popup.contentAttributes,
+          style: mergeStyle(popup.contentAttributes.style, style),
+          ref: (node) => setRefs(node, popup.contentRef, ref),
+          role: "menu",
+          "aria-label": label,
+          tabIndex: -1,
+          className: classes("hc-ui-menu", className),
+          onKeyDown: handleKeyDown,
+          children
+        }
+      ) })
+    )
+  ] });
+});
+function useMenu(name) {
+  const menu = useContext(MenuContext);
+  if (!menu) throw new Error(`${name} must be inside a Menu`);
+  return menu;
+}
+var checkGlyph = /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M5 13L9 17L19 7", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var MenuRow = forwardRef(function MenuRow2({ icon, hint, danger, end, role, onChoose, className, children, type = "button", onClick, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      role,
+      tabIndex: -1,
+      className: classes("hc-ui-menu__item", className),
+      "data-danger": danger || void 0,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onChoose(event);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "hc-ui-menu__text", children: [
+          children,
+          hint && /* @__PURE__ */ jsx("small", { className: "hc-ui-menu__hint", children: hint })
+        ] }),
+        end,
+        icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__icon", "aria-hidden": "true", children: icon })
+      ]
+    }
+  );
+});
+var MenuItem = forwardRef(function MenuItem2({ onSelect, ...props }, ref) {
+  const menu = useMenu("MenuItem");
+  return /* @__PURE__ */ jsx(MenuRow, { ...props, ref, role: "menuitem", onChoose: (event) => {
+    onSelect?.(event);
+    if (!event.defaultPrevented) menu.close("if-lost");
+  } });
+});
+function MenuRadioGroup({ value, onValueChange, label, className, children, ...props }) {
+  const context = useMemo(() => ({ value, onValueChange }), [value, onValueChange]);
+  return /* @__PURE__ */ jsx(RadioContext.Provider, { value: context, children: /* @__PURE__ */ jsx("div", { ...props, role: "group", "aria-label": label, className: classes("hc-ui-menu__group", className), children }) });
+}
+var MenuItemRadio = forwardRef(function MenuItemRadio2({ value, ...props }, ref) {
+  const menu = useMenu("MenuItemRadio");
+  const group = useContext(RadioContext);
+  if (!group) throw new Error("MenuItemRadio must be inside a MenuRadioGroup");
+  const checked = group.value === value;
+  return /* @__PURE__ */ jsx(
+    MenuRow,
+    {
+      ...props,
+      ref,
+      role: "menuitemradio",
+      "aria-checked": checked,
+      end: checked ? /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__check", children: checkGlyph }) : void 0,
+      onChoose: () => {
+        group.onValueChange(value);
+        menu.close("trigger");
+      }
+    }
+  );
+});
+var MenuItemCheckbox = forwardRef(function MenuItemCheckbox2({ checked, onCheckedChange, closeOnSelect = false, ...props }, ref) {
+  const menu = useMenu("MenuItemCheckbox");
+  return /* @__PURE__ */ jsx(
+    MenuRow,
+    {
+      ...props,
+      ref,
+      role: "menuitemcheckbox",
+      "aria-checked": checked,
+      end: checked ? /* @__PURE__ */ jsx("span", { className: "hc-ui-menu__check", children: checkGlyph }) : void 0,
+      onChoose: () => {
+        onCheckedChange(!checked);
+        if (closeOnSelect) menu.close("trigger");
+      }
+    }
+  );
+});
+function MenuSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, role: "separator", className: classes("hc-ui-menu__separator", className) });
+}
+function MenuLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-menu__label", className) });
+}
+function SortMenu({ label, value, options, onChange, applied = false, size = "sm", triggerClassName, ...props }) {
+  const current = options.find((option) => option.value === value)?.label;
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      ...props,
+      label,
+      trigger: /* @__PURE__ */ jsx(Chip, { size, applied, className: triggerClassName, "aria-label": current === void 0 ? label : `${label}: ${current}`, children: current }),
+      children: /* @__PURE__ */ jsx(MenuRadioGroup, { value, onValueChange: onChange, children: options.map((option) => /* @__PURE__ */ jsx(MenuItemRadio, { value: option.value, hint: option.hint, disabled: option.disabled, children: option.label }, option.value)) })
+    }
+  );
+}
+var Popover = forwardRef(function Popover2({ label, trigger, children, autoFocus = false, open, defaultOpen, onOpenChange, side, align, portal, theme, anchorClassName, className, style, id, ...props }, ref) {
+  const popup = usePopup({
+    kind: "dialog",
+    trigger,
+    open,
+    defaultOpen,
+    onOpenChange,
+    side,
+    align,
+    portal,
+    theme,
+    contentId: id,
+    onShown: (content) => {
+      if (!autoFocus) return;
+      content.querySelector('button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])')?.focus({ preventScroll: true });
+    }
+  });
+  const close = useCallback(() => popup.close("trigger"), [popup.close]);
+  return /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-popup-anchor", anchorClassName), ref: popup.anchorRef, children: [
+    popup.triggerNode,
+    popup.wrap(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props,
+          ...popup.contentAttributes,
+          style: mergeStyle(popup.contentAttributes.style, style),
+          ref: (node) => setRefs(node, popup.contentRef, ref),
+          role: "dialog",
+          "aria-label": label,
+          tabIndex: -1,
+          className: classes("hc-ui-popover", className),
+          children: typeof children === "function" ? children({ close }) : children
+        }
+      )
+    )
+  ] });
+});
+var arrowGlyph = (up) => glyph(12, up ? "M12 21L12 3M12 3L20.5 11.5M12 3L3.5 11.5" : "M12 3L12 21M12 21L20.5 12.5M12 21L3.5 12.5");
+function TableInner({ columns, rows, rowKey, sort, onSort, stickyHeader = false, onRowClick, selectedKey, className, ...props }, ref) {
+  const alignOf = (column) => column.align ?? (column.numeric ? "end" : "start");
+  const cellLook = (column) => ({
+    className: column.className,
+    "data-align": alignOf(column),
+    "data-numeric": column.numeric || void 0,
+    "data-tone": column.tone
+  });
+  const rowHeaderKey = columns.find((column) => column.rowHeader)?.key;
+  return /* @__PURE__ */ jsxs("table", { ...props, ref, className: classes("hc-ui-table", className), "data-sticky-header": stickyHeader || void 0, "data-clickable": onRowClick ? "" : void 0, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => {
+      const direction = column.sortable ? sort && sort.key === column.key ? sort.direction : "none" : void 0;
+      return /* @__PURE__ */ jsx(
+        "th",
+        {
+          scope: "col",
+          ...cellLook(column),
+          "aria-sort": direction,
+          style: column.width === void 0 ? void 0 : { width: column.width },
+          children: column.sortable ? /* @__PURE__ */ jsxs("button", { type: "button", className: "hc-ui-table__sort", onClick: () => onSort?.(column.key), children: [
+            column.header,
+            direction !== "none" && arrowGlyph(direction === "ascending")
+          ] }) : column.header
+        },
+        column.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, index) => {
+      const key = rowKey(row, index);
+      const selected = selectedKey !== void 0 && selectedKey !== null && key === selectedKey;
+      const press = onRowClick && (() => onRowClick(row, index));
+      return /* @__PURE__ */ jsx("tr", { onClick: press, "data-selected": selected || void 0, children: columns.map((column) => {
+        const content = column.cell(row, index);
+        if (!column.rowHeader) return /* @__PURE__ */ jsx("td", { ...cellLook(column), children: content }, column.key);
+        return /* @__PURE__ */ jsx("th", { scope: "row", ...cellLook(column), children: press && column.key === rowHeaderKey ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "hc-ui-table__row-button",
+            "aria-current": selected || void 0,
+            onClick: (event) => {
+              event.stopPropagation();
+              press();
+            },
+            children: content
+          }
+        ) : content }, column.key);
+      }) }, key);
+    }) })
+  ] });
+}
+var Table = forwardRef(TableInner);
+var Heading = ({ level, ...props }) => {
+  const Tag = `h${level}`;
+  return /* @__PURE__ */ jsx(Tag, { ...props });
+};
+var PageHeader = forwardRef(function PageHeader2({ title, level = 1, count, actions, visuallyHidden = false, className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("header", { ...props, ref, className: classes("hc-ui-page-header", className), "data-visually-hidden": visuallyHidden || void 0, children: [
+    /* @__PURE__ */ jsxs(Heading, { level, className: "hc-ui-page-header__title", children: [
+      title,
+      visible(count) && count !== 0 && /* @__PURE__ */ jsxs(Fragment2, { children: [
+        " ",
+        /* @__PURE__ */ jsx("small", { className: "hc-ui-page-header__count", children: count })
+      ] })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-page-header__actions", children: actions })
+  ] });
+});
+var navArrow = glyph(14, "M9 6L15 12L9 18");
+var PanelHeader = forwardRef(function PanelHeader2({ title, level = 2, variant = "bar", eyebrow, subtitle, subtitleInline = false, icon, trail, trailLabel, actions, onClose, closeLabel, closeTitle, closeIcon, className, ...props }, ref) {
+  const steps = trail && trail.length > 0 ? trail : null;
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ...props,
+      ref,
+      className: classes("hc-ui-panel-header", className),
+      "data-variant": variant,
+      "data-subtitle": subtitle && subtitleInline ? "inline" : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-panel-header__icon", "aria-hidden": "true", children: icon }),
+        steps ? /* @__PURE__ */ jsx("nav", { className: "hc-ui-panel-header__trail", "aria-label": trailLabel, children: steps.map((step, index) => {
+          const last = index === steps.length - 1;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            index > 0 && navArrow,
+            last ? /* @__PURE__ */ jsx(Heading, { level, className: "hc-ui-panel-header__title", "aria-current": "location", children: step.label }) : step.onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-panel-header__step", onClick: step.onSelect, children: step.label }) : /* @__PURE__ */ jsx("strong", { className: "hc-ui-panel-header__title", children: step.label })
+          ] }, `${index}:${step.label}`);
+        }) }) : /* @__PURE__ */ jsxs("div", { className: "hc-ui-panel-header__text", children: [
+          eyebrow && /* @__PURE__ */ jsx("p", { className: "hc-ui-panel-header__eyebrow", children: eyebrow }),
+          /* @__PURE__ */ jsx(Heading, { level, className: "hc-ui-panel-header__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "hc-ui-panel-header__subtitle", children: subtitle })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "hc-ui-panel-header__actions", children: actions }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "hc-ui-panel-header__close", onClick: onClose, "aria-label": closeLabel, title: closeTitle ?? closeLabel, children: closeIcon ?? glyph(18, XMARK) })
+      ]
+    }
+  );
+});
+var ListRow = forwardRef(function ListRow2({ type = "button", className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("button", { ...props, ref, type, className: classes("hc-ui-list-row", className) });
+});
+var searchGlyph = /* @__PURE__ */ jsxs("svg", { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", strokeWidth: 1.8, "aria-hidden": "true", focusable: "false", children: [
+  /* @__PURE__ */ jsx("path", { d: "M17 17L21 21", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var CommandPalette = forwardRef(function CommandPalette2({
+  open,
+  onClose,
+  label,
+  inputLabel,
+  placeholder,
+  query,
+  onQueryChange,
+  groups,
+  searchIcon,
+  loading,
+  empty,
+  selectHint,
+  altHint,
+  hints,
+  listClassName,
+  className,
+  onClick,
+  onPointerDown,
+  ...props
+}, ref) {
+  const dialogRef = useRef(null);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const setRef = useCallback((node) => setRefs(node, dialogRef, ref), [ref]);
+  const id = useId();
+  const listId = `${id}-list`;
+  const optionId = (index2) => `${id}-option-${index2}`;
+  const items = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const [active, setActive] = useState(0);
+  const [seen, setSeen] = useState({ query, open });
+  if (seen.query !== query || seen.open !== open) {
+    setSeen({ query, open });
+    if (active !== 0) setActive(0);
+  }
+  const current = items.length ? Math.min(active, items.length - 1) : -1;
+  const latest = useRef({ open, onClose });
+  useIsomorphicLayoutEffect(() => {
+    latest.current = { open, onClose };
+  });
+  useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (!open || !dialog) return;
+    const trigger = document.activeElement instanceof HTMLElement && !dialog.contains(document.activeElement) ? document.activeElement : null;
+    if (!dialog.open) dialog.showModal();
+    inputRef.current?.focus();
+    const unlock = lockScroll();
+    return () => {
+      unlock();
+      if (dialog.open) dialog.close();
+      queueMicrotask(() => {
+        const focused = document.activeElement;
+        const lost = !focused || focused === document.body || dialog.contains(focused);
+        if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
+      });
+    };
+  }, [open]);
+  useEffect(() => {
+    if (open && current >= 0) listRef.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" });
+  }, [open, current]);
+  const ownEvent = (event) => event.target === event.currentTarget;
+  const handleCancel = (event) => {
+    if (!ownEvent(event)) return;
+    event.preventDefault();
+    latest.current.onClose();
+  };
+  const handleNativeClose = (event) => {
+    const dialog = event.currentTarget;
+    if (!ownEvent(event) || dialog.open || !latest.current.open) return;
+    latest.current.onClose();
+    window.setTimeout(() => {
+      if (latest.current.open && dialog.isConnected && !dialog.open) {
+        dialog.showModal();
+        inputRef.current?.focus();
+      }
+    }, 0);
+  };
+  const pressedBackdrop = useRef(false);
+  const handlePointerDown = (event) => {
+    onPointerDown?.(event);
+    pressedBackdrop.current = ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+  };
+  const handleClick = (event) => {
+    onClick?.(event);
+    const fromBackdrop = pressedBackdrop.current && ownEvent(event) && outside(event.currentTarget, event.clientX, event.clientY);
+    pressedBackdrop.current = false;
+    if (fromBackdrop) latest.current.onClose();
+  };
+  const handleKeyDown = (event) => {
+    const count = items.length;
+    if (!count || event.nativeEvent.isComposing || event.altKey) return;
+    let next = null;
+    if (event.key === "ArrowDown") next = (current + 1) % count;
+    else if (event.key === "ArrowUp") next = (current - 1 + count) % count;
+    else if (event.key === "Home" && !event.shiftKey) next = 0;
+    else if (event.key === "End" && !event.shiftKey) next = count - 1;
+    else if (event.key === "Enter") {
+      const item = items[current];
+      event.preventDefault();
+      if ((event.metaKey || event.ctrlKey) && item.onAltSelect) item.onAltSelect();
+      else item.onSelect();
+      return;
+    }
+    if (next === null) return;
+    event.preventDefault();
+    setActive(next);
+  };
+  if (!open) return null;
+  let index = 0;
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ...props,
+      ref: setRef,
+      className: classes("hc-ui-command-palette", className),
+      "aria-label": label,
+      onCancel: handleCancel,
+      onClose: handleNativeClose,
+      onPointerDown: handlePointerDown,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxs("div", { className: "hc-ui-command-palette__box", onKeyDown: handleKeyDown, children: [
+        /* @__PURE__ */ jsxs("label", { className: "hc-ui-command-palette__field", children: [
+          searchIcon ?? searchGlyph,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              className: "hc-ui-command-palette__input",
+              value: query,
+              placeholder,
+              onChange: (event) => onQueryChange(event.target.value),
+              autoComplete: "off",
+              "aria-label": inputLabel ?? label,
+              role: "combobox",
+              "aria-expanded": "true",
+              "aria-controls": listId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": current >= 0 ? optionId(current) : void 0
+            }
+          ),
+          visible(loading) && /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__status", children: loading })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: listRef,
+            className: classes("hc-ui-command-palette__list", listClassName),
+            id: listId,
+            role: "listbox",
+            "aria-label": label,
+            "aria-busy": visible(loading) || void 0,
+            children: [
+              visible(empty) && /* @__PURE__ */ jsx("p", { className: "hc-ui-command-palette__empty", children: empty }),
+              groups.map((group, groupIndex) => {
+                if (!group.items.length) return null;
+                const headingId = visible(group.heading) ? `${id}-group-${groupIndex}` : void 0;
+                return /* @__PURE__ */ jsxs("div", { className: "hc-ui-command-palette__group", role: headingId ? "group" : "presentation", "aria-labelledby": headingId, children: [
+                  headingId && /* @__PURE__ */ jsx("p", { className: "hc-ui-command-palette__heading", id: headingId, "aria-hidden": "true", children: group.heading }),
+                  group.items.map((item) => {
+                    const itemIndex = index++;
+                    const isActive = itemIndex === current;
+                    const itemAltHint = item.onAltSelect ? item.altHint ?? altHint : void 0;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        tabIndex: -1,
+                        id: optionId(itemIndex),
+                        role: "option",
+                        "aria-selected": isActive,
+                        className: "hc-ui-command-palette__item",
+                        onMouseDown: (event) => event.preventDefault(),
+                        onMouseMove: () => {
+                          if (!isActive) setActive(itemIndex);
+                        },
+                        onClick: () => item.onSelect(),
+                        children: [
+                          item.icon !== void 0 && /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__icon", "aria-hidden": "true", children: item.icon }),
+                          /* @__PURE__ */ jsxs("span", { className: "hc-ui-command-palette__text", children: [
+                            /* @__PURE__ */ jsx("span", { className: "hc-ui-command-palette__label", children: item.label }),
+                            visible(item.detail) && /* @__PURE__ */ jsx("small", { className: "hc-ui-command-palette__detail", children: item.detail })
+                          ] }),
+                          isActive && visible(itemAltHint) && /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", "aria-hidden": "true", children: itemAltHint }),
+                          isActive && visible(selectHint) && /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", "aria-hidden": "true", children: selectHint })
+                        ]
+                      },
+                      item.key
+                    );
+                  })
+                ] }, group.key);
+              })
+            ]
+          }
+        ),
+        hints && hints.length > 0 && /* @__PURE__ */ jsx("footer", { className: "hc-ui-command-palette__footer", children: hints.map((hint, hintIndex) => /* @__PURE__ */ jsxs("span", { children: [
+          hint.keys.map((key, keyIndex) => /* @__PURE__ */ jsx("kbd", { className: "hc-ui-command-palette__kbd", children: key }, keyIndex)),
+          " ",
+          hint.label
+        ] }, hintIndex)) })
+      ] })
+    }
+  );
+});
+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,
+  MenuItemRadio,
+  MenuLabel,
+  MenuRadioGroup,
+  MenuSeparator,
+  Meter,
+  MiniDialView,
+  PHYSICAL_CARD_STATS,
+  PageHeader,
+  PanelHeader,
+  PhysicalCardFocusView,
+  PhysicalCardView,
+  Popover,
+  PowerIconView,
   SegmentedControl,
+  SetIconView,
+  Sheet,
+  SheetChips,
+  SheetOptions,
   Skeleton,
-  Surface
+  SortMenu,
+  SpecialIconView,
+  StatGlyphView,
+  StatIcon,
+  Surface,
+  TERRAIN_EDGE_COLORS,
+  TERRAIN_TILE_COLORS,
+  TILE_SIZE,
+  TILT_RANGE,
+  Table,
+  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
 };