@columenlabs/lumen-ui 0.1.192 → 0.1.194

package/dist/view-icons.d.ts

@@ -11,7 +11,7 @@ export declare const viewIcon: (config: {
 export declare const iconOf: (icon: ViewIcon | null | undefined, fallback: NavIcon) => NavIcon;
 /** Every lucide icon name, for the icon picker's search: empty until `load` asks for the map and it lands. */
 export declare function useLucideIconNames(load?: boolean): readonly string[];
-/** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
+/** Any lucide icon by name, loaded on first use (all icons in one lazy file). */
 export declare const lucideIcon: (name: string, fallback?: NavIcon) => NavIcon;
 /** An emoji drawn where an icon goes. */
 export declare const emojiIcon: (emoji: string) => NavIcon;

package/dist/view-icons.js

@@ -1,4 +1,4 @@
-import { BanknoteIcon, BriefcaseIcon, CalendarIcon, ChartBarIcon, ChartLineIcon, ChartPieIcon, ClockIcon, CoinsIcon, FlameIcon, Grid3x3Icon, LandmarkIcon, LayersIcon, ListTreeIcon, PiggyBankIcon, ReceiptIcon, ShieldIcon, StarIcon, TableIcon, TagIcon, TargetIcon, TrendingDownIcon, TrendingUpIcon, WalletIcon, ZapIcon, } from 'lucide-react';
+import { BanknoteIcon, BriefcaseIcon, CalendarIcon, ChartBarIcon, ChartLineIcon, ChartPieIcon, ClockIcon, CoinsIcon, FlameIcon, Grid3x3Icon, Icon, LandmarkIcon, LayersIcon, ListTreeIcon, PiggyBankIcon, ReceiptIcon, ShieldIcon, StarIcon, TableIcon, TagIcon, TargetIcon, TrendingDownIcon, TrendingUpIcon, WalletIcon, ZapIcon, } from 'lucide-react';
 import { createElement, useEffect, useState } from 'react';
 import { cn } from './lib/utils.js';
 export const VIEW_ICONS = {
@@ -41,15 +41,32 @@ export const iconOf = (icon, fallback) => {
     if (icon in VIEW_ICONS)
         return VIEW_ICONS[icon];
     if (/^[a-z]/.test(icon))
-        return lucide && !lucide.names.has(icon) ? fallback : lucideIcon(icon, fallback);
+        return lucide && !lucide.nodes.has(iconKey(icon)) ? fallback : lucideIcon(icon, fallback);
     return emojiIcon(icon);
 };
 let lucide;
 let loadingLucide;
+/** A name's lookup key: `arrow-down-0-1`, `arrow-down-01` and `ArrowDown01` are one icon. */
+const iconKey = (name) => name.replace(/-/g, '').toLowerCase();
+/** `ArrowDown01` → `arrow-down-01`, the name the picker shows and saves. */
+const kebab = (pascal) => pascal
+    .replace(/([a-z])([A-Z0-9])/g, '$1-$2')
+    .replace(/([0-9])([A-Za-z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase();
 function loadLucide() {
     if (!loadingLucide)
-        loadingLucide = import('lucide-react/dynamic').then((m) => {
-            lucide = { ...m, names: new Set(m.iconNames) };
+        loadingLucide = import('lucide').then(({ icons }) => {
+            const nodes = new Map();
+            const iconNames = [];
+            for (const [pascal, node] of Object.entries(icons)) {
+                const key = iconKey(pascal);
+                if (nodes.has(key))
+                    continue;
+                nodes.set(key, node);
+                iconNames.push(kebab(pascal));
+            }
+            lucide = { iconNames: iconNames.sort(), nodes };
             return lucide;
         });
     return loadingLucide;
@@ -75,9 +92,10 @@ function LucideByName({ name, fallback, className, }) {
             'aria-hidden': true,
             className: cn('inline-block size-4 shrink-0', className),
         });
-    if (!lucide.names.has(name))
+    const node = lucide.nodes.get(iconKey(name));
+    if (!node)
         return fallback ? createElement(fallback, { className }) : null;
-    return createElement(lucide.DynamicIcon, { name: name, className });
+    return createElement(Icon, { iconNode: node, className });
 }
 const made = new Map();
 /** One component per pick, so React keeps it between renders. */
@@ -89,7 +107,7 @@ const once = (key, make) => {
     }
     return Icon;
 };
-/** Any lucide icon by name, loaded on first use (lucide's own DynamicIcon). */
+/** Any lucide icon by name, loaded on first use (all icons in one lazy file). */
 export const lucideIcon = (name, fallback) => once(`lucide:${name}`, () => ({ className }) => createElement(LucideByName, { name, fallback, className }));
 /** An emoji drawn where an icon goes. */
 export const emojiIcon = (emoji) => once(`emoji:${emoji}`, () => ({ className }) => createElement('span', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.192",
+  "version": "0.1.194",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.192",
+    "@columenlabs/lumen-ui-types": "0.1.194",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
@@ -69,6 +69,7 @@
     "i18n-iso-countries": "7.14.0",
     "indicatorts": "^2.2.2",
     "lightweight-charts": "^5.2.1",
+    "lucide": "^1.48.0",
     "lucide-react": "^1.48.0",
     "papaparse": "5.5.3",
     "qrcode.react": "4.2.0",