@genarou/blazir-icons 1.2.13 → 1.2.15

package/dist/Icon.svelte

@@ -28,84 +28,126 @@
 
   const p: DynamicIconProps = $props();
 
-  let iconName = $state<IconName | null>(null);
-  let Comp = $state<any>(null);
+  // 🔥 OPTIMIZACIÓN: Cache para props combinadas
+  const propsCache = new Map<string, any>();
 
-  let presetProps = $state<Partial<IconProps>>({});
-  let variantProps = $state<Partial<IconProps>>({});
+  // 🔥 OPTIMIZACIÓN: Derivados en lugar de effects + states
+  const iconName = $derived(p.name ?? null);
+  const Comp = $derived(iconName ? iconRegistry[iconName] : null);
 
-  let child = $state<IconProps>({} as IconProps);
-  let boxSize = $state<string>("1em");
-  let hostClass = $state<string>("bz-icon-wrapper");
-  let hostStyle = $state<string>("");
-
-  // Key para forzar remonte y reiniciar animaciones
-  let mountKey = $state(0);
-
-  // name -> componente
-  $effect(() => {
-    iconName = p.name ?? null;
-    Comp = iconName ? iconRegistry[iconName] : null;
-  });
-
-  // preset/variant -> props parciales
-  $effect(() => {
+  // 🔥 OPTIMIZACIÓN: Preset y variant como derivados
+  const presetProps = $derived(() => {
     const key = p.preset as IconPresetName | undefined;
-    presetProps = key ? iconPresets[key] : {};
+    return key ? iconPresets[key] : {};
   });
-  $effect(() => {
+
+  const variantProps = $derived(() => {
     const key = p.variant as IconVariantName | undefined;
-    variantProps = key ? iconVariants[key] : {};
+    return key ? iconVariants[key] : {};
   });
 
-  // Limpia class/style/actions del host antes de pasar al hijo
-  $effect(() => {
-    const {
-      class: _class,
-      style: _style,
-      actions: _actions,
-      ...restRaw
-    } = { ...presetProps, ...variantProps, ...p } as Record<string, unknown>;
-
-    const toMs = (v: unknown) =>
-      v == null ? undefined : typeof v === "number" ? `${v}ms` : (v as string);
-
-    child = {
-      ...(restRaw as IconProps),
-      animationDuration: toMs((restRaw as any).animationDuration),
-      animationDelay: toMs((restRaw as any).animationDelay),
-    } as IconProps;
+  // 🔥 OPTIMIZACIÓN: Helper para normalizar ms
+  function toMs(v: unknown): string | undefined {
+    if (v == null) return undefined;
+    return typeof v === "number" ? `${v}ms` : String(v);
+  }
+
+  // 🔥 OPTIMIZACIÓN: Child props con memoización
+  const child = $derived(() => {
+    const cacheKey = `${p.preset || ""}-${p.variant || ""}-${p.name || ""}`;
+
+    // Check cache primero
+    const cached = propsCache.get(cacheKey);
+    if (cached && cached.timestamp > Date.now() - 1000) {
+      // Cache válido por 1s
+      return { ...cached.props, ...p };
+    }
+
+    const merged = {
+      ...presetProps(),
+      ...variantProps(),
+      ...p,
+    };
+
+    // Extraer y eliminar propiedades que no van al hijo
+    const { class: _class, style: _style, actions: _actions, ...rest } = merged;
+
+    // Normalizar animationDuration y animationDelay
+    const normalized: any = { ...rest };
+
+    if (normalized.animationDuration !== undefined) {
+      normalized.animationDuration = toMs(normalized.animationDuration);
+    }
+
+    if (normalized.animationDelay !== undefined) {
+      normalized.animationDelay = toMs(normalized.animationDelay);
+    }
+
+    const result = normalized as IconProps;
+
+    // Guardar en cache
+    propsCache.set(cacheKey, {
+      props: result,
+      timestamp: Date.now(),
+    });
+
+    // Limpiar cache viejo (mantener solo últimos 50)
+    if (propsCache.size > 50) {
+      const firstKey = propsCache.keys().next().value;
+      if (firstKey !== undefined) {
+        propsCache.delete(firstKey);
+      }
+    }
+
+    return result;
   });
 
-  // Tamaño del wrapper
-  $effect(() => {
+  // 🔥 OPTIMIZACIÓN: Box size como derivado
+  const boxSize = $derived(() => {
     const rawSize =
       (p as any).size ??
-      (presetProps as any).size ??
-      (variantProps as any).size;
+      (presetProps() as any).size ??
+      (variantProps() as any).size;
     const s = coerceSize(rawSize, 24);
-    boxSize = typeof s === "number" ? `${s}px` : s;
+    return typeof s === "number" ? `${s}px` : s;
   });
 
-  // Host attrs
-  $effect(() => {
-    hostClass = `bz-icon-wrapper ${p.class ?? ""}`.trim();
-    hostStyle =
-      `--bz-icon-size:${boxSize};` +
-      `width:${boxSize};height:${boxSize};` +
-      `inline-size:${boxSize};block-size:${boxSize};` +
-      `${p.style ?? ""}`;
+  // 🔥 OPTIMIZACIÓN: Host class como derivado
+  const hostClass = $derived(`bz-icon-wrapper ${p.class ?? ""}`.trim());
+
+  // 🔥 OPTIMIZACIÓN: Host style como derivado
+  const hostStyle = $derived(() => {
+    const size = boxSize();
+    return (
+      `--bz-icon-size:${size};` +
+      `width:${size};height:${size};` +
+      `inline-size:${size};block-size:${size};` +
+      `${p.style ?? ""}`
+    );
   });
 
-  // Bridge para aplicar actions externas
+  // Key para forzar remonte y reiniciar animaciones
+  let mountKey = $state(0);
+
+  // 🔥 OPTIMIZACIÓN: Bridge de actions más eficiente
   function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
-    let handles =
-      entries?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+    if (!entries || entries.length === 0) {
+      return { update() {}, destroy() {} };
+    }
+
+    let handles = entries
+      .map(([fn, params]) => fn?.(node, params))
+      .filter(Boolean);
+
     return {
       update(next: ActionEntry[] = []) {
+        // Cleanup anterior
         handles.forEach((h) => h?.destroy?.());
-        handles =
-          next?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+
+        // Aplicar nuevos
+        handles = next
+          .map(([fn, params]) => fn?.(node, params))
+          .filter(Boolean);
       },
       destroy() {
         handles.forEach((h) => h?.destroy?.());
@@ -114,7 +156,7 @@
     };
   }
 
-  // Reanima al recibir el evento del action (asegúrate de que el action emita "lazyMount")
+  // Reanima al recibir el evento del action
   function onLazyMount() {
     mountKey++;
   }
@@ -123,12 +165,12 @@
 {#if Comp}
   <span
     class={hostClass}
-    style={hostStyle}
+    style={hostStyle()}
     use:applyActions={p.actions ?? []}
     onlazyMount={onLazyMount}
   >
     {#key mountKey}
-      <Comp {...child} />
+      <Comp {...child()} />
     {/key}
   </span>
 {:else if iconName}
@@ -140,6 +182,25 @@
 {/if}
 
 <style>
+  .bz-icon-wrapper {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    pointer-events: auto;
+    contain: layout style paint;
+    content-visibility: auto;
+  }
+
+  .bz-icon-wrapper :global(svg) {
+    pointer-events: bounding-box !important;
+  }
+
+  .bz-icon-wrapper :global(svg *) {
+    pointer-events: none !important;
+  }
+
   .bz-icon-skeleton {
     width: 100%;
     height: 100%;

package/dist/IconBase.svelte

@@ -1,32 +1,38 @@
 <!-- IconBase.svelte -->
 <script lang="ts">
   import { type IconEffectOptions, iconEffects } from "./effects.js";
-
   import type { IconMode, IconProps } from "./types.js";
-  import { combineTransforms, getAnimationStyle } from "./utils/animations.js";
+  import { getAnimationStyle } from "./utils/animations.js";
   import {
     commonDefaults,
     modeDefaults,
     normalizeClass,
   } from "./utils/defaults.js";
 
+  // Constantes
   const DEFAULT_MS = 180;
   const DEFAULT_EASING = "cubic-bezier(.2,.8,.2,1)";
+  const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
+
+  const MS_REGEX = /ms$/;
+  const S_REGEX = /s$/;
 
   function normalizeMs(v?: number | string): number {
     if (v == null) return DEFAULT_MS;
     if (typeof v === "number") return v;
     const s = String(v).trim();
-    if (s.endsWith("ms")) return parseFloat(s);
-    if (s.endsWith("s")) return parseFloat(s) * 1000;
+    if (MS_REGEX.test(s)) return parseFloat(s);
+    if (S_REGEX.test(s)) return parseFloat(s) * 1000;
     const n = parseFloat(s);
     return Number.isFinite(n) ? n : DEFAULT_MS;
   }
 
+  let uidCounter = 0;
   function uid(): string {
-    return Math.random().toString(36).slice(2);
+    return `bz-${Date.now().toString(36)}-${(uidCounter++).toString(36)}`;
   }
 
+  // Props
   const props: IconProps & { mode?: IconMode } = $props();
 
   // Hover (nativo + heredado)
@@ -35,34 +41,23 @@
     internalHovered || (props.parentHoverContext?.hovered ?? false)
   );
 
-  // Color efectivo
-  const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
+  // Color
   const effectiveColor = $derived(
     (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
       DEFAULT_ICON_COLOR
   );
 
-  // Visuales / defaults
+  // Mode
   const mode = $derived(props.mode ?? "solid");
+
+  // Derivados base
   const klass = $derived(normalizeClass(props));
   const common = $derived(commonDefaults(props));
   const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
   const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
-
-  // Sólo para variables de timing (no clases de animación)
   const timingStyle = $derived(getAnimationStyle(props));
 
-  // Transforms declarativos (NO incluye rotate/flip; esos van en el <g> geometry)
-  const cssTransformOnly = $derived(
-    combineTransforms({
-      ...props,
-      rotate: undefined as any,
-      flipH: false,
-      flipV: false,
-    })
-  );
-
-  // Duraciones / easing
+  // Transiciones
   const hoverMs = $derived(
     normalizeMs(props.transitionMs ?? props.animationDuration)
   );
@@ -70,62 +65,149 @@
     props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
   );
 
-  // Spin continuo → inline animation (sin clases)
-  const spinDuration = $derived(
-    props.spin
-      ? props.spin === true
-        ? "1s"
-        : typeof props.spin === "number"
-          ? `${props.spin}ms`
-          : String(props.spin)
-      : null
-  );
-
-  // Pulse/Bounce/Wiggle/Heartbeat/Elastic continuos (boolean props) → inline animation
+  // Animaciones continuas
+  const spinDuration = $derived(() => {
+    if (!props.spin) return null;
+    if (props.spin === true) return "1s";
+    return typeof props.spin === "number"
+      ? `${props.spin}ms`
+      : String(props.spin);
+  });
   const wantsPulse = $derived(!!props.pulse);
   const wantsBounce = $derived(!!props.bounce);
   const wantsWiggle = $derived(!!props.wiggle);
   const wantsHeartbeat = $derived(!!props.heartbeat);
   const wantsElastic = $derived(!!props.elastic);
 
-  // Construye style inline (NO escribimos transform cuando haya capa FX)
+  // ===== Chevron state ⇒ grados (se animará por CSS) =====
+  const effectiveChevronState = $derived(() => {
+    if (props.chevronState) return props.chevronState;
+    if (props.chevronOpen !== undefined) {
+      return props.chevronOpen ? "open" : "closed";
+    }
+    return undefined;
+  });
+
+  const chevronDeg = $derived((): number | null => {
+    switch (effectiveChevronState()) {
+      case "open":
+      case "down":
+        return 90;
+      case "up":
+        return -90;
+      case "left":
+        return 180;
+      case "right":
+      case "closed":
+        return 0;
+      default:
+        return null;
+    }
+  });
+
+  // Clase final
+  const finalClass = $derived(
+    `bz-icon ${klass}${effectiveChevronState() ? " bz-icon-chevron" : ""}`.trim()
+  );
+
+  // ===== SVG transform (solo rotate/flip declarativos) =====
+  // Rot/flip en <g> para no interferir con la transición del <svg>
+  function getViewBoxCenter(vb: string) {
+    const parts = vb.trim().split(/\s+/);
+    const minX = Number(parts[0]);
+    const minY = Number(parts[1]);
+    const w = Number(parts[2]);
+    const h = Number(parts[3]);
+    return { cx: minX + w / 2, cy: minY + h / 2 };
+  }
+  const center = $derived(getViewBoxCenter(common.viewBox));
+
+  const svgTransform = $derived(() => {
+    const cmds: string[] = [];
+
+    // Rotate (prop)
+    if (props.rotate != null) {
+      const r =
+        typeof props.rotate === "number"
+          ? props.rotate
+          : parseFloat(String(props.rotate));
+      if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
+    }
+
+    // Flip (prop)
+    if (props.flipH || props.flipV) {
+      const sx = props.flipH ? -1 : 1;
+      const sy = props.flipV ? -1 : 1;
+      cmds.push(
+        `translate(${center.cx} ${center.cy}) scale(${sx} ${sy}) translate(${-center.cx} ${-center.cy})`
+      );
+    }
+
+    // ⛔️ OJO: chevron NO va aquí (aquí no hay transición CSS)
+    return cmds.length ? cmds.join(" ") : "";
+  });
+
+  // ===== Style inline del <svg> (incluye transición y chevron por CSS) =====
   const style = $derived(() => {
     const parts: string[] = [];
 
     // estilo previo del usuario
-    if (props.style)
+    if (props.style) {
       parts.push(props.style.endsWith(";") ? props.style : `${props.style};`);
+    }
 
     // color
-    if (effectiveColor) parts.push(`color:${effectiveColor};`);
-
-    // transform declarativo (translate/scale fuera de rotate/flip)
-    if (cssTransformOnly) parts.push(`transform:${cssTransformOnly};`);
-    parts.push("transform-origin:center;");
+    parts.push(`color:${effectiveColor};`);
 
-    // timing variables
-    if (timingStyle) parts.push(timingStyle);
+    // Vars de timing (si las hay)
+    const tstyle = timingStyle;
+    if (tstyle) parts.push(tstyle);
 
-    // transición en hover
+    // transición para transform/opacidad/stroke/fill
     parts.push(
       `transition:color ${hoverMs}ms ${hoverEase},fill ${hoverMs}ms ${hoverEase},` +
         `stroke ${hoverMs}ms ${hoverEase},transform ${hoverMs}ms ${hoverEase},opacity ${hoverMs}ms ${hoverEase};`
     );
 
-    // Animaciones continuas inline (evitamos clases para no chocar)
-    const animations: string[] = [];
-    if (spinDuration)
-      animations.push(`__icon_spin ${spinDuration} linear infinite`);
-    if (wantsPulse)
-      animations.push(`bz-icon-pulse 1200ms cubic-bezier(.2,.8,.2,1) infinite`);
-    if (wantsBounce) animations.push(`bz-icon-bounce 400ms ease infinite`);
-    if (wantsWiggle)
-      animations.push(`bz-icon-wiggle 200ms ease-in-out infinite`);
-    if (wantsElastic)
-      animations.push(`bz-icon-elastic 300ms ease-out infinite`);
-    if (wantsHeartbeat)
-      animations.push(`bz-icon-heartbeat 1000ms ease-in-out infinite`);
-    if (animations.length) parts.push(`animation:${animations.join(",")};`);
+    // ✅ Var CSS para chevron (si hay estado). Usamos rotate(Xdeg)
+    const deg = chevronDeg();
+    if (deg != null) {
+      parts.push(`--bz-chevron-rot: rotate(${deg}deg);`);
+    } else {
+      // mantener consistente
+      parts.push(`--bz-chevron-rot: rotate(0deg);`);
+    }
+
+    // Transform del SVG: incluir SIEMPRE la var del chevron al final
+    // (puedes añadir más términos aquí si usas CSS-only transforms)
+    parts.push(`transform-origin:center;`);
+    parts.push(`transform: var(--bz-chevron-rot);`);
+
+    // Animaciones declarativas (spin/pulse/etc) — se apilan con transform
+    const spin = spinDuration();
+    if (
+      spin ||
+      wantsPulse ||
+      wantsBounce ||
+      wantsWiggle ||
+      wantsElastic ||
+      wantsHeartbeat
+    ) {
+      const animations: string[] = [];
+      if (spin) animations.push(`__icon_spin ${spin} linear infinite`);
+      if (wantsPulse)
+        animations.push(
+          `bz-icon-pulse 1200ms cubic-bezier(.2,.8,.2,1) infinite`
+        );
+      if (wantsBounce) animations.push(`bz-icon-bounce 400ms ease infinite`);
+      if (wantsWiggle)
+        animations.push(`bz-icon-wiggle 200ms ease-in-out infinite`);
+      if (wantsElastic)
+        animations.push(`bz-icon-elastic 300ms ease-out infinite`);
+      if (wantsHeartbeat)
+        animations.push(`bz-icon-heartbeat 1000ms ease-in-out infinite`);
+      parts.push(`animation:${animations.join(",")};`);
+    }
 
     return parts.join(" ");
   });
@@ -142,69 +224,37 @@
     !props.decorative && props.title ? computedTitleId : undefined
   );
 
-  // Tamaño final
+  // Tamaño y attrs
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
-
-  // Atributos seguros
   const safeAttrs = $derived(() => {
-    const a = { ...(props.attrs ?? {}) };
-    delete (a as any).width;
-    delete (a as any).height;
-    return a;
-  });
-
-  // 👇 Importante: NO agregamos animationClasses aquí para evitar choques
-  const finalClass = $derived(
-    `bz-icon ${klass} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
-  );
-
-  // Rotate/Flip a nivel de GEOMETRÍA (en el <g>)
-  function getViewBoxCenter(vb: string) {
-    const [minX, minY, w, h] = vb.trim().split(/\s+/).map(Number);
-    return { cx: minX + w / 2, cy: minY + h / 2 };
-  }
-  const center = $derived(getViewBoxCenter(common.viewBox));
-  const svgTransform = $derived(() => {
-    const cmds: string[] = [];
-    if (props.rotate != null) {
-      const r =
-        typeof props.rotate === "number"
-          ? props.rotate
-          : parseFloat(String(props.rotate));
-      if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
-    }
-    if (props.flipH || props.flipV) {
-      const sx = props.flipH ? -1 : 1,
-        sy = props.flipV ? -1 : 1;
-      cmds.push(
-        `translate(${center.cx} ${center.cy}) scale(${sx} ${sy}) translate(${-center.cx} ${-center.cy})`
-      );
-    }
-    return cmds.join(" ");
+    if (!props.attrs) return {};
+    const { width, height, ...rest } = props.attrs as any;
+    return rest;
   });
 
-  // Capa FX: efectos programáticos (scale/slide/rotateOnHover/pressScale)
+  // FX layer
   let svgRef: SVGSVGElement | null = $state(null);
   let fxLayer: SVGGElement | null = $state(null);
 
+  // Efectos (incluye heartbeatOnHover si viene en attrs/effects)
   $effect(() => {
     if (!fxLayer) return;
-
     const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
-    const a = props.attrs ?? {};
-    if (a.spinOnHover) effectsOpts.spinOnHover = true;
-    if (a.bounceOnHover) effectsOpts.bounceOnHover = true;
-    if (a.wiggleOnHover) effectsOpts.wiggleOnHover = true;
-    if (a.slideOnHover) effectsOpts.slideOnHover = a.slideOnHover;
-    if (a.morphOnHover) effectsOpts.morphOnHover = a.morphOnHover;
-    if (a.elasticOnClick) effectsOpts.elasticOnClick = true;
-    if (a.heartbeatOnActive) effectsOpts.heartbeatOnActive = true;
-    if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
-    if (a.pressScale) effectsOpts.pressScale = a.pressScale;
-
-    // ⛳ Aplica transforms sobre fxLayer (no sobre el <svg>)
+    const a = props.attrs;
+    if (a) {
+      if (a.spinOnHover) effectsOpts.spinOnHover = true;
+      if (a.bounceOnHover) effectsOpts.bounceOnHover = true;
+      if (a.wiggleOnHover) effectsOpts.wiggleOnHover = true;
+      if (a.slideOnHover) effectsOpts.slideOnHover = a.slideOnHover;
+      if (a.morphOnHover) effectsOpts.morphOnHover = a.morphOnHover;
+      if (a.elasticOnClick) effectsOpts.elasticOnClick = true;
+      if (a.heartbeatOnActive) effectsOpts.heartbeatOnActive = true;
+      if ((a as any).heartbeatOnHover) effectsOpts.heartbeatOnHover = true;
+      if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
+      if (a.pressScale) effectsOpts.pressScale = a.pressScale;
+    }
     const controller = iconEffects(fxLayer, effectsOpts);
     return () => controller.destroy();
   });
@@ -243,8 +293,6 @@
   onmouseleave={handleMouseLeave}
 >
   {#if props.title}<title id={computedTitleId}>{props.title}</title>{/if}
-
-  <!-- 🎯 CAPA FX: aquí se aplican transformaciones programáticas (iconEffects) -->
   <g bind:this={fxLayer} transform={svgTransform()}>
     {@render props.children?.()}
   </g>
@@ -268,7 +316,6 @@
     }
   }
 
-  /* Keyframes usados por animaciones inline */
   @keyframes __icon_spin {
     to {
       transform: rotate(360deg);

package/dist/effects.d.ts

@@ -6,6 +6,8 @@ export type IconEffectOptions = {
     morphOnHover?: "play" | "pause" | "menu" | "close" | "arrow" | "check";
     elasticOnClick?: boolean;
     heartbeatOnActive?: boolean;
+    /** ✅ nuevo: heartbeat al hacer hover */
+    heartbeatOnHover?: boolean;
     pulse?: boolean;
     hoverScale?: number;
     pressScale?: number;