@savvifi/meridian-web-react 0.1.0 → 0.3.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@savvifi/meridian-web-react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "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, …). The premium web renderer tier of the meridian renderer family.",
+  "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": {
     "access": "public"
   },
@@ -23,8 +23,8 @@
     "src/**/*.d.ts"
   ],
   "dependencies": {
-    "@savvifi/meridian-proto-ts": "^0.1.0",
-    "@savvifi/meridian-schemas": "^0.1.0",
+    "@savvifi/meridian-proto-ts": "^0.3.0",
+    "@savvifi/meridian-schemas": "^0.3.0",
     "@bufbuild/protobuf": "2.12.1"
   },
   "peerDependencies": {
@@ -40,6 +40,8 @@
     "vitest": "2.1.4"
   },
   "pnpm": {
-    "onlyBuiltDependencies": ["esbuild"]
+    "onlyBuiltDependencies": [
+      "esbuild"
+    ]
   }
 }

package/src/component_kit.d.ts

@@ -2,10 +2,11 @@ import type { ComponentType, CSSProperties, ReactNode } from "react";
 import type { GalleryPanel } from "@savvifi/meridian-proto-ts/proto/gallery_pb.js";
 import type { LlmPromptPanel } from "@savvifi/meridian-proto-ts/proto/llm_prompt_pb.js";
 import type { LroPanel } from "@savvifi/meridian-proto-ts/proto/lro_pb.js";
-import type { PanelDescriptor } from "@savvifi/meridian-proto-ts/proto/panel_pb.js";
+import type { FormPanel, PanelDescriptor } from "@savvifi/meridian-proto-ts/proto/panel_pb.js";
 import type { PromptPanel } from "@savvifi/meridian-proto-ts/proto/prompt_pb.js";
 import type { TablePanel } from "@savvifi/meridian-proto-ts/proto/table_pb.js";
 import type { Theme } from "@savvifi/meridian-proto-ts/proto/theme_pb.js";
+import type { Action } from "@savvifi/meridian-proto-ts/proto/view_pb.js";
 import type { RpcInvoker } from "@savvifi/meridian-schemas/uiview";
 /** Props every shape component receives: its panel, the parent descriptor, transport. */
 export interface ShapeProps<P> {
@@ -18,6 +19,12 @@ export type PromptPanelProps = ShapeProps<PromptPanel>;
 export type LroPanelProps = ShapeProps<LroPanel>;
 export type GalleryPanelProps = ShapeProps<GalleryPanel>;
 export type LlmPromptPanelProps = ShapeProps<LlmPromptPanel>;
+export type FormPanelProps = ShapeProps<FormPanel>;
+/** Props for a kit's action bar: the actions to render + transport to fire them. */
+export interface ActionBarProps {
+    actions: Action[];
+    invoker: RpcInvoker;
+}
 /** A set of components + a theme binding that paints meridian panels. */
 export interface ComponentKit {
     /** Stable id, e.g. "mui" / "shadcn" / "html". Used in the renderer id. */
@@ -36,6 +43,8 @@ export interface ComponentKit {
     Table: ComponentType<TablePanelProps>;
     Prompt: ComponentType<PromptPanelProps>;
     Lro: ComponentType<LroPanelProps>;
+    /** Entity "detail section" / CRUD form (FormPanel: READONLY | EDIT). */
+    Form: ComponentType<FormPanelProps>;
     /** Optional richer shapes; PanelRenderer falls back when a kit omits them. */
     Gallery?: ComponentType<GalleryPanelProps>;
     LlmPrompt?: ComponentType<LlmPromptPanelProps>;
@@ -43,4 +52,9 @@ export interface ComponentKit {
     Fallback: ComponentType<{
         descriptor: PanelDescriptor;
     }>;
+    /**
+     * Renders a view/slot's actions (ViewDescriptor.actions / Slot.actions).
+     * Optional — ViewRenderer falls back to plain buttons when a kit omits it.
+     */
+    ActionBar?: ComponentType<ActionBarProps>;
 }

package/src/html_kit.js

@@ -24,6 +24,9 @@ export const htmlKit = {
     Table: ({ panel }) => (_jsxs("table", { className: "mer-table", children: [_jsx("thead", { children: _jsx("tr", { children: panel.columns.map((col, i) => (_jsx("th", { children: col.header }, i))) }) }), _jsx("tbody", { children: _jsx("tr", { children: _jsx("td", { className: "mer-empty", colSpan: panel.columns.length || 1, children: panel.placeholder || "(load to populate)" }) }) })] })),
     Prompt: ({ panel }) => (_jsx("form", { className: "mer-prompt", children: panel.fields.map((field) => (_jsx("label", { className: "mer-field", children: _jsx("span", { children: field.label }) }, field.fieldId))) })),
     Lro: ({ panel }) => (_jsx("div", { className: "mer-lro", children: _jsx("button", { type: "button", children: panel.runButtonLabel || "Run" }) })),
+    Form: ({ panel }) => (
+    // FORM_MODE_EDIT = 2; anything else renders read-only.
+    _jsx("form", { className: "mer-form", "data-mode": panel.mode, children: panel.fields.map((field) => (_jsxs("label", { className: "mer-field", children: [_jsx("span", { className: "mer-field-label", children: field.label }), panel.mode === 2 ? (_jsx("input", { className: "mer-field-input", name: field.fieldId })) : (_jsx("span", { className: "mer-field-value", "data-field": field.fieldId }))] }, field.fieldId))) })),
     Fallback: ({ descriptor }) => (_jsx("pre", { className: "mer-fallback", children: descriptor.body.case
             ? `unsupported panel shape: ${descriptor.body.case}`
             : "(empty panel)" })),

package/src/index.d.ts

@@ -1,5 +1,8 @@
-export type { ComponentKit, ShapeProps, TablePanelProps, PromptPanelProps, LroPanelProps, GalleryPanelProps, LlmPromptPanelProps, } from "./component_kit.js";
+export type { ComponentKit, ShapeProps, TablePanelProps, PromptPanelProps, LroPanelProps, GalleryPanelProps, LlmPromptPanelProps, FormPanelProps, ActionBarProps, } from "./component_kit.js";
 export { MeridianProvider, useMeridian, useMeridianTheme, useRpcInvoker, useComponentKit, useAdhocHandler, type MeridianContextValue, type MeridianProviderProps, type ReactAdhocFactory, } from "./provider.js";
 export { PanelRenderer } from "./panel_renderer.js";
+export { ViewRenderer } from "./view_renderer.js";
+export { usePagedRows, resolvePagination, buildPageRequest, readPage, PaginationMode, type PagedTable, } from "./pagination.js";
 export { reactWebRenderer } from "./react_web_renderer.js";
 export { htmlKit } from "./html_kit.js";
+export { shadcnKit } from "./shadcn_kit.js";

package/src/index.js

@@ -6,5 +6,8 @@
 // can mount, a peer of the web-components / TUI / native renderers.
 export { MeridianProvider, useMeridian, useMeridianTheme, useRpcInvoker, useComponentKit, useAdhocHandler, } from "./provider.js";
 export { PanelRenderer } from "./panel_renderer.js";
+export { ViewRenderer } from "./view_renderer.js";
+export { usePagedRows, resolvePagination, buildPageRequest, readPage, PaginationMode, } from "./pagination.js";
 export { reactWebRenderer } from "./react_web_renderer.js";
 export { htmlKit } from "./html_kit.js";
+export { shadcnKit } from "./shadcn_kit.js";

package/src/pagination.d.ts

@@ -0,0 +1,42 @@
+import { PaginationMode, type Pagination, type TablePanel } from "@savvifi/meridian-proto-ts/proto/table_pb.js";
+import type { RpcInvoker } from "@savvifi/meridian-schemas/uiview";
+export { PaginationMode } from "@savvifi/meridian-proto-ts/proto/table_pb.js";
+type Row = Record<string, unknown>;
+/** Effective mode (UNSPECIFIED ⇒ CLIENT) + page size (0 ⇒ default) for a panel. */
+export declare function resolvePagination(panel: TablePanel): {
+    pagination?: Pagination;
+    mode: PaginationMode;
+    pageSize: number;
+};
+/** Build the `populate` request for a page. CLIENT ⇒ {}. Pure. */
+export declare function buildPageRequest(pagination: Pagination | undefined, opts: {
+    page?: number;
+    cursor?: string;
+}): Row;
+/** Read a page (rows + total + next cursor) out of a `populate` response. Pure. */
+export declare function readPage(pagination: Pagination | undefined, response: unknown, rowsField: string): {
+    rows: Row[];
+    total?: number;
+    nextCursor?: string;
+};
+export interface PagedTable {
+    mode: PaginationMode;
+    pageSize: number;
+    rows: Row[];
+    loading: boolean;
+    /** 0-based page index (OFFSET / CURSOR). */
+    page: number;
+    /** Total rows (OFFSET; CLIENT reports the fetched count). */
+    total?: number;
+    hasPrev: boolean;
+    hasNext: boolean;
+    goPrev: () => void;
+    goNext: () => void;
+    /** Jump to a page (OFFSET only; no-op otherwise). */
+    setPage: (page: number) => void;
+}
+/**
+ * Fetch + page a TablePanel's rows through the invoker. CLIENT returns all rows
+ * (the kit's table paginates locally); OFFSET / CURSOR fetch one page at a time.
+ */
+export declare function usePagedRows(panel: TablePanel, invoker: RpcInvoker): PagedTable;

package/src/pagination.js

@@ -0,0 +1,169 @@
+// Pagination — the kit-agnostic brain that turns a meridian.ui.v1 TablePanel's
+// `Pagination` into fetched rows + page controls, via the RpcInvoker.
+//
+// Every kit's Table component can drive its own pager off `usePagedRows`, so the
+// three modes behave identically regardless of the component library:
+//   - CLIENT  fetch once (no page params); return ALL rows — the kit's table
+//             paginates them locally (e.g. MUI TablePagination). Good for small lists.
+//   - OFFSET  re-invoke `populate` per page with offset/limit request fields; read
+//             the total-count response for page count.
+//   - CURSOR  re-invoke `populate` with a cursor request field; read the next-cursor
+//             response (empty ⇒ end). Page-at-a-time (a visited-cursor stack backs prev).
+//
+// The request/response field wiring is pure + separately testable
+// (`buildPageRequest` / `readPage`); the hook is thin glue over them.
+import { useEffect, useState } from "react";
+import { PaginationMode, } from "@savvifi/meridian-proto-ts/proto/table_pb.js";
+export { PaginationMode } from "@savvifi/meridian-proto-ts/proto/table_pb.js";
+const DEFAULT_PAGE_SIZE = 20;
+/** Follow a dotted path (e.g. "page.offset") into a value. */
+function getNested(source, path) {
+    if (!path)
+        return undefined;
+    return path.split(".").reduce((acc, key) => {
+        if (acc && typeof acc === "object")
+            return acc[key];
+        return undefined;
+    }, source);
+}
+/** Set a dotted path (e.g. "page.offset") on a request object, creating parents. */
+function setNested(target, path, value) {
+    if (!path)
+        return;
+    const keys = path.split(".");
+    let cursor = target;
+    for (let i = 0; i < keys.length - 1; i++) {
+        const key = keys[i];
+        if (typeof cursor[key] !== "object" || cursor[key] === null)
+            cursor[key] = {};
+        cursor = cursor[key];
+    }
+    cursor[keys[keys.length - 1]] = value;
+}
+/** Effective mode (UNSPECIFIED ⇒ CLIENT) + page size (0 ⇒ default) for a panel. */
+export function resolvePagination(panel) {
+    const pagination = panel.pagination;
+    let mode = pagination?.mode ?? PaginationMode.CLIENT;
+    if (mode === PaginationMode.UNSPECIFIED)
+        mode = PaginationMode.CLIENT;
+    const pageSize = pagination?.pageSize && pagination.pageSize > 0
+        ? pagination.pageSize
+        : DEFAULT_PAGE_SIZE;
+    return { pagination, mode, pageSize };
+}
+/** Build the `populate` request for a page. CLIENT ⇒ {}. Pure. */
+export function buildPageRequest(pagination, opts) {
+    const request = {};
+    if (!pagination)
+        return request;
+    if (pagination.mode === PaginationMode.OFFSET) {
+        const page = opts.page ?? 0;
+        const pageSize = pagination.pageSize > 0 ? pagination.pageSize : DEFAULT_PAGE_SIZE;
+        if (pagination.offsetRequestField)
+            setNested(request, pagination.offsetRequestField, page * pageSize);
+        if (pagination.limitRequestField)
+            setNested(request, pagination.limitRequestField, pageSize);
+    }
+    else if (pagination.mode === PaginationMode.CURSOR) {
+        if (pagination.cursorRequestField && opts.cursor)
+            setNested(request, pagination.cursorRequestField, opts.cursor);
+    }
+    return request;
+}
+/** Read a page (rows + total + next cursor) out of a `populate` response. Pure. */
+export function readPage(pagination, response, rowsField) {
+    const list = getNested(response, rowsField);
+    const rows = Array.isArray(list) ? list : [];
+    let total;
+    let nextCursor;
+    if (pagination?.totalField) {
+        const value = getNested(response, pagination.totalField);
+        total = typeof value === "number" ? value : Number(value) || undefined;
+    }
+    if (pagination?.nextCursorField) {
+        const value = getNested(response, pagination.nextCursorField);
+        nextCursor = typeof value === "string" ? value : undefined;
+    }
+    return { rows, total, nextCursor };
+}
+/**
+ * Fetch + page a TablePanel's rows through the invoker. CLIENT returns all rows
+ * (the kit's table paginates locally); OFFSET / CURSOR fetch one page at a time.
+ */
+export function usePagedRows(panel, invoker) {
+    const { pagination, mode, pageSize } = resolvePagination(panel);
+    const [page, setPageState] = useState(0);
+    // Cursor visited for each page index (CURSOR mode); index 0 = "" (first page).
+    const [cursorStack, setCursorStack] = useState([""]);
+    const [rows, setRows] = useState([]);
+    const [total, setTotal] = useState(undefined);
+    const [nextCursor, setNextCursor] = useState(undefined);
+    const [loading, setLoading] = useState(Boolean(panel.populate));
+    // Reset paging when the panel identity changes.
+    useEffect(() => {
+        setPageState(0);
+        setCursorStack([""]);
+    }, [panel]);
+    useEffect(() => {
+        if (!panel.populate) {
+            setLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setLoading(true);
+        const cursor = mode === PaginationMode.CURSOR ? cursorStack[page] ?? "" : undefined;
+        const request = mode === PaginationMode.CLIENT
+            ? {}
+            : buildPageRequest(pagination, { page, cursor });
+        invoker
+            .invoke(panel.populate.service, panel.populate.method, request)
+            .then((response) => {
+            if (cancelled)
+                return;
+            const read = readPage(pagination, response, panel.rowsField);
+            setRows(read.rows);
+            setTotal(mode === PaginationMode.CLIENT ? read.rows.length : read.total);
+            setNextCursor(read.nextCursor);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setRows([]);
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+        // cursorStack is intentionally omitted: goNext updates it together with page,
+        // so the page change drives the refetch.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [panel, invoker, page, mode]);
+    const hasPrev = page > 0;
+    const hasNext = mode === PaginationMode.OFFSET
+        ? total !== undefined
+            ? (page + 1) * pageSize < total
+            : rows.length === pageSize
+        : mode === PaginationMode.CURSOR
+            ? Boolean(nextCursor)
+            : false; // CLIENT: the kit's own pager decides
+    const goNext = () => {
+        if (mode === PaginationMode.CURSOR) {
+            if (!nextCursor)
+                return;
+            setCursorStack((stack) => {
+                const next = [...stack];
+                next[page + 1] = nextCursor;
+                return next;
+            });
+        }
+        setPageState((current) => current + 1);
+    };
+    const goPrev = () => setPageState((current) => (current > 0 ? current - 1 : current));
+    const setPage = (target) => {
+        if (mode === PaginationMode.OFFSET)
+            setPageState(Math.max(0, target));
+    };
+    return { mode, pageSize, rows, loading, page, total, hasPrev, hasNext, goNext, goPrev, setPage };
+}

package/src/panel_renderer.js

@@ -14,6 +14,9 @@ export function PanelRenderer({ descriptor, }) {
         case "lro":
             inner = (_jsx(kit.Lro, { panel: body.value, descriptor: descriptor, invoker: invoker }));
             break;
+        case "form":
+            inner = (_jsx(kit.Form, { panel: body.value, descriptor: descriptor, invoker: invoker }));
+            break;
         case "gallery":
             inner = kit.Gallery ? (_jsx(kit.Gallery, { panel: body.value, descriptor: descriptor, invoker: invoker })) : (_jsx(kit.Fallback, { descriptor: descriptor }));
             break;

package/src/shadcn_kit.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentKit } from "./component_kit.js";
+export declare const shadcnKit: ComponentKit;

package/src/shadcn_kit.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Bind the meridian palette to shadcn/ui's CSS custom properties so shadcn
+// Tailwind classes (bg-card, text-muted-foreground, border, …) paint the skin.
+// (Hex here for the reference; a production shadcn-kit would emit hsl triplets
+// for the `hsl(var(--token))` convention.)
+function themeToStyle(theme) {
+    if (!theme)
+        return {};
+    const pal = theme.dark ?? theme.light;
+    if (!pal)
+        return {};
+    return {
+        ["--background"]: pal.bg,
+        ["--card"]: pal.surface,
+        ["--foreground"]: pal.fg,
+        ["--muted-foreground"]: pal.muted,
+        ["--border"]: pal.border,
+        ["--primary"]: pal.accent,
+        ["--primary-foreground"]: pal.onAccent,
+        ["--destructive"]: pal.danger,
+        background: "var(--background)",
+        color: "var(--foreground)",
+    };
+}
+export const shadcnKit = {
+    id: "shadcn",
+    themeToStyle,
+    Chrome: ({ descriptor, children }) => (_jsxs("section", { className: "rounded-lg border bg-card text-card-foreground shadow-sm", children: [_jsx("header", { className: "border-b px-4 py-3", children: _jsx("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: descriptor.title || descriptor.panelId }) }), _jsx("div", { className: "p-4", children: children })] })),
+    Table: ({ panel }) => (_jsx("div", { className: "relative w-full overflow-auto", children: _jsxs("table", { className: "w-full caption-bottom text-sm", children: [_jsx("thead", { className: "[&_tr]:border-b", children: _jsx("tr", { className: "border-b transition-colors", children: panel.columns.map((col, i) => (_jsx("th", { className: "h-10 px-2 text-left align-middle font-medium text-muted-foreground", children: col.header }, i))) }) }), _jsx("tbody", { className: "[&_tr:last-child]:border-0", children: _jsx("tr", { className: "border-b transition-colors hover:bg-muted/50", children: _jsx("td", { className: "p-2 align-middle text-muted-foreground", colSpan: panel.columns.length || 1, children: panel.placeholder || "(load to populate)" }) }) })] }) })),
+    Prompt: ({ panel }) => (_jsx("form", { className: "grid gap-4", children: panel.fields.map((field) => (_jsx("div", { className: "grid gap-2", children: _jsx("label", { className: "text-sm font-medium leading-none", children: field.label }) }, field.fieldId))) })),
+    Lro: ({ panel }) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground", children: panel.runButtonLabel || "Run" }) })),
+    Form: ({ panel }) => (
+    // FORM_MODE_EDIT = 2; anything else renders read-only.
+    _jsx("form", { className: "grid gap-4", "data-mode": panel.mode, children: panel.fields.map((field) => (_jsxs("div", { className: "grid gap-2", children: [_jsx("label", { className: "text-sm font-medium leading-none", children: field.label }), panel.mode === 2 ? (_jsx("input", { name: field.fieldId, className: "flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm" })) : (_jsx("span", { className: "text-sm text-muted-foreground", "data-field": field.fieldId }))] }, field.fieldId))) })),
+    Fallback: ({ descriptor }) => (_jsx("div", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: descriptor.body.case
+            ? `unsupported panel shape: ${descriptor.body.case}`
+            : "(empty panel)" })),
+};

package/src/view_renderer.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+import type { ViewDescriptor } from "@savvifi/meridian-proto-ts/proto/view_pb.js";
+/** Renders a ViewDescriptor. The layout mode selects the arrangement of slots. */
+export declare function ViewRenderer({ view }: {
+    view: ViewDescriptor;
+}): ReactNode;

package/src/view_renderer.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ViewRenderer — the composition/layout tier of the React renderer.
+//
+// Renders a meridian.ui.v1 ViewDescriptor: applies the Layout (list / stacked /
+// tabbed / two-column), delegates each Slot's panel to PanelRenderer (so the
+// kit-agnostic panel dispatch is reused), and renders view- and slot-level
+// Actions via the invoker. The layout STRUCTURE is kit-agnostic; the panels and
+// the action affordances come from the active ComponentKit.
+import { useState } from "react";
+import { PanelRenderer } from "./panel_renderer.js";
+import { useMeridian } from "./provider.js";
+// Fire an action's RpcCall. Binding resolution (row/form context → request
+// fields) is a later increment; the first cut fires with an empty request and
+// lets the invoker/backend supply defaults.
+function fireAction(invoker, action) {
+    if (action.call) {
+        void invoker.invoke(action.call.service, action.call.method, {});
+    }
+}
+function ActionsView({ actions }) {
+    const { kit, invoker } = useMeridian();
+    if (!actions || actions.length === 0)
+        return null;
+    if (kit.ActionBar) {
+        return _jsx(kit.ActionBar, { actions: actions, invoker: invoker });
+    }
+    return (_jsx("div", { className: "mer-actions", children: actions.map((a) => (_jsx("button", { type: "button", onClick: () => fireAction(invoker, a), children: a.label }, a.id))) }));
+}
+// One slot: an optional title, the panel, and any slot (row) actions.
+function SlotView({ slot }) {
+    const panel = slot.panel;
+    if (!panel)
+        return null;
+    const title = slot.title || panel.title;
+    return (_jsxs("section", { className: "mer-slot", "data-slot": slot.id, "data-role": slot.role, children: [title ? _jsx("h3", { className: "mer-slot-title", children: title }) : null, _jsx(PanelRenderer, { descriptor: panel }), _jsx(ActionsView, { actions: slot.actions })] }));
+}
+function byPosition(a, b) {
+    return (a.position || 0) - (b.position || 0);
+}
+/** Renders a ViewDescriptor. The layout mode selects the arrangement of slots. */
+export function ViewRenderer({ view }) {
+    const slots = [...view.slots].sort(byPosition);
+    const layout = view.layout?.mode;
+    let body;
+    switch (layout?.case) {
+        case "tabbed":
+            body = _jsx(TabbedSlots, { slots: slots });
+            break;
+        case "twoColumn":
+            body = _jsx(TwoColumnSlots, { slots: slots });
+            break;
+        case "list":
+        case "stacked":
+        default:
+            // list + stacked both render slots in order; a list view is just a
+            // single-content-slot stack.
+            body = (_jsx("div", { className: "mer-stack", children: slots.map((s) => (_jsx(SlotView, { slot: s }, s.id))) }));
+    }
+    return (_jsxs("div", { className: "mer-view", "data-view": view.id, "data-kind": view.kind, children: [_jsxs("header", { className: "mer-view-header", children: [_jsx("h2", { className: "mer-view-title", children: view.title }), _jsx(ActionsView, { actions: view.actions })] }), body] }));
+}
+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] }));
+}
+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))) })] }));
+}