@joydle/ui 0.1.0

package/dist/controls/ActionButton.d.ts

@@ -0,0 +1,18 @@
+import type { JSX } from 'preact';
+export type ActionButtonSize = 'small' | 'medium' | 'large';
+export interface ActionButtonProps {
+    position: 'bottom-left' | 'bottom-right' | 'fullscreen';
+    label: string;
+    action?: string;
+    size?: ActionButtonSize;
+    opacity?: number;
+    /**
+     * When rendered inside an ActionButtonGroup, positioning is managed by the
+     * parent.  Setting `_managed` suppresses fixed positioning and the media
+     * query class so the group can handle layout.
+     * @internal
+     */
+    _managed?: boolean;
+}
+export declare function ActionButton({ position, label, action, size, opacity, _managed, }: ActionButtonProps): JSX.Element;
+//# sourceMappingURL=ActionButton.d.ts.map

package/dist/controls/ActionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.d.ts","sourceRoot":"","sources":["../../src/controls/ActionButton.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKlC,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6BD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,KAAK,EACL,MAAiB,EACjB,IAAe,EACf,OAAa,EACb,QAAgB,GACjB,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CA8GjC"}

package/dist/controls/ActionButton.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Single action button (touch)
+// ---------------------------------------------------------------------------
+import { useContext, useRef, useCallback } from 'preact/hooks';
+import { GameContext } from '../core/index.js';
+// ---- Size map -------------------------------------------------------------
+const SIZE_MAP = {
+    small: 48,
+    medium: 64,
+    large: 80,
+};
+// ---- Helpers --------------------------------------------------------------
+/** CSS to show only on touch devices. */
+const TOUCH_ONLY = `
+  .joydle-action-btn { display: none; }
+  @media (pointer: coarse) { .joydle-action-btn { display: flex; } }
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = TOUCH_ONLY;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+export function ActionButton({ position, label, action = 'action', size = 'medium', opacity = 0.6, _managed = false, }) {
+    const ctx = useContext(GameContext);
+    const inputManager = ctx?.inputManager ?? null;
+    const pressedRef = useRef(false);
+    injectStyle();
+    const px = SIZE_MAP[size];
+    const handleTouchStart = useCallback((e) => {
+        e.preventDefault();
+        pressedRef.current = true;
+        if (inputManager)
+            inputManager.setAction(action, true);
+        // Visual feedback via the element itself.
+        const el = e.currentTarget;
+        if (el)
+            el.style.transform = 'scale(0.9)';
+    }, [inputManager, action]);
+    const handleTouchEnd = useCallback((e) => {
+        e.preventDefault();
+        pressedRef.current = false;
+        if (inputManager)
+            inputManager.setAction(action, false);
+        const el = e.currentTarget;
+        if (el)
+            el.style.transform = 'scale(1)';
+    }, [inputManager, action]);
+    // --- Fullscreen mode: invisible overlay covering the entire screen --------
+    if (position === 'fullscreen') {
+        const fullStyle = {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: 999,
+            pointerEvents: 'auto',
+            touchAction: 'none',
+            background: 'transparent',
+            // Invisible but touchable.
+            opacity: 0,
+        };
+        return (_jsx("div", { class: "joydle-action-btn", style: fullStyle, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd }));
+    }
+    // --- Standard circular button ---------------------------------------------
+    const isLeft = position === 'bottom-left';
+    const baseStyle = {
+        width: px,
+        height: px,
+        borderRadius: '50%',
+        background: 'rgba(255,255,255,0.25)',
+        border: '2px solid rgba(255,255,255,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        pointerEvents: 'auto',
+        touchAction: 'none',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        transition: 'transform 0.08s ease',
+        color: 'white',
+        fontSize: Math.round(px * 0.3),
+        fontWeight: 700,
+        lineHeight: 1,
+        boxSizing: 'border-box',
+    };
+    // When managed by a group, skip fixed positioning.
+    if (!_managed) {
+        Object.assign(baseStyle, {
+            position: 'fixed',
+            bottom: 24,
+            [isLeft ? 'left' : 'right']: 24,
+            opacity,
+            zIndex: 1000,
+        });
+    }
+    else {
+        baseStyle.opacity = opacity;
+    }
+    return (_jsx("div", { class: _managed ? undefined : 'joydle-action-btn', style: baseStyle, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: label }));
+}
+//# sourceMappingURL=ActionButton.js.map

package/dist/controls/ActionButton.js.map

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

package/dist/controls/ActionButtonGroup.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'preact';
+import { type ActionButtonSize } from './ActionButton.js';
+export interface ActionButtonConfig {
+    label: string;
+    action: string;
+    size?: ActionButtonSize;
+}
+export interface ActionButtonGroupProps {
+    position: 'bottom-left' | 'bottom-right';
+    buttons: ActionButtonConfig[];
+    layout: 'row' | 'column' | 'triangle';
+    opacity?: number;
+}
+export declare function ActionButtonGroup({ position, buttons, layout, opacity, }: ActionButtonGroupProps): JSX.Element;
+//# sourceMappingURL=ActionButtonGroup.d.ts.map

package/dist/controls/ActionButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButtonGroup.d.ts","sourceRoot":"","sources":["../../src/controls/ActionButtonGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAIxE,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,aAAa,GAAG,cAAc,CAAC;IACzC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAqBD,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAa,GACd,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CAuFtC"}

package/dist/controls/ActionButtonGroup.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { ActionButton } from './ActionButton.js';
+// ---- Helpers --------------------------------------------------------------
+/** CSS to show only on touch devices. */
+const TOUCH_ONLY = `
+  .joydle-action-group { display: none; }
+  @media (pointer: coarse) { .joydle-action-group { display: flex; } }
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = TOUCH_ONLY;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+export function ActionButtonGroup({ position, buttons, layout, opacity = 0.6, }) {
+    injectStyle();
+    const isLeft = position === 'bottom-left';
+    const gap = 12;
+    // --- Triangle layout ------------------------------------------------------
+    // First button is primary (larger), remaining are arranged diagonally below.
+    if (layout === 'triangle' && buttons.length >= 1) {
+        const containerStyle = {
+            position: 'fixed',
+            bottom: 24,
+            [isLeft ? 'left' : 'right']: 24,
+            zIndex: 1000,
+            pointerEvents: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap,
+        };
+        const primary = buttons[0];
+        const secondary = buttons.slice(1);
+        return (_jsxs("div", { class: "joydle-action-group", style: containerStyle, children: [secondary.length > 0 && (_jsx("div", { style: { display: 'flex', gap, justifyContent: 'center' }, children: secondary.map((btn) => (_jsx(ActionButton, { position: position, label: btn.label, action: btn.action, size: btn.size ?? 'small', opacity: opacity, _managed: true }, btn.action))) })), _jsx(ActionButton, { position: position, label: primary.label, action: primary.action, size: primary.size ?? 'large', opacity: opacity, _managed: true })] }));
+    }
+    // --- Row / Column layout --------------------------------------------------
+    const containerStyle = {
+        position: 'fixed',
+        bottom: 24,
+        [isLeft ? 'left' : 'right']: 24,
+        zIndex: 1000,
+        pointerEvents: 'auto',
+        display: 'flex',
+        flexDirection: layout === 'row' ? 'row' : 'column',
+        alignItems: 'center',
+        gap,
+    };
+    return (_jsx("div", { class: "joydle-action-group", style: containerStyle, children: buttons.map((btn) => (_jsx(ActionButton, { position: position, label: btn.label, action: btn.action, size: btn.size ?? 'medium', opacity: opacity, _managed: true }, btn.action))) }));
+}
+//# sourceMappingURL=ActionButtonGroup.js.map

package/dist/controls/ActionButtonGroup.js.map

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

package/dist/controls/Joystick.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'preact';
+export interface JoystickProps {
+    position: 'bottom-left' | 'bottom-right';
+    deadzone?: number;
+    size?: number;
+    opacity?: number;
+}
+export declare function Joystick({ position, deadzone, size, opacity, }: JoystickProps): JSX.Element;
+//# sourceMappingURL=Joystick.d.ts.map

package/dist/controls/Joystick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Joystick.d.ts","sourceRoot":"","sources":["../../src/controls/Joystick.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKlC,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,aAAa,GAAG,cAAc,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAqBD,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,QAAe,EACf,IAAU,EACV,OAAa,GACd,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CA6L7B"}

package/dist/controls/Joystick.js

@@ -0,0 +1,168 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Virtual analog joystick
+// ---------------------------------------------------------------------------
+import { useContext, useRef, useCallback, useEffect } from 'preact/hooks';
+import { GameContext } from '../core/index.js';
+// ---- Helpers --------------------------------------------------------------
+/** CSS to show only on touch devices. */
+const TOUCH_ONLY = `
+  .joydle-joystick { display: none; }
+  @media (pointer: coarse) { .joydle-joystick { display: block; } }
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = TOUCH_ONLY;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+export function Joystick({ position, deadzone = 0.15, size = 120, opacity = 0.6, }) {
+    const ctx = useContext(GameContext);
+    const inputManager = ctx?.inputManager ?? null;
+    const outerRef = useRef(null);
+    const thumbRef = useRef(null);
+    const trackingRef = useRef(null);
+    const centerRef = useRef({ x: 0, y: 0 });
+    injectStyle();
+    const radius = size / 2;
+    const thumbSize = Math.round(size * 0.4);
+    const resetThumb = useCallback(() => {
+        if (thumbRef.current) {
+            thumbRef.current.style.transform = 'translate(-50%, -50%)';
+            thumbRef.current.style.left = '50%';
+            thumbRef.current.style.top = '50%';
+        }
+    }, []);
+    const releaseAll = useCallback(() => {
+        if (!inputManager)
+            return;
+        inputManager.setAction('left', false);
+        inputManager.setAction('right', false);
+        inputManager.setAction('up', false);
+        inputManager.setAction('down', false);
+    }, [inputManager]);
+    const updateFromDelta = useCallback((dx, dy) => {
+        if (!inputManager)
+            return;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const magnitude = Math.min(dist / radius, 1);
+        // Clamp thumb position to outer ring boundary.
+        const clampedDist = Math.min(dist, radius);
+        const angle = Math.atan2(dy, dx);
+        const clampedX = Math.cos(angle) * clampedDist;
+        const clampedY = Math.sin(angle) * clampedDist;
+        if (thumbRef.current) {
+            thumbRef.current.style.left = `${radius + clampedX}px`;
+            thumbRef.current.style.top = `${radius + clampedY}px`;
+            thumbRef.current.style.transform = 'translate(-50%, -50%)';
+        }
+        // Inside deadzone: release all.
+        if (magnitude < deadzone) {
+            releaseAll();
+            return;
+        }
+        // Map angle to discrete directions.
+        // angle 0 = right, PI/2 = down, PI = left, -PI/2 = up
+        const nx = Math.cos(angle);
+        const ny = Math.sin(angle);
+        // Threshold for activating a direction (cos 45deg ~ 0.707).
+        const threshold = 0.383; // cos(67.5deg) — generous diagonal zone
+        inputManager.setAction('right', nx > threshold);
+        inputManager.setAction('left', nx < -threshold);
+        inputManager.setAction('down', ny > threshold);
+        inputManager.setAction('up', ny < -threshold);
+    }, [inputManager, radius, deadzone, releaseAll]);
+    const handleTouchStart = useCallback((e) => {
+        e.preventDefault();
+        if (trackingRef.current !== null)
+            return; // already tracking
+        const touch = e.changedTouches[0];
+        if (!touch)
+            return;
+        const outer = outerRef.current;
+        if (!outer)
+            return;
+        const rect = outer.getBoundingClientRect();
+        centerRef.current = {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        };
+        trackingRef.current = touch.identifier;
+        const dx = touch.clientX - centerRef.current.x;
+        const dy = touch.clientY - centerRef.current.y;
+        updateFromDelta(dx, dy);
+    }, [updateFromDelta]);
+    const handleTouchMove = useCallback((e) => {
+        e.preventDefault();
+        if (trackingRef.current === null)
+            return;
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const touch = e.changedTouches[i];
+            if (touch.identifier === trackingRef.current) {
+                const dx = touch.clientX - centerRef.current.x;
+                const dy = touch.clientY - centerRef.current.y;
+                updateFromDelta(dx, dy);
+                return;
+            }
+        }
+    }, [updateFromDelta]);
+    const handleTouchEnd = useCallback((e) => {
+        e.preventDefault();
+        if (trackingRef.current === null)
+            return;
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            if (e.changedTouches[i].identifier === trackingRef.current) {
+                trackingRef.current = null;
+                resetThumb();
+                releaseAll();
+                return;
+            }
+        }
+    }, [resetThumb, releaseAll]);
+    // Cleanup on unmount.
+    useEffect(() => {
+        return () => {
+            releaseAll();
+        };
+    }, [releaseAll]);
+    const isLeft = position === 'bottom-left';
+    const containerStyle = {
+        position: 'fixed',
+        bottom: 24,
+        [isLeft ? 'left' : 'right']: 24,
+        width: size,
+        height: size,
+        opacity,
+        pointerEvents: 'auto',
+        zIndex: 1000,
+        touchAction: 'none',
+    };
+    const outerStyle = {
+        position: 'relative',
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: 'rgba(255,255,255,0.15)',
+        border: '2px solid rgba(255,255,255,0.4)',
+        boxSizing: 'border-box',
+    };
+    const thumbStyle = {
+        position: 'absolute',
+        width: thumbSize,
+        height: thumbSize,
+        borderRadius: '50%',
+        background: 'rgba(255,255,255,0.5)',
+        border: '2px solid rgba(255,255,255,0.8)',
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'none',
+        boxSizing: 'border-box',
+    };
+    return (_jsx("div", { class: "joydle-joystick", style: containerStyle, children: _jsx("div", { ref: outerRef, style: outerStyle, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: _jsx("div", { ref: thumbRef, style: thumbStyle }) }) }));
+}
+//# sourceMappingURL=Joystick.js.map

package/dist/controls/Joystick.js.map

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

package/dist/controls/SwipeZone.d.ts

@@ -0,0 +1,10 @@
+import type { JSX, ComponentChildren } from 'preact';
+export type SwipeDirection = 'left' | 'right' | 'up' | 'down';
+export interface SwipeZoneProps {
+    direction: 'horizontal' | 'vertical' | 'both';
+    onSwipe: (direction: SwipeDirection) => void;
+    threshold?: number;
+    children?: ComponentChildren;
+}
+export declare function SwipeZone({ direction, onSwipe, threshold, children, }: SwipeZoneProps): JSX.Element;
+//# sourceMappingURL=SwipeZone.d.ts.map

package/dist/controls/SwipeZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwipeZone.d.ts","sourceRoot":"","sources":["../../src/controls/SwipeZone.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAIrD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC9C,OAAO,EAAE,CAAC,SAAS,EAAE,cAAc,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAqBD,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,OAAO,EACP,SAAc,EACd,QAAQ,GACT,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CAoF9B"}

package/dist/controls/SwipeZone.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Swipe detection zone
+// ---------------------------------------------------------------------------
+import { useRef, useCallback } from 'preact/hooks';
+// ---- Helpers --------------------------------------------------------------
+/** CSS to show only on touch devices. */
+const TOUCH_ONLY = `
+  .joydle-swipe-zone { display: none; }
+  @media (pointer: coarse) { .joydle-swipe-zone { display: block; } }
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = TOUCH_ONLY;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+export function SwipeZone({ direction, onSwipe, threshold = 30, children, }) {
+    injectStyle();
+    const startRef = useRef(null);
+    const handleTouchStart = useCallback((e) => {
+        e.preventDefault();
+        const touch = e.changedTouches[0];
+        if (!touch)
+            return;
+        startRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            id: touch.identifier,
+        };
+    }, []);
+    const handleTouchEnd = useCallback((e) => {
+        e.preventDefault();
+        const start = startRef.current;
+        if (!start)
+            return;
+        // Find the matching touch.
+        let endTouch = null;
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            if (e.changedTouches[i].identifier === start.id) {
+                endTouch = e.changedTouches[i];
+                break;
+            }
+        }
+        if (!endTouch)
+            return;
+        const dx = endTouch.clientX - start.x;
+        const dy = endTouch.clientY - start.y;
+        const absDx = Math.abs(dx);
+        const absDy = Math.abs(dy);
+        startRef.current = null;
+        // Determine dominant axis and check threshold.
+        if (direction === 'horizontal' || direction === 'both') {
+            if (absDx >= threshold && absDx >= absDy) {
+                onSwipe(dx < 0 ? 'left' : 'right');
+                return;
+            }
+        }
+        if (direction === 'vertical' || direction === 'both') {
+            if (absDy >= threshold && absDy >= absDx) {
+                onSwipe(dy < 0 ? 'up' : 'down');
+                return;
+            }
+        }
+    }, [direction, onSwipe, threshold]);
+    const style = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'auto',
+        touchAction: 'none',
+        // Invisible.
+        background: 'transparent',
+        zIndex: 998,
+    };
+    return (_jsx("div", { class: "joydle-swipe-zone", style: style, onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onTouchCancel: handleTouchEnd, children: children }));
+}
+//# sourceMappingURL=SwipeZone.js.map

package/dist/controls/SwipeZone.js.map

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

package/dist/controls/TouchDPad.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from 'preact';
+export interface TouchDPadProps {
+    position: 'bottom-left' | 'bottom-right';
+    directions: 'horizontal' | 'four-way';
+    size?: number;
+    opacity?: number;
+}
+export declare function TouchDPad({ position, directions, size, opacity, }: TouchDPadProps): JSX.Element;
+//# sourceMappingURL=TouchDPad.d.ts.map

package/dist/controls/TouchDPad.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchDPad.d.ts","sourceRoot":"","sources":["../../src/controls/TouchDPad.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAKlC,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,aAAa,GAAG,cAAc,CAAC;IACzC,UAAU,EAAE,YAAY,GAAG,UAAU,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA8BD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,UAAU,EACV,IAAU,EACV,OAAa,GACd,EAAE,cAAc,GAAG,GAAG,CAAC,OAAO,CA8G9B"}

package/dist/controls/TouchDPad.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// ---------------------------------------------------------------------------
+//  @joydle/ui — Touch D-Pad control (2-dir or 4-dir)
+// ---------------------------------------------------------------------------
+import { useContext, useRef, useCallback } from 'preact/hooks';
+import { GameContext } from '../core/index.js';
+const ARROW_PATHS = {
+    left: 'M 70 50 L 30 50 L 45 35 M 30 50 L 45 65',
+    right: 'M 30 50 L 70 50 L 55 35 M 70 50 L 55 65',
+    up: 'M 50 70 L 50 30 L 35 45 M 50 30 L 65 45',
+    down: 'M 50 30 L 50 70 L 35 55 M 50 70 L 65 55',
+};
+/** CSS to show only on touch devices. */
+const TOUCH_ONLY = `
+  .joydle-touch-dpad { display: none; }
+  @media (pointer: coarse) { .joydle-touch-dpad { display: flex; } }
+`;
+let styleInjected = false;
+function injectStyle() {
+    if (styleInjected)
+        return;
+    styleInjected = true;
+    const el = document.createElement('style');
+    el.textContent = TOUCH_ONLY;
+    document.head.appendChild(el);
+}
+// ---- Component ------------------------------------------------------------
+export function TouchDPad({ position, directions, size = 120, opacity = 0.6, }) {
+    const ctx = useContext(GameContext);
+    const activeRef = useRef(new Set());
+    injectStyle();
+    const inputManager = ctx?.inputManager ?? null;
+    const pressDirection = useCallback((dir, down) => {
+        if (!inputManager)
+            return;
+        if (down) {
+            activeRef.current.add(dir);
+        }
+        else {
+            activeRef.current.delete(dir);
+        }
+        inputManager.setAction(dir, down);
+    }, [inputManager]);
+    const handleTouchStart = useCallback((dir) => (e) => {
+        e.preventDefault();
+        pressDirection(dir, true);
+    }, [pressDirection]);
+    const handleTouchEnd = useCallback((dir) => (e) => {
+        e.preventDefault();
+        pressDirection(dir, false);
+    }, [pressDirection]);
+    // Button size is proportional to the overall pad size.
+    const btnSize = Math.round(size * 0.36);
+    const isLeft = position === 'bottom-left';
+    const containerStyle = {
+        position: 'fixed',
+        bottom: 24,
+        [isLeft ? 'left' : 'right']: 24,
+        width: size,
+        height: directions === 'horizontal' ? btnSize : size,
+        opacity,
+        pointerEvents: 'auto',
+        zIndex: 1000,
+    };
+    const btnBase = {
+        position: 'absolute',
+        width: btnSize,
+        height: btnSize,
+        borderRadius: '50%',
+        background: 'rgba(255,255,255,0.25)',
+        border: '2px solid rgba(255,255,255,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        touchAction: 'none',
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+    };
+    // Layout positions for buttons within the container.
+    const center = Math.round((size - btnSize) / 2);
+    const edge = 0;
+    const far = size - btnSize;
+    const renderBtn = (dir, style) => (_jsx("div", { style: { ...btnBase, ...style }, onTouchStart: handleTouchStart(dir), onTouchEnd: handleTouchEnd(dir), onTouchCancel: handleTouchEnd(dir), children: _jsx("svg", { width: btnSize * 0.6, height: btnSize * 0.6, viewBox: "0 0 100 100", children: _jsx("path", { d: ARROW_PATHS[dir], stroke: "white", "stroke-width": "6", "stroke-linecap": "round", fill: "none" }) }) }));
+    if (directions === 'horizontal') {
+        return (_jsxs("div", { class: "joydle-touch-dpad", style: containerStyle, children: [renderBtn('left', { left: edge, top: 0 }), renderBtn('right', { right: edge, top: 0 })] }));
+    }
+    // Four-way layout: up top-center, down bottom-center, left center-left, right center-right.
+    return (_jsxs("div", { class: "joydle-touch-dpad", style: containerStyle, children: [renderBtn('up', { left: center, top: edge }), renderBtn('down', { left: center, top: far }), renderBtn('left', { left: edge, top: center }), renderBtn('right', { left: far, top: center })] }));
+}
+//# sourceMappingURL=TouchDPad.js.map

package/dist/controls/TouchDPad.js.map

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