import { getTooltipTitleStyle } from '@/ui/core/tooltip/tooltipStyles';
import { useThemeStore } from '@/ui';

const theme = useThemeStore((s) => s.theme);

<div style={getTooltipTitleStyle(theme)}>
  Iron Sword
</div>

<div style={getTooltipMetaStyle(theme)}>
  Level 40 Attack required
</div>

<div style={getTooltipBodyStyle(theme)}>
  A powerful melee weapon forged from iron ore.
</div>

<div style={getTooltipDividerStyle(theme)}>
  <div>Attack: +15</div>
  <div>Strength: +14</div>
</div>

<span style={getTooltipTagStyle(theme)}>
  2x Fire rune
</span>

// Success status
<div style={getTooltipStatusStyle(theme, 'success')}>
  Currently Active
</div>

// Danger status
<div style={getTooltipStatusStyle(theme, 'danger')}>
  Requires level 50 Magic
</div>

import {
  getTooltipTitleStyle,
  getTooltipMetaStyle,
  getTooltipBodyStyle,
  getTooltipDividerStyle,
  getTooltipStatusStyle,
} from '@/ui/core/tooltip/tooltipStyles';
import { CursorTooltip, useThemeStore } from '@/ui';

function ItemTooltip({ item, position }) {
  const theme = useThemeStore((s) => s.theme);
  
  return (
    <CursorTooltip
      visible={true}
      position={position}
      estimatedSize={{ width: 200, height: 100 }}
      style={{ zIndex: theme.zIndex.tooltip }}
    >
      {/* Title */}
      <div style={getTooltipTitleStyle(theme)}>
        {item.name}
      </div>
      
      {/* Metadata */}
      <div style={getTooltipMetaStyle(theme)}>
        Level {item.levelRequired} {item.skill}
      </div>
      
      {/* Divider */}
      <div style={getTooltipDividerStyle(theme)}>
        {/* Stats */}
        <div style={getTooltipBodyStyle(theme)}>
          Attack: +{item.attackBonus}
        </div>
      </div>
      
      {/* Status */}
      {!hasRequiredLevel && (
        <div style={getTooltipStatusStyle(theme, 'danger')}>
          Requires level {item.levelRequired}
        </div>
      )}
    </CursorTooltip>
  );
}

interface DissolveAnim {
  /** 1 = dissolving out, -1 = appearing in */
  direction: 1 | -1;
  progress: number;
}

import { startDissolve } from './DissolveAnimation';

const dissolveAnims = new Map<string, DissolveAnim>();

// Instant dissolve (depletion)
startDissolve(
  dissolveAnims,
  'tree_123',
  1,  // direction: dissolve out
  true,  // instant
  (entityId, value) => {
    // Apply dissolve value to rendering backend
    applyDissolveValue(entityId, value);
  }
);

// Animated appear (respawn)
startDissolve(
  dissolveAnims,
  'tree_123',
  -1,  // direction: appear in
  false,  // animated
  applyDissolveValue
);

import { tickDissolveAnims } from './DissolveAnimation';

// In your update loop
function update(deltaTime: number) {
  tickDissolveAnims(
    dissolveAnims,
    deltaTime,
    (entityId, value) => {
      applyDissolveValue(entityId, value);
    }
  );
}

export const GPU_VEG_CONFIG = {
  // Duration of respawn dissolve-in animation (seconds)
  // Depletion is instant
  DISSOLVE_DURATION: 0.3,
  
  // Animation progress ceiling (not visual opacity)
  // Actual discard fraction controlled by DISSOLVE_ALPHA_SCALE
  DISSOLVE_MAX: 1.0,
  
  // Fraction of fragments discarded when fully dissolved
  // 0.7 = ~70% of Bayer 4×4 grid cells discarded
  DISSOLVE_ALPHA_SCALE: 0.7,
  
  // Distance fade configuration
  FADE_START: 40,  // meters
  FADE_END: 60,    // meters
};

import { getProxyGeometry } from './GLBTreeInstancer';
import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils';

const proxyData = getProxyGeometry('tree_123');
if (proxyData) {
  // Merge multi-part geometries (bark + leaves)
  const merged = mergeGeometries(proxyData.geometries);
  
  // MUST clone before scaling (shared geometry!)
  const scaled = merged.clone();
  scaled.scale(scale, scale, scale);
  
  // Create collision proxy mesh
  const proxy = new THREE.Mesh(scaled, invisibleMaterial);
  proxy.position.y = proxyData.yOffset * scale;
}

import { clearProxyGeometryCache } from './TreeGLBVisualStrategy';
import {
  destroyGLBTreeInstancer,
  destroyGLBTreeBatchedInstancer,
} from './GLBTreeInstancer';

// During world cleanup
destroyGLBTreeInstancer();
destroyGLBTreeBatchedInstancer();
clearProxyGeometryCache();  // Dispose cached proxy geometries

// Cache key: (sourceGeometries array reference, rounded scale)
const cacheKey = Math.round(scale * 1000) / 1000;

// Cached geometry includes:
// - Merged multi-part geometry (bark + leaves)
// - Scaled to final size
// - Pre-computed bounding box and sphere

interface EquipmentPanelProps {
  // Equipment data
  equipment: PlayerEquipmentItems | null;
  world?: ClientWorld;
  
  // Customization
  slotActionLabel?: string;  // Default: "Remove"
  onSlotAction?: (slotKey: string) => void;  // Custom slot action
  footerButtons?: Array<{
    label: string;
    onClick: () => void;
    disabled?: boolean;
  }>;
  showBonuses?: boolean;  // Default: true
  layoutVariant?: 'default' | 'bank';  // Default: 'default'
  isVisible?: boolean;  // Default: true
}

<EquipmentPanel
  equipment={playerEquipment}
  world={world}
  // Uses default "Remove" action
  // Shows Stats and On Death footer buttons
  // Shows stat bonuses
/>

<EquipmentPanel
  equipment={playerEquipment}
  world={world}
  slotActionLabel="Deposit"
  onSlotAction={(slotKey) => {
    // Custom deposit action
    handleDepositEquipment(slotKey);
  }}
  footerButtons={[]}  // No footer buttons in bank
  showBonuses={true}
  layoutVariant="bank"  // Compact layout for bank sidebar
  isVisible={mode === 'equipment'}
/>

<EquipmentPaperdollPortrait
  world={world}
  equipment={equipment}
  equipmentSignature={equipmentSignature}  // Cache key
  compact={isMobile || layoutVariant === 'bank'}
  layoutVariant={layoutVariant}
  isVisible={isVisible}
/>

interface DialoguePopupShellProps {
  isOpen: boolean;
  onClose: () => void;
  npcName: string;
  npcId: string;
  children: React.ReactNode;
}

import { DialoguePopupShell } from '@/game/panels/dialogue/DialoguePopupShell';

<DialoguePopupShell
  isOpen={isDialogueOpen}
  onClose={() => setIsDialogueOpen(false)}
  npcName="Shopkeeper Bob"
  npcId="npc_lumbridge_shopkeeper"
>
  <div>
    <p>Welcome to my shop!</p>
    <button onClick={handleOpenShop}>View Shop</button>
  </div>
</DialoguePopupShell>

interface DialogueCharacterPortraitProps {
  npcId: string;
  world: ClientWorld;
  compact?: boolean;  // Default: false
}

import { DialogueCharacterPortrait } from '@/game/panels/dialogue/DialogueCharacterPortrait';

<DialogueCharacterPortrait
  npcId="npc_lumbridge_shopkeeper"
  world={world}
  compact={false}
/>

// In dialogue handler
function handleOpenBank() {
  // Close dialogue first
  setIsDialogueOpen(false);
  
  // Then open bank
  world.emit('bank:open', { npcId });
}

// In ResourceSystem.processRespawns()
for (const [resourceId, resource] of this.resources) {
  if (!resource.isAvailable) {
    const ticksSinceDepleted = currentTick - resource.lastDepleted;
    if (ticksSinceDepleted >= resource.respawnTicks) {
      resource.respawn();
    }
  }
}

// Mining depletion
const depleteChance = resourceData.depleteChance ?? 1.0;
if (depleteChance <= 0) {
  shouldDeplete = false;  // Never depletes (rune essence)
} else {
  const roll = Math.random();
  shouldDeplete = roll < depleteChance;
}

{
  "id": "rune_essence_rock",
  "type": "ore",
  "depleteChance": 0,
  "respawnTicks": 0,
  "drops": [
    {
      "itemId": "rune_essence",
      "chance": 1.0,
      "quantity": 1
    }
  ]
}

import { itemMatchesToolCategory } from './ToolUtils';

// Check if player has correct tool
const hasPickaxe = itemMatchesToolCategory('bronze_pickaxe', 'pickaxe');
// true

const canCutWithPickaxe = itemMatchesToolCategory('bronze_pickaxe', 'hatchet');
// false - cross-skill usage prevented

import { getToolCategory } from './ToolUtils';

getToolCategory('bronze_pickaxe');  // 'pickaxe'
getToolCategory('steel_hatchet');   // 'hatchet'
getToolCategory('lobster_pot');     // 'lobster_pot'
getToolCategory('iron_sword');      // null (not a tool)

{
  "id": "bronze_pickaxe",
  "name": "Bronze Pickaxe",
  "skill": "mining",
  "level": 1,
  "category": "pickaxe"
}

// packages/shared/src/constants/GameConstants.ts
export const HOME_TELEPORT_CONSTANTS = {
  COOLDOWN_MS: 30000,  // 30 seconds
  CAST_TIME_MS: 3000,  // 3 seconds
};

{
  playerId: string;
  castTimeMs: number;
}

{
  playerId: string;
  reason: string;
  remainingMs?: number;  // Cooldown remaining (if applicable)
}

{
  playerId: string;
  destination: { x: number, y: number, z: number };
}

import { sanitizeKilledBy } from './DeathUtils';

const safeKiller = sanitizeKilledBy(rawKillerName);
// Strips control characters, limits length, prevents XSS

import { splitItemsForSafeDeath } from './DeathUtils';

const { keptItems, droppedItems } = splitItemsForSafeDeath(
  playerInventory,
  3  // Keep 3 most valuable items
);

// keptItems: 3 most valuable items (by manifest value)
// droppedItems: Everything else (goes to gravestone)

import { validatePosition } from './DeathUtils';

const safePosition = validatePosition(respawnPosition);
// Clamps to world bounds, ensures valid coordinates

export const GRAVESTONE_ID_PREFIX = 'gravestone_';

// Check if entity is a gravestone
if (entityId.startsWith(GRAVESTONE_ID_PREFIX)) {
  // Handle gravestone interaction
}

// ❌ Old (deprecated)
world.on(EventType.PLAYER_DIED, (event) => {
  // ...
});

// ✅ New
world.on(EventType.PLAYER_SET_DEAD, (event) => {
  // ...
});

// Or use generic entity death
world.on(EventType.ENTITY_DEATH, (event) => {
  if (event.entityType === 'player') {
    // Handle player death
  }
});

<div
  style={{
    color: theme.colors.accent.secondary,
    fontWeight: 'bold',
    fontSize: '13px',
  }}
>
  Item Name
</div>

import { getTooltipTitleStyle } from '@/ui/core/tooltip/tooltipStyles';

<div style={getTooltipTitleStyle(theme)}>
  Item Name
</div>

// Hardcoded depletion chance
const shouldDeplete = Math.random() < MINING_DEPLETE_CHANCE;

// Manifest-based depletion
const depleteChance = resourceData.depleteChance ?? 1.0;
const shouldDeplete = depleteChance > 0 && Math.random() < depleteChance;

// Substring matching (allowed cross-skill usage)
const hasTool = itemId.toLowerCase().includes('pickaxe');

import { itemMatchesToolCategory } from './ToolUtils';

// Manifest-based validation with cross-skill guards
const hasTool = itemMatchesToolCategory(itemId, 'pickaxe');

PUBLIC_WS_URL=ws://localhost:5555/ws

PUBLIC_WS_URL=ws://localhost:5556/ws