Add spread + collect primitives, rewrite ~cssx/tw as defcomp

New SX primitives for child-to-parent communication in the render tree:
- spread type: make-spread, spread?, spread-attrs — child injects attrs
  onto parent element (class joins with space, style with semicolon)
- collect!/collected/clear-collected! — render-time accumulation with
  dedup into named buckets

~cssx/tw is now a proper defcomp returning a spread value instead of a
macro wrapping children. ~cssx/flush reads collected "cssx" rules and
emits a single <style data-cssx> tag.

All four render adapters (html, async, dom, aser) handle spread values.
Both bootstraps (Python + JS) regenerated. Also fixes length→len in
cssx.sx (length was never a registered primitive).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

shared/static/scripts/sx-browser.js

@@ -14,7 +14,7 @@
   // =========================================================================
 
   var NIL = Object.freeze({ _nil: true, toString: function() { return "nil"; } });
-  var SX_VERSION = "2026-03-12T22:55:39Z";
+  var SX_VERSION = "2026-03-13T02:18:19Z";
 
   function isNil(x) { return x === NIL || x === null || x === undefined; }
   function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -83,6 +83,11 @@
   function RawHTML(html) { this.html = html; }
   RawHTML.prototype._raw = true;
 
+  function SxSpread(attrs) { this.attrs = attrs || {}; }
+  SxSpread.prototype._spread = true;
+
+  var _collectBuckets = {};
+
   function isSym(x) { return x != null && x._sym === true; }
   function isKw(x) { return x != null && x._kw === true; }
 
@@ -118,6 +123,7 @@
     if (x._component) return "component";
     if (x._island) return "island";
     if (x._signal) return "signal";
+    if (x._spread) return "spread";
     if (x._macro) return "macro";
     if (x._raw) return "raw-html";
     if (typeof Node !== "undefined" && x instanceof Node) return "dom-node";
@@ -140,6 +146,22 @@
   }
   function makeThunk(expr, env) { return new Thunk(expr, env); }
 
+  function makeSpread(attrs) { return new SxSpread(attrs || {}); }
+  function isSpread(x) { return x != null && x._spread === true; }
+  function spreadAttrs(s) { return s && s._spread ? s.attrs : {}; }
+
+  function sxCollect(bucket, value) {
+    if (!_collectBuckets[bucket]) _collectBuckets[bucket] = [];
+    var items = _collectBuckets[bucket];
+    if (items.indexOf(value) === -1) items.push(value);
+  }
+  function sxCollected(bucket) {
+    return _collectBuckets[bucket] ? _collectBuckets[bucket].slice() : [];
+  }
+  function sxClearCollected(bucket) {
+    if (_collectBuckets[bucket]) _collectBuckets[bucket] = [];
+  }
+
   function lambdaParams(f) { return f.params; }
   function lambdaBody(f) { return f.body; }
   function lambdaClosure(f) { return f.closure; }
@@ -466,6 +488,15 @@
   };
 
 
+  // stdlib.spread — spread + collect primitives
+  PRIMITIVES["make-spread"] = makeSpread;
+  PRIMITIVES["spread?"] = isSpread;
+  PRIMITIVES["spread-attrs"] = spreadAttrs;
+  PRIMITIVES["collect!"] = sxCollect;
+  PRIMITIVES["collected"] = sxCollected;
+  PRIMITIVES["clear-collected!"] = sxClearCollected;
+
+
   function isPrimitive(name) { return name in PRIMITIVES; }
   function getPrimitive(name) { return PRIMITIVES[name]; }
 
@@ -1277,6 +1308,18 @@ return append_b(inits, nth(binding, 1)); }, bindings) : reduce(function(acc, pai
 })());
 })()); };
 
+  // merge-spread-attrs
+  var mergeSpreadAttrs = function(target, spreadDict) { return forEach(function(key) { return (function() {
+  var val = dictGet(spreadDict, key);
+  return (isSxTruthy((key == "class")) ? (function() {
+  var existing = dictGet(target, "class");
+  return dictSet(target, "class", (isSxTruthy((isSxTruthy(existing) && !isSxTruthy((existing == "")))) ? (String(existing) + String(" ") + String(val)) : val));
+})() : (isSxTruthy((key == "style")) ? (function() {
+  var existing = dictGet(target, "style");
+  return dictSet(target, "style", (isSxTruthy((isSxTruthy(existing) && !isSxTruthy((existing == "")))) ? (String(existing) + String(";") + String(val)) : val));
+})() : dictSet(target, key, val)));
+})(); }, keys(spreadDict)); };
+
 
   // === Transpiled from parser ===
 
@@ -1419,10 +1462,10 @@ continue; } else { return NIL; } } };
 
   // render-to-html
   var renderToHtml = function(expr, env) { setRenderActiveB(true);
-return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m == "string") return escapeHtml(expr); if (_m == "number") return (String(expr)); if (_m == "boolean") return (isSxTruthy(expr) ? "true" : "false"); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? "" : renderListToHtml(expr, env)); if (_m == "symbol") return renderValueToHtml(trampoline(evalExpr(expr, env)), env); if (_m == "keyword") return escapeHtml(keywordName(expr)); if (_m == "raw-html") return rawHtmlContent(expr); return renderValueToHtml(trampoline(evalExpr(expr, env)), env); })(); };
+return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m == "string") return escapeHtml(expr); if (_m == "number") return (String(expr)); if (_m == "boolean") return (isSxTruthy(expr) ? "true" : "false"); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? "" : renderListToHtml(expr, env)); if (_m == "symbol") return renderValueToHtml(trampoline(evalExpr(expr, env)), env); if (_m == "keyword") return escapeHtml(keywordName(expr)); if (_m == "raw-html") return rawHtmlContent(expr); if (_m == "spread") return expr; return renderValueToHtml(trampoline(evalExpr(expr, env)), env); })(); };
 
   // render-value-to-html
-  var renderValueToHtml = function(val, env) { return (function() { var _m = typeOf(val); if (_m == "nil") return ""; if (_m == "string") return escapeHtml(val); if (_m == "number") return (String(val)); if (_m == "boolean") return (isSxTruthy(val) ? "true" : "false"); if (_m == "list") return renderListToHtml(val, env); if (_m == "raw-html") return rawHtmlContent(val); return escapeHtml((String(val))); })(); };
+  var renderValueToHtml = function(val, env) { return (function() { var _m = typeOf(val); if (_m == "nil") return ""; if (_m == "string") return escapeHtml(val); if (_m == "number") return (String(val)); if (_m == "boolean") return (isSxTruthy(val) ? "true" : "false"); if (_m == "list") return renderListToHtml(val, env); if (_m == "raw-html") return rawHtmlContent(val); if (_m == "spread") return val; return escapeHtml((String(val))); })(); };
 
   // RENDER_HTML_FORMS
   var RENDER_HTML_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "deftype", "defeffect", "map", "map-indexed", "filter", "for-each"];
@@ -1433,10 +1476,10 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   // render-list-to-html
   var renderListToHtml = function(expr, env) { return (isSxTruthy(isEmpty(expr)) ? "" : (function() {
   var head = first(expr);
-  return (isSxTruthy(!isSxTruthy((typeOf(head) == "symbol"))) ? join("", map(function(x) { return renderValueToHtml(x, env); }, expr)) : (function() {
+  return (isSxTruthy(!isSxTruthy((typeOf(head) == "symbol"))) ? join("", filter(function(x) { return !isSxTruthy(isSpread(x)); }, map(function(x) { return renderValueToHtml(x, env); }, expr))) : (function() {
   var name = symbolName(head);
   var args = rest(expr);
-  return (isSxTruthy((name == "<>")) ? join("", map(function(x) { return renderToHtml(x, env); }, args)) : (isSxTruthy((name == "raw!")) ? join("", map(function(x) { return (String(trampoline(evalExpr(x, env)))); }, args)) : (isSxTruthy((name == "lake")) ? renderHtmlLake(args, env) : (isSxTruthy((name == "marsh")) ? renderHtmlMarsh(args, env) : (isSxTruthy(contains(HTML_TAGS, name)) ? renderHtmlElement(name, args, env) : (isSxTruthy((isSxTruthy(startsWith(name, "~")) && isSxTruthy(envHas(env, name)) && isIsland(envGet(env, name)))) ? renderHtmlIsland(envGet(env, name), args, env) : (isSxTruthy(startsWith(name, "~")) ? (function() {
+  return (isSxTruthy((name == "<>")) ? join("", filter(function(x) { return !isSxTruthy(isSpread(x)); }, map(function(x) { return renderToHtml(x, env); }, args))) : (isSxTruthy((name == "raw!")) ? join("", map(function(x) { return (String(trampoline(evalExpr(x, env)))); }, args)) : (isSxTruthy((name == "lake")) ? renderHtmlLake(args, env) : (isSxTruthy((name == "marsh")) ? renderHtmlMarsh(args, env) : (isSxTruthy(contains(HTML_TAGS, name)) ? renderHtmlElement(name, args, env) : (isSxTruthy((isSxTruthy(startsWith(name, "~")) && isSxTruthy(envHas(env, name)) && isIsland(envGet(env, name)))) ? renderHtmlIsland(envGet(env, name), args, env) : (isSxTruthy(startsWith(name, "~")) ? (function() {
   var val = envGet(env, name);
   return (isSxTruthy(isComponent(val)) ? renderHtmlComponent(val, args, env) : (isSxTruthy(isMacro(val)) ? renderToHtml(expandMacro(val, args, env), env) : error((String("Unknown component: ") + String(name)))));
 })() : (isSxTruthy(isRenderHtmlForm(name)) ? dispatchHtmlForm(name, expr, env) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? renderToHtml(expandMacro(envGet(env, name), args, env), env) : renderValueToHtml(trampoline(evalExpr(expr, env)), env))))))))));
@@ -1447,24 +1490,33 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   var dispatchHtmlForm = function(name, expr, env) { return (isSxTruthy((name == "if")) ? (function() {
   var condVal = trampoline(evalExpr(nth(expr, 1), env));
   return (isSxTruthy(condVal) ? renderToHtml(nth(expr, 2), env) : (isSxTruthy((len(expr) > 3)) ? renderToHtml(nth(expr, 3), env) : ""));
-})() : (isSxTruthy((name == "when")) ? (isSxTruthy(!isSxTruthy(trampoline(evalExpr(nth(expr, 1), env)))) ? "" : join("", map(function(i) { return renderToHtml(nth(expr, i), env); }, range(2, len(expr))))) : (isSxTruthy((name == "cond")) ? (function() {
+})() : (isSxTruthy((name == "when")) ? (isSxTruthy(!isSxTruthy(trampoline(evalExpr(nth(expr, 1), env)))) ? "" : (isSxTruthy((len(expr) == 3)) ? renderToHtml(nth(expr, 2), env) : (function() {
+  var results = map(function(i) { return renderToHtml(nth(expr, i), env); }, range(2, len(expr)));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, results));
+})())) : (isSxTruthy((name == "cond")) ? (function() {
   var branch = evalCond(rest(expr), env);
   return (isSxTruthy(branch) ? renderToHtml(branch, env) : "");
 })() : (isSxTruthy((name == "case")) ? renderToHtml(trampoline(evalExpr(expr, env)), env) : (isSxTruthy(sxOr((name == "let"), (name == "let*"))) ? (function() {
   var local = processBindings(nth(expr, 1), env);
-  return join("", map(function(i) { return renderToHtml(nth(expr, i), local); }, range(2, len(expr))));
-})() : (isSxTruthy(sxOr((name == "begin"), (name == "do"))) ? join("", map(function(i) { return renderToHtml(nth(expr, i), env); }, range(1, len(expr)))) : (isSxTruthy(isDefinitionForm(name)) ? (trampoline(evalExpr(expr, env)), "") : (isSxTruthy((name == "map")) ? (function() {
+  return (isSxTruthy((len(expr) == 3)) ? renderToHtml(nth(expr, 2), local) : (function() {
+  var results = map(function(i) { return renderToHtml(nth(expr, i), local); }, range(2, len(expr)));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, results));
+})());
+})() : (isSxTruthy(sxOr((name == "begin"), (name == "do"))) ? (isSxTruthy((len(expr) == 2)) ? renderToHtml(nth(expr, 1), env) : (function() {
+  var results = map(function(i) { return renderToHtml(nth(expr, i), env); }, range(1, len(expr)));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, results));
+})()) : (isSxTruthy(isDefinitionForm(name)) ? (trampoline(evalExpr(expr, env)), "") : (isSxTruthy((name == "map")) ? (function() {
   var f = trampoline(evalExpr(nth(expr, 1), env));
   var coll = trampoline(evalExpr(nth(expr, 2), env));
-  return join("", map(function(item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [item], env) : renderToHtml(apply(f, [item]), env)); }, coll));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, map(function(item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [item], env) : renderToHtml(apply(f, [item]), env)); }, coll)));
 })() : (isSxTruthy((name == "map-indexed")) ? (function() {
   var f = trampoline(evalExpr(nth(expr, 1), env));
   var coll = trampoline(evalExpr(nth(expr, 2), env));
-  return join("", mapIndexed(function(i, item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [i, item], env) : renderToHtml(apply(f, [i, item]), env)); }, coll));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, mapIndexed(function(i, item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [i, item], env) : renderToHtml(apply(f, [i, item]), env)); }, coll)));
 })() : (isSxTruthy((name == "filter")) ? renderToHtml(trampoline(evalExpr(expr, env)), env) : (isSxTruthy((name == "for-each")) ? (function() {
   var f = trampoline(evalExpr(nth(expr, 1), env));
   var coll = trampoline(evalExpr(nth(expr, 2), env));
-  return join("", map(function(item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [item], env) : renderToHtml(apply(f, [item]), env)); }, coll));
+  return join("", filter(function(r) { return !isSxTruthy(isSpread(r)); }, map(function(item) { return (isSxTruthy(isLambda(f)) ? renderLambdaHtml(f, [item], env) : renderToHtml(apply(f, [item]), env)); }, coll)));
 })() : renderValueToHtml(trampoline(evalExpr(expr, env)), env)))))))))))); };
 
   // render-lambda-html
@@ -1490,7 +1542,14 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   var local = envMerge(componentClosure(comp), env);
   { var _c = componentParams(comp); for (var _i = 0; _i < _c.length; _i++) { var p = _c[_i]; envSet(local, p, (isSxTruthy(dictHas(kwargs, p)) ? dictGet(kwargs, p) : NIL)); } }
   if (isSxTruthy(componentHasChildren(comp))) {
-  envSet(local, "children", makeRawHtml(join("", map(function(c) { return renderToHtml(c, env); }, children))));
+  (function() {
+  var parts = [];
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; (function() {
+  var r = renderToHtml(c, env);
+  return (isSxTruthy(!isSxTruthy(isSpread(r))) ? append_b(parts, r) : NIL);
+})(); } }
+  return envSet(local, "children", makeRawHtml(join("", parts)));
+})();
 }
   return renderToHtml(componentBody(comp), local);
 })();
@@ -1502,7 +1561,14 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   var attrs = first(parsed);
   var children = nth(parsed, 1);
   var isVoid = contains(VOID_ELEMENTS, tag);
-  return (String("<") + String(tag) + String(renderAttrs(attrs)) + String((isSxTruthy(isVoid) ? " />" : (String(">") + String(join("", map(function(c) { return renderToHtml(c, env); }, children))) + String("</") + String(tag) + String(">")))));
+  return (isSxTruthy(isVoid) ? (String("<") + String(tag) + String(renderAttrs(attrs)) + String(" />")) : (function() {
+  var contentParts = [];
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; (function() {
+  var result = renderToHtml(c, env);
+  return (isSxTruthy(isSpread(result)) ? mergeSpreadAttrs(attrs, spreadAttrs(result)) : append_b(contentParts, result));
+})(); } }
+  return (String("<") + String(tag) + String(renderAttrs(attrs)) + String(">") + String(join("", contentParts)) + String("</") + String(tag) + String(">"));
+})());
 })(); };
 
   // render-html-lake
@@ -1519,7 +1585,15 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   return assoc(state, "skip", true, "i", (get(state, "i") + 1));
 })() : (append_b(children, arg), assoc(state, "i", (get(state, "i") + 1)))));
 })(); }, {["i"]: 0, ["skip"]: false}, args);
-  return (String("<") + String(lakeTag) + String(" data-sx-lake=\"") + String(escapeAttr(sxOr(lakeId, ""))) + String("\">") + String(join("", map(function(c) { return renderToHtml(c, env); }, children))) + String("</") + String(lakeTag) + String(">"));
+  return (function() {
+  var lakeAttrs = {["data-sx-lake"]: sxOr(lakeId, "")};
+  var contentParts = [];
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; (function() {
+  var result = renderToHtml(c, env);
+  return (isSxTruthy(isSpread(result)) ? mergeSpreadAttrs(lakeAttrs, spreadAttrs(result)) : append_b(contentParts, result));
+})(); } }
+  return (String("<") + String(lakeTag) + String(renderAttrs(lakeAttrs)) + String(">") + String(join("", contentParts)) + String("</") + String(lakeTag) + String(">"));
+})();
 })(); };
 
   // render-html-marsh
@@ -1536,7 +1610,15 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   return assoc(state, "skip", true, "i", (get(state, "i") + 1));
 })() : (append_b(children, arg), assoc(state, "i", (get(state, "i") + 1)))));
 })(); }, {["i"]: 0, ["skip"]: false}, args);
-  return (String("<") + String(marshTag) + String(" data-sx-marsh=\"") + String(escapeAttr(sxOr(marshId, ""))) + String("\">") + String(join("", map(function(c) { return renderToHtml(c, env); }, children))) + String("</") + String(marshTag) + String(">"));
+  return (function() {
+  var marshAttrs = {["data-sx-marsh"]: sxOr(marshId, "")};
+  var contentParts = [];
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; (function() {
+  var result = renderToHtml(c, env);
+  return (isSxTruthy(isSpread(result)) ? mergeSpreadAttrs(marshAttrs, spreadAttrs(result)) : append_b(contentParts, result));
+})(); } }
+  return (String("<") + String(marshTag) + String(renderAttrs(marshAttrs)) + String(">") + String(join("", contentParts)) + String("</") + String(marshTag) + String(">"));
+})();
 })(); };
 
   // render-html-island
@@ -1556,7 +1638,14 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
   var islandName = componentName(island);
   { var _c = componentParams(island); for (var _i = 0; _i < _c.length; _i++) { var p = _c[_i]; envSet(local, p, (isSxTruthy(dictHas(kwargs, p)) ? dictGet(kwargs, p) : NIL)); } }
   if (isSxTruthy(componentHasChildren(island))) {
-  envSet(local, "children", makeRawHtml(join("", map(function(c) { return renderToHtml(c, env); }, children))));
+  (function() {
+  var parts = [];
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; (function() {
+  var r = renderToHtml(c, env);
+  return (isSxTruthy(!isSxTruthy(isSpread(r))) ? append_b(parts, r) : NIL);
+})(); } }
+  return envSet(local, "children", makeRawHtml(join("", parts)));
+})();
 }
   return (function() {
   var bodyHtml = renderToHtml(componentBody(island), local);
@@ -1583,7 +1672,7 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return ""; if (_m =
 return (function() { var _m = typeOf(expr); if (_m == "number") return expr; if (_m == "string") return expr; if (_m == "boolean") return expr; if (_m == "nil") return NIL; if (_m == "symbol") return (function() {
   var name = symbolName(expr);
   return (isSxTruthy(envHas(env, name)) ? envGet(env, name) : (isSxTruthy(isPrimitive(name)) ? getPrimitive(name) : (isSxTruthy((name == "true")) ? true : (isSxTruthy((name == "false")) ? false : (isSxTruthy((name == "nil")) ? NIL : error((String("Undefined symbol: ") + String(name))))))));
-})(); if (_m == "keyword") return keywordName(expr); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? [] : aserList(expr, env)); return expr; })(); };
+})(); if (_m == "keyword") return keywordName(expr); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? [] : aserList(expr, env)); if (_m == "spread") return expr; return expr; })(); };
 
   // aser-list
   var aserList = function(expr, env) { return (function() {
@@ -1725,7 +1814,7 @@ return result; }, args);
 
   // render-to-dom
   var renderToDom = function(expr, env, ns) { setRenderActiveB(true);
-return (function() { var _m = typeOf(expr); if (_m == "nil") return createFragment(); if (_m == "boolean") return createFragment(); if (_m == "raw-html") return domParseHtml(rawHtmlContent(expr)); if (_m == "string") return createTextNode(expr); if (_m == "number") return createTextNode((String(expr))); if (_m == "symbol") return renderToDom(trampoline(evalExpr(expr, env)), env, ns); if (_m == "keyword") return createTextNode(keywordName(expr)); if (_m == "dom-node") return expr; if (_m == "dict") return createFragment(); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? createFragment() : renderDomList(expr, env, ns)); return (isSxTruthy(isSignal(expr)) ? (isSxTruthy(_islandScope) ? reactiveText(expr) : createTextNode((String(deref(expr))))) : createTextNode((String(expr)))); })(); };
+return (function() { var _m = typeOf(expr); if (_m == "nil") return createFragment(); if (_m == "boolean") return createFragment(); if (_m == "raw-html") return domParseHtml(rawHtmlContent(expr)); if (_m == "string") return createTextNode(expr); if (_m == "number") return createTextNode((String(expr))); if (_m == "symbol") return renderToDom(trampoline(evalExpr(expr, env)), env, ns); if (_m == "keyword") return createTextNode(keywordName(expr)); if (_m == "dom-node") return expr; if (_m == "spread") return expr; if (_m == "dict") return createFragment(); if (_m == "list") return (isSxTruthy(isEmpty(expr)) ? createFragment() : renderDomList(expr, env, ns)); return (isSxTruthy(isSignal(expr)) ? (isSxTruthy(_islandScope) ? reactiveText(expr) : createTextNode((String(deref(expr))))) : createTextNode((String(expr)))); })(); };
 
   // render-dom-list
   var renderDomList = function(expr, env, ns) { return (function() {
@@ -1773,7 +1862,19 @@ return (function() { var _m = typeOf(expr); if (_m == "nil") return createFragme
   return (isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy(contains(BOOLEAN_ATTRS, attrName)) ? (isSxTruthy(attrVal) ? domSetAttr(el, attrName, "") : NIL) : (isSxTruthy((attrVal == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(attrVal))))));
 })())))));
   return assoc(state, "skip", true, "i", (get(state, "i") + 1));
-})() : ((isSxTruthy(!isSxTruthy(contains(VOID_ELEMENTS, tag))) ? domAppend(el, renderToDom(arg, env, newNs)) : NIL), assoc(state, "i", (get(state, "i") + 1)))));
+})() : ((isSxTruthy(!isSxTruthy(contains(VOID_ELEMENTS, tag))) ? (function() {
+  var child = renderToDom(arg, env, newNs);
+  return (isSxTruthy(isSpread(child)) ? forEach(function(key) { return (function() {
+  var val = dictGet(spreadAttrs(child), key);
+  return (isSxTruthy((key == "class")) ? (function() {
+  var existing = domGetAttr(el, "class");
+  return domSetAttr(el, "class", (isSxTruthy((isSxTruthy(existing) && !isSxTruthy((existing == "")))) ? (String(existing) + String(" ") + String(val)) : val));
+})() : (isSxTruthy((key == "style")) ? (function() {
+  var existing = domGetAttr(el, "style");
+  return domSetAttr(el, "style", (isSxTruthy((isSxTruthy(existing) && !isSxTruthy((existing == "")))) ? (String(existing) + String(";") + String(val)) : val));
+})() : domSetAttr(el, key, (String(val)))));
+})(); }, keys(spreadAttrs(child))) : domAppend(el, child));
+})() : NIL), assoc(state, "i", (get(state, "i") + 1)))));
 })(); }, {["i"]: 0, ["skip"]: false}, args);
   return el;
 })(); };
@@ -6346,6 +6447,12 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
     emitEvent: emitEvent,
     onEvent: onEvent,
     bridgeEvent: bridgeEvent,
+    makeSpread: makeSpread,
+    isSpread: isSpread,
+    spreadAttrs: spreadAttrs,
+    collect: sxCollect,
+    collected: sxCollected,
+    clearCollected: sxClearCollected,
     _version: "ref-2.0 (boot+dom+engine+html+orchestration+parser+sx, bootstrap-compiled)"
   };