slicejs-web-framework 3.2.2 → 3.3.0

package/Slice/Components/Structural/EventManager/EventManagerDebugger.js

@@ -173,15 +173,19 @@ export default class EventManagerDebugger extends HTMLElement {
       return `
       <div id="events-debugger">
          <div class="events-header">
-            <div class="title">Events</div>
+            <div class="brand">
+               <span class="status-dot"></span>
+               <span class="glyph">◇</span>
+               <span class="title">EVENTS</span>
+            </div>
             <div class="actions">
-               <button id="events-refresh" class="btn">Refresh</button>
-               <button id="events-close" class="btn">Close</button>
+               <button id="events-refresh" class="btn" title="Refresh" aria-label="Refresh">⟳</button>
+               <button id="events-close" class="btn" title="Close" aria-label="Close">✕</button>
             </div>
          </div>
          <div class="events-toolbar">
-            <input id="events-filter" type="text" placeholder="Filter events" />
-            <div class="count">Total: <span id="events-count">0</span></div>
+            <input id="events-filter" type="text" placeholder="filter events…" autocomplete="off" spellcheck="false" />
+            <div class="count"><span id="events-count">0</span></div>
          </div>
          <div class="events-list" id="events-list"></div>
       </div>
@@ -190,170 +194,281 @@ export default class EventManagerDebugger extends HTMLElement {
 
    renderStyles() {
       return `
-      #events-debugger {
-         position: fixed;
-         bottom: 20px;
-         right: 20px;
-         width: min(360px, calc(100vw - 40px));
-         max-height: 60vh;
-         background: var(--primary-background-color);
-         border: 1px solid var(--medium-color);
-         border-radius: 12px;
-         box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
-         display: none;
-         flex-direction: column;
-         z-index: 10001;
-         overflow: hidden;
-      }
+/* Slice Instruments — events console. All selectors scoped to the
+   <slice-eventmanager-debugger> tag so nothing clashes with app styles. */
+slice-eventmanager-debugger {
+   --si-accent: var(--primary-color, #6ee7ff);
+   --si-accent-rgb: var(--primary-color-rgb, 110, 231, 255);
+   --si-surface: rgba(17, 19, 28, 0.86);
+   --si-raised: rgba(255, 255, 255, 0.035);
+   --si-raised-2: rgba(255, 255, 255, 0.06);
+   --si-border: rgba(255, 255, 255, 0.09);
+   --si-text: #e8eaf2;
+   --si-dim: #888fa6;
+   --si-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+}
 
-      #events-debugger.active {
-         display: flex;
-      }
+slice-eventmanager-debugger #events-debugger {
+   position: fixed;
+   bottom: 20px;
+   right: 20px;
+   width: min(380px, calc(100vw - 40px));
+   max-height: 64vh;
+   background: var(--si-surface);
+   border: 1px solid var(--si-border);
+   border-radius: 14px;
+   box-shadow:
+      0 24px 60px -12px rgba(0, 0, 0, 0.55),
+      0 0 0 1px rgba(0, 0, 0, 0.2),
+      0 0 38px -18px rgba(var(--si-accent-rgb), 0.55);
+   -webkit-backdrop-filter: blur(22px) saturate(1.3);
+   backdrop-filter: blur(22px) saturate(1.3);
+   display: none;
+   flex-direction: column;
+   z-index: 10001;
+   overflow: hidden;
+   color: var(--si-text);
+   font-family: var(--si-mono);
+}
 
-      #events-debugger * {
-         box-sizing: border-box;
-      }
+slice-eventmanager-debugger #events-debugger.active {
+   display: flex;
+   animation: si-events-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
+}
 
-      .events-header {
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-         padding: 12px 14px;
-         background: var(--tertiary-background-color);
-         border-bottom: 1px solid var(--medium-color);
-         user-select: none;
-      }
+@keyframes si-events-in {
+   from { opacity: 0; transform: translateY(10px) scale(0.985); }
+   to   { opacity: 1; transform: translateY(0) scale(1); }
+}
 
-      .events-header .title {
-         font-weight: 600;
-         color: var(--font-primary-color);
-      }
+slice-eventmanager-debugger #events-debugger * { box-sizing: border-box; }
 
-      .events-header .actions {
-         display: flex;
-         gap: 8px;
-      }
+slice-eventmanager-debugger #events-debugger::before {
+   content: '';
+   position: absolute;
+   left: 0; top: 0; bottom: 0;
+   width: 2px;
+   background: linear-gradient(180deg, var(--si-accent), transparent 70%);
+   opacity: 0.85;
+   pointer-events: none;
+}
 
-      .events-header .btn {
-         padding: 6px 10px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-         cursor: pointer;
-         font-size: 12px;
-      }
+slice-eventmanager-debugger .events-header {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   padding: 12px 14px;
+   background:
+      radial-gradient(120% 140% at 0% 0%, rgba(var(--si-accent-rgb), 0.10), transparent 60%),
+      var(--si-raised);
+   border-bottom: 1px solid var(--si-border);
+   user-select: none;
+}
 
-      .events-toolbar {
-         display: flex;
-         gap: 10px;
-         align-items: center;
-         padding: 10px 12px;
-         border-bottom: 1px solid var(--medium-color);
-      }
+slice-eventmanager-debugger .brand { display: flex; align-items: center; gap: 9px; }
 
-      .events-toolbar input {
-         flex: 1;
-         min-width: 0;
-         padding: 6px 8px;
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-         background: var(--primary-background-color);
-         color: var(--font-primary-color);
-      }
+slice-eventmanager-debugger .status-dot {
+   width: 7px; height: 7px;
+   border-radius: 50%;
+   background: var(--si-accent);
+   animation: si-pulse-ev 2.4s ease-out infinite;
+}
 
-      .events-list {
-         padding: 10px 12px;
-         overflow: auto;
-         display: flex;
-         flex-direction: column;
-         gap: 8px;
-      }
+@keyframes si-pulse-ev {
+   0%   { box-shadow: 0 0 0 0 rgba(var(--si-accent-rgb), 0.55); }
+   70%  { box-shadow: 0 0 0 7px rgba(var(--si-accent-rgb), 0); }
+   100% { box-shadow: 0 0 0 0 rgba(var(--si-accent-rgb), 0); }
+}
 
-      .event-row {
-         display: block;
-         padding: 8px 10px;
-         background: var(--tertiary-background-color);
-         border-radius: 6px;
-         border: 1px solid var(--medium-color);
-      }
+slice-eventmanager-debugger .glyph { color: var(--si-accent); font-size: 12px; opacity: 0.9; }
 
-      .event-row summary {
-         display: flex;
-         align-items: center;
-         justify-content: space-between;
-         gap: 8px;
-         cursor: pointer;
-         list-style: none;
-      }
+slice-eventmanager-debugger .title {
+   font-weight: 600;
+   font-size: 11px;
+   letter-spacing: 0.18em;
+   color: var(--si-text);
+}
 
-      .event-row summary::-webkit-details-marker {
-         display: none;
-      }
+slice-eventmanager-debugger .actions { display: flex; gap: 6px; }
+
+slice-eventmanager-debugger .btn {
+   width: 26px; height: 26px;
+   display: flex; align-items: center; justify-content: center;
+   border-radius: 7px;
+   border: 1px solid var(--si-border);
+   background: var(--si-raised);
+   color: var(--si-dim);
+   cursor: pointer;
+   font-size: 13px;
+   line-height: 1;
+   transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+}
+slice-eventmanager-debugger .btn:hover {
+   color: var(--si-text);
+   background: var(--si-raised-2);
+   border-color: rgba(var(--si-accent-rgb), 0.5);
+}
+slice-eventmanager-debugger .btn:active { transform: scale(0.92); }
+slice-eventmanager-debugger #events-refresh:hover { color: var(--si-accent); }
+
+slice-eventmanager-debugger .events-toolbar {
+   display: flex;
+   gap: 10px;
+   align-items: center;
+   padding: 10px 12px;
+   border-bottom: 1px solid var(--si-border);
+}
 
-      .event-name {
-         font-family: monospace;
-         font-size: 12px;
-         color: var(--font-primary-color);
-         overflow: hidden;
-         text-overflow: ellipsis;
-         white-space: nowrap;
-      }
+slice-eventmanager-debugger .events-toolbar input {
+   flex: 1;
+   min-width: 0;
+   padding: 7px 10px 7px 30px;
+   border-radius: 8px;
+   border: 1px solid var(--si-border);
+   background:
+      var(--si-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888fa6' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center;
+   color: var(--si-text);
+   font-family: var(--si-mono);
+   font-size: 12px;
+   transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+slice-eventmanager-debugger .events-toolbar input::placeholder { color: var(--si-dim); }
+slice-eventmanager-debugger .events-toolbar input:focus {
+   outline: none;
+   border-color: rgba(var(--si-accent-rgb), 0.6);
+   box-shadow: 0 0 0 3px rgba(var(--si-accent-rgb), 0.12);
+}
 
-      .event-count {
-         font-weight: 600;
-         color: var(--primary-color);
-      }
+slice-eventmanager-debugger .events-toolbar .count { font-size: 11px; color: var(--si-dim); min-width: 22px; text-align: center; }
+slice-eventmanager-debugger .events-toolbar .count span { color: var(--si-accent); font-weight: 600; }
 
-      .subscriber-list {
-         margin-top: 10px;
-         display: flex;
-         flex-direction: column;
-         gap: 8px;
-      }
+slice-eventmanager-debugger .events-list {
+   padding: 10px 12px 12px;
+   overflow: auto;
+   display: flex;
+   flex-direction: column;
+   gap: 7px;
+}
+slice-eventmanager-debugger .events-list::-webkit-scrollbar { width: 8px; }
+slice-eventmanager-debugger .events-list::-webkit-scrollbar-thumb {
+   background: var(--si-raised-2);
+   border-radius: 8px;
+   border: 2px solid transparent;
+   background-clip: padding-box;
+}
+slice-eventmanager-debugger .events-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--si-accent-rgb), 0.4); background-clip: padding-box; }
+
+slice-eventmanager-debugger .event-row {
+   display: block;
+   padding: 9px 11px;
+   background: var(--si-raised);
+   border-radius: 9px;
+   border: 1px solid var(--si-border);
+   border-left: 2px solid transparent;
+   transition: border-color 0.18s ease, background 0.18s ease;
+}
+slice-eventmanager-debugger .event-row:hover { background: var(--si-raised-2); border-left-color: var(--si-accent); }
+
+slice-eventmanager-debugger .event-row summary {
+   display: flex;
+   align-items: center;
+   justify-content: space-between;
+   gap: 10px;
+   cursor: pointer;
+   list-style: none;
+}
+slice-eventmanager-debugger .event-row summary::-webkit-details-marker { display: none; }
+slice-eventmanager-debugger .event-row summary::after {
+   content: '›';
+   margin-left: auto;
+   color: var(--si-dim);
+   font-size: 15px;
+   line-height: 1;
+   transition: transform 0.2s ease, color 0.2s ease;
+}
+slice-eventmanager-debugger .event-row[open] summary::after { transform: rotate(90deg); color: var(--si-accent); }
+
+slice-eventmanager-debugger .event-name {
+   font-family: var(--si-mono);
+   font-size: 12px;
+   color: var(--si-text);
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
 
-      .subscriber-row {
-         display: flex;
-         justify-content: space-between;
-         gap: 8px;
-         padding: 6px 8px;
-         border-radius: 6px;
-         background: var(--primary-background-color);
-         border: 1px solid var(--medium-color);
-      }
+slice-eventmanager-debugger .event-count {
+   font-weight: 600;
+   font-size: 11px;
+   color: var(--si-accent);
+   background: rgba(var(--si-accent-rgb), 0.12);
+   border: 1px solid rgba(var(--si-accent-rgb), 0.25);
+   padding: 1px 8px;
+   border-radius: 999px;
+   min-width: 22px;
+   text-align: center;
+}
 
-      .subscriber-name {
-         font-size: 12px;
-         color: var(--font-primary-color);
-         overflow: hidden;
-         text-overflow: ellipsis;
-         white-space: nowrap;
-      }
+slice-eventmanager-debugger .subscriber-list {
+   margin-top: 9px;
+   padding-top: 9px;
+   border-top: 1px dashed var(--si-border);
+   display: flex;
+   flex-direction: column;
+   gap: 6px;
+}
 
-      .subscriber-meta {
-         font-size: 11px;
-         color: var(--font-secondary-color);
-         display: flex;
-         align-items: center;
-         gap: 6px;
-         white-space: nowrap;
-      }
+slice-eventmanager-debugger .subscriber-row {
+   display: flex;
+   justify-content: space-between;
+   align-items: center;
+   gap: 10px;
+   padding: 6px 9px;
+   border-radius: 7px;
+   background: rgba(0, 0, 0, 0.22);
+   border: 1px solid var(--si-border);
+}
 
-      .badge {
-         padding: 2px 6px;
-         border-radius: 999px;
-         background: var(--secondary-color);
-         color: var(--secondary-color-contrast);
-         font-size: 10px;
-         text-transform: uppercase;
-      }
+slice-eventmanager-debugger .subscriber-name {
+   font-size: 11.5px;
+   color: var(--si-text);
+   overflow: hidden;
+   text-overflow: ellipsis;
+   white-space: nowrap;
+}
 
-      .empty {
-         color: var(--font-secondary-color);
-         font-size: 12px;
-         text-align: center;
-         padding: 12px 0;
-      }
+slice-eventmanager-debugger .subscriber-meta {
+   font-size: 10.5px;
+   color: var(--si-dim);
+   display: flex;
+   align-items: center;
+   gap: 6px;
+   white-space: nowrap;
+}
+
+slice-eventmanager-debugger .badge {
+   padding: 1px 6px;
+   border-radius: 999px;
+   background: rgba(var(--si-accent-rgb), 0.16);
+   color: var(--si-accent);
+   border: 1px solid rgba(var(--si-accent-rgb), 0.3);
+   font-size: 9px;
+   letter-spacing: 0.06em;
+   text-transform: uppercase;
+}
+
+slice-eventmanager-debugger .empty {
+   color: var(--si-dim);
+   font-size: 11px;
+   letter-spacing: 0.04em;
+   text-align: center;
+   padding: 22px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+   slice-eventmanager-debugger #events-debugger.active { animation: none; }
+   slice-eventmanager-debugger .status-dot { animation: none; }
+}
       `;
    }
 }

package/Slice/Components/Structural/Router/Router.js

@@ -298,24 +298,42 @@ export default class Router {
    // ============================================
 
    /**
-    * Navigate to a route path with guards support. Add replace to do router.replace() instead of push.
+    * Navigate to a route path (guards run automatically).
     * @param {string} path
-    * @param {string[]} [_redirectChain]
-    * @param {{ replace?: boolean }} [_options]
+    * @param {{ replace?: boolean }} [options] - `{ replace: true }` replaces history instead of pushing.
     * @returns {Promise<void>}
     */
-   async navigate(path, _redirectChain = [], _options = {}) {
+   async navigate(path, options = {}, legacyOptions) {
+      // Backward compatibility with the previous signature navigate(path, _redirectChain, _options):
+      // if the 2nd argument is the internal redirect chain (an array) or a 3rd argument is passed,
+      // use the 3rd argument as the options object.
+      if (Array.isArray(options)) {
+         options = legacyOptions || {};
+      } else if (legacyOptions !== undefined) {
+         options = legacyOptions || options;
+      }
+      return this._navigateWithGuards(path, options || {}, []);
+   }
+
+   /**
+    * Internal navigation that tracks the guard redirection chain (loop protection).
+    * @param {string} path
+    * @param {{ replace?: boolean }} options
+    * @param {string[]} redirectChain
+    * @returns {Promise<void>}
+    */
+   async _navigateWithGuards(path, options, redirectChain) {
       const currentPath = window.location.pathname;
 
       // Detectar loops infinitos: si ya visitamos esta ruta en la cadena de redirecciones
-      if (_redirectChain.includes(path)) {
-         slice.logger.logError('Router', `Guard redirection loop detected: ${_redirectChain.join(' → ')} → ${path}`);
+      if (redirectChain.includes(path)) {
+         slice.logger.logError('Router', `Guard redirection loop detected: ${redirectChain.join(' → ')} → ${path}`);
          return;
       }
 
       // Límite de seguridad: máximo 10 redirecciones
-      if (_redirectChain.length >= 10) {
-         slice.logger.logError('Router', `Too many redirections: ${_redirectChain.join(' → ')} → ${path}`);
+      if (redirectChain.length >= 10) {
+         slice.logger.logError('Router', `Too many redirections: ${redirectChain.join(' → ')} → ${path}`);
          return;
       }
 
@@ -332,8 +350,7 @@ export default class Router {
 
       // Si el guard redirige
       if (guardResult && guardResult.path) {
-         const newChain = [..._redirectChain, path];
-         return this.navigate(guardResult.path, newChain, guardResult.options);
+         return this._navigateWithGuards(guardResult.path, guardResult.options || {}, [...redirectChain, path]);
       }
 
       // Si el guard cancela la navegación (next(false))
@@ -344,7 +361,7 @@ export default class Router {
 
       // No hay redirección - continuar con la navegación normal
       // Usar replace o push según las opciones
-      if (_options.replace) {
+      if (options.replace) {
          window.history.replaceState({}, path, window.location.origin + path);
       } else {
          window.history.pushState({}, path, window.location.origin + path);
@@ -466,7 +483,7 @@ export default class Router {
       const guardResult = await this._executeBeforeEachGuard(to, from);
 
       if (guardResult && guardResult.path) {
-         return this.navigate(guardResult.path, [], guardResult.options);
+         return this.navigate(guardResult.path, guardResult.options || {});
       }
 
       // Si el guard cancela la navegación inicial (caso raro pero posible)
@@ -662,7 +679,20 @@ export default class Router {
     * @returns {RouteMatch}
     */
    matchRoute(path) {
-      const exactMatch = this.pathToRouteMap.get(path);
+      // Normalize a trailing slash ('/about/' -> '/about'); keep root '/' as-is.
+      path = path.length > 1 ? path.replace(/\/+$/, '') : path;
+      // Exact match first (fast path), then a case-insensitive match on static paths
+      // so '/About' resolves to a route declared as '/about'.
+      let exactMatch = this.pathToRouteMap.get(path);
+      if (!exactMatch) {
+         const lowerPath = path.toLowerCase();
+         for (const [routePattern, route] of this.pathToRouteMap.entries()) {
+            if (!routePattern.includes('${') && routePattern.toLowerCase() === lowerPath) {
+               exactMatch = route;
+               break;
+            }
+         }
+      }
       if (exactMatch) {
          if (exactMatch.parentRoute) {
             return {
@@ -716,6 +746,7 @@ export default class Router {
          }) +
          '$';
 
-      return { regex: new RegExp(regexPattern), paramNames };
+      // 'i' flag: paths match case-insensitively. Captured param values keep their original case.
+      return { regex: new RegExp(regexPattern, 'i'), paramNames };
    }
 }

package/Slice/tests/props-allowed-values-validation.test.js

@@ -0,0 +1,119 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import { collectInvalidAllowedValueProps } from '../Components/Structural/Controller/allowedValuesValidation.js';
+
+test('collectInvalidAllowedValueProps returns empty when value is allowed', () => {
+  const result = collectInvalidAllowedValueProps(
+    {
+      variant: {
+        type: 'string',
+        allowedValues: ['primary', 'secondary']
+      }
+    },
+    {
+      variant: 'primary'
+    }
+  );
+
+  assert.deepEqual(result, []);
+});
+
+test('collectInvalidAllowedValueProps reports invalid provided values', () => {
+  const result = collectInvalidAllowedValueProps(
+    {
+      variant: {
+        type: 'string',
+        allowedValues: ['primary', 'secondary']
+      },
+      size: {
+        type: 'number',
+        allowedValues: [12, 16]
+      }
+    },
+    {
+      variant: 'danger',
+      size: 14
+    }
+  );
+
+  assert.deepEqual(result, [
+    {
+      propName: 'variant',
+      value: 'danger',
+      allowedValues: ['primary', 'secondary']
+    },
+    {
+      propName: 'size',
+      value: 14,
+      allowedValues: [12, 16]
+    }
+  ]);
+});
+
+test('collectInvalidAllowedValueProps ignores props not provided', () => {
+  const result = collectInvalidAllowedValueProps(
+    {
+      variant: {
+        type: 'string',
+        allowedValues: ['primary', 'secondary']
+      },
+      disabled: {
+        type: 'boolean'
+      }
+    },
+    {
+      disabled: true
+    }
+  );
+
+  assert.deepEqual(result, []);
+});
+
+test('collectInvalidAllowedValueProps uses strict equality', () => {
+  const result = collectInvalidAllowedValueProps(
+    {
+      amount: {
+        type: 'number',
+        allowedValues: [1]
+      },
+      active: {
+        type: 'boolean',
+        allowedValues: [true]
+      }
+    },
+    {
+      amount: '1',
+      active: 1
+    }
+  );
+
+  assert.deepEqual(result, [
+    {
+      propName: 'amount',
+      value: '1',
+      allowedValues: [1]
+    },
+    {
+      propName: 'active',
+      value: 1,
+      allowedValues: [true]
+    }
+  ]);
+});
+
+test('collectInvalidAllowedValueProps ignores empty allowedValues arrays', () => {
+  const result = collectInvalidAllowedValueProps(
+    {
+      variant: {
+        type: 'string',
+        allowedValues: []
+      }
+    },
+    {
+      variant: 'unexpected'
+    }
+  );
+
+  assert.deepEqual(result, []);
+});