@asteby/metacore-runtime-react 6.1.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.map

@@ -1 +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,CA+UnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"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

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 `link` and `ops`
+// 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.
@@ -150,14 +150,18 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                 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 (col.cellStyle === 'badge' && col.useOptions && col.searchEndpoint) {
+                    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 (col.cellStyle === 'badge' && col.options && col.options.length > 0) {
+                    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));
@@ -165,7 +169,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             return _jsx(OptionBadge, { option: option, fallback: String(value) });
                         return _jsx(Badge, { variant: "outline", children: String(value) });
                     }
-                    if (col.cellStyle === 'relation-badge-list') {
+                    if (renderAs === 'relation-badge-list') {
                         return renderRelationBadges(value, col);
                     }
                     switch (col.type) {

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"}

package/dist/dynamic-crud-page.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// DynamicCRUDPage — drop-in route component for any model that has
+// `DefineTable` metadata on the backend. Pulls the title and CRUD flag
+// from `/metadata/table/<model>`, mounts <DynamicTable>, wires
+// `<DynamicRecordDialog>` for create, and exposes `<ExportDialog>` /
+// `<ImportDialog>` from a single toolbar.
+//
+// The whole thing exists so apps stop reinventing the same ~150 LOC of
+// page chrome around DynamicTable. Override anything via props:
+//
+//   <DynamicCRUDPage
+//     model="customers"
+//     endpoint="/dynamic/customers"        // default: /dynamic/<model>
+//     title="Mis clientes"                 // default: metadata.title
+//     newLabel="Nuevo cliente"             // default: "New <singular>"
+//     hideExport hideImport hideCreate     // toolbar trimming
+//     headerExtras={<MyBranchSwitcher />}  // injected before the title row
+//     toolbarExtras={<MyExtraActions />}   // injected before "Nuevo X"
+//     i18n={{ refresh: 'Refrescar', export: 'Exportar', ... }}
+//     onChange={() => analytics.track('table.refresh')}
+//   />
+//
+// Apps that only need to swap the create endpoint or hide a button keep
+// the boilerplate to one line. Apps that need richer per-model headers
+// register a model-extension registry and feed it via `headerExtras`.
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { Plus, Download, Upload, RefreshCw } from 'lucide-react';
+import { useApi } from './api-context';
+import { useMetadataCache } from './metadata-cache';
+import { DynamicTable } from './dynamic-table';
+import { DynamicRecordDialog } from './dialogs/dynamic-record';
+import { ExportDialog } from './dialogs/export';
+import { ImportDialog } from './dialogs/import';
+import { getModelExtension } from './model-extension-registry';
+const defaultStrings = {
+    refresh: 'Refresh',
+    export: 'Export',
+    import: 'Import',
+    newPrefix: 'New',
+};
+/**
+ * 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 function DynamicCRUDPage(props) {
+    const { model, endpoint, title: titleOverride, newLabel, i18n, hideCreate, hideExport, hideImport, hideRefresh, headerExtras, toolbarExtras, classes, onChange, } = props;
+    const strings = { ...defaultStrings, ...(i18n ?? {}) };
+    const dataEndpoint = endpoint ?? `/dynamic/${model}`;
+    const ext = getModelExtension(model);
+    const api = useApi();
+    const cachedMeta = useMetadataCache((s) => s.getMetadata(model));
+    const [metadata, setMetadata] = useState(cachedMeta ?? null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const [openCreate, setOpenCreate] = useState(false);
+    const [openExport, setOpenExport] = useState(false);
+    const [openImport, setOpenImport] = useState(false);
+    useEffect(() => {
+        if (cachedMeta) {
+            setMetadata(cachedMeta);
+            return;
+        }
+        let cancelled = false;
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+            if (cancelled)
+                return;
+            const meta = (res.data?.data ?? res.data);
+            setMetadata(meta ?? null);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setMetadata(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [model, cachedMeta, api]);
+    const title = titleOverride ?? ext?.title ?? metadata?.title ?? model;
+    const resolvedNewLabel = newLabel ?? ext?.newLabel;
+    const singular = useMemo(() => {
+        const t = title.replace(/s$/i, '');
+        return t.charAt(0).toUpperCase() + t.slice(1);
+    }, [title]);
+    const enableCRUD = metadata?.enableCRUDActions ?? false;
+    const effectiveHideCreate = hideCreate || ext?.hideCreate;
+    const effectiveHideExport = hideExport || ext?.hideExport;
+    const effectiveHideImport = hideImport || ext?.hideImport;
+    const effectiveHideRefresh = hideRefresh || ext?.hideRefresh;
+    const showCreate = enableCRUD && !effectiveHideCreate;
+    const showImport = enableCRUD && !effectiveHideImport;
+    const showExport = !effectiveHideExport;
+    const showRefresh = !effectiveHideRefresh;
+    const handleRefresh = useCallback(() => {
+        setRefreshKey((k) => k + 1);
+        onChange?.();
+    }, [onChange]);
+    const rootCls = classes?.root ?? 'flex flex-col h-full overflow-hidden';
+    const containerCls = classes?.container ?? 'flex flex-col flex-1 p-6 lg:p-8 gap-4 overflow-hidden';
+    const headerCls = classes?.header ?? 'flex items-center justify-between shrink-0';
+    const titleCls = classes?.title ?? 'text-2xl font-bold tracking-tight';
+    const toolbarCls = classes?.toolbar ?? 'flex items-center gap-2';
+    const tableWrapperCls = classes?.tableWrapper ?? 'flex-1 min-h-0';
+    return (_jsxs("div", { className: rootCls, children: [_jsxs("div", { className: containerCls, children: [ext?.headerExtras && _jsx(ext.headerExtras, { model: model, onRefresh: handleRefresh }), headerExtras, _jsxs("div", { className: headerCls, children: [metadata ? (_jsx("h1", { className: titleCls, children: title })) : (_jsx("div", { className: 'h-8 w-48 bg-muted rounded animate-pulse' })), _jsxs("div", { className: toolbarCls, children: [showRefresh && (_jsx("button", { type: 'button', onClick: handleRefresh, "aria-label": strings.refresh, className: 'inline-flex items-center justify-center size-9 rounded-md border border-border bg-background hover:bg-accent text-foreground', children: _jsx(RefreshCw, { className: 'size-4' }) })), metadata && showExport && (_jsxs("button", { type: 'button', onClick: () => setOpenExport(true), className: 'inline-flex items-center gap-2 h-9 px-3 rounded-md border border-border bg-background hover:bg-accent text-sm font-medium text-foreground', children: [_jsx(Download, { className: 'size-4' }), strings.export] })), metadata && showImport && (_jsxs("button", { type: 'button', onClick: () => setOpenImport(true), className: 'inline-flex items-center gap-2 h-9 px-3 rounded-md border border-border bg-background hover:bg-accent text-sm font-medium text-foreground', children: [_jsx(Upload, { className: 'size-4' }), strings.import] })), ext?.toolbarExtras && _jsx(ext.toolbarExtras, { model: model, onRefresh: handleRefresh }), toolbarExtras, showCreate && (_jsxs("button", { type: 'button', onClick: () => setOpenCreate(true), className: 'inline-flex items-center gap-2 h-9 px-3 rounded-md bg-primary text-primary-foreground hover:opacity-90 text-sm font-medium', children: [_jsx(Plus, { className: 'size-4' }), resolvedNewLabel ?? `${strings.newPrefix} ${singular}`] }))] })] }), _jsx("div", { className: tableWrapperCls, children: _jsx(DynamicTable, { model: model, endpoint: dataEndpoint, refreshTrigger: refreshKey }, model) })] }), showCreate && (_jsx(DynamicRecordDialog, { open: openCreate, onOpenChange: setOpenCreate, mode: 'create', model: model, endpoint: dataEndpoint, onSaved: handleRefresh })), metadata && showExport && (_jsx(ExportDialog, { open: openExport, onOpenChange: setOpenExport, model: model, metadata: metadata })), metadata && showImport && (_jsx(ImportDialog, { open: openImport, onOpenChange: setOpenImport, model: model, metadata: metadata, onImported: handleRefresh }))] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAQnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CA+oBnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AASnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CA4qBnB"}

package/dist/dynamic-table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // DynamicTable — metadata-driven CRUD table used by every metacore host.
-// Ported from the ops starter but with the host-specific aliases swapped
-// for metacore packages + context-injected peer deps:
+// Originally extracted from a host app and generalized so the host-specific
+// aliases are swapped for metacore packages + context-injected peer deps:
 //   * `@/lib/api` → <ApiProvider> (see api-context.tsx)
 //   * `@/stores/branch-store` → <BranchProvider> (optional)
 //   * `@/stores/metadata-cache` → internal ./metadata-cache zustand store
@@ -24,6 +24,7 @@ import { toast } from 'sonner';
 import { Progress } from './dialogs/_primitives';
 import { useMetadataCache } from './metadata-cache';
 import { useApi, useCurrentBranch } from './api-context';
+import { defaultGetDynamicColumns } from './dynamic-columns';
 import { OptionsContext } from './options-context';
 import { ActionModalDispatcher } from './action-modal-dispatcher';
 import { DynamicRecordDialog } from './dialogs/dynamic-record';
@@ -436,9 +437,13 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     }, []);
     const columnFilterConfigs = useMemo(() => {
         const map = new Map();
-        if (!metadata?.filters)
+        if (!metadata)
             return map;
-        for (const f of metadata.filters) {
+        // Explicit `metadata.filters` wins. When the backend does not emit
+        // them, derive a filter chip from every column flagged
+        // `filterable: true` — keeps the kernel API minimal (one flag on the
+        // column) while still rendering the FilterableColumnHeader.
+        for (const f of metadata.filters ?? []) {
             const fType = f.type;
             let options = [];
             if (f.options && f.options.length > 0) {
@@ -459,6 +464,33 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 searchEndpoint: f.searchEndpoint,
             });
         }
+        for (const c of metadata.columns ?? []) {
+            if (!c.filterable || map.has(c.key))
+                continue;
+            const hasStaticOptions = (c.options?.length ?? 0) > 0;
+            const hasEndpoint = !!c.searchEndpoint;
+            if (!hasStaticOptions && !hasEndpoint && c.type !== 'boolean')
+                continue;
+            const options = hasStaticOptions
+                ? c.options.map(o => ({
+                    label: o.label,
+                    value: String(o.value),
+                    icon: o.icon,
+                    color: o.color,
+                }))
+                : hasEndpoint && filterOptionsMap.has(c.searchEndpoint)
+                    ? filterOptionsMap.get(c.searchEndpoint) || []
+                    : [];
+            map.set(c.key, {
+                filterType: 'select',
+                filterKey: c.key,
+                options,
+                selectedValues: dynamicFilters[c.key] || [],
+                onFilterChange: handleDynamicFilterChange,
+                loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint),
+                searchEndpoint: c.searchEndpoint,
+            });
+        }
         return map;
     }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange]);
     const columns = useMemo(() => {
@@ -508,9 +540,3 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                                             return (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: cn('py-2', isActionsColumn && 'sticky right-0 bg-card shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]'), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                                         }) }, row.id)))) : (_jsx(TableRow, { className: 'border-b-0 hover:bg-transparent', children: _jsx(TableCell, { colSpan: columns.length, className: 'h-full p-0', children: _jsxs("div", { className: "flex h-full py-12 flex-col items-center justify-center gap-2 text-muted-foreground", children: [_jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-muted/50", children: _jsx(Inbox, { className: "h-10 w-10" }) }), _jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("h3", { className: "text-lg font-semibold text-foreground", children: "No se encontraron resultados" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "No hay datos para mostrar en este momento." })] })] }) }) })) })] }) }), _jsx("div", { className: 'shrink-0 pt-4', children: _jsx(DataTablePagination, { table: table, pageSizeOptions: metadata.perPageOptions }) })] }), _jsx(AlertDialog, { open: !!rowToDelete, onOpenChange: (open) => !open && setRowToDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "\u00BFEst\u00E1 absolutamente seguro?" }), _jsx(AlertDialogDescription, { children: "Esta acci\u00F3n no se puede deshacer. Esto eliminar\u00E1 permanentemente el registro seleccionado de nuestros servidores." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: isDeleting, children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmDelete(); }, className: "bg-red-600 hover:bg-red-700", disabled: isDeleting, children: isDeleting ? 'Eliminando...' : 'Eliminar' })] })] }) }), _jsx(AlertDialog, { open: showBulkDeleteConfirm, onOpenChange: (open) => !open && !isBulkDeleting && setShowBulkDeleteConfirm(false), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: isBulkDeleting ? 'Eliminando registros...' : '¿Eliminar múltiples registros?' }), _jsx(AlertDialogDescription, { children: isBulkDeleting ? (_jsxs("div", { className: "space-y-4 mt-4", children: [_jsx(Progress, { value: (bulkDeleteProgress / bulkDeleteTotal) * 100 }), _jsxs("p", { className: "text-center text-sm", children: ["Procesando ", bulkDeleteProgress, " de ", bulkDeleteTotal, " registros..."] })] })) : (_jsxs(_Fragment, { children: ["Esta acci\u00F3n no se puede deshacer. Se eliminar\u00E1n permanentemente ", _jsx("strong", { children: Object.keys(rowSelection).length }), " registro(s) de nuestros servidores."] })) })] }), !isBulkDeleting && (_jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: t('common.cancel') }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); confirmBulkDelete(); }, className: "bg-red-600 hover:bg-red-700", children: "Eliminar todos" })] }))] }) }), _jsx(DynamicRecordDialog, { open: recordDialog.open, onOpenChange: (open) => setRecordDialog((prev) => ({ ...prev, open })), mode: recordDialog.mode, model: model, recordId: recordDialog.recordId, endpoint: endpoint, onSaved: handleRefresh }), metadata.canExport && (_jsx(ExportDialog, { open: exportOpen, onOpenChange: setExportOpen, model: model, metadata: metadata, currentFilters: buildFilterParams(), hasActiveFilters: hasActiveFilters })), metadata.canImport && (_jsx(ImportDialog, { open: importOpen, onOpenChange: setImportOpen, model: model, metadata: metadata, onImported: handleRefresh })), actionModal.action && (_jsx(ActionModalDispatcher, { open: actionModal.open, onOpenChange: (open) => setActionModal((prev) => ({ ...prev, open })), action: actionModal.action, model: model, record: actionModal.record, endpoint: endpoint, onSuccess: handleRefresh })), _jsx(DataTableBulkActions, { table: table, entityName: "registro", children: _jsxs(Button, { variant: "destructive", size: "sm", className: "h-8", onClick: () => setShowBulkDeleteConfirm(true), children: [_jsx(Trash2, { className: "h-4 w-4 mr-1.5" }), " Eliminar"] }) })] }));
 }
-/** Sensible default when hosts don't provide their own getDynamicColumns. */
-const defaultGetDynamicColumns = (metadata, _handleAction, _t, _lang, _filters) => (metadata.columns ?? []).map((col) => ({
-    accessorKey: col.name,
-    header: col.label ?? col.name,
-    enableSorting: col.sortable ?? false,
-}));

package/dist/index.d.ts

@@ -16,4 +16,6 @@ export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, type DynamicCol
 export { DynamicRecordDialog } from './dialogs/dynamic-record';
 export { ExportDialog } from './dialogs/export';
 export { ImportDialog } from './dialogs/import';
+export { DynamicCRUDPage, type DynamicCRUDPageProps, type DynamicCRUDPageStrings, type DynamicCRUDPageClasses, } from './dynamic-crud-page';
+export { registerModelExtension, getModelExtension, clearModelExtensions, type ModelExtension, type ModelExtensionProps, } from './model-extension-registry';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,YAAY,EACR,kBAAkB,EAClB,YAAY,IAAI,yBAAyB,EACzC,iBAAiB,EACjB,oBAAoB,GACvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACH,wBAAwB,EACxB,4BAA4B,EAC5B,KAAK,qBAAqB,GAC7B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACH,qBAAqB,EACrB,KAAK,gBAAgB,GACxB,MAAM,2BAA2B,CAAA;AAClC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,mBAAmB,CAAA;AACjC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,YAAY,EACR,kBAAkB,EAClB,YAAY,IAAI,yBAAyB,EACzC,iBAAiB,EACjB,oBAAoB,GACvB,MAAM,wBAAwB,CAAA;AAC/B,OAAO,EACH,wBAAwB,EACxB,4BAA4B,EAC5B,KAAK,qBAAqB,GAC7B,MAAM,mBAAmB,CAAA;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EACH,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACH,sBAAsB,EACtB,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,cAAc,EACnB,KAAK,mBAAmB,GAC3B,MAAM,4BAA4B,CAAA"}

package/dist/index.js

@@ -20,3 +20,5 @@ export { defaultGetDynamicColumns, makeDefaultGetDynamicColumns, } from './dynam
 export { DynamicRecordDialog } from './dialogs/dynamic-record';
 export { ExportDialog } from './dialogs/export';
 export { ImportDialog } from './dialogs/import';
+export { DynamicCRUDPage, } from './dynamic-crud-page';
+export { registerModelExtension, getModelExtension, clearModelExtensions, } from './model-extension-registry';

package/dist/metadata-cache.js

@@ -1,7 +1,7 @@
 // Metadata cache — a zustand store that memoizes table/modal metadata
-// responses across dynamic-table mounts. Ported from the ops starter's
-// `@/stores/metadata-cache` so the runtime-react package no longer depends
-// on a host-specific alias.
+// responses across dynamic-table mounts. Generalized from a host-app
+// metadata-cache store so the runtime-react package no longer depends on
+// a host-specific alias.
 //
 // The prefetchAll() method needs an `api` client (axios-like); we keep that
 // as an injectable parameter so the store stays host-agnostic. If a caller

package/dist/model-extension-registry.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface ModelExtensionProps {
+    model: string;
+    onRefresh: () => void;
+}
+export interface ModelExtension {
+    headerExtras?: React.ComponentType<ModelExtensionProps>;
+    toolbarExtras?: React.ComponentType<ModelExtensionProps>;
+    hideCreate?: boolean;
+    hideExport?: boolean;
+    hideImport?: boolean;
+    hideRefresh?: boolean;
+    title?: string;
+    newLabel?: string;
+}
+export declare function registerModelExtension(model: string, ext: ModelExtension): void;
+export declare function getModelExtension(model: string): ModelExtension | undefined;
+export declare function clearModelExtensions(): void;
+//# sourceMappingURL=model-extension-registry.d.ts.map

package/dist/model-extension-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-extension-registry.d.ts","sourceRoot":"","sources":["../src/model-extension-registry.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,cAAc;IAC3B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;IACxD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAID,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,cAAc,GAAG,IAAI,CAE/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAE3E;AAED,wBAAgB,oBAAoB,IAAI,IAAI,CAE3C"}

package/dist/model-extension-registry.js

@@ -0,0 +1,10 @@
+const registry = new Map();
+export function registerModelExtension(model, ext) {
+    registry.set(model, ext);
+}
+export function getModelExtension(model) {
+    return registry.get(model);
+}
+export function clearModelExtensions() {
+    registry.clear();
+}

package/dist/types.d.ts.map

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

package/package.json

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

package/src/dialogs/export.tsx

@@ -1,6 +1,6 @@
 // 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,

package/src/dialogs/import.tsx

@@ -1,6 +1,5 @@
 // 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,

package/src/dynamic-columns.tsx

@@ -3,7 +3,7 @@
 // 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 `link` and `ops`
+// 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.
@@ -255,22 +255,26 @@ export function makeDefaultGetDynamicColumns(
                     ),
                 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 (col.cellStyle === 'badge' && col.useOptions && col.searchEndpoint) {
+                    if (renderAs === 'badge' && col.useOptions && col.searchEndpoint) {
                         if (!value) return <span className="text-muted-foreground">-</span>
                         return <BadgeWithEndpointOptions endpoint={col.searchEndpoint} value={value} />
                     }
 
                     // Static badge options — map value → label/icon/color
-                    if (col.cellStyle === 'badge' && col.options && col.options.length > 0) {
+                    if (renderAs === 'badge' && col.options && col.options.length > 0) {
                         if (!value && value !== 0) return <span className="text-muted-foreground">-</span>
                         const option = col.options.find((o) => o.value === String(value))
                         if (option) return <OptionBadge option={option} fallback={String(value)} />
                         return <Badge variant="outline">{String(value)}</Badge>
                     }
 
-                    if (col.cellStyle === 'relation-badge-list') {
+                    if (renderAs === 'relation-badge-list') {
                         return renderRelationBadges(value, col)
                     }
 

package/src/dynamic-crud-page.tsx

@@ -0,0 +1,275 @@
+// DynamicCRUDPage — drop-in route component for any model that has
+// `DefineTable` metadata on the backend. Pulls the title and CRUD flag
+// from `/metadata/table/<model>`, mounts <DynamicTable>, wires
+// `<DynamicRecordDialog>` for create, and exposes `<ExportDialog>` /
+// `<ImportDialog>` from a single toolbar.
+//
+// The whole thing exists so apps stop reinventing the same ~150 LOC of
+// page chrome around DynamicTable. Override anything via props:
+//
+//   <DynamicCRUDPage
+//     model="customers"
+//     endpoint="/dynamic/customers"        // default: /dynamic/<model>
+//     title="Mis clientes"                 // default: metadata.title
+//     newLabel="Nuevo cliente"             // default: "New <singular>"
+//     hideExport hideImport hideCreate     // toolbar trimming
+//     headerExtras={<MyBranchSwitcher />}  // injected before the title row
+//     toolbarExtras={<MyExtraActions />}   // injected before "Nuevo X"
+//     i18n={{ refresh: 'Refrescar', export: 'Exportar', ... }}
+//     onChange={() => analytics.track('table.refresh')}
+//   />
+//
+// Apps that only need to swap the create endpoint or hide a button keep
+// the boilerplate to one line. Apps that need richer per-model headers
+// register a model-extension registry and feed it via `headerExtras`.
+import React, {
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react'
+import { Plus, Download, Upload, RefreshCw } from 'lucide-react'
+import { useApi } from './api-context'
+import { useMetadataCache } from './metadata-cache'
+import { DynamicTable } from './dynamic-table'
+import { DynamicRecordDialog } from './dialogs/dynamic-record'
+import { ExportDialog } from './dialogs/export'
+import { ImportDialog } from './dialogs/import'
+import { getModelExtension } from './model-extension-registry'
+import type { TableMetadata } from './types'
+
+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
+}
+
+const defaultStrings: Required<DynamicCRUDPageStrings> = {
+    refresh: 'Refresh',
+    export: 'Export',
+    import: 'Import',
+    newPrefix: 'New',
+}
+
+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 function DynamicCRUDPage(props: DynamicCRUDPageProps) {
+    const {
+        model,
+        endpoint,
+        title: titleOverride,
+        newLabel,
+        i18n,
+        hideCreate,
+        hideExport,
+        hideImport,
+        hideRefresh,
+        headerExtras,
+        toolbarExtras,
+        classes,
+        onChange,
+    } = props
+
+    const strings = { ...defaultStrings, ...(i18n ?? {}) }
+    const dataEndpoint = endpoint ?? `/dynamic/${model}`
+    const ext = getModelExtension(model)
+
+    const api = useApi()
+    const cachedMeta = useMetadataCache((s) => s.getMetadata(model))
+
+    const [metadata, setMetadata] = useState<TableMetadata | null>(cachedMeta ?? null)
+    const [refreshKey, setRefreshKey] = useState(0)
+    const [openCreate, setOpenCreate] = useState(false)
+    const [openExport, setOpenExport] = useState(false)
+    const [openImport, setOpenImport] = useState(false)
+
+    useEffect(() => {
+        if (cachedMeta) {
+            setMetadata(cachedMeta)
+            return
+        }
+        let cancelled = false
+        api
+            .get(`/metadata/table/${model}`)
+            .then((res) => {
+                if (cancelled) return
+                const meta = (res.data?.data ?? res.data) as TableMetadata
+                setMetadata(meta ?? null)
+            })
+            .catch(() => {
+                if (!cancelled) setMetadata(null)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [model, cachedMeta, api])
+
+    const title = titleOverride ?? ext?.title ?? metadata?.title ?? model
+    const resolvedNewLabel = newLabel ?? ext?.newLabel
+    const singular = useMemo(() => {
+        const t = title.replace(/s$/i, '')
+        return t.charAt(0).toUpperCase() + t.slice(1)
+    }, [title])
+
+    const enableCRUD = metadata?.enableCRUDActions ?? false
+    const effectiveHideCreate = hideCreate || ext?.hideCreate
+    const effectiveHideExport = hideExport || ext?.hideExport
+    const effectiveHideImport = hideImport || ext?.hideImport
+    const effectiveHideRefresh = hideRefresh || ext?.hideRefresh
+    const showCreate = enableCRUD && !effectiveHideCreate
+    const showImport = enableCRUD && !effectiveHideImport
+    const showExport = !effectiveHideExport
+    const showRefresh = !effectiveHideRefresh
+
+    const handleRefresh = useCallback(() => {
+        setRefreshKey((k) => k + 1)
+        onChange?.()
+    }, [onChange])
+
+    const rootCls = classes?.root ?? 'flex flex-col h-full overflow-hidden'
+    const containerCls = classes?.container ?? 'flex flex-col flex-1 p-6 lg:p-8 gap-4 overflow-hidden'
+    const headerCls = classes?.header ?? 'flex items-center justify-between shrink-0'
+    const titleCls = classes?.title ?? 'text-2xl font-bold tracking-tight'
+    const toolbarCls = classes?.toolbar ?? 'flex items-center gap-2'
+    const tableWrapperCls = classes?.tableWrapper ?? 'flex-1 min-h-0'
+
+    return (
+        <div className={rootCls}>
+            <div className={containerCls}>
+                {ext?.headerExtras && <ext.headerExtras model={model} onRefresh={handleRefresh} />}
+                {headerExtras}
+                <div className={headerCls}>
+                    {metadata ? (
+                        <h1 className={titleCls}>{title}</h1>
+                    ) : (
+                        <div className='h-8 w-48 bg-muted rounded animate-pulse' />
+                    )}
+                    <div className={toolbarCls}>
+                        {showRefresh && (
+                            <button
+                                type='button'
+                                onClick={handleRefresh}
+                                aria-label={strings.refresh}
+                                className='inline-flex items-center justify-center size-9 rounded-md border border-border bg-background hover:bg-accent text-foreground'
+                            >
+                                <RefreshCw className='size-4' />
+                            </button>
+                        )}
+                        {metadata && showExport && (
+                            <button
+                                type='button'
+                                onClick={() => setOpenExport(true)}
+                                className='inline-flex items-center gap-2 h-9 px-3 rounded-md border border-border bg-background hover:bg-accent text-sm font-medium text-foreground'
+                            >
+                                <Download className='size-4' />
+                                {strings.export}
+                            </button>
+                        )}
+                        {metadata && showImport && (
+                            <button
+                                type='button'
+                                onClick={() => setOpenImport(true)}
+                                className='inline-flex items-center gap-2 h-9 px-3 rounded-md border border-border bg-background hover:bg-accent text-sm font-medium text-foreground'
+                            >
+                                <Upload className='size-4' />
+                                {strings.import}
+                            </button>
+                        )}
+                        {ext?.toolbarExtras && <ext.toolbarExtras model={model} onRefresh={handleRefresh} />}
+                        {toolbarExtras}
+                        {showCreate && (
+                            <button
+                                type='button'
+                                onClick={() => setOpenCreate(true)}
+                                className='inline-flex items-center gap-2 h-9 px-3 rounded-md bg-primary text-primary-foreground hover:opacity-90 text-sm font-medium'
+                            >
+                                <Plus className='size-4' />
+                                {resolvedNewLabel ?? `${strings.newPrefix} ${singular}`}
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                <div className={tableWrapperCls}>
+                    <DynamicTable
+                        key={model}
+                        model={model}
+                        endpoint={dataEndpoint}
+                        refreshTrigger={refreshKey}
+                    />
+                </div>
+            </div>
+
+            {showCreate && (
+                <DynamicRecordDialog
+                    open={openCreate}
+                    onOpenChange={setOpenCreate}
+                    mode='create'
+                    model={model}
+                    endpoint={dataEndpoint}
+                    onSaved={handleRefresh}
+                />
+            )}
+
+            {metadata && showExport && (
+                <ExportDialog
+                    open={openExport}
+                    onOpenChange={setOpenExport}
+                    model={model}
+                    metadata={metadata}
+                />
+            )}
+
+            {metadata && showImport && (
+                <ImportDialog
+                    open={openImport}
+                    onOpenChange={setOpenImport}
+                    model={model}
+                    metadata={metadata}
+                    onImported={handleRefresh}
+                />
+            )}
+        </div>
+    )
+}

package/src/dynamic-table.tsx

@@ -1,6 +1,6 @@
 // DynamicTable — metadata-driven CRUD table used by every metacore host.
-// Ported from the ops starter but with the host-specific aliases swapped
-// for metacore packages + context-injected peer deps:
+// Originally extracted from a host app and generalized so the host-specific
+// aliases are swapped for metacore packages + context-injected peer deps:
 //   * `@/lib/api` → <ApiProvider> (see api-context.tsx)
 //   * `@/stores/branch-store` → <BranchProvider> (optional)
 //   * `@/stores/metadata-cache` → internal ./metadata-cache zustand store
@@ -65,6 +65,7 @@ import { Progress } from './dialogs/_primitives'
 import { useMetadataCache } from './metadata-cache'
 import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
+import { defaultGetDynamicColumns } from './dynamic-columns'
 import { OptionsContext } from './options-context'
 import { ActionModalDispatcher } from './action-modal-dispatcher'
 import type { TableMetadata, ApiResponse, ActionMetadata } from './types'
@@ -477,8 +478,12 @@ export function DynamicTable({
 
     const columnFilterConfigs = useMemo(() => {
         const map = new Map<string, ColumnFilterConfig>()
-        if (!metadata?.filters) return map
-        for (const f of metadata.filters) {
+        if (!metadata) return map
+        // Explicit `metadata.filters` wins. When the backend does not emit
+        // them, derive a filter chip from every column flagged
+        // `filterable: true` — keeps the kernel API minimal (one flag on the
+        // column) while still rendering the FilterableColumnHeader.
+        for (const f of metadata.filters ?? []) {
             const fType = f.type as ColumnFilterConfig['filterType']
             let options: { label: string; value: string; icon?: string; color?: string }[] = []
             if (f.options && f.options.length > 0) {
@@ -498,6 +503,31 @@ export function DynamicTable({
                 searchEndpoint: f.searchEndpoint,
             })
         }
+        for (const c of metadata.columns ?? []) {
+            if (!c.filterable || map.has(c.key)) continue
+            const hasStaticOptions = (c.options?.length ?? 0) > 0
+            const hasEndpoint = !!c.searchEndpoint
+            if (!hasStaticOptions && !hasEndpoint && c.type !== 'boolean') continue
+            const options = hasStaticOptions
+                ? c.options!.map(o => ({
+                      label: o.label,
+                      value: String(o.value),
+                      icon: o.icon,
+                      color: o.color,
+                  }))
+                : hasEndpoint && filterOptionsMap.has(c.searchEndpoint!)
+                  ? filterOptionsMap.get(c.searchEndpoint!) || []
+                  : []
+            map.set(c.key, {
+                filterType: 'select',
+                filterKey: c.key,
+                options,
+                selectedValues: dynamicFilters[c.key] || [],
+                onFilterChange: handleDynamicFilterChange,
+                loading: hasEndpoint && !filterOptionsMap.has(c.searchEndpoint!),
+                searchEndpoint: c.searchEndpoint,
+            })
+        }
         return map
     }, [metadata, filterOptionsMap, dynamicFilters, handleDynamicFilterChange])
 
@@ -757,10 +787,3 @@ export function DynamicTable({
     )
 }
 
-/** Sensible default when hosts don't provide their own getDynamicColumns. */
-const defaultGetDynamicColumns: GetDynamicColumns = (metadata, _handleAction, _t, _lang, _filters) =>
-    (metadata.columns ?? []).map((col: any) => ({
-        accessorKey: col.name,
-        header: col.label ?? col.name,
-        enableSorting: col.sortable ?? false,
-    }))

package/src/index.ts

@@ -33,3 +33,16 @@ export {
 export { DynamicRecordDialog } from './dialogs/dynamic-record'
 export { ExportDialog } from './dialogs/export'
 export { ImportDialog } from './dialogs/import'
+export {
+    DynamicCRUDPage,
+    type DynamicCRUDPageProps,
+    type DynamicCRUDPageStrings,
+    type DynamicCRUDPageClasses,
+} from './dynamic-crud-page'
+export {
+    registerModelExtension,
+    getModelExtension,
+    clearModelExtensions,
+    type ModelExtension,
+    type ModelExtensionProps,
+} from './model-extension-registry'

package/src/metadata-cache.ts

@@ -1,7 +1,7 @@
 // Metadata cache — a zustand store that memoizes table/modal metadata
-// responses across dynamic-table mounts. Ported from the ops starter's
-// `@/stores/metadata-cache` so the runtime-react package no longer depends
-// on a host-specific alias.
+// responses across dynamic-table mounts. Generalized from a host-app
+// metadata-cache store so the runtime-react package no longer depends on
+// a host-specific alias.
 //
 // The prefetchAll() method needs an `api` client (axios-like); we keep that
 // as an injectable parameter so the store stays host-agnostic. If a caller

package/src/model-extension-registry.tsx

@@ -0,0 +1,46 @@
+// Per-model UI extension registry. Apps register once at boot and
+// `<DynamicCRUDPage>` composes the registered extension automatically — no
+// per-route forking, no copy-paste of the page shell.
+//
+//   import { registerModelExtension } from '@asteby/metacore-runtime-react'
+//
+//   registerModelExtension('customers', {
+//       headerExtras: CustomersKpiStrip,
+//       toolbarExtras: BulkAssignButton,
+//       hideImport: true,
+//   })
+//
+// The registry is a module-level singleton — intentional. A React context
+// would force every consumer to wrap a provider just to read a static
+// configuration that is set once at app boot.
+import * as React from 'react'
+
+export interface ModelExtensionProps {
+    model: string
+    onRefresh: () => void
+}
+
+export interface ModelExtension {
+    headerExtras?: React.ComponentType<ModelExtensionProps>
+    toolbarExtras?: React.ComponentType<ModelExtensionProps>
+    hideCreate?: boolean
+    hideExport?: boolean
+    hideImport?: boolean
+    hideRefresh?: boolean
+    title?: string
+    newLabel?: string
+}
+
+const registry = new Map<string, ModelExtension>()
+
+export function registerModelExtension(model: string, ext: ModelExtension): void {
+    registry.set(model, ext)
+}
+
+export function getModelExtension(model: string): ModelExtension | undefined {
+    return registry.get(model)
+}
+
+export function clearModelExtensions(): void {
+    registry.clear()
+}

package/src/types.ts

@@ -1,4 +1,6 @@
-// Union of the two host copies (link + ops). Ops adds the `link` action type + `linkUrl`.
+// Shared metadata shape consumed by every host. Some hosts add a `link`
+// action type with a `linkUrl` template — represented here as part of the
+// `type` union so the SDK can render it uniformly.
 export interface TableMetadata {
     title: string
     endpoint: string