responsive-system 1.3.2 → 1.4.0

package/README.md

@@ -1,382 +1,41 @@
-# 🎯 Responsive System - Auto-Scaling para Tailwind CSS
+# responsive-system
 
-**Sistema de escalado automático para todas las pantallas.** Usa Tailwind CSS normal, TODO escala automáticamente.
+Sistema completo de layout responsive con auto-scaling para React + Tailwind CSS.
 
-## ✨ Características
-
-- ✅ **100% Automático**: Instala, configura una vez, olvídate del responsive
-- ✅ **Tailwind Normal**: Usa `text-base`, `p-4`, `gap-6`, `leading-relaxed`, `shadow-lg` como siempre
-- ✅ **Auto-Scaling Completo**: Typography, spacing, line-height, letter-spacing y shadows
-- ✅ **Sistema de Layouts**: 4 layouts predefinidos (Default, Sidebar, Dashboard, Minimal)
-- ✅ **9 Breakpoints**: xs, sm, md, lg, xl, 2xl, 3xl (1920px), 4xl (2560px), 5xl (3840px)
-- ✅ **TypeScript**: 100% type-safe
-- ✅ **Zero Runtime Dependencies**: Solo requiere React y Tailwind como peer dependencies
-- ✅ **No Invasivo**: Instala solo lo que necesites ([Ver guía](INSTALLATION.md))
-
----
-
-## 📦 Instalación desde npm
-
-### **Instalación Automática**
-
-Este paquete instala automáticamente todas las dependencias necesarias:
-
-- ✅ **React** (v19.1.1) - Se instala automáticamente
-- ✅ **React DOM** (v19.1.1) - Se instala automáticamente  
-- ✅ **Tailwind CSS** (v4.1.14) - Se instala automáticamente
-- ✅ **PostCSS** y **Autoprefixer** - Se instalan automáticamente
-- ✅ **TypeScript** (v5.9.3) - Se instala automáticamente
+## 🚀 Instalación Rápida
 
 ```bash
-# Solo necesitas esto:
-npm install responsive-system
+npm install responsive-system@latest
 ```
 
-El script `postinstall` detectará si faltan dependencias y las instalará automáticamente.
-
-### **Inicializar Tailwind (solo la primera vez)**
-
-Después de instalar, inicializa Tailwind:
+## ⚡ Configuración
 
-```bash
-npx tailwindcss init -p
-```
+Después de instalar, ejecuta el script de configuración:
 
-O con yarn/pnpm:
 ```bash
-yarn add responsive-system
-# o
-pnpm add responsive-system
-
-# Inicializar Tailwind
-npx tailwindcss init -p
-```
-
----
-
-## 📦 ¿Tenés un proyecto existente?
-
-**Este sistema NO es invasivo.** Podés instalarlo de 3 formas:
-
-1. **Solo el plugin** (1 archivo) - Auto-scaling sin tocar tu código
-2. **Con hooks** (~8 archivos) - Detección de breakpoints en JS
-3. **Sistema completo** (~30 archivos) - Layouts incluidos
-
-👉 **[Ver guía completa de instalación](INSTALLATION.md)**
-
----
-
-## 🚀 Inicio Rápido (Proyecto Nuevo)
-
-### **Paso 0: Instalar el paquete**
-
-Si estás empezando desde cero:
-
-```bash
-# Crear proyecto React (si no lo tienes)
-npm create vite@latest mi-proyecto -- --template react-ts
-
-# Instalar el paquete (instala React y Tailwind automáticamente)
-cd mi-proyecto
-npm install
-npm install responsive-system
-
-# Inicializar Tailwind (solo la primera vez)
-npx tailwindcss init -p
-```
-
-**¡Eso es todo!** El paquete instala automáticamente React, Tailwind y todas las dependencias necesarias.
-
-### **1. Configura el Plugin en Tailwind**
-
-```js
-// tailwind.config.js
-import responsiveScalePlugin from 'responsive-system/plugin'
-
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      screens: {
-        'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px',
-        'xl': '1280px', '2xl': '1536px', '3xl': '1920px', '4xl': '2560px', '5xl': '3840px'
-      }
-    },
-  },
-  plugins: [
-    responsiveScalePlugin({
-      scaleProperties: {
-        typography: true,      // font-size
-        spacing: true,         // padding, margin, gap
-        lineHeight: true,      // line-height
-        letterSpacing: true,   // letter-spacing
-        shadows: true,         // box-shadow
-        borderWidth: false,
-        sizing: false,
-        borderRadius: false
-      },
-      scales: {
-        xs: 1.0, sm: 1.0, md: 1.0, lg: 1.0, xl: 1.0,
-        '2xl': 1.05, '3xl': 1.15, '4xl': 1.25, '5xl': 1.35
-      }
-    })
-  ],
-}
-```
-
-### **2. Configura el Sistema de Layouts**
-
-```tsx
-// App.tsx
-import { ResponsiveLayoutProvider, MainLayout } from 'responsive-system'
-
-function App() {
-  return (
-    <ResponsiveLayoutProvider defaultLayout="default">
-      <MainLayout>
-        <YourContent />
-      </MainLayout>
-    </ResponsiveLayoutProvider>
-  )
-}
-```
-
----
-
-## 🎨 Cómo Funciona
-
-### **Sistema Responsivo (Auto-Scaling)**
-
-El plugin genera CSS variables que escalan automáticamente:
-
-```css
-/* Plugin genera automáticamente */
-:root { --scale-text: 1.0; --scale-spacing: 1.0; }
-
-.text-base { font-size: calc(1rem * var(--scale-text)); }
-.p-4 { padding: calc(1rem * var(--scale-spacing)); }
+npx responsive-system-setup
 ```
 
-**En 1920px (3xl):** `--scale-text: 1.15` → `text-base` = 18.4px
+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
 
-### **Sistema de Layouts**
+## 📦 Características
 
-**4 Layouts Predefinidos:**
+- ✅ Auto-scaling automático (texto, espaciado, sombras)
+- ✅ Layouts pre-configurados (default, sidebar, dashboard, minimal)
+- ✅ Hook `useResponsive` para configuración manual
+- ✅ Sin media queries necesarias
 
-| Layout | Componentes | Uso |
-|--------|-------------|-----|
-| `default` | Navigation + Footer | Páginas estáticas |
-| `sidebar` | Sidebar | Apps con navegación lateral |
-| `dashboard` | Header + Sidebar + Footer | Dashboards complejos |
-| `minimal` | Solo contenido | Landing pages |
+## 🎨 Layouts Disponibles
 
-**Cambio Dinámico:**
-```tsx
-import { useLayout } from 'responsive-system'
-
-function MyComponent() {
-  const { setLayout } = useLayout()
-  
-  return (
-    <button onClick={() => setLayout('dashboard')}>
-      Cambiar a Dashboard
-    </button>
-  )
-}
-```
-
----
-
-## 📊 Breakpoints y Escalas
-
-| Breakpoint | Tamaño | Factor | Ejemplo `text-base` |
-|------------|--------|--------|---------------------|
-| `xs` | 475px+ | 1.0 | 16px |
-| `sm` | 640px+ | 1.0 | 16px |
-| `md` | 768px+ | 1.0 | 16px |
-| `lg` | 1024px+ | 1.0 | 16px |
-| `xl` | 1280px+ | 1.0 | 16px |
-| `2xl` | 1536px+ | 1.05 | 16.8px |
-| `3xl` | 1920px+ | 1.15 | 18.4px |
-| `4xl` | 2560px+ | 1.25 | 20px |
-| `5xl` | 3840px+ | 1.35 | 21.6px |
-
----
-
-## 🔧 Uso del Hook
-
-```tsx
-import { useResponsiveLayout } from 'responsive-system'
-
-function MyComponent() {
-  const { 
-    // Estado responsivo
-    breakpoint, width, height, isMobile, isDesktop,
-    // Estado del layout
-    layout: { current, setLayout },
-    // Utilidades
-    layoutUtils
-  } = useResponsiveLayout()
-  
-  return (
-    <div className="p-6"> {/* ✅ Escala automáticamente */}
-      <h1 className="text-4xl">Título</h1> {/* ✅ Escala automáticamente */}
-      
-      {/* Renderizado condicional */}
-      {isMobile && <MobileMenu />}
-      {isDesktop && <DesktopSidebar />}
-      
-      {/* Cambio de layout */}
-      <button onClick={() => setLayout('sidebar')}>
-        Cambiar Layout
-      </button>
-    </div>
-  )
-}
-```
+- **default**: Navigation + Footer
+- **sidebar**: Sidebar lateral
+- **dashboard**: Sidebar + Footer
+- **minimal**: Sin componentes (solo contenido)
 
 ---
 
-## 🎯 Qué Escala Automáticamente
-
-### ✅ **SÍ Escala:**
-- **Typography**: `text-base`, `text-lg`, `text-xl`, etc.
-- **Spacing**: `p-4`, `m-6`, `gap-3`, `space-y-2`
-- **Line Height**: `leading-relaxed`, `leading-loose`
-- **Letter Spacing**: `tracking-tight`, `tracking-wide`
-- **Shadows**: `shadow-lg`, `shadow-xl`
-
-### ❌ **NO Escala:**
-- **Sizing**: `w-64`, `h-32` (puede romper layouts)
-- **Border Radius**: `rounded-lg` (mantiene proporciones)
-- **Valores Arbitrarios**: `text-[16px]`, `p-[10px]`
-
----
-
-## 📱 Layouts en Acción
-
-### **Default Layout**
-```tsx
-import { ResponsiveLayoutProvider, MainLayout } from 'responsive-system'
-
-<ResponsiveLayoutProvider defaultLayout="default">
-  <MainLayout>
-    {/* Navigation arriba, Footer abajo */}
-    <YourContent />
-  </MainLayout>
-</ResponsiveLayoutProvider>
-```
-
-### **Sidebar Layout**
-```tsx
-import { ResponsiveLayoutProvider, MainLayout } from 'responsive-system'
-
-<ResponsiveLayoutProvider defaultLayout="sidebar">
-  <MainLayout>
-    {/* Sidebar izquierda, contenido principal */}
-    <YourContent />
-  </MainLayout>
-</ResponsiveLayoutProvider>
-```
-
-### **Dashboard Layout**
-```tsx
-import { ResponsiveLayoutProvider, MainLayout } from 'responsive-system'
-
-<ResponsiveLayoutProvider defaultLayout="dashboard">
-  <MainLayout>
-    {/* Header + Sidebar + Main + Footer */}
-    <YourContent />
-  </MainLayout>
-</ResponsiveLayoutProvider>
-```
-
----
-
-## 🏗️ Estructura del Proyecto
-
-```
-src/
-├── plugin/
-│   └── responsiveScalePlugin.js    # Plugin de Tailwind
-├── providers/
-│   ├── index.ts                    # ✅ Barrel exports
-│   ├── ResponsiveProvider.tsx      # Provider base
-│   └── ResponsiveLayoutProvider.tsx # Provider con layouts
-├── hooks/
-│   ├── index.ts                    # ✅ Barrel exports
-│   ├── useResponsive.ts            # Hook responsivo
-│   ├── useResponsiveLayout.ts      # Hook unificado
-│   └── useLayout.ts                # Hook de layout
-├── layouts/
-│   ├── index.ts                    # ✅ Barrel exports
-│   ├── MainLayout.tsx              # Layout principal
-│   ├── DefaultLayout.tsx           # Layout por defecto
-│   ├── SidebarLayout.tsx           # Layout con sidebar
-│   ├── DashboardLayout.tsx         # Layout dashboard
-│   └── MinimalLayout.tsx           # Layout mínimo
-├── components/layout/
-│   ├── index.ts                    # ✅ Barrel exports
-│   ├── Navigation.tsx              # Navegación
-│   ├── Sidebar.tsx                 # Sidebar
-│   ├── Header.tsx                  # Header
-│   └── Footer.tsx                  # Footer
-├── context/
-│   ├── index.ts                    # ✅ Barrel exports
-│   ├── ResponsiveLayoutContext.tsx # Context principal
-│   └── SidebarContext.tsx          # Context del sidebar
-├── config/
-│   └── layout.ts                   # Configuración de layouts
-└── index.ts                        # ✅ Export principal
-```
-
----
-
-## 🎉 Ejemplo Completo
-
-```tsx
-// App.tsx
-import { ResponsiveLayoutProvider, MainLayout, useResponsiveLayout } from 'responsive-system'
-
-function MyApp() {
-  return (
-    <ResponsiveLayoutProvider defaultLayout="default">
-      <MainLayout>
-        <Dashboard />
-      </MainLayout>
-    </ResponsiveLayoutProvider>
-  )
-}
-
-function Dashboard() {
-  const { breakpoint, isMobile } = useResponsiveLayout()
-  
-  return (
-    <div className="p-6 space-y-6"> {/* ✅ Auto-scaling */}
-      <h1 className="text-4xl font-bold">Dashboard</h1> {/* ✅ Auto-scaling */}
-      
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <div className="p-6 bg-white rounded-lg shadow-lg"> {/* ✅ Auto-scaling */}
-          <h2 className="text-xl mb-4">Card 1</h2>
-          <p className="text-base leading-relaxed">Contenido...</p>
-        </div>
-        {/* Más cards... */}
-      </div>
-    </div>
-  )
-}
-```
-
----
-
-## 🚀 Resultado
-
-**¡Eso es todo!** Tu aplicación ahora:
-
-- ✅ **Escala automáticamente** en todas las pantallas
-- ✅ **Usa layouts profesionales** predefinidos
-- ✅ **Mantiene código limpio** con Tailwind normal
-- ✅ **Funciona en móvil y desktop** sin media queries manuales
-- ✅ **Se adapta a pantallas grandes** (1920px, 4K, etc.)
-
-**Desarrollado por [Felipe Caroca](https://github.com/FelipeCaroca1)**
+**Siguiente paso:** Ejecuta `npx responsive-system-setup` para comenzar 🚀

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "responsive-system",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "Sistema de layout responsivo con auto-scaling para Tailwind CSS",
   "type": "module",
   "main": "./dist/responsive-system.cjs",
@@ -34,9 +34,7 @@
     "src",
     "src/plugin",
     "scripts",
-    "README.md",
-    "ARCHITECTURE.md",
-    "INSTALLATION.md"
+    "README.md"
   ],
   "keywords": [
     "responsive",

package/scripts/postinstall.js

@@ -838,106 +838,6 @@ 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('')
@@ -949,7 +849,6 @@ Los componentes de layout están en \`src/components/layout/\` y puedes modifica
   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('')

package/ARCHITECTURE.md

@@ -1,195 +0,0 @@
-# 🏗️ Arquitectura del Sistema
-
-## 📦 Sistema Core vs Ejemplos
-
-### ✅ **SISTEMA CORE (Independiente)**
-
-Estos archivos conforman el **sistema responsivo reutilizable**. Puedes eliminar las páginas de ejemplo y el sistema seguirá funcionando.
-
-#### **Plugin**
-```
-src/plugin/
-└── responsiveScalePlugin.js    # ✅ Plugin de Tailwind
-```
-
-#### **Providers**
-```
-src/providers/
-├── index.ts                    # ✅ Barrel exports
-├── ResponsiveProvider.tsx      # ✅ Provider base
-└── ResponsiveLayoutProvider.tsx # ✅ Provider con layouts
-```
-
-#### **Hooks**
-```
-src/hooks/
-├── index.ts                    # ✅ Barrel exports
-├── useResponsive.ts            # ✅ Hook responsivo
-├── useResponsiveLayout.ts      # ✅ Hook unificado
-└── useLayout.ts                # ✅ Hook de layout
-```
-
-#### **Layouts**
-```
-src/layouts/
-├── index.ts                    # ✅ Barrel exports
-├── MainLayout.tsx              # ✅ Layout principal
-├── DefaultLayout.tsx           # ✅ Layout por defecto
-├── SidebarLayout.tsx           # ✅ Layout con sidebar
-├── DashboardLayout.tsx         # ✅ Layout dashboard
-└── MinimalLayout.tsx           # ✅ Layout mínimo
-```
-
-#### **Componentes de Layout**
-```
-src/components/layout/
-├── index.ts                    # ✅ Barrel exports
-├── Navigation.tsx              # ✅ Navegación
-├── Sidebar.tsx                 # ✅ Sidebar
-├── Header.tsx                  # ✅ Header
-└── Footer.tsx                  # ✅ Footer
-```
-
-#### **Context**
-```
-src/context/
-├── index.ts                    # ✅ Barrel exports
-├── ResponsiveLayoutContext.tsx # ✅ Context principal
-├── SidebarContext.tsx          # ✅ Context del sidebar
-└── NavigationContext.tsx       # ✅ Context de navegación
-```
-
-#### **Tipos**
-```
-src/types/
-└── responsive.ts               # ✅ Tipos TypeScript
-```
-
-#### **Constantes**
-```
-src/constants/
-└── breakpoints.ts              # ✅ Configuración de breakpoints
-```
-
-#### **Configuración**
-```
-src/config/
-└── layout.ts                   # ✅ Configuración de layouts
-```
-
-#### **Componentes Auxiliares**
-```
-src/components/
-└── LayoutSwitcher.tsx          # ✅ Selector de layouts
-```
-
-#### **Export Principal**
-```
-src/index.ts                    # ✅ Exportaciones del sistema
-```
-
----
-
-### 🎨 **EJEMPLOS (Eliminables)**
-
-Estos archivos son **solo para demostración**. Puedes eliminarlos sin afectar el sistema core.
-
-#### **Páginas de Ejemplo**
-```
-src/pages/
-└── ResponsiveTestPage.tsx      # ❌ Ejemplo - Suite de tests
-```
-
-#### **Componentes de Ejemplo**
-```
-src/components/
-└── ResponsiveDemo.tsx          # ❌ Ejemplo - Demo visual
-```
-
-#### **App de Ejemplo**
-```
-src/App.tsx                     # ❌ Ejemplo - Aplicación de prueba
-src/main.tsx                    # ❌ Ejemplo - Entry point
-```
-
----
-
-### **Paso 1: Actualizar `src/index.ts`**
-```typescript
-// Eliminar estas líneas:
-export { default as ResponsiveTestPage } from './pages/ResponsiveTestPage'
-export { default as ResponsiveDemo } from './components/ResponsiveDemo'
-```
-
-### **Paso 2: Listo ✅**
-El sistema core sigue funcionando perfectamente. Ahora puedes:
-- Instalar el sistema en tu proyecto
-- Importar solo lo que necesites: `import { ResponsiveLayoutProvider, MainLayout } from './index'`
-- Usar el plugin en `tailwind.config.js`
-
----
-
-## 📖 Uso en Tu Proyecto
-
-### **1. Instalar el Sistema**
-```bash
-# Copiar la carpeta src/ a tu proyecto
-# O publicar como paquete npm
-```
-
-### **2. Configurar Tailwind**
-```js
-// tailwind.config.js
-import responsiveScalePlugin from './src/plugin/responsiveScalePlugin.js'
-
-export default {
-  plugins: [responsiveScalePlugin({ /* config */ })]
-}
-```
-
-### **3. Crear Tu App**
-```tsx
-// TuApp.tsx
-import { ResponsiveLayoutProvider, MainLayout } from './index'
-
-function TuApp() {
-  return (
-    <ResponsiveLayoutProvider defaultLayout="default">
-      <MainLayout>
-        <TuContenido />
-      </MainLayout>
-    </ResponsiveLayoutProvider>
-  )
-}
-```
-
-### **4. Si Necesitas Navegación**
-```tsx
-import { NavigationProvider, useNavigation } from './index'
-
-function TuApp() {
-  return (
-    <NavigationProvider defaultPage="home">
-      <ResponsiveLayoutProvider defaultLayout="default">
-        <MainLayout>
-          <TuContenido />
-        </MainLayout>
-      </ResponsiveLayoutProvider>
-    </NavigationProvider>
-  )
-}
-```
-
----
-
-## 🎯 Resumen
-
-| Tipo | Archivos | ¿Eliminable? | Función |
-|------|----------|--------------|---------|
-| **Sistema Core** | 30+ archivos | ❌ NO | Sistema responsivo + layouts |
-| **Ejemplos** | 4 archivos | ✅ SÍ | Demostración y pruebas |
-
-**✅ El sistema es 100% independiente de los ejemplos**
-**✅ Puedes eliminar `App.tsx`, `ResponsiveDemo.tsx`, `ResponsiveTestPage.tsx` sin problemas**
-
-

package/INSTALLATION.md

@@ -1,403 +0,0 @@
-# 📦 Instalación en Proyecto Existente
-
-## ¿Es invasivo este sistema?
-
-**RESPUESTA CORTA: NO, es completamente modular y no invasivo.**
-
-El sistema se divide en **2 partes independientes**:
-
-1. **Sistema de Auto-Scaling** (Plugin de Tailwind) - ⚠️ Requiere configuración
-2. **Sistema de Layouts** (Componentes React) - ✅ Completamente opcional
-
----
-
-## 🎯 Nivel de Invasividad
-
-### ✅ **BAJO IMPACTO** - Solo Auto-Scaling
-
-Si **solo quieres el auto-scaling** (sin layouts):
-
-**Archivos a copiar:** `1 archivo`
-```
-src/plugin/responsiveScalePlugin.js
-```
-
-**Archivos a modificar:** `1 archivo`
-```
-tailwind.config.js  (agregar plugin)
-```
-
-**¿Rompe código existente?** **NO**
-- El plugin solo agrega CSS variables nuevas
-- No modifica clases existentes de Tailwind
-- Tu código actual sigue funcionando igual
-
----
-
-### ⚠️ **MEDIO IMPACTO** - Con Providers
-
-Si quieres usar **hooks** (`useResponsive`, etc.):
-
-**Archivos a copiar:** `~10 archivos`
-```
-src/plugin/responsiveScalePlugin.js
-src/providers/ResponsiveProvider.tsx
-src/hooks/useResponsive.ts
-src/constants/breakpoints.ts
-src/types/responsive.ts
-```
-
-**Archivos a modificar:** `2 archivos`
-```
-tailwind.config.js  (agregar plugin)
-App.tsx            (envolver con provider)
-```
-
-**¿Rompe código existente?** **NO**
-- Solo necesitas agregar `<ResponsiveProvider>` en tu App
-- No afecta componentes existentes
-- Puedes usar solo en componentes nuevos
-
----
-
-### 🔧 **ALTO IMPACTO** - Sistema Completo + Layouts
-
-Si quieres **todo el sistema** (auto-scaling + layouts + hooks):
-
-**Archivos a copiar:** `~30 archivos`
-
-**Archivos a modificar:** `2-3 archivos`
-```
-tailwind.config.js
-App.tsx
-package.json (si faltan dependencias)
-```
-
-**¿Rompe código existente?** **DEPENDE**
-- Si usas `MainLayout`, necesitas adaptar tu estructura
-- Tus componentes existentes **NO se rompen**
-- Puedes migrar progresivamente
-
----
-
-## 📋 Guía de Instalación Paso a Paso
-
-### **OPCIÓN 1: Solo Auto-Scaling** ⭐ **RECOMENDADA PARA EMPEZAR**
-
-#### 1. Copiar el plugin
-```bash
-# Crear carpeta
-mkdir -p src/plugin
-
-# Copiar archivo
-cp responsiveScalePlugin.js src/plugin/
-```
-
-#### 2. Modificar `tailwind.config.js`
-```js
-import responsiveScalePlugin from './src/plugin/responsiveScalePlugin.js'
-
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      screens: {
-        'xs': '475px',
-        'sm': '640px',
-        'md': '768px',
-        'lg': '1024px',
-        'xl': '1280px',
-        '2xl': '1536px',
-        '3xl': '1920px',  // 👈 Nuevo
-        '4xl': '2560px',  // 👈 Nuevo
-        '5xl': '3840px',  // 👈 Nuevo (4K)
-      }
-    },
-  },
-  plugins: [
-    responsiveScalePlugin({
-      scaleProperties: {
-        typography: true,      // font-size se escala
-        spacing: true,         // padding, margin, gap se escalan
-        lineHeight: true,      // line-height se escala
-        letterSpacing: true,   // letter-spacing se escala
-        shadows: true,         // box-shadow se escala
-        borderWidth: false,    // border-width NO se escala (puede romper)
-        sizing: false,         // width, height NO se escalan (puede romper)
-        borderRadius: false    // rounded-* NO se escala (mantener fijo)
-      },
-      scales: {
-        xs: 1.0,
-        sm: 1.0,
-        md: 1.0,
-        lg: 1.0,
-        xl: 1.0,
-        '2xl': 1.05,  // +5% en 1536px
-        '3xl': 1.15,  // +15% en 1920px (Full HD)
-        '4xl': 1.25,  // +25% en 2560px (2K)
-        '5xl': 1.35   // +35% en 3840px (4K)
-      },
-      breakpoints: {
-        xs: '475px',
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-        '2xl': '1536px',
-        '3xl': '1920px',
-        '4xl': '2560px',
-        '5xl': '3840px'
-      }
-    })
-  ],
-}
-```
-
-#### 3. ¡Listo! 🎉
-
-**Ya funciona.** Ahora puedes usar:
-
-```tsx
-// Componente existente
-function MyButton() {
-  return (
-    <button className="px-4 py-2 text-base">
-      Click me
-    </button>
-  )
-}
-
-// En móvil: px-4 = 16px
-// En 4K:    px-4 = 21.6px (escalado automáticamente)
-```
-
-**✅ Ventajas:**
-- Cero cambios en tu código
-- Compatible con cualquier proyecto Tailwind
-- No rompe nada existente
-- Puedes ajustar `scales` a tu gusto
-
-**❌ Limitaciones:**
-- No tienes acceso a hooks (`useResponsive`, `isMobile`, etc.)
-- No puedes detectar breakpoints en JavaScript
-
----
-
-### **OPCIÓN 2: Con Hooks** (Detección de Breakpoints)
-
-Si necesitas **detectar breakpoints en JavaScript** (ej: `isMobile`, `isTablet`):
-
-#### 1. Instalar OPCIÓN 1 primero
-
-#### 2. Copiar archivos adicionales
-```bash
-mkdir -p src/providers src/hooks src/constants src/types
-
-# Copiar archivos core
-cp ResponsiveProvider.tsx src/providers/
-cp useResponsive.ts src/hooks/
-cp breakpoints.ts src/constants/
-cp responsive.ts src/types/
-```
-
-#### 3. Envolver tu App
-```tsx
-// App.tsx (ANTES)
-function App() {
-  return <YourExistingApp />
-}
-
-// App.tsx (DESPUÉS)
-import { ResponsiveProvider } from './providers/ResponsiveProvider'
-
-function App() {
-  return (
-    <ResponsiveProvider>
-      <YourExistingApp />
-    </ResponsiveProvider>
-  )
-}
-```
-
-#### 4. Usar en componentes
-```tsx
-import { useResponsive } from './hooks/useResponsive'
-
-function MyComponent() {
-  const { isMobile, isTablet, currentBreakpoint } = useResponsive()
-
-  return (
-    <div>
-      {isMobile && <MobileMenu />}
-      {isTablet && <TabletView />}
-      <p>Breakpoint actual: {currentBreakpoint}</p>
-    </div>
-  )
-}
-```
-
-**✅ Ventajas adicionales:**
-- Detección de breakpoints en JS
-- Helpers booleanos (isMobile, isTablet, etc.)
-- Condicionales responsive sin CSS
-
-**⚠️ Consideración:**
-- Agrega 1 provider a tu App
-- Agrega ~50KB al bundle (hooks + context)
-
----
-
-### **OPCIÓN 3: Sistema Completo** (Con Layouts)
-
-Si quieres **layouts preconfigurados** (tipo Ant Design):
-
-#### 1. Instalar OPCIÓN 2 primero
-
-#### 2. Copiar carpetas adicionales
-```bash
-mkdir -p src/layouts src/components/layout src/context
-
-# Copiar todo el sistema de layouts
-cp -r layouts/* src/layouts/
-cp -r components/layout/* src/components/layout/
-cp -r context/* src/context/
-cp ResponsiveLayoutProvider.tsx src/providers/
-cp useResponsiveLayout.ts src/hooks/
-cp useLayout.ts src/hooks/
-```
-
-#### 3. Modificar App.tsx
-```tsx
-// App.tsx
-import { ResponsiveLayoutProvider, MainLayout } from './index'
-
-function App() {
-  return (
-    <ResponsiveLayoutProvider defaultLayout="default">
-      <MainLayout>
-        <YourExistingApp />
-      </MainLayout>
-    </ResponsiveLayoutProvider>
-  )
-}
-```
-
-#### 4. Usar layouts
-```tsx
-import { useResponsiveLayout } from './hooks'
-
-function MyPage() {
-  const { layout } = useResponsiveLayout()
-
-  return (
-    <div>
-      <h1>Mi Página</h1>
-      <p>Layout actual: {layout.current}</p>
-      
-      <button onClick={() => layout.setLayout('sidebar')}>
-        Cambiar a Sidebar
-      </button>
-    </div>
-  )
-}
-```
-
-**✅ Ventajas adicionales:**
-- Layouts listos para usar (Default, Sidebar, Dashboard, Minimal)
-- Navbar, Sidebar, Footer incluidos
-- Cambio dinámico de layout
-
-**⚠️ Consideraciones:**
-- Sistema más complejo (~30 archivos)
-- Puede requerir adaptar tu estructura actual
-- Si ya tienes un layout, puede generar conflictos
-
----
-
-## 🔍 Comparación de Opciones
-
-| Característica | Solo Plugin | Con Hooks | Completo |
-|---|---|---|---|
-| **Archivos a copiar** | 1 | ~8 | ~30 |
-| **Archivos a modificar** | 1 | 2 | 2-3 |
-| **Auto-scaling CSS** | ✅ | ✅ | ✅ |
-| **Detección de breakpoints** | ❌ | ✅ | ✅ |
-| **Helpers booleanos** | ❌ | ✅ | ✅ |
-| **Layouts preconfigurados** | ❌ | ❌ | ✅ |
-| **Cambio dinámico de layout** | ❌ | ❌ | ✅ |
-| **Invasividad** | ⬇️ Baja | ⬇️ Media | ⬆️ Alta |
-| **Bundle size** | +5KB | +50KB | +150KB |
-
----
-
-## ⚡ Recomendación
-
-### Para un **proyecto nuevo**:
-👉 **OPCIÓN 3** (Sistema completo) - Aprovecha todo
-
-### Para un **proyecto existente pequeño**:
-👉 **OPCIÓN 2** (Con hooks) - Buen balance
-
-### Para un **proyecto existente grande/complejo**:
-👉 **OPCIÓN 1** (Solo plugin) - Mínima invasión
-
----
-
-## 🚨 ¿Puede romper algo?
-
-### **NO romperá:**
-- ✅ Componentes existentes
-- ✅ Estilos actuales de Tailwind
-- ✅ Otras librerías CSS
-- ✅ Funcionalidad de la app
-
-### **PUEDE conflictuar con:**
-- ⚠️ Otros plugins de Tailwind que modifiquen las mismas propiedades
-- ⚠️ Sistemas de layout existentes (si usas OPCIÓN 3)
-- ⚠️ CSS custom que dependa de valores fijos de Tailwind
-
----
-
-## 🧪 Modo de Prueba
-
-**Recomendación:** Prueba primero en una **rama separada**
-
-```bash
-# Crear rama de prueba
-git checkout -b test-responsive-system
-
-# Instalar OPCIÓN 1
-# ... copiar archivo y modificar config
-
-# Probar en desarrollo
-npm run dev
-
-# Si funciona bien, mergear
-git checkout main
-git merge test-responsive-system
-```
-
----
-
-## 📞 Soporte
-
-Si encuentras problemas:
-
-1. Verifica que Tailwind CSS v4+ esté instalado
-2. Revisa que el plugin se esté importando correctamente
-3. Verifica que los breakpoints coincidan en `theme.extend.screens` y en el plugin
-4. Abre un issue en GitHub
-
----
-
-## 🎯 Conclusión
-
-**El sistema NO es invasivo** si usas solo el plugin (OPCIÓN 1).
-
-**Es progresivamente más invasivo** si agregas hooks y layouts, pero siempre:
-- ✅ Sin romper código existente
-- ✅ Modular (usa solo lo que necesites)
-- ✅ Fácil de remover si no te gusta
-
-**Empieza con OPCIÓN 1, y escala según necesites.** 🚀
-