@byline/admin 4.14.1 → 4.16.0

package/dist/modules/analytics/components/timeseries_module.css

@@ -0,0 +1,126 @@
+.root-L2qL4D {
+  border-radius: .25rem;
+  flex-direction: column;
+  gap: .5rem;
+  display: flex;
+}
+
+.root-L2qL4D:focus-visible {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 4px;
+}
+
+:is(.chart-giYTrx, .byline-analytics-chart) {
+  width: 100%;
+  height: 11rem;
+  display: block;
+}
+
+.gridline-R_wAwP {
+  stroke: var(--gray-200);
+  stroke-width: 1px;
+}
+
+.column-_Cw2Ua {
+  transition: opacity .12s;
+}
+
+.views-WHbm44 {
+  fill: #38bdf8;
+  opacity: .38;
+  transition: opacity .12s;
+}
+
+.columnActive-CwHwbo .views-WHbm44 {
+  opacity: .62;
+}
+
+.visitors-n6IL4B {
+  fill: #7c3aed;
+  opacity: .95;
+}
+
+.hit-ZxDHvk {
+  fill: #0000;
+  cursor: crosshair;
+}
+
+:is(.axis-fBshTw, .byline-analytics-axis) {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: .04em;
+  color: var(--gray-500);
+  justify-content: space-between;
+  font-size: .6875rem;
+  display: flex;
+}
+
+:is(.readout-L9jEpz, .byline-analytics-readout) {
+  font-variant-numeric: tabular-nums;
+  min-height: 1.25rem;
+  color: var(--gray-500);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .35rem .75rem;
+  margin: 0;
+  font-size: .75rem;
+  display: flex;
+}
+
+.readout-L9jEpz strong {
+  color: inherit;
+  font-weight: 600;
+}
+
+.swatchViews-OCeKNe, .swatchVisitors-O3BWz6, .swatchDownloads-SVo9mN {
+  border-radius: 1px;
+  width: .5rem;
+  height: .5rem;
+  margin-inline: .4rem -.4rem;
+  display: inline-block;
+}
+
+.swatchViews-OCeKNe {
+  opacity: .55;
+  background-color: #38bdf8;
+}
+
+.swatchVisitors-O3BWz6 {
+  background-color: #7c3aed;
+}
+
+.swatchDownloads-SVo9mN {
+  background-color: #10b981;
+}
+
+:is([data-theme="dark"], .dark) .gridline-R_wAwP {
+  stroke: var(--gray-700);
+}
+
+:is(:is([data-theme="dark"], .dark) .axis-fBshTw, :is([data-theme="dark"], .dark) .byline-analytics-axis, :is([data-theme="dark"], .dark) .readout-L9jEpz, :is([data-theme="dark"], .dark) .byline-analytics-readout) {
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], .dark) .visitors-n6IL4B {
+  fill: #a78bfa;
+}
+
+:is([data-theme="dark"], .dark) .swatchVisitors-O3BWz6 {
+  background-color: #a78bfa;
+}
+
+:is([data-theme="dark"], .dark) .swatchDownloads-SVo9mN {
+  background-color: #34d399;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .column-_Cw2Ua, .views-WHbm44 {
+    transition: none;
+  }
+}
+
+@media (max-width: 720px) {
+  :is(.chart-giYTrx, .byline-analytics-chart) {
+    height: 9rem;
+  }
+}
+

package/dist/modules/analytics/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { ANALYTICS_ABILITIES, type AnalyticsAbilityKey, registerAnalyticsAbilities, } from './abilities.js';
+export type { AnalyticsDashboardData, AnalyticsDashboardPeriod } from './types.js';

package/dist/modules/analytics/index.js

@@ -0,0 +1 @@
+export { ANALYTICS_ABILITIES, registerAnalyticsAbilities } from "./abilities.js";

package/dist/modules/analytics/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 type { AnalyticsCountryTotal, AnalyticsDateRange, AnalyticsPathTotal, AnalyticsRankedTotals, AnalyticsReferrerTotal, AnalyticsReportCoverage, AnalyticsSummary } from '@byline/analytics';
+import type { AnalyticsDashboardPeriod as PortableAnalyticsDashboardPeriod } from '@byline/analytics/config';
+export type AnalyticsDashboardPeriod = PortableAnalyticsDashboardPeriod;
+export interface AnalyticsDashboardData {
+    range: AnalyticsDateRange;
+    coverage: AnalyticsReportCoverage;
+    summary: AnalyticsSummary;
+    pages: AnalyticsRankedTotals<AnalyticsPathTotal>;
+    downloads: AnalyticsRankedTotals<AnalyticsPathTotal>;
+    referrers: AnalyticsRankedTotals<AnalyticsReferrerTotal>;
+    /** Countries are unbounded by a top-N limit, so there is nothing to truncate. */
+    countries: AnalyticsCountryTotal[];
+}

package/dist/modules/analytics/types.js

@@ -0,0 +1 @@
+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.16.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -77,6 +77,16 @@
       "import": "./dist/modules/admin-preferences/index.js",
       "require": "./dist/modules/admin-preferences/index.js"
     },
+    "./analytics": {
+      "types": "./dist/modules/analytics/index.d.ts",
+      "import": "./dist/modules/analytics/index.js",
+      "require": "./dist/modules/analytics/index.js"
+    },
+    "./analytics/components/dashboard": {
+      "types": "./dist/modules/analytics/components/dashboard.d.ts",
+      "import": "./dist/modules/analytics/components/dashboard.js",
+      "require": "./dist/modules/analytics/components/dashboard.js"
+    },
     "./services": {
       "types": "./dist/services/admin-services-context.d.ts",
       "import": "./dist/services/admin-services-context.js",
@@ -173,10 +183,12 @@
     "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/analytics": "4.16.0",
+    "@byline/i18n": "4.16.0",
+    "@byline/core": "4.16.0",
+    "@byline/ui": "4.16.0",
+    "@byline/auth": "4.16.0",
+    "@byline/analytics-agent": "4.16.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -189,6 +201,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 +221,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/abilities.ts

@@ -12,6 +12,7 @@ import { registerAdminActivityAbilities } from './modules/admin-activity/abiliti
 import { registerAdminPermissionsAbilities } from './modules/admin-permissions/abilities.js'
 import { registerAdminRolesAbilities } from './modules/admin-roles/abilities.js'
 import { registerAdminUsersAbilities } from './modules/admin-users/abilities.js'
+import { registerAnalyticsAbilities } from './modules/analytics/abilities.js'
 
 /**
  * Register every ability contributed by the admin subsystem.
@@ -30,5 +31,6 @@ export function registerAdminAbilities(registry: AbilityRegistry): void {
   registerAdminRolesAbilities(registry)
   registerAdminPermissionsAbilities(registry)
   registerAdminActivityAbilities(registry)
+  registerAnalyticsAbilities(registry)
   // registerAccountAbilities(registry) — added when that module lands
 }

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>
       )
     })
   }