@backmatter/studio 0.0.1

package/src/chrome/WorkspaceStatusBar.tsx

@@ -0,0 +1,940 @@
+// packages/studio/src/chrome/WorkspaceStatusBar.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Link, useLocation } from "react-router";
+import { canPublish } from "../workspace/permissions";
+import { Combobox } from "@base-ui/react/combobox";
+import { Popover } from "@base-ui/react/popover";
+import * as stylex from "@stylexjs/stylex";
+import {
+  commitWorkspace,
+  countConflicts,
+  createGitBranch,
+  defaultCommitMessage,
+  fetchGit,
+  notifyHeadChanged,
+  notifyTreeChanged,
+  publishCommittedFiles,
+  notifyWorkspaceChanged,
+  pullFromGithub,
+  resolveDoc,
+  type ApiError,
+  type ChangeStatus,
+  type GitChange,
+} from "../api";
+import { contentDocPath } from "../workspace-path";
+import { CheckIcon } from "../chat/icons";
+import { WorkspaceSwitcher } from "../components/WorkspaceSwitcher";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { cx, popup, popupClassName } from "../ui/popup";
+import { useEditorStatus } from "./EditorStatusContext";
+import { ContentApiPopover } from "./ContentApiPopover";
+import { OpenSiteButton } from "./OpenSiteButton";
+import { GitBranchIcon } from "./icons";
+import { StatusBar, StatusItem, StatusSpacer } from "./StatusBar";
+import { replicaStore } from "../replica/instance";
+import { useReplicaSession } from "../replica/ReplicaProvider";
+import { useReplicaState } from "../replica/useReplica";
+import { useWorkspaceNav } from "./WorkspaceNavContext";
+import { commitTriggerDisabled, statusBarAction } from "./status-bar-action";
+
+const hover = "@media (hover: hover)";
+const POLL_MS = 8000;
+
+export const STATUS_LABEL: Record<ChangeStatus, string> = {
+  modified: "modified",
+  added: "new",
+  conflict: "conflict",
+  deleted: "deleted",
+};
+
+function formatCommitError(err: unknown): string {
+  if (!(err instanceof Error)) return "Commit failed";
+  const apiErr = err as ApiError;
+  if (apiErr.code === "conflict") return "Resolve conflicts before committing";
+  if (apiErr.code === "nothing_to_commit") return "Nothing to commit";
+  if (apiErr.code === "validation") {
+    return err.message.replace(/^validation:\s*/, "Validation failed: ");
+  }
+  if (apiErr.code === "github_not_bound") return "Connect GitHub first";
+  return err.message;
+}
+
+function changeKey(doc: GitChange) {
+  return `${doc.locale}/${doc.type}/${doc.slug}`;
+}
+
+function ConflictResolvePanel({
+  workspaceSlug,
+  defaultLocale,
+  conflicts,
+  resolvingKey,
+  error,
+  onOpenDoc,
+  onResolve,
+}: {
+  workspaceSlug: string | null;
+  defaultLocale: string;
+  conflicts: GitChange[];
+  resolvingKey: string | null;
+  error: string | null;
+  onOpenDoc: () => void;
+  onResolve: (doc: GitChange, strategy: "mine" | "theirs") => void;
+}) {
+  return (
+    <div {...stylex.props(styles.commitForm)}>
+      <p {...stylex.props(popup.groupLabel)}>Resolve conflicts</p>
+      <p {...stylex.props(styles.conflictHint)}>
+        Pick a side for each file. Commit stays blocked until every conflict is
+        resolved.
+      </p>
+      {error ? <p {...stylex.props(styles.conflictError)}>{error}</p> : null}
+      <ul {...stylex.props(styles.commitFiles, styles.conflictList)}>
+        {conflicts.map((doc) => {
+          const key = changeKey(doc);
+          const href = workspaceSlug
+            ? contentDocPath(
+                workspaceSlug,
+                doc.type,
+                doc.slug,
+                doc.locale,
+                defaultLocale,
+              )
+            : null;
+          return (
+            <li key={key} {...stylex.props(styles.conflictRow)}>
+              {href ? (
+                <Link
+                  to={href}
+                  onClick={onOpenDoc}
+                  {...stylex.props(styles.conflictLink)}
+                >
+                  <span {...stylex.props(styles.changeName)}>
+                    {doc.type}/{doc.slug}
+                  </span>
+                  <span {...stylex.props(popup.itemMeta)}>{doc.locale}</span>
+                </Link>
+              ) : (
+                <span {...stylex.props(styles.changeName)}>
+                  {doc.type}/{doc.slug}
+                </span>
+              )}
+              <div {...stylex.props(styles.conflictActions)}>
+                <button
+                  type="button"
+                  disabled={resolvingKey !== null}
+                  onClick={() => onResolve(doc, "mine")}
+                  {...stylex.props(styles.conflictBtn)}
+                >
+                  {resolvingKey === `${key}:mine` ? "Keeping…" : "Keep mine"}
+                </button>
+                <button
+                  type="button"
+                  disabled={resolvingKey !== null}
+                  onClick={() => onResolve(doc, "theirs")}
+                  {...stylex.props(styles.conflictBtn, styles.conflictBtnDanger)}
+                >
+                  {resolvingKey === `${key}:theirs` ? "Taking…" : "Take theirs"}
+                </button>
+              </div>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+function ChangeRow({ doc }: { doc: GitChange }) {
+  return (
+    <div {...stylex.props(styles.changeItem)}>
+      <span {...stylex.props(styles.changeName)}>
+        {doc.type}/{doc.slug}
+      </span>
+      <span
+        {...stylex.props(
+          popup.itemMeta,
+          doc.status === "conflict" && styles.conflictText,
+        )}
+      >
+        {STATUS_LABEL[doc.status]}
+      </span>
+    </div>
+  );
+}
+
+export function WorkspaceStatusBar({ workspaceId }: { workspaceId: string }) {
+  const location = useLocation();
+  const editor = useEditorStatus();
+  const workspaceNav = useWorkspaceNav();
+  const publish = canPublish(workspaceNav?.role ?? "");
+  const { applyCheckout, syncCheckout } = useReplicaSession();
+  const replica = useReplicaState();
+  const refreshError = replica.refreshError;
+  const git = replica.git(workspaceId);
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newName, setNewName] = useState("");
+  const [syncing, setSyncing] = useState(false);
+  const [pulling, setPulling] = useState(false);
+  const [commitOpen, setCommitOpen] = useState(false);
+  const [committing, setCommitting] = useState(false);
+  const [resolvingKey, setResolvingKey] = useState<string | null>(null);
+  const [message, setMessage] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  // HEAD identity from the last poll so we can announce "HEAD moved".
+  const lastHead = useRef<string | null | undefined>(undefined);
+
+  async function reloadGit() {
+    try {
+      const next = await fetchGit(workspaceId);
+      replicaStore.setGit(workspaceId, next);
+      if (next.githubError === "installation_missing") {
+        setError("GitHub installation was removed. Reconnect in settings.");
+      } else if (next.githubError) {
+        setError("Couldn't load branches from GitHub");
+      } else {
+        setError(null);
+      }
+      const headKey = next.head ? `${next.head.sha}:${next.head.updatedAt}` : null;
+      if (lastHead.current !== undefined && lastHead.current !== headKey) {
+        notifyHeadChanged();
+      }
+      lastHead.current = headKey;
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Git status failed");
+    }
+  }
+
+  useEffect(() => {
+    lastHead.current = undefined;
+    void reloadGit();
+    const onChange = () => {
+      void reloadGit();
+    };
+    window.addEventListener("backmatter:tree-changed", onChange);
+    window.addEventListener("backmatter:workspace-changed", onChange);
+    const timer = window.setInterval(() => {
+      void reloadGit();
+    }, POLL_MS);
+    return () => {
+      window.removeEventListener("backmatter:tree-changed", onChange);
+      window.removeEventListener("backmatter:workspace-changed", onChange);
+      window.clearInterval(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspaceId]);
+
+  const branchNames = useMemo(() => (git?.branches ?? []).map((b) => b.name), [git]);
+  const changes = git?.changes ?? [];
+  const changeCount = changes.length;
+  const conflictCount = countConflicts(git);
+  const action = statusBarAction(conflictCount, publish);
+  const conflicts = useMemo(
+    () => changes.filter((doc) => doc.status === "conflict"),
+    [changes],
+  );
+  const inEditor = /\/content\/[^/]+\/[^/]+\/?$/.test(location.pathname);
+
+  async function onCheckout(branch: string) {
+    if (!branch || branch === git?.currentBranch) {
+      setOpen(false);
+      return;
+    }
+    setSyncing(true);
+    setError(null);
+    try {
+      await applyCheckout(workspaceId, branch);
+      await reloadGit();
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Checkout failed");
+    } finally {
+      setSyncing(false);
+    }
+  }
+
+  async function onCreate(e: React.FormEvent) {
+    e.preventDefault();
+    const name = newName.trim();
+    if (!name) return;
+    setSyncing(true);
+    setError(null);
+    try {
+      await createGitBranch(workspaceId, { name });
+      notifyWorkspaceChanged();
+      await syncCheckout(workspaceId, name);
+      await reloadGit();
+      setCreating(false);
+      setNewName("");
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Create branch failed");
+    } finally {
+      setSyncing(false);
+    }
+  }
+
+  async function onPull() {
+    setPulling(true);
+    setError(null);
+    try {
+      await pullFromGithub(workspaceId);
+      notifyHeadChanged();
+      await reloadGit();
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Pull failed");
+    } finally {
+      setPulling(false);
+    }
+  }
+
+  async function onResolveConflict(
+    doc: GitChange,
+    strategy: "mine" | "theirs",
+  ) {
+    const key = `${changeKey(doc)}:${strategy}`;
+    setResolvingKey(key);
+    setError(null);
+    try {
+      await resolveDoc(workspaceId, doc.locale, doc.type, doc.slug, strategy);
+      notifyTreeChanged({
+        workspaceId,
+        locale: doc.locale,
+        type: doc.type,
+        slug: doc.slug,
+        status: strategy === "theirs" ? "clean" : "modified",
+      });
+      const stillConflicted = changes.some(
+        (other) =>
+          other.status === "conflict" && changeKey(other) !== changeKey(doc),
+      );
+      if (!stillConflicted) setCommitOpen(false);
+      await reloadGit();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Resolve failed");
+    } finally {
+      setResolvingKey(null);
+    }
+  }
+
+  async function onCommit(e?: React.FormEvent) {
+    e?.preventDefault();
+    if (committing || conflictCount > 0 || changeCount === 0) return;
+    setCommitting(true);
+    setError(null);
+    try {
+      const result = await commitWorkspace(workspaceId, message);
+      setMessage("");
+      setCommitOpen(false);
+      publishCommittedFiles(workspaceId, result.files);
+      await reloadGit();
+    } catch (err) {
+      setError(formatCommitError(err));
+      await reloadGit();
+    } finally {
+      setCommitting(false);
+    }
+  }
+
+  const commitLabel = committing
+    ? "Committing…"
+    : conflictCount > 0
+      ? `Resolve ${conflictCount} ${conflictCount === 1 ? "conflict" : "conflicts"}`
+      : `Deploy ${changeCount} changes`;
+
+  return (
+    <StatusBar>
+      <div {...stylex.props(styles.identity)}>
+        {workspaceNav ? (
+          <WorkspaceSwitcher
+            workspaceId={workspaceNav.workspaceId}
+            workspaceName={workspaceNav.workspaceName}
+          />
+        ) : (
+          <StatusItem>—</StatusItem>
+        )}
+        <span {...stylex.props(styles.divider)} aria-hidden />
+        <Combobox.Root
+          items={branchNames}
+          value={git?.currentBranch ?? null}
+          onValueChange={(name) => {
+            if (typeof name === "string") void onCheckout(name);
+          }}
+          open={open}
+          onOpenChange={(next) => {
+            setOpen(next);
+            if (!next) setCreating(false);
+          }}
+        >
+          <Combobox.Trigger
+            aria-label={`Current branch ${git?.currentBranch ?? "none"}`}
+            disabled={syncing}
+            className={cx(styles.barBtn)}
+          >
+            <GitBranchIcon />
+            <span {...stylex.props(styles.branchName)}>
+              {syncing ? "Syncing…" : pulling ? "Pulling…" : git?.currentBranch ?? "—"}
+            </span>
+          </Combobox.Trigger>
+          <Combobox.Portal>
+            <Combobox.Positioner
+              side="bottom"
+              align="start"
+              sideOffset={6}
+              className={cx(popup.positioner)}
+            >
+              <Combobox.Popup
+                aria-label="Branches"
+                className={(state) => popupClassName(state, styles.menu)}
+              >
+                <Combobox.Input
+                  placeholder="Filter branches"
+                  aria-label="Filter branches"
+                  autoComplete="off"
+                  spellCheck={false}
+                  data-no-ring
+                  data-1p-ignore
+                  data-lpignore
+                  className={cx(popup.searchInput)}
+                />
+                <Combobox.Empty className={cx(popup.empty)}>No branches</Combobox.Empty>
+                <Combobox.List className={cx(styles.list)}>
+                  {(name: string) => (
+                    <Combobox.Item
+                      key={name}
+                      value={name}
+                      className={(state) =>
+                        cx(
+                          popup.item,
+                          styles.option,
+                          state.highlighted && popup.itemHighlighted,
+                          state.selected && popup.itemSelected,
+                        )
+                      }
+                    >
+                      <span {...stylex.props(popup.itemIndicator)}>
+                        <Combobox.ItemIndicator>
+                          <CheckIcon size={12} />
+                        </Combobox.ItemIndicator>
+                      </span>
+                      <span {...stylex.props(styles.optionName)}>{name}</span>
+                      {name === git?.defaultBranch ? (
+                        <span {...stylex.props(popup.itemMeta)}>default</span>
+                      ) : null}
+                    </Combobox.Item>
+                  )}
+                </Combobox.List>
+                {changes.length > 0 ? (
+                  <>
+                    <div {...stylex.props(popup.separator)} />
+                    <div {...stylex.props(styles.changes)}>
+                      <p {...stylex.props(popup.groupLabel)}>Uncommitted</p>
+                      {changes.map((doc) => (
+                        <ChangeRow key={`${doc.locale}/${doc.type}/${doc.slug}`} doc={doc} />
+                      ))}
+                    </div>
+                  </>
+                ) : null}
+                <div {...stylex.props(popup.separator)} />
+                <button
+                  type="button"
+                  disabled={pulling || syncing}
+                  onClick={() => void onPull()}
+                  className={cx(popup.item, popup.action)}
+                >
+                  {pulling ? "Pulling from GitHub…" : "Pull from GitHub"}
+                </button>
+                {creating ? (
+                  <form onSubmit={(e) => void onCreate(e)} {...stylex.props(styles.create)}>
+                    <input
+                      value={newName}
+                      onChange={(e) => setNewName(e.target.value)}
+                      // Keep list navigation from swallowing keys typed here.
+                      onKeyDown={(e) => {
+                        if (e.key !== "Escape") e.stopPropagation();
+                      }}
+                      placeholder="feat/…"
+                      aria-label="New branch name"
+                      autoComplete="off"
+                      spellCheck={false}
+                      data-no-ring
+                      data-1p-ignore
+                      data-lpignore
+                      autoFocus
+                      {...stylex.props(popup.quietInput, styles.createInput)}
+                    />
+                    <button type="submit" className={cx(popup.item, popup.action)}>
+                      Create
+                    </button>
+                  </form>
+                ) : (
+                  <button
+                    type="button"
+                    onClick={() => setCreating(true)}
+                    className={cx(popup.item, popup.action)}
+                  >
+                    Create branch from current…
+                  </button>
+                )}
+              </Combobox.Popup>
+            </Combobox.Positioner>
+          </Combobox.Portal>
+        </Combobox.Root>
+        {workspaceNav?.workspaceId ? (
+          <>
+            <span {...stylex.props(styles.divider)} aria-hidden />
+            <ContentApiPopover
+              workspaceId={workspaceNav.workspaceId}
+              branch={git?.currentBranch}
+              defaultBranch={git?.defaultBranch}
+              pathname={location.pathname}
+              search={location.search}
+            />
+            {replica.sessionUserId ? (
+              <OpenSiteButton
+                workspaceId={workspaceNav.workspaceId}
+                userId={replica.sessionUserId}
+                siteUrls={workspaceNav.siteUrls}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </div>
+      {changeCount > 0 ? (
+        <StatusItem tone={conflictCount > 0 ? "danger" : "muted"}>
+          {changeCount} uncommitted
+        </StatusItem>
+      ) : null}
+      {error ? <StatusItem tone="danger">{error}</StatusItem> : null}
+      {refreshError && !error ? (
+        <StatusItem tone="danger">{refreshError}</StatusItem>
+      ) : null}
+      <StatusSpacer />
+      {inEditor && editor.saveLabel ? (
+        <StatusItem tone={editor.saveTone}>{editor.saveLabel}</StatusItem>
+      ) : null}
+      {changeCount > 0 ? (
+        <Popover.Root
+          open={commitOpen}
+          onOpenChange={(next) => {
+            if (action === "blocked") return;
+            setCommitOpen(next);
+          }}
+        >
+          <Popover.Trigger
+            disabled={commitTriggerDisabled(action, { committing, syncing })}
+            aria-label={
+              action === "blocked"
+                ? "Writers cannot publish"
+                : action === "resolve"
+                  ? commitLabel
+                  : `Commit ${changeCount} ${changeCount === 1 ? "file" : "files"}`
+            }
+            title={action === "blocked" ? "Writers cannot publish" : undefined}
+            className={cx(styles.commit, action === "resolve" && styles.commitBlocked)}
+          >
+            {commitLabel}
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Positioner
+              side="bottom"
+              align="end"
+              sideOffset={6}
+              className={cx(popup.positioner)}
+            >
+              <Popover.Popup
+                aria-label={action === "resolve" ? "Resolve conflicts" : "Commit changes"}
+                className={(state) => popupClassName(state, styles.commitPopup)}
+              >
+                {action === "resolve" ? (
+                  <ConflictResolvePanel
+                    workspaceSlug={workspaceNav?.workspaceSlug ?? null}
+                    defaultLocale={workspaceNav?.defaultLocale ?? "en"}
+                    conflicts={conflicts}
+                    resolvingKey={resolvingKey}
+                    error={error}
+                    onOpenDoc={() => setCommitOpen(false)}
+                    onResolve={(doc, strategy) => void onResolveConflict(doc, strategy)}
+                  />
+                ) : (
+                <form onSubmit={(e) => void onCommit(e)} {...stylex.props(styles.commitForm)}>
+                  <p {...stylex.props(popup.groupLabel)}>
+                    {changeCount} {changeCount === 1 ? "file" : "files"} → {git?.currentBranch}
+                  </p>
+                  <ul {...stylex.props(styles.commitFiles)}>
+                    {changes.map((doc) => (
+                      <li key={`${doc.locale}/${doc.type}/${doc.slug}`}>
+                        <ChangeRow doc={doc} />
+                      </li>
+                    ))}
+                  </ul>
+                  <div {...stylex.props(popup.separator)} />
+                  <div {...stylex.props(styles.commitFooter)}>
+                    <input
+                      value={message}
+                      onChange={(e) => setMessage(e.target.value)}
+                      placeholder={defaultCommitMessage(changes)}
+                      aria-label="Commit message"
+                      autoComplete="off"
+                      spellCheck={false}
+                      data-no-ring
+                      data-1p-ignore
+                      data-lpignore
+                      autoFocus
+                      disabled={committing}
+                      {...stylex.props(styles.commitField)}
+                    />
+                    <div {...stylex.props(styles.commitSubmit)}>
+                      {/* <span {...stylex.props(styles.commitHint)}>
+                        Empty message uses the default
+                      </span> */}
+                      <button
+                        type="submit"
+                        disabled={committing}
+                        {...stylex.props(styles.commitSubmitBtn)}
+                      >
+                        {committing ? "Committing…" : "Commit & push"}
+                      </button>
+                    </div>
+                  </div>
+                </form>
+                )}
+              </Popover.Popup>
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>
+      ) : null}
+    </StatusBar>
+  );
+}
+
+const styles = stylex.create({
+  identity: {
+    display: "flex",
+    minWidth: 0,
+    alignItems: "center",
+    gap: space.xs,
+  },
+  divider: {
+    width: 1,
+    height: "12px",
+    flexShrink: 0,
+    backgroundColor: colors.border,
+  },
+  barBtn: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: space.xs,
+    minHeight: "24px",
+    paddingInline: space.xs,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    color: colors.textMuted,
+    fontSize: type.xs,
+    fontFamily: type.mono,
+    cursor: "pointer",
+    ":focus-visible": {
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: "-2px",
+    },
+    [hover]: {
+      ":hover": {
+        color: colors.text,
+      },
+    },
+  },
+  branchName: {
+    maxWidth: "180px",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  menu: {
+    width: "280px",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+  },
+  list: {
+    maxHeight: "220px",
+    overflowY: "auto",
+    paddingBottom: space.xs,
+  },
+  option: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    cursor: "pointer",
+  },
+  optionName: {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  changes: {
+    maxHeight: "160px",
+    overflowY: "auto",
+    paddingBottom: space.xs,
+  },
+  changeItem: {
+    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,
+  },
+  changeName: {
+    minWidth: 0,
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  conflictText: {
+    color: colors.danger,
+  },
+  conflictHint: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBottom: space.sm,
+    fontSize: type.xs,
+    lineHeight: 1.4,
+    color: colors.textMuted,
+  },
+  conflictError: {
+    margin: 0,
+    paddingInline: space.lg,
+    paddingBottom: space.sm,
+    fontSize: type.xs,
+    color: colors.danger,
+  },
+  conflictList: {
+    maxHeight: "280px",
+  },
+  conflictRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+  },
+  conflictLink: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+    minWidth: 0,
+    color: colors.text,
+    fontFamily: type.mono,
+    fontSize: type.xs,
+    textDecoration: "none",
+    [hover]: {
+      ":hover": {
+        textDecoration: "underline",
+      },
+    },
+  },
+  conflictActions: {
+    display: "flex",
+    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,
+  },
+  create: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  createInput: {
+    fontFamily: type.mono,
+    fontSize: type.xs,
+  },
+  commit: {
+    display: "inline-flex",
+    alignItems: "center",
+    height: 24,
+    paddingInline: space.md,
+    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",
+      },
+    },
+  },
+  commitBlocked: {
+    borderColor: colors.danger,
+    backgroundColor: colors.danger,
+    ":disabled": {
+      opacity: 0.8,
+    },
+  },
+  commitPopup: {
+    width: "320px",
+    paddingBlock: 0,
+    overflow: "hidden",
+  },
+  commitForm: {
+    display: "flex",
+    flexDirection: "column",
+    paddingTop: space.xs,
+  },
+  commitFiles: {
+    margin: 0,
+    padding: 0,
+    listStyle: "none",
+    maxHeight: "160px",
+    overflowY: "auto",
+    paddingBottom: space.xs,
+  },
+  commitFooter: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch",
+    gap: space.md,
+    paddingInline: space.lg,
+    paddingTop: space.md,
+    paddingBottom: space.lg,
+  },
+  commitField: {
+    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,
+    },
+  },
+  commitHint: {
+    minWidth: 0,
+    fontSize: type.xs,
+    color: colors.textMuted,
+  },
+  commitSubmit: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: space.md,
+  },
+  commitSubmitBtn: {
+    display: "flex",
+    width: "100%",
+    flexShrink: 0,
+    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",
+      },
+    },
+  },
+});