### Media Query Example

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Apply styles based on screen width.

```CSS
@media (min-width / max-width) { ... }
```

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

### Use Loaded Components

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Example of using the 'card' and 'badge-row' components after their file has been loaded.

```html
<card>
  <h2>Title</h2>
  <badge-row>
    <badge>New</badge>
    <badge>Hot</badge>
  </badge-row>
</card>
```

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

### Recommended Development Setup with Rebuild

Source: https://github.com/blushister/tesseraui/wiki/Hot-Reload

Rebuild the screen on init to ensure it reloads correctly, especially after pressing F3+T. This includes invalidating the cache and rebuilding the template.

```java
@Override
protected void init() {
    // Always rebuild on init so pressing F3+T re-loads the screen too
    rebuild();
}

private void rebuild() {
    TesseraHotReload.invalidateAll();   // call only in dev builds
    root = TesseraTemplateRenderer.build(
        TesseraTemplate.load("yourmod:ui/my_screen"),
        model, handlers,
        px, py, pw, ph
    );
}
```

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

### TesseraPalette Example Usage

Source: https://github.com/blushister/tesseraui/wiki/Color-and-Palette

Illustrates how to use constants from TesseraPalette to style UI components like panels and labels, ensuring a consistent design.

```java
TesseraPanel card = TesseraPanel.column(x, y, w, h)
    .background(TesseraPalette.BG2)
    .border(1, TesseraPalette.COPPER_LO)
    .padding(6).gap(4);

card.add(new TesseraLabel(0, 0, w - 12, 10, "Title")
    .color(TesseraPalette.COPPER_HI)
    .fontSize(8f));

card.add(new TesseraLabel(0, 0, w - 12, 9, "Description")
    .color(TesseraPalette.CREAM_DIM)
    .fontSize(6f));
```

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

### CSS Animation Examples

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Demonstrates applying keyframe animations to card elements. Includes an infinite 'pulse' animation, an alternating 'flash' animation, and a single-shot 'fade-in' animation.

```css
/* Infinite loop — heartbeat effect */
.card-live {
  background: #1a2a1a;
  border: 1px solid #22c55e;
  animation: pulse 1500ms ease-in-out infinite;
}

/* Infinite loop, reverse on alternating cycles — flicker */
.card-flash {
  background: #1e1e3a;
  border: 1px solid #3b82f6;
  animation: flash 800ms ease-in-out infinite alternate;
}

/* Single shot — plays once on screen open */
.card-fadein {
  background: #1e2433;
  border: 1px solid #b87333;
  animation: fade-in 600ms ease-out 1;
}
```

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

### Java API for @keyframes Animation

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Shows how to programmatically start a @keyframes animation on a panel using its style and a stylesheet.

```java
// Start a @keyframes animation
panel.cssAnimation(style.animations, sheet);
```

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

### CSS Transition Example

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Applies a transition to the background and border-color properties of a card element on hover. The transition occurs over 250ms with an ease-out timing function.

```css
.card {
  background:  #1e2433;
  border: 1px solid #b87333;
  transition: background 250ms ease-out, border-color 250ms ease-out;
}

.card:hover {
  background:   #2a3450;
  border-color: #e8a24a;
}
```

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

### CSS Multiple Selectors

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Example of applying styles to multiple selectors (h1, h2, h3) simultaneously.

```css
h1, h2, h3 { font-size: 9px; }
```

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

### Responsive Design with Media Queries

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Adapt the layout of your web page based on the viewport width using CSS media queries. This example shows how to conditionally display a sidebar.

```css
/* Default: narrow layout */
.sidebar { display: none; }

/* Wide viewports (GUI Scale 1 on a large monitor) */
@media (min-width: 521px) {
  .sidebar { display: flex; }
}
```

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

### CSS Tag Selector

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Example of a basic CSS tag selector targeting all 'button' elements.

```css
button { }
```

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

### CSS Class Selector

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Example of a CSS class selector targeting elements with the class 'my-panel'.

```css
.my-panel { }
```

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

### CSS @keyframes Definitions

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Provides examples of defining keyframe animations named 'pulse', 'flash', and 'fade-in'. These animations specify changes in background and border-color at different stages.

```css
@keyframes pulse {
  from { background: #1a2a1a; border-color: #22c55e; }
  50%  { background: #14532d; border-color: #4ade80; }
  to   { background: #1a2a1a; border-color: #22c55e; }
}

@keyframes flash {
  from { background: #1e1e3a; border-color: #3b82f6; }
  to   { background: #1e3a7a; border-color: #60a5fa; }
}

@keyframes fade-in {
  from { background: #3a1a1a; border-color: #ef4444; }
  to   { background: #1e2433; border-color: #b87333; }
}
```

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

### Create and Configure TesseraInput

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiate a TesseraInput with position and dimensions, then configure its placeholder, default text, maximum length, suggestions, and appearance.

```java
TesseraInput input = new TesseraInput(0, 0, 120, 14);
input
    .placeholder("Enter name…")
    .text("default")
    .maxLength(32)
    .suggestions(List.of("minecraft:diamond", "minecraft:emerald"))
    .autocomplete(true)
    .bgColor(0xFF2A2010)
    .borderColor(TesseraPalette.COPPER_LO)
    .textColor(TesseraPalette.CREAM)
    .padding(5, 3)
    .onChange(value -> this.name = value)
    .onSubmit(value -> this.save());
```

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

### CSS ID Selector

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Example of a CSS ID selector targeting an element with the ID 'main-title'.

```css
#main-title { }
```

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

### Open Basic Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens the basic test screen to demonstrate labels, buttons, and basic layout.

```bash
/tessera test
```

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

### Create and Configure TesseraLabel

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiate a TesseraLabel with position and dimensions, then customize its appearance and behavior.

```java
TesseraLabel label = new TesseraLabel(0, 0, width, height, "Hello world");
label
    .color(TesseraPalette.CREAM)
    .fontSize(7f)
    .fontWeight(700)             // bold
    .textAlign("center")
    .wrap(true)                  // enable word-wrap
    .opacity(0.8f);
```

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

### Create Custom TesseraScreen

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Extend TesseraScreen to build custom game screens. Override init() to set up the UI and tesseraRoot() to return the root panel.

```java
public class MyScreen extends TesseraScreen {

    private TesseraPanel root;

    public MyScreen() {
        super(Component.literal("My Screen"));
    }

    @Override
    protected void init() {
        rebuild();
    }

    private void rebuild() {
        int pw = Math.min(width, 400);
        int ph = Math.min(height, 260);
        root = TesseraPanel.column((width - pw) / 2, (height - ph) / 2, pw, ph)
                .background(TesseraPalette.BG0)
                .border(1, TesseraPalette.COPPER_LO)
                .padding(8).gap(6);

        root.add(new TesseraLabel(0, 0, pw - 16, 10, "My Screen")
                .color(TesseraPalette.COPPER_HI).fontSize(8f));

        root.layout();
    }

    @Override
    protected TesseraPanel tesseraRoot() { return root; }

    @Override
    public boolean isPauseScreen() { return false; }
}
```

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

### Create and Configure TesseraButton

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiate a TesseraButton with position and dimensions, then set its label, colors, and click handler.

```java
TesseraButton btn = new TesseraButton(0, 0, 80, 14);
btn
    .label("Save")
    .bgColor(0xFF5C3A1E)
    .labelColor(TesseraPalette.COPPER_HI)
    .fontSize(7f)
    .onClick(this::onSave)
    .hoverBgColor(0xFF7C5A2E);
```

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

### Open HTML Rendering Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to explore the full HTML template pipeline.

```bash
/tessera test-html
```

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

### Open Drag and Drop Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate draggable widgets and drop zones.

```bash
/tessera test-v18
```

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

### Open Components Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to explore the component system, including `<template>` and `<slot>`.

```bash
/tessera test-v14
```

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

### Open Low-Level Primitives Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen demonstrating low-level primitives like panels, borders, and padding.

```bash
/tessera test-low
```

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

### Create and Configure TesseraTabPanel

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a tab panel and adds two tabs, each containing a panel with labels. The panels are laid out using column layout.

```java
TesseraTabPanel tabs = new TesseraTabPanel(0, 0, 200, 120);

TesseraPanel generalTab = TesseraPanel.column(0, 0, 200, 106).padding(6).gap(4);
generalTab.add(new TesseraLabel(0, 0, 188, 10, "General settings"));
generalTab.layout();

TesseraPanel advancedTab = TesseraPanel.column(0, 0, 200, 106).padding(6).gap(4);
advancedTab.layout();

tabs.addTab("General",  generalTab);
tabs.addTab("Advanced", advancedTab);
```

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

### Open Item Slots Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen demonstrating item slots and inventory pickers.

```bash
/tessera test-v17
```

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

### Project File Structure for TesseraUI

Source: https://github.com/blushister/tesseraui/wiki/Getting-Started

Illustrates the typical project directory structure for a mod using TesseraUI, showing the placement of Java screen classes and UI resource files.

```text
src/main/
├── java/com/yourmod/
│   └── MyScreen.java
└── resources/assets/yourmod/
    └── ui/
        ├── my_screen.html
        └── my_screen.css
```

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

### Create and Configure TesseraIcon

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates an icon with texture, tint, size, and an on-click event handler.

```java
TesseraIcon icon = new TesseraIcon(0, 0, 16, 16);
icon
    .texture(ResourceLocation.fromNamespaceAndPath("yourmod", "textures/gui/icons/settings.png"))
    .tint(TesseraPalette.COPPER_HI)
    .size(16, 16)
    .onClick(this::openSettings);
```

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

### Open Grid & Variables Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen showcasing grid layout and CSS variables.

```bash
/tessera test-v12
```

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

### Open Positioning Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate absolute positioning.

```bash
/tessera test-v19
```

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

### Create and Configure TesseraDropdown

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a dropdown menu, adds options, sets a default selection, and configures an on-select event handler.

```java
TesseraDropdown dd = new TesseraDropdown(0, 0, 100, 14);
dd.addOption("easy",   "Easy");
dd.addOption("normal", "Normal");
dd.addOption("hard",   "Hard");
dd.select("normal");
dd.onSelect(value -> this.difficulty = value);
```

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

### Open CSS Animations Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate CSS animations using `transition` and `@keyframes`.

```bash
/tessera test-v23
```

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

### Open Border Radius Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate rounded corners using border radius.

```bash
/tessera test-radius
```

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

### Open Media Queries Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate the usage of `@media` queries.

```bash
/tessera test-v13
```

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

### Create and Configure TesseraTextArea

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a multi-line text field with placeholder, max length, background color, and an on-change event handler.

```java
TesseraTextArea ta = new TesseraTextArea(0, 0, 200, 60);
ta
    .placeholder("Write here…")
    .maxLength(2048)
    .bgColor(0xFF2A2010)
    .onChange(value -> this.notes = value);
```

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

### Create TesseraPanel Layouts

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiate different panel layouts like columns, rows, or grids with specified dimensions and positions.

```java
// Column (vertical stack)
TesseraPanel panel = TesseraPanel.column(x, y, width, height);

// Row (horizontal stack)
TesseraPanel row = TesseraPanel.row(x, y, width, height);

// Grid (N columns)
TesseraPanel grid = TesseraPanel.grid(3, x, y, width, height);
```

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

### Java API for CSS Transitions

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Demonstrates how to programmatically apply CSS transitions to a panel using the TesseraStyle base and hover styles.

```java
// Apply CSS transitions
TesseraStyle base  = /* resolved base style  */;
TesseraStyle hover = /* resolved hover style */;
panel.cssTransitions(style.transitions, base, hover);
```

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

### Open Medium Complexity Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen with medium complexity, showcasing forms, inputs, and flex layout.

```bash
/tessera test-medium
```

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

### Programmatic Java API for UI Elements

Source: https://github.com/blushister/tesseraui/blob/master/README.md

Demonstrates creating UI elements and animations directly in Java without an HTML template. Includes keyframe animations and conditional rendering.

```java
// Keyframe animation
TesseraKeyframes pulse = TesseraKeyframes.builder("pulse")
    .from(s -> { s.background = 0xFF1a2a1a; s.borderColor = 0xFF22c55e; })
    .at(50, s -> { s.background = 0xFF14532d; s.borderColor = 0xFF4ade80; })
    .to(s ->   { s.background = 0xFF1a2a1a; s.borderColor = 0xFF22c55e; })
    .build();

TesseraPanel card = TesseraPanel.column(x, y, 120, 60)
    .padding(8).gap(4)
    .animate(pulse, 1500, TesseraEasing.EASE_IN_OUT)          // infinite loop
    .hoverTransition("border-color", 150, TesseraEasing.EASE_OUT, 0xFF22c55e, 0xFF4ade80);

// v-for / v-if helpers
panel.addFor(playerList, p ->
    new TesseraLabel(0, 0, 120, 10, p.getName()).color(TesseraPalette.CREAM));

panel.addIf(isAdmin, () -> buildAdminPanel());
```

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

### Creating and Populating a TesseraItemGrid (Java)

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Initialize a TesseraItemGrid with specified dimensions and slot size. Items can be set by index using ItemStack objects.

```java
// 4 columns × 2 rows, each slot 22 px
TesseraItemGrid grid = new TesseraItemGrid(x, y, 4, 2, 22);

grid.setItem(0, new ItemStack(Items.DIAMOND));
grid.setItem(1, new ItemStack(Items.GOLD_INGOT, 3));
// Index formula: row * cols + col

panel.add(grid);
```

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

### Create TesseraVirtualList

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiate a virtual list for efficient rendering of large datasets. Requires item data, row height, and a row renderer function.

```java
List<TesseraModel> items = /* ... */;
int rowHeight = 18;

TesseraVirtualList list = TesseraVirtualList.of(items, rowHeight, model -> {
    TesseraPanel row = TesseraPanel.row(0, 0, listWidth, rowHeight).gap(4).padding(2, 4, 2, 4);
    row.add(new TesseraLabel(0, 0, 0, 10, model.resolve("name"))).color(TesseraPalette.CREAM));
    row.layout();
    return row;
});
list.setSize(listWidth, 100);
list.background(TesseraPalette.BG1);
panel.add(list);
```

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

### Open Form Inputs Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen showcasing various form inputs like dropdowns, checkboxes, and sliders.

```bash
/tessera test-v22
```

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

### Enable Input Autocomplete and Navigation

Source: https://github.com/blushister/tesseraui/wiki/Changelog

TesseraInput and `<input>` elements now support suggestions, autocomplete, and navigation using Up/Down keys, with Enter/Tab to accept.

```html
<input type="text" suggestions="['apple', 'banana', 'cherry']" autocomplete>

```

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

### Create and Configure TesseraBadge

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a badge with text, color, text color, and horizontal padding.

```java
TesseraBadge badge = new TesseraBadge(0, 0, 12, "Epic", 0xFF8B5CF6);
badge.textColor(0xFFFFFFFF).paddingH(6);
```

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

### Open i18n Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate internationalization using `data-i18n` and `{{ t:key }}`.

```bash
/tessera test-v21
```

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

### Creating a Display-Only TesseraItemSlot (Java)

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Instantiate TesseraItemSlot and set the desired ItemStack to display. The x, y coordinates and size are required.

```java
TesseraItemSlot slot = new TesseraItemSlot(x, y, 32);
slot.item(new ItemStack(Items.DIAMOND));
```

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

### Create and Apply Keyframe Animations

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Define keyframe animations in Java using `TesseraKeyframes.builder` and apply them to a panel with duration, easing, and iteration count.

```java
TesseraKeyframes pulse = TesseraKeyframes.builder("pulse")
    .from(s -> { s.background = 0xFF1a2a1a; s.borderColor = 0xFF22c55e; })
    .at(50, s -> { s.background = 0xFF14532d; s.borderColor = 0xFF4ade80; })
    .to(s ->   { s.background = 0xFF1a2a1a; s.borderColor = 0xFF22c55e; })
    .build();

// Infinite loop
panel.animate(pulse, 1500, TesseraEasing.EASE_IN_OUT);

// N iterations
panel.animate(pulse, 1500, TesseraEasing.EASE_IN_OUT, 3);

// Infinite, ping-pong
panel.animate(pulse, 800, TesseraEasing.EASE_IN_OUT, -1, true);
```

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

### Open Rich Text Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to demonstrate inline elements and mixed styles in rich text.

```bash
/tessera test-v20
```

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

### TesseraItemSlot with Inventory Picker (Java)

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Enable inventory picking for a TesseraItemSlot to allow players to select items. An onItemPicked handler can process the selected item.

```java
TesseraItemSlot slot = new TesseraItemSlot(x, y, 32);
slot.item(new ItemStack(Items.AIR))
    .inventoryPicker(true)
    .onItemPicked(stack -> {
        this.selectedItem = stack;
        myConfig.save();
    });
```

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

### Open Tables Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen demonstrating table features, including `<table>`, `<thead>`, `<tbody>`, and sorting.

```bash
/tessera test-table
```

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

### Create and Configure TesseraSlider

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a slider with range, initial value, and an on-input event handler.

```java
TesseraSlider slider = new TesseraSlider(0, 0, 100, 10, 0f, 100f, 50f);
slider.onInput(value -> this.volume = Float.parseFloat(value));
```

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

### Style TesseraPanel Background, Border, and Padding

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Apply background color, border thickness and color, border radius, and padding to a panel.

```java
panel
    .background(0xFF1A1208)          // ARGB colour
    .border(1, 0xFFB87333)           // thickness, ARGB colour
    .borderRadius(4)
    .padding(8)                      // all sides
    .padding(4, 8, 4, 8)             // top, right, bottom, left
    .gap(6)                          // space between children
    .opacity(0.9f);
```

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

### Build Tesseraui Model from Map

Source: https://github.com/blushister/tesseraui/wiki/Data-Binding

Constructs a Tesseraui model by populating a Map with entry names and counts from a list. Use this when your data is already in a collection.

```java
Map<String, String> data = new HashMap<>();
data.put("entries", String.valueOf(entries.size()));
for (int i = 0; i < entries.size(); i++) {
    data.put("entry.name."  + i, entries.get(i).getName());
    data.put("entry.count." + i, String.valueOf(entries.get(i).getCount()));
}
TesseraModel model = TesseraModel.of(data);
```

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

### Open Directives Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen demonstrating directives such as `v-for`, `v-if`, and `v-show`.

```bash
/tessera test-v15
```

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

### Java Screen Implementation with HTML Template

Source: https://github.com/blushister/tesseraui/blob/master/README.md

Java code to initialize and display a screen defined by an HTML template. It loads the template, sets up data models, and maps event handlers.

```java
public class MyScreen extends TesseraScreen {

    private TesseraPanel root;

    public MyScreen() { super(Component.literal("My Screen")); }

    @Override
    protected void init() {
        TesseraModel model = TesseraModel.of(Map.of(
            "player.name", Minecraft.getInstance().player.getName().getString()
        ));
        int pw = Math.min(width, 300), ph = Math.min(height, 200);
        root = TesseraTemplateRenderer.build(
            TesseraTemplate.load("yourmod:ui/my_screen"),
            model,
            Map.of("save", this::onSave, "cancel", this::onCancel),
            (width - pw) / 2, (height - ph) / 2, pw, ph
        );
        root.layout();
    }

    @Override protected TesseraPanel tesseraRoot() { return root; }
}
```

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

### Use Card Components with Named Slots

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Demonstrates using the 'card' component and injecting content into its 'title' slot and default slot.

```html
<row>
  <card>
    <h3 slot="title">Alpha</h3>
    <p>First card content.</p>
  </card>
  <card>
    <h3 slot="title">Beta</h3>
    <p>Second card content.</p>
  </card>
</row>
```

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

### TesseraPanel Creation

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Demonstrates how to create different types of TesseraPanel containers: column, row, and grid.

```APIDOC
## TesseraPanel Creation

### Description
Create core container widgets like columns, rows, or grids.

### Method
`TesseraPanel.column(x, y, width, height)`
`TesseraPanel.row(x, y, width, height)`
`TesseraPanel.grid(columns, x, y, width, height)`

### Parameters
- **x** (int) - The x-coordinate of the panel.
- **y** (int) - The y-coordinate of the panel.
- **width** (int) - The width of the panel.
- **height** (int) - The height of the panel.
- **columns** (int) - The number of columns for a grid panel.
```

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

### Create and Configure TesseraCheckbox

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Instantiates a checkbox with initial checked state and an on-toggle event handler.

```java
TesseraCheckbox cb = new TesseraCheckbox(0, 0, 10, 10, /* checked= */ false);
cb.onToggle(checked -> this.enabled = checked);
```

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

### Item Slot Theming with CSS

Source: https://github.com/blushister/tesseraui/wiki/HTML-Tags

Customize the background and border of item slots using CSS.

```css
item-slot {
  background: #120E0A;
  border-color: #5A3518;
}

item-slot:hover {
  background: #1C120B;
}
```

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

### Register a Drop Zone with String Payload Acceptance (Java)

Source: https://github.com/blushister/tesseraui/wiki/Drag-and-Drop

Implement a `TesseraDropZone` to define drop behavior. The `accepts` method checks if the payload is a String, and `onDrop` handles the dropped data.

```java
TesseraPanel dropZone = TesseraPanel.column(x, y, w, h)
    .background(TesseraPalette.BG1)
    .border(1, TesseraPalette.COPPER_LO);

dropZone.dropZone(new TesseraDropZone() {

    @Override
    public boolean accepts(Object payload) {
        return payload instanceof String;
    }

    @Override
    public void onDrop(Object payload) {
        String value = (String) payload;
        System.out.println("Dropped: " + value);
        // update your model, rebuild UI, etc.
    }

    @Override
    public Rect dropBounds() {
        return dropZone.bounds();
    }
});
```

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

### Optimize VirtualList Performance and Focus

Source: https://github.com/blushister/tesseraui/wiki/Changelog

`<virtual-list>` now uses a bounded cache around the visible window, preserves row focus, and forwards keyboard events for inputs within rows.

```html
<virtual-list>
  <!-- Optimized for performance and focus -->
</virtual-list>
```

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

### Enable Automatic Disk Watching

Source: https://github.com/blushister/tesseraui/wiki/Hot-Reload

Call TesseraHotReload.tryEnable() early in your mod's client initialization to automatically watch template files for changes. Do not use in production builds.

```java
@Mod.EventBusSubscriber(modid = MODID, bus = Mod.EventBusSubscriber.Bus.MOD, value = Dist.CLIENT)
public class ClientSetup {

    @SubscribeEvent
    public static void onClientSetup(FMLClientSetupEvent event) {
        if (FMLEnvironment.dist == Dist.CLIENT) {
            TesseraHotReload.tryEnable(FMLEnvironment.production == false);
        }
    }
}
```

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

### Manually Opening TesseraInventoryPicker (Java)

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Open the TesseraInventoryPicker overlay manually at a specified anchor point. A callback function handles the selected item.

```java
// Open near a widget; the picker clamps to screen bounds automatically
TesseraInventoryPicker.open(anchorX, anchorY, stack -> {
    mySlot.item(stack);
});
```

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

### Define Multiple Components in One File

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Defines two components, 'card' and 'badge-row', in a single HTML file. These components will be registered globally.

```html
<!-- components.html -->
<template name="card">
  <col class="card">
    <slot/>
  </col>
</template>

<template name="badge-row">
  <row class="badge-row">
    <slot/>
  </row>
</template>

<!-- Main content — not shown (no non-template root element) -->
```

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

### Create TesseraModel from Map

Source: https://github.com/blushister/tesseraui/wiki/Data-Binding

Build a TesseraModel from a flat key-value map. All values are treated as strings.

```java
TesseraModel model = TesseraModel.of(Map.of(
    "player.name",   player.getName().getString(),
    "player.level",  String.valueOf(playerLevel),
    "player.health", String.valueOf((int) player.getHealth()),
    "items.count",   String.valueOf(items.size())
));
```

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

### TesseraPanel Sizing Utilities

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Provides utilities to measure the content height needed for a panel and adjust its size accordingly, followed by a layout update.

```APIDOC
## TesseraPanel Sizing Utilities

### Description
Utilities for determining and setting panel size based on content.

### Method
`panel.fitContentHeight()`
`panel.setSize(width, height)`
`panel.layout()`

### Returns
- **height** (int) - The calculated height needed to fit all content.
```

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

### Open Tabs & Lists Test Screen

Source: https://github.com/blushister/tesseraui/wiki/Dev-Commands

Opens a test screen to showcase tabs and virtual lists.

```bash
/tessera test-v16
```

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

### Basic HTML Template for TesseraUI Screen

Source: https://github.com/blushister/tesseraui/wiki/Getting-Started

A simple HTML template for a TesseraUI screen, including a title, a paragraph with player name binding, an input field, and a button.

```html
<col>
  <link rel="stylesheet" href="shared.css"/>
  <h2>My Mod</h2>
  <p>Welcome, {{ player.name }}!</p>
  <input id="playerName" value="{{ player.name }}" oninput="renamePlayer"/>
  <button onclick="openSettings">Settings</button>
</col>
```

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

### Programmatically Register a Component from Java

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Registers a component from a Java TesseraNode tree, useful for shared library components.

```java
TesseraNode templateRoot = /* parse or build a TesseraNode tree */;
TesseraComponentRegistry.register("my-widget", templateRoot);
```

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

### Use Prefixed Bindings in VirtualList v-for

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Rows in `<virtual-list v-for>` now accept documented prefixed bindings like `{{ row.name }}` and `{{ row.action }}`. Compatibility with bare keys like `{{ name }}` is maintained.

```html
<virtual-list v-for="item in items" :key="item.id">
  <div onclick="{{ row.action }}">{{ row.name }}</div>
</virtual-list>
```

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

### Enable Hotkey for Debug Overlay

Source: https://github.com/blushister/tesseraui/wiki/Changelog

To enable the keyboard debug toggle, set the system property `-Dtesseraui.debug.hotkey=true` and use `Ctrl+Alt+I`. This is opt-in.

```properties
-Dtesseraui.debug.hotkey=true
```

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

### Declare TesseraUI Dependency in mods.toml

Source: https://github.com/blushister/tesseraui/wiki/Getting-Started

Declare the TesseraUI dependency in your `neoforge.mods.toml` file to specify its requirements and side.

```toml
[[dependencies.yourmod]]
    modId = "tesseraui"
    type = "required"
    versionRange = "[1.0,)"
    ordering = "NONE"
    side = "CLIENT"
```

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

### Load Component File in Java

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Loads a file containing multiple component definitions so they can be used in the application.

```java
TesseraTemplate.load("yourmod:ui/components");
```

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

### Java ARGB Color Integers

Source: https://github.com/blushister/tesseraui/wiki/Color-and-Palette

Shows how to represent colors using standard Java 32-bit ARGB integers, compatible with Minecraft's format.

```java
int color = 0xFFB87333;   // fully opaque copper
int color = 0x80FFFFFF;   // 50% transparent white
int color = 0x00000000;   // fully transparent
```

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

### Add TesseraUI Dependency to build.gradle

Source: https://github.com/blushister/tesseraui/wiki/Getting-Started

Include the TesseraUI dependency in your project's build.gradle file. Ensure you use a concrete CurseForge file ID for reproducible builds.

```groovy
repositories {
    maven { url "https://cursemaven.com" }
}

dependencies {
    implementation "curse.maven:tesseraui-<project-id>:<file-id>"
}
```

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

### Java Class for TesseraUI Screen

Source: https://github.com/blushister/tesseraui/wiki/Getting-Started

Implements a custom screen using TesseraUI, handling initialization, rendering, and event callbacks for UI interactions.

```java
public class MyScreen extends TesseraScreen {

    private TesseraPanel root;
    private final TesseraRenderContext renderContext = new TesseraRenderContext();

    public MyScreen() {
        super(Component.literal("My Screen"));
    }

    @Override
    protected void init() {
        int pw = Math.min(width, 300);
        int ph = Math.min(height, 200);
        int px = (width  - pw) / 2;
        int py = (height - ph) / 2;

        TesseraModel model = TesseraModel.of(Map.of(
            "player.name", Minecraft.getInstance().player.getName().getString()
        ));

        root = TesseraTemplateRenderer.build(
            TesseraTemplate.load("yourmod:ui/my_screen"),
            model,
            Map.of("openSettings", this::openSettings),
            Map.of("renamePlayer", this::renamePlayer),
            renderContext,
            px, py, pw, ph
        );
    }

    @Override
    protected TesseraPanel tesseraRoot() { return root; }

    private void openSettings() {
        // open another screen or handle the click
    }

    private void renamePlayer(String value) {
        // update your screen state or config model
    }
}
```

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

### Add TesseraUI JAR to Gradle Project

Source: https://github.com/blushister/tesseraui/blob/master/README.md

Include the TesseraUI JAR file in your project's dependencies by placing it in the 'libs' folder and referencing it in 'build.gradle'.

```groovy
dependencies {
    implementation files('libs/tesseraui-1.1.jar')
}
```

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

### Loading Relative CSS from HTML

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Illustrates linking a CSS file using a relative path within an HTML template.

```html
<link rel="stylesheet" href="shared.css"/>
```

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

### Prepare Model Data for v-for

Source: https://github.com/blushister/tesseraui/wiki/Data-Binding

Prepare model data by mapping item properties to indexed keys. This is used on the model side to provide data for template iteration.

```java
TesseraModel model = TesseraModel.of(Map.of(
    "items",             String.valueOf(items.size()),   // count
    "item.name.0",       items.get(0).getName(),
    "item.rarity.0",     items.get(0).getRarity(),
    "item.name.1",       items.get(1).getName(),
    "item.rarity.1",     items.get(1).getRarity()
));
```

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

### CSS for Font Weight Simulation

Source: https://github.com/blushister/tesseraui/wiki/Font-System

Applies font-weight properties in CSS. TesseraUI simulates bold by drawing text with a shadow offset, as the Minecraft font lacks a true bold variant.

```css
.heading { font-weight: bold; }   /* or font-weight: 700 */
.body    { font-weight: normal; } /* or font-weight: 400 */
```

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

### Configure Box Sizing

Source: https://github.com/blushister/tesseraui/wiki/Layout-System

Control how element dimensions are calculated. 'border-box' includes padding and border in the width/height, while 'content-box' (default in TesseraUI) only includes content.

```css
/* Width includes border and padding (like most browsers default) */
.card { box-sizing: border-box; }

/* Width = content only (default TesseraUI behaviour) */
.card { box-sizing: content-box; }
```

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

### HTML Template for a Screen

Source: https://github.com/blushister/tesseraui/blob/master/README.md

Defines the structure and basic content of a UI screen using HTML-like syntax. Includes internationalization attributes and event handlers.

```html
<col>
  <h2 data-i18n="ui.yourmod.title">Settings</h2>
  <p>Hello, {{ player.name }}</p>

  <row>
    <button onclick="save"   data-i18n="ui.yourmod.save">Save</button>
    <button onclick="cancel" data-i18n="ui.yourmod.cancel">Cancel</button>
  </row>
</col>
```

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

### Stateful Inputs Across Rebuilds

Source: https://github.com/blushister/tesseraui/wiki/Data-Binding

Maintain input text, cursor, selection, and focus across template rebuilds by assigning stable IDs to stateful input elements and passing a TesseraRenderContext to the renderer.

```html
<input id="search" value="{{ search.default }}" oninput="onSearch"/>
```

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

### Create Dynamic Tesseraui Model with Lambda

Source: https://github.com/blushister/tesseraui/wiki/Data-Binding

Creates a Tesseraui model using a lambda expression for dynamic data resolution. Useful for values that change over time or are computed on demand.

```java
TesseraModel model = key -> {
    if (key.equals("time")) return LocalTime.now().toString();
    return null;
};
```

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

### Loading Shared CSS from HTML

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Shows how to link an external CSS file within an HTML template using the 'link' tag.

```html
<col>
  <link rel="stylesheet" href="yourmod:ui/shared.css"/>
  <h2 class="screen-title">Settings</h2>
</col>
```

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

### Displaying Items with <item-slot>

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Use the HTML <item-slot> tag to display items. Configure size, item, and whether to show the item count.

```html
<!-- Display only -->
<item-slot size="24" item="minecraft:diamond"/>

<!-- With item count -->
<item-slot size="24" item="minecraft:gold_ingot" show-count="true"/>

<!-- Clickable (wires onclick handler) -->
<item-slot size="24" item="minecraft:netherite_sword" onclick="onSlotClick"/>
```

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

### In-game Reload Command

Source: https://github.com/blushister/tesseraui/wiki/Hot-Reload

Use the /tessera reload command in-game to clear the template cache. The next screen opened will re-read its template from disk.

```text
/tessera reload
```

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

### Apply Hover Transitions to Panel Properties

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Define smooth transitions for properties like background and border-color on hover, specifying duration, easing, and target colors.

```java
panel.hoverTransition("background",  250, TesseraEasing.EASE_OUT, 0xFF1e2433, 0xFF2a3450)
     .hoverTransition("border-color", 250, TesseraEasing.EASE_OUT, 0xFFB87333, 0xFFE8A24A);
```

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

### Grid Layout Component

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Use the grid component for layout with column definitions.

```HTML
<grid cols="N"></grid>
```

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

### CSS Pseudo-states

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Illustrates styling for various CSS pseudo-states including hover, active, focus, and disabled.

```css
button:hover    { background: #7C5A2E; }
button:active   { background: #9C7A4E; }
input:focus     { border-color: #F0B27A; }
button:disabled { opacity: 0.4; }
```

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

### Grid Layout

Source: https://github.com/blushister/tesseraui/wiki/HTML-Tags

Creates a grid layout with a specified number of equal-width columns. Column widths can also be driven by CSS.

```html
<grid cols="3">
  <col class="card">…</col>
  <col class="card">…</col>
  <col class="card">…</col>
</grid>
```

```css
.my-grid { grid-template-columns: 2fr 1fr; }
```

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

### Flexbox Layout for Animated Cards

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Illustrates the necessary CSS properties (`flex: 1` and `min-height`) to ensure animated cards are correctly sized and distributed within a flexbox row layout.

```css
.card-live {
  flex: 1;
  min-height: 40px;
  animation: pulse 1500ms ease-in-out infinite;
}
```

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

### Handle Panel Click Events

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Attach click and right-click event listeners to a panel.

```java
panel.onClick(() -> System.out.println("clicked"));
panel.onRightClick(() -> openContextMenu());
```

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

### Configuring TesseraItemSlot Options (Java)

Source: https://github.com/blushister/tesseraui/wiki/Item-Slots

Customize various visual and functional aspects of a TesseraItemSlot, such as hiding the count, resizing, changing backgrounds, and setting click handlers.

```java
slot.showCount(false);             // hide stack count
slot.size(24);                     // resize
slot.slotBg(0xFF120E0A);           // normal background
slot.hoverBg(0xFF1C120B);          // hover background
slot.borderColor(0xFF5A3518);      // 1 px frame
slot.onClick(this::handleClick);   // custom click handler
```

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

### Apply CSS to Component Classes

Source: https://github.com/blushister/tesseraui/wiki/Component-System

Shows how to apply CSS styles to the classes used within a component's internal structure.

```css
/* card component */
.card        { background: #1e2433; border: 1px solid #b87333; padding: 6px; gap: 4px; }
.card-header { border-bottom: 1px solid #b87333; padding-bottom: 4px; }
.card-body   { padding-top: 4px; }
```

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

### HTML Input with Model-Bound Suggestions

Source: https://github.com/blushister/tesseraui/wiki/HTML-Tags

An input field where suggestions are dynamically provided by a model. It includes a callback for input events.

```html
<input id="mob" autocomplete="{{ mobSuggestions }}" oninput="onMob"/>
```

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

### v-show Directive

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Conditionally show or hide an element, preserving layout space.

```HTML
v-show="expr"
```

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

### v-for / v-if Helpers

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Provides helper methods for conditional rendering and list rendering, similar to Vue.js directives.

```APIDOC
## v-for / v-if Helpers

### Description
Conditionally add widgets based on data or conditions.

### Method
`panel.addFor(list, itemConsumer)`
`panel.addIf(condition, widget)`
`panel.addIf(condition, widgetFactory)`

### Parameters
- **list** (List) - The list of items to iterate over.
- **itemConsumer** (Consumer<T>) - Function to create a widget for each item.
- **condition** (boolean) - The condition to evaluate for rendering.
- **widget** (Widget) - The widget to add if the condition is true.
- **widgetFactory** (Supplier<Widget>) - A factory function to create the widget lazily if the condition is true.
```

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

### Make Tessera Panels Draggable with String Payload (Java)

Source: https://github.com/blushister/tesseraui/wiki/Drag-and-Drop

Configure a TesseraPanel to be draggable using the `.draggable(true)` method. Specify a string payload using `.dragPayload("my-payload")`.

```java
TesseraPanel item = TesseraPanel.column(x, y, w, h)
    .background(TesseraPalette.BG2)
    .border(1, TesseraPalette.COPPER_LO)
    .draggable(true)
    .dragPayload("my-payload");
```

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

### CSS for Font Scaling

Source: https://github.com/blushister/tesseraui/wiki/Font-System

Demonstrates CSS font-size properties for scaling fonts relative to the natural pixel size (8px for default Minecraft font).

```css
/* Renders at exactly 6 px — scaled down from natural 8 px */
.small { font-size: 6px; }

/* Renders at exactly 10 px — scaled up */
.large { font-size: 10px; }
```

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

### CSS Color Formats

Source: https://github.com/blushister/tesseraui/wiki/Color-and-Palette

Demonstrates various CSS color notations supported by TesseraUI, including named colors, hex codes (3, 6, and 8-digit), and rgb().

```css
/* Named colors */
color: white;
color: black;
color: transparent;

/* 3-digit hex → expanded to #RRGGBB, alpha = FF */
color: #F80;           /* → #FF8800 */

/* 6-digit hex, alpha = FF */
color: #FF8800;

/* 8-digit AARRGGBB — Minecraft / Java format */
color: #80FF8800;      /* 50% transparent orange */

/* rgb() */
color: rgb(255, 128, 0);
```

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

### Apply Hover Styles to TesseraPanel

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Define distinct background and border colors for a panel when it is hovered over.

```java
panel
    .hoverBackground(0xFF2A3050)
    .hoverBorder(0xFFE8A24A);
```

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

### CSS Styling for UI Elements

Source: https://github.com/blushister/tesseraui/blob/master/README.md

Provides styling for the HTML elements defined in the template. Includes styles for layout containers, text, and buttons, with hover effects.

```css
col   { background: #1A1208; padding: 12px; gap: 8px; }
h2    { color: #F0B27A; font-size: 10px; }
p     { color: #F3E7D3; font-size: 7px; }

button {
  background: #5C3A1E;
  color: #F0B27A;
  width: 80px; height: 16px;
  transition: background 200ms ease-out;
}
button:hover { background: #7C5A2E; }
```

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

### Conditionally Add Widgets with v-for and v-if

Source: https://github.com/blushister/tesseraui/wiki/Programmatic-API

Use `addFor` to dynamically add widgets based on a list and `addIf` to conditionally add widgets or build them lazily.

```java
// v-for — add one widget per item
panel.addFor(playerList, player ->
    new TesseraLabel(0, 0, 120, 10, player.getName()).color(TesseraPalette.CREAM));

// v-if — add widget only when condition is true
panel.addIf(isAdmin, adminButton);

// v-if with lazy factory — widget is never created when condition is false
panel.addIf(isAdmin, () -> buildAdminPanel());
```

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

### Shared CSS Link

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Link to shared CSS for layout.

```HTML
<link rel="stylesheet" href="...">
```

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

### Multiline CSS Comment

Source: https://github.com/blushister/tesseraui/wiki/CSS-Reference

Demonstrates the syntax for multiline CSS comments. These are supported alongside single-line comments.

```css
/* This is a valid
   multiline comment */
.panel { background: #1A1208; }
```

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

### Add lang files to your mod

Source: https://github.com/blushister/tesseraui/wiki/Localization

Place your translation files in the `assets/yourmod/lang/` directory. Supported languages include `en_us.json`, `fr_fr.json`, `de_de.json`, etc. The JSON structure maps translation keys to their corresponding text.

```plaintext
assets/yourmod/lang/en_us.json
assets/yourmod/lang/fr_fr.json
assets/yourmod/lang/de_de.json
```

```json
// en_us.json
{
  "ui.yourmod.title":       "Settings",
  "ui.yourmod.confirm":     "Confirm",
  "ui.yourmod.cancel":      "Cancel",
  "ui.yourmod.items.empty": "No items",
  "ui.yourmod.items.count": "items"
}
```

```json
// fr_fr.json
{
  "ui.yourmod.title":       "Paramètres",
  "ui.yourmod.confirm":     "Confirmer",
  "ui.yourmod.cancel":      "Annuler",
  "ui.yourmod.items.empty": "Aucun élément",
  "ui.yourmod.items.count": "éléments"
}
```

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

### CSS Transition Syntax

Source: https://github.com/blushister/tesseraui/wiki/CSS-Animations

Defines the syntax for CSS transitions, specifying properties, duration, easing, and delay. Multiple properties can be transitioned by comma-separating them.

```css
transition: <property> <duration> [<easing>] [<delay>];

/* Multiple properties — comma-separated */
transition: background 250ms ease-out, border-color 250ms ease-out;
```

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

### Configure Virtual List Row Fallback

Source: https://github.com/blushister/tesseraui/wiki/Changelog

Row bindings in `<virtual-list>` now fall back to the parent model if no per-row key exists. This allows global keys like `{{ s.items }}` to work within rows.

```html
<virtual-list>
  <!-- Row bindings fall back to parent model -->
</virtual-list>
```

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

### Secure DragContext Rendering

Source: https://github.com/blushister/tesseraui/wiki/Changelog

The `DragContext.render()` method now restores position and shader color using `try/finally`. This prevents resource leaks and ensures stability.

```java
try {
  // Render logic
} finally {
  // Restore state
}
```