@ntmats/hc-ui 0.4.0 → 0.6.0

package/dist/index.js

@@ -6,8 +6,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 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 Surface({ tone = "content", radius, as: Element = "div", className, ...props }) {
+  return /* @__PURE__ */ jsx(Element, { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone, "data-radius": radius });
 }
 function SegmentedControl({
   label,
@@ -20,6 +20,7 @@ function SegmentedControl({
   indicator = "static",
   equalWidth = false,
   optionWidth,
+  optionMinWidth,
   className,
   style,
   ...props
@@ -33,7 +34,8 @@ function SegmentedControl({
   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` } : {}
+    ...optionWidth !== void 0 ? { "--hc-segmented-option-width": `${optionWidth}px` } : {},
+    ...optionMinWidth !== void 0 ? { "--hc-segmented-option-min-width": `${optionMinWidth}px` } : {}
   };
   const move = (index, key) => {
     if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
@@ -103,7 +105,7 @@ function SegmentedControl({
   );
 }
 var classes = (...names) => names.filter(Boolean).join(" ");
-var Button = forwardRef(function Button2({ variant = "secondary", size = "md", icon, iconEnd, fullWidth = false, loading = false, type = "button", className, children, onClick, ...props }, ref) {
+var Button = forwardRef(function Button2({ variant = "secondary", tone = "default", size = "md", icon, iconEnd, fullWidth = false, loading = false, wrap = false, type = "button", className, children, onClick, ...props }, ref) {
   const handleClick = (event) => {
     if (loading) event.preventDefault();
     else onClick?.(event);
@@ -120,7 +122,9 @@ var Button = forwardRef(function Button2({ variant = "secondary", size = "md", i
       "aria-disabled": loading || props["aria-disabled"],
       "data-variant": variant,
       "data-size": size,
+      "data-tone": tone === "default" ? void 0 : tone,
       "data-full-width": fullWidth || void 0,
+      "data-wrap": wrap || void 0,
       children: [
         loading ? /* @__PURE__ */ jsx("span", { className: "hc-ui-button__spinner", "aria-hidden": "true" }) : icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-button__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsx("span", { className: "hc-ui-button__label", children }),
@@ -152,31 +156,33 @@ var glyph = (size, d) => /* @__PURE__ */ jsx("svg", { width: size, height: size,
 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) {
+var Chip = forwardRef(function Chip2({ selected, icon, size = "md", variant = "outline", applied = false, count, badge, badgePlacement = "inline", informative = false, 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
+    "data-applied": applied || void 0,
+    "data-icon-only": icon && !visible(children) || void 0,
+    "data-informative": informative || void 0
   };
   const content = /* @__PURE__ */ jsxs(Fragment2, { children: [
     icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
     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 }),
+    visible(badge) && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__badge", "data-placement": badgePlacement === "corner" ? "corner" : void 0, 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 });
+    return /* @__PURE__ */ jsx("button", { ...props, ...informative ? { disabled: true } : {}, 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 }),
+    onClick ? /* @__PURE__ */ jsx("button", { ...rest, id, ref, type, disabled: informative || 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) {
+var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layout = "auto", density = "comfortable", sticky = false, bleed = false, rowClassName, className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -188,10 +194,11 @@ var FilterBar = forwardRef(function FilterBar2({ label, start, end, footer, layo
       "data-layout": layout,
       "data-density": density === "comfortable" ? void 0 : density,
       "data-sticky": sticky || void 0,
+      "data-bleed": bleed || 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 }),
+          /* @__PURE__ */ jsx("div", { className: classes("hc-ui-filter-bar__row", rowClassName), 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 })
@@ -322,7 +329,7 @@ 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({
+var DialogBase = forwardRef(function Dialog({
   open,
   onClose,
   title,
@@ -333,6 +340,8 @@ var Dialog = forwardRef(function Dialog2({
   closeIcon,
   size = "md",
   dismissible = true,
+  bodyClassName,
+  headerless = false,
   className,
   onClick,
   onPointerDown,
@@ -347,6 +356,7 @@ var Dialog = forwardRef(function Dialog2({
   }, [ref]);
   const id = useId();
   const titleId = `${id}-title`;
+  const bodyId = `${id}-body`;
   const descriptionId = description ? `${id}-description` : void 0;
   const [mounted, setMounted] = useState(open);
   const [closing, setClosing] = useState(false);
@@ -361,7 +371,7 @@ var Dialog = forwardRef(function Dialog2({
   });
   const keepFocus = useRef(null);
   const handleMount = useCallback(() => {
-    const dialog = document.getElementById(titleId)?.closest("dialog");
+    const dialog = (document.getElementById(titleId) ?? document.getElementById(bodyId))?.closest("dialog");
     if (!dialog) return () => {
     };
     const trigger = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -380,7 +390,7 @@ var Dialog = forwardRef(function Dialog2({
         if (lost && !dialog.open && trigger?.isConnected) trigger.focus({ preventScroll: true });
       });
     };
-  }, [titleId]);
+  }, [titleId, bodyId]);
   useEffect(() => {
     const dialog = dialogRef.current;
     if (!closing || !dialog) return;
@@ -427,7 +437,7 @@ var Dialog = forwardRef(function Dialog2({
     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;
+  const hasBody = headerless || Boolean(description) || children !== void 0 && children !== null && children !== false;
   return /* @__PURE__ */ jsxs(
     "dialog",
     {
@@ -436,7 +446,8 @@ var Dialog = forwardRef(function Dialog2({
       className: classes("hc-ui-dialog", className),
       "data-size": size,
       "data-closing": closing || void 0,
-      "aria-labelledby": titleId,
+      "data-headerless": headerless || void 0,
+      "aria-labelledby": headerless ? void 0 : titleId,
       "aria-describedby": classes(descriptionId, describedBy) || void 0,
       onCancel: handleCancel,
       onClose: handleNativeClose,
@@ -444,11 +455,11 @@ var Dialog = forwardRef(function Dialog2({
       onClick: handleClick,
       children: [
         /* @__PURE__ */ jsx(DialogMount, { onMount: handleMount }),
-        /* @__PURE__ */ jsxs("div", { className: "hc-ui-dialog__header", children: [
+        !headerless && /* @__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: [
+        hasBody && /* @__PURE__ */ jsxs("div", { className: classes("hc-ui-dialog__body", bodyClassName), id: headerless ? bodyId : void 0, children: [
           description && /* @__PURE__ */ jsx("p", { className: "hc-ui-dialog__description", id: descriptionId, children: description }),
           children
         ] }),
@@ -457,8 +468,9 @@ var Dialog = forwardRef(function Dialog2({
     }
   );
 });
+var Dialog2 = DialogBase;
 var SHEET_EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
-var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag]';
+var NO_DRAG = 'input, textarea, select, [contenteditable="true"], [data-hc-sheet-nodrag], .hc-ui-portal';
 function useSheetDrag(sheet, latest) {
   useEffect(() => {
     const el = sheet;
@@ -590,7 +602,7 @@ function useSheetDrag(sheet, latest) {
     };
   }, [sheet, latest]);
 }
-var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, onClose, className, style, ...props }, ref) {
+var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, footer, dismissible = true, header = true, onClose, className, style, ...props }, ref) {
   const [node, setNode] = useState(null);
   const setRef = useCallback((element) => {
     setNode(element);
@@ -603,7 +615,7 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
   useSheetDrag(node, latest);
   const sized = width === 440 ? style : { ...style, "--hc-sheet-width": `${width}px` };
   return /* @__PURE__ */ jsx(
-    Dialog,
+    DialogBase,
     {
       ...props,
       ref: setRef,
@@ -611,6 +623,7 @@ var Sheet = forwardRef(function Sheet2({ presentation = "auto", width = 440, foo
       actions: footer,
       dismissible,
       onClose,
+      headerless: !header,
       className: classes("hc-ui-sheet", className),
       style: sized,
       "data-presentation": presentation
@@ -647,10 +660,9 @@ function useRovingRadios(options, value) {
   });
   return item;
 }
-function SheetOptions({ label, options, value, onChange, variant = "card", className, ...props }) {
+function SheetOptions({ label, options, value, onChange, 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) => {
+  return /* @__PURE__ */ jsx("div", { ...props, className: classes("hc-ui-sheet-options", className), role: "radiogroup", "aria-label": label, children: options.map((option, index) => {
     const on = option.value === value;
     return /* @__PURE__ */ jsxs(
       "button",
@@ -669,14 +681,14 @@ function SheetOptions({ label, options, value, onChange, variant = "card", class
             /* @__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" }) }) })
+          /* @__PURE__ */ jsx("span", { className: "hc-ui-sheet-options__check", "aria-hidden": "true", children: on && /* @__PURE__ */ jsx("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", strokeWidth: 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 }) {
+function SheetChips({ label, options, value, onChange, size = "md", 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",
@@ -687,6 +699,7 @@ function SheetChips({ label, options, value, onChange, className, ...props }) {
       "aria-checked": option.value === value,
       disabled: option.disabled,
       className: "hc-ui-chip",
+      "data-size": size === "md" ? void 0 : size,
       onClick: () => onChange(option.value),
       children: option.label
     },
@@ -716,6 +729,10 @@ function placePopup(trigger, size, boundary, side, align) {
   const finalAlign = !fits(align) && fits(align === "end" ? "start" : "end") ? align === "end" ? "start" : "end" : align;
   return { side: finalSide, align: finalAlign };
 }
+function portalContainerFor(node) {
+  if (typeof document === "undefined") return null;
+  return node?.closest("dialog[open]") ?? document.body;
+}
 var layers = [];
 function themeOf(element) {
   const scoped = element?.closest("[data-theme]")?.getAttribute("data-theme");
@@ -761,7 +778,7 @@ function usePopup({ kind, trigger, open: openProp, defaultOpen = false, onOpenCh
       setContainer(null);
       return;
     }
-    const element = portal instanceof HTMLElement ? portal : triggerRef.current?.closest("dialog[open]") ?? document.body;
+    const element = portal instanceof HTMLElement ? portal : portalContainerFor(triggerRef.current) ?? document.body;
     setContainer({ element, theme: theme ?? themeOf(triggerRef.current) });
   }, [open, portal, theme]);
   const place = useCallback(() => {
@@ -1555,6 +1572,7 @@ var CombatDialView = forwardRef(function CombatDialView2({
   currentClick,
   labels,
   presentation = "default",
+  density = "comfortable",
   onClickChange,
   onSelectPoint,
   tip,
@@ -1658,7 +1676,7 @@ var CombatDialView = forwardRef(function CombatDialView2({
       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: [
+  return /* @__PURE__ */ jsxs("section", { ref, className: "hc-ui-combat-dial", "data-presentation": presentation, "data-density": density === "compact" ? "compact" : void 0, "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 }),
@@ -1693,11 +1711,11 @@ var CombatDialView = forwardRef(function CombatDialView2({
     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) {
+var PHYSICAL_CARD_WIDTH = 375;
+var PHYSICAL_CARD_HEIGHT = 525;
+var PHYSICAL_CARD_BACK_TABLE_HEIGHT = 440;
+var PHYSICAL_CARD_BYSTANDER_DIAL_STEP = { x: 7, y: 24 };
+function nextPhysicalCardDistribution(pages, overflowing) {
   const last = pages.length ? Math.max(...pages) : 0;
   for (let table = 0; table <= last; table += 1) {
     if (!overflowing(table)) continue;
@@ -1709,7 +1727,7 @@ function nextDistribution(pages, overflowing) {
   }
   return null;
 }
-function backCount(pages) {
+function physicalCardBackCount(pages) {
   const last = pages.length ? Math.max(...pages) : 0;
   return Math.max(1, Math.ceil(last / 2));
 }
@@ -1721,7 +1739,7 @@ var CAN_DEVICE_TILT = "(hover: none) and (pointer: coarse) and (prefers-reduced-
 var DEVICE_RANGE_DEG = 18;
 var BASELINE_DRIFT = 0.01;
 var DEVICE_SMOOTHING = 0.2;
-function tiltAt(x, y, damping = 1) {
+function physicalCardTiltAt(x, y, damping = 1) {
   const offsetX = (x - 0.5) * 2 * damping;
   const offsetY = (y - 0.5) * 2 * damping;
   return {
@@ -1736,7 +1754,7 @@ function tiltAt(x, y, damping = 1) {
 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) {
+function physicalCardTiltStyles(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`,
@@ -1748,7 +1766,7 @@ var eachIn = (root, selector, write) => {
   root.querySelectorAll(selector).forEach(write);
 };
 function applyTilt(root, tilt) {
-  const styles = tiltStyles(tilt);
+  const styles = physicalCardTiltStyles(tilt);
   root.dataset.tilt = "";
   eachIn(root, ".hc-ui-physical-card-tilt", (element) => {
     element.style.transform = styles.card;
@@ -1772,7 +1790,7 @@ function clearTilt(root) {
     element.style.translate = "";
   });
 }
-function devicePosition(beta, gamma, baseline, screenAngle = 0) {
+function physicalCardDevicePosition(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);
@@ -1780,7 +1798,7 @@ function devicePosition(beta, gamma, baseline, screenAngle = 0) {
   return { x: (horizontal + 1) / 2, y: (vertical + 1) / 2 };
 }
 var motionAsked = false;
-function requestMotionAccess() {
+function requestPhysicalCardMotionAccess() {
   const request = typeof DeviceOrientationEvent === "undefined" ? void 0 : DeviceOrientationEvent.requestPermission;
   if (motionAsked || !request) return;
   motionAsked = true;
@@ -1801,10 +1819,10 @@ function useDeviceTilt(ref, enabled) {
       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);
+      const target = physicalCardDevicePosition(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)));
+      frame = requestAnimationFrame(() => applyTilt(element, physicalCardTiltAt(position.x, position.y)));
     };
     const onTouchStart = () => {
       touching = true;
@@ -1835,7 +1853,7 @@ function useCardTilt() {
     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);
+    const tilt = physicalCardTiltAt((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));
   };
@@ -1874,9 +1892,9 @@ function useCardScale(fitHeight, focus, scrollerSelector) {
     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;
+  const columns = !focus && width >= PHYSICAL_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 / PHYSICAL_CARD_WIDTH) : 1;
+  const scale = (fitHeight || focus) && height > 0 ? Math.max(0.6, Math.min(byWidth, height / PHYSICAL_CARD_HEIGHT)) : byWidth;
   return { ref, scale };
 }
 function useFitText(text, max, min) {
@@ -1951,9 +1969,9 @@ function PhysicalCardFocusView({ label, onClose, children }) {
     }, 0);
     window.addEventListener("pointerup", release, { once: true });
     window.addEventListener("pointercancel", release, { once: true });
-    window.addEventListener("touchend", requestMotionAccess);
+    window.addEventListener("touchend", requestPhysicalCardMotionAccess);
     return () => {
-      window.removeEventListener("touchend", requestMotionAccess);
+      window.removeEventListener("touchend", requestPhysicalCardMotionAccess);
       window.removeEventListener("pointerup", release);
       window.removeEventListener("pointercancel", release);
       dialog.close();
@@ -2035,7 +2053,7 @@ var PhysicalCardView = forwardRef(function PhysicalCardView2({
   const pages = distribution.key === contentKey && distribution.pages.length === rules.length ? distribution.pages : zeros();
   const tables = useRef([]);
   useLayoutEffect(() => {
-    const next = nextDistribution(pages, (table) => {
+    const next = nextPhysicalCardDistribution(pages, (table) => {
       const element = tables.current[table];
       return !!element && element.scrollHeight > element.clientHeight + 1;
     });
@@ -2171,17 +2189,17 @@ var PhysicalCardView = forwardRef(function PhysicalCardView2({
     ] }),
     /* @__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 position = { left: row * PHYSICAL_CARD_BYSTANDER_DIAL_STEP.x, top: row * PHYSICAL_CARD_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 backs = physicalCardBackCount(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` };
+  const style = { "--hc-card-scale": scale, "--hc-card-front-table-height": `${layout.frontTableHeight}px`, "--hc-card-back-table-height": `${PHYSICAL_CARD_BACK_TABLE_HEIGHT}px`, "--hc-card-width": `${PHYSICAL_CARD_WIDTH}px`, "--hc-card-height": `${PHYSICAL_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 }),
@@ -2238,8 +2256,8 @@ var PhysicalCardView = forwardRef(function PhysicalCardView2({
     tip && tipSlot
   ] });
 });
-var TILE_SIZE = 64;
-var EDGE_SIZE = TILE_SIZE / 16;
+var MAP_TILE_SIZE = 64;
+var EDGE_SIZE = MAP_TILE_SIZE / 16;
 var WALL_SIZE = EDGE_SIZE * 2;
 var MAX_EDGES = 4;
 var HINDERING_TILE_COLOR = "#B4ECB4";
@@ -2249,9 +2267,9 @@ 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],
+var MAP_ELEVATION_TILE_COLORS = ["#FFFFFF", "#FB7A7F", "#D0424C", "#B02020", "#902020", "#702020"];
+var MAP_TERRAIN_TILE_COLORS = {
+  clear: MAP_ELEVATION_TILE_COLORS[0],
   hindering: HINDERING_TILE_COLOR,
   blocking: BLOCKING_TILE_COLOR,
   water: WATER_TILE_COLOR,
@@ -2260,7 +2278,7 @@ var TERRAIN_TILE_COLORS = {
   special: SPECIAL_TILE_COLOR,
   special2: SPECIAL_TILE_COLOR
 };
-var TERRAIN_EDGE_COLORS = {
+var MAP_TERRAIN_EDGE_COLORS = {
   clear: "#FFFFFF",
   hindering: "#3ACE3A",
   blocking: "#76491E",
@@ -2271,9 +2289,9 @@ var TERRAIN_EDGE_COLORS = {
   special2: "#FF7600"
 };
 var STARTING_ZONE_EDGE_COLOR = "#D560A9";
-var ELEVATION_EDGE_COLOR = "#FF0000";
-var INDOOR_EDGE_COLOR = "#FFFF00";
-var WALL_COLORS = {
+var MAP_ELEVATION_EDGE_COLOR = "#FF0000";
+var MAP_INDOOR_EDGE_COLOR = "#FFFF00";
+var MAP_WALL_COLORS = {
   normal: "#000000",
   glass: "#E59400",
   glass2: "#33BBFF",
@@ -2316,8 +2334,8 @@ var Tile = class {
     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];
+    else if (typeof this.elevation === "string") this.fillStyle = MAP_ELEVATION_TILE_COLORS[1];
+    else this.fillStyle = MAP_ELEVATION_TILE_COLORS[this.elevation - 1] ?? MAP_ELEVATION_TILE_COLORS[0];
   }
   addEdge(edgeType, strokeStyle, dashed) {
     while (this.edges[edgeType]) edgeType += 4;
@@ -2332,7 +2350,7 @@ var Tile = class {
   }
   draw(ctx) {
     ctx.fillStyle = this.fillStyle;
-    ctx.fillRect(this.x * TILE_SIZE, this.y * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+    ctx.fillRect(this.x * MAP_TILE_SIZE, this.y * MAP_TILE_SIZE, MAP_TILE_SIZE, MAP_TILE_SIZE);
   }
   drawEdges(ctx) {
     const edgeLevels = [-1, -1, -1, -1];
@@ -2366,27 +2384,27 @@ var Tile = class {
     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;
+        x0 = x1 = this.x * MAP_TILE_SIZE + EDGE_SIZE / 2 + EDGE_SIZE * level;
+        y0 = this.y * MAP_TILE_SIZE - oTop;
+        y1 = (this.y + 1) * MAP_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;
+        x0 = x1 = (this.x + 1) * MAP_TILE_SIZE - EDGE_SIZE / 2 - EDGE_SIZE * level;
+        y0 = this.y * MAP_TILE_SIZE - oTop;
+        y1 = (this.y + 1) * MAP_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;
+        x0 = this.x * MAP_TILE_SIZE - oLeft;
+        y0 = y1 = this.y * MAP_TILE_SIZE + EDGE_SIZE / 2 + EDGE_SIZE * level;
+        x1 = (this.x + 1) * MAP_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;
+        x0 = this.x * MAP_TILE_SIZE - oLeft;
+        y0 = y1 = (this.y + 1) * MAP_TILE_SIZE - EDGE_SIZE / 2 - EDGE_SIZE * level;
+        x1 = (this.x + 1) * MAP_TILE_SIZE + oRight;
         lineDashOffset = oLeft;
         break;
     }
@@ -2410,33 +2428,33 @@ var Tile = class {
   }
   drawRamp(ctx, angle) {
     ctx.save();
-    ctx.translate(this.x * TILE_SIZE + TILE_SIZE / 2, this.y * TILE_SIZE + TILE_SIZE / 2);
+    ctx.translate(this.x * MAP_TILE_SIZE + MAP_TILE_SIZE / 2, this.y * MAP_TILE_SIZE + MAP_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.lineTo(-(MAP_TILE_SIZE / 2 - EDGE_SIZE * 2), MAP_TILE_SIZE / 2 - EDGE_SIZE);
+    ctx.lineTo(MAP_TILE_SIZE / 2 - EDGE_SIZE * 2, MAP_TILE_SIZE / 2 - EDGE_SIZE);
     ctx.closePath();
     ctx.lineWidth = EDGE_SIZE * 2;
-    ctx.strokeStyle = ELEVATION_EDGE_COLOR;
+    ctx.strokeStyle = MAP_ELEVATION_EDGE_COLOR;
     ctx.stroke();
-    ctx.fillStyle = ELEVATION_TILE_COLORS[1];
+    ctx.fillStyle = MAP_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.fillText(String(this.elevation), 0, MAP_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);
+    ctx.translate(this.x * MAP_TILE_SIZE + MAP_TILE_SIZE / 2, this.y * MAP_TILE_SIZE + MAP_TILE_SIZE / 2);
     if (this.label) {
       text = this.label.text;
-      ctx.fillStyle = this.label.color ?? ELEVATION_EDGE_COLOR;
+      ctx.fillStyle = this.label.color ?? MAP_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);
@@ -2503,10 +2521,10 @@ var HCMap = class {
   }
   tryAddEdge(t0, t1, edgeType) {
     if (this.type === "indoorOutdoor" && t0.type === "indoor" && (t1 == null || t1.type === "outdoor")) {
-      t0.addEdge(edgeType, INDOOR_EDGE_COLOR, false);
+      t0.addEdge(edgeType, MAP_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);
+      t0.addEdge(edgeType, MAP_ELEVATION_EDGE_COLOR, false);
     }
     if (t0.isStartingZone && (t1 == null || !t1.isStartingZone)) {
       t0.addEdge(edgeType, STARTING_ZONE_EDGE_COLOR, false);
@@ -2516,7 +2534,7 @@ var HCMap = class {
     }
     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);
+      t0.addEdge(edgeType, MAP_TERRAIN_EDGE_COLORS[t0.terrain] ?? "#FFFFFF", dashed);
     }
   }
   draw(ctx) {
@@ -2531,7 +2549,7 @@ var HCMap = class {
     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.strokeRect(x * MAP_TILE_SIZE, y * MAP_TILE_SIZE, MAP_TILE_SIZE, MAP_TILE_SIZE);
       }
     }
     ctx.restore();
@@ -2542,12 +2560,12 @@ var HCMap = class {
     }
     for (const z of this.ziplines) {
       ctx.save();
-      ctx.strokeStyle = WALL_COLORS.normal;
+      ctx.strokeStyle = MAP_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.moveTo(z.x0 * MAP_TILE_SIZE + MAP_TILE_SIZE / 2, z.y0 * MAP_TILE_SIZE + MAP_TILE_SIZE / 2);
+      ctx.lineTo(z.x1 * MAP_TILE_SIZE + MAP_TILE_SIZE / 2, z.y1 * MAP_TILE_SIZE + MAP_TILE_SIZE / 2);
       ctx.stroke();
       ctx.restore();
     }
@@ -2556,15 +2574,15 @@ var HCMap = class {
     const type = wall.type ?? "normal";
     ctx.lineWidth = WALL_SIZE;
     if (type === "levelSeparator") {
-      ctx.strokeStyle = WALL_COLORS.normal;
+      ctx.strokeStyle = MAP_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.moveTo(wall.x0 * MAP_TILE_SIZE, wall.y0 * MAP_TILE_SIZE);
+      ctx.lineTo(wall.x1 * MAP_TILE_SIZE, wall.y1 * MAP_TILE_SIZE);
       ctx.stroke();
       ctx.lineWidth = WALL_SIZE;
     }
-    ctx.strokeStyle = WALL_COLORS[type] ?? WALL_COLORS.normal;
+    ctx.strokeStyle = MAP_WALL_COLORS[type] ?? MAP_WALL_COLORS.normal;
     if (DASHED_WALLS.has(type)) {
       ctx.setLineDash([WALL_SIZE, WALL_SIZE]);
       ctx.lineDashOffset = WALL_SIZE / 2;
@@ -2572,8 +2590,8 @@ var HCMap = class {
       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.moveTo(wall.x0 * MAP_TILE_SIZE, wall.y0 * MAP_TILE_SIZE);
+    ctx.lineTo(wall.x1 * MAP_TILE_SIZE, wall.y1 * MAP_TILE_SIZE);
     ctx.stroke();
   }
 };
@@ -2590,14 +2608,14 @@ function mapSquare(map, x, y) {
     label: tile.label?.text
   };
 }
-function elevationLevel(elevation) {
+function mapElevationLevel(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));
+    for (let x = 0; x < map.width; x++) level = Math.max(level, mapElevationLevel(mapSquare(map, x, y).elevation));
   }
   return level;
 }
@@ -2628,7 +2646,7 @@ function inspectMap(map, x, y, tolerance = 0.16) {
   }
   return { square };
 }
-function squareCoordinate(square) {
+function mapSquareCoordinate(square) {
   let index = square.x + 1, column = "";
   while (index > 0) {
     index--;
@@ -2637,13 +2655,13 @@ function squareCoordinate(square) {
   }
   return `${column}${square.y + 1}`;
 }
-var LEVEL_HEIGHT = 0.62;
-var BASE_Z = -0.34;
+var MAP_SCENE_LEVEL_HEIGHT = 0.62;
+var MAP_SCENE_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) {
+function mapSceneCell(scene, x, y) {
   if (x < 0 || y < 0 || x >= scene.width || y >= scene.height) return null;
   return scene.cells[y * scene.width + x];
 }
@@ -2654,9 +2672,9 @@ function buildMapScene(map) {
   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;
+      const level = mapElevationLevel(square.elevation);
+      const floor = (level - 1) * MAP_SCENE_LEVEL_HEIGHT - (square.terrain === "water" ? WATER_DROP : 0);
+      const top = square.terrain !== "blocking" ? floor + (TERRAIN_VOLUME[square.terrain] ?? 0) : square.environment === "indoor" ? maxLevel * MAP_SCENE_LEVEL_HEIGHT : floor + MAP_SCENE_LEVEL_HEIGHT;
       cells.push({ ...square, level, floor, top });
     }
   }
@@ -2671,7 +2689,7 @@ function buildMapScene(map) {
       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 sides = [[mx + nx * 0.25, my + ny * 0.25], [mx - nx * 0.25, my - ny * 0.25]].map(([px, py]) => mapSceneCell(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 });
@@ -2679,7 +2697,7 @@ function buildMapScene(map) {
   }
   const ramps = [];
   for (const ramp of map.ramps ?? []) {
-    const a = sceneCell(scene, ramp.x0, ramp.y0), b = sceneCell(scene, ramp.x1, ramp.y1);
+    const a = mapSceneCell(scene, ramp.x0, ramp.y0), b = mapSceneCell(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 });
@@ -2689,21 +2707,21 @@ function buildMapScene(map) {
     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
+    z: Math.max(mapSceneCell(scene, line.x0, line.y0)?.top ?? 0, mapSceneCell(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) {
+var MAP_DEFAULT_CAMERA = { azimuth: -32, tilt: 52, zoom: 1, panX: 0, panY: 0 };
+var MAP_TILT_RANGE = [6, 90];
+var MAP_ZOOM_RANGE = [1, 6];
+var clampMapValue = (value, min, max) => Math.min(max, Math.max(min, value));
+function makeMapProjection(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 cx2 = scene.width / 2, cy = scene.height / 2, midZ = (scene.maxTop + MAP_SCENE_BASE_Z) / 2;
   const halfWidth = Math.hypot(cx2, cy);
-  const halfHeight = Math.hypot(halfWidth, (scene.maxTop - BASE_Z) / 2);
+  const halfHeight = Math.hypot(halfWidth, (scene.maxTop - MAP_SCENE_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;
@@ -2724,21 +2742,21 @@ function makeProjection(scene, camera, viewport) {
     }
   };
 }
-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 clampMapPan(scene, camera, viewport) {
+  const limit = Math.hypot(scene.width, scene.height) / 2 * makeMapProjection(scene, camera, viewport).scale;
+  return { ...camera, panX: clampMapValue(camera.panX, -limit, limit), panY: clampMapValue(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]);
+function zoomMapCamera(scene, camera, viewport, factor, anchor = { x: 0, y: 0 }) {
+  const zoom = clampMapValue(camera.zoom * factor, MAP_ZOOM_RANGE[0], MAP_ZOOM_RANGE[1]);
   const applied = zoom / camera.zoom;
-  return clampPan(scene, {
+  return clampMapPan(scene, {
     ...camera,
     zoom,
     panX: anchor.x + (camera.panX - anchor.x) * applied,
     panY: anchor.y + (camera.panY - anchor.y) * applied
   }, viewport);
 }
-var CELL_SIDES = [
+var MAP_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 },
@@ -2752,7 +2770,7 @@ var inside = (px, py, polygon2) => {
   }
   return hit;
 };
-function pickScene(scene, view, px, py) {
+function pickMapScene(scene, view, px, py) {
   const items = [];
   for (const wall of scene.walls) {
     items.push({
@@ -2762,7 +2780,7 @@ function pickScene(scene, view, px, py) {
         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;
+        const t = length2 ? clampMapValue(((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 };
       }
     });
@@ -2778,12 +2796,12 @@ function pickScene(scene, view, px, py) {
           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) };
+          return { x: cell.x + clampMapValue(u, 0, 1), y: cell.y + clampMapValue(v, 0, 1) };
         }
-        for (const side of CELL_SIDES) {
+        for (const side of MAP_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;
+          const neighbor = mapSceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+          const low = neighbor ? neighbor.top : MAP_SCENE_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);
@@ -2802,7 +2820,7 @@ function pickScene(scene, view, px, py) {
   }
   return null;
 }
-function footprintOutline({ x, y, width, height, cells }, boardWidth, boardHeight) {
+function mapFootprintOutline({ 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 = [];
@@ -2857,27 +2875,27 @@ function face(ctx, points, color) {
   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;
+  if (cell.terrain === "blocking") return MAP_TERRAIN_EDGE_COLORS.blocking;
+  if (cell.level > 1) return MAP_ELEVATION_TILE_COLORS[Math.min(cell.level, MAP_ELEVATION_TILE_COLORS.length) - 1];
+  if (cell.terrain === "water") return MAP_TERRAIN_EDGE_COLORS.water;
+  if (cell.terrain === "hindering") return MAP_TERRAIN_EDGE_COLORS.hindering;
+  if (cell.terrain === "obscuring") return MAP_TERRAIN_EDGE_COLORS.obscuring;
+  if (cell.terrain === "window") return MAP_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) {
+  for (const side of MAP_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;
+    const neighbor = mapSceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+    const low = neighbor ? neighbor.top : MAP_SCENE_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) {
+    for (let z = 0; z < cell.top - 0.01; z += MAP_SCENE_LEVEL_HEIGHT) {
       if (z <= low + 0.01) continue;
       const [x0, y0] = point(ax, ay, z), [x1, y1] = point(bx, by, z);
       ctx.beginPath();
@@ -2891,13 +2909,13 @@ 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);
+  ctx.drawImage(texture, cell.x * MAP_TILE_SIZE, cell.y * MAP_TILE_SIZE, MAP_TILE_SIZE, MAP_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);
+  MAP_CELL_SIDES.forEach((side, index) => {
+    const neighbor = mapSceneCell(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);
@@ -2938,7 +2956,7 @@ function drawRamp(ctx, view, ramp) {
   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];
+  const color = MAP_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)]);
@@ -2958,7 +2976,7 @@ function drawWall(ctx, view, wall) {
   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");
+  const color = GLASS_COLORS[wall.type] ?? (wall.type === "normal" ? "#30343c" : MAP_WALL_COLORS[wall.type] ?? "#30343c");
   ctx.save();
   if (alpha) ctx.globalAlpha = alpha;
   if (wall.type === "door" || wall.type === "door2") {
@@ -2974,10 +2992,10 @@ function drawWall(ctx, view, wall) {
   ctx.restore();
 }
 function drawIndoorCurb(ctx, scene, view, cell) {
-  ctx.strokeStyle = INDOOR_EDGE_COLOR;
+  ctx.strokeStyle = MAP_INDOOR_EDGE_COLOR;
   ctx.lineWidth = 2;
-  for (const side of CELL_SIDES) {
-    const neighbor = sceneCell(scene, cell.x + side.dx, cell.y + side.dy);
+  for (const side of MAP_CELL_SIDES) {
+    const neighbor = mapSceneCell(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();
@@ -2987,7 +3005,7 @@ function drawIndoorCurb(ctx, scene, view, cell) {
   }
 }
 function drawFootprint(ctx, scene, view, footprint) {
-  const { squares, edges, corners } = footprintOutline(footprint, scene.width, scene.height);
+  const { squares, edges, corners } = mapFootprintOutline(footprint, scene.width, scene.height);
   if (!squares.length) return;
   const { top, valid } = footprint;
   const color = valid ? MOVE_VALID_COLOR : MOVE_INVALID_COLOR;
@@ -3034,7 +3052,7 @@ function drawHighlight(ctx, scene, view, highlight) {
   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 near = [[Math.floor(mx - 0.01), Math.floor(my - 0.01)], [Math.floor(mx + 0.01), Math.floor(my + 0.01)]].map(([x, y]) => mapSceneCell(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)";
@@ -3047,7 +3065,7 @@ function drawHighlight(ctx, scene, view, highlight) {
     ctx.lineCap = "butt";
     return;
   }
-  const cell = highlight.square && sceneCell(scene, highlight.square.x, highlight.square.y);
+  const cell = highlight.square && mapSceneCell(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)";
@@ -3058,7 +3076,7 @@ function drawHighlight(ctx, scene, view, highlight) {
 }
 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)]);
+  polygon(ctx, [view.point(-pad, -pad, MAP_SCENE_BASE_Z - 0.16), view.point(scene.width + pad, -pad, MAP_SCENE_BASE_Z - 0.16), view.point(scene.width + pad, scene.height + pad, MAP_SCENE_BASE_Z - 0.16), view.point(-pad, scene.height + pad, MAP_SCENE_BASE_Z - 0.16)]);
   ctx.fillStyle = "rgba(0,0,0,.14)";
   ctx.fill();
   const shadowDepth = 0.24;
@@ -3107,8 +3125,8 @@ 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;
+  full.width = json.width * MAP_TILE_SIZE;
+  full.height = json.height * MAP_TILE_SIZE;
   const fctx = full.getContext("2d");
   if (!fctx) return null;
   new HCMap(json).draw(fctx);
@@ -3157,7 +3175,7 @@ var MapBoardView = forwardRef(function MapBoardView2({ map, canvasLabel, selecti
         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 }),
+        /* @__PURE__ */ jsx("canvas", { ref: canvasRef, width: map.width * MAP_TILE_SIZE, height: map.height * MAP_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" }) })
       ]
     }
@@ -3226,31 +3244,33 @@ function MapEnvironmentView({ types, icons, labels, className }) {
 }
 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,
+  Dialog2 as Dialog,
   EquipmentIcon,
   Field,
   FilterBar,
   HCMap,
-  INDOOR_EDGE_COLOR,
   IconButton,
-  LEVEL_HEIGHT,
   ListRow,
+  MAP_CELL_SIDES,
+  MAP_DEFAULT_CAMERA,
+  MAP_ELEVATION_EDGE_COLOR,
+  MAP_ELEVATION_TILE_COLORS,
+  MAP_INDOOR_EDGE_COLOR,
+  MAP_SCENE_BASE_Z,
+  MAP_SCENE_LEVEL_HEIGHT,
+  MAP_TERRAIN_EDGE_COLORS,
+  MAP_TERRAIN_TILE_COLORS,
   MAP_THUMBNAIL_HEIGHT,
+  MAP_TILE_SIZE,
+  MAP_TILT_RANGE,
+  MAP_WALL_COLORS,
+  MAP_ZOOM_RANGE,
   MINI_DIAL_STATS,
   MapBoardPlaceholder,
   MapBoardView,
@@ -3267,7 +3287,11 @@ export {
   MenuSeparator,
   Meter,
   MiniDialView,
+  PHYSICAL_CARD_BACK_TABLE_HEIGHT,
+  PHYSICAL_CARD_BYSTANDER_DIAL_STEP,
+  PHYSICAL_CARD_HEIGHT,
   PHYSICAL_CARD_STATS,
+  PHYSICAL_CARD_WIDTH,
   PageHeader,
   PanelHeader,
   PhysicalCardFocusView,
@@ -3285,35 +3309,30 @@ export {
   StatGlyphView,
   StatIcon,
   Surface,
-  TERRAIN_EDGE_COLORS,
-  TERRAIN_TILE_COLORS,
-  TILE_SIZE,
-  TILT_RANGE,
   Table,
-  WALL_COLORS,
-  ZOOM_RANGE,
-  backCount,
   buildMapScene,
-  clamp,
-  clampPan,
-  devicePosition,
+  clampMapPan,
+  clampMapValue,
   drawMapScene,
-  elevationLevel,
-  footprintOutline,
   inspectMap,
-  makeProjection,
+  makeMapProjection,
+  mapElevationLevel,
   mapEnvironments,
+  mapFootprintOutline,
   mapMaxLevel,
+  mapSceneCell,
   mapSquare,
-  nextDistribution,
-  pickScene,
+  mapSquareCoordinate,
+  nextPhysicalCardDistribution,
+  physicalCardBackCount,
+  physicalCardDevicePosition,
+  physicalCardTiltAt,
+  physicalCardTiltStyles,
+  pickMapScene,
   placePopup,
+  portalContainerFor,
   renderMapThumbnail,
-  requestMotionAccess,
-  sceneCell,
-  squareCoordinate,
-  tiltAt,
-  tiltStyles,
+  requestPhysicalCardMotionAccess,
   useImageChain,
-  zoomCamera
+  zoomMapCamera
 };