@opendfieldmap/sdk 0.1.0-alpha.0

package/dist/index.js

@@ -0,0 +1,846 @@
+// packages/sdk/src/widget.ts
+import {
+  defaultOEMResources,
+  getOEMRegion as getOEMRegion3,
+  loadOEMManifest,
+  normalizeOEMLocale,
+  validateOEMManifest
+} from "@opendfieldmap/core";
+import { createOEM } from "@opendfieldmap/map";
+
+// packages/sdk/src/components/scale.ts
+import { getOEMRegion } from "@opendfieldmap/core";
+
+// packages/sdk/src/components/types.ts
+var createButton = (className) => {
+  const element = document.createElement("button");
+  element.type = "button";
+  element.className = className;
+  return element;
+};
+var setLabel = (element, label) => {
+  element.title = label;
+  element.setAttribute("aria-label", label);
+};
+var getMessages = (manifest, locale) => {
+  const messages = manifest.controls[locale] ?? manifest.controls[manifest.fallbackLocale];
+  if (!messages) throw new Error("Missing OEM control messages");
+  return messages;
+};
+
+// packages/sdk/src/components/scale.ts
+var ZOOM_STEP = 0.5;
+var clamp = (value, minimum, maximum) => Math.max(minimum, Math.min(maximum, value));
+var createScaleControl = (context) => {
+  const { manifest, zoomLocked } = context;
+  const element = document.createElement("div");
+  element.className = "scaleControl";
+  element.classList.toggle("locked", zoomLocked);
+  const decorationTop = document.createElement("div");
+  decorationTop.className = "scaleDecoration scaleDecorationTop";
+  const decorationBottom = document.createElement("div");
+  decorationBottom.className = "scaleDecoration scaleDecorationBottom";
+  const zoomInFrame = document.createElement("div");
+  zoomInFrame.className = "scaleFrame zoomInFrame";
+  const zoomIn = createButton("zoomButton zoomIn");
+  zoomIn.textContent = "+";
+  zoomInFrame.append(zoomIn);
+  const track = document.createElement("div");
+  track.className = "scaleTrack";
+  const fill = document.createElement("div");
+  fill.className = "scaleFill";
+  track.append(fill);
+  const zoomOutFrame = document.createElement("div");
+  zoomOutFrame.className = "scaleFrame zoomOutFrame";
+  const zoomOut = createButton("zoomButton zoomOut");
+  zoomOut.textContent = "-";
+  zoomOutFrame.append(zoomOut);
+  element.append(decorationTop, zoomInFrame, track, zoomOutFrame, decorationBottom);
+  let currentState;
+  let targetZoom = null;
+  let scaleFrame = null;
+  let zoomFrame = null;
+  let dragPointerId = null;
+  let dragStartY = null;
+  let dragStartZoom = null;
+  let currentLocale = "";
+  const isCompact = () => (element.closest(".oemWidget")?.clientWidth ?? Number.POSITIVE_INFINITY) < 480;
+  const scaleFor = (zoom, minimum, maximum) => maximum === minimum ? 0 : clamp((zoom - minimum) / (maximum - minimum), 0, 1);
+  const updateScale = (zoom, minimum, maximum) => {
+    if (scaleFrame !== null) cancelAnimationFrame(scaleFrame);
+    scaleFrame = requestAnimationFrame(() => {
+      track.style.setProperty("--scale", String(scaleFor(zoom, minimum, maximum)));
+      scaleFrame = null;
+    });
+  };
+  const applyZoom = (zoom, animate) => {
+    const region = getOEMRegion(manifest, currentState.regionId);
+    const nextZoom = clamp(zoom, region.minZoom, region.maxZoom);
+    if (targetZoom === nextZoom) return;
+    targetZoom = nextZoom;
+    updateScale(nextZoom, region.minZoom, region.maxZoom);
+    context.zoomTo(nextZoom, { animate });
+  };
+  const scheduleDragZoom = (zoom) => {
+    targetZoom = zoom;
+    if (zoomFrame !== null) return;
+    zoomFrame = requestAnimationFrame(() => {
+      zoomFrame = null;
+      if (targetZoom !== null) context.zoomTo(targetZoom, { animate: false });
+    });
+  };
+  zoomIn.addEventListener("click", () => {
+    if (!zoomLocked) applyZoom((targetZoom ?? currentState.zoom) + ZOOM_STEP, true);
+  });
+  zoomOut.addEventListener("click", () => {
+    if (!zoomLocked) applyZoom((targetZoom ?? currentState.zoom) - ZOOM_STEP, true);
+  });
+  track.addEventListener("click", (event) => {
+    if (zoomLocked || isCompact()) return;
+    const region = getOEMRegion(manifest, currentState.regionId);
+    const bounds = track.getBoundingClientRect();
+    const ratio = 1 - (event.clientY - bounds.top) / bounds.height;
+    applyZoom(region.minZoom + clamp(ratio, 0, 1) * (region.maxZoom - region.minZoom), true);
+  });
+  track.addEventListener("pointerdown", (event) => {
+    if (zoomLocked || !isCompact()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    track.setPointerCapture(event.pointerId);
+    dragPointerId = event.pointerId;
+    dragStartY = event.clientY;
+    dragStartZoom = targetZoom ?? currentState.zoom;
+    element.classList.add("dragging");
+  });
+  track.addEventListener("pointermove", (event) => {
+    if (dragPointerId !== event.pointerId || dragStartY === null || dragStartZoom === null) return;
+    event.preventDefault();
+    const region = getOEMRegion(manifest, currentState.regionId);
+    const delta = (dragStartY - event.clientY) / Math.max(1, track.getBoundingClientRect().height) * (region.maxZoom - region.minZoom);
+    const nextZoom = clamp(dragStartZoom + delta, region.minZoom, region.maxZoom);
+    updateScale(nextZoom, region.minZoom, region.maxZoom);
+    scheduleDragZoom(nextZoom);
+  });
+  const finishDrag = (event) => {
+    if (dragPointerId !== event.pointerId) return;
+    if (track.hasPointerCapture(event.pointerId)) track.releasePointerCapture(event.pointerId);
+    dragPointerId = null;
+    dragStartY = null;
+    dragStartZoom = null;
+    element.classList.remove("dragging");
+  };
+  track.addEventListener("pointerup", finishDrag);
+  track.addEventListener("pointercancel", finishDrag);
+  track.addEventListener("lostpointercapture", finishDrag);
+  return {
+    element,
+    sync(state) {
+      currentState = state;
+      targetZoom = state.zoom;
+      const region = getOEMRegion(manifest, state.regionId);
+      updateScale(state.zoom, region.minZoom, region.maxZoom);
+      if (currentLocale !== state.locale) {
+        currentLocale = state.locale;
+        const messages = getMessages(manifest, state.locale);
+        setLabel(zoomIn, messages.zoomIn);
+        setLabel(zoomOut, messages.zoomOut);
+      }
+      zoomIn.disabled = zoomLocked || state.zoom >= region.maxZoom;
+      zoomOut.disabled = zoomLocked || state.zoom <= region.minZoom;
+    },
+    destroy() {
+      if (scaleFrame !== null) cancelAnimationFrame(scaleFrame);
+      if (zoomFrame !== null) cancelAnimationFrame(zoomFrame);
+      element.classList.remove("dragging");
+    }
+  };
+};
+
+// packages/sdk/src/components/switches.ts
+import { getOEMRegion as getOEMRegion2 } from "@opendfieldmap/core";
+
+// packages/sdk/src/assets/Valley_4.svg
+var Valley_4_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.67 170.68">\n  <g>\n      <path class="cls-1" d="M15.21,170.68h410.46s-43.67-106.46-205.23-106.45c-160.59,0-205.23,106.45-205.23,106.45Z"/>\n      <path class="cls-1" d="M0,63.31h244.09S218.12,0,122.04,0C26.54,0,0,63.31,0,63.31Z"/>\n  </g>\n</svg>';
+
+// packages/sdk/src/assets/Wuling.svg
+var Wuling_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 374.53 309.73">\n  <g>\n      <rect x="80.63" y="20.44" width="58.29" height="117.86" rx="1" ry="1"/>\n      <path d="M237.6,223.35c-.53-.03-.94-.47-.94-.99v-89.26c0-.55-.45-1-1-1h-56.3c-.55,0-1,.45-1,1v87.86c0,.55-.44.99-.99.99-12.89.14-25.44.56-37.51,1.23-.53.03-.94.47-.94,1v45.23c0,.55-.45,1-1,1h-56.3c-.55,0-1-.45-1-1v-39.11c0-.61-.55-1.08-1.16-.99C31.4,236.85,0,249.69,0,265.81c0,27.25,83.84,43.92,187.26,43.92s187.26-16.67,187.26-43.92c0-21.91-57.95-37.74-136.93-42.46Z"/>\n      <path d="M81.77,228.97c17.21-2.61,36.48-4.55,57.16-5.73v-70.69h-58.29v75.43c0,.61.53,1.07,1.14.98Z"/>\n      <rect x="178.37" width="58.29" height="117.86" rx="1" ry="1"/>\n      <path d="M249.61,156.62l57.93-49.76c.22-.19.35-.47.35-.76v-51.73c0-.85-1-1.31-1.64-.76l-57.93,49.76c-.22.19-.35.47-.35.76v51.73c0,.85,1,1.31,1.64.76Z"/>\n  </g>\n</svg>';
+
+// packages/sdk/src/assets/Dijiang.svg
+var Dijiang_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320.87 332.32">\n  <path d="M306.45,266.64L241.82,0h-32.6l39.82,266.64h-26.81l-6.22-26.53h8.95v-47.7h-20.14L159.7,0l-45.13,192.41h-20.14v47.7h8.95l-6.22,26.53h-26.34L110.64,0h-32.6L13.4,266.64H0v65.68h320.87v-65.68h-14.42ZM70.81,312.22v-30.76h22.87l-7.21,30.76h-15.65ZM248.58,312.22h-15.65l-7.21-30.76h22.87v30.76Z"/>\n</svg>';
+
+// packages/sdk/src/assets/Weekraid_1.svg
+var Weekraid_1_default = '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 148.547 130.941">\n  <polygon points="28.102 0 6.153 0 19.116 21.175 41.065 21.175 28.102 0"/>\n  <polygon points="19.116 21.175 0 21.175 26.446 65.471 0 109.766 19.116 109.766 45.562 65.471 19.116 21.175"/>\n  <polygon points="142.394 0 120.444 0 107.481 21.175 129.431 21.175 142.394 0"/>\n  <polygon points="6.153 130.941 28.102 130.941 41.065 109.766 19.116 109.766 6.153 130.941"/>\n  <path d="M109.749,94.194l-16.583-28.723,16.583-28.723h-11.259l8.991-15.573H41.065l8.991,15.573h-11.259l16.583,28.723-16.583,28.723h11.259l-8.991,15.573h66.416l-8.991-15.573h11.259ZM87.106,47.921l-10.132,17.549,10.132,17.549h-7.029l7.029,12.174h-25.665l7.029-12.174h-7.029l10.132-17.549-10.132-17.549h7.029l-7.029-12.174h25.665l-7.029,12.174h7.029Z"/>\n  <polygon points="120.444 130.941 142.394 130.941 129.431 109.766 107.481 109.766 120.444 130.941"/>\n  <polygon points="122.1 65.471 148.547 21.175 129.431 21.175 102.985 65.471 129.431 109.766 148.547 109.766 122.1 65.471"/>\n</svg>';
+
+// packages/sdk/src/assets/layer.svg
+var layer_default = '<svg width="40" height="37" viewBox="0 0 40 37" xmlns="http://www.w3.org/2000/svg">\n<path d="M20 0L39.2453 10.477L20 20.954L0.7547 10.477L20 0Z"/>\n<path d="M20.9333 24.9496L20 25.4576L19.0667 24.9496L10.6011 20.3409L0 26.1121L20 37L40 26.1121L29.3989 20.3409L20.9333 24.9496Z"/>\n</svg>\n';
+
+// packages/sdk/src/icons.ts
+var clean = (svg) => svg.replace(/<\?xml[^>]*>\s*/, "");
+var REGION_ICONS = Object.freeze({
+  Valley_4: clean(Valley_4_default),
+  Wuling: clean(Wuling_default),
+  Dijiang: clean(Dijiang_default),
+  Weekraid_1: clean(Weekraid_1_default)
+});
+var LAYER_ICON = clean(layer_default);
+
+// packages/sdk/src/components/switches.ts
+var FLOOR_ORDER = ["L4", "L3", "L2", "L1", "M", "B1", "B2", "B3", "B4"];
+var createSwitchAction = (className) => {
+  const element = document.createElement("div");
+  element.className = className;
+  element.tabIndex = 0;
+  element.setAttribute("role", "button");
+  return element;
+};
+var bindPersistentPanel = (owner, context) => {
+  owner.addEventListener("pointerenter", (event) => {
+    if (event.pointerType === "mouse") context.panels.collapseAll();
+  });
+  owner.addEventListener("pointerdown", (event) => {
+    if (event.pointerType === "touch" || event.pointerType === "pen") context.panels.expand(owner);
+  });
+  owner.addEventListener("focusin", () => {
+    if (owner.matches(":focus-visible") || owner.querySelector(":focus-visible")) context.panels.expand(owner);
+  });
+  owner.addEventListener("focusout", (event) => {
+    if (!(event.relatedTarget instanceof Node) || !owner.contains(event.relatedTarget)) context.panels.collapse(owner);
+  });
+};
+var positionIndicator = (indicator, target) => {
+  indicator.style.transform = `translateY(calc(${target.offsetTop + target.offsetHeight / 2}px - 50%))`;
+};
+var createRegionControl = (context) => {
+  const { manifest, apply } = context;
+  const element = document.createElement("div");
+  element.className = "switch regionSwitch";
+  const label = document.createElement("div");
+  label.className = "switchLabel regionLabel";
+  label.setAttribute("aria-hidden", "true");
+  const indicator = document.createElement("div");
+  indicator.className = "switchIndicator";
+  element.append(label, indicator);
+  const controls = /* @__PURE__ */ new Map();
+  for (const region of manifest.regions) {
+    const regionButton = createSwitchAction("switchItem regionEntry");
+    regionButton.dataset.region = region.id;
+    if (region.subregions.length > 1) bindPersistentPanel(regionButton, context);
+    const icon = document.createElement("span");
+    icon.className = "switchIcon";
+    const markup = REGION_ICONS[region.id];
+    if (!markup) throw new Error(`Missing Atlos region icon: ${region.id}`);
+    icon.innerHTML = markup;
+    regionButton.append(icon);
+    const selectRegion = () => {
+      const target = region.initialView;
+      apply({ region: region.id, subregion: null, floor: "M", center: { x: target.x, y: target.y }, zoom: target.zoom });
+    };
+    regionButton.addEventListener("click", selectRegion);
+    regionButton.addEventListener("keydown", (event) => {
+      if (event.target !== regionButton) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      selectRegion();
+    });
+    const subregionControls = /* @__PURE__ */ new Map();
+    let subregionIndicator;
+    if (region.subregions.length > 1) {
+      const panel = document.createElement("div");
+      panel.className = "subregionPanel";
+      panel.addEventListener("click", (event) => event.stopPropagation());
+      const list = document.createElement("div");
+      list.className = "subregionList";
+      subregionIndicator = document.createElement("div");
+      subregionIndicator.className = "switchIndicator";
+      list.append(subregionIndicator);
+      for (const subregion of region.subregions) {
+        const subregionButton = createButton("selectionItem subregionItem");
+        subregionButton.dataset.subregion = subregion.id;
+        subregionButton.addEventListener("click", () => {
+          context.panels.collapse(regionButton);
+          const [[x1, y1], [x2, y2]] = subregion.bounds ?? [
+            [region.initialView.x, region.initialView.y],
+            [region.initialView.x, region.initialView.y]
+          ];
+          apply({
+            region: region.id,
+            subregion: subregion.id,
+            floor: "M",
+            center: { x: (x1 + x2) / 2, y: (y1 + y2) / 2 },
+            zoom: Math.max(region.minZoom, Math.min(region.maxZoom, 1))
+          });
+        });
+        subregionControls.set(subregion.id, { data: subregion, button: subregionButton });
+        list.append(subregionButton);
+      }
+      panel.append(list);
+      regionButton.append(panel);
+    }
+    controls.set(region.id, { region, button: regionButton, subregions: subregionControls, subregionIndicator });
+    element.append(regionButton);
+  }
+  let stateKey = "";
+  return {
+    element,
+    sync(state) {
+      const nextKey = `${state.locale}\0${state.regionId}\0${state.subregionId ?? ""}`;
+      if (nextKey !== stateKey) {
+        stateKey = nextKey;
+        for (const [regionId, control] of controls) {
+          const regionName = control.region.locales[state.locale] ?? control.region.locales[manifest.fallbackLocale] ?? control.region.name;
+          control.button.classList.toggle("selected", regionId === state.regionId);
+          setLabel(control.button, regionName);
+          for (const [subregionId, subregion] of control.subregions) {
+            const localized = subregion.data.locales?.[state.locale] ?? subregion.data.locales?.[manifest.fallbackLocale];
+            subregion.button.textContent = localized?.short ?? subregion.data.key;
+            setLabel(subregion.button, localized?.name ?? subregion.data.key);
+            subregion.button.classList.toggle("selected", subregionId === state.subregionId);
+          }
+        }
+      }
+      for (const control of controls.values()) {
+        const selectedSubregion = state.subregionId ? control.subregions.get(state.subregionId) : void 0;
+        if (control.subregionIndicator) {
+          control.subregionIndicator.classList.toggle("hidden", !selectedSubregion);
+          if (selectedSubregion) positionIndicator(control.subregionIndicator, selectedSubregion.button);
+        }
+      }
+      const selectedControl = controls.get(state.regionId);
+      if (selectedControl) positionIndicator(indicator, selectedControl.button);
+    }
+  };
+};
+var createLayerControl = (context) => {
+  const { manifest, apply } = context;
+  const element = document.createElement("div");
+  element.className = "switch layerSwitch";
+  const label = document.createElement("div");
+  label.className = "switchLabel layerLabel";
+  label.setAttribute("aria-hidden", "true");
+  const mainButton = createSwitchAction("switchItem");
+  bindPersistentPanel(mainButton, context);
+  const icon = document.createElement("span");
+  icon.className = "switchIcon";
+  icon.innerHTML = LAYER_ICON;
+  const panel = document.createElement("div");
+  panel.className = "floorPanel";
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const list = document.createElement("div");
+  list.className = "floorList";
+  panel.append(list);
+  mainButton.append(icon, panel);
+  element.append(label, mainButton);
+  mainButton.addEventListener("keydown", (event) => {
+    if (event.target !== mainButton || event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    mainButton.click();
+  });
+  const indicator = document.createElement("div");
+  indicator.className = "switchIndicator";
+  const floorButtons = /* @__PURE__ */ new Map();
+  let currentRegion = "";
+  let currentLocale = "";
+  let currentFloor = "M";
+  mainButton.addEventListener("click", () => {
+    if (currentFloor !== "M") apply({ floor: "M" });
+  });
+  return {
+    element,
+    sync(state) {
+      const region = getOEMRegion2(manifest, state.regionId);
+      if (currentRegion !== region.id) {
+        currentRegion = region.id;
+        floorButtons.clear();
+        list.replaceChildren(indicator);
+        const floors = [...region.floors].sort((left, right) => FLOOR_ORDER.indexOf(left.id) - FLOOR_ORDER.indexOf(right.id));
+        element.hidden = floors.length <= 1;
+        for (const floor of floors) {
+          const button = createButton("selectionItem floorItem");
+          button.textContent = floor.id;
+          button.addEventListener("click", () => {
+            context.panels.collapse(mainButton);
+            apply({ floor: floor.id });
+          });
+          floorButtons.set(floor.id, button);
+          list.append(button);
+        }
+        currentLocale = "";
+      }
+      if (currentLocale !== state.locale) {
+        currentLocale = state.locale;
+        const messages = getMessages(manifest, state.locale);
+        setLabel(mainButton, messages.layerSelect);
+        for (const [floorId, button] of floorButtons) setLabel(button, `${messages.layerSelect}: ${floorId}`);
+      }
+      if (currentFloor !== state.floorId) floorButtons.get(currentFloor)?.classList.remove("selected");
+      currentFloor = state.floorId;
+      mainButton.classList.toggle("selected", currentFloor !== "M");
+      const selectedButton = floorButtons.get(currentFloor);
+      selectedButton?.classList.add("selected");
+      if (selectedButton) positionIndicator(indicator, selectedButton);
+    }
+  };
+};
+
+// packages/sdk/src/components/index.ts
+var mountControls = (root, visibility, context) => {
+  const hasSwitches = visibility.regionSelector || visibility.floorSelector;
+  if (!hasSwitches && !visibility.scaleBar) return { sync: () => {
+  } };
+  const overlay = document.createElement("div");
+  overlay.className = "controlOverlay";
+  root.append(overlay);
+  const components = [];
+  let expandedPanel = null;
+  const panels = {
+    expand(owner) {
+      if (expandedPanel === owner) return;
+      expandedPanel?.classList.remove("expanded");
+      expandedPanel = owner;
+      expandedPanel.classList.add("expanded");
+    },
+    collapse(owner) {
+      owner.classList.remove("expanded");
+      if (expandedPanel === owner) expandedPanel = null;
+    },
+    collapseAll() {
+      expandedPanel?.classList.remove("expanded");
+      expandedPanel = null;
+    }
+  };
+  const controlContext = { ...context, panels };
+  let currentState = null;
+  const handleOutsidePointer = (event) => {
+    if (expandedPanel && event.target instanceof Node && !expandedPanel.contains(event.target)) panels.collapseAll();
+  };
+  if (hasSwitches) document.addEventListener("pointerdown", handleOutsidePointer, true);
+  const observer = !hasSwitches || typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+    if (currentState) for (const component of components) component.sync(currentState);
+  });
+  observer?.observe(root);
+  if (hasSwitches) {
+    const switchArea = document.createElement("div");
+    switchArea.className = "switchArea";
+    if (visibility.regionSelector) {
+      const region = createRegionControl(controlContext);
+      components.push(region);
+      switchArea.append(region.element);
+    }
+    if (visibility.floorSelector) {
+      const layer = createLayerControl(controlContext);
+      components.push(layer);
+      switchArea.append(layer.element);
+    }
+    overlay.append(switchArea);
+  }
+  if (visibility.scaleBar) {
+    const scale = createScaleControl(controlContext);
+    components.push(scale);
+    overlay.append(scale.element);
+  }
+  return {
+    sync(state) {
+      currentState = state;
+      for (const component of components) component.sync(state);
+    },
+    destroy() {
+      if (hasSwitches) document.removeEventListener("pointerdown", handleOutsidePointer, true);
+      observer?.disconnect();
+      panels.collapseAll();
+      for (const component of components) component.destroy?.();
+    }
+  };
+};
+
+// packages/sdk/src/fonts.ts
+import { resolveOEMAsset } from "@opendfieldmap/core";
+var FONT_FAMILIES = /* @__PURE__ */ new Set([
+  "HMSans_EN",
+  "Novecento Bold",
+  "Novecento DemiBold",
+  "Novecento Medium",
+  "Novecento Cyrillic DemiBold",
+  "Novecento Cyrillic Medium",
+  "Novecento Vietnamese DemiBold",
+  "Novecento Vietnamese Medium"
+]);
+var installFonts = (root, manifest, resources) => {
+  if (!manifest.fonts?.length) return;
+  const rules = manifest.fonts.map((font) => {
+    if (!FONT_FAMILIES.has(font.family) || !Number.isFinite(font.weight) || font.weightRange && (!Number.isFinite(font.weightRange[0]) || !Number.isFinite(font.weightRange[1]) || font.weightRange[0] > font.weightRange[1])) {
+      throw new Error(`Unsupported OEM font: ${font.family}`);
+    }
+    const url = resolveOEMAsset(resources.baseUrl, font.path);
+    const weight = font.weightRange ? `${font.weightRange[0]} ${font.weightRange[1]}` : String(font.weight);
+    return `@font-face{font-family:${JSON.stringify(font.family)};src:url(${JSON.stringify(url)}) format("woff2");font-style:${font.style};font-weight:${weight};font-display:swap;}`;
+  });
+  const style = document.createElement("style");
+  style.dataset.oemFonts = manifest.releaseId;
+  style.textContent = rules.join("");
+  root.append(style);
+};
+
+// packages/sdk/src/widget.ts
+var REGION_ALIASES = Object.freeze({
+  VL: "Valley_4",
+  WL: "Wuling",
+  DJ: "Dijiang",
+  ES: "Weekraid_1"
+});
+var mounted = /* @__PURE__ */ new WeakSet();
+var cloneState = (state) => ({
+  ...state,
+  markerTypes: state.markerTypes === "*" ? "*" : [...state.markerTypes],
+  center: { ...state.center }
+});
+var cloneConfig = (config) => ({
+  ...config,
+  markerTypes: Array.isArray(config.markerTypes) ? [...config.markerTypes] : config.markerTypes,
+  center: config.center ? { ...config.center } : config.center
+});
+var resolveContainer = (container) => {
+  const element = typeof container === "string" ? document.querySelector(container) : container;
+  if (!element) throw new Error(`OEM Widget container not found: ${container}`);
+  return element;
+};
+var resolveRegionId = (manifest, value) => {
+  const requested = value ? REGION_ALIASES[value.toUpperCase()] ?? value : manifest.defaultRegionId;
+  return getOEMRegion3(manifest, requested).id;
+};
+var normalizeMarkerTypes = (value) => {
+  if (value === "*") return "*";
+  if (!value || !Array.isArray(value)) return [];
+  return [...new Set(value.map((entry) => entry.trim()).filter(Boolean))];
+};
+var getPreset = (region, subregion) => {
+  if (!subregion?.bounds) {
+    return {
+      center: { x: region.initialView.x, y: region.initialView.y },
+      zoom: region.initialView.zoom
+    };
+  }
+  return {
+    center: {
+      x: (subregion.bounds[0][0] + subregion.bounds[1][0]) / 2,
+      y: (subregion.bounds[0][1] + subregion.bounds[1][1]) / 2
+    },
+    zoom: Math.max(region.minZoom, Math.min(region.maxZoom, 1))
+  };
+};
+var normalizeState = (input, manifest) => {
+  let regionId = resolveRegionId(manifest, input.region);
+  const subregionId = input.subregion?.trim() || null;
+  if (subregionId) {
+    const owner = manifest.regions.find((region2) => region2.subregions.some((subregion2) => subregion2.id === subregionId));
+    if (!owner) throw new Error(`Unknown OEM subregion: ${subregionId}`);
+    if (input.region && owner.id !== regionId) {
+      throw new Error(`OEM subregion ${subregionId} does not belong to ${regionId}`);
+    }
+    regionId = owner.id;
+  }
+  const region = getOEMRegion3(manifest, regionId);
+  const subregion = subregionId ? region.subregions.find((entry) => entry.id === subregionId) : void 0;
+  const floorId = input.floor ?? "M";
+  if (!region.floors.some((floor) => floor.id === floorId)) {
+    throw new Error(`Unknown OEM floor ${floorId} in ${regionId}`);
+  }
+  const requestedCenter = input.center;
+  if (requestedCenter && (!Number.isFinite(requestedCenter.x) || !Number.isFinite(requestedCenter.y))) {
+    throw new Error("OEM Widget center coordinates must be finite");
+  }
+  const preset = getPreset(region, subregion);
+  const requestedLocale = input.locale ?? (typeof navigator === "undefined" ? manifest.fallbackLocale : navigator.language);
+  return {
+    regionId,
+    subregionId,
+    floorId,
+    locale: normalizeOEMLocale(requestedLocale, Object.keys(manifest.locales), manifest.fallbackLocale),
+    markerTypes: normalizeMarkerTypes(input.markerTypes),
+    labels: input.labels ?? true,
+    boundaries: input.boundaries ?? false,
+    markerClustering: input.markerClustering ?? true,
+    zoom: Math.max(region.minZoom, Math.min(region.maxZoom, input.zoom ?? preset.zoom)),
+    center: {
+      x: requestedCenter?.x ?? preset.center.x,
+      y: requestedCenter?.y ?? preset.center.y
+    }
+  };
+};
+var toConfig = (state) => ({
+  region: state.regionId,
+  subregion: state.subregionId,
+  floor: state.floorId,
+  locale: state.locale,
+  markerTypes: state.markerTypes,
+  labels: state.labels,
+  boundaries: state.boundaries,
+  markerClustering: state.markerClustering,
+  zoom: state.zoom,
+  center: { ...state.center }
+});
+var sameMarkers = (left, right) => left === right || left !== "*" && right !== "*" && left.length === right.length && left.every((marker, index) => marker === right[index]);
+var sameState = (left, right) => left.regionId === right.regionId && left.subregionId === right.subregionId && left.floorId === right.floorId && left.locale === right.locale && sameMarkers(left.markerTypes, right.markerTypes) && left.labels === right.labels && left.boundaries === right.boundaries && left.markerClustering === right.markerClustering && left.zoom === right.zoom && left.center.x === right.center.x && left.center.y === right.center.y;
+var hasMarkers = (state) => state.markerTypes === "*" || state.markerTypes.length > 0;
+var Widget = class {
+  constructor(host, root, core, manifest, options, state) {
+    this.host = host;
+    this.root = root;
+    this.core = core;
+    this.manifest = manifest;
+    this.options = options;
+    this.state = state;
+    this.controls = mountControls(root, {
+      regionSelector: options.showRegionSelector ?? true,
+      floorSelector: options.showFloorSelector ?? true,
+      scaleBar: options.showScaleBar ?? true
+    }, {
+      manifest,
+      zoomLocked: options.lockZoom ?? false,
+      apply: (update) => {
+        void this.setOptions(update).catch((error) => this.report(error));
+      },
+      zoomTo: (zoom, zoomOptions) => core.setZoom(zoom, zoomOptions)
+    });
+    this.controls.sync(state);
+    this.unsubscribe = core.on("viewchange", this.syncView);
+    options.signal?.addEventListener("abort", this.destroy, { once: true });
+  }
+  destroyed = false;
+  applying = false;
+  updates = Promise.resolve();
+  controls;
+  unsubscribe;
+  assertAlive() {
+    if (this.destroyed) throw new Error("OEM Widget has been destroyed");
+  }
+  report(error) {
+    this.options.onError?.(error instanceof Error ? error : new Error(String(error)));
+  }
+  notify() {
+    this.options.onStateChange?.(cloneState(this.state));
+  }
+  syncView = () => {
+    if (this.destroyed || this.applying) return;
+    const view = this.core.getView();
+    this.state = {
+      ...this.state,
+      regionId: view.regionId,
+      floorId: view.floorId ?? "M",
+      locale: this.core.getLocale().resolved,
+      center: { x: view.x, y: view.y },
+      zoom: view.zoom
+    };
+    this.controls.sync(this.state);
+    this.notify();
+  };
+  getState() {
+    this.assertAlive();
+    return cloneState(this.state);
+  }
+  setOptions(update) {
+    this.assertAlive();
+    const snapshot = cloneConfig(update);
+    const operation = this.updates.then(() => this.applyOptions(snapshot));
+    this.updates = operation.catch(() => void 0);
+    return operation;
+  }
+  async applyOptions(update) {
+    this.assertAlive();
+    const changes = Object.fromEntries(
+      Object.entries(update).filter(([, value]) => value !== void 0)
+    );
+    const merged = { ...toConfig(this.state), ...changes };
+    const nextRegionId = resolveRegionId(this.manifest, changes.region ?? this.state.regionId);
+    if (nextRegionId !== this.state.regionId) {
+      const preset = getPreset(getOEMRegion3(this.manifest, nextRegionId));
+      if (changes.floor === void 0) merged.floor = "M";
+      if (changes.subregion === void 0) merged.subregion = null;
+      if (changes.center === void 0) merged.center = preset.center;
+      if (changes.zoom === void 0) merged.zoom = preset.zoom;
+    }
+    if (changes.subregion !== void 0 && changes.subregion !== this.state.subregionId) {
+      const region = getOEMRegion3(this.manifest, nextRegionId);
+      const subregion = changes.subregion ? region.subregions.find((entry) => entry.id === changes.subregion) : void 0;
+      const preset = getPreset(region, subregion);
+      if (changes.center === void 0) merged.center = preset.center;
+      if (changes.zoom === void 0) merged.zoom = preset.zoom;
+    }
+    const previous = this.state;
+    const next = normalizeState(merged, this.manifest);
+    if (sameState(previous, next)) return;
+    const regionChanged = next.regionId !== previous.regionId;
+    const filterChanged = next.subregionId !== previous.subregionId || !sameMarkers(next.markerTypes, previous.markerTypes);
+    const viewChanged = regionChanged || next.floorId !== previous.floorId || next.zoom !== previous.zoom || next.center.x !== previous.center.x || next.center.y !== previous.center.y;
+    const previousMarkers = hasMarkers(previous);
+    const nextMarkers = hasMarkers(next);
+    this.applying = true;
+    this.root.classList.add("loading");
+    try {
+      if (previousMarkers && !nextMarkers) await this.core.setFeatures({ points: false });
+      if (filterChanged) {
+        this.core.setPointFilter({
+          types: next.markerTypes === "*" ? void 0 : next.markerTypes,
+          subregions: next.subregionId ? [next.subregionId] : void 0
+        });
+      }
+      if (regionChanged) await this.core.setRegion(next.regionId);
+      if (next.locale !== previous.locale) await this.core.setLocale(next.locale);
+      if (next.floorId !== previous.floorId) this.core.setFloor(next.floorId);
+      if (next.markerClustering !== previous.markerClustering) {
+        this.core.setMarkerClustering(next.markerClustering);
+      }
+      if (nextMarkers !== previousMarkers || next.labels !== previous.labels || next.boundaries !== previous.boundaries) {
+        await this.core.setFeatures({
+          points: nextMarkers,
+          labels: next.labels,
+          boundaries: next.boundaries
+        });
+      }
+      if (viewChanged) {
+        this.core.setView({
+          regionId: next.regionId,
+          floorId: next.floorId,
+          x: next.center.x,
+          y: next.center.y,
+          zoom: next.zoom
+        });
+      }
+      const view = this.core.getView();
+      this.state = {
+        ...next,
+        locale: this.core.getLocale().resolved,
+        center: { x: view.x, y: view.y },
+        zoom: view.zoom
+      };
+      this.controls.sync(this.state);
+    } finally {
+      this.applying = false;
+      this.root.classList.remove("loading");
+    }
+    this.notify();
+  }
+  resize() {
+    this.assertAlive();
+    this.core.resize();
+  }
+  destroy = () => {
+    if (this.destroyed) return;
+    this.destroyed = true;
+    this.unsubscribe();
+    this.controls.destroy?.();
+    this.options.signal?.removeEventListener("abort", this.destroy);
+    this.core.destroy();
+    this.root.remove();
+    mounted.delete(this.host);
+  };
+};
+async function createOEMWidget(container, options = {}) {
+  if (typeof document === "undefined") throw new Error("createOEMWidget must run in a browser");
+  options.signal?.throwIfAborted();
+  const host = resolveContainer(container);
+  if (mounted.has(host)) throw new Error("This container already hosts an OEM Widget");
+  const root = document.createElement("div");
+  root.className = "oemWidget loading";
+  if (options.className) root.classList.add(...options.className.split(/\s+/).filter(Boolean));
+  root.dataset.theme = options.theme ?? "light";
+  const mapHost = document.createElement("div");
+  mapHost.className = "mapHost";
+  root.append(mapHost);
+  host.append(root);
+  mounted.add(host);
+  let core;
+  let widget;
+  try {
+    const resources = options.resources ?? defaultOEMResources;
+    const manifest = options.manifest ? validateOEMManifest(options.manifest) : await loadOEMManifest(resources, options.signal);
+    installFonts(root, manifest, resources);
+    const state = normalizeState(options, manifest);
+    core = await createOEM(mapHost, {
+      resources,
+      manifest,
+      regionId: state.regionId,
+      floorId: state.floorId,
+      locale: state.locale,
+      theme: options.theme,
+      view: {
+        regionId: state.regionId,
+        floorId: state.floorId,
+        x: state.center.x,
+        y: state.center.y,
+        zoom: state.zoom
+      },
+      features: {
+        points: hasMarkers(state),
+        labels: state.labels,
+        boundaries: state.boundaries
+      },
+      markerClustering: state.markerClustering,
+      pointFilter: {
+        types: state.markerTypes === "*" ? void 0 : state.markerTypes,
+        subregions: state.subregionId ? [state.subregionId] : void 0
+      },
+      lockDrag: options.lockDrag ?? false,
+      lockZoom: options.lockZoom ?? false,
+      signal: options.signal,
+      onError: options.onError
+    });
+    widget = new Widget(host, root, core, manifest, options, state);
+    root.classList.remove("loading");
+    options.onReady?.(widget);
+    return widget;
+  } catch (error) {
+    if (widget) widget.destroy();
+    else {
+      core?.destroy();
+      root.remove();
+      mounted.delete(host);
+    }
+    throw error;
+  }
+}
+
+// packages/sdk/src/state.ts
+var parseBoolean = (value) => {
+  if (value === null) return void 0;
+  if (["1", "true", "on", "yes"].includes(value.toLowerCase())) return true;
+  if (["0", "false", "off", "no"].includes(value.toLowerCase())) return false;
+  return void 0;
+};
+var parseNumber = (value) => {
+  if (value === null || value.trim() === "") return void 0;
+  const number = Number(value);
+  return Number.isFinite(number) ? number : void 0;
+};
+var parseList = (value) => {
+  if (value === null) return void 0;
+  return [...new Set(value.split(",").map((entry) => entry.trim()).filter(Boolean))];
+};
+var toSearchParams = (source) => {
+  const trimmed = source.trim();
+  if (/^[a-z][a-z\d+.-]*:\/\//i.test(trimmed)) return new URL(trimmed).searchParams;
+  const query = trimmed.includes("?") ? trimmed.slice(trimmed.indexOf("?") + 1) : trimmed;
+  return new URLSearchParams(query.replace(/^\?/, ""));
+};
+function parseOEMUrlState(source) {
+  const params = typeof source === "string" ? toSearchParams(source) : source;
+  const filter = params.get("f");
+  const x = parseNumber(params.get("x"));
+  const y = parseNumber(params.get("y"));
+  return {
+    region: params.get("r") ?? void 0,
+    subregion: params.get("s"),
+    floor: params.get("layer") ?? void 0,
+    locale: params.get("l") ?? void 0,
+    markerTypes: filter === "*" ? "*" : filter === null ? void 0 : parseList(filter) ?? false,
+    labels: parseBoolean(params.get("labels") ?? params.get("names")),
+    boundaries: parseBoolean(params.get("boundaries") ?? params.get("boundary")),
+    markerClustering: parseBoolean(params.get("cluster")),
+    zoom: parseNumber(params.get("z")),
+    center: x === void 0 || y === void 0 ? void 0 : { x, y }
+  };
+}
+export {
+  createOEMWidget,
+  parseOEMUrlState
+};
+//# sourceMappingURL=index.js.map