@mauroandre/velojs 0.0.42 → 0.0.44

package/agent/skills/velojs-loaders/SKILL.md

@@ -127,8 +127,10 @@ Understanding the data flow helps you debug issues:
 
 **Client-side navigation (SPA):**
 1. User clicks a link
-2. VeloJS compares each module's route pattern against the new URL and marks stale the ones whose **declared params** changed
+2. VeloJS marks stale the modules whose **declared params** changed — or that **were not part of the previous location** (they unmounted and are remounting now)
 3. One `?_data=1` request serves all of them
 4. Only the stale modules are written — a module the client owns locally (a filtered list, an optimistic edit) is left alone
 
-That last point is why a layout at `/admin/empresas` keeps a filtered list while you navigate among its children: its route declares no param, so nothing invalidates it.
+The second rule is why returning to a page always shows fresh data: leaving `/` for `/leads` unmounts the Dashboard, so navigating back re-runs its loader. The first rule is why `/leads/1` → `/leads/2` refetches.
+
+That last point is why a layout at `/admin/empresas` keeps a filtered list while you navigate among its children: it stays matched the whole time — no param changed and it never unmounted, so nothing invalidates it. (Leaving the subtree entirely and coming back *does* revalidate it — the layout remounted.)

package/dist/graph-viewer.js

@@ -60,7 +60,8 @@ var ctx = canvas.getContext("2d");
 var W = 0, H = 0;
 
 function resize() {
-  W = window.innerWidth; H = window.innerHeight;
+  var tb = document.getElementById("topbar");
+  W = window.innerWidth; H = window.innerHeight - tb.offsetHeight;
   canvas.width = W * devicePixelRatio; canvas.height = H * devicePixelRatio;
   canvas.style.width = W + "px"; canvas.style.height = H + "px";
   ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, 0, 0);
@@ -240,26 +241,26 @@ function nodeAt(sx, sy) {
   return null;
 }
 canvas.addEventListener("mousedown", function (e) {
-  var n = nodeAt(e.clientX, e.clientY);
+  var n = nodeAt(e.offsetX, e.offsetY);
   if (n && view === "modules") { dragNode = n; alpha = Math.max(alpha, 0.3); }
   else panning = true;
-  lastX = e.clientX; lastY = e.clientY; moved = false;
+  lastX = e.offsetX; lastY = e.offsetY; moved = false;
 });
 canvas.addEventListener("mousemove", function (e) {
-  var dx = e.clientX - lastX, dy = e.clientY - lastY;
+  var dx = e.offsetX - lastX, dy = e.offsetY - lastY;
   if (Math.abs(dx) + Math.abs(dy) > 3) moved = true;
-  if (dragNode) { var w = toWorld(e.clientX, e.clientY); dragNode.x = w[0]; dragNode.y = w[1]; dragNode.vx = dragNode.vy = 0; }
+  if (dragNode) { var w = toWorld(e.offsetX, e.offsetY); dragNode.x = w[0]; dragNode.y = w[1]; dragNode.vx = dragNode.vy = 0; }
   else if (panning) { cam.x += dx; cam.y += dy; }
   else {
-    var n = nodeAt(e.clientX, e.clientY);
+    var n = nodeAt(e.offsetX, e.offsetY);
     hoverHL = n ? { list: relatedNodes(n), origin: n } : null;
     canvas.style.cursor = n ? "pointer" : "grab";
   }
-  lastX = e.clientX; lastY = e.clientY;
+  lastX = e.offsetX; lastY = e.offsetY;
 });
 canvas.addEventListener("mouseup", function (e) {
   if (!moved) {
-    var n = nodeAt(e.clientX, e.clientY);
+    var n = nodeAt(e.offsetX, e.offsetY);
     if (n) {
       pinnedHL = { list: relatedNodes(n), origin: n };
       var id = view === "modules" ? n.id : n.data.moduleId;
@@ -274,9 +275,9 @@ canvas.addEventListener("mouseup", function (e) {
 canvas.addEventListener("wheel", function (e) {
   e.preventDefault();
   var k = Math.exp(-e.deltaY * 0.0012);
-  var w = toWorld(e.clientX, e.clientY);
+  var w = toWorld(e.offsetX, e.offsetY);
   cam.k *= k;
-  cam.x = e.clientX - w[0] * cam.k; cam.y = e.clientY - w[1] * cam.k;
+  cam.x = e.offsetX - w[0] * cam.k; cam.y = e.offsetY - w[1] * cam.k;
 }, { passive: false });
 
 // ---------- rendering ----------
@@ -389,8 +390,8 @@ fetch("/graph.json").then(function (r) { return r.json(); }).then(function (g) {
 <\/script>
 </body>
 </html>`;
-async function f(o) {
-  const i = l.join(o, ".velojs", "graph.json"), a = r.createServer((n, e) => {
+async function m(a) {
+  const i = l.join(a, ".velojs", "graph.json"), o = r.createServer((n, e) => {
     if (n.url === "/graph.json") {
       let t;
       try {
@@ -405,12 +406,12 @@ async function f(o) {
     e.writeHead(200, { "Content-Type": "text/html; charset=utf-8" }), e.end(s);
   });
   return await new Promise((n) => {
-    a.listen(0, "127.0.0.1", () => {
-      const e = a.address(), t = typeof e == "object" && e ? e.port : 0;
+    o.listen(0, "127.0.0.1", () => {
+      const e = o.address(), t = typeof e == "object" && e ? e.port : 0;
       n(`http://127.0.0.1:${t}`);
     });
   });
 }
 export {
-  f as serveGraphViewer
+  m as serveGraphViewer
 };

package/dist/loader-store.d.ts

@@ -7,9 +7,12 @@
  * no module-scope mirror to keep in sync.
  *
  * Invalidation follows the route tree: an entry is stale when the params its own
- * route declares have changed. That is what the server already does — a loader
- * re-runs when a request arrives with different params — so the client stops
- * making the author restate it in `useLoader([params.id])`.
+ * route declares have changed — or when the module was not part of the previous
+ * location's matched chain (it unmounted and is now remounting). The first rule
+ * mirrors the server (a loader re-runs when a request arrives with different
+ * params); the second mirrors user expectation (returning to a page shows fresh
+ * data). A layout keeps its data while navigating among its children because it
+ * stays matched the whole time — its client-owned state survives.
  *
  * Deliberately NOT invalidated by:
  *  - a query-string change: `routes.tsx` declares path params, never `?x=`, so
@@ -32,14 +35,16 @@ export declare function registerRoutePatterns(routes: AppRoutes): void;
 /**
  * Extract the params a pattern declares from a pathname. Layout patterns are
  * prefixes of the URL (`/x/:id` covers `/x/1/tab`), mirroring how the client
- * router matches them, so the match is prefix-tolerant.
+ * router matches them, so the match is prefix-tolerant. Leaf patterns (routes
+ * without children) match exactly, mirroring wouter's exact `<Route>` for them.
  *
  * Returns null when the pattern does not cover the pathname at all.
  */
-export declare function extractParams(pattern: string, pathname: string): Record<string, string> | null;
+export declare function extractParams(pattern: string, pathname: string, exact?: boolean): Record<string, string> | null;
 /**
  * Called on every client navigation. Refetches exactly the entries whose
- * declared params changed, in one coalesced request.
+ * declared params changed OR that were not matched at the previous location
+ * (they unmounted and are remounting now), in one coalesced request.
  */
 export declare function syncLocation(pathname: string): void;
 /** Explicit refresh. Never coalesced: a caller asking after a mutation must not

package/dist/loader-store.js

@@ -1,103 +1,119 @@
-import { signal as f } from "@preact/signals";
-const p = f(!1), c = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map(), d = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new WeakSet();
-let u = !1;
-function S(t) {
-  y();
+import { signal as d } from "@preact/signals";
+const S = d(!1), c = /* @__PURE__ */ new Map(), _ = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Set(), p = /* @__PURE__ */ new Map();
+let u = /* @__PURE__ */ new Set();
+const l = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new WeakSet();
+let w = !1;
+function E(t) {
+  v();
   let e = c.get(t);
-  return e || (e = f(null), c.set(t, e)), e;
+  return e || (e = d(null), c.set(t, e)), e;
 }
-function w(t) {
-  let e = l.get(t);
-  return e || (e = f(!1), l.set(t, e)), e;
+function g(t) {
+  let e = _.get(t);
+  return e || (e = d(!1), _.set(t, e)), e;
 }
-function y() {
-  if (u || typeof window > "u") return;
-  u = !0;
+function v() {
+  if (w || typeof window > "u") return;
+  w = !0;
   const t = window.__PAGE_DATA__;
   if (t)
     for (const e of Object.keys(t)) {
       if (e.startsWith("__")) continue;
       let n = c.get(e);
-      n || (n = f(null), c.set(e, n)), n.value = t[e];
+      n || (n = d(null), c.set(e, n)), n.value = t[e];
     }
 }
-function O(t) {
-  if (h.has(t)) return;
-  h.add(t);
+function x(t) {
+  if (y.has(t)) return;
+  y.add(t);
   const e = (n) => {
     for (const o of n) {
       const i = o.module?.metadata;
-      i?.moduleId && i.fullPath !== void 0 && d.set(i.moduleId, i.fullPath), o.children && e(o.children);
+      i?.moduleId && i.fullPath !== void 0 && (f.set(i.moduleId, i.fullPath), (!o.children || o.children.length === 0) && h.add(i.moduleId)), o.children && e(o.children);
     }
   };
   if (e(t), typeof window < "u") {
-    y();
-    for (const n of c.keys()) v(n, window.location.pathname);
+    v();
+    for (const n of c.keys()) M(n, window.location.pathname);
+    u = L(window.location.pathname);
   }
 }
-const k = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-function E(t, e) {
-  const n = [], o = t.split("/").map((r) => r.startsWith(":") ? (n.push(r.slice(1)), "([^/]+)") : k(r)).join("/"), i = e.match(new RegExp(`^${o}(?:/.*)?$`));
-  if (!i) return null;
-  const a = {};
-  return n.forEach((r, L) => {
-    a[r] = i[L + 1];
-  }), a;
+const P = (t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function m(t, e, n = !1) {
+  const o = [], i = t.split("/").map((s) => s.startsWith(":") ? (o.push(s.slice(1)), "([^/]+)") : P(s)).join("/"), a = e.match(
+    new RegExp(n ? `^${i}/?$` : `^${i}(?:/.*)?$`)
+  );
+  if (!a) return null;
+  const r = {};
+  return o.forEach((s, A) => {
+    r[s] = a[A + 1];
+  }), r;
 }
-function g(t, e) {
-  const n = d.get(t);
+function O(t, e) {
+  const n = f.get(t);
+  return n === void 0 ? !1 : m(n, e, h.has(t)) !== null;
+}
+function L(t) {
+  const e = /* @__PURE__ */ new Set();
+  for (const n of f.keys())
+    O(n, t) && e.add(n);
+  return e;
+}
+function k(t, e) {
+  const n = f.get(t);
   if (n === void 0) return null;
-  const o = E(n, e);
+  const o = m(n, e, h.has(t));
   return o === null ? null : JSON.stringify(o);
 }
-function v(t, e) {
-  const n = g(t, e);
-  n !== null && _.set(t, n);
+function M(t, e) {
+  const n = k(t, e);
+  n !== null && p.set(t, n);
 }
-function P(t) {
+function H(t) {
   if (typeof __VELO_STATIC__ < "u" && __VELO_STATIC__) return `${t === "/" ? "" : t}/index.json`;
   const n = new URLSearchParams(window.location.search);
   return n.set("_data", "1"), `${t}?${n.toString()}`;
 }
-async function m(t, e, n) {
+async function $(t, e, n) {
   if (typeof window > "u" || t.length === 0) return;
-  const o = P(e);
-  for (const a of t) w(a).value = !0;
-  let i = n ? s.get(o) : void 0;
-  i || (i = fetch(o, { cache: "no-cache" }).then((a) => a.json()), n && (s.set(o, i), i.catch(() => {
-  }).then(() => s.delete(o))));
+  const o = H(e);
+  for (const a of t) g(a).value = !0;
+  let i = n ? l.get(o) : void 0;
+  i || (i = fetch(o, { cache: "no-cache" }).then((a) => a.json()), n && (l.set(o, i), i.catch(() => {
+  }).then(() => l.delete(o))));
   try {
     const a = await i;
-    typeof __VELO_BUILD_HASH__ < "u" && a.__buildHash && a.__buildHash !== __VELO_BUILD_HASH__ && (p.value = !0);
+    typeof __VELO_BUILD_HASH__ < "u" && a.__buildHash && a.__buildHash !== __VELO_BUILD_HASH__ && (S.value = !0);
     for (const r of t)
-      r in a && (S(r).value = a[r], v(r, e));
+      r in a && (E(r).value = a[r], M(r, e));
   } catch {
   } finally {
-    for (const a of t) w(a).value = !1;
+    for (const a of t) g(a).value = !1;
   }
 }
-function $(t) {
+function T(t) {
   if (typeof window > "u") return;
-  const e = [];
-  for (const n of c.keys()) {
-    const o = g(n, t);
-    o !== null && _.get(n) !== o && e.push(n);
+  const e = [], n = L(t);
+  for (const o of c.keys()) {
+    if (!n.has(o)) continue;
+    const i = k(o, t);
+    p.get(o) === i && u.has(o) || e.push(o);
   }
-  m(e, t, !0);
+  u = n, $(e, t, !0);
 }
-function H(t) {
-  typeof window > "u" || m([t], window.location.pathname, !1);
+function U(t) {
+  typeof window > "u" || $([t], window.location.pathname, !1);
 }
-function M() {
-  c.clear(), l.clear(), d.clear(), _.clear(), s.clear(), u = !1, p.value = !1;
+function D() {
+  c.clear(), _.clear(), f.clear(), h.clear(), p.clear(), u = /* @__PURE__ */ new Set(), l.clear(), w = !1, S.value = !1;
 }
 export {
-  M as __resetLoaderStore,
-  p as __veloUpdatePending,
-  E as extractParams,
-  S as loaderEntry,
-  w as loaderLoading,
-  H as refetchModule,
-  O as registerRoutePatterns,
-  $ as syncLocation
+  D as __resetLoaderStore,
+  S as __veloUpdatePending,
+  m as extractParams,
+  E as loaderEntry,
+  g as loaderLoading,
+  U as refetchModule,
+  x as registerRoutePatterns,
+  T as syncLocation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mauroandre/velojs",
-    "version": "0.0.42",
+    "version": "0.0.44",
     "type": "module",
     "description": "Fullstack web framework built on Hono + Preact with Vite-powered AST transforms",
     "keywords": [