# Lumen

> A transparent, no-magic, no-build vanilla-JS OOP UI framework. What you write is what runs.

Lumen is an OOP UI framework in the lineage of Backbone.js and Marionette.js, rebuilt for the modern platform: native ES modules (no build step), plain classes (not Web Components), separate HTML in <template> elements, JSDoc types, and zero runtime dependencies. Views are classes you extend; Models/Collections are observable; Regions and a hash Router handle layout and navigation.

## Getting started
- [install](https://dragones-tech.github.io/lumen/docs/en/install.md): How to add Lumen — CDN (import map + jsDelivr), copy src/, or npm.

## Modules
- [event-emitter](https://dragones-tech.github.io/lumen/docs/en/event-emitter.md): Typed event bus — on/once/off/emit, AbortSignal cleanup, no global singleton.
- [dom](https://dragones-tech.github.io/lumen/docs/en/dom.md): clone(template), refs(root), $, $$ — the bridge between <template> markup and classes.
- [animate](https://dragones-tech.github.io/lumen/docs/en/animate.md): Promise-based fadeIn/fadeOut/slideIn/slideOut over the Web Animations API.
- [view](https://dragones-tech.github.io/lumen/docs/en/view.md): Abstract base class you extend — lifecycle, refs, static regions, surgical updates, signal-bound observe/onResize/onMedia/interval.
- [model](https://dragones-tech.github.io/lumen/docs/en/model.md): Observable single-entity state (get/set, change events), async validation via static rules, and static storage persistence.
- [collection](https://dragones-tech.github.io/lumen/docs/en/collection.md): Ordered list of Models; add/remove/reset events; non-mutating find/where/sort.
- [collection-view](https://dragones-tech.github.io/lumen/docs/en/collection-view.md): One child View per Model, kept in sync with keyed reconciliation.
- [region](https://dragones-tech.github.io/lumen/docs/en/region.md): Manages a DOM slot; show(view) animates the old view out before mounting the new.
- [router](https://dragones-tech.github.io/lumen/docs/en/router.md): hashchange/popstate routing with :params; pairs with Region to swap screens.
- [http](https://dragones-tech.github.io/lumen/docs/en/http.md): Small fetch wrapper — JSON, HttpError, per-request AbortSignal, retry/backoff, onRequest/onResponse interceptors.
- [resource](https://dragones-tech.github.io/lumen/docs/en/resource.md): Observable server state — stale-while-revalidate cache over a fetcher: dedupe, revalidation, optimistic mutate.
- [i18n](https://dragones-tech.github.io/lumen/docs/en/i18n.md): Tiny reactive translations with {interpolation}, nested keys, and fallback.
- [validate](https://dragones-tech.github.io/lumen/docs/en/validate.md): Composable sync/async validation rules; async Model.validate() returns errors keyed by field.
- [element](https://dragones-tech.github.io/lumen/docs/en/element.md): defineElement(tag, ViewClass) — use a View as a Custom Element.
- [canvas](https://dragones-tech.github.io/lumen/docs/en/canvas.md): Experimental canvas layer — Stage/Node2D/CanvasLayer; render the same Model/Collection to canvas as well as DOM.

## Guides
- [tradeoffs](https://dragones-tech.github.io/lumen/docs/en/tradeoffs.md): Strengths & limits — what Lumen is great at, where it falls short, and when to use it.
- [structure](https://dragones-tech.github.io/lumen/docs/en/structure.md): Project structure — one View per file, where templates live, server partials vs static.
- [messaging](https://dragones-tech.github.io/lumen/docs/en/messaging.md): Messaging between views — a shared EventEmitter bus + Model/Collection events, leak-free via signal.
- [styling](https://dragones-tech.github.io/lumen/docs/en/styling.md): Style-agnostic — plain CSS, native @scope, or Tailwind.
- [deployment](https://dragones-tech.github.io/lumen/docs/en/deployment.md): HTTP/2, import maps, modulepreload — why no bundler is needed.
- [credits](https://dragones-tech.github.io/lumen/docs/en/credits.md): A respectful homage to Backbone.js and Marionette.js.

## Full text
- [llms-full.txt](https://dragones-tech.github.io/lumen/llms-full.txt): Every page concatenated into one file.