Init

content/ui-systems/_index.en.md

@@ -0,0 +1,100 @@
+---
+title: UI Systems
+type: docs
+weight: 5
+---
+
+The UI Systems section covers user interface, permissions, and custom pages.
+
+## Overview
+
+{{< cards cols="2" >}}
+  {{< card link="hud-manager" title="HUD Manager" subtitle="Control visibility of HUD components" icon="eye" >}}
+  {{< card link="custom-pages" title="Custom Pages" subtitle="Create custom UI overlays" icon="document-text" >}}
+  {{< card link="windows" title="Windows" subtitle="Inventory and crafting windows" icon="collection" >}}
+  {{< card link="ui-files" title="UI Files" subtitle="The .ui markup language" icon="code" >}}
+  {{< card link="ui-syntax" title="UI Syntax" subtitle="Variables, imports, templates" icon="document" >}}
+  {{< card link="ui-widgets" title="UI Widgets" subtitle="Available widget types" icon="cube" >}}
+  {{< card link="ui-properties" title="UI Properties" subtitle="Anchor, layout, padding" icon="adjustments" >}}
+  {{< card link="ui-styles" title="UI Styles" subtitle="Styling system" icon="color-swatch" >}}
+  {{< card link="permissions" title="Permissions" subtitle="Player permissions and access control" icon="shield-check" >}}
+{{< /cards >}}
+
+## Key Concepts
+
+### HUD Components
+
+The HUD consists of built-in components that can be shown or hidden:
+
+- **Hotbar** - Item slots at the bottom of the screen
+- **Health/Mana/Stamina** - Vital stat bars
+- **Chat** - Text communication
+- **Compass** - Direction indicator
+- **Notifications** - Alert messages
+- And many more...
+
+### Custom Pages
+
+Custom pages allow you to create overlay UIs using the `UICommandBuilder`:
+
+```java
+public class MyPage extends CustomUIPage {
+
+    public MyPage(PlayerRef ref) {
+        super(ref, CustomPageLifetime.CanDismiss);
+    }
+
+    @Override
+    public void build(Ref<EntityStore> ref, UICommandBuilder builder,
+                      UIEventBuilder events, Store<EntityStore> store) {
+        // Build UI using builder.set(), builder.append(), etc.
+        builder.append("Pages/MyTemplate.ui");
+        builder.set("#title", "Welcome!");
+    }
+}
+```
+
+### Page Manager
+
+Each player has a `PageManager` that handles custom pages:
+
+```java
+Player player = ...;
+PageManager pageManager = player.getPageManager();
+
+// Open a custom page
+pageManager.openCustomPage(ref, store, new MyPage(player.getPlayerRef()));
+
+// Close to normal view
+pageManager.setPage(ref, store, Page.None);
+```
+
+## Accessing the HUD Manager
+
+```java
+Player player = ...;
+HudManager hudManager = player.getHudManager();
+
+// Hide all HUD components
+hudManager.setVisibleHudComponents(player.getPlayerRef());
+
+// Show specific components
+hudManager.showHudComponents(player.getPlayerRef(),
+    HudComponent.Hotbar,
+    HudComponent.Health
+);
+```
+
+## Architecture
+
+```
+Player
+├── HudManager        → Controls HUD visibility
+├── PageManager       → Manages custom pages
+│   └── CustomUIPage  → Your custom UI
+└── WindowManager     → Manages windows (inventory, crafting)
+```
+
+{{< callout type="info" >}}
+UI operations are typically performed through the `PlayerRef` or `Player` component. Access these through events or the command context.
+{{< /callout >}}