@asteby/metacore-runtime-react 39.2.5 → 39.2.7

package/dist/use-options-resolver.js

@@ -12,16 +12,52 @@
 // free; legacy callers that still ship `searchEndpoint` keep working.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useApi } from './api-context';
+import { loadQueryPart, optionsBatchToken, optionsModelFromUrl } from './query-batch';
 /**
  * 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).
+ * 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 +91,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 +100,95 @@ 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;
+            const model = optionsModelFromUrl(url);
+            pending = (async () => {
+                if (model) {
+                    try {
+                        const part = await loadQueryPart(api, optionsBatchToken(model, effectiveField, query ?? '', limit, filterValue));
+                        if (!part.success) {
+                            throw new Error(part.message || 'options resolver: unsuccessful response');
+                        }
+                        const payload = readOptionsEnvelope({
+                            success: true,
+                            data: part.data,
+                            meta: part.meta,
+                        });
+                        if ((optionsEpoch.get(key) ?? 0) === epoch) {
+                            optionsCache.set(key, { payload, at: Date.now() });
+                        }
+                        return payload;
+                    }
+                    catch (err) {
+                        const msg = err instanceof Error ? err.message : '';
+                        const batchMiss = msg === 'batch unavailable' || msg === 'batch part missing';
+                        if (!batchMiss)
+                            throw err;
+                    }
+                }
+                const res = await api.get(url, { params });
+                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.7",
   "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/index.ts

@@ -392,6 +392,13 @@ export {
     AUDIT_SUBTABLE_COLUMN_KEYS,
     getSearchableColumnKeys,
 } from './column-visibility'
+export {
+    loadQueryPart,
+    nameBatchTokens,
+    optionsBatchToken,
+    optionsModelFromUrl,
+    type QueryPart,
+} from './query-batch'
 export {
     useOptionsResolver,
     projectOption,

package/src/query-batch.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+import { nameBatchTokens, optionsBatchToken, optionsModelFromUrl } from './query-batch'
+
+describe('query batch tokens', () => {
+    it('names distinct tokens and keeps duplicates as one part', () => {
+        const named = nameBatchTokens([
+            'o:Customer?field=id',
+            'o:Product?field=id',
+            'o:Customer?field=id',
+        ])
+        expect(named).toEqual([
+            { name: 'q1', token: 'o:Customer?field=id', plan: 'q1=o:Customer?field=id' },
+            { name: 'q2', token: 'o:Product?field=id', plan: 'q2=o:Product?field=id' },
+        ])
+    })
+
+    it('builds an options token from the canonical url', () => {
+        expect(optionsModelFromUrl('/options/Customer')).toBe('Customer')
+        expect(optionsModelFromUrl('/data/Customer')).toBeNull()
+        expect(optionsBatchToken('Customer', 'id', 'lop', 20, undefined)).toBe(
+            'o:Customer?field=id&q=lop&limit=20',
+        )
+    })
+})

package/src/query-batch.ts

@@ -0,0 +1,136 @@
+/**
+ * Coalesces concurrent reads into one POST /api/q.
+ *
+ * Callers enqueue a batch token (`o:Customer?field=id&q=lop`). Tokens that
+ * arrive inside an 8ms window share one request. Each part keeps its own
+ * success, data and etag. A failed part does not reject the others.
+ */
+import type { ApiClient } from './api-context'
+
+export interface QueryPart {
+    success: boolean
+    data?: unknown
+    meta?: unknown
+    message?: string
+    etag?: string
+    not_modified?: boolean
+}
+
+const WINDOW_MS = 8
+const PART_TTL_MS = 30_000
+
+type Waiter = {
+    token: string
+    resolve: (part: QueryPart) => void
+    reject: (error: Error) => void
+}
+
+type CachedPart = { part: QueryPart; at: number }
+
+const partCache = new Map<string, CachedPart>()
+let waiters: Waiter[] = []
+let timer: ReturnType<typeof setTimeout> | null = null
+let transport: ApiClient | null = null
+
+function cacheScope(): string {
+    if (typeof localStorage === 'undefined') return ''
+    try {
+        const raw = localStorage.getItem('auth_user')
+        if (!raw) return ''
+        return String((JSON.parse(raw) as { organization_id?: string }).organization_id ?? '')
+    } catch {
+        return ''
+    }
+}
+
+export function optionsModelFromUrl(url: string): string | null {
+    const match = url.match(/^\/options\/([A-Za-z][A-Za-z0-9_]*)$/)
+    return match ? match[1] : null
+}
+
+export function optionsBatchToken(
+    model: string,
+    field: string,
+    query: string,
+    limit: number | undefined,
+    filter: string | undefined,
+): string {
+    const params = new URLSearchParams()
+    params.set('field', field)
+    if (query) params.set('q', query)
+    if (typeof limit === 'number' && limit > 0) params.set('limit', String(limit))
+    if (filter) params.set('filter_value', filter)
+    return `o:${model}?${params.toString()}`
+}
+
+/** Names each distinct token so the server can key the response. */
+export function nameBatchTokens(tokens: string[]): { name: string; token: string; plan: string }[] {
+    const unique: string[] = []
+    const seen = new Set<string>()
+    for (const token of tokens) {
+        if (seen.has(token)) continue
+        seen.add(token)
+        unique.push(token)
+    }
+    return unique.map((token, index) => {
+        const name = `q${index + 1}`
+        return { name, token, plan: `${name}=${token}` }
+    })
+}
+
+export function loadQueryPart(api: ApiClient, token: string): Promise<QueryPart> {
+    const cached = partCache.get(`${cacheScope()}\n${token}`)
+    if (cached && Date.now() - cached.at < PART_TTL_MS && cached.part.success) {
+        return Promise.resolve(cached.part)
+    }
+    return new Promise((resolve, reject) => {
+        transport = api
+        waiters.push({ token, resolve, reject })
+        if (timer == null) timer = setTimeout(() => void flushQueryBatch(), WINDOW_MS)
+    })
+}
+
+async function flushQueryBatch() {
+    timer = null
+    const batch = waiters
+    waiters = []
+    const api = transport
+    if (!api || batch.length === 0) return
+    const named = nameBatchTokens(batch.map((waiter) => waiter.token))
+    const byToken = new Map(named.map((part) => [part.token, part.name]))
+    const inm: Record<string, string> = {}
+    const scope = cacheScope()
+    for (const part of named) {
+        const cached = partCache.get(`${scope}\n${part.token}`)
+        if (cached?.part.etag) inm[part.name] = cached.part.etag
+    }
+    try {
+        const res = await api.post('/q', { parts: named.map((part) => part.plan), inm })
+        const body = res?.data
+        if (!body || body.success !== true || !body.parts) {
+            throw new Error('batch unavailable')
+        }
+        for (const waiter of batch) {
+            const name = byToken.get(waiter.token)
+            const part = name ? (body.parts[name] as QueryPart | undefined) : undefined
+            if (!part) {
+                waiter.reject(new Error('batch part missing'))
+                continue
+            }
+            if (part.not_modified) {
+                const cached = partCache.get(`${scope}\n${waiter.token}`)
+                if (cached) {
+                    waiter.resolve(cached.part)
+                    continue
+                }
+            }
+            if (part.success) {
+                partCache.set(`${scope}\n${waiter.token}`, { part, at: Date.now() })
+            }
+            waiter.resolve(part)
+        }
+    } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err))
+        for (const waiter of batch) waiter.reject(error)
+    }
+}