@backmatter/studio 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -28,6 +28,11 @@
       "default": "./dist/define.js"
     },
     "./styles": "./src/styles.ts",
+    "./widget": {
+      "types": "./src/site-widget.tsx",
+      "source": "./src/site-widget.tsx",
+      "default": "./dist/site-widget.js"
+    },
     "./studio.css": "./dist/studio.css",
     "./prose-ui-node-shim": "./prose-ui-node-shim.ts",
     "./package.json": "./package.json",

package/src/chat/ChangeCard.tsx

@@ -1,6 +1,5 @@
 // packages/studio/src/chat/ChangeCard.tsx
 import { useState } from "react";
-import { Link } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import type { ChatChangeSummary } from "../api";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
@@ -8,6 +7,7 @@ import { Tooltip } from "../ui/Tooltip";
 import { contentDocPath } from "../workspace-path";
 import { useWorkspaceNav } from "../chrome/WorkspaceNavContext";
 import { CheckIcon, ChevronDownIcon, FileIcon, UndoIcon } from "./icons";
+import { DocLink } from "./DocLink";
 
 const hover = "@media (hover: hover)";
 
@@ -56,12 +56,17 @@ export function ChangeCard({
         <span {...stylex.props(styles.fileIcon)}>
           <FileIcon />
         </span>
-        <Tooltip label={`Open ${label} in the editor`}>
-          <Link to={to} {...stylex.props(styles.name)}>
+        {nav ? (
+          <Tooltip label={`Open ${label} in the editor`}>
+            <DocLink to={to} {...stylex.props(styles.name)}>
+              {label}
+            </DocLink>
+          </Tooltip>
+        ) : (
+          <DocLink to={to} {...stylex.props(styles.name)}>
             {label}
-          </Link>
-        </Tooltip>
-        <span {...stylex.props(styles.locale)}>{change.locale}</span>
+          </DocLink>
+        )}
         {change.diff?.renamedFrom ? (
           <span {...stylex.props(styles.badge)}>
             {change.diff.renamedFrom} → {change.slug}

package/src/chat/ChatMessage.tsx

@@ -19,6 +19,8 @@ import {
   type WriteToolOutput,
 } from "./chat-helpers";
 import { CheckIcon, EyeIcon, FileIcon, SearchIcon, UndoIcon } from "./icons";
+import { pointersFromMetadata } from "./chat-context";
+import { PointerChip, pointerKey } from "./PointerChip";
 
 const hover = "@media (hover: hover)";
 
@@ -117,9 +119,19 @@ export function ChatMessage({
       .filter((p): p is { type: "text"; text: string } => p.type === "text")
       .map((p) => p.text)
       .join("\n");
+    const pointers = pointersFromMetadata(message.metadata);
     return (
       <div {...stylex.props(styles.userRow, entering && styles.enter)}>
-        <div {...stylex.props(styles.userBubble)}>{text}</div>
+        <div {...stylex.props(styles.userStack)}>
+          {pointers.length > 0 ? (
+            <div {...stylex.props(styles.userChips)} aria-label="Pointed elements">
+              {pointers.map((pointer) => (
+                <PointerChip key={pointerKey(pointer)} pointer={pointer} />
+              ))}
+            </div>
+          ) : null}
+          {text ? <div {...stylex.props(styles.userBubble)}>{text}</div> : null}
+        </div>
       </div>
     );
   }
@@ -312,8 +324,21 @@ const styles = stylex.create({
     display: "flex",
     justifyContent: "flex-end",
   },
-  userBubble: {
+  userStack: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    gap: space.sm,
     maxWidth: "85%",
+  },
+  userChips: {
+    display: "flex",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    gap: space.sm,
+  },
+  userBubble: {
+    maxWidth: "100%",
     paddingInline: space.lg,
     paddingBlock: space.md,
     borderRadius: 10,

package/src/chat/ChatPanel.tsx

@@ -26,7 +26,7 @@ import { isPanelVisible } from "./chat-state";
 
 const hover = "@media (hover: hover)";
 
-export function ChatPanel({ fill = false }: { fill?: boolean } = {}) {
+export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site?: boolean } = {}) {
   const ui = useChatUI();
   const session = useChatSession();
   const visible = isPanelVisible(ui.panel.mode);
@@ -55,7 +55,7 @@ export function ChatPanel({ fill = false }: { fill?: boolean } = {}) {
   // one row so toggling the open document doesn't shift the content.
   const contextRows = Math.max(
     1,
-    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length + ui.pointers.length,
+    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length,
   );
   const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
 
@@ -70,7 +70,12 @@ export function ChatPanel({ fill = false }: { fill?: boolean } = {}) {
     <section
       role="dialog"
       aria-label="AI chat"
-      {...stylex.props(fill ? styles.panelFill : styles.panel, !fill && fullscreen && styles.panelFull)}
+      data-backmatter-panel=""
+      {...stylex.props(
+        fill ? styles.panelFill : styles.panel,
+        site && styles.panelSite,
+        !fill && fullscreen && styles.panelFull,
+      )}
     >
       <header {...stylex.props(styles.header)}>
         <h2 {...stylex.props(styles.title)}>{title}</h2>
@@ -245,6 +250,11 @@ const styles = stylex.create({
     width: "auto",
     height: "auto",
   },
+  panelSite: {
+    right: 16,
+    bottom: 64,
+    zIndex: 2147483001,
+  },
   panelFill: {
     position: "fixed",
     top: 0,

package/src/chat/ChatProvider.tsx

@@ -572,9 +572,13 @@ function LiveSession({
 
   const send = useCallback(
     async (text: string) => {
+      const context = getContext();
       await sendMessage(
-        { text },
-        { body: { model: getModel(), context: getContext() } },
+        {
+          text,
+          metadata: context.pointers.length ? { pointers: context.pointers } : undefined,
+        },
+        { body: { model: getModel(), context } },
       );
     },
     [sendMessage, getModel, getContext],

package/src/chat/Composer.tsx

@@ -8,8 +8,8 @@ import { useChatSession, useChatUI } from "./ChatProvider";
 import { MentionPopover, type MentionKey } from "./MentionPopover";
 import { ModelPicker } from "./ModelPicker";
 import { AtIcon, CloseIcon, FileIcon, FocusIcon, PointerIcon, SendIcon, StopIcon } from "./icons";
-import type { ChatPointer } from "./chat-context";
 import { mentionQueryAt } from "./chat-helpers";
+import { PointerChip, pointerKey } from "./PointerChip";
 
 const hover = "@media (hover: hover)";
 
@@ -23,21 +23,14 @@ function isMentionKey(key: string): key is MentionKey {
   return MENTION_KEYS.has(key);
 }
 
-function pointerKey(pointer: ChatPointer): string {
-  return `${pointer.locale}/${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.quote}`;
-}
-
-function pointerLabel(pointer: ChatPointer): string {
-  const quote = pointer.quote.replace(/\s+/g, " ").trim();
-  const short = quote.length > 42 ? `${quote.slice(0, 41)}…` : quote;
-  if (pointer.blockType && short) return `${pointer.blockType} · “${short}”`;
-  if (pointer.blockType) return pointer.blockType;
-  return short ? `“${short}”` : "element";
-}
+export const POINTER_ARM_EVENT = "backmatter:pointer-arm";
 
 function postPointer(on: boolean) {
-  if (typeof window === "undefined" || window.parent === window) return;
-  window.parent.postMessage({ type: "backmatter:pointer", on }, location.origin);
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(POINTER_ARM_EVENT, { detail: { on } }));
+  if (window.parent !== window) {
+    window.parent.postMessage({ type: "backmatter:pointer", on }, location.origin);
+  }
 }
 
 export function Composer({ autoFocus }: { autoFocus: boolean }) {
@@ -92,14 +85,24 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
 
   useEffect(() => {
     if (!ui.pointer) return;
+    function disarm() {
+      setPointing(false);
+    }
+    function onArm(event: Event) {
+      if ((event as CustomEvent<{ on?: boolean }>).detail?.on === false) disarm();
+    }
     function onMessage(event: MessageEvent) {
       if (event.source !== window.parent || event.origin !== location.origin) return;
       const data = event.data as { type?: string; on?: boolean };
       if (data?.type !== "backmatter:pointer" || data.on !== false) return;
-      setPointing(false);
+      disarm();
     }
+    window.addEventListener(POINTER_ARM_EVENT, onArm);
     window.addEventListener("message", onMessage);
-    return () => window.removeEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener(POINTER_ARM_EVENT, onArm);
+      window.removeEventListener("message", onMessage);
+    };
   }, [ui.pointer]);
 
   const submit = useCallback(() => {
@@ -137,7 +140,7 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
   const focusChip = ui.focus && ui.includeFocus ? ui.focus.docRef : null;
   const selectionActive =
     ui.focus?.selection && ui.focus.selection.end > ui.focus.selection.start;
-  const hasContext = Boolean(focusChip || ui.mentions.length > 0 || ui.pointers.length > 0);
+  const hasContext = Boolean(focusChip || ui.mentions.length > 0);
 
   return (
     <div {...stylex.props(styles.wrap)}>
@@ -174,19 +177,20 @@ export function Composer({ autoFocus }: { autoFocus: boolean }) {
                 onRemove={() => ui.removeMention(m)}
               />
             ))}
+          </div>
+      ) : null}
+      <div ref={boxRef} {...stylex.props(styles.box)}>
+        {ui.pointers.length > 0 ? (
+          <div {...stylex.props(styles.chips)} aria-label="Pointed elements">
             {ui.pointers.map((pointer) => (
-              <ContextRow
+              <PointerChip
                 key={pointerKey(pointer)}
-                icon={<PointerIcon size={13} />}
-                label={pointerLabel(pointer)}
-                meta={`${pointer.type}/${pointer.slug}`}
-                removeLabel={`Remove ${pointerLabel(pointer)}`}
+                pointer={pointer}
                 onRemove={() => ui.removePointer(pointer)}
               />
             ))}
           </div>
-      ) : null}
-      <div ref={boxRef} {...stylex.props(styles.box)}>
+        ) : null}
         <textarea
           ref={ref}
           value={text}
@@ -441,6 +445,11 @@ const styles = stylex.create({
       ":hover": { backgroundColor: colors.bgHover, color: colors.text },
     },
   },
+  chips: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.sm,
+  },
   box: {
     position: "relative",
     zIndex: 2,

package/src/chat/DocLink.tsx

@@ -0,0 +1,31 @@
+// packages/studio/src/chat/DocLink.tsx
+// A document name that opens in the Studio router. The on-site widget has no
+// router, so the same label renders as text and the chat can still show it.
+import type { CSSProperties, ReactNode } from "react";
+import { Link, useInRouterContext } from "react-router";
+
+export function DocLink({
+  to,
+  children,
+  className,
+  style,
+}: {
+  to: string;
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  const routed = useInRouterContext();
+  if (!routed) {
+    return (
+      <span className={className} style={style}>
+        {children}
+      </span>
+    );
+  }
+  return (
+    <Link to={to} className={className} style={style}>
+      {children}
+    </Link>
+  );
+}

package/src/chat/DocListCard.tsx

@@ -4,11 +4,11 @@
 // into the editor. Content models are user-defined, so rows lean on the
 // server-derived `title` and fall back to the slug.
 import { useState } from "react";
-import { Link } from "react-router";
 import * as stylex from "@stylexjs/stylex";
 import { colors, radius, space, type } from "../styles/tokens.stylex";
 import { contentDocPath } from "../workspace-path";
 import { useWorkspaceNav } from "../chrome/WorkspaceNavContext";
+import { DocLink } from "./DocLink";
 import { ChevronDownIcon, FileIcon } from "./icons";
 
 const hover = "@media (hover: hover)";
@@ -130,7 +130,7 @@ function DocRow({
   const secondary = doc.path ?? `${doc.type}/${doc.slug}`;
 
   return (
-    <Link to={to} {...stylex.props(styles.row)}>
+    <DocLink to={to} {...stylex.props(styles.row)}>
       <span {...stylex.props(styles.line)}>
         <span {...stylex.props(styles.icon)}>
           <FileIcon size={13} />
@@ -153,7 +153,7 @@ function DocRow({
         </span>
       </span>
       {doc.excerpt ? <span {...stylex.props(styles.excerpt)}>{doc.excerpt}</span> : null}
-    </Link>
+    </DocLink>
   );
 }
 

package/src/chat/PointerChip.tsx

@@ -0,0 +1,139 @@
+// packages/studio/src/chat/PointerChip.tsx
+import { useEffect } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { colors, space, type } from "../styles/tokens.stylex";
+import { findPointedElement, highlightPointedElement } from "../site-pointer";
+import type { ChatPointer } from "./chat-context";
+import { CloseIcon, PointerIcon } from "./icons";
+
+const hover = "@media (hover: hover)";
+
+export function pointerKey(pointer: ChatPointer): string {
+  return `${pointer.locale}/${pointer.type}/${pointer.slug}/${pointer.blockId ?? ""}/${pointer.quote}`;
+}
+
+function pointerLabel(pointer: ChatPointer): string {
+  const quote = pointer.quote.replace(/\s+/g, " ").trim();
+  const short = quote.length > 42 ? `${quote.slice(0, 41)}…` : quote;
+  if (pointer.blockType && short) return `${pointer.blockType} · “${short}”`;
+  if (pointer.blockType) return pointer.blockType;
+  return short ? `“${short}”` : "element";
+}
+
+function pointerChipLabel(pointer: ChatPointer): string {
+  const quote = pointer.quote.replace(/\s+/g, " ").trim();
+  const raw = quote || pointer.blockType || `${pointer.type}/${pointer.slug}`;
+  return raw.length > 32 ? `${raw.slice(0, 31)}…` : raw;
+}
+
+function canHighlightHere(): boolean {
+  return typeof window !== "undefined" && window.parent === window;
+}
+
+export function PointerChip({
+  pointer,
+  onRemove,
+}: {
+  pointer: ChatPointer;
+  onRemove?: () => void;
+}) {
+  const label = pointerChipLabel(pointer);
+  const detail = pointerLabel(pointer);
+
+  useEffect(() => {
+    return () => {
+      if (canHighlightHere()) highlightPointedElement(document, null);
+    };
+  }, []);
+
+  function show() {
+    if (!canHighlightHere()) return;
+    highlightPointedElement(document, findPointedElement(document, pointer));
+  }
+
+  function hide() {
+    if (!canHighlightHere()) return;
+    highlightPointedElement(document, null);
+  }
+
+  return (
+    <span
+      {...stylex.props(styles.chip, !onRemove && styles.chipStatic)}
+      title={`${detail} · ${pointer.type}/${pointer.slug}`}
+      onMouseEnter={show}
+      onMouseLeave={hide}
+    >
+      <span {...stylex.props(styles.chipIcon)}>
+        <PointerIcon size={13} />
+      </span>
+      <span {...stylex.props(styles.chipLabel)}>{label}</span>
+      {onRemove ? (
+        <button
+          type="button"
+          aria-label={`Remove ${detail}`}
+          onClick={onRemove}
+          {...stylex.props(styles.chipRemove)}
+        >
+          <CloseIcon size={11} />
+        </button>
+      ) : null}
+    </span>
+  );
+}
+
+const styles = stylex.create({
+  chip: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    maxWidth: "100%",
+    height: 26,
+    paddingLeft: space.sm,
+    paddingRight: 2,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: 8,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.sm,
+  },
+  chipStatic: {
+    paddingRight: space.sm,
+  },
+  chipIcon: {
+    display: "inline-flex",
+    flexShrink: 0,
+    color: colors.textMuted,
+  },
+  chipLabel: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontWeight: 500,
+  },
+  chipRemove: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    width: 22,
+    height: 22,
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: 6,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    cursor: "pointer",
+    [hover]: {
+      ":hover": { backgroundColor: colors.bgHover, color: colors.text },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+});

package/src/chat/chat-context.ts

@@ -36,6 +36,20 @@ function samePointer(a: ChatPointer, b: ChatPointer): boolean {
   );
 }
 
+/** Pointers stored on a sent user message, so the chip can be shown again later. */
+export function pointersFromMetadata(metadata: unknown): ChatPointer[] {
+  if (!metadata || typeof metadata !== "object") return [];
+  const raw = (metadata as { pointers?: unknown }).pointers;
+  if (!Array.isArray(raw)) return [];
+  const pointers: ChatPointer[] = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const pointer = chatPointerFromGrab(item as ChatPointer, item);
+    if (pointer) pointers.push(pointer);
+  }
+  return pointers.slice(0, POINTER_CAP);
+}
+
 export function addPointer(list: ChatPointer[], next: ChatPointer): ChatPointer[] {
   if (list.some((item) => samePointer(item, next))) return list;
   const added = [...list, next];

package/src/chat/icons.tsx

@@ -15,6 +15,16 @@ function base(size: number) {
   };
 }
 
+export function PublishIcon({ size = 14 }: Props) {
+  return (
+    <svg {...base(size)}>
+      <path d="M3.25 10.25V13h9.5v-2.75" />
+      <path d="M8 10.25V3" />
+      <path d="M5.25 5.75 8 3l2.75 2.75" />
+    </svg>
+  );
+}
+
 export function SparkIcon({ size = 14 }: Props) {
   return (
     <svg {...base(size)}>

package/src/chat/session-expiry.ts

@@ -1,7 +1,10 @@
 // packages/studio/src/chat/session-expiry.ts
 // The chat send does not go through the Studio API helper, so a dead site
-// session would otherwise show up as a composer error. Tell the parent page,
-// which holds the bar, so it can drop the editor without navigating.
+// session would otherwise show up as a composer error. A framed panel tells
+// its parent. The in-page widget is the top window, so it reports through the
+// Studio config callback the host used to drop the bar.
+
+import { reportUnauthorized } from "../studio-config";
 
 export const SESSION_EXPIRED_MESSAGE = "backmatter:session-expired";
 
@@ -17,9 +20,9 @@ export function fetchNotifyingSessionExpiry(
 ): typeof fetch {
   return async (input, init) => {
     const res = await base(input, init);
-    if (res.status === 401 && parent && origin) {
-      parent.postMessage({ type: SESSION_EXPIRED_MESSAGE }, origin);
-    }
+    if (res.status !== 401) return res;
+    if (parent && origin) parent.postMessage({ type: SESSION_EXPIRED_MESSAGE }, origin);
+    else reportUnauthorized(401);
     return res;
   };
 }

package/src/chrome/OpenSiteButton.tsx

@@ -1,9 +1,9 @@
 // packages/studio/src/chrome/OpenSiteButton.tsx
-// Dashboard-only: mint a site session for the workspace's site and go there.
-// The site then shows the editing bar and its mounted Studio, with no
-// dashboard cookie involved. Same bounce `/enter` runs for a site that asks.
+// Dashboard-only: mint a site session for the workspace's site and open it
+// in a new tab. The tab is opened on the click, then pointed at the site
+// once the ticket exists, so the Studio stays where it is.
 // One site URL opens on click; several show a picker.
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Menu } from "@base-ui/react/menu";
 import * as stylex from "@stylexjs/stylex";
 import { previewEntryUrl, resolveEnterTarget } from "@backmatter/core";
@@ -30,46 +30,55 @@ export function OpenSiteButton({
   userId: string;
   siteUrls: readonly string[];
 }) {
-  const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const opening = useRef(false);
   const sites = openableSites(siteUrls);
   if (sites.length === 0 || !showsOpenSite()) return null;
 
-  async function open(site: string) {
+  function open(site: string) {
+    if (opening.current) return;
     const target = resolveEnterTarget(site, siteUrls);
     if (!target) {
       setError("Site URL is not valid");
       return;
     }
-    setBusy(true);
-    setError(null);
-    try {
-      const { ticket } = await createPreviewTicket(workspaceId, {
-        redirect: target.redirect,
-        tree: userId,
-      });
-      window.location.assign(previewEntryUrl(target.origin, ticket));
-    } catch (err) {
-      setBusy(false);
-      setError(err instanceof Error ? err.message : "Could not open the site");
+    // Open during the click. A tab created after the ticket request is blocked.
+    const tab = window.open("about:blank", "_blank");
+    if (!tab) {
+      setError("Allow pop-ups to open the site");
+      return;
     }
+    tab.opener = null;
+    opening.current = true;
+    setError(null);
+    void (async () => {
+      try {
+        const { ticket } = await createPreviewTicket(workspaceId, {
+          redirect: target.redirect,
+          tree: userId,
+        });
+        tab.location.replace(previewEntryUrl(target.origin, ticket));
+      } catch (err) {
+        tab.close();
+        setError(err instanceof Error ? err.message : "Could not open the site");
+      } finally {
+        opening.current = false;
+      }
+    })();
   }
 
-  const label = <span>{busy ? "Opening…" : "Open site"}</span>;
-
   if (sites.length === 1) {
     const site = sites[0]!;
     return (
       <button
         type="button"
-        disabled={busy}
-        onClick={() => void open(site)}
+        onClick={() => open(site)}
         title={error ?? `Open ${site} with editing on`}
         aria-label="Open site"
         className={cx(styles.trigger)}
       >
         <ExternalIcon />
-        {label}
+        <span>Open site</span>
       </button>
     );
   }
@@ -77,13 +86,12 @@ export function OpenSiteButton({
   return (
     <Menu.Root>
       <Menu.Trigger
-        disabled={busy}
         title={error ?? "Open a site with editing on"}
         aria-label="Open site"
         className={cx(styles.trigger)}
       >
         <ExternalIcon />
-        {label}
+        <span>Open site</span>
       </Menu.Trigger>
       <Menu.Portal>
         <Menu.Positioner side="bottom" align="start" sideOffset={6} className={cx(popup.positioner)}>
@@ -92,7 +100,7 @@ export function OpenSiteButton({
               <Menu.Item
                 key={site}
                 label={siteLabel(site)}
-                onClick={() => void open(site)}
+                onClick={() => open(site)}
                 className={(state) =>
                   cx(popup.item, styles.item, state.highlighted && popup.itemHighlighted)
                 }