@genarou/blazir-icons 1.2.16 → 1.3.2

package/dist/CustomIcon.svelte

@@ -0,0 +1,30 @@
+<!-- CustomIcon.svelte -->
+<script lang="ts">
+  import IconBase from "./IconBase.svelte";
+  import { sanitizeSvg } from "./utils/sanitize.js";
+  import type { IconProps } from "./types";
+
+  interface CustomIconProps extends Omit<IconProps, "children"> {
+    /** Raw SVG inner markup: paths, circles, polygons, etc. */
+    svgContent: string;
+    /**
+     * Sanitize svgContent against XSS before rendering.
+     * Default: true — always on when content comes from external sources.
+     * Set to false only for static, trusted SVG strings defined in your own code.
+     */
+    sanitize?: boolean;
+  }
+
+  const {
+    svgContent,
+    sanitize = true,
+    viewBox = "0 0 24 24",
+    ...rest
+  }: CustomIconProps = $props();
+
+  const safeContent = $derived(sanitize ? sanitizeSvg(svgContent) : svgContent);
+</script>
+
+<IconBase {viewBox} {...rest}>
+  {@html safeContent}
+</IconBase>

package/dist/CustomIcon.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { IconProps } from "./types";
+interface CustomIconProps extends Omit<IconProps, "children"> {
+    /** Raw SVG inner markup: paths, circles, polygons, etc. */
+    svgContent: string;
+    /**
+     * Sanitize svgContent against XSS before rendering.
+     * Default: true — always on when content comes from external sources.
+     * Set to false only for static, trusted SVG strings defined in your own code.
+     */
+    sanitize?: boolean;
+}
+declare const CustomIcon: import("svelte").Component<CustomIconProps, {}, "">;
+type CustomIcon = ReturnType<typeof CustomIcon>;
+export default CustomIcon;

package/dist/Icon.svelte

@@ -1,22 +1,37 @@
-<!-- DynamicIcon.svelte -->
+<!-- Icon.svelte — Refactored v2 -->
+<!-- Cache inteligente adaptativo + lazy loading opcional + actions diff -->
 <script lang="ts">
-  import { coerceSize } from ".";
-  import { iconRegistry, type IconName } from "./icons/registry";
-  import { iconPresets, iconVariants } from "./presets";
-  import type { IconProps } from "./types";
-
-  // Bridge de actions externas (no importamos lazy aquí)
+  import type { Component } from 'svelte';
+  import { coerceSize } from './utils/defaults.js';
+  import { iconRegistry, type IconName } from './icons/registry.js';
+  import { iconPresets, iconVariants } from './presets.js';
+  import type { IconProps } from './types.js';
+  import {
+    getPresetVariantMerge,
+    arePropsStable,
+    buildStructuralKey,
+    getCachedMergedProps,
+    setCachedMergedProps,
+    toSizePx,
+  } from './smart-cache.js';
+  import {
+    getLoadedIcon,
+    loadIcon,
+  } from './icons/lazy-registry.js';
+
+  // ============================================================================
+  // TIPOS
+  // ============================================================================
   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"> {
+  interface DynamicIconProps extends Omit<IconProps, 'children'> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;
@@ -24,155 +39,268 @@
     style?: string;
     /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
     actions?: ActionEntry[];
+    /**
+     * Activa lazy loading: el ícono se carga como dynamic import() separado.
+     * Útil para code-splitting cuando usas muchos íconos distintos.
+     * Por defecto: false (usa el registry estático, comportamiento original).
+     */
+    lazy?: boolean;
   }
 
   const p: DynamicIconProps = $props();
 
-  // 🔥 OPTIMIZACIÓN: Cache para props combinadas
-  const propsCache = new Map<string, any>();
-
-  // 🔥 OPTIMIZACIÓN: Derivados en lugar de effects + states
+  // ============================================================================
+  // RESOLUCIÓN DEL COMPONENTE
+  // ============================================================================
   const iconName = $derived(p.name ?? null);
-  const Comp = $derived(iconName ? iconRegistry[iconName] : null);
 
-  // 🔥 OPTIMIZACIÓN: Preset y variant como derivados
-  const presetProps = $derived(() => {
-    const key = p.preset as IconPresetName | undefined;
-    return key ? iconPresets[key] : {};
-  });
+  // --- Modo EAGER (default): usa el registry estático ya cargado ---
+  // Mismo comportamiento que antes: sin latencia, sin skeleton en primer render.
+  const _eagerComp = $derived(
+    iconName ? (iconRegistry[iconName as IconName] ?? null) : null
+  );
+
+  // --- Modo LAZY (opt-in): dynamic import() por ícono ---
+  // Primer render: busca en caché de íconos ya cargados (getLoadedIcon).
+  // Si no está, muestra skeleton y carga en background.
+  let _lazyComp = $state<Component | null>(null);
+  let _lazyLoading = $state(false);
+  let _lazyCurrentName = $state<string | null>(null);
+
+  $effect(() => {
+    if (!p.lazy) return;
+
+    const name = iconName;
+
+    if (!name) {
+      _lazyComp = null;
+      _lazyCurrentName = null;
+      _lazyLoading = false;
+      return;
+    }
+
+    // Si es el mismo nombre y ya lo cargamos → no hacer nada
+    if (_lazyCurrentName === name && _lazyComp) return;
 
-  const variantProps = $derived(() => {
-    const key = p.variant as IconVariantName | undefined;
-    return key ? iconVariants[key] : {};
+    // Intentar sincrónico primero (caché de íconos ya cargados)
+    const synced = getLoadedIcon(name) ?? (iconRegistry[name as IconName] ?? null);
+    if (synced) {
+      _lazyComp = synced;
+      _lazyCurrentName = name;
+      _lazyLoading = false;
+      return;
+    }
+
+    // Carga asíncrona
+    _lazyLoading = true;
+    _lazyCurrentName = name;
+    loadIcon(name).then((comp) => {
+      // Solo actualizar si el nombre sigue siendo el mismo
+      if (_lazyCurrentName === name) {
+        _lazyComp = comp;
+        _lazyLoading = false;
+      }
+    });
   });
 
-  // 🔥 OPTIMIZACIÓN: Helper para normalizar ms
+  // Componente activo según modo
+  const Comp = $derived(p.lazy ? _lazyComp : _eagerComp);
+  const isLoading = $derived(p.lazy ? _lazyLoading : false);
+
+  // ============================================================================
+  // CACHE INTELIGENTE DE MERGE — PRESET + VARIANT
+  //
+  // getPresetVariantMerge devuelve SIEMPRE la misma referencia de objeto
+  // para la misma combinación (preset, variant). Esto garantiza que $derived
+  // no re-ejecute child si solo cambió la referencia pero no el contenido.
+  // ============================================================================
+  const baseProps = $derived(getPresetVariantMerge(p.preset, p.variant));
+
+  // ============================================================================
+  // NORMALIZACIÓN DE TIMING
+  // ============================================================================
   function toMs(v: unknown): string | undefined {
     if (v == null) return undefined;
-    return typeof v === "number" ? `${v}ms` : String(v);
+    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 };
+  // ============================================================================
+  // CHILD PROPS — merge base + overrides de usuario
+  //
+  // Estrategia de cache adaptativo:
+  // 1. Si TODAS las props del usuario son primitivas (stable) → cache global LRU
+  //    con clave estructural. La misma config siempre devuelve la MISMA referencia.
+  // 2. Si hay props inestables (effects, actions, attrs, objetos) → merge directo
+  //    sin cache, pero baseProps sigue siendo estable para evitar spreads extra.
+  //
+  // Usamos $derived.by (idiomático en Svelte 5) en lugar de $derived(() => fn).
+  // $derived.by trackea dependencias correctamente y caching del resultado.
+  // ============================================================================
+  const child = $derived.by((): IconProps => {
+    // Extraer props que no se pasan al hijo
+    const {
+      class: _cls,
+      style: _sty,
+      actions: _act,
+      lazy: _lz,
+      preset: _pre,
+      variant: _var,
+      name: _nm,
+      ...userProps
+    } = p;
+
+    // Detección de estabilidad: ¿todos los valores son primitivos?
+    const stable = arePropsStable(userProps as Record<string, unknown>);
+
+    if (stable) {
+      // Cache LRU global: misma config → misma referencia exacta
+      const key = buildStructuralKey(userProps as Record<string, unknown>);
+      const cached = getCachedMergedProps(key);
+      if (cached) return cached;
+
+      // Merge: baseProps (stable reference) → user overrides
+      const merged: any = { ...baseProps, ...userProps };
+
+      // Normalizar timing de animación a string con unidad
+      if (merged.animationDuration !== undefined) {
+        merged.animationDuration = toMs(merged.animationDuration);
+      }
+      if (merged.animationDelay !== undefined) {
+        merged.animationDelay = toMs(merged.animationDelay);
+      }
 
-    if (normalized.animationDuration !== undefined) {
-      normalized.animationDuration = toMs(normalized.animationDuration);
+      // Object.freeze para inmutabilidad interna; cast de vuelta a IconProps
+      // para que el spread en la plantilla sea compatible con el tipo del componente
+      const result = Object.freeze(merged) as unknown as IconProps;
+      setCachedMergedProps(key, result as Readonly<IconProps>);
+      return result;
     }
 
-    if (normalized.animationDelay !== undefined) {
-      normalized.animationDelay = toMs(normalized.animationDelay);
+    // Props inestables: merge directo (no cacheable globalmente)
+    // baseProps sigue siendo la misma referencia si preset/variant no cambiaron
+    const merged: any = { ...baseProps, ...userProps };
+    if (merged.animationDuration !== undefined) {
+      merged.animationDuration = toMs(merged.animationDuration);
     }
-
-    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);
-      }
+    if (merged.animationDelay !== undefined) {
+      merged.animationDelay = toMs(merged.animationDelay);
     }
-
-    return result;
+    return merged as IconProps;
   });
 
-  // 🔥 OPTIMIZACIÓN: Box size como derivado
-  const boxSize = $derived(() => {
-    const rawSize =
-      (p as any).size ??
-      (presetProps() as any).size ??
-      (variantProps() as any).size;
+  // ============================================================================
+  // SIZING — usa toSizePx del smart-cache para estabilidad referencial
+  // ============================================================================
+  const boxSize = $derived.by(() => {
+    // Prioridad: prop directa > preset > variant (baseProps ya los combina)
+    const rawSize = (p as any).size ?? (baseProps as any).size;
     const s = coerceSize(rawSize, 24);
-    return typeof s === "number" ? `${s}px` : s;
+    return toSizePx(s);
   });
 
-  // 🔥 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 ?? ""}`
-    );
+  // ============================================================================
+  // ATRIBUTOS DEL HOST
+  // ============================================================================
+  const hostClass = $derived(
+    p.class ? `bz-icon-wrapper ${p.class}` : 'bz-icon-wrapper'
+  );
+
+  const hostStyle = $derived.by(() => {
+    const sz = boxSize;
+    const base =
+      `--bz-icon-size:${sz};width:${sz};height:${sz};` +
+      `inline-size:${sz};block-size:${sz};`;
+    return p.style ? base + p.style : base;
   });
 
-  // Key para forzar remonte y reiniciar animaciones
+  // ============================================================================
+  // MOUNT KEY — para reiniciar animaciones desde actions externas
+  // Solo se incrementa vía evento lazyMount, no en cada render.
+  // ============================================================================
   let mountKey = $state(0);
 
-  // 🔥 OPTIMIZACIÓN: Bridge de actions más eficiente
+  function onLazyMount() {
+    mountKey++;
+  }
+
+  // ============================================================================
+  // ACTIONS BRIDGE — diff en lugar de destroy/recreate
+  //
+  // Mejora sobre la versión anterior:
+  // - Si las FUNCIONES de action son las mismas (mismas referencias) → solo
+  //   llama update(newParams) en cada handle. Preserva estado interno.
+  // - Solo destruye y recrea si cambian las funciones de action (distinto conjunto).
+  //
+  // Esto es crítico para actions con estado (tooltips, lazy observers, etc.)
+  // ============================================================================
   function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
-    if (!entries || entries.length === 0) {
-      return { update() {}, destroy() {} };
-    }
+    if (!entries?.length) return { update() {}, destroy() {} };
 
+    let prevEntries: ActionEntry[] = entries;
     let handles = entries
       .map(([fn, params]) => fn?.(node, params))
       .filter(Boolean);
 
     return {
       update(next: ActionEntry[] = []) {
-        // Cleanup anterior
+        if (!next?.length) {
+          handles.forEach((h) => h?.destroy?.());
+          handles = [];
+          prevEntries = [];
+          return;
+        }
+
+        // Mismo número de actions y mismas referencias de función → diff params
+        if (next.length === prevEntries.length) {
+          let sameFns = true;
+          for (let i = 0; i < next.length; i++) {
+            if (next[i][0] !== prevEntries[i][0]) {
+              sameFns = false;
+              break;
+            }
+          }
+          if (sameFns) {
+            // Solo actualizar parámetros — preserva estado interno de cada action
+            handles.forEach((h, i) => h?.update?.(next[i][1]));
+            prevEntries = next;
+            return;
+          }
+        }
+
+        // Distintas funciones → destroy + recreate
         handles.forEach((h) => h?.destroy?.());
-
-        // Aplicar nuevos
+        prevEntries = next;
         handles = next
           .map(([fn, params]) => fn?.(node, params))
           .filter(Boolean);
       },
+
       destroy() {
         handles.forEach((h) => h?.destroy?.());
         handles = [];
+        prevEntries = [];
       },
     };
   }
-
-  // Reanima al recibir el evento del action
-  function onLazyMount() {
-    mountKey++;
-  }
 </script>
 
 {#if Comp}
   <span
     class={hostClass}
-    style={hostStyle()}
+    style={p.tooltipDelay != null
+      ? `${hostStyle};--bz-tooltip-delay:${p.tooltipDelay}ms`
+      : hostStyle}
+    data-bz-tooltip={p.tooltip || undefined}
     use:applyActions={p.actions ?? []}
     onlazyMount={onLazyMount}
   >
     {#key mountKey}
-      <Comp {...child()} />
+      <!-- svelte-ignore: cast necesario para componentes dinámicos con props genéricas -->
+      <Comp {...(child as any)} />
     {/key}
   </span>
+{:else if isLoading}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
 {:else if iconName}
   <span class="bz-icon-error" data-icon={iconName}>
     ⚠️ Icon not found: {iconName}
@@ -189,10 +317,55 @@
     justify-content: center;
     position: relative;
     pointer-events: auto;
-    contain: layout style paint;
+    contain: layout style;
     content-visibility: auto;
   }
 
+  /* ── Tooltip CSS — configurable, dark mode, sin JS ── */
+  .bz-icon-wrapper[data-bz-tooltip]::before,
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
+                transform 0.15s ease var(--bz-tooltip-delay, 0ms);
+    z-index: 9999;
+  }
+
+  /* Cuerpo del tooltip */
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    content: attr(data-bz-tooltip);
+    background: var(--bz-tooltip-bg, #1a1a1a);
+    color: var(--bz-tooltip-color, #fff);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 5px 9px;
+    border-radius: 6px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  /* Flecha del tooltip */
+  .bz-icon-wrapper[data-bz-tooltip]::before {
+    content: '';
+    border: 5px solid transparent;
+    border-top-color: var(--bz-tooltip-bg, #1a1a1a);
+    bottom: calc(100% + 0px);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  /* Mostrar en hover */
+  .bz-icon-wrapper[data-bz-tooltip]:hover::after,
+  .bz-icon-wrapper[data-bz-tooltip]:hover::before {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
   .bz-icon-wrapper :global(svg) {
     pointer-events: bounding-box !important;
   }
@@ -208,6 +381,7 @@
     background: color-mix(in oklab, currentColor 12%, transparent);
     opacity: 0.5;
   }
+
   .bz-icon-error {
     display: inline-block;
     width: 1em;
@@ -220,32 +394,38 @@
     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 {

package/dist/Icon.svelte.d.ts

@@ -1,6 +1,7 @@
-import { type IconName } from "./icons/registry";
-import { iconPresets, iconVariants } from "./presets";
-import type { IconProps } from "./types";
+import type { Component } from 'svelte';
+import { type IconName } from './icons/registry.js';
+import { iconPresets, iconVariants } from './presets.js';
+import type { IconProps } from './types.js';
 type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
     update?: (p?: P) => void;
     destroy?: () => void;
@@ -8,7 +9,7 @@ type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => 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"> {
+interface DynamicIconProps extends Omit<IconProps, 'children'> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;
@@ -16,7 +17,13 @@ interface DynamicIconProps extends Omit<IconProps, "children"> {
     style?: string;
     /** Pasas aquí tus actions: p.ej. actions={[[lazyClass, opts]]} */
     actions?: ActionEntry[];
+    /**
+     * Activa lazy loading: el ícono se carga como dynamic import() separado.
+     * Útil para code-splitting cuando usas muchos íconos distintos.
+     * Por defecto: false (usa el registry estático, comportamiento original).
+     */
+    lazy?: boolean;
 }
-declare const Icon: import("svelte").Component<DynamicIconProps, {}, "">;
+declare const Icon: Component<DynamicIconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/IconBadge.svelte

@@ -0,0 +1,75 @@
+<!-- IconBadge.svelte — Wrapper ligero que añade un badge/dot sobre cualquier Icon -->
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+  import type { DynamicIconProps } from "./types";
+
+  interface BadgeProps extends DynamicIconProps {
+    /** true = punto rojo | number = conteo | string = texto */
+    badge?: boolean | number | string;
+    /** Color de fondo del badge. Default: rojo */
+    badgeColor?: string;
+    /** Color del texto del badge. Default: blanco */
+    badgeTextColor?: string;
+    /** Tamaño del badge en px. Default: 8 (dot) o 16 (con texto) */
+    badgeSize?: number;
+    /** Posición del badge. Default: top-right */
+    badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  }
+
+  const {
+    badge,
+    badgeColor = "#ef4444",
+    badgeTextColor = "#fff",
+    badgeSize,
+    badgePosition = "top-right",
+    ...iconProps
+  }: BadgeProps = $props();
+
+  const showBadge = $derived(badge !== false && badge != null);
+  const badgeText  = $derived(
+    badge === true || badge === false ? "" : String(badge)
+  );
+  const hasBadgeText = $derived(badgeText.length > 0);
+  const size         = $derived(badgeSize ?? (hasBadgeText ? 16 : 8));
+
+  // Posición absoluta del badge
+  const posStyle = $derived.by(() => {
+    const offset = `-${Math.round(size * 0.3)}px`;
+    switch (badgePosition) {
+      case "top-left":     return `top:${offset};left:${offset};`;
+      case "bottom-right": return `bottom:${offset};right:${offset};`;
+      case "bottom-left":  return `bottom:${offset};left:${offset};`;
+      default:             return `top:${offset};right:${offset};`;
+    }
+  });
+</script>
+
+{#if showBadge}
+  <span style="position:relative;display:inline-flex;vertical-align:middle;line-height:0;">
+    <Icon {...iconProps} />
+    <span
+      aria-label={hasBadgeText ? badgeText : undefined}
+      aria-hidden={hasBadgeText ? undefined : "true"}
+      style="
+        position:absolute;
+        {posStyle}
+        min-width:{size}px;
+        height:{size}px;
+        background:{badgeColor};
+        border-radius:9999px;
+        display:inline-flex;
+        align-items:center;
+        justify-content:center;
+        font-size:{Math.max(size - 5, 8)}px;
+        font-weight:700;
+        color:{badgeTextColor};
+        line-height:1;
+        padding:{hasBadgeText ? '0 4px' : '0'};
+        pointer-events:none;
+        box-sizing:border-box;
+      "
+    >{badgeText}</span>
+  </span>
+{:else}
+  <Icon {...iconProps} />
+{/if}