@byline/admin 6.6.0 → 6.7.1

package/dist/forms/available-locales-widget.jsx

@@ -0,0 +1,63 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { Checkbox, Label } from '@byline/ui/react';
+import cx from 'clsx';
+import { reconcileLocaleState } from './available-locales-reconcile';
+import styles from './available-locales-widget.module.css';
+import { useFormContext, useSystemAvailableLocales } from './form-context';
+export { reconcileLocaleState } from './available-locales-reconcile';
+/**
+ * System-managed `availableLocales` widget — the editorial "advertise these
+ * content locales" control. Renders one checkbox per content locale in the
+ * sidebar, directly below the path widget. The checked state reflects the
+ * stored advertised set (`useSystemAvailableLocales`); each row's intent
+ * reconciles that against the structural ledger fact (`availableVersionLocales`)
+ * via {@link reconcileLocaleState}. Opt-in: nothing is advertised until the
+ * editor checks a (green) locale.
+ *
+ * Stable override handles: `.byline-form-available-locales`,
+ * `.byline-form-available-locales-list`.
+ */
+export const AvailableLocalesWidget = ({ disabled: mutationsBlocked = false, contentLocales, availableVersionLocales, }) => {
+    const { t } = useTranslation('byline-admin');
+    const { setSystemAvailableLocales } = useFormContext();
+    const advertised = useSystemAvailableLocales();
+    const advertisedSet = useMemo(() => new Set(advertised), [advertised]);
+    const ledgerSet = useMemo(() => new Set(availableVersionLocales), [availableVersionLocales]);
+    const toggle = useCallback((code, checked) => {
+        if (mutationsBlocked)
+            return;
+        const next = new Set(advertised);
+        if (checked) {
+            next.add(code);
+        }
+        else {
+            next.delete(code);
+        }
+        setSystemAvailableLocales([...next]);
+    }, [mutationsBlocked, advertised, setSystemAvailableLocales]);
+    if (contentLocales.length === 0) {
+        return null;
+    }
+    return (<div className={cx('byline-form-available-locales', styles.container)}>
+      <Label id="available-locales" htmlFor="available-locales-group" label={t('availableLocalesWidget.label')}/>
+      <div id="available-locales-group" className={cx('byline-form-available-locales-list', styles.list)} role="group" aria-labelledby="label-for-available-locales" aria-describedby="available-locales-description">
+        {contentLocales.map(({ code, label }) => {
+            const checked = advertisedSet.has(code);
+            const { intent, disabled } = reconcileLocaleState(checked, ledgerSet.has(code));
+            return (<Checkbox key={code} id={`available-locale-${code}`} name={`__availableLocale_${code}__`} label={label} intent={intent} checked={checked} disabled={mutationsBlocked || disabled} onCheckedChange={(value) => toggle(code, value === true)}/>);
+        })}
+      </div>
+      <span id="available-locales-description" className={cx('byline-form-available-locales-sr-only', styles['sr-only'])}>
+        {t('availableLocalesWidget.srDescription')}
+      </span>
+    </div>);
+};

package/dist/forms/document-actions.jsx

@@ -0,0 +1,486 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import { useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { Button, Checkbox, CloseIcon, DeleteIcon, Dropdown as DropdownComponent, EllipsisIcon, IconButton, Modal, Select, } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './document-actions.module.css';
+const DUPLICATE_TITLE_SUFFIX = ' (copy)';
+export function DocumentActions({ disabled = false, publishedVersion, onUnpublish, onDelete, onDuplicate, sourceTitle, onCopyToLocale, sourceLocale, contentLocales, hasUnsavedChanges, onUnsavedChanges, onDeleteLocale, defaultLocale, availableLocales, scheduledPublicationState, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, }) {
+    const { t } = useTranslation('byline-admin');
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const [showDuplicateConfirm, setShowDuplicateConfirm] = useState(false);
+    const [duplicateBusy, setDuplicateBusy] = useState(false);
+    // Copy-to-Locale modal state. The menu item is hidden entirely unless
+    // the host has supplied a handler AND there is at least one *other*
+    // locale to copy into.
+    const availableTargetLocales = (contentLocales ?? []).filter((loc) => loc.code !== sourceLocale);
+    const copyToLocaleAvailable = onCopyToLocale != null && availableTargetLocales.length > 0;
+    const [showCopyToLocaleConfirm, setShowCopyToLocaleConfirm] = useState(false);
+    const [copyToLocaleBusy, setCopyToLocaleBusy] = useState(false);
+    const [copyTargetLocale, setCopyTargetLocale] = useState(availableTargetLocales[0]?.code ?? '');
+    const [copyOverwrite, setCopyOverwrite] = useState(false);
+    // Delete-Locale modal state. The menu item is hidden unless the host
+    // supplied a handler AND the document has at least one non-default locale
+    // with content. The default locale is the document's anchor and is never
+    // listed (it cannot be removed).
+    const deletableLocales = (availableLocales ?? [])
+        .filter((code) => code !== defaultLocale && code !== 'all')
+        .map((code) => ({
+        code,
+        label: contentLocales?.find((loc) => loc.code === code)?.label ?? code,
+    }));
+    const deleteLocaleAvailable = onDeleteLocale != null && deletableLocales.length > 0;
+    const [showDeleteLocaleConfirm, setShowDeleteLocaleConfirm] = useState(false);
+    const [deleteLocaleBusy, setDeleteLocaleBusy] = useState(false);
+    const [deleteTargetLocale, setDeleteTargetLocale] = useState('');
+    // Scheduled-publication menu items. The derived state already accounts for
+    // eligibility and for the abilities the actor holds, so the only thing left
+    // here is to map the permitted operations onto entries. The group renders
+    // above the locale and duplicate items because scheduling acts on the
+    // document's lifecycle rather than on its copies.
+    const scheduling = scheduledPublicationState;
+    const schedulingActions = [];
+    if (scheduling != null) {
+        if (scheduling.actions.schedule && onSchedulePublication != null) {
+            schedulingActions.push({
+                key: 'schedule',
+                // Short form: the menu supplies the "this document" context that the
+                // modal's title and submit button have to spell out for themselves.
+                label: t('scheduledPublication.actions.scheduleMenuItem'),
+                onSelect: onSchedulePublication,
+            });
+        }
+        if (scheduling.actions.confirm && onConfirmScheduledPublication != null) {
+            schedulingActions.push({
+                key: 'confirm',
+                label: t('scheduledPublication.actions.confirm'),
+                onSelect: () => void onConfirmScheduledPublication(),
+            });
+        }
+        if (scheduling.actions.reschedule && onSchedulePublication != null) {
+            schedulingActions.push({
+                key: 'reschedule',
+                label: t('scheduledPublication.actions.reschedule'),
+                onSelect: onSchedulePublication,
+            });
+        }
+        if (scheduling.actions.cancel && onCancelScheduledPublication != null) {
+            schedulingActions.push({
+                key: 'cancel',
+                label: t('scheduledPublication.actions.cancel'),
+                onSelect: () => void onCancelScheduledPublication(),
+            });
+        }
+    }
+    // Whether the ellipsis menu has anything to show. Every entry below is
+    // conditional, so with no available action the trigger would open an empty
+    // menu.
+    const hasAnyAction = schedulingActions.length > 0 ||
+        copyToLocaleAvailable ||
+        deleteLocaleAvailable ||
+        onDuplicate != null ||
+        onDelete != null;
+    const handleOnDelete = () => {
+        if (disabled)
+            return;
+        setShowDeleteConfirm(false);
+        if (onDelete) {
+            void onDelete().catch(() => { });
+        }
+    };
+    const handleOnDuplicate = async () => {
+        if (disabled)
+            return;
+        if (!onDuplicate)
+            return;
+        setDuplicateBusy(true);
+        try {
+            await onDuplicate();
+            setShowDuplicateConfirm(false);
+        }
+        catch {
+            // The host reports the failure and retains the editor observation.
+        }
+        finally {
+            setDuplicateBusy(false);
+        }
+    };
+    const handleOpenDuplicate = () => {
+        if (disabled)
+            return;
+        // Duplicate copies the saved version — block when the form is dirty so
+        // unsaved edits are not silently dropped from the copy.
+        if (hasUnsavedChanges) {
+            onUnsavedChanges?.();
+            return;
+        }
+        setShowDuplicateConfirm(true);
+    };
+    const handleOpenCopyToLocale = () => {
+        if (disabled)
+            return;
+        // Copy-to-Locale reads the saved version — block when the form is dirty.
+        if (hasUnsavedChanges) {
+            onUnsavedChanges?.();
+            return;
+        }
+        // Reset on open: pick the first available target and clear the
+        // overwrite checkbox so a previous-session "overwrite=true" choice
+        // is not silently sticky.
+        setCopyTargetLocale(availableTargetLocales[0]?.code ?? '');
+        setCopyOverwrite(false);
+        setShowCopyToLocaleConfirm(true);
+    };
+    const handleOnCopyToLocale = async () => {
+        if (disabled)
+            return;
+        if (!onCopyToLocale || !copyTargetLocale)
+            return;
+        setCopyToLocaleBusy(true);
+        try {
+            await onCopyToLocale({ targetLocale: copyTargetLocale, overwrite: copyOverwrite });
+            setShowCopyToLocaleConfirm(false);
+        }
+        catch {
+            // The host reports the failure and retains the editor observation.
+        }
+        finally {
+            setCopyToLocaleBusy(false);
+        }
+    };
+    const handleOpenDeleteLocale = () => {
+        if (disabled)
+            return;
+        // Delete-Locale removes the saved version's locale content — block when
+        // the form is dirty so the editor saves (or discards) first.
+        if (hasUnsavedChanges) {
+            onUnsavedChanges?.();
+            return;
+        }
+        // Default to the currently-viewed locale when it is deletable, otherwise
+        // the first available target.
+        const preferred = deletableLocales.find((loc) => loc.code === sourceLocale)?.code;
+        setDeleteTargetLocale(preferred ?? deletableLocales[0]?.code ?? '');
+        setShowDeleteLocaleConfirm(true);
+    };
+    const handleOnDeleteLocale = async () => {
+        if (disabled)
+            return;
+        if (!onDeleteLocale || !deleteTargetLocale)
+            return;
+        setDeleteLocaleBusy(true);
+        try {
+            await onDeleteLocale({ targetLocale: deleteTargetLocale });
+            setShowDeleteLocaleConfirm(false);
+        }
+        catch {
+            // The host reports the failure and retains the editor observation.
+        }
+        finally {
+            setDeleteLocaleBusy(false);
+        }
+    };
+    // Preview text shown inside the modal. Falls back to the literal suffix
+    // when no source title is supplied (collections without `useAsTitle`).
+    const duplicatePreviewBefore = sourceTitle ?? '';
+    const duplicatePreviewAfter = (sourceTitle ?? '') + DUPLICATE_TITLE_SUFFIX;
+    const sourceLocaleLabel = contentLocales?.find((loc) => loc.code === sourceLocale)?.label ?? sourceLocale ?? '';
+    return (<>
+      {hasAnyAction && (<DropdownComponent.Root>
+          <DropdownComponent.Trigger disabled={disabled} render={<IconButton variant="text" intent="noeffect" size="sm"/>}>
+            <EllipsisIcon className={cx('byline-form-actions-icon', styles.icon)} width="15px" height="15px"/>
+          </DropdownComponent.Trigger>
+
+          <DropdownComponent.Portal>
+            <DropdownComponent.Content className={cx('byline-form-actions-menu', styles.menu)} align="end" data-side="top" sideOffset={10}>
+              {/*{publishedVersion && (
+            <>
+              <DropdownComponent.Item disabled={disabled} onClick={onUnpublish}>
+                <div className={cx('byline-form-actions-item', styles.item)}>
+                  <span className={cx('byline-form-actions-item-icon', styles['item-icon'])} />
+                  <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                    Unpublish
+                  </span>
+                </div>
+              </DropdownComponent.Item>
+              <DropdownComponent.Separator />
+            </>
+          )}*/}
+              {schedulingActions.length > 0 && (<>
+                  {schedulingActions.map((action) => (<DropdownComponent.Item disabled={disabled} key={action.key} onClick={action.onSelect}>
+                      <div className={cx('byline-form-actions-item', styles.item)}>
+                        <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                          <button type="button" disabled={disabled}>
+                            {action.label}
+                          </button>
+                        </span>
+                      </div>
+                    </DropdownComponent.Item>))}
+                  <DropdownComponent.Separator />
+                </>)}
+              {copyToLocaleAvailable && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenCopyToLocale}>
+                  <div className={cx('byline-form-actions-item', styles.item)}>
+                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                      <button type="button" disabled={disabled}>
+                        {t('documentActions.copyToLocaleMenuItem')}
+                      </button>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>)}
+              {deleteLocaleAvailable && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenDeleteLocale}>
+                  <div className={cx('byline-form-actions-item', styles.item)}>
+                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                      <button type="button" disabled={disabled}>
+                        {t('documentActions.deleteLocale.menuItem')}
+                      </button>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>)}
+              {onDuplicate && (<DropdownComponent.Item disabled={disabled} onClick={handleOpenDuplicate}>
+                  <div className={cx('byline-form-actions-item', styles.item)}>
+                    <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                      <button type="button" disabled={disabled}>
+                        {t('common.actions.duplicate')}
+                      </button>
+                    </span>
+                  </div>
+                </DropdownComponent.Item>)}
+              {onDelete && (<>
+                  <DropdownComponent.Separator />
+                  <DropdownComponent.Item disabled={disabled} onClick={() => {
+                    setShowDeleteConfirm(true);
+                }}>
+                    <div className={cx('byline-form-actions-item', styles.item)}>
+                      <span className={cx('byline-form-actions-item-icon', styles['item-icon'])}>
+                        <DeleteIcon width="16px" height="16px"/>
+                      </span>
+                      <span className={cx('byline-form-actions-item-text', styles['item-text'])}>
+                        <button type="button" className={cx('byline-form-actions-delete', styles.delete)}>
+                          {t('common.actions.delete')}
+                        </button>
+                      </span>
+                    </div>
+                  </DropdownComponent.Item>
+                </>)}
+            </DropdownComponent.Content>
+          </DropdownComponent.Portal>
+        </DropdownComponent.Root>)}
+
+      <Modal isOpen={showDeleteConfirm} closeOnOverlayClick={true} onDismiss={() => {
+            setShowDeleteConfirm(false);
+        }}>
+        <Modal.Container style={{ maxWidth: '500px' }}>
+          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
+              {t('documentActions.delete.title')}
+            </h3>
+            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
+            setShowDeleteConfirm(false);
+        }}>
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p>{t('documentActions.delete.warning')}</p>
+          </Modal.Content>
+          <Modal.Actions>
+            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
+              no action
+            </button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
+            setShowDeleteConfirm(false);
+        }}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="danger" disabled={disabled} onClick={handleOnDelete}>
+              {t('common.actions.delete')}
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+
+      <Modal isOpen={showDuplicateConfirm} closeOnOverlayClick={!duplicateBusy} onDismiss={() => {
+            if (!duplicateBusy)
+                setShowDuplicateConfirm(false);
+        }}>
+        <Modal.Container style={{ maxWidth: '560px' }}>
+          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
+              {t('documentActions.duplicate.title')}
+            </h3>
+            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
+            if (!duplicateBusy)
+                setShowDuplicateConfirm(false);
+        }}>
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content className="prose">
+            <p className="m-0">{t('documentActions.duplicate.intro')}</p>
+            <ul className={cx('byline-form-actions-list', styles.list)}>
+              <li>
+                {t('documentActions.duplicate.bulletTitle')}{' '}
+                <code>{DUPLICATE_TITLE_SUFFIX.trim()}</code>.
+              </li>
+              <li>{t('documentActions.duplicate.bulletPath')}</li>
+            </ul>
+            {sourceTitle != null && sourceTitle.length > 0 && (<div className={cx('byline-form-actions-preview', styles.preview)}>
+                <div className={cx('byline-form-actions-preview-label', styles['preview-label'])}>
+                  {t('documentActions.duplicate.previewLabel')}
+                </div>
+                <div className={cx('byline-form-actions-preview-row', styles['preview-row'])}>
+                  <span className={cx('byline-form-actions-preview-before', styles['preview-before'])}>
+                    {duplicatePreviewBefore}
+                  </span>
+                  <span className={cx('byline-form-actions-preview-arrow', styles['preview-arrow'])}>
+                    →
+                  </span>
+                  <span className={cx('byline-form-actions-preview-after', styles['preview-after'])}>
+                    {duplicatePreviewAfter}
+                  </span>
+                </div>
+              </div>)}
+          </Modal.Content>
+          <Modal.Actions>
+            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
+              no action
+            </button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
+            if (!duplicateBusy)
+                setShowDuplicateConfirm(false);
+        }} disabled={disabled || duplicateBusy}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="primary" onClick={handleOnDuplicate} disabled={disabled || duplicateBusy}>
+              {duplicateBusy
+            ? t('documentActions.duplicate.busyButton')
+            : t('common.actions.duplicate')}
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+
+      <Modal isOpen={showCopyToLocaleConfirm} closeOnOverlayClick={!copyToLocaleBusy} onDismiss={() => {
+            if (!copyToLocaleBusy)
+                setShowCopyToLocaleConfirm(false);
+        }}>
+        <Modal.Container style={{ maxWidth: '560px' }}>
+          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
+              {t('documentActions.copyToLocale.title')}
+            </h3>
+            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
+            if (!copyToLocaleBusy)
+                setShowCopyToLocaleConfirm(false);
+        }}>
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p>{t('documentActions.copyToLocale.intro')}</p>
+            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
+              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500 }}>
+                {t('documentActions.copyToLocale.fromLabel')}&nbsp;
+              </span>
+              <span className={cx('byline-form-actions-copy-source', styles['copy-source'])}>
+                {sourceLocaleLabel}
+              </span>
+            </div>
+            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
+              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500, marginRight: 'var(--spacing-8)' }}>
+                {t('documentActions.copyToLocale.toLabel')}
+              </span>
+              <Select size="sm" ariaLabel={t('documentActions.copyToLocale.targetAriaLabel')} value={copyTargetLocale} items={availableTargetLocales.map((loc) => ({
+            value: loc.code,
+            label: loc.label,
+        }))} onValueChange={(value) => {
+            if (value != null)
+                setCopyTargetLocale(value);
+        }} disabled={disabled || copyToLocaleBusy}/>
+            </div>
+            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-16)' }}>
+              <Checkbox id="copy-to-locale-overwrite" name="overwrite" label={t('documentActions.copyToLocale.overwriteLabel')} checked={copyOverwrite} disabled={disabled || copyToLocaleBusy} helpText={t('documentActions.copyToLocale.overwriteHelp')} onCheckedChange={(value) => {
+            setCopyOverwrite(value === true);
+        }}/>
+            </div>
+          </Modal.Content>
+          <Modal.Actions>
+            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
+              no action
+            </button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
+            if (!copyToLocaleBusy)
+                setShowCopyToLocaleConfirm(false);
+        }} disabled={disabled || copyToLocaleBusy}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="primary" onClick={handleOnCopyToLocale} disabled={disabled || copyToLocaleBusy || !copyTargetLocale}>
+              {copyToLocaleBusy
+            ? t('documentActions.copyToLocale.busyButton')
+            : t('documentActions.copyToLocale.confirmButton')}
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+
+      <Modal isOpen={showDeleteLocaleConfirm} closeOnOverlayClick={!deleteLocaleBusy} onDismiss={() => {
+            if (!deleteLocaleBusy)
+                setShowDeleteLocaleConfirm(false);
+        }}>
+        <Modal.Container style={{ maxWidth: '560px' }}>
+          <Modal.Header className={cx('byline-form-actions-modal-head', styles['modal-head'])}>
+            <h3 className={cx('byline-form-actions-modal-title', styles['modal-title'])}>
+              {t('documentActions.deleteLocale.title')}
+            </h3>
+            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
+            if (!deleteLocaleBusy)
+                setShowDeleteLocaleConfirm(false);
+        }}>
+              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
+            </IconButton>
+          </Modal.Header>
+          <Modal.Content>
+            <p>{t('documentActions.deleteLocale.intro')}</p>
+            <div className={cx('byline-form-actions-copy-row', styles['copy-row'])} style={{ marginTop: 'var(--spacing-12)' }}>
+              <span className={cx('byline-form-actions-copy-label', styles['copy-label'])} style={{ fontWeight: 500, marginRight: 'var(--spacing-8)' }}>
+                {t('documentActions.deleteLocale.localeLabel')}
+              </span>
+              <Select size="sm" ariaLabel={t('documentActions.deleteLocale.targetAriaLabel')} value={deleteTargetLocale} items={deletableLocales.map((loc) => ({
+            value: loc.code,
+            label: loc.label,
+        }))} onValueChange={(value) => {
+            if (value != null)
+                setDeleteTargetLocale(value);
+        }} disabled={disabled || deleteLocaleBusy}/>
+            </div>
+            <p style={{ marginTop: 'var(--spacing-12)' }}>
+              {t('documentActions.deleteLocale.warning')}
+            </p>
+          </Modal.Content>
+          <Modal.Actions>
+            <button data-autofocus type="button" tabIndex={0} className={cx('byline-form-actions-sr-only', styles['sr-only'])}>
+              no action
+            </button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="noeffect" onClick={() => {
+            if (!deleteLocaleBusy)
+                setShowDeleteLocaleConfirm(false);
+        }} disabled={disabled || deleteLocaleBusy}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button size="sm" style={{ minWidth: '80px' }} intent="danger" onClick={handleOnDeleteLocale} disabled={disabled || deleteLocaleBusy || !deleteTargetLocale}>
+              {deleteLocaleBusy
+            ? t('documentActions.deleteLocale.busyButton')
+            : t('documentActions.deleteLocale.confirmButton')}
+            </Button>
+          </Modal.Actions>
+        </Modal.Container>
+      </Modal>
+    </>);
+}

package/dist/forms/form-context.d.ts

@@ -34,8 +34,9 @@ type FieldUploadingListener = (uploading: boolean) => void;
  * Why the form is dirty, partitioned by write semantics — drives the single
  * Save button. `content` mints a new version (normal workflow). `direct-write`
  * is an immediate, non-versioned write of the document-grain system fields
- * (path / advertised locales) that does NOT reset workflow status. `both` does
- * each through its own write path. See docs/08-internationalization/index.md.
+ * (path / advertised locales) that does NOT reset workflow status. `both`
+ * saves the two together: one request, one guarded transaction, so both commit
+ * or neither does. See docs/08-internationalization/03-content-locales.md.
  */
 export type DirtyReason = 'none' | 'content' | 'direct-write' | 'both';
 export interface DirtyBreakdown {