xbintsc 0.5.23 → 0.5.32

package/runtime/ext_gui/browser_loop.cpp

@@ -0,0 +1,83 @@
+/*
+ * xbintsc GUI engine — the frame pump for browser-style pages.
+ *
+ * A program that calls `run()` hands the frame loop to the engine: `xt_gui_run`
+ * polls input, renders and drains microtasks until the last window closes. A
+ * *page* — the kind xbintsc compiles straight from browser code — never calls
+ * `run()`. It asks for the next frame with `requestAnimationFrame` and expects
+ * the host to keep serving frames; without a pump the window would open and
+ * then never paint.
+ *
+ * This unit closes that gap with one repeating runtime timer. Each tick
+ * dispatches input, renders (which also drains the queued animation-frame
+ * callbacks before layout, so a mutation a callback makes lands in the same
+ * frame) and re-arms itself only while callbacks are still queued. A page that
+ * stops animating therefore lets the event loop drain, and the program exits on
+ * its own — the same lifecycle a browser tab has when it goes idle.
+ *
+ * `XT_GUI_AUTOCLOSE_MS` is honoured here too, so a headless run of such a page
+ * cannot hang.
+ */
+
+#include "gui_engine.h"
+
+namespace {
+
+/** The tick callback, built once and rooted for the life of the program. */
+xt_value g_tick = XT_UNDEFINED;
+int g_tick_pending = 0;
+double g_tick_started_ms = 0;
+double g_tick_deadline_ms = 0;
+
+xt_value browser_tick(xt_value self, xt_value env, int32_t argc, xt_value *argv);
+
+void arm_tick(void) {
+  /* `run()` renders its own frames; a second pump would paint each window
+   * twice per tick. */
+  if (g_tick_pending || xt_gui_run_active()) return;
+  if (!XT_IS_FUNCTION(g_tick)) {
+    g_tick = xt_closure_new((void *)browser_tick, 0, NULL);
+    xt_gc_add_root(&g_tick);
+  }
+  xt_value args[2] = {g_tick, xt_number(16)};
+  g_tick_pending = 1;
+  xt_set_timeout(2, args);
+}
+
+xt_value browser_tick(xt_value self, xt_value env, int32_t argc, xt_value *argv) {
+  (void)self;
+  (void)env;
+  (void)argc;
+  (void)argv;
+  g_tick_pending = 0;
+  if (xt_gui_run_active()) return XT_UNDEFINED;
+  if (g_tick_deadline_ms > 0 && (double)SDL_GetTicks() >= g_tick_deadline_ms) {
+    /* Shared with `run()`: stop animating and let the program exit instead of
+     * hanging a headless run. */
+    xt_gui_quit(0, NULL);
+    return XT_UNDEFINED;
+  }
+  xt_value win = xt_browser_window(0, NULL);
+  if (XT_IS_UNDEFINED(win)) return XT_UNDEFINED;
+  XtGuiWindow *record = xt_gui_window_from_this(win);
+  if (record == NULL || !record->open) return XT_UNDEFINED;
+  xt_gui_pump_events();
+  xt_gui_render_window(record);
+  if (record->open && !record->animation_frames.empty()) arm_tick();
+  return XT_UNDEFINED;
+}
+
+}  // namespace
+
+/** Make sure a frame will be served: start the clock on the first request and
+ * arm the repeating tick unless one is already queued. */
+extern "C" void xt_browser_schedule_frame(void) {
+  if (g_tick_started_ms == 0.0) {
+    g_tick_started_ms = (double)SDL_GetTicks();
+    const char *autoclose = SDL_getenv("XT_GUI_AUTOCLOSE_MS");
+    if (autoclose != NULL && autoclose[0] != '\0') {
+      g_tick_deadline_ms = g_tick_started_ms + (double)SDL_atoi(autoclose);
+    }
+  }
+  arm_tick();
+}

package/runtime/ext_gui/canvas.cpp

@@ -24,10 +24,16 @@ namespace {
 std::atomic<uint64_t> g_next_canvas_id{1};
 
 /** Process-wide id -> canvas table. The engine is single-threaded; the table
- * lives for the process while the objects are owned by the window. */
+ * lives for the process while the objects are owned by the window.
+ *
+ * Deliberately leaked: `g_windows` is a global array, so the canvases it owns
+ * are destroyed *after* this function-local static would have been, and
+ * `~Canvas2D` has to remove itself from the table. Ordering that destruction by
+ * hand is not worth it — the table is one map for the whole process. */
 std::unordered_map<uint64_t, Canvas2D *> &canvas_registry() {
-  static std::unordered_map<uint64_t, Canvas2D *> registry;
-  return registry;
+  static std::unordered_map<uint64_t, Canvas2D *> *registry =
+      new std::unordered_map<uint64_t, Canvas2D *>();
+  return *registry;
 }
 
 CanvasPoint lerp(const CanvasPoint &a, const CanvasPoint &b, float t) {
@@ -451,24 +457,9 @@ void Canvas2D::draw_image(const Image &source, float dx, float dy, float dw, flo
     canvas_detail::draw_image(image_.pixels, image_.width, image_.height, source, x0, y0, x1 - x0,
                               y1 - y0, sx, sy, sw, sh, state_.global_alpha);
   } else {
-    float cornersX[4], cornersY[4];
-    const float corners[4][2] = {
-        {dx, dy}, {dx + dw, dy}, {dx + dw, dy + dh}, {dx, dy + dh}};
-    float minX = 0.0f, minY = 0.0f, maxX = 0.0f, maxY = 0.0f;
-    for (int i = 0; i < 4; i++) {
-      to_device(corners[i][0], corners[i][1], &cornersX[i], &cornersY[i]);
-      if (i == 0) {
-        minX = maxX = cornersX[i];
-        minY = maxY = cornersY[i];
-      } else {
-        minX = std::min(minX, cornersX[i]);
-        maxX = std::max(maxX, cornersX[i]);
-        minY = std::min(minY, cornersY[i]);
-        maxY = std::max(maxY, cornersY[i]);
-      }
-    }
-    canvas_detail::draw_image(image_.pixels, image_.width, image_.height, source, minX, minY,
-                              maxX - minX, maxY - minY, sx, sy, sw, sh, state_.global_alpha);
+    canvas_detail::draw_image_affine(image_.pixels, image_.width, image_.height, source, dx, dy,
+                                     dw, dh, sx, sy, sw, sh, state_.transform,
+                                     state_.global_alpha);
   }
   generation_++;
 }

package/runtime/ext_gui/canvas_internal.h

@@ -48,6 +48,16 @@ void draw_image(std::vector<unsigned char> &pixels, int width, int height, const
                 float dx, float dy, float dw, float dh, float sx, float sy, float sw, float sh,
                 float alpha);
 
+/** Blit an RGBA8 source through a full affine transform. The destination
+ * rectangle is mapped to a parallelogram by `transform`; each device pixel is
+ * inverse-mapped and sampled from the source rectangle. This is the path that
+ * makes rotated/skewed `drawImage` (and perspective-grid canvas textures) draw
+ * the image instead of squashing it into the bounding box. */
+void draw_image_affine(std::vector<unsigned char> &pixels, int width, int height,
+                       const Image &source, float dx, float dy, float dw, float dh, float sx,
+                       float sy, float sw, float sh, const CanvasTransform &transform,
+                       float alpha);
+
 /** Composite one grayscale glyph bitmap at `(x, baselineY)` with `paint`. */
 void blit_glyph(std::vector<unsigned char> &pixels, int width, int height,
                 const std::vector<unsigned char> &glyph, int glyphWidth, int glyphHeight, int left,

package/runtime/ext_gui/canvas_raster.cpp

@@ -53,6 +53,15 @@ void paint_color_at(const CanvasPaint &paint, float x, float y, float out[4]) {
 }  // namespace
 
 void blend_pixel(unsigned char *pixel, const float color[4], float coverage, float alpha) {
+  /* Fully opaque source-over is a plain copy; this is the hot path for paper
+     textures, terrain and the opaque parts of every sprite. */
+  if (alpha >= 0.999f && coverage >= 0.999f && color[3] >= 0.999f) {
+    pixel[0] = (unsigned char)clamp_byte(color[0] * 255.0f);
+    pixel[1] = (unsigned char)clamp_byte(color[1] * 255.0f);
+    pixel[2] = (unsigned char)clamp_byte(color[2] * 255.0f);
+    pixel[3] = 255;
+    return;
+  }
   float sa = color[3] * coverage * alpha;
   if (sa <= 0.0f) return;
   if (sa > 1.0f) sa = 1.0f;
@@ -245,8 +254,77 @@ void draw_image(std::vector<unsigned char> &pixels, int width, int height, const
       if (syi >= source.height) syi = source.height - 1;
       const unsigned char *texel =
           source.pixels.data() + ((size_t)syi * (size_t)source.width + (size_t)sxi) * 4;
+      unsigned char *dst = pixels.data() + ((size_t)py * (size_t)width + (size_t)px) * 4;
+      if (alpha >= 0.999f) {
+        const unsigned char ta = texel[3];
+        if (ta == 255) {
+          dst[0] = texel[0]; dst[1] = texel[1]; dst[2] = texel[2]; dst[3] = 255;
+          continue;
+        }
+        if (ta == 0) continue;
+      }
+      float color[4] = {texel[0] / 255.0f, texel[1] / 255.0f, texel[2] / 255.0f, texel[3] / 255.0f};
+      blend_pixel(dst, color, 1.0f, alpha);
+    }
+  }
+}
+
+
+void draw_image_affine(std::vector<unsigned char> &pixels, int width, int height,
+                       const Image &source, float dx, float dy, float dw, float dh, float sx,
+                       float sy, float sw, float sh, const CanvasTransform &transform,
+                       float alpha) {
+  if (source.width <= 0 || source.height <= 0 || dw <= 0.0f || dh <= 0.0f || sw <= 0.0f ||
+      sh <= 0.0f)
+    return;
+  CanvasTransform inverse = transform.inverted();
+  float cornersX[4];
+  float cornersY[4];
+  const float corners[4][2] = {{dx, dy}, {dx + dw, dy}, {dx + dw, dy + dh}, {dx, dy + dh}};
+  float minX = 0.0f, minY = 0.0f, maxX = 0.0f, maxY = 0.0f;
+  for (int i = 0; i < 4; i++) {
+    transform.apply(corners[i][0], corners[i][1], &cornersX[i], &cornersY[i]);
+    if (i == 0) {
+      minX = maxX = cornersX[i];
+      minY = maxY = cornersY[i];
+    } else {
+      minX = std::min(minX, cornersX[i]);
+      maxX = std::max(maxX, cornersX[i]);
+      minY = std::min(minY, cornersY[i]);
+      maxY = std::max(maxY, cornersY[i]);
+    }
+  }
+  int ix0 = std::max(0, (int)std::floor(minX));
+  int ix1 = std::min(width, (int)std::ceil(maxX));
+  int iy0 = std::max(0, (int)std::floor(minY));
+  int iy1 = std::min(height, (int)std::ceil(maxY));
+  for (int py = iy0; py < iy1; py++) {
+    for (int px = ix0; px < ix1; px++) {
+      float ux = 0.0f;
+      float uy = 0.0f;
+      inverse.apply((float)px + 0.5f, (float)py + 0.5f, &ux, &uy);
+      float u = (ux - dx) / dw;
+      float v = (uy - dy) / dh;
+      if (u < 0.0f || u >= 1.0f || v < 0.0f || v >= 1.0f) continue;
+      int sxi = (int)(sx + u * sw);
+      int syi = (int)(sy + v * sh);
+      if (sxi < 0) sxi = 0;
+      if (syi < 0) syi = 0;
+      if (sxi >= source.width) sxi = source.width - 1;
+      if (syi >= source.height) syi = source.height - 1;
+      const unsigned char *texel =
+          source.pixels.data() + ((size_t)syi * (size_t)source.width + (size_t)sxi) * 4;
+      unsigned char *dst = pixels.data() + ((size_t)py * (size_t)width + (size_t)px) * 4;
+      if (alpha >= 0.999f) {
+        const unsigned char ta = texel[3];
+        if (ta == 255) {
+          dst[0] = texel[0]; dst[1] = texel[1]; dst[2] = texel[2]; dst[3] = 255;
+          continue;
+        }
+        if (ta == 0) continue;
+      }
       float color[4] = {texel[0] / 255.0f, texel[1] / 255.0f, texel[2] / 255.0f, texel[3] / 255.0f};
-      blend_pixel(pixels.data() + ((size_t)py * (size_t)width + (size_t)px) * 4, color, 1.0f, alpha);
+      blend_pixel(dst, color, 1.0f, alpha);
     }
   }
 }

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");