@asteby/metacore-runtime-react 6.0.0 → 6.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @asteby/metacore-runtime-react
 
+## 6.4.0
+
+### Minor Changes
+
+- d7f1e55: Per-model extension registry, badge cell normalization, and auto-derived filter chips.
+  - `registerModelExtension(model, ext)` lets apps layer per-model UI on top of `<DynamicCRUDPage>` (header KPI strip, custom toolbar buttons, hidden create flow, title overrides) without forking the page or copy-pasting it.
+  - `defaultGetDynamicColumns` now accepts `type === 'badge'` (what the kernel emits) in addition to `cellStyle === 'badge'`. Columns marked `type: badge` previously rendered as plain text.
+  - `<DynamicTable>` derives a filter chip from every column flagged `filterable: true` plus either static options, a `searchEndpoint`, or boolean type, so apps no longer need to mirror the same options into a separate `filters` array on the metadata. Explicit `metadata.filters` still wins when present.
+  - Fixes the default `getDynamicColumns` fallback that previously read `col.name` instead of `col.key`, leaving cells blank for hosts that did not pass a custom factory.
+
 ## 6.0.0
 
 ### Patch Changes
@@ -20,7 +30,7 @@
 
 - e23eede: Publicación inicial a npm del ecosistema metacore.
 
-  Propaga los 13 paquetes del SDK al registry público para que apps consumidoras (ops, link) migren de `file:` a semver y Renovate pueda propagar updates.
+  Propaga los 13 paquetes del SDK al registry público para que las host applications consumidoras migren de `file:` a semver y Renovate pueda propagar updates.
 
 ### Patch Changes
 
@@ -34,7 +44,7 @@
 
 - 6d243b0: Initial release of the metacore frontend ecosystem.
 
-  11 packages extracted from ops/link frontends into a publishable monorepo with auto-propagation via Changesets + Renovate.
+  11 packages extracted from host application frontends into a publishable monorepo with auto-propagation via Changesets + Renovate.
 
 ### Patch Changes
 

package/README.md

@@ -1,59 +1,82 @@
 # @asteby/metacore-runtime-react
 
-React runtime for [metacore](https://github.com/asteby/metacore-sdk) hosts. This
-package bundles the generic components a host (`ops`, `link`, `hub`) renders
-when showing addon contributions — dynamic tables, forms, action dispatchers,
-slot extension points and the federated addon loader.
-
-It is a *runtime*, not a UI kit: the actual visual primitives (buttons,
-dialogs, tables…) are resolved through the host's bundler aliases. The host
-must provide the following modules at build time:
-
-| Alias                              | Purpose                               |
-| ---------------------------------- | ------------------------------------- |
-| `@/components/ui/*`                | shadcn primitives                     |
-| `@/components/data-table`          | DataTableToolbar / Pagination / etc.  |
-| `@/components/dynamic/dynamic-columns` | column renderers (`DynamicIcon`, etc) |
-| `@/components/dynamic/dynamic-record-dialog` | CRUD dialog (still host-owned) |
-| `@/components/dynamic/export-dialog` | Export dialog                       |
-| `@/components/dynamic/import-dialog` | Import dialog                       |
-| `@/lib/api`                        | axios instance                        |
-| `@/lib/utils`                      | `cn()` helper                         |
-| `@/stores/metadata-cache`          | zustand store                         |
-| `@/stores/branch-store`            | zustand store (optional)              |
+React runtime for [Metacore](https://github.com/asteby/metacore-sdk) hosts. The metadata-driven CRUD layer that turns a manifest declaration into a working UI: dynamic tables, forms, action dispatchers, slot extension points, capability gates, and the federated addon loader.
+
+This is a *runtime*, not a UI kit — visual primitives come from [`@asteby/metacore-ui`](../ui). Hosts inject their HTTP client and (optionally) tenant-branch context via React providers; no bundler aliases are required.
+
+## Install
+
+```bash
+pnpm add @asteby/metacore-runtime-react @asteby/metacore-sdk @asteby/metacore-ui
+```
+
+Peers: `react`, `react-dom`, `react-i18next`, `i18next`, `@tanstack/react-router`, `@tanstack/react-table`, `date-fns`, `lucide-react`, `sonner`, `zustand`. They're declared as peers so React stays single-instance.
 
 ## Exports
 
-- `DynamicTable` – CRUD-capable table driven by `manifest.model_definition`.
-- `DynamicForm` – renders a form from `fields[]`.
-- `ActionModalDispatcher` – routes a custom action to its registered component
-  (falls back to confirm dialog / generic form).
-- `AddonLoader` – injects a federated `remoteEntry.js` and calls `register(api)`.
-- `Slot` / `slotRegistry` – named extension points (`dashboard.widgets`, …).
-- `CapabilityGate` / `CapabilityProvider` – conditional UI by capability.
-- `NavigationBuilder` / `mergeNavigation` – merges host sidebar with addon nav.
-- `I18nProvider` – injects `manifest.i18n` namespaces into the host's i18next.
+| Export | What it does |
+|---|---|
+| `<DynamicTable model="…" />` | Metadata-driven CRUD table. Sortable, paginated, filterable, URL-syncable, with built-in dialogs. |
+| `<DynamicForm fields={…} onSubmit={…} />` | Standalone form renderer over `ActionFieldDef[]`. |
+| `<DynamicRecordDialog />` | Create / edit / view modal driven by `/metadata/modal/<model>`. |
+| `<ActionModalDispatcher />` | Routes a custom action to its registered component, generic form, or confirm dialog. |
+| `<AddonLoader />` | Injects a federated `remoteEntry.js` and calls the addon's `register(api)`. |
+| `<Slot name="…" />` / `slotRegistry` | Named extension points contributed by addons. |
+| `<CapabilityGate require="…" />` / `<CapabilityProvider />` | Conditional UI by capability. |
+| `<NavigationBuilder />` / `useNavigation()` / `mergeNavigation()` | Merges host sidebar with addon `manifest.navigation`. |
+| `<I18nProvider />` | Folds `manifest.i18n` namespaces into the host's i18next instance. |
+| `<ApiProvider client={axios} />` / `useApi()` | Inject the host's HTTP client. Required by every dynamic component. |
+| `<BranchProvider branch={…} />` / `useCurrentBranch()` | Optional tenant-branch context. |
+| `useMetadataCache()` | Zustand store for table/modal metadata, persisted to LocalStorage. `prefetchAll(api)` warms it from `/metadata/all`. |
+| `defaultGetDynamicColumns` / `makeDefaultGetDynamicColumns(helpers)` | The factory `<DynamicTable>` uses to convert metadata into TanStack column defs. The default reads from `col.key` (matching the kernel contract). |
+| `DynamicIcon` | Lucide icon resolver by name. |
 
 ## Minimal usage
 
 ```tsx
-import { DynamicTable, Slot, CapabilityGate, AddonLoader } from '@asteby/metacore-runtime-react'
-
-<AddonLoader scope="billing" url="/addons/billing/remoteEntry.js" api={api}>
-  <CapabilityGate require="invoice.read">
-    <DynamicTable model="invoice" />
-    <Slot name="invoice.footer" />
-  </CapabilityGate>
-</AddonLoader>
+import {
+  ApiProvider,
+  CapabilityProvider,
+  DynamicTable,
+} from '@asteby/metacore-runtime-react'
+import { api } from './lib/api'
+
+export function App() {
+  return (
+    <ApiProvider client={api}>
+      <CapabilityProvider capabilities={session.capabilities}>
+        <DynamicTable model="tickets" />
+      </CapabilityProvider>
+    </ApiProvider>
+  )
+}
 ```
 
-## Installation
+For props, response shapes, customization patterns and the full surface, see [`docs/dynamic-ui.md`](https://github.com/asteby/metacore-sdk/blob/main/docs/dynamic-ui.md).
 
-`@asteby/metacore-runtime-react` depends on `@asteby/metacore-sdk` for the
-canonical action registry and `AddonAPI` contract. Build order:
+## How it talks to the kernel
 
-```
-pnpm --filter @asteby/metacore-sdk build
+| Endpoint | Used by |
+|---|---|
+| `GET /metadata/table/<model>` | `<DynamicTable>` (cached). |
+| `GET /metadata/modal/<model>` | `<DynamicRecordDialog>` (cached). |
+| `GET /metadata/all` | `useMetadataCache().prefetchAll()`. |
+| `GET /data/<model>` | `<DynamicTable>` list. |
+| `GET /data/<model>/<id>` | `<DynamicRecordDialog>` view/edit. |
+| `POST /data/<model>` | Create. |
+| `PUT /data/<model>/<id>` | Update. |
+| `DELETE /data/<model>/<id>` | Delete (single + bulk). |
+| `POST /data/<model>/<id>/action/<key>` | `<ActionModalDispatcher>`. |
+| `GET /options/<endpoint>` | Relation pickers + select prefetch. |
+
+All endpoints can be overridden per-component via the `endpoint` prop.
+
+## Build
+
+```bash
 pnpm --filter @asteby/metacore-runtime-react build
-pnpm --filter <host> install
 ```
+
+## License
+
+Apache-2.0

package/dist/dialogs/export.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // ExportDialog — lets users pick format (csv/json) + columns and kicks off
 // either a sync download or an async export job (polled via /exports/:id/status).
-// Ported from the ops starter. Axios-like client is provided by <ApiProvider>.
+// Axios-like client is provided by <ApiProvider>.
 import { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button, Label, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@asteby/metacore-ui/primitives';
 import { Progress, RadioGroup, RadioGroupItem } from './_primitives';

package/dist/dialogs/import.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"import.d.ts","sourceRoot":"","sources":["../../src/dialogs/import.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAoBD,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,GACb,EAAE,iBAAiB,2CAwVnB"}
+{"version":3,"file":"import.d.ts","sourceRoot":"","sources":["../../src/dialogs/import.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAG7C,UAAU,iBAAiB;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,aAAa,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAC1B;AAoBD,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,UAAU,GACb,EAAE,iBAAiB,2CAwVnB"}

package/dist/dialogs/import.js

@@ -1,7 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // ImportDialog — three-step CSV/JSON import flow (upload → validate → import
-// with per-row error report). Ported from the ops starter. Axios-like client
-// is provided by <ApiProvider>.
+// with per-row error report). Axios-like client is provided by <ApiProvider>.
 import { useState, useEffect, useRef } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, Button, Input, Label, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from '@asteby/metacore-ui/primitives';
 import { Progress } from './_primitives';

package/dist/dynamic-columns.d.ts

@@ -0,0 +1,29 @@
+import type { GetDynamicColumns } from './dynamic-columns-shim';
+/** Host-supplied helpers consumed by avatar/image cell renderers. */
+export interface DynamicColumnsHelpers {
+    /**
+     * Resolves a relative or absolute media path into a renderable URL. Hosts
+     * typically prepend their CDN/storage base. If omitted, paths are passed
+     * through verbatim.
+     */
+    getImageUrl?: (path: string) => string;
+    /**
+     * API origin used to build avatar URLs when the row carries a bare filename
+     * instead of an absolute URL or sibling `.avatar` field. Usually
+     * `import.meta.env.VITE_API_URL.replace('/api', '')`.
+     */
+    apiBaseUrl?: string;
+}
+/**
+ * Builds the canonical column factory used by `<DynamicTable>` when the host
+ * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar
+ * URL resolution.
+ */
+export declare function makeDefaultGetDynamicColumns(helpers?: DynamicColumnsHelpers): GetDynamicColumns;
+/**
+ * Eager-built variant — equivalent to `makeDefaultGetDynamicColumns()`. Use
+ * this when the host has no helpers to inject and a stable function reference
+ * suffices.
+ */
+export declare const defaultGetDynamicColumns: GetDynamicColumns;
+//# sourceMappingURL=dynamic-columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAwHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAmVnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Default `getDynamicColumns` factory used by hosts that don't need a custom
+// renderer. Supports every cell type produced by kernel/dynamic metadata:
+// badge (static + endpoint-loaded options), avatar, phone, date, boolean,
+// relation-badge-list, media-gallery, image, plus a generic text fallback.
+//
+// The implementation was previously duplicated across multiple host apps
+// (~550 LOC each, drifting). It now lives here so a single fix propagates
+// to every host. Hosts inject app-specific URL helpers via the `helpers`
+// argument so the SDK stays free of environment-bound code.
+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 { Avatar, AvatarFallback, AvatarImage, Badge, Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@asteby/metacore-ui';
+import { DataTableColumnHeader, FilterableColumnHeader, } from '@asteby/metacore-ui/data-table';
+import { generateBadgeStyles } from '@asteby/metacore-ui/lib';
+import { OptionsContext } from './options-context';
+import { DynamicIcon } from './dynamic-icon';
+const defaultGetImageUrl = (path) => path;
+const getNestedValue = (obj, path) => path.split('.').reduce((acc, part) => acc && acc[part], obj);
+const lowerFirst = (value) => {
+    if (!value)
+        return value;
+    return value.charAt(0).toLowerCase() + value.slice(1);
+};
+const getPathVariants = (path) => {
+    if (!path)
+        return [];
+    const normalized = path
+        .split('.')
+        .map((segment) => lowerFirst(segment) || segment)
+        .join('.');
+    return Array.from(new Set([path, normalized])).filter(Boolean);
+};
+const getValueFromPathVariants = (obj, path) => {
+    if (!path)
+        return undefined;
+    for (const candidate of getPathVariants(path)) {
+        const value = getNestedValue(obj, candidate);
+        if (value !== undefined && value !== null)
+            return value;
+    }
+    return undefined;
+};
+const useIsDarkTheme = () => {
+    const [isDark, setIsDark] = React.useState(() => typeof document !== 'undefined' &&
+        document.documentElement.classList.contains('dark'));
+    React.useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const sync = () => setIsDark(document.documentElement.classList.contains('dark'));
+        sync();
+        const observer = new MutationObserver(sync);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+const renderRelationBadges = (items, col) => {
+    if (!Array.isArray(items) || items.length === 0) {
+        return _jsx("span", { className: "text-muted-foreground", children: "-" });
+    }
+    return (_jsx("div", { className: "flex flex-wrap gap-1", children: items.map((item, idx) => {
+            const relationTarget = col.relationPath
+                ? getValueFromPathVariants(item, col.relationPath) ?? item
+                : item;
+            const displaySource = relationTarget ?? item;
+            let displayValue = col.displayField !== undefined && col.displayField !== null
+                ? getValueFromPathVariants(displaySource, col.displayField)
+                : displaySource;
+            if (displayValue === undefined || displayValue === null) {
+                displayValue = displaySource;
+            }
+            const label = displayValue !== undefined && displayValue !== null
+                ? String(displayValue)
+                : '-';
+            let iconValue;
+            if (col.iconField) {
+                const rawIcon = getValueFromPathVariants(displaySource, col.iconField);
+                if (rawIcon !== undefined && rawIcon !== null) {
+                    iconValue = String(rawIcon);
+                }
+            }
+            return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1", children: [iconValue && (_jsx(DynamicIcon, { name: iconValue, className: "h-3 w-3" })), _jsx("span", { children: label })] }, `${col.key}-${idx}`));
+        }) }));
+};
+const OptionBadge = ({ option }) => {
+    const isDark = useIsDarkTheme();
+    const colorStyles = option.color ? generateBadgeStyles(option.color, { isDark }) : {};
+    return (_jsxs(Badge, { variant: "outline", className: "flex items-center gap-1 border-0", style: colorStyles, children: [option.icon && _jsx(DynamicIcon, { name: option.icon, className: "h-3.5 w-3.5" }), _jsx("span", { children: option.label })] }));
+};
+const BadgeWithEndpointOptions = ({ endpoint, value }) => {
+    const { optionsMap } = React.useContext(OptionsContext);
+    const options = optionsMap.get(endpoint) || [];
+    const option = options.find((opt) => opt.value === value);
+    if (option)
+        return _jsx(OptionBadge, { option: option, fallback: String(value) });
+    return _jsx(Badge, { variant: "outline", children: String(value) });
+};
+/**
+ * Builds the canonical column factory used by `<DynamicTable>` when the host
+ * does not supply its own. Pass `{ getImageUrl, apiBaseUrl }` to wire avatar
+ * URL resolution.
+ */
+export function makeDefaultGetDynamicColumns(helpers = {}) {
+    const getImageUrl = helpers.getImageUrl ?? defaultGetImageUrl;
+    const apiBaseUrl = helpers.apiBaseUrl ?? '';
+    return function defaultGetDynamicColumns(metadata, onAction, t, currentLanguage, filterConfigs) {
+        const dateLocale = currentLanguage === 'en' ? enUS : es;
+        const columns = [
+            {
+                id: 'select',
+                header: ({ table }) => (_jsx(Checkbox, { checked: table.getIsAllPageRowsSelected() ||
+                        (table.getIsSomePageRowsSelected() && 'indeterminate'), onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all", className: "translate-y-[2px]" })),
+                cell: ({ row }) => (_jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Select row", className: "translate-y-[2px]" })),
+                enableSorting: false,
+                enableHiding: false,
+            },
+        ];
+        metadata.columns.forEach((col) => {
+            if (col.hidden)
+                return;
+            const translatedLabel = col.label;
+            const filterConfig = filterConfigs?.get(col.key);
+            const columnMeta = {
+                label: translatedLabel,
+            };
+            if (filterConfig) {
+                const fm = {
+                    filterable: true,
+                    filterType: filterConfig.filterType,
+                    filterKey: filterConfig.filterKey,
+                    filterOptions: filterConfig.options,
+                    filterLoading: filterConfig.loading,
+                    filterSearchEndpoint: filterConfig.searchEndpoint,
+                    selectedValues: filterConfig.selectedValues,
+                    onFilterChange: filterConfig.onFilterChange,
+                };
+                Object.assign(columnMeta, fm);
+            }
+            columns.push({
+                accessorKey: col.key,
+                id: col.key,
+                meta: columnMeta,
+                header: ({ column }) => filterConfig ? (_jsx(FilterableColumnHeader, { column: column, title: translatedLabel })) : (_jsx(DataTableColumnHeader, { column: column, title: translatedLabel })),
+                cell: ({ row }) => {
+                    const value = getNestedValue(row.original, col.key);
+                    // Kernel emits the renderer flag as `type`; older hosts used
+                    // `cellStyle`. Accept both so a single backend works across
+                    // SDK versions.
+                    const renderAs = col.cellStyle ?? col.type;
+                    // Endpoint-loaded badge options (preloaded into OptionsContext)
+                    if (renderAs === 'badge' && col.useOptions && col.searchEndpoint) {
+                        if (!value)
+                            return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                        return _jsx(BadgeWithEndpointOptions, { endpoint: col.searchEndpoint, value: value });
+                    }
+                    // Static badge options — map value → label/icon/color
+                    if (renderAs === 'badge' && col.options && col.options.length > 0) {
+                        if (!value && value !== 0)
+                            return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                        const option = col.options.find((o) => o.value === String(value));
+                        if (option)
+                            return _jsx(OptionBadge, { option: option, fallback: String(value) });
+                        return _jsx(Badge, { variant: "outline", children: String(value) });
+                    }
+                    if (renderAs === 'relation-badge-list') {
+                        return renderRelationBadges(value, col);
+                    }
+                    switch (col.type) {
+                        case 'date': {
+                            if (!value)
+                                return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                            try {
+                                const date = new Date(value);
+                                if (isNaN(date.getTime()) || date.getFullYear() <= 1) {
+                                    return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                                }
+                                return (_jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground", children: [_jsx(icons.Calendar, { className: "h-3.5 w-3.5 opacity-70" }), _jsx("span", { className: "text-sm font-medium", children: format(date, 'PPP', { locale: dateLocale }) })] }));
+                            }
+                            catch {
+                                return _jsx("span", { children: String(value) });
+                            }
+                        }
+                        case 'search':
+                        case 'avatar': {
+                            const namePath = col.tooltip || col.key;
+                            const name = getNestedValue(row.original, namePath) || 'N/A';
+                            const desc = getNestedValue(row.original, col.description || '');
+                            let avatarSrc;
+                            if (col.key.includes('.')) {
+                                const parentPath = col.key.split('.').slice(0, -1).join('.');
+                                const avatarPath = `${parentPath}.avatar`;
+                                const possibleAvatar = getNestedValue(row.original, avatarPath);
+                                if (possibleAvatar)
+                                    avatarSrc = String(possibleAvatar);
+                            }
+                            else if (value &&
+                                (String(value).startsWith('http') || String(value).startsWith('https'))) {
+                                avatarSrc = String(value);
+                            }
+                            else if (value) {
+                                avatarSrc = `${apiBaseUrl}${col.basePath || ''}${value}`;
+                            }
+                            return (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg ring-1 ring-border/50", children: [_jsx(AvatarImage, { src: getImageUrl(avatarSrc || ''), alt: String(name), className: "object-cover" }), _jsx(AvatarFallback, { className: "text-[10px] font-bold bg-primary/5 text-primary rounded-lg", children: String(name)
+                                                    .split(' ')
+                                                    .map((n) => n[0])
+                                                    .slice(0, 2)
+                                                    .join('')
+                                                    .toUpperCase() })] }), _jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [_jsx("span", { className: "font-medium text-sm truncate leading-none mb-0.5 text-foreground/90", children: String(name) }), desc && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate leading-none", children: String(desc) }))] })] }));
+                        }
+                        case 'relation-badge-list':
+                            return renderRelationBadges(value, col);
+                        case 'phone': {
+                            if (!value)
+                                return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                            return _jsx("span", { className: "font-medium text-sm", children: String(value) });
+                        }
+                        case 'boolean':
+                            return value ? _jsx(Badge, { children: "S\u00ED" }) : _jsx(Badge, { variant: "secondary", children: "No" });
+                        case 'media-gallery': {
+                            if (!value || (Array.isArray(value) && value.length === 0)) {
+                                return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                            }
+                            const mediaItems = Array.isArray(value) ? value : [];
+                            const visibleItems = mediaItems.slice(0, 3);
+                            const remaining = mediaItems.length - 3;
+                            return (_jsxs("div", { className: "flex -space-x-2 overflow-hidden", children: [visibleItems.map((item, i) => {
+                                        const src = item.url;
+                                        if (item.type === 'image') {
+                                            return (_jsxs(Avatar, { className: "inline-block h-8 w-8 rounded-full ring-2 ring-background", children: [_jsx(AvatarImage, { src: src, className: "object-cover" }), _jsx(AvatarFallback, { children: item.type?.[0] })] }, i));
+                                        }
+                                        return (_jsx("div", { className: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-muted ring-2 ring-background", children: _jsx(DynamicIcon, { name: item.type === 'video'
+                                                    ? 'Video'
+                                                    : item.type === 'audio'
+                                                        ? 'AudioLines'
+                                                        : 'FileText', className: "h-4 w-4" }) }, i));
+                                    }), remaining > 0 && (_jsxs("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-medium ring-2 ring-background", children: ["+", remaining] }))] }));
+                        }
+                        case 'image': {
+                            const imageValue = value ||
+                                (Array.isArray(row.original.media)
+                                    ? row.original.media.find((m) => m.type === 'image')?.url
+                                    : null);
+                            if (!imageValue)
+                                return _jsx("span", { className: "text-muted-foreground", children: "-" });
+                            return (_jsx("div", { className: "h-10 w-10 relative rounded overflow-hidden bg-muted flex items-center justify-center", children: _jsx("img", { src: getImageUrl(String(imageValue)), alt: "Thumbnail", className: "h-full w-full object-contain", onError: (e) => {
+                                        ;
+                                        e.currentTarget.style.display = 'none';
+                                    } }) }));
+                        }
+                        default: {
+                            if (typeof value === 'object' && value !== null) {
+                                return (_jsx("span", { className: "text-muted-foreground text-xs", children: JSON.stringify(value) }));
+                            }
+                            if (col.key === 'description' ||
+                                col.key === 'features' ||
+                                col.key.includes('description')) {
+                                return (_jsx("div", { className: "max-w-[350px]", title: String(value), children: _jsx("span", { className: "truncate font-medium block", children: value !== null && value !== undefined ? String(value) : '-' }) }));
+                            }
+                            return (_jsx("span", { className: "truncate font-medium", children: value !== null && value !== undefined ? String(value) : '-' }));
+                        }
+                    }
+                },
+                enableSorting: col.sortable,
+                enableHiding: true,
+            });
+        });
+        if (metadata.hasActions && metadata.actions.length > 0) {
+            columns.push({
+                id: 'actions',
+                header: () => _jsx("div", { className: "text-right", children: t ? t('common.actions') : 'Acciones' }),
+                size: 80,
+                maxSize: 80,
+                meta: {},
+                cell: ({ row }) => (_jsx("div", { className: "flex items-center justify-end", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-8 w-8 p-0", children: [_jsx("span", { className: "sr-only", children: "Abrir men\u00FA" }), _jsx(MoreHorizontal, { className: "h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: metadata.actions
+                                    .filter((action) => {
+                                    if (!action.condition)
+                                        return true;
+                                    const { field, operator, value } = action.condition;
+                                    const rowValue = String(row.original[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;
+                                    }
+                                })
+                                    .map((action) => (_jsxs(DropdownMenuItem, { onClick: () => onAction && onAction(action.key, row.original), children: [_jsx(DynamicIcon, { name: action.icon, className: "mr-2 h-4 w-4" }), action.label] }, action.key))) })] }) })),
+            });
+        }
+        return columns;
+    };
+}
+/**
+ * Eager-built variant — equivalent to `makeDefaultGetDynamicColumns()`. Use
+ * this when the host has no helpers to inject and a stable function reference
+ * suffices.
+ */
+export const defaultGetDynamicColumns = makeDefaultGetDynamicColumns();

package/dist/dynamic-crud-page.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+export interface DynamicCRUDPageStrings {
+    refresh?: string;
+    export?: string;
+    import?: string;
+    /** Used as the create button label when `newLabel` is not provided.
+     *  Receives the singular form of the title. */
+    newPrefix?: string;
+}
+export interface DynamicCRUDPageClasses {
+    root?: string;
+    container?: string;
+    header?: string;
+    title?: string;
+    toolbar?: string;
+    tableWrapper?: string;
+}
+export interface DynamicCRUDPageProps {
+    /** Model key as registered on the backend (e.g. "customers"). */
+    model: string;
+    /** Override the data endpoint. Defaults to `/dynamic/<model>`. */
+    endpoint?: string;
+    /** Override the human title. Defaults to `metadata.title`. */
+    title?: string;
+    /** Override the create button label. Defaults to `${newPrefix} ${singular}`. */
+    newLabel?: string;
+    /** Strings used in default labels — pass when the host has its own i18n. */
+    i18n?: DynamicCRUDPageStrings;
+    /** Hide the create button + dialog even when metadata says CRUD is enabled. */
+    hideCreate?: boolean;
+    hideExport?: boolean;
+    hideImport?: boolean;
+    hideRefresh?: boolean;
+    /** Slot rendered above the title row (e.g. branch switcher, kpi strip). */
+    headerExtras?: React.ReactNode;
+    /** Slot rendered in the toolbar, before the create button. */
+    toolbarExtras?: React.ReactNode;
+    /** Tailwind class overrides for layout primitives. */
+    classes?: DynamicCRUDPageClasses;
+    /** Fired after a create/import/refresh successfully reloads the table. */
+    onChange?: () => void;
+}
+/**
+ * Page-level CRUD shell wired around <DynamicTable>. Hosts mount a single
+ * `<DynamicCRUDPage model="..." />` per route and the SDK takes care of
+ * metadata fetch, dialogs and toolbar.
+ */
+export declare function DynamicCRUDPage(props: DynamicCRUDPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=dynamic-crud-page.d.ts.map

package/dist/dynamic-crud-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-crud-page.d.ts","sourceRoot":"","sources":["../src/dynamic-crud-page.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAKN,MAAM,OAAO,CAAA;AAWd,MAAM,WAAW,sBAAsB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;mDAC+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AASD,MAAM,WAAW,sBAAsB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,oBAAoB;IACjC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,sDAAsD;IACtD,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAkL1D"}