@almadar/ui 5.14.0 → 5.14.1

package/dist/components/index.cjs

@@ -23981,11 +23981,13 @@ var init_Coachmark = __esm({
       onSecondary,
       secondaryLabel,
       showBeacon = false,
+      fallbackCentered = false,
       className
     }) => {
       const cardRef = React80.useRef(null);
       const rect = useAnchorRect(anchor, open);
       const [pos, setPos] = React80.useState(null);
+      const centered = open && !rect && fallbackCentered;
       React80.useLayoutEffect(() => {
         if (!open || !rect || !cardRef.current) {
           setPos(null);
@@ -23997,8 +23999,18 @@ var init_Coachmark = __esm({
         };
         setPos(placeCard(placement, rect, size));
       }, [open, rect, placement, children, title]);
-      if (!open || !rect || typeof document === "undefined") return null;
+      React80.useEffect(() => {
+        if (!open) return;
+        const onKey = (e) => {
+          if (e.key === "Escape") onDismiss();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+      }, [open, onDismiss]);
+      if (!open || typeof document === "undefined") return null;
+      if (!rect && !centered) return null;
       const hasFooter = Boolean(onPrimary || onSecondary);
+      const cardStyle = centered ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" } : pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 };
       const card = /* @__PURE__ */ jsxRuntime.jsxs(
         exports.Box,
         {
@@ -24012,10 +24024,10 @@ var init_Coachmark = __esm({
           "aria-label": title,
           className: cn(
             "fixed z-50 max-w-xs w-72 transition-opacity duration-150",
-            pos ? "opacity-100" : "opacity-0",
+            centered || pos ? "opacity-100" : "opacity-0",
             className
           ),
-          style: pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 },
+          style: cardStyle,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -24036,7 +24048,7 @@ var init_Coachmark = __esm({
           ]
         }
       );
-      const beacon = showBeacon ? /* @__PURE__ */ jsxRuntime.jsx(
+      const beacon = showBeacon && rect ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: "fixed z-50 pointer-events-none",
@@ -24102,6 +24114,7 @@ var init_OnboardingSpotlight = __esm({
             open: true,
             anchor: step.anchor,
             placement: step.placement ?? "bottom",
+            fallbackCentered: true,
             title: step.title,
             onDismiss: onSkip,
             onSecondary: onSkip,

package/dist/components/index.js

@@ -23932,11 +23932,13 @@ var init_Coachmark = __esm({
       onSecondary,
       secondaryLabel,
       showBeacon = false,
+      fallbackCentered = false,
       className
     }) => {
       const cardRef = useRef(null);
       const rect = useAnchorRect(anchor, open);
       const [pos, setPos] = useState(null);
+      const centered = open && !rect && fallbackCentered;
       useLayoutEffect(() => {
         if (!open || !rect || !cardRef.current) {
           setPos(null);
@@ -23948,8 +23950,18 @@ var init_Coachmark = __esm({
         };
         setPos(placeCard(placement, rect, size));
       }, [open, rect, placement, children, title]);
-      if (!open || !rect || typeof document === "undefined") return null;
+      useEffect(() => {
+        if (!open) return;
+        const onKey = (e) => {
+          if (e.key === "Escape") onDismiss();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+      }, [open, onDismiss]);
+      if (!open || typeof document === "undefined") return null;
+      if (!rect && !centered) return null;
       const hasFooter = Boolean(onPrimary || onSecondary);
+      const cardStyle = centered ? { top: "50%", left: "50%", transform: "translate(-50%, -50%)" } : pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 };
       const card = /* @__PURE__ */ jsxs(
         Box,
         {
@@ -23963,10 +23975,10 @@ var init_Coachmark = __esm({
           "aria-label": title,
           className: cn(
             "fixed z-50 max-w-xs w-72 transition-opacity duration-150",
-            pos ? "opacity-100" : "opacity-0",
+            centered || pos ? "opacity-100" : "opacity-0",
             className
           ),
-          style: pos ? { top: pos.top, left: pos.left } : { top: -9999, left: -9999 },
+          style: cardStyle,
           children: [
             /* @__PURE__ */ jsx(
               "button",
@@ -23987,7 +23999,7 @@ var init_Coachmark = __esm({
           ]
         }
       );
-      const beacon = showBeacon ? /* @__PURE__ */ jsx(
+      const beacon = showBeacon && rect ? /* @__PURE__ */ jsx(
         "div",
         {
           className: "fixed z-50 pointer-events-none",
@@ -24053,6 +24065,7 @@ var init_OnboardingSpotlight = __esm({
             open: true,
             anchor: step.anchor,
             placement: step.placement ?? "bottom",
+            fallbackCentered: true,
             title: step.title,
             onDismiss: onSkip,
             onSecondary: onSkip,

package/dist/components/molecules/Coachmark.d.ts

@@ -29,6 +29,13 @@ export interface CoachmarkProps {
     secondaryLabel?: string;
     /** Render a pulsing beacon dot over the anchor (keystone hints). */
     showBeacon?: boolean;
+    /**
+     * If the anchor can't be resolved, render the card centered in the viewport
+     * instead of hiding it. Guarantees the card (and its dismiss/skip) is always
+     * reachable — used by OnboardingSpotlight so a missing anchor never traps the
+     * user behind a dimmed backdrop. Default false: a missing anchor hides the card.
+     */
+    fallbackCentered?: boolean;
     className?: string;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.14.0",
+  "version": "5.14.1",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [