@backmatter/studio 0.0.16 → 0.0.18

package/src/pages/DocEditorPage.tsx

@@ -3,8 +3,10 @@ import { Snake } from "loading-dev";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useOutletContext, useParams, useSearchParams, Link, useNavigate } from "react-router";
 import * as stylex from "@stylexjs/stylex";
+import { matchRoute, repoPathFromModel } from "@backmatter/core";
 import {
   fetchDoc,
+  fetchDocs,
   notifyTreeChanged,
   type TreeChangeDetail,
   createPreviewTicket,
@@ -17,8 +19,12 @@ import {
   type SchemaPayload,
   type SchemaField,
 } from "../api";
-import { resolveFieldInput, useStudioDefinition } from "../define-studio";
-import { MediaFieldInput } from "./MediaFieldInput";
+import { FieldControl } from "../fields/FieldControl";
+import { loadRelationDocuments } from "../fields/load-relation-documents";
+import { omitField } from "../fields/omit-field";
+import { linkDocumentTypes } from "../fields/link-targets";
+import { relationTargets } from "../fields/relation-targets";
+import { useReplicaState } from "../replica/useReplica";
 import { useSetEditorActions } from "../chrome/EditorActionsContext";
 import {
   DOC_CHANGED_EVENT,
@@ -30,7 +36,6 @@ import {
 } 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";
@@ -46,6 +51,8 @@ import {
   persistPreviewPct,
   readPreviewPct,
 } from "./preview-split";
+import { routesForContentFiles } from "../content-routes";
+import { PreviewAddress } from "./PreviewAddress";
 import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
 import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
 import {
@@ -78,10 +85,6 @@ import {
 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 },
@@ -130,48 +133,6 @@ function emptyFrontmatter(model: SchemaPayload["models"][number] | undefined) {
   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;
@@ -202,7 +163,34 @@ export function DocEditorPage() {
   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 replica = useReplicaState();
+  const objects = useMemo(
+    () => replica.checkout(workspace.id)?.schema?.payload.objects ?? [],
+    [replica, workspace.id],
+  );
+  const relationTargetTypes = useMemo(() => {
+    const targets = new Set<string>();
+    const groups: Record<string, SchemaField>[] = [];
+    if (model?.fields) groups.push(model.fields);
+    for (const block of blocks) {
+      if (block.fields) groups.push(block.fields);
+    }
+    for (const block of richtext) {
+      if (block.fields) groups.push(block.fields);
+    }
+    for (const fields of groups) {
+      for (const type of relationTargets(fields, models, objects)) {
+        targets.add(type);
+      }
+      for (const type of linkDocumentTypes(fields, models, objects)) {
+        targets.add(type);
+      }
+    }
+    return [...targets].sort();
+  }, [model, blocks, richtext, models, objects]);
+  const [documentLists, setDocumentLists] = useState<
+    Record<string, Array<{ slug: string; frontmatter: Record<string, unknown> }>> | undefined
+  >(undefined);
   const [parseFailed, setParseFailed] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [status, setStatus] = useState<string | null>(null);
@@ -260,6 +248,9 @@ export function DocEditorPage() {
   editEpochRef.current = editEpoch;
 
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const docIdentity = `${type}\0${slug}`;
+  const [browse, setBrowse] = useState<{ doc: string; path: string } | null>(null);
+  const browsedPath = browse?.doc === docIdentity ? browse.path : null;
   const isPage = docFormat === "page";
   const detailNames = fieldNames.filter((name) => fieldKinds[name] !== "blocks");
   const blocksField =
@@ -282,18 +273,28 @@ export function DocEditorPage() {
     branch,
     tree,
   });
+  const framePath = browsedPath ?? previewPath;
+  // Each document is the content file its model path names. A deleted document is gone.
+  const previewRoutes = routesForContentFiles(
+    models,
+    replica.docs(workspaceId).flatMap((doc) => {
+      if (doc.status === "deleted") return [];
+      const model = models.find((item) => item.type === doc.type);
+      return model ? [repoPathFromModel(model, doc.slug)] : [];
+    }),
+  );
 
   useEffect(() => {
-    if (!frameIdentity || !previewPath || !workspaceId || !siteUrl) {
+    if (!frameIdentity || !framePath || !workspaceId || !siteUrl) {
       setPreviewUrl(null);
       return;
     }
     if (studioIsOnSite(siteUrl, window.location.origin)) {
-      setPreviewUrl(onSitePreviewUrl(siteUrl, previewPath));
+      setPreviewUrl(onSitePreviewUrl(siteUrl, framePath));
       return;
     }
     let cancelled = false;
-    void createPreviewTicket(workspaceId, { redirect: previewPath, branch, tree })
+    void createPreviewTicket(workspaceId, { redirect: framePath, branch, tree })
       .then((res) => {
         if (!cancelled) setPreviewUrl(previewEnableUrl(siteUrl, res.ticket));
       })
@@ -303,7 +304,32 @@ export function DocEditorPage() {
     return () => {
       cancelled = true;
     };
-  }, [frameIdentity, previewPath, workspaceId, siteUrl, branch, tree]);
+  }, [frameIdentity, framePath, workspaceId, siteUrl, branch, tree]);
+
+  useEffect(() => {
+    if (relationTargetTypes.length === 0) {
+      setDocumentLists({});
+      return;
+    }
+    let cancelled = false;
+    setDocumentLists(undefined);
+    void loadRelationDocuments(
+      relationTargetTypes,
+      async () => (await fetchDocs(workspaceId)).docs,
+      async (relationType, relationSlug) => ({
+        frontmatter: (await fetchDoc(workspaceId, relationType, relationSlug)).doc.frontmatter,
+      }),
+    )
+      .then((loaded) => {
+        if (!cancelled) setDocumentLists(loaded);
+      })
+      .catch(() => {
+        if (!cancelled) setDocumentLists({});
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId, type, slug, relationTargetTypes.join("\0")]);
 
   useEffect(() => {
     setPreviewLoading(true);
@@ -477,6 +503,17 @@ export function DocEditorPage() {
     setPreviewKey((k) => k + 1);
   }
 
+  function onPreviewPath(next: string) {
+    const pathname = next.split(/[?#]/, 1)[0] || "/";
+    const doc = matchRoute(models, pathname);
+    if (doc && (doc.type !== type || doc.slug !== slug)) {
+      navigate(contentDocPath(workspace.slug, doc.type, doc.slug));
+      return;
+    }
+    if (next === framePath) remountPreview();
+    setBrowse({ doc: docIdentity, path: next });
+  }
+
   function choosePreviewSize(size: PreviewSize) {
     setPreviewSize(size);
     persistPreviewSize(size);
@@ -870,32 +907,7 @@ export function DocEditorPage() {
           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>
+            <div {...stylex.props(styles.previewLead)}>
               {previewLive === "rendered" ? (
                 <span {...stylex.props(styles.previewLive)}>Updated</span>
               ) : null}
@@ -916,15 +928,20 @@ export function DocEditorPage() {
                 </button>
               ) : null}
             </div>
-            <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
-            <span
-              {...stylex.props(
-                styles.badge,
-                inConflict && styles.badgeConflict,
-              )}
-            >
-              {statusLabel ?? "…"}
-            </span>
+            <PreviewAddress
+              path={framePath ?? (!siteUrl ? "No site URL" : "Loading checkout…")}
+              enabled={previewUrl !== null}
+              routes={previewRoutes}
+              routesPending={!replica.ready}
+              onPath={onPreviewPath}
+              onReload={remountPreview}
+              onOpen={() => {
+                if (previewUrl) window.open(previewUrl, "_blank", "noopener,noreferrer");
+              }}
+            />
+            <div {...stylex.props(styles.sizeSwitch)}>
+              <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
+            </div>
           </div>
           {previewUrl ? (
             <PreviewViewport size={previewSize} dragging={dragging}>
@@ -989,7 +1006,7 @@ export function DocEditorPage() {
           <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>
+              <Text as="h1" size="sm" weight="medium" truncate>
                 {type}/{slug}
               </Text>
             </div>
@@ -1103,55 +1120,33 @@ export function DocEditorPage() {
                 </Text>
               ) : (
                 detailNames.map((name) => {
-                  const kind = fieldKinds[name];
-                  const composite = kind === "object" || kind === "array";
-                  const CustomInput = resolveFieldInput(studio, fieldDefs[name]);
+                  const field = 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 }));
-                          }}
-                        />
-                      ) : kind === "media" ? (
-                        <MediaFieldInput
-                          name={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,
-                            }));
-                          }}
-                        />
-                      )}
+                      <FieldControl
+                        name={name}
+                        field={field}
+                        value={frontmatter[name]}
+                        models={models}
+                        objects={objects}
+                        documentLists={documentLists}
+                        readOnly={aiEditing || parseFailed}
+                        blocksEditor={({ value, readOnly: blocksReadOnly, onChange: onBlocksChange }) => (
+                          <BlocksList
+                            blocks={blocksFromFrontmatter(value)}
+                            catalog={blocks}
+                            models={models}
+                            objects={objects}
+                            documentLists={documentLists}
+                            readOnly={blocksReadOnly}
+                            onChange={onBlocksChange}
+                          />
+                        )}
+                        onChange={(next) => {
+                          markEdited();
+                          setFrontmatter((prev) => omitField(prev, name, next));
+                        }}
+                      />
                     </Field>
                   );
                 })
@@ -1160,6 +1155,9 @@ export function DocEditorPage() {
                 <BlocksList
                   blocks={blocksFromFrontmatter(frontmatter[blocksField])}
                   catalog={blocks}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   focusBlock={blockFocus}
                   onChange={(next) => {
@@ -1171,6 +1169,9 @@ export function DocEditorPage() {
                 <BodyField
                   value={body}
                   catalog={richtext}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   onChange={(value) => {
                     markEdited();
@@ -1235,74 +1236,34 @@ const styles = stylex.create({
     flexShrink: 0,
     flexDirection: "column",
     overflow: "hidden",
-    backgroundColor: colors.bgSurface,
+    backgroundColor: colors.bgApp,
   },
   previewBar: {
-    display: "flex",
-    flexShrink: 0,
+    display: "grid",
+    gridTemplateColumns: "1fr minmax(0, 520px) 1fr",
     alignItems: "center",
-    justifyContent: "space-between",
+    flexShrink: 0,
     gap: space.md,
+    height: "44px",
+    boxSizing: "border-box",
     paddingInline: space.md,
-    paddingBlock: space.sm,
     borderBottomWidth: 1,
     borderBottomStyle: "solid",
     borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
     fontSize: type.xs,
     color: colors.textMuted,
   },
-  urlGroup: {
+  previewLead: {
     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: {
+    minWidth: 0,
+    justifySelf: "start",
     overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    fontFamily: type.mono,
+  },
+  sizeSwitch: {
+    justifySelf: "end",
   },
   previewLive: {
     flexShrink: 0,
@@ -1315,28 +1276,21 @@ const styles = stylex.create({
   editPage: {
     flexShrink: 0,
     borderWidth: 0,
-    borderRadius: 4,
+    borderRadius: radius.sm,
     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,
+    font: "inherit",
+    fontSize: type.xs,
+    fontWeight: 500,
     paddingInline: space.sm,
-    paddingBlock: 2,
-    textTransform: "uppercase",
-    letterSpacing: "0.04em",
-  },
-  badgeConflict: {
-    borderColor: colors.danger,
-    color: colors.danger,
+    paddingBlock: "2px",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
   },
   conflictBanner: {
     display: "flex",
@@ -1459,22 +1413,23 @@ const styles = stylex.create({
   toolbar: {
     display: "flex",
     flexShrink: 0,
-    flexWrap: "wrap",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: space.sm,
-    paddingInline: space.lg,
-    paddingBlock: space.sm,
+    gap: space.md,
+    height: "44px",
+    boxSizing: "border-box",
+    paddingInline: space.md,
     borderBottomWidth: 1,
     borderBottomStyle: "solid",
     borderBottomColor: colors.border,
+    backgroundColor: colors.bgSurface,
   },
   meta: {
     minWidth: 0,
   },
   actions: {
     display: "flex",
-    flexWrap: "wrap",
+    flexShrink: 0,
     gap: space.sm,
   },
   formWrap: {