@rpg-engine/long-bow 0.7.97 → 0.7.99

package/dist/components/DPad/JoystickDPad.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface IDPadOptions {
+    /** Opacity of the entire component (0-1) */
+    opacity?: number;
+    /** Show the silver background behind the controller (default: false) */
+    showBackground?: boolean;
+    /** Size in pixels (default: 100) */
+    size?: number;
+    /** Interval in ms for continuous press events (default: 500) */
+    pressInterval?: number;
+}
+interface IDPadProps {
+    /** Callback fired when a direction is pressed */
+    onDirectionPress?: (direction: 'up' | 'down' | 'left' | 'right') => void;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Additional options for customizing the D-pad */
+    options?: IDPadOptions;
+}
+export declare const JoystickDPad: React.MemoExoticComponent<({ onDirectionPress, disabled, options, }: IDPadProps) => JSX.Element>;
+export {};

package/dist/components/InformationCenter/InformationCenter.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IInformationCenterItem, IInformationCenterNPC } from './InformationCenterTypes';
+export interface IFaqItem {
+    id: string;
+    question: string;
+    answer: string;
+}
+export interface IVideoGuide {
+    id: string;
+    title: string;
+    description: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+    category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
+}
+export interface IInformationCenterProps {
+    itemsAtlasJSON: Record<string, any>;
+    itemsAtlasIMG: string;
+    entitiesAtlasJSON: Record<string, any>;
+    entitiesAtlasIMG: string;
+    faqItems?: IFaqItem[];
+    bestiaryItems?: IInformationCenterNPC[];
+    videoGuides?: IVideoGuide[];
+    items?: IInformationCenterItem[];
+    loading?: boolean;
+    error?: string;
+    initialSearchQuery?: string;
+}
+export declare const InformationCenter: React.FC<IInformationCenterProps>;

package/dist/components/InformationCenter/InformationCenterCell.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IInformationCenterCellProps {
+    name: string;
+    spriteKey: string;
+    atlasJSON: any;
+    atlasIMG: string;
+    onClick?: () => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseLeave?: () => void;
+    onMouseMove?: (e: React.MouseEvent) => void;
+    onTouchStart?: (e: React.TouchEvent) => void;
+}
+export declare const InformationCenterCell: React.FC<IInformationCenterCellProps>;
+export {};

package/dist/components/InformationCenter/InformationCenterTabView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { IOptionsProps } from '../Dropdown';
+interface IInformationCenterTabViewProps<T> {
+    items: T[];
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    filterItems: (items: T[]) => T[];
+    renderContent: (items: T[]) => React.ReactNode;
+    searchPlaceholder: string;
+    filterOptions?: {
+        options: IOptionsProps[];
+        selectedOption: string;
+        onOptionChange: (value: string) => void;
+    };
+    emptyMessage?: string;
+    dependencies?: any[];
+}
+export declare function InformationCenterTabView<T>({ items, searchQuery, onSearchChange, filterItems, renderContent, searchPlaceholder, filterOptions, emptyMessage, dependencies, }: IInformationCenterTabViewProps<T>): React.ReactElement;
+export {};

package/dist/components/InformationCenter/InformationCenterTypes.d.ts

@@ -0,0 +1,79 @@
+import { EntityAttackType, ICharacterPermanentBuff, IEquippableItemBlueprint, INPCLoot, ItemRarities, NPCAlignment, NPCSubtype, RangeTypes } from '@rpg-engine/shared';
+export declare enum MovementSpeed {
+    ExtraSlow = 1.5,
+    Slow = 2.25,
+    Standard = 2.6,
+    Fast = 3,
+    ExtraFast = 3.5
+}
+export declare enum EntityEffectBlueprint {
+    Poison = "poison",
+    Bleeding = "bleeding",
+    Freezing = "freezing",
+    Burning = "burning",
+    Corruption = "corruption",
+    VineGrasp = "vine-grasp",
+    Curse = "curse",
+    Drain = "drain",
+    Shadow = "shadow",
+    Stun = "stun",
+    Knockback = "knockback",
+    Rage = "rage",
+    Weakness = "weakness",
+    Cripple = "cripple",
+    Regeneration = "regeneration"
+}
+export declare enum LootProbability {
+    VeryRare = 0.5,
+    Rare = 1,
+    Uncommon = 10,
+    SemiCommon = 15,
+    Common = 20,
+    VeryCommon = 35
+}
+interface INPCBlueprintSpellArea {
+    spellKey: string;
+    probability: number;
+    power: string;
+}
+export interface IInformationCenterNPC {
+    id: string;
+    name: string;
+    key: string;
+    subType: NPCSubtype;
+    alignment: NPCAlignment;
+    attackType: EntityAttackType;
+    maxRangeAttack: RangeTypes;
+    speed: MovementSpeed;
+    baseHealth: number;
+    skills: {
+        level: number;
+        strength?: {
+            level: number;
+        };
+        dexterity?: {
+            level: number;
+        };
+        resistance?: {
+            level: number;
+        };
+    };
+    fleeOnLowHealth: boolean;
+    entityEffects: EntityEffectBlueprint[];
+    areaSpells: INPCBlueprintSpellArea[];
+    loots: INPCLoot[];
+}
+export interface IInformationCenterItem extends IEquippableItemBlueprint {
+    tier: number;
+    rarity: ItemRarities;
+    rangeType?: EntityAttackType;
+    basePrice: number;
+    canSell: boolean;
+    maxStackSize: number;
+    usableEffectDescription?: string;
+    entityEffects?: [EntityEffectBlueprint];
+    entityEffectChance?: number;
+    equippedBuff?: ICharacterPermanentBuff[];
+    equippedBuffDescription?: string;
+}
+export {};

package/dist/components/InformationCenter/sections/bestiary/BestiarySection.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IInformationCenterNPC } from '../../InformationCenterTypes';
+interface IBestiarySectionProps {
+    bestiaryItems: IInformationCenterNPC[];
+    itemsAtlasJSON: Record<string, any>;
+    itemsAtlasIMG: string;
+    entitiesAtlasJSON: Record<string, any>;
+    entitiesAtlasIMG: string;
+    initialSearchQuery: string;
+}
+export declare const BestiarySection: React.FC<IBestiarySectionProps>;
+export {};

package/dist/components/InformationCenter/sections/bestiary/InformationCenterNPCDetails.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IInformationCenterNPC } from '../../InformationCenterTypes';
+interface INPCDetailsProps {
+    npc: IInformationCenterNPC;
+    itemsAtlasJSON: Record<string, any>;
+    itemsAtlasIMG: string;
+    entitiesAtlasJSON: Record<string, any>;
+    entitiesAtlasIMG: string;
+    onBack: () => void;
+}
+export declare const InformationCenterNPCDetails: React.FC<INPCDetailsProps>;
+export {};

package/dist/components/InformationCenter/sections/bestiary/InformationCenterNPCTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IInformationCenterNPC } from '../../InformationCenterTypes';
+interface INPCTooltipProps {
+    npc: IInformationCenterNPC;
+    itemsAtlasJSON: any;
+    itemsAtlasIMG: string;
+}
+export declare const InformationCenterNPCTooltip: React.FC<INPCTooltipProps>;
+export {};

package/dist/components/InformationCenter/sections/faq/FaqSection.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IFaqItem } from '../../InformationCenter';
+interface IFaqSectionProps {
+    faqItems: IFaqItem[];
+    initialSearchQuery: string;
+}
+export declare const FaqSection: React.FC<IFaqSectionProps>;
+export {};

package/dist/components/InformationCenter/sections/items/InformationCenterItemDetails.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IInformationCenterItem, IInformationCenterNPC } from '../../InformationCenterTypes';
+interface IInformationCenterItemDetailsProps {
+    item: IInformationCenterItem;
+    itemsAtlasJSON: Record<string, any>;
+    itemsAtlasIMG: string;
+    droppedBy: IInformationCenterNPC[];
+    onBack: () => void;
+}
+export declare const InformationCenterItemDetails: React.FC<IInformationCenterItemDetailsProps>;
+export {};

package/dist/components/InformationCenter/sections/items/InformationCenterItemTooltip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IInformationCenterItem } from '../../InformationCenterTypes';
+interface IItemTooltipProps {
+    item: IInformationCenterItem;
+}
+export declare const InformationCenterItemTooltip: React.FC<IItemTooltipProps>;
+export {};

package/dist/components/InformationCenter/sections/items/ItemsSection.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IInformationCenterItem, IInformationCenterNPC } from '../../InformationCenterTypes';
+interface IItemsSectionProps {
+    items: IInformationCenterItem[];
+    bestiaryItems: IInformationCenterNPC[];
+    itemsAtlasJSON: Record<string, any>;
+    itemsAtlasIMG: string;
+    initialSearchQuery: string;
+}
+export declare const ItemsSection: React.FC<IItemsSectionProps>;
+export {};

package/dist/components/InformationCenter/sections/tutorials/TutorialsSection.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { IVideoGuide } from '../../InformationCenter';
+interface ITutorialsSectionProps {
+    videoGuides: IVideoGuide[];
+    initialSearchQuery: string;
+}
+export declare const TutorialsSection: React.FC<ITutorialsSectionProps>;
+export {};

package/dist/components/InformationCenter/shared/BaseInformationDetails.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+export interface IBaseInformationDetailsProps {
+    name: string;
+    spriteKey: string;
+    atlasJSON: Record<string, any>;
+    atlasIMG: string;
+    onBack: () => void;
+    children?: ReactNode;
+}
+export declare const BaseInformationDetails: React.FC<IBaseInformationDetailsProps>;

package/dist/components/shared/BaseTooltip.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface IBaseTooltipProps {
+    children: React.ReactNode;
+    width?: string;
+}
+export declare const TooltipTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SectionTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StatsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StatItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BaseTooltip: React.FC<IBaseTooltipProps>;
+export default BaseTooltip;

package/dist/components/shared/Collapsible/Collapsible.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ICollapsibleProps {
+    title: string;
+    children: React.ReactNode;
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare const Collapsible: React.FC<ICollapsibleProps>;
+export {};

package/dist/components/shared/Portal/Portal.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IPortalProps {
+    children: React.ReactNode;
+}
+export declare const Portal: React.FC<IPortalProps>;
+export {};

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export * from './components/CheckButton';
 export * from './components/CheckItem';
 export * from './components/CircularController/CircularController';
 export * from './components/CraftBook/CraftBook';
+export * from './components/DPad/JoystickDPad';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';

package/dist/long-bow.cjs.development.js

@@ -28942,7 +28942,7 @@ var CraftBook = function CraftBook(_ref) {
       return setSearchTerm(e.target.value);
     },
     autoFocus: true
-  })), React__default.createElement(ContentContainer, null, React__default.createElement(RadioInputScroller, {
+  })), React__default.createElement(ContentContainer, null, paginatedItems.length > 0 ? React__default.createElement(RadioInputScroller, {
     className: "inputRadioCraftBook"
   }, paginatedItems == null ? void 0 : paginatedItems.map(function (item) {
     return React__default.createElement(CraftingRecipeWrapper, {
@@ -28967,7 +28967,9 @@ var CraftBook = function CraftBook(_ref) {
       inventory: inventory,
       skills: skills
     }));
-  }))), totalPages > 1 && React__default.createElement(PaginationContainer, null, React__default.createElement(PaginationButton, {
+  })) : React__default.createElement(EmptyState, null, React__default.createElement(fa.FaBoxOpen, {
+    size: 48
+  }), React__default.createElement("p", null, "No craftable items found"))), totalPages > 1 && React__default.createElement(PaginationContainer, null, React__default.createElement(PaginationButton, {
     onClick: function onClick() {
       return setCurrentPage(function (prev) {
         return Math.max(1, prev - 1);
@@ -29036,11 +29038,11 @@ var SearchContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
 var ContentContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CraftBook__ContentContainer",
   componentId: "sc-19q95ue-7"
-})(["flex:1;min-height:0;padding:16px;padding-right:0;padding-bottom:0;overflow:hidden;width:100%;"]);
+})(["flex:1;display:flex;flex-direction:column;padding:16px;padding-right:0;padding-bottom:0;width:100%;position:relative;min-height:300px;overflow:hidden;"]);
 var RadioInputScroller = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CraftBook__RadioInputScroller",
   componentId: "sc-19q95ue-8"
-})(["height:100%;overflow-y:scroll;overflow-x:hidden;padding:8px 16px;padding-right:24px;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;@media (max-width:", "){grid-template-columns:1fr;}"], MOBILE_WIDTH);
+})(["height:100%;min-height:300px;overflow-y:auto;overflow-x:hidden;padding:8px 16px;padding-right:24px;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-content:start;@media (max-width:", "){grid-template-columns:1fr;}"], MOBILE_WIDTH);
 var CraftingRecipeWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CraftBook__CraftingRecipeWrapper",
   componentId: "sc-19q95ue-9"
@@ -29077,6 +29079,269 @@ var PageInfo = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "CraftBook__PageInfo",
   componentId: "sc-19q95ue-14"
 })(["color:", ";font-size:0.8rem;font-family:'Press Start 2P',cursive;"], uiColors.lightGray);
+var EmptyState = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "CraftBook__EmptyState",
+  componentId: "sc-19q95ue-15"
+})(["position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:", ";width:100%;padding:2rem;svg{font-size:3rem;margin-bottom:1rem;opacity:0.7;}p{font-family:'Press Start 2P',cursive;font-size:0.9rem;margin:0;}"], uiColors.lightGray);
+
+// Memoize the styled components since they don't depend on props that change frequently
+var DPadButton = /*#__PURE__*/React.memo( /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "JoystickDPad__DPadButton",
+  componentId: "sc-q1e3gk-0"
+})(["position:absolute;background:", ";box-shadow:", ";cursor:", ";user-select:none;transition:all 0.08s cubic-bezier(0.4,0,0.2,1);touch-action:none;-webkit-tap-highlight-color:transparent;transform-origin:center center;&:hover:not(:active){@media (hover:hover){filter:", ";}}&::after{content:'';position:absolute;width:0;height:0;border:", "px solid transparent;pointer-events:none;opacity:", ";transition:all 0.08s cubic-bezier(0.4,0,0.2,1);}&.up,&.down{width:", "px;height:", "px;left:50%;transform:translateX(-50%) scale(", ");}&.left,&.right{width:", "px;height:", "px;top:50%;transform:translateY(-50%) scale(", ");}&.up{top:0;border-radius:5px 5px 0 0;&::after{border-bottom-color:#2a2a2a;top:45%;left:50%;transform:translate(-50%,-50%);}}&.down{bottom:0;border-radius:0 0 5px 5px;&::after{border-top-color:#2a2a2a;bottom:45%;left:50%;transform:translate(-50%,50%);}}&.left{left:0;border-radius:5px 0 0 5px;&::after{border-right-color:#2a2a2a;left:45%;top:50%;transform:translate(-50%,-50%);}}&.right{right:0;border-radius:0 5px 5px 0;&::after{border-left-color:#2a2a2a;right:45%;top:50%;transform:translate(50%,-50%);}}"], function (props) {
+  return props.isPressed ? '#363636' : '#424242';
+}, function (props) {
+  return props.isPressed ? 'inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.3)' : 'inset 0 0 5px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.2)';
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'pointer';
+}, function (props) {
+  return !props.disabled && !props.isPressed ? 'brightness(1.1)' : 'none';
+}, function (props) {
+  var _props$size;
+  return ((_props$size = props.size) != null ? _props$size : 100) * 0.05;
+}, function (props) {
+  return props.isPressed ? 0.7 : 1;
+}, function (props) {
+  var _props$size2;
+  return ((_props$size2 = props.size) != null ? _props$size2 : 100) * 0.3;
+}, function (props) {
+  var _props$size3;
+  return ((_props$size3 = props.size) != null ? _props$size3 : 100) * 0.4;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+}, function (props) {
+  var _props$size4;
+  return ((_props$size4 = props.size) != null ? _props$size4 : 100) * 0.4;
+}, function (props) {
+  var _props$size5;
+  return ((_props$size5 = props.size) != null ? _props$size5 : 100) * 0.3;
+}, function (props) {
+  return props.isPressed ? 0.95 : 1;
+}));
+var DPadCenter = /*#__PURE__*/React.memo( /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "JoystickDPad__DPadCenter",
+  componentId: "sc-q1e3gk-1"
+})(["position:absolute;width:", "px;height:", "px;background:#424242;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 0 8px rgba(0,0,0,0.6);border-radius:50%;user-select:none;cursor:", ";touch-action:none;-webkit-tap-highlight-color:transparent;&::after{content:'';position:absolute;width:", "px;height:", "px;background:#2a2a2a;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:inset 0 0 2px rgba(0,0,0,0.8);}"], function (props) {
+  var _props$size6;
+  return ((_props$size6 = props.size) != null ? _props$size6 : 100) * 0.3;
+}, function (props) {
+  var _props$size7;
+  return ((_props$size7 = props.size) != null ? _props$size7 : 100) * 0.3;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'default';
+}, function (props) {
+  var _props$size8;
+  return ((_props$size8 = props.size) != null ? _props$size8 : 100) * 0.08;
+}, function (props) {
+  var _props$size9;
+  return ((_props$size9 = props.size) != null ? _props$size9 : 100) * 0.08;
+}));
+var DPadContainer = /*#__PURE__*/React.memo( /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "JoystickDPad__DPadContainer",
+  componentId: "sc-q1e3gk-2"
+})(["width:", "px;height:", "px;position:relative;background:", ";border-radius:50%;box-shadow:", ";opacity:", ";user-select:none;cursor:", ";transition:opacity 0.2s ease;touch-action:none;-webkit-tap-highlight-color:transparent;"], function (props) {
+  var _props$size10;
+  return (_props$size10 = props.size) != null ? _props$size10 : 100;
+}, function (props) {
+  var _props$size11;
+  return (_props$size11 = props.size) != null ? _props$size11 : 100;
+}, function (props) {
+  return props.showBackground ? '#b8b8b8' : 'transparent';
+}, function (props) {
+  return props.showBackground ? 'inset 0 0 10px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2)' : 'none';
+}, function (props) {
+  var _props$opacity;
+  return props.disabled ? 0.5 : (_props$opacity = props.opacity) != null ? _props$opacity : 1;
+}, function (props) {
+  return props.disabled ? 'not-allowed' : 'default';
+}));
+var JoystickDPad = /*#__PURE__*/React.memo(function (_ref) {
+  var onDirectionPress = _ref.onDirectionPress,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options;
+  var _options$opacity = options.opacity,
+    opacity = _options$opacity === void 0 ? 1 : _options$opacity,
+    _options$showBackgrou = options.showBackground,
+    showBackground = _options$showBackgrou === void 0 ? false : _options$showBackgrou,
+    _options$size = options.size,
+    size = _options$size === void 0 ? 100 : _options$size,
+    _options$pressInterva = options.pressInterval,
+    pressInterval = _options$pressInterva === void 0 ? 500 : _options$pressInterva;
+  // Use refs for values that don't need to trigger re-renders
+  var _useState = React.useState(new Set()),
+    pressedButtons = _useState[0],
+    setPressedButtons = _useState[1];
+  var intervalRef = React.useRef(null);
+  var activeDirectionRef = React.useRef(null);
+  var touchStartRef = React.useRef(null);
+  var isPressedRef = React.useRef(false);
+  var clearPressInterval = React.useCallback(function () {
+    if (intervalRef.current !== null) {
+      window.clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    activeDirectionRef.current = null;
+  }, []);
+  var clearAllPresses = React.useCallback(function () {
+    clearPressInterval();
+    setPressedButtons(new Set());
+    activeDirectionRef.current = null;
+    isPressedRef.current = false;
+  }, [clearPressInterval]);
+  var handleDirectionPress = React.useCallback(function (direction) {
+    if (disabled) return;
+    // Clear any existing presses first
+    clearAllPresses();
+    // Set new direction
+    activeDirectionRef.current = direction;
+    isPressedRef.current = true;
+    setPressedButtons(new Set([direction]));
+    onDirectionPress == null ? void 0 : onDirectionPress(direction);
+    intervalRef.current = window.setInterval(function () {
+      if (activeDirectionRef.current === direction) {
+        onDirectionPress == null ? void 0 : onDirectionPress(direction);
+      } else {
+        clearPressInterval();
+      }
+    }, pressInterval);
+  }, [disabled, onDirectionPress, pressInterval, clearPressInterval, clearAllPresses]);
+  var handleDirectionRelease = React.useCallback(function (direction) {
+    if (activeDirectionRef.current === direction) {
+      clearAllPresses();
+    }
+  }, [clearAllPresses]);
+  var handleTouchStart = React.useCallback(function (e, direction) {
+    var touch = e.touches[0];
+    if (touch) {
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+      handleDirectionPress(direction);
+    }
+  }, [handleDirectionPress]);
+  var handleTouchMove = React.useCallback(function (e) {
+    var touch = e.touches[0];
+    if (!touch || !touchStartRef.current) return;
+    var _touchStartRef$curren = touchStartRef.current,
+      startX = _touchStartRef$curren.x,
+      startY = _touchStartRef$curren.y;
+    var deltaX = touch.clientX - startX;
+    var deltaY = touch.clientY - startY;
+    // Calculate angle and distance
+    var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+    var angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI);
+    // Only trigger if we've moved enough
+    var threshold = size * 0.15; // Adaptive threshold based on d-pad size
+    if (distance < threshold) return;
+    var newDirection = null;
+    // Determine direction based on angle
+    if (angle > -45 && angle <= 45) newDirection = 'right';else if (angle > 45 && angle <= 135) newDirection = 'down';else if (angle > 135 || angle <= -135) newDirection = 'left';else if (angle > -135 && angle <= -45) newDirection = 'up';
+    if (newDirection && newDirection !== activeDirectionRef.current) {
+      handleDirectionPress(newDirection);
+      // Update touch start to current position to prevent jitter
+      touchStartRef.current = {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+    }
+  }, [handleDirectionPress, size]);
+  // Add a new cleanup function for touch events
+  var cleanupTouchEvents = React.useCallback(function () {
+    touchStartRef.current = null;
+    if (activeDirectionRef.current) {
+      handleDirectionRelease(activeDirectionRef.current);
+    }
+  }, [handleDirectionRelease]);
+  // Enhance the touch end handler
+  var handleTouchEnd = React.useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Add touch cancel handler
+  var handleTouchCancel = React.useCallback(function () {
+    cleanupTouchEvents();
+  }, [cleanupTouchEvents]);
+  // Enhance cleanup effect
+  React.useEffect(function () {
+    if (disabled) {
+      clearAllPresses();
+    }
+    var handleBlur = function handleBlur() {
+      clearAllPresses();
+    };
+    var handleVisibilityChange = function handleVisibilityChange() {
+      if (document.hidden) {
+        clearAllPresses();
+      }
+    };
+    var handlePointerUp = function handlePointerUp() {
+      // Global pointer up as fallback for stuck buttons
+      if (isPressedRef.current) {
+        clearAllPresses();
+      }
+    };
+    window.addEventListener('blur', handleBlur);
+    window.addEventListener('pointerup', handlePointerUp);
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return function () {
+      clearAllPresses();
+      window.removeEventListener('blur', handleBlur);
+      window.removeEventListener('pointerup', handlePointerUp);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [disabled, clearAllPresses]);
+  // Memoize the preventDefault handler
+  var preventDefault = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  // Memoize button props to prevent unnecessary re-renders
+  var buttonProps = React.useCallback(function (direction) {
+    return {
+      onMouseDown: function onMouseDown() {
+        return handleDirectionPress(direction);
+      },
+      onMouseUp: function onMouseUp() {
+        return handleDirectionRelease(direction);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleDirectionRelease(direction);
+      },
+      onTouchStart: function onTouchStart(e) {
+        return handleTouchStart(e, direction);
+      },
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onContextMenu: preventDefault,
+      size: size,
+      isPressed: pressedButtons.has(direction),
+      disabled: disabled
+    };
+  }, [handleDirectionPress, handleDirectionRelease, handleTouchStart, handleTouchMove, handleTouchEnd, preventDefault, size, pressedButtons, disabled]);
+  return React__default.createElement(DPadContainer, {
+    opacity: opacity,
+    showBackground: showBackground,
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault,
+    onTouchCancel: handleTouchCancel
+  }, React__default.createElement(DPadButton, Object.assign({
+    className: "up"
+  }, buttonProps('up'))), React__default.createElement(DPadButton, Object.assign({
+    className: "right"
+  }, buttonProps('right'))), React__default.createElement(DPadButton, Object.assign({
+    className: "down"
+  }, buttonProps('down'))), React__default.createElement(DPadButton, Object.assign({
+    className: "left"
+  }, buttonProps('left'))), React__default.createElement(DPadCenter, {
+    size: size,
+    disabled: disabled,
+    onContextMenu: preventDefault
+  }));
+});
+JoystickDPad.displayName = 'JoystickDPad';
 
 var DropdownSelectorContainer = function DropdownSelectorContainer(_ref) {
   var title = _ref.title,
@@ -30455,7 +30720,7 @@ var TabButton = /*#__PURE__*/styled__default.button.withConfig({
 var ContentWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "InternalTabs__ContentWrapper",
   componentId: "sc-ldufv0-3"
-})(["padding:1rem;"]);
+})([""]);
 
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
@@ -34333,6 +34598,7 @@ exports.ItemContainer = ItemContainer$1;
 exports.ItemQuantitySelectorModal = ItemQuantitySelectorModal;
 exports.ItemSelector = ItemSelector;
 exports.ItemSlot = ItemSlot;
+exports.JoystickDPad = JoystickDPad;
 exports.Leaderboard = Leaderboard;
 exports.ListMenu = ListMenu;
 exports.Marketplace = Marketplace;