### Basic TabView Initialization in JavaScript

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/tab-view

A minimal example of creating a TabView and adding two tabs with placeholder content in JavaScript. Suitable for basic setup.

```javascript
let tv = new TabView();
let content1 = new UIElement();
let content2 = new UIElement();
tv.addTab(new Tab().setText("A"), content1);
tv.addTab(new Tab().setText("B"), content2);
parent.addChild(tv);
```

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

### RectTexture Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/rect

Examples demonstrating how to create and configure RectTexture instances in Java, Kotlin, and KubeJS.

```APIDOC
## Usage

### Java
```java
// Filled rounded rect
IGuiTexture panel = new RectTexture()
    .setColor(0xFF2A2A2A)
    .setRadius(new Vector4f(6, 6, 6, 6));

// With stroke
IGuiTexture bordered = new RectTexture()
    .setColor(0xFF1A1A1A)
    .setRadius(new Vector4f(4, 4, 4, 4))
    .setStroke(1f)
    .setBorderColor(0xFFFFFFFF);

// Static factory
IGuiTexture simple = RectTexture.of(0xFF3A3A3A);
```

### Kotlin
```kotlin
val panel = RectTexture()
    .setColor(0xFF2A2A2A.toInt())
    .setRadius(Vector4f(6f, 6f, 6f, 6f))

val simple = RectTexture.of(0xFF3A3A3A.toInt())
```

### KubeJS
```javascript
let panel = new RectTexture()
    .setColor(0xFF2A2A2A)
    .setStroke(1)
    .setBorderColor(0xFFFFFFFF);

let simple = RectTexture.of(0xFF3A3A3A);
```
```

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

### Deferred Setup with `onBuild {}`

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/kotlin_support

Use the `onBuild {}` block to execute code after the element is fully built, providing access to the final element reference for deferred setup.

```kotlin
element({}) {
    onBuild { builtElement ->
        builtElement.addEventListener(UIEvents.ADDED) { /* ... */ }
    }
}
```

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

### Button Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/button

Demonstrates how to create and configure a Button component in Java, Kotlin, and KubeJS.

```APIDOC
## Button Usage

This section provides examples of how to instantiate and configure a `Button` component using Java, Kotlin, and KubeJS.

### Java/Kotlin Example
```java
var button = new Button();
button.setText("my.button.label", true); // translated label
button.setOnClick(event -> {
    // runs on the client when left-clicked
});
button.setOnServerClick(event -> {
    // runs on the server when left-clicked
});
parent.addChild(button);
```

### KubeJS Example
```javascript
button({
    text("my.button.label")
    onClick = { event -> /* client-side */ }
    onServerClick = { event -> /* server-side */ }
}) {
    // add extra children if needed
}
```

### Another Java/Kotlin Example
```java
let button = new Button();
button.setText(Component.literal("Click me"));   // literal
button.setText("my.key", true);                  // translated
button.setOnClick(e => {
    // client-side click handler
});
parent.addChild(button);
```
```

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

### TreeList Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/tree-list

Demonstrates how to create and configure a TreeList in Java, Kotlin, and KubeJS.

```APIDOC
## TreeList Usage

### Java Example
```java
var tree = new TreeList<MyNode>(rootNode);
tree.setNodeUISupplier(TreeList.textTemplate(node -> Component.literal(node.getName())));
tree.setOnSelectedChanged(selected -> System.out.println("Selected: " + selected));
tree.setDoubleClickToExpand(true);
parent.addChild(tree);
```

### Kotlin Example
```kotlin
treeList<MyNode>(rootNode, {
    nodeUI(TreeList.textTemplate { node -> Component.literal(node.name) })
    onSelectionChanged { selected -> println("Selected: $selected") }
}) { }
```

### KubeJS Example
```javascript
let tree = new TreeList(rootNode);
tree.setNodeUISupplier(TreeList.textTemplate(n => Component.literal(n.name)));
tree.setOnSelectedChanged(selected => { /* use selection */ });
parent.addChild(tree);
```
```

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

### Create and Configure Scene (JavaScript)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/scene

Illustrates the basic setup for a Scene component in JavaScript, including creating the scene, setting rendered blocks, and defining a selection callback.

```javascript
let s = new Scene();
s.createScene(level);
s.setRenderedCore([BlockPos.ZERO]);
s.setOnSelected((pos, face) => { /* ... */ });
parent.addChild(s);


```

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

### TaffyLayoutStyleDsl Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/kotlin_support

Provides common examples for configuring element layout properties using the TaffyLayoutStyleDsl, including size, flex, gap, padding, margin, position, and grid properties.

```kotlin
layout = {
    size(200.px)           // width and height
    width(50.pct)          // 50%
    height(auto)           // auto
    flex(1)                // grow/shrink
    gap { all(4.px) }
    padding { all(8.px) }
    margin { top(2.px) }
    position(TaffyPosition.ABSOLUTE)
    pos { left(10.px); top(10.px) }
    display(TaffyDisplay.GRID)
    grid {
        templateColumns("1fr 1fr")
        templateRows("auto 1fr")
        row("1")
        column("2")
    }
}

```

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

### ProgressBar Usage (JavaScript)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/progress-bar

Illustrates the basic JavaScript instantiation and configuration of a ProgressBar, similar to the Java/Kotlin example.

```APIDOC
## ProgressBar Usage (JavaScript)

### Description
Instantiate a `ProgressBar` in JavaScript, set its range, and update its progress. Add the bar to a parent element.

### Method
```javascript
let bar = new ProgressBar();
bar.setRange(0, 100);
bar.setProgress(75);
parent.addChild(bar);
```
```

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

### Label Usage Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/label

Demonstrates how to create and configure Label components for static text and data-bound text in Java, Kotlin, and KubeJS.

```APIDOC
## Label Usage

### Java
```java
// Static text
var label = new Label();
label.setText("my.translation.key", true);

// Data-bound text (server → client)
label.bind(DataBindingBuilder.componentS2C(
    () -> Component.literal("Value: " + someObject.getValue())
).build());

parent.addChild(label);
```

### Kotlin
```kotlin
// Static label
label({
    text("my.translation.key")
    textStyle { textColor(0xFFFFFF).fontSize(10f) }
}) {
    bindS2C({Component.literal("Value: $value")})
}

// Data-bound
val lbl = Label()
lbl.bind(DataBindingBuilder.componentS2C { Component.literal("Value: $value") }.build())
```

### KubeJS
```javascript
let label = new Label();
label.setText(Component.literal("Hello"));
parent.addChild(label);

// Data-bound via binding system:
label.bind(DataBindingBuilder.componentS2C(() =>
    Component.literal("Tick: " + tickCount)
).build());
```
```

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

### Switch Component Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/switch

Examples of how to use the Switch component in Java, Kotlin, and KubeJS.

```APIDOC
## Usage

### Java
```java
var sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn -> {
    // called whenever the state changes
});
parent.addChild(sw);
```

### Kotlin
```kotlin
switch({
    isOn = true
    onSwitch { isOn -> /* state changed */ }
}) { }
```

### KubeJS
```javascript
let sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn => {
    // ...
});
parent.addChild(sw);
```
```

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

### Initialize and Configure GraphView (JavaScript)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/graph-view

Illustrates the basic setup of a GraphView in JavaScript, including enabling zoom, setting minimum scale, adding a child, and attaching it to a parent element.

```javascript
let graph = new GraphView();
graph.graphViewStyle(style => {
    style.allowZoom(true);
    style.minScale(0.2);
});
graph.addContentChild(myNode);
parent.addChild(graph);

```

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

### TagField Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/tag-field

Examples of how to instantiate and configure a TagField in Java, Kotlin, and KubeJS.

```APIDOC
## TagField Usage

### Java
```java
var tagField = new TagField();
tagField.setCompoundTagOnly(); // accept only CompoundTag
tagField.setTagResponder(tag -> System.out.println("Tag: " + tag));
parent.addChild(tagField);

// Set initial value
tagField.setValue(new CompoundTag(), false);
```

### Kotlin
```kotlin
tagField({
    onTagChanged { tag -> println("Tag: $tag") }
}) {
    api { setCompoundTagOnly() }
}
```

### KubeJS
```javascript
let field = new TagField();
field.setCompoundTagOnly();
field.setTagResponder(tag => { /* use tag */ });
parent.addChild(field);
```
```

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

### SDFRectTexture Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/sdf-rect

Examples of how to create and configure SDFRectTexture instances in Java, Kotlin, and KubeJS.

```APIDOC
## SDFRectTexture

Since 2.2.1
`SDFRectTexture` draws a rounded rectangle using an SDF (Signed Distance Field) GPU shader. It produces sharp, anti-aliased edges at any size. Supports per-corner radii, an optional stroke border, and smooth CSS-transition interpolation.

Registry name: `sdf_rect_texture`
LSS function: `rect(...)` / `sdf(...)`
Extends `TransformTexture` — supports `rotate()`, `scale()`, `transform()`.

### Usage

#### Java
```java
// Filled rounded rect
IGuiTexture panel = new SDFRectTexture()
    .setColor(0xFF2A2A2A)
    .setRadius(6f);

// Rounded rect with a white stroke
IGuiTexture bordered = new SDFRectTexture()
    .setColor(0xFF1A1A1A)
    .setRadius(4f)
    .setStroke(1f)
    .setBorderColor(0xFFFFFFFF);

// Static factory
IGuiTexture simple = SDFRectTexture.of(0xFF3A3A3A);
```

#### Kotlin
```kotlin
val panel = SDFRectTexture()
    .setColor(0xFF2A2A2A.toInt())
    .setRadius(6f)

val bordered = SDFRectTexture.of(0xFF1A1A1A.toInt())
    .setRadius(4f)
    .setStroke(1f)
    .setBorderColor(0xFFFFFFFF.toInt())
```

#### KubeJS
```javascript
let panel = new SDFRectTexture()
    .setColor(0xFF2A2A2A)
    .setRadius(6);

let bordered = SDFRectTexture.of(0xFF1A1A1A)
    .setRadius(4)
    .setStroke(1)
    .setBorderColor(0xFFFFFFFF);
```
```

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

### Create UI from Template (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/editor

Loads a UI template from a resource location or a file path and sets up UI elements. This example demonstrates resource-based loading and file-based loading.

```java
@Override
public ModularUI createUI(Player player) {
    var ui = Optional.ofNullable(UIResource.INSTANCE.getResourceInstance()
            // resource location based
            .getResource(new FilePath(ResourceLoaction.parse("ldlib2:resources/examples/example_layout.ui.nbt"))))

            // file based
            //.getResource(new FilePath(new File(LDLib2.getAssetsDir(), "ldlib2/resources/examples/example_layout.ui.nbt"))) // LDLib2.getAssetsDir() = ".minecraft/ldlib2/assets"

            .map(UITemplate::createUI)
            .orElseGet(UI::empty);

    // find elemetns and do data bindings or logic setup here
    var buttons = ui.select(".button_container > button").toList(); // by selector
    var container = ui.selectRegex("container").findFirst().orElseThrow(); // by id regex

    return ModularUI.of(ui, player);
}

```

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

### SpriteTexture Initialization and Basic Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/sprite

Demonstrates how to initialize a SpriteTexture with a given image path and provides examples for common use cases like 9-slice scaling, sprite region selection, tiling, and color tinting.

```APIDOC
## SpriteTexture Initialization and Basic Usage

### Description
This section covers the basic initialization of `SpriteTexture` and its common use cases, including applying 9-slice scaling, defining sprite regions, setting wrap modes for tiling, and applying color tints.

### Java Usage
```java
// Whole image, stretched
IGuiTexture icon = SpriteTexture.of("mymod:textures/gui/icon.png");

// 9-slice panel: 4 px border on all sides
IGuiTexture panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

// 9-slice with different left/top/right/bottom borders
IGuiTexture fancy = SpriteTexture.of("mymod:textures/gui/fancy.png")
    .setBorder(4, 4, 4, 4); // left, top, right, bottom

// Sub-region of a sprite sheet (x, y, width, height in pixels)
IGuiTexture frame = SpriteTexture.of("mymod:textures/gui/sheet.png")
    .setSprite(0, 0, 16, 16);

// Tiling background
IGuiTexture tile = SpriteTexture.of("mymod:textures/gui/tile.png")
    .setWrapMode(SpriteTexture.WrapMode.REPEAT);

// Tinted
IGuiTexture tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);
```

### Kotlin Usage
```kotlin
val icon = SpriteTexture.of("mymod:textures/gui/icon.png")

val panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4)

val tile = SpriteTexture.of("mymod:textures/gui/tile.png")
    .setWrapMode(SpriteTexture.WrapMode.REPEAT)
```

### KubeJS Usage
```javascript
let icon = SpriteTexture.of("mymod:textures/gui/icon.png");

let panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

let tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);
```

### LSS Usage
```css
/* Simple image */
background: sprite(mymod:textures/gui/icon.png);

/* With sprite region (x, y, width, height) */
background: sprite(mymod:textures/gui/sheet.png, 0, 0, 16, 16);

/* With border (left, top, right, bottom) */
background: sprite(mymod:textures/gui/panel.png, 0, 0, 64, 64, 4, 4, 4, 4);

/* With color tint */
background: sprite(mymod:textures/gui/icon.png, 0, 0, 16, 16, 0, 0, 0, 0, #FF44AAFF);
```
```

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

### Direct API Access - onBuild {}

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/kotlin_support

Executes a block after the element is fully built, providing the final element reference for deferred setup.

```APIDOC
## Direct API Access - `onBuild {}`

Called after the element is fully built. Use it when you need the final element reference for deferred setup.

### Example:
```kotlin
element({}) {
    onBuild { builtElement ->
        builtElement.addEventListener(UIEvents.ADDED) { /* ... */ }
    }
}
```
```

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

### Create a Custom LDLibPlugin

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/java_integration

Implement the `ILDLibPlugin` interface and annotate your class with `@LDLibPlugin` to create a custom plugin. Use the `onLoad` method for registration and setup.

```java
@LDLibPlugin
public class MyLDLibPlugin implements ILDLibPlugin {
    public void onLoad() {
        // do your register or setup for LDLib2 here.
    }
}
```

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

### EMI: Registering a Recipe

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/xei_support

Guides on how to register recipes for EMI by extending ModularUIEMIRecipe and implementing necessary methods. It also shows how to set up the EmiRecipeCategory and register recipes with the EmiRegistry.

```APIDOC
## EMI
### Registering a Recipe
Extend `ModularUIEMIRecipe` for your recipe class. The `EmiRecipeCategory` is a standard EMI type — no LDLib wrapper is needed for the category itself. Your recipe passes an `IModularUIProvider<ModularUIEMIRecipe>` to the `super()` constructor.
```java
// MyEmiRecipe.java
public class MyEmiRecipe extends ModularUIEMIRecipe {

    private final MyEmiRecipeCategory category;
    private final MyRecipe recipe;

    public MyEmiRecipe(MyEmiRecipeCategory category, MyRecipe recipe) {
        super(self -> recipe.createModularUI());   // IModularUIProvider<ModularUIEMIRecipe>
        this.category = category;
        this.recipe = recipe;
    }

    @Override public EmiRecipeCategory getCategory()  { return category; }
    @Override public ResourceLocation getId()          { return MyMod.id("my_recipe/" + recipe.getId()); }
    @Override public int getDisplayWidth()             { return MyRecipe.WIDTH; }
    @Override public int getDisplayHeight()            { return MyRecipe.HEIGHT; }
}
```

```java
// MyEmiPlugin.java
@EmiEntrypoint
public class MyEmiPlugin implements EmiPlugin {

    @Override
    public void register(EmiRegistry registry) {
        var category = new MyEmiRecipeCategory();
        registry.addCategory(category);
        registry.addWorkstation(category, EmiStack.of(MyItems.MACHINE));

        MyRecipeManager.getAllRecipes()
            .forEach(r -> registry.addRecipe(new MyEmiRecipe(category, r)));
    }
}

// Category — plain EMI, no LDLib base class needed:
class MyEmiRecipeCategory extends EmiRecipeCategory {
    public MyEmiRecipeCategory() {
        super(MyMod.id("my_recipe"), EmiStack.of(MyItems.MACHINE));
    }
}
```

`ModularUIEMIRecipe` automatically implements `getInputs()`, `getCatalysts()`, and `getOutputs()` by collecting the ingredient data emitted from your UI via `RECIPE_INGREENT` events.
```

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

### Create TextTexture (Kotlin)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/text

Shows basic TextTexture instantiation in Kotlin, including a scrolling text example with width configuration.

```kotlin
val label = TextTexture("Hello World")

val scroll = TextTexture("Long description…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
```

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

### Initialize and Use ColorSelector in JavaScript

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/color-selector

Provides an example of how to use the ColorSelector in JavaScript, including setting an initial color value and registering a callback function for value changes.

```javascript
let picker = new ColorSelector();
picker.setValue(0xFF4080FF, false);
picker.registerValueListener(color => { /* use color */ });
parent.addChild(picker);
```

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

### Initialize and Configure GraphView (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/graph-view

Demonstrates how to create a GraphView instance, configure its style for zooming and panning, set scale limits, add a child element, and add the graph to the parent. It also shows how to fit the view to its children.

```java
var graph = new GraphView();
graph.graphViewStyle(style -> style
    .allowZoom(true)
    .allowPan(true)
    .minScale(0.2f)
    .maxScale(5f)
);

var node = new UIElement();
graph.addContentChild(node);
parent.addChild(graph);

// Fit the view after adding children:
graph.fitToChildren(20f, 0.1f);

```

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

### Initialize and Configure Switch in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/switch

Demonstrates how to create a Switch instance, set its initial state, and register a callback for state changes in Java. The parent container must then add the switch.

```java
var sw = new Switch();
sw.setOn(true);
sw.setOnSwitchChanged(isOn -> {
    // called whenever the state changes
});
parent.addChild(sw);
```

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

### Create SpriteTexture instances in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/sprite

Demonstrates creating SpriteTexture instances for various use cases including whole images, 9-slice panels, and tiled backgrounds. Use this for basic texture setup in Java.

```java
IGuiTexture icon = SpriteTexture.of("mymod:textures/gui/icon.png");

// 9-slice panel: 4 px border on all sides
IGuiTexture panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

// 9-slice with different left/top/right/bottom borders
IGuiTexture fancy = SpriteTexture.of("mymod:textures/gui/fancy.png")
    .setBorder(4, 4, 4, 4); // left, top, right, bottom

// Sub-region of a sprite sheet (x, y, width, height in pixels)
IGuiTexture frame = SpriteTexture.of("mymod:textures/gui/sheet.png")
    .setSprite(0, 0, 16, 16);

// Tiling background
IGuiTexture tile = SpriteTexture.of("mymod:textures/gui/tile.png")
    .setWrapMode(SpriteTexture.WrapMode.REPEAT);

// Tinted
IGuiTexture tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);

```

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

### Basic Inspector Usage in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/inspector

Demonstrates how to create, add, and inspect an object with the Inspector component. Includes examples for inspecting with a change listener and a close callback.

```java
var inspector = new Inspector();
parent.addChild(inspector);

// Inspect an object (any IConfigurable):
inspector.inspect(myObject);

// Inspect with a change listener:
inspector.inspect(myObject, configurator -> {
    System.out.println("Changed: " + configurator.getLabel());
});

// Inspect with change listener + close callback:
inspector.inspect(myObject,
    configurator -> System.out.println("Changed"),
    () -> System.out.println("Closed")
);

// Clear the inspector:
inspector.clear();

```

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

### Create and Configure Scene (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/scene

Demonstrates how to create a Scene instance, populate it with blocks from a level, and set up a click listener. The scene is then added to a parent element.

```java
var scene = new Scene();

// Create the scene from a level:
scene.createScene(level); // or createScene(level, useFBO, size)

// Populate blocks to render:
var blocks = List.of(BlockPos.ZERO, new BlockPos(1, 0, 0));
scene.setRenderedCore(blocks);

// Listen for clicks:
scene.setOnSelected((pos, face) ->
    System.out.println("Clicked " + pos + " face " + face)
);

parent.addChild(scene);


```

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

### Register and Trigger RPC Event (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/element

Demonstrates registering an RPC event on the server using `addRPCEvent` and then triggering it from the client using `sendEvent`. Includes a callback example for receiving a response.

```java
// Register an RPC event during element initialization
RPCEmitter emitter = element.addRPCEvent(ele ->
    RPCEventBuilder.simple(UIEvents.CLICK, (e, args) -> {
        // This runs on the server
        ServerPlayer player = e.modularUI.player;
        player.sendSystemMessage(Component.literal("Hello from server!"));
    })
);

// Trigger the RPC from client (e.g., inside a client event listener)
element.addEventListener(UIEvents.CLICK, event ->
    element.sendEvent(emitter.event())
);
```

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

### XML Text Content Examples

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/text

Provides examples of how to define text content for a TextElement within XML, including literal text, translatable text, and concatenated components.

```xml
<!-- Literal text via a plain text node -->
<text>Hello World</text>

<!-- Translatable via a translate child element -->
<text><translate key="my.translation.key"/></text>

<!-- Multiple inline components are concatenated -->
<text>Prefix: <translate key="my.key"/></text>
```

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

### Apply Built-in Stylesheets and Manage Them

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/getting_start

Utilize built-in stylesheet themes like GDP, MC, or MODERN for consistent UI styling. This example demonstrates how to select and apply a stylesheet dynamically.

```java
private static ModularUI createModularUI() {
    var root = new UIElement();
    root.layout(layout -> layout.width(100));
    root.addChildren(
            new Label().setText("Stylesheets"),
            new Button().setText("Click Me!"),
            new ProgressBar().setProgress(0.5f).label(label -> label.setText("Progress")),
            new Toggle().setText("Toggle"),
            new TextField().setText("Text Field"),
            new UIElement().layout(layout -> layout.setFlexDirection(YogaFlexDirection.ROW)).addChildren(
                    new ItemSlot().setItem(Items.APPLE.getDefaultInstance()),
                    new FluidSlot().setFluid(new FluidStack(Fluids.WATER, 1000))
            ),
            // list all stylesheets
            new Selector<ResourceLocation>()
                    .setSelected(StylesheetManager.GDP, false)
                    .setCandidates(StylesheetManager.INSTANCE.getAllPackStylesheets().stream().toList())
                    .setOnValueChanged(selected -> {
                        // switch to the selected stylesheet
                        var mui = root.getModularUI();
                        if (mui != null) {
                            mui.getStyleEngine().clearAllStylesheets();
                            mui.getStyleEngine().addStylesheet(StylesheetManager.INSTANCE.getStylesheetSafe(selected));
                        }
                    })
    );
    root.addClass("panel_bg");
    // use GDP stylesheets by default
    var ui = UI.of(root, StylesheetManager.INSTANCE.getStylesheetSafe(StylesheetManager.GDP)));
    return ModularUI.of(ui);
}
```

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

### Initialize and Configure SplitView (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/split-view

Demonstrates how to create and configure both horizontal and vertical SplitView instances in Java, setting content and initial percentages.

```java
var split = new SplitView.Horizontal();
split.left(leftContent);
split.right(rightContent);
split.setPercentage(30f);
parent.addChild(split);

var vsplit = new SplitView.Vertical();
vsplit.top(topContent);
vsplit.bottom(bottomContent);
parent.addChild(vsplit);

```

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

### Complex LSS Selector Example

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/preliminary/stylesheet

An advanced LSS selector combining multiple selector types including :host, :not(), ID, class, child, and :internal selectors. This example is used to illustrate selector precedence and matching logic.

```lss
button:host :not(.my_label#my_id > text:internal) > .my_class:host, text-field {
    // ...
}

```

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

### Initialize and Configure GraphView (KubeJS)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/graph-view

Shows how to initialize a GraphView with specific styling options like zoom and scale limits, and how to add content to it using KubeJS.

```javascript
graphView({
    graphViewStyle = {
        allowZoom(true)
        minScale(0.2f)
        maxScale(5f)
    }
}) {
    content(myNodeElement)
}

```

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

### Start Animation

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/preliminary/style_animation

Method to initiate the defined animation.

```APIDOC
## start()

### Description
Starts the animation sequence.

### Method
start

### Returns
ISubscription - An object that can be used to manage the animation subscription.
```

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

### Sync Server Data to Element Width (KubeJS)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/preliminary/data_bindings

A KubeJS example demonstrating how to bind a server-side value to an element's width using BindableValue and DataBindingBuilder, with a server-to-client sync strategy.

```KubeJS
// Server-side value
// let widthOnTheServer = 100;

let element = new UIElement();
element.addChildren(
    new BindableValue().bind(DataBindingBuilder.floatValS2C(() => widthOnTheServer)
        .remoteSetter(width => element.getLayout().width(width))
        .build())
);

```

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

### Create and Configure TabView in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/tab-view

Demonstrates how to create a TabView, add tabs with content, and set a tab selection callback. Use this for imperative UI construction.

```java
var tabView = new TabView();

var content1 = new UIElement();
content1.addChild(new Label().setText("Settings content", false));

var content2 = new UIElement();
content2.addChild(new Label().setText("Info content", false));

tabView.addTab(new Tab().setText("Settings"), content1);
tabView.addTab(new Tab().setText("Info"), content2);

tabView.setOnTabSelected(tab -> System.out.println("Selected: " + tab));
parent.addChild(tabView);
```

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

### AnimationTexture Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/animation

Examples of how to use AnimationTexture in Java, Kotlin, and KubeJS.

```APIDOC
## AnimationTexture

Since 2.2.1
`AnimationTexture` plays a frame animation from a **uniform sprite sheet** — a PNG image arranged as a grid of equal-sized cells. The animation advances at a configurable speed and loops between a `from` and `to` frame index.
Registry name: `animation_texture`
Extends `TransformTexture` — supports `rotate()`, `scale()`, `transform()`.

### Usage

#### Java
```java
// 8x8 grid of 8 px cells, frames 32-44, advance every 1 tick
IGuiTexture anim = new AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)   // from frame 32 to frame 44
    .setAnimation(1);       // 1 tick per frame

// Tinted animation
IGuiTexture tinted = new AnimationTexture("mymod:textures/gui/glow.png")
    .setCellSize(4)
    .setAnimation(0, 15)
    .setAnimation(2)
    .setColor(0xFF44AAFF);
```

#### Kotlin
```kotlin
val anim = AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)
    .setAnimation(1)
```

#### KubeJS
```javascript
let anim = new AnimationTexture("mymod:textures/gui/particles.png")
    .setCellSize(8)
    .setAnimation(32, 44)
    .setAnimation(1);
```

### Fields

Name | Type | Description
---|---|---
`imageLocation` | `ResourceLocation` | Path to the sprite sheet PNG.
`cellSize` | `int` | Number of cells per row/column. The sheet is `cellSize × cellSize` cells.
`from` | `int` | First frame index (inclusive).
`to` | `int` | Last frame index (inclusive).
`animation` | `int` | Game ticks to display each frame before advancing.
`color` | `int` | ARGB tint colour. Default: `-1` (white).

### Methods

Method | Returns | Description
---|---|---
`setTexture(String)` | `AnimationTexture` | Changes the sprite sheet image.
`setCellSize(int)` | `AnimationTexture` | Sets the grid dimension (cells per row/column).
`setAnimation(int from, int to)` | `AnimationTexture` | Sets the frame range and resets to the first frame.
`setAnimation(int animation)` | `AnimationTexture` | Sets the ticks-per-frame speed.
`setColor(int)` | `AnimationTexture` | Sets the ARGB tint colour.
`copy()` | `AnimationTexture` | Returns a deep copy.
```

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

### Scene Initialization and Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/scene

Demonstrates how to create, configure, and use the Scene component in Java, Kotlin, and KubeJS.

```APIDOC
## Scene Component Usage

### Description
This section provides examples of how to initialize and use the `Scene` component in different programming languages.

### Java/Kotlin Example
```java
var scene = new Scene();

// Create the scene from a level:
scene.createScene(level); // or createScene(level, useFBO, size)

// Populate blocks to render:
var blocks = List.of(BlockPos.ZERO, new BlockPos(1, 0, 0));
scene.setRenderedCore(blocks);

// Listen for clicks:
scene.setOnSelected((pos, face) ->
    System.out.println("Clicked " + pos + " face " + face)
);

parent.addChild(scene);
```

### KubeJS Example
```javascript
scene({
    world(level)
    blocks(BlockPos.ZERO)
    onSelect { pos, face -> println("Clicked $pos $face") }
}) { }
```

### JavaScript Example
```javascript
let s = new Scene();
s.createScene(level);
s.setRenderedCore([BlockPos.ZERO]);
s.setOnSelected((pos, face) => { /* ... */ });
parent.addChild(s);
```
```

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

### Create and Configure Toggle in Java

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/toggle

Demonstrates how to create a Toggle, set its text, initial state, and attach a listener for state changes in Java.

```java
var toggle = new Toggle();
toggle.setText("my.toggle.label", true); // translated
toggle.setOn(true);
toggle.setOnToggleChanged(isOn -> {
    // called whenever the state changes
});
parent.addChild(toggle);

```

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

### Get Current Value

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/progress-bar

Retrieves the current progress value of the progress bar.

```APIDOC
## getValue()

### Description
Returns the current progress value of the progress bar.

### Method Signature
`getValue(): Float`

### Returns
* **Float** - The current progress value.
```

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

### Create and Configure a Button (Java/Kotlin)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/button

Demonstrates how to create a button, set its translated text, and attach client-side and server-side click handlers. The button is then added to a parent element.

```java
var button = new Button();
button.setText("my.button.label", true); // translated label
button.setOnClick(event -> {
    // runs on the client when left-clicked
});
button.setOnServerClick(event -> {
    // runs on the server when left-clicked
});
parent.addChild(button);
```

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

### Create SpriteTexture instances in KubeJS

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/sprite

Illustrates creating SpriteTexture instances using KubeJS, including examples for basic textures, 9-slice panels, and tinted images. Use this for client-side texture definitions in KubeJS.

```javascript
let icon = SpriteTexture.of("mymod:textures/gui/icon.png");

let panel = SpriteTexture.of("mymod:textures/gui/panel.png")
    .setBorder(4);

let tinted = SpriteTexture.of("mymod:textures/gui/icon.png")
    .setColor(0xFF44AAFF);

```

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

### Create and Configure Scene (KubeJS)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/scene

Shows how to initialize a Scene component using a more declarative KubeJS syntax, including setting the world, blocks, and click handler.

```javascript
scene({
    world(level)
    blocks(BlockPos.ZERO)
    onSelect { pos, face -> println("Clicked $pos $face") }
}) { } 


```

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

### SDFRectTexture LSS Syntax

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/sdf-rect

Examples of using SDFRectTexture with the LSS (Less Simple Shading) syntax.

```APIDOC
## LSS

```css
/* rect(fillColor) */
background: rect(#2A2A2A);

/* rect(fillColor, radius) */
background: rect(#2A2A2A, 6);

/* rect(fillColor, radius, strokeWidth, borderColor) */
background: rect(#2A2A2A, 4, 1, #FFFFFF);

/* Per-corner radii: top-left top-right bottom-right bottom-left */
background: rect(#2A2A2A, 8 4 8 4);
```
```

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

### Tree List Styling

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/tree-list

Examples of how to style the TreeList component, including node backgrounds and icons.

```APIDOC
## Tree List Style

### Node Background
#### `node-background`
Background texture for unselected nodes.
Default: none (empty)

**Java:**
```java
tree.menuStyle(style -> style.nodeTexture(myBg));
```

**LSS:**
```lss
tree-list {
    node-background: color(#00000040);
}
```

### Node Hover Background
#### `node-hover-background`
Background texture for selected (highlighted) nodes.
Default: `ColorPattern.BLUE.rectTexture()`

**Java:**
```java
tree.menuStyle(style -> style.hoverTexture(myHighlight));
```

**LSS:**
```lss
tree-list {
    node-hover-background: color(#4040FF80);
}
```

### Collapse/Expand Icons
#### `collapse-icon` / `expand-icon`
Icons shown on branch nodes when they are collapsed or expanded.
Defaults: `Icons.RIGHT_ARROW_NO_BAR_S_WHITE` / `Icons.DOWN_ARROW_NO_BAR_S_WHITE`

**Java:**
```java
tree.menuStyle(style -> style
    .collapseIcon(myCollapsed)
    .expandIcon(myExpanded)
);
```

**LSS:**
```lss
tree-list {
    collapse-icon: sprite("mymod:textures/gui/arrow_right.png");
    expand-icon: sprite("mymod:textures/gui/arrow_down.png");
}
```
```

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

### GraphView Initialization and Styling

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/graph-view

Demonstrates how to initialize a GraphView and configure its style properties like zoom and pan behavior, along with setting scale limits.

```APIDOC
## GraphView Initialization and Styling

### Description
Initializes a `GraphView` and configures its visual style, including enabling/disabling zoom and pan, and setting minimum and maximum scale values.

### Java Example
```java
var graph = new GraphView();
graph.graphViewStyle(style -> style
    .allowZoom(true)
    .allowPan(true)
    .minScale(0.2f)
    .maxScale(5f)
);

var node = new UIElement();
graph.addContentChild(node);
parent.addChild(graph);

// Fit the view after adding children:
graph.fitToChildren(20f, 0.1f);
```

### Kotlin Example
```kotlin
graphView({
    graphViewStyle = {
        allowZoom(true)
        minScale(0.2f)
        maxScale(5f)
    }
}) {
    content(myNodeElement)
}
```

### JavaScript Example
```javascript
let graph = new GraphView();
graph.graphViewStyle(style => {
    style.allowZoom(true);
    style.minScale(0.2);
});
graph.addContentChild(myNode);
parent.addChild(graph);
```
```

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

### Initialize and Configure Switch in Kotlin

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/switch

Shows how to instantiate and configure a Switch component using Kotlin's DSL syntax, including setting the initial state and handling state change events.

```kotlin
switch({
    isOn = true
    onSwitch { isOn -> /* state changed */ }
}) { }
```

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

### Getting Text Area Value

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/text-area

Retrieves the last validated array of lines from the text area.

```APIDOC
## getValue()

### Description
Returns the last validated array of lines from the text area.

### Method
`getValue`

### Response
#### Success Response (String[])
An array of strings representing the lines in the text area.
```

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

### Get Normalized Value

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/progress-bar

Retrieves the current progress value normalized to a range of [0, 1].

```APIDOC
## getNormalizedValue()

### Description
Returns the current progress value normalized to the range [0, 1].

### Method Signature
`getNormalizedValue(): float`

### Returns
* **float** - The normalized progress value.
```

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

### Create and Configure TextTexture (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/text

Demonstrates creating static and configured TextTexture instances in Java. Supports various display types, colors, and shadows.

```java
IGuiTexture label = new TextTexture("Hello World");

// Left-aligned, coloured, with shadow
IGuiTexture info = new TextTexture("Info", 0xFFFFDD44)
    .setType(TextTexture.TextType.LEFT)
    .setDropShadow(true);

// Scrolling text, word-wrap at 80 px
IGuiTexture scroll = new TextTexture("Long description that scrolls…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
    .setRollSpeed(1.5f);

// Dynamic — updates every game tick
IGuiTexture dynamic = new TextTexture(() -> "Ticks: " + level.getGameTime());
```

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

### NBT/JSON representation of @Persisted fields

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/sync/annotations

Example of how fields annotated with @Persisted are represented in NBT or JSON format.

```json
{
  "fluidAmount": 100,
  "isWater": true
}
```

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

### TextTexture Initialization and Basic Usage

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/text

Demonstrates how to create and configure TextTexture instances for static and dynamic text display.

```APIDOC
## TextTexture Initialization

### Description
Initializes a TextTexture with a given string. Supports various display modes, word-wrapping, background color, and live-update suppliers.

### Constructor
`TextTexture(String text)`
`TextTexture(String text, int color)`
`TextTexture(Supplier<String> supplier)`

### Usage Examples
```java
// Static centred text
IGuiTexture label = new TextTexture("Hello World");

// Left-aligned, coloured, with shadow
IGuiTexture info = new TextTexture("Info", 0xFFFFDD44)
    .setType(TextTexture.TextType.LEFT)
    .setDropShadow(true);

// Scrolling text, word-wrap at 80 px
IGuiTexture scroll = new TextTexture("Long description that scrolls…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
    .setRollSpeed(1.5f);

// Dynamic — updates every game tick
IGuiTexture dynamic = new TextTexture(() -> "Ticks: " + level.getGameTime());
```

```kotlin
val label = TextTexture("Hello World")

val scroll = TextTexture("Long description…")
    .setType(TextTexture.TextType.ROLL_ALWAYS)
    .setWidth(80)
```

```javascript
let label = new TextTexture("Hello World");

let dynamic = new TextTexture(() => "Ticks: " + level.getGameTime());
```
```

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

### Sending RPC to the server

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/sync/annotations

Example of sending an RPC message ('rpcTestB') with an ItemStack parameter to the server using rpcToServer.

```java
public void sendMsgToServer(ItemStack item) {
    rpcToServer("rpcTestB", item)
}

```

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

### Initialize and Bind FluidSlot in Java/Kotlin

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/fluid-slot

Demonstrates how to create a FluidSlot, bind it to an IFluidHandler, set its capacity, and add it to the parent UI. Also shows how to enable XEI phantom slots for drag-and-drop functionality.

```java
var fluidSlot = new FluidSlot();
fluidSlot.bind(fluidHandler, 0); // IFluidHandler + tank index
fluidSlot.setCapacity(16000);
parent.addChild(fluidSlot);

// Phantom slot (XEI drag-drop)
fluidSlot.xeiPhantom();
```

```kotlin
fluidSlot({
    layout { width(18).height(18) }
}) {
    api {
        bind(fluidHandler, 0)
        setCapacity(16000)
    }
}
```

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

### UIResourceTexture Methods

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/ui-resource

Methods available for UIResourceTexture, including getting the raw texture, setting color, and copying the reference.

```APIDOC
## UIResourceTexture Methods

### Description
Methods that can be called on a `UIResourceTexture` instance.

### Methods
- `getRawTexture()`: Returns the raw underlying texture (resolving through `internalTexture`). Returns `IGuiTexture`.
- `setColor(int color)`: Copies and tints the resolved internal texture. Returns `IGuiTexture`.
- `copy()`: Returns `this` (the reference is immutable). Returns `UIResourceTexture`.
```

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

### Create TextTexture (KubeJS)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/text

Illustrates TextTexture creation in KubeJS, including a dynamic text example using a lambda function.

```javascript
let label = new TextTexture("Hello World");

let dynamic = new TextTexture(() => "Ticks: " + level.getGameTime());
```

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

### Create and Populate ToggleGroup (Java)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/components/toggle-group

Demonstrates creating a ToggleGroupElement, setting its behavior, adding toggles, and retrieving the active toggle. Ensure to import necessary classes.

```java
var group = new ToggleGroupElement();
group.getToggleGroup().setAllowEmpty(false);

group.addChild(new Toggle().setText("Option A", true).setOn(true));
group.addChild(new Toggle().setText("Option B", true));
group.addChild(new Toggle().setText("Option C", true));

// Retrieve the currently-active toggle
Toggle active = group.getToggleGroup().getCurrentToggle();

```

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

### Load ShaderTexture (KubeJS)

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/textures/shader

Example of loading a shader texture using KubeJS. For tinted shaders, use the `setColor` method.

```javascript
let effect = new ShaderTexture(ResourceLocation.parse("mymod:my_effect"));
```

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

### Initialize ModularUI in Custom Menu and Screen

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/ui/getting_start

Demonstrates initializing ModularUI within a custom AbstractContainerMenu and setting up the screen dimensions in AbstractContainerScreen.

```java
public class MyContainerMenu extends AbstractContainerMenu {
    // you can do initialization in the constructor
    public MyContainerMenu(...) {
        super(...) 

        var modularUI = createModularUI(player)
        // we have added mixin to make the AbstractContainerMenu implementing the interface
        if (this instanceof IModularUIHolderMenu holder) {
            holder.setModularUI(modularUI);
        }
    }

    // .....
}

public class MyContainerScreen extends AbstractContainerScreen<MyContainerMenu> {
    @Override
    public void init() {
        // the modular widget has already added + init by events
        this.imageWidth = (int) getMenu().getModularUI().getWidth();
        this.imageHeight = (int) getMenu().getModularUI().getHeight();
        super.init();
    }

    // .....
}
```

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

### Sending RPC to a specific player

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/sync/annotations

Example of how to send an RPC message ('rpcTestA') to a specific player using the rpcToPlayer method.

```java
public void sendMsgToPlayer(ServerPlayer player, String msg) {
    rpcToServer(player, "rpcTestA", msg)
}

```

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

### NBT/JSON representation of sub-persisted fields

Source: https://low-drag-mc.github.io/LowDragMC-Doc/ldlib2/sync/annotations

Example of NBT/JSON output for fields marked with 'subPersisted = true', including nested structures.

```json
{
    "stackHandler": {
        "Size": 5,
        "Items": []
    },
    "testContainer": {
        "vector3fValue": [0, 0, 0],
        "intArray": [1, 2, 3]
    }
}
```