@asteby/metacore-runtime-react 39.2.5 → 39.2.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @asteby/metacore-runtime-react
 
+## 39.2.6
+
+### Patch Changes
+
+- 8629139: Los iconos de Lucide se cargan por glifo, las celdas de una columna de referencia comparten una sola petición de options, y la tile del POS pinta solo lo que entra en pantalla.
+- Updated dependencies [8629139]
+  - @asteby/metacore-ui@2.18.2
+
 ## 39.2.5
 
 ### Patch Changes

package/dist/activity-value-renderer.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * column-factory machinery — only React + metacore-ui primitives.
  */
 import * as React from 'react';
-import * as icons from 'lucide-react';
+import { Calendar, Check, ExternalLink, Mail, Minus } from 'lucide-react';
 import { es, enUS } from 'date-fns/locale';
 import { Badge, Avatar, AvatarImage, AvatarFallback, } from '@asteby/metacore-ui/primitives';
 import { generateBadgeStyles, getInitials, optionColor, relationChipStyles } from '@asteby/metacore-ui/lib';
@@ -153,13 +153,13 @@ export const ActivityValueRenderer = ({ value, col, timeZone, currency, locale =
         const formatted = formatDateCell(value, renderAs, dateLocale, timeZone);
         if (!formatted)
             return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
-        return (_jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", title: formatted.title, children: [_jsx(icons.Calendar, { className: "h-3 w-3 opacity-60" }), formatted.display] }));
+        return (_jsxs("span", { className: "inline-flex items-center gap-1 text-sm text-muted-foreground", title: formatted.title, children: [_jsx(Calendar, { className: "h-3 w-3 opacity-60" }), formatted.display] }));
     }
     // -----------------------------------------------------------------------
     // Boolean
     // -----------------------------------------------------------------------
     if (renderAs === 'boolean') {
-        return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [value ? (_jsx(icons.Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(icons.Minus, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
+        return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [value ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(Minus, { className: "h-3.5 w-3.5 text-muted-foreground" })), _jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' })] }));
     }
     // -----------------------------------------------------------------------
     // Currency
@@ -219,14 +219,14 @@ export const ActivityValueRenderer = ({ value, col, timeZone, currency, locale =
         catch {
             label = urlStr;
         }
-        return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.ExternalLink, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: label })] }));
+        return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(ExternalLink, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: label })] }));
     }
     // -----------------------------------------------------------------------
     // Email
     // -----------------------------------------------------------------------
     if (renderAs === 'email') {
         const email = String(value);
-        return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.Mail, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: email })] }));
+        return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1 text-sm text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(Mail, { className: "h-3 w-3 shrink-0" }), _jsx("span", { className: "truncate", style: { maxWidth: 200 }, children: email })] }));
     }
     // -----------------------------------------------------------------------
     // Relation chip (FK / reference)

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"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"}

package/dist/dynamic-columns.js

@@ -15,8 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { format } from 'date-fns';
 import { es, enUS } from 'date-fns/locale';
-import * as icons from 'lucide-react';
-import { MoreHorizontal } from 'lucide-react';
+import { Calendar, Check, Copy, Mail, Minus, MoreHorizontal } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InitialsAvatar, } from '@asteby/metacore-ui';
 import { DataTableColumnHeader, FilterableColumnHeader, } from '@asteby/metacore-ui/data-table';
 import { generateBadgeStyles, getInitials, relationChipStyles, } from '@asteby/metacore-ui/lib';
@@ -106,7 +105,7 @@ const CodeCell = ({ text, maxLength }) => {
             /* clipboard unavailable */
         }
     };
-    return (_jsxs("div", { className: "group flex items-center gap-1.5", children: [_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground/80", title: text, children: display }), _jsx("button", { type: "button", onClick: onCopy, className: "opacity-0 transition-opacity group-hover:opacity-100 text-muted-foreground hover:text-foreground", "aria-label": "Copiar", title: "Copiar", children: copied ? (_jsx(icons.Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(icons.Copy, { className: "h-3.5 w-3.5" })) })] }));
+    return (_jsxs("div", { className: "group flex items-center gap-1.5", children: [_jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground/80", title: text, children: display }), _jsx("button", { type: "button", onClick: onCopy, className: "opacity-0 transition-opacity group-hover:opacity-100 text-muted-foreground hover:text-foreground", "aria-label": "Copiar", title: "Copiar", children: copied ? (_jsx(Check, { className: "h-3.5 w-3.5 text-green-500" })) : (_jsx(Copy, { className: "h-3.5 w-3.5" })) })] }));
 };
 /**
  * Lifecycle column used by `requiresState`: prefer `status` (workshop, vehicles,
@@ -762,7 +761,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             const formatted = formatDateCell(value, renderAs, dateLocale, timeZone);
                             if (!formatted)
                                 return _jsx("span", { className: "text-muted-foreground", children: "-" });
-                            return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", title: formatted.title, children: [_jsx(icons.Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: formatted.display })] }));
+                            return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", title: formatted.title, children: [_jsx(Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: formatted.display })] }));
                         }
                         case 'search':
                         case 'avatar':
@@ -819,7 +818,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             if (!value)
                                 return _jsx(EmptyCell, {});
                             const email = String(value);
-                            return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(icons.Mail, { className: "h-3.5 w-3.5 shrink-0 opacity-70" }), _jsx("span", { className: "truncate max-w-[260px]", children: email })] }));
+                            return (_jsxs("a", { href: `mailto:${email}`, className: "inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline", onClick: (e) => e.stopPropagation(), children: [_jsx(Mail, { className: "h-3.5 w-3.5 shrink-0 opacity-70" }), _jsx("span", { className: "truncate max-w-[260px]", children: email })] }));
                         }
                         case 'currency': {
                             const num = typeof value === 'number' ? value : Number(value);
@@ -909,7 +908,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                         }
                         case 'boolean': {
                             const showText = styleCfg(col, 'show_text', 'showText') !== false;
-                            return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [value ? (_jsx(icons.Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(icons.Minus, { className: "h-4 w-4 text-muted-foreground" })), showText && (_jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' }))] }));
+                            return (_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [value ? (_jsx(Check, { className: "h-4 w-4 text-green-500" })) : (_jsx(Minus, { className: "h-4 w-4 text-muted-foreground" })), showText && (_jsx("span", { className: "text-sm text-muted-foreground", children: value ? 'Sí' : 'No' }))] }));
                         }
                         case 'media-gallery': {
                             if (!value || (Array.isArray(value) && value.length === 0)) {

package/dist/dynamic-icon.d.ts

@@ -5,4 +5,6 @@ export interface DynamicIconProps {
 export declare function DynamicIcon({ name, className }: DynamicIconProps): import("react").JSX.Element | null;
 export declare function resolveLucideIconName(value: unknown): string | null;
 export declare function isLucideIconName(value: unknown): value is string;
+/** PascalCase names of every lucide glyph, for the icon picker grid. */
+export declare function lucideIconNames(): string[];
 //# sourceMappingURL=dynamic-icon.d.ts.map

package/dist/dynamic-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-icon.d.ts","sourceRoot":"","sources":["../src/dynamic-icon.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,sCAKhE;AAMD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CAYnE;AASD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEhE"}
+{"version":3,"file":"dynamic-icon.d.ts","sourceRoot":"","sources":["../src/dynamic-icon.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AAuBD,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,sCAchE;AAMD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,CASnE;AASD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAEhE;AAED,wEAAwE;AACxE,wBAAgB,eAAe,IAAI,MAAM,EAAE,CAE1C"}

package/dist/dynamic-icon.js

@@ -1,14 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Minimal DynamicIcon — resolves a lucide-react icon by name. Used across
-// action modals and the default row-action menus. Hosts that need custom
-// icon sets can override by shadowing this component via their own prop.
-import * as icons from 'lucide-react';
+// DynamicIcon resolves a lucide glyph by name without pulling the full icon
+// set into the shared chunk. Each glyph is its own dynamic import.
+import { lazy, Suspense, useMemo } from 'react';
+import dynamicIconImports from 'lucide-react/dynamicIconImports';
+function pascalToKebab(pascal) {
+    return pascal
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
+function kebabToPascal(kebab) {
+    return kebab
+        .split('-')
+        .map((part) => (part ? part.charAt(0).toUpperCase() + part.slice(1) : ''))
+        .join('');
+}
+function loaderFor(pascal) {
+    const kebab = pascalToKebab(pascal);
+    return dynamicIconImports[kebab];
+}
 export function DynamicIcon({ name, className }) {
-    const resolved = resolveLucideIconName(name) ?? name;
-    const Icon = icons[resolved];
+    const resolved = resolveLucideIconName(name);
+    const Icon = useMemo(() => {
+        if (!resolved)
+            return null;
+        const loader = loaderFor(resolved);
+        if (!loader)
+            return null;
+        return lazy(loader);
+    }, [resolved]);
     if (!Icon)
         return null;
-    return _jsx(Icon, { className: className });
+    return (_jsx(Suspense, { fallback: null, children: _jsx(Icon, { className: className }) }));
 }
 // resolveLucideIconName — canonical PascalCase lucide name for a value that is
 // either already PascalCase ("CreditCard") or the kebab slug lucide documents
@@ -21,14 +44,11 @@ export function resolveLucideIconName(value) {
         return null;
     let name = value;
     if (/^[a-z0-9]+(-[a-z0-9]+)*$/.test(value)) {
-        name = value
-            .split('-')
-            .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
-            .join('');
+        name = kebabToPascal(value);
     }
     if (!/^[A-Z][A-Za-z0-9]*$/.test(name))
         return null;
-    return icons[name] ? name : null;
+    return loaderFor(name) ? name : null;
 }
 // isLucideIconName — true when a string is a lucide-react icon name
 // ("Banknote", "CreditCard", or the kebab slug "credit-card"). Lets image-ish
@@ -40,3 +60,7 @@ export function resolveLucideIconName(value) {
 export function isLucideIconName(value) {
     return resolveLucideIconName(value) !== null;
 }
+/** PascalCase names of every lucide glyph, for the icon picker grid. */
+export function lucideIconNames() {
+    return Object.keys(dynamicIconImports).map(kebabToPascal);
+}

package/dist/icon-picker-field.js

@@ -13,15 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // initial mode is inferred from the current value — path-like ("/" or ".")
 // means image, anything else means icon.
 import { useMemo, useState } from 'react';
-import { icons } from 'lucide-react';
 import { ChevronsUpDown } from 'lucide-react';
+import { lucideIconNames } from './dynamic-icon';
 import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
 import { DynamicIcon, resolveLucideIconName } from './dynamic-icon';
 import { UploadField } from './upload-field';
 /** Icons rendered per "page" — grows as the user scrolls to the bottom. Keeps
  * the DOM light: the lucide catalog is ~1500 glyphs, so we never mount them all. */
 const PAGE = 60;
-const ALL_ICON_NAMES = Object.keys(icons);
+const ALL_ICON_NAMES = lucideIconNames();
 /** True when a stored value looks like an image url/path rather than an icon name. */
 export function looksLikeImageValue(value) {
     return typeof value === 'string' && value !== '' && /[/.]/.test(value);

package/dist/use-options-resolver.d.ts

@@ -76,16 +76,7 @@ export interface UseOptionsResolverResult {
     /** Forces a refetch. Useful after a parent record updates. */
     refetch: () => void;
 }
-/**
- * Resolves select options for a field via the canonical
- * `/api/options/:model?field=…` endpoint. Returns the v0.9.0 envelope
- * `{ data, meta: { type, count } }` projected into a stable shape.
- *
- * The hook is intentionally minimal: it does NOT debounce `query`
- * (callers should hold the controlled value and pass it post-debounce)
- * and does NOT cache across hook instances (apps that need shared state
- * compose this with TanStack Query in their own layer).
- */
+export declare function optionsRequestKey(scope: string, url: string, field: string, query: string, limit: number | undefined, filter: string | undefined): string;
 export declare function useOptionsResolver(args: UseOptionsResolverArgs): UseOptionsResolverResult;
 /**
  * Normalizes the wire shape into ResolvedOption. The kernel returns dual

package/dist/use-options-resolver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-options-resolver.d.ts","sourceRoot":"","sources":["../src/use-options-resolver.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,WAAW;IACxB,oEAAoE;IACpE,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACnC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,sBAAsB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,wBAAwB,CAsHzF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,CAatD"}
+{"version":3,"file":"use-options-resolver.d.ts","sourceRoot":"","sources":["../src/use-options-resolver.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc;IAC3B,8CAA8C;IAC9C,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACvB;AAED,MAAM,WAAW,WAAW;IACxB,oEAAoE;IACpE,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACnC,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,sBAAsB;IACnC;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,IAAI,EAAE,WAAW,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,8DAA8D;IAC9D,OAAO,EAAE,MAAM,IAAI,CAAA;CACtB;AAoBD,wBAAgB,iBAAiB,CAC7B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,EAAE,MAAM,GAAG,SAAS,GAC3B,MAAM,CAER;AA8BD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,sBAAsB,GAAG,wBAAwB,CAkIzF;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,cAAc,CAatD"}

package/dist/use-options-resolver.js

@@ -17,11 +17,46 @@ import { useApi } from './api-context';
  * `/api/options/:model?field=…` endpoint. Returns the v0.9.0 envelope
  * `{ data, meta: { type, count } }` projected into a stable shape.
  *
- * The hook is intentionally minimal: it does NOT debounce `query`
- * (callers should hold the controlled value and pass it post-debounce)
- * and does NOT cache across hook instances (apps that need shared state
- * compose this with TanStack Query in their own layer).
+ * The hook does NOT debounce `query` (callers should pass it post-debounce).
+ * Identical lookups share one in-flight request and a 30s cache, so a column
+ * of reference cells does not fan out one request per row. The key includes
+ * the org and branch from the host session.
  */
+const OPTIONS_TTL_MS = 30_000;
+const optionsCache = new Map();
+const optionsInflight = new Map();
+const optionsEpoch = new Map();
+export function optionsRequestKey(scope, url, field, query, limit, filter) {
+    return [scope, url, field, query, String(limit ?? ''), filter ?? ''].join('\n');
+}
+function optionsScope() {
+    if (typeof localStorage === 'undefined')
+        return '';
+    let org = '';
+    try {
+        const raw = localStorage.getItem('auth_user');
+        if (raw)
+            org = String(JSON.parse(raw).organization_id ?? '');
+    }
+    catch {
+        org = '';
+    }
+    const branch = localStorage.getItem('active_branch_id') ?? '';
+    return `${org}|${branch}`;
+}
+function readOptionsEnvelope(body) {
+    const rawOptions = Array.isArray(body?.data) ? body.data : [];
+    const metaPayload = body?.meta && typeof body.meta === 'object'
+        ? body.meta
+        : { type: body?.type, count: rawOptions.length };
+    return {
+        options: rawOptions.map(projectOption),
+        meta: {
+            type: metaPayload?.type ?? 'dynamic',
+            count: typeof metaPayload?.count === 'number' ? metaPayload.count : rawOptions.length,
+        },
+    };
+}
 export function useOptionsResolver(args) {
     const { modelKey, fieldKey, ref, query, limit, enabled = true, endpoint, filterValue, } = args;
     const api = useApi();
@@ -55,9 +90,7 @@ export function useOptionsResolver(args) {
             return 'id';
         return '';
     }, [fieldKey, ref]);
-    // Track the in-flight controller so a new fetch can abort the
-    // previous one — matters for typeahead callers passing changing `query`.
-    const abortRef = useRef(null);
+    const seenRefresh = useRef(0);
     useEffect(() => {
         if (!enabled || !url || !effectiveField) {
             setOptions([]);
@@ -66,61 +99,70 @@ export function useOptionsResolver(args) {
             setError(null);
             return;
         }
-        // Cancel any pending request before issuing a new one.
-        abortRef.current?.abort();
-        const controller = new AbortController();
-        abortRef.current = controller;
+        const key = optionsRequestKey(optionsScope(), url, effectiveField, query ?? '', limit, filterValue);
+        if (refreshKey !== seenRefresh.current) {
+            seenRefresh.current = refreshKey;
+            optionsEpoch.set(key, (optionsEpoch.get(key) ?? 0) + 1);
+            optionsCache.delete(key);
+            optionsInflight.delete(key);
+        }
+        const epoch = optionsEpoch.get(key) ?? 0;
+        const cached = optionsCache.get(key);
+        if (cached && Date.now() - cached.at < OPTIONS_TTL_MS) {
+            setOptions(cached.payload.options);
+            setMeta(cached.payload.meta);
+            setLoading(false);
+            setError(null);
+            return;
+        }
         setLoading(true);
         setError(null);
-        const params = { field: effectiveField };
-        if (query)
-            params.q = query;
-        if (typeof limit === 'number' && limit > 0)
-            params.limit = limit;
-        // Cascade scope: a dependent picker passes the value of the field it
-        // `dependsOn`. Skip empty strings so a cleared parent omits the param
-        // (no scope) rather than querying for the empty-string filter_value.
-        if (filterValue)
-            params.filter_value = filterValue;
-        api.get(url, { params, signal: controller.signal })
-            .then((res) => {
-            if (controller.signal.aborted)
-                return;
-            const body = res.data;
-            if (!body || body.success !== true) {
-                throw new Error(body?.message || 'options resolver: unsuccessful response');
-            }
-            const rawOptions = Array.isArray(body.data) ? body.data : [];
-            const projected = rawOptions.map(projectOption);
-            setOptions(projected);
-            // v0.9.0 envelope: meta.type / meta.count. We tolerate
-            // older deployments that still emit a root-level `type`
-            // by reading either spot — the projection prefers the
-            // canonical location so the SDK guides apps to the new
-            // shape without breaking grace-period upgrades.
-            const metaPayload = body.meta && typeof body.meta === 'object'
-                ? body.meta
-                : { type: body.type, count: rawOptions.length };
-            setMeta({
-                type: metaPayload?.type ?? 'dynamic',
-                count: typeof metaPayload?.count === 'number'
-                    ? metaPayload.count
-                    : rawOptions.length,
+        let pending = optionsInflight.get(key);
+        if (!pending) {
+            const params = { field: effectiveField };
+            if (query)
+                params.q = query;
+            if (typeof limit === 'number' && limit > 0)
+                params.limit = limit;
+            if (filterValue)
+                params.filter_value = filterValue;
+            pending = api.get(url, { params }).then((res) => {
+                const body = res.data;
+                if (!body || body.success !== true) {
+                    throw new Error(body?.message || 'options resolver: unsuccessful response');
+                }
+                const payload = readOptionsEnvelope(body);
+                if ((optionsEpoch.get(key) ?? 0) === epoch) {
+                    optionsCache.set(key, { payload, at: Date.now() });
+                }
+                return payload;
+            }).finally(() => {
+                if (optionsInflight.get(key) === pending)
+                    optionsInflight.delete(key);
             });
+            optionsInflight.set(key, pending);
+        }
+        let cancelled = false;
+        pending
+            .then((payload) => {
+            if (cancelled)
+                return;
+            setOptions(payload.options);
+            setMeta(payload.meta);
         })
             .catch((err) => {
-            if (controller.signal.aborted)
+            if (cancelled)
                 return;
             setError(err instanceof Error ? err : new Error(String(err)));
             setOptions([]);
             setMeta(null);
         })
             .finally(() => {
-            if (!controller.signal.aborted)
+            if (!cancelled)
                 setLoading(false);
         });
         return () => {
-            controller.abort();
+            cancelled = true;
         };
     }, [api, url, effectiveField, query, limit, enabled, filterValue, refreshKey]);
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "39.2.5",
+  "version": "39.2.6",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "@asteby/metacore-sdk": "^3.8.0",
-    "@asteby/metacore-ui": "^2.18.1",
+    "@asteby/metacore-ui": "^2.18.2",
     "@tanstack/react-query": ">=5",
     "@tanstack/react-router": ">=1.100",
     "@tanstack/react-table": ">=8",
@@ -51,7 +51,7 @@
   },
   "devDependencies": {
     "@asteby/metacore-sdk": "3.8.0",
-    "@asteby/metacore-ui": "2.18.1",
+    "@asteby/metacore-ui": "2.18.2",
     "@tanstack/react-query": "^5.95.0",
     "@tanstack/react-router": "^1.168.0",
     "@tanstack/react-table": "^8.20.0",

package/src/__tests__/use-options-resolver.test.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, it, expect, vi } from 'vitest'
-import { projectOption } from '../use-options-resolver'
+import { optionsRequestKey, projectOption } from '../use-options-resolver'
 import {
     resolveValidatorToken,
     setOrgConfigBridge,
@@ -11,6 +11,14 @@ import {
 // hook performs) so consumers can rely on the v0.9.0 envelope reading
 // without spinning up a renderer.
 
+describe('optionsRequestKey', () => {
+    it('keeps two orgs from sharing a column cache', () => {
+        const a = optionsRequestKey('org-a|branch', '/options/Product', 'id', '', 200, undefined)
+        const b = optionsRequestKey('org-b|branch', '/options/Product', 'id', '', 200, undefined)
+        expect(a).not.toBe(b)
+    })
+})
+
 describe('projectOption', () => {
     it('mirrors id into value and label into name when missing', () => {
         const out = projectOption({ id: 'abc', label: 'Hello' })

package/src/activity-value-renderer.tsx

@@ -11,7 +11,7 @@
  */
 
 import * as React from 'react'
-import * as icons from 'lucide-react'
+import { Calendar, Check, ExternalLink, Mail, Minus } from 'lucide-react'
 import { es, enUS } from 'date-fns/locale'
 import {
     Badge,
@@ -231,7 +231,7 @@ export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
                 className="inline-flex items-center gap-1 text-sm text-muted-foreground"
                 title={formatted.title}
             >
-                <icons.Calendar className="h-3 w-3 opacity-60" />
+                <Calendar className="h-3 w-3 opacity-60" />
                 {formatted.display}
             </span>
         )
@@ -245,9 +245,9 @@ export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
         return (
             <span className="inline-flex items-center gap-1">
                 {value ? (
-                    <icons.Check className="h-3.5 w-3.5 text-green-500" />
+                    <Check className="h-3.5 w-3.5 text-green-500" />
                 ) : (
-                    <icons.Minus className="h-3.5 w-3.5 text-muted-foreground" />
+                    <Minus className="h-3.5 w-3.5 text-muted-foreground" />
                 )}
                 <span className="text-sm text-muted-foreground">{value ? 'Sí' : 'No'}</span>
             </span>
@@ -350,7 +350,7 @@ export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
                 className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
                 onClick={(e) => e.stopPropagation()}
             >
-                <icons.ExternalLink className="h-3 w-3 shrink-0" />
+                <ExternalLink className="h-3 w-3 shrink-0" />
                 <span className="truncate" style={{ maxWidth: 200 }}>{label}</span>
             </a>
         )
@@ -368,7 +368,7 @@ export const ActivityValueRenderer: React.FC<ActivityValueRendererProps> = ({
                 className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
                 onClick={(e) => e.stopPropagation()}
             >
-                <icons.Mail className="h-3 w-3 shrink-0" />
+                <Mail className="h-3 w-3 shrink-0" />
                 <span className="truncate" style={{ maxWidth: 200 }}>{email}</span>
             </a>
         )

package/src/dynamic-columns.tsx

@@ -16,8 +16,7 @@ import * as React from 'react'
 import { ColumnDef } from '@tanstack/react-table'
 import { format, type Locale } from 'date-fns'
 import { es, enUS } from 'date-fns/locale'
-import * as icons from 'lucide-react'
-import { MoreHorizontal } from 'lucide-react'
+import { Calendar, Check, Copy, Mail, Minus, MoreHorizontal } from 'lucide-react'
 import {
     Avatar,
     AvatarFallback,
@@ -198,9 +197,9 @@ const CodeCell: React.FC<{ text: string; maxLength?: number }> = ({ text, maxLen
                 title="Copiar"
             >
                 {copied ? (
-                    <icons.Check className="h-3.5 w-3.5 text-green-500" />
+                    <Check className="h-3.5 w-3.5 text-green-500" />
                 ) : (
-                    <icons.Copy className="h-3.5 w-3.5" />
+                    <Copy className="h-3.5 w-3.5" />
                 )}
             </button>
         </div>
@@ -1082,7 +1081,7 @@ export function makeDefaultGetDynamicColumns(
                                     className="flex items-center gap-1.5 text-muted-foreground"
                                     title={formatted.title}
                                 >
-                                    <icons.Calendar className="h-3.5 w-3.5 opacity-70" />
+                                    <Calendar className="h-3.5 w-3.5 opacity-70" />
                                     <span className="text-sm font-medium">
                                         {formatted.display}
                                     </span>
@@ -1174,7 +1173,7 @@ export function makeDefaultGetDynamicColumns(
                                     className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
                                     onClick={(e) => e.stopPropagation()}
                                 >
-                                    <icons.Mail className="h-3.5 w-3.5 shrink-0 opacity-70" />
+                                    <Mail className="h-3.5 w-3.5 shrink-0 opacity-70" />
                                     <span className="truncate max-w-[260px]">{email}</span>
                                 </a>
                             )
@@ -1337,9 +1336,9 @@ export function makeDefaultGetDynamicColumns(
                             return (
                                 <span className="inline-flex items-center gap-1.5">
                                     {value ? (
-                                        <icons.Check className="h-4 w-4 text-green-500" />
+                                        <Check className="h-4 w-4 text-green-500" />
                                     ) : (
-                                        <icons.Minus className="h-4 w-4 text-muted-foreground" />
+                                        <Minus className="h-4 w-4 text-muted-foreground" />
                                     )}
                                     {showText && (
                                         <span className="text-sm text-muted-foreground">

package/src/dynamic-icon.tsx

@@ -1,18 +1,48 @@
-// Minimal DynamicIcon — resolves a lucide-react icon by name. Used across
-// action modals and the default row-action menus. Hosts that need custom
-// icon sets can override by shadowing this component via their own prop.
-import * as icons from 'lucide-react'
+// DynamicIcon resolves a lucide glyph by name without pulling the full icon
+// set into the shared chunk. Each glyph is its own dynamic import.
+import { lazy, Suspense, useMemo, type ComponentType } from 'react'
+import dynamicIconImports from 'lucide-react/dynamicIconImports'
 
 export interface DynamicIconProps {
     name: string
     className?: string
 }
 
+type IconName = keyof typeof dynamicIconImports
+
+function pascalToKebab(pascal: string): string {
+    return pascal
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase()
+}
+
+function kebabToPascal(kebab: string): string {
+    return kebab
+        .split('-')
+        .map((part) => (part ? part.charAt(0).toUpperCase() + part.slice(1) : ''))
+        .join('')
+}
+
+function loaderFor(pascal: string) {
+    const kebab = pascalToKebab(pascal) as IconName
+    return dynamicIconImports[kebab]
+}
+
 export function DynamicIcon({ name, className }: DynamicIconProps) {
-    const resolved = resolveLucideIconName(name) ?? name
-    const Icon = (icons as unknown as Record<string, React.ComponentType<{ className?: string }>>)[resolved]
+    const resolved = resolveLucideIconName(name)
+    const Icon = useMemo(() => {
+        if (!resolved) return null
+        const loader = loaderFor(resolved)
+        if (!loader) return null
+        return lazy(loader as () => Promise<{ default: ComponentType<{ className?: string }> }>)
+    }, [resolved])
     if (!Icon) return null
-    return <Icon className={className} />
+    return (
+        <Suspense fallback={null}>
+            <Icon className={className} />
+        </Suspense>
+    )
 }
 
 // resolveLucideIconName — canonical PascalCase lucide name for a value that is
@@ -24,13 +54,10 @@ export function resolveLucideIconName(value: unknown): string | null {
     if (/[/\\.:\s]/.test(value)) return null
     let name = value
     if (/^[a-z0-9]+(-[a-z0-9]+)*$/.test(value)) {
-        name = value
-            .split('-')
-            .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
-            .join('')
+        name = kebabToPascal(value)
     }
     if (!/^[A-Z][A-Za-z0-9]*$/.test(name)) return null
-    return (icons as unknown as Record<string, unknown>)[name] ? name : null
+    return loaderFor(name) ? name : null
 }
 
 // isLucideIconName — true when a string is a lucide-react icon name
@@ -43,3 +70,8 @@ export function resolveLucideIconName(value: unknown): string | null {
 export function isLucideIconName(value: unknown): value is string {
     return resolveLucideIconName(value) !== null
 }
+
+/** PascalCase names of every lucide glyph, for the icon picker grid. */
+export function lucideIconNames(): string[] {
+    return Object.keys(dynamicIconImports).map(kebabToPascal)
+}

package/src/icon-picker-field.tsx

@@ -12,8 +12,8 @@
 // initial mode is inferred from the current value — path-like ("/" or ".")
 // means image, anything else means icon.
 import { useMemo, useState } from 'react'
-import { icons } from 'lucide-react'
 import { ChevronsUpDown } from 'lucide-react'
+import { lucideIconNames } from './dynamic-icon'
 import {
     Button,
     Input,
@@ -35,7 +35,7 @@ export interface IconPickerFieldProps {
  * the DOM light: the lucide catalog is ~1500 glyphs, so we never mount them all. */
 const PAGE = 60
 
-const ALL_ICON_NAMES = Object.keys(icons)
+const ALL_ICON_NAMES = lucideIconNames()
 
 /** True when a stored value looks like an image url/path rather than an icon name. */
 export function looksLikeImageValue(value: unknown): boolean {

package/src/use-options-resolver.ts

@@ -100,11 +100,58 @@ export interface UseOptionsResolverResult {
  * `/api/options/:model?field=…` endpoint. Returns the v0.9.0 envelope
  * `{ data, meta: { type, count } }` projected into a stable shape.
  *
- * The hook is intentionally minimal: it does NOT debounce `query`
- * (callers should hold the controlled value and pass it post-debounce)
- * and does NOT cache across hook instances (apps that need shared state
- * compose this with TanStack Query in their own layer).
+ * The hook does NOT debounce `query` (callers should pass it post-debounce).
+ * Identical lookups share one in-flight request and a 30s cache, so a column
+ * of reference cells does not fan out one request per row. The key includes
+ * the org and branch from the host session.
  */
+const OPTIONS_TTL_MS = 30_000
+
+type OptionsPayload = { options: ResolvedOption[]; meta: OptionsMeta }
+
+const optionsCache = new Map<string, { payload: OptionsPayload; at: number }>()
+const optionsInflight = new Map<string, Promise<OptionsPayload>>()
+const optionsEpoch = new Map<string, number>()
+
+export function optionsRequestKey(
+    scope: string,
+    url: string,
+    field: string,
+    query: string,
+    limit: number | undefined,
+    filter: string | undefined,
+): string {
+    return [scope, url, field, query, String(limit ?? ''), filter ?? ''].join('\n')
+}
+
+function optionsScope(): string {
+    if (typeof localStorage === 'undefined') return ''
+    let org = ''
+    try {
+        const raw = localStorage.getItem('auth_user')
+        if (raw) org = String((JSON.parse(raw) as { organization_id?: string }).organization_id ?? '')
+    } catch {
+        org = ''
+    }
+    const branch = localStorage.getItem('active_branch_id') ?? ''
+    return `${org}|${branch}`
+}
+
+function readOptionsEnvelope(body: any): OptionsPayload {
+    const rawOptions: any[] = Array.isArray(body?.data) ? body.data : []
+    const metaPayload =
+        body?.meta && typeof body.meta === 'object'
+            ? body.meta
+            : { type: body?.type, count: rawOptions.length }
+    return {
+        options: rawOptions.map(projectOption),
+        meta: {
+            type: metaPayload?.type ?? 'dynamic',
+            count: typeof metaPayload?.count === 'number' ? metaPayload.count : rawOptions.length,
+        },
+    }
+}
+
 export function useOptionsResolver(args: UseOptionsResolverArgs): UseOptionsResolverResult {
     const {
         modelKey,
@@ -146,9 +193,7 @@ export function useOptionsResolver(args: UseOptionsResolverArgs): UseOptionsReso
         return ''
     }, [fieldKey, ref])
 
-    // Track the in-flight controller so a new fetch can abort the
-    // previous one — matters for typeahead callers passing changing `query`.
-    const abortRef = useRef<AbortController | null>(null)
+    const seenRefresh = useRef(0)
 
     useEffect(() => {
         if (!enabled || !url || !effectiveField) {
@@ -158,61 +203,75 @@ export function useOptionsResolver(args: UseOptionsResolverArgs): UseOptionsReso
             setError(null)
             return
         }
-        // Cancel any pending request before issuing a new one.
-        abortRef.current?.abort()
-        const controller = new AbortController()
-        abortRef.current = controller
+
+        const key = optionsRequestKey(
+            optionsScope(),
+            url,
+            effectiveField,
+            query ?? '',
+            limit,
+            filterValue,
+        )
+        if (refreshKey !== seenRefresh.current) {
+            seenRefresh.current = refreshKey
+            optionsEpoch.set(key, (optionsEpoch.get(key) ?? 0) + 1)
+            optionsCache.delete(key)
+            optionsInflight.delete(key)
+        }
+        const epoch = optionsEpoch.get(key) ?? 0
+        const cached = optionsCache.get(key)
+        if (cached && Date.now() - cached.at < OPTIONS_TTL_MS) {
+            setOptions(cached.payload.options)
+            setMeta(cached.payload.meta)
+            setLoading(false)
+            setError(null)
+            return
+        }
 
         setLoading(true)
         setError(null)
 
-        const params: Record<string, string | number> = { field: effectiveField }
-        if (query) params.q = query
-        if (typeof limit === 'number' && limit > 0) params.limit = limit
-        // Cascade scope: a dependent picker passes the value of the field it
-        // `dependsOn`. Skip empty strings so a cleared parent omits the param
-        // (no scope) rather than querying for the empty-string filter_value.
-        if (filterValue) params.filter_value = filterValue
-
-        api.get(url, { params, signal: controller.signal })
-            .then((res) => {
-                if (controller.signal.aborted) return
+        let pending = optionsInflight.get(key)
+        if (!pending) {
+            const params: Record<string, string | number> = { field: effectiveField }
+            if (query) params.q = query
+            if (typeof limit === 'number' && limit > 0) params.limit = limit
+            if (filterValue) params.filter_value = filterValue
+            pending = api.get(url, { params }).then((res) => {
                 const body = (res as { data: any }).data
                 if (!body || body.success !== true) {
                     throw new Error(body?.message || 'options resolver: unsuccessful response')
                 }
-                const rawOptions: any[] = Array.isArray(body.data) ? body.data : []
-                const projected = rawOptions.map(projectOption)
-                setOptions(projected)
-                // v0.9.0 envelope: meta.type / meta.count. We tolerate
-                // older deployments that still emit a root-level `type`
-                // by reading either spot — the projection prefers the
-                // canonical location so the SDK guides apps to the new
-                // shape without breaking grace-period upgrades.
-                const metaPayload =
-                    body.meta && typeof body.meta === 'object'
-                        ? body.meta
-                        : { type: body.type, count: rawOptions.length }
-                setMeta({
-                    type: metaPayload?.type ?? 'dynamic',
-                    count:
-                        typeof metaPayload?.count === 'number'
-                            ? metaPayload.count
-                            : rawOptions.length,
-                })
+                const payload = readOptionsEnvelope(body)
+                if ((optionsEpoch.get(key) ?? 0) === epoch) {
+                    optionsCache.set(key, { payload, at: Date.now() })
+                }
+                return payload
+            }).finally(() => {
+                if (optionsInflight.get(key) === pending) optionsInflight.delete(key)
+            })
+            optionsInflight.set(key, pending)
+        }
+
+        let cancelled = false
+        pending
+            .then((payload) => {
+                if (cancelled) return
+                setOptions(payload.options)
+                setMeta(payload.meta)
             })
             .catch((err: any) => {
-                if (controller.signal.aborted) return
+                if (cancelled) return
                 setError(err instanceof Error ? err : new Error(String(err)))
                 setOptions([])
                 setMeta(null)
             })
             .finally(() => {
-                if (!controller.signal.aborted) setLoading(false)
+                if (!cancelled) setLoading(false)
             })
 
         return () => {
-            controller.abort()
+            cancelled = true
         }
     }, [api, url, effectiveField, query, limit, enabled, filterValue, refreshKey])