@backmatter/studio 0.0.1

package/src/pages/DocEditorPage.tsx

@@ -0,0 +1,1394 @@
+// packages/studio/src/pages/DocEditorPage.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useOutletContext, useParams, useSearchParams, Link, useNavigate } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import {
+  fetchDoc,
+  notifyTreeChanged,
+  type TreeChangeDetail,
+  createPreviewTicket,
+  resolveDoc,
+  revertDoc,
+  saveDoc,
+  type ApiError,
+  type ContentSource,
+  type DocStatus,
+  type SchemaPayload,
+  type SchemaField,
+} from "../api";
+import { resolveFieldInput, useStudioDefinition } from "../define-studio";
+import { useSetEditorActions } from "../chrome/EditorActionsContext";
+import {
+  DOC_CHANGED_EVENT,
+  docKey,
+  sameDocRef,
+  useEditorFocus,
+  type DocChangedDetail,
+  type EditorSelection,
+} from "../chrome/EditorFocusContext";
+import { useSetEditorStatus } from "../chrome/EditorStatusContext";
+import { modifierSymbol } from "../chrome/hotkeys";
+import { ReloadIcon } from "../chrome/icons";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Button, ButtonLink } from "../ui/Button";
+import { ConfirmDialog } from "../ui/ConfirmDialog";
+import { Field } from "../ui/Field";
+import { Input, Textarea } from "../ui/Input";
+import { Text } from "../ui/Text";
+import { Tooltip } from "../ui/Tooltip";
+import {
+  PREVIEW_PCT_MAX,
+  PREVIEW_PCT_MIN,
+  WIDE_QUERY,
+  clampPreviewPct,
+  persistPreviewPct,
+  readPreviewPct,
+} from "./preview-split";
+import {
+  editorPreviewPath,
+  modelForType,
+  previewSiteUrl,
+  primarySiteUrl,
+  onSitePreviewUrl,
+  studioIsOnSite,
+  productionDocUrl,
+} from "./preview-url";
+import { BodyField } from "./BodyProse";
+import { BlocksList } from "./BlocksList";
+import { blocksFromFrontmatter } from "./blocks-list";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { contentDocPath, defaultLocaleOf, settingsPath } from "../workspace-path";
+import { bindPreviewEditor, previewFrameTransport } from "./preview-bridge";
+import { createWindowPreviewTransport, type PreviewChannelRef } from "@backmatter/core/preview";
+
+const AUTOSAVE_MS = 400;
+const hover = "@media (hover: hover)";
+
+const spin = stylex.keyframes({
+  to: { transform: "rotate(360deg)" },
+});
+
+const pulse = stylex.keyframes({
+  "0%": { opacity: 0.4 },
+  "50%": { opacity: 1 },
+  "100%": { opacity: 0.4 },
+});
+
+function useWideLayout() {
+  const [wide, setWide] = useState(() => window.matchMedia(WIDE_QUERY).matches);
+  useEffect(() => {
+    const media = window.matchMedia(WIDE_QUERY);
+    const onChange = () => setWide(media.matches);
+    media.addEventListener("change", onChange);
+    return () => media.removeEventListener("change", onChange);
+  }, []);
+  return wide;
+}
+
+function fieldLabel(name: string) {
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+
+function formatApiError(err: unknown): string {
+  if (!(err instanceof Error)) return "Request failed";
+  const apiErr = err as ApiError;
+  if (apiErr.code === "forbidden") return "You do not have permission to edit content.";
+  if (apiErr.code === "validation") {
+    return err.message.replace(/^validation:\s*/, "Validation failed: ");
+  }
+  return err.message;
+}
+
+function isNotFound(err: unknown): err is ApiError {
+  return Boolean(err && typeof err === "object" && "status" in err && (err as ApiError).status === 404);
+}
+
+function emptyFrontmatter(model: SchemaPayload["models"][number] | undefined) {
+  const out: Record<string, unknown> = {};
+  if (!model) return out;
+  for (const [name, field] of Object.entries(model.fields)) {
+    if (field.kind === "array" || field.kind === "blocks") out[name] = [];
+    else if (field.kind === "object") out[name] = {};
+    else if (field.kind === "boolean") out[name] = false;
+    else if (field.kind === "number") out[name] = 0;
+    else out[name] = "";
+  }
+  return out;
+}
+
+function JsonField({
+  value,
+  kind,
+  readOnly,
+  onValidChange,
+}: {
+  value: unknown;
+  kind: "object" | "array";
+  readOnly?: boolean;
+  onValidChange: (next: unknown) => void;
+}) {
+  const serialized = JSON.stringify(value ?? (kind === "array" ? [] : {}), null, 2);
+  const [draft, setDraft] = useState(serialized);
+  const [focused, setFocused] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  useEffect(() => {
+    if (!focused) {
+      setDraft(serialized);
+      setInvalid(false);
+    }
+  }, [serialized, focused]);
+  return (
+    <Textarea
+      value={draft}
+      readOnly={readOnly}
+      aria-invalid={invalid || undefined}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onChange={(e) => {
+        const next = e.target.value;
+        setDraft(next);
+        try {
+          onValidChange(JSON.parse(next || (kind === "array" ? "[]" : "{}")));
+          setInvalid(false);
+        } catch {
+          setInvalid(true);
+        }
+      }}
+    />
+  );
+}
+
+/** Status-bar label for the doc's state against the branch HEAD. */
+export function docStatusLabel(status: DocStatus | null): string | null {
+  if (status === null) return null;
+  if (status === "clean") return "committed";
+  if (status === "conflict") return "conflict";
+  return "uncommitted";
+}
+
+type SaveState = "idle" | "dirty" | "saving" | "saved" | "error";
+
+export function DocEditorPage() {
+  const { type = "", docSlug = "" } = useParams();
+  const [searchParams] = useSearchParams();
+  const { workspace, blocks, richtext, models } =
+    useOutletContext<WorkspaceOutletContext>();
+  const workspaceId = workspace.id;
+  const slug = docSlug;
+  const model = models.find((m) => m.type === type);
+  const embed = searchParams.get("embed") === "1";
+  const showPreview = !embed && model?.route !== false;
+  const locale = model?.path.includes("{locale}")
+    ? searchParams.get("locale") || defaultLocaleOf(workspace.locales)
+    : "";
+
+  const [source, setSource] = useState<ContentSource | null>(null);
+  const [docStatus, setDocStatus] = useState<DocStatus | null>(null);
+  const [branch, setBranch] = useState<string | null>(null);
+  const [tree, setTree] = useState<string | null>(null);
+  const [frontmatter, setFrontmatter] = useState<Record<string, unknown>>({});
+  const [body, setBody] = useState("");
+  const [fieldNames, setFieldNames] = useState<string[]>([]);
+  const [docFormat, setDocFormat] = useState<"mdx" | "page">("mdx");
+  const [fieldKinds, setFieldKinds] = useState<Record<string, string>>({});
+  const [fieldDefs, setFieldDefs] = useState<Record<string, SchemaField>>({});
+  const studio = useStudioDefinition();
+  const [parseFailed, setParseFailed] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [status, setStatus] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState<string | null>(null);
+  const [confirmRevert, setConfirmRevert] = useState(false);
+  const [saveState, setSaveState] = useState<SaveState>("idle");
+  const [previewKey, setPreviewKey] = useState(0);
+  const [previewLoading, setPreviewLoading] = useState(true);
+  const [previewFrame, setPreviewFrame] = useState(0);
+  const [previewOffer, setPreviewOffer] = useState<PreviewChannelRef | null>(null);
+  const [previewLive, setPreviewLive] = useState<"rendered" | "error" | null>(null);
+  const [previewPct, setPreviewPct] = useState(readPreviewPct);
+  const [dragging, setDragging] = useState(false);
+  const [editEpoch, setEditEpoch] = useState(0);
+  const [selection, setSelection] = useState<EditorSelection | null>(null);
+  const splitRef = useRef<HTMLDivElement>(null);
+  const previewFrameRef = useRef<HTMLIFrameElement>(null);
+  const previewSession = useRef<ReturnType<typeof bindPreviewEditor> | null>(null);
+  const navigate = useNavigate();
+  const wide = useWideLayout();
+  const { setStatus: setEditorStatus, clear: clearEditorStatus } =
+    useSetEditorStatus();
+  const editorActions = useSetEditorActions();
+  const { setFocus: setEditorFocus, aiEditingDocKey } = useEditorFocus();
+  const docRef = useMemo(() => ({ locale, type, slug }), [locale, type, slug]);
+  const aiEditing = aiEditingDocKey !== null && aiEditingDocKey === docKey(docRef);
+  const aiEditingRef = useRef(aiEditing);
+  aiEditingRef.current = aiEditing;
+  const persistRef = useRef<(reason: "auto" | "manual") => Promise<void>>(
+    async () => {},
+  );
+  const revertRef = useRef<() => Promise<void>>(async () => {});
+  const mod = modifierSymbol();
+
+  const hydrated = useRef(false);
+  const saveGen = useRef(0);
+  const latest = useRef({ frontmatter, body });
+  latest.current = { frontmatter, body };
+  // Mirrors docStatus for event handlers that must not re-subscribe on change.
+  const docStatusRef = useRef<DocStatus | null>(null);
+  docStatusRef.current = docStatus;
+  const channelRef = useRef<PreviewChannelRef>({ locale, type, slug });
+  channelRef.current = {
+    locale,
+    type,
+    slug,
+    ...(branch ? { branch } : {}),
+    ...(tree ? { tree } : {}),
+  };
+  const editEpochRef = useRef(editEpoch);
+  editEpochRef.current = editEpoch;
+
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const isPage = docFormat === "page";
+  const detailNames = fieldNames.filter((name) => fieldKinds[name] !== "blocks");
+  const blocksField =
+    fieldNames.find((name) => fieldKinds[name] === "blocks") ?? "blocks";
+  const siteUrl = primarySiteUrl(workspace.siteUrls ?? []);
+  const liveUrl = productionDocUrl(siteUrl, modelForType(models, type), locale, slug);
+
+  useEffect(() => {
+    if (!showPreview) {
+      setPreviewUrl(null);
+      return;
+    }
+    const redirect = editorPreviewPath(
+      modelForType(models, type),
+      slug,
+      locale,
+      branch,
+      tree,
+    );
+    if (!redirect || !workspaceId || !siteUrl) {
+      setPreviewUrl(null);
+      return;
+    }
+    if (studioIsOnSite(siteUrl, window.location.origin)) {
+      setPreviewUrl(onSitePreviewUrl(siteUrl, redirect));
+      return;
+    }
+    let cancelled = false;
+    void createPreviewTicket(workspaceId, { redirect, branch, tree })
+      .then((res) => {
+        if (!cancelled) setPreviewUrl(previewSiteUrl(workspace.siteUrls ?? [], res.ticket));
+      })
+      .catch(() => {
+        if (!cancelled) setPreviewUrl(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [showPreview, workspaceId, workspace.siteUrls, siteUrl, models, type, slug, locale, branch, tree]);
+
+  useEffect(() => {
+    setPreviewLoading(true);
+  }, [previewUrl]);
+
+  useEffect(() => {
+    persistPreviewPct(previewPct);
+  }, [previewPct]);
+
+  useEffect(() => {
+    setPreviewOffer(null);
+    setPreviewLive(null);
+  }, [previewUrl]);
+
+  useEffect(() => {
+    const frame = previewFrameRef.current;
+    if (!frame || !siteUrl) return;
+    let origin: string;
+    try {
+      origin = new URL(siteUrl).origin;
+    } catch {
+      return;
+    }
+    const transport = previewFrameTransport({ frame, siteOrigin: origin });
+    if (!transport) return;
+    const session = bindPreviewEditor({
+      transport,
+      ref: () => channelRef.current,
+      onOffer: setPreviewOffer,
+      onStatus: setPreviewLive,
+    });
+    previewSession.current = session;
+    if (editEpochRef.current > 0) session.setDoc(latest.current);
+    return () => {
+      previewSession.current = null;
+      session.close();
+      transport.close();
+    };
+  }, [previewFrame, previewUrl, siteUrl]);
+
+  useEffect(() => {
+    if (!embed || window.parent === window) return;
+    let origin = "";
+    try {
+      origin = document.referrer ? new URL(document.referrer).origin : "";
+    } catch {
+      origin = "";
+    }
+    if (!origin) return;
+    const transport = createWindowPreviewTransport({
+      target: window.parent,
+      targetOrigin: origin,
+      allowedOrigins: [origin],
+    });
+    const session = bindPreviewEditor({
+      transport,
+      ref: () => channelRef.current,
+      onOffer: setPreviewOffer,
+      onStatus: setPreviewLive,
+    });
+    previewSession.current = session;
+    if (editEpochRef.current > 0) session.setDoc(latest.current);
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== origin) return;
+      if (event.data?.type !== "backmatter:reload-doc") return;
+      window.dispatchEvent(
+        new CustomEvent(DOC_CHANGED_EVENT, { detail: { docRef: channelRef.current } }),
+      );
+    }
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("message", onMessage);
+      previewSession.current = null;
+      session.close();
+      transport.close();
+    };
+  }, [embed]);
+
+  useEffect(() => {
+    if (editEpoch === 0) return;
+    previewSession.current?.setDoc(latest.current);
+  }, [editEpoch]);
+
+  function remountPreview() {
+    setPreviewLoading(true);
+    setPreviewKey((k) => k + 1);
+  }
+
+  function updatePreviewPctFromPointer(clientX: number, clientY: number) {
+    const split = splitRef.current;
+    if (!split) return;
+    const rect = split.getBoundingClientRect();
+    const next = wide
+      ? ((clientX - rect.left) / rect.width) * 100
+      : ((clientY - rect.top) / rect.height) * 100;
+    setPreviewPct(clampPreviewPct(next));
+  }
+
+  function onSplitPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.currentTarget.focus();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setDragging(true);
+    updatePreviewPctFromPointer(e.clientX, e.clientY);
+  }
+
+  function onSplitPointerMove(e: React.PointerEvent<HTMLDivElement>) {
+    if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;
+    updatePreviewPctFromPointer(e.clientX, e.clientY);
+  }
+
+  function onSplitPointerUp(e: React.PointerEvent<HTMLDivElement>) {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+    setDragging(false);
+  }
+
+  function onSplitKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    const step = e.shiftKey ? 10 : 2;
+    if (wide ? e.key === "ArrowLeft" : e.key === "ArrowUp") {
+      e.preventDefault();
+      setPreviewPct((pct) => clampPreviewPct(pct - step));
+      return;
+    }
+    if (wide ? e.key === "ArrowRight" : e.key === "ArrowDown") {
+      e.preventDefault();
+      setPreviewPct((pct) => clampPreviewPct(pct + step));
+      return;
+    }
+    if (e.key === "Home") {
+      e.preventDefault();
+      setPreviewPct(PREVIEW_PCT_MIN);
+      return;
+    }
+    if (e.key === "End") {
+      e.preventDefault();
+      setPreviewPct(PREVIEW_PCT_MAX);
+    }
+  }
+
+  function applyModelFields(
+    fields: Record<string, { kind: string }> | undefined,
+    fallbackNames: string[],
+  ) {
+    const names = fields ? Object.keys(fields) : fallbackNames;
+    setFieldNames(names);
+    setFieldKinds(
+      Object.fromEntries(
+        Object.entries(fields ?? {}).map(([name, field]) => [name, field.kind]),
+      ),
+    );
+    setFieldDefs(fields ?? {});
+    return names;
+  }
+
+  async function reload() {
+    try {
+      const data = await fetchDoc(workspaceId, locale, type, slug);
+      hydrated.current = false;
+      setSource(data.doc.source);
+      setDocStatus(data.doc.status);
+      setBranch(data.doc.branch);
+      setTree(data.doc.tree);
+      setFrontmatter(data.doc.frontmatter);
+      setBody(data.doc.body);
+      latest.current = { frontmatter: data.doc.frontmatter, body: data.doc.body };
+      if (embed) previewSession.current?.setDoc(latest.current);
+      applyModelFields(
+        data.doc.model?.fields,
+        Object.keys(data.doc.frontmatter),
+      );
+      setDocFormat(data.doc.model?.format === "page" ? "page" : "mdx");
+      setParseFailed(
+        data.doc.model?.format === "page" && Boolean(data.doc.parseError),
+      );
+      setSaveState("idle");
+      if (data.doc.parseError && data.doc.model?.format === "page") {
+        setError(data.doc.parseError);
+      }
+      queueMicrotask(() => {
+        hydrated.current = true;
+      });
+    } catch (err) {
+      if (!isNotFound(err) || !model?.singleton) throw err;
+      const next = emptyFrontmatter(model);
+      hydrated.current = false;
+      setSource("tree");
+      setDocStatus("added");
+      setFrontmatter(next);
+      setBody("");
+      applyModelFields(model.fields, Object.keys(next));
+      setDocFormat(model.format === "page" ? "page" : "mdx");
+      setParseFailed(false);
+      setError(null);
+      setSaveState("idle");
+      latest.current = { frontmatter: next, body: "" };
+      queueMicrotask(() => {
+        hydrated.current = true;
+      });
+      try {
+        const res = await saveDoc(workspaceId, locale, type, slug, {
+          frontmatter: next,
+          body: "",
+        });
+        setDocStatus(res.doc.status);
+        setSource("tree");
+        notifyTreeChanged({
+          workspaceId,
+          locale,
+          type,
+          slug,
+          status: res.doc.status,
+        });
+      } catch (saveErr) {
+        setError(formatApiError(saveErr));
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (!workspaceId || !type || !slug) return;
+    setLoading(true);
+    setPreviewLoading(true);
+    hydrated.current = false;
+    void reload()
+      .catch((err: Error) => setError(err.message))
+      .finally(() => setLoading(false));
+
+    function onChanged() {
+      saveGen.current += 1;
+      hydrated.current = false;
+      void reload().catch((err: Error) => setError(err.message));
+    }
+    function onDocChanged(e: Event) {
+      const detail = (e as CustomEvent<DocChangedDetail>).detail;
+      if (!sameDocRef(detail?.docRef, { locale, type, slug })) return;
+      onChanged();
+    }
+    // Chat publishes status with the tool result. Flip the badge before the reload returns.
+    function onTree(e: Event) {
+      const detail = (e as CustomEvent<TreeChangeDetail>).detail;
+      if (!detail?.status || detail.remove) return;
+      const ws = detail.workspaceId;
+      if (ws && ws !== workspace.id && ws !== workspace.slug) return;
+      if (detail.locale !== locale || detail.type !== type || detail.slug !== slug) return;
+      docStatusRef.current = detail.status;
+      setDocStatus(detail.status);
+      setSource(detail.status === "clean" ? "head" : "tree");
+    }
+    // Branch HEAD moved (teammate push / pull / commit). A clean doc reloads to
+    // show the new HEAD; a doc I am editing keeps my text and just refreshes its
+    // status, which the server reports as `conflict` when HEAD touched this file.
+    function onHeadChanged() {
+      if (docStatusRef.current === "clean") {
+        onChanged();
+        remountPreview();
+        return;
+      }
+      void fetchDoc(workspaceId, locale, type, slug)
+        .then((data) => setDocStatus(data.doc.status))
+        .catch(() => {});
+    }
+    window.addEventListener("backmatter:workspace-changed", onChanged);
+    window.addEventListener("backmatter:head-changed", onHeadChanged);
+    window.addEventListener("backmatter:tree-changed", onTree);
+    window.addEventListener(DOC_CHANGED_EVENT, onDocChanged);
+    return () => {
+      window.removeEventListener("backmatter:workspace-changed", onChanged);
+      window.removeEventListener("backmatter:head-changed", onHeadChanged);
+      window.removeEventListener("backmatter:tree-changed", onTree);
+      window.removeEventListener(DOC_CHANGED_EVENT, onDocChanged);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceId, workspace.slug, locale, type, slug]);
+
+  // Publish the focused document to the global AI chat (debounced).
+  useEffect(() => {
+    if (loading) return;
+    const timer = window.setTimeout(() => {
+      setEditorFocus({ docRef, frontmatter, body, selection });
+    }, 150);
+    return () => window.clearTimeout(timer);
+  }, [setEditorFocus, docRef, frontmatter, body, selection, loading]);
+
+  useEffect(() => {
+    return () => setEditorFocus(null);
+  }, [setEditorFocus]);
+
+  // When the AI finishes editing this doc, pick up its write to my tree.
+  const wasAiEditing = useRef(false);
+  useEffect(() => {
+    if (wasAiEditing.current && !aiEditing) {
+      saveGen.current += 1;
+      hydrated.current = false;
+      void reload().catch((err: Error) => setError(err.message));
+    }
+    wasAiEditing.current = aiEditing;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [aiEditing]);
+
+  async function persist(reason: "auto" | "manual") {
+    if (parseFailed) return;
+    const gen = ++saveGen.current;
+    const payload = latest.current;
+    setSaveState("saving");
+    if (reason === "manual") {
+      setBusy("save");
+      setError(null);
+      setStatus(null);
+    }
+    try {
+      const res = await saveDoc(workspaceId, locale, type, slug, payload);
+      if (gen !== saveGen.current) return;
+      setSource("tree");
+      setDocStatus(res.doc.status);
+      setSaveState("saved");
+      notifyTreeChanged({
+        workspaceId,
+        locale,
+        type,
+        slug,
+        status: res.doc.status,
+      });
+      if (reason === "manual") setStatus("Saved to your working tree");
+    } catch (err) {
+      if (gen !== saveGen.current) return;
+      setSaveState("error");
+      setError(formatApiError(err));
+    } finally {
+      if (reason === "manual") setBusy(null);
+    }
+  }
+
+  useEffect(() => {
+    if (editEpoch === 0) return;
+    if (busy === "revert" || busy === "resolve") return;
+
+    const timer = window.setTimeout(() => {
+      // The AI is writing this file right now; the editor reloads when it ends.
+      if (aiEditingRef.current) return;
+      void persist("auto");
+    }, AUTOSAVE_MS);
+
+    return () => window.clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editEpoch]);
+
+  async function onSave(e: React.FormEvent) {
+    e.preventDefault();
+    await persist("manual");
+  }
+
+  /** Drop my uncommitted copy; the document reads from HEAD again. */
+  async function onRevert() {
+    setConfirmRevert(false);
+    setBusy("revert");
+    setError(null);
+    setStatus(null);
+    saveGen.current += 1;
+    try {
+      await revertDoc(workspaceId, locale, type, slug);
+      setStatus("Reverted to the committed version");
+      notifyTreeChanged({ workspaceId, locale, type, slug, status: "clean" });
+      await reload();
+      remountPreview();
+    } catch (err) {
+      setError(formatApiError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  /** Conflict: keep my copy (rebase onto the new HEAD) or take theirs (revert). */
+  async function onResolve(strategy: "mine" | "theirs") {
+    setBusy("resolve");
+    setError(null);
+    setStatus(null);
+    saveGen.current += 1;
+    try {
+      await resolveDoc(workspaceId, locale, type, slug, strategy);
+      notifyTreeChanged();
+      if (strategy === "theirs") {
+        setStatus("Took the committed version");
+        await reload();
+        remountPreview();
+      } else {
+        setStatus("Kept your version; it will overwrite theirs on commit");
+        const data = await fetchDoc(workspaceId, locale, type, slug);
+        setDocStatus(data.doc.status);
+      }
+    } catch (err) {
+      setError(formatApiError(err));
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  function markEdited() {
+    if (!hydrated.current) return;
+    setSaveState("dirty");
+    setEditEpoch((n) => n + 1);
+  }
+
+  const saveLabel =
+    saveState === "saving"
+      ? "Saving…"
+      : saveState === "dirty"
+        ? "Unsaved"
+        : saveState === "error"
+          ? "Save failed"
+          : null;
+  const saveTone = saveState === "error" ? "danger" : "muted";
+
+  persistRef.current = persist;
+  revertRef.current = onRevert;
+
+  const statusLabel = docStatusLabel(docStatus);
+  useEffect(() => {
+    setEditorStatus({
+      locale,
+      status: statusLabel,
+      saveLabel,
+      saveTone,
+    });
+  }, [setEditorStatus, locale, saveLabel, saveTone, statusLabel]);
+
+  const hasTreeCopy = source === "tree";
+  useEffect(() => {
+    editorActions.setActions({
+      save: () => persistRef.current("manual"),
+      revert: () => revertRef.current(),
+      canRevert: hasTreeCopy,
+    });
+    return () => editorActions.clear();
+  }, [editorActions.setActions, editorActions.clear, hasTreeCopy]);
+
+  useEffect(() => {
+    return () => clearEditorStatus();
+  }, [clearEditorStatus]);
+
+  if (loading) {
+    return (
+      <div {...stylex.props(styles.pad)}>
+        <Text tone="muted">Loading document…</Text>
+      </div>
+    );
+  }
+
+  const inConflict = docStatus === "conflict";
+  const previewSx = stylex.props(styles.preview);
+
+  return (
+    <div {...stylex.props(styles.root)}>
+      <ConfirmDialog
+        open={confirmRevert}
+        onOpenChange={setConfirmRevert}
+        title="Revert this file?"
+        description="Your uncommitted changes to this document will be dropped and the committed version on the branch reloaded."
+        confirmLabel="Revert"
+        destructive
+        onConfirm={() => void onRevert()}
+      />
+      <div
+        ref={splitRef}
+        {...stylex.props(styles.split, showPreview && dragging && styles.splitDragging)}
+      >
+        {showPreview ? (
+        <>
+        <aside
+          className={previewSx.className}
+          style={{ ...previewSx.style, flexBasis: `${previewPct}%` }}
+        >
+          <div {...stylex.props(styles.previewBar)}>
+            <div {...stylex.props(styles.urlGroup)}>
+              <Tooltip label={previewLoading ? "Loading preview…" : "Reload preview"}>
+                <button
+                  type="button"
+                  aria-label={previewLoading ? "Preview loading" : "Reload preview"}
+                  aria-busy={previewLoading || undefined}
+                  onClick={remountPreview}
+                  {...stylex.props(styles.reloadBtn)}
+                >
+                  <span
+                    {...stylex.props(
+                      styles.reloadIcon,
+                      previewLoading && styles.reloadSpinning,
+                    )}
+                  >
+                    <ReloadIcon />
+                  </span>
+                </button>
+              </Tooltip>
+              <span {...stylex.props(styles.url)} title={previewUrl ?? undefined}>
+                {previewUrl
+                  ? previewUrl.replace(/^https?:\/\//, "")
+                  : !siteUrl
+                    ? "No site URL"
+                    : "Loading checkout…"}
+              </span>
+              {previewLive === "rendered" ? (
+                <span {...stylex.props(styles.previewLive)}>Updated</span>
+              ) : null}
+              {previewLive === "error" ? (
+                <span {...stylex.props(styles.previewLiveError)}>Preview error</span>
+              ) : null}
+              {previewOffer ? (
+                <button
+                  type="button"
+                  {...stylex.props(styles.editPage)}
+                  onClick={() => {
+                    navigate(
+                      contentDocPath(
+                        workspace.slug,
+                        previewOffer.type,
+                        previewOffer.slug,
+                        previewOffer.locale,
+                        defaultLocaleOf(workspace.locales),
+                      ),
+                    );
+                  }}
+                >
+                  Edit this page
+                </button>
+              ) : null}
+            </div>
+            <span
+              {...stylex.props(
+                styles.badge,
+                inConflict && styles.badgeConflict,
+              )}
+            >
+              {statusLabel ?? "…"}
+            </span>
+          </div>
+          {previewUrl ? (
+            <iframe
+              key={`${previewKey}-${previewUrl}`}
+              ref={previewFrameRef}
+              title="Live preview"
+              src={previewUrl}
+              onLoad={() => {
+                setPreviewLoading(false);
+                setPreviewFrame((n) => n + 1);
+              }}
+              {...stylex.props(
+                styles.iframe,
+                dragging && styles.iframeDragging,
+              )}
+            />
+          ) : !siteUrl ? (
+            <div {...stylex.props(styles.iframe, styles.previewEmpty)}>
+              <Text as="p" size="sm" weight="medium">
+                No site URL
+              </Text>
+              <Link
+                to={settingsPath(workspace.slug, "general")}
+                {...stylex.props(styles.previewEmptyLink)}
+              >
+                Set a site URL in settings
+              </Link>
+            </div>
+          ) : (
+            <div
+              {...stylex.props(styles.iframe)}
+              aria-busy="true"
+              aria-label="Preview waiting for checkout"
+            />
+          )}
+        </aside>
+
+        <div
+          role="separator"
+          aria-orientation={wide ? "vertical" : "horizontal"}
+          aria-valuemin={PREVIEW_PCT_MIN}
+          aria-valuemax={PREVIEW_PCT_MAX}
+          aria-valuenow={Math.round(previewPct)}
+          aria-label="Resize preview"
+          tabIndex={0}
+          onPointerDown={onSplitPointerDown}
+          onPointerMove={onSplitPointerMove}
+          onPointerUp={onSplitPointerUp}
+          onPointerCancel={onSplitPointerUp}
+          onLostPointerCapture={() => setDragging(false)}
+          onKeyDown={onSplitKeyDown}
+          {...stylex.props(styles.handle, dragging && styles.handleActive)}
+        >
+          <span {...stylex.props(styles.handleHit)} />
+        </div>
+        </>
+        ) : null}
+
+        <section {...stylex.props(styles.editor)}>
+          <div {...stylex.props(styles.editorColumn, !showPreview && styles.editorColumnSolo)}>
+          <div {...stylex.props(styles.toolbar)}>
+            <div {...stylex.props(styles.meta)}>
+              <Text as="h1" size="md" weight="semibold" truncate>
+                {type}/{slug}
+              </Text>
+            </div>
+            <div {...stylex.props(styles.actions)}>
+              <Tooltip label={`Save (${mod}S)`}>
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  disabled={busy !== null || saveState === "saving"}
+                  aria-keyshortcuts="Meta+S Control+S"
+                  onClick={() => void persist("manual")}
+                >
+                  Save
+                </Button>
+              </Tooltip>
+              {showPreview ? (
+                <>
+                  <ButtonLink
+                    size="sm"
+                    variant="secondary"
+                    href={previewUrl ?? undefined}
+                    disabled={!previewUrl}
+                  >
+                    Preview
+                  </ButtonLink>
+                  <ButtonLink
+                    size="sm"
+                    variant="secondary"
+                    href={liveUrl ?? undefined}
+                    disabled={!liveUrl}
+                  >
+                    View live
+                  </ButtonLink>
+                </>
+              ) : null}
+              {hasTreeCopy ? (
+                <Tooltip label="Drop your uncommitted changes to this file">
+                  <Button
+                    size="sm"
+                    variant="danger"
+                    disabled={busy !== null}
+                    onClick={() => setConfirmRevert(true)}
+                  >
+                    {busy === "revert" ? "Reverting…" : "Revert"}
+                  </Button>
+                </Tooltip>
+              ) : null}
+            </div>
+          </div>
+
+          <div {...stylex.props(styles.formWrap)}>
+            {inConflict ? (
+              <div {...stylex.props(styles.conflictBanner)} role="alert">
+                <div {...stylex.props(styles.conflictText)}>
+                  <Text size="sm" weight="semibold">
+                    This file changed on {branch ?? "the branch"} since you started editing.
+                  </Text>
+                  <Text size="sm" tone="muted">
+                    Commit is blocked until you pick a side. Keep mine overwrites their
+                    version on your next commit; take theirs drops your edits.
+                  </Text>
+                </div>
+                <div {...stylex.props(styles.conflictActions)}>
+                  <Button
+                    variant="secondary"
+                    disabled={busy !== null}
+                    onClick={() => void onResolve("mine")}
+                  >
+                    {busy === "resolve" ? "Resolving…" : "Keep mine"}
+                  </Button>
+                  <Button
+                    variant="danger"
+                    disabled={busy !== null}
+                    onClick={() => void onResolve("theirs")}
+                  >
+                    Take theirs
+                  </Button>
+                </div>
+              </div>
+            ) : null}
+            {aiEditing ? (
+              <div {...stylex.props(styles.aiBanner)} role="status" aria-live="polite">
+                <span {...stylex.props(styles.aiDot)} />
+                <Text size="sm">AI is editing this document…</Text>
+              </div>
+            ) : null}
+            {error ? (
+              <div {...stylex.props(styles.msg)}>
+                <Text tone="danger" size="sm">
+                  {error}
+                </Text>
+              </div>
+            ) : null}
+            {status ? (
+              <div {...stylex.props(styles.msg)}>
+                <Text tone="success" size="sm">
+                  {status}
+                </Text>
+              </div>
+            ) : null}
+
+            <form onSubmit={onSave} {...stylex.props(styles.form)}>
+              <Text as="h2" size="sm" tone="muted" weight="medium">
+                Details
+              </Text>
+              {detailNames.length === 0 ? (
+                <Text tone="muted" size="sm">
+                  {isPage
+                    ? "No scalar fields on this model."
+                    : "No model fields. Edit the MDX body only."}
+                </Text>
+              ) : (
+                detailNames.map((name) => {
+                  const kind = fieldKinds[name];
+                  const composite = kind === "object" || kind === "array";
+                  const CustomInput = resolveFieldInput(studio, fieldDefs[name]);
+                  return (
+                    <Field key={name} label={fieldLabel(name)}>
+                      {CustomInput ? (
+                        <CustomInput
+                          name={name}
+                          field={fieldDefs[name]!}
+                          value={frontmatter[name]}
+                          readOnly={aiEditing || parseFailed}
+                          onChange={(next) => {
+                            markEdited();
+                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
+                          }}
+                        />
+                      ) : composite ? (
+                        <JsonField
+                          kind={kind === "array" ? "array" : "object"}
+                          value={frontmatter[name]}
+                          readOnly={aiEditing || parseFailed}
+                          onValidChange={(next) => {
+                            markEdited();
+                            setFrontmatter((prev) => ({ ...prev, [name]: next }));
+                          }}
+                        />
+                      ) : (
+                        <Input
+                          value={String(frontmatter[name] ?? "")}
+                          readOnly={aiEditing || parseFailed}
+                          onChange={(e) => {
+                            markEdited();
+                            setFrontmatter((prev) => ({
+                              ...prev,
+                              [name]: e.target.value,
+                            }));
+                          }}
+                        />
+                      )}
+                    </Field>
+                  );
+                })
+              )}
+              {isPage ? (
+                <BlocksList
+                  blocks={blocksFromFrontmatter(frontmatter[blocksField])}
+                  catalog={blocks}
+                  readOnly={aiEditing || parseFailed}
+                  onChange={(next) => {
+                    markEdited();
+                    setFrontmatter((prev) => ({ ...prev, [blocksField]: next }));
+                  }}
+                />
+              ) : (
+                <BodyField
+                  value={body}
+                  catalog={richtext}
+                  readOnly={aiEditing || parseFailed}
+                  onChange={(value) => {
+                    markEdited();
+                    setBody(value);
+                  }}
+                  onSelect={setSelection}
+                />
+              )}
+            </form>
+          </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+const styles = stylex.create({
+  root: {
+    display: "flex",
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  pad: {
+    padding: space.xxl,
+  },
+  split: {
+    display: "flex",
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    "@media (min-width: 1024px)": {
+      flexDirection: "row",
+    },
+  },
+  splitDragging: {
+    userSelect: "none",
+    cursor: "row-resize",
+    "@media (min-width: 1024px)": {
+      cursor: "col-resize",
+    },
+  },
+  preview: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: colors.bgSurface,
+  },
+  previewBar: {
+    display: "flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  urlGroup: {
+    display: "flex",
+    minWidth: 0,
+    flex: 1,
+    alignItems: "center",
+    gap: space.sm,
+  },
+  reloadBtn: {
+    display: "inline-flex",
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    width: 22,
+    height: 22,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    touchAction: "manipulation",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+        color: colors.text,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  reloadIcon: {
+    display: "inline-flex",
+  },
+  reloadSpinning: {
+    animationName: spin,
+    animationDuration: "700ms",
+    animationTimingFunction: "linear",
+    animationIterationCount: "infinite",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationName: "none",
+      animationDuration: "0s",
+    },
+  },
+  url: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontFamily: type.mono,
+  },
+  previewLive: {
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  previewLiveError: {
+    flexShrink: 0,
+    color: colors.danger,
+  },
+  editPage: {
+    flexShrink: 0,
+    borderWidth: 0,
+    borderRadius: 4,
+    backgroundColor: colors.bgHover,
+    color: colors.text,
+    cursor: "pointer",
+    fontSize: type.sm,
+    paddingInline: space.sm,
+    paddingBlock: 2,
+  },
+  badge: {
+    flexShrink: 0,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: 4,
+    paddingInline: space.sm,
+    paddingBlock: 2,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+  },
+  badgeConflict: {
+    borderColor: colors.danger,
+    color: colors.danger,
+  },
+  conflictBanner: {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+    marginBottom: space.md,
+    paddingInline: space.md,
+    paddingBlock: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.danger,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+  },
+  conflictText: {
+    display: "flex",
+    minWidth: 0,
+    flex: 1,
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  conflictActions: {
+    display: "flex",
+    flexShrink: 0,
+    gap: space.sm,
+  },
+  iframe: {
+    minHeight: 0,
+    width: "100%",
+    flex: 1,
+    borderWidth: 0,
+    backgroundColor: colors.bgSurface,
+  },
+  previewEmpty: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    gap: space.sm,
+    padding: space.lg,
+  },
+  previewEmptyLink: {
+    color: colors.text,
+    fontSize: type.sm,
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+  },
+  iframeDragging: {
+    pointerEvents: "none",
+  },
+  handle: {
+    position: "relative",
+    zIndex: 1,
+    flexShrink: 0,
+    width: "100%",
+    height: 1,
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "currentColor",
+    color: colors.border,
+    cursor: "row-resize",
+    touchAction: "none",
+    userSelect: "none",
+    [hover]: {
+      ":hover": {
+        color: colors.accent,
+      },
+    },
+    ":focus-visible": {
+      color: colors.accent,
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+    "@media (min-width: 1024px)": {
+      width: 1,
+      height: "auto",
+      alignSelf: "stretch",
+      cursor: "col-resize",
+    },
+  },
+  handleActive: {
+    color: colors.accent,
+  },
+  handleHit: {
+    position: "absolute",
+    insetInline: 0,
+    insetBlock: -5,
+    backgroundColor: "transparent",
+    "@media (min-width: 1024px)": {
+      insetBlock: 0,
+      insetInline: -5,
+    },
+  },
+  editor: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden",
+    backgroundColor: colors.bgApp,
+  },
+  editorColumn: {
+    display: "flex",
+    minWidth: 0,
+    minHeight: 0,
+    flex: 1,
+    flexDirection: "column",
+    width: "100%",
+  },
+  editorColumnSolo: {
+    maxWidth: "700px",
+    marginInline: "auto",
+  },
+  toolbar: {
+    display: "flex",
+    flexShrink: 0,
+    flexWrap: "wrap",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.sm,
+    paddingInline: space.lg,
+    paddingBlock: space.sm,
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: colors.border,
+  },
+  meta: {
+    minWidth: 0,
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.sm,
+  },
+  formWrap: {
+    minHeight: 0,
+    flex: 1,
+    overflowY: "auto",
+    paddingInline: space.lg,
+    paddingBlock: space.lg,
+  },
+  msg: {
+    marginBottom: space.md,
+  },
+  aiBanner: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    marginBottom: space.md,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    color: colors.textMuted,
+  },
+  aiDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+    backgroundColor: colors.accent,
+    animationName: pulse,
+    animationDuration: "1.2s",
+    animationTimingFunction: "ease-in-out",
+    animationIterationCount: "infinite",
+    "@media (prefers-reduced-motion: reduce)": {
+      animationName: "none",
+    },
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.lg,
+    paddingBottom: space.xxl,
+  },
+});