@backmatter/studio 0.0.10 → 0.0.12

package/src/pages/BlocksList.tsx

@@ -1,5 +1,5 @@
 // packages/studio/src/pages/BlocksList.tsx
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { RestrictToVerticalAxis } from "@dnd-kit/abstract/modifiers";
 import { DragDropProvider } from "@dnd-kit/react";
 import { isSortable, useSortable } from "@dnd-kit/react/sortable";
@@ -92,6 +92,7 @@ function BlockItem({
     <div
       ref={ref}
       data-block-item=""
+      data-block-id={block.id}
       {...stylex.props(styles.item, isDragging && styles.itemDragging)}
     >
       <div {...stylex.props(styles.itemBar)}>
@@ -185,14 +186,28 @@ export function BlocksList({
   blocks,
   catalog,
   readOnly,
+  focusBlock,
   onChange,
 }: {
   blocks: BlockInstance[];
   catalog: BlockSnapshot[];
   readOnly?: boolean;
+  focusBlock?: { id: string; nonce: number } | null;
   onChange: (next: BlockInstance[]) => void;
 }) {
   const [openId, setOpenId] = useState<string | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!focusBlock) return;
+    setOpenId(focusBlock.id);
+    const id = focusBlock.id;
+    const frame = requestAnimationFrame(() => {
+      const row = listRef.current?.querySelector(`[data-block-id="${CSS.escape(id)}"]`);
+      row?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focusBlock]);
 
   function add(type: string) {
     const id = crypto.randomUUID();
@@ -219,7 +234,7 @@ export function BlocksList({
             onChange(reorderBlock(blocks, String(source.id), source.index));
           }}
         >
-          <div {...stylex.props(styles.list)}>
+          <div {...stylex.props(styles.list)} ref={listRef}>
             {blocks.map((block, index) => (
               <BlockItem
                 key={block.id}

package/src/pages/DocEditorPage.tsx

@@ -49,9 +49,10 @@ import {
 import {
   editorPreviewPath,
   modelForType,
-  previewSiteUrl,
-  primarySiteUrl,
   onSitePreviewUrl,
+  previewEnableUrl,
+  previewFrameIdentity,
+  primarySiteUrl,
   studioIsOnSite,
   productionDocUrl,
 } from "./preview-url";
@@ -61,7 +62,16 @@ 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";
+import { editorGrabAction } from "./editor-grab";
+import { useChatUI } from "../chat/ChatProvider";
+import { POINTER_ARM_EVENT } from "../chat/pointer-arm";
+import { registerPreviewHighlight } from "../preview-highlight";
+import {
+  createWindowPreviewTransport,
+  samePreviewRef,
+  type PreviewChannelRef,
+  type PreviewGrabMessage,
+} from "@backmatter/core/preview";
 
 const AUTOSAVE_MS = 400;
 const hover = "@media (hover: hover)";
@@ -214,6 +224,9 @@ export function DocEditorPage() {
   const splitRef = useRef<HTMLDivElement>(null);
   const previewFrameRef = useRef<HTMLIFrameElement>(null);
   const previewSession = useRef<ReturnType<typeof bindPreviewEditor> | null>(null);
+  const { addPointer, setPreviewPointer, setPointerHighlight } = useChatUI();
+  const [blockFocus, setBlockFocus] = useState<{ id: string; nonce: number } | null>(null);
+  const blockFocusNonce = useRef(0);
   const navigate = useNavigate();
   const wide = useWideLayout();
   const { setStatus: setEditorStatus, clear: clearEditorStatus } =
@@ -253,33 +266,39 @@ export function DocEditorPage() {
   const detailNames = fieldNames.filter((name) => fieldKinds[name] !== "blocks");
   const blocksField =
     fieldNames.find((name) => fieldKinds[name] === "blocks") ?? "blocks";
+  const blocksFieldRef = useRef(blocksField);
+  blocksFieldRef.current = blocksField;
   const siteUrl = primarySiteUrl(workspace.siteUrls ?? []);
   const liveUrl = productionDocUrl(siteUrl, modelForType(models, type), locale, slug);
+  const previewPath = editorPreviewPath(
+    modelForType(models, type),
+    slug,
+    locale,
+    branch,
+    tree,
+  );
+  // Strings only. A replica refresh builds new models and siteUrls arrays
+  // with the same contents; that must not mint a ticket and reload the frame.
+  const frameIdentity = previewFrameIdentity({
+    siteUrl,
+    path: showPreview ? previewPath : null,
+    branch,
+    tree,
+  });
 
   useEffect(() => {
-    if (!showPreview) {
-      setPreviewUrl(null);
-      return;
-    }
-    const redirect = editorPreviewPath(
-      modelForType(models, type),
-      slug,
-      locale,
-      branch,
-      tree,
-    );
-    if (!redirect || !workspaceId || !siteUrl) {
+    if (!frameIdentity || !previewPath || !workspaceId || !siteUrl) {
       setPreviewUrl(null);
       return;
     }
     if (studioIsOnSite(siteUrl, window.location.origin)) {
-      setPreviewUrl(onSitePreviewUrl(siteUrl, redirect));
+      setPreviewUrl(onSitePreviewUrl(siteUrl, previewPath));
       return;
     }
     let cancelled = false;
-    void createPreviewTicket(workspaceId, { redirect, branch, tree })
+    void createPreviewTicket(workspaceId, { redirect: previewPath, branch, tree })
       .then((res) => {
-        if (!cancelled) setPreviewUrl(previewSiteUrl(workspace.siteUrls ?? [], res.ticket));
+        if (!cancelled) setPreviewUrl(previewEnableUrl(siteUrl, res.ticket));
       })
       .catch(() => {
         if (!cancelled) setPreviewUrl(null);
@@ -287,7 +306,7 @@ export function DocEditorPage() {
     return () => {
       cancelled = true;
     };
-  }, [showPreview, workspaceId, workspace.siteUrls, siteUrl, models, type, slug, locale, branch, tree]);
+  }, [frameIdentity, previewPath, workspaceId, siteUrl, branch, tree]);
 
   useEffect(() => {
     setPreviewLoading(true);
@@ -302,6 +321,57 @@ export function DocEditorPage() {
     setPreviewLive(null);
   }, [previewUrl]);
 
+  function onPreviewHello(hello: PreviewChannelRef, capabilities?: string[]) {
+    const canPoint =
+      samePreviewRef(hello, channelRef.current) && (capabilities?.includes("point") ?? false);
+    setPreviewPointer(canPoint);
+    window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
+  }
+
+  function onPreviewGrab(grab: PreviewGrabMessage) {
+    const ids = blocksFromFrontmatter(latest.current.frontmatter[blocksFieldRef.current]).map(
+      (block) => block.id,
+    );
+    const decision = editorGrabAction({
+      grabRef: grab.ref,
+      openRef: channelRef.current,
+      blockIds: ids,
+      grab,
+    });
+    if (decision.action === "add") {
+      addPointer({
+        locale: channelRef.current.locale,
+        type: channelRef.current.type,
+        slug: channelRef.current.slug,
+        blockId: decision.blockId,
+        blockType: decision.blockType,
+        blockIndex: decision.blockIndex,
+        quote: decision.quote,
+      });
+    }
+    if (decision.action === "open") {
+      blockFocusNonce.current += 1;
+      setBlockFocus({ id: decision.blockId, nonce: blockFocusNonce.current });
+    }
+  }
+
+  function onPreviewPoint(on: boolean) {
+    if (!on) {
+      window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
+    }
+  }
+
+  const previewHandlers = useRef({
+    hello: onPreviewHello,
+    grab: onPreviewGrab,
+    point: onPreviewPoint,
+  });
+  previewHandlers.current = {
+    hello: onPreviewHello,
+    grab: onPreviewGrab,
+    point: onPreviewPoint,
+  };
+
   useEffect(() => {
     const frame = previewFrameRef.current;
     if (!frame || !siteUrl) return;
@@ -318,6 +388,9 @@ export function DocEditorPage() {
       ref: () => channelRef.current,
       onOffer: setPreviewOffer,
       onStatus: setPreviewLive,
+      onHello: (hello, capabilities) => previewHandlers.current.hello(hello, capabilities),
+      onGrab: (grab) => previewHandlers.current.grab(grab),
+      onPoint: (on) => previewHandlers.current.point(on),
     });
     previewSession.current = session;
     if (editEpochRef.current > 0) session.setDoc(latest.current);
@@ -347,6 +420,9 @@ export function DocEditorPage() {
       ref: () => channelRef.current,
       onOffer: setPreviewOffer,
       onStatus: setPreviewLive,
+      onHello: (hello, capabilities) => previewHandlers.current.hello(hello, capabilities),
+      onGrab: (grab) => previewHandlers.current.grab(grab),
+      onPoint: (on) => previewHandlers.current.point(on),
     });
     previewSession.current = session;
     if (editEpochRef.current > 0) session.setDoc(latest.current);
@@ -366,6 +442,28 @@ export function DocEditorPage() {
     };
   }, [embed]);
 
+  useEffect(() => {
+    function onArm(event: Event) {
+      const on = (event as CustomEvent<{ on?: boolean }>).detail?.on === true;
+      previewSession.current?.point(on);
+    }
+    window.addEventListener(POINTER_ARM_EVENT, onArm);
+    return () => window.removeEventListener(POINTER_ARM_EVENT, onArm);
+  }, []);
+
+  useEffect(() => {
+    setPointerHighlight("channel");
+    const stop = registerPreviewHighlight((blockId) => {
+      previewSession.current?.highlight(blockId);
+    });
+    return () => {
+      stop();
+      setPointerHighlight("local");
+      setPreviewPointer(false);
+      previewSession.current?.point(false);
+    };
+  }, [setPointerHighlight, setPreviewPointer]);
+
   useEffect(() => {
     if (editEpoch === 0) return;
     previewSession.current?.setDoc(latest.current);
@@ -539,13 +637,12 @@ export function DocEditorPage() {
       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.
+    // Branch HEAD moved (teammate push / pull / commit). A clean doc reloads its
+    // fields. The preview frame stays mounted: the page follows the same move
+    // on its SSE stream and refreshes in place.
     function onHeadChanged() {
       if (docStatusRef.current === "clean") {
         onChanged();
-        remountPreview();
         return;
       }
       void fetchDoc(workspaceId, locale, type, slug)
@@ -1062,6 +1159,7 @@ export function DocEditorPage() {
                   blocks={blocksFromFrontmatter(frontmatter[blocksField])}
                   catalog={blocks}
                   readOnly={aiEditing || parseFailed}
+                  focusBlock={blockFocus}
                   onChange={(next) => {
                     markEdited();
                     setFrontmatter((prev) => ({ ...prev, [blocksField]: next }));

package/src/pages/EmbedPublishPage.tsx

@@ -12,12 +12,17 @@ import {
   notifyTreeChanged,
   publishCommittedFiles,
   resolveDoc,
-  type ApiError,
   type ChangeStatus,
   type GitChange,
   type GitState,
 } from "../api";
 import { statusBarAction } from "../chrome/status-bar-action";
+import {
+  explainCommitError,
+  problemsForRef,
+  type CommitErrorView,
+} from "../chrome/commit-error";
+import { CommitFailureNotice } from "../chrome/commit-failure";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { popup } from "../ui/popup";
 import { canPublish } from "../workspace/permissions";
@@ -33,18 +38,6 @@ function parentOrigin(): string {
   }
 }
 
-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}`;
 }
@@ -72,6 +65,7 @@ export function EmbedPublishPage({
   const [role, setRole] = useState("viewer");
   const [message, setMessage] = useState("");
   const [error, setError] = useState<string | null>(null);
+  const [commitFailure, setCommitFailure] = useState<CommitErrorView | null>(null);
   const [committing, setCommitting] = useState(false);
   const [resolvingKey, setResolvingKey] = useState<string | null>(null);
 
@@ -157,6 +151,7 @@ export function EmbedPublishPage({
     if (committing || action !== "commit" || changes.length === 0) return;
     setCommitting(true);
     setError(null);
+    setCommitFailure(null);
     try {
       const result = await commitWorkspace(workspaceId, message);
       setMessage("");
@@ -168,7 +163,7 @@ export function EmbedPublishPage({
       }
       setGit(await fetchGit(workspaceId));
     } catch (err) {
-      setError(formatCommitError(err));
+      setCommitFailure(explainCommitError(err));
     } finally {
       setCommitting(false);
     }
@@ -225,18 +220,23 @@ export function EmbedPublishPage({
           ? "Nothing to publish"
           : `${changes.length} ${changes.length === 1 ? "file" : "files"} → ${branch}`}
       </p>
+      {commitFailure ? <CommitFailureNotice failure={commitFailure} /> : null}
       {changes.length > 0 ? (
         <ul {...stylex.props(styles.files)}>
-          {changes.map((doc) => (
-            <li key={changeKey(doc)}>
-              <div {...stylex.props(styles.file)}>
-                <span {...stylex.props(styles.fileName)}>
-                  {doc.type}/{doc.slug}
-                </span>
-                <span {...stylex.props(popup.itemMeta)}>{STATUS_LABEL[doc.status]}</span>
-              </div>
-            </li>
-          ))}
+          {changes.map((doc) => {
+            const invalid =
+              problemsForRef(commitFailure, `${doc.type}/${doc.slug}`).length > 0;
+            return (
+              <li key={changeKey(doc)}>
+                <div {...stylex.props(styles.file)}>
+                  <span {...stylex.props(styles.fileName, invalid && styles.invalidName)}>
+                    {doc.type}/{doc.slug}
+                  </span>
+                  <span {...stylex.props(popup.itemMeta)}>{STATUS_LABEL[doc.status]}</span>
+                </div>
+              </li>
+            );
+          })}
         </ul>
       ) : null}
       {changes.length > 0 ? <div {...stylex.props(popup.separator)} /> : null}
@@ -311,6 +311,9 @@ const styles = stylex.create({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
   },
+  invalidName: {
+    color: colors.danger,
+  },
   footer: {
     display: "flex",
     flexDirection: "column",