@backmatter/studio 0.0.15 → 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/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,

package/src/pages/WorkspaceHomePage.tsx

@@ -0,0 +1,313 @@
+// packages/studio/src/pages/WorkspaceHomePage.tsx
+import { Link, useOutletContext } from "react-router";
+import * as stylex from "@stylexjs/stylex";
+import { useReplicaState } from "../replica/useReplica";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { PageHeader } from "../ui/Page";
+import { Text } from "../ui/Text";
+import { codeSessionEntry } from "../code-session-entry";
+import type { WorkspaceOutletContext } from "../workspace/types";
+import { homeSummary, commitAge, type HomeRow, type HomeSummary } from "./home-rows";
+import type { RecentCommit } from "../api";
+
+const hover = "@media (hover: hover)";
+
+export function UncommittedHome({
+  summary,
+  codeHref = null,
+}: {
+  summary: HomeSummary;
+  codeHref?: string | null;
+}) {
+  const branchDetail =
+    summary.branch === summary.defaultBranch
+      ? "Default branch"
+      : `Default is ${summary.defaultBranch}`;
+  return (
+    <>
+      <PageHeader title={summary.name} description={`On ${summary.branch}`} />
+      <div {...stylex.props(styles.grid)}>
+        <UncommittedCard summary={summary} />
+        <CommitsCard summary={summary} />
+        <FactCard
+          kicker="Models"
+          value={summary.modelCount === 0 ? "None yet" : String(summary.modelCount)}
+          detail={
+            summary.modelCount === 0
+              ? "Pull from GitHub to load models."
+              : "Loaded from the repository."
+          }
+          href={summary.schemaHref}
+        />
+        <FactCard
+          kicker="Branch"
+          value={summary.branch}
+          detail={branchDetail}
+          href={summary.githubHref}
+        />
+        <FactCard
+          kicker="Repository"
+          value={summary.repository ?? "Not connected"}
+          detail={summary.repository ? "GitHub" : "Connect a repository."}
+          href={summary.githubHref}
+        />
+        <FactCard
+          kicker="Site"
+          value={summary.siteUrl ?? "No site URL"}
+          detail={summary.siteUrl ? "Public origin" : "Add the site origin."}
+          href={summary.generalHref}
+        />
+        {codeHref ? (
+          <FactCard
+            kicker="Code"
+            value="Session"
+            detail="Host on the left, chat on the right."
+            href={codeHref}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+}
+
+function UncommittedCard({ summary }: { summary: HomeSummary }) {
+  const detail =
+    summary.uncommitted === 0
+      ? "Your working tree is clean."
+      : summary.conflicts === 0
+        ? "No conflicts."
+        : summary.conflicts === 1
+          ? "1 conflict"
+          : `${summary.conflicts} conflicts`;
+  return (
+    <section {...stylex.props(styles.card, styles.span)}>
+      <Text size="sm" tone="muted" weight="medium">
+        Uncommitted
+      </Text>
+      <p {...stylex.props(styles.value)}>{summary.uncommitted}</p>
+      <Text size="sm" tone={summary.conflicts > 0 ? "danger" : "muted"}>
+        {detail}
+      </Text>
+      {summary.recent.length > 0 ? (
+        <>
+          <Text size="sm" tone="muted">
+            Recently changed
+          </Text>
+          <ul {...stylex.props(styles.recent)}>
+            {summary.recent.map((row) => (
+              <li key={row.key}>
+                <RecentRow row={row} />
+              </li>
+            ))}
+          </ul>
+        </>
+      ) : null}
+    </section>
+  );
+}
+
+function CommitsCard({ summary }: { summary: HomeSummary }) {
+  if (!summary.commits) return null;
+  return (
+    <section {...stylex.props(styles.card, styles.span)}>
+      <Text size="sm" tone="muted" weight="medium">
+        Lately
+      </Text>
+      {summary.commits.length === 0 ? (
+        <Text size="sm" tone="muted">
+          No commits on this branch yet.
+        </Text>
+      ) : (
+        <ul {...stylex.props(styles.recent)}>
+          {summary.commits.map((commit) => (
+            <li key={commit.sha}>
+              <CommitRow commit={commit} repository={summary.repository} />
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+function CommitRow({
+  commit,
+  repository,
+}: {
+  commit: RecentCommit;
+  repository: string | null;
+}) {
+  const when = commitAge(commit.committedAt, Date.now());
+  const who = [commit.author, when, commit.cms ? "CMS" : ""].filter(Boolean).join(" · ");
+  const body = (
+    <>
+      <span {...stylex.props(styles.recentName)}>{commit.message}</span>
+      <span {...stylex.props(styles.recentStatus)}>{who}</span>
+    </>
+  );
+  if (!repository) return <div {...stylex.props(styles.recentRow)}>{body}</div>;
+  return (
+    <a
+      href={`https://github.com/${repository}/commit/${commit.sha}`}
+      target="_blank"
+      rel="noreferrer"
+      {...stylex.props(styles.recentRow, styles.recentLink)}
+    >
+      {body}
+    </a>
+  );
+}
+
+function RecentRow({ row }: { row: HomeRow }) {
+  const body = (
+    <>
+      <span {...stylex.props(styles.recentName, row.route ? styles.recentRoute : null)}>
+        {row.route ?? row.label}
+      </span>
+      <span {...stylex.props(styles.recentStatus)}>
+        {row.route ? row.status : `data · ${row.status}`}
+      </span>
+    </>
+  );
+  if (!row.href) return <div {...stylex.props(styles.recentRow)}>{body}</div>;
+  return (
+    <Link to={row.href} {...stylex.props(styles.recentRow, styles.recentLink)}>
+      {body}
+    </Link>
+  );
+}
+
+function FactCard({
+  kicker,
+  value,
+  detail,
+  href,
+}: {
+  kicker: string;
+  value: string;
+  detail: string;
+  href: string;
+}) {
+  return (
+    <Link to={href} {...stylex.props(styles.card, styles.cardLink)}>
+      <Text size="sm" tone="muted" weight="medium">
+        {kicker}
+      </Text>
+      <p {...stylex.props(styles.factValue)}>{value}</p>
+      <Text size="sm" tone="muted">
+        {detail}
+      </Text>
+    </Link>
+  );
+}
+
+export function WorkspaceHomePage() {
+  const { workspace, models } = useOutletContext<WorkspaceOutletContext>();
+  const git = useReplicaState().git(workspace.id);
+  const summary = homeSummary({
+    name: workspace.name,
+    slug: workspace.slug,
+    branch: git?.currentBranch ?? "main",
+    defaultBranch: git?.defaultBranch ?? git?.currentBranch ?? "main",
+    repository: workspace.githubRepoFullName,
+    siteUrl: workspace.siteUrls[0] ?? null,
+    modelCount: models.length,
+    changes: git?.fetchedChanges ?? git?.changes ?? [],
+    models,
+    commits: git?.recentCommits ?? null,
+  });
+  return (
+    <UncommittedHome
+      summary={summary}
+      codeHref={codeSessionEntry(workspace.role, workspace.slug)}
+    />
+  );
+}
+
+const styles = stylex.create({
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+    gap: space.lg,
+  },
+  span: {
+    gridColumn: "1 / -1",
+  },
+  card: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+    minWidth: 0,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    padding: space.xl,
+    textDecoration: "none",
+    color: colors.text,
+  },
+  cardLink: {
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.bgHover,
+      },
+    },
+  },
+  value: {
+    margin: 0,
+    fontSize: "32px",
+    fontWeight: 600,
+    letterSpacing: "-0.03em",
+    lineHeight: 1,
+  },
+  factValue: {
+    margin: 0,
+    overflow: "hidden",
+    fontSize: type.lg,
+    fontWeight: 600,
+    letterSpacing: "-0.02em",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  recent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    margin: 0,
+    marginTop: space.md,
+    padding: 0,
+    listStyle: "none",
+  },
+  recentRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.lg,
+    minHeight: "28px",
+    color: colors.text,
+    textDecoration: "none",
+  },
+  recentLink: {
+    [hover]: {
+      ":hover": {
+        color: colors.textMuted,
+      },
+    },
+  },
+  recentName: {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: type.md,
+  },
+  recentRoute: {
+    fontFamily: type.mono,
+    fontSize: type.sm,
+  },
+  recentStatus: {
+    flexShrink: 0,
+    fontSize: type.sm,
+    color: colors.textMuted,
+  },
+});