<lse-intent> — Declarative Intents

A custom element that runs LSE (LokaScript Explicit Syntax) JSON through the hyperfixi runtime.
LSE is a language-agnostic protocol for expressing commands as data — built for LLMs and tools to emit, rather than for hand-writing. Skip the _= attribute and describe what you want as JSON: an action, its roles, and a trigger. The element validates the JSON, wires the trigger, and dispatches lse:validated / lse:executed / lse:error events along the way.

<lse-intent> lse-protocol custom element declarative llm-friendly

Live Demos

1. `trigger="click"` — toggle `.active` on a sidebar

Click the button. The element attaches its own listener; no _=, no onclick.

Couldn't wire the toggle — see event log.

Sidebar content — toggles .active

2. JSON `trigger.event` sugar — add `.highlighted`

Same effect, no trigger attribute. The element reads the wire-format trigger.event field — the form an LLM would most naturally emit.

Couldn't wire the highlight — see event log.

Target box — gets .highlighted on click

3. Protocol validation — missing `action`

Valid JSON, but missing the required action field. The element fires lse:error and reveals its slot="error" child.

Protocol error: see event log for diagnostics.

Event log

All lse:* events bubble. Watch the lifecycle.

The Code

Toggle on click (Demo 1):

<lse-intent trigger="click"> <script type="application/lse+json"> { "action": "toggle", "roles": { "patient": { "type": "selector", "value": ".active" }, "destination": { "type": "selector", "value": "#sidebar" } } } </script> <button slot="trigger">Toggle Sidebar</button> </lse-intent>

JSON-sugar trigger (Demo 2):

<lse-intent> <script type="application/lse+json"> { "action": "add", "roles": { "patient": { "type": "selector", "value": ".highlighted" }, "destination": { "type": "selector", "value": "#target-box" } }, "trigger": { "event": "click" } } </script> <button slot="trigger">Highlight Box</button> </lse-intent>

Listening for lifecycle events:

How it works:

<lse-intent> reads inline JSON from a child <script type="application/lse+json"> (or fetches it via src=).
It validates the wire format against the LSE (LokaScript Explicit Syntax) protocol, then deserializes to a SemanticNode.
The trigger attribute (or the JSON trigger.event sugar) wires a DOM listener. When it fires, the element delegates to window.hyperfixi.evalLSENode(node, this).
Three custom events bubble out: lse:validated, lse:executed, lse:error.
If the runtime isn't loaded, the element still validates — it just emits a NO_RUNTIME warning diagnostic instead of executing.

Trigger modes:

trigger="load" (default) — fire on connectedCallback.
trigger="click" / any DOM event — wire addEventListener on the element.
trigger="submit" — wire to the closest ancestor <form>; preventDefault is called.
trigger="intersect" — fire once when the element scrolls into view (IntersectionObserver).
trigger="manual" — never fire automatically; the caller invokes element.refresh().

Why this exists:

Data, not code. Intents are JSON — easy for tools, LLMs, and CMSes to emit without parsing hyperscript.
Validation up front. Schema errors fire lse:error before any DOM mutation is attempted.
Same runtime as _=. Under the hood, the JSON deserializes to the same SemanticNode shape hyperscript compiles to — one execution model, two front-ends.
Composable. The element accepts src="/intents/foo.json", so intents can live in static files or be served from an API.
A formal protocol underneath. LSE is specified with a grammar, a JSON Schema, and conformance-tested parsers in four languages — see the LSE protocol spec.

Try it yourself:

Change "action": "toggle" to "add" or "remove" and watch the diagnostics adapt.
Add trigger="intersect" and a tall spacer above the element — it'll fire on scroll-in.
Move the JSON to a file and load it with <lse-intent src="/intents/toggle.json">.
Compare equivalent _="on click toggle .active on #sidebar" — same effect, different ergonomics.

← Gallery Home

<lse-intent> — Declarative Intents

Live Demos

1. trigger="click" — toggle .active on a sidebar

2. JSON trigger.event sugar — add .highlighted

3. Protocol validation — missing action

Event log

The Code

Toggle on click (Demo 1):

JSON-sugar trigger (Demo 2):

Listening for lifecycle events:

How it works:

Trigger modes:

Why this exists:

Try it yourself:

1. `trigger="click"` — toggle `.active` on a sidebar

2. JSON `trigger.event` sugar — add `.highlighted`

3. Protocol validation — missing `action`