Refresh UI components and showcase; release updated framework packages

packages/csr/src/reactive-runtime.ts

@@ -875,6 +875,15 @@ export const REACTIVE_RUNTIME = String.raw`
   }
 
   function setupScope(el) {
+    // Capture the document's registry nodes for retained scopes across navigation.
+    var controlRegistries = Array.prototype.slice.call(document.querySelectorAll('script[data-wrn-controls]'));
+    for (var registryParent = el.parentElement; registryParent; registryParent = registryParent.parentElement) {
+      if (registryParent.__wrnControlRegistries) {
+        controlRegistries = controlRegistries.concat(registryParent.__wrnControlRegistries);
+        break;
+      }
+    }
+    el.__wrnControlRegistries = controlRegistries;
     if (el.__wrnexusScope) {
       el.removeAttribute("data-scope");
       el.removeAttribute("data-wrn-scope");
@@ -1989,6 +1998,14 @@ export const REACTIVE_RUNTIME = String.raw`
     // materialize the appropriate branch/rows and hydrate their bindings.
     function decodeControlDefinition(value) {
       try {
+        if (value && value.charAt(0) === "@") {
+          var split = value.lastIndexOf(":");
+          var registryId = value.slice(1, split);
+          var registry = controlRegistries.find(function (node) { return node.id === registryId; });
+          if (!registry) throw new Error("Missing control template registry");
+          if (!registry.__wrnDefinitions) registry.__wrnDefinitions = JSON.parse(registry.textContent);
+          return registry.__wrnDefinitions[Number(value.slice(split + 1))];
+        }
         var binary = window.atob(value || "");
         var bytes = new Uint8Array(binary.length);
         for (var index = 0; index < binary.length; index++) {
@@ -2389,16 +2406,14 @@ export const REACTIVE_RUNTIME = String.raw`
             }
           });
 
-          var keyedFragment = document.createDocumentFragment();
+          // Leave already-positioned keyed nodes attached. Detaching every row
+          // restarts CSS animations (notably existing toast progress timers).
+          var keyedCursor = marker.nextSibling;
           orderedNodes.forEach(function (node) {
-            keyedFragment.appendChild(node);
+            if (node !== keyedCursor) parent.insertBefore(node, keyedCursor);
+            keyedCursor = node.nextSibling;
           });
 
-          parent.insertBefore(
-            keyedFragment,
-            marker.nextSibling,
-          );
-
           keyedRecords = nextRecords;
           clones = orderedNodes;
         });