first commit

2026-04-01 10:44:22 +01:00
commit 43fcb9a131
1789 changed files with 395041 additions and 0 deletions
--- a/packages/admin/src/components/SandboxedPluginPage.tsx
+++ b/packages/admin/src/components/SandboxedPluginPage.tsx
@@ -0,0 +1,115 @@
+/**
+ * SandboxedPluginPage
+ *
+ * Renders a plugin's admin page using Block Kit. Sends page_load/block_action/form_submit
+ * interactions to the plugin's admin route and renders the returned blocks.
+ */
+
+import { CircleNotch, WarningCircle } from "@phosphor-icons/react";
+import { BlockRenderer } from "@emdashcms/blocks";
+import type { Block, BlockInteraction, BlockResponse } from "@emdashcms/blocks";
+import { useCallback, useEffect, useState } from "react";
+
+import { apiFetch, API_BASE } from "../lib/api/client.js";
+
+interface SandboxedPluginPageProps {
+	pluginId: string;
+	page: string;
+}
+
+export function SandboxedPluginPage({ pluginId, page }: SandboxedPluginPageProps) {
+	const [blocks, setBlocks] = useState<Block[]>([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [toast, setToast] = useState<BlockResponse["toast"] | null>(null);
+
+	// Send an interaction to the plugin admin route
+	const sendInteraction = useCallback(
+		async (interaction: BlockInteraction) => {
+			try {
+				const response = await apiFetch(`${API_BASE}/plugins/${pluginId}/admin`, {
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify(interaction),
+				});
+
+				if (!response.ok) {
+					const text = await response.text();
+					setError(`Plugin responded with ${response.status}: ${text}`);
+					return;
+				}
+
+				const body = (await response.json()) as { data: BlockResponse };
+				const data = body.data;
+				setBlocks(data.blocks);
+				setError(null);
+
+				if (data.toast) {
+					setToast(data.toast);
+					setTimeout(setToast, 4000, null);
+				}
+			} catch (err) {
+				setError(err instanceof Error ? err.message : "Failed to communicate with plugin");
+			}
+		},
+		[pluginId],
+	);
+
+	// Initial page load
+	useEffect(() => {
+		setLoading(true);
+		setError(null);
+		void sendInteraction({ type: "page_load", page }).finally(() => setLoading(false));
+	}, [sendInteraction, page]);
+
+	// Handle block actions
+	const handleAction = useCallback(
+		(interaction: BlockInteraction) => {
+			void sendInteraction(interaction);
+		},
+		[sendInteraction],
+	);
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-16">
+				<CircleNotch className="h-6 w-6 animate-spin text-kumo-subtle" />
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="rounded-lg border border-kumo-danger/50 bg-kumo-danger/5 p-6">
+				<div className="flex items-start gap-3">
+					<WarningCircle className="h-5 w-5 shrink-0 text-kumo-danger" />
+					<div>
+						<h3 className="font-semibold text-kumo-danger">Plugin Error</h3>
+						<p className="mt-1 text-sm text-kumo-subtle">{error}</p>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="relative">
+			{/* Toast notification */}
+			{toast && (
+				<div
+					className={`fixed right-4 top-4 z-50 rounded-lg border px-4 py-3 text-sm shadow-lg ${
+						toast.type === "success"
+							? "border-green-200 bg-green-50 text-green-800"
+							: toast.type === "error"
+								? "border-red-200 bg-red-50 text-red-800"
+								: "border-blue-200 bg-blue-50 text-blue-800"
+					}`}
+				>
+					{toast.message}
+				</div>
+			)}
+
+			<BlockRenderer blocks={blocks} onAction={handleAction} />
+		</div>
+	);
+}