@savvifi/meridian-web-react 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@savvifi/meridian-web-react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "description": "React adapter for the meridian WebRenderer seam: a kit-agnostic core (MeridianProvider, PanelRenderer, ComponentKit, reactWebRenderer) that renders meridian.ui.v1 PanelDescriptors through a swappable ComponentKit (MUI, shadcn, \u2026). The premium web renderer tier of the meridian renderer family.",
   "publishConfig": {

package/src/pagination.d.ts

@@ -34,6 +34,8 @@ export interface PagedTable {
     goNext: () => void;
     /** Jump to a page (OFFSET only; no-op otherwise). */
     setPage: (page: number) => void;
+    /** True when the populate RPC rejected — so the kit shows an error, not "no data". */
+    error: boolean;
 }
 /**
  * Fetch + page a TablePanel's rows through the invoker. CLIENT returns all rows

package/src/pagination.js

@@ -99,6 +99,7 @@ export function usePagedRows(panel, invoker) {
     const [total, setTotal] = useState(undefined);
     const [nextCursor, setNextCursor] = useState(undefined);
     const [loading, setLoading] = useState(Boolean(panel.populate));
+    const [error, setError] = useState(false);
     // Reset paging when the panel identity changes.
     useEffect(() => {
         setPageState(0);
@@ -111,6 +112,7 @@ export function usePagedRows(panel, invoker) {
         }
         let cancelled = false;
         setLoading(true);
+        setError(false);
         const cursor = mode === PaginationMode.CURSOR ? cursorStack[page] ?? "" : undefined;
         const request = mode === PaginationMode.CLIENT
             ? {}
@@ -126,8 +128,12 @@ export function usePagedRows(panel, invoker) {
             setNextCursor(read.nextCursor);
         })
             .catch(() => {
-            if (!cancelled)
+            // Surface the failure — a table that shows "no data" on a failed fetch is
+            // a UI mishap (the user reads it as "there are none").
+            if (!cancelled) {
                 setRows([]);
+                setError(true);
+            }
         })
             .finally(() => {
             if (!cancelled)
@@ -165,5 +171,5 @@ export function usePagedRows(panel, invoker) {
         if (mode === PaginationMode.OFFSET)
             setPageState(Math.max(0, target));
     };
-    return { mode, pageSize, rows, loading, page, total, hasPrev, hasNext, goNext, goPrev, setPage };
+    return { mode, pageSize, rows, loading, error, page, total, hasPrev, hasNext, goNext, goPrev, setPage };
 }

package/src/view_renderer.js

@@ -61,11 +61,39 @@ export function ViewRenderer({ view }) {
 function TabbedSlots({ slots }) {
     const [active, setActive] = useState(0);
     const ordered = [...slots].sort((a, b) => (a.placement?.tabPosition || 0) - (b.placement?.tabPosition || 0));
-    return (_jsxs("div", { className: "mer-tabs", children: [_jsx("div", { className: "mer-tabstrip", role: "tablist", children: ordered.map((s, i) => (_jsx("button", { type: "button", role: "tab", "aria-selected": i === active, className: i === active ? "mer-tab active" : "mer-tab", onClick: () => setActive(i), children: s.placement?.tabLabel || s.title || s.id }, s.id))) }), ordered[active] ? _jsx(SlotView, { slot: ordered[active] }) : null] }));
+    return (_jsxs("div", { className: "mer-tabs", children: [_jsx("div", { className: "mer-tabstrip", role: "tablist", 
+                // Structural + affordance styling (kit-neutral). Colors read the --mer-*
+                // theme vars a kit exposes (MeridianMuiProvider / htmlKit set these),
+                // falling back to sensible defaults so tabs look like tabs in any kit.
+                style: {
+                    display: "flex",
+                    gap: 4,
+                    borderBottom: "1px solid var(--mer-border, #e0e0e0)",
+                    marginBottom: 16,
+                }, children: ordered.map((s, i) => {
+                    const isActive = i === active;
+                    return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, className: isActive ? "mer-tab active" : "mer-tab", onClick: () => setActive(i), style: {
+                            appearance: "none",
+                            background: "transparent",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: "8px 14px",
+                            fontSize: 14,
+                            fontFamily: "inherit",
+                            color: isActive ? "var(--mer-accent, #1976d2)" : "var(--mer-fg, inherit)",
+                            fontWeight: isActive ? 600 : 400,
+                            borderBottom: isActive
+                                ? "2px solid var(--mer-accent, #1976d2)"
+                                : "2px solid transparent",
+                            marginBottom: "-1px",
+                        }, children: s.placement?.tabLabel || s.title || s.id }, s.id));
+                }) }), ordered[active] ? _jsx(SlotView, { slot: ordered[active] }) : null] }));
 }
 function TwoColumnSlots({ slots }) {
     // Column.COLUMN_SIDEBAR = 2; everything else (main / unspecified) is main.
     const sidebar = slots.filter((s) => s.placement?.column === 2);
     const main = slots.filter((s) => s.placement?.column !== 2);
-    return (_jsxs("div", { className: "mer-two-column", children: [_jsx("div", { className: "mer-col-main", children: main.map((s) => (_jsx(SlotView, { slot: s }, s.id))) }), _jsx("aside", { className: "mer-col-sidebar", children: sidebar.map((s) => (_jsx(SlotView, { slot: s }, s.id))) })] }));
+    // Structural flex (kit-neutral): main + sidebar sit side by side, wrapping to
+    // stacked on narrow viewports. Without this the columns would stack always.
+    return (_jsxs("div", { className: "mer-two-column", style: { display: "flex", gap: 24, alignItems: "flex-start", flexWrap: "wrap" }, children: [_jsx("div", { className: "mer-col-main", style: { flex: "2 1 320px", minWidth: 0 }, children: main.map((s) => (_jsx(SlotView, { slot: s }, s.id))) }), _jsx("aside", { className: "mer-col-sidebar", style: { flex: "1 1 240px", minWidth: 0 }, children: sidebar.map((s) => (_jsx(SlotView, { slot: s }, s.id))) })] }));
 }