@backmatter/studio 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backmatter/studio",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "The Backmatter editing surface: document editor, AI chat, publish. Mounted on your site or hosted on the dashboard.",
   "type": "module",
   "publishConfig": {
@@ -30,10 +30,10 @@
     "./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",
+    "./site-widget.css": "./dist/site-widget.css",
     "./prose-ui-node-shim": "./prose-ui-node-shim.ts",
     "./package.json": "./package.json",
     "./src/*": "./src/*"
@@ -47,12 +47,12 @@
     "!src/**/*.test.tsx"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && vite build --config vite.widget.config.ts",
     "test": "bun test"
   },
   "dependencies": {
     "@ai-sdk/react": "^4.0.100",
-    "@backmatter/core": "^0.0.25",
+    "@backmatter/core": "^0.0.26",
     "@base-ui/react": "^1.6.0",
     "@central-icons-react/round-outlined-radius-2-stroke-1.5": "1.2.15",
     "@dnd-kit/abstract": "^0.5.0",

package/src/App.tsx

@@ -26,21 +26,17 @@ import { replicaStore } from "./replica/instance";
 import { readLastWorkspace } from "./last-workspace";
 import { EnterPage } from "./pages/EnterPage";
 import { workspaceRoutes } from "./WorkspaceRoutes";
-import { cmsWorkspaceSlug } from "./workspace-path";
+import { cmsWorkspaceSlug, isCliAuthorizePath } from "./workspace-path";
 import { ThemeProvider } from "./theme/ThemeProvider";
 import { Text } from "./ui/Text";
 import { space } from "./styles/tokens.stylex";
-import { isStudioDev } from "./studio-config";
+import { isUiKitPath } from "./pages/ui-kit/path";
 
-const UiKitPage = isStudioDev()
-  ? lazy(() =>
-      import("./pages/UiKitPage").then((mod) => ({ default: mod.UiKitPage })),
-    )
-  : null;
+const UiKitApp = lazy(() =>
+  import("./pages/ui-kit/UiKitApp").then((mod) => ({ default: mod.UiKitApp })),
+);
 
-export function isUiKitPath(pathname: string) {
-  return isStudioDev() && pathname.replace(/\/$/, "") === "/__ui";
-}
+export { isUiKitPath };
 
 export function App() {
   return (
@@ -87,7 +83,7 @@ function AppInner() {
       });
   }, []);
 
-  if (UiKitPage && isUiKitPath(location.pathname)) {
+  if (isUiKitPath(location.pathname)) {
     return (
       <Suspense
         fallback={
@@ -96,7 +92,7 @@ function AppInner() {
           </div>
         }
       >
-        <UiKitPage />
+        <UiKitApp />
       </Suspense>
     );
   }
@@ -113,6 +109,10 @@ function AppInner() {
     return <EnterPage userId={session.user.id} />;
   }
 
+  if (isCliAuthorizePath(location.pathname)) {
+    return <CliAuthorizePage email={session.user.email} />;
+  }
+
   return (
     <ReplicaProvider user={session.user}>
       <ReplicaGate>
@@ -138,28 +138,11 @@ function AppInner() {
             <Route path="/workspaces/new" element={<NewWorkspacePage />} />
             <Route path="/invite" element={<AcceptInvitePage />} />
             <Route path="/account" element={<UserSettingsPage />} />
-            <Route path="/cli/authorize" element={<CliAuthorizePage />} />
             <Route
               path="/workspaces/:workspaceId/*"
               element={<LegacyWorkspaceRedirect />}
             />
             {workspaceRoutes()}
-            {UiKitPage ? (
-              <Route
-                path="/__ui"
-                element={
-                  <Suspense
-                    fallback={
-                      <div {...stylex.props(styles.pad)}>
-                        <Text tone="muted">Loading kit…</Text>
-                      </div>
-                    }
-                  >
-                    <UiKitPage />
-                  </Suspense>
-                }
-              />
-            ) : null}
             <Route path="*" element={<Navigate to="/" replace />} />
           </Routes>
         </Shell>

package/src/api.ts

@@ -186,6 +186,19 @@ export type WorkspaceUsage = {
     saves: number;
     mediaTransforms: number;
   };
+  images: {
+    transformations: number;
+    cachedServes: number;
+    uncachedServes: number;
+    bytes: number;
+    slices: {
+      bucket: "prod" | "dev";
+      transformations: number;
+      cachedServes: number;
+      uncachedServes: number;
+      bytes: number;
+    }[];
+  };
   ai: { inputTokens: number; outputTokens: number };
   members: number;
   mediaBytes: number;
@@ -198,6 +211,8 @@ export type CatalogMedia = {
   byteSize: number;
   width: number;
   height: number;
+  alt: string;
+  caption: string;
   url: string;
   thumbUrl: string;
   variants: Record<string, string>;
@@ -568,6 +583,35 @@ export function fetchDocs(workspaceId: string) {
   return api<{ docs: DocListItem[] }>(`/workspaces/${workspaceId}/docs`);
 }
 
+export type PageNavItem = {
+  key: string;
+  label: string;
+  href: string;
+  current: boolean;
+};
+
+/** Routable pages for the on-site bar menu. Paginated; does not return the full doc list. */
+export function fetchDocNav(
+  workspaceId: string,
+  input: {
+    q?: string;
+    limit?: number;
+    offset?: number;
+    current?: { locale: string; type: string; slug: string };
+  } = {},
+) {
+  const qs = new URLSearchParams({ nav: "1" });
+  if (input.q) qs.set("q", input.q.trim());
+  if (input.limit !== undefined) qs.set("limit", String(input.limit));
+  if (input.offset !== undefined) qs.set("offset", String(input.offset));
+  if (input.current) {
+    qs.set("locale", input.current.locale);
+    qs.set("type", input.current.type);
+    qs.set("slug", input.current.slug);
+  }
+  return api<{ items: PageNavItem[]; total: number }>(`/workspaces/${workspaceId}/docs?${qs}`);
+}
+
 export function fetchDoc(
   workspaceId: string,
   locale: string,
@@ -925,6 +969,17 @@ export function uploadMedia(
   });
 }
 
+export function describeMedia(
+  workspaceId: string,
+  mediaId: string,
+  text: { alt?: string; caption?: string },
+) {
+  return api<{ media: CatalogMedia }>(`/workspaces/${workspaceId}/media/${mediaId}`, {
+    method: "PATCH",
+    body: JSON.stringify(text),
+  });
+}
+
 export function deleteMedia(workspaceId: string, mediaId: string) {
   return api<{ ok: true }>(`/workspaces/${workspaceId}/media/${mediaId}`, { method: "DELETE" });
 }

package/src/chat/ChangeCard.tsx

@@ -157,6 +157,8 @@ const styles = stylex.create({
     borderRadius: radius.md,
     backgroundColor: colors.bgSurface,
     overflow: "hidden",
+    // Matches the extra left inset on the message list.
+    marginLeft: `calc(-1 * ${space.xs})`,
   },
   cardUndone: {
     opacity: 0.65,

package/src/chat/ChatMessage.tsx

@@ -9,6 +9,7 @@ import { ChangeCard } from "./ChangeCard";
 import { DocListCard, type DocCardItem } from "./DocListCard";
 import { useChatSession, useChatUI } from "./ChatProvider";
 import {
+  assistantShowsRow,
   bindDocsPlaceholders,
   isCommitTool,
   isWriteTool,
@@ -23,6 +24,7 @@ import {
 import { CheckIcon, EyeIcon, FileIcon, SearchIcon, UndoIcon } from "./icons";
 import { pointersFromMetadata } from "./chat-context";
 import { PointerChip, pointerKey } from "./PointerChip";
+import { Reveal } from "./Reveal";
 
 const hover = "@media (hover: hover)";
 
@@ -104,17 +106,25 @@ const md = {
 export function ChatMessage({
   message,
   isLast,
+  turnAnchor = false,
 }: {
   message: UIMessage;
   isLast: boolean;
+  /** This send starts the turn the viewport should hold near the top. */
+  turnAnchor?: boolean;
 }) {
   const { workspaceId, tier } = useChatUI();
   const session = useChatSession();
   const [busyId, setBusyId] = useState<string | null>(null);
   const canAct = tier !== "ask";
-  const live = session.status === "streaming" || session.status === "submitted";
-  // Only the message being added animates in; history loads render in place.
-  const entering = isLast && live;
+  // Only content that mounts during this turn animates. History stays put,
+  // and Reveal latches the entrance so a fast reply can't cancel it mid-way.
+  const streaming =
+    isLast && (session.status === "streaming" || session.status === "submitted");
+
+  // A reply that is only reasoning lives on the status line. Mounting an empty
+  // row here inserts a list gap and the thinking line jumps.
+  if (message.role === "assistant" && !assistantShowsRow(message.parts)) return null;
 
   if (message.role === "user") {
     const text = message.parts
@@ -123,17 +133,24 @@ export function ChatMessage({
       .join("\n");
     const pointers = pointersFromMetadata(message.metadata);
     return (
-      <div {...stylex.props(styles.userRow, entering && styles.enter)}>
-        <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} />
-              ))}
+      // The anchor is outside the entrance transform. Measuring the rising
+      // bubble would place the slot too high, and the thread would snap back
+      // down once the transform finished.
+      <div data-turn-anchor={turnAnchor ? "" : undefined}>
+        <Reveal active={streaming} origin="end">
+          <div {...stylex.props(styles.userRow)}>
+            <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>
-          ) : null}
-          {text ? <div {...stylex.props(styles.userBubble)}>{text}</div> : null}
-        </div>
+          </div>
+        </Reveal>
       </div>
     );
   }
@@ -146,7 +163,6 @@ export function ChatMessage({
       (c): c is ChatChangeSummary =>
         Boolean(c) && presentedChangeStatus(c, stack) === "applied",
     );
-  const streaming = isLast && live;
 
   async function act(id: string, fn: () => Promise<void>) {
     setBusyId(id);
@@ -197,7 +213,7 @@ export function ChatMessage({
   }
 
   return (
-    <div {...stylex.props(styles.assistant, entering && styles.enter)}>
+    <div {...stylex.props(styles.assistant)}>
       {parts.map((part, i) => {
         if (part.type === "text") {
           const text = streaming ? trimPartialPlaceholder(part.text) : part.text;
@@ -207,12 +223,19 @@ export function ChatMessage({
           return segments.map((seg, j) => {
             if (seg.kind === "docs") {
               const target = placeholderTarget.get(`${i}:${n++}`);
-              return target === undefined ? null : renderDocCard(target, `${i}-docs-${j}`);
+              if (target === undefined) return null;
+              return (
+                <Reveal key={`${i}-docs-${j}`} active={streaming} origin="start">
+                  {renderDocCard(target, `${i}-docs-${j}`)}
+                </Reveal>
+              );
             }
             return (
-              <div key={`${i}-${j}`} {...stylex.props(styles.markdown)}>
-                <Markdown components={md}>{seg.text}</Markdown>
-              </div>
+              <Reveal key={`${i}-${j}`} active={streaming} origin="start">
+                <div {...stylex.props(styles.markdown)}>
+                  <Markdown components={md}>{seg.text}</Markdown>
+                </div>
+              </Reveal>
             );
           });
         }
@@ -250,37 +273,39 @@ export function ChatMessage({
               : null;
           const viewStatus = change ? presentedChangeStatus(change, stack) : null;
           return (
-            <div key={tp.toolCallId} {...stylex.props(styles.toolBlock)}>
-              <div {...stylex.props(styles.toolRow, failed && styles.toolFailed)}>
-                <ToolIcon name={name} />
-                <span>{label}</span>
-                {failed ? (
-                  <span {...stylex.props(styles.toolError)}>
-                    {tp.state === "output-error"
-                      ? tp.errorText
-                      : (out as { message?: string } | null)?.message}
-                  </span>
+            <Reveal key={tp.toolCallId} active={streaming} origin="start">
+              <div {...stylex.props(styles.toolBlock)}>
+                <div {...stylex.props(styles.toolRow, failed && styles.toolFailed)}>
+                  <ToolIcon name={name} />
+                  <span>{label}</span>
+                  {failed ? (
+                    <span {...stylex.props(styles.toolError)}>
+                      {tp.state === "output-error"
+                        ? tp.errorText
+                        : (out as { message?: string } | null)?.message}
+                    </span>
+                  ) : null}
+                </div>
+                {docList ? (
+                  <DocListCard
+                    items={docList.items}
+                    total={docList.total}
+                    workspaceId={workspaceId}
+                    emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
+                  />
+                ) : null}
+                {change && viewStatus ? (
+                  <ChangeCard
+                    change={{ ...change, status: viewStatus }}
+                    workspaceId={workspaceId}
+                    busy={busyId === change.id}
+                    canAct={canAct && !streaming}
+                    onKeep={() => void act(change.id, () => session.keep(change.id))}
+                    onUndo={() => void act(change.id, () => session.undo(change.id))}
+                  />
                 ) : null}
               </div>
-              {docList ? (
-                <DocListCard
-                  items={docList.items}
-                  total={docList.total}
-                  workspaceId={workspaceId}
-                  emptyLabel={name === "searchDocs" ? "No matches" : "No documents"}
-                />
-              ) : null}
-              {change && viewStatus ? (
-                <ChangeCard
-                  change={{ ...change, status: viewStatus }}
-                  workspaceId={workspaceId}
-                  busy={busyId === change.id}
-                  canAct={canAct && !streaming}
-                  onKeep={() => void act(change.id, () => session.keep(change.id))}
-                  onUndo={() => void act(change.id, () => session.undo(change.id))}
-                />
-              ) : null}
-            </div>
+            </Reveal>
           );
         }
         return null;
@@ -312,21 +337,7 @@ export function ChatMessage({
   );
 }
 
-const enter = stylex.keyframes({
-  from: { opacity: 0, transform: "translateY(10px)" },
-  to: { opacity: 1, transform: "translateY(0)" },
-});
-
 const styles = stylex.create({
-  enter: {
-    animationName: {
-      default: enter,
-      "@media (prefers-reduced-motion: reduce)": "none",
-    },
-    animationDuration: "220ms",
-    animationTimingFunction: "cubic-bezier(0.2, 0.8, 0.2, 1)",
-    animationFillMode: "backwards",
-  },
   userRow: {
     display: "flex",
     justifyContent: "flex-end",

package/src/chat/ChatPanel.tsx

@@ -2,7 +2,7 @@
 //
 // Floating chat window anchored bottom-right above the ChatBar. Supports
 // minimize (collapses into the bar), fullscreen, and a history view.
-import { useEffect } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import * as stylex from "@stylexjs/stylex";
 import { colors, radius, space, type, z } from "../styles/tokens.stylex";
 import { Tooltip } from "../ui/Tooltip";
@@ -10,9 +10,10 @@ import { ChatMessage } from "./ChatMessage";
 import { useChatSession, useChatUI } from "./ChatProvider";
 import { CONTEXT_BAR_PADDING, CONTEXT_ROW_HEIGHT, Composer } from "./Composer";
 import { LiveStatus } from "./LiveStatus";
+import { motion } from "./motion";
 import { Shimmer } from "./Shimmer";
 import { ThreadHistory } from "./ThreadHistory";
-import { useStickToBottom } from "./useStickToBottom";
+import { useStickToBottom, TURN_PEEK, turnSpacer } from "./useStickToBottom";
 import {
   CloseIcon,
   CollapseIcon,
@@ -31,13 +32,101 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
   const session = useChatSession();
   const visible = isPanelVisible(ui.panel.mode);
   const fullscreen = ui.panel.mode === "fullscreen";
-  // Ease to the bottom on new messages and while streaming, unless the user scrolled up.
+  const threadId = session.thread?.id ?? null;
+  const knownIds = useRef<Set<string> | null>(null);
+  const seenThread = useRef<string | null | undefined>(undefined);
+  const [anchorId, setAnchorId] = useState<string | null>(null);
+  const [viewportTick, setViewportTick] = useState(0);
+  const spacerRef = useRef<HTMLDivElement>(null);
+  const slotRef = useRef<number | null>(null);
+  // Captured when the sent message first lands. Later replies must not
+  // remeasure it — a new number becomes a new scroll target and the thread jumps.
+  const heldSlot = useRef<{ id: string; slot: number } | null>(null);
+  // Ease to the live edge on new messages and while streaming, unless the
+  // reader scrolled away. A sent message becomes the anchor: the tail grows
+  // so that edge leaves the message near the top, and the thread rises to it.
   const scroller = useStickToBottom<HTMLDivElement>({
     active: visible && ui.panel.view === "chat" && !session.loading,
-    resetKey: session.thread?.id ?? null,
-    deps: [session.messages, session.status],
+    resetKey: threadId,
+    pinKey: anchorId,
+    slotRef,
+    deps: [session.messages, session.status, viewportTick],
   });
 
+  if (seenThread.current !== threadId) {
+    seenThread.current = threadId;
+    knownIds.current = null;
+    if (anchorId !== null) setAnchorId(null);
+  }
+  if (!session.loading && knownIds.current === null) {
+    knownIds.current = new Set(session.messages.map((m) => m.id));
+  } else if (!session.loading && knownIds.current) {
+    let fresh: string | null = null;
+    for (let i = session.messages.length - 1; i >= 0; i--) {
+      const message = session.messages[i];
+      if (message.role === "user" && !knownIds.current.has(message.id)) {
+        fresh = message.id;
+        break;
+      }
+    }
+    for (const message of session.messages) knownIds.current.add(message.id);
+    if (fresh && fresh !== anchorId) setAnchorId(fresh);
+  }
+
+  const contextRows = Math.max(
+    1,
+    (ui.focus && ui.includeFocus ? 1 : 0) + ui.mentions.length,
+  );
+  const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
+
+  useEffect(() => {
+    const el = scroller.ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    let height = el.clientHeight;
+    const observer = new ResizeObserver(() => {
+      const next = el.clientHeight;
+      if (next === height) return;
+      height = next;
+      setViewportTick((n) => n + 1);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [visible, threadId, ui.panel.view, scroller.ref]);
+
+  useLayoutEffect(() => {
+    const viewport = scroller.ref.current;
+    const spacer = spacerRef.current;
+    if (!viewport || !spacer) return;
+    const anchor = anchorId
+      ? viewport.querySelector<HTMLElement>("[data-turn-anchor]")
+      : null;
+    if (!anchor || !anchorId) {
+      spacer.style.height = "0px";
+      slotRef.current = null;
+      heldSlot.current = null;
+      return;
+    }
+    const viewTop = viewport.getBoundingClientRect().top;
+    const anchorOffset = anchor.getBoundingClientRect().top - viewTop + viewport.scrollTop;
+    const contentEnd = spacer.getBoundingClientRect().top - viewTop + viewport.scrollTop;
+    const paddingBottom = Number.parseFloat(getComputedStyle(viewport).paddingBottom) || 0;
+    if (!heldSlot.current || heldSlot.current.id !== anchorId) {
+      heldSlot.current = { id: anchorId, slot: Math.max(0, anchorOffset - TURN_PEEK) };
+    }
+    const slot = heldSlot.current.slot;
+    const height = turnSpacer({
+      clientHeight: viewport.clientHeight,
+      // The frozen slot, expressed as the anchor offset turnSpacer expects.
+      anchorOffset: slot + TURN_PEEK,
+      contentEnd,
+      paddingBottom,
+      peek: TURN_PEEK,
+    });
+    spacer.style.height = `${height}px`;
+    // While the tail still holds the turn, streaming must not pick a new target.
+    slotRef.current = height > 0 ? slot : null;
+  }, [anchorId, session.messages, session.status, viewportTick, contextReserve, scroller.ref]);
+
   useEffect(() => {
     if (!visible) return;
     function onKey(e: KeyboardEvent) {
@@ -51,14 +140,6 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
 
   if (!visible) return null;
 
-  // Space under the messages for the floating context bar. Always reserve at least
-  // 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,
-  );
-  const contextReserve = contextRows * CONTEXT_ROW_HEIGHT + CONTEXT_BAR_PADDING + 12;
-
   const title =
     ui.panel.view === "history"
       ? "Chat history"
@@ -162,7 +243,7 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
             )}
           >
             {session.loading ? (
-              <p {...stylex.props(styles.muted)}>
+              <p {...stylex.props(styles.muted, motion.rise, motion.originStart)}>
                 <Shimmer>Loading chat…</Shimmer>
               </p>
             ) : session.messages.length === 0 ? (
@@ -178,6 +259,7 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
                     key={m.id}
                     message={m}
                     isLast={i === session.messages.length - 1}
+                    turnAnchor={m.id === anchorId}
                   />
                 ))}
                 <LiveStatus parts={liveParts} status={session.status} />
@@ -195,6 +277,7 @@ export function ChatPanel({ fill = false, site = false }: { fill?: boolean; site
                 </button>
               </div>
             ) : null}
+            <div ref={spacerRef} aria-hidden="true" {...stylex.props(styles.tail)} />
           </div>
           <div {...stylex.props(fullscreen && styles.composerFull)}>
             <Composer autoFocus={visible} />
@@ -252,8 +335,11 @@ const styles = stylex.create({
   },
   panelSite: {
     right: 16,
-    bottom: "calc(48px + env(safe-area-inset-bottom, 0px))",
+    bottom: "calc(52px + env(safe-area-inset-bottom, 0px))",
     zIndex: 2147483001,
+    width: "min(400px, calc(100vw - 32px))",
+    height: "min(640px, calc(100vh - 68px - env(safe-area-inset-bottom, 0px)))",
+    transformOrigin: "calc(100% - 60px) 100%",
   },
   panelFill: {
     position: "fixed",
@@ -339,7 +425,12 @@ const styles = stylex.create({
     flex: 1,
     minHeight: 0,
     overflowY: "auto",
+    // The browser must not correct scroll when the send tail appears, or the
+    // rise below starts from the wrong place.
+    overflowAnchor: "none",
     padding: space.lg,
+    // A little more room on the left. Cards pull back by the same amount.
+    paddingLeft: `calc(${space.lg} + ${space.xs})`,
   },
   messagesReserve: (px: number) => ({
     paddingBottom: px,
@@ -370,6 +461,10 @@ const styles = stylex.create({
     lineHeight: 1.5,
     color: colors.textMuted,
   },
+  tail: {
+    flexShrink: 0,
+    width: "100%",
+  },
   error: {
     display: "flex",
     flexShrink: 0,

package/src/chat/DocListCard.tsx

@@ -178,6 +178,8 @@ const styles = stylex.create({
     borderRadius: radius.md,
     backgroundColor: colors.bgSurface,
     overflow: "hidden",
+    // Matches the extra left inset on the message list.
+    marginLeft: `calc(-1 * ${space.xs})`,
   },
   empty: {
     paddingInline: space.md,