@ai-matrx/records-ui 0.84.7 → 0.84.8

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog — @ai-matrx/records-ui
 
+## 0.84.8
+
+**A host's own layout sits beside Grid, Kanban, Calendar and Gallery on the one table page.**
+(lane GRID-PORT `5cb9bcbd99`, published by PUBLISH-SWEEP-4.) `RecordsUiHost.layouts?: HostLayout[]`
+(`{ id, label, render({ tableId, filter }) }`) draws as a button in `ViewSwitcher`'s layout row;
+`?view=<id>` opens it (`openingHostLayout`), and `onViewChanged` gets the id. It is page-level and is
+never written onto the view record. A host id that is one of `PAGE_VIEWS`, or a spelling of one, is
+ignored. **Consumer action:** matrx-frontend passes its ported /data grid as the Sheet layout.
+
+## Unreleased (source only — lane GRID-PORT; the chair's publisher owns the slot)
+
+**A host can draw a layout beside the package's own four, on the one table page.**
+`RecordsUiHost.layouts?: HostLayout[]` — `{ id, label, render({ tableId, filter }) }`. Each
+appears as a button in `ViewSwitcher`'s layout row after Grid / Kanban / Calendar / Gallery, and
+`?view=<id>` opens it (`openingHostLayout`); `TablePage.onViewChanged` is called with the id.
+Page-level, never written onto the view record (the store's layout words stay the four). A host
+id equal to one of `PAGE_VIEWS` (or a spelling of one) is ignored, so `?view=grid` is always the
+package's Grid. Why: the owner's ruling (2026-09-23) — AI Matrx's ported /data grid is the
+"Sheet" layout of `/data-v2/<table>`, not a second page for the same table.
+
+Consumer action: `onViewChanged` now receives `PageView | string`; widen a handler typed
+`(view: PageView) => void`.
+
 ## 0.84.7 (unpublished — needs @ai-matrx/records 0.57.3)
 
 * **The suite is green again (386/386), and the class is gone rather than patched.** 0.84.5's

package/dist/index.cjs

@@ -8653,15 +8653,20 @@ function ViewSwitcher({
   onAskWhoChanged,
   pageSize = 200,
   filter,
+  hostLayout,
+  onHostLayoutChange,
   className
 }) {
   const [layout, setLayout] = (0, import_react49.useState)(view.layout);
+  const hostLayouts = useRecordsUi().layouts ?? [];
+  const drawnByHost = hostLayout ? hostLayouts.find((h) => h.id === hostLayout) ?? null : null;
   const [local, setLocal] = (0, import_react49.useState)({});
   (0, import_react49.useEffect)(() => {
     setLayout(view.layout);
     setLocal({});
   }, [view.layout, view.name, view.subject]);
   const pick = (next) => {
+    onHostLayoutChange?.(null);
     setLayout(next);
     onLayoutChange?.(next);
     onViewChange?.({ layout: next });
@@ -8673,19 +8678,32 @@ function ViewSwitcher({
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: (0, import_design_system25.cn)("flex min-h-0 flex-col gap-2", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate text-sm font-medium", children: view.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "ml-auto flex items-center gap-0.5", role: "group", "aria-label": "Layout", children: VIEW_LAYOUTS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-        import_design_system25.Button,
-        {
-          size: "sm",
-          variant: option === layout ? "secondary" : "ghost",
-          "aria-pressed": option === layout,
-          onClick: () => pick(option),
-          children: LAYOUT_LABEL[option]
-        },
-        option
-      )) })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "ml-auto flex items-center gap-0.5", role: "group", "aria-label": "Layout", children: [
+        VIEW_LAYOUTS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_design_system25.Button,
+          {
+            size: "sm",
+            variant: !drawnByHost && option === layout ? "secondary" : "ghost",
+            "aria-pressed": !drawnByHost && option === layout,
+            onClick: () => pick(option),
+            children: LAYOUT_LABEL[option]
+          },
+          option
+        )),
+        hostLayouts.map((option) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          import_design_system25.Button,
+          {
+            size: "sm",
+            variant: drawnByHost?.id === option.id ? "secondary" : "ghost",
+            "aria-pressed": drawnByHost?.id === option.id,
+            onClick: () => onHostLayoutChange?.(option.id),
+            children: option.label
+          },
+          `host:${option.id}`
+        ))
+      ] })
     ] }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    drawnByHost ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex min-h-0 flex-1 flex-col", "data-host-layout": drawnByHost.id, children: drawnByHost.render({ tableId: view.subject, ...filter ? { filter } : {} }) }) : layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       Grid,
       {
         tableId: view.subject,
@@ -17225,6 +17243,11 @@ function openingView(activeView, activeDashboardId) {
   if (named === "archived") return { main: "archived", layout: null, unknown: null };
   return { main: "records", layout: named, unknown: null };
 }
+function openingHostLayout(activeView, hostLayouts) {
+  const word = typeof activeView === "string" ? activeView.trim().toLowerCase() : "";
+  if (word === "" || pageViewFromParam(word) !== null) return null;
+  return hostLayouts.some((h) => h.id === word) ? word : null;
+}
 function TablePage({
   tableId,
   pageSize = 100,
@@ -17250,7 +17273,12 @@ function TablePage({
   const organizationId = (0, import_react119.useRecordsClient)().config.organizationId;
   const [view, setView] = (0, import_react118.useState)(null);
   const opening = openingRail(activeRecordId, activeRail);
-  const opened = openingView(activeView, activeDashboardId);
+  const hostLayouts = useRecordsUi().layouts ?? [];
+  const hostLayoutFor = (asked) => openingHostLayout(asked, hostLayouts);
+  const hostFromLink = hostLayoutFor(activeView);
+  const openedByPackage = openingView(hostFromLink ? null : activeView, activeDashboardId);
+  const opened = hostFromLink ? { ...openedByPackage, main: "records" } : openedByPackage;
+  const [hostLayout, setHostLayout] = (0, import_react118.useState)(hostFromLink);
   const railAsked = typeof activeRail === "string" ? activeRail.trim() : "";
   const railUnknown = railAsked !== "" && railFromParam(railAsked) === null ? railAsked : null;
   const shareFromLink = railFromParam(activeRail) === "share";
@@ -17288,8 +17316,15 @@ function TablePage({
     setSurface((now) => ({ ...now, rail: named }));
   }, [activeRail, activeRecordId]);
   (0, import_react118.useEffect)(() => {
+    const host = hostLayoutFor(activeView);
+    if (host) {
+      setHostLayout(host);
+      setSurface((now) => ({ ...now, main: "records" }));
+      return;
+    }
     const named = pageViewFromParam(activeView);
     if (named === null) return;
+    setHostLayout(null);
     const isLayout = named !== "dashboards" && named !== "archived";
     setLayoutFromLink(isLayout ? named : null);
     setSurface((now) => ({ ...now, main: isLayout ? "records" : named }));
@@ -17521,6 +17556,11 @@ function TablePage({
               setLayoutFromLink(layout);
               onViewChanged?.(layout);
             },
+            hostLayout,
+            onHostLayoutChange: (id) => {
+              setHostLayout(id);
+              if (id) onViewChanged?.(id);
+            },
             ...view ? { onViewChange: (patch) => void patchView(patch) } : {},
             ...rights.write ? { onNewRecordForm: () => setRail("new-record") } : {},
             onOpenRecord: (recordId) => {