@wildo-ai/presets-components 1.1.4 → 1.1.6

package/dist/esm/components/feedback/celebration-overlay.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { cn, Button, ButtonVariants_Variant, useIconRegistry, StandardIconReference, IconSize } from "@wildo-ai/saas-frontend-lib";
+import { cn, Button, ButtonVariants_Variant, Dialog, DialogContent, DialogTitle, DialogDescription, useIconRegistry, StandardIconReference, IconSize } from "@wildo-ai/saas-frontend-lib";
 import { ButtonSize } from "@wildo-ai/presets-components-models";
+import { CelebrationDisplayMode } from '@wildo-ai/saas-models';
 /**
  * V-12: Honour `prefers-reduced-motion: reduce`. Returns true when the user has
  * asked the OS to minimize non-essential motion. We listen for changes so the
@@ -34,21 +35,43 @@ function usePrefersReducedMotion() {
  * any engine concepts.
  *
  * Modes:
- * - `overlay`: Full-screen centered overlay with message + confetti emoji
- * - `confetti`: Lightweight confetti burst (no blocking overlay)
- * - `lottie`: Animated TADA icon via the unified icon system (uses `renderIcon` with
- *   `StandardIconReference.TADA`, rendered in a scaled container for visual impact)
+ * - `confetti`: a non-blocking particle burst over the page, `aria-hidden`, purely decorative.
+ * - `overlay`: a blocking Dialog carrying the message, an optional next-step CTA and a dismiss.
+ * - `lottie`: renders EXACTLY as `overlay` in this default preset.
+ *
+ * Both dialog modes draw `StandardIconReference.TADA` from the icon registry, which plays an animated
+ * Lottie when the application ran `registerDefaultAnimations()` and the reader has not asked for
+ * reduced motion — so the dialog DOES animate; `lottie` simply adds nothing to it here. An earlier
+ * version of this comment said "no Lottie animation is played", which stopped being true once both
+ * branches drew the registry icon.
+ *
+ * `lottie` is the mode an application's OWN preset for `LOW_LEVEL_CELEBRATION_OVERLAY` can give a
+ * meaning to — a per-milestone animation chosen from `notificationIdentifier`, for instance. This
+ * default preset keeps it equal to `overlay` rather than inventing an asset it has no way to know.
  *
  * For engine integration, see the celebration-overlay wrapper in saas-frontend-lib
  * which wires NotificationContext and i18n.
  */
-export const CelebrationOverlay = React.forwardRef(({ isActive, mode = 'overlay', message, notificationIdentifier, nextStep, onDismiss, dismissLabel = 'Dismiss', ariaLabel, className, ...props }, ref) => {
+export const CelebrationOverlay = React.forwardRef(({ isActive, mode = 'overlay', message, heading, notificationIdentifier, nextStep, onDismiss, dismissLabel, ariaLabel, className, ...props }, ref) => {
     const { renderIcon } = useIconRegistry();
     const prefersReducedMotion = usePrefersReducedMotion();
-    if (!isActive)
-        return null;
-    // Confetti mode: lightweight effect without blocking overlay
-    if (mode === 'confetti') {
+    /**
+     * The blocking mode does NOT early-return on `!isActive` — it hands `open` to the Dialog.
+     *
+     * `AppCelebrationOverlay` is mounted permanently and toggles `isActive`, so returning `null`
+     * would UNMOUNT an open Radix Dialog rather than closing it. Closing runs Radix's own teardown —
+     * focus restoration to whatever was focused before, scroll unlock, exit transition; an abrupt
+     * unmount skips the ordered path, and the celebration auto-dismisses after five seconds, so
+     * that teardown happens on its own with nobody interacting. Leaving a keyboard user's focus
+     * stranded on `<body>` after a celebration would be a REGRESSION on the state before the trap
+     * existed, when focus never moved at all.
+     *
+     * Confetti keeps the early return: it is decorative, `aria-hidden`, traps nothing and has
+     * nothing to tear down.
+     */
+    if (mode === CelebrationDisplayMode.CONFETTI) {
+        if (!isActive)
+            return null;
         // V-12: Honour reduced-motion. Render a single static success glyph in the
         // viewport center instead of 20 animated particles. The wrapper keeps the
         // same z-index / pointer-events contract so callers don't notice.
@@ -56,24 +79,125 @@ export const CelebrationOverlay = React.forwardRef(({ isActive, mode = 'overlay'
             return (_jsx("div", { ref: ref, className: cn("fixed inset-0 z-(--z-transient) pointer-events-none", className), "aria-hidden": "true", ...props, children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "text-foreground", "aria-hidden": "true", children: renderIcon(StandardIconReference.TADA, { size: IconSize.XL }) }) }) }));
         }
         return (_jsx("div", { ref: ref, className: cn("fixed inset-0 z-(--z-transient) pointer-events-none", className), "aria-hidden": "true", ...props, children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "animate-celebration-burst", children: Array.from({ length: 20 }).map((_, i) => (_jsx("span", { className: "absolute inline-block w-2 h-2 rounded-full", style: {
-                            backgroundColor: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'][i % 6],
+                            // Themed, not literal. These six variables are defined by the engine Tailwind
+                            // plugin from the application's own semantic palette, so the celebration follows
+                            // the brand and differs between light and dark. They used to be six hard-coded
+                            // hex values, which is why the burst looked the same in every application and in
+                            // every theme. An application rebrands the confetti by overriding the variables.
+                            backgroundColor: `var(--celebration-particle-${(i % 6) + 1})`,
                             transform: `rotate(${i * 18}deg) translateY(-${40 + Math.random() * 60}px)`,
                             animation: `celebration-particle ${0.6 + Math.random() * 0.8}s ease-out forwards`,
                             animationDelay: `${Math.random() * 0.3}s`,
                             opacity: 0,
                         } }, i))) }) }) }));
     }
-    // Overlay mode (default, also used as fallback for lottie mode):
-    return (_jsx("div", { ref: ref, role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || 'Celebration', className: cn("fixed inset-0 z-(--z-transient) flex items-center justify-center", "bg-background/80 backdrop-blur-sm", 
-        // V-12: Drop the entrance animation when the user prefers reduced
-        // motion; everything else (focus, dismissal) stays the same.
-        !prefersReducedMotion && "animate-in fade-in duration-[var(--motion-duration-normal)]", className), onClick: onDismiss, ...props, children: _jsxs("div", { className: "relative flex flex-col items-center gap-field p-card-lg max-w-md text-center", onClick: (e) => e.stopPropagation(), children: [mode === 'lottie' ? (_jsx("div", { className: "flex items-center justify-center", style: { width: 80, height: 80 }, "aria-hidden": "true", children: _jsx("div", { style: { transform: 'scale(2.5)' }, children: renderIcon(StandardIconReference.TADA, { size: IconSize.XL }) }) })) : (_jsx("div", { className: cn("text-6xl", 
-                    // V-12: Skip the bounce when reduced-motion is requested.
-                    !prefersReducedMotion && "animate-bounce"), "aria-hidden": "true", children: "\uD83C\uDF89" })), message && (_jsx("p", { className: "text-xl font-semibold text-foreground", children: message })), _jsxs("div", { className: "flex flex-col items-center gap-element mt-element", children: [nextStep && (_jsx(Button, { variant: ButtonVariants_Variant.DEFAULT, size: ButtonSize.MD, onClick: (e) => {
-                                e.stopPropagation();
-                                nextStep.onClick();
-                                onDismiss?.();
-                            }, children: nextStep.label })), onDismiss && (_jsx("button", { type: "button", onClick: onDismiss, className: "text-sm text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors", children: dismissLabel }))] })] }) }));
+    /**
+     * Blocking mode, built on the engine Dialog rather than hand-rolled.
+     *
+     * This was a bare `<div role="dialog" aria-modal="true">` with NO focus trap, no initial focus,
+     * no Escape handler and no focus restoration, dismissible only by clicking the backdrop. An
+     * `aria-modal` container that leaves the page behind it fully focusable is worse than one that
+     * makes no claim at all: assistive technology is told the rest of the page is inert while a
+     * keyboard user tabs straight into it — and with dismissal on pointer only, a keyboard user
+     * could not close it either.
+     *
+     * `Dialog` is Radix underneath, so focus trapping, initial focus, Escape and focus restoration
+     * all come from the same mechanism `GuidanceModal` already uses. Building a second trap beside
+     * a working one is how two half-correct implementations happen.
+     *
+     * `onOpenChange` receives Radix's Escape and outside-click, so the dismissal the original
+     * hand-wired is preserved without a bespoke click handler on the overlay root.
+     *
+     * ONE consequence of the non-modal branch, verified against the installed Radix rather than
+     * assumed: `DialogOverlay` returns `null` when `modal` is false, so a congratulatory
+     * celebration renders NO SCRIM — the page behind it stays visible and clickable, which is what
+     * a transient should do. Outside-click dismissal survives regardless, because it comes from
+     * `DismissableLayer` rather than from the overlay element. Escape likewise: it is handled on the
+     * owner document, not through the focus trap the non-modal branch does not install.
+     */
+    /**
+     * MODAL only when the celebration asks for a DECISION.
+     *
+     * A Radix modal moves focus into itself on open and locks body scroll. This overlay
+     * auto-dismisses after five seconds and is, in its common shape, purely congratulatory — so a
+     * milestone achieved while someone is typing stole their focus mid-keystroke, dropped every
+     * character until the timer fired, and froze the page's scroll for a decorative moment. The
+     * docblock above reasons only about the opposite hazard (focus stranded by an abrupt unmount)
+     * and that reasoning still holds; this is the other direction, which nothing had considered.
+     *
+     * `nextStep` is the discriminator, and it is the honest one: a celebration offering an action is
+     * something the user is expected to answer, so taking focus and holding the page is right. One
+     * offering nothing is a transient — it stays visible, it takes nothing, and its TIMER is what
+     * ends it.
+     *
+     * The timer, specifically, and not the interactions: an earlier version of this line said the
+     * transient "stays dismissible with Escape and with Tab-to-the-button", which is false in the
+     * one condition that matters. Radix delivers Escape to the topmost layer only, refuses an
+     * outside press while a higher layer disables outside pointer events, and sets a buried layer's
+     * own `pointer-events: none` — so every interactive exit disappears the moment any dialog mounts
+     * above this one. That is exactly why both branches now carry a timer (the decision branch a far
+     * longer ceiling), and why the non-modal branch must not treat focus moving out as a dismissal.
+     */
+    const asksForADecision = Boolean(nextStep);
+    return (_jsx(Dialog, { open: isActive, modal: asksForADecision, onOpenChange: (open) => { if (!open)
+            onDismiss?.(); }, children: _jsxs(DialogContent, { ref: ref, className: cn('max-w-md', className), 
+            /*
+              ONE dismiss affordance. `DialogContent` renders Radix's close X by default, which put it
+              beside the ghost dismiss Button below — two controls, one action, and only one of them
+              carrying the application's own dismiss label.
+            */
+            /*
+              ...unless there is no `onDismiss`, in which case Radix's X is the ONLY exit.
+  
+              `onDismiss` is optional on this contract and the ghost Dismiss button below is gated on
+              it, so a direct preset consumer that omits it got a dialog with no dismiss control, no
+              close X, `open` controlled by a caller that is not listening, and — in the decision
+              branch — `modal` focus trapping. The component's own specification documents direct use
+              as a supported shape ("Direct use of the preset expects those props explicitly"), so
+              this is reachable by anyone following it, even though the only consumer today is
+              `AppCelebrationOverlay`, which always passes one.
+  
+              Still exactly ONE dismiss affordance in every case, which is what this prop was set to
+              `false` for: the app's own control when it exists, Radix's when it does not.
+            */
+            showCloseButton: !onDismiss, ...(message ? {} : { 'aria-describedby': undefined }), onOpenAutoFocus: asksForADecision ? undefined : (event) => event.preventDefault(), 
+            /*
+              An ANNOUNCEMENT must not be dismissed because focus moved somewhere else.
+  
+              With no `nextStep` this Dialog is deliberately NON-modal (`modal={asksForADecision}`),
+              and a non-modal Radix content closes on `onFocusOutside` as well as on a pointer press
+              outside. Focus moving is not a user dismissal: any dialog that MOUNTS after the
+              celebration takes focus as it opens, which Radix reports as focus-outside, which closed
+              the celebration in the same tick it appeared.
+  
+              Measured 2026-09-20 on Wonder Todos, on the most ordinary path the feature has — create
+              a todo from the list, which navigates to the todo's detail dialog. The milestone fired,
+              the websocket frame arrived, `showCelebration` ran, and the trace read
+              `Celebration shown` immediately followed by `Celebration dismissed` at the same second,
+              where an undisturbed run reads `Celebration auto-dismissed` five seconds later. So the
+              overlay was correct, reachable and invisible in practice: the one flow that earns a
+              milestone is the flow that destroyed the reward for it.
+  
+              A pointer press outside and Escape are left alone — those ARE the user saying "go away",
+              and the 5s timer still owns the ordinary case.
+  
+              The `undefined` arm is safe, but NOT for the reason first written here. A modal Radix
+              dialog does not stop a portaled sibling from receiving focus, so "it traps focus, so it
+              never reaches this path" named the wrong mechanism. What actually holds is that Radix's
+              own modal content composes an unconditional `onFocusOutside` preventer of its own, so the
+              decision branch is already protected before this prop is consulted.
+            */
+            onFocusOutside: asksForADecision ? undefined : (event) => event.preventDefault(), ...props, children: [!heading && _jsx(DialogTitle, { className: "sr-only", children: ariaLabel }), _jsxs("div", { className: "flex flex-col items-center gap-field text-center", children: [_jsx("div", { className: cn('flex items-center justify-center text-primary', !prefersReducedMotion && 'animate-bounce'), "aria-hidden": "true", children: renderIcon(StandardIconReference.TADA, { size: IconSize.XL }) }), heading && _jsx(DialogTitle, { className: "text-2xl font-bold text-foreground", children: heading }), message && (
+                        // `DialogDescription`, not a bare `<p>`: it is what Radix wires as the dialog's
+                        // accessible DESCRIPTION, so the same text serves both the reader and the screen
+                        // reader instead of the surface having a visible message and no described-by at all.
+                        _jsx(DialogDescription, { className: "text-xl font-semibold text-foreground", children: message })), _jsxs("div", { className: "flex flex-col items-center gap-element mt-element", children: [nextStep && (_jsx(Button, { variant: ButtonVariants_Variant.DEFAULT, size: ButtonSize.MD, onClick: () => {
+                                        nextStep.onClick();
+                                        onDismiss?.();
+                                    }, children: nextStep.label })), onDismiss && (
+                                // The engine Button, not a raw `<button>` re-implementing the ghost recipe with an
+                                // off-ladder underline — a rebrand changed every other control and left this behind.
+                                _jsx(Button, { variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: onDismiss, children: dismissLabel }))] })] })] }) }));
 });
 CelebrationOverlay.displayName = "CelebrationOverlay";
 //# sourceMappingURL=celebration-overlay.js.map

package/dist/esm/components/feedback/celebration-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"celebration-overlay.js","sourceRoot":"","sources":["../../../../../src/components/feedback/celebration-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\nimport { cn, Button, ButtonVariants_Variant, useIconRegistry, StandardIconReference, IconSize } from \"@wildo-ai/saas-frontend-lib\"\nimport { ButtonSize, FrontendComponentType } from \"@wildo-ai/presets-components-models\"\nimport type { CelebrationOverlayProps } from '@wildo-ai/saas-frontend-lib'\n\n/**\n * V-12: Honour `prefers-reduced-motion: reduce`. Returns true when the user has\n * asked the OS to minimize non-essential motion. We listen for changes so the\n * overlay reacts to the OS-level toggle without a remount.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState<boolean>(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  });\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n    const mql: MediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');\n    const handler = (event: MediaQueryListEvent): void => setReduced(event.matches);\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return reduced;\n}\n\n// ─────────────────────────────────────────────────────────────\n// Component\n// ─────────────────────────────────────────────────────────────\n\n/**\n * CelebrationOverlay — generic, resource-agnostic celebration feedback component.\n *\n * A pure UI component that displays a celebration overlay with optional message,\n * animation, and next-step CTA. Does NOT know about resources, i18n, or\n * any engine concepts.\n *\n * Modes:\n * - `overlay`: Full-screen centered overlay with message + confetti emoji\n * - `confetti`: Lightweight confetti burst (no blocking overlay)\n * - `lottie`: Animated TADA icon via the unified icon system (uses `renderIcon` with\n *   `StandardIconReference.TADA`, rendered in a scaled container for visual impact)\n *\n * For engine integration, see the celebration-overlay wrapper in saas-frontend-lib\n * which wires NotificationContext and i18n.\n */\nexport const CelebrationOverlay = React.forwardRef<HTMLDivElement, CelebrationOverlayProps>(\n  (\n    {\n      isActive,\n      mode = 'overlay',\n      message,\n      notificationIdentifier,\n      nextStep,\n      onDismiss,\n      dismissLabel = 'Dismiss',\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { renderIcon } = useIconRegistry();\n    const prefersReducedMotion: boolean = usePrefersReducedMotion();\n\n    if (!isActive) return null;\n\n    // Confetti mode: lightweight effect without blocking overlay\n    if (mode === 'confetti') {\n      // V-12: Honour reduced-motion. Render a single static success glyph in the\n      // viewport center instead of 20 animated particles. The wrapper keeps the\n      // same z-index / pointer-events contract so callers don't notice.\n      if (prefersReducedMotion) {\n        return (\n          <div\n            ref={ref}\n            className={cn(\"fixed inset-0 z-(--z-transient) pointer-events-none\", className)}\n            aria-hidden=\"true\"\n            {...props}\n          >\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              <div className=\"text-foreground\" aria-hidden=\"true\">\n                {renderIcon(StandardIconReference.TADA, { size: IconSize.XL })}\n              </div>\n            </div>\n          </div>\n        );\n      }\n\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"fixed inset-0 z-(--z-transient) pointer-events-none\",\n            className,\n          )}\n          aria-hidden=\"true\"\n          {...props}\n        >\n          {/* Confetti particles — CSS animation */}\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"animate-celebration-burst\">\n              {Array.from({ length: 20 }).map((_, i) => (\n                <span\n                  key={i}\n                  className=\"absolute inline-block w-2 h-2 rounded-full\"\n                  style={{\n                    backgroundColor: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'][i % 6],\n                    transform: `rotate(${i * 18}deg) translateY(-${40 + Math.random() * 60}px)`,\n                    animation: `celebration-particle ${0.6 + Math.random() * 0.8}s ease-out forwards`,\n                    animationDelay: `${Math.random() * 0.3}s`,\n                    opacity: 0,\n                  }}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    // Overlay mode (default, also used as fallback for lottie mode):\n    return (\n      <div\n        ref={ref}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={ariaLabel || 'Celebration'}\n        className={cn(\n          \"fixed inset-0 z-(--z-transient) flex items-center justify-center\",\n          \"bg-background/80 backdrop-blur-sm\",\n          // V-12: Drop the entrance animation when the user prefers reduced\n          // motion; everything else (focus, dismissal) stays the same.\n          !prefersReducedMotion && \"animate-in fade-in duration-[var(--motion-duration-normal)]\",\n          className,\n        )}\n        onClick={onDismiss}\n        {...props}\n      >\n        <div\n          className=\"relative flex flex-col items-center gap-field p-card-lg max-w-md text-center\"\n          onClick={(e) => e.stopPropagation()}\n        >\n          {mode === 'lottie' ? (\n            <div\n              className=\"flex items-center justify-center\"\n              style={{ width: 80, height: 80 }}\n              aria-hidden=\"true\"\n            >\n              <div style={{ transform: 'scale(2.5)' }}>\n                {renderIcon(StandardIconReference.TADA, { size: IconSize.XL })}\n              </div>\n            </div>\n          ) : (\n            <div\n              className={cn(\n                \"text-6xl\",\n                // V-12: Skip the bounce when reduced-motion is requested.\n                !prefersReducedMotion && \"animate-bounce\",\n              )}\n              aria-hidden=\"true\"\n            >\n              🎉\n            </div>\n          )}\n\n          {/* Message */}\n          {message && (\n            <p className=\"text-xl font-semibold text-foreground\">\n              {message}\n            </p>\n          )}\n\n          {/* Actions */}\n          <div className=\"flex flex-col items-center gap-element mt-element\">\n            {nextStep && (\n              <Button\n                variant={ButtonVariants_Variant.DEFAULT}\n                size={ButtonSize.MD}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  nextStep.onClick();\n                  onDismiss?.();\n                }}\n              >\n                {nextStep.label}\n              </Button>\n            )}\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={onDismiss}\n                className=\"text-sm text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors\"\n              >\n                {dismissLabel}\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\nCelebrationOverlay.displayName = \"CelebrationOverlay\";\n"]}
+{"version":3,"file":"celebration-overlay.js","sourceRoot":"","sources":["../../../../../src/components/feedback/celebration-overlay.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\nimport { cn, Button, ButtonVariants_Variant, Dialog, DialogContent, DialogTitle, DialogDescription, useIconRegistry, StandardIconReference, IconSize } from \"@wildo-ai/saas-frontend-lib\"\nimport { ButtonSize, FrontendComponentType } from \"@wildo-ai/presets-components-models\"\nimport type { CelebrationOverlayProps } from '@wildo-ai/saas-frontend-lib'\nimport { CelebrationDisplayMode } from '@wildo-ai/saas-models'\n\n/**\n * V-12: Honour `prefers-reduced-motion: reduce`. Returns true when the user has\n * asked the OS to minimize non-essential motion. We listen for changes so the\n * overlay reacts to the OS-level toggle without a remount.\n */\nfunction usePrefersReducedMotion(): boolean {\n  const [reduced, setReduced] = React.useState<boolean>(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  });\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return;\n    const mql: MediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');\n    const handler = (event: MediaQueryListEvent): void => setReduced(event.matches);\n    mql.addEventListener('change', handler);\n    return () => mql.removeEventListener('change', handler);\n  }, []);\n\n  return reduced;\n}\n\n// ─────────────────────────────────────────────────────────────\n// Component\n// ─────────────────────────────────────────────────────────────\n\n/**\n * CelebrationOverlay — generic, resource-agnostic celebration feedback component.\n *\n * A pure UI component that displays a celebration overlay with optional message,\n * animation, and next-step CTA. Does NOT know about resources, i18n, or\n * any engine concepts.\n *\n * Modes:\n * - `confetti`: a non-blocking particle burst over the page, `aria-hidden`, purely decorative.\n * - `overlay`: a blocking Dialog carrying the message, an optional next-step CTA and a dismiss.\n * - `lottie`: renders EXACTLY as `overlay` in this default preset.\n *\n * Both dialog modes draw `StandardIconReference.TADA` from the icon registry, which plays an animated\n * Lottie when the application ran `registerDefaultAnimations()` and the reader has not asked for\n * reduced motion — so the dialog DOES animate; `lottie` simply adds nothing to it here. An earlier\n * version of this comment said \"no Lottie animation is played\", which stopped being true once both\n * branches drew the registry icon.\n *\n * `lottie` is the mode an application's OWN preset for `LOW_LEVEL_CELEBRATION_OVERLAY` can give a\n * meaning to — a per-milestone animation chosen from `notificationIdentifier`, for instance. This\n * default preset keeps it equal to `overlay` rather than inventing an asset it has no way to know.\n *\n * For engine integration, see the celebration-overlay wrapper in saas-frontend-lib\n * which wires NotificationContext and i18n.\n */\nexport const CelebrationOverlay = React.forwardRef<HTMLDivElement, CelebrationOverlayProps>(\n  (\n    {\n      isActive,\n      mode = 'overlay',\n      message,\n      heading,\n      notificationIdentifier,\n      nextStep,\n      onDismiss,\n      dismissLabel,\n      ariaLabel,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { renderIcon } = useIconRegistry();\n    const prefersReducedMotion: boolean = usePrefersReducedMotion();\n\n    /**\n     * The blocking mode does NOT early-return on `!isActive` — it hands `open` to the Dialog.\n     *\n     * `AppCelebrationOverlay` is mounted permanently and toggles `isActive`, so returning `null`\n     * would UNMOUNT an open Radix Dialog rather than closing it. Closing runs Radix's own teardown —\n     * focus restoration to whatever was focused before, scroll unlock, exit transition; an abrupt\n     * unmount skips the ordered path, and the celebration auto-dismisses after five seconds, so\n     * that teardown happens on its own with nobody interacting. Leaving a keyboard user's focus\n     * stranded on `<body>` after a celebration would be a REGRESSION on the state before the trap\n     * existed, when focus never moved at all.\n     *\n     * Confetti keeps the early return: it is decorative, `aria-hidden`, traps nothing and has\n     * nothing to tear down.\n     */\n    if (mode === CelebrationDisplayMode.CONFETTI) {\n      if (!isActive) return null;\n      // V-12: Honour reduced-motion. Render a single static success glyph in the\n      // viewport center instead of 20 animated particles. The wrapper keeps the\n      // same z-index / pointer-events contract so callers don't notice.\n      if (prefersReducedMotion) {\n        return (\n          <div\n            ref={ref}\n            className={cn(\"fixed inset-0 z-(--z-transient) pointer-events-none\", className)}\n            aria-hidden=\"true\"\n            {...props}\n          >\n            <div className=\"absolute inset-0 flex items-center justify-center\">\n              <div className=\"text-foreground\" aria-hidden=\"true\">\n                {renderIcon(StandardIconReference.TADA, { size: IconSize.XL })}\n              </div>\n            </div>\n          </div>\n        );\n      }\n\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"fixed inset-0 z-(--z-transient) pointer-events-none\",\n            className,\n          )}\n          aria-hidden=\"true\"\n          {...props}\n        >\n          {/* Confetti particles — CSS animation */}\n          <div className=\"absolute inset-0 flex items-center justify-center\">\n            <div className=\"animate-celebration-burst\">\n              {Array.from({ length: 20 }).map((_, i) => (\n                <span\n                  key={i}\n                  className=\"absolute inline-block w-2 h-2 rounded-full\"\n                  style={{\n                    // Themed, not literal. These six variables are defined by the engine Tailwind\n                    // plugin from the application's own semantic palette, so the celebration follows\n                    // the brand and differs between light and dark. They used to be six hard-coded\n                    // hex values, which is why the burst looked the same in every application and in\n                    // every theme. An application rebrands the confetti by overriding the variables.\n                    backgroundColor: `var(--celebration-particle-${(i % 6) + 1})`,\n                    transform: `rotate(${i * 18}deg) translateY(-${40 + Math.random() * 60}px)`,\n                    animation: `celebration-particle ${0.6 + Math.random() * 0.8}s ease-out forwards`,\n                    animationDelay: `${Math.random() * 0.3}s`,\n                    opacity: 0,\n                  }}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    /**\n     * Blocking mode, built on the engine Dialog rather than hand-rolled.\n     *\n     * This was a bare `<div role=\"dialog\" aria-modal=\"true\">` with NO focus trap, no initial focus,\n     * no Escape handler and no focus restoration, dismissible only by clicking the backdrop. An\n     * `aria-modal` container that leaves the page behind it fully focusable is worse than one that\n     * makes no claim at all: assistive technology is told the rest of the page is inert while a\n     * keyboard user tabs straight into it — and with dismissal on pointer only, a keyboard user\n     * could not close it either.\n     *\n     * `Dialog` is Radix underneath, so focus trapping, initial focus, Escape and focus restoration\n     * all come from the same mechanism `GuidanceModal` already uses. Building a second trap beside\n     * a working one is how two half-correct implementations happen.\n     *\n     * `onOpenChange` receives Radix's Escape and outside-click, so the dismissal the original\n     * hand-wired is preserved without a bespoke click handler on the overlay root.\n     *\n     * ONE consequence of the non-modal branch, verified against the installed Radix rather than\n     * assumed: `DialogOverlay` returns `null` when `modal` is false, so a congratulatory\n     * celebration renders NO SCRIM — the page behind it stays visible and clickable, which is what\n     * a transient should do. Outside-click dismissal survives regardless, because it comes from\n     * `DismissableLayer` rather than from the overlay element. Escape likewise: it is handled on the\n     * owner document, not through the focus trap the non-modal branch does not install.\n     */\n    /**\n     * MODAL only when the celebration asks for a DECISION.\n     *\n     * A Radix modal moves focus into itself on open and locks body scroll. This overlay\n     * auto-dismisses after five seconds and is, in its common shape, purely congratulatory — so a\n     * milestone achieved while someone is typing stole their focus mid-keystroke, dropped every\n     * character until the timer fired, and froze the page's scroll for a decorative moment. The\n     * docblock above reasons only about the opposite hazard (focus stranded by an abrupt unmount)\n     * and that reasoning still holds; this is the other direction, which nothing had considered.\n     *\n     * `nextStep` is the discriminator, and it is the honest one: a celebration offering an action is\n     * something the user is expected to answer, so taking focus and holding the page is right. One\n     * offering nothing is a transient — it stays visible, it takes nothing, and its TIMER is what\n     * ends it.\n     *\n     * The timer, specifically, and not the interactions: an earlier version of this line said the\n     * transient \"stays dismissible with Escape and with Tab-to-the-button\", which is false in the\n     * one condition that matters. Radix delivers Escape to the topmost layer only, refuses an\n     * outside press while a higher layer disables outside pointer events, and sets a buried layer's\n     * own `pointer-events: none` — so every interactive exit disappears the moment any dialog mounts\n     * above this one. That is exactly why both branches now carry a timer (the decision branch a far\n     * longer ceiling), and why the non-modal branch must not treat focus moving out as a dismissal.\n     */\n    const asksForADecision = Boolean(nextStep);\n\n    return (\n      <Dialog\n        open={isActive}\n        modal={asksForADecision}\n        onOpenChange={(open) => { if (!open) onDismiss?.(); }}\n      >\n        <DialogContent\n          ref={ref}\n          className={cn('max-w-md', className)}\n          /*\n            ONE dismiss affordance. `DialogContent` renders Radix's close X by default, which put it\n            beside the ghost dismiss Button below — two controls, one action, and only one of them\n            carrying the application's own dismiss label.\n          */\n          /*\n            ...unless there is no `onDismiss`, in which case Radix's X is the ONLY exit.\n\n            `onDismiss` is optional on this contract and the ghost Dismiss button below is gated on\n            it, so a direct preset consumer that omits it got a dialog with no dismiss control, no\n            close X, `open` controlled by a caller that is not listening, and — in the decision\n            branch — `modal` focus trapping. The component's own specification documents direct use\n            as a supported shape (\"Direct use of the preset expects those props explicitly\"), so\n            this is reachable by anyone following it, even though the only consumer today is\n            `AppCelebrationOverlay`, which always passes one.\n\n            Still exactly ONE dismiss affordance in every case, which is what this prop was set to\n            `false` for: the app's own control when it exists, Radix's when it does not.\n          */\n          showCloseButton={!onDismiss}\n          /*\n            Radix requires a description or an explicit opt-out, and logs a console warning on every\n            open without one. When there is a message it IS the description (rendered below through\n            `DialogDescription`); when there is not, the opt-out is the truthful answer rather than\n            inventing prose to satisfy the check.\n          */\n          {...(message ? {} : { 'aria-describedby': undefined })}\n          onOpenAutoFocus={asksForADecision ? undefined : (event) => event.preventDefault()}\n          /*\n            An ANNOUNCEMENT must not be dismissed because focus moved somewhere else.\n\n            With no `nextStep` this Dialog is deliberately NON-modal (`modal={asksForADecision}`),\n            and a non-modal Radix content closes on `onFocusOutside` as well as on a pointer press\n            outside. Focus moving is not a user dismissal: any dialog that MOUNTS after the\n            celebration takes focus as it opens, which Radix reports as focus-outside, which closed\n            the celebration in the same tick it appeared.\n\n            Measured 2026-09-20 on Wonder Todos, on the most ordinary path the feature has — create\n            a todo from the list, which navigates to the todo's detail dialog. The milestone fired,\n            the websocket frame arrived, `showCelebration` ran, and the trace read\n            `Celebration shown` immediately followed by `Celebration dismissed` at the same second,\n            where an undisturbed run reads `Celebration auto-dismissed` five seconds later. So the\n            overlay was correct, reachable and invisible in practice: the one flow that earns a\n            milestone is the flow that destroyed the reward for it.\n\n            A pointer press outside and Escape are left alone — those ARE the user saying \"go away\",\n            and the 5s timer still owns the ordinary case.\n\n            The `undefined` arm is safe, but NOT for the reason first written here. A modal Radix\n            dialog does not stop a portaled sibling from receiving focus, so \"it traps focus, so it\n            never reaches this path\" named the wrong mechanism. What actually holds is that Radix's\n            own modal content composes an unconditional `onFocusOutside` preventer of its own, so the\n            decision branch is already protected before this prop is consulted.\n          */\n          onFocusOutside={asksForADecision ? undefined : (event) => event.preventDefault()}\n          {...props}\n        >\n          {/*\n            The accessible NAME. A Radix Dialog requires one, and `ariaLabel` is an i18n value that\n            may be an unresolved key — which is correct and must still be announced, so it is used\n            as-is rather than replaced by invented English.\n          */}\n          {/*\n            With a `heading` (a milestone's own title) the heading IS the accessible name and is\n            shown below the icon; without one, the generic `ariaLabel` names the dialog for assistive technology\n            only. One DialogTitle either way — Radix wants exactly one.\n          */}\n          {!heading && <DialogTitle className=\"sr-only\">{ariaLabel}</DialogTitle>}\n\n          <div className=\"flex flex-col items-center gap-field text-center\">\n            {/*\n              ONE visual, from the icon registry.\n              The non-lottie branch rendered a literal `🎉` at `text-6xl`: not themeable, not\n              brandable, rendered differently by every OS font, and inconsistent with the lottie\n              branch three lines below which already used `StandardIconReference.TADA` correctly.\n              Sizing comes from `IconSize`, not a raw `80px` box and a `scale(2.5)` magic number.\n            */}\n            <div\n              className={cn(\n                'flex items-center justify-center text-primary',\n                !prefersReducedMotion && 'animate-bounce',\n              )}\n              aria-hidden=\"true\"\n            >\n              {renderIcon(StandardIconReference.TADA, { size: IconSize.XL })}\n            </div>\n\n            {heading && <DialogTitle className=\"text-2xl font-bold text-foreground\">{heading}</DialogTitle>}\n\n            {message && (\n              // `DialogDescription`, not a bare `<p>`: it is what Radix wires as the dialog's\n              // accessible DESCRIPTION, so the same text serves both the reader and the screen\n              // reader instead of the surface having a visible message and no described-by at all.\n              <DialogDescription className=\"text-xl font-semibold text-foreground\">\n                {message}\n              </DialogDescription>\n            )}\n\n            <div className=\"flex flex-col items-center gap-element mt-element\">\n              {nextStep && (\n                <Button\n                  variant={ButtonVariants_Variant.DEFAULT}\n                  size={ButtonSize.MD}\n                  onClick={() => {\n                    nextStep.onClick();\n                    onDismiss?.();\n                  }}\n                >\n                  {nextStep.label}\n                </Button>\n              )}\n              {onDismiss && (\n                // The engine Button, not a raw `<button>` re-implementing the ghost recipe with an\n                // off-ladder underline — a rebrand changed every other control and left this behind.\n                <Button\n                  variant={ButtonVariants_Variant.GHOST}\n                  size={ButtonSize.SM}\n                  onClick={onDismiss}\n                >\n                  {dismissLabel}\n                </Button>\n              )}\n            </div>\n          </div>\n        </DialogContent>\n      </Dialog>\n    );\n  },\n);\n\nCelebrationOverlay.displayName = \"CelebrationOverlay\";\n"]}

package/dist/esm/components/feedback/celebration-overlay.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"celebration-overlay.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/celebration-overlay.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAWjE,CAAC"}
+{"version":3,"file":"celebration-overlay.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/celebration-overlay.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAWjE,CAAC"}

package/dist/esm/components/feedback/danger-zone.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger-zone.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/danger-zone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqB3F;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"danger-zone.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/danger-zone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqB3F;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/esm/components/feedback/danger-zone.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"danger-zone.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/danger-zone.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"danger-zone.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/danger-zone.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/feedback/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAQL,eAAe,EAChB,MAAM,6BAA6B,CAAC;AAQrC;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,wFAiGtB,CAAC"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAQL,eAAe,EAChB,MAAM,6BAA6B,CAAC;AAQrC;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,wFAiGtB,CAAC"}

package/dist/esm/components/feedback/empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../../src/components/feedback/empty-state.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,EAAE,EACF,eAAe,EAEf,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,OAAO,GAER,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,UAAU,EAAyB,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAEvG,gEAAgE;AAChE,YAAY;AACZ,gEAAgE;AAEhE;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAAG,IAAI,EACxB,eAAe,EACf,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IAExC,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,QAAC,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,KAAK,YACnE,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,oCAAoC,EACnF,SAAS,CACV,KACG,KAAK,aAGR,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,0BAA0B,YACtC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,GACjE,CACP,EAGD,eAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,aAC/E,YAAG,SAAS,EAAE,EAAE,CACd,mCAAmC,EACnC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CACpC,YACE,KAAK,GACJ,EACH,WAAW,IAAI,CACd,YAAG,SAAS,EAAE,EAAE;4BACd;;;;;;;;+BAQG;4BACH,uBAAuB,EACvB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjC,uBAAuB,CACxB,YACE,WAAW,GACV,CACL,IACG,EAGL,CAAC,iBAAiB,IAAI,eAAe,IAAI,kBAAkB,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CACjF,eAAK,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,aAC3F,iBAAiB,IAAI,eAAe,IAAI,kBAAkB,IAAI,CAC7D,KAAC,MAAM,IACL,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAC,sCAAsC,YAE/C,kBAAkB,GACZ,CACV,EACA,eAAe,IAAI,CAClB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAClC,YAEA,eAAe,CAAC,KAAK,GACf,CACV,IACG,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,GACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from \"react\"\nimport {\n  cn,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Button,\n  ButtonVariants_Variant,\n  Surface,\n  EmptyStateProps,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { ButtonSize, FrontendComponentType, SurfaceVariant } from \"@wildo-ai/presets-components-models\"\n\n// ─────────────────────────────────────────────────────────────\n// Component\n// ─────────────────────────────────────────────────────────────\n\n/**\n * EmptyState — generic, resource-agnostic empty state component.\n *\n * A pure UI component that displays a placeholder when no content is available.\n * Accepts all display props (title, description, icon, actions) from outside —\n * does NOT know about resources, i18n, or any engine concepts.\n *\n * For resource-aware usage (list/table/search views), see ResourceEmptyState\n * in saas-frontend-lib which wraps this component with i18n and config resolution.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      title,\n      description,\n      iconRef,\n      primaryActionLabel,\n      onPrimaryAction,\n      showPrimaryAction = true,\n      secondaryAction,\n      variant = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { renderIcon } = useIconRegistry();\n\n    const isCompact = variant === 'compact';\n\n    return (\n      <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.INSET}>\n        <div\n          ref={ref}\n          className={cn(\n            \"flex flex-col items-center justify-center text-center border border-dashed border-border rounded-lg\",\n            isCompact ? \"py-section px-card gap-element\" : \"py-section-xl px-card-lg gap-field\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Icon */}\n          {iconRef && (\n            <div className=\"text-muted-foreground/50\">\n              {renderIcon(iconRef, { size: isCompact ? IconSize.MD : IconSize.LG })}\n            </div>\n          )}\n\n          {/* Text */}\n          <div className={cn(\"flex flex-col\", isCompact ? \"gap-element-sm\" : \"gap-element\")}>\n            <p className={cn(\n              \"font-medium text-muted-foreground\",\n              isCompact ? \"text-sm\" : \"text-base\",\n            )}>\n              {title}\n            </p>\n            {description && (\n              <p className={cn(\n                /*\n                 * NOT `text-muted-foreground/70`. The 70% modifier composited to #7a889a on the\n                 * light theme's #f1f5f9 surface — 3.29:1 against the 4.5:1 that normal text needs\n                 * (axe, live stack, 2026-09-09, #533). The token at full opacity is the design\n                 * system's muted colour and already passes; the modifier was muting the muted.\n                 *\n                 * Swept across all 8 sites that carried it, not just the ones the audit reached:\n                 * same token, same modifier, same arithmetic on any light surface.\n                 */\n                \"text-muted-foreground\",\n                isCompact ? \"text-xs\" : \"text-sm\",\n                \"max-w-[32rem] mx-auto\",\n              )}>\n                {description}\n              </p>\n            )}\n          </div>\n\n          {/* Actions */}\n          {(showPrimaryAction && onPrimaryAction && primaryActionLabel) || secondaryAction ? (\n            <div className={cn(\"flex flex-col items-center\", isCompact ? \"gap-element-sm\" : \"gap-element\")}>\n              {showPrimaryAction && onPrimaryAction && primaryActionLabel && (\n                <Button\n                  variant={ButtonVariants_Variant.OUTLINE}\n                  size={ButtonSize.SM}\n                  onClick={onPrimaryAction}\n                  className=\"inline-flex items-center gap-element\"\n                >\n                  {primaryActionLabel}\n                </Button>\n              )}\n              {secondaryAction && (\n                <button\n                  type=\"button\"\n                  onClick={secondaryAction.onClick}\n                  className={cn(\n                    \"text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors\",\n                    isCompact ? \"text-xs\" : \"text-sm\",\n                  )}\n                >\n                  {secondaryAction.label}\n                </button>\n              )}\n            </div>\n          ) : null}\n        </div>\n      </Surface>\n    );\n  },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"]}
+{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../../../src/components/feedback/empty-state.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,EAAE,EACF,eAAe,EAEf,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,OAAO,GAER,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,UAAU,EAAyB,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAEvG,gEAAgE;AAChE,YAAY;AACZ,gEAAgE;AAEhE;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,KAAK,EACL,WAAW,EACX,OAAO,EACP,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAAG,IAAI,EACxB,eAAe,EACf,OAAO,GAAG,SAAS,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,SAAS,GAAG,OAAO,KAAK,SAAS,CAAC;IAExC,OAAO,CACL,KAAC,OAAO,IAAC,OAAO,QAAC,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,KAAK,YACnE,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qGAAqG,EACrG,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,oCAAoC,EACnF,SAAS,CACV,KACG,KAAK,aAGR,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,0BAA0B,YACtC,UAAU,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC,GACjE,CACP,EAGD,eAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,aAC/E,YAAG,SAAS,EAAE,EAAE,CACd,mCAAmC,EACnC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CACpC,YACE,KAAK,GACJ,EACH,WAAW,IAAI,CACd,YAAG,SAAS,EAAE,EAAE;4BACd;;;;;;;;+BAQG;4BACH,uBAAuB,EACvB,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACjC,uBAAuB,CACxB,YACE,WAAW,GACV,CACL,IACG,EAGL,CAAC,iBAAiB,IAAI,eAAe,IAAI,kBAAkB,CAAC,IAAI,eAAe,CAAC,CAAC,CAAC,CACjF,eAAK,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,aAC3F,iBAAiB,IAAI,eAAe,IAAI,kBAAkB,IAAI,CAC7D,KAAC,MAAM,IACL,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,eAAe,EACxB,SAAS,EAAC,sCAAsC,YAE/C,kBAAkB,GACZ,CACV,EACA,eAAe,IAAI,CAClB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,SAAS,EAAE,EAAE,CACX,4FAA4F,EAC5F,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAClC,YAEA,eAAe,CAAC,KAAK,GACf,CACV,IACG,CACP,CAAC,CAAC,CAAC,IAAI,IACJ,GACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import * as React from \"react\"\nimport {\n  cn,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Button,\n  ButtonVariants_Variant,\n  Surface,\n  EmptyStateProps,\n} from '@wildo-ai/saas-frontend-lib';\n\nimport { ButtonSize, FrontendComponentType, SurfaceVariant } from \"@wildo-ai/presets-components-models\"\n\n// ─────────────────────────────────────────────────────────────\n// Component\n// ─────────────────────────────────────────────────────────────\n\n/**\n * EmptyState — generic, resource-agnostic empty state component.\n *\n * A pure UI component that displays a placeholder when no content is available.\n * Accepts all display props (title, description, icon, actions) from outside —\n * does NOT know about resources, i18n, or any engine concepts.\n *\n * For resource-aware usage (list/table/search views), see ResourceEmptyState\n * in saas-frontend-lib which wraps this component with i18n and config resolution.\n */\nexport const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      title,\n      description,\n      iconRef,\n      primaryActionLabel,\n      onPrimaryAction,\n      showPrimaryAction = true,\n      secondaryAction,\n      variant = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { renderIcon } = useIconRegistry();\n\n    const isCompact = variant === 'compact';\n\n    return (\n      <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.INSET}>\n        <div\n          ref={ref}\n          className={cn(\n            \"flex flex-col items-center justify-center text-center border border-dashed border-border rounded-lg\",\n            isCompact ? \"py-section px-card gap-element\" : \"py-section-xl px-card-lg gap-field\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Icon */}\n          {iconRef && (\n            <div className=\"text-muted-foreground/50\">\n              {renderIcon(iconRef, { size: isCompact ? IconSize.MD : IconSize.LG })}\n            </div>\n          )}\n\n          {/* Text */}\n          <div className={cn(\"flex flex-col\", isCompact ? \"gap-element-sm\" : \"gap-element\")}>\n            <p className={cn(\n              \"font-medium text-muted-foreground\",\n              isCompact ? \"text-sm\" : \"text-base\",\n            )}>\n              {title}\n            </p>\n            {description && (\n              <p className={cn(\n                /*\n                 * NOT `text-muted-foreground/70`. The 70% modifier composited to #7a889a on the\n                 * light theme's #f1f5f9 surface — 3.29:1 against the 4.5:1 that normal text needs\n                 * (axe, live stack, 2026-09-09, #533). The token at full opacity is the design\n                 * system's muted colour and already passes; the modifier was muting the muted.\n                 *\n                 * Swept across all 8 sites that carried it, not just the ones the audit reached:\n                 * same token, same modifier, same arithmetic on any light surface.\n                 */\n                \"text-muted-foreground\",\n                isCompact ? \"text-xs\" : \"text-sm\",\n                \"max-w-[32rem] mx-auto\",\n              )}>\n                {description}\n              </p>\n            )}\n          </div>\n\n          {/* Actions */}\n          {(showPrimaryAction && onPrimaryAction && primaryActionLabel) || secondaryAction ? (\n            <div className={cn(\"flex flex-col items-center\", isCompact ? \"gap-element-sm\" : \"gap-element\")}>\n              {showPrimaryAction && onPrimaryAction && primaryActionLabel && (\n                <Button\n                  variant={ButtonVariants_Variant.OUTLINE}\n                  size={ButtonSize.SM}\n                  onClick={onPrimaryAction}\n                  className=\"inline-flex items-center gap-element\"\n                >\n                  {primaryActionLabel}\n                </Button>\n              )}\n              {secondaryAction && (\n                <button\n                  type=\"button\"\n                  onClick={secondaryAction.onClick}\n                  className={cn(\n                    \"text-muted-foreground hover:text-foreground underline underline-offset-2 transition-colors\",\n                    isCompact ? \"text-xs\" : \"text-sm\",\n                  )}\n                >\n                  {secondaryAction.label}\n                </button>\n              )}\n            </div>\n          ) : null}\n        </div>\n      </Surface>\n    );\n  },\n);\n\nEmptyState.displayName = \"EmptyState\";\n"]}

package/dist/esm/components/feedback/empty-state.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/empty-state.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAAO,CAAC;AAGlE,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"empty-state.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/empty-state.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,wBAAwB,EAAE,mBAAmB,EAAO,CAAC;AAGlE,eAAO,MAAM,gCAAgC,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/feedback/error-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-display.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/error-display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAsBL,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AAsBrC,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAO,EACP,OAAqC,EACrC,UAAU,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,OAAY,EACZ,WAAmB,EACnB,YAAsC,EACtC,eAAsC,EACtC,eAAoB,EACpB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmMvC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"error-display.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/error-display.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAsBL,iBAAiB,EAClB,MAAM,6BAA6B,CAAC;AAsBrC,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,OAAO,EACP,OAAqC,EACrC,UAAU,EACV,KAAK,EACL,OAAO,EACP,UAAU,EACV,OAAY,EACZ,WAAmB,EACnB,YAAsC,EACtC,eAAsC,EACtC,eAAoB,EACpB,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmMvC;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/esm/components/feedback/error-display.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-display.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/error-display.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,0BAA0B,EAAE,mBAAmB,EA6D3D,CAAC"}
+{"version":3,"file":"error-display.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/error-display.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,0BAA0B,EAAE,mBAAmB,EA6D3D,CAAC"}

package/dist/esm/components/feedback/features/feature-limit-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-limit-indicator.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-limit-indicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,0BAA0B,EAE3B,MAAM,6BAA6B,CAAC;AAerC,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,IAAW,GACZ,EAAE,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqChD"}
+{"version":3,"file":"feature-limit-indicator.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-limit-indicator.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,0BAA0B,EAE3B,MAAM,6BAA6B,CAAC;AAerC,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAgB,EAChB,IAAW,GACZ,EAAE,0BAA0B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAqChD"}

package/dist/esm/components/feedback/features/feature-limit-indicator.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-limit-indicator.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-limit-indicator.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"feature-limit-indicator.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-limit-indicator.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,mCAAmC,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/feedback/features/feature-lock-badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-lock-badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-lock-badge.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAOzE,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,IAAW,GACZ,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA4BlD"}
+{"version":3,"file":"feature-lock-badge.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-lock-badge.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAOzE,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,IAAW,GACZ,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA4BlD"}

package/dist/esm/components/feedback/features/feature-lock-badge.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-lock-badge.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-lock-badge.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,EAY/D,CAAC"}
+{"version":3,"file":"feature-lock-badge.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-lock-badge.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,8BAA8B,EAAE,mBAAmB,EAY/D,CAAC"}

package/dist/esm/components/feedback/features/feature-unavailable-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-unavailable-dialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-unavailable-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAGjF,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,YAAY,EACZ,GAAG,WAAW,EACf,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAcnD"}
+{"version":3,"file":"feature-unavailable-dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-unavailable-dialog.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AAGjF,wBAAgB,wBAAwB,CAAC,EACvC,IAAI,EACJ,YAAY,EACZ,GAAG,WAAW,EACf,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAcnD"}

package/dist/esm/components/feedback/features/feature-unavailable-dialog.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-unavailable-dialog.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-unavailable-dialog.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,sCAAsC,EAAE,mBAAmB,EAAO,CAAC"}
+{"version":3,"file":"feature-unavailable-dialog.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-unavailable-dialog.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM/H,eAAO,MAAM,sCAAsC,EAAE,mBAAmB,EAAO,CAAC"}

package/dist/esm/components/feedback/features/feature-unavailable-prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-unavailable-prompt.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-unavailable-prompt.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAQL,6BAA6B,EAC9B,MAAM,6BAA6B,CAAC;AAuCrC,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgH1D"}
+{"version":3,"file":"feature-unavailable-prompt.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-unavailable-prompt.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EAQL,6BAA6B,EAC9B,MAAM,6BAA6B,CAAC;AAuCrC,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAgH1D"}

package/dist/esm/components/feedback/features/feature-unavailable-prompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-unavailable-prompt.js","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-unavailable-prompt.tsx"],"names":[],"mappings":";AAAA;;;;;;;GAOG;AAEH,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AACxG,OAAO,EACL,MAAM,EACN,sBAAsB,EACtB,OAAO,EACP,eAAe,EACf,qBAAqB,EACrB,QAAQ,EACR,OAAO,GAER,MAAM,6BAA6B,CAAC;AAWrC;;;GAGG;AACH,MAAM,eAAe,GAAmC;IACtD,cAAc,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,EAAE,YAAY,EAAE;IAC1I,YAAY,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;IAClI,aAAa,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE;IACpH,oBAAoB,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,EAAE,UAAU,EAAE;IAC7I,OAAO,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE;IAC7G;;;;;;OAMG;IACH,MAAM,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE;CAC7G,CAAC;AAEF,MAAM,cAAc,GAAmB;IACrC,IAAI,EAAE,qBAAqB,CAAC,IAAI;IAChC,QAAQ,EAAE,cAAc;IACxB,cAAc,EAAE,oBAAoB;CACrC,CAAC;AAEF,uEAAuE;AAEvE,MAAM,UAAU,wBAAwB,CAAC,EACvC,QAAQ,EACR,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,QAAQ,EACR,SAAS,GACqB;IAC9B,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,EAAE,SAAS,EAAE,qBAAqB,CAAC,oCAAoC,EAAE,CAAC,CAAC;IACxH,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IAEzC,MAAM,CAAC,GAAG,OAAO,CACf,GAAG,EAAE,CAAC,eAAe,CAAC,qBAAqB,CAAC,oCAAoC,CAAC,EACjF,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,MAAM,MAAM,GAAG,eAAe,CAAC,QAAQ,CAAC,IAAI,cAAc,CAAC;IAE3D,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,IAAI,CAAC;YAAE,OAAO,CAAC,CAAC;QACjD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;IAChF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,OAAO,CACL,eAAK,SAAS,EAAC,4FAA4F,aAEzG,cAAK,SAAS,EAAC,6EAA6E,YACzF,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC,GAC/E,EAGN,aAAI,SAAS,EAAC,mDAAmD,YAC9D,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,GAChB,EAGL,YAAG,SAAS,EAAC,2CAA2C,YACrD,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,GACvB,EAGH,eAAe,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,IAAI,CAChD,eAAK,SAAS,EAAC,4BAA4B,aACzC,YAAG,SAAS,EAAC,2CAA2C,YACrD,CAAC,CAAC,uBAAuB,CAAC,GACzB,EACJ,cAAK,SAAS,EAAC,qCAAqC,YACjD,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CACxB,eAAc,SAAS,EAAC,gGAAgG,YACrH,CAAC,IADO,CAAC,CAEL,CACR,CAAC,GACE,IACF,CACP,EAGA,SAAS,IAAI,CACZ,KAAC,OAAO,IAAC,OAAO,QAAC,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,CAAC,KAAK,YACnE,eAAK,SAAS,EAAC,0EAA0E,aACvF,eAAK,SAAS,EAAC,8BAA8B,aAC3C,eAAM,SAAS,EAAC,uBAAuB,YAAE,SAAS,CAAC,SAAS,GAAQ,EACpE,eAAM,SAAS,EAAC,6BAA6B,YAC1C,CAAC,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC,GACtE,IACH,EACN,cACE,SAAS,EAAC,2DAA2D,EACrE,IAAI,EAAC,aAAa,mBACH,SAAS,CAAC,OAAO,mBACjB,CAAC,mBACD,SAAS,CAAC,KAAK,gBAClB,GAAG,SAAS,CAAC,SAAS,KAAK,SAAS,CAAC,OAAO,OAAO,SAAS,CAAC,KAAK,EAAE,YAEhF,cACE,SAAS,EAAE,6EACT,eAAe,IAAI,GAAG,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe,IAAI,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YACrF,EAAE,EACF,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,GACvC,GACE,IACF,GACE,CACX,EAGA,mBAAmB,IAAI,IAAI,IAAI,mBAAmB,GAAG,CAAC,IAAI,CACzD,YAAG,SAAS,EAAC,0CAA0C,YACpD,CAAC,CAAC,yBAAyB,EAAE,EAAE,KAAK,EAAE,mBAAmB,EAAE,CAAC,GAC3D,CACL,EAGD,eAAK,SAAS,EAAC,2CAA2C,aACvD,MAAM,CAAC,MAAM,IAAI,CAChB,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,sBAAsB,CAAC,OAAO,EACvC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,QAAQ,YAEhB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACV,CACV,EACA,SAAS,IAAI,CACZ,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,sBAAsB,CAAC,KAAK,EACrC,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,SAAS,YAEjB,CAAC,CAAC,QAAQ,CAAC,GACL,CACV,IACG,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["/**\n * FeatureUnavailablePrompt (Preset)\n *\n * Core reusable content for feature unavailability prompts.\n * Adapts its title, description, icon, and CTA based on `behavior`.\n *\n * Rendered both in the route content area (FeatureRouteGuard) and inside a Dialog.\n */\n\nimport React, { useMemo } from 'react';\nimport { ButtonSize, FrontendComponentType, SurfaceVariant } from '@wildo-ai/presets-components-models';\nimport {\n  Button,\n  ButtonVariants_Variant,\n  useI18n,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Surface,\n  FeatureUnavailablePromptProps,\n} from '@wildo-ai/saas-frontend-lib';\n\n// ── Behavior → icon / label key mapping ─────────────────────────────\n\ninterface BehaviorConfig {\n  icon: StandardIconReference;\n  titleKey: string;\n  descriptionKey: string;\n  ctaKey?: string;\n}\n\n/**\n * Maps FeatureUnavailabilityBehavior enum values (lowercase) to icon + label keys.\n * Keys must match the enum values exactly: 'upgrade_prompt', 'addon_prompt', etc.\n */\nconst BEHAVIOR_CONFIG: Record<string, BehaviorConfig> = {\n  upgrade_prompt: { icon: StandardIconReference.LOCK, titleKey: 'upgradeTitle', descriptionKey: 'upgradeDescription', ctaKey: 'upgradeCTA' },\n  addon_prompt: { icon: StandardIconReference.PLUS, titleKey: 'addonTitle', descriptionKey: 'addonDescription', ctaKey: 'addonCTA' },\n  contact_admin: { icon: StandardIconReference.USERS, titleKey: 'contactTitle', descriptionKey: 'contactDescription' },\n  limit_upgrade_prompt: { icon: StandardIconReference.WARNING, titleKey: 'limitTitle', descriptionKey: 'limitDescription', ctaKey: 'limitCTA' },\n  disable: { icon: StandardIconReference.LOCK, titleKey: 'disableTitle', descriptionKey: 'disableDescription' },\n  /*\n   * `custom` reaches this preset ONLY when the feature declared no `customComponentRef`: the engine\n   * wrapper resolves a declared ref through the component registry and renders that instead, and an\n   * unresolvable ref renders ComponentNotInjected (#440). So this row is the no-ref fallback, not an\n   * alias — it used to be the alias, which is why a CUSTOM feature rendered the DISABLE copy while\n   * `useResourceOperationActions` was treating CUSTOM as a prompt behaviour.\n   */\n  custom: { icon: StandardIconReference.LOCK, titleKey: 'disableTitle', descriptionKey: 'disableDescription' },\n};\n\nconst DEFAULT_CONFIG: BehaviorConfig = {\n  icon: StandardIconReference.LOCK,\n  titleKey: 'disableTitle',\n  descriptionKey: 'disableDescription',\n};\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function FeatureUnavailablePrompt({\n  behavior,\n  missingFeatures,\n  limitInfo,\n  upgradeOptionsCount,\n  onAction,\n  onDismiss,\n}: FeatureUnavailablePromptProps): React.JSX.Element | null {\n  const { makeTrComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FEATURE_UNAVAILABLE_PROMPT });\n  const { renderIcon } = useIconRegistry();\n\n  const t = useMemo(\n    () => makeTrComponent(FrontendComponentType.LOW_LEVEL_FEATURE_UNAVAILABLE_PROMPT),\n    [makeTrComponent],\n  );\n\n  const config = BEHAVIOR_CONFIG[behavior] ?? DEFAULT_CONFIG;\n\n  const limitPercentage = useMemo(() => {\n    if (!limitInfo || limitInfo.limit <= 0) return 0;\n    return Math.min(100, Math.round((limitInfo.current / limitInfo.limit) * 100));\n  }, [limitInfo]);\n\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-[60vh] p-card text-center max-w-lg mx-auto\">\n      {/* Icon */}\n      <div className=\"w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-section\">\n        {renderIcon(config.icon, { size: IconSize.LG, className: 'text-muted-foreground' })}\n      </div>\n\n      {/* Title */}\n      <h2 className=\"text-2xl font-semibold text-foreground mb-element\">\n        {t(config.titleKey)}\n      </h2>\n\n      {/* Description */}\n      <p className=\"text-muted-foreground mb-section max-w-sm\">\n        {t(config.descriptionKey)}\n      </p>\n\n      {/* Missing features badges */}\n      {missingFeatures && missingFeatures.length > 0 && (\n        <div className=\"mb-section space-y-element\">\n          <p className=\"text-xs font-medium text-muted-foreground\">\n            {t('requiredFeaturesLabel')}\n          </p>\n          <div className=\"flex flex-wrap justify-center gap-1\">\n            {missingFeatures.map(f => (\n              <span key={f} className=\"inline-flex items-center rounded-md bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary\">\n                {f}\n              </span>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Limit usage bar */}\n      {limitInfo && (\n        <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.INSET}>\n          <div className=\"bg-muted rounded-lg p-card-sm space-y-element w-full max-w-xs mb-section\">\n            <div className=\"flex justify-between text-sm\">\n              <span className=\"text-muted-foreground\">{limitInfo.featureId}</span>\n              <span className=\"font-medium text-foreground\">\n                {t('usageProgress', { current: limitInfo.current, limit: limitInfo.limit })}\n              </span>\n            </div>\n            <div\n              className=\"h-2.5 bg-muted-foreground/20 rounded-full overflow-hidden\"\n              role=\"progressbar\"\n              aria-valuenow={limitInfo.current}\n              aria-valuemin={0}\n              aria-valuemax={limitInfo.limit}\n              aria-label={`${limitInfo.featureId}: ${limitInfo.current} of ${limitInfo.limit}`}\n            >\n              <div\n                className={`h-full rounded-full transition-all duration-[var(--motion-duration-fast)] ${\n                  limitPercentage >= 100 ? 'bg-destructive' : limitPercentage >= 80 ? 'bg-warning' : 'bg-primary'\n                }`}\n                style={{ width: `${limitPercentage}%` }}\n              />\n            </div>\n          </div>\n        </Surface>\n      )}\n\n      {/* Upgrade options count */}\n      {upgradeOptionsCount != null && upgradeOptionsCount > 0 && (\n        <p className=\"text-sm text-muted-foreground mb-section\">\n          {t('upgradeOptionsAvailable', { count: upgradeOptionsCount })}\n        </p>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex flex-col gap-element w-full max-w-xs\">\n        {config.ctaKey && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.DEFAULT}\n            size={ButtonSize.MD}\n            onClick={onAction}\n          >\n            {t(config.ctaKey)}\n          </Button>\n        )}\n        {onDismiss && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.GHOST}\n            size={ButtonSize.MD}\n            onClick={onDismiss}\n          >\n            {t('goBack')}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"feature-unavailable-prompt.js","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-unavailable-prompt.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * FeatureUnavailablePrompt (Preset)\n *\n * Core reusable content for feature unavailability prompts.\n * Adapts its title, description, icon, and CTA based on `behavior`.\n *\n * Rendered both in the route content area (FeatureRouteGuard) and inside a Dialog.\n */\n\nimport React, { useMemo } from 'react';\nimport { ButtonSize, FrontendComponentType, SurfaceVariant } from '@wildo-ai/presets-components-models';\nimport {\n  Button,\n  ButtonVariants_Variant,\n  useI18n,\n  useIconRegistry,\n  StandardIconReference,\n  IconSize,\n  Surface,\n  FeatureUnavailablePromptProps,\n} from '@wildo-ai/saas-frontend-lib';\n\n// ── Behavior → icon / label key mapping ─────────────────────────────\n\ninterface BehaviorConfig {\n  icon: StandardIconReference;\n  titleKey: string;\n  descriptionKey: string;\n  ctaKey?: string;\n}\n\n/**\n * Maps FeatureUnavailabilityBehavior enum values (lowercase) to icon + label keys.\n * Keys must match the enum values exactly: 'upgrade_prompt', 'addon_prompt', etc.\n */\nconst BEHAVIOR_CONFIG: Record<string, BehaviorConfig> = {\n  upgrade_prompt: { icon: StandardIconReference.LOCK, titleKey: 'upgradeTitle', descriptionKey: 'upgradeDescription', ctaKey: 'upgradeCTA' },\n  addon_prompt: { icon: StandardIconReference.PLUS, titleKey: 'addonTitle', descriptionKey: 'addonDescription', ctaKey: 'addonCTA' },\n  contact_admin: { icon: StandardIconReference.USERS, titleKey: 'contactTitle', descriptionKey: 'contactDescription' },\n  limit_upgrade_prompt: { icon: StandardIconReference.WARNING, titleKey: 'limitTitle', descriptionKey: 'limitDescription', ctaKey: 'limitCTA' },\n  disable: { icon: StandardIconReference.LOCK, titleKey: 'disableTitle', descriptionKey: 'disableDescription' },\n  /*\n   * `custom` reaches this preset ONLY when the feature declared no `customComponentRef`: the engine\n   * wrapper resolves a declared ref through the component registry and renders that instead, and an\n   * unresolvable ref renders ComponentNotInjected (#440). So this row is the no-ref fallback, not an\n   * alias — it used to be the alias, which is why a CUSTOM feature rendered the DISABLE copy while\n   * `useResourceOperationActions` was treating CUSTOM as a prompt behaviour.\n   */\n  custom: { icon: StandardIconReference.LOCK, titleKey: 'disableTitle', descriptionKey: 'disableDescription' },\n};\n\nconst DEFAULT_CONFIG: BehaviorConfig = {\n  icon: StandardIconReference.LOCK,\n  titleKey: 'disableTitle',\n  descriptionKey: 'disableDescription',\n};\n\n// ── Component ───────────────────────────────────────────────────────\n\nexport function FeatureUnavailablePrompt({\n  behavior,\n  missingFeatures,\n  limitInfo,\n  upgradeOptionsCount,\n  onAction,\n  onDismiss,\n}: FeatureUnavailablePromptProps): React.JSX.Element | null {\n  const { makeTrComponent, isReady } = useI18n({ component: FrontendComponentType.LOW_LEVEL_FEATURE_UNAVAILABLE_PROMPT });\n  const { renderIcon } = useIconRegistry();\n\n  const t = useMemo(\n    () => makeTrComponent(FrontendComponentType.LOW_LEVEL_FEATURE_UNAVAILABLE_PROMPT),\n    [makeTrComponent],\n  );\n\n  const config = BEHAVIOR_CONFIG[behavior] ?? DEFAULT_CONFIG;\n\n  const limitPercentage = useMemo(() => {\n    if (!limitInfo || limitInfo.limit <= 0) return 0;\n    return Math.min(100, Math.round((limitInfo.current / limitInfo.limit) * 100));\n  }, [limitInfo]);\n\n  if (!isReady) return null;\n\n  return (\n    <div className=\"flex flex-col items-center justify-center min-h-[60vh] p-card text-center max-w-lg mx-auto\">\n      {/* Icon */}\n      <div className=\"w-16 h-16 rounded-full bg-muted flex items-center justify-center mb-section\">\n        {renderIcon(config.icon, { size: IconSize.LG, className: 'text-muted-foreground' })}\n      </div>\n\n      {/* Title */}\n      <h2 className=\"text-2xl font-semibold text-foreground mb-element\">\n        {t(config.titleKey)}\n      </h2>\n\n      {/* Description */}\n      <p className=\"text-muted-foreground mb-section max-w-sm\">\n        {t(config.descriptionKey)}\n      </p>\n\n      {/* Missing features badges */}\n      {missingFeatures && missingFeatures.length > 0 && (\n        <div className=\"mb-section space-y-element\">\n          <p className=\"text-xs font-medium text-muted-foreground\">\n            {t('requiredFeaturesLabel')}\n          </p>\n          <div className=\"flex flex-wrap justify-center gap-1\">\n            {missingFeatures.map(f => (\n              <span key={f} className=\"inline-flex items-center rounded-md bg-primary/10 px-2.5 py-1 text-xs font-medium text-primary\">\n                {f}\n              </span>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Limit usage bar */}\n      {limitInfo && (\n        <Surface asChild emitPolicyVars={false} variant={SurfaceVariant.INSET}>\n          <div className=\"bg-muted rounded-lg p-card-sm space-y-element w-full max-w-xs mb-section\">\n            <div className=\"flex justify-between text-sm\">\n              <span className=\"text-muted-foreground\">{limitInfo.featureId}</span>\n              <span className=\"font-medium text-foreground\">\n                {t('usageProgress', { current: limitInfo.current, limit: limitInfo.limit })}\n              </span>\n            </div>\n            <div\n              className=\"h-2.5 bg-muted-foreground/20 rounded-full overflow-hidden\"\n              role=\"progressbar\"\n              aria-valuenow={limitInfo.current}\n              aria-valuemin={0}\n              aria-valuemax={limitInfo.limit}\n              aria-label={`${limitInfo.featureId}: ${limitInfo.current} of ${limitInfo.limit}`}\n            >\n              <div\n                className={`h-full rounded-full transition-all duration-[var(--motion-duration-fast)] ${\n                  limitPercentage >= 100 ? 'bg-destructive' : limitPercentage >= 80 ? 'bg-warning' : 'bg-primary'\n                }`}\n                style={{ width: `${limitPercentage}%` }}\n              />\n            </div>\n          </div>\n        </Surface>\n      )}\n\n      {/* Upgrade options count */}\n      {upgradeOptionsCount != null && upgradeOptionsCount > 0 && (\n        <p className=\"text-sm text-muted-foreground mb-section\">\n          {t('upgradeOptionsAvailable', { count: upgradeOptionsCount })}\n        </p>\n      )}\n\n      {/* Actions */}\n      <div className=\"flex flex-col gap-element w-full max-w-xs\">\n        {config.ctaKey && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.DEFAULT}\n            size={ButtonSize.MD}\n            onClick={onAction}\n          >\n            {t(config.ctaKey)}\n          </Button>\n        )}\n        {onDismiss && (\n          <Button\n            type=\"button\"\n            variant={ButtonVariants_Variant.GHOST}\n            size={ButtonSize.MD}\n            onClick={onDismiss}\n          >\n            {t('goBack')}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/esm/components/feedback/features/feature-unavailable-prompt.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-unavailable-prompt.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/features/feature-unavailable-prompt.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,sCAAsC,EAAE,mBAAmB,EA2GvE,CAAC"}
+{"version":3,"file":"feature-unavailable-prompt.labels.d.ts","sourceRoot":"","sources":["../../../../../../src/components/feedback/features/feature-unavailable-prompt.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,sCAAsC,EAAE,mBAAmB,EA2GvE,CAAC"}

package/dist/esm/components/feedback/loading-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,WAAgB,EAAE,WAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAwBpI;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"loading-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/loading-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,WAAgB,EAAE,WAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAwBpI;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/esm/components/feedback/loading-overlay.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-overlay.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-overlay.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EAM7D,CAAC"}
+{"version":3,"file":"loading-overlay.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/loading-overlay.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EAM7D,CAAC"}

package/dist/esm/components/feedback/loading-spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2CzG;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"loading-spinner.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/loading-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEtE;;;;;GAKG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,IAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2CzG;AAED,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/esm/components/feedback/loading-spinner.labels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-spinner.labels.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loading-spinner.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EAM7D,CAAC"}
+{"version":3,"file":"loading-spinner.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/loading-spinner.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,qCAAqC,CAAC;AAM7C,eAAO,MAAM,4BAA4B,EAAE,mBAAmB,EAM7D,CAAC"}

package/dist/esm/components/feedback/notification-center.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-center.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notification-center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,uBAAuB,EAMxB,MAAM,6BAA6B,CAAC;AAkCrC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,gGA2H9B,CAAC"}
+{"version":3,"file":"notification-center.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/notification-center.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,uBAAuB,EAMxB,MAAM,6BAA6B,CAAC;AAkCrC;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,kBAAkB,gGA2H9B,CAAC"}

package/dist/esm/components/feedback/notification-center.js

@@ -11,12 +11,12 @@ function getRelativeTime(timestamp, labels) {
     const hours = Math.floor(diff / 3600000);
     const days = Math.floor(diff / 86400000);
     if (minutes < 1)
-        return labels.labelTimeJustNow ?? 'Just now';
+        return labels.labelTimeJustNow;
     if (minutes < 60)
-        return labels.formatTimeMinutesAgo?.(minutes) ?? `${minutes}m ago`;
+        return labels.formatTimeMinutesAgo(minutes);
     if (hours < 24)
-        return labels.formatTimeHoursAgo?.(hours) ?? `${hours}h ago`;
-    return labels.formatTimeDaysAgo?.(days) ?? `${days}d ago`;
+        return labels.formatTimeHoursAgo(hours);
+    return labels.formatTimeDaysAgo(days);
 }
 const TYPE_INDICATORS = {
     success: 'bg-success',
@@ -39,7 +39,7 @@ const TYPE_INDICATORS = {
  * For engine integration, see the notification-center wrapper in saas-frontend-lib
  * which wires NotificationContext and resolves i18n labels.
  */
-export const NotificationCenter = React.forwardRef(({ notifications, sessionCount, onRemove, onClearAll, labelTitle = 'Notifications', labelNoNotifications = 'Nothing since this page loaded', labelClearAll = 'Clear all', labelDismiss = 'Dismiss', labelTimeJustNow, formatTimeMinutesAgo, formatTimeHoursAgo, formatTimeDaysAgo, className, ...props }, ref) => {
+export const NotificationCenter = React.forwardRef(({ notifications, sessionCount, onRemove, onClearAll, labelTitle, labelNoNotifications, labelClearAll, labelDismiss, labelTimeJustNow, formatTimeMinutesAgo, formatTimeHoursAgo, formatTimeDaysAgo, className, ...props }, ref) => {
     const timeLabels = { labelTimeJustNow, formatTimeMinutesAgo, formatTimeHoursAgo, formatTimeDaysAgo };
     return (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.RAISED, children: _jsxs("div", { ref: ref, className: cn("flex flex-col w-full max-w-sm border border-border rounded-lg bg-popover shadow-[var(--shadow-lg)]", className), ...props, children: [_jsxs("div", { className: "flex items-center justify-between px-card py-element border-b border-border", children: [_jsxs("div", { className: "flex items-center gap-element", children: [_jsx("h3", { className: "text-sm font-semibold text-foreground", children: labelTitle }), sessionCount > 0 && (_jsx("span", { className: "inline-flex items-center justify-center h-5 min-w-[20px] px-1.5 text-xs font-medium bg-primary text-primary-foreground rounded-full", children: sessionCount }))] }), _jsx("div", { className: "flex items-center gap-element-sm", children: notifications.length > 0 && onClearAll && (_jsx(Button, { variant: ButtonVariants_Variant.GHOST, size: ButtonSize.XS, className: "text-muted-foreground", onClick: onClearAll, children: labelClearAll })) })] }), _jsx(ScrollArea, { className: "max-h-[24rem]", children: notifications.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-section text-sm text-muted-foreground", children: labelNoNotifications })) : (_jsx("div", { className: "flex flex-col", children: notifications.map((notification) => (_jsx(Surface, { asChild: true, emitPolicyVars: false, variant: SurfaceVariant.INSET, children: _jsxs("div", { className: cn("flex items-start gap-element px-card py-element-lg border-b border-border/50 last:border-b-0"), children: [_jsx("div", { className: "flex-shrink-0 mt-1.5", children: _jsx("div", { className: cn("w-2 h-2 rounded-full", TYPE_INDICATORS[notification.type] ?? TYPE_INDICATORS.info) }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-element-sm", children: [_jsxs("p", { className: "text-sm leading-snug font-medium text-foreground", children: [notification.wasCelebration && _jsx("span", { className: "me-1", children: "\uD83C\uDF89" }), notification.message] }), onRemove && (_jsx("button", { type: "button", className: "flex-shrink-0 text-muted-foreground/50 hover:text-muted-foreground text-xs", onClick: () => onRemove(notification.id), "aria-label": labelDismiss, children: "\u00D7" }))] }), _jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: getRelativeTime(notification.timestamp, timeLabels) }), notification.nextStep && (_jsxs(Button, { variant: ButtonVariants_Variant.LINK, size: ButtonSize.SM, className: "h-auto p-0 text-xs mt-1", onClick: () => notification.nextStep.onClick(), children: [notification.nextStep.label, " \u2192"] }))] })] }) }, notification.id))) })) })] }) }));
 });