@backmatter/studio 0.0.11 → 0.0.12

package/src/pages/document-paint.ts

@@ -0,0 +1,79 @@
+// packages/studio/src/pages/document-paint.ts
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { BlockSnapshot } from "../api";
+import { ContentBlockView, contentBlockProps } from "../content-blocks";
+import { codeParts, type BodyBlock } from "./body-blocks";
+import { editorMdxComponents } from "./body-mdx";
+import { compileBody } from "./compile-body";
+
+/** Paints the body into one editing host. Host blocks are objects inside that host. */
+export async function documentNodes(
+  blocks: BodyBlock[],
+  catalog: Array<BlockSnapshot & { label?: string }>,
+): Promise<HTMLElement[]> {
+  if (blocks.length === 0) return [emptyParagraph()];
+  const nodes: HTMLElement[] = [];
+  for (const block of blocks) nodes.push(...(await nodesForBlock(block, catalog)));
+  return nodes;
+}
+
+async function nodesForBlock(
+  block: BodyBlock,
+  catalog: Array<BlockSnapshot & { label?: string }>,
+): Promise<HTMLElement[]> {
+  const catalogBlock =
+    block.kind === "jsx" ? catalog.find((item) => item.name === block.jsxName) : undefined;
+  if (catalogBlock) return [atom(block, catalogBlock.name)];
+  if (block.kind === "code") return [codeBlock(block)];
+  return textBlocks(block);
+}
+
+function atom(block: BodyBlock, name: string): HTMLElement {
+  const node = document.createElement("div");
+  node.setAttribute("contenteditable", "false");
+  node.setAttribute("data-body-atom", block.id);
+  node.setAttribute("data-body-markdown", encodeURIComponent(block.markdown));
+  node.innerHTML = renderToStaticMarkup(
+    createElement(ContentBlockView, {
+      name,
+      props: contentBlockProps(block.markdown, name),
+    }),
+  );
+  return node;
+}
+
+function codeBlock(block: BodyBlock): HTMLElement {
+  const pre = document.createElement("pre");
+  pre.setAttribute("data-lang", block.lang ?? codeParts(block.markdown).lang);
+  const code = document.createElement("code");
+  code.textContent = codeParts(block.markdown).code;
+  pre.append(code);
+  return pre;
+}
+
+async function textBlocks(block: BodyBlock): Promise<HTMLElement[]> {
+  if (!block.markdown.trim()) return [emptyParagraph()];
+  const result = await compileBody(block.markdown, editorMdxComponents(block.jsxName)).catch(
+    () => ({ node: null, error: "Could not render this body" }),
+  );
+  const html =
+    result.node == null
+      ? ""
+      : renderToStaticMarkup(result.node).replace(/<link\b[^>]*>/g, "");
+  const wrap = document.createElement("div");
+  wrap.innerHTML = html;
+  const elements = [...wrap.children].filter(
+    (node): node is HTMLElement => node instanceof HTMLElement,
+  );
+  if (elements.length > 0) return elements;
+  const paragraph = document.createElement("p");
+  paragraph.textContent = block.markdown;
+  return [paragraph];
+}
+
+function emptyParagraph(): HTMLElement {
+  const paragraph = document.createElement("p");
+  paragraph.append(document.createElement("br"));
+  return paragraph;
+}

package/src/pages/editor-grab.ts

@@ -0,0 +1,39 @@
+// packages/studio/src/pages/editor-grab.ts
+import { samePreviewRef, type PreviewChannelRef } from "@backmatter/core/preview";
+
+export type EditorGrab = {
+  blockId: string;
+  blockType: string | null;
+  blockIndex: number | null;
+  quote: string;
+  shift: boolean;
+};
+
+export type EditorGrabDecision =
+  | { action: "ignore" }
+  | {
+      action: "add";
+      blockId: string;
+      blockType: string | null;
+      blockIndex: number | null;
+      quote: string;
+    }
+  | { action: "open"; blockId: string };
+
+export function editorGrabAction(input: {
+  grabRef: PreviewChannelRef;
+  openRef: PreviewChannelRef;
+  blockIds: readonly string[];
+  grab: EditorGrab;
+}): EditorGrabDecision {
+  if (!samePreviewRef(input.grabRef, input.openRef)) return { action: "ignore" };
+  if (!input.blockIds.includes(input.grab.blockId)) return { action: "ignore" };
+  if (input.grab.shift) return { action: "open", blockId: input.grab.blockId };
+  return {
+    action: "add",
+    blockId: input.grab.blockId,
+    blockType: input.grab.blockType,
+    blockIndex: input.grab.blockIndex,
+    quote: input.grab.quote,
+  };
+}

package/src/pages/html-to-markdown.ts

@@ -1,6 +1,32 @@
 // packages/studio/src/pages/html-to-markdown.ts
 import { codeParts, replaceJsxChildren, type BodyBlock } from "./body-blocks";
 
+/** Reads one body field, including a host block stored on its object. */
+export function markdownFromDocument(root: HTMLElement): string {
+  const parts: string[] = [];
+  for (const node of root.childNodes) {
+    if (!(node instanceof HTMLElement)) {
+      const text = (node.textContent ?? "").replace(/\u00a0/g, " ").trim();
+      if (text) parts.push(text);
+      continue;
+    }
+    if (node.hasAttribute("data-body-atom")) {
+      const stored = node.getAttribute("data-body-markdown");
+      if (stored) parts.push(decodeURIComponent(stored));
+      continue;
+    }
+    if (node.tagName === "PRE") {
+      const code = (node.querySelector("code")?.textContent ?? "").replace(/\n$/, "");
+      const lang = node.getAttribute("data-lang") ?? "";
+      parts.push("```" + lang + "\n" + code + "\n```");
+      continue;
+    }
+    const markdown = elementToMarkdown(node);
+    if (markdown) parts.push(markdown);
+  }
+  return parts.join("\n\n");
+}
+
 export function markdownFromEditable(root: HTMLElement, block: BodyBlock): string {
   if (block.kind === "code") {
     const code = textOf(root.querySelector("code") ?? root).replace(/\n$/, "");

package/src/pages/preview-bridge.ts

@@ -7,6 +7,7 @@ import {
   samePreviewRef,
   type PreviewChannelRef,
   type PreviewEditorSession,
+  type PreviewGrabMessage,
   type PreviewSchedule,
   type PreviewTransport,
   type PreviewWindowLike,
@@ -17,15 +18,21 @@ export function bindPreviewEditor(options: {
   ref: () => PreviewChannelRef;
   onOffer: (ref: PreviewChannelRef | null) => void;
   onStatus: (state: "rendered" | "error") => void;
+  onHello?: (ref: PreviewChannelRef, capabilities?: string[]) => void;
+  onGrab?: (grab: PreviewGrabMessage) => void;
+  onPoint?: (on: boolean) => void;
   schedule?: PreviewSchedule;
 }): PreviewEditorSession {
   return createPreviewEditor({
     transport: options.transport,
     ref: options.ref,
     schedule: options.schedule,
-    onHello: (hello) => {
+    onHello: (hello, capabilities) => {
       options.onOffer(samePreviewRef(options.ref(), hello) ? null : hello);
+      options.onHello?.(hello, capabilities);
     },
+    onGrab: (grab) => options.onGrab?.(grab),
+    onPoint: (on) => options.onPoint?.(on),
     onStatus: (status) => options.onStatus(status.state),
   });
 }

package/src/pages/selection-format.ts

@@ -9,10 +9,13 @@ export function blockFormatOf(host: HTMLElement, range?: Range): BlockFormat {
   return formatOfTag(current.tagName);
 }
 
-export function applyBlockFormat(host: HTMLElement, format: BlockFormat, range?: Range): void {
+export function applyBlockFormat(host: HTMLElement, format: BlockFormat, range?: Range): HTMLElement {
   const current = blockElement(host, range);
   const html = current ? contentsHtml(current) : host.innerHTML;
-  host.replaceChildren(createBlock(format, html));
+  const next = createBlock(format, html);
+  if (current?.parentElement) current.replaceWith(next);
+  else host.replaceChildren(next);
+  return next;
 }
 
 export function marksAt(range: Range): { bold: boolean; italic: boolean; href: string | null } {

package/src/preview-highlight.ts

@@ -0,0 +1,16 @@
+// packages/studio/src/preview-highlight.ts
+
+type SendHighlight = (blockId: string | null) => void;
+
+let sendHighlight: SendHighlight | null = null;
+
+export function registerPreviewHighlight(send: SendHighlight): () => void {
+  sendHighlight = send;
+  return () => {
+    if (sendHighlight === send) sendHighlight = null;
+  };
+}
+
+export function emitPreviewHighlight(blockId: string | null) {
+  sendHighlight?.(blockId);
+}

package/src/preview-pointer-host.ts

@@ -0,0 +1,30 @@
+// packages/studio/src/preview-pointer-host.ts
+
+export type PreviewPointerHost = {
+  armFromDevbar: () => void;
+  disarmFromDevbar: () => void;
+};
+
+let host: PreviewPointerHost | null = null;
+const listeners = new Set<(next: PreviewPointerHost | null) => void>();
+
+export function currentPreviewPointerHost(): PreviewPointerHost | null {
+  return host;
+}
+
+export function registerPreviewPointerHost(next: PreviewPointerHost): () => void {
+  host = next;
+  for (const listener of listeners) listener(next);
+  return () => {
+    if (host !== next) return;
+    host = null;
+    for (const listener of listeners) listener(null);
+  };
+}
+
+export function subscribePreviewPointerHost(
+  listener: (next: PreviewPointerHost | null) => void,
+): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}

package/src/shell-resets.css

@@ -153,3 +153,16 @@ html[data-theme="dark"]:has(.backmatter-studio)
 [data-no-ring]:focus-visible {
   outline: none;
 }
+
+:is(
+    .backmatter-studio,
+    [data-backmatter-panel],
+    [data-base-ui-portal],
+    [data-selection-bar]
+  )
+  [data-no-ring]:focus-visible,
+html[data-theme="dark"]:has(.backmatter-studio)
+  :is(.backmatter-studio, [data-base-ui-portal], [data-selection-bar])
+  [data-no-ring]:focus-visible {
+  outline: none;
+}

package/src/site-changes.ts

@@ -0,0 +1,46 @@
+// packages/studio/src/site-changes.ts
+// Uncommitted files for the on-site bar. The publish control reads this count
+// before its panel is opened, and a chat write refreshes it.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { fetchGit } from "./api";
+
+export function useUncommittedCount(workspaceId: string | null): {
+  count: number;
+  setCount: (count: number) => void;
+} {
+  const [count, setCountState] = useState(0);
+  const request = useRef(0);
+
+  const setCount = useCallback((next: number) => {
+    request.current += 1;
+    setCountState(next);
+  }, []);
+
+  useEffect(() => {
+    if (!workspaceId) {
+      setCount(0);
+      return;
+    }
+    let stopped = false;
+    const load = () => {
+      const id = ++request.current;
+      void fetchGit(workspaceId)
+        .then((next) => {
+          if (stopped || id !== request.current) return;
+          setCountState(next.changes.length);
+        })
+        .catch(() => {
+          /* A failed status read leaves the last count in place. */
+        });
+    };
+    load();
+    window.addEventListener("backmatter:tree-changed", load);
+    return () => {
+      stopped = true;
+      request.current += 1;
+      window.removeEventListener("backmatter:tree-changed", load);
+    };
+  }, [workspaceId, setCount]);
+
+  return { count, setCount };
+}

package/src/site-pointer.ts

@@ -59,7 +59,7 @@ export function installSitePointer(
   options: {
     bar: () => Element | null;
     ignore?: (target: EventTarget | null) => boolean;
-    onGrab: (grab: PointerGrab) => void;
+    onGrab: (grab: PointerGrab, shiftKey: boolean) => void;
     onEscape?: () => void;
   },
 ): SitePointer {
@@ -109,7 +109,7 @@ export function installSitePointer(
     event.stopPropagation();
     const target = event.target instanceof Element ? event.target : null;
     const grab = grabAt(target, options.bar());
-    if (grab) options.onGrab(grab);
+    if (grab) options.onGrab(grab, isOpenModifier(event));
   }
 
   function onKey(event: KeyboardEvent) {
@@ -180,9 +180,33 @@ function createPointerOutline(doc: Document): HTMLDivElement {
   return el;
 }
 
+/** Command on macOS, Ctrl elsewhere. The grab still carries this as `shift`. */
+export function isOpenModifier(event: { metaKey: boolean; ctrlKey: boolean }): boolean {
+  return event.metaKey || event.ctrlKey;
+}
+
+function visibleRect(target: Element): { left: number; top: number; width: number; height: number } | null {
+  const own = target.getBoundingClientRect();
+  if (own.width >= 1 || own.height >= 1) return own;
+  let left = Infinity;
+  let top = Infinity;
+  let right = -Infinity;
+  let bottom = -Infinity;
+  for (const node of target.querySelectorAll("*")) {
+    const rect = node.getBoundingClientRect();
+    if (rect.width < 1 && rect.height < 1) continue;
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+  }
+  if (!Number.isFinite(left)) return null;
+  return { left, top, width: right - left, height: bottom - top };
+}
+
 function positionPointerOutline(outline: HTMLDivElement, target: Element) {
-  const rect = target.getBoundingClientRect();
-  if (rect.width < 1 && rect.height < 1) {
+  const rect = visibleRect(target);
+  if (!rect || (rect.width < 1 && rect.height < 1)) {
     outline.style.display = "none";
     return;
   }
@@ -242,8 +266,12 @@ function repositionHover() {
   positionPointerOutline(hoverOutline, hoverTarget);
 }
 
-/** Outline a page element while a pointer chip is hovered. Pass null to clear. */
-export function highlightPointedElement(doc: Document, target: Element | null) {
+/** Outline a page element. Pass null to clear. Chip hover scrolls; a held modifier does not. */
+export function highlightPointedElement(
+  doc: Document,
+  target: Element | null,
+  options?: { scroll?: boolean },
+) {
   if (!target) {
     hoverOutline?.remove();
     hoverOutline = null;
@@ -264,6 +292,11 @@ export function highlightPointedElement(doc: Document, target: Element | null) {
     doc.addEventListener("scroll", repositionHover, true);
     doc.defaultView?.addEventListener("resize", repositionHover);
   }
+  const scroll = options?.scroll !== false;
+  if (!scroll) {
+    positionPointerOutline(hoverOutline, target);
+    return;
+  }
   target.scrollIntoView({ block: "nearest", inline: "nearest" });
   requestAnimationFrame(() => {
     if (hoverTarget === target && hoverOutline) positionPointerOutline(hoverOutline, target);

package/src/site-widget.tsx

@@ -14,7 +14,13 @@ import { DOC_CHANGED_EVENT, EditorFocusProvider, useEditorFocus } from "./chrome
 import { matchAppHotkey } from "./chrome/hotkeys";
 import { EmbedPublishPage } from "./pages/EmbedPublishPage";
 import { SiteBar } from "./site-bar";
+import { useUncommittedCount } from "./site-changes";
 import { installSitePointer } from "./site-pointer";
+import {
+  currentPreviewPointerHost,
+  subscribePreviewPointerHost,
+  type PreviewPointerHost,
+} from "./preview-pointer-host";
 import { lightTheme } from "./styles/themes";
 import { configureStudio } from "./studio-config";
 import { applyThemeClass } from "./theme/apply-theme-class";
@@ -91,7 +97,9 @@ export function SiteWidget({
 
   const [chatOpen, setChatOpen] = useState(false);
   const [publishOpen, setPublishOpen] = useState(false);
-  const [changeCount, setChangeCount] = useState(0);
+  const { count: changeCount, setCount: setChangeCount } = useUncommittedCount(
+    doc?.workspaceId ?? null,
+  );
   const [publishAnchor, setPublishAnchor] = useState<DOMRect | null>(null);
   const label = doc ? `${doc.type}/${doc.slug}` : "No document";
   const onPublishAnchor = useCallback((rect: DOMRect | null) => {
@@ -249,34 +257,69 @@ function SitePointer({ doc }: { doc: SiteWidgetDoc }) {
   docRef.current = doc;
 
   useEffect(() => {
-    const pointer = installSitePointer(document, {
-      bar: () => document.querySelector("[data-backmatter-devbar]"),
-      ignore: (target) => {
-        if (!(target instanceof Element)) return true;
-        if (target.closest("[data-backmatter-panel]")) return true;
-        return target.closest("iframe") !== null;
-      },
-      onGrab: (grab) => {
-        const next = chatPointerFromGrab(docRef.current, grab);
-        if (!next) return;
-        addPointer(next);
-        requestAnimationFrame(() => {
-          window.dispatchEvent(new Event("backmatter:chat-focus"));
-        });
-      },
-      onEscape: () => {
-        window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
-      },
-    });
+    let local: ReturnType<typeof installSitePointer> | null = null;
+    let host: PreviewPointerHost | null = currentPreviewPointerHost();
+
+    function remember(grab: unknown) {
+      const next = chatPointerFromGrab(docRef.current, grab);
+      if (!next) return;
+      addPointer(next);
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event("backmatter:chat-focus"));
+      });
+    }
+
+    function takeLocal() {
+      local?.dispose();
+      local = installSitePointer(document, {
+        bar: () => document.querySelector("[data-backmatter-devbar]"),
+        ignore: (target) => {
+          if (!(target instanceof Element)) return true;
+          if (target.closest("[data-backmatter-panel]")) return true;
+          return target.closest("iframe") !== null;
+        },
+        onGrab: (grab) => remember(grab),
+        onEscape: () => {
+          window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on: false } }));
+        },
+      });
+    }
+
+    function onDevbarGrab(event: Event) {
+      remember((event as CustomEvent).detail);
+    }
+
+    function follow(next: PreviewPointerHost | null) {
+      host = next;
+      if (next) {
+        local?.dispose();
+        local = null;
+        return;
+      }
+      if (!local) takeLocal();
+    }
+
+    follow(host);
+    const stop = subscribePreviewPointerHost(follow);
+    window.addEventListener("backmatter:devbar-grab", onDevbarGrab);
+
     function onArm(event: Event) {
       const on = (event as CustomEvent<{ on?: boolean }>).detail?.on;
-      if (on && visibleRef.current) pointer.arm();
-      else pointer.disarm();
+      const current = currentPreviewPointerHost();
+      if (current) {
+        if (on && visibleRef.current) current.armFromDevbar();
+        else current.disarmFromDevbar();
+        return;
+      }
+      if (on && visibleRef.current) local?.arm();
+      else local?.disarm();
     }
     window.addEventListener(POINTER_ARM_EVENT, onArm);
     return () => {
       window.removeEventListener(POINTER_ARM_EVENT, onArm);
-      pointer.dispose();
+      window.removeEventListener("backmatter:devbar-grab", onDevbarGrab);
+      stop();
+      local?.dispose();
     };
   }, [addPointer]);