### Auto-load remote tier list from URL query parameter

Source: https://context7.com/silverweed/tiers/llms.txt

This function reads the `?url=` query parameter, validates it, fetches the remote JSON, and loads it. Errors are logged to the console. Ensure the URL is URL-encoded.

```javascript
// Usage: open the page with a ?url= parameter pointing to a hosted JSON file
// https://silverweed.github.io/tiers?url=https%3A%2F%2Fexample.com%2Fmy_tierlist.json

// Internal implementation:
async function try_load_tierlist_json() {
    const load_from_url = new URLSearchParams(window.location.search).get('url');
    if (load_from_url !== null && is_url(load_from_url)) {
        try {
            let result = await fetch(load_from_url);
            result = await result.json();
            hard_reset_list();
            load_tierlist(result);
        } catch (e) { console.error(e); }
    }
}

// The URL must be URL-encoded to avoid issues with special characters:
// Original: https://example.com/tierlist.json
// Encoded:  https%3A%2F%2Fexample.com%2Ftierlist.json
```

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

### Enable drag-and-drop for a container element

Source: https://context7.com/silverweed/tiers/llms.txt

Adds event listeners to make an element a drop target for tier images. Handles image removal, insertion at the correct position, and visual feedback.

```javascript
// Called automatically for the untiered images section and each new row:
make_accept_drop(document.querySelector('.images')); // bottom pool
make_accept_drop(newRowDiv);                         // each tier row

// Drop handler behavior:
elem.addEventListener('drop', (evt) => {
    evt.preventDefault();
    // Remove image from old location
    // Create a new <span class="item"> wrapper
    // Insert at target_item_index within items_container
    // Same-row move adjusts index by -1 to keep left-of-target semantics
    unsaved_changes = true;
});
```

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

### Save Tier List with save_tierlist()

Source: https://context7.com/silverweed/tiers/llms.txt

Serializes the current tier list state, including title, rows, and untiered images (as Base64 Data URLs), into a JSON object. Triggers a browser file download. Use this to export the tier list for later use or sharing.

```javascript
// Triggered by the Export button — prompts user for a filename
document.getElementById('export-input').addEventListener('click', () => {
    let name = prompt('Please give a name to this tierlist');
    if (name) {
        save_tierlist(`${name}.json`);
    }
});

// Resulting JSON structure:
{
  "title": "My Anime Rankings",
  "rows": [
    {
      "name": "S",
      "color": "#ff6666",
      "imgs": [
        "data:image/png;base64,iVBORw0KGgo...",
        "data:image/jpeg;base64,/9j/4AAQSkZJRgAB..."
      ]
    },
    {
      "name": "A",
      "color": "#f0a731",
      "imgs": []
    }
  ],
  "untiered": [
    "data:image/png;base64,iVBORw0KGgo..."
  ]
}
```

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

### save_tierlist(filename)

Source: https://context7.com/silverweed/tiers/llms.txt

Serializes the current tier list state, including title, rows, and untiered images, into a JSON object and triggers a file download.

```APIDOC
## save_tierlist(filename)

### Description
Reads the current DOM state — title, all rows (name, header color, images), and the untiered image pool — and serializes everything into a JSON object. Images are stored as Base64 Data URLs (already embedded in `<img src>`). Triggers a browser file download.

### Parameters
* **filename** (string) - Required - The name for the downloaded JSON file.

### Returns
* (void) - This function triggers a file download and does not return a value.

### Example
```javascript
// Triggered by the Export button — prompts user for a filename
document.getElementById('export-input').addEventListener('click', () => {
    let name = prompt('Please give a name to this tierlist');
    if (name) {
        save_tierlist(`${name}.json`);
    }
});

// Resulting JSON structure:
{
  "title": "My Anime Rankings",
  "rows": [
    {
      "name": "S",
      "color": "#ff6666",
      "imgs": [
        "data:image/png;base64,iVBORw0KGgo...",
        "data:image/jpeg;base64,/9j/4AAQSkZJRgAB..."
      ]
    },
    {
      "name": "A",
      "color": "#f0a731",
      "imgs": []
    }
  ],
  "untiered": [
    "data:image/png;base64,iVBORw0KGgo..."
  ]
}
```
```

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

### Create draggable image element from Data URL

Source: https://context7.com/silverweed/tiers/llms.txt

Creates an `<img>` element from a Data URL, marks it as draggable, and attaches a mousedown handler. This function is used for loading images from disk or clipboard.

```javascript
// Loading images from disk via file input
document.getElementById('load-img-input').addEventListener('input', (evt) => {
    let images = document.querySelector('.images');
    for (let file of evt.target.files) {
        let reader = new FileReader();
        reader.addEventListener('load', (load_evt) => {
            let img = create_img_with_src(load_evt.target.result); // Data URL
            images.appendChild(img);
            unsaved_changes = true;
        });
        reader.readAsDataURL(file);
    }
});

// Pasting an image from clipboard
document.onpaste = (evt) => {
    let items = (evt.clipboardData || evt.originalEvent.clipboardData).items;
    for (let item of items) {
        if (item.kind === 'file') {
            let reader = new FileReader();
            reader.onload = (load_evt) => {
                let img = create_img_with_src(load_evt.target.result);
                document.querySelector('.images').appendChild(img);
            };
            reader.readAsDataURL(item.getAsFile());
        }
    }
};
```

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

### load_tierlist(serialized_tierlist)

Source: https://context7.com/silverweed/tiers/llms.txt

Restores a tier list from a parsed JSON object, reconstructing the DOM state including title, rows, and untiered images.

```APIDOC
## load_tierlist(serialized_tierlist)

### Description
Takes a parsed JSON object (matching the format produced by `save_tierlist`) and reconstructs the full DOM state: sets the title, creates all rows with their names and header colors, populates each row's items, and restores the untiered image pool. Calls `resize_headers()` at the end to normalize header widths.

### Parameters
* **serialized_tierlist** (object) - Required - A parsed JSON object representing the tier list state.

### Example
```javascript
// Triggered by the Import file input
document.getElementById('import-input').addEventListener('input', (evt) => {
    let file = evt.target.files[0];
    let reader = new FileReader();
    reader.addEventListener('load', (load_evt) => {
        let parsed = JSON.parse(load_evt.target.result);
        if (!parsed) { alert("Failed to parse data"); return; }
        hard_reset_list();      // wipe current state
        load_tierlist(parsed);  // rebuild from JSON
    });
    reader.readAsText(file);
});

// Manual programmatic usage:
const data = {
    title: "Loaded List",
    rows: [
        { name: "S", color: "#ff6666", imgs: ["data:image/png;base64,..."] },
        { name: "F", color: "#f45bed", imgs: [] }
    ],
    untiered: ["data:image/jpeg;base64,..."]
};
hard_reset_list();
load_tierlist(data);
```
```

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

### Switch between horizontal and vertical layout

Source: https://context7.com/silverweed/tiers/llms.txt

Toggles the `.vertical` CSS class on `.main-content` to switch between a stacked layout (top/bottom) and a side-by-side layout (left/right).

```javascript
// Constants
const LAYOUT_HORIZONTAL = 0;
const LAYOUT_VERTICAL   = 1;

// Toggle button cycles between the two layouts
document.getElementById('toggle-layout').addEventListener('click', () => {
    set_layout((cur_layout + 1) % 2);
});

// Direct call
set_layout(LAYOUT_VERTICAL);
// Adds class "vertical" to <section class="main-content">
// CSS then switches flex-flow: column → row, limits tierlist to 80% width,
// and limits toggleable-container to max-width: 25%

set_layout(LAYOUT_HORIZONTAL);
// Removes class "vertical" — reverts to default stacked layout
```

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

### Add Tier Row with add_row()

Source: https://context7.com/silverweed/tiers/llms.txt

Inserts a new tier row DOM element at a specified index with a given name. Automatically assigns a color and sets up drag-and-drop functionality. Use to dynamically expand the tier list.

```javascript
const newRow = add_row(0, 'GOD TIER');
// newRow is a <div class="row"> appended to .tierlist at index 0
// Header is colored #ff6666 (first TIER_COLORS entry)
// Row now accepts image drops and shows +/- management buttons on hover

// Add an empty tier at the end
const lastIndex = tierlist_div.children.length;
add_row(lastIndex, '');
```

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

### add_row(index, name)

Source: https://context7.com/silverweed/tiers/llms.txt

Inserts a new tier row into the tier list at a specified index with a given name. It automatically assigns a color and sets up drag-and-drop functionality.

```APIDOC
## add_row(index, name)

### Description
Creates a full tier row DOM element (header span, items span, +/- row-management buttons) and inserts it into the tier list at the specified zero-based index. Returns the created `<div>` element. Automatically assigns a color from `TIER_COLORS` and sets up drag-and-drop acceptance on the new row.

### Parameters
* **index** (number) - Required - The zero-based index at which to insert the new row.
* **name** (string) - Required - The name to display for the new tier row.

### Returns
* (`HTMLDivElement`) - The newly created tier row `<div>` element.

### Example
```javascript
// Add a new tier labeled "GOD TIER" at position 0 (top of the list)
const newRow = add_row(0, 'GOD TIER');

// Add an empty tier at the end
const lastIndex = tierlist_div.children.length;
add_row(lastIndex, '');
```
```

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

### Load Tier List with load_tierlist()

Source: https://context7.com/silverweed/tiers/llms.txt

Restores a tier list from a parsed JSON object. Reconstructs the DOM, including title, rows, colors, images, and the untiered pool. This function is typically used after importing a saved tier list file.

```javascript
// Triggered by the Import file input
document.getElementById('import-input').addEventListener('input', (evt) => {
    let file = evt.target.files[0];
    let reader = new FileReader();
    reader.addEventListener('load', (load_evt) => {
        let parsed = JSON.parse(load_evt.target.result);
        if (!parsed) { alert("Failed to parse data"); return; }
        hard_reset_list();      // wipe current state
        load_tierlist(parsed);  // rebuild from JSON
    });
    reader.readAsText(file);
});

// Manual programmatic usage:
const data = {
    title: "Loaded List",
    rows: [
        { name: "S", color: "#ff6666", imgs: ["data:image/png;base64,..."] },
        { name: "F", color: "#f45bed", imgs: [] }
    ],
    untiered: ["data:image/jpeg;base64,..."]
};
hard_reset_list();
load_tierlist(data);
```

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

### Recalculate Tier Header Colors

Source: https://context7.com/silverweed/tiers/llms.txt

Assigns colors from the TIER_COLORS palette to row headers. If idx is provided, only that row is updated; if omitted, all rows are recolored in sequence. Also syncs the hidden input type="color" picker value stored in each header.

```javascript
const TIER_COLORS = [
    '#ff6666', // S — red
    '#f0a731', // A — orange
    '#f4d95b', // B — yellow
    '#66ff66', // C — green
    '#58c8f4', // D — light blue
    '#5b76f4', // E — blue
    '#f45bed', // F — pink
];
```

```javascript
// Recolor all rows (e.g., after loading a list without stored colors)
recompute_header_colors();
```

```javascript
// Recolor only the newly inserted row at index 2
add_row(2, 'NEW');
recompute_header_colors(2);
```

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

### Remove Tier Row with rm_row()

Source: https://context7.com/silverweed/tiers/llms.txt

Removes a tier row by its zero-based index. Images within the row are moved to the untiered pool before removal. This function is typically triggered by the row's delete button, with a confirmation prompt for non-empty rows.

```javascript
// Remove the second row (index 1); its images return to the untiered pool
rm_row(1);

// Triggered by the "-" button on each row:
btn_rm.addEventListener('click', (evt) => {
    let rows = Array.from(tierlist_div.querySelectorAll('.row'));
    if (rows.length < 2) return; // always keep at least one row
    let idx = rows.indexOf(evt.target.parentNode.parentNode);
    if (rows[idx].querySelectorAll('img').length === 0 ||
        confirm(`Remove tier ${rows[idx].querySelector('.header label').innerText}?`)) 
    {
        rm_row(idx);
    }
});
```

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

### rm_row(idx)

Source: https://context7.com/silverweed/tiers/llms.txt

Removes a tier row from the tier list by its index. Images within the row are moved to the untiered pool before removal.

```APIDOC
## rm_row(idx)

### Description
Removes the row at the given zero-based index from the tier list. Any images inside the row are first moved back to the untiered pool via `reset_row()`, so no images are lost.

### Parameters
* **idx** (number) - Required - The zero-based index of the row to remove.

### Example
```javascript
// Remove the second row (index 1); its images return to the untiered pool
rm_row(1);

// Triggered by the "-" button on each row:
btn_rm.addEventListener('click', (evt) => {
    let rows = Array.from(tierlist_div.querySelectorAll('.row'));
    if (rows.length < 2) return; // always keep at least one row
    let idx = rows.indexOf(evt.target.parentNode.parentNode);
    if (rows[idx].querySelectorAll('img').length === 0 ||
        confirm(`Remove tier ${rows[idx].querySelector('.header label').innerText}?`)) {
        rm_row(idx);
    }
});
```
```

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