- // Uses GET for short args, POST for long payloads (URL length safety).
- // Results are cached client-side by (name + args) with a TTL.
- function registerProxiedIo(name) {
- registerIoPrimitive(name, function(args, kwargs) {
- // Cache key: name + serialized args
- var cacheKey = name;
- for (var ci = 0; ci < args.length; ci++) cacheKey += " " + String(args[ci]);
- for (var ck in kwargs) {
- if (kwargs.hasOwnProperty(ck)) cacheKey += " " + ck + "=" + String(kwargs[ck]);
- }
- var cached = _ioCache[cacheKey];
- if (cached && cached.expires > Date.now()) return cached.value;
-
- var url = "/sx/io/" + encodeURIComponent(name);
- var qs = [];
- for (var i = 0; i < args.length; i++) {
- qs.push("_arg" + i + "=" + encodeURIComponent(String(args[i])));
- }
- for (var k in kwargs) {
- if (kwargs.hasOwnProperty(k)) {
- qs.push(encodeURIComponent(k) + "=" + encodeURIComponent(String(kwargs[k])));
- }
- }
- var queryStr = qs.join("&");
- var fetchOpts;
- if (queryStr.length > 1500) {
- // POST with JSON body for long payloads
- var sArgs = [];
- for (var j = 0; j < args.length; j++) sArgs.push(String(args[j]));
- var sKwargs = {};
- for (var kk in kwargs) {
- if (kwargs.hasOwnProperty(kk)) sKwargs[kk] = String(kwargs[kk]);
- }
- var postHeaders = { "SX-Request": "true", "Content-Type": "application/json" };
- var csrf = csrfToken();
- if (csrf && csrf !== NIL) postHeaders["X-CSRFToken"] = csrf;
- fetchOpts = {
- method: "POST",
- headers: postHeaders,
- body: JSON.stringify({ args: sArgs, kwargs: sKwargs })
- };
- } else {
- if (queryStr) url += "?" + queryStr;
- fetchOpts = { headers: { "SX-Request": "true" } };
- }
- var result = fetch(url, fetchOpts)
- .then(function(resp) {
- if (!resp.ok) {
- logWarn("sx:io " + name + " failed " + resp.status);
- return NIL;
- }
- return resp.text();
- })
- .then(function(text) {
- if (!text || text === "nil") return NIL;
- try {
- var exprs = parse(text);
- var val = exprs.length === 1 ? exprs[0] : exprs;
- _ioCache[cacheKey] = { value: val, expires: Date.now() + IO_CACHE_TTL };
- return val;
- } catch (e) {
- logWarn("sx:io " + name + " parse error: " + (e && e.message ? e.message : e));
- return NIL;
- }
- })
- .catch(function(e) {
- logWarn("sx:io " + name + " network error: " + (e && e.message ? e.message : e));
- return NIL;
- });
- // Cache the in-flight promise too (dedup concurrent calls for same args)
- _ioCache[cacheKey] = { value: result, expires: Date.now() + IO_CACHE_TTL };
- return result;
- });
- }
-
- // Register IO deps as proxied primitives (idempotent, called per-page)
- function registerIoDeps(names) {
- if (!names || !names.length) return;
- var registered = 0;
- for (var i = 0; i < names.length; i++) {
- var name = names[i];
- if (!IO_PRIMITIVES[name]) {
- registerProxiedIo(name);
- registered++;
- }
- }
- if (registered > 0) {
- logInfo("sx:io registered " + registered + " proxied primitives: " + names.join(", "));
- }
- }
-
-
- // Parser — compiled from parser.sx (see PLATFORM_PARSER_JS for ident char classes)
- var parse = sxParse;
-
- // =========================================================================
- // Public API
- // =========================================================================
-
- var componentEnv = {};
-
- function loadComponents(source) {
- var exprs = parse(source);
- for (var i = 0; i < exprs.length; i++) {
- trampoline(evalExpr(exprs[i], componentEnv));
- }
- }
-
- 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,
- parseAll: parse,
- eval: function(expr, env) { return trampoline(evalExpr(expr, env || merge(componentEnv))); },
- loadComponents: loadComponents,
- render: render,
- renderToString: renderToString,
- serialize: serialize,
- NIL: NIL,
- Symbol: Symbol,
- Keyword: Keyword,
- 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,
- defaultTrigger: typeof defaultTrigger === "function" ? defaultTrigger : null,
- parseSwapSpec: typeof parseSwapSpec === "function" ? parseSwapSpec : null,
- parseRetrySpec: typeof parseRetrySpec === "function" ? parseRetrySpec : null,
- nextRetryMs: typeof nextRetryMs === "function" ? nextRetryMs : null,
- filterParams: typeof filterParams === "function" ? filterParams : null,
- morphNode: typeof morphNode === "function" ? morphNode : null,
- morphChildren: typeof morphChildren === "function" ? morphChildren : null,
- swapDomNodes: typeof swapDomNodes === "function" ? swapDomNodes : null,
- process: typeof processElements === "function" ? processElements : null,
- executeRequest: typeof executeRequest === "function" ? executeRequest : null,
- postSwap: typeof postSwap === "function" ? postSwap : null,
- processScripts: typeof processSxScripts === "function" ? processSxScripts : null,
- mount: typeof sxMount === "function" ? sxMount : null,
- hydrate: typeof sxHydrateElements === "function" ? sxHydrateElements : null,
- update: typeof sxUpdateElement === "function" ? sxUpdateElement : null,
- 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,
- matchRoute: matchRoute,
- findMatchingRoute: findMatchingRoute,
- registerIo: typeof registerIoPrimitive === "function" ? registerIoPrimitive : null,
- registerIoDeps: typeof registerIoDeps === "function" ? registerIoDeps : null,
- asyncRender: typeof asyncSxRenderWithEnv === "function" ? asyncSxRenderWithEnv : null,
- asyncRenderToDom: typeof asyncRenderToDom === "function" ? asyncRenderToDom : null,
- 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+html+orchestration+parser+sx, bootstrap-compiled)"
- };
-
-
- // --- Popstate listener ---
- if (typeof window !== "undefined") {
- window.addEventListener("popstate", function(e) {
- handlePopstate(e && e.state ? e.state.scrollY || 0 : 0);
- });
- }
-
- // --- Auto-init ---
- if (typeof document !== "undefined") {
- var _sxInit = function() {
- bootInit();
- // Process any suspense resolutions that arrived before init
- if (global.__sxPending) {
- for (var pi = 0; pi < global.__sxPending.length; pi++) {
- resolveSuspense(global.__sxPending[pi].id, global.__sxPending[pi].sx);
- }
- global.__sxPending = null;
- }
- // Set up direct resolution for future chunks
- global.__sxResolve = function(id, sx) { resolveSuspense(id, sx); };
- // Register service worker for offline data caching
- if ("serviceWorker" in navigator) {
- navigator.serviceWorker.register("/sx-sw.js", { scope: "/" }).then(function(reg) {
- logInfo("sx:sw registered (scope: " + reg.scope + ")");
- }).catch(function(err) {
- logWarn("sx:sw registration failed: " + (err && err.message ? err.message : err));
- });
- }
- };
- if (document.readyState === "loading") {
- document.addEventListener("DOMContentLoaded", _sxInit);
- } else {
- _sxInit();
- }
- }
- if (typeof module !== "undefined" && module.exports) module.exports = Sx;
- else global.Sx = Sx;
-
-})(typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : this);
\ No newline at end of file
diff --git a/shared/sx/templates/cssx.sx b/shared/sx/templates/cssx.sx
new file mode 100644
index 0000000..11c5714
--- /dev/null
+++ b/shared/sx/templates/cssx.sx
@@ -0,0 +1,219 @@
+;; @client — send all define forms to browser for client-side use.
+;; CSSX — computed CSS from s-expressions.
+;;
+;; Generic mechanism: cssx is a macro that groups CSS property declarations.
+;; The vocabulary (property mappings, value functions) is pluggable — the
+;; Tailwind-inspired defaults below are just one possible style system.
+;;
+;; Usage:
+;; (cssx (:text (colour "violet" 699) (size "4xl") (weight "bold") (family "mono"))
+;; (:bg (colour "stone" 50)))
+;;
+;; Each group is (:keyword value ...modifiers):
+;; - keyword maps to a CSS property via cssx-properties dict
+;; - value is the CSS value for that property
+;; - modifiers are extra CSS declaration strings, concatenated in
+;;
+;; Single group:
+;; (cssx (:text (colour "violet" 699)))
+;;
+;; Modifiers without a colour:
+;; (cssx (:text nil (size "4xl") (weight "bold")))
+;;
+;; Unknown keywords pass through as raw CSS property names:
+;; (cssx (:outline (colour "red" 500))) → "outline:hsl(0,72%,53%);"
+;;
+;; Standalone modifiers work outside cssx too:
+;; :style (size "4xl")
+;; :style (str (weight "bold") (family "mono"))
+
+;; =========================================================================
+;; Layer 1: Generic mechanism — cssx macro + cssxgroup function
+;; =========================================================================
+
+;; Property keyword → CSS property name. Extend this dict for new mappings.
+(define cssx-properties
+ {"text" "color"
+ "bg" "background-color"
+ "border" "border-color"})
+
+;; Evaluate one property group: (:text value modifier1 modifier2 ...)
+;; If value is nil, only modifiers are emitted (no property declaration).
+;; NOTE: name must NOT contain hyphens — the evaluator's isRenderExpr check
+;; treats (hyphenated-name :keyword ...) as a custom HTML element.
+(define cssxgroup
+ (fn (prop value b c d e)
+ (let ((css-prop (or (get cssx-properties prop) prop)))
+ (str (if (nil? value) "" (str css-prop ":" value ";"))
+ (or b "") (or c "") (or d "") (or e "")))))
+
+;; cssx macro — takes one or more property groups, expands to (str ...).
+;; (cssx (:text val ...) (:bg val ...))
+;; → (str (cssxgroup :text val ...) (cssxgroup :bg val ...))
+(defmacro cssx (&rest groups)
+ `(str ,@(map (fn (g) (cons 'cssxgroup g)) groups)))
+
+;; =========================================================================
+;; Layer 2: Value vocabulary — colour, size, weight, family
+;; These are independent functions. Use inside cssx groups or standalone.
+;; Replace or extend with any style system.
+;; =========================================================================
+
+;; ---------------------------------------------------------------------------
+;; Colour — compute CSS colour value from name + shade
+;; ---------------------------------------------------------------------------
+
+(define colour-bases
+ {"violet" {"h" 263 "s" 70}
+ "purple" {"h" 271 "s" 81}
+ "indigo" {"h" 239 "s" 84}
+ "blue" {"h" 217 "s" 91}
+ "sky" {"h" 199 "s" 89}
+ "cyan" {"h" 188 "s" 94}
+ "teal" {"h" 173 "s" 80}
+ "emerald" {"h" 160 "s" 84}
+ "green" {"h" 142 "s" 71}
+ "lime" {"h" 84 "s" 78}
+ "yellow" {"h" 48 "s" 96}
+ "amber" {"h" 38 "s" 92}
+ "orange" {"h" 25 "s" 95}
+ "red" {"h" 0 "s" 72}
+ "rose" {"h" 350 "s" 89}
+ "pink" {"h" 330 "s" 81}
+ "stone" {"h" 25 "s" 6}
+ "slate" {"h" 215 "s" 16}
+ "gray" {"h" 220 "s" 9}
+ "zinc" {"h" 240 "s" 5}
+ "neutral" {"h" 0 "s" 0}})
+
+(define lerp (fn (a b t) (+ a (* t (- b a)))))
+
+(define shade-to-lightness
+ (fn (shade)
+ (cond
+ (<= shade 50) (lerp 100 97 (/ shade 50))
+ (<= shade 100) (lerp 97 93 (/ (- shade 50) 50))
+ (<= shade 200) (lerp 93 87 (/ (- shade 100) 100))
+ (<= shade 300) (lerp 87 77 (/ (- shade 200) 100))
+ (<= shade 400) (lerp 77 64 (/ (- shade 300) 100))
+ (<= shade 500) (lerp 64 53 (/ (- shade 400) 100))
+ (<= shade 600) (lerp 53 45 (/ (- shade 500) 100))
+ (<= shade 700) (lerp 45 38 (/ (- shade 600) 100))
+ (<= shade 800) (lerp 38 30 (/ (- shade 700) 100))
+ (<= shade 900) (lerp 30 21 (/ (- shade 800) 100))
+ (<= shade 950) (lerp 21 13 (/ (- shade 900) 50))
+ true 13)))
+
+(define colour
+ (fn (name shade)
+ (let ((base (get colour-bases name)))
+ (if (nil? base)
+ name
+ (let ((h (get base "h"))
+ (s (get base "s"))
+ (l (shade-to-lightness shade)))
+ (str "hsl(" h "," s "%," (round l) "%)"))))))
+
+;; ---------------------------------------------------------------------------
+;; Font sizes — named size → font-size + line-height (Tailwind v3 scale)
+;; ---------------------------------------------------------------------------
+
+(define cssx-sizes
+ {"xs" "font-size:0.75rem;line-height:1rem;"
+ "sm" "font-size:0.875rem;line-height:1.25rem;"
+ "base" "font-size:1rem;line-height:1.5rem;"
+ "lg" "font-size:1.125rem;line-height:1.75rem;"
+ "xl" "font-size:1.25rem;line-height:1.75rem;"
+ "2xl" "font-size:1.5rem;line-height:2rem;"
+ "3xl" "font-size:1.875rem;line-height:2.25rem;"
+ "4xl" "font-size:2.25rem;line-height:2.5rem;"
+ "5xl" "font-size:3rem;line-height:1;"
+ "6xl" "font-size:3.75rem;line-height:1;"
+ "7xl" "font-size:4.5rem;line-height:1;"
+ "8xl" "font-size:6rem;line-height:1;"
+ "9xl" "font-size:8rem;line-height:1;"})
+
+;; ---------------------------------------------------------------------------
+;; Font weights — named weight → numeric value
+;; ---------------------------------------------------------------------------
+
+(define cssx-weights
+ {"thin" "100"
+ "extralight" "200"
+ "light" "300"
+ "normal" "400"
+ "medium" "500"
+ "semibold" "600"
+ "bold" "700"
+ "extrabold" "800"
+ "black" "900"})
+
+;; ---------------------------------------------------------------------------
+;; Font families — named family → CSS font stack
+;; ---------------------------------------------------------------------------
+
+(define cssx-families
+ {"sans" "ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif"
+ "serif" "ui-serif,Georgia,Cambria,\"Times New Roman\",Times,serif"
+ "mono" "ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"})
+
+;; ---------------------------------------------------------------------------
+;; Standalone modifier functions — return CSS declaration strings
+;; Each returns a complete CSS declaration string. Use inside cssx groups
+;; or standalone on :style with str.
+;; ---------------------------------------------------------------------------
+
+;; -- Typography --
+
+(define size
+ (fn (s) (or (get cssx-sizes s) (str "font-size:" s ";"))))
+
+(define weight
+ (fn (w)
+ (let ((v (get cssx-weights w)))
+ (str "font-weight:" (or v w) ";"))))
+
+(define family
+ (fn (f)
+ (let ((v (get cssx-families f)))
+ (str "font-family:" (or v f) ";"))))
+
+(define align
+ (fn (a) (str "text-align:" a ";")))
+
+(define decoration
+ (fn (d) (str "text-decoration:" d ";")))
+
+;; -- Spacing (Tailwind scale: 1 unit = 0.25rem) --
+
+(define spacing (fn (n) (str (* n 0.25) "rem")))
+
+(define p (fn (n) (str "padding:" (spacing n) ";")))
+(define px (fn (n) (str "padding-left:" (spacing n) ";padding-right:" (spacing n) ";")))
+(define py (fn (n) (str "padding-top:" (spacing n) ";padding-bottom:" (spacing n) ";")))
+(define pt (fn (n) (str "padding-top:" (spacing n) ";")))
+(define pb (fn (n) (str "padding-bottom:" (spacing n) ";")))
+(define pl (fn (n) (str "padding-left:" (spacing n) ";")))
+(define pr (fn (n) (str "padding-right:" (spacing n) ";")))
+
+(define m (fn (n) (str "margin:" (spacing n) ";")))
+(define mx (fn (n) (str "margin-left:" (spacing n) ";margin-right:" (spacing n) ";")))
+(define my (fn (n) (str "margin-top:" (spacing n) ";margin-bottom:" (spacing n) ";")))
+(define mt (fn (n) (str "margin-top:" (spacing n) ";")))
+(define mb (fn (n) (str "margin-bottom:" (spacing n) ";")))
+(define ml (fn (n) (str "margin-left:" (spacing n) ";")))
+(define mr (fn (n) (str "margin-right:" (spacing n) ";")))
+(define mx-auto (fn () "margin-left:auto;margin-right:auto;"))
+
+;; -- Display & layout --
+
+(define display (fn (d) (str "display:" d ";")))
+(define max-w (fn (w) (str "max-width:" w ";")))
+
+;; Named max-widths (Tailwind scale)
+(define cssx-max-widths
+ {"xs" "20rem" "sm" "24rem" "md" "28rem"
+ "lg" "32rem" "xl" "36rem" "2xl" "42rem"
+ "3xl" "48rem" "4xl" "56rem" "5xl" "64rem"
+ "6xl" "72rem" "7xl" "80rem"
+ "full" "100%" "none" "none"})
diff --git a/sx/sx/essays/hegelian-synthesis.sx b/sx/sx/essays/hegelian-synthesis.sx
new file mode 100644
index 0000000..3658ee7
--- /dev/null
+++ b/sx/sx/essays/hegelian-synthesis.sx
@@ -0,0 +1,79 @@
+;; ---------------------------------------------------------------------------
+;; The Hegelian Synthesis of Hypertext and Reactivity
+;; ---------------------------------------------------------------------------
+
+(defcomp ~essay-hegelian-synthesis ()
+ (~doc-page :title "The Hegelian Synthesis"
+ (p :class "text-stone-500 text-sm italic mb-8"
+ "On the dialectical resolution of the hypertext/reactive contradiction.")
+ (~doc-section :title "I. Thesis: The server renders" :id "thesis"
+ (p :class "text-stone-600"
+ "In the beginning was the hyperlink. The web was born as a system of documents connected by references. A page was a " (em "representation") " — complete, self-contained, delivered whole by the server. The browser was a thin client. It received, it rendered, it followed links. The server was the sole author of state.")
+ (p :class "text-stone-600"
+ "This is the thesis of the web: " (strong "the server knows") ". It knows what to show. It knows what state you're in. It knows what actions are available. It encodes all of this in the document it sends you. When you click a link, the server sends a new document. When you submit a form, the server processes it and sends another document. The cycle is: request, represent, repeat.")
+ (p :class "text-stone-600"
+ "Hegel would recognise this as a form of " (em "Substance") " — the server as the unmoved mover, the ground of all content. The client has no interiority. It does not " (em "decide") " anything. It displays what it is told to display. The web page is Spinozistic: a mode of the server, one of its infinite expressions, determined entirely by its cause.")
+ (p :class "text-stone-600"
+ "htmx is the most faithful modern expression of this thesis. It extends the hyperlink and the form — the two primordial hypermedia controls — to every element and every HTTP verb, but it does not break the paradigm. The server still renders. The server still knows. The server still authors state. htmx simply makes the authoring more fine-grained: instead of replacing the entire page, the server replaces a fragment. The thesis is refined, not rejected.")
+ (p :class "text-stone-600"
+ "The beauty of the thesis is its simplicity. One source of truth. One rendering pipeline. No synchronisation problems. No stale state. No " (code "useEffect") " cleanup. Every request produces a fresh representation, and the representation " (em "is") " the application. There is nothing hidden behind it, no shadow state, no ghost in the machine.")
+ (p :class "text-stone-600"
+ "But the thesis has a limit. The server cannot know everything the client experiences. It cannot know that the user's mouse is hovering over a button. It cannot know that a drag is in progress. It cannot know that a counter should increment " (em "now") ", this millisecond, without a round trip. The thesis renders the world from the server's perspective — and the client's perspective, its " (em "Erlebnis") ", its lived experience, is absent."))
+ (~doc-section :title "II. Antithesis: The client reacts" :id "antithesis"
+ (p :class "text-stone-600"
+ "React arrived as the negation of the server-rendered web. Where the thesis said " (em "the server knows") ", React said " (em "the client knows better") ". Where the thesis treated the browser as a display surface, React treated it as an application runtime. Where the thesis sent documents, React sent " (em "programs") ".")
+ (p :class "text-stone-600"
+ "The Hegelian antithesis is not mere opposition — it is " (em "determinate negation") ". React does not simply reject server rendering. It rejects the specific limitation that the thesis cannot overcome: the absence of immediate, client-local state. React gives the client " (em "interiority") ". The component has state. It has a lifecycle. It makes decisions without consulting the server. It " (em "reacts") ".")
+ (p :class "text-stone-600"
+ "This is the birth of " (em "Subject") " in the Hegelian sense. The client is no longer pure receptivity. It has " (em "Selbstbewusstsein") " — self-consciousness. It knows its own state. A " (code "useState") " hook is an act of self-positing: the component declares " (em "I have an interior") ". A " (code "useEffect") " is self-reflection: the component observes its own changes and responds. The client becomes, in miniature, a knowing subject.")
+ (p :class "text-stone-600"
+ "But the antithesis inherits its own contradiction. By giving the client interiority, React creates " (em "two sources of truth") ". The server has its state. The client has its state. They must be synchronised. And synchronisation is the eternal problem of distributed systems — it cannot be solved, only managed. Hence the endless parade of state management libraries, cache invalidation strategies, optimistic updates, revalidation hooks. Each is an attempt to paper over the fundamental contradiction: the client and server both claim to know, and they do not always agree.")
+ (p :class "text-stone-600"
+ "Worse, the antithesis destroys what the thesis had achieved. The representation is no longer self-contained. A React SPA sends a JavaScript bundle — a program, not a document. The server sends an empty " (code "") " and a prayer. The browser must compile, execute, fetch data, and construct the interface from scratch. The document — the web's primordial unit of meaning — is hollowed out. What arrives is not a representation but an " (em "instruction to construct one") ".")
+ (p :class "text-stone-600"
+ "Hegel would diagnose this as the antithesis's characteristic failure: it achieves freedom (client autonomy) at the cost of substance (server authority). The SPA is the " (em "beautiful soul") " of web development — pure subjectivity that has cut itself off from the objective world and wonders why everything is so complicated."))
+ (~doc-section :title "III. The contradiction in practice" :id "contradiction"
+ (p :class "text-stone-600"
+ "The practical manifestation of the dialectic is visible in every web team's daily life. The server-rendered camp says: " (em "just use HTML and htmx, it's simpler") ". The React camp says: " (em "you can't build a real app without client state") ". Both are correct. Both are incomplete.")
+ (p :class "text-stone-600"
+ "The server camp cannot build a colour picker. Cannot build a drag-and-drop interface. Cannot build a spreadsheet. Cannot build anything that requires the client to know its own state between HTTP requests. Every interaction that needs immediacy — every tooltip, every animation, every character-by-character validation — forces the server camp to smuggle in JavaScript through the back door, breaking their own thesis.")
+ (p :class "text-stone-600"
+ "The React camp cannot deliver a page without JavaScript. Cannot render on first load without a server-rendering framework bolted on top. Cannot cache a representation because there is no stable representation to cache. Cannot inspect a page without devtools because the document is an empty shell. Every improvement — server components, streaming SSR, partial hydration — is an attempt to recover what the thesis already had: server-authored, self-contained documents.")
+ (p :class "text-stone-600"
+ "The two camps are not in disagreement about different things. They are in disagreement about " (em "the same thing") ": where should state live? The thesis says: on the server. The antithesis says: on the client. Neither can accommodate the obvious truth that " (strong "some state belongs on the server and some belongs on the client") ", and that a coherent architecture must handle both without privileging either."))
+ (~doc-section :title "IV. Synthesis: The island in the lake" :id "synthesis"
+ (p :class "text-stone-600"
+ "Hegel's dialectic does not end in compromise. The synthesis is not half-thesis, half-antithesis. It is a new category that " (em "sublates") " — " (em "aufhebt") " — both: preserving what is true in each while resolving the contradiction between them. The synthesis contains the thesis and antithesis as " (em "moments") " within a higher unity.")
+ (p :class "text-stone-600"
+ "The island architecture is this synthesis. The " (em "lake") " is the thesis preserved: server-rendered HTML, delivered as complete representations, navigated by hypermedia controls. The " (em "island") " is the antithesis preserved: client-local state, reactive signals, immediate interaction. Neither is primary. Neither is a concession to the other. Both are " (em "moments") " of the same page.")
+ (p :class "text-stone-600"
+ "But the crucial move — the one that makes this a genuine Hegelian synthesis rather than a mere juxtaposition — is " (strong "the morph") ". When the server sends new content and the client merges it into the existing DOM, hydrated islands are " (em "preserved") ". The server updates the lake. The islands keep their state. The server's new representation flows around the islands like water around rocks. The client's interiority survives the server's authority.")
+ (p :class "text-stone-600"
+ "This is " (em "Aufhebung") " in its precise meaning: cancellation, preservation, and elevation. The thesis (server authority) is " (em "cancelled") " — the server no longer has total control over the page. It is " (em "preserved") " — the server still renders the document, still determines structure, still delivers representations. It is " (em "elevated") " — the server now renders " (em "around") " reactive islands, acknowledging their autonomy. Simultaneously, the antithesis (client autonomy) is cancelled (the client no longer controls the whole page), preserved (islands keep their state), and elevated (client state now coexists with server-driven updates).")
+ (~doc-code :code (highlight ";; The server sends this. The island already exists\n;; in the DOM with reactive state. The morph preserves it.\n\n(defisland ~sx-header ()\n (let ((families (list \"violet\" \"rose\" \"blue\" \"emerald\"))\n (idx (signal 0))\n (current (computed (fn ()\n (nth families (mod (deref idx) (len families)))))))\n (a :href \"/\" :sx-get \"/\" :sx-target \"#main-panel\"\n (span :style (cssx (:text (colour (deref current) 500)))\n :on-click (fn (e) (swap! idx inc))\n \"reactive\"))))\n\n;; Click: colour changes (client state)\n;; Click also triggers sx-get (server fetch)\n;; Server response morphs the page\n;; Island keeps its colour — state survives the swap" "lisp"))
+ (p :class "text-stone-600"
+ "In this example, the word " (em "reactive") " cycles through colours on click. The same click triggers a server navigation. The server responds with a fresh page. The morph algorithm encounters the island, recognises it as already hydrated, and " (em "skips it") ". The signal — the " (code "idx") " that tracks which colour family we're on — survives. The client's inner life persists through the server's outer renewal."))
+ (~doc-section :title "V. Spirit: The self-knowing page" :id "spirit"
+ (p :class "text-stone-600"
+ "Hegel's system does not end with synthesis. Synthesis becomes a new thesis, which generates its own antithesis, and the dialectic continues. The island architecture is not a final resting place. It is a " (em "moment") " in the self-development of the web.")
+ (p :class "text-stone-600"
+ "Consider what the synthesis makes possible. The page now has two modes of knowledge: the server's knowledge (what the page should contain) and the client's knowledge (what the user is doing right now). Neither is reducible to the other. Neither is privileged over the other. The page is, in Hegel's terminology, " (em "Spirit") " — " (em "Geist") " — the unity of substance and subject, the place where objective content and subjective experience meet.")
+ (p :class "text-stone-600"
+ "The self-hosting nature of SX deepens this. The evaluator that renders islands is specified in the same language as the islands themselves (" (code "eval.sx") "). The renderer is specified in the same language (" (code "render.sx") "). The parser is specified in the same language (" (code "parser.sx") "). The system knows itself. It is a specification that specifies its own interpretation. This is Hegel's " (em "absolute knowing") " — not omniscience, but self-transparency. The system is what it knows, and it knows what it is.")
+ (p :class "text-stone-600"
+ "The morph algorithm is the phenomenological crux. It is the mechanism by which the page achieves continuity of experience through discontinuity of content. The server sends a completely new representation — new HTML, new structure, new text. The morph walks the old and new DOM trees, reconciling them. Where it finds an island — a locus of client subjectivity — it preserves it. Where it finds static content — server substance — it updates it. The result is a page that is simultaneously the same (the island's state persists) and different (the surrounding content has changed).")
+ (p :class "text-stone-600"
+ "This is Hegel's " (em "identity of identity and difference") ". The page after the morph is the same page (same islands, same signals, same DOM nodes) and a different page (new server content, new navigation state, new URL). The dialectic is not resolved by eliminating one side. It is resolved by maintaining both simultaneously — and the morph is the concrete mechanism that achieves this."))
+ (~doc-section :title "VI. The speculative proposition" :id "speculative"
+ (p :class "text-stone-600"
+ "Hegel distinguished " (em "ordinary") " propositions from " (em "speculative") " ones. An ordinary proposition has a fixed subject and a predicate attached to it from outside: " (em "the rose is red") ". A speculative proposition is one where the predicate reflects back on the subject and transforms it: " (em "the actual is the rational") ".")
+ (p :class "text-stone-600"
+ "The proposition " (em "React is hypermedia") " is speculative in this sense. It does not mean that React, as it exists, is hypermedia. It means that what React " (em "was trying to be") " — a way to specify interactive UI — is what hypermedia " (em "always already was") " — a way to specify interactive documents. The predicate (hypermedia) transforms the subject (React): once you see that reactive islands are hypermedia controls, you can no longer see React as merely a JavaScript library. It was always an attempt to extend the expressiveness of hypermedia. It just didn't know it.")
+ (p :class "text-stone-600"
+ "And the converse: " (em "hypermedia is reactive") ". The hyperlink is already a reactive control — it responds to user input (click) by producing a state change (navigation). The form is reactive — it responds to submission by producing a state change (server-side processing + new representation). htmx makes this explicit: any element can react to any event by triggering any HTTP verb. The only thing htmx lacks is " (em "local") " reactivity — the ability to change without consulting the server.")
+ (p :class "text-stone-600"
+ "Islands supply exactly this. And by doing so, they do not add something foreign to hypermedia. They complete it. They give hypermedia the last degree of freedom it was missing: the ability for a control to react to itself, to maintain its own state, to compute derived values from its own inputs — without breaking the hypermedia contract that the server is the author of the document.")
+ (p :class "text-stone-600"
+ "The Hegelian synthesis is not a compromise between server rendering and client reactivity. It is the recognition that they were always the same thing seen from different sides. The server renders the document. The document contains controls. Some controls maintain local state. The document flows around them. The state persists through the flow. The server and the client are not two systems bridged together. They are one system that knows itself from two perspectives.")
+ (p :class "text-stone-600"
+ "Click the word " (em "reactive") " in the header above. The colour changes. The page navigates. The colour survives. That is the Hegelian synthesis of the hypertext/reactive dialectic — not in theory, but in the DOM."))))
diff --git a/sx/sx/layouts.sx b/sx/sx/layouts.sx
index 6603cc7..b204f7f 100644
--- a/sx/sx/layouts.sx
+++ b/sx/sx/layouts.sx
@@ -5,21 +5,40 @@
;; Nav components — logo header, sibling arrows, children links
;; ---------------------------------------------------------------------------
-;; @css text-violet-700 text-violet-600 text-violet-500 text-stone-400 text-stone-500 text-stone-600
-;; @css hover:text-violet-600 hover:text-violet-700 hover:bg-violet-50
-;; @css bg-violet-50 border-violet-200 border
+;; CSSX replaces Tailwind text-*/bg-*/font-* classes — computed via cssx.sx
;; Logo + tagline + copyright — always shown at top of page area.
-(defcomp ~sx-header ()
- (a :href "/"
- :sx-get "/" :sx-target "#main-panel" :sx-select "#main-panel"
- :sx-swap "outerHTML" :sx-push-url "true"
- :class "block max-w-3xl mx-auto px-4 pt-8 pb-4 text-center no-underline"
- (span :class "text-4xl font-bold font-mono text-violet-700 block mb-2" "()")
- (p :class "text-lg text-stone-500 mb-1"
- "Framework free reactive hypermedia")
- (p :class "text-xs text-stone-400"
- "© Giles Bradshaw 2026")))
+;; The header itself is an island so the "reactive" word can cycle colours
+;; on click — demonstrates inline signals without a separate component.
+(defisland ~sx-header ()
+ (let ((families (list "violet" "rose" "blue" "emerald" "amber" "cyan" "red" "teal" "pink" "indigo"))
+ (idx (signal 0))
+ (shade (signal 500))
+ (current-family (computed (fn ()
+ (nth families (mod (deref idx) (len families)))))))
+ (a :href "/"
+ :sx-get "/" :sx-target "#main-panel" :sx-select "#main-panel"
+ :sx-swap "outerHTML" :sx-push-url "true"
+ :style (str (display "block") (max-w (get cssx-max-widths "3xl"))
+ (mx-auto) (px 4) (pt 8) (pb 4) (align "center")
+ (decoration "none"))
+ (span :style (str (display "block") (mb 2)
+ (cssx (:text (colour "violet" 699) (size "4xl") (weight "bold") (family "mono"))))
+ "()")
+ (p :style (str (mb 1) (cssx (:text (colour "stone" 500) (size "lg"))))
+ "Framework free "
+ (span
+ :style (str (cssx (:text (colour (deref current-family) (deref shade))
+ (weight "bold")))
+ "cursor:pointer;transition:color 0.3s,font-weight 0.3s;")
+ :on-click (fn (e)
+ (batch (fn ()
+ (swap! idx inc)
+ (reset! shade (+ 400 (* (mod (* (deref idx) 137) 5) 50))))))
+ "reactive")
+ " hypermedia")
+ (p :style (cssx (:text (colour "stone" 400) (size "xs")))
+ "© Giles Bradshaw 2026"))))
;; @css grid grid-cols-3
@@ -40,21 +59,24 @@
:sx-get (get prev-node "href") :sx-target "#main-panel"
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
- :class "text-sm text-stone-500 hover:text-violet-600 text-right"
+ :class "text-right"
+ :style (cssx (:text (colour "stone" 500) (size "sm")))
(str "← " (get prev-node "label")))
(a :href (get node "href")
:sx-get (get node "href") :sx-target "#main-panel"
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
- :class (if is-leaf
- "text-2xl font-bold text-violet-700 text-center px-4"
- "text-lg font-semibold text-violet-700 text-center px-4")
+ :class "text-center px-4"
+ :style (if is-leaf
+ (cssx (:text (colour "violet" 700) (size "2xl") (weight "bold")))
+ (cssx (:text (colour "violet" 700) (size "lg") (weight "semibold"))))
(get node "label"))
(a :href (get next-node "href")
:sx-get (get next-node "href") :sx-target "#main-panel"
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
- :class "text-sm text-stone-500 hover:text-violet-600 text-left"
+ :class "text-left"
+ :style (cssx (:text (colour "stone" 500) (size "sm")))
(str (get next-node "label") " →")))))))
;; Children links — shown as clearly clickable buttons.
@@ -66,7 +88,9 @@
:sx-get (get item "href") :sx-target "#main-panel"
:sx-select "#main-panel" :sx-swap "outerHTML"
:sx-push-url "true"
- :class "px-3 py-1.5 text-sm rounded border border-violet-200 text-violet-700 hover:bg-violet-50 transition-colors"
+ :class "px-3 py-1.5 rounded border transition-colors"
+ :style (cssx (:text (colour "violet" 700) (size "sm"))
+ (:border (colour "violet" 200)))
(get item "label")))
items))))
diff --git a/sx/sx/nav-data.sx b/sx/sx/nav-data.sx
index 4b3006f..4b6f542 100644
--- a/sx/sx/nav-data.sx
+++ b/sx/sx/nav-data.sx
@@ -93,7 +93,9 @@
(dict :label "Tools for Fools" :href "/essays/zero-tooling"
:summary "SX was built without a code editor. No IDE, no build tools, no linters, no bundlers. What zero-tooling web development looks like.")
(dict :label "React is Hypermedia" :href "/essays/react-is-hypermedia"
- :summary "A React Island is a hypermedia control. Its behavior is specified in SX.")))
+ :summary "A React Island is a hypermedia control. Its behavior is specified in SX.")
+ (dict :label "The Hegelian Synthesis" :href "/essays/hegelian-synthesis"
+ :summary "On the dialectical resolution of the hypertext/reactive contradiction. Thesis: the server renders. Antithesis: the client reacts. Synthesis: the island in the lake.")))
(define philosophy-nav-items (list
(dict :label "The SX Manifesto" :href "/philosophy/sx-manifesto"
@@ -194,7 +196,11 @@
(dict :label "sx-swarm" :href "/plans/sx-swarm"
:summary "Container orchestration in SX — service definitions, environment macros, deploy pipelines. Replace YAML with a real language.")
(dict :label "sx-proxy" :href "/plans/sx-proxy"
- :summary "Reverse proxy in SX — routes, TLS, middleware chains, load balancing. Macros generate config from the same service definitions as the orchestrator.")))
+ :summary "Reverse proxy in SX — routes, TLS, middleware chains, load balancing. Macros generate config from the same service definitions as the orchestrator.")
+ (dict :label "Async Eval Convergence" :href "/plans/async-eval-convergence"
+ :summary "Eliminate hand-written evaluators — bootstrap async_eval.py from the spec via an async adapter layer. One spec, one truth, zero divergence.")
+ (dict :label "WASM Bytecode VM" :href "/plans/wasm-bytecode-vm"
+ :summary "Compile SX to bytecode, run in a Rust/WASM VM. Compact wire format, no parse overhead, near-native speed, DOM via JS bindings.")))
(define reactive-islands-nav-items (list
(dict :label "Overview" :href "/reactive-islands/"
diff --git a/sx/sxc/pages/docs.sx b/sx/sxc/pages/docs.sx
index 4070a49..ac8dd3d 100644
--- a/sx/sxc/pages/docs.sx
+++ b/sx/sxc/pages/docs.sx
@@ -221,6 +221,7 @@
"no-alternative" (~essay-no-alternative)
"zero-tooling" (~essay-zero-tooling)
"react-is-hypermedia" (~essay-react-is-hypermedia)
+ "hegelian-synthesis" (~essay-hegelian-synthesis)
:else (~essays-index-content))))
;; ---------------------------------------------------------------------------
@@ -516,6 +517,8 @@
"sx-forge" (~plan-sx-forge-content)
"sx-swarm" (~plan-sx-swarm-content)
"sx-proxy" (~plan-sx-proxy-content)
+ "async-eval-convergence" (~plan-async-eval-convergence-content)
+ "wasm-bytecode-vm" (~plan-wasm-bytecode-vm-content)
:else (~plans-index-content))))
;; ---------------------------------------------------------------------------
diff --git a/sx/sxc/pages/helpers.py b/sx/sxc/pages/helpers.py
index 1ad02ca..558e5a5 100644
--- a/sx/sxc/pages/helpers.py
+++ b/sx/sxc/pages/helpers.py
@@ -13,6 +13,7 @@ def _register_sx_helpers() -> None:
register_page_helpers("sx", {
"highlight": _highlight,
+ "component-source": _component_source,
"primitives-data": _primitives_data,
"special-forms-data": _special_forms_data,
"reference-data": _reference_data,
@@ -35,6 +36,33 @@ def _register_sx_helpers() -> None:
})
+def _component_source(name: str) -> str:
+ """Return the pretty-printed defcomp/defisland source for a named component."""
+ from shared.sx.jinja_bridge import get_component_env
+ from shared.sx.parser import serialize
+ from shared.sx.types import Component, Island
+
+ comp = get_component_env().get(name)
+ if isinstance(comp, Island):
+ param_strs = list(comp.params)
+ if comp.has_children:
+ param_strs.extend(["&rest", "children"])
+ params_sx = "(" + " ".join(param_strs) + ")"
+ body_sx = serialize(comp.body, pretty=True)
+ return f"(defisland {name} {params_sx}\n {body_sx})"
+ if not isinstance(comp, Component):
+ return f";; component {name} not found"
+ param_strs = ["&key"] + list(comp.params)
+ if comp.has_children:
+ param_strs.extend(["&rest", "children"])
+ params_sx = "(" + " ".join(param_strs) + ")"
+ body_sx = serialize(comp.body, pretty=True)
+ affinity = ""
+ if comp.render_target == "server":
+ affinity = " :affinity :server"
+ return f"(defcomp {name} {params_sx}{affinity}\n {body_sx})"
+
+
def _primitives_data() -> dict:
"""Return the PRIMITIVES dict for the primitives docs page."""
from content.pages import PRIMITIVES