### Run Next.js Development Commands in Bash

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Provides standard commands for developing a Next.js application, including dependency installation, running the development server, building for production, starting the production server, and linting the code. It also mentions code formatting is handled automatically via Husky and Prettier.

```bash
# Install dependencies
npm install

# Run development server (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Lint code
npm run lint

# Code formatting (runs automatically on commit via Husky)
# Prettier configured in prettier.config.mjs
```

--------------------------------

### Item Data Types

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Defines the structure for all game items stored in `data/items_database.json`.

```APIDOC
## Item Interface

### Description
Defines the structure for all game items.

### Fields
- **name** (string) - The name of the item.
- **wiki_url** (string) - The URL to the item's page on the ARC Raiders Wiki.
- **infobox** (object) - Contains detailed information about the item.
  - **image** (string) - Path to the item's image in the wiki.
  - **rarity** (string) - The rarity of the item (e.g., "Common", "Rare").
  - **quote** (string, optional) - Flavor text for the item.
  - **type** (string, optional) - The category of the item (e.g., "Weapon", "Material").
  - **special_types** (array of strings, optional) - Special classifications for the item.
  - **weight** (number, optional) - The weight of the item.
  - **sellprice** (number or array of numbers, optional) - The sell price of the item.
  - **stacksize** (number, optional) - The maximum stack size for the item.
  - **damage** (number, optional) - Damage value for weapons.
  - **workshop_upgrades** (array of WorkshopUpgradeDetail, optional) - Details about workshop upgrades.
  - **expedition_parts** (array of ExpeditionDetail, optional) - Details about expedition parts.
  - **quests** (array of QuestDetail, optional) - Quests related to the item.
  - **location** (string, optional) - Where the item can be found.
- **image_urls** (object) - URLs for different resolutions of the item's image.
  - **thumb** (string, optional) - URL for the thumbnail image.
  - **original** (string, optional) - URL for the original, full-resolution image.
  - **file_page** (string, optional) - URL to the wiki file page.
- **sources** (array of strings, optional) - Where the item can be obtained.

### Example
```json
{
  "name": "Power Rod",
  "wiki_url": "https://arcraiders.wiki/wiki/Power_Rod",
  "infobox": {
    "image": "Power_Rod.png",
    "rarity": "Rare",
    "type": "Advanced Material",
    "special_types": ["crafting_material"],
    "weight": 0.3,
    "sellprice": 250,
    "stacksize": 50
  },
  "image_urls": {
    "thumb": "https://arcraiders.wiki/images/thumb/Power_Rod.png"
  }
}
```
```

--------------------------------

### Image Proxy API

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Proxies external wiki images with aggressive caching to improve load times and avoid CORS issues.

```APIDOC
## GET /api/proxy-image

### Description
Proxies external wiki images with aggressive caching to improve load times and avoid CORS issues.

### Method
GET

### Endpoint
/api/proxy-image

### Query Parameters
- **url** (string) - Required - The URL of the image to proxy.

### Request Example
```
/api/proxy-image?url=https%3A%2F%2Farcraiders.wiki%2Fimages%2Fthumb%2FPower_Rod.png
```

### Response
#### Success Response (200)
- The proxied image.
- Headers include aggressive caching directives: `Cache-Control: public, max-age=31536000, immutable`, `CDN-Cache-Control: max-age=31536000`.

#### Response Example
(Image data)
```

--------------------------------

### Graph Data Types

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Represents items with their crafting relationships for the graph visualization.

```APIDOC
## Graph Data Interfaces

### Description
Interfaces for representing items and their relationships in the crafting graph.

### Edge Interface

#### Description
Represents a relationship between items in the graph.

#### Fields
- **name** (string) - The name of the related item.
- **direction** ('in' | 'out') - The direction of the relationship (input or output).
- **relation** (string) - The type of relationship (e.g., "craft_from", "recycle_to", "trade").
- **quantity** (number, optional) - The amount of the item involved in the relationship.
- **dependency** (array of objects, optional) - Details about dependencies (e.g., crafting level, currency).
  - **type** (string) - Type of dependency.
  - **amount** (number, optional) - Amount of dependency.
  - **currency** (string, optional) - Currency type for dependency.
- **input_level** (string, optional) - Source item for recycle/salvage operations.
- **output_level** (string, optional) - Target item for upgrade operations.

### ItemData Interface

#### Description
Represents an item node in the crafting graph, including its relationships.

#### Fields
- **name** (string) - The name of the item.
- **node_type** ('item' | 'trader') - The type of node (item or trader).
- **wiki_url** (string) - The URL to the item's page on the ARC Raiders Wiki.
- **infobox** (object, optional) - Basic infobox details.
  - **image** (string) - Path to the item's image.
  - **rarity** (string, optional) - Rarity of the item.
  - **type** (string, optional) - Type of the item.
- **image_urls** (object, optional) - URLs for item images.
  - **thumb** (string, optional) - Thumbnail image URL.
  - **original** (string, optional) - Original image URL.
- **edges** (array of Edge) - An array of all relationships connected to this item.

### Example
```json
{
  "name": "Power Rod",
  "node_type": "item",
  "wiki_url": "https://arcraiders.wiki/wiki/Power_Rod",
  "infobox": {
    "rarity": "Rare",
    "type": "Advanced Material"
  },
  "edges": [
    { "name": "Copper Wire", "direction": "in", "relation": "craft_from", "quantity": 2 },
    { "name": "Power Cell", "direction": "in", "relation": "craft_from", "quantity": 1 },
    { "name": "Advanced Weapon", "direction": "out", "relation": "craft_to", "quantity": 1 }
  ]
}
```
```

--------------------------------

### Graph Helper Functions

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Utility functions for building Cytoscape graph elements from item relationships. These functions assist in visualizing crafting and other item interdependencies.

```APIDOC
## Graph Helper Functions

Utility functions for building Cytoscape graph elements from item relationships.

### Description

Provides functions to generate graph elements, layout positions, and format edge labels for visualizing item relationships.

### Functions

#### `buildGraphElements`

Builds graph elements (nodes and edges) for an item's crafting relationships.

**Parameters**

- `currentItem` (ItemData) - The central item for which to build the graph.
- `itemsLookup` (Map<string, ItemData>) - A map of all available items.
- `selectedEdgeTypes` (Set<string>) - A set of edge types to include (e.g., 'craft', 'recycle').
- `translateItem` ((name: string) => string) - Function to translate item names.
- `translateRelation` ((key: string) => string) - Function to translate relation types.

**Returns**

- `{ elements: any[], leftGrouped: any[], rightGrouped: any[] }` - An object containing graph elements, and grouped input/output items.

#### `buildLayoutPositions`

Calculates layout positions for the graph elements.

**Parameters**

- `elements` (any[]) - The graph elements generated by `buildGraphElements`.
- `leftGrouped` (any[]) - Grouped input items.
- `rightGrouped` (any[]) - Grouped output items.

**Returns**

- `(node) => { x: number, y: number }` - A function that returns the position for a given node.

#### `formatEdgeLabel`

Formats the label for an edge, including translations and quantity.

**Parameters**

- `edge` (object) - The edge object.
- `translateRelation` ((key: string) => string) - Function to translate relation types.
- `translateItem` ((name: string) => string) - Function to translate item names.

**Returns**

- `string` - The formatted edge label (e.g., "Craft (2x)").

### Constants

#### `EDGE_TYPE_PRIORITY`

An object defining the display priority for different edge types (lower value means higher priority).

- **craft**: 0
- **repair**: 1
- **upgrade**: 2
- **recycle**: 3
- **salvage**: 4
- **trade**: 5
```

--------------------------------

### ItemCard Component

Source: https://context7.com/wangyz1999/arcforge/llms.txt

The ItemCard component renders a single item tile in a grid, providing interactive features and displaying relevant item information.

```APIDOC
## ItemCard Component

Renders a single item tile in the grid with interactive features.

### Description

This component displays an item's details in a card format, including optional badges for price and weight, tracking functionality, and shortcuts to related actions like viewing its crafting graph.

### Component Usage

```typescript
import ItemCard from './components/items/ItemCard';

<ItemCard
  item={item}
  displayPrice={true}
  displayWeight={true}
  showTrackIcon={true}
  showSpecialIcons={true}
  showCraftGraphIcon={true}
  lightweightMode={false}
  onClick={() => setSelectedItem(item)}
  onTracked={() => toggleTracked(item.name)}
  isTrackedFunc={(name) => trackedItems.has(name)}
/>
```

### Props

- **item** (object) - The item data object to display.
- **displayPrice** (boolean) - Whether to display the sell price badge.
- **displayWeight** (boolean) - Whether to display the weight badge.
- **showTrackIcon** (boolean) - Whether to show the tracking eye button.
- **showSpecialIcons** (boolean) - Whether to show icons for special item types.
- **showCraftGraphIcon** (boolean) - Whether to show the shortcut button for the crafting graph.
- **lightweightMode** (boolean) - Disables hover animations for performance optimization.
- **onClick** (function) - Callback function when the item card is clicked.
- **onTracked** (function) - Callback function when the track icon is toggled.
- **isTrackedFunc** (function) - A function that returns whether an item is currently tracked.

### Special Type Icons

Icons displayed on cards for items with special properties:

- **workshop_upgrade**: `faWrench` (text-amber-400)
- **expedition**: `faRocket` (text-cyan-400)
- **candlelight**: `faFire` (text-yellow-400)
- **quest**: `faScroll` (text-rose-400)
- **safe_to_recycle**: `faRecycle` (text-green-400)
- **crafting_material**: `faCubes` (text-purple-400)
```

--------------------------------

### Item Data Interface Definition

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Defines the structure for all game items stored in the `data/items_database.json` file. This TypeScript interface includes properties for item name, wiki URL, infobox details, image URLs, and sources.

```typescript
// app/types/item.ts
interface Item {
  name: string;                    // "Power Rod"
  wiki_url: string;                // "https://arcraiders.wiki/wiki/Power_Rod"
  infobox: {
    image: string;                 // Wiki image path
    rarity: string;                // "Common" | "Uncommon" | "Rare" | "Epic" | "Legendary"
    quote?: string;                // Flavor text
    type?: string;                 // "Advanced Material", "Assault Rifle", etc.
    special_types?: string[];      // ["crafting_material", "workshop_upgrade"]
    weight?: number;               // 0.5
    sellprice?: number | number[]; // 100 or [100, 150]
    stacksize?: number;            // 99
    damage?: number;               // For weapons
    workshop_upgrades?: WorkshopUpgradeDetail[];
    expedition_parts?: ExpeditionDetail[];
    quests?: QuestDetail[];
    location?: string;
  };
  image_urls: {
    thumb?: string;                // Thumbnail URL
    original?: string;             // Full resolution URL
    file_page?: string;            // Wiki file page
  };
  sources?: string[];              // Where item can be found
}

// Example item from items_database.json:
const exampleItem: Item = {
  name: "Power Rod",
  wiki_url: "https://arcraiders.wiki/wiki/Power_Rod",
  infobox: {
    image: "Power_Rod.png",
    rarity: "Rare",
    type: "Advanced Material",
    special_types: ["crafting_material"],
    weight: 0.3,
    sellprice: 250,
    stacksize: 50
  },
  image_urls: {
    thumb: "https://arcraiders.wiki/images/thumb/Power_Rod.png"
  }
};
```

--------------------------------

### Crafting Graph Modal

Source: https://context7.com/wangyz1999/arcforge/llms.txt

The CraftingGraphModal component displays interactive crafting relationship graphs using Cytoscape.js. It supports different layout options and deep linking via URL parameters.

```APIDOC
## Crafting Graph Modal

Displays interactive crafting relationship graphs using Cytoscape.js.

### Description

This modal component allows users to visualize the crafting dependencies of items. It supports switching between graph and table layouts and can be controlled via URL parameters for deep linking and sharing.

### Component Usage

```typescript
import CraftingGraphModal, { CraftingLayout } from './components/graph/CraftingGraphModal';

function Page() {
  const [isOpen, setIsOpen] = useState(false);
  const [itemName, setItemName] = useState("Power Rod");
  const [layout, setLayout] = useState<CraftingLayout>("graph");

  return (
    <CraftingGraphModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      itemName={itemName}
      onItemChange={(name) => setItemName(name)}
      layout={layout}
      onLayoutChange={(newLayout) => setLayout(newLayout)}
    />
  );
}
```

### Props

- **isOpen** (boolean) - Controls the visibility of the modal.
- **onClose** (function) - Callback function when the modal is closed.
- **itemName** (string) - The name of the item to display the graph for.
- **onItemChange** (function) - Callback function when the item name changes.
- **layout** (CraftingLayout) - The current layout of the modal ('graph' or 'table').
- **onLayoutChange** (function) - Callback function when the layout changes.

### URL Parameters

- `/?graph=<itemName>`: Opens the graph view for the specified item.
- `/?graph=<itemName>&layout=table`: Opens the table view for the specified item.

### Sharing

Generates shareable URLs that include the item name and layout.

```javascript
const shareUrl = `${window.location.origin}/?graph=${encodeURIComponent(itemName)}`;
```

### Filters

- **edgeTypes** (Set<string>) - A set of edge types to be displayed in the graph (e.g., 'craft', 'repair', 'recycle', 'salvage', 'upgrade', 'trade').
```

--------------------------------

### Run ARC Forge Data Pipeline in Bash

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Executes the complete data pipeline for processing item data from the ARC Raiders Wiki using Python scripts. The pipeline includes scraping item and trader data, adjusting and enriching the data, and building a crafting relationship graph. It outputs several JSON files and a text file containing item names.

```bash
# Run the complete data pipeline
cd script
python run_pipeline.py

# Pipeline steps executed in order:
# 1. get_item_data_from_wiki.py  - Scrapes item data from wiki
# 2. get_trader_data_from_wiki.py - Scrapes trader information
# 3. adjust_item_data.py         - Normalizes and enriches data
# 4. build_relation_graph.py     - Builds crafting relationship graph

# Output files in data/ directory:
# - items_database.json    - Complete item data with infoboxes
# - items_relation.json    - Item relationships for graph visualization
# - traders_database.json  - Trader and shop data
# - names.txt             - List of all item names
```

--------------------------------

### Build Cytoscape Graph Elements (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Utility functions to construct Cytoscape graph elements from item relationships. It takes item data, lookups, selected edge types, and translation functions as input to generate nodes and edges for visualization. The output includes the graph elements, and grouped information for layout positioning.

```typescript
// app/utils/graphHelpers.ts
import { buildGraphElements, buildLayoutPositions, formatEdgeLabel } from './utils/graphHelpers';

// Build graph elements for an item's crafting relationships
const { elements, leftGrouped, rightGrouped } = buildGraphElements(
  currentItem,           // ItemData from items_relation.json
  itemsLookup,          // Map<string, ItemData> of all items
  selectedEdgeTypes,    // Set<string> e.g. new Set(['craft', 'recycle', 'trade'])
  translateItem,        // (name: string) => string
  translateRelation     // (key: string) => string
);

// Elements array contains nodes and edges for Cytoscape:
// - Center node: the selected item
// - Left nodes: input items (ingredients)
// - Right nodes: output items (products)
// - Edges: relationships with labels

// Build layout positions for the graph
const positions = buildLayoutPositions(elements, leftGrouped, rightGrouped);
// Returns a function: (node) => { x: number, y: number }

// Format edge labels with translations
const label = formatEdgeLabel(
  edge,                 // Edge object
  translateRelation,    // Translation function
  translateItem         // Item name translation
);
// Returns: "Craft (2x)" or "Trade [500 Credits]"

// Edge type priorities (lower = higher priority in display)
const EDGE_TYPE_PRIORITY = {
  'craft': 0,
  'repair': 1,
  'upgrade': 2,
  'recycle': 3,
  'salvage': 4,
  'trade': 5,
};

```

--------------------------------

### Category Configuration for Item Organization (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

The category system organizes items by type for filtering, primarily used in the sidebar UI. It maps specific item types to broader display categories and provides a list of all available categories. Additionally, it defines custom labels for special item types, enhancing user interface clarity.

```typescript
// app/config/categoryConfig.ts
import { typeToCategory, allCategories, specialTypeLabels } from './config/categoryConfig';

// Map item types to display categories
const typeToCategory: Record<string, string> = {
  "Assault Rifle": "Weapon",
  "SMG": "Weapon",
  "Pistol": "Weapon",
  "Shotgun": "Weapon",
  "Modification-Grip": "Modification",
  "Modification-Stock": "Modification",
  "Quick Use-Grenade": "Quick Use",
  "Quick Use-Regen": "Quick Use",
  "Advanced Material": "Loots",
  "Basic Material": "Loots",
  "Augment": "Equipment",
  "Shield": "Equipment",
};

// All category names for filter UI
const allCategories = ["Special", "Weapon", "Modification", "Quick Use", "Equipment", "Loots"];

// Labels for special item types
const specialTypeLabels: Record<string, string> = {
  workshop_upgrade: "Workshop Upgrade",
  expedition: "Expedition",
  candlelight: "Candlelight",
  safe_to_recycle: "Safe to Recycle",
  crafting_material: "Crafting Material",
  quest: "Quest",
  scrappy: "Scrappy",
};

// Get category for an item
const category = typeToCategory[item.infobox?.type || ""] || "Loots";

```

--------------------------------

### Graph Data Interface Definition

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Defines the structure for items and their crafting relationships used in the graph visualization. This TypeScript interface includes item details and an array of edges representing relationships like crafting, recycling, and trading.

```typescript
// app/types/graph.ts
interface Edge {
  name: string;                  // Related item name
  direction: 'in' | 'out';       // Input or output relationship
  relation: string;              // "craft_from", "recycle_to", "trade", etc.
  quantity?: number;             // Amount required/produced
  dependency?: Array<{ type: string; amount?: number; currency?: string }>;
  input_level?: string;          // Source item for recycle/salvage
  output_level?: string;         // Target item for upgrade
}

interface ItemData {
  name: string;
  node_type: 'item' | 'trader';
  wiki_url: string;
  infobox?: {
    image: string;
    rarity?: string;
    type?: string;
  };
  image_urls?: {
    thumb?: string;
    original?: string;
  };
  edges: Edge[];                 // All crafting relationships
}

// Example from items_relation.json:
const powerRodRelations: ItemData = {
  name: "Power Rod",
  node_type: "item",
  wiki_url: "https://arcraiders.wiki/wiki/Power_Rod",
  infobox: { rarity: "Rare", type: "Advanced Material" },
  edges: [
    { name: "Copper Wire", direction: "in", relation: "craft_from", quantity: 2 },
    { name: "Power Cell", direction: "in", relation: "craft_from", quantity: 1 },
    { name: "Advanced Weapon", direction: "out", relation: "craft_to", quantity: 1 }
  ]
};
```

--------------------------------

### Proxy Image API Endpoint

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Proxies external wiki images with aggressive caching to improve load times and avoid CORS issues. This TypeScript API route is designed for the Edge runtime for optimal performance and global caching.

```typescript
// API Route: app/api/proxy-image/route.ts
// Edge runtime for better performance and global caching

// Example usage - fetch a proxied wiki image
const imageUrl = "https://arcraiders.wiki/images/thumb/Power_Rod.png";
const proxyUrl = `/api/proxy-image?url=${encodeURIComponent(imageUrl)}`;

// Response headers include aggressive caching:
// Cache-Control: public, max-age=31536000, immutable
// CDN-Cache-Control: max-age=31536000

// In React components, use the proxy URL for item images:
<img
  src={`/api/proxy-image?url=${encodeURIComponent(item.image_urls.thumb)}`}
  alt={item.name}
/>
```

--------------------------------

### Rarity Configuration for Item Display (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

The rarity system configures display colors and sorting order for items. It defines hex color codes for rarity-specific borders and text, linear gradients for item card backgrounds, and a numerical order for sorting items by rarity. These configurations are used directly in component styling.

```typescript
// app/config/rarityConfig.ts
import { rarityColors, rarityGradients, rarityOrder } from './config/rarityConfig';

// Border and text colors by rarity
const rarityColors: Record<string, string> = {
  Common: '#717471',
  Uncommon: '#41EB6A',
  Rare: '#1ECBFC',
  Epic: '#d8299b',
  Legendary: '#fbc700',
};

// Background gradients for item cards
const rarityGradients: Record<string, string> = {
  Common: 'linear-gradient(to right, rgb(153 159 165 / 25%) 0%, rgb(5 13 36) 100%)',
  Uncommon: 'linear-gradient(to right, rgb(86 203 134 / 25%) 0%, rgb(5 13 36) 100%)',
  Rare: 'linear-gradient(to right, rgb(30 150 252 / 30%) 0%, rgb(5 13 36) 100%)',
  Epic: 'linear-gradient(to right, rgb(216 41 155 / 25%) 0%, rgb(5 13 36) 100%)',
  Legendary: 'linear-gradient(to right, rgb(251 199 0 / 25%) 0%, rgb(5 13 36) 100%)',
};

// Sort order (higher = more rare)
const rarityOrder: Record<string, number> = {
  Common: 1,
  Uncommon: 2,
  Rare: 3,
  Epic: 4,
  Legendary: 5,
};

// Usage in component styling
const borderColor = rarityColors[item.infobox?.rarity || "Common"];
const gradient = rarityGradients[item.infobox?.rarity || "Common"];

```

--------------------------------

### Internationalization System for UI and Item Translations (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

The i18n system manages UI string and item name translations for 14 languages. It uses a hook `useTranslation` to access translation functions (`t` for UI strings, `tItem` for item names) and language management functions. Client-side hydration status is also provided. Translation files are structured as JSON objects.

```typescript
// app/i18n/LanguageContext.tsx
import { useTranslation, useLanguage, SUPPORTED_LANGUAGES, Language } from './i18n';

// Supported languages
const languages: Language[] = [
  "en", "es", "fr", "de", "it", "pl", "pt", "ru",
  "tr", "ja", "ko", "zh", "zht", "ar"
];

// Using translations in components
function MyComponent() {
  const { t, tItem, language, setLanguage, isHydrated } = useTranslation();

  // Translate UI strings using dot notation keys
  const sortTitle = t("sort.title");           // "Sort by"
  const categoryWeapon = t("category.Weapon"); // "Weapons"
  const craftLabel = t("graph.craft");         // "Craft"

  // Translate item names (falls back to original if no translation)
  const itemName = tItem("Power Rod");         // "パワーロッド" in Japanese

  // Change language
  const switchToJapanese = () => setLanguage("ja");

  // Check if client-side hydration is complete
  if (!isHydrated) return <LoadingSpinner />;

  return <div>{t("buttons.search")}</div>;
}

// Translation file structure (app/i18n/translations/en.json):
{
  "sort.title": "Sort by",
  "sort.name": "Name",
  "sort.rarity": "Rarity",
  "category.Weapon": "Weapons",
  "category.Equipment": "Equipment",
  "graph.craft": "Craft",
  "graph.recycle": "Recycle",
  "buttons.search": "Search items...",
  "track.track": "Track this item",
  "track.untrack": "Untrack this item"
}
```

--------------------------------

### Item Card Component (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

A React component for rendering individual item tiles in a grid. It supports various display options for item details such as price, weight, tracking status, and special icons. The component is interactive, allowing clicks for detail views and tracking toggles.

```typescript
// app/components/items/ItemCard.tsx
import ItemCard from './components/items/ItemCard';

// Usage in grid component
<ItemCard
  item={item}                              // Item object
  displayPrice={true}                      // Show sell price badge
  displayWeight={true}                     // Show weight badge
  showTrackIcon={true}                     // Show tracking eye button
  showSpecialIcons={true}                  // Show special type icons
  showCraftGraphIcon={true}                // Show graph shortcut button
  lightweightMode={false}                  // Disable hover animations for performance
  onClick={() => setSelectedItem(item)}   // Open detail panel
  onTracked={() => toggleTracked(item.name)}
  isTrackedFunc={(name) => trackedItems.has(name)}
/>

// Special type icons displayed on cards:
const specialTypeIcons = {
  workshop_upgrade: { icon: faWrench, color: "text-amber-400" },
  expedition: { icon: faRocket, color: "text-cyan-400" },
  candlelight: { icon: faFire, color: "text-yellow-400" },
  quest: { icon: faScroll, color: "text-rose-400" },
  safe_to_recycle: { icon: faRecycle, color: "text-green-400" },
  crafting_material: { icon: faCubes, color: "text-purple-400" },
};

```

--------------------------------

### Filter and Sort Items in TypeScript

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Implements client-side filtering and sorting logic for the item database using React's useMemo hook. It handles search queries, type selections, and various sorting criteria like name, rarity, sell price, and weight. Dependencies include item data and translation functions.

```typescript
// app/page.tsx - Filtering and sorting logic
import { SortField } from './components/items/ItemFiltersPanel';

// Sort fields
type SortField = "name" | "rarity" | "sellprice" | "weight";

// Filter and sort items
const filteredAndSortedItems = useMemo(() => {
  let items = itemsData as Item[];

  // Search filter (works with both original and translated names)
  if (searchQuery.trim()) {
    const query = searchQuery.toLowerCase();
    items = items.filter(item =>
      item.name.toLowerCase().includes(query) ||
      tItem(item.name).toLowerCase().includes(query) ||
      item.infobox?.rarity?.toLowerCase().includes(query) ||
      item.infobox?.type?.toLowerCase().includes(query)
    );
  }

  // Type filter (supports both regular types and special types)
  if (selectedTypes.size > 0) {
    items = items.filter(item => {
      const matchesRegularType = selectedTypes.has(item.infobox?.type || "");
      const matchesSpecialType = item.infobox?.special_types?.some(
        st => selectedTypes.has(st)
      );
      return matchesRegularType || matchesSpecialType;
    });
  }

  // Sort by selected field
  items = [...items].sort((a, b) => {
    let result = 0;
    switch (sortField) {
      case "name":
        result = tItem(a.name).localeCompare(tItem(b.name));
        break;
      case "rarity":
        result = rarityOrder[a.infobox?.rarity || "Common"] -
                 rarityOrder[b.infobox?.rarity || "Common"];
        break;
      case "sellprice":
        result = (a.infobox?.sellprice || 0) - (b.infobox?.sellprice || 0);
        break;
      case "weight":
        result = (a.infobox?.weight || 0) - (b.infobox?.weight || 0);
        break;
    }
    return sortAscending ? result : -result;
  });

  return items;
}, [searchQuery, sortField, sortAscending, selectedTypes]);
```

--------------------------------

### Crafting Graph Modal Component (TypeScript)

Source: https://context7.com/wangyz1999/arcforge/llms.txt

A React component that displays interactive crafting relationship graphs using Cytoscape.js. It supports dynamic item selection, layout changes (graph or table view), and URL-based deep linking for sharing graph states. The component manages modal visibility and item name changes.

```typescript
// app/components/graph/CraftingGraphModal.tsx
import CraftingGraphModal, { CraftingLayout } from './components/graph/CraftingGraphModal';

// Usage in page component
function Page() {
  const [isOpen, setIsOpen] = useState(false);
  const [itemName, setItemName] = useState("Power Rod");
  const [layout, setLayout] = useState<CraftingLayout>("graph");

  return (
    <CraftingGraphModal
      isOpen={isOpen}
      onClose={() => setIsOpen(false)}
      itemName={itemName}
      onItemChange={(name) => setItemName(name)}
      layout={layout}                           // "graph" | "table"
      onLayoutChange={(newLayout) => setLayout(newLayout)}
    />
  );
}

// URL-based graph opening (supports deep linking)
// /?graph=Power%20Rod          - Opens graph view
// /?graph=Power%20Rod&layout=table - Opens table view

// Share functionality generates URLs:
const shareUrl = `${window.location.origin}/?graph=${encodeURIComponent(itemName)}`;

// Graph edge type filters
const edgeTypes = new Set(["craft", "repair", "recycle", "salvage", "upgrade", "trade"]);

```

--------------------------------

### Track Items using LocalStorage in TypeScript

Source: https://context7.com/wangyz1999/arcforge/llms.txt

Manages a user's tracked items using React's useState and useEffect hooks, persisting the state to localStorage. It provides functionality to toggle tracking status, check if an item is tracked, and integrates with a UI component for displaying tracked items. This functionality relies on the browser's localStorage API.

```typescript
// app/page.tsx - Tracking functionality
const [trackedItems, setTrackedItems] = useState<Set<string>>(new Set());

// Load from localStorage on mount
useEffect(() => {
  const raw = localStorage.getItem("tracked_items");
  if (raw) {
    const arr = JSON.parse(raw);
    setTrackedItems(new Set(Array.isArray(arr) ? arr : []));
  }
}, []);

// Toggle tracking for an item
const toggleItemTracked = (name: string) => {
  setTrackedItems(prev => {
    const next = new Set(prev);
    if (next.has(name)) {
      next.delete(name);
    } else {
      next.add(name);
    }
    localStorage.setItem("tracked_items", JSON.stringify(Array.from(next)));
    return next;
  });
};

// Check if item is tracked
const isTracked = (name: string) => trackedItems.has(name);

// TrackedItemsPanel displays all tracked items
<TrackedItemsPanel
  items={itemsData}
  trackedItems={trackedItems}
  isOpen={isTrackedOpen}
  onClose={() => setIsTrackedOpen(false)}
  onItemClick={setSelectedItem}
  onItemTracked={toggleItemTracked}
  isTrackedFunc={isTracked}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.