@synthex-engineers/refined-tech 1.0.0 → 1.0.3

package/dist/astro/components/FooterBounceCurve.astro

@@ -0,0 +1,302 @@
+---
+// FooterBounceCurve.astro - Fondo oficial unificado en SVG con curva elástica deformable y textura de grano 35mm
+interface Props {
+  /**
+   * Altura que ocupará el SVG. Permite cualquier valor CSS válido (ej: '100%', '100vh', '850px').
+   * Por defecto '100%' para acoplarse con exactitud al alto del contenedor padre (el footer).
+   */
+  height?: string | number;
+  /**
+   * Clases CSS opcionales para el contenedor del SVG.
+   */
+  class?: string;
+  /**
+   * Selector o ID del elemento trigger para disparar el rebote con ScrollTrigger.
+   * Por defecto: 'contacto' (el ID oficial del footer).
+   */
+  triggerId?: string;
+  /**
+   * Amplitud vertical máxima de la deformación elástica en unidades de viewBox (por defecto: 70).
+   */
+  bounceAmplitude?: number;
+}
+
+const {
+  height = '100%',
+  class: className = '',
+  triggerId = 'contacto',
+  bounceAmplitude = 70,
+} = Astro.props;
+
+const containerHeight = typeof height === 'number' ? `${height}px` : height;
+---
+
+<div
+  id="footer-bounce-wrap"
+  class:list={[
+    "absolute inset-x-0 top-0 w-full min-w-full pointer-events-none select-none overflow-visible z-10",
+    className,
+  ]}
+  style={{ height: containerHeight }}
+  aria-hidden="true"
+  data-trigger-id={triggerId}
+  data-amplitude={bounceAmplitude}
+>
+  <svg
+    id="footer-bounce-svg"
+    class="w-full h-full block overflow-visible"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1440 1000"
+    preserveAspectRatio="none"
+  >
+    <defs>
+      <!-- Gradiente oficial Synthex: Pistacho (#E0F9B5) a Blanco Nieve (#F4FDE4) -->
+      <linearGradient id="footer-bounce-gradient" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="#E0F9B5" />
+        <stop offset="100%" stop-color="#F4FDE4" />
+      </linearGradient>
+
+      <!-- Filtro de Grano de Película 35mm integrado y recortado exactamente a la silueta del trazado -->
+      <filter
+        id="footer-bounce-grain"
+        x="0%"
+        y="-20%"
+        width="100%"
+        height="140%"
+        color-interpolation-filters="sRGB"
+      >
+        <feTurbulence
+          type="fractalNoise"
+          baseFrequency="0.75"
+          numOctaves="4"
+          stitchTiles="stitch"
+          result="noise"
+        />
+        <feColorMatrix
+          type="saturate"
+          values="0"
+          in="noise"
+          result="grayNoise"
+        />
+        <feComponentTransfer in="grayNoise" result="subtleNoise">
+          <feFuncR type="linear" slope="0.5" intercept="0.5" />
+          <feFuncG type="linear" slope="0.5" intercept="0.5" />
+          <feFuncB type="linear" slope="0.5" intercept="0.5" />
+        </feComponentTransfer>
+        <feBlend in="SourceGraphic" in2="subtleNoise" mode="multiply" result="blended" />
+        <feComposite in="blended" in2="SourceAlpha" operator="in" />
+      </filter>
+    </defs>
+
+    <!-- Trazado ÚNICO: Fondo Pistacho Deformable con Granulado 35mm Palpable -->
+    <path
+      id="bouncy-path"
+      class="footer-bounce-path"
+      fill="url(#footer-bounce-gradient)"
+      filter="url(#footer-bounce-grain)"
+      d="M 0,0 Q 720,0 1440,0 L 1440,1000 L 0,1000 Z"
+    />
+  </svg>
+</div>
+
+<script>
+  import gsap from "gsap";
+  import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+  gsap.registerPlugin(ScrollTrigger);
+
+  let activeScrollTrigger: ScrollTrigger | null = null;
+  let activeCleanup: (() => void) | null = null;
+  let refreshDebounceTimer: any = null;
+
+  function scheduleRefresh() {
+    clearTimeout(refreshDebounceTimer);
+    refreshDebounceTimer = setTimeout(() => {
+      ScrollTrigger.refresh();
+      const lenis = (window as any).__lenis;
+      if (lenis && typeof lenis.resize === "function") {
+        lenis.resize();
+      }
+    }, 60);
+  }
+
+  function initFooterBounce() {
+    const wrap = document.getElementById("footer-bounce-wrap");
+    const bouncyPath = document.getElementById("bouncy-path");
+    if (!wrap || !bouncyPath) return;
+
+    // Destruir instancias previas y listeners para evitar fugas de memoria
+    if (activeCleanup) {
+      activeCleanup();
+      activeCleanup = null;
+    }
+    if (activeScrollTrigger) {
+      activeScrollTrigger.kill();
+      activeScrollTrigger = null;
+    }
+
+    const rest = "M 0,0 Q 720,0 1440,0 L 1440,1000 L 0,1000 Z";
+    const isMobile = window.matchMedia("(max-width: 768px)").matches;
+    const baseStretch = parseInt(wrap.getAttribute("data-amplitude") || "70", 10) || 70;
+    const STRETCH_PIXELS = isMobile ? Math.min(baseStretch, 45) : baseStretch;
+
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+
+    if (!prefersReducedMotion) {
+      let hasSnapped = false;
+      let activeTween: gsap.core.Tween | null = null;
+
+      const initialRect = wrap.getBoundingClientRect();
+      if (initialRect.top < window.innerHeight - STRETCH_PIXELS) {
+        hasSnapped = true;
+        bouncyPath.setAttribute("d", rest);
+      }
+
+      const updateMembrane = () => {
+        const rect = wrap.getBoundingClientRect();
+        const S = window.innerHeight - rect.top;
+
+        if (S <= 0) {
+          if (hasSnapped || activeTween) {
+            hasSnapped = false;
+            if (activeTween) {
+              activeTween.kill();
+              activeTween = null;
+            }
+            bouncyPath.setAttribute("d", rest);
+          }
+          return;
+        }
+
+        if (hasSnapped) {
+          return;
+        }
+
+        if (S >= STRETCH_PIXELS) {
+          hasSnapped = true;
+          if (activeTween) {
+            activeTween.kill();
+            activeTween = null;
+          }
+
+          const H = rect.height || 1000;
+          const snapC = (2 * STRETCH_PIXELS * 1000) / H;
+          const snapAnim = { c: snapC };
+
+          activeTween = gsap.to(snapAnim, {
+            c: 0,
+            duration: 1.8,
+            ease: "elastic.out(1.2, 0.35)",
+            overwrite: "auto",
+            onUpdate: () => {
+              bouncyPath.setAttribute(
+                "d",
+                `M 0,0 Q 720,${snapAnim.c} 1440,0 L 1440,1000 L 0,1000 Z`,
+              );
+            },
+            onComplete: () => {
+              bouncyPath.setAttribute("d", rest);
+              activeTween = null;
+            },
+          });
+          return;
+        }
+
+        const H = rect.height || 1000;
+        const currentC = (2 * S * 1000) / H;
+        bouncyPath.setAttribute(
+          "d",
+          `M 0,0 Q 720,${currentC} 1440,0 L 1440,1000 L 0,1000 Z`,
+        );
+      };
+
+      activeScrollTrigger = ScrollTrigger.create({
+        trigger: wrap,
+        start: "top bottom",
+        end: "bottom top",
+        onUpdate: updateMembrane,
+        onLeaveBack: () => {
+          hasSnapped = false;
+          if (activeTween) {
+            activeTween.kill();
+            activeTween = null;
+          }
+          bouncyPath.setAttribute("d", rest);
+        },
+      });
+
+      window.addEventListener("scroll", updateMembrane, { passive: true });
+      const lenis = (window as any).__lenis;
+      if (lenis && typeof lenis.on === "function") {
+        lenis.on("scroll", updateMembrane);
+      }
+
+      activeCleanup = () => {
+        window.removeEventListener("scroll", updateMembrane);
+        const l = (window as any).__lenis;
+        if (l && typeof l.off === "function") {
+          l.off("scroll", updateMembrane);
+        }
+        if (activeTween) {
+          activeTween.kill();
+          activeTween = null;
+        }
+      };
+    } else {
+      bouncyPath.setAttribute("d", rest);
+    }
+
+    scheduleRefresh();
+  }
+
+  function startFooterBounce() {
+    initFooterBounce();
+  }
+
+  if (typeof window !== "undefined" && "ResizeObserver" in window) {
+    const bodyResizeObserver = new ResizeObserver(() => {
+      scheduleRefresh();
+    });
+    if (document.body) {
+      bodyResizeObserver.observe(document.body);
+    } else {
+      document.addEventListener("DOMContentLoaded", () => {
+        bodyResizeObserver.observe(document.body);
+      });
+    }
+  }
+
+  window.addEventListener("synthex:lang-changed", () => {
+    scheduleRefresh();
+    setTimeout(scheduleRefresh, 120);
+  });
+
+  window.addEventListener("resize", scheduleRefresh);
+
+  document.addEventListener(
+    "toggle",
+    (e) => {
+      if ((e.target as HTMLElement)?.tagName === "DETAILS") {
+        scheduleRefresh();
+      }
+    },
+    true,
+  );
+
+  if (
+    (window as any).__synthexPageReady ||
+    sessionStorage.getItem("synthex_preloaded_session")
+  ) {
+    startFooterBounce();
+  } else {
+    window.addEventListener("synthex:page-ready", startFooterBounce, {
+      once: true,
+    });
+  }
+
+  document.addEventListener("astro:page-load", () => {
+    startFooterBounce();
+  });
+</script>

package/dist/astro/components/HelpTooltip.astro

@@ -1,119 +1,239 @@
----
-interface Props {
-  title: string;
-  description: string;
-  titleKey?: string;
-  descKey?: string;
-  align?: 'left' | 'center' | 'right';
-  className?: string;
-}
-
-const {
-  title,
-  description,
-  titleKey,
-  descKey,
-  align = 'center',
-  className = '',
-} = Astro.props;
-
-const alignClasses = {
-  left: 'left-0 translate-x-0',
-  center: 'left-1/2 -translate-x-1/2',
-  right: 'right-0 translate-x-0',
-}[align];
-
-const arrowAlignClasses = {
-  left: 'left-3',
-  center: 'left-1/2 -translate-x-1/2',
-  right: 'right-3',
-}[align];
----
-
-<span class={`relative inline-flex items-center group/bubble ml-1.5 align-middle group-hover/bubble:z-50 group-focus-within/bubble:z-50 ${className}`}>
-  <button
-    type="button"
-    class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-brand-pistachio/20 text-white/70 hover:text-brand-pistachio border border-white/20 hover:border-brand-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-brand-pistachio"
-    aria-label={`${title}: ${description}`}
-  >
-    ?
-  </button>
-
-  <!-- Popover Flotante Accesible (Hover & Focus) con fondo sólido opaco y contención -->
-  <span
-    role="tooltip"
-    class={`info-bubble-tooltip absolute bottom-full ${alignClasses} mb-2.5 w-64 sm:w-72 p-3.5 rounded-xl bg-charcoal border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 translate-y-1 group-hover/bubble:opacity-100 group-hover/bubble:pointer-events-auto group-hover/bubble:translate-y-0 group-focus-within/bubble:opacity-100 group-focus-within/bubble:pointer-events-auto group-focus-within/bubble:translate-y-0 transition-all duration-200 backdrop-blur-xl`}
-  >
-    <span class="block text-xs font-display font-bold text-brand-pistachio mb-1" data-i18n={titleKey}>
-      {title}
-    </span>
-    <span class="block text-xs font-body text-white/90 leading-relaxed" data-i18n={descKey}>
-      {description}
-    </span>
-
-    <!-- Flecha indicadora inferior -->
-    <span
-      class={`info-bubble-arrow absolute top-full ${arrowAlignClasses} -mt-[1px] border-4 border-transparent border-t-charcoal`}
-    ></span>
-  </span>
-</span>
-
-<script>
-  function initHelpTooltips() {
-    const triggers = document.querySelectorAll<HTMLElement>('.info-bubble-trigger');
-
-    triggers.forEach((trigger) => {
-      if ((trigger as any).__infoBubbleBound) return;
-      (trigger as any).__infoBubbleBound = true;
-
-      const tooltip = trigger.parentElement?.querySelector<HTMLElement>('.info-bubble-tooltip');
-      if (!tooltip) return;
-
-      function repositionTooltip() {
-        if (!tooltip) return;
-        tooltip.style.removeProperty('left');
-        tooltip.style.removeProperty('right');
-        tooltip.style.removeProperty('transform');
-
-        requestAnimationFrame(() => {
-          const rect = tooltip.getBoundingClientRect();
-          const viewportWidth = window.innerWidth;
-          const margin = 16;
-
-          // Corrección si se sale por la derecha
-          if (rect.right > viewportWidth - margin) {
-            const overflow = rect.right - viewportWidth + margin;
-            tooltip.style.transform = `translateX(-${overflow}px)`;
-          } else if (rect.left < margin) {
-            const overflow = margin - rect.left;
-            tooltip.style.transform = `translateX(${overflow}px)`;
-          }
-
-          // Inversión vertical si no cabe por arriba
-          const arrow = tooltip.querySelector<HTMLElement>('.info-bubble-arrow');
-          if (rect.top < 60) {
-            tooltip.classList.remove('bottom-full', 'mb-2.5');
-            tooltip.classList.add('top-full', 'mt-2.5');
-            if (arrow) {
-              arrow.classList.remove('top-full', '-mt-[1px]', 'border-t-charcoal');
-              arrow.classList.add('bottom-full', '-mb-[1px]', 'border-b-charcoal');
-            }
-          } else {
-            tooltip.classList.remove('top-full', 'mt-2.5');
-            tooltip.classList.add('bottom-full', 'mb-2.5');
-            if (arrow) {
-              arrow.classList.remove('bottom-full', '-mb-[1px]', 'border-b-charcoal');
-              arrow.classList.add('top-full', '-mt-[1px]', 'border-t-charcoal');
-            }
-          }
-        });
-      }
-
-      trigger.addEventListener('mouseenter', repositionTooltip);
-      trigger.addEventListener('focus', repositionTooltip);
-    });
-  }
-
-  initHelpTooltips();
-  document.addEventListener('astro:page-load', initHelpTooltips);
-</script>
+---
+interface Props {
+  title: string;
+  description: string;
+  titleKey?: string;
+  descKey?: string;
+  align?: 'left' | 'center' | 'right';
+  className?: string;
+}
+
+const {
+  title,
+  description,
+  titleKey,
+  descKey,
+  align = 'center',
+  className = '',
+} = Astro.props;
+---
+
+<span
+  class={`relative inline-flex items-center group/bubble ml-1.5 align-middle ${className}`}
+  data-align={align}
+>
+  <button
+    type="button"
+    class="info-bubble-trigger w-4 h-4 rounded-full bg-white/10 hover:bg-pistachio/20 text-white/70 hover:text-pistachio border border-white/20 hover:border-pistachio/40 text-xs font-mono font-bold inline-flex items-center justify-center cursor-help transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-pistachio shrink-0 select-none"
+    aria-label={`${title}: ${description}`}
+    aria-expanded="false"
+  >
+    ?
+  </button>
+
+  <!-- Popover Flotante Accesible (Hover, Focus & Click/Tap): sale justo arriba a 8px sin tapar el botón ? -->
+  <span
+    role="tooltip"
+    class="info-bubble-tooltip absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 w-64 sm:w-72 max-w-[calc(100vw-32px)] p-3.5 rounded-xl border border-white/20 text-left shadow-2xl z-[100] pointer-events-none opacity-0 invisible transition-opacity duration-200"
+  >
+    <span class="block text-xs font-display font-bold text-pistachio mb-1" data-i18n={titleKey}>
+      {title}
+    </span>
+    <span class="block text-xs font-body text-white/90 leading-relaxed" data-i18n={descKey}>
+      {description}
+    </span>
+
+    <!-- Flecha indicadora apuntando al botón ? -->
+    <span
+      class="info-bubble-arrow absolute top-full left-1/2 -translate-x-1/2 -mt-[1px] border-[5px] border-transparent border-t-[#141414] pointer-events-none"
+    ></span>
+  </span>
+</span>
+
+<style is:global>
+  /* Visibilidad y z-index garantizados independientemente de Tailwind */
+  .group\/bubble:hover .info-bubble-tooltip,
+  .group\/bubble:focus-within .info-bubble-tooltip,
+  .group\/bubble[data-state="open"] .info-bubble-tooltip,
+  .group\/bubble.is-open .info-bubble-tooltip {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+  }
+
+  .group\/bubble:hover,
+  .group\/bubble:focus-within,
+  .group\/bubble[data-state="open"],
+  .group\/bubble.is-open {
+    z-index: 60 !important;
+  }
+
+  .info-bubble-tooltip {
+    background-color: #141414 !important;
+  }
+
+  /* Inversión vertical automática si no cabe por arriba */
+  .info-bubble-tooltip.is-inverted {
+    bottom: auto !important;
+    top: calc(100% + 8px) !important;
+  }
+
+  .info-bubble-arrow {
+    border-top-color: #141414 !important;
+  }
+
+  .info-bubble-tooltip.is-inverted .info-bubble-arrow {
+    top: auto !important;
+    bottom: 100% !important;
+    margin-top: 0 !important;
+    margin-bottom: -1px !important;
+    border-top-color: transparent !important;
+    border-bottom-color: #141414 !important;
+  }
+</style>
+
+<script>
+  function setupHelpTooltipSystem() {
+    if ((window as any).__synthexHelpTooltipInitialized) return;
+    (window as any).__synthexHelpTooltipInitialized = true;
+
+    let activeBubble: HTMLElement | null = null;
+
+    function closeActiveBubble() {
+      if (activeBubble) {
+        activeBubble.removeAttribute('data-state');
+        activeBubble.classList.remove('is-open');
+        const trigger = activeBubble.querySelector<HTMLButtonElement>('.info-bubble-trigger');
+        if (trigger) trigger.setAttribute('aria-expanded', 'false');
+        activeBubble = null;
+      }
+    }
+
+    function reposition(bubble: HTMLElement) {
+      const trigger = bubble.querySelector<HTMLElement>('.info-bubble-trigger');
+      const tooltip = bubble.querySelector<HTMLElement>('.info-bubble-tooltip');
+      const arrow = bubble.querySelector<HTMLElement>('.info-bubble-arrow');
+      if (!trigger || !tooltip) return;
+
+      // 1. Reset base
+      tooltip.classList.remove('is-inverted');
+      tooltip.style.left = '50%';
+      tooltip.style.transform = 'translateX(-50%)';
+      if (arrow) {
+        arrow.style.left = '50%';
+        arrow.style.transform = 'translateX(-50%)';
+      }
+
+      // 2. Medir cotas en el viewport
+      const triggerRect = trigger.getBoundingClientRect();
+      const tooltipRect = tooltip.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const margin = 16;
+
+      // 3. Comprobar si cabe verticalmente arriba (mínimo 60px libres desde el top)
+      if (triggerRect.top - tooltipRect.height - 12 < 60) {
+        tooltip.classList.add('is-inverted');
+      }
+
+      // 4. Cálculo horizontal para no salirse de los límites de la pantalla
+      const triggerCenterX = triggerRect.left + (triggerRect.width / 2);
+      const idealLeft = triggerCenterX - (tooltipRect.width / 2);
+      const idealRight = idealLeft + tooltipRect.width;
+
+      let shiftX = 0;
+      if (idealRight > viewportWidth - margin) {
+        shiftX = (viewportWidth - margin) - idealRight;
+      } else if (idealLeft < margin) {
+        shiftX = margin - idealLeft;
+      }
+
+      if (shiftX !== 0) {
+        tooltip.style.transform = `translateX(calc(-50% + ${shiftX}px))`;
+
+        // Mantener la flecha apuntando exactamente al centro del botón ?
+        if (arrow) {
+          const arrowLeft = (tooltipRect.width / 2) - shiftX;
+          const clampedArrowLeft = Math.max(14, Math.min(tooltipRect.width - 14, arrowLeft));
+          arrow.style.left = `${clampedArrowLeft}px`;
+          arrow.style.transform = 'translateX(-50%)';
+        }
+      }
+    }
+
+    // Delegación universal de Clic / Tap
+    document.addEventListener('click', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+
+      if (trigger) {
+        e.preventDefault();
+        e.stopPropagation();
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (!bubble) return;
+
+        const isOpen = bubble.getAttribute('data-state') === 'open' || bubble.classList.contains('is-open');
+        closeActiveBubble();
+
+        if (!isOpen) {
+          bubble.setAttribute('data-state', 'open');
+          bubble.classList.add('is-open');
+          trigger.setAttribute('aria-expanded', 'true');
+          activeBubble = bubble;
+          reposition(bubble);
+        }
+        return;
+      }
+
+      // Si se hace clic dentro del tooltip, mantenerlo abierto
+      if (target?.closest('.info-bubble-tooltip')) {
+        return;
+      }
+
+      // Clic fuera -> cerrar
+      closeActiveBubble();
+    });
+
+    // Delegación universal de Hover (MouseEnter & MouseOver en fase de captura)
+    document.addEventListener('mouseover', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+      if (trigger) {
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (bubble) reposition(bubble);
+      }
+    }, true);
+
+    // Delegación universal de Foco Accesible
+    document.addEventListener('focusin', (e) => {
+      const target = e.target as HTMLElement | null;
+      const trigger = target?.closest<HTMLButtonElement>('.info-bubble-trigger');
+      if (trigger) {
+        const bubble = trigger.closest<HTMLElement>('.group\\/bubble');
+        if (bubble) reposition(bubble);
+      }
+    });
+
+    // Cierre accesible con tecla Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        closeActiveBubble();
+      }
+    });
+
+    // Recalcular o cerrar en scroll/resize
+    window.addEventListener('resize', () => {
+      if (activeBubble) reposition(activeBubble);
+    }, { passive: true });
+
+    window.addEventListener('scroll', () => {
+      if (activeBubble) closeActiveBubble();
+    }, { passive: true });
+  }
+
+  setupHelpTooltipSystem();
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', setupHelpTooltipSystem);
+  }
+  document.addEventListener('astro:page-load', setupHelpTooltipSystem);
+  window.addEventListener('synthex:page-ready', setupHelpTooltipSystem);
+</script>