pysx-framework 0.1.0__py3-none-any.whl

examples/README.md

@@ -0,0 +1,346 @@
+# Running examples
+
+New users can start with the [installed quickstart](../docs/QUICKSTART.md),
+[interactive tutorial](../docs/TUTORIAL.md), [API index](../docs/API.md) and
+[migration guide](../docs/MIGRATION.md). The full course is a separate application
+in [tutorial](../tutorial/README.md), launched with `pysx-tutorial` in
+its own environment. Run
+`hello` for a minimal greeting, `attributes` for native/ARIA/keyed attributes and
+`effects` for cleanup, automatic increments and cancelled/replaced work.
+
+In `todos`, choose **Edit** on a row, change its text and **Save**. The same keyed
+row remains; toggling or removing it acts on the edited record. Other tabs keep
+their own lists. In `navigation`, the files root and missing-route links expose
+wildcard/fallback matching; the last links demonstrate native downloads, new tabs
+and external navigation.
+
+Run commands from the repository root with [uv](https://docs.astral.sh/uv/).
+Python 3.14+ is required for t-strings; uv selects the project's interpreter and
+prepares the environment without activation.
+
+```sh
+uv run --project . pysx-example run counter
+uv run --project . pysx-example run todos
+uv run --project . pysx-example run recovery
+uv run --project . pysx-example run reconnect
+uv run --project . pysx-example run browser_recovery
+uv run --project . pysx-example run resources
+uv run --project . pysx-example run reactive_state
+uv run --project . pysx-example run operators
+uv run --project . pysx-example run forms
+uv run --project . pysx-example run events
+uv run --project . pysx-example run templates
+uv run --project . pysx-example run keyed_rows
+uv run --project . pysx-example run durable_state
+uv run --project . pysx-example run development
+uv run --project . pysx-example run
+```
+
+The last command lists available apps. Examples serve at http://127.0.0.1:8750.
+The `development` entry is a simple reactive counter with its own shared state
+panel. It needs no database or custom hot-reload wiring. Ordinary watch apps have
+no such panel. The panel shows this tab's sample count plus workspace aggregates
+and redacted reset reasons/source links. Discard starts this page fresh while other
+live tabs keep their state. For live editing, use the watch launcher:
+
+```sh
+uv run --project . pysx --app examples.development:example --watch
+```
+
+Start at 0, increment to 1, edit the title in `examples/development.py` and save:
+the count stays 1. Increment to 2, then refresh: it returns to 0. A new tab also
+starts at 0. Separately, changing `count = signal(0)` to `signal(1)` resets that
+slot to 1; restore `signal(0)` afterward. The page includes these steps.
+Add `--inspect` for the separate inspector's redacted events, source links and
+diagnostics. A broken edit leaves the previous worker usable; repair it to resume
+replacement. Ctrl+C stops the supervisor and its workers. Explicit persistence
+is demonstrated separately by `durable_state`. See
+[development hosting](../docs/DEVELOPMENT.md) for configuration and limits.
+
+Choose another port with `--port` or `PSX_PORT`:
+
+```sh
+uv run --project . pysx-example run counter --port 9100
+PSX_PORT=9100 uv run --project . pysx-example run counter
+```
+
+Press Ctrl+C to stop the server. To use `example` directly, activate the environment:
+
+```sh
+source .venv/bin/activate
+pysx-example run counter
+```
+
+The command is installed into the environment's bin directory. A new terminal
+needs activation again, or you can keep using the `uv run --project .` prefix.
+
+## Browser-held draft recovery
+
+Add two revisions, then use **Reverse revisions** to move the same keyed rows.
+**Check draft** completes asynchronously while your name and notes stay editable.
+
+Run `uv run --project . pysx-example run browser_recovery`. This ordinary callable uses
+shared controls and ordinary local signals, with no state codec, database, recovery
+decorator or custom form wiring.
+
+1. Enter a name and notes, then add a revision.
+2. Keep the tab open, stop the server with Ctrl+C, and start the same command again.
+3. The open page restores its latest delivered fields/revision and reports recovery.
+4. Reload the page or open another tab to start a fresh draft.
+
+The same workflow works with these normal host commands:
+
+```sh
+uv run --project . pysx --app examples.browser_recovery:example
+uv run --project . pysx --app examples.browser_recovery:example --asgi
+uv run --project . pysx --app examples.browser_recovery:example --watch
+```
+
+The unchanged counter also recovers through `pysx --app examples.counter:app`, with
+`--asgi` or `--watch` when desired. Keep the framework's private application-state
+directory across restarts. Compatible deployments on other hosts need the same
+[hosting key ring and namespace](../docs/HOSTING.md), together with current authentication.
+Capsules last 24 hours and stay only in the open document's memory. Unsupported or
+changed state can reset; undelivered edits and uncertain actions are not replayed.
+Use normal business persistence for saved account data and cross-device access.
+
+## Durable state
+
+Run `uv run --project . pysx-example run durable_state`. Edit the saved draft and increment
+the counter, then keep the page open while stopping and restarting the server with
+the same command. The browser restores committed count/draft state and reports that
+recovery; the setup marker changes and a new resource loads. Another tab and a page
+reload start independent sessions. Healthy socket reconnect retains the live graph.
+Unsent edits are discarded on reconstruction, rather than replayed.
+
+The same restart test works with `uv run --project . pysx --app
+examples.durable_state:example --watch`: keep the tab open, press Ctrl+C, and restart
+that command. The open page reconnects and recovers its count/draft without
+navigating. Refreshing it still starts a new session.
+
+The default SQLite file is `pysx-durable-example.sqlite3` in the OS temporary directory.
+It survives process restart until removed by local cleanup. For an explicit local
+file, set `PYSX_STATE_PATH` to an existing directory's file path before launching.
+For concurrent workers on a local filesystem, opt into FULL-sync WAL with
+`PYSX_STATE_WAL=1 uv run --project . pysx-example run durable_state`. This requires
+SQLite 3.51.3+ or a [fixed backport](../docs/OWNERSHIP.md); the example closes its
+retained connection during host shutdown. The default keeps scoped connections.
+Only the typed count/draft root is persisted; Python handlers, effects and async
+resources are rebuilt from code. This example uses a local demonstration principal,
+not production authentication.
+
+For owner routing across two workers, use the [Linux deployment runbook](../docs/DEPLOYMENT.md)
+with `PYSX_APP=examples.durable_state:example`. The example reads `PYSX_STATE_PATH`,
+`PYSX_WORKER` and `PYSX_ORIGIN` supplied by that topology. Supply disposable TLS
+material for local testing; production applications must replace the demonstration
+identity with their own authentication and authorization. The two workers share
+declared snapshots and atomic leases, while each live graph has one owner.
+
+## Bounded reconnect
+
+Run `uv run --project . pysx-example run reconnect`. Type a draft, increment the counter,
+then interrupt the connection — switch the network off, suspend the machine, or close
+the socket from the browser console. The page shows a disconnected status and refuses
+clicks and edits instead of queuing them. It retries on its own with capped backoff and
+offers an explicit retry once the attempts are exhausted. On reconnect the session
+number, your draft, the click count and keyboard focus are unchanged, and the server
+clock jumps straight to its current total rather than replaying the ticks you missed.
+Leave the page away long enough for the session to expire and recovery visibly starts a
+fresh session with a new session number. A second tab keeps its own session throughout.
+No network, database or extra host setup is required. See
+[the protocol](../docs/PROTOCOL.md) and [hosting](../docs/HOSTING.md) for the wire
+version and the configurable transport limits.
+
+## Async resources
+
+Run `uv run --project . pysx-example run resources`. The first HTTP response already
+contains the styled page, draft and pending state. Wait without clicking: a message
+loads, the delivered count increases through server push, and a timer posts a server
+notice. **Reload message** starts another load; **Cancel load** stops pending work.
+The setup counter stays at one when the browser attaches. Your draft survives
+background updates; a second tab has its own draft and resource. Ctrl+C disposes
+sessions and their work. The loader is local and needs no network/database or extra
+host setup. Optional ASGI launch:
+`uv run --project . pysx --app examples.resources:example --asgi` (Uvicorn is in the
+checkout dev environment; installed users need `pysx-framework[asgi]`). See
+[resources](../docs/RESOURCES.md) and [hosting](../docs/HOSTING.md).
+
+## Keyed rows
+
+Run `uv run --project . pysx-example run keyed_rows`. Type a private draft, increase its
+count, then reverse the rows or rename Alpha: both edits stay with that row.
+**Focus draft and reverse** focuses its input using an owned ref before moving the
+row; keyboard focus and caret stay in the field. **Add and reverse children** moves
+the existing nested choices and adds one. Picking a child after renaming Alpha uses
+the current label. **Remove Alpha** removes both its card and draft preview;
+**Restore Alpha** starts fresh local state and refs. Each browser session owns its
+drafts, counters, choices and rows. No extra host setup is needed.
+
+## Keyboard and focus
+
+Run `uv run --project . pysx-example run events`. In the color chooser, Up/Down opens
+the list and changes its active option; Enter selects it and Escape closes it.
+Click an option to select it while keeping input focus. The event status shows
+the key and modifier snapshot received by the server. Tab reaches the shortcut
+row; Left/Right moves its single tab stop and browser focus. **Focus color chooser**
+uses an owned asynchronous focus command. The chooser exposes expanded,
+active-descendant and selected ARIA state. Each session has independent state.
+
+Default cancellation happens immediately in the browser. Python callbacks receive
+typed `BrowserEvent` snapshots through `on_event`; async callbacks await owned
+`DomRef.handle()` commands. See [the protocol](../docs/PROTOCOL.md) for ownership,
+imperative zones, supported operations and limits.
+
+## Templates
+
+Run `uv run --project . pysx-example run diagnostics` for the static diagnostic workflow.
+**Apply suggested fix** changes the frozen `count()` sample into an uncalled Signal
+reference and clears its finding. **Show attribute warning** demonstrates an advisory
+schema finding without a guessed fix; **Reset sample** restores the first case.
+The live counter remains interactive, and each tab owns its state. Source samples
+are displayed and analyzed as text, never executed. No additional setup is needed.
+See [diagnostic APIs, codes and edits](../docs/DIAGNOSTICS.md) for the matching
+buffer/CLI workflow; checking `examples/diagnostics.py` itself reports `[]`.
+
+Run `uv run --project . pysx-example run templates` for live template controls.
+**Update heading** changes a live heading followed by two styled break siblings on
+one row. The action is a later inline sibling, and each session owns its heading.
+Reverse/add/remove groups, pick a nested row and switch through three branches.
+Headings use `each_indexed` and ordinary Python assignments; nested `each` callbacks
+retain their captured group after reorder. **Add child to first group** updates an
+independent readable child source. `when` lazily builds the selected branch alongside
+optional markup conditions and value matching. Local styled tags and cross-module
+snapshot fragments use ordinary imports and bare component names. The initial
+comprehension, iterable `each`, and bounded while snapshots stay fixed. Each browser
+session owns its state.
+
+## Reactive state
+
+The `reactive_state` app demonstrates nested writable projections, multiplication
+and batched computations. **Advance twice** shows a branch controlled by numeric
+ordering and membership. **Increment first** updates the status and hides that
+branch. **Edit a private snapshot** leaves the display unchanged, while **Rotate
+list** changes the first positional projection. Collection length stays live.
+
+The boolean helper card displays `all_of`, `any_of` and `not_`. Advance twice,
+increment the first score, then **Reset count** to see each helper react to its inputs.
+Each browser session owns its state.
+
+## Operators
+
+The `operators` app groups supported operations by Python's return-value rules:
+arithmetic, indexing and ordering use operator overloads; `all_of`, `any_of`,
+`not_`, `eq`, `ne`, `contains`, `length` and `concat` use named functions.
+Use `derived(lambda: ...)` for other computations, including Python's
+short-circuiting `and`, `or` and `not`. Signals have no `&`, `|` or `~` overloads.
+
+## Live forms
+
+```sh
+uv run --project . pysx-example run forms
+```
+
+Open http://127.0.0.1:8750. Edit the required text, notes, checkbox, radio group,
+single select and multiple select; their live values update below the controls.
+Use Command/Ctrl to select multiple options. Each browser connection has its own state.
+
+**Apply server values** updates every control. **Reset to initial values** restores
+the browser defaults and live state. Empty the required text to see native
+validation block submission; fill it and **Submit** to inspect enabled field pairs
+and the submitter. Disabled fields are omitted.
+
+The uppercase field demonstrates server normalization while preserving the caret.
+The optional field can be hidden and restored. Text composition commits only its
+final value. Press Ctrl+C in the terminal to stop the server.
+
+The [native element API](../docs/ELEMENTS.md) documents typed construction and bindings.
+The [verification guide](../tests/VERIFICATION.md) lists reproducible browser setup.
+
+## Themes and CSS variables
+
+```sh
+uv run --project . pysx-example run themes
+```
+
+Open http://127.0.0.1:8750. Light/Dark switch this connection's named theme; Clear theme
+resets its overrides. The preview inherits layout and borders through three styled levels.
+Compact/Roomy change its padding, Local accent changes its border and user class, and
+Reset variables removes both overrides to reveal inherited fallbacks. Open a second tab
+to verify it stays independent. Controls support keyboard activation and narrow screens.
+Press Ctrl+C to stop the server. See [styling](../docs/STYLING.md) for the public API.
+
+## Callable components and lifetimes
+
+```sh
+uv run --project . pysx-example run composition
+```
+
+Open http://127.0.0.1:8750. The panel is an inherited styled callable that receives
+caller-owned children. The tree recursively dispatches plain callable components.
+Click a node or press Tab to focus the tree before using the keyboard.
+Right opens a branch; Left closes it or moves to its parent. Up/Down moves through
+visible nodes, Home/End reaches their endpoints, and Enter increments a node's local
+activation count. Reverse roots preserves surviving state and DOM identity. Collapsing
+a branch cleans its descendants; remounting starts their local activation counts fresh.
+The counters distinguish server setup, acknowledged browser mount and cleanup.
+Open a second tab to check session isolation. Press Ctrl+C to stop the server.
+See [component ownership](../docs/GRAMMAR.md#component-ownership) for state and resource hooks.
+
+## Local recovery
+
+Run `uv run --project . pysx-example run recovery`. Increment the panel, enter text in
+the healthy sibling, and click "Fail this panel". Only that panel shows fallback;
+the committed failed-attempt count increases. The sibling's text and counter remain
+usable. "Retry panel" recreates the failed panel with its count at zero. Each
+failure disposes one panel, and repeated retry does not duplicate healthy handlers.
+Another tab starts with its own state. No extra host configuration is required.
+See [recovery behavior and limits](../docs/RECOVERY.md) for ownership, safe errors,
+development tracebacks and the background async host seam.
+
+Todos explains empty filters and returns rows with their original todo keys when
+you select a populated filter again. Retained rows keep their DOM identity; rows
+removed by an empty filter receive fresh handlers when they return.
+
+## Routing and navigation
+
+Run `uv run --project . pysx-example run navigation`. Open User 1 and increment its
+counter, then switch to User 2: the route keeps its local count as the parameter
+changes. Activity (`./activity`) descends into a nested route; Parent (`../`) returns
+to its user, and User 3 (`../3`) selects a sibling. Plain child names also append to
+the current pathname; `/` selects the root and `../../` climbs two levels. Files
+demonstrates a wildcard.
+
+Replace query changes the query without adding a history entry. Jump to details
+scrolls and focuses the user section; browser Back and Forward restore known scroll
+positions and focus. Cancel navigation leaves the current URL and view open. Another
+tab starts its own session. The standalone example opens at `/`; HTTP deep-link
+rendering is described by the [routing host contract](../docs/ROUTING.md).
+
+Require sign-in changes a signal. An `effect()` observes that state and redirects to
+`/login` with `router.navigate(..., replace=True)`, keeping history length unchanged.
+Its path guard prevents repeated redirects. Continue clears the requirement and
+navigates home; another tab keeps its own state. The effect is disposed with the app.
+
+## Session security
+
+Run `uv run --project . pysx-example run session_security`. The Writer identity can
+increment its counter. Choose Read-only and Attempt write: the page shows a denial
+and the counter stays zero. Both identities can edit their private drafts. Open
+another tab, including another Writer tab, to see independent drafts and counters.
+Choosing an identity opens a fresh principal-bound session.
+
+These are explicitly local fixtures selected by URL, with no credentials or
+external setup. The default loopback policy confines the demonstration. Production
+applications must supply real authentication and live authorization through the
+[host integration](../docs/HOSTING.md) and [security contract](../docs/SECURITY.md).
+The example uses shipped Application/HostConfig/SecurityPolicy/require_access APIs
+and shared components.
+
+## Adding an example
+
+Add `examples/<name>.py` with an `app` attribute; the registry discovers it
+automatically, making `example run <name>` available.
+
+Use shared layouts and controls from `examples/components/`, such as `Page`,
+`Action` and `Title`. `page(t"""...""")` adds page-specific style overrides.
+See [the shared theme](components/THEME.md) for palette, spacing and responsive layout.

examples/__init__.py

@@ -0,0 +1,17 @@
+"""Example registry.
+
+Values are complete server app specs, so a caller can pass one straight to
+`python -m pysx.hosting.server --app`.
+"""
+
+from pathlib import Path
+
+_EXAMPLES_DIR = Path(__file__).resolve().parent
+
+examples: dict[str, str] = {
+    path.stem: f"examples.{path.stem}:example"
+    for path in sorted(_EXAMPLES_DIR.glob("*.py"))
+    if path.name != "__init__.py"
+}
+
+__all__ = ["examples"]

examples/attributes.py

@@ -0,0 +1,89 @@
+"""Native booleans, advisory attribute schemas and independently reactive keyed rows."""
+
+from pysx import Fragment, derived, each, native, pysx, signal
+
+from .components import Action, Card, Description, Page, Title, example_app, example_title
+
+
+def app() -> Fragment:
+    example_title("Attributes")
+    enabled = signal(False)
+    tone = signal("calm")
+    rows = signal([1, 2])
+    counts = {key: signal(0) for key in rows()}
+    picked = signal("None")
+    submits = signal(0)
+    custom = native.Div(
+        "Inspect the explicit custom attributes",
+        id="attribute-raw",
+        custom_attrs={"x-state": "ready", "x-tone": tone, "hx-get": "/api", "hx-swap": "outerHTML"},
+    )
+
+    def toggle(_: object) -> None:
+        enabled.set(not enabled())
+
+    def retone(_: object) -> None:
+        tone.set("bright" if tone() == "calm" else "calm")
+
+    def reverse(_: object) -> None:
+        rows.set(list(reversed(rows())))
+
+    def row(key: int) -> Fragment:
+        count = counts[key]
+        label = derived(lambda: f"Row {key}: {count()}")
+
+        def increment(_: object) -> None:
+            count.update(lambda value: value + 1)
+
+        def choose(_: object) -> None:
+            picked.set(label())
+
+        return pysx(t"""
+            div(data-row={key} data-n={count} data-tone={tone}
+                class={derived(lambda: "changed" if count() else "original")})
+                span(data-inner={count}): {label}
+                Action(data-increment={key} onClick={increment}): "Increment row"
+                Action(data-choose={key} disabled={enabled} onClick={choose}): "Choose row"
+        """)
+
+    def submit(_: object) -> None:
+        submits.update(lambda value: value + 1)
+
+    return pysx(t"""
+        Page(id="attributes-example")
+            Title: "Attributes you can inspect"
+            Description:
+                "Toggle native presence, inspect ARIA strings, then reorder independent rows."
+            Card:
+                Action(id="toggle-attrs" onClick={toggle} ariaExpanded={enabled}
+                    ariaControls="attribute-details"): "Toggle attributes"
+                label(htmlFor="attribute-field"): "A typed native field"
+                input(id="attribute-field" type="text" placeholder="Type here" autoComplete="off"
+                    maxLength={40} tabIndex={0} readOnly={enabled} required={enabled}
+                    autoFocus={False})
+                input(id="attribute-autofocus" type="text" autoFocus={True}
+                    ariaLabel="Initially focused field")
+                details(id="attribute-details" open={enabled})
+                    summary: "Native details"
+                    p: "Open follows the toggle."
+                form(id="attribute-form" noValidate={False} onSubmit={submit})
+                    label(for="required-field"): "Required field"
+                    input(id="required-field" required={enabled})
+                    Action(id="attribute-submit" type="submit"): "Submit"
+                p(id="attribute-submits"): {submits}
+                video(id="attribute-video" controls={enabled} autoPlay={False} loop={enabled}
+                    muted={enabled} playsInline={enabled})
+                input(id="attribute-check" type="checkbox" checked={enabled} disabled={enabled})
+                div(id="attribute-panel" hidden={enabled} ariaHidden={enabled}): "Visible panel"
+                my-widget(id="attribute-custom" dataTone={tone}
+                    dataRevealDelay="200" ariaLabel="Custom attribute example")
+                {custom}
+            Card:
+                Action(id="retone" onClick={retone}): "Change independent tone"
+                Action(id="reverse-attrs" onClick={reverse}): "Reverse rows"
+                {each(rows, row, key=lambda key: key)}
+                p(id="attribute-picked"): {picked}
+    """)
+
+
+example = example_app(app)

examples/browser_recovery.py

@@ -0,0 +1,67 @@
+"""An ordinary draft form that stays with its open browser document."""
+
+import asyncio
+
+from pysx import Fragment, each, pysx, signal
+
+from .components import (
+    Action,
+    Card,
+    Description,
+    Eyebrow,
+    Field,
+    Meta,
+    Page,
+    Title,
+    example_app,
+    example_title,
+)
+
+
+def app() -> Fragment:
+    example_title("Browser recovery")
+    name = signal("")
+    notes = signal("")
+    revisions = signal(0)
+    history = signal(list[int]())
+    status = signal("Ready")
+    field_css = "\n".join(Field.declarations)
+
+    def revise(_event: object) -> None:
+        revisions.set(revisions() + 1)
+        history.set([*history(), revisions()])
+
+    def reverse(_event: object) -> None:
+        history.set(list(reversed(history())))
+
+    async def check(_event: object) -> None:
+        status.set("Checking")
+        await asyncio.sleep(0.1)
+        status.set("Checked")
+
+    def revision(value: int) -> Fragment:
+        return pysx(t"li(data-revision={value}): {value}")
+
+    return pysx(t"""
+        Page(id="browser-recovery"):
+            header:
+                Eyebrow: "pysx / examples"
+                Title: "A draft that stays with this tab"
+                Description: "Restart the server with this tab open. Reloading starts fresh."
+            Card:
+                label(htmlFor="recovery-name"): "Name"
+                Field(id="recovery-name" name="name" bindValue={name} autocomplete="off")
+                label(htmlFor="recovery-notes"): "Notes"
+                textarea(id="recovery-notes" bindValue={notes} rows="4" css={field_css})
+                Action(id="add-revision" type="button" onClick={revise}): "Add a revision"
+                Meta:
+                    "Revision: "
+                    span(id="recovery-revision"): {revisions}
+                Action(id="reverse-revisions" type="button" onClick={reverse}): "Reverse revisions"
+                ol(id="recovery-history"): {each(history, revision, key=lambda value: value)}
+                Action(id="check-draft" type="button" onClick={check}): "Check draft"
+                Meta(id="draft-status" ariaLive="polite"): {status}
+    """)
+
+
+example = example_app(app)

examples/components/THEME.md

@@ -0,0 +1,25 @@
+# Example theme
+
+The examples share a quiet light theme: a cool off-white canvas, white cards, slate
+text, and a violet accent. `theme.py` owns the CSS tokens and document defaults;
+`page.py` and `controls.py` own reusable layouts and controls.
+
+- Center the main card in the viewport, with a maximum width of 680px. Longer pages
+  grow naturally and scroll. Keep 16px outside the card on narrow screens.
+- Use `Page` for the main card and `Card` for related content inside it. Borders stay
+  subtle; shadows belong to the main card. Use `page(...)` for width/layout overrides.
+- Group headings with `Eyebrow`, `Title`, and `Description`. Keep body copy muted,
+  short, and readable. Use `Metric` and `Value` for prominent numeric readouts, and
+  `Reading` with `Result` for dense reference rows where many values share a card.
+- Use `CompactPage` for focused forms. `Form`, `Field`, `Submit`, `Filters`, and
+  `FilterButton` share control sizing and colors. `List`, `Item`, `Row`, `Checkbox`,
+  and `Text` provide checkable rows; `Remove` and `Clear` provide destructive actions.
+- Group buttons in wrapping `Actions` rows. `Action` is the primary control; secondary
+  controls use light surfaces and borders. Keep interactive targets at least 44px tall.
+- Use the shared `--ink`, `--muted`, `--border`, `--accent`, `--accent-soft`, and
+  `--danger` variables in example-specific styles. Avoid separate page palettes.
+- Preserve visible keyboard focus, reduced-motion preferences, and mobile layouts.
+  Keep signals inside ordinary flow elements so flex/grid does not split inline text.
+
+Verify changes with the example runner and the existing browser acceptance suite.
+Check desktop and narrow viewports, live updates, and keyboard focus.

examples/components/__init__.py

@@ -0,0 +1,51 @@
+"""Shared layout, controls and headings for runnable examples."""
+
+from .controls import (
+    Action,
+    Actions,
+    Card,
+    Description,
+    Eyebrow,
+    Metric,
+    Reading,
+    Result,
+    Title,
+    Value,
+)
+from .forms import Clear, Field, FilterButton, Filters, Form, Meta, Remove, SecondaryAction, Submit
+from .hosting import EXAMPLE_ASSETS, example_app, example_title
+from .lists import Checkbox, Item, List, Row, Text
+from .page import CompactPage, Page, page
+
+__all__ = [
+    "EXAMPLE_ASSETS",
+    "Action",
+    "Actions",
+    "Card",
+    "Checkbox",
+    "Clear",
+    "CompactPage",
+    "Description",
+    "Eyebrow",
+    "Field",
+    "FilterButton",
+    "Filters",
+    "Form",
+    "Item",
+    "List",
+    "Meta",
+    "Metric",
+    "Page",
+    "Reading",
+    "Remove",
+    "Result",
+    "Row",
+    "SecondaryAction",
+    "Submit",
+    "Text",
+    "Title",
+    "Value",
+    "example_app",
+    "example_title",
+    "page",
+]