Add suspense, resource, and transitions — Phase 2 complete

- suspense render-dom form: shows fallback while resource loads, swaps
  to body content when resource signal resolves
- resource async signal: wraps promise into signal with loading/data/error
  dict, auto-transitions on resolve/reject via promise-then
- transition: defers signal writes to requestIdleCallback, sets pending
  signal for UI feedback during expensive operations
- Added schedule-idle, promise-then platform functions
- All Phase 2 features now marked Done in status tables

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

shared/static/scripts/sx-ref.js

@@ -14,7 +14,7 @@
   // =========================================================================
 
   var NIL = Object.freeze({ _nil: true, toString: function() { return "nil"; } });
-  var SX_VERSION = "2026-03-08T16:35:00Z";
+  var SX_VERSION = "2026-03-08T16:36:52Z";
 
   function isNil(x) { return x === NIL || x === null || x === undefined; }
   function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -1546,7 +1546,7 @@ return result; }, args);
   var renderDomUnknownComponent = function(name) { return error((String("Unknown component: ") + String(name))); };
 
   // RENDER_DOM_FORMS
-  var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each", "portal", "error-boundary"];
+  var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each", "portal", "error-boundary", "suspense"];
 
   // render-dom-form?
   var isRenderDomForm = function(name) { return contains(RENDER_DOM_FORMS, name); };
@@ -1604,7 +1604,7 @@ return result; }, args);
   return domAppend(frag, val);
 })(); }, coll);
   return frag;
-})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "portal")) ? renderDomPortal(args, env, ns) : (isSxTruthy((name == "error-boundary")) ? renderDomErrorBoundary(args, env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
+})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "portal")) ? renderDomPortal(args, env, ns) : (isSxTruthy((name == "error-boundary")) ? renderDomErrorBoundary(args, env, ns) : (isSxTruthy((name == "suspense")) ? renderDomSuspense(args, env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
   var f = trampoline(evalExpr(nth(expr, 1), env));
   var coll = trampoline(evalExpr(nth(expr, 2), env));
   var frag = createFragment();
@@ -1613,7 +1613,7 @@ return result; }, args);
   return domAppend(frag, val);
 })(); } }
   return frag;
-})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns)))))))))))))); };
+})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))))))))); };
 
   // render-lambda-dom
   var renderLambdaDom = function(f, args, env, ns) { return (function() {
@@ -1805,6 +1805,30 @@ return (boundaryDisposers = []); });
 })();
 })(); };
 
+  // render-dom-suspense
+  var renderDomSuspense = function(args, env, ns) { return (function() {
+  var fallbackExpr = first(args);
+  var bodyExprs = rest(args);
+  var container = domCreateElement("div", NIL);
+  domSetAttr(container, "data-sx-suspense", "true");
+  domAppend(container, renderToDom(fallbackExpr, env, ns));
+  (function() {
+  var bodyDisposers = [];
+  effect(function() { { var _c = bodyDisposers; for (var _i = 0; _i < _c.length; _i++) { var d = _c[_i]; d(); } }
+bodyDisposers = [];
+return tryCatch(function() { return (function() {
+  var frag = createFragment();
+  withIslandScope(function(disposable) { bodyDisposers.push(disposable);
+return registerInScope(disposable); }, function() { return forEach(function(child) { return domAppend(frag, renderToDom(child, env, ns)); }, bodyExprs); });
+  domSetProp(container, "innerHTML", "");
+  return domAppend(container, frag);
+})(); }, function(err) { return NIL; }); });
+  return registerInScope(function() { { var _c = bodyDisposers; for (var _i = 0; _i < _c.length; _i++) { var d = _c[_i]; d(); } }
+return (bodyDisposers = []); });
+})();
+  return container;
+})(); };
+
 
   // === Transpiled from engine ===
 
@@ -3114,6 +3138,11 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
   return state;
 })(); };
 
+  // transition
+  var transition = function(pendingSig, thunk) { reset_b(pendingSig, true);
+return scheduleIdle(function() { batch(thunk);
+return reset_b(pendingSig, false); }); };
+
 
   // =========================================================================
   // Platform interface — DOM adapter (browser-only)
@@ -3406,6 +3435,11 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
 
   function promiseResolve(val) { return Promise.resolve(val); }
 
+  function promiseThen(p, onResolve, onReject) {
+    if (!p || !p.then) return p;
+    return onReject ? p.then(onResolve, onReject) : p.then(onResolve);
+  }
+
   function promiseCatch(p, fn) { return p && p.catch ? p.catch(fn) : p; }
 
   // --- Abort controllers ---
@@ -3849,6 +3883,10 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
   function errorMessage(e) {
     return e && e.message ? e.message : String(e);
   }
+  function scheduleIdle(fn) {
+    if (typeof requestIdleCallback !== "undefined") requestIdleCallback(fn);
+    else setTimeout(fn, 0);
+  }
   function elementValue(el) { return el && el.value !== undefined ? el.value : NIL; }
 
   function domAddListener(el, event, fn, opts) {