@walrosproject/ui 0.1.0 → 0.2.0

package/README.md

@@ -103,3 +103,51 @@ Usa `minor` para nuevas funciones compatibles y `major` para cambios incompatibl
 
 El código y los recursos se distribuyen bajo los términos indicados en `LICENSE`.
 WalrOS, su nombre y sus recursos gráficos siguen siendo propiedad de Alexander Calle.
+
+## Transición oficial de tema
+
+Cada producto diseña su propio botón, pero todos disparan la misma animación:
+
+```tsx
+import {
+  WalrosThemeGlitch,
+  useWalrosTheme,
+} from "@walrosproject/ui";
+
+export default function App() {
+  const {
+    theme,
+    isDark,
+    mounted,
+    glitching,
+    toggleTheme,
+  } = useWalrosTheme();
+
+  if (!mounted) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={toggleTheme}
+        disabled={glitching}
+        style={{
+          background: isDark ? "#1d4ed8" : "#06b6d4",
+          color: "#fff",
+        }}
+      >
+        Cambiar tema
+      </button>
+
+      <WalrosThemeGlitch active={glitching} />
+
+      <main>Tema actual: {theme}</main>
+    </>
+  );
+}
+```
+
+El hook aplica por defecto la clase `dark` en `document.documentElement`,
+guarda el valor en `localStorage` con la clave `walros-theme` y conserva los
+tiempos oficiales de WalrOS Forum: cambio a los 220 ms y final a los 720 ms.
+

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ImgHTMLAttributes } from 'react';
+import { ImgHTMLAttributes, CSSProperties } from 'react';
 
 type WalrosPortalTransitionProps = {
     duration?: number;
@@ -25,4 +25,31 @@ declare const walrosLogoChromeUrl: string;
 declare const walrosWordmarkLightUrl: string;
 declare const walrosWordmarkDarkUrl: string;
 
-export { WalrosLogo, type WalrosLogoProps, WalrosPortalTransition, type WalrosPortalTransitionProps, WalrosWordmark, type WalrosWordmarkProps, walrosLogoChromeUrl, walrosPortalSilhouetteUrl, walrosWordmarkDarkUrl, walrosWordmarkLightUrl };
+type WalrosThemeGlitchProps = {
+    active: boolean;
+    zIndex?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function WalrosThemeGlitch({ active, zIndex, className, style, }: WalrosThemeGlitchProps): react.JSX.Element;
+
+type WalrosTheme = "light" | "dark";
+type UseWalrosThemeOptions = {
+    storageKey?: string;
+    defaultTheme?: WalrosTheme;
+    useSystemPreference?: boolean;
+    swapDelay?: number;
+    totalDuration?: number;
+    applyTheme?: (theme: WalrosTheme) => void;
+};
+type UseWalrosThemeResult = {
+    theme: WalrosTheme;
+    isDark: boolean;
+    mounted: boolean;
+    glitching: boolean;
+    toggleTheme: () => void;
+    setTheme: (theme: WalrosTheme) => void;
+};
+declare function useWalrosTheme({ storageKey, defaultTheme, useSystemPreference, swapDelay, totalDuration, applyTheme, }?: UseWalrosThemeOptions): UseWalrosThemeResult;
+
+export { type UseWalrosThemeOptions, type UseWalrosThemeResult, WalrosLogo, type WalrosLogoProps, WalrosPortalTransition, type WalrosPortalTransitionProps, type WalrosTheme, WalrosThemeGlitch, type WalrosThemeGlitchProps, WalrosWordmark, type WalrosWordmarkProps, useWalrosTheme, walrosLogoChromeUrl, walrosPortalSilhouetteUrl, walrosWordmarkDarkUrl, walrosWordmarkLightUrl };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { useState, useRef, useId, useEffect, useLayoutEffect } from 'react';
+import { useState, useRef, useId, useEffect, useLayoutEffect, useCallback } from 'react';
 import { gsap } from 'gsap';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/WalrosPortalTransition.tsx
 
@@ -414,7 +414,228 @@ function WalrosWordmark({
     }
   );
 }
+var GLITCH_STYLES = `
+.walros-theme-glitch-root {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.walros-theme-glitch-root::before,
+.walros-theme-glitch-root::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  mix-blend-mode: screen;
+}
+.walros-theme-glitch-root::before {
+  background:
+    repeating-linear-gradient(
+      0deg,
+      transparent 0 2px,
+      rgba(59, 130, 246, 0.35) 2px 3px,
+      transparent 3px 5px,
+      rgba(236, 72, 153, 0.28) 5px 6px
+    );
+  animation: walros-glitch-scan 700ms steps(14) forwards;
+}
+.walros-theme-glitch-root::after {
+  background:
+    linear-gradient(
+      90deg,
+      rgba(6, 182, 212, 0.5),
+      transparent 40%,
+      transparent 60%,
+      rgba(236, 72, 153, 0.5)
+    );
+  animation: walros-glitch-slice 700ms steps(10) forwards;
+}
+
+@keyframes walros-glitch-scan {
+  0%   { transform: translate(0, 0); opacity: 1; }
+  15%  { transform: translate(-10px, 6px); opacity: 0.9; }
+  30%  { transform: translate(8px, -4px); opacity: 1; }
+  45%  { transform: translate(-6px, 3px); opacity: 0.85; }
+  60%  { transform: translate(4px, -8px); opacity: 1; }
+  80%  { transform: translate(-3px, 4px); opacity: 0.6; }
+  100% { transform: translate(0, 0); opacity: 0; }
+}
+
+@keyframes walros-glitch-slice {
+  0%   { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }
+  15%  { clip-path: inset(20% 0 55% 0); transform: translate(-12px, 0); }
+  30%  { clip-path: inset(60% 0 12% 0); transform: translate(14px, 0); }
+  45%  { clip-path: inset(35% 0 40% 0); transform: translate(-10px, 0); }
+  60%  { clip-path: inset(10% 0 75% 0); transform: translate(8px, 0); }
+  75%  { clip-path: inset(72% 0 5% 0); transform: translate(-6px, 0); }
+  90%  { clip-path: inset(25% 0 60% 0); transform: translate(4px, 0); opacity: 0.7; }
+  100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }
+}
+
+.walros-theme-glitch-page {
+  animation: walros-glitch-page 500ms steps(8) both;
+}
+
+@keyframes walros-glitch-page {
+  0%   { transform: translate(0, 0); filter: none; }
+  20%  { transform: translate(-4px, 2px); filter: hue-rotate(40deg) contrast(1.15); }
+  40%  { transform: translate(5px, -3px); filter: hue-rotate(-30deg) saturate(1.4); }
+  60%  { transform: translate(-3px, 4px); filter: hue-rotate(90deg) contrast(1.1); }
+  80%  { transform: translate(2px, -2px); filter: hue-rotate(-60deg) saturate(1.2); }
+  100% { transform: translate(0, 0); filter: none; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .walros-theme-glitch-root::before,
+  .walros-theme-glitch-root::after {
+    animation: walros-glitch-reduced 150ms ease-out forwards;
+  }
+  .walros-theme-glitch-page {
+    animation: none;
+  }
+  @keyframes walros-glitch-reduced {
+    from { opacity: 0.35; }
+    to { opacity: 0; }
+  }
+}
+`;
+function WalrosThemeGlitch({
+  active,
+  zIndex = 9998,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: GLITCH_STYLES }),
+    active ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["walros-theme-glitch-root", className].filter(Boolean).join(" "),
+        style: { zIndex, ...style },
+        "aria-hidden": "true"
+      }
+    ) : null
+  ] });
+}
+function defaultApplyTheme(theme) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.classList.toggle("dark", theme === "dark");
+  root.style.colorScheme = theme;
+}
+function readInitialTheme(storageKey, defaultTheme, useSystemPreference) {
+  if (typeof window === "undefined") return defaultTheme;
+  try {
+    const stored = window.localStorage.getItem(storageKey);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  if (useSystemPreference && window.matchMedia?.("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return defaultTheme;
+}
+function useWalrosTheme({
+  storageKey = "walros-theme",
+  defaultTheme = "light",
+  useSystemPreference = false,
+  swapDelay = 220,
+  totalDuration = 720,
+  applyTheme = defaultApplyTheme
+} = {}) {
+  const [theme, setThemeState] = useState(
+    () => readInitialTheme(storageKey, defaultTheme, useSystemPreference)
+  );
+  const [mounted, setMounted] = useState(false);
+  const [glitching, setGlitching] = useState(false);
+  const themeRef = useRef(theme);
+  const glitchingRef = useRef(false);
+  const swapTimerRef = useRef(null);
+  const cleanupTimerRef = useRef(null);
+  const applyThemeRef = useRef(applyTheme);
+  themeRef.current = theme;
+  applyThemeRef.current = applyTheme;
+  const persistTheme = useCallback(
+    (nextTheme) => {
+      applyThemeRef.current(nextTheme);
+      setThemeState(nextTheme);
+      themeRef.current = nextTheme;
+      try {
+        window.localStorage.setItem(storageKey, nextTheme);
+      } catch {
+      }
+    },
+    [storageKey]
+  );
+  useEffect(() => {
+    const initialTheme = readInitialTheme(
+      storageKey,
+      defaultTheme,
+      useSystemPreference
+    );
+    themeRef.current = initialTheme;
+    setThemeState(initialTheme);
+    applyThemeRef.current(initialTheme);
+    setMounted(true);
+  }, [defaultTheme, storageKey, useSystemPreference]);
+  const clearTimers = useCallback(() => {
+    if (swapTimerRef.current !== null) {
+      window.clearTimeout(swapTimerRef.current);
+      swapTimerRef.current = null;
+    }
+    if (cleanupTimerRef.current !== null) {
+      window.clearTimeout(cleanupTimerRef.current);
+      cleanupTimerRef.current = null;
+    }
+  }, []);
+  const finishGlitch = useCallback(() => {
+    document.body.classList.remove("walros-theme-glitch-page");
+    glitchingRef.current = false;
+    setGlitching(false);
+  }, []);
+  const setTheme = useCallback(
+    (nextTheme) => {
+      if (glitchingRef.current) return;
+      persistTheme(nextTheme);
+    },
+    [persistTheme]
+  );
+  const toggleTheme = useCallback(() => {
+    if (typeof window === "undefined" || glitchingRef.current) return;
+    glitchingRef.current = true;
+    setGlitching(true);
+    const reducedMotion = window.matchMedia?.(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    if (!reducedMotion) {
+      document.body.classList.add("walros-theme-glitch-page");
+    }
+    const nextTheme = themeRef.current === "dark" ? "light" : "dark";
+    swapTimerRef.current = window.setTimeout(() => {
+      persistTheme(nextTheme);
+      swapTimerRef.current = null;
+    }, reducedMotion ? 75 : swapDelay);
+    cleanupTimerRef.current = window.setTimeout(() => {
+      cleanupTimerRef.current = null;
+      finishGlitch();
+    }, reducedMotion ? 150 : totalDuration);
+  }, [finishGlitch, persistTheme, swapDelay, totalDuration]);
+  useEffect(() => {
+    return () => {
+      clearTimers();
+      document.body.classList.remove("walros-theme-glitch-page");
+    };
+  }, [clearTimers]);
+  return {
+    theme,
+    isDark: theme === "dark",
+    mounted,
+    glitching,
+    toggleTheme,
+    setTheme
+  };
+}
 
-export { WalrosLogo, WalrosPortalTransition, WalrosWordmark, walrosLogoChromeUrl, walrosPortalSilhouetteUrl, walrosWordmarkDarkUrl, walrosWordmarkLightUrl };
+export { WalrosLogo, WalrosPortalTransition, WalrosThemeGlitch, WalrosWordmark, useWalrosTheme, walrosLogoChromeUrl, walrosPortalSilhouetteUrl, walrosWordmarkDarkUrl, walrosWordmarkLightUrl };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/assets.ts","../src/components/WalrosPortalTransition.tsx","../src/components/WalrosLogo.tsx","../src/components/WalrosWordmark.tsx"],"names":["initialPixels","initialScale","jsx"],"mappings":"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","file":"index.js","sourcesContent":["export const walrosPortalSilhouetteUrl = new URL(\n  \"./assets/walros-portal-silhouette.svg\",\n  import.meta.url,\n).href;\n\nexport const walrosLogoChromeUrl = new URL(\n  \"./assets/walros-logo-chrome.png\",\n  import.meta.url,\n).href;\n\nexport const walrosWordmarkLightUrl = new URL(\n  \"./assets/walros-wordmark-light.png\",\n  import.meta.url,\n).href;\n\nexport const walrosWordmarkDarkUrl = new URL(\n  \"./assets/walros-wordmark-dark.png\",\n  import.meta.url,\n).href;\n","import {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { gsap } from \"gsap\";\nimport { walrosPortalSilhouetteUrl } from \"../assets\";\n\nexport type WalrosPortalTransitionProps = {\n  duration?: number;\n  onComplete?: () => void;\n  backgroundColor?: string;\n  enabled?: boolean;\n  storageMode?: \"always\" | \"session\" | \"once\";\n  storageKey?: string;\n  zIndex?: number;\n};\n\nconst SILHOUETTE_VIEWBOX = 1254;\nconst FOCUS_X = 626;\nconst FOCUS_Y = 333;\nconst PORTAL_RADIUS = 190;\n\nfunction getStorage(mode: \"session\" | \"once\"): Storage | null {\n  if (typeof window === \"undefined\") return null;\n\n  try {\n    const storage =\n      mode === \"session\"\n        ? window.sessionStorage\n        : window.localStorage;\n    const testKey = \"__walros_portal_test__\";\n    storage.setItem(testKey, \"1\");\n    storage.removeItem(testKey);\n    return storage;\n  } catch {\n    return null;\n  }\n}\n\nfunction shouldRunTransition(\n  enabled: boolean,\n  storageMode: \"always\" | \"session\" | \"once\",\n  storageKey: string,\n): boolean {\n  if (!enabled) return false;\n  if (storageMode === \"always\") return true;\n  if (typeof window === \"undefined\") return false;\n\n  const storage = getStorage(storageMode);\n  if (!storage) return true;\n\n  try {\n    return storage.getItem(storageKey) == null;\n  } catch {\n    return true;\n  }\n}\n\nexport function WalrosPortalTransition({\n  duration = 750,\n  onComplete,\n  backgroundColor = \"#02050b\",\n  enabled = true,\n  storageMode = \"always\",\n  storageKey = \"walros-portal-seen\",\n  zIndex = 9999,\n}: WalrosPortalTransitionProps) {\n  const [shouldRun] = useState(() =>\n    shouldRunTransition(enabled, storageMode, storageKey),\n  );\n  const [visible, setVisible] = useState(shouldRun);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const maskScaleRef = useRef<SVGGElement | null>(null);\n  const glowScaleRef = useRef<SVGGElement | null>(null);\n  const completedRef = useRef(false);\n  const startedRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n  const timelineRef = useRef<gsap.core.Timeline | null>(null);\n  const previousOverflowRef = useRef(\"\");\n\n  const uid = useId().replace(/[:]/g, \"_\");\n  const maskId = `walros-portal-mask-${uid}`;\n  const glowFilterId = `walros-portal-glow-${uid}`;\n\n  useEffect(() => {\n    if (!visible) return;\n\n    const element = overlayRef.current;\n    if (!element) return;\n\n    const measure = () => {\n      const rect = element.getBoundingClientRect();\n      setSize((previous) =>\n        previous.w === rect.width && previous.h === rect.height\n          ? previous\n          : { w: rect.width, h: rect.height },\n      );\n    };\n\n    measure();\n\n    const observer =\n      typeof ResizeObserver !== \"undefined\"\n        ? new ResizeObserver(measure)\n        : null;\n\n    observer?.observe(element);\n    window.addEventListener(\"resize\", measure);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    if (!enabled) {\n      setVisible(false);\n      return;\n    }\n\n    if (!visible) return;\n    if (completedRef.current || startedRef.current) return;\n    if (size.w <= 0 || size.h <= 0) return;\n\n    const overlay = overlayRef.current;\n    const maskScale = maskScaleRef.current;\n    const glowScale = glowScaleRef.current;\n\n    if (!overlay || !maskScale) return;\n\n    startedRef.current = true;\n    previousOverflowRef.current = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    const finish = () => {\n      if (completedRef.current) return;\n\n      completedRef.current = true;\n      document.body.style.overflow = previousOverflowRef.current;\n\n      if (storageMode !== \"always\") {\n        const storage = getStorage(storageMode);\n        try {\n          storage?.setItem(storageKey, \"1\");\n        } catch {\n          // El modo privado o una cuota llena no deben romper la web.\n        }\n      }\n\n      setVisible(false);\n      onComplete?.();\n    };\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n\n    if (reducedMotion) {\n      const timeline = gsap.timeline({ onComplete: finish });\n      timelineRef.current = timeline;\n      timeline.to(overlay, {\n        opacity: 0,\n        duration: 0.15,\n        ease: \"power1.out\",\n      });\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n\n      const halfDiagonal =\n        Math.sqrt(size.w * size.w + size.h * size.h) / 2;\n      const initialPixels = Math.min(\n        180,\n        Math.max(120, size.w * 0.12),\n      );\n      const initialScale =\n        initialPixels / SILHOUETTE_VIEWBOX;\n      const finalScale =\n        ((halfDiagonal + 80) / PORTAL_RADIUS) * 1.15;\n\n      gsap.set(maskScale, {\n        svgOrigin: \"0 0\",\n        scale: initialScale,\n      });\n\n      if (glowScale) {\n        gsap.set(glowScale, {\n          svgOrigin: \"0 0\",\n          scale: initialScale,\n          opacity: 0.85,\n        });\n      }\n\n      gsap.set(overlay, { opacity: 1 });\n\n      const totalSeconds = duration / 1000;\n      const timeline = gsap.timeline({ onComplete: finish });\n      timelineRef.current = timeline;\n\n      timeline.to(\n        maskScale,\n        {\n          scale: initialScale * 1.4,\n          duration: totalSeconds * 0.15,\n          ease: \"power2.out\",\n        },\n        0,\n      );\n\n      if (glowScale) {\n        timeline.to(\n          glowScale,\n          {\n            scale: initialScale * 1.4,\n            opacity: 1,\n            duration: totalSeconds * 0.15,\n            ease: \"power2.out\",\n          },\n          0,\n        );\n      }\n\n      timeline.to(\n        maskScale,\n        {\n          scale: finalScale,\n          duration: totalSeconds * 0.85,\n          ease: \"power2.in\",\n        },\n        totalSeconds * 0.15,\n      );\n\n      if (glowScale) {\n        timeline.to(\n          glowScale,\n          {\n            scale: finalScale * 0.9,\n            opacity: 0,\n            duration: totalSeconds * 0.4,\n            ease: \"power2.in\",\n          },\n          totalSeconds * 0.45,\n        );\n      }\n\n      timeline.to(\n        overlay,\n        {\n          opacity: 0,\n          duration: totalSeconds * 0.1,\n          ease: \"power2.out\",\n        },\n        totalSeconds * 0.9,\n      );\n    });\n  }, [\n    duration,\n    enabled,\n    onComplete,\n    size,\n    storageKey,\n    storageMode,\n    visible,\n  ]);\n\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      timelineRef.current?.kill();\n\n      if (startedRef.current && !completedRef.current) {\n        document.body.style.overflow =\n          previousOverflowRef.current;\n      }\n    };\n  }, []);\n\n  if (!shouldRun || !visible) return null;\n\n  const { w, h } = size;\n  const ready = w > 0 && h > 0;\n\n  const viewportCenterX = w / 2;\n  const viewportCenterY = h / 2;\n  const initialPixels = Math.min(\n    180,\n    Math.max(120, w * 0.12),\n  );\n  const initialScale =\n    initialPixels / SILHOUETTE_VIEWBOX;\n  const visualCenter = SILHOUETTE_VIEWBOX / 2;\n  const initialOffsetX =\n    (visualCenter - FOCUS_X) * initialScale;\n  const initialOffsetY =\n    (visualCenter - FOCUS_Y) * initialScale;\n  const portalCenterX =\n    viewportCenterX - initialOffsetX;\n  const portalCenterY =\n    viewportCenterY - initialOffsetY;\n\n  return (\n    <div\n      ref={overlayRef}\n      aria-hidden=\"true\"\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        width: \"100vw\",\n        height: \"100dvh\",\n        zIndex,\n        pointerEvents: \"none\",\n        overflow: \"hidden\",\n        backgroundColor: ready\n          ? \"transparent\"\n          : backgroundColor,\n      }}\n    >\n      {ready && (\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox={`0 0 ${w} ${h}`}\n          preserveAspectRatio=\"none\"\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"block\",\n          }}\n        >\n          <defs>\n            <filter\n              id={glowFilterId}\n              x=\"-50%\"\n              y=\"-50%\"\n              width=\"200%\"\n              height=\"200%\"\n            >\n              <feGaussianBlur stdDeviation=\"28\" />\n            </filter>\n\n            <mask\n              id={maskId}\n              maskUnits=\"userSpaceOnUse\"\n              x=\"0\"\n              y=\"0\"\n              width={w}\n              height={h}\n            >\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width={w}\n                height={h}\n                fill=\"white\"\n              />\n\n              <g\n                transform={`translate(${portalCenterX} ${portalCenterY})`}\n              >\n                <g\n                  ref={maskScaleRef}\n                  transform={`scale(${initialScale})`}\n                >\n                  <image\n                    href={walrosPortalSilhouetteUrl}\n                    x={-FOCUS_X}\n                    y={-FOCUS_Y}\n                    width={SILHOUETTE_VIEWBOX}\n                    height={SILHOUETTE_VIEWBOX}\n                  />\n                </g>\n              </g>\n            </mask>\n          </defs>\n\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width={w}\n            height={h}\n            fill={backgroundColor}\n            mask={`url(#${maskId})`}\n          />\n\n          <g\n            transform={`translate(${portalCenterX} ${portalCenterY})`}\n            style={{\n              mixBlendMode: \"screen\",\n              pointerEvents: \"none\",\n            }}\n          >\n            <g\n              ref={glowScaleRef}\n              transform={`scale(${initialScale})`}\n              opacity=\"0.85\"\n            >\n              <g filter={`url(#${glowFilterId})`}>\n                <image\n                  href={walrosPortalSilhouetteUrl}\n                  x={-FOCUS_X}\n                  y={-FOCUS_Y}\n                  width={SILHOUETTE_VIEWBOX}\n                  height={SILHOUETTE_VIEWBOX}\n                  style={{\n                    filter:\n                      \"brightness(0) saturate(100%) invert(58%) sepia(94%) saturate(1352%) hue-rotate(182deg)\",\n                    opacity: 0.6,\n                  }}\n                />\n              </g>\n            </g>\n          </g>\n        </svg>\n      )}\n    </div>\n  );\n}\n\nexport default WalrosPortalTransition;\n","import type { ImgHTMLAttributes } from \"react\";\nimport { walrosLogoChromeUrl } from \"../assets\";\n\nexport type WalrosLogoProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\"\n>;\n\nexport function WalrosLogo({\n  alt = \"WalrOS\",\n  draggable = false,\n  ...props\n}: WalrosLogoProps) {\n  return (\n    <img\n      src={walrosLogoChromeUrl}\n      alt={alt}\n      draggable={draggable}\n      {...props}\n    />\n  );\n}\n\nexport default WalrosLogo;\n","import type { ImgHTMLAttributes } from \"react\";\nimport {\n  walrosWordmarkDarkUrl,\n  walrosWordmarkLightUrl,\n} from \"../assets\";\n\nexport type WalrosWordmarkProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\"\n> & {\n  variant?: \"light\" | \"dark\";\n};\n\nexport function WalrosWordmark({\n  variant = \"light\",\n  alt = \"WalrOS\",\n  draggable = false,\n  ...props\n}: WalrosWordmarkProps) {\n  const src =\n    variant === \"dark\"\n      ? walrosWordmarkDarkUrl\n      : walrosWordmarkLightUrl;\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      draggable={draggable}\n      {...props}\n    />\n  );\n}\n\nexport default WalrosWordmark;\n"]}
+{"version":3,"sources":["../src/assets.ts","../src/components/WalrosPortalTransition.tsx","../src/components/WalrosLogo.tsx","../src/components/WalrosWordmark.tsx","../src/components/WalrosThemeGlitch.tsx","../src/hooks/useWalrosTheme.ts"],"names":["initialPixels","initialScale","jsx","jsxs","useState","useRef","useEffect"],"mappings":"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","file":"index.js","sourcesContent":["export const walrosPortalSilhouetteUrl = new URL(\n  \"./assets/walros-portal-silhouette.svg\",\n  import.meta.url,\n).href;\n\nexport const walrosLogoChromeUrl = new URL(\n  \"./assets/walros-logo-chrome.png\",\n  import.meta.url,\n).href;\n\nexport const walrosWordmarkLightUrl = new URL(\n  \"./assets/walros-wordmark-light.png\",\n  import.meta.url,\n).href;\n\nexport const walrosWordmarkDarkUrl = new URL(\n  \"./assets/walros-wordmark-dark.png\",\n  import.meta.url,\n).href;\n","import {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { gsap } from \"gsap\";\nimport { walrosPortalSilhouetteUrl } from \"../assets\";\n\nexport type WalrosPortalTransitionProps = {\n  duration?: number;\n  onComplete?: () => void;\n  backgroundColor?: string;\n  enabled?: boolean;\n  storageMode?: \"always\" | \"session\" | \"once\";\n  storageKey?: string;\n  zIndex?: number;\n};\n\nconst SILHOUETTE_VIEWBOX = 1254;\nconst FOCUS_X = 626;\nconst FOCUS_Y = 333;\nconst PORTAL_RADIUS = 190;\n\nfunction getStorage(mode: \"session\" | \"once\"): Storage | null {\n  if (typeof window === \"undefined\") return null;\n\n  try {\n    const storage =\n      mode === \"session\"\n        ? window.sessionStorage\n        : window.localStorage;\n    const testKey = \"__walros_portal_test__\";\n    storage.setItem(testKey, \"1\");\n    storage.removeItem(testKey);\n    return storage;\n  } catch {\n    return null;\n  }\n}\n\nfunction shouldRunTransition(\n  enabled: boolean,\n  storageMode: \"always\" | \"session\" | \"once\",\n  storageKey: string,\n): boolean {\n  if (!enabled) return false;\n  if (storageMode === \"always\") return true;\n  if (typeof window === \"undefined\") return false;\n\n  const storage = getStorage(storageMode);\n  if (!storage) return true;\n\n  try {\n    return storage.getItem(storageKey) == null;\n  } catch {\n    return true;\n  }\n}\n\nexport function WalrosPortalTransition({\n  duration = 750,\n  onComplete,\n  backgroundColor = \"#02050b\",\n  enabled = true,\n  storageMode = \"always\",\n  storageKey = \"walros-portal-seen\",\n  zIndex = 9999,\n}: WalrosPortalTransitionProps) {\n  const [shouldRun] = useState(() =>\n    shouldRunTransition(enabled, storageMode, storageKey),\n  );\n  const [visible, setVisible] = useState(shouldRun);\n  const [size, setSize] = useState({ w: 0, h: 0 });\n\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n  const maskScaleRef = useRef<SVGGElement | null>(null);\n  const glowScaleRef = useRef<SVGGElement | null>(null);\n  const completedRef = useRef(false);\n  const startedRef = useRef(false);\n  const rafRef = useRef<number | null>(null);\n  const timelineRef = useRef<gsap.core.Timeline | null>(null);\n  const previousOverflowRef = useRef(\"\");\n\n  const uid = useId().replace(/[:]/g, \"_\");\n  const maskId = `walros-portal-mask-${uid}`;\n  const glowFilterId = `walros-portal-glow-${uid}`;\n\n  useEffect(() => {\n    if (!visible) return;\n\n    const element = overlayRef.current;\n    if (!element) return;\n\n    const measure = () => {\n      const rect = element.getBoundingClientRect();\n      setSize((previous) =>\n        previous.w === rect.width && previous.h === rect.height\n          ? previous\n          : { w: rect.width, h: rect.height },\n      );\n    };\n\n    measure();\n\n    const observer =\n      typeof ResizeObserver !== \"undefined\"\n        ? new ResizeObserver(measure)\n        : null;\n\n    observer?.observe(element);\n    window.addEventListener(\"resize\", measure);\n\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [visible]);\n\n  useLayoutEffect(() => {\n    if (!enabled) {\n      setVisible(false);\n      return;\n    }\n\n    if (!visible) return;\n    if (completedRef.current || startedRef.current) return;\n    if (size.w <= 0 || size.h <= 0) return;\n\n    const overlay = overlayRef.current;\n    const maskScale = maskScaleRef.current;\n    const glowScale = glowScaleRef.current;\n\n    if (!overlay || !maskScale) return;\n\n    startedRef.current = true;\n    previousOverflowRef.current = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n\n    const finish = () => {\n      if (completedRef.current) return;\n\n      completedRef.current = true;\n      document.body.style.overflow = previousOverflowRef.current;\n\n      if (storageMode !== \"always\") {\n        const storage = getStorage(storageMode);\n        try {\n          storage?.setItem(storageKey, \"1\");\n        } catch {\n          // El modo privado o una cuota llena no deben romper la web.\n        }\n      }\n\n      setVisible(false);\n      onComplete?.();\n    };\n\n    const reducedMotion = window.matchMedia(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n\n    if (reducedMotion) {\n      const timeline = gsap.timeline({ onComplete: finish });\n      timelineRef.current = timeline;\n      timeline.to(overlay, {\n        opacity: 0,\n        duration: 0.15,\n        ease: \"power1.out\",\n      });\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n\n      const halfDiagonal =\n        Math.sqrt(size.w * size.w + size.h * size.h) / 2;\n      const initialPixels = Math.min(\n        180,\n        Math.max(120, size.w * 0.12),\n      );\n      const initialScale =\n        initialPixels / SILHOUETTE_VIEWBOX;\n      const finalScale =\n        ((halfDiagonal + 80) / PORTAL_RADIUS) * 1.15;\n\n      gsap.set(maskScale, {\n        svgOrigin: \"0 0\",\n        scale: initialScale,\n      });\n\n      if (glowScale) {\n        gsap.set(glowScale, {\n          svgOrigin: \"0 0\",\n          scale: initialScale,\n          opacity: 0.85,\n        });\n      }\n\n      gsap.set(overlay, { opacity: 1 });\n\n      const totalSeconds = duration / 1000;\n      const timeline = gsap.timeline({ onComplete: finish });\n      timelineRef.current = timeline;\n\n      timeline.to(\n        maskScale,\n        {\n          scale: initialScale * 1.4,\n          duration: totalSeconds * 0.15,\n          ease: \"power2.out\",\n        },\n        0,\n      );\n\n      if (glowScale) {\n        timeline.to(\n          glowScale,\n          {\n            scale: initialScale * 1.4,\n            opacity: 1,\n            duration: totalSeconds * 0.15,\n            ease: \"power2.out\",\n          },\n          0,\n        );\n      }\n\n      timeline.to(\n        maskScale,\n        {\n          scale: finalScale,\n          duration: totalSeconds * 0.85,\n          ease: \"power2.in\",\n        },\n        totalSeconds * 0.15,\n      );\n\n      if (glowScale) {\n        timeline.to(\n          glowScale,\n          {\n            scale: finalScale * 0.9,\n            opacity: 0,\n            duration: totalSeconds * 0.4,\n            ease: \"power2.in\",\n          },\n          totalSeconds * 0.45,\n        );\n      }\n\n      timeline.to(\n        overlay,\n        {\n          opacity: 0,\n          duration: totalSeconds * 0.1,\n          ease: \"power2.out\",\n        },\n        totalSeconds * 0.9,\n      );\n    });\n  }, [\n    duration,\n    enabled,\n    onComplete,\n    size,\n    storageKey,\n    storageMode,\n    visible,\n  ]);\n\n  useEffect(() => {\n    return () => {\n      if (rafRef.current !== null) {\n        cancelAnimationFrame(rafRef.current);\n      }\n\n      timelineRef.current?.kill();\n\n      if (startedRef.current && !completedRef.current) {\n        document.body.style.overflow =\n          previousOverflowRef.current;\n      }\n    };\n  }, []);\n\n  if (!shouldRun || !visible) return null;\n\n  const { w, h } = size;\n  const ready = w > 0 && h > 0;\n\n  const viewportCenterX = w / 2;\n  const viewportCenterY = h / 2;\n  const initialPixels = Math.min(\n    180,\n    Math.max(120, w * 0.12),\n  );\n  const initialScale =\n    initialPixels / SILHOUETTE_VIEWBOX;\n  const visualCenter = SILHOUETTE_VIEWBOX / 2;\n  const initialOffsetX =\n    (visualCenter - FOCUS_X) * initialScale;\n  const initialOffsetY =\n    (visualCenter - FOCUS_Y) * initialScale;\n  const portalCenterX =\n    viewportCenterX - initialOffsetX;\n  const portalCenterY =\n    viewportCenterY - initialOffsetY;\n\n  return (\n    <div\n      ref={overlayRef}\n      aria-hidden=\"true\"\n      style={{\n        position: \"fixed\",\n        inset: 0,\n        width: \"100vw\",\n        height: \"100dvh\",\n        zIndex,\n        pointerEvents: \"none\",\n        overflow: \"hidden\",\n        backgroundColor: ready\n          ? \"transparent\"\n          : backgroundColor,\n      }}\n    >\n      {ready && (\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox={`0 0 ${w} ${h}`}\n          preserveAspectRatio=\"none\"\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            display: \"block\",\n          }}\n        >\n          <defs>\n            <filter\n              id={glowFilterId}\n              x=\"-50%\"\n              y=\"-50%\"\n              width=\"200%\"\n              height=\"200%\"\n            >\n              <feGaussianBlur stdDeviation=\"28\" />\n            </filter>\n\n            <mask\n              id={maskId}\n              maskUnits=\"userSpaceOnUse\"\n              x=\"0\"\n              y=\"0\"\n              width={w}\n              height={h}\n            >\n              <rect\n                x=\"0\"\n                y=\"0\"\n                width={w}\n                height={h}\n                fill=\"white\"\n              />\n\n              <g\n                transform={`translate(${portalCenterX} ${portalCenterY})`}\n              >\n                <g\n                  ref={maskScaleRef}\n                  transform={`scale(${initialScale})`}\n                >\n                  <image\n                    href={walrosPortalSilhouetteUrl}\n                    x={-FOCUS_X}\n                    y={-FOCUS_Y}\n                    width={SILHOUETTE_VIEWBOX}\n                    height={SILHOUETTE_VIEWBOX}\n                  />\n                </g>\n              </g>\n            </mask>\n          </defs>\n\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width={w}\n            height={h}\n            fill={backgroundColor}\n            mask={`url(#${maskId})`}\n          />\n\n          <g\n            transform={`translate(${portalCenterX} ${portalCenterY})`}\n            style={{\n              mixBlendMode: \"screen\",\n              pointerEvents: \"none\",\n            }}\n          >\n            <g\n              ref={glowScaleRef}\n              transform={`scale(${initialScale})`}\n              opacity=\"0.85\"\n            >\n              <g filter={`url(#${glowFilterId})`}>\n                <image\n                  href={walrosPortalSilhouetteUrl}\n                  x={-FOCUS_X}\n                  y={-FOCUS_Y}\n                  width={SILHOUETTE_VIEWBOX}\n                  height={SILHOUETTE_VIEWBOX}\n                  style={{\n                    filter:\n                      \"brightness(0) saturate(100%) invert(58%) sepia(94%) saturate(1352%) hue-rotate(182deg)\",\n                    opacity: 0.6,\n                  }}\n                />\n              </g>\n            </g>\n          </g>\n        </svg>\n      )}\n    </div>\n  );\n}\n\nexport default WalrosPortalTransition;\n","import type { ImgHTMLAttributes } from \"react\";\nimport { walrosLogoChromeUrl } from \"../assets\";\n\nexport type WalrosLogoProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\"\n>;\n\nexport function WalrosLogo({\n  alt = \"WalrOS\",\n  draggable = false,\n  ...props\n}: WalrosLogoProps) {\n  return (\n    <img\n      src={walrosLogoChromeUrl}\n      alt={alt}\n      draggable={draggable}\n      {...props}\n    />\n  );\n}\n\nexport default WalrosLogo;\n","import type { ImgHTMLAttributes } from \"react\";\nimport {\n  walrosWordmarkDarkUrl,\n  walrosWordmarkLightUrl,\n} from \"../assets\";\n\nexport type WalrosWordmarkProps = Omit<\n  ImgHTMLAttributes<HTMLImageElement>,\n  \"src\"\n> & {\n  variant?: \"light\" | \"dark\";\n};\n\nexport function WalrosWordmark({\n  variant = \"light\",\n  alt = \"WalrOS\",\n  draggable = false,\n  ...props\n}: WalrosWordmarkProps) {\n  const src =\n    variant === \"dark\"\n      ? walrosWordmarkDarkUrl\n      : walrosWordmarkLightUrl;\n\n  return (\n    <img\n      src={src}\n      alt={alt}\n      draggable={draggable}\n      {...props}\n    />\n  );\n}\n\nexport default WalrosWordmark;\n","import type { CSSProperties } from \"react\";\n\nexport type WalrosThemeGlitchProps = {\n  active: boolean;\n  zIndex?: number;\n  className?: string;\n  style?: CSSProperties;\n};\n\nconst GLITCH_STYLES = `\n.walros-theme-glitch-root {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  overflow: hidden;\n}\n.walros-theme-glitch-root::before,\n.walros-theme-glitch-root::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  mix-blend-mode: screen;\n}\n.walros-theme-glitch-root::before {\n  background:\n    repeating-linear-gradient(\n      0deg,\n      transparent 0 2px,\n      rgba(59, 130, 246, 0.35) 2px 3px,\n      transparent 3px 5px,\n      rgba(236, 72, 153, 0.28) 5px 6px\n    );\n  animation: walros-glitch-scan 700ms steps(14) forwards;\n}\n.walros-theme-glitch-root::after {\n  background:\n    linear-gradient(\n      90deg,\n      rgba(6, 182, 212, 0.5),\n      transparent 40%,\n      transparent 60%,\n      rgba(236, 72, 153, 0.5)\n    );\n  animation: walros-glitch-slice 700ms steps(10) forwards;\n}\n\n@keyframes walros-glitch-scan {\n  0%   { transform: translate(0, 0); opacity: 1; }\n  15%  { transform: translate(-10px, 6px); opacity: 0.9; }\n  30%  { transform: translate(8px, -4px); opacity: 1; }\n  45%  { transform: translate(-6px, 3px); opacity: 0.85; }\n  60%  { transform: translate(4px, -8px); opacity: 1; }\n  80%  { transform: translate(-3px, 4px); opacity: 0.6; }\n  100% { transform: translate(0, 0); opacity: 0; }\n}\n\n@keyframes walros-glitch-slice {\n  0%   { clip-path: inset(0 0 0 0); transform: translate(0, 0); opacity: 1; }\n  15%  { clip-path: inset(20% 0 55% 0); transform: translate(-12px, 0); }\n  30%  { clip-path: inset(60% 0 12% 0); transform: translate(14px, 0); }\n  45%  { clip-path: inset(35% 0 40% 0); transform: translate(-10px, 0); }\n  60%  { clip-path: inset(10% 0 75% 0); transform: translate(8px, 0); }\n  75%  { clip-path: inset(72% 0 5% 0); transform: translate(-6px, 0); }\n  90%  { clip-path: inset(25% 0 60% 0); transform: translate(4px, 0); opacity: 0.7; }\n  100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); opacity: 0; }\n}\n\n.walros-theme-glitch-page {\n  animation: walros-glitch-page 500ms steps(8) both;\n}\n\n@keyframes walros-glitch-page {\n  0%   { transform: translate(0, 0); filter: none; }\n  20%  { transform: translate(-4px, 2px); filter: hue-rotate(40deg) contrast(1.15); }\n  40%  { transform: translate(5px, -3px); filter: hue-rotate(-30deg) saturate(1.4); }\n  60%  { transform: translate(-3px, 4px); filter: hue-rotate(90deg) contrast(1.1); }\n  80%  { transform: translate(2px, -2px); filter: hue-rotate(-60deg) saturate(1.2); }\n  100% { transform: translate(0, 0); filter: none; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .walros-theme-glitch-root::before,\n  .walros-theme-glitch-root::after {\n    animation: walros-glitch-reduced 150ms ease-out forwards;\n  }\n  .walros-theme-glitch-page {\n    animation: none;\n  }\n  @keyframes walros-glitch-reduced {\n    from { opacity: 0.35; }\n    to { opacity: 0; }\n  }\n}\n`;\n\nexport function WalrosThemeGlitch({\n  active,\n  zIndex = 9998,\n  className,\n  style,\n}: WalrosThemeGlitchProps) {\n  return (\n    <>\n      <style>{GLITCH_STYLES}</style>\n      {active ? (\n        <div\n          className={[\"walros-theme-glitch-root\", className]\n            .filter(Boolean)\n            .join(\" \")}\n          style={{ zIndex, ...style }}\n          aria-hidden=\"true\"\n        />\n      ) : null}\n    </>\n  );\n}\n\nexport default WalrosThemeGlitch;\n","import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nexport type WalrosTheme = \"light\" | \"dark\";\n\nexport type UseWalrosThemeOptions = {\n  storageKey?: string;\n  defaultTheme?: WalrosTheme;\n  useSystemPreference?: boolean;\n  swapDelay?: number;\n  totalDuration?: number;\n  applyTheme?: (theme: WalrosTheme) => void;\n};\n\nexport type UseWalrosThemeResult = {\n  theme: WalrosTheme;\n  isDark: boolean;\n  mounted: boolean;\n  glitching: boolean;\n  toggleTheme: () => void;\n  setTheme: (theme: WalrosTheme) => void;\n};\n\nfunction defaultApplyTheme(theme: WalrosTheme) {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.classList.toggle(\"dark\", theme === \"dark\");\n  root.style.colorScheme = theme;\n}\n\nfunction readInitialTheme(\n  storageKey: string,\n  defaultTheme: WalrosTheme,\n  useSystemPreference: boolean,\n): WalrosTheme {\n  if (typeof window === \"undefined\") return defaultTheme;\n\n  try {\n    const stored = window.localStorage.getItem(storageKey);\n    if (stored === \"light\" || stored === \"dark\") return stored;\n  } catch {\n    // localStorage puede estar bloqueado en modo privado.\n  }\n\n  if (\n    useSystemPreference &&\n    window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches\n  ) {\n    return \"dark\";\n  }\n\n  return defaultTheme;\n}\n\nexport function useWalrosTheme({\n  storageKey = \"walros-theme\",\n  defaultTheme = \"light\",\n  useSystemPreference = false,\n  swapDelay = 220,\n  totalDuration = 720,\n  applyTheme = defaultApplyTheme,\n}: UseWalrosThemeOptions = {}): UseWalrosThemeResult {\n  const [theme, setThemeState] = useState<WalrosTheme>(() =>\n    readInitialTheme(storageKey, defaultTheme, useSystemPreference),\n  );\n  const [mounted, setMounted] = useState(false);\n  const [glitching, setGlitching] = useState(false);\n\n  const themeRef = useRef(theme);\n  const glitchingRef = useRef(false);\n  const swapTimerRef = useRef<number | null>(null);\n  const cleanupTimerRef = useRef<number | null>(null);\n  const applyThemeRef = useRef(applyTheme);\n\n  themeRef.current = theme;\n  applyThemeRef.current = applyTheme;\n\n  const persistTheme = useCallback(\n    (nextTheme: WalrosTheme) => {\n      applyThemeRef.current(nextTheme);\n      setThemeState(nextTheme);\n      themeRef.current = nextTheme;\n\n      try {\n        window.localStorage.setItem(storageKey, nextTheme);\n      } catch {\n        // El cambio debe funcionar aunque localStorage falle.\n      }\n    },\n    [storageKey],\n  );\n\n  useEffect(() => {\n    const initialTheme = readInitialTheme(\n      storageKey,\n      defaultTheme,\n      useSystemPreference,\n    );\n    themeRef.current = initialTheme;\n    setThemeState(initialTheme);\n    applyThemeRef.current(initialTheme);\n    setMounted(true);\n  }, [defaultTheme, storageKey, useSystemPreference]);\n\n  const clearTimers = useCallback(() => {\n    if (swapTimerRef.current !== null) {\n      window.clearTimeout(swapTimerRef.current);\n      swapTimerRef.current = null;\n    }\n    if (cleanupTimerRef.current !== null) {\n      window.clearTimeout(cleanupTimerRef.current);\n      cleanupTimerRef.current = null;\n    }\n  }, []);\n\n  const finishGlitch = useCallback(() => {\n    document.body.classList.remove(\"walros-theme-glitch-page\");\n    glitchingRef.current = false;\n    setGlitching(false);\n  }, []);\n\n  const setTheme = useCallback(\n    (nextTheme: WalrosTheme) => {\n      if (glitchingRef.current) return;\n      persistTheme(nextTheme);\n    },\n    [persistTheme],\n  );\n\n  const toggleTheme = useCallback(() => {\n    if (typeof window === \"undefined\" || glitchingRef.current) return;\n\n    glitchingRef.current = true;\n    setGlitching(true);\n\n    const reducedMotion = window.matchMedia?.(\n      \"(prefers-reduced-motion: reduce)\",\n    ).matches;\n\n    if (!reducedMotion) {\n      document.body.classList.add(\"walros-theme-glitch-page\");\n    }\n\n    const nextTheme: WalrosTheme =\n      themeRef.current === \"dark\" ? \"light\" : \"dark\";\n\n    swapTimerRef.current = window.setTimeout(() => {\n      persistTheme(nextTheme);\n      swapTimerRef.current = null;\n    }, reducedMotion ? 75 : swapDelay);\n\n    cleanupTimerRef.current = window.setTimeout(() => {\n      cleanupTimerRef.current = null;\n      finishGlitch();\n    }, reducedMotion ? 150 : totalDuration);\n  }, [finishGlitch, persistTheme, swapDelay, totalDuration]);\n\n  useEffect(() => {\n    return () => {\n      clearTimers();\n      document.body.classList.remove(\"walros-theme-glitch-page\");\n    };\n  }, [clearTimers]);\n\n  return {\n    theme,\n    isDark: theme === \"dark\",\n    mounted,\n    glitching,\n    toggleTheme,\n    setTheme,\n  };\n}\n\nexport default useWalrosTheme;\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@walrosproject/ui",
-  "version": "0.1.0",
-  "description": "Componentes y recursos visuales oficiales del ecosistema WalrOS.",
+  "version": "0.2.0",
+  "description": "Componentes, transiciones y recursos visuales oficiales del ecosistema WalrOS.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",