@axzydev/axzy_ui_system 1.6.0 → 1.7.1

package/src/showcases/HomeShowcase.tsx

@@ -27,6 +27,7 @@ import {
   VolverArriba,
 } from "./portfolioUi";
 import { useITTranslation } from "@/i18n";
+import { AxzyLogo } from "@/sandbox/AxzyLogo";
 
 const CV_URL = "/Martin_Amaro_CV_ES_2026.pdf";
 const GITHUB_URL = "https://github.com/maag070208";
@@ -125,9 +126,7 @@ const PortfolioNav = () => {
       <nav aria-label={t("showcase.home.sectionNav")} className={HOJA}>
         <div className="flex h-14 items-center gap-4">
           <a href="#sobre-mi" className="flex items-center gap-2.5">
-            <span className="grid h-6 w-6 place-items-center rounded-[6px] bg-primary-700 font-mono !text-[10px] !font-bold text-white">
-              AA
-            </span>
+            <AxzyLogo variante="icono" tamano={24} />
             <ITText
               as="span"
               className="hidden font-display !text-[13px] !font-bold -tracking-[0.01em] text-slate-900 dark:text-white sm:block"
@@ -441,6 +440,10 @@ export const HomeShowcase = () => {
               </a>
             </ITFlex>
 
+            <ITFlex align="center" className="it-reveal !mt-8">
+              <AxzyLogo variante="wordmark" tamano={300} />
+            </ITFlex>
+
             <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_auto] lg:gap-14">
               <div className="min-w-0">
                 <ITText
@@ -783,12 +786,16 @@ export const HomeShowcase = () => {
         <div
           className={`${HOJA} flex flex-col items-start justify-between gap-3 py-7 sm:flex-row sm:items-center`}
         >
-          <ITText
-            as="p"
-            className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
-          >
-            {`Asael Amaro · ${t("showcase.home.role")}`}
-          </ITText>
+          <div className="flex items-center gap-4">
+            <AxzyLogo variante="wordmark" tamano={190} />
+            <span aria-hidden="true" className="h-8 w-px bg-slate-200 dark:bg-slate-800" />
+            <ITText
+              as="p"
+              className="font-mono !text-[11px] uppercase !tracking-[0.14em] text-slate-500 dark:text-slate-400"
+            >
+              {`Asael Amaro · ${t("showcase.home.role")}`}
+            </ITText>
+          </div>
           <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
             <ITText
               as="span"

package/src/showcases/JsonEditorShowcase.tsx

@@ -0,0 +1,150 @@
+import React, { useMemo, useState } from "react";
+import { ITCard, ITJSONEditor, ITFlex } from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+/** Documento de arranque de la demo. */
+const initial = `[
+  {
+    "type": "card",
+    "props": { "title": "Demo JSON Editor" },
+    "children": [
+      { "type": "text", "text": "Edita este JSON y mira el preview" },
+      { "type": "button", "props": { "label": "Aceptar" } }
+    ]
+  }
+]`;
+
+export const JsonEditorShowcase: React.FC = () => {
+  const [value, setValue] = useState(initial);
+
+  /** Un documento más grande para que luzcan el plegado y el árbol. */
+  const bigDocument = useMemo(
+    () =>
+      JSON.stringify(
+        {
+          app: "axzy-ui-system",
+          version: "1.6.0",
+          layers: {
+            atoms: ["button", "input", "text", "flex", "grid", "stack"],
+            molecules: ["card", "alert", "table", "json-editor"],
+            organisms: ["data-table", "dialog", "sidebar", "navbar"],
+          },
+          flags: { darkMode: true, i18n: true, a11y: true, treeView: true },
+          limits: { maxDepth: 12, maxNodes: 5000, timeout: null },
+        },
+        null,
+        2
+      ),
+    []
+  );
+
+  const code = `<ITJSONEditor
+  value={json}
+  onChange={setJson}
+  onParse={handleParse}
+  mode="text"          // "text" | "tree"
+  indentSize={2}       // 0 | 2 | 4 | 8
+  height={420}
+  showToolbar
+  showViewSettings
+  showValidation
+  showStatusBar
+  showFoldGutter
+  showLineNumbers
+/>`;
+
+  return (
+    <ShowcaseLayout
+      title="ITJSONEditor"
+      description="Editor JSON con resaltado, gutter plegable, errores por línea/columna y árbol navegable. Sin dependencias nuevas."
+      demo={
+        <ITFlex direction="column" gap={4} className="w-full">
+          <ITJSONEditor id="json-editor-demo" value={value} onChange={setValue} height={420} indentSize={2} />
+        </ITFlex>
+      }
+      gallery={
+        <ITFlex direction="column" gap={4} className="w-full">
+          <ITCard title="Vista de árbol (mode=&quot;tree&quot;)">
+            <ITJSONEditor
+              value={bigDocument}
+              readOnly
+              mode="tree"
+              treeShowLines
+              height={320}
+              showToolbar={false}
+              showViewSettings={false}
+            />
+          </ITCard>
+          <ITCard title="Documento grande con plegado">
+            <ITJSONEditor value={bigDocument} onChange={() => undefined} height={320} />
+          </ITCard>
+          <ITCard title="Lienzo claro y ajuste de línea (canvasTheme=&quot;light&quot;, wrapLines)">
+            <ITJSONEditor
+              value={bigDocument}
+              readOnly
+              canvasTheme="light"
+              wrapLines
+              height={260}
+              showTransformActions={false}
+              showImportButton={false}
+            />
+          </ITCard>
+          <ITCard title="Estado de error: línea y columna señaladas">
+            <ITJSONEditor
+              value={'{\n  "a": 1,\n  "b": ,\n  "c": 3\n}'}
+              height={220}
+              showStatusBar
+            />
+          </ITCard>
+        </ITFlex>
+      }
+      code={code}
+      doc={{
+        summary: "Editor JSON para prototipar con ITJsonRenderer",
+        description:
+          "El resaltado se pinta en una capa bajo un textarea nativo, así que conserva el deshacer del navegador y no añade dependencias. Valida con JSON.parse y traduce el error a línea y columna.",
+        examples: [
+          '<ITJSONEditor value={json} onChange={setJson} />',
+          '<ITJSONEditor value={json} mode="tree" treeShowLines />',
+          '<ITJSONEditor value={json} indentSize={4} wrapLines canvasTheme="light" />',
+          '<ITJSONEditor value={json} readOnly showToolbar={false} height="100%" />',
+        ],
+        props: [
+          { name: "value", type: "string", default: '""', description: "Documento JSON como cadena." },
+          { name: "onChange", type: "(v: string) => void", default: "—", description: "Se dispara con el texto completo en cada cambio." },
+          { name: "onParse", type: "(parsed, isValid, error?) => void", default: "—", description: "Valor parseado y estado tras cada validación." },
+          { name: "mode", type: '"text" | "tree"', default: '"text"', description: "Modo inicial del lienzo." },
+          { name: "showModeSwitch", type: "boolean", default: "true", description: "Conmutador texto/árbol en la barra." },
+          { name: "showToolbar", type: "boolean", default: "true", description: "Barra superior de acciones." },
+          { name: "showViewSettings", type: "boolean", default: "true", description: "Fila de ajustes de vista." },
+          { name: "showValidation", type: "boolean", default: "true", description: "Indicador válido/ inválido con L:C." },
+          { name: "showStatusBar", type: "boolean", default: "true", description: "Pie con líneas, nodos, profundidad y tamaño." },
+          { name: "showLineNumbers", type: "boolean", default: "true", description: "Números de línea en el gutter." },
+          { name: "showFoldGutter", type: "boolean", default: "true", description: "Gutter de plegado de bloques." },
+          { name: "showTransformActions", type: "boolean", default: "true", description: "Formatear, minificar, ordenar, escapar." },
+          { name: "showCopyButton", type: "boolean", default: "true", description: "Botón de copiar el documento." },
+          { name: "showImportButton", type: "boolean", default: "true", description: "Carga de un archivo .json." },
+          { name: "showDownloadButton", type: "boolean", default: "true", description: "Descarga del documento." },
+          { name: "indentSize", type: "number", default: "2", description: "Espacios por nivel (0, 2, 4 u 8)." },
+          { name: "wrapLines", type: "boolean", default: "false", description: "Ajuste de línea dentro del ancho." },
+          { name: "treeShowLines", type: "boolean", default: "false", description: "Muestra la línea de cada nodo y permite saltar." },
+          { name: "canvasTheme", type: '"ink" | "light"', default: '"ink"', description: "Paleta del lienzo de código." },
+          { name: "height", type: "number | string", default: "340", description: "Alto del área de edición." },
+          { name: "readOnly", type: "boolean", default: "false", description: "Solo lectura, sin acciones de edición." },
+          { name: "actions", type: "ReactNode", default: "—", description: "Acciones propias al final de la barra." },
+          { name: "className", type: "string", default: "—", description: "Clases del contenedor raíz." },
+          { name: "textareaClassName", type: "string", default: "—", description: "Clases extra del textarea." },
+          { name: "errorLine", type: "number", default: "—", description: "Línea a marcar como errónea desde fuera." },
+        ],
+        notes: [
+          "Atajos: Tab indenta el bloque, Mayús+Tab lo desangra, Mayús+Alt+F formatea, +M minifica y +S ordena.",
+          "Las llaves, corchetes y comillas se cierran solos y se borran por parejas.",
+          "Con wrapLines activo el resaltado de línea vigente se desactiva: la posición dependería de las vueltas de cada línea.",
+          "Es totalmente independiente de ITJsonRenderer: los une solo el JSON que tú les pases.",
+        ],
+      }}
+    />
+  );
+};
+
+export default JsonEditorShowcase;

package/src/showcases/JsonRendererShowcase.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { ITCard, ITJsonRenderer } from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+const exampleWithChildren = [
+  {
+    type: "alert" as const,
+    props: { variant: "info" as const, title: "Información" },
+    text: "Esto se renderiza desde JSON",
+  },
+  {
+    type: "card" as const,
+    props: { title: "Tarjeta desde JSON" },
+    children: [
+      { type: "text" as const, text: "Contenido dentro de la tarjeta" },
+      {
+        type: "flex" as const,
+        props: { gap: 2, justify: "end" as const },
+        children: [
+          { type: "button" as const, props: { label: "Cancelar", color: "gray" as const, variant: "outlined" as const } },
+          { type: "button" as const, props: { label: "Aceptar", color: "primary" as const } },
+        ],
+      },
+    ],
+  },
+];
+
+export const JsonRendererShowcase: React.FC = () => {
+  const [jsonText, setJsonText] = useState(JSON.stringify(exampleWithChildren, null, 2));
+
+  let parsed: any = exampleWithChildren;
+  try {
+    parsed = JSON.parse(jsonText);
+  } catch {
+    parsed = exampleWithChildren;
+  }
+
+  return (
+    <ShowcaseLayout
+      title="ITJsonRenderer"
+      description="Renderiza componentes del UI System a partir de un JSON."
+      doc={{
+        summary: "PoC: Builder JSON para AXZY UI System",
+        description:
+          "Permite construir interfaces pasándole un árbol JSON con type, props, children/text.",
+        examples: [
+          '<ITJsonRenderer json={{ type: "button", props: { label: "Click" } }} />',
+        ],
+        props: [],
+      }}
+      demo={
+        <ITCard title="Preview">
+          <ITJsonRenderer json={parsed} />
+        </ITCard>
+      }
+      code={jsonText}
+      controls={
+        <ITCard title="JSON Editor (editable)">
+          <textarea
+            value={jsonText}
+            onChange={(e) => setJsonText(e.target.value)}
+            className="w-full h-64 font-mono text-sm border rounded p-3"
+          />
+        </ITCard>
+      }
+    />
+  );
+};
+
+export default JsonRendererShowcase;

package/src/showcases/JsonScreenShowcase.tsx

@@ -0,0 +1,341 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FaBolt, FaBug, FaCheck, FaTrashAlt } from "react-icons/fa";
+import {
+  ITAlert,
+  ITBadget,
+  ITButton,
+  ITCard,
+  ITFlex,
+  ITJSONEditor,
+  ITSchemaRenderer,
+  ITText,
+  type JsonEngineIssue,
+  type ScreenSchema,
+  parsePartialSchema,
+  axzyCatalogTypes,
+} from "../index";
+import { ShowcaseLayout } from "./ShowcaseLayout";
+
+/** Esquema de ejemplo: usa el catálogo real y muestra permisos y estado. */
+const EJEMPLO: ScreenSchema = {
+  version: 1,
+  id: "laboratorio",
+  title: "Pantalla de ejemplo",
+  content: [
+    {
+      type: "ITFlex",
+      props: { align: "center", justify: "between", wrap: "wrap", gap: 3 },
+      children: [
+        {
+          type: "ITFlex",
+          props: { align: "center", gap: 2 },
+          children: [
+            { type: "ITBadget", props: { label: "Motor", color: "primary" } },
+            { type: "ITText", props: { muted: true }, text: "Esquema interpretado en vivo" },
+          ],
+        },
+        {
+          type: "ITButton",
+          props: { label: "Acción declarada", color: "primary", size: "sm", onClick: { action: "saludar" } },
+        },
+      ],
+    },
+    {
+      type: "ITGrid",
+      props: { container: true, spacing: 3 },
+      children: [
+        {
+          type: "ITGrid",
+          props: { item: true, md: 6 },
+          children: [
+            {
+              type: "ITCard",
+              props: { title: "Listo para pintar" },
+              children: [
+                { type: "ITText", text: "Este árbol viene de un JSON, no de TSX." },
+                { type: "ITProgress", props: { value: 64, max: 100, size: "sm" } },
+              ],
+            },
+          ],
+        },
+        {
+          type: "ITGrid",
+          props: { item: true, md: 6 },
+          children: [
+            {
+              type: "ITAlert",
+              props: { variant: "info", title: "Casos cubiertos" },
+              children: [{ type: "ITText", text: "Si algo no está en el catálogo, se avisa y no se pinta." }],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+/** Texto inicial del editor: el esquema anterior, formateado. */
+const TEXTO_INICIAL = JSON.stringify(EJEMPLO, null, 2);
+
+/** Velocidad del stream simulado (caracteres por tick). */
+const CHUNK = 6;
+
+/**
+ * Laboratorio del motor de pantallas declarativas.
+ *
+ * Izquierda: el esquema en `ITJSONEditor`. Derecha: lo que pinta el motor. El
+ * botón «emitir como stream» escribe el esquema carácter a carácter para ver el
+ * render progresivo y comprobar que lo pendiente no se pinta a medias.
+ *
+ * @example
+ * // Ruta del sandbox: #ui-system/feedback/jsonscreen
+ */
+export const JsonScreenShowcase: React.FC = () => {
+  const [texto, setTexto] = useState(TEXTO_INICIAL);
+  const [streaming, setStreaming] = useState(false);
+  const [emitido, setEmitido] = useState(TEXTO_INICIAL.length);
+  const [avisos, setAvisos] = useState<JsonEngineIssue[]>([]);
+  const timer = useRef<number | null>(null);
+
+  /** Estado del esquema: mientras se emite, se parsea en modo tolerante. */
+  const estado = useMemo(() => {
+    if (!streaming) {
+      try {
+        const completo = JSON.parse(texto) as ScreenSchema;
+        return { tree: completo, status: "complete" as const, pending: 0, roto: false };
+      } catch {
+        return { tree: null, status: "complete" as const, pending: 0, roto: true };
+      }
+    }
+    const parcial = parsePartialSchema(texto);
+    return {
+      tree: parcial.tree,
+      status: parcial.status,
+      pending: parcial.pendingNodes,
+      roto: parcial.broken,
+    };
+  }, [texto, streaming]);
+
+  /** Detiene el stream y limpia el temporizador. */
+  const detener = useCallback(() => {
+    if (timer.current !== null) {
+      window.clearInterval(timer.current);
+      timer.current = null;
+    }
+    setStreaming(false);
+  }, []);
+
+  useEffect(() => () => detener(), [detener]);
+
+  /** Emite el esquema carácter a carácter, como haría un modelo. */
+  const emitirStream = useCallback(() => {
+    detener();
+    setAvisos([]);
+    setEmitido(0);
+    setTexto("");
+    setStreaming(true);
+
+    const total = TEXTO_INICIAL;
+    let cursor = 0;
+
+    timer.current = window.setInterval(() => {
+      cursor = Math.min(total.length, cursor + CHUNK);
+      setTexto(total.slice(0, cursor));
+      setEmitido(cursor);
+      if (cursor >= total.length) {
+        window.clearInterval(timer.current as number);
+        timer.current = null;
+        setStreaming(false);
+      }
+    }, 24);
+  }, [detener]);
+
+  /** Registro de acciones del host: el esquema solo puede pedir estos nombres. */
+  const resolveAction = useCallback(
+    () => () => {
+      window.alert("Acción declarada ejecutada por el host.");
+    },
+    []
+  );
+
+  const registrarAviso = useCallback((issue: JsonEngineIssue) => {
+    setAvisos((previos) =>
+      previos.some((item) => item.code === issue.code && item.path === issue.path)
+        ? previos
+        : [...previos, issue].slice(-8)
+    );
+  }, []);
+
+  const codigo = `<ITSchemaRenderer
+  schema={parsePartialSchema(texto).tree}
+  onIssue={(issue) => registrar(issue)}
+  resolveAction={() => actions[accion]}
+  pendingFallback={<ITSkeleton />}
+/>`;
+
+  return (
+    <ShowcaseLayout
+      title="Motor de pantallas"
+      description="ITSchemaRenderer interpreta un esquema JSON contra un catálogo de componentes con lista blanca. Pinta mientras el esquema llega por trozos, avisa con código y ruta, y aísla los nodos que fallan."
+      demo={
+        <div className="grid w-full gap-4 xl:grid-cols-[minmax(0,380px)_minmax(0,1fr)]">
+          <div className="min-w-0">
+            <ITCard title="Esquema (JSON)">
+              <ITJSONEditor value={texto} onChange={setTexto} height={420} readOnly={streaming} />
+            </ITCard>
+          </div>
+          <div className="min-w-0">
+            <ITCard title="Pantalla resultante">
+              <div className="min-h-[420px]">
+                {estado.roto && !estado.tree ? (
+                  <ITAlert variant="error" title="El esquema no es JSON válido">
+                    Corrige el texto de la izquierda para volver a pintar.
+                  </ITAlert>
+                ) : (
+                  <ITSchemaRenderer
+                    schema={estado.tree}
+                    onIssue={registrarAviso}
+                    resolveAction={resolveAction}
+                    pendingFallback={<ITText muted>·</ITText>}
+                  />
+                )}
+              </div>
+
+              <ITFlex align="center" gap={2} wrap="wrap" className="mt-4 border-t border-slate-200 pt-3 dark:border-slate-800">
+                <ITButton
+                  label={streaming ? "Emitiendo…" : "Emitir como stream"}
+                  icon={<FaBolt size={10} />}
+                  size="sm"
+                  color="primary"
+                  onClick={emitirStream}
+                  disabled={streaming}
+                />
+                <ITButton
+                  label="Documentación del motor"
+                  icon={<FaBolt size={10} />}
+                  size="sm"
+                  variant="text"
+                  color="gray"
+                  onClick={() => {
+                    window.location.hash = "#demo/app/docs";
+                  }}
+                />
+                <ITButton
+                  label="Ver panel (sistema completo)"
+                  icon={<FaBolt size={10} />}
+                  size="sm"
+                  color="primary"
+                  onClick={() => {
+                    window.location.hash = "#demo/app/inicio";
+                  }}
+                />
+                <ITButton
+                  label="Ver portafolio de demo"
+                  icon={<FaBolt size={10} />}
+                  size="sm"
+                  variant="outlined"
+                  color="gray"
+                  onClick={() => {
+                    window.location.hash = "#demo";
+                  }}
+                />
+                <ITButton
+                  label="Reiniciar"
+                  icon={<FaTrashAlt size={10} />}
+                  size="sm"
+                  variant="outlined"
+                  color="gray"
+                  onClick={() => {
+                    detener();
+                    setTexto(TEXTO_INICIAL);
+                    setEmitido(TEXTO_INICIAL.length);
+                    setAvisos([]);
+                  }}
+                />
+                <ITText
+                  as="span"
+                  className="font-mono !text-[10px] uppercase !tracking-[0.12em]"
+                  muted
+                >
+                  {streaming
+                    ? `stream ${emitido}/${TEXTO_INICIAL.length} · ${estado.pending} nodos pendientes`
+                    : `esquema completo · ${axzyCatalogTypes.length} tipos en el catálogo`}
+                </ITText>
+              </ITFlex>
+
+              {avisos.length > 0 && (
+                <div className="mt-3 space-y-1.5">
+                  <ITFlex align="center" gap={1.5}>
+                    <FaBug size={10} className="text-amber-500" />
+                    <ITText
+                      as="span"
+                      className="font-mono !text-[10px] uppercase !tracking-[0.12em]"
+                      muted
+                    >
+                      Avisos del motor
+                    </ITText>
+                  </ITFlex>
+                  {avisos.map((aviso) => (
+                    <ITFlex
+                      key={`${aviso.code}-${aviso.path}`}
+                      align="start"
+                      gap={2}
+                      className="rounded-[6px] border border-slate-200 px-2 py-1.5 dark:border-slate-800"
+                    >
+                      <ITBadget
+                        label={aviso.code}
+                        color={aviso.severity === "error" ? "danger" : "warning"}
+                        size="sm"
+                      />
+                      <div className="min-w-0">
+                        <p className="text-[11px] leading-snug text-slate-700 dark:text-slate-300">{aviso.message}</p>
+                        <p className="font-mono text-[10px] text-slate-500 dark:text-slate-400">{aviso.path || "raíz"}</p>
+                      </div>
+                    </ITFlex>
+                  ))}
+                </div>
+              )}
+
+              {!streaming && avisos.length === 0 && (
+                <ITFlex align="center" gap={1.5} className="mt-3">
+                  <FaCheck size={10} className="text-emerald-500" />
+                  <ITText as="span" className="font-mono !text-[10px] uppercase !tracking-[0.12em]" muted>
+                    Sin avisos: el esquema cabe entero en el catálogo
+                  </ITText>
+                </ITFlex>
+              )}
+            </ITCard>
+          </div>
+        </div>
+      }
+      code={codigo}
+      doc={{
+        summary: "Ejecuta un esquema JSON contra el catálogo de componentes, con lista blanca y avisos.",
+        description:
+          "El esquema se trata como entrada no confiable: un tipo fuera del catálogo no rompe la pantalla, una prop prohibida se ignora con aviso y un componente que lanza queda aislado. Durante el stream, los nodos pendientes no se pintan a medias.",
+        examples: [
+          '<ITSchemaRenderer schema={{ version: 1, id: "demo", content: { type: "ITText", text: "Hola" } }} />',
+          '<ITSchemaRenderer schema={parsePartialSchema(tokens).tree} pendingFallback={<ITSkeleton />} />',
+          '<ITSchemaRenderer schema={schema} onIssue={(issue) => console.warn(issue.code, issue.path)} />',
+        ],
+        props: [
+          { name: "schema", type: "ScreenSchema | null", required: true, description: "Esquema de pantalla; admite árbol parcial." },
+          { name: "catalog", type: "Catalog", default: "axzyCatalog", description: "Componentes y props permitidos." },
+          { name: "limits", type: "Partial<EngineLimits>", default: "—", description: "Presupuesto de nodos, profundidad y tiempos." },
+          { name: "resolveValue", type: "(value, path) => unknown", default: "—", description: "Resuelve referencias ($state, $param…)." },
+          { name: "resolveAction", type: "(node, prop, action, path) => fn", default: "—", description: "Traduce acciones declaradas a handlers del host." },
+          { name: "pendingFallback", type: "ReactNode", default: "—", description: "Qué pintar mientras un nodo está pendiente." },
+          { name: "onIssue", type: "(issue) => void", default: "—", description: "Avisos con código y ruta." },
+          { name: "className", type: "string", default: "—", description: "Clases del contenedor raíz." },
+        ],
+        notes: [
+          `El catálogo de esta fase expone ${axzyCatalogTypes.length} tipos con lista blanca de props.`,
+          "Códigos de aviso: JR010 tipo fuera del catálogo · JR011 prop ignorada · JR012 nodo aislado · JR013 presupuesto excedido.",
+          "Pulsa «Emitir como stream» para ver el render progresivo: lo pendiente no se pinta a medias.",
+        ],
+      }}
+    />
+  );
+};
+
+export default JsonScreenShowcase;

package/src/showcases/StructureShowcases.tsx

@@ -37,6 +37,7 @@ import type { ITSidebarProps } from "../index";
 import { ShowcaseLayout, CodeViewer } from "./ShowcaseLayout";
 import { EjemploContenedor } from "@/sandbox/ui";
 import { useITTranslation } from "@/i18n";
+import { AxzyLogo } from "@/sandbox/AxzyLogo";
 
 // ─────────────────────────────────────────
 // 1. ITCard Showcase
@@ -972,7 +973,7 @@ export const LayoutShowcase = () => {
   const [navActiveId, setNavActiveId] = useState<string | null>("1");
 
   const topBar = {
-    logo: <div className="w-9 h-9 rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold">A</div>,
+    logo: <AxzyLogo variante="icono" tamano={36} etiqueta="" />,
     logoText: "AXZY Console",
     centerContent: (
       <input
@@ -1155,6 +1156,7 @@ export const LayoutShowcase = () => {
             numero="02"
             titulo={t("showcase.structure.galleryNavbarStandalone")}
             codigo={`<ITNavbar
+  logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
   logoText="AXZY"
   navigationItems={[
     { id: "1", label: "Inicio", icon: <FaHome />, isActive: true },
@@ -1169,6 +1171,7 @@ export const LayoutShowcase = () => {
           >
             <div className="h-[380px] overflow-hidden [&>div]:!h-full">
               <ITNavbar
+                logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
                 logoText="AXZY"
                 navigationItems={navbarItems}
                 userMenu={{
@@ -1197,6 +1200,7 @@ export const LayoutShowcase = () => {
             numero="03"
             titulo={t("showcase.structure.galleryNavbarSubmenus")}
             codigo={`<ITNavbar
+  logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
   logoText="Admin"
   navigationItems={[
     { id: "u", label: "Usuarios", icon: <FaUsers /> },
@@ -1215,6 +1219,7 @@ export const LayoutShowcase = () => {
           >
             <div className="h-[380px] overflow-hidden [&>div]:!h-full">
               <ITNavbar
+                logo={<AxzyLogo variante="icono" tamano={28} etiqueta="" />}
                 logoText="Admin"
                 navigationItems={[
                   { id: "u", label: t("showcase.structure.navUsers"), icon: <FaUsers /> },