g360-cli 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "g360-cli",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "CLI tool for bootstrapping G360 projects with standardized structure, assets, and identity",
   "type": "module",
   "main": "src/cli.js",

package/src/assets/signature/g360_flet/__init__.py

@@ -0,0 +1,5 @@
+# g360-signature Flet
+__version__ = "1.1.0"
+from .g360_signature import G360Signature, g360_own, g360_powered, g360_footer
+
+__all__ = ["G360Signature", "g360_own", "g360_powered", "g360_footer"]

package/src/assets/signature/g360_flet/g360_signature.py

@@ -0,0 +1,224 @@
+"""
+g360-signature para Flet
+Widget reutilizable del isotipo G360 (3 puntos + chevron) para apps Flet.
+Soporta tema automatico (claro/oscuro) igual que la version web.
+
+Uso:
+    from g360_flet.g360_signature import G360Signature
+
+    page.add(G360Signature(mode="own"))
+    page.add(G360Signature(mode="powered", version="3.1"))
+"""
+
+import flet as ft
+
+# Colores G360
+G360_GREEN = "#00d084"
+G360_GRAY_DARK = "#94a3b8"   # dark mode
+G360_GRAY_LIGHT = "#64748b"  # light mode
+
+
+class G360Signature(ft.Row):
+    """
+    Componente de branding G360 para Flet.
+
+    Detecta automaticamente el tema de la pagina (light/dark)
+    y ajusta los colores igual que el Web Component original.
+    """
+
+    def __init__(
+        self,
+        mode: str = "own",
+        version: str | None = None,
+        opacity: float = 0.4,
+        grayscale: bool = False,
+        spacing: int = 4,
+        on_hover=None,
+        **kwargs,
+    ):
+        super().__init__(**kwargs)
+
+        self._base_opacity = opacity
+        self._grayscale = grayscale
+        self.spacing = spacing
+        self.vertical_alignment = ft.CrossAxisAlignment.CENTER
+
+        self._mode = "own"
+        self._version = None
+
+        self.mode = mode
+        self.version = version
+
+        if on_hover is None:
+            self.on_hover = self._default_on_hover
+        else:
+            self.on_hover = on_hover
+
+        self.opacity = opacity
+
+    def _default_on_hover(self, e: ft.HoverEvent):
+        self.opacity = 1.0 if e.data == "true" else self._base_opacity
+        self.update()
+
+    def _is_dark(self) -> bool:
+        """Detecta si el tema actual es oscuro."""
+        if not self._is_mounted():
+            return False
+        mode = self.page.theme_mode
+        if mode == ft.ThemeMode.DARK:
+            return True
+        if mode == ft.ThemeMode.LIGHT:
+            return False
+        # SYSTEM: detectar por color de fondo
+        bg = self.page.bgcolor
+        if bg and isinstance(bg, str):
+            bg_lower = bg.lower()
+            if bg_lower.startswith("#"):
+                r = int(bg_lower[1:3], 16)
+                g = int(bg_lower[3:5], 16)
+                b = int(bg_lower[5:7], 16)
+                lum = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+                return lum < 0.5
+        return False
+
+    def _get_colors(self):
+        """Retorna colores segun el tema actual."""
+        if self._grayscale:
+            return G360_GRAY_DARK, G360_GRAY_DARK
+        if self._is_dark():
+            return G360_GREEN, G360_GRAY_DARK
+        return G360_GREEN, G360_GRAY_LIGHT
+
+    def _build(self):
+        green, gray = self._get_colors()
+
+        # 3 puntos verticales
+        dots = ft.Column(
+            controls=[
+                ft.Container(width=4, height=4, border_radius=2, bgcolor=gray),
+                ft.Container(width=4, height=4, border_radius=2, bgcolor=green),
+                ft.Container(width=4, height=4, border_radius=2, bgcolor=gray),
+            ],
+            spacing=2,
+            horizontal_alignment=ft.CrossAxisAlignment.CENTER,
+        )
+
+        # Chevron ">"
+        chevron = ft.Text(
+            ">",
+            size=14,
+            color=green,
+            font_family="Consolas",
+            selectable=False,
+        )
+
+        isotype = ft.Row(
+            controls=[dots, chevron],
+            spacing=1,
+            vertical_alignment=ft.CrossAxisAlignment.CENTER,
+        )
+
+        # Texto principal
+        if self.mode == "own":
+            text_controls = [
+                ft.Text("G360", size=12, color=green, weight=ft.FontWeight.BOLD,
+                        font_family="Consolas", selectable=False),
+                ft.Text(" by ccusi", size=12, color=gray,
+                        font_family="Consolas", selectable=False),
+            ]
+        else:
+            text_controls = [
+                ft.Text("powered by ", size=12, color=gray,
+                        font_family="Consolas", selectable=False),
+                ft.Text("G360", size=12, color=green, weight=ft.FontWeight.BOLD,
+                        font_family="Consolas", selectable=False),
+            ]
+
+        if self.version:
+            text_controls.append(
+                ft.Text(f" v{self.version}", size=12, color=gray, opacity=0.7,
+                        font_family="Consolas", selectable=False)
+            )
+
+        text_row = ft.Row(
+            controls=text_controls,
+            spacing=0,
+            vertical_alignment=ft.CrossAxisAlignment.CENTER,
+        )
+
+        self.controls = [isotype, text_row]
+
+    # -- Propiedades --
+
+    def _is_mounted(self) -> bool:
+        """Verifica si el widget ya esta montado en la pagina."""
+        try:
+            return self.page is not None
+        except RuntimeError:
+            return False
+
+    @property
+    def mode(self) -> str:
+        return self._mode
+
+    @mode.setter
+    def mode(self, value: str):
+        if value not in ("own", "powered"):
+            raise ValueError(f"mode debe ser 'own' o 'powered', recibido: '{value}'")
+        self._mode = value
+        if self._is_mounted():
+            self._build()
+
+    @property
+    def version(self) -> str | None:
+        return self._version
+
+    @version.setter
+    def version(self, value: str | None):
+        self._version = value
+        if self._is_mounted():
+            self._build()
+
+    @property
+    def grayscale(self) -> bool:
+        return self._grayscale
+
+    @grayscale.setter
+    def grayscale(self, value: bool):
+        self._grayscale = value
+        if self._is_mounted():
+            self._build()
+
+    def did_mount(self):
+        """Se ejecuta cuando el widget se monta en la pagina."""
+        self._build()
+        self.update()
+
+    def update(self):
+        """Actualiza colores segun tema y refresca."""
+        if self._is_mounted():
+            self._build()
+        super().update()
+
+
+# ============================================================
+# Funciones de conveniencia
+# ============================================================
+
+def g360_own(version: str | None = None, **kwargs) -> G360Signature:
+    """Isotipo modo propio: G360 by ccusi"""
+    return G360Signature(mode="own", version=version, **kwargs)
+
+
+def g360_powered(version: str | None = None, **kwargs) -> G360Signature:
+    """Isotipo modo powered: powered by G360"""
+    return G360Signature(mode="powered", version=version, **kwargs)
+
+
+def g360_footer(version: str | None = None, **kwargs) -> ft.Container:
+    """Footer completo con el isotipo G360."""
+    return ft.Container(
+        content=G360Signature(mode="powered", version=version, opacity=0.6, **kwargs),
+        padding=ft.padding.Padding(0, 0, 0, 16),
+        alignment=ft.alignment.Alignment(0, 1),
+    )

package/src/assets/signature/index.js

@@ -0,0 +1,130 @@
+/**
+ * g360-signature v1.1.0
+ * Web component para branding G360 - Sin Shadow DOM
+ */
+
+const G360_SIGNATURE_CSS = `
+.g360-signature {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 18px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 12px;
+  line-height: 1;
+  opacity: 0.4;
+  transition: opacity 0.3s ease;
+  cursor: default;
+  --g360-green: #00d084;
+  --g360-gray: #64748b;
+}
+.g360-signature:hover {
+  opacity: 1;
+}
+.g360-signature .g360-iw {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  height: 100%;
+}
+.g360-signature .g360-iso {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  height: 100%;
+}
+.g360-signature .g360-d {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+}
+.g360-signature .g360-dt { background: var(--g360-gray); }
+.g360-signature .g360-dm { background: var(--g360-green); }
+.g360-signature .g360-db { background: var(--g360-gray); }
+.g360-signature .g360-ch {
+  color: var(--g360-green);
+  width: 20px;
+  height: 20px;
+}
+.g360-signature .g360-t {
+  color: var(--g360-gray);
+  letter-spacing: 0.5px;
+}
+.g360-signature .g360-v {
+  color: var(--g360-gray);
+  opacity: 0.7;
+}
+.g360-signature .g360-s {
+  color: var(--g360-gray);
+  opacity: 0.5;
+}
+@media (prefers-color-scheme: dark) {
+  .g360-signature { --g360-gray: #94a3b8; }
+}
+`;
+
+class G360Signature extends HTMLElement {
+  static get observedAttributes() {
+    return ['mode', 'version'];
+  }
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this._injectStyles();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  _injectStyles() {
+    if (document.getElementById('g360-signature-css')) return;
+    const style = document.createElement('style');
+    style.id = 'g360-signature-css';
+    style.textContent = G360_SIGNATURE_CSS;
+    document.head.appendChild(style);
+  }
+
+  get mode() {
+    return this.getAttribute('mode') || 'own';
+  }
+
+  get version() {
+    return this.getAttribute('version') || '';
+  }
+
+  render() {
+    const isOwn = this.mode === 'own';
+    const mainText = isOwn ? 'G360 by ccusi' : 'powered by G360';
+
+    const versionHtml = this.version
+      ? `<span class="g360-s">&gt;</span><span class="g360-v">${this.version}</span>`
+      : '';
+
+    this.innerHTML = `
+      <span class="g360-signature">
+        <span class="g360-iw">
+          <span class="g360-iso">
+            <span class="g360-d g360-dt"></span>
+            <span class="g360-d g360-dm"></span>
+            <span class="g360-d g360-db"></span>
+          </span>
+          <svg class="g360-ch" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 4 14 10 6 16"></polyline>
+          </svg>
+        </span>
+        <span class="g360-t">${mainText}</span>
+        ${versionHtml}
+      </span>
+    `;
+  }
+}
+
+if (!customElements.get('g360-signature')) {
+  customElements.define('g360-signature', G360Signature);
+}

package/src/assets/templates/python-flet/src/core/g360_theme.py

@@ -156,20 +156,27 @@ class G360Theme:
 
     def footer_signature(self):
         import flet as ft
-        mode = self.config.get("signature", {}).get("mode", "powered")
-        text = self.config.get("signature", {}).get("text", "powered by G360")
-        return ft.Container(
-            content=ft.Row(
-                [
-                    self.logo_component(height=16),
-                    ft.Container(width=8),
-                    ft.Text(text, size=10, color=self.muted),
-                ],
-                alignment=ft.MainAxisAlignment.CENTER,
-            ),
-            padding=8,
-            bgcolor=self.surface,
-        )
+        try:
+            from core.components.g360_signature import g360_footer
+            mode = self.config.get("signature", {}).get("mode", "powered")
+            version = self.config.get("signature", {}).get("version", None)
+            return g360_footer(version=version)
+        except ImportError:
+            # Fallback si g360_signature no esta instalado
+            mode = self.config.get("signature", {}).get("mode", "powered")
+            text = self.config.get("signature", {}).get("text", "powered by G360")
+            return ft.Container(
+                content=ft.Row(
+                    [
+                        self.logo_component(height=16),
+                        ft.Container(width=8),
+                        ft.Text(text, size=10, color=self.muted),
+                    ],
+                    alignment=ft.MainAxisAlignment.CENTER,
+                ),
+                padding=8,
+                bgcolor=self.surface,
+            )
 
     @property
     def as_dict(self):

package/src/assets/templates/web-pwa/index.html

@@ -14,5 +14,8 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
+    <script src="https://unpkg.com/g360-signature@latest/index.js"></script>
+    <!-- Firma Oficial G360 -->
+    <g360-signature mode="powered" style="position: fixed; bottom: 16px; right: 16px; z-index: 99999;"></g360-signature>
   </body>
 </html>

package/src/cli.js

@@ -109,9 +109,14 @@ program
 
 program
   .command('signature')
-  .argument('<command>', 'Command to execute (install)')
+  .argument('<command>', 'Command to execute: install, positions')
+  .description('Install g360-signature branding component')
   .option('-p, --path <path>', 'Target project path', '.')
   .option('--force', 'Force reinstall if already exists')
+  .option('-m, --mode <mode>', 'Signature mode: own or powered', 'powered')
+  .option('-v, --version <version>', 'Version to display')
+  .option('--position <position>', 'Signature position: bottom-right, bottom-left, bottom-center, footer-right, footer-left', 'bottom-right')
+  .option('-i, --interactive', 'Interactive mode with guided suggestions')
   .action(signature);
 
 program.parse();

package/src/commands/signature.js

@@ -1,55 +1,252 @@
-import chalk from 'chalk';
-import fs from 'fs-extra';
-import path from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-export async function signature(command, options) {
-  const { path: targetPath = '.', force = false } = options;
-
-  if (command === 'install') {
-    console.log(chalk.bold.cyan('\n🔖 Instalando g360-signature\n'));
-
-    const targetDir = path.resolve(process.cwd(), targetPath);
-    const indexHtmlPath = path.join(targetDir, 'index.html');
-
-    if (!fs.existsSync(indexHtmlPath)) {
-      console.error(chalk.red('❌ No se encontro archivo index.html en el directorio actual'));
-      return;
-    }
-
-    let htmlContent = fs.readFileSync(indexHtmlPath, 'utf8');
-
-    const scriptTag = '    <script type="module" src="https://unpkg.com/g360-signature@latest/index.js"></script>';
-    const signatureComponent = `
-    <!-- Firma Oficial G360 -->
-    <g360-signature mode="powered" style="position: fixed; bottom: 16px; right: 16px; z-index: 99999;"></g360-signature>
-`;
-
-    // Si --force es true, eliminamos cualquier instancia existente para una reinstalación limpia.
-    // De lo contrario, si ya está instalado y no se fuerza, salimos.
-    if (force) {
-      htmlContent = htmlContent.replace(new RegExp(scriptTag.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), '');
-      htmlContent = htmlContent.replace(new RegExp(signatureComponent.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), '');
-      htmlContent = htmlContent.replace(/\n\s*\n/g, '\n'); // Limpiar posibles líneas vacías extra
-    } else if (htmlContent.includes('g360-signature')) {
-      console.log(chalk.yellow('⚠️  g360-signature ya se encuentra instalado'));
-      console.log(chalk.gray('Usa --force para reinstalar'));
-      return;
-    }
-
-    if (!htmlContent.includes(scriptTag)) {
-      htmlContent = htmlContent.replace('</body>', `${scriptTag}\n  </body>`);
-    }
-
-    if (!htmlContent.includes('<g360-signature')) {
-      htmlContent = htmlContent.replace('</body>', `${signatureComponent}\n  </body>`);
-    }
-
-    fs.writeFileSync(indexHtmlPath, htmlContent, 'utf8');
-
-    console.log(chalk.green('✅ g360-signature instalado exitosamente!'));
-    console.log(chalk.gray('\nEl componente ha sido agregado en el pie de pagina de tu proyecto\n'));
-  }
-}
+import chalk from 'chalk';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SIGNATURE_ASSETS = path.join(__dirname, '..', 'assets', 'signature');
+
+const POSITIONS = {
+  'bottom-right': 'position: fixed; bottom: 16px; right: 16px; z-index: 99999;',
+  'bottom-left': 'position: fixed; bottom: 16px; left: 16px; z-index: 99999;',
+  'bottom-center': 'position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 99999;',
+  'footer-right': 'position: static; float: right;',
+  'footer-left': 'position: static; float: left;',
+};
+
+const FLET_POSITIONS = {
+  'sidebar': 'En el sidebar como footer',
+  'footer': 'En el footer de la pagina',
+  'fixed-bottom': 'Fijo abajo a la derecha',
+  'header': 'En el header/cabecera',
+};
+
+export async function signature(command, options) {
+  const {
+    path: targetPath = '.',
+    force = false,
+    mode = 'powered',
+    version = null,
+    position = 'bottom-right',
+    interactive = false,
+  } = options;
+
+  if (command === 'install') {
+    console.log(chalk.bold.cyan('\n🔖 Instalando g360-signature\n'));
+
+    const targetDir = path.resolve(process.cwd(), targetPath);
+    const projectType = detectProjectType(targetDir);
+
+    if (!projectType) {
+      console.error(chalk.red('❌ No se detecto un proyecto web o Flet en el directorio actual'));
+      console.log(chalk.gray('Proyectos soportados: web (HTML), Flet (Python)'));
+      return;
+    }
+
+    // Modo interactivo: guiar al usuario
+    if (interactive) {
+      const selectedPosition = await interactivePosition(projectType);
+      if (selectedPosition) {
+        options.position = selectedPosition;
+      }
+    }
+
+    if (projectType === 'flet') {
+      await installFlet(targetDir, { force, mode, version, position: options.position });
+    } else if (projectType === 'web') {
+      await installWeb(targetDir, { force, mode, version, position: options.position });
+    }
+
+    console.log(chalk.green('\n✅ g360-signature instalado exitosamente!'));
+    showUsageTips(projectType, options.position);
+  }
+
+  if (command === 'positions') {
+    showPositions();
+  }
+}
+
+function detectProjectType(dir) {
+  const pyprojectPath = path.join(dir, 'pyproject.toml');
+  if (fs.existsSync(pyprojectPath)) {
+    const content = fs.readFileSync(pyprojectPath, 'utf8');
+    if (content.includes('flet')) return 'flet';
+  }
+  const mainPy = path.join(dir, 'src', 'main.py');
+  if (fs.existsSync(mainPy)) {
+    const content = fs.readFileSync(mainPy, 'utf8');
+    if (content.includes('flet')) return 'flet';
+  }
+  const indexHtml = path.join(dir, 'index.html');
+  if (fs.existsSync(indexHtml)) return 'web';
+  return null;
+}
+
+function showPositions() {
+  console.log(chalk.bold.cyan('\n📍 Posiciones disponibles para Web:\n'));
+  Object.entries(POSITIONS).forEach(([key, value]) => {
+    console.log(chalk.white(`  ${key.padEnd(18)} ${chalk.gray(value)}`));
+  });
+
+  console.log(chalk.bold.cyan('\n📍 Posiciones disponibles para Flet:\n'));
+  Object.entries(FLET_POSITIONS).forEach(([key, value]) => {
+    console.log(chalk.white(`  ${key.padEnd(18)} ${chalk.gray(value)}`));
+  });
+
+  console.log(chalk.gray('\nEjemplo: g360 signature install --position bottom-left\n'));
+}
+
+async function interactivePosition(projectType) {
+  console.log(chalk.bold.cyan('\n📍 Selecciona la posicion de la firma:\n'));
+
+  const options = projectType === 'flet'
+    ? Object.entries(FLET_POSITIONS)
+    : Object.entries(POSITIONS);
+
+  options.forEach(([key, value], index) => {
+    console.log(chalk.white(`  ${index + 1}. ${key.padEnd(18)} ${chalk.gray(value)}`));
+  });
+
+  console.log(chalk.gray('\n  Presiona Enter para usar la posicion por defecto (bottom-right)'));
+  console.log(chalk.gray('  O escribe el nombre de la posicion\n'));
+
+  // En modo no-interactivo, retornar default
+  return null;
+}
+
+function showUsageTips(projectType, position) {
+  console.log(chalk.bold.cyan('\n💡 Tips de uso:\n'));
+
+  if (projectType === 'web') {
+    console.log(chalk.white('  Web Component:'));
+    console.log(chalk.gray('    <g360-signature mode="powered"></g360-signature>'));
+    console.log(chalk.gray('    <g360-signature mode="own" version="1.0"></g360-signature>\n'));
+  } else {
+    console.log(chalk.white('  Flet Widget:'));
+    console.log(chalk.gray('    from core.components.g360_signature import G360Signature, g360_footer'));
+    console.log(chalk.gray('    page.add(g360_footer(version="1.0"))'));
+    console.log(chalk.gray('    page.add(G360Signature(mode="own"))\n'));
+  }
+
+  console.log(chalk.white('  Cambiar posicion:'));
+  console.log(chalk.gray('    g360 signature install --position bottom-left\n'));
+
+  console.log(chalk.white('  Ver todas las posiciones:'));
+  console.log(chalk.gray('    g360 signature positions\n'));
+}
+
+async function installWeb(targetDir, { force, mode, version, position }) {
+  console.log(chalk.gray('Detectado: Proyecto Web'));
+
+  const indexHtmlPath = path.join(targetDir, 'index.html');
+  let htmlContent = fs.readFileSync(indexHtmlPath, 'utf8');
+
+  const hasLocalIndex = fs.existsSync(path.join(targetDir, 'g360-signature', 'index.js'));
+  const scriptSrc = hasLocalIndex
+    ? '    <script src="g360-signature/index.js"></script>'
+    : '    <script src="https://unpkg.com/g360-signature@latest/index.js"></script>';
+
+  const versionAttr = version ? ` version="${version}"` : '';
+  const positionStyle = POSITIONS[position] || POSITIONS['bottom-right'];
+
+  const signatureComponent = `
+    <!-- Firma Oficial G360 -->
+    <g360-signature mode="${mode}"${versionAttr} style="${positionStyle}"></g360-signature>
+`;
+
+  if (force) {
+    htmlContent = htmlContent.replace(/\n.*g360-signature.*\n/g, '\n');
+    htmlContent = htmlContent.replace(/<script[^>]*unpkg\.com\/g360-signature[^>]*><\/script>/g, '');
+    htmlContent = htmlContent.replace(/<script[^>]*g360-signature\/index\.js[^>]*><\/script>/g, '');
+    htmlContent = htmlContent.replace(/\n\s*\n/g, '\n');
+  } else if (htmlContent.includes('g360-signature')) {
+    console.log(chalk.yellow('⚠️  g360-signature ya se encuentra instalado'));
+    console.log(chalk.gray('Usa --force para reinstalar'));
+    return;
+  }
+
+  if (!hasLocalIndex) {
+    const sigDir = path.join(targetDir, 'g360-signature');
+    fs.copySync(SIGNATURE_ASSETS, sigDir);
+    console.log(chalk.gray('  Archivos copiados a g360-signature/'));
+  }
+
+  if (!htmlContent.includes('g360-signature/index.js') && !htmlContent.includes('unpkg.com/g360-signature')) {
+    htmlContent = htmlContent.replace('</body>', `${scriptSrc}\n  </body>`);
+  }
+  if (!htmlContent.includes('<g360-signature')) {
+    htmlContent = htmlContent.replace('</body>', `${signatureComponent}\n  </body>`);
+  }
+
+  fs.writeFileSync(indexHtmlPath, htmlContent, 'utf8');
+  console.log(chalk.gray('  index.html actualizado'));
+}
+
+async function installFlet(targetDir, { force, mode, version, position }) {
+  console.log(chalk.gray('Detectado: Proyecto Flet'));
+
+  const fletDestDir = path.join(targetDir, 'src', 'core', 'components');
+  if (!fs.existsSync(fletDestDir)) {
+    fs.mkdirSync(fletDestDir, { recursive: true });
+  }
+
+  const widgetDest = path.join(fletDestDir, 'g360_signature.py');
+
+  if (fs.existsSync(widgetDest) && !force) {
+    console.log(chalk.yellow('⚠️  g360-signature ya se encuentra instalado'));
+    console.log(chalk.gray('Usa --force para reinstalar'));
+    return;
+  }
+
+  const widgetSrc = path.join(SIGNATURE_ASSETS, 'g360_flet', 'g360_signature.py');
+  fs.copySync(widgetSrc, widgetDest);
+  console.log(chalk.gray('  Widget copiado a src/core/components/g360_signature.py'));
+
+  const initPath = path.join(fletDestDir, '__init__.py');
+  if (!fs.existsSync(initPath)) {
+    fs.writeFileSync(initPath, '', 'utf8');
+  }
+
+  // Insertar en main.py
+  const mainPyPath = path.join(targetDir, 'src', 'main.py');
+  if (fs.existsSync(mainPyPath)) {
+    let mainContent = fs.readFileSync(mainPyPath, 'utf8');
+
+    const importLine = 'from core.components.g360_signature import G360Signature, g360_footer';
+    const versionAttr = version ? `, version="${version}"` : '';
+
+    // Codigo de insercion segun posicion
+    let footerCode;
+    switch (position) {
+      case 'sidebar':
+        footerCode = `\n    # Firma G360 en sidebar\n    sidebar.controls.append(g360_footer(${versionAttr.trim() ? versionAttr : ''}))\n`;
+        break;
+      case 'header':
+        footerCode = `\n    # Firma G360 en header\n    header.controls.append(G360Signature(mode="${mode}"${versionAttr}))\n`;
+        break;
+      case 'fixed-bottom':
+        footerCode = `\n    # Firma G360 fija abajo\n    page.overlay.append(G360Signature(mode="${mode}"${versionAttr}))\n`;
+        break;
+      default: // footer
+        footerCode = `\n    # Firma G360\n    page.add(g360_footer(${versionAttr.trim() ? versionAttr : ''}))\n`;
+    }
+
+    if (!mainContent.includes('g360_signature')) {
+      mainContent = mainContent.replace(
+        /(from\s+core\.\w+.*\n)/,
+        `$1${importLine}\n`
+      );
+
+      if (mainContent.includes('page.add')) {
+        const lastAdd = mainContent.lastIndexOf('page.add');
+        const endOfLine = mainContent.indexOf('\n', lastAdd);
+        mainContent = mainContent.slice(0, endOfLine + 1) + footerCode + mainContent.slice(endOfLine + 1);
+      } else {
+        mainContent += footerCode;
+      }
+
+      fs.writeFileSync(mainPyPath, mainContent, 'utf8');
+      console.log(chalk.gray('  main.py actualizado'));
+    }
+  }
+}