@payloadcms/ui 4.0.0-internal.e55ccef → 4.0.0-internal.ea6e8f8

package/dist/views/Branch/MergeLedger/index.css

@@ -0,0 +1,137 @@
+@layer payload-default {
+  .merge-ledger {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-5);
+  }
+
+  .merge-ledger__header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    margin-block-end: var(--spacer-2);
+  }
+
+  .merge-ledger__when {
+    margin: 0;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .merge-ledger__meta {
+    color: var(--color-text-secondary);
+  }
+
+  .merge-ledger__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .merge-ledger__row {
+    border: var(--stroke-width-small) solid var(--color-border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+  }
+
+  .merge-ledger__row-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--color-bg-secondary);
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-bg-secondary-hover);
+    }
+  }
+
+  /* Covers the header so the whole row is the control. Transparent text rather
+     than hidden, so it still carries the row's accessible name. */
+  .merge-ledger__toggle {
+    position: absolute;
+    inset: 0;
+    text-align: start;
+    color: transparent;
+    background: none;
+    border: none;
+    border-radius: inherit;
+    cursor: pointer;
+    outline: none;
+
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+      outline-offset: -1px;
+    }
+
+    span {
+      user-select: none;
+    }
+  }
+
+  .merge-ledger__row-content {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: var(--spacer-1-5) var(--spacer-2);
+  }
+
+  .merge-ledger__operation,
+  .merge-ledger__entity {
+    flex-shrink: 0;
+  }
+
+  /* The header it sits on is `--color-bg-secondary`, which is also the light-gray
+     pill's background, so give it its own edge to read against. */
+  .merge-ledger__entity {
+    background: var(--color-bg);
+    box-shadow: inset 0 0 0 var(--stroke-width-small) var(--color-border);
+  }
+
+  .merge-ledger__title {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The one part of the header that is not the toggle: the document itself is still
+     reachable, since main is where the merged content now lives.
+     Sized to its text and not allowed to grow — stretched across the row it would
+     sit on top of the toggle overlay and swallow every click meant to expand. */
+  .merge-ledger__title--link {
+    position: relative;
+    z-index: 1;
+    flex: 0 1 auto;
+    margin-inline-end: auto;
+    pointer-events: all;
+    color: var(--color-text);
+
+    &:hover {
+      color: var(--color-text-brand);
+    }
+  }
+
+  .merge-ledger__indicator {
+    flex-shrink: 0;
+    color: var(--color-icon);
+  }
+
+  .merge-ledger__diff {
+    padding: var(--spacer-3);
+    border-block-start: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  .merge-ledger__error {
+    color: var(--color-text-secondary);
+  }
+}

package/dist/views/Branch/MergeLedger/index.d.ts

@@ -0,0 +1,25 @@
+import type { MergeEventChange as PersistedMergeEventChange } from 'payload';
+import React from 'react';
+import './index.css';
+export type MergeEventChange = Pick<PersistedMergeEventChange, 'collectionSlug' | 'docID' | 'docTitle' | 'globalSlug' | 'operation'>;
+export type MergeEvent = {
+    changes: MergeEventChange[];
+    id: string;
+    mergedAt: string;
+    mergedByLabel?: string;
+};
+/**
+ * A branch's history: one section per merge event, newest first.
+ *
+ * Reconstructed from the ledger rather than from the branch's current state, which
+ * by then holds nothing — a merge consumes the change rows it applies and drops the
+ * shadow rows behind them. Titles are the ones the documents had when they merged.
+ *
+ * Rows expand to the diff of what that merge did, rendered from the target versions
+ * recorded either side of the write. Fetched per row, because a history can hold
+ * hundreds of documents and each diff is a full field-tree render.
+ */
+export declare const MergeLedger: React.FC<{
+    events: MergeEvent[];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Branch/MergeLedger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Branch/MergeLedger/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,IAAI,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAI5E,OAAO,KAAwC,MAAM,OAAO,CAAA;AAW5D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,yBAAyB,EACzB,gBAAgB,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CACrE,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,OAAO,EAAE,gBAAgB,EAAE,CAAA;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAaD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,UAAU,EAAE,CAAA;CAAE,CAkM1D,CAAA"}

package/dist/views/Branch/MergeLedger/index.js

@@ -0,0 +1,226 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { formatAdminURL } from 'payload/shared';
+import React, { useCallback, useRef, useState } from 'react';
+import { Link } from '../../../elements/Link/index.js';
+import { Pill } from '../../../elements/Pill/index.js';
+import { ShimmerEffect } from '../../../elements/ShimmerEffect/index.js';
+import { ChevronIcon } from '../../../icons/Chevron/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useServerFunctions } from '../../../providers/ServerFunctions/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import './index.css';
+const baseClass = 'merge-ledger';
+const operationPillStyle = {
+  create: 'success',
+  delete: 'error',
+  update: 'warning'
+};
+/**
+ * A branch's history: one section per merge event, newest first.
+ *
+ * Reconstructed from the ledger rather than from the branch's current state, which
+ * by then holds nothing — a merge consumes the change rows it applies and drops the
+ * shadow rows behind them. Titles are the ones the documents had when they merged.
+ *
+ * Rows expand to the diff of what that merge did, rendered from the target versions
+ * recorded either side of the write. Fetched per row, because a history can hold
+ * hundreds of documents and each diff is a full field-tree render.
+ */
+export const MergeLedger = ({
+  events
+}) => {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    serverFunction
+  } = useServerFunctions();
+  const [expanded, setExpanded] = useState(() => new Set());
+  const [loaded, setLoaded] = useState({});
+  const loadedRef = useRef(loaded);
+  loadedRef.current = loaded;
+  const load = useCallback(async ({
+    changeIndex,
+    key,
+    mergeID
+  }) => {
+    if (loadedRef.current[key]) {
+      return;
+    }
+    setLoaded(prev => ({
+      ...prev,
+      [key]: {
+        status: 'loading'
+      }
+    }));
+    try {
+      const result = await serverFunction({
+        name: 'render-merge-diff',
+        args: {
+          changeIndex,
+          mergeID
+        }
+      });
+      setLoaded(prev_1 => ({
+        ...prev_1,
+        [key]: {
+          result,
+          status: 'ready'
+        }
+      }));
+    } catch (_err) {
+      setLoaded(prev_0 => ({
+        ...prev_0,
+        [key]: {
+          status: 'error'
+        }
+      }));
+    }
+  }, [serverFunction]);
+  const toggle = useCallback(({
+    changeIndex: changeIndex_0,
+    key: key_0,
+    mergeID: mergeID_0
+  }) => {
+    // The fetch is kicked off outside the updater. A state updater must be pure —
+    // React may run it during another component's render, and the `setLoaded` inside
+    // `load` then lands mid-render.
+    const willExpand = !expanded.has(key_0);
+    setExpanded(prev_2 => {
+      const next = new Set(prev_2);
+      if (next.has(key_0)) {
+        next.delete(key_0);
+      } else {
+        next.add(key_0);
+      }
+      return next;
+    });
+    if (willExpand) {
+      void load({
+        changeIndex: changeIndex_0,
+        key: key_0,
+        mergeID: mergeID_0
+      });
+    }
+  }, [expanded, load]);
+  if (!events.length) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: events.map(event => /*#__PURE__*/_jsxs("section", {
+      className: `${baseClass}__event`,
+      children: [/*#__PURE__*/_jsxs("header", {
+        className: `${baseClass}__header`,
+        children: [/*#__PURE__*/_jsx("h3", {
+          className: `${baseClass}__when`,
+          children: t('branching:mergedOn', {
+            date: new Date(event.mergedAt).toLocaleString(undefined, {
+              dateStyle: 'medium',
+              timeStyle: 'short'
+            })
+          })
+        }), /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__meta`,
+          children: event.mergedByLabel ? t('branching:mergedByCount', {
+            count: event.changes.length,
+            user: event.mergedByLabel
+          }) : t('branching:mergedCount', {
+            count: event.changes.length
+          })
+        })]
+      }), /*#__PURE__*/_jsx("ul", {
+        className: `${baseClass}__list`,
+        children: event.changes.map((change, changeIndex_1) => {
+          const collectionConfig = change.globalSlug ? undefined : getEntityConfig({
+            collectionSlug: change.collectionSlug
+          });
+          const globalConfig = change.globalSlug ? getEntityConfig({
+            globalSlug: change.globalSlug
+          }) : undefined;
+          const key_1 = `${event.id}-${changeIndex_1}`;
+          const contentID = `${baseClass}-${key_1}-diff`;
+          const isExpanded = expanded.has(key_1);
+          const state = loaded[key_1];
+          return /*#__PURE__*/_jsxs("li", {
+            className: `${baseClass}__row`,
+            children: [/*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__row-header`,
+              children: [/*#__PURE__*/_jsx("button", {
+                "aria-controls": contentID,
+                "aria-expanded": isExpanded,
+                className: `${baseClass}__toggle`,
+                onClick: () => toggle({
+                  changeIndex: changeIndex_1,
+                  key: key_1,
+                  mergeID: event.id
+                }),
+                type: "button",
+                children: /*#__PURE__*/_jsx("span", {
+                  children: change.docTitle
+                })
+              }), /*#__PURE__*/_jsxs("div", {
+                className: `${baseClass}__row-content`,
+                children: [/*#__PURE__*/_jsx(Pill, {
+                  className: `${baseClass}__operation`,
+                  pillStyle: operationPillStyle[change.operation],
+                  size: "small",
+                  children: t(`branching:operation_${change.operation}`)
+                }), /*#__PURE__*/_jsx(Pill, {
+                  className: `${baseClass}__entity`,
+                  pillStyle: "light-gray",
+                  size: "small",
+                  children: getTranslation(globalConfig ? globalConfig.label ?? change.globalSlug : collectionConfig?.labels?.singular ?? change.collectionSlug, i18n)
+                }), change.operation === 'delete' ? /*#__PURE__*/_jsx("span", {
+                  className: `${baseClass}__title`,
+                  children: change.docTitle
+                }) : /*#__PURE__*/_jsx(Link, {
+                  className: `${baseClass}__title ${baseClass}__title--link`,
+                  href: formatAdminURL({
+                    adminRoute: config.routes.admin,
+                    path: change.globalSlug ? `/globals/${change.globalSlug}` : `/collections/${change.collectionSlug}/${change.docID}`
+                  }),
+                  children: change.docTitle
+                }), /*#__PURE__*/_jsx(ChevronIcon, {
+                  className: `${baseClass}__indicator`,
+                  direction: isExpanded ? 'up' : 'down',
+                  size: 16
+                })]
+              })]
+            }), isExpanded && /*#__PURE__*/_jsxs("div", {
+              className: `${baseClass}__diff`,
+              id: contentID,
+              children: [state?.status === 'ready' && state.result?.status === 'ready' ? state.result.diff : null, state?.status === 'loading' || !state ? /*#__PURE__*/_jsxs("div", {
+                "aria-live": "polite",
+                role: "status",
+                children: [/*#__PURE__*/_jsx("span", {
+                  className: "sr-only",
+                  children: t('general:loading')
+                }), /*#__PURE__*/_jsx(ShimmerEffect, {
+                  height: "3rem"
+                })]
+              }) : null, state?.status === 'ready' && state.result?.status === 'unavailable' ? /*#__PURE__*/_jsx("p", {
+                className: `${baseClass}__error`,
+                role: "status",
+                children: t('general:notFound')
+              }) : null, state?.status === 'error' ? /*#__PURE__*/_jsx("p", {
+                className: `${baseClass}__error`,
+                role: "status",
+                children: t('error:unknown')
+              }) : null]
+            })]
+          }, key_1);
+        })
+      })]
+    }, event.id))
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/views/Branch/MergeLedger/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","formatAdminURL","React","useCallback","useRef","useState","Link","Pill","ShimmerEffect","ChevronIcon","useConfig","useServerFunctions","useTranslation","baseClass","operationPillStyle","create","delete","update","MergeLedger","events","config","getEntityConfig","i18n","t","serverFunction","expanded","setExpanded","Set","loaded","setLoaded","loadedRef","current","load","changeIndex","key","mergeID","prev","status","result","name","args","_err","toggle","willExpand","has","next","add","length","_jsx","className","map","event","_jsxs","date","Date","mergedAt","toLocaleString","undefined","dateStyle","timeStyle","mergedByLabel","count","changes","user","change","collectionConfig","globalSlug","collectionSlug","globalConfig","id","contentID","isExpanded","state","onClick","type","docTitle","pillStyle","operation","size","label","labels","singular","href","adminRoute","routes","admin","path","docID","direction","diff","role","height"],"sources":["../../../../src/views/Branch/MergeLedger/index.tsx"],"sourcesContent":["'use client'\n\nimport type { MergeEventChange as PersistedMergeEventChange } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useRef, useState } from 'react'\n\nimport type { RenderMergeDiffResult } from '../renderMergeDiff.js'\n\nimport { Link } from '../../../elements/Link/index.js'\nimport { Pill } from '../../../elements/Pill/index.js'\nimport { ShimmerEffect } from '../../../elements/ShimmerEffect/index.js'\nimport { ChevronIcon } from '../../../icons/Chevron/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useServerFunctions } from '../../../providers/ServerFunctions/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport './index.css'\n\nconst baseClass = 'merge-ledger'\n\nexport type MergeEventChange = Pick<\n  PersistedMergeEventChange,\n  'collectionSlug' | 'docID' | 'docTitle' | 'globalSlug' | 'operation'\n>\n\nexport type MergeEvent = {\n  changes: MergeEventChange[]\n  id: string\n  mergedAt: string\n  mergedByLabel?: string\n}\n\ntype LoadState = {\n  result?: RenderMergeDiffResult\n  status: 'error' | 'loading' | 'ready'\n}\n\nconst operationPillStyle = {\n  create: 'success',\n  delete: 'error',\n  update: 'warning',\n} as const\n\n/**\n * A branch's history: one section per merge event, newest first.\n *\n * Reconstructed from the ledger rather than from the branch's current state, which\n * by then holds nothing — a merge consumes the change rows it applies and drops the\n * shadow rows behind them. Titles are the ones the documents had when they merged.\n *\n * Rows expand to the diff of what that merge did, rendered from the target versions\n * recorded either side of the write. Fetched per row, because a history can hold\n * hundreds of documents and each diff is a full field-tree render.\n */\nexport const MergeLedger: React.FC<{ events: MergeEvent[] }> = ({ events }) => {\n  const { config, getEntityConfig } = useConfig()\n  const { i18n, t } = useTranslation()\n  const { serverFunction } = useServerFunctions()\n\n  const [expanded, setExpanded] = useState<Set<string>>(() => new Set())\n  const [loaded, setLoaded] = useState<Record<string, LoadState>>({})\n\n  const loadedRef = useRef(loaded)\n  loadedRef.current = loaded\n\n  const load = useCallback(\n    async ({\n      changeIndex,\n      key,\n      mergeID,\n    }: {\n      changeIndex: number\n      key: string\n      mergeID: string\n    }) => {\n      if (loadedRef.current[key]) {\n        return\n      }\n\n      setLoaded((prev) => ({ ...prev, [key]: { status: 'loading' } }))\n\n      try {\n        const result = (await serverFunction({\n          name: 'render-merge-diff',\n          args: { changeIndex, mergeID },\n        })) as RenderMergeDiffResult\n\n        setLoaded((prev) => ({ ...prev, [key]: { result, status: 'ready' } }))\n      } catch (_err) {\n        setLoaded((prev) => ({ ...prev, [key]: { status: 'error' } }))\n      }\n    },\n    [serverFunction],\n  )\n\n  const toggle = useCallback(\n    ({ changeIndex, key, mergeID }: { changeIndex: number; key: string; mergeID: string }) => {\n      // The fetch is kicked off outside the updater. A state updater must be pure —\n      // React may run it during another component's render, and the `setLoaded` inside\n      // `load` then lands mid-render.\n      const willExpand = !expanded.has(key)\n\n      setExpanded((prev) => {\n        const next = new Set(prev)\n\n        if (next.has(key)) {\n          next.delete(key)\n        } else {\n          next.add(key)\n        }\n\n        return next\n      })\n\n      if (willExpand) {\n        void load({ changeIndex, key, mergeID })\n      }\n    },\n    [expanded, load],\n  )\n\n  if (!events.length) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      {events.map((event) => (\n        <section className={`${baseClass}__event`} key={event.id}>\n          <header className={`${baseClass}__header`}>\n            <h3 className={`${baseClass}__when`}>\n              {t('branching:mergedOn', {\n                date: new Date(event.mergedAt).toLocaleString(undefined, {\n                  dateStyle: 'medium',\n                  timeStyle: 'short',\n                }),\n              })}\n            </h3>\n            <span className={`${baseClass}__meta`}>\n              {event.mergedByLabel\n                ? t('branching:mergedByCount', {\n                    count: event.changes.length,\n                    user: event.mergedByLabel,\n                  })\n                : t('branching:mergedCount', { count: event.changes.length })}\n            </span>\n          </header>\n\n          <ul className={`${baseClass}__list`}>\n            {event.changes.map((change, changeIndex) => {\n              const collectionConfig = change.globalSlug\n                ? undefined\n                : getEntityConfig({ collectionSlug: change.collectionSlug })\n              const globalConfig = change.globalSlug\n                ? getEntityConfig({ globalSlug: change.globalSlug })\n                : undefined\n              const key = `${event.id}-${changeIndex}`\n              const contentID = `${baseClass}-${key}-diff`\n              const isExpanded = expanded.has(key)\n              const state = loaded[key]\n\n              return (\n                <li className={`${baseClass}__row`} key={key}>\n                  {/* Following `Collapsible` and the review list: an overlay button\n                      takes the clicks so the whole header opens the row, and the\n                      content sits above it with pointer events off. */}\n                  <div className={`${baseClass}__row-header`}>\n                    <button\n                      aria-controls={contentID}\n                      aria-expanded={isExpanded}\n                      className={`${baseClass}__toggle`}\n                      onClick={() => toggle({ changeIndex, key, mergeID: event.id })}\n                      type=\"button\"\n                    >\n                      <span>{change.docTitle}</span>\n                    </button>\n                    <div className={`${baseClass}__row-content`}>\n                      <Pill\n                        className={`${baseClass}__operation`}\n                        pillStyle={operationPillStyle[change.operation]}\n                        size=\"small\"\n                      >\n                        {t(`branching:operation_${change.operation}` as Parameters<typeof t>[0])}\n                      </Pill>\n                      <Pill className={`${baseClass}__entity`} pillStyle=\"light-gray\" size=\"small\">\n                        {getTranslation(\n                          globalConfig\n                            ? (globalConfig.label ?? change.globalSlug)\n                            : (collectionConfig?.labels?.singular ?? change.collectionSlug),\n                          i18n,\n                        )}\n                      </Pill>\n                      {/* A merged delete has no document left to open. A global has\n                          somewhere to go instead: its own edit view. */}\n                      {change.operation === 'delete' ? (\n                        <span className={`${baseClass}__title`}>{change.docTitle}</span>\n                      ) : (\n                        <Link\n                          className={`${baseClass}__title ${baseClass}__title--link`}\n                          href={formatAdminURL({\n                            adminRoute: config.routes.admin,\n                            path: change.globalSlug\n                              ? `/globals/${change.globalSlug}`\n                              : `/collections/${change.collectionSlug}/${change.docID}`,\n                          })}\n                        >\n                          {change.docTitle}\n                        </Link>\n                      )}\n                      <ChevronIcon\n                        className={`${baseClass}__indicator`}\n                        direction={isExpanded ? 'up' : 'down'}\n                        size={16}\n                      />\n                    </div>\n                  </div>\n\n                  {isExpanded && (\n                    <div className={`${baseClass}__diff`} id={contentID}>\n                      {state?.status === 'ready' && state.result?.status === 'ready'\n                        ? state.result.diff\n                        : null}\n                      {state?.status === 'loading' || !state ? (\n                        <div aria-live=\"polite\" role=\"status\">\n                          <span className=\"sr-only\">{t('general:loading')}</span>\n                          <ShimmerEffect height=\"3rem\" />\n                        </div>\n                      ) : null}\n                      {state?.status === 'ready' && state.result?.status === 'unavailable' ? (\n                        <p className={`${baseClass}__error`} role=\"status\">\n                          {t('general:notFound')}\n                        </p>\n                      ) : null}\n                      {state?.status === 'error' ? (\n                        <p className={`${baseClass}__error`} role=\"status\">\n                          {t('error:unknown')}\n                        </p>\n                      ) : null}\n                    </div>\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        </section>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/views/Branch/ScheduledMerges/index.css

@@ -0,0 +1,83 @@
+@layer payload-default {
+  /* One line, stated plainly, above everything it qualifies. */
+  .scheduled-merges__banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    margin-block-end: var(--spacer-3);
+    padding: var(--spacer-2) var(--spacer-3);
+    border: var(--stroke-width-small) solid var(--color-border-success);
+    border-radius: var(--radius-medium);
+    background: var(--color-bg-success-tertiary);
+  }
+
+  .scheduled-merges__banner-text {
+    min-width: 0;
+  }
+
+  .scheduled-merges__banner-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .scheduled-merges__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-4);
+  }
+
+  .scheduled-merges__schedule-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    margin-block-end: var(--spacer-2);
+  }
+
+  .scheduled-merges__when,
+  .scheduled-merges__manage-when {
+    margin: 0;
+    font-family: var(--text-body-medium-strong-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+  }
+
+  .scheduled-merges__meta,
+  .scheduled-merges__empty {
+    color: var(--color-text-secondary);
+  }
+
+  .scheduled-merges__manage-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .scheduled-merges__manage-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--spacer-3);
+    padding-block-end: var(--spacer-3);
+    border-block-end: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  /* Stacked, so the date leads and the ledger reads underneath it. */
+  .scheduled-merges__manage-details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacer-1);
+    min-width: 0;
+  }
+
+  .scheduled-merges__manage-row:last-child {
+    padding-block-end: 0;
+    border-block-end: none;
+  }
+}

package/dist/views/Branch/ScheduledMerges/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { BranchChange } from '../ChangedDocuments/index.js';
+import './index.css';
+export type ScheduledMerge = {
+    /** The documents this schedule will apply, resolved against what is pending now. */
+    changes: BranchChange[];
+    closeBranch: boolean;
+    /** `payload-jobs` row ID, which is also the handle for cancelling it. */
+    id: string;
+    /** True when the schedule named no selection, so it takes whatever is pending. */
+    isEverything: boolean;
+    waitUntil: string;
+};
+/**
+ * What a branch is about to merge, and when.
+ *
+ * A banner says it in one line, because it changes what everything below it means: the
+ * pending changes are no longer only a proposal, they are a proposal with a date on it.
+ * Below that each schedule lists the documents it will apply, expandable to the same
+ * diff the review list shows — the diff is against main either way, so it is the same
+ * question asked about a future moment.
+ *
+ * Several schedules can coexist: schedule a merge, keep working, schedule another. The
+ * banner names the soonest and the modal holds the rest, which is why actions live
+ * there rather than being repeated per row.
+ */
+export declare const ScheduledMerges: React.FC<{
+    branchID: number | string;
+    branchSlug: string;
+    schedules: ScheduledMerge[];
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/views/Branch/ScheduledMerges/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Branch/ScheduledMerges/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAiBhE,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,cAAc,GAAG;IAC3B,oFAAoF;IACpF,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,WAAW,EAAE,OAAO,CAAA;IACpB,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAA;IACV,kFAAkF;IAClF,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,cAAc,EAAE,CAAA;CAC5B,CA2HA,CAAA"}