@eyeon/map 2.0.0

package/dist/editor/index.js

@@ -0,0 +1,734 @@
+import { jsxs as r, jsx as n, Fragment as q } from "react/jsx-runtime";
+import { useRef as z, useState as h, useMemo as V, useEffect as J, Suspense as Q, useCallback as ee } from "react";
+import { v as Z, e as le } from "../chunks/pathfinding.js";
+import { w as ne } from "../chunks/graph-tools.js";
+import { a as ie } from "../chunks/MapViewer.js";
+function F(i) {
+  return i.map((l) => {
+    if (l.length === 0) return "";
+    let p = `M ${l[0].x} ${l[0].y}`;
+    for (let d = 1; d < l.length; d++) p += ` L ${l[d].x} ${l[d].y}`;
+    return p += " Z", p;
+  }).join(" ");
+}
+function ae({
+  level: i,
+  shapes: l,
+  anchors: p,
+  edges: d,
+  theme: f,
+  tool: y,
+  baseAngle: K,
+  selectedShapeId: D,
+  selectedAnchorIds: _,
+  baseSvgUrl: I,
+  onSelectShape: C,
+  onSelectAnchors: t,
+  onCreateRoutePoint: u,
+  onMoveAnchor: S,
+  onCreateShape: O
+}) {
+  const M = z(null), [b, E] = h({ x: 0, y: 0 }), [m, B] = h(1), [k, R] = h([]), [A, U] = h(null), [$, o] = h(null), g = z(null), v = (i == null ? void 0 : i.sourceViewbox) ?? { x: 0, y: 0, width: 1e3, height: 800 }, w = (e, c) => {
+    const s = M.current;
+    if (!s) return { x: 0, y: 0 };
+    const L = s.getBoundingClientRect(), T = (e - L.left - b.x) / m, a = (c - L.top - b.y) / m;
+    return { x: T + v.x, y: a + v.y };
+  }, Y = V(
+    () => new Map(p.map((e) => [e.id, e])),
+    [p]
+  ), X = (e) => {
+    if (y === "pan" || e.button === 1) {
+      g.current = { x: e.clientX, y: e.clientY, panX: b.x, panY: b.y };
+      return;
+    }
+    const c = w(e.clientX, e.clientY);
+    if (y === "draw-route") {
+      const s = $ ? Z(Y.get($) ?? c, c, K) : c;
+      u(s, $);
+      return;
+    }
+    y === "draw-unit" && R([c]);
+  }, j = (e) => {
+    if (g.current) {
+      E({
+        x: g.current.panX + (e.clientX - g.current.x),
+        y: g.current.panY + (e.clientY - g.current.y)
+      });
+      return;
+    }
+    if (A != null) {
+      const c = w(e.clientX, e.clientY);
+      S(A, c.x, c.y);
+      return;
+    }
+    if (y === "draw-unit" && k.length > 0) {
+      const c = w(e.clientX, e.clientY);
+      R((s) => [...s.slice(0, -1), s[s.length - 1], c].slice(0, -0) || [...s.slice(0, -1), c]), R((s) => s.length === 0 ? s : [...s.slice(0, -1), c]);
+    }
+  }, x = () => {
+    if (g.current = null, A != null) {
+      const e = p.find((c) => c.id === A);
+      if (e) {
+        const c = p.filter((s) => s.id !== e.id).filter((s) => Math.hypot(s.x - e.x, s.y - e.y) <= 2.5).map((s) => s.id);
+        c.length && t([e.id, ...c]);
+      }
+      U(null);
+    }
+  }, G = () => {
+    if (k.length < 3) {
+      R([]);
+      return;
+    }
+    const e = {
+      paths: [
+        {
+          d: F([k]),
+          closed: !0
+        }
+      ],
+      polygons: [k]
+    };
+    O("unit", e), R([]);
+  };
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "eyeon-map-canvas",
+      onWheel: (e) => {
+        e.preventDefault(), B((c) => Math.min(8, Math.max(0.2, c * (e.deltaY > 0 ? 0.9 : 1.1))));
+      },
+      children: [
+        /* @__PURE__ */ n(
+          "svg",
+          {
+            ref: M,
+            className: "eyeon-map-canvas__svg",
+            viewBox: `${v.x} ${v.y} ${v.width} ${v.height}`,
+            onPointerDown: X,
+            onPointerMove: j,
+            onPointerUp: x,
+            onDoubleClick: () => {
+              y === "draw-unit" && G();
+            },
+            children: /* @__PURE__ */ r("g", { transform: `translate(${b.x / m}, ${b.y / m}) scale(${m})`, children: [
+              I && /* @__PURE__ */ n(
+                "image",
+                {
+                  href: I,
+                  x: v.x,
+                  y: v.y,
+                  width: v.width,
+                  height: v.height,
+                  opacity: 0.85
+                }
+              ),
+              l.map((e) => /* @__PURE__ */ n(
+                "path",
+                {
+                  d: e.geometry.paths.map((c) => c.d).join(" ") || F(e.geometry.polygons),
+                  fill: e.style.fill ?? (e.kind === "walkable" ? f.WALKABLE_COLOR : e.kind === "unit" ? f.STORE_DEFAULT_COLOR : "#cbd5e1"),
+                  fillOpacity: e.kind === "amenity" ? 0.15 : 0.85,
+                  stroke: D === e.id ? f.ACCENT_COLOR : "#64748b",
+                  strokeWidth: D === e.id ? 2.5 / m : 1 / m,
+                  onClick: (c) => {
+                    c.stopPropagation(), y === "select" && C(e.id);
+                  },
+                  style: { cursor: y === "select" ? "pointer" : "default" }
+                },
+                e.id
+              )),
+              d.map((e) => {
+                const c = Y.get(e.fromAnchorId), s = Y.get(e.toAnchorId);
+                return !c || !s ? null : /* @__PURE__ */ n(
+                  "line",
+                  {
+                    x1: c.x,
+                    y1: c.y,
+                    x2: s.x,
+                    y2: s.y,
+                    stroke: f.ACCENT_COLOR,
+                    strokeWidth: 2 / m,
+                    strokeLinecap: "round"
+                  },
+                  e.id
+                );
+              }),
+              p.map((e) => {
+                const c = _.includes(e.id), s = c && _.some((L) => {
+                  if (L === e.id) return !1;
+                  const T = Y.get(L);
+                  return T && Math.hypot(T.x - e.x, T.y - e.y) <= 2.5;
+                });
+                return /* @__PURE__ */ n(
+                  "circle",
+                  {
+                    cx: e.x,
+                    cy: e.y,
+                    r: (c ? 5 : 3.5) / m,
+                    fill: s ? "#22c55e" : c ? f.ACCENT_COLOR : "#0f172a",
+                    stroke: "#fff",
+                    strokeWidth: 1 / m,
+                    onPointerDown: (L) => {
+                      if (L.stopPropagation(), y === "draw-route") {
+                        o(e.id), u(e, $);
+                        return;
+                      }
+                      y === "select" && (t(
+                        L.shiftKey ? _.includes(e.id) ? _.filter((T) => T !== e.id) : [..._, e.id] : [e.id]
+                      ), U(e.id));
+                    },
+                    style: { cursor: "grab" }
+                  },
+                  e.id
+                );
+              }),
+              k.length > 1 && /* @__PURE__ */ n(
+                "polyline",
+                {
+                  points: k.map((e) => `${e.x},${e.y}`).join(" "),
+                  fill: "none",
+                  stroke: f.ACCENT_COLOR,
+                  strokeWidth: 2 / m,
+                  strokeDasharray: `${6 / m} ${4 / m}`
+                }
+              )
+            ] })
+          }
+        ),
+        !i && /* @__PURE__ */ n("div", { className: "eyeon-map-canvas__empty", children: "Select or create a level to begin" })
+      ]
+    }
+  );
+}
+const te = [
+  { id: "levels", label: "Levels" },
+  { id: "shapes", label: "Shapes" },
+  { id: "routes", label: "Routes" },
+  { id: "amenities", label: "Amenities" },
+  { id: "kiosks", label: "Kiosks" },
+  { id: "theme", label: "Theme" }
+];
+function re({
+  tab: i,
+  onTabChange: l,
+  draft: p,
+  activeLevelId: d,
+  onSelectLevel: f,
+  canFloors: y,
+  canSettings: K,
+  onImportSvg: D,
+  onAutoroute: _,
+  theme: I,
+  onThemeChange: C
+}) {
+  return /* @__PURE__ */ r("aside", { className: "eyeon-map-rail", children: [
+    /* @__PURE__ */ n("nav", { className: "eyeon-map-rail__tabs", children: te.map((t) => /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: i === t.id ? "is-active" : "",
+        onClick: () => l(t.id),
+        children: t.label
+      },
+      t.id
+    )) }),
+    /* @__PURE__ */ r("div", { className: "eyeon-map-rail__body", children: [
+      i === "levels" && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__section", children: [
+        /* @__PURE__ */ n("div", { className: "eyeon-map-rail__heading", children: "Buildings" }),
+        p.buildings.map((t) => /* @__PURE__ */ r("div", { className: "eyeon-map-rail__group", children: [
+          /* @__PURE__ */ n("div", { className: "eyeon-map-rail__group-title", children: t.name }),
+          p.levels.filter((u) => u.buildingId === t.id).map((u) => /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: u.id === d ? "eyeon-map-rail__row is-active" : "eyeon-map-rail__row",
+              onClick: () => f(u.id),
+              children: u.name
+            },
+            u.id
+          ))
+        ] }, t.id)),
+        /* @__PURE__ */ n("div", { className: "eyeon-map-rail__heading", children: "Outdoor" }),
+        p.levels.filter((t) => t.kind === "outdoor").map((t) => /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            className: t.id === d ? "eyeon-map-rail__row is-active" : "eyeon-map-rail__row",
+            onClick: () => f(t.id),
+            children: t.name
+          },
+          t.id
+        )),
+        y && d != null && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__actions", children: [
+          /* @__PURE__ */ r("label", { className: "eyeon-map-rail__file", children: [
+            "Import SVG",
+            /* @__PURE__ */ n(
+              "input",
+              {
+                type: "file",
+                accept: ".svg,image/svg+xml",
+                onChange: (t) => {
+                  var S;
+                  const u = (S = t.target.files) == null ? void 0 : S[0];
+                  u && D && D(d, u);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ n("button", { type: "button", onClick: () => _ == null ? void 0 : _(d), children: "Auto-route" })
+        ] })
+      ] }),
+      i === "shapes" && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__section", children: [
+        /* @__PURE__ */ r("div", { className: "eyeon-map-rail__heading", children: [
+          "Shapes (",
+          p.shapes.filter((t) => t.levelId === d).length,
+          ")"
+        ] }),
+        p.shapes.filter((t) => t.levelId === d).map((t) => /* @__PURE__ */ r("div", { className: "eyeon-map-rail__row", children: [
+          /* @__PURE__ */ n("span", { className: "eyeon-map-rail__muted", children: t.kind }),
+          " ",
+          t.key
+        ] }, t.id))
+      ] }),
+      i === "routes" && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__section", children: [
+        /* @__PURE__ */ n("div", { className: "eyeon-map-rail__heading", children: "Anchors / Edges" }),
+        /* @__PURE__ */ n("p", { className: "eyeon-map-rail__hint", children: "Draw routes on the canvas. Drag anchors onto each other to weld. Green highlight means a weld is available." }),
+        /* @__PURE__ */ r("div", { className: "eyeon-map-rail__stat", children: [
+          p.anchors.filter((t) => t.levelId === d).length,
+          " anchors ·",
+          " ",
+          p.edges.length,
+          " edges"
+        ] })
+      ] }),
+      i === "amenities" && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__section", children: [
+        /* @__PURE__ */ n("div", { className: "eyeon-map-rail__heading", children: "Amenity catalog" }),
+        p.amenities.map((t) => /* @__PURE__ */ r("div", { className: "eyeon-map-rail__row", children: [
+          t.name,
+          /* @__PURE__ */ n("span", { className: "eyeon-map-rail__muted", children: t.code })
+        ] }, t.id))
+      ] }),
+      i === "kiosks" && /* @__PURE__ */ n("div", { className: "eyeon-map-rail__section", children: /* @__PURE__ */ n("p", { className: "eyeon-map-rail__hint", children: "Assign a kiosk_screen shape to a display_kiosks device in the inspector." }) }),
+      i === "theme" && K && /* @__PURE__ */ r("div", { className: "eyeon-map-rail__section", children: [
+        /* @__PURE__ */ n("div", { className: "eyeon-map-rail__heading", children: "Theme" }),
+        /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+          "Style",
+          /* @__PURE__ */ r(
+            "select",
+            {
+              value: I.MAP_STYLE,
+              onChange: (t) => C({ MAP_STYLE: t.target.value }),
+              children: [
+                /* @__PURE__ */ n("option", { value: "2D", children: "2D" }),
+                /* @__PURE__ */ n("option", { value: "3D", children: "3D" })
+              ]
+            }
+          )
+        ] }),
+        [
+          ["ACCENT_COLOR", "Accent"],
+          ["STORE_DEFAULT_COLOR", "Store fill"],
+          ["MAP_BACKGROUND_COLOR", "Background"],
+          ["WALL_COLOR", "Walls"],
+          ["PARKING_ZONE_COLOR", "Parking"],
+          ["GREEN_AREA_COLOR", "Green"],
+          ["WATER_COLOR", "Water"]
+        ].map(([t, u]) => /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+          u,
+          /* @__PURE__ */ n(
+            "input",
+            {
+              type: "color",
+              value: I[t],
+              onChange: (S) => C({ [t]: S.target.value })
+            }
+          )
+        ] }, t))
+      ] })
+    ] })
+  ] });
+}
+const oe = [
+  "unit",
+  "amenity",
+  "kiosk_screen",
+  "connector",
+  "entrance",
+  "walkable",
+  "void",
+  "wall",
+  "boundary",
+  "floorplate",
+  "decor",
+  "label",
+  "zone",
+  "parking_zone",
+  "green_area",
+  "water",
+  "parking_icon"
+], ce = [
+  "occupied",
+  "vacant",
+  "coming_soon",
+  "under_renovation"
+];
+function de({
+  shape: i,
+  assignment: l,
+  amenities: p,
+  canEdit: d,
+  onRename: f,
+  onChangeKind: y,
+  onSaveAssignment: K,
+  undoCount: D
+}) {
+  var A, U, $;
+  const [_, I] = h((i == null ? void 0 : i.key) ?? ""), [C, t] = h(
+    ((A = l == null ? void 0 : l.retailerId) == null ? void 0 : A.toString()) ?? ""
+  ), [u, S] = h(
+    ((U = l == null ? void 0 : l.amenityId) == null ? void 0 : U.toString()) ?? ""
+  ), [O, M] = h(
+    (($ = l == null ? void 0 : l.kioskId) == null ? void 0 : $.toString()) ?? ""
+  ), [b, E] = h(
+    (l == null ? void 0 : l.unitStatus) ?? "vacant"
+  ), [m, B] = h((l == null ? void 0 : l.unitNumber) ?? ""), [k, R] = h((l == null ? void 0 : l.customLabel) ?? "");
+  return J(() => {
+    var o, g, v;
+    I((i == null ? void 0 : i.key) ?? ""), t(((o = l == null ? void 0 : l.retailerId) == null ? void 0 : o.toString()) ?? ""), S(((g = l == null ? void 0 : l.amenityId) == null ? void 0 : g.toString()) ?? ""), M(((v = l == null ? void 0 : l.kioskId) == null ? void 0 : v.toString()) ?? ""), E((l == null ? void 0 : l.unitStatus) ?? "vacant"), B((l == null ? void 0 : l.unitNumber) ?? ""), R((l == null ? void 0 : l.customLabel) ?? "");
+  }, [i, l]), i ? /* @__PURE__ */ r("aside", { className: "eyeon-map-inspector", children: [
+    /* @__PURE__ */ n("div", { className: "eyeon-map-inspector__heading", children: "Shape" }),
+    /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+      "Key / ID",
+      /* @__PURE__ */ n(
+        "input",
+        {
+          value: _,
+          disabled: !d,
+          onChange: (o) => I(o.target.value),
+          onBlur: () => {
+            _ && _ !== i.key && f(_);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+      "Kind",
+      /* @__PURE__ */ n(
+        "select",
+        {
+          value: i.kind,
+          disabled: !d,
+          onChange: (o) => y(o.target.value),
+          children: oe.map((o) => /* @__PURE__ */ n("option", { value: o, children: o }, o))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n("div", { className: "eyeon-map-inspector__heading", children: "Assignment" }),
+    (i.kind === "unit" || i.kind === "parking_zone") && /* @__PURE__ */ r(q, { children: [
+      /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+        "Retailer ID",
+        /* @__PURE__ */ n(
+          "input",
+          {
+            value: C,
+            disabled: !d,
+            onChange: (o) => t(o.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+        "Status",
+        /* @__PURE__ */ n(
+          "select",
+          {
+            value: b,
+            disabled: !d,
+            onChange: (o) => E(o.target.value),
+            children: ce.map((o) => /* @__PURE__ */ n("option", { value: o, children: o }, o))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+        "Unit number",
+        /* @__PURE__ */ n(
+          "input",
+          {
+            value: m,
+            disabled: !d,
+            onChange: (o) => B(o.target.value)
+          }
+        )
+      ] })
+    ] }),
+    i.kind === "amenity" && /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+      "Amenity",
+      /* @__PURE__ */ r(
+        "select",
+        {
+          value: u,
+          disabled: !d,
+          onChange: (o) => S(o.target.value),
+          children: [
+            /* @__PURE__ */ n("option", { value: "", children: "—" }),
+            p.map((o) => /* @__PURE__ */ n("option", { value: o.id, children: o.name }, o.id))
+          ]
+        }
+      )
+    ] }),
+    i.kind === "kiosk_screen" && /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+      "Kiosk device ID",
+      /* @__PURE__ */ n(
+        "input",
+        {
+          value: O,
+          disabled: !d,
+          onChange: (o) => M(o.target.value)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r("label", { className: "eyeon-map-rail__field", children: [
+      "Custom label",
+      /* @__PURE__ */ n(
+        "input",
+        {
+          value: k,
+          disabled: !d,
+          onChange: (o) => R(o.target.value)
+        }
+      )
+    ] }),
+    d && /* @__PURE__ */ n(
+      "button",
+      {
+        type: "button",
+        className: "eyeon-map-inspector__save",
+        onClick: () => K({
+          shapeId: i.id,
+          targetType: C ? "retailer" : u ? "amenity" : O ? "kiosk" : "none",
+          retailerId: C ? Number(C) : null,
+          amenityId: u ? Number(u) : null,
+          kioskId: O ? Number(O) : null,
+          unitStatus: b,
+          unitNumber: m || null,
+          customLabel: k || null,
+          customImageKey: (l == null ? void 0 : l.customImageKey) ?? null
+        }),
+        children: "Save assignment"
+      }
+    )
+  ] }) : /* @__PURE__ */ n("aside", { className: "eyeon-map-inspector", children: /* @__PURE__ */ r("div", { className: "eyeon-map-inspector__empty", children: [
+    "Select a shape or anchor",
+    /* @__PURE__ */ r("div", { className: "eyeon-map-rail__muted", children: [
+      "Undo stack: ",
+      D
+    ] })
+  ] }) });
+}
+function se({ document: i }) {
+  return /* @__PURE__ */ n("div", { className: "eyeon-map-preview", children: /* @__PURE__ */ n(Q, { fallback: /* @__PURE__ */ n("div", { className: "eyeon-map-preview__loading", children: "Loading preview…" }), children: /* @__PURE__ */ n(ie, { document: i, role: "PORTAL_PREVIEW" }) }) });
+}
+function _e({
+  draft: i,
+  canEdit: l = !0,
+  canFloors: p = !0,
+  canSettings: d = !0,
+  onBatch: f,
+  onPublish: y,
+  onImportSvg: K,
+  onAutoroute: D,
+  previewDocument: _,
+  className: I
+}) {
+  var T;
+  const [C, t] = h("levels"), [u, S] = h(
+    ((T = i.levels[0]) == null ? void 0 : T.id) ?? null
+  ), [O, M] = h(null), [b, E] = h([]), [m, B] = h("select"), [k, R] = h(!1), [A, U] = h(0), [$, o] = h([]), g = z([]), v = V(
+    () => ({ ...le, ...i.theme }),
+    [i.theme]
+  ), w = i.levels.find((a) => a.id === u) ?? null, Y = i.shapes.filter((a) => a.levelId === u), X = i.anchors.filter((a) => a.levelId === u), j = i.edges.filter((a) => {
+    const N = i.anchors.find((P) => P.id === a.fromAnchorId);
+    return (N == null ? void 0 : N.levelId) === u;
+  }), x = Y.find((a) => a.id === O) ?? null, G = i.assignments.find((a) => a.shapeId === O) ?? null, e = ee(
+    async (a) => {
+      !a.length || !f || (o((N) => [...N, a]), await f(a), g.current = []);
+    },
+    [f]
+  ), c = async () => {
+    if (b.length < 2) return;
+    const a = X.map((W) => ({ ...W })), N = i.edges.map((W) => ({ ...W })), P = ne(a, N, b);
+    P && (await e([
+      {
+        op: "weld_anchors",
+        anchorIds: b
+      }
+    ]), E([P.survivingAnchorId]));
+  }, s = async (a) => {
+    !x || !l || await e([
+      {
+        op: "upsert_shape",
+        shape: {
+          id: x.id,
+          levelId: x.levelId,
+          key: a,
+          kind: x.kind
+        }
+      }
+    ]);
+  }, L = async (a) => {
+    !x || !l || await e([
+      {
+        op: "upsert_shape",
+        shape: {
+          id: x.id,
+          levelId: x.levelId,
+          key: x.key,
+          kind: a
+        }
+      }
+    ]);
+  };
+  return /* @__PURE__ */ r("div", { className: `eyeon-map-editor ${I ?? ""}`, children: [
+    /* @__PURE__ */ n(
+      re,
+      {
+        tab: C,
+        onTabChange: t,
+        draft: i,
+        activeLevelId: u,
+        onSelectLevel: S,
+        canFloors: p,
+        canSettings: d,
+        onImportSvg: K,
+        onAutoroute: D,
+        theme: v,
+        onThemeChange: async (a) => {
+          d && await e([{ op: "update_theme", theme: a }]);
+        }
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "eyeon-map-editor__center", children: [
+      /* @__PURE__ */ r("div", { className: "eyeon-map-editor__toolbar", children: [
+        /* @__PURE__ */ r("div", { className: "eyeon-map-editor__tools", children: [
+          ["select", "pan", "draw-unit", "draw-route"].map((a) => /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: m === a ? "is-active" : "",
+              onClick: () => B(a),
+              disabled: !l && a.startsWith("draw"),
+              children: a
+            },
+            a
+          )),
+          /* @__PURE__ */ n("button", { type: "button", onClick: c, disabled: b.length < 2, children: "Weld anchors" }),
+          /* @__PURE__ */ r("label", { className: "eyeon-map-editor__angle", children: [
+            "Base °",
+            /* @__PURE__ */ n(
+              "input",
+              {
+                type: "number",
+                value: A,
+                onChange: (a) => U(Number(a.target.value) || 0)
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "eyeon-map-editor__actions", children: [
+          /* @__PURE__ */ n("button", { type: "button", onClick: () => R((a) => !a), children: k ? "Edit" : "Preview" }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              className: "eyeon-map-editor__publish",
+              onClick: () => y == null ? void 0 : y(),
+              disabled: !l,
+              children: "Publish"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "eyeon-map-editor__canvas-wrap", children: k && _ ? /* @__PURE__ */ n(se, { document: _ }) : /* @__PURE__ */ n(
+        ae,
+        {
+          level: w,
+          shapes: Y,
+          anchors: X,
+          edges: j,
+          assignments: i.assignments,
+          theme: v,
+          tool: m,
+          baseAngle: A,
+          selectedShapeId: O,
+          selectedAnchorIds: b,
+          baseSvgUrl: (w == null ? void 0 : w.kind) === "outdoor" ? i.baseSvgUrl ?? null : null,
+          onSelectShape: M,
+          onSelectAnchors: E,
+          onCreateRoutePoint: async (a, N) => {
+            if (!w || !l) return;
+            const P = N ? Z(
+              X.find((W) => W.id === N) ?? a,
+              a,
+              A
+            ) : a;
+            await e([
+              {
+                op: "upsert_anchor",
+                anchor: {
+                  levelId: w.id,
+                  x: P.x,
+                  y: P.y,
+                  kind: "junction"
+                }
+              }
+            ]);
+          },
+          onMoveAnchor: async (a, N, P) => {
+            if (!l) return;
+            const W = X.find((H) => H.id === a);
+            W && await e([
+              {
+                op: "upsert_anchor",
+                anchor: { ...W, x: N, y: P }
+              }
+            ]);
+          },
+          onCreateShape: async (a, N) => {
+            !w || !l || await e([
+              {
+                op: "upsert_shape",
+                shape: {
+                  levelId: w.id,
+                  key: `${a}-${Date.now()}`,
+                  kind: a,
+                  geometry: N
+                }
+              }
+            ]);
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ n(
+      de,
+      {
+        shape: x,
+        assignment: G,
+        amenities: i.amenities,
+        canEdit: l,
+        onRename: s,
+        onChangeKind: L,
+        onSaveAssignment: async (a) => {
+          l && await e([{ op: "upsert_assignment", assignment: a }]);
+        },
+        undoCount: $.length
+      }
+    )
+  ] });
+}
+export {
+  ae as EditorCanvas,
+  de as Inspector,
+  re as LeftRail,
+  _e as MapEditor
+};
+//# sourceMappingURL=index.js.map