@backmatter/studio 0.0.2 → 0.0.4

package/src/pages/EmbedPublishPage.tsx

@@ -1,6 +1,6 @@
 // packages/studio/src/pages/EmbedPublishPage.tsx
 // The CMS commit flow, alone, so the on-site bar can frame it.
-import { useEffect, useMemo, useState, type FormEvent } from "react";
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { installParentChatHotkey } from "../chrome/hotkeys";
 import * as stylex from "@stylexjs/stylex";
 import {
@@ -13,14 +13,13 @@ import {
   publishCommittedFiles,
   resolveDoc,
   type ApiError,
+  type ChangeStatus,
   type GitChange,
   type GitState,
 } from "../api";
 import { statusBarAction } from "../chrome/status-bar-action";
-import { colors, space, type } from "../styles/tokens.stylex";
-import { Button } from "../ui/Button";
-import { Input } from "../ui/Input";
-import { Text } from "../ui/Text";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { popup } from "../ui/popup";
 import { canPublish } from "../workspace/permissions";
 
 const POLL_MS = 8000;
@@ -50,7 +49,24 @@ function changeKey(doc: GitChange) {
   return `${doc.locale}/${doc.type}/${doc.slug}`;
 }
 
-export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
+const STATUS_LABEL: Record<ChangeStatus, string> = {
+  modified: "modified",
+  added: "new",
+  conflict: "conflict",
+  deleted: "deleted",
+};
+
+const hover = "@media (hover: hover)";
+
+export function EmbedPublishPage({
+  workspaceId,
+  onStatus,
+  onPublished,
+}: {
+  workspaceId: string;
+  onStatus?: (status: { changeCount: number; conflictCount: number }) => void;
+  onPublished?: () => void;
+}) {
   useEffect(() => installParentChatHotkey(), []);
   const [git, setGit] = useState<GitState | null>(null);
   const [role, setRole] = useState("viewer");
@@ -73,6 +89,9 @@ export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
     };
   }, [workspaceId]);
 
+  const onStatusRef = useRef(onStatus);
+  onStatusRef.current = onStatus;
+
   useEffect(() => {
     let stop = false;
     const load = () => {
@@ -80,14 +99,13 @@ export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
         .then((next) => {
           if (stop) return;
           setGit(next);
+          const changeCount = next.changes.length;
+          const conflictCount = countConflicts(next);
+          onStatusRef.current?.({ changeCount, conflictCount });
           const origin = parentOrigin();
-          if (!origin) return;
+          if (!origin || window.parent === window) return;
           window.parent.postMessage(
-            {
-              type: "backmatter:git",
-              changeCount: next.changes.length,
-              conflictCount: countConflicts(next),
-            },
+            { type: "backmatter:git", changeCount, conflictCount },
             origin,
           );
         })
@@ -143,8 +161,11 @@ export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
       const result = await commitWorkspace(workspaceId, message);
       setMessage("");
       publishCommittedFiles(workspaceId, result.files);
+      onPublished?.();
       const origin = parentOrigin();
-      if (origin) window.parent.postMessage({ type: "backmatter:published" }, origin);
+      if (origin && window.parent !== window) {
+        window.parent.postMessage({ type: "backmatter:published" }, origin);
+      }
       setGit(await fetchGit(workspaceId));
     } catch (err) {
       setError(formatCommitError(err));
@@ -153,107 +174,281 @@ export function EmbedPublishPage({ workspaceId }: { workspaceId: string }) {
     }
   }
 
-  const label = committing
-    ? "Committing…"
-    : conflictCount > 0
-      ? `Resolve ${conflictCount} ${conflictCount === 1 ? "conflict" : "conflicts"}`
-      : action === "blocked"
-        ? "Writers cannot publish"
-        : changes.length === 0
-          ? "Nothing to publish"
-          : `Deploy ${changes.length} ${changes.length === 1 ? "change" : "changes"}`;
+  const branch = git?.currentBranch ?? "main";
 
-  return (
-    <form {...stylex.props(styles.panel)} onSubmit={(event) => void onCommit(event)}>
-      <Text as="p" size="sm" weight="medium" tone="muted">
-        {git?.currentBranch ?? "Publish"}
-      </Text>
-      {changes.length === 0 ? (
-        <Text as="p" size="sm" tone="muted">
-          Nothing to publish
-        </Text>
-      ) : (
-        <ul {...stylex.props(styles.list)}>
-          {changes.map((change) => (
-            <li key={changeKey(change)} {...stylex.props(styles.row)}>
-              <span>
-                {change.status} {change.type}/{change.slug}
-              </span>
-              {change.status === "conflict" ? (
-                <span {...stylex.props(styles.resolve)}>
-                  <Button
-                    size="sm"
-                    variant="secondary"
+  if (conflicts.length > 0) {
+    return (
+      <div {...stylex.props(styles.form)}>
+        <p {...stylex.props(popup.groupLabel)}>Resolve conflicts</p>
+        <p {...stylex.props(styles.hint)}>
+          Pick a side for each file. Commit stays blocked until every conflict is resolved.
+        </p>
+        {error ? <p {...stylex.props(styles.error)}>{error}</p> : null}
+        <ul {...stylex.props(styles.files, styles.conflictList)}>
+          {conflicts.map((doc) => {
+            const key = changeKey(doc);
+            return (
+              <li key={key} {...stylex.props(styles.conflictRow)}>
+                <span {...stylex.props(styles.fileName)}>
+                  {doc.type}/{doc.slug}
+                </span>
+                <div {...stylex.props(styles.conflictActions)}>
+                  <button
+                    type="button"
                     disabled={resolvingKey !== null}
-                    onClick={() => void onResolve(change, "mine")}
+                    onClick={() => void onResolve(doc, "mine")}
+                    {...stylex.props(styles.conflictBtn)}
                   >
-                    Keep mine
-                  </Button>
-                  <Button
-                    size="sm"
-                    variant="secondary"
+                    {resolvingKey === `${key}:mine` ? "Keeping…" : "Keep mine"}
+                  </button>
+                  <button
+                    type="button"
                     disabled={resolvingKey !== null}
-                    onClick={() => void onResolve(change, "theirs")}
+                    onClick={() => void onResolve(doc, "theirs")}
+                    {...stylex.props(styles.conflictBtn, styles.conflictBtnDanger)}
                   >
-                    Take theirs
-                  </Button>
+                    {resolvingKey === `${key}:theirs` ? "Taking…" : "Take theirs"}
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+
+  return (
+    <form {...stylex.props(styles.form)} onSubmit={(event) => void onCommit(event)}>
+      <p {...stylex.props(popup.groupLabel)}>
+        {changes.length === 0
+          ? "Nothing to publish"
+          : `${changes.length} ${changes.length === 1 ? "file" : "files"} → ${branch}`}
+      </p>
+      {changes.length > 0 ? (
+        <ul {...stylex.props(styles.files)}>
+          {changes.map((doc) => (
+            <li key={changeKey(doc)}>
+              <div {...stylex.props(styles.file)}>
+                <span {...stylex.props(styles.fileName)}>
+                  {doc.type}/{doc.slug}
                 </span>
-              ) : null}
+                <span {...stylex.props(popup.itemMeta)}>{STATUS_LABEL[doc.status]}</span>
+              </div>
             </li>
           ))}
         </ul>
-      )}
-      {conflicts.length > 0 ? null : (
-        <Input
-          value={message}
-          placeholder={placeholder}
-          aria-label="Commit message"
-          onChange={(event) => setMessage(event.target.value)}
-        />
-      )}
-      {error ? (
-        <Text as="p" size="sm" tone="danger">
-          {error}
-        </Text>
       ) : null}
-      <Button
-        type="submit"
-        size="sm"
-        disabled={committing || action !== "commit" || changes.length === 0}
-      >
-        {label}
-      </Button>
+      {changes.length > 0 ? <div {...stylex.props(popup.separator)} /> : null}
+      {changes.length > 0 ? (
+        <div {...stylex.props(styles.footer)}>
+          <input
+            value={message}
+            onChange={(event) => setMessage(event.target.value)}
+            placeholder={placeholder}
+            aria-label="Commit message"
+            autoComplete="off"
+            spellCheck={false}
+            data-no-ring
+            data-1p-ignore
+            data-lpignore
+            disabled={committing || action !== "commit"}
+            {...stylex.props(styles.field)}
+          />
+          {error ? <p {...stylex.props(styles.error, styles.errorInFooter)}>{error}</p> : null}
+          {action === "blocked" ? (
+            <p {...stylex.props(styles.hint)}>Writers cannot publish</p>
+          ) : (
+            <button
+              type="submit"
+              disabled={committing || action !== "commit"}
+              {...stylex.props(styles.submit)}
+            >
+              {committing ? "Committing…" : "Commit & push"}
+            </button>
+          )}
+        </div>
+      ) : error ? (
+        <p {...stylex.props(styles.error)}>{error}</p>
+      ) : null}
     </form>
   );
 }
 
 const styles = stylex.create({
-  panel: {
+  form: {
     display: "flex",
     flexDirection: "column",
-    gap: space.lg,
-    minHeight: "100%",
-    boxSizing: "border-box",
-    padding: space.xl,
+    paddingTop: space.xs,
     backgroundColor: colors.bgSurface,
     color: colors.text,
-    fontSize: type.sm,
   },
-  list: {
+  files: {
     margin: 0,
     padding: 0,
     listStyle: "none",
+    maxHeight: "160px",
+    overflowY: "auto",
+    paddingBottom: space.xs,
+  },
+  file: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    minHeight: 30,
+    margin: 0,
+    marginInline: space.xs,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  fileName: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  footer: {
     display: "flex",
     flexDirection: "column",
+    alignItems: "stretch",
     gap: space.md,
+    paddingInline: space.lg,
+    paddingTop: space.md,
+    paddingBottom: space.lg,
+  },
+  field: {
+    width: "100%",
+    boxSizing: "border-box",
+    minHeight: "28px",
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgInput,
+    color: colors.text,
+    fontSize: type.sm,
+    outline: "none",
+    ":focus": {
+      outline: "none",
+      borderColor: `color-mix(in srgb, ${colors.textMuted} 45%, ${colors.border})`,
+    },
+    ":focus-visible": {
+      outline: "none",
+    },
+    ":disabled": {
+      opacity: 0.55,
+    },
+    "::placeholder": {
+      color: colors.textMuted,
+    },
   },
-  row: {
+  submit: {
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 28,
+    paddingInline: space.xl,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.accent,
+    borderRadius: radius.md,
+    backgroundColor: colors.accent,
+    color: colors.textInverse,
+    fontSize: type.xs,
+    fontWeight: 500,
+    whiteSpace: "nowrap",
+    cursor: "pointer",
+    [hover]: {
+      ":hover": {
+        backgroundColor: colors.accentHover,
+        borderColor: colors.accentHover,
+      },
+    },
+    ":disabled": {
+      opacity: 0.55,
+      cursor: "not-allowed",
+    },
+    ":active": {
+      transform: "scale(0.97)",
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+      ":active": {
+        transform: "none",
+      },
+    },
+  },
+  hint: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBottom: space.sm,
+    fontSize: type.xs,
+    lineHeight: 1.4,
+    color: colors.textMuted,
+  },
+  error: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBottom: space.sm,
+    fontSize: type.xs,
+    color: colors.danger,
+  },
+  errorInFooter: {
+    paddingInline: 0,
+    paddingBottom: 0,
+  },
+  conflictList: {
+    maxHeight: "280px",
+  },
+  conflictRow: {
     display: "flex",
     flexDirection: "column",
-    gap: space.sm,
+    gap: space.xs,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    fontFamily: type.mono,
+    fontSize: type.xs,
   },
-  resolve: {
+  conflictActions: {
     display: "flex",
-    gap: space.sm,
+    gap: space.xs,
+  },
+  conflictBtn: {
+    height: 24,
+    paddingInline: space.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    borderRadius: radius.md,
+    backgroundColor: colors.bgSurface,
+    color: colors.text,
+    fontSize: type.xs,
+    cursor: "pointer",
+    ":disabled": {
+      opacity: 0.55,
+      cursor: "not-allowed",
+    },
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: 1,
+    },
+  },
+  conflictBtnDanger: {
+    borderColor: colors.danger,
+    color: colors.danger,
   },
 });

package/src/pages/GithubConnectPage.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate, useOutletContext } from "react-router";
 import { bindGithub, fetchGithubRepos, type ApiError } from "../api";
+import { SelectRepositoriesLink } from "./SelectRepositoriesLink";
 import { BackLink } from "../ui/BackLink";
 import { Button, ButtonLink } from "../ui/Button";
 import { Field } from "../ui/Field";
@@ -30,24 +31,43 @@ export function GithubConnectPage() {
 
   useEffect(() => {
     if (!workspaceId) return;
-    void fetchGithubRepos(workspaceId)
-      .then((data) => {
-        setRepos(data.repos);
-        setSelected((current) =>
-          current && data.repos.some((repo) => repo.fullName === current)
-            ? current
-            : (data.repos[0]?.fullName ?? ""),
-        );
-      })
-      .catch((err: Error) => {
-        const code = err.message;
-        setError(
-          code === "github_not_installed" || code === "github_list_failed"
-            ? "The saved GitHub installation is missing or this app cannot access it."
-            : code,
-        );
-      })
-      .finally(() => setLoading(false));
+    let cancelled = false;
+
+    function load() {
+      void fetchGithubRepos(workspaceId)
+        .then((data) => {
+          if (cancelled) return;
+          setRepos(data.repos);
+          setSelected((current) =>
+            current && data.repos.some((repo) => repo.fullName === current)
+              ? current
+              : (data.repos[0]?.fullName ?? ""),
+          );
+          setError(null);
+        })
+        .catch((err: Error) => {
+          if (cancelled) return;
+          const code = err.message;
+          setError(
+            code === "github_not_installed" || code === "github_list_failed"
+              ? "The saved GitHub installation is missing or this app cannot access it."
+              : code,
+          );
+        })
+        .finally(() => {
+          if (!cancelled) setLoading(false);
+        });
+    }
+
+    load();
+    function onVisible() {
+      if (document.visibilityState === "visible") load();
+    }
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      cancelled = true;
+      document.removeEventListener("visibilitychange", onVisible);
+    };
   }, [workspaceId]);
 
   async function onSubmit(e: React.FormEvent) {
@@ -100,6 +120,7 @@ export function GithubConnectPage() {
               ? "GitHub did not return repositories for the saved installation."
               : "No repositories are available for this installation."}
           </Text>
+          <SelectRepositoriesLink workspaceId={workspaceId} />
           <div>
             <ButtonLink to={settingsPath(workspace.slug, "github")} variant="secondary">
               Back to GitHub settings
@@ -109,7 +130,10 @@ export function GithubConnectPage() {
       ) : (
         <form onSubmit={onSubmit}>
           <Stack>
-            <Field label="Repository">
+            <Field
+              label="Repository"
+              hint="Only repositories granted to the GitHub App are listed."
+            >
               <Select
                 aria-label="Repository"
                 value={selected}
@@ -120,6 +144,7 @@ export function GithubConnectPage() {
                 }))}
               />
             </Field>
+            <SelectRepositoriesLink workspaceId={workspaceId} />
             <Field
               label="Directory"
               hint="Folder inside the repository that contains this site. Leave empty for the repository root."

package/src/pages/SelectRepositoriesLink.tsx

@@ -0,0 +1,30 @@
+// packages/studio/src/pages/SelectRepositoriesLink.tsx
+import { useEffect, useState } from "react";
+import { fetchGithubRepositoryAccess } from "../api";
+import { ButtonLink } from "../ui/Button";
+
+/** Opens the GitHub page where this installation's repository access is chosen. */
+export function SelectRepositoriesLink({ workspaceId }: { workspaceId: string }) {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchGithubRepositoryAccess(workspaceId)
+      .then((data) => {
+        if (!cancelled) setUrl(data.url);
+      })
+      .catch(() => {
+        if (!cancelled) setUrl(null);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [workspaceId]);
+
+  if (!url) return null;
+  return (
+    <ButtonLink href={url} variant="secondary">
+      Select repositories on GitHub
+    </ButtonLink>
+  );
+}

package/src/pages/SettingsGeneralPage.tsx

@@ -8,6 +8,7 @@ import {
   rotatePreviewToken,
 } from "../api";
 import { hostEnvSnippet } from "./host-env";
+import { isStudioDev, publicApiUrl } from "../studio-config";
 import { revalidateWebhookUrl } from "./preview-url";
 import { Button } from "../ui/Button";
 import { Field } from "../ui/Field";
@@ -48,6 +49,7 @@ export function SettingsGeneralPage() {
     previewToken: previewTokenOnce,
     hostToken: hostTokenOnce,
     siteUrl: workspace.siteUrls?.[0],
+    apiUrl: isStudioDev() ? publicApiUrl() : undefined,
   });
 
   async function onSaveSiteUrl(e: React.FormEvent) {

package/src/pages/SettingsGithubPage.tsx

@@ -18,6 +18,7 @@ import * as stylex from "@stylexjs/stylex";
 import { colors, space, type } from "../styles/tokens.stylex";
 import type { WorkspaceOutletContext } from "../workspace/types";
 import { githubConnectPath } from "../workspace-path";
+import { SelectRepositoriesLink } from "./SelectRepositoriesLink";
 
 export function SettingsGithubPage() {
   const { workspace, reload } = useOutletContext<WorkspaceOutletContext>();
@@ -172,6 +173,7 @@ export function SettingsGithubPage() {
                 >
                   Change repository
                 </ButtonLink>
+                <SelectRepositoriesLink workspaceId={workspace.id} />
                 <Button
                   variant="danger"
                   disabled={disconnecting}
@@ -185,9 +187,9 @@ export function SettingsGithubPage() {
         ) : (
           <Stack>
             <Text tone="muted" size="sm">
-              Connect finds the backmatter CMS installation on your GitHub
-              account and opens the repository list here. Saving on GitHub does
-              not return to Backmatter.
+              {workspace.githubInstallationId
+                ? "The list only includes repositories this GitHub App can access. Select repositories on GitHub to grant more. Saving there does not return to Backmatter."
+                : "Connect finds the backmatter CMS installation on your GitHub account and opens the repository list here. Saving on GitHub does not return to Backmatter."}
             </Text>
             {canEdit ? (
               <div {...stylex.props(styles.actions)}>
@@ -210,6 +212,9 @@ export function SettingsGithubPage() {
                     {connecting ? "Connecting…" : "Connect GitHub"}
                   </Button>
                 )}
+                {workspace.githubInstallationId ? (
+                  <SelectRepositoriesLink workspaceId={workspace.id} />
+                ) : null}
                 {installUrl ? (
                   <ButtonLink href={installUrl} newTab={false} variant="secondary">
                     Install on GitHub

package/src/pages/host-env.ts

@@ -7,13 +7,18 @@ export function hostEnvSnippet(input: {
   previewToken?: string | null;
   hostToken?: string | null;
   siteUrl?: string | null;
+  /** Local API origin. Passed only while the dashboard is running in dev. */
+  apiUrl?: string | null;
 }): string {
   const line = (name: string, value: string | null | undefined) =>
     `${name}=${value?.trim() ?? ""}`;
+  const apiUrl = input.apiUrl?.trim();
   return [
     `# backmatter.config.ts → workspaceId: "${input.workspaceId}"`,
-    "# API defaults to https://api.backmatter.app in production",
-    "# BACKMATTER_API_URL=http://localhost:3001  # local or self-hosted CMS",
+    apiUrl
+      ? line("BACKMATTER_API_URL", apiUrl)
+      : "# API defaults to https://api.backmatter.app in production",
+    line("BACKMATTER_WORKSPACE_ID", input.workspaceId),
     line("BACKMATTER_PREVIEW_TOKEN", input.previewToken),
     line("BACKMATTER_HOST_TOKEN", input.hostToken),
     line("BACKMATTER_CONTENT_TOKEN", input.contentToken),