@dropi/ui 0.1.20 → 0.1.22

package/hydrate/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@dropi/ui/hydrate",
+  "description": "DropiUi component hydration app.",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./index.js",
+      "import": "./index.mjs"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dropi/ui",
-  "version": "0.1.20",
+  "version": "0.1.22",
   "description": "Dropi Design System — Web Components for Angular, React and Vue",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -20,13 +20,24 @@
       "types": "./loader/index.d.ts"
     },
     "./dist/components/*.js": {
+      "types": "./dist/components/*.d.ts",
       "import": "./dist/components/*.js",
       "require": "./dist/components/*.js"
     },
-    "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css"
+    "./dist/dropi-ui/*.js": {
+      "import": "./dist/dropi-ui/*.js",
+      "require": "./dist/dropi-ui/*.js"
+    },
+    "./dist/dropi-ui/dropi-ui.css": "./dist/dropi-ui/dropi-ui.css",
+    "./hydrate": {
+      "import": "./hydrate/index.mjs",
+      "require": "./hydrate/index.js",
+      "types": "./hydrate/index.d.ts"
+    }
   },
   "files": [
     "dist/",
+    "hydrate/",
     "loader/",
     "assets/",
     "skills/",
@@ -35,22 +46,39 @@
   "bin": {
     "@dropi/ui": "scripts/setup.js"
   },
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "build": "stencil build && cd ../dropi-ui-react && npm run build",
+    "build": "stencil build && npm run build --workspace=packages/react && npm run build --workspace=packages/angular",
+    "clear:cache": "node -e \"const fs=require('fs');['.stencil','node_modules/.cache'].forEach(p=>{try{fs.rmSync(p,{recursive:true,force:true})}catch(e){}})\"",
+    "publish:react": "npm run build && npm publish --workspace=packages/react",
+    "dev": "stencil build --dev --watch & npm run watch --workspace=packages/react",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test",
     "test:watch": "stencil-test --watch",
     "generate": "stencil generate",
-    "postinstall": "node scripts/postinstall.js"
+    "postinstall": "node scripts/postinstall.js",
+    "storybook": "stencil build && storybook dev -p 6006",
+    "storybook:build": "stencil build && storybook build -o storybook-static",
+    "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
     "@stencil/angular-output-target": "^1.3.0",
     "@stencil/core": "^4.27.1",
-    "@stencil/react-output-target": "^1.4.2",
+    "@stencil/react-output-target": "^1.5.0",
     "@stencil/vitest": "^1.8.3",
     "@stencil/vue-output-target": "^0.13.1",
+    "@storybook/addon-docs": "^8.6.18",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/web-components": "^8.6.18",
+    "@storybook/web-components-vite": "^8.6.18",
     "@types/node": "^22.13.5",
     "@vitest/browser-playwright": "^4.0.0",
+    "lit": "^3.3.2",
+    "lit-html": "^3.3.2",
+    "storybook": "^8.6.18",
     "vitest": "^4.0.0"
   },
   "license": "MIT"

package/readme.md

@@ -10,18 +10,13 @@ Genera componentes reutilizables para Angular, React y Vue desde una única base
 
 ## ⚡ Quick Start (Recomendado)
 
-La forma más rápida y segura de integrar la librería es usando nuestro configurador automático.
+Ejecuta este comando en la raíz de tu proyecto:
 
-### Con IA (Claude / Cursor / Windsurf)
-Si usas un asistente de IA, simplemente dile:
-> **`/install-dropi-ui`** o **"configura dropi-ui en este proyecto"**
-
-### Manual (Terminal)
-Ejecuta el siguiente comando en la raíz de tu proyecto:
 ```bash
-npx @dropi/ui setup
+npx @dropi/create-dropi-ui
 ```
-*Este comando detectará tu framework (Angular, React o Vue), instalará las dependencias necesarias y configurará estilos, iconos, animaciones Lottie y scripts automáticamente.*
+
+Detecta tu framework (Angular, React, Next.js), instala las dependencias correctas e inyecta la configuración automáticamente.
 
 ---
 
@@ -32,25 +27,57 @@ Si prefieres realizar la configuración paso a paso, consulta la [Guía de Integ
 ### 1. Paquetes
 | Framework | Paquete a instalar |
 |---|---|
+| Angular | `npm install @dropi/ui @dropi/ui-angular` |
 | React | `npm install @dropi/ui @dropi/ui-react` |
-| Angular / Vue / Vanilla | `npm install @dropi/ui` |
+| Next.js SSR | `npm install @dropi/ui @dropi/ui-react && npm install --save-dev @stencil/ssr` |
 
 ### 2. Estilos e Iconos
-- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point.
-- **Loader**: Llamar a `defineCustomElements()` de `@dropi/ui/loader`.
+- **CSS**: Importar `@dropi/ui/dist/dropi-ui/dropi-ui.css` en tu entry point global.
+- **Registro de componentes**: No hace falta llamar `defineCustomElements()`. Cada wrapper de `@dropi/ui-react` y `@dropi/ui-angular` registra su custom element automáticamente.
+- **SSR (Next.js)**: Configurar `next.config.ts` con `withStencil()` e importar desde `@dropi/ui-react/next` en Server Components.
 - **Iconos**: El componente `<dropi-icon>` requiere que el sprite SVG esté en `/assets/icons/symbol/svg/sprite.css.svg`.
 
 ---
 
-## Cómo pasar props — regla fundamental
+## 🚀 Soporte para Next.js (SSR)
+
+Para habilitar el **Server Side Rendering (SSR)** y evitar parpadeos (flashes) de contenido, sigue estos pasos:
+
+### 1. Configuración de Next.js
+Envuelve tu configuración de Next.js en el plugin `withStencil`:
+
+```typescript
+// next.config.ts
+import withStencil from "@stencil/ssr/next";
+
+const nextConfig = { ... };
 
-Cada prop se pasa **directamente en el JSX**, una por una. No existe un prop contenedor tipo `selectProperties` u `options` agrupadas.
+export default withStencil({
+  from: "@dropi/ui-react",
+  module: import("@dropi/ui-react/next"),
+  hydrateModule: import("@dropi/ui/hydrate"),
+})(nextConfig);
+```
+
+### 2. Uso en Componentes (Server Components)
+Para que Next.js pre-renderice los componentes con **Declarative Shadow DOM**, usa el entry point `/next`:
 
 ```tsx
-// ❌ Incorrecto — selectProperties no existe como prop
-<DropiSelect selectProperties={{ label: 'País', placeholder: 'Seleccionar' }} />
+// ✅ Correcto: Se renderiza en el servidor
+import { DropiButton } from "@dropi/ui-react/next";
+
+// ❌ Incorrecto: Provoca parpadeo y requiere "use client"
+import { DropiButton } from "@dropi/ui-react";
+```
+
+---
+
+## Cómo pasar props
+
+Hay **dos formas válidas**, ambas funcionan:
 
-// ✅ Correcto — cada prop va suelta en el tag
+### Forma 1 — Props individuales (React / Vanilla)
+```tsx
 <DropiSelect
   label="País"
   placeholder="Seleccionar"
@@ -59,7 +86,21 @@ Cada prop se pasa **directamente en el JSX**, una por una. No existe un prop con
 />
 ```
 
-Esto aplica para todos los componentes. Las props disponibles están listadas en cada sección de este readme.
+### Forma 2 — Objeto de compatibilidad Angular (equivalente al core)
+Los componentes principales aceptan un prop-objeto que replica la API del `@Input()` del core Angular:
+
+| Componente | Prop objeto | Equivale al `@Input()` Angular |
+|---|---|---|
+| `dropi-select` | `[selectProperties]="selectProperties"` | `SelectProperties` |
+| `dropi-input` | `[inputProperties]="inputProperties"` | `InputProperties` |
+| `dropi-text-area` | `[textAreaProperties]="textAreaProperties"` | `TextAreaProperties` |
+| `dropi-alert-modal` | `[params]="params"` | `ModalParams` |
+
+```html
+<!-- Angular — forma idéntica al core -->
+<dropi-select [selectProperties]="selectProperties" (onChangeSelect)="onChange($event)" />
+<dropi-alert-modal [visible]="visible" [params]="params" (primaryButtonEvent)="onPrimary($event)" />
+```
 
 > **Intellisense en VSCode:** si al hacer hover sobre un componente no aparecen las props, significa que `@dropi/ui-react` necesita ser compilado (`npm run build` en la carpeta `dropi-ui-react`). Después de cualquier cambio en la librería siempre hay que correr el build.
 
@@ -609,6 +650,44 @@ Burbuja de información al hover.
 
 ---
 
+### `<dropi-table>`
+
+Tabla de datos con paginación local/backend, ordenación, búsqueda y checkbox de selección.
+
+> ⚠️ Las filas van en formato **TypedField** (no objetos planos): `{ name: { type: 'text', value: 'Ana' } }`
+
+**Props principales**
+
+| Prop | Tipo | Default | Descripción |
+|---|---|---|---|
+| `headers` | `DropiTableColumn[]` | `[]` | Columnas `{ key, label, sortable }` |
+| `data` | `DropiTableRow[]` | `[]` | Filas en formato TypedField |
+| `dropiTableConfiguration` | `DropiTableConfiguration` | `null` | Config: paginación, búsqueda, acciones |
+| `loading` | `boolean` | `false` | Indicador de carga |
+
+**Eventos**
+
+| Evento | `e.detail` | Cuándo |
+|---|---|---|
+| `rowsSelected` | `DropiTableRow[]` | Checkbox cambia selección |
+| `onSortChange` | `{ column, asc }` | Click en columna ordenable |
+| `onPageChange` | `number` | Cambio de página (backend) |
+| `actionClicked` | `{ row, action }` | Click en acción de fila |
+
+**Ejemplo Angular**
+```html
+<dropi-table
+  [headers]="headers"
+  [data]="data"
+  [dropiTableConfiguration]="{ backendPagination: false, showPaginator: true, pageSizeConfiguration: [5, 10, 25] }"
+  [loading]="loading"
+  (onSortChange)="onSort($event)"
+  (rowsSelected)="onSelect($event)"
+/>
+```
+
+---
+
 ### `<dropi-modal>`
 
 Ventana de diálogo con overlays.

package/scripts/setup.js

@@ -52,19 +52,36 @@ async function run() {
 
   // 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');
+  const isReact = hasDep('react') && !isNextJs; // React puro (Vite/CRA), no Next.js
   const isVue = hasDep('vue');
-  const framework = isAngular ? 'Angular' : isReact ? 'React' : isVue ? 'Vue' : 'Desconocido';
+  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');
+      return c.includes('output') && c.includes('export');
+    });
+    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' ? 'yarn add' : pkgMgr === 'pnpm' ? 'pnpm add' : 'npm install';
 
-  if (isReact && !hasDep('@dropi/ui-react')) {
-    log(`Proyecto React detectado → Instalando @dropi/ui-react...`);
+  if ((isReact || isNextJs) && !hasDep('@dropi/ui-react')) {
+    log(`Instalando @dropi/ui-react...`);
     try {
       execSync(`${installCmd} @dropi/ui-react`, { stdio: 'inherit', cwd: projectRoot });
       log('@dropi/ui-react instalado.', 'ok');
@@ -73,10 +90,178 @@ async function run() {
     }
   }
 
+  if (isNextJsSsr && !hasDep('@stencil/ssr')) {
+    log('Next.js SSR → Instalando @stencil/ssr...');
+    try {
+      execSync(`${installCmd} --save-dev @stencil/ssr`, { stdio: 'inherit', cwd: projectRoot });
+      log('@stencil/ssr instalado.', 'ok');
+    } catch (e) {
+      log('Error instalando @stencil/ssr. Intenta instalarlo manualmente.', '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
+          cfg = cfg.replace(
+            /export default (nextConfig|defineNextConfig\([^)]*\));?/,
+            `export default withStencil({\n  from: '@dropi/ui-react',\n  module: import('@dropi/ui-react/next'),\n  hydrateModule: import('@dropi/ui/hydrate'),\n})($1);`
+          );
+          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'),
+})(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;
+}
+
+/* Prevent invisible flash before hydration completes */
+[class*="dropi-"]:not(.hydrated),
+dropi-banner-external:not(.hydrated),
+dropi-logo:not(.hydrated),
+dropi-carousel:not(.hydrated) {
+  visibility: inherit !important;
+  opacity: 1 !important;
+}
+
+/* Reserve space for icons before hydration */
+dropi-icon:not(.hydrated) {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+}
+`;
+    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');
+      if (!layout.includes('lottie-player.js')) {
+        // Agregar script antes del cierre de </body>
+        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`
+        );
+        fs.writeFileSync(layoutPath, layout);
+        log(`${path.relative(projectRoot, layoutPath)}: Lottie script agregado.`, 'ok');
+      }
+    }
+  }
+
   if (isAngular) {
     const scssPath = path.join(projectRoot, 'src', 'styles.scss');
     if (fs.existsSync(scssPath)) {
@@ -94,21 +279,31 @@ async function run() {
     
     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;
-        
-        // 4. Loader (defineCustomElements) si no es React wrapper
-        if (!isReact || !content.includes('defineCustomElements')) {
-          if (!content.includes('defineCustomElements')) {
-            content = `import { defineCustomElements } from '@dropi/ui/loader';\n` + content;
-            if (content.includes('createRoot')) {
-              content = content.replace('createRoot', 'defineCustomElements();\ncreateRoot');
-            } else {
-              content += `\ndefineCustomElements();\n`;
-            }
-          }
-        }
-        
+        changed = true;
+      }
+
+      if (changed) {
         fs.writeFileSync(path.join(projectRoot, styleTarget), content);
         log(`Configuración aplicada en ${styleTarget}`, 'ok');
       }
@@ -151,10 +346,10 @@ async function run() {
   // Archivos Lottie
   setupAsset('assets/lottie-files', 'assets/lottie-files');
 
-  // 6. Lottie Player Script (index.html)
+  // 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 = htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
+  const htmlFile = !isNextJs && htmlFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
   
   if (htmlFile) {
     const htmlPath = path.join(projectRoot, htmlFile);
@@ -170,16 +365,102 @@ async function run() {
     }
   }
 
-  // 7. Vite Patch (optimizeDeps)
-  const viteFiles = ['vite.config.ts', 'vite.config.js'];
-  const viteFile = viteFiles.find(f => fs.existsSync(path.join(projectRoot, f)));
-  if (viteFile) {
-    let content = fs.readFileSync(path.join(projectRoot, viteFile), 'utf8');
-    if (!content.includes('optimizeDeps')) {
-      const patch = `\n  optimizeDeps: {\n    exclude: ['@dropi/ui/loader', '@dropi/ui'],\n  },`;
-      content = content.replace(/defineConfig\(\{/, `defineConfig({${patch}`);
-      fs.writeFileSync(path.join(projectRoot, viteFile), content);
-      log('Vite: optimizeDeps.exclude configurado.', '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');
+      }
     }
   }