# XWUIGameBlueprintSelector

A blueprint-library browser for survival building. It lists `data.blueprints` (`{ id, name, icon, tier, unlocked, materials }`) with a tier label and a lock/unlock (🔒/✅) badge; locked entries are dimmed and non-clickable. Selecting an unlocked blueprint marks it, populates a side preview panel with its material requirements (`name x required`), and dispatches a `select` event with the blueprint id. Order the list with `conf_comp.sortBy` (`name`, `tier`, or `unlocked`), and toggle the preview and its requirements with `conf_comp.showPreview` / `conf_comp.showRequirements`. Drive `data.selectedId` and refresh with `updateData({ blueprints, selectedId })`.

## Basic Usage

Lists blueprints with lock states and tiers, previewing the selected one's material requirements.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Blueprint library with lock/unlock badges, tier sorting, and a material-requirements preview.
```

## Unlocked First

Sorts available blueprints to the top and unlocks a new tier live via `updateData()`.

```example
file: examples/UnlockedFirst.ts
html: examples/BasicUsage.html
title: Unlocked First
description: Unlocked-first sorting with a research unlock that flips a locked blueprint to clickable.
```

## Compact List

Hides the preview panel to show two lean, name-sorted blueprint lists side by side.

```example
file: examples/CompactList.ts
html: examples/BasicUsage.html
title: Compact List
description: Two preview-less, name-sorted blueprint lists for separate defense and utility tech trees.
```

```api
```
