From 1df6ac8a56753c33e8ac1609d8a077f10022d691 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Mon, 9 Mar 2026 19:12:05 -0600
Subject: [PATCH 1/7] chore(ui): Add Bloom effect to features cards

---
 src/features/home/components/Features.astro | 30 ++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/features/home/components/Features.astro b/src/features/home/components/Features.astro
index 956c810..651e38e 100644
--- a/src/features/home/components/Features.astro
+++ b/src/features/home/components/Features.astro
@@ -36,7 +36,7 @@ const t = useTranslations(lang)
     </div>
 
     <!-- Bento grid -->
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div id="bento-grid" class="grid grid-cols-1 md:grid-cols-3 gap-4">
 
       <!-- Card grande: Editor -->
       <div class="md:col-span-2 bento-card group relative overflow-hidden rounded-2xl border border-stroke-color bg-dark-fg p-8 flex flex-col gap-5 hover:border-yellow/30 transition-all duration-300">
@@ -185,16 +185,40 @@ const t = useTranslations(lang)
 </Section>
 
 <style>
+  #bento-grid:hover .glow-yellow {
+    opacity: 0.4;
+  }
+
   .bento-card:hover .glow-yellow {
     opacity: 1;
   }
 
   .glow-yellow {
     opacity: 0;
-    transition: opacity 0.3s ease;
+    transition: opacity 0.4s ease;
     pointer-events: none;
     position: absolute;
     inset: 0;
-    background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(255, 215, 118, 0.06) 0%, transparent 70%);
+    background: radial-gradient(
+      600px circle at var(--mouse-x, 30%) var(--mouse-y, 20%),
+      rgba(255, 215, 118, 0.12),
+      transparent 40%
+    );
+    z-index: 1;
   }
 </style>
+
+<script>
+  const grid = document.getElementById("bento-grid");
+
+  grid?.addEventListener("mousemove", (e) => {
+    const mouseEvent = e as MouseEvent;
+    for (const card of grid.querySelectorAll<HTMLElement>(".bento-card")) {
+      const rect = card.getBoundingClientRect();
+      const x = mouseEvent.clientX - rect.left;
+      const y = mouseEvent.clientY - rect.top;
+      card.style.setProperty("--mouse-x", `${x}px`);
+      card.style.setProperty("--mouse-y", `${y}px`);
+    }
+  });
+</script>

From a8408ee003e4ad2247d2c6637c7824e56db805ca Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Mon, 9 Mar 2026 19:52:14 -0600
Subject: [PATCH 2/7] chore(images): Move assets to public/

---
 README.md                                           |   2 +-
 .../Rust_Lang_ES_Logo_Blanco_color.svg              |   0
 .../Rust_Lang_ES_Logo_Negro_blanco.svg              |   0
 .../Rust_Lang_ES_Logo_Negro_color.svg               |   0
 {src/assets => public}/images/figures.svg           |   0
 {src/assets => public}/images/webp/404.png          | Bin
 {src/assets => public}/images/webp/404.webp         | Bin
 {src/assets => public}/images/webp/404_image.png    | Bin
 .../images/webp/discord-mark-white.webp             | Bin
 {src/assets => public}/images/webp/favicon-3.webp   | Bin
 {src/assets => public}/images/webp/favicon.webp     | Bin
 {src/assets => public}/images/webp/ferris.webp      | Bin
 .../images/webp/ferris_cooking.jpg                  | Bin
 {src/assets => public}/images/webp/logo.webp        | Bin
 src/components/CookieBanner.astro                   |   6 ++----
 src/features/home/components/Hero.astro             |   6 ------
 src/features/home/components/Playground.astro       |   6 ++----
 src/layouts/Layout.astro                            |   3 +--
 src/pages/404.astro                                 |   6 ++----
 src/pages/[lang]/certificado/[trackId].astro        |   5 +----
 src/pages/[lang]/verificar/[certId].astro           |   2 +-
 21 files changed, 10 insertions(+), 26 deletions(-)
 rename {src/assets => public}/Rust_Lang_ES_Logo_Blanco_color.svg (100%)
 rename {src/assets => public}/Rust_Lang_ES_Logo_Negro_blanco.svg (100%)
 rename {src/assets => public}/Rust_Lang_ES_Logo_Negro_color.svg (100%)
 rename {src/assets => public}/images/figures.svg (100%)
 rename {src/assets => public}/images/webp/404.png (100%)
 rename {src/assets => public}/images/webp/404.webp (100%)
 rename {src/assets => public}/images/webp/404_image.png (100%)
 rename {src/assets => public}/images/webp/discord-mark-white.webp (100%)
 rename {src/assets => public}/images/webp/favicon-3.webp (100%)
 rename {src/assets => public}/images/webp/favicon.webp (100%)
 rename {src/assets => public}/images/webp/ferris.webp (100%)
 rename {src/assets => public}/images/webp/ferris_cooking.jpg (100%)
 rename {src/assets => public}/images/webp/logo.webp (100%)

diff --git a/README.md b/README.md
index fd834ed..064b928 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-<img src="./src/assets/images/webp/favicon.webp"/>
+<img src="./public/images/webp/favicon.webp"/>
 <h1>RustLings-Web</h1>
 </div>
 
diff --git a/src/assets/Rust_Lang_ES_Logo_Blanco_color.svg b/public/Rust_Lang_ES_Logo_Blanco_color.svg
similarity index 100%
rename from src/assets/Rust_Lang_ES_Logo_Blanco_color.svg
rename to public/Rust_Lang_ES_Logo_Blanco_color.svg
diff --git a/src/assets/Rust_Lang_ES_Logo_Negro_blanco.svg b/public/Rust_Lang_ES_Logo_Negro_blanco.svg
similarity index 100%
rename from src/assets/Rust_Lang_ES_Logo_Negro_blanco.svg
rename to public/Rust_Lang_ES_Logo_Negro_blanco.svg
diff --git a/src/assets/Rust_Lang_ES_Logo_Negro_color.svg b/public/Rust_Lang_ES_Logo_Negro_color.svg
similarity index 100%
rename from src/assets/Rust_Lang_ES_Logo_Negro_color.svg
rename to public/Rust_Lang_ES_Logo_Negro_color.svg
diff --git a/src/assets/images/figures.svg b/public/images/figures.svg
similarity index 100%
rename from src/assets/images/figures.svg
rename to public/images/figures.svg
diff --git a/src/assets/images/webp/404.png b/public/images/webp/404.png
similarity index 100%
rename from src/assets/images/webp/404.png
rename to public/images/webp/404.png
diff --git a/src/assets/images/webp/404.webp b/public/images/webp/404.webp
similarity index 100%
rename from src/assets/images/webp/404.webp
rename to public/images/webp/404.webp
diff --git a/src/assets/images/webp/404_image.png b/public/images/webp/404_image.png
similarity index 100%
rename from src/assets/images/webp/404_image.png
rename to public/images/webp/404_image.png
diff --git a/src/assets/images/webp/discord-mark-white.webp b/public/images/webp/discord-mark-white.webp
similarity index 100%
rename from src/assets/images/webp/discord-mark-white.webp
rename to public/images/webp/discord-mark-white.webp
diff --git a/src/assets/images/webp/favicon-3.webp b/public/images/webp/favicon-3.webp
similarity index 100%
rename from src/assets/images/webp/favicon-3.webp
rename to public/images/webp/favicon-3.webp
diff --git a/src/assets/images/webp/favicon.webp b/public/images/webp/favicon.webp
similarity index 100%
rename from src/assets/images/webp/favicon.webp
rename to public/images/webp/favicon.webp
diff --git a/src/assets/images/webp/ferris.webp b/public/images/webp/ferris.webp
similarity index 100%
rename from src/assets/images/webp/ferris.webp
rename to public/images/webp/ferris.webp
diff --git a/src/assets/images/webp/ferris_cooking.jpg b/public/images/webp/ferris_cooking.jpg
similarity index 100%
rename from src/assets/images/webp/ferris_cooking.jpg
rename to public/images/webp/ferris_cooking.jpg
diff --git a/src/assets/images/webp/logo.webp b/public/images/webp/logo.webp
similarity index 100%
rename from src/assets/images/webp/logo.webp
rename to public/images/webp/logo.webp
diff --git a/src/components/CookieBanner.astro b/src/components/CookieBanner.astro
index cf31630..2bcd700 100644
--- a/src/components/CookieBanner.astro
+++ b/src/components/CookieBanner.astro
@@ -1,6 +1,4 @@
 ---
-import { Image } from "astro:assets"
-import ferrisCooking from "~/assets/images/webp/ferris_cooking.jpg"
 
 import { defaultLang, ui } from "~/i18n/ui"
 
@@ -21,8 +19,8 @@ const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
     class="w-full max-w-2xl max-h-[90vh] bg-editor-bg border border-stroke-color rounded-xl shadow-2xl overflow-hidden grid grid-cols-1 md:grid-cols-2"
   >
     <div class="relative aspect-4/3 md:aspect-auto">
-      <Image
-        src={ferrisCooking}
+      <img
+        src="/images/webp/ferris_cooking.jpg"
         alt={t("cookie.banner.img.alt")}
         class="absolute inset-0 w-full h-full object-cover"
       />
diff --git a/src/features/home/components/Hero.astro b/src/features/home/components/Hero.astro
index fd9e0bd..7c40b04 100644
--- a/src/features/home/components/Hero.astro
+++ b/src/features/home/components/Hero.astro
@@ -146,12 +146,6 @@ const t = useTranslations(lang)
       ))}
     </div>
   </div>
-
-  <!-- Scroll indicator -->
-  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-1.5 text-secondary/20">
-    <span class="text-xs tracking-widest uppercase font-medium">{t("hero.scroll")}</span>
-    <div class="w-px h-8 bg-linear-to-b from-secondary/20 to-transparent"></div>
-  </div>
 </Section>
 
 <script>
diff --git a/src/features/home/components/Playground.astro b/src/features/home/components/Playground.astro
index 64fae39..2f4029c 100644
--- a/src/features/home/components/Playground.astro
+++ b/src/features/home/components/Playground.astro
@@ -1,6 +1,4 @@
 ---
-import { Image } from "astro:assets"
-import ferrisImage from "~/assets/images/webp/ferris.webp"
 import Section from "~/components/sections/Section.astro"
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import IconCheck from "~icons/tabler/check"
@@ -80,9 +78,9 @@ const t = useTranslations(lang)
 
       <!-- Features side -->
       <div class="w-full lg:w-2/5 flex flex-col items-center lg:items-start gap-8">
-        <Image
+        <img
           class="w-28 h-auto"
-          src={ferrisImage}
+          src="/images/webp/ferris.webp"
           alt={t("playground.ferris_alt")}
         />
 
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 6b7f609..00b421f 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -3,7 +3,6 @@ import { ClientRouter } from "astro:transitions"
 import "~/styles/global.css"
 import "sweetalert2/dist/sweetalert2.min.css"
 import "driver.js/dist/driver.css"
-import favicon from "~/assets/images/webp/favicon.webp"
 import CookieBanner from "~/components/CookieBanner.astro"
 import { getLangFromUrl } from "~/i18n/utils"
 
@@ -20,7 +19,7 @@ const lang = Astro.locals.lang ?? getLangFromUrl(Astro.url)
   <head>
     <meta charset="UTF-8" />
     <title>{title}</title>
-    <link rel="icon" type="image/webp" href={favicon.src} />
+    <link rel="icon" type="image/webp" href="/images/webp/favicon.webp" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <ClientRouter />
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 1579a46..fa9f3be 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,6 +1,4 @@
 ---
-import { Image } from "astro:assets"
-//import img404 from "~/assets/images/webp/404_image.png"
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import Layout from "~/layouts/Layout.astro"
 import IconLeft from "~icons/tabler/arrow-big-left-lines-filled"
@@ -15,8 +13,8 @@ const t = useTranslations(lang)
   <main class="flex-1 flex flex-col items-center justify-center px-4 gap-8">
     <!-- Temporally disabled (corrupted image) -->
     <!--
-    <Image
-      src={img404}
+    <img
+      src="/images/webp/404_image.png"
       alt={t("404.image_alt")}
       class="w-full max-w-lg h-auto select-none pointer-events-none"
     />
diff --git a/src/pages/[lang]/certificado/[trackId].astro b/src/pages/[lang]/certificado/[trackId].astro
index fff7f54..9abf6b9 100644
--- a/src/pages/[lang]/certificado/[trackId].astro
+++ b/src/pages/[lang]/certificado/[trackId].astro
@@ -1,5 +1,4 @@
 ---
-import logoSvgUrl from "~/assets/Rust_Lang_ES_Logo_Blanco_color.svg?url"
 import { tracks } from "~/const/tracks"
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import Layout from "~/layouts/Layout.astro"
@@ -16,6 +15,7 @@ export function getStaticPaths() {
 		])
 }
 
+const logoSvgUrl = "/Rust_Lang_ES_Logo_Blanco_color.svg"
 const { track } = Astro.props
 const lang = getLangFromUrl(Astro.url)
 const t = useTranslations(lang)
@@ -135,10 +135,7 @@ const t = useTranslations(lang)
           data-badge-certification={t("certificate.badge_certification")}
           data-track-title={t(track.title)}
           data-track-id={track.id}
-<<<<<<< Updated upstream
-=======
           data-lang={lang}
->>>>>>> Stashed changes
         ></canvas>
 
         <button
diff --git a/src/pages/[lang]/verificar/[certId].astro b/src/pages/[lang]/verificar/[certId].astro
index 0b67eaf..0755dcf 100644
--- a/src/pages/[lang]/verificar/[certId].astro
+++ b/src/pages/[lang]/verificar/[certId].astro
@@ -1,11 +1,11 @@
 ---
-import logoSvgUrl from "~/assets/Rust_Lang_ES_Logo_Blanco_color.svg?url"
 import { tracks } from "~/const/tracks"
 import { getLangFromUrl, useTranslations } from "~/i18n/utils"
 import Layout from "~/layouts/Layout.astro"
 import IconLeft from "~icons/tabler/arrow-big-left-lines-filled"
 import IconCertificate from "~icons/tabler/certificate"
 
+const logoSvgUrl = "/Rust_Lang_ES_Logo_Blanco_color.svg"
 const { certId } = Astro.params
 const { DB } = Astro.locals.runtime.env
 const lang = getLangFromUrl(Astro.url)

From 4165c585b29a898b3e40efee05509ebed1539ce3 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Tue, 10 Mar 2026 01:22:48 -0600
Subject: [PATCH 3/7] chore(deps): add codemirror-vim and update
 codemirror-lint

---
 package-lock.json | 21 ++++++++++++++++++---
 package.json      |  2 ++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 893657f..4b03476 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,12 +13,14 @@
 				"@codemirror/autocomplete": "^6.19.1",
 				"@codemirror/lang-rust": "^6.0.2",
 				"@codemirror/language": "^6.11.3",
+				"@codemirror/lint": "^6.9.5",
 				"@codemirror/state": "^6.5.2",
 				"@codemirror/view": "^6.38.6",
 				"@fontsource/poppins": "^5.2.7",
 				"@lezer/highlight": "^1.2.2",
 				"@lezer/rust": "^1.0.2",
 				"@microsoft/clarity": "^1.0.2",
+				"@replit/codemirror-vim": "^6.3.0",
 				"@tailwindcss/vite": "^4.1.16",
 				"astro": "^5.15.0",
 				"codemirror": "^6.0.2",
@@ -563,9 +565,9 @@
 			}
 		},
 		"node_modules/@codemirror/lint": {
-			"version": "6.9.2",
-			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.2.tgz",
-			"integrity": "sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==",
+			"version": "6.9.5",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.9.5.tgz",
+			"integrity": "sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==",
 			"license": "MIT",
 			"dependencies": {
 				"@codemirror/state": "^6.0.0",
@@ -1686,6 +1688,19 @@
 				"object-assign": "^4.1.1"
 			}
 		},
+		"node_modules/@replit/codemirror-vim": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/@replit/codemirror-vim/-/codemirror-vim-6.3.0.tgz",
+			"integrity": "sha512-aTx931ULAMuJx6xLf7KQDOL7CxD+Sa05FktTDrtLaSy53uj01ll3Zf17JdKsriER248oS55GBzg0CfCTjEneAQ==",
+			"license": "MIT",
+			"peerDependencies": {
+				"@codemirror/commands": "6.x.x",
+				"@codemirror/language": "6.x.x",
+				"@codemirror/search": "6.x.x",
+				"@codemirror/state": "6.x.x",
+				"@codemirror/view": "6.x.x"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "5.3.0",
 			"license": "MIT",
diff --git a/package.json b/package.json
index 027904e..957d71a 100644
--- a/package.json
+++ b/package.json
@@ -18,12 +18,14 @@
 		"@codemirror/autocomplete": "^6.19.1",
 		"@codemirror/lang-rust": "^6.0.2",
 		"@codemirror/language": "^6.11.3",
+		"@codemirror/lint": "^6.9.5",
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/view": "^6.38.6",
 		"@fontsource/poppins": "^5.2.7",
 		"@lezer/highlight": "^1.2.2",
 		"@lezer/rust": "^1.0.2",
 		"@microsoft/clarity": "^1.0.2",
+		"@replit/codemirror-vim": "^6.3.0",
 		"@tailwindcss/vite": "^4.1.16",
 		"astro": "^5.15.0",
 		"codemirror": "^6.0.2",

From fcb4ffde8855fb56d2e6cf05759ffc2a02f22549 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Tue, 10 Mar 2026 01:22:48 -0600
Subject: [PATCH 4/7] feat(editor): add Vim mode and formatting support

---
 src/components/editor/CodeEditor.astro | 378 ++++++++++++++++++++-----
 src/lib/stores/editor-store.ts         |   1 +
 src/pages/[lang]/perfil.astro          |  41 +++
 3 files changed, 344 insertions(+), 76 deletions(-)

diff --git a/src/components/editor/CodeEditor.astro b/src/components/editor/CodeEditor.astro
index 9dd1f99..7b43778 100644
--- a/src/components/editor/CodeEditor.astro
+++ b/src/components/editor/CodeEditor.astro
@@ -7,94 +7,320 @@ interface Props {
 const { slug, initialCode = 'fn main() {\n    println!("Hola, mundo!");\n}\n' } = Astro.props
 ---
 
-<div
-  id="editor"
-  data-slug={slug}
-  data-initial-code={initialCode}
-  class="flex-1 min-w-0 min-h-0"
-  role="textbox"
-  aria-label="Editor de código"
-  aria-multiline="true"
->
+<div class="flex flex-col flex-1 min-w-0 min-h-0">
+  <div
+    id="editor"
+    data-slug={slug}
+    data-initial-code={initialCode}
+    class="flex-1 min-w-0 min-h-0"
+    role="textbox"
+    aria-label="Editor de código"
+    aria-multiline="true"
+  >
+  </div>
+
+  <div id="vim-mode-bar" class="hidden items-center gap-2 px-3 h-6 border-t border-stroke-color bg-light-bg text-xs font-mono font-bold shrink-0">
+    <span id="vim-mode-label" class="px-1.5 py-0.5 rounded text-[10px] tracking-widest">NORMAL</span>
+  </div>
 </div>
 
-<script>
-  import { EditorView, keymap } from "@codemirror/view";
-  import { EditorState } from "@codemirror/state";
-  import { basicSetup } from "codemirror";
-  import { indentWithTab } from "@codemirror/commands";
-  import { gruvbox } from "~/components/editor/theme";
-  import { db, editorCode } from "~/lib/stores/editor-store";
-  import { rust } from "~/components/editor/config";
-
-  let editorView: EditorView | null = null;
-  let saveTimeout: number | undefined;
-
-  async function initEditor() {
-    const editorElement = document.getElementById("editor");
-    if (!editorElement) return;
-
-    if (editorView) {
-      editorView.destroy();
-      editorView = null;
-    }
+<style>
+  /* Estilos para diagnósticos del linter */
+  :global(.cm-diagnostic) {
+    padding: 8px 12px;
+    border-radius: 6px;
+    border-left: 4px solid;
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 13px;
+    line-height: 1.4;
+    margin: 4px 0;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
 
-    const { slug, initialCode } = editorElement.dataset as {
-      slug: string;
-      initialCode: string;
-    };
-
-    const initialDoc = (await db.getCode(slug)) ?? initialCode;
-
-    editorView = new EditorView({
-      state: EditorState.create({
-        doc: initialDoc,
-        extensions: [
-          basicSetup,
-          gruvbox,
-          rust(),
-          keymap.of([indentWithTab]),
-          EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
-              const value = update.state.doc.toString();
-              editorCode.set(value);
-              clearTimeout(saveTimeout);
-              saveTimeout = window.setTimeout(
-                () => db.saveCode(slug, value),
-                500,
-              );
-            }
-          }),
-        ],
-      }),
-      parent: editorElement,
-    });
+  :global(.cm-diagnostic.cm-diagnostic-error) {
+    border-left-color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+    color: #fef2f2;
+  }
+
+  :global(.cm-diagnostic.cm-diagnostic-warning) {
+    border-left-color: #f59e0b;
+    background: rgba(245, 158, 11, 0.1);
+    color: #fefbf4;
+  }
+
+  :global(.cm-diagnostic.cm-diagnostic-info) {
+    border-left-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.1);
+    color: #eff6ff;
+  }
+
+  :global(.cm-diagnostic-action) {
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  :global(.cm-diagnostic-action button) {
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: inherit;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  :global(.cm-diagnostic-action button:hover) {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
+  }
+
+  /* Estilos para el gutter del linter */
+  :global(.cm-lint-marker) {
+    width: 0.8em;
+    height: 0.8em;
+    border-radius: 50%;
+    margin: 0.1em 0.2em;
+    cursor: pointer;
+    position: relative;
+  }
 
-    editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust");
-    editorView.contentDOM.setAttribute("role", "textbox");
-    editorCode.set(initialDoc);
+  :global(.cm-lint-marker-error) {
+    background: #ef4444;
+    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
+  }
+  
+  :global(.cm-lint-marker-warning) {
+    background: #f59e0b;
+    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
+  }
 
-    window.addEventListener("editor:reset", handleReset);
+  :global(.cm-lint-marker-info) {
+    background: #3b82f6;
+    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
   }
 
-  function handleReset(e: Event) {
-    const { code } = (e as CustomEvent).detail;
+  /* Animación sutil para los marcadores */
+  :global(.cm-lint-marker) {
+    animation: lint-pulse 2s infinite;
+  }
 
-    if (editorView) {
-      const doc = editorView.state.doc.toString();
-      editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+  @keyframes lint-pulse {
+    0%, 100% { 
+      opacity: 0.8;
+      transform: scale(1);
+    }
+    50% { 
+      opacity: 1;
+      transform: scale(1.1);
     }
   }
 
-  document.addEventListener("astro:page-load", initEditor);
+  /* Subrayado para código con errores */
+  :global(.cm-lintRange-error) {
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      rgba(239, 68, 68, 0.3) 2px,
+      rgba(239, 68, 68, 0.3) 4px
+    );
+    border-radius: 2px;
+  }
 
-  document.addEventListener("astro:before-swap", () => {
-    clearTimeout(saveTimeout);
-    window.removeEventListener("editor:reset", handleReset);
+  :global(.cm-lintRange-warning) {
+    background-image: repeating-linear-gradient(
+      45deg,
+      transparent,
+      transparent 2px,
+      rgba(245, 158, 11, 0.3) 2px,
+      rgba(245, 158, 11, 0.3) 4px
+    );
+    border-radius: 2px;
+  }
+
+  :global(.cm-lintRange-info) {
+    background: rgba(59, 130, 246, 0.2);
+    border-radius: 2px;
+  }
+
+  /* Panel de linting */
+  :global(.cm-panel.cm-panel-lint) {
+    background: rgba(40, 40, 40, 0.95);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  :global(.cm-panel-lint ul) {
+    max-height: 150px;
+    overflow-y: auto;
+  }
 
-    if (editorView) {
-      editorView.destroy();
-      editorView = null;
+  :global(.cm-panel-lint li) {
+    padding: 6px 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+  }
+
+  :global(.cm-panel-lint li:hover) {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  /* Mejoras de accesibilidad */
+  :global(.cm-lint-marker:focus) {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+  }
+</style>
+
+<script>
+  // Solo ejecutar en el cliente
+  if (typeof window !== "undefined") {
+    let editorView: any = null;
+    let saveTimeout = undefined;
+
+    async function initEditor() {
+      const editorElement = document.getElementById("editor");
+      if (!editorElement) return;
+
+      // Importar dinámicamente los módulos necesarios
+      const [
+        { EditorView, keymap },
+        { EditorState },
+        { basicSetup },
+        { indentWithTab },
+        { gruvbox },
+        { db, editorCode, pendingEditorCode },
+        { rust }
+      ] = await Promise.all([
+        import("@codemirror/view"),
+        import("@codemirror/state"),
+        import("codemirror"),
+        import("@codemirror/commands"),
+        import("~/components/editor/theme"),
+        import("~/lib/stores/editor-store"),
+        import("~/components/editor/config")
+      ]);
+
+      const vimEnabled = !!JSON.parse(localStorage.getItem("preferences") ?? "{}").vimEditor;
+      const vimBar = document.getElementById("vim-mode-bar");
+      const vimLabel = document.getElementById("vim-mode-label");
+
+      const modeStyles: Record<string, { label: string; classes: string }> = {
+        normal:         { label: "NORMAL",  classes: "bg-blue-500/20 text-blue-400" },
+        insert:         { label: "INSERT",  classes: "bg-green-500/20 text-green-400" },
+        visual:         { label: "VISUAL",  classes: "bg-yellow/20 text-yellow" },
+        "visual-line":  { label: "V-LINE",  classes: "bg-yellow/20 text-yellow" },
+        "visual-block": { label: "V-BLOCK", classes: "bg-orange-500/20 text-orange-400" },
+        replace:        { label: "REPLACE", classes: "bg-red-500/20 text-red-400" },
+      };
+
+      function updateVimMode(mode: string, subMode?: string) {
+        const key = subMode === "linewise" ? "visual-line"
+                  : subMode === "blockwise" ? "visual-block"
+                  : mode;
+        const style = modeStyles[key] ?? modeStyles.normal;
+        if (vimLabel) {
+          vimLabel.textContent = style.label;
+          vimLabel.className = `px-1.5 py-0.5 rounded text-[10px] tracking-widest ${style.classes}`;
+        }
+      }
+
+      let vimExtension: any[] = [];
+      let getCM: ((view: any) => any) | null = null;
+      if (vimEnabled) {
+        const vimModule = await import("@replit/codemirror-vim");
+        const Vim = vimModule.Vim as any;
+        vimExtension = [vimModule.vim()];
+        getCM = vimModule.getCM;
+
+        // Arrow keys in visual mode — not mapped by default, falls through to CM6 and breaks selection
+        Vim.map("<Up>",    "k", "visual");
+        Vim.map("<Down>",  "j", "visual");
+        Vim.map("<Left>",  "h", "visual");
+        Vim.map("<Right>", "l", "visual");
+
+        vimBar?.classList.replace("hidden", "flex");
+        updateVimMode("normal");
+      }
+
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+
+      const { slug, initialCode } = editorElement.dataset;
+      const initialDoc = (await db.getCode(slug)) ?? initialCode;
+
+      editorView = new EditorView({
+        state: EditorState.create({
+          doc: initialDoc,
+          extensions: [
+            basicSetup,
+            gruvbox,
+            ...vimExtension,
+            rust(),
+            keymap.of([indentWithTab]),
+            EditorView.updateListener.of((update) => {
+              if (update.docChanged) {
+                const value = update.state.doc.toString();
+                editorCode.set(value);
+                clearTimeout(saveTimeout);
+                saveTimeout = window.setTimeout(
+                  () => db.saveCode(slug, value),
+                  500,
+                );
+              }
+            }),
+          ],
+        }),
+        parent: editorElement,
+      });
+
+      editorView.contentDOM.setAttribute("aria-label", "Editor de código Rust");
+      editorView.contentDOM.setAttribute("role", "textbox");
+      editorCode.set(initialDoc);
+
+      if (vimEnabled && getCM) {
+        const cm = getCM(editorView);
+        cm?.on("vim-mode-change", ({ mode, subMode }: { mode: string; subMode?: string }) => {
+          updateVimMode(mode, subMode);
+        });
+      }
+
+      pendingEditorCode.subscribe((code) => {
+        if (code && editorView) {
+          const doc = editorView.state.doc.toString();
+          editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+          pendingEditorCode.set(null);
+        }
+      });
+
+      window.addEventListener("editor:reset", handleReset);
     }
-  });
+
+    function handleReset(e: Event) {
+      const { code } = (e as CustomEvent).detail;
+      if (editorView) {
+        const doc = editorView.state.doc.toString();
+        editorView.dispatch({ changes: { from: 0, to: doc.length, insert: code } });
+      }
+    }
+
+    document.addEventListener("astro:page-load", initEditor);
+
+    document.addEventListener("astro:before-swap", () => {
+      clearTimeout(saveTimeout);
+      window.removeEventListener("editor:reset", handleReset);
+
+      if (editorView) {
+        editorView.destroy();
+        editorView = null;
+      }
+    });
+  }
 </script>
diff --git a/src/lib/stores/editor-store.ts b/src/lib/stores/editor-store.ts
index 0bdabed..f745d8c 100644
--- a/src/lib/stores/editor-store.ts
+++ b/src/lib/stores/editor-store.ts
@@ -1,6 +1,7 @@
 import { atom } from "nanostores"
 
 export const editorCode = atom("")
+export const pendingEditorCode = atom<string | null>(null)
 
 class RustlingsDB {
 	private dbPromise: Promise<IDBDatabase> | null = null
diff --git a/src/pages/[lang]/perfil.astro b/src/pages/[lang]/perfil.astro
index 39e8bcb..79fb2ca 100644
--- a/src/pages/[lang]/perfil.astro
+++ b/src/pages/[lang]/perfil.astro
@@ -117,6 +117,29 @@ const trackMap = Object.fromEntries(tracks.map((t) => [t.id, t]))
             {t("profile.save_button")}
           </button>
         </div>
+
+        <div class="border-t border-stroke-color pt-5 flex flex-col gap-4">
+          <h2 class="text-xs font-semibold text-secondary/40 uppercase tracking-wider">{t("profile.editor_section")}</h2>
+
+          <div class="flex items-center justify-between">
+            <div class="flex flex-col gap-0.5">
+              <span class="text-sm font-medium text-secondary">{t("profile.vim_mode_label")}</span>
+              <span class="text-xs text-secondary/40">{t("profile.vim_mode_desc")}</span>
+            </div>
+            <button
+              id="vim-toggle"
+              type="button"
+              role="switch"
+              aria-checked="false"
+              class="group relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-yellow/50 focus:ring-offset-2 focus:ring-offset-light-bg bg-stroke-color aria-checked:bg-yellow"
+            >
+              <span
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out translate-x-0.5 group-aria-checked:translate-x-5.5"
+                aria-hidden="true"
+              ></span>
+            </button>
+          </div>
+        </div>
       </section>
 
       <!-- Certificates section -->
@@ -330,6 +353,24 @@ const trackMap = Object.fromEntries(tracks.map((t) => [t.id, t]))
       }
     })
 
+    // Vim mode toggle
+    const vimToggle = document.getElementById("vim-toggle") as HTMLButtonElement
+    const getPrefs = () => JSON.parse(localStorage.getItem("preferences") ?? "{}")
+    const savePrefs = (prefs: Record<string, unknown>) => localStorage.setItem("preferences", JSON.stringify(prefs))
+
+    const vimEnabled = !!getPrefs().vimEditor
+    vimToggle.setAttribute("aria-checked", String(vimEnabled))
+    vimToggle.querySelector("span")!.dataset.ariaChecked = String(vimEnabled)
+
+    vimToggle.addEventListener("click", () => {
+      const prefs = getPrefs()
+      const next = !prefs.vimEditor
+      prefs.vimEditor = next
+      savePrefs(prefs)
+      vimToggle.setAttribute("aria-checked", String(next))
+      window.dispatchEvent(new CustomEvent("preferences:changed", { detail: { vimEditor: next } }))
+    })
+
     document.querySelectorAll<HTMLButtonElement>("[data-copy-link]").forEach((btn) => {
       btn.addEventListener("click", async () => {
         const path = btn.dataset.copyLink!

From ffc9c713d9da78fa7afdff3d4cb9ce6e2a0dfac5 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Tue, 10 Mar 2026 01:22:48 -0600
Subject: [PATCH 5/7] feat(terminal): enable code formatting and Vim
 integration

---
 src/components/editor/output/Terminal.astro | 57 ++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/output/Terminal.astro b/src/components/editor/output/Terminal.astro
index 00cb371..28d40e1 100644
--- a/src/components/editor/output/Terminal.astro
+++ b/src/components/editor/output/Terminal.astro
@@ -2,6 +2,7 @@
 import IconLoader2 from "~icons/tabler/loader-2"
 import IconPlayerPlay from "~icons/tabler/player-play"
 import IconRestore from "~icons/tabler/restore"
+import IconSparkles from "~icons/tabler/sparkles"
 import IconTerminal from "~icons/tabler/terminal"
 
 interface Props {
@@ -47,6 +48,20 @@ const isTestMode = !!testCode
 				<span>Reiniciar</span>
 			</button>
 
+			<!--
+			<button
+				id="btn-format"
+				class="btn-control hover:text-blue-400"
+				type="button"
+				aria-label="Format code"
+			>
+				<IconSparkles class="group-data-formatting:hidden" font-size={14} />
+				<IconLoader2 class="hidden animate-spin group-data-formatting:block" font-size={14} />
+				<span class="group-data-formatting:hidden">Formatear</span>
+				<span class="hidden group-data-formatting:inline">...</span>
+			</button>
+			-->
+
 			<button
 				id="btn-run"
 				class="btn-control hover:text-green-500"
@@ -84,6 +99,19 @@ const isTestMode = !!testCode
 				<IconRestore font-size={18} />
 				<span>Reiniciar</span>
 			</button>
+			<!--
+			<button
+				id="btn-format-mobile"
+				type="button"
+				aria-label="Format code"
+				class="flex-1 flex items-center justify-center gap-2 py-3 text-sm text-blue-400 border-r border-stroke-color hover:bg-blue-500/10 active:bg-blue-500/20 transition-colors cursor-pointer touch-manipulation"
+			>
+				<IconSparkles class="group-data-formatting:hidden" font-size={18} />
+				<IconLoader2 class="hidden animate-spin group-data-formatting:block" font-size={18} />
+				<span class="group-data-formatting:hidden">Formatear</span>
+				<span class="hidden group-data-formatting:inline">...</span>
+			</button>
+			-->
 			<button
 				id="btn-run-mobile"
 				type="button"
@@ -111,7 +139,7 @@ const isTestMode = !!testCode
 
 <script>
 import { rustPlayground } from "~/lib/rust-playground";
-import { db, editorCode } from "~/lib/stores/editor-store";
+import { db, editorCode, pendingEditorCode } from "~/lib/stores/editor-store";
 import { getStderrHTML } from "~/components/editor/output/renderer";
 
 class TerminalOutput extends HTMLElement {
@@ -123,8 +151,10 @@ class TerminalOutput extends HTMLElement {
 		stdout: document.getElementById("stdout") as HTMLPreElement,
 		btnRun: document.getElementById("btn-run") as HTMLButtonElement,
 		btnReset: document.getElementById("btn-reset") as HTMLButtonElement,
+		btnFormat: document.getElementById("btn-format") as HTMLButtonElement,
 		btnRunMobile: document.getElementById("btn-run-mobile") as HTMLButtonElement | null,
 		btnResetMobile: document.getElementById("btn-reset-mobile") as HTMLButtonElement | null,
+		btnFormatMobile: document.getElementById("btn-format-mobile") as HTMLButtonElement | null,
 	};
 
 	private state = {
@@ -135,8 +165,10 @@ class TerminalOutput extends HTMLElement {
 	connectedCallback() {
 		this.ui.btnRun.addEventListener("click", this.execute);
 		this.ui.btnReset.addEventListener("click", this.reset);
+		this.ui.btnFormat.addEventListener("click", this.format);
 		this.ui.btnRunMobile?.addEventListener("click", this.execute);
 		this.ui.btnResetMobile?.addEventListener("click", this.reset);
+		this.ui.btnFormatMobile?.addEventListener("click", this.format);
 		this.ui.stdin.addEventListener("keydown", this.handleStdin);
 		this.ui.stdinMobile?.addEventListener("keydown", this.handleStdin);
 	}
@@ -263,6 +295,29 @@ class TerminalOutput extends HTMLElement {
 		window.dispatchEvent(new CustomEvent("editor:reset", { detail: { code: initialCode } }));
 	}
 
+	private format = async () => {
+		this.setFormatting(true);
+		try {
+			const response = await fetch("https://play.rust-lang.org/format", {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				body: JSON.stringify({ channel: "stable", edition: "2024", code: editorCode.get() }),
+			});
+			const result = await response.json() as { success: boolean; code: string };
+			if (result.success && result.code) {
+				pendingEditorCode.set(result.code);
+			}
+		} catch {
+			// silent fail
+		} finally {
+			this.setFormatting(false);
+		}
+	}
+
+	private setFormatting(formatting: boolean) {
+		this.toggleAttribute("data-formatting", formatting);
+	}
+
 	private setRunning(running: boolean) {
 		this.toggleAttribute("data-running", running);
 	}

From 3fec1f5f08ecb6c3918ed77e8c00f6a330b7e3d7 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Tue, 10 Mar 2026 01:22:48 -0600
Subject: [PATCH 6/7] style(editor): improve selection highlight and lint
 visuals

---
 src/components/editor/theme.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/editor/theme.ts b/src/components/editor/theme.ts
index 48d205e..16c1719 100644
--- a/src/components/editor/theme.ts
+++ b/src/components/editor/theme.ts
@@ -43,6 +43,10 @@ export const gruvboxDarkTheme = EditorView.theme(
 			backgroundColor: selection,
 		},
 
+		"&.cm-focused .cm-activeLine .cm-selectionBackground": {
+			backgroundColor: "rgba(253, 216, 53, 0.22)",
+		},
+
 		".cm-panels": { backgroundColor: darkBackground, color: ivory },
 		".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
 		".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },

From 3f89052855af3013f6b6bbf553f6c9632ebd7573 Mon Sep 17 00:00:00 2001
From: wilovy <emiliano@adquiere.co>
Date: Tue, 10 Mar 2026 01:22:48 -0600
Subject: [PATCH 7/7] feat(profile): add Vim mode toggle and i18n translations

---
 src/i18n/keys/en.keys.ts | 3 +++
 src/i18n/keys/es.keys.ts | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/i18n/keys/en.keys.ts b/src/i18n/keys/en.keys.ts
index 64e0b1f..c99a3f8 100644
--- a/src/i18n/keys/en.keys.ts
+++ b/src/i18n/keys/en.keys.ts
@@ -344,6 +344,9 @@ export const en_keys = {
 	"profile.certificate_view": "View Certificate",
 	"profile.progress_in_progress": "In progress",
 	"profile.progress_completed": "completed",
+	"profile.editor_section": "Editor",
+	"profile.vim_mode_label": "Vim Mode",
+	"profile.vim_mode_desc": "Enables Vim keybindings in the editor",
 
 	// Certificate Page
 	"certificate.back_button": "Back",
diff --git a/src/i18n/keys/es.keys.ts b/src/i18n/keys/es.keys.ts
index cd89aac..6c9b644 100644
--- a/src/i18n/keys/es.keys.ts
+++ b/src/i18n/keys/es.keys.ts
@@ -351,6 +351,9 @@ export const es_keys = {
 	"profile.certificate_view": "Ver Certificado",
 	"profile.progress_in_progress": "En progreso",
 	"profile.progress_completed": "completado",
+	"profile.editor_section": "Editor",
+	"profile.vim_mode_label": "Modo Vim",
+	"profile.vim_mode_desc": "Habilita keybindings de Vim en el editor",
 
 	// Certificate Page
 	"certificate.back_button": "Volver",