diff --git a/.github/workflows/eval_in_wasm_build_test.yml b/.github/workflows/eval_in_wasm_build_test.yml
index 01d9c974..58b7e4ae 100644
--- a/.github/workflows/eval_in_wasm_build_test.yml
+++ b/.github/workflows/eval_in_wasm_build_test.yml
@@ -56,6 +56,10 @@ jobs:
           cache-dependency-path: pnpm-lock.yaml
 
       - name: Install JS dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
         working-directory: .
 
diff --git a/.github/workflows/hello_popcorn_build_test.yml b/.github/workflows/hello_popcorn_build_test.yml
index a98e6274..aae12a8b 100644
--- a/.github/workflows/hello_popcorn_build_test.yml
+++ b/.github/workflows/hello_popcorn_build_test.yml
@@ -54,6 +54,10 @@ jobs:
           cache-dependency-path: pnpm-lock.yaml
 
       - name: Install JS dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
         working-directory: .
 
diff --git a/.github/workflows/langtour_e2e_test.yml b/.github/workflows/langtour_e2e_test.yml
index 8f6c5a4f..f115de70 100644
--- a/.github/workflows/langtour_e2e_test.yml
+++ b/.github/workflows/langtour_e2e_test.yml
@@ -64,6 +64,10 @@ jobs:
         working-directory: language-tour/elixir_tour
 
       - name: Install pnpm dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install --frozen-lockfile
 
       - name: Build popcorn JS package
diff --git a/.github/workflows/local_live_view_build.yml b/.github/workflows/local_live_view_build.yml
index 5f64be4b..08f81e4d 100644
--- a/.github/workflows/local_live_view_build.yml
+++ b/.github/workflows/local_live_view_build.yml
@@ -57,6 +57,10 @@ jobs:
           cache-dependency-path: pnpm-lock.yaml
 
       - name: Install JS dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
         working-directory: .
 
diff --git a/.github/workflows/otp_js_e2e_test.yml b/.github/workflows/otp_js_e2e_test.yml
index c4784ac7..6f52430f 100644
--- a/.github/workflows/otp_js_e2e_test.yml
+++ b/.github/workflows/otp_js_e2e_test.yml
@@ -67,6 +67,10 @@ jobs:
           cache-dependency-path: pnpm-lock.yaml
 
       - name: Install JS dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
 
       - name: Setup Playwright
diff --git a/.github/workflows/popcorn_build_test.yml b/.github/workflows/popcorn_build_test.yml
index cd2bd6f5..4b362b46 100644
--- a/.github/workflows/popcorn_build_test.yml
+++ b/.github/workflows/popcorn_build_test.yml
@@ -69,6 +69,10 @@ jobs:
 
       - name: Install JS dependencies
         working-directory: .
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
 
       - name: Setup Playwright
diff --git a/.github/workflows/popcorn_js_e2e_test.yml b/.github/workflows/popcorn_js_e2e_test.yml
index 6b8049e2..bb11529f 100644
--- a/.github/workflows/popcorn_js_e2e_test.yml
+++ b/.github/workflows/popcorn_js_e2e_test.yml
@@ -47,6 +47,10 @@ jobs:
           cache-dependency-path: pnpm-lock.yaml
 
       - name: Install JS dependencies
+        env:
+          # Required by tree-sitter native bindings which use C++20 features
+          # and fail to compile without this flag on the default GCC version in CI.
+          CXXFLAGS: "-std=c++20"
         run: pnpm install
 
       - name: Build popcorn JS package
diff --git a/examples/local-lv-forms/assets/css/app.css b/examples/local-lv-forms/assets/css/app.css
index ba5f5973..9402e3e5 100644
--- a/examples/local-lv-forms/assets/css/app.css
+++ b/examples/local-lv-forms/assets/css/app.css
@@ -124,7 +124,7 @@
   font-size: 15px;
 }
 
-.title {
+h1 {
   padding: 30px 25px;
   font-size: 30px;
   font-weight: bold;
diff --git a/examples/local-lv-forms/lib/form_demo_web/controllers/page_html/home.html.heex b/examples/local-lv-forms/lib/form_demo_web/controllers/page_html/home.html.heex
index 46600b51..72391af1 100644
--- a/examples/local-lv-forms/lib/form_demo_web/controllers/page_html/home.html.heex
+++ b/examples/local-lv-forms/lib/form_demo_web/controllers/page_html/home.html.heex
@@ -1,5 +1,5 @@
 <div class="page">
-  <p class="title centered">LocalLiveView & Phoenix Integration: Forms Demo</p>
+  <h1 class="centered">LocalLiveView & Phoenix Integration: Forms Demo</h1>
   <div class="centered-div description">
     <p>Explore seamless form handling and LocalLiveView integration.</p>
     <p>
diff --git a/examples/local-lv-forms/lib/form_demo_web/live/form_demo_live.ex b/examples/local-lv-forms/lib/form_demo_web/live/form_demo_live.ex
index 03c6c471..d0ba6697 100644
--- a/examples/local-lv-forms/lib/form_demo_web/live/form_demo_live.ex
+++ b/examples/local-lv-forms/lib/form_demo_web/live/form_demo_live.ex
@@ -6,7 +6,7 @@ defmodule FormDemoWeb.FormDemoLive do
     <div class="centered-div">
       <.local_live_view id={"form-demo-local-#{@socket.id}"} view="FormDemoLocal" />
       <div class="bordered">
-        <h1>[Server Runtime] User List:</h1>
+        <h2>[Server Runtime] User List:</h2>
         <ul>
           <%= for user <- @users do %>
             <li>Username: {user["username"]}, Email: {user["email"]}</li>
diff --git a/examples/local-lv-forms/local/lib/form_demo_local.ex b/examples/local-lv-forms/local/lib/form_demo_local.ex
index 805b8c4d..3cdaf692 100644
--- a/examples/local-lv-forms/local/lib/form_demo_local.ex
+++ b/examples/local-lv-forms/local/lib/form_demo_local.ex
@@ -6,22 +6,26 @@ defmodule FormDemoLocal do
   @impl true
   def render(assigns) do
     ~H"""
+    <h2 class="header">Add new user</h2>
     <div class="bordered">
       <.form for={@form} id={@form.id} phx-change="validate" phx-submit="save">
         <label>USERNAME</label>
-        <.input type="text" field={@form[:username]} />
+        <.input type="text" field={@form[:username]} placeholder="at least 4 characters" />
         <label>EMAIL</label>
-        <.input type="text" field={@form[:email]} />
-        <div class="centered">
-          <button class="ghost-button" disabled={@disabled}>SAVE</button>
+        <.input type="text" field={@form[:email]} placeholder="name@domain.com" />
+        <div class="buttons">
+          <button type="submit" class="ghost-button" disabled={@disabled}>SAVE</button>
+          <button type="button" class="ghost-button" phx-click="generate_random">
+            GENERATE RANDOM
+          </button>
         </div>
       </.form>
-      <div class="centered">
-        <button class="ghost-button" phx-click="generate_random">GENERATE RANDOM</button>
-      </div>
     </div>
-    <div class="bordered">
-      <h1>[Local Runtime] User List:</h1>
+    <div class="bordered" data-value="users-list">
+      <h2 class="title">[Local Runtime] User List:</h2>
+      <%= if Enum.empty?(@users) do %>
+        <p>No users yet - save one above</p>
+      <% end %>
       <ul>
         <%= for user <- @users do %>
           <li>Username: {user.username}, Email: {user.email}</li>
diff --git a/examples/local-lv-forms/local/lib_landing/form_demo_local_presentation.ex b/examples/local-lv-forms/local/lib_landing/form_demo_local_presentation.ex
new file mode 100644
index 00000000..66d9cf71
--- /dev/null
+++ b/examples/local-lv-forms/local/lib_landing/form_demo_local_presentation.ex
@@ -0,0 +1,77 @@
+defmodule FormDemoLocalPresentation do
+  use LocalLiveView
+
+  defdelegate render(assigns), to: FormDemoLocal
+
+  def mount(params, session, socket) do
+    result = FormDemoLocal.mount(params, session, socket)
+    {:ok, new_socket} = result
+
+    Popcorn.Wasm.send_event("llv_presentation", %{
+      block: nil,
+      event: "mount",
+      assigns: presentation_assigns(new_socket)
+    })
+
+    result
+  end
+
+  def handle_event(event, params, socket)
+      when event in ~w(validate save generate_random) do
+    # The UI socket lags behind the real state during animation; apply pending
+    # assigns so the event handler sees up-to-date data.
+    effective_socket =
+      case socket.assigns[:pending_cur] do
+        nil -> socket
+        pending -> assign(socket, Map.to_list(pending))
+      end
+
+    {:noreply, updated} = FormDemoLocal.handle_event(event, params, effective_socket)
+
+    Popcorn.Wasm.send_event("llv_presentation", %{
+      block: event,
+      event: event,
+      assigns: presentation_assigns(updated)
+    })
+
+    new_pending = %{
+      form: updated.assigns.form,
+      disabled: updated.assigns.disabled,
+      users: updated.assigns.users
+    }
+
+    {:noreply,
+     socket
+     |> assign(:pending_prev, socket.assigns[:pending_cur])
+     |> assign(:pending_cur, new_pending)}
+  end
+
+  def handle_info({:js_push, "llv_ack", _}, socket) do
+    case {socket.assigns[:pending_prev], socket.assigns[:pending_cur]} do
+      {%{form: form, disabled: disabled, users: users}, _} ->
+        {:noreply, assign(socket, form: form, disabled: disabled, users: users, pending_prev: nil)}
+
+      {nil, %{form: form, disabled: disabled, users: users}} ->
+        {:noreply, assign(socket, form: form, disabled: disabled, users: users, pending_cur: nil)}
+
+      _ ->
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event(event, params, socket) do
+    FormDemoLocal.handle_event(event, params, socket)
+  end
+
+  defp presentation_assigns(socket) do
+    assigns = socket.assigns
+    form_params = assigns.form.params
+
+    %{
+      username: Map.get(form_params, "username", ""),
+      email: Map.get(form_params, "email", ""),
+      disabled: assigns.disabled,
+      users: length(assigns.users)
+    }
+  end
+end
diff --git a/examples/local-lv-forms/local/mix.exs b/examples/local-lv-forms/local/mix.exs
index c01e086e..8ac80547 100644
--- a/examples/local-lv-forms/local/mix.exs
+++ b/examples/local-lv-forms/local/mix.exs
@@ -7,6 +7,7 @@ defmodule Local.MixProject do
       version: "0.1.0",
       elixir: "~> 1.17",
       start_permanent: Mix.env() == :prod,
+      elixirc_paths: elixirc_paths(),
       deps: deps(),
       compilers: Mix.compilers(),
       aliases: aliases()
@@ -17,6 +18,17 @@ defmodule Local.MixProject do
     [default_target: :wasm]
   end
 
+  # lib_landing contains presentation wrappers that emit WASM events for the
+  # landing page animation demos. They are compiled only when building for that
+  # context so normal development builds stay unaffected.
+  defp elixirc_paths do
+    if System.get_env("LLV_LANDING_PATCH") == "true" do
+      ["lib", "lib_landing"]
+    else
+      ["lib"]
+    end
+  end
+
   def application do
     [
       extra_applications: [:logger],
diff --git a/examples/local-lv-forms/local/mix.lock b/examples/local-lv-forms/local/mix.lock
index ff9df1e4..9459cda6 100644
--- a/examples/local-lv-forms/local/mix.lock
+++ b/examples/local-lv-forms/local/mix.lock
@@ -1,5 +1,5 @@
 %{
-  "decimal": {:hex, :decimal, "2.3.0", "3ad6255aa77b4a3c4f818171b12d237500e63525c2fd056699967a3e7ea20f62", [:mix], [], "hexpm", "a4d66355cb29cb47c3cf30e71329e58361cfcb37c34235ef3bf1d7bf3773aeac"},
+  "decimal": {:hex, :decimal, "2.4.1", "6c0fbede12fb122ba685e9ab41c6a40c129e322b3aa192f9e072e61f3a6ffaf2", [:mix], [], "hexpm", "7e618897933a8455f19a727d7c5e50a2c071a544b700e5e724298ecb4340187f"},
   "ecto": {:hex, :ecto, "3.13.5", "9d4a69700183f33bf97208294768e561f5c7f1ecf417e0fa1006e4a91713a834", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "df9efebf70cf94142739ba357499661ef5dbb559ef902b68ea1f3c1fabce36de"},
   "expo": {:hex, :expo, "1.1.1", "4202e1d2ca6e2b3b63e02f69cfe0a404f77702b041d02b58597c00992b601db5", [:mix], [], "hexpm", "5fb308b9cb359ae200b7e23d37c76978673aa1b06e2b3075d814ce12c5811640"},
   "file_system": {:hex, :file_system, "1.1.1", "31864f4685b0148f25bd3fbef2b1228457c0c89024ad67f7a81a3ffbc0bbad3a", [:mix], [], "hexpm", "7a15ff97dfe526aeefb090a7a9d3d03aa907e100e262a0f8f7746b78f8f87a5d"},
@@ -8,7 +8,7 @@
   "glob_ex": {:hex, :glob_ex, "0.1.11", "cb50d3f1ef53f6ca04d6252c7fde09fd7a1cf63387714fe96f340a1349e62c93", [:mix], [], "hexpm", "342729363056e3145e61766b416769984c329e4378f1d558b63e341020525de4"},
   "hpax": {:hex, :hpax, "1.0.3", "ed67ef51ad4df91e75cc6a1494f851850c0bd98ebc0be6e81b026e765ee535aa", [:mix], [], "hexpm", "8eab6e1cfa8d5918c2ce4ba43588e894af35dbd8e91e6e55c817bca5847df34a"},
   "igniter": {:hex, :igniter, "0.7.9", "8c573440b8127fd80be8220fb197e7422317a81072054fcc0b336029f035a416", [:mix], [{:glob_ex, "~> 0.1.7", [hex: :glob_ex, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:owl, "~> 0.11", [hex: :owl, repo: "hexpm", optional: false]}, {:phx_new, "~> 1.7", [hex: :phx_new, repo: "hexpm", optional: true]}, {:req, "~> 0.5", [hex: :req, repo: "hexpm", optional: false]}, {:rewrite, ">= 1.1.1 and < 2.0.0-0", [hex: :rewrite, repo: "hexpm", optional: false]}, {:sourceror, "~> 1.4", [hex: :sourceror, repo: "hexpm", optional: false]}, {:spitfire, ">= 0.1.3 and < 1.0.0-0", [hex: :spitfire, repo: "hexpm", optional: false]}], "hexpm", "123513d09f3af149db851aad8492b5b49f861d2c466a72031b2a0cbd9f45526f"},
-  "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
+  "jason": {:hex, :jason, "1.4.5", "2e3a008590b0b8d7388c20293e9dcc9cf3e5d642fd2a114e4cbbb52e595d940a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0 or ~> 3.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b0c823996102bcd0239b3c2444eb00409b72f6a140c1950bc8b457d836b30684"},
   "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
   "mint": {:hex, :mint, "1.7.1", "113fdb2b2f3b59e47c7955971854641c61f378549d73e829e1768de90fc1abf1", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "fceba0a4d0f24301ddee3024ae116df1c3f4bb7a563a731f45fdfeb9d39a231b"},
   "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
diff --git a/examples/local-lv-forms/mix.lock b/examples/local-lv-forms/mix.lock
index 68c75732..b83f05e6 100644
--- a/examples/local-lv-forms/mix.lock
+++ b/examples/local-lv-forms/mix.lock
@@ -1,7 +1,7 @@
 %{
   "bandit": {:hex, :bandit, "1.10.4", "02b9734c67c5916a008e7eb7e2ba68aaea6f8177094a5f8d95f1fb99069aac17", [:mix], [{:hpax, "~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}, {:plug, "~> 1.18", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:thousand_island, "~> 1.0", [hex: :thousand_island, repo: "hexpm", optional: false]}, {:websock, "~> 0.5", [hex: :websock, repo: "hexpm", optional: false]}], "hexpm", "a5faf501042ac1f31d736d9d4a813b3db4ef812e634583b6a457b0928798a51d"},
   "cc_precompiler": {:hex, :cc_precompiler, "0.1.11", "8c844d0b9fb98a3edea067f94f616b3f6b29b959b6b3bf25fee94ffe34364768", [:mix], [{:elixir_make, "~> 0.7", [hex: :elixir_make, repo: "hexpm", optional: false]}], "hexpm", "3427232caf0835f94680e5bcf082408a70b48ad68a5f5c0b02a3bea9f3a075b9"},
-  "decimal": {:hex, :decimal, "2.3.0", "3ad6255aa77b4a3c4f818171b12d237500e63525c2fd056699967a3e7ea20f62", [:mix], [], "hexpm", "a4d66355cb29cb47c3cf30e71329e58361cfcb37c34235ef3bf1d7bf3773aeac"},
+  "decimal": {:hex, :decimal, "2.4.1", "6c0fbede12fb122ba685e9ab41c6a40c129e322b3aa192f9e072e61f3a6ffaf2", [:mix], [], "hexpm", "7e618897933a8455f19a727d7c5e50a2c071a544b700e5e724298ecb4340187f"},
   "dns_cluster": {:hex, :dns_cluster, "0.2.0", "aa8eb46e3bd0326bd67b84790c561733b25c5ba2fe3c7e36f28e88f384ebcb33", [:mix], [], "hexpm", "ba6f1893411c69c01b9e8e8f772062535a4cf70f3f35bcc964a324078d8c8240"},
   "ecto": {:hex, :ecto, "3.13.5", "9d4a69700183f33bf97208294768e561f5c7f1ecf417e0fa1006e4a91713a834", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "df9efebf70cf94142739ba357499661ef5dbb559ef902b68ea1f3c1fabce36de"},
   "elixir_make": {:hex, :elixir_make, "0.9.0", "6484b3cd8c0cee58f09f05ecaf1a140a8c97670671a6a0e7ab4dc326c3109726", [:mix], [], "hexpm", "db23d4fd8b757462ad02f8aa73431a426fe6671c80b200d9710caf3d1dd0ffdb"},
@@ -16,7 +16,7 @@
   "hpax": {:hex, :hpax, "1.0.3", "ed67ef51ad4df91e75cc6a1494f851850c0bd98ebc0be6e81b026e765ee535aa", [:mix], [], "hexpm", "8eab6e1cfa8d5918c2ce4ba43588e894af35dbd8e91e6e55c817bca5847df34a"},
   "idna": {:hex, :idna, "6.1.1", "8a63070e9f7d0c62eb9d9fcb360a7de382448200fbbd1b106cc96d3d8099df8d", [:rebar3], [{:unicode_util_compat, "~> 0.7.0", [hex: :unicode_util_compat, repo: "hexpm", optional: false]}], "hexpm", "92376eb7894412ed19ac475e4a86f7b413c1b9fbb5bd16dccd57934157944cea"},
   "igniter": {:hex, :igniter, "0.7.9", "8c573440b8127fd80be8220fb197e7422317a81072054fcc0b336029f035a416", [:mix], [{:glob_ex, "~> 0.1.7", [hex: :glob_ex, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:owl, "~> 0.11", [hex: :owl, repo: "hexpm", optional: false]}, {:phx_new, "~> 1.7", [hex: :phx_new, repo: "hexpm", optional: true]}, {:req, "~> 0.5", [hex: :req, repo: "hexpm", optional: false]}, {:rewrite, ">= 1.1.1 and < 2.0.0-0", [hex: :rewrite, repo: "hexpm", optional: false]}, {:sourceror, "~> 1.4", [hex: :sourceror, repo: "hexpm", optional: false]}, {:spitfire, ">= 0.1.3 and < 1.0.0-0", [hex: :spitfire, repo: "hexpm", optional: false]}], "hexpm", "123513d09f3af149db851aad8492b5b49f861d2c466a72031b2a0cbd9f45526f"},
-  "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
+  "jason": {:hex, :jason, "1.4.5", "2e3a008590b0b8d7388c20293e9dcc9cf3e5d642fd2a114e4cbbb52e595d940a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0 or ~> 3.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "b0c823996102bcd0239b3c2444eb00409b72f6a140c1950bc8b457d836b30684"},
   "lazy_html": {:hex, :lazy_html, "0.1.11", "136c8e9cd616b4f4e9c1562daa683880891120b759606dc4c3b6b18058ba5d79", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "3b1be592929c31eca1a21673d25696e5c14cddfe922d9d1a3e3b48be4163883b"},
   "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
   "mint": {:hex, :mint, "1.7.1", "113fdb2b2f3b59e47c7955971854641c61f378549d73e829e1768de90fc1abf1", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "fceba0a4d0f24301ddee3024ae116df1c3f4bb7a563a731f45fdfeb9d39a231b"},
diff --git a/examples/local-lv-thermostat/local/lib/thermostat_live.ex b/examples/local-lv-thermostat/local/lib/thermostat_live.ex
index 2616da43..e1454e9d 100644
--- a/examples/local-lv-thermostat/local/lib/thermostat_live.ex
+++ b/examples/local-lv-thermostat/local/lib/thermostat_live.ex
@@ -1,27 +1,25 @@
 defmodule ThermostatLive do
   use LocalLiveView
 
+  @default_temperature 25
+  @default_country "Poland"
+
   def render(assigns) do
     ~H"""
-    <p>Current temperature: {@temperature}°C</p>
-    <div class="thermostat-controls">
-      <button phx-click="inc_temperature" class="ghost-button">+</button>
-      <button phx-click="dec_temperature" class="ghost-button">-</button>
+    <div class="thermostat-wrapper">
+      <p class="thermostat-temp-label">Current temperature</p>
+      <p class="thermostat-temp-value" data-value="temperature">{@temperature}°C</p>
+      <div class="thermostat-controls">
+        <button phx-click="inc_temperature" class="ghost-button">+</button>
+        <button phx-click="dec_temperature" class="ghost-button">-</button>
+      </div>
+      <p class="thermostat-country">Country: {@country}</p>
     </div>
-    <p>Country: {@country}</p>
     """
   end
 
   def mount(_params, _session, socket) do
-    temperature = 25
-    country = "Poland"
-
-    socket =
-      socket
-      |> assign(:temperature, temperature)
-      |> assign(:country, country)
-
-    {:ok, socket}
+    {:ok, socket |> assign(:temperature, @default_temperature) |> assign(:country, @default_country)}
   end
 
   def handle_event("inc_temperature", _params, socket) do
@@ -31,4 +29,5 @@ defmodule ThermostatLive do
   def handle_event("dec_temperature", _params, socket) do
     {:noreply, update(socket, :temperature, &(&1 - 1))}
   end
+
 end
diff --git a/examples/local-lv-thermostat/local/lib_landing/thermostat_live_presentation.ex b/examples/local-lv-thermostat/local/lib_landing/thermostat_live_presentation.ex
new file mode 100644
index 00000000..0fa0502d
--- /dev/null
+++ b/examples/local-lv-thermostat/local/lib_landing/thermostat_live_presentation.ex
@@ -0,0 +1,71 @@
+defmodule ThermostatLivePresentation do
+  use LocalLiveView
+
+  defdelegate render(assigns), to: ThermostatLive
+
+  def mount(params, session, socket) do
+    result = ThermostatLive.mount(params, session, socket)
+    {:ok, new_socket} = result
+
+    Popcorn.Wasm.send_event("llv_presentation", %{
+      block: nil,
+      event: "mount",
+      assigns: presentation_assigns(new_socket)
+    })
+
+    result
+  end
+
+  def handle_event(event, params, socket)
+      when event in ~w(inc_temperature dec_temperature) do
+    # The UI socket lags behind the real state during animation; apply pending
+    # assigns so the event handler sees up-to-date data.
+    effective_socket =
+      case socket.assigns[:pending_cur] do
+        nil -> socket
+        pending -> assign(socket, Map.to_list(pending))
+      end
+
+    {:noreply, updated} = ThermostatLive.handle_event(event, params, effective_socket)
+
+    Popcorn.Wasm.send_event("llv_presentation", %{
+      block: event,
+      event: event,
+      assigns: presentation_assigns(updated)
+    })
+
+    new_pending = %{
+      temperature: updated.assigns.temperature,
+      country: updated.assigns.country
+    }
+
+    {:noreply,
+     socket
+     |> assign(:pending_prev, socket.assigns[:pending_cur])
+     |> assign(:pending_cur, new_pending)}
+  end
+
+  def handle_info({:js_push, "llv_ack", _}, socket) do
+    case {socket.assigns[:pending_prev], socket.assigns[:pending_cur]} do
+      {%{temperature: t, country: c}, _} ->
+        {:noreply, assign(socket, temperature: t, country: c, pending_prev: nil)}
+
+      {nil, %{temperature: t, country: c}} ->
+        {:noreply, assign(socket, temperature: t, country: c, pending_cur: nil)}
+
+      _ ->
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event(event, params, socket) do
+    ThermostatLive.handle_event(event, params, socket)
+  end
+
+  defp presentation_assigns(socket) do
+    %{
+      temperature: socket.assigns.temperature,
+      country: socket.assigns.country
+    }
+  end
+end
diff --git a/examples/local-lv-thermostat/local/mix.exs b/examples/local-lv-thermostat/local/mix.exs
index 539d0e84..32501c5c 100644
--- a/examples/local-lv-thermostat/local/mix.exs
+++ b/examples/local-lv-thermostat/local/mix.exs
@@ -7,6 +7,7 @@ defmodule Local.MixProject do
       version: "0.1.0",
       elixir: "~> 1.17",
       start_permanent: Mix.env() == :prod,
+      elixirc_paths: elixirc_paths(),
       deps: deps(),
       compilers: Mix.compilers(),
       aliases: aliases()
@@ -24,6 +25,14 @@ defmodule Local.MixProject do
     ]
   end
 
+  defp elixirc_paths do
+    if System.get_env("LLV_LANDING_PATCH") == "true" do
+      ["lib", "lib_landing"]
+    else
+      ["lib"]
+    end
+  end
+
   defp deps do
     [
       {:local_live_view, path: "../../../local-live-view"}
diff --git a/landing-page/astro.config.mjs b/landing-page/astro.config.mjs
index b6832cb6..432d5a02 100644
--- a/landing-page/astro.config.mjs
+++ b/landing-page/astro.config.mjs
@@ -54,12 +54,14 @@ export default defineConfig({
         "../examples/local-lv-thermostat/priv/static/assets/js/wasm",
       dir: "../examples/local-lv-thermostat",
       newBundleName: "local_thermostat.avm",
+      extraEnv: { LLV_LANDING_PATCH: "true" },
     }),
     buildBundle({
       wasmSrcPathDefault:
         "../examples/local-lv-forms/priv/static/assets/js/wasm",
       dir: "../examples/local-lv-forms",
       newBundleName: "local_forms.avm",
+      extraEnv: { LLV_LANDING_PATCH: "true" },
     }),
   ],
   markdown: {
diff --git a/landing-page/build-wasm.js b/landing-page/build-wasm.js
index 77ca2d71..9230c1f9 100644
--- a/landing-page/build-wasm.js
+++ b/landing-page/build-wasm.js
@@ -4,9 +4,9 @@ import { dirname, join } from "path";
 import { fileURLToPath } from "url";
 
 /**
- * @param {{ dir: string, wasmSrcPathDefault?: string, newBundleName: string }} options
+ * @param {{ dir: string, wasmSrcPathDefault?: string, newBundleName: string, extraEnv?: Record<string, string> }} options
  */
-export function buildBundle({ dir, wasmSrcPathDefault, newBundleName }) {
+export function buildBundle({ dir, wasmSrcPathDefault, newBundleName, extraEnv = {} }) {
   return {
     name: "build-bundle",
     hooks: {
@@ -15,7 +15,7 @@ export function buildBundle({ dir, wasmSrcPathDefault, newBundleName }) {
         const wasmSrcPath = wasmSrcPathDefault ?? join(dir, "dist", "wasm");
         const wasmDestPath = wasmDir(config);
 
-        await run("mix", ["build"], { dir });
+        await run("mix", ["build"], { dir, env: extraEnv });
 
         const srcFiles = await readdir(wasmSrcPath);
         const [avm] = srcFiles.filter((path) => path.endsWith(".avm"));
@@ -53,13 +53,14 @@ function wasmDir(config) {
   return join(publicPath, "wasm");
 }
 
-function run(cmd, args, { dir }) {
+function run(cmd, args, { dir, env = {} }) {
   const strCmd = `${cmd} ${args.join(" ")}`;
 
   return new Promise((resolve, reject) => {
     const child = spawn(cmd, args, {
       cwd: dir,
       stdio: "inherit",
+      env: { ...process.env, ...env },
     });
 
     child.on("close", (code) => {
diff --git a/landing-page/package.json b/landing-page/package.json
index 78a525e8..58cc64d8 100644
--- a/landing-page/package.json
+++ b/landing-page/package.json
@@ -13,18 +13,20 @@
     "@fontsource-variable/handjet": "^5.2.6",
     "@fontsource-variable/inter": "^5.2.6",
     "@iconify-json/material-symbols-light": "^1.2.30",
+    "@nanostores/react": "^1.1.0",
     "@swmansion/popcorn": "workspace:*",
     "@tailwindcss/vite": "^4.1.11",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "ghostty-web": "^0.4.0",
     "astro": "^6.0.6",
     "astro-icon": "^1.1.5",
     "astro-mermaid": "^1.3.1",
     "chokidar": "^4.0.3",
+    "ghostty-web": "^0.4.0",
     "highlight.js": "^11.11.1",
     "local_live_view": "workspace:*",
     "mermaid": "^11.7.0",
+    "nanostores": "^1.3.0",
     "phoenix": "^1.8.0",
     "phoenix_live_view": "^1.1.0",
     "playwright": "^1.60.0",
@@ -33,7 +35,9 @@
     "rehype-mermaid": "^3.0.0",
     "sharp": "^0.34.5",
     "tailwindcss": "^4.1.11",
-    "three": "^0.178.0"
+    "three": "^0.178.0",
+    "tree-sitter": "^0.25.0",
+    "tree-sitter-elixir": "^0.3.5"
   },
   "devDependencies": {
     "@types/phoenix": "^1.6.7",
@@ -43,5 +47,12 @@
     "prettier-plugin-tailwindcss": "^0.6.14",
     "vite": "catalog:",
     "vite-plugin-devtools-json": "^0.2.1"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "tree-sitter",
+      "tree-sitter-elixir"
+    ]
   }
 }
diff --git a/landing-page/src/components/local-live-view/AssignsPanel.tsx b/landing-page/src/components/local-live-view/AssignsPanel.tsx
new file mode 100644
index 00000000..ee162b61
--- /dev/null
+++ b/landing-page/src/components/local-live-view/AssignsPanel.tsx
@@ -0,0 +1,32 @@
+import { useStore } from "@nanostores/react";
+import { $assigns, $flashKeys } from "../../scripts/local-live-view/store";
+import { PanelLayout } from "./PanelLayout";
+
+export function AssignsPanel() {
+  const assigns = useStore($assigns);
+  const flashKeys = useStore($flashKeys);
+  const entries = Object.entries(assigns);
+
+  return (
+    <PanelLayout title="socket.assigns">
+      <div className="font-mono text-sm leading-loose">
+        <span className="text-llv-brown-55">%&#123;</span>
+        {entries.map(([k, v], i) => (
+          <div key={k} className="block">
+            &nbsp;&nbsp;
+            <span className="text-llv-orange-50">{k}:</span>{" "}
+            <span
+              className={`transition-colors duration-[250ms] ${flashKeys.has(k) ? "text-orange-100" : "text-light-20"}`}
+            >
+              {typeof v === "string" ? `"${v}"` : String(v)}
+            </span>
+            {i < entries.length - 1 && (
+              <span className="text-llv-brown-55">,</span>
+            )}
+          </div>
+        ))}
+        <span className="text-llv-brown-55">&#125;</span>
+      </div>
+    </PanelLayout>
+  );
+}
diff --git a/landing-page/src/components/local-live-view/EventLog.tsx b/landing-page/src/components/local-live-view/EventLog.tsx
new file mode 100644
index 00000000..be811de2
--- /dev/null
+++ b/landing-page/src/components/local-live-view/EventLog.tsx
@@ -0,0 +1,25 @@
+import { useStore } from "@nanostores/react";
+import { $log } from "../../scripts/local-live-view/store";
+import "./llv-scrollbar.css";
+import { PanelLayout } from "./PanelLayout";
+
+export function EventLog() {
+  const log = useStore($log);
+  if (log.length === 0) return null;
+
+  return (
+    <PanelLayout title="event log">
+      <div className="llv-scroll flex max-h-32 flex-col gap-1 overflow-hidden overflow-y-auto text-white">
+        {log.map((entry) => (
+          <div
+            key={entry.id}
+            className="animate-fade-slide flex gap-2 font-mono text-xs"
+          >
+            <span className="text-orange-100">{entry.event}</span>
+            <span className="text-llv-green-60">{entry.result}</span>
+          </div>
+        ))}
+      </div>
+    </PanelLayout>
+  );
+}
diff --git a/landing-page/src/components/local-live-view/LifecycleStrip.tsx b/landing-page/src/components/local-live-view/LifecycleStrip.tsx
new file mode 100644
index 00000000..a1368428
--- /dev/null
+++ b/landing-page/src/components/local-live-view/LifecycleStrip.tsx
@@ -0,0 +1,34 @@
+import { useStore } from "@nanostores/react";
+import { $step } from "../../scripts/local-live-view/store";
+
+const STEPS = [
+  "phx-event",
+  "handle_event",
+  "update assigns",
+  "re-render",
+];
+
+export function LifecycleStrip() {
+  const step = useStore($step);
+
+  return (
+    <div className="text-llv-brown-50 bg-llv-bg-110 flex flex-wrap items-center gap-1 overflow-hidden rounded-xl px-4 py-3 font-mono text-xs">
+      {STEPS.map((s, i) => (
+        <span key={s}>
+          <span
+            className={`shrink-0 rounded-sm px-2 py-1 whitespace-nowrap transition-all duration-300 ${step === i ? "bg-orange-100/15 text-orange-100" : ""}`}
+          >
+            {s}
+          </span>
+          {i < STEPS.length - 1 && (
+            <span
+              className={`text-llv-brown-100 shrink-0 transition-all duration-300 ${step === i ? "text-orange-100" : ""}`}
+            >
+              →
+            </span>
+          )}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/landing-page/src/components/local-live-view/LlvCodePanel.astro b/landing-page/src/components/local-live-view/LlvCodePanel.astro
new file mode 100644
index 00000000..8ed96f4d
--- /dev/null
+++ b/landing-page/src/components/local-live-view/LlvCodePanel.astro
@@ -0,0 +1,219 @@
+---
+import { Code } from "astro:components";
+import type { ShikiTransformer } from "shiki";
+import { createBlockTransformer } from "../../scripts/local-live-view/code-panel";
+import { popcornTheme } from "../../scripts/local-live-view/theme";
+import "./llv-scrollbar.css";
+
+export interface CodeTab {
+  label: string;
+  id: string;
+  code: string;
+  lang: string;
+}
+
+interface Props {
+  tabs: CodeTab[];
+}
+
+const { tabs } = Astro.props;
+
+const transformers: ShikiTransformer[] = tabs.map((tab) =>
+  createBlockTransformer(tab.code),
+);
+---
+
+<div class="code-panel">
+  <div class="code-tabs">
+    {
+      tabs.map((tab, i) => (
+        <button class={`code-tab ${i === 0 ? "active" : ""}`} data-tab={tab.id}>
+          {tab.label}
+        </button>
+      ))
+    }
+  </div>
+  {
+    tabs.map((tab, i) => (
+      <div
+        id={`llv-code-body-${i}`}
+        class:list={["code-body-wrap", "llv-scroll", { "code-body-hidden": i !== 0 }]}
+      >
+        <Code
+          code={tab.code}
+          lang={tab.lang}
+          theme={popcornTheme}
+          transformers={[transformers[i]]}
+        />
+      </div>
+    ))
+  }
+</div>
+
+<script>
+  document.querySelectorAll<HTMLButtonElement>(".code-tab").forEach((tab) => {
+    tab.addEventListener("click", () => {
+      const panel = tab.closest(".code-panel");
+      if (!panel) return;
+      panel
+        .querySelectorAll(".code-tab")
+        .forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      const allTabs = Array.from(
+        panel.querySelectorAll<HTMLButtonElement>(".code-tab"),
+      );
+      const idx = allTabs.findIndex((t) => t.dataset.tab === tab.dataset.tab);
+      panel
+        .querySelectorAll<HTMLElement>(".code-body-wrap")
+        .forEach((body, i) => {
+          body.classList.toggle("code-body-hidden", i !== idx);
+        });
+    });
+  });
+
+  document
+    .querySelectorAll<HTMLElement>("[data-defp-header]")
+    .forEach((headerLine) => {
+      const groupId = headerLine.dataset.defpGroup!;
+      const wrap = headerLine.closest(".code-body-wrap")!;
+
+      const arrow = document.createElement("span");
+      arrow.className = "defp-arrow";
+      arrow.textContent = "▼";
+      headerLine.prepend(arrow);
+      headerLine.classList.add("defp-header");
+
+      const bodyLines = [
+        ...wrap.querySelectorAll<HTMLElement>(
+          `[data-defp-group="${groupId}"]:not([data-defp-header])`,
+        ),
+      ];
+
+      // Shiki places \n text nodes between lines — capture them so we can
+      // clear them on collapse (otherwise hidden lines leave blank gaps).
+      const textNodes = bodyLines.map((line) => {
+        const prev = line.previousSibling;
+        if (prev?.nodeType === Node.TEXT_NODE) {
+          const tn = prev as Text;
+          return { tn, original: tn.data };
+        }
+        return null;
+      });
+
+      const collapse = () => {
+        headerLine.dataset.collapsed = "true";
+        arrow.textContent = "▶";
+        bodyLines.forEach((l, i) => {
+          l.style.display = "none";
+          const entry = textNodes[i];
+          if (entry) entry.tn.data = "";
+        });
+      };
+
+      const expand = () => {
+        headerLine.dataset.collapsed = "false";
+        arrow.textContent = "▼";
+        bodyLines.forEach((l, i) => {
+          l.style.display = "";
+          const entry = textNodes[i];
+          if (entry) entry.tn.data = entry.original;
+        });
+      };
+
+      collapse();
+
+      headerLine.addEventListener("click", () => {
+        headerLine.dataset.collapsed === "true" ? expand() : collapse();
+      });
+    });
+</script>
+
+<style is:global>
+  .code-panel {
+    background: #1a0f05;
+    border-radius: 1rem;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(48, 27, 5, 0.1);
+  }
+  .code-tabs {
+    display: flex;
+    background: #120a02;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 0 0.5rem;
+  }
+  .code-tab {
+    padding: 0.625rem 1rem;
+    font-size: 0.75rem;
+    color: #7a5535;
+    cursor: pointer;
+    transition: all 0.15s;
+    font-family: monospace;
+    border: none;
+    background: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+  }
+  .code-tab.active {
+    color: #ef7c00;
+    border-bottom-color: #ef7c00;
+  }
+  .code-tab:hover:not(.active) {
+    color: #fffdf5;
+  }
+  .code-body-wrap pre {
+    margin: 0;
+    padding: 1rem 0;
+    overflow-x: auto;
+    background-color: transparent !important;
+    font-family: monospace !important;
+    font-size: 0.8rem !important;
+    line-height: 1.65 !important;
+  }
+  .code-body-wrap pre code {
+    display: block;
+    background: transparent !important;
+  }
+  .line {
+    display: inline-flex;
+    justify-content: space-between;
+    gap: 1rem;
+    width: 100%;
+    position: relative;
+    transition:
+      background 0.25s,
+      border-color 0.25s;
+    padding: 0.05rem 1rem;
+    border-left: 2px solid transparent;
+    scroll-margin-top: 5.5rem;
+  }
+  .line.hl {
+    background: rgba(239, 124, 0, 0.09);
+    border-left-color: #ef7c00;
+  }
+  .line.dim {
+    opacity: 0.3;
+  }
+  .code-body-hidden {
+    display: none;
+  }
+.defp-header {
+    cursor: pointer;
+    user-select: none;
+  }
+  .defp-header:hover {
+    background: rgba(239, 124, 0, 0.05) !important;
+    border-left-color: #7a5535 !important;
+  }
+  .defp-arrow {
+    position: absolute;
+    font-size: 0.55rem;
+    color: #7a5535;
+    margin-right: 0.3rem;
+    flex-shrink: 0;
+    align-self: center;
+    transition: color 0.15s;
+  }
+  .defp-header:hover .defp-arrow {
+    color: #ef7c00;
+  }
+</style>
diff --git a/landing-page/src/components/local-live-view/LlvDemoLayout.astro b/landing-page/src/components/local-live-view/LlvDemoLayout.astro
new file mode 100644
index 00000000..bb9539ac
--- /dev/null
+++ b/landing-page/src/components/local-live-view/LlvDemoLayout.astro
@@ -0,0 +1,34 @@
+<div class="llv-demo-layout">
+  <div class="llv-left-panel">
+    <slot name="left" />
+  </div>
+  <slot name="right" />
+</div>
+
+<style is:global>
+  .llv-demo-layout {
+    display: grid;
+    grid-template-columns: minmax(300px, 400px) 1fr;
+    gap: 1.5rem;
+    max-width: 1160px;
+    margin: 0 auto;
+    align-items: start;
+  }
+  @media (max-width: 800px) {
+    .llv-demo-layout {
+      grid-template-columns: 1fr;
+    }
+  }
+  .llv-left-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+    position: sticky;
+    top: 4.5rem;
+  }
+  @media (max-width: 800px) {
+    .llv-left-panel {
+      position: static;
+    }
+  }
+</style>
diff --git a/landing-page/src/components/local-live-view/PanelLayout.tsx b/landing-page/src/components/local-live-view/PanelLayout.tsx
new file mode 100644
index 00000000..8df0be1c
--- /dev/null
+++ b/landing-page/src/components/local-live-view/PanelLayout.tsx
@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from "react";
+
+type PanelHeaderProps = {
+  title: string;
+};
+
+export function PanelLayout({
+  children,
+  title,
+}: PropsWithChildren<PanelHeaderProps>) {
+  return (
+    <div className="bg-llv-bg-100 rounded-xl px-5 py-3.5 pr-0">
+      <p className="text-llv-brown-50 mb-2.5 font-mono text-xs font-semibold tracking-widest uppercase">
+        {title}
+      </p>
+      {children}
+    </div>
+  );
+}
diff --git a/landing-page/src/components/local-live-view/llv-scrollbar.css b/landing-page/src/components/local-live-view/llv-scrollbar.css
new file mode 100644
index 00000000..03198471
--- /dev/null
+++ b/landing-page/src/components/local-live-view/llv-scrollbar.css
@@ -0,0 +1,24 @@
+.llv-scroll,
+.llv-scroll pre {
+  scrollbar-color: var(--color-llv-brown-50) var(--color-llv-gutter);
+  scrollbar-width: thin;
+}
+.llv-scroll::-webkit-scrollbar,
+.llv-scroll pre::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.llv-scroll::-webkit-scrollbar-track,
+.llv-scroll pre::-webkit-scrollbar-track {
+  background: var(--color-llv-gutter);
+  border-radius: 3px;
+}
+.llv-scroll::-webkit-scrollbar-thumb,
+.llv-scroll pre::-webkit-scrollbar-thumb {
+  background: var(--color-llv-brown-50);
+  border-radius: 3px;
+}
+.llv-scroll::-webkit-scrollbar-thumb:hover,
+.llv-scroll pre::-webkit-scrollbar-thumb:hover {
+  background: #ef7c00;
+}
diff --git a/landing-page/src/pages/demos/local-forms.astro b/landing-page/src/pages/demos/local-forms.astro
index f42b379c..676d9d2d 100644
--- a/landing-page/src/pages/demos/local-forms.astro
+++ b/landing-page/src/pages/demos/local-forms.astro
@@ -1,13 +1,36 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Section from "../../components/Section.astro";
+import LlvDemoLayout from "../../components/local-live-view/LlvDemoLayout.astro";
+import { AssignsPanel } from "../../components/local-live-view/AssignsPanel";
+import { LifecycleStrip } from "../../components/local-live-view/LifecycleStrip";
+import { EventLog } from "../../components/local-live-view/EventLog";
+import LlvCodePanel from "../../components/local-live-view/LlvCodePanel.astro";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import type { CodeTab } from "../../components/local-live-view/LlvCodePanel.astro";
+import "../../styles/demos/local-forms.css";
+
+const libDir = path.resolve(
+  fileURLToPath(import.meta.url),
+  "../../../../..",
+  "examples/local-lv-forms/local/lib",
+);
+const formCode = fs
+  .readFileSync(path.join(libDir, "form_demo_local.ex"), "utf8")
+  .trim();
+
+const tabs: CodeTab[] = [
+  { label: "FormDemoLocal", id: "form", code: formCode, lang: "elixir" },
+];
 ---
 
 <Layout>
   <Section background="light">
     <header class="mb-4 text-center">
       <h1
-        class="font-handjet text-brown-header mb-4 text-4xl font-bold md:text-6xl"
+        class="font-handjet text-brown-header mb-3 text-4xl font-bold md:text-5xl"
       >
         Local Forms
       </h1>
@@ -21,245 +44,145 @@ import Section from "../../components/Section.astro";
         correct format while typing in the form and on form submission.
       </p>
     </header>
-    <style></style>
-    <div
-      class="bg-light-20 border-brown-header mx-w-md mt-8 overflow-hidden rounded-2xl border-2 shadow-lg"
-    >
-      <div class="bg-brown-header px-6 py-3">
-        <h2
-          class="font-handjet text-light-20 text-center text-xl tracking-wide"
-        >
-          Add New User
-        </h2>
-      </div>
-      <div
-        data-pop-view="FormDemoLocal"
-        id="FormDemoLocal"
-        data-phx-session="session"
-        class="local_forms flex max-w-[412px] flex-col gap-4 p-8"
-      >
-      </div>
-    </div>
-    <div
-      class="bg-light-20 border-brown-header mx-w-md mt-8 overflow-hidden rounded-2xl border-2 p-4 shadow-lg"
-    >
-      <pre>
-      <code is:raw>
-defmodule FormDemoLocal do
-  use LocalLiveView
-  import Local.CoreComponents
-
-  @impl true
-  def render(assigns) do
-    ~H&quot;&quot;&quot;
-    &lt;div class=&quot;bordered&quot;&gt;
-      &lt;.form for={@form} id=&quot;my-form&quot; phx-change=&quot;validate&quot; phx-submit=&quot;save&quot;&gt;
-        &lt;label&gt;USERNAME&lt;/label&gt;
-        &lt;.input type=&quot;text&quot; field={@form[:username]} /&gt;
-        &lt;label&gt;EMAIL&lt;/label&gt;
-        &lt;.input type=&quot;text&quot; field={@form[:email]} /&gt;
-        &lt;div class=&quot;centered&quot;&gt;
-          &lt;button class=&quot;ghost-button&quot; disabled={@disabled}&gt;SAVE&lt;/button&gt;
-        &lt;/div&gt;
-      &lt;/.form&gt;
-      &lt;div class=&quot;centered&quot;&gt;
-        &lt;button class=&quot;ghost-button&quot; phx-click=&quot;generate_random&quot;&gt;GENERATE RANDOM&lt;/button&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-    &lt;%= for error &lt;- @errors do %&gt;
-      &lt;p style=&quot;color:red;&quot;&gt;{error}&lt;/p&gt;
-    &lt;% end %&gt;
-    &lt;div class=&quot;bordered&quot;&gt;
-      &lt;h1&gt;[Local Runtime] User List:&lt;/h1&gt;
-      &lt;ul&gt;
-        &lt;%= for user &lt;- @users do %&gt;
-          &lt;li&gt;Username: {user[&quot;username&quot;]}, Email: {user[&quot;email&quot;]}&lt;/li&gt;
-        &lt;% end %&gt;
-      &lt;/ul&gt;
-    &lt;/div&gt;
-    &quot;&quot;&quot;
-  end
-
-  @impl true
-  def mount(_params, _session, socket) do
-    send(self(), :sync)
-    user = %{&quot;email&quot; =&gt; &quot;&quot;, &quot;username&quot; =&gt; &quot;&quot;}
-    {:ok, assign(socket, users: [], form: to_form(user), errors: [], disabled: true)}
-  end
-
-  @impl true
-  def handle_event(&quot;validate&quot;, params, socket) do
-    errors = validate(params, socket.assigns.users)
-    {:noreply, assign(socket, form: to_form(params), errors: errors, disabled: errors != [])}
-  end
-
-  def handle_event(&quot;save&quot;, user_params, socket) do
-    users = socket.assigns.users
-
-    case validate(user_params, users) do
-      [] -&gt;
-        blank_user = %{&quot;email&quot; =&gt; &quot;&quot;, &quot;username&quot; =&gt; &quot;&quot;}
-        send_to_phoenix(%{&quot;type&quot; =&gt; &quot;new_user&quot;, &quot;user&quot; =&gt; user_params})
-
-        {:noreply,
-         assign(socket,
-           form: to_form(blank_user),
-           users: users ++ [user_params],
-           errors: [],
-           disabled: true
-         )}
-
-      errors -&gt;
-        {:noreply, assign(socket, errors: errors, disabled: true)}
-    end
-  end
-
-  def handle_event(
-        &quot;llv_server_message&quot;,
-        %{&quot;type&quot; =&gt; &quot;synchronize&quot;, &quot;users&quot; =&gt; server_users},
-        socket
-      ) do
-    filtered_users =
-      Enum.filter(socket.assigns.users, fn user -&gt;
-        case validate_already_existing(user, server_users) do
-          [] -&gt;
-            send_to_phoenix(%{&quot;type&quot; =&gt; &quot;new_user&quot;, &quot;user&quot; =&gt; user})
-            true
-
-          _ -&gt;
-            false
-        end
-      end)
 
-    {:noreply, assign(socket, users: server_users ++ filtered_users)}
-  end
-
-  def handle_event(&quot;generate_random&quot;, _params, socket) do
-    users = socket.assigns.users
-    user = generate_random_user(users)
-    handle_event(&quot;save&quot;, user, socket)
-  end
-
-  defp validate(user, existing_users) do
-    (validate_correctness(user) ++ validate_already_existing(user, existing_users))
-    |&gt; Enum.filter(fn error -&gt; error != &quot;&quot; end)
-  end
-
-  defp validate_already_existing(user, existing_users) do
-    user
-    |&gt; Enum.filter(fn {key, value} -&gt;
-      Enum.any?(existing_users, fn user -&gt; Map.get(user, key) == value end)
-    end)
-    |&gt; Enum.map(fn {key, _value} -&gt;
-      String.capitalize(&quot;#{key} already in use&quot;)
-    end)
-  end
-
-  defp validate_correctness(user) do
-    Enum.map(user, fn {key, value} -&gt; validate_correctness(key, value) end)
-  end
-
-  defp validate_correctness(&quot;username&quot;, value) do
-    cond do
-      String.length(value) &lt; 4 -&gt; &quot;Username length must be greater than 3 characters&quot;
-      true -&gt; &quot;&quot;
-    end
-  end
-
-  defp validate_correctness(&quot;email&quot;, value) do
-    with [name, server] &lt;- String.split(value, &quot;@&quot;),
-         true &lt;- String.length(name) &gt; 0 and String.contains?(server, &quot;.&quot;) do
-      &quot;&quot;
-    else
-      _err -&gt; &quot;Email must have an email format&quot;
-    end
-  end
-end
-      </code>
-      </pre>
-    </div>
+    <LlvDemoLayout>
+      <Fragment slot="left">
+          <div
+            data-pop-view="FormDemoLocalPresentation"
+            id="FormDemoLocalPresentation"
+            data-phx-session="session"
+            class="local_forms"
+          >
+          </div>
+        <AssignsPanel client:load />
+        <LifecycleStrip client:load />
+        <EventLog client:load />
+      </Fragment>
+
+      <LlvCodePanel slot="right" tabs={tabs} />
+    </LlvDemoLayout>
   </Section>
 </Layout>
 
-<style is:global class="language-elixir">
-  .local_forms .input {
-    border: 2px solid #58330c;
-    border-radius: 0.5rem;
-    width: 100%;
-    padding: 0.75rem 1rem;
-    background: #fffdf5;
-    color: #301b05;
-    transition: all 0.2s ease;
-  }
-
-  .local_forms .input:focus {
-    outline: none;
-    border-color: #ef7c00;
-    box-shadow: 0 0 0 3px rgba(239, 124, 0, 0.1);
-  }
-
-  .local_forms .input::placeholder {
-    color: #696057;
-  }
-
-  .local_forms {
-    color: #301b05;
-  }
-
-  .local_forms form {
-    margin-bottom: 1rem;
-  }
-
-  .local_forms label {
-    font-weight: 600;
-    color: #58330c;
-    margin-bottom: 0.25rem;
-  }
 
-  .ghost-button {
-    padding: 0.75rem 1.5rem;
-    border: 2px solid #58330c;
-    background: transparent;
-    color: #58330c;
-    border-radius: 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 1rem;
-    font-weight: 600;
+<script>
+  import { Socket } from "phoenix";
+  import { LiveSocket } from "phoenix_live_view";
+  import { LLVEngine } from "local_live_view";
+  import {
+    $assigns,
+    pushLog,
+    type LogEntry,
+    type PresentationPayload,
+  } from "../../scripts/local-live-view/store";
+  import {
+    applyAssignsWithFlash,
+    createAnimation,
+    setCodeHighlight,
+    highlightHtml,
+  } from "../../scripts/local-live-view/animation";
+
+  const CODE_PANEL = "llv-code-body-0";
+
+  type FormCtx = { newAssigns: Record<string, unknown> };
+
+  let logId = 0;
+  let pendingAck = false;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let llv: any = null;
+  const multiplier = 3;
+
+  function makeFormAnimation(firstLabel: string, codeBlock: string) {
+    return createAnimation<FormCtx>(
+      [
+        { delay: 0 },
+        {
+          delay: 180 * multiplier,
+          onEnter: () => setCodeHighlight(CODE_PANEL, codeBlock)
+        },
+        {
+          delay: 900 * multiplier,
+          onEnter: ({ newAssigns }) => {
+            applyAssignsWithFlash(newAssigns);
+            setCodeHighlight(CODE_PANEL, "render");
+          },
+        },
+        {
+          delay: 1300 * multiplier,
+          onEnter: () => {
+            pendingAck = false;
+            llv?.pushEvent("FormDemoLocalPresentation", "llv_ack");
+            highlightHtml("users-list", true);
+          },
+        },
+      ],
+      {
+        completeDelay: 1800 * multiplier,
+        onComplete: () => {
+          pendingAck = false;
+          setCodeHighlight(CODE_PANEL, null);
+          highlightHtml("users-list", false);
+        },
+        onCancel: ({newAssigns}) => {
+          if (pendingAck) {
+            applyAssignsWithFlash(newAssigns);
+            llv?.pushEvent("FormDemoLocalPresentation", "llv_ack");
+          }
+          pendingAck = false;
+          setCodeHighlight(CODE_PANEL, null);
+          highlightHtml("users-list", false);
+        },
+      },
+    );
   }
 
-  .ghost-button:hover {
-    background: #ef7c00;
-    border-color: #ef7c00;
-    color: #fffdf5;
+  const validateAnimation = makeFormAnimation("phx-change", "validate");
+  const saveAnimation = makeFormAnimation("phx-submit", "save");
+  const generateAnimation = makeFormAnimation("phx-click", "generate_random");
+
+  const ANIMATIONS: Record<string, typeof validateAnimation> = {
+    save: saveAnimation,
+    generate_random: generateAnimation,
+  };
+
+  function animate(
+    block: string,
+    eventName: string,
+    newAssigns: Record<string, unknown>,
+  ) {
+    const users = newAssigns.users as number;
+    const result = users > 0 ? `users: ${users}` : "ok";
+
+    const entry: LogEntry = {
+      id: ++logId,
+      event: `handle_event("${eventName}")`,
+      result,
+    };
+    pushLog(entry);
+
+    const anim = ANIMATIONS[block] ?? validateAnimation;
+    anim.run({ newAssigns });
+    pendingAck = true;
   }
 
-  .ghost-button:disabled {
-    border-style: dashed;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
+  function handlePresentation({ block, event, assigns }: PresentationPayload) {
+    if (!block || event === "mount") {
+      $assigns.set(assigns);
+      return;
+    }
 
-  .ghost-button:disabled:hover {
-    background: transparent;
-    border-color: #58330c;
-    color: #58330c;
+    animate(block, event, assigns);
   }
-</style>
-
-<script>
-  import { Socket } from "phoenix";
-  import { LiveSocket } from "phoenix_live_view";
-  import { LLVEngine } from "local_live_view";
 
   async function init() {
-    const liveSocket = new LiveSocket("/live", Socket, {
-      params: {},
-    });
+    const liveSocket = new LiveSocket("/live", Socket, { params: {} });
 
-    await LLVEngine.create(liveSocket, {
+    llv = await LLVEngine.create(liveSocket, {
       Socket,
       bundlePaths: ["/wasm/local_forms.avm"],
+      eventHandler: (name: string, payload: unknown) => {
+        if (name === "llv_presentation") handlePresentation(payload as PresentationPayload);
+      },
     });
 
     liveSocket.connect();
diff --git a/landing-page/src/pages/demos/local-thermostat.astro b/landing-page/src/pages/demos/local-thermostat.astro
index c54d6f4a..e578a153 100644
--- a/landing-page/src/pages/demos/local-thermostat.astro
+++ b/landing-page/src/pages/demos/local-thermostat.astro
@@ -1,13 +1,46 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import Section from "../../components/Section.astro";
+import LlvDemoLayout from "../../components/local-live-view/LlvDemoLayout.astro";
+import { AssignsPanel } from "../../components/local-live-view/AssignsPanel";
+import { LifecycleStrip } from "../../components/local-live-view/LifecycleStrip";
+import { EventLog } from "../../components/local-live-view/EventLog";
+import LlvCodePanel from "../../components/local-live-view/LlvCodePanel.astro";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createBlockTransformer } from "../../scripts/local-live-view/code-panel";
+import type { CodeTab } from "../../components/local-live-view/LlvCodePanel.astro";
+import "../../styles/demos/local-thermostat.css";
+
+const libDir = path.resolve(
+  fileURLToPath(import.meta.url),
+  "../../../../..",
+  "examples/local-lv-thermostat/local/lib",
+);
+const thermostatCode = fs
+  .readFileSync(path.join(libDir, "thermostat_live.ex"), "utf8")
+  .trim();
+const clockCode = fs
+  .readFileSync(path.join(libDir, "clock_live.ex"), "utf8")
+  .trim();
+
+const tabs: CodeTab[] = [
+  {
+    label: "ThermostatLive",
+    id: "thermostat",
+    code: thermostatCode,
+    lang: "elixir",
+  },
+  { label: "ClockLive", id: "clock", code: clockCode, lang: "elixir" },
+];
 ---
 
 <Layout>
   <Section background="light">
     <header class="mb-4 text-center">
       <h1
-        class="font-handjet text-brown-header mb-4 text-4xl font-bold md:text-6xl"
+        class="font-handjet text-brown-header mb-3 text-4xl font-bold md:text-5xl"
       >
         Local thermostat
       </h1>
@@ -20,128 +53,144 @@ import Section from "../../components/Section.astro";
         demonstrates use of timers.
       </p>
     </header>
-    <div
-      class="bg-light-20 border-brown-header mx-auto mt-8 max-w-md overflow-hidden rounded-2xl border-2 shadow-lg"
-    >
-      <div
-        data-pop-view="ThermostatLive"
-        id="ThermostatLive"
-        class="from-light-20 to-light-30 flex flex-col items-center gap-6 bg-gradient-to-br p-8"
-      >
-      </div>
-      <div
-        data-pop-view="ClockLive"
-        id="ClockLive"
-        data-phx-session="session"
-        class="font-handjet text-light-20 bg-brown-header p-4 text-center text-2xl tracking-wide"
-      >
-      </div>
-    </div>
-    <div
-      class="bg-light-20 border-brown-header mx-w-md mt-8 overflow-hidden rounded-2xl border-2 p-4 shadow-lg"
-    >
-      <pre>
-      <code is:raw>
-defmodule ThermostatLive do
-  use LocalLiveView
-
-  def render(assigns) do
-    ~H&quot;&quot;&quot;
-    &lt;p&gt;Current temperature: {@temperature}&deg;C&lt;/p&gt;
-    &lt;div class=&quot;thermostat-controls&quot;&gt;
-      &lt;button phx-click=&quot;inc_temperature&quot; class=&quot;ghost-button&quot;&gt;+&lt;/button&gt;
-      &lt;button phx-click=&quot;dec_temperature&quot; class=&quot;ghost-button&quot;&gt;-&lt;/button&gt;
-    &lt;/div&gt;
-    &lt;p&gt;Country: {@country}&lt;/p&gt;
-    &quot;&quot;&quot;
-  end
-
-  def mount(_params, _session, socket) do
-    temperature = 25
-    country = &quot;Poland&quot;
-
-    socket =
-      socket
-      |&gt; assign(:temperature, temperature)
-      |&gt; assign(:country, country)
-
-    {:ok, socket}
-  end
-
-  def handle_event(&quot;inc_temperature&quot;, _params, socket) do
-    {:noreply, update(socket, :temperature, &amp;(&amp;1 + 1))}
-  end
-
-  def handle_event(&quot;dec_temperature&quot;, _params, socket) do
-    {:noreply, update(socket, :temperature, &amp;(&amp;1 - 1))}
-  end
-end
-
-      </code>
-    </pre>
-    </div>
+
+    <LlvDemoLayout>
+      <Fragment slot="left">
+        <div class="demo-card">
+          <div
+            data-pop-view="ThermostatLivePresentation"
+            id="ThermostatLivePresentation"
+          >
+          </div>
+          <div
+            data-pop-view="ClockLive"
+            id="ClockLive"
+            data-phx-session="session"
+            class="clock-band"
+          >
+          </div>
+        </div>
+
+        <AssignsPanel client:load />
+        <LifecycleStrip client:load />
+        <EventLog client:load />
+      </Fragment>
+
+      <LlvCodePanel slot="right" tabs={tabs} />
+    </LlvDemoLayout>
   </Section>
 </Layout>
 
-<style is:global>
-  .thermostat-controls {
-    display: flex;
-    gap: 1rem;
-  }
-
-  .ghost-button {
-    width: 3.5rem;
-    height: 3.5rem;
-    padding: 0;
-    border: 2px solid #58330c;
-    background: transparent;
-    color: #58330c;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-size: 1.5rem;
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .ghost-button:hover {
-    background: #ef7c00;
-    border-color: #ef7c00;
-    color: #fffdf5;
-    transform: scale(1.1);
-  }
-
-  .ghost-button:active {
-    transform: scale(0.95);
-  }
-
-  .ghost-button:disabled {
-    color: gray;
-    border: 2px solid gray;
-  }
-  .ghost-button:disabled:hover {
-    color: gray;
-    background-color: transparent;
-    box-shadow: none;
-    cursor: auto;
-  }
-</style>
 
 <script>
   import { Socket } from "phoenix";
   import { LiveSocket } from "phoenix_live_view";
   import { LLVEngine } from "local_live_view";
+  import {
+    $assigns,
+    pushLog,
+    type LogEntry,
+    type PresentationPayload,
+  } from "../../scripts/local-live-view/store";
+  import {
+    applyAssignsWithFlash,
+    createAnimation,
+    setCodeHighlight,
+    highlightHtml,
+  } from "../../scripts/local-live-view/animation";
+
+  type ThermoCtx = {
+    block: string;
+    newAssigns: Record<string, unknown>;
+  };
+
+  const CODE_PANEL = "llv-code-body-0";
+  const multiplier = 3;
+
+  let logId = 0;
+  let pendingAck = false;
+  let llv: LLVEngine | null = null;
+
+  const thermoAnimation = createAnimation<ThermoCtx>(
+    [
+      { delay: 0 },
+      {
+        delay: 180 * multiplier,
+        onEnter: ({ block }) => setCodeHighlight(CODE_PANEL, block),
+      },
+      {
+        delay: 900 * multiplier,
+        onEnter: ({ newAssigns }) => {
+          applyAssignsWithFlash(newAssigns);
+          setCodeHighlight(CODE_PANEL, "render");
+        },
+      },
+      {
+        delay: 1300 * multiplier,
+        onEnter: () => {
+          pendingAck = false;
+          highlightHtml("temperature", true);
+          llv?.pushEvent("ThermostatLivePresentation", "llv_ack");
+        },
+      },
+    ],
+    {
+      completeDelay: 1800 * multiplier,
+      onComplete: () => {
+        pendingAck = false;
+        highlightHtml("temperature", false);
+        setCodeHighlight(CODE_PANEL, null);
+      },
+      onCancel: ({ newAssigns }) => {
+        // Fire ack immediately on cancel so spam clicks accumulate in Elixir's _pending.
+        if (pendingAck) {
+          applyAssignsWithFlash(newAssigns);
+          llv?.pushEvent("ThermostatLivePresentation", "llv_ack");
+        }
+        pendingAck = false;
+        highlightHtml("temperature", false);
+        setCodeHighlight(CODE_PANEL, null);
+      },
+    },
+  );
+
+  function animate(
+    block: string,
+    eventName: string,
+    newAssigns: Record<string, unknown>,
+  ) {
+    const result = Object.entries(newAssigns)
+      .map(([k, v]) => `${k}: ${typeof v === "string" ? `"${v}"` : v}`)
+      .join(", ");
+    const entry: LogEntry = {
+      id: ++logId,
+      event: `handle_event("${eventName}")`,
+      result,
+    };
+    pushLog(entry);
+
+    thermoAnimation.run({ block, newAssigns });
+    pendingAck = true;
+  }
+
+  function handlePresentation({ block, event, assigns }: PresentationPayload) {
+    if (!block || event === "mount") {
+      $assigns.set(assigns);
+      return;
+    }
+
+    animate(block, event, assigns);
+  }
 
   async function init() {
-    const liveSocket = new LiveSocket("/live", Socket, {
-      params: {},
-    });
+    const liveSocket = new LiveSocket("/live", Socket, { params: {} });
 
-    const llv = await LLVEngine.create(liveSocket, {
+    llv = await LLVEngine.create(liveSocket, {
       Socket,
       bundlePaths: ["/wasm/local_thermostat.avm"],
+      eventHandler: (name: string, payload: unknown) => {
+        if (name === "llv_presentation") handlePresentation(payload as PresentationPayload);
+      },
     });
 
     liveSocket.connect();
diff --git a/landing-page/src/scripts/local-live-view/animation.ts b/landing-page/src/scripts/local-live-view/animation.ts
new file mode 100644
index 00000000..c58eee41
--- /dev/null
+++ b/landing-page/src/scripts/local-live-view/animation.ts
@@ -0,0 +1,114 @@
+import { $assigns, $flashKeys, $step } from "./store";
+
+function isLineVisible(el: HTMLElement): boolean {
+  const { top } = el.getBoundingClientRect();
+  return top >= 0 && top < window.innerHeight;
+}
+
+function isElementInView(el: HTMLElement): boolean {
+  const { top, bottom } = el.getBoundingClientRect();
+  return top < window.innerHeight && bottom > 0;
+}
+
+let flashTimer: ReturnType<typeof setTimeout> | null = null;
+
+export function applyAssignsWithFlash(newAssigns: Record<string, unknown>) {
+  const prev = $assigns.get();
+  const changed = new Set(
+    Object.keys(newAssigns).filter((k) => prev[k] !== newAssigns[k]),
+  );
+  $assigns.set(newAssigns);
+  if (changed.size > 0) {
+    if (flashTimer !== null) clearTimeout(flashTimer);
+    $flashKeys.set(changed);
+    flashTimer = setTimeout(() => {
+      $flashKeys.set(new Set());
+      flashTimer = null;
+    }, 800);
+  }
+}
+
+export function setCodeHighlight(
+  containerId: string,
+  activeBlock: string | null,
+) {
+  const container = document.getElementById(containerId);
+  if (!container) return;
+
+  const firstLine = container.querySelector<HTMLElement>(`.line[data-block="${activeBlock}"]`);
+  if (firstLine && !isLineVisible(firstLine)) {
+    firstLine.scrollIntoView({ behavior: "smooth" });
+  }
+  container.querySelectorAll<HTMLElement>(".line").forEach((line) => {
+    const b = line.dataset.block;
+    if (!activeBlock) {
+      line.classList.remove("hl", "dim");
+    } else if (b === activeBlock) {
+      line.classList.add("hl");
+      line.classList.remove("dim");
+    } else {
+      line.classList.add("dim");
+      line.classList.remove("hl");
+    }
+  });
+}
+
+export function highlightHtml(key: string, state: boolean) {
+  const el = document.querySelector<HTMLElement>(`[data-value="${key}"]`);
+  if (!el) return;
+
+  const container = el.closest<HTMLElement>("[data-pop-view]") ?? el;
+  const needsScroll = state && !isElementInView(container);
+  container.classList.toggle(`hl-${key}`, state);
+  if (needsScroll) container.scrollIntoView({ behavior: "smooth" });
+}
+
+export type StepDef<T> = {
+  delay: number;
+  onEnter?: (ctx: T) => void;
+};
+
+export type AnimationOptions<T> = {
+  completeDelay: number;
+  onComplete?: (ctx: T) => void;
+  onCancel?: (ctx: T) => void;
+};
+
+export function createAnimation<T = unknown>(
+  steps: StepDef<T>[],
+  options: AnimationOptions<T>,
+): { run: (ctx: T) => void; cancel: (ctx: T) => void } {
+  let timers: ReturnType<typeof setTimeout>[] = [];
+  let runningCtx: T | null = null;
+
+  function cancelInternal() {
+    if (timers.length === 0) return;
+    timers.forEach(clearTimeout);
+    timers = [];
+    if (runningCtx !== null) options.onCancel?.(runningCtx);
+    runningCtx = null;
+  }
+
+  function run(ctx: T) {
+    cancelInternal();
+    runningCtx = ctx;
+    steps.forEach(({ delay, onEnter }, i) => {
+      timers.push(
+        setTimeout(() => {
+          $step.set(i);
+          onEnter?.(ctx);
+        }, delay),
+      );
+    });
+    timers.push(
+      setTimeout(() => {
+        timers = [];
+        runningCtx = null;
+        options.onComplete?.(ctx);
+        $step.set(null);
+      }, options.completeDelay),
+    );
+  }
+
+  return { run, cancel: cancelInternal };
+}
diff --git a/landing-page/src/scripts/local-live-view/code-panel.ts b/landing-page/src/scripts/local-live-view/code-panel.ts
new file mode 100644
index 00000000..02077de9
--- /dev/null
+++ b/landing-page/src/scripts/local-live-view/code-panel.ts
@@ -0,0 +1,133 @@
+import type { ShikiTransformer } from "shiki";
+
+import Parser from "tree-sitter";
+
+type HastElement = Parameters<NonNullable<ShikiTransformer["line"]>>[0];
+import Elixir from "tree-sitter-elixir";
+
+const parser = new Parser();
+parser.setLanguage(Elixir);
+
+export type LineAnnotation = { block: string | null; defpGroup?: string; defpHeader?: boolean };
+
+export function parseElixirBlocks(code: string): LineAnnotation[] {
+  const tree = parser.parse(code);
+  const lineCount = code.split("\n").length;
+  const annotations: LineAnnotation[] = Array.from(
+    { length: lineCount },
+    () => ({
+      block: null,
+    }),
+  );
+
+  const defpRanges: [number, number][] = [];
+  walkNode(tree.rootNode, annotations, defpRanges);
+
+  defpRanges.sort((a, b) => a[0] - b[0]);
+  defpRanges.forEach(([start, end], i) => {
+    const groupId = `defp-${i}`;
+    annotations[start] = { ...annotations[start], defpGroup: groupId, defpHeader: true };
+    for (let row = start + 1; row <= end; row++) {
+      annotations[row] = { ...annotations[row], defpGroup: groupId };
+    }
+  });
+
+  return annotations;
+}
+
+function walkNode(node: Parser.SyntaxNode, annotations: LineAnnotation[], defpRanges: [number, number][]) {
+  if (node.type !== "call") {
+    for (const child of node.children) walkNode(child, annotations, defpRanges);
+    return;
+  }
+
+  const keyword = node.children[0]?.text as string | undefined;
+
+  if (keyword === "defmodule") {
+    annotations[node.startPosition.row] = { block: "module" };
+    annotations[node.endPosition.row] = { block: "module" };
+    // Mark `use X` lines inside the module body as module
+    const doBlock = node.children.find((c: any) => c.type === "do_block");
+    if (doBlock) {
+      for (const child of doBlock.children) {
+        if (child.type === "call" && child.children[0]?.text === "use") {
+          annotations[child.startPosition.row] = { block: "module" };
+        } else if (child.type === "call") {
+          // Recurse into nested def/defp
+          walkNode(child, annotations, defpRanges);
+        }
+      }
+    }
+    return;
+  }
+
+  if (keyword === "defp") {
+    defpRanges.push([node.startPosition.row, node.endPosition.row]);
+    return;
+  }
+
+  if (keyword === "def") {
+    annotateDef(node, annotations);
+    return;
+  }
+
+  for (const child of node.children) walkNode(child, annotations, defpRanges);
+}
+
+function annotateDef(node: Parser.SyntaxNode, annotations: LineAnnotation[]) {
+  const outerArgs = node.children.find(
+    (c: Parser.SyntaxNode) => c.type === "arguments",
+  );
+  if (!outerArgs) return;
+
+  const sigCall = outerArgs.namedChildren?.[0] ?? outerArgs.children[0];
+  if (!sigCall || sigCall.type !== "call") return;
+
+  const funcName: string = sigCall.children[0]?.text ?? "";
+  if (!funcName) return;
+
+  let block = funcName;
+
+  if (funcName === "handle_event") {
+    const innerArgs = sigCall.children.find((c: any) => c.type === "arguments");
+    const firstArg = innerArgs?.namedChildren?.[0] ?? innerArgs?.children?.[1];
+    if (firstArg?.type === "string") {
+      const qc = firstArg.children.find(
+        (c: any) => c.type === "quoted_content",
+      );
+      block = qc?.text ?? firstArg.text.replace(/"/g, "");
+    }
+  } else if (funcName === "handle_info") {
+    const innerArgs = sigCall.children.find((c: any) => c.type === "arguments");
+    const firstArg = innerArgs?.namedChildren?.[0] ?? innerArgs?.children?.[1];
+    if (firstArg?.type === "atom") {
+      block = firstArg.text.replace(/^:/, "");
+    }
+  }
+
+  const start: number = node.startPosition.row;
+  const end: number = node.endPosition.row;
+  for (let i = start; i <= end; i++) {
+    annotations[i] = { block };
+  }
+}
+
+export function createBlockTransformer(code: string): ShikiTransformer {
+  const annotations = parseElixirBlocks(code);
+
+  return {
+    name: "llv-block-annotator",
+    line(node: HastElement, line: number) {
+      const ann = annotations[line - 1];
+
+      const props = node.properties;
+      if (ann?.block) props["data-block"] = ann.block;
+      if (ann?.defpGroup) props["data-defp-group"] = ann.defpGroup;
+      if (ann?.defpHeader) props["data-defp-header"] = "true";
+
+      node.children = [
+        { type: "element", tagName: "span", properties: {}, children: node.children },
+      ];
+    },
+  };
+}
diff --git a/landing-page/src/scripts/local-live-view/store.ts b/landing-page/src/scripts/local-live-view/store.ts
new file mode 100644
index 00000000..4d26100c
--- /dev/null
+++ b/landing-page/src/scripts/local-live-view/store.ts
@@ -0,0 +1,29 @@
+import { atom } from "nanostores";
+
+export interface LogEntry {
+  id: number;
+  event: string;
+  result: string;
+}
+
+export interface PresentationPayload {
+  block: string | null;
+  event: string;
+  assigns: Record<string, unknown>;
+}
+
+// Animation step: 0=phx-click, 1=handle_event, 2=update assigns, 3=re-render, null=idle
+export const $step = atom<number | null>(null);
+
+// Current assigns from the LiveView
+export const $assigns = atom<Record<string, unknown>>({});
+
+// Keys that changed in the last update (for flash animation)
+export const $flashKeys = atom<Set<string>>(new Set());
+
+// Event log entries (newest first, max 6)
+export const $log = atom<LogEntry[]>([]);
+
+export function pushLog(entry: LogEntry) {
+  $log.set([entry, ...$log.get()].slice(0, 6));
+}
diff --git a/landing-page/src/scripts/local-live-view/theme.ts b/landing-page/src/scripts/local-live-view/theme.ts
new file mode 100644
index 00000000..36f7b995
--- /dev/null
+++ b/landing-page/src/scripts/local-live-view/theme.ts
@@ -0,0 +1,83 @@
+import type { ThemeRegistration } from "shiki";
+
+export const popcornTheme: ThemeRegistration = {
+  name: "popcorn-dark",
+  type: "dark",
+  colors: {
+    "editor.background": "var(--color-llv-bg-100)",
+    "editor.foreground": "var(--color-llv-fg-muted)",
+  },
+  tokenColors: [
+    {
+      scope: [
+        "keyword.control",
+        "keyword.other",
+        "storage.type",
+        "storage.modifier",
+        "keyword.operator.macro",
+      ],
+      settings: { foreground: "var(--color-orange-100)" },
+    },
+    {
+      scope: [
+        "entity.name.type",
+        "entity.name.class",
+        "support.class",
+        "entity.name.namespace",
+      ],
+      settings: { foreground: "var(--color-llv-orange-60)", fontStyle: "bold" },
+    },
+    {
+      scope: [
+        "entity.name.function",
+        "support.function",
+        "support.function.kernel",
+      ],
+      settings: { foreground: "var(--color-llv-orange-40)" },
+    },
+    {
+      scope: [
+        "constant.language.symbol",
+        "string.other.symbol",
+        "constant.other.symbol",
+      ],
+      settings: { foreground: "var(--color-llv-orange-50)" },
+    },
+    {
+      scope: [
+        "punctuation.section.embedded",
+        "variable.other.readwrite.elixir",
+      ],
+      settings: { foreground: "var(--color-llv-orange-70)", fontStyle: "bold" },
+    },
+    {
+      scope: ["string.quoted", "string.interpolated"],
+      settings: { foreground: "var(--color-llv-green-60)" },
+    },
+    {
+      scope: ["constant.numeric"],
+      settings: { foreground: "var(--color-llv-orange-60)" },
+    },
+    {
+      scope: ["keyword.operator"],
+      settings: { foreground: "var(--color-llv-brown-75)" },
+    },
+    {
+      scope: ["entity.name.tag", "meta.tag"],
+      settings: { foreground: "var(--color-llv-blue-60)" },
+    },
+    {
+      scope: ["entity.other.attribute-name"],
+      settings: { foreground: "var(--color-llv-blue-50)" },
+    },
+    {
+      scope: [
+        "comment",
+        "keyword.operator.macro.sigil",
+        "string.unquoted.heredoc",
+        "punctuation.definition.string.heredoc",
+      ],
+      settings: { foreground: "var(--color-llv-brown-85)" },
+    },
+  ],
+};
diff --git a/landing-page/src/styles/demos/local-forms.css b/landing-page/src/styles/demos/local-forms.css
new file mode 100644
index 00000000..203204eb
--- /dev/null
+++ b/landing-page/src/styles/demos/local-forms.css
@@ -0,0 +1,85 @@
+@reference "../global.css";
+
+[data-value="users-list"],
+[data-value="errors-list"] {
+  @apply transition-colors duration-300;
+}
+
+[data-value="errors-list"] {
+  @apply border border-transparent rounded-lg px-2 flex flex-col gap-2;
+}
+
+[data-value="users-list"] {
+  @apply mb-4 text-[0.8rem];
+}
+
+[data-value="users-list"] p {
+  @apply italic;
+}
+
+[data-pop-view].hl-users-list [data-value="users-list"],
+[data-pop-view].hl-errors-list [data-value="errors-list"] {
+  @apply border-orange-100! bg-orange-100/6!;
+}
+
+.local_forms {
+  @apply flex flex-col gap-4 text-black bg-light-20 border-2 border-brown-header rounded-2xl overflow-hidden shadow-[0_10px_30px_rgba(48,27,5,0.1)];
+}
+
+.local_forms > div {
+  @apply px-6;
+}
+
+.local_forms .header {
+  @apply bg-brown-header text-light-20 text-center py-2;
+}
+
+.local_forms h2 {
+  @apply font-handjet text-xl mb-2;
+}
+
+.local_forms form {
+  @apply flex flex-col gap-2;
+}
+
+.local_forms label {
+  @apply font-semibold text-brown-header text-xs tracking-wider;
+}
+
+.local_forms .input {
+  @apply w-full border-2 border-brown-header rounded-lg px-4 py-3 bg-light-20 text-black transition-all duration-200;
+}
+
+.local_forms .input:focus {
+  @apply outline-none border-orange-100 shadow-[0_0_0_3px_rgba(239,124,0,0.1)];
+}
+
+.local_forms .input::placeholder {
+  @apply font-normal text-brown-60;
+}
+
+.local_forms .buttons {
+  @apply flex gap-4;
+}
+
+.local_forms ul {
+  @apply list-none p-0 m-0 flex flex-col gap-1 text-llv-brown-50;
+}
+
+.ghost-button {
+  @apply px-5 border-2 border-brown-header bg-transparent text-brown-header rounded-lg cursor-pointer transition-all duration-200 text-sm font-semibold tracking-[0.04em];
+  padding-top: 0.6rem;
+  padding-bottom: 0.6rem;
+}
+
+.ghost-button:hover {
+  @apply bg-orange-100 border-orange-100 text-light-20;
+}
+
+.ghost-button:disabled {
+  @apply border-dashed opacity-50 cursor-not-allowed;
+}
+
+.ghost-button:disabled:hover {
+  @apply bg-transparent border-brown-header text-brown-header;
+}
diff --git a/landing-page/src/styles/demos/local-thermostat.css b/landing-page/src/styles/demos/local-thermostat.css
new file mode 100644
index 00000000..b47f1a0a
--- /dev/null
+++ b/landing-page/src/styles/demos/local-thermostat.css
@@ -0,0 +1,54 @@
+@reference "../global.css";
+
+[data-value] {
+  @apply transition-colors duration-300;
+}
+
+[data-pop-view].hl-temperature [data-value="temperature"] {
+  @apply text-orange-100!;
+}
+
+[data-pop-view] {
+  scroll-margin-top: 5.5rem;
+}
+
+.demo-card {
+  @apply bg-light-20 border-2 border-brown-header rounded-2xl overflow-hidden shadow-[0_10px_30px_rgba(48,27,5,0.1)];
+}
+
+.clock-band {
+  @apply bg-brown-header text-light-20 py-3 px-6 text-center font-handjet text-lg tracking-[0.04em];
+}
+
+.thermostat-wrapper {
+  @apply flex flex-col items-center gap-5 p-8 w-full;
+}
+
+.thermostat-temp-label {
+  @apply text-xs uppercase tracking-widest text-llv-brown-50 font-semibold;
+}
+
+.thermostat-temp-value {
+  @apply font-handjet text-7xl font-bold text-brown-header leading-none transition-colors duration-150 ease-in;
+}
+
+.thermostat-controls {
+  @apply flex gap-4;
+}
+
+.thermostat-country {
+  @apply text-sm text-llv-brown-50;
+}
+
+/* ── Ghost button (circular variant) ─────────────────────── */
+.ghost-button {
+  @apply size-14 p-0 border-2 border-brown-header bg-transparent text-brown-header rounded-full cursor-pointer transition-all duration-150 ease-in text-2xl font-bold flex items-center justify-center font-handjet;
+}
+
+.ghost-button:hover {
+  @apply bg-orange-100 border-orange-100 text-light-20 scale-[1.08];
+}
+
+.ghost-button:active {
+  @apply scale-[0.93];
+}
diff --git a/landing-page/src/styles/global.css b/landing-page/src/styles/global.css
index b2d03d7f..fb2e4116 100644
--- a/landing-page/src/styles/global.css
+++ b/landing-page/src/styles/global.css
@@ -16,6 +16,34 @@
   --color-brown-60: #696057;
   --color-brown-gray: #696057;
   --color-black: #301b05;
+  --color-llv-bg-100: #1a0f05;
+  --color-llv-bg-110: #120a02;
+  --color-llv-brown-50: #7a5535;
+  --color-llv-brown-55: #5a4535;
+  --color-llv-brown-75: #5a4030;
+  --color-llv-brown-85: #4a3020;
+  --color-llv-brown-95: #3a2810;
+  --color-llv-gutter: #2e1e0a;
+  --color-llv-fg-muted: #d4c4b0;
+  --color-llv-orange-40: #ffe599;
+  --color-llv-orange-50: #ffc285;
+  --color-llv-orange-60: #ffa94d;
+  --color-llv-orange-70: #ef9f40;
+  --color-llv-green-60: #a8d8a8;
+  --color-llv-blue-50: #a0c4d4;
+  --color-llv-blue-60: #80b8d4;
   --font-handjet: "Handjet Variable", system-ui;
   --font-inter: "Inter Variable", sans-serif;
+  --animate-fade-slide: fadeSlide 0.3s ease;
+
+  @keyframes fadeSlide {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
diff --git a/local-live-view/assets/local_live_view.js b/local-live-view/assets/local_live_view.js
index 3dbcd88d..a4f548f5 100644
--- a/local-live-view/assets/local_live_view.js
+++ b/local-live-view/assets/local_live_view.js
@@ -10,6 +10,8 @@ import { Popcorn } from "@swmansion/popcorn";
  *   Called instead of `liveSocket.historyPatch` when an LLV view calls `push_patch`.
  *   The default syncs LLV navigation into the Phoenix LiveView channel so the host page's
  *   `handle_params/3` fires. Pass a custom function to take full control of navigation.
+ * @property {(eventName: string, payload: unknown) => void} [eventHandler] - Optional callback for raw Popcorn messages.
+
  */
 
 export class LLVEngine {
diff --git a/package.json b/package.json
index 18a57736..41f4107f 100644
--- a/package.json
+++ b/package.json
@@ -4,5 +4,12 @@
   "version": "0.1.0",
   "description": "Monorepo root",
   "scripts": {},
-  "packageManager": "pnpm@11.0.8"
+  "packageManager": "pnpm@10.28.1",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "tree-sitter",
+      "tree-sitter-elixir"
+    ]
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3d0e40f3..4ac0b283 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -212,6 +212,9 @@ importers:
       '@iconify-json/material-symbols-light':
         specifier: ^1.2.30
         version: 1.2.70
+      '@nanostores/react':
+        specifier: ^1.1.0
+        version: 1.1.0(nanostores@1.3.0)(react@19.2.6)
       '@swmansion/popcorn':
         specifier: workspace:*
         version: link:../popcorn/js
@@ -248,6 +251,9 @@ importers:
       mermaid:
         specifier: ^11.7.0
         version: 11.14.0
+      nanostores:
+        specifier: ^1.3.0
+        version: 1.3.0
       phoenix:
         specifier: ^1.8.0
         version: 1.8.7
@@ -275,6 +281,12 @@ importers:
       three:
         specifier: ^0.178.0
         version: 0.178.0
+      tree-sitter:
+        specifier: ^0.25.0
+        version: 0.25.0
+      tree-sitter-elixir:
+        specifier: ^0.3.5
+        version: 0.3.5(tree-sitter@0.25.0)
     devDependencies:
       '@types/phoenix':
         specifier: ^1.6.7
@@ -1490,105 +1502,89 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -1662,6 +1658,13 @@ packages:
   '@mermaid-js/parser@1.1.0':
     resolution: {integrity: sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==}
 
+  '@nanostores/react@1.1.0':
+    resolution: {integrity: sha512-MbH35fjhcf7LAubYX5vhOChYUfTLzNLqH/mBGLVsHkcvjy0F8crO1WQwdmQ2xKbAmtpalDa2zBt3Hlg5kqr8iw==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      nanostores: ^1.2.0
+      react: '>=18.0.0'
+
   '@napi-rs/wasm-runtime@1.1.4':
     resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
@@ -1714,42 +1717,36 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
     resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
     resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
     resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
     resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
@@ -1839,79 +1836,66 @@ packages:
     resolution: {integrity: sha512-DV6fJoxEYWJOvaZIsok7KrYl0tPvga5OZ2yvKHNNYyk/2roMLqQAbGhr78EQ5YhHpnhLKJD3S1WFusAkmUuV5g==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.60.3':
     resolution: {integrity: sha512-mQKoJAzvuOs6F+TZybQO4GOTSMUu7v0WdxEk24krQ/uUxXoPTtHjuaUuPmFhtBcM4K0ons8nrE3JyhTuCFtT/w==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.60.3':
     resolution: {integrity: sha512-Whjj2qoiJ6+OOJMGptTYazaJvjOJm+iKHpXQM1P3LzGjt7Ff++Tp7nH4N8J/BUA7R9IHfDyx4DJIflifwnbmIA==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.60.3':
     resolution: {integrity: sha512-4YTNHKqGng5+yiZt3mg77nmyuCfmNfX4fPmyUapBcIk+BdwSwmCWGXOUxhXbBEkFHtoN5boLj/5NON+u5QC9tg==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.60.3':
     resolution: {integrity: sha512-SU3kNlhkpI4UqlUc2VXPGK9o886ZsSeGfMAX2ba2b8DKmMXq4AL7KUrkSWVbb7koVqx41Yczx6dx5PNargIrEA==}
     cpu: [loong64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-loong64-musl@4.60.3':
     resolution: {integrity: sha512-6lDLl5h4TXpB1mTf2rQWnAk/LcXrx9vBfu/DT5TIPhvMhRWaZ5MxkIc8u4lJAmBo6klTe1ywXIUHFjylW505sg==}
     cpu: [loong64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-ppc64-gnu@4.60.3':
     resolution: {integrity: sha512-BMo8bOw8evlup/8G+cj5xWtPyp93xPdyoSN16Zy90Q2QZ0ZYRhCt6ZJSwbrRzG9HApFabjwj2p25TUPDWrhzqQ==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-musl@4.60.3':
     resolution: {integrity: sha512-E0L8X1dZN1/Rph+5VPF6Xj2G7JJvMACVXtamTJIDrVI44Y3K+G8gQaMEAavbqCGTa16InptiVrX6eM6pmJ+7qA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-riscv64-gnu@4.60.3':
     resolution: {integrity: sha512-oZJ/WHaVfHUiRAtmTAeo3DcevNsVvH8mbvodjZy7D5QKvCefO371SiKRpxoDcCxB3PTRTLayWBkvmDQKTcX/sw==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.60.3':
     resolution: {integrity: sha512-Dhbyh7j9FybM3YaTgaHmVALwA8AkUwTPccyCQ79TG9AJUsMQqgN1DDEZNr4+QUfwiWvLDumW5vdwzoeUF+TNxQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.60.3':
     resolution: {integrity: sha512-cJd1X5XhHHlltkaypz1UcWLA8AcoIi1aWhsvaWDskD1oz2eKCypnqvTQ8ykMNI0RSmm7NkTdSqSSD7zM0xa6Ig==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.60.3':
     resolution: {integrity: sha512-DAZDBHQfG2oQuhY7mc6I3/qB4LU2fQCjRvxbDwd/Jdvb9fypP4IJ4qmtu6lNjes6B531AI8cg1aKC2di97bUxA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.60.3':
     resolution: {integrity: sha512-cRxsE8c13mZOh3vP+wLDxpQBRrOHDIGOWyDL93Sy0Ga8y515fBcC2pjUfFwUe5T7tqvTvWbCpg1URM/AXdWIXA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-openbsd-x64@4.60.3':
     resolution: {integrity: sha512-QaWcIgRxqEdQdhJqW4DJctsH6HCmo5vHxY0krHSX4jMtOqfzC+dqDGuHM87bu4H8JBeibWx7jFz+h6/4C8wA5Q==}
@@ -2127,28 +2111,24 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
     resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
     resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.4':
     resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.4':
     resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
@@ -3559,28 +3539,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -3862,6 +3838,10 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanostores@1.3.0:
+    resolution: {integrity: sha512-XPUa/jz+P1oJvN9VBxw4L9MtdFfaH3DAryqPssqhb2kXjmb9npz0dly6rCsgFWOPr4Yg9mTfM3MDZgZZ+7A3lA==}
+    engines: {node: ^20.0.0 || >=22.0.0}
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -3875,9 +3855,20 @@ packages:
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
 
+  node-addon-api@7.1.1:
+    resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
+
+  node-addon-api@8.7.0:
+    resolution: {integrity: sha512-9MdFxmkKaOYVTV+XVRG8ArDwwQ77XIgIPyKASB1k3JPq3M8fGQQQE3YpMOrKm6g//Ktx8ivZr8xo1Qmtqub+GA==}
+    engines: {node: ^18 || ^20 || >= 21}
+
   node-fetch-native@1.6.7:
     resolution: {integrity: sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q==}
 
+  node-gyp-build@4.8.4:
+    resolution: {integrity: sha512-LA4ZjwlnUblHVgq0oBF3Jl/6h/Nvs5fzBLwdEF4nuxnFdsfajde4WfxtJr3CaiH+F6ewcIB/q4jQ4UzPyid+CQ==}
+    hasBin: true
+
   node-mock-http@1.0.4:
     resolution: {integrity: sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ==}
 
@@ -4419,6 +4410,14 @@ packages:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
 
+  tree-sitter-elixir@0.3.5:
+    resolution: {integrity: sha512-xozQMvYK0aSolcQZAx2d84Xe/YMWFuRPYFlLVxO01bM2GITh5jyiIp0TqPCQa8754UzRAI7A83hZmfiYub5TZQ==}
+    peerDependencies:
+      tree-sitter: ^0.21.0
+
+  tree-sitter@0.25.0:
+    resolution: {integrity: sha512-PGZZzFW63eElZJDe/b/R/LbsjDDYJa5UEjLZJB59RQsMX+fo0j54fqBPn1MGKav/QNa0JR0zBiVaikYDWCj5KQ==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -5753,6 +5752,11 @@ snapshots:
     dependencies:
       langium: 4.2.3
 
+  '@nanostores/react@1.1.0(nanostores@1.3.0)(react@19.2.6)':
+    dependencies:
+      nanostores: 1.3.0
+      react: 19.2.6
+
   '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -8555,6 +8559,8 @@ snapshots:
 
   nanoid@3.3.12: {}
 
+  nanostores@1.3.0: {}
+
   natural-compare@1.4.0: {}
 
   neotraverse@0.6.18: {}
@@ -8568,8 +8574,14 @@ snapshots:
       lower-case: 2.0.2
       tslib: 2.8.1
 
+  node-addon-api@7.1.1: {}
+
+  node-addon-api@8.7.0: {}
+
   node-fetch-native@1.6.7: {}
 
+  node-gyp-build@4.8.4: {}
+
   node-mock-http@1.0.4: {}
 
   node-releases@2.0.38: {}
@@ -9191,6 +9203,17 @@ snapshots:
 
   tinyrainbow@3.1.0: {}
 
+  tree-sitter-elixir@0.3.5(tree-sitter@0.25.0):
+    dependencies:
+      node-addon-api: 7.1.1
+      node-gyp-build: 4.8.4
+      tree-sitter: 0.25.0
+
+  tree-sitter@0.25.0:
+    dependencies:
+      node-addon-api: 8.7.0
+      node-gyp-build: 4.8.4
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}