Carrot

Appearance

@carrot/engine-framework-flexui ​

ts

GPU-accelerated UI layout system - flexbox-inspired, rendered as an engine overlay pass.

Installation ​

bash
npm install @carrot/engine-framework-flexui

Architecture / How It Works ​

This package is currently a stub. Implementation is planned.

The design references the Unity kids.kapish.flexui package (BIRP/URP/HDRP variants) and will provide:

  • FlexNode tree - layout nodes with flex properties (direction, wrap, justify, align, gap, padding, margin)
  • Layout engine - measure -> arrange -> render pipeline
  • Text rendering - SDF-based glyph rendering
  • UI event system - hit testing, focus management, input routing
  • Style system - CSS-like cascading properties
  • UIOverlayPass - integration with the engine render graph as an overlay render feature

The system will sit on top of @carrot/engine-framework and render UI as an engine overlay, not as DOM elements.

Dependencies ​

PackageUsed For
@carrot/engine-frameworkEntity/Behaviour/Scene base framework

Build ​

bash
npm run build    # runs tsc

Output goes to dist/. Package is ESM ("type": "module").

Usage Guide ​

GPU-accelerated UI layout system - flexbox-inspired, rendered as an engine overlay pass.

Import ​

ts
import { /* planned exports */ } from '@carrot/engine-framework-flexui';

This package is currently a stub. No exports are available yet.

Planned Patterns ​

1. FlexNode layout tree ​

ts
// Planned API - not yet implemented
const root = new FlexNode({ direction: 'row', gap: 8 });
root.addChild(new FlexNode({ flex: 1 }));
root.addChild(new FlexNode({ flex: 2 }));

2. UI overlay rendering ​

ts
// Planned API - not yet implemented
const uiPass = new UIOverlayPass(root);
game.pipeline.register({
  fn: (delta) => uiPass.render(delta),
  stage: PipelineStage.PostRender,
  name: 'ui-overlay',
});

Implementation will follow the design established in the Unity kids.kapish.flexui package.

Carrot