@byline/admin 4.14.1 → 4.15.0

package/dist/forms/scheduled-publication-time.js

@@ -0,0 +1,113 @@
+function parseWallParts(value) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
+    if (null == match) return null;
+    const [, year, month, day, hour, minute] = match;
+    const parts = {
+        year: Number(year),
+        month: Number(month),
+        day: Number(day),
+        hour: Number(hour),
+        minute: Number(minute)
+    };
+    if (parts.year < 1 || parts.month < 1 || parts.month > 12 || parts.day < 1 || parts.day > 31 || parts.hour > 23 || parts.minute > 59) return null;
+    const calendar = new Date(0);
+    calendar.setUTCFullYear(parts.year, parts.month - 1, parts.day);
+    calendar.setUTCHours(parts.hour, parts.minute, 0, 0);
+    if (calendar.getUTCFullYear() !== parts.year || calendar.getUTCMonth() !== parts.month - 1 || calendar.getUTCDate() !== parts.day) return null;
+    return parts;
+}
+function formatter(timeZone) {
+    return new Intl.DateTimeFormat('en-US-u-ca-iso8601-nu-latn', {
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hourCycle: 'h23'
+    });
+}
+function zonedParts(format, epochMs) {
+    const values = Object.fromEntries(format.formatToParts(epochMs).filter((part)=>'literal' !== part.type).map((part)=>[
+            part.type,
+            Number(part.value)
+        ]));
+    return {
+        year: values.year ?? 0 / 0,
+        month: values.month ?? 0 / 0,
+        day: values.day ?? 0 / 0,
+        hour: values.hour ?? 0 / 0,
+        minute: values.minute ?? 0 / 0,
+        second: values.second ?? 0 / 0
+    };
+}
+function sameWallTime(actual, expected) {
+    return actual.year === expected.year && actual.month === expected.month && actual.day === expected.day && actual.hour === expected.hour && actual.minute === expected.minute;
+}
+function offsetMinutes(format, epochMs) {
+    const parts = zonedParts(format, epochMs);
+    const localAsUtc = Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second);
+    return Math.round((localAsUtc - epochMs) / 60000);
+}
+function formatOffset(minutes) {
+    const sign = minutes < 0 ? '-' : '+';
+    const absolute = Math.abs(minutes);
+    const hours = String(Math.floor(absolute / 60)).padStart(2, '0');
+    const remainingMinutes = String(absolute % 60).padStart(2, '0');
+    return `UTC${sign}${hours}:${remainingMinutes}`;
+}
+function resolveScheduledPublicationWallTime(value, timeZone) {
+    const wall = parseWallParts(value);
+    if (null == wall) return {
+        status: 'invalid'
+    };
+    let format;
+    try {
+        format = formatter(timeZone);
+    } catch  {
+        return {
+            status: 'invalid'
+        };
+    }
+    const wallAsUtc = Date.UTC(wall.year, wall.month - 1, wall.day, wall.hour, wall.minute);
+    const offsets = new Set();
+    for(let hours = -36; hours <= 36; hours += 6)offsets.add(offsetMinutes(format, wallAsUtc + 3600000 * hours));
+    const choices = Array.from(offsets).map((offset)=>({
+            epochMs: wallAsUtc - 60000 * offset,
+            offset
+        })).filter(({ epochMs })=>sameWallTime(zonedParts(format, epochMs), wall)).sort((left, right)=>left.epochMs - right.epochMs).map(({ epochMs, offset })=>({
+            iso: new Date(epochMs).toISOString(),
+            offsetLabel: formatOffset(offset)
+        }));
+    if (0 === choices.length) return {
+        status: 'nonexistent'
+    };
+    return {
+        status: 'valid',
+        choices
+    };
+}
+function wallTimeInZone(instant, timeZone) {
+    const parts = Object.fromEntries(new Intl.DateTimeFormat('en-US-u-ca-iso8601-nu-latn', {
+        timeZone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hourCycle: 'h23'
+    }).formatToParts(instant).filter((part)=>'literal' !== part.type).map((part)=>[
+            part.type,
+            part.value
+        ]));
+    return {
+        date: `${parts.year}-${parts.month}-${parts.day}`,
+        time: `${parts.hour}:${parts.minute}`
+    };
+}
+function joinWallTime(wall) {
+    if (0 === wall.date.length || 0 === wall.time.length) return null;
+    return `${wall.date}T${wall.time.slice(0, 5)}`;
+}
+export { joinWallTime, resolveScheduledPublicationWallTime, wallTimeInZone };

package/dist/forms/scheduled-publication-time.test.node.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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
+ */
+export {};

package/dist/react.d.ts

@@ -59,6 +59,7 @@ export * from './forms/form-context.js';
 export * from './forms/form-renderer.js';
 export * from './forms/navigation-guard.js';
 export * from './forms/path-widget.js';
+export * from './forms/scheduled-publication-state.js';
 export * from './lib/translate-validation-error.js';
 export * from './presentation/group.js';
 export * from './presentation/row.js';

package/dist/react.js

@@ -30,6 +30,7 @@ export * from "./forms/form-context.js";
 export * from "./forms/form-renderer.js";
 export * from "./forms/navigation-guard.js";
 export * from "./forms/path-widget.js";
+export * from "./forms/scheduled-publication-state.js";
 export * from "./lib/translate-validation-error.js";
 export * from "./presentation/group.js";
 export * from "./presentation/row.js";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "4.14.1",
+  "version": "4.15.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -173,10 +173,10 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.4.3",
-    "@byline/i18n": "4.14.1",
-    "@byline/ui": "4.14.1",
-    "@byline/auth": "4.14.1",
-    "@byline/core": "4.14.1"
+    "@byline/auth": "4.15.0",
+    "@byline/core": "4.15.0",
+    "@byline/ui": "4.15.0",
+    "@byline/i18n": "4.15.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -189,6 +189,8 @@
     "@types/node": "^26.2.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",
+    "@vitejs/plugin-react": "^6.1.0",
+    "jsdom": "^30.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
@@ -207,8 +209,10 @@
     "build": "rslib build",
     "clean": "node scripts/clean.js node_modules dist build .turbo",
     "lint": "biome check --write --unsafe --diagnostic-level=error",
-    "test": "vitest run --mode=node",
+    "test": "vitest run --mode=jsdom && vitest run --mode=node",
     "test:watch": "vitest --mode=node",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test:jsdom": "vitest run --mode=jsdom",
+    "test:node": "vitest run --mode=node"
   }
 }

package/src/forms/document-actions.tsx

@@ -26,6 +26,7 @@ import cx from 'clsx'
 
 import styles from './document-actions.module.css'
 import type { PublishedVersionInfo } from './form-renderer'
+import type { ScheduledPublicationState } from './scheduled-publication-state.js'
 
 const DUPLICATE_TITLE_SUFFIX = ' (copy)'
 
@@ -53,6 +54,10 @@ export function DocumentActions({
   onDeleteLocale,
   defaultLocale,
   availableLocales,
+  scheduledPublicationState,
+  onSchedulePublication,
+  onConfirmScheduledPublication,
+  onCancelScheduledPublication,
 }: {
   publishedVersion?: PublishedVersionInfo | null
   onUnpublish?: () => Promise<void>
@@ -118,6 +123,20 @@ export function DocumentActions({
    * minus the default locale and the `'all'` sentinel.
    */
   availableLocales?: string[]
+  /**
+   * Derived presentation state for the document's pending publication
+   * schedule. Decides which of the scheduling menu items appear; omit it (or
+   * pass a `none` state with no capabilities) and the group is hidden
+   * entirely — which is what an ineligible document, a single-status
+   * workflow, or an actor missing either ability all reduce to.
+   */
+  scheduledPublicationState?: ScheduledPublicationState
+  /** Opens the schedule / reschedule modal. Save-gated by the caller. */
+  onSchedulePublication?: () => void
+  /** Re-confirms a suspended schedule against the current version. Save-gated by the caller. */
+  onConfirmScheduledPublication?: () => void | Promise<void>
+  /** Withdraws the pending schedule. Deliberately not save-gated. */
+  onCancelScheduledPublication?: () => void | Promise<void>
 }) {
   const { t } = useTranslation('byline-admin')
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
@@ -151,6 +170,46 @@ export function DocumentActions({
   const [deleteLocaleBusy, setDeleteLocaleBusy] = useState(false)
   const [deleteTargetLocale, setDeleteTargetLocale] = useState<string>('')
 
+  // 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: Array<{ key: string; label: string; onSelect: () => void }> = []
+  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(),
+      })
+    }
+  }
+
   const handleOnDelete = () => {
     setShowDeleteConfirm(false)
     if (onDelete) {
@@ -270,6 +329,20 @@ export function DocumentActions({
                 <DropdownComponent.Separator />
               </>
             )}*/}
+            {schedulingActions.length > 0 && (
+              <>
+                {schedulingActions.map((action) => (
+                  <DropdownComponent.Item 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">{action.label}</button>
+                      </span>
+                    </div>
+                  </DropdownComponent.Item>
+                ))}
+                <DropdownComponent.Separator />
+              </>
+            )}
             {copyToLocaleAvailable && (
               <DropdownComponent.Item onClick={handleOpenCopyToLocale}>
                 <div className={cx('byline-form-actions-item', styles.item)}>

package/src/forms/form-renderer.module.css

@@ -101,6 +101,11 @@
   justify-content: center;
 }
 
+.status-details,
+:global(.byline-form-status-details) {
+  min-width: 0;
+}
+
 .status-meta,
 :global(.byline-form-status-meta) {
   display: flex;
@@ -121,7 +126,16 @@
   .status-meta,
   :global(.byline-form-status-meta) {
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
+    /* Wrapping rather than truncating. Every cell here sets `min-width: 0` so
+       it can ellipsize, which works while the row holds three short facts and
+       fails once a fourth (a scheduled instant with its IANA zone) joins them —
+       the row starts shaving every cell at once, down to "Status: D…". Letting
+       it wrap keeps each fact whole and costs a line only when one is needed.
+       The row gap is explicit because the shared `gap` collapses the line-height
+       override above into an unreadably tight second row. */
+    row-gap: 0.35rem;
   }
 }
 
@@ -135,6 +149,7 @@
 .status-cell,
 :global(.byline-form-status-cell) {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.25rem;
   min-width: 0;

package/src/forms/form-renderer.tsx

@@ -38,6 +38,13 @@ import styles from './form-renderer.module.css'
 import { FormStatusDisplay } from './form-status-display'
 import { useNavigationGuardAdapter } from './navigation-guard'
 import { PathWidget } from './path-widget'
+import {
+  ScheduledPublicationCell,
+  type ScheduledPublicationInfo,
+  ScheduledPublicationNotice,
+  type SchedulePublicationInput,
+  useScheduledPublication,
+} from './scheduled-publication-control'
 import { computeStatusTransitions } from './status-transitions'
 import { TreePlacementWidget } from './tree-placement-widget'
 import { executeUploadsWithProgress } from './upload-executor'
@@ -79,6 +86,10 @@ export interface FormRendererProps {
   onCancel: () => void
   onStatusChange?: (nextStatus: string) => Promise<void>
   onUnpublish?: () => Promise<void>
+  scheduledPublication?: ScheduledPublicationInfo | null
+  onSchedulePublication?: (input: SchedulePublicationInput) => Promise<void>
+  onConfirmScheduledPublication?: () => Promise<void>
+  onCancelScheduledPublication?: () => Promise<void>
   onDelete?: () => Promise<void>
   /**
    * Called when the editor confirms the duplicate modal in
@@ -176,6 +187,10 @@ const FormContent = ({
   onCancel,
   onStatusChange,
   onUnpublish,
+  scheduledPublication,
+  onSchedulePublication,
+  onConfirmScheduledPublication,
+  onCancelScheduledPublication,
   onDelete,
   onDuplicate,
   onCopyToLocale,
@@ -241,6 +256,18 @@ const FormContent = ({
   const [pendingSystemFieldsSubmit, setPendingSystemFieldsSubmit] =
     useState<SystemFieldsSubmitPayload | null>(null)
   const [contentLocale, setContentLocale] = useState(initialLocale ?? defaultLocale)
+
+  // Scheduled publication owns three placements — a status-bar cell, an
+  // escalated notice, and the schedule modal — so its state lives here and the
+  // surfaces are rendered where each belongs.
+  const scheduling = useScheduledPublication({
+    schedule: scheduledPublication ?? null,
+    onSchedule: onSchedulePublication,
+    onConfirm: onConfirmScheduledPublication,
+    onCancel: onCancelScheduledPublication,
+    hasUnsavedChanges: hasChanges,
+    onUnsavedChanges: () => setShowUnsavedModal(true),
+  })
   const { uploadField } = useBylineFieldServices()
 
   // Path-widget wiring. The live preview must use the installation's
@@ -563,12 +590,17 @@ const FormContent = ({
         {headerSlot}
       </div>
       <div className={cx('byline-form-status-bar', styles['status-bar'])}>
-        <FormStatusDisplay
-          initialData={initialData}
-          workflowStatuses={workflowStatuses}
-          publishedVersion={publishedVersion}
-          onUnpublish={onUnpublish}
-        />
+        <div className={cx('byline-form-status-details', styles['status-details'])}>
+          <FormStatusDisplay
+            initialData={initialData}
+            workflowStatuses={workflowStatuses}
+            publishedVersion={publishedVersion}
+            onUnpublish={onUnpublish}
+            afterStatusCells={
+              <ScheduledPublicationCell state={scheduling.state} timeZone={scheduling.timeZone} />
+            }
+          />
+        </div>
         <div className={cx('byline-form-actions', styles.actions)}>
           <Button
             className={cx('byline-form-actions-button', styles['actions-button'])}
@@ -667,9 +699,22 @@ const FormContent = ({
             onDeleteLocale={onDeleteLocale}
             defaultLocale={defaultLocale}
             availableLocales={initialData?._availableVersionLocales as string[] | undefined}
+            scheduledPublicationState={scheduling.state}
+            onSchedulePublication={scheduling.openSchedule}
+            onConfirmScheduledPublication={scheduling.confirm}
+            onCancelScheduledPublication={scheduling.cancel}
           />
         </div>
       </div>
+      <ScheduledPublicationNotice
+        state={scheduling.state}
+        timeZone={scheduling.timeZone}
+        busy={scheduling.busy}
+        onConfirm={scheduling.confirm}
+        onReschedule={scheduling.openSchedule}
+        onCancel={scheduling.cancel}
+      />
+      {scheduling.modal}
       {restoreWarnings && restoreWarnings.length > 0 && (
         <Alert
           className="m-0 mt-4"
@@ -740,36 +785,9 @@ const FormContent = ({
   )
 }
 
-export const FormRenderer = ({
-  mode,
-  fields,
-  onSubmit,
-  onCancel,
-  onStatusChange,
-  onUnpublish,
-  onDelete,
-  onDuplicate,
-  onCopyToLocale,
-  onDeleteLocale,
-  contentLocales,
-  nextStatus,
-  workflowStatuses,
-  publishedVersion,
-  initialData,
-  adminConfig,
-  useAsTitle,
-  useAsPath,
-  advertiseLocales,
-  tree,
-  headingLabel,
-  headerSlot,
-  collectionPath,
-  initialLocale,
-  onLocaleChange,
-  defaultLocale,
-  useNavigationGuard,
-  restoreWarnings,
-}: FormRendererProps) => {
+export const FormRenderer = (props: FormRendererProps) => {
+  const { mode, initialData, initialLocale, collectionPath } = props
+
   // Persists per-tab-set active tab across locale-change remounts of FormContent.
   // useRef so mutations never trigger a re-render of FormRenderer itself.
   const savedTabsRef = useRef<Record<string, string>>({})
@@ -781,35 +799,12 @@ export const FormRenderer = ({
       documentId={mode === 'edit' && typeof initialData?.id === 'string' ? initialData.id : null}
       collectionPath={collectionPath ?? null}
     >
+      {/* Forwarded wholesale. An enumerated prop list here silently dropped
+          every prop added to FormRendererProps but not copied down — which is
+          how the scheduled-publication handlers reached FormContent as
+          `undefined` and the control never rendered. */}
       <FormContent
-        mode={mode}
-        fields={fields}
-        onSubmit={onSubmit}
-        onCancel={onCancel}
-        onStatusChange={onStatusChange}
-        onUnpublish={onUnpublish}
-        onDelete={onDelete}
-        onDuplicate={onDuplicate}
-        onCopyToLocale={onCopyToLocale}
-        onDeleteLocale={onDeleteLocale}
-        contentLocales={contentLocales}
-        nextStatus={nextStatus}
-        workflowStatuses={workflowStatuses}
-        publishedVersion={publishedVersion}
-        initialData={initialData}
-        adminConfig={adminConfig}
-        useAsTitle={useAsTitle}
-        useAsPath={useAsPath}
-        advertiseLocales={advertiseLocales}
-        tree={tree}
-        headingLabel={headingLabel}
-        headerSlot={headerSlot}
-        collectionPath={collectionPath}
-        initialLocale={initialLocale}
-        onLocaleChange={onLocaleChange}
-        defaultLocale={defaultLocale}
-        useNavigationGuard={useNavigationGuard}
-        restoreWarnings={restoreWarnings}
+        {...props}
         _activeTabBySet={savedTabsRef.current}
         _onTabChange={(tabSetName, tabName) => {
           savedTabsRef.current = { ...savedTabsRef.current, [tabSetName]: tabName }

package/src/forms/form-status-display.tsx

@@ -27,11 +27,21 @@ export const FormStatusDisplay = ({
   workflowStatuses,
   publishedVersion,
   onUnpublish,
+  afterStatusCells,
 }: {
   initialData?: Record<string, any>
   workflowStatuses?: WorkflowStatus[]
   publishedVersion?: PublishedVersionInfo | null
   onUnpublish?: () => Promise<void>
+  /**
+   * Rendered inside the status cell, directly after the status value, so it
+   * reads as a continuation of the same sentence: "Status: Draft — Scheduled
+   * for …". Scheduled publication uses this because an armed schedule is a
+   * statement about the document's lifecycle, not a timestamp to file beside
+   * Created. Falls back to standing alone when the workflow is single-status
+   * and no status cell is drawn.
+   */
+  afterStatusCells?: React.ReactNode
 }) => {
   const { t } = useTranslation('byline-admin')
   const statusCode = initialData?.status
@@ -51,8 +61,10 @@ export const FormStatusDisplay = ({
             <span className={cx('byline-form-status-trunc', styles['status-trunc'])}>
               {statusLabel}
             </span>
+            {afterStatusCells}
           </div>
         )}
+        {!showStatusCell && afterStatusCells}
 
         {initialData?.updatedAt != null && (
           <div className={cx('byline-form-status-cell', styles['status-cell'])}>

package/src/forms/path-widget.test.tsx

@@ -8,6 +8,8 @@
 
 import { act } from 'react'
 
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -112,15 +114,25 @@ describe('PathWidget', () => {
   ) => {
     act(() => {
       root.render(
-        <PathWidget
-          useAsPath={props.useAsPath ?? 'title'}
-          collectionPath="pages"
+        // The real English admin bundle rather than a stubbed `t`, so the
+        // assertions below check the strings an editor actually sees. A stub
+        // would let a key be renamed or deleted without the test noticing.
+        <I18nProvider
+          bundle={adminTranslations({ locales: ['en'] })}
+          activeLocale="en"
           defaultLocale="en"
-          activeLocale={props.activeLocale ?? 'en'}
-          mode={props.mode ?? 'create'}
-          slugifier={props.slugifier}
-          sourceLocked={props.sourceLocked}
-        />
+          localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+        >
+          <PathWidget
+            useAsPath={props.useAsPath ?? 'title'}
+            collectionPath="pages"
+            defaultLocale="en"
+            activeLocale={props.activeLocale ?? 'en'}
+            mode={props.mode ?? 'create'}
+            slugifier={props.slugifier}
+            sourceLocked={props.sourceLocked}
+          />
+        </I18nProvider>
       )
     })
   }