responsive-system 1.4.2 → 1.4.5

package/dist/responsive-system.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n  children,\r\n  debug: _debug = false\r\n}) => {\r\n  // El Provider ahora solo envuelve children sin context\r\n  // El auto-scaling funciona mediante el plugin de Tailwind\r\n  return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n  xs: 475,\r\n  sm: 640,\r\n  md: 768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n  '2xl': 1536,\r\n  '3xl': 1920,\r\n  '4xl': 2560,\r\n  '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n  if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n  if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n  if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n  if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n  if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n  return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n  const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n  return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n  return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n  ResponsiveState, \r\n  Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n  getCurrentBreakpoint,\r\n  getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n  func: T,\r\n  wait: number\r\n): (...args: Parameters<T>) => void {\r\n  let timeout: ReturnType<typeof setTimeout> | null = null\r\n  return (...args: Parameters<T>) => {\r\n    if (timeout) clearTimeout(timeout)\r\n    timeout = setTimeout(() => func(...args), wait)\r\n  }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n  return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n  const [dimensions, setDimensions] = useState({\r\n    width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n    height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n  })\r\n\r\n  // Función para actualizar dimensiones\r\n  const updateDimensions = useCallback(() => {\r\n    setDimensions({\r\n      width: window.innerWidth,\r\n      height: window.innerHeight\r\n    })\r\n  }, [])\r\n\r\n  // Debounced update para optimizar performance\r\n  const debouncedUpdateDimensions = useMemo(\r\n    () => debounce(updateDimensions, 100),\r\n    [updateDimensions]\r\n  )\r\n\r\n  // Effect para escuchar cambios de tamaño\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined') return\r\n\r\n    window.addEventListener('resize', debouncedUpdateDimensions)\r\n    \r\n    return () => {\r\n      window.removeEventListener('resize', debouncedUpdateDimensions)\r\n    }\r\n  }, [debouncedUpdateDimensions])\r\n\r\n  const { width, height } = dimensions\r\n\r\n  // Calcular breakpoint actual\r\n  const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n  \r\n  // Calcular orientación\r\n  const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n  // Helpers booleanos por breakpoint específico\r\n  const isXs = breakpoint === 'xs'\r\n  const isSm = breakpoint === 'sm'\r\n  const isMd = breakpoint === 'md'\r\n  const isLg = breakpoint === 'lg'\r\n  const isXl = breakpoint === 'xl'\r\n  const is2Xl = breakpoint === '2xl'\r\n  const is3Xl = breakpoint === '3xl'\r\n  const is4Xl = breakpoint === '4xl'\r\n  const is5Xl = breakpoint === '5xl'\r\n\r\n  // Helpers booleanos agrupados\r\n  const isMobile = isXs || isSm\r\n  const isTablet = isMd\r\n  const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n  const isSmall = isXs || isSm || isMd\r\n  const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n  const isUltraWide = is3Xl || is4Xl || is5Xl\r\n  const is4K = is4Xl || is5Xl\r\n  const is5K = is5Xl\r\n\r\n  // Helpers de orientación\r\n  const isPortrait = orientation === 'portrait'\r\n  const isLandscape = orientation === 'landscape'\r\n\r\n  // Funciones de comparación de breakpoints\r\n  const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n    return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n  }, [breakpoint])\r\n\r\n  const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n    return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n  }, [breakpoint])\r\n\r\n  const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n    const current = getBreakpointIndex(breakpoint)\r\n    return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n  }, [breakpoint])\r\n\r\n  // Funciones de comparación de ancho\r\n  const isWidthUp = useCallback((minWidth: number): boolean => {\r\n    return width >= minWidth\r\n  }, [width])\r\n\r\n  const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n    return width <= maxWidth\r\n  }, [width])\r\n\r\n  const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n    return width >= minWidth && width <= maxWidth\r\n  }, [width])\r\n\r\n  // Funciones de comparación de altura\r\n  const isHeightUp = useCallback((minHeight: number): boolean => {\r\n    return height >= minHeight\r\n  }, [height])\r\n\r\n  const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n    return height <= maxHeight\r\n  }, [height])\r\n\r\n  const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n    return height >= minHeight && height <= maxHeight\r\n  }, [height])\r\n\r\n  // Debug mode\r\n  const debug = false\r\n\r\n  return {\r\n    // Estado básico\r\n    breakpoint,\r\n    width,\r\n    height,\r\n    orientation,\r\n    \r\n    // Helpers booleanos específicos\r\n    isXs,\r\n    isSm,\r\n    isMd,\r\n    isLg,\r\n    isXl,\r\n    is2Xl,\r\n    is3Xl,\r\n    is4Xl,\r\n    is5Xl,\r\n    \r\n    // Helpers booleanos agrupados\r\n    isMobile,\r\n    isTablet,\r\n    isDesktop,\r\n    isSmall,\r\n    isLarge,\r\n    isUltraWide,\r\n    is4K,\r\n    is5K,\r\n    \r\n    // Helpers de orientación\r\n    isPortrait,\r\n    isLandscape,\r\n    \r\n    // Funciones de comparación\r\n    isBreakpointUp,\r\n    isBreakpointDown,\r\n    isBreakpointBetween,\r\n    isWidthUp,\r\n    isWidthDown,\r\n    isWidthBetween,\r\n    isHeightUp,\r\n    isHeightDown,\r\n    isHeightBetween,\r\n    \r\n    // Debug\r\n    debug\r\n  }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n  // Estado del sistema responsivo\r\n  responsive: ResponsiveState\r\n  \r\n  // Estado del layout\r\n  layout: {\r\n    current: string\r\n    config: LayoutConfig\r\n    setLayout: (layout: string) => void\r\n  }\r\n  \r\n  // Utilidades de layout\r\n  layoutUtils: {\r\n    getContainerClass: () => string\r\n    getMainClass: () => string\r\n    hasSidebar: () => boolean\r\n    hasHeader: () => boolean\r\n    hasFooter: () => boolean\r\n    hasNavigation: () => boolean\r\n  }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n  const context = useContext(ResponsiveLayoutContext)\r\n  if (!context) {\r\n    throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n  }\r\n  return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n  sidebarOpen: boolean\r\n  setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n  return (\r\n    <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n      {children}\r\n    </SidebarContext.Provider>\r\n  )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n  const context = useContext(SidebarContext)\r\n  if (!context) {\r\n    throw new Error('useSidebar must be used within a SidebarProvider')\r\n  }\r\n  return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n  currentPage: 'demo' | 'test'\r\n  setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n  currentPage: 'test',\r\n  setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n  children: React.ReactNode\r\n  defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n  children, \r\n  defaultPage = 'test' \r\n}) => {\r\n  const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n  return (\r\n    <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n      {children}\r\n    </NavigationContext.Provider>\r\n  )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n  const context = useResponsiveLayoutContext()\r\n  \r\n  return {\r\n    // Todo el sistema responsivo original\r\n    ...context.responsive,\r\n    \r\n    // Sistema de layout\r\n    layout: {\r\n      current: context.layout.current,\r\n      config: context.layout.config,\r\n      setLayout: context.layout.setLayout,\r\n    },\r\n    \r\n    // Utilidades de layout\r\n    layoutUtils: context.layoutUtils,\r\n    \r\n    // Helpers específicos del layout\r\n    isDefaultLayout: () => context.layout.current === 'default',\r\n    isSidebarLayout: () => context.layout.current === 'sidebar',\r\n    isDashboardLayout: () => context.layout.current === 'dashboard',\r\n    isMinimalLayout: () => context.layout.current === 'minimal',\r\n    \r\n    // Grid helpers que usan el sistema auto-escalable\r\n    grid: {\r\n      auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n      responsive: (breakpoints: Record<string, number>) => {\r\n        const classes: string[] = []\r\n        Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n          if (breakpoint === 'base') {\r\n            classes.push(`grid-cols-${cols}`)\r\n          } else {\r\n            classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n          }\r\n        })\r\n        return classes.join(' ')\r\n      },\r\n      fixed: (cols: number) => `grid-cols-${cols}`,\r\n    },\r\n    \r\n    // Spacing helpers que escalan automáticamente\r\n    spacing: {\r\n      container: context.layoutUtils.getContainerClass(),\r\n      section: 'mb-6',\r\n      card: 'p-6',\r\n      gap: 'gap-4',\r\n    },\r\n  }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n  const responsiveLayout = useResponsiveLayout()\r\n  \r\n  return {\r\n    // Layout actual\r\n    current: responsiveLayout.layout.current,\r\n    config: responsiveLayout.layout.config,\r\n    setLayout: responsiveLayout.layout.setLayout,\r\n    \r\n    // Utilidades\r\n    ...responsiveLayout.layoutUtils,\r\n    \r\n    // Helpers específicos\r\n    isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n    isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n    isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n    isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n    \r\n    // Grid helpers\r\n    grid: responsiveLayout.grid,\r\n    \r\n    // Spacing helpers\r\n    spacing: responsiveLayout.spacing,\r\n  }\r\n}\r\n","export interface LayoutConfig {\r\n  name: string\r\n  description: string\r\n  components: string[]\r\n  spacing: string\r\n  responsive: {\r\n    mobile: string\r\n    tablet: string\r\n    desktop: string\r\n  }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n  default: {\r\n    name: 'Default',\r\n    description: 'Navbar arriba, body central, footer abajo',\r\n    components: ['Navigation', 'Footer'],\r\n    spacing: 'p-4 md:p-6 lg:p-8',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-8'\r\n    }\r\n  },\r\n  sidebar: {\r\n    name: 'Sidebar',\r\n    description: 'Sidebar izquierda, contenido principal',\r\n    components: ['Sidebar'],\r\n    spacing: 'p-4 md:p-6',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-6'\r\n    }\r\n  },\r\n  dashboard: {\r\n    name: 'Dashboard',\r\n    description: 'Header + Sidebar + Main + Footer',\r\n    components: ['Header', 'Sidebar', 'Footer'],\r\n    spacing: 'p-4 md:p-6 lg:p-8',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-8'\r\n    }\r\n  },\r\n  minimal: {\r\n    name: 'Minimal',\r\n    description: 'Solo contenido, sin navegación',\r\n    components: [],\r\n    spacing: 'p-4 md:p-6',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-6'\r\n    }\r\n  }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n  children: React.ReactNode\r\n  defaultLayout?: string\r\n  /**\r\n   * Hook responsivo personalizado del proyecto consumidor.\r\n   * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n   * Debe retornar un objeto compatible con ResponsiveState.\r\n   */\r\n  useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n  children: React.ReactNode\r\n  defaultLayout: string\r\n  useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n  children, \r\n  defaultLayout,\r\n  useResponsiveHook\r\n}) => {\r\n  // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n  const internalResponsive = useResponsive()\r\n  const customResponsive = useResponsiveHook?.()\r\n  const responsive = customResponsive || internalResponsive\r\n  \r\n  const [currentLayout, setCurrentLayout] = useState(defaultLayout)\r\n  \r\n  const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n  \r\n  const layoutUtils = {\r\n    getContainerClass: () => {\r\n      if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n      if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n      return layoutConfig.responsive.desktop\r\n    },\r\n    \r\n    getMainClass: () => {\r\n      const baseClass = 'min-h-screen bg-black'\r\n      if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n        return `${baseClass} flex`\r\n      }\r\n      return baseClass\r\n    },\r\n    \r\n    hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n    hasHeader: () => currentLayout === 'dashboard',\r\n    hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n    hasNavigation: () => currentLayout === 'default',\r\n  }\r\n  \r\n  const contextValue = {\r\n    responsive,\r\n    layout: {\r\n      current: currentLayout,\r\n      config: layoutConfig,\r\n      setLayout: setCurrentLayout,\r\n    },\r\n    layoutUtils,\r\n  }\r\n  \r\n  return (\r\n    <ResponsiveLayoutContext.Provider value={contextValue}>\r\n      {children}\r\n    </ResponsiveLayoutContext.Provider>\r\n  )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n  children, \r\n  defaultLayout = DEFAULT_LAYOUT,\r\n  useResponsiveHook\r\n}) => {\r\n  return (\r\n    <ResponsiveProvider>\r\n      <ResponsiveLayoutProviderInner \r\n        defaultLayout={defaultLayout}\r\n        useResponsiveHook={useResponsiveHook}\r\n      >\r\n        {children}\r\n      </ResponsiveLayoutProviderInner>\r\n    </ResponsiveProvider>\r\n  )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n  DefaultLayout, \r\n  SidebarLayout, \r\n  DashboardLayout, \r\n  MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n  children: React.ReactNode\r\n  /**\r\n   * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n   * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n   */\r\n  layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n  const { layout } = useResponsiveLayout()\r\n  \r\n  // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n  const currentLayout = layoutProp || layout.current\r\n  \r\n  // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n  const layouts = {\r\n    default: DefaultLayout,\r\n    sidebar: SidebarLayout,\r\n    dashboard: DashboardLayout,\r\n    minimal: MinimalLayout,\r\n  }\r\n  \r\n  const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n  \r\n  return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n  const { isMobile } = useResponsiveLayout()\r\n  const { currentPage, setCurrentPage } = useNavigation()\r\n  const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n  \r\n  const menuItems = [\r\n    { id: 'test', label: 'Suite de Test' },\r\n    { id: 'demo', label: 'Demo' },\r\n  ]\r\n  \r\n  return (\r\n    <div className=\"sticky top-0 z-50\">\r\n      <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n        <div className=\"w-full\">\r\n          <div className=\"px-4 py-4\">\r\n            <div className=\"flex items-center justify-between\">\r\n              <div className=\"flex items-center space-x-2\">\r\n                {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n                {isMobile && (\r\n                  <button\r\n                    onClick={() => setSidebarOpen(true)}\r\n                    className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n                  >\r\n                    <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n                    </svg>\r\n                  </button>\r\n                )}\r\n                \r\n                <div className=\"flex items-center space-x-2\">\r\n                  <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n                  <h3 className=\"text-base font-black text-white tracking-tight\">\r\n                    Sistema Responsivo\r\n                  </h3>\r\n                </div>\r\n                <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n                  DASHBOARD\r\n                </div>\r\n              </div>\r\n              \r\n              <div className=\"flex items-center space-x-2\">\r\n                {/* Botones visibles solo en desktop */}\r\n                {!isMobile && menuItems.map((page) => (\r\n                  <button\r\n                    key={page.id}\r\n                    onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n                    className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n                      currentPage === page.id \r\n                        ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n                        : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n                    }`}\r\n                  >\r\n                    {page.label}\r\n                  </button>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n\r\n      {/* Sidebar móvil desplegable */}\r\n      {isMobile && sidebarOpen && (\r\n        <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n          <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n            <div className=\"p-6 flex flex-col h-full pt-20\">\r\n              {/* Logo */}\r\n              <div className=\"flex items-center space-x-3 mb-8\">\r\n                <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n                  <span className=\"text-white font-bold text-sm\">RS</span>\r\n                </div>\r\n                <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n              </div>\r\n              \r\n              {/* Navigation */}\r\n              <nav className=\"space-y-2\">\r\n                {menuItems.map((item) => (\r\n                  <button\r\n                    key={item.id}\r\n                    onClick={() => {\r\n                      setCurrentPage(item.id as 'demo' | 'test')\r\n                      setSidebarOpen(false)\r\n                    }}\r\n                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n                      currentPage === item.id \r\n                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n                    }`}\r\n                  >\r\n                    <span className=\"font-medium\">{item.label}</span>\r\n                  </button>\r\n                ))}\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n  const { isMobile, isTablet, breakpoint } = useResponsiveLayout()\r\n  const { currentPage, setCurrentPage } = useNavigation()\r\n  const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n  \r\n  const menuItems = [\r\n    { id: 'test', label: 'Suite de Test' },\r\n    { id: 'demo', label: 'Demo' },\r\n  ]\r\n  \r\n  return (\r\n    <>\r\n      {/* Hamburger button para móvil */}\r\n      {isMobile && (\r\n        <button\r\n          onClick={() => setSidebarOpen(true)}\r\n          className=\"fixed top-4 left-4 z-50 p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors bg-black/50 border border-gray-700\"\r\n        >\r\n          <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n\r\n      {/* Sidebar desktop */}\r\n      <aside className={`\r\n        bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\r\n        ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'}\r\n        ${isTablet ? 'w-56' : 'w-64'}\r\n      `}>\r\n      <div className=\"p-6 flex flex-col h-full\">\r\n        {/* Logo y Breakpoint */}\r\n        <div className=\"flex items-center space-x-3 mb-8\">\r\n          <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n            <span className=\"text-white font-bold text-sm\">RS</span>\r\n          </div>\r\n          <div>\r\n            <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n            <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest mt-1\">\r\n              {breakpoint.toUpperCase()}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        {/* Navigation */}\r\n        <nav className=\"space-y-2\">\r\n          {menuItems.map((item) => (\r\n            <button\r\n              key={item.id}\r\n              onClick={() => setCurrentPage(item.id as 'demo' | 'test')}\r\n              className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n                currentPage === item.id \r\n                  ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n                  : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n              }`}\r\n            >\r\n              <span className=\"font-medium\">{item.label}</span>\r\n            </button>\r\n          ))}\r\n        </nav>\r\n        \r\n      </div>\r\n      </aside>\r\n\r\n      {/* Sidebar móvil desplegable */}\r\n      {isMobile && sidebarOpen && (\r\n        <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n          <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n            <div className=\"p-6 flex flex-col h-full pt-20\">\r\n              {/* Logo */}\r\n              <div className=\"flex items-center space-x-3 mb-8\">\r\n                <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n                  <span className=\"text-white font-bold text-sm\">RS</span>\r\n                </div>\r\n                <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n              </div>\r\n              \r\n              {/* Navigation */}\r\n              <nav className=\"space-y-2\">\r\n                {menuItems.map((item) => (\r\n                  <button\r\n                    key={item.id}\r\n                    onClick={() => {\r\n                      setCurrentPage(item.id as 'demo' | 'test')\r\n                      setSidebarOpen(false)\r\n                    }}\r\n                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n                      currentPage === item.id \r\n                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n                    }`}\r\n                  >\r\n                    <span className=\"font-medium\">{item.label}</span>\r\n                  </button>\r\n                ))}\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default Sidebar\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Footer = () => {\r\n  const { layout, breakpoint, width, height } = useResponsiveLayout()\r\n  \r\n  return (\r\n    <footer className=\"bg-gradient-to-r from-gray-900 to-black border-t border-cyan-500/20\">\r\n      <div className={`${layout.config.spacing} py-6`}>\r\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\r\n          \r\n          {/* Brand */}\r\n          <div>\r\n            <div className=\"flex items-center space-x-2 mb-2\">\r\n              <div className=\"w-5 h-5 bg-cyan-500 rounded flex items-center justify-center\">\r\n                <span className=\"text-white font-bold text-xs\">RS</span>\r\n              </div>\r\n              <span className=\"text-white font-semibold text-sm\">Responsive System</span>\r\n            </div>\r\n            <p className=\"text-gray-400 text-xs leading-relaxed\">\r\n              Sistema completo de auto-escalado para aplicaciones React + Tailwind CSS\r\n            </p>\r\n          </div>\r\n          \r\n          {/* Status */}\r\n          <div>\r\n            <h3 className=\"text-white font-semibold text-sm mb-2\">Estado del Sistema</h3>\r\n            <div className=\"space-y-1\">\r\n              <div className=\"flex items-center justify-between text-xs\">\r\n                <span className=\"text-gray-400\">Breakpoint:</span>\r\n                <span className=\"text-cyan-400 font-medium\">{breakpoint.toUpperCase()}</span>\r\n              </div>\r\n              <div className=\"flex items-center justify-between text-xs\">\r\n                <span className=\"text-gray-400\">Layout:</span>\r\n                <span className=\"text-cyan-400 font-medium\">{layout.config.name}</span>\r\n              </div>\r\n              <div className=\"flex items-center justify-between text-xs\">\r\n                <span className=\"text-gray-400\">Resolución:</span>\r\n                <span className=\"text-cyan-400 font-medium\">{width} × {height}</span>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          \r\n          {/* Developer */}\r\n          <div>\r\n            <h3 className=\"text-white font-semibold text-sm mb-2\">Desarrollador</h3>\r\n            <div className=\"space-y-1\">\r\n              <p className=\"text-white font-medium text-xs\">Felipe Caroca</p>\r\n              <p className=\"text-gray-400 text-xs\">Frontend Developer</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        \r\n        {/* Bottom */}\r\n        <div className=\"border-t border-gray-800 mt-4 pt-4 flex flex-col items-center text-center\">\r\n          <p className=\"text-gray-500 text-xs\">\r\n            © 2025 Responsive System. Todos los derechos reservados.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  )\r\n}\r\n\r\nexport default Footer\r\n","import { useState } from 'react'\r\nimport { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation } from '../../context'\r\n\r\nconst Navigation = () => {\r\n  const { isMobile, breakpoint } = useResponsiveLayout()\r\n  const { currentPage, setCurrentPage } = useNavigation()\r\n  const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n  const pages = [\r\n    { id: 'demo', name: 'Demo' },\r\n    { id: 'test', name: 'Suite de Test' }\r\n  ]\r\n\r\n  return (\r\n    <div className=\"sticky top-0 z-50\">\r\n      <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n        <div className=\"w-full\">\r\n          <div className=\"px-4 py-4\">\r\n            <div className=\"flex items-center justify-between\">\r\n            <div className=\"flex items-center space-x-2\">\r\n              <div className=\"flex items-center space-x-2\">\r\n                <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n                <h3 className=\"text-base font-black text-white tracking-tight\">\r\n                  Sistema Responsivo\r\n                </h3>\r\n              </div>\r\n              <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n                {breakpoint.toUpperCase()}\r\n              </div>\r\n            </div>\r\n            \r\n            <div className=\"flex items-center space-x-2\">\r\n              {/* Botones visibles solo en desktop */}\r\n              {!isMobile && pages.map(page => (\r\n                <button\r\n                  key={page.id}\r\n                  onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n                  className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n                    currentPage === page.id \r\n                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n                  }`}\r\n                >\r\n                  {page.name}\r\n                </button>\r\n              ))}\r\n              \r\n              {/* Menú hamburguesa para móvil - A LA DERECHA */}\r\n              {isMobile && (\r\n                <button\r\n                  onClick={() => setSidebarOpen(!sidebarOpen)}\r\n                  className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n                >\r\n                  <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      {/* Menú móvil desplegable - TRADICIONAL */}\r\n      {isMobile && sidebarOpen && (\r\n        <div className=\"absolute top-full left-0 right-0 bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl z-50\">\r\n          <div className=\"p-4\">\r\n            {/* Navigation - VERTICAL como menú tradicional */}\r\n            <nav className=\"space-y-2\">\r\n              {pages.map((page) => (\r\n                <button\r\n                  key={page.id}\r\n                  onClick={() => {\r\n                    setCurrentPage(page.id as 'demo' | 'test')\r\n                    setSidebarOpen(false)\r\n                  }}\r\n                  className={`w-full text-left px-4 py-3 rounded-lg transition-all font-bold text-sm tracking-wide border ${\r\n                    currentPage === page.id \r\n                      ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n                      : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n                  }`}\r\n                >\r\n                  {page.name}\r\n                </button>\r\n              ))}\r\n            </nav>\r\n          </div>\r\n        </div>\r\n      )}\r\n      </nav>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface DefaultLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n  const { layoutUtils } = useResponsiveLayout()\r\n  \r\n  return (\r\n    <div className=\"min-h-screen bg-black flex flex-col\">\r\n      {/* Navigation fijo arriba */}\r\n      <Navigation />\r\n      \r\n      {/* Main content con padding-top para la navigation */}\r\n      <main className=\"flex-1\">\r\n        <div className={layoutUtils.getContainerClass()}>\r\n          {children}\r\n        </div>\r\n      </main>\r\n      \r\n      {/* Footer fijo abajo */}\r\n      <Footer />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  const { layoutUtils } = useResponsiveLayout()\r\n  \r\n  return (\r\n    <div className=\"min-h-screen bg-black flex\">\r\n      {/* Sidebar */}\r\n      <Sidebar />\r\n      \r\n      {/* Main content */}\r\n      <main className=\"flex-1 overflow-auto\">\r\n        <div className={layoutUtils.getContainerClass()}>\r\n          {children}\r\n        </div>\r\n      </main>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n  return (\r\n    <SidebarProvider>\r\n      <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n    </SidebarProvider>\r\n  )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider, useSidebar } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  const { layoutUtils } = useResponsiveLayout()\r\n  const { setSidebarOpen } = useSidebar()\r\n  \r\n  return (\r\n    <div className=\"min-h-screen bg-black flex flex-col\">\r\n      {/* Navbar para móvil (igual que SidebarLayout) */}\r\n      <div className=\"sticky top-0 z-50\">\r\n        <nav className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n          <div className=\"w-full\">\r\n            <div className=\"px-4 py-4\">\r\n              <div className=\"flex items-center justify-between\">\r\n                <div className=\"flex items-center space-x-2\">\r\n                  {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n                  <button\r\n                    onClick={() => setSidebarOpen(true)}\r\n                    className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n                  >\r\n                    <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n                    </svg>\r\n                  </button>\r\n                  \r\n                  <div className=\"flex items-center space-x-2\">\r\n                    <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n                    <h3 className=\"text-base font-black text-white tracking-tight\">\r\n                      Sistema Responsivo\r\n                    </h3>\r\n                  </div>\r\n                  <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n                    DASHBOARD\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </nav>\r\n      </div>\r\n      \r\n      {/* Content area con sidebar */}\r\n      <div className=\"flex flex-1\">\r\n        {/* Sidebar */}\r\n        <Sidebar />\r\n        \r\n        {/* Main content */}\r\n        <main className=\"flex-1 overflow-auto\">\r\n          <div className={layoutUtils.getContainerClass()}>\r\n            {children}\r\n          </div>\r\n        </main>\r\n      </div>\r\n      \r\n      {/* Footer */}\r\n      <Footer />\r\n    </div>\r\n  )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n  return (\r\n    <SidebarProvider>\r\n      <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n    </SidebarProvider>\r\n  )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\n\r\ninterface MinimalLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n  const { layoutUtils } = useResponsiveLayout()\r\n  \r\n  return (\r\n    <div className=\"min-h-screen bg-black\">\r\n      <main className={layoutUtils.getContainerClass()}>\r\n        {children}\r\n      </main>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n  compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n  const { current, setLayout, config } = useLayout()\r\n  \r\n  if (compact) {\r\n    return (\r\n      <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n        <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n        <select\r\n          value={current}\r\n          onChange={(e) => setLayout(e.target.value)}\r\n          className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n        >\r\n          {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n            <option key={key} value={key}>\r\n              {layoutConfig.name}\r\n            </option>\r\n          ))}\r\n        </select>\r\n      </div>\r\n    )\r\n  }\r\n  \r\n  return (\r\n    <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n      <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n      \r\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n        {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n          <button\r\n            key={key}\r\n            onClick={() => setLayout(key)}\r\n            className={`\r\n              p-4 rounded-lg border transition-all text-left\r\n              ${current === key \r\n                ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n                : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n              }\r\n            `}\r\n          >\r\n            <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n            <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n          </button>\r\n        ))}\r\n      </div>\r\n      \r\n      <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n        <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n        <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n        <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","pages","layoutUtils","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":";;AAUO,MAAMA,KAAwD,CAAC;AAAA,EACpE,UAAAC;AAAA,EACA,OAAOC,IAAS;AAClB,6BAGY,UAAAD,GAAS,GCVRE,IAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT,GAKaC,KAAuB,CAACC,MAC/BA,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAK,IAAU,QAC5CE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACxCE,KAASF,EAAoB,KAAW,OACrC,MAMIG,IAAqB,CAACC,MACC,CAAC,MAAM,MAAM,MAAM,MAAM,MAAM,OAAO,OAAO,OAAO,KAAK,EACxE,QAAQA,CAAU,GAM1BC,KAAqB,CAACD,MAC1BJ,EAAoBI,CAAU;AChCvC,SAASE,GACPC,GACAC,GACkC;AAClC,MAAIC,IAAgD;AACpD,SAAO,IAAIC,MAAwB;AACjC,IAAID,kBAAsBA,CAAO,GACjCA,IAAU,WAAW,MAAMF,EAAK,GAAGG,CAAI,GAAGF,CAAI;AAAA,EAChD;AACF;AAKA,SAASG,GAAeT,GAAeU,GAA0C;AAC/E,SAAOV,KAASU,IAAS,cAAc;AACzC;AAMO,MAAMC,KAAgB,MAAuB;AAClD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS;AAAA,IAC3C,OAAO,OAAO,SAAW,MAAc,OAAO,aAAa;AAAA,IAC3D,QAAQ,OAAO,SAAW,MAAc,OAAO,cAAc;AAAA,EAAA,CAC9D,GAGKC,IAAmBC,EAAY,MAAM;AACzC,IAAAH,EAAc;AAAA,MACZ,OAAO,OAAO;AAAA,MACd,QAAQ,OAAO;AAAA,IAAA,CAChB;AAAA,EACH,GAAG,CAAA,CAAE,GAGCI,IAA4BC;AAAA,IAChC,MAAMd,GAASW,GAAkB,GAAG;AAAA,IACpC,CAACA,CAAgB;AAAA,EAAA;AAInB,EAAAI,GAAU,MAAM;AACd,QAAI,SAAO,SAAW;AAEtB,oBAAO,iBAAiB,UAAUF,CAAyB,GAEpD,MAAM;AACX,eAAO,oBAAoB,UAAUA,CAAyB;AAAA,MAChE;AAAA,EACF,GAAG,CAACA,CAAyB,CAAC;AAE9B,QAAM,EAAE,OAAAjB,GAAO,QAAAU,EAAA,IAAWE,GAGpBV,IAAagB,EAAQ,MAAMnB,GAAqBC,CAAK,GAAG,CAACA,CAAK,CAAC,GAG/DoB,IAAcF,EAAQ,MAAMT,GAAeT,GAAOU,CAAM,GAAG,CAACV,GAAOU,CAAM,CAAC,GAG1EW,IAAOnB,MAAe,MACtBoB,IAAOpB,MAAe,MACtBqB,IAAOrB,MAAe,MACtBsB,IAAOtB,MAAe,MACtBuB,IAAOvB,MAAe,MACtBwB,IAAQxB,MAAe,OACvByB,IAAQzB,MAAe,OACvB0B,IAAQ1B,MAAe,OACvB2B,IAAQ3B,MAAe,OAGvB4B,IAAWT,KAAQC,GACnBS,IAAWR,GACXS,IAAYR,KAAQC,KAAQC,KAASC,KAASC,KAASC,GACvDI,IAAUZ,KAAQC,KAAQC,GAC1BW,IAAUV,KAAQC,KAAQC,KAASC,KAASC,KAASC,GACrDM,IAAcR,KAASC,KAASC,GAChCO,IAAOR,KAASC,GAChBQ,IAAOR,GAGPS,IAAalB,MAAgB,YAC7BmB,IAAcnB,MAAgB,aAG9BoB,IAAiBxB,EAAY,CAACyB,MAC3BxC,EAAmBC,CAAU,KAAKD,EAAmBwC,CAAE,GAC7D,CAACvC,CAAU,CAAC,GAETwC,IAAmB1B,EAAY,CAACyB,MAC7BxC,EAAmBC,CAAU,KAAKD,EAAmBwC,CAAE,GAC7D,CAACvC,CAAU,CAAC,GAETyC,KAAsB3B,EAAY,CAAC4B,GAAiBC,MAA6B;AACrF,UAAMC,IAAU7C,EAAmBC,CAAU;AAC7C,WAAO4C,KAAW7C,EAAmB2C,CAAG,KAAKE,KAAW7C,EAAmB4C,CAAG;AAAA,EAChF,GAAG,CAAC3C,CAAU,CAAC,GAGT6C,KAAY/B,EAAY,CAACgC,MACtBhD,KAASgD,GACf,CAAChD,CAAK,CAAC,GAEJiD,KAAcjC,EAAY,CAACkC,MACxBlD,KAASkD,GACf,CAAClD,CAAK,CAAC,GAEJmD,KAAiBnC,EAAY,CAACgC,GAAkBE,MAC7ClD,KAASgD,KAAYhD,KAASkD,GACpC,CAAClD,CAAK,CAAC,GAGJoD,KAAapC,EAAY,CAACqC,MACvB3C,KAAU2C,GAChB,CAAC3C,CAAM,CAAC,GAEL4C,KAAetC,EAAY,CAACuC,MACzB7C,KAAU6C,GAChB,CAAC7C,CAAM,CAAC,GAEL8C,KAAkBxC,EAAY,CAACqC,GAAmBE,MAC/C7C,KAAU2C,KAAa3C,KAAU6C,GACvC,CAAC7C,CAAM,CAAC;AAKX,SAAO;AAAA;AAAA,IAEL,YAAAR;AAAA,IACA,OAAAF;AAAA,IACA,QAAAU;AAAA,IACA,aAAAU;AAAA;AAAA,IAGA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA;AAAA,IAGA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,MAAAC;AAAA,IACA,MAAAC;AAAA;AAAA,IAGA,YAAAC;AAAA,IACA,aAAAC;AAAA;AAAA,IAGA,gBAAAC;AAAA,IACA,kBAAAE;AAAA,IACA,qBAAAC;AAAA,IACA,WAAAI;AAAA,IACA,aAAAE;AAAA,IACA,gBAAAE;AAAA,IACA,YAAAC;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAE;AAAA;AAAA,IAGA,OA9CY;AAAA,EA8CZ;AAEJ,GClKMC,IAA0BC,EAAiD,MAAS,GAE7EC,KAA6B,MAAM;AAC9C,QAAMC,IAAUC,EAAWJ,CAAuB;AAClD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,2EAA2E;AAE7F,SAAOA;AACT,GC3BME,IAAiBJ,EAA8C,MAAS,GAEjEK,IAA2D,CAAC,EAAE,UAAAnE,QAAe;AACxF,QAAM,CAACoE,GAAaC,CAAc,IAAInD,EAAS,EAAK;AAEpD,SACE,gBAAAoD,EAACJ,EAAe,UAAf,EAAwB,OAAO,EAAE,aAAAE,GAAa,gBAAAC,KAC5C,UAAArE,GACH;AAEJ,GAEauE,IAAa,MAAM;AAC9B,QAAMP,IAAUC,EAAWC,CAAc;AACzC,MAAI,CAACF;AACH,UAAM,IAAI,MAAM,kDAAkD;AAEpE,SAAOA;AACT,GClBMQ,IAAoBV,EAAqC;AAAA,EAC7D,aAAa;AAAA,EACb,gBAAgB,MAAM;AAAA,EAAC;AACzB,CAAC,GAEYW,IAAgB,MAAMR,EAAWO,CAAiB,GAOlDE,KAAwD,CAAC;AAAA,EACpE,UAAA1E;AAAA,EACA,aAAA2E,IAAc;AAChB,MAAM;AACJ,QAAM,CAACC,GAAaC,CAAc,IAAI3D,EAA0ByD,CAAW;AAE3E,SACE,gBAAAL,EAACE,EAAkB,UAAlB,EAA2B,OAAO,EAAE,aAAAI,GAAa,gBAAAC,KAC/C,UAAA7E,GACH;AAEJ,GC5Ba8E,IAAsB,MAAM;AACvC,QAAMd,IAAUD,GAAA;AAEhB,SAAO;AAAA;AAAA,IAEL,GAAGC,EAAQ;AAAA;AAAA,IAGX,QAAQ;AAAA,MACN,SAASA,EAAQ,OAAO;AAAA,MACxB,QAAQA,EAAQ,OAAO;AAAA,MACvB,WAAWA,EAAQ,OAAO;AAAA,IAAA;AAAA;AAAA,IAI5B,aAAaA,EAAQ;AAAA;AAAA,IAGrB,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IAClD,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IAClD,mBAAmB,MAAMA,EAAQ,OAAO,YAAY;AAAA,IACpD,iBAAiB,MAAMA,EAAQ,OAAO,YAAY;AAAA;AAAA,IAGlD,MAAM;AAAA,MACJ,MAAM,CAACZ,IAAW,SAAS,kBAAkBA,CAAQ;AAAA,MACrD,YAAY,CAAC2B,MAAwC;AACnD,cAAMC,IAAoB,CAAA;AAC1B,sBAAO,QAAQD,CAAW,EAAE,QAAQ,CAAC,CAACzE,GAAY2E,CAAI,MAAM;AAC1D,UAAI3E,MAAe,SACjB0E,EAAQ,KAAK,aAAaC,CAAI,EAAE,IAEhCD,EAAQ,KAAK,GAAG1E,CAAU,cAAc2E,CAAI,EAAE;AAAA,QAElD,CAAC,GACMD,EAAQ,KAAK,GAAG;AAAA,MACzB;AAAA,MACA,OAAO,CAACC,MAAiB,aAAaA,CAAI;AAAA,IAAA;AAAA;AAAA,IAI5C,SAAS;AAAA,MACP,WAAWjB,EAAQ,YAAY,kBAAA;AAAA,MAC/B,SAAS;AAAA,MACT,MAAM;AAAA,MACN,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ,GChDakB,KAAY,MAAM;AAC7B,QAAMC,IAAmBL,EAAA;AAEzB,SAAO;AAAA;AAAA,IAEL,SAASK,EAAiB,OAAO;AAAA,IACjC,QAAQA,EAAiB,OAAO;AAAA,IAChC,WAAWA,EAAiB,OAAO;AAAA;AAAA,IAGnC,GAAGA,EAAiB;AAAA;AAAA,IAGpB,iBAAiBA,EAAiB,gBAAA;AAAA,IAClC,iBAAiBA,EAAiB,gBAAA;AAAA,IAClC,mBAAmBA,EAAiB,kBAAA;AAAA,IACpC,iBAAiBA,EAAiB,gBAAA;AAAA;AAAA,IAGlC,MAAMA,EAAiB;AAAA;AAAA,IAGvB,SAASA,EAAiB;AAAA,EAAA;AAE9B,GCdaC,IAA8C;AAAA,EACzD,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,cAAc,QAAQ;AAAA,IACnC,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,SAAS;AAAA,IACtB,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,WAAW;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAC,UAAU,WAAW,QAAQ;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,SAAS;AAAA,IACP,MAAM;AAAA,IACN,aAAa;AAAA,IACb,YAAY,CAAA;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ,GAEaC,IAAiB,WACjBC,KAAoB,OAAO,KAAKF,CAAa,GCpCpDG,KAA8E,CAAC;AAAA,EACnF,UAAAvF;AAAA,EACA,eAAAwF;AAAA,EACA,mBAAAC;AACF,MAAM;AAEJ,QAAMC,IAAqB3E,GAAA,GAErB4E,IADmBF,IAAA,KACcC,GAEjC,CAACE,GAAeC,CAAgB,IAAI3E,EAASsE,CAAa,GAE1DM,IAAeV,EAAcQ,CAAa,KAAKR,EAAcC,CAAc,GAuB3EU,IAAe;AAAA,IACnB,YAAAJ;AAAA,IACA,QAAQ;AAAA,MACN,SAASC;AAAA,MACT,QAAQE;AAAA,MACR,WAAWD;AAAA,IAAA;AAAA,IAEb,aA5BkB;AAAA,MAClB,mBAAmB,MACbF,EAAW,WAAiBG,EAAa,WAAW,SACpDH,EAAW,WAAiBG,EAAa,WAAW,SACjDA,EAAa,WAAW;AAAA,MAGjC,cAAc,MAAM;AAClB,cAAME,IAAY;AAClB,eAAIJ,MAAkB,aAAaA,MAAkB,cAC5C,GAAGI,CAAS,UAEdA;AAAA,MACT;AAAA,MAEA,YAAY,MAAMJ,MAAkB,aAAaA,MAAkB;AAAA,MACnE,WAAW,MAAMA,MAAkB;AAAA,MACnC,WAAW,MAAMA,MAAkB,aAAaA,MAAkB;AAAA,MAClE,eAAe,MAAMA,MAAkB;AAAA,IAAA;AAAA,EAUvC;AAGF,2BACG/B,EAAwB,UAAxB,EAAiC,OAAOkC,GACtC,UAAA/F,GACH;AAEJ,GAEaiG,KAAoE,CAAC;AAAA,EAChF,UAAAjG;AAAA,EACA,eAAAwF,IAAgBH;AAAA,EAChB,mBAAAI;AACF,wBAEK1F,IAAA,EACC,UAAA,gBAAAuE;AAAA,EAACiB;AAAA,EAAA;AAAA,IACC,eAAAC;AAAA,IACA,mBAAAC;AAAA,IAEC,UAAAzF;AAAA,EAAA;AAAA,GAEL,GCvEEkG,KAAwC,CAAC,EAAE,UAAAlG,GAAU,QAAQmG,QAAiB;AAClF,QAAM,EAAE,QAAAC,EAAA,IAAWtB,EAAA,GAGbc,IAAgBO,KAAcC,EAAO,SAUrCC,IAPU;AAAA,IACd,SAASC;AAAA,IACT,SAASC;AAAA,IACT,WAAWC;AAAA,IACX,SAASC;AAAA,EAAA,EAGqBb,CAAqC,KAAKU;AAE1E,SAAO,gBAAAhC,EAAC+B,KAAiB,UAAArG,GAAS;AACpC,GChCM0G,KAAS,MAAM;AACnB,QAAM,EAAE,UAAAxE,EAAA,IAAa4C,EAAA,GACf,EAAE,aAAAF,GAAa,gBAAAC,EAAA,IAAmBJ,EAAA,GAClC,EAAE,aAAAL,GAAa,gBAAAC,EAAA,IAAmBE,EAAA,GAElCoC,IAAY;AAAA,IAChB,EAAE,IAAI,QAAQ,OAAO,gBAAA;AAAA,IACrB,EAAE,IAAI,QAAQ,OAAO,OAAA;AAAA,EAAO;AAG9B,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,IAAA,gBAAAtC,EAAC,UAAA,EAAO,WAAU,wGAChB,UAAA,gBAAAA,EAAC,SAAI,WAAU,UACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BAEZ,UAAA;AAAA,QAAA1E,KACC,gBAAAoC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,MAAMD,EAAe,EAAI;AAAA,YAClC,WAAU;AAAA,YAEV,UAAA,gBAAAC,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,UAAA;AAAA,QAAA;AAAA,QAIJ,gBAAAsC,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,UACjG,gBAAAA,EAAC,MAAA,EAAG,WAAU,kDAAiD,UAAA,qBAAA,CAE/D;AAAA,QAAA,GACF;AAAA,QACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uHAAsH,UAAA,YAAA,CAErI;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAA,EAAC,SAAI,WAAU,+BAEZ,WAACpC,KAAYyE,EAAU,IAAI,CAACE,MAC3B,gBAAAvC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMO,EAAegC,EAAK,EAAqB;AAAA,UACxD,WAAW,gFACTjC,MAAgBiC,EAAK,KACjB,oDACA,qFACN;AAAA,UAEC,UAAAA,EAAK;AAAA,QAAA;AAAA,QARDA,EAAK;AAAA,MAAA,CAUb,EAAA,CACH;AAAA,IAAA,GACF,EAAA,CACF,GACF,GACF;AAAA,IAGC3E,KAAYkC,KACX,gBAAAE,EAAC,SAAI,WAAU,kCAAiC,SAAS,MAAMD,EAAe,EAAK,GACjF,4BAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAuC,EAAC,OAAA,EAAI,WAAU,kCAEb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,QACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,qBAAA,CAAkB;AAAA,MAAA,GACnE;AAAA,wBAGC,OAAA,EAAI,WAAU,aACZ,UAAAqC,EAAU,IAAI,CAACG,MACd,gBAAAxC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAM;AACb,YAAAO,EAAeiC,EAAK,EAAqB,GACzCzC,EAAe,EAAK;AAAA,UACtB;AAAA,UACA,WAAW,gFACTO,MAAgBkC,EAAK,KACjB,2DACA,wDACN;AAAA,UAEA,UAAA,gBAAAxC,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QAXrCwC,EAAK;AAAA,MAAA,CAab,EAAA,CACH;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ,GCnGMC,IAAU,MAAM;AACpB,QAAM,EAAE,UAAA7E,GAAU,UAAAC,GAAU,YAAA7B,EAAA,IAAewE,EAAA,GACrC,EAAE,aAAAF,GAAa,gBAAAC,EAAA,IAAmBJ,EAAA,GAClC,EAAE,aAAAL,GAAa,gBAAAC,EAAA,IAAmBE,EAAA,GAElCoC,IAAY;AAAA,IAChB,EAAE,IAAI,QAAQ,OAAO,gBAAA;AAAA,IACrB,EAAE,IAAI,QAAQ,OAAO,OAAA;AAAA,EAAO;AAG9B,SACE,gBAAAC,EAAAI,GAAA,EAEG,UAAA;AAAA,IAAA9E,KACC,gBAAAoC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAMD,EAAe,EAAI;AAAA,QAClC,WAAU;AAAA,QAEV,UAAA,gBAAAC,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,MAAA;AAAA,IAAA;AAAA,IAKJ,gBAAAA,EAAC,WAAM,WAAW;AAAA;AAAA,UAEdpC,IAAW,WAAW,oBAAoB;AAAA,UAC1CC,IAAW,SAAS,MAAM;AAAA,SAE9B,UAAA,gBAAAyE,EAAC,OAAA,EAAI,WAAU,4BAEb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,0BACC,OAAA,EACC,UAAA;AAAA,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,sBAAkB;AAAA,4BAChE,OAAA,EAAI,WAAU,4HACZ,UAAAhE,EAAW,cAAY,CAC1B;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,wBAGC,OAAA,EAAI,WAAU,aACZ,UAAAqG,EAAU,IAAI,CAACG,MACd,gBAAAxC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAMO,EAAeiC,EAAK,EAAqB;AAAA,UACxD,WAAW,gFACTlC,MAAgBkC,EAAK,KACjB,2DACA,wDACN;AAAA,UAEA,UAAA,gBAAAxC,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QARrCwC,EAAK;AAAA,MAAA,CAUb,EAAA,CACH;AAAA,IAAA,EAAA,CAEF,EAAA,CACA;AAAA,IAGC5E,KAAYkC,KACX,gBAAAE,EAAC,SAAI,WAAU,kCAAiC,SAAS,MAAMD,EAAe,EAAK,GACjF,4BAAC,OAAA,EAAI,WAAU,sGACb,UAAA,gBAAAuC,EAAC,OAAA,EAAI,WAAU,kCAEb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,QAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,mEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,QACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,gCAA+B,UAAA,qBAAA,CAAkB;AAAA,MAAA,GACnE;AAAA,wBAGC,OAAA,EAAI,WAAU,aACZ,UAAAqC,EAAU,IAAI,CAACG,MACd,gBAAAxC;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,SAAS,MAAM;AACb,YAAAO,EAAeiC,EAAK,EAAqB,GACzCzC,EAAe,EAAK;AAAA,UACtB;AAAA,UACA,WAAW,gFACTO,MAAgBkC,EAAK,KACjB,2DACA,wDACN;AAAA,UAEA,UAAA,gBAAAxC,EAAC,QAAA,EAAK,WAAU,eAAe,YAAK,MAAA,CAAM;AAAA,QAAA;AAAA,QAXrCwC,EAAK;AAAA,MAAA,CAab,EAAA,CACH;AAAA,IAAA,EAAA,CACF,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ,GCvGMG,IAAS,MAAM;AACnB,QAAM,EAAE,QAAAb,GAAQ,YAAA9F,GAAY,OAAAF,GAAO,QAAAU,EAAA,IAAWgE,EAAA;AAE9C,SACE,gBAAAR,EAAC,UAAA,EAAO,WAAU,uEAChB,UAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAW,GAAGR,EAAO,OAAO,OAAO,SACtC,UAAA;AAAA,IAAA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,yCAGb,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EACC,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,UAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,gEACb,UAAA,gBAAAA,EAAC,UAAK,WAAU,gCAA+B,gBAAE,EAAA,CACnD;AAAA,UACA,gBAAAA,EAAC,QAAA,EAAK,WAAU,oCAAmC,UAAA,oBAAA,CAAiB;AAAA,QAAA,GACtE;AAAA,QACA,gBAAAA,EAAC,KAAA,EAAE,WAAU,yCAAwC,UAAA,2EAAA,CAErD;AAAA,MAAA,GACF;AAAA,wBAGC,OAAA,EACC,UAAA;AAAA,QAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,yCAAwC,UAAA,sBAAkB;AAAA,QACxE,gBAAAsC,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,YAAA,gBAAAtC,EAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,eAAW;AAAA,8BAC1C,QAAA,EAAK,WAAU,6BAA6B,UAAAhE,EAAW,cAAY,CAAE;AAAA,UAAA,GACxE;AAAA,UACA,gBAAAsG,EAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,YAAA,gBAAAtC,EAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,WAAO;AAAA,8BACtC,QAAA,EAAK,WAAU,6BAA6B,UAAA8B,EAAO,OAAO,KAAA,CAAK;AAAA,UAAA,GAClE;AAAA,UACA,gBAAAQ,EAAC,OAAA,EAAI,WAAU,6CACb,UAAA;AAAA,YAAA,gBAAAtC,EAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA,eAAW;AAAA,YAC3C,gBAAAsC,EAAC,QAAA,EAAK,WAAU,6BAA6B,UAAA;AAAA,cAAAxG;AAAA,cAAM;AAAA,cAAIU;AAAA,YAAA,EAAA,CAAO;AAAA,UAAA,EAAA,CAChE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,wBAGC,OAAA,EACC,UAAA;AAAA,QAAA,gBAAAwD,EAAC,MAAA,EAAG,WAAU,yCAAwC,UAAA,iBAAa;AAAA,QACnE,gBAAAsC,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,UAAA,gBAAAtC,EAAC,KAAA,EAAE,WAAU,kCAAiC,UAAA,iBAAa;AAAA,UAC3D,gBAAAA,EAAC,KAAA,EAAE,WAAU,yBAAwB,UAAA,qBAAA,CAAkB;AAAA,QAAA,EAAA,CACzD;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAGA,gBAAAA,EAAC,SAAI,WAAU,6EACb,4BAAC,KAAA,EAAE,WAAU,yBAAwB,UAAA,2DAAA,CAErC,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GCzDM4C,KAAa,MAAM;AACvB,QAAM,EAAE,UAAAhF,GAAU,YAAA5B,EAAA,IAAewE,EAAA,GAC3B,EAAE,aAAAF,GAAa,gBAAAC,EAAA,IAAmBJ,EAAA,GAClC,CAACL,GAAaC,CAAc,IAAInD,EAAS,EAAK,GAE9CiG,IAAQ;AAAA,IACZ,EAAE,IAAI,QAAQ,MAAM,OAAA;AAAA,IACpB,EAAE,IAAI,QAAQ,MAAM,gBAAA;AAAA,EAAgB;AAGtC,2BACG,OAAA,EAAI,WAAU,qBACb,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,wGACb,UAAA;AAAA,IAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,UACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAU,qCACf,UAAA;AAAA,MAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,UAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,UACjG,gBAAAA,EAAC,MAAA,EAAG,WAAU,kDAAiD,UAAA,qBAAA,CAE/D;AAAA,QAAA,GACF;AAAA,0BACC,OAAA,EAAI,WAAU,uHACZ,UAAAhE,EAAW,cAAY,CAC1B;AAAA,MAAA,GACF;AAAA,MAEA,gBAAAsG,EAAC,OAAA,EAAI,WAAU,+BAEZ,UAAA;AAAA,QAAA,CAAC1E,KAAYiF,EAAM,IAAI,CAAAN,MACtB,gBAAAvC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAMO,EAAegC,EAAK,EAAqB;AAAA,YACxD,WAAW,gFACTjC,MAAgBiC,EAAK,KACjB,oDACA,qFACN;AAAA,YAEC,UAAAA,EAAK;AAAA,UAAA;AAAA,UARDA,EAAK;AAAA,QAAA,CAUb;AAAA,QAGA3E,KACC,gBAAAoC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAAS,MAAMD,EAAe,CAACD,CAAW;AAAA,YAC1C,WAAU;AAAA,YAEV,UAAA,gBAAAE,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF,GACF,GACF;AAAA,IAGCpC,KAAYkC,KACX,gBAAAE,EAAC,OAAA,EAAI,WAAU,qIACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,OAEb,4BAAC,OAAA,EAAI,WAAU,aACZ,UAAA6C,EAAM,IAAI,CAACN,MACV,gBAAAvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,SAAS,MAAM;AACb,UAAAO,EAAegC,EAAK,EAAqB,GACzCxC,EAAe,EAAK;AAAA,QACtB;AAAA,QACA,WAAW,+FACTO,MAAgBiC,EAAK,KACjB,oDACA,qFACN;AAAA,QAEC,UAAAA,EAAK;AAAA,MAAA;AAAA,MAXDA,EAAK;AAAA,IAAA,CAab,EAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,EAAA,CAEF,EAAA,CACF;AAEJ,GCrFMP,IAA8C,CAAC,EAAE,UAAAtG,QAAe;AACpE,QAAM,EAAE,aAAAoH,EAAA,IAAgBtC,EAAA;AAExB,SACE,gBAAA8B,EAAC,OAAA,EAAI,WAAU,uCAEb,UAAA;AAAA,IAAA,gBAAAtC,EAAC4C,IAAA,EAAW;AAAA,IAGZ,gBAAA5C,EAAC,QAAA,EAAK,WAAU,UACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW8C,EAAY,kBAAA,GACzB,UAAApH,EAAA,CACH,EAAA,CACF;AAAA,sBAGCiH,GAAA,CAAA,CAAO;AAAA,EAAA,GACV;AAEJ,GClBMI,KAAgE,CAAC,EAAE,UAAArH,QAAe;AACtF,QAAM,EAAE,aAAAoH,EAAA,IAAgBtC,EAAA;AAExB,SACE,gBAAA8B,EAAC,OAAA,EAAI,WAAU,8BAEb,UAAA;AAAA,IAAA,gBAAAtC,EAACyC,GAAA,EAAQ;AAAA,IAGT,gBAAAzC,EAAC,QAAA,EAAK,WAAU,wBACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW8C,EAAY,kBAAA,GACzB,UAAApH,EAAA,CACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,GAEMuG,KAA8C,CAAC,EAAE,UAAAvG,QAEnD,gBAAAsE,EAACH,GAAA,EACC,UAAA,gBAAAG,EAAC+C,IAAA,EAAsB,UAAArH,GAAS,GAClC,GCtBEsH,KAAkE,CAAC,EAAE,UAAAtH,QAAe;AACxF,QAAM,EAAE,aAAAoH,EAAA,IAAgBtC,EAAA,GAClB,EAAE,gBAAAT,EAAA,IAAmBE,EAAA;AAE3B,SACE,gBAAAqC,EAAC,OAAA,EAAI,WAAU,uCAEb,UAAA;AAAA,IAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,qBACb,UAAA,gBAAAA,EAAC,SAAI,WAAU,wGACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,UACb,4BAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCACb,UAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,MAAA,gBAAAtC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS,MAAMD,EAAe,EAAI;AAAA,UAClC,WAAU;AAAA,UAEV,UAAA,gBAAAC,EAAC,SAAI,WAAU,WAAU,MAAK,QAAO,QAAO,gBAAe,SAAQ,aACjE,4BAAC,QAAA,EAAK,eAAc,SAAQ,gBAAe,SAAQ,aAAa,GAAG,GAAE,2BAA0B,EAAA,CACjG;AAAA,QAAA;AAAA,MAAA;AAAA,MAGF,gBAAAsC,EAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,QAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,kFAAA,CAAkF;AAAA,QACjG,gBAAAA,EAAC,MAAA,EAAG,WAAU,kDAAiD,UAAA,qBAAA,CAE/D;AAAA,MAAA,GACF;AAAA,MACA,gBAAAA,EAAC,OAAA,EAAI,WAAU,uHAAsH,UAAA,YAAA,CAErI;AAAA,IAAA,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF;AAAA,IAGA,gBAAAsC,EAAC,OAAA,EAAI,WAAU,eAEb,UAAA;AAAA,MAAA,gBAAAtC,EAACyC,GAAA,EAAQ;AAAA,MAGT,gBAAAzC,EAAC,QAAA,EAAK,WAAU,wBACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAW8C,EAAY,kBAAA,GACzB,UAAApH,EAAA,CACH,EAAA,CACF;AAAA,IAAA,GACF;AAAA,sBAGCiH,GAAA,CAAA,CAAO;AAAA,EAAA,GACV;AAEJ,GAEMT,KAAkD,CAAC,EAAE,UAAAxG,QAEvD,gBAAAsE,EAACH,GAAA,EACC,UAAA,gBAAAG,EAACgD,IAAA,EAAwB,UAAAtH,GAAS,GACpC,GChEEyG,KAA8C,CAAC,EAAE,UAAAzG,QAAe;AACpE,QAAM,EAAE,aAAAoH,EAAA,IAAgBtC,EAAA;AAExB,SACE,gBAAAR,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAW8C,EAAY,kBAAA,GAC1B,UAAApH,EAAA,CACH,EAAA,CACF;AAEJ,GCVMuH,KAAiB,CAAC,EAAE,SAAAC,IAAU,SAAiC;AACnE,QAAM,EAAE,SAAAtE,GAAS,WAAAuE,GAAW,QAAAC,EAAA,IAAWxC,GAAA;AAEvC,SAAIsC,IAEA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,IAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,WAAO;AAAA,IACnD,gBAAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAOpB;AAAA,QACP,UAAU,CAACyE,MAAMF,EAAUE,EAAE,OAAO,KAAK;AAAA,QACzC,WAAU;AAAA,QAET,iBAAO,QAAQvC,CAAa,EAAE,IAAI,CAAC,CAACwC,GAAK9B,CAAY,wBACnD,UAAA,EAAiB,OAAO8B,GACtB,UAAA9B,EAAa,KAAA,GADH8B,CAEb,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF,IAKF,gBAAAhB,EAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,IAAA,gBAAAtC,EAAC,MAAA,EAAG,WAAU,iCAAgC,UAAA,kBAAc;AAAA,IAE5D,gBAAAA,EAAC,OAAA,EAAI,WAAU,wDACZ,UAAA,OAAO,QAAQc,CAAa,EAAE,IAAI,CAAC,CAACwC,GAAK9B,CAAY,MACpD,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,SAAS,MAAMa,EAAUG,CAAG;AAAA,QAC5B,WAAW;AAAA;AAAA,gBAEP1E,MAAY0E,IACV,iDACA,iEACJ;AAAA;AAAA,QAGF,UAAA;AAAA,UAAA,gBAAAtD,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAwB,EAAa,MAAK;AAAA,UACvD,gBAAAxB,EAAC,OAAA,EAAI,WAAU,sBAAsB,YAAa,YAAA,CAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAXzDsD;AAAA,IAAA,CAaR,GACH;AAAA,IAEA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,MAAA,gBAAAtC,EAAC,OAAA,EAAI,WAAU,8BAA6B,UAAA,kBAAc;AAAA,MAC1D,gBAAAA,EAAC,OAAA,EAAI,WAAU,qCAAqC,YAAO,MAAK;AAAA,MAChE,gBAAAA,EAAC,OAAA,EAAI,WAAU,yBAAyB,YAAO,YAAA,CAAY;AAAA,IAAA,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"responsive-system.mjs","sources":["../src/providers/ResponsiveProvider.tsx","../src/constants/breakpoints.ts","../src/hooks/useResponsive.ts","../src/context/ResponsiveLayoutContext.tsx","../src/context/SidebarContext.tsx","../src/context/NavigationContext.tsx","../src/hooks/useResponsiveLayout.ts","../src/hooks/useLayout.ts","../src/config/layout.ts","../src/providers/ResponsiveLayoutProvider.tsx","../src/layouts/MainLayout.tsx","../src/components/layout/Header.tsx","../src/components/layout/Sidebar.tsx","../src/components/layout/Footer.tsx","../src/components/layout/Navigation.tsx","../src/layouts/DefaultLayout.tsx","../src/layouts/SidebarLayout.tsx","../src/layouts/DashboardLayout.tsx","../src/layouts/MinimalLayout.tsx","../src/components/LayoutSwitcher.tsx"],"sourcesContent":["import React from 'react'\r\nimport type { ResponsiveProviderProps } from '../types/responsive'\r\n\r\n/**\r\n * ResponsiveProvider - Provider simplificado para el sistema responsive\r\n * \r\n * Nota: Con el sistema de auto-scaling mediante plugin de Tailwind,\r\n * este Provider es OPCIONAL y solo se necesita si quieres acceder\r\n * al hook useResponsive() en tus componentes.\r\n */\r\nexport const ResponsiveProvider: React.FC<ResponsiveProviderProps> = ({\r\n  children,\r\n  debug: _debug = false\r\n}) => {\r\n  // El Provider ahora solo envuelve children sin context\r\n  // El auto-scaling funciona mediante el plugin de Tailwind\r\n  return <>{children}</>\r\n}\r\n","import type { Breakpoint } from '../types/responsive'\r\n\r\n/**\r\n * Default breakpoint values\r\n * Deben coincidir con tailwind.config.js\r\n */\r\nexport const DEFAULT_BREAKPOINTS: Record<Breakpoint, number> = {\r\n  xs: 475,\r\n  sm: 640,\r\n  md: 768,\r\n  lg: 1024,\r\n  xl: 1280,\r\n  '2xl': 1536,\r\n  '3xl': 1920,\r\n  '4xl': 2560,\r\n  '5xl': 3840\r\n}\r\n\r\n/**\r\n * Get current breakpoint based on window width\r\n */\r\nexport const getCurrentBreakpoint = (width: number): Breakpoint => {\r\n  if (width >= DEFAULT_BREAKPOINTS['5xl']) return '5xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['4xl']) return '4xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['3xl']) return '3xl'\r\n  if (width >= DEFAULT_BREAKPOINTS['2xl']) return '2xl'\r\n  if (width >= DEFAULT_BREAKPOINTS.xl) return 'xl'\r\n  if (width >= DEFAULT_BREAKPOINTS.lg) return 'lg'\r\n  if (width >= DEFAULT_BREAKPOINTS.md) return 'md'\r\n  if (width >= DEFAULT_BREAKPOINTS.sm) return 'sm'\r\n  return 'xs'\r\n}\r\n\r\n/**\r\n * Get breakpoint index (for comparisons)\r\n */\r\nexport const getBreakpointIndex = (breakpoint: Breakpoint): number => {\r\n  const breakpoints: Breakpoint[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl']\r\n  return breakpoints.indexOf(breakpoint)\r\n}\r\n\r\n/**\r\n * Get breakpoint value in pixels\r\n */\r\nexport const getBreakpointValue = (breakpoint: Breakpoint): number => {\r\n  return DEFAULT_BREAKPOINTS[breakpoint]\r\n}\r\n\r\n","import { useState, useEffect, useCallback, useMemo } from 'react'\r\nimport type { \r\n  ResponsiveState, \r\n  Breakpoint\r\n} from '../types/responsive'\r\nimport { \r\n  getCurrentBreakpoint,\r\n  getBreakpointIndex\r\n} from '../constants/breakpoints'\r\n\r\n/**\r\n * Debounce utility\r\n */\r\nfunction debounce<T extends (...args: unknown[]) => void>(\r\n  func: T,\r\n  wait: number\r\n): (...args: Parameters<T>) => void {\r\n  let timeout: ReturnType<typeof setTimeout> | null = null\r\n  return (...args: Parameters<T>) => {\r\n    if (timeout) clearTimeout(timeout)\r\n    timeout = setTimeout(() => func(...args), wait)\r\n  }\r\n}\r\n\r\n/**\r\n * Get orientation based on dimensions\r\n */\r\nfunction getOrientation(width: number, height: number): 'landscape' | 'portrait' {\r\n  return width >= height ? 'landscape' : 'portrait'\r\n}\r\n\r\n/**\r\n * Hook principal useResponsive\r\n * Provee información sobre el breakpoint actual y helpers para responsive\r\n */\r\nexport const useResponsive = (): ResponsiveState => {\r\n  const [dimensions, setDimensions] = useState({\r\n    width: typeof window !== 'undefined' ? window.innerWidth : 1024,\r\n    height: typeof window !== 'undefined' ? window.innerHeight : 768\r\n  })\r\n\r\n  // Función para actualizar dimensiones\r\n  const updateDimensions = useCallback(() => {\r\n    setDimensions({\r\n      width: window.innerWidth,\r\n      height: window.innerHeight\r\n    })\r\n  }, [])\r\n\r\n  // Debounced update para optimizar performance\r\n  const debouncedUpdateDimensions = useMemo(\r\n    () => debounce(updateDimensions, 100),\r\n    [updateDimensions]\r\n  )\r\n\r\n  // Effect para escuchar cambios de tamaño\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined') return\r\n\r\n    window.addEventListener('resize', debouncedUpdateDimensions)\r\n    \r\n    return () => {\r\n      window.removeEventListener('resize', debouncedUpdateDimensions)\r\n    }\r\n  }, [debouncedUpdateDimensions])\r\n\r\n  const { width, height } = dimensions\r\n\r\n  // Calcular breakpoint actual\r\n  const breakpoint = useMemo(() => getCurrentBreakpoint(width), [width])\r\n  \r\n  // Calcular orientación\r\n  const orientation = useMemo(() => getOrientation(width, height), [width, height])\r\n\r\n  // Helpers booleanos por breakpoint específico\r\n  const isXs = breakpoint === 'xs'\r\n  const isSm = breakpoint === 'sm'\r\n  const isMd = breakpoint === 'md'\r\n  const isLg = breakpoint === 'lg'\r\n  const isXl = breakpoint === 'xl'\r\n  const is2Xl = breakpoint === '2xl'\r\n  const is3Xl = breakpoint === '3xl'\r\n  const is4Xl = breakpoint === '4xl'\r\n  const is5Xl = breakpoint === '5xl'\r\n\r\n  // Helpers booleanos agrupados\r\n  const isMobile = isXs || isSm\r\n  const isTablet = isMd\r\n  const isDesktop = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n  const isSmall = isXs || isSm || isMd\r\n  const isLarge = isLg || isXl || is2Xl || is3Xl || is4Xl || is5Xl\r\n  const isUltraWide = is3Xl || is4Xl || is5Xl\r\n  const is4K = is4Xl || is5Xl\r\n  const is5K = is5Xl\r\n\r\n  // Helpers de orientación\r\n  const isPortrait = orientation === 'portrait'\r\n  const isLandscape = orientation === 'landscape'\r\n\r\n  // Funciones de comparación de breakpoints\r\n  const isBreakpointUp = useCallback((bp: Breakpoint): boolean => {\r\n    return getBreakpointIndex(breakpoint) >= getBreakpointIndex(bp)\r\n  }, [breakpoint])\r\n\r\n  const isBreakpointDown = useCallback((bp: Breakpoint): boolean => {\r\n    return getBreakpointIndex(breakpoint) <= getBreakpointIndex(bp)\r\n  }, [breakpoint])\r\n\r\n  const isBreakpointBetween = useCallback((min: Breakpoint, max: Breakpoint): boolean => {\r\n    const current = getBreakpointIndex(breakpoint)\r\n    return current >= getBreakpointIndex(min) && current <= getBreakpointIndex(max)\r\n  }, [breakpoint])\r\n\r\n  // Funciones de comparación de ancho\r\n  const isWidthUp = useCallback((minWidth: number): boolean => {\r\n    return width >= minWidth\r\n  }, [width])\r\n\r\n  const isWidthDown = useCallback((maxWidth: number): boolean => {\r\n    return width <= maxWidth\r\n  }, [width])\r\n\r\n  const isWidthBetween = useCallback((minWidth: number, maxWidth: number): boolean => {\r\n    return width >= minWidth && width <= maxWidth\r\n  }, [width])\r\n\r\n  // Funciones de comparación de altura\r\n  const isHeightUp = useCallback((minHeight: number): boolean => {\r\n    return height >= minHeight\r\n  }, [height])\r\n\r\n  const isHeightDown = useCallback((maxHeight: number): boolean => {\r\n    return height <= maxHeight\r\n  }, [height])\r\n\r\n  const isHeightBetween = useCallback((minHeight: number, maxHeight: number): boolean => {\r\n    return height >= minHeight && height <= maxHeight\r\n  }, [height])\r\n\r\n  // Debug mode\r\n  const debug = false\r\n\r\n  return {\r\n    // Estado básico\r\n    breakpoint,\r\n    width,\r\n    height,\r\n    orientation,\r\n    \r\n    // Helpers booleanos específicos\r\n    isXs,\r\n    isSm,\r\n    isMd,\r\n    isLg,\r\n    isXl,\r\n    is2Xl,\r\n    is3Xl,\r\n    is4Xl,\r\n    is5Xl,\r\n    \r\n    // Helpers booleanos agrupados\r\n    isMobile,\r\n    isTablet,\r\n    isDesktop,\r\n    isSmall,\r\n    isLarge,\r\n    isUltraWide,\r\n    is4K,\r\n    is5K,\r\n    \r\n    // Helpers de orientación\r\n    isPortrait,\r\n    isLandscape,\r\n    \r\n    // Funciones de comparación\r\n    isBreakpointUp,\r\n    isBreakpointDown,\r\n    isBreakpointBetween,\r\n    isWidthUp,\r\n    isWidthDown,\r\n    isWidthBetween,\r\n    isHeightUp,\r\n    isHeightDown,\r\n    isHeightBetween,\r\n    \r\n    // Debug\r\n    debug\r\n  }\r\n}\r\n","import { createContext, useContext } from 'react'\r\nimport type { ResponsiveState } from '../types/responsive'\r\nimport type { LayoutConfig } from '../config/layout'\r\n\r\nexport interface ResponsiveLayoutState {\r\n  // Estado del sistema responsivo\r\n  responsive: ResponsiveState\r\n  \r\n  // Estado del layout\r\n  layout: {\r\n    current: string\r\n    config: LayoutConfig\r\n    setLayout: (layout: string) => void\r\n  }\r\n  \r\n  // Utilidades de layout\r\n  layoutUtils: {\r\n    getContainerClass: () => string\r\n    getMainClass: () => string\r\n    hasSidebar: () => boolean\r\n    hasHeader: () => boolean\r\n    hasFooter: () => boolean\r\n    hasNavigation: () => boolean\r\n  }\r\n}\r\n\r\nconst ResponsiveLayoutContext = createContext<ResponsiveLayoutState | undefined>(undefined)\r\n\r\nexport const useResponsiveLayoutContext = () => {\r\n  const context = useContext(ResponsiveLayoutContext)\r\n  if (!context) {\r\n    throw new Error('useResponsiveLayoutContext must be used within a ResponsiveLayoutProvider')\r\n  }\r\n  return context\r\n}\r\n\r\nexport { ResponsiveLayoutContext }\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface SidebarContextType {\r\n  sidebarOpen: boolean\r\n  setSidebarOpen: (open: boolean) => void\r\n}\r\n\r\nconst SidebarContext = createContext<SidebarContextType | undefined>(undefined)\r\n\r\nexport const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  const [sidebarOpen, setSidebarOpen] = useState(false)\r\n\r\n  return (\r\n    <SidebarContext.Provider value={{ sidebarOpen, setSidebarOpen }}>\r\n      {children}\r\n    </SidebarContext.Provider>\r\n  )\r\n}\r\n\r\nexport const useSidebar = () => {\r\n  const context = useContext(SidebarContext)\r\n  if (!context) {\r\n    throw new Error('useSidebar must be used within a SidebarProvider')\r\n  }\r\n  return context\r\n}\r\n","import React, { createContext, useContext, useState } from 'react'\r\n\r\ninterface NavigationContextType {\r\n  currentPage: 'demo' | 'test'\r\n  setCurrentPage: (page: 'demo' | 'test') => void\r\n}\r\n\r\nconst NavigationContext = createContext<NavigationContextType>({\r\n  currentPage: 'test',\r\n  setCurrentPage: () => {}\r\n})\r\n\r\nexport const useNavigation = () => useContext(NavigationContext)\r\n\r\ninterface NavigationProviderProps {\r\n  children: React.ReactNode\r\n  defaultPage?: 'demo' | 'test'\r\n}\r\n\r\nexport const NavigationProvider: React.FC<NavigationProviderProps> = ({ \r\n  children, \r\n  defaultPage = 'test' \r\n}) => {\r\n  const [currentPage, setCurrentPage] = useState<'demo' | 'test'>(defaultPage)\r\n\r\n  return (\r\n    <NavigationContext.Provider value={{ currentPage, setCurrentPage }}>\r\n      {children}\r\n    </NavigationContext.Provider>\r\n  )\r\n}\r\n\r\n","import { useResponsiveLayoutContext } from '../context'\r\n\r\nexport const useResponsiveLayout = () => {\r\n  const context = useResponsiveLayoutContext()\r\n  \r\n  return {\r\n    // Todo el sistema responsivo original\r\n    ...context.responsive,\r\n    \r\n    // Sistema de layout\r\n    layout: {\r\n      current: context.layout.current,\r\n      config: context.layout.config,\r\n      setLayout: context.layout.setLayout,\r\n    },\r\n    \r\n    // Utilidades de layout\r\n    layoutUtils: context.layoutUtils,\r\n    \r\n    // Helpers específicos del layout\r\n    isDefaultLayout: () => context.layout.current === 'default',\r\n    isSidebarLayout: () => context.layout.current === 'sidebar',\r\n    isDashboardLayout: () => context.layout.current === 'dashboard',\r\n    isMinimalLayout: () => context.layout.current === 'minimal',\r\n    \r\n    // Grid helpers que usan el sistema auto-escalable\r\n    grid: {\r\n      auto: (minWidth = 'md') => `grid-cols-auto-${minWidth}`,\r\n      responsive: (breakpoints: Record<string, number>) => {\r\n        const classes: string[] = []\r\n        Object.entries(breakpoints).forEach(([breakpoint, cols]) => {\r\n          if (breakpoint === 'base') {\r\n            classes.push(`grid-cols-${cols}`)\r\n          } else {\r\n            classes.push(`${breakpoint}:grid-cols-${cols}`)\r\n          }\r\n        })\r\n        return classes.join(' ')\r\n      },\r\n      fixed: (cols: number) => `grid-cols-${cols}`,\r\n    },\r\n    \r\n    // Spacing helpers que escalan automáticamente\r\n    spacing: {\r\n      container: context.layoutUtils.getContainerClass(),\r\n      section: 'mb-6',\r\n      card: 'p-6',\r\n      gap: 'gap-4',\r\n    },\r\n  }\r\n}\r\n","import { useResponsiveLayout } from './index'\r\n\r\nexport const useLayout = () => {\r\n  const responsiveLayout = useResponsiveLayout()\r\n  \r\n  return {\r\n    // Layout actual\r\n    current: responsiveLayout.layout.current,\r\n    config: responsiveLayout.layout.config,\r\n    setLayout: responsiveLayout.layout.setLayout,\r\n    \r\n    // Utilidades\r\n    ...responsiveLayout.layoutUtils,\r\n    \r\n    // Helpers específicos\r\n    isDefaultLayout: responsiveLayout.isDefaultLayout(),\r\n    isSidebarLayout: responsiveLayout.isSidebarLayout(),\r\n    isDashboardLayout: responsiveLayout.isDashboardLayout(),\r\n    isMinimalLayout: responsiveLayout.isMinimalLayout(),\r\n    \r\n    // Grid helpers\r\n    grid: responsiveLayout.grid,\r\n    \r\n    // Spacing helpers\r\n    spacing: responsiveLayout.spacing,\r\n  }\r\n}\r\n","export interface LayoutConfig {\r\n  name: string\r\n  description: string\r\n  components: string[]\r\n  spacing: string\r\n  responsive: {\r\n    mobile: string\r\n    tablet: string\r\n    desktop: string\r\n  }\r\n}\r\n\r\nexport const LAYOUT_CONFIG: Record<string, LayoutConfig> = {\r\n  default: {\r\n    name: 'Default',\r\n    description: 'Navbar arriba, body central, footer abajo',\r\n    components: ['Navigation', 'Footer'],\r\n    spacing: 'p-4 md:p-6 lg:p-8',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-8'\r\n    }\r\n  },\r\n  sidebar: {\r\n    name: 'Sidebar',\r\n    description: 'Sidebar izquierda, contenido principal',\r\n    components: ['Sidebar'],\r\n    spacing: 'p-4 md:p-6',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-6'\r\n    }\r\n  },\r\n  dashboard: {\r\n    name: 'Dashboard',\r\n    description: 'Header + Sidebar + Main + Footer',\r\n    components: ['Header', 'Sidebar', 'Footer'],\r\n    spacing: 'p-4 md:p-6 lg:p-8',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-8'\r\n    }\r\n  },\r\n  minimal: {\r\n    name: 'Minimal',\r\n    description: 'Solo contenido, sin navegación',\r\n    components: [],\r\n    spacing: 'p-4 md:p-6',\r\n    responsive: {\r\n      mobile: 'p-4',\r\n      tablet: 'p-6',\r\n      desktop: 'p-6'\r\n    }\r\n  }\r\n}\r\n\r\nexport const DEFAULT_LAYOUT = 'default'\r\nexport const AVAILABLE_LAYOUTS = Object.keys(LAYOUT_CONFIG)\r\n","import React, { useState } from 'react'\r\nimport { ResponsiveProvider } from './index'\r\nimport { useResponsive } from '../hooks'\r\nimport { ResponsiveLayoutContext } from '../context'\r\nimport { LAYOUT_CONFIG, DEFAULT_LAYOUT } from '../config/layout'\r\nimport type { ResponsiveState } from '../types/responsive'\r\n\r\ninterface ResponsiveLayoutProviderProps {\r\n  children: React.ReactNode\r\n  defaultLayout?: string\r\n  /**\r\n   * Hook responsivo personalizado del proyecto consumidor.\r\n   * Si se proporciona, se usará en lugar del hook interno del paquete.\r\n   * Debe retornar un objeto compatible con ResponsiveState.\r\n   */\r\n  useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\ninterface ResponsiveLayoutProviderInnerProps {\r\n  children: React.ReactNode\r\n  defaultLayout: string\r\n  useResponsiveHook?: () => ResponsiveState\r\n}\r\n\r\nconst ResponsiveLayoutProviderInner: React.FC<ResponsiveLayoutProviderInnerProps> = ({ \r\n  children, \r\n  defaultLayout,\r\n  useResponsiveHook\r\n}) => {\r\n  // Usar hook personalizado si se proporciona, sino usar el hook interno\r\n  const internalResponsive = useResponsive()\r\n  const customResponsive = useResponsiveHook?.()\r\n  const responsive = customResponsive || internalResponsive\r\n  \r\n  const [currentLayout, setCurrentLayout] = useState(defaultLayout)\r\n  \r\n  const layoutConfig = LAYOUT_CONFIG[currentLayout] || LAYOUT_CONFIG[DEFAULT_LAYOUT]\r\n  \r\n  const layoutUtils = {\r\n    getContainerClass: () => {\r\n      if (responsive.isMobile) return layoutConfig.responsive.mobile\r\n      if (responsive.isTablet) return layoutConfig.responsive.tablet\r\n      return layoutConfig.responsive.desktop\r\n    },\r\n    \r\n    getMainClass: () => {\r\n      const baseClass = 'min-h-screen bg-black'\r\n      if (currentLayout === 'sidebar' || currentLayout === 'dashboard') {\r\n        return `${baseClass} flex`\r\n      }\r\n      return baseClass\r\n    },\r\n    \r\n    hasSidebar: () => currentLayout === 'sidebar' || currentLayout === 'dashboard',\r\n    hasHeader: () => currentLayout === 'dashboard',\r\n    hasFooter: () => currentLayout === 'default' || currentLayout === 'dashboard',\r\n    hasNavigation: () => currentLayout === 'default',\r\n  }\r\n  \r\n  const contextValue = {\r\n    responsive,\r\n    layout: {\r\n      current: currentLayout,\r\n      config: layoutConfig,\r\n      setLayout: setCurrentLayout,\r\n    },\r\n    layoutUtils,\r\n  }\r\n  \r\n  return (\r\n    <ResponsiveLayoutContext.Provider value={contextValue}>\r\n      {children}\r\n    </ResponsiveLayoutContext.Provider>\r\n  )\r\n}\r\n\r\nexport const ResponsiveLayoutProvider: React.FC<ResponsiveLayoutProviderProps> = ({ \r\n  children, \r\n  defaultLayout = DEFAULT_LAYOUT,\r\n  useResponsiveHook\r\n}) => {\r\n  return (\r\n    <ResponsiveProvider>\r\n      <ResponsiveLayoutProviderInner \r\n        defaultLayout={defaultLayout}\r\n        useResponsiveHook={useResponsiveHook}\r\n      >\r\n        {children}\r\n      </ResponsiveLayoutProviderInner>\r\n    </ResponsiveProvider>\r\n  )\r\n}\r\n","import React from 'react'\r\nimport { useResponsiveLayout } from '../hooks'\r\nimport { \r\n  DefaultLayout, \r\n  SidebarLayout, \r\n  DashboardLayout, \r\n  MinimalLayout \r\n} from './index'\r\n\r\ninterface MainLayoutProps {\r\n  children: React.ReactNode\r\n  /**\r\n   * Layout específico a usar. Si se proporciona, sobrescribe el layout del contexto.\r\n   * Valores posibles: 'default', 'sidebar', 'dashboard', 'minimal'\r\n   */\r\n  layout?: 'default' | 'sidebar' | 'dashboard' | 'minimal'\r\n}\r\n\r\nconst MainLayout: React.FC<MainLayoutProps> = ({ children, layout: layoutProp }) => {\r\n  const { layout } = useResponsiveLayout()\r\n  \r\n  // Usar el layout del prop si se proporciona, sino usar el del contexto\r\n  const currentLayout = layoutProp || layout.current\r\n  \r\n  // Seleccionar el layout apropiado basado en el estado del contexto o prop\r\n  const layouts = {\r\n    default: DefaultLayout,\r\n    sidebar: SidebarLayout,\r\n    dashboard: DashboardLayout,\r\n    minimal: MinimalLayout,\r\n  }\r\n  \r\n  const LayoutComponent = layouts[currentLayout as keyof typeof layouts] || DefaultLayout\r\n  \r\n  return <LayoutComponent>{children}</LayoutComponent>\r\n}\r\n\r\nexport default MainLayout\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useNavigation, useSidebar } from '../../context'\r\n\r\nconst Header = () => {\r\n  const { isMobile } = useResponsiveLayout()\r\n  const { currentPage, setCurrentPage } = useNavigation()\r\n  const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n  \r\n  const menuItems = [\r\n    { id: 'test', label: 'Suite de Test' },\r\n    { id: 'demo', label: 'Demo' },\r\n  ]\r\n  \r\n  return (\r\n    <div className=\"sticky top-0 z-50\">\r\n      <header className=\"bg-gradient-to-r from-gray-900 via-black to-gray-900 border-b border-cyan-500/20 shadow-2xl relative\">\r\n        <div className=\"w-full\">\r\n          <div className=\"px-4 py-4\">\r\n            <div className=\"flex items-center justify-between\">\r\n              <div className=\"flex items-center space-x-2\">\r\n                {/* Hamburger button para móvil - A LA IZQUIERDA */}\r\n                {isMobile && (\r\n                  <button\r\n                    onClick={() => setSidebarOpen(true)}\r\n                    className=\"p-2 rounded-lg text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10 transition-colors\"\r\n                  >\r\n                    <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n                    </svg>\r\n                  </button>\r\n                )}\r\n                \r\n                <div className=\"flex items-center space-x-2\">\r\n                  <div className=\"w-1.5 h-1.5 bg-cyan-400 rounded-full shadow-lg shadow-cyan-400/50 animate-pulse\"></div>\r\n                  <h3 className=\"text-base font-black text-white tracking-tight\">\r\n                    Sistema Responsivo\r\n                  </h3>\r\n                </div>\r\n                <div className=\"px-2 py-0.5 text-cyan-400 font-mono bg-black/50 border border-cyan-500/30 rounded text-xs font-bold tracking-widest\">\r\n                  DASHBOARD\r\n                </div>\r\n              </div>\r\n              \r\n              <div className=\"flex items-center space-x-2\">\r\n                {/* Botones visibles solo en desktop */}\r\n                {!isMobile && menuItems.map((page) => (\r\n                  <button\r\n                    key={page.id}\r\n                    onClick={() => setCurrentPage(page.id as 'demo' | 'test')}\r\n                    className={`px-3 py-1.5 rounded-lg transition-all font-bold text-xs tracking-wide border ${\r\n                      currentPage === page.id \r\n                        ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50' \r\n                        : 'bg-black/50 text-gray-400 hover:text-gray-300 border-gray-700 hover:border-gray-600'\r\n                    }`}\r\n                  >\r\n                    {page.label}\r\n                  </button>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n\r\n      {/* Sidebar móvil desplegable */}\r\n      {isMobile && sidebarOpen && (\r\n        <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n          <div className=\"fixed top-0 left-0 w-64 h-full bg-gradient-to-b from-gray-900 to-black border-r border-cyan-500/20\">\r\n            <div className=\"p-6 flex flex-col h-full pt-20\">\r\n              {/* Logo */}\r\n              <div className=\"flex items-center space-x-3 mb-8\">\r\n                <div className=\"w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center\">\r\n                  <span className=\"text-white font-bold text-sm\">RS</span>\r\n                </div>\r\n                <span className=\"text-white font-bold text-lg\">Sistema Responsivo</span>\r\n              </div>\r\n              \r\n              {/* Navigation */}\r\n              <nav className=\"space-y-2\">\r\n                {menuItems.map((item) => (\r\n                  <button\r\n                    key={item.id}\r\n                    onClick={() => {\r\n                      setCurrentPage(item.id as 'demo' | 'test')\r\n                      setSidebarOpen(false)\r\n                    }}\r\n                    className={`w-full flex items-center px-4 py-3 rounded-lg transition-all group text-left ${\r\n                      currentPage === item.id \r\n                        ? 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50' \r\n                        : 'text-gray-300 hover:text-cyan-400 hover:bg-cyan-500/10'\r\n                    }`}\r\n                  >\r\n                    <span className=\"font-medium\">{item.label}</span>\r\n                  </button>\r\n                ))}\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Header\r\n","import { useResponsiveLayout } from '../../hooks'\r\nimport { useSidebar } from '../../context'\r\n\r\nconst Sidebar = () => {\r\n  const { isMobile, isTablet } = useResponsiveLayout()\r\n  const { sidebarOpen, setSidebarOpen } = useSidebar()\r\n  \r\n  const menuItems = [\r\n    { id: 'home', label: 'Inicio' },\r\n    { id: 'about', label: 'Acerca' },\r\n    { id: 'contact', label: 'Contacto' },\r\n  ]\r\n  \r\n  return (\r\n    <>\r\n      {isMobile && (\r\n        <button\r\n          onClick={() => setSidebarOpen(true)}\r\n          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\"\r\n        >\r\n          <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n          </svg>\r\n        </button>\r\n      )}\r\n\r\n      <aside className={`bg-gray-900 border-r border-gray-800 ${isMobile ? 'hidden' : 'w-64 flex-shrink-0'} ${isTablet ? 'w-56' : 'w-64'}`}>\r\n        <div className=\"p-6 flex flex-col h-full\">\r\n          <div className=\"flex items-center space-x-3 mb-8\">\r\n            <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n              <span className=\"text-white font-bold text-sm\">LO</span>\r\n            </div>\r\n            <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n          </div>\r\n          \r\n          <nav className=\"space-y-2\">\r\n            {menuItems.map((item) => (\r\n              <button\r\n                key={item.id}\r\n                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\"\r\n              >\r\n                <span className=\"font-medium\">{item.label}</span>\r\n              </button>\r\n            ))}\r\n          </nav>\r\n        </div>\r\n      </aside>\r\n\r\n      {isMobile && sidebarOpen && (\r\n        <div className=\"fixed inset-0 z-40 bg-black/50\" onClick={() => setSidebarOpen(false)}>\r\n          <div className=\"fixed top-0 left-0 w-64 h-full bg-gray-900 border-r border-gray-800\">\r\n            <div className=\"p-6 flex flex-col h-full pt-20\">\r\n              <div className=\"flex items-center space-x-3 mb-8\">\r\n                <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n                  <span className=\"text-white font-bold text-sm\">LO</span>\r\n                </div>\r\n                <span className=\"text-white font-bold text-lg\">Tu Aplicación</span>\r\n              </div>\r\n              \r\n              <nav className=\"space-y-2\">\r\n                {menuItems.map((item) => (\r\n                  <button\r\n                    key={item.id}\r\n                    onClick={() => setSidebarOpen(false)}\r\n                    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\"\r\n                  >\r\n                    <span className=\"font-medium\">{item.label}</span>\r\n                  </button>\r\n                ))}\r\n              </nav>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </>\r\n  )\r\n}\r\n\r\nexport default Sidebar\r\n","const Footer = () => {\r\n  return (\r\n    <footer className=\"bg-gray-900 border-t border-gray-800\">\r\n      <div className=\"px-4 py-6\">\r\n        <div className=\"max-w-7xl mx-auto text-center\">\r\n          <p className=\"text-gray-400 text-sm\">\r\n            © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </footer>\r\n  )\r\n}\r\n\r\nexport default Footer\r\n","import { useResponsiveLayout } from '../../hooks'\r\n\r\nconst Navigation = () => {\r\n  const { isMobile } = useResponsiveLayout()\r\n  \r\n  return (\r\n    <nav className=\"sticky top-0 z-50 bg-gray-900 border-b border-gray-800\">\r\n      <div className=\"px-4 py-4\">\r\n        <div className=\"flex items-center justify-between\">\r\n          <div className=\"flex items-center space-x-3\">\r\n            <div className=\"w-8 h-8 bg-gray-700 rounded-lg flex items-center justify-center\">\r\n              <span className=\"text-white font-bold text-sm\">LO</span>\r\n            </div>\r\n            <h1 className=\"text-white font-semibold text-lg\">Tu Aplicación</h1>\r\n          </div>\r\n          \r\n          {isMobile && (\r\n            <button className=\"p-2 text-gray-400 hover:text-white\">\r\n              <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 6h16M4 12h16M4 18h16\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </nav>\r\n  )\r\n}\r\n\r\nexport default Navigation\r\n","import React from 'react'\r\nimport { Navigation, Footer } from '../components/layout'\r\n\r\ninterface DefaultLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst DefaultLayout: React.FC<DefaultLayoutProps> = ({ children }) => {\r\n  return (\r\n    <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n      {/* Navigation fijo arriba */}\r\n      <Navigation />\r\n      \r\n      {/* Main content */}\r\n      <main className=\"flex-1\">\r\n        {children}\r\n      </main>\r\n      \r\n      {/* Footer fijo abajo */}\r\n      <Footer />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default DefaultLayout\r\n","import React from 'react'\r\nimport { Sidebar } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface SidebarLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst SidebarLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  return (\r\n    <div className=\"min-h-screen bg-gray-50 flex\">\r\n      {/* Sidebar */}\r\n      <Sidebar />\r\n      \r\n      {/* Main content */}\r\n      <main className=\"flex-1 overflow-auto\">\r\n        {children}\r\n      </main>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst SidebarLayout: React.FC<SidebarLayoutProps> = ({ children }) => {\r\n  return (\r\n    <SidebarProvider>\r\n      <SidebarLayoutContent>{children}</SidebarLayoutContent>\r\n    </SidebarProvider>\r\n  )\r\n}\r\n\r\nexport default SidebarLayout\r\n","import React from 'react'\r\nimport { Sidebar, Footer } from '../components/layout'\r\nimport { SidebarProvider } from '../context'\r\n\r\ninterface DashboardLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst DashboardLayoutContent: React.FC<{ children: React.ReactNode }> = ({ children }) => {\r\n  return (\r\n    <div className=\"min-h-screen bg-gray-50 flex flex-col\">\r\n      {/* Content area con sidebar */}\r\n      <div className=\"flex flex-1\">\r\n        {/* Sidebar */}\r\n        <Sidebar />\r\n        \r\n        {/* Main content */}\r\n        <main className=\"flex-1 overflow-auto flex flex-col\">\r\n          <div className=\"flex-1\">\r\n            {children}\r\n          </div>\r\n          \r\n          {/* Footer */}\r\n          <Footer />\r\n        </main>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nconst DashboardLayout: React.FC<DashboardLayoutProps> = ({ children }) => {\r\n  return (\r\n    <SidebarProvider>\r\n      <DashboardLayoutContent>{children}</DashboardLayoutContent>\r\n    </SidebarProvider>\r\n  )\r\n}\r\n\r\nexport default DashboardLayout\r\n","import React from 'react'\r\n\r\ninterface MinimalLayoutProps {\r\n  children: React.ReactNode\r\n}\r\n\r\nconst MinimalLayout: React.FC<MinimalLayoutProps> = ({ children }) => {\r\n  return (\r\n    <div className=\"min-h-screen bg-gray-50\">\r\n      <main>\r\n        {children}\r\n      </main>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default MinimalLayout\r\n","import { useLayout } from '../hooks'\r\nimport { LAYOUT_CONFIG } from '../config/layout'\r\n\r\ninterface LayoutSwitcherProps {\r\n  compact?: boolean\r\n}\r\n\r\nconst LayoutSwitcher = ({ compact = false }: LayoutSwitcherProps) => {\r\n  const { current, setLayout, config } = useLayout()\r\n  \r\n  if (compact) {\r\n    return (\r\n      <div className=\"bg-black/50 rounded-lg p-3 border border-gray-700\">\r\n        <div className=\"text-xs text-gray-500 mb-2\">Layout:</div>\r\n        <select\r\n          value={current}\r\n          onChange={(e) => setLayout(e.target.value)}\r\n          className=\"w-full bg-gray-800 text-white text-sm p-2 rounded border border-gray-600 focus:ring-1 focus:ring-cyan-500 focus:border-transparent\"\r\n        >\r\n          {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n            <option key={key} value={key}>\r\n              {layoutConfig.name}\r\n            </option>\r\n          ))}\r\n        </select>\r\n      </div>\r\n    )\r\n  }\r\n  \r\n  return (\r\n    <div className=\"bg-black/50 backdrop-blur-sm rounded-lg p-4 border border-cyan-500/30\">\r\n      <h3 className=\"text-white font-semibold mb-3\">Cambiar Layout</h3>\r\n      \r\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3\">\r\n        {Object.entries(LAYOUT_CONFIG).map(([key, layoutConfig]) => (\r\n          <button\r\n            key={key}\r\n            onClick={() => setLayout(key)}\r\n            className={`\r\n              p-4 rounded-lg border transition-all text-left\r\n              ${current === key \r\n                ? 'border-cyan-500 bg-cyan-500/10 text-cyan-400' \r\n                : 'border-gray-700 bg-black/30 text-gray-300 hover:border-gray-600'\r\n              }\r\n            `}\r\n          >\r\n            <div className=\"font-semibold mb-1\">{layoutConfig.name}</div>\r\n            <div className=\"text-xs opacity-75\">{layoutConfig.description}</div>\r\n          </button>\r\n        ))}\r\n      </div>\r\n      \r\n      <div className=\"mt-4 p-3 bg-gray-900/50 rounded-lg\">\r\n        <div className=\"text-xs text-gray-500 mb-1\">Layout Actual:</div>\r\n        <div className=\"text-sm text-cyan-400 font-medium\">{config.name}</div>\r\n        <div className=\"text-xs text-gray-400\">{config.description}</div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default LayoutSwitcher\r\n"],"names":["ResponsiveProvider","children","_debug","DEFAULT_BREAKPOINTS","getCurrentBreakpoint","width","getBreakpointIndex","breakpoint","getBreakpointValue","debounce","func","wait","timeout","args","getOrientation","height","useResponsive","dimensions","setDimensions","useState","updateDimensions","useCallback","debouncedUpdateDimensions","useMemo","useEffect","orientation","isXs","isSm","isMd","isLg","isXl","is2Xl","is3Xl","is4Xl","is5Xl","isMobile","isTablet","isDesktop","isSmall","isLarge","isUltraWide","is4K","is5K","isPortrait","isLandscape","isBreakpointUp","bp","isBreakpointDown","isBreakpointBetween","min","max","current","isWidthUp","minWidth","isWidthDown","maxWidth","isWidthBetween","isHeightUp","minHeight","isHeightDown","maxHeight","isHeightBetween","ResponsiveLayoutContext","createContext","useResponsiveLayoutContext","context","useContext","SidebarContext","SidebarProvider","sidebarOpen","setSidebarOpen","jsx","useSidebar","NavigationContext","useNavigation","NavigationProvider","defaultPage","currentPage","setCurrentPage","useResponsiveLayout","breakpoints","classes","cols","useLayout","responsiveLayout","LAYOUT_CONFIG","DEFAULT_LAYOUT","AVAILABLE_LAYOUTS","ResponsiveLayoutProviderInner","defaultLayout","useResponsiveHook","internalResponsive","responsive","currentLayout","setCurrentLayout","layoutConfig","contextValue","baseClass","ResponsiveLayoutProvider","MainLayout","layoutProp","layout","LayoutComponent","DefaultLayout","SidebarLayout","DashboardLayout","MinimalLayout","Header","menuItems","jsxs","page","item","Sidebar","Fragment","Footer","Navigation","SidebarLayoutContent","DashboardLayoutContent","LayoutSwitcher","compact","setLayout","config","e","key"],"mappings":"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"}

package/package.json

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

package/scripts/postinstall.js

@@ -31,13 +31,10 @@ 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)) {
-  console.log('⚠️  responsive-system: No se encontró package.json, saltando postinstall')
+  console.log('⚠️  No se encontró package.json, saltando configuración')
   process.exit(0)
 }
 
@@ -45,7 +42,7 @@ let packageJson
 try {
   packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
 } catch (error) {
-  console.error('❌ responsive-system: Error al leer package.json:', error.message)
+  console.error('❌ Error al leer package.json:', error.message)
   process.exit(1)
 }
 
@@ -66,7 +63,6 @@ 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'
@@ -172,21 +168,21 @@ function generateLayoutComponents(selectedLayout) {
     return
   }
   
-  console.log(`   📦 Generando componentes genéricos para layout "${selectedLayout}":`)
+  console.log(`   📦 Generando componentes para layout "${selectedLayout}":`)
   
   // Generar Navigation genérico
   if (components.includes('Navigation')) {
     const navigationContent = `import { useResponsiveLayout } from 'responsive-system'
 
 const Navigation = () => {
-  const { isMobile, breakpoint } = useResponsiveLayout()
+  const { isMobile } = 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">
+            <div className="w-8 h-8 bg-gray-700 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>
@@ -208,50 +204,19 @@ const Navigation = () => {
 export default Navigation
 `
     fs.writeFileSync(path.join(componentsDir, 'Navigation.tsx'), navigationContent)
-    console.log('      ✅ Navigation.tsx (genérico)')
+    console.log('      ✅ Navigation.tsx')
   }
   
   // Generar Footer genérico
   if (components.includes('Footer')) {
-    const footerContent = `import { useResponsiveLayout } from 'responsive-system'
-
-const Footer = () => {
-  const { breakpoint } = useResponsiveLayout()
-  
+    const footerContent = `const Footer = () => {
   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 className="max-w-7xl mx-auto text-center">
+          <p className="text-gray-400 text-sm">
+            © {new Date().getFullYear()} Tu Aplicación. Todos los derechos reservados.
+          </p>
         </div>
       </div>
     </footer>
@@ -261,7 +226,7 @@ const Footer = () => {
 export default Footer
 `
     fs.writeFileSync(path.join(componentsDir, 'Footer.tsx'), footerContent)
-    console.log('      ✅ Footer.tsx (genérico)')
+    console.log('      ✅ Footer.tsx')
   }
   
   // Generar Sidebar genérico
@@ -297,7 +262,7 @@ const Sidebar = () => {
       <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">
+            <div className="w-8 h-8 bg-gray-700 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>
@@ -322,7 +287,7 @@ const Sidebar = () => {
           <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">
+                <div className="w-8 h-8 bg-gray-700 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>
@@ -350,7 +315,7 @@ const Sidebar = () => {
 export default Sidebar
 `
     fs.writeFileSync(path.join(componentsDir, 'Sidebar.tsx'), sidebarContent)
-    console.log('      ✅ Sidebar.tsx (genérico)')
+    console.log('      ✅ Sidebar.tsx')
   }
   
   // Crear index.ts para exportar los componentes
@@ -361,7 +326,7 @@ export default Sidebar
 
 // Función para copiar el hook useResponsive y sus dependencias
 function copyUseResponsiveHook() {
-  console.log('   📦 Copiando hook useResponsive y dependencias...')
+  console.log('   📦 Copiando hook useResponsive...')
   
   // Crear directorio hooks
   const hooksDir = path.join(projectRoot, 'src', 'hooks')
@@ -398,8 +363,7 @@ export { DEFAULT_BREAKPOINTS, getCurrentBreakpoint, getBreakpointIndex, getBreak
   console.log('      ✅ hooks/index.ts')
 }
 
-// ESTRATEGIA: Modificar directamente el package.json primero, luego instalar
-console.log('📦 responsive-system: Verificando dependencias...')
+console.log('📦 Verificando dependencias...')
 
 // Agregar React a dependencies SOLO si NO está en package.json
 if (!hasReactInPackageJson) {
@@ -411,7 +375,7 @@ if (!hasReactInPackageJson) {
   packageJson.dependencies['react-dom'] = '^19.1.1'
   needsUpdate = true
 } else {
-  console.log('   ✅ React ya está en package.json, no se modificará')
+  console.log('   ✅ React ya está instalado')
 }
 
 // Agregar Vite si el proyecto está vacío
@@ -459,31 +423,31 @@ if (!packageJson.type) {
 // Escribir package.json modificado
 if (needsUpdate) {
   console.log('')
-  console.log('📝 responsive-system: Actualizando package.json...')
+  console.log('📝 Actualizando package.json...')
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2))
-  console.log('✅ responsive-system: package.json actualizado')
+  console.log('✅ package.json actualizado')
   console.log('')
   
   // Ahora instalar las dependencias
-  console.log('📦 responsive-system: Instalando dependencias...')
+  console.log('📦 Instalando dependencias...')
   try {
     execSync('npm install', {
       stdio: 'inherit',
       cwd: projectRoot
     })
-    console.log('✅ responsive-system: Dependencias instaladas correctamente')
+    console.log('✅ Dependencias instaladas correctamente')
   } catch (error) {
-    console.error('❌ responsive-system: Error al instalar dependencias:', error.message)
-    console.log('⚠️  responsive-system: Las dependencias están en package.json, ejecuta "npm install" manualmente')
+    console.error('❌ Error al instalar dependencias:', error.message)
+    console.log('⚠️  Las dependencias están en package.json, ejecuta "npm install" manualmente')
   }
 } else {
-  console.log('✅ responsive-system: Todas las dependencias ya están en package.json')
+  console.log('✅ Todas las dependencias ya están instaladas')
 }
 
 // Si el proyecto está vacío, crear estructura base
 if (isProjectEmpty) {
   console.log('')
-  console.log('📦 responsive-system: Proyecto vacío detectado, creando estructura base...')
+  console.log('📦 Proyecto vacío detectado, creando estructura base...')
   console.log('')
   
   // Preguntar qué layout quiere
@@ -800,28 +764,23 @@ export default App
   console.log('   ✅ Actualizado: package.json con scripts')
   
   console.log('')
-  console.log('🎉 responsive-system: Proyecto inicializado correctamente!')
+  console.log('🎉 Proyecto inicializado correctamente!')
   console.log('')
   console.log('Para empezar:')
   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('   - Componentes en src/components/layout/')
+  console.log('   - Hook useResponsive en src/hooks/useResponsive.ts')
   console.log('   - Página de ejemplo en src/pages/HomePage.tsx')
   console.log('')
-  console.log('💡 Para cambiar el layout después, ejecuta: npx responsive-system-setup')
+  console.log('💡 Para cambiar el layout: npx responsive-system-setup')
   console.log('')
 } else {
-  console.log('✅ responsive-system: Proyecto ya inicializado')
+  console.log('✅ 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('✅ Configuración completada')
 console.log('')