npm - @asteby/metacore-runtime-react - Versions diffs - 6.1.0 → 7.0.0 - Mend

@asteby/metacore-runtime-react 6.1.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (30) hide show

package/CHANGELOG.md +25 -2
package/README.md +67 -44
package/dist/dialogs/export.js +1 -1
package/dist/dialogs/import.d.ts.map +1 -1
package/dist/dialogs/import.js +1 -2
package/dist/dynamic-columns.d.ts.map +1 -1
package/dist/dynamic-columns.js +10 -11
package/dist/dynamic-crud-page.d.ts +49 -0
package/dist/dynamic-crud-page.d.ts.map +1 -0
package/dist/dynamic-crud-page.js +106 -0
package/dist/dynamic-table.d.ts.map +1 -1
package/dist/dynamic-table.js +36 -10
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +2 -0
package/dist/metadata-cache.js +3 -3
package/dist/model-extension-registry.d.ts +19 -0
package/dist/model-extension-registry.d.ts.map +1 -0
package/dist/model-extension-registry.js +10 -0
package/dist/types.d.ts.map +1 -1
package/package.json +3 -3
package/src/dialogs/export.tsx +1 -1
package/src/dialogs/import.tsx +1 -2
package/src/dynamic-columns.tsx +10 -11
package/src/dynamic-crud-page.tsx +275 -0
package/src/dynamic-table.tsx +34 -11
package/src/index.ts +13 -0
package/src/metadata-cache.ts +3 -3
package/src/model-extension-registry.tsx +46 -0
package/src/types.ts +3 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,28 @@
 # @asteby/metacore-runtime-react
+## 7.0.0
+### Patch Changes
+- 3450876: Add `getInitials(name)` helper to `@asteby/metacore-ui/lib`.
+  Pulls a duplicated 6-line snippet (`name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()`) out of every avatar across the platform — chat headers, profile dropdowns, dynamic-table avatar cells, sidebar nav. Trims whitespace, caps token count, and falls back to a single character when the input is empty.
+  `runtime-react`'s avatar cell renderer now uses it; visually identical, one less inline lambda.
+- Updated dependencies [3450876]
+  - @asteby/metacore-ui@0.7.0
+## 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 +43,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 +57,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/dist/dynamic-columns.js CHANGED Viewed

@@ -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.
@@ -15,7 +15,7 @@ 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 { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib';
 import { OptionsContext } from './options-context';
 import { DynamicIcon } from './dynamic-icon';
 const defaultGetImageUrl = (path) => path;
@@ -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) {
@@ -203,12 +207,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             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) }))] })] }));
+                            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: getInitials(String(name)) })] }), _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);

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "6.1.0",
+  "version": "7.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "date-fns": ">=3",
     "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^2.2.0",
-    "@asteby/metacore-ui": "^0.6.0"
+    "@asteby/metacore-ui": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -56,7 +56,7 @@
     "typescript": "^5.6.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "2.2.0",
-    "@asteby/metacore-ui": "0.6.0"
+    "@asteby/metacore-ui": "0.7.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dialogs/export.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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.
@@ -31,7 +31,7 @@ import {
     FilterableColumnHeader,
     type ColumnFilterMeta,
 } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles } from '@asteby/metacore-ui/lib'
+import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib'
 import { OptionsContext } from './options-context'
 import { DynamicIcon } from './dynamic-icon'
 import type { TableMetadata, ColumnDefinition } from './types'
@@ -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)
                     }
@@ -325,12 +329,7 @@ export function makeDefaultGetDynamicColumns(
                                             className="object-cover"
                                         />
                                         <AvatarFallback className="text-[10px] font-bold bg-primary/5 text-primary rounded-lg">
-                                            {String(name)
-                                                .split(' ')
-                                                .map((n: string) => n[0])
-                                                .slice(0, 2)
-                                                .join('')
-                                                .toUpperCase()}
+                                            {getInitials(String(name))}
                                         </AvatarFallback>
                                     </Avatar>
                                     <div className="flex flex-col min-w-0 overflow-hidden">

package/src/dynamic-crud-page.tsx ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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