arckode-ui 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -4,6 +4,31 @@ Cambios entre versiones publicadas. Sigue [keepachangelog](https://keepachangelo
 
 ## [Unreleased]
 
+## [0.2.8] — 2026-05-23
+
+### Fixed
+- **Template compiler — atributos con guiones**: atributos SVG (`stroke-width`, `stroke-linecap`),
+  `data-*` y `aria-*` se generaban sin comillas como clave JS, produciendo un syntax error en
+  esbuild (`Expected "}" but found "-"`). Fix: `jsKey()` en `attrToJs` detecta si el nombre
+  necesita comillas y las agrega — sólo afecta atributos que no son identificadores JS válidos.
+
+## [0.2.7] — 2026-05-23
+
+### Added
+- **`createRouterView(routes)`**: nueva función que retorna un `Component` que renderiza
+  reactivamente la página que coincide con la URL actual. Cuando se llama `navigateTo()`,
+  el renderer desmonta la página anterior y monta la nueva automáticamente.
+  Exportada desde el barrel como `createRouterView` + tipo `RouteWithComponent`.
+  Uso: `mount(createRouterView(routes), '#app')` o como variable en template de layout.
+- **`RouteWithComponent`**: tipo exportado `{ path: string; component: Component }` para
+  definir las rutas con sus componentes importados.
+
+### Fixed
+- **Renderer `sameType`**: dos VNodes de componentes distintos (tags diferentes) se trataban
+  como tipos incompatibles, lo que causaba que `patch()` saltara el `__arkUnmount()` del
+  componente saliente al navegar. Ahora todos los VNodes con tag de componente se clasifican
+  como mismo tipo, delegando la lógica de swap+cleanup al branch de componentes en `patch()`.
+
 ## [0.2.6] — 2026-05-23
 
 ### Fixed

package/dist/cli.js

@@ -2,7 +2,7 @@
 import * as a from "node:fs";
 import * as n from "node:path";
 import { a as C } from "./analyzer-Ctnj3WTI.js";
-import { s as j } from "./router-By0pj28e.js";
+import { s as j } from "./router-De-LmzWd.js";
 const E = `import { defineConfig } from 'vite'
 import { arkcodeUi } from 'arckode-ui/vite'
 

package/dist/compiler/template-compiler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/template-compiler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B;AAiZD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA2BpD"}
+{"version":3,"file":"template-compiler.d.ts","sourceRoot":"","sources":["../../src/compiler/template-compiler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B;AAsZD;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CA2BpD"}

package/dist/index.d.ts

@@ -11,4 +11,6 @@ export { createService, ArkServiceError } from './services/create-service';
 export type { RequestOptions, ServiceContext, ServiceOptions, ServiceDefinition, ServiceInstance, } from './services/create-service';
 export { createRouter, navigate, navigateTo, useRoute, getCurrentPath, } from './router/router';
 export type { RouteDefinition, RouteRef, Router, RouteInfo, } from './router/router';
+export { createRouterView } from './router/router-view';
+export type { RouteWithComponent } from './router/router-view';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACnE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAEvE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAC1F,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,CAAC,EAAE,MAAM,aAAa,CAAA;AAC/B,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,UAAU,GACX,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC1E,YAAY,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAA;AAIlC,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAAc,GACf,MAAM,iBAAiB,CAAA;AACxB,YAAY,EACV,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,GACV,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AACnE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAEvE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAA;AAC1F,YAAY,EACV,gBAAgB,EAChB,SAAS,EACT,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,WAAW,GACZ,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,CAAC,EAAE,MAAM,aAAa,CAAA;AAC/B,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAG1D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,YAAY,EACV,cAAc,EACd,YAAY,EACZ,aAAa,EACb,UAAU,GACX,MAAM,sBAAsB,CAAA;AAG7B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAC1E,YAAY,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAA;AAIlC,OAAO,EACL,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAAc,GACf,MAAM,iBAAiB,CAAA;AACxB,YAAY,EACV,eAAe,EACf,QAAQ,EACR,MAAM,EACN,SAAS,GACV,MAAM,iBAAiB,CAAA;AAGxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/index.js

@@ -1,58 +1,58 @@
-import { e as D, d as J, w as M } from "./router-By0pj28e.js";
-import { c as ue, a as ie, g as fe, n as le, b as de, u as ye } from "./router-By0pj28e.js";
+import { e as J, d as M, w as R, _ as W } from "./router-De-LmzWd.js";
+import { c as le, a as de, g as me, n as ye, b as he, u as pe } from "./router-De-LmzWd.js";
 const S = typeof process < "u" ? process.env.NODE_ENV !== "production" : !0;
-function y(e) {
+function m(e) {
   S && console.warn(`[arckode-ui] ${e}`);
 }
-function R(e, n, t) {
+function B(e, n, t) {
   for (const [r, s] of Object.entries(e)) {
     const o = n[r];
     if (s.required === !0 && o === void 0) {
-      y(`[${t}] Prop requerido "${r}" no fue proporcionado.`);
+      m(`[${t}] Prop requerido "${r}" no fue proporcionado.`);
       continue;
     }
     if (o === void 0) continue;
     const c = s.type;
-    c === String && typeof o == "string" || c === Number && typeof o == "number" || c === Boolean && typeof o == "boolean" || c === Array && Array.isArray(o) || c === Function && typeof o == "function" || c === Object && typeof o == "object" && !Array.isArray(o) && o !== null || y(
+    c === String && typeof o == "string" || c === Number && typeof o == "number" || c === Boolean && typeof o == "boolean" || c === Array && Array.isArray(o) || c === Function && typeof o == "function" || c === Object && typeof o == "object" && !Array.isArray(o) && o !== null || m(
       `[${t}] Prop "${r}" recibió tipo incorrecto. Esperado: ${c.name}, recibido: ${typeof o}.`
     );
   }
 }
-function W(e, n, t) {
-  e.includes(n) || y(
+function F(e, n, t) {
+  e.includes(n) || m(
     `[${t}] emit("${n}") no está declarado en emits[]. Declarar antes de usar.`
   );
 }
-function F(e, n) {
+function I(e, n) {
   if (typeof e != "object" || e === null) {
-    y(`[${n}] setup() debe retornar un objeto { state, computed, actions }.`);
+    m(`[${n}] setup() debe retornar un objeto { state, computed, actions }.`);
     return;
   }
   const t = /* @__PURE__ */ new Set(["state", "computed", "actions"]), r = Object.keys(e);
   for (const s of r)
-    t.has(s) || y(
+    t.has(s) || m(
       `[${n}] setup() retornó una key no permitida: "${s}". Solo se permiten: state, computed, actions.`
     );
 }
-function Y(e) {
+function K(e) {
   if (S) {
-    if (e.name || y('defineComponent() requiere el campo "name".'), e.emits)
+    if (e.name || m('defineComponent() requiere el campo "name".'), e.emits)
       for (const t of e.emits)
-        (t !== t.toLowerCase() || /[A-Z]/.test(t)) && y(
+        (t !== t.toLowerCase() || /[A-Z]/.test(t)) && m(
           `[${e.name}] El evento "${t}" en emits[] debe ser kebab-case. Usar "${t.replace(/([A-Z])/g, "-$1").toLowerCase()}" en su lugar.`
         );
     if (e.props)
       for (const [t, r] of Object.entries(e.props))
-        r.type || y(`[${e.name}] El prop "${t}" no tiene "type" definido.`);
+        r.type || m(`[${e.name}] El prop "${t}" no tiene "type" definido.`);
   }
   const n = (t, r) => {
-    S && R(e.props ?? {}, t, e.name);
+    S && B(e.props ?? {}, t, e.name);
     const s = {
       emit(c, u) {
-        S && W(e.emits ?? [], c, e.name), r.emit(c, u);
+        S && F(e.emits ?? [], c, e.name), r.emit(c, u);
       }
     }, o = e.setup(t, s);
-    return S && F(o, e.name), o;
+    return S && I(o, e.name), o;
   };
   return {
     name: e.name,
@@ -62,43 +62,43 @@ function Y(e) {
     setup: n
   };
 }
-let j = [], w = [], x = [];
-function I(e, n, t) {
-  j = e, w = n, x = t;
+let x = [], A = [], O = [];
+function Z(e, n, t) {
+  x = e, A = n, O = t;
 }
-function V(e) {
-  j.push(e);
+function ne(e) {
+  x.push(e);
 }
-function ee(e) {
-  w.push(e);
+function re(e) {
+  A.push(e);
 }
-function te(e) {
-  x.push(e);
+function oe(e) {
+  O.push(e);
 }
-function ne(e, n, ...t) {
+function w(e, n, ...t) {
   return {
     tag: e,
     props: n ?? {},
-    children: A(t)
+    children: P(t)
   };
 }
-function A(e) {
+function P(e) {
   const n = [];
   for (const t of e)
-    t == null || t === !1 || t === !0 || (Array.isArray(t) ? n.push(...A(t)) : typeof t == "number" ? n.push(String(t)) : n.push(t));
+    t == null || t === !1 || t === !0 || (Array.isArray(t) ? n.push(...P(t)) : typeof t == "number" ? n.push(String(t)) : n.push(t));
   return n;
 }
-function O(e) {
+function E(e) {
   return typeof e == "object" && e !== null && typeof e.setup == "function";
 }
-function B(e, n) {
+function G(e, n) {
   const t = Object.keys(e), r = Object.keys(n);
   if (t.length !== r.length) return !1;
   for (const s of t)
     if (e[s] !== n[s]) return !1;
   return !0;
 }
-function P(e, n) {
+function U(e, n) {
   for (const [t, r] of Object.entries(n))
     if (t !== "key") {
       if (t.startsWith("on") && t.length > 2 && typeof r == "function") {
@@ -130,38 +130,38 @@ function g(e) {
     return document.createTextNode("");
   if (typeof e == "string" || typeof e == "number")
     return document.createTextNode(String(e));
-  if (O(e.tag)) {
+  if (E(e.tag)) {
     const t = document.createElement("div");
     t.style.display = "contents";
-    const r = J(e.children), s = {
+    const r = M(e.children), s = {
       ...e.props,
       __slot_default: () => r.value
     };
     for (const [c, u] of Object.entries(e.props))
       if (c.startsWith("on") && c.length > 2 && typeof u == "function") {
         const i = c.slice(2).toLowerCase();
-        t.addEventListener(i, (m) => {
-          const h = m.detail;
+        t.addEventListener(i, (y) => {
+          const h = y.detail;
           u(h);
         });
       }
-    const o = H(e.tag, s, t, null);
+    const o = N(e.tag, s, t, null);
     return t.__arkUnmount = o, t.__arkSlot = r, t.__arkTag = e.tag, t.__arkStaticProps = { ...e.props }, t;
   }
   const n = document.createElement(e.tag);
-  P(n, e.props);
+  U(n, e.props);
   for (const t of e.children)
     n.appendChild(g(t));
   return n;
 }
-function K(e, n) {
-  return e == null ? n == null : n == null ? !1 : typeof e == "string" ? typeof n == "string" : typeof n == "string" ? !1 : e.tag === n.tag;
+function X(e, n) {
+  return e == null ? n == null : n == null ? !1 : typeof e == "string" ? typeof n == "string" : typeof n == "string" ? !1 : E(e.tag) && E(n.tag) ? !0 : e.tag === n.tag;
 }
-function U(e, n, t) {
-  var m, h, l, C, f, p;
-  if (!K(n, t)) {
+function H(e, n, t) {
+  var y, h, l, _, f, p;
+  if (!X(n, t)) {
     const a = g(t);
-    return (m = e.parentNode) == null || m.replaceChild(a, e), a;
+    return (y = e.parentNode) == null || y.replaceChild(a, e), a;
   }
   if (typeof t == "string" || t === null || t === void 0) {
     const a = t == null ? "" : String(t);
@@ -170,87 +170,87 @@ function U(e, n, t) {
     const d = document.createTextNode(a);
     return (h = e.parentNode) == null || h.replaceChild(d, e), d;
   }
-  if (O(t.tag)) {
-    const a = e, d = t, k = a.__arkTag, E = d.tag;
-    if (k === E && a.__arkSlot) {
+  if (E(t.tag)) {
+    const a = e, d = t, k = a.__arkTag, C = d.tag;
+    if (k === C && a.__arkSlot) {
       a.__arkSlot.value = d.children;
-      const L = a.__arkStaticProps ?? {}, q = d.props;
-      if (!B(L, q)) {
+      const q = a.__arkStaticProps ?? {}, D = d.props;
+      if (!G(q, D)) {
         (l = a.__arkUnmount) == null || l.call(a);
         const T = g(t);
-        return (C = e.parentNode) == null || C.replaceChild(T, e), T;
+        return (_ = e.parentNode) == null || _.replaceChild(T, e), T;
       }
       return e;
     }
     (f = a.__arkUnmount) == null || f.call(a);
-    const $ = g(t);
-    return (p = e.parentNode) == null || p.replaceChild($, e), $;
+    const v = g(t);
+    return (p = e.parentNode) == null || p.replaceChild(v, e), v;
   }
   const r = e, s = (n == null ? void 0 : n.props) ?? {}, o = t.props;
   for (const [a, d] of Object.entries(s))
     a.startsWith("on") && a.length > 2 && typeof d == "function" && r.removeEventListener(a.slice(2).toLowerCase(), d);
   for (const a of Object.keys(s))
     !(a in o) && !a.startsWith("on") && r.removeAttribute(a);
-  P(r, o);
+  U(r, o);
   const c = n.children, u = t.children, i = Math.max(c.length, u.length);
   for (let a = 0; a < i; a++) {
-    const d = c[a], k = u[a], E = r.childNodes[a];
+    const d = c[a], k = u[a], C = r.childNodes[a];
     if (k === void 0) {
       for (; r.childNodes.length > a; )
         r.removeChild(r.childNodes[a]);
       break;
     }
-    E === void 0 ? r.appendChild(g(k)) : U(E, d ?? null, k);
+    C === void 0 ? r.appendChild(g(k)) : H(C, d ?? null, k);
   }
   return r;
 }
-function re(e, n) {
+function ce(e, n) {
   const t = document.querySelector(n);
   if (!t) throw new Error(`[arckode-ui] mount: "${n}" not found`);
-  return H(e, {}, t, null);
+  return N(e, {}, t, null);
 }
-function H(e, n, t, r) {
+function N(e, n, t, r) {
   const s = [], o = [];
-  I(s, o, []);
+  Z(s, o, []);
   const u = r ?? ((f, p) => {
     t.dispatchEvent(
       new CustomEvent(f, { detail: p, bubbles: !0 })
     );
-  }), i = e.setup(n, { emit: u }), m = e.__render;
-  if (!m)
+  }), i = e.setup(n, { emit: u }), y = e.__render;
+  if (!y)
     return (typeof process > "u" || process.env.NODE_ENV !== "production") && console.warn(
       `[arckode-ui] ${e.name}: no __render. ¿Compilado por el Vite plugin?`
     ), () => {
     };
   let h = null, l = null;
-  const C = D(() => {
-    const f = m(
+  const _ = J(() => {
+    const f = y(
       n,
       i.state ?? {},
       i.computed ?? {},
       i.actions ?? {}
     );
-    l === null ? (l = g(f), t.appendChild(l)) : l = U(l, h, f), h = f;
+    l === null ? (l = g(f), t.appendChild(l)) : l = H(l, h, f), h = f;
   });
   return queueMicrotask(() => {
     for (const f of s) f();
   }), () => {
     var f;
-    C();
+    _();
     for (const p of o) p();
     l && ((f = l.parentNode) == null || f.removeChild(l));
   };
 }
-const _ = /* @__PURE__ */ new Map();
-function N(e) {
+const $ = /* @__PURE__ */ new Map();
+function L(e) {
   try {
     return e === "localStorage" ? typeof localStorage < "u" ? localStorage : null : typeof sessionStorage < "u" ? sessionStorage : null;
   } catch {
     return null;
   }
 }
-function Z(e, n) {
-  const t = N(e.storage);
+function z(e, n) {
+  const t = L(e.storage);
   if (t)
     try {
       const r = t.getItem(e.key);
@@ -261,8 +261,8 @@ function Z(e, n) {
     } catch {
     }
 }
-function G(e, n) {
-  const t = N(e.storage);
+function Q(e, n) {
+  const t = L(e.storage);
   if (t)
     try {
       const r = e.pick ?? Object.keys(n), s = {};
@@ -272,30 +272,30 @@ function G(e, n) {
     } catch {
     }
 }
-function X(e, n) {
-  Z(e, n);
+function Y(e, n) {
+  z(e, n);
   const t = e.pick ?? Object.keys(n);
   for (const r of t)
-    r in n && M(n[r], () => {
-      G(e, n);
+    r in n && R(n[r], () => {
+      Q(e, n);
     });
 }
-function oe(e, n) {
+function se(e, n) {
   return (!e || e.trim() === "") && console.warn("[arckode-ui] defineStore: el id del store no puede estar vacío"), (!n.state || typeof n.state != "object" || Array.isArray(n.state)) && console.warn("[arckode-ui] defineStore: state debe ser un objeto de signals"), function() {
-    if (_.has(e))
-      return _.get(e);
+    if ($.has(e))
+      return $.get(e);
     const r = {
       state: n.state,
       actions: n.actions,
       getters: n.getters ?? {}
     };
-    return n.persist && X(
+    return n.persist && Y(
       n.persist,
       n.state
-    ), _.set(e, r), r;
+    ), $.set(e, r), r;
   };
 }
-class v extends Error {
+class j extends Error {
   constructor(n, t, r) {
     super(r), this.status = n, this.body = t, this.name = "ArkServiceError";
   }
@@ -320,17 +320,17 @@ async function b(e, n, t) {
       }
     }
     if (!o.ok)
-      throw new v(
+      throw new j(
         o.status,
         c,
         `HTTP ${o.status}`
       );
     return c;
   } catch (o) {
-    throw clearTimeout(s), o instanceof v, o;
+    throw clearTimeout(s), o instanceof j, o;
   }
 }
-function z(e) {
+function V(e) {
   const n = e.timeout ?? 5e3, t = e.headers ?? {};
   function r(s) {
     return { ...t, ...s };
@@ -405,30 +405,57 @@ function z(e) {
     }
   };
 }
-function ce(e, n) {
-  const t = z(e), r = {};
+function ae(e, n) {
+  const t = V(e), r = {};
   for (const s of Object.keys(n))
     r[s] = n[s].bind(t);
   return r;
 }
+function ee(e, n) {
+  if (e === n) return !0;
+  if (e === "/") return n === "/";
+  const t = e.split("/").filter(Boolean), r = n.split("/").filter(Boolean);
+  if (t.length !== r.length) return !1;
+  for (let s = 0; s < t.length; s++) {
+    const o = t[s];
+    if (o === "*") return !0;
+    if (!o.startsWith(":") && o !== r[s])
+      return !1;
+  }
+  return !0;
+}
+function ue(e) {
+  const n = K({
+    name: "RouterView",
+    setup: () => ({ state: {}, computed: {}, actions: {} })
+  }), t = (r, s, o, c) => {
+    const u = W.value;
+    for (const i of e)
+      if (ee(i.path, u))
+        return w(i.component, {});
+    return w("div", {});
+  };
+  return n.__render = t, n;
+}
 export {
-  v as ArkServiceError,
-  ue as computed,
-  ie as createRouter,
-  ce as createService,
-  Y as defineComponent,
-  oe as defineStore,
-  D as effect,
-  fe as getCurrentPath,
-  ne as h,
-  re as mount,
-  H as mountComponent,
-  le as navigate,
-  de as navigateTo,
-  V as onMount,
-  ee as onUnmount,
-  te as onUpdate,
-  J as signal,
-  ye as useRoute,
-  M as watch
+  j as ArkServiceError,
+  le as computed,
+  de as createRouter,
+  ue as createRouterView,
+  ae as createService,
+  K as defineComponent,
+  se as defineStore,
+  J as effect,
+  me as getCurrentPath,
+  w as h,
+  ce as mount,
+  N as mountComponent,
+  ye as navigate,
+  he as navigateTo,
+  ne as onMount,
+  re as onUnmount,
+  oe as onUpdate,
+  M as signal,
+  pe as useRoute,
+  R as watch
 };

package/dist/router/router-view.d.ts

@@ -0,0 +1,25 @@
+import { Component } from '../runtime/define-component';
+export interface RouteWithComponent {
+    /** URL pattern — same format as RouteDefinition.path (e.g. '/users/:id') */
+    path: string;
+    /** The imported .ark component to render for this route */
+    component: Component;
+}
+/**
+ * Creates a RouterView component that reactively renders the page
+ * matched by the current URL path.
+ *
+ * Usage A — mount directly as app root:
+ *   mount(createRouterView(routes), '#app')
+ *
+ * Usage B — as a variable in an .ark layout template:
+ *   // in <script> (module level):
+ *   const RouterView = createRouterView(routes)
+ *   // in <template>:
+ *   <RouterView />
+ *
+ * When navigateTo() is called, the matched component is swapped
+ * automatically — the renderer unmounts the old page and mounts the new one.
+ */
+export declare function createRouterView(routes: RouteWithComponent[]): Component;
+//# sourceMappingURL=router-view.d.ts.map

package/dist/router/router-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"router-view.d.ts","sourceRoot":"","sources":["../../src/router/router-view.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAK5D,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,2DAA2D;IAC3D,SAAS,EAAE,SAAS,CAAA;CACrB;AAsBD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAqBxE"}

package/dist/router/router.d.ts

@@ -20,6 +20,8 @@ export interface Router {
     } | null;
     navigate(path: string): void;
 }
+export declare const _pathSignal: import('..').Signal<string>;
+export declare const _paramsSignal: import('..').Signal<Record<string, string>>;
 export declare function getCurrentPath(): string;
 /** Reset module state between tests. Not part of the public API. */
 export declare function _resetRouterState(): void;

package/dist/router/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/router/router.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAA;IAChB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAA;AAEtC,MAAM,WAAW,MAAM;IACrB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,eAAe,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAAA;IACtF,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAoBD,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED,oEAAoE;AACpE,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC;AAqHD;;GAEG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,CA0D7D;AAgED,wBAAgB,YAAY,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CA4C9D;AAMD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAMhD;AAMD;;GAEG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,IAAI,CAeN;AAMD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAMpC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../src/router/router.ts"],"names":[],"mappings":"AAQA,MAAM,WAAW,eAAe;IAC9B,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,+DAA+D;IAC/D,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,wCAAwC;IACxC,QAAQ,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,EAAE,OAAO,CAAA;IAChB,gEAAgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,MAAM,QAAQ,GAAG,eAAe,CAAA;AAEtC,MAAM,WAAW,MAAM;IACrB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG;QAAE,KAAK,EAAE,eAAe,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI,CAAA;IACtF,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7B;AAMD,eAAO,MAAM,WAAW,6BAAmF,CAAA;AAC3G,eAAO,MAAM,aAAa,6CAAqC,CAAA;AAa/D,wBAAgB,cAAc,IAAI,MAAM,CAEvC;AAED,oEAAoE;AACpE,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC;AAqHD;;GAEG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe,EAAE,CA0D7D;AAgED,wBAAgB,YAAY,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CA4C9D;AAMD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAMhD;AAMD;;GAEG;AACH,wBAAgB,QAAQ,CACtB,QAAQ,EAAE,QAAQ,EAClB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC9B,IAAI,CAeN;AAMD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC7B,IAAI,EAAE,MAAM,CAAA;CACb;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,IAAI,SAAS,CAMpC"}

package/dist/{router-By0pj28e.js → router-De-LmzWd.js}

@@ -217,6 +217,7 @@ function R() {
   };
 }
 export {
+  c as _,
   N as a,
   O as b,
   A as c,

package/dist/runtime/renderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/runtime/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AA6PnD,wBAAgB,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,IAAI,CAIxE;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,GAC9D,MAAM,IAAI,CA4DZ"}
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../../src/runtime/renderer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAgQnD,wBAAgB,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,IAAI,CAIxE;AAED,wBAAgB,cAAc,CAC5B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,SAAS,EAAE,WAAW,EACtB,UAAU,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,GAC9D,MAAM,IAAI,CA4DZ"}

package/dist/vite.js

@@ -1,6 +1,6 @@
-var y = Object.defineProperty;
-var C = (r, t, e) => t in r ? y(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var x = (r, t, e) => C(r, typeof t != "symbol" ? t + "" : t, e);
+var C = Object.defineProperty;
+var O = (r, t, e) => t in r ? C(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var x = (r, t, e) => O(r, typeof t != "symbol" ? t + "" : t, e);
 import { transformWithEsbuild as b } from "vite";
 import { a as N, f as v } from "./analyzer-Ctnj3WTI.js";
 class h extends Error {
@@ -12,25 +12,25 @@ class h extends Error {
   }
 }
 const k = /<(template|script|style)((?:\s+[^>]*)??)>([\s\S]*?)<\/\1>/g;
-function O(r, t) {
+function T(r, t) {
   let e = 1;
   for (let n = 0; n < t; n++)
     r[n] === `
 ` && e++;
   return e;
 }
-function T(r, t) {
+function R(r, t) {
   const n = new RegExp(`${t}=["']([^"']*)["']`).exec(r);
   return n != null ? n[1] ?? null : null;
 }
-function R(r, t) {
+function L(r, t) {
   return new RegExp(`(?:^|\\s)${t}(?:\\s|$|=)`).test(r);
 }
-function L(r) {
+function j(r) {
   const t = [];
   let e;
   for (k.lastIndex = 0; (e = k.exec(r)) !== null; ) {
-    const i = e[1], u = e[2] ?? "", d = e[3] ?? "", m = O(r, e.index);
+    const i = e[1], u = e[2] ?? "", d = e[3] ?? "", m = T(r, e.index);
     i !== void 0 && t.push({ tag: i, attrs: u, content: d, openLine: m });
   }
   const n = t.filter((i) => i.tag === "template"), s = t.filter((i) => i.tag === "script"), c = t.filter((i) => i.tag === "style");
@@ -61,7 +61,7 @@ function L(r) {
       "<script> must appear after <template>",
       o.openLine
     );
-  const l = T(o.attrs, "lang");
+  const l = R(o.attrs, "lang");
   if (l !== "ts")
     throw new h(
       "MISSING_LANG_TS",
@@ -70,7 +70,7 @@ function L(r) {
     );
   let f;
   if (c.length > 0) {
-    const i = c[0], u = R(i.attrs, "scoped");
+    const i = c[0], u = L(i.attrs, "scoped");
     f = { content: i.content, scoped: u };
   }
   return {
@@ -85,12 +85,12 @@ function L(r) {
     ...f !== void 0 ? { style: f } : {}
   };
 }
-const E = /(?:(@[\w.]+|:[a-zA-Z][\w-]*|v-else-if|v-if|v-for|v-show|v-else|[\w-]+)(?:="([^"]*)")?)/g;
-function j(r) {
+const A = /(?:(@[\w.]+|:[a-zA-Z][\w-]*|v-else-if|v-if|v-for|v-show|v-else|[\w-]+)(?:="([^"]*)")?)/g;
+function z(r) {
   const t = [];
-  E.lastIndex = 0;
+  A.lastIndex = 0;
   let e;
-  for (; (e = E.exec(r)) !== null; )
+  for (; (e = A.exec(r)) !== null; )
     t.push({ name: e[1] ?? "", value: e[2] ?? "", raw: e[0] });
   return t;
 }
@@ -131,7 +131,7 @@ function W(r) {
       } else {
         const d = {
           tag: p,
-          attrs: j(f),
+          attrs: z(f),
           children: [],
           selfClosing: i
         };
@@ -145,7 +145,7 @@ function W(r) {
   return t;
 }
 const $ = /\{\{\s*([\s\S]+?)\s*\}\}/g;
-function z(r) {
+function J(r) {
   return $.lastIndex = 0, $.test(r);
 }
 function M(r) {
@@ -169,36 +169,45 @@ const D = {
   delete: "Delete",
   backspace: "Backspace"
 };
-function J(r, t) {
+function P(r, t) {
   const e = r.slice(1), [n, ...s] = e.split("."), p = `on${n.charAt(0).toUpperCase() + n.slice(1)}`;
   if (s.length === 0)
     return `${p}: ${t}`;
   const o = s[0].toLowerCase(), l = D[o] ?? o.charAt(0).toUpperCase() + o.slice(1);
   return `${p}: (e) => e.key === '${l}' && ${t}(e)`;
 }
-function P(r) {
-  const { name: t, value: e } = r;
-  return t.startsWith("@") ? J(t, e) : t.startsWith(":") ? `${t.slice(1)}: ${e}` : ["v-if", "v-for", "v-else", "v-else-if"].includes(t) ? null : t === "v-show" ? `style: { display: ${e} ? '' : 'none' }` : e === "" ? `${t}: true` : `${t}: ${JSON.stringify(e)}`;
+function S(r) {
+  return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(r) ? r : JSON.stringify(r);
 }
 function V(r) {
+  const { name: t, value: e } = r;
+  if (t.startsWith("@"))
+    return P(t, e);
+  if (t.startsWith(":")) {
+    const n = t.slice(1);
+    return `${S(n)}: ${e}`;
+  }
+  return ["v-if", "v-for", "v-else", "v-else-if"].includes(t) ? null : t === "v-show" ? `style: { display: ${e} ? '' : 'none' }` : e === "" ? `${S(t)}: true` : `${S(t)}: ${JSON.stringify(e)}`;
+}
+function G(r) {
   const t = r;
-  return z(t) ? `h('span', null, ${M(t)})` : /^\s+$/.test(t) ? "" : JSON.stringify(t);
+  return J(t) ? `h('span', null, ${M(t)})` : /^\s+$/.test(t) ? "" : JSON.stringify(t);
 }
 function w(r) {
   const t = r.attrs.find((f) => f.name === "v-for");
   if (r.tag === "slot")
     return "(props.__slot_default ? props.__slot_default() : [])";
-  const e = r.attrs.map(P).filter((f) => f !== null && f !== ""), n = e.length === 0 ? "null" : `{ ${e.join(", ")} }`, s = A(r.children);
+  const e = r.attrs.map(V).filter((f) => f !== null && f !== ""), n = e.length === 0 ? "null" : `{ ${e.join(", ")} }`, s = y(r.children);
   let l = `h(${[/^[A-Z]/.test(r.tag) ? r.tag : JSON.stringify(r.tag), n, ...s].join(", ")})`;
-  return t !== void 0 && (l = G(t.value, l)), l;
+  return t !== void 0 && (l = Z(t.value, l)), l;
 }
-function A(r) {
+function y(r) {
   const t = [];
   let e = 0;
   for (; e < r.length; ) {
     const n = r[e];
     if (n.kind === "text") {
-      const o = V(n.text);
+      const o = G(n.text);
       o !== "" && t.push(o), e++;
       continue;
     }
@@ -232,7 +241,7 @@ function A(r) {
   }
   return t;
 }
-function G(r, t) {
+function Z(r, t) {
   const e = /^\s*(?:\(([^)]+)\)|(\w+))\s+in\s+(.+?)\s*$/.exec(r);
   if (!e)
     return `(${r}).map((item) => ${t})`;
@@ -240,7 +249,7 @@ function G(r, t) {
   return `${e[3].trim()}.map((${n}) => ${t})`;
 }
 function F(r) {
-  const t = W(r.trim()), e = A(t).filter((s) => s !== "");
+  const t = W(r.trim()), e = y(t).filter((s) => s !== "");
   let n;
   return e.length === 0 ? n = "null" : e.length === 1 ? n = e[0] : n = `[${e.join(", ")}]`, `function h(tag, props, ...children) {
   return { tag, props: props ?? {}, children: children.flat().filter(c => c != null) }
@@ -257,7 +266,7 @@ function U(r) {
     t = (t << 5) + t ^ r.charCodeAt(n), t = t | 0;
   return (t >>> 0).toString(36).padStart(6, "0").slice(-6);
 }
-function Z(r) {
+function K(r) {
   const t = /export\s+default\s+(defineComponent\s*\([\s\S]*\))\s*;?\s*$/, e = r.trim(), n = t.exec(e);
   return n ? {
     preamble: e.slice(0, n.index).trim(),
@@ -267,8 +276,8 @@ function Z(r) {
     defineComponentExpr: null
   };
 }
-function K(r, t, e) {
-  const s = F(t).replace(/export default function render/, "function render").replace(/function h\(tag, props, \.\.\.children\) \{\n  return [^\n]+\n\}\n+/, "").trim(), { preamble: c, defineComponentExpr: p } = Z(r);
+function B(r, t, e) {
+  const s = F(t).replace(/export default function render/, "function render").replace(/function h\(tag, props, \.\.\.children\) \{\n  return [^\n]+\n\}\n+/, "").trim(), { preamble: c, defineComponentExpr: p } = K(r);
   return p ? [
     "import { defineComponent, h } from 'arckode-ui'",
     "",
@@ -298,7 +307,7 @@ function K(r, t, e) {
   ].join(`
 `);
 }
-function H(r = {}) {
+function Q(r = {}) {
   let t = "development";
   return {
     name: "arckode-ui",
@@ -307,11 +316,11 @@ function H(r = {}) {
       t = e.mode;
     },
     transform(e, n) {
-      var S, _;
+      var _, E;
       if (!n.endsWith(".ark")) return null;
       let s;
       try {
-        s = L(e);
+        s = j(e);
       } catch (a) {
         if (a instanceof h) {
           const g = [
@@ -325,7 +334,7 @@ function H(r = {}) {
         }
         throw a;
       }
-      const c = ((S = r.analyzer) == null ? void 0 : S.ignore) ?? [], p = ((_ = r.analyzer) == null ? void 0 : _.failOnWarnings) ?? !1, l = N(e).filter((a) => !c.includes(a.code)), f = l.filter((a) => a.severity === "error"), i = l.filter((a) => a.severity === "warning"), u = t === "production";
+      const c = ((_ = r.analyzer) == null ? void 0 : _.ignore) ?? [], p = ((E = r.analyzer) == null ? void 0 : E.failOnWarnings) ?? !1, l = N(e).filter((a) => !c.includes(a.code)), f = l.filter((a) => a.severity === "error"), i = l.filter((a) => a.severity === "warning"), u = t === "production";
       for (const a of i)
         console.warn(v(a, n, e));
       if (f.length > 0) {
@@ -352,7 +361,7 @@ ${a}`);
 ${a}`
         );
       }
-      const d = U(n), m = K(s.script.content, s.template.content, d);
+      const d = U(n), m = B(s.script.content, s.template.content, d);
       return b(m, n + ".ts", {
         loader: "ts",
         target: "esnext"
@@ -361,6 +370,6 @@ ${a}`
   };
 }
 export {
-  H as arkcodeUi,
+  Q as arkcodeUi,
   U as generateScopeId
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arckode-ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "description": "Frontend framework con .ark SFCs, signals, file-system router y analyzer estático con sugerencias concretas de fix. Diseñado para máxima predictibilidad de output de IA.",
   "keywords": [