@backmatter/studio 0.0.14 → 0.0.16

package/src/pages/DocEditorPage.tsx

@@ -46,6 +46,8 @@ import {
   persistPreviewPct,
   readPreviewPct,
 } from "./preview-split";
+import { PreviewSizeSwitch, PreviewViewport } from "./PreviewSize";
+import { persistPreviewSize, readPreviewSize, type PreviewSize } from "./preview-size";
 import {
   editorPreviewPath,
   modelForType,
@@ -214,6 +216,7 @@ export function DocEditorPage() {
   const [previewOffer, setPreviewOffer] = useState<PreviewChannelRef | null>(null);
   const [previewLive, setPreviewLive] = useState<"rendered" | "error" | null>(null);
   const [previewPct, setPreviewPct] = useState(readPreviewPct);
+  const [previewSize, setPreviewSize] = useState(readPreviewSize);
   const [dragging, setDragging] = useState(false);
   const [editEpoch, setEditEpoch] = useState(0);
   const [selection, setSelection] = useState<EditorSelection | null>(null);
@@ -323,6 +326,7 @@ export function DocEditorPage() {
   }
 
   function onPreviewGrab(grab: PreviewGrabMessage) {
+    if (typeof grab.blockId !== "string" || !grab.blockId) return;
     const ids = blocksFromFrontmatter(latest.current.frontmatter[blocksFieldRef.current]).map(
       (block) => block.id,
     );
@@ -330,7 +334,13 @@ export function DocEditorPage() {
       grabRef: grab.ref,
       openRef: channelRef.current,
       blockIds: ids,
-      grab,
+      grab: {
+        blockId: grab.blockId,
+        blockType: grab.blockType,
+        blockIndex: grab.blockIndex,
+        quote: grab.quote,
+        shift: grab.shift,
+      },
     });
     if (decision.action === "add") {
       addPointer({
@@ -467,6 +477,11 @@ export function DocEditorPage() {
     setPreviewKey((k) => k + 1);
   }
 
+  function choosePreviewSize(size: PreviewSize) {
+    setPreviewSize(size);
+    persistPreviewSize(size);
+  }
+
   function updatePreviewPctFromPointer(clientX: number, clientY: number) {
     const split = splitRef.current;
     if (!split) return;
@@ -901,6 +916,7 @@ export function DocEditorPage() {
                 </button>
               ) : null}
             </div>
+            <PreviewSizeSwitch size={previewSize} onSize={choosePreviewSize} />
             <span
               {...stylex.props(
                 styles.badge,
@@ -911,20 +927,22 @@ export function DocEditorPage() {
             </span>
           </div>
           {previewUrl ? (
-            <iframe
-              key={`${previewKey}-${previewUrl}`}
-              ref={previewFrameRef}
-              title="Live preview"
-              src={previewUrl}
-              onLoad={() => {
-                setPreviewLoading(false);
-                setPreviewFrame((n) => n + 1);
-              }}
-              {...stylex.props(
-                styles.iframe,
-                dragging && styles.iframeDragging,
-              )}
-            />
+            <PreviewViewport size={previewSize} dragging={dragging}>
+              <iframe
+                key={`${previewKey}-${previewUrl}`}
+                ref={previewFrameRef}
+                title="Live preview"
+                src={previewUrl}
+                onLoad={() => {
+                  setPreviewLoading(false);
+                  setPreviewFrame((n) => n + 1);
+                }}
+                {...stylex.props(
+                  styles.iframe,
+                  dragging && styles.iframeDragging,
+                )}
+              />
+            </PreviewViewport>
           ) : !siteUrl ? (
             <div {...stylex.props(styles.iframe, styles.previewEmpty)}>
               <Text as="p" size="sm" weight="medium">

package/src/pages/EmbedChatPage.tsx

@@ -52,9 +52,9 @@ function FocusBridge() {
       const data = event.data as { type?: string; doc?: Partial<DocRef> };
       if (data?.type !== "backmatter:focus") return;
       const doc = data.doc;
-      if (!doc?.locale || !doc.type || !doc.slug) return;
+      if (!doc?.type || !doc.slug) return;
       setFocus({
-        docRef: { locale: doc.locale, type: doc.type, slug: doc.slug },
+        docRef: { type: doc.type, slug: doc.slug },
         frontmatter: {},
         body: "",
         selection: null,
@@ -89,7 +89,7 @@ function PointerBridge() {
       const data = event.data as { type?: string; grab?: unknown; doc?: unknown };
       if (data?.type !== "backmatter:pointer-grab") return;
       const pointer = chatPointerFromGrab(
-        (data.doc ?? {}) as { locale?: unknown; type?: unknown; slug?: unknown },
+        (data.doc ?? {}) as { type?: unknown; slug?: unknown },
         data.grab,
       );
       if (pointer) addPointer(pointer);

package/src/pages/EmbedPublishPage.tsx

@@ -39,7 +39,7 @@ function parentOrigin(): string {
 }
 
 function changeKey(doc: GitChange) {
-  return `${doc.locale}/${doc.type}/${doc.slug}`;
+  return `${doc.type}/${doc.slug}`;
 }
 
 const STATUS_LABEL: Record<ChangeStatus, string> = {
@@ -129,10 +129,9 @@ export function EmbedPublishPage({
     setResolvingKey(key);
     setError(null);
     try {
-      await resolveDoc(workspaceId, doc.locale, doc.type, doc.slug, strategy);
+      await resolveDoc(workspaceId, doc.type, doc.slug, strategy);
       notifyTreeChanged({
         workspaceId,
-        locale: doc.locale,
         type: doc.type,
         slug: doc.slug,
         status: strategy === "theirs" ? "clean" : "modified",

package/src/pages/PreviewSize.tsx

@@ -0,0 +1,181 @@
+// packages/studio/src/pages/PreviewSize.tsx
+import type { KeyboardEvent, ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import {
+  IconImac,
+  IconPhone,
+  IconTablet,
+} from "@central-icons-react/round-outlined-radius-2-stroke-1.5";
+import { colors, radius } from "../styles/tokens.stylex";
+import { Tooltip } from "../ui/Tooltip";
+import {
+  previewFrameWidth,
+  type PreviewSize,
+} from "./preview-size";
+
+const OPTIONS: readonly { size: PreviewSize; label: string; icon: typeof IconImac }[] = [
+  { size: "desktop", label: "Desktop", icon: IconImac },
+  { size: "tablet", label: "Tablet", icon: IconTablet },
+  { size: "phone", label: "Phone", icon: IconPhone },
+];
+
+export function PreviewSizeSwitch({
+  size,
+  onSize,
+  disabled = false,
+}: {
+  size: PreviewSize;
+  onSize: (size: PreviewSize) => void;
+  disabled?: boolean;
+}) {
+  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (disabled) return;
+    const index = OPTIONS.findIndex((option) => option.size === size);
+    const next =
+      event.key === "ArrowRight" ? OPTIONS[(index + 1) % OPTIONS.length]
+      : event.key === "ArrowLeft" ? OPTIONS[(index - 1 + OPTIONS.length) % OPTIONS.length]
+      : null;
+    if (!next) return;
+    event.preventDefault();
+    onSize(next.size);
+    event.currentTarget.querySelector<HTMLButtonElement>(`[data-preview-size="${next.size}"]`)?.focus();
+  }
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Preview size"
+      onKeyDown={onKeyDown}
+      {...stylex.props(styles.group)}
+    >
+      {OPTIONS.map((option) => {
+        const selected = option.size === size;
+        const Icon = option.icon;
+        return (
+          <Tooltip key={option.size} label={option.label}>
+            <button
+              type="button"
+              role="radio"
+              data-preview-size={option.size}
+              aria-label={option.label}
+              aria-checked={selected}
+              disabled={disabled}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onSize(option.size)}
+              {...stylex.props(
+                styles.option,
+                selected && styles.optionOn,
+                disabled && styles.optionDisabled,
+              )}
+            >
+              <Icon size={14} ariaHidden />
+            </button>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Centers a fixed-width preview and scrolls sideways when the pane is narrower. */
+export function PreviewViewport({
+  size,
+  dragging = false,
+  children,
+}: {
+  size: PreviewSize;
+  dragging?: boolean;
+  children: ReactNode;
+}) {
+  const width = previewFrameWidth(size);
+  const viewport = stylex.props(styles.viewport, dragging && styles.dragging);
+  const slot = stylex.props(styles.slot, width !== null && styles.slotFixed);
+  return (
+    <div className={viewport.className} style={viewport.style}>
+      <div
+        className={slot.className}
+        style={width === null ? slot.style : { ...slot.style, width }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+const hover = "@media (hover: hover)";
+
+const styles = stylex.create({
+  group: {
+    display: "inline-flex",
+    flexShrink: 0,
+    gap: "2px",
+    padding: "2px",
+    borderRadius: radius.md,
+    backgroundColor: colors.bgPanelInset,
+  },
+  option: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "22px",
+    padding: 0,
+    borderWidth: 0,
+    borderRadius: radius.sm,
+    color: colors.textMuted,
+    backgroundColor: "transparent",
+    cursor: "pointer",
+    [hover]: {
+      ":hover:not(:disabled)": {
+        color: colors.text,
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  optionOn: {
+    color: colors.text,
+    backgroundColor: colors.bgSurface,
+    boxShadow: "0 1px 2px rgba(0, 0, 0, 0.08)",
+  },
+  optionDisabled: {
+    cursor: "default",
+    color: colors.border,
+  },
+  viewport: {
+    display: "flex",
+    flex: 1,
+    alignItems: "stretch",
+    justifyContent: "center",
+    minWidth: 0,
+    minHeight: 0,
+    overflowX: "auto",
+    overflowY: "hidden",
+  },
+  dragging: {
+    pointerEvents: "none",
+  },
+  slot: {
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    minWidth: 0,
+    minHeight: 0,
+    backgroundColor: colors.bgSurface,
+  },
+  slotFixed: {
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: "auto",
+    outlineWidth: 1,
+    outlineStyle: "solid",
+    outlineColor: colors.border,
+  },
+});

package/src/pages/SettingsGeneralPage.tsx

@@ -7,6 +7,8 @@ import {
   rotateHostToken,
   rotatePreviewToken,
 } from "../api";
+import { publicContentApiUrl } from "../chrome/content-api-url";
+import { useReplicaState } from "../replica/useReplica";
 import { hostEnvSnippet } from "./host-env";
 import { isStudioDev, publicApiUrl } from "../studio-config";
 import { revalidateWebhookUrl } from "./preview-url";
@@ -24,6 +26,7 @@ export function SettingsGeneralPage() {
   const [previewTokenOnce, setPreviewTokenOnce] = useState<string | null>(null);
   const [hostTokenOnce, setHostTokenOnce] = useState<string | null>(null);
   const [copiedId, setCopiedId] = useState(false);
+  const [copiedApi, setCopiedApi] = useState(false);
   const [copiedEnv, setCopiedEnv] = useState(false);
   const [siteUrl, setSiteUrl] = useState(workspace.siteUrls?.[0] ?? "");
   const [error, setError] = useState<string | null>(null);
@@ -34,13 +37,25 @@ export function SettingsGeneralPage() {
   const webhookUrl = revalidateWebhookUrl(siteUrl);
 
   useEffect(() => {
-    if (!copiedId && !copiedEnv) return;
+    if (!copiedId && !copiedApi && !copiedEnv) return;
     const id = window.setTimeout(() => {
       setCopiedId(false);
+      setCopiedApi(false);
       setCopiedEnv(false);
     }, 1500);
     return () => window.clearTimeout(id);
-  }, [copiedId, copiedEnv]);
+  }, [copiedId, copiedApi, copiedEnv]);
+
+  const git = useReplicaState().git(workspace.id);
+  const docsUrl = publicContentApiUrl({
+    apiUrl: publicApiUrl(),
+    workspaceId: workspace.id,
+    branch: git?.currentBranch,
+    defaultBranch: git?.defaultBranch,
+  });
+  const branchLocked = Boolean(
+    git?.currentBranch && git.defaultBranch && git.currentBranch !== git.defaultBranch,
+  );
 
   const envSnippet = hostEnvSnippet({
     workspaceId: workspace.id,
@@ -197,6 +212,38 @@ export function SettingsGeneralPage() {
             backmatter.config.ts workspaceId · public URLs use this id, not the slug
           </p>
         </Panel>
+        <Panel>
+          <Text as="h2" size="lg" weight="medium">
+            Content API
+          </Text>
+          <div {...stylex.props(styles.idRow)}>
+            <a
+              href={docsUrl}
+              target="_blank"
+              rel="noreferrer"
+              {...stylex.props(styles.pre, styles.idPre, styles.apiLink)}
+            >
+              {docsUrl}
+            </a>
+            <Button
+              variant="secondary"
+              aria-label={copiedApi ? "Copied content API URL" : "Copy content API URL"}
+              onClick={() => {
+                void navigator.clipboard.writeText(docsUrl).then(
+                  () => setCopiedApi(true),
+                  () => setCopiedApi(false),
+                );
+              }}
+            >
+              {copiedApi ? "Copied" : "Copy"}
+            </Button>
+          </div>
+          <p {...stylex.props(styles.caption)}>
+            {branchLocked
+              ? "This branch needs the content token below."
+              : "Default branch is public — no token. URLs use the workspace id."}
+          </p>
+        </Panel>
         <Panel>
           <Text as="h2" size="lg" weight="medium">
             Host environment
@@ -358,6 +405,8 @@ export function relativeTime(iso: string, now = Date.now()): string {
   return `${Math.round(hours / 24)}d ago`;
 }
 
+const hover = "@media (hover: hover)";
+
 const styles = stylex.create({
   block: {
     marginTop: space.md,
@@ -379,6 +428,22 @@ const styles = stylex.create({
     flex: 1,
     minWidth: 0,
   },
+  apiLink: {
+    display: "block",
+    color: colors.text,
+    textDecoration: "none",
+    [hover]: {
+      ":hover": {
+        textDecoration: "underline",
+      },
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 2,
+    },
+  },
   caption: {
     marginTop: space.sm,
     marginBottom: 0,