Metadata-Version: 2.4
Name: pylage
Version: 1.0.1
Summary: A server-driven differential UI framework for Python
Author-email: Rachit Kumar kanaujia <kanaujia.rachit1991@gmail.com>
License: Apache License
                                   Version 2.0, January 2004
                                http://www.apache.org/licenses/
        
           TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
        
           1. Definitions.
        
              "License" shall mean the terms and conditions for use, reproduction,
              and distribution as defined by Sections 1 through 9 of this document.
        
              "Licensor" shall mean the copyright owner or entity authorized by
              the copyright owner that is granting the License.
        
              "Legal Entity" shall mean the union of the acting entity and all
              other entities that control, are controlled by, or are under common
              control with that entity. For the purposes of this definition,
              "control" means (i) the power, direct or indirect, to cause the
              direction or management of such entity, whether by contract or
              otherwise, or (ii) ownership of fifty percent (50%) or more of the
              outstanding shares, or (iii) beneficial ownership of such entity.
        
              "You" (or "Your") shall mean an individual or Legal Entity
              exercising permissions granted by this License.
        
              "Source" form shall mean the preferred form for making modifications,
              including but not limited to software source code, documentation
              source, and configuration files.
        
              "Object" form shall mean any form resulting from mechanical
              transformation or translation of a Source form, including but
              not limited to compiled object code, generated documentation,
              and conversions to other media types.
        
              "Work" shall mean the work of authorship, whether in Source or
              Object form, made available under the License, as indicated by a
              copyright notice that is included in or attached to the work
              (an example is provided in the Appendix below).
        
              "Derivative Works" shall mean any work, whether in Source or Object
              form, that is based on (or derived from) the Work and for which the
              editorial revisions, annotations, elaborations, or other modifications
              represent, as a whole, an original work of authorship. For the purposes
              of this License, Derivative Works shall not include works that remain
              separable from, or merely link (or bind by name) to the interfaces of,
              the Work and Derivative Works thereof.
        
              "Contribution" shall mean any work of authorship, including
              the original version of the Work and any modifications or additions
              to that Work or Derivative Works thereof, that is intentionally
              submitted to Licensor for inclusion in the Work by the copyright owner
              or by an individual or Legal Entity authorized to submit on behalf of
              the copyright owner. For the purposes of this definition, "submitted"
              means any form of electronic, verbal, or written communication sent
              to the Licensor or its representatives, including but not limited to
              communication on electronic mailing lists, source code control systems,
              and issue tracking systems that are managed by, or on behalf of, the
              Licensor for the purpose of discussing and improving the Work, but
              excluding communication that is conspicuously marked or otherwise
              designated in writing by the copyright owner as "Not a Contribution."
        
              "Contributor" shall mean Licensor and any individual or Legal Entity
              on behalf of whom a Contribution has been received by Licensor and
              subsequently incorporated within the Work.
        
           2. Grant of Copyright License. Subject to the terms and conditions of
              this License, each Contributor hereby grants to You a perpetual,
              worldwide, non-exclusive, no-charge, royalty-free, irrevocable
              copyright license to reproduce, prepare Derivative Works of,
              publicly display, publicly perform, sublicense, and distribute the
              Work and such Derivative Works in Source or Object form.
        
           3. Grant of Patent License. Subject to the terms and conditions of
              this License, each Contributor hereby grants to You a perpetual,
              worldwide, non-exclusive, no-charge, royalty-free, irrevocable
              (except as stated in this section) patent license to make, have made,
              use, offer to sell, sell, import, and otherwise transfer the Work,
              where such license applies only to those patent claims licensable
              by such Contributor that are necessarily infringed by their
              Contribution(s) alone or by combination of their Contribution(s)
              with the Work to which such Contribution(s) was submitted. If You
              institute patent litigation against any entity (including a
              cross-claim or counterclaim in a lawsuit) alleging that the Work
              or a Contribution incorporated within the Work constitutes direct
              or contributory patent infringement, then any patent licenses
              granted to You under this License for that Work shall terminate
              as of the date such litigation is filed.
        
           4. Redistribution. You may reproduce and distribute copies of the
              Work or Derivative Works thereof in any medium, with or without
              modifications, and in Source or Object form, provided that You
              meet the following conditions:
        
              (a) You must give any other recipients of the Work or
                  Derivative Works a copy of this License; and
        
              (b) You must cause any modified files to carry prominent notices
                  stating that You changed the files; and
        
              (c) You must retain, in the Source form of any Derivative Works
                  that You distribute, all copyright, patent, trademark, and
                  attribution notices from the Source form of the Work,
                  excluding those notices that do not pertain to any part of
                  the Derivative Works; and
        
              (d) If the Work includes a "NOTICE" text file as part of its
                  distribution, then any Derivative Works that You distribute must
                  include a readable copy of the attribution notices contained
                  within such NOTICE file, excluding those notices that do not
                  pertain to any part of the Derivative Works, in at least one
                  of the following places: within a NOTICE text file distributed
                  as part of the Derivative Works; within the Source form or
                  documentation, if provided along with the Derivative Works; or,
                  within a display generated by the Derivative Works, if and
                  wherever such third-party notices normally appear. The contents
                  of the NOTICE file are for informational purposes only and
                  do not modify the License. You may add Your own attribution
                  notices within Derivative Works that You distribute, alongside
                  or as an addendum to the NOTICE text from the Work, provided
                  that such additional attribution notices cannot be construed
                  as modifying the License.
        
              You may add Your own copyright statement to Your modifications and
              may provide additional or different license terms and conditions
              for use, reproduction, or distribution of Your modifications, or
              for any such Derivative Works as a whole, provided Your use,
              reproduction, and distribution of the Work otherwise complies with
              the conditions stated in this License.
        
           5. Submission of Contributions. Unless You explicitly state otherwise,
              any Contribution intentionally submitted for inclusion in the Work
              by You to the Licensor shall be under the terms and conditions of
              this License, without any additional terms or conditions.
              Notwithstanding the above, nothing herein shall supersede or modify
              the terms of any separate license agreement you may have executed
              with Licensor regarding such Contributions.
        
           6. Trademarks. This License does not grant permission to use the trade
              names, trademarks, service marks, or product names of the Licensor,
              except as required for reasonable and customary use in describing the
              origin of the Work and reproducing the content of the NOTICE file.
        
           7. Disclaimer of Warranty. Unless required by applicable law or
              agreed to in writing, Licensor provides the Work (and each
              Contributor provides its Contributions) on an "AS IS" BASIS,
              WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
              implied, including, without limitation, any warranties or conditions
              of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
              PARTICULAR PURPOSE. You are solely responsible for determining the
              appropriateness of using or redistributing the Work and assume any
              risks associated with Your exercise of permissions under this License.
        
           8. Limitation of Liability. In no event and under no legal theory,
              whether in tort (including negligence), contract, or otherwise,
              unless required by applicable law (such as deliberate and grossly
              negligent acts) or agreed to in writing, shall any Contributor be
              liable to You for damages, including any direct, indirect, special,
              incidental, or consequential damages of any character arising as a
              result of this License or out of the use or inability to use the
              Work (including but not limited to damages for loss of goodwill,
              work stoppage, computer failure or malfunction, or any and all
              other commercial damages or losses), even if such Contributor
              has been advised of the possibility of such damages.
        
           9. Accepting Warranty or Additional Liability. While redistributing
              the Work or Derivative Works thereof, You may choose to offer,
              and charge a fee for, acceptance of support, warranty, indemnity,
              or other liability obligations and/or rights consistent with this
              License. However, in accepting such obligations, You may act only
              on Your own behalf and on Your sole responsibility, not on behalf
              of any other Contributor, and only if You agree to indemnify,
              defend, and hold each Contributor harmless for any liability
              incurred by, or claims asserted against, such Contributor by reason
              of your accepting any such warranty or additional liability.
        
           END OF TERMS AND CONDITIONS
        
           Copyright 2026 Rachit Kumar Kanaujia
        
           Licensed under the Apache License, Version 2.0 (the "License");
           you may not use this file except in compliance with the License.
           You may obtain a copy of the License at
        
               http://www.apache.org/licenses/LICENSE-2.0
        
           Unless required by applicable law or agreed to in writing, software
           distributed under the License is distributed on an "AS IS" BASIS,
           WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
           See the License for the specific language governing permissions and
           limitations under the License.
Project-URL: Homepage, https://github.com/aanalyst-rachit/pylage
Project-URL: Bug Tracker, https://github.com/aanalyst-rachit/pylage/issues
Keywords: ui,framework,server-driven,differential-ui,web
Classifier: Development Status :: 5 - Production/Stable
Classifier: Intended Audience :: Developers
Classifier: License :: OSI Approved :: Apache Software License
Classifier: Programming Language :: Python :: 3
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Classifier: Topic :: Software Development :: User Interfaces
Classifier: Topic :: Internet :: WWW/HTTP :: Dynamic Content
Requires-Python: >=3.10
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: websockets>=10.0
Dynamic: license-file

# PyLage

**PyLage** is a reactive, server-driven, differential UI framework written entirely in Python. You build a component tree in Python, bind it to reactive `State` objects, and PyLage renders it to HTML — either as a static file or as a live, WebSocket-powered application where state changes on the server are diffed and patched straight into the browser DOM, with no client-side framework code to write.

```
Python State  →  DependencyGraph  →  DirtyNodes  →  Scheduler
     │                                                   │
     ▼                                                   ▼
Component Tree  ──── snapshot/diff/patch ────►  WebSocket  ──►  Browser DOM
```

---

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Quickstart](#quickstart)
  - [1. Static HTML rendering](#1-static-html-rendering)
  - [2. Live, reactive app](#2-live-reactive-app)
- [Architecture Overview](#architecture-overview)
- [Component Reference](#component-reference)
- [Styling & Theming](#styling--theming)
- [Reactivity Model](#reactivity-model)
- [Client ↔ Server Protocol](#client--server-protocol)
- [Testing](#testing)
- [Project Layout](#project-layout)
- [Known Limitations](#known-limitations)
- [License](#license)

---

## Features

- **Pure Python component model** — no JSX, no templates. Components are plain trees built with functions like `Column`, `Row`, `Text`, `Button`.
- **Fine-grained reactivity** — `State` objects, a `DependencyGraph` mapping state → (component, prop), `DirtyNodes` tracking, and a `Scheduler` that batches multiple synchronous state changes into a single flush.
- **Two render modes**:
  - `serve=False` (default): renders one static `index.html` file.
  - `serve=True`: starts an HTTP server (initial HTML) + a WebSocket server (live diff/patch updates) and opens a browser.
- **Snapshot → Diff → Patch pipeline** for tree-level changes (`insert`, `remove`, `replace`, `update`, `events`) and a **generic reactive prop pipeline** for value-level changes, both delivered over the same WebSocket connection.
- **Central component registry** — every component's HTML tag, prop contract (`kind`: `attribute` / `boolean` / `text`, `reactive`, `html_name`) and optional custom renderer are declared once and used consistently by the renderer, the state binder, and the IR/compiler layer.
- **Two-way input binding** — `Input(value=state)` auto-wires an `on_input` handler that calls `state.set(...)`, and the browser round-trips edits back to Python.
- **Structured `Style` / `ResponsiveStyle` / `Theme` system** with CSS custom-property support and breakpoint-based media queries.
- **463 passing tests** covering components, registry contracts, reactivity, diffing, protocol messages, the browser client runtime, and live browser integration (Playwright).

---

## Installation

PyLage is a local Python package (no PyPI release referenced in this codebase). Clone/copy the `pylage/` package into your project and install its runtime dependency:

```bash
pip install websockets
```

> The WebSocket server (`pylage/runtime/websocket.py`) imports `websockets.asyncio.server`. Browser-integration tests additionally require `playwright` (`pip install playwright && playwright install chromium`), and `pytest-asyncio` is used by several async tests — these are **test-only** dependencies, not required to use PyLage itself.

Project layout expected on `PYTHONPATH`:

```
your_project/
├── pylage/            # the framework package
│   ├── app.py
│   ├── components/
│   ├── core/
│   ├── renderers/
│   ├── runtime/
│   └── styling/
└── your_app.py
```

---

## Quickstart

### 1. Static HTML rendering

The simplest usage — build a tree, call `pylage.run()`, get a self-contained HTML file back.

```python
import pylage as ps

app = ps.Column(
    ps.Heading("Hello PyLage"),
    ps.Text("This file was rendered statically."),
    ps.Button("Click me", variant="primary"),
)

output_path = ps.run(
    app,
    title="My PyLage App",
    output="dist/index.html",   # defaults to "index.html"
)

print("Rendered to:", output_path)
```

`ps.run(app, serve=False, ...)` (the default) never starts a server; it writes one HTML document (including the embedded client runtime `<script>` — inert since no WebSocket URL is configured) to `output` and returns a `pathlib.Path`.

### 2. Live, reactive app

Set `serve=True` to start a local HTTP + WebSocket server, wire up `State`, and get live DOM updates whenever Python-side state changes — including from Python-side timers/threads, not just click handlers.

```python
import pylage as ps

count = ps.State(0)

def increment():
    count.set(count.value + 1)
    return count.value

app = ps.Column(
    ps.Heading(count),                 # State passed directly as a prop
    ps.Button("Increment", on_click=increment),
)

ps.run(
    app,
    title="Reactive Counter",
    serve=True,          # starts HTTP + WebSocket servers, opens a browser
    output="live/index.html",
)
```

Two-way input binding works the same way — pass a `State` as `value=` to `Input` and PyLage wires the browser `input` event back to `state.set(...)` automatically:

```python
name = ps.State("Dollar")

app = ps.Column(
    ps.Heading(name),
    ps.Input(value=name),   # typing in the browser updates `name` in Python
)
```

For production/embedded use without the blocking `run()` loop, drive the `Runtime` object directly:

```python
from pylage.runtime import Runtime

runtime = Runtime(app, title="My App", output="dist/index.html")
url = runtime.start()      # returns "http://127.0.0.1:<port>/"
...
runtime.stop()
```

---

## Architecture Overview

PyLage is organized into five layers. Data flows one way on state change, and the browser only ever receives small JSON patch messages, never a full re-render.

```
┌───────────────────────────────────────────────────────────────────────┐
│ 1. COMPONENT LAYER (pylage/core/component.py, pylage/components/)     │
│    Component: type, props, children, events, id (uuid4 hex[:10])      │
│    component() factory splits on_* kwargs into `events`,              │
│    consults ComponentRegistry for the prop contract                   │
└───────────────────────────────────────────────────────────────────────┘
                                   │
┌───────────────────────────────────────────────────────────────────────┐
│ 2. REGISTRY LAYER (pylage/core/registry.py)                           │
│    ComponentRegistry: type -> ComponentDefinition(tag, void, renderer,│
│    props: {name: PropDefinition(kind, reactive, html_name)})          │
│    Single source of truth used by HTMLRenderer, StateBinding, IR      │
└───────────────────────────────────────────────────────────────────────┘
                                   │
┌───────────────────────────────────────────────────────────────────────┐
│ 3. REACTIVITY LAYER (pylage/core/state.py, graph.py, dirty.py,        │
│    scheduler.py, binding.py)                                          │
│    State.set() -> notifies subscribers                                │
│    StateBinding walks the tree at construction time, subscribes to    │
│    every State-valued *reactive* prop, and on change either:          │
│      a) calls the callback immediately (no scheduler), or             │
│      b) marks the owning Component dirty in DirtyNodes and calls      │
│         Scheduler.request() (coalesces N sync changes -> 1 flush)     │
└───────────────────────────────────────────────────────────────────────┘
                                   │
┌───────────────────────────────────────────────────────────────────────┐
│ 4. RENDER / DIFF / PATCH LAYER                                        │
│    HTMLRenderer (core/renderer.py): Component tree -> HTML string,    │
│      registry-driven tag/attribute/boolean/text resolution            │
│    component_to_snapshot (core/snapshot.py): Component -> JSON dict   │
│    diff() (core/diff.py): previous snapshot, current snapshot ->      │
│      [update | insert | remove | replace | events] operations         │
│    operation_to_message() (core/patch.py): operation -> protocol      │
│      message (UpdateMessage / TreeAddMessage / TreeRemoveMessage /    │
│      TreeReplaceMessage)                                              │
│    Tree mutations (add/remove/replace/clear/set_children/move_to)     │
│      are additionally observed live via TreeMutationObserver and      │
│      broadcast directly as Tree*Message, independent of diff/patch    │
└───────────────────────────────────────────────────────────────────────┘
                                   │
┌───────────────────────────────────────────────────────────────────────┐
│ 5. RUNTIME / TRANSPORT LAYER (pylage/runtime/)                        │
│    LocalServer: threaded http.server serving the rendered index.html  │
│    WebSocketServer: websockets.asyncio.server; binds StateBinding +   │
│      TreeMutationObserver to the root, dispatches inbound `event`     │
│      messages via EventDispatcher, broadcasts outbound update/tree_*  │
│      messages to all connected clients                                │
│    client.py (CLIENT_RUNTIME): vanilla-JS runtime embedded in the     │
│      HTML document; listens for click/input/change, sends `event`     │
│      messages, and applies update/tree_add/tree_remove/tree_replace/  │
│      tree_clear/tree_set_children/tree_move patches to the real DOM   │
└───────────────────────────────────────────────────────────────────────┘
```

**Round trip for a browser click:**
`click` (DOM) → `data-pylage-events` lookup → `sendEvent()` → WebSocket `event` message → `EventDispatcher.dispatch()` → your Python handler → `State.set()` → `StateBinding._changed()` → `DirtyNodes.mark()` + `Scheduler.request()` → (next loop tick) `Scheduler.flush()` → `UpdateMessage` broadcast → client `onResponse` → DOM attribute/text/property patch.

**Round trip for structural changes** (`component.add()`, `.remove()`, `.replace()`, `.clear()`, `.set_children()`, `.move_to()`): each mutation method emits a single mutation event synchronously to `TreeMutationObserver`, which is translated straight into a `Tree*Message` and broadcast — this path does **not** go through the scheduler/batching layer.

---

## Component Reference

All components are exported from the top-level `pylage` package (`import pylage as ps`). Every component maps 1:1 to an entry in `pylage.core.registry.registry`.

| Component | HTML tag | Void element | Notable props |
|---|---|---|---|
| `Column(*children, **props)` | `div` | no | `class_name`, `title`; default `style=Style(display="flex", flex_direction="column")`, overridable via `style=` |
| `Row(*children, **props)` | `div` | no | same as `Column`, default `flex_direction="row"` |
| `Grid(*children, **props)` | `div` | no | `class_name`, `title`; layout via `style=Style(display="grid", ...)` |
| `Text(text, **props)` | `div` | no | `text` (kind=`text`, HTML-escaped), supports `State` |
| `Heading(text, **props)` | `h1` | no | `text` (kind=`text`) |
| `Button(text, **props)` | `button` | no | `text`, `value`, `disabled` (boolean), `title`; use `on_click=...` |
| `Input(value="", **props)` | `input` | yes | `value`, `disabled`, `title`; passing `value=State(...)` auto-wires `on_input` |
| `Form(*children, **props)` | `form` | no | arbitrary attrs (e.g. `method`, `action`) pass through generically |
| `Table(*children, **props)` | `table` | no | `class_name`, `title` |
| `Dialog(*children, **props)` | `dialog` | no | `class_name`, `title` |
| `Navigation(*children, **props)` | `nav` | no | `class_name`, `title` |
| `Tabs(*children, **props)` | `div` | no | `class_name`, `title` |
| `Card(*children, **props)` | `div` | no | `class_name`, `title`; default block layout style |
| `Divider(*children, **props)` | `hr` | yes | `class_name`, `title` |
| `Badge` / `Avatar` / `Accordion` / `Carousel` | `span` / `span` / `div` / `div` | no | `class_name`, `title` |
| `Image(**props)` | `img` | yes | `src`, `alt`, `class_name`, `title` |
| `Video` / `Audio` | `video` / `audio` | no | `src`, `controls` (boolean), `class_name`, `title` |
| `Icon(**props)` | `span` | no | `name` (kind=`text`), `class_name`, `title` |
| `Canvas(*children, **props)` | `svg` | no | `width`, `height`, `class_name`, `title` |
| `Checkbox(**props)` | `input type="checkbox"` | no | `checked` (boolean), `class_name`, `title` |
| `Switch(**props)` | `input type="checkbox"` | no | same as `Checkbox` |
| `RadioGroup(*children, **props)` | `div` | no | `class_name`, `title` |
| `Select(*children, **props)` | `select` | no | `value`, `class_name`, `title` |
| `Slider(**props)` | `input type="range"` | yes | `value`, `min`, `max`, `step` |
| `DatePicker(**props)` | `input type="date"` | yes | `value`, `min`, `max` |
| `Alert` / `Toast` / `Spinner` / `Skeleton` | `div` | no | `text` (kind=`text`), `class_name`, `title` |
| `ProgressBar(**props)` | `progress` | no | `value`, `max`, `text` |
| `Breadcrumbs(*children, **props)` | `nav` | no | renders children inside `<ol><li>...</li></ol>` |
| `Pagination(*children, **props)` | `nav` | no | `class_name`, `title` |
| `Menu(*children, **props)` | `menu` | no | `class_name`, `title` |
| `Drawer(*children, **props)` | `aside` | no | `class_name`, `title` |
| `Tooltip(*children, **props)` | `span` | no | `class_name`, `title` |
| `Popover(*children, **props)` | `div` | no | `class_name`, `title` |

Every rendered element also carries `data-pylage-id="<component.id>"` and, if the component has any `on_*` handlers, `data-pylage-events="click,input,..."` — these two attributes are what the client runtime uses to route DOM events back to Python and apply patches.

Unknown/custom component types still render (falling back to a `<div>` tag with generic attribute/text handling) so you can register your own components without modifying the framework:

```python
from pylage.core.registry import registry, PropDefinition

registry.register(
    "RatingStars",
    "div",
    props={
        "value": PropDefinition("value", kind="attribute", html_name="data-value"),
        "class_name": PropDefinition("class_name", kind="attribute", html_name="class"),
    },
)
```

---

## Styling & Theming

```python
import pylage as ps

card = ps.Card(
    ps.Text("Styled content"),
    style=ps.Style(
        padding="16px",
        border_radius="8px",
        box_shadow="0 1px 3px rgba(0,0,0,.15)",
    ),
)
```

- `Style` is an immutable dataclass covering box model, flex, grid, border, and typography properties, plus a `custom={"--my-var": "..."}` escape hatch for arbitrary CSS custom properties.
- `Style.merge(override)` combines a component's default layout style (e.g. `Column`'s `display:flex;flex-direction:column`) with user-supplied overrides — user values always win.
- `ResponsiveStyle(base=..., sm=..., md=..., lg=..., xl=...)` emits `@media (min-width: ...)` blocks (`640px` / `768px` / `1024px` / `1280px`).
- `Theme(colors=..., spacing=..., radius=..., fonts=...)` renders `--color-*`, `--spacing-*`, `--radius-*`, `--font-*` CSS custom properties; pass `theme=` to `HTMLRenderer(theme=theme)` to inject a `<style>:root{...}</style>` block once per document.
- `Style` values may themselves be `State` objects — `to_css()` unwraps them automatically, so layout can be reactive too.

---

## Reactivity Model

- `State(value)` — holds a value, notifies subscribers on `set()` **only if the new value compares unequal to the old one**.
- Any component prop can be a `State` instance. `StateBinding` walks the tree once at construction and subscribes to every `State`-valued prop whose `PropDefinition.reactive` is `True` (the default for unknown props/components, preserving backward compatibility).
- `DependencyGraph` records `State -> {(Component, prop_name)}` edges — used for introspection/tooling and by `DirtyNodes.mark_from_state`.
- `DirtyNodes` is a `set` + insertion-ordered `list`, so multiple state changes to the same component in one batch collapse into a single scheduled update, and processing order is deterministic (first-marked-first-flushed).
- `Scheduler.request()` calls `schedule_flush()` **at most once** per batch (`WebSocketServer` schedules a flush ~1ms later on its own event loop via `call_later`), then `Scheduler.flush()` drains `DirtyNodes` and re-reads each dirty component's **current** prop values — so three synchronous `state.set()` calls in a row produce exactly one WebSocket message reflecting the final value, not three.

---

## Client ↔ Server Protocol

All messages are newline-free compact JSON (`json.dumps(..., separators=(",", ":"))`) sent over a single WebSocket per client.

| Direction | Type | Purpose |
|---|---|---|
| client → server | `event` | `{id, event, payload?}` — DOM event dispatched to `EventDispatcher` |
| server → client | `update` | `{id, props, remove_props?, prop_meta?}` — reactive prop change |
| server → client | `tree_add` | `{parent_id, components[], index?}` — component(s) inserted |
| server → client | `tree_remove` | `{parent_id, component_ids[]}` — component(s) removed |
| server → client | `tree_replace` | `{parent_id, old_component_id, new_component, index}` |
| server → client | `tree_clear` | `{parent_id, component_ids[]}` — all children removed |
| server → client | `tree_set_children` | `{parent_id, children[]}` — full children replacement |
| server → client | `tree_move` | `{component_id, old_parent_id, new_parent_id}` |
| server → client | `response` | `{ok, result?, error?}` — reply to an `event` message |

`prop_meta` (on `update`) carries each prop's registry `kind` (`attribute`/`boolean`/`text`) and `html_name`, so the client can apply the correct DOM operation (attribute set/remove, boolean toggle, or `textContent` assignment) without any component-specific JavaScript.

---

## Testing

The project ships an extensive `test/` suite (unit, integration, protocol, benchmark, and Playwright browser tests). Run everything with:

```bash
pip install pytest websockets playwright pytest-asyncio
playwright install chromium   # only needed for browser tests

pytest -q
```

Latest recorded run: **463 passed** (see `pylage_code_and_test_log.txt`, Section 3).

Notable test categories:
- `test_*_component.py` — one file per component, verifying tag, props, and children rendering.
- `test_registry_*.py` — registry contract enforcement (`PropDefinition` kind/reactive/html_name validation, custom renderer preservation, void-element rendering).
- `test_diff.py`, `test_tree_patch_protocol.py` — diff/patch algorithm correctness.
- `test_batching.py`, `test_scheduler.py`, `test_dirty_nodes.py` — reactive pipeline batching semantics.
- `test_browser_*.py` — full round-trip tests using Playwright against a real running `Runtime`.
- `test_phase6_*.py` — latency/throughput benchmarks for diff, patch, scheduler, and WebSocket broadcast.

---

## Project Layout

```
pylage/
├── app.py                 # pylage.run() — the top-level entry point
├── components/
│   ├── basic.py            # Text, Column, Row, Card, Button, Input, ... factories
│   └── __init__.py
├── core/
│   ├── component.py        # Component dataclass, component() factory, mutation API
│   ├── registry.py         # ComponentRegistry, PropDefinition, ComponentDefinition
│   ├── renderer.py         # HTMLRenderer — Component -> HTML
│   ├── state.py             # State (reactive value + subscribers)
│   ├── graph.py             # DependencyGraph (State -> (Component, prop))
│   ├── dirty.py             # DirtyNodes (batched-update tracking)
│   ├── scheduler.py         # Scheduler (coalesced flush)
│   ├── binding.py           # StateBinding (wires State subscriptions into the tree)
│   ├── events.py            # EventDispatcher (component_id/event -> handler)
│   ├── snapshot.py          # component_to_snapshot (Component -> JSON dict)
│   ├── diff.py               # diff() — snapshot A/B -> patch operations
│   ├── patch.py              # operation_to_message() — ops -> protocol messages
│   ├── protocol.py           # EventMessage, UpdateMessage, Tree*Message dataclasses
│   ├── ir.py                 # Compiler-layer IR (IRNode, normalize/analyze/optimize)
│   └── tree.py                # print_tree, collect_ids, TreeMutationObserver
├── renderers/
│   └── html.py              # HTMLDocumentRenderer — full standalone <html> document
├── runtime/
│   ├── runtime.py            # Runtime — coordinates HTTP + WebSocket servers
│   ├── server.py             # LocalServer — threaded static-file HTTP server
│   ├── websocket.py          # WebSocketServer — live transport + broadcast
│   └── client.py             # CLIENT_RUNTIME — embedded browser JS
└── styling/
    ├── style.py               # Style dataclass + to_css()
    ├── responsive.py          # ResponsiveStyle + media-query generation
    └── theme.py                # Theme — CSS custom-property tokens
```

---

## Known Limitations

See `Developer_Manual.md` → **Known Limitations & Edge Cases** for the full, test-verified list (registry mutation is process-global, `events` diff operations have no dedicated protocol message, `State.__eq__` gates change notification, single-file HTTP server, no SSR hydration diffing, etc.).

## License

No `LICENSE` file is present in the provided codebase — add one appropriate to your organization before distributing PyLage externally.
