@joydle/ui 0.1.0

package/dist/hud/HUD.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---- Styles ---------------------------------------------------------------
+const HUD_STYLE = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 10,
+    pointerEvents: 'none',
+    display: 'grid',
+    gridTemplateColumns: '1fr auto 1fr',
+    gridTemplateRows: 'auto 1fr auto',
+    padding: 12,
+    boxSizing: 'border-box',
+    fontFamily: 'var(--joydle-font, sans-serif)',
+};
+const LEFT_STYLE = {
+    gridColumn: '1',
+    gridRow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 8,
+};
+const CENTER_STYLE = {
+    gridColumn: '2',
+    gridRow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 8,
+};
+const RIGHT_STYLE = {
+    gridColumn: '3',
+    gridRow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+    gap: 8,
+};
+// ---- Sub-components -------------------------------------------------------
+const Left = ({ children }) => (_jsx("div", { class: "joydle-hud-left", style: LEFT_STYLE, children: children }));
+const Center = ({ children }) => (_jsx("div", { class: "joydle-hud-center", style: CENTER_STYLE, children: children }));
+const Right = ({ children }) => (_jsx("div", { class: "joydle-hud-right", style: RIGHT_STYLE, children: children }));
+/**
+ * HUD layout container with Left, Center, Right slot sub-components.
+ *
+ * Renders as an absolute-positioned overlay (z-index: 10) with pointer-events
+ * disabled.  Individual HUD widgets opt in to pointer-events as needed.
+ *
+ * ```tsx
+ * <HUD>
+ *   <HUD.Left>
+ *     <Lives current={3} max={5} />
+ *   </HUD.Left>
+ *   <HUD.Center>
+ *     <Score value={12500} />
+ *   </HUD.Center>
+ *   <HUD.Right>
+ *     <Timer seconds={90} />
+ *   </HUD.Right>
+ * </HUD>
+ * ```
+ */
+const HUDBase = ({ children }) => (_jsx("div", { class: "joydle-hud", style: HUD_STYLE, children: children }));
+export const HUD = Object.assign(HUDBase, {
+    Left,
+    Center,
+    Right,
+});
+//# sourceMappingURL=HUD.js.map

package/dist/hud/HUD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HUD.js","sourceRoot":"","sources":["../../src/hud/HUD.tsx"],"names":[],"mappings":";AAYA,8EAA8E;AAE9E,MAAM,SAAS,GAAoC;IACjD,QAAQ,EAAE,UAAU;IACpB,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,EAAE;IACV,aAAa,EAAE,MAAM;IACrB,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,cAAc;IACnC,gBAAgB,EAAE,eAAe;IACjC,OAAO,EAAE,EAAE;IACX,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,gCAAgC;CAC7C,CAAC;AAEF,MAAM,UAAU,GAAoC;IAClD,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,YAAY;IACxB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,YAAY,GAAoC;IACpD,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,QAAQ;IACpB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,MAAM,WAAW,GAAoC;IACnD,UAAU,EAAE,GAAG;IACf,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,UAAU,EAAE,UAAU;IACtB,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,8EAA8E;AAE9E,MAAM,IAAI,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC3D,cAAK,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,UAAU,YAC3C,QAAQ,GACL,CACP,CAAC;AAEF,MAAM,MAAM,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7D,cAAK,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,YAAY,YAC/C,QAAQ,GACL,CACP,CAAC;AAEF,MAAM,KAAK,GAAiC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC5D,cAAK,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,WAAW,YAC7C,QAAQ,GACL,CACP,CAAC;AAgBF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,OAAO,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7D,cAAK,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,SAAS,YACrC,QAAQ,GACL,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,GAAG,GAAiB,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE;IACtD,IAAI;IACJ,MAAM;IACN,KAAK;CACN,CAAC,CAAC"}

package/dist/hud/Lives.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from 'preact';
+export type LivesIcon = 'heart' | 'shield' | 'diamond' | 'star';
+export interface LivesProps {
+    /** Number of lives remaining. */
+    current: number;
+    /** Maximum number of lives. */
+    max: number;
+    /** Icon character to display (default: `"heart"`). */
+    icon?: LivesIcon;
+}
+/**
+ * Renders a row of life icons.  Filled icons represent remaining lives,
+ * faded icons represent lost ones.  A GSAP elastic shake plays on the
+ * container when lives decrease.
+ *
+ * ```tsx
+ * <Lives current={3} max={5} icon="heart" />
+ * ```
+ */
+export declare function Lives({ current, max, icon, }: LivesProps): JSX.Element;
+//# sourceMappingURL=Lives.d.ts.map

package/dist/hud/Lives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lives.d.ts","sourceRoot":"","sources":["../../src/hud/Lives.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAclC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhE,MAAM,WAAW,UAAU;IACzB,iCAAiC;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,GAAG,EACH,IAAc,GACf,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAgE1B"}

package/dist/hud/Lives.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Icon-based lives display with GSAP shake on decrease
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Icon map -------------------------------------------------------------
+const ICON_MAP = {
+    heart: '\u2665', // black heart suit
+    shield: '\uD83D\uDEE1', // shield emoji
+    diamond: '\u25C6', // black diamond
+    star: '\u2605', // black star
+};
+// ---- Styles ---------------------------------------------------------------
+const ROW_STYLE = {
+    display: 'flex',
+    gap: 4,
+    lineHeight: 1,
+    userSelect: 'none',
+};
+const ICON_STYLE_FILLED = {
+    color: 'var(--joydle-danger, #ff4444)',
+    fontSize: '1.2em',
+    transition: 'opacity 0.15s',
+};
+const ICON_STYLE_EMPTY = {
+    ...ICON_STYLE_FILLED,
+    opacity: 0.3,
+};
+// ---- Component ------------------------------------------------------------
+/**
+ * Renders a row of life icons.  Filled icons represent remaining lives,
+ * faded icons represent lost ones.  A GSAP elastic shake plays on the
+ * container when lives decrease.
+ *
+ * ```tsx
+ * <Lives current={3} max={5} icon="heart" />
+ * ```
+ */
+export function Lives({ current, max, icon = 'heart', }) {
+    const rowRef = useRef(null);
+    const prevRef = useRef(current);
+    const tweenRef = useRef(null);
+    useEffect(() => {
+        const el = rowRef.current;
+        if (!el)
+            return;
+        // Only animate on decrease.
+        if (current < prevRef.current) {
+            const gsap = getGsap();
+            if (gsap) {
+                if (tweenRef.current) {
+                    tweenRef.current.kill();
+                }
+                tweenRef.current = gsap.fromTo(el, { x: -6 }, {
+                    x: 0,
+                    duration: 0.3,
+                    ease: 'elastic.out(1, 0.3)',
+                    onComplete() {
+                        tweenRef.current = null;
+                    },
+                });
+            }
+        }
+        prevRef.current = current;
+    }, [current]);
+    // Cleanup on unmount.
+    useEffect(() => {
+        return () => {
+            if (tweenRef.current) {
+                tweenRef.current.kill();
+                tweenRef.current = null;
+            }
+        };
+    }, []);
+    const glyph = ICON_MAP[icon];
+    const icons = [];
+    for (let i = 0; i < max; i++) {
+        const filled = i < current;
+        icons.push(_jsx("span", { style: filled ? ICON_STYLE_FILLED : ICON_STYLE_EMPTY, children: glyph }, i));
+    }
+    return (_jsx("div", { ref: rowRef, class: "joydle-lives", style: ROW_STYLE, children: icons }));
+}
+//# sourceMappingURL=Lives.js.map

package/dist/hud/Lives.js.map

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

package/dist/hud/Meter.d.ts

@@ -0,0 +1,24 @@
+import type { JSX } from 'preact';
+export interface MeterProps {
+    /** Current value. */
+    value: number;
+    /** Maximum value. */
+    max: number;
+    /** CSS custom property name for the fill colour (default: `"--joydle-primary"`). */
+    color?: string;
+    /** Optional label rendered above the bar. */
+    label?: string;
+    /** Bar width in pixels (default: `60`). */
+    width?: number;
+}
+/**
+ * A horizontal fill-bar meter.  The fill width is animated with GSAP on
+ * every value change.  When value drops below 20% of max a brief white
+ * flash overlay fires as a warning.
+ *
+ * ```tsx
+ * <Meter value={hp} max={100} label="HP" color="--joydle-danger" />
+ * ```
+ */
+export declare function Meter({ value, max, color, label, width, }: MeterProps): JSX.Element;
+//# sourceMappingURL=Meter.d.ts.map

package/dist/hud/Meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Meter.d.ts","sourceRoot":"","sources":["../../src/hud/Meter.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAclC,MAAM,WAAW,UAAU;IACzB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,GAAG,EACH,KAA0B,EAC1B,KAAK,EACL,KAAU,GACX,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA0I1B"}

package/dist/hud/Meter.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Fill bar meter with GSAP tween and flash on deplete
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Component ------------------------------------------------------------
+/**
+ * A horizontal fill-bar meter.  The fill width is animated with GSAP on
+ * every value change.  When value drops below 20% of max a brief white
+ * flash overlay fires as a warning.
+ *
+ * ```tsx
+ * <Meter value={hp} max={100} label="HP" color="--joydle-danger" />
+ * ```
+ */
+export function Meter({ value, max, color = '--joydle-primary', label, width = 60, }) {
+    const fillRef = useRef(null);
+    const flashRef = useRef(null);
+    const prevRef = useRef(value);
+    const fillTweenRef = useRef(null);
+    const flashTweenRef = useRef(null);
+    const pct = max > 0 ? Math.max(0, Math.min(100, (value / max) * 100)) : 0;
+    const prevPct = max > 0 ? Math.max(0, Math.min(100, (prevRef.current / max) * 100)) : 0;
+    useEffect(() => {
+        const fillEl = fillRef.current;
+        if (!fillEl)
+            return;
+        const gsap = getGsap();
+        if (!gsap) {
+            // Fallback: set width directly without animation.
+            fillEl.style.width = `${pct}%`;
+            prevRef.current = value;
+            return;
+        }
+        // Kill any in-progress fill tween.
+        if (fillTweenRef.current) {
+            fillTweenRef.current.kill();
+        }
+        fillTweenRef.current = gsap.fromTo(fillEl, { width: `${prevPct}%` }, {
+            width: `${pct}%`,
+            duration: 0.3,
+            ease: 'power2.out',
+            onComplete() {
+                fillTweenRef.current = null;
+            },
+        });
+        // Flash when dropping below 20%.
+        const flashEl = flashRef.current;
+        if (flashEl && value < prevRef.current && pct < 20 && prevPct >= 20) {
+            if (flashTweenRef.current) {
+                flashTweenRef.current.kill();
+            }
+            flashTweenRef.current = gsap.fromTo(flashEl, { opacity: 0.6 }, {
+                opacity: 0,
+                duration: 0.25,
+                ease: 'power2.out',
+                onComplete() {
+                    flashTweenRef.current = null;
+                },
+            });
+        }
+        prevRef.current = value;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value, max]);
+    // Cleanup on unmount.
+    useEffect(() => {
+        return () => {
+            if (fillTweenRef.current) {
+                fillTweenRef.current.kill();
+                fillTweenRef.current = null;
+            }
+            if (flashTweenRef.current) {
+                flashTweenRef.current.kill();
+                flashTweenRef.current = null;
+            }
+        };
+    }, []);
+    // ---- Styles (inline) ----------------------------------------------------
+    const containerStyle = {
+        display: 'inline-flex',
+        flexDirection: 'column',
+        gap: 2,
+        userSelect: 'none',
+    };
+    const labelStyle = {
+        fontSize: '0.6em',
+        color: 'var(--joydle-text-dim, rgba(255,255,255,0.5))',
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+    };
+    const outerStyle = {
+        position: 'relative',
+        width,
+        height: 8,
+        borderRadius: 4,
+        border: '1px solid rgba(255,255,255,0.3)',
+        overflow: 'hidden',
+        background: 'rgba(255,255,255,0.1)',
+        boxSizing: 'border-box',
+    };
+    const fillStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: `${pct}%`,
+        background: `var(${color}, #00f5ff)`,
+        borderRadius: 3,
+        transition: 'none', // GSAP handles the transition
+    };
+    const flashStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        background: '#ffffff',
+        opacity: 0,
+        borderRadius: 3,
+        pointerEvents: 'none',
+    };
+    return (_jsxs("div", { class: "joydle-meter", style: containerStyle, children: [label && _jsx("span", { style: labelStyle, children: label }), _jsxs("div", { style: outerStyle, children: [_jsx("div", { ref: fillRef, style: fillStyle }), _jsx("div", { ref: flashRef, style: flashStyle })] })] }));
+}
+//# sourceMappingURL=Meter.js.map

package/dist/hud/Meter.js.map

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

package/dist/hud/MiniMap.d.ts

@@ -0,0 +1,41 @@
+import type { JSX } from 'preact';
+export interface MiniMapEntity {
+    x: number;
+    y: number;
+    color: string;
+}
+export interface MiniMapBounds {
+    width: number;
+    height: number;
+}
+export interface MiniMapProps {
+    /** Array of entity positions and colours to render as dots. */
+    entities: MiniMapEntity[];
+    /** World bounds used to scale entity positions to minimap space. */
+    bounds: MiniMapBounds;
+    /** Current player position (rendered as a larger, brighter dot). */
+    playerPos: {
+        x: number;
+        y: number;
+    };
+    /** Minimap size in pixels (default: `100`). Both width and height. */
+    size?: number;
+}
+/**
+ * Small canvas-based minimap that renders entity dots proportionally scaled
+ * within world bounds.  The player dot is drawn larger and brighter.
+ *
+ * The component has `pointer-events: auto` so it can receive interactions
+ * (e.g. click-to-ping in the future).
+ *
+ * ```tsx
+ * <MiniMap
+ *   entities={[{ x: 100, y: 200, color: '#ff0000' }]}
+ *   bounds={{ width: 1000, height: 1000 }}
+ *   playerPos={{ x: 500, y: 500 }}
+ *   size={120}
+ * />
+ * ```
+ */
+export declare function MiniMap({ entities, bounds, playerPos, size, }: MiniMapProps): JSX.Element;
+//# sourceMappingURL=MiniMap.d.ts.map

package/dist/hud/MiniMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniMap.d.ts","sourceRoot":"","sources":["../../src/hud/MiniMap.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAIlC,MAAM,WAAW,aAAa;IAC5B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,+DAA+D;IAC/D,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,oEAAoE;IACpE,MAAM,EAAE,aAAa,CAAC;IACtB,oEAAoE;IACpE,SAAS,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAYD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,IAAU,GACX,EAAE,YAAY,GAAG,GAAG,CAAC,OAAO,CA2F5B"}

package/dist/hud/MiniMap.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Mini-map canvas overlay with entity dots
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- Constants ------------------------------------------------------------
+const ENTITY_RADIUS = 2;
+const PLAYER_RADIUS = 3.5;
+const BG_COLOR = 'rgba(0, 0, 0, 0.55)';
+const BORDER_COLOR = 'rgba(255, 255, 255, 0.25)';
+const PLAYER_COLOR = '#ffffff';
+// ---- Component ------------------------------------------------------------
+/**
+ * Small canvas-based minimap that renders entity dots proportionally scaled
+ * within world bounds.  The player dot is drawn larger and brighter.
+ *
+ * The component has `pointer-events: auto` so it can receive interactions
+ * (e.g. click-to-ping in the future).
+ *
+ * ```tsx
+ * <MiniMap
+ *   entities={[{ x: 100, y: 200, color: '#ff0000' }]}
+ *   bounds={{ width: 1000, height: 1000 }}
+ *   playerPos={{ x: 500, y: 500 }}
+ *   size={120}
+ * />
+ * ```
+ */
+export function MiniMap({ entities, bounds, playerPos, size = 100, }) {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const dpr = window.devicePixelRatio || 1;
+        const cssSize = size;
+        const pxSize = Math.round(cssSize * dpr);
+        // Resize backing store if needed.
+        if (canvas.width !== pxSize || canvas.height !== pxSize) {
+            canvas.width = pxSize;
+            canvas.height = pxSize;
+        }
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        // Background.
+        ctx.clearRect(0, 0, cssSize, cssSize);
+        ctx.fillStyle = BG_COLOR;
+        ctx.beginPath();
+        ctx.roundRect(0, 0, cssSize, cssSize, 4);
+        ctx.fill();
+        // Border.
+        ctx.strokeStyle = BORDER_COLOR;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(0.5, 0.5, cssSize - 1, cssSize - 1, 4);
+        ctx.stroke();
+        // Helper: map world coords to minimap coords with small padding.
+        const pad = 4;
+        const mapW = cssSize - pad * 2;
+        const mapH = cssSize - pad * 2;
+        const scaleX = bounds.width > 0 ? mapW / bounds.width : 1;
+        const scaleY = bounds.height > 0 ? mapH / bounds.height : 1;
+        const toMapX = (wx) => pad + wx * scaleX;
+        const toMapY = (wy) => pad + wy * scaleY;
+        // Draw entity dots.
+        for (let i = 0; i < entities.length; i++) {
+            const e = entities[i];
+            const mx = toMapX(e.x);
+            const my = toMapY(e.y);
+            ctx.fillStyle = e.color;
+            ctx.beginPath();
+            ctx.arc(mx, my, ENTITY_RADIUS, 0, Math.PI * 2);
+            ctx.fill();
+        }
+        // Draw player dot (on top).
+        const px = toMapX(playerPos.x);
+        const py = toMapY(playerPos.y);
+        ctx.fillStyle = PLAYER_COLOR;
+        ctx.shadowColor = PLAYER_COLOR;
+        ctx.shadowBlur = 4;
+        ctx.beginPath();
+        ctx.arc(px, py, PLAYER_RADIUS, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+    }, [entities, bounds, playerPos, size]);
+    const containerStyle = {
+        width: size,
+        height: size,
+        pointerEvents: 'auto',
+        borderRadius: 4,
+        overflow: 'hidden',
+        flexShrink: 0,
+    };
+    const canvasStyle = {
+        width: size,
+        height: size,
+        display: 'block',
+    };
+    return (_jsx("div", { class: "joydle-minimap", style: containerStyle, children: _jsx("canvas", { ref: canvasRef, style: canvasStyle }) }));
+}
+//# sourceMappingURL=MiniMap.js.map

package/dist/hud/MiniMap.js.map

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

package/dist/hud/Score.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'preact';
+export interface ScoreProps {
+    /** Current score value. */
+    value: number;
+}
+/**
+ * Displays a formatted numeric score with a GSAP scale-pop animation
+ * whenever the value changes.
+ *
+ * ```tsx
+ * <Score value={12500} />
+ * ```
+ */
+export declare function Score({ value }: ScoreProps): JSX.Element;
+//# sourceMappingURL=Score.d.ts.map

package/dist/hud/Score.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Score.d.ts","sourceRoot":"","sources":["../../src/hud/Score.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAclC,MAAM,WAAW,UAAU;IACzB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;CACf;AAmBD;;;;;;;GAOG;AACH,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAkDxD"}

package/dist/hud/Score.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Score display with GSAP scale-pop on change
+// ---------------------------------------------------------------------------
+import { useRef, useEffect } from 'preact/hooks';
+// ---- GSAP helper ----------------------------------------------------------
+function getGsap() {
+    try {
+        return globalThis.gsap ?? require('gsap').default;
+    }
+    catch {
+        return null;
+    }
+}
+// ---- Formatter ------------------------------------------------------------
+const formatter = new Intl.NumberFormat('en-US');
+// ---- Styles ---------------------------------------------------------------
+const SCORE_STYLE = {
+    color: 'var(--joydle-gold, #ffd700)',
+    fontWeight: 'bold',
+    fontSize: '1.5em',
+    lineHeight: 1,
+    userSelect: 'none',
+    whiteSpace: 'nowrap',
+};
+// ---- Component ------------------------------------------------------------
+/**
+ * Displays a formatted numeric score with a GSAP scale-pop animation
+ * whenever the value changes.
+ *
+ * ```tsx
+ * <Score value={12500} />
+ * ```
+ */
+export function Score({ value }) {
+    const elRef = useRef(null);
+    const prevRef = useRef(value);
+    const tweenRef = useRef(null);
+    useEffect(() => {
+        const el = elRef.current;
+        if (!el)
+            return;
+        // Only animate when value actually changes.
+        if (prevRef.current === value)
+            return;
+        prevRef.current = value;
+        const gsap = getGsap();
+        if (!gsap)
+            return;
+        // Kill any in-progress tween before starting a new one.
+        if (tweenRef.current) {
+            tweenRef.current.kill();
+        }
+        tweenRef.current = gsap.fromTo(el, { scale: 1.3 }, {
+            scale: 1,
+            duration: 0.15,
+            ease: 'back.out(1.7)',
+            onComplete() {
+                tweenRef.current = null;
+            },
+        });
+    }, [value]);
+    // Cleanup on unmount.
+    useEffect(() => {
+        return () => {
+            if (tweenRef.current) {
+                tweenRef.current.kill();
+                tweenRef.current = null;
+            }
+        };
+    }, []);
+    return (_jsx("span", { ref: elRef, class: "joydle-score", style: SCORE_STYLE, children: formatter.format(value) }));
+}
+//# sourceMappingURL=Score.js.map

package/dist/hud/Score.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Score.js","sourceRoot":"","sources":["../../src/hud/Score.tsx"],"names":[],"mappings":";AAAA,8EAA8E;AAC9E,4DAA4D;AAC5D,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;AASD,8EAA8E;AAE9E,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;AAEjD,8EAA8E;AAE9E,MAAM,WAAW,GAAoC;IACnD,KAAK,EAAE,6BAA6B;IACpC,UAAU,EAAE,MAAM;IAClB,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,CAAC;IACb,UAAU,EAAE,MAAM;IAClB,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,8EAA8E;AAE9E;;;;;;;GAOG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAc;IACzC,MAAM,KAAK,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,MAAM,CAAS,KAAK,CAAC,CAAC;IACtC,MAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,KAAK,CAAC,OAAO,CAAC;QACzB,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,4CAA4C;QAC5C,IAAI,OAAO,CAAC,OAAO,KAAK,KAAK;YAAE,OAAO;QACtC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QAExB,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,wDAAwD;QACxD,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC;QAED,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAC5B,EAAE,EACF,EAAE,KAAK,EAAE,GAAG,EAAE,EACd;YACE,KAAK,EAAE,CAAC;YACR,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,eAAe;YACrB,UAAU;gBACR,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,CAAC;SACF,CACF,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,sBAAsB;IACtB,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACxB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAM,GAAG,EAAE,KAAK,EAAE,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,WAAW,YACtD,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,GACnB,CACR,CAAC;AACJ,CAAC"}

package/dist/hud/Timer.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from 'preact';
+export type TimerFormat = 'm:ss' | 'mm:ss' | 's';
+export interface TimerProps {
+    /** Time in seconds. */
+    seconds: number;
+    /** Display format (default: `"m:ss"`). */
+    format?: TimerFormat;
+    /** Seconds threshold below which warning pulse activates. */
+    warning?: number;
+}
+/**
+ * Displays formatted time.  When `seconds` drops below the `warning`
+ * threshold a repeating GSAP pulse tween animates opacity and switches
+ * the colour to `--joydle-danger`.
+ *
+ * ```tsx
+ * <Timer seconds={timeLeft} warning={10} />
+ * ```
+ */
+export declare function Timer({ seconds, format, warning, }: TimerProps): JSX.Element;
+//# sourceMappingURL=Timer.d.ts.map

package/dist/hud/Timer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.d.ts","sourceRoot":"","sources":["../../src/hud/Timer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAclC,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,GAAG,CAAC;AAEjD,MAAM,WAAW,UAAU;IACzB,uBAAuB;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsCD;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAO,EACP,MAAe,EACf,OAAO,GACR,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAiE1B"}