@backmatter/studio 0.0.1

package/src/pages/EmbedChatPage.tsx

@@ -0,0 +1,110 @@
+// packages/studio/src/pages/EmbedChatPage.tsx
+// The CMS chat, alone, so a site can frame it. The parent posts the open document.
+import { useEffect, useRef } from "react";
+import { ChatPanel } from "../chat/ChatPanel";
+import { ChatProvider, ChatSessionScope, useChatUI } from "../chat/ChatProvider";
+import { isPanelVisible } from "../chat/chat-state";
+import {
+  DOC_CHANGED_EVENT,
+  EditorFocusProvider,
+  useEditorFocus,
+  type DocChangedDetail,
+  type DocRef,
+} from "../chrome/EditorFocusContext";
+import { installParentChatHotkey } from "../chrome/hotkeys";
+import { TooltipProvider } from "../ui/Tooltip";
+
+export function EmbedChatPage({ workspaceId }: { workspaceId: string }) {
+  useEffect(() => installParentChatHotkey(), []);
+  return (
+    <TooltipProvider>
+      <EditorFocusProvider>
+        <ChatProvider workspaceId={workspaceId} startOpen>
+          <ChatSessionScope>
+            <FocusBridge />
+            <ChatVisibilityBridge />
+            <ChatPanel fill />
+          </ChatSessionScope>
+        </ChatProvider>
+      </EditorFocusProvider>
+    </TooltipProvider>
+  );
+}
+
+function parentOrigin(): string {
+  if (!document.referrer) return "";
+  try {
+    return new URL(document.referrer).origin;
+  } catch {
+    return "";
+  }
+}
+
+function FocusBridge() {
+  const { setFocus } = useEditorFocus();
+
+  useEffect(() => {
+    const origin = parentOrigin();
+    function onMessage(event: MessageEvent) {
+      if (!origin || event.origin !== origin) return;
+      const data = event.data as { type?: string; doc?: Partial<DocRef> };
+      if (data?.type !== "backmatter:focus") return;
+      const doc = data.doc;
+      if (!doc?.locale || !doc.type || !doc.slug) return;
+      setFocus({
+        docRef: { locale: doc.locale, type: doc.type, slug: doc.slug },
+        frontmatter: {},
+        body: "",
+        selection: null,
+      });
+    }
+    window.addEventListener("message", onMessage);
+    if (origin) window.parent.postMessage({ type: "backmatter:chat-ready" }, origin);
+    return () => window.removeEventListener("message", onMessage);
+  }, [setFocus]);
+
+  useEffect(() => {
+    const origin = parentOrigin();
+    function onDoc(event: Event) {
+      const detail = (event as CustomEvent<DocChangedDetail>).detail;
+      if (!origin || !detail?.docRef) return;
+      window.parent.postMessage({ type: "backmatter:doc-changed", doc: detail.docRef }, origin);
+    }
+    window.addEventListener(DOC_CHANGED_EVENT, onDoc);
+    return () => window.removeEventListener(DOC_CHANGED_EVENT, onDoc);
+  }, []);
+
+  return null;
+}
+
+function ChatVisibilityBridge() {
+  const { panel, dispatch } = useChatUI();
+  const mode = panel.mode;
+  const previous = useRef(mode);
+
+  useEffect(() => {
+    const origin = parentOrigin();
+    if (!origin || window.parent === window) return;
+    const wasVisible = isPanelVisible(previous.current);
+    previous.current = mode;
+    if (wasVisible && !isPanelVisible(mode)) {
+      window.parent.postMessage({ type: "backmatter:chat-closed" }, origin);
+    }
+  }, [mode]);
+
+  useEffect(() => {
+    const origin = parentOrigin();
+    function onMessage(event: MessageEvent) {
+      if (!origin || event.origin !== origin) return;
+      if (event.data?.type !== "backmatter:chat-open") return;
+      dispatch({ type: "open" });
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event("backmatter:chat-focus"));
+      });
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [dispatch]);
+
+  return null;
+}

package/src/pages/EmbedPublishPage.tsx

@@ -0,0 +1,259 @@
+// packages/studio/src/pages/EmbedPublishPage.tsx
+// The CMS commit flow, alone, so the on-site bar can frame it.
+import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { installParentChatHotkey } from "../chrome/hotkeys";
+import * as stylex from "@stylexjs/stylex";
+import {
+  commitWorkspace,
+  countConflicts,
+  defaultCommitMessage,
+  fetchGit,
+  fetchWorkspace,
+  notifyTreeChanged,
+  publishCommittedFiles,
+  resolveDoc,
+  type ApiError,
+  type GitChange,
+  type GitState,
+} from "../api";
+import { statusBarAction } from "../chrome/status-bar-action";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { Button } from "../ui/Button";
+import { Input } from "../ui/Input";
+import { Text } from "../ui/Text";
+import { canPublish } from "../workspace/permissions";
+
+const POLL_MS = 8000;
+
+function parentOrigin(): string {
+  if (!document.referrer) return "";
+  try {
+    return new URL(document.referrer).origin;
+  } catch {
+    return "";
+  }
+}
+
+function formatCommitError(err: unknown): string {
+  if (!(err instanceof Error)) return "Commit failed";
+  const apiErr = err as ApiError;
+  if (apiErr.code === "conflict") return "Resolve conflicts before committing";
+  if (apiErr.code === "nothing_to_commit") return "Nothing to commit";
+  if (apiErr.code === "validation") {
+    return err.message.replace(/^validation:\s*/, "Validation failed: ");
+  }
+  if (apiErr.code === "github_not_bound") return "Connect GitHub first";
+  return err.message;
+}
+
+function changeKey(doc: GitChange) {
+  return `${doc.locale}/${doc.type}/${doc.slug}`;
+}
+
+export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
+  useEffect(() => installParentChatHotkey(), []);
+  const [git, setGit] = useState<GitState | null>(null);
+  const [role, setRole] = useState("viewer");
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [committing, setCommitting] = useState(false);
+  const [resolvingKey, setResolvingKey] = useState<string | null>(null);
+
+  useEffect(() => {
+    let stop = false;
+    void fetchWorkspace(workspaceId)
+      .then((res) => {
+        if (!stop) setRole(res.workspace.role);
+      })
+      .catch(() => {
+        if (!stop) setError("Could not load this workspace");
+      });
+    return () => {
+      stop = true;
+    };
+  }, [workspaceId]);
+
+  useEffect(() => {
+    let stop = false;
+    const load = () => {
+      void fetchGit(workspaceId)
+        .then((next) => {
+          if (stop) return;
+          setGit(next);
+          const origin = parentOrigin();
+          if (!origin) return;
+          window.parent.postMessage(
+            {
+              type: "backmatter:git",
+              changeCount: next.changes.length,
+              conflictCount: countConflicts(next),
+            },
+            origin,
+          );
+        })
+        .catch((err: unknown) => {
+          if (!stop) setError(err instanceof Error ? err.message : "Git status failed");
+        });
+    };
+    load();
+    const timer = window.setInterval(load, POLL_MS);
+    return () => {
+      stop = true;
+      window.clearInterval(timer);
+    };
+  }, [workspaceId]);
+
+  const changes = git?.changes ?? [];
+  const conflictCount = countConflicts(git);
+  const action = statusBarAction(conflictCount, canPublish(role));
+  const conflicts = useMemo(
+    () => changes.filter((doc) => doc.status === "conflict"),
+    [changes],
+  );
+  const placeholder = defaultCommitMessage(changes);
+
+  async function onResolve(doc: GitChange, strategy: "mine" | "theirs") {
+    const key = `${changeKey(doc)}:${strategy}`;
+    setResolvingKey(key);
+    setError(null);
+    try {
+      await resolveDoc(workspaceId, doc.locale, doc.type, doc.slug, strategy);
+      notifyTreeChanged({
+        workspaceId,
+        locale: doc.locale,
+        type: doc.type,
+        slug: doc.slug,
+        status: strategy === "theirs" ? "clean" : "modified",
+      });
+      const next = await fetchGit(workspaceId);
+      setGit(next);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Resolve failed");
+    } finally {
+      setResolvingKey(null);
+    }
+  }
+
+  async function onCommit(event: FormEvent) {
+    event.preventDefault();
+    if (committing || action !== "commit" || changes.length === 0) return;
+    setCommitting(true);
+    setError(null);
+    try {
+      const result = await commitWorkspace(workspaceId, message);
+      setMessage("");
+      publishCommittedFiles(workspaceId, result.files);
+      const origin = parentOrigin();
+      if (origin) window.parent.postMessage({ type: "backmatter:published" }, origin);
+      setGit(await fetchGit(workspaceId));
+    } catch (err) {
+      setError(formatCommitError(err));
+    } finally {
+      setCommitting(false);
+    }
+  }
+
+  const label = committing
+    ? "Committing…"
+    : conflictCount > 0
+      ? `Resolve ${conflictCount} ${conflictCount === 1 ? "conflict" : "conflicts"}`
+      : action === "blocked"
+        ? "Writers cannot publish"
+        : changes.length === 0
+          ? "Nothing to publish"
+          : `Deploy ${changes.length} ${changes.length === 1 ? "change" : "changes"}`;
+
+  return (
+    <form {...stylex.props(styles.panel)} onSubmit={(event) => void onCommit(event)}>
+      <Text as="p" size="sm" weight="medium" tone="muted">
+        {git?.currentBranch ?? "Publish"}
+      </Text>
+      {changes.length === 0 ? (
+        <Text as="p" size="sm" tone="muted">
+          Nothing to publish
+        </Text>
+      ) : (
+        <ul {...stylex.props(styles.list)}>
+          {changes.map((change) => (
+            <li key={changeKey(change)} {...stylex.props(styles.row)}>
+              <span>
+                {change.status} {change.type}/{change.slug}
+              </span>
+              {change.status === "conflict" ? (
+                <span {...stylex.props(styles.resolve)}>
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    disabled={resolvingKey !== null}
+                    onClick={() => void onResolve(change, "mine")}
+                  >
+                    Keep mine
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="secondary"
+                    disabled={resolvingKey !== null}
+                    onClick={() => void onResolve(change, "theirs")}
+                  >
+                    Take theirs
+                  </Button>
+                </span>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+      {conflicts.length > 0 ? null : (
+        <Input
+          value={message}
+          placeholder={placeholder}
+          aria-label="Commit message"
+          onChange={(event) => setMessage(event.target.value)}
+        />
+      )}
+      {error ? (
+        <Text as="p" size="sm" tone="danger">
+          {error}
+        </Text>
+      ) : null}
+      <Button
+        type="submit"
+        size="sm"
+        disabled={committing || action !== "commit" || changes.length === 0}
+      >
+        {label}
+      </Button>
+    </form>
+  );
+}
+
+const styles = stylex.create({
+  panel: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+    minHeight: "100%",
+    boxSizing: "border-box",
+    padding: space.xl,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.sm,
+  },
+  list: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+  },
+  row: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  resolve: {
+    display: "flex",
+    gap: space.sm,
+  },
+});

package/src/pages/EnterPage.tsx

@@ -0,0 +1,96 @@
+// packages/studio/src/pages/EnterPage.tsx
+// `/enter?workspace=…&return=…`. The browser arrives top-level from a customer
+// site that has no session. This tab holds the first-party cookie, so it can
+// mint a ticket and send the browser back to the site's preview entry route,
+// which sets the site session cookie and lands on `return`.
+import { useEffect, useState } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { parseEnterSearch, previewEntryUrl, resolveEnterTarget } from "@backmatter/core";
+import { createPreviewTicket, fetchWorkspace } from "../api";
+import { Text } from "../ui/Text";
+import { ButtonLink } from "../ui/Button";
+import { colors, space } from "../styles/tokens.stylex";
+
+type Phase = { kind: "working" } | { kind: "error"; message: string };
+
+export function EnterPage({ userId }: { userId: string }) {
+  const [phase, setPhase] = useState<Phase>({ kind: "working" });
+
+  useEffect(() => {
+    const req = parseEnterSearch(window.location.search);
+    if (!req) {
+      setPhase({ kind: "error", message: "This link is missing the workspace or the page to return to." });
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const { workspace } = await fetchWorkspace(req.workspaceId);
+        const target = resolveEnterTarget(req.returnUrl, workspace.siteUrls);
+        if (!target) {
+          setPhase({
+            kind: "error",
+            message: "That site is not listed under this workspace. Add its origin in Settings → General first.",
+          });
+          return;
+        }
+        const { ticket } = await createPreviewTicket(workspace.id, {
+          redirect: target.redirect,
+          tree: userId,
+        });
+        if (cancelled) return;
+        window.location.replace(previewEntryUrl(target.origin, ticket));
+      } catch (err) {
+        if (cancelled) return;
+        setPhase({ kind: "error", message: err instanceof Error ? err.message : "Could not open the site." });
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  return (
+    <div {...stylex.props(styles.page)}>
+      <div {...stylex.props(styles.card)}>
+        {phase.kind === "working" ? (
+          <>
+            <Text size="lg" weight="medium">
+              Opening your site…
+            </Text>
+            <Text tone="muted">Setting up editing on the site and sending you back.</Text>
+          </>
+        ) : (
+          <>
+            <Text size="lg" weight="medium">
+              Could not open the site
+            </Text>
+            <Text tone="muted">{phase.message}</Text>
+            <ButtonLink to="/" variant="secondary">
+              Back to the dashboard
+            </ButtonLink>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  page: {
+    minHeight: "100dvh",
+    display: "grid",
+    placeItems: "center",
+    padding: space.xl,
+  },
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+    maxWidth: 420,
+    padding: space.xl,
+    borderRadius: 12,
+    backgroundColor: colors.bgPanel,
+    border: `1px solid ${colors.border}`,
+  },
+});

package/src/pages/GithubConnectPage.tsx

@@ -0,0 +1,142 @@
+// packages/studio/src/pages/GithubConnectPage.tsx
+import { useEffect, useState } from "react";
+import { useNavigate, useOutletContext } from "react-router";
+import { bindGithub, fetchGithubRepos, type ApiError } from "../api";
+import { BackLink } from "../ui/BackLink";
+import { Button, ButtonLink } from "../ui/Button";
+import { Field } from "../ui/Field";
+import { Input, Select } from "../ui/Input";
+import { PageHeader, Stack } from "../ui/Page";
+import { Text } from "../ui/Text";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { settingsPath } from "../workspace-path";
+
+export function GithubConnectPage() {
+  const { workspace, reload } = useOutletContext<WorkspaceOutletContext>();
+  const workspaceId = workspace.id;
+  const navigate = useNavigate();
+  const [repos, setRepos] = useState<
+    Array<{ fullName: string; defaultBranch: string }>
+  >([]);
+  const [selected, setSelected] = useState(
+    workspace.githubRepoFullName ?? "",
+  );
+  const [githubDirectory, setGithubDirectory] = useState(
+    workspace.githubDirectory ?? "",
+  );
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!workspaceId) return;
+    void fetchGithubRepos(workspaceId)
+      .then((data) => {
+        setRepos(data.repos);
+        setSelected((current) =>
+          current && data.repos.some((repo) => repo.fullName === current)
+            ? current
+            : (data.repos[0]?.fullName ?? ""),
+        );
+      })
+      .catch((err: Error) => {
+        const code = err.message;
+        setError(
+          code === "github_not_installed" || code === "github_list_failed"
+            ? "The saved GitHub installation is missing or this app cannot access it."
+            : code,
+        );
+      })
+      .finally(() => setLoading(false));
+  }, [workspaceId]);
+
+  async function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const repo = repos.find((r) => r.fullName === selected);
+    if (!repo) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await bindGithub(workspaceId, {
+        repoFullName: repo.fullName,
+        defaultBranch: repo.defaultBranch,
+        githubDirectory,
+      });
+      await reload();
+      navigate(settingsPath(workspace.slug, "github"));
+    } catch (err) {
+      const code =
+        err && typeof err === "object" && "code" in err
+          ? (err as ApiError).code
+          : undefined;
+      if (code === "invalid_github_directory") {
+        setError("The directory is invalid.");
+      } else {
+        setError(err instanceof Error ? err.message : "Bind failed");
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) return <Text tone="muted">Loading repos…</Text>;
+
+  return (
+    <section>
+      <PageHeader
+        kicker={
+          <BackLink to={settingsPath(workspace.slug, "github")}>
+            ← GitHub settings
+          </BackLink>
+        }
+        title="Choose repository"
+        description="Select the repo this workspace will commit to."
+      />
+      {error ? <Text tone="danger">{error}</Text> : null}
+      {repos.length === 0 ? (
+        <Stack>
+          <Text tone="muted">
+            {error
+              ? "GitHub did not return repositories for the saved installation."
+              : "No repositories are available for this installation."}
+          </Text>
+          <div>
+            <ButtonLink to={settingsPath(workspace.slug, "github")} variant="secondary">
+              Back to GitHub settings
+            </ButtonLink>
+          </div>
+        </Stack>
+      ) : (
+        <form onSubmit={onSubmit}>
+          <Stack>
+            <Field label="Repository">
+              <Select
+                aria-label="Repository"
+                value={selected}
+                onValueChange={(next) => setSelected(next ?? "")}
+                options={repos.map((repo) => ({
+                  value: repo.fullName,
+                  label: `${repo.fullName} (${repo.defaultBranch})`,
+                }))}
+              />
+            </Field>
+            <Field
+              label="Directory"
+              hint="Folder inside the repository that contains this site. Leave empty for the repository root."
+            >
+              <Input
+                value={githubDirectory}
+                onChange={(e) => setGithubDirectory(e.target.value)}
+              />
+            </Field>
+            <div>
+              <Button type="submit" disabled={saving}>
+                {saving ? "Saving…" : "Save connection"}
+              </Button>
+            </div>
+          </Stack>
+        </form>
+      )}
+    </section>
+  );
+}

package/src/pages/LegacyWorkspaceRedirect.tsx

@@ -0,0 +1,57 @@
+// packages/studio/src/pages/LegacyWorkspaceRedirect.tsx
+import { useEffect, useState } from "react";
+import { Navigate, useLocation, useParams } from "react-router";
+import { fetchWorkspace } from "../api";
+import { PageFrame } from "../ui/Page";
+import { Text } from "../ui/Text";
+import {
+  defaultLocaleOf,
+  rewriteLegacyWorkspacePath,
+} from "../workspace-path";
+
+export function LegacyWorkspaceRedirect() {
+  const { workspaceId = "", "*": rest } = useParams();
+  const location = useLocation();
+  const [to, setTo] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!workspaceId) {
+      setTo("/workspaces");
+      return;
+    }
+    let cancelled = false;
+    void fetchWorkspace(workspaceId)
+      .then(({ workspace }) => {
+        if (cancelled) return;
+        const pathname = rest
+          ? `/workspaces/${workspaceId}/${rest}`
+          : `/workspaces/${workspaceId}`;
+        const rewritten = rewriteLegacyWorkspacePath(
+          pathname,
+          workspace.slug,
+          defaultLocaleOf(workspace.locales),
+        );
+        const url = new URL(rewritten, "http://local");
+        new URLSearchParams(location.search).forEach((value, key) => {
+          url.searchParams.set(key, value);
+        });
+        setTo(`${url.pathname}${url.search}`);
+      })
+      .catch(() => {
+        if (!cancelled) setTo("/workspaces");
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId, rest, location.search]);
+
+  if (!to) {
+    return (
+      <PageFrame>
+        <Text tone="muted">Loading…</Text>
+      </PageFrame>
+    );
+  }
+
+  return <Navigate to={to} replace />;
+}