@almadar/ui 5.36.0 → 5.37.0

package/dist/runtime/index.cjs

@@ -7,9 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var providers = require('@almadar/ui/providers');
 var logger = require('@almadar/logger');
 var LucideIcons2 = require('lucide-react');
-var PhosphorIcons = require('@phosphor-icons/react');
-var TablerIcons = require('@tabler/icons-react');
-var FaIcons = require('react-icons/fa');
 var reactDom = require('react-dom');
 var hooks = require('@almadar/ui/hooks');
 var evaluator = require('@almadar/evaluator');
@@ -70,9 +67,6 @@ function _interopNamespace(e) {
 
 var React82__namespace = /*#__PURE__*/_interopNamespace(React82);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
-var PhosphorIcons__namespace = /*#__PURE__*/_interopNamespace(PhosphorIcons);
-var TablerIcons__namespace = /*#__PURE__*/_interopNamespace(TablerIcons);
-var FaIcons__namespace = /*#__PURE__*/_interopNamespace(FaIcons);
 var ELK__default = /*#__PURE__*/_interopDefault(ELK);
 var SyntaxHighlighter__default = /*#__PURE__*/_interopDefault(SyntaxHighlighter);
 var dark__default = /*#__PURE__*/_interopDefault(dark);
@@ -578,6 +572,41 @@ function kebabToPascal(name) {
     return part.charAt(0).toUpperCase() + part.slice(1);
   }).join("");
 }
+function loadLib(key, importer) {
+  let p2 = libPromises.get(key);
+  if (!p2) {
+    p2 = importer().then((m) => m);
+    libPromises.set(key, p2);
+  }
+  return p2;
+}
+function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
+  const Lazy = React82__namespace.default.lazy(async () => {
+    const lib = await loadLib(libKey, importer);
+    const Comp = pick(lib);
+    if (!Comp) {
+      warnFallback(fallbackName, family);
+      return { default: makeLucideAdapter(fallbackName, true) };
+    }
+    return { default: Comp };
+  });
+  const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    React82__namespace.default.Suspense,
+    {
+      fallback: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: props.className,
+          style: { display: "inline-block", ...props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Lazy, { ...props })
+    }
+  );
+  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
+  return Wrapped;
+}
 function resolveLucide(name) {
   if (lucideAliases[name]) return lucideAliases[name];
   const pascal = kebabToPascal(name);
@@ -588,60 +617,81 @@ function resolveLucide(name) {
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2__namespace.HelpCircle;
 }
-function resolvePhosphor(name, weight) {
+function resolvePhosphor(name, weight, family) {
   const target = phosphorAliases[name] ?? kebabToPascal(name);
-  const map = PhosphorIcons__namespace;
-  const PhosphorComp = map[target];
-  if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
-  const Component = PhosphorComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      weight,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "phosphor",
+    () => import('@phosphor-icons/react'),
+    (lib) => {
+      const PhosphorComp = lib[target];
+      if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+      const Component = PhosphorComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          weight,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Phosphor.${target}.${weight}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Phosphor.${target}.${weight}`;
-  return Adapter;
 }
-function resolveTabler(name) {
+function resolveTabler(name, family) {
   const suffix = tablerAliases[name] ?? kebabToPascal(name);
   const target = `Icon${suffix}`;
-  const map = TablerIcons__namespace;
-  const TablerComp = map[target];
-  if (!TablerComp || typeof TablerComp !== "object") return null;
-  const Component = TablerComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      stroke: props.strokeWidth ?? 1.5,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? 24
-    }
+  return lazyFamilyIcon(
+    "tabler",
+    () => import('@tabler/icons-react'),
+    (lib) => {
+      const TablerComp = lib[target];
+      if (!TablerComp || typeof TablerComp !== "object") return null;
+      const Component = TablerComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          stroke: props.strokeWidth ?? 1.5,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? 24
+        }
+      );
+      Adapter.displayName = `Tabler.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Tabler.${target}`;
-  return Adapter;
 }
-function resolveFa(name) {
+function resolveFa(name, family) {
   const suffix = faAliases[name] ?? kebabToPascal(name);
   const target = `Fa${suffix}`;
-  const map = FaIcons__namespace;
-  const FaComp = map[target];
-  if (!FaComp || typeof FaComp !== "function") return null;
-  const Component = FaComp;
-  const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-    Component,
-    {
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "fa",
+    () => import('react-icons/fa'),
+    (lib) => {
+      const FaComp = lib[target];
+      if (!FaComp || typeof FaComp !== "function") return null;
+      const Component = FaComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component,
+        {
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Fa.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Fa.${target}`;
-  return Adapter;
 }
 function warnFallback(name, family) {
   const key = `${family}::${name}`;
@@ -675,39 +725,22 @@ function resolveIconForFamily(name, family) {
   switch (family) {
     case "lucide":
       return makeLucideAdapter(name, false);
-    case "phosphor-outline": {
-      const p2 = resolvePhosphor(name, "regular");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-fill": {
-      const p2 = resolvePhosphor(name, "fill");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-duotone": {
-      const p2 = resolvePhosphor(name, "duotone");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "tabler": {
-      const t = resolveTabler(name);
-      if (t) return t;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "fa-solid": {
-      const f3 = resolveFa(name);
-      if (f3) return f3;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-  }
-}
-var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
+    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
+    // dynamic-imports the library on first render and falls back to lucide
+    // internally when the family lacks the icon (see lazyFamilyIcon).
+    case "phosphor-outline":
+      return resolvePhosphor(name, "regular", family);
+    case "phosphor-fill":
+      return resolvePhosphor(name, "fill", family);
+    case "phosphor-duotone":
+      return resolvePhosphor(name, "duotone", family);
+    case "tabler":
+      return resolveTabler(name, family);
+    case "fa-solid":
+      return resolveFa(name, family);
+  }
+}
+var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, libPromises, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
 var init_iconFamily = __esm({
   "lib/iconFamily.tsx"() {
     "use client";
@@ -723,6 +756,7 @@ var init_iconFamily = __esm({
     cachedFamily = null;
     listeners = /* @__PURE__ */ new Set();
     observer = null;
+    libPromises = /* @__PURE__ */ new Map();
     lucideAliases = {
       close: LucideIcons2__namespace.X,
       trash: LucideIcons2__namespace.Trash2,

package/dist/runtime/index.js

@@ -7,9 +7,6 @@ import { EventBusContext, useTraitScope, OrbitalProvider, TraitScopeProvider, Ve
 import { createLogger, isLogLevelEnabled } from '@almadar/logger';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X, Lightbulb, CheckCircle, List, Printer, ChevronRight, ChevronLeft, GitBranch, Pencil, Eye, Plus, ArrowRight, Trash, Code, FileText, WrapText, Check, Copy, RotateCcw, Play, Terminal, XCircle, AlertTriangle, Trash2, Link2, ZoomOut, ZoomIn, Download, Menu as Menu$1, Package, Calendar, MoreHorizontal, Image as Image$1, Upload, ArrowLeft, HelpCircle, PauseCircle, Search, Type, Heading1, Heading2, Heading3, ListOrdered, Quote, Minus, Eraser, TrendingUp, TrendingDown, AlertCircle, Circle, Clock, CheckCircle2, Pause, SkipForward, Bug, Send, ChevronUp, ChevronDown, Wrench, Tag, User, DollarSign, Zap, Sword, Move, Heart, Shield } from 'lucide-react';
-import * as PhosphorIcons from '@phosphor-icons/react';
-import * as TablerIcons from '@tabler/icons-react';
-import * as FaIcons from 'react-icons/fa';
 import { createPortal } from 'react-dom';
 import { useTranslate, useEventBus as useEventBus$1 } from '@almadar/ui/hooks';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
@@ -529,6 +526,41 @@ function kebabToPascal(name) {
     return part.charAt(0).toUpperCase() + part.slice(1);
   }).join("");
 }
+function loadLib(key, importer) {
+  let p2 = libPromises.get(key);
+  if (!p2) {
+    p2 = importer().then((m) => m);
+    libPromises.set(key, p2);
+  }
+  return p2;
+}
+function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
+  const Lazy = React82__default.lazy(async () => {
+    const lib = await loadLib(libKey, importer);
+    const Comp = pick(lib);
+    if (!Comp) {
+      warnFallback(fallbackName, family);
+      return { default: makeLucideAdapter(fallbackName, true) };
+    }
+    return { default: Comp };
+  });
+  const Wrapped = (props) => /* @__PURE__ */ jsx(
+    React82__default.Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: props.className,
+          style: { display: "inline-block", ...props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsx(Lazy, { ...props })
+    }
+  );
+  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
+  return Wrapped;
+}
 function resolveLucide(name) {
   if (lucideAliases[name]) return lucideAliases[name];
   const pascal = kebabToPascal(name);
@@ -539,60 +571,81 @@ function resolveLucide(name) {
   if (asIs && typeof asIs === "object") return asIs;
   return LucideIcons2.HelpCircle;
 }
-function resolvePhosphor(name, weight) {
+function resolvePhosphor(name, weight, family) {
   const target = phosphorAliases[name] ?? kebabToPascal(name);
-  const map = PhosphorIcons;
-  const PhosphorComp = map[target];
-  if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
-  const Component = PhosphorComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      weight,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "phosphor",
+    () => import('@phosphor-icons/react'),
+    (lib) => {
+      const PhosphorComp = lib[target];
+      if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+      const Component = PhosphorComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          weight,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Phosphor.${target}.${weight}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Phosphor.${target}.${weight}`;
-  return Adapter;
 }
-function resolveTabler(name) {
+function resolveTabler(name, family) {
   const suffix = tablerAliases[name] ?? kebabToPascal(name);
   const target = `Icon${suffix}`;
-  const map = TablerIcons;
-  const TablerComp = map[target];
-  if (!TablerComp || typeof TablerComp !== "object") return null;
-  const Component = TablerComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      stroke: props.strokeWidth ?? 1.5,
-      className: props.className,
-      style: props.style,
-      size: props.size ?? 24
-    }
+  return lazyFamilyIcon(
+    "tabler",
+    () => import('@tabler/icons-react'),
+    (lib) => {
+      const TablerComp = lib[target];
+      if (!TablerComp || typeof TablerComp !== "object") return null;
+      const Component = TablerComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          stroke: props.strokeWidth ?? 1.5,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? 24
+        }
+      );
+      Adapter.displayName = `Tabler.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Tabler.${target}`;
-  return Adapter;
 }
-function resolveFa(name) {
+function resolveFa(name, family) {
   const suffix = faAliases[name] ?? kebabToPascal(name);
   const target = `Fa${suffix}`;
-  const map = FaIcons;
-  const FaComp = map[target];
-  if (!FaComp || typeof FaComp !== "function") return null;
-  const Component = FaComp;
-  const Adapter = (props) => /* @__PURE__ */ jsx(
-    Component,
-    {
-      className: props.className,
-      style: props.style,
-      size: props.size ?? "1em"
-    }
+  return lazyFamilyIcon(
+    "fa",
+    () => import('react-icons/fa'),
+    (lib) => {
+      const FaComp = lib[target];
+      if (!FaComp || typeof FaComp !== "function") return null;
+      const Component = FaComp;
+      const Adapter = (props) => /* @__PURE__ */ jsx(
+        Component,
+        {
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Fa.${target}`;
+      return Adapter;
+    },
+    name,
+    family
   );
-  Adapter.displayName = `Fa.${target}`;
-  return Adapter;
 }
 function warnFallback(name, family) {
   const key = `${family}::${name}`;
@@ -626,39 +679,22 @@ function resolveIconForFamily(name, family) {
   switch (family) {
     case "lucide":
       return makeLucideAdapter(name, false);
-    case "phosphor-outline": {
-      const p2 = resolvePhosphor(name, "regular");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-fill": {
-      const p2 = resolvePhosphor(name, "fill");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "phosphor-duotone": {
-      const p2 = resolvePhosphor(name, "duotone");
-      if (p2) return p2;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "tabler": {
-      const t = resolveTabler(name);
-      if (t) return t;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-    case "fa-solid": {
-      const f3 = resolveFa(name);
-      if (f3) return f3;
-      warnFallback(name, family);
-      return makeLucideAdapter(name, true);
-    }
-  }
-}
-var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
+    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
+    // dynamic-imports the library on first render and falls back to lucide
+    // internally when the family lacks the icon (see lazyFamilyIcon).
+    case "phosphor-outline":
+      return resolvePhosphor(name, "regular", family);
+    case "phosphor-fill":
+      return resolvePhosphor(name, "fill", family);
+    case "phosphor-duotone":
+      return resolvePhosphor(name, "duotone", family);
+    case "tabler":
+      return resolveTabler(name, family);
+    case "fa-solid":
+      return resolveFa(name, family);
+  }
+}
+var DEFAULT_FAMILY, VALID_FAMILIES, cachedFamily, listeners, observer, libPromises, lucideAliases, phosphorAliases, tablerAliases, faAliases, warned;
 var init_iconFamily = __esm({
   "lib/iconFamily.tsx"() {
     "use client";
@@ -674,6 +710,7 @@ var init_iconFamily = __esm({
     cachedFamily = null;
     listeners = /* @__PURE__ */ new Set();
     observer = null;
+    libPromises = /* @__PURE__ */ new Map();
     lucideAliases = {
       close: LucideIcons2.X,
       trash: LucideIcons2.Trash2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.36.0",
+  "version": "5.37.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [