@backmatter/studio 0.0.1

package/dist/styles.js

@@ -0,0 +1 @@
+

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@backmatter/studio",
+  "version": "0.0.1",
+  "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MRued/backmatter.git",
+    "directory": "packages/studio"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "source": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./dashboard": {
+      "types": "./src/dashboard.ts",
+      "source": "./src/dashboard.ts",
+      "default": "./dist/dashboard.js"
+    },
+    "./define": {
+      "types": "./src/define.ts",
+      "source": "./src/define.ts",
+      "default": "./dist/define.js"
+    },
+    "./styles": "./src/styles.ts",
+    "./studio.css": "./dist/studio.css",
+    "./prose-ui-node-shim": "./prose-ui-node-shim.ts",
+    "./package.json": "./package.json",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "src",
+    "dist",
+    "prose-ui-node-shim.ts",
+    "prose-node-shims",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@ai-sdk/react": "^4.0.100",
+    "@backmatter/core": "^0.0.20",
+    "@base-ui/react": "^1.6.0",
+    "@dnd-kit/abstract": "^0.5.0",
+    "@dnd-kit/react": "^0.5.0",
+    "@fontsource/geist-mono": "^5.3.0",
+    "@fontsource/geist-sans": "^5.3.0",
+    "@mdx-js/mdx": "^3.1.1",
+    "@prose-ui/core": "^2.0.8",
+    "@prose-ui/react": "^2.0.8",
+    "@prose-ui/style": "^2.0.8",
+    "@stylexjs/stylex": "^0.19.0",
+    "@thesvg/react": "^3.3.7",
+    "ai": "^7.0.97",
+    "better-auth": "^1.7.3",
+    "loading-dev": "^0.3.4",
+    "react-markdown": "^10.1.0",
+    "react-medium-image-zoom": "^5.4.9",
+    "react-router": "^8.3.0",
+    "remark-gfm": "^4.0.1",
+    "remark-mdx": "^3.1.1",
+    "remark-parse": "^11.0.0",
+    "remark-stringify": "^11.0.0",
+    "unified": "^11.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "happy-dom": "^20.14.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@stylexjs/unplugin": "^0.19.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "vite": "^6.0.0"
+  }
+}

package/prose-node-shims/fs.ts

@@ -0,0 +1,6 @@
+// packages/web/prose-node-shims/fs.ts
+function existsSync(_file: string) {
+  return false;
+}
+
+export default { existsSync };

package/prose-node-shims/path.ts

@@ -0,0 +1,16 @@
+// packages/web/prose-node-shims/path.ts
+function join(...parts: string[]) {
+  return parts
+    .filter((part) => part.length > 0)
+    .join("/")
+    .replace(/\/{2,}/g, "/");
+}
+
+function extname(file: string) {
+  const base = file.split(/[\\/]/).pop() ?? "";
+  const dot = base.lastIndexOf(".");
+  if (dot <= 0) return "";
+  return base.slice(dot);
+}
+
+export default { join, extname };

package/prose-node-shims/sharp.ts

@@ -0,0 +1,4 @@
+// packages/web/prose-node-shims/sharp.ts
+export default function sharp(_input?: unknown) {
+  throw new Error("sharp is unavailable in the editor preview");
+}

package/prose-ui-node-shim.ts

@@ -0,0 +1,26 @@
+// packages/studio/prose-ui-node-shim.ts
+import path from "node:path";
+import type { Plugin } from "vite";
+
+const shims = path.resolve(import.meta.dirname, "prose-node-shims");
+
+/**
+ * `@prose-ui/core`'s image plugin imports `fs`, `path`, and `sharp` so it can
+ * measure local files. The editor preview only has remote URLs, so those
+ * imports are stubbed in the browser bundle.
+ */
+export function proseUiNodeShim(): Plugin {
+  return {
+    name: "prose-ui-node-shim",
+    enforce: "pre",
+    resolveId(source, importer) {
+      if (!importer?.includes(`${path.sep}@prose-ui${path.sep}core${path.sep}`)) {
+        return null;
+      }
+      if (source === "sharp" || source === "fs" || source === "path") {
+        return path.join(shims, `${source}.ts`);
+      }
+      return null;
+    },
+  };
+}

package/src/App.tsx

@@ -0,0 +1,173 @@
+// packages/studio/src/App.tsx
+import { lazy, Suspense, useEffect, useState } from "react";
+import {
+  BrowserRouter,
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+} from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { fetchMe } from "./api";
+import { authClient } from "./auth-client";
+import { forgetLastUser, readLastUser, rememberLastUser } from "./last-user";
+import { Shell } from "./components/Shell";
+import { LoginPage } from "./pages/LoginPage";
+import { ResumeHome } from "./pages/ResumeHome";
+import { WorkspacesPage } from "./pages/WorkspacesPage";
+import { NewWorkspacePage } from "./pages/NewWorkspacePage";
+import { AcceptInvitePage } from "./pages/AcceptInvitePage";
+import { LegacyWorkspaceRedirect } from "./pages/LegacyWorkspaceRedirect";
+import { UserSettingsPage } from "./pages/UserSettingsPage";
+import { BootstrapSplash } from "./replica/BootstrapSplash";
+import { ReplicaGate, ReplicaProvider } from "./replica/ReplicaProvider";
+import { replicaStore } from "./replica/instance";
+import { readLastWorkspace } from "./last-workspace";
+import { EnterPage } from "./pages/EnterPage";
+import { workspaceRoutes } from "./WorkspaceRoutes";
+import { cmsWorkspaceSlug } from "./workspace-path";
+import { ThemeProvider } from "./theme/ThemeProvider";
+import { Text } from "./ui/Text";
+import { space } from "./styles/tokens.stylex";
+import { isStudioDev } from "./studio-config";
+
+const UiKitPage = isStudioDev()
+  ? lazy(() =>
+      import("./pages/UiKitPage").then((mod) => ({ default: mod.UiKitPage })),
+    )
+  : null;
+
+export function isUiKitPath(pathname: string) {
+  return isStudioDev() && pathname.replace(/\/$/, "") === "/__ui";
+}
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <BrowserRouter>
+        <AppInner />
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+}
+
+function AppInner() {
+  const location = useLocation();
+  const [session, setSession] = useState<
+    "loading" | { user: { id: string; email: string } } | null
+  >(() => {
+    const lastUser = readLastUser();
+    return lastUser ? { user: lastUser } : "loading";
+  });
+
+  useEffect(() => {
+    void fetchMe()
+      .then((me) => {
+        if (!me?.user) {
+          forgetLastUser();
+          void replicaStore.wipe();
+          setSession(null);
+          return;
+        }
+        rememberLastUser(me.user);
+        setSession({ user: { id: me.user.id, email: me.user.email } });
+        if (replicaStore.getState().sessionUserId !== me.user.id) {
+          const slug = cmsWorkspaceSlug(window.location.pathname);
+          void replicaStore.hydrate(
+            me.user.id,
+            slug ?? readLastWorkspace(me.user.id),
+          );
+        }
+      })
+      .catch(() => {
+        forgetLastUser();
+        void replicaStore.wipe();
+        setSession(null);
+      });
+  }, []);
+
+  if (UiKitPage && isUiKitPath(location.pathname)) {
+    return (
+      <Suspense
+        fallback={
+          <div {...stylex.props(styles.pad)}>
+            <Text tone="muted">Loading kit…</Text>
+          </div>
+        }
+      >
+        <UiKitPage />
+      </Suspense>
+    );
+  }
+
+  if (session === "loading") {
+    return <BootstrapSplash />;
+  }
+
+  if (!session) {
+    return <LoginPage />;
+  }
+
+  if (location.pathname.replace(/\/$/, "") === "/enter") {
+    return <EnterPage userId={session.user.id} />;
+  }
+
+  return (
+    <ReplicaProvider user={session.user}>
+      <ReplicaGate>
+        <Shell
+          userId={session.user.id}
+          email={session.user.email}
+          onLogout={() => {
+            forgetLastUser();
+            void replicaStore.wipe();
+            void authClient()
+              .signOut()
+              .then(() => {
+                setSession(null);
+              })
+              .catch(() => {
+                setSession(null);
+              });
+          }}
+        >
+          <Routes>
+            <Route path="/" element={<ResumeHome />} />
+            <Route path="/workspaces" element={<WorkspacesPage />} />
+            <Route path="/workspaces/new" element={<NewWorkspacePage />} />
+            <Route path="/invite" element={<AcceptInvitePage />} />
+            <Route path="/account" element={<UserSettingsPage />} />
+            <Route
+              path="/workspaces/:workspaceId/*"
+              element={<LegacyWorkspaceRedirect />}
+            />
+            {workspaceRoutes()}
+            {UiKitPage ? (
+              <Route
+                path="/__ui"
+                element={
+                  <Suspense
+                    fallback={
+                      <div {...stylex.props(styles.pad)}>
+                        <Text tone="muted">Loading kit…</Text>
+                      </div>
+                    }
+                  >
+                    <UiKitPage />
+                  </Suspense>
+                }
+              />
+            ) : null}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Shell>
+      </ReplicaGate>
+    </ReplicaProvider>
+  );
+}
+
+const styles = stylex.create({
+  pad: {
+    padding: space.xxl,
+  },
+});

package/src/WorkspaceRoutes.tsx

@@ -0,0 +1,38 @@
+// packages/studio/src/WorkspaceRoutes.tsx
+// The route tree of one workspace. The dashboard mounts it under `/:slug`;
+// a site Studio mounts the same tree under its base path.
+import { Route } from "react-router";
+import { WorkspaceLayout } from "./pages/WorkspaceLayout";
+import { WorkspaceHomeRedirect } from "./pages/WorkspaceHomeRedirect";
+import { TypeDocsPage } from "./pages/TypeDocsPage";
+import { SettingsGeneralPage } from "./pages/SettingsGeneralPage";
+import { SettingsGithubPage } from "./pages/SettingsGithubPage";
+import { SettingsIndexRedirect, SettingsLayout } from "./pages/SettingsLayout";
+import { SettingsSchemaPage } from "./pages/SettingsSchemaPage";
+import { SettingsMcpPage } from "./pages/SettingsMcpPage";
+import { SettingsUsersPage } from "./pages/SettingsUsersPage";
+import { GithubConnectPage } from "./pages/GithubConnectPage";
+import { DocEditorPage } from "./pages/DocEditorPage";
+
+/**
+ * Returns `<Route>` elements. Spread the result inside a `<Routes>`; react-router
+ * needs the routes as direct children, so this is a function, not a component.
+ */
+export function workspaceRoutes() {
+  return (
+    <Route path="/:workspaceSlug" element={<WorkspaceLayout />}>
+      <Route index element={<WorkspaceHomeRedirect />} />
+      <Route path="content/:type" element={<TypeDocsPage />} />
+      <Route element={<SettingsLayout />}>
+        <Route path="settings" element={<SettingsIndexRedirect />} />
+        <Route path="settings/general" element={<SettingsGeneralPage />} />
+        <Route path="settings/github" element={<SettingsGithubPage />} />
+        <Route path="settings/schema" element={<SettingsSchemaPage />} />
+        <Route path="settings/mcp" element={<SettingsMcpPage />} />
+        <Route path="settings/users" element={<SettingsUsersPage />} />
+        <Route path="github" element={<GithubConnectPage />} />
+      </Route>
+      <Route path="content/:type/:docSlug" element={<DocEditorPage />} />
+    </Route>
+  );
+}