@axzydev/axzy_ui_system 1.6.0 → 1.7.1

package/src/sandbox/axzyConfig.ts

@@ -0,0 +1,77 @@
+/**
+ * Configuración global del sandbox, leída de `/axzy.json`.
+ *
+ * El archivo es la fuente de verdad de lo que **no** es pantalla: tema, densidad,
+ * radios, sombras y apariencia. Se aplica al `ITThemeProvider` del host, así que
+ * cambiar un valor en el JSON cambia todo el sistema sin tocar código.
+ *
+ * El merge es puro y tolerante: lo que falte o venga mal se queda con el default.
+ */
+
+import type { ITThemeAppearance, ITThemePalette } from "../index";
+
+/** Lo que se puede configurar globalmente desde `axzy.json`. */
+export interface AxzyConfig {
+  /** Paleta parcial: se mezcla con la del sistema. */
+  theme: Partial<ITThemePalette>;
+  /** Densidad global (0.5–1.5). */
+  density: number;
+  /** Radio global en px (0–24). */
+  radius: number;
+  /** Nivel de sombra (0–3). */
+  shadow: number;
+  /** Lenguaje visual. */
+  appearance: ITThemeAppearance;
+  /** Muestra el botón flotante del diseñador de tema. */
+  showFab: boolean;
+}
+
+/** Configuración por defecto del sandbox (lo que se aplica si no hay archivo). */
+export const DEFAULT_AXZY_CONFIG: AxzyConfig = {
+  theme: {},
+  density: 0.98,
+  radius: 10,
+  shadow: 2,
+  appearance: "soft",
+  showFab: false,
+};
+
+/** Recorta un número a un rango; si no es número, devuelve el default. */
+function clamp(value: unknown, min: number, max: number, fallback: number, decimals = 2): number {
+  if (typeof value !== "number" || Number.isNaN(value)) return fallback;
+  const factor = 10 ** decimals;
+  return Math.round(Math.min(max, Math.max(min, value)) * factor) / factor;
+}
+
+/**
+ * Mezcla la configuración del archivo con los defaults.
+ *
+ * Nunca lanza: un archivo vacío, roto o con tipos raros deja los defaults.
+ *
+ * @example
+ * mergeAxzyConfig({ radius: 0, density: 1.4 }); // → radius 0, density 1.4, resto default
+ */
+export function mergeAxzyConfig(raw: unknown): AxzyConfig {
+  const entrada = (raw && typeof raw === "object" ? raw : {}) as Partial<AxzyConfig>;
+  const tema = (entrada.theme && typeof entrada.theme === "object" ? entrada.theme : {}) as Partial<ITThemePalette>;
+
+  return {
+    theme: {
+      ...(typeof tema.primary === "string" ? { primary: tema.primary } : {}),
+      ...(typeof tema.secondary === "string" ? { secondary: tema.secondary } : {}),
+      ...(typeof tema.ternary === "string" ? { ternary: tema.ternary } : {}),
+      ...(typeof tema.danger === "string" ? { danger: tema.danger } : {}),
+      ...(typeof tema.success === "string" ? { success: tema.success } : {}),
+      ...(typeof tema.info === "string" ? { info: tema.info } : {}),
+      ...(typeof tema.alert === "string" ? { alert: tema.alert } : {}),
+      ...(typeof tema.warning === "string" ? { warning: tema.warning } : {}),
+      ...(tema.layout && typeof tema.layout === "object" ? { layout: tema.layout } : {}),
+      ...(tema.table && typeof tema.table === "object" ? { table: tema.table } : {}),
+    },
+    density: clamp(entrada.density, 0.5, 1.5, DEFAULT_AXZY_CONFIG.density),
+    radius: clamp(entrada.radius, 0, 24, DEFAULT_AXZY_CONFIG.radius, 0),
+    shadow: clamp(entrada.shadow, 0, 3, DEFAULT_AXZY_CONFIG.shadow, 0),
+    appearance: entrada.appearance === "flat" || entrada.appearance === "soft" ? entrada.appearance : DEFAULT_AXZY_CONFIG.appearance,
+    showFab: typeof entrada.showFab === "boolean" ? entrada.showFab : DEFAULT_AXZY_CONFIG.showFab,
+  };
+}

package/src/sandbox/i18n.ts

@@ -17,9 +17,119 @@ export const sandboxMessages: ITMessagesByLocale = {
     "sandbox.themeSystem": "Sistema",
     "sandbox.notifications": "Notificaciones",
     "sandbox.nav.portfolio": "Portafolio",
+    "sandbox.nav.demo": "Demo en JSON",
     "sandbox.userMenu.portfolio": "Ir al Portafolio",
     "sandbox.search.label": "Buscar componentes",
     "sandbox.search.placeholder": "Buscar componente…",
+    "sandbox.loading": "Cargando…",
+    // Portafolio de demostración (pintado solo con JSON)
+    "sandbox.app.toast.saved": "Guardado",
+    "sandbox.app.toast.deleted": "Eliminado",
+    "sandbox.app.form.create": "Nuevo usuario",
+    "sandbox.app.form.edit": "Editar usuario",
+    "sandbox.app.form.name": "Nombre",
+    "sandbox.app.form.email": "Correo",
+    "sandbox.app.form.role": "Rol",
+    "sandbox.app.form.status": "Estado",
+    "sandbox.app.form.age": "Edad",
+    "sandbox.app.form.company": "Empresa",
+    "sandbox.app.form.since": "Alta",
+    "sandbox.app.form.shift": "Turno",
+    "sandbox.app.form.save": "Guardar",
+    "sandbox.app.form.cancel": "Cancelar",
+    "sandbox.app.form.delete": "Eliminar",
+    "sandbox.app.title": "Panel de demo",
+    "sandbox.app.exit": "Ver portafolio JSON",
+    "sandbox.app.nav.aria": "Páginas del dashboard",
+    "sandbox.app.sub.todos": "Todos",
+    "sandbox.app.sub.activos": "Activos",
+    "sandbox.app.sub.inactivos": "Inactivos",
+    "sandbox.app.sub.pendientes": "Pendientes",
+    "sandbox.app.nav.docs": "Documentación",
+    "sandbox.app.docs.pick": "Esquema",
+    "sandbox.app.docs.copy": "Copiar JSON",
+    "sandbox.app.docs.copied": "JSON copiado",
+    "sandbox.app.docs.copyError": "No se pudo copiar",
+    "sandbox.app.docs.steps": "Cómo se pinta un esquema",
+    "sandbox.app.docs.node": "Nodo",
+    "sandbox.app.docs.whole": "Esquema completo",
+    "sandbox.app.docs.readOnly": "Inspector · solo lectura",
+    "sandbox.app.docs.editable": "Editable",
+    "sandbox.app.docs.rules": "Reglas que no se negocian",
+    "sandbox.app.docs.rule1": "El esquema nunca ejecuta código, ni hace red, ni pinta HTML.",
+    "sandbox.app.docs.rule2": "Todo componente y toda acción salen de listas blancas del host.",
+    "sandbox.app.docs.rule3": "Un componente que falla se aísla: el resto de la pantalla sigue.",
+    "sandbox.app.nav.inicio": "Inicio",
+    "sandbox.app.nav.usuarios": "Usuarios",
+    "sandbox.app.nav.pedidos": "Pedidos",
+    "sandbox.app.nav.productos": "Productos",
+    "sandbox.app.nav.reportes": "Reportes",
+    "sandbox.app.sub.pagados": "Pagados",
+    "sandbox.app.productos.title": "Productos",
+    "sandbox.app.productos.lead": "Catálogo con SKU, precio, stock y categoría; la tabla pagina y ordena desde el host.",
+    "sandbox.app.reportes.title": "Reportes",
+    "sandbox.app.reportes.lead": "Indicadores del periodo y el detalle de pedidos que los sostiene.",
+    "sandbox.app.reportes.ticket": "Ticket promedio",
+    "sandbox.app.reportes.conversion": "Conversión",
+    "sandbox.app.valid": "Esquema válido",
+    "sandbox.app.partial": "Esquema parcial",
+    "sandbox.app.invalid": "Esquema inválido",
+    "sandbox.app.loading": "Cargando la página…",
+    "sandbox.app.loadError": "No se pudo cargar la página",
+    "sandbox.app.back": "Volver al inicio",
+    "sandbox.app.statUsers": "Usuarios",
+    "sandbox.app.statOrders": "Pedidos",
+    "sandbox.app.statRevenue": "Ingresos",
+    "sandbox.app.statPending": "Pendientes",
+    "sandbox.app.inicio.title": "Resumen operativo",
+    "sandbox.app.inicio.lead": "Cada página es un JSON: esta trae métricas y la tabla de pedidos recientes, que pide los datos al host con `$source`.",
+    "sandbox.app.inicio.ctaUsers": "Gestionar usuarios",
+    "sandbox.app.inicio.ctaOrders": "Ver pedidos",
+    "sandbox.app.inicio.recent": "Pedidos recientes",
+    "sandbox.app.inicio.recentLead": "Paginación, orden y filtros los resuelve la tabla; los datos, el host.",
+    "sandbox.app.usuarios.title": "Usuarios",
+    "sandbox.app.usuarios.lead": "La columna Nombre filtra y ordena; Rol y Estado filtran por catálogo. Todo declarado en el JSON.",
+    "sandbox.app.usuarios.new": "Nuevo usuario",
+    "sandbox.app.usuarios.active": "Activos",
+    "sandbox.app.usuarios.admins": "Admins",
+    "sandbox.app.usuarios.inactive": "Inactivos",
+    "sandbox.app.pedidos.title": "Pedidos",
+    "sandbox.app.pedidos.lead": "La columna Total usa el formateo de moneda de la tabla; el estado se filtra por catálogo.",
+    "sandbox.app.pedidos.new": "Nuevo pedido",
+    "sandbox.app.pedidos.paid": "Pagados",
+    "sandbox.app.pedidos.pending": "Pendientes",
+    "sandbox.app.pedidos.cancelled": "Cancelados",
+    "sandbox.demo.brand": "axzydev · portafolio en JSON",
+    "sandbox.demo.back": "Volver al sandbox",
+    "sandbox.demo.eyebrow": "Demo · motor de pantallas",
+    "sandbox.demo.title": "Del API a la interfaz: producto completo, en producción.",
+    "sandbox.demo.lead":
+      "Esta pantalla no tiene ni una línea de TSX: se carga un archivo JSON, se valida contra el catálogo y el motor la pinta. Todo lo que ves —layout, tarjetas, acciones e idioma— viene del esquema.",
+    "sandbox.demo.ctaProjects": "Ver proyectos",
+    "sandbox.demo.ctaContact": "Contacto",
+    "sandbox.demo.ctaPanel": "Abrir el panel",
+    "sandbox.demo.statExperience": "Experiencia",
+    "sandbox.demo.statProducts": "Productos",
+    "sandbox.demo.statTech": "Tecnologías",
+    "sandbox.demo.statMode": "Modalidad",
+    "sandbox.demo.statModeValue": "Remoto",
+    "sandbox.demo.projectsTitle": "Proyectos",
+    "sandbox.demo.projectsLead": "Cada tarjeta es un nodo del esquema; el botón pide una acción registrada por el host.",
+    "sandbox.demo.viewProject": "Ver detalle",
+    "sandbox.demo.p1.text": "Operación de seguridad: rondas con QR, incidencias y analítica de desempeño.",
+    "sandbox.demo.p1.alt": "CheckApp: panel de analítica de seguridad",
+    "sandbox.demo.p2.text": "63 componentes accesibles, temables y con i18n, publicados en npm.",
+    "sandbox.demo.p2.alt": "AXZY UI System: componentes en ejecución",
+    "sandbox.demo.p3.text": "Cliente HTTP para la terminal, con requests versionables en YAML y modo CI.",
+    "sandbox.demo.p3.alt": "axzy: cliente HTTP en la terminal",
+    "sandbox.demo.stackTitle": "Stack",
+    "sandbox.demo.stackLead": "Las etiquetas son nodos ITChip; añadir una es añadir un objeto al array.",
+    "sandbox.demo.contactTitle": "Contacto",
+    "sandbox.demo.contactLead": "Los botones no llevan URLs: piden acciones por nombre y el host decide a dónde van.",
+    "sandbox.demo.sendMail": "Escribir un correo",
+    "sandbox.demo.footer": "Asael Amaro · Fullstack Developer · Remoto, México",
+    "sandbox.demo.badge": "JSON válido",
+
     "sandbox.search.clear": "Limpiar búsqueda",
     "sandbox.search.results": "{count} resultados",
 
@@ -964,9 +1074,119 @@ export const sandboxMessages: ITMessagesByLocale = {
     "sandbox.themeSystem": "System",
     "sandbox.notifications": "Notifications",
     "sandbox.nav.portfolio": "Portfolio",
+    "sandbox.nav.demo": "JSON demo",
     "sandbox.userMenu.portfolio": "Go to portfolio",
     "sandbox.search.label": "Search components",
     "sandbox.search.placeholder": "Search component…",
+    "sandbox.loading": "Loading…",
+    // Demo portfolio (rendered from JSON only)
+    "sandbox.app.toast.saved": "Saved",
+    "sandbox.app.toast.deleted": "Deleted",
+    "sandbox.app.form.create": "New user",
+    "sandbox.app.form.edit": "Edit user",
+    "sandbox.app.form.name": "Name",
+    "sandbox.app.form.email": "Email",
+    "sandbox.app.form.role": "Role",
+    "sandbox.app.form.status": "Status",
+    "sandbox.app.form.age": "Age",
+    "sandbox.app.form.company": "Company",
+    "sandbox.app.form.since": "Since",
+    "sandbox.app.form.shift": "Shift",
+    "sandbox.app.form.save": "Save",
+    "sandbox.app.form.cancel": "Cancel",
+    "sandbox.app.form.delete": "Delete",
+    "sandbox.app.title": "Demo panel",
+    "sandbox.app.exit": "Open JSON portfolio",
+    "sandbox.app.nav.aria": "Dashboard pages",
+    "sandbox.app.sub.todos": "All",
+    "sandbox.app.sub.activos": "Active",
+    "sandbox.app.sub.inactivos": "Inactive",
+    "sandbox.app.sub.pendientes": "Pending",
+    "sandbox.app.nav.docs": "Documentation",
+    "sandbox.app.docs.pick": "Schema",
+    "sandbox.app.docs.copy": "Copy JSON",
+    "sandbox.app.docs.copied": "JSON copied",
+    "sandbox.app.docs.copyError": "Could not copy",
+    "sandbox.app.docs.steps": "How a schema is rendered",
+    "sandbox.app.docs.node": "Node",
+    "sandbox.app.docs.whole": "Whole schema",
+    "sandbox.app.docs.readOnly": "Inspector · read only",
+    "sandbox.app.docs.editable": "Editable",
+    "sandbox.app.docs.rules": "Rules that are not negotiable",
+    "sandbox.app.docs.rule1": "The schema never runs code, never fetches and never renders HTML.",
+    "sandbox.app.docs.rule2": "Every component and action comes from host whitelists.",
+    "sandbox.app.docs.rule3": "A component that fails is isolated: the rest of the screen keeps going.",
+    "sandbox.app.nav.inicio": "Home",
+    "sandbox.app.nav.usuarios": "Users",
+    "sandbox.app.nav.pedidos": "Orders",
+    "sandbox.app.nav.productos": "Products",
+    "sandbox.app.nav.reportes": "Reports",
+    "sandbox.app.sub.pagados": "Paid",
+    "sandbox.app.productos.title": "Products",
+    "sandbox.app.productos.lead": "Catalog with SKU, price, stock and category; the table paginates and sorts from the host.",
+    "sandbox.app.reportes.title": "Reports",
+    "sandbox.app.reportes.lead": "Period indicators and the order detail behind them.",
+    "sandbox.app.reportes.ticket": "Average ticket",
+    "sandbox.app.reportes.conversion": "Conversion",
+    "sandbox.app.valid": "Valid schema",
+    "sandbox.app.partial": "Partial schema",
+    "sandbox.app.invalid": "Invalid schema",
+    "sandbox.app.loading": "Loading the page…",
+    "sandbox.app.loadError": "The page could not be loaded",
+    "sandbox.app.back": "Back to home",
+    "sandbox.app.statUsers": "Users",
+    "sandbox.app.statOrders": "Orders",
+    "sandbox.app.statRevenue": "Revenue",
+    "sandbox.app.statPending": "Pending",
+    "sandbox.app.inicio.title": "Operations overview",
+    "sandbox.app.inicio.lead": "Every page is JSON: this one ships metrics and the recent orders table, which asks the host for data through `$source`.",
+    "sandbox.app.inicio.ctaUsers": "Manage users",
+    "sandbox.app.inicio.ctaOrders": "See orders",
+    "sandbox.app.inicio.recent": "Recent orders",
+    "sandbox.app.inicio.recentLead": "Pagination, sorting and filters are the table's job; the data is the host's.",
+    "sandbox.app.usuarios.title": "Users",
+    "sandbox.app.usuarios.lead": "The Name column filters and sorts; Role and Status filter by catalog. All declared in JSON.",
+    "sandbox.app.usuarios.new": "New user",
+    "sandbox.app.usuarios.active": "Active",
+    "sandbox.app.usuarios.admins": "Admins",
+    "sandbox.app.usuarios.inactive": "Inactive",
+    "sandbox.app.pedidos.title": "Orders",
+    "sandbox.app.pedidos.lead": "The Total column uses the table's currency formatting; status filters by catalog.",
+    "sandbox.app.pedidos.new": "New order",
+    "sandbox.app.pedidos.paid": "Paid",
+    "sandbox.app.pedidos.pending": "Pending",
+    "sandbox.app.pedidos.cancelled": "Cancelled",
+    "sandbox.demo.brand": "axzydev · portfolio in JSON",
+    "sandbox.demo.back": "Back to the sandbox",
+    "sandbox.demo.eyebrow": "Demo · screen engine",
+    "sandbox.demo.title": "From API to interface: a complete product, in production.",
+    "sandbox.demo.lead":
+      "This screen has no TSX at all: a JSON file is loaded, validated against the catalog and rendered by the engine. Everything you see —layout, cards, actions and language— comes from the schema.",
+    "sandbox.demo.ctaProjects": "See projects",
+    "sandbox.demo.ctaContact": "Contact",
+    "sandbox.demo.ctaPanel": "Open the panel",
+    "sandbox.demo.statExperience": "Experience",
+    "sandbox.demo.statProducts": "Products",
+    "sandbox.demo.statTech": "Technologies",
+    "sandbox.demo.statMode": "Work mode",
+    "sandbox.demo.statModeValue": "Remote",
+    "sandbox.demo.projectsTitle": "Projects",
+    "sandbox.demo.projectsLead": "Every card is a schema node; the button asks for an action registered by the host.",
+    "sandbox.demo.viewProject": "View details",
+    "sandbox.demo.p1.text": "Security operations: QR rounds, incidents and performance analytics.",
+    "sandbox.demo.p1.alt": "CheckApp: security analytics dashboard",
+    "sandbox.demo.p2.text": "63 accessible, themeable components with i18n, published on npm.",
+    "sandbox.demo.p2.alt": "AXZY UI System: components running",
+    "sandbox.demo.p3.text": "HTTP client for the terminal with YAML-versioned requests and a CI mode.",
+    "sandbox.demo.p3.alt": "axzy: HTTP client in the terminal",
+    "sandbox.demo.stackTitle": "Stack",
+    "sandbox.demo.stackLead": "Tags are ITChip nodes; adding one means adding an object to the array.",
+    "sandbox.demo.contactTitle": "Contact",
+    "sandbox.demo.contactLead": "Buttons carry no URLs: they ask for named actions and the host decides where they go.",
+    "sandbox.demo.sendMail": "Write an email",
+    "sandbox.demo.footer": "Asael Amaro · Fullstack Developer · Remote, Mexico",
+    "sandbox.demo.badge": "Valid JSON",
+
     "sandbox.search.clear": "Clear search",
     "sandbox.search.results": "{count} results",
 

package/src/sandbox/navigation.ts

@@ -104,6 +104,9 @@ export const SANDBOX_GROUPS: SandboxGroup[] = [
       { id: "toast", label: "ITToast" },
       { id: "loader", label: "ITLoader" },
       { id: "themeprovider", label: "ITThemeProvider" },
+      { id: "jsonscreen", label: "Motor de pantallas (nuevo)" },
+      { id: "jsonrenderer", label: "ITJsonRenderer (PoC)" },
+      { id: "jsoneditor", label: "ITJSONEditor" },
     ],
   },
 ];

package/src/sandbox/useHashRoute.ts

@@ -3,7 +3,7 @@ import { GROUP_SLUGS, groupBySlug, isValidItem } from "./navigation";
 import { PRODUCTOS } from "../showcases/productos";
 
 /** Top-level sandbox views. `home` is the portfolio, `producto` a project detail page. */
-export type SandboxView = "home" | "ui-system" | "producto";
+export type SandboxView = "home" | "ui-system" | "producto" | "demo";
 
 /** Parsed representation of `window.location.hash`. */
 export interface HashRoute {
@@ -17,6 +17,8 @@ export interface HashRoute {
   producto: string | null;
   /** Raw hash exactly as read from the URL (used by the 404 page). */
   raw: string;
+  /** Parámetros `?clave=valor` del hash (filtros persistentes). */
+  query: Record<string, string>;
   /** Whether the route resolved to a real page. `false` → render 404. */
   valid: boolean;
 }
@@ -39,7 +41,17 @@ function isValidProducto(id: string): boolean {
  */
 export function parseHash(hash: string): HashRoute {
   const raw = hash;
-  const clean = hash.startsWith("#") ? hash.slice(1) : hash;
+  const body = hash.startsWith("#") ? hash.slice(1) : hash;
+  const [clean, queryString = ""] = body.split("?");
+  const query: Record<string, string> = Object.fromEntries(
+    queryString
+      .split("&")
+      .filter(Boolean)
+      .map((par) => {
+        const [clave, valor = ""] = par.split("=");
+        return [decodeURIComponent(clave), decodeURIComponent(valor)];
+      })
+  );
   const parts = clean.split("/").filter(Boolean);
 
   if (parts[0] === "proyecto") {
@@ -50,24 +62,32 @@ export function parseHash(hash: string): HashRoute {
       item: null,
       producto,
       raw,
+      query,
       valid: Boolean(producto) && isValidProducto(producto as string),
     };
   }
 
+  if (parts[0] === "demo") {
+    if (parts[1] === "app") {
+      return { view: "demo", group: "app", item: parts[2] ?? "inicio", producto: null, raw, query, valid: parts.length <= 3 };
+    }
+    return { view: "demo", group: null, item: null, producto: null, raw, query, valid: parts.length === 1 };
+  }
+
   if (parts.length === 0 || parts[0] !== "ui-system") {
-    return { view: "home", group: null, item: null, producto: null, raw, valid: true };
+    return { view: "home", group: null, item: null, producto: null, raw, query, valid: true };
   }
 
   if (parts.length === 1) {
-    return { view: "ui-system", group: null, item: null, producto: null, raw, valid: true };
+    return { view: "ui-system", group: null, item: null, producto: null, raw, query, valid: true };
   }
 
   if (parts.length === 2) {
     const group = groupBySlug(parts[1]);
     if (!group) {
-      return { view: "ui-system", group: null, item: null, producto: null, raw, valid: false };
+      return { view: "ui-system", group: null, item: null, producto: null, raw, query, valid: false };
     }
-    return { view: "ui-system", group: group.id, item: null, producto: null, raw, valid: true };
+    return { view: "ui-system", group: group.id, item: null, producto: null, raw, query, valid: true };
   }
 
   if (parts.length === 3) {
@@ -79,13 +99,14 @@ export function parseHash(hash: string): HashRoute {
         item: null,
         producto: null,
         raw,
+        query,
         valid: false,
       };
     }
-    return { view: "ui-system", group: group.id, item: parts[2], producto: null, raw, valid: true };
+    return { view: "ui-system", group: group.id, item: parts[2], producto: null, raw, query, valid: true };
   }
 
-  return { view: "ui-system", group: null, item: null, producto: null, raw, valid: false };
+  return { view: "ui-system", group: null, item: null, producto: null, raw, query, valid: false };
 }
 
 /** Build a hash for a group/item pair, translating the group id to its slug. */
@@ -117,6 +138,8 @@ export interface UseHashRouteResult {
   goToProducto: (id: string, options?: GoToOptions) => void;
   /** Navigate back to the portfolio (strips the hash). */
   goToPortfolio: (options?: GoToOptions) => void;
+  /** Abre el portafolio de demostración pintado desde JSON (`#demo`). */
+  goToDemo: (options?: GoToOptions) => void;
 }
 
 /**
@@ -171,6 +194,13 @@ export function useHashRoute(): UseHashRouteResult {
     [navigate],
   );
 
+  const goToDemo = useCallback(
+    (options?: GoToOptions) => {
+      navigate("#demo", options);
+    },
+    [navigate],
+  );
+
   const goToPortfolio = useCallback((options?: GoToOptions) => {
     const url = `${window.location.pathname}${window.location.search}`;
     if (options?.replace) {
@@ -181,5 +211,5 @@ export function useHashRoute(): UseHashRouteResult {
     setRoute(parseHash(""));
   }, []);
 
-  return { route, goToItem, goToLanding, goToProducto, goToPortfolio };
+  return { route, goToItem, goToLanding, goToProducto, goToPortfolio, goToDemo };
 }