@almadar/ui 5.13.2 → 5.14.0

package/dist/components/index.cjs

@@ -6309,7 +6309,7 @@ var init_Modal = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen) return null;
+      if (!isOpen || typeof document === "undefined") return null;
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -6319,124 +6319,127 @@ var init_Modal = __esm({
           handleClose();
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Overlay,
-          {
-            isVisible: isOpen,
-            onClick: handleOverlayClick,
-            className: "z-40"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          exports.Box,
-          {
-            className: cn(
-              "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              exports.Dialog,
-              {
-                ref: modalRef,
-                open: true,
-                className: cn(
-                  // Reset browser-default dialog chrome — we own styling. `static`
-                  // overrides the user-agent `position: absolute` so the parent
-                  // flex container's `justify-center` actually centers the dialog
-                  // (without this, the dialog drops out of flex flow and `m-0`
-                  // kills the user-agent's `margin: auto` centering, pinning the
-                  // dialog to top-left).
-                  "static m-0 p-0 border-0 bg-transparent",
-                  // Pre-existing dialog frame
-                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
-                  // Desktop sizing + viewport-aware floor.
-                  sizeClasses5[size],
-                  minWidthClasses[size],
-                  "max-h-[80vh]",
-                  // Mobile: take the entire screen. Override desktop max-w cap,
-                  // full height, no rounded corners, no min-width.
-                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
-                  lookStyles2[look],
-                  className
-                ),
-                style: dragY > 0 ? {
-                  transform: `translateY(${dragY}px)`,
-                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                } : void 0,
-                ...title && { "aria-labelledby": "modal-title" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    exports.Box,
-                    {
-                      className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
-                      onPointerDown: (e) => {
-                        if (!swipeDownToClose) return;
-                        dragStartY.current = e.clientY;
-                        isDragging.current = true;
-                        e.target.setPointerCapture(e.pointerId);
-                      },
-                      onPointerMove: (e) => {
-                        if (!isDragging.current) return;
-                        const dy = Math.max(0, e.clientY - dragStartY.current);
-                        setDragY(dy);
-                      },
-                      onPointerUp: () => {
-                        if (!isDragging.current) return;
-                        isDragging.current = false;
-                        if (dragY > 100) {
-                          handleClose();
-                        }
-                        setDragY(0);
-                      },
-                      onPointerCancel: () => {
-                        isDragging.current = false;
-                        setDragY(0);
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-10 h-1 rounded-full bg-border" })
-                    }
+      return reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Overlay,
+            {
+              isVisible: isOpen,
+              onClick: handleOverlayClick,
+              className: "z-[1000]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Box,
+            {
+              className: cn(
+                "fixed inset-0 z-[1001] pointer-events-none",
+                "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+                "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                exports.Dialog,
+                {
+                  ref: modalRef,
+                  open: true,
+                  className: cn(
+                    // Reset browser-default dialog chrome — we own styling. `static`
+                    // overrides the user-agent `position: absolute` so the parent
+                    // flex container's `justify-center` actually centers the dialog
+                    // (without this, the dialog drops out of flex flow and `m-0`
+                    // kills the user-agent's `margin: auto` centering, pinning the
+                    // dialog to top-left).
+                    "static m-0 p-0 border-0 bg-transparent",
+                    // Pre-existing dialog frame
+                    "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
+                    // Desktop sizing + viewport-aware floor.
+                    sizeClasses5[size],
+                    minWidthClasses[size],
+                    "max-h-[80vh]",
+                    // Mobile: take the entire screen. Override desktop max-w cap,
+                    // full height, no rounded corners, no min-width.
+                    "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
+                    lookStyles2[look],
+                    className
                   ),
-                  (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
-                    exports.Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 flex items-center justify-between",
-                        "border-b-[length:var(--border-width)] border-border"
-                      ),
-                      children: [
-                        title && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
-                        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-                          exports.Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            icon: "x",
-                            onClick: handleClose,
-                            "data-event": "CLOSE",
-                            "aria-label": "Close modal"
+                  style: dragY > 0 ? {
+                    transform: `translateY(${dragY}px)`,
+                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                  } : void 0,
+                  ...title && { "aria-labelledby": "modal-title" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      exports.Box,
+                      {
+                        className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+                        onPointerDown: (e) => {
+                          if (!swipeDownToClose) return;
+                          dragStartY.current = e.clientY;
+                          isDragging.current = true;
+                          e.target.setPointerCapture(e.pointerId);
+                        },
+                        onPointerMove: (e) => {
+                          if (!isDragging.current) return;
+                          const dy = Math.max(0, e.clientY - dragStartY.current);
+                          setDragY(dy);
+                        },
+                        onPointerUp: () => {
+                          if (!isDragging.current) return;
+                          isDragging.current = false;
+                          if (dragY > 100) {
+                            handleClose();
                           }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 overflow-y-auto p-6", children }),
-                  footer && /* @__PURE__ */ jsxRuntime.jsx(
-                    exports.Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 bg-muted",
-                        "border-t-[length:var(--border-width)] border-border"
-                      ),
-                      children: footer
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] });
+                          setDragY(0);
+                        },
+                        onPointerCancel: () => {
+                          isDragging.current = false;
+                          setDragY(0);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "w-10 h-1 rounded-full bg-border" })
+                      }
+                    ),
+                    (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
+                      exports.Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 flex items-center justify-between",
+                          "border-b-[length:var(--border-width)] border-border"
+                        ),
+                        children: [
+                          title && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
+                          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                            exports.Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              icon: "x",
+                              onClick: handleClose,
+                              "data-event": "CLOSE",
+                              "aria-label": "Close modal"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 overflow-y-auto p-6", children }),
+                    footer && /* @__PURE__ */ jsxRuntime.jsx(
+                      exports.Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 bg-muted",
+                          "border-t-[length:var(--border-width)] border-border"
+                        ),
+                        children: footer
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        document.body
+      );
     };
     exports.Modal.displayName = "Modal";
   }
@@ -8676,13 +8679,13 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect72, useRef: useRef66, useCallback: useCallback128, useState: useState111 } = React80__namespace.default;
+      const { useEffect: useEffect73, useRef: useRef67, useCallback: useCallback129, useState: useState112 } = React80__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
         const map = useMap();
-        const prevRef = useRef66({ centerLat, centerLng, zoom });
-        useEffect72(() => {
+        const prevRef = useRef67({ centerLat, centerLng, zoom });
+        useEffect73(() => {
           const prev = prevRef.current;
           if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
             map.setView([centerLat, centerLng], zoom);
@@ -8693,7 +8696,7 @@ var init_MapView = __esm({
       }
       function MapClickHandler({ onMapClick }) {
         const map = useMap();
-        useEffect72(() => {
+        useEffect73(() => {
           if (!onMapClick) return;
           const handler = (e) => {
             onMapClick(e.latlng.lat, e.latlng.lng);
@@ -8721,8 +8724,8 @@ var init_MapView = __esm({
         showAttribution = true
       }) {
         const eventBus = useEventBus2();
-        const [clickedPosition, setClickedPosition] = useState111(null);
-        const handleMapClick = useCallback128((lat, lng) => {
+        const [clickedPosition, setClickedPosition] = useState112(null);
+        const handleMapClick = useCallback129((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -8731,7 +8734,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback128((marker) => {
+        const handleMarkerClick = useCallback129((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -12488,7 +12491,7 @@ var init_CodeBlock = __esm({
             };
           };
         }, [errorLines]);
-        const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+        const isFoldable = foldableProp ?? true;
         const [collapsed, setCollapsed] = React80.useState(() => /* @__PURE__ */ new Set());
         const foldRegions = React80.useMemo(
           () => isFoldable ? computeFoldRegions(code) : [],
@@ -12511,6 +12514,8 @@ var init_CodeBlock = __esm({
         collapsedRef.current = collapsed;
         const foldStartMapRef = React80.useRef(foldStartMap);
         foldStartMapRef.current = foldStartMap;
+        const hiddenLinesRef = React80.useRef(hiddenLines);
+        hiddenLinesRef.current = hiddenLines;
         const toggleFold = React80.useCallback((lineNum) => {
           setCollapsed((prev) => {
             const next = new Set(prev);
@@ -12623,6 +12628,60 @@ var init_CodeBlock = __esm({
             eventBus.emit("UI:COPY_CODE", { language, success: false });
           }
         };
+        const handleSelectionCopy = React80.useCallback((e) => {
+          if (hiddenLinesRef.current.size === 0) return;
+          const sel = typeof window !== "undefined" ? window.getSelection() : null;
+          if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+          const lineOf = (node) => {
+            const start = node instanceof HTMLElement ? node : node?.parentElement ?? null;
+            const lineEl = start?.closest("[data-line]");
+            if (!lineEl) return null;
+            const n = parseInt(lineEl.getAttribute("data-line") ?? "", 10);
+            return Number.isNaN(n) ? null : n;
+          };
+          const range = sel.getRangeAt(0);
+          let a = lineOf(range.startContainer);
+          let b = lineOf(range.endContainer);
+          if (a === null || b === null) {
+            const container = codeRef.current;
+            if (!container) return;
+            let min = Infinity, max = -Infinity;
+            container.querySelectorAll("[data-line]").forEach((el) => {
+              if (!sel.containsNode(el, true)) return;
+              const n = parseInt(el.getAttribute("data-line") ?? "", 10);
+              if (!Number.isNaN(n)) {
+                min = Math.min(min, n);
+                max = Math.max(max, n);
+              }
+            });
+            if (min === Infinity) return;
+            a = a ?? min;
+            b = b ?? max;
+          }
+          if (a > b) [a, b] = [b, a];
+          let touchesFold = false;
+          for (let i = a; i <= b; i++) {
+            if (hiddenLinesRef.current.has(i) || foldStartMapRef.current.has(i) && collapsedRef.current.has(i)) {
+              touchesFold = true;
+              break;
+            }
+          }
+          if (!touchesFold) return;
+          let endLine = b;
+          let changed = true;
+          while (changed) {
+            changed = false;
+            foldStartMapRef.current.forEach((region, start) => {
+              if (start >= a && start <= endLine && collapsedRef.current.has(start) && region.end > endLine) {
+                endLine = region.end;
+                changed = true;
+              }
+            });
+          }
+          const full = code.split("\n").slice(a, endLine + 1).join("\n");
+          e.clipboardData.setData("text/plain", full);
+          e.preventDefault();
+        }, [code]);
         const hasHeader = showLanguageBadge || showCopyButton;
         return /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
           hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -12773,6 +12832,7 @@ var init_CodeBlock = __esm({
             "div",
             {
               ref: scrollRef,
+              onCopy: handleSelectionCopy,
               style: {
                 flex: 1,
                 minHeight: 0,
@@ -23832,6 +23892,242 @@ var init_InputGroup = __esm({
     exports.InputGroup.displayName = "InputGroup";
   }
 });
+function resolveAnchorRect(anchor) {
+  if (typeof anchor === "string") {
+    return document.querySelector(anchor)?.getBoundingClientRect() ?? null;
+  }
+  if (anchor instanceof DOMRect) return anchor;
+  return anchor?.current?.getBoundingClientRect() ?? null;
+}
+function useAnchorRect(anchor, active) {
+  const [rect, setRect] = React80.useState(null);
+  const read = React80.useCallback(() => resolveAnchorRect(anchor), [anchor]);
+  React80.useEffect(() => {
+    if (!active || typeof document === "undefined") {
+      setRect(null);
+      return;
+    }
+    const update = () => setRect(read());
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    let raf = 0;
+    let tries = 0;
+    const poll = () => {
+      const found = read();
+      if (found) {
+        setRect(found);
+      } else if (tries++ < 40) {
+        raf = requestAnimationFrame(poll);
+      }
+    };
+    if (!read()) raf = requestAnimationFrame(poll);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+      if (raf) cancelAnimationFrame(raf);
+    };
+  }, [active, read]);
+  return rect;
+}
+function placeCard(placement, rect, size) {
+  const vw = typeof window !== "undefined" ? window.innerWidth : 1024;
+  const vh = typeof window !== "undefined" ? window.innerHeight : 768;
+  let top = 0;
+  let left = 0;
+  switch (placement) {
+    case "top":
+      top = rect.top - size.h - GAP;
+      left = rect.left + rect.width / 2 - size.w / 2;
+      break;
+    case "left":
+      left = rect.left - size.w - GAP;
+      top = rect.top + rect.height / 2 - size.h / 2;
+      break;
+    case "right":
+      left = rect.right + GAP;
+      top = rect.top + rect.height / 2 - size.h / 2;
+      break;
+    case "bottom":
+    default:
+      top = rect.bottom + GAP;
+      left = rect.left + rect.width / 2 - size.w / 2;
+      break;
+  }
+  left = Math.max(EDGE, Math.min(left, vw - size.w - EDGE));
+  top = Math.max(EDGE, Math.min(top, vh - size.h - EDGE));
+  return { top, left };
+}
+var GAP, EDGE; exports.Coachmark = void 0;
+var init_Coachmark = __esm({
+  "components/molecules/Coachmark.tsx"() {
+    "use client";
+    init_Box();
+    init_Typography();
+    init_Button();
+    init_Icon();
+    init_cn();
+    GAP = 10;
+    EDGE = 8;
+    exports.Coachmark = ({
+      open,
+      anchor,
+      placement = "bottom",
+      title,
+      children,
+      onDismiss,
+      onPrimary,
+      primaryLabel,
+      onSecondary,
+      secondaryLabel,
+      showBeacon = false,
+      className
+    }) => {
+      const cardRef = React80.useRef(null);
+      const rect = useAnchorRect(anchor, open);
+      const [pos, setPos] = React80.useState(null);
+      React80.useLayoutEffect(() => {
+        if (!open || !rect || !cardRef.current) {
+          setPos(null);
+          return;
+        }
+        const size = {
+          w: cardRef.current.offsetWidth,
+          h: cardRef.current.offsetHeight
+        };
+        setPos(placeCard(placement, rect, size));
+      }, [open, rect, placement, children, title]);
+      if (!open || !rect || typeof document === "undefined") return null;
+      const hasFooter = Boolean(onPrimary || onSecondary);
+      const card = /* @__PURE__ */ jsxRuntime.jsxs(
+        exports.Box,
+        {
+          ref: cardRef,
+          bg: "surface",
+          border: true,
+          rounded: "lg",
+          shadow: "xl",
+          padding: "md",
+          role: "dialog",
+          "aria-label": title,
+          className: cn(
+            "fixed z-50 max-w-xs w-72 transition-opacity duration-150",
+            pos ? "opacity-100" : "opacity-0",
+            className
+          ),
+          style: pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Dismiss",
+                onClick: onDismiss,
+                className: "absolute top-2 right-2 text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+                children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "close", size: "xs" })
+              }
+            ),
+            title && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body1", weight: "semibold", className: "pr-6 mb-1", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body2", color: "muted", as: "div", children }),
+            hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-end gap-2", children: [
+              onSecondary && /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", onClick: onSecondary, children: secondaryLabel ?? "Skip" }),
+              onPrimary && /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "primary", size: "sm", onClick: onPrimary, children: primaryLabel ?? "Got it" })
+            ] })
+          ]
+        }
+      );
+      const beacon = showBeacon ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed z-50 pointer-events-none",
+          style: {
+            top: rect.top + rect.height / 2 - 6,
+            left: rect.left + rect.width / 2 - 6
+          },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-3 w-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-[var(--color-primary)] opacity-75" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex h-3 w-3 rounded-full bg-[var(--color-primary)]" })
+          ] })
+        }
+      ) : null;
+      return reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          beacon,
+          card
+        ] }),
+        document.body
+      );
+    };
+    exports.Coachmark.displayName = "Coachmark";
+  }
+});
+var DIM; exports.OnboardingSpotlight = void 0;
+var init_OnboardingSpotlight = __esm({
+  "components/molecules/OnboardingSpotlight.tsx"() {
+    "use client";
+    init_Coachmark();
+    init_cn();
+    DIM = "fixed z-[45] bg-black/60";
+    exports.OnboardingSpotlight = ({
+      steps,
+      stepIndex,
+      onNext,
+      onSkip,
+      onFinish,
+      cutoutPadding = 6
+    }) => {
+      const step = steps[stepIndex];
+      const rect = useAnchorRect(step?.anchor ?? "", Boolean(step));
+      if (!step || typeof document === "undefined") return null;
+      const isLast = stepIndex >= steps.length - 1;
+      const backdrop = rect ? (() => {
+        const p2 = cutoutPadding;
+        const top = Math.max(0, rect.top - p2);
+        const left = Math.max(0, rect.left - p2);
+        const right = rect.right + p2;
+        const bottom = rect.bottom + p2;
+        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top: 0, left: 0, right: 0, height: top } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top: bottom, left: 0, right: 0, bottom: 0 } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top, left: 0, width: left, height: bottom - top } }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: DIM, style: { top, left: right, right: 0, height: bottom - top } })
+        ] });
+      })() : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(DIM, "inset-0") });
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        reactDom.createPortal(backdrop, document.body),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          exports.Coachmark,
+          {
+            open: true,
+            anchor: step.anchor,
+            placement: step.placement ?? "bottom",
+            title: step.title,
+            onDismiss: onSkip,
+            onSecondary: onSkip,
+            secondaryLabel: "Skip",
+            onPrimary: isLast ? onFinish : onNext,
+            primaryLabel: isLast ? "Done" : "Next",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: step.body }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-3 flex items-center gap-1.5", children: steps.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "h-1.5 w-1.5 rounded-full",
+                    i === stepIndex ? "bg-[var(--color-primary)]" : "bg-[var(--color-border)]"
+                  )
+                },
+                i
+              )) })
+            ]
+          }
+        )
+      ] });
+    };
+    exports.OnboardingSpotlight.displayName = "OnboardingSpotlight";
+  }
+});
 function gateEnabled(level, ns = NAMESPACE) {
   return logger.isLogLevelEnabled(level, ns);
 }
@@ -34192,7 +34488,7 @@ var init_AvlPage = __esm({
     AvlPage.displayName = "AvlPage";
   }
 });
-var NODE_W, NODE_H, GAP, ARROW_W, MiniStateMachine;
+var NODE_W, NODE_H, GAP2, ARROW_W, MiniStateMachine;
 var init_MiniStateMachine = __esm({
   "components/molecules/avl/MiniStateMachine.tsx"() {
     "use client";
@@ -34201,7 +34497,7 @@ var init_MiniStateMachine = __esm({
     init_types();
     NODE_W = 24;
     NODE_H = 16;
-    GAP = 8;
+    GAP2 = 8;
     ARROW_W = 16;
     MiniStateMachine = ({ data, className }) => {
       const states = data.states;
@@ -34218,12 +34514,12 @@ var init_MiniStateMachine = __esm({
         for (const e of t.effects) effectTypes.add(e.type);
       }
       const effectList = Array.from(effectTypes).slice(0, 6);
-      const totalW = states.length * NODE_W + (states.length - 1) * (GAP + ARROW_W + GAP);
+      const totalW = states.length * NODE_W + (states.length - 1) * (GAP2 + ARROW_W + GAP2);
       const svgW = Math.max(totalW + 4, 60);
       const svgH = NODE_H + (effectList.length > 0 ? 18 : 4);
       return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: svgW, height: svgH, viewBox: `0 0 ${svgW} ${svgH}`, className, children: [
         states.map((s, i) => {
-          const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
+          const x = 2 + i * (NODE_W + GAP2 + ARROW_W + GAP2);
           const tc = transitionCounts[s.name] ?? 0;
           const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
           return /* @__PURE__ */ jsxRuntime.jsxs(React80__namespace.default.Fragment, { children: [
@@ -34244,9 +34540,9 @@ var init_MiniStateMachine = __esm({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "line",
                 {
-                  x1: x + NODE_W + GAP,
+                  x1: x + NODE_W + GAP2,
                   y1: NODE_H / 2,
-                  x2: x + NODE_W + GAP + ARROW_W - 3,
+                  x2: x + NODE_W + GAP2 + ARROW_W - 3,
                   y2: NODE_H / 2,
                   stroke: "var(--color-muted-foreground)",
                   strokeWidth: 1,
@@ -34256,7 +34552,7 @@ var init_MiniStateMachine = __esm({
               /* @__PURE__ */ jsxRuntime.jsx(
                 "polygon",
                 {
-                  points: `${x + NODE_W + GAP + ARROW_W - 3},${NODE_H / 2 - 2.5} ${x + NODE_W + GAP + ARROW_W},${NODE_H / 2} ${x + NODE_W + GAP + ARROW_W - 3},${NODE_H / 2 + 2.5}`,
+                  points: `${x + NODE_W + GAP2 + ARROW_W - 3},${NODE_H / 2 - 2.5} ${x + NODE_W + GAP2 + ARROW_W},${NODE_H / 2} ${x + NODE_W + GAP2 + ARROW_W - 3},${NODE_H / 2 + 2.5}`,
                   fill: "var(--color-muted-foreground)",
                   opacity: 0.4
                 }
@@ -34403,6 +34699,8 @@ var init_molecules = __esm({
     init_Modal();
     init_Pagination();
     init_Popover();
+    init_Coachmark();
+    init_OnboardingSpotlight();
     init_RelationSelect();
     init_SearchInput();
     init_SidePanel();
@@ -50817,6 +51115,7 @@ exports.transitionAnimation = transitionAnimation;
 exports.updateEntity = updateEntity;
 exports.updateSingleton = updateSingleton;
 exports.useAgentChat = useAgentChat;
+exports.useAnchorRect = useAnchorRect;
 exports.useAuthContext = useAuthContext;
 exports.useBattleState = useBattleState;
 exports.useCamera = useCamera;