feat: make repo an installable node package

blocksystem/README.md

@@ -1,4 +1,4 @@
-# BlockSystem
+# render-mathproblems
 
 BlockSystem es una aplicación educativa interactiva construida con Vue 3, centrada en el componente **`Blocks.vue`**. Este componente permite a los usuarios colocar, arrastrar, agrupar y dividir bloques unitarios en una cuadrícula, fomentando la intuición matemática sobre agrupamiento y valor posicional (unidades y decenas).
 
@@ -8,9 +8,52 @@ La aplicación incluye una interfaz completa con modos de demostración y ejerci
 
 Para detalles de la API y configuración de `Blocks.vue`, consulta `src/README.md`.
 
+## Uso Como Paquete
+
+```sh
+npm install render-mathproblems
+```
+
+Importa el componente y sus estilos:
+
+```vue
+<script setup>
+import { MathProblem } from "render-mathproblems";
+import "render-mathproblems/style.css";
+
+const exercise = {
+  exerciseType: "move-blocks",
+  layout: "row-answer-right",
+  grids: [
+    { id: "a", mode: "active", value: 3, label: "3" },
+    {
+      id: "answer",
+      mode: "target",
+      label: "Respuesta",
+      answerSlot: { from: "any", count: 3 },
+    },
+  ],
+};
+</script>
+
+<template>
+  <MathProblem
+    :exercise="exercise"
+    @complete="(result) => console.log(result)"
+  />
+</template>
+```
+
+También puedes importar el nombre interno del componente:
+
+```js
+import { Blocks } from "render-mathproblems";
+```
+
 ## Requisitos
 
 Antes de ejecutar el proyecto, asegúrate de tener instalados:
+
 - Node.js (versión recomendada: 18+)
 - npm o yarn
 
@@ -39,4 +82,3 @@ Esto lanzará la aplicación en modo desarrollo utilizando Vite.
 ## Configuración Recomendada del IDE
 
 [VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (y desactiva Vetur).
-