Wire reactive islands end-to-end: live interactive demos on the demo page

- Rebuild sx-browser.js with signals spec module (was missing entirely)
- Register signal functions (signal, deref, effect, computed, etc.) as
  PRIMITIVES so runtime-evaluated SX code in island bodies can call them
- Add reactive deref detection in adapter-dom.sx: (deref sig) in island
  scope creates reactive-text node instead of static text
- Add Island SSR support in html.py (_render_island with data-sx-island)
- Add Island bundling in jinja_bridge.py (defisland defs sent to client)
- Update deps.py to track Island dependencies alongside Component
- Add defisland to _ASER_FORMS in async_eval.py
- Add clear-interval platform primitive (was missing)
- Create four live demo islands: counter, temperature, imperative, stopwatch

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-08T00:44:09Z";
+  var SX_VERSION = "2026-03-08T11:56:02Z";
 
   function isNil(x) { return x === NIL || x === null || x === undefined; }
   function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -45,6 +45,29 @@
   }
   Component.prototype._component = true;
 
+  function Island(name, params, hasChildren, body, closure) {
+    this.name = name;
+    this.params = params;
+    this.hasChildren = hasChildren;
+    this.body = body;
+    this.closure = closure || {};
+  }
+  Island.prototype._island = true;
+
+  function SxSignal(value) {
+    this.value = value;
+    this.subscribers = [];
+    this.deps = [];
+  }
+  SxSignal.prototype._signal = true;
+
+  function TrackingCtx(notifyFn) {
+    this.notifyFn = notifyFn;
+    this.deps = [];
+  }
+
+  var _trackingContext = null;
+
   function Macro(params, restParam, body, closure, name) {
     this.params = params;
     this.restParam = restParam;
@@ -93,6 +116,8 @@
     if (x._thunk) return "thunk";
     if (x._lambda) return "lambda";
     if (x._component) return "component";
+    if (x._island) return "island";
+    if (x._signal) return "signal";
     if (x._macro) return "macro";
     if (x._raw) return "raw-html";
     if (typeof Node !== "undefined" && x instanceof Node) return "dom-node";
@@ -140,7 +165,41 @@
   function isCallable(x) { return typeof x === "function" || (x != null && x._lambda === true); }
   function isLambda(x) { return x != null && x._lambda === true; }
   function isComponent(x) { return x != null && x._component === true; }
+  function isIsland(x) { return x != null && x._island === true; }
   function isMacro(x) { return x != null && x._macro === true; }
+  function isIdentical(a, b) { return a === b; }
+
+  // Island platform
+  function makeIsland(name, params, hasChildren, body, env) {
+    return new Island(name, params, hasChildren, body, merge(env));
+  }
+
+  // Signal platform
+  function makeSignal(value) { return new SxSignal(value); }
+  function isSignal(x) { return x != null && x._signal === true; }
+  function signalValue(s) { return s.value; }
+  function signalSetValue(s, v) { s.value = v; }
+  function signalSubscribers(s) { return s.subscribers.slice(); }
+  function signalAddSub(s, fn) { if (s.subscribers.indexOf(fn) < 0) s.subscribers.push(fn); }
+  function signalRemoveSub(s, fn) { var i = s.subscribers.indexOf(fn); if (i >= 0) s.subscribers.splice(i, 1); }
+  function signalDeps(s) { return s.deps.slice(); }
+  function signalSetDeps(s, deps) { s.deps = Array.isArray(deps) ? deps.slice() : []; }
+  function setTrackingContext(ctx) { _trackingContext = ctx; }
+  function getTrackingContext() { return _trackingContext || NIL; }
+  function makeTrackingContext(notifyFn) { return new TrackingCtx(notifyFn); }
+  function trackingContextDeps(ctx) { return ctx ? ctx.deps : []; }
+  function trackingContextAddDep(ctx, s) { if (ctx && ctx.deps.indexOf(s) < 0) ctx.deps.push(s); }
+  function trackingContextNotifyFn(ctx) { return ctx ? ctx.notifyFn : NIL; }
+
+  // JSON / dict helpers for island state serialization
+  function jsonSerialize(obj) {
+    try { return JSON.stringify(obj); } catch(e) { return "{}"; }
+  }
+  function isEmptyDict(d) {
+    if (!d || typeof d !== "object") return true;
+    for (var k in d) if (d.hasOwnProperty(k)) return false;
+    return true;
+  }
 
   function envHas(env, name) { return name in env; }
   function envGet(env, name) { return env[name]; }
@@ -552,10 +611,10 @@
   var args = rest(expr);
   return (isSxTruthy(!isSxTruthy(sxOr((typeOf(head) == "symbol"), (typeOf(head) == "lambda"), (typeOf(head) == "list")))) ? map(function(x) { return trampoline(evalExpr(x, env)); }, expr) : (isSxTruthy((typeOf(head) == "symbol")) ? (function() {
   var name = symbolName(head);
-  return (isSxTruthy((name == "if")) ? sfIf(args, env) : (isSxTruthy((name == "when")) ? sfWhen(args, env) : (isSxTruthy((name == "cond")) ? sfCond(args, env) : (isSxTruthy((name == "case")) ? sfCase(args, env) : (isSxTruthy((name == "and")) ? sfAnd(args, env) : (isSxTruthy((name == "or")) ? sfOr(args, env) : (isSxTruthy((name == "let")) ? sfLet(args, env) : (isSxTruthy((name == "let*")) ? sfLet(args, env) : (isSxTruthy((name == "letrec")) ? sfLetrec(args, env) : (isSxTruthy((name == "lambda")) ? sfLambda(args, env) : (isSxTruthy((name == "fn")) ? sfLambda(args, env) : (isSxTruthy((name == "define")) ? sfDefine(args, env) : (isSxTruthy((name == "defcomp")) ? sfDefcomp(args, env) : (isSxTruthy((name == "defmacro")) ? sfDefmacro(args, env) : (isSxTruthy((name == "defstyle")) ? sfDefstyle(args, env) : (isSxTruthy((name == "defhandler")) ? sfDefhandler(args, env) : (isSxTruthy((name == "defpage")) ? sfDefpage(args, env) : (isSxTruthy((name == "defquery")) ? sfDefquery(args, env) : (isSxTruthy((name == "defaction")) ? sfDefaction(args, env) : (isSxTruthy((name == "begin")) ? sfBegin(args, env) : (isSxTruthy((name == "do")) ? sfBegin(args, env) : (isSxTruthy((name == "quote")) ? sfQuote(args, env) : (isSxTruthy((name == "quasiquote")) ? sfQuasiquote(args, env) : (isSxTruthy((name == "->")) ? sfThreadFirst(args, env) : (isSxTruthy((name == "set!")) ? sfSetBang(args, env) : (isSxTruthy((name == "reset")) ? sfReset(args, env) : (isSxTruthy((name == "shift")) ? sfShift(args, env) : (isSxTruthy((name == "dynamic-wind")) ? sfDynamicWind(args, env) : (isSxTruthy((name == "map")) ? hoMap(args, env) : (isSxTruthy((name == "map-indexed")) ? hoMapIndexed(args, env) : (isSxTruthy((name == "filter")) ? hoFilter(args, env) : (isSxTruthy((name == "reduce")) ? hoReduce(args, env) : (isSxTruthy((name == "some")) ? hoSome(args, env) : (isSxTruthy((name == "every?")) ? hoEvery(args, env) : (isSxTruthy((name == "for-each")) ? hoForEach(args, env) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? (function() {
+  return (isSxTruthy((name == "if")) ? sfIf(args, env) : (isSxTruthy((name == "when")) ? sfWhen(args, env) : (isSxTruthy((name == "cond")) ? sfCond(args, env) : (isSxTruthy((name == "case")) ? sfCase(args, env) : (isSxTruthy((name == "and")) ? sfAnd(args, env) : (isSxTruthy((name == "or")) ? sfOr(args, env) : (isSxTruthy((name == "let")) ? sfLet(args, env) : (isSxTruthy((name == "let*")) ? sfLet(args, env) : (isSxTruthy((name == "letrec")) ? sfLetrec(args, env) : (isSxTruthy((name == "lambda")) ? sfLambda(args, env) : (isSxTruthy((name == "fn")) ? sfLambda(args, env) : (isSxTruthy((name == "define")) ? sfDefine(args, env) : (isSxTruthy((name == "defcomp")) ? sfDefcomp(args, env) : (isSxTruthy((name == "defisland")) ? sfDefisland(args, env) : (isSxTruthy((name == "defmacro")) ? sfDefmacro(args, env) : (isSxTruthy((name == "defstyle")) ? sfDefstyle(args, env) : (isSxTruthy((name == "defhandler")) ? sfDefhandler(args, env) : (isSxTruthy((name == "defpage")) ? sfDefpage(args, env) : (isSxTruthy((name == "defquery")) ? sfDefquery(args, env) : (isSxTruthy((name == "defaction")) ? sfDefaction(args, env) : (isSxTruthy((name == "begin")) ? sfBegin(args, env) : (isSxTruthy((name == "do")) ? sfBegin(args, env) : (isSxTruthy((name == "quote")) ? sfQuote(args, env) : (isSxTruthy((name == "quasiquote")) ? sfQuasiquote(args, env) : (isSxTruthy((name == "->")) ? sfThreadFirst(args, env) : (isSxTruthy((name == "set!")) ? sfSetBang(args, env) : (isSxTruthy((name == "reset")) ? sfReset(args, env) : (isSxTruthy((name == "shift")) ? sfShift(args, env) : (isSxTruthy((name == "dynamic-wind")) ? sfDynamicWind(args, env) : (isSxTruthy((name == "map")) ? hoMap(args, env) : (isSxTruthy((name == "map-indexed")) ? hoMapIndexed(args, env) : (isSxTruthy((name == "filter")) ? hoFilter(args, env) : (isSxTruthy((name == "reduce")) ? hoReduce(args, env) : (isSxTruthy((name == "some")) ? hoSome(args, env) : (isSxTruthy((name == "every?")) ? hoEvery(args, env) : (isSxTruthy((name == "for-each")) ? hoForEach(args, env) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? (function() {
   var mac = envGet(env, name);
   return makeThunk(expandMacro(mac, args, env), env);
-})() : (isSxTruthy(isRenderExpr(expr)) ? renderExpr(expr, env) : evalCall(head, args, env))))))))))))))))))))))))))))))))))))));
+})() : (isSxTruthy(isRenderExpr(expr)) ? renderExpr(expr, env) : evalCall(head, args, env)))))))))))))))))))))))))))))))))))))));
 })() : evalCall(head, args, env)));
 })(); };
 
@@ -563,7 +622,7 @@
   var evalCall = function(head, args, env) { return (function() {
   var f = trampoline(evalExpr(head, env));
   var evaluatedArgs = map(function(a) { return trampoline(evalExpr(a, env)); }, args);
-  return (isSxTruthy((isSxTruthy(isCallable(f)) && isSxTruthy(!isSxTruthy(isLambda(f))) && !isSxTruthy(isComponent(f)))) ? apply(f, evaluatedArgs) : (isSxTruthy(isLambda(f)) ? callLambda(f, evaluatedArgs, env) : (isSxTruthy(isComponent(f)) ? callComponent(f, args, env) : error((String("Not callable: ") + String(inspect(f)))))));
+  return (isSxTruthy((isSxTruthy(isCallable(f)) && isSxTruthy(!isSxTruthy(isLambda(f))) && isSxTruthy(!isSxTruthy(isComponent(f))) && !isSxTruthy(isIsland(f)))) ? apply(f, evaluatedArgs) : (isSxTruthy(isLambda(f)) ? callLambda(f, evaluatedArgs, env) : (isSxTruthy(isComponent(f)) ? callComponent(f, args, env) : (isSxTruthy(isIsland(f)) ? callComponent(f, args, env) : error((String("Not callable: ") + String(inspect(f))))))));
 })(); };
 
   // call-lambda
@@ -759,6 +818,22 @@ return append_b(inits, nth(binding, 1)); }, bindings) : reduce(function(acc, pai
   return [params, hasChildren];
 })(); };
 
+  // sf-defisland
+  var sfDefisland = function(args, env) { return (function() {
+  var nameSym = first(args);
+  var paramsRaw = nth(args, 1);
+  var body = last(args);
+  var compName = stripPrefix(symbolName(nameSym), "~");
+  var parsed = parseCompParams(paramsRaw);
+  var params = first(parsed);
+  var hasChildren = nth(parsed, 1);
+  return (function() {
+  var island = makeIsland(compName, params, hasChildren, body, env);
+  env[symbolName(nameSym)] = island;
+  return island;
+})();
+})(); };
+
   // sf-defmacro
   var sfDefmacro = function(args, env) { return (function() {
   var nameSym = first(args);
@@ -949,7 +1024,7 @@ return append_b(inits, nth(binding, 1)); }, bindings) : reduce(function(acc, pai
   var BOOLEAN_ATTRS = ["async", "autofocus", "autoplay", "checked", "controls", "default", "defer", "disabled", "formnovalidate", "hidden", "inert", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "selected"];
 
   // definition-form?
-  var isDefinitionForm = function(name) { return sxOr((name == "define"), (name == "defcomp"), (name == "defmacro"), (name == "defstyle"), (name == "defhandler")); };
+  var isDefinitionForm = function(name) { return sxOr((name == "define"), (name == "defcomp"), (name == "defisland"), (name == "defmacro"), (name == "defstyle"), (name == "defhandler")); };
 
   // parse-element-args
   var parseElementArgs = function(args, env) { return (function() {
@@ -1114,154 +1189,6 @@ continue; } else { return NIL; } } };
   var sxSerializeDict = function(d) { return (String("{") + String(join(" ", reduce(function(acc, key) { return concat(acc, [(String(":") + String(key)), sxSerialize(dictGet(d, key))]); }, [], keys(d)))) + String("}")); };
 
 
-  // === Transpiled from adapter-html ===
-
-  // render-to-html
-  var renderToHtml = function(expr, 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); 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))); })(); };
-
-  // RENDER_HTML_FORMS
-  var RENDER_HTML_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each"];
-
-  // render-html-form?
-  var isRenderHtmlForm = function(name) { return contains(RENDER_HTML_FORMS, name); };
-
-  // 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() {
-  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(contains(HTML_TAGS, name)) ? renderHtmlElement(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)))))));
-})());
-})()); };
-
-  // dispatch-html-form
-  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() {
-  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() {
-  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));
-})() : (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));
-})() : (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));
-})() : renderValueToHtml(trampoline(evalExpr(expr, env)), env)))))))))))); };
-
-  // render-lambda-html
-  var renderLambdaHtml = function(f, args, env) { return (function() {
-  var local = envMerge(lambdaClosure(f), env);
-  forEachIndexed(function(i, p) { return envSet(local, p, nth(args, i)); }, lambdaParams(f));
-  return renderToHtml(lambdaBody(f), local);
-})(); };
-
-  // render-html-component
-  var renderHtmlComponent = function(comp, args, env) { return (function() {
-  var kwargs = {};
-  var children = [];
-  reduce(function(state, arg) { return (function() {
-  var skip = get(state, "skip");
-  return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
-  var val = trampoline(evalExpr(nth(args, (get(state, "i") + 1)), env));
-  kwargs[keywordName(arg)] = val;
-  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 (function() {
-  var local = envMerge(componentClosure(comp), env);
-  { var _c = componentParams(comp); for (var _i = 0; _i < _c.length; _i++) { var p = _c[_i]; local[p] = (isSxTruthy(dictHas(kwargs, p)) ? dictGet(kwargs, p) : NIL); } }
-  if (isSxTruthy(componentHasChildren(comp))) {
-  local["children"] = makeRawHtml(join("", map(function(c) { return renderToHtml(c, env); }, children)));
-}
-  return renderToHtml(componentBody(comp), local);
-})();
-})(); };
-
-  // render-html-element
-  var renderHtmlElement = function(tag, args, env) { return (function() {
-  var parsed = parseElementArgs(args, env);
-  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(">")))));
-})(); };
-
-
-  // === Transpiled from adapter-sx ===
-
-  // render-to-sx
-  var renderToSx = function(expr, env) { return (function() {
-  var result = aser(expr, env);
-  return (isSxTruthy((typeOf(result) == "string")) ? result : serialize(result));
-})(); };
-
-  // aser
-  var aser = function(expr, env) { 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; })(); };
-
-  // aser-list
-  var aserList = function(expr, env) { return (function() {
-  var head = first(expr);
-  var args = rest(expr);
-  return (isSxTruthy(!isSxTruthy((typeOf(head) == "symbol"))) ? map(function(x) { return aser(x, env); }, expr) : (function() {
-  var name = symbolName(head);
-  return (isSxTruthy((name == "<>")) ? aserFragment(args, env) : (isSxTruthy(startsWith(name, "~")) ? aserCall(name, args, env) : (isSxTruthy(contains(HTML_TAGS, name)) ? aserCall(name, args, env) : (isSxTruthy(sxOr(isSpecialForm(name), isHoForm(name))) ? aserSpecial(name, expr, env) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? aser(expandMacro(envGet(env, name), args, env), env) : (function() {
-  var f = trampoline(evalExpr(head, env));
-  var evaledArgs = map(function(a) { return trampoline(evalExpr(a, env)); }, args);
-  return (isSxTruthy((isSxTruthy(isCallable(f)) && isSxTruthy(!isSxTruthy(isLambda(f))) && !isSxTruthy(isComponent(f)))) ? apply(f, evaledArgs) : (isSxTruthy(isLambda(f)) ? trampoline(callLambda(f, evaledArgs, env)) : (isSxTruthy(isComponent(f)) ? aserCall((String("~") + String(componentName(f))), args, env) : error((String("Not callable: ") + String(inspect(f)))))));
-})())))));
-})());
-})(); };
-
-  // aser-fragment
-  var aserFragment = function(children, env) { return (function() {
-  var parts = filter(function(x) { return !isSxTruthy(isNil(x)); }, map(function(c) { return aser(c, env); }, children));
-  return (isSxTruthy(isEmpty(parts)) ? "" : (String("(<> ") + String(join(" ", map(serialize, parts))) + String(")")));
-})(); };
-
-  // aser-call
-  var aserCall = function(name, args, env) { return (function() {
-  var parts = [name];
-  reduce(function(state, arg) { return (function() {
-  var skip = get(state, "skip");
-  return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
-  var val = aser(nth(args, (get(state, "i") + 1)), env);
-  if (isSxTruthy(!isSxTruthy(isNil(val)))) {
-  parts.push((String(":") + String(keywordName(arg))));
-  parts.push(serialize(val));
-}
-  return assoc(state, "skip", true, "i", (get(state, "i") + 1));
-})() : (function() {
-  var val = aser(arg, env);
-  if (isSxTruthy(!isSxTruthy(isNil(val)))) {
-  parts.push(serialize(val));
-}
-  return assoc(state, "i", (get(state, "i") + 1));
-})()));
-})(); }, {["i"]: 0, ["skip"]: false}, args);
-  return (String("(") + String(join(" ", parts)) + String(")"));
-})(); };
-
-
   // === Transpiled from adapter-dom ===
 
   // SVG_NS
@@ -1279,10 +1206,13 @@ continue; } else { return NIL; } } };
   return (isSxTruthy((typeOf(head) == "symbol")) ? (function() {
   var name = symbolName(head);
   var args = rest(expr);
-  return (isSxTruthy((name == "raw!")) ? renderDomRaw(args, env) : (isSxTruthy((name == "<>")) ? renderDomFragment(args, env, ns) : (isSxTruthy(startsWith(name, "html:")) ? renderDomElement(slice(name, 5), args, env, ns) : (isSxTruthy(isRenderDomForm(name)) ? (isSxTruthy((isSxTruthy(contains(HTML_TAGS, name)) && sxOr((isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword")), ns))) ? renderDomElement(name, args, env, ns) : dispatchRenderForm(name, expr, env, ns)) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? renderToDom(expandMacro(envGet(env, name), args, env), env, ns) : (isSxTruthy(contains(HTML_TAGS, name)) ? renderDomElement(name, args, env, ns) : (isSxTruthy(startsWith(name, "~")) ? (function() {
+  return (isSxTruthy((name == "raw!")) ? renderDomRaw(args, env) : (isSxTruthy((name == "<>")) ? renderDomFragment(args, env, ns) : (isSxTruthy(startsWith(name, "html:")) ? renderDomElement(slice(name, 5), args, env, ns) : (isSxTruthy(isRenderDomForm(name)) ? (isSxTruthy((isSxTruthy(contains(HTML_TAGS, name)) && sxOr((isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword")), ns))) ? renderDomElement(name, args, env, ns) : dispatchRenderForm(name, expr, env, ns)) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? renderToDom(expandMacro(envGet(env, name), args, env), env, ns) : (isSxTruthy(contains(HTML_TAGS, name)) ? renderDomElement(name, args, env, ns) : (isSxTruthy((isSxTruthy(startsWith(name, "~")) && isSxTruthy(envHas(env, name)) && isIsland(envGet(env, name)))) ? renderDomIsland(envGet(env, name), args, env, ns) : (isSxTruthy(startsWith(name, "~")) ? (function() {
   var comp = envGet(env, name);
   return (isSxTruthy(isComponent(comp)) ? renderDomComponent(comp, args, env, ns) : renderDomUnknownComponent(name));
-})() : (isSxTruthy((isSxTruthy((indexOf_(name, "-") > 0)) && isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword"))) ? renderDomElement(name, args, env, ns) : (isSxTruthy(ns) ? renderDomElement(name, args, env, ns) : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))));
+})() : (isSxTruthy((isSxTruthy((indexOf_(name, "-") > 0)) && isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword"))) ? renderDomElement(name, args, env, ns) : (isSxTruthy(ns) ? renderDomElement(name, args, env, ns) : (isSxTruthy((isSxTruthy((name == "deref")) && _islandScope)) ? (function() {
+  var sigOrVal = trampoline(evalExpr(first(args), env));
+  return (isSxTruthy(isSignal(sigOrVal)) ? reactiveText(sigOrVal) : createTextNode((String(deref(sigOrVal)))));
+})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))))));
 })() : (isSxTruthy(sxOr(isLambda(head), (typeOf(head) == "list"))) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (function() {
   var frag = createFragment();
   { var _c = expr; for (var _i = 0; _i < _c.length; _i++) { var x = _c[_i]; domAppend(frag, renderToDom(x, env, ns)); } }
@@ -1299,7 +1229,10 @@ continue; } else { return NIL; } } };
   return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
   var attrName = keywordName(arg);
   var attrVal = trampoline(evalExpr(nth(args, (get(state, "i") + 1)), env));
-  (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))))));
+  (isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy((isSxTruthy(startsWith(attrName, "on-")) && isCallable(attrVal))) ? (function() {
+  var eventName = substring(attrName, 3, stringLength(attrName));
+  return domListen(el, eventName, attrVal);
+})() : (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)))));
 })(); }, {["i"]: 0, ["skip"]: false}, args);
@@ -1353,7 +1286,7 @@ continue; } else { return NIL; } } };
   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", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each"];
+  var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each"];
 
   // render-dom-form?
   var isRenderDomForm = function(name) { return contains(RENDER_DOM_FORMS, name); };
@@ -1414,6 +1347,88 @@ continue; } else { return NIL; } } };
   return renderToDom(lambdaBody(f), local, ns);
 })(); };
 
+  // render-dom-island
+  var renderDomIsland = function(island, args, env, ns) { return (function() {
+  var kwargs = {};
+  var children = [];
+  reduce(function(state, arg) { return (function() {
+  var skip = get(state, "skip");
+  return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
+  var val = trampoline(evalExpr(nth(args, (get(state, "i") + 1)), env));
+  kwargs[keywordName(arg)] = val;
+  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 (function() {
+  var local = envMerge(componentClosure(island), env);
+  var islandName = componentName(island);
+  { var _c = componentParams(island); for (var _i = 0; _i < _c.length; _i++) { var p = _c[_i]; local[p] = (isSxTruthy(dictHas(kwargs, p)) ? dictGet(kwargs, p) : NIL); } }
+  if (isSxTruthy(componentHasChildren(island))) {
+  (function() {
+  var childFrag = createFragment();
+  { var _c = children; for (var _i = 0; _i < _c.length; _i++) { var c = _c[_i]; domAppend(childFrag, renderToDom(c, env, ns)); } }
+  return envSet(local, "children", childFrag);
+})();
+}
+  return (function() {
+  var container = domCreateElement("div", NIL);
+  var disposers = [];
+  domSetAttr(container, "data-sx-island", islandName);
+  return (function() {
+  var bodyDom = withIslandScope(function(disposable) { return append_b(disposers, disposable); }, function() { return renderToDom(componentBody(island), local, ns); });
+  domAppend(container, bodyDom);
+  domSetData(container, "sx-disposers", disposers);
+  return container;
+})();
+})();
+})();
+})(); };
+
+  // reactive-text
+  var reactiveText = function(sig) { return (function() {
+  var node = createTextNode((String(deref(sig))));
+  effect(function() { return domSetTextContent(node, (String(deref(sig)))); });
+  return node;
+})(); };
+
+  // reactive-attr
+  var reactiveAttr = function(el, attrName, computeFn) { return effect(function() { return (function() {
+  var val = computeFn();
+  return (isSxTruthy(sxOr(isNil(val), (val == false))) ? domRemoveAttr(el, attrName) : (isSxTruthy((val == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(val)))));
+})(); }); };
+
+  // reactive-fragment
+  var reactiveFragment = function(testFn, renderFn, env, ns) { return (function() {
+  var marker = createComment("island-fragment");
+  var currentNodes = [];
+  effect(function() { { var _c = currentNodes; for (var _i = 0; _i < _c.length; _i++) { var n = _c[_i]; domRemove(n); } }
+currentNodes = [];
+return (isSxTruthy(testFn()) ? (function() {
+  var frag = renderFn();
+  currentNodes = domChildNodes(frag);
+  return domInsertAfter(marker, frag);
+})() : NIL); });
+  return marker;
+})(); };
+
+  // reactive-list
+  var reactiveList = function(mapFn, itemsSig, env, ns) { return (function() {
+  var container = createFragment();
+  var marker = createComment("island-list");
+  domAppend(container, marker);
+  effect(function() { return (function() {
+  var parent = domParent(marker);
+  return (isSxTruthy(parent) ? (domRemoveChildrenAfter(marker), (function() {
+  var items = deref(itemsSig);
+  return forEach(function(item) { return (function() {
+  var rendered = (isSxTruthy(isLambda(mapFn)) ? renderLambdaDom(mapFn, [item], env, ns) : renderToDom(apply(mapFn, [item]), env, ns));
+  return domInsertAfter(marker, rendered);
+})(); }, reverse(items));
+})()) : NIL);
+})(); });
+  return container;
+})(); };
+
 
   // === Transpiled from engine ===
 
@@ -1862,6 +1877,7 @@ return postSwap(target); });
   var postSwap = function(root) { activateScripts(root);
 sxProcessScripts(root);
 sxHydrate(root);
+sxHydrateIslands(root);
 return processElements(root); };
 
   // activate-scripts
@@ -1992,6 +2008,93 @@ return (function() {
 })() : NIL);
 })(); };
 
+  // _optimistic-snapshots
+  var _optimisticSnapshots = {};
+
+  // optimistic-cache-update
+  var optimisticCacheUpdate = function(cacheKey, mutator) { return (function() {
+  var cached = pageDataCacheGet(cacheKey);
+  return (isSxTruthy(cached) ? (function() {
+  var predicted = mutator(cached);
+  _optimisticSnapshots[cacheKey] = cached;
+  pageDataCacheSet(cacheKey, predicted);
+  return predicted;
+})() : NIL);
+})(); };
+
+  // optimistic-cache-revert
+  var optimisticCacheRevert = function(cacheKey) { return (function() {
+  var snapshot = get(_optimisticSnapshots, cacheKey);
+  return (isSxTruthy(snapshot) ? (pageDataCacheSet(cacheKey, snapshot), dictDelete(_optimisticSnapshots, cacheKey), snapshot) : NIL);
+})(); };
+
+  // optimistic-cache-confirm
+  var optimisticCacheConfirm = function(cacheKey) { return dictDelete(_optimisticSnapshots, cacheKey); };
+
+  // submit-mutation
+  var submitMutation = function(pageName, params, actionName, payload, mutatorFn, onComplete) { return (function() {
+  var cacheKey = pageDataCacheKey(pageName, params);
+  var predicted = optimisticCacheUpdate(cacheKey, mutatorFn);
+  if (isSxTruthy(predicted)) {
+  tryRerenderPage(pageName, params, predicted);
+}
+  return executeAction(actionName, payload, function(result) { if (isSxTruthy(result)) {
+  pageDataCacheSet(cacheKey, result);
+}
+optimisticCacheConfirm(cacheKey);
+if (isSxTruthy(result)) {
+  tryRerenderPage(pageName, params, result);
+}
+logInfo((String("sx:optimistic confirmed ") + String(pageName)));
+return (isSxTruthy(onComplete) ? onComplete("confirmed") : NIL); }, function(error) { return (function() {
+  var reverted = optimisticCacheRevert(cacheKey);
+  if (isSxTruthy(reverted)) {
+  tryRerenderPage(pageName, params, reverted);
+}
+  logWarn((String("sx:optimistic reverted ") + String(pageName) + String(": ") + String(error)));
+  return (isSxTruthy(onComplete) ? onComplete("reverted") : NIL);
+})(); });
+})(); };
+
+  // _is-online
+  var _isOnline = true;
+
+  // _offline-queue
+  var _offlineQueue = [];
+
+  // offline-is-online?
+  var offlineIsOnline_p = function() { return _isOnline; };
+
+  // offline-set-online!
+  var offlineSetOnline_b = function(val) { return (_isOnline = val); };
+
+  // offline-queue-mutation
+  var offlineQueueMutation = function(actionName, payload, pageName, params, mutatorFn) { return (function() {
+  var cacheKey = pageDataCacheKey(pageName, params);
+  var entry = {["action"]: actionName, ["payload"]: payload, ["page"]: pageName, ["params"]: params, ["timestamp"]: nowMs(), ["status"]: "pending"};
+  _offlineQueue.push(entry);
+  (function() {
+  var predicted = optimisticCacheUpdate(cacheKey, mutatorFn);
+  return (isSxTruthy(predicted) ? tryRerenderPage(pageName, params, predicted) : NIL);
+})();
+  logInfo((String("sx:offline queued ") + String(actionName) + String(" (") + String(len(_offlineQueue)) + String(" pending)")));
+  return entry;
+})(); };
+
+  // offline-sync
+  var offlineSync = function() { return (function() {
+  var pending = filter(function(e) { return (get(e, "status") == "pending"); }, _offlineQueue);
+  return (isSxTruthy(!isSxTruthy(isEmpty(pending))) ? (logInfo((String("sx:offline syncing ") + String(len(pending)) + String(" mutations"))), forEach(function(entry) { return executeAction(get(entry, "action"), get(entry, "payload"), function(result) { entry["status"] = "synced";
+return logInfo((String("sx:offline synced ") + String(get(entry, "action")))); }, function(error) { entry["status"] = "failed";
+return logWarn((String("sx:offline sync failed ") + String(get(entry, "action")) + String(": ") + String(error))); }); }, pending)) : NIL);
+})(); };
+
+  // offline-pending-count
+  var offlinePendingCount = function() { return len(filter(function(e) { return (get(e, "status") == "pending"); }, _offlineQueue)); };
+
+  // offline-aware-mutation
+  var offlineAwareMutation = function(pageName, params, actionName, payload, mutatorFn, onComplete) { return (isSxTruthy(_isOnline) ? submitMutation(pageName, params, actionName, payload, mutatorFn, onComplete) : (offlineQueueMutation(actionName, payload, pageName, params, mutatorFn), (isSxTruthy(onComplete) ? onComplete("queued") : NIL))); };
+
   // current-page-layout
   var currentPageLayout = function() { return (function() {
   var pathname = urlPathname(browserLocationHref());
@@ -2136,7 +2239,8 @@ return postSwap(target); })) : NIL);
 })();
 processBoosted(root);
 processSse(root);
-return bindInlineHandlers(root); };
+bindInlineHandlers(root);
+return processEmitElements(root); };
 
   // process-one
   var processOne = function(el) { return (function() {
@@ -2144,6 +2248,19 @@ return bindInlineHandlers(root); };
   return (isSxTruthy(verbInfo) ? (isSxTruthy(!isSxTruthy(domHasAttr(el, "sx-disable"))) ? (bindTriggers(el, verbInfo), bindPreloadFor(el)) : NIL) : NIL);
 })(); };
 
+  // process-emit-elements
+  var processEmitElements = function(root) { return (function() {
+  var els = domQueryAll(sxOr(root, domBody()), "[data-sx-emit]");
+  return forEach(function(el) { return (isSxTruthy(!isSxTruthy(isProcessed(el, "emit"))) ? (markProcessed(el, "emit"), (function() {
+  var eventName = domGetAttr(el, "data-sx-emit");
+  return (isSxTruthy(eventName) ? domListen(el, "click", function(e) { return (function() {
+  var detailJson = domGetAttr(el, "data-sx-emit-detail");
+  var detail = (isSxTruthy(detailJson) ? jsonParse(detailJson) : {});
+  return domDispatch(el, eventName, detail);
+})(); }) : NIL);
+})()) : NIL); }, els);
+})(); };
+
   // handle-popstate
   var handlePopstate = function(scrollY) { return (function() {
   var url = browserLocationHref();
@@ -2195,7 +2312,8 @@ return bindInlineHandlers(root); };
   domAppend(el, node);
   hoistHeadElementsFull(el);
   processElements(el);
-  return sxHydrateElements(el);
+  sxHydrateElements(el);
+  return sxHydrateIslands(el);
 })() : NIL);
 })(); };
 
@@ -2210,6 +2328,7 @@ return (function() {
   { var _c = exprs; for (var _i = 0; _i < _c.length; _i++) { var expr = _c[_i]; domAppend(el, renderToDom(expr, env, NIL)); } }
   processElements(el);
   sxHydrateElements(el);
+  sxHydrateIslands(el);
   return domDispatch(el, "sx:resolved", {"id": id});
 })() : logWarn((String("resolveSuspense: no element for id=") + String(id))));
 })(); };
@@ -2304,8 +2423,46 @@ callExpr.push(dictGet(kwargs, k)); } }
   return logInfo((String("pages: ") + String(len(_pageRoutes)) + String(" routes loaded")));
 })(); };
 
+  // sx-hydrate-islands
+  var sxHydrateIslands = function(root) { return (function() {
+  var els = domQueryAll(sxOr(root, domBody()), "[data-sx-island]");
+  return forEach(function(el) { return (isSxTruthy(!isSxTruthy(isProcessed(el, "island-hydrated"))) ? (markProcessed(el, "island-hydrated"), hydrateIsland(el)) : NIL); }, els);
+})(); };
+
+  // hydrate-island
+  var hydrateIsland = function(el) { return (function() {
+  var name = domGetAttr(el, "data-sx-island");
+  var stateJson = sxOr(domGetAttr(el, "data-sx-state"), "{}");
+  return (function() {
+  var compName = (String("~") + String(name));
+  var env = getRenderEnv(NIL);
+  return (function() {
+  var comp = envGet(env, compName);
+  return (isSxTruthy(!isSxTruthy(sxOr(isComponent(comp), isIsland(comp)))) ? logWarn((String("hydrate-island: unknown island ") + String(compName))) : (function() {
+  var kwargs = jsonParse(stateJson);
+  var disposers = [];
+  var local = envMerge(componentClosure(comp), env);
+  { var _c = componentParams(comp); for (var _i = 0; _i < _c.length; _i++) { var p = _c[_i]; local[p] = (isSxTruthy(dictHas(kwargs, p)) ? dictGet(kwargs, p) : NIL); } }
+  return (function() {
+  var bodyDom = withIslandScope(function(disposable) { return append_b(disposers, disposable); }, function() { return renderToDom(componentBody(comp), local, NIL); });
+  morphChildren(el, bodyDom);
+  domSetData(el, "sx-disposers", disposers);
+  processElements(el);
+  return logInfo((String("hydrated island: ") + String(compName) + String(" (") + String(len(disposers)) + String(" disposers)")));
+})();
+})());
+})();
+})();
+})(); };
+
+  // dispose-island
+  var disposeIsland = function(el) { return (function() {
+  var disposers = domGetData(el, "sx-disposers");
+  return (isSxTruthy(disposers) ? (forEach(function(d) { return (isSxTruthy(isCallable(d)) ? d() : NIL); }, disposers), domSetData(el, "sx-disposers", NIL)) : NIL);
+})(); };
+
   // boot-init
-  var bootInit = function() { return (logInfo((String("sx-browser ") + String(SX_VERSION))), initCssTracking(), processPageScripts(), processSxScripts(NIL), sxHydrateElements(NIL), processElements(NIL)); };
+  var bootInit = function() { return (logInfo((String("sx-browser ") + String(SX_VERSION))), initCssTracking(), processPageScripts(), processSxScripts(NIL), sxHydrateElements(NIL), sxHydrateIslands(NIL), processElements(NIL)); };
 
 
   // === Transpiled from router (client-side route matching) ===
@@ -2378,6 +2535,178 @@ callExpr.push(dictGet(kwargs, k)); } }
 })(); };
 
 
+  // === Transpiled from signals (reactive signal runtime) ===
+
+  // signal
+  var signal = function(initialValue) { return makeSignal(initialValue); };
+
+  // deref
+  var deref = function(s) { return (isSxTruthy(!isSxTruthy(isSignal(s))) ? s : (function() {
+  var ctx = getTrackingContext();
+  if (isSxTruthy(ctx)) {
+  trackingContextAddDep(ctx, s);
+  signalAddSub(s, trackingContextNotifyFn(ctx));
+}
+  return signalValue(s);
+})()); };
+
+  // reset!
+  var reset_b = function(s, value) { return (isSxTruthy(isSignal(s)) ? (function() {
+  var old = signalValue(s);
+  return (isSxTruthy(!isSxTruthy(isIdentical(old, value))) ? (signalSetValue(s, value), notifySubscribers(s)) : NIL);
+})() : NIL); };
+
+  // swap!
+  var swap_b = function(s, f) { var args = Array.prototype.slice.call(arguments, 2); return (isSxTruthy(isSignal(s)) ? (function() {
+  var old = signalValue(s);
+  var newVal = apply(f, cons(old, args));
+  return (isSxTruthy(!isSxTruthy(isIdentical(old, newVal))) ? (signalSetValue(s, newVal), notifySubscribers(s)) : NIL);
+})() : NIL); };
+
+  // computed
+  var computed = function(computeFn) { return (function() {
+  var s = makeSignal(NIL);
+  var deps = [];
+  var computeCtx = NIL;
+  return (function() {
+  var recompute = function() { { var _c = signalDeps(s); for (var _i = 0; _i < _c.length; _i++) { var dep = _c[_i]; signalRemoveSub(dep, recompute); } }
+signalSetDeps(s, []);
+return (function() {
+  var ctx = makeTrackingContext(recompute);
+  return (function() {
+  var prev = getTrackingContext();
+  setTrackingContext(ctx);
+  return (function() {
+  var newVal = computeFn();
+  setTrackingContext(prev);
+  signalSetDeps(s, trackingContextDeps(ctx));
+  return (function() {
+  var old = signalValue(s);
+  signalSetValue(s, newVal);
+  return (isSxTruthy(!isSxTruthy(isIdentical(old, newVal))) ? notifySubscribers(s) : NIL);
+})();
+})();
+})();
+})(); };
+  recompute();
+  return s;
+})();
+})(); };
+
+  // effect
+  var effect = function(effectFn) { return (function() {
+  var deps = [];
+  var disposed = false;
+  var cleanupFn = NIL;
+  return (function() {
+  var runEffect = function() { return (isSxTruthy(!isSxTruthy(disposed)) ? ((isSxTruthy(cleanupFn) ? cleanupFn() : NIL), forEach(function(dep) { return signalRemoveSub(dep, runEffect); }, deps), (deps = []), (function() {
+  var ctx = makeTrackingContext(runEffect);
+  return (function() {
+  var prev = getTrackingContext();
+  setTrackingContext(ctx);
+  return (function() {
+  var result = effectFn();
+  setTrackingContext(prev);
+  deps = trackingContextDeps(ctx);
+  return (isSxTruthy(isCallable(result)) ? (cleanupFn = result) : NIL);
+})();
+})();
+})()) : NIL); };
+  runEffect();
+  return function() { disposed = true;
+if (isSxTruthy(cleanupFn)) {
+  cleanupFn();
+}
+{ var _c = deps; for (var _i = 0; _i < _c.length; _i++) { var dep = _c[_i]; signalRemoveSub(dep, runEffect); } }
+return (deps = []); };
+})();
+})(); };
+
+  // *batch-depth*
+  var _batchDepth = NIL;
+
+  // *batch-queue*
+  var _batchQueue = [];
+
+  // batch
+  var batch = function(thunk) { _batchDepth = (_batchDepth + 1);
+thunk();
+_batchDepth = (_batchDepth - 1);
+return (isSxTruthy((_batchDepth == 0)) ? (function() {
+  var queue = _batchQueue;
+  _batchQueue = [];
+  return (function() {
+  var seen = [];
+  var pending = [];
+  { var _c = queue; for (var _i = 0; _i < _c.length; _i++) { var s = _c[_i]; { var _c = signalSubscribers(s); for (var _i = 0; _i < _c.length; _i++) { var sub = _c[_i]; if (isSxTruthy(!isSxTruthy(contains(seen, sub)))) {
+  seen.push(sub);
+  pending.push(sub);
+} } } } }
+  return forEach(function(sub) { return sub(); }, pending);
+})();
+})() : NIL); };
+
+  // notify-subscribers
+  var notifySubscribers = function(s) { return (isSxTruthy((_batchDepth > 0)) ? (isSxTruthy(!isSxTruthy(contains(_batchQueue, s))) ? append_b(_batchQueue, s) : NIL) : flushSubscribers(s)); };
+
+  // flush-subscribers
+  var flushSubscribers = function(s) { return forEach(function(sub) { return sub(); }, signalSubscribers(s)); };
+
+  // dispose-computed
+  var disposeComputed = function(s) { return (isSxTruthy(isSignal(s)) ? (forEach(function(dep) { return signalRemoveSub(dep, NIL); }, signalDeps(s)), signalSetDeps(s, [])) : NIL); };
+
+  // *island-scope*
+  var _islandScope = NIL;
+
+  // with-island-scope
+  var withIslandScope = function(scopeFn, bodyFn) { return (function() {
+  var prev = _islandScope;
+  _islandScope = scopeFn;
+  return (function() {
+  var result = bodyFn();
+  _islandScope = prev;
+  return result;
+})();
+})(); };
+
+  // register-in-scope
+  var registerInScope = function(disposable) { return (isSxTruthy(_islandScope) ? _islandScope(disposable) : NIL); };
+
+  // *store-registry*
+  var _storeRegistry = {};
+
+  // def-store
+  var defStore = function(name, initFn) { return (function() {
+  var registry = _storeRegistry;
+  if (isSxTruthy(!isSxTruthy(hasKey_p(registry, name)))) {
+  _storeRegistry = assoc(registry, name, initFn());
+}
+  return get(_storeRegistry, name);
+})(); };
+
+  // use-store
+  var useStore = function(name) { return (isSxTruthy(hasKey_p(_storeRegistry, name)) ? get(_storeRegistry, name) : error((String("Store not found: ") + String(name) + String(". Call (def-store ...) before (use-store ...).")))); };
+
+  // clear-stores
+  var clearStores = function() { return (_storeRegistry = {}); };
+
+  // emit-event
+  var emitEvent = function(el, eventName, detail) { return domDispatch(el, eventName, detail); };
+
+  // on-event
+  var onEvent = function(el, eventName, handler) { return domListen(el, eventName, handler); };
+
+  // bridge-event
+  var bridgeEvent = function(el, eventName, targetSignal, transformFn) { return effect(function() { return (function() {
+  var remove = domListen(el, eventName, function(e) { return (function() {
+  var detail = eventDetail(e);
+  var newVal = (isSxTruthy(transformFn) ? transformFn(detail) : detail);
+  return reset_b(targetSignal, newVal);
+})(); });
+  return remove;
+})(); }); };
+
+
   // =========================================================================
   // Platform interface — DOM adapter (browser-only)
   // =========================================================================
@@ -2400,6 +2729,10 @@ callExpr.push(dictGet(kwargs, k)); } }
     return _hasDom ? document.createTextNode(s) : null;
   }
 
+  function createComment(s) {
+    return _hasDom ? document.createComment(s || "") : null;
+  }
+
   function createFragment() {
     return _hasDom ? document.createDocumentFragment() : null;
   }
@@ -2523,6 +2856,16 @@ callExpr.push(dictGet(kwargs, k)); } }
     return el.dispatchEvent(evt);
   }
 
+  function domListen(el, name, handler) {
+    if (!_hasDom || !el) return function() {};
+    el.addEventListener(name, handler);
+    return function() { el.removeEventListener(name, handler); };
+  }
+
+  function eventDetail(e) {
+    return (e && e.detail != null) ? e.detail : nil;
+  }
+
   function domQuery(sel) {
     return _hasDom ? document.querySelector(sel) : null;
   }
@@ -2534,6 +2877,29 @@ callExpr.push(dictGet(kwargs, k)); } }
 
   function domTagName(el) { return el && el.tagName ? el.tagName : ""; }
 
+  // Island DOM helpers
+  function domRemove(node) {
+    if (node && node.parentNode) node.parentNode.removeChild(node);
+  }
+  function domChildNodes(el) {
+    if (!el || !el.childNodes) return [];
+    return Array.prototype.slice.call(el.childNodes);
+  }
+  function domRemoveChildrenAfter(marker) {
+    if (!marker || !marker.parentNode) return;
+    var parent = marker.parentNode;
+    while (marker.nextSibling) parent.removeChild(marker.nextSibling);
+  }
+  function domSetData(el, key, val) {
+    if (el) { if (!el._sxData) el._sxData = {}; el._sxData[key] = val; }
+  }
+  function domGetData(el, key) {
+    return (el && el._sxData) ? (el._sxData[key] != null ? el._sxData[key] : nil) : nil;
+  }
+  function jsonParse(s) {
+    try { return JSON.parse(s); } catch(e) { return {}; }
+  }
+
   // =========================================================================
   // Performance overrides — replace transpiled spec with imperative JS
   // =========================================================================
@@ -2729,6 +3095,7 @@ callExpr.push(dictGet(kwargs, k)); } }
   function setTimeout_(fn, ms) { return setTimeout(fn, ms || 0); }
   function setInterval_(fn, ms) { return setInterval(fn, ms || 1000); }
   function clearTimeout_(id) { clearTimeout(id); }
+  function clearInterval_(id) { clearInterval(id); }
   function requestAnimationFrame_(fn) {
     if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(fn);
     else setTimeout(fn, 16);
@@ -3637,11 +4004,32 @@ callExpr.push(dictGet(kwargs, k)); } }
   };
 
   // Expose render functions as primitives so SX code can call them
-  if (typeof renderToHtml === "function") PRIMITIVES["render-to-html"] = renderToHtml;
-  if (typeof renderToSx === "function") PRIMITIVES["render-to-sx"] = renderToSx;
-  if (typeof aser === "function") PRIMITIVES["aser"] = aser;
   if (typeof renderToDom === "function") PRIMITIVES["render-to-dom"] = renderToDom;
 
+  // Expose signal functions as primitives so runtime-evaluated SX code
+  // (e.g. island bodies from .sx files) can call them
+  PRIMITIVES["signal"] = createSignal;
+  PRIMITIVES["signal?"] = isSignal;
+  PRIMITIVES["deref"] = deref;
+  PRIMITIVES["reset!"] = reset_b;
+  PRIMITIVES["swap!"] = swap_b;
+  PRIMITIVES["computed"] = computed;
+  PRIMITIVES["effect"] = effect;
+  PRIMITIVES["batch"] = batch;
+  PRIMITIVES["dispose"] = dispose;
+  // Reactive DOM helpers for island code
+  PRIMITIVES["reactive-text"] = reactiveText;
+  PRIMITIVES["create-text-node"] = createTextNode;
+  PRIMITIVES["dom-set-text-content"] = domSetTextContent;
+  PRIMITIVES["dom-listen"] = domListen;
+  PRIMITIVES["dom-dispatch"] = domDispatch;
+  PRIMITIVES["event-detail"] = eventDetail;
+  PRIMITIVES["def-store"] = defStore;
+  PRIMITIVES["use-store"] = useStore;
+  PRIMITIVES["emit-event"] = emitEvent;
+  PRIMITIVES["on-event"] = onEvent;
+  PRIMITIVES["bridge-event"] = bridgeEvent;
+
   // =========================================================================
   // Async IO: Promise-aware rendering for client-side IO primitives
   // =========================================================================
@@ -4303,25 +4691,12 @@ callExpr.push(dictGet(kwargs, k)); } }
   }
 
   function render(source) {
-    if (!_hasDom) {
-      var exprs = parse(source);
-      var parts = [];
-      for (var i = 0; i < exprs.length; i++) parts.push(renderToHtml(exprs[i], merge(componentEnv)));
-      return parts.join("");
-    }
     var exprs = parse(source);
     var frag = document.createDocumentFragment();
     for (var i = 0; i < exprs.length; i++) frag.appendChild(renderToDom(exprs[i], merge(componentEnv), null));
     return frag;
   }
 
-  function renderToString(source) {
-    var exprs = parse(source);
-    var parts = [];
-    for (var i = 0; i < exprs.length; i++) parts.push(renderToHtml(exprs[i], merge(componentEnv)));
-    return parts.join("");
-  }
-
   var Sx = {
     VERSION: "ref-2.0",
     parse: parse,
@@ -4329,7 +4704,7 @@ callExpr.push(dictGet(kwargs, k)); } }
     eval: function(expr, env) { return trampoline(evalExpr(expr, env || merge(componentEnv))); },
     loadComponents: loadComponents,
     render: render,
-    renderToString: renderToString,
+    
     serialize: serialize,
     NIL: NIL,
     Symbol: Symbol,
@@ -4337,8 +4712,6 @@ callExpr.push(dictGet(kwargs, k)); } }
     isTruthy: isSxTruthy,
     isNil: isNil,
     componentEnv: componentEnv,
-    renderToHtml: function(expr, env) { return renderToHtml(expr, env || merge(componentEnv)); },
-    renderToSx: function(expr, env) { return renderToSx(expr, env || merge(componentEnv)); },
     renderToDom: _hasDom ? function(expr, env, ns) { return renderToDom(expr, env || merge(componentEnv), ns || null); } : null,
     parseTriggerSpec: typeof parseTriggerSpec === "function" ? parseTriggerSpec : null,
     parseTime: typeof parseTime === "function" ? parseTime : null,
@@ -4360,6 +4733,8 @@ callExpr.push(dictGet(kwargs, k)); } }
     renderComponent: typeof sxRenderComponent === "function" ? sxRenderComponent : null,
     getEnv: function() { return componentEnv; },
     resolveSuspense: typeof resolveSuspense === "function" ? resolveSuspense : null,
+    hydrateIslands: typeof sxHydrateIslands === "function" ? sxHydrateIslands : null,
+    disposeIsland: typeof disposeIsland === "function" ? disposeIsland : null,
     init: typeof bootInit === "function" ? bootInit : null,
     splitPathSegments: splitPathSegments,
     parseRoutePattern: parseRoutePattern,
@@ -4369,7 +4744,22 @@ callExpr.push(dictGet(kwargs, k)); } }
     registerIoDeps: typeof registerIoDeps === "function" ? registerIoDeps : null,
     asyncRender: typeof asyncSxRenderWithEnv === "function" ? asyncSxRenderWithEnv : null,
     asyncRenderToDom: typeof asyncRenderToDom === "function" ? asyncRenderToDom : null,
-    _version: "ref-2.0 (boot+dom+engine+html+orchestration+parser+sx, bootstrap-compiled)"
+    signal: signal,
+    deref: deref,
+    reset: reset_b,
+    swap: swap_b,
+    computed: computed,
+    effect: effect,
+    batch: batch,
+    isSignal: isSignal,
+    makeSignal: makeSignal,
+    defStore: defStore,
+    useStore: useStore,
+    clearStores: clearStores,
+    emitEvent: emitEvent,
+    onEvent: onEvent,
+    bridgeEvent: bridgeEvent,
+    _version: "ref-2.0 (boot+dom+engine+orchestration+parser, bootstrap-compiled)"
   };
 
 
@@ -4411,4 +4801,4 @@ callExpr.push(dictGet(kwargs, k)); } }
   if (typeof module !== "undefined" && module.exports) module.exports = Sx;
   else global.Sx = Sx;
 
-})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : this);
+})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : this);

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-08T11:17:09Z";
+  var SX_VERSION = "2026-03-08T11:49:09Z";
 
   function isNil(x) { return x === NIL || x === null || x === undefined; }
   function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -1473,7 +1473,10 @@ continue; } else { return NIL; } } };
   return (isSxTruthy((name == "raw!")) ? renderDomRaw(args, env) : (isSxTruthy((name == "<>")) ? renderDomFragment(args, env, ns) : (isSxTruthy(startsWith(name, "html:")) ? renderDomElement(slice(name, 5), args, env, ns) : (isSxTruthy(isRenderDomForm(name)) ? (isSxTruthy((isSxTruthy(contains(HTML_TAGS, name)) && sxOr((isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword")), ns))) ? renderDomElement(name, args, env, ns) : dispatchRenderForm(name, expr, env, ns)) : (isSxTruthy((isSxTruthy(envHas(env, name)) && isMacro(envGet(env, name)))) ? renderToDom(expandMacro(envGet(env, name), args, env), env, ns) : (isSxTruthy(contains(HTML_TAGS, name)) ? renderDomElement(name, args, env, ns) : (isSxTruthy((isSxTruthy(startsWith(name, "~")) && isSxTruthy(envHas(env, name)) && isIsland(envGet(env, name)))) ? renderDomIsland(envGet(env, name), args, env, ns) : (isSxTruthy(startsWith(name, "~")) ? (function() {
   var comp = envGet(env, name);
   return (isSxTruthy(isComponent(comp)) ? renderDomComponent(comp, args, env, ns) : renderDomUnknownComponent(name));
-})() : (isSxTruthy((isSxTruthy((indexOf_(name, "-") > 0)) && isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword"))) ? renderDomElement(name, args, env, ns) : (isSxTruthy(ns) ? renderDomElement(name, args, env, ns) : renderToDom(trampoline(evalExpr(expr, env)), env, ns)))))))))));
+})() : (isSxTruthy((isSxTruthy((indexOf_(name, "-") > 0)) && isSxTruthy((len(args) > 0)) && (typeOf(first(args)) == "keyword"))) ? renderDomElement(name, args, env, ns) : (isSxTruthy(ns) ? renderDomElement(name, args, env, ns) : (isSxTruthy((isSxTruthy((name == "deref")) && _islandScope)) ? (function() {
+  var sigOrVal = trampoline(evalExpr(first(args), env));
+  return (isSxTruthy(isSignal(sigOrVal)) ? reactiveText(sigOrVal) : createTextNode((String(deref(sigOrVal)))));
+})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))))));
 })() : (isSxTruthy(sxOr(isLambda(head), (typeOf(head) == "list"))) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (function() {
   var frag = createFragment();
   { var _c = expr; for (var _i = 0; _i < _c.length; _i++) { var x = _c[_i]; domAppend(frag, renderToDom(x, env, ns)); } }
@@ -3496,6 +3499,7 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
   function setTimeout_(fn, ms) { return setTimeout(fn, ms || 0); }
   function setInterval_(fn, ms) { return setInterval(fn, ms || 1000); }
   function clearTimeout_(id) { clearTimeout(id); }
+  function clearInterval_(id) { clearInterval(id); }
   function requestAnimationFrame_(fn) {
     if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(fn);
     else setTimeout(fn, 16);
@@ -4409,6 +4413,30 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
   if (typeof aser === "function") PRIMITIVES["aser"] = aser;
   if (typeof renderToDom === "function") PRIMITIVES["render-to-dom"] = renderToDom;
 
+  // Expose signal functions as primitives so runtime-evaluated SX code
+  // (e.g. island bodies from .sx files) can call them
+  PRIMITIVES["signal"] = createSignal;
+  PRIMITIVES["signal?"] = isSignal;
+  PRIMITIVES["deref"] = deref;
+  PRIMITIVES["reset!"] = reset_b;
+  PRIMITIVES["swap!"] = swap_b;
+  PRIMITIVES["computed"] = computed;
+  PRIMITIVES["effect"] = effect;
+  PRIMITIVES["batch"] = batch;
+  PRIMITIVES["dispose"] = dispose;
+  // Reactive DOM helpers for island code
+  PRIMITIVES["reactive-text"] = reactiveText;
+  PRIMITIVES["create-text-node"] = createTextNode;
+  PRIMITIVES["dom-set-text-content"] = domSetTextContent;
+  PRIMITIVES["dom-listen"] = domListen;
+  PRIMITIVES["dom-dispatch"] = domDispatch;
+  PRIMITIVES["event-detail"] = eventDetail;
+  PRIMITIVES["def-store"] = defStore;
+  PRIMITIVES["use-store"] = useStore;
+  PRIMITIVES["emit-event"] = emitEvent;
+  PRIMITIVES["on-event"] = onEvent;
+  PRIMITIVES["bridge-event"] = bridgeEvent;
+
   // =========================================================================
   // Async IO: Promise-aware rendering for client-side IO primitives
   // =========================================================================

shared/sx/async_eval.py

@@ -1703,6 +1703,7 @@ _ASER_FORMS: dict[str, Any] = {
     "defcomp": _assf_define,
     "defmacro": _assf_define,
     "defhandler": _assf_define,
+    "defisland": _assf_define,
     "begin": _assf_begin,
     "do": _assf_begin,
     "quote": _assf_quote,

shared/sx/deps.py

@@ -10,7 +10,7 @@ from __future__ import annotations
 import os
 from typing import Any
 
-from .types import Component, Macro, Symbol
+from .types import Component, Island, Macro, Symbol
 
 
 def _use_ref() -> bool:
@@ -50,7 +50,7 @@ def _transitive_deps_fallback(name: str, env: dict[str, Any]) -> set[str]:
             return
         seen.add(n)
         val = env.get(n)
-        if isinstance(val, Component):
+        if isinstance(val, (Component, Island)):
             for dep in _scan_ast(val.body):
                 walk(dep)
         elif isinstance(val, Macro):
@@ -64,7 +64,7 @@ def _transitive_deps_fallback(name: str, env: dict[str, Any]) -> set[str]:
 
 def _compute_all_deps_fallback(env: dict[str, Any]) -> None:
     for key, val in env.items():
-        if isinstance(val, Component):
+        if isinstance(val, (Component, Island)):
             val.deps = _transitive_deps_fallback(key, env)
 
 
@@ -102,7 +102,7 @@ def _transitive_io_refs_fallback(
             return
         seen.add(n)
         val = env.get(n)
-        if isinstance(val, Component):
+        if isinstance(val, (Component, Island)):
             all_refs.update(_scan_io_refs_fallback(val.body, io_names))
             for dep in _scan_ast(val.body):
                 walk(dep)
@@ -120,7 +120,7 @@ def _compute_all_io_refs_fallback(
     env: dict[str, Any], io_names: set[str]
 ) -> None:
     for key, val in env.items():
-        if isinstance(val, Component):
+        if isinstance(val, (Component, Island)):
             val.io_refs = _transitive_io_refs_fallback(key, env, io_names)
 
 
@@ -135,7 +135,7 @@ def _components_needed_fallback(page_sx: str, env: dict[str, Any]) -> set[str]:
     for name in direct:
         all_needed.add(name)
         val = env.get(name)
-        if isinstance(val, Component) and val.deps:
+        if isinstance(val, (Component, Island)) and val.deps:
             all_needed.update(val.deps)
         else:
             all_needed.update(_transitive_deps_fallback(name, env))

shared/sx/html.py

@@ -27,7 +27,7 @@ from __future__ import annotations
 import contextvars
 from typing import Any
 
-from .types import Component, Keyword, Lambda, Macro, NIL, Symbol
+from .types import Component, Island, Keyword, Lambda, Macro, NIL, Symbol
 from .evaluator import _eval as _raw_eval, _call_component as _raw_call_component, _expand_macro, _trampoline
 
 def _eval(expr, env):
@@ -411,6 +411,64 @@ def _render_component(comp: Component, args: list, env: dict[str, Any]) -> str:
     return _render(comp.body, local)
 
 
+def _render_island(island: Island, args: list, env: dict[str, Any]) -> str:
+    """Render an island as static HTML with hydration attributes.
+
+    Produces: <div data-sx-island="name" data-sx-state='{"k":"v",...}'>body HTML</div>
+    The client hydrates this into a reactive island.
+    """
+    import json as _json
+
+    kwargs: dict[str, Any] = {}
+    children: list[Any] = []
+    i = 0
+    while i < len(args):
+        arg = args[i]
+        if isinstance(arg, Keyword) and i + 1 < len(args):
+            kwargs[arg.name] = _eval(args[i + 1], env)
+            i += 2
+        else:
+            children.append(arg)
+            i += 1
+
+    local = dict(island.closure)
+    local.update(env)
+    for p in island.params:
+        if p in kwargs:
+            local[p] = kwargs[p]
+        else:
+            local[p] = NIL
+    if island.has_children:
+        local["children"] = _RawHTML("".join(_render(c, env) for c in children))
+
+    body_html = _render(island.body, local)
+
+    # Serialize state for hydration — only keyword args
+    state = {}
+    for k, v in kwargs.items():
+        if isinstance(v, (str, int, float, bool)):
+            state[k] = v
+        elif v is NIL or v is None:
+            state[k] = None
+        elif isinstance(v, list):
+            state[k] = v
+        elif isinstance(v, dict):
+            state[k] = v
+        else:
+            state[k] = str(v)
+
+    state_json = _escape_attr(_json.dumps(state, separators=(",", ":"))) if state else ""
+    island_name = _escape_attr(island.name)
+
+    parts = [f'<div data-sx-island="{island_name}"']
+    if state_json:
+        parts.append(f' data-sx-state="{state_json}"')
+    parts.append(">")
+    parts.append(body_html)
+    parts.append("</div>")
+    return "".join(parts)
+
+
 def _render_list(expr: list, env: dict[str, Any]) -> str:
     """Render a list expression — could be an HTML element, special form,
     component call, or data list."""
@@ -464,9 +522,11 @@ def _render_list(expr: list, env: dict[str, Any]) -> str:
         if name in HTML_TAGS:
             return _render_element(name, expr[1:], env)
 
-        # --- Component (~prefix) → render-aware component call ------------
+        # --- Component/Island (~prefix) → render-aware call ----------------
         if name.startswith("~"):
             val = env.get(name)
+            if isinstance(val, Island):
+                return _render_island(val, expr[1:], env)
             if isinstance(val, Component):
                 return _render_component(val, expr[1:], env)
             # Fall through to evaluation

shared/sx/jinja_bridge.py

@@ -25,7 +25,7 @@ import hashlib
 import os
 from typing import Any
 
-from .types import NIL, Component, Keyword, Macro, Symbol
+from .types import NIL, Component, Island, Keyword, Macro, Symbol
 from .parser import parse
 import os as _os
 if _os.environ.get("SX_USE_REF") == "1":
@@ -64,7 +64,14 @@ def _compute_component_hash() -> None:
     parts = []
     for key in sorted(_COMPONENT_ENV):
         val = _COMPONENT_ENV[key]
-        if isinstance(val, Component):
+        if isinstance(val, Island):
+            param_strs = ["&key"] + list(val.params)
+            if val.has_children:
+                param_strs.extend(["&rest", "children"])
+            params_sx = "(" + " ".join(param_strs) + ")"
+            body_sx = serialize(val.body)
+            parts.append(f"(defisland ~{val.name} {params_sx} {body_sx})")
+        elif isinstance(val, Component):
             param_strs = ["&key"] + list(val.params)
             if val.has_children:
                 param_strs.extend(["&rest", "children"])
@@ -198,7 +205,7 @@ def register_components(sx_source: str) -> None:
     # Slightly over-counts per component but safe and avoids re-scanning at request time.
     all_classes: set[str] | None = None
     for key, val in _COMPONENT_ENV.items():
-        if key not in existing and isinstance(val, Component):
+        if key not in existing and isinstance(val, (Component, Island)):
             if all_classes is None:
                 all_classes = scan_classes_from_sx(sx_source)
             val.css_classes = set(all_classes)
@@ -307,7 +314,16 @@ def client_components_tag(*names: str) -> str:
     from .parser import serialize
     parts = []
     for key, val in _COMPONENT_ENV.items():
-        if isinstance(val, Component):
+        if isinstance(val, Island):
+            if names and val.name not in names and key.lstrip("~") not in names:
+                continue
+            param_strs = ["&key"] + list(val.params)
+            if val.has_children:
+                param_strs.extend(["&rest", "children"])
+            params_sx = "(" + " ".join(param_strs) + ")"
+            body_sx = serialize(val.body, pretty=True)
+            parts.append(f"(defisland ~{val.name} {params_sx} {body_sx})")
+        elif isinstance(val, Component):
             if names and val.name not in names and key.lstrip("~") not in names:
                 continue
             # Reconstruct defcomp source from the Component object
@@ -365,7 +381,15 @@ def components_for_page(page_sx: str, service: str | None = None) -> tuple[str,
     # Also include macros — they're needed for client-side expansion
     parts = []
     for key, val in _COMPONENT_ENV.items():
-        if isinstance(val, Component):
+        if isinstance(val, Island):
+            if f"~{val.name}" in needed or key in needed:
+                param_strs = ["&key"] + list(val.params)
+                if val.has_children:
+                    param_strs.extend(["&rest", "children"])
+                params_sx = "(" + " ".join(param_strs) + ")"
+                body_sx = serialize(val.body, pretty=True)
+                parts.append(f"(defisland ~{val.name} {params_sx} {body_sx})")
+        elif isinstance(val, Component):
             if f"~{val.name}" in needed or key in needed:
                 param_strs = ["&key"] + list(val.params)
                 if val.has_children:
@@ -412,7 +436,7 @@ def css_classes_for_page(page_sx: str, service: str | None = None) -> set[str]:
     classes: set[str] = set()
 
     for key, val in _COMPONENT_ENV.items():
-        if isinstance(val, Component):
+        if isinstance(val, (Component, Island)):
             if (f"~{val.name}" in needed or key in needed) and val.css_classes:
                 classes.update(val.css_classes)
 

shared/sx/ref/adapter-dom.sx

@@ -125,6 +125,13 @@
               ns
                 (render-dom-element name args env ns)
 
+              ;; deref in island scope → reactive text node
+              (and (= name "deref") *island-scope*)
+                (let ((sig-or-val (trampoline (eval-expr (first args) env))))
+                  (if (signal? sig-or-val)
+                    (reactive-text sig-or-val)
+                    (create-text-node (str (deref sig-or-val)))))
+
               ;; Fallback — evaluate then render
               :else
                 (render-to-dom (trampoline (eval-expr expr env)) env ns)))

shared/sx/ref/bootstrap_js.py

@@ -416,6 +416,7 @@ class JSEmitter:
             "set-timeout": "setTimeout_",
             "set-interval": "setInterval_",
             "clear-timeout": "clearTimeout_",
+            "clear-interval": "clearInterval_",
             "request-animation-frame": "requestAnimationFrame_",
             "csrf-token": "csrfToken",
             "cross-origin?": "isCrossOrigin",
@@ -2003,7 +2004,7 @@ def compile_ref_to_js(
         if name in adapter_set and name in adapter_platform:
             parts.append(adapter_platform[name])
 
-    parts.append(fixups_js(has_html, has_sx, has_dom))
+    parts.append(fixups_js(has_html, has_sx, has_dom, has_signals))
     if has_continuations:
         parts.append(CONTINUATIONS_JS)
     if has_dom:
@@ -3126,6 +3127,7 @@ PLATFORM_ORCHESTRATION_JS = """
   function setTimeout_(fn, ms) { return setTimeout(fn, ms || 0); }
   function setInterval_(fn, ms) { return setInterval(fn, ms || 1000); }
   function clearTimeout_(id) { clearTimeout(id); }
+  function clearInterval_(id) { clearInterval(id); }
   function requestAnimationFrame_(fn) {
     if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(fn);
     else setTimeout(fn, 16);
@@ -4023,7 +4025,7 @@ PLATFORM_BOOT_JS = """
 
 """
 
-def fixups_js(has_html, has_sx, has_dom):
+def fixups_js(has_html, has_sx, has_dom, has_signals=False):
     lines = ['''
   // =========================================================================
   // Post-transpilation fixups
@@ -4044,6 +4046,31 @@ def fixups_js(has_html, has_sx, has_dom):
         lines.append('  if (typeof aser === "function") PRIMITIVES["aser"] = aser;')
     if has_dom:
         lines.append('  if (typeof renderToDom === "function") PRIMITIVES["render-to-dom"] = renderToDom;')
+    if has_signals:
+        lines.append('''
+  // Expose signal functions as primitives so runtime-evaluated SX code
+  // (e.g. island bodies from .sx files) can call them
+  PRIMITIVES["signal"] = createSignal;
+  PRIMITIVES["signal?"] = isSignal;
+  PRIMITIVES["deref"] = deref;
+  PRIMITIVES["reset!"] = reset_b;
+  PRIMITIVES["swap!"] = swap_b;
+  PRIMITIVES["computed"] = computed;
+  PRIMITIVES["effect"] = effect;
+  PRIMITIVES["batch"] = batch;
+  PRIMITIVES["dispose"] = dispose;
+  // Reactive DOM helpers for island code
+  PRIMITIVES["reactive-text"] = reactiveText;
+  PRIMITIVES["create-text-node"] = createTextNode;
+  PRIMITIVES["dom-set-text-content"] = domSetTextContent;
+  PRIMITIVES["dom-listen"] = domListen;
+  PRIMITIVES["dom-dispatch"] = domDispatch;
+  PRIMITIVES["event-detail"] = eventDetail;
+  PRIMITIVES["def-store"] = defStore;
+  PRIMITIVES["use-store"] = useStore;
+  PRIMITIVES["emit-event"] = emitEvent;
+  PRIMITIVES["on-event"] = onEvent;
+  PRIMITIVES["bridge-event"] = bridgeEvent;''')
     return "\n".join(lines)