From 98b5b6e7518d44b847790aeefdac173ad66b3744 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 13:39:57 +0200
Subject: [PATCH 01/11] dmvs_html: scripts compiled by dmvs_js - the host of
 its DOM

The page's scripts and onclick code are compiled by dmvs_js into the
view's code (init, click handlers, timers, variables); script.c is now
its host. Its own evaluator goes; what it did stays: a class or style
change is laid out (moves, fades by transitions; other looks as
variants; classes changed together - up to the compiler's flush - one
look; pressed looks). A change is a CALL of a handler made when every
change is laid out; one of the element a variable holds an IF for each
element dmvs_js_object_domain() gives. innerText / textContent are text
variables, with a number shadowing them (parseFloat(innerText)), painted
on the element's first line, placed by text-align. Click handlers copy
their listeners' actions (dmview's calls are 8 deep).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CMakeLists.txt         |    3 +-
 README.md              |   98 +-
 src/layout.c           |    6 +
 src/paint.c            |   72 ++
 src/private.h          |    4 +
 src/script.c           | 2645 ++++++++++++++--------------------------
 tests/dmvs_html_test.c |  128 +-
 7 files changed, 1161 insertions(+), 1795 deletions(-)

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 6c47ad7..de55f2f 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -74,7 +74,8 @@ dmod_add_library(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
 )
 
 dmod_link_modules(${DMOD_MODULE_NAME}
-    dmvsi@>=0.2
+    dmvsi@>=0.4
+    dmvs_js@>=0.1
 )
 
 target_include_directories(${DMOD_MODULE_NAME} PRIVATE
diff --git a/README.md b/README.md
index 3e9ac91..404a68f 100644
--- a/README.md
+++ b/README.md
@@ -11,8 +11,9 @@ makes a dmview view of it.
 It has its own HTML parser, CSS cascade and layout - no browser, no
 dependencies - so it runs on a PC at build time and on a device. It is made
 for **UI pages**: the screens a designer (or an AI) draws in HTML with
-Tailwind CSS - and the little JavaScript that switches between them, which
-it works out at conversion and makes the view's variables and handlers.
+Tailwind CSS - and their JavaScript, which
+[dmvs_js](https://github.com/choco-technologies/dmvs_js) compiles into the
+view's variables, handlers and timers.
 
 ## What it does
 
@@ -70,52 +71,67 @@ CSS does; text is measured with them as the view will draw it. Icon fonts
 
 ## Scripts
 
-A script is not run on the device: what its click handlers do is worked
-out at conversion. Understood is what switches screens and toggles things:
+A script isn't run on the device. The page's `<script>`s and `onclick`
+code are compiled by [dmvs_js](https://github.com/choco-technologies/dmvs_js)
+into the view's code:
+
+- what the scripts do when they load becomes the init handler;
+- listeners become click handlers;
+- `setTimeout` / `setInterval` become the view's timers;
+- variables become the view's variables.
+
+Anything known at conversion is computed then. See dmvs_js's
+`docs/compiler.md` for the language it compiles. dmvs_html is its host, the
+DOM:
 
 ```js
-const home = document.getElementById('home');   // an element
-let current = null;                              // a variable the handlers set: the view's
-function open(id) {                              // onclick="open('settings')": inlined
+const home = document.getElementById('home');   // an element (querySelector / querySelectorAll too)
+let current = null;                              // a variable holding elements
+function open(id) {                              // onclick="open('settings')"
     const w = document.getElementById(id);
-    w.classList.add('active');                   // classList.add / remove / toggle
-    home.style.opacity = '0.3';                  // style.<property> = ...
+    w.classList.add('active');                   // classList.add / remove / toggle / replace / contains
+    home.style.opacity = '0.3';                  // style.<property> = a text known at conversion
     current = w;
 }
-function close() {
-    if (current) {                               // if (x), (!x), (a === b), classList.contains()
-        current.classList.remove('active');
-        home.style.opacity = '1';
-        current = null;
-    }
-}
+const speed = document.getElementById('speed');
+let kmh = 0;
+const timer = setInterval(() => {                // a timer of the view
+    kmh += 2;
+    if (kmh >= 68) clearInterval(timer);
+    speed.innerText = kmh + ' km/h';             // a text variable
+}, 35);
+up.addEventListener('click', () =>               // parseFloat(innerText): the number it shows
+    temp.innerText = (parseFloat(temp.innerText) + 0.5).toFixed(1) + '°C');
 ```
 
-Handlers are also what the page sets up when it loads:
-`addEventListener('click', ...)` and `el.onclick = ...` with arrow and
-function expressions (closures over their scope), on elements of
-`getElementById()`, `querySelector()` / `querySelectorAll()` (a list's
-`forEach()` is unrolled), `getAttribute()`; `el.click()` runs the
-element's handlers. Several class changes of an element at once are one
-look of it.
-
-`this` in an `onclick` is its element. Every change is laid out - the page
-with that class or that style:
-
-- how the element **moves and fades** becomes its group's variables, set at
-  once or **animated by its CSS `transition`** (duration and timing
-  function) - the view switches its screens as the page does, and slides
-  them as it does;
-- when it **looks different** (a switch on, a light off, play / pause, an
-  icon hidden, another label) it is painted in each state of its class,
-  shown on the class's variable;
-- `:active` (and Tailwind's `active:`) is its **pressed look**, shown while
-  its box is pressed.
-
-What is reported and left out: what the page does when it loads (timers,
-`Date`, text a script writes), loops, events other than clicks, a style a
-script sets that changes how an element looks (but its opacity). A class
-changes only the look of its element - what it moves around it stays.
+- **Changes are laid out.** A change of a class or a style gives the page
+  with that change. How the element **moves and fades** becomes its
+  group's variables, set at once or **animated by its CSS `transition`**.
+  When it **looks different** it is painted in each state, shown on the
+  class's variable. Classes an element changes together are one look.
+  `:active` is its **pressed look**. The code calls a handler of each
+  change, made once every change is known.
+- **Element variables.** A variable holding elements
+  (`current.classList.remove(...)`) changes whichever element it holds, an
+  `IF` for each element it may hold.
+- **Texts.** A text a script sets (`innerText`, `textContent`) is a text
+  variable of 64 bytes. It is drawn on its element's first line, placed by
+  `text-align`, with every character the scripts contain. Its number
+  shadows it, so `parseFloat(el.innerText)` works.
+- **Clicks.** `addEventListener('click', ...)`, `el.onclick = ...` and
+  `onclick="..."` are a click handler. `this` is the element, and
+  `el.click()` runs its handlers.
+
+What's reported and left out:
+- elements made or replaced (`createElement`, `innerHTML`);
+- `src`, `setAttribute`;
+- a style known only at runtime;
+- a style that changes how an element looks (other than its opacity);
+- events other than clicks;
+- `Date`.
+
+A class changes only the look of its element; what it moves around it
+stays.
 
 ## Resources
 
diff --git a/src/layout.c b/src/layout.c
index 3a53f58..ae1e9d6 100644
--- a/src/layout.c
+++ b/src/layout.c
@@ -173,6 +173,12 @@ static int32_t line_height(conv_t* c, style_t* st)
     }
 }
 
+int32_t text_baseline(conv_t* c, style_t* st)
+{
+    metrics_t m = metrics(c, st);
+    return (line_height(c, st) - (m.ascent + m.descent)) / 2 + m.ascent;
+}
+
 /* ---- Text ---- */
 
 static uint32_t to_upper(uint32_t c)
diff --git a/src/paint.c b/src/paint.c
index 374edd1..72facc4 100644
--- a/src/paint.c
+++ b/src/paint.c
@@ -493,13 +493,81 @@ static void paint_decoration(painter_t* p, const style_t* st, dmvsi_rect_t r, co
     paint_box(p, st, r, borders, p->shadowed == NULL || p->shadowed->style != st);
 }
 
+/* The element (n or inside it) whose text a script sets that a text is of - NULL: none */
+static const node_t* text_set(const node_t* text, const node_t* n)
+{
+    for (const node_t* e = text; e != NULL; e = e->parent)
+    {
+        if (e->kind == NODE_ELEMENT && e->dynamic != NULL && e->dynamic->text != 0)
+            return e;
+        if (e == n)
+            break;
+    }
+    return NULL;
+}
+
+/*
+ * The text a script sets: one line of its variable, where its text starts
+ * (f: its first line; NULL - it has none: on its content box's first line).
+ * A block's is placed in its content box by text-align; an inline
+ * element's starts where it does.
+ */
+static void paint_text_var(painter_t* p, const node_t* block, const node_t* e, const frag_t* f)
+{
+    const style_t* st = e->style;
+    if (st == NULL || st->hidden || (st->color >> 24) == 0)
+        return;
+    dmvsi_var_info_t info;
+    if (dmvsi_var_info(p->c->doc, e->dynamic->text, &info) != 0)
+        return;
+    dmvsi_text_t t;
+    memset(&t, 0, sizeof(t));
+    t.var = e->dynamic->text;
+    t.text = info.text;
+    t.length = strlen(info.text);
+    t.chars = e->dynamic->chars;
+    t.font = (f != NULL) ? f->font : style_font(p->c, (style_t*)st);
+    t.paint.color = p->shadow ? times_alpha(p->shadow_color, st->color >> 24) : st->color;
+    if (t.font == NULL)
+        return;
+    if (e == block)
+    {
+        t.x = e->box.ax - p->ox + p->dx + e->box.b[3] + e->box.p[3];
+        t.width = e->box.w - e->box.b[1] - e->box.b[3] - e->box.p[1] - e->box.p[3];
+        t.align = (st->text_align == TEXT_CENTER) ? DMVSI_TEXT_CENTER : (st->text_align == TEXT_RIGHT) ? DMVSI_TEXT_RIGHT : DMVSI_TEXT_LEFT;
+    }
+    else
+        t.x = block->box.ax - p->ox + p->dx + ((f != NULL) ? f->x : 0);
+    if (f != NULL)
+        t.baseline = block->box.ay - p->oy + p->dy + f->y;
+    else
+        t.baseline = e->box.ay - p->oy + p->dy + e->box.b[0] + e->box.p[0] + text_baseline(p->c, (style_t*)st);
+    check(p, dmvsi_add_text(p->c->doc, &t));
+}
+
 /* The lines of text (and inline boxes) a block holds */
 static void paint_lines(painter_t* p, const node_t* n)
 {
+    const node_t* set_painted[8];
+    uint32_t set_count = 0;
     for (const frag_t* f = n->box.frags; f != NULL; f = f->next)
     {
         if (f->style->hidden)
             continue;
+        const node_t* set = (f->kind != FRAG_BOX) ? text_set(f->node, n) : NULL;
+        if (set != NULL)
+        {
+            /* A script's text: its variable, once */
+            bool done = false;
+            for (uint32_t i = 0; i < set_count && !done; i++)
+                done = set_painted[i] == set;
+            if (!done && set_count < 8u)
+            {
+                set_painted[set_count++] = set;
+                paint_text_var(p, n, set, f);
+            }
+            continue;
+        }
         if (f->kind == FRAG_BOX)
         {
             dmvsi_rect_t r = { n->box.ax - p->ox + p->dx + f->x, n->box.ay - p->oy + p->dy + f->y, f->w, f->h };
@@ -650,6 +718,8 @@ static void paint_inner(painter_t* p, node_t* n, uint32_t depth)
     for (; layers != NULL && i < layers->count && layers->items[i].z < 0; i++)
         paint_context(p, layers->items[i].node, depth + 1U);
     paint_lines(p, n);
+    if (n->dynamic != NULL && n->dynamic->text != 0 && n->box.frags == NULL)
+        paint_text_var(p, n, n, NULL);          /* A script's text in what has none yet */
     paint_flow(p, n, depth + 1U);
     for (; layers != NULL && i < layers->count; i++)
         paint_context(p, layers->items[i].node, depth + 1U);
@@ -743,6 +813,8 @@ static void paint_flow_element(painter_t* p, node_t* k, uint32_t depth)
         else if (node_is(k, "svg"))
             paint_svg(p, k);
         paint_lines(p, k);
+        if (k->dynamic != NULL && k->dynamic->text != 0 && k->box.frags == NULL && k->style->display != DISPLAY_INLINE)
+            paint_text_var(p, k, k, NULL);      /* A script's text in what has none yet */
     }
     paint_flow(p, k, depth + 1U);
     end_dynamic(p, dynamic);
diff --git a/src/private.h b/src/private.h
index e86a29b..a50275e 100644
--- a/src/private.h
+++ b/src/private.h
@@ -119,6 +119,9 @@ typedef struct
 {
     dmvsi_var_t     bind[DMVSI_BIND_COUNT];
     dmvsi_handler_t click;
+    dmvsi_var_t     text;                           /* The text it shows is this variable's (0: its own) ... */
+    dmvsi_var_t     number;                         /* ... and the number it is (1/1000: parseFloat(innerText)) */
+    const char*     chars;                          /* ... made of these characters */
     variant_t       variants[MAX_VARIANTS];         /* None: it looks as it is */
     uint8_t         variant_count;
 } dynamic_t;
@@ -539,6 +542,7 @@ void    style_compute(conv_t* c, node_t* root);
 /* layout.c */
 void    layout_page(conv_t* c, node_t* root);
 dmvsi_font_t style_font(conv_t* c, style_t* st);
+int32_t text_baseline(conv_t* c, style_t* st);       /* Of a line of its text, from the line's top */
 
 /* dmvs_html.c */
 bool    image_size(const char* path, int32_t* width, int32_t* height);
diff --git a/src/script.c b/src/script.c
index 9ac4704..eae255d 100644
--- a/src/script.c
+++ b/src/script.c
@@ -1,832 +1,90 @@
 #include "private.h"
+#include "dmvs_js.h"
 #include <errno.h>
 #include <string.h>
 
 /*
- * Scripts: what a page's JavaScript does when it is used, made the view's
- * variables and handlers - not by running the script on the device, but by
- * working out at conversion what each handler does.
+ * Scripts: a page's JavaScript compiled into the view's code by dmvs_js -
+ * this is its host, the DOM. What the scripts do with elements:
  *
- * What is understood is what switches screens and toggles things:
- *
- *   const x = document.getElementById('id');      an element
- *   let current = null;                            a variable (a global the handlers assign)
- *   function open(id) { ... }                      called from onclick="open('a')": inlined, its arguments known
- *   el.classList.add / remove / toggle('c')        a class changes
+ *   document.getElementById / querySelector(All)   the elements, at conversion
+ *   el.addEventListener('click', f), el.onclick, onclick="..."   its click
+ *   el.classList.add / remove / toggle / replace / contains      its looks
  *   el.style.opacity = '0.3'                       a style changes
- *   if (current) / if (!current) / if (a === b)    on a variable, at run time
- *   el.classList.contains('c')                     ... on a class
+ *   el.innerText = ..., parseFloat(el.innerText)   a text variable (and its number)
+ *   let current = null; ... current = el           elements in a variable
  *
- * Every change is laid out: the page with that class (or that style), how
- * the element moved and faded is what its variables become - x, y,
+ * A change of an element (a class, a style) is laid out: the page with it,
+ * how the element moved and faded is what its variables become - x, y,
  * opacity of the group it is painted in - set at once, or animated by the
- * element's CSS transition. A change that does more (the element's inside
- * laid out anew, shown or hidden) is reported and left as it is.
+ * element's CSS transition; another look of it is painted as a variant.
+ * That is known only when every change is known: the code calls a handler
+ * of the change, made at the end. The classes an element changes together
+ * (up to where the code goes another way: the compiler's flush) are one
+ * change - the look they make together.
  *
- * What is not understood (timers, Date, innerText, loops, ...) is reported
- * and left out: the page stays as it is there.
+ * What is not understood is reported and left out.
  */
 
-#define MAX_TOKEN_TEXT      1024u
-#define MAX_SCOPE           64u
-#define MAX_GLOBALS         64u
-#define MAX_RUNTIME         16u
-#define MAX_DOMAIN          32u
-#define MAX_MODS            64u
-#define MAX_CLASSVARS       16u
+#define MAX_HANDLES         512u
+#define MAX_PLACES          256u
+#define MAX_HELD            64u
+#define MAX_CLICKS          64u
+#define MAX_CLICK_CALLS     8u
+#define MAX_MODS            128u
+#define MAX_CLASSVARS       32u
 #define MAX_ACTIONS         256u
-#define MAX_INLINE          8u
-#define MAX_PARSE_DEPTH     64u
+#define MAX_DOMAIN          32u
+#define MAX_PROGRAMS        32u
+#define TEXT_VAR_SIZE       64u
+#define MAX_WIDE_CHARS      96u
 
-/* ---- Tokens ---- */
+/* ---- The host's objects ---- */
 
-#define T_END       0u
-#define T_IDENT     1u
-#define T_NUMBER    2u
-#define T_STRING    3u
-#define T_PUNCT     4u
-#define T_DYNAMIC   5u          /* A template with ${...}: not a constant */
+#define H_DOCUMENT          1u
+#define H_ELEMENT           2u
+#define H_CLASSES           3u              /* x.classList */
+#define H_STYLE             4u              /* x.style */
+#define H_IGNORED           5u              /* tailwind (its config is read with the style sheets) */
 
 typedef struct
 {
-    uint8_t     kind;
-    const char* s;              /* T_STRING: decoded (in the arena) */
-    size_t      n;
-    int32_t     num;            /* x 1000 */
-} token_t;
+    uint8_t         kind;
+    node_t*         element;                /* ELEMENT; CLASSES, STYLE of one ... */
+    dmvsi_var_t     holder;                 /* ... or of the element a variable holds */
+} handle_t;
 
+/* A change of an element in the code: a handler made when the changes are laid out */
 typedef struct
 {
-    conv_t*     c;
-    const char* p;
-    const char* end;
-    token_t     tok;            /* The current one */
-    uint32_t    depth;
-} lexer_t;
-
-static bool is_space(char ch) { return ch == ' ' || ch == '\t' || ch == '\n' || ch == '\r' || ch == '\f' || ch == '\v'; }
-static bool ident_start(char ch) { return (ch >= 'a' && ch <= 'z') || (ch >= 'A' && ch <= 'Z') || ch == '_' || ch == '$'; }
-static bool ident_char(char ch) { return ident_start(ch) || (ch >= '0' && ch <= '9'); }
-
-static void next(lexer_t* l)
-{
-    const char* p = l->p;
-    for (;;)
-    {
-        while (p < l->end && is_space(*p))
-            p++;
-        if (p + 1 < l->end && p[0] == '/' && p[1] == '/')
-        {
-            while (p < l->end && *p != '\n')
-                p++;
-            continue;
-        }
-        if (p + 1 < l->end && p[0] == '/' && p[1] == '*')
-        {
-            p += 2;
-            while (p + 1 < l->end && !(p[0] == '*' && p[1] == '/'))
-                p++;
-            p = (p + 1 < l->end) ? p + 2 : l->end;
-            continue;
-        }
-        break;
-    }
-    token_t* t = &l->tok;
-    memset(t, 0, sizeof(*t));
-    if (p >= l->end)
-    {
-        t->kind = T_END;
-        l->p = p;
-        return;
-    }
-    t->s = p;
-    if (ident_start(*p))
-    {
-        while (p < l->end && ident_char(*p))
-            p++;
-        t->kind = T_IDENT;
-        t->n = (size_t)(p - t->s);
-    }
-    else if ((*p >= '0' && *p <= '9') || (*p == '.' && p + 1 < l->end && p[1] >= '0' && p[1] <= '9'))
-    {
-        int32_t v = 0, frac = 0, scale = 1000;
-        for (; p < l->end && *p >= '0' && *p <= '9'; p++)
-            v = (v < 1000000) ? v * 10 + (*p - '0') : v;
-        if (p < l->end && *p == '.')
-        {
-            for (p++; p < l->end && *p >= '0' && *p <= '9'; p++)
-            {
-                if (scale > 1)
-                {
-                    scale /= 10;
-                    frac += (*p - '0') * scale;
-                }
-            }
-        }
-        while (p < l->end && ident_char(*p))
-            p++;
-        t->kind = T_NUMBER;
-        t->num = v * 1000 + frac;
-        t->n = (size_t)(p - t->s);
-    }
-    else if (*p == '"' || *p == '\'' || *p == '`')
-    {
-        char q = *p++;
-        char buffer[MAX_TOKEN_TEXT];
-        size_t n = 0;
-        bool dynamic = false;
-        while (p < l->end && *p != q)
-        {
-            char ch = *p++;
-            if (q == '`' && ch == '$' && p < l->end && *p == '{')
-                dynamic = true;
-            if (ch == '\\' && p < l->end)
-            {
-                ch = *p++;
-                ch = (ch == 'n') ? '\n' : (ch == 't') ? '\t' : ch;
-            }
-            if (n + 1U < sizeof(buffer))
-                buffer[n++] = ch;
-        }
-        if (p < l->end)
-            p++;
-        t->kind = dynamic ? T_DYNAMIC : T_STRING;
-        t->s = arena_strndup(&l->c->arena, buffer, n);
-        t->n = n;
-    }
-    else
-    {
-        /* Punctuators: the longest first */
-        static const char three[] = "|===|!==|>>>|...|**=|";
-        static const char two[] = "|==|!=|<=|>=|&&|=>|||++|--|+=|-=|*=|/=|?.|??|";
-        t->kind = T_PUNCT;
-        t->n = 1;
-        for (const char* q = three; *q != '\0'; q++)
-        {
-            if (*q == '|' && q[1] != '\0' && p + 3 <= l->end && strncmp(q + 1, p, 3) == 0 && q[4] == '|')
-                t->n = 3;
-        }
-        for (const char* q = two; *q != '\0' && t->n == 1; q++)
-        {
-            if (*q == '|' && q[1] != '\0' && p + 2 <= l->end && strncmp(q + 1, p, 2) == 0 && q[3] == '|')
-                t->n = 2;
-        }
-        p += t->n;
-    }
-    l->p = p;
-}
-
-static bool is(const lexer_t* l, const char* text)
-{
-    size_t n = strlen(text);
-    return (l->tok.kind == T_PUNCT || l->tok.kind == T_IDENT) && l->tok.n == n && strncmp(l->tok.s, text, n) == 0;
-}
-
-static bool accept(lexer_t* l, const char* text)
-{
-    if (!is(l, text))
-        return false;
-    next(l);
-    return true;
-}
-
-/* ---- Syntax ---- */
-
-#define J_UNKNOWN   0u          /* Something not understood */
-#define J_NUMBER    1u
-#define J_STRING    2u
-#define J_IDENT     3u
-#define J_NULL      4u
-#define J_TRUE      5u
-#define J_FALSE     6u
-#define J_THIS      7u
-#define J_MEMBER    8u          /* a.name */
-#define J_CALL      9u          /* a(list) */
-#define J_ASSIGN    10u         /* a = b */
-#define J_NOT       11u         /* !a */
-#define J_EQ        12u         /* a == b, a === b */
-#define J_NE        13u
-#define J_AND       14u
-#define J_OR        15u
-#define J_UNDEFINED 16u
-#define J_FUNC      17u         /* (list) => b, a; function (list) { b } */
-#define J_ADD       18u         /* a + b */
-
-#define S_EXPR      32u
-#define S_VAR       33u         /* name = a */
-#define S_FUNC      34u         /* name(list) { b } */
-#define S_IF        35u         /* if (a) b else c */
-#define S_BLOCK     36u         /* { list } */
-#define S_RETURN    37u
-#define S_UNKNOWN   38u
-#define S_EMPTY     39u
-
-typedef struct js js_t;
-struct js
-{
-    uint8_t     kind;
-    const char* name;           /* J_IDENT, J_MEMBER, S_VAR, S_FUNC; J_STRING's text */
-    size_t      length;
-    int32_t     num;
-    js_t*       a;
-    js_t*       b;
-    js_t*       c;
-    js_t*       list;           /* Arguments, parameters, statements */
-    js_t*       next;
-    const char* source;         /* Where it starts (for reports) */
-};
-
-static js_t* node(lexer_t* l, uint8_t kind)
-{
-    js_t* n = arena_alloc(&l->c->arena, sizeof(*n));
-    if (n != NULL)
-    {
-        n->kind = kind;
-        n->source = l->tok.s;
-    }
-    return n;
-}
-
-static js_t* expression(lexer_t* l);
-static js_t* assignment(lexer_t* l);
-static js_t* statement(lexer_t* l);
-static js_t* block(lexer_t* l);
-static void skip_balanced(lexer_t* l);
-
-/* (a, b = 1, c): the parameters' names into *tail - at "(" */
-static void parameters(lexer_t* l, js_t** tail)
-{
-    if (!accept(l, "("))
-        return;
-    while (!is(l, ")") && l->tok.kind != T_END)
-    {
-        if (l->tok.kind == T_IDENT && tail != NULL)
-        {
-            js_t* p = node(l, J_IDENT);
-            if (p != NULL)
-            {
-                p->name = l->tok.s;
-                p->length = l->tok.n;
-                *tail = p;
-                tail = &p->next;
-            }
-        }
-        if (is(l, "[") || is(l, "{"))
-            skip_balanced(l);           /* ({ a }) => ...: not understood, passed as it is */
-        else
-            next(l);
-        if (is(l, "="))
-        {
-            next(l);
-            (void)assignment(l);        /* A default: not understood, the argument is passed */
-        }
-        (void)accept(l, ",");
-    }
-    (void)accept(l, ")");
-}
-
-/* An arrow function's body - after "=>": a block, or an expression */
-static void arrow_body(lexer_t* l, js_t* f)
-{
-    if (is(l, "{"))
-    {
-        js_t* b = block(l);
-        if (f != NULL)
-            f->b = b;
-    }
-    else
-    {
-        js_t* e = assignment(l);
-        if (f != NULL)
-            f->a = e;
-    }
-}
-
-/* Past a balanced (...), [...] or {...} starting at the current token */
-static void skip_balanced(lexer_t* l)
-{
-    int depth = 0;
-    do
-    {
-        if (is(l, "(") || is(l, "[") || is(l, "{"))
-            depth++;
-        else if (is(l, ")") || is(l, "]") || is(l, "}"))
-            depth--;
-        next(l);
-    } while (depth > 0 && l->tok.kind != T_END);
-}
-
-static js_t* primary(lexer_t* l)
-{
-    js_t* n = NULL;
-    if (l->tok.kind == T_NUMBER)
-    {
-        n = node(l, J_NUMBER);
-        if (n != NULL)
-            n->num = l->tok.num;
-        next(l);
-        return n;
-    }
-    if (l->tok.kind == T_STRING)
-    {
-        n = node(l, J_STRING);
-        if (n != NULL)
-        {
-            n->name = l->tok.s;
-            n->length = l->tok.n;
-        }
-        next(l);
-        return n;
-    }
-    if (l->tok.kind == T_IDENT)
-    {
-        static const struct { char word[10]; uint8_t kind; } words[] = {
-            { "null", J_NULL }, { "true", J_TRUE }, { "false", J_FALSE }, { "this", J_THIS }, { "undefined", J_UNDEFINED },
-        };
-        for (size_t i = 0; i < sizeof(words) / sizeof(words[0]); i++)
-        {
-            if (is(l, words[i].word))
-            {
-                n = node(l, words[i].kind);
-                next(l);
-                return n;
-            }
-        }
-        if (is(l, "function"))
-        {
-            /* function (a) { ... }: a function as a value */
-            n = node(l, J_FUNC);
-            next(l);
-            if (l->tok.kind == T_IDENT)
-                next(l);
-            parameters(l, (n != NULL) ? &n->list : NULL);
-            js_t* b = block(l);
-            if (n != NULL)
-                n->b = b;
-            return n;
-        }
-        if (is(l, "new") || is(l, "class") || is(l, "async") || is(l, "await"))
-        {
-            /* A function expression, an object made: not understood - past it */
-            n = node(l, J_UNKNOWN);
-            next(l);
-            while (l->tok.kind == T_IDENT)
-                next(l);
-            if (is(l, "("))
-                skip_balanced(l);
-            if (is(l, "{"))
-                skip_balanced(l);
-            return n;
-        }
-        n = node(l, J_IDENT);
-        if (n != NULL)
-        {
-            n->name = l->tok.s;
-            n->length = l->tok.n;
-        }
-        next(l);
-        if (is(l, "=>"))
-        {
-            /* x => ...: an arrow function, x its parameter */
-            next(l);
-            js_t* f = node(l, J_FUNC);
-            if (f != NULL)
-            {
-                f->list = n;
-                f->source = (n != NULL) ? n->source : f->source;
-            }
-            arrow_body(l, f);
-            return f;
-        }
-        return n;
-    }
-    if (is(l, "("))
-    {
-        /* (a) - or (a, b) => ...: an arrow function */
-        const char* p = l->p;
-        token_t t = l->tok;
-        skip_balanced(l);
-        if (is(l, "=>"))
-        {
-            l->p = p;
-            l->tok = t;
-            js_t* f = node(l, J_FUNC);
-            parameters(l, (f != NULL) ? &f->list : NULL);
-            (void)accept(l, "=>");
-            arrow_body(l, f);
-            return f;
-        }
-        l->p = p;
-        l->tok = t;
-        next(l);
-        n = expression(l);
-        (void)accept(l, ")");
-        return n;
-    }
-    if (is(l, "[") || is(l, "{"))
-    {
-        n = node(l, J_UNKNOWN);
-        skip_balanced(l);
-        return n;
-    }
-    if (l->tok.kind == T_DYNAMIC)
-    {
-        n = node(l, J_UNKNOWN);
-        next(l);
-        return n;
-    }
-    n = node(l, J_UNKNOWN);
-    if (l->tok.kind != T_END)
-        next(l);
-    return n;
-}
-
-static js_t* postfix(lexer_t* l)
-{
-    js_t* n = primary(l);
-    for (;;)
-    {
-        if (is(l, ".") || is(l, "?."))
-        {
-            next(l);
-            js_t* m = node(l, J_MEMBER);
-            if (m == NULL)
-                return n;
-            m->a = n;
-            m->source = (n != NULL) ? n->source : m->source;
-            if (l->tok.kind == T_IDENT)
-            {
-                m->name = l->tok.s;
-                m->length = l->tok.n;
-                next(l);
-            }
-            n = m;
-        }
-        else if (is(l, "("))
-        {
-            next(l);
-            js_t* call = node(l, J_CALL);
-            if (call == NULL)
-                return n;
-            call->a = n;
-            call->source = (n != NULL) ? n->source : call->source;
-            js_t** tail = &call->list;
-            while (!is(l, ")") && l->tok.kind != T_END)
-            {
-                js_t* arg = assignment(l);
-                if (arg != NULL)
-                {
-                    *tail = arg;
-                    tail = &arg->next;
-                }
-                if (!accept(l, ","))
-                    break;
-            }
-            (void)accept(l, ")");
-            n = call;
-        }
-        else if (is(l, "["))
-        {
-            js_t* u = node(l, J_UNKNOWN);
-            skip_balanced(l);
-            n = u;
-        }
-        else if (is(l, "++") || is(l, "--"))
-        {
-            next(l);
-            n = node(l, J_UNKNOWN);
-        }
-        else
-            return n;
-    }
-}
-
-static js_t* unary(lexer_t* l)
-{
-    if (accept(l, "!"))
-    {
-        js_t* n = node(l, J_NOT);
-        if (n != NULL)
-            n->a = unary(l);
-        return n;
-    }
-    if (is(l, "-") || is(l, "+") || is(l, "typeof") || is(l, "void") || is(l, "delete") || is(l, "++") || is(l, "--") ||
-        is(l, "~"))
-    {
-        next(l);
-        (void)unary(l);
-        return node(l, J_UNKNOWN);
-    }
-    return postfix(l);
-}
-
-/* The binary operators: those understood make a node, the others an unknown one */
-static js_t* binary(lexer_t* l, int level)
-{
-    static const char ops[][28] = {
-        "|??|||", "|&&|", "|==|===|!=|!==|", "|<|>|<=|>=|instanceof|in|", "|+|-|", "|*|/|%|**|",
-    };
-    if (level >= (int)(sizeof(ops) / sizeof(ops[0])))
-        return unary(l);
-    js_t* left = binary(l, level + 1);
-    for (;;)
-    {
-        bool found = false;
-        size_t n = l->tok.n;
-        if (l->tok.kind == T_PUNCT || l->tok.kind == T_IDENT)
-        {
-            for (const char* q = ops[level]; *q != '\0' && !found; q++)
-                found = *q == '|' && strncmp(q + 1, l->tok.s, n) == 0 && q[1 + n] == '|';
-        }
-        if (!found)
-            return left;
-        uint8_t kind = J_UNKNOWN;
-        if (is(l, "==") || is(l, "==="))
-            kind = J_EQ;
-        else if (is(l, "!=") || is(l, "!=="))
-            kind = J_NE;
-        else if (is(l, "&&"))
-            kind = J_AND;
-        else if (is(l, "||"))
-            kind = J_OR;
-        else if (is(l, "+"))
-            kind = J_ADD;
-        next(l);
-        js_t* right = binary(l, level + 1);
-        js_t* b = node(l, kind);
-        if (b == NULL)
-            return left;
-        b->a = left;
-        b->source = (left != NULL) ? left->source : b->source;
-        b->b = right;
-        left = b;
-    }
-}
-
-/* An expression but a list of them (a, b): an argument, a variable's value */
-static js_t* assignment(lexer_t* l)
-{
-    if (++l->depth > MAX_PARSE_DEPTH)
-    {
-        l->depth--;
-        skip_balanced(l);
-        return node(l, J_UNKNOWN);
-    }
-    js_t* left = binary(l, 0);
-    if (accept(l, "?"))
-    {
-        /* a ? b : c - not understood */
-        (void)assignment(l);
-        (void)accept(l, ":");
-        (void)assignment(l);
-        left = node(l, J_UNKNOWN);
-    }
-    else if (is(l, "=") || is(l, "+=") || is(l, "-=") || is(l, "*=") || is(l, "/=") || is(l, "**="))
-    {
-        bool plain = is(l, "=");
-        next(l);
-        js_t* a = node(l, plain ? J_ASSIGN : J_UNKNOWN);
-        if (a != NULL)
-        {
-            a->a = left;
-            a->source = (left != NULL) ? left->source : a->source;
-            a->b = assignment(l);
-        }
-        left = a;
-    }
-    l->depth--;
-    return left;
-}
-
-static js_t* expression(lexer_t* l)
-{
-    js_t* left = assignment(l);
-    while (accept(l, ","))
-        (void)assignment(l);         /* a, b: only the first is kept */
-    return left;
-}
-
-/* Past a statement not understood: up to its ';', or its block */
-static void skip_statement(lexer_t* l)
-{
-    while (l->tok.kind != T_END && !is(l, ";") && !is(l, "}"))
-    {
-        if (is(l, "{"))
-        {
-            skip_balanced(l);
-            if (!is(l, "else") && !is(l, "catch") && !is(l, "finally") && !is(l, "while"))
-                return;
-            continue;
-        }
-        if (is(l, "(") || is(l, "["))
-        {
-            skip_balanced(l);
-            continue;
-        }
-        next(l);
-    }
-    (void)accept(l, ";");
-}
-
-static js_t* block(lexer_t* l)
-{
-    js_t* b = node(l, S_BLOCK);
-    if (!accept(l, "{") || b == NULL)
-        return b;
-    js_t** tail = &b->list;
-    while (!is(l, "}") && l->tok.kind != T_END)
-    {
-        js_t* s = statement(l);
-        if (s != NULL)
-        {
-            *tail = s;
-            tail = &s->next;
-        }
-    }
-    (void)accept(l, "}");
-    return b;
-}
-
-static js_t* statement(lexer_t* l)
-{
-    if (++l->depth > MAX_PARSE_DEPTH)
-    {
-        l->depth--;
-        skip_statement(l);
-        return node(l, S_UNKNOWN);
-    }
-    js_t* s = NULL;
-    if (is(l, "{"))
-        s = block(l);
-    else if (accept(l, ";"))
-        s = node(l, S_EMPTY);
-    else if (is(l, "function"))
-    {
-        s = node(l, S_FUNC);
-        next(l);
-        if (s != NULL && l->tok.kind == T_IDENT)
-        {
-            s->name = l->tok.s;
-            s->length = l->tok.n;
-            next(l);
-        }
-        parameters(l, (s != NULL) ? &s->list : NULL);
-        if (s != NULL)
-            s->b = block(l);
-        else
-            skip_balanced(l);
-    }
-    else if (is(l, "const") || is(l, "let") || is(l, "var"))
-    {
-        next(l);
-        js_t** tail = &s;
-        do
-        {
-            js_t* v = node(l, S_VAR);
-            if (l->tok.kind == T_IDENT && v != NULL)
-            {
-                v->name = l->tok.s;
-                v->length = l->tok.n;
-                next(l);
-                if (accept(l, "="))
-                    v->a = assignment(l);
-                *tail = v;
-                tail = &v->next;
-            }
-            else
-            {
-                /* const { a, b } = ...: not understood */
-                skip_statement(l);
-                l->depth--;
-                return node(l, S_UNKNOWN);
-            }
-        } while (accept(l, ","));
-        (void)accept(l, ";");
-        /* Several declarators: in a block of their own */
-        if (s != NULL && s->next != NULL)
-        {
-            js_t* b = node(l, S_BLOCK);
-            if (b != NULL)
-            {
-                b->list = s;
-                s = b;
-            }
-        }
-    }
-    else if (is(l, "if"))
-    {
-        s = node(l, S_IF);
-        next(l);
-        (void)accept(l, "(");
-        js_t* cond = expression(l);
-        (void)accept(l, ")");
-        js_t* then = statement(l);
-        js_t* other = accept(l, "else") ? statement(l) : NULL;
-        if (s != NULL)
-        {
-            s->a = cond;
-            s->b = then;
-            s->c = other;
-        }
-    }
-    else if (is(l, "return"))
-    {
-        s = node(l, S_RETURN);
-        next(l);
-        if (!is(l, ";") && !is(l, "}") && s != NULL)
-            s->a = expression(l);
-        (void)accept(l, ";");
-    }
-    else if (l->tok.kind == T_IDENT &&
-             (is(l, "for") || is(l, "while") || is(l, "do") || is(l, "switch") || is(l, "try") || is(l, "class") ||
-              is(l, "throw") || is(l, "import") || is(l, "export") || is(l, "async") || is(l, "break") || is(l, "continue")))
-    {
-        s = node(l, S_UNKNOWN);
-        skip_statement(l);
-    }
-    else
-    {
-        s = node(l, S_EXPR);
-        js_t* e = expression(l);
-        if (s != NULL)
-            s->a = e;
-        (void)accept(l, ";");
-    }
-    l->depth--;
-    return s;
-}
-
-static js_t* parse(conv_t* c, const char* text, size_t length)
-{
-    lexer_t l = { c, text, text + length, { 0 }, 0 };
-    js_t* first = NULL;
-    js_t** tail = &first;
-    next(&l);
-    while (l.tok.kind != T_END && !c->arena.failed)
-    {
-        const char* before = l.p;
-        js_t* s = statement(&l);
-        if (s != NULL)
-        {
-            *tail = s;
-            while (*tail != NULL)
-                tail = &(*tail)->next;
-        }
-        if (l.p == before && l.tok.kind != T_END)
-            next(&l);               /* Not a step further: past it */
-    }
-    return first;
-}
-
-/* ---- Values ---- */
-
-#define V_UNKNOWN   0u
-#define V_UNDEFINED 1u
-#define V_NULL      2u
-#define V_BOOL      3u
-#define V_NUMBER    4u
-#define V_STRING    5u
-#define V_ELEMENT   6u
-#define V_RUNTIME   7u          /* A variable holding an element (or null) at run time */
-#define V_DOCUMENT  8u
-#define V_FUNCTION  9u
-#define V_CLASSES   10u         /* x.classList */
-#define V_STYLE     11u         /* x.style */
-#define V_LIST      12u         /* document.querySelectorAll(...): elements known at conversion */
-
-typedef struct binding binding_t;
+    node_t*         element;
+    uint8_t         kind;                   /* MOD_* */
+    const char*     name;
+    const char*     value;
+    dmvsi_handler_t handler;
+} place_t;
 
+/* A change of the element a variable holds: an IF for each element it may hold */
 typedef struct
 {
+    dmvsi_var_t     holder;
     uint8_t         kind;
-    node_t*         element;    /* V_ELEMENT; V_CLASSES, V_STYLE of one */
-    uint32_t        runtime;    /* V_RUNTIME (1 ...); V_CLASSES, V_STYLE of one */
-    const char*     text;
-    int32_t         num;
-    const js_t*     function;   /* V_FUNCTION: S_FUNC or J_FUNC */
-    binding_t*      closure;    /* ... the variables it sees (J_FUNC) */
-    uint32_t        closure_count;
-    node_t**        items;      /* V_LIST */
-    uint32_t        count;
-} val_t;
-
-struct binding
-{
     const char*     name;
-    size_t          length;
-    val_t           value;
-};
+    const char*     value;
+    dmvsi_handler_t handler;
+    dmvsi_action_t* actions;                /* Its IFs, CALLs of the elements' changes (expand_held()) */
+    uint32_t        count;
+} held_t;
 
-/* A global variable a handler assigns: the view's variable of the element it holds */
+/* What clicking an element does: its onclick, then its listeners - a handler made at the end */
 typedef struct
 {
-    const char*     name;
-    size_t          length;
-    dmvsi_var_t     var;
-    int32_t         initial;            /* The element's index, 0: null */
-    node_t*         domain[MAX_DOMAIN]; /* What it may hold */
-    uint32_t        domain_count;
-} runtime_t;
+    node_t*         element;
+    dmvsi_handler_t handler;
+    dmvsi_handler_t onclick;
+    dmvsi_handler_t calls[MAX_CLICK_CALLS];
+    uint32_t        count;
+} click_t;
 
 /* A change a script makes, and what it does to the element (when laid out) */
 typedef struct
@@ -845,7 +103,7 @@ typedef struct
     node_t*         reveals;            /* The element as it is then, shown - hidden as the page is */
 } change_t;
 
-/* A class of an element a script asks about (contains, toggle): its variable */
+/* A class of an element a script asks about (contains, toggle), or that changes its look: its variable */
 typedef struct
 {
     node_t*         element;
@@ -853,17 +111,7 @@ typedef struct
     dmvsi_var_t     var;
 } classvar_t;
 
-/* el.addEventListener('click', f) of the page as it loads: f, run when el is clicked */
-#define MAX_LISTENERS   32u
-
-typedef struct
-{
-    node_t*         element;
-    val_t           function;
-} listener_t;
-
-/* The classes a handler changes of an element, until what it does is known (a condition, its
- * end): one change of them all - the look they make together */
+/* The classes changed of an element, until the code goes another way: one change of them all */
 #define MAX_PENDING     16u
 #define MAX_PENDING_OPS 12u
 
@@ -887,193 +135,181 @@ typedef struct
 
 #define MAX_LOOKVARS    16u
 
-#define PASS_DOMAINS    0u      /* What the variables may hold */
-#define PASS_CHANGES    1u      /* Which changes there are */
-#define PASS_EMIT       2u      /* The actions */
-
 typedef struct
 {
-    conv_t*         c;
-    uint32_t        pass;
-    binding_t       globals[MAX_GLOBALS];
-    uint32_t        global_count;
-    binding_t       scope[MAX_SCOPE];
-    uint32_t        scope_count;
-    runtime_t       runtime[MAX_RUNTIME];
-    uint32_t        runtime_count;
-    change_t        changes[MAX_MODS];
-    uint32_t        change_count;
-    classvar_t      classvars[MAX_CLASSVARS];
-    uint32_t        classvar_count;
-    dmvsi_action_t  actions[MAX_ACTIONS];
-    uint32_t        action_count;
-    node_t*         self;               /* `this` of a handler */
-    node_t*         clickables[MAX_MODS];
-    uint32_t        clickable_count;
-    uint32_t        inline_depth;
-    bool            returned;           /* A return reached: the rest of the function is not run */
-    uint32_t        conditional;        /* Inside an IF of run time */
-    val_t           result;             /* What a return gave */
-    bool            loading;            /* The page's top level: what it does as it loads */
-    listener_t      listeners[MAX_LISTENERS];
-    uint32_t        listener_count;
-    pending_t       pending[MAX_PENDING];
-    uint32_t        pending_count;
-    lookvar_t       lookvars[MAX_LOOKVARS];
-    uint32_t        lookvar_count;
-    uint32_t        click_depth;
+    conv_t*             c;
+    dmvs_js_compiler_t  js;
+    handle_t            handles[MAX_HANDLES];
+    uint32_t            handle_count;
+    place_t             places[MAX_PLACES];
+    uint32_t            place_count;
+    held_t              held[MAX_HELD];
+    uint32_t            held_count;
+    click_t             clicks[MAX_CLICKS];
+    uint32_t            click_count;
+    change_t            changes[MAX_MODS];
+    uint32_t            change_count;
+    classvar_t          classvars[MAX_CLASSVARS];
+    uint32_t            classvar_count;
+    pending_t           pending[MAX_PENDING];
+    uint32_t            pending_count;
+    lookvar_t           lookvars[MAX_LOOKVARS];
+    uint32_t            lookvar_count;
+    dmvsi_action_t      actions[MAX_ACTIONS];   /* A handler being made at the end */
+    uint32_t            action_count;
+    uint32_t            ascii[4];               /* The characters of the scripts (text variables may show them) */
+    uint32_t            wide[MAX_WIDE_CHARS];
+    uint32_t            wide_count;
+    const char*         chars;
 } script_t;
 
-static bool same_name(const char* a, size_t an, const char* b, size_t bn)
+static void report(script_t* sc, const char* what)
 {
-    return an == bn && strncmp(a, b, an) == 0;
+    dmvs_js_report(sc->js, what);
 }
 
-static bool is_name(const js_t* n, const char* name)
+static const char* label_of(const node_t* e)
 {
-    return n != NULL && (n->kind == J_IDENT || n->kind == J_MEMBER) && same_name(n->name, n->length, name, strlen(name));
+    return (e->id != NULL) ? e->id : e->tag;
 }
 
-/* A report of what a script does that is not converted - once, in the last pass */
-static void report(script_t* sc, const js_t* where, const char* what)
+static dynamic_t* dynamic_of(script_t* sc, node_t* e)
 {
-    if (sc->pass != PASS_EMIT)
-        return;
-    char excerpt[48];
-    size_t n = 0;
-    for (const char* s = (where != NULL && where->source != NULL) ? where->source : ""; *s != '\0' && *s != '\n' && n + 1U < sizeof(excerpt); s++)
-        excerpt[n++] = *s;
-    excerpt[n] = '\0';
-    WARN(sc->c, "script: %s - not converted: %s\n", what, excerpt);
+    if (e->dynamic == NULL)
+        e->dynamic = arena_alloc(&sc->c->arena, sizeof(dynamic_t));
+    return e->dynamic;
 }
 
-static val_t make(uint8_t kind)
+static uint32_t handle(script_t* sc, uint8_t kind, node_t* e, dmvsi_var_t holder)
 {
-    val_t v;
+    for (uint32_t i = 0; i < sc->handle_count; i++)
+    {
+        const handle_t* h = &sc->handles[i];
+        if (h->kind == kind && h->element == e && h->holder == holder)
+            return i + 1U;
+    }
+    if (sc->handle_count >= MAX_HANDLES)
+        return 0;
+    sc->handles[sc->handle_count] = (handle_t){ kind, e, holder };
+    return ++sc->handle_count;
+}
+
+static const handle_t* handle_at(const script_t* sc, uint32_t h)
+{
+    return (h >= 1 && h <= sc->handle_count) ? &sc->handles[h - 1U] : NULL;
+}
+
+static dmvs_js_value_t object_value(uint32_t h)
+{
+    dmvs_js_value_t v;
     memset(&v, 0, sizeof(v));
-    v.kind = kind;
+    v.kind = (h != 0) ? DMVS_JS_V_OBJECT : DMVS_JS_V_NULL;
+    v.object = h;
     return v;
 }
 
-static val_t* lookup(script_t* sc, const char* name, size_t n)
+static dmvs_js_value_t element_value(script_t* sc, node_t* e)
 {
-    for (uint32_t i = sc->scope_count; i > 0; i--)
-    {
-        if (same_name(sc->scope[i - 1U].name, sc->scope[i - 1U].length, name, n))
-            return &sc->scope[i - 1U].value;
-    }
-    for (uint32_t i = 0; i < sc->global_count; i++)
-    {
-        if (same_name(sc->globals[i].name, sc->globals[i].length, name, n))
-            return &sc->globals[i].value;
-    }
-    return NULL;
+    return object_value((e != NULL) ? handle(sc, H_ELEMENT, e, 0) : 0);
 }
 
-/* ---- Changes ---- */
-
-static change_t* change(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
+/* What a value of the host is: one element (`*element`), or a variable holding them (`*holder`) */
+static uint8_t object_of(script_t* sc, const dmvs_js_value_t* v, node_t** element, dmvsi_var_t* holder)
 {
-    for (uint32_t i = 0; i < sc->change_count; i++)
+    *element = NULL;
+    *holder = 0;
+    if (v->kind == DMVS_JS_V_RUNTIME)
     {
-        change_t* ch = &sc->changes[i];
-        if (ch->element == e && ch->mod.kind == kind && strcmp(ch->mod.name, name) == 0 &&
-            ((value == NULL && ch->mod.value == NULL) || (value != NULL && ch->mod.value != NULL && strcmp(ch->mod.value, value) == 0)))
-            return ch;
+        *holder = v->var;
+        return H_ELEMENT;
     }
-    if (sc->pass != PASS_CHANGES || sc->change_count >= MAX_MODS)
-        return NULL;
-    change_t* ch = &sc->changes[sc->change_count++];
-    memset(ch, 0, sizeof(*ch));
-    ch->element = e;
-    ch->mod.element = e->index;
-    ch->mod.kind = kind;
-    ch->mod.name = name;
-    ch->mod.value = value;
-    return ch;
+    const handle_t* h = (v->kind == DMVS_JS_V_OBJECT) ? handle_at(sc, v->object) : NULL;
+    if (h == NULL)
+        return 0;
+    *element = h->element;
+    *holder = h->holder;
+    return h->kind;
 }
 
-static classvar_t* classvar(script_t* sc, node_t* e, const char* name, bool make_it)
+static const char* static_text(script_t* sc, const dmvs_js_value_t* v)
 {
-    for (uint32_t i = 0; i < sc->classvar_count; i++)
-    {
-        if (sc->classvars[i].element == e && strcmp(sc->classvars[i].name, name) == 0)
-            return &sc->classvars[i];
-    }
-    if (!make_it || sc->pass != PASS_CHANGES || sc->classvar_count >= MAX_CLASSVARS)
+    dmvsi_var_t var;
+    const char* text = NULL;
+    if (v->kind == DMVS_JS_V_RUNTIME || dmvs_js_text_operand(sc->js, v, &var, &text) != 0 || var != 0)
         return NULL;
-    classvar_t* cv = &sc->classvars[sc->classvar_count++];
-    cv->element = e;
-    cv->name = name;
-    cv->var = 0;
-    return cv;
+    return text;
 }
 
-static void emit(script_t* sc, uint8_t kind, dmvsi_var_t var, int32_t value)
+/* ---- Emitting ---- */
+
+static void emit_into(script_t* sc, const dmvsi_action_t* a)
 {
-    if (sc->pass != PASS_EMIT || var == 0 || sc->action_count >= MAX_ACTIONS)
-        return;
-    dmvsi_action_t* a = &sc->actions[sc->action_count++];
-    memset(a, 0, sizeof(*a));
-    a->kind = kind;
-    a->var = var;
-    a->value = value;
+    dmvs_js_emit(sc->js, a);
 }
 
-static void emit_end(script_t* sc)
+static void emit_op(script_t* sc, uint8_t kind, dmvsi_var_t var, dmvsi_var_t operand, int32_t value, const char* text)
 {
-    if (sc->pass != PASS_EMIT || sc->action_count >= MAX_ACTIONS)
-        return;
-    memset(&sc->actions[sc->action_count], 0, sizeof(dmvsi_action_t));
-    sc->actions[sc->action_count++].kind = DMVSI_ACT_END;
+    dmvsi_action_t a;
+    memset(&a, 0, sizeof(a));
+    a.kind = kind;
+    a.var = var;
+    a.operand = operand;
+    a.value = value;
+    a.text = text;
+    emit_into(sc, &a);
 }
 
-/* A variable set, or animated (its transition) */
-static void emit_to(script_t* sc, dmvsi_var_t var, int32_t value, uint16_t ms, const int16_t* easing)
+static void emit_call(script_t* sc, dmvsi_handler_t h)
 {
-    emit(sc, (ms > 0) ? DMVSI_ACT_ANIMATE : DMVSI_ACT_SET, var, value);
-    if (ms > 0 && sc->pass == PASS_EMIT && sc->action_count > 0 && sc->actions[sc->action_count - 1U].var == var)
-    {
-        sc->actions[sc->action_count - 1U].duration = ms;
-        memcpy(sc->actions[sc->action_count - 1U].easing, easing, 4 * sizeof(int16_t));
-    }
+    dmvsi_action_t a;
+    memset(&a, 0, sizeof(a));
+    a.kind = DMVSI_ACT_CALL;
+    a.handler = h;
+    if (h != 0)
+        emit_into(sc, &a);
 }
 
-/* The actions of a change of one element: its variables to where the change puts it */
-static void apply(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
+/* A change in the code here: a CALL of its handler (made at the end) */
+static void place(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
 {
-    change_t* ch = change(sc, e, kind, name, value);
-    if (sc->pass != PASS_EMIT || ch == NULL)
-        return;
-    if (kind == MOD_CLASSES)
+    if (sc->place_count >= MAX_PLACES)
     {
-        for (uint32_t i = 0; i < sc->lookvar_count; i++)
-        {
-            if (sc->lookvars[i].element == e)
-                emit(sc, DMVSI_ACT_SET, sc->lookvars[i].var, (int32_t)ch->look_index);
-        }
+        report(sc, "too many changes of elements - not converted");
+        return;
     }
-    else if (kind != MOD_STYLE)
+    place_t* p = &sc->places[sc->place_count];
+    p->handler = dmvsi_new_handler(sc->c->doc);
+    if (p->handler == 0)
+        return;
+    p->element = e;
+    p->kind = kind;
+    p->name = name;
+    p->value = value;
+    sc->place_count++;
+    emit_call(sc, p->handler);
+}
+
+static void place_held(script_t* sc, dmvsi_var_t holder, uint8_t kind, const char* name, const char* value)
+{
+    if (sc->held_count >= MAX_HELD)
     {
-        classvar_t* cv = classvar(sc, e, name, false);
-        if (cv != NULL)
-            emit(sc, DMVSI_ACT_SET, cv->var, (kind == MOD_CLASS_ADD) ? 1 : 0);
+        report(sc, "too many changes of elements in variables - not converted");
+        return;
     }
-    if (e->dynamic == NULL || ch->changed)
+    held_t* h = &sc->held[sc->held_count];
+    h->handler = dmvsi_new_handler(sc->c->doc);
+    if (h->handler == 0)
         return;
-    int32_t ox, oy;
-    view_origin(sc->c, &ox, &oy);
-    dmvsi_rect_t r = group_rect(sc->c, e, ox, oy);
-    if (e->dynamic->bind[DMVSI_BIND_X] != 0)
-        emit_to(sc, e->dynamic->bind[DMVSI_BIND_X], r.x + ch->dx, ch->move_ms, ch->move_easing);
-    if (e->dynamic->bind[DMVSI_BIND_Y] != 0)
-        emit_to(sc, e->dynamic->bind[DMVSI_BIND_Y], r.y + ch->dy, ch->move_ms, ch->move_easing);
-    if (e->dynamic->bind[DMVSI_BIND_OPACITY] != 0)
-        emit_to(sc, e->dynamic->bind[DMVSI_BIND_OPACITY], ch->opacity, ch->fade_ms, ch->fade_easing);
+    h->holder = holder;
+    h->kind = kind;
+    h->name = name;
+    h->value = value;
+    sc->held_count++;
+    emit_call(sc, h->handler);
 }
 
-/* The classes changed of each element so far, as their changes */
-static void flush(script_t* sc)
+/* The classes changed of each element so far, as their changes (the compiler's flush) */
+static void flush_pending(script_t* sc)
 {
     uint32_t count = sc->pending_count;
     sc->pending_count = 0;
@@ -1082,7 +318,7 @@ static void flush(script_t* sc)
         pending_t* p = &sc->pending[i];
         if (p->count == 1)
         {
-            apply(sc, p->element, p->add[0] ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, p->names[0], NULL);
+            place(sc, p->element, p->add[0] ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, p->names[0], NULL);
             continue;
         }
         /* "+a -b ...", by the classes' names: the same changes, the same text */
@@ -1104,10 +340,16 @@ static void flush(script_t* sc)
         }
         const char* name = arena_strndup(&sc->c->arena, spec, n);
         if (name != NULL)
-            apply(sc, p->element, MOD_CLASSES, name, NULL);
+            place(sc, p->element, MOD_CLASSES, name, NULL);
     }
 }
 
+static void host_flush(void* ctx, dmvs_js_compiler_t js)
+{
+    (void)js;
+    flush_pending(ctx);
+}
+
 /* A class added or removed, kept with the other classes changed of the element */
 static void class_op(script_t* sc, node_t* e, const char* name, bool add)
 {
@@ -1117,7 +359,7 @@ static void class_op(script_t* sc, node_t* e, const char* name, bool add)
     if (p == NULL)
     {
         if (sc->pending_count >= MAX_PENDING)
-            flush(sc);
+            flush_pending(sc);
         p = &sc->pending[sc->pending_count++];
         p->element = e;
         p->count = 0;
@@ -1137,811 +379,445 @@ static void class_op(script_t* sc, node_t* e, const char* name, bool add)
     }
 }
 
-/* What the handler does next depends on run time: what it changed so far first */
-static void flow(script_t* sc, uint8_t kind, dmvsi_var_t var, int32_t value)
-{
-    flush(sc);
-    if (kind == DMVSI_ACT_END)
-        emit_end(sc);
-    else
-        emit(sc, kind, var, value);
-}
+static bool has_class(const node_t* n, const char* name);
 
-static void change_one(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
-{
-    if (kind == MOD_CLASS_ADD || kind == MOD_CLASS_REMOVE)
-        class_op(sc, e, name, kind == MOD_CLASS_ADD);
-    else
-    {
-        flush(sc);
-        apply(sc, e, kind, name, value);
-    }
-}
-
-/* A change of what a value is: one element, or each a variable may hold (at run time) */
-static void apply_to(script_t* sc, const val_t* target, uint8_t kind, const char* name, const char* value)
+/* A class's variable (1: the element has it): made when it is first asked about */
+static classvar_t* classvar(script_t* sc, node_t* e, const char* name, bool make_it)
 {
-    if (sc->loading)
-        return;
-    if (target->element != NULL)
-    {
-        change_one(sc, target->element, kind, name, value);
-        return;
-    }
-    runtime_t* rt = &sc->runtime[target->runtime - 1U];
-    for (uint32_t i = 0; i < rt->domain_count; i++)
+    for (uint32_t i = 0; i < sc->classvar_count; i++)
     {
-        flow(sc, DMVSI_ACT_IF_EQ, rt->var, (int32_t)rt->domain[i]->index);
-        change_one(sc, rt->domain[i], kind, name, value);
-        flow(sc, DMVSI_ACT_END, 0, 0);
+        if (sc->classvars[i].element == e && strcmp(sc->classvars[i].name, name) == 0)
+            return &sc->classvars[i];
     }
+    if (!make_it || sc->classvar_count >= MAX_CLASSVARS)
+        return NULL;
+    char label[48];
+    Dmod_SnPrintf(label, sizeof(label), "%s_%s", label_of(e), name);
+    dmvsi_var_t var = dmvsi_add_var(sc->c->doc, label, has_class(e, name) ? 1 : 0);
+    if (var == 0)
+        return NULL;
+    classvar_t* cv = &sc->classvars[sc->classvar_count++];
+    cv->element = e;
+    cv->name = name;
+    cv->var = var;
+    return cv;
 }
 
-/* ---- Running a script, abstractly ---- */
+/* ---- Texts ---- */
 
-static val_t eval(script_t* sc, const js_t* n);
-static void run(script_t* sc, const js_t* s);
-
-static const char* text_of(script_t* sc, const val_t* v)
+/* The text an element shows: its text nodes' */
+static size_t text_content(const node_t* n, char* out, size_t size, size_t at, uint32_t depth)
 {
-    char buffer[24];
-    if (v->kind == V_STRING)
-        return v->text;
-    if (v->kind == V_NUMBER)
+    for (const node_t* k = n->first; k != NULL && depth < 64U; k = k->next)
     {
-        int32_t whole = v->num / 1000, frac = (v->num < 0 ? -v->num : v->num) % 1000;
-        if (frac == 0)
-            Dmod_SnPrintf(buffer, sizeof(buffer), "%d", (int)whole);
-        else
-            Dmod_SnPrintf(buffer, sizeof(buffer), "%d.%03d", (int)whole, (int)frac);
-        return arena_strndup(&sc->c->arena, buffer, strlen(buffer));
-    }
-    return NULL;
-}
-
-/* f(args): a function of the page inlined, with its arguments' values (and, an arrow
- * function, the variables it saw) */
-static val_t call_values(script_t* sc, const val_t* fn, const val_t* args, uint32_t count)
-{
-    const js_t* f = fn->function;
-    if (sc->inline_depth >= MAX_INLINE || f == NULL)
-        return make(V_UNKNOWN);
-    uint32_t saved_scope = sc->scope_count;
-    bool saved_returned = sc->returned;
-    val_t saved_result = sc->result;
-    for (uint32_t i = 0; i < fn->closure_count && sc->scope_count < MAX_SCOPE; i++)
-        sc->scope[sc->scope_count++] = fn->closure[i];
-    uint32_t i = 0;
-    for (const js_t* p = f->list; p != NULL; p = p->next, i++)
-    {
-        if (sc->scope_count < MAX_SCOPE)
+        if (k->kind == NODE_TEXT)
         {
-            sc->scope[sc->scope_count].name = p->name;
-            sc->scope[sc->scope_count].length = p->length;
-            sc->scope[sc->scope_count].value = (i < count) ? args[i] : make(V_UNDEFINED);
-            sc->scope_count++;
+            for (size_t i = 0; i < k->length && at + 1U < size; i++)
+                out[at++] = k->text[i];
         }
+        else if (k->kind == NODE_ELEMENT)
+            at = text_content(k, out, size, at, depth + 1U);
     }
-    sc->inline_depth++;
-    sc->returned = false;
-    sc->result = make(V_UNDEFINED);
-    uint32_t saved_conditional = sc->conditional;
-    sc->conditional = 0;
-    val_t result = make(V_UNDEFINED);
-    if (f->kind == J_FUNC && f->b == NULL)
-        result = eval(sc, f->a);        /* x => expression */
-    else if (f->b != NULL)
-    {
-        run(sc, f->b);
-        result = sc->result;
-    }
-    sc->conditional = saved_conditional;
-    sc->inline_depth--;
-    sc->returned = saved_returned;
-    sc->result = saved_result;
-    sc->scope_count = saved_scope;
-    return result;
+    out[(at < size) ? at : size - 1U] = '\0';
+    return at;
+}
+
+/* Its text variable (and the number it is), made when a script first uses its text */
+static dynamic_t* text_of(script_t* sc, node_t* e)
+{
+    dynamic_t* d = dynamic_of(sc, e);
+    if (d == NULL || d->text != 0)
+        return d;
+    char text[TEXT_VAR_SIZE];
+    char label[48];
+    double number = 0.0;
+    size_t n = text_content(e, text, sizeof(text), 0, 0);
+    size_t a = 0;
+    while (a < n && (text[a] == ' ' || text[a] == '\n' || text[a] == '\t' || text[a] == '\r'))
+        a++;
+    while (n > a && (text[n - 1U] == ' ' || text[n - 1U] == '\n' || text[n - 1U] == '\t' || text[n - 1U] == '\r'))
+        text[--n] = '\0';
+    Dmod_SnPrintf(label, sizeof(label), "%s_text", label_of(e));
+    d->text = dmvsi_add_text_var(sc->c->doc, label, TEXT_VAR_SIZE, text + a);
+    Dmod_SnPrintf(label, sizeof(label), "%s_number", label_of(e));
+    bool known = dmvs_js_parse_number(text + a, n - a, &number);
+    d->number = dmvsi_add_var(sc->c->doc, label, known ? (int32_t)(number * 1000.0 + ((number < 0) ? -0.5 : 0.5)) : 0);
+    return d;
 }
 
-static val_t call_function(script_t* sc, const val_t* fn, const js_t* args)
+static void set_text(script_t* sc, node_t* e, const dmvs_js_value_t* v)
 {
-    val_t values[8];
-    uint32_t n = 0;
-    for (const js_t* a = args; a != NULL; a = a->next)
+    dynamic_t* d = text_of(sc, e);
+    if (d == NULL || d->text == 0)
+        return;
+    dmvsi_var_t var;
+    const char* text = NULL;
+    if (dmvs_js_text_operand(sc->js, v, &var, &text) != 0)
     {
-        val_t v = eval(sc, a);
-        if (n < 8U)
-            values[n++] = v;
+        report(sc, "a text the view cannot show - not converted");
+        return;
     }
-    return call_values(sc, fn, values, n);
+    if (var != d->text)
+        emit_op(sc, DMVSI_ACT_SET, d->text, var, 0, (var == 0) ? text : NULL);
+    /* Its number: parseFloat(el.innerText) */
+    double n = 0.0;
+    if (v->kind == DMVS_JS_V_RUNTIME && v->number_var != 0)
+        emit_op(sc, DMVSI_ACT_SET, d->number, v->number_var, 0, NULL);
+    else if (text != NULL && dmvs_js_parse_number(text, strlen(text), &n))
+        emit_op(sc, DMVSI_ACT_SET, d->number, 0, (int32_t)(n * 1000.0 + ((n < 0) ? -0.5 : 0.5)), NULL);
+    else if (v->kind == DMVS_JS_V_NUMBER)
+        emit_op(sc, DMVSI_ACT_SET, d->number, 0, (int32_t)(v->number * 1000.0 + ((v->number < 0) ? -0.5 : 0.5)), NULL);
 }
 
-/* A function as a value: an arrow function sees the variables where it is made */
-static val_t function_value(script_t* sc, const js_t* n)
+/* The characters a script may show: every one of its source (what it writes is made of them) and digits */
+static void add_chars(script_t* sc, const char* s, size_t n)
 {
-    val_t v = make(V_FUNCTION);
-    v.function = n;
-    if (sc->scope_count > 0)
+    for (size_t i = 0; i < n; )
     {
-        v.closure = arena_alloc(&sc->c->arena, sc->scope_count * sizeof(binding_t));
-        if (v.closure != NULL)
+        uint8_t b = (uint8_t)s[i];
+        if (b < 0x80)
         {
-            memcpy(v.closure, sc->scope, sc->scope_count * sizeof(binding_t));
-            v.closure_count = sc->scope_count;
+            if (b >= 0x20)
+                sc->ascii[b >> 5] |= 1u << (b & 31u);
+            i++;
+            continue;
         }
+        size_t len = (b >= 0xF0) ? 4 : (b >= 0xE0) ? 3 : (b >= 0xC0) ? 2 : 1;
+        uint32_t cp = 0;
+        memcpy(&cp, s + i, (i + len <= n) ? len : 1);
+        bool known = false;
+        for (uint32_t k = 0; k < sc->wide_count && !known; k++)
+            known = sc->wide[k] == cp;
+        if (!known && sc->wide_count < MAX_WIDE_CHARS && len > 1)
+            sc->wide[sc->wide_count++] = cp;
+        i += len;
     }
-    return v;
 }
 
-static void run_click(script_t* sc, node_t* e);
-
-/* x.classList.add('a'), document.getElementById('a'), f(...) */
-static val_t call(script_t* sc, const js_t* n)
+static const char* chars_of(script_t* sc)
 {
-    const js_t* f = n->a;
-    const js_t* arg = n->list;
-    if (f != NULL && f->kind == J_MEMBER)
+    if (sc->chars != NULL)
+        return sc->chars;
+    add_chars(sc, "0123456789-.,:% ", 16);
+    char* out = arena_alloc(&sc->c->arena, 96U + 4U * sc->wide_count + 1U);
+    if (out == NULL)
+        return "";
+    size_t n = 0;
+    for (uint32_t b = 0x20; b < 0x7F; b++)
     {
-        val_t object = eval(sc, f->a);
-        if (object.kind == V_DOCUMENT && is_name(f, "getElementById"))
-        {
-            val_t id = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
-            if (id.kind != V_STRING)
-            {
-                report(sc, n, "an element not known at conversion");
-                return make(V_UNKNOWN);
-            }
-            node_t* e = find_id(sc->c->document, id.text, 0);
-            val_t v = make(e != NULL ? V_ELEMENT : V_NULL);
-            v.element = e;
-            return v;
-        }
-        if ((object.kind == V_DOCUMENT || (object.kind == V_ELEMENT && object.element != NULL)) &&
-            (is_name(f, "querySelector") || is_name(f, "querySelectorAll")))
-        {
-            /* The elements of a selector: at conversion, as the page is */
-            val_t sel = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
-            if (sel.kind != V_STRING)
-            {
-                report(sc, n, "a selector not known at conversion");
-                return make(V_UNKNOWN);
-            }
-            node_t* found[MAX_DOMAIN];
-            node_t* under = (object.kind == V_ELEMENT) ? object.element : sc->c->document;
-            uint32_t count = css_select(sc->c, sel.text, under, found, MAX_DOMAIN);
-            if (is_name(f, "querySelector"))
-            {
-                val_t v = make(count > 0 ? V_ELEMENT : V_NULL);
-                v.element = (count > 0) ? found[0] : NULL;
-                return v;
-            }
-            val_t v = make(V_LIST);
-            v.items = (count > 0) ? arena_alloc(&sc->c->arena, count * sizeof(node_t*)) : NULL;
-            if (v.items != NULL)
-            {
-                memcpy(v.items, found, count * sizeof(node_t*));
-                v.count = count;
-            }
-            return v;
-        }
-        if (object.kind == V_LIST && is_name(f, "forEach"))
-        {
-            /* Each element in turn - unrolled */
-            val_t fn = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
-            if (fn.kind != V_FUNCTION)
-            {
-                report(sc, n, "forEach() of what is not a function");
-                return make(V_UNKNOWN);
-            }
-            for (uint32_t i = 0; i < object.count; i++)
-            {
-                val_t args[2] = { make(V_ELEMENT), make(V_NUMBER) };
-                args[0].element = object.items[i];
-                args[1].num = (int32_t)i * 1000;
-                (void)call_values(sc, &fn, args, 2);
-            }
-            return make(V_UNDEFINED);
-        }
-        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "getAttribute"))
-        {
-            val_t name = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
-            const char* value = (name.kind == V_STRING) ? node_attr(object.element, name.text) : NULL;
-            if (name.kind != V_STRING)
-                return make(V_UNKNOWN);
-            val_t v = make(value != NULL ? V_STRING : V_NULL);
-            v.text = value;
-            return v;
-        }
-        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "addEventListener"))
-        {
-            val_t type = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
-            val_t fn = (arg != NULL && arg->next != NULL) ? eval(sc, arg->next) : make(V_UNKNOWN);
-            if (!sc->loading || type.kind != V_STRING || strcmp(type.text, "click") != 0 || fn.kind != V_FUNCTION)
-            {
-                report(sc, n, sc->loading ? "a listener of what is not a click" : "a listener added by a handler");
-                return make(V_UNKNOWN);
-            }
-            if (sc->listener_count < MAX_LISTENERS)
-                sc->listeners[sc->listener_count++] = (listener_t){ object.element, fn };
-            return make(V_UNDEFINED);
-        }
-        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "click") && !sc->loading)
-        {
-            run_click(sc, object.element);   /* What clicking it does, here */
-            return make(V_UNDEFINED);
-        }
-        if (object.kind == V_CLASSES && (is_name(f, "add") || is_name(f, "remove") || is_name(f, "toggle")))
-        {
-            if (sc->loading)
-            {
-                report(sc, n, "what the page does when it loads");
-                return make(V_UNKNOWN);
-            }
-            for (; arg != NULL; arg = arg->next)
-            {
-                val_t cls = eval(sc, arg);
-                if (cls.kind != V_STRING)
-                {
-                    report(sc, n, "a class not known at conversion");
-                    continue;
-                }
-                if (!is_name(f, "toggle"))
-                {
-                    apply_to(sc, &object, is_name(f, "add") ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, cls.text, NULL);
-                    continue;
-                }
-                /* toggle: its class's variable flipped, then what is is applied */
-                if (object.element == NULL)
-                {
-                    report(sc, n, "classList.toggle() of a variable");
-                    continue;
-                }
-                flush(sc);
-                classvar_t* cv = classvar(sc, object.element, cls.text, true);
-                (void)change(sc, object.element, MOD_CLASS_ADD, cls.text, NULL);
-                (void)change(sc, object.element, MOD_CLASS_REMOVE, cls.text, NULL);
-                if (sc->pass == PASS_EMIT && cv != NULL)
-                {
-                    emit(sc, DMVSI_ACT_TOGGLE, cv->var, 0);
-                    emit(sc, DMVSI_ACT_IF_NE, cv->var, 0);
-                    apply(sc, object.element, MOD_CLASS_ADD, cls.text, NULL);
-                    emit_end(sc);
-                    emit(sc, DMVSI_ACT_IF_EQ, cv->var, 0);
-                    apply(sc, object.element, MOD_CLASS_REMOVE, cls.text, NULL);
-                    emit_end(sc);
-                }
-            }
-            return make(V_UNDEFINED);
-        }
-        if (object.kind == V_CLASSES && is_name(f, "contains"))
-            return make(V_UNKNOWN);     /* As a condition: see condition() */
+        if ((sc->ascii[b >> 5] & (1u << (b & 31u))) != 0)
+            out[n++] = (char)b;
     }
-    if (f != NULL && f->kind == J_IDENT)
+    for (uint32_t k = 0; k < sc->wide_count; k++)
     {
-        val_t* v = lookup(sc, f->name, f->length);
-        if (v != NULL && v->kind == V_FUNCTION)
-        {
-            if (sc->loading)
-            {
-                report(sc, n, "what the page does when it loads");
-                return make(V_UNKNOWN);
-            }
-            val_t fn = *v;
-            return call_function(sc, &fn, arg);
-        }
+        const char* w = (const char*)&sc->wide[k];
+        uint8_t b = (uint8_t)w[0];
+        size_t len = (b >= 0xF0) ? 4 : (b >= 0xE0) ? 3 : 2;
+        memcpy(out + n, w, len);
+        n += len;
     }
-    report(sc, n, "a call");
-    return make(V_UNKNOWN);
+    out[n] = '\0';
+    sc->chars = out;
+    return out;
 }
 
-static val_t eval(script_t* sc, const js_t* n)
+/* ---- Clicks ---- */
+
+static click_t* click_of(script_t* sc, node_t* e)
 {
-    if (n == NULL)
-        return make(V_UNDEFINED);
-    switch (n->kind)
+    for (uint32_t i = 0; i < sc->click_count; i++)
     {
-        case J_NUMBER:
-        {
-            val_t v = make(V_NUMBER);
-            v.num = n->num;
-            return v;
-        }
-        case J_STRING:
-        {
-            val_t v = make(V_STRING);
-            v.text = n->name;
-            return v;
-        }
-        case J_NULL:
-            return make(V_NULL);
-        case J_UNDEFINED:
-            return make(V_UNDEFINED);
-        case J_TRUE:
-        case J_FALSE:
-        {
-            val_t v = make(V_BOOL);
-            v.num = n->kind == J_TRUE;
-            return v;
-        }
-        case J_THIS:
-        {
-            val_t v = make((sc->self != NULL) ? V_ELEMENT : V_UNKNOWN);
-            v.element = sc->self;
-            return v;
-        }
-        case J_IDENT:
-        {
-            if (is_name(n, "document"))
-                return make(V_DOCUMENT);
-            val_t* v = lookup(sc, n->name, n->length);
-            return (v != NULL) ? *v : make(V_UNKNOWN);
-        }
-        case J_MEMBER:
-        {
-            val_t object = eval(sc, n->a);
-            if ((object.kind == V_ELEMENT || object.kind == V_RUNTIME) && (is_name(n, "classList") || is_name(n, "style")))
-            {
-                object.kind = is_name(n, "style") ? V_STYLE : V_CLASSES;
-                return object;
-            }
-            return make(V_UNKNOWN);
-        }
-        case J_CALL:
-            return call(sc, n);
-        case J_FUNC:
-            return function_value(sc, n);
-        case J_ADD:
-        {
-            val_t a = eval(sc, n->a), b = eval(sc, n->b);
-            if (a.kind == V_NUMBER && b.kind == V_NUMBER)
-            {
-                a.num += b.num;
-                return a;
-            }
-            const char* ta = text_of(sc, &a);
-            const char* tb = text_of(sc, &b);
-            if ((a.kind != V_STRING && b.kind != V_STRING) || ta == NULL || tb == NULL)
-                return make(V_UNKNOWN);
-            size_t la = strlen(ta), lb = strlen(tb);
-            char* t = arena_alloc(&sc->c->arena, la + lb + 1U);
-            if (t == NULL)
-                return make(V_UNKNOWN);
-            memcpy(t, ta, la);
-            memcpy(t + la, tb, lb);
-            val_t v = make(V_STRING);
-            v.text = t;
-            return v;
-        }
-        case J_ASSIGN:
-        {
-            const js_t* target = n->a;
-            val_t value = eval(sc, n->b);
-            if (target != NULL && target->kind == J_MEMBER)
-            {
-                val_t object = eval(sc, target->a);
-                if (object.kind == V_ELEMENT && object.element != NULL && is_name(target, "onclick") && sc->loading &&
-                    value.kind == V_FUNCTION)
-                {
-                    if (sc->listener_count < MAX_LISTENERS)
-                        sc->listeners[sc->listener_count++] = (listener_t){ object.element, value };
-                    return value;
-                }
-                if (object.kind == V_STYLE && sc->loading)
-                {
-                    report(sc, n, "what the page does when it loads");
-                    return make(V_UNKNOWN);
-                }
-                if (object.kind == V_STYLE)
-                {
-                    const char* text = text_of(sc, &value);
-                    if (text == NULL)
-                    {
-                        report(sc, n, "a style not known at conversion");
-                        return make(V_UNKNOWN);
-                    }
-                    char* name = arena_strndup(&sc->c->arena, target->name, target->length);
-                    if (name != NULL)
-                        apply_to(sc, &object, MOD_STYLE, name, text);
-                    return value;
-                }
-                report(sc, n, "an assignment");
-                return make(V_UNKNOWN);
-            }
-            if (target != NULL && target->kind == J_IDENT)
-            {
-                val_t* v = lookup(sc, target->name, target->length);
-                if (v != NULL && v->kind == V_RUNTIME && sc->loading)
-                {
-                    report(sc, n, "what the page does when it loads");
-                    return make(V_UNKNOWN);
-                }
-                if (v != NULL && v->kind == V_RUNTIME)
-                {
-                    runtime_t* rt = &sc->runtime[v->runtime - 1U];
-                    if (value.kind == V_ELEMENT && value.element != NULL)
-                    {
-                        bool known = false;
-                        for (uint32_t i = 0; i < rt->domain_count && !known; i++)
-                            known = rt->domain[i] == value.element;
-                        if (!known && rt->domain_count < MAX_DOMAIN)
-                            rt->domain[rt->domain_count++] = value.element;
-                        emit(sc, DMVSI_ACT_SET, rt->var, (int32_t)value.element->index);
-                    }
-                    else if (value.kind == V_NULL || value.kind == V_UNDEFINED)
-                        emit(sc, DMVSI_ACT_SET, rt->var, 0);
-                    else
-                        report(sc, n, "a variable set to what is not an element");
-                    return value;
-                }
-                if (v != NULL && sc->conditional == 0)
-                {
-                    *v = value;             /* A local, at conversion */
-                    return value;
-                }
-            }
-            report(sc, n, "an assignment");
-            return make(V_UNKNOWN);
-        }
-        default:
-            return make(V_UNKNOWN);
+        if (sc->clicks[i].element == e)
+            return &sc->clicks[i];
     }
+    if (sc->click_count >= MAX_CLICKS)
+        return NULL;
+    click_t* k = &sc->clicks[sc->click_count];
+    memset(k, 0, sizeof(*k));
+    k->element = e;
+    k->handler = dmvsi_new_handler(sc->c->doc);
+    if (k->handler == 0)
+        return NULL;
+    sc->click_count++;
+    return k;
 }
 
-/* A condition: known at conversion (*known, *truth), or a test of a variable at run time */
-typedef struct
-{
-    bool            known;
-    bool            truth;
-    dmvsi_var_t     var;            /* Run time: var == value (equal) or != */
-    int32_t         value;
-    bool            equal;
-} cond_t;
-
-static cond_t condition(script_t* sc, const js_t* n)
+static bool listened(const script_t* sc, const node_t* e)
 {
-    cond_t c;
-    memset(&c, 0, sizeof(c));
-    if (n == NULL)
-        return c;
-    if (n->kind == J_NOT)
-    {
-        c = condition(sc, n->a);
-        c.truth = !c.truth;
-        c.equal = !c.equal;
-        return c;
-    }
-    if (n->kind == J_CALL && n->a != NULL && n->a->kind == J_MEMBER && is_name(n->a, "contains"))
+    for (uint32_t i = 0; i < sc->click_count; i++)
     {
-        val_t object = eval(sc, n->a->a);
-        val_t cls = (n->list != NULL) ? eval(sc, n->list) : make(V_UNKNOWN);
-        if (object.kind == V_CLASSES && object.element != NULL && cls.kind == V_STRING)
-        {
-            classvar_t* cv = classvar(sc, object.element, cls.text, true);
-            if (cv != NULL && (cv->var != 0 || sc->pass != PASS_EMIT))
-            {
-                c.var = cv->var;
-                c.value = 0;
-                c.equal = false;
-                return c;
-            }
-        }
-        report(sc, n, "a condition");
-        c.known = true;
-        return c;
-    }
-    if (n->kind == J_EQ || n->kind == J_NE)
-    {
-        val_t a = eval(sc, n->a), b = eval(sc, n->b);
-        if (a.kind != V_RUNTIME)
-        {
-            val_t t = a;
-            a = b;
-            b = t;
-        }
-        if (a.kind == V_RUNTIME && (b.kind == V_ELEMENT || b.kind == V_NULL || b.kind == V_UNDEFINED))
-        {
-            c.var = sc->runtime[a.runtime - 1U].var;
-            c.value = (b.kind == V_ELEMENT && b.element != NULL) ? (int32_t)b.element->index : 0;
-            c.equal = n->kind == J_EQ;
-            return c;
-        }
-        if (a.kind == V_STRING && b.kind == V_STRING)
-        {
-            c.known = true;
-            c.truth = (strcmp(a.text, b.text) == 0) == (n->kind == J_EQ);
-            return c;
-        }
-        report(sc, n, "a condition");
-        c.known = true;
-        return c;
-    }
-    val_t v = eval(sc, n);
-    switch (v.kind)
-    {
-        case V_RUNTIME:
-            c.var = sc->runtime[v.runtime - 1U].var;
-            c.value = 0;
-            c.equal = false;
-            return c;
-        case V_ELEMENT:
-        case V_FUNCTION:
-        case V_DOCUMENT:
-        case V_CLASSES:
-        case V_STYLE:
-            c.known = true;
-            c.truth = true;
-            return c;
-        case V_NULL:
-        case V_UNDEFINED:
-            c.known = true;
-            return c;
-        case V_BOOL:
-        case V_NUMBER:
-            c.known = true;
-            c.truth = v.num != 0;
-            return c;
-        case V_STRING:
-            c.known = true;
-            c.truth = v.text[0] != '\0';
-            return c;
-        default:
-            report(sc, n, "a condition");
-            c.known = true;         /* As false: what it guards is left out */
-            return c;
+        if (sc->clicks[i].element == e && (sc->clicks[i].count > 0 || sc->clicks[i].onclick != 0))
+            return true;
     }
+    return false;
 }
 
-static void run_list(script_t* sc, const js_t* s)
-{
-    for (; s != NULL && !sc->returned; s = s->next)
-        run(sc, s);
-}
-
-static void run(script_t* sc, const js_t* s)
+static int add_listener(script_t* sc, node_t* e, const dmvs_js_value_t* fn)
 {
-    if (s == NULL || sc->c->arena.failed)
-        return;
-    switch (s->kind)
+    click_t* k = click_of(sc, e);
+    if (k == NULL || k->count >= MAX_CLICK_CALLS)
     {
-        case S_BLOCK:
-        {
-            uint32_t saved = sc->scope_count;
-            run_list(sc, s->list);
-            sc->scope_count = saved;
-            return;
-        }
-        case S_EXPR:
-            (void)eval(sc, s->a);
-            return;
-        case S_VAR:
-            if (sc->scope_count < MAX_SCOPE)
-            {
-                sc->scope[sc->scope_count].name = s->name;
-                sc->scope[sc->scope_count].length = s->length;
-                sc->scope[sc->scope_count].value = eval(sc, s->a);
-                sc->scope_count++;
-            }
-            return;
-        case S_IF:
-        {
-            cond_t c = condition(sc, s->a);
-            if (c.known)
-            {
-                if (c.truth)
-                    run(sc, s->b);
-                else if (s->c != NULL)
-                    run(sc, s->c);
-                return;
-            }
-            if (sc->loading)
-            {
-                report(sc, s, "what the page does when it loads");
-                return;
-            }
-            sc->conditional++;
-            flow(sc, c.equal ? DMVSI_ACT_IF_EQ : DMVSI_ACT_IF_NE, c.var, c.value);
-            run(sc, s->b);
-            flow(sc, DMVSI_ACT_END, 0, 0);
-            if (s->c != NULL)
-            {
-                flow(sc, c.equal ? DMVSI_ACT_IF_NE : DMVSI_ACT_IF_EQ, c.var, c.value);
-                run(sc, s->c);
-                flow(sc, DMVSI_ACT_END, 0, 0);
-            }
-            sc->conditional--;
-            sc->returned = false;
-            return;
-        }
-        case S_RETURN:
-            if (sc->conditional > 0)
-                report(sc, s, "a return in a condition of run time");
-            else
-            {
-                sc->result = eval(sc, s->a);
-                sc->returned = true;
-            }
-            return;
-        case S_FUNC:
-        case S_EMPTY:
-            return;
-        default:
-            report(sc, s, "a statement");
-            return;
+        report(sc, "too many listeners - not converted");
+        return 0;
     }
+    dmvsi_handler_t h = dmvs_js_function_handler(sc->js, fn, handle(sc, H_ELEMENT, e, 0));
+    if (h == 0)
+        return -ENOTSUP;
+    k->calls[k->count++] = h;
+    return 0;
 }
 
-/* ---- The page's scripts ---- */
+/* ---- The host ---- */
+
+static bool host_global(void* ctx, dmvs_js_compiler_t js, const char* name, dmvs_js_value_t* value)
+{
+    script_t* sc = ctx;
+    (void)js;
+    if (strcmp(name, "document") == 0)
+        *value = object_value(handle(sc, H_DOCUMENT, NULL, 0));
+    else if (strcmp(name, "tailwind") == 0)
+        *value = object_value(handle(sc, H_IGNORED, NULL, 0));
+    else
+        return false;
+    return true;
+}
 
-typedef struct
+static int host_get(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* object, const char* name, dmvs_js_value_t* value)
 {
-    js_t*       programs[16];
-    uint32_t    count;
-} scripts_t;
+    script_t* sc = ctx;
+    node_t* e;
+    dmvsi_var_t holder;
+    uint8_t kind = object_of(sc, object, &e, &holder);
+    (void)js;
+    memset(value, 0, sizeof(*value));
+    if (kind == H_IGNORED)
+    {
+        *value = *object;
+        return 0;
+    }
+    if (kind != H_ELEMENT)
+        return -ENOTSUP;
+    if (strcmp(name, "classList") == 0 || strcmp(name, "style") == 0)
+    {
+        *value = object_value(handle(sc, (name[0] == 'c') ? H_CLASSES : H_STYLE, e, holder));
+        return 0;
+    }
+    if (e == NULL)
+        return -ENOTSUP;                    /* The element a variable holds: only its classes, its style */
+    if (strcmp(name, "innerText") == 0 || strcmp(name, "textContent") == 0)
+    {
+        dynamic_t* d = text_of(sc, e);
+        if (d == NULL || d->text == 0)
+            return -ENOMEM;
+        value->kind = DMVS_JS_V_RUNTIME;
+        value->type = DMVS_JS_T_TEXT;
+        value->var = d->text;
+        value->number_var = d->number;
+        return 0;
+    }
+    if (strcmp(name, "id") == 0)
+    {
+        value->kind = DMVS_JS_V_STRING;
+        value->text = (e->id != NULL) ? e->id : "";
+        value->length = strlen(value->text);
+        return 0;
+    }
+    return -ENOTSUP;
+}
 
-static void find_scripts(conv_t* c, node_t* n, scripts_t* out, uint32_t depth)
+static int host_set(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* object, const char* name, const dmvs_js_value_t* value)
 {
-    if (depth > 200U)
-        return;
-    for (node_t* k = n->first; k != NULL; k = k->next)
+    script_t* sc = ctx;
+    node_t* e;
+    dmvsi_var_t holder;
+    uint8_t kind = object_of(sc, object, &e, &holder);
+    (void)js;
+    if (kind == H_IGNORED)
+        return 0;
+    if (kind == H_STYLE)
     {
-        if (k->kind != NODE_ELEMENT)
-            continue;
-        if (node_is(k, "script"))
+        const char* text = static_text(sc, value);
+        if (text == NULL)
         {
-            const char* type = node_attr(k, "type");
-            bool js = type == NULL || type[0] == '\0' || strcmp(type, "module") == 0 || strcmp(type, "text/javascript") == 0;
-            if (js && node_attr(k, "src") == NULL && k->first != NULL && k->first->kind == NODE_TEXT && out->count < 16U)
-                out->programs[out->count++] = parse(c, k->first->text, k->first->length);
-            continue;
+            report(sc, "a style known only when the view runs - not converted");
+            return 0;
         }
-        find_scripts(c, k, out, depth + 1U);
+        const char* n = arena_strndup(&sc->c->arena, name, strlen(name));
+        const char* t = arena_strndup(&sc->c->arena, text, strlen(text));
+        if (n == NULL || t == NULL)
+            return -ENOMEM;
+        if (e != NULL)
+            place(sc, e, MOD_STYLE, n, t);
+        else
+            place_held(sc, holder, MOD_STYLE, n, t);
+        return 0;
+    }
+    if (kind != H_ELEMENT || e == NULL)
+        return -ENOTSUP;
+    if (strcmp(name, "innerText") == 0 || strcmp(name, "textContent") == 0)
+    {
+        set_text(sc, e, value);
+        return 0;
     }
+    if (strcmp(name, "onclick") == 0)
+        return add_listener(sc, e, value);
+    return -ENOTSUP;
 }
 
-/* The globals: functions, and the variables of the top level (what a handler assigns runs at run time) */
-static bool assigns(const js_t* s, const char* name, size_t n)
+/* document / an element: querySelector(All) - the elements, as the page is */
+static int select_elements(script_t* sc, node_t* under, const dmvs_js_value_t* selector, bool all, dmvs_js_value_t* result)
 {
-    for (; s != NULL; s = s->next)
+    const char* text = static_text(sc, selector);
+    if (text == NULL)
     {
-        if (s->kind == J_ASSIGN && s->a != NULL && s->a->kind == J_IDENT && same_name(s->a->name, s->a->length, name, n))
-            return true;
-        if (assigns(s->a, name, n) || assigns(s->b, name, n) || assigns(s->c, name, n) || assigns(s->list, name, n))
-            return true;
+        report(sc, "a selector known only when the view runs - not converted");
+        return 0;
     }
-    return false;
+    node_t* found[MAX_DOMAIN];
+    uint32_t count = css_select(sc->c, text, under, found, MAX_DOMAIN);
+    if (!all)
+    {
+        *result = element_value(sc, (count > 0) ? found[0] : NULL);
+        return 0;
+    }
+    dmvs_js_value_t values[MAX_DOMAIN];
+    for (uint32_t i = 0; i < count; i++)
+        values[i] = element_value(sc, found[i]);
+    return dmvs_js_array(sc->js, values, count, result);
 }
 
-static void declare_globals(script_t* sc, const scripts_t* scripts)
+static int classes_call(script_t* sc, node_t* e, dmvsi_var_t holder, const char* method, const dmvs_js_value_t* args,
+                        uint32_t count, dmvs_js_value_t* result)
 {
-    for (uint32_t p = 0; p < scripts->count; p++)
+    bool add = strcmp(method, "add") == 0, remove = strcmp(method, "remove") == 0;
+    bool toggle = strcmp(method, "toggle") == 0, replace = strcmp(method, "replace") == 0;
+    bool contains = strcmp(method, "contains") == 0;
+    const char* names[MAX_PENDING_OPS];
+    uint32_t n = 0;
+    for (uint32_t i = 0; i < count && n < MAX_PENDING_OPS; i++)
     {
-        for (const js_t* s = scripts->programs[p]; s != NULL; s = s->next)
+        const char* text = static_text(sc, &args[i]);
+        if (text == NULL)
         {
-            const js_t* list = (s->kind == S_BLOCK) ? s->list : s;
-            for (const js_t* d = list; d != NULL; d = (s->kind == S_BLOCK) ? d->next : NULL)
-            {
-                if (sc->global_count >= MAX_GLOBALS || (d->kind != S_FUNC && d->kind != S_VAR))
-                {
-                    if (s->kind != S_BLOCK)
-                        break;
-                    continue;
-                }
-                binding_t* g = &sc->globals[sc->global_count++];
-                g->name = d->name;
-                g->length = d->length;
-                if (d->kind == S_FUNC)
-                {
-                    g->value = make(V_FUNCTION);
-                    g->value.function = d;
-                }
-                else
-                {
-                    g->value = eval(sc, d->a);
-                    bool assigned = false;
-                    for (uint32_t q = 0; q < scripts->count && !assigned; q++)
-                    {
-                        for (const js_t* f = scripts->programs[q]; f != NULL && !assigned; f = f->next)
-                            assigned = f->kind == S_FUNC && assigns(f->b, d->name, d->length);
-                    }
-                    if (assigned && sc->runtime_count < MAX_RUNTIME)
-                    {
-                        runtime_t* rt = &sc->runtime[sc->runtime_count++];
-                        memset(rt, 0, sizeof(*rt));
-                        rt->name = d->name;
-                        rt->length = d->length;
-                        if (g->value.kind == V_ELEMENT && g->value.element != NULL)
-                        {
-                            rt->initial = (int32_t)g->value.element->index;
-                            rt->domain[rt->domain_count++] = g->value.element;
-                        }
-                        g->value = make(V_RUNTIME);
-                        g->value.runtime = sc->runtime_count;
-                    }
-                }
-                if (s->kind != S_BLOCK)
-                    break;
-            }
+            report(sc, "a class known only when the view runs - not converted");
+            return 0;
         }
+        names[n] = arena_strndup(&sc->c->arena, text, strlen(text));
+        if (names[n++] == NULL)
+            return -ENOMEM;
     }
-}
-
-/* ---- Handlers ---- */
-
-static bool listened(const script_t* sc, const node_t* e)
-{
-    for (uint32_t i = 0; i < sc->listener_count; i++)
+    if (e == NULL)
     {
-        if (sc->listeners[i].element == e)
-            return true;
+        /* The element a variable holds: each class, a change of whichever it is */
+        if (!(add || remove))
+        {
+            report(sc, "classList.toggle / contains / replace of an element in a variable - not converted");
+            return 0;
+        }
+        for (uint32_t i = 0; i < n; i++)
+            place_held(sc, holder, add ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, names[i], NULL);
+        return 0;
     }
-    return false;
-}
-
-/* What clicking e does: its onclick, then its listeners - `this` e */
-static void run_click(script_t* sc, node_t* e)
-{
-    if (sc->click_depth >= 4U)
-        return;
-    sc->click_depth++;
-    node_t* saved_self = sc->self;
-    uint32_t saved_scope = sc->scope_count;
-    bool saved_returned = sc->returned;
-    sc->self = e;
-    const char* onclick = node_attr(e, "onclick");
-    if (onclick != NULL)
+    if (add || remove)
     {
-        js_t* program = parse(sc->c, onclick, strlen(onclick));
-        sc->returned = false;
-        run_list(sc, program);
+        for (uint32_t i = 0; i < n; i++)
+            class_op(sc, e, names[i], add);
+        return 0;
     }
-    for (uint32_t i = 0; i < sc->listener_count; i++)
+    if (replace && n == 2)
     {
-        if (sc->listeners[i].element != e)
-            continue;
-        val_t event = make(V_UNKNOWN);
-        sc->returned = false;
-        (void)call_values(sc, &sc->listeners[i].function, &event, 1);
-    }
-    sc->self = saved_self;
-    sc->scope_count = saved_scope;
-    sc->returned = saved_returned;
-    sc->click_depth--;
+        class_op(sc, e, names[0], false);
+        class_op(sc, e, names[1], true);
+        return 0;
+    }
+    if ((toggle || contains) && n >= 1)
+    {
+        classvar_t* cv = classvar(sc, e, names[0], true);
+        if (cv == NULL)
+            return -ENOMEM;
+        if (toggle)
+        {
+            /* Its variable flipped, then what it is applied */
+            emit_op(sc, DMVSI_ACT_TOGGLE, cv->var, 0, 0, NULL);
+            emit_op(sc, DMVSI_ACT_IF_NE, cv->var, 0, 0, NULL);
+            place(sc, e, MOD_CLASS_ADD, names[0], NULL);
+            emit_op(sc, DMVSI_ACT_ELSE, 0, 0, 0, NULL);
+            place(sc, e, MOD_CLASS_REMOVE, names[0], NULL);
+            emit_op(sc, DMVSI_ACT_END, 0, 0, 0, NULL);
+        }
+        memset(result, 0, sizeof(*result));
+        result->kind = DMVS_JS_V_RUNTIME;
+        result->type = DMVS_JS_T_BOOL;
+        result->var = cv->var;
+        return 0;
+    }
+    return -ENOTSUP;
 }
 
-static void handlers(script_t* sc, node_t* n, uint32_t depth)
+static int host_call(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* object, const char* method,
+                     const dmvs_js_value_t* args, uint32_t count, dmvs_js_value_t* result)
 {
-    if (depth > 200U)
-        return;
-    for (node_t* k = n->first; k != NULL; k = k->next)
+    script_t* sc = ctx;
+    node_t* e;
+    dmvsi_var_t holder;
+    uint8_t kind = object_of(sc, object, &e, &holder);
+    (void)js;
+    memset(result, 0, sizeof(*result));
+    if (kind == H_IGNORED)
+        return 0;
+    if (kind == H_CLASSES)
+        return classes_call(sc, e, holder, method, args, count, result);
+    if (kind != H_DOCUMENT && (kind != H_ELEMENT || e == NULL))
+        return -ENOTSUP;
+    node_t* under = (kind == H_DOCUMENT) ? sc->c->document : e;
+    if (kind == H_DOCUMENT && strcmp(method, "getElementById") == 0 && count == 1)
     {
-        if (k->kind != NODE_ELEMENT || k->pseudo != PSEUDO_NONE)
-            continue;
-        bool clicks = node_attr(k, "onclick") != NULL || listened(sc, k);
-        if (clicks && k->style != NULL && k->style->display != DISPLAY_NONE)
+        const char* id = static_text(sc, &args[0]);
+        if (id == NULL)
         {
-            if (sc->pass == PASS_CHANGES && sc->clickable_count < MAX_MODS)
-                sc->clickables[sc->clickable_count++] = k;
-            sc->action_count = 0;
-            sc->scope_count = 0;
-            sc->returned = false;
-            sc->conditional = 0;
-            sc->pending_count = 0;
-            run_click(sc, k);
-            flush(sc);
-            if (sc->pass == PASS_EMIT && sc->action_count > 0)
-            {
-                dmvsi_handler_t h = dmvsi_add_handler(sc->c->doc, sc->actions, sc->action_count);
-                if (h != 0)
-                {
-                    if (k->dynamic == NULL)
-                        k->dynamic = arena_alloc(&sc->c->arena, sizeof(dynamic_t));
-                    if (k->dynamic != NULL)
-                        k->dynamic->click = h;
-                }
-            }
+            report(sc, "an element known only when the view runs - not converted");
+            return 0;
+        }
+        *result = element_value(sc, find_id(sc->c->document, id, 0));
+        return 0;
+    }
+    if ((strcmp(method, "querySelector") == 0 || strcmp(method, "querySelectorAll") == 0) && count == 1)
+        return select_elements(sc, under, &args[0], method[13] == 'A', result);
+    if (kind != H_ELEMENT)
+        return -ENOTSUP;
+    if (strcmp(method, "getAttribute") == 0 && count == 1)
+    {
+        const char* name = static_text(sc, &args[0]);
+        const char* value = (name != NULL) ? node_attr(e, name) : NULL;
+        result->kind = (value != NULL) ? DMVS_JS_V_STRING : DMVS_JS_V_NULL;
+        result->text = value;
+        result->length = (value != NULL) ? strlen(value) : 0;
+        return (name != NULL) ? 0 : -ENOTSUP;
+    }
+    if (strcmp(method, "addEventListener") == 0 && count >= 2)
+    {
+        const char* type = static_text(sc, &args[0]);
+        if (type == NULL || strcmp(type, "click") != 0)
+        {
+            report(sc, "a listener of what is not a click - not converted");
+            return 0;
         }
-        handlers(sc, k, depth + 1U);
+        return add_listener(sc, e, &args[1]);
+    }
+    if (strcmp(method, "click") == 0)
+    {
+        click_t* k = click_of(sc, e);
+        if (k != NULL)
+            emit_call(sc, k->handler);      /* What clicking it does, here */
+        return 0;
     }
+    return -ENOTSUP;
+}
+
+static void host_report(void* ctx, uint32_t line, uint32_t column, const char* message)
+{
+    script_t* sc = ctx;
+    WARN(sc->c, "script %u:%u: %s\n", (unsigned)line, (unsigned)column, message);
 }
 
 /* ---- States: the page laid out with a change ---- */
@@ -2283,46 +1159,198 @@ static int bind_element(script_t* sc, node_t* e)
     return 0;
 }
 
-int script_compile(conv_t* c)
+
+/* ---- The changes' handlers: made when every change is laid out ---- */
+
+static change_t* change(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
 {
-    scripts_t scripts;
-    memset(&scripts, 0, sizeof(scripts));
-    find_scripts(c, c->document, &scripts, 0);
-    script_t* sc = Dmod_Malloc(sizeof(*sc));
-    if (sc == NULL)
-        return -ENOMEM;
-    memset(sc, 0, sizeof(*sc));
-    sc->c = c;
-    declare_globals(sc, &scripts);
+    for (uint32_t i = 0; i < sc->change_count; i++)
+    {
+        change_t* ch = &sc->changes[i];
+        if (ch->element == e && ch->mod.kind == kind && strcmp(ch->mod.name, name) == 0 &&
+            ((value == NULL && ch->mod.value == NULL) || (value != NULL && ch->mod.value != NULL && strcmp(ch->mod.value, value) == 0)))
+            return ch;
+    }
+    if (sc->change_count >= MAX_MODS)
+        return NULL;
+    change_t* ch = &sc->changes[sc->change_count++];
+    memset(ch, 0, sizeof(*ch));
+    ch->element = e;
+    ch->mod.element = e->index;
+    ch->mod.kind = kind;
+    ch->mod.name = name;
+    ch->mod.value = value;
+    return ch;
+}
+
+static void put(script_t* sc, uint8_t kind, dmvsi_var_t var, int32_t value)
+{
+    if (var == 0 || sc->action_count >= MAX_ACTIONS)
+        return;
+    dmvsi_action_t* a = &sc->actions[sc->action_count++];
+    memset(a, 0, sizeof(*a));
+    a->kind = kind;
+    a->var = var;
+    a->value = value;
+}
+
+/* A variable set, or animated (its transition) */
+static void put_to(script_t* sc, dmvsi_var_t var, int32_t value, uint16_t ms, const int16_t* easing)
+{
+    put(sc, (ms > 0) ? DMVSI_ACT_ANIMATE : DMVSI_ACT_SET, var, value);
+    if (ms > 0 && sc->action_count > 0 && sc->actions[sc->action_count - 1U].var == var)
+    {
+        sc->actions[sc->action_count - 1U].duration = ms;
+        memcpy(sc->actions[sc->action_count - 1U].easing, easing, 4 * sizeof(int16_t));
+    }
+}
+
+/* The actions of a change of one element: its variables to where the change puts it */
+static void apply(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
+{
+    change_t* ch = change(sc, e, kind, name, value);
+    if (ch == NULL)
+        return;
+    if (kind == MOD_CLASSES)
+    {
+        for (uint32_t i = 0; i < sc->lookvar_count; i++)
+        {
+            if (sc->lookvars[i].element == e)
+                put(sc, DMVSI_ACT_SET, sc->lookvars[i].var, (int32_t)ch->look_index);
+        }
+    }
+    else if (kind != MOD_STYLE)
+    {
+        classvar_t* cv = classvar(sc, e, name, false);
+        if (cv != NULL)
+            put(sc, DMVSI_ACT_SET, cv->var, (kind == MOD_CLASS_ADD) ? 1 : 0);
+    }
+    if (e->dynamic == NULL || ch->changed)
+        return;
+    int32_t ox, oy;
+    view_origin(sc->c, &ox, &oy);
+    dmvsi_rect_t r = group_rect(sc->c, e, ox, oy);
+    if (e->dynamic->bind[DMVSI_BIND_X] != 0)
+        put_to(sc, e->dynamic->bind[DMVSI_BIND_X], r.x + ch->dx, ch->move_ms, ch->move_easing);
+    if (e->dynamic->bind[DMVSI_BIND_Y] != 0)
+        put_to(sc, e->dynamic->bind[DMVSI_BIND_Y], r.y + ch->dy, ch->move_ms, ch->move_easing);
+    if (e->dynamic->bind[DMVSI_BIND_OPACITY] != 0)
+        put_to(sc, e->dynamic->bind[DMVSI_BIND_OPACITY], ch->opacity, ch->fade_ms, ch->fade_easing);
+}
+
+/* The changes of what variables hold: a change of each element they may hold */
+static int expand_held(script_t* sc)
+{
+    uint32_t count = sc->held_count;
+    for (uint32_t i = 0; i < count; i++)
+    {
+        held_t* h = &sc->held[i];
+        uint32_t objects[MAX_DOMAIN];
+        uint32_t n = dmvs_js_object_domain(sc->js, h->holder, objects, MAX_DOMAIN);
+        if (n > MAX_DOMAIN)
+        {
+            WARN(sc->c, "script: a variable that may hold too many elements - not converted\n");
+            n = MAX_DOMAIN;
+        }
+        sc->action_count = 0;
+        for (uint32_t k = 0; k < n; k++)
+        {
+            const handle_t* o = handle_at(sc, objects[k]);
+            if (o == NULL || o->kind != H_ELEMENT || o->element == NULL || sc->place_count >= MAX_PLACES ||
+                sc->action_count + 3U > MAX_ACTIONS)
+                continue;
+            place_t* p = &sc->places[sc->place_count];
+            if ((p->handler = dmvsi_new_handler(sc->c->doc)) == 0)
+                return -ENOMEM;
+            p->element = o->element;
+            p->kind = h->kind;
+            p->name = h->name;
+            p->value = h->value;
+            sc->place_count++;
+            put(sc, DMVSI_ACT_IF_EQ, h->holder, (int32_t)objects[k]);
+            memset(&sc->actions[sc->action_count], 0, sizeof(dmvsi_action_t));
+            sc->actions[sc->action_count].kind = DMVSI_ACT_CALL;
+            sc->actions[sc->action_count++].handler = p->handler;
+            memset(&sc->actions[sc->action_count], 0, sizeof(dmvsi_action_t));
+            sc->actions[sc->action_count++].kind = DMVSI_ACT_END;
+        }
+        h->actions = arena_alloc(&sc->c->arena, (sc->action_count + 1U) * sizeof(dmvsi_action_t));
+        if (h->actions == NULL)
+            return -ENOMEM;
+        memcpy(h->actions, sc->actions, sc->action_count * sizeof(dmvsi_action_t));
+        h->count = sc->action_count;
+    }
+    return 0;
+}
+
+/* ---- The page's scripts ---- */
+
+typedef struct
+{
+    node_t*         element;            /* An onclick="...": its element; NULL: a <script> */
+    dmvs_js_ast_t   ast;
+} program_t;
+
+typedef struct
+{
+    program_t       list[MAX_PROGRAMS];
+    uint32_t        count;
+} programs_t;
+
+static void parse_into(script_t* sc, programs_t* out, node_t* element, const char* text, size_t length)
+{
+    dmvs_js_error_t error;
+    if (out->count >= MAX_PROGRAMS)
+    {
+        WARN(sc->c, "script: too many scripts - the rest not converted\n");
+        return;
+    }
+    add_chars(sc, text, length);
+    dmvs_js_ast_t ast = dmvs_js_parse(text, length, &error);
+    if (ast == NULL)
+    {
+        WARN(sc->c, "script %u:%u: %s - not converted\n", (unsigned)error.line, (unsigned)error.column, error.message);
+        return;
+    }
+    out->list[out->count].element = element;
+    out->list[out->count++].ast = ast;
+}
 
-    /* The top level, as the page loads: the listeners it adds - what else it does is not converted */
-    sc->pass = PASS_EMIT;
-    sc->loading = true;
-    for (uint32_t p = 0; p < scripts.count; p++)
+/* The page's <script>s (inline JavaScript) and onclick="..." code, in document order */
+static void find_scripts(script_t* sc, node_t* n, programs_t* out, uint32_t depth)
+{
+    if (depth > 200U)
+        return;
+    for (node_t* k = n->first; k != NULL; k = k->next)
     {
-        for (const js_t* s = scripts.programs[p]; s != NULL; s = s->next)
+        if (k->kind != NODE_ELEMENT)
+            continue;
+        if (node_is(k, "script"))
         {
-            if (s->kind == S_EXPR && s->a != NULL && s->a->kind == J_ASSIGN && s->a->a != NULL &&
-                s->a->a->kind == J_MEMBER && s->a->a->a != NULL && is_name(s->a->a->a, "tailwind"))
-                continue;               /* tailwind.config = ...: read with the style sheets */
-            if (s->kind == S_EXPR || s->kind == S_IF)
-            {
-                sc->scope_count = 0;
-                run(sc, s);
-            }
-            else if (s->kind == S_UNKNOWN)
-                report(sc, s, "what the page does when it loads");
+            const char* type = node_attr(k, "type");
+            bool js = type == NULL || type[0] == '\0' || strcmp(type, "module") == 0 || strcmp(type, "text/javascript") == 0;
+            if (js && node_attr(k, "src") == NULL && k->first != NULL && k->first->kind == NODE_TEXT)
+                parse_into(sc, out, NULL, k->first->text, k->first->length);
+            continue;
         }
+        const char* onclick = node_attr(k, "onclick");
+        if (onclick != NULL && k->pseudo == PSEUDO_NONE)
+            parse_into(sc, out, k, onclick, strlen(onclick));
+        find_scripts(sc, k, out, depth + 1U);
     }
-    sc->loading = false;
-    sc->action_count = 0;
-    sc->scope_count = 0;
+}
 
+/* What a script changes: laid out, the elements' variables and looks (as before scripts were compiled) */
+static int lay_out_changes(script_t* sc)
+{
+    conv_t* c = sc->c;
     int status = 0;
-    sc->pass = PASS_DOMAINS;
-    handlers(sc, c->document, 0);
-    sc->pass = PASS_CHANGES;
-    handlers(sc, c->document, 0);
+    for (uint32_t i = 0; i < sc->place_count; i++)
+    {
+        const place_t* p = &sc->places[i];
+        if (change(sc, p->element, p->kind, p->name, p->value) == NULL)
+            WARN(c, "script: too many changes of elements - not converted\n");
+    }
     for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
         status = lay_out_change(sc, &sc->changes[i]);
     for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
@@ -2367,16 +1395,15 @@ int script_compile(conv_t* c)
             ch->look_index = lv->count;
         }
         else if (ch->look_index == 0)
-            WARN(c, "script: too many looks of #%s - not converted\n", (ch->element->id != NULL) ? ch->element->id : ch->element->tag);
+            WARN(c, "script: too many looks of #%s - not converted\n", label_of(ch->element));
     }
     for (uint32_t i = 0; i < sc->lookvar_count && status == 0; i++)
     {
         lookvar_t* lv = &sc->lookvars[i];
         node_t* e = lv->element;
         char name[48];
-        Dmod_SnPrintf(name, sizeof(name), "%s_look", (e->id != NULL) ? e->id : e->tag);
-        if ((lv->var = dmvsi_add_var(c->doc, name, 0)) == 0 ||
-            (e->dynamic == NULL && (e->dynamic = arena_alloc(&c->arena, sizeof(dynamic_t))) == NULL))
+        Dmod_SnPrintf(name, sizeof(name), "%s_look", label_of(e));
+        if ((lv->var = dmvsi_add_var(c->doc, name, 0)) == 0 || dynamic_of(sc, e) == NULL)
         {
             status = -ENOMEM;
             break;
@@ -2391,7 +1418,6 @@ int script_compile(conv_t* c)
     }
 
     /* Another look of a class: the class's variable, asked by the looks */
-    sc->pass = PASS_CHANGES;
     for (uint32_t i = 0; i < sc->change_count; i++)
     {
         change_t* ch = &sc->changes[i];
@@ -2400,28 +1426,9 @@ int script_compile(conv_t* c)
         if (ch->changed && ch->mod.kind != MOD_STYLE)
             (void)classvar(sc, ch->element, ch->mod.name, true);
         else if (ch->changed)
-            WARN(c, "script: a style that changes how #%s looks - not converted\n", (ch->element->id != NULL) ? ch->element->id : ch->element->tag);
+            WARN(c, "script: a style that changes how #%s looks - not converted\n", label_of(ch->element));
     }
 
-    /* The variables of the script: elements as their indices; the classes asked about */
-    for (uint32_t i = 0; i < sc->runtime_count && status == 0; i++)
-    {
-        runtime_t* rt = &sc->runtime[i];
-        char name[48];
-        size_t n = (rt->length < sizeof(name) - 1U) ? rt->length : sizeof(name) - 1U;
-        memcpy(name, rt->name, n);
-        name[n] = '\0';
-        if ((rt->var = dmvsi_add_var(c->doc, name, rt->initial)) == 0)
-            status = -ENOMEM;
-    }
-    for (uint32_t i = 0; i < sc->classvar_count && status == 0; i++)
-    {
-        classvar_t* cv = &sc->classvars[i];
-        char name[48];
-        Dmod_SnPrintf(name, sizeof(name), "%s_%s", (cv->element->id != NULL) ? cv->element->id : cv->element->tag, cv->name);
-        if ((cv->var = dmvsi_add_var(c->doc, name, has_class(cv->element, cv->name) ? 1 : 0)) == 0)
-            status = -ENOMEM;
-    }
     /* The looks: per element, its first class that changes how it looks, and being pressed */
     for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
     {
@@ -2431,22 +1438,166 @@ int script_compile(conv_t* c)
         for (uint32_t k = 0; k < i && first; k++)
             first = !(sc->changes[k].element == ch->element && sc->changes[k].changed && sc->changes[k].mod.kind != MOD_STYLE);
         if (first)
+            status = make_variants(sc, ch->element, ch, c->has_active && listened(sc, ch->element));
+    }
+    for (uint32_t i = 0; i < sc->click_count && status == 0; i++)
+    {
+        node_t* e = sc->clicks[i].element;
+        if (c->has_active && listened(sc, e) && (e->dynamic == NULL || e->dynamic->variant_count == 0))
+            status = make_variants(sc, e, NULL, true);
+    }
+    return status;
+}
+
+/*
+ * A call of a handler made, its actions in its place when they can be (no
+ * RETURN, room): dmview's calls are few (8 deep) - the click's, a change's
+ * are not one more
+ */
+static void put_call(script_t* sc, dmvsi_handler_t h)
+{
+    const dmvsi_action_t* a = NULL;
+    uint32_t n = dmvsi_handler_actions(sc->c->doc, h, &a);
+    bool inline_it = sc->action_count + n <= MAX_ACTIONS;
+    for (uint32_t i = 0; i < n && inline_it; i++)
+        inline_it = a[i].kind != DMVSI_ACT_RETURN;
+    if (inline_it)
+    {
+        memcpy(&sc->actions[sc->action_count], a, n * sizeof(dmvsi_action_t));
+        sc->action_count += n;
+        return;
+    }
+    if (sc->action_count >= MAX_ACTIONS)
+        return;
+    memset(&sc->actions[sc->action_count], 0, sizeof(dmvsi_action_t));
+    sc->actions[sc->action_count].kind = DMVSI_ACT_CALL;
+    sc->actions[sc->action_count++].handler = h;
+}
+
+/* The handlers made at the end: the changes', the clicks' */
+static int make_handlers(script_t* sc)
+{
+    for (uint32_t i = 0; i < sc->place_count; i++)
+    {
+        const place_t* p = &sc->places[i];
+        sc->action_count = 0;
+        apply(sc, p->element, p->kind, p->name, p->value);
+        if (dmvsi_set_handler(sc->c->doc, p->handler, sc->actions, sc->action_count) != 0)
+            return -EINVAL;
+    }
+    /* What variables hold: an IF for each element, its change in it */
+    for (uint32_t i = 0; i < sc->held_count; i++)
+    {
+        held_t* h = &sc->held[i];
+        sc->action_count = 0;
+        for (uint32_t k = 0; k < h->count; k++)
         {
-            bool pressable = c->has_active && (node_attr(ch->element, "onclick") != NULL || listened(sc, ch->element));
-            status = make_variants(sc, ch->element, ch, pressable);
+            if (h->actions[k].kind == DMVSI_ACT_CALL)
+                put_call(sc, h->actions[k].handler);
+            else if (sc->action_count < MAX_ACTIONS)
+                sc->actions[sc->action_count++] = h->actions[k];
         }
+        if (dmvsi_set_handler(sc->c->doc, h->handler, sc->actions, sc->action_count) != 0)
+            return -EINVAL;
     }
-    for (uint32_t i = 0; i < sc->clickable_count && status == 0; i++)
+    for (uint32_t i = 0; i < sc->click_count; i++)
     {
-        node_t* e = sc->clickables[i];
-        if (c->has_active && (e->dynamic == NULL || e->dynamic->variant_count == 0))
-            status = make_variants(sc, e, NULL, true);
+        click_t* k = &sc->clicks[i];
+        uint32_t n = (k->onclick != 0) ? 1U : 0U;
+        sc->action_count = 0;
+        if (k->onclick != 0)
+            put_call(sc, k->onclick);
+        for (uint32_t j = 0; j < k->count; j++, n++)
+            put_call(sc, k->calls[j]);
+        if (dmvsi_set_handler(sc->c->doc, k->handler, sc->actions, sc->action_count) != 0)
+            return -EINVAL;
+        node_t* e = k->element;
+        if (n > 0 && e->style != NULL && e->style->display != DISPLAY_NONE && dynamic_of(sc, e) != NULL)
+            e->dynamic->click = k->handler;
     }
-    if (status == 0)
+    return 0;
+}
+
+/* The elements' texts the scripts set: the characters they may show */
+static void texts(script_t* sc, node_t* n, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT)
+            continue;
+        if (k->dynamic != NULL && k->dynamic->text != 0)
+            k->dynamic->chars = chars_of(sc);
+        texts(sc, k, depth + 1U);
+    }
+}
+
+int script_compile(conv_t* c)
+{
+    script_t* sc = Dmod_Malloc(sizeof(*sc));
+    programs_t* programs = Dmod_Malloc(sizeof(*programs));
+    if (sc == NULL || programs == NULL)
+    {
+        Dmod_Free(sc);
+        Dmod_Free(programs);
+        return -ENOMEM;
+    }
+    memset(sc, 0, sizeof(*sc));
+    memset(programs, 0, sizeof(*programs));
+    sc->c = c;
+    find_scripts(sc, c->document, programs, 0);
+    int status = 0;
+    if (programs->count == 0)
+        goto done;
+
+    dmvs_js_host_t host;
+    memset(&host, 0, sizeof(host));
+    host.ctx = sc;
+    host.global = host_global;
+    host.get = host_get;
+    host.set = host_set;
+    host.call = host_call;
+    host.report = host_report;
+    host.flush = host_flush;
+    if ((sc->js = dmvs_js_compiler_new(c->doc, &host)) == NULL)
+    {
+        status = -ENOMEM;
+        goto done;
+    }
+    /* The onclick code first seen (what it assigns is a variable), the scripts, then the onclick code */
+    for (uint32_t i = 0; i < programs->count; i++)
+    {
+        if (programs->list[i].element != NULL)
+            (void)dmvs_js_scan(sc->js, programs->list[i].ast);
+    }
+    for (uint32_t i = 0; i < programs->count && status == 0; i++)
+    {
+        if (programs->list[i].element == NULL)
+            status = dmvs_js_compile(sc->js, programs->list[i].ast);
+        else
+            (void)dmvs_js_scan(sc->js, programs->list[i].ast);         /* The compiler's to free, too */
+    }
+    for (uint32_t i = 0; i < programs->count && status == 0; i++)
     {
-        sc->pass = PASS_EMIT;
-        handlers(sc, c->document, 0);
+        node_t* e = programs->list[i].element;
+        if (e == NULL)
+            continue;
+        click_t* k = click_of(sc, e);
+        if (k != NULL)
+            k->onclick = dmvs_js_compile_handler(sc->js, programs->list[i].ast, handle(sc, H_ELEMENT, e, 0));
     }
+    if (status == 0)
+        status = dmvs_js_finish(sc->js);
+    if (status == 0)
+        status = expand_held(sc);
+    if (status == 0)
+        status = lay_out_changes(sc);
+    if (status == 0)
+        status = make_handlers(sc);
+    texts(sc, c->document, 0);
+    dmvs_js_compiler_free(sc->js);
+
+done:
+    Dmod_Free(programs);
     Dmod_Free(sc);
-    return c->arena.failed ? -ENOMEM : status;
+    return (c->arena.failed && status == 0) ? -ENOMEM : status;
 }
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index beace59..0a0d239 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -247,6 +247,30 @@ static int32_t var_initial(dmvsi_doc_t doc, dmvsi_var_t var)
     return v;
 }
 
+
+/* A handler's actions with the handlers it calls in their place (scripts are compiled into calls) */
+static dmvsi_action_t g_flat[256];
+
+static uint32_t flatten_into(dmvsi_doc_t doc, dmvsi_handler_t h, uint32_t n, uint32_t depth)
+{
+    const dmvsi_action_t* a = NULL;
+    uint32_t count = dmvsi_handler_actions(doc, h, &a);
+    for (uint32_t i = 0; i < count && n < 256u; i++)
+    {
+        if (a[i].kind == DMVSI_ACT_CALL && depth < 8u)
+            n = flatten_into(doc, a[i].handler, n, depth + 1U);
+        else
+            g_flat[n++] = a[i];
+    }
+    return n;
+}
+
+static uint32_t flat_actions(dmvsi_doc_t doc, dmvsi_handler_t h, const dmvsi_action_t** actions)
+{
+    *actions = g_flat;
+    return flatten_into(doc, h, 0, 0);
+}
+
 DMOD_TEST_STEP(dmvs_html_converts_what_scripts_do)
 {
     int status = -1;
@@ -291,7 +315,7 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_do)
     if (open != NULL && win != NULL && home != NULL)
     {
         const dmvsi_action_t* a = NULL;
-        uint32_t n = dmvsi_handler_actions(doc, open->click, &a);
+        uint32_t n = flat_actions(doc, open->click, &a);
         DMOD_TEST_EXPECT_EQ(n, 3u);
         DMOD_TEST_EXPECT_TRUE(n >= 3 && a[0].kind == DMVSI_ACT_ANIMATE && a[0].var == win->bind[DMVSI_BIND_Y] && a[0].value == 0 &&
                               a[0].duration == 300 && a[0].easing[2] == 580);
@@ -310,7 +334,7 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_do)
     if (close != NULL)
     {
         const dmvsi_action_t* a = NULL;
-        uint32_t n = dmvsi_handler_actions(doc, close->click, &a);
+        uint32_t n = flat_actions(doc, close->click, &a);
         DMOD_TEST_EXPECT_TRUE(n >= 6 && a[0].kind == DMVSI_ACT_IF_NE && a[0].value == 0);
         DMOD_TEST_EXPECT_TRUE(n >= 6 && a[1].kind == DMVSI_ACT_IF_EQ);                     /* current is the window */
         DMOD_TEST_EXPECT_TRUE(n >= 6 && a[2].kind == DMVSI_ACT_ANIMATE && a[2].value == DMVSI_PX(100));
@@ -323,9 +347,10 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_do)
     if (light != NULL)
     {
         const dmvsi_action_t* a = NULL;
-        uint32_t n = dmvsi_handler_actions(doc, light->click, &a);
-        DMOD_TEST_EXPECT_TRUE(n == 9 && a[0].kind == DMVSI_ACT_TOGGLE && a[1].kind == DMVSI_ACT_IF_NE);
-        DMOD_TEST_EXPECT_TRUE(n == 9 && a[3].kind == DMVSI_ACT_SET && a[3].value == DMVSI_PX(30));    /* no transition: at once */
+        uint32_t n = flat_actions(doc, light->click, &a);
+        DMOD_TEST_EXPECT_TRUE(n == 8 && a[0].kind == DMVSI_ACT_TOGGLE && a[1].kind == DMVSI_ACT_IF_NE);
+        DMOD_TEST_EXPECT_TRUE(n == 8 && a[3].kind == DMVSI_ACT_SET && a[3].value == DMVSI_PX(30));    /* no transition: at once */
+        DMOD_TEST_EXPECT_TRUE(n == 8 && a[4].kind == DMVSI_ACT_ELSE && a[6].value == 0 && a[7].kind == DMVSI_ACT_END);
     }
     dmvsi_free(doc);
 }
@@ -473,7 +498,7 @@ DMOD_TEST_STEP(dmvs_html_converts_listeners)
     if (a != NULL && b != NULL)
     {
         const dmvsi_action_t* acts = NULL;
-        uint32_t n = dmvsi_handler_actions(doc, b->click, &acts);
+        uint32_t n = flat_actions(doc, b->click, &acts);
         bool sets = false;
         for (uint32_t i = 0; i < n; i++)
             sets = sets || acts[i].kind == DMVSI_ACT_SET;
@@ -481,3 +506,94 @@ DMOD_TEST_STEP(dmvs_html_converts_listeners)
     }
     dmvsi_free(doc);
 }
+
+/* The first text node shown by a variable */
+static const dmvsi_node_t* text_of_var(const dmvsi_node_t* n, dmvsi_var_t var)
+{
+    for (; n != NULL; n = n->next)
+    {
+        if (n->kind == DMVSI_NODE_TEXT && n->u.text.var == var && var != 0)
+            return n;
+        if (n->kind == DMVSI_NODE_GROUP)
+        {
+            const dmvsi_node_t* f = text_of_var(n->first, var);
+            if (f != NULL)
+                return f;
+        }
+    }
+    return NULL;
+}
+
+/* A variable by its name */
+static dmvsi_var_t var_named(dmvsi_doc_t doc, const char* name)
+{
+    dmvsi_var_info_t info;
+    for (dmvsi_var_t v = 1; dmvsi_var_info(doc, v, &info) == 0; v++)
+        if (strcmp(info.name, name) == 0)
+            return v;
+    return 0;
+}
+
+DMOD_TEST_STEP(dmvs_html_converts_texts_and_timers)
+{
+    int status = -1;
+    DMOD_TEST_EXPECT_TRUE(write_file(TEST_FILE("texts.html"),
+        "<!DOCTYPE html><html><head><style>"
+        "body { margin: 0; font-family: sans-serif } #screen { width: 200px; height: 100px }"
+        "#speed { width: 100px; text-align: center; font-size: 20px } #temp { width: 80px }"
+        "</style></head><body><div id=\"screen\">"
+        "<div id=\"speed\"></div><div id=\"temp\">21.5\xC2\xB0" "C</div>"
+        "<div id=\"up\" style=\"width: 20px; height: 20px\"></div>"
+        "</div><script>"
+        "const speedText = document.getElementById('speed');\n"
+        "let speed = 0;\n"
+        "const interval = setInterval(() => {\n"
+        "  speed += 2;\n"
+        "  if (speed >= 68) { speed = 68; clearInterval(interval); }\n"
+        "  speedText.innerText = speed;\n"
+        "}, 35);\n"
+        "const t = document.getElementById('temp');\n"
+        "document.getElementById('up').addEventListener('click', () => {\n"
+        "  t.innerText = (parseFloat(t.innerText) + 0.5).toFixed(1) + '\xC2\xB0" "C';\n"
+        "});\n"
+        "</script></body></html>"));
+    dmvsi_doc_t doc = convert(TEST_FILE("texts.html"), "screen", 0, 0, &status);
+    DMOD_TEST_EXPECT_EQ(status, 0);
+    if (doc == NULL)
+        return;
+    const dmvsi_node_t* root = dmvsi_root(doc);
+
+    /* #speed: empty at first - a text of its variable, centred in its box (the scripts' characters: in its font) */
+    dmvsi_var_t speed = var_named(doc, "speed_text");
+    const dmvsi_node_t* st = text_of_var(root, speed);
+    DMOD_TEST_EXPECT_TRUE(speed != 0 && st != NULL);
+    if (st != NULL)
+    {
+        DMOD_TEST_EXPECT_TRUE(st->u.text.align == DMVSI_TEXT_CENTER && st->u.text.width == DMVSI_PX(100));
+    }
+    /* #temp: its text and its number (21.5) - the click sets both */
+    dmvsi_var_t temp = var_named(doc, "temp_text");
+    dmvsi_var_t number = var_named(doc, "temp_number");
+    DMOD_TEST_EXPECT_TRUE(text_of_var(root, temp) != NULL && var_initial(doc, number) == 21500);
+    dmvsi_var_info_t info;
+    DMOD_TEST_EXPECT_TRUE(dmvsi_var_info(doc, temp, &info) == 0 && strcmp(info.text, "21.5\xC2\xB0" "C") == 0);
+    const dmvsi_node_t* up = group_named(root->first, "up");
+    DMOD_TEST_EXPECT_TRUE(up != NULL && up->click != 0);
+    if (up != NULL)
+    {
+        const dmvsi_action_t* a = NULL;
+        uint32_t n = flat_actions(doc, up->click, &a);
+        bool sets_text = false, sets_number = false;
+        for (uint32_t i = 0; i < n; i++)
+        {
+            sets_text = sets_text || (a[i].kind == DMVSI_ACT_SET && a[i].var == temp);
+            sets_number = sets_number || (a[i].kind == DMVSI_ACT_SET && a[i].var == number);
+        }
+        DMOD_TEST_EXPECT_TRUE(sets_text && sets_number);
+    }
+    /* The interval: a timer of the view */
+    uint16_t ms = 0;
+    dmvsi_handler_t h = 0;
+    DMOD_TEST_EXPECT_TRUE(dmvsi_timer_at(doc, 0, &ms, &h) && ms >= 10 && ms <= 50 && h != 0);
+    dmvsi_free(doc);
+}

From 2d361c26f2e257b38a14f0bd4c8a447fc081cf6f Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 14:11:41 +0200
Subject: [PATCH 02/11] dmvs_html: a script's text - room in the first wider
 ancestor; undefined not set

A text a script sets in a box as wide as its text (a flex item, its
column as narrow) gets the room of the first wider ancestor, placed as
the box is in it - centred, at its right, or from where it is: the car
HMI's speed was "6" of 68. A text that is undefined is not set.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/paint.c  | 33 +++++++++++++++++++++++++++++++++
 src/script.c |  2 ++
 2 files changed, 35 insertions(+)

diff --git a/src/paint.c b/src/paint.c
index 72facc4..ddd9845 100644
--- a/src/paint.c
+++ b/src/paint.c
@@ -535,6 +535,39 @@ static void paint_text_var(painter_t* p, const node_t* block, const node_t* e, c
         t.x = e->box.ax - p->ox + p->dx + e->box.b[3] + e->box.p[3];
         t.width = e->box.w - e->box.b[1] - e->box.b[3] - e->box.p[1] - e->box.p[3];
         t.align = (st->text_align == TEXT_CENTER) ? DMVSI_TEXT_CENTER : (st->text_align == TEXT_RIGHT) ? DMVSI_TEXT_RIGHT : DMVSI_TEXT_LEFT;
+        /*
+         * A box as wide as its text (a flex item, a float): the text it gets may be
+         * longer - room in its parent's content box, placed as the box is in it
+         * (in its middle: centred; at its right: right-aligned; else from where it is)
+         */
+        /* (its parent as narrow too - a column of such items: the first that is wider) */
+        const node_t* q = e->parent;
+        int32_t qx = 0, qw = 0;
+        for (uint32_t up = 0; q != NULL && q->kind == NODE_ELEMENT && q->box.laid_out && up < 4u; q = q->parent, up++)
+        {
+            qx = q->box.ax - p->ox + p->dx + q->box.b[3] + q->box.p[3];
+            qw = q->box.w - q->box.b[1] - q->box.b[3] - q->box.p[1] - q->box.p[3];
+            if (qw > t.width + 2 * DMVSI_UNIT)
+                break;
+        }
+        if (q != NULL && q->kind == NODE_ELEMENT && q->box.laid_out && t.align == DMVSI_TEXT_LEFT)
+        {
+            int32_t mid = t.x + t.width / 2, qmid = qx + qw / 2;
+            if (qw > t.width)
+            {
+                if (mid - qmid <= DMVSI_UNIT && qmid - mid <= DMVSI_UNIT)
+                {
+                    t.x = qx;
+                    t.align = DMVSI_TEXT_CENTER;
+                }
+                else if ((qx + qw) - (t.x + t.width) <= DMVSI_UNIT)
+                {
+                    t.x = qx;
+                    t.align = DMVSI_TEXT_RIGHT;
+                }
+                t.width = (t.align == DMVSI_TEXT_LEFT) ? qx + qw - t.x : qw;
+            }
+        }
     }
     else
         t.x = block->box.ax - p->ox + p->dx + ((f != NULL) ? f->x : 0);
diff --git a/src/script.c b/src/script.c
index eae255d..ba5b616 100644
--- a/src/script.c
+++ b/src/script.c
@@ -447,6 +447,8 @@ static dynamic_t* text_of(script_t* sc, node_t* e)
 
 static void set_text(script_t* sc, node_t* e, const dmvs_js_value_t* v)
 {
+    if (v->kind == DMVS_JS_V_UNDEFINED)
+        return;                             /* What was not converted (reported): the text stays */
     dynamic_t* d = text_of(sc, e);
     if (d == NULL || d->text == 0)
         return;

From 58802bcebbe343293ad452cf486d689c27bc1681 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 14:38:19 +0200
Subject: [PATCH 03/11] dmvs_html: innerHTML of text in what holds no elements
 - its text

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/script.c | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/script.c b/src/script.c
index ba5b616..be4deb8 100644
--- a/src/script.c
+++ b/src/script.c
@@ -661,6 +661,18 @@ static int host_set(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* obj
         set_text(sc, e, value);
         return 0;
     }
+    if (strcmp(name, "innerHTML") == 0)
+    {
+        /* Text (its character references decoded by the compiler) in what holds no elements: its text */
+        const char* text = static_text(sc, value);
+        bool elements = false;
+        for (const node_t* k = e->first; k != NULL && !elements; k = k->next)
+            elements = k->kind == NODE_ELEMENT;
+        if (elements || (text != NULL && strchr(text, '<') != NULL))
+            return -ENOTSUP;                /* Elements made or replaced */
+        set_text(sc, e, value);
+        return 0;
+    }
     if (strcmp(name, "onclick") == 0)
         return add_listener(sc, e, value);
     return -ENOTSUP;

From 7391a70b427023025040c8f629a9f8a74fcf1b7f Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 14:48:59 +0200
Subject: [PATCH 04/11] dmvs_html: what scripts build as the page loads is part
 of the page

The scripts' loading evaluated by dmvs_js (every variable known,
functions run at each call): the elements they make - createElement,
className, innerHTML of markup, appendChild - recorded as operations on
the page's elements, applied each time it is laid out (its states too).
A made element is marked data-dmvs-built="k": the compilation's k-th
createElement() is it, so its listeners are its clicks; what it sets of
it (className, innerHTML, appendChild, emptying its list) is as it was.
The car HMI's playlist: its five songs, the current one highlighted.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CMakeLists.txt         |   1 +
 Makefile               |   2 +-
 README.md              |  10 +-
 src/build.c            | 567 +++++++++++++++++++++++++++++++++++++++++
 src/dmvs_html.c        |  31 +++
 src/private.h          |  15 ++
 src/script.c           |  47 ++++
 tests/dmvs_html_test.c |  66 +++++
 8 files changed, 737 insertions(+), 2 deletions(-)
 create mode 100644 src/build.c

diff --git a/CMakeLists.txt b/CMakeLists.txt
index de55f2f..558f2fb 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -71,6 +71,7 @@ dmod_add_library(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
     src/paint.c
     src/svg.c
     src/script.c
+    src/build.c
 )
 
 dmod_link_modules(${DMOD_MODULE_NAME}
diff --git a/Makefile b/Makefile
index 519e4ca..94dfe80 100644
--- a/Makefile
+++ b/Makefile
@@ -24,7 +24,7 @@ DMOD_MODULE_VERSION=0.1
 DMOD_AUTHOR_NAME=Patryk Kubiak
 
 # The list of C sources
-DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/svg.c src/script.c
+DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/svg.c src/script.c src/build.c
 
 # The list of C++ sources
 DMOD_CXXSOURCES=
diff --git a/README.md b/README.md
index 404a68f..ab3e939 100644
--- a/README.md
+++ b/README.md
@@ -122,8 +122,16 @@ up.addEventListener('click', () =>               // parseFloat(innerText): the n
   `onclick="..."` are a click handler. `this` is the element, and
   `el.click()` runs its handlers.
 
+- **What scripts build as the page loads** (`createElement`, `className`,
+  `innerHTML` with markup, `appendChild`; a list rendered from an array)
+  is part of the page. dmvs_js evaluates the loading as a browser runs
+  it, the elements are laid out with the page, and their listeners are
+  clicks (`div.onclick = () => play(i)`). A list rebuilt later stays as
+  it was when the page loaded.
+- `innerHTML` set to text (`'22.0&deg;'`) is the element's text.
+
 What's reported and left out:
-- elements made or replaced (`createElement`, `innerHTML`);
+- elements made or replaced later, while the view runs;
 - `src`, `setAttribute`;
 - a style known only at runtime;
 - a style that changes how an element looks (other than its opacity);
diff --git a/src/build.c b/src/build.c
new file mode 100644
index 0000000..19908d2
--- /dev/null
+++ b/src/build.c
@@ -0,0 +1,567 @@
+#include "private.h"
+#include "dmvs_js.h"
+#include <errno.h>
+#include <string.h>
+
+/*
+ * What the scripts build: the elements they make as the page loads
+ * (createElement, className, innerHTML, appendChild - a list of a
+ * playlist's songs) are what the page is when it is shown. dmvs_js
+ * evaluates the loading as a browser runs it (every variable known,
+ * functions run at each call, listeners and timers not); what it does to
+ * the DOM is recorded here - operations on the elements of the page as it
+ * is parsed (dom_t), applied each time it is laid out (a state of it too).
+ *
+ * An element made is marked data-dmvs-built="k" (the k-th
+ * document.createElement()): the scripts' compilation finds it there.
+ */
+
+#define MAX_MADE            64u
+#define MAX_CHILDREN        32u
+#define MAX_PARENTS         16u
+#define MARKUP_SIZE         16384u
+
+#define B_DOCUMENT          1u
+#define B_IGNORED           2u              /* What building does not care about (style, tailwind, ...) */
+#define B_EXISTING          0x100000u       /* + an element's index */
+#define B_MADE              0x200000u       /* + k (1 ...) */
+#define B_MADE_CLASSES      0x300000u       /* + k: its classList */
+
+typedef struct
+{
+    char*       tag;
+    char*       classes;                    /* Space-separated */
+    char*       id;
+    char*       text;                       /* textContent (escaped when written) */
+    char*       html;                       /* innerHTML (as it is) */
+    char*       attrs;                      /* ' name="value"' ... */
+    uint32_t    children[MAX_CHILDREN];     /* Made elements appended to it (k) */
+    uint32_t    child_count;
+    bool        appended;
+} made_t;
+
+/* An element of the page the scripts change: emptied, and what is appended to it */
+typedef struct
+{
+    uint32_t    index;
+    bool        clear;
+    char*       html;                       /* innerHTML set to markup */
+    uint32_t    children[MAX_CHILDREN];
+    uint32_t    child_count;
+} parent_t;
+
+typedef struct
+{
+    conv_t*             c;
+    made_t              made[MAX_MADE];
+    uint32_t            made_count;
+    parent_t            parents[MAX_PARENTS];
+    uint32_t            parent_count;
+} builder_t;
+
+static dmvs_js_value_t object(uint32_t h)
+{
+    dmvs_js_value_t v;
+    memset(&v, 0, sizeof(v));
+    v.kind = (h != 0) ? DMVS_JS_V_OBJECT : DMVS_JS_V_NULL;
+    v.object = h;
+    return v;
+}
+
+static dmvs_js_value_t string(const char* s)
+{
+    dmvs_js_value_t v;
+    memset(&v, 0, sizeof(v));
+    v.kind = DMVS_JS_V_STRING;
+    v.text = s;
+    v.length = strlen(s);
+    return v;
+}
+
+static node_t* by_index(node_t* n, uint32_t index, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT)
+            continue;
+        if (k->index == index)
+            return k;
+        node_t* found = by_index(k, index, depth + 1U);
+        if (found != NULL)
+            return found;
+    }
+    return NULL;
+}
+
+static node_t* existing(builder_t* b, uint32_t h)
+{
+    return (h > B_EXISTING && h < B_MADE) ? by_index(b->c->document, h - B_EXISTING, 0) : NULL;
+}
+
+static made_t* made_of(builder_t* b, uint32_t h)
+{
+    return (h > B_MADE && h <= B_MADE + b->made_count) ? &b->made[h - B_MADE - 1U] : NULL;
+}
+
+static dmvs_js_value_t element(node_t* e)
+{
+    return object((e != NULL) ? B_EXISTING + e->index : 0);
+}
+
+static char* copy(builder_t* b, const char* s)
+{
+    return arena_strndup(&b->c->arena, s, strlen(s));
+}
+
+static const char* text_of(const dmvs_js_value_t* v, char* buffer, size_t size)
+{
+    if (v->kind == DMVS_JS_V_STRING)
+        return v->text;
+    if (v->kind == DMVS_JS_V_NUMBER)
+    {
+        Dmod_SnPrintf(buffer, size, "%d", (int)v->number);
+        return buffer;
+    }
+    return NULL;
+}
+
+static parent_t* parent_of(builder_t* b, node_t* e)
+{
+    for (uint32_t i = 0; i < b->parent_count; i++)
+    {
+        if (b->parents[i].index == e->index)
+            return &b->parents[i];
+    }
+    if (b->parent_count >= MAX_PARENTS)
+        return NULL;
+    parent_t* p = &b->parents[b->parent_count++];
+    memset(p, 0, sizeof(*p));
+    p->index = e->index;
+    return p;
+}
+
+/* The text an element shows: its text nodes' */
+static size_t content(const node_t* n, char* out, size_t size, size_t at, uint32_t depth)
+{
+    for (const node_t* k = n->first; k != NULL && depth < 64U; k = k->next)
+    {
+        if (k->kind == NODE_TEXT)
+            for (size_t i = 0; i < k->length && at + 1U < size; i++)
+                out[at++] = k->text[i];
+        else if (k->kind == NODE_ELEMENT)
+            at = content(k, out, size, at, depth + 1U);
+    }
+    out[(at < size) ? at : size - 1U] = '\0';
+    return at;
+}
+
+/* ---- The host: what building cares about ---- */
+
+static bool b_global(void* ctx, dmvs_js_compiler_t c, const char* name, dmvs_js_value_t* value)
+{
+    (void)ctx;
+    (void)c;
+    if (strcmp(name, "document") == 0)
+        *value = object(B_DOCUMENT);
+    else if (strcmp(name, "tailwind") == 0 || strcmp(name, "window") == 0)
+        *value = object(B_IGNORED);
+    else
+        return false;
+    return true;
+}
+
+static int b_get(void* ctx, dmvs_js_compiler_t c, const dmvs_js_value_t* obj, const char* name, dmvs_js_value_t* value)
+{
+    builder_t* b = ctx;
+    (void)c;
+    uint32_t h = (obj->kind == DMVS_JS_V_OBJECT) ? obj->object : 0;
+    node_t* e = existing(b, h);
+    made_t* m = made_of(b, h);
+    if (h == B_DOCUMENT && strcmp(name, "body") == 0)
+    {
+        node_t* body = NULL;
+        node_t* found[1];
+        if (css_select(b->c, "body", b->c->document, found, 1) == 1)
+            body = found[0];
+        *value = element(body);
+        return 0;
+    }
+    if (m != NULL && strcmp(name, "classList") == 0)
+    {
+        *value = object(B_MADE_CLASSES + (h - B_MADE));
+        return 0;
+    }
+    if (e != NULL && (strcmp(name, "innerText") == 0 || strcmp(name, "textContent") == 0))
+    {
+        char text[256];
+        content(e, text, sizeof(text), 0, 0);
+        *value = string(copy(b, text));
+        return 0;
+    }
+    if (e != NULL && strcmp(name, "id") == 0)
+    {
+        *value = string((e->id != NULL) ? e->id : "");
+        return 0;
+    }
+    *value = object(B_IGNORED);                 /* style, classList of the page's, ...: not what is built */
+    return 0;
+}
+
+static int b_set(void* ctx, dmvs_js_compiler_t c, const dmvs_js_value_t* obj, const char* name, const dmvs_js_value_t* value)
+{
+    builder_t* b = ctx;
+    (void)c;
+    char number[24];
+    uint32_t h = (obj->kind == DMVS_JS_V_OBJECT) ? obj->object : 0;
+    const char* text = text_of(value, number, sizeof(number));
+    made_t* m = made_of(b, h);
+    node_t* e = existing(b, h);
+    if (text == NULL)
+        return 0;
+    if (m != NULL)
+    {
+        if (strcmp(name, "className") == 0)
+            m->classes = copy(b, text);
+        else if (strcmp(name, "id") == 0)
+            m->id = copy(b, text);
+        else if (strcmp(name, "innerHTML") == 0)
+            m->html = copy(b, text);
+        else if (strcmp(name, "textContent") == 0 || strcmp(name, "innerText") == 0)
+            m->text = copy(b, text);
+        return 0;
+    }
+    if (e != NULL && strcmp(name, "innerHTML") == 0)
+    {
+        /* Emptied (a list rendered anew), or its markup */
+        parent_t* p = parent_of(b, e);
+        if (p != NULL)
+        {
+            p->clear = true;
+            p->child_count = 0;
+            p->html = (text[0] != '\0') ? copy(b, text) : NULL;
+        }
+    }
+    return 0;
+}
+
+static int b_call(void* ctx, dmvs_js_compiler_t c, const dmvs_js_value_t* obj, const char* method,
+                  const dmvs_js_value_t* args, uint32_t count, dmvs_js_value_t* result)
+{
+    builder_t* b = ctx;
+    char number[24];
+    uint32_t h = (obj->kind == DMVS_JS_V_OBJECT) ? obj->object : 0;
+    const char* a0 = (count > 0) ? text_of(&args[0], number, sizeof(number)) : NULL;
+    memset(result, 0, sizeof(*result));
+    if (h == B_DOCUMENT && strcmp(method, "getElementById") == 0 && a0 != NULL)
+    {
+        *result = element(find_id(b->c->document, a0, 0));
+        return 0;
+    }
+    if ((h == B_DOCUMENT || existing(b, h) != NULL) && a0 != NULL &&
+        (strcmp(method, "querySelector") == 0 || strcmp(method, "querySelectorAll") == 0))
+    {
+        node_t* found[32];
+        node_t* under = (h == B_DOCUMENT) ? b->c->document : existing(b, h);
+        uint32_t n = css_select(b->c, a0, under, found, 32);
+        if (method[13] != 'A')
+        {
+            *result = element((n > 0) ? found[0] : NULL);
+            return 0;
+        }
+        dmvs_js_value_t list[32];
+        for (uint32_t i = 0; i < n; i++)
+            list[i] = element(found[i]);
+        return dmvs_js_array(c, list, n, result);
+    }
+    if (h == B_DOCUMENT && strcmp(method, "createElement") == 0 && a0 != NULL)
+    {
+        if (b->made_count >= MAX_MADE)
+            return 0;
+        made_t* m = &b->made[b->made_count++];
+        memset(m, 0, sizeof(*m));
+        m->tag = copy(b, a0);
+        *result = object(B_MADE + b->made_count);
+        return 0;
+    }
+    if (strcmp(method, "appendChild") == 0 && count == 1 && args[0].kind == DMVS_JS_V_OBJECT)
+    {
+        made_t* child = made_of(b, args[0].object);
+        made_t* m = made_of(b, h);
+        node_t* e = existing(b, h);
+        uint32_t k = args[0].object - B_MADE;
+        if (child == NULL || child->appended)
+            return 0;
+        if (m != NULL && m->child_count < MAX_CHILDREN)
+            m->children[m->child_count++] = k;
+        else if (e != NULL)
+        {
+            parent_t* p = parent_of(b, e);
+            if (p == NULL || p->child_count >= MAX_CHILDREN)
+                return 0;
+            p->children[p->child_count++] = k;
+        }
+        else
+            return 0;
+        child->appended = true;
+        *result = args[0];
+        return 0;
+    }
+    if (h > B_MADE_CLASSES && h <= B_MADE_CLASSES + b->made_count && a0 != NULL && strcmp(method, "add") == 0)
+    {
+        made_t* m = &b->made[h - B_MADE_CLASSES - 1U];
+        size_t n = (m->classes != NULL) ? strlen(m->classes) : 0;
+        char* joined = arena_alloc(&b->c->arena, n + strlen(a0) + 2U);
+        if (joined != NULL)
+        {
+            Dmod_SnPrintf(joined, n + strlen(a0) + 2U, "%s%s%s", (n > 0) ? m->classes : "", (n > 0) ? " " : "", a0);
+            m->classes = joined;
+        }
+        return 0;
+    }
+    if (strcmp(method, "setAttribute") == 0 && count == 2 && made_of(b, h) != NULL && a0 != NULL)
+    {
+        made_t* m = made_of(b, h);
+        char v[24];
+        const char* value = text_of(&args[1], v, sizeof(v));
+        if (value != NULL && strchr(value, '"') == NULL)
+        {
+            size_t n = (m->attrs != NULL) ? strlen(m->attrs) : 0;
+            size_t size = n + strlen(a0) + strlen(value) + 5U;
+            char* attrs = arena_alloc(&b->c->arena, size);
+            if (attrs != NULL)
+            {
+                Dmod_SnPrintf(attrs, size, "%s %s=\"%s\"", (n > 0) ? m->attrs : "", a0, value);
+                m->attrs = attrs;
+            }
+        }
+        return 0;
+    }
+    return 0;                                   /* Not what is built */
+}
+
+static void b_report(void* ctx, uint32_t line, uint32_t column, const char* message)
+{
+    (void)ctx;
+    (void)line;
+    (void)column;
+    (void)message;                              /* The compilation reports it */
+}
+
+/* ---- The markup of what was made ---- */
+
+typedef struct
+{
+    char*   out;
+    size_t  n;
+    bool    full;
+} markup_t;
+
+static void put(markup_t* m, const char* s, bool escape)
+{
+    for (; *s != '\0'; s++)
+    {
+        const char* e = NULL;
+        if (escape)
+            e = (*s == '<') ? "&lt;" : (*s == '>') ? "&gt;" : (*s == '&') ? "&amp;" : (*s == '"') ? "&quot;" : NULL;
+        size_t len = (e != NULL) ? strlen(e) : 1U;
+        if (m->n + len + 1U >= MARKUP_SIZE)
+        {
+            m->full = true;
+            return;
+        }
+        memcpy(m->out + m->n, (e != NULL) ? e : s, len);
+        m->n += len;
+    }
+    m->out[m->n] = '\0';
+}
+
+static void write_made(builder_t* b, markup_t* m, uint32_t k, uint32_t depth)
+{
+    const made_t* e = &b->made[k - 1U];
+    char mark[32];
+    if (depth > 16U)
+        return;
+    put(m, "<", false);
+    put(m, e->tag, true);
+    Dmod_SnPrintf(mark, sizeof(mark), " data-dmvs-built=\"%u\"", (unsigned)k);
+    put(m, mark, false);
+    if (e->classes != NULL)
+    {
+        put(m, " class=\"", false);
+        put(m, e->classes, true);
+        put(m, "\"", false);
+    }
+    if (e->id != NULL)
+    {
+        put(m, " id=\"", false);
+        put(m, e->id, true);
+        put(m, "\"", false);
+    }
+    if (e->attrs != NULL)
+        put(m, e->attrs, false);
+    put(m, ">", false);
+    if (e->html != NULL)
+        put(m, e->html, false);
+    else if (e->text != NULL)
+        put(m, e->text, true);
+    for (uint32_t i = 0; i < e->child_count; i++)
+        write_made(b, m, e->children[i], depth + 1U);
+    put(m, "</", false);
+    put(m, e->tag, true);
+    put(m, ">", false);
+}
+
+/* ---- Building ---- */
+
+static void find_scripts(conv_t* c, node_t* n, dmvs_js_compiler_t js, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT)
+            continue;
+        if (node_is(k, "script"))
+        {
+            const char* type = node_attr(k, "type");
+            bool is_js = type == NULL || type[0] == '\0' || strcmp(type, "module") == 0 || strcmp(type, "text/javascript") == 0;
+            if (is_js && node_attr(k, "src") == NULL && k->first != NULL && k->first->kind == NODE_TEXT)
+            {
+                dmvs_js_error_t error;
+                dmvs_js_ast_t ast = dmvs_js_parse(k->first->text, k->first->length, &error);
+                if (ast != NULL)
+                    (void)dmvs_js_compile(js, ast);
+            }
+            continue;
+        }
+        find_scripts(c, k, js, depth + 1U);
+    }
+}
+
+int script_build(conv_t* c, conv_t* into)
+{
+    builder_t* b = Dmod_Malloc(sizeof(*b));
+    if (b == NULL)
+        return -ENOMEM;
+    memset(b, 0, sizeof(*b));
+    b->c = c;
+    dmvs_js_host_t host;
+    memset(&host, 0, sizeof(host));
+    host.ctx = b;
+    host.global = b_global;
+    host.get = b_get;
+    host.set = b_set;
+    host.call = b_call;
+    host.report = b_report;
+    dmvs_js_compiler_t js = dmvs_js_evaluator_new(&host);
+    if (js == NULL)
+    {
+        Dmod_Free(b);
+        return -ENOMEM;
+    }
+    find_scripts(c, c->document, js, 0);
+
+    /* What the page's elements are given: operations of `into` */
+    int status = 0;
+    dom_t* ops = (b->parent_count > 0) ? arena_alloc(&into->arena, b->parent_count * sizeof(dom_t)) : NULL;
+    char* buffer = (b->parent_count > 0) ? Dmod_Malloc(MARKUP_SIZE) : NULL;
+    uint32_t count = 0;
+    for (uint32_t i = 0; i < b->parent_count && ops != NULL && buffer != NULL; i++)
+    {
+        const parent_t* p = &b->parents[i];
+        markup_t m = { buffer, 0, false };
+        buffer[0] = '\0';
+        if (p->html != NULL)
+            put(&m, p->html, false);
+        for (uint32_t k = 0; k < p->child_count; k++)
+            write_made(b, &m, p->children[k], 0);
+        if (m.full)
+            WARN(c, "script: what a script builds in #%u is too large - not converted\n", (unsigned)p->index);
+        if ((!p->clear && m.n == 0) || m.full)
+            continue;
+        ops[count].parent = p->index;
+        ops[count].clear = p->clear;
+        ops[count].markup = arena_strndup(&into->arena, buffer, m.n);
+        if (ops[count].markup == NULL)
+            status = -ENOMEM;
+        count++;
+    }
+    if (b->parent_count > 0 && (ops == NULL || buffer == NULL))
+        status = -ENOMEM;
+    into->dom = ops;
+    into->dom_count = count;
+    Dmod_Free(buffer);
+    dmvs_js_compiler_free(js);
+    Dmod_Free(b);
+    return status;
+}
+
+/* The highest index of an element under n */
+static uint32_t highest(const node_t* n, uint32_t max, uint32_t depth)
+{
+    for (const node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT)
+            continue;
+        if (k->index > max)
+            max = k->index;
+        max = highest(k, max, depth + 1U);
+    }
+    return max;
+}
+
+static void renumber(node_t* n, node_t* parent, uint32_t* next, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        k->parent = parent;
+        if (k->kind == NODE_ELEMENT)
+        {
+            k->index = ++*next;
+            renumber(k, k, next, depth + 1U);
+        }
+    }
+}
+
+void apply_dom(conv_t* c)
+{
+    uint32_t next = highest(c->document, 0, 0);
+    for (uint32_t i = 0; i < c->dom_count; i++)
+    {
+        const dom_t* op = &c->dom[i];
+        node_t* parent = by_index(c->document, op->parent, 0);
+        if (parent == NULL)
+            continue;
+        if (op->clear)
+        {
+            parent->first = NULL;
+            parent->last = NULL;
+        }
+        node_t* frag = html_parse(c, op->markup, strlen(op->markup));
+        if (frag == NULL)
+            continue;
+        renumber(frag, parent, &next, 0);           /* The page's numbers, then these: the same in every state */
+        for (node_t* k = frag->first; k != NULL; )
+        {
+            node_t* following = k->next;
+            k->next = NULL;
+            k->prev = parent->last;
+            if (parent->last != NULL)
+                parent->last->next = k;
+            else
+                parent->first = k;
+            parent->last = k;
+            k->parent = parent;
+            k = following;
+        }
+    }
+}
+
+node_t* built_element(conv_t* c, uint32_t k)
+{
+    char mark[16];
+    Dmod_SnPrintf(mark, sizeof(mark), "%u", (unsigned)k);
+    /* By its mark: data-dmvs-built="k" */
+    node_t* found[1];
+    char selector[48];
+    Dmod_SnPrintf(selector, sizeof(selector), "[data-dmvs-built=\"%s\"]", mark);
+    return (css_select(c, selector, c->document, found, 1) == 1) ? found[0] : NULL;
+}
diff --git a/src/dmvs_html.c b/src/dmvs_html.c
index af176a2..af3b65e 100644
--- a/src/dmvs_html.c
+++ b/src/dmvs_html.c
@@ -608,6 +608,7 @@ int run_layout(conv_t* c)
         return c->arena.failed ? -ENOMEM : -ENOENT;
     if ((c->document = html_parse(c, text, size)) == NULL)
         return c->arena.failed ? -ENOMEM : -EBADMSG;
+    apply_dom(c);
     for (uint32_t i = 0; i < c->mod_count; i++)
         apply_mod(c, &c->mods[i]);
     load_sheets(c, c->document, 0);
@@ -632,6 +633,36 @@ dmod_dmvsi_dif_api_declaration(1.0, dmvs_html, int, _convert, ( const char* path
     c->path = arena_strndup(&c->arena, path, strlen(path));
 
     int status = (c->path != NULL) ? run_layout(c) : -ENOMEM;
+    if (status == 0)
+    {
+        /* What its scripts build as it loads: the page laid out with it (a conversion of its own) */
+        conv_t* built = Dmod_Malloc(sizeof(*built));
+        if (built == NULL)
+            status = -ENOMEM;
+        else
+        {
+            memset(built, 0, sizeof(*built));
+            built->options = c->options;
+            built->doc = c->doc;
+            built->vw = c->vw;
+            built->vh = c->vh;
+            built->path = arena_strndup(&built->arena, path, strlen(path));
+            status = script_build(c, built);
+            if (status == 0 && built->dom_count > 0)
+            {
+                built->warnings = c->warnings;
+                arena_free(&c->arena);
+                Dmod_Free(c);
+                c = built;
+                status = run_layout(c);
+            }
+            else
+            {
+                arena_free(&built->arena);
+                Dmod_Free(built);
+            }
+        }
+    }
     if (status == 0)
         status = script_compile(c);     /* What its scripts do: variables, handlers */
     if (status == 0)
diff --git a/src/private.h b/src/private.h
index a50275e..d2b6966 100644
--- a/src/private.h
+++ b/src/private.h
@@ -476,10 +476,20 @@ typedef struct
     const char*     value;
 } mod_t;
 
+/* What a script builds in an element of the page as it loads (build.c): emptied, then markup appended */
+typedef struct
+{
+    uint32_t        parent;                         /* Its index */
+    bool            clear;
+    const char*     markup;
+} dom_t;
+
 typedef struct
 {
     arena_t                 arena;
     const char*             path;                   /* The page */
+    const dom_t*            dom;                    /* What the scripts build, applied after parsing (before mods) */
+    uint32_t                dom_count;
     const mod_t*            mods;                   /* Applied after parsing (run_layout()) */
     uint32_t                mod_count;
     const dmvsi_options_t*  options;
@@ -553,6 +563,11 @@ node_t* find_id(node_t* n, const char* id, uint32_t depth);
 dmvsi_rect_t group_rect(const conv_t* c, const node_t* n, int32_t ox, int32_t oy);
 void    view_origin(const conv_t* c, int32_t* ox, int32_t* oy);
 
+/* build.c: what the scripts build as the page loads - into `into`'s dom (into->dom_count 0: nothing) */
+int     script_build(conv_t* c, conv_t* into);
+void    apply_dom(conv_t* c);
+node_t* built_element(conv_t* c, uint32_t k);       /* The k-th document.createElement()'s, NULL: none */
+
 /* script.c */
 int     script_compile(conv_t* c);
 void    script_free(conv_t* c);                     /* The states it laid out (after painting) */
diff --git a/src/script.c b/src/script.c
index be4deb8..b324541 100644
--- a/src/script.c
+++ b/src/script.c
@@ -161,6 +161,7 @@ typedef struct
     uint32_t            wide[MAX_WIDE_CHARS];
     uint32_t            wide_count;
     const char*         chars;
+    uint32_t            made;                   /* document.createElement() so far: the k-th is the build's */
 } script_t;
 
 static void report(script_t* sc, const char* what)
@@ -168,6 +169,23 @@ static void report(script_t* sc, const char* what)
     dmvs_js_report(sc->js, what);
 }
 
+/* An element the scripts built as the page loaded (build.c): what they set of it is as it was then */
+static bool is_built(const node_t* e)
+{
+    return e != NULL && e->kind == NODE_ELEMENT && node_attr(e, "data-dmvs-built") != NULL;
+}
+
+/* Holding what the scripts built: emptying it, appending to it, is what the build did */
+static bool holds_built(const node_t* e)
+{
+    for (const node_t* k = (e != NULL) ? e->first : NULL; k != NULL; k = k->next)
+    {
+        if (is_built(k))
+            return true;
+    }
+    return false;
+}
+
 static const char* label_of(const node_t* e)
 {
     return (e->id != NULL) ? e->id : e->tag;
@@ -656,6 +674,10 @@ static int host_set(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* obj
     }
     if (kind != H_ELEMENT || e == NULL)
         return -ENOTSUP;
+    if (is_built(e) && (strcmp(name, "className") == 0 || strcmp(name, "innerHTML") == 0 || strcmp(name, "id") == 0))
+        return 0;                           /* As the build made it */
+    if (holds_built(e) && strcmp(name, "innerHTML") == 0)
+        return 0;                           /* Emptied to be built anew: as the build left it */
     if (strcmp(name, "innerText") == 0 || strcmp(name, "textContent") == 0)
     {
         set_text(sc, e, value);
@@ -797,6 +819,29 @@ static int host_call(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* ob
     }
     if ((strcmp(method, "querySelector") == 0 || strcmp(method, "querySelectorAll") == 0) && count == 1)
         return select_elements(sc, under, &args[0], method[13] == 'A', result);
+    if (kind == H_DOCUMENT && strcmp(method, "createElement") == 0)
+    {
+        /* The k-th: the element the build made (when it was put in the page) */
+        node_t* made = built_element(sc->c, ++sc->made);
+        if (made == NULL)
+        {
+            report(sc, "an element made that is not in the page as it loads - not converted");
+            return 0;
+        }
+        *result = element_value(sc, made);
+        return 0;
+    }
+    if (strcmp(method, "appendChild") == 0 && count == 1)
+    {
+        node_t* child;
+        dmvsi_var_t held;
+        if (object_of(sc, &args[0], &child, &held) == H_ELEMENT && is_built(child))
+        {
+            *result = args[0];
+            return 0;                       /* Where the build put it */
+        }
+        return -ENOTSUP;
+    }
     if (kind != H_ELEMENT)
         return -ENOTSUP;
     if (strcmp(method, "getAttribute") == 0 && count == 1)
@@ -938,6 +983,8 @@ static conv_t* run_state(script_t* sc, const mod_t* a, const mod_t* b, int* stat
     s->vw = c->vw;
     s->vh = c->vh;
     s->path = c->path;
+    s->dom = c->dom;                        /* What the scripts built */
+    s->dom_count = c->dom_count;
     st->mods[st->count][0] = *a;
     if (b != NULL)
         st->mods[st->count][1] = *b;
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index 0a0d239..10c1ada 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -597,3 +597,69 @@ DMOD_TEST_STEP(dmvs_html_converts_texts_and_timers)
     DMOD_TEST_EXPECT_TRUE(dmvsi_timer_at(doc, 0, &ms, &h) && ms >= 10 && ms <= 50 && h != 0);
     dmvsi_free(doc);
 }
+
+/* The groups clicked whose handler sets a variable */
+static uint32_t clicks_setting(dmvsi_doc_t doc, const dmvsi_node_t* n, dmvsi_var_t var)
+{
+    uint32_t count = 0;
+    for (; n != NULL; n = n->next)
+    {
+        if (n->kind != DMVSI_NODE_GROUP)
+            continue;
+        if (n->click != 0)
+        {
+            const dmvsi_action_t* a = NULL;
+            uint32_t k = flat_actions(doc, n->click, &a);
+            bool sets = false;
+            for (uint32_t i = 0; i < k && !sets; i++)
+                sets = a[i].kind == DMVSI_ACT_SET && a[i].var == var;
+            count += sets ? 1U : 0U;
+        }
+        count += clicks_setting(doc, n->first, var);
+    }
+    return count;
+}
+
+DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
+{
+    int status = -1;
+    DMOD_TEST_EXPECT_TRUE(write_file(TEST_FILE("build.html"),
+        "<!DOCTYPE html><html><head><style>"
+        "body { margin: 0; font-family: sans-serif } #screen { width: 200px; height: 120px }"
+        ".row { height: 20px } .on { background: #36f } #title { height: 20px }"
+        "</style></head><body><div id=\"screen\"><div id=\"title\">-</div>"
+        "<div id=\"list\"><!-- the script's --></div></div><script>"
+        "const songs = [{ t: 'One', s: 65 }, { t: 'Two', s: 130 }, { t: 'Three', s: 7 }];\n"
+        "let current = 1;\n"
+        "const list = document.getElementById('list');\n"
+        "function time(s) { return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, '0')}`; }\n"
+        "function render() {\n"
+        "  list.innerHTML = '';\n"
+        "  songs.forEach((song, i) => {\n"
+        "    const div = document.createElement('div');\n"
+        "    div.className = `row ${i === current ? 'on' : ''}`;\n"
+        "    div.innerHTML = `<span>${song.t}</span> <b>${time(song.s)}</b>`;\n"
+        "    div.onclick = () => { current = i; document.getElementById('title').innerText = song.t; };\n"
+        "    list.appendChild(div);\n"
+        "  });\n"
+        "}\n"
+        "render();\n"
+        "</script></body></html>"));
+    dmvsi_doc_t doc = convert(TEST_FILE("build.html"), "screen", 0, 0, &status);
+    DMOD_TEST_EXPECT_EQ(status, 0);
+    if (doc == NULL)
+        return;
+    const dmvsi_node_t* root = dmvsi_root(doc);
+
+    /* The rows as the page loads: their texts, the current one's background, each clicked */
+    DMOD_TEST_EXPECT_TRUE(find(root->first, DMVSI_NODE_TEXT, "One", NULL) != NULL);
+    DMOD_TEST_EXPECT_TRUE(find(root->first, DMVSI_NODE_TEXT, "2:10", NULL) != NULL);
+    DMOD_TEST_EXPECT_TRUE(find(root->first, DMVSI_NODE_TEXT, "0:07", NULL) != NULL);
+    dmvsi_rect_t on = { 0, DMVSI_PX(40), DMVSI_PX(200), DMVSI_PX(20) };
+    const dmvsi_node_t* fill = find(root->first, DMVSI_NODE_RECT, NULL, &on);
+    DMOD_TEST_EXPECT_TRUE(fill != NULL && fill->u.fill.paint.color == 0xFF3366FFu);
+    dmvsi_var_t title = var_named(doc, "title_text");
+    uint32_t clicked = clicks_setting(doc, root->first, title);
+    DMOD_TEST_EXPECT_EQ(clicked, 3u);
+    dmvsi_free(doc);
+}

From dad9e227c257815405ec25ac93b3f5b0a4aea3db Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 15:06:14 +0200
Subject: [PATCH 05/11] dmvs_html: className and src of known choices; an
 icon's glyph is its look

el.className set to one of known class lists (a row rendered as
`row ${active ? 'on' : ''}`): a change to each, on which it is - the
row's looks follow the current song. img.src set to one of known images
(playlist[i].cover): a variant of the image for each, shown on its
variable. An element's look counts its text (an icon font's ::before):
play / pause changed nothing before.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/private.h          |   2 +-
 src/script.c           | 205 ++++++++++++++++++++++++++++++++++++++++-
 tests/dmvs_html_test.c |   5 +-
 3 files changed, 209 insertions(+), 3 deletions(-)

diff --git a/src/private.h b/src/private.h
index d2b6966..fefb203 100644
--- a/src/private.h
+++ b/src/private.h
@@ -104,7 +104,7 @@ typedef struct
 } box_t;
 
 /* One look of an element: the element as laid out in a state of the page, shown on its conditions */
-#define MAX_VARIANTS        4u
+#define MAX_VARIANTS        8u
 
 typedef struct
 {
diff --git a/src/script.c b/src/script.c
index b324541..81ba2cf 100644
--- a/src/script.c
+++ b/src/script.c
@@ -135,6 +135,17 @@ typedef struct
 
 #define MAX_LOOKVARS    16u
 
+/* An image whose src a script sets to one of known ones (dmvs_js_choices()): a variant of each, its variable which */
+#define MAX_SRCVARS     8u
+
+typedef struct
+{
+    node_t*         element;
+    dmvsi_var_t     var;
+    const char*     picks[MAX_VARIANTS];
+    uint32_t        count;
+} srcvar_t;
+
 typedef struct
 {
     conv_t*             c;
@@ -162,6 +173,8 @@ typedef struct
     uint32_t            wide_count;
     const char*         chars;
     uint32_t            made;                   /* document.createElement() so far: the k-th is the build's */
+    srcvar_t            srcvars[MAX_SRCVARS];
+    uint32_t            srcvar_count;
 } script_t;
 
 static void report(script_t* sc, const char* what)
@@ -645,6 +658,182 @@ static int host_get(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* obj
     return -ENOTSUP;
 }
 
+/* A class list's change from what the element has: "+a -b" (by name, as flush_pending() writes it) */
+static const char* class_diff(script_t* sc, const node_t* e, const char* list)
+{
+    const char* names[2 * MAX_PENDING_OPS];
+    bool add[2 * MAX_PENDING_OPS];
+    uint32_t n = 0;
+    char word[128];
+    /* Added: what the list has, the element not */
+    for (const char* q = list; *q != '\0' && n < MAX_PENDING_OPS; )
+    {
+        while (*q == ' ' || *q == '\t' || *q == '\n')
+            q++;
+        size_t k = 0;
+        while (q[k] != '\0' && q[k] != ' ' && q[k] != '\t' && q[k] != '\n')
+            k++;
+        if (k == 0)
+            break;
+        size_t m = (k < sizeof(word) - 1U) ? k : sizeof(word) - 1U;
+        memcpy(word, q, m);
+        word[m] = '\0';
+        q += k;
+        if (!has_class(e, word))
+        {
+            names[n] = arena_strndup(&sc->c->arena, word, m);
+            add[n++] = true;
+        }
+    }
+    /* Removed: what the element has, the list not */
+    for (uint32_t i = 0; i < e->class_count && n < 2U * MAX_PENDING_OPS; i++)
+    {
+        const char* cls = e->classes[i];
+        size_t m = strlen(cls);
+        bool kept = false;
+        for (const char* q = list; *q != '\0' && !kept; )
+        {
+            while (*q == ' ' || *q == '\t' || *q == '\n')
+                q++;
+            size_t k = 0;
+            while (q[k] != '\0' && q[k] != ' ' && q[k] != '\t' && q[k] != '\n')
+                k++;
+            kept = k == m && memcmp(q, cls, m) == 0;
+            q += k;
+        }
+        if (!kept)
+        {
+            names[n] = cls;
+            add[n++] = false;
+        }
+    }
+    char spec[512];
+    size_t len = 0;
+    bool used[2 * MAX_PENDING_OPS] = { false };
+    spec[0] = '\0';
+    for (uint32_t k = 0; k < n; k++)
+    {
+        uint32_t best = n;
+        for (uint32_t j = 0; j < n; j++)
+            if (!used[j] && names[j] != NULL && (best == n || strcmp(names[j], names[best]) < 0))
+                best = j;
+        if (best == n)
+            break;
+        used[best] = true;
+        len += (size_t)Dmod_SnPrintf(spec + len, sizeof(spec) - len, "%s%c%s", (len > 0) ? " " : "", add[best] ? '+' : '-', names[best]);
+        if (len >= sizeof(spec))
+            len = sizeof(spec) - 1U;
+    }
+    return arena_strndup(&sc->c->arena, spec, len);
+}
+
+/* el.className = one of known lists: the change to each, on which it is */
+static int set_class_name(script_t* sc, node_t* e, const dmvs_js_value_t* value)
+{
+    const dmvs_js_value_t* picks = NULL;
+    dmvsi_var_t index = 0;
+    uint32_t n = dmvs_js_choices(sc->js, value, &picks, &index);
+    const char* text = static_text(sc, value);
+    if (text != NULL)
+    {
+        const char* spec = class_diff(sc, e, text);
+        if (spec != NULL)
+            place(sc, e, MOD_CLASSES, spec, NULL);
+        return 0;
+    }
+    if (n == 0 || n > MAX_VARIANTS)
+        return is_built(e) ? 0 : -ENOTSUP;      /* (what the build made it: as it is) */
+    for (uint32_t i = 0; i < n; i++)
+    {
+        if (picks[i].kind != DMVS_JS_V_STRING)
+            return -ENOTSUP;
+    }
+    for (uint32_t i = 0; i < n; i++)
+    {
+        const char* spec = class_diff(sc, e, picks[i].text);
+        if (spec == NULL)
+            return -ENOMEM;
+        emit_op(sc, DMVSI_ACT_IF_EQ, index, 0, (int32_t)i, NULL);
+        place(sc, e, MOD_CLASSES, spec, NULL);
+        emit_op(sc, DMVSI_ACT_END, 0, 0, 0, NULL);
+    }
+    return 0;
+}
+
+/* img.src = one of known images: a variant of each (made at the end), its variable set to which */
+static int set_src(script_t* sc, node_t* e, const dmvs_js_value_t* value)
+{
+    const dmvs_js_value_t* picks = NULL;
+    dmvsi_var_t index = 0;
+    uint32_t n = dmvs_js_choices(sc->js, value, &picks, &index);
+    if (!node_is(e, "img") || n < 2 || n > MAX_VARIANTS)
+        return -ENOTSUP;
+    srcvar_t* sv = NULL;
+    for (uint32_t i = 0; i < sc->srcvar_count && sv == NULL; i++)
+        sv = (sc->srcvars[i].element == e) ? &sc->srcvars[i] : NULL;
+    if (sv == NULL)
+    {
+        if (sc->srcvar_count >= MAX_SRCVARS)
+            return -ENOTSUP;
+        sv = &sc->srcvars[sc->srcvar_count];
+        memset(sv, 0, sizeof(*sv));
+        const char* now = node_attr(e, "src");
+        int32_t initial = 0;
+        for (uint32_t i = 0; i < n; i++)
+        {
+            if (picks[i].kind != DMVS_JS_V_STRING)
+                return -ENOTSUP;
+            sv->picks[i] = arena_strndup(&sc->c->arena, picks[i].text, picks[i].length);
+            if (now != NULL && strcmp(now, picks[i].text) == 0)
+                initial = (int32_t)i;
+        }
+        char label[48];
+        Dmod_SnPrintf(label, sizeof(label), "%s_src", label_of(e));
+        if ((sv->var = dmvsi_add_var(sc->c->doc, label, initial)) == 0)
+            return -ENOMEM;
+        sv->element = e;
+        sv->count = n;
+        sc->srcvar_count++;
+    }
+    else if (sv->count != n)
+        return -ENOTSUP;                        /* Of other images elsewhere */
+    emit_op(sc, DMVSI_ACT_SET, sv->var, index, 0, NULL);
+    return 0;
+}
+
+/* The images' variants: the element as it is, its src another */
+static int make_src_variants(script_t* sc)
+{
+    for (uint32_t i = 0; i < sc->srcvar_count; i++)
+    {
+        srcvar_t* sv = &sc->srcvars[i];
+        node_t* e = sv->element;
+        dynamic_t* d = dynamic_of(sc, e);
+        if (d == NULL)
+            return -ENOMEM;
+        if (d->variant_count > 0 || !e->box.placed)
+        {
+            WARN(sc->c, "script: the images of #%s as well as its looks - not converted\n", label_of(e));
+            continue;
+        }
+        for (uint32_t k = 0; k < sv->count; k++)
+        {
+            node_t* look = arena_alloc(&sc->c->arena, sizeof(node_t));
+            attr_t* src = arena_alloc(&sc->c->arena, sizeof(attr_t));
+            if (look == NULL || src == NULL)
+                return -ENOMEM;
+            *look = *e;
+            look->dynamic = NULL;
+            src->name = (char*)"src";
+            src->value = (char*)sv->picks[k];
+            src->next = e->attrs;                /* (before the element's own: node_attr() finds it first) */
+            look->attrs = src;
+            d->variants[d->variant_count++] = (variant_t){ look, sv->var, (int32_t)k, -1 };
+        }
+    }
+    return 0;
+}
+
 static int host_set(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* object, const char* name, const dmvs_js_value_t* value)
 {
     script_t* sc = ctx;
@@ -674,7 +863,11 @@ static int host_set(void* ctx, dmvs_js_compiler_t js, const dmvs_js_value_t* obj
     }
     if (kind != H_ELEMENT || e == NULL)
         return -ENOTSUP;
-    if (is_built(e) && (strcmp(name, "className") == 0 || strcmp(name, "innerHTML") == 0 || strcmp(name, "id") == 0))
+    if (strcmp(name, "className") == 0)
+        return set_class_name(sc, e, value);
+    if (strcmp(name, "src") == 0)
+        return set_src(sc, e, value);
+    if (is_built(e) && (strcmp(name, "innerHTML") == 0 || strcmp(name, "id") == 0))
         return 0;                           /* As the build made it */
     if (holds_built(e) && strcmp(name, "innerHTML") == 0)
         return 0;                           /* Emptied to be built anew: as the build left it */
@@ -896,7 +1089,11 @@ static uint32_t inside(const node_t* e, const node_t* n, uint32_t h, uint32_t de
         for (int i = 0; i < 6; i++)
             h = (h ^ (uint32_t)v[i]) * 16777619u;
         for (const frag_t* f = k->box.frags; f != NULL; f = f->next)
+        {
             h = (h ^ (uint32_t)(f->x + f->y * 7 + (int32_t)f->length)) * 16777619u;
+            for (size_t i = 0; f->text != NULL && i < f->length; i++)
+                h = (h ^ (uint8_t)f->text[i]) * 16777619u;      /* Another text, another icon (::before) */
+        }
         h = inside(e, k, h, depth + 1U);
     }
     return h;
@@ -1023,7 +1220,11 @@ static uint32_t look_of(const node_t* e)
     for (const char* u = st->background_url; u != NULL && *u != '\0'; u++)
         h = mix(h, *u);
     for (const frag_t* f = e->box.frags; f != NULL; f = f->next)
+    {
         h = mix(h, f->x + f->y * 7 + (int32_t)f->length);
+        for (size_t i = 0; f->text != NULL && i < f->length; i++)
+            h = mix(h, (uint8_t)f->text[i]);
+    }
     return inside(e, e, h, 0);
 }
 
@@ -1652,6 +1853,8 @@ int script_compile(conv_t* c)
         status = expand_held(sc);
     if (status == 0)
         status = lay_out_changes(sc);
+    if (status == 0)
+        status = make_src_variants(sc);
     if (status == 0)
         status = make_handlers(sc);
     texts(sc, c->document, 0);
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index 10c1ada..26c4a08 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -639,7 +639,7 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
         "    const div = document.createElement('div');\n"
         "    div.className = `row ${i === current ? 'on' : ''}`;\n"
         "    div.innerHTML = `<span>${song.t}</span> <b>${time(song.s)}</b>`;\n"
-        "    div.onclick = () => { current = i; document.getElementById('title').innerText = song.t; };\n"
+        "    div.onclick = () => { current = i; document.getElementById('title').innerText = song.t; render(); };\n"
         "    list.appendChild(div);\n"
         "  });\n"
         "}\n"
@@ -661,5 +661,8 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
     dmvsi_var_t title = var_named(doc, "title_text");
     uint32_t clicked = clicks_setting(doc, root->first, title);
     DMOD_TEST_EXPECT_EQ(clicked, 3u);
+    /* Rendered anew on a click: each row's class list one of two - its look's variable set */
+    dmvsi_var_t look = var_named(doc, "div_look");
+    DMOD_TEST_EXPECT_TRUE(look != 0 && clicks_setting(doc, root->first, look) == 3u);
     dmvsi_free(doc);
 }

From 05f9fdac2f6fbc221c269c808222efbe6935dc1a Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 15:48:44 +0200
Subject: [PATCH 06/11] dmvs_html: an element's other looks seen as it is

A look of an element is laid out in a state of the page, where a screen
hidden as the page loads (visibility) still is: revealed in the page by
the change that shows it, not in the states. A row of a list in such a
screen was painted unseen in its other look - it vanished when another
song was chosen. A look is now seen where the element is.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/script.c           | 38 ++++++++++++++++++++++++++++++++++++++
 tests/dmvs_html_test.c | 20 ++++++++++++++++++--
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/src/script.c b/src/script.c
index 81ba2cf..72b419d 100644
--- a/src/script.c
+++ b/src/script.c
@@ -1258,6 +1258,40 @@ static bool has_classes(const node_t* e, const char* spec)
     return true;
 }
 
+/*
+ * A look of an element (laid out in a state of the page) seen as the element
+ * is: hidden only where the element is - a screen hidden as the page is
+ * (visibility), shown by a change, is revealed in the page, not in its
+ * states (a row of its list would be painted unseen in its other look)
+ */
+static void unhide(node_t* n, uint32_t depth)
+{
+    if (n->style != NULL)
+        n->style->hidden = false;
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+        if (k->kind == NODE_ELEMENT)
+            unhide(k, depth + 1U);
+}
+
+static void seen_like(node_t* look, const node_t* e, uint32_t depth)
+{
+    if (look == NULL || e == NULL || depth > 200U)
+        return;
+    if (look->style != NULL && e->style != NULL && !e->style->hidden)
+        look->style->hidden = false;
+    const node_t* g = e->first;
+    for (node_t* k = look->first; k != NULL; k = k->next)
+    {
+        if (g != NULL && g->kind == k->kind)
+        {
+            seen_like(k, g, depth + 1U);
+            g = g->next;
+        }
+        else if (k->kind == NODE_ELEMENT && look->style != NULL && !look->style->hidden)
+            unhide(k, depth + 1U);                  /* (none to follow: seen as its parent is) */
+    }
+}
+
 /* An element a change shows that is hidden (visibility) as the page is: shown, its opacity
  * what hides it - so that it can fade in. Its inside hidden as it is then */
 static void reveal(node_t* e, const node_t* f, uint32_t depth)
@@ -1376,6 +1410,8 @@ static int make_variants(script_t* sc, node_t* e, const change_t* toggled, bool
         looks[n++] = (variant_t){ pressed, var, base, 1 };
     if (pressed != NULL && toggled != NULL)
         looks[n++] = (variant_t){ pressed_toggled, var, 1 - base, 1 };
+    for (uint8_t k = 1; k < n; k++)
+        seen_like(looks[k].node, e, 0);
     memcpy(d->variants, looks, n * sizeof(variant_t));
     d->variant_count = n;
     return 0;
@@ -1675,6 +1711,8 @@ static int lay_out_changes(script_t* sc)
         looks[n++] = (variant_t){ e->box.placed ? e : NULL, lv->var, 0, -1 };
         for (uint32_t k = 0; k < lv->count; k++)
             looks[n++] = (variant_t){ lv->looks[k], lv->var, (int32_t)(k + 1U), -1 };
+        for (uint8_t k = 1; k < n; k++)
+            seen_like(looks[k].node, e, 0);
         memcpy(e->dynamic->variants, looks, n * sizeof(variant_t));
         e->dynamic->variant_count = n;
     }
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index 26c4a08..483833e 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -598,6 +598,19 @@ DMOD_TEST_STEP(dmvs_html_converts_texts_and_timers)
     dmvsi_free(doc);
 }
 
+static uint32_t count_texts(const dmvsi_node_t* n, const char* text)
+{
+    uint32_t count = 0;
+    for (; n != NULL; n = n->next)
+    {
+        if (n->kind == DMVSI_NODE_TEXT && n->u.text.var == 0 && strcmp(n->u.text.text, text) == 0)
+            count++;
+        if (n->kind == DMVSI_NODE_GROUP)
+            count += count_texts(n->first, text);
+    }
+    return count;
+}
+
 /* The groups clicked whose handler sets a variable */
 static uint32_t clicks_setting(dmvsi_doc_t doc, const dmvsi_node_t* n, dmvsi_var_t var)
 {
@@ -627,8 +640,9 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
         "<!DOCTYPE html><html><head><style>"
         "body { margin: 0; font-family: sans-serif } #screen { width: 200px; height: 120px }"
         ".row { height: 20px } .on { background: #36f } #title { height: 20px }"
-        "</style></head><body><div id=\"screen\"><div id=\"title\">-</div>"
-        "<div id=\"list\"><!-- the script's --></div></div><script>"
+        ".view { visibility: hidden; opacity: 0; transition: opacity 0.3s } .view.active { visibility: visible; opacity: 1 }"
+        "</style></head><body><div id=\"screen\"><div id=\"title\" onclick=\"document.getElementById('v').classList.add('active')\">-</div>"
+        "<div class=\"view\" id=\"v\"><div id=\"list\"><!-- the script's --></div></div></div><script>"
         "const songs = [{ t: 'One', s: 65 }, { t: 'Two', s: 130 }, { t: 'Three', s: 7 }];\n"
         "let current = 1;\n"
         "const list = document.getElementById('list');\n"
@@ -664,5 +678,7 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
     /* Rendered anew on a click: each row's class list one of two - its look's variable set */
     dmvsi_var_t look = var_named(doc, "div_look");
     DMOD_TEST_EXPECT_TRUE(look != 0 && clicks_setting(doc, root->first, look) == 3u);
+    /* The list is in a screen hidden as the page loads: a row's other look is seen when it is shown too */
+    DMOD_TEST_EXPECT_TRUE(count_texts(root->first, "Two") >= 2u);
     dmvsi_free(doc);
 }

From 164a2764bfe410253c2920a02fb385b6ae6cf4fb Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 16:08:18 +0200
Subject: [PATCH 07/11] dmvs_html: a scroll box's content - as far down as what
 is in it goes

A box that scrolls (overflow: auto) scrolls what is in it: a flex column
of a definite height (flex-1) is laid out as tall as it is, its content
height that too - so the playlist's queue, longer than its box, did not
scroll. What can be scrolled to is now as far down as its children go,
with its bottom padding.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/paint.c | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/src/paint.c b/src/paint.c
index ddd9845..f1625f0 100644
--- a/src/paint.c
+++ b/src/paint.c
@@ -712,6 +712,25 @@ static void sort_layers(layers_t* l)
 }
 
 /* The box itself, then what it holds (in a clipping group when it clips), its layers among them */
+/*
+ * How far down what is in a box goes, from its padding box's top, with its
+ * bottom padding: what can be scrolled to (a flex column of a definite height
+ * is laid out as tall as it is, its items further)
+ */
+static int32_t scroll_extent(const node_t* n)
+{
+    int32_t top = n->box.ay + n->box.b[0], bottom = 0;
+    for (const node_t* k = n->first; k != NULL; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT || !k->box.placed || k->style == NULL || k->style->display == DISPLAY_NONE)
+            continue;
+        int32_t end = k->box.ay + k->box.h + k->box.m[2] - top;
+        if (end > bottom)
+            bottom = end;
+    }
+    return (bottom > 0) ? bottom + n->box.p[2] : 0;
+}
+
 static void paint_inner(painter_t* p, node_t* n, uint32_t depth)
 {
     style_t* st = n->style;
@@ -733,6 +752,9 @@ static void paint_inner(painter_t* p, node_t* n, uint32_t depth)
         g.opacity = 255;
         g.name = n->id;
         int32_t content_h = n->box.content_h + n->box.p[0] + n->box.p[2];
+        int32_t extent = scroll_extent(n);
+        if (extent > content_h)
+            content_h = extent;
         if ((st->overflow_y == OVERFLOW_AUTO || st->overflow_y == OVERFLOW_SCROLL) && content_h > g.rect.h)
         {
             g.scroll_w = g.rect.w;

From 0cbe18ada1c06bcf902d7cc81a560635537f2679 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 18:25:02 +0200
Subject: [PATCH 08/11] dmvs_html: CSS animations; images in rounded boxes

@keyframes (and Tailwind's spin, ping, pulse, bounce; animate-*,
animate-[...]) of what dmview can move - transform: translate, opacity:
an element animated gets its group's variables, and the view one timer,
every 20 ms starting each animation's segment that is due (an ANIMATE
to the next keyframe, its timing function and time; infinite; alternate
there and back). The car HMI's equalizer bars bounce; rotate / scale
(its spinning cover) are reported, not drawn.

An image's corners: its own border-radius, or that of a box around it
that clips and that it fills (a cover in a round frame) - dmvsi's
image radius, made round by todmvs / todmvi.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CMakeLists.txt         |   1 +
 Makefile               |   2 +-
 src/anim.c             | 478 +++++++++++++++++++++++++++++++++++++++++
 src/css.c              |  17 ++
 src/dmvs_html.c        |   2 +
 src/paint.c            |  37 +++-
 src/private.h          |  20 ++
 src/style.c            |  48 +++++
 src/tailwind.c         |  21 +-
 tests/dmvs_html_test.c |  36 ++++
 10 files changed, 657 insertions(+), 5 deletions(-)
 create mode 100644 src/anim.c

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 558f2fb..de194fb 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -72,6 +72,7 @@ dmod_add_library(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
     src/svg.c
     src/script.c
     src/build.c
+    src/anim.c
 )
 
 dmod_link_modules(${DMOD_MODULE_NAME}
diff --git a/Makefile b/Makefile
index 94dfe80..08e3d19 100644
--- a/Makefile
+++ b/Makefile
@@ -24,7 +24,7 @@ DMOD_MODULE_VERSION=0.1
 DMOD_AUTHOR_NAME=Patryk Kubiak
 
 # The list of C sources
-DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/svg.c src/script.c src/build.c
+DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/svg.c src/script.c src/build.c src/anim.c
 
 # The list of C++ sources
 DMOD_CXXSOURCES=
diff --git a/src/anim.c b/src/anim.c
new file mode 100644
index 0000000..89abca9
--- /dev/null
+++ b/src/anim.c
@@ -0,0 +1,478 @@
+#include "private.h"
+#include <errno.h>
+#include <string.h>
+
+/*
+ * CSS animations, of what dmview can move: a box's position (transform:
+ * translate) and opacity. An element animated by @keyframes gets its
+ * group's variables (x, y, opacity), and the view one timer: every 20 ms
+ * it starts the segment of each animation that is due - an ANIMATE of its
+ * variables to the next keyframe, its timing function, its duration -
+ * then the next, round and round (infinite; alternate: there and back).
+ * What else a keyframe does (rotate, scale) is not drawn.
+ */
+
+#define MAX_FRAMES          8u
+#define MAX_ANIMATIONS      24u
+#define POLL_MS             20u
+
+typedef struct
+{
+    uint32_t    at;                         /* 1/1000 of the animation */
+    bool        moves, fades;                   /* A transform, an opacity */
+    len_t       x, y;                       /* translate */
+    int32_t     opacity;                    /* 0 ... 255 */
+    int16_t     easing[4];
+    bool        has_easing;
+} frame_t;
+
+typedef struct
+{
+    node_t*         element;
+    frame_t         frames[2u * MAX_FRAMES];
+    uint32_t        count;
+    uint32_t        ms;
+    dmvsi_var_t     phase, due;
+} anim_t;
+
+static const char* skip_space(const char* s, const char* end)
+{
+    while (s < end && (*s == ' ' || *s == '\t' || *s == '\n' || *s == '\r'))
+        s++;
+    return s;
+}
+
+static bool number_at(const char** p, const char* end, double* out)
+{
+    const char* s = *p;
+    bool neg = false;
+    if (s < end && (*s == '-' || *s == '+'))
+        neg = *s++ == '-';
+    double v = 0, scale = 0;
+    bool any = false;
+    for (; s < end && ((*s >= '0' && *s <= '9') || (*s == '.' && scale == 0)); s++)
+    {
+        if (*s == '.')
+        {
+            scale = 1;
+            continue;
+        }
+        any = true;
+        if (scale > 0)
+        {
+            scale /= 10;
+            v += (*s - '0') * scale;
+        }
+        else
+            v = v * 10 + (*s - '0');
+    }
+    if (!any)
+        return false;
+    *out = neg ? -v : v;
+    *p = s;
+    return true;
+}
+
+/* A length of translate(): px (1/64) or %; false when it is none of them */
+static bool length_at(const char** p, const char* end, len_t* out)
+{
+    double v;
+    const char* s = skip_space(*p, end);
+    if (!number_at(&s, end, &v))
+        return false;
+    out->px = 0;
+    out->pct = 0;
+    if (s < end && *s == '%')
+    {
+        out->pct = (int32_t)(v * 100.0);         /* 1/100 % */
+        s++;
+    }
+    else
+    {
+        out->px = (int32_t)(v * 64.0);
+        if (s + 1 < end && s[0] == 'p' && s[1] == 'x')
+            s += 2;
+        else if (s + 2 < end && s[0] == 'r' && s[1] == 'e' && s[2] == 'm')
+        {
+            out->px *= 16;
+            s += 3;
+        }
+    }
+    *p = s;
+    return true;
+}
+
+static bool starts_with(const char* s, const char* end, const char* w)
+{
+    size_t n = strlen(w);
+    return (size_t)(end - s) >= n && strncmp(s, w, n) == 0;
+}
+
+/* transform: translate / translateX / translateY (none: 0) - false when it does what is not drawn */
+static bool translation(const char* s, const char* end, frame_t* f)
+{
+    s = skip_space(s, end);
+    f->x.px = f->x.pct = f->y.px = f->y.pct = 0;
+    if (starts_with(s, end, "none"))
+        return true;
+    bool drawn = true;
+    while (s < end)
+    {
+        s = skip_space(s, end);
+        const char* name = s;
+        while (s < end && *s != '(')
+            s++;
+        size_t n = (size_t)(s - name);
+        if (s >= end)
+            break;
+        s++;
+        len_t a = { 0, 0, 0 }, b = { 0, 0, 0 };
+        bool has_a = length_at(&s, end, &a);
+        s = skip_space(s, end);
+        if (s < end && *s == ',')
+            s++;
+        bool has_b = length_at(&s, end, &b);
+        while (s < end && *s != ')')
+            s++;
+        if (s < end)
+            s++;
+        if (n == 10 && strncmp(name, "translateY", 10) == 0 && has_a)
+            f->y = a;
+        else if (n == 10 && strncmp(name, "translateX", 10) == 0 && has_a)
+            f->x = a;
+        else if ((n == 9 && strncmp(name, "translate", 9) == 0) && has_a)
+        {
+            f->x = a;
+            if (has_b)
+                f->y = b;
+        }
+        else
+            drawn = false;                  /* rotate, scale, ...: not drawn */
+    }
+    return drawn;
+}
+
+/* A timing function: cubic-bezier(...), ease, linear, ease-in, ease-out, ease-in-out */
+static bool timing(const char* s, const char* end, int16_t* curve)
+{
+    static const struct { char name[12]; int16_t curve[4]; } keywords[] = {
+        { "ease-in-out", { 420, 0, 580, 1000 } }, { "ease-in", { 420, 0, 1000, 1000 } }, { "ease-out", { 0, 0, 580, 1000 } },
+        { "ease", { 250, 100, 250, 1000 } }, { "linear", { 0, 0, 1000, 1000 } },
+    };
+    s = skip_space(s, end);
+    if (starts_with(s, end, "cubic-bezier("))
+    {
+        s += 13;
+        for (int i = 0; i < 4; i++)
+        {
+            double v;
+            s = skip_space(s, end);
+            if (!number_at(&s, end, &v))
+                return false;
+            curve[i] = (int16_t)(v * 1000.0);
+            s = skip_space(s, end);
+            if (s < end && *s == ',')
+                s++;
+        }
+        return true;
+    }
+    for (size_t i = 0; i < sizeof(keywords) / sizeof(keywords[0]); i++)
+    {
+        if (starts_with(s, end, keywords[i].name))
+        {
+            memcpy(curve, keywords[i].curve, sizeof(keywords[i].curve));
+            return true;
+        }
+    }
+    return false;
+}
+
+static int frame_order(const frame_t* a, const frame_t* b)
+{
+    return (a->at < b->at) ? -1 : (a->at > b->at) ? 1 : 0;
+}
+
+/* The keyframes of a block: each selector (0%, 50%, from, to) a frame of its declarations */
+static uint32_t read_frames(conv_t* c, const keyframes_t* kf, frame_t* frames, bool* drawn)
+{
+    uint32_t count = 0;
+    const char* s = kf->body;
+    const char* end = kf->body + kf->length;
+    *drawn = true;
+    while (s < end && count < MAX_FRAMES)
+    {
+        s = skip_space(s, end);
+        const char* open = s;
+        while (open < end && *open != '{')
+            open++;
+        const char* close = open;
+        while (close < end && *close != '}')
+            close++;
+        if (open >= end || close >= end)
+            break;
+        /* Its declarations */
+        frame_t f;
+        memset(&f, 0, sizeof(f));
+        f.opacity = 255;
+        decl_t* decls = NULL;
+        uint16_t n = css_parse_decls(c, open + 1, (size_t)(close - open - 1), &decls);
+        for (uint16_t i = 0; i < n; i++)
+        {
+            const char* v = decls[i].value;
+            const char* ve = v + strlen(v);
+            if (strcmp(decls[i].name, "transform") == 0)
+            {
+                *drawn = translation(v, ve, &f) && *drawn;
+                f.moves = true;
+            }
+            else if (strcmp(decls[i].name, "opacity") == 0)
+            {
+                double o;
+                const char* q = v;
+                if (number_at(&q, ve, &o))
+                {
+                    f.opacity = (int32_t)(o * 255.0 + 0.5);
+                    f.fades = true;
+                }
+            }
+            else if (strcmp(decls[i].name, "animation-timing-function") == 0)
+                f.has_easing = timing(v, ve, f.easing);
+        }
+        /* Its selectors: a frame each */
+        for (const char* q = s; q < open && count < MAX_FRAMES; )
+        {
+            q = skip_space(q, open);
+            double pct = -1;
+            if (starts_with(q, open, "from"))
+                pct = 0;
+            else if (starts_with(q, open, "to"))
+                pct = 100;
+            else
+                (void)number_at(&q, open, &pct);
+            while (q < open && *q != ',')
+                q++;
+            if (q < open)
+                q++;
+            if (pct < 0 || pct > 100)
+                continue;
+            frame_t g = f;
+            g.at = (uint32_t)(pct * 10.0);
+            frames[count++] = g;
+        }
+        s = close + 1;
+    }
+    /* In order; 0% and 100% as the element is when there are none */
+    for (uint32_t i = 1; i < count; i++)
+        for (uint32_t k = i; k > 0 && frame_order(&frames[k - 1U], &frames[k]) > 0; k--)
+        {
+            frame_t t = frames[k];
+            frames[k] = frames[k - 1U];
+            frames[k - 1U] = t;
+        }
+    if (count > 0 && frames[0].at != 0 && count < MAX_FRAMES)
+    {
+        memmove(&frames[1], &frames[0], count * sizeof(frame_t));
+        memset(&frames[0], 0, sizeof(frame_t));
+        frames[0].opacity = 255;
+        count++;
+    }
+    if (count > 0 && frames[count - 1U].at != 1000 && count < MAX_FRAMES)
+    {
+        memset(&frames[count], 0, sizeof(frame_t));
+        frames[count].opacity = 255;
+        frames[count++].at = 1000;
+    }
+    return count;
+}
+
+static const keyframes_t* keyframes_named(const conv_t* c, const char* name)
+{
+    for (const keyframes_t* k = c->keyframes; k != NULL; k = k->next)
+    {
+        if (strcmp(k->name, name) == 0)
+            return k;
+    }
+    return NULL;
+}
+
+static void find_animated(conv_t* c, node_t* n, anim_t* anims, uint32_t* count, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT || k->style == NULL || k->style->display == DISPLAY_NONE)
+            continue;
+        const style_t* st = k->style;
+        if (st->animation != NULL && st->animation_ms > 0 && k->box.placed && *count < MAX_ANIMATIONS)
+        {
+            const keyframes_t* kf = keyframes_named(c, st->animation);
+            anim_t* a = &anims[*count];
+            memset(a, 0, sizeof(*a));
+            bool drawn = true;
+            a->count = (kf != NULL) ? read_frames(c, kf, a->frames, &drawn) : 0;
+            if (kf == NULL)
+                WARN(c, "the animation %s - its keyframes are not there\n", st->animation);
+            else if (!drawn)
+                WARN(c, "the animation %s of #%s - what it does but move and fade is not drawn\n", st->animation,
+                     (k->id != NULL) ? k->id : k->tag);
+            bool moves = false;
+            for (uint32_t i = 0; i < a->count; i++)
+                moves = moves || a->frames[i].moves || a->frames[i].fades;
+            if (a->count >= 2 && moves && st->animation_infinite)
+            {
+                /* There and back: the frames again, the other way */
+                if (st->animation_alternate)
+                {
+                    uint32_t n0 = a->count;
+                    for (uint32_t i = n0 - 1U; i-- > 0 && a->count < 2u * MAX_FRAMES;)
+                    {
+                        frame_t f = a->frames[i];
+                        f.at = 2000u - a->frames[i].at;
+                        a->frames[a->count++] = f;
+                    }
+                    a->ms = st->animation_ms * 2u;
+                }
+                else
+                    a->ms = st->animation_ms;
+                a->element = k;
+                (*count)++;
+            }
+        }
+        find_animated(c, k, anims, count, depth + 1U);
+    }
+}
+
+static int32_t offset(const len_t* l, int32_t size)
+{
+    return l->px + (int32_t)((int64_t)size * l->pct / 10000);
+}
+
+static void put(dmvsi_action_t* a, uint32_t* n, uint32_t max, uint8_t kind, dmvsi_var_t var, dmvsi_var_t operand, int32_t value)
+{
+    if (*n >= max)
+        return;
+    memset(&a[*n], 0, sizeof(dmvsi_action_t));
+    a[*n].kind = kind;
+    a[*n].var = var;
+    a[*n].operand = operand;
+    a[*n].value = value;
+    (*n)++;
+}
+
+int animate_page(conv_t* c)
+{
+    anim_t* anims = Dmod_Malloc(MAX_ANIMATIONS * sizeof(anim_t));
+    if (anims == NULL)
+        return -ENOMEM;
+    uint32_t count = 0;
+    find_animated(c, c->document, anims, &count, 0);
+    if (count == 0)
+    {
+        Dmod_Free(anims);
+        return 0;
+    }
+    uint32_t max = 64u + count * (8u + 6u * 2u * MAX_FRAMES);
+    dmvsi_action_t* actions = Dmod_Malloc(max * sizeof(dmvsi_action_t));
+    if (actions == NULL)
+    {
+        Dmod_Free(anims);
+        return -ENOMEM;
+    }
+    uint32_t n = 0;
+    int status = 0;
+    dmvsi_var_t left = dmvsi_add_var(c->doc, "anim_left", 0);
+    int32_t ox, oy;
+    view_origin(c, &ox, &oy);
+    for (uint32_t i = 0; i < count && status == 0; i++)
+    {
+        anim_t* a = &anims[i];
+        node_t* e = a->element;
+        if (e->dynamic == NULL && (e->dynamic = arena_alloc(&c->arena, sizeof(dynamic_t))) == NULL)
+        {
+            status = -ENOMEM;
+            break;
+        }
+        dynamic_t* d = e->dynamic;
+        dmvsi_rect_t r = group_rect(c, e, ox, oy);
+        bool mx = false, my = false, fades = false;
+        for (uint32_t k = 0; k < a->count; k++)
+        {
+            mx = mx || offset(&a->frames[k].x, e->box.w) != 0;
+            my = my || offset(&a->frames[k].y, e->box.h) != 0;
+            fades = fades || a->frames[k].fades;
+        }
+        const char* base = (e->id != NULL) ? e->id : e->tag;
+        char name[48];
+        int32_t opacity = e->style->hidden ? 0 : e->style->opacity;
+        if (mx && d->bind[DMVSI_BIND_X] == 0)
+        {
+            Dmod_SnPrintf(name, sizeof(name), "%s_ax", base);
+            d->bind[DMVSI_BIND_X] = dmvsi_add_var(c->doc, name, r.x + offset(&a->frames[0].x, e->box.w));
+        }
+        if (my && d->bind[DMVSI_BIND_Y] == 0)
+        {
+            Dmod_SnPrintf(name, sizeof(name), "%s_ay", base);
+            d->bind[DMVSI_BIND_Y] = dmvsi_add_var(c->doc, name, r.y + offset(&a->frames[0].y, e->box.h));
+        }
+        if (fades && d->bind[DMVSI_BIND_OPACITY] == 0)
+        {
+            Dmod_SnPrintf(name, sizeof(name), "%s_aalpha", base);
+            d->bind[DMVSI_BIND_OPACITY] = dmvsi_add_var(c->doc, name, a->frames[0].opacity * opacity / 255);
+        }
+        Dmod_SnPrintf(name, sizeof(name), "%s_aphase", base);
+        a->phase = dmvsi_add_var(c->doc, name, 0);
+        Dmod_SnPrintf(name, sizeof(name), "%s_adue", base);
+        a->due = dmvsi_add_var(c->doc, name, 0);
+
+        /* Due: the next segment - to the next frame, in its time, by the timing of the frame it leaves */
+        uint32_t span = a->frames[a->count - 1U].at;
+        put(actions, &n, max, DMVSI_ACT_SET, left, a->due, 0);
+        put(actions, &n, max, DMVSI_ACT_SUB, left, DMVSI_VAR_TIME, 0);
+        put(actions, &n, max, DMVSI_ACT_IF_LE, left, 0, 0);
+        for (uint32_t k = 0; k + 1U < a->count; k++)
+        {
+            const frame_t* from = &a->frames[k];
+            const frame_t* to = &a->frames[k + 1U];
+            uint32_t ms = (uint32_t)((uint64_t)(to->at - from->at) * a->ms / ((span > 0) ? span : 1u));
+            if (ms == 0)
+                ms = 1;
+            const int16_t* easing = from->has_easing ? from->easing : e->style->animation_easing;
+            put(actions, &n, max, DMVSI_ACT_IF_EQ, a->phase, 0, (int32_t)k);
+            dmvsi_var_t vars[3] = { mx ? d->bind[DMVSI_BIND_X] : 0, my ? d->bind[DMVSI_BIND_Y] : 0,
+                                    fades ? d->bind[DMVSI_BIND_OPACITY] : 0 };
+            int32_t values[3] = { r.x + offset(&to->x, e->box.w), r.y + offset(&to->y, e->box.h), to->opacity * opacity / 255 };
+            for (int v = 0; v < 3; v++)
+            {
+                if (vars[v] == 0)
+                    continue;
+                put(actions, &n, max, DMVSI_ACT_ANIMATE, vars[v], 0, values[v]);
+                if (n > 0)
+                {
+                    actions[n - 1U].duration = (uint16_t)((ms > 60000u) ? 60000u : ms);
+                    memcpy(actions[n - 1U].easing, easing, sizeof(actions[n - 1U].easing));
+                }
+            }
+            /* due: from when it was due (not now: no drift) - unless far behind (the view was not running) */
+            put(actions, &n, max, DMVSI_ACT_ADD, a->due, 0, (int32_t)ms);
+            put(actions, &n, max, DMVSI_ACT_END, 0, 0, 0);
+        }
+        put(actions, &n, max, DMVSI_ACT_ADD, a->phase, 0, 1);
+        put(actions, &n, max, DMVSI_ACT_IF_GE, a->phase, 0, (int32_t)(a->count - 1U));
+        put(actions, &n, max, DMVSI_ACT_SET, a->phase, 0, 0);
+        put(actions, &n, max, DMVSI_ACT_END, 0, 0, 0);
+        put(actions, &n, max, DMVSI_ACT_SET, left, a->due, 0);
+        put(actions, &n, max, DMVSI_ACT_SUB, left, DMVSI_VAR_TIME, 0);
+        put(actions, &n, max, DMVSI_ACT_IF_LT, left, 0, -1000);
+        put(actions, &n, max, DMVSI_ACT_SET, a->due, DMVSI_VAR_TIME, 0);
+        put(actions, &n, max, DMVSI_ACT_END, 0, 0, 0);
+        put(actions, &n, max, DMVSI_ACT_END, 0, 0, 0);
+    }
+    if (status == 0 && n > 0)
+    {
+        dmvsi_handler_t h = dmvsi_add_handler(c->doc, actions, n);
+        if (h == 0 || dmvsi_add_timer(c->doc, POLL_MS, h) != 0)
+            status = -EINVAL;
+    }
+    Dmod_Free(actions);
+    Dmod_Free(anims);
+    return status;
+}
diff --git a/src/css.c b/src/css.c
index fa20c95..04d8654 100644
--- a/src/css.c
+++ b/src/css.c
@@ -1095,6 +1095,23 @@ static void parse_sheet(conv_t* c, const char* s, const char* end, const char* b
                 parse_sheet(c, body, close, base, layer, depth);
             else if (ieq(name, n, "font-face"))
                 font_face(c, body, close, base);
+            else if (ieq(name, n, "keyframes") || ieq(name, n, "-webkit-keyframes"))
+            {
+                /* Its name and block, read when an element is animated by it */
+                const char* k = skip(s, stop);
+                const char* e = k;
+                while (e < stop && is_name_char(*e))
+                    e++;
+                keyframes_t* kf = arena_alloc(&c->arena, sizeof(keyframes_t));
+                if (kf != NULL && e > k)
+                {
+                    kf->name = arena_strndup(&c->arena, k, (size_t)(e - k));
+                    kf->body = body;
+                    kf->length = (size_t)(close - body);
+                    kf->next = c->keyframes;
+                    c->keyframes = kf;
+                }
+            }
             s = (close < end) ? close + 1 : end;
             continue;
         }
diff --git a/src/dmvs_html.c b/src/dmvs_html.c
index af3b65e..0813e3c 100644
--- a/src/dmvs_html.c
+++ b/src/dmvs_html.c
@@ -665,6 +665,8 @@ dmod_dmvsi_dif_api_declaration(1.0, dmvs_html, int, _convert, ( const char* path
     }
     if (status == 0)
         status = script_compile(c);     /* What its scripts do: variables, handlers */
+    if (status == 0)
+        status = animate_page(c);       /* Its CSS animations: variables and a timer */
     if (status == 0)
         status = paint_page(c, c->document);
     script_free(c);
diff --git a/src/paint.c b/src/paint.c
index f1625f0..971f1d9 100644
--- a/src/paint.c
+++ b/src/paint.c
@@ -38,6 +38,7 @@ typedef struct
 } painter_t;
 
 static int32_t max32(int32_t a, int32_t b) { return (a > b) ? a : b; }
+static int32_t abs32(int32_t a) { return (a < 0) ? -a : a; }
 static int32_t min32(int32_t a, int32_t b) { return (a < b) ? a : b; }
 
 static bool displayed(const node_t* n)
@@ -314,7 +315,8 @@ static bool gradient_paint(const gradient_t* g, int32_t w, int32_t h, dmvsi_pain
  * contain, scale-down, none (its own size) - placed at x, y (%) and clipped
  * to r; blurred with the standard deviation `blur`
  */
-static void image_in(painter_t* p, const char* path, dmvsi_rect_t r, uint8_t fit, int16_t x, int16_t y, int32_t blur)
+static void image_in(painter_t* p, const char* path, dmvsi_rect_t r, uint8_t fit, int16_t x, int16_t y, int32_t blur,
+                     int32_t radius)
 {
     if (r.w <= 0 || r.h <= 0)
         return;
@@ -323,6 +325,7 @@ static void image_in(painter_t* p, const char* path, dmvsi_rect_t r, uint8_t fit
     im.rect = r;
     im.path = path;
     im.blur = blur;
+    im.radius = min32(radius, min32(r.w, r.h) / 2);
     int32_t iw = 0, ih = 0;
     if (fit != FIT_NONE && image_size(path, &iw, &ih) && iw > 0 && ih > 0)
     {
@@ -427,7 +430,8 @@ static void paint_box(painter_t* p, const style_t* st, dmvsi_rect_t r, const int
         fill(p, r, radius, &paint, st);
     }
     if (st->background_url != NULL && st != p->canvas && !p->shadow)
-        image_in(p, st->background_url, r, st->background_size, st->background_x, st->background_y, st->blur);
+        image_in(p, st->background_url, r, st->background_size, st->background_x, st->background_y, st->blur,
+                 whole_view(p, &r) ? 0 : radius_of(st, r.w, r.h));
     if (st->background_image != NULL && st != p->canvas && gradient_paint(st->background_image, r.w, r.h, &paint))
         fill(p, r, radius, &paint, st);
 
@@ -621,6 +625,32 @@ static void paint_lines(painter_t* p, const node_t* n)
     }
 }
 
+/*
+ * The corners an image is seen with: its own border-radius, or that of a box
+ * around it that clips (overflow: hidden) and that it fills - a cover in a
+ * round frame (rounded-full overflow-hidden). dmview clips square: the
+ * image's .dmvi is made round (todmvs, todmvi)
+ */
+static int32_t image_radius(painter_t* p, const node_t* n, const dmvsi_rect_t* shown)
+{
+    int32_t own = radius_of(n->style, shown->w, shown->h);
+    if (own > 0)
+        return own;
+    const node_t* a = n->parent;
+    for (uint32_t up = 0; a != NULL && a->kind == NODE_ELEMENT && a->style != NULL && up < 3u; a = a->parent, up++)
+    {
+        dmvsi_rect_t r = border_box(p, a);
+        dmvsi_rect_t in = inner(&r, a->box.b);
+        int32_t radius = radius_of(a->style, r.w, r.h);
+        if (radius <= 0 || !clips(a->style))
+            continue;
+        bool fills = abs32(in.x - shown->x) <= U && abs32(in.y - shown->y) <= U && abs32(in.w - shown->w) <= U &&
+                     abs32(in.h - shown->h) <= U;
+        return fills ? max32(radius - max32(a->box.b[0], a->box.b[3]), 0) : 0;
+    }
+    return 0;
+}
+
 static void paint_image(painter_t* p, const node_t* n)
 {
     const char* src = node_attr(n, "src");
@@ -630,7 +660,8 @@ static void paint_image(painter_t* p, const node_t* n)
     dmvsi_rect_t r = border_box(p, n);
     dmvsi_rect_t b = inner(&r, n->box.b);
     const style_t* st = n->style;
-    image_in(p, path, inner(&b, n->box.p), st->object_fit, st->object_x, st->object_y, st->blur);
+    dmvsi_rect_t shown = inner(&b, n->box.p);
+    image_in(p, path, shown, st->object_fit, st->object_x, st->object_y, st->blur, image_radius(p, n, &shown));
 }
 
 /* An inline <svg>: its subtree as an SVG file of its content box's size */
diff --git a/src/private.h b/src/private.h
index fefb203..e833e62 100644
--- a/src/private.h
+++ b/src/private.h
@@ -409,6 +409,12 @@ struct style
     uint8_t     timing_count;
     int16_t     transition_easing[MAX_TRANSITIONS][4];
 
+    const char* animation;                          /* animation-name (NULL: none) ... */
+    uint32_t    animation_ms;                       /* ... -duration */
+    int16_t     animation_easing[4];                /* ... -timing-function (1/1000) */
+    bool        animation_infinite;                 /* ... -iteration-count: infinite (else once) */
+    bool        animation_alternate;                /* ... -direction: alternate */
+
     shadow_t    shadows[MAX_SHADOWS];               /* box-shadow, the first on top */
     uint8_t     shadow_count;
     shadow_t    drops[MAX_SHADOWS];                 /* filter: drop-shadow() */
@@ -476,6 +482,16 @@ typedef struct
     const char*     value;
 } mod_t;
 
+/* @keyframes of the style sheets: their names and blocks (anim.c reads them) */
+typedef struct keyframes keyframes_t;
+struct keyframes
+{
+    keyframes_t*    next;
+    const char*     name;
+    const char*     body;
+    size_t          length;
+};
+
 /* What a script builds in an element of the page as it loads (build.c): emptied, then markup appended */
 typedef struct
 {
@@ -489,6 +505,7 @@ typedef struct
     arena_t                 arena;
     const char*             path;                   /* The page */
     const dom_t*            dom;                    /* What the scripts build, applied after parsing (before mods) */
+    keyframes_t*            keyframes;
     uint32_t                dom_count;
     const mod_t*            mods;                   /* Applied after parsing (run_layout()) */
     uint32_t                mod_count;
@@ -575,6 +592,9 @@ void    script_free(conv_t* c);                     /* The states it laid out (a
 /* style.c: the transition of a property (TRANSITION_POSITION, _OPACITY) - false when none */
 bool    style_transition(const style_t* st, uint8_t what, uint16_t* ms, int16_t* easing);
 
+/* anim.c: CSS animations (of a box's position and opacity) as the view's variables and a timer */
+int     animate_page(conv_t* c);
+
 /* dmvs_html.c: a page laid out as it is, or with what a script changed (state.c) */
 int     run_layout(conv_t* c);
 
diff --git a/src/style.c b/src/style.c
index ab22ffc..05410c1 100644
--- a/src/style.c
+++ b/src/style.c
@@ -1260,6 +1260,53 @@ static void transition_timings(style_t* st, const char* v)
 }
 
 /* transition: property duration [timing] [delay], ... */
+/* animation: name duration [timing] [delay] [infinite | n] [alternate | normal] ... (the first of a list) */
+static void animation_shorthand(conv_t* c, style_t* st, const char* v)
+{
+    static const int16_t ease[4] = { 250, 100, 250, 1000 };
+    const char* s = skip(v);
+    st->animation = NULL;
+    st->animation_ms = 0;
+    st->animation_infinite = false;
+    st->animation_alternate = false;
+    memcpy(st->animation_easing, ease, sizeof(ease));
+    if (word_is(s, "none"))
+        return;
+    bool has_time = false;
+    while (*s != '\0' && *s != ',')
+    {
+        s = skip(s);
+        if (*s == '\0' || *s == ',')
+            break;
+        uint16_t ms;
+        int16_t curve[4];
+        if (parse_time(&s, &ms))
+        {
+            if (!has_time)
+                st->animation_ms = ms;
+            has_time = true;
+            continue;
+        }
+        if (parse_timing(&s, curve))
+        {
+            memcpy(st->animation_easing, curve, sizeof(curve));
+            continue;
+        }
+        const char* start = s;
+        while (*s != '\0' && *s != ',' && !is_space(*s))
+            s++;
+        size_t n = (size_t)(s - start);
+        if (n == 8 && strncmp(start, "infinite", 8) == 0)
+            st->animation_infinite = true;
+        else if ((n == 9 && strncmp(start, "alternate", 9) == 0) || (n == 17 && strncmp(start, "alternate-reverse", 17) == 0))
+            st->animation_alternate = true;
+        else if (n > 0 && !((start[0] >= '0' && start[0] <= '9') || strncmp(start, "normal", n) == 0 ||
+                            strncmp(start, "forwards", n) == 0 || strncmp(start, "backwards", n) == 0 ||
+                            strncmp(start, "both", n) == 0 || strncmp(start, "running", n) == 0 || strncmp(start, "paused", n) == 0))
+            st->animation = arena_strndup(&c->arena, start, n);
+    }
+}
+
 static void transition_shorthand(style_t* st, const char* v)
 {
     static const int16_t ease[4] = { 250, 100, 250, 1000 };
@@ -2077,6 +2124,7 @@ static void apply(apply_t* a, const char* name, const char* v)
     }
     if (strcmp(name, "content") == 0) { parse_content(a, v); return; }
     if (strcmp(name, "transition") == 0) { transition_shorthand(st, v); return; }
+    if (strcmp(name, "animation") == 0) { animation_shorthand(a->c, st, v); return; }
     if (strcmp(name, "transition-property") == 0) { transition_properties(st, v); return; }
     if (strcmp(name, "transition-duration") == 0) { transition_durations(st, v); return; }
     if (strcmp(name, "transition-timing-function") == 0) { transition_timings(st, v); return; }
diff --git a/src/tailwind.c b/src/tailwind.c
index 248b237..09d7953 100644
--- a/src/tailwind.c
+++ b/src/tailwind.c
@@ -186,7 +186,12 @@ const char tailwind_preflight[] =
     "dialog{padding:0}"
     "audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}"
     "img,video{max-width:100%;height:auto}"
-    "[hidden]{display:none}";
+    "[hidden]{display:none}"
+    "@keyframes spin{to{transform:rotate(360deg)}}"
+    "@keyframes ping{75%,100%{transform:scale(2);opacity:0}}"
+    "@keyframes pulse{50%{opacity:.5}}"
+    "@keyframes bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)}"
+    "50%{transform:none;animation-timing-function:cubic-bezier(0,0,0.2,1)}}";
 
 /* ---- Building declarations ---- */
 
@@ -1292,6 +1297,20 @@ static bool transitions(out_t* o, const char* u, uint32_t* rank)
         }
         return false;
     }
+    if (starts(u, "animate-", &v))
+    {
+        static const struct { char name[8]; char value[48]; } animations[] = {
+            { "none", "none" }, { "spin", "spin 1s linear infinite" },
+            { "ping", "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+            { "pulse", "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" }, { "bounce", "bounce 1s infinite" },
+        };
+        const char* a = LOOKUP(animations, v);
+        if (a == NULL && !arbitrary(v, value, sizeof(value)))
+            return false;
+        decl(o, "animation", (a != NULL) ? a : value);
+        *rank = R_TRANSITION;
+        return true;
+    }
     if (starts(u, "duration-", &v) && is_number(v))
     {
         Dmod_SnPrintf(value, sizeof(value), "%sms", v);
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index 483833e..de61452 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -682,3 +682,39 @@ DMOD_TEST_STEP(dmvs_html_converts_what_scripts_build)
     DMOD_TEST_EXPECT_TRUE(count_texts(root->first, "Two") >= 2u);
     dmvsi_free(doc);
 }
+
+DMOD_TEST_STEP(dmvs_html_converts_css_animations)
+{
+    int status = -1;
+    DMOD_TEST_EXPECT_TRUE(write_file(TEST_FILE("anim.html"),
+        "<!DOCTYPE html><html><head><style>"
+        "body { margin: 0 } #screen { width: 100px; height: 40px }"
+        "@keyframes bob { 0%, 100% { transform: translateY(-4px); animation-timing-function: ease-in } 50% { transform: none } }"
+        "#bar { width: 3px; height: 12px; margin-top: 10px; background: #36f; animation: bob 0.8s infinite alternate }"
+        "</style></head><body><div id=\"screen\"><div id=\"bar\"></div></div></body></html>"));
+    dmvsi_doc_t doc = convert(TEST_FILE("anim.html"), "screen", 0, 0, &status);
+    DMOD_TEST_EXPECT_EQ(status, 0);
+    if (doc == NULL)
+        return;
+    /* Its y a variable, 4 px up as it starts; a timer moving it there and back, 400 ms each way */
+    const dmvsi_node_t* bar = group_named(dmvsi_root(doc)->first, "bar");
+    DMOD_TEST_EXPECT_TRUE(bar != NULL && bar->bind[DMVSI_BIND_Y] != 0);
+    if (bar != NULL)
+        DMOD_TEST_EXPECT_EQ(var_initial(doc, bar->bind[DMVSI_BIND_Y]), DMVSI_PX(6));
+    uint16_t ms = 0;
+    dmvsi_handler_t h = 0;
+    DMOD_TEST_EXPECT_TRUE(dmvsi_timer_at(doc, 0, &ms, &h) && ms == 20u);
+    const dmvsi_action_t* a = NULL;
+    uint32_t n = (h != 0) ? dmvsi_handler_actions(doc, h, &a) : 0;
+    uint32_t animates = 0, down = 0;
+    for (uint32_t i = 0; i < n; i++)
+    {
+        if (a[i].kind != DMVSI_ACT_ANIMATE || bar == NULL || a[i].var != bar->bind[DMVSI_BIND_Y])
+            continue;
+        animates++;
+        down += (a[i].value == DMVSI_PX(10) && a[i].duration == 400 && a[i].easing[0] == 420) ? 1U : 0U;
+    }
+    DMOD_TEST_EXPECT_EQ(animates, 4u);              /* 0 -> 50 -> 100, and back */
+    DMOD_TEST_EXPECT_TRUE(down >= 1u);
+    dmvsi_free(doc);
+}

From 648c1896debf66464fcc473855920563e5576832 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sat, 10 Oct 2026 18:26:14 +0200
Subject: [PATCH 09/11] dmvs_html: dmvsi 0.5 (an image's radius)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CMakeLists.txt       | 2 +-
 tests/CMakeLists.txt | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CMakeLists.txt b/CMakeLists.txt
index de194fb..5cbbab7 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -76,7 +76,7 @@ dmod_add_library(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
 )
 
 dmod_link_modules(${DMOD_MODULE_NAME}
-    dmvsi@>=0.4
+    dmvsi@>=0.5
     dmvs_js@>=0.1
 )
 
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 6e9bc72..419e63f 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -9,7 +9,7 @@ dmod_add_test(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
 )
 
 dmod_link_modules(${DMOD_MODULE_NAME}
-    dmvsi@>=0.2
+    dmvsi@>=0.5
 )
 
 target_compile_definitions(${DMOD_MODULE_NAME} PRIVATE

From aaac870c6cb51fb9ce21216bdbebb83cfe063707 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sun, 11 Oct 2026 10:48:17 +0200
Subject: [PATCH 10/11] tests: the test module requires dmvs_js too

dmvs_html loads dmvs_js to convert a page's scripts, so every conversion
in the tests needs it installed. CI installs only what the test module's
.dmd lists (dmf-get install -d), which was dmvsi alone: all 11 steps
failed with "Cannot load required module 'dmvs_js'". It passed locally
because dmvs_js was already installed.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 tests/CMakeLists.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 419e63f..135c6a9 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -8,8 +8,10 @@ dmod_add_test(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
     dmvs_html_test.c
 )
 
+# dmvs_js: dmvs_html needs it loaded to convert a page's scripts
 dmod_link_modules(${DMOD_MODULE_NAME}
     dmvsi@>=0.5
+    dmvs_js@>=0.1
 )
 
 target_compile_definitions(${DMOD_MODULE_NAME} PRIVATE

From 50ac9241d66ce0af690fa3e770afefe4c89a64cd Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Sun, 11 Oct 2026 10:51:17 +0200
Subject: [PATCH 11/11] CI: install the dependencies of dmvs_html too

The test's .dmd lists what the test itself imports (dmvsi). dmvs_js is
imported by dmvs_html, the module under test, so only its .dmd lists it:
CI installed one package and every step failed with "Cannot load
required module 'dmvs_js'". The ctest command had the same gap.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 .github/workflows/ci.yml | 2 ++
 tests/CMakeLists.txt     | 5 +++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 4a584ee..b6b1e95 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -38,5 +38,7 @@ jobs:
       - name: Run tests with dmod_loader
         run: |
           export DMOD_DMF_DIR=$(pwd)/build/dmf
+          # The test's own dependencies, and dmvs_html's (dmvs_js: the test does not call it, the module does)
           dmf-get install -d ${DMOD_DMF_DIR}/test_dmvs_html-local.dmd -y
+          dmf-get install -d ${DMOD_DMF_DIR}/dmvs_html-local.dmd -y
           dmod_loader build/dmf/test_dmvs_html.dmf
diff --git a/tests/CMakeLists.txt b/tests/CMakeLists.txt
index 135c6a9..ecc20bd 100644
--- a/tests/CMakeLists.txt
+++ b/tests/CMakeLists.txt
@@ -20,7 +20,8 @@ target_compile_definitions(${DMOD_MODULE_NAME} PRIVATE
 )
 
 # Register the test module with ctest - this replays the same two steps CI
-# runs: install the test module's dependencies with dmf-get, then execute it
+# runs: install the dependencies of the test module and of dmvs_html (the module
+# under test) with dmf-get, then execute it
 # through dmod_loader. The test's exit code equals its number of failed steps.
 find_program(DMF_GET_EXECUTABLE dmf-get HINTS ${DMOD_TOOLS_BIN_DIR} PATHS ENV PATH)
 find_program(DMOD_LOADER_EXECUTABLE dmod_loader HINTS ${DMOD_TOOLS_BIN_DIR} PATHS ENV PATH)
@@ -29,7 +30,7 @@ if(DMF_GET_EXECUTABLE AND DMOD_LOADER_EXECUTABLE)
     add_test(
         NAME ${DMOD_MODULE_NAME}
         COMMAND ${CMAKE_COMMAND} -E env DMOD_DMF_DIR=${DMOD_DMF_DIR}
-            bash -c "${DMF_GET_EXECUTABLE} install -d ${DMOD_DMF_DIR}/${DMOD_MODULE_NAME}-local.dmd -y && ${DMOD_LOADER_EXECUTABLE} ${DMOD_DMF_DIR}/${DMOD_MODULE_NAME}.dmf"
+            bash -c "${DMF_GET_EXECUTABLE} install -d ${DMOD_DMF_DIR}/${DMOD_MODULE_NAME}-local.dmd -y && ${DMF_GET_EXECUTABLE} install -d ${DMOD_DMF_DIR}/dmvs_html-local.dmd -y && ${DMOD_LOADER_EXECUTABLE} ${DMOD_DMF_DIR}/${DMOD_MODULE_NAME}.dmf"
     )
 else()
     message(WARNING "dmf-get/dmod_loader not found - 'ctest' will not run ${DMOD_MODULE_NAME}. Build the tools first with -DDMOD_BUILD_TOOLS=ON")