responsive-system 1.2.8 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.2.8",
+  "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

@@ -4,14 +4,18 @@
  * Script postinstall para automatizar la configuración inicial completa
  * - Instala React, TypeScript, Tailwind automáticamente
  * - Inicializa proyecto Vite si está vacío
- * - Configura Tailwind
- * - Crea página de ejemplo con layouts
+ * - Pregunta qué layout quiere (interactivo)
+ * - Copia solo los componentes necesarios
+ * - Copia el hook useResponsive como archivo local
+ * - Crea página de ejemplo en pages/
+ * - Configura App.tsx con el layout seleccionado
  */
 
 import fs from 'fs'
 import path from 'path'
 import { execSync } from 'child_process'
 import { fileURLToPath } from 'url'
+import readline from 'readline'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -19,10 +23,17 @@ const __dirname = path.dirname(__filename)
 const projectRoot = process.cwd()
 const packageJsonPath = path.join(projectRoot, 'package.json')
 
+// Detectar si se ejecuta como postinstall o manualmente
+const isPostinstall = process.env.npm_lifecycle_event === 'postinstall'
+const isManual = process.argv[1].includes('postinstall.js') && !isPostinstall
+
 console.log('')
-console.log('📦 responsive-system: Iniciando postinstall...')
+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)) {
@@ -46,27 +57,356 @@ const isProjectEmpty = !packageJson.dependencies ||
 // Verificar qué está instalado - SOLO en package.json (no en node_modules para evitar conflictos)
 const hasReactInPackageJson = (packageJson.dependencies && packageJson.dependencies.react) || 
                               (packageJson.devDependencies && packageJson.devDependencies.react)
-// NO verificar node_modules porque puede estar como dependencia transitiva y causar conflictos
-const hasReact = hasReactInPackageJson
-
 const hasVite = packageJson.devDependencies && packageJson.devDependencies.vite
-
 const tailwindInDevDeps = packageJson.devDependencies && packageJson.devDependencies.tailwindcss
 const typescriptInDevDeps = packageJson.devDependencies && packageJson.devDependencies.typescript
 
 let needsUpdate = false
 
+// Función para preguntar al usuario qué layout quiere
+async function askLayout() {
+  if (isPostinstall && !isManual) {
+    // Si es postinstall automático, usar 'default' por defecto
+    console.log('   ℹ️  Usando layout "default" por defecto')
+    console.log('   💡 Ejecuta "npx responsive-system-setup" para cambiar el layout')
+    return 'default'
+  }
+
+  // Si es ejecución manual, preguntar interactivamente
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  })
+
+  return new Promise((resolve) => {
+    console.log('')
+    console.log('🎨 Selecciona el layout que quieres usar:')
+    console.log('   1. default    - Navigation + Footer')
+    console.log('   2. sidebar    - Sidebar lateral')
+    console.log('   3. dashboard  - Sidebar + Footer')
+    console.log('   4. minimal    - Sin componentes (solo contenido)')
+    console.log('')
+    
+    rl.question('   Ingresa el número (1-4) o el nombre del layout: ', (answer) => {
+      rl.close()
+      
+      const normalized = answer.trim().toLowerCase()
+      
+      if (normalized === '1' || normalized === 'default') {
+        resolve('default')
+      } else if (normalized === '2' || normalized === 'sidebar') {
+        resolve('sidebar')
+      } else if (normalized === '3' || normalized === 'dashboard') {
+        resolve('dashboard')
+      } else if (normalized === '4' || normalized === 'minimal') {
+        resolve('minimal')
+      } else {
+        console.log('   ⚠️  Opción inválida, usando "default"')
+        resolve('default')
+      }
+    })
+  })
+}
+
+// Función para copiar archivo desde el paquete al proyecto
+function copyFileFromPackage(relativePath, targetPath, isComponent = false) {
+  const sourcePath = path.join(__dirname, '..', relativePath)
+  const destPath = path.join(projectRoot, targetPath)
+  
+  if (!fs.existsSync(sourcePath)) {
+    console.error(`   ❌ No se encontró: ${relativePath}`)
+    return false
+  }
+  
+  // Crear directorio destino si no existe
+  const destDir = path.dirname(destPath)
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+  
+  let content = fs.readFileSync(sourcePath, 'utf8')
+  
+  // Si es un componente, reemplazar importaciones relativas por importaciones del paquete
+  if (isComponent) {
+    // Reemplazar importaciones de hooks
+    content = content.replace(
+      /from ['"]\.\.\/\.\.\/hooks['"]/g,
+      "from 'responsive-system'"
+    )
+    // Reemplazar importaciones de context
+    content = content.replace(
+      /from ['"]\.\.\/\.\.\/context['"]/g,
+      "from 'responsive-system'"
+    )
+    // Reemplazar importaciones de componentes/layout
+    content = content.replace(
+      /from ['"]\.\.\/components\/layout['"]/g,
+      "from 'responsive-system'"
+    )
+  }
+  
+  fs.writeFileSync(destPath, content)
+  return true
+}
+
+// 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
+  if (!fs.existsSync(componentsDir)) {
+    fs.mkdirSync(componentsDir, { recursive: true })
+  }
+  
+  const componentsToGenerate = {
+    default: ['Navigation', 'Footer'],
+    sidebar: ['Sidebar'],
+    dashboard: ['Sidebar', 'Footer'],
+    minimal: []
+  }
+  
+  const components = componentsToGenerate[selectedLayout] || []
+  
+  if (components.length === 0) {
+    console.log('   ✅ Layout minimal: No se generan componentes')
+    return
+  }
+  
+  console.log(`   📦 Generando componentes genéricos para layout "${selectedLayout}":`)
+  
+  // 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
+  const indexContent = components.map(c => `export { default as ${c} } from './${c}'`).join('\n')
+  fs.writeFileSync(path.join(componentsDir, 'index.ts'), indexContent)
+  console.log('      ✅ index.ts')
+}
+
+// Función para copiar el hook useResponsive y sus dependencias
+function copyUseResponsiveHook() {
+  console.log('   📦 Copiando hook useResponsive y dependencias...')
+  
+  // Crear directorio hooks
+  const hooksDir = path.join(projectRoot, 'src', 'hooks')
+  if (!fs.existsSync(hooksDir)) {
+    fs.mkdirSync(hooksDir, { recursive: true })
+  }
+  
+  // Copiar tipos
+  const typesDir = path.join(projectRoot, 'src', 'types')
+  if (!fs.existsSync(typesDir)) {
+    fs.mkdirSync(typesDir, { recursive: true })
+  }
+  copyFileFromPackage('src/types/responsive.ts', 'src/types/responsive.ts')
+  console.log('      ✅ types/responsive.ts')
+  
+  // Copiar constantes
+  const constantsDir = path.join(projectRoot, 'src', 'constants')
+  if (!fs.existsSync(constantsDir)) {
+    fs.mkdirSync(constantsDir, { recursive: true })
+  }
+  copyFileFromPackage('src/constants/breakpoints.ts', 'src/constants/breakpoints.ts')
+  console.log('      ✅ constants/breakpoints.ts')
+  
+  // Copiar hook useResponsive
+  copyFileFromPackage('src/hooks/useResponsive.ts', 'src/hooks/useResponsive.ts')
+  console.log('      ✅ hooks/useResponsive.ts')
+  
+  // Crear index.ts para exportar el hook
+  const indexContent = `export { useResponsive } from './useResponsive'
+export type { ResponsiveState, Breakpoint, Orientation } from '../types/responsive'
+export { DEFAULT_BREAKPOINTS, getCurrentBreakpoint, getBreakpointIndex, getBreakpointValue } from '../constants/breakpoints'
+`
+  fs.writeFileSync(path.join(hooksDir, 'index.ts'), indexContent)
+  console.log('      ✅ hooks/index.ts')
+}
+
 // ESTRATEGIA: Modificar directamente el package.json primero, luego instalar
 console.log('📦 responsive-system: Verificando dependencias...')
 
 // Agregar React a dependencies SOLO si NO está en package.json
-// NO verificar node_modules para evitar múltiples copias de React
 if (!hasReactInPackageJson) {
   console.log('   ➕ Agregando React a dependencies...')
   if (!packageJson.dependencies) {
     packageJson.dependencies = {}
   }
-  // Usar versión compatible con peerDependencies del paquete
   packageJson.dependencies['react'] = '^19.1.1'
   packageJson.dependencies['react-dom'] = '^19.1.1'
   needsUpdate = true
@@ -85,9 +425,9 @@ if (isProjectEmpty && !hasVite) {
   needsUpdate = true
 }
 
-// Agregar TypeScript y Tailwind a devDependencies
+// Agregar Tailwind y sus dependencias a devDependencies
 if (!tailwindInDevDeps) {
-  console.log('   ➕ Agregando Tailwind a devDependencies...')
+  console.log('   ➕ Agregando Tailwind y PostCSS a devDependencies...')
   if (!packageJson.devDependencies) {
     packageJson.devDependencies = {}
   }
@@ -98,6 +438,7 @@ if (!tailwindInDevDeps) {
   needsUpdate = true
 }
 
+// Agregar TypeScript y sus tipos a devDependencies
 if (!typescriptInDevDeps) {
   console.log('   ➕ Agregando TypeScript a devDependencies...')
   if (!packageJson.devDependencies) {
@@ -139,21 +480,73 @@ 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()
+  console.log(`   ✅ Layout seleccionado: "${selectedLayout}"`)
+  console.log('')
   
   // Crear estructura de directorios
-  const dirs = ['src', 'src/components', 'src/pages', 'public']
+  const dirs = ['src', 'src/components', 'src/components/layout', 'src/pages', 'src/hooks', 'src/types', 'src/constants', 'public']
   dirs.forEach(dir => {
     const dirPath = path.join(projectRoot, dir)
     if (!fs.existsSync(dirPath)) {
       fs.mkdirSync(dirPath, { recursive: true })
-      console.log(`   ✅ Creado: ${dir}/`)
     }
   })
   
+  // Generar componentes genéricos según layout seleccionado
+  generateLayoutComponents(selectedLayout)
+  console.log('')
+  
+  // Copiar hook useResponsive
+  copyUseResponsiveHook()
+  console.log('')
+  
   // Crear vite.config.ts
   const viteConfigPath = path.join(projectRoot, 'vite.config.ts')
   if (!fs.existsSync(viteConfigPath)) {
@@ -303,7 +696,7 @@ import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ResponsiveLayoutProvider defaultLayout="default">
+    <ResponsiveLayoutProvider defaultLayout="${selectedLayout}">
       <MainLayout>
         <App />
       </MainLayout>
@@ -318,81 +711,114 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   // Crear src/index.css
   const indexCssPath = path.join(projectRoot, 'src', 'index.css')
   if (!fs.existsSync(indexCssPath)) {
-    // Tailwind CSS v4 usa @import en lugar de @tailwind
     const indexCss = `@import "tailwindcss";
 `
     fs.writeFileSync(indexCssPath, indexCss)
     console.log('   ✅ Creado: src/index.css')
   }
   
-  // Crear src/App.tsx con página de ejemplo
-  const appTsxPath = path.join(projectRoot, 'src', 'App.tsx')
-  if (!fs.existsSync(appTsxPath)) {
-    const appTsx = `import { useResponsiveLayout, LayoutSwitcher } from 'responsive-system'
+  // 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 } from 'responsive-system'
+import { useResponsive } from '../hooks'
 
-function App() {
-  const { breakpoint, isMobile, layout } = useResponsiveLayout()
+function HomePage() {
+  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 */}
-        <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>Sin media queries:</strong> Usa el hook useResponsive para lógica condicional</li>
-          </ul>
+        {/* 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>
       </div>
     </div>
   )
 }
 
+export default HomePage
+`
+    fs.writeFileSync(homePagePath, homePage)
+    console.log('   ✅ Creado: src/pages/HomePage.tsx (página de ejemplo simple)')
+  }
+  
+  // Crear src/App.tsx que importa la página
+  const appTsxPath = path.join(projectRoot, 'src', 'App.tsx')
+  if (!fs.existsSync(appTsxPath)) {
+    const appTsx = `import HomePage from './pages/HomePage'
+
+function App() {
+  return <HomePage />
+}
+
 export default App
 `
     fs.writeFileSync(appTsxPath, appTsx)
-    console.log('   ✅ Creado: src/App.tsx con página de ejemplo')
+    console.log('   ✅ Creado: src/App.tsx')
   }
   
   // Actualizar package.json con scripts
@@ -412,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('')
@@ -419,8 +945,23 @@ export default App
   console.log('  1. npm run dev')
   console.log('  2. Abre http://localhost:5173')
   console.log('')
+  console.log(`Layout seleccionado: "${selectedLayout}"`)
+  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 después, ejecuta: npx responsive-system-setup')
+  console.log('')
+} else {
+  console.log('✅ responsive-system: Proyecto ya inicializado')
 }
 
 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('')