デモ

# /// script
# requires-python = ">=3.14"
# ///
"""The dialect reference: everything in this file translates to .pix.

Develop:  uv run demo/counter.py
Ship:     python3 yokan_gate.py gate demo/counter.py --script "click:+1,input:Momo"
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import button, column, row, run, State, text, text_field  # noqa: E402


count: State[int] = State(0)
name: State[str] = State("")


def view():
    return column(
        text(f"count: {count()}", size=34),
        row(
            button("+1", on_click=lambda: count.set(count() + 1)),
            button("+10", on_click=lambda: count.set(count() + 10)),
            button("reset", on_click=lambda: count.set(0)),
            spacing=8,
        ),
        text_field(name(), placeholder="your name", on_change=name.set),
        text(f"hello, {name()}"),
        spacing=12,
        padding=16,
    )


if __name__ == "__main__":
    run(view, title="counter")

# /// script
# requires-python = ">=3.14"
# ///
"""OpsBoard — a fleet-operations dashboard, fully compiled.

Three modules, two stores, a sum-typed health model matched in the
view, seeded mock telemetry, charts, a virtualized alert feed with
severity filters, slotted cards, themed styling with a live palette
flip — and the shipped artifact is one native binary with no Python
in it. Every behavior below is gate-checked against CPython.

Run:   uv run demo/opsboard/app.py
Gate:  yokan gate demo/opsboard/app.py --script "click:reset,click:tick,..."
Ship:  yokan build demo/opsboard/app.py --release
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), "..", ".."))
sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))

from yokan import (
    bar_chart,
    button,
    column,
    fs,
    line_chart,
    list_view,
    row,
    run,
    text,
)

from state import Alerts, Degraded, Healthy, Metrics, Outage, health, mode  # noqa: E402
from widgets import btn, btn_hot, card, h1, h2, kpi, panel, pill_crit, pill_ok, pill_warn, svc_row  # noqa: E402


def reset():
    Metrics.reset()
    Alerts.reset()
    health.set(Healthy())


def tick():
    Metrics.tick()
    Alerts.emit_tick(Metrics.ticks)
    if Alerts.crit_n > 1:
        health.set(Outage("api"))
    elif Alerts.crit_n > 0:
        health.set(Degraded(1))
    else:
        health.set(Healthy())


def boot():
    """Open onto history, not zeros: reset then replay six minutes
    of telemetry — deterministic, so both tiers boot identically."""
    Metrics.reset()
    Alerts.reset()
    for i in range(6):
        Metrics.tick()
        Alerts.emit_tick(Metrics.ticks)
    if Alerts.crit_n > 1:
        health.set(Outage("api"))
    elif Alerts.crit_n > 0:
        health.set(Degraded(1))
    else:
        health.set(Healthy())


def export():
    fs.write_text(
        "demo/.gate/opsboard-report.txt",
        f"OpsBoard report @ {Metrics.clock} — rps={Metrics.rps} p95={Metrics.p95}ms alerts={Alerts.crit_n}/{Alerts.warn_n}/{Alerts.info_n}",
    )


def flip_theme():
    if mode() == "dark":
        mode.set("light")
    else:
        mode.set("dark")


def alert_row(i):
    return text(Alerts.visible[i], size=12)


def view():
    with column(spacing=10, padding=16, background="windowBg", grow=1.0, theme=mode()):
        # ── header ────────────────────────────────────────────────
        with row(spacing=10):
            text("⬢ OpsBoard", **h1)
            text("fleet telemetry · mock feed", **h2)
            text(f"synced {Metrics.clock}", size=12, color="textDim", grow=1.0, align="right")
            button("◐ theme", on_click=flip_theme, **btn)
        # ── system health (sum type, matched live) ───────────────
        with row(spacing=8):
            match health():
                case Healthy():
                    text("ALL SYSTEMS NOMINAL", animate=140, easing="out", **pill_ok)
                case Degraded(services):
                    text(f"DEGRADED — {services} service(s) impacted", animate=140, easing="out", **pill_warn)
                case Outage(service):
                    text(f"OUTAGE — {service} is down", animate=140, easing="out", **pill_crit)
            text(f"tick #{Metrics.ticks}", size=11, color="textDim", grow=1.0, align="right")
        # ── KPI row ──────────────────────────────────────────────
        with row(spacing=10):
            kpi("REQUESTS", f"{Metrics.rps}", "req/m")
            kpi("ERROR RATE", f"{Metrics.err_pct:.1f}", "%")
            kpi("P95 LATENCY", f"{Metrics.p95}", "ms")
            kpi("UPTIME 30D", f"{Metrics.uptime}", "SLO 99.9")
        # ── charts ───────────────────────────────────────────────
        with row(spacing=10):
            with card("THROUGHPUT — req/m per tick"):
                line_chart(Metrics.rps_trend, height=110.0)
            with card("P95 LATENCY — ms per tick"):
                line_chart(Metrics.p95_trend, height=110.0)
        with row(spacing=10):
            with card("LOAD BY SERVICE"):
                bar_chart(Metrics.svc_reqs, labels=Metrics.svc_names, height=100.0)
            with card("FLEET"):
                svc_row("api-gateway", Metrics.api_r, Metrics.api_s)
                svc_row("web-frontend", Metrics.web_r, Metrics.web_s)
                svc_row("worker-pool", Metrics.worker_r, Metrics.worker_s)
                svc_row("cache-layer", Metrics.cache_r, Metrics.cache_s)
        # ── alert feed ───────────────────────────────────────────
        with card(f"ALERTS — {Alerts.crit_n} crit · {Alerts.warn_n} warn · {Alerts.info_n} info"):
            with row(spacing=6):
                # the highlight follows the ACTIVE filter
                if Alerts.filter == "all":
                    button("all", on_click=lambda: Alerts.set_filter("all"), **btn_hot)
                else:
                    button("all", on_click=lambda: Alerts.set_filter("all"), **btn)
                if Alerts.filter == "crit":
                    button("crit", on_click=lambda: Alerts.set_filter("crit"), **btn_hot)
                else:
                    button("crit", on_click=lambda: Alerts.set_filter("crit"), **btn)
                if Alerts.filter == "warn":
                    button("warn", on_click=lambda: Alerts.set_filter("warn"), **btn_hot)
                else:
                    button("warn", on_click=lambda: Alerts.set_filter("warn"), **btn)
            list_view(len(Alerts.visible), alert_row, item_height=22.0, grow=1.0)
        # ── footer ───────────────────────────────────────────────
        with row(spacing=8):
            button("▶ tick", on_click=tick, **btn)
            button("reset", on_click=reset, **btn)
            button("export report", on_click=export, **btn)
            text("yokan · compiled dashboard · zero python at runtime", size=10, color="textDim", grow=1.0, align="right")


if __name__ == "__main__":
    run(view, title="OpsBoard", width=1100, height=820, on_start=boot)

# /// script
# requires-python = ">=3.14"
# ///
"""OpsBoard state: the whole data model compiles — sum-typed fleet
health, two stores, seeded mock generation. No CPython at runtime.
"""
import random
from dataclasses import dataclass

from yokan import State, store  # noqa: E402
from yokan import clock

BASE_MS = 1767225600000  # 2026-01-01 00:00 UTC — the mock clock's epoch


@dataclass(frozen=True)
class Healthy:
    pass


@dataclass(frozen=True)
class Degraded:
    services: int


@dataclass(frozen=True)
class Outage:
    service: str


type Health = Healthy | Degraded | Outage

health: State[Health] = State(Healthy())
mode: State[str] = State("dark")


@store
class Metrics:
    ticks: int = 0
    clock: str = "--:--"
    rps: int = 0
    err_pct: float = 0.0
    p95: int = 0
    uptime: str = "99.99%"
    rps_trend: list[float] = []
    p95_trend: list[float] = []
    svc_reqs: list[int] = []
    svc_names: list[str] = ["api", "web", "worker", "cache"]
    api_r: int = 0
    api_s: str = "ok"
    web_r: int = 0
    web_s: str = "ok"
    worker_r: int = 0
    worker_s: str = "ok"
    cache_r: int = 0
    cache_s: str = "ok"

    def reset(self) -> None:
        random.seed(3)
        self.ticks = 0
        self.clock = "--:--"
        self.rps = 0
        self.err_pct = 0.0
        self.p95 = 0
        self.rps_trend = []
        self.p95_trend = []
        self.svc_reqs = []
        self.api_r = 0
        self.web_r = 0
        self.worker_r = 0
        self.cache_r = 0
        self.api_s = "ok"
        self.web_s = "ok"
        self.worker_s = "ok"
        self.cache_s = "ok"

    def tick(self) -> None:
        self.ticks += 1
        self.clock = clock.format_ms(1767225600000 + self.ticks * 60000, "%H:%M")
        self.api_r = 900 + random.randint(0, 300)
        self.web_r = 600 + random.randint(0, 250)
        self.worker_r = 200 + random.randint(0, 120)
        self.cache_r = 1500 + random.randint(0, 400)
        self.rps = self.api_r + self.web_r + self.worker_r + self.cache_r
        self.err_pct = 0.1 * random.randint(1, 28)
        self.p95 = 80 + random.randint(0, 220)
        self.rps_trend = self.rps_trend + [1.0 * self.rps]
        self.p95_trend = self.p95_trend + [1.0 * self.p95]
        self.svc_reqs = []
        self.svc_reqs = self.svc_reqs + [self.api_r]
        self.svc_reqs = self.svc_reqs + [self.web_r]
        self.svc_reqs = self.svc_reqs + [self.worker_r]
        self.svc_reqs = self.svc_reqs + [self.cache_r]
        if self.p95 > 260:
            self.api_s = "crit"
        elif self.p95 > 200:
            self.api_s = "warn"
        else:
            self.api_s = "ok"
        if self.err_pct > 2.0:
            self.web_s = "warn"
        else:
            self.web_s = "ok"


@store
class Alerts:
    crit_rows: list[str] = []
    warn_rows: list[str] = []
    info_rows: list[str] = []
    visible: list[str] = []
    filter: str = "all"
    crit_n: int = 0
    warn_n: int = 0
    info_n: int = 0

    def reset(self) -> None:
        self.crit_rows = []
        self.warn_rows = []
        self.info_rows = []
        self.visible = []
        self.filter = "all"
        self.crit_n = 0
        self.warn_n = 0
        self.info_n = 0

    def emit_tick(self, tick_no: int) -> None:
        stamp = clock.format_ms(1767225600000 + tick_no * 60000, "%H:%M")
        roll = random.randint(0, 9)
        if roll < 2:
            self.crit_rows = self.crit_rows + ["🔴 " + stamp + "  p95 breach on api — circuit breaker armed"]
            self.crit_n += 1
        elif roll < 5:
            self.warn_rows = self.warn_rows + ["🟡 " + stamp + "  error budget burn 2× on web"]
            self.warn_n += 1
        else:
            self.info_rows = self.info_rows + ["🔵 " + stamp + "  deploy worker@" + stamp + " rolled out"]
            self.info_n += 1
        self.rebuild()

    def set_filter(self, f: str) -> None:
        self.filter = f
        self.rebuild()

    def rebuild(self) -> None:
        self.visible = []
        if self.filter == "all":
            for r in self.crit_rows:
                self.visible = self.visible + [r]
            for r in self.warn_rows:
                self.visible = self.visible + [r]
            for r in self.info_rows:
                self.visible = self.visible + [r]
        elif self.filter == "crit":
            for r in self.crit_rows:
                self.visible = self.visible + [r]
        else:
            for r in self.warn_rows:
                self.visible = self.visible + [r]

# /// script
# requires-python = ">=3.14"
# ///
"""OpsBoard widgets: named styles and reusable components — the
slotted panel, KPI cards, status pills — all compiled to native
views with pixie's Slot{} splice.

Colors are theme TOKENS (panel/border/surface/textDim/accent…) so
the whole board re-skins on a palette flip; only the status colors
are fixed hex, picked to read on both palettes.
"""
from yokan import column, component, row, slot, style, text  # noqa: E402

panel = style(background="panel", border_radius=10, border_width=1.0, border_color="border", padding=12, spacing=6, grow=1.0)
kpi_label = style(size=11, color="textDim")
kpi_value = style(size=26, color="accent")
kpi_unit = style(size=11, color="textDim")
h1 = style(size=20, color="accent")
h2 = style(size=13, color="textDim")
pill_ok = style(size=11, color="#2fa84f")
pill_warn = style(size=11, color="#d99a1f")
pill_crit = style(size=11, color="#e5484d")
row_text = style(size=12)
btn = style(background="surface", hover_background="surfaceHover")
hot = style(background="#f38ba8", hover_background="#eba0ac")
btn_hot = btn | hot


@component(slots=True)
def card(title: str):
    with column(**panel):
        text(title, **kpi_label)
        slot()


@component
def kpi(label: str, value: str, unit: str):
    with column(**panel):
        text(label, **kpi_label)
        with row(spacing=4):
            text(value, **kpi_value)
            text(unit, **kpi_unit)


@component
def pill(status: str):
    with row():
        if status == "crit":
            text("● CRIT", **pill_crit)
        elif status == "warn":
            text("● WARN", **pill_warn)
        else:
            text("● OK", **pill_ok)


@component
def svc_row(name: str, reqs: int, status: str):
    with row(spacing=10):
        text(name, size=12, grow=1.0)
        text(f"{reqs} req/m", **row_text)
        pill(status)

# /// script
# requires-python = ">=3.14"
# ///
"""The form controls, gated: checkbox / switch (click by label
toggles), slider (`slide:` steps), select / radio_group / tab_bar
(`select:` steps) — every handler receives the new value as its one
argument. The last one is a text field that holds paragraphs:
`multiline=True` makes it wrap, `enter` writes a newline instead of
submitting, and `rows=` says how many lines are visible. Two of the
controls carry `tooltip=`, which every element takes: the window
shows it when the pointer rests there, and it is in the dump either
way, so a script sees it.
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import (
    checkbox,
    column,
    text_field,
    radio_group,
    run,
    select,
    slider,
    State,
    store,
    switch,
    tab_bar,
    text,
)


@store
class Settings:
    dark: bool = False
    wifi: bool = True
    volume: float = 5.0
    fruits: list[str] = ["apple", "banana", "cherry"]
    fruit: int = 0
    sizes: list[str] = ["small", "medium", "large"]
    size: int = 1
    tabs: list[str] = ["General", "Details", "About"]
    tab: int = 0
    note: str = ""

    def set_dark(self, on: bool) -> None:
        self.dark = on

    def set_wifi(self, on: bool) -> None:
        self.wifi = on

    def set_volume(self, v: float) -> None:
        self.volume = v

    def pick_fruit(self, i: int) -> None:
        self.fruit = i

    def pick_size(self, i: int) -> None:
        self.size = i

    def pick_tab(self, i: int) -> None:
        self.tab = i

    def write(self, t: str) -> None:
        self.note = t


def view():
    with column(spacing=10, padding=14):
        checkbox(
            "Dark mode",
            checked=Settings.dark,
            on_change=Settings.set_dark,
            tooltip="the whole window follows this",
        )
        switch("Wi-Fi", checked=Settings.wifi, on_change=Settings.set_wifi)
        slider(
            value=Settings.volume,
            min=0.0,
            max=10.0,
            step=1.0,
            on_change=Settings.set_volume,
            tooltip="0 to 10, in whole steps",
        )
        select(options=Settings.fruits, selected=Settings.fruit, on_change=Settings.pick_fruit)
        radio_group(options=Settings.sizes, selected=Settings.size, on_change=Settings.pick_size)
        tab_bar(labels=Settings.tabs, active=Settings.tab, on_change=Settings.pick_tab)
        if Settings.tab == 0:
            text("general panel", size=12)
        elif Settings.tab == 1:
            text("details panel", size=12)
        else:
            text("about panel", size=12)
        text_field(
            Settings.note,
            placeholder="notes (enter writes a newline)",
            on_change=Settings.write,
            multiline=True,
            rows=3,
        )
        text(f"dark={Settings.dark}  wifi={Settings.wifi}  vol={Settings.volume:.1f}")
        text(f"fruit#{Settings.fruit}  size#{Settings.size}  tab#{Settings.tab}")


if __name__ == "__main__":
    run(view, title="forms", width=460, height=420)

# /// script
# requires-python = ">=3.14"
# ///
"""A calculator — the classic keypad, in the dialect. The layout is
all `grow`: the root column fills the window, every row shares the
height, keys share each row's width, and the zero key takes two
shares (`grow=2`), so resizing the window scales the whole pad with
no dead space. Styles are dicts merged with `|`.
`strings.to_float` is total (bad text parses as the default), so
the arithmetic needs no try."""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import button, column, row, run, store, strings, style, text  # noqa: E402


@store
class Calc:
    display: str = "0"
    acc: float = 0.0
    op: str = ""
    fresh: bool = True
    has_dot: bool = False

    def press(self, d: str) -> None:
        if self.fresh:
            self.display = d
            self.fresh = False
            self.has_dot = False
        elif self.display == "0":
            self.display = d
        else:
            self.display = self.display + d

    def dot(self) -> None:
        if self.fresh:
            self.display = "0."
            self.fresh = False
            self.has_dot = True
        elif not self.has_dot:
            self.display = self.display + "."
            self.has_dot = True

    def negate(self) -> None:
        v = strings.to_float(self.display, 0.0)
        if v != 0.0:
            self.display = f"{0.0 - v}"
            self.fresh = False

    def percent(self) -> None:
        v = strings.to_float(self.display, 0.0)
        self.display = f"{v / 100.0}"
        self.fresh = True
        self.has_dot = False

    def apply(self, nxt: str) -> None:
        if self.fresh and self.op != "":
            self.op = nxt
            return
        cur = strings.to_float(self.display, 0.0)
        if self.op == "":
            self.acc = cur
        if self.op == "+":
            self.acc = self.acc + cur
        if self.op == "-":
            self.acc = self.acc - cur
        if self.op == "×":
            self.acc = self.acc * cur
        if self.op == "÷":
            if cur == 0.0:
                self.display = "Error"
                self.acc = 0.0
                self.op = ""
                self.fresh = True
                return
            self.acc = self.acc / cur
        self.display = f"{self.acc}"
        self.op = nxt
        self.fresh = True

    def do_op(self, o: str) -> None:
        Calc.apply(o)

    def equals(self) -> None:
        Calc.apply("")

    def clear(self) -> None:
        self.display = "0"
        self.acc = 0.0
        self.op = ""
        self.fresh = True
        self.has_dot = False


key = style(
    grow=1, size=20, background="panel",
    hover_background="#45475a", active_background="#585b70",
)
fun_tint = style(background="#313244", color="#a6adc8")
fun = key | fun_tint
op_tint = style(
    background="#fab387", color="#1e1e2e",
    hover_background="#f8c49b", active_background="#f5e0dc",
)
op = key | op_tint
wide_tint = style(grow=2, basis=8)
wide = key | wide_tint
readout = style(size=40, color="text", align="right", grow=1.4)
keys = style(spacing=8, grow=1)


def view():
    with column(spacing=8, padding=16, grow=1):
        text(f"{Calc.display}", **readout)
        with row(**keys):
            button("C", on_click=Calc.clear, **fun)
            button("±", on_click=Calc.negate, **fun)
            button("%", on_click=Calc.percent, **fun)
            button("÷", on_click=lambda: Calc.do_op("÷"), **op)
        with row(**keys):
            button("7", on_click=lambda: Calc.press("7"), **key)
            button("8", on_click=lambda: Calc.press("8"), **key)
            button("9", on_click=lambda: Calc.press("9"), **key)
            button("×", on_click=lambda: Calc.do_op("×"), **op)
        with row(**keys):
            button("4", on_click=lambda: Calc.press("4"), **key)
            button("5", on_click=lambda: Calc.press("5"), **key)
            button("6", on_click=lambda: Calc.press("6"), **key)
            button("-", on_click=lambda: Calc.do_op("-"), **op)
        with row(**keys):
            button("1", on_click=lambda: Calc.press("1"), **key)
            button("2", on_click=lambda: Calc.press("2"), **key)
            button("3", on_click=lambda: Calc.press("3"), **key)
            button("+", on_click=lambda: Calc.do_op("+"), **op)
        with row(**keys):
            button("0", on_click=lambda: Calc.press("0"), **wide)
            button(".", on_click=Calc.dot, **key)
            button("=", on_click=Calc.equals, **op)


if __name__ == "__main__":
    run(view, title="calc")

# /// script
# requires-python = ">=3.14"
# ///
"""The calculator again, on a grid. `grid(columns=4, rows=5)`
lays equal tracks, every key fills its cell, and the zero key says
`col_span=2` — the whole keypad is one container instead of five
rows. Same store as demo/calc.py; only the view differs."""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import button, column, grid, run, store, strings, style, text  # noqa: E402


@store
class Calc:
    display: str = "0"
    acc: float = 0.0
    op: str = ""
    fresh: bool = True
    has_dot: bool = False

    def press(self, d: str) -> None:
        if self.fresh:
            self.display = d
            self.fresh = False
            self.has_dot = False
        elif self.display == "0":
            self.display = d
        else:
            self.display = self.display + d

    def dot(self) -> None:
        if self.fresh:
            self.display = "0."
            self.fresh = False
            self.has_dot = True
        elif not self.has_dot:
            self.display = self.display + "."
            self.has_dot = True

    def negate(self) -> None:
        v = strings.to_float(self.display, 0.0)
        if v != 0.0:
            self.display = f"{0.0 - v}"
            self.fresh = False

    def percent(self) -> None:
        v = strings.to_float(self.display, 0.0)
        self.display = f"{v / 100.0}"
        self.fresh = True
        self.has_dot = False

    def apply(self, nxt: str) -> None:
        if self.fresh and self.op != "":
            self.op = nxt
            return
        cur = strings.to_float(self.display, 0.0)
        if self.op == "":
            self.acc = cur
        if self.op == "+":
            self.acc = self.acc + cur
        if self.op == "-":
            self.acc = self.acc - cur
        if self.op == "×":
            self.acc = self.acc * cur
        if self.op == "÷":
            if cur == 0.0:
                self.display = "Error"
                self.acc = 0.0
                self.op = ""
                self.fresh = True
                return
            self.acc = self.acc / cur
        self.display = f"{self.acc}"
        self.op = nxt
        self.fresh = True

    def do_op(self, o: str) -> None:
        Calc.apply(o)

    def equals(self) -> None:
        Calc.apply("")

    def clear(self) -> None:
        self.display = "0"
        self.acc = 0.0
        self.op = ""
        self.fresh = True
        self.has_dot = False


key = style(
    size=20, background="panel",
    hover_background="#45475a", active_background="#585b70",
)
fun_tint = style(background="#313244", color="#a6adc8")
fun = key | fun_tint
op_tint = style(
    background="#fab387", color="#1e1e2e",
    hover_background="#f8c49b", active_background="#f5e0dc",
)
op = key | op_tint
readout = style(size=40, color="text", align="right", grow=1.4)


def view():
    with column(spacing=8, padding=16, grow=1):
        text(f"{Calc.display}", **readout)
        with grid(columns=4, rows=5, spacing=8, grow=5):
            button("C", on_click=Calc.clear, **fun)
            button("±", on_click=Calc.negate, **fun)
            button("%", on_click=Calc.percent, **fun)
            button("÷", on_click=lambda: Calc.do_op("÷"), **op)
            button("7", on_click=lambda: Calc.press("7"), **key)
            button("8", on_click=lambda: Calc.press("8"), **key)
            button("9", on_click=lambda: Calc.press("9"), **key)
            button("×", on_click=lambda: Calc.do_op("×"), **op)
            button("4", on_click=lambda: Calc.press("4"), **key)
            button("5", on_click=lambda: Calc.press("5"), **key)
            button("6", on_click=lambda: Calc.press("6"), **key)
            button("-", on_click=lambda: Calc.do_op("-"), **op)
            button("1", on_click=lambda: Calc.press("1"), **key)
            button("2", on_click=lambda: Calc.press("2"), **key)
            button("3", on_click=lambda: Calc.press("3"), **key)
            button("+", on_click=lambda: Calc.do_op("+"), **op)
            button("0", on_click=lambda: Calc.press("0"), col_span=2, **key)
            button(".", on_click=Calc.dot, **key)
            button("=", on_click=Calc.equals, **op)


if __name__ == "__main__":
    run(view, title="calcgrid")

# /// script
# requires-python = ">=3.14"
# ///
"""Named stores: `@store` is a process-lifetime singleton with
fields AND methods — the decorator returns the instance, so the
class name IS the store. Stores
call each other's methods; views read their fields reactively.
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import button, column, row, run, store, text  # noqa: E402


@store
class Settings:
    factor: int = 2

    def double(self) -> None:
        self.factor *= 2


@store
class Cart:
    items: list[str] = []
    total: int = 0

    def add(self, name: str, price: int) -> None:
        self.items = self.items + [name]
        self.total += price * Settings.factor
        Settings.double()

    def clear(self) -> None:
        self.items = []
        self.total = 0


def view():
    with column(spacing=8, padding=12):
        text(f"n={len(Cart.items)} total={Cart.total} f={Settings.factor}")
        with row(spacing=6):
            button("add", on_click=lambda: Cart.add("apple", 10))
            button("clear", on_click=Cart.clear)


if __name__ == "__main__":
    run(view, title="stores")

# /// script
# requires-python = ">=3.14"
# ///
"""class ↔ @model and trait ↔ Protocol. A model is an observed
object: Python objects and native handles are both references, so
identity agrees from the start. A Protocol base routes its methods
into a native `impl`, and a Protocol-typed helper compiles to a
bounded generic fn — static dispatch, no boxing.
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from typing import Protocol  # noqa: E402

from yokan import button, column, model, run, State, text  # noqa: E402


class Shape(Protocol):
    def area(self) -> float: ...


@model
class Circle(Shape):
    r: float = 1.0
    hits: int = 0

    def grow(self, by: float) -> None:
        self.r += by
        self.hits += 1

    def area(self) -> float:
        return self.r * self.r * 3.0


left = Circle()
right = Circle()
total: State[float] = State(0.0)


def area_of(s: Shape) -> float:
    return s.area()


def bump():
    left.grow(0.5)
    right.grow(2.0)
    total.set(area_of(left) + area_of(right))


def view():
    with column(spacing=8, padding=12):
        text(f"L={left.hits} R={right.hits} total={total():.2f}")
        button("bump", on_click=bump)


if __name__ == "__main__":
    run(view, title="models")

# /// script
# requires-python = ">=3.14"
# ///
"""Models referencing models, gated: `Node | None` fields wire an
ownership chain in handlers, `Weak[Node]` is the not-owning back
pointer (it breaks the cycle, so dropping the root frees the chain
in both tiers at the same statement), and views read through
walrus-narrowed bindings.
"""
import os
import sys

sys.path.insert(0, os.path.join(os.path.dirname(os.path.abspath(__file__)), ".."))

from yokan import button, column, model, row, run, State, store, text, Weak  # noqa: E402


@model
class Node:
    label: str = "n"
    kid: Node | None = None
    parent: Weak[Node] = None


@store
class Tree:
    root: Node | None = None
    keep: Node | None = None
    note: str = "-"

    def build(self) -> None:
        a = Node()
        a.label = "alpha"
        b = Node()
        b.label = "beta"
        a.kid = b
        b.parent = a
        self.root = a
        self.keep = b

    def drop_root(self) -> None:
        self.root = None

    def peek(self) -> None:
        if (r := Tree.root) is not None:
            if (k := r.kid) is not None:
                if (p := k.parent) is not None:
                    self.note = f"kid={k.label} parent={p.label}"
                else:
                    self.note = f"kid={k.label} parent=gone"
            else:
                self.note = "no kid"
        elif (k := Tree.keep) is not None:
            if (p := k.parent) is not None:
                self.note = f"kept {k.label}, parent={p.label}"
            else:
                self.note = f"kept {k.label}, parent=gone"
        else:
            self.note = "no root"


def view():
    with column(spacing=8, padding=12):
        text(f"note: {Tree.note}")
        if (r := Tree.root) is not None:
            text(f"root: {r.label}")
        else:
            text("root: (none)")
        with row(spacing=6):
            button("build", on_click=Tree.build)
            button("peek", on_click=Tree.peek)
            button("drop", on_click=Tree.drop_root)


if __name__ == "__main__":
    run(view, title="links")