rose-ash/sx/sx/reactive-islands/demo.sx

;; ---------------------------------------------------------------------------
;; Demo page — shows what's been implemented
;; ---------------------------------------------------------------------------

(defcomp ~reactive-islands/demo/reactive-islands-demo-content ()
  (~docs/page :title "Reactive Islands Demo"

    (~docs/section :title "What this demonstrates" :id "what"
      (p (strong "These are live interactive islands") " — not static code snippets. Click the buttons. The signal runtime is defined in " (code "signals.sx") " (374 lines of s-expressions), then bootstrapped to JavaScript by " (code "bootstrap_js.py") ". No hand-written signal logic in JavaScript.")
      (p "The transpiled " (code "sx-browser.js") " registers " (code "signal") ", " (code "deref") ", " (code "reset!") ", " (code "swap!") ", " (code "computed") ", " (code "effect") ", and " (code "batch") " as SX primitives — callable from " (code "defisland") " bodies defined in " (code ".sx") " files."))

    (~docs/section :title "1. Signal + Computed + Effect" :id "demo-counter"
      (p "A signal holds a value. A computed derives from it. Click the buttons — the counter and doubled value update instantly, no server round-trip.")
      (~reactive-islands/index/demo-counter :initial 0)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/counter (&key initial)\n  (let ((count (signal (or initial 0)))\n        (doubled (computed (fn () (* 2 (deref count))))))\n    (div :class \"...\"\n      (button :on-click (fn (e) (swap! count dec)) \"−\")\n      (span (deref count))\n      (button :on-click (fn (e) (swap! count inc)) \"+\")\n      (p \"doubled: \" (deref doubled)))))" "lisp"))
      (p (code "(deref count)") " in a text position creates a reactive text node. When " (code "count") " changes, " (em "only that text node") " updates. " (code "doubled") " recomputes automatically. No diffing."))

    (~docs/section :title "2. Temperature Converter" :id "demo-temperature"
      (p "Two derived values from one signal. Click to change Celsius — Fahrenheit updates reactively.")
      (~reactive-islands/index/demo-temperature)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/temperature ()\n  (let ((celsius (signal 20)))\n    (div :class \"...\"\n      (button :on-click (fn (e) (swap! celsius (fn (c) (- c 5)))) \"−5\")\n      (span (deref celsius))\n      (button :on-click (fn (e) (swap! celsius (fn (c) (+ c 5)))) \"+5\")\n      (span \"°C = \")\n      (span (+ (* (deref celsius) 1.8) 32))\n      (span \"°F\"))))" "lisp"))
      (p "The actual implementation uses " (code "computed") " for Fahrenheit: " (code "(computed (fn () (+ (* (deref celsius) 1.8) 32)))") ". The " (code "(deref fahrenheit)") " in the span creates a reactive text node that updates when celsius changes."))

    (~docs/section :title "3. Effect + Cleanup: Stopwatch" :id "demo-stopwatch"
      (p "Effects can return cleanup functions. This stopwatch starts a " (code "set-interval") " — the cleanup clears it when the running signal toggles off.")
      (~reactive-islands/index/demo-stopwatch)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/stopwatch ()\n  (let ((running (signal false))\n        (elapsed (signal 0))\n        (time-text (create-text-node \"0.0s\"))\n        (btn-text (create-text-node \"Start\")))\n    ;; Timer: effect creates interval, cleanup clears it\n    (effect (fn ()\n      (when (deref running)\n        (let ((id (set-interval (fn () (swap! elapsed inc)) 100)))\n          (fn () (clear-interval id))))))\n    ;; Display: updates text node when elapsed changes\n    (effect (fn ()\n      (let ((e (deref elapsed)))\n        (dom-set-text-content time-text\n          (str (floor (/ e 10)) \".\" (mod e 10) \"s\")))))\n    ;; Button label\n    (effect (fn ()\n      (dom-set-text-content btn-text\n        (if (deref running) \"Stop\" \"Start\"))))\n    (div :class \"...\"\n      (span time-text)\n      (button :on-click (fn (e) (swap! running not)) btn-text)\n      (button :on-click (fn (e)\n        (reset! running false) (reset! elapsed 0)) \"Reset\"))))" "lisp"))
      (p "Three effects, each tracking different signals. The timer effect's cleanup fires before each re-run — toggling " (code "running") " off clears the interval. No hook rules: effects can appear anywhere, in any order."))

    (~docs/section :title "4. Imperative Pattern" :id "demo-imperative"
      (p "For complex reactivity (dynamic classes, conditional text), use the imperative pattern: " (code "create-text-node") " + " (code "effect") " + " (code "dom-set-text-content") ".")
      (~reactive-islands/index/demo-imperative)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/imperative ()\n  (let ((count (signal 0))\n        (text-node (create-text-node \"0\")))\n    ;; Explicit effect: re-runs when count changes\n    (effect (fn ()\n      (dom-set-text-content text-node (str (deref count)))))\n    (div :class \"...\"\n      (span text-node)\n      (button :on-click (fn (e) (swap! count inc)) \"+\"))))" "lisp"))
      (p "Two patterns exist: " (strong "declarative") " (" (code "(span (deref sig))") " — auto-reactive via " (code "reactive-text") ") and " (strong "imperative") " (" (code "create-text-node") " + " (code "effect") " — explicit, full control). Use declarative for simple text, imperative for dynamic classes, conditional DOM, or complex updates."))

    (~docs/section :title "5. Reactive List" :id "demo-reactive-list"
      (p "When " (code "map") " is used with " (code "(deref signal)") " inside an island, it auto-upgrades to a reactive list. With " (code ":key") " attributes, existing DOM nodes are reused across updates — only additions, removals, and reorderings touch the DOM.")
      (~reactive-islands/index/demo-reactive-list)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/reactive-list ()\n  (let ((next-id (signal 1))\n        (items (signal (list)))\n        (add-item (fn (e)\n          (batch (fn ()\n            (swap! items (fn (old)\n              (append old (dict \"id\" (deref next-id)\n                                \"text\" (str \"Item \" (deref next-id))))))\n            (swap! next-id inc)))))\n        (remove-item (fn (id)\n          (swap! items (fn (old)\n            (filter (fn (item) (not (= (get item \"id\") id))) old))))))\n    (div\n      (button :on-click add-item \"Add Item\")\n      (span (deref (computed (fn () (len (deref items))))) \" items\")\n      (ul\n        (map (fn (item)\n          (li :key (str (get item \"id\"))\n              (span (get item \"text\"))\n              (button :on-click (fn (e) (remove-item (get item \"id\"))) \"✕\")))\n          (deref items))))))" "lisp"))
      (p (code ":key") " identifies each list item. When items change, the reconciler matches old and new keys — reusing existing DOM nodes, inserting new ones, and removing stale ones. Without keys, the list falls back to clear-and-rerender. " (code "batch") " groups the two signal writes into one update pass."))

    (~docs/section :title "6. Input Binding" :id "demo-input-binding"
      (p "The " (code ":bind") " attribute creates a two-way link between a signal and a form element. Type in the input — the signal updates. Change the signal — the input updates. Works with text inputs, checkboxes, radios, textareas, and selects.")
      (~reactive-islands/index/demo-input-binding)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/input-binding ()\n  (let ((name (signal \"\"))\n        (agreed (signal false)))\n    (div\n      (input :type \"text\" :bind name\n             :placeholder \"Type your name...\")\n      (span \"Hello, \" (strong (deref name)) \"!\")\n      (input :type \"checkbox\" :bind agreed)\n      (when (deref agreed)\n        (p \"Thanks for agreeing!\")))))" "lisp"))
      (p (code ":bind") " detects the element type automatically — text inputs use " (code "value") " + " (code "input") " event, checkboxes use " (code "checked") " + " (code "change") " event. The effect only updates the DOM when the value actually changed, preventing cursor jump."))

    (~docs/section :title "7. Portals" :id "demo-portal"
      (p "A " (code "portal") " renders children into a DOM node " (em "outside") " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape " (code "overflow:hidden") " or z-index stacking.")
      (~reactive-islands/index/demo-portal)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/portal ()\n  (let ((open? (signal false)))\n    (div\n      (button :on-click (fn (e) (swap! open? not))\n        (if (deref open?) \"Close Modal\" \"Open Modal\"))\n      (portal \"#portal-root\"\n        (when (deref open?)\n          (div :class \"fixed inset-0 bg-black/50 ...\"\n            :on-click (fn (e) (reset! open? false))\n            (div :class \"bg-white rounded-lg p-6 ...\"\n              :on-click (fn (e) (stop-propagation e))\n              (h2 \"Portal Modal\")\n              (p \"Rendered outside the island's DOM.\")\n              (button :on-click (fn (e) (reset! open? false))\n                \"Close\"))))))))" "lisp"))
      (p "The portal content lives in " (code "#portal-root") " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the " (code "register-in-scope") " mechanism handles cleanup."))

    (~docs/section :title "8. Error Boundaries" :id "demo-error-boundary"
      (p "When an island's rendering or effect throws, " (code "error-boundary") " catches the error and renders a fallback. The fallback receives the error and a retry function. Partial effects created before the error are disposed automatically.")
      (~reactive-islands/index/demo-error-boundary)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/error-boundary ()\n  (let ((throw? (signal false)))\n    (error-boundary\n      ;; Fallback: receives (err retry-fn)\n      (fn (err retry-fn)\n        (div :class \"p-3 bg-red-50 border border-red-200 rounded\"\n          (p :class \"text-red-700\" (error-message err))\n          (button :on-click (fn (e)\n            (reset! throw? false) (invoke retry-fn))\n            \"Retry\")))\n      ;; Children: the happy path\n      (do\n        (when (deref throw?) (error \"Intentional explosion!\"))\n        (p \"Everything is fine.\")))))" "lisp"))
      (p "React equivalent: " (code "componentDidCatch") " / " (code "ErrorBoundary") ". SX's version is simpler — one form, not a class. The " (code "error-boundary") " form is a render-dom special form in " (code "adapter-dom.sx") "."))

    (~docs/section :title "9. Refs — Imperative DOM Access" :id "demo-refs"
      (p "The " (code ":ref") " attribute captures a DOM element handle into a dict. Use it for imperative operations: focusing, measuring, reading values.")
      (~reactive-islands/index/demo-refs)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/refs ()\n  (let ((my-ref (dict \"current\" nil))\n        (msg (signal \"\")))\n    (input :ref my-ref :type \"text\"\n           :placeholder \"I can be focused programmatically\")\n    (button :on-click (fn (e)\n      (dom-focus (get my-ref \"current\")))\n      \"Focus Input\")\n    (button :on-click (fn (e)\n      (let ((el (get my-ref \"current\")))\n        (reset! msg (str \"value: \" (dom-get-prop el \"value\")))))\n      \"Read Input\")\n    (when (not (= (deref msg) \"\"))\n      (p (deref msg)))))" "lisp"))
      (p "React equivalent: " (code "useRef") ". In SX, a ref is just " (code "(dict \"current\" nil)") " — no special API. The " (code ":ref") " attribute sets " (code "(dict-set! ref \"current\" el)") " when the element is created. Read it with " (code "(get ref \"current\")") "."))

    (~docs/section :title "10. Dynamic Class and Style" :id "demo-dynamic-class"
      (p "React uses " (code "className") " and " (code "style") " props with state. SX does the same — " (code "(deref signal)") " inside a " (code ":class") " or " (code ":style") " attribute creates a reactive binding. The attribute updates when the signal changes.")
      (~reactive-islands/index/demo-dynamic-class)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/dynamic-class ()\n  (let ((danger (signal false))\n        (size (signal 16)))\n    (div\n      (button :on-click (fn (e) (swap! danger not))\n        (if (deref danger) \"Safe mode\" \"Danger mode\"))\n      (button :on-click (fn (e) (swap! size (fn (s) (+ s 2))))\n        \"Bigger\")\n      ;; Reactive class — recomputed when danger changes\n      (div :class (str \"p-3 rounded font-medium \"\n                       (if (deref danger)\n                         \"bg-red-100 text-red-800\"\n                         \"bg-green-100 text-green-800\"))\n           ;; Reactive style — recomputed when size changes\n           :style (str \"font-size:\" (deref size) \"px\")\n        \"This element's class and style are reactive.\"))))" "lisp"))
      (p "React equivalent: " (code "className={danger ? 'red' : 'green'}") " and " (code "style={{fontSize: size}}") ". In SX the " (code "str") " + " (code "if") " + " (code "deref") " pattern handles it — no " (code "classnames") " library needed. For complex conditional classes, use a " (code "computed") " or a CSSX " (code "defcomp") " that returns a class string."))

    (~docs/section :title "11. Resource + Suspense Pattern" :id "demo-resource"
      (p (code "resource") " wraps an async operation into a signal with " (code "loading") "/" (code "data") "/" (code "error") " states. Combined with " (code "cond") " + " (code "deref") ", this is the suspense pattern — no special form needed.")
      (~reactive-islands/index/demo-resource)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/resource ()\n  (let ((data (resource (fn ()\n                ;; Any promise-returning function\n                (promise-delayed 1500\n                  (dict \"name\" \"Ada Lovelace\"\n                        \"role\" \"First Programmer\"))))))\n    ;; This IS the suspense pattern:\n    (let ((state (deref data)))\n      (cond\n        (get state \"loading\")\n          (div \"Loading...\")\n        (get state \"error\")\n          (div \"Error: \" (get state \"error\"))\n        :else\n          (div (get (get state \"data\") \"name\"))))))" "lisp"))
      (p "React equivalent: " (code "Suspense") " + " (code "use()") " or " (code "useSWR") ". SX doesn't need a special " (code "suspense") " form because " (code "resource") " returns a signal and " (code "cond") " + " (code "deref") " creates reactive conditional rendering. When the promise resolves, the signal updates and the " (code "cond") " branch switches automatically."))

    (~docs/section :title "12. Transition Pattern" :id "demo-transition"
      (p "React's " (code "startTransition") " defers non-urgent updates so typing stays responsive. In SX: " (code "schedule-idle") " + " (code "batch") ". The filter runs during idle time, not blocking the input event.")
      (~reactive-islands/index/demo-transition)
      (~docs/code :code (highlight "(defisland ~reactive-islands/demo/transition ()\n  (let ((query (signal \"\"))\n        (all-items (list \"Signals\" \"Effects\" ...))\n        (filtered (signal (list)))\n        (pending (signal false)))\n    (reset! filtered all-items)\n    ;; Filter effect — deferred via schedule-idle\n    (effect (fn ()\n      (let ((q (lower (deref query))))\n        (if (= q \"\")\n          (do (reset! pending false)\n              (reset! filtered all-items))\n          (do (reset! pending true)\n              (schedule-idle (fn ()\n                (batch (fn ()\n                  (reset! filtered\n                    (filter (fn (item)\n                      (contains? (lower item) q))\n                      all-items))\n                  (reset! pending false))))))))))\n    (div\n      (input :bind query :placeholder \"Filter...\")\n      (when (deref pending) (span \"Filtering...\"))\n      (ul (map (fn (item) (li :key item item))\n            (deref filtered))))))" "lisp"))
      (p "React equivalent: " (code "startTransition(() => setFiltered(...))") ". SX uses " (code "schedule-idle") " (" (code "requestIdleCallback") " under the hood) to defer the expensive " (code "filter") " operation, and " (code "batch") " to group the result into one update. Fine-grained signals already avoid the jank that makes transitions critical in React — this pattern is for truly expensive computations."))

    (~docs/section :title "13. Shared Stores" :id "demo-stores"
      (p "React uses " (code "Context") " or state management libraries for cross-component state. SX uses " (code "def-store") " / " (code "use-store") " — named signal containers that persist across island creation/destruction.")
      (~reactive-islands/index/demo-store-writer)
      (~reactive-islands/index/demo-store-reader)
      (~docs/code :code (highlight ";; Island A — creates/writes the store\n(defisland ~reactive-islands/demo/store-writer ()\n  (let ((store (def-store \"theme\" (fn ()\n                 (dict \"color\" (signal \"violet\")\n                       \"dark\" (signal false))))))\n    (select :bind (get store \"color\")\n      (option :value \"violet\" \"Violet\")\n      (option :value \"blue\" \"Blue\"))\n    (input :type \"checkbox\" :bind (get store \"dark\"))))\n\n;; Island B — reads the same store, different island\n(defisland ~reactive-islands/demo/store-reader ()\n  (let ((store (use-store \"theme\")))\n    (div :class (str \"bg-\" (deref (get store \"color\")) \"-100\")\n      \"Styled by signals from Island A\")))" "lisp"))
      (p "React equivalent: " (code "createContext") " + " (code "useContext") " or Redux/Zustand. Stores are simpler — just named dicts of signals at page scope. " (code "def-store") " creates once, " (code "use-store") " retrieves. Stores survive island disposal but clear on full page navigation."))

    (~docs/section :title "14. How defisland Works" :id "how-defisland"
      (p (code "defisland") " creates a reactive component. Same calling convention as " (code "defcomp") " — keyword args, rest children — but with a reactive boundary. Inside an island, " (code "deref") " subscribes DOM nodes to signals.")
      (~docs/code :code (highlight ";; Definition — same syntax as defcomp\n(defisland ~reactive-islands/demo/counter (&key initial)\n  (let ((count (signal (or initial 0))))\n    (div\n      (span (deref count))                          ;; reactive text node\n      (button :on-click (fn (e) (swap! count inc))  ;; event handler\n        \"+\"))))\n\n;; Usage — same as any component\n(~reactive-islands/demo/counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;;   <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach" "lisp"))
      (p "Each " (code "deref") " call registers the enclosing DOM node as a subscriber. Signal changes update " (em "only") " the subscribed nodes — no virtual DOM, no diffing, no component re-renders."))

    (~docs/section :title "15. Test suite" :id "demo-tests"
      (p "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).")
      (~docs/code :code (highlight ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5))          ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n  (reset! s 10)\n  (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n      (sum (computed (fn () (+ (deref a) (deref b))))))\n  (assert-equal 7 (deref sum))\n  (reset! a 10)\n  (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children" "lisp"))
      (p :class "mt-2 text-sm text-stone-500" "Run: " (code "python3 shared/sx/tests/run.py signals")))

    (~docs/section :title "React Feature Coverage" :id "coverage"
      (p "Every React feature has an SX equivalent — most are simpler because signals are fine-grained.")
      (div :class "overflow-x-auto rounded border border-stone-200"
        (table :class "w-full text-left text-sm"
          (thead (tr :class "border-b border-stone-200 bg-stone-100"
            (th :class "px-3 py-2 font-medium text-stone-600" "React")
            (th :class "px-3 py-2 font-medium text-stone-600" "SX")
            (th :class "px-3 py-2 font-medium text-stone-600" "Demo")))
          (tbody
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "useState")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(signal value)")
              (td :class "px-3 py-2 text-xs text-stone-500" "#1"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "useMemo")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(computed (fn () ...))")
              (td :class "px-3 py-2 text-xs text-stone-500" "#1, #2"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "useEffect")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(effect (fn () ...))")
              (td :class "px-3 py-2 text-xs text-stone-500" "#3"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "useRef")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(dict \"current\" nil) + :ref")
              (td :class "px-3 py-2 text-xs text-stone-500" "#9"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "useCallback")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(fn (...) ...) — no dep arrays")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "className / style")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":class (str ...) :style (str ...)")
              (td :class "px-3 py-2 text-xs text-stone-500" "#10"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Controlled inputs")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":bind signal")
              (td :class "px-3 py-2 text-xs text-stone-500" "#6"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "key prop")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" ":key value")
              (td :class "px-3 py-2 text-xs text-stone-500" "#5"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "createPortal")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(portal \"#target\" ...)")
              (td :class "px-3 py-2 text-xs text-stone-500" "#7"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "ErrorBoundary")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(error-boundary fallback ...)")
              (td :class "px-3 py-2 text-xs text-stone-500" "#8"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Suspense + use()")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "(resource fn) + cond/deref")
              (td :class "px-3 py-2 text-xs text-stone-500" "#11"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "startTransition")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "schedule-idle + batch")
              (td :class "px-3 py-2 text-xs text-stone-500" "#12"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Context / Redux")
              (td :class "px-3 py-2 font-mono text-xs text-violet-700" "def-store / use-store")
              (td :class "px-3 py-2 text-xs text-stone-500" "#13"))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Virtual DOM / diffing")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained signals update exact DOM nodes")
              (td :class "px-3 py-2 text-xs text-stone-500" ""))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "JSX / build step")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A — s-expressions are the syntax")
              (td :class "px-3 py-2 text-xs text-stone-500" ""))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Server Components")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A — aser mode already expands server-side")
              (td :class "px-3 py-2 text-xs text-stone-500" ""))
            (tr :class "border-b border-stone-100"
              (td :class "px-3 py-2 text-stone-700" "Concurrent rendering")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A — fine-grained updates are inherently incremental")
              (td :class "px-3 py-2 text-xs text-stone-500" ""))
            (tr
              (td :class "px-3 py-2 text-stone-700" "Hooks rules")
              (td :class "px-3 py-2 text-xs text-stone-500" "N/A — signals are values, no ordering rules")
              (td :class "px-3 py-2 text-xs text-stone-500" ""))))))))


;; ---------------------------------------------------------------------------
;; Event Bridge — DOM events for lake→island communication
;; ---------------------------------------------------------------------------