@dxos/react-ui-stack 0.8.4-main.e098934 → 0.8.4-main.ead640a

package/dist/lib/node-esm/{chunk-HE3BRF7A.mjs → chunk-G2QYUH52.mjs}

@@ -11,56 +11,25 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     const [dominantColor, setDominantColor] = useState(void 0);
     const [imageLoaded, setImageLoaded] = useState(false);
     const canvasRef = useRef(null);
-    const extractDominantColor = (img) => {
-      const canvas = canvasRef.current;
-      const ctx = canvas?.getContext("2d");
-      if (!canvas || !ctx) {
+    const handleImageError = () => {
+      setCrossOriginState(void 0);
+    };
+    const handleImageLoad = ({ target }) => {
+      const img = target;
+      if (!canvasRef.current) {
         return;
       }
-      canvas.width = sampleSize;
-      canvas.height = sampleSize;
-      ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
       try {
-        const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
-        const pixels = imageData.data;
-        let r = 0;
-        let g = 0;
-        let b = 0;
-        let totalWeight = 0;
-        for (let i = 0; i < pixels.length; i += 4) {
-          const red = pixels[i];
-          const green = pixels[i + 1];
-          const blue = pixels[i + 2];
-          const alpha = pixels[i + 3];
-          if (alpha === 0) continue;
-          const max = Math.max(red, green, blue);
-          const min = Math.min(red, green, blue);
-          const saturation = max === 0 ? 0 : (max - min) / max;
-          const weight = 1 + saturation * 2;
-          r += red * weight;
-          g += green * weight;
-          b += blue * weight;
-          totalWeight += weight;
-        }
-        if (totalWeight > 0) {
-          r = Math.round(r / totalWeight);
-          g = Math.round(g / totalWeight);
-          b = Math.round(b / totalWeight);
-          r = Math.round(r * contrast);
-          g = Math.round(g * contrast);
-          b = Math.round(b * contrast);
-          setDominantColor(`rgb(${r}, ${g}, ${b})`);
+        const color = extractDominantColor(canvasRef.current, img, {
+          sampleSize,
+          contrast
+        });
+        if (color) {
+          setDominantColor(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
         }
       } catch {
         setCrossOriginState(void 0);
       }
-    };
-    const handleImageError = () => {
-      setCrossOriginState(void 0);
-    };
-    const handleImageLoad = (ev) => {
-      const img = ev.target;
-      extractDominantColor(img);
       setImageLoaded(true);
     };
     return /* @__PURE__ */ React.createElement("div", {
@@ -96,6 +65,67 @@ var Image = ({ classNames, src, alt = "", crossOrigin = "anonymous", sampleSize
     _effect.f();
   }
 };
+var extractDominantColor = (canvas, img, { sampleSize = 64, contrast = 0.95 }) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    return null;
+  }
+  canvas.width = sampleSize;
+  canvas.height = sampleSize;
+  ctx.drawImage(img, 0, 0, sampleSize, sampleSize);
+  const imageData = ctx.getImageData(0, 0, sampleSize, sampleSize);
+  const pixels = imageData.data;
+  if (isTransparent(pixels, sampleSize)) {
+    return null;
+  }
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  let totalWeight = 0;
+  for (let i = 0; i < pixels.length; i += 4) {
+    const red = pixels[i];
+    const green = pixels[i + 1];
+    const blue = pixels[i + 2];
+    const alpha = pixels[i + 3];
+    if (alpha === 0) continue;
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const saturation = max === 0 ? 0 : (max - min) / max;
+    const weight = 1 + saturation * 2;
+    r += red * weight;
+    g += green * weight;
+    b += blue * weight;
+    totalWeight += weight;
+  }
+  if (totalWeight > 0) {
+    r = Math.round(Math.round(r / totalWeight) * contrast);
+    g = Math.round(Math.round(g / totalWeight) * contrast);
+    b = Math.round(Math.round(b / totalWeight) * contrast);
+    return [
+      r,
+      g,
+      b
+    ];
+  }
+  return null;
+};
+var isTransparent = (pixels, sampleSize, threshold = 0.5) => {
+  let edgeTransparentPixels = 0;
+  const edgePixels = sampleSize * 4 - 4;
+  for (let x = 0; x < sampleSize; x++) {
+    const topIndex = x * 4;
+    if (pixels[topIndex + 3] === 0) edgeTransparentPixels++;
+    const bottomIndex = ((sampleSize - 1) * sampleSize + x) * 4;
+    if (pixels[bottomIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  for (let y = 1; y < sampleSize - 1; y++) {
+    const leftIndex = y * sampleSize * 4;
+    if (pixels[leftIndex + 3] === 0) edgeTransparentPixels++;
+    const rightIndex = (y * sampleSize + sampleSize - 1) * 4;
+    if (pixels[rightIndex + 3] === 0) edgeTransparentPixels++;
+  }
+  return edgeTransparentPixels / edgePixels > threshold;
+};
 
 // src/components/StackContext.tsx
 import { createContext, useContext } from "react";
@@ -206,11 +236,12 @@ var scrollIntoViewAndFocus = (el, orientation) => {
   });
   return el.focus();
 };
-var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), getDropElement, separatorOnScroll, ...props }, forwardedRef) => {
+var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientation = "vertical", rail = true, size = "intrinsic", onRearrange, itemsCount = Children.count(children), getDropElement, separatorOnScroll, circularFocus, ...props }, forwardedRef) => {
   var _effect = _useSignals2();
   try {
     const stackId = useId("stack", props.id);
     const [stackElement, stackRef] = useState3(null);
+    const [lastFocusedItem, setLastFocusedItem] = useState3();
     const composedItemRef = composeRefs(stackRef, forwardedRef);
     const styles = {
       [orientation === "horizontal" ? "gridTemplateColumns" : "gridTemplateRows"]: size === "split" ? `repeat(${itemsCount}, 1fr)` : `repeat(${itemsCount}, min-content) [tabster-dummies] 0`,
@@ -241,6 +272,19 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       separatorOnScroll,
       orientation
     ]);
+    const handleBlur = useCallback((event) => {
+      if (event.target) {
+        const target = event.target;
+        const closestStackItem = target.closest(`[data-dx-item-id]`);
+        if (closestStackItem?.closest(`[data-dx-stack="${stackId}"]`)) {
+          setLastFocusedItem(closestStackItem?.getAttribute("data-dx-item-id") ?? void 0);
+        }
+      }
+      props.onBlur?.(event);
+    }, [
+      stackId,
+      props.onBlur
+    ]);
     const handleKeyDown = useCallback((event) => {
       const target = event.target;
       if (event.key.startsWith("Arrow") && !target.closest(`input, textarea, [role="textbox"], [data-tabster*="mover"], [data-arrow-keys="all"], [data-arrow-keys~="${event.key.toLowerCase().slice(5)}"]`)) {
@@ -254,7 +298,16 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
           const parallelDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowUp" : event.key === "ArrowLeft") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowDown" : event.key === "ArrowRight") ? 1 : 0;
           const perpendicularDelta = (closestStackOrientation === "vertical" ? event.key === "ArrowLeft" : event.key === "ArrowUp") ? -1 : (closestStackOrientation === "vertical" ? event.key === "ArrowRight" : event.key === "ArrowDown") ? 1 : 0;
           if (parallelDelta !== 0) {
-            const adjacentItem = closestStackItems[(closestStackItems.indexOf(closestOwnedItem) + parallelDelta + closestStackItems.length) % closestStackItems.length];
+            const currentIndex = closestStackItems.indexOf(closestOwnedItem);
+            const nextIndex = currentIndex + parallelDelta;
+            let adjacentItem;
+            if (circularFocus) {
+              adjacentItem = closestStackItems[(nextIndex + closestStackItems.length) % closestStackItems.length];
+            } else {
+              if (nextIndex >= 0 && nextIndex < closestStackItems.length) {
+                adjacentItem = closestStackItems[nextIndex];
+              }
+            }
             if (adjacentItem) {
               event.preventDefault();
               scrollIntoViewAndFocus(adjacentItem, closestStackOrientation);
@@ -263,24 +316,38 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
           if (perpendicularDelta !== 0) {
             if (ancestorStack && ancestorOrientation !== closestStackOrientation) {
               const siblingStacks = Array.from(ancestorStack.querySelectorAll(`[data-dx-stack-item="${ancestorStack.getAttribute("data-dx-stack")}"] [data-dx-stack]`));
-              const adjacentStack = siblingStacks[(siblingStacks.indexOf(closestStack) + perpendicularDelta + siblingStacks.length) % siblingStacks.length];
+              const currentStackIndex = siblingStacks.indexOf(closestStack);
+              const nextStackIndex = currentStackIndex + perpendicularDelta;
+              let adjacentStack;
+              if (ancestorStack.getAttribute("data-dx-stack-circular-focus") === "true") {
+                adjacentStack = siblingStacks[(nextStackIndex + siblingStacks.length) % siblingStacks.length];
+              } else {
+                if (nextStackIndex >= 0 && nextStackIndex < siblingStacks.length) {
+                  adjacentStack = siblingStacks[nextStackIndex];
+                }
+              }
               const adjacentStackSelfItem = adjacentStack?.closest(`[data-dx-stack-item=${ancestorStack.getAttribute("data-dx-stack")}]`);
               const adjacentStackItems = adjacentStack ? Array.from(adjacentStack.querySelectorAll(`[data-dx-stack-item="${adjacentStack.getAttribute("data-dx-stack")}"]`)) : [];
-              if (adjacentStackItems.length > 0) {
-                const ownedItemRect = closestOwnedItem.getBoundingClientRect();
-                const targetPosition = closestStackOrientation === "vertical" ? ownedItemRect.top : ownedItemRect.left;
+              if (adjacentStack && adjacentStackItems.length > 0) {
                 let closestItem = adjacentStackItems[0];
-                let closestDistance = Infinity;
-                for (const item of adjacentStackItems) {
-                  const itemRect = item.getBoundingClientRect();
-                  const itemPosition = closestStackOrientation === "vertical" ? itemRect.top : itemRect.left;
-                  const distance = Math.abs(itemPosition - targetPosition);
-                  if (distance < closestDistance) {
-                    closestDistance = distance;
-                    closestItem = item;
-                  }
-                  if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
-                    break;
+                const lastFocusedItem2 = adjacentStack.querySelector(`[data-dx-item-id="${adjacentStack.getAttribute("data-dx-last-focused-item") ?? "never"}"]`);
+                if (lastFocusedItem2) {
+                  closestItem = lastFocusedItem2;
+                } else {
+                  const ownedItemRect = closestOwnedItem.getBoundingClientRect();
+                  const targetPosition = closestStackOrientation === "vertical" ? ownedItemRect.top : ownedItemRect.left;
+                  let closestDistance = Infinity;
+                  for (const item of adjacentStackItems) {
+                    const itemRect = item.getBoundingClientRect();
+                    const itemPosition = closestStackOrientation === "vertical" ? itemRect.top : itemRect.left;
+                    const distance = Math.abs(itemPosition - targetPosition);
+                    if (distance < closestDistance) {
+                      closestDistance = distance;
+                      closestItem = item;
+                    }
+                    if (closestDistance <= PERPENDICULAR_FOCUS_THRESHHOLD) {
+                      break;
+                    }
                   }
                 }
                 event.preventDefault();
@@ -306,7 +373,8 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       props.onKeyDown?.(event);
     }, [
       props.onKeyDown,
-      stackId
+      stackId,
+      circularFocus
     ]);
     const gridClasses = useMemo(() => {
       if (!rail) {
@@ -352,7 +420,10 @@ var Stack = /* @__PURE__ */ forwardRef(({ children, classNames, style, orientati
       ...props,
       className: mx2("grid relative [--stack-gap:var(--dx-trimXs)]", gridClasses, size === "contain" && (orientation === "horizontal" ? "overflow-x-auto overscroll-x-contain min-bs-0 max-bs-full bs-full" : "overflow-y-auto min-is-0 max-is-full is-full"), classNames),
       onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
       "data-dx-stack": stackId,
+      "data-dx-stack-circular-focus": circularFocus,
+      "data-dx-last-focused-item": lastFocusedItem,
       "data-rail": rail,
       "aria-orientation": orientation,
       style: styles,
@@ -397,7 +468,7 @@ import { draggable, dropTargetForElements as dropTargetForElements2 } from "@atl
 import { preserveOffsetOnSource } from "@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachClosestEdge as attachClosestEdge2, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
-import { useFocusableGroup as useFocusableGroup2 } from "@fluentui/react-tabster";
+import { useFocusableGroup } from "@fluentui/react-tabster";
 import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
 import React9, { forwardRef as forwardRef5, useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
@@ -409,7 +480,7 @@ import { mx as mx6 } from "@dxos/react-ui-theme";
 import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3, { forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", ...props }, forwardedRef) => {
+var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusbar, layoutManaged, classNames, size = "intrinsic", scrollable, ...props }, forwardedRef) => {
   var _effect = _useSignals3();
   try {
     const { size: stackItemSize } = useStack();
@@ -432,7 +503,7 @@ var StackItemContent = /* @__PURE__ */ forwardRef2(({ children, toolbar, statusb
     return /* @__PURE__ */ React3.createElement("div", {
       role: "none",
       ...props,
-      className: mx3("group grid grid-cols-[100%] density-coarse", stackItemSize === "contain" && "min-bs-0 overflow-hidden", size === "video" ? "aspect-video" : size === "square" && "aspect-square", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", classNames),
+      className: mx3("group grid grid-cols-[100%] density-coarse", size === "video" ? "aspect-video" : size === "square" && "aspect-square", stackItemSize === "contain" && "min-bs-0 overflow-hidden", scrollable ? "min-bs-0 overflow-y-auto scrollbar-thin contain-layout" : "overflow-hidden", role === "section" && toolbar && "[&_.dx-toolbar]:sticky [&_.dx-toolbar]:z-[1] [&_.dx-toolbar]:block-start-0 [&_.dx-toolbar]:-mbe-px [&_.dx-toolbar]:min-is-0", toolbar && "[&>.dx-toolbar]:relative [&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator", classNames),
       style,
       "data-popover-collision-boundary": true,
       ref: forwardedRef
@@ -462,7 +533,6 @@ var StackItemDragHandle = ({ asChild, children }) => {
 
 // src/components/StackItem/StackItemHeading.tsx
 import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import { useFocusableGroup } from "@fluentui/react-tabster";
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import React5, { forwardRef as forwardRef3 } from "react";
 import { useAttention } from "@dxos/react-ui-attention";
@@ -471,16 +541,11 @@ var StackItemHeading = ({ children, classNames, asChild, separateOnScroll, ...pr
   var _effect = _useSignals5();
   try {
     const { orientation } = useStack();
-    const focusableGroupAttrs = useFocusableGroup({
-      tabBehavior: "limited"
-    });
     const Root = asChild ? Slot2 : "div";
     return /* @__PURE__ */ React5.createElement(Root, {
       role: "heading",
       ...props,
-      tabIndex: 0,
-      ...focusableGroupAttrs,
-      className: mx4("flex items-center dx-focus-ring-inset-over-all relative !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
+      className: mx4("flex items-center !border-is-0 bg-headerSurface", separateOnScroll ? 'border-transparent [[data-scroll-separator="true"]_&]:border-subduedSeparator' : "border-subduedSeparator", orientation === "horizontal" ? "bs-[--rail-size]" : "is-[--rail-size] flex-col", orientation === "horizontal" ? "border-be" : "border-ie", classNames)
     }, children);
   } finally {
     _effect.f();
@@ -790,7 +855,7 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       selfDragHandleElement,
       itemElement
     ]);
-    const focusableGroupAttrs = useFocusableGroup2({
+    const focusableGroupAttrs = useFocusableGroup({
       tabBehavior: "limited"
     });
     const shouldShowDropIndicator = () => {
@@ -831,8 +896,9 @@ var StackItemRoot = /* @__PURE__ */ forwardRef5(({ item, children, classNames, s
       ...props,
       tabIndex: 0,
       ...focusableGroupAttrs,
-      className: mx6("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : orientation === "horizontal" ? "dx-focus-ring-group-x" : "dx-focus-ring-group-y", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
+      className: mx6("group/stack-item grid relative", focusIndicatorVariant === "over-all" ? "dx-focus-ring-inset-over-all" : focusIndicatorVariant === "over-all-always" ? "dx-focus-ring-inset-over-all-always" : orientation === "horizontal" ? focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-x-always" : "dx-focus-ring-group-x" : focusIndicatorVariant === "group-always" ? "dx-focus-ring-group-y-always" : "dx-focus-ring-group-y", orientation === "horizontal" ? "grid-rows-subgrid" : "grid-cols-subgrid", rail && (orientation === "horizontal" ? "row-span-2" : "col-span-2"), role === "section" && orientation !== "horizontal" && "border-be border-subduedSeparator", classNames),
       "data-dx-stack-item": stackId,
+      "data-dx-item-id": item.id,
       ...resizeAttributes,
       style: {
         ...stackSize !== "split" && sizeStyle(size, orientation),
@@ -882,7 +948,7 @@ var cardDialogPaddedOverflow = `${cardDialogOverflow} plb-cardSpacingBlock`;
 var cardDialogSearchListRoot = "pli-cardSpacingInline pbs-cardSpacingBlock [&>input]:mbe-0 min-bs-0 flex-1 flex flex-col";
 var cardText = cardSpacing;
 var cardHeading = "text-lg font-medium line-clamp-2 grow";
-var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full";
+var cardChrome = "pli-[--dx-cardSpacingChrome] mlb-[--dx-cardSpacingChrome] [&_.dx-button]:text-start [&_.dx-button]:is-full [&_.dx-button]:pis-[calc(var(--dx-cardSpacingInline)-var(--dx-cardSpacingChrome))]";
 
 // src/exemplars/Card/Card.tsx
 import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
@@ -891,6 +957,8 @@ import { Slot as Slot3 } from "@radix-ui/react-slot";
 import React10, { forwardRef as forwardRef6 } from "react";
 import { Icon as Icon2, IconButton, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { hoverableControls, mx as mx7 } from "@dxos/react-ui-theme";
+var cardDefaultInlineSize = 18;
+var cardStackDefaultInlineSizeRem = cardDefaultInlineSize + 2.125;
 var CardStaticRoot = /* @__PURE__ */ forwardRef6(({ children, classNames, asChild, role = "group", ...props }, forwardedRef) => {
   var _effect = _useSignals10();
   try {
@@ -1006,7 +1074,7 @@ var CardPoster = (props) => {
     if (props.image) {
       return /* @__PURE__ */ React10.createElement(Image, {
         classNames: [
-          `dx-card__poster is-full __bs-auto`,
+          `dx-card__poster is-full`,
           aspect
         ],
         src: props.image,
@@ -1192,21 +1260,24 @@ var CardStackFooter = /* @__PURE__ */ forwardRef7(({ children, classNames, asChi
     _effect.f();
   }
 });
-var cardStackContent = [
-  "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop",
-  railGridHorizontalContainFitContent
-];
-var CardStackContent = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", ...props }, forwardedRef) => {
+var cardStackContent = "shrink min-bs-0 bg-baseSurface border border-separator rounded-md grid dx-focus-ring-group-x-indicator kanban-drop";
+var CardStackContent = /* @__PURE__ */ forwardRef7(({ children, classNames, asChild, role = "none", footer = true, ...props }, forwardedRef) => {
   var _effect = _useSignals12();
   try {
     const Root = asChild ? Slot4 : "div";
+    const baseClassNames = footer ? [
+      cardStackContent,
+      railGridHorizontalContainFitContent
+    ] : [
+      cardStackContent
+    ];
     const rootProps = asChild ? {
       classNames: [
-        ...cardStackContent,
+        ...baseClassNames,
         classNames
       ]
     } : {
-      className: mx9(...cardStackContent, classNames),
+      className: mx9(...baseClassNames, classNames),
       role
     };
     return /* @__PURE__ */ React12.createElement(Root, {
@@ -1364,6 +1435,8 @@ export {
   cardText,
   cardHeading,
   cardChrome,
+  cardDefaultInlineSize,
+  cardStackDefaultInlineSizeRem,
   Card,
   CardDragPreview2 as CardDragPreview,
   cardStackHeading,
@@ -1374,4 +1447,4 @@ export {
   CardStack,
   CardStackDragPreview
 };
-//# sourceMappingURL=chunk-HE3BRF7A.mjs.map
+//# sourceMappingURL=chunk-G2QYUH52.mjs.map