x4js 2.0.30 → 2.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "x4js",
-    "version": "2.0.30",
+    "version": "2.0.32",
     "type": "module",
     "main": "src/x4.ts",
     "module": "src/x4.ts",
@@ -12,7 +12,6 @@
     	"build": "x4build --watch --hmr --serve",
     	"build-release": "x4build --release"
 	},
-
   	"repository": {
     	"type": "git",
  		"url": "git+https://github.com/rlibre/x4.git"

package/src/components/base.scss

@@ -17,9 +17,69 @@
 @use "./shared.scss";
 
 .x4box {
-	@extend .box;
+	@extend %box;
 }
 
 .x4flex {
-	@extend .flex;
+	@extend %flex;
 }
+
+@keyframes rotating {
+	from {
+	  transform: rotate(0deg);
+	}
+	to {
+	  transform: rotate(360deg);
+	}
+}
+
+@keyframes shaking {
+    0% {
+        transform: rotate(-15deg)
+    }
+
+    4% {
+        transform: rotate(15deg)
+    }
+
+    8%,24% {
+        transform: rotate(-18deg)
+    }
+
+    12%,28% {
+        transform: rotate(18deg)
+    }
+
+    16% {
+        transform: rotate(-22deg)
+    }
+
+    20% {
+        transform: rotate(22deg)
+    }
+
+    32% {
+        transform: rotate(-12deg)
+    }
+
+    36% {
+        transform: rotate(12deg)
+    }
+
+    40% {
+        transform: rotate(0deg)
+    }
+}
+
+
+.x4rotate {
+	animation: rotating 2s linear infinite;
+}
+
+.x4shake {
+	animation-name: shaking;
+    animation-duration: 5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-direction: reverse;
+}

package/src/components/boxes/boxes.module.scss

@@ -17,21 +17,21 @@
 @use "../shared.scss";
 
 .x4hbox {
-	@extend .hbox;
+	@extend %hbox;
 	&.align-start {
 		align-items: start;
 	}
 }
 
 .x4vbox {
-	@extend .vbox;
+	@extend %vbox;
 }
 
 .x4stackbox {
 	display: flex;
 	
 	&>* {
-		@extend .fit;
+		@extend %fit;
 		position: relative !important;
 	}
 

package/src/components/button/button.module.scss

@@ -51,7 +51,7 @@
 }
 
 .x4button {
-	@extend .hbox;
+	@extend %hbox;
 	
 	margin: 5px;
 	gap: 4px;

package/src/components/button/button.ts

@@ -14,11 +14,11 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component.ts"
-import { EventCallback } from '../../core/core_events.ts';
-import { class_ns, UnsafeHtml } from '../../core/core_tools.ts';
+import { Component, ComponentEvents, ComponentProps, EvClick } from "../../core/component"
+import { EventCallback } from '../../core/core_events';
+import { class_ns, UnsafeHtml } from '../../core/core_tools';
 
-import { Icon } from "../icon/icon.ts"
+import { Icon } from "../icon/icon"
 
 import "./button.module.scss";
 

package/src/components/calendar/calendar.module.scss

@@ -81,12 +81,12 @@
 	}
 
 	.week {
-		@extend .flex;
+		@extend %flex;
 		align-items: center;
 		padding: 2px;
 				
 		.cell {
-			@extend .flex;
+			@extend %flex;
 			min-width: 28px;
 			min-height: 28px;
 			
@@ -94,7 +94,7 @@
 			text-align: center;
 			
 			.text {
-				@extend .hbox;
+				@extend %hbox;
 
 				transition: background-color 0.3s, color 0.3s;
 				justify-content: center;

package/src/components/checkbox/checkbox.module.scss

@@ -27,7 +27,7 @@
 }
 
 .x4checkbox {
-	@extend .hbox;
+	@extend %hbox;
 	
 	display: flex;
 	flex-direction: row;

package/src/components/combobox/combobox.module.scss

@@ -31,8 +31,8 @@
 }
 
 .x4dropdownlist {
-	@extend .shadow-xl;
-	@extend .hbox;
+	@extend %shadow-xl;
+	@extend %hbox;
 
 	max-height: 250px;
 	max-width: 50vw;
@@ -42,7 +42,7 @@
 	border: 1px solid var( --dropdown-border );
 
 	.x4listbox {
-		@extend .flex;
+		@extend %flex;
 
 		border: none;
 		margin: 0;
@@ -65,7 +65,7 @@
 }
 
 .x4combobox {
-	@extend .hbox;
+	@extend %hbox;
 	margin: 5px;
 	gap: 6px;
 
@@ -88,14 +88,14 @@
 	}
 
 	&>#edit {
-		@extend .flex;
+		@extend %flex;
 		border-bottom: 1px solid var( --combobox-border );
 		&:focus-within {
 			border-bottom-color: var( --combobox-border-focus );
 		}
 		
 		.x4input {
-			@extend .flex;
+			@extend %flex;
 
 			&[readonly] {
 				cursor: pointer;

package/src/components/dialog/dialog.module.scss

@@ -22,7 +22,7 @@
 }
 
 .x4dialog {
-	@extend .shadow-xl, .vbox;
+	@extend %shadow-xl, .vbox;
 
 	position: absolute !important;
 	background-color: white;
@@ -33,7 +33,7 @@
 		background-color: var(--color-dialog-caption);
 	
 		& > #title {
-			@extend .flex;
+			@extend %flex;
 			color: var(--color-dialog-caption-text);
 			font-weight: bold;
 			font-size: 120%;

package/src/components/form/form.module.scss

@@ -21,8 +21,8 @@
 }
 
 .x4form {
-	@extend .vbox;
-	@extend .flex;
+	@extend %vbox;
+	@extend %flex;
 
 	padding: 16px;
 	background-color: var( --color-form );

package/src/components/icon/icon.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 .x4icon {
-	@extend .hbox;	
+	@extend %hbox;	
 
 	flex-shrink: 0;
 	min-width: 10px;

package/src/components/label/label.module.scss

@@ -24,7 +24,7 @@
 }
 
 .x4label {
-	@extend .hbox;
+	@extend %hbox;
 
 	color: var( --label-color );
 	background-color: var( --label-background );
@@ -72,7 +72,7 @@
 	}
 
 	&.vertical {
-		@extend .vbox;
+		@extend %vbox;
 	}
 }
 

package/src/components/listbox/listbox.module.scss

@@ -33,7 +33,7 @@
 }
 
 .x4listbox {
-	@extend .vbox;
+	@extend %vbox;
 
 	margin: 5px;
 	border: 1px solid var( --listbox-border );
@@ -66,7 +66,7 @@
 		}
 
 		.x4item {
-			@extend .flex;
+			@extend %flex;
 			
 			padding: 4px;
 			background-color: transparent;

package/src/components/menu/menu.module.scss

@@ -28,7 +28,7 @@
 }
 
 .x4menu {
-	@extend .shadow-xxl;
+	@extend %shadow-xxl;
 
 	position: absolute;
 	overflow-y: auto;
@@ -44,7 +44,7 @@
 	max-height: calc( 100vh - 32px );
 	
 	.x4cmenuitem {
-		@extend .hbox;
+		@extend %hbox;
 
 		transition: background-color 0.3s, color 0.3s;
 
@@ -82,7 +82,7 @@
 		}
 
 		#text {
-			@extend .flex;
+			@extend %flex;
 		}
 
 		&.title {

package/src/components/notification/notification.module.scss

@@ -26,7 +26,7 @@
 }
 
 .x4notification {
-	@extend .shadow-xl;
+	@extend %shadow-xl;
 
 	padding: 8px;
 	border: 1px solid var(--notification-border);

package/src/components/panel/panel.module.scss

@@ -40,7 +40,12 @@
 	}
 
 	& > .body {
-		@extend .rel-fit;
+		position: relative;
+		left: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		
 		overflow: hidden;
 		justify-content: start;
 		padding: 8px;

package/src/components/shared.scss

@@ -14,25 +14,25 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-.box {
+%box {
 	position: relative;
 }
 
-.hbox {
-	@extend .box;
+%hbox {
+	@extend %box;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 }
 
-.vbox {
-	@extend .box;
+%vbox {
+	@extend %box;
 	display: flex;
 	flex-direction: column;
 }
 
 
-.fit {
+%fit {
 	position: absolute;
 	left: 0;
 	top: 0;
@@ -40,16 +40,7 @@
 	bottom: 0;
 }
 
-
-.rel-fit {
-	position: relative;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-}
-
-.flex {
+%flex {
 	flex-grow: 1;
 	flex-shrink: 0;
 	flex-basis: 0;
@@ -59,83 +50,22 @@
 
 // from tailwind
 
-.shadow-sm {
+%shadow-sm {
 	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-.shadow-md {
+%shadow-md {
 	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
-.shadow-lg {
+%shadow-lg {
 	box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 
-.shadow-xl {
+%shadow-xl {
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }
 
-.shadow-xxl {
+%shadow-xxl {
 	box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
 }
-
-
-@keyframes rotating {
-	from {
-	  transform: rotate(0deg);
-	}
-	to {
-	  transform: rotate(360deg);
-	}
-}
-
-@keyframes shaking {
-    0% {
-        transform: rotate(-15deg)
-    }
-
-    4% {
-        transform: rotate(15deg)
-    }
-
-    8%,24% {
-        transform: rotate(-18deg)
-    }
-
-    12%,28% {
-        transform: rotate(18deg)
-    }
-
-    16% {
-        transform: rotate(-22deg)
-    }
-
-    20% {
-        transform: rotate(22deg)
-    }
-
-    32% {
-        transform: rotate(-12deg)
-    }
-
-    36% {
-        transform: rotate(12deg)
-    }
-
-    40% {
-        transform: rotate(0deg)
-    }
-}
-
-
-.x4rotate {
-	animation: rotating 2s linear infinite;
-}
-
-.x4shake {
-	animation-name: shaking;
-    animation-duration: 5s;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    animation-direction: reverse;
-}

package/src/components/textarea/textarea.module.scss

@@ -39,7 +39,7 @@
 	}
 
 	textarea {
-		@extend .flex;
+		@extend %flex;
 
 		padding: 4px;
 		outline: none;

package/src/components/textedit/textedit.module.scss

@@ -29,7 +29,7 @@
 }
 
 .x4textedit {
-	@extend .hbox;
+	@extend %hbox;
 	margin: 5px;
 	gap: 6px;
 
@@ -38,7 +38,7 @@
 		justify-content: end;
 
 		&> .x4label {
-			@extend .hbox;
+			@extend %hbox;
 			height: 100%;
 			padding: 0;
 			font-weight: 500;
@@ -51,12 +51,12 @@
 	}
 
 	&> #edit {
-		@extend .hbox;
-		@extend .flex;
+		@extend %hbox;
+		@extend %flex;
 		border-bottom: 1px solid var( --textedit-border );
 		
 		.x4input {
-			@extend .flex;
+			@extend %flex;
 			outline: none;
 			margin: 0;
 		}

package/src/components/tooltips/tooltips.scss

@@ -29,7 +29,7 @@
 }
 
 .x4tooltip {
-	@extend .shadow-xl;
+	@extend %shadow-xl;
 	
 	display: flex;
 	flex-direction: row;

package/src/components/treeview/treeview.module.scss

@@ -34,7 +34,7 @@
 }
 
 .x4treeview {
-	@extend .vbox;
+	@extend %vbox;
 
 	overflow-y: auto;
 	height: 100%;

package/src/components/viewport/viewport.module.scss

@@ -17,7 +17,7 @@
 @use "../shared.scss";
 
 .x4scrollview {
-	@extend .flex;
+	@extend %flex;
 
 	position: absolute;
 	height: 100%;

package/src/x4.d.ts

@@ -0,0 +1,10 @@
+/**
+* @file x4.d.ts
+* @author Etienne Cochard 
+* @copyright (c) 2026 R-libre ingenierie, all rights reserved.
+**/
+
+declare module "*.svg" {
+  	const content: string;
+  	export default content;
+}

package/src/x4.scss

@@ -14,6 +14,6 @@
  * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
  **/
 
-@use "./components/normalize.scss";
-@use "./components/themes.scss";
-@use "./components/base.scss"
+@import "./components/normalize.scss";
+@import "./components/themes.scss";
+@import "./components/base.scss";

package/ai-comments.txt

@@ -1,97 +0,0 @@
-x4 se distingue des approches réactives conventionnelles. 
-Il offre une expérience de développement qui met l'accent sur la simplicité, la performance et un contrôle affiné sur la manière dont l'interface utilisateur est construite et mise à jour.
-
-Voici les avantages qui découlent de cette philosophie :
-
-- Abstraction du DOM, mais avec une philosophie distincte : 
-	Contrairement aux frameworks réactifs qui utilisent un Virtual DOM et des mécanismes de réconciliation 
-	pour abstraire les manipulations du DOM, x4 propose une abstraction différente. 
-	L'objectif n'est pas d'imiter le fonctionnement des frameworks populaires, mais de fournir une manière plus directe, plus légère et plus performante 
-	d'interagir avec les concepts de l'interface utilisateur. Cette abstraction est conçue pour être moins "magique" et plus prévisible.
-
-- Performance optimisée : 
-	En concevant son propre modèle d'abstraction et de mise à jour du DOM, x4 vise à atteindre une performance brute supérieure. 
-	Il peut s'affranchir de certaines complexités inhérentes aux approches réactives pour se concentrer sur l'essentiel, 
-	offrant ainsi une expérience utilisateur fluide même dans des applications exigeantes.
-
-- Un écosystème TypeScript pur : 
-	Pour garantir une robustesse et une maintenabilité maximales, ce framework élimine tout mélange de syntaxe déclarative comme JSX/TSX avec du code JavaScript. 
-	L'intégralité de la création d'interfaces et de la logique applicative est réalisée en TypeScript natif. 
-	Cela permet de bénéficier pleinement des avantages du typage fort, de la vérification à la compilation, et d'une expérience de développement cohérente et sécurisée.
-
-- Gestion de l'état et des références simplifiée : 
-	Ce framework s'affranchit des concepts comme useRef ou des "hooks" tels qu'on les trouve dans d'autres écosystèmes.
-	La gestion des états et des références est intégrée de manière plus directe et idiomatique à sa propre architecture, favorisant une logique plus linéaire et plus facile à suivre.
-
-- Conçu pour les applications complètes : 
-	Plutôt que de se concentrer uniquement sur des composants UI isolés, ce framework est orienté vers la construction d'applications complètes.
-	Il offre les outils et la structure nécessaires pour gérer des architectures plus vastes, de la gestion des routes à l'état global.
-
-- Compatibilité avec les Web Workers : 
-	Afin d'optimiser les performances et de permettre des traitements asynchrones intensifs sans bloquer le thread principal, 
-	ce framework est conçu pour être compatible avec les Web Workers. Cela ouvre la voie à des applications plus réactives et performantes, en déportant les tâches lourdes.
-
-- Environnement de compilation et outils spécifiques : 
-	Le développement avec ce framework est accéléré par un environnement de compilation ultra-rapide, basé sur esbuild. 
-	De plus, il est livré avec un outils spécifiques X4Build qui améliore l'expérience développeur.
-	ainsi qu'une expérience de Hot Module Replacement (HMR) fluide et efficace pour des itérations rapides.
-
-- Modèle de développement éprouvé : 
-	L'architecture et les pratiques recommandées par ce framework constituent un modèle de développement éprouvé. 
-	Il facilite notamment des scénarios avancés comme les evenements distribués via WebSocket directement intégré (si besoin) dans l'application, 
-	
-- Création de composants intuitive : 
-	La manière dont x4 abstrait le DOM et gère la réactivité rend la création de composants d'une simplicité déconcertante. 
-	Vous pouvez construire des interfaces modulaires et réutilisables avec une facilité remarquable, en vous concentrant sur la logique métier plutôt 
-	que sur la gestion complexe des interactions DOM.
-
-- Accélération Drastique du Développement : 
-	Avec plus de 50 composants prêts à l'emploi, les développeurs peuvent assembler des interfaces utilisateur complexes et fonctionnelles 
-	à une vitesse remarquable. Plutôt que de passer du temps à concevoir et implémenter des éléments de base comme des buttons, des inputs, des checkboxes ou des sliders, 
-	ils peuvent les utiliser directement. Ceci libère un temps précieux pour se concentrer sur la logique métier spécifique de l'application.
-
-	Le développement "from scratch" de tels composants est coûteux en temps et en ressources. La richesse de cette bibliothèque élimine ce fardeau, 
-	réduisant ainsi les efforts de conception, de codage, de test et de maintenance de ces éléments d'interface fondamentaux. 
-	Cela signifie moins de code à écrire, moins de bugs potentiels et une meilleure productivité globale.
-
-- Richesse et Diversité des Interfaces Utilisateur : 
-	La large gamme de composants permet de créer des expériences utilisateur très riches et interactives sans avoir à intégrer de bibliothèques 
-	tierces supplémentaires pour des fonctionnalités de base. Des composants sophistiqués comme gridview (pour l'affichage de données tabulaires), spreadsheet (pour des fonctionnalités de tableur complètes), 
-	calendar, colorpicker, dialog, treeview ou progress sont inclus, offrant une boîte à outils complète pour des applications métier complexes ou des tableaux de bord interactifs.
-
-- Cohérence et Qualité : 
-	L'utilisation de composants d'un même framework assure une cohérence visuelle et comportementale à travers toute l'application. 
-	Ces composants sont testés et optimisés, garantissant une meilleure qualité et une expérience utilisateur plus fiable dès le départ.
-	En somme, cette collection de composants est un avantage concurrentiel énorme.
-
-
-
-
-
-
-You are a TypeScript/JavaScript documentation assistant.
-Your task is to generate **JSDoc comments** for public APIs in the provided code.
-Follow these rules strictly:
-
-### Rules:
-1. **Only document public APIs**:
-   - Public classes, methods, properties, and events.
-   - Ignore private/protected/internal members (e.g., `_privateField`, `#privateMethod`).
-
-2. **Output format**:
-   - Generate **only JSDoc blocks** (no code repetition).
-   - Use **inline comments** (`/** ... */`) for brevity.
-   - Do not include `@class` or `@extends` (JSDoc infers these).
-   - Document in english
-
-3. **Content guidelines**:
-   - Describe **purpose, behavior, and usage** (not implementation).
-   - Mention auto-generated CSS classes (e.g., `Button → x4button`).
-   - Include `@example` where helpful.
-   - Be concise, clear, and professional.
-
-Avoid:
-
-Implementation details.
-Private/protected members.
-Redundant or repetitive descriptions.

package/prepack.mjs

@@ -1,3 +0,0 @@
-import { rm } from 'node:fs/promises';
-await rm('lib', { recursive: true, force: true });
-console.log('lib/ supprimé → package source-only ✓');

package/scripts/prepack.mjs

@@ -1,342 +0,0 @@
-#!/usr/bin/env node
-
-import * as fs from 'node:fs';
-import * as path from "node:path"
-import chalk from "chalk"
-import * as ts from 'typescript';
-
-import { execSync } from "node:child_process";
-
-function readJSON(fname) {
-	let cpath = process.cwd();
-
-	// check here
-	let pth = path.join(cpath, fname);
-
-	if (fs.existsSync(pth)) {
-		const raw = fs.readFileSync(pth, "utf-8");
-		return JSON.parse(raw);
-	}
-
-	throw new Error(`cannot find ${fname}`);
-}
-
-function readPackage() {
-	return readJSON("package.json");
-}
-
-
-
-
-class DTSGenerator {
-
-	output = null;
-
-	emit( lvl, code ) {
-		this.output.write( '\t'.repeat(lvl)+code );
-	}
-
-	/**
-	 * 
-	 */
-
-	genMethodSig(node, source, ctor) {
-
-		const name = ctor ? "constructor" : (node.name ? node.name.getText(source) : 'new');
-
-		const typeParameters = node.typeParameters
-			? `<${node.typeParameters.map(param => param.getText(source)).join(', ')}>`
-			: '';
-
-		const parameters = node.parameters?.map(param => {
-			const paramName = param.name.getText(source);
-			const paramType = param.type ? param.type.getText(source) : 'any';
-			return `${paramName}: ${paramType}`;
-		}).join(', ');
-
-		const returnType = ctor ? '' : `: ${node.type ? node.type.getText(source) : 'void'}`;
-
-		this.emit( 2, `${name}${typeParameters}( ${parameters} )${returnType};\n` );
-	}
-
-	/**
-	 * 
-	 */
-
-	genPropSig( node, source ) {
-		const name = node.name ? node.name.getText(source) : 'unknown';
-		const type = node.type ? node.type.getText(source) : 'any';
-		const isOptional = node.questionToken ? '?' : '';
-		this.emit( 2, `${name}${isOptional}: ${type};\n` );
-	}
-
-	/**
-	 * 
-	 */
-
-	genClassSig(node, source) {
-
-		const cname = node.name.getText(source);
-		const modifiers = node.modifiers ? node.modifiers.map(mod => mod.getText(source)).join(' ') : '';
-
-		const heritage = node.heritageClauses ? node.heritageClauses.map(clause => {
-			const typeText = clause.types.map(type => type.getText(source)).join(', ');
-			return clause.token === ts.SyntaxKind.ExtendsKeyword ? `extends ${typeText}` : `implements ${typeText}`;
-		}).join(' ') : '';
-
-		const typeParameters = node.typeParameters ? `<${node.typeParameters.map(param => param.getText(source)).join(', ')}>` : '';
-
-		this.emit( 1, `${modifiers} class ${cname}${typeParameters} ${heritage} {\n` );
-
-		ts.forEachChild(node, (x) => {
-
-			if (ts.isPropertyDeclaration(x)) {
-				const name = x.name ? x.name.getText(source) : 'unknown';
-				const type = x.type ? x.type.getText(source) : 'any';
-				const isOptional = x.questionToken ? '?' : '';
-				this.emit( 2, `${name}${isOptional}: ${type};\n` );
-			}
-			else if (ts.isMethodDeclaration(x)) {
-				this.genMethodSig(x, source, false);
-			}
-			else if (ts.isConstructorDeclaration(x)) {
-				this.genMethodSig(x, source, true);
-			}
-			else if (ts.isPropertySignature(x)) {
-				this.genPropSig( x, source );
-			}
-			else {
-				//debugger;
-			}
-		});
-
-		this.emit( 1, "}\n\n" );
-	}
-
-	/**
-	 * 
-	 */
-
-	genInterfaceSig(node, source) {
-		const name = node.name.getText(source);
-		const modifiers = node.modifiers ? node.modifiers.map(mod => mod.getText(source)).join(' ') + ' ' : '';
-		const heritage = node.heritageClauses ? node.heritageClauses.map(clause => {
-			const typeText = clause.types.map(type => type.getText(source)).join(', ');
-			return clause.token === ts.SyntaxKind.ExtendsKeyword ? `extends ${typeText}` : `implements ${typeText}`;
-		}).join(' ') : '';
-
-		const typeParameters = this.genTypeParams( node.typeParameters, source );
-
-		this.emit( 1, `${modifiers}interface ${name}${typeParameters} ${heritage} {\n` );
-
-		ts.forEachChild(node, (x) => {
-
-			if (ts.isPropertySignature(x)) {
-				const name = x.name ? x.name.getText(source) : 'unknown';
-				const type = x.type ? x.type.getText(source) : 'any';
-				const isOptional = x.questionToken ? '?' : '';
-				this.emit( 2, `${name}${isOptional}: ${type};\n` );
-			}
-			else if (ts.isMethodSignature(x)) {
-				this.genMethodSig(x, source, false);
-			}
-		});
-
-		this.emit( 1, "}\n\n" );
-	}
-
-	/**
-	 * 
-	 */
-	
-	genTypeParams( node, source ) {
-		return node ? `<${node.map(param => param.getText(source)).join(', ')}>` : '';
-	}
-
-	/**
-	 * 
-	 */
-
-	genTypeDefinition(node, source) {
-		const typeName = node.name.getText(source);
-		const params = this.genTypeParams( node.typeParameters, source );
-
-		// pb if complex types
-		//const typeDefinition = node.type ? node.type.getText(source) : '';
-
-		this.emit( 1, `type ${typeName}${params} = ` );
-
-		if (ts.isTypeLiteralNode(node.type)) {
-			this.emit( 0, `{\n` );
-				
-			node.type.members.forEach( member => {
-				if( ts.isMethodSignature(member) || ts.isConstructSignatureDeclaration(member) ) {
-					this.genMethodSig( member, source );
-				}
-				else if( ts.isPropertySignature(member) ) {
-					this.genPropSig( member, source );
-				}
-			});
-
-			this.emit( 1, `}\n\n` );
-		} 
-		else if ( ts.isUnionTypeNode(node.type) || ts.isIntersectionTypeNode(node.type) ) {
-			const operator = ts.isUnionTypeNode(node.type) ? ' | ' : ' & ';
-			const typeDefinition = node.type.types.map(t => t.getText(source)).join(operator);
-			this.emit( 0, `${typeDefinition};\n\n` );
-		} 
-		else if (ts.isArrayTypeNode(node.type)) {
-			// Gérer les tableaux
-			const typeDefinition = `${node.type.elementType.getText(source)}[]`;
-			debugger;
-			this.emit( 0, `${typeDefinition};\n\n` );
-		} 
-		else {
-			// Pour les autres types (primitifs, tuples, etc.)
-			const typeDefinition = node.type.getText(source);
-			this.emit( 0, `${typeDefinition};\n\n` );
-		}
-
-
-	}
-
-	/**
-	 * 
-	 */
-
-	genEnumDefinition(node,source) {
-
-		const ename = node.name.getText(source);
-			
-		this.emit( 1, `enum ${ename} {\n`);
-		
-		node.members.forEach( member => {
-			const memberName = member.name.getText(source);
-			const memberValue = member.initializer ? ` = ${member.initializer.getText(source)}` : '';
-			this.emit( 2, `${memberName}${memberValue},\n` );
-		});
-
-		// Assembler la définition complète
-		this.emit( 1, `}\n\n`);
-	}
-
-	/**
-	 * 
-	 */
-
-	visitNode(node, source) {
-		if (ts.isInterfaceDeclaration(node)) {
-			this.genInterfaceSig(node, source);
-		}
-		else if (ts.isClassDeclaration(node)) {
-			this.genClassSig(node, source);
-		}
-		else if (ts.isTypeAliasDeclaration(node)) {
-			this.genTypeDefinition(node, source );
-		}
-		else if (ts.isEnumDeclaration(node)) {
-			this.genEnumDefinition(node, source );
-		}
-		else {
-			ts.forEachChild(node, (x) => this.visitNode(x, source));
-		}
-	}
-
-	/**
-	 * rz=eally quick and dirty dts generator
-	 */
-
-	async build( output_path ) {
-
-		this.output = fs.createWriteStream(output_path, {});
-
-		this.emit( 0, `/** \n`);
-		this.emit( 0, ` *  ___  ___ __\n`);
-		this.emit( 0, ` *  \\  \\/  /  / _\n`);
-		this.emit( 0, ` *   \\    /  /_| |_\n`);
-		this.emit( 0, ` *   /    \\____   _|  \n`);
-		this.emit( 0, ` *  /__/\\__\\   |_|\n`);
-		this.emit( 0, ` * \n`);
-		this.emit( 0, ` * @author Etienne Cochard \n`);
-		this.emit( 0, ` * @copyright (c) 2024 R-libre ingenierie\n`);
-		this.emit( 0, ` *\n`);
-		this.emit( 0, ` * Use of this source code is governed by an MIT-style license \n`);
-		this.emit( 0, ` * that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.\n`);
-		this.emit( 0, ` *\n` );
-		this.emit( 0, ` * AUTOGENERATED CODE, DO NOT MODIFY\n` );
-		this.emit( 0, ` * generated on ${new Date().toDateString()}\n` );
-		this.emit( 0, ` */\n\n\n` );
-
-		this.emit( 0, "declare module 'x4js' {\n\n");
-
-		const inputFiles = ["src/x4.ts", "src/custom.d.ts"];
-		const compilerOptions = readJSON("tsconfig.json");
-
-		compilerOptions.declaration = true;
-
-		const host = ts.createCompilerHost(compilerOptions);
-		const program = ts.createProgram(inputFiles, compilerOptions, host);
-
-		const cwd = process.cwd().replaceAll("\\", "/");
-		const mod_path = cwd + "/node_modules";
-
-		program.getSourceFiles().forEach((sourceFile) => {
-
-			let pth = sourceFile.fileName;
-			if (pth.startsWith(mod_path)) {
-				return;
-			}
-			else if( !pth.startsWith(cwd) ) {
-				return;
-			}
-
-			pth = pth.substring(cwd.length);
-			
-			this.emit(1,`// ---------------------------------------\n` );
-			this.emit(1,`// from ${pth}\n\n`);
-
-			this.visitNode(sourceFile, sourceFile);
-		});
-
-		this.emit(0,"}\n\n");
-	}
-}
-
-
-async function main() {
-
-	const pkg = readPackage();
-
-	console.log(chalk.yellow("-- prepack ------------------------"))
-
-	fs.mkdirSync('lib/styles', { recursive: true });
-	fs.mkdirSync('lib/types', { recursive: true });
-
-	console.log(chalk.green("building esm..."));
-	execSync("npx x4build --release --outdir=lib/esm");
-
-	console.log(chalk.green("building cjs..."));
-	execSync("npx x4build --release --cjs --outdir=lib/cjs");
-
-	console.log(chalk.green("creating .d.ts..."));
-	
-	const generator = new DTSGenerator( );
-	await generator.build( "lib/types/x4js.d.ts" );
-
-	console.log(chalk.green("copying dependencies..."));
-
-	fs.cpSync('lib/esm/x4.css', 'lib/styles/x4.css');
-	fs.renameSync('lib/esm/x4.js', 'lib/esm/x4.mjs');
-
-	console.log(chalk.yellow("-----------------------------------"))
-}
-
-main( );
-
-//(async function tt( ) {
-//const generator = new DTSGenerator( );
-//	await generator.build( "output.d.ts" );
-//})( );
-
-
-