@lobb-js/lobb-ext-reports 0.11.0 → 0.11.1

package/README.md

@@ -1 +1,2 @@
 # @lobb-js/lobb-ext-reports
+

package/dist/index.js

@@ -1,4 +1,5 @@
 import Reports from "./lib/components/pages/reports/index.svelte";
+import SharedReport from "./lib/components/pages/shared_report/index.svelte";
 import QueryAiButton from "./lib/components/dv_fields_buttons/query_ai_button/index.svelte";
 export default function extension(utils) {
     return {
@@ -6,6 +7,9 @@ export default function extension(utils) {
         components: {
             "dvFields.topRight.reports_charts.query": QueryAiButton,
             "pages.analytics": Reports,
+            // Lives at /studio/public/reports/shared_report — no auth required, the
+            // page itself swaps the LobbClient bearer to the share_token in the URL.
+            "publicPages.shared_report": SharedReport,
         },
         dashboardNavs: {
             middle: [
@@ -13,6 +17,7 @@ export default function extension(utils) {
                     href: "/studio/extensions/reports/analytics",
                     icon: utils.components.Icons.ChartNoAxesCombined,
                     label: "Analytics",
+                    represents: "reports_dashboards",
                 },
             ],
         },

package/dist/lib/components/pages/reports/components/chart.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { ExtensionProps } from "@lobb-js/studio";
 	import Table from "./charts/table.svelte";
 	import ChartJs from "./charts/chartJs.svelte";
@@ -30,6 +31,27 @@
 	const { UpdateDetailViewButton, Button, Tooltip } = utils.components;
 	const icons = utils.components.Icons;
 
+	// Button visibility comes from the caller's actual permissions on
+	// reports_charts. A logged-in admin sees edit + delete; a viewer without
+	// those grants (including a share-token recipient) doesn't see either.
+	let canUpdate = $state(false);
+	let canDelete = $state(false);
+
+	onMount(async () => {
+		const [updateAllowed, deleteAllowed] = await Promise.all([
+			utils.emitEvent("auth.canAccess", {
+				collection: "reports_charts",
+				action: "update",
+			}),
+			utils.emitEvent("auth.canAccess", {
+				collection: "reports_charts",
+				action: "delete",
+			}),
+		]);
+		canUpdate = updateAllowed === true;
+		canDelete = deleteAllowed === true;
+	});
+
 	function findCustomChartComponent(type: string): any {
 		const extensions = utils.ctx?.extensions ?? {};
 		for (const ext of Object.values(extensions) as any[]) {
@@ -89,21 +111,25 @@
 			{/if}
 		</div>
 		<div class="flex">
-			<UpdateDetailViewButton
-				collectionName="reports_charts"
-				recordId={chartRecord.id}
-				variant="ghost"
-				class="h-7 w-7 text-muted-foreground hover:bg-transparent"
-				Icon={icons.Pencil}
-				onSuccessfullSave={handleEditOnSuccessfull}
-			></UpdateDetailViewButton>
-			<Button
-				class="h-6 w-6 text-muted-foreground hover:bg-transparent"
-				variant="ghost"
-				size="icon"
-				Icon={icons.Trash}
-				onclick={handleChartDelete}
-			></Button>
+			{#if canUpdate}
+				<UpdateDetailViewButton
+					collectionName="reports_charts"
+					recordId={chartRecord.id}
+					variant="ghost"
+					class="h-7 w-7 text-muted-foreground hover:bg-transparent"
+					Icon={icons.Pencil}
+					onSuccessfullSave={handleEditOnSuccessfull}
+				></UpdateDetailViewButton>
+			{/if}
+			{#if canDelete}
+				<Button
+					class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+					variant="ghost"
+					size="icon"
+					Icon={icons.Trash}
+					onclick={handleChartDelete}
+				></Button>
+			{/if}
 		</div>
 	</div>
 	<div class="flex min-h-0 items-center justify-center overflow-hidden">

package/dist/lib/components/pages/reports/components/charts/table.svelte

@@ -28,7 +28,6 @@
 			localSorting={true}
 			showLastRowBorder={true}
 			showLastColumnBorder={true}
-			unifiedBgColor="bg-background"
 		></Table>
 	{:else}
 		<div class="flex justify-center items-center h-full">No Results</div>

package/dist/lib/components/pages/reports/components/report.svelte

@@ -1,38 +1,31 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import GridStackComponent from "../../../gridStack.svelte";
-	import Chart from "./chart.svelte";
+	import ReportBody from "../../../reportBody.svelte";
 
-	const { reportId, utils, ...props }: { reportId: string; utils: any; [key: string]: any } = $props();
+	const { reportId, utils }: { reportId: string; utils: any } = $props();
 	const {
 		SidebarTrigger,
 		CreateDetailViewButton,
+		Button,
 		Icons,
 	} = utils.components;
 
 	let report: any = $state(null);
-	let charts: any[] = $state([]);
-	let loading = $state(true);
 	let saving = $state(false);
 	let editable = $state(false);
+	let canShare = $state(false);
+	let sharing = $state(false);
+	// Handle captured from ReportBody via its onReady callback — lets us
+	// trigger a reload of charts after creating a new one without duplicating
+	// the fetch logic here.
+	let body: { reload: () => Promise<void> } | undefined = $state();
 
-	async function loadCharts({ showLoading = true } = {}) {
-		if (showLoading) loading = true;
-		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
-			sort: "id",
-			filter: { id: reportId },
-		});
-		report = (await reportsRes.json()).data[0];
-		if (!report) {
-			if (showLoading) loading = false;
-			return;
-		}
+	function handleReportLoaded(r: any) {
+		report = r;
+	}
 
-		const chartsRes = await utils.lobb.findAll("reports_charts", {
-			filter: { report_id: report.id },
-		});
-		charts = (await chartsRes.json()).data;
-		if (showLoading) loading = false;
+	function handleReady(api: { reload: () => Promise<void> }) {
+		body = api;
 	}
 
 	async function handleLayoutChange(changes: { id: string; order: number; w: number; h: number }[]) {
@@ -47,10 +40,6 @@
 		saving = false;
 	}
 
-	function getChartGridSize(chart: any): Record<string, unknown> {
-		return { "gs-w": chart.col_span ?? 6, "gs-h": chart.row_span ?? 2, "gs-auto-position": "true" };
-	}
-
 	function handleChartClick(_event: any, elements: any[], chart: any) {
 		if (!elements.length) return;
 		const { index, datasetIndex } = elements[0];
@@ -62,100 +51,116 @@
 		});
 	}
 
-	onMount(() => loadCharts());
+	async function checkSharePermission() {
+		const allowed = await utils.emitEvent("auth.canAccess", {
+			collection: "auth_shares",
+			action: "create",
+		});
+		canShare = allowed === true;
+	}
+
+	async function handleShare() {
+		sharing = true;
+		try {
+			// Snapshot grants exactly the read access a recipient needs to view
+			// this one report — the dashboard row and the charts that belong to it.
+			const permissions = {
+				reports_dashboards: { read: { filter: { id: Number(reportId) } } },
+				reports_charts: { read: { filter: { report_id: Number(reportId) } } },
+				// TODO: the above ones are ok. the below ones are specific to only this risk project
+				// can you please add them using a different way
+				risk_config: true,
+				risks: true,
+			};
+			const response = await utils.lobb.createOne("auth_shares", {
+				label: `Share for: ${report?.name ?? "report"}`,
+				permissions: JSON.stringify(permissions),
+				expires_in_seconds: 7 * 24 * 60 * 60,
+			});
+			if (!response.ok) {
+				const body = await response.json().catch(() => null);
+				utils.toast.error(body?.message ?? "Failed to create share");
+				return;
+			}
+			const body = await response.json();
+			const url = `${window.location.origin}/studio/public/reports/shared_report?report_id=${reportId}&share_token=${body.data.token}`;
+			await navigator.clipboard.writeText(url);
+			utils.toast.success("Share link copied to clipboard");
+		} catch (err) {
+			utils.toast.error(err instanceof Error ? err.message : "Failed to create share");
+		} finally {
+			sharing = false;
+		}
+	}
+
+	onMount(() => {
+		checkSharePermission();
+	});
 </script>
 
 <div class="report-layout">
-	{#if loading}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
-			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
-			<div class="flex flex-col items-center justify-center">
-				<div class="text-muted-foreground">Loading the dashboard...</div>
-				<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
-			</div>
-		</div>
-	{:else if !report}
-		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
-			<Icons.CircleSlash2 class="opacity-50" size="50" />
-			<div class="flex flex-col items-center justify-center">
-				<div class="text-muted-foreground">Report not found</div>
-				<div class="text-xs text-muted-foreground">The report you're looking for doesn't exist or couldn't be loaded</div>
+	<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+		<div class="flex gap-2">
+			<div class="mt-1"><SidebarTrigger /></div>
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
 			</div>
 		</div>
-	{:else}
-		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
-			<div class="flex gap-2">
-				<div class="mt-1"><SidebarTrigger /></div>
-				<div class="flex flex-col justify-center">
-					<h2 class="font-medium text-primary">{report?.name}</h2>
-					<div class="text-xs text-muted-foreground">{report?.description}</div>
+		<div class="flex items-center gap-2 self-end">
+			{#if saving}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<Icons.LoaderCircle class="animate-spin" size={12} />
+					Saving...
 				</div>
-			</div>
-			<div class="flex items-center gap-2 self-end">
-				{#if saving}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<Icons.LoaderCircle class="animate-spin" size={12} />
-						Saving...
-					</div>
-				{:else if editable}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
-						Layout editable
-					</div>
-				{:else}
-					<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
-						<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
-						Expand window to rearrange
-					</div>
-				{/if}
+			{:else if editable}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-green-500"></div>
+					Layout editable
+				</div>
+			{:else}
+				<div class="flex items-center gap-1.5 text-xs text-muted-foreground">
+					<div class="h-1.5 w-1.5 rounded-full bg-muted-foreground/40"></div>
+					Expand window to rearrange
+				</div>
+			{/if}
+			{#if canShare}
+				<Button
+					variant="outline"
+					class="h-7 px-3 text-xs font-normal"
+					Icon={sharing ? Icons.LoaderCircle : Icons.Share2}
+					disabled={sharing}
+					onclick={handleShare}
+				>
+					{sharing ? "Sharing..." : "Share"}
+				</Button>
+			{/if}
+			{#if report}
 				<CreateDetailViewButton
 					collectionName="reports_charts"
 					values={{ report_id: { id: reportId, name: report.name } }}
 					variant="default"
 					class="h-7 px-3 text-xs font-normal"
 					Icon={Icons.Plus}
-					onSuccessfullSave={async () => await loadCharts()}
+					onSuccessfullSave={async () => await body?.reload()}
 				>
 					Create chart
 				</CreateDetailViewButton>
-			</div>
-		</div>
-
-		<div class="charts-export-container overflow-auto p-2">
-			{#if charts.length === 0}
-				<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
-					<Icons.CircleSlash2 class="opacity-50" size="50" />
-					<div class="flex flex-col items-center justify-center">
-						<div>No charts available</div>
-						<div class="text-xs">Create a new chart to fill this report page</div>
-					</div>
-				</div>
-			{:else}
-				{#key charts}
-					<GridStackComponent bind:editable onLayoutChange={handleLayoutChange}>
-						{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
-							<div
-								class="grid-stack-item"
-								data-gs-id={chart.id}
-								{...getChartGridSize(chart)}
-							>
-								<div class="grid-stack-item-content">
-									<Chart
-										chartRecord={chart}
-										onChartDeleted={async () => await loadCharts()}
-										onChartEdited={async () => await loadCharts()}
-										onChartClick={handleChartClick}
-										{utils}
-										{...props}
-									/>
-								</div>
-							</div>
-						{/each}
-					</GridStackComponent>
-				{/key}
 			{/if}
 		</div>
-	{/if}
+	</div>
+
+	<div class="charts-export-container overflow-auto p-2">
+		<ReportBody
+			{reportId}
+			{utils}
+			editable
+			onLayoutChange={handleLayoutChange}
+			onChartClick={handleChartClick}
+			onReportLoaded={handleReportLoaded}
+			onReady={handleReady}
+		/>
+	</div>
 </div>
 
 <style>

package/dist/lib/components/pages/reports/index.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import type { ExtensionProps } from "@lobb-js/studio";
-	import type { Location } from "@wjfe/n-savant";
 	import Report from "./components/report.svelte";
 
 	const { utils, ...props }: ExtensionProps = $props();
 
 	let extensionPagePath = "/studio/extensions/reports/analytics";
-	let reportId: string | null = $derived(getReportID(utils.location));
+	let reportId: string | null = $derived(utils.page.url.pathname.split("/")[5] ?? null);
 	let sideBarData: any = $state(null);
 	const {
 		CreateDetailViewButton,
@@ -34,9 +33,7 @@
 				name: report.name,
 				icon: icons.FileChartColumn,
 				onclick: () => {
-					utils.location.navigate(
-						`${extensionPagePath}/${report.id}`,
-					);
+					utils.goto(`${extensionPagePath}/${report.id}`);
 				},
 				meta: {
 					reportId: report.id,
@@ -57,9 +54,6 @@
 		}
 	}
 
-	function getReportID(location: Location) {
-		return location.url.pathname.split("/")[5];
-	}
 </script>
 
 <Sidebar title="Reports" data={sideBarData}>
@@ -129,7 +123,7 @@
 					class="h-7 px-3 text-xs font-normal"
 					Icon={icons.Plus}
 					onSuccessfullSave={async (record: any) =>
-						utils.location.navigate(`?report=${record.id}`)}
+						utils.goto(`?report=${record.id}`)}
 				>
 					Create a report
 				</CreateDetailViewButton>

package/dist/lib/components/pages/shared_report/index.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import ReportBody from "../../reportBody.svelte";
+
+	const { utils }: { utils: any } = $props();
+	const { Icons } = utils.components;
+
+	// Pull share_token and report_id from the URL. The token is what
+	// authorises every request below — we install it as the LobbClient's
+	// Authorization header so the existing CRUD helpers work transparently.
+	// The report_id is what we render. Both come from the link minted by
+	// the "Share" button on the gated report view.
+	const params = new URLSearchParams(window.location.search);
+	const shareToken = params.get("share_token");
+	const reportId = params.get("report_id");
+
+	let ready = $state(false);
+	let report: any = $state(null);
+	let error: string | null = $state(null);
+
+	function handleReportLoaded(r: any) {
+		report = r;
+		if (!r) error = "The shared report could not be found.";
+	}
+
+	onMount(async () => {
+		if (!shareToken || !reportId) {
+			error = "This share link is missing required parameters.";
+			ready = true;
+			return;
+		}
+
+		// Swap the LobbClient's bearer to the share token for the duration
+		// of this page. The studio shell already short-circuited the auth
+		// gate for /studio/public/*, so there's no session header to clobber.
+		utils.lobb.setHeaders({ Authorization: `Bearer ${shareToken}` });
+
+		// Populate ctx.extensions.auth.permissions from the share's snapshot
+		// so client-side gates (auth.canAccess) match the server's enforcement.
+		// Reuses the same /me endpoint logged-in users hit — for a share
+		// bearer, meAlias short-circuits with { data: null, permissions }.
+		try {
+			const meRes = await utils.lobb.findOne("auth_users", "me");
+			if (meRes.ok) {
+				const meBody = await meRes.json();
+				if (!utils.ctx.extensions.auth) utils.ctx.extensions.auth = {};
+				utils.ctx.extensions.auth.permissions = meBody.permissions;
+				utils.ctx.extensions.auth.user = meBody.data;
+			}
+		} catch {
+			// Soft-fail — the page will still render, UI gates just default to
+			// hidden, and the server-side enforcement is the real safety net.
+		}
+
+		ready = true;
+	});
+</script>
+
+<div class="shared-report-layout">
+	{#if !ready}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
+			<div class="flex flex-col items-center justify-center">
+				<div class="text-muted-foreground">Loading the shared report...</div>
+			</div>
+		</div>
+	{:else if error}
+		<div class="flex h-full w-full flex-col items-center justify-center gap-4" style="grid-row: 1 / -1">
+			<Icons.CircleSlash2 class="opacity-50" size="50" />
+			<div class="flex flex-col items-center justify-center">
+				<div class="text-muted-foreground">Unavailable</div>
+				<div class="text-xs text-muted-foreground">{error}</div>
+			</div>
+		</div>
+	{:else}
+		<div class="flex shrink-0 items-center justify-between gap-2 border-b bg-background p-2">
+			<div class="flex flex-col justify-center">
+				<h2 class="font-medium text-primary">{report?.name ?? ""}</h2>
+				<div class="text-xs text-muted-foreground">{report?.description ?? ""}</div>
+			</div>
+			<div class="text-xs text-muted-foreground">Shared view</div>
+		</div>
+
+		<div class="bg-muted overflow-auto p-2">
+			<ReportBody reportId={reportId ?? ""} {utils} onReportLoaded={handleReportLoaded} />
+		</div>
+	{/if}
+
+	<!-- Subtle attribution on shared / public pages only. Sits over the
+		 charts area in the bottom-right; the gated dashboard never renders
+		 this component so customers' main UI stays unbranded. -->
+	<a
+		href="https://lobb.app"
+		target="_blank"
+		rel="noopener"
+		class="fixed bottom-2 right-6 text-[10px] text-muted-foreground/60 hover:text-muted-foreground"
+	>
+		Made with Lobb
+	</a>
+</div>
+
+<style>
+	.shared-report-layout {
+		display: grid;
+		grid-template-rows: auto 1fr;
+		width: 100%;
+		height: 100%;
+	}
+</style>

package/dist/lib/components/pages/shared_report/index.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponentTyped<IndexProps, IndexEvents, IndexSlots> {
+}
+export {};

package/dist/lib/components/reportBody.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { ExtensionProps } from "@lobb-js/studio";
+	import GridStackComponent from "./gridStack.svelte";
+	import Chart from "./pages/reports/components/chart.svelte";
+
+	interface Props extends ExtensionProps {
+		reportId: string | number;
+		editable?: boolean;
+		onLayoutChange?: (changes: any[]) => void;
+		onChartClick?: (event: any, elements: any[], chart: any) => void;
+		onReportLoaded?: (report: any) => void;
+		onReady?: (api: { reload: () => Promise<void> }) => void;
+	}
+
+	const {
+		reportId,
+		editable = false,
+		onLayoutChange,
+		onChartClick,
+		onReportLoaded,
+		onReady,
+		...props
+	}: Props = $props();
+
+	const utils = props.utils;
+
+	const { Icons } = utils.components;
+
+	let report: any = $state(null);
+	let charts: any[] = $state([]);
+	let loading = $state(true);
+
+	async function loadCharts({ showLoading = true } = {}) {
+		if (showLoading) loading = true;
+		const reportsRes = await utils.lobb.findAll("reports_dashboards", {
+			sort: "id",
+			filter: { id: reportId },
+		});
+		report = (await reportsRes.json()).data[0];
+		if (onReportLoaded) onReportLoaded(report);
+		if (!report) {
+			if (showLoading) loading = false;
+			return;
+		}
+
+		const chartsRes = await utils.lobb.findAll("reports_charts", {
+			filter: { report_id: report.id },
+		});
+		charts = (await chartsRes.json()).data;
+		if (showLoading) loading = false;
+	}
+
+	function getChartGridSize(chart: any): Record<string, unknown> {
+		return {
+			"gs-w": chart.col_span ?? 6,
+			"gs-h": chart.row_span ?? 2,
+			"gs-auto-position": "true",
+		};
+	}
+
+	onMount(async () => {
+		await loadCharts();
+		if (onReady) onReady({ reload: () => loadCharts() });
+	});
+</script>
+
+{#if loading}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.LoaderCircle class="animate-spin opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Loading the dashboard...</div>
+			<div class="text-xs text-muted-foreground">Loading all the charts of the selected dashboard</div>
+		</div>
+	</div>
+{:else if !report}
+	<div class="flex h-full w-full flex-col items-center justify-center gap-4">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div class="text-muted-foreground">Report not found</div>
+			<div class="text-xs text-muted-foreground">The report you're looking for doesn't exist or couldn't be loaded</div>
+		</div>
+	</div>
+{:else if charts.length === 0}
+	<div class="flex w-full flex-col items-center justify-center gap-4 p-10 text-muted-foreground">
+		<Icons.CircleSlash2 class="opacity-50" size="50" />
+		<div class="flex flex-col items-center justify-center">
+			<div>No charts available</div>
+			<div class="text-xs">Create a new chart to fill this report page</div>
+		</div>
+	</div>
+{:else}
+	{#key charts}
+		<GridStackComponent {editable} {onLayoutChange}>
+			{#each [...charts].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0)) as chart (chart.id)}
+				<div
+					class="grid-stack-item"
+					data-gs-id={chart.id}
+					{...getChartGridSize(chart)}
+				>
+					<div class="grid-stack-item-content">
+						<Chart
+							chartRecord={chart}
+							onChartDeleted={async () => await loadCharts()}
+							onChartEdited={async () => await loadCharts()}
+							{onChartClick}
+							{utils}
+						/>
+					</div>
+				</div>
+			{/each}
+		</GridStackComponent>
+	{/key}
+{/if}

package/dist/lib/components/reportBody.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ReportBodyProps = typeof __propDef.props;
+export type ReportBodyEvents = typeof __propDef.events;
+export type ReportBodySlots = typeof __propDef.slots;
+export default class ReportBody extends SvelteComponentTyped<ReportBodyProps, ReportBodyEvents, ReportBodySlots> {
+}
+export {};