PHPackages                             scrapyard-io/ux - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. scrapyard-io/ux

ActiveLibrary

scrapyard-io/ux
===============

The ScrapyardIO Node-based-UX library.

0.6.x-dev(yesterday)00MITPHPPHP ^8.4|^8.5|^8.6

Since Jul 31Pushed yesterdayCompare

[ Source](https://github.com/ScrapyardIO/ux)[ Packagist](https://packagist.org/packages/scrapyard-io/ux)[ Docs](https://scrapyard-io.projectsaturnstudios.com)[ RSS](/packages/scrapyard-io-ux/feed)WikiDiscussions 0.6.x Synced today

READMEChangelogDependencies (4)Versions (2)Used By (0)

ScrapyardIO UX
==============

[](#scrapyardio-ux)

[![Latest Version on Packagist](https://camo.githubusercontent.com/0f8258a41432c9f171fb6837d7599c603fffc85392c52ae6f17c258cf17d7e90/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7363726170796172642d696f2f75782e737667)](https://packagist.org/packages/scrapyard-io/ux)[![License](https://camo.githubusercontent.com/de64f472728aac08809d65fcfeb3bae46edc6a2284f04fc77141f77946612d8f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7363726170796172642d696f2f75782e737667)](LICENSE)

UX is the ScrapyardIO node library. A screen is a tree of nodes composed with the framework's flex-lite layout, painted by a `Stage` that repaints only what changed, on any surface from a 128x64 SSD1306 to a 1024x768 SDL window.

The point is not that it is prettier than draw calls. It is that a full SSD1306 transmit costs 20-30 ms, which caps an unconditionally redrawn sketch at roughly 30 fps however little of the screen moved. Setters mark damage, the stage paints the damaged subtrees, and a screen that is standing still costs nothing at all.

Requirements
------------

[](#requirements)

- PHP 8.4+
- `scrapyard-io/framework` / `fabricate/*` 0.6.x

Installation
------------

[](#installation)

In the ScrapyardIO monorepo skeleton, require the path package:

```
composer require scrapyard-io/ux:^0.6.0
php workshop package:discover
```

Publish the config to change the palette or the default metrics:

```
php workshop vendor:publish --provider="ScrapyardIO\UX\UXServiceProvider"
```

Quick start
-----------

[](#quick-start)

Extend `App\Sketches\UXSketch`, build a tree, and mutate it. There is no draw method and no `present()` call:

```
use Fabricate\UX\Layout\Align;
use Fabricate\UX\Node;
use ScrapyardIO\UX\Chrome\Panel;
use ScrapyardIO\UX\Text\Label;

class Hello extends UXSketch
{
    protected Label $greeting;

    protected function build(): Node
    {
        $this->greeting = Label::of('hello')->fitTextTo(3);

        return Panel::surface()->add(Align::centered($this->greeting));
    }

    protected function sample(float $dt): void
    {
        $this->greeting->setText(date('H:i:s'));
    }
}
```

The label measures its own glyphs, `Align` centres it, and changing the text to a string of the same width repaints the label's box and nothing else.

Scaffold a node of your own with:

```
php workshop make:node BatteryMeter
```

The library
-----------

[](#the-library)

NamespaceNodes`Text``Label`, `Readout`, `Marquee``Chrome``Panel`, `Border`, `Icon`, `StatusBar``Indicators``ProgressBar`, `Gauge`, `Sparkline`, `PixelStrip``Controls``Button`, `Toggle`, `Slider`, `ListView`, `Menu`Controls implement the framework's `Focusable`, `Touchable`, `Pointable` and `Buttonable` contracts, so an `InputRouter` drives the same tree from a touchscreen, a mouse or a d-pad.

Colour
------

[](#colour)

Declare colours once as `Fabricate\UX\Color` and let the surface resolve them:

```
Panel::of(Color::fromHex('#201D2B'));
```

The same tree paints correctly on a 1-bit panel (where every colour collapses to lit or unlit) and an RGBA window, because packing happens at paint time against the stage's `FormatSpec` rather than being frozen into the node.

Named colours come from `config/ux.php` through `Support\Theme`, which falls back to the packaged palette when no application is booted — a node must be constructible without a container.

Sizing
------

[](#sizing)

Nodes are intrinsic by default: they answer `measure()` with the size they want inside the offer they were given, and the containers around them decide where that lands. Two shapes recur enough to be worth knowing:

- `Label::fitTextTo(3)` picks the largest text size up to 3 that still fits, which is what makes one tree legible on both a 128px panel and a full window.
- `Column::wrapContent()` makes a group exactly as tall as its children. Without it a flex child claims the whole remaining axis and squeezes its siblings.

Testing
-------

[](#testing)

```
vendor/bin/pest --testsuite Ux
```

Package tests stage trees over a real framebuffer and a real renderer, and assert on the pixels written and the regions marked for transmit. See `tests/Support/StageHarness.php`.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance100

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/10563160?v=4)[Angel Gonzalez](/maintainers/projectsaturnstudios)[@projectsaturnstudios](https://github.com/projectsaturnstudios)

---

Top Contributors

[![projectsaturnstudios](https://avatars.githubusercontent.com/u/10563160?v=4)](https://github.com/projectsaturnstudios "projectsaturnstudios (2 commits)")

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/scrapyard-io-ux/health.svg)

```
[![Health](https://phpackages.com/badges/scrapyard-io-ux/health.svg)](https://phpackages.com/packages/scrapyard-io-ux)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)