@backmatter/studio 0.0.15 → 0.0.17

package/src/pages/DocEditorPage.tsx

@@ -5,6 +5,7 @@ import { useOutletContext, useParams, useSearchParams, Link, useNavigate } from
 import * as stylex from "@stylexjs/stylex";
 import {
   fetchDoc,
+  fetchDocs,
   notifyTreeChanged,
   type TreeChangeDetail,
   createPreviewTicket,
@@ -17,8 +18,11 @@ 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 { relationTargets } from "../fields/relation-targets";
+import { useReplicaState } from "../replica/useReplica";
 import { useSetEditorActions } from "../chrome/EditorActionsContext";
 import {
   DOC_CHANGED_EVENT,
@@ -46,6 +50,8 @@ import {
   persistPreviewPct,
   readPreviewPct,
 } from "./preview-split";
+import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
+import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
 import {
   editorPreviewPath,
   modelForType,
@@ -128,48 +134,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;
@@ -200,7 +164,31 @@ 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);
+      }
+    }
+    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);
@@ -214,6 +202,7 @@ export function DocEditorPage() {
   const [previewOffer, setPreviewOffer] = useState<PreviewChannelRef | null>(null);
   const [previewLive, setPreviewLive] = useState<"rendered" | "error" | null>(null);
   const [previewPct, setPreviewPct] = useState(readPreviewPct);
+  const [previewSize, setPreviewSize] = useState(readPreviewSize);
   const [dragging, setDragging] = useState(false);
   const [editEpoch, setEditEpoch] = useState(0);
   const [selection, setSelection] = useState<EditorSelection | null>(null);
@@ -302,6 +291,31 @@ export function DocEditorPage() {
     };
   }, [frameIdentity, previewPath, 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);
   }, [previewUrl]);
@@ -323,6 +337,7 @@ export function DocEditorPage() {
   }
 
   function onPreviewGrab(grab: PreviewGrabMessage) {
+    if (typeof grab.blockId !== "string" || !grab.blockId) return;
     const ids = blocksFromFrontmatter(latest.current.frontmatter[blocksFieldRef.current]).map(
       (block) => block.id,
     );
@@ -330,7 +345,13 @@ export function DocEditorPage() {
       grabRef: grab.ref,
       openRef: channelRef.current,
       blockIds: ids,
-      grab,
+      grab: {
+        blockId: grab.blockId,
+        blockType: grab.blockType,
+        blockIndex: grab.blockIndex,
+        quote: grab.quote,
+        shift: grab.shift,
+      },
     });
     if (decision.action === "add") {
       addPointer({
@@ -467,6 +488,11 @@ export function DocEditorPage() {
     setPreviewKey((k) => k + 1);
   }
 
+  function choosePreviewSize(size: PreviewSize) {
+    setPreviewSize(size);
+    persistPreviewSize(size);
+  }
+
   function updatePreviewPctFromPointer(clientX: number, clientY: number) {
     const split = splitRef.current;
     if (!split) return;
@@ -901,6 +927,7 @@ export function DocEditorPage() {
                 </button>
               ) : null}
             </div>
+            <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
             <span
               {...stylex.props(
                 styles.badge,
@@ -911,20 +938,22 @@ export function DocEditorPage() {
             </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,
-              )}
-            />
+            <PreviewViewport size={previewSize} dragging={dragging}>
+              <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,
+                )}
+              />
+            </PreviewViewport>
           ) : !siteUrl ? (
             <div {...stylex.props(styles.iframe, styles.previewEmpty)}>
               <Text as="p" size="sm" weight="medium">
@@ -1085,55 +1114,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>
                   );
                 })
@@ -1142,6 +1149,9 @@ export function DocEditorPage() {
                 <BlocksList
                   blocks={blocksFromFrontmatter(frontmatter[blocksField])}
                   catalog={blocks}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   focusBlock={blockFocus}
                   onChange={(next) => {
@@ -1153,6 +1163,9 @@ export function DocEditorPage() {
                 <BodyField
                   value={body}
                   catalog={richtext}
+                  models={models}
+                  objects={objects}
+                  documentLists={documentLists}
                   readOnly={aiEditing || parseFailed}
                   onChange={(value) => {
                     markEdited();

package/src/pages/PreviewSize.tsx

@@ -0,0 +1,181 @@
+// packages/studio/src/pages/PreviewSize.tsx
+import type { KeyboardEvent, ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import {
+  IconImac,
+  IconPhone,
+  IconTablet,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import { colors, radius } from "../styles/tokens.stylex";
+import { Tooltip } from "../ui/Tooltip";
+import {
+  previewFrameWidth,
+  type PreviewSize,
+} from "./preview-size";
+
+const OPTIONS: readonly { size: PreviewSize; label: string; icon: typeof IconImac }[] = [
+  { size: "desktop", label: "Desktop", icon: IconImac },
+  { size: "tablet", label: "Tablet", icon: IconTablet },
+  { size: "phone", label: "Phone", icon: IconPhone },
+];
+
+export function PreviewSizeSwitch({
+  size,
+  onSize,
+  disabled = false,
+}: {
+  size: PreviewSize;
+  onSize: (size: PreviewSize) => void;
+  disabled?: boolean;
+}) {
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    const index = OPTIONS.findIndex((option) => option.size === size);
+    const next =
+      event.key === "ArrowRight" ? OPTIONS[(index + 1) % OPTIONS.length]
+      : event.key === "ArrowLeft" ? OPTIONS[(index - 1 + OPTIONS.length) % OPTIONS.length]
+      : null;
+    if (!next) return;
+    event.preventDefault();
+    onSize(next.size);
+    event.currentTarget.querySelector<HTMLButtonElement>(`[data-preview-size="${next.size}"]`)?.focus();
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Preview size"
+      onKeyDown={onKeyDown}
+      {...stylex.props(styles.group)}
+    >
+      {OPTIONS.map((option) => {
+        const selected = option.size === size;
+        const Icon = option.icon;
+        return (
+          <Tooltip key={option.size} label={option.label}>
+            <button
+              type="button"
+              role="radio"
+              data-preview-size={option.size}
+              aria-label={option.label}
+              aria-checked={selected}
+              disabled={disabled}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onSize(option.size)}
+              {...stylex.props(
+                styles.option,
+                selected && styles.optionOn,
+                disabled && styles.optionDisabled,
+              )}
+            >
+              <Icon size={14} ariaHidden />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Centers a fixed-width preview and scrolls sideways when the pane is narrower. */
+export function PreviewViewport({
+  size,
+  dragging = false,
+  children,
+}: {
+  size: PreviewSize;
+  dragging?: boolean;
+  children: ReactNode;
+}) {
+  const width = previewFrameWidth(size);
+  const viewport = stylex.props(styles.viewport, dragging && styles.dragging);
+  const slot = stylex.props(styles.slot, width !== null && styles.slotFixed);
+  return (
+    <div className={viewport.className} style={viewport.style}>
+      <div
+        className={slot.className}
+        style={width === null ? slot.style : { ...slot.style, width }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  group: {
+    display: "inline-flex",
+    flexShrink: 0,
+    gap: "2px",
+    padding: "2px",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanelInset,
+  },
+  option: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "22px",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    color: colors.textMuted,
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    [hover]: {
+      ":hover:not(:disabled)": {
+        color: colors.text,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  optionOn: {
+    color: colors.text,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
+  },
+  optionDisabled: {
+    cursor: "default",
+    color: colors.border,
+  },
+  viewport: {
+    display: "flex",
+    flex: 1,
+    alignItems: "stretch",
+    justifyContent: "center",
+    minWidth: 0,
+    minHeight: 0,
+    overflowX: "auto",
+    overflowY: "hidden",
+  },
+  dragging: {
+    pointerEvents: "none",
+  },
+  slot: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minWidth: 0,
+    minHeight: 0,
+    backgroundColor: colors.bgSurface,
+  },
+  slotFixed: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+    outlineWidth: 1,
+    outlineStyle: "solid",
+    outlineColor: colors.border,
+  },
+});

package/src/pages/RenderedBody.tsx

@@ -9,7 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import * as stylex from "@stylexjs/stylex";
-import type { BlockSnapshot } from "../api";
+import type { BlockSnapshot, SchemaField } from "../api";
 import { contentBlockFields, contentBlockLabel, contentBlockProps } from "../content-blocks";
 import { colors, radius, space } from "../styles/tokens.stylex";
 import {
@@ -40,16 +40,28 @@ export type RenderedBodyHandle = {
 
 const BODY_HOST = "body";
 
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocumentLists = Record<
+  string,
+  Array<{ slug: string; frontmatter: Record<string, unknown> }>
+>;
+
 export const RenderedBody = forwardRef<
   RenderedBodyHandle,
   {
     value: string;
     catalog?: Array<BlockSnapshot & { label?: string }>;
+    models: ModelRef[];
+    objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+    documentLists?: RelationDocumentLists;
     readOnly?: boolean;
     labelledBy: string;
     onChange: (value: string) => void;
   }
->(function RenderedBody({ value, catalog = [], readOnly, labelledBy, onChange }, ref) {
+>(function RenderedBody(
+  { value, catalog = [], models, objects = [], documentLists, readOnly, labelledBy, onChange },
+  ref,
+) {
   const local = useRef(value);
   const hosts = useRef(new Map<string, HTMLElement>());
   const linking = useRef(false);
@@ -218,6 +230,9 @@ export const RenderedBody = forwardRef<
           title={contentBlockLabel(settings.def.name)}
           fields={contentBlockFields(settings.def)}
           value={contentBlockProps(settings.block.markdown, settings.def.name)}
+          models={models}
+          objects={objects}
+          documentLists={documentLists}
           readOnly={readOnly}
           onOpenChange={(open) => {
             if (!open) setSettingsId(null);

package/src/pages/SettingsGeneralPage.tsx

@@ -7,6 +7,8 @@ import {
   rotateHostToken,
   rotatePreviewToken,
 } from "../api";
+import { publicContentApiUrl } from "../chrome/content-api-url";
+import { useReplicaState } from "../replica/useReplica";
 import { hostEnvSnippet } from "./host-env";
 import { isStudioDev, publicApiUrl } from "../studio-config";
 import { revalidateWebhookUrl } from "./preview-url";
@@ -24,6 +26,7 @@ export function SettingsGeneralPage() {
   const [previewTokenOnce, setPreviewTokenOnce] = useState<string | null>(null);
   const [hostTokenOnce, setHostTokenOnce] = useState<string | null>(null);
   const [copiedId, setCopiedId] = useState(false);
+  const [copiedApi, setCopiedApi] = useState(false);
   const [copiedEnv, setCopiedEnv] = useState(false);
   const [siteUrl, setSiteUrl] = useState(workspace.siteUrls?.[0] ?? "");
   const [error, setError] = useState<string | null>(null);
@@ -34,13 +37,25 @@ export function SettingsGeneralPage() {
   const webhookUrl = revalidateWebhookUrl(siteUrl);
 
   useEffect(() => {
-    if (!copiedId && !copiedEnv) return;
+    if (!copiedId && !copiedApi && !copiedEnv) return;
     const id = window.setTimeout(() => {
       setCopiedId(false);
+      setCopiedApi(false);
       setCopiedEnv(false);
     }, 1500);
     return () => window.clearTimeout(id);
-  }, [copiedId, copiedEnv]);
+  }, [copiedId, copiedApi, copiedEnv]);
+
+  const git = useReplicaState().git(workspace.id);
+  const docsUrl = publicContentApiUrl({
+    apiUrl: publicApiUrl(),
+    workspaceId: workspace.id,
+    branch: git?.currentBranch,
+    defaultBranch: git?.defaultBranch,
+  });
+  const branchLocked = Boolean(
+    git?.currentBranch && git.defaultBranch && git.currentBranch !== git.defaultBranch,
+  );
 
   const envSnippet = hostEnvSnippet({
     workspaceId: workspace.id,
@@ -197,6 +212,38 @@ export function SettingsGeneralPage() {
             backmatter.config.ts workspaceId · public URLs use this id, not the slug
           </p>
         </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Content API
+          </Text>
+          <div {...stylex.props(styles.idRow)}>
+            <a
+              href={docsUrl}
+              target="_blank"
+              rel="noreferrer"
+              {...stylex.props(styles.pre, styles.idPre, styles.apiLink)}
+            >
+              {docsUrl}
+            </a>
+            <Button
+              variant="secondary"
+              aria-label={copiedApi ? "Copied content API URL" : "Copy content API URL"}
+              onClick={() => {
+                void navigator.clipboard.writeText(docsUrl).then(
+                  () => setCopiedApi(true),
+                  () => setCopiedApi(false),
+                );
+              }}
+            >
+              {copiedApi ? "Copied" : "Copy"}
+            </Button>
+          </div>
+          <p {...stylex.props(styles.caption)}>
+            {branchLocked
+              ? "This branch needs the content token below."
+              : "Default branch is public — no token. URLs use the workspace id."}
+          </p>
+        </Panel>
         <Panel>
           <Text as="h2" size="lg" weight="medium">
             Host environment
@@ -358,6 +405,8 @@ export function relativeTime(iso: string, now = Date.now()): string {
   return `${Math.round(hours / 24)}d ago`;
 }
 
+const hover = "@media (hover: hover)";
+
 const styles = stylex.create({
   block: {
     marginTop: space.md,
@@ -379,6 +428,22 @@ const styles = stylex.create({
     flex: 1,
     minWidth: 0,
   },
+  apiLink: {
+    display: "block",
+    color: colors.text,
+    textDecoration: "none",
+    [hover]: {
+      ":hover": {
+        textDecoration: "underline",
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+  },
   caption: {
     marginTop: space.sm,
     marginBottom: 0,