@backmatter/studio 0.0.11 → 0.0.13

package/src/pages/DocEditorPage.tsx

@@ -62,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)";
@@ -215,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 } =
@@ -254,6 +266,8 @@ 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(
@@ -307,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;
@@ -323,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);
@@ -352,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);
@@ -371,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);
@@ -1066,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",