@joydle/ui 0.1.0

package/dist/screens/LoadingScreen.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Loading screen with animated progress bar
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Style injection ------------------------------------------------------
+const LOADING_CSS = `
+.joydle-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  font-family: var(--joydle-font, sans-serif);
+  color: var(--joydle-text, #fff);
+  background: var(--joydle-bg, #06060f);
+}
+
+.joydle-loading__label {
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.joydle-loading__bar-track {
+  width: min(320px, 70vw);
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  position: relative;
+}
+
+.joydle-loading__bar-fill {
+  height: 100%;
+  background: var(--joydle-primary, #00f5ff);
+  border-radius: 4px;
+  transition: width 0.3s ease-out;
+  position: relative;
+  box-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) var(--joydle-primary, #00f5ff);
+}
+
+.joydle-loading__bar-fill::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3)
+  );
+  animation: joydle-loading-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes joydle-loading-shimmer {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+.joydle-loading__percent {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = LOADING_CSS;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+/**
+ * Centred loading screen with an animated progress bar.
+ *
+ * The bar fill uses `--joydle-primary` and animates smoothly via CSS
+ * transition.  A subtle shimmer effect runs along the bar edge.
+ *
+ * ```tsx
+ * <LoadingScreen progress={0.65} label="Loading assets..." />
+ * ```
+ */
+export function LoadingScreen({ progress, label = 'Loading...', screen: _screen, }) {
+    injectStyle();
+    const containerRef = useRef(null);
+    // Clamp progress to [0, 1].
+    const clamped = Math.max(0, Math.min(1, progress));
+    const pct = Math.round(clamped * 100);
+    // GSAP entrance
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const gsap = getGsap();
+        if (!gsap)
+            return;
+        const tl = gsap.timeline();
+        tl.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.35, ease: 'power2.out' });
+        return () => {
+            tl.kill();
+        };
+    }, []);
+    return (_jsxs("div", { class: "joydle-loading", ref: containerRef, children: [_jsx("p", { class: "joydle-loading__label", children: label }), _jsx("div", { class: "joydle-loading__bar-track", children: _jsx("div", { class: "joydle-loading__bar-fill", style: { width: `${pct}%` } }) }), _jsxs("p", { class: "joydle-loading__percent", children: [pct, "%"] })] }));
+}
+//# sourceMappingURL=LoadingScreen.js.map

package/dist/screens/LoadingScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingScreen.js","sourceRoot":"","sources":["../../src/screens/LoadingScreen.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,0DAA0D;AAC1D,8EAA8E;AAE9E,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGjD,8EAA8E;AAE9E,SAAS,OAAO;IACd,IAAI,CAAC;QACH,OAAQ,UAAkB,CAAC,IAAI,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC;IAC7D,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;AAED,8EAA8E;AAE9E,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEnB,CAAC;AAEF,IAAI,aAAa,GAAG,KAAK,CAAC;AAC1B,SAAS,WAAW;IAClB,IAAI,aAAa;QAAE,OAAO;IAC1B,aAAa,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,EAAE,CAAC,WAAW,GAAG,WAAW,CAAC;IAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC;AAaD,8EAA8E;AAE9E;;;;;;;;;GASG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GAAG,YAAY,EACpB,MAAM,EAAE,OAAO,GACI;IACnB,WAAW,EAAE,CAAC;IAEd,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,4BAA4B;IAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC;IAEtC,gBAAgB;IAChB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,EAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC3B,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;QAElF,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,IAAI,EAAE,CAAC;QACZ,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,YAAY,aAC3C,YAAG,KAAK,EAAC,uBAAuB,YAAE,KAAK,GAAK,EAE5C,cAAK,KAAK,EAAC,2BAA2B,YACpC,cACE,KAAK,EAAC,0BAA0B,EAChC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,GAC3B,GACE,EAEN,aAAG,KAAK,EAAC,yBAAyB,aAAE,GAAG,SAAM,IACzC,CACP,CAAC;AACJ,CAAC"}

package/dist/screens/LobbyScreen.d.ts

@@ -0,0 +1,39 @@
+import type { JSX } from 'preact';
+export interface LobbyPlayer {
+    id: string;
+    name: string;
+    ready: boolean;
+}
+export interface LobbyScreenProps {
+    /** List of players in the lobby. */
+    players: LobbyPlayer[];
+    /** Match code to display for others to join. */
+    matchCode?: string;
+    /** Callback when the Ready button is clicked. */
+    onReady: () => void;
+    /** Callback when the Start button is clicked (host only). */
+    onStart?: () => void;
+    /** Maximum number of players (shown in counter). */
+    maxPlayers?: number;
+    /** Screen identifier for ScreenManager matching. */
+    screen?: string;
+}
+/**
+ * Multiplayer lobby screen with a player list, ready indicators, and
+ * optional match code display.
+ *
+ * ```tsx
+ * <LobbyScreen
+ *   players={[
+ *     { id: '1', name: 'Player 1', ready: true },
+ *     { id: '2', name: 'Player 2', ready: false },
+ *   ]}
+ *   matchCode="ABC123"
+ *   onReady={() => toggleReady()}
+ *   onStart={() => startGame()}
+ *   maxPlayers={4}
+ * />
+ * ```
+ */
+export declare function LobbyScreen({ players, matchCode, onReady, onStart, maxPlayers, screen: _screen, }: LobbyScreenProps): JSX.Element;
+//# sourceMappingURL=LobbyScreen.d.ts.map

package/dist/screens/LobbyScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LobbyScreen.d.ts","sourceRoot":"","sources":["../../src/screens/LobbyScreen.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AA6NlC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,MAAM,EAAE,OAAO,GAChB,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CA0FhC"}

package/dist/screens/LobbyScreen.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Multiplayer lobby screen
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Style injection ------------------------------------------------------
+const LOBBY_CSS = `
+.joydle-lobby {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  font-family: var(--joydle-font, sans-serif);
+  color: var(--joydle-text, #fff);
+  background: var(--joydle-bg, #06060f);
+  overflow: hidden;
+}
+
+.joydle-lobby__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  z-index: 0;
+}
+
+.joydle-lobby__content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  width: min(400px, 85vw);
+}
+
+.joydle-lobby__title {
+  font-size: clamp(1.5rem, 4vw, 2.2rem);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  color: var(--joydle-primary, #00f5ff);
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-primary, #00f5ff);
+}
+
+.joydle-lobby__code-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.joydle-lobby__code-label {
+  font-size: 0.7rem;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.joydle-lobby__code {
+  font-size: 1.6rem;
+  font-weight: 900;
+  letter-spacing: 0.2em;
+  color: var(--joydle-gold, #ffd700);
+  font-family: var(--joydle-font, monospace);
+  margin: 0;
+  padding: 6px 16px;
+  background: rgba(255, 255, 255, 0.06);
+  border-radius: var(--joydle-border-radius, 4px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.joydle-lobby__player-count {
+  font-size: 0.8rem;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+.joydle-lobby__player-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.joydle-lobby__player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: var(--joydle-border-radius, 4px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  transition: background 0.15s ease;
+}
+
+.joydle-lobby__player--ready {
+  border-color: var(--joydle-success, #00ff88);
+  background: rgba(0, 255, 136, 0.06);
+}
+
+.joydle-lobby__player-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: rgba(255, 255, 255, 0.2);
+  transition: background 0.2s ease;
+}
+
+.joydle-lobby__player--ready .joydle-lobby__player-dot {
+  background: var(--joydle-success, #00ff88);
+  box-shadow: 0 0 6px 2px var(--joydle-success, #00ff88);
+}
+
+.joydle-lobby__player-name {
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: var(--joydle-text, #fff);
+  flex: 1;
+}
+
+.joydle-lobby__player-status {
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+}
+
+.joydle-lobby__player--ready .joydle-lobby__player-status {
+  color: var(--joydle-success, #00ff88);
+}
+
+.joydle-lobby__buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  margin-top: 8px;
+  width: 100%;
+}
+
+.joydle-lobby__btn {
+  padding: 12px 40px;
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: var(--joydle-font, sans-serif);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: none;
+  border-radius: var(--joydle-border-radius, 4px);
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  width: 100%;
+  max-width: 240px;
+}
+
+.joydle-lobby__btn:hover {
+  transform: scale(1.03);
+}
+
+.joydle-lobby__btn:active {
+  transform: scale(0.97);
+}
+
+.joydle-lobby__btn--ready {
+  color: var(--joydle-bg, #06060f);
+  background: var(--joydle-success, #00ff88);
+  box-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) var(--joydle-success, #00ff88);
+}
+
+.joydle-lobby__btn--ready:hover {
+  box-shadow: 0 0 12px 3px var(--joydle-success, #00ff88);
+}
+
+.joydle-lobby__btn--start {
+  color: var(--joydle-bg, #06060f);
+  background: var(--joydle-accent, #ff2d7b);
+  box-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) var(--joydle-accent, #ff2d7b);
+}
+
+.joydle-lobby__btn--start:hover {
+  box-shadow: 0 0 12px 3px var(--joydle-accent, #ff2d7b);
+}
+
+.joydle-lobby__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  transform: none;
+}
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = LOBBY_CSS;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+/**
+ * Multiplayer lobby screen with a player list, ready indicators, and
+ * optional match code display.
+ *
+ * ```tsx
+ * <LobbyScreen
+ *   players={[
+ *     { id: '1', name: 'Player 1', ready: true },
+ *     { id: '2', name: 'Player 2', ready: false },
+ *   ]}
+ *   matchCode="ABC123"
+ *   onReady={() => toggleReady()}
+ *   onStart={() => startGame()}
+ *   maxPlayers={4}
+ * />
+ * ```
+ */
+export function LobbyScreen({ players, matchCode, onReady, onStart, maxPlayers, screen: _screen, }) {
+    injectStyle();
+    const containerRef = useRef(null);
+    // GSAP entrance
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        const gsap = getGsap();
+        if (!gsap)
+            return;
+        const tl = gsap.timeline();
+        tl.fromTo(el, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.4, ease: 'power2.out' });
+        // Stagger the player rows
+        const rows = el.querySelectorAll('.joydle-lobby__player');
+        if (rows.length > 0) {
+            tl.fromTo(rows, { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.3, ease: 'power2.out', stagger: 0.06 }, 0.15);
+        }
+        return () => {
+            tl.kill();
+        };
+    }, []);
+    const allReady = players.length > 0 && players.every((p) => p.ready);
+    const countLabel = maxPlayers
+        ? `${players.length} / ${maxPlayers} players`
+        : `${players.length} player${players.length !== 1 ? 's' : ''}`;
+    return (_jsxs("div", { class: "joydle-lobby", ref: containerRef, children: [_jsx("div", { class: "joydle-lobby__backdrop" }), _jsxs("div", { class: "joydle-lobby__content", children: [_jsx("h1", { class: "joydle-lobby__title", children: "LOBBY" }), matchCode && (_jsxs("div", { class: "joydle-lobby__code-container", children: [_jsx("p", { class: "joydle-lobby__code-label", children: "Match Code" }), _jsx("p", { class: "joydle-lobby__code", children: matchCode })] })), _jsx("p", { class: "joydle-lobby__player-count", children: countLabel }), _jsx("ul", { class: "joydle-lobby__player-list", children: players.map((player) => (_jsxs("li", { class: `joydle-lobby__player${player.ready ? ' joydle-lobby__player--ready' : ''}`, children: [_jsx("span", { class: "joydle-lobby__player-dot" }), _jsx("span", { class: "joydle-lobby__player-name", children: player.name }), _jsx("span", { class: "joydle-lobby__player-status", children: player.ready ? 'READY' : 'WAITING' })] }, player.id))) }), _jsxs("div", { class: "joydle-lobby__buttons", children: [_jsx("button", { class: "joydle-lobby__btn joydle-lobby__btn--ready", onClick: onReady, type: "button", children: "READY" }), onStart && (_jsx("button", { class: "joydle-lobby__btn joydle-lobby__btn--start", onClick: onStart, disabled: !allReady, type: "button", children: "START GAME" }))] })] })] }));
+}
+//# sourceMappingURL=LobbyScreen.js.map

package/dist/screens/LobbyScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LobbyScreen.js","sourceRoot":"","sources":["../../src/screens/LobbyScreen.tsx"],"names":[],"mappings":"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"}

package/dist/screens/PauseOverlay.d.ts

@@ -0,0 +1,29 @@
+import type { JSX } from 'preact';
+export interface PauseOverlayProps {
+    /** Callback when the resume button is clicked. */
+    onResume: () => void;
+    /** Whether to show the restart button. */
+    showRestart?: boolean;
+    /** Callback when the restart button is clicked. */
+    onRestart?: () => void;
+    /** Screen identifier for ScreenManager matching. */
+    screen?: string;
+}
+/**
+ * Semi-transparent pause overlay with blur backdrop.
+ *
+ * Auto-dismisses on the Escape key.  Renders a Resume button and an
+ * optional Restart button.
+ *
+ * ```tsx
+ * {state.screen === 'paused' && (
+ *   <PauseOverlay
+ *     onResume={() => setState({ screen: 'playing' })}
+ *     showRestart
+ *     onRestart={() => setState({ screen: 'title' })}
+ *   />
+ * )}
+ * ```
+ */
+export declare function PauseOverlay({ onResume, showRestart, onRestart, screen: _screen, }: PauseOverlayProps): JSX.Element;
+//# sourceMappingURL=PauseOverlay.d.ts.map

package/dist/screens/PauseOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseOverlay.d.ts","sourceRoot":"","sources":["../../src/screens/PauseOverlay.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AA8GlC,MAAM,WAAW,iBAAiB;IAChC,kDAAkD;IAClD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAmB,EACnB,SAAS,EACT,MAAM,EAAE,OAAO,GAChB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA+DjC"}

package/dist/screens/PauseOverlay.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Pause overlay with blur backdrop
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Style injection ------------------------------------------------------
+const PAUSE_CSS = `
+.joydle-pause {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  font-family: var(--joydle-font, sans-serif);
+  color: var(--joydle-text, #fff);
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.joydle-pause__title {
+  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--joydle-text, #fff);
+  text-transform: uppercase;
+  margin: 0;
+  text-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-primary, #00f5ff);
+}
+
+.joydle-pause__buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.joydle-pause__btn {
+  padding: 12px 40px;
+  font-size: 1rem;
+  font-weight: 700;
+  font-family: var(--joydle-font, sans-serif);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  border: none;
+  border-radius: var(--joydle-border-radius, 4px);
+  cursor: pointer;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  min-width: 180px;
+}
+
+.joydle-pause__btn:hover {
+  transform: scale(1.05);
+}
+
+.joydle-pause__btn:active {
+  transform: scale(0.97);
+}
+
+.joydle-pause__btn--resume {
+  color: var(--joydle-bg, #06060f);
+  background: var(--joydle-primary, #00f5ff);
+  box-shadow: 0 0 var(--joydle-glow-blur, 0) var(--joydle-glow-spread, 0) var(--joydle-primary, #00f5ff);
+}
+
+.joydle-pause__btn--resume:hover {
+  box-shadow: 0 0 16px 4px var(--joydle-primary, #00f5ff);
+}
+
+.joydle-pause__btn--restart {
+  color: var(--joydle-text, #fff);
+  background: transparent;
+  border: 2px solid var(--joydle-text-dim, rgba(255,255,255,0.5));
+}
+
+.joydle-pause__btn--restart:hover {
+  border-color: var(--joydle-text, #fff);
+}
+
+.joydle-pause__hint {
+  margin-top: 8px;
+  font-size: 0.7rem;
+  color: var(--joydle-text-dim, rgba(255,255,255,0.5));
+  letter-spacing: 0.06em;
+}
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = PAUSE_CSS;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+/**
+ * Semi-transparent pause overlay with blur backdrop.
+ *
+ * Auto-dismisses on the Escape key.  Renders a Resume button and an
+ * optional Restart button.
+ *
+ * ```tsx
+ * {state.screen === 'paused' && (
+ *   <PauseOverlay
+ *     onResume={() => setState({ screen: 'playing' })}
+ *     showRestart
+ *     onRestart={() => setState({ screen: 'title' })}
+ *   />
+ * )}
+ * ```
+ */
+export function PauseOverlay({ onResume, showRestart = false, onRestart, screen: _screen, }) {
+    injectStyle();
+    const overlayRef = useRef(null);
+    // GSAP entrance
+    useEffect(() => {
+        const el = overlayRef.current;
+        if (!el)
+            return;
+        const gsap = getGsap();
+        if (!gsap)
+            return;
+        const tl = gsap.timeline();
+        tl.fromTo(el, { opacity: 0 }, { opacity: 1, duration: 0.25, ease: 'power2.out' });
+        return () => {
+            tl.kill();
+        };
+    }, []);
+    // ESC key handler
+    useEffect(() => {
+        const handleKey = (e) => {
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                onResume();
+            }
+        };
+        document.addEventListener('keydown', handleKey);
+        return () => {
+            document.removeEventListener('keydown', handleKey);
+        };
+    }, [onResume]);
+    return (_jsxs("div", { class: "joydle-pause", ref: overlayRef, children: [_jsx("h1", { class: "joydle-pause__title", children: "PAUSED" }), _jsxs("div", { class: "joydle-pause__buttons", children: [_jsx("button", { class: "joydle-pause__btn joydle-pause__btn--resume", onClick: onResume, type: "button", children: "RESUME" }), showRestart && onRestart && (_jsx("button", { class: "joydle-pause__btn joydle-pause__btn--restart", onClick: onRestart, type: "button", children: "RESTART" }))] }), _jsx("p", { class: "joydle-pause__hint", children: "Press ESC to resume" })] }));
+}
+//# sourceMappingURL=PauseOverlay.js.map

package/dist/screens/PauseOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PauseOverlay.js","sourceRoot":"","sources":["../../src/screens/PauseOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/screens/ScreenManager.d.ts

@@ -0,0 +1,26 @@
+import type { ComponentChildren } from 'preact';
+export interface ScreenManagerProps {
+    /** The currently active screen identifier. */
+    screen: string;
+    /** Transition preset name (default: `"fade"`). */
+    transition?: 'fade' | 'slide' | 'zoom' | 'none';
+    /** Transition duration override in seconds. */
+    duration?: number;
+    /** Screen components — each should have a `screen` prop. */
+    children?: ComponentChildren;
+}
+/**
+ * Renders only the child whose `screen` prop matches the current `screen`
+ * value.  Wraps the visible screen in a `<ScreenTransition>` for animated
+ * enter/exit effects.
+ *
+ * ```tsx
+ * <ScreenManager screen={state.screen} transition="fade">
+ *   <TitleScreen screen="title" title="My Game" onPlay={start} />
+ *   <GameOverScreen screen="gameover" score={42} onRetry={restart} />
+ *   <PauseOverlay screen="paused" onResume={resume} />
+ * </ScreenManager>
+ * ```
+ */
+export declare function ScreenManager({ screen, transition, duration, children, }: ScreenManagerProps): import("preact").JSX.Element | null;
+//# sourceMappingURL=ScreenManager.d.ts.map

package/dist/screens/ScreenManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenManager.d.ts","sourceRoot":"","sources":["../../src/screens/ScreenManager.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAS,MAAM,QAAQ,CAAC;AA4BvD,MAAM,WAAW,kBAAkB;IACjC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IAChD,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAID;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,UAAmB,EACnB,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,uCAgCpB"}