@wildo-ai/presets-components 1.1.4 → 1.1.5

package/dist/esm/components/data-display/timeline.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { IndicatorVariant, SelectableVariant, UIBehavior } from "@wildo-ai/presets-components-models";
+import { cn, createCompoundPreset, useUI } from "@wildo-ai/saas-frontend-lib";
+import { optionGestureHandlers } from "../../components/sections/option-gesture.js";
+/**
+ * DEFAULT preset for `LOW_LEVEL_TIMELINE`: an ordered list along one rail, entries hanging off it
+ * with a marker dot in the entry's tone.
+ *
+ * ## The marker is the STRONG hue, not the subtle chip
+ *
+ * The INDICATOR recipe tints a chip with the `*-subtle` tokens, which is right for a badge with
+ * words in it and invisible on a 12px dot. The dot fills with the tone's own token — `success`,
+ * `warning`, `destructive`, `info`, and the muted foreground for NEUTRAL — total over the
+ * vocabulary by type, so a sixth tone is a compile error here rather than a grey dot. A marker WITH
+ * content (a glyph) keeps the same fill and sizes to its content.
+ *
+ * ## Geometry, once
+ *
+ * The rail is the list's own start border; entries pad past it and the marker sits absolutely on
+ * the rail, so the rail and the dots share one coordinate whatever an entry's body contains. The
+ * dot's `ring-background` is what lifts it off the rail line.
+ */
+const MARKER_FILL = {
+    [IndicatorVariant.SUCCESS]: "bg-success text-success-foreground",
+    [IndicatorVariant.WARNING]: "bg-warning text-warning-foreground",
+    [IndicatorVariant.ERROR]: "bg-destructive text-destructive-foreground",
+    [IndicatorVariant.INFO]: "bg-info text-info-foreground",
+    [IndicatorVariant.NEUTRAL]: "bg-muted-foreground text-background",
+};
+/** Where the marker sits: centred on the rail, which is the list's start border. */
+/* `--spacing-field` is the rail padding below (`ps-field`); 0.4375rem = half the dot (0.375rem) + half the 1px rail. */
+const MARKER_POSITION = "absolute top-1 -start-[calc(var(--spacing-field,1rem)+0.4375rem)]";
+/*
+ * The rail's classes, shared by both of its shapes. A named CONTAINER, so an entry can lay its time
+ * beside its body when the rail is wide and above it when the rail is narrow — measured on the
+ * creation board's split (2026-09-20), where a 200px rail gave the body sixty pixels beside a
+ * fixed-width timestamp and a session id wrapped one character per line. The entry decides by the
+ * rail's width, never the viewport's.
+ */
+const RAIL = "@container/timeline relative ms-1.5 flex flex-col gap-group border-s border-border ps-field";
+function TimelineRoot({ className, selectable = false, ...props }) {
+    /* A rail a person picks from is a `grid` of `row`s — a `div`, since `ol` does not admit the role. */
+    if (selectable) {
+        return _jsx("div", { "data-slot": "timeline", role: "grid", className: cn(RAIL, className), ...props });
+    }
+    return (_jsx("ol", { "data-slot": "timeline", className: cn(RAIL, className), ...props }));
+}
+function TimelineMarker({ tone = IndicatorVariant.NEUTRAL, className, children, ...props }) {
+    return (_jsx("span", { "data-slot": "timeline-marker", "data-tone": tone, "aria-hidden": "true", className: cn("inline-flex items-center justify-center rounded-full ring-2 ring-background", children === undefined || children === null ? "size-3" : "size-5 [&>svg]:size-3", MARKER_FILL[tone], className), ...props, children: children }));
+}
+function TimelineEntry({ tone = IndicatorVariant.NEUTRAL, marker, option, selected = false, className, children, ...props }) {
+    const { getRecipe } = useUI();
+    /*
+     * A PICKABLE entry wears the same selectable treatment a listbox card does — the FILLED "you are
+     * here" tint plus a ring when selected, the theme's focus ring when focusable — so a stream a
+     * person picks from reads like every other pickable list on the surface.
+     */
+    const selectable = option !== undefined || selected ? getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED) : undefined;
+    const entryClassName = cn("relative flex min-w-0 flex-wrap items-start gap-element rounded-md", option !== undefined && cn("cursor-pointer outline-none px-item-sm py-item-xs -mx-item-sm", selectable?.states.focus, selectable?.motion.transition), selected && cn(selectable?.states.selected, "ring-2 ring-ring"), className);
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn(MARKER_POSITION, "flex size-3 items-center justify-center"), children: marker ?? _jsx(TimelineMarker, { tone: tone }) }), children] }));
+    /*
+     * A PICKABLE entry is a grid `row` owning one `gridcell`, and the gridcell is the entry — focusable,
+     * `aria-selected`, carrying the caller's attributes — because an entry holds `Timeline.Actions` and
+     * an `option` may not contain a control. The wrapper draws nothing; the rail's flex column lays it out.
+     */
+    if (option !== undefined) {
+        return (_jsx("div", { role: "row", className: "min-w-0", children: _jsx("div", { "data-slot": "timeline-entry", "data-tone": tone, "data-selected": selected, role: "gridcell", "aria-selected": selected, tabIndex: 0, className: entryClassName, ...optionGestureHandlers(option.onSelect), ...props, children: content }) }));
+    }
+    return (_jsx("li", { "data-slot": "timeline-entry", "data-tone": tone, "data-selected": selected, className: entryClassName, ...props, children: content }));
+}
+function TimelineTime({ className, ...props }) {
+    return (_jsx("time", { "data-slot": "timeline-time", 
+        /* Full width on a narrow rail (the body follows beneath); beside the body from 24rem up — see the root. */
+        className: cn("basis-full shrink-0 pt-px text-2xs text-foreground-subtle tabular-nums @sm/timeline:basis-auto", className), ...props }));
+}
+function TimelineBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "timeline-body", className: cn("flex min-w-0 flex-1 flex-col gap-element-sm text-sm", className), ...props }));
+}
+function TimelineActions({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "timeline-actions", 
+        /* Its own row on a narrow rail, end-aligned; beside the body, pushed to the end, from 24rem up — see the root. */
+        className: cn("flex basis-full shrink-0 items-center justify-end gap-element-sm @sm/timeline:ms-auto @sm/timeline:basis-auto", className), ...props }));
+}
+export const Timeline = createCompoundPreset(TimelineRoot, {
+    Entry: TimelineEntry,
+    Marker: TimelineMarker,
+    Time: TimelineTime,
+    Body: TimelineBody,
+    Actions: TimelineActions,
+});
+//# sourceMappingURL=timeline.js.map

package/dist/esm/components/data-display/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../../src/components/data-display/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { IndicatorVariant, SelectableVariant, UIBehavior } from \"@wildo-ai/presets-components-models\"\n\nimport { cn, createCompoundPreset, useUI } from \"@wildo-ai/saas-frontend-lib\"\nimport { optionGestureHandlers } from \"~wildo-presets/components/sections/option-gesture\"\nimport type {\n  TimelineActionsProps,\n  TimelineBodyProps,\n  TimelineCompound,\n  TimelineEntryProps,\n  TimelineMarkerProps,\n  TimelineProps,\n  TimelineTimeProps,\n} from \"@wildo-ai/saas-frontend-lib\"\n\n/**\n * DEFAULT preset for `LOW_LEVEL_TIMELINE`: an ordered list along one rail, entries hanging off it\n * with a marker dot in the entry's tone.\n *\n * ## The marker is the STRONG hue, not the subtle chip\n *\n * The INDICATOR recipe tints a chip with the `*-subtle` tokens, which is right for a badge with\n * words in it and invisible on a 12px dot. The dot fills with the tone's own token — `success`,\n * `warning`, `destructive`, `info`, and the muted foreground for NEUTRAL — total over the\n * vocabulary by type, so a sixth tone is a compile error here rather than a grey dot. A marker WITH\n * content (a glyph) keeps the same fill and sizes to its content.\n *\n * ## Geometry, once\n *\n * The rail is the list's own start border; entries pad past it and the marker sits absolutely on\n * the rail, so the rail and the dots share one coordinate whatever an entry's body contains. The\n * dot's `ring-background` is what lifts it off the rail line.\n */\nconst MARKER_FILL: Record<IndicatorVariant, string> = {\n  [IndicatorVariant.SUCCESS]: \"bg-success text-success-foreground\",\n  [IndicatorVariant.WARNING]: \"bg-warning text-warning-foreground\",\n  [IndicatorVariant.ERROR]: \"bg-destructive text-destructive-foreground\",\n  [IndicatorVariant.INFO]: \"bg-info text-info-foreground\",\n  [IndicatorVariant.NEUTRAL]: \"bg-muted-foreground text-background\",\n}\n\n/** Where the marker sits: centred on the rail, which is the list's start border. */\n/* `--spacing-field` is the rail padding below (`ps-field`); 0.4375rem = half the dot (0.375rem) + half the 1px rail. */\nconst MARKER_POSITION = \"absolute top-1 -start-[calc(var(--spacing-field,1rem)+0.4375rem)]\"\n\n/*\n * The rail's classes, shared by both of its shapes. A named CONTAINER, so an entry can lay its time\n * beside its body when the rail is wide and above it when the rail is narrow — measured on the\n * creation board's split (2026-09-20), where a 200px rail gave the body sixty pixels beside a\n * fixed-width timestamp and a session id wrapped one character per line. The entry decides by the\n * rail's width, never the viewport's.\n */\nconst RAIL = \"@container/timeline relative ms-1.5 flex flex-col gap-group border-s border-border ps-field\"\n\nfunction TimelineRoot({ className, selectable = false, ...props }: TimelineProps): React.JSX.Element {\n  /* A rail a person picks from is a `grid` of `row`s — a `div`, since `ol` does not admit the role. */\n  if (selectable) {\n    return <div data-slot=\"timeline\" role=\"grid\" className={cn(RAIL, className)} {...(props as unknown as React.ComponentProps<\"div\">)} />\n  }\n  return (\n    <ol\n      data-slot=\"timeline\"\n      className={cn(RAIL, className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineMarker({ tone = IndicatorVariant.NEUTRAL, className, children, ...props }: TimelineMarkerProps): React.JSX.Element {\n  return (\n    <span\n      data-slot=\"timeline-marker\"\n      data-tone={tone}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-flex items-center justify-center rounded-full ring-2 ring-background\",\n        children === undefined || children === null ? \"size-3\" : \"size-5 [&>svg]:size-3\",\n        MARKER_FILL[tone],\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nfunction TimelineEntry({ tone = IndicatorVariant.NEUTRAL, marker, option, selected = false, className, children, ...props }: TimelineEntryProps): React.JSX.Element {\n  const { getRecipe } = useUI()\n  /*\n   * A PICKABLE entry wears the same selectable treatment a listbox card does — the FILLED \"you are\n   * here\" tint plus a ring when selected, the theme's focus ring when focusable — so a stream a\n   * person picks from reads like every other pickable list on the surface.\n   */\n  const selectable = option !== undefined || selected ? getRecipe(UIBehavior.SELECTABLE, SelectableVariant.FILLED) : undefined\n  const entryClassName = cn(\n    \"relative flex min-w-0 flex-wrap items-start gap-element rounded-md\",\n    option !== undefined && cn(\"cursor-pointer outline-none px-item-sm py-item-xs -mx-item-sm\", selectable?.states.focus, selectable?.motion.transition),\n    selected && cn(selectable?.states.selected, \"ring-2 ring-ring\"),\n    className,\n  )\n  const content = (\n    <>\n      <span className={cn(MARKER_POSITION, \"flex size-3 items-center justify-center\")}>\n        {marker ?? <TimelineMarker tone={tone} />}\n      </span>\n      {children}\n    </>\n  )\n\n  /*\n   * A PICKABLE entry is a grid `row` owning one `gridcell`, and the gridcell is the entry — focusable,\n   * `aria-selected`, carrying the caller's attributes — because an entry holds `Timeline.Actions` and\n   * an `option` may not contain a control. The wrapper draws nothing; the rail's flex column lays it out.\n   */\n  if (option !== undefined) {\n    return (\n      <div role=\"row\" className=\"min-w-0\">\n        <div\n          data-slot=\"timeline-entry\"\n          data-tone={tone}\n          data-selected={selected}\n          role=\"gridcell\"\n          aria-selected={selected}\n          tabIndex={0}\n          className={entryClassName}\n          {...optionGestureHandlers<HTMLDivElement>(option.onSelect)}\n          {...(props as unknown as React.ComponentProps<\"div\">)}\n        >\n          {content}\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <li data-slot=\"timeline-entry\" data-tone={tone} data-selected={selected} className={entryClassName} {...props}>\n      {content}\n    </li>\n  )\n}\n\nfunction TimelineTime({ className, ...props }: TimelineTimeProps): React.JSX.Element {\n  return (\n    <time\n      data-slot=\"timeline-time\"\n      /* Full width on a narrow rail (the body follows beneath); beside the body from 24rem up — see the root. */\n      className={cn(\"basis-full shrink-0 pt-px text-2xs text-foreground-subtle tabular-nums @sm/timeline:basis-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineBody({ className, ...props }: TimelineBodyProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"timeline-body\"\n      className={cn(\"flex min-w-0 flex-1 flex-col gap-element-sm text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TimelineActions({ className, ...props }: TimelineActionsProps): React.JSX.Element {\n  return (\n    <div\n      data-slot=\"timeline-actions\"\n      /* Its own row on a narrow rail, end-aligned; beside the body, pushed to the end, from 24rem up — see the root. */\n      className={cn(\"flex basis-full shrink-0 items-center justify-end gap-element-sm @sm/timeline:ms-auto @sm/timeline:basis-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nexport const Timeline = createCompoundPreset<TimelineCompound>(TimelineRoot, {\n  Entry: TimelineEntry,\n  Marker: TimelineMarker,\n  Time: TimelineTime,\n  Body: TimelineBody,\n  Actions: TimelineActions,\n})\n"]}

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

@@ -8,10 +8,19 @@ import type { CelebrationOverlayProps } from '@wildo-ai/saas-frontend-lib';
  * 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.

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

@@ -1 +1 @@
-{"version":3,"file":"celebration-overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/celebration-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AA4B1E;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,kBAAkB,gGA4J9B,CAAC"}
+{"version":3,"file":"celebration-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/components/feedback/celebration-overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AA6B1E;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,kBAAkB,gGAuR9B,CAAC"}

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"}