@digilogiclabs/saas-factory-ui 2.4.0 → 2.6.0

package/dist/index.d.mts

@@ -5015,8 +5015,14 @@ interface RandomPlayerPickerProps {
     darkMode?: boolean;
     /** Wheel diameter in px. Default 380. */
     size?: number;
-    /** Called when a winner is locked in. */
-    onPick?: (winner: RandomPlayerParticipant, history: RandomPlayerParticipant[]) => void;
+    /**
+     * Called when a winner is locked in. `info.lastStanding` is true for
+     * the automatic final pick of a draft — the survivor promoted when
+     * pops drain the pool to one.
+     */
+    onPick?: (winner: RandomPlayerParticipant, history: RandomPlayerParticipant[], info?: {
+        lastStanding: boolean;
+    }) => void;
     /** Fired the moment a spin begins (before the animation). */
     onSpinStart?: () => void;
     /**
@@ -5050,14 +5056,37 @@ interface RandomPlayerPickerProps {
     renderWinner?: (winner: RandomPlayerParticipant) => ReactNode;
     /** Imperative handle. `spinRef.current?.()` triggers a spin. */
     spinRef?: MutableRefObject<(() => void) | null>;
+    /**
+     * Imperative reset handle. `resetRef.current?.()` restores the pool to
+     * the full `participants` list and clears history/winner — the escape
+     * hatch for consumers that hide the built-in controls
+     * (`showControls={false}`) but still need a "reset draft" affordance
+     * once draft-mode pops drain the pool.
+     */
+    resetRef?: MutableRefObject<(() => void) | null>;
+    /**
+     * Fired whenever the internal pool changes (mount, structural sync,
+     * draft-mode pop, spin-again flush, reset). Draft-mode consumers use
+     * this to mirror the live pool — e.g. to disable an external spin
+     * trigger when the pool drains below 2 instead of presenting a dead
+     * button, and to offer a reset once the draft completes.
+     */
+    onPoolChange?: (pool: RandomPlayerParticipant[]) => void;
+    /**
+     * Caption shown in place of `placeholderCaption` when draft-mode pops
+     * drain the pool below 2 while the roster itself still has 2+ members.
+     * Default: "Draft complete — reset to spin again".
+     */
+    draftCompleteCaption?: string;
     /**
      * Visual intensity preset. Default "normal".
-     *   - "subtle" / "normal": current behavior — shorter spins, standard
-     *     ease-out curve.
-     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
-     *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +12 extra revolutions, plus more
-     *     particles/glow/shake on reveal.
+     *   - "subtle" / "normal": shorter spins, standard CSS ease-out curve.
+     *   - "dramatic": physics-driven spin — 2.5× duration, rAF-driven
+     *     exponential velocity decay (v ∝ e^(-4t)) that keeps the wheel
+     *     visibly winding down through the FULL duration and lands exactly
+     *     at the end, +12 extra revolutions, ticks fired on actual
+     *     wedge/row crossings, plus more particles/glow/shake on reveal.
+     *     Falls back to a 250ms CSS settle under prefers-reduced-motion.
      */
     intensity?: RandomPlayerIntensity;
     /**
@@ -5100,7 +5129,7 @@ interface RandomPlayerPickerProps {
     /** Accessible label for the wheel root. */
     ariaLabel?: string;
 }
-declare function RandomPlayerPicker({ participants, mode, reelVisibleRows, reelRowHeight, theme, darkMode, size, onPick, onSpinStart, onTick, trigger, label, removeWinners, spinDuration, minRevolutions, maxRevolutions, showHistory, showControls, showStats, renderWinner, spinRef, intensity, enableHaptics, tickSoundUrl, winSoundUrl, soundVolume, placeholderMode, placeholderCaption, className, style, ariaLabel, }: RandomPlayerPickerProps): react_jsx_runtime.JSX.Element;
+declare function RandomPlayerPicker({ participants, mode, reelVisibleRows, reelRowHeight, theme, darkMode, size, onPick, onSpinStart, onTick, trigger, label, removeWinners, spinDuration, minRevolutions, maxRevolutions, showHistory, showControls, showStats, renderWinner, spinRef, resetRef, onPoolChange, draftCompleteCaption, intensity, enableHaptics, tickSoundUrl, winSoundUrl, soundVolume, placeholderMode, placeholderCaption, className, style, ariaLabel, }: RandomPlayerPickerProps): react_jsx_runtime.JSX.Element;
 
 type HeroBannerTransition = "fade" | "slide" | "zoom" | "blur" | "reveal" | "push";
 type HeroBannerImageFilter = "none" | "cinematic" | "dramatic" | "cool" | "warm" | "desaturated" | "noir" | "vibrant";
@@ -5666,10 +5695,20 @@ interface TeamGeneratorProps {
     maxPlayers?: number;
     /** Initial roster. Uncontrolled — the component manages names internally. */
     defaultNames?: string[];
+    /** Initial generated teams (e.g. restored from a saved session).
+     *  Uncontrolled — the component takes over after mount. An empty array
+     *  is treated as "no teams". */
+    defaultTeams?: string[][];
     /** Called whenever the name pool changes. */
     onNamesChange?: (names: string[]) => void;
     /** Called whenever teams are (re)generated. */
     onGenerate?: (teams: string[][]) => void;
+    /** Called whenever the generated teams change for ANY reason — a
+     *  (re)generation, or invalidation to `null` when a player is removed,
+     *  the pool is cleared, or the team count changes. Unlike `onGenerate`,
+     *  this mirrors the full lifecycle of the on-screen split so hosts can
+     *  persist it and restore via `defaultTeams`. */
+    onTeamsChange?: (teams: string[][] | null) => void;
     /** Called whenever the team count selection changes. */
     onTeamCountChange?: (count: number) => void;
     /** Localized / customized labels. */
@@ -5682,7 +5721,7 @@ interface TeamGeneratorProps {
      *  CSV / TSV roster from a spreadsheet. Default `true`. */
     enableImport?: boolean;
 }
-declare function TeamGenerator({ theme, darkMode, teamCountOptions, defaultTeamCount, minPlayersPerTeam, maxPlayers, defaultNames, onNamesChange, onGenerate, onTeamCountChange, labels, ariaLabel, className, enableImport, }: TeamGeneratorProps): react_jsx_runtime.JSX.Element;
+declare function TeamGenerator({ theme, darkMode, teamCountOptions, defaultTeamCount, minPlayersPerTeam, maxPlayers, defaultNames, defaultTeams, onNamesChange, onGenerate, onTeamsChange, onTeamCountChange, labels, ariaLabel, className, enableImport, }: TeamGeneratorProps): react_jsx_runtime.JSX.Element;
 declare namespace TeamGenerator {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -5015,8 +5015,14 @@ interface RandomPlayerPickerProps {
     darkMode?: boolean;
     /** Wheel diameter in px. Default 380. */
     size?: number;
-    /** Called when a winner is locked in. */
-    onPick?: (winner: RandomPlayerParticipant, history: RandomPlayerParticipant[]) => void;
+    /**
+     * Called when a winner is locked in. `info.lastStanding` is true for
+     * the automatic final pick of a draft — the survivor promoted when
+     * pops drain the pool to one.
+     */
+    onPick?: (winner: RandomPlayerParticipant, history: RandomPlayerParticipant[], info?: {
+        lastStanding: boolean;
+    }) => void;
     /** Fired the moment a spin begins (before the animation). */
     onSpinStart?: () => void;
     /**
@@ -5050,14 +5056,37 @@ interface RandomPlayerPickerProps {
     renderWinner?: (winner: RandomPlayerParticipant) => ReactNode;
     /** Imperative handle. `spinRef.current?.()` triggers a spin. */
     spinRef?: MutableRefObject<(() => void) | null>;
+    /**
+     * Imperative reset handle. `resetRef.current?.()` restores the pool to
+     * the full `participants` list and clears history/winner — the escape
+     * hatch for consumers that hide the built-in controls
+     * (`showControls={false}`) but still need a "reset draft" affordance
+     * once draft-mode pops drain the pool.
+     */
+    resetRef?: MutableRefObject<(() => void) | null>;
+    /**
+     * Fired whenever the internal pool changes (mount, structural sync,
+     * draft-mode pop, spin-again flush, reset). Draft-mode consumers use
+     * this to mirror the live pool — e.g. to disable an external spin
+     * trigger when the pool drains below 2 instead of presenting a dead
+     * button, and to offer a reset once the draft completes.
+     */
+    onPoolChange?: (pool: RandomPlayerParticipant[]) => void;
+    /**
+     * Caption shown in place of `placeholderCaption` when draft-mode pops
+     * drain the pool below 2 while the roster itself still has 2+ members.
+     * Default: "Draft complete — reset to spin again".
+     */
+    draftCompleteCaption?: string;
     /**
      * Visual intensity preset. Default "normal".
-     *   - "subtle" / "normal": current behavior — shorter spins, standard
-     *     ease-out curve.
-     *   - "dramatic": physics-like spin — 2.5× duration, inertia-style
-     *     curve so motion continues through the full duration with a slow
-     *     winding-down tail, +12 extra revolutions, plus more
-     *     particles/glow/shake on reveal.
+     *   - "subtle" / "normal": shorter spins, standard CSS ease-out curve.
+     *   - "dramatic": physics-driven spin — 2.5× duration, rAF-driven
+     *     exponential velocity decay (v ∝ e^(-4t)) that keeps the wheel
+     *     visibly winding down through the FULL duration and lands exactly
+     *     at the end, +12 extra revolutions, ticks fired on actual
+     *     wedge/row crossings, plus more particles/glow/shake on reveal.
+     *     Falls back to a 250ms CSS settle under prefers-reduced-motion.
      */
     intensity?: RandomPlayerIntensity;
     /**
@@ -5100,7 +5129,7 @@ interface RandomPlayerPickerProps {
     /** Accessible label for the wheel root. */
     ariaLabel?: string;
 }
-declare function RandomPlayerPicker({ participants, mode, reelVisibleRows, reelRowHeight, theme, darkMode, size, onPick, onSpinStart, onTick, trigger, label, removeWinners, spinDuration, minRevolutions, maxRevolutions, showHistory, showControls, showStats, renderWinner, spinRef, intensity, enableHaptics, tickSoundUrl, winSoundUrl, soundVolume, placeholderMode, placeholderCaption, className, style, ariaLabel, }: RandomPlayerPickerProps): react_jsx_runtime.JSX.Element;
+declare function RandomPlayerPicker({ participants, mode, reelVisibleRows, reelRowHeight, theme, darkMode, size, onPick, onSpinStart, onTick, trigger, label, removeWinners, spinDuration, minRevolutions, maxRevolutions, showHistory, showControls, showStats, renderWinner, spinRef, resetRef, onPoolChange, draftCompleteCaption, intensity, enableHaptics, tickSoundUrl, winSoundUrl, soundVolume, placeholderMode, placeholderCaption, className, style, ariaLabel, }: RandomPlayerPickerProps): react_jsx_runtime.JSX.Element;
 
 type HeroBannerTransition = "fade" | "slide" | "zoom" | "blur" | "reveal" | "push";
 type HeroBannerImageFilter = "none" | "cinematic" | "dramatic" | "cool" | "warm" | "desaturated" | "noir" | "vibrant";
@@ -5666,10 +5695,20 @@ interface TeamGeneratorProps {
     maxPlayers?: number;
     /** Initial roster. Uncontrolled — the component manages names internally. */
     defaultNames?: string[];
+    /** Initial generated teams (e.g. restored from a saved session).
+     *  Uncontrolled — the component takes over after mount. An empty array
+     *  is treated as "no teams". */
+    defaultTeams?: string[][];
     /** Called whenever the name pool changes. */
     onNamesChange?: (names: string[]) => void;
     /** Called whenever teams are (re)generated. */
     onGenerate?: (teams: string[][]) => void;
+    /** Called whenever the generated teams change for ANY reason — a
+     *  (re)generation, or invalidation to `null` when a player is removed,
+     *  the pool is cleared, or the team count changes. Unlike `onGenerate`,
+     *  this mirrors the full lifecycle of the on-screen split so hosts can
+     *  persist it and restore via `defaultTeams`. */
+    onTeamsChange?: (teams: string[][] | null) => void;
     /** Called whenever the team count selection changes. */
     onTeamCountChange?: (count: number) => void;
     /** Localized / customized labels. */
@@ -5682,7 +5721,7 @@ interface TeamGeneratorProps {
      *  CSV / TSV roster from a spreadsheet. Default `true`. */
     enableImport?: boolean;
 }
-declare function TeamGenerator({ theme, darkMode, teamCountOptions, defaultTeamCount, minPlayersPerTeam, maxPlayers, defaultNames, onNamesChange, onGenerate, onTeamCountChange, labels, ariaLabel, className, enableImport, }: TeamGeneratorProps): react_jsx_runtime.JSX.Element;
+declare function TeamGenerator({ theme, darkMode, teamCountOptions, defaultTeamCount, minPlayersPerTeam, maxPlayers, defaultNames, defaultTeams, onNamesChange, onGenerate, onTeamsChange, onTeamCountChange, labels, ariaLabel, className, enableImport, }: TeamGeneratorProps): react_jsx_runtime.JSX.Element;
 declare namespace TeamGenerator {
     var displayName: string;
 }

package/dist/index.js

@@ -33535,6 +33535,11 @@ var WEDGE_PALETTE = [
 ];
 var DEFAULT_EASING = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 var DRAMATIC_EASING = "cubic-bezier(0.39, 0.575, 0.565, 1)";
+var PHYSICS_DECAY_K = 4;
+function physicsRampDown(t) {
+  return (1 - Math.exp(-PHYSICS_DECAY_K * t)) / (1 - Math.exp(-PHYSICS_DECAY_K));
+}
+var REEL_LEAD_IN = 32;
 var INTENSITY_CONFIG = {
   subtle: {
     particles: 14,
@@ -33606,6 +33611,9 @@ function ReelStage({
   winner,
   spinning,
   reelY,
+  displayY,
+  cssTransition,
+  tapeRef,
   reelVisibleRows,
   reelRowHeight,
   size,
@@ -33629,17 +33637,16 @@ function ReelStage({
   const stripHeight = reelVisibleRows * reelRowHeight;
   const centerOffsetPx = (reelVisibleRows - 1) / 2 * reelRowHeight;
   const P = pool.length;
-  const leadIn = 32;
   const tapeRows = Math.max(
-    reelVisibleRows + leadIn + 1,
-    Math.ceil((reelY + stripHeight) / reelRowHeight) + leadIn + 1
+    reelVisibleRows + REEL_LEAD_IN + 1,
+    Math.ceil((reelY + stripHeight) / reelRowHeight) + REEL_LEAD_IN + 1
   );
   const tape = Array.from({ length: tapeRows }, (_, i) => {
-    const poolIdx = P === 0 ? 0 : ((i - leadIn) % P + P) % P;
+    const poolIdx = P === 0 ? 0 : ((i - REEL_LEAD_IN) % P + P) % P;
     return pool[poolIdx];
   });
-  const effectiveY = reelY + leadIn * reelRowHeight;
-  const transition = spinning ? `transform ${reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult)}ms ${intensityCfg.easing}` : "none";
+  const effectiveY = displayY + REEL_LEAD_IN * reelRowHeight;
+  const transition = spinning && cssTransition ? `transform ${reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult)}ms ${intensityCfg.easing}` : "none";
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "div",
     {
@@ -33684,6 +33691,7 @@ function ReelStage({
               ) : /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
                 "div",
                 {
+                  ref: tapeRef,
                   "aria-hidden": "true",
                   style: {
                     position: "absolute",
@@ -33899,6 +33907,9 @@ function RandomPlayerPicker({
   showStats = true,
   renderWinner,
   spinRef,
+  resetRef,
+  onPoolChange,
+  draftCompleteCaption = "Draft complete \u2014 reset to spin again",
   intensity = "normal",
   enableHaptics = false,
   tickSoundUrl,
@@ -33913,6 +33924,7 @@ function RandomPlayerPicker({
   const dark = useDarkMode(darkMode);
   const reducedMotion = usePrefersReducedMotion();
   const intensityCfg = INTENSITY_CONFIG[intensity];
+  const physicsDriven = intensity === "dramatic" && !reducedMotion;
   const [pool, setPool] = (0, import_react71.useState)(participants);
   const [rotation, setRotation] = (0, import_react71.useState)(0);
   const [reelY, setReelY] = (0, import_react71.useState)(0);
@@ -33931,6 +33943,11 @@ function RandomPlayerPicker({
   const winAudioRef = (0, import_react71.useRef)(null);
   const containerRef = (0, import_react71.useRef)(null);
   const prevIdsRef = (0, import_react71.useRef)("");
+  const wheelSvgRef = (0, import_react71.useRef)(null);
+  const reelTapeRef = (0, import_react71.useRef)(null);
+  const rafRef = (0, import_react71.useRef)(null);
+  const visualRotationRef = (0, import_react71.useRef)(null);
+  const visualReelYRef = (0, import_react71.useRef)(null);
   (0, import_react71.useEffect)(() => {
     if (typeof window === "undefined" || !tickSoundUrl) {
       tickAudioRef.current = null;
@@ -33984,6 +34001,12 @@ function RandomPlayerPicker({
         clearTimeout(popTimer.current);
         popTimer.current = null;
       }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      visualRotationRef.current = null;
+      visualReelYRef.current = null;
       pendingPopIdxRef.current = null;
       setSpinning(false);
       setPool(participants);
@@ -34056,7 +34079,20 @@ function RandomPlayerPicker({
       }
     }
     const activeN = activePool.length;
-    if (activeN < 2) return;
+    if (activeN < 2) {
+      if (removeWinnersRef.current && activePool.length === 1 && history.length > 0) {
+        const survivor = activePool[0];
+        if (survivor) {
+          const promoted = [survivor, ...history].slice(0, 20);
+          setPool([]);
+          setWinner(survivor);
+          setRevealKey((k) => k + 1);
+          setHistory(promoted);
+          onPick?.(survivor, promoted, { lastStanding: true });
+        }
+      }
+      return;
+    }
     const activeAnglePerWedge = 2 * Math.PI / activeN;
     const activeRotation = rotation;
     const activeReelY = reelY;
@@ -34095,7 +34131,56 @@ function RandomPlayerPicker({
     } else {
       setRotation(finalRotation);
     }
-    if ((onTick || tickAudioRef.current) && !reducedMotion) {
+    const fireTick = () => {
+      onTick?.();
+      const ta = tickAudioRef.current;
+      if (ta) {
+        try {
+          ta.currentTime = 0;
+          void ta.play().catch(() => {
+          });
+        } catch {
+        }
+      }
+    };
+    if (physicsDriven) {
+      const from = mode === "reel" ? activeReelY : activeRotation;
+      const to = mode === "reel" ? finalReelY : finalRotation;
+      const crossUnit = mode === "reel" ? reelRowHeight : activeAnglePerWedge * 180 / Math.PI;
+      if (mode === "reel") visualReelYRef.current = from;
+      else visualRotationRef.current = from;
+      let crossings = 0;
+      const t0 = performance.now();
+      const step = (now) => {
+        const t = Math.min(1, (now - t0) / effectiveDuration);
+        const value = from + (to - from) * physicsRampDown(t);
+        if (mode === "reel") {
+          visualReelYRef.current = value;
+          const el = reelTapeRef.current;
+          if (el) {
+            el.style.transform = `translateY(${-(value + REEL_LEAD_IN * reelRowHeight)}px)`;
+          }
+        } else {
+          visualRotationRef.current = value;
+          const el = wheelSvgRef.current;
+          if (el) el.style.transform = `rotate(${value}deg)`;
+        }
+        const crossed = Math.floor(Math.abs(value - from) / crossUnit);
+        if (crossed > crossings) {
+          crossings = crossed;
+          fireTick();
+        }
+        if (t < 1) {
+          rafRef.current = requestAnimationFrame(step);
+        } else {
+          rafRef.current = null;
+          visualRotationRef.current = null;
+          visualReelYRef.current = null;
+        }
+      };
+      rafRef.current = requestAnimationFrame(step);
+    }
+    if (!physicsDriven && (onTick || tickAudioRef.current) && !reducedMotion) {
       const wedges = mode === "reel" ? Math.max(1, reelRevRows + targetRowOffset) : (() => {
         const totalDelta = deltaMod + revolutions * 360;
         const wedgeDeg = activeAnglePerWedge * 180 / Math.PI;
@@ -34113,16 +34198,7 @@ function RandomPlayerPicker({
         const eased = 1 - Math.pow(1 - progress, 3);
         const interval = startInterval + (endInterval - startInterval) * eased;
         tickInterval.current = setTimeout(() => {
-          onTick?.();
-          const ta = tickAudioRef.current;
-          if (ta) {
-            try {
-              ta.currentTime = 0;
-              void ta.play().catch(() => {
-              });
-            } catch {
-            }
-          }
+          fireTick();
           elapsed += interval;
           schedule();
         }, interval);
@@ -34181,8 +34257,19 @@ function RandomPlayerPicker({
           popTimer.current = null;
           pendingPopIdxRef.current = null;
           if (!removeWinnersRef.current) return;
-          setPool((p) => p.filter((_, i) => i !== finalWinnerIdx));
-          setWinner(null);
+          const survivors = activePool.filter((_, i) => i !== finalWinnerIdx);
+          const survivor = survivors.length === 1 ? survivors[0] : void 0;
+          if (survivor) {
+            const promoted = [survivor, ...nextHistory].slice(0, 20);
+            setPool([]);
+            setWinner(survivor);
+            setRevealKey((k) => k + 1);
+            setHistory(promoted);
+            onPick?.(survivor, promoted, { lastStanding: true });
+          } else {
+            setPool(survivors);
+            setWinner(null);
+          }
           setRotation(0);
           setReelY(0);
         }, 2800);
@@ -34205,6 +34292,7 @@ function RandomPlayerPicker({
     maxRevolutions,
     history,
     reducedMotion,
+    physicsDriven,
     enableHaptics,
     intensityCfg.particles,
     intensityCfg.durationMult,
@@ -34216,12 +34304,20 @@ function RandomPlayerPicker({
       if (spinRef && spinRef.current === spin) spinRef.current = null;
     };
   }, [spin, spinRef]);
+  const onPoolChangeRef = (0, import_react71.useRef)(onPoolChange);
+  (0, import_react71.useEffect)(() => {
+    onPoolChangeRef.current = onPoolChange;
+  });
+  (0, import_react71.useEffect)(() => {
+    onPoolChangeRef.current?.(pool);
+  }, [pool]);
   (0, import_react71.useEffect)(
     () => () => {
       if (winnerTimer.current) clearTimeout(winnerTimer.current);
       if (particleTimer.current) clearTimeout(particleTimer.current);
       if (popTimer.current) clearTimeout(popTimer.current);
       if (tickInterval.current) clearTimeout(tickInterval.current);
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
     },
     []
   );
@@ -34251,6 +34347,12 @@ function RandomPlayerPicker({
       clearTimeout(popTimer.current);
       popTimer.current = null;
     }
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    visualRotationRef.current = null;
+    visualReelYRef.current = null;
     pendingPopIdxRef.current = null;
     setSpinning(false);
     setPool(participants);
@@ -34260,9 +34362,17 @@ function RandomPlayerPicker({
     setReelY(0);
     setParticles([]);
   }, [participants]);
+  (0, import_react71.useEffect)(() => {
+    if (resetRef) resetRef.current = reset;
+    return () => {
+      if (resetRef && resetRef.current === reset) resetRef.current = null;
+    };
+  }, [reset, resetRef]);
   const isIdle = n < 2;
+  const drainedByDraft = isIdle && participants.length >= 2;
+  const effectiveIdleCaption = drainedByDraft ? draftCompleteCaption : placeholderCaption;
   const placeholderDiscColor = dark ? "#2a3344" : "#e2e8f0";
-  if (isIdle && placeholderMode === "message") {
+  if (isIdle && !drainedByDraft && placeholderMode === "message") {
     return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "div",
       {
@@ -34284,6 +34394,8 @@ function RandomPlayerPicker({
   const shakeKeyframe = `rppShake_${intensity}`;
   const glowKeyframe = `rppGlow_${intensity}`;
   const pulseKeyframe = `rppPulse_${intensity}`;
+  const displayRotation = visualRotationRef.current ?? rotation;
+  const displayReelY = visualReelYRef.current ?? reelY;
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
     "div",
     {
@@ -34330,13 +34442,33 @@ function RandomPlayerPicker({
           [data-rpp-anim] { animation: none !important; }
         }
       ` }),
-        mode === "reel" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+        isIdle && placeholderMode === "message" ? (
+          /* Drained draft in "message" mode — compact box in the wheel's
+             place; the winner card / stats / controls / history below stay
+             mounted so the endgame isn't a dead end. */
+          /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+            "div",
+            {
+              style: {
+                padding: "2rem 1rem",
+                textAlign: "center",
+                color: c.dim,
+                borderRadius: 12,
+                border: `1px dashed ${c.border}`
+              },
+              children: effectiveIdleCaption
+            }
+          )
+        ) : mode === "reel" ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
           ReelStage,
           {
             pool,
             winner,
             spinning,
             reelY,
+            displayY: displayReelY,
+            cssTransition: !physicsDriven,
+            tapeRef: reelTapeRef,
             reelVisibleRows,
             reelRowHeight,
             size,
@@ -34345,7 +34477,7 @@ function RandomPlayerPicker({
             dark,
             isIdle,
             placeholderMode,
-            placeholderCaption,
+            placeholderCaption: effectiveIdleCaption,
             placeholderDiscColor,
             spinDuration,
             intensityCfg,
@@ -34402,6 +34534,7 @@ function RandomPlayerPicker({
                 /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(
                   "svg",
                   {
+                    ref: wheelSvgRef,
                     width: size,
                     height: size,
                     "aria-hidden": "true",
@@ -34410,8 +34543,8 @@ function RandomPlayerPicker({
                       top: 36,
                       left: 0,
                       transformOrigin: `${cx}px ${cy}px`,
-                      transform: `rotate(${rotation}deg)`,
-                      transition: spinning ? `transform ${reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult)}ms ${intensityCfg.easing}` : "none",
+                      transform: `rotate(${displayRotation}deg)`,
+                      transition: spinning && !physicsDriven ? `transform ${reducedMotion ? 250 : Math.round(spinDuration * intensityCfg.durationMult)}ms ${intensityCfg.easing}` : "none",
                       filter: `drop-shadow(0 8px 28px ${dark ? "rgba(0,0,0,0.55)" : "rgba(0,0,0,0.15)"})`
                     },
                     children: [
@@ -34564,7 +34697,7 @@ function RandomPlayerPicker({
                       pointerEvents: "none",
                       zIndex: 3
                     },
-                    children: placeholderCaption
+                    children: effectiveIdleCaption
                   }
                 ),
                 particles.map((p) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
@@ -38738,6 +38871,33 @@ function GameTimer({
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
   }, [running, tick]);
+  (0, import_react74.useEffect)(() => {
+    if (!running || mode !== "countdown") return;
+    let timeoutId = null;
+    const disarm = () => {
+      if (timeoutId !== null) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+    const arm = () => {
+      disarm();
+      const remainingUntilDone = durationMs - elapsedRef.current;
+      if (remainingUntilDone > 0) {
+        timeoutId = setTimeout(tick, remainingUntilDone + 50);
+      }
+    };
+    const onVisibility = () => {
+      if (document.hidden) arm();
+      else disarm();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    if (document.hidden) arm();
+    return () => {
+      disarm();
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [running, mode, durationMs, tick]);
   const start = (0, import_react74.useCallback)(() => {
     if (completed && mode === "countdown") return;
     setRunning(true);
@@ -40249,8 +40409,10 @@ function TeamGenerator({
   minPlayersPerTeam = 2,
   maxPlayers = Number.POSITIVE_INFINITY,
   defaultNames = [],
+  defaultTeams,
   onNamesChange,
   onGenerate,
+  onTeamsChange,
   onTeamCountChange,
   labels,
   ariaLabel = "Team generator",
@@ -40265,12 +40427,17 @@ function TeamGenerator({
   const [names, setNames] = (0, import_react76.useState)(defaultNames);
   const [input, setInput] = (0, import_react76.useState)("");
   const [teamCount, setTeamCount] = (0, import_react76.useState)(initialCount);
-  const [teams, setTeams] = (0, import_react76.useState)(null);
+  const [teams, setTeams] = (0, import_react76.useState)(
+    defaultTeams && defaultTeams.length > 0 ? defaultTeams : null
+  );
   const inputRef = (0, import_react76.useRef)(null);
   const minNames = teamCount * minPlayersPerTeam;
   (0, import_react76.useEffect)(() => {
     onNamesChange?.(names);
   }, [names, onNamesChange]);
+  (0, import_react76.useEffect)(() => {
+    onTeamsChange?.(teams);
+  }, [teams, onTeamsChange]);
   const addName = (0, import_react76.useCallback)(() => {
     const trimmed = input.trim();
     if (!trimmed) return;