@geops/rvf-mobility-web-component 0.1.33 → 0.1.35

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/GeolocationButton/GeolocationButton.tsx

@@ -1,14 +1,32 @@
 import type { JSX, PreactDOMAttributes } from "preact";
 
-import { Geolocation } from "ol";
+import { Feature, Geolocation } from "ol";
+import { Point } from "ol/geom";
+import VectorLayer from "ol/layer/Vector";
 import { unByKey } from "ol/Observable";
 import { fromLonLat } from "ol/proj";
+import VectorSource from "ol/source/Vector";
+import { Icon, Style } from "ol/style";
 import { useEffect, useMemo } from "preact/hooks";
 
 import GeolocationIcon from "../icons/Geolocation";
+// @ts-ecpect-error - svg file not handled by vite
+import locationSvg from "../icons/Geolocation/location.svg";
 import RvfIconButton from "../RvfIconButton";
 import useMapContext from "../utils/hooks/useMapContext";
 
+const point = new Point([0, 0]);
+const feature = new Feature(point);
+const layer = new VectorLayer({
+  source: new VectorSource({ features: [feature] }),
+  style: new Style({
+    image: new Icon({
+      anchor: [0.5, 1],
+      src: locationSvg,
+    }),
+  }),
+});
+
 export type GeolocationButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
@@ -32,15 +50,19 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
       geolocation.once("change:position", (evt) => {
         const position = evt.target.getPosition();
         if (evt.target.getPosition()) {
+          const coord = fromLonLat(position, "EPSG:3857");
           map.getView().setZoom(TRACKING_ZOOM);
-          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
         }
       }),
       // then we only center the map.
       geolocation.on("change:position", (evt) => {
         const position = evt.target.getPosition();
         if (evt.target.getPosition()) {
-          map.getView().setCenter(fromLonLat(position, "EPSG:3857"));
+          const coord = fromLonLat(position, "EPSG:3857");
+          map.getView().setCenter(coord);
+          point.setCoordinates(coord);
         }
       }),
     ];
@@ -52,7 +74,13 @@ function GeolocationButton({ ...props }: GeolocationButtonProps) {
 
   useEffect(() => {
     geolocation.setTracking(isTracking);
-  }, [geolocation, isTracking]);
+    if (isTracking) {
+      layer.setMap(map);
+    }
+    return () => {
+      layer.setMap(null);
+    };
+  }, [map, geolocation, isTracking]);
 
   return (
     <RvfIconButton

package/src/RouteIcon/RouteIcon.tsx

@@ -34,7 +34,7 @@ function RouteIcon({
     departure?.line ||
     stopSequence?.line ||
     trajectory?.properties?.line;
-  const type = stopSequence?.type || trajectory?.type;
+  const type = lineToUse?.type || stopSequence?.type || trajectory?.type;
   const backgroundColor = getMainColorForVehicle(
     line || departure || stopSequence || trajectory,
   );
@@ -46,7 +46,10 @@ function RouteIcon({
 
   const fontSize = fontSizesByNbLetters[text.length] || 12;
   const font = getTextFontForVehicle(fontSize, text);
-  const hasRealtime = stopSequence?.has_realtime_journey;
+
+  // RealtimeIcon only for stopsequence for now
+  const hasRealtime = stopSequence?.has_realtime_journey === true;
+  const showNoRealtimeIcon = !!stopSequence;
   const isCancelled = stopSequence?.stations[0]?.state === "JOURNEY_CANCELLED";
 
   if (borderColor === backgroundColor) {
@@ -67,7 +70,7 @@ function RouteIcon({
       >
         {children || text}
 
-        {!isCancelled && !hasRealtime && (
+        {showNoRealtimeIcon && !isCancelled && !hasRealtime && (
           <NoRealtime className={"absolute -left-2 -top-2"} />
         )}
       </span>

package/src/RouteStopProgress/RouteStopProgress.tsx

@@ -6,11 +6,16 @@ import useMapContext from "../utils/hooks/useMapContext";
 import useRouteStop from "../utils/hooks/useRouteStop";
 
 export type RouteStopProgressProps = {
+  lineColor?: string;
   svgProps?: JSX.HTMLAttributes<SVGElement> & PreactDOMAttributes;
 } & JSX.HTMLAttributes<HTMLDivElement> &
   PreactDOMAttributes;
 
-function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
+function RouteStopProgress({
+  lineColor,
+  svgProps,
+  ...props
+}: RouteStopProgressProps) {
   const { stopSequence } = useMapContext();
   const { invertColor, status } = useRouteStop();
   const { isBoarding, isFirst, isLast, isLeft, isPassed, progress } = status;
@@ -19,16 +24,16 @@ function RouteStopProgress({ svgProps, ...props }: RouteStopProgressProps) {
   const yDone = `${progress}%`;
 
   const greyColor = "rgb(156, 163, 175)";
-  const lineColor = getMainColorForVehicle(stopSequence);
+  const lineColorr = lineColor || getMainColorForVehicle(stopSequence);
 
-  let colorScheme = isPassed ? greyColor : lineColor;
-  let invertColorScheme = isPassed ? lineColor : greyColor;
+  let colorScheme = isPassed ? greyColor : lineColorr;
+  let invertColorScheme = isPassed ? lineColorr : greyColor;
   let progressDoneColor = greyColor;
 
   if (invertColor) {
-    colorScheme = isPassed ? lineColor : greyColor;
-    invertColorScheme = isPassed ? greyColor : lineColor;
-    progressDoneColor = lineColor;
+    colorScheme = isPassed ? lineColorr : greyColor;
+    invertColorScheme = isPassed ? greyColor : lineColorr;
+    progressDoneColor = lineColorr;
   }
 
   const circleColor =

package/src/RvfEmbedNavigation/DragPanWarning.ts

@@ -0,0 +1,124 @@
+import type { Map, MapBrowserEvent } from "ol";
+import type { Options } from "ol/control/Control";
+
+import { Control } from "ol/control";
+import { EventsKey } from "ol/events";
+import { DragPan } from "ol/interaction";
+import { unByKey } from "ol/Observable";
+
+type DragPanWarningOptions = {
+  className?: string;
+} & Options;
+
+class DragPanWarning extends Control {
+  dragPan?: DragPan;
+
+  icon: HTMLDivElement;
+
+  onPointerDragRef?: EventsKey;
+
+  text: HTMLParagraphElement;
+
+  constructor(options: DragPanWarningOptions = {}) {
+    const element = document.createElement("div");
+    element.className =
+      options.className !== undefined
+        ? options.className
+        : "ol-drag-pan-warning";
+    element.style.display = "none";
+    element.style.pointerEvents = "auto";
+
+    super({
+      element,
+      render: options.render,
+      target: options.target,
+    });
+
+    this.icon = document.createElement("div");
+    this.icon.className = `${element.className}-icon`;
+
+    // sbb icons: sbb/two-finger-tap-large.svg';
+    this.icon.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+        <path fill="none" stroke="currentColor" stroke-width="2" d="M22.999,25 L22.997,13.002 C22.997,11.896 23.893,11 24.999,11 C26.105,11 27.001,11.896 27.001,13.002 L26.999,26.002 M31,25.003 C31,23.897 31.896,23.001 33.002,23.001 C34.11,23.001 35.006,23.897 35.006,25.003 C35.006,25.003 35,26.125 35,32.001 C35,37.875 33.2,41.001 33.2,41.001 L19,41.001 C19,41.001 12.21,29.483 11.586,28.419 C10.962,27.355 10.804,26.369 11.586,25.587 C12.37,24.805 13.636,24.805 14.418,25.587 L18.998,30.169 L19,30.169 L19,25.001 L18.996,15.003 C18.996,13.897 19.894,13.001 21,13.001 C22.106,13.001 23.002,13.897 23.002,15.003 L23,26.015 M26.9942,22.997 C26.9942,21.891 27.8902,20.995 28.9962,20.995 C30.1042,20.995 31.0002,21.891 31.0002,22.997 L31.0002,26.001 M30,16.3046 C30.632,15.3606 31,14.2246 31,13.0006 C31,9.6846 28.314,7.0006 25,7.0006 C23.208,7.0006 21.616,7.8026 20.518,9.0486 C17.432,9.2986 15,11.8506 15,15.0006 C15,16.2166 15.368,17.3426 15.988,18.2866"/>
+      </svg>
+    `;
+    this.element.appendChild(this.icon);
+
+    this.text = document.createElement("p");
+    this.text.className = `${element.className}-text`;
+    this.text.innerHTML = "Benutzen Sie 2 Finger um die Karte zu bedienen.";
+    this.element.appendChild(this.text);
+
+    this.dragPan = undefined;
+    this.onPointerDragRef = undefined;
+    this.onPointerDrag = this.onPointerDrag.bind(this);
+    this.onTouchEnd = this.onTouchEnd.bind(this);
+  }
+
+  onPointerDrag(event: MapBrowserEvent<PointerEvent>) {
+    // Show the warning on next pointerdrag events.
+    if (event.activePointers?.length !== 1) {
+      return true;
+    }
+    this.element.style.display = "flex";
+    document.addEventListener("touchend", this.onTouchEnd, { once: true });
+    return false;
+  }
+
+  onTouchEnd() {
+    unByKey(this.onPointerDragRef);
+    this.element.style.display = "none";
+  }
+
+  setMap(map: Map) {
+    super.setMap(map);
+    document.removeEventListener("touchend", this.onTouchEnd);
+    unByKey(this.onPointerDragRef);
+
+    if (map) {
+      const viewport = map.getViewport();
+
+      // We allow default scroll behavior for touch events.
+      viewport.style.touchAction = "pan-x pan-y";
+
+      // Deactivate drag pan only on touch events.
+      this.dragPan = map
+        .getInteractions()
+        .getArray()
+        .find((interaction) => {
+          return interaction instanceof DragPan;
+        }) as DragPan;
+
+      if (!this.dragPan) {
+        console.error(
+          "Impossible to find the DragPan interaction, DragPanWarning will not work as expected.",
+        );
+        return;
+      }
+
+      this.listenerKeys.push(
+        // @ts-expect-error - we need to listen to pointerdown events
+        map.on("pointerdown", (evt: MapBrowserEvent<PointerEvent>) => {
+          document.removeEventListener("touchend", this.onTouchEnd);
+
+          if (
+            evt.originalEvent.pointerType !== "touch" ||
+            // @ts-expect-error - condition_ is a private method
+            !this.dragPan?.condition_(evt)
+          ) {
+            this.element.style.display = "none";
+            return true;
+          }
+
+          this.onPointerDragRef = map.on("pointerdrag", this.onPointerDrag);
+
+          return true;
+        }),
+      );
+      this.element.addEventListener("click", this.onTouchEnd);
+    }
+  }
+}
+
+export default DragPanWarning;

package/src/RvfEmbedNavigation/RvfEmbedNavigation.tsx

@@ -0,0 +1,50 @@
+import { MouseWheelZoom } from "ol/interaction";
+import { useEffect, useState } from "preact/hooks";
+
+import useMapContext from "../utils/hooks/useMapContext";
+import DragPanWarning from "./DragPanWarning";
+
+function RvfEmbedNavigation() {
+  const { map } = useMapContext();
+  const [target, setTarget] = useState(null);
+
+  useEffect(() => {
+    let dragPanWarningControl = null;
+
+    if (!map || !target) {
+      return;
+    }
+    // Deactivates mouse wheel zoom
+    map.getInteractions().forEach((interaction) => {
+      if (interaction instanceof MouseWheelZoom) {
+        interaction.setActive(false);
+      }
+    });
+
+    dragPanWarningControl = new DragPanWarning({ target: target });
+    map.addControl(dragPanWarningControl);
+
+    return () => {
+      if (dragPanWarningControl) {
+        map.removeControl(dragPanWarningControl);
+      }
+
+      // Deactivates mouse wheel zoom
+      map.getInteractions().forEach((interaction) => {
+        if (interaction instanceof MouseWheelZoom) {
+          interaction.setActive(true);
+        }
+      });
+    };
+  }, [map, target]);
+
+  return (
+    <div
+      ref={(node) => {
+        return setTarget(node);
+      }}
+    ></div>
+  );
+}
+
+export default RvfEmbedNavigation;

package/src/RvfEmbedNavigation/index.js

@@ -0,0 +1 @@
+export { default } from "./RvfEmbedNavigation";

package/src/RvfFeatureDetails/RvfLineNetworkDetails/RvfLineNetworkDetails.tsx

@@ -1,9 +1,35 @@
+import { RealtimeLine } from "mobility-toolbox-js/types";
 import { Feature } from "ol";
 import { useEffect, useMemo, useState } from "preact/hooks";
 
+import ArrowDown from "../../icons/ArrowDown";
+import ArrowUp from "../../icons/ArrowUp";
+import RouteIcon from "../../RouteIcon";
+import RouteStopProgress from "../../RouteStopProgress";
 import useMapContext from "../../utils/hooks/useMapContext";
+import { RouteStopContext } from "../../utils/hooks/useRouteStop";
 
 let cacheLineInfosById = null;
+let cacheStopInfosById = null;
+
+interface LineInfo {
+  color: string;
+  external_id: string;
+  id: string;
+  long_name: string;
+  mot: string;
+  operator_name: string;
+  short_name: string;
+  text_color: string;
+}
+
+interface StopInfo {
+  external_id: string;
+  importance: number;
+  long_name: string;
+  short_name: string;
+  visibility_level: number;
+}
 
 function RvfLineNetworkDetails({
   feature,
@@ -13,7 +39,11 @@ function RvfLineNetworkDetails({
   features: Feature[];
 }) {
   const { apikey, mapsurl } = useMapContext();
-  const [lineInfos, setLineInfos] = useState(null);
+  const [lineInfos, setLineInfos] = useState<LineInfo[]>(null);
+  const [stopInfos, setStopInfos] = useState<StopInfo[]>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [stopInfosOpenId, setStopInfosOpenId] = useState<string>(null);
+
   useEffect(() => {
     const fetchInfos = async () => {
       if (!cacheLineInfosById) {
@@ -22,15 +52,16 @@ function RvfLineNetworkDetails({
         );
         const data = await response.json();
         cacheLineInfosById = data["geops.lnp.lines"];
+        cacheStopInfosById = data["geops.lnp.stops"];
       }
       setLineInfos(cacheLineInfosById);
+      setStopInfos(cacheStopInfosById);
     };
     fetchInfos();
   }, [apikey, mapsurl]);
 
-  const lineNetworkIdsByOperator = useMemo(() => {
+  const lineInfosByOperator: Record<string, LineInfo[]> = useMemo(() => {
     const byOperators = {};
-
     [
       ...new Set(
         features.map((f) => {
@@ -46,51 +77,155 @@ function RvfLineNetworkDetails({
         if (!byOperators[operatorName]) {
           byOperators[operatorName] = [];
         }
+        lineInfos[id].id = id;
         byOperators[operatorName].push(lineInfos[id]);
       });
 
     return byOperators;
   }, [features, lineInfos]);
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const stopInfoIdsByLineId: Record<string, string[]> = useMemo(() => {
+    const byLineId = {};
+    features.forEach((f) => {
+      const lineId = f.get("original_line_id");
+      if (lineId && !byLineId[lineId]) {
+        try {
+          byLineId[lineId] = JSON.parse(f.get("stop_ids"));
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    });
+
+    return byLineId;
+  }, [features]);
+
   if (!feature || !lineInfos) {
     return null;
   }
 
   return (
     <div className="flex flex-col gap-4">
-      {Object.entries(lineNetworkIdsByOperator).map(
-        ([operatorName, linesInfos]) => {
-          return (
-            <div className={"flex flex-col gap-2"} key={operatorName}>
-              <div>{operatorName}</div>
-              {linesInfos.map((lineInfo) => {
+      {Object.entries(lineInfosByOperator).map(([operatorName, linesInfos]) => {
+        return (
+          <div className={"flex flex-col gap-2"} key={operatorName}>
+            <div>{operatorName}</div>
+            {linesInfos
+              .sort((a, b) => {
+                return a.short_name?.localeCompare(b.short_name);
+              })
+              .map((lineInfo) => {
                 const {
+                  color: backgroundColor,
+                  id,
                   // color,
                   // external_id,
-                  long_name: longName,
+                  long_name,
+                  mot,
                   short_name: shortName,
-                  // text_color,
+                  text_color: textColor,
                 } = lineInfo;
+                let longName = long_name;
+
+                let stops = null;
+                //stopInfoIdsByLineId?.[id] || null;
+                if (!stops?.length) {
+                  stops = null;
+                }
+                console.log("stops", stops, longName);
+                if (!longName && stops) {
+                  const names = stops.map((stopId) => {
+                    return stopInfos[stopId].short_name;
+                  });
+                  console.log("stops", names);
+
+                  longName = [
+                    ...new Set([names[0], names[names.length - 1]]),
+                  ].join(" - ");
+                }
+
+                // Build a line object
+                const line: { type: string } & RealtimeLine = {
+                  color: null,
+                  id: null,
+                  name: shortName,
+                  stroke: null,
+                  text_color: null,
+                  type: mot,
+                };
+
+                if (textColor) {
+                  line.text_color = "#" + textColor;
+                }
+
+                if (backgroundColor) {
+                  line.color = "#" + backgroundColor;
+                }
 
                 return (
-                  <div className={"flex items-center gap-2"} key={shortName}>
-                    <div>
+                  <div key={shortName}>
+                    <div
+                      className={
+                        "flex w-full items-center justify-between gap-2"
+                      }
+                      // onClick={() => {
+                      //   setStopInfosOpenId(stopInfosOpenId === id ? null : id);
+                      // }}
+                    >
+                      <div>
+                        <RouteIcon line={line}></RouteIcon>
+                      </div>
+                      {!!longName && (
+                        <div className={"flex-1 text-left"}>{longName}</div>
+                      )}
+                      {!!stops && (
+                        <button className={"shrink-0"}>
+                          {stopInfosOpenId === id ? <ArrowUp /> : <ArrowDown />}
+                        </button>
+                      )}
+                    </div>
+                    {!!stops && (
                       <div
-                        className={
-                          "rounded-md bg-red px-[12px] py-[9px] font-bold leading-none text-white"
-                        }
+                        className={`${stopInfosOpenId === id ? "" : "hidden"}`}
                       >
-                        {shortName}
+                        {stops?.map((stopId, index, arr) => {
+                          const stop = stopInfos[stopId];
+                          return (
+                            <div
+                              className={"flex items-center gap-2"}
+                              key={stopId}
+                            >
+                              <RouteStopContext.Provider
+                                value={{
+                                  index,
+                                  status: {
+                                    isFirst: !index,
+                                    isLast: index === arr.length - 1,
+                                    isLeft: false,
+                                    isPassed: false,
+                                    progress: !index ? 50 : 0,
+                                  },
+                                  stop,
+                                }}
+                              >
+                                <RouteStopProgress
+                                  className="relative flex size-8 shrink-0 items-center justify-center"
+                                  lineColor={line.color}
+                                />
+                                <div>{stop.short_name}</div>
+                              </RouteStopContext.Provider>
+                            </div>
+                          );
+                        })}
                       </div>
-                    </div>
-                    <div>{longName}</div>
+                    )}
                   </div>
                 );
               })}
-            </div>
-          );
-        },
-      )}
+          </div>
+        );
+      })}
     </div>
   );
 }

package/src/RvfMobilityMap/RvfMobilityMap.tsx

@@ -29,6 +29,7 @@ import NotificationLayer from "../NotificationLayer";
 import Overlay from "../Overlay";
 import RealtimeLayer from "../RealtimeLayer";
 import RouteSchedule from "../RouteSchedule";
+import RvfEmbedNavigation from "../RvfEmbedNavigation/RvfEmbedNavigation";
 import RvfExportMenu from "../RvfExportMenu";
 import RvfExportMenuButton from "../RvfExportMenuButton";
 import RvfFeatureDetails from "../RvfFeatureDetails";
@@ -80,6 +81,7 @@ const PRIORITY_FROM_TYPE = {
 
 export type RvfMobilityMapProps = {
   details: string;
+  embed: string;
   layers: string; // list of visible layers on load
   layertree: string;
   print: string;
@@ -153,6 +155,7 @@ function RvfMobilityMap({
   baselayer = "de.rvf",
   center = null,
   details = "true",
+  embed = "false",
   extent = bbox,
   geolocation = "true",
   layers = null,
@@ -241,6 +244,10 @@ function RvfMobilityMap({
     return details === "true";
   }, [details]);
 
+  const isEmbed = useMemo(() => {
+    return embed === "true";
+  }, [embed]);
+
   // Apply initial visibility of layers
   useInitialLayersVisiblity(map, layers);
 
@@ -331,6 +338,7 @@ function RvfMobilityMap({
         baselayer,
         center,
         details,
+        embed,
         extent,
         geolocation,
         layers,
@@ -356,6 +364,7 @@ function RvfMobilityMap({
     );
   }, [
     baselayer,
+    embed,
     layers,
     center,
     geolocation,
@@ -526,6 +535,8 @@ function RvfMobilityMap({
               <Map className="relative flex-1 overflow-visible ">
                 <BaseLayer {...baseLayerProps} />
                 <SingleClickListener />
+                {isEmbed && <RvfEmbedNavigation />}
+
                 <RvfSelectedFeatureHighlightLayer />
 
                 {hasRealtime && (

package/src/RvfMobilityMap/index.css

@@ -0,0 +1,13 @@
+
+.ol-drag-pan-warning {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 25px;
+  z-index: 100000;
+}

package/src/icons/Geolocation/location.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/location</title>
+    <g id="iconfont/location" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M12,1.42108547e-14 C17.5228474,1.42108547e-14 22,4.47715241 22,10 C22,13.3716045 20.1975984,16.6760073 17.2259527,19.8127445 C16.2070021,20.8883035 15.118253,21.8681776 14.0291768,22.735405 C13.6473986,23.0394136 13.2921737,23.3081093 12.9722093,23.5391947 C12.777224,23.6800174 12.6351454,23.77842 12.5547002,23.8320502 C12.2188008,24.0559831 11.7811992,24.0559831 11.4452998,23.8320502 C11.3648546,23.77842 11.222776,23.6800174 11.0277907,23.5391947 C10.7078263,23.3081093 10.3526014,23.0394136 9.97082322,22.735405 C8.88174698,21.8681776 7.7929979,20.8883035 6.77404732,19.8127445 C3.80240157,16.6760073 2,13.3716045 2,10 C2,4.47715241 6.47715256,1.42108547e-14 12,1.42108547e-14 Z M12,2 C7.58172205,2 4,5.58172193 4,10 C4,12.7533953 5.57259843,15.6364924 8.22595268,18.4372552 C9.1757521,19.4398213 10.196378,20.3583846 11.2166768,21.1708447 C11.4951711,21.3926087 11.7576885,21.5936102 12,21.7726167 C12.2423115,21.5936102 12.5048289,21.3926087 12.7833232,21.1708447 C13.803622,20.3583846 14.8242479,19.4398213 15.7740473,18.4372552 C18.4274016,15.6364924 20,12.7533953 20,10 C20,5.58172193 16.418278,2 12,2 Z M12,5.99999987 C14.209139,5.99999987 16,7.79086087 16,9.99999987 C16,12.2091389 14.209139,13.9999999 12,13.9999999 C9.790861,13.9999999 8,12.2091389 8,9.99999987 C8,7.79086087 9.790861,5.99999987 12,5.99999987 Z M12,7.99999987 C10.8954305,7.99999987 10,8.89543037 10,9.99999987 C10,11.1045694 10.8954305,11.9999999 12,11.9999999 C13.1045695,11.9999999 14,11.1045694 14,9.99999987 C14,8.89543037 13.1045695,7.99999987 12,7.99999987 Z" id="Combined-Shape" fill="#E3000B" fill-rule="nonzero"></path>
+    </g>
+</svg>

package/src/index.tsx

@@ -30,6 +30,7 @@ register(
     "tenant",
     "zoom",
     "permalink",
+    "embed",
   ],
   { shadow: true },
 );