@shamar/wire 0.3.0 → 1.0.1

package/README.md

@@ -8,15 +8,7 @@ Existing Alpine UI stays. A piece of the panel moves onto Wire when its markup o
 
 ## Install
 
-`@shamar/wire` is not on npm yet. The packages published as 0.3.0 (`@shamar/adonis` and the rest) do not depend on it. The next release publishes this package first, then `@shamar/adonis`, because the host depends on it. Until then, use it from this repository.
-
-After that release, the panel package pulls Wire in:
-
-```bash
-pnpm add @shamar/adonis
-```
-
-`@shamar/adonis` depends on `@shamar/wire` and re-exports `WireKernel`, `WireComponent`, and `WireRequest`. Install the kernel on its own only when you are not using the Adonis host:
+`pnpm add @shamar/adonis` installs the panel and `@shamar/wire`. The host re-exports `WireKernel`, `WireComponent`, and `WireRequest`. Install the kernel on its own only when you are not using the Adonis host:
 
 ```bash
 pnpm add @shamar/wire
@@ -24,6 +16,8 @@ pnpm add @shamar/wire
 
 No peer dependencies. Node 20+.
 
+New versions are published by GitHub Actions, not from a laptop token. npm trusted publishing for `@shamar/wire` accepts publishes from the `publish.yml` workflow in `coolsam726/shamar`. A GitHub release of the monorepo runs it.
+
 ## What a request does
 
 1. **Mount.** The server creates the component, copies `data` into a signed snapshot, and returns one HTML island.

package/client/wire.js

@@ -297,7 +297,7 @@
   const style = document.createElement('style');
   style.textContent =
     '[wire\\:loading]{display:none !important}.wire-loading [wire\\:loading]{display:revert !important}.wire-loading [wire\\:loading\\.remove]{display:none !important}' +
-    '.wire-progress{position:fixed;top:0;left:0;height:2px;width:0;opacity:0;z-index:2147483646;pointer-events:none;background:#f59e0b;transition:width .2s ease,opacity .2s ease}' +
+    '.wire-progress{position:fixed;top:0;left:0;height:2px;width:0;opacity:0;z-index:2147483646;pointer-events:none;background:var(--color-shamar-accent,#286291);transition:width .2s ease,opacity .2s ease}' +
     '.wire-progress.is-active{opacity:1}';
   document.head.appendChild(style);
 
@@ -481,7 +481,7 @@
     const show = setTimeout(() => {
       bar.classList.add('is-active');
       bar.style.width = '35%';
-    }, 150);
+    }, 80);
     const tick = setInterval(() => {
       const width = Number.parseFloat(bar.style.width) || 0;
       if (width < 90) bar.style.width = `${width + 8}%`;
@@ -609,6 +609,43 @@
     return null;
   }
 
+  /**
+   * Swap chrome that sits outside the scroll morph root (sidebar roots, topbar
+   * menu, etc.) so active nav and Alpine menus match the destination page.
+   */
+  function syncNavigateRegions(nextDoc) {
+    const updated = [];
+    for (const current of [...document.querySelectorAll('[data-wire-sync]')]) {
+      const key = current.getAttribute('data-wire-sync');
+      if (!key) continue;
+      const next = nextDoc.querySelector(`[data-wire-sync="${CSS.escape(key)}"]`);
+      if (!(next instanceof HTMLElement)) continue;
+      if (window.Alpine?.destroyTree) {
+        try {
+          window.Alpine.destroyTree(current);
+        } catch {
+          /* ignore */
+        }
+      }
+      const clone = next.cloneNode(true);
+      current.replaceWith(clone);
+      updated.push(clone);
+    }
+    return updated;
+  }
+
+  function reviveAlpine(roots) {
+    if (!window.Alpine?.initTree) return;
+    for (const root of roots) {
+      if (!(root instanceof HTMLElement)) continue;
+      try {
+        window.Alpine.initTree(root);
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+
   function applyScroll(mode, scrollY, url) {
     if (mode === 'preserve') return;
     if (mode === 'restore') {
@@ -671,17 +708,28 @@
         history.pushState({ wireScroll: 0 }, '', finalUrl);
       }
       mergeHead(doc);
+      const synced = syncNavigateRegions(doc);
       const region = sharedRoot(doc);
       const from = region ? region.current : document.body;
       const to = region ? region.next : doc.body;
       const kept = liftPersisted(from);
+      // Drop Alpine on the outgoing region before morph. Morph reuses matching
+      // nodes (same tag), so without destroyTree, list selection / open menus
+      // from the previous page leak into the next (bulk bar, dropdowns, etc.).
+      if (window.Alpine?.destroyTree) {
+        try {
+          window.Alpine.destroyTree(from);
+        } catch {
+          /* ignore */
+        }
+      }
       morph(from, to, from, false);
       const restored = restorePersisted(from, kept);
-      if (window.Alpine?.initTree) {
-        for (const el of from.querySelectorAll('[wire\\:persist]')) {
-          if (!restored.includes(el)) window.Alpine.initTree(el);
-        }
+      const alpineRoots = [...synced, from];
+      for (const el of from.querySelectorAll('[wire\\:persist]')) {
+        if (!restored.includes(el)) alpineRoots.push(el);
       }
+      reviveAlpine(alpineRoots);
       reviveScripts(from, restored);
       applyScroll(options.scroll, options.scrollY, new URL(finalUrl, window.location.href));
       document.dispatchEvent(new CustomEvent('wire:navigated', { detail: { url: window.location.href } }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shamar/wire",
-  "version": "0.3.0",
+  "version": "1.0.1",
   "description": "Server-driven reactive components. Usable on its own or inside a Shamar admin panel.",
   "license": "MIT",
   "type": "module",