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).
-

blocksystem/package-lock.json

@@ -1,15 +1,12 @@
 {
-  "name": "blocksystem",
+  "name": "render-mathproblems",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "blocksystem",
+      "name": "render-mathproblems",
-      "version": "0.0.0",
+      "version": "0.1.0",
-      "dependencies": {
-        "vue": "^3.5.29"
-      },
       "devDependencies": {
         "@tsconfig/node24": "^24.0.4",
         "@types/node": "^24.11.0",
@@ -19,10 +16,14 @@
         "typescript": "~5.9.3",
         "vite": "^7.3.1",
         "vite-plugin-vue-devtools": "^8.0.6",
+        "vue": "^3.5.29",
         "vue-tsc": "^3.2.5"
       },
       "engines": {
         "node": "^20.19.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -56,7 +57,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -266,6 +266,7 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -275,6 +276,7 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -308,6 +310,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
       "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -472,6 +475,7 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -959,6 +963,7 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -1356,7 +1361,6 @@
       "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -1464,6 +1468,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.30.tgz",
       "integrity": "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -1477,6 +1482,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.30.tgz",
       "integrity": "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.30",
@@ -1487,6 +1493,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.30.tgz",
       "integrity": "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -1504,6 +1511,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.30.tgz",
       "integrity": "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.30",
@@ -1564,6 +1572,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.30.tgz",
       "integrity": "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.30"
@@ -1573,6 +1582,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.30.tgz",
       "integrity": "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.30",
@@ -1583,6 +1593,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.30.tgz",
       "integrity": "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.30",
@@ -1595,6 +1606,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.30.tgz",
       "integrity": "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.30",
@@ -1608,6 +1620,7 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.30.tgz",
       "integrity": "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@vue/tsconfig": {
@@ -1702,7 +1715,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -1803,6 +1815,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/debug": {
@@ -1877,6 +1890,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
+      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -1951,6 +1965,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/fdir": {
@@ -2128,6 +2143,7 @@
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
       "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -2170,6 +2186,7 @@
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
       "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2289,6 +2306,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -2321,6 +2339,7 @@
       "version": "8.5.12",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
       "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2482,6 +2501,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -2518,9 +2538,8 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "devOptional": true,
+      "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -2590,7 +2609,6 @@
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -2775,8 +2793,8 @@
       "version": "3.5.30",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.30.tgz",
       "integrity": "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg==",
+      "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.30",
         "@vue/compiler-sfc": "3.5.30",

blocksystem/package.json

@@ -1,17 +1,35 @@
 {
-  "name": "blocksystem",
+  "name": "render-mathproblems",
-  "version": "0.0.0",
+  "version": "0.1.0",
-  "private": true,
   "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/render-mathproblems.umd.cjs",
+  "module": "./dist/render-mathproblems.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/render-mathproblems.css",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/render-mathproblems.js",
+      "require": "./dist/render-mathproblems.umd.cjs"
+    },
+    "./style.css": "./dist/render-mathproblems.css"
+  },
   "scripts": {
     "dev": "vite",
-    "build": "run-p type-check \"build-only {@}\" --",
+    "build": "run-s type-check build-only types-only",
     "preview": "vite preview",
     "build-only": "vite build",
+    "types-only": "vue-tsc -p tsconfig.lib.json --declaration --emitDeclarationOnly",
     "type-check": "vue-tsc --build"
   },
-  "dependencies": {
+  "peerDependencies": {
-    "vue": "^3.5.29"
+    "vue": "^3.5.0"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
@@ -22,6 +40,7 @@
     "typescript": "~5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-vue-devtools": "^8.0.6",
+    "vue": "^3.5.29",
     "vue-tsc": "^3.2.5"
   },
   "engines": {

blocksystem/pnpm-lock.yaml

@@ -7,10 +7,6 @@ settings:
 importers:
 
   .:
-    dependencies:
-      vue:
-        specifier: ^3.5.29
-        version: 3.5.34(typescript@5.9.3)
     devDependencies:
       '@tsconfig/node24':
         specifier: ^24.0.4
@@ -36,6 +32,9 @@ importers:
       vite-plugin-vue-devtools:
         specifier: ^8.0.6
         version: 8.1.2(vite@7.3.3(@types/node@24.12.4))(vue@3.5.34(typescript@5.9.3))
+      vue:
+        specifier: ^3.5.29
+        version: 3.5.34(typescript@5.9.3)
       vue-tsc:
         specifier: ^3.2.5
         version: 3.3.1(typescript@5.9.3)

blocksystem/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true

blocksystem/src/components/Blocks.vue

@@ -8,10 +8,10 @@ const ErrorEl = { template: '<div style="padding:12px;color:#ef4444;font-size:0.
 
 const EXERCISE_REGISTRY = {
   'compose-decompose': defineAsyncComponent({ loader: () => import('./exercise-types/ComposeDecompose.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
-  'picture-choose': defineAsyncComponent({ loader: () => import('./exercise-types/PictureChoose.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
+  'picture-choose': defineAsyncComponent({ loader: () => import('./exercise-types/Picturechoose.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
-  'where-more': defineAsyncComponent({ loader: () => import('./exercise-types/WhereMore.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
+  'where-more': defineAsyncComponent({ loader: () => import('./exercise-types/Wheremore.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
-  'connect': defineAsyncComponent({ loader: () => import('./exercise-types/ConnectLines.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
+  'connect': defineAsyncComponent({ loader: () => import('./exercise-types/Connectlines.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
-  'subtract-visual': defineAsyncComponent({ loader: () => import('./exercise-types/SubtractVisual.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
+  'subtract-visual': defineAsyncComponent({ loader: () => import('./exercise-types/Subtractvisual.vue'), loadingComponent: LoadingEl, errorComponent: ErrorEl }),
 };
 const externalComponent = computed(() => EXERCISE_REGISTRY[props.exercise?.exerciseType] ?? null);
 

blocksystem/src/components/exercise-types/Connectlines.vue

@@ -29,7 +29,7 @@
  *   - Confirmar validates all pairs at once
  */
 
-import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import Blocks from '../Blocks.vue';
 
 const props = defineProps({ exercise: { type: Object, required: true } });

blocksystem/src/index.ts

@@ -0,0 +1,6 @@
+import Blocks from './components/Blocks.vue'
+
+const MathProblem = Blocks
+
+export { Blocks, MathProblem }
+export default MathProblem

blocksystem/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.app.json",
+  "include": ["env.d.ts", "src/index.ts", "src/components/**/*.vue"],
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist",
+    "declarationDir": "dist",
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.lib.tsbuildinfo"
+  }
+}

blocksystem/vite.config.ts

@@ -1,18 +1,39 @@
 import { fileURLToPath, URL } from 'node:url'
 
-import { defineConfig } from 'vite'
+import { defineConfig, type PluginOption } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
-export default defineConfig({
+export default defineConfig(({ command }) => {
-  plugins: [
+  const plugins: PluginOption[] = [vue()]
-    vue(),
+
-    vueDevTools(),
+  if (command === 'serve') {
-  ],
+    plugins.push(vueDevTools())
+  }
+
+  return {
+    plugins,
     resolve: {
       alias: {
         '@': fileURLToPath(new URL('./src', import.meta.url))
       },
     },
+    build: {
+      lib: {
+        entry: fileURLToPath(new URL('./src/index.ts', import.meta.url)),
+        name: 'RenderMathProblems',
+        fileName: 'render-mathproblems',
+      },
+      rollupOptions: {
+        external: ['vue'],
+        output: {
+          exports: 'named',
+          globals: {
+            vue: 'Vue',
+          },
+        },
+      },
+    },
+  }
 })