@axzydev/axzy_ui_system 1.5.3 → 1.7.0

package/src/components/molecules/json-editor/useJsonEditorKeyboard.ts

@@ -0,0 +1,256 @@
+import { useCallback, type KeyboardEvent, type RefObject } from "react";
+
+/** Resultado de una operación de edición sobre el textarea. */
+interface EditResult {
+  /** Texto completo resultante. */
+  value: string;
+  /** Inicio de la selección final. */
+  selectionStart: number;
+  /** Fin de la selección final. */
+  selectionEnd: number;
+  /** Si el manejador consumió el evento (hay que hacer `preventDefault`). */
+  handled: boolean;
+}
+
+/**
+ * Ajustes del hook de edición.
+ *
+ * No recibe el `value` por props a propósito: lee el documento del propio
+ * `<textarea>` en cada pulsación. Entre dos teclas rápidas React todavía puede
+ * no haber re-renderizado, y calcular la edición sobre el valor de props pierde
+ * o duplica caracteres. `applyEdit` se encarga de notificar y de reponer el
+ * cursor tras el commit.
+ */
+export interface UseJsonEditorKeyboardOptions {
+  /** Referencia al textarea real. */
+  textareaRef: RefObject<HTMLTextAreaElement | null>;
+  /** Espacios por nivel de indentación. */
+  indentSize: number;
+  /** `true` cuando el editor es de solo lectura (no se intercepta nada). */
+  readOnly?: boolean;
+  /** Aplica una edición al textarea conservando el deshacer nativo. */
+  applyEdit: (result: EditResult) => void;
+}
+
+/** Caracteres que abren bloque y su pareja de cierre. */
+const PAIRS: Record<string, string> = { "{": "}", "[": "]", '"': '"' };
+
+/** Caracteres de cierre que se "saltan" al teclear si ya están delante. */
+const CLOSERS = new Set(["}", "]", '"']);
+
+/**
+ * Comportamiento de editor de código sobre un `<textarea>` nativo: indentación
+ * con Tab, continuación de indentación al pulsar Enter, cierre automático de
+ * llaves/corchetes/comillas y borrado por parejas.
+ *
+ * Se implementa como hook para que `ITJSONEditor` siga siendo un componente de
+ * presentación y el textarea conserve el deshacer del navegador.
+ *
+ * @example
+ * ```tsx
+ * const textareaRef = useRef<HTMLTextAreaElement>(null);
+ * const handleKeyDown = useJsonEditorKeyboard({ textareaRef, indentSize: 2, applyEdit });
+ * <textarea ref={textareaRef} onKeyDown={handleKeyDown} />
+ * ```
+ */
+export function useJsonEditorKeyboard({
+  textareaRef,
+  indentSize,
+  readOnly = false,
+  applyEdit,
+}: UseJsonEditorKeyboardOptions) {
+  return useCallback(
+    (event: KeyboardEvent<HTMLTextAreaElement>) => {
+      const textarea = textareaRef.current;
+      if (!textarea || readOnly) return;
+
+      const current = textarea.value;
+      const { selectionStart, selectionEnd } = textarea;
+      const indent = " ".repeat(indentSize);
+      const before = current.slice(0, selectionStart);
+      const after = current.slice(selectionEnd);
+
+      /** Sustituye la selección por `text` y deja el cursor al final. */
+      const replace = (text: string, caretOffset = text.length): EditResult => {
+        const next = current.slice(0, selectionStart) + text + after;
+        const caret = selectionStart + caretOffset;
+        return { value: next, selectionStart: caret, selectionEnd: caret, handled: true };
+      };
+
+      /* ------------------------------------------------------------ Tab */
+      if (event.key === "Tab") {
+        event.preventDefault();
+        const lineStart = current.lastIndexOf("\n", selectionStart - 1) + 1;
+        const lineEndRaw = current.indexOf("\n", selectionEnd);
+        const lineEnd = lineEndRaw === -1 ? current.length : lineEndRaw;
+        const multiline = current.slice(lineStart, lineEnd).includes("\n");
+
+        if (!multiline && !event.shiftKey && selectionStart === selectionEnd) {
+          // Sangrado simple en el cursor.
+          applyEdit(replace(indent));
+          return;
+        }
+
+        // Sangrado/desangrado por bloques: afecta a todas las líneas tocadas.
+        const block = current.slice(lineStart, lineEnd);
+        const lines = block.split("\n");
+        /** Cuánto se ha desplazado cada línea (positivo al indentar). */
+        const shifts: number[] = [];
+        const shifted = lines
+          .map((line) => {
+            if (event.shiftKey) {
+              if (line.startsWith(indent)) {
+                shifts.push(-indent.length);
+                return line.slice(indent.length);
+              }
+              const match = line.match(/^[ \t]/);
+              shifts.push(match ? -1 : 0);
+              return match ? line.slice(1) : line;
+            }
+            shifts.push(indent.length);
+            return indent + line;
+          })
+          .join("\n");
+
+        const next = current.slice(0, lineStart) + shifted + current.slice(lineEnd);
+        /**
+         * Lleva una posición del bloque original a su nueva posición: suma los
+         * desplazamientos de las líneas anteriores y recorta el de la propia
+         * línea para no dejar el cursor antes de su inicio.
+         */
+        const remap = (position: number): number => {
+          const relative = Math.max(0, position - lineStart);
+          let offset = 0;
+          let lineIndex = lines.length - 1;
+          for (let i = 0; i < lines.length; i++) {
+            const lineLength = lines[i].length + (i < lines.length - 1 ? 1 : 0);
+            if (relative <= offset + lineLength) {
+              lineIndex = i;
+              break;
+            }
+            offset += lineLength;
+          }
+          const accumulated = shifts.slice(0, lineIndex).reduce((total, n) => total + n, 0);
+          const inLine = relative - offset;
+          const shift = shifts[lineIndex] ?? 0;
+          return lineStart + accumulated + Math.max(0, inLine + Math.min(shift, inLine));
+        };
+
+        const startNext = remap(selectionStart);
+        const endNext = Math.max(startNext, remap(selectionEnd));
+        applyEdit({
+          value: next,
+          selectionStart: Math.min(startNext, next.length),
+          selectionEnd: Math.min(endNext, next.length),
+          handled: true,
+        });
+        return;
+      }
+
+      /* ---------------------------------------------------------- Enter */
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        const currentLine = before.slice(before.lastIndexOf("\n") + 1);
+        const leading = currentLine.match(/^[ \t]*/)?.[0] ?? "";
+        /** `true` cuando el cursor está al final de su línea (nada detrás salvo el cierre). */
+        const atLineEnd = /^[ \t]*[}\]]?[ \t]*$/.test(after);
+        const nextChar = after[0] ?? "";
+        const prevChar = before[before.length - 1] ?? "";
+        const opensBlock = prevChar === "{" || prevChar === "[";
+        const closesBlock = nextChar === "}" || nextChar === "]";
+
+        // Entre llaves vacías: se abre un bloque y se deja el cursor centrado.
+        if (opensBlock && closesBlock) {
+          const inner = `\n${leading}${indent}\n${leading}`;
+          applyEdit(replace(inner, 1 + leading.length + indent.length));
+          return;
+        }
+        if (opensBlock) {
+          applyEdit(replace(`\n${leading}${indent}`));
+          return;
+        }
+        if (!atLineEnd) {
+          // A mitad de línea solo se parte la línea: no se toca el resto, pero la
+          // línea nueva sí hereda la sangría del bloque en el que se está.
+          applyEdit(replace(`\n${leading}${closesBlock ? indent : ""}`, 1 + leading.length + (closesBlock ? indent.length : 0)));
+          return;
+        }
+        if (closesBlock) {
+          applyEdit(replace(`\n${leading}`, 1 + leading.length));
+          return;
+        }
+        applyEdit(replace(`\n${leading}`));
+        return;
+      }
+
+      /* --------------------------------------------- Cierre automático */
+      if (PAIRS[event.key]) {
+        const closing = PAIRS[event.key];
+        const selected = current.slice(selectionStart, selectionEnd);
+        // Teclear la comilla de cierre sobre una ya existente solo avanza el
+        // cursor. La comprobación es contra el MISMO carácter: delante de un `}`
+        // o un `]` lo que toca es abrir una cadena, no saltar nada.
+        if (event.key === '"' && nextCharOf(after) === '"' && !selected) {
+          event.preventDefault();
+          applyEdit({ value: current, selectionStart: selectionEnd + 1, selectionEnd: selectionEnd + 1, handled: true });
+          return;
+        }
+        event.preventDefault();
+        applyEdit(replace(`${event.key}${selected}${closing}`, 1));
+        return;
+      }
+
+      /* ------------------------------------------------ Salto de cierre */
+      if (CLOSERS.has(event.key) && selectionStart === selectionEnd && after[0] === event.key) {
+        event.preventDefault();
+        applyEdit({ value: current, selectionStart: selectionStart + 1, selectionEnd: selectionStart + 1, handled: true });
+        return;
+      }
+
+      /* ----------------------------------------------- Borrado de pareja */
+      if (event.key === "Backspace" && selectionStart === selectionEnd && selectionStart > 0) {
+        const prev = before[before.length - 1];
+        const next = after[0];
+        const isPair =
+          (prev === "{" && next === "}") || (prev === "[" && next === "]") || (prev === '"' && next === '"');
+        if (isPair) {
+          event.preventDefault();
+          const nextValue = current.slice(0, selectionStart - 1) + current.slice(selectionStart + 1);
+          applyEdit({
+            value: nextValue,
+            selectionStart: selectionStart - 1,
+            selectionEnd: selectionStart - 1,
+            handled: true,
+          });
+          return;
+        }
+      }
+
+      /* ------------------------------------------------------ Atajos */
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "a") {
+        // Seleccionar todo dentro del editor (no toda la página).
+        event.preventDefault();
+        textarea.select();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "d") {
+        // Duplicar la línea actual.
+        event.preventDefault();
+        const lineStart = before.lastIndexOf("\n") + 1;
+        const lineEndRaw = current.indexOf("\n", selectionStart);
+        const lineEnd = lineEndRaw === -1 ? current.length : lineEndRaw;
+        const line = current.slice(lineStart, lineEnd);
+        const next = current.slice(0, lineEnd) + "\n" + line + current.slice(lineEnd);
+        const caret = selectionStart + line.length + 1;
+        applyEdit({ value: next, selectionStart: caret, selectionEnd: caret, handled: true });
+        return;
+      }
+    },
+    [applyEdit, indentSize, readOnly, textareaRef]
+  );
+}
+
+/** Carácter vigente en una cadena, o `""`. */
+function nextCharOf(text: string): string {
+  return text[0] ?? "";
+}

package/src/components/molecules/json-renderer/json-renderer.index.ts

@@ -0,0 +1,2 @@
+export { default as ITJsonRenderer } from "./json-renderer";
+export type { ITJsonRendererProps, JsonComponentNode, JsonComponentType } from "./json-renderer.props";

package/src/components/molecules/json-renderer/json-renderer.props.ts

@@ -0,0 +1,31 @@
+export type JsonComponentType =
+  | "button"
+  | "text"
+  | "card"
+  | "flex"
+  | "stack"
+  | "grid"
+  | "alert"
+  | "div";
+
+export interface JsonProps {
+  [key: string]: any;
+}
+
+export interface JsonComponentNode {
+  /** Component type to render */
+  type: JsonComponentType;
+  /** Props to pass to the component */
+  props?: JsonProps;
+  /** Children nodes */
+  children?: JsonComponentNode[] | React.ReactNode;
+  /** Text content (shorthand for text children) */
+  text?: string;
+}
+
+export interface ITJsonRendererProps {
+  /** JSON structure to render */
+  json: JsonComponentNode | JsonComponentNode[];
+  /** Additional CSS class names */
+  className?: string;
+}

package/src/components/molecules/json-renderer/json-renderer.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { ITJsonRendererProps, JsonComponentNode } from "./json-renderer.props";
+import ITButton from "@/components/atoms/button/button";
+import ITText from "@/components/atoms/text/text";
+import ITCard from "@/components/molecules/card/card";
+import ITFlex from "@/components/atoms/flex/flex";
+import ITStack from "@/components/atoms/stack/stack";
+import ITGrid from "@/components/atoms/grid/grid";
+import ITAlert from "@/components/molecules/alert/alert";
+import clsx from "clsx";
+
+/**
+ * Render UI from JSON schema using AXZY UI System components.
+ *
+ * @example
+ * <ITJsonRenderer json={{ type: "button", props: { label: "Click me" } }} />
+ *
+ * @example
+ * <ITJsonRenderer json={[
+ *   { type: "alert", props: { variant: "info", title: "Info" }, children: "Hello" },
+ *   { type: "card", props: { title: "Card" }, children: { type: "text", text: "Content" } }
+ * ]} />
+ */
+export default function ITJsonRenderer({
+  json,
+  className,
+}: ITJsonRendererProps) {
+  const renderNode = (node: JsonComponentNode | React.ReactNode): React.ReactNode => {
+    if (node == null || typeof node === "boolean") {
+      return null;
+    }
+
+    if (typeof node === "string" || typeof node === "number") {
+      return node;
+    }
+
+    if (React.isValidElement(node)) {
+      return node;
+    }
+
+    if (Array.isArray(node)) {
+      return node.map((child, idx) => (
+        <React.Fragment key={idx}>{renderNode(child as any)}</React.Fragment>
+      ));
+    }
+
+    // node is JsonComponentNode
+    const { type, props = {}, children, text } = node as JsonComponentNode;
+
+    const childContent = children !== undefined ? renderNode(children as any) : text;
+
+    switch (type) {
+      case "button":
+        return <ITButton {...props}>{childContent}</ITButton>;
+      case "text":
+        return <ITText {...props}>{childContent}</ITText>;
+      case "card":
+        return <ITCard {...props}>{childContent}</ITCard>;
+      case "flex":
+        return <ITFlex {...props}>{childContent}</ITFlex>;
+      case "stack":
+        return <ITStack {...props}>{childContent}</ITStack>;
+      case "grid":
+        // ITGrid can be container or item; by default treat as container if has children layout
+        return <ITGrid container {...props}>{childContent}</ITGrid>;
+      case "alert":
+        return <ITAlert {...props}>{childContent}</ITAlert>;
+      case "div":
+      default:
+        return <div {...props}>{childContent}</div>;
+    }
+  };
+
+  if (Array.isArray(json)) {
+    return <div className={clsx(className)}>{json.map((n, idx) => <React.Fragment key={idx}>{renderNode(n)}</React.Fragment>)}</div>;
+  }
+
+  return <div className={clsx(className)}>{renderNode(json)}</div>;
+}

package/src/components/organisms/sidebar/sidebar.tsx

@@ -29,6 +29,28 @@ function flattenSubItems(
   );
 }
 
+/** Caracteres que caben en el badge del riel (`max-w-[2.1rem]`). */
+const RAIL_BADGE_MAX_CHARS = 3;
+
+/**
+ * Contenido del badge cuando el sidebar está colapsado.
+ *
+ * En el riel solo cabe un valor corto (contadores tipo `12` o `99+`). Un texto
+ * largo deformaría el riel y taparía el icono, así que se degrada a un punto que
+ * conserva el aviso de color; el nombre completo sigue disponible en el tooltip.
+ */
+function RailBadge({ value }: { value: number | string }) {
+  const text = String(value);
+  if (text.length <= RAIL_BADGE_MAX_CHARS) return <>{text}</>;
+  return (
+    <span
+      aria-hidden="true"
+      className="block w-1.5 h-1.5 rounded-full"
+      style={{ backgroundColor: "currentColor" }}
+    />
+  );
+}
+
 /**
  * Vertical navigation sidebar with submenu expand/collapse, hover tooltips in collapsed mode,
  * and glassmorphism styling. The collapsed rail expands automatically on pointer hover — there
@@ -137,9 +159,9 @@ export default function ITSidebar({
   }, [navigationItems]);
 
   const isSidebarCollapsed = visibleOnMobile ? false : isCollapsed && !(expandOnHover && isHovering);
-  const sidebarWidth = isSidebarCollapsed
-    ? flat ? "w-[72px]" : "w-[88px]"
-    : flat ? "w-[248px]" : "w-[280px]";
+  const collapsedWidth = flat ? "w-[72px]" : "w-[88px]";
+  const expandedWidth = flat ? "w-[248px]" : "w-[280px]";
+  const sidebarWidth = isSidebarCollapsed ? collapsedWidth : expandedWidth;
   // Icon-only rail that never expands on hover: names show in a tooltip.
   const fixedRail = isSidebarCollapsed && !expandOnHover;
 
@@ -266,7 +288,7 @@ export default function ITSidebar({
         {...badgeRest}
         className={clsx("shadow-md", badgeClassName)}
       >
-        {String(count)}
+        {isSidebarCollapsed ? <RailBadge value={count} /> : String(count)}
       </ITBadget>
     );
 
@@ -277,7 +299,7 @@ export default function ITSidebar({
           aria-label={label}
           title={label}
           onClick={onClick}
-          className="relative flex items-center justify-center w-full p-2 mb-1 rounded-xl transition-all duration-300"
+          className={`relative flex items-center w-full h-10 mb-1 rounded-xl transition-all duration-300 ${flat ? "px-3" : "px-5"}`}
           style={{ color: "var(--it-sidebar-icon-color, var(--color-secondary-500))" }}
           onMouseEnter={(e) => {
             e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
@@ -289,7 +311,7 @@ export default function ITSidebar({
           {icon && (
             <span className="flex items-center justify-center text-[1.05rem]">{icon}</span>
           )}
-          <span className="absolute top-0.5 right-0.5 pointer-events-none">{badge}</span>
+          <span className="absolute top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden pointer-events-none">{badge}</span>
         </button>
       );
     }
@@ -300,7 +322,7 @@ export default function ITSidebar({
         aria-label={label}
         title={label}
         onClick={onClick}
-        className="flex items-center gap-2.5 w-full text-left px-3 py-2 mb-1 rounded-xl transition-all duration-300"
+        className={`flex items-center gap-2.5 w-full text-left h-10 mb-1 rounded-xl transition-all duration-300 ${flat ? "px-3" : "px-5"}`}
         style={{ color: "var(--it-sidebar-label-color, var(--color-secondary-600))" }}
         onMouseEnter={(e) => {
           e.currentTarget.style.backgroundColor = "var(--it-sidebar-hover-bg, var(--color-secondary-100))";
@@ -364,8 +386,19 @@ export default function ITSidebar({
         </div>
       )}
 
-      {header && !isSidebarCollapsed && (
-        <div className="px-4 pt-4 pb-1 flex-shrink-0">{header}</div>
+      {/* El header reserva su altura también en el riel para que la navegación no
+          salte en vertical al expandir. Se maqueta con el ancho expandido (oculto
+          y recortado) para que el texto no se reparta en más líneas en el riel. */}
+      {header && (
+        <div className={`px-4 pt-4 pb-1 flex-shrink-0 ${isSidebarCollapsed ? "overflow-hidden" : ""}`}>
+          {isSidebarCollapsed ? (
+            <div className={`${expandedWidth} invisible`} aria-hidden="true">
+              {header}
+            </div>
+          ) : (
+            header
+          )}
+        </div>
       )}
 
       {notification && (
@@ -373,7 +406,7 @@ export default function ITSidebar({
       )}
 
       {/* Navigation Items */}
-      <nav aria-label={t("sidebar.navAria")} className={`flex-1 py-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"} ${flat && isSidebarCollapsed ? "px-3" : "px-4"}`}>
+      <nav aria-label={t("sidebar.navAria")} className={`flex-1 py-4 px-4 custom-scrollbar ${fixedRail ? "overflow-visible" : "overflow-y-auto overflow-x-hidden"}`}>
         <ul className="space-y-1">
           {navigationItems.map((item) => {
             const hasSubmenu = !!item.subitems && item.subitems.length > 0;
@@ -396,7 +429,9 @@ export default function ITSidebar({
                 className={`flex items-center cursor-pointer 
                   transition-all duration-300 ease-[cubic-bezier(0.2,0,0,1)]
                   rounded-xl relative overflow-visible
-                  ${isSidebarCollapsed ? (flat ? "justify-center h-10 mb-1" : "justify-center p-2 mb-1") : "justify-between px-3 py-2 mb-0.5"}
+                  h-10
+                  ${flat ? "px-3" : "px-5"}
+                  ${isSidebarCollapsed ? "justify-start" : "justify-between"}
                 `}
                 style={{
                   backgroundColor: active ? "var(--it-sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
@@ -424,7 +459,7 @@ export default function ITSidebar({
                   />
                 )}
 
-                <div className={`flex items-center ${!isSidebarCollapsed ? "gap-2.5" : "justify-center"} relative z-10 w-full`}>
+                <div className="flex items-center gap-2.5 relative z-10 w-full">
                   {item.icon && (
                     <div
                       className={`transition-all duration-300 flex-shrink-0 flex items-center justify-center`}
@@ -467,13 +502,15 @@ export default function ITSidebar({
                     {...badgeRest}
                     className={clsx(
                       "absolute shadow-md",
+                      // En el riel no hay ancho para una etiqueta larga: el badge se
+                      // ancla a la esquina y se recorta, así nunca desborda ni tapa el icono.
                       isSidebarCollapsed
-                        ? "top-0.5 right-0.5"
+                        ? "top-0.5 right-0.5 max-w-[2.1rem] overflow-hidden"
                         : "right-3 top-1/2 -translate-y-1/2",
                       badgeClassName,
                     )}
                   >
-                    {String(item.badge)}
+                    {isSidebarCollapsed ? <RailBadge value={item.badge} /> : String(item.badge)}
                   </ITBadget>
                 )}
               </div>

package/src/dev.css

@@ -112,7 +112,30 @@ html {
 @media (prefers-reduced-motion: reduce) {
   .it-landing-rise,
   .it-landing-float,
-  .it-reveal {
+  .it-reveal,
+  .it-logo-latido {
     animation: none;
   }
 }
+
+/* ──────────────────────────────────────────────
+   MARCA AXZYDEV (dev.css)
+   El loader del kit es una animación Lottie; en el sitio se usa la versión
+   estática del ícono con un latido suave. Solo dev: nunca llega a dist.
+   ────────────────────────────────────────────── */
+@keyframes it-logo-latido {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.72;
+    transform: scale(0.94);
+  }
+}
+
+.it-logo-latido {
+  animation: it-logo-latido 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transform-origin: center;
+}

package/src/hooks/useJsonRender.tsx

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import ITJsonRenderer from "@/components/molecules/json-renderer/json-renderer";
+import { JsonComponentNode } from "@/components/molecules/json-renderer/json-renderer.props";
+
+export function useJsonRender(json: JsonComponentNode | JsonComponentNode[]) {
+  return useMemo(() => <ITJsonRenderer json={json} />, [json]);
+}
+
+export default useJsonRender;

package/src/i18n/locales/en.ts

@@ -158,6 +158,60 @@ const en: ITMessages = {
   "themeProvider.presets.oceanicTeal": "Oceanic Teal 🌊",
   "themeProvider.presets.goldenHour": "Golden Hour ☀️",
   "themeProvider.presets.deepForest": "Deep Forest 🌲",
+
+  // -------------------------------------------------------- ITJSONEditor
+  "jsonEditor.ariaLabel": "JSON editor",
+  "jsonEditor.placeholder": '{\n  "type": "button",\n  "props": { "label": "Confirm" }\n}',
+  "jsonEditor.valid": "Valid JSON",
+  "jsonEditor.invalid": "Invalid JSON",
+  "jsonEditor.invalidAt": "Error on line {line}, column {column}",
+  "jsonEditor.format": "Format",
+  "jsonEditor.formatHint": "Reindents the document (Shift+Alt+F)",
+  "jsonEditor.minify": "Minify",
+  "jsonEditor.sortAsc": "A-Z",
+  "jsonEditor.sortDesc": "Z-A",
+  "jsonEditor.escape": "Escape",
+  "jsonEditor.unescape": "Unescape",
+  "jsonEditor.copy": "Copy",
+  "jsonEditor.copied": "Copied",
+  "jsonEditor.copyFailed": "Could not copy to the clipboard",
+  "jsonEditor.importFile": "Open",
+  "jsonEditor.download": "Download",
+  "jsonEditor.fileLoaded": "File loaded",
+  "jsonEditor.fileError": "The file could not be read",
+  "jsonEditor.applied": "Action applied",
+  "jsonEditor.actionFailed": "The action could not be applied",
+  "jsonEditor.viewMode": "View mode",
+  "jsonEditor.modeText": "Text",
+  "jsonEditor.modeTree": "Tree",
+  "jsonEditor.viewSettings": "View",
+  "jsonEditor.wrap": "Wrap",
+  "jsonEditor.lineNumbers": "Numbers",
+  "jsonEditor.folding": "Folding",
+  "jsonEditor.indent": "Indent",
+  "jsonEditor.indentNone": "No indent",
+  "jsonEditor.collapseAll": "Collapse all",
+  "jsonEditor.expandAll": "Expand all",
+  "jsonEditor.collapseBlock": "Collapse the block on line {line}",
+  "jsonEditor.expandBlock": "Expand the block on line {line}",
+  "jsonEditor.foldMore": "… {count} folded lines",
+  "jsonEditor.expandNode": "Expand node",
+  "jsonEditor.collapseNode": "Collapse node",
+  "jsonEditor.jumpToLine": "Go to line {line}",
+  "jsonEditor.childCount": "{count} children",
+  "jsonEditor.treeNeedsValid": "Fix the JSON to see the tree",
+  "jsonEditor.treeTruncated": "Tree truncated: too many nodes, use the text view",
+  "jsonEditor.statLines": "{count} lines",
+  "jsonEditor.statNodes": "{count} nodes",
+  "jsonEditor.statDepth": "depth {count}",
+  "jsonEditor.statRoot": "root: {kind}",
+  "jsonEditor.statSize": "size: {size}",
+  "jsonEditor.kindObject": "object",
+  "jsonEditor.kindArray": "array",
+  "jsonEditor.kindString": "string",
+  "jsonEditor.kindNumber": "number",
+  "jsonEditor.kindBoolean": "boolean",
+  "jsonEditor.kindNull": "null",
 };
 
 export default en;