@dropi/ui 0.1.55 → 999.0.0

package/scripts/setup.js

@@ -1,586 +0,0 @@
-#!/usr/bin/env node
-/**
- * setup.js — @dropi/ui CLI
- * 
- * Uso: npx @dropi/ui setup
- * 
- * Este script configura automáticamente la librería en proyectos:
- * - React (Vite)
- * - Angular
- * - Vue (Vite)
- */
-
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-
-// Determinar la raíz del proyecto consumidor
-const projectRoot = process.cwd();
-const isDependency = __dirname.includes('node_modules');
-const libraryPkgPath = isDependency 
-  ? path.join(__dirname, '..', 'package.json')
-  : path.join(__dirname, '..', 'package.json');
-
-// ── Helpers ──────────────────────────────────────────────────────────────────
-const getPkg = () => {
-  try { return JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8')); }
-  catch { return {}; }
-};
-
-const getPkgMgr = () => {
-  if (fs.existsSync(path.join(projectRoot, 'pnpm-lock.yaml'))) return 'pnpm';
-  if (fs.existsSync(path.join(projectRoot, 'yarn.lock'))) {
-    // Yarn Berry (v2+) requiere Corepack — detectar por el campo packageManager
-    const pkg = getPkg();
-    const pm = pkg.packageManager || '';
-    if (pm.startsWith('yarn@') && !pm.startsWith('yarn@1')) return 'yarn-berry';
-    return 'yarn';
-  }
-  return 'npm';
-};
-
-const log = (msg, type = 'info') => {
-  const colors = { info: '\x1b[36m', ok: '\x1b[32m', warn: '\x1b[33m', error: '\x1b[31m', reset: '\x1b[0m' };
-  const icons = { info: 'ℹ️', ok: '✅', warn: '⚠️', error: '❌' };
-  console.log(`${colors[type]}${icons[type]} ${msg}${colors.reset}`);
-};
-
-// ── Main ─────────────────────────────────────────────────────────────────────
-async function run() {
-  console.log('\n\x1b[1m\x1b[35m%s\x1b[0m', '  🚀 @dropi/ui — Configurator');
-  console.log('  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');
-
-  const pkg = getPkg();
-  if (!pkg.name) {
-    log('No se encontró package.json en la raíz. Ejecuta este comando desde la raíz de tu proyecto.', 'error');
-    process.exit(1);
-  }
-
-  // 1. Detección de Framework
-  const hasDep = (name) => !!(pkg.dependencies?.[name] || pkg.devDependencies?.[name]);
-  const isNextJs = hasDep('next');
-  const isAngular = hasDep('@angular/core');
-  const isReact = hasDep('react') && !isNextJs; // React puro (Vite/CRA), no Next.js
-  const isVue = hasDep('vue');
-  const framework = isAngular ? 'Angular' : isNextJs ? 'Next.js' : isReact ? 'React' : isVue ? 'Vue' : 'Desconocido';
-
-  log(`Entorno detectado: ${framework}`);
-
-  // Next.js — detectar si usa SSR
-  let isNextJsSsr = false;
-  if (isNextJs) {
-    const nextConfigFiles = ['next.config.ts', 'next.config.js', 'next.config.mjs'];
-    const hasStaticExport = nextConfigFiles.some(f => {
-      const p = path.join(projectRoot, f);
-      if (!fs.existsSync(p)) return false;
-      const c = fs.readFileSync(p, 'utf8');
-      // Detectar solo output: 'export' o output: "export" (no standalone ni otros)
-      return /output\s*:\s*["']export["']/.test(c);
-    });
-    const hasAppRouter = fs.existsSync(path.join(projectRoot, 'app')) || fs.existsSync(path.join(projectRoot, 'src', 'app'));
-    const hasPagesRouter = fs.existsSync(path.join(projectRoot, 'pages')) || fs.existsSync(path.join(projectRoot, 'src', 'pages'));
-    isNextJsSsr = (hasAppRouter || hasPagesRouter) && !hasStaticExport;
-    log(`Next.js SSR: ${isNextJsSsr ? 'activo' : 'static export (sin SSR)'}`);
-  }
-
-  // 2. Instalación de Dependencias
-  const pkgMgr = getPkgMgr();
-  const installCmd = pkgMgr === 'yarn-berry' ? 'corepack yarn add'
-    : pkgMgr === 'yarn' ? 'yarn add'
-    : pkgMgr === 'pnpm' ? 'pnpm add'
-    : 'npm install';
-
-  if ((isReact || isNextJs) && (!hasDep('@dropi/ui') || !hasDep('@dropi/ui-react'))) {
-    const toInstall = [
-      !hasDep('@dropi/ui') ? '@dropi/ui' : null,
-      !hasDep('@dropi/ui-react') ? '@dropi/ui-react' : null,
-    ].filter(Boolean).join(' ');
-    log(`Instalando ${toInstall}...`);
-    try {
-      execSync(`${installCmd} ${toInstall}`, { stdio: 'inherit', cwd: projectRoot });
-      log(`${toInstall} instalado.`, 'ok');
-    } catch (e) {
-      log(`Error instalando ${toInstall}. Intenta instalarlo manualmente.`, 'warn');
-    }
-  }
-
-  if (isNextJsSsr && !hasDep('@stencil/ssr')) {
-    log('Next.js SSR → Instalando @stencil/ssr...');
-    try {
-      const stencilCmd = pkgMgr === 'npm'
-        ? `${installCmd} --save-dev @stencil/ssr --legacy-peer-deps`
-        : `${installCmd} --dev @stencil/ssr`;
-      execSync(stencilCmd, { stdio: 'inherit', cwd: projectRoot });
-      log('@stencil/ssr instalado.', 'ok');
-    } catch (e) {
-      log('Error instalando @stencil/ssr. Intenta instalarlo manualmente: npm install --save-dev @stencil/ssr --legacy-peer-deps', 'warn');
-    }
-  }
-
-  // 3. Estilos Globales
-  const cssImport = "import '@dropi/ui/dist/dropi-ui/dropi-ui.css';";
-  let styleTarget = null;
-
-  // ── Next.js: next.config + globals.css ──────────────────────────────────────
-  if (isNextJs) {
-    // 3a. next.config — agregar withStencil + transpilePackages
-    const nextConfigFiles = ['next.config.ts', 'next.config.js', 'next.config.mjs'];
-    const nextConfigFile = nextConfigFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
-
-    if (isNextJsSsr) {
-      if (nextConfigFile) {
-        const configPath = path.join(projectRoot, nextConfigFile);
-        let cfg = fs.readFileSync(configPath, 'utf8');
-        let cfgChanged = false;
-
-        if (!cfg.includes('withStencil')) {
-          // Agregar import de withStencil después del último import existente
-          const importLine = "import withStencil from '@stencil/ssr/next';\n";
-          const lastImport = [...cfg.matchAll(/^import .+;?\s*$/gm)].pop();
-          if (lastImport) {
-            const pos = lastImport.index + lastImport[0].length;
-            cfg = cfg.slice(0, pos) + '\n' + importLine + cfg.slice(pos);
-          } else {
-            cfg = importLine + cfg;
-          }
-
-          // Envolver el export default con withStencil
-          // Detectar la variable de config (nextConfig, config, etc.) en el export
-          // Soporta: export default nextConfig
-          //          export default anyPlugin(nextConfig)
-          //          export default anyPlugin()(nextConfig)
-          const stencilWrap = (configVar) =>
-            `withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n  serializeShadowRoot: { default: 'declarative-shadow-dom' },\n})(${configVar})`;
-
-          // Caso 1: export default bareConfig (sin wrapper)
-          if (/export default (nextConfig|config)\s*;/.test(cfg)) {
-            cfg = cfg.replace(
-              /export default (nextConfig|config)\s*;/,
-              (_, v) => `export default ${stencilWrap(v)};`
-            );
-          // Caso 2: export default wrapper(...(configVar)) — insertar withStencil como argumento interno
-          } else {
-            // Encontrar la variable de config: última palabra antes del cierre del export default
-            const exportMatch = cfg.match(/export default [\w$().\s]*\((\w+)\)\s*;/);
-            if (exportMatch) {
-              const configVar = exportMatch[1];
-              cfg = cfg.replace(
-                new RegExp(`(export default [\\w$().\\s]*)\\(${configVar}\\)(\\s*;)`),
-                (_, prefix, suffix) => `${prefix}(${stencilWrap(configVar)})${suffix}`
-              );
-            }
-          }
-          cfgChanged = true;
-        }
-
-        // Agregar transpilePackages si no está
-        if (!cfg.includes('transpilePackages')) {
-          cfg = cfg.replace(
-            /(const nextConfig[^=]*=\s*\{)/,
-            `$1\n  transpilePackages: ['@dropi/ui-react', '@dropi/ui'],`
-          );
-          cfgChanged = true;
-        }
-
-        if (cfgChanged) {
-          fs.writeFileSync(configPath, cfg);
-          log(`${nextConfigFile}: configuración SSR aplicada.`, 'ok');
-        } else {
-          log(`${nextConfigFile}: ya configurado, omitiendo.`, 'info');
-        }
-      } else {
-        // Crear next.config.ts desde cero
-        const newCfg = `import type { NextConfig } from 'next';
-import withStencil from '@stencil/ssr/next';
-
-const nextConfig: NextConfig = {
-  transpilePackages: ['@dropi/ui-react', '@dropi/ui'],
-};
-
-export default withStencil({
-  from: '@dropi/ui-react',
-  module: import('@dropi/ui-react/next'),
-  hydrateModule: import('@dropi/ui/hydrate'),
-  serializeShadowRoot: { default: 'declarative-shadow-dom' },
-})(nextConfig);
-`;
-        fs.writeFileSync(path.join(projectRoot, 'next.config.ts'), newCfg);
-        log('next.config.ts creado con configuración SSR.', 'ok');
-      }
-    }
-
-    // 3b. globals.css — agregar import + CSS resets SSR
-    const cssSsrResets = `
-/* dropi-ui.css sets *{text-align:left} — reset shadow DOM hosts */
-[class*="dropi-"], dropi-button, dropi-badge, dropi-icon, dropi-avatar,
-dropi-input, dropi-select, dropi-modal, dropi-toast, dropi-table,
-dropi-skeleton, dropi-chip, dropi-tag, dropi-checkbox, dropi-radio,
-dropi-dropdown, dropi-card-product, dropi-alert, dropi-banner-external,
-dropi-paginator, dropi-date-picker-range, dropi-file-upload,
-dropi-otp-send-code, dropi-phone-input, dropi-media-player,
-dropi-color-picker, dropi-city-selector, dropi-languages-selector,
-dropi-ilustration-icon, dropi-empty-state, dropi-favorite-button,
-dropi-logo, dropi-avatars {
-  text-align: initial;
-}
-`;
-    const globalsCssCandidates = [
-      path.join(projectRoot, 'src', 'app', 'globals.css'),
-      path.join(projectRoot, 'app', 'globals.css'),
-      path.join(projectRoot, 'styles', 'globals.css'),
-      path.join(projectRoot, 'src', 'styles', 'globals.css'),
-    ];
-    const globalsCssPath = globalsCssCandidates.find(f => fs.existsSync(f));
-
-    if (globalsCssPath) {
-      let css = fs.readFileSync(globalsCssPath, 'utf8');
-      let cssChanged = false;
-      if (!css.includes('dropi-ui.css')) {
-        css = `@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';\n` + css;
-        cssChanged = true;
-      }
-      if (!css.includes('text-align: initial')) {
-        css += cssSsrResets;
-        cssChanged = true;
-      }
-      if (cssChanged) {
-        fs.writeFileSync(globalsCssPath, css);
-        log(`${path.relative(projectRoot, globalsCssPath)}: estilos y resets SSR aplicados.`, 'ok');
-      } else {
-        log(`${path.relative(projectRoot, globalsCssPath)}: ya configurado, omitiendo.`, 'info');
-      }
-    } else {
-      // Crear globals.css en src/app/ o app/
-      const appDir = fs.existsSync(path.join(projectRoot, 'src', 'app'))
-        ? path.join(projectRoot, 'src', 'app')
-        : path.join(projectRoot, 'app');
-      if (fs.existsSync(appDir)) {
-        const newCss = `@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';\n${cssSsrResets}`;
-        const newCssPath = path.join(appDir, 'globals.css');
-        fs.writeFileSync(newCssPath, newCss);
-        log('globals.css creado con estilos y resets SSR.', 'ok');
-        log('Recuerda importarlo en tu layout.tsx: import "./globals.css"', 'warn');
-      }
-    }
-
-    // 3c. Lottie en layout.tsx (App Router) o _document.tsx (Pages Router)
-    const layoutCandidates = [
-      path.join(projectRoot, 'src', 'app', 'layout.tsx'),
-      path.join(projectRoot, 'app', 'layout.tsx'),
-      path.join(projectRoot, 'src', 'app', 'layout.jsx'),
-      path.join(projectRoot, 'app', 'layout.jsx'),
-    ];
-    const layoutPath = layoutCandidates.find(f => fs.existsSync(f));
-    if (layoutPath) {
-      let layout = fs.readFileSync(layoutPath, 'utf8');
-      let layoutChanged = false;
-
-      // Agregar suppressHydrationWarning al <body>
-      if (!layout.includes('suppressHydrationWarning')) {
-        layout = layout.replace(/<body(\s[^>]*)?>/, (_, attrs) => {
-          const existing = attrs || '';
-          return `<body${existing} suppressHydrationWarning>`;
-        });
-        layoutChanged = true;
-      }
-
-      // Agregar Lottie script antes del cierre de </body>
-      if (!layout.includes('lottie-player.js')) {
-        layout = layout.replace(
-          /(<\/body>)/,
-          `        {/* lottie-player: needed by DropiAlertModal animations */}\n        <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js" async />\n      $1`
-        );
-        layoutChanged = true;
-      }
-
-      if (layoutChanged) {
-        fs.writeFileSync(layoutPath, layout);
-        log(`${path.relative(projectRoot, layoutPath)}: layout configurado.`, 'ok');
-      }
-    }
-
-    // Agregar --webpack a scripts dev/build si Next.js >= 16 (Turbopack incompatible con @stencil/ssr)
-    if (isNextJsSsr) {
-      const nextVersion = pkg.dependencies?.['next'] || pkg.devDependencies?.['next'] || '';
-      const majorVersion = parseInt(nextVersion.replace(/[^0-9]/, ''), 10);
-      if (majorVersion >= 16) {
-        const pkgPath = path.join(projectRoot, 'package.json');
-        let projectPkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-        let pkgChanged = false;
-        ['dev', 'build'].forEach(script => {
-          if (projectPkg.scripts?.[script] && !projectPkg.scripts[script].includes('--webpack')) {
-            projectPkg.scripts[script] += ' --webpack';
-            pkgChanged = true;
-          }
-        });
-        if (pkgChanged) {
-          fs.writeFileSync(pkgPath, JSON.stringify(projectPkg, null, 2) + '\n');
-          log('package.json: --webpack agregado a scripts dev/build (Next.js 16+ requiere webpack con @stencil/ssr).', 'ok');
-        }
-      }
-    }
-  }
-
-  if (isAngular) {
-    const scssPath = path.join(projectRoot, 'src', 'styles.scss');
-    if (fs.existsSync(scssPath)) {
-      let content = fs.readFileSync(scssPath, 'utf8');
-      if (!content.includes('dropi-ui.css')) {
-        content = `@import '@dropi/ui/dist/dropi-ui/dropi-ui.css';\n` + content;
-        fs.writeFileSync(scssPath, content);
-        log('Estilos agregados a src/styles.scss', 'ok');
-      }
-    }
-  } else {
-    // React o Vue (Vite)
-    const entryPoints = ['src/main.tsx', 'src/main.ts', 'src/index.tsx', 'src/index.js'];
-    styleTarget = entryPoints.find(f => fs.existsSync(path.join(projectRoot, f)));
-    
-    if (styleTarget) {
-      let content = fs.readFileSync(path.join(projectRoot, styleTarget), 'utf8');
-      let changed = false;
-
-      // Migrar loader antiguo → nuevo bootstrap (si tiene defineCustomElements del loader)
-      if (content.includes("from '@dropi/ui/loader'") || content.includes('from "@dropi/ui/loader"')) {
-        content = content
-          .replace(/\/\/\s*@ts-ignore[^\n]*\n/g, '')
-          .replace(/import\s+\{[^}]*defineCustomElements[^}]*\}\s+from\s+['"]@dropi\/ui\/loader['"];?\n?/g, '')
-          .replace(/defineCustomElements\([^)]*\);?\n?/g, '');
-        log(`Loader antiguo eliminado de ${styleTarget}`, 'ok');
-        changed = true;
-      }
-
-      // Agregar bootstrap side-effect si no está
-      if (!content.includes('dropi-ui.esm.js')) {
-        content = `// @ts-ignore\nimport '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js';\n` + content;
-        changed = true;
-      }
-
-      // Agregar CSS si no está
-      if (!content.includes('dropi-ui.css')) {
-        content = `${cssImport}\n` + content;
-        changed = true;
-      }
-
-      if (changed) {
-        fs.writeFileSync(path.join(projectRoot, styleTarget), content);
-        log(`Configuración aplicada en ${styleTarget}`, 'ok');
-      }
-    }
-  }
-
-  // 5. Iconos y Lottie (Symlink/Copia de assets)
-  const publicDir = isAngular ? 'src/assets' : 'public';
-
-  // Resolver ruta real de @dropi/ui (compatible con npm, Yarn Berry, monorepos)
-  let dropiUiRoot;
-  try {
-    // Intento 1: resolver desde la exportación principal y subir al root del paquete
-    // (evita ERR_PACKAGE_PATH_NOT_EXPORTED que ocurre al resolver './package.json')
-    const mainFile = require.resolve('@dropi/ui', { paths: [projectRoot] });
-    let dir = path.dirname(mainFile);
-    while (dir !== path.dirname(dir)) {
-      const pkgPath = path.join(dir, 'package.json');
-      if (fs.existsSync(pkgPath)) {
-        try {
-          if (JSON.parse(fs.readFileSync(pkgPath, 'utf8')).name === '@dropi/ui') {
-            dropiUiRoot = dir;
-            break;
-          }
-        } catch (_) {}
-      }
-      dir = path.dirname(dir);
-    }
-  } catch (e1) {}
-
-  if (!dropiUiRoot) {
-    // Intento 2: buscar en árbol de directorios (monorepos con hoisting)
-    let dir = projectRoot;
-    while (dir !== path.dirname(dir)) {
-      const candidate = path.join(dir, 'node_modules', '@dropi', 'ui');
-      if (fs.existsSync(path.join(candidate, 'package.json'))) {
-        dropiUiRoot = candidate;
-        break;
-      }
-      dir = path.dirname(dir);
-    }
-  }
-
-  // Fallback convencional
-  if (!dropiUiRoot) dropiUiRoot = path.join(projectRoot, 'node_modules', '@dropi', 'ui');
-
-  const setupAsset = (srcRelativePath, destRelativePath) => {
-    const src = path.join(dropiUiRoot, srcRelativePath);
-    const dest = path.join(projectRoot, publicDir, destRelativePath);
-    const destDir = path.dirname(dest);
-
-    if (!fs.existsSync(src)) {
-      log(`Assets no encontrados: ${srcRelativePath}. Verifica que @dropi/ui esté instalado.`, 'warn');
-      return;
-    }
-
-    if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true });
-
-    // Limpiar dest con lstatSync — detecta symlinks rotos que existsSync ignora
-    try {
-      const stat = fs.lstatSync(dest);
-      if (stat.isDirectory() && !stat.isSymbolicLink()) {
-        fs.rmSync(dest, { recursive: true, force: true });
-      } else {
-        fs.unlinkSync(dest); // funciona para symlinks, broken symlinks y archivos
-      }
-    } catch (_) {
-      // dest no existe, todo bien
-    }
-
-    // Intentar symlink primero
-    try {
-      fs.symlinkSync(src, dest, fs.lstatSync(src).isDirectory() ? 'dir' : 'file');
-      log(`Assets configurados: ${destRelativePath} (Symlink ✅)`, 'ok');
-      return;
-    } catch (_) {}
-
-    // Fallback: copia directa
-    try {
-      if (fs.lstatSync(src).isDirectory()) {
-        fs.cpSync ? fs.cpSync(src, dest, { recursive: true }) : execSync(`cp -R "${src}" "${dest}"`);
-      } else {
-        fs.copyFileSync(src, dest);
-      }
-      log(`Assets copiados: ${destRelativePath} (Copia ✅)`, 'ok');
-    } catch (copyErr) {
-      log(`Error al copiar ${destRelativePath}: ${copyErr.message}`, 'warn');
-    }
-  };
-
-  // Ilustraciones (servidas desde node_modules/@dropi/ui, no requieren copia si basePath es el default)
-  setupAsset('assets/icons/ilustration', 'assets/icons/ilustration');
-  // Archivos Lottie (servidos desde node_modules/@dropi/ui, no requieren copia si loadingAnimation es el default)
-  setupAsset('assets/lottie-files', 'assets/lottie-files');
-
-  // 6. Lottie Player Script (index.html — solo React/Vue/Angular, Next.js lo maneja en layout.tsx arriba)
-  const lottieScript = '<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>';
-  const htmlFiles = ['index.html', 'src/index.html', 'public/index.html'];
-  const htmlFile = !isNextJs && htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
-  
-  if (htmlFile) {
-    const htmlPath = path.join(projectRoot, htmlFile);
-    let content = fs.readFileSync(htmlPath, 'utf8');
-    if (!content.includes('lottie-player.js')) {
-      if (content.includes('</body>')) {
-        content = content.replace('</body>', `  ${lottieScript}\n</body>`);
-      } else {
-        content += `\n${lottieScript}`;
-      }
-      fs.writeFileSync(htmlPath, content);
-      log(`Lottie: Script agregado a ${htmlFile}`, 'ok');
-    }
-  }
-
-  // 7. Vite Patch (React/Vue — no Next.js)
-  if ((isReact || isVue) && !isNextJs) {
-    const viteFiles = ['vite.config.ts', 'vite.config.js'];
-    const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
-    if (viteFile) {
-      const isTs = viteFile.endsWith('.ts');
-      const existing = fs.readFileSync(path.join(projectRoot, viteFile), 'utf8');
-      const alreadyConfigured = existing.includes('dropi-components-stub') || existing.includes('dropiWatchPlugin');
-
-      if (!alreadyConfigured) {
-        // Detectar el import del framework (react o vue)
-        const frameworkImport = isReact
-          ? "import react from \"@vitejs/plugin-react\";"
-          : "import vue from \"@vitejs/plugin-vue\";";
-        const frameworkPlugin = isReact ? 'react()' : 'vue()';
-
-        const dropiViteConfig = `import { defineConfig${isTs ? ', type Plugin' : ''} } from "vite";
-${frameworkImport}
-import path from "path";
-import fs from "fs";
-
-// Path real del symlink @dropi/ui → garantiza que se usa siempre el código local
-const dropiUiRealPath = (() => {
-  try { return fs.realpathSync(path.join(process.cwd(), 'node_modules/@dropi/ui')); }
-  catch { return path.join(process.cwd(), 'node_modules/@dropi/ui'); }
-})();
-
-// Stub para dist/components/<component>.js cuando no existe (stencil --dev --watch no los genera).
-// El lazy loader de dropi-ui.esm.js registra los componentes con el CSS actualizado.
-const dropiComponentsStubPlugin${isTs ? ': Plugin' : ''} = {
-  name: 'dropi-components-stub',
-  apply: 'serve',
-  enforce: 'pre',
-  resolveId(id) {
-    let filePath = null;
-    if (id.match(/^@dropi\\/ui\\/dist\\/components\\/.+\\.js$/)) {
-      filePath = path.join(dropiUiRealPath, id.replace('@dropi/ui', ''));
-    } else if (id.endsWith('.js') && id.includes('/dist/components/') && id.includes('dropi')) {
-      filePath = id;
-    }
-    if (filePath && !fs.existsSync(filePath)) {
-      return '\\0dropi-stub:' + filePath;
-    }
-  },
-  load(id) {
-    if (id.startsWith('\\0dropi-stub:')) {
-      const fileName = id.split('/').pop()?.replace('.js', '') ?? 'DropiUnknown';
-      const className = fileName
-        .replace(/-([a-z])/g, (_, c) => c.toUpperCase())
-        .replace(/^[a-z]/, c => c.toUpperCase());
-      return \`export class \${className} extends HTMLElement {} export function defineCustomElement() {}\`;
-    }
-  },
-};
-
-// Detecta cambios en dist/ de la librería y fuerza full-reload en el browser.
-const dropiWatchPlugin${isTs ? ': Plugin' : ''} = {
-  name: 'dropi-watch',
-  apply: 'serve',
-  configureServer(server) {
-    const distPath = path.join(dropiUiRealPath, 'dist');
-    if (fs.existsSync(distPath)) server.watcher.add(distPath);
-  },
-  handleHotUpdate({ file, server }) {
-    if (file.includes('dropi-ui') && file.includes('dist')) {
-      for (const [modPath, mods] of server.moduleGraph.fileToModulesMap) {
-        if (modPath.includes('dropi-ui') && modPath.includes('dist')) {
-          for (const mod of mods) server.moduleGraph.invalidateModule(mod);
-        }
-      }
-      server.ws.send({ type: 'full-reload' });
-      return [];
-    }
-  },
-};
-
-// https://vite.dev/config/
-export default defineConfig({
-  resolve: {
-    alias: { '@dropi/ui': dropiUiRealPath },
-  },
-  optimizeDeps: {
-    exclude: ['@dropi/ui', '@dropi/ui-react'],
-  },
-  server: {
-    headers: { 'Cache-Control': 'no-cache, no-store, must-revalidate' },
-    fs: { allow: [process.cwd(), dropiUiRealPath] },
-  },
-  plugins: [${frameworkPlugin}, dropiComponentsStubPlugin, dropiWatchPlugin],
-});
-`;
-        fs.writeFileSync(path.join(projectRoot, viteFile), dropiViteConfig);
-        log('Vite: configuración completa de @dropi/ui aplicada.', 'ok');
-      } else {
-        log('Vite: configuración de @dropi/ui ya presente, omitiendo.', 'info');
-      }
-    }
-  }
-
-  console.log('\n\x1b[32m%s\x1b[0m', '  ✨ ¡Configuración completada!');
-  console.log('  Vuelve a iniciar tu servidor de desarrollo para ver lo cambios.\n');
-}
-
-run().catch(err => {
-  console.error('\n❌ Error en el setup:', err);
-  process.exit(1);
-});

package/scripts/strip-use-client.mjs

@@ -1,20 +0,0 @@
-import { readFileSync, writeFileSync, existsSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const root = resolve(dirname(fileURLToPath(import.meta.url)), '..');
-const targets = [
-  'packages/react/dist/components.server.js',
-  'packages/react/src/components.server.ts',
-];
-
-for (const rel of targets) {
-  const filePath = resolve(root, rel);
-  if (!existsSync(filePath)) continue;
-  const content = readFileSync(filePath, 'utf8');
-  const stripped = content.replace(/^'use client';\s*\n+/, '');
-  if (content !== stripped) {
-    writeFileSync(filePath, stripped);
-    console.log(`[strip-use-client] stripped from ${rel}`);
-  }
-}

package/skills/install-dropi-ui/cursor.mdc

@@ -1,5 +0,0 @@
-# @dropi/ui — Configuración pendiente
-
-Este proyecto tiene `@dropi/ui` instalado pero necesita configuración.
-Ejecuta el script de instalación oficial: `node node_modules/@dropi/ui/scripts/setup.js`.
-Una vez completado, verifica los estilos y el sprite de iconos en la carpeta public.

package/skills/install-dropi-ui/skill.md

@@ -1,70 +0,0 @@
----
-name: install-dropi-ui
-description: Instala y configura automáticamente @dropi/ui en Angular, React o Vue sin intervención manual
-allowed-tools: Bash, Read, Write, Edit, Glob
----
-
-# Skill: /install-dropi-ui
-
-Automatiza la instalación y configuración completa de `@dropi/ui` en el proyecto actual.
-
-## REGLA CRÍTICA — Bootstrap con side-effect import
-
-Los componentes SIEMPRE deben inicializarse con el bootstrap de side-effect:
-```ts
-// @ts-ignore
-import '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js'
-```
-Este import auto-registra todos los web components en modo lazy (funciona en dev y prod, sin necesitar un prod build previo).
-
-**PROHIBIDO** usar el loader antiguo o importar componentes directamente:
-```ts
-// ❌ NUNCA — solo funciona después de prod build
-import { defineCustomElements } from '@dropi/ui/loader'
-defineCustomElements()
-
-// ❌ NUNCA
-import '@dropi/ui/dist/components/dropi-button.js'
-```
-
----
-
-## Instrucciones de Instalación
-
-Para configurar la librería, el asistente de IA debe ejecutar el script de automatización oficial incluido en el paquete. Esto garantiza que la detección de framework y la configuración de iconos/estilos se realicen correctamente según los estándares de Dropi.
-
-### 1. Ejecutar el script de Setup
-
-Ejecuta el siguiente comando en la terminal del proyecto:
-
-```bash
-node node_modules/@dropi/ui/scripts/setup.js
-```
-
-### 2. Verificación
-
-Una vez finalizado el script, verifica que:
-- Los iconos carguen correctamente (sin errores 404 en el sprite).
-- Los estilos globales estén inyectados en el punto de entrada principal (`main.tsx`, `main.ts`, etc.).
-- Si es React, el paquete `@dropi/ui-react` esté instalado.
-
----
-
-## Fallback Manual (Solo si el script falla)
-
-> [!WARNING]
-> Usa estos pasos solo si el comando anterior no puede ejecutarse por restricciones del entorno.
-
-1. **Instalar dependencias**: `npm install @dropi/ui` (y `@dropi/ui-react` si es React).
-2. **Vite Fix**: Agregar `optimizeDeps.exclude: ['@dropi/ui']` en `vite.config`.
-3. **Estilos**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en el entry point.
-4. **Bootstrap**: Agregar el side-effect import `// @ts-ignore\nimport '@dropi/ui/dist/dropi-ui/dropi-ui.esm.js'` antes del render.
-5. **Iconos**: Crear un enlace simbólico del sprite:
-   `ln -sf $(pwd)/node_modules/@dropi/ui/assets/icons/symbol/svg/sprite.css.svg public/assets/icons/symbol/svg/sprite.css.svg`
-6. **TS Config**: Asegurar `skipLibCheck: true`.
-7. **Validar**: Ejecutar `npm run build`.
-
-## Reglas Críticas
-- **Bootstrap**: NUNCA usar `@dropi/ui/loader` (solo funciona con prod build). Usar siempre el side-effect import.
-- **Iconos**: El sprite DEBE estar en `public/assets/icons/symbol/svg/sprite.css.svg` para que `<dropi-icon>` funcione.
-- Si el build falla, mostrar el error exacto y resolverlo antes de reportar éxito