canopycms 0.5.0 → 0.7.0

package/dist/editor/components/BranchesLoadFailedNotice.d.ts

@@ -0,0 +1,13 @@
+export interface BranchesLoadFailedNoticeProps {
+    /** Loads the branch list again. Without it the notice is text alone. */
+    onRetry?: () => void;
+    /** A retry is in flight. */
+    retrying?: boolean;
+    align?: 'flex-start' | 'center';
+    'data-testid'?: string;
+}
+/**
+ * The error state of an editor no branch is pinned in, while the branch list it takes its
+ * branch from has failed to load. It outlasts the dismissible toast for the same failure.
+ */
+export declare function BranchesLoadFailedNotice({ onRetry, retrying, align, 'data-testid': testId, }: BranchesLoadFailedNoticeProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/BranchesLoadFailedNotice.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Text } from '@mantine/core';
+/**
+ * The error state of an editor no branch is pinned in, while the branch list it takes its
+ * branch from has failed to load. It outlasts the dismissible toast for the same failure.
+ */
+export function BranchesLoadFailedNotice({ onRetry, retrying = false, align = 'flex-start', 'data-testid': testId, }) {
+    return (_jsxs(Stack, { gap: 4, py: "sm", align: align, "data-testid": testId, children: [_jsx(Text, { size: "sm", c: "var(--canopy-danger-text)", children: "Couldn't load the branch list, so no branch can open." }), onRetry && (_jsx(Button, { size: "compact-sm", variant: "subtle", "aria-disabled": retrying || undefined, style: { cursor: retrying ? 'default' : undefined }, onClick: () => {
+                    if (!retrying)
+                        onRetry();
+                }, children: retrying ? 'Retrying…' : 'Retry' }))] }));
+}

package/dist/editor/components/EditorHeader.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'react';
-import type { BranchStatus } from '../../types.js';
+import type { BranchStatus, PullRequestState } from '../../types.js';
 import type { SaveAllProgress } from '../hooks/save-all.js';
 export interface EditorHeaderProps {
     branchName: string;
@@ -27,6 +27,10 @@ export interface EditorHeaderProps {
     onSubmit: (returnFocusTo?: () => HTMLElement | null) => void;
     /** Opens the withdraw dialog, which returns focus to `returnFocusTo()` when given. */
     onWithdraw: (returnFocusTo?: () => HTMLElement | null) => void;
+    /** Opens the approve dialog, which returns focus to `returnFocusTo()` when given. */
+    onApprove?: (returnFocusTo?: () => HTMLElement | null) => void;
+    /** Opens the request-changes dialog, which returns focus to `returnFocusTo()` when given. */
+    onRequestChanges?: (returnFocusTo?: () => HTMLElement | null) => void;
     /** Writing drafts to localStorage failed, so they live only in this tab. */
     draftStorageFailed?: boolean;
     /** Current branch status (undefined if unknown). */
@@ -37,6 +41,8 @@ export interface EditorHeaderProps {
         groups?: string[];
     };
     branchCreatedBy?: string;
+    /** The PR's state as last observed; a closed one blocks Approve and Request changes. */
+    branchPullRequestState?: PullRequestState;
     branchAccess?: {
         allowedUsers?: string[];
         allowedGroups?: string[];
@@ -63,7 +69,7 @@ export interface EditorHeaderProps {
 }
 /**
  * The branch bar: the pill, the branch's status and its unsaved count, then the draft-storage
- * warning, Save all, the way forward and Submit or Withdraw. The open entry's own controls are in
- * `EntryHeader`.
+ * warning, Save all, the way forward and Submit or Withdraw, or to a reviewer of someone else's
+ * submission Approve and Request changes. The open entry's own controls are in `EntryHeader`.
  */
-export declare function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch, onSaveAll, saveAllProgress, singleSaving, entryListFailed, onSubmit, onWithdraw, draftStorageFailed, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, branchServerProtected, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch, onSaveAll, saveAllProgress, singleSaving, entryListFailed, onSubmit, onWithdraw, onApprove, onRequestChanges, draftStorageFailed, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected, branchServerProtected, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, }: EditorHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EditorHeader.js

@@ -6,6 +6,7 @@ import { IconChevronDown, IconLock } from '@tabler/icons-react';
 import { isAdmin, isLockedOutOfBranch, isReviewer } from '../../authorization/helpers.js';
 import { branchBarStatus, describeBranchLock } from '../branch-lock.js';
 import { EDITOR_ACTIONS } from '../copy.js';
+import { reviewRoleOf } from '../../authorization/review-role.js';
 import { SYSTEM_USER_ID } from '../../system-users.js';
 import { TopBar } from '../shell/TopBar.js';
 import { BranchPill } from './BranchPill.js';
@@ -15,18 +16,18 @@ import { DraftStorageWarning, HIDDEN_STYLE, SaveAllButton } from './SaveAllButto
 import { useFocusHandOff, useMenuItemFocusReturn } from '../utils/focus-return.js';
 /**
  * The branch bar: the pill, the branch's status and its unsaved count, then the draft-storage
- * warning, Save all, the way forward and Submit or Withdraw. The open entry's own controls are in
- * `EntryHeader`.
+ * warning, Save all, the way forward and Submit or Withdraw, or to a reviewer of someone else's
+ * submission Approve and Request changes. The open entry's own controls are in `EntryHeader`.
  */
-export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
-    const lock = { branchStatus, branchReadOnly, branchWriteBlocked, branchPending, branchMissing };
-    const branchLockReason = describeBranchLock(lock);
-    const status = branchBarStatus({ ...lock, isProtected: branchServerProtected });
-    const theme = useMantineTheme();
-    // Mantine's own below-`md` query, the one `visibleFrom="md"` hides under.
-    const belowMd = `(max-width: ${em(getBreakpointValue('md', theme.breakpoints) - 0.1)})`;
-    const narrow = useMediaQuery(belowMd, false, { getInitialValueInEffect: false }) === true;
-    const editable = !!branchName && !branchLoading && !branchLockReason;
+export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, branchToggleRef, onBranchReloadData, onBranchDiscardDrafts, onBranchManagerOpen, onNewBranch = onBranchManagerOpen, onSaveAll, saveAllProgress, singleSaving = false, entryListFailed = false, onSubmit, onWithdraw, onApprove = noopAction, onRequestChanges = noopAction, draftStorageFailed = false, branchStatus, userContext, branchCreatedBy, branchPullRequestState, branchAccess, branchIsProtected = false, branchServerProtected, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
+    const reviewRole = reviewRoleOf({
+        status: branchStatus,
+        createdBy: branchCreatedBy,
+        users: branchAccess?.allowedUsers,
+        groups: branchAccess?.allowedGroups,
+        isProtected: branchIsProtected,
+        pullRequestState: branchPullRequestState,
+    }, userContext);
     const workflow = workflowAction({
         branchName,
         busy,
@@ -35,13 +36,31 @@ export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, b
         branchCreatedBy,
         branchAccess,
         branchIsProtected,
+        reviewRole,
         savingAll: !!saveAllProgress,
     });
+    const lock = {
+        branchStatus,
+        branchReadOnly,
+        branchWriteBlocked,
+        branchPending,
+        branchMissing,
+        reviewing: workflow?.kind === 'review',
+        pullRequestClosed: reviewRole === 'reviewing-closed',
+    };
+    const branchLockReason = describeBranchLock(lock);
+    const status = branchBarStatus({ ...lock, isProtected: branchServerProtected });
+    const theme = useMantineTheme();
+    // Mantine's own below-`md` query, the one `visibleFrom="md"` hides under.
+    const belowMd = `(max-width: ${em(getBreakpointValue('md', theme.breakpoints) - 0.1)})`;
+    const narrow = useMediaQuery(belowMd, false, { getInitialValueInEffect: false }) === true;
+    const editable = !!branchName && !branchLoading && !branchLockReason;
     // Below `md` one split button holds the bar's actions: Save all on an editable branch, else the
     // row's way forward, with the workflow action in its caret. Withdraw leads only for a user who
     // may withdraw; anyone else gets Switch branch…, the blocked Withdraw and its reason in the
-    // caret. A protected branch keeps New branch… either way. Wide, a Withdraw the user can't take
-    // shows blocked, with no Switch branch… beside it: that stays in the pill's menu.
+    // caret. A reviewer's Approve leads the same way, with Request changes in its own caret. A
+    // protected branch keeps New branch… either way. Wide, a Withdraw the user can't take shows
+    // blocked, with no Switch branch… beside it: that stays in the pill's menu.
     const split = narrow && editable;
     const workflowLeads = status.action === 'workflow' && !!workflow?.permitted;
     const barAction = status.action === 'workflow'
@@ -50,16 +69,19 @@ export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, b
             : undefined
         : status.action;
     // Controls come and go as a submit or withdraw changes the lock, and focus follows them.
-    const [[wayRef, saveAllRef, workflowRef], focusTarget] = useFocusHandOff(3);
+    const [[wayRef, saveAllRef, workflowRef, secondaryRef], focusTarget] = useFocusHandOff(4);
     const workflowControl = {
         onSubmit,
         onWithdraw,
+        onApprove,
+        onRequestChanges,
         controlRef: workflowRef,
+        secondaryRef,
         // A withdraw that leaves no workflow action returns focus to the way forward, else Save all.
         returnFocusTo: () => focusTarget(2),
     };
     const caretOnWay = narrow && !!barAction && !!workflow;
-    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, !!workflow?.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
+    return (_jsx(TopBar, { leading: _jsxs(Group, { gap: "xs", wrap: "wrap", align: "center", style: { rowGap: 4 }, children: [_jsx(BranchPill, { branchName: branchName, loading: busy, unsavedCount: modifiedCount, onSwitchBranch: onBranchManagerOpen, onRefreshBranch: onBranchReloadData, onDiscardAll: onBranchDiscardDrafts, pillRef: branchToggleRef }), _jsx(BranchStatusLabel, { status: branchName ? status : { value: 'none', readOnly: false }, reason: branchLockReason }), modifiedCount > 0 && (_jsx(Tooltip, { label: unsavedTooltip(branchName ? status : undefined, modifiedCount, workflow?.kind === 'withdraw' && workflow.permitted), events: TOOLTIP_EVENTS, multiline: true, maw: 320, children: _jsx(Button, { variant: "subtle", color: "gray", size: "compact-sm", style: { flexShrink: 0 }, leftSection: _jsx(UnsavedMark, { "aria-hidden": "true" }), onClick: onShowUnsaved, "data-testid": "branch-unsaved-count", children: `${modifiedCount} unsaved` }) }))] }), trailing: _jsxs(_Fragment, { children: [_jsx(DraftStorageWarning, { shown: draftStorageFailed && modifiedCount > 0 }), (!narrow || editable) && (_jsx(SaveAllButton
                 // Its reserved width follows this branch's counts, not the session's largest.
                 , { onSaveAll: onSaveAll, unsavedCount: modifiedCount, blockedReason: branchLockReason ??
                         (!branchName
@@ -70,8 +92,11 @@ export function EditorHeader({ branchName, busy, modifiedCount, onShowUnsaved, b
                         ? onNewBranch
                         : barAction === 'refreshBranch'
                             ? onBranchReloadData
-                            : onBranchManagerOpen, caret: caretOnWay && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined })), !split && !caretOnWay && workflow && (_jsx(WorkflowButton, { ...workflowControl, action: workflow }))] }) }));
+                            : onBranchManagerOpen, caret: caretOnWay && workflow ? (_jsx(WorkflowCaret, { ...workflowControl, action: workflow })) : undefined })), !split && !caretOnWay && workflow && (_jsx(WorkflowButton, { ...workflowControl, action: workflow, narrow: narrow }))] }) }));
 }
+const noopAction = () => { };
+/** Why a workflow control waits when the bar is busy and nothing else holds it. */
+const BUSY_REASON = 'Wait for the current save or load to finish.';
 const TOOLTIP_EVENTS = { hover: true, focus: true, touch: false };
 /**
  * On a locked branch, what would let its drafts be saved. A new branch starts without them, so a
@@ -111,13 +136,16 @@ function BranchWayButton({ action, onClick, caret, buttonRef, }) {
     // Grouped even alone, as Save all is, so a caret coming or going never remounts the button.
     _jsxs(Button.Group, { style: { flexShrink: 0 }, renderRoot: (props) => (_jsx("div", { ...props, role: caret ? 'group' : undefined, "aria-label": caret ? 'Branch controls' : undefined })), children: [_jsx(Button, { ref: buttonRef, variant: "light", size: "sm", onClick: () => onClick(), "data-testid": `${action.replace('Branch', '')}-branch-button`, children: WAY_LABEL[action] }), caret] }));
 }
-/** Submit for review, or Withdraw from review once submitted or approved; null when neither shows. */
-function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, savingAll, }) {
+/**
+ * Submit for review, or Withdraw from review once submitted or approved, or Approve and Request
+ * changes to a reviewer of someone else's submission; null when none shows.
+ */
+function workflowAction({ branchName, busy, branchStatus, userContext, branchCreatedBy, branchAccess, branchIsProtected, reviewRole, savingAll, }) {
     const isSubmitted = branchStatus === 'submitted';
     const isEditing = branchStatus === 'editing';
-    // 'approved' withdraws too -- it is that status's only
-    // non-destructive exit now that the submit status gate refuses a
-    // non-editing branch (api/branch-status.ts, api/branch-withdraw.ts).
+    // 'approved' withdraws too -- it is the author's way back from
+    // either status, since the editor offers an author no Request changes
+    // and the submit gate refuses a non-editing branch (api/branch-withdraw.ts).
     // This button is a two-state toggle, so every withdrawable status
     // has to drive the withdraw side of it, not just 'submitted'.
     const isWithdrawable = isSubmitted || branchStatus === 'approved';
@@ -127,6 +155,15 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
     // wrongly stuck in 'submitted'.
     if (branchIsProtected && !isWithdrawable)
         return null;
+    if (reviewRole === 'reviewing') {
+        return {
+            kind: 'review',
+            offersApprove: isSubmitted,
+            blocked: !branchName || busy || savingAll,
+            permitted: true,
+            reason: savingAll ? 'Wait for Save all to finish.' : busy ? BUSY_REASON : '',
+        };
+    }
     // Who may submit/withdraw: creator, ACL access, the system branch, or an
     // admin/reviewer (alone on a locked-down branch, and even without ACL access
     // on a protected base branch stuck in 'submitted'). Mirrors the server's
@@ -167,7 +204,42 @@ function workflowAction({ branchName, busy, branchStatus, userContext, branchCre
                             : '',
     };
 }
-function WorkflowButton({ action, onSubmit, onWithdraw, controlRef, returnFocusTo, }) {
+function WorkflowButton({ narrow, ...props }) {
+    return props.action.kind === 'review' ? (_jsx(ReviewButtons, { ...props, narrow: narrow })) : (_jsx(SubmitOrWithdrawButton, { ...props }));
+}
+/**
+ * Approve (leading) and Request changes. Below `md`, Approve is a split button whose caret holds
+ * Request changes; with nothing to approve, Request changes stands alone.
+ */
+function ReviewButtons({ action, onApprove, onRequestChanges, controlRef, secondaryRef, returnFocusTo, narrow, ...rest }) {
+    // The bar's hand-off slot goes to Approve while there is one, in either layout, so focus on it
+    // moves on when it goes; then Request changes, the one control left, takes the slot. Beside
+    // Approve, Request changes (or the caret that holds it) has a slot of its own, so focus on it
+    // moves on when the branch leaves review.
+    const approveEl = useRef(null);
+    const requestChangesEl = useRef(null);
+    const approveRef = useMergedRef(approveEl, action.offersApprove ? controlRef : undefined);
+    const requestChangesRef = useMergedRef(requestChangesEl, action.offersApprove ? (narrow ? undefined : secondaryRef) : controlRef);
+    // Each returns focus to its own button while that is mounted, else to the control left.
+    const approveReturn = () => (approveEl.current?.isConnected ? approveEl.current : returnFocusTo());
+    const requestChangesReturn = () => requestChangesEl.current?.isConnected ? requestChangesEl.current : returnFocusTo();
+    const approve = (_jsx(ReviewButton, { buttonRef: approveRef, action: action, color: "brand", testId: "approve-button", label: EDITOR_ACTIONS.approve, onClick: () => onApprove(approveReturn) }));
+    const requestChanges = (_jsx(ReviewButton, { buttonRef: requestChangesRef, action: action, color: "orange", testId: "request-changes-button", label: EDITOR_ACTIONS.requestChanges, onClick: () => onRequestChanges(requestChangesReturn) }));
+    if (!action.offersApprove)
+        return requestChanges;
+    if (!narrow) {
+        return (_jsxs(Group, { gap: 8, wrap: "nowrap", style: { flexShrink: 0 }, children: [requestChanges, approve] }));
+    }
+    return (_jsxs(Button.Group, { style: { flexShrink: 0 }, renderRoot: (props) => _jsx("div", { ...props, role: "group", "aria-label": "Review controls" }), children: [approve, _jsx(WorkflowCaret, { ...rest, action: action, onApprove: onApprove, onRequestChanges: onRequestChanges, returnFocusTo: returnFocusTo, includeApprove: false, color: "brand", controlRef: secondaryRef })] }));
+}
+/** One review button, blocked as a whole with the action's reason. */
+function ReviewButton({ action, buttonRef, color, testId, label, onClick, }) {
+    return (_jsx(Tooltip, { label: action.reason, disabled: !action.reason, multiline: true, maw: 320, children: _jsx(Button, { ref: buttonRef, size: "sm", variant: "light", color: color, style: { flexShrink: 0 }, onClick: () => {
+                if (!action.blocked)
+                    onClick();
+            }, "data-disabled": action.blocked ? true : undefined, "aria-disabled": action.blocked ? true : undefined, "data-testid": testId, children: label }) }));
+}
+function SubmitOrWithdrawButton({ action, onSubmit, onWithdraw, controlRef, returnFocusTo, }) {
     const withdraw = action.kind === 'withdraw';
     return (_jsx(Tooltip, { label: action.reason, disabled: !action.reason, multiline: true, maw: 320, children: _jsx(Button, { ref: controlRef, size: "sm", 
             // The entry's Save is the one filled primary; the rest take their colour's light variant.
@@ -180,20 +252,28 @@ function WorkflowButton({ action, onSubmit, onWithdraw, controlRef, returnFocusT
                     onSubmit(returnFocusTo);
             }, "data-disabled": action.blocked ? true : undefined, "aria-disabled": action.blocked ? true : undefined, "data-testid": withdraw ? 'withdraw-button' : 'submit-button', children: withdraw ? EDITOR_ACTIONS.withdrawFromReview : EDITOR_ACTIONS.submitForReview }) }));
 }
-/** Save all's caret below `md`, holding the workflow action. */
-function WorkflowCaret({ action, onSubmit, onWithdraw, controlRef, returnFocusTo, }) {
+/**
+ * The workflow action's caret below `md`, on Save all or the way forward or, for a review, beside
+ * Approve. `includeApprove` is false there, where Approve is already a button.
+ */
+function WorkflowCaret({ action, onSubmit, onWithdraw, onApprove, onRequestChanges, controlRef, returnFocusTo, includeApprove = true, color, }) {
     const caret = useRef(null);
     const caretRef = useMergedRef(caret, controlRef);
     const menuFocus = useMenuItemFocusReturn(caret);
     const withdraw = action.kind === 'withdraw';
+    // Beside Approve it holds only Request changes, and a dialog it opens returns to the caret.
+    const reviewCaret = action.kind === 'review' && !includeApprove;
+    const caretLabel = reviewCaret ? 'More review actions' : 'Branch actions';
+    const returnToCaret = reviewCaret
+        ? () => (caret.current?.isConnected ? caret.current : returnFocusTo())
+        : returnFocusTo;
+    const blockedReason = action.blocked ? action.reason || BUSY_REASON : undefined;
     return (
     // Bounded, so a blocked item's reason wraps on a phone rather than run off the screen.
-    _jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", width: 280, ...menuFocus.menu, children: [_jsx(Tooltip, { label: "Branch actions", events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsx(Button, { ref: caretRef, variant: "light", size: "sm", px: 8, "aria-label": "Branch actions", "data-testid": "branch-actions-button", style: { borderInlineStart: '1px solid var(--canopy-input-border)' }, children: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) }) }) }), _jsx(Menu.Dropdown, { ...menuFocus.dropdown, children: _jsx(ReasonedMenuItem, { "data-testid": withdraw ? 'withdraw-menu-item' : 'submit-menu-item', blockedReason: action.blocked
-                        ? action.reason || 'Wait for the current save or load to finish.'
-                        : undefined, onClick: () => {
+    _jsxs(Menu, { withinPortal: true, shadow: "sm", position: "bottom-end", width: 280, ...menuFocus.menu, children: [_jsx(Tooltip, { label: caretLabel, events: { hover: true, focus: true, touch: false }, children: _jsx(Menu.Target, { children: _jsx(Button, { ref: caretRef, variant: "light", color: color, size: "sm", px: 8, "aria-label": caretLabel, "data-testid": "branch-actions-button", style: { borderInlineStart: '1px solid var(--canopy-input-border)' }, children: _jsx(IconChevronDown, { size: 14, "aria-hidden": "true" }) }) }) }), _jsx(Menu.Dropdown, { ...menuFocus.dropdown, children: action.kind === 'review' ? (_jsxs(_Fragment, { children: [action.offersApprove && includeApprove && (_jsx(ReasonedMenuItem, { "data-testid": "approve-menu-item", blockedReason: blockedReason, onClick: () => onApprove(returnToCaret), children: EDITOR_ACTIONS.approve })), _jsx(ReasonedMenuItem, { "data-testid": "request-changes-menu-item", blockedReason: blockedReason, onClick: () => onRequestChanges(returnToCaret), children: EDITOR_ACTIONS.requestChanges })] })) : (_jsx(ReasonedMenuItem, { "data-testid": withdraw ? 'withdraw-menu-item' : 'submit-menu-item', blockedReason: blockedReason, onClick: () => {
                         if (withdraw)
                             onWithdraw(returnFocusTo);
                         else
                             onSubmit(returnFocusTo);
-                    }, children: withdraw ? EDITOR_ACTIONS.withdrawFromReview : EDITOR_ACTIONS.submitForReview }) })] }));
+                    }, children: withdraw ? EDITOR_ACTIONS.withdrawFromReview : EDITOR_ACTIONS.submitForReview })) })] }));
 }

package/dist/editor/components/EntryHeader.d.ts

@@ -55,6 +55,10 @@ export interface EntryHeaderProps {
     branchPending?: boolean;
     /** The branch list answered without this branch. */
     branchMissing?: boolean;
+    /** The user reviews this branch rather than owns it; the lock reason then names Approve. */
+    branchReviewing?: boolean;
+    /** The user would review this branch but its pull request was closed; the lock reason says so. */
+    branchPullRequestClosed?: boolean;
 }
 /** The open entry's breadcrumb, menu, unsaved dot and "Read-only" chip, then Save, over the panes. */
-export declare function EntryHeader({ currentEntry, entryLoading, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving, savedSignal, savedHere, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, }: EntryHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function EntryHeader({ currentEntry, entryLoading, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving, savedSignal, savedHere, hasUnsavedChanges, entryHasDraft, draftStorageFailed, entryReadOnly, entryUnavailable, branchStatus, branchReadOnly, branchWriteBlocked, branchLoading, branchPending, branchMissing, branchReviewing, branchPullRequestClosed, }: EntryHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/EntryHeader.js

@@ -6,13 +6,15 @@ import { describeBranchLock } from '../branch-lock.js';
 import { EntryBreadcrumb } from './EntryBreadcrumb.js';
 import { EntrySaveButton } from './EntrySaveButton.js';
 /** The open entry's breadcrumb, menu, unsaved dot and "Read-only" chip, then Save, over the panes. */
-export function EntryHeader({ currentEntry, entryLoading = false, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving = false, savedSignal, savedHere = false, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, }) {
+export function EntryHeader({ currentEntry, entryLoading = false, branchName, busy, breadcrumbSegments, onCollectionOpen, onEntryReveal, navigatorToggleRef, onFileReload, onFileDiscardDraft, onEntryRename, onEntryDelete, onSave, saveAllRunning, saving = false, savedSignal, savedHere = false, hasUnsavedChanges, entryHasDraft = hasUnsavedChanges, draftStorageFailed = false, entryReadOnly = false, entryUnavailable = false, branchStatus, branchReadOnly = false, branchWriteBlocked = false, branchLoading = false, branchPending = false, branchMissing = false, branchReviewing = false, branchPullRequestClosed = false, }) {
     const branchLockReason = describeBranchLock({
         branchStatus,
         branchReadOnly,
         branchWriteBlocked,
         branchPending,
         branchMissing,
+        reviewing: branchReviewing,
+        pullRequestClosed: branchPullRequestClosed,
     });
     const entryLockReason = entryReadOnly
         ? "You don't have edit access to this entry. Ask a CanopyCMS admin to grant it."

package/dist/editor/components/ReasonedMenuItem.d.ts

@@ -3,8 +3,16 @@ import { type MenuItemProps } from '@mantine/core';
 export interface ReasonedMenuItemProps extends MenuItemProps {
     /** Why the item can't act now. Set, the item is blocked and shows this beneath its label. */
     blockedReason?: string;
+    /** False when a neighbouring item already says why, so the reason is not printed twice. */
+    showReason?: boolean;
+    /** The reason's element id, which another blocked item that shows no reason can point to. */
+    reasonId?: string;
+    /** The id of the element that gives this item's reason, when it is not printed beneath it. */
+    reasonDescribedBy?: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     'data-testid'?: string;
+    /** The caller's own description, kept unless a shared reason points elsewhere. */
+    'aria-describedby'?: string;
     children: React.ReactNode;
 }
 /**

package/dist/editor/components/ReasonedMenuItem.js

@@ -6,10 +6,10 @@ import { Menu, Text } from '@mantine/core';
  * Menu drops a `disabled` or `data-disabled` item from its arrow-key order, hiding the reason from
  * a keyboard user; a blocked item is `aria-disabled` instead and ignores its click.
  */
-export const ReasonedMenuItem = ({ blockedReason, onClick, children, color, style, ...rest }) => (_jsxs(Menu.Item, { ...rest, color: blockedReason ? undefined : color, c: blockedReason ? 'dimmed' : rest.c, "aria-disabled": blockedReason ? true : undefined, closeMenuOnClick: blockedReason ? false : undefined, style: blockedReason ? { ...style, cursor: 'not-allowed' } : style, onClick: (event) => {
+export const ReasonedMenuItem = ({ blockedReason, showReason = true, reasonId, reasonDescribedBy, onClick, children, color, style, ...rest }) => (_jsxs(Menu.Item, { ...rest, color: blockedReason ? undefined : color, c: blockedReason ? 'dimmed' : rest.c, "aria-disabled": blockedReason ? true : undefined, "aria-describedby": (blockedReason && reasonDescribedBy) || rest['aria-describedby'], closeMenuOnClick: blockedReason ? false : undefined, style: blockedReason ? { ...style, cursor: 'not-allowed' } : style, onClick: (event) => {
         if (blockedReason) {
             event.stopPropagation();
             return;
         }
         onClick?.(event);
-    }, children: [children, blockedReason && (_jsx(Text, { size: "xs", c: "dimmed", component: "span", display: "block", style: { whiteSpace: 'normal' }, children: blockedReason }))] }));
+    }, children: [children, blockedReason && showReason && (_jsx(Text, { id: reasonId, size: "xs", c: "dimmed", component: "span", display: "block", style: { whiteSpace: 'normal' }, children: blockedReason }))] }));

package/dist/editor/components/ReviewDialogs.d.ts

@@ -0,0 +1,19 @@
+/** What the Approve dialog says; the pull request clause needs a pull request to be true. */
+export declare function approveMessage(branchName: string, hasPullRequest: boolean): string;
+/** The Request changes dialog's body: what happens, and an optional note for the editor. */
+export declare function RequestChangesForm({ branchName, hasPullRequest, initialNote, onNoteChange, }: {
+    branchName: string;
+    hasPullRequest: boolean;
+    /** A note typed before, such as one a failed request left behind. */
+    initialNote?: string;
+    onNoteChange: (note: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * A notification body that holds a note the reviewer typed, which is not saved: the message, the
+ * note quoted, and a button to copy it. `hint` says what to do with the copy.
+ */
+export declare function NoteNotSavedMessage({ message, note, hint, }: {
+    message: string;
+    note: string;
+    hint?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/editor/components/ReviewDialogs.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button, CopyButton, Stack, Text, Textarea, VisuallyHidden } from '@mantine/core';
+import { REQUEST_CHANGES_NOTE_MAX_LENGTH } from '../../authorization/review-role.js';
+/** The note counter appears once a note is this long, and is announced in the last 100. */
+const NOTE_COUNT_FROM = 1800;
+const NOTE_ANNOUNCE_FROM = REQUEST_CHANGES_NOTE_MAX_LENGTH - 100;
+/** What the Approve dialog says; the pull request clause needs a pull request to be true. */
+export function approveMessage(branchName, hasPullRequest) {
+    return hasPullRequest
+        ? `Approve "${branchName}"? Its pull request stays open on GitHub for someone with access to merge it.`
+        : `Approve "${branchName}"? It stays locked until it is withdrawn or changes are requested.`;
+}
+/** The Request changes dialog's body: what happens, and an optional note for the editor. */
+export function RequestChangesForm({ branchName, hasPullRequest, initialNote = '', onNoteChange, }) {
+    const [note, setNote] = useState(initialNote);
+    // The first focus, which the dialog's focus trap gives, puts the caret after a prefilled note so
+    // typing carries on from it; later focus keeps wherever the caret was left.
+    const caretPlaced = useRef(false);
+    return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", children: `Send "${branchName}" back to its editor? It goes back to editing${hasPullRequest ? ', and its pull request becomes a draft' : ''}.` }), _jsxs(Stack, { gap: 4, children: [_jsx(Textarea, { label: "Note to the editor", description: "Saved as a comment on the branch.", value: note, onChange: (event) => {
+                            setNote(event.currentTarget.value);
+                            onNoteChange(event.currentTarget.value);
+                        }, maxLength: REQUEST_CHANGES_NOTE_MAX_LENGTH, autosize: true, minRows: 3, maxRows: 8, onFocus: (event) => {
+                            if (caretPlaced.current)
+                                return;
+                            caretPlaced.current = true;
+                            const end = event.currentTarget.value.length;
+                            event.currentTarget.setSelectionRange(end, end);
+                        }, "data-autofocus": true, "data-testid": "request-changes-note" }), note.length > NOTE_COUNT_FROM && (_jsx(Text, { size: "xs", c: "dimmed", ta: "end", "aria-live": note.length >= NOTE_ANNOUNCE_FROM ? 'polite' : undefined, "data-testid": "request-changes-note-count", children: `${note.length.toLocaleString('en-US')} / ${REQUEST_CHANGES_NOTE_MAX_LENGTH.toLocaleString('en-US')}` }))] })] }));
+}
+/**
+ * A notification body that holds a note the reviewer typed, which is not saved: the message, the
+ * note quoted, and a button to copy it. `hint` says what to do with the copy.
+ */
+export function NoteNotSavedMessage({ message, note, hint = 'Copy it into a comment on the branch.', }) {
+    return (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", children: `${message} ${hint}` }), _jsx(Text, { component: "blockquote", size: "sm", m: 0, ps: "sm", lineClamp: 6, style: {
+                    whiteSpace: 'pre-wrap',
+                    borderInlineStart: '2px solid var(--canopy-input-border)',
+                }, "data-testid": "note-not-saved-text", children: note }), _jsx(CopyButton, { value: note, children: ({ copied, copy }) => (_jsxs(_Fragment, { children: [_jsx(Button, { size: "compact-sm", variant: "light", style: { alignSelf: 'flex-start' }, onClick: copy, "data-testid": "copy-note-button", children: copied ? 'Copied' : 'Copy note' }), _jsx(VisuallyHidden, { role: "status", "aria-live": "polite", children: copied ? 'Note copied' : '' })] })) })] }));
+}

package/dist/editor/copy.d.ts

@@ -9,6 +9,8 @@ export declare const EDITOR_ACTIONS: {
     readonly refreshFromServer: "Refresh from server";
     readonly submitForReview: "Submit for review";
     readonly withdrawFromReview: "Withdraw from review";
+    readonly approve: "Approve";
+    readonly review: "Review";
     readonly requestChanges: "Request changes";
     readonly switchBranch: "Switch branch";
     readonly newBranch: "New branch";
@@ -24,3 +26,5 @@ export declare const EDITOR_ACTIONS: {
  * `one` and `many` name what the list holds.
  */
 export declare const listFullReason: (maxItems: number, one?: string, many?: string) => string;
+/** Why Approve and Request changes can't act: the pull request they act on is gone. */
+export declare const CLOSED_PULL_REQUEST_REASON = "The pull request was closed on GitHub. Use \"Withdraw from review\", then submit it again to open a new one.";

package/dist/editor/copy.js

@@ -9,6 +9,8 @@ export const EDITOR_ACTIONS = {
     refreshFromServer: 'Refresh from server',
     submitForReview: 'Submit for review',
     withdrawFromReview: 'Withdraw from review',
+    approve: 'Approve',
+    review: 'Review',
     requestChanges: 'Request changes',
     switchBranch: 'Switch branch',
     newBranch: 'New branch',
@@ -24,3 +26,5 @@ export const EDITOR_ACTIONS = {
  * `one` and `many` name what the list holds.
  */
 export const listFullReason = (maxItems, one = 'item', many = 'items') => `This list holds at most ${maxItems} ${maxItems === 1 ? one : many}. Remove one to add another.`;
+/** Why Approve and Request changes can't act: the pull request they act on is gone. */
+export const CLOSED_PULL_REQUEST_REASON = 'The pull request was closed on GitHub. Use "Withdraw from review", then submit it again to open a new one.';

package/dist/editor/fields/MarkdownField.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React, { Suspense, useId, useRef, useCallback, useEffect, useReducer, useState } from 'react';
 import { Alert, Box, Button, Text, Textarea, useComputedColorScheme } from '@mantine/core';
 import { InsertEntryLink } from './entry-link/index.js';
-import { MARKDOWN_EXPORT_OPTIONS } from './markdown-export-options.js';
+import { MARKDOWN_EXPORT_OPTIONS } from '../../utils/markdown-export-options.js';
 import { createMarkdownFidelityPlugin } from './markdown-fidelity-visitors.js';
 import { MdxImageDialog } from './MdxImageDialog.js';
 import { createMdxJsxPlugins } from './mdx-jsx-support.js';

package/dist/editor/hooks/create-branch-request.d.ts

@@ -1,7 +1,11 @@
 import type { BranchListItem, CreateBranchBody } from '../../api/branch.js';
 import { type CanopyApiClient } from '../../api/client.js';
-/** @internal Exported for tests. Past the 60 s a Lambda behind CloudFront gets, so its 504 lands first. */
-export declare const CREATE_BRANCH_DEADLINE_MS = 90000;
+/**
+ * @internal Exported for tests. Past the gateway's limit, so its 504 lands first, and under
+ * `REQUEST_TIMEOUT_MS.long`. The limit comes from `request-deadline` directly: a test that mocks
+ * `api/client` would otherwise lose it at module load.
+ */
+export declare const CREATE_BRANCH_DEADLINE_MS: number;
 /** @internal Exported for tests. */
 export declare const CREATE_TIMED_OUT_MESSAGE = "Creating the branch didn't finish (the server timed out). It's safe to try again.";
 export type CreateBranchOutcome = {

package/dist/editor/hooks/create-branch-request.js

@@ -1,8 +1,13 @@
 import { isCreatorsRecentBranch } from '../../api/branch-create-window.js';
 import { isApiTimeoutError, isNonApiResponse } from '../../api/client.js';
+import { GATEWAY_MAX_TIMEOUT_MS } from '../../api/request-deadline.js';
 import { sanitizeBranchName } from '../../paths/branch-name.js';
-/** @internal Exported for tests. Past the 60 s a Lambda behind CloudFront gets, so its 504 lands first. */
-export const CREATE_BRANCH_DEADLINE_MS = 90_000;
+/**
+ * @internal Exported for tests. Past the gateway's limit, so its 504 lands first, and under
+ * `REQUEST_TIMEOUT_MS.long`. The limit comes from `request-deadline` directly: a test that mocks
+ * `api/client` would otherwise lose it at module load.
+ */
+export const CREATE_BRANCH_DEADLINE_MS = GATEWAY_MAX_TIMEOUT_MS + 30_000;
 /** @internal Exported for tests. */
 export const CREATE_TIMED_OUT_MESSAGE = "Creating the branch didn't finish (the server timed out). It's safe to try again.";
 /**

package/dist/editor/hooks/useBranchManager.d.ts

@@ -5,7 +5,7 @@ import type { BranchListItem } from '../../api/branch.js';
 import type { UnsavedSummary } from './useDraftManager.js';
 import type { StampedEntry } from '../../stamp-on-publish.js';
 /** @internal Exported for tests. */
-export declare const branchActionOutcomeUnknown: (action: string) => string;
+export declare const branchActionOutcomeUnknown: (action: string, check?: string) => string;
 /** What the withdraw and delete dialogs say about the branch's pull request. */
 type BranchPullRequest = Pick<BranchListItem, 'pullRequestNumber' | 'pullRequestState'>;
 /**
@@ -81,6 +81,8 @@ export interface UseBranchManagerOptions {
     getUnsaved?: () => Promise<UnsavedSummary>;
     /** The entries a submit of the open branch stamped (useDraftManager's `applySubmitStamps`). */
     onStamped?: (stamped: StampedEntry[]) => void;
+    /** A request for changes went through; the branch may now carry the reviewer's note as a comment. */
+    onChangesRequested?: (branchName: string) => void;
 }
 export interface UseBranchManagerReturn {
     branchName: string;
@@ -98,7 +100,10 @@ export interface UseBranchManagerReturn {
     handleSubmit: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
     /** Confirms first; the dialog returns focus to `returnFocusTo()` when given, else its opener. */
     handleWithdraw: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
-    handleRequestChanges: (branchName: string) => Promise<void>;
+    /** Confirms first; the dialog returns focus to `returnFocusTo()` when given, else its opener. */
+    handleApprove: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
+    /** Confirms first, taking an optional note; focus returns as for `handleApprove`. */
+    handleRequestChanges: (branchName: string, returnFocusTo?: () => HTMLElement | null) => Promise<void>;
     handleDelete: (branchName: string) => Promise<void>;
     handleReloadBranchData: () => Promise<void>;
     loadBranches: () => Promise<void>;