gtk3-node 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# CHANGELOG - Extensión GTK3 para Node.js
+
+## [Versión 1.0.0] - 2026-02-14
+
+### Añadido
+- Implementación inicial de la extensión GTK3 para Node.js
+- Soporte para creación de interfaces gráficas con GTK3
+- Widget Button con soporte para eventos y callbacks
+- Widget Window para contenedores de interfaz
+- Widget Label para mostrar texto estático
+- Widget Box para layouts horizontales y verticales
+- Widget Scroll para contenedores con barras de desplazamiento
+- Estructura modular para futuras expansiones
+- Ejemplos organizados por niveles de complejidad
+- Principio DRY aplicado en la arquitectura
+
+### Características
+- Integración nativa con GTK3
+- Sistema de eventos con callbacks
+- Soporte para interfaces gráficas completas
+- Estructura modular y extensible
+
+### Documentación
+- README principal
+- Documentación para cada widget
+- Ejemplos básicos, intermedios y avanzados
+- Guía de compilación (HOWTO-COMPILE.md)
+
+### Notas Técnicas
+- Basado en N-API para compatibilidad con múltiples versiones de Node.js
+- Compilación con node-gyp
+- Integración con GTK3 3.x
+- Soporte para Linux (actualmente)

package/CHECKLIST.md

@@ -0,0 +1,76 @@
+# Checklist de Widgets Implementados
+
+## Widgets Implementados
+
+### ✅ Button
+- [x] Creación de botones con texto
+- [x] Soporte para eventos de clic
+- [x] Cambio de texto dinámico
+- [x] Callbacks funcionales
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+### ✅ Window  
+- [x] Creación de ventanas
+- [x] Configuración de tamaño y título
+- [x] Soporte para agregar widgets
+- [x] Mostrar interfaz
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+### ✅ Label
+- [x] Creación de etiquetas de texto
+- [x] Lectura de texto
+- [x] Escritura de texto
+- [ ] Cambio de texto dinámico (parcialmente funcional)
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+### ✅ Box
+- [x] Creación de contenedores horizontales
+- [x] Creación de contenedores verticales
+- [x] Soporte para agregar widgets
+- [x] Jerarquía de layouts
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+### ✅ Scroll
+- [x] Creación de contenedores con scroll
+- [x] Soporte para contenido desbordante
+- [x] Barras de desplazamiento automáticas
+- [x] Soporte para agregar widgets
+- [x] Documentación completa
+- [x] Ejemplos funcionales
+
+## Widgets Pendientes
+
+### ❌ Entry
+- [ ] Campo de texto para entrada simple
+
+### ❌ TextView
+- [ ] Área de texto multilinea
+
+### ❌ CheckButton
+- [ ] Casilla de verificación
+
+### ❌ RadioButton
+- [ ] Botón de selección única
+
+### ❌ ComboBox
+- [ ] Menú desplegable con opciones
+
+### ❌ ProgressBar
+- [ ] Indicador visual de progreso
+
+### ❌ TreeView
+- [ ] Vista de árbol jerárquico
+
+### ❌ StringGrid
+- [ ] Tabla de datos editable
+
+## Estado General
+
+- **Total Widgets Implementados:** 4/12
+- **Estado de la Extensión:** Funcional para casos básicos
+- **Compatibilidad:** GTK3, Linux
+- **Principio DRY:** Aplicado en toda la arquitectura

package/HOWTO-COMPILE.md

@@ -0,0 +1,72 @@
+# Cómo Compilar la Extensión GTK3 para Node.js
+
+Este documento explica cómo compilar la extensión GTK3 para Node.js desde el código fuente.
+
+## Requisitos Previos
+
+- Node.js (versión 12 o superior)
+- node-gyp
+- Compilador C++ compatible con C++17
+- GTK3 con bibliotecas de desarrollo
+- Python 2.7 o 3.x
+- make y gcc/g++
+
+## Instalación de Dependencias
+
+### En sistemas Ubuntu/Debian:
+```bash
+sudo apt install nodejs npm
+sudo apt install build-essential
+sudo apt install libgtk-3-dev
+```
+
+### En sistemas Fedora/RHEL:
+```bash
+sudo dnf install nodejs npm
+sudo dnf install gcc gcc-c++ make
+sudo dnf install gtk3-devel
+```
+
+## Proceso de Compilación
+
+1. **Instalar node-gyp globalmente:**
+   ```bash
+   npm install -g node-gyp
+   ```
+
+2. **Instalar dependencias locales:**
+   ```bash
+   cd gtk3-node-extension
+   npm install
+   ```
+
+3. **Compilar la extensión:**
+   ```bash
+   node-gyp configure build
+   ```
+
+4. **Opcional: Limpiar y compilar desde cero:**
+   ```bash
+   node-gyp clean configure build
+   ```
+
+## Solución de Problemas
+
+- Si obtienes errores de enlace, asegúrate de tener instaladas las bibliotecas de desarrollo GTK3
+- Si tienes problemas con python, asegúrate de tener python 2.7 o 3.x instalado
+- Verifica que tu versión de Node.js sea compatible con node-gyp
+
+## Directorios Relevantes
+
+- `src/` - Código fuente principal de la extensión
+- `widgets/` - Implementaciones de widgets individuales
+- `build/` - Directorio de salida de la compilación
+- `binding.gyp` - Archivo de configuración de compilación
+
+## Verificación Post-Compilación
+
+Después de compilar, puedes verificar que todo funcione:
+
+```bash
+node -e "const { Button, Window } = require('./index.js'); console.log('Extensión cargada correctamente');"
+```

package/README.md

@@ -0,0 +1,142 @@
+# GTK3 Extension for Node.js
+
+This native extension enables creating graphical user interfaces using GTK3 from Node.js applications. It provides an abstraction layer over GTK3 that facilitates the creation of windows, buttons, and other widgets, as well as event management.
+
+## Requirements
+
+- Node.js 12 or higher
+- GTK3 with development libraries installed
+- node-gyp for compilation
+- Linux operating system (currently supported)
+
+## Installation
+
+Before installing this extension, make sure you have the GTK3 development libraries installed:
+
+```bash
+# On Ubuntu/Debian systems
+sudo apt install libgtk-3-dev
+
+# On Fedora/RHEL systems
+sudo dnf install gtk3-devel
+
+# On Arch Linux systems
+sudo pacman -S gtk3
+```
+
+Then, install the extension:
+
+```bash
+npm install ./path/to/gtk3-node-extension
+```
+
+## Basic Usage
+
+### Creating a window with a button
+
+```javascript
+const { Button, Window, init } = require('gtk3-node');
+
+// Initialize GTK
+init();
+
+// Create a window
+const window = new Window('My Application', 400, 300);
+
+// Create a button
+const button = new Button('Click here');
+
+// Add an event handler to the button
+button.onClick(() => {
+  console.log('Button pressed!');
+  button.label = 'Thanks for clicking!';
+});
+
+// Add the button to the window
+window.add(button);
+
+// Show the window and all its contents
+window.show();
+
+// Start the GTK event loop
+Window.run();
+```
+
+## API
+
+### Available Classes
+
+#### Window
+Represents a GTK3 window.
+
+##### Constructor
+- `new Window(title, width, height)` - Creates a new window with the specified title and dimensions.
+
+##### Methods
+- `add(widget)` - Adds a widget to the window.
+- `show()` - Shows the window and all its contents.
+
+##### Static Methods
+- `Window.run()` - Starts the GTK event loop.
+- `Window.quit()` - Exits the GTK event loop.
+
+#### Button
+Represents a GTK3 button.
+
+##### Constructor
+- `new Button(label)` - Creates a new button with the specified label.
+
+##### Properties
+- `label` - The button's label (getter/setter).
+
+##### Methods
+- `onClick(callback)` - Registers a function to be executed when the button is clicked.
+
+#### Label
+Represents a GTK3 label for displaying static text.
+
+##### Constructor
+- `new Label(text)` - Creates a new label with the specified text.
+
+##### Properties
+- `text` - The text displayed by the label (getter/setter).
+
+#### Box
+Represents a GTK3 container for organizing widgets in linear layouts.
+
+##### Constructor
+- `new Box(orientation)` - Creates a new container with the specified orientation ('horizontal' or 'vertical').
+
+##### Methods
+- `add(widget)` - Adds a widget to the container.
+
+#### Scroll
+Represents a GTK3 container with scrollbars for managing content that exceeds the visible area.
+
+##### Constructor
+- `new Scroll()` - Creates a new scrollable container.
+
+##### Methods
+- `add(widget)` - Adds a widget to the scrollable container.
+
+## Compilation
+
+If you want to compile the extension yourself:
+
+```bash
+cd gtk3-node-extension
+npm install
+node-gyp configure
+node-gyp build
+```
+
+## Features
+
+- Creation of GTK3 widgets from JavaScript
+- Event system with callbacks
+- Native integration with GTK event loop
+- DRY principle applied in architecture
+
+## License
+
+MIT

package/README_es.md

@@ -0,0 +1,115 @@
+# Extensión GTK3 para Node.js
+
+Esta extensión nativa permite crear interfaces gráficas utilizando GTK3 desde aplicaciones Node.js. Proporciona una capa de abstracción sobre GTK3 que facilita la creación de ventanas, botones y otros widgets, así como la gestión de eventos.
+
+## Requisitos
+
+- Node.js 12 o superior
+- GTK3 con bibliotecas de desarrollo instaladas
+- node-gyp para la compilación
+- Sistema operativo Linux (actualmente soportado)
+
+## Instalación
+
+Antes de instalar esta extensión, asegúrate de tener instaladas las bibliotecas de desarrollo de GTK3:
+
+```bash
+# En sistemas Ubuntu/Debian
+sudo apt install libgtk-3-dev
+
+# En sistemas Fedora/RHEL
+sudo dnf install gtk3-devel
+
+# En sistemas Arch Linux
+sudo pacman -S gtk3
+```
+
+Luego, instala la extensión:
+
+```bash
+npm install ./ruta/a/gtk3-node-extension
+```
+
+## Uso básico
+
+### Crear una ventana con un botón
+
+```javascript
+const { Button, Window, init } = require('gtk3-node');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Mi Aplicación', 400, 300);
+
+// Crear un botón
+const boton = new Button('Haz clic aquí');
+
+// Agregar un manejador de eventos al botón
+boton.onClick(() => {
+  console.log('¡Botón presionado!');
+  boton.label = '¡Gracias por hacer clic!';
+});
+
+// Agregar el botón a la ventana
+ventana.add(boton);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+// Iniciar el loop de eventos de GTK
+Window.run();
+```
+
+## API
+
+### Clases disponibles
+
+#### Window
+Representa una ventana GTK3.
+
+##### Constructor
+- `new Window(título, ancho, alto)` - Crea una nueva ventana con el título y dimensiones especificadas.
+
+##### Métodos
+- `add(widget)` - Agrega un widget a la ventana.
+- `show()` - Muestra la ventana y todos sus contenidos.
+
+##### Métodos estáticos
+- `Window.run()` - Inicia el bucle de eventos de GTK.
+- `Window.quit()` - Sale del bucle de eventos de GTK.
+
+#### Button
+Representa un botón GTK3.
+
+##### Constructor
+- `new Button(etiqueta)` - Crea un nuevo botón con la etiqueta especificada.
+
+##### Propiedades
+- `label` - La etiqueta del botón (getter/setter).
+
+##### Métodos
+- `onClick(callback)` - Registra una función que se ejecutará cuando se haga clic en el botón.
+
+## Compilación
+
+Si deseas compilar la extensión tú mismo:
+
+```bash
+cd gtk3-node-extension
+npm install
+node-gyp configure
+node-gyp build
+```
+
+## Características
+
+- Creación de widgets GTK3 desde JavaScript
+- Sistema de eventos con callbacks
+- Integración nativa con el bucle de eventos de GTK
+- Principio DRY aplicado en la arquitectura
+
+## Licencia
+
+MIT

package/REFUERZO.md

@@ -0,0 +1,103 @@
+# Áreas de Refuerzo para el Roadmap
+
+## 1. Dependencias Externas
+
+### Widgets con Dependencias Adicionales:
+- **WebView** (#30) - Requiere `webkit2gtk-4.0` y `libjavascriptcoregtk-4.0-dev`
+- **Image** (#19) - Depende de GDK-PixBuf (normalmente incluido con GTK3)
+- **Canvas** (#31) - Requiere Cairo (`libcairo2-dev`)
+- **ChartView** (#32) - Puede depender de librsvg o cairo para renderizado
+
+### Widgets Autocontenidos:
+- Todos los demás widgets utilizan solo GTK3 y sus componentes estándar
+
+## 2. Iteración Incremental
+
+### Milestone 1: Fundamentos Básicos
+- [x] Label
+- [x] Entry
+- [x] Box
+- [x] Grid
+
+### Milestone 2: Interacción Básica
+- [ ] CheckButton
+- [ ] RadioButton
+- [ ] ComboBox
+- [ ] ProgressBar
+
+### Milestone 3: Contenedores
+- [ ] Frame
+- [ ] ScrolledWindow
+- [ ] Notebook
+- [ ] ListBox
+
+### Milestone 4: Componentes de Datos
+- [ ] StringGrid
+- [ ] TreeView
+
+### Milestone 5: Controles Avanzados
+- [ ] ToggleButton
+- [ ] Scale/Slider
+- [ ] Spinner
+- [ ] TextView
+
+## 3. Ejemplos de Uso
+
+### Ejemplo para Milestone 1 (Fundamentos):
+```javascript
+const { Window, Label, Entry, Box, init, run } = require('./index.js');
+
+init();
+const window = new Window('Fundamentos', 400, 200);
+
+const layout = new Box('vertical');
+const label = new Label('Nombre:');
+const entry = new Entry();
+
+layout.add(label);
+layout.add(entry);
+window.add(layout);
+window.show();
+run();
+```
+
+### Ejemplo para Milestone 2 (Interacción):
+```javascript
+const { CheckButton, ComboBox, ProgressBar } = require('./index.js');
+
+const checkbox = new CheckButton('Aceptar términos');
+const combo = new ComboBox(['Opción 1', 'Opción 2', 'Opción 3']);
+const progress = new ProgressBar();
+progress.value = 50; // 50%
+```
+
+### Ejemplo para Milestone 4 (Componentes de Datos):
+```javascript
+const { StringGrid, TreeView } = require('./index.js');
+
+const grid = new StringGrid(10, 5); // 10 filas, 5 columnas
+grid.setHeader(['Nombre', 'Edad', 'Ciudad', 'País', 'Activo']);
+
+const tree = new TreeView();
+tree.addColumn('Nombre');
+tree.addColumn('Valor');
+tree.addRow(['Raíz', '100']);
+tree.addRow(['Hijo', '50'], 'Raíz'); // Hijo de Raíz
+```
+
+## 4. Recomendaciones Adicionales
+
+### Estrategia de Implementación:
+1. Implementar primero los widgets más utilizados (Label, Entry, Button, Box)
+2. Asegurar la estabilidad de cada milestone antes de avanzar
+3. Documentar cada widget conforme se implementa
+4. Crear pruebas unitarias para cada componente
+5. Publicar versiones incrementales (v1.1, v1.2, etc.) con cada milestone
+
+### Consideraciones Técnicas:
+- Verificar compatibilidad con diferentes versiones de GTK3
+- Implementar manejo de errores robusto
+- Asegurar la liberación adecuada de memoria
+- Crear wrapper consistentes para todos los widgets
+
+Esto permitiría mostrar progreso continuo y permitiría a la comunidad seguir el desarrollo de manera transparente.

package/ROADMAP.md

@@ -0,0 +1,73 @@
+# Roadmap de Widgets para una GUI Toolkit Completa
+
+## Nivel 1: Fundamentos Básicos (Prioridad Alta)
+1. **Label** - Etiquetas de texto para mostrar información estática
+2. **Entry** - Campos de texto para entrada de datos simples
+3. **Box** - Contenedor lineal horizontal/vertical
+4. **Grid** - Contenedor de rejilla para posicionamiento preciso
+
+## Nivel 2: Interacción Básica (Prioridad Alta)
+5. **CheckButton** - Casillas de verificación
+6. **RadioButton** - Botones de selección única en grupo
+7. **ComboBox** - Menús desplegables con opciones
+8. **ProgressBar** - Indicador visual de progreso
+
+## Nivel 3: Contenedores Avanzados (Prioridad Media-Alta)
+9. **Frame** - Contenedor con borde y título
+10. **ScrolledWindow** - Contenedor con barras de desplazamiento
+11. **Notebook** - Pestañas para organizar contenido
+12. **ListBox** - Listas de elementos seleccionables
+
+## Nivel 4: Componentes de Datos Avanzados (Prioridad Media-Alta)
+13. **StringGrid** - Tabla de datos con filas y columnas editables
+14. **TreeView** - Árboles jerárquicos de datos
+
+## Nivel 5: Controles de Entrada (Prioridad Media)
+15. **ToggleButton** - Botones que mantienen estado activo/inactivo
+16. **Scale/Slider** - Control deslizante para valores numéricos
+17. **Spinner** - Selector numérico con flechas
+18. **TextView** - Área de texto multilinea para entradas más largas
+
+## Nivel 6: Componentes Visuales (Prioridad Media)
+19. **Image** - Visualización de imágenes
+20. **Separator** - Líneas divisorias para organizar la interfaz
+21. **Calendar** - Selector de fecha
+
+## Nivel 7: Componentes de Datos (Prioridad Media-Baja)
+22. **FileChooser** - Diálogos para seleccionar archivos/directorios
+23. **ColorChooser** - Selector de colores
+
+## Nivel 8: Diálogos y Mensajes (Prioridad Media-Baja)
+24. **MessageDialog** - Ventanas emergentes para mensajes
+25. **AlertDialog** - Diálogos de alerta y confirmación
+26. **InputDialog** - Diálogos para entrada de datos
+
+## Nivel 9: Componentes de Navegación (Prioridad Baja)
+27. **MenuBar** - Barras de menú
+28. **ToolBar** - Barras de herramientas
+29. **StatusBar** - Barra de estado inferior
+
+## Nivel 10: Componentes Especializados (Prioridad Baja)
+30. **WebView** - Visualizador de contenido web (si es posible con WebKitGTK)
+31. **Canvas** - Área para dibujo personalizado
+32. **ChartView** - Visualización de gráficos y datos
+
+## Nivel 11: Utilidades del Sistema (Prioridad Baja)
+33. **Clipboard** - Acceso al portapapeles del sistema
+34. **DragAndDrop** - Soporte para arrastrar y soltar
+
+## Nivel 12: Gestión de Eventos (Importante para todos los niveles)
+35. **EventSystem** - Sistema completo de eventos para todos los widgets
+36. **SignalHandler** - Manejo de señales GTK para eventos avanzados
+
+## Nivel 13: Personalización y Experiencia de Usuario (Prioridad Baja-Media)
+37. **CSS Styling** - Soporte para estilos CSS
+38. **ThemeManager** - Gestión de temas visuales
+39. **AnimationSupport** - Soporte para animaciones y transiciones
+
+## Nivel 14: Herramientas de Desarrollo (Prioridad Baja)
+40. **LayoutBuilder** - DSL para construcción de interfaces
+41. **ResourceLoader** - Carga de recursos (imágenes, estilos, etc.)
+
+## Nivel 15: Accesibilidad (Prioridad Media)
+42. **Accessibility** - Soporte para accesibilidad (ATK)

package/ejemplos/README.md

@@ -0,0 +1,21 @@
+# Ejemplos de la Extensión GTK3 para Node.js
+
+Este directorio contiene ejemplos organizados por niveles de complejidad para demostrar el uso de la extensión GTK3 para Node.js.
+
+## Organización
+
+- **basicos/** - Ejemplos simples con widgets fundamentales
+- **intermedios/** - Ejemplos con combinación de múltiples widgets
+- **avanzados/** - Ejemplos complejos con layouts jerárquicos
+
+## Cómo usar
+
+Para ejecutar un ejemplo, navega al directorio correspondiente y ejecuta:
+
+```bash
+node nombre_del_ejemplo.js
+```
+
+## Objetivo
+
+Estos ejemplos están diseñados para mostrar cómo construir interfaces gráficas paso a paso, desde lo más básico hasta configuraciones más complejas.

package/ejemplos/avanzados/README.md

@@ -0,0 +1,12 @@
+# Ejemplos Avanzados
+
+Este directorio contiene ejemplos complejos que demuestran el uso combinado de múltiples widgets y layouts avanzados de la extensión GTK3 para Node.js.
+
+## Contenido
+
+- `ejemplo_completo.js` - Ejemplo con botón y 35 labels organizadas en layouts horizontales y verticales
+- `ejemplo_scroll.js` - Ejemplo con Scroll, Labels y Buttons en la misma ventana
+
+## Objetivo
+
+Mostrar cómo crear interfaces gráficas complejas con múltiples widgets organizados en layouts jerárquicos.

package/ejemplos/avanzados/ejemplo_completo.js

@@ -0,0 +1,55 @@
+// ejemplo_completo.js - Ejemplo con botón y múltiples labels
+
+const { Button, Label, Box, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo Complejo', 800, 600);
+
+// Crear un botón con texto "Click Me" y tamaño adecuado
+const boton = new Button('Click Me');
+
+// Agregar un manejador de eventos al botón
+boton.onClick(() => {
+  console.log('¡Botón presionado!');
+  boton.label = '¡Gracias por clic!';
+});
+
+// Crear un layout principal vertical
+const layoutPrincipal = new Box('vertical');
+
+// Crear 3 grupos horizontales
+for (let grupo = 0; grupo < 3; grupo++) {
+  const layoutHorizontal = new Box('horizontal');
+  
+  // En cada grupo horizontal, crear 2 labels verticales
+  for (let vertical = 0; vertical < 2; vertical++) {
+    const labelText = `Grupo ${grupo + 1}, Label Vertical ${vertical + 1}`;
+    const label = new Label(labelText);
+    layoutHorizontal.add(label);
+  }
+  
+  layoutPrincipal.add(layoutHorizontal);
+}
+
+// Crear 35 labels adicionales
+for (let i = 0; i < 35; i++) {
+  const label = new Label(`Label adicional #${i + 1}`);
+  layoutPrincipal.add(label);
+}
+
+// Agregar el botón al final
+layoutPrincipal.add(boton);
+
+// Agregar el layout a la ventana
+ventana.add(layoutPrincipal);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz gráfica lista. Abriendo ventana con botón y múltiples labels...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/avanzados/ejemplo_scroll.js

@@ -0,0 +1,44 @@
+// ejemplo_scroll.js - Ejemplo con Label, Button y Scroll en la misma ventana
+
+const { Button, Label, Box, Scroll, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo con Scroll', 400, 300);
+
+// Crear un contenedor con scroll
+const scroll = new Scroll();
+
+// Crear un layout vertical para contenido largo
+const layout = new Box('vertical');
+
+// Crear varios labels y botones para demostrar el scroll
+for (let i = 0; i < 20; i++) {
+  const label = new Label(`Label #${i + 1} con texto largo que puede necesitar scroll`);
+  const boton = new Button(`Botón #${i + 1}`);
+  
+  // Agregar evento al botón
+  boton.onClick(() => {
+    console.log(`Botón #${i + 1} presionado`);
+    label.text = `¡Botón #${i + 1} fue presionado!`;
+  });
+  
+  layout.add(label);
+  layout.add(boton);
+}
+
+// Agregar el layout al contenedor con scroll
+scroll.add(layout);
+
+// Agregar el scroll a la ventana
+ventana.add(scroll);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz con Scroll, Labels y Botones lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/basicos/README.md

@@ -0,0 +1,11 @@
+# Ejemplos Básicos
+
+Este directorio contiene ejemplos simples que demuestran el uso básico de los widgets fundamentales de la extensión GTK3 para Node.js.
+
+## Contenido
+
+- `ejemplo_final.js` - Ejemplo básico con una ventana, botón y eventos de clic
+
+## Objetivo
+
+Mostrar cómo crear interfaces gráficas simples con los widgets más básicos de la extensión.

package/ejemplos/basicos/ejemplo_final.js

@@ -0,0 +1,31 @@
+// ejemplo_final.js - Ejemplo completo de interfaz gráfica GTK3
+
+const { Button, Window, init } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo Completo GTK3', 400, 300);
+
+// Crear un botón
+const boton = new Button('Haz clic aquí');
+
+// Agregar un manejador de eventos al botón
+boton.onClick(() => {
+  console.log('¡Botón presionado!');
+  boton.label = '¡Gracias por hacer clic!';
+});
+
+console.log('Texto inicial del botón:', boton.label);
+
+// Agregar el botón a la ventana
+ventana.add(boton);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz gráfica lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+Window.run();

package/ejemplos/intermedios/README.md

@@ -0,0 +1,12 @@
+# Ejemplos Intermedios
+
+Este directorio contiene ejemplos que muestran el uso combinado de múltiples widgets y funcionalidades básicas de la extensión GTK3 para Node.js.
+
+## Contenido
+
+- `ejemplo_label.js` - Ejemplo con widget Label y manipulación de texto
+- `ejemplo_label_boton.js` - Ejemplo con Label y Button en la misma ventana
+
+## Objetivo
+
+Mostrar cómo integrar diferentes tipos de widgets y cómo manipular sus propiedades desde JavaScript.

package/ejemplos/intermedios/ejemplo_label.js

@@ -0,0 +1,33 @@
+// ejemplo_label.js - Ejemplo de uso del widget Label
+
+const { Label, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo Label', 300, 200);
+
+// Crear un label
+const label = new Label('¡Hola Mundo desde Label!');
+
+// Mostrar el texto actual del label
+console.log('Texto del label:', label.text);
+
+// Cambiar el texto del label después de 2 segundos
+setTimeout(() => {
+  console.log('Cambiando texto del label...');
+  label.text = '¡Texto cambiado!';
+  console.log('Nuevo texto del label:', label.text);
+}, 2000);
+
+// Agregar el label a la ventana
+ventana.add(label);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Abriendo ventana con label...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/ejemplos/intermedios/ejemplo_label_boton.js

@@ -0,0 +1,41 @@
+// ejemplo_label_boton.js - Ejemplo con Label y Button en la misma ventana
+
+const { Button, Label, Box, Window, init, run } = require('../../index.js');
+
+// Inicializar GTK
+init();
+
+// Crear una ventana
+const ventana = new Window('Ejemplo Label y Botón', 400, 300);
+
+// Crear un layout vertical
+const layout = new Box('vertical');
+
+// Crear un label
+const label = new Label('Presiona el botón para cambiar este texto');
+
+// Crear un botón
+const boton = new Button('Cambiar Texto');
+
+// Agregar un manejador de eventos al botón
+let contador = 0;
+boton.onClick(() => {
+  contador++;
+  console.log(`Botón presionado ${contador} veces`);
+  label.text = `¡Texto cambiado ${contador} veces!`;
+});
+
+// Agregar el label y el botón al layout
+layout.add(label);
+layout.add(boton);
+
+// Agregar el layout a la ventana
+ventana.add(layout);
+
+// Mostrar la ventana y todos sus contenidos
+ventana.show();
+
+console.log('Interfaz con Label y Botón lista. Abriendo ventana...');
+
+// Iniciar el loop de eventos GTK para mostrar la interfaz
+run();

package/index.js

@@ -0,0 +1,110 @@
+const gtk3_native = require('./build/Release/gtk3_node.node');
+
+class Button {
+  constructor(label = "Botón") {
+    this.widget = gtk3_native.createButton(label);
+  }
+
+  onClick(callback) {
+    gtk3_native.connectClick(this.widget, callback);
+  }
+
+  set label(text) {
+    gtk3_native.setButtonText(this.widget, text);
+  }
+
+  get label() {
+    return gtk3_native.getButtonText(this.widget);
+  }
+}
+
+class Label {
+  constructor(text = "") {
+    this.widget = gtk3_native.createLabel(text);
+  }
+
+  set text(content) {
+    gtk3_native.setLabelText(this.widget, content);
+  }
+
+  get text() {
+    return gtk3_native.getLabelText(this.widget);
+  }
+
+  setText(content) {
+    this.text = content;
+  }
+
+  getText() {
+    return this.text;
+  }
+}
+
+class Box {
+  constructor(orientation = 'horizontal') {
+    this.widget = gtk3_native.createBox(orientation);
+  }
+
+  add(widget) {
+    if (widget && widget.widget) {
+      gtk3_native.addToBox(this.widget, widget.widget);
+    }
+    return this;
+  }
+}
+
+class Scroll {
+  constructor() {
+    this.widget = gtk3_native.createScroll();
+  }
+
+  add(widget) {
+    if (widget && widget.widget) {
+      gtk3_native.addToScroll(this.widget, widget.widget);
+    }
+    return this;
+  }
+}
+
+class Window {
+  constructor(title = "Ventana", width = 400, height = 300) {
+    this.widget = gtk3_native.createWindow(title, width, height);
+  }
+
+  add(widget) {
+    if (widget && widget.widget) {
+      gtk3_native.addToWindow(this.widget, widget.widget);
+    }
+    return this;
+  }
+
+  show() {
+    gtk3_native.showAll(this.widget);
+    return this;
+  }
+
+  static run() {
+    gtk3_native.run();
+  }
+
+  static quit() {
+    gtk3_native.quit();
+  }
+}
+
+// Exportar las funciones directamente
+module.exports = {
+  ...gtk3_native,
+  Button,
+  Label,
+  Box,
+  Scroll,
+  Window,
+  // Mantener compatibilidad hacia atrás
+  createWindow: gtk3_native.createWindow,
+  addToWindow: gtk3_native.addToWindow,
+  showAll: gtk3_native.showAll,
+  run: gtk3_native.run,
+  quit: gtk3_native.quit,
+  init: gtk3_native.init
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "gtk3-node",
+  "version": "1.0.0",
+  "description": "Native Node.js extension for creating GTK3 widgets",
+  "main": "index.js",
+  "scripts": {
+    "install": "node-gyp rebuild",
+    "test": "node test.js"
+  },
+  "keywords": [
+    "gtk",
+    "gui",
+    "native",
+    "v8",
+    "desktop",
+    "ui",
+    "user-interface",
+    "graphics",
+    "widgets",
+    "window-manager",
+    "cross-platform",
+    "linux",
+    "frontend",
+    "visual",
+    "application",
+    "framework",
+    "toolkit",
+    "interface",
+    "rendering",
+    "controls",
+    "components",
+    "event-driven",
+    "asynchronous",
+    "javascript",
+    "addon",
+    "bindings",
+    "ffi",
+    "system",
+    "native-modules",
+    "electron-alternative",
+    "desktop-apps",
+    "native-ui",
+    "gtk-widgets",
+    "gui-framework",
+    "visual-components",
+    "ui-controls",
+    "desktop-gui"
+  ],
+  "author": "Usuario",
+  "license": "MIT",
+  "dependencies": {
+    "node-addon-api": "^7.0.0"
+  },
+  "devDependencies": {
+    "node-gyp": "^10.3.1"
+  },
+  "binary": {
+    "napi_versions": [
+      3
+    ]
+  }
+}