@yoamigo.com/core 1.3.0 → 1.4.1

package/dist/plugin.js

@@ -1,6 +1,8 @@
 // src/plugin/index.ts
 import react from "@vitejs/plugin-react";
 import path from "path";
+import { createRequire } from "module";
+var require2 = createRequire(import.meta.url);
 function yoamigoPlugin(options = {}) {
   const templateDir = process.cwd();
   const resolveFromTemplate = (relativePath) => path.resolve(templateDir, relativePath);
@@ -44,6 +46,12 @@ if (import.meta.hot) {
       name: "yoamigo:config",
       config(config, { mode }) {
         const isProd = mode === "production";
+        let tablerIconsPath;
+        try {
+          tablerIconsPath = path.dirname(require2.resolve("@tabler/icons-react/package.json"));
+        } catch {
+          console.warn("[yoamigo] @tabler/icons-react not found - icon loading may fail");
+        }
         const aliasArray = [
           // Production aliases must come FIRST for priority
           ...isProd ? [
@@ -59,6 +67,14 @@ if (import.meta.hot) {
               replacement: "@yoamigo.com/core/lib/prod"
             }
           ] : [],
+          // === @tabler/icons-react resolution for pnpm ===
+          // Deep imports need explicit resolution in pnpm workspaces
+          ...tablerIconsPath ? [
+            {
+              find: /^@tabler\/icons-react\/(.*)$/,
+              replacement: `${tablerIconsPath}/$1`
+            }
+          ] : [],
           // === Template-specific path aliases ===
           { find: "@", replacement: resolveFromTemplate("./src") },
           { find: "@components", replacement: resolveFromTemplate("./src/components") },
@@ -81,6 +97,11 @@ if (import.meta.hot) {
             // Ensure single React instance across all packages (prevents "Invalid hook call" errors)
             dedupe: ["react", "react-dom"]
           },
+          // Force Vite to pre-bundle @tabler/icons-react with the app's React instance
+          // This prevents Symbol mismatch issues when dynamically importing icons in DEV mode
+          optimizeDeps: {
+            include: ["@tabler/icons-react", "react", "react-dom"]
+          },
           server: {
             port: process.env.PORT ? parseInt(process.env.PORT, 10) : 5173,
             strictPort: false,

package/dist/prod.d.ts

@@ -1,10 +1,10 @@
-export { k as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, D as DynamicIcon, a as DynamicIconProps, I as IconComponent, h as IconLoader, o as MarkdownText, q as MarkdownTextProps, P as PageInfo, m as StaticImage, n as StaticImageProps, M as StaticText, S as StaticTextProps, m as YaImage, n as YaImageProps, M as YaText, S as YaTextProps, b as background, e as embed, g as getIcon, j as getIconLabel, i as image, f as isIconLoaded, l as link, d as loadIcon, s as parseEmbedUrl, p as preloadIcons, r as registerIcon, c as registerIcons, t as text, u as useContentStore, v as video } from './icon-metadata-D-2LGr22.js';
+export { A as AudioFieldValue, d as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, h as MarkdownText, j as MarkdownTextProps, P as PageInfo, f as StaticImage, g as StaticImageProps, M as StaticText, S as StaticTextProps, f as YaImage, g as YaImageProps, M as YaText, S as YaTextProps, a as audio, b as background, e as embed, i as image, l as link, p as parseEmbedUrl, t as text, c as useContentStore, u as useSafeTriangle, v as video } from './useSafeTriangle-PCUZIdaA.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React__default, { CSSProperties, ReactNode } from 'react';
+import React__default, { CSSProperties, ReactNode, ComponentType } from 'react';
 export { Link, LinkProps, NavigateFunction, RouteDefinition, Router, RouterProps, ScrollRestoration, createRouteDefinition, extractRouteParams, filePathToRoutePath, generatePath, sortRoutesBySpecificity, useNavigate } from './router.js';
 export { Route, Switch, useLocation, useParams } from 'wouter';
 export { A as AssetResolverFn, C as ContentRegistry, c as contentRegistry, a as getAllContent, g as getContent, h as hasContent, r as registerContent, b as resolveAssetUrl, s as setAssetResolver } from './asset-resolver-BnIvDkVv.js';
-import '@tabler/icons-react';
+import { IconProps } from '@tabler/icons-react';
 
 interface StaticLinkProps {
     fieldId: string;
@@ -197,4 +197,89 @@ interface StaticEmbedProps {
 declare function serializeEmbedValue(value: EmbedFieldValue): string;
 declare function StaticEmbed({ fieldId, className, aspectRatio: propAspectRatio, maxWidth, loading, defaultValue, }: StaticEmbedProps): react_jsx_runtime.JSX.Element;
 
-export { type BackgroundConfig, type BackgroundImageConfig, type EmbedFieldValue, type EmbedType, type OverlayConfig, SafeHtml, type SafeHtmlProps, StaticContainer, type StaticContainerProps, StaticEmbed, type StaticEmbedProps, StaticIcon, type StaticIconProps, StaticLink, type StaticLinkProps, StaticVideo, type StaticVideoProps, type VideoFieldValue, StaticContainer as YaContainer, type StaticContainerProps as YaContainerProps, StaticEmbed as YaEmbed, type StaticEmbedProps as YaEmbedProps, StaticIcon as YaIcon, type StaticIconProps as YaIconProps, StaticLink as YaLink, type StaticLinkProps as YaLinkProps, StaticVideo as YaVideo, type StaticVideoProps as YaVideoProps, parseBackgroundConfig, serializeBackgroundConfig, serializeEmbedValue, serializeVideoValue };
+/**
+ * DynamicIcon Component - Production version
+ *
+ * Same as DynamicIcon but uses the production icon registry
+ * which doesn't include all 6000 generated loaders.
+ */
+
+interface DynamicIconProps extends Omit<IconProps, 'ref'> {
+    /** Name of the Tabler icon (e.g., "IconBrandTwitter", "IconHeart") */
+    name: string;
+    /** Optional fallback element to show while loading */
+    fallback?: React__default.ReactNode;
+    /** Additional class name for the icon wrapper */
+    className?: string;
+}
+/**
+ * Renders a Tabler icon by name with lazy loading.
+ * Production version - only pre-registered icons are available.
+ */
+declare function DynamicIconComponent({ name, fallback, className, size, stroke, ...props }: DynamicIconProps): React__default.ReactElement | null;
+declare const DynamicIcon: React__default.MemoExoticComponent<typeof DynamicIconComponent>;
+
+/**
+ * Icon Registry - Production version (no generated loaders)
+ *
+ * This lightweight version does NOT include the generated 6000 icon loaders.
+ * Templates must pre-register icons they use via registerIcon().
+ *
+ * For the full dynamic loading with all icons, use the dev version (icon-registry.ts).
+ */
+
+type IconComponent = ComponentType<IconProps>;
+type IconLoader = () => Promise<{
+    default: IconComponent;
+}>;
+/**
+ * Pre-register an icon with a custom loader.
+ * REQUIRED for production builds - icons must be pre-registered to be available.
+ *
+ * @example
+ * ```ts
+ * // In your main.tsx or icons.ts
+ * import { registerIcon } from '@yoamigo.com/core'
+ * import { IconBrandTwitter } from '@tabler/icons-react'
+ *
+ * // Register icons your template uses
+ * registerIcon('IconBrandTwitter', () => Promise.resolve({ default: IconBrandTwitter }))
+ * ```
+ */
+declare function registerIcon(name: string, loader: IconLoader): void;
+/**
+ * Pre-register multiple icons at once.
+ */
+declare function registerIcons(loaders: Record<string, IconLoader>): void;
+/**
+ * Get a cached icon component synchronously.
+ * Returns null if the icon hasn't been loaded yet.
+ */
+declare function getIcon(name: string): IconComponent | null;
+/**
+ * Load an icon dynamically with caching.
+ * In production, only pre-registered icons are available.
+ */
+declare function loadIcon(name: string): Promise<IconComponent | null>;
+/**
+ * Preload multiple icons in parallel.
+ */
+declare function preloadIcons(names: string[]): Promise<void>;
+/**
+ * Check if an icon is loaded and cached.
+ */
+declare function isIconLoaded(name: string): boolean;
+
+/**
+ * Icon Metadata - Production version (minimal, no generated icon list)
+ *
+ * Only includes utilities needed at runtime, not the full search/picker functionality.
+ */
+/**
+ * Get human-readable label from icon name
+ * e.g., "IconBrandTwitter" -> "Twitter"
+ * e.g., "IconShoppingCart" -> "Shopping Cart"
+ */
+declare function getIconLabel(name: string): string;
+
+export { type BackgroundConfig, type BackgroundImageConfig, DynamicIcon, type DynamicIconProps, type EmbedFieldValue, type EmbedType, type IconComponent, type IconLoader, type OverlayConfig, SafeHtml, type SafeHtmlProps, StaticContainer, type StaticContainerProps, StaticEmbed, type StaticEmbedProps, StaticIcon, type StaticIconProps, StaticLink, type StaticLinkProps, StaticVideo, type StaticVideoProps, type VideoFieldValue, StaticContainer as YaContainer, type StaticContainerProps as YaContainerProps, StaticEmbed as YaEmbed, type StaticEmbedProps as YaEmbedProps, StaticIcon as YaIcon, type StaticIconProps as YaIconProps, StaticLink as YaLink, type StaticLinkProps as YaLinkProps, StaticVideo as YaVideo, type StaticVideoProps as YaVideoProps, getIcon, getIconLabel, isIconLoaded, loadIcon, parseBackgroundConfig, preloadIcons, registerIcon, registerIcons, serializeBackgroundConfig, serializeEmbedValue, serializeVideoValue };

package/dist/prod.js

@@ -233,10 +233,10 @@ function SafeHtml({ content, className }) {
   );
 }
 
-// src/icons/DynamicIcon.tsx
+// src/icons/DynamicIcon.prod.tsx
 import { useEffect, useState, memo } from "react";
 
-// src/icons/icon-registry.ts
+// src/icons/icon-registry.prod.ts
 var iconCache = /* @__PURE__ */ new Map();
 var pendingLoads = /* @__PURE__ */ new Map();
 var registeredLoaders = /* @__PURE__ */ new Map();
@@ -270,19 +270,12 @@ async function loadIcon(name) {
         const module = await loader();
         IconComponent = module.default;
       } else {
-        try {
-          const module = await import(
-            /* @vite-ignore */
-            `@tabler/icons-react/dist/esm/icons/${name}.mjs`
-          );
-          IconComponent = module.default;
-        } catch {
-          console.warn(`Icon "${name}" not found in @tabler/icons-react`);
-          return null;
-        }
+        console.warn(
+          `[yoamigo] Icon "${name}" not registered. In production builds, icons must be pre-registered with registerIcon(). Add to your main.tsx: registerIcon('${name}', () => import('@tabler/icons-react').then(m => ({ default: m.${name} })))`
+        );
+        return null;
       }
       if (!IconComponent) {
-        console.warn(`Icon "${name}" not found in @tabler/icons-react or custom icons`);
         return null;
       }
       if (iconCache.size >= MAX_CACHE_SIZE) {
@@ -310,7 +303,7 @@ function isIconLoaded(name) {
   return iconCache.has(name);
 }
 
-// src/icons/DynamicIcon.tsx
+// src/icons/DynamicIcon.prod.tsx
 import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 function DynamicIconComponent({
   name,
@@ -1394,8 +1387,222 @@ function embed(config) {
 function link(href) {
   return href;
 }
+function audio(config) {
+  return JSON.stringify(config);
+}
+
+// src/hooks/useSafeTriangle.ts
+import { useState as useState5, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect6, useId } from "react";
+
+// src/lib/PopoverManager.ts
+function createPopoverManager() {
+  const manager = {
+    activeId: null,
+    state: "idle",
+    popovers: /* @__PURE__ */ new Map(),
+    version: 0,
+    hideTimer: null,
+    hideDelay: 150,
+    register(popover) {
+      this.popovers.set(popover.id, popover);
+    },
+    unregister(id) {
+      this.popovers.delete(id);
+      if (this.activeId === id) {
+        this.version++;
+        this.activeId = null;
+        this.state = "idle";
+        clearTimer(this);
+      }
+    },
+    /**
+     * Called when mouse enters a trigger element.
+     * Immediately shows this popover, hiding any other active one.
+     */
+    onTriggerEnter(id) {
+      const popover = this.popovers.get(id);
+      if (!popover) return;
+      this.version++;
+      clearTimer(this);
+      if (this.activeId === id) {
+        this.state = "trigger-hover";
+        return;
+      }
+      if (this.activeId !== null) {
+        const currentPopover = this.popovers.get(this.activeId);
+        if (currentPopover) {
+          currentPopover.onHide();
+        }
+      }
+      this.activeId = id;
+      this.state = "trigger-hover";
+      popover.onShow();
+    },
+    /**
+     * Called when mouse leaves a trigger element.
+     * Starts a hide timer - user has `hideDelay` ms to reach the popover.
+     */
+    onTriggerLeave(id) {
+      if (this.activeId !== id) return;
+      clearTimer(this);
+      const capturedVersion = this.version;
+      this.hideTimer = setTimeout(() => {
+        this.hideTimer = null;
+        if (this.version === capturedVersion && this.activeId === id) {
+          hidePopover(this, id);
+        }
+      }, this.hideDelay);
+    },
+    /**
+     * Called when mouse enters a popover element.
+     *
+     * Two cases:
+     * 1. Active popover: Cancel hide timer, user successfully reached it
+     * 2. Stale popover (in exit animation): Cancel active popover's hide timer
+     *    This treats stale popover areas as "safe zones" - if user's mouse
+     *    passes through a stale popover while moving, don't hide the active one
+     */
+    onPopoverEnter(id) {
+      if (this.activeId === id) {
+        clearTimer(this);
+        this.state = "popover-hover";
+        return;
+      }
+      if (this.activeId !== null && this.hideTimer) {
+        clearTimer(this);
+        return;
+      }
+    },
+    /**
+     * Called when mouse leaves a popover element.
+     * Starts a hide timer. Note: useSafeTriangle filters out leave events
+     * from stale popovers, so this should only be called for active popovers.
+     */
+    onPopoverLeave(id) {
+      if (this.activeId !== id) return;
+      clearTimer(this);
+      const capturedVersion = this.version;
+      this.hideTimer = setTimeout(() => {
+        this.hideTimer = null;
+        if (this.version === capturedVersion && this.activeId === id) {
+          hidePopover(this, id);
+        }
+      }, this.hideDelay);
+    },
+    /**
+     * Immediately hide a popover without delay (e.g., when editing starts)
+     */
+    forceHide(id) {
+      if (this.activeId === id) {
+        this.version++;
+        hidePopover(this, id);
+      }
+    },
+    /**
+     * Check if a popover is currently active.
+     * Used by useSafeTriangle to filter out stale popover events.
+     */
+    isActive(id) {
+      return this.activeId === id;
+    }
+  };
+  return manager;
+}
+function hidePopover(manager, id) {
+  const popover = manager.popovers.get(id);
+  if (popover) {
+    popover.onHide();
+  }
+  if (manager.activeId === id) {
+    manager.activeId = null;
+    manager.state = "idle";
+  }
+  clearTimer(manager);
+}
+function clearTimer(manager) {
+  if (manager.hideTimer) {
+    clearTimeout(manager.hideTimer);
+    manager.hideTimer = null;
+  }
+}
+var popoverManager = createPopoverManager();
+
+// src/hooks/useSafeTriangle.ts
+function useSafeTriangle(options = {}) {
+  const { enabled = true } = options;
+  const instanceId = useId();
+  const [isVisible, setIsVisible] = useState5(false);
+  const triggerRef = useRef5(null);
+  const popoverRef = useRef5(null);
+  const isVisibleRef = useRef5(isVisible);
+  isVisibleRef.current = isVisible;
+  useEffect6(() => {
+    if (!enabled) return;
+    popoverManager.register({
+      id: instanceId,
+      triggerRef,
+      popoverRef,
+      onShow: () => setIsVisible(true),
+      onHide: () => setIsVisible(false)
+    });
+    return () => {
+      popoverManager.unregister(instanceId);
+    };
+  }, [instanceId, enabled]);
+  useEffect6(() => {
+    if (!enabled && isVisibleRef.current) {
+      setIsVisible(false);
+      popoverManager.forceHide(instanceId);
+    }
+  }, [enabled, instanceId]);
+  const show = useCallback3(() => {
+    if (!enabled) return;
+    setIsVisible(true);
+  }, [enabled]);
+  const hide = useCallback3(() => {
+    setIsVisible(false);
+    popoverManager.forceHide(instanceId);
+  }, [instanceId]);
+  const handleMouseEnter = useCallback3(() => {
+    if (!enabled) return;
+    popoverManager.onTriggerEnter(instanceId);
+  }, [enabled, instanceId]);
+  const handleMouseLeave = useCallback3(() => {
+    if (!enabled) return;
+    popoverManager.onTriggerLeave(instanceId);
+  }, [enabled, instanceId]);
+  const handleFocus = useCallback3(() => {
+    if (!enabled) return;
+    popoverManager.onTriggerEnter(instanceId);
+  }, [enabled, instanceId]);
+  const handlePopoverEnter = useCallback3(() => {
+    if (!enabled) return;
+    popoverManager.onPopoverEnter(instanceId);
+  }, [enabled, instanceId]);
+  const handlePopoverLeave = useCallback3(() => {
+    if (!enabled) return;
+    if (!popoverManager.isActive(instanceId)) return;
+    popoverManager.onPopoverLeave(instanceId);
+  }, [enabled, instanceId]);
+  return {
+    triggerRef,
+    popoverRef,
+    isVisible,
+    handlers: {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus
+    },
+    popoverHandlers: {
+      onMouseEnter: handlePopoverEnter,
+      onMouseLeave: handlePopoverLeave
+    },
+    show,
+    hide
+  };
+}
 
-// src/icons/icon-metadata.ts
+// src/icons/icon-metadata.prod.ts
 function getIconLabel(name) {
   let label = name.replace(/^Icon/, "");
   label = label.replace(/^Brand/, "");
@@ -1426,6 +1633,7 @@ export {
   StaticLink as YaLink,
   MpText as YaText,
   StaticVideo as YaVideo,
+  audio,
   background,
   contentRegistry,
   createRouteDefinition,
@@ -1459,5 +1667,6 @@ export {
   useLocation4 as useLocation,
   useNavigate,
   useParams,
+  useSafeTriangle,
   video
 };