@eyeon/map 2.0.0

package/README.md

@@ -0,0 +1,27 @@
+# @eyeon/map (Center Map v2)
+
+DB-driven center map: pure-TS core, three.js viewer, SVG/DOM editor.
+
+## Subpath exports
+
+```ts
+import { importSvg, compileDocument, findPath } from '@eyeon/map/core';
+import { MapViewer } from '@eyeon/map/viewer';
+import { MapEditor } from '@eyeon/map/editor';
+import '@eyeon/map/viewer/index.css';
+import '@eyeon/map/editor/index.css';
+```
+
+## Reversibility
+
+- v2 never writes `mapit2_*`
+- v2 S3 objects live under `media/map/` only
+- `centers.map_version` (default `1`) is the only coupling
+- Absent / unknown version → v1
+
+## Scripts
+
+```sh
+npm test
+npm run build
+```

package/dist/assets/MapViewer.css

@@ -0,0 +1 @@
+.eyeon-map-viewer{position:relative;width:100%;height:100%;min-height:320px;overflow:hidden;background:var(--map-bg, #f5f5f5);font-family:system-ui,-apple-system,sans-serif;font-size:13px;color:#0f172a}.eyeon-map-viewer__canvas{position:absolute;top:0;right:0;bottom:0;left:0}.eyeon-map-viewer__loading,.eyeon-map-viewer__error{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem}.eyeon-map-chrome{position:absolute;z-index:2;top:12px;left:12px;width:min(320px,calc(100% - 24px));display:flex;flex-direction:column;gap:8px;pointer-events:none}.eyeon-map-chrome>*{pointer-events:auto}.eyeon-map-chrome__top{display:flex;flex-direction:column;gap:8px}.eyeon-map-chrome__search-toggle{align-self:flex-start;border:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px #0f172a1f;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer}.eyeon-map-chrome__amenities{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;background:#ffffffeb;border-radius:10px;padding:8px;box-shadow:0 1px 4px #0f172a1a}.eyeon-map-chrome__amenity{width:40px;height:40px;border:0;border-radius:8px;background:#f1f5f9;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}.eyeon-map-chrome__panel{background:#fff;border-radius:12px;box-shadow:0 8px 24px #0f172a24;padding:10px;max-height:min(60vh,480px);overflow:auto;animation:eyeon-map-slide .16s ease-out}@keyframes eyeon-map-slide{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.eyeon-map-chrome__search-input{width:100%;border:1px solid #e2e8f0;border-radius:8px;padding:8px 10px;font-size:13px;margin-bottom:8px}.eyeon-map-chrome__group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b;margin:8px 0 4px}.eyeon-map-chrome__item{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 4px;border-radius:6px;cursor:pointer;font-size:13px}.eyeon-map-chrome__item:hover{background:#f1f5f9}.eyeon-map-chrome__detail{border-top:1px solid #e2e8f0;margin-top:8px;padding-top:8px}.eyeon-map-chrome__detail-title{font-weight:700}.eyeon-map-chrome__detail-meta{color:#64748b;font-size:12px}.eyeon-map-chrome__route{display:grid;gap:6px;margin-top:10px;border-top:1px solid #e2e8f0;padding-top:8px}.eyeon-map-chrome__route label{display:grid;gap:4px;font-size:11px;font-weight:600;color:#475569}.eyeon-map-chrome__route select{font-size:12px;padding:6px;border-radius:6px;border:1px solid #e2e8f0}.eyeon-map-chrome__accessible{display:flex!important;align-items:center;gap:6px;font-weight:500!important}.eyeon-map-chrome__floors{position:absolute;right:12px;bottom:12px;left:auto;top:auto;display:flex;gap:6px;width:auto}.eyeon-map-chrome__floor{border:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px #0f172a1f;padding:8px 10px;font-size:12px;font-weight:600;cursor:pointer}.eyeon-map-chrome__floor.is-active{background:var(--map-accent, #2563eb);color:#fff}

package/dist/assets/index.css

@@ -0,0 +1 @@
+.eyeon-map-editor{display:grid;grid-template-columns:220px 1fr 260px;height:100%;min-height:560px;background:#f8fafc;color:#0f172a;font-family:system-ui,-apple-system,sans-serif;font-size:12px}.eyeon-map-rail{display:flex;flex-direction:column;border-right:1px solid #e2e8f0;background:#fff;min-width:0}.eyeon-map-rail__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:6px;border-bottom:1px solid #e2e8f0}.eyeon-map-rail__tabs button{border:0;background:transparent;border-radius:6px;padding:6px 4px;font-size:11px;font-weight:600;cursor:pointer;color:#64748b}.eyeon-map-rail__tabs button.is-active{background:#eff6ff;color:#1d4ed8}.eyeon-map-rail__body{overflow:auto;padding:8px;flex:1}.eyeon-map-rail__heading{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;margin:8px 0 4px}.eyeon-map-rail__row{display:flex;justify-content:space-between;gap:6px;width:100%;text-align:left;border:0;background:transparent;border-radius:6px;padding:6px 8px;cursor:pointer;font-size:12px}.eyeon-map-rail__row.is-active,.eyeon-map-rail__row:hover{background:#f1f5f9}.eyeon-map-rail__muted{color:#94a3b8;font-size:10px}.eyeon-map-rail__hint{color:#64748b;line-height:1.4;margin:0 0 8px}.eyeon-map-rail__actions{display:grid;gap:6px;margin-top:10px}.eyeon-map-rail__file{display:grid;gap:4px;font-weight:600;font-size:11px}.eyeon-map-rail__file input{font-size:11px}.eyeon-map-rail__field{display:grid;gap:4px;margin-bottom:8px;font-size:11px;font-weight:600;color:#475569}.eyeon-map-rail__field input,.eyeon-map-rail__field select{font-size:12px;padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px}.eyeon-map-editor__center{display:flex;flex-direction:column;min-width:0}.eyeon-map-editor__toolbar{display:flex;justify-content:space-between;gap:8px;padding:6px 8px;border-bottom:1px solid #e2e8f0;background:#fff}.eyeon-map-editor__tools,.eyeon-map-editor__actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.eyeon-map-editor__toolbar button{border:1px solid #e2e8f0;background:#fff;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;cursor:pointer}.eyeon-map-editor__toolbar button.is-active,.eyeon-map-editor__publish{background:#2563eb;border-color:#2563eb;color:#fff}.eyeon-map-editor__angle{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600}.eyeon-map-editor__angle input{width:56px;font-size:11px;padding:3px 6px;border:1px solid #e2e8f0;border-radius:4px}.eyeon-map-editor__canvas-wrap{flex:1;min-height:0;position:relative}.eyeon-map-canvas{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:linear-gradient(#e2e8f0 1px,transparent 1px) 0 0 / 24px 24px,linear-gradient(90deg,#e2e8f0 1px,transparent 1px) 0 0 / 24px 24px,#f8fafc}.eyeon-map-canvas__svg{width:100%;height:100%;touch-action:none}.eyeon-map-canvas__empty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#94a3b8}.eyeon-map-inspector{border-left:1px solid #e2e8f0;background:#fff;padding:10px;overflow:auto}.eyeon-map-inspector__heading{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#94a3b8;margin:10px 0 6px}.eyeon-map-inspector__empty{color:#94a3b8;padding:12px 4px}.eyeon-map-inspector__save{margin-top:10px;width:100%;border:0;border-radius:6px;background:#2563eb;color:#fff;padding:8px;font-size:12px;font-weight:600;cursor:pointer}.eyeon-map-preview,.eyeon-map-preview__loading{position:absolute;top:0;right:0;bottom:0;left:0}

package/dist/chunks/MapViewer.js

@@ -0,0 +1,530 @@
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { useMemo as T, useState as R, useEffect as z, Suspense as U } from "react";
+import { f as X, e as K, q as W } from "./pathfinding.js";
+import { Canvas as j } from "@react-three/fiber";
+import { OrthographicCamera as q, OrbitControls as V } from "@react-three/drei";
+import * as S from "three";
+function Q(l, i, a) {
+  if (a) return a;
+  switch (l) {
+    case "unit":
+      return i.STORE_DEFAULT_COLOR;
+    case "walkable":
+      return i.WALKABLE_COLOR;
+    case "wall":
+    case "boundary":
+      return i.WALL_COLOR;
+    case "parking_zone":
+      return i.PARKING_ZONE_COLOR;
+    case "green_area":
+      return i.GREEN_AREA_COLOR;
+    case "water":
+      return i.WATER_COLOR;
+    case "floorplate":
+      return i.BASE_COLOR;
+    case "void":
+      return "#00000000";
+    default:
+      return "#e2e8f0";
+  }
+}
+function Z(l) {
+  if (l.length < 3) return null;
+  const i = new S.Shape();
+  i.moveTo(l[0].x, l[0].y);
+  for (let a = 1; a < l.length; a++)
+    i.lineTo(l[a].x, l[a].y);
+  return i.closePath(), i;
+}
+function J({
+  level: l,
+  theme: i,
+  is3d: a,
+  selectedRetailerId: p,
+  onSelectShape: k
+}) {
+  const y = T(() => l.shapes.filter((o) => o.kind !== "void").map((o) => {
+    var _;
+    const A = o.geometry.polygons.map(Z).filter((b) => b != null);
+    if (A.length === 0) return null;
+    const s = p != null && ((_ = o.assignment) == null ? void 0 : _.retailerId) === p, v = s ? i.ACCENT_COLOR : Q(o.kind, i, o.style.fill), n = a && (o.kind === "unit" || o.kind === "wall") ? o.style.extrudeHeight ?? (o.kind === "unit" ? i.STORE_HEIGHT : 2) : 0;
+    return { shape: o, threeShapes: A, color: v, extrude: n, selected: s };
+  }).filter(Boolean), [l, i, a, p]);
+  return /* @__PURE__ */ t("group", { children: y.map(({ shape: o, threeShapes: h, color: A, extrude: s, selected: v }) => /* @__PURE__ */ t("group", { children: h.map((n, _) => /* @__PURE__ */ g(
+    "mesh",
+    {
+      position: [0, 0, o.zIndex * 0.01],
+      onClick: (b) => {
+        b.stopPropagation(), (o.kind === "unit" || o.kind === "amenity" || o.kind === "kiosk_screen" || o.kind === "entrance") && (k == null || k(o.id));
+      },
+      children: [
+        s > 0 ? /* @__PURE__ */ t(
+          "extrudeGeometry",
+          {
+            args: [
+              n,
+              { depth: s, bevelEnabled: !1 }
+            ]
+          }
+        ) : /* @__PURE__ */ t("shapeGeometry", { args: [n] }),
+        /* @__PURE__ */ t(
+          "meshBasicMaterial",
+          {
+            color: A,
+            transparent: o.style.transparent || o.kind === "amenity",
+            opacity: o.style.opacity ?? (o.kind === "amenity" ? 0.01 : 1),
+            side: S.DoubleSide
+          }
+        ),
+        v && /* @__PURE__ */ g("lineSegments", { children: [
+          /* @__PURE__ */ t(
+            "edgesGeometry",
+            {
+              args: [
+                s > 0 ? new S.ExtrudeGeometry(n, {
+                  depth: s,
+                  bevelEnabled: !1
+                }) : new S.ShapeGeometry(n)
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("lineBasicMaterial", { color: i.ACCENT_COLOR })
+        ] })
+      ]
+    },
+    `${o.id}-${_}`
+  )) }, o.id)) });
+}
+function ee({
+  route: l,
+  activeLevelId: i,
+  color: a
+}) {
+  const p = T(() => l.points.filter((y) => i == null || y.levelId === i).map((y) => new S.Vector3(y.x, y.y, 2)), [l, i]);
+  if (p.length < 2) return null;
+  const k = new S.CatmullRomCurve3(p);
+  return /* @__PURE__ */ g("mesh", { children: [
+    /* @__PURE__ */ t("tubeGeometry", { args: [k, Math.max(p.length * 4, 8), 1.5, 8, !1] }),
+    /* @__PURE__ */ t("meshBasicMaterial", { color: a })
+  ] });
+}
+function ne({
+  doc: l,
+  theme: i,
+  activeLevelId: a,
+  route: p,
+  selectedRetailerId: k,
+  onSelectShape: y
+}) {
+  const o = i.MAP_STYLE === "3D", h = T(() => {
+    let s = 1 / 0, v = 1 / 0, n = -1 / 0, _ = -1 / 0;
+    for (const b of l.levels)
+      if (!(a != null && b.id !== a && b.kind !== "outdoor"))
+        for (const x of b.shapes)
+          s = Math.min(s, x.bbox.minX), v = Math.min(v, x.bbox.minY), n = Math.max(n, x.bbox.maxX), _ = Math.max(_, x.bbox.maxY);
+    return Number.isFinite(s) ? {
+      cx: (s + n) / 2,
+      cy: (v + _) / 2,
+      size: Math.max(n - s, _ - v, 100)
+    } : { cx: 0, cy: 0, size: 500 };
+  }, [l, a]), A = 800 / h.size;
+  return /* @__PURE__ */ g(
+    j,
+    {
+      style: { width: "100%", height: "100%", background: i.MAP_BACKGROUND_COLOR },
+      orthographic: !o,
+      camera: o ? { position: [h.cx, h.cy - h.size, h.size], fov: 50, near: 1, far: 1e4 } : void 0,
+      children: [
+        !o && /* @__PURE__ */ t(
+          q,
+          {
+            makeDefault: !0,
+            position: [h.cx, h.cy, 500],
+            zoom: A,
+            near: 0.1,
+            far: 5e3
+          }
+        ),
+        /* @__PURE__ */ t("ambientLight", { intensity: 0.85 }),
+        /* @__PURE__ */ t("directionalLight", { position: [200, 400, 200], intensity: 0.4 }),
+        l.levels.map((s) => s.kind === "outdoor" || a == null || s.id === a ? /* @__PURE__ */ t(
+          J,
+          {
+            level: s,
+            theme: i,
+            is3d: o,
+            selectedRetailerId: k,
+            onSelectShape: (n) => y == null ? void 0 : y(n, s.id)
+          },
+          s.id
+        ) : null),
+        p && /* @__PURE__ */ t(ee, { route: p, activeLevelId: a, color: i.ACCENT_COLOR }),
+        /* @__PURE__ */ t(
+          V,
+          {
+            enableRotate: o,
+            enablePan: !0,
+            target: [h.cx, h.cy, 0],
+            maxDistance: i.CAMERA_MAX_DISTANCE,
+            minDistance: i.CAMERA_MIN_DISTANCE
+          }
+        )
+      ]
+    }
+  );
+}
+function te({
+  doc: l,
+  amenities: i,
+  searchOpen: a,
+  onSearchOpenChange: p,
+  activeLevelId: k,
+  onActiveLevelChange: y,
+  fromAnchorId: o,
+  toAnchorId: h,
+  onFromChange: A,
+  onToChange: s,
+  accessibleOnly: v,
+  onAccessibleOnlyChange: n,
+  route: _
+}) {
+  const [b, x] = R(""), [P, D] = R(null), E = T(() => {
+    var f, d;
+    const e = [];
+    for (const N of l.levels)
+      for (const I of N.shapes) {
+        const M = N.anchors.find((w) => w.shapeId === I.id) ?? null;
+        if (I.kind === "unit" && ((f = I.assignment) != null && f.retailerId) && e.push({
+          id: `store-${I.id}`,
+          label: I.assignment.customLabel || I.label.text || I.key,
+          group: N.name,
+          anchorId: (M == null ? void 0 : M.id) ?? null,
+          levelId: N.id,
+          kind: "store"
+        }), I.kind === "amenity" && ((d = I.assignment) != null && d.amenityId)) {
+          const w = i.find((B) => B.id === I.assignment.amenityId);
+          e.push({
+            id: `amenity-${I.id}`,
+            label: (w == null ? void 0 : w.name) ?? I.key,
+            group: "Amenities",
+            anchorId: (M == null ? void 0 : M.id) ?? null,
+            levelId: N.id,
+            kind: "amenity"
+          });
+        }
+      }
+    return e;
+  }, [l, i]), G = T(() => {
+    const e = b.trim().toLowerCase();
+    return e ? E.filter((f) => f.label.toLowerCase().includes(e)) : E;
+  }, [E, b]), $ = T(() => {
+    const e = /* @__PURE__ */ new Map();
+    for (const f of G) {
+      const d = e.get(f.group) ?? [];
+      d.push(f), e.set(f.group, d);
+    }
+    return Array.from(e.entries());
+  }, [G]), L = E.filter((e) => e.anchorId != null);
+  return /* @__PURE__ */ g("div", { className: "eyeon-map-chrome", children: [
+    /* @__PURE__ */ g("div", { className: "eyeon-map-chrome__top", children: [
+      /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "eyeon-map-chrome__search-toggle",
+          onClick: () => p(!a),
+          "aria-expanded": a,
+          children: a ? "Close" : "Search"
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__amenities", children: i.map((e) => /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: "eyeon-map-chrome__amenity",
+          title: e.name,
+          onClick: () => {
+            const f = E.find(
+              (d) => d.kind === "amenity" && d.label === e.name && d.anchorId != null
+            );
+            (f == null ? void 0 : f.anchorId) != null && (s(f.anchorId), y(f.levelId));
+          },
+          children: e.builtinIcon ? /* @__PURE__ */ t("span", { className: "eyeon-map-chrome__amenity-icon", children: e.builtinIcon }) : /* @__PURE__ */ t("span", { className: "eyeon-map-chrome__amenity-label", children: e.name.slice(0, 2) })
+        },
+        e.id
+      )) })
+    ] }),
+    a && /* @__PURE__ */ g("div", { className: "eyeon-map-chrome__panel", children: [
+      /* @__PURE__ */ t(
+        "input",
+        {
+          className: "eyeon-map-chrome__search-input",
+          placeholder: "Search stores & amenities",
+          value: b,
+          onChange: (e) => x(e.target.value),
+          autoFocus: !0
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__groups", children: $.map(([e, f]) => /* @__PURE__ */ g("div", { className: "eyeon-map-chrome__group", children: [
+        /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__group-title", children: e }),
+        f.map((d) => /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "eyeon-map-chrome__item",
+            onClick: () => {
+              D(d), d.anchorId != null && (s(d.anchorId), y(d.levelId));
+            },
+            children: d.label
+          },
+          d.id
+        ))
+      ] }, e)) }),
+      P && /* @__PURE__ */ g("div", { className: "eyeon-map-chrome__detail", children: [
+        /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__detail-title", children: P.label }),
+        /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__detail-meta", children: P.group })
+      ] }),
+      /* @__PURE__ */ g("div", { className: "eyeon-map-chrome__route", children: [
+        /* @__PURE__ */ g("label", { children: [
+          "From",
+          /* @__PURE__ */ g(
+            "select",
+            {
+              value: o ?? "",
+              onChange: (e) => A(e.target.value ? Number(e.target.value) : null),
+              children: [
+                /* @__PURE__ */ t("option", { value: "", children: "Select start" }),
+                L.map((e) => /* @__PURE__ */ t("option", { value: e.anchorId, children: e.label }, e.id))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ g("label", { children: [
+          "To",
+          /* @__PURE__ */ g(
+            "select",
+            {
+              value: h ?? "",
+              onChange: (e) => s(e.target.value ? Number(e.target.value) : null),
+              children: [
+                /* @__PURE__ */ t("option", { value: "", children: "Select destination" }),
+                L.map((e) => /* @__PURE__ */ t("option", { value: e.anchorId, children: e.label }, e.id))
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ g("label", { className: "eyeon-map-chrome__accessible", children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "checkbox",
+              checked: v,
+              onChange: (e) => n(e.target.checked)
+            }
+          ),
+          "Accessible route"
+        ] }),
+        _ && /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__route-meta", children: _.levelChanges.length > 0 ? `${_.levelChanges.length} level change(s)` : "Same level" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "eyeon-map-chrome__floors", children: l.levels.filter((e) => e.kind === "floor").map((e) => /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: e.id === k ? "eyeon-map-chrome__floor is-active" : "eyeon-map-chrome__floor",
+        onClick: () => y(e.id),
+        children: e.name
+      },
+      e.id
+    )) })
+  ] });
+}
+async function ie(l) {
+  const i = l.replace(/\/$/, ""), a = await fetch(`${i}/v1/map/document`, { credentials: "include" });
+  if (!a.ok)
+    throw new Error(`Failed to load map document (${a.status})`);
+  return a.json();
+}
+function ce(l) {
+  const {
+    document: i,
+    webApiURI: a,
+    role: p = "WP_SITE",
+    kioskId: k = null,
+    selectedRetailerId: y = null,
+    themeOverrides: o,
+    onExtractedAmenities: h,
+    createRouteRef: A,
+    className: s,
+    style: v
+  } = l, [n, _] = R(i ?? null), [b, x] = R(null), [P, D] = R(null), [E, G] = R(null), [$, L] = R(null), [e, f] = R(!1), [d, N] = R(null), [I, M] = R(!1);
+  z(() => {
+    if (i) {
+      _(i);
+      return;
+    }
+    if (!a) return;
+    let r = !1;
+    return ie(a).then((c) => {
+      r || _(c);
+    }).catch((c) => {
+      r || x(c instanceof Error ? c.message : String(c));
+    }), () => {
+      r = !0;
+    };
+  }, [i, a]), z(() => {
+    var c;
+    if (!n) return;
+    d == null && n.levels.length > 0 && N(n.levels[0].id);
+    const r = /* @__PURE__ */ new Set();
+    for (const u of n.levels)
+      for (const m of u.shapes)
+        if (m.kind === "amenity" && ((c = m.assignment) == null ? void 0 : c.amenityId) != null) {
+          const C = n.amenities.find((O) => O.id === m.assignment.amenityId);
+          C && r.add(C.code);
+        }
+    h == null || h(Array.from(r));
+  }, [n, d, h]), z(() => {
+    var r;
+    if (!(!n || p !== "DISPLAY_APP" || k == null)) {
+      for (const c of n.levels)
+        for (const u of c.shapes)
+          if (u.kind === "kiosk_screen" && ((r = u.assignment) == null ? void 0 : r.kioskId) === k) {
+            const m = c.anchors.find((C) => C.shapeId === u.id);
+            m && G(m.id);
+          }
+    }
+  }, [n, p, k]);
+  const w = T(() => n ? X(
+    n.graph.nodes.map((r) => ({
+      id: r.id,
+      levelId: r.levelId,
+      shapeId: r.shapeId,
+      kind: r.kind,
+      x: r.x,
+      y: r.y,
+      connectorId: r.connectorId
+    })),
+    n.graph.edges.map((r) => ({
+      id: r.id,
+      mapId: n.mapId,
+      fromAnchorId: r.from,
+      toAnchorId: r.to,
+      weight: r.weight,
+      directed: r.directed,
+      accessible: r.accessible,
+      kind: r.kind
+    })),
+    n.connectors
+  ) : null, [n]), B = (r, c) => {
+    if (!w || r == null || c == null) {
+      D(null);
+      return;
+    }
+    const u = W(w, r, c, { accessibleOnly: e });
+    D(u);
+  };
+  z(() => {
+    B(E, $);
+  }, [E, $, e, w]), z(() => {
+    !A || !n || (A.current = {
+      createRouteToStore(r) {
+        var c;
+        for (const u of n.levels)
+          for (const m of u.shapes)
+            if (((c = m.assignment) == null ? void 0 : c.retailerId) === r) {
+              const C = u.anchors.find((O) => O.shapeId === m.id);
+              C && (L(C.id), N(u.id));
+            }
+      },
+      createRouteToAmenity(r) {
+        var u;
+        const c = n.amenities.find((m) => m.code === r);
+        if (c) {
+          for (const m of n.levels)
+            for (const C of m.shapes)
+              if (((u = C.assignment) == null ? void 0 : u.amenityId) === c.id) {
+                const O = m.anchors.find((H) => H.shapeId === C.id);
+                if (O) {
+                  L(O.id), N(m.id);
+                  return;
+                }
+              }
+        }
+      },
+      clearRoute() {
+        L(null), D(null);
+      }
+    });
+  }, [A, n]);
+  const F = {
+    ...K,
+    ...(n == null ? void 0 : n.theme) ?? {},
+    ...o ?? {}
+  };
+  if (b)
+    return /* @__PURE__ */ t("div", { className: `eyeon-map-viewer eyeon-map-viewer--error ${s ?? ""}`, style: v, children: /* @__PURE__ */ t("div", { className: "eyeon-map-viewer__error", children: b }) });
+  if (!n)
+    return /* @__PURE__ */ t("div", { className: `eyeon-map-viewer eyeon-map-viewer--loading ${s ?? ""}`, style: v, children: /* @__PURE__ */ t("div", { className: "eyeon-map-viewer__loading", children: "Loading map…" }) });
+  const Y = n.amenities.filter(
+    (r) => n.levels.some(
+      (c) => c.shapes.some((u) => {
+        var m;
+        return ((m = u.assignment) == null ? void 0 : m.amenityId) === r.id;
+      })
+    )
+  );
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: `eyeon-map-viewer eyeon-map-viewer--${p} ${s ?? ""}`,
+      style: {
+        ...v,
+        "--map-accent": F.ACCENT_COLOR,
+        "--map-bg": F.MAP_BACKGROUND_COLOR
+      },
+      children: [
+        p !== "DISPLAY_APP" && /* @__PURE__ */ t(
+          te,
+          {
+            doc: n,
+            amenities: Y,
+            searchOpen: I,
+            onSearchOpenChange: M,
+            activeLevelId: d,
+            onActiveLevelChange: N,
+            fromAnchorId: E,
+            toAnchorId: $,
+            onFromChange: G,
+            onToChange: L,
+            accessibleOnly: e,
+            onAccessibleOnlyChange: f,
+            route: P
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "eyeon-map-viewer__canvas", children: /* @__PURE__ */ t(U, { fallback: null, children: /* @__PURE__ */ t(
+          ne,
+          {
+            doc: n,
+            theme: F,
+            activeLevelId: d,
+            route: P,
+            selectedRetailerId: y,
+            onSelectShape: (r, c) => {
+              var C;
+              N(c);
+              const u = n.levels.find((O) => O.id === c), m = u == null ? void 0 : u.anchors.find((O) => O.shapeId === r);
+              m && L(m.id), (C = l.onSelectShape) == null || C.call(l, r);
+            }
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+export {
+  ne as M,
+  te as R,
+  ce as a
+};
+//# sourceMappingURL=MapViewer.js.map