@axzydev/axzy_ui_system 1.6.0 → 1.7.0

package/src/index.css

@@ -169,4 +169,418 @@
   :where(.it-table-pinned-right) {
     box-shadow: inset 1px 0 0 0 var(--color-secondary-200);
   }
+
+  /* ── ITJSONEditor ────────────────────────────────────────────────────────
+     Editor de código sobre <textarea>: una capa con el JSON resaltado se pinta
+     debajo del textarea transparente. Las dos capas comparten tipografía y
+     `line-height`, y el alto de línea lo mide el componente en el DOM
+     (`--it-json-editor-line`), de ahí que aquí solo se fije la métrica. */
+  :where(.it-json-editor-canvas) {
+    --it-json-editor-line: 21px;
+    background: #fbfcfd;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"]) {
+    background: #0b1120;
+  }
+  :where(.dark .it-json-editor-canvas) {
+    background: #020617;
+  }
+
+  :where(.it-json-editor-code) {
+    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12.5px;
+    /* Misma métrica que el textarea: los dos consumen la variable que publica el
+       componente con el alto de línea real. */
+    line-height: var(--it-json-editor-line, 21px);
+    tab-size: 2;
+    color: #334155;
+  }
+  /* El relleno vive en `.it-json-editor-code`, que es la clase compartida por la
+     capa resaltada y el textarea: así las dos cajas de scroll tienen el mismo
+     contenido y desplazan igual, y el alto de cada línea es exactamente
+     `--it-json-editor-line` para que el gutter no se desincronice. */
+  :where(.it-json-editor-code) {
+    padding: 10px 12px;
+  }
+  :where(.it-json-editor-code-line) {
+    white-space: pre;
+  }
+  :where(.it-json-editor-highlight) {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-code) {
+    color: #cbd5e1;
+  }
+
+  /* Textarea: texto transparente y cursor visible, encima de la capa pintada.
+     Las métricas de texto van declaradas **aquí** y no heredadas de
+     `.it-json-editor-code`: el textarea no es hijo de esa capa, así que sin esto
+     usa la tipografía de la página y el caret del navegador deja de coincidir
+     con el glifo pintado (el clic cae en otro carácter). */
+  :where(.it-json-editor-textarea) {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border: 0;
+    resize: none;
+    outline: none;
+    background: transparent;
+    color: transparent;
+    caret-color: #2563eb;
+    -webkit-text-fill-color: transparent;
+    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12.5px;
+    line-height: var(--it-json-editor-line, 21px);
+    tab-size: 2;
+    letter-spacing: normal;
+    padding: 10px 12px;
+    white-space: pre;
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-textarea) {
+    caret-color: #7dd3fc;
+  }
+  :where(.it-json-editor-textarea)::placeholder {
+    color: #94a3b8;
+    -webkit-text-fill-color: #94a3b8;
+  }
+  :where(.it-json-editor-textarea)::selection {
+    background: rgb(37 99 235 / 0.25);
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-textarea)::selection {
+    background: rgb(125 211 252 / 0.25);
+  }
+  :where(.it-json-editor-nowrap) {
+    white-space: pre;
+    overflow: auto;
+  }
+
+  /* Gutter: números y controles de plegado, con la misma rejilla que el código. */
+  :where(.it-json-editor-gutter),
+  :where(.it-json-editor-linenumbers) {
+    background: rgb(148 163 184 / 0.08);
+    border-right: 1px solid rgb(148 163 184 / 0.22);
+  }
+  :where(.it-json-editor-gutter-row) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+  :where(.it-json-editor-fold) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin: 2px 1px 0 0;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-fold) {
+    color: #94a3b8;
+  }
+  :where(.it-json-editor-fold:hover) {
+    background: rgb(148 163 184 / 0.25);
+    color: #1d4ed8;
+  }
+  :where(.it-json-editor-fold:focus-visible) {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 1px;
+  }
+  :where(.it-json-editor-linenumber) {
+    padding-right: 10px;
+    padding-left: 10px;
+    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 11px;
+    line-height: var(--it-json-editor-line);
+    text-align: right;
+    color: #94a3b8;
+    white-space: pre;
+  }
+  :where(.it-json-editor-linenumber--active) {
+    color: #1d4ed8;
+    font-weight: 600;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-linenumber) {
+    color: #64748b;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-linenumber--active) {
+    color: #7dd3fc;
+  }
+
+  /* Fondos de línea (cursor y error). */
+  :where(.it-json-editor-active-line) {
+    z-index: 0;
+    background: rgb(37 99 235 / 0.06);
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-active-line) {
+    background: rgb(148 197 253 / 0.07);
+  }
+  :where(.it-json-editor-error-line) {
+    z-index: 0;
+    background: rgb(244 63 94 / 0.12);
+    box-shadow: inset 2px 0 0 0 var(--color-danger-500);
+  }
+
+  /* Tokens del resaltado. */
+  :where(.it-json-editor-tk-key) {
+    color: #0369a1;
+  }
+  :where(.it-json-editor-tk-string) {
+    color: #047857;
+  }
+  :where(.it-json-editor-tk-number) {
+    color: #b45309;
+  }
+  :where(.it-json-editor-tk-keyword),
+  :where(.it-json-editor-tk-null) {
+    color: #7c3aed;
+  }
+  :where(.it-json-editor-tk-punct) {
+    color: #64748b;
+  }
+  :where(.it-json-editor-tk-plain) {
+    color: #b91c1c;
+    text-decoration: underline wavy rgb(185 28 28 / 0.5);
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-key) {
+    color: #7dd3fc;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-string) {
+    color: #86efac;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-number) {
+    color: #fcd34d;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-keyword),
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-null) {
+    color: #c4b5fd;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-punct) {
+    color: #94a3b8;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-plain) {
+    color: #fda4af;
+    text-decoration: underline wavy rgb(253 164 175 / 0.5);
+  }
+  :where(.it-json-editor-fold-marker) {
+    margin-left: 6px;
+    padding: 0 4px;
+    border-radius: 4px;
+    background: rgb(148 163 184 / 0.2);
+    font-size: 10.5px;
+    color: #64748b;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-fold-marker) {
+    color: #94a3b8;
+  }
+
+  /* Botonera de la barra superior. */
+  :where(.it-json-editor-tool) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 24px;
+    padding: 0 8px;
+    border: 1px solid var(--color-secondary-200);
+    border-radius: 6px;
+    background: transparent;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-secondary-600);
+    cursor: pointer;
+    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
+  }
+  :where(.dark .it-json-editor-tool) {
+    border-color: var(--color-secondary-800);
+    color: var(--color-secondary-300);
+  }
+  :where(.it-json-editor-tool:hover:not(:disabled)) {
+    border-color: var(--color-primary-400);
+    background: var(--color-primary-50);
+    color: var(--color-primary-700);
+  }
+  :where(.dark .it-json-editor-tool:hover:not(:disabled)) {
+    border-color: var(--color-primary-500);
+    background: rgb(37 99 235 / 0.15);
+    color: var(--color-primary-300);
+  }
+  :where(.it-json-editor-tool:disabled) {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+  :where(.it-json-editor-tool:focus-visible) {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 1px;
+  }
+
+  /* Conmutador texto/árbol. */
+  :where(.it-json-editor-segment) {
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--color-secondary-200);
+    border-radius: 6px;
+    overflow: hidden;
+  }
+  :where(.dark .it-json-editor-segment) {
+    border-color: var(--color-secondary-800);
+  }
+  :where(.it-json-editor-segment-item) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 24px;
+    padding: 0 8px;
+    border: 0;
+    background: transparent;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--color-secondary-500);
+    cursor: pointer;
+  }
+  :where(.it-json-editor-segment-item--active) {
+    background: var(--color-primary-600);
+    color: #ffffff;
+  }
+  :where(.it-json-editor-segment-item:focus-visible) {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: -2px;
+  }
+
+  /* Interruptores de la fila de ajustes. */
+  :where(.it-json-editor-toggle) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    border: 0;
+    background: transparent;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 10px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-secondary-400);
+    cursor: pointer;
+  }
+  :where(.it-json-editor-toggle--on) {
+    color: var(--color-primary-700);
+  }
+  :where(.dark .it-json-editor-toggle--on) {
+    color: var(--color-primary-300);
+  }
+  :where(.it-json-editor-toggle-dot) {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: currentColor;
+    opacity: 0.4;
+  }
+  :where(.it-json-editor-toggle--on .it-json-editor-toggle-dot) {
+    opacity: 1;
+  }
+  :where(.it-json-editor-toggle:focus-visible) {
+    outline: 2px solid var(--color-primary-500);
+    outline-offset: 1px;
+  }
+
+  /* Árbol navegable. */
+  :where(.it-json-editor-tree) {
+    height: 100%;
+  }
+  :where(.it-json-editor-tree-spacer) {
+    display: inline-block;
+    width: 14px;
+    flex-shrink: 0;
+  }
+  :where(.it-json-editor-tk-value) {
+    color: #334155;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tk-value) {
+    color: #cbd5e1;
+  }
+  :where(.it-json-editor-tree-row) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 20px;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 11.5px;
+    line-height: 1.5;
+    color: #334155;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tree-row) {
+    color: #cbd5e1;
+  }
+  :where(.it-json-editor-tree-row:hover) {
+    background: rgb(148 163 184 / 0.12);
+  }
+  :where(.it-json-editor-tree-toggle) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: #64748b;
+    cursor: pointer;
+  }
+  :where(.it-json-editor-tree-badge) {
+    padding: 0 5px;
+    border-radius: 999px;
+    background: rgb(148 163 184 / 0.18);
+    font-size: 9.5px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: #64748b;
+  }
+  :where(.it-json-editor-canvas[data-canvas="ink"] .it-json-editor-tree-badge) {
+    color: #94a3b8;
+  }
+  :where(.it-json-editor-tree-jump) {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    margin-left: auto;
+    padding: 0 5px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    font-family: "JetBrains Mono", ui-monospace, monospace;
+    font-size: 9.5px;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #64748b;
+    cursor: pointer;
+    opacity: 0;
+  }
+  :where(.it-json-editor-tree-row:hover .it-json-editor-tree-jump),
+  :where(.it-json-editor-tree-jump:focus-visible) {
+    opacity: 1;
+  }
+  :where(.it-json-editor-tree-jump:hover) {
+    background: var(--color-primary-50);
+    color: var(--color-primary-700);
+  }
+  :where(.dark .it-json-editor-tree-jump:hover) {
+    background: rgb(37 99 235 / 0.2);
+    color: var(--color-primary-300);
+  }
 }

package/src/index.ts

@@ -6,6 +6,7 @@ import { useDebouncedSearch } from "./hooks/useDebouncedSearch";
 import { useEditableRow } from "./hooks/useEditableRow";
 import { useFloatingPanel } from "./hooks/useFloatingPanel";
 import { useTableState, UseTableStateOptions, UseTableStateResult } from "./hooks/useTableState";
+import useJsonRender from "./hooks/useJsonRender";
 
 // COMPONENTES
 import ITAccordion from "./components/molecules/accordion/accordion";
@@ -62,6 +63,8 @@ import ITTabs from "./components/molecules/tabs/tabs";
 import ITTripleFilter from "./components/organisms/triple-filter/tripleFilter";
 import ITToast from "./components/organisms/toast/toast";
 import ITWysiwyg from "./components/molecules/wysiwyg/wysiwyg";
+import ITJsonRenderer from "./components/molecules/json-renderer/json-renderer";
+import ITJSONEditor from "./components/molecules/json-editor/json-editor";
 
 // PROPS
 import type { ITAlertProps } from "./components/molecules/alert/alert.props";
@@ -118,6 +121,8 @@ import type { ITTabsProps, ITTabItem } from "./components/molecules/tabs/tabs.pr
 import type { ITTripleFilterProps, ITTripleFilterOption } from "./components/organisms/triple-filter/tripleFilter.props";
 import type { ITToastProps } from "./components/organisms/toast/toast.props";
 import type { ITWysiwygProps } from "./components/molecules/wysiwyg/wysiwyg.props";
+import type { ITJsonRendererProps, JsonComponentNode, JsonComponentType } from "./components/molecules/json-renderer/json-renderer.props";
+import type { ITJSONEditorProps } from "./components/molecules/json-editor/json-editor.props";
 import type { FieldConfig, FieldConfigV2 } from "./types/field.types";
 import type { ColumnFilters, ColumnFilterValue, TableColors, TableDensity, TableDesign, TableDesignProps, TableDesignSlot } from "./types/table.types";
 
@@ -144,7 +149,7 @@ import type { ITI18nProviderProps, ITI18nValue, ITLocale, ITMessages, ITMessages
 
 export {
   // Hooks
-  useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useTableState,
+  useClickOutside, useDebouncedSearch, useEditableRow, useFloatingPanel, useTableState, useJsonRender,
   createValidationSchema,
   // Components
   ITAccordion,
@@ -162,7 +167,8 @@ export {
   useITTheme, useITThemeSafe, useITFlatAppearance, ITTimePicker, ITToast, ITWysiwyg,
   UploadStatus, FileTypeEnum,
   getContrastTextColor, isLightColor, resolveCssColor,
-  ITI18nProvider, useITTranslation, esMessages, enMessages
+  ITI18nProvider, useITTranslation, esMessages, enMessages,
+  ITJsonRenderer, ITJSONEditor
 };
 
   export type {
@@ -195,6 +201,8 @@ export {
     ITTripleFilterProps, ITTripleFilterOption, ITThemeConfig, ITThemeProviderProps, ITThemePalette, ITThemeAppearance,
     ITTimePickerProps, ITToastProps,
     ITWysiwygProps,
+    ITJsonRendererProps, JsonComponentNode, JsonComponentType,
+    ITJSONEditorProps,
     UseTableStateOptions, UseTableStateResult
   };
 

package/src/sandbox/AxzyLogo.tsx

@@ -0,0 +1,139 @@
+/**
+ * Marca axzydev para el sitio (sandbox + portafolio).
+ *
+ * Vive en `src/sandbox/` a propósito: es chrome del sitio, **no** un componente
+ * publicado. Los assets son los SVG del kit (`axzydev-brand-kit/logos/svg`)
+ * copiados a `public/brand/`; no hay dependencias nuevas ni animaciones Lottie.
+ *
+ * El wordmark elige su variante según el tema resuelto: `logo-color` (tinta
+ * navy sobre claro) o `logo-dark` (texto claro sobre oscuro), de modo que el
+ * logo se lee en ambos modos sin recolorear nada a mano.
+ *
+ * @example
+ * ```tsx
+ * <AxzyLogo variante="icono" tamano={24} />            // navbar / topbar
+ * <AxzyLogo variante="wordmark" tamano={260} />        // hero / footer
+ * <AxzyLogo variante="loader" tamano={40} etiqueta="Cargando" />
+ * ```
+ */
+
+import { useITThemeSafe } from "@/theme/theme-context";
+
+/** Forma del logo: solo ícono, wordmark completo o loader de marca. */
+export type AxzyLogoVariante = "icono" | "wordmark" | "loader";
+
+/** Props de `AxzyLogo`. */
+export interface AxzyLogoProps {
+  /** Forma del logo. @default "wordmark" */
+  variante?: AxzyLogoVariante;
+  /** Ancho en píxeles. El alto se calcula solo por la proporción del SVG. @default 28 (icono/loader) · 240 (wordmark) */
+  tamano?: number;
+  /** Fuerza el tono del wordmark en lugar de seguir el tema. */
+  tono?: "claro" | "oscuro";
+  /**
+   * Texto alternativo del logo. Por defecto `"axzydev"` para el wordmark y
+   * `""` (decorativo) para el ícono, que suele ir acompañado del nombre.
+   */
+  etiqueta?: string;
+  /** Clases del elemento raíz. */
+  className?: string;
+  /** Anima el ícono con un latido suave cuando `variante="loader"`. Respeta `prefers-reduced-motion`. */
+  latido?: boolean;
+}
+
+/** Ruta del asset según la forma y el tono. */
+const ASSETS: Record<AxzyLogoVariante, { claro: string; oscuro: string }> = {
+  icono: { claro: "/brand/icon.svg", oscuro: "/brand/icon.svg" },
+  wordmark: { claro: "/brand/logo-color.svg", oscuro: "/brand/logo-dark.svg" },
+  loader: { claro: "/brand/icon.svg", oscuro: "/brand/icon.svg" },
+};
+
+/** Alto por defecto según la forma (el wordmark es 621×208). */
+const ALTO_POR_TAMANO: Record<AxzyLogoVariante, number> = {
+  icono: 28,
+  wordmark: 240,
+  loader: 40,
+};
+
+/**
+ * Marca axzydev del sitio: SVG del kit, conmutada por tema y sin dependencias.
+ *
+ * @example
+ * ```tsx
+ * <AxzyLogo variante="icono" tamano={24} />
+ * <AxzyLogo variante="wordmark" tamano={260} className="mb-6" />
+ * ```
+ */
+export const AxzyLogo = ({
+  variante = "wordmark",
+  tamano,
+  tono,
+  etiqueta,
+  className = "",
+  latido = true,
+}: AxzyLogoProps) => {
+  const contexto = useITThemeSafe();
+  const modo = tono ?? (contexto?.resolvedTheme === "dark" ? "oscuro" : "claro");
+  const ancho = tamano ?? ALTO_POR_TAMANO[variante];
+
+  // El ícono mide 128×128; el wordmark, 621×208. El alto sale de la proporción.
+  const alto = variante === "icono" || variante === "loader" ? ancho : Math.round((ancho * 208) / 621);
+  const decorativo = etiqueta === "" || (etiqueta === undefined && variante !== "wordmark");
+  const alt = etiqueta ?? (variante === "wordmark" ? "axzydev" : "");
+
+  return (
+    <img
+      src={ASSETS[variante][modo]}
+      width={ancho}
+      height={alto}
+      alt={alt}
+      aria-hidden={decorativo || undefined}
+      draggable={false}
+      className={[
+        "select-none",
+        variante === "loader" && latido ? "it-logo-latido" : "",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      style={{ width: ancho, height: alto }}
+    />
+  );
+};
+
+/**
+ * Loader de marca: el ícono latiendo con un rótulo mono al lado.
+ *
+ * Es la versión estática del `loader` del kit (que allí es una animación Lottie)
+ * y se apoya en `ITLoader` para la etiqueta y el rol accesible.
+ *
+ * @example
+ * ```tsx
+ * <AxzyLoader etiqueta="Cargando componentes" />
+ * ```
+ */
+export const AxzyLoader = ({
+  etiqueta,
+  tamano = 32,
+  className = "",
+}: {
+  /** Texto que acompaña al ícono. */
+  etiqueta?: string;
+  /** Ancho del ícono en píxeles. @default 32 */
+  tamano?: number;
+  /** Clases del contenedor. */
+  className?: string;
+}) => (
+  <span
+    role="status"
+    aria-live="polite"
+    className={`inline-flex items-center gap-3 ${className}`}
+  >
+    <AxzyLogo variante="loader" tamano={tamano} />
+    {etiqueta ? (
+      <span className="font-mono text-[11px] uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">
+        {etiqueta}
+      </span>
+    ) : null}
+  </span>
+);

package/src/sandbox/i18n.ts

@@ -20,6 +20,7 @@ export const sandboxMessages: ITMessagesByLocale = {
     "sandbox.userMenu.portfolio": "Ir al Portafolio",
     "sandbox.search.label": "Buscar componentes",
     "sandbox.search.placeholder": "Buscar componente…",
+    "sandbox.loading": "Cargando…",
     "sandbox.search.clear": "Limpiar búsqueda",
     "sandbox.search.results": "{count} resultados",
 
@@ -967,6 +968,7 @@ export const sandboxMessages: ITMessagesByLocale = {
     "sandbox.userMenu.portfolio": "Go to portfolio",
     "sandbox.search.label": "Search components",
     "sandbox.search.placeholder": "Search component…",
+    "sandbox.loading": "Loading…",
     "sandbox.search.clear": "Clear search",
     "sandbox.search.results": "{count} results",
 

package/src/sandbox/navigation.ts

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

package/src/showcases/FeedbackShowcases.tsx

@@ -15,6 +15,7 @@ import {
 import { PRESETS } from "../components/theme-provider/themePresets";
 import { ShowcaseLayout } from "./ShowcaseLayout";
 import { useITTranslation } from "@/i18n";
+import { AxzyLoader, AxzyLogo } from "@/sandbox/AxzyLogo";
 
 // 1. ITDialog Showcase
 export const DialogShowcase = () => {
@@ -237,11 +238,21 @@ export const LoaderShowcase = () => {
         </>
       }
       gallery={
-        <div className="flex flex-wrap items-center gap-6">
-          <ITLoader variant="spinner" size="md" color="primary" />
-          <ITLoader variant="dots" size="md" color="success" />
-          <div className="w-32"><ITLoader variant="bar" size="md" color="danger" /></div>
-          <ITLoader variant="pulse" size="md" color="purple" />
+        <div className="space-y-6">
+          <div className="flex flex-wrap items-center gap-6">
+            <ITLoader variant="spinner" size="md" color="primary" />
+            <ITLoader variant="dots" size="md" color="success" />
+            <div className="w-32"><ITLoader variant="bar" size="md" color="danger" /></div>
+            <ITLoader variant="pulse" size="md" color="purple" />
+          </div>
+
+          {/* Loader de marca: el ícono axzydev con un latido suave. En el kit la
+              versión animada es Lottie; aquí se usa el SVG estático. */}
+          <div className="flex flex-wrap items-center gap-8 border-t border-slate-200 pt-6 dark:border-slate-800">
+            <AxzyLoader etiqueta={t("sandbox.loading")} />
+            <AxzyLoader etiqueta={t("sandbox.loading")} tamano={24} />
+            <AxzyLogo variante="loader" tamano={56} etiqueta="axzydev" />
+          </div>
         </div>
       }
       doc={{