xbintsc 0.5.31 → 0.5.32

package/runtime/ext_gui/clip_values.cpp

@@ -0,0 +1,246 @@
+/*
+ * xbintsc GUI engine — `clip-path` value parsing.
+ *
+ * The geometry is resolved in `paint_clip.cpp`, where the element's border box
+ * and transform are known. Values here keep CSS lengths unresolved so `%`, em
+ * and viewport units survive the cascade.
+ */
+#include <cctype>
+#include <string>
+#include <utility>
+#include <vector>
+
+#include "css_internal.h"
+#include "style_internal.h"
+#include "style_values_internal.h"
+
+namespace xtgui {
+
+namespace {
+
+std::vector<std::string> splitTokens(const std::string &text) {
+  std::vector<std::string> parts;
+  std::string current;
+  int depth = 0;
+  for (char c : text) {
+    if (c == '(') depth++;
+    if (c == ')') depth--;
+    if ((c == ' ' || c == '\t' || c == '\n' || c == '\r' || c == ',') && depth == 0) {
+      if (!current.empty()) {
+        parts.push_back(current);
+        current.clear();
+      }
+    } else {
+      current.push_back(c);
+    }
+  }
+  if (!current.empty()) parts.push_back(current);
+  return parts;
+}
+
+/** Split `text` on a top-level keyword (`at` / `round`), keeping both sides. */
+bool splitKeyword(const std::string &text, const std::string &keyword, std::string *left,
+                  std::string *right) {
+  std::string lower = xt_css_lower(text);
+  int depth = 0;
+  for (size_t i = 0; i + keyword.size() <= text.size(); i++) {
+    char c = text[i];
+    if (c == '(') depth++;
+    else if (c == ')') depth--;
+    if (depth != 0) continue;
+    if (lower.compare(i, keyword.size(), keyword) != 0) continue;
+    bool before = i == 0 || xt_is_css_space(text[i - 1]) || text[i - 1] == ',';
+    bool after = i + keyword.size() >= text.size() ||
+                 xt_is_css_space(text[i + keyword.size()]) || text[i + keyword.size()] == ',';
+    if (!before || !after) continue;
+    *left = xt_css_trim(text.substr(0, i));
+    *right = xt_css_trim(text.substr(i + keyword.size()));
+    return true;
+  }
+  return false;
+}
+
+bool parsePositionToken(const std::string &raw, Length *out, bool *vertical) {
+  std::string text = xt_css_lower(xt_css_trim(raw));
+  if (text == "left") { *out = {0.0f, Unit::Percent}; *vertical = false; return true; }
+  if (text == "right") { *out = {100.0f, Unit::Percent}; *vertical = false; return true; }
+  if (text == "top") { *out = {0.0f, Unit::Percent}; *vertical = true; return true; }
+  if (text == "bottom") { *out = {100.0f, Unit::Percent}; *vertical = true; return true; }
+  if (text == "center") { *out = {50.0f, Unit::Percent}; *vertical = false; return true; }
+  Length length = xt_css_parse_length(text);
+  if (length.unit == Unit::Invalid || length.unit == Unit::Auto || length.unit == Unit::None)
+    return false;
+  *out = length;
+  *vertical = false;
+  return true;
+}
+
+bool parseCenter(const std::string &text, Length *x, Length *y) {
+  std::vector<std::string> tokens = splitTokens(text);
+  if (tokens.empty() || tokens.size() > 2) return false;
+  Length values[2];
+  bool vertical[2] = {false, false};
+  for (size_t i = 0; i < tokens.size(); i++) {
+    if (!parsePositionToken(tokens[i], &values[i], &vertical[i])) return false;
+  }
+  if (tokens.size() == 1) {
+    if (vertical[0]) {
+      *x = {50.0f, Unit::Percent};
+      *y = values[0];
+    } else {
+      *x = values[0];
+      *y = {50.0f, Unit::Percent};
+    }
+    return true;
+  }
+  if (vertical[0] && !vertical[1]) {
+    *x = values[1];
+    *y = values[0];
+  } else {
+    *x = values[0];
+    *y = values[1];
+  }
+  return true;
+}
+
+/** Parse the 1–4 side lengths of `inset(...)` and an optional round radius. */
+bool parseInset(const std::string &body, ClipPathSpec *spec) {
+  std::string sides = body;
+  std::string round;
+  if (splitKeyword(body, "round", &sides, &round)) {
+    std::vector<std::string> radiusTokens = splitTokens(round);
+    if (!radiusTokens.empty()) {
+      Length radius = xt_css_parse_length(radiusTokens[0]);
+      if (radius.unit != Unit::Invalid && radius.unit != Unit::Auto &&
+          radius.unit != Unit::None)
+        spec->inset_radius = radius;
+    }
+  }
+  std::vector<std::string> tokens = splitTokens(sides);
+  if (tokens.empty() || tokens.size() > 4) return false;
+  Length values[4];
+  for (size_t i = 0; i < tokens.size(); i++) {
+    values[i] = xt_css_parse_length(tokens[i]);
+    if (values[i].unit == Unit::Invalid) return false;
+  }
+  switch (tokens.size()) {
+    case 1:
+      spec->inset_top = spec->inset_right = spec->inset_bottom = spec->inset_left = values[0];
+      break;
+    case 2:
+      spec->inset_top = spec->inset_bottom = values[0];
+      spec->inset_right = spec->inset_left = values[1];
+      break;
+    case 3:
+      spec->inset_top = values[0];
+      spec->inset_right = spec->inset_left = values[1];
+      spec->inset_bottom = values[2];
+      break;
+    default:
+      spec->inset_top = values[0];
+      spec->inset_right = values[1];
+      spec->inset_bottom = values[2];
+      spec->inset_left = values[3];
+      break;
+  }
+  spec->type = ClipPathSpec::Type::Inset;
+  return true;
+}
+
+bool parseCircle(const std::string &body, ClipPathSpec *spec) {
+  std::string radius;
+  std::string center;
+  if (splitKeyword(body, "at", &radius, &center)) {
+    if (!parseCenter(center, &spec->center_x, &spec->center_y)) return false;
+  } else {
+    radius = body;
+  }
+  std::vector<std::string> tokens = splitTokens(radius);
+  if (!tokens.empty()) {
+    Length length = xt_css_parse_length(tokens[0]);
+    if (length.unit == Unit::Invalid) return false;
+    spec->radius_x = length;
+    spec->radius_y = length;
+    spec->radius_explicit = true;
+  }
+  spec->type = ClipPathSpec::Type::Circle;
+  return true;
+}
+
+bool parseEllipse(const std::string &body, ClipPathSpec *spec) {
+  std::string radii = body;
+  std::string center;
+  splitKeyword(body, "at", &radii, &center);
+  if (!center.empty() && !parseCenter(center, &spec->center_x, &spec->center_y)) return false;
+  std::vector<std::string> tokens = splitTokens(radii);
+  if (!tokens.empty()) {
+    Length rx = xt_css_parse_length(tokens[0]);
+    Length ry = tokens.size() > 1 ? xt_css_parse_length(tokens[1]) : rx;
+    if (rx.unit == Unit::Invalid || ry.unit == Unit::Invalid) return false;
+    spec->radius_x = rx;
+    spec->radius_y = ry;
+    spec->radius_explicit = true;
+  }
+  spec->type = ClipPathSpec::Type::Ellipse;
+  return true;
+}
+
+bool parsePolygon(const std::string &body, ClipPathSpec *spec) {
+  std::string text = xt_css_trim(body);
+  std::string lower = xt_css_lower(text);
+  if (lower.rfind("nonzero", 0) == 0) text = xt_css_trim(text.substr(7));
+  else if (lower.rfind("evenodd", 0) == 0) text = xt_css_trim(text.substr(7));
+  /* Pairs are separated by commas in CSS, but whitespace is accepted too. */
+  std::vector<std::string> tokens = splitTokens(text);
+  if (tokens.size() < 3) return false;
+  std::vector<Length> points;
+  for (const std::string &token : tokens) {
+    Length length = xt_css_parse_length(token);
+    if (length.unit == Unit::Invalid) return false;
+    points.push_back(length);
+  }
+  if (points.size() < 3) return false;
+  if (points.size() % 2 != 0) points.pop_back();
+  spec->polygon = std::move(points);
+  spec->type = ClipPathSpec::Type::Polygon;
+  return true;
+}
+
+}  // namespace
+
+bool xt_style_apply_clip_path(XtStyle *style, const std::string &property,
+                              const std::string &value) {
+  if (property != "clip-path") return false;
+  std::string text = xt_css_trim(value);
+  std::string lower = xt_css_lower(text);
+  ClipPathSpec spec;
+  if (lower == "none" || text.empty()) {
+    style->clip_path = spec;
+    return true;
+  }
+  if (text.size() < 8 || text.back() != ')') {
+    style->clip_path = spec;
+    return true;
+  }
+  if (lower.rfind("inset(", 0) == 0) {
+    if (parseInset(text.substr(6, text.size() - 7), &spec)) style->clip_path = spec;
+    return true;
+  }
+  if (lower.rfind("circle(", 0) == 0) {
+    if (parseCircle(text.substr(7, text.size() - 8), &spec)) style->clip_path = spec;
+    return true;
+  }
+  if (lower.rfind("ellipse(", 0) == 0) {
+    if (parseEllipse(text.substr(8, text.size() - 9), &spec)) style->clip_path = spec;
+    return true;
+  }
+  if (lower.rfind("polygon(", 0) == 0) {
+    if (parsePolygon(text.substr(8, text.size() - 9), &spec)) style->clip_path = spec;
+    return true;
+  }
+  /* `url(#…)`, `path()` and other shapes are not part of the subset. */
+  style->clip_path = spec;
+  return true;
+}
+
+}  // namespace xtgui

package/runtime/ext_gui/css.cpp

@@ -45,6 +45,39 @@ std::vector<std::string> xt_css_split_whitespace(const std::string &text) {
   return parts;
 }
 
+std::vector<std::string> xt_css_split_commas(const std::string &text) {
+  std::vector<std::string> parts;
+  std::string current;
+  int depth = 0;
+  char quote = 0;
+  for (char c : text) {
+    if (quote != 0) {
+      current.push_back(c);
+      if (c == quote) quote = 0;
+      continue;
+    }
+    if (c == '"' || c == '\'') {
+      quote = c;
+      current.push_back(c);
+    } else if (c == '(' || c == '[') {
+      depth++;
+      current.push_back(c);
+    } else if (c == ')' || c == ']') {
+      if (depth > 0) depth--;
+      current.push_back(c);
+    } else if (c == ',' && depth == 0) {
+      std::string part = xt_css_trim(current);
+      if (!part.empty()) parts.push_back(part);
+      current.clear();
+    } else {
+      current.push_back(c);
+    }
+  }
+  std::string part = xt_css_trim(current);
+  if (!part.empty()) parts.push_back(part);
+  return parts;
+}
+
 /* -- numbers / lengths / colors ------------------------------------------- */
 
 bool xt_css_parse_number(const std::string &value, float *out) {
@@ -59,6 +92,60 @@ bool xt_css_parse_number(const std::string &value, float *out) {
   return true;
 }
 
+
+/** Split a CSS function's argument list at top-level commas. */
+static std::vector<std::string> splitFunctionArgs(const std::string &text) {
+  std::vector<std::string> args;
+  std::string current;
+  int depth = 0;
+  for (char c : text) {
+    if (c == '(') depth++;
+    if (c == ')') depth--;
+    if (c == ',' && depth == 0) {
+      args.push_back(xt_css_trim(current));
+      current.clear();
+    } else {
+      current.push_back(c);
+    }
+  }
+  if (!current.empty() || !args.empty()) args.push_back(xt_css_trim(current));
+  return args;
+}
+
+/** `clamp(min, value, max)`, `min(...)` and `max(...)` over lengths. The
+ * arguments stay unresolved; layout resolves them against the element's em and
+ * the viewport. `env(safe-area-inset-*)` has no notch information in a desktop
+ * window, so it resolves to zero (its fallback is ignored, matching the
+ * browser's value without insets). */
+static Length parseFunctionLength(const std::string &name, const std::string &inner) {
+  Length result;
+  if (name == "env") {
+    result.unit = Unit::Px;
+    return result;
+  }
+  if (name != "clamp" && name != "min" && name != "max") {
+    result.unit = Unit::Invalid;
+    return result;
+  }
+  std::vector<std::string> args = splitFunctionArgs(inner);
+  size_t expected = name == "clamp" ? 3 : 1;
+  if (args.size() < expected) {
+    result.unit = Unit::Invalid;
+    return result;
+  }
+  result.unit = name == "clamp" ? Unit::Clamp : (name == "min" ? Unit::Min : Unit::Max);
+  for (const std::string &arg : args) {
+    Length value = xt_css_parse_length(arg);
+    if (value.unit == Unit::Invalid) {
+      result.unit = Unit::Invalid;
+      result.args.clear();
+      return result;
+    }
+    result.args.push_back(value);
+  }
+  return result;
+}
+
 Length xt_css_parse_length(const std::string &value) {
   Length length;
   std::string text = xt_css_lower(xt_css_trim(value));
@@ -74,6 +161,13 @@ Length xt_css_parse_length(const std::string &value) {
     length.unit = Unit::None;
     return length;
   }
+  size_t open = text.find('(');
+  if (open != std::string::npos && !text.empty() && text.back() == ')') {
+    std::string name = text.substr(0, open);
+    if (name == "clamp" || name == "min" || name == "max" || name == "env") {
+      return parseFunctionLength(name, text.substr(open + 1, text.size() - open - 2));
+    }
+  }
   char *end = nullptr;
   float number = strtof(text.c_str(), &end);
   if (end == text.c_str()) {

package/runtime/ext_gui/css.h

@@ -17,11 +17,15 @@
 
 namespace xtgui {
 
-enum class Unit { Auto, None, Px, Percent, Em, Rem, Vw, Vh, Number, Invalid };
+enum class Unit { Auto, None, Px, Percent, Em, Rem, Vw, Vh, Number, Clamp, Min, Max, Invalid };
 
 struct Length {
   float value = 0.0f;
   Unit unit = Unit::Auto;
+  /* Arguments of `clamp(...)`, `min(...)` and `max(...)`; empty for a scalar
+   * length. Kept unresolved so vw/vh/em are resolved against the element that
+   * uses the length, not the viewport at parse time. */
+  std::vector<Length> args = {};
 };
 
 struct Color {
@@ -52,6 +56,9 @@ struct CompoundSelector {
   std::vector<std::string> classes;
   std::vector<AttrSelector> attrs;
   std::vector<std::string> pseudoClasses;
+  /** `before`/`after` for a `::before`/`::after` (or legacy `:before`)
+   * pseudo-element; empty for an ordinary selector. */
+  std::string pseudo_element;
 };
 
 enum class Combinator { Descendant, Child, Adjacent, Sibling };
@@ -66,6 +73,10 @@ struct Rule {
   std::vector<ComplexSelector> selectors;
   std::vector<Declaration> declarations;
   int order = 0;
+  /** Raw `@media` prelude this rule came from (empty = unconditional). The
+   * query is evaluated against the current viewport during the cascade, so a
+   * resize restyles with the right rules. */
+  std::string media;
 };
 
 struct StyleSheet {
@@ -85,6 +96,16 @@ std::vector<Declaration> xt_css_parse_declarations(const std::string &text);
 bool xt_css_match(const Node *node, const ComplexSelector &selector);
 bool xt_css_match(const Node *node, const ComplexSelector &selector, const MatchState &state);
 
+/** True when a raw `@media` prelude matches a viewport. Supports media types
+ * (`all`/`screen`), comma-separated query lists, `not`/`only`, `and`, and the
+ * width/height/orientation/hover/pointer/colour-scheme features (with
+ * `min-`/`max-` ranges). Unknown features never match, as in a browser. */
+bool xt_css_media_matches(const std::string &query, float viewport_width, float viewport_height);
+
+/** Split `text` at top-level commas (outside `(...)`, `[...]` and quotes),
+ * trimming each part and dropping empty ones. */
+std::vector<std::string> xt_css_split_commas(const std::string &text);
+
 Length xt_css_parse_length(const std::string &value);
 Color xt_css_parse_color(const std::string &value);
 bool xt_css_parse_number(const std::string &value, float *out);

package/runtime/ext_gui/css_match.cpp

@@ -132,6 +132,9 @@ bool matchPseudo(const Node *node, const std::string &pseudo, const MatchState &
 
 bool matchCompound(const Node *node, const CompoundSelector &compound, const MatchState &state) {
   if (!node->isElement()) return false;
+  /* A pseudo-element selector matches a generated node, never the origin
+   * element; the cascade matches it separately in `style.cpp`. */
+  if (!compound.pseudo_element.empty()) return false;
   if (!compound.tag.empty() && node->tag != compound.tag) return false;
   if (!compound.id.empty()) {
     const std::string *id = node->attr("id");

package/runtime/ext_gui/css_selector.cpp

@@ -72,6 +72,13 @@ class SelectorParser {
         }
         std::string name = xt_css_lower(readIdent(text, index));
         if (name.empty()) return false;
+        /* `::before`/`::after` are generated-content elements, not states. The
+         * single-colon spellings (`:before`) are the legacy equivalent. */
+        if (pseudoElement || name == "before" || name == "after") {
+          compound->pseudo_element = name;
+          any = true;
+          continue;
+        }
         if (!pseudoElement && *index < text.size() && text[*index] == '(') {
           int depth = 0;
           size_t start = *index;
@@ -192,6 +199,8 @@ class SelectorParser {
       if (!compound.id.empty()) ids++;
       classes += computeCompoundSpecificity(compound);
       if (!compound.tag.empty()) types++;
+      /* A pseudo-element counts like a type selector (CSS specificity). */
+      if (!compound.pseudo_element.empty()) types++;
     }
     return (ids << 20) | (classes << 10) | types;
   }

package/runtime/ext_gui/css_sheet.cpp

@@ -1,5 +1,9 @@
 /*
  * xbintsc GUI engine — CSS declaration and stylesheet parsing.
+ *
+ * At-rules are no longer all skipped: `@media` blocks are parsed recursively
+ * and each rule keeps its (possibly nested) query, which the cascade evaluates
+ * against the viewport. Every other at-rule is ignored with its block.
  */
 
 #include "css_internal.h"
@@ -41,6 +45,42 @@ size_t findTopLevel(const std::string &text, char needle, size_t from) {
   return std::string::npos;
 }
 
+/** The `}` matching the `{` at `open`, respecting strings and nested blocks. */
+size_t findBlockEnd(const std::string &text, size_t open) {
+  int depth = 0;
+  char quote = 0;
+  for (size_t i = open; i < text.size(); i++) {
+    char c = text[i];
+    if (quote != 0) {
+      if (c == quote) quote = 0;
+      continue;
+    }
+    if (c == '"' || c == '\'') quote = c;
+    else if (c == '{') depth++;
+    else if (c == '}') {
+      depth--;
+      if (depth == 0) return i;
+    }
+  }
+  return std::string::npos;
+}
+
+/** Join a nested `@media` prelude: distribute `inner` over an outer comma list. */
+std::string combineMedia(const std::string &outer, const std::string &inner) {
+  if (outer.empty()) return inner;
+  if (inner.empty()) return outer;
+  std::vector<std::string> outerParts = xt_css_split_commas(outer);
+  std::vector<std::string> innerParts = xt_css_split_commas(inner);
+  std::string combined;
+  for (const std::string &o : outerParts) {
+    for (const std::string &i : innerParts) {
+      if (!combined.empty()) combined += ", ";
+      combined += o + " and " + i;
+    }
+  }
+  return combined;
+}
+
 std::string stripImportant(std::string value, bool *important) {
   size_t pos = value.rfind('!');
   if (pos == std::string::npos) return value;
@@ -52,6 +92,54 @@ std::string stripImportant(std::string value, bool *important) {
   return value;
 }
 
+/** Parse one rule list, carrying the enclosing `@media` prelude. */
+void parseRules(const std::string &text, const std::string &media, int *order,
+                StyleSheet *sheet) {
+  size_t index = 0;
+  while (index < text.size()) {
+    while (index < text.size() && xt_is_css_space(text[index])) index++;
+    if (index >= text.size()) break;
+
+    if (text[index] == '@') {
+      size_t nameStart = index + 1;
+      size_t nameEnd = nameStart;
+      while (nameEnd < text.size() &&
+             (std::isalnum((unsigned char)text[nameEnd]) || text[nameEnd] == '-'))
+        nameEnd++;
+      std::string name = xt_css_lower(text.substr(nameStart, nameEnd - nameStart));
+      size_t brace = text.find('{', nameEnd);
+      size_t semi = text.find(';', nameEnd);
+      if (brace != std::string::npos && (semi == std::string::npos || brace < semi)) {
+        size_t close = findBlockEnd(text, brace);
+        if (close == std::string::npos) break;
+        if (name == "media") {
+          std::string query = xt_css_trim(text.substr(nameEnd, brace - nameEnd));
+          std::string nested = combineMedia(media, query);
+          parseRules(text.substr(brace + 1, close - brace - 1), nested, order, sheet);
+        }
+        /* Other block at-rules (`@supports`, `@keyframes`, `@font-face`, …) are
+         * not part of the engine's subset: ignore the whole block. */
+        index = close + 1;
+      } else {
+        index = (semi == std::string::npos) ? text.size() : semi + 1;
+      }
+      continue;
+    }
+
+    size_t brace = text.find('{', index);
+    if (brace == std::string::npos) break;
+    size_t close = findBlockEnd(text, brace);
+    if (close == std::string::npos) break;
+    Rule rule;
+    rule.selectors = xt_css_parse_selector_list(text.substr(index, brace - index));
+    rule.declarations = xt_css_parse_declarations(text.substr(brace + 1, close - brace - 1));
+    rule.order = (*order)++;
+    rule.media = media;
+    if (!rule.selectors.empty() && !rule.declarations.empty()) sheet->rules.push_back(std::move(rule));
+    index = close + 1;
+  }
+}
+
 }  // namespace
 
 std::vector<Declaration> xt_css_parse_declarations(const std::string &text) {
@@ -77,52 +165,8 @@ std::vector<Declaration> xt_css_parse_declarations(const std::string &text) {
 StyleSheet xt_css_parse_stylesheet(const std::string &text) {
   StyleSheet sheet;
   std::string clean = stripComments(text);
-  size_t index = 0;
   int order = 0;
-  while (index < clean.size()) {
-    while (index < clean.size() && xt_is_css_space(clean[index])) index++;
-    if (index >= clean.size()) break;
-    if (clean[index] == '@') {
-      size_t brace = clean.find('{', index);
-      size_t semi = clean.find(';', index);
-      if (brace != std::string::npos && (semi == std::string::npos || brace < semi)) {
-        int depth = 0;
-        size_t i = brace;
-        for (; i < clean.size(); i++) {
-          if (clean[i] == '{') depth++;
-          else if (clean[i] == '}') {
-            depth--;
-            if (depth == 0) break;
-          }
-        }
-        index = (i < clean.size()) ? i + 1 : clean.size();
-      } else {
-        index = (semi == std::string::npos) ? clean.size() : semi + 1;
-      }
-      continue;
-    }
-    size_t brace = clean.find('{', index);
-    if (brace == std::string::npos) break;
-    int depth = 0;
-    size_t close = std::string::npos;
-    for (size_t i = brace; i < clean.size(); i++) {
-      if (clean[i] == '{') depth++;
-      else if (clean[i] == '}') {
-        depth--;
-        if (depth == 0) {
-          close = i;
-          break;
-        }
-      }
-    }
-    if (close == std::string::npos) break;
-    Rule rule;
-    rule.selectors = xt_css_parse_selector_list(clean.substr(index, brace - index));
-    rule.declarations = xt_css_parse_declarations(clean.substr(brace + 1, close - brace - 1));
-    rule.order = order++;
-    if (!rule.selectors.empty() && !rule.declarations.empty()) sheet.rules.push_back(std::move(rule));
-    index = close + 1;
-  }
+  parseRules(clean, "", &order, &sheet);
   return sheet;
 }
 

package/runtime/ext_gui/document.cpp

@@ -47,7 +47,7 @@ void XtDocument::restyle(float viewportWidth, float viewportHeight) {
     MatchState state;
     state.hover = hover_;
     state.focus = focus_;
-    xt_style_compute(root_.get(), sheet_, styles_, viewportWidth, viewportHeight, state);
+    xt_style_compute(root_.get(), sheet_, styles_, viewportWidth, viewportHeight, state, &pseudos_);
     startTransitions();
     updateDisplay();
   }
@@ -124,6 +124,9 @@ void XtDocument::startTransitions() {
   for (auto &entry : styles_) {
     const Node *node = entry.first;
     const XtStyle &target = entry.second;
+    /* Generated boxes are rebuilt on every restyle; a transition keyed by one
+     * would address a node that no longer exists. */
+    if (node->is_pseudo) continue;
     if (target.transitions.empty()) continue;
     auto prev_it = display_.find(node);
     if (prev_it == display_.end()) continue;

package/runtime/ext_gui/document.h

@@ -118,6 +118,8 @@ class XtDocument {
   std::unique_ptr<Node> root_;
   /** Detached nodes (created or removed) stay alive here so handles remain valid. */
   std::unordered_map<const Node *, std::unique_ptr<Node>> detached_;
+  /** Synthetic `::before`/`::after` nodes for the current style generation. */
+  PseudoNodeSet pseudos_;
   bool dirty_ = false;
   StyleSheet sheet_;
   std::unordered_map<const Node *, XtStyle> styles_;   // target (cascade)

package/runtime/ext_gui/dom.h

@@ -18,6 +18,9 @@ namespace xtgui {
 
 enum class NodeType { Document, Element, Text };
 
+/** Which generated-content box a synthetic pseudo-element node represents. */
+enum class PseudoElement { None, Before, After };
+
 struct Attr {
   std::string name;
   std::string value;
@@ -32,6 +35,19 @@ struct Node {
   Node *parent = nullptr;
   std::vector<std::unique_ptr<Node>> children;
 
+  /* -- generated content (`::before` / `::after`) -------------------------
+   * A pseudo-element is a synthetic node owned by the document's per-restyle
+   * arena, not by the DOM tree: it is never in `children`, so traversal,
+   * queries, serialization and `elementIndex()` do not see it. `pseudo_origin`
+   * is the element the selector matched and whose computed style it inherits.
+   * `pseudo_before`/`pseudo_after` are transient pointers set by the cascade
+   * for the layout pass (the arena is rebuilt on every restyle). */
+  bool is_pseudo = false;
+  PseudoElement pseudo = PseudoElement::None;
+  const Node *pseudo_origin = nullptr;
+  Node *pseudo_before = nullptr;
+  Node *pseudo_after = nullptr;
+
   Node() = default;
   explicit Node(NodeType nodeType) : type(nodeType) {}
 

package/runtime/ext_gui/dom_api.cpp

@@ -65,6 +65,7 @@ static xtgui::Node *bind_pending(XtGuiWindow *win, xt_value self, xtgui::Node *n
   xt_object_set(self, xt_string_from_cstr("__xt_gui_gen"),
                 xt_object_get_cstr(canonical, "__xt_gui_gen"));
   xt_object_set(self, xt_string_from_cstr("__xt_gui_pending"), XT_UNDEFINED);
+  xt_gui_canvas_bind_pending(win, node, self);
   return node;
 }