@savvifi/meridian-web-react 0.3.0 → 0.3.1
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.
- package/package.json +1 -1
- package/src/view_renderer.js +30 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@savvifi/meridian-web-react",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"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.",
|
|
6
6
|
"publishConfig": {
|
package/src/view_renderer.js
CHANGED
|
@@ -61,11 +61,39 @@ export function ViewRenderer({ view }) {
|
|
|
61
61
|
function TabbedSlots({ slots }) {
|
|
62
62
|
const [active, setActive] = useState(0);
|
|
63
63
|
const ordered = [...slots].sort((a, b) => (a.placement?.tabPosition || 0) - (b.placement?.tabPosition || 0));
|
|
64
|
-
return (_jsxs("div", { className: "mer-tabs", children: [_jsx("div", { className: "mer-tabstrip", role: "tablist",
|
|
64
|
+
return (_jsxs("div", { className: "mer-tabs", children: [_jsx("div", { className: "mer-tabstrip", role: "tablist",
|
|
65
|
+
// Structural + affordance styling (kit-neutral). Colors read the --mer-*
|
|
66
|
+
// theme vars a kit exposes (MeridianMuiProvider / htmlKit set these),
|
|
67
|
+
// falling back to sensible defaults so tabs look like tabs in any kit.
|
|
68
|
+
style: {
|
|
69
|
+
display: "flex",
|
|
70
|
+
gap: 4,
|
|
71
|
+
borderBottom: "1px solid var(--mer-border, #e0e0e0)",
|
|
72
|
+
marginBottom: 16,
|
|
73
|
+
}, children: ordered.map((s, i) => {
|
|
74
|
+
const isActive = i === active;
|
|
75
|
+
return (_jsx("button", { type: "button", role: "tab", "aria-selected": isActive, className: isActive ? "mer-tab active" : "mer-tab", onClick: () => setActive(i), style: {
|
|
76
|
+
appearance: "none",
|
|
77
|
+
background: "transparent",
|
|
78
|
+
border: "none",
|
|
79
|
+
cursor: "pointer",
|
|
80
|
+
padding: "8px 14px",
|
|
81
|
+
fontSize: 14,
|
|
82
|
+
fontFamily: "inherit",
|
|
83
|
+
color: isActive ? "var(--mer-accent, #1976d2)" : "var(--mer-fg, inherit)",
|
|
84
|
+
fontWeight: isActive ? 600 : 400,
|
|
85
|
+
borderBottom: isActive
|
|
86
|
+
? "2px solid var(--mer-accent, #1976d2)"
|
|
87
|
+
: "2px solid transparent",
|
|
88
|
+
marginBottom: "-1px",
|
|
89
|
+
}, children: s.placement?.tabLabel || s.title || s.id }, s.id));
|
|
90
|
+
}) }), ordered[active] ? _jsx(SlotView, { slot: ordered[active] }) : null] }));
|
|
65
91
|
}
|
|
66
92
|
function TwoColumnSlots({ slots }) {
|
|
67
93
|
// Column.COLUMN_SIDEBAR = 2; everything else (main / unspecified) is main.
|
|
68
94
|
const sidebar = slots.filter((s) => s.placement?.column === 2);
|
|
69
95
|
const main = slots.filter((s) => s.placement?.column !== 2);
|
|
70
|
-
|
|
96
|
+
// Structural flex (kit-neutral): main + sidebar sit side by side, wrapping to
|
|
97
|
+
// stacked on narrow viewports. Without this the columns would stack always.
|
|
98
|
+
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))) })] }));
|
|
71
99
|
}
|