@backmatter/studio 0.0.3 → 0.0.5

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/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/host-env.ts

@@ -7,12 +7,17 @@ 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",
+    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),