@columenlabs/lumen-ui 0.1.191 → 0.1.193

package/dist/setting-parts.js

@@ -18,7 +18,9 @@ import { InputGroup, InputGroupAddon, InputGroupButton } from './ui/input-group.
 import { Label } from './ui/label.js';
 /** One setting inside an item: its label, then its control group, then an optional switch at the end. */
 export function SettingField({ label, info, htmlFor, end, stack = false, className, children, }) {
-    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
+    return (_jsxs("div", { "data-slot": "setting-field", "data-stack": stack || undefined, className: cn('flex min-h-10 min-w-0 items-center gap-3 border-t border-border/60 py-1.5 first:border-t-0', stack && 'max-sm:flex-wrap max-sm:gap-y-1.5', className), children: [_jsxs("div", { className: cn('flex w-32 shrink-0 items-center gap-1.5 max-sm:w-24', stack && 'max-sm:w-auto max-sm:flex-1', 
+                // Nothing beside it but `end`: the label takes the row, so a short name never cuts off.
+                children === undefined && 'w-auto min-w-0 flex-1 shrink max-sm:w-auto'), children: [_jsx(Label, { htmlFor: htmlFor, className: "truncate font-normal text-muted-foreground", title: label, children: label }), info && _jsx(InfoTip, { label: `About ${label}`, children: info })] }), children !== undefined && (_jsx("div", { className: cn('flex min-w-0 max-w-md flex-1 items-center gap-2', stack && 'max-sm:order-2 max-sm:max-w-none max-sm:basis-full'), children: children })), end && _jsx("div", { className: cn('ml-auto shrink-0', stack && 'max-sm:order-1'), children: end })] }));
 }
 /** A value read in place: cut to one line with the full text on hover, with Copy and Replace inside. */
 export function SettingValue({ value, label, mono = false, copy = false, onReplace, replaceLabel = 'Replace', replaceIcon: ReplaceIcon = PencilIcon, }) {

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.191",
+  "version": "0.1.193",
   "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.191",
+    "@columenlabs/lumen-ui-types": "0.1.193",
     "@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",