@savvifi/meridian-web-react 0.1.0 → 0.2.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@savvifi/meridian-web-react",
-  "version": "0.1.0",
+  "version": "0.2.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.2.0",
+    "@savvifi/meridian-schemas": "^0.2.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,7 @@
-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 { 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,7 @@
 // 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 { reactWebRenderer } from "./react_web_renderer.js";
 export { htmlKit } from "./html_kit.js";
+export { shadcnKit } from "./shadcn_kit.js";

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))) })] }));
+}