# XWUIItemBrowser

An Explorer-style polymorphic item renderer: one item tree (`XWUIItemBrowserItem[]`) drives thirteen view modes - `extraLarge`/`lg`/`md`/`sm` icon grids, `list`, `details` (table), `tiles`, `content`, `tree`, `gallery`, `sheet`, `cards`, and `catalog` - switchable via the toolbar (`XWUIViewSwitcher`) or `setViewMode()`. It composes `XWUIShell` for the three-pane layout (FIRST = navigation tree, BODY = active view, LAST = properties/preview), and delegates rendering to `XWUITreeTable`, `XWUISpreadsheet`, `XWUIImageList`, `XWUIDescriptionList`, `XWUILayoutFlow`, `XWUIItemGroup`, and friends. Folder drill-down, breadcrumb navigation, search/filter, multi/single selection, sort menus, Windows-style "Show" display options (navigation/details/preview panes, checkboxes, hidden items), keyboard shortcuts, and a responsive mobile breakpoint are all built in. Drive it via `setItems()`, `loadFeed()`/`loadPreset()` (see `presets/` for ready-made feeds - file explorer, Steam library, inbox, Control Panel), `navigateTo()`/`navigateUp()`, `setSearchQuery()`, `setSort()`, and `setSelection()`; subscribe with `onItemClick`, `onSelect`, `onViewModeChange`, `onDisplayOptionsChange`, and `onNavigate`.

## Usage

```ts
import { XWUIItemBrowser } from './XWUIItemBrowser';

const browser = new XWUIItemBrowser(
  document.getElementById('app')!,
  {
    items: [
      { id: 'docs', label: 'Documents', children: [
        { id: 'readme', label: 'README.md', fields: { size: '4 KB' } },
        { id: 'spec', label: 'spec.pdf', fields: { size: '120 KB' } },
      ] },
      { id: 'photo', label: 'cover.png', fields: { size: '2 MB' } },
    ],
  },
  {
    viewMode: 'details',
    allowedViewModes: ['list', 'details', 'tiles', 'tree'],
    searchable: true,
    displayOptions: { navigationPane: true, previewPane: true },
  }
);

browser.onItemClick((item) => console.log('clicked', item.id));
browser.setViewMode('tree');
```

## Basic Usage

A simple file list with size fields and a searchable toolbar.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A simple file list with size fields and a searchable toolbar.
```

## Tree with navigation pane

A hierarchical folder tree with the navigation pane and selection checkboxes on.

```example
file: examples/TreeWithPanes.ts
html: examples/TreeWithPanes.html
title: Tree with navigation pane
description: A hierarchical folder tree with the navigation pane and selection checkboxes on.
```

## Gallery view

An image gallery laid out in tiles with a fixed column count and row height.

```example
file: examples/GalleryView.ts
html: examples/GalleryView.html
title: Gallery view
description: An image gallery laid out in tiles with a fixed column count and row height.
```

```api
```