g360-cli 1.4.0 → 1.6.0

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);
+}