@asteby/metacore-runtime-react 42.0.0 → 44.0.0

package/src/dynamic-row-actions.tsx

@@ -11,8 +11,8 @@
 //   view / edit            → host `onAction(action, row)` when provided (string
 //                            contract), else the built-in record dialog.
 //   link action            → navigate to the action's templated `linkUrl`.
-//   custom (fields/confirm/
-//   executable) action     → opens the ActionModal via the dispatcher.
+//   custom (modal/fields/
+//   confirm/executable)    → opens the ActionModal via the dispatcher.
 //   anything else          → host `onAction` + refresh (or just refresh).
 //
 // The host `onAction` contract is a STRING action key on purpose — the existing
@@ -120,24 +120,20 @@ export function useDynamicRowActions({
             return
         }
         const actionDef = metadata?.actions?.find((a) => a.key === action)
-        // Open the dispatcher when there is ANY UI surface (fields, wizard
-        // steps, confirm bool, confirmMessage, or host `executable`). A
-        // confirm_message without confirm:true used to fall through / open and
-        // then render null — derive confirm so the ConfirmActionDialog path wins.
-        if (actionDef && (actionDef.fields?.length || actionDef.steps?.length || actionDef.confirm || actionDef.confirmMessage || actionDef.executable)) {
+        // Open the dispatcher when there is ANY UI surface (federated `modal`,
+        // fields, wizard steps, confirm bool, confirmMessage, or host
+        // `executable`). A confirm_message without confirm:true used to fall
+        // through / open and then render null — derive confirm so the
+        // ConfirmActionDialog path wins. Pass the WHOLE definition: a
+        // cherry-picked copy dropped `modal` and the dispatcher fell back to
+        // the generic confirm while the remote was still loading.
+        if (actionDef && (actionDef.modal || actionDef.fields?.length || actionDef.steps?.length || actionDef.confirm || actionDef.confirmMessage || actionDef.executable)) {
             setActionModal({
                 open: true,
                 action: {
-                    key: actionDef.key,
-                    label: actionDef.label,
+                    ...actionDef,
                     icon: actionDef.icon || 'Zap',
-                    color: actionDef.color,
                     confirm: !!(actionDef.confirm || actionDef.confirmMessage),
-                    confirmMessage: actionDef.confirmMessage,
-                    fields: actionDef.fields,
-                    steps: actionDef.steps,
-                    requiresState: actionDef.requiresState,
-                    executable: actionDef.executable,
                 },
                 record: row,
             })

package/src/dynamic-table.tsx

@@ -12,6 +12,7 @@
 //     column cells are tightly coupled to their design system).
 import { useEffect, useState, useMemo, useCallback, useRef, type MouseEvent } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useTimeZone, useCurrency } from './org-runtime-context'
 import { format } from 'date-fns'
 import type { DateRange } from 'react-day-picker'
 import { useVirtualizer } from '@tanstack/react-virtual'
@@ -35,6 +36,7 @@ import {
     useReactTable,
 } from '@tanstack/react-table'
 import { cn } from '@asteby/metacore-ui/lib'
+import { preloadGlyphs } from '@asteby/metacore-ui/icons'
 import {
     Table,
     TableBody,
@@ -282,12 +284,18 @@ export function DynamicTable({
     defaultFilters,
     extraColumns = [],
     getDynamicColumns = defaultGetDynamicColumns,
-    timeZone,
-    currency,
+    timeZone: timeZoneProp,
+    currency: currencyProp,
     pagination: paginationMode,
     infiniteScroll: infiniteScrollProp = false,
     virtualizeRows,
 }: DynamicTableProps) {
+    // The org's timezone/currency: an explicit prop wins, else the app-wide
+    // OrgRuntimeProvider (without it, money fell back to USD).
+    const orgTimeZone = useTimeZone()
+    const orgCurrency = useCurrency()
+    const timeZone = timeZoneProp ?? orgTimeZone
+    const currency = currencyProp ?? orgCurrency
     // The explicit `pagination` prop wins; the legacy `infiniteScroll` boolean
     // still selects the mode when `pagination` is absent (back-compat).
     const infiniteScroll = paginationMode ? paginationMode === 'infinite' : infiniteScrollProp
@@ -754,6 +762,12 @@ export function DynamicTable({
         return gateTableMetadata(metadata, model, can, (key, fallback) => t(key, { defaultValue: fallback }))
     }, [metadata, permissionsActive, can, model, t])
 
+    // Row-action menus mount their icons on open: load them with the
+    // metadata so the first open draws every glyph at once.
+    useEffect(() => {
+        void preloadGlyphs((metadata?.actions ?? []).map((a) => a.icon))
+    }, [metadata])
+
     // Importing is offered when the host opts in explicitly (`canImport`) or,
     // when it says nothing, whenever the kernel served an import spec for the
     // model — which it does for every model with at least one importable form

package/src/federated-action-loader.ts

@@ -0,0 +1,40 @@
+// Host hook that loads the federated remote behind an action's `modal` slug.
+//
+// The SDK does not know how the host resolves addon remotes (Module Federation
+// manifests, fibers, lazy bundles). When ActionModalDispatcher opens an action
+// that declares `modal` and no component is registered yet, it asks the host to
+// load it through this hook and waits for the registry to report the component.
+// The dispatcher re-invokes the loader while it waits, so a loader installed
+// after the first click still gets called.
+
+export type FederatedActionLoader = (req: {
+    model: string
+    actionKey: string
+    modal?: string
+}) => void | Promise<void>
+
+let loader: FederatedActionLoader | null = null
+
+/** Install (or clear with `null`) the host's federated action loader. */
+export function setFederatedActionLoader(fn: FederatedActionLoader | null): void {
+    loader = fn
+}
+
+/**
+ * Ask the host to load the remote for (model, actionKey). No-op without a
+ * loader; loader errors are logged, never thrown — the dispatcher keeps waiting
+ * until its timeout and then shows the explicit error.
+ */
+export function requestFederatedAction(req: { model: string; actionKey: string; modal?: string }): void {
+    if (!loader) return
+    try {
+        const pending = loader(req)
+        if (pending && typeof (pending as Promise<void>).catch === 'function') {
+            ;(pending as Promise<void>).catch((err) => {
+                console.warn('[metacore] federated action loader failed', req, err)
+            })
+        }
+    } catch (err) {
+        console.warn('[metacore] federated action loader failed', req, err)
+    }
+}

package/src/index.ts

@@ -57,9 +57,15 @@ export {
     groupByStage,
     isTransitionAllowed,
     applyOptimisticMove,
+    applyStageOverrides,
+    laneDeltasFromOverrides,
     selectCardColumns,
+    visibleCardFields,
+    isEmptyCardValue,
+    nextLaneCoordinates,
     UNASSIGNED_LANE,
 } from './dynamic-kanban'
+export { PortalDragOverlay, type PortalDragOverlayProps } from './portal-drag-overlay'
 export {
     useStageAutomations,
     StageAutomationsButton,
@@ -168,8 +174,10 @@ export * from './form-layout-ui'
 export { FieldGrid, FieldCell, FieldLabel } from './field-grid'
 export {
     ActionModalDispatcher,
+    FEDERATED_ACTION_MODAL_TIMEOUT_MS,
     type ActionModalProps,
 } from './action-modal-dispatcher'
+export { setFederatedActionLoader, type FederatedActionLoader } from './federated-action-loader'
 export {
     ModelActionToolbar,
     useModelActions,

package/src/license/license-gate.tsx

@@ -19,6 +19,7 @@
  * INDEPENDIENTE del kernel: no importa su cliente ni fija su versión. Solo
  * consume `LicenseState` y una promesa `onActivate`.
  */
+import { createPortal } from 'react-dom'
 import { useState, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ShieldAlert, Clock, Loader2 } from 'lucide-react'
@@ -165,7 +166,9 @@ function LicenseGateModal({
         }
     }
 
-    return (
+    // In <body>: mounted inside a glass panel (backdrop-filter), a fixed veil
+    // would cover only that panel.
+    return createPortal(
         <div
             role="dialog"
             aria-modal="true"
@@ -300,6 +303,7 @@ function LicenseGateModal({
                     )}
                 </div>
             </div>
-        </div>
+        </div>,
+        document.body,
     )
 }

package/src/model-action-toolbar.tsx

@@ -83,18 +83,9 @@ export function humanizeActionLabel(label: string): string {
 }
 
 function toActionMetadata(a: ActionDefinition): ActionMetadata {
-    return {
-        key: a.key,
-        label: a.label,
-        icon: a.icon || 'Zap',
-        color: a.color,
-        confirm: a.confirm,
-        confirmMessage: a.confirmMessage,
-        fields: a.fields,
-        requiresState: a.requiresState,
-        executable: a.executable,
-        placement: a.placement,
-    }
+    // Spread, don't cherry-pick: a hand-picked copy dropped `modal`/`steps`
+    // and the dispatcher fell back to generics for federated/wizard actions.
+    return { ...a, icon: a.icon || 'Zap' }
 }
 
 /**

package/src/portal-drag-overlay.tsx

@@ -0,0 +1,20 @@
+// PortalDragOverlay — dnd-kit's <DragOverlay> rendered into <body>.
+//
+// The overlay is `position: fixed` at the viewport coordinates of the item
+// being dragged. Any ancestor with a transform, filter or backdrop-filter
+// becomes the containing block of a fixed descendant, so inside such an
+// ancestor (a glass panel from @asteby/metacore-theme/glass.css, an animated
+// dialog) the lifted item shows up shifted by that ancestor's offset instead of
+// under the pointer. Rendering it into <body> keeps the viewport as its
+// containing block wherever the board or list is mounted. React context (the
+// DndContext) still reaches it through the portal.
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { DragOverlay } from '@dnd-kit/core'
+
+export type PortalDragOverlayProps = React.ComponentProps<typeof DragOverlay>
+
+export function PortalDragOverlay(props: PortalDragOverlayProps) {
+    if (typeof document === 'undefined') return null
+    return createPortal(<DragOverlay {...props} />, document.body)
+}

package/src/query-batch.ts

@@ -377,8 +377,11 @@ function batchForbidden(message?: string): boolean {
  * or options read. Anything the batch refuses falls back to the original GET.
  */
 export async function batchGet(api: ApiClient, url: string, config?: { params?: Record<string, unknown> }) {
+    // The fallback GET gets exactly the arguments the caller passed: no
+    // trailing `undefined` config reaching the host client.
+    const plainGet = () => (config === undefined ? api.get(url) : api.get(url, config))
     const token = tokenForGet(url, config?.params)
-    if (!token) return api.get(url, config)
+    if (!token) return plainGet()
     try {
         const part = await loadQueryPart(api, token)
         if (!part.success) {
@@ -391,13 +394,13 @@ export async function batchGet(api: ApiClient, url: string, config?: { params?:
                 err.response = { status: 403 }
                 throw err
             }
-            return api.get(url, config)
+            return plainGet()
         }
         return { data: { success: true, data: part.data, meta: part.meta } }
     } catch (err) {
         const status = (err as { status?: number; response?: { status?: number } })?.status
             ?? (err as { response?: { status?: number } })?.response?.status
         if (status === 403) throw err
-        return api.get(url, config)
+        return plainGet()
     }
 }

package/src/sidebar-layout-manager.tsx

@@ -5,7 +5,6 @@
 import * as React from 'react'
 import {
   DndContext,
-  DragOverlay,
   PointerSensor,
   closestCenter,
   useSensor,
@@ -20,6 +19,7 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
+import { PortalDragOverlay } from './portal-drag-overlay'
 import {
   ChevronDown,
   ChevronRight,
@@ -733,13 +733,13 @@ export function SidebarLayoutManager({
                   ) : (
                     renderList(tree, [])
                   )}
-                  <DragOverlay>
+                  <PortalDragOverlay>
                     {activeLabel ? (
                       <div className="bg-background border-border rounded-md border px-3 py-1.5 text-sm shadow-lg">
                         {activeLabel}
                       </div>
                     ) : null}
-                  </DragOverlay>
+                  </PortalDragOverlay>
                 </DndContext>
 
                 <div className="mt-3 flex gap-2 px-2">

package/src/types.ts

@@ -671,6 +671,8 @@ export interface ActionDefinition {
     steps?: ActionStep[]
     requiresState?: string[]
     executable?: boolean
+    /** Federated modal slug "<addon_key>.<action_key>" (manifest `modal`). */
+    modal?: string
     /**
      * Where the host surfaces the trigger. Mirrors manifest/v3 Action.placement.
      *   "row" (default) — per-row table action.
@@ -719,5 +721,7 @@ export interface ActionMetadata {
     steps?: ActionStep[]
     requiresState?: string[]
     executable?: boolean
+    /** Federated modal slug "<addon_key>.<action_key>"; see ActionModalDispatcher. */
+    modal?: string
     placement?: 'row' | 'table' | 'create'
 }

package/src/use-flip-animation.ts

@@ -23,6 +23,12 @@ export interface UseFlipAnimationOptions {
   easing?: MotionEasing | string
   /** Off switch; the hook also stays still under prefers-reduced-motion. */
   disabled?: boolean
+  /**
+   * Leave one element still on this change while still tracking where it is
+   * (e.g. the card a drag overlay is already carrying into place). Default:
+   * animate everything.
+   */
+  shouldAnimate?: (el: HTMLElement, key: string) => boolean
 }
 
 const DEFAULT_SELECTOR = '[data-flip-key]'
@@ -54,12 +60,13 @@ export function useFlipAnimation(
     duration = 'moderate',
     easing = 'standard',
     disabled = false,
+    shouldAnimate,
   } = options
   const positionsRef = useRef<Positions | null>(null)
   const triggerRef = useRef(trigger)
-  const configRef = useRef({ selector, keyOf, scrollContainer })
+  const configRef = useRef({ selector, keyOf, scrollContainer, shouldAnimate })
   useEffect(() => {
-    configRef.current = { selector, keyOf, scrollContainer }
+    configRef.current = { selector, keyOf, scrollContainer, shouldAnimate }
   })
 
   const measure = (): Positions | null => {
@@ -105,11 +112,16 @@ export function useFlipAnimation(
     schedule()
     document.addEventListener('pointerup', onInteraction, true)
     document.addEventListener('keyup', onInteraction, true)
+    // Scrolling a list inside the root moves its items without a trigger
+    // change; without a fresh snapshot the next change would replay the scroll
+    // distance as movement. (Scroll does not bubble: listen in capture.)
+    document.addEventListener('scroll', onInteraction, true)
     window.addEventListener('resize', schedule)
     return () => {
       if (timer) clearTimeout(timer)
       document.removeEventListener('pointerup', onInteraction, true)
       document.removeEventListener('keyup', onInteraction, true)
+      document.removeEventListener('scroll', onInteraction, true)
       window.removeEventListener('resize', schedule)
     }
   }, [rootRef])
@@ -127,7 +139,7 @@ export function useFlipAnimation(
     if (durationMs <= 0) return
     const timing = easing in MOTION_EASING_KEYS ? motionEasing(easing as MotionEasing) : easing
 
-    const { selector: sel, keyOf: key } = configRef.current
+    const { selector: sel, keyOf: key, shouldAnimate: animates } = configRef.current
     // A stale snapshot can report huge jumps; those would read as a glitch.
     const maxJump = root.clientHeight > 0 ? root.clientHeight * 1.5 : Infinity
     root.querySelectorAll<HTMLElement>(sel).forEach((el) => {
@@ -136,6 +148,7 @@ export function useFlipAnimation(
       const from = before.get(k)
       const to = after.get(k)
       if (!to || typeof el.animate !== 'function') return
+      if (animates && !animates(el, k)) return
       if (!from) {
         // Entered with this change: fade in instead of popping.
         el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: durationMs, easing: timing })