@go-go-golems/rag-evaluation-site 0.1.0

package/README.md

@@ -0,0 +1,80 @@
+# @go-go-golems/rag-evaluation-site
+
+React Widget IR renderer and default RAG evaluation site shell.
+
+## Component ownership
+
+This package is the canonical reusable UI layer. Read [`GUIDELINES.md`](./GUIDELINES.md) before changing package UI. Keep package components API-free and Storybook-first:
+
+- `components/foundation`: text, captions, status, code, dividers, accessibility helpers.
+- `components/atoms`: basic controls and semantic markers.
+- `components/layout`: generic structure primitives such as shells, panes, stacks, panels, and grids.
+- `components/molecules`: reusable data-display/content patterns with no backend hooks.
+- `components/organisms`: feature panels with DTO-shaped props and callbacks.
+- `widgets`: JSON-compatible Widget IR types and the React `WidgetRenderer`.
+
+Storybook ownership follows the same boundary. Use `Design System/Layout/<Name>` for layout primitives, `Design System/Foundation/<Name>` for foundation, and `Component Library/Molecules/<Name>` / `Component Library/Organisms/<Name>` for reusable product components. Add or update stories before exposing a new public component.
+
+When adding a component that should later be available from the Widget IR/Goja DSL, stabilize the React API first, keep props JSON-shaped where practical, add `data-rag-*` identity attributes, and only then extend `src/widgets/ir.ts` and `WidgetRenderer.tsx` with semantic component types.
+
+## Widget IR coverage
+
+`WidgetRenderer` supports both the original dashboard vocabulary and the newer semantic context-viewer vocabulary:
+
+- foundation/atoms/layout nodes such as `Text`, `CodeText`, `ContextKindSwatch`, `SectionBlock`, `SplitPane`, `SlideShell`, and `SidebarShell`;
+- context diagram nodes such as `ContextBudgetBar`, `ContextStripDiagram`, `ContextTreemap`, and `ContextDiagramPanel`;
+- transcript/comment nodes such as `TranscriptWorkspacePanel`, `AnnotationRailPanel`, and `AnchoredCommentRail`;
+- course/handout nodes such as `CourseStudioShell`, `CourseSlidePanel`, `MarkdownArticle`, and `HandoutDocumentShell`.
+
+Review package Storybook under `Widget IR/Renderer/...` for IR-authored examples grouped by Foundation and Atoms, Layout Recipes, Context Diagrams, Transcript and Notes, and Course Studio.
+
+Goja authors can use direct helpers from `require("widget.dsl")` / `require("rag.dsl")`, plus semantic recipes under `rag.recipes` such as `contextDiagram`, `annotatedTranscript`, `courseStudio`, `courseSlide`, and `handout`.
+
+## Install
+
+```bash
+pnpm add @go-go-golems/rag-evaluation-site react react-dom
+```
+
+## Publishing
+
+The package is published from the generated `dist/` artifact, not directly from source. Build and smoke-test the artifact before publishing:
+
+```bash
+pnpm --dir packages/rag-evaluation-site build
+pnpm --dir packages/rag-evaluation-site consumer:smoke
+```
+
+GitHub Actions workflow `.github/workflows/publish-npm.yml` publishes with npm Trusted Publishing. The workflow uses GitHub OIDC (`id-token: write`) and does not require `NODE_AUTH_TOKEN` after the npm package has been bootstrapped and trusted.
+
+For the first publish of a brand-new package, create `@go-go-golems/rag-evaluation-site` manually with an npm account that has access to the `@go-go-golems` scope, then configure trusted publishing for repository `go-go-golems/rag-evaluation-system`, workflow `publish-npm.yml`, environment `npm-production`.
+
+## Renderer usage
+
+```tsx
+import { WidgetRenderer, useWidgetPage } from '@go-go-golems/rag-evaluation-site';
+import '@go-go-golems/rag-evaluation-site/styles.css';
+
+export function Page() {
+  const { page, loading, error } = useWidgetPage('/api/widget/pages/demo');
+  if (loading) return <div>Loading…</div>;
+  if (error || !page) return <div>Failed to load page</div>;
+  return <WidgetRenderer node={page.root} />;
+}
+```
+
+## Default app usage
+
+```tsx
+import { RagEvaluationSiteApp } from '@go-go-golems/rag-evaluation-site/app';
+import '@go-go-golems/rag-evaluation-site/styles.css';
+
+export function App() {
+  return <RagEvaluationSiteApp apiBase="/api/widget" defaultPageId="index" />;
+}
+```
+
+## Build outputs
+
+- `dist/`: npm package artifact.
+- `app-dist/`: default Vite app build for Go embedding.

package/app/App.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import './app.css';
+export interface RagEvaluationSiteAppProps {
+    apiBase?: string;
+    defaultPageId?: string;
+}
+export declare function RagEvaluationSiteApp({ apiBase, defaultPageId }: RagEvaluationSiteAppProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=App.d.ts.map

package/app/index.d.ts

@@ -0,0 +1,2 @@
+export * from './App';
+//# sourceMappingURL=index.d.ts.map

package/app/index.js

@@ -0,0 +1,149 @@
+import { Ct as e, Et as t, H as n, K as r, M as i, mt as a, n as o, t as s, yt as c } from "../useWidgetPage-B8iwybER.js";
+//#region src/app/App.tsx
+var l = e(), u = [
+	{
+		id: "index",
+		label: "Overview"
+	},
+	{
+		id: "demo",
+		label: "Demo"
+	},
+	{
+		id: "actions",
+		label: "Actions"
+	}
+];
+function d({ apiBase: e = "/api/widget", defaultPageId: n = "index" }) {
+	let i = S(n), o = e.replace(/\/$/, ""), { page: u, loading: d, error: p, refresh: m } = s(`${o}/pages/${encodeURIComponent(i)}`);
+	async function h(e, n) {
+		if (e.kind !== "server") {
+			t(e, n);
+			return;
+		}
+		let r = await fetch(`${o}/actions/${encodeURIComponent(e.name)}`, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({
+				payload: e.payload ?? {},
+				context: n
+			})
+		});
+		if (!r.ok) throw Error(`Widget action failed: ${r.status} ${r.statusText}`);
+		let i = await r.json();
+		i.toast && typeof window < "u" && window.dispatchEvent(new CustomEvent("widget:toast", { detail: i })), i.refresh && m();
+	}
+	return d ? /* @__PURE__ */ (0, l.jsx)(r, {
+		className: "rag-evaluation-site-state",
+		title: "RAG Evaluation Site",
+		density: "condensed",
+		children: /* @__PURE__ */ (0, l.jsx)(c, { children: "Loading Widget IR…" })
+	}) : p ? /* @__PURE__ */ (0, l.jsxs)(a, {
+		className: "rag-evaluation-site-state",
+		children: ["Failed to load Widget IR page: ", p.message]
+	}) : u ? f(u, i, (e, t) => {
+		h(e, t);
+	}) : /* @__PURE__ */ (0, l.jsx)(r, {
+		className: "rag-evaluation-site-state",
+		title: "RAG Evaluation Site",
+		density: "condensed",
+		children: /* @__PURE__ */ (0, l.jsx)(c, { children: "No Widget IR returned." })
+	});
+}
+function f(e, t, r) {
+	let a = h(e.meta), s = /* @__PURE__ */ (0, l.jsx)(o, {
+		node: e.root,
+		onAction: r
+	}), c = ["rag-evaluation-site-root", p(e, a) ? "rag-evaluation-site-root--shell" : "rag-evaluation-site-root--raw"].filter(Boolean).join(" ");
+	if (!p(e, a)) return /* @__PURE__ */ (0, l.jsx)("div", {
+		className: c,
+		"data-rag-page": "RagEvaluationSiteApp",
+		"data-page-id": e.id,
+		"data-rag-shell": "none",
+		children: s
+	});
+	let d = a.navItems?.length ? a.navItems : u, f = a.activeNavItemId ?? t;
+	return /* @__PURE__ */ (0, l.jsx)("div", {
+		className: c,
+		"data-rag-page": "RagEvaluationSiteApp",
+		"data-page-id": e.id,
+		"data-rag-shell": "default",
+		children: /* @__PURE__ */ (0, l.jsx)(n, {
+			className: "rag-evaluation-site-shell",
+			header: /* @__PURE__ */ (0, l.jsx)(i, {
+				brand: /* @__PURE__ */ (0, l.jsx)("span", {
+					className: "rag-evaluation-site-brand",
+					children: e.title || "RAG Evaluation Site"
+				}),
+				items: d.map((e) => ({
+					id: e.id,
+					label: y(e.label)
+				})),
+				activeItemId: f,
+				onItemSelect: (e) => {
+					let t = d.find((t) => t.id === e);
+					if (t?.action) {
+						r(t.action, {
+							value: e,
+							componentType: "AppNav"
+						});
+						return;
+					}
+					x(e);
+				}
+			}),
+			children: /* @__PURE__ */ (0, l.jsx)("div", {
+				className: b(a.maxWidth),
+				"data-rag-layout": "PageContent",
+				children: s
+			})
+		})
+	});
+}
+function p(e, t) {
+	return !(t.shell === "none" || m(e.root));
+}
+function m(e) {
+	return e.kind === "component" && e.type === "AppShell";
+}
+function h(e) {
+	return e ? {
+		shell: g(e.shell) ? e.shell : void 0,
+		activeNavItemId: typeof e.activeNavItemId == "string" ? e.activeNavItemId : void 0,
+		navItems: Array.isArray(e.navItems) ? e.navItems.filter(v) : void 0,
+		maxWidth: _(e.maxWidth) ? e.maxWidth : void 0
+	} : {};
+}
+function g(e) {
+	return e === "auto" || e === "none" || e === "app";
+}
+function _(e) {
+	return e === "none" || e === "content" || e === "wide";
+}
+function v(e) {
+	if (!e || typeof e != "object") return !1;
+	let t = e;
+	return typeof t.id == "string" && t.label !== void 0;
+}
+function y(e) {
+	return e && typeof e == "object" && "kind" in e ? /* @__PURE__ */ (0, l.jsx)(o, { node: e }) : String(e ?? "");
+}
+function b(e) {
+	return ["rag-evaluation-site-content", `rag-evaluation-site-content--${e ?? "wide"}`].join(" ");
+}
+function x(e) {
+	if (typeof window > "u") return;
+	let t = new URL(window.location.href);
+	t.pathname = `/pages/${encodeURIComponent(e)}`, t.searchParams.delete("page"), window.location.assign(t.toString());
+}
+function S(e) {
+	if (typeof window > "u") return e;
+	let t = new URL(window.location.href), n = t.searchParams.get("page");
+	if (n) return n;
+	let r = t.pathname.split("/").filter(Boolean);
+	return r[0] === "pages" && r[1] ? r[1] : e;
+}
+//#endregion
+export { d as RagEvaluationSiteApp };
+
+//# sourceMappingURL=index.js.map

package/components/atoms/AnnotationBadge/AnnotationBadge.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'react';
+import type { ContextPartKind } from '../../../context';
+export interface AnnotationBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    kind: ContextPartKind;
+    label: string;
+    selected?: boolean;
+}
+export declare function AnnotationBadge({ kind, label, selected, className, ...rest }: AnnotationBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=AnnotationBadge.d.ts.map

package/components/atoms/AnnotationBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnnotationBadge';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/Button/Button.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'default' | 'primary';
+export type ButtonSize = 'normal' | 'compact';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    selected?: boolean;
+    children?: ReactNode;
+}
+export declare function Button({ variant, size, selected, className, children, ...rest }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/components/atoms/Button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/CheckboxRow/CheckboxRow.d.ts

@@ -0,0 +1,8 @@
+import type { InputHTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+export interface CheckboxRowProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
+    checked: boolean;
+    onChange: InputHTMLAttributes<HTMLInputElement>['onChange'];
+    children?: ReactNode;
+}
+export declare function CheckboxRow({ checked, onChange, className, children, ...rest }: CheckboxRowProps): import("react").JSX.Element;
+//# sourceMappingURL=CheckboxRow.d.ts.map

package/components/atoms/CheckboxRow/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CheckboxRow';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/ContextKindSwatch/ContextKindSwatch.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+import { type ContextDiagramStyle, type ContextPartKind } from '../../../context';
+export type ContextKindSwatchSize = 'sm' | 'md' | 'lg';
+export interface ContextKindSwatchProps extends HTMLAttributes<HTMLSpanElement> {
+    kind: ContextPartKind;
+    mode?: ContextDiagramStyle;
+    size?: ContextKindSwatchSize;
+    selected?: boolean;
+}
+export declare function ContextKindSwatch({ kind, mode, size, selected, className, style, ...rest }: ContextKindSwatchProps): import("react").JSX.Element;
+//# sourceMappingURL=ContextKindSwatch.d.ts.map

package/components/atoms/ContextKindSwatch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContextKindSwatch';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/ContextStudioNavIcon/ContextStudioNavIcon.d.ts

@@ -0,0 +1,8 @@
+import type { SVGAttributes } from 'react';
+export type ContextStudioNavIconId = 'course' | 'slides' | 'visualize' | 'upload' | 'transcript' | 'comments' | 'handout';
+export interface ContextStudioNavIconProps extends Omit<SVGAttributes<SVGSVGElement>, 'id'> {
+    id: ContextStudioNavIconId;
+    title?: string;
+}
+export declare function ContextStudioNavIcon({ id, title, className, ...rest }: ContextStudioNavIconProps): import("react").JSX.Element;
+//# sourceMappingURL=ContextStudioNavIcon.d.ts.map

package/components/atoms/ContextStudioNavIcon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContextStudioNavIcon';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/ErrorCallout/ErrorCallout.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ErrorCalloutProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare function ErrorCallout({ className, children, ...rest }: ErrorCalloutProps): import("react").JSX.Element;
+//# sourceMappingURL=ErrorCallout.d.ts.map

package/components/atoms/ErrorCallout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ErrorCallout';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/IconButton/IconButton.d.ts

@@ -0,0 +1,9 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type IconButtonSize = 'compact' | 'normal';
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: IconButtonSize;
+    label?: string;
+    children?: ReactNode;
+}
+export declare function IconButton({ size, label, className, children, ...rest }: IconButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=IconButton.d.ts.map

package/components/atoms/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './IconButton';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/SelectInput/SelectInput.d.ts

@@ -0,0 +1,5 @@
+import type { SelectHTMLAttributes } from 'react';
+export interface SelectInputProps extends SelectHTMLAttributes<HTMLSelectElement> {
+}
+export declare function SelectInput({ className, children, ...rest }: SelectInputProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectInput.d.ts.map

package/components/atoms/SelectInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/TextInput/TextInput.d.ts

@@ -0,0 +1,5 @@
+import type { InputHTMLAttributes } from 'react';
+export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare function TextInput({ className, ...rest }: TextInputProps): import("react").JSX.Element;
+//# sourceMappingURL=TextInput.d.ts.map

package/components/atoms/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextInput';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/TranscriptRoleBadge/TranscriptRoleBadge.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+import type { TranscriptRole } from '../../../context';
+export interface TranscriptRoleBadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    role: TranscriptRole;
+    name?: string;
+}
+export declare function TranscriptRoleBadge({ role, name, className, ...rest }: TranscriptRoleBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=TranscriptRoleBadge.d.ts.map

package/components/atoms/TranscriptRoleBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TranscriptRoleBadge';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/UploadGlyph/UploadGlyph.d.ts

@@ -0,0 +1,6 @@
+import type { SVGAttributes } from 'react';
+export interface UploadGlyphProps extends SVGAttributes<SVGSVGElement> {
+    title?: string;
+}
+export declare function UploadGlyph({ title, className, ...rest }: UploadGlyphProps): import("react").JSX.Element;
+//# sourceMappingURL=UploadGlyph.d.ts.map

package/components/atoms/UploadGlyph/index.d.ts

@@ -0,0 +1,2 @@
+export * from './UploadGlyph';
+//# sourceMappingURL=index.d.ts.map

package/components/atoms/index.d.ts

@@ -0,0 +1,12 @@
+export * from './Button';
+export * from './CheckboxRow';
+export * from './ErrorCallout';
+export * from './IconButton';
+export * from './SelectInput';
+export * from './TextInput';
+export * from './ContextKindSwatch';
+export * from './TranscriptRoleBadge';
+export * from './AnnotationBadge';
+export * from './UploadGlyph';
+export * from './ContextStudioNavIcon';
+//# sourceMappingURL=index.d.ts.map

package/components/foundation/Caption/Caption.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type CaptionTone = 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inherit';
+export type CaptionTransform = 'none' | 'uppercase';
+export interface CaptionProps extends HTMLAttributes<HTMLSpanElement> {
+    tone?: CaptionTone;
+    transform?: CaptionTransform;
+    truncate?: boolean;
+    children?: ReactNode;
+}
+export declare function Caption({ tone, transform, truncate, className, children, ...rest }: CaptionProps): import("react").JSX.Element;
+//# sourceMappingURL=Caption.d.ts.map

package/components/foundation/Caption/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Caption';
+//# sourceMappingURL=index.d.ts.map

package/components/foundation/CodeText/CodeText.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CodeTextProps extends HTMLAttributes<HTMLElement> {
+    as?: 'code' | 'span' | 'div';
+    tone?: 'primary' | 'muted' | 'accent';
+    display?: 'inline' | 'block';
+    copyable?: boolean;
+    children?: ReactNode;
+}
+export declare function CodeText({ as: Component, tone, display, copyable, className, children, onClick, ...rest }: CodeTextProps): import("react").JSX.Element;
+//# sourceMappingURL=CodeText.d.ts.map

package/components/foundation/CodeText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CodeText';
+//# sourceMappingURL=index.d.ts.map

package/components/foundation/Divider/Divider.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export interface DividerProps extends HTMLAttributes<HTMLHRElement> {
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare function Divider({ orientation, className, ...rest }: DividerProps): import("react").JSX.Element;
+//# sourceMappingURL=Divider.d.ts.map

package/components/foundation/Divider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Divider';
+//# sourceMappingURL=index.d.ts.map

package/components/foundation/StatusText/StatusText.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type RagStatus = 'pending' | 'ready' | 'running' | 'succeeded' | 'done' | 'partial' | 'warning' | 'failed' | 'error' | 'canceled';
+export interface StatusTextProps extends HTMLAttributes<HTMLSpanElement> {
+    status: RagStatus | string;
+    icon?: boolean;
+    children?: ReactNode;
+}
+export declare function StatusText({ status, icon, className, children, ...rest }: StatusTextProps): import("react").JSX.Element;
+//# sourceMappingURL=StatusText.d.ts.map

package/components/foundation/StatusText/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StatusText';
+//# sourceMappingURL=index.d.ts.map