@fuma-content/studio 0.1.0

package/dist/src/hooks/use-upload-file.mjs

@@ -0,0 +1,73 @@
+import * as React$1 from "react";
+import { toast } from "sonner";
+import { generateReactHelpers } from "@uploadthing/react";
+import { z } from "zod";
+
+//#region src/hooks/use-upload-file.ts
+function useUploadFile({ onUploadComplete, onUploadError, ...props } = {}) {
+	const [uploadedFile, setUploadedFile] = React$1.useState();
+	const [uploadingFile, setUploadingFile] = React$1.useState();
+	const [progress, setProgress] = React$1.useState(0);
+	const [isUploading, setIsUploading] = React$1.useState(false);
+	async function uploadThing(file) {
+		setIsUploading(true);
+		setUploadingFile(file);
+		try {
+			const res = await uploadFiles("editorUploader", {
+				...props,
+				files: [file],
+				onUploadProgress: ({ progress: progress$1 }) => {
+					setProgress(Math.min(progress$1, 100));
+				}
+			});
+			setUploadedFile(res[0]);
+			onUploadComplete?.(res[0]);
+			return uploadedFile;
+		} catch (error) {
+			const errorMessage = getErrorMessage(error);
+			const message = errorMessage.length > 0 ? errorMessage : "Something went wrong, please try again later.";
+			toast.error(message);
+			onUploadError?.(error);
+			const mockUploadedFile = {
+				key: "mock-key-0",
+				appUrl: `https://mock-app-url.com/${file.name}`,
+				name: file.name,
+				size: file.size,
+				type: file.type,
+				url: URL.createObjectURL(file)
+			};
+			let progress$1 = 0;
+			const simulateProgress = async () => {
+				while (progress$1 < 100) {
+					await new Promise((resolve) => setTimeout(resolve, 50));
+					progress$1 += 2;
+					setProgress(Math.min(progress$1, 100));
+				}
+			};
+			await simulateProgress();
+			setUploadedFile(mockUploadedFile);
+			return mockUploadedFile;
+		} finally {
+			setProgress(0);
+			setIsUploading(false);
+			setUploadingFile(void 0);
+		}
+	}
+	return {
+		isUploading,
+		progress,
+		uploadedFile,
+		uploadFile: uploadThing,
+		uploadingFile
+	};
+}
+const { uploadFiles, useUploadThing } = generateReactHelpers();
+function getErrorMessage(err) {
+	const unknownError = "Something went wrong, please try again later.";
+	if (err instanceof z.ZodError) return err.issues.map((issue) => issue.message).join("\n");
+	if (err instanceof Error) return err.message;
+	return unknownError;
+}
+
+//#endregion
+export { useUploadFile };

package/dist/src/lib/config.mjs

@@ -0,0 +1,38 @@
+import { Core } from "fuma-content";
+
+//#region src/lib/config.ts
+let core;
+async function getCore() {
+	core ??= (async () => {
+		const core$1 = new Core({
+			outDir: ".content",
+			configPath: process.env.STUDIO_CONFIG,
+			cwd: process.env.STUDIO_PARENT_DIR
+		});
+		await core$1.init({ config: await import("virtual:content.config") });
+		return core$1;
+	})();
+	return core;
+}
+async function requireCollection(collectionId, handlers) {
+	const collection = (await getCore()).getCollection(collectionId);
+	if (!collection) throw new Error(`Missing Collection ${collectionId}`);
+	if (hasHandler(collection, handlers)) return collection;
+	throw new Error(`Missing ${handlers.join(", ")} handlers for ${collectionId}`);
+}
+async function requireDocument(collectionId, documentId) {
+	const collection = await requireCollection(collectionId, ["studio"]);
+	const document = await collection.handlers.studio.getDocument(documentId);
+	if (!document) throw new Error(`Missing Document ${documentId}`);
+	return {
+		collection,
+		document
+	};
+}
+function hasHandler(collection, handlers) {
+	for (const handler of handlers) if (collection.handlers[handler] === void 0) return false;
+	return true;
+}
+
+//#endregion
+export { requireCollection, requireDocument };

package/dist/src/lib/data/store.d.mts

@@ -0,0 +1,15 @@
+import "@tanstack/query-db-collection";
+import "@tanstack/react-db";
+
+//#region src/lib/data/store.d.ts
+
+interface DocumentItem {
+  id: string;
+  collectionId: string;
+  name: string;
+  permissions: {
+    delete: boolean;
+  };
+}
+//#endregion
+export { DocumentItem };

package/dist/src/lib/lowlight.mjs

@@ -0,0 +1,7 @@
+import { all, createLowlight } from "lowlight";
+
+//#region src/lib/lowlight.ts
+const lowlight = createLowlight(all);
+
+//#endregion
+export { lowlight };

package/dist/src/lib/utils/deep-equal.mjs

@@ -0,0 +1,18 @@
+//#region src/lib/utils/deep-equal.ts
+function deepEqual(a, b) {
+	if (a === b) return true;
+	if (a == null || b == null) return false;
+	if (typeof a !== "object" || typeof b !== "object") return false;
+	if (Array.isArray(a) && Array.isArray(b)) {
+		if (a.length !== b.length) return false;
+		return a.every((item, index) => deepEqual(item, b[index]));
+	}
+	if (Array.isArray(a) || Array.isArray(b)) return false;
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	return keysA.every((key) => Object.prototype.hasOwnProperty.call(b, key) && deepEqual(a[key], b[key]));
+}
+
+//#endregion
+export { deepEqual };

package/dist/src/lib/utils/remove-undefined.mjs

@@ -0,0 +1,18 @@
+//#region src/lib/utils/remove-undefined.ts
+function removeUndefined(value, deep = false) {
+	const obj = value;
+	for (const key in obj) {
+		if (obj[key] === void 0) delete obj[key];
+		if (!deep) continue;
+		const entry = obj[key];
+		if (typeof entry === "object" && entry !== null) {
+			removeUndefined(entry, deep);
+			continue;
+		}
+		if (Array.isArray(entry)) for (const item of entry) removeUndefined(item, deep);
+	}
+	return value;
+}
+
+//#endregion
+export { removeUndefined };

package/dist/src/lib/utils.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };

package/dist/types.d.mts

@@ -0,0 +1,50 @@
+import { DocumentItem } from "./src/lib/data/store.mjs";
+import { Collection } from "fuma-content/collections";
+import { FC } from "react";
+
+//#region lib/types.d.ts
+type Awaitable<T> = T | Promise<T>;
+interface StudioDocument {
+  id: string;
+  name: string;
+}
+interface MDXStudioDocument extends StudioDocument {
+  type: "mdx";
+  filePath: string;
+}
+interface CreateDocumentDialogContext {
+  collectionId: string;
+  useDialog: () => {
+    open: boolean;
+    setOpen: (v: boolean) => void;
+    onCreate: (item: DocumentItem) => void;
+  };
+}
+interface ClientContext {
+  dialogs?: {
+    createDocument?: FC<CreateDocumentDialogContext>;
+  };
+}
+interface StudioHandler<Doc extends StudioDocument> {
+  init?: () => Awaitable<void>;
+  getDocuments: () => Awaitable<Doc[]>;
+  getDocument: (id: string) => Awaitable<Doc | undefined>;
+  pages?: {
+    edit?: FC<{
+      document: Doc;
+      collection: Collection;
+    }>;
+  };
+  /**
+   * the properties inside should be exported from a file with "use client".
+   */
+  client?: () => Awaitable<ClientContext>;
+  actions?: {
+    deleteDocument?: (options: {
+      collection: Collection;
+      document: Doc;
+    }) => Awaitable<void>;
+  };
+}
+//#endregion
+export { ClientContext, CreateDocumentDialogContext, MDXStudioDocument, StudioDocument, StudioHandler };

package/next.config.ts

@@ -0,0 +1,23 @@
+import type { NextConfig } from "next";
+import path from "node:path";
+
+const nextConfig: NextConfig = {
+  reactCompiler: true,
+  distDir: process.env.STUDIO_DIST
+    ? path.relative(process.cwd(), process.env.STUDIO_DIST)
+    : ".studio",
+  typescript: {
+    // ignore for performance
+    ignoreBuildErrors: true,
+    tsconfigPath: "tsconfig.build.json",
+  },
+  turbopack: {
+    resolveAlias: {
+      "virtual:content.config": process.env.STUDIO_CONFIG
+        ? path.relative(process.cwd(), process.env.STUDIO_CONFIG)
+        : "content.config.ts",
+    },
+  },
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,131 @@
+{
+  "name": "@fuma-content/studio",
+  "version": "0.1.0",
+  "description": "The studio integration of Fuma Content",
+  "keywords": [
+    "Contentlayer",
+    "Docs"
+  ],
+  "homepage": "https://fuma-content.vercel.app",
+  "license": "MIT",
+  "author": "Fuma Nama",
+  "repository": "github:fuma-nama/fuma-content",
+  "bin": {
+    "content-studio": "./dist/bin.mjs"
+  },
+  "files": [
+    "dist",
+    "next.config.ts",
+    "postcss.config.mjs",
+    "src",
+    "tsconfig.build.json",
+    "tsconfig.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@ai-sdk/gateway": "^3.0.10",
+    "@ai-sdk/react": "3.0.21",
+    "@base-ui/react": "^1.0.0",
+    "@base-ui/utils": "^0.2.3",
+    "@clack/prompts": "^1.0.0-alpha.9",
+    "@emoji-mart/data": "1.2.1",
+    "@monaco-editor/react": "^4.7.0",
+    "@platejs/ai": "^52.0.16",
+    "@platejs/autoformat": "^52.0.11",
+    "@platejs/basic-nodes": "^52.0.11",
+    "@platejs/basic-styles": "^52.0.11",
+    "@platejs/callout": "^52.0.11",
+    "@platejs/caption": "^52.0.11",
+    "@platejs/code-block": "^52.0.11",
+    "@platejs/combobox": "^52.0.15",
+    "@platejs/comment": "^52.0.11",
+    "@platejs/date": "^52.0.11",
+    "@platejs/dnd": "^52.0.11",
+    "@platejs/emoji": "^52.0.15",
+    "@platejs/floating": "^52.0.11",
+    "@platejs/indent": "^52.0.11",
+    "@platejs/layout": "^52.0.11",
+    "@platejs/link": "^52.0.11",
+    "@platejs/list": "^52.0.11",
+    "@platejs/markdown": "^52.0.11",
+    "@platejs/math": "^52.0.11",
+    "@platejs/media": "^52.0.11",
+    "@platejs/resizable": "^52.0.11",
+    "@platejs/selection": "^52.0.16",
+    "@platejs/slash-command": "^52.0.15",
+    "@platejs/suggestion": "^52.0.11",
+    "@platejs/table": "^52.0.11",
+    "@standard-schema/spec": "^1.1.0",
+    "@tanstack/query-db-collection": "^1.0.13",
+    "@tanstack/react-db": "^0.1.61",
+    "@tanstack/react-query": "^5.90.16",
+    "@uploadthing/react": "7.3.3",
+    "ai": "6.0.21",
+    "ajv": "^8.17.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "commander": "^14.0.2",
+    "date-fns": "^4.1.0",
+    "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
+    "js-yaml": "^4.1.1",
+    "lodash.debounce": "^4.0.8",
+    "lowlight": "^3.3.0",
+    "lucide-react": "^0.562.0",
+    "next": "16.1.1",
+    "next-themes": "^0.4.6",
+    "open": "^11.0.0",
+    "platejs": "^52.0.15",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.3",
+    "react-day-picker": "^9.13.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.70.0",
+    "react-textarea-autosize": "^8.5.9",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tinyexec": "^1.0.2",
+    "uploadthing": "7.7.4",
+    "vaul": "^1.1.2",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "babel-plugin-react-compiler": "1.0.0",
+    "dedent": "^1.7.1",
+    "json-schema-typed": "^8.0.2",
+    "shadcn": "^3.6.3",
+    "tailwindcss": "^4",
+    "tsdown": "^0.18.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5",
+    "fuma-content": "^1.0.3"
+  },
+  "peerDependencies": {
+    "fuma-content": "^1.0.3"
+  },
+  "scripts": {
+    "dev": "tsdown --watch",
+    "dev:app": "next dev",
+    "build": "tsdown",
+    "preview:app": "next build && next start",
+    "types:check": "tsc --noEmit"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

package/src/app/(dashboard)/collection/[name]/[...slug]/page.client.tsx

@@ -0,0 +1,26 @@
+"use client";
+import { DocumentActionsDropdown } from "@/components/collection/document/actions";
+import { SiteHeader } from "@/components/site-header";
+import { documentCollection } from "@/lib/data/store";
+import { eq, and, useLiveQuery } from "@tanstack/react-db";
+import Link from "next/link";
+
+export function Header({ collectionId, documentId }: { collectionId: string; documentId: string }) {
+  const query = useLiveQuery((q) =>
+    q
+      .from({ doc: documentCollection })
+      .where((b) => and(eq(b.doc.id, documentId), eq(b.doc.collectionId, collectionId)))
+      .findOne(),
+  );
+  const doc = query.data;
+  if (!doc) return;
+
+  return (
+    <SiteHeader>
+      <Link href={`/collection/${collectionId}`} className="font-mono text-sm">
+        {collectionId}/{documentId}
+      </Link>
+      <DocumentActionsDropdown document={doc} />
+    </SiteHeader>
+  );
+}

package/src/app/(dashboard)/collection/[name]/[...slug]/page.tsx

@@ -0,0 +1,17 @@
+import { notFound } from "next/navigation";
+import { requireDocument } from "@/lib/config";
+import { Header } from "./page.client";
+
+export default async function Page({ params }: PageProps<"/collection/[name]/[...slug]">) {
+  const { name, slug } = await params;
+  const { collection, document } = await requireDocument(name, slug[0]).catch(() => notFound());
+
+  return (
+    <>
+      <Header collectionId={collection.name} documentId={document.id} />
+      <div className="flex flex-1 min-w-0 flex-col gap-2 p-2">
+        {await collection.handlers.studio.pages?.edit?.({ document, collection })}
+      </div>
+    </>
+  );
+}

package/src/app/(dashboard)/collection/[name]/page.client.tsx

@@ -0,0 +1,82 @@
+"use client";
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+import { SiteHeader } from "@/components/site-header";
+import { useLiveQuery, eq } from "@tanstack/react-db";
+import { collection, documentCollection } from "@/lib/data/store";
+import { useCreateDocumentDialog } from "@/components/collection/client";
+import { FilePlusIcon } from "lucide-react";
+import { buttonVariants } from "@/components/ui/button";
+import {
+  DocumentActionsContext,
+  DocumentActionsDropdown,
+} from "@/components/collection/document/actions";
+
+export default function Client({ collectionId }: { collectionId: string }) {
+  const { data: info } = useLiveQuery((q) =>
+    q
+      .from({ collection })
+      .where((b) => eq(b.collection.id, collectionId))
+      .findOne(),
+  );
+  const { data: documents } = useLiveQuery((q) =>
+    q
+      .from({ documentCollection })
+      .where((b) => eq(b.documentCollection.collectionId, collectionId)),
+  );
+  const createDoc = useCreateDocumentDialog(collectionId);
+  if (!info) return null;
+
+  return (
+    <>
+      <SiteHeader>
+        <h1 className="font-mono text-sm">{info.name}</h1>
+      </SiteHeader>
+      <div className="flex flex-1 min-w-0 flex-col gap-2 px-2 py-6">
+        <h1 className="mb-2 inline-flex items-center gap-2 font-mono font-semibold text-2xl">
+          {info.name}
+          <Badge className="text-sm empty:hidden">{info.badge}</Badge>
+        </h1>
+        <div className="mb-4 flex flex-row flex-wrap items-center gap-2">
+          <p className="font-medium text-muted-foreground text-sm">Implements</p>
+          {info.handlers &&
+            Object.keys(info.handlers).map((handler) => (
+              <Badge key={handler} variant="outline">
+                {handler}
+              </Badge>
+            ))}
+        </div>
+        {info.handlers && "studio" in info.handlers ? (
+          <div className="grid grid-cols-1 border rounded-lg bg-card text-card-foreground overflow-hidden">
+            <div className="flex items-center gap-2 bg-secondary ps-4 pe-2 py-2">
+              <p className="text-sm text-muted-foreground me-auto">{documents.length} Items</p>
+              {createDoc && (
+                <createDoc.component>
+                  <createDoc.trigger className={buttonVariants()}>
+                    <FilePlusIcon />
+                    Create Document
+                  </createDoc.trigger>
+                </createDoc.component>
+              )}
+            </div>
+
+            {documents.map((doc) => (
+              <DocumentActionsContext key={doc.id} document={doc}>
+                <div className="flex text-sm font-medium hover:bg-accent hover:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground">
+                  <Link href={`/collection/${info.name}/${doc.id}`} className="px-4 py-2 flex-1">
+                    {doc.name}
+                  </Link>
+                  <DocumentActionsDropdown document={doc} />
+                </div>
+              </DocumentActionsContext>
+            ))}
+          </div>
+        ) : (
+          <div className="bg-muted text-sm text-muted-foreground p-4 rounded-lg border text-center">
+            This collection doesn't have studio integration.
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/src/app/(dashboard)/collection/[name]/page.tsx

@@ -0,0 +1,11 @@
+import { notFound } from "next/navigation";
+import { getCore } from "@/lib/config";
+import Client from "./page.client";
+
+export default async function Page({ params }: PageProps<"/collection/[name]">) {
+  const core = await getCore();
+  const collection = core.getCollection((await params).name);
+  if (!collection) notFound();
+
+  return <Client collectionId={collection.name} />;
+}

package/src/app/(dashboard)/layout.tsx

@@ -0,0 +1,34 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import { ClientContextProvider } from "@/components/collection/context";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
+import { getCore } from "@/lib/config";
+import { DataBoundary } from "@/lib/data/boundary";
+import { ClientContext } from "lib";
+import type { ReactNode } from "react";
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  const core = await getCore();
+  const collections = core.getCollections(true);
+  const clientContexts = new Map<string, ClientContext>();
+  for (const collection of collections) {
+    const { studio } = collection.handlers;
+    if (studio && studio.client) {
+      clientContexts.set(collection.name, await studio.client());
+    }
+  }
+
+  return (
+    <ClientContextProvider contexts={clientContexts}>
+      <DataBoundary>
+        <SidebarProvider>
+          <AppSidebar />
+          <SidebarInset>
+            {children}
+            <Toaster />
+          </SidebarInset>
+        </SidebarProvider>
+      </DataBoundary>
+    </ClientContextProvider>
+  );
+}

package/src/app/(dashboard)/page.tsx

@@ -0,0 +1,38 @@
+"use client";
+import { CollectionActionsContext } from "@/components/collection/actions";
+import { SiteHeader } from "@/components/site-header";
+import { collection } from "@/lib/data/store";
+import { useLiveQuery } from "@tanstack/react-db";
+import { AppWindowIcon } from "lucide-react";
+import Link from "next/link";
+
+export default function Page() {
+  const query = useLiveQuery((q) => q.from({ collection }));
+  return (
+    <>
+      <SiteHeader />
+      <div className="flex-1 px-2 py-6">
+        <h1 className="inline-flex items-center gap-2 text-xl font-semibold mb-6">
+          <AppWindowIcon />
+          Collections
+        </h1>
+        <div className="grid grid-cols-1 border rounded-lg bg-card text-card-foreground overflow-hidden">
+          <div className="flex items-center gap-2 bg-secondary ps-4 pe-2 py-2">
+            <p className="text-sm text-muted-foreground">Collections</p>
+          </div>
+
+          {query.data.map((collection) => (
+            <CollectionActionsContext key={collection.id} collection={collection}>
+              <Link
+                href={`/collection/${collection.id}`}
+                className="text-sm font-medium px-4 py-2 hover:bg-accent hover:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground"
+              >
+                {collection.name}
+              </Link>
+            </CollectionActionsContext>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}