@asteby/metacore-runtime-react 20.1.5 → 20.1.7

package/dist/index.js

@@ -15,7 +15,8 @@ export * from './addon-loader';
 export { AddonLayoutProvider, useAddonLayout, useAddonLayoutControl, useDeclareAddonLayout, } from './addon-layout-context';
 export * from './slot';
 export * from './capability-gate';
-export { PermissionsProvider, useCan, usePermissionsActive, makeCan, capabilityForActionKey, modelCapability, gateTableMetadata, } from './permissions-context';
+export { PermissionsProvider, useCan, usePermissionsActive, makeCan, capabilityForActionKey, modelCapability, gateTableMetadata, resolveRowActions, } from './permissions-context';
+export { useDynamicRowActions, } from './dynamic-row-actions';
 export { PermissionsManager, moduleActionCapability, moduleCapabilities, grantedCountForModule, capabilitySetsEqual, defaultActionIcon, normalizeCatalogGroups, flattenGroups, filterModuleGroups, } from './permissions-manager';
 export * from './org-runtime-context';
 export * from './org-runtime-provider';

package/dist/permissions-context.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TableMetadata } from './types';
+import type { TableMetadata, ActionDefinition } from './types';
 /** Predicate answering "can the current user use this capability?". */
 export type CanFn = (capability: string) => boolean;
 export interface PermissionsProviderProps {
@@ -45,4 +45,18 @@ export declare function modelCapability(model: string, actionKey: string): strin
  * (`usePermissionsActive()`), otherwise pass the metadata through untouched.
  */
 export declare function gateTableMetadata(metadata: TableMetadata, model: string, can: CanFn, tx?: (i18nKey: string, fallback: string) => string): TableMetadata;
+/**
+ * Resolves the per-row (`placement: 'row'`) action list for a model exactly the
+ * way DynamicTable's action column does, so the kanban card menu shows the SAME
+ * actions:
+ *   - when a <PermissionsProvider> is active, the metadata is run through
+ *     `gateTableMetadata` first (filters by capability + materializes the CRUD
+ *     trio), otherwise the raw metadata is used.
+ *   - explicit actions win; absent them, the implicit View/Edit/Delete trio is
+ *     materialized when `enableCRUDActions` is on.
+ *   - table/create-placement actions are stripped (they belong to the toolbar).
+ *
+ * Pure. `tx` resolves the trio's i18n labels (defaults to the Spanish fallbacks).
+ */
+export declare function resolveRowActions(metadata: TableMetadata, model: string, can: CanFn, permissionsActive: boolean, tx?: (i18nKey: string, fallback: string) => string): ActionDefinition[];
 //# sourceMappingURL=permissions-context.d.ts.map

package/dist/permissions-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"permissions-context.d.ts","sourceRoot":"","sources":["../src/permissions-context.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA6C,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAoB,MAAM,SAAS,CAAA;AAM9D,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;AAEnD,MAAM,WAAW,wBAAwB;IACrC,6EAA6E;IAC7E,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,4EAA4E;IAC5E,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAMD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,CAKtE;AAMD,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,qBAG/F;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,KAAK,CAE9B;AAED,qFAAqF;AACrF,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAOD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIhE;AAED,kFAAkF;AAClF,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAExE;AAQD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAK,EACV,EAAE,GAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAmC,GAC/E,aAAa,CAkCf"}
+{"version":3,"file":"permissions-context.d.ts","sourceRoot":"","sources":["../src/permissions-context.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAA6C,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAM9D,uEAAuE;AACvE,MAAM,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAA;AAEnD,MAAM,WAAW,wBAAwB;IACrC,6EAA6E;IAC7E,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,4EAA4E;IAC5E,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAMD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,CAKtE;AAMD,wBAAgB,mBAAmB,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,qBAG/F;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,KAAK,CAE9B;AAED,qFAAqF;AACrF,wBAAgB,oBAAoB,IAAI,OAAO,CAE9C;AAOD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIhE;AAED,kFAAkF;AAClF,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAExE;AAQD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAK,EACV,EAAE,GAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAmC,GAC/E,aAAa,CAkCf;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,KAAK,EACV,iBAAiB,EAAE,OAAO,EAC1B,EAAE,GAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAmC,GAC/E,gBAAgB,EAAE,CAkBpB"}

package/dist/permissions-context.js

@@ -122,3 +122,32 @@ export function gateTableMetadata(metadata, model, can, tx = (_k, fallback) => f
         canCreate: metadata.canCreate === undefined ? undefined : metadata.canCreate && allowed('create'),
     };
 }
+/**
+ * Resolves the per-row (`placement: 'row'`) action list for a model exactly the
+ * way DynamicTable's action column does, so the kanban card menu shows the SAME
+ * actions:
+ *   - when a <PermissionsProvider> is active, the metadata is run through
+ *     `gateTableMetadata` first (filters by capability + materializes the CRUD
+ *     trio), otherwise the raw metadata is used.
+ *   - explicit actions win; absent them, the implicit View/Edit/Delete trio is
+ *     materialized when `enableCRUDActions` is on.
+ *   - table/create-placement actions are stripped (they belong to the toolbar).
+ *
+ * Pure. `tx` resolves the trio's i18n labels (defaults to the Spanish fallbacks).
+ */
+export function resolveRowActions(metadata, model, can, permissionsActive, tx = (_k, fallback) => fallback) {
+    const gated = permissionsActive ? gateTableMetadata(metadata, model, can, tx) : metadata;
+    const explicit = gated.actions ?? [];
+    const hasExplicit = (gated.hasActions ?? explicit.length > 0) && explicit.length > 0;
+    const base = hasExplicit
+        ? explicit
+        : gated.enableCRUDActions
+            ? DEFAULT_TRIO.map((a) => ({
+                key: a.key,
+                name: a.key,
+                label: tx(a.i18nKey, a.fallback),
+                icon: a.icon,
+            }))
+            : [];
+    return base.filter((a) => (a.placement ?? 'row') === 'row');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "20.1.5",
+  "version": "20.1.7",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/__tests__/dynamic-kanban.test.tsx

@@ -14,12 +14,22 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 
 // react-i18next: identity translator returning the defaultValue so card field
-// labels and lane labels surface verbatim.
+// labels and lane labels surface verbatim. The `t`/`i18n` references are STABLE
+// (module-scope singletons) — real react-i18next memoizes them, and the card's
+// shared record dialog subtree keys effects off `t`/`i18n`, so returning a fresh
+// object per render would spin an infinite render loop.
+const I18N_T = (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k
+const I18N = { language: 'es' }
+const USE_TRANSLATION = { t: I18N_T, i18n: I18N }
 vi.mock('react-i18next', () => ({
-    useTranslation: () => ({
-        t: (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k,
-        i18n: { language: 'es' },
-    }),
+    useTranslation: () => USE_TRANSLATION,
+}))
+
+// The card menu's shared action handler (useDynamicRowActions) calls
+// useNavigate for `link` actions; the board never navigates in these tests, so
+// a stub is enough (mirrors dynamic-table-permissions.test).
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
 }))
 
 import {

package/src/__tests__/resolve-row-actions.test.ts

@@ -0,0 +1,80 @@
+// resolveRowActions / isRowActionVisible — the shared seam that makes the
+// kanban card menu show the SAME, capability-gated actions as the table's row
+// action column (and hide an action the user lacks permission for).
+import { describe, expect, it } from 'vitest'
+import { resolveRowActions, makeCan } from '../permissions-context'
+import { isRowActionVisible, isActionConditionMet } from '../dynamic-columns'
+import type { TableMetadata } from '../types'
+
+const allowAll = makeCan([], true)
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+        ...over,
+    }
+}
+
+describe('resolveRowActions', () => {
+    it('materializes the implicit View/Edit/Delete trio for a CRUD model with no explicit actions', () => {
+        const actions = resolveRowActions(meta(), 'issue', allowAll, false)
+        expect(actions.map((a) => a.key)).toEqual(['view', 'edit', 'delete'])
+    })
+
+    it('returns nothing for a CRUD model once gating denies every capability', () => {
+        const denyAll = makeCan([], false) // no caps, not admin
+        const actions = resolveRowActions(meta(), 'issue', denyAll, true)
+        expect(actions).toEqual([])
+    })
+
+    it('drops only the actions the user lacks permission for (index/update granted, delete denied)', () => {
+        const can = makeCan(['issue.index', 'issue.update'], false)
+        const actions = resolveRowActions(meta(), 'issue', can, true)
+        // view→index, edit→update granted; delete denied → hidden
+        expect(actions.map((a) => a.key)).toEqual(['view', 'edit'])
+    })
+
+    it('prefers explicit row actions and strips table/create placements', () => {
+        const m = meta({
+            actions: [
+                { key: 'pagar', name: 'pagar', label: 'Pagar', placement: 'row' } as any,
+                { key: 'export_all', name: 'export_all', label: 'Exportar', placement: 'table' } as any,
+                { key: 'new_journal', name: 'new_journal', label: 'Nuevo', placement: 'create' } as any,
+            ],
+            hasActions: true,
+        })
+        const actions = resolveRowActions(m, 'issue', allowAll, false)
+        expect(actions.map((a) => a.key)).toEqual(['pagar'])
+    })
+})
+
+describe('isRowActionVisible', () => {
+    it('combines the requiresState gate with the declarative condition', () => {
+        const stateGated = { key: 'start', requiresState: ['reception'] }
+        expect(isRowActionVisible(stateGated, { status: 'reception' })).toBe(true)
+        expect(isRowActionVisible(stateGated, { status: 'in_progress' })).toBe(false)
+
+        const condGated = { key: 'refund', condition: { field: 'paid', operator: 'eq', value: 'yes' } }
+        expect(isRowActionVisible(condGated, { paid: 'yes' })).toBe(true)
+        expect(isRowActionVisible(condGated, { paid: 'no' })).toBe(false)
+    })
+
+    it('isActionConditionMet supports eq/neq/in/not_in and is permissive without a condition', () => {
+        expect(isActionConditionMet({}, { x: 1 })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'in', value: ['a', 'b'] } }, { s: 'b' })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'not_in', value: ['a', 'b'] } }, { s: 'c' })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'neq', value: 'a' } }, { s: 'a' })).toBe(false)
+    })
+})

package/src/dynamic-columns.tsx

@@ -238,6 +238,38 @@ export const isActionAllowedForRowState = (action: any, row: any): boolean => {
     return requires.map(String).includes(String(status))
 }
 
+/**
+ * Declarative `condition` gate for a per-row action: shows the action only when
+ * the row's `field` satisfies the `eq | neq | in | not_in` operator. No
+ * condition declared → always shown. Unknown operator → permissive.
+ */
+export const isActionConditionMet = (action: any, row: any): boolean => {
+    if (!action?.condition) return true
+    const { field, operator, value } = action.condition
+    const rowValue = String(row?.[field] ?? '')
+    const values = Array.isArray(value) ? value : [value]
+    switch (operator) {
+        case 'eq':
+            return rowValue === values[0]
+        case 'neq':
+            return rowValue !== values[0]
+        case 'in':
+            return values.includes(rowValue)
+        case 'not_in':
+            return !values.includes(rowValue)
+        default:
+            return true
+    }
+}
+
+/**
+ * Whether a per-row action should appear for `row`: both the state-machine gate
+ * (`requiresState`) AND the declarative `condition` must pass. Shared by the
+ * table's action column and the kanban card menu so they hide/show identically.
+ */
+export const isRowActionVisible = (action: any, row: any): boolean =>
+    isActionAllowedForRowState(action, row) && isActionConditionMet(action, row)
+
 const lowerFirst = (value?: string) => {
     if (!value) return value
     return value.charAt(0).toLowerCase() + value.slice(1)
@@ -1265,25 +1297,7 @@ export function makeDefaultGetDynamicColumns(
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                                 {resolvedActions
-                                    .filter((action) => isActionAllowedForRowState(action, row.original))
-                                    .filter((action) => {
-                                        if (!action.condition) return true
-                                        const { field, operator, value } = action.condition
-                                        const rowValue = String((row.original as any)[field] ?? '')
-                                        const values = Array.isArray(value) ? value : [value]
-                                        switch (operator) {
-                                            case 'eq':
-                                                return rowValue === values[0]
-                                            case 'neq':
-                                                return rowValue !== values[0]
-                                            case 'in':
-                                                return values.includes(rowValue)
-                                            case 'not_in':
-                                                return !values.includes(rowValue)
-                                            default:
-                                                return true
-                                        }
-                                    })
+                                    .filter((action) => isRowActionVisible(action, row.original))
                                     .map((action) => (
                                         <DropdownMenuItem
                                             key={action.key}

package/src/dynamic-kanban.tsx

@@ -11,8 +11,9 @@
 //     single-value renderer that mirrors `defaultGetDynamicColumns`' display
 //     logic (currency, status, date, relation chip, …) — so a card cell and a
 //     table cell look identical.
-//   - Per-card actions reuse `useModelActions(model, ['row'])` +
-//     `ActionModalDispatcher`, the exact plumbing DynamicTable's row menu uses.
+//   - Per-card actions reuse `resolveRowActions` (capability-gated, same as the
+//     table's action column) + `useDynamicRowActions`, the EXACT shared handler
+//     DynamicTable's row menu dispatches through (view/edit/delete/link/custom).
 //
 // The one thing it owns that the table doesn't: an OPTIMISTIC drag-to-move.
 // Dropping a card into another lane mutates local state immediately and fires
@@ -54,16 +55,16 @@ import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
-import { ActionModalDispatcher } from './action-modal-dispatcher'
-import { useModelActions } from './model-action-toolbar'
 import { DynamicIcon } from './dynamic-icon'
 import { isColumnVisibleInTable } from './column-visibility'
-import { isActionAllowedForRowState } from './dynamic-columns'
+import { isRowActionVisible } from './dynamic-columns'
+import { useCan, usePermissionsActive, resolveRowActions } from './permissions-context'
+import { useDynamicRowActions } from './dynamic-row-actions'
 import type {
     TableMetadata,
     ColumnDefinition,
     ApiResponse,
-    ActionMetadata,
+    ActionDefinition,
     StageMeta,
     StageTransition,
 } from './types'
@@ -245,6 +246,13 @@ export interface DynamicKanbanProps {
     refreshTrigger?: any
     /** Called when a card is clicked (outside its action menu). */
     onCardClick?: (row: any) => void
+    /**
+     * Host hook for `view`/`edit` card actions (STRING contract — same as
+     * DynamicTable's `onAction`). When provided, `view`/`edit` route to the host
+     * (e.g. its seeded record modal); when omitted they open the SDK's built-in
+     * record dialog. `delete`/link/custom actions are always handled in-SDK.
+     */
+    onAction?: (action: string, row: any) => void
     /**
      * Max cards fetched per lane render. Kanban shows all cards at once (no
      * pagination UI), so it requests a single large page. Defaults to 200.
@@ -261,6 +269,7 @@ export function DynamicKanban({
     endpoint,
     refreshTrigger,
     onCardClick,
+    onAction,
     pageSize = 200,
     timeZone,
     currency,
@@ -280,11 +289,6 @@ export function DynamicKanban({
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState<string | null>(null)
 
-    const [actionModal, setActionModal] = useState<{
-        action: ActionMetadata | null
-        record: any | null
-    }>({ action: null, record: null })
-
     const sensors = useSensors(
         useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     )
@@ -360,8 +364,32 @@ export function DynamicKanban({
         [metadata],
     )
 
-    // Row-placement actions reused verbatim from the table's plumbing.
-    const rowActions = useModelActions(model, ['row'], metadata?.actions)
+    // Row-placement actions resolved EXACTLY like DynamicTable's action column:
+    // capability-gated (when a <PermissionsProvider> is mounted) and with the
+    // implicit View/Edit/Delete trio materialized for CRUD models. An action the
+    // user lacks permission for never appears.
+    const can = useCan()
+    const permissionsActive = usePermissionsActive()
+    const rowActions = useMemo(
+        () =>
+            metadata
+                ? resolveRowActions(metadata, model, can, permissionsActive, (k, fb) =>
+                      t(k, { defaultValue: fb }),
+                  )
+                : [],
+        [metadata, model, can, permissionsActive, t],
+    )
+
+    // Shared row-action dispatch + dialogs — view/edit/delete/link/custom behave
+    // identically to a table row (the card menu used to forward the raw action
+    // object to the host and silently no-op).
+    const { handleInternalAction, dialogs: rowActionDialogs } = useDynamicRowActions({
+        model,
+        endpoint,
+        metadata,
+        onAction,
+        onRefresh: fetchData,
+    })
 
     const cardById = useMemo(() => {
         const m = new Map<string, any>()
@@ -440,7 +468,7 @@ export function DynamicKanban({
         return (
             <div className="flex gap-4 overflow-x-auto p-1">
                 {[0, 1, 2, 3].map((i) => (
-                    <div key={i} className="min-w-[220px] max-w-[320px] flex-1 space-y-3">
+                    <div key={i} className="w-[300px] shrink-0 space-y-3">
                         <Skeleton className="h-8 w-full" />
                         <Skeleton className="h-24 w-full" />
                         <Skeleton className="h-24 w-full" />
@@ -513,9 +541,7 @@ export function DynamicKanban({
                                         timeZone={timeZone}
                                         currency={currency}
                                         onClick={onCardClick}
-                                        onAction={(action, record) =>
-                                            setActionModal({ action, record })
-                                        }
+                                        onAction={handleInternalAction}
                                     />
                                 ))
                             )}
@@ -537,22 +563,7 @@ export function DynamicKanban({
                 ) : null}
             </DragOverlay>
 
-            {actionModal.action && (
-                <ActionModalDispatcher
-                    open={!!actionModal.action}
-                    onOpenChange={(open) => {
-                        if (!open) setActionModal({ action: null, record: null })
-                    }}
-                    action={actionModal.action}
-                    model={model}
-                    record={actionModal.record ?? {}}
-                    endpoint={endpoint ?? `/data/${model}/me`}
-                    onSuccess={() => {
-                        setActionModal({ action: null, record: null })
-                        void fetchData()
-                    }}
-                />
-            )}
+            {rowActionDialogs}
         </DndContext>
     )
 }
@@ -579,7 +590,7 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     return (
         <div
             ref={setNodeRef}
-            className="flex min-w-[220px] max-w-[320px] flex-1 flex-col rounded-lg border bg-muted/30 transition-opacity"
+            className="flex w-[300px] shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity"
             style={{
                 opacity: dimmed ? 0.45 : 1,
                 outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
@@ -621,12 +632,13 @@ interface KanbanCardProps {
     card: any
     titleCol: ColumnDefinition | null
     fieldCols: ColumnDefinition[]
-    actions: ActionMetadata[] | any[]
+    actions: ActionDefinition[]
     locale: string
     timeZone?: string
     currency?: string
     onClick?: (row: any) => void
-    onAction: (action: ActionMetadata, record: any) => void
+    /** STRING contract — dispatch the action by its key (see useDynamicRowActions). */
+    onAction: (actionKey: string, record: any) => void
 }
 
 function KanbanCard({
@@ -644,9 +656,7 @@ function KanbanCard({
         id: String(card.id),
     })
 
-    const visibleActions = (actions as any[]).filter((a) =>
-        isActionAllowedForRowState(a, card),
-    )
+    const visibleActions = actions.filter((a) => isRowActionVisible(a, card))
 
     return (
         <Card
@@ -693,7 +703,7 @@ function KanbanCard({
                                         key={a.key}
                                         onClick={(e) => {
                                             e.stopPropagation()
-                                            onAction(a as ActionMetadata, card)
+                                            onAction(a.key, card)
                                         }}
                                     >
                                         <DynamicIcon
@@ -739,7 +749,7 @@ function CardPreview({
     currency,
 }: Omit<KanbanCardProps, 'actions' | 'onClick' | 'onAction'>) {
     return (
-        <Card className="w-72 cursor-grabbing border-primary/40 shadow-lg">
+        <Card className="w-[284px] cursor-grabbing border-primary/40 shadow-lg">
             <CardContent className="space-y-1.5 p-3">
                 <div className="break-words text-sm font-medium leading-snug">
                     {titleCol ? (

package/src/dynamic-row-actions.tsx

@@ -0,0 +1,195 @@
+// useDynamicRowActions — the single source of truth for what a per-row action
+// (the "…" kebab → Ver / Editar / Eliminar / custom / link) DOES when clicked.
+//
+// Extracted verbatim from DynamicTable so the kanban board's per-card menu
+// behaves IDENTICALLY to a table row (it used to forward the raw action object
+// to the host and silently no-op). Both renderers call the returned
+// `handleInternalAction(actionKey, row)` with the action's STRING key and mount
+// the returned `dialogs` node once in their tree:
+//
+//   delete                 → opens the SDK's own confirm dialog, then DELETEs.
+//   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.
+//   anything else          → host `onAction` + refresh (or just refresh).
+//
+// The host `onAction` contract is a STRING action key on purpose — the existing
+// ops `handleAction(action: string, row)` keeps working unchanged.
+import { useCallback, useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from '@asteby/metacore-ui/primitives'
+import { useApi } from './api-context'
+import { ActionModalDispatcher } from './action-modal-dispatcher'
+import { DynamicRecordDialog } from './dialogs/dynamic-record'
+import type { TableMetadata, ActionMetadata } from './types'
+
+export interface UseDynamicRowActionsParams {
+    /** Model key as registered on the backend (e.g. "issue"). */
+    model: string
+    /**
+     * Data endpoint base. The per-record DELETE hits `<endpoint>/<id>`; when
+     * omitted it falls back to `/data/<model>/<id>`. Pass the SAME base the
+     * caller lists from (e.g. `/data/<model>/me`) so writes stay org-scoped.
+     */
+    endpoint?: string
+    /** Raw model metadata — used to resolve link/custom action definitions. */
+    metadata: TableMetadata | null
+    /**
+     * Host hook for `view`/`edit` (and any unhandled key). STRING contract:
+     * receives the action key, not the action object. When absent, `view`/`edit`
+     * fall back to the built-in record dialog.
+     */
+    onAction?: (action: string, row: any) => void
+    /** Called after a successful delete / custom action to refetch the list. */
+    onRefresh: () => void
+}
+
+export interface DynamicRowActions {
+    /** Dispatch a row action by its STRING key. */
+    handleInternalAction: (action: string, row: any) => Promise<void>
+    /**
+     * The delete-confirm dialog + record dialog + action modal this handler
+     * drives. Render it ONCE in the consuming component's tree.
+     */
+    dialogs: React.ReactElement
+}
+
+/**
+ * Owns the state + dialogs + dispatch logic for per-row actions, shared by
+ * DynamicTable and DynamicKanban so both behave identically.
+ */
+export function useDynamicRowActions({
+    model,
+    endpoint,
+    metadata,
+    onAction,
+    onRefresh,
+}: UseDynamicRowActionsParams): DynamicRowActions {
+    const { t } = useTranslation()
+    const api = useApi()
+    const navigate = useNavigate()
+
+    const [recordDialog, setRecordDialog] = useState<{
+        open: boolean
+        mode: 'view' | 'edit' | 'create'
+        recordId: string | null
+    }>({ open: false, mode: 'view', recordId: null })
+
+    const [rowToDelete, setRowToDelete] = useState<any | null>(null)
+    const [isDeleting, setIsDeleting] = useState(false)
+
+    const [actionModal, setActionModal] = useState<{
+        open: boolean
+        action: ActionMetadata | null
+        record: any | null
+    }>({ open: false, action: null, record: null })
+
+    const handleInternalAction = useCallback(async (action: string, row: any) => {
+        if (action === 'delete') { setRowToDelete(row); return }
+        if (action === 'view' || action === 'edit') {
+            if (onAction) await Promise.resolve(onAction(action, row))
+            else setRecordDialog({ open: true, mode: action, recordId: row.id })
+            return
+        }
+        const linkDef = metadata?.actions?.find((a) => a.key === action && a.type === 'link')
+        if (linkDef?.linkUrl) {
+            const url = linkDef.linkUrl.replace(/\{(\w+)\}/g, (_: string, field: string) => String(row[field] ?? ''))
+            navigate({ to: url })
+            return
+        }
+        const actionDef = metadata?.actions?.find((a) => a.key === action)
+        if (actionDef && (actionDef.fields?.length || actionDef.confirm || actionDef.executable)) {
+            setActionModal({
+                open: true,
+                action: {
+                    key: actionDef.key,
+                    label: actionDef.label,
+                    icon: actionDef.icon || 'Zap',
+                    color: actionDef.color,
+                    confirm: actionDef.confirm,
+                    confirmMessage: actionDef.confirmMessage,
+                    fields: actionDef.fields,
+                    requiresState: actionDef.requiresState,
+                    executable: actionDef.executable,
+                },
+                record: row,
+            })
+            return
+        }
+        if (onAction) { await Promise.resolve(onAction(action, row)); onRefresh() }
+        else onRefresh()
+    }, [onAction, onRefresh, metadata, navigate])
+
+    const confirmDelete = async () => {
+        if (!rowToDelete) return
+        setIsDeleting(true)
+        try {
+            const deleteEndpoint = endpoint ? `${endpoint}/${rowToDelete.id}` : `/data/${model}/${rowToDelete.id}`
+            const res = await api.delete(deleteEndpoint)
+            if (res.data.success) { toast.success(res.data.message || 'Eliminado correctamente'); onRefresh() }
+            else toast.error(res.data.message || 'Error al eliminar')
+        } catch (error) {
+            console.error('Error al eliminar', error)
+            toast.error('Error al eliminar el registro')
+        } finally {
+            setIsDeleting(false)
+            setRowToDelete(null)
+        }
+    }
+
+    const dialogs = (
+        <>
+            <AlertDialog open={!!rowToDelete} onOpenChange={(open: boolean) => !open && setRowToDelete(null)}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>¿Está absolutamente seguro?</AlertDialogTitle>
+                        <AlertDialogDescription>Esta acción no se puede deshacer. Esto eliminará permanentemente el registro seleccionado de nuestros servidores.</AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>{t('common.cancel')}</AlertDialogCancel>
+                        <AlertDialogAction onClick={(e: React.MouseEvent) => { e.preventDefault(); confirmDelete() }} className="bg-red-600 hover:bg-red-700" disabled={isDeleting}>
+                            {isDeleting ? 'Eliminando...' : 'Eliminar'}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
+            <DynamicRecordDialog
+                open={recordDialog.open}
+                onOpenChange={(open: boolean) => setRecordDialog((prev) => ({ ...prev, open }))}
+                mode={recordDialog.mode}
+                model={model}
+                recordId={recordDialog.recordId}
+                endpoint={endpoint}
+                onSaved={onRefresh}
+            />
+
+            {actionModal.action && (
+                <ActionModalDispatcher
+                    open={actionModal.open}
+                    onOpenChange={(open: boolean) => setActionModal((prev) => ({ ...prev, open }))}
+                    action={actionModal.action}
+                    model={model}
+                    record={actionModal.record}
+                    endpoint={endpoint}
+                    onSuccess={onRefresh}
+                />
+            )}
+        </>
+    )
+
+    return { handleInternalAction, dialogs }
+}