# LLui

> A compile-time-optimized web framework built on The Elm Architecture (TEA), designed for LLM-first authoring. No virtual DOM — view() runs once at mount, builds real DOM nodes with reactive bindings. State changes drive a two-phase update with bitmask gating.

## Packages

- @llui/dom — Runtime: component, mount, scope tree, bindings, element helpers
- @llui/vite-plugin — Compiler: 3-pass TypeScript transform, bitmask injection
- @llui/effects — Effect builders: http, cancel, debounce, websocket, retry, upload
- @llui/router — Routing: structured path matching, guards, history/hash mode
- @llui/transitions — Animation: transition(), fade, slide, scale, collapse, flip, spring
- @llui/components — 54 headless components + opt-in theme
- @llui/test — Test harness: testComponent, testView, propertyTest, replayTrace
- @llui/vike — Vike SSR/SSG adapter
- @llui/mcp — MCP server for LLM debug tools
- @llui/lint-idiomatic — 15 anti-pattern rules

## Documentation

- Getting Started: https://llui.dev/getting-started
- Cookbook: https://llui.dev/cookbook
- Architecture: https://llui.dev/architecture
- LLM Guide: https://llui.dev/llm-guide
- Full API Reference: https://llui.dev/llms-full.txt

## Example

```typescript
import { component, mountApp, div, button } from '@llui/dom'

type State = { count: number }
type Msg = { type: 'inc' } | { type: 'dec' }

const Counter = component<State, Msg, never>({
  name: 'Counter',
  init: () => [{ count: 0 }, []],
  update: (state, msg) => {
    switch (msg.type) {
      case 'inc': return [{ ...state, count: state.count + 1 }, []]
      case 'dec': return [{ ...state, count: state.count - 1 }, []]
    }
  },
  view: ({ send, text }) => [
    div({ class: 'counter' }, [
      button({ onClick: () => send({ type: 'dec' }) }, [text('-')]),
      text((s) => String(s.count)),
      button({ onClick: () => send({ type: 'inc' }) }, [text('+')]),
    ]),
  ],
})

mountApp(document.getElementById('app')!, Counter)
```