vortez 5.0.0-dev.19 → 5.0.1

package/build/utilities/Utilities.js

@@ -1,93 +1,99 @@
 /**
  * @author NetFeez <netfeez.dev@gmail.com>
- * @description add useful functions to the Vortez.
+ * @description Exports all utility classes and functions, providing a centralized access point for various helper methods used throughout the project.
+ * This includes:
+ * - file operations: `Utilities.File`.
+ * - object manipulation: `Utilities.Object`.
+ * - encoding: `Utilities.Encoding`.
+ * - time utilities: `Utilities.Time`.
+ * and more utilities.
  * @license Apache-2.0
  */
-import { promises as FSP } from "fs";
 import _Path from './Path.js';
 import _Env from './Env.js';
 import _ConsoleUI from './ConsoleUI.js';
 import _DebugUI from './DebugUI.js';
 import _Schema from './schema/Schema.js';
 import _Flatten from './Flatten.js';
+import _File from './File.js';
+import _Object from './Object.js';
+import _Encoding from './Encoding.js';
+import _Time from './Time.js';
 export { Path } from './Path.js';
 export { Env } from './Env.js';
 export { ConsoleUI } from './ConsoleUI.js';
 export { DebugUI } from './DebugUI.js';
 export { Schema } from './schema/Schema.js';
 export { Flatten } from './Flatten.js';
+export { File } from './File.js';
+export { Object } from './Object.js';
+export { Encoding } from './Encoding.js';
+export { Time } from './Time.js';
 export class Utilities {
     /**
-     * Checks if a file exists asynchronously.
-     * @param path - The path to the file.
-     * @returns A promise that resolves to `true` if the file exists, `false` otherwise.
+     * Checks if a file exists at the given path.
+     * @param path - The file path to check.
+     * @returns A promise that resolves to true if the file exists, false otherwise.
+     * @deprecated Use Utilities.File.exists instead.
      */
     static async fileExists(path) {
-        return FSP.access(path).then(() => true).catch(() => false);
+        return Utilities.File.exists(path);
     }
     /**
-     * Compares two objects recursively for deep equality.
-     * @param obj1 - The first object to compare.
-     * @param obj2 - The second object to compare.
-     * @returns A boolean indicating whether the objects are deeply equal or not.
+     * Checks if two values are deeply equal.
+     * @param obj1 - The first value to compare.
+     * @param obj2 - The second value to compare.
+     * @returns A boolean indicating if the values are deeply equal.
+     * @deprecated Use Utilities.Object.deepEqual instead.
      */
     static deepEqual(obj1, obj2) {
-        if (obj1 === obj2)
-            return true;
-        if (typeof obj1 !== typeof obj2 ||
-            obj1 === null || obj2 === null)
-            return false;
-        const keys1 = Object.keys(obj1);
-        const keys2 = Object.keys(obj2);
-        if (keys1.length !== keys2.length)
-            return false;
-        for (const key of keys1)
-            if (!keys2.includes(key) ||
-                !this.deepEqual(obj1[key], obj2[key]))
-                return false;
-        return true;
+        return Utilities.Object.deepEqual(obj1, obj2);
     }
     /**
-     * Flattens a nested object into a single-level object with dot notation keys.
+     * Flattens a nested object into a single-level object with dot-separated keys.
      * @param object - The object to flatten.
-     * @param depth - The maximum depth to which the object should be flattened.
-     * @returns The flattened object.
+     * @param depth - The maximum depth to flatten (default is 10).
+     * @returns A new object with flattened keys.
+     * @deprecated Use Utilities.Flatten.object instead.
      */
     static flattenObject(object, depth = 10) {
         return Utilities.Flatten.object(object, depth);
     }
     /**
-     * Reconstructs a nested object from a flattened object with dot notation keys.
-     * @template Result - The type of the unflattened object.
-     * @param obj - The flattened object to un flatten.
-     * @returns The unflattened object.
+     * Unflattens a flattened object back into its original nested structure.
+     * @param obj - The flattened object to unflatten.
+     * @returns A new object with the original nested structure.
+     * @deprecated Use Utilities.Flatten.unObject instead.
      */
     static unFlattenObject(obj) {
         return Utilities.Flatten.unObject(obj);
     }
     /**
-     * Pauses the execution of the program for a specified duration.
+     * Pauses execution for a specified duration.
      * @param ms - The number of milliseconds to sleep.
      * @returns A promise that resolves after the given time.
+     * @deprecated Use Utilities.Time.sleep instead.
      */
     static sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
+        return Utilities.Time.sleep(ms);
     }
     /**
      * Encodes a string to base64url format.
-     * @param data - The string that needs to be encoded.
+     * @param data - The string to encode.
      * @returns The base64url-encoded string.
+     * @deprecated Use Utilities.Encoding.base64UrlEncode instead.
      */
     static base64UrlEncode(data) {
-        return Buffer.from(data).toString('base64url');
+        return Utilities.Encoding.base64UrlEncode(data);
     }
     /**
      * Decodes a base64url-encoded string.
-     * @param data - The base64url-encoded string that needs to be decoded.
-     * @returns The decoded string.
+     * @param data - The base64url-encoded string to decode.
+     * @returns The decoded UTF-8 string.
+     * @deprecated Use Utilities.Encoding.base64UrlDecode instead.
      */
     static base64UrlDecode(data) {
-        return Buffer.from(data, 'base64url').toString('utf8');
+        return Utilities.Encoding.base64UrlDecode(data);
     }
 }
 (function (Utilities) {
@@ -97,6 +103,10 @@ export class Utilities {
     Utilities.DebugUI = _DebugUI;
     Utilities.Schema = _Schema;
     Utilities.Flatten = _Flatten;
+    Utilities.File = _File;
+    Utilities.Object = _Object;
+    Utilities.Encoding = _Encoding;
+    Utilities.Time = _Time;
 })(Utilities || (Utilities = {}));
 export default Utilities;
 //# sourceMappingURL=Utilities.js.map

package/build/utilities/Utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"Utilities.js","sourceRoot":"","sources":["../../src/utilities/Utilities.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Utilities.js","sourceRoot":"","sources":["../../src/utilities/Utilities.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,MAAM,WAAW,CAAC;AAC9B,OAAO,IAAI,MAAM,UAAU,CAAC;AAC5B,OAAO,UAAU,MAAM,gBAAgB,CAAC;AACxC,OAAO,QAAQ,MAAM,cAAc,CAAC;AACpC,OAAO,OAAO,MAAM,oBAAoB,CAAC;AACzC,OAAO,QAAQ,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,MAAM,WAAW,CAAC;AAC9B,OAAO,OAAO,MAAM,aAAa,CAAC;AAClC,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,KAAK,MAAM,WAAW,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,MAAM,OAAO,SAAS;IAClB;;;;;OAKG;IACI,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,IAAY;QACvC,OAAO,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,CAAC;IACD;;;;;;OAMG;IACI,MAAM,CAAC,SAAS,CAAC,IAAS,EAAE,IAAS;QACxC,OAAO,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IACD;;;;;;OAMG;IACI,MAAM,CAAC,aAAa,CAA0C,MAAS,EAAE,QAAW,EAAO;QAC9F,OAAO,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,MAAkC,EAAE,KAAK,CAAmC,CAAC;IACjH,CAAC;IACD;;;;;OAKG;IACI,MAAM,CAAC,eAAe,CAA2B,GAAQ;QAC5D,OAAO,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAS,GAAiC,CAAC,CAAC;IACjF,CAAC;IACD;;;;;OAKG;IACI,MAAM,CAAC,KAAK,CAAC,EAAU;QAC1B,OAAO,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACpC,CAAC;IACD;;;;;OAKG;IACI,MAAM,CAAC,eAAe,CAAC,IAAY;QACtC,OAAO,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;IACD;;;;;OAKG;IACI,MAAM,CAAC,eAAe,CAAC,IAAY;QACtC,OAAO,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IACpD,CAAC;CACJ;AACD,WAAiB,SAAS;IACR,cAAI,GAAG,KAAK,CAAC;IACb,aAAG,GAAG,IAAI,CAAC;IACX,mBAAS,GAAG,UAAU,CAAC;IACvB,iBAAO,GAAG,QAAQ,CAAC;IACnB,gBAAM,GAAG,OAAO,CAAC;IACjB,iBAAO,GAAG,QAAQ,CAAC;IACnB,cAAI,GAAG,KAAK,CAAC;IACb,gBAAM,GAAG,OAAO,CAAC;IACjB,kBAAQ,GAAG,SAAS,CAAC;IACrB,cAAI,GAAG,KAAK,CAAC;AA0C/B,CAAC,EApDgB,SAAS,KAAT,SAAS,QAoDzB;AACD,eAAe,SAAS,CAAC"}

package/changes.md

@@ -1,6 +1,7 @@
 # version (5.0.0)
 ## 📒 Notes
 - **Breaking Change**: The server's debugging interface has been refactored. Users interacting with the old `DebugUI` will need to adapt to the new `ServerDebug` module.
+- **Acknowledgment**: Special thanks to my girlfriend for helping identify a critical path traversal vulnerability before this stable release.
 ## ➕ Added
 - **(Utilities/DebugUI)**: Introduced a new generic, reusable `DebugUI` class for creating command-line interfaces.
 - **(Server/ServerDebug)**: Added a new `ServerDebug` module to provide server-specific commands, built upon the new generic `DebugUI`.
@@ -32,6 +33,10 @@
 - **(Server/WebSocket)**: Overhauled the WebSocket connection lifecycle for improved security and developer experience.
   - The `WebSocket` class no longer accepts connections in its constructor. Instead, it waits in a `pending` state.
   - Added `accept()` and `reject()` methods to give the framework full control over the connection handshake.
+- **(Server/Response)**: The `send()`, `sendJson()`, `sendFile()`, `sendFolder()`, and `sendTemplate()` methods are now **async** and return `Promise<void>`. **This is a breaking change.**
+  - All response methods now require `await` in calling code for proper error handling.
+  - Added `sendReadable()` for streaming responses with backpressure support via `stream/promises`.
+  - HTTP range requests (206 Partial Content) are now properly handled in streaming contexts.
 
 # version (4.1.0)
 ## ➕ Added

package/docs/ARCHITECTURE.md

@@ -0,0 +1,142 @@
+# Vortez Architecture Guide
+
+This document explains how Vortez works internally, how requests are processed end-to-end, and how teams can run it confidently in production.
+
+## Who This Is For
+
+- Engineers evaluating Vortez for backend and real-time workloads.
+- Teams onboarding to an existing Vortez codebase.
+- Contributors who need to understand extension points and runtime behavior.
+
+## System At A Glance
+
+```mermaid
+flowchart TD
+    A[Application Code] --> B[Vortez Server]
+    B --> C[Config]
+    B --> D[Router]
+    D --> E[HTTP Rules]
+    D --> F[WebSocket Rules]
+    E --> G[HttpMiddleware Pipeline]
+    F --> H[WsMiddleware Pipeline]
+    G --> I[Response Helpers]
+    H --> J[WebSocket Client]
+    I --> K[Template Engine]
+    B --> L[Logger Manager]
+    B --> M[Utilities]
+    B --> N[Beta Modules: JWT + Mail]
+```
+
+## Request Lifecycle (HTTP)
+
+```mermaid
+flowchart TD
+    A[Incoming HTTP request] --> B[Router.requestManager]
+    B --> C[Build Request object]
+    C --> D[Build Response object]
+    D --> E[Routing Algorithm route]
+    E --> F{Rule matched}
+    F -->|No| G[Response.sendError 404]
+    F -->|Yes| H[HttpRule.exec]
+    H --> I[Run HTTP middleware pipeline]
+    I --> J{Pipeline status}
+    J -->|Success| K[Route action executes]
+    J -->|Error| L[Error middleware or default handler]
+    K --> M[send/sendJson/sendFile/sendFolder/sendTemplate]
+    L --> N[ServerError or 500 response]
+```
+
+### Key behavior
+
+- Route parameters are extracted before action execution.
+- Middleware is snapshot-based at rule registration time.
+- If no route matches, Vortez returns a 404 error page.
+- File and folder responses include path-safety checks for traversal protection.
+
+## Request Lifecycle (WebSocket)
+
+```mermaid
+flowchart TD
+    A[Upgrade request] --> B[Router.upgradeManager]
+    B --> C[Build Request + WebSocket wrapper]
+    C --> D[Routing Algorithm route]
+    D --> E{Rule matched}
+    E -->|No| F[Reject 404]
+    E -->|Yes| G[WsRule.exec]
+    G --> H[Run WS middleware pipeline]
+    H --> I{Connection state}
+    I -->|pending and valid| J[Accept handshake]
+    I -->|error| K[Reject handshake]
+    J --> L[Route action executes]
+    L --> M[message/close/finish/error events]
+```
+
+### Key behavior
+
+- WS routes also support middleware and error middleware.
+- If middleware completes and state is pending, handshake is auto-accepted.
+- Errors before accept are converted into explicit handshake rejection.
+
+## Routing Strategies
+
+- FIFO
+  - First matching rule wins.
+  - Predictable registration-order behavior.
+  - Good default for simple APIs and deterministic route priority.
+- Tree
+  - Segment-based navigation through static, param, and wildcard nodes.
+  - Better scalability for large route maps.
+  - Falls back to rule test checks in optional-edge cases.
+
+## Configuration Model
+
+Configuration is schema-driven and normalized on startup.
+
+- Host, port, SSL
+- Routing algorithm selection
+- Templates for folder and error pages
+- Logging controls per channel
+
+This gives stable defaults while preserving explicit overrides.
+
+## Static Files And Templates
+
+- `sendFile` supports byte-range requests for media and binary responses.
+- `sendFolder` resolves paths inside a secured base directory.
+- `sendTemplate` uses Vortez template compilation with variable and block expansion.
+
+## Build And Test Pipeline
+
+```mermaid
+flowchart LR
+    A[npm run compile] --> B[scripts/compile.sh]
+    B --> C[tsc build to build/]
+    D[npm test] --> E[scripts/test.sh]
+    E --> F[tsc source]
+    F --> G[tsc tests]
+    G --> H[node build-tests/test.js]
+```
+
+## Operational Checklist For Production
+
+- Use HTTPS with valid key/certificate and explicit TLS termination strategy.
+- Configure reverse proxy headers if deploying behind load balancers.
+- Register global middleware before route registration.
+- Choose `Tree` algorithm for large route sets.
+- Define custom error and folder templates for consistent UX.
+- Enable structured log persistence and shipping to your observability stack.
+- Add health/readiness endpoints and graceful shutdown handling.
+- Run CI for compile + tests on every change.
+
+## Recommended Documentation Map
+
+To match industry-grade developer experience, keep docs split by user intent:
+
+- Getting Started: first server in 5 minutes.
+- Core Concepts: routing, middleware, request/response.
+- Production Guide: deployment, scaling, reliability.
+- Security Guide: SSL, headers, path safety, secrets.
+- API Reference: exported classes and methods.
+- Examples: REST API, static site, SPA/PWA, WebSocket chat.
+
+This architecture guide is the canonical high-level reference for that set.

package/global/style/template/error.css

@@ -0,0 +1,29 @@
+#error {
+    --color-bg: rgb(255,180,220);
+    --color-code: rgb(255,0,0);
+    --color-message: rgb(0,0,0);
+    --color-bg-image: rgba(255,0,0,0.1);
+
+    background: var(--color-bg);
+    height: 100%;
+    position: fixed;
+    width: 100%;
+    overflow: visible;
+    & > .content {
+        text-align: center;
+        width: 90%;
+        overflow: visible;
+    }
+    & > .code {
+        color: var(--color-code);
+        font-size: 3em;
+    }
+    & > .message {
+        color: var(--color-message);
+        font-size: 1em;
+        margin-bottom: 1em;
+    }
+    & > .loading {
+        width: 30%;
+    }
+}

package/global/style/template/folder.css

@@ -0,0 +1,79 @@
+#folder {
+    --color-bg: rgb(255,180,220);
+    --color-bg-content: rgba(255,0,0,0.1);
+    --color-bg-back: rgba(180,220,255,0.5);
+    --color-bg-back-action: rgba(180,220,255,0.75);
+    --color-bg-search: rgba(255,180,220,0.5);
+    --color-bg-search-action: rgba(255,180,220,0.75);
+    --color-bg-item: rgba(220,255,180,0.25);
+    --color-bg-item-action: rgba(220,255,180,0.5);
+    --color-border-search-action: rgb(180,220,255);
+
+    align-items: center;
+    background: var(--color-bg);
+    height: 100%;
+    overflow: visible scroll;
+    position: fixed;
+    width: 100%;
+
+    & > .content {
+        background: var(--color-bg-content);
+        border-radius: 2em;
+        margin-top: 2em;
+        padding: 2em;
+        text-align: center;
+        width: 70%;
+
+        & > .options {
+            display: flex;
+            text-align: start;
+            
+            & > #input-path:focus {
+                border: var(--color-border-search-action) 3px double;
+                margin: calc(0.5em - 3px);
+                outline: none;
+            }
+            & > #input-path:focus,
+            & > #input-change:hover  {
+                background: var(--color-bg-search-action);
+            }
+            & > #input-change {
+                cursor: pointer;
+            }
+            & > .back,
+            & > #input-path,
+            & > #input-change {
+                background: var(--color-bg-back);
+                border-radius: 1em;
+                color: rgb(0,0,0);
+                display: inline-block;
+                margin: 0.5em;
+                padding: 1em;
+                text-decoration: none;
+            }
+            & > #input-path,
+            & > #input-change {
+                background: var(--color-bg-search);
+                border: none;
+            }
+            & > .back:hover  {
+                background: var(--color-bg-back-action);
+            }
+        }
+        & > .list {
+            list-style: none;
+            & .item {
+                background: var(--color-bg-item);
+                border-radius: 1em;
+                color: rgb(0,0,0);
+                display: block;
+                margin: 0.25em;
+                padding: 1em;
+                text-decoration: none;
+                &:hover {
+                    background: var(--color-bg-item-action);
+                }
+            }
+        }
+    }
+}

package/global/{Style/Template/Template.css → style/template/template.css}

@@ -1,11 +1,11 @@
-@import './Folder.css';
-@import './Error.css';
+@import './folder.css';
+@import './error.css';
 
 * {
     padding: 0px;
     margin: 0px;
 }
-.Centrar-X {
+.center-X {
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -14,7 +14,7 @@
     height: 100%;
     overflow: visible;
 }
-.Centrar-Y {
+.center-Y {
     /* align-items: center; */
     display: flex;
     flex-direction: column;
@@ -23,7 +23,7 @@
     height: 100%;
     overflow: visible;
 }
-.Carga {
+.loading {
     align-items: center;
     animation: Entrada 0.2s linear 0s 1, Fluctuar 4s linear 1s infinite;
     background: var(--Color_Fondo);
@@ -36,70 +36,62 @@
     position: relative;
     width: 40%;
     z-index: 0;
-}
-.Carga .C_Fondo,
-.Carga .C_Fondo2 {
-    align-items: center;
-    background: var(--Color_Fondo, rgb(0,0,0));
-    border-radius: 50%;
-    box-sizing: content-box;
-    display: flex;
-    height: 96%;
-    justify-content: center;
-    overflow: hidden;
-    position: absolute;
-    width: 96%;
-}
-.Carga .C_Fondo2 {
-    height: 92%;
-    width: 92%;
-}
-.Carga .C_Logo {
-    /*background: var(--Color_Fondo) url('/Src/Recursos/Íconos/NetFeez-Labs/[Ícono] - SM - 960.png');
-    background-attachment: local;
-    background-position:center top;
-    background-repeat: no-repeat;
-    background-size: cover;
-    border-radius: 50%;
-    height: 0px;
-    padding-bottom: 100%;*/
-    animation: FluctuarImg 4s linear 0s infinite;
-    border-radius: 50%;
-    width: 100%;
-    height: 100%;
-}
-.Carga .C_Fondo::before,
-.Carga .C_Fondo::after,
-.Carga::before,
-.Carga::after {
-    animation: Girar 5s linear 0s infinite;
-    background: linear-gradient(90deg, rgb(100,100,0), rgb(0,100,180));
-    content: '';
-    height: 25%;
-    position: absolute;
-    width: 125%;
-    z-index: -1;
-}
-.Carga .C_Fondo::after,
-.Carga::after {
-    animation-direction: reverse;
-    animation-duration: 3s;
-    background: linear-gradient(0deg, rgb(255,0,255), rgb(0,255,0));
-    height: 125%;
-    width: 25%;
-}
-.Carga .C_Fondo::before,
-.Carga .C_Fondo::after {
-    background: linear-gradient(90deg, rgb(0,0,255), rgb(255,255,0));
-    animation-duration: 4s;
-    z-index: 0;
-}
-.Carga .C_Fondo::after {
-    background: linear-gradient(0deg, rgb(255,0,0), rgb(0,255,255));
-    animation-duration: 2s;
-    z-index: 0;
-}
 
+    & > .background-1,
+    & > .background-2 {
+        align-items: center;
+        background: var(--Color_Fondo, rgb(0,0,0));
+        border-radius: 50%;
+        box-sizing: content-box;
+        display: flex;
+        height: 96%;
+        justify-content: center;
+        overflow: hidden;
+        position: absolute;
+        width: 96%;
+    }
+    & > .background-2 {
+        height: 92%;
+        width: 92%;
+    }
+    & > .logo {
+        animation: FluctuarImg 4s linear 0s infinite;
+        border-radius: 50%;
+        width: 100%;
+        height: 100%;
+    }
+    & > .background-1::before,
+    & > .background-1::after,
+    &::before,
+    &::after {
+        animation: Girar 5s linear 0s infinite;
+        background: linear-gradient(90deg, rgb(100,100,0), rgb(0,100,180));
+        content: '';
+        height: 25%;
+        position: absolute;
+        width: 125%;
+        z-index: -1;
+    }
+    & > .background-1::after,
+    &::after {
+        animation-direction: reverse;
+        animation-duration: 3s;
+        background: linear-gradient(0deg, rgb(255,0,255), rgb(0,255,0));
+        height: 125%;
+        width: 25%;
+    }
+    & > .background-1::before,
+    & > .background-1::after {
+        background: linear-gradient(90deg, rgb(0,0,255), rgb(255,255,0));
+        animation-duration: 4s;
+        z-index: 0;
+    }
+    & > .background-1::after {
+        background: linear-gradient(0deg, rgb(255,0,0), rgb(0,255,255));
+        animation-duration: 2s;
+        z-index: 0;
+    }
+}
 @keyframes Entrada {
     0%   {opacity: 0;}
     100% {opacity: 1;}

package/global/template/error.vhtml

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/vortez:global/style/template/template.css">
+        <title>[Vortez] - {{status}}</title>
+    </head>
+    <body>
+        <div id="error" class="center-X center-Y">
+            <div class="content">
+                <h1 class="code">Status: {{status}}</h1>
+                <p class="message">{{message}}</p>
+                <div class="center-X center-Y">
+                    <div class="loading">
+                        <div class="background-1"></div>
+                        <div class="background-2"></div>
+                        <picture>
+                            <source srcset="/vortez:global/source/logo_SM_960.png"/>
+                            <source srcset="/favicon.ico"/>
+                            <img class="logo">
+                        </picture>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>

package/global/template/folder.vhtml

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/vortez:global/style/template/template.css">
+        <title>[Vortez] - Folder</title>
+    </head>
+    <body>
+        <div id="folder" class="center-X">
+            <div class="content">
+                <h1 class="path">Folder: {{Url}}</h1>
+                <div class="options">
+                    <vortez-if name="Url" condition="!=" expected="/">
+                        <a class="back" href="{{Url}}/../">Back</a>
+                    <vortez-else />
+                        <span class="back disabled">Back</span>
+                    </vortez-if>
+                    <input id="input-path" type="search" placeholder="enter the path... {{Url}}" value="{{Url}}"/>
+                    <input id="input-change"type="button" value="change"/>
+                </div>
+                <ul class="list">
+                    <vortez-each name="folder" value="name">
+                        <li>
+                            <vortez-if name="Url" condition="==" expected="/">
+                                <a class="item" href="./{{name}}">
+                                    <vortez-if name="name" condition="==" expected="style">
+                                        <span class="folder">[Folder]</span>
+                                    </vortez-if>
+                                    {{name}}
+                                </a>
+                            <vortez-else />
+                                <a class="item" href="{{Url}}/{{name}}">{{name}}</a>
+                            </vortez-if>
+                        </li>
+                    </vortez-each>
+                </ul>
+            </div>
+            <script>
+                const inputChange = document.querySelector('#input-change');
+                const inputPath = document.querySelector('#input-path');
+                inputChange.addEventListener('click', () => {
+                    window.location.href = inputPath.value;
+                });
+                inputPath.addEventListener('keydown', (event) => {
+                    inputPath.value.length <= '{{Url}}'.length && event.key == 'Backspace'
+                    ? event.preventDefault()
+                    : false;
+                })
+            </script>
+        </div>
+    </body>
+</html>