@genarou/blazir-icons 1.2.11 → 1.2.13

package/dist/Icon.svelte

@@ -1,251 +1,145 @@
+<!-- DynamicIcon.svelte -->
 <script lang="ts">
+  import { coerceSize } from ".";
   import { iconRegistry, type IconName } from "./icons/registry";
-  import {
-    iconPresets,
-    iconVariants,
-    type IconPreset,
-    type IconVariant,
-  } from "./presets";
+  import { iconPresets, iconVariants } from "./presets";
   import type { IconProps } from "./types";
-  import { coerceSize } from "./utils/defaults";
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // POOLS (1 IO por root scrolleable, 1 RO global)
-  // ───────────────────────────────────────────────────────────────────────────
-  type RootKey = Element | undefined;
-  type Entry = {
-    el: HTMLElement;
-    onViewportChange?: (v: boolean) => void;
-    onSizeChange?: (w: number, h: number) => void;
-  };
+  // Bridge de actions externas (no importamos lazy aquí)
+  type ActionFn<T = HTMLElement, P = any> = (
+    node: T,
+    params?: P
+  ) => void | { update?: (p?: P) => void; destroy?: () => void };
 
-  class IntersectionPool {
-    private pools = new Map<
-      RootKey,
-      { io: IntersectionObserver; entries: Set<Entry> }
-    >();
+  type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
 
-    register(root: RootKey, entry: Entry) {
-      let pool = this.pools.get(root);
-      if (!pool) {
-        const io = new IntersectionObserver(
-          (entries) => {
-            const p = this.pools.get(root);
-            if (!p) return;
-            for (const e of entries) {
-              const tgt = e.target as HTMLElement;
-              for (const item of p.entries) {
-                if (item.el === tgt) {
-                  item.onViewportChange?.(e.isIntersecting);
-                  break;
-                }
-              }
-            }
-          },
-          { root: root as Element | undefined, rootMargin: "200px" }
-        );
-        pool = { io, entries: new Set() };
-        this.pools.set(root, pool);
-      }
+  type IconPresetName = keyof typeof iconPresets;
+  type IconVariantName = keyof typeof iconVariants;
 
-      pool.entries.add(entry);
-      pool.io.observe(entry.el);
-
-      return () => {
-        const p = this.pools.get(root);
-        if (!p) return;
-        p.io.unobserve(entry.el);
-        p.entries.delete(entry);
-        if (p.entries.size === 0) {
-          p.io.disconnect();
-          this.pools.delete(root);
-        }
-      };
-    }
-  }
-
-  class ResizePool {
-    private ro: ResizeObserver | null = null;
-    private entries = new Set<Entry>();
-
-    private ensure() {
-      if (this.ro || typeof ResizeObserver === "undefined") return;
-      this.ro = new ResizeObserver((ros) => {
-        for (const r of ros) {
-          const tgt = r.target as HTMLElement;
-          for (const item of this.entries) {
-            if (item.el === tgt) {
-              item.onSizeChange?.(tgt.offsetWidth, tgt.offsetHeight);
-              break;
-            }
-          }
-        }
-      });
-    }
-
-    register(entry: Entry) {
-      this.ensure();
-      this.entries.add(entry);
-      this.ro?.observe(entry.el);
-      entry.onSizeChange?.(entry.el.offsetWidth, entry.el.offsetHeight); // inicial
-      return () => {
-        this.ro?.unobserve(entry.el);
-        this.entries.delete(entry);
-        if (this.entries.size === 0) {
-          this.ro?.disconnect();
-          this.ro = null;
-        }
-      };
-    }
-  }
-
-  const IO_POOL = new IntersectionPool();
-  const RO_POOL = new ResizePool();
-
-  function getScrollRoot(el: HTMLElement | null): Element | undefined {
-    let p: HTMLElement | null = el?.parentElement ?? null;
-    while (p) {
-      const s = getComputedStyle(p);
-      if (/(auto|scroll)/.test(`${s.overflow}${s.overflowX}${s.overflowY}`))
-        return p;
-      p = p.parentElement;
-    }
-    return undefined;
-  }
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // PROPS
-  // ───────────────────────────────────────────────────────────────────────────
   interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
-    skeleton?: boolean;
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
   }
 
-  const props: DynamicIconProps = $props();
-  const inputProps = $derived(() => ({ skeleton: false, ...props }));
+  const p: DynamicIconProps = $props();
 
-  const Comp = $derived.by(() => iconRegistry[inputProps().name]);
-  const presetProps = $derived(() =>
-    inputProps().preset ? iconPresets[inputProps().preset!] : {}
-  );
-  const variantProps = $derived(() =>
-    inputProps().variant ? iconVariants[inputProps().variant!] : {}
-  );
-  const mergedProps = $derived(() => ({
-    ...presetProps(),
-    ...variantProps(),
-    ...inputProps(),
-  }));
+  let iconName = $state<IconName | null>(null);
+  let Comp = $state<any>(null);
 
-  // 🔹 No pasar `skeleton` al hijo
-  const childProps = $derived(() => {
-    const { skeleton, animationDuration, animationDelay, ...rest } =
-      mergedProps();
+  let presetProps = $state<Partial<IconProps>>({});
+  let variantProps = $state<Partial<IconProps>>({});
 
-    const toMsString = (v?: string | number) =>
-      v === undefined ? undefined : typeof v === "number" ? `${v}ms` : v;
+  let child = $state<IconProps>({} as IconProps);
+  let boxSize = $state<string>("1em");
+  let hostClass = $state<string>("bz-icon-wrapper");
+  let hostStyle = $state<string>("");
 
-    return {
-      ...rest,
-      animationDuration: toMsString(animationDuration),
-      animationDelay: toMsString(animationDelay),
-    };
+  // Key para forzar remonte y reiniciar animaciones
+  let mountKey = $state(0);
+
+  // name -> componente
+  $effect(() => {
+    iconName = p.name ?? null;
+    Comp = iconName ? iconRegistry[iconName] : null;
   });
 
-  const boxSize = $derived(() => {
-    const s = coerceSize(mergedProps().size, 24);
-    return typeof s === "number" ? `${s}px` : s;
+  // preset/variant -> props parciales
+  $effect(() => {
+    const key = p.preset as IconPresetName | undefined;
+    presetProps = key ? iconPresets[key] : {};
+  });
+  $effect(() => {
+    const key = p.variant as IconVariantName | undefined;
+    variantProps = key ? iconVariants[key] : {};
   });
 
-  // ───────────────────────────────────────────────────────────────────────────
-  // Lazy-mount con pooling
-  // ───────────────────────────────────────────────────────────────────────────
-  let hostEl: HTMLElement | null = $state(null);
-  let isVisible = $state(false);
-  let inViewport = false,
-    hasSize = false;
-  let unregIO: (() => void) | null = null,
-    unregRO: (() => void) | null = null;
+  // 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;
+  });
 
-  function tryMount() {
-    if (!isVisible && inViewport && hasSize) {
-      isVisible = true;
-      unregIO?.();
-      unregIO = null;
-      unregRO?.();
-      unregRO = null;
-    }
-  }
+  // Tamaño del wrapper
+  $effect(() => {
+    const rawSize =
+      (p as any).size ??
+      (presetProps as any).size ??
+      (variantProps as any).size;
+    const s = coerceSize(rawSize, 24);
+    boxSize = typeof s === "number" ? `${s}px` : s;
+  });
 
+  // Host attrs
   $effect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof IntersectionObserver === "undefined"
-    ) {
-      isVisible = true;
-      return;
-    }
-    if (!hostEl || isVisible) return;
+    hostClass = `bz-icon-wrapper ${p.class ?? ""}`.trim();
+    hostStyle =
+      `--bz-icon-size:${boxSize};` +
+      `width:${boxSize};height:${boxSize};` +
+      `inline-size:${boxSize};block-size:${boxSize};` +
+      `${p.style ?? ""}`;
+  });
 
-    const root = getScrollRoot(hostEl) ?? undefined;
-    unregIO = IO_POOL.register(root, {
-      el: hostEl,
-      onViewportChange: (v) => {
-        inViewport = v;
-        tryMount();
+  // Bridge para aplicar actions externas
+  function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
+    let handles =
+      entries?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+    return {
+      update(next: ActionEntry[] = []) {
+        handles.forEach((h) => h?.destroy?.());
+        handles =
+          next?.map(([fn, params]) => fn?.(node, params)).filter(Boolean) ?? [];
+      },
+      destroy() {
+        handles.forEach((h) => h?.destroy?.());
+        handles = [];
       },
-    });
-
-    if (typeof ResizeObserver !== "undefined") {
-      unregRO = RO_POOL.register({
-        el: hostEl,
-        onSizeChange: (w, h) => {
-          hasSize = w > 0 && h > 0;
-          tryMount();
-        },
-      });
-    } else {
-      hasSize = hostEl.offsetWidth > 0 && hostEl.offsetHeight > 0;
-      tryMount();
-    }
-
-    return () => {
-      unregIO?.();
-      unregIO = null;
-      unregRO?.();
-      unregRO = null;
     };
-  });
+  }
+
+  // Reanima al recibir el evento del action (asegúrate de que el action emita "lazyMount")
+  function onLazyMount() {
+    mountKey++;
+  }
 </script>
 
 {#if Comp}
   <span
-    bind:this={hostEl}
-    class="bz-icon-wrapper"
-    style={`inline-size:${boxSize};block-size:${boxSize};`}
-    data-mounted={isVisible ? "true" : "false"}
+    class={hostClass}
+    style={hostStyle}
+    use:applyActions={p.actions ?? []}
+    onlazyMount={onLazyMount}
   >
-    {#if isVisible}
-      <Comp {...childProps()} />
-    {:else if mergedProps().skeleton}
-      <span class="bz-icon-skeleton" aria-hidden="true"></span>
-    {/if}
+    {#key mountKey}
+      <Comp {...child} />
+    {/key}
   </span>
-{:else}
-  <span class="bz-icon-error" data-icon={inputProps().name}>
-    ⚠️ Icon not found: {inputProps().name}
+{:else if iconName}
+  <span class="bz-icon-error" data-icon={iconName}>
+    ⚠️ Icon not found: {iconName}
   </span>
+{:else}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
 {/if}
 
 <style>
-  .bz-icon-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
   .bz-icon-skeleton {
     width: 100%;
     height: 100%;
@@ -265,4 +159,37 @@
     border-radius: var(--ui-radius, 0.25rem);
     font-weight: 600;
   }
+  .is-entering {
+    opacity: 0.001;
+    transform: translateY(4px);
+    animation: ic-enter 160ms ease-out forwards;
+  }
+  .is-leaving {
+    opacity: 1;
+    transform: none;
+    animation: ic-leave 160ms ease-in forwards;
+  }
+  .is-mounted {
+    opacity: 1;
+    transform: none;
+  }
+  @keyframes ic-enter {
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  @keyframes ic-leave {
+    to {
+      opacity: 0.001;
+      transform: translateY(4px);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .is-entering,
+    .is-leaving {
+      animation: none;
+      transform: none;
+    }
+  }
 </style>

package/dist/Icon.svelte.d.ts

@@ -1,11 +1,21 @@
 import { type IconName } from "./icons/registry";
-import { type IconPreset, type IconVariant } from "./presets";
+import { iconPresets, iconVariants } from "./presets";
 import type { IconProps } from "./types";
+type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
+    update?: (p?: P) => void;
+    destroy?: () => void;
+};
+type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+type IconPresetName = keyof typeof iconPresets;
+type IconVariantName = keyof typeof iconVariants;
 interface DynamicIconProps extends Omit<IconProps, "children"> {
-    name: IconName;
-    preset?: IconPreset;
-    variant?: IconVariant;
-    skeleton?: boolean;
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
+    actions?: ActionEntry[];
 }
 declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;

package/dist/IconBase.svelte

@@ -1,11 +1,9 @@
+<!-- IconBase.svelte -->
 <script lang="ts">
   import { type IconEffectOptions, iconEffects } from "./effects.js";
+
   import type { IconMode, IconProps } from "./types.js";
-  import {
-    combineTransforms,
-    getAnimationClasses,
-    getAnimationStyle,
-  } from "./utils/animations.js";
+  import { combineTransforms, getAnimationStyle } from "./utils/animations.js";
   import {
     commonDefaults,
     modeDefaults,
@@ -30,26 +28,31 @@
   }
 
   const props: IconProps & { mode?: IconMode } = $props();
+
+  // Hover (nativo + heredado)
   let internalHovered = $state(false);
   const isHovered = $derived(
     internalHovered || (props.parentHoverContext?.hovered ?? false)
   );
 
+  // Color efectivo
   const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
   const effectiveColor = $derived(
     (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
       DEFAULT_ICON_COLOR
   );
 
+  // Visuales / defaults
   const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
   const common = $derived(commonDefaults(props));
-
   const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
   const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
-  const animationClasses = $derived(getAnimationClasses(props).join(" "));
+
+  // 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,
@@ -59,39 +62,75 @@
     })
   );
 
+  // Duraciones / easing
+  const hoverMs = $derived(
+    normalizeMs(props.transitionMs ?? props.animationDuration)
+  );
+  const hoverEase = $derived(
+    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`
-          : props.spin
+          : String(props.spin)
       : null
   );
 
-  const hoverMs = $derived(
-    normalizeMs(props.transitionMs ?? props.animationDuration)
-  );
-  const hoverEase = $derived(
-    props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
-  );
+  // Pulse/Bounce/Wiggle/Heartbeat/Elastic continuos (boolean props) → inline animation
+  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)
   const style = $derived(() => {
     const parts: string[] = [];
+
+    // estilo previo del usuario
     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;");
-    if (spinDuration) parts.push(`--bz-spin:${spinDuration};`);
+
+    // timing variables
     if (timingStyle) parts.push(timingStyle);
-    if (effectiveColor) parts.push(`color:${effectiveColor};`);
+
+    // transición en hover
     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(",")};`);
+
     return parts.join(" ");
   });
 
+  // A11y
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
   const computedTitleId = $derived(
     props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
@@ -103,9 +142,12 @@
     !props.decorative && props.title ? computedTitleId : undefined
   );
 
+  // Tamaño final
   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;
@@ -113,10 +155,12 @@
     return a;
   });
 
+  // 👇 Importante: NO agregamos animationClasses aquí para evitar choques
   const finalClass = $derived(
-    `bz-icon ${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
+    `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 };
@@ -141,9 +185,13 @@
     return cmds.join(" ");
   });
 
+  // Capa FX: efectos programáticos (scale/slide/rotateOnHover/pressScale)
   let svgRef: SVGSVGElement | null = $state(null);
+  let fxLayer: SVGGElement | null = $state(null);
+
   $effect(() => {
-    if (!svgRef) return;
+    if (!fxLayer) return;
+
     const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
     const a = props.attrs ?? {};
     if (a.spinOnHover) effectsOpts.spinOnHover = true;
@@ -155,10 +203,10 @@
     if (a.heartbeatOnActive) effectsOpts.heartbeatOnActive = true;
     if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
     if (a.pressScale) effectsOpts.pressScale = a.pressScale;
-    if (Object.keys(effectsOpts).length > 0) {
-      const controller = iconEffects(svgRef, effectsOpts);
-      return () => controller.destroy();
-    }
+
+    // ⛳ Aplica transforms sobre fxLayer (no sobre el <svg>)
+    const controller = iconEffects(fxLayer, effectsOpts);
+    return () => controller.destroy();
   });
 
   function handleMouseEnter() {
@@ -195,7 +243,9 @@
   onmouseleave={handleMouseLeave}
 >
   {#if props.title}<title id={computedTitleId}>{props.title}</title>{/if}
-  <g transform={svgTransform()}>
+
+  <!-- 🎯 CAPA FX: aquí se aplican transformaciones programáticas (iconEffects) -->
+  <g bind:this={fxLayer} transform={svgTransform()}>
     {@render props.children?.()}
   </g>
 </svg>
@@ -217,4 +267,79 @@
       }
     }
   }
+
+  /* Keyframes usados por animaciones inline */
+  @keyframes __icon_spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes bz-icon-bounce {
+    0% {
+      transform: translateY(0);
+    }
+    35% {
+      transform: translateY(-18%);
+    }
+    70% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes bz-icon-pulse {
+    0%,
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.04);
+      opacity: 0.92;
+    }
+  }
+  @keyframes bz-icon-wiggle {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(-3deg);
+    }
+    75% {
+      transform: rotate(3deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+  @keyframes bz-icon-elastic {
+    0% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(0.8);
+    }
+    60% {
+      transform: scale(1.15);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  @keyframes bz-icon-heartbeat {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    14% {
+      transform: scale(1.1);
+    }
+    28% {
+      transform: scale(1);
+    }
+    42% {
+      transform: scale(1.1);
+    }
+    70% {
+      transform: scale(1);
+    }
+  }
 </style>

package/dist/types/svelte-events.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="svelte" />
+
+// No exportes nada aquí: debe ser una augmentación global
+declare namespace svelte.JSX {
+  interface HTMLAttributes<T> {
+    onlazyMount?: (e: CustomEvent<any>) => void;
+    onlazyUnmount?: (e: CustomEvent<any>) => void;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@genarou/blazir-icons",
-  "version": "1.2.11",
+  "version": "1.2.13",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -35,7 +35,8 @@
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
     "clean": "rm -rf dist",
-    "prebuild": "npm run clean"
+    "prebuild": "npm run clean",
+    "try": "npm run build && vite --config play/vite.config.js"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.0",