responsive-system 1.3.0 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
   "type": "module",
   "main": "./dist/responsive-system.cjs",

package/scripts/postinstall.js

@@ -31,6 +31,9 @@ console.log('')
 console.log('📦 responsive-system: Iniciando configuración...')
 console.log(`   Directorio: ${projectRoot}`)
 console.log('')
+console.log('💡 Si este es tu primer uso, este script configurará todo automáticamente.')
+console.log('   Si ya tienes el proyecto configurado, puedes cancelar (Ctrl+C)')
+console.log('')
 
 // Verificar si package.json existe
 if (!fs.existsSync(packageJsonPath)) {
@@ -146,8 +149,8 @@ function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
   return true
 }
 
-// Función para copiar componentes según el layout seleccionado
-function copyLayoutComponents(selectedLayout) {
+// Función para generar componentes genéricos según el layout seleccionado
+function generateLayoutComponents(selectedLayout) {
   const componentsDir = path.join(projectRoot, 'src', 'components', 'layout')
   
   // Crear directorio si no existe
@@ -155,29 +158,199 @@ function copyLayoutComponents(selectedLayout) {
     fs.mkdirSync(componentsDir, { recursive: true })
   }
   
-  const componentsToCopy = {
+  const componentsToGenerate = {
     default: ['Navigation', 'Footer'],
     sidebar: ['Sidebar'],
     dashboard: ['Sidebar', 'Footer'],
     minimal: []
   }
   
-  const components = componentsToCopy[selectedLayout] || []
+  const components = componentsToGenerate[selectedLayout] || []
   
   if (components.length === 0) {
-    console.log('   ✅ Layout minimal: No se copian componentes')
+    console.log('   ✅ Layout minimal: No se generan componentes')
     return
   }
   
-  console.log(`   📦 Copiando componentes para layout "${selectedLayout}":`)
+  console.log(`   📦 Generando componentes genéricos para layout "${selectedLayout}":`)
   
-  for (const component of components) {
-    const sourceFile = `src/components/layout/${component}.tsx`
-    const targetFile = `src/components/layout/${component}.tsx`
-    
-    if (copyFileFromPackage(sourceFile, targetFile, true)) {
-      console.log(`      ✅ ${component}.tsx`)
-    }
+  // Generar Navigation genérico
+  if (components.includes('Navigation')) {
+    const navigationContent = `import { useResponsiveLayout } from 'responsive-system'
+
+const Navigation = () => {
+  const { isMobile, breakpoint } = useResponsiveLayout()
+  
+  return (
+    <nav className="sticky top-0 z-50 bg-gray-900 border-b border-gray-800">
+      <div className="px-4 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">LO</span>
+            </div>
+            <h1 className="text-white font-semibold text-lg">Tu Aplicación</h1>
+          </div>
+          
+          {isMobile && (
+            <button className="p-2 text-gray-400 hover:text-white">
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+          )}
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navigation
+`
+    fs.writeFileSync(path.join(componentsDir, 'Navigation.tsx'), navigationContent)
+    console.log('      ✅ Navigation.tsx (genérico)')
+  }
+  
+  // Generar Footer genérico
+  if (components.includes('Footer')) {
+    const footerContent = `import { useResponsiveLayout } from 'responsive-system'
+
+const Footer = () => {
+  const { breakpoint } = useResponsiveLayout()
+  
+  return (
+    <footer className="bg-gray-900 border-t border-gray-800">
+      <div className="px-4 py-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div>
+              <h3 className="text-white font-semibold mb-2">Tu Aplicación</h3>
+              <p className="text-gray-400 text-sm">
+                Descripción de tu aplicación aquí.
+              </p>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-2">Enlaces</h3>
+              <ul className="space-y-1 text-gray-400 text-sm">
+                <li><a href="#" className="hover:text-white">Inicio</a></li>
+                <li><a href="#" className="hover:text-white">Acerca</a></li>
+                <li><a href="#" className="hover:text-white">Contacto</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 className="text-white font-semibold mb-2">Info</h3>
+              <p className="text-gray-400 text-xs">
+                Breakpoint: <span className="text-blue-400">{breakpoint.toUpperCase()}</span>
+              </p>
+            </div>
+          </div>
+          
+          <div className="border-t border-gray-800 mt-6 pt-4 text-center">
+            <p className="text-gray-500 text-xs">
+              © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
+`
+    fs.writeFileSync(path.join(componentsDir, 'Footer.tsx'), footerContent)
+    console.log('      ✅ Footer.tsx (genérico)')
+  }
+  
+  // Generar Sidebar genérico
+  if (components.includes('Sidebar')) {
+    const sidebarContent = `import { useResponsiveLayout } from 'responsive-system'
+import { useSidebar } from 'responsive-system'
+
+const Sidebar = () => {
+  const { isMobile, isTablet } = useResponsiveLayout()
+  const { sidebarOpen, setSidebarOpen } = useSidebar()
+  
+  const menuItems = [
+    { id: 'home', label: 'Inicio' },
+    { id: 'about', label: 'Acerca' },
+    { id: 'contact', label: 'Contacto' },
+  ]
+  
+  return (
+    <>
+      {/* Hamburger button para móvil */}
+      {isMobile && (
+        <button
+          onClick={() => setSidebarOpen(true)}
+          className="fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-800 bg-gray-900 border border-gray-700"
+        >
+          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+          </svg>
+        </button>
+      )}
+
+      {/* Sidebar desktop */}
+      <aside className={\`bg-gray-900 border-r border-gray-800 \${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} \${isTablet ? 'w-56' : 'w-64'}\`}>
+        <div className="p-6 flex flex-col h-full">
+          <div className="flex items-center space-x-3 mb-8">
+            <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+              <span className="text-white font-bold text-sm">LO</span>
+            </div>
+            <span className="text-white font-bold text-lg">Tu Aplicación</span>
+          </div>
+          
+          <nav className="space-y-2">
+            {menuItems.map((item) => (
+              <button
+                key={item.id}
+                className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
+              >
+                <span className="font-medium">{item.label}</span>
+              </button>
+            ))}
+          </nav>
+        </div>
+      </aside>
+
+      {/* Sidebar móvil desplegable */}
+      {isMobile && sidebarOpen && (
+        <div className="fixed inset-0 z-40 bg-black/50" onClick={() => setSidebarOpen(false)}>
+          <div className="fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800">
+            <div className="p-6 flex flex-col h-full pt-20">
+              <div className="flex items-center space-x-3 mb-8">
+                <div className="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-sm">LO</span>
+                </div>
+                <span className="text-white font-bold text-lg">Tu Aplicación</span>
+              </div>
+              
+              <nav className="space-y-2">
+                {menuItems.map((item) => (
+                  <button
+                    key={item.id}
+                    onClick={() => setSidebarOpen(false)}
+                    className="w-full flex items-center px-4 py-3 rounded-lg transition-all text-left text-gray-300 hover:text-white hover:bg-gray-800"
+                  >
+                    <span className="font-medium">{item.label}</span>
+                  </button>
+                ))}
+              </nav>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Sidebar
+`
+    fs.writeFileSync(path.join(componentsDir, 'Sidebar.tsx'), sidebarContent)
+    console.log('      ✅ Sidebar.tsx (genérico)')
   }
   
   // Crear index.ts para exportar los componentes
@@ -307,10 +480,50 @@ if (needsUpdate) {
   console.log('✅ responsive-system: Todas las dependencias ya están en package.json')
 }
 
-// Si el proyecto está vacío, crear estructura base
+// Si el proyecto está vacío, crear README básico PRIMERO
 if (isProjectEmpty) {
+  // Crear README básico INMEDIATAMENTE para que el usuario sepa qué hacer
+  const readmePath = path.join(projectRoot, 'README.md')
+  if (!fs.existsSync(readmePath)) {
+    const basicReadme = `# Tu Aplicación
+
+## 🚀 Configuración Inicial
+
+Acabas de instalar **responsive-system**. Para completar la configuración, ejecuta:
+
+\`\`\`bash
+npx responsive-system-setup
+\`\`\`
+
+Este comando:
+- ✅ Instalará React, TypeScript, Tailwind y Vite automáticamente
+- ✅ Te permitirá seleccionar el layout que prefieras
+- ✅ Creará la estructura base del proyecto
+- ✅ Generará componentes genéricos y página de ejemplo
+
+## 📦 ¿Qué es responsive-system?
+
+Sistema completo de layout responsive con auto-scaling para React + Tailwind CSS.
+
+- Auto-scaling automático (texto, espaciado, sombras)
+- Layouts pre-configurados (default, sidebar, dashboard, minimal)
+- Hook \`useResponsive\` para configuración manual
+- Sin media queries necesarias
+
+---
+
+**Siguiente paso:** Ejecuta \`npx responsive-system-setup\` para comenzar 🚀
+`
+    fs.writeFileSync(readmePath, basicReadme)
+    console.log('   ✅ README.md básico creado con instrucciones')
+  }
+  
   console.log('')
   console.log('📦 responsive-system: Proyecto vacío detectado, creando estructura base...')
+  console.log('')
+  console.log('💡 IMPORTANTE: Si este es tu primer uso, este script configurará todo automáticamente.')
+  console.log('   Si ya tienes el proyecto configurado, puedes cancelar (Ctrl+C)')
+  console.log('')
   
   // Preguntar qué layout quiere
   const selectedLayout = await askLayout()
@@ -326,8 +539,8 @@ if (isProjectEmpty) {
     }
   })
   
-  // Copiar componentes según layout seleccionado
-  copyLayoutComponents(selectedLayout)
+  // Generar componentes genéricos según layout seleccionado
+  generateLayoutComponents(selectedLayout)
   console.log('')
   
   // Copiar hook useResponsive
@@ -504,93 +717,84 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
     console.log('   ✅ Creado: src/index.css')
   }
   
-  // Crear src/pages/HomePage.tsx con página de ejemplo
+  // Crear src/pages/HomePage.tsx con página de ejemplo simple
   const homePagePath = path.join(projectRoot, 'src', 'pages', 'HomePage.tsx')
   if (!fs.existsSync(homePagePath)) {
-    const homePage = `import { useResponsiveLayout, LayoutSwitcher } from 'responsive-system'
+    const homePage = `import { useResponsiveLayout } from 'responsive-system'
 import { useResponsive } from '../hooks'
 
 function HomePage() {
-  const { breakpoint, isMobile, layout } = useResponsiveLayout()
+  const { breakpoint, isMobile } = useResponsiveLayout()
   const responsive = useResponsive()
 
   return (
-    <div className="min-h-screen bg-gray-50 p-6">
-      <div className="max-w-7xl mx-auto space-y-6">
-        {/* Header con información del sistema */}
-        <div className="bg-white rounded-lg shadow-lg p-6">
-          <h1 className="text-4xl font-bold mb-4">Responsive System Demo</h1>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <div className="p-4 bg-blue-50 rounded">
-              <p className="text-sm text-gray-600">Breakpoint actual</p>
-              <p className="text-2xl font-bold">{breakpoint}</p>
-            </div>
-            <div className="p-4 bg-green-50 rounded">
-              <p className="text-sm text-gray-600">Layout actual</p>
-              <p className="text-2xl font-bold capitalize">{layout.current}</p>
-            </div>
-            <div className="p-4 bg-purple-50 rounded">
-              <p className="text-sm text-gray-600">Dispositivo</p>
-              <p className="text-2xl font-bold">{isMobile ? 'Móvil' : 'Desktop'}</p>
-            </div>
-          </div>
+    <div className="min-h-screen bg-gray-50 py-8 px-4">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Hero Section */}
+        <div className="bg-white rounded-lg shadow-md p-8 text-center">
+          <h1 className="text-4xl font-bold text-gray-900 mb-4">
+            Bienvenido a tu Aplicación
+          </h1>
+          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
+            Esta es una página de ejemplo que demuestra el sistema responsive con auto-scaling.
+            Todo el contenido se ajusta automáticamente según el tamaño de pantalla.
+          </p>
         </div>
 
-        {/* Selector de layouts */}
-        <div className="bg-white rounded-lg shadow-lg p-6">
-          <h2 className="text-2xl font-bold mb-4">Cambiar Layout</h2>
-          <LayoutSwitcher />
+        {/* Info Cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          <div className="bg-blue-50 rounded-lg p-6 border border-blue-200">
+            <h3 className="text-sm font-semibold text-blue-900 mb-2">Breakpoint</h3>
+            <p className="text-2xl font-bold text-blue-700">{breakpoint.toUpperCase()}</p>
+          </div>
+          <div className="bg-green-50 rounded-lg p-6 border border-green-200">
+            <h3 className="text-sm font-semibold text-green-900 mb-2">Dispositivo</h3>
+            <p className="text-2xl font-bold text-green-700">{isMobile ? 'Móvil' : 'Desktop'}</p>
+          </div>
+          <div className="bg-purple-50 rounded-lg p-6 border border-purple-200">
+            <h3 className="text-sm font-semibold text-purple-900 mb-2">Ancho</h3>
+            <p className="text-2xl font-bold text-purple-700">{responsive.width}px</p>
+          </div>
+          <div className="bg-orange-50 rounded-lg p-6 border border-orange-200">
+            <h3 className="text-sm font-semibold text-orange-900 mb-2">Alto</h3>
+            <p className="text-2xl font-bold text-orange-700">{responsive.height}px</p>
+          </div>
         </div>
 
-        {/* Cards de ejemplo */}
+        {/* Content Cards */}
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {[1, 2, 3, 4, 5, 6].map((i) => (
-            <div key={i} className="bg-white rounded-lg shadow-lg p-6">
-              <h3 className="text-xl font-bold mb-2">Card {i}</h3>
+            <div key={i} className="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+              <div className="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
+                <span className="text-white font-bold text-xl">{i}</span>
+              </div>
+              <h3 className="text-xl font-bold text-gray-900 mb-2">Card {i}</h3>
               <p className="text-gray-600">
-                Este es un ejemplo de card que escala automáticamente según el tamaño de pantalla.
-                Todo el texto, espaciado y sombras se ajustan automáticamente.
+                Este es un ejemplo de card. El texto, espaciado y sombras se ajustan automáticamente
+                según el tamaño de pantalla gracias al sistema de auto-scaling.
               </p>
             </div>
           ))}
         </div>
 
-        {/* Información sobre el hook useResponsive */}
-        <div className="bg-white rounded-lg shadow-lg p-6">
-          <h2 className="text-2xl font-bold mb-4">Hook useResponsive</h2>
-          <p className="text-gray-700 mb-4">
-            El hook <code className="bg-gray-100 px-2 py-1 rounded">useResponsive</code> está disponible localmente en <code className="bg-gray-100 px-2 py-1 rounded">src/hooks/useResponsive.ts</code>
-          </p>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="p-3 bg-gray-50 rounded">
-              <p className="text-xs text-gray-600">Ancho</p>
-              <p className="text-lg font-bold">{responsive.width}px</p>
-            </div>
-            <div className="p-3 bg-gray-50 rounded">
-              <p className="text-xs text-gray-600">Alto</p>
-              <p className="text-lg font-bold">{responsive.height}px</p>
-            </div>
-            <div className="p-3 bg-gray-50 rounded">
-              <p className="text-xs text-gray-600">Orientación</p>
-              <p className="text-lg font-bold capitalize">{responsive.orientation}</p>
-            </div>
-            <div className="p-3 bg-gray-50 rounded">
-              <p className="text-xs text-gray-600">Desktop</p>
-              <p className="text-lg font-bold">{responsive.isDesktop ? 'Sí' : 'No'}</p>
-            </div>
+        {/* Info Section */}
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">Sistema Responsive</h2>
+          <div className="space-y-3 text-gray-700">
+            <p>
+              <strong className="text-gray-900">Auto-scaling activo:</strong> Todo el contenido escala
+              automáticamente según el breakpoint actual (texto, espaciado, sombras).
+            </p>
+            <p>
+              <strong className="text-gray-900">Hook useResponsive:</strong> Disponible en{' '}
+              <code className="bg-gray-100 px-2 py-1 rounded text-sm">src/hooks/useResponsive.ts</code>{' '}
+              para configuración manual cuando lo necesites.
+            </p>
+            <p>
+              <strong className="text-gray-900">Layout actual:</strong> <span className="capitalize">{selectedLayout}</span>
+            </p>
           </div>
         </div>
-
-        {/* Información */}
-        <div className="bg-white rounded-lg shadow-lg p-6">
-          <h2 className="text-2xl font-bold mb-4">Cómo funciona</h2>
-          <ul className="space-y-2 text-gray-700">
-            <li>✅ <strong>Auto-scaling:</strong> Todo escala automáticamente (texto, espaciado, sombras)</li>
-            <li>✅ <strong>Layouts:</strong> Cambia entre default, sidebar, dashboard y minimal</li>
-            <li>✅ <strong>Responsive:</strong> Se adapta automáticamente a todos los tamaños de pantalla</li>
-            <li>✅ <strong>Hook useResponsive:</strong> Disponible localmente para configuración manual</li>
-          </ul>
-        </div>
       </div>
     </div>
   )
@@ -599,7 +803,7 @@ function HomePage() {
 export default HomePage
 `
     fs.writeFileSync(homePagePath, homePage)
-    console.log('   ✅ Creado: src/pages/HomePage.tsx')
+    console.log('   ✅ Creado: src/pages/HomePage.tsx (página de ejemplo simple)')
   }
   
   // Crear src/App.tsx que importa la página
@@ -634,6 +838,106 @@ export default App
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
   console.log('   ✅ Actualizado: package.json con scripts')
   
+  // Actualizar README.md con información completa
+  // Si ya existe (el básico), lo reemplazamos con el completo
+  if (fs.existsSync(readmePath)) {
+    const readmeContent = `# Tu Aplicación
+
+Proyecto inicializado con **responsive-system**.
+
+## 🚀 Inicio Rápido
+
+Después de instalar el paquete, ejecuta el script de configuración:
+
+\`\`\`bash
+npx responsive-system-setup
+\`\`\`
+
+O si prefieres ejecutarlo directamente:
+
+\`\`\`bash
+node node_modules/responsive-system/scripts/postinstall.js
+\`\`\`
+
+Luego inicia el servidor de desarrollo:
+
+\`\`\`bash
+npm run dev
+\`\`\`
+
+Abre http://localhost:5173 en tu navegador.
+
+## 📁 Estructura del Proyecto
+
+- \`src/pages/\` - Páginas de tu aplicación
+- \`src/components/layout/\` - Componentes de layout (Navigation, Footer, Sidebar)
+- \`src/hooks/useResponsive.ts\` - Hook para configuración responsive manual
+- \`src/App.tsx\` - Componente principal
+- \`src/main.tsx\` - Punto de entrada
+
+## 🎨 Layout Actual
+
+Layout seleccionado: **${selectedLayout}**
+
+- **default**: Navigation + Footer
+- **sidebar**: Sidebar lateral
+- **dashboard**: Sidebar + Footer
+- **minimal**: Sin componentes (solo contenido)
+
+## 🔧 Personalización
+
+### Cambiar el Layout
+
+Si quieres cambiar el layout después de la instalación:
+
+\`\`\`bash
+npx responsive-system-setup
+\`\`\`
+
+### Usar el Hook useResponsive
+
+El hook \`useResponsive\` está disponible localmente en \`src/hooks/useResponsive.ts\`:
+
+\`\`\`typescript
+import { useResponsive } from '../hooks'
+
+function MyComponent() {
+  const { breakpoint, isMobile, isDesktop, width, height } = useResponsive()
+  
+  // Tu lógica aquí
+}
+\`\`\`
+
+### Personalizar Componentes
+
+Los componentes de layout están en \`src/components/layout/\` y puedes modificarlos según tus necesidades.
+
+## 📚 Documentación
+
+- [responsive-system en npm](https://www.npmjs.com/package/responsive-system)
+- Hook \`useResponsive\`: \`src/hooks/useResponsive.ts\`
+- Tipos TypeScript: \`src/types/responsive.ts\`
+
+## ✅ Características
+
+- ✅ Auto-scaling automático (texto, espaciado, sombras)
+- ✅ Layout responsive que se adapta a todos los tamaños
+- ✅ Hook \`useResponsive\` para configuración manual
+- ✅ Componentes de layout personalizables
+- ✅ Sin media queries necesarias
+
+---
+
+**¡Listo para empezar a desarrollar!** 🎉
+`
+    fs.writeFileSync(readmePath, readmeContent)
+    console.log('   ✅ Actualizado: README.md con instrucciones completas')
+  } else {
+    // Si no existe, crearlo completo
+    fs.writeFileSync(readmePath, readmeContent)
+    console.log('   ✅ Creado: README.md con instrucciones completas')
+  }
+  
   console.log('')
   console.log('🎉 responsive-system: Proyecto inicializado correctamente!')
   console.log('')
@@ -642,11 +946,12 @@ export default App
   console.log('  2. Abre http://localhost:5173')
   console.log('')
   console.log(`Layout seleccionado: "${selectedLayout}"`)
-  console.log('   - Componentes copiados en src/components/layout/')
+  console.log('   - Componentes generados en src/components/layout/')
   console.log('   - Hook useResponsive disponible en src/hooks/useResponsive.ts')
   console.log('   - Página de ejemplo en src/pages/HomePage.tsx')
+  console.log('   - README.md creado con instrucciones')
   console.log('')
-  console.log('💡 Para cambiar el layout, ejecuta: npx responsive-system-setup')
+  console.log('💡 Para cambiar el layout después, ejecuta: npx responsive-system-setup')
   console.log('')
 } else {
   console.log('✅ responsive-system: Proyecto ya inicializado')
@@ -655,3 +960,8 @@ export default App
 console.log('')
 console.log('✅ responsive-system: postinstall completado')
 console.log('')
+console.log('📝 NOTA: Si instalaste el paquete pero este script no se ejecutó automáticamente,')
+console.log('   ejecuta uno de estos comandos:')
+console.log('   - npx responsive-system-setup')
+console.log('   - node node_modules/responsive-system/scripts/postinstall.js')
+console.log('')