@byline/admin 6.0.2 → 6.1.0

package/dist/modules/auth/safe-redirect.test.node.js

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { normalizeRootRelativeRedirect, resolveSignInFormRedirect } from './safe-redirect.js';
+describe('normalizeRootRelativeRedirect', () => {
+    it.each([
+        ['/cms', '/cms'],
+        ['/cms/account?tab=profile#name', '/cms/account?tab=profile#name'],
+    ])('accepts %j', (value, expected) => {
+        expect(normalizeRootRelativeRedirect(value)).toBe(expected);
+    });
+    it.each([
+        '',
+        ' /cms',
+        'https://evil.test',
+        '//evil.test',
+        '/\\evil.test',
+        '/cms\\account',
+        '/cms\naccount',
+        '%2Fcms',
+        '/%2F%2Fevil.test',
+        '/cms/%5cevil.test',
+        '/cms/%2e/account',
+        '/cms/../account',
+        '/cms/./account',
+        '/cms\u0085account',
+    ])('rejects %j', (value) => {
+        expect(normalizeRootRelativeRedirect(value)).toBeUndefined();
+    });
+});
+describe('resolveSignInFormRedirect', () => {
+    it('uses a safe redirectTo without evaluating the fallback', () => {
+        expect(resolveSignInFormRedirect('/cms/account', '/cms')).toBe('/cms/account');
+        expect(resolveSignInFormRedirect('/cms/account', () => {
+            throw new Error('fallback must be lazy');
+        })).toBe('/cms/account');
+    });
+    it('uses the safe configured fallback without permitting an open redirect', () => {
+        expect(resolveSignInFormRedirect('//evil.test', '/cms')).toBe('/cms');
+        expect(resolveSignInFormRedirect(undefined, 'https://evil.test')).toBe('/');
+    });
+});

package/dist/modules/auth/sign-in-form-props.test.node.js

@@ -0,0 +1,7 @@
+import { describe, expectTypeOf, it } from 'vitest';
+describe('SignInFormProps', () => {
+    it('accepts redirectTo and no destination prop', () => {
+        expectTypeOf().toMatchTypeOf();
+        expectTypeOf().toMatchTypeOf();
+    });
+});

package/dist/presentation/group.jsx

@@ -0,0 +1,26 @@
+/**
+ * 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 cx from 'clsx';
+import styles from './group.module.css';
+/**
+ * Labelled fieldset clustering related fields together.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `groups`
+ * primitive. Renders a bordered, padded `<fieldset>` with an optional
+ * `<legend>` for the label.
+ *
+ * Stable override handles: `.byline-admin-group` on the fieldset and
+ * `.byline-admin-group-legend` on the legend (alongside the hashed
+ * CSS-modules locals).
+ */
+export const AdminGroup = ({ label, children, className }) => {
+    return (<fieldset className={cx('byline-admin-group', styles.group, className)}>
+      {label && <legend className={cx('byline-admin-group-legend', styles.legend)}>{label}</legend>}
+      {children}
+    </fieldset>);
+};

package/dist/presentation/row.jsx

@@ -0,0 +1,23 @@
+/**
+ * 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 cx from 'clsx';
+import styles from './row.module.css';
+/**
+ * Horizontal flex-row layout for admin form fields.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `rows`
+ * primitive. Members are rendered side-by-side above the `sm` breakpoint
+ * and stack vertically below it. `flex-1` + `min-width: 0` lets two text
+ * inputs share the row evenly without overflowing.
+ *
+ * The element carries `.byline-admin-row` as a stable global class for
+ * host overrides (alongside the hashed CSS-modules local).
+ */
+export const AdminRow = ({ children, className }) => {
+    return <div className={cx('byline-admin-row', styles.row, className)}>{children}</div>;
+};

package/dist/presentation/tabs.jsx

@@ -0,0 +1,39 @@
+'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 { useTranslation } from '@byline/i18n/react';
+import { Badge } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './tabs.module.css';
+/**
+ * Tabs navigation bar for admin form layouts.
+ *
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
+ * Each tab is a simple button with a bottom-border active indicator.
+ * Inactive tabs show a subtle hover state. Fully dark-mode aware.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
+ * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
+ * `.byline-admin-tab-badge`.
+ */
+export const AdminTabs = ({ tabs, activeTab, onChange, errorCounts, className, }) => {
+    const { t } = useTranslation('byline-admin');
+    return (<div role="tablist" aria-label={t('presentation.formTabsAriaLabel')} className={cx('byline-admin-tabs', styles.tabs, className)}>
+      {tabs.map((tab) => {
+            const isActive = tab.name === activeTab;
+            return (<button key={tab.name} type="button" role="tab" aria-selected={isActive} onClick={() => onChange(tab.name)} className={cx('byline-admin-tab', styles.tab, isActive && ['byline-admin-tab-active', styles['tab-active']])}>
+            <span className={cx('byline-admin-tab-label', styles.label)}>
+              {tab.label}
+              {(errorCounts?.[tab.name] ?? 0) > 0 && (<Badge intent="danger" className={cx('byline-admin-tab-badge', styles.badge)}>
+                  {errorCounts?.[tab.name]}
+                </Badge>)}
+            </span>
+          </button>);
+        })}
+    </div>);
+};

package/dist/services/admin-services-context.jsx

@@ -0,0 +1,17 @@
+/**
+ * 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 { createContext, useContext } from 'react';
+const AdminServicesContext = createContext(null);
+export const BylineAdminServicesProvider = ({ services, children, }) => (<AdminServicesContext.Provider value={services}>{children}</AdminServicesContext.Provider>);
+export const useBylineAdminServices = () => {
+    const ctx = useContext(AdminServicesContext);
+    if (!ctx) {
+        throw new Error('@byline/admin: BylineAdminServicesProvider missing. Wrap your admin tree with <BylineAdminServicesProvider services={…} />.');
+    }
+    return ctx;
+};

package/dist/widgets/diff-viewer/diff-modal.jsx

@@ -0,0 +1,110 @@
+'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 { useEffect, useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { CloseIcon, IconButton, LoaderRing, Modal } from '@byline/ui/react';
+import cx from 'clsx';
+import ReactDiffViewer, { DiffMethod } from 'react-diff-viewer-continued';
+import styles from './diff-modal.module.css';
+// Keys that are per-version metadata rather than content — strip before diffing
+// so the diff focuses on meaningful content changes. ClientDocument-shape
+// metadata keys after the Phase 7 admin migration.
+const STRIP_KEYS = new Set([
+    'id',
+    'versionId',
+    'path',
+    'status',
+    'createdAt',
+    'updatedAt',
+    'hasPublishedVersion',
+    '_publishedVersion',
+]);
+function stripMeta(doc) {
+    // With the nested document shape, extract just the fields for diffing.
+    if (doc.fields && typeof doc.fields === 'object') {
+        return doc.fields;
+    }
+    return Object.fromEntries(Object.entries(doc).filter(([k]) => !STRIP_KEYS.has(k)));
+}
+export function DiffModal({ isOpen, onDismiss, collection, documentId, versionId, versionLabel, currentDocument, locale, loadHistoricalVersion, }) {
+    const { t } = useTranslation('byline-admin');
+    const [historicalDoc, setHistoricalDoc] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!isOpen || !versionId)
+            return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setHistoricalDoc(null);
+        loadHistoricalVersion(collection, documentId, versionId, locale)
+            .then((doc) => {
+            if (cancelled)
+                return;
+            setHistoricalDoc(doc);
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            setError(err instanceof Error ? err.message : t('diffModal.loadFailed'));
+        })
+            .finally(() => {
+            if (!cancelled)
+                setLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [isOpen, collection, documentId, versionId, locale, loadHistoricalVersion, t]);
+    const currentStr = currentDocument ? JSON.stringify(stripMeta(currentDocument), null, 2) : '';
+    const historicalStr = historicalDoc ? JSON.stringify(stripMeta(historicalDoc), null, 2) : '';
+    return (<Modal isOpen={isOpen} closeOnOverlayClick={true} onDismiss={onDismiss}>
+      <Modal.Container style={{
+            width: '96vw',
+            maxWidth: '96vw',
+            height: '90vh',
+            maxHeight: '90vh',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }}>
+        <Modal.Header className={cx('byline-diff-modal-header', styles.header)}>
+          <div className={cx('byline-diff-modal-title-stack', styles['title-stack'])}>
+            <h3 className={cx('byline-diff-modal-title', styles.title)}>{t('diffModal.title')}</h3>
+            <p className={cx('byline-diff-modal-subtitle', styles.subtitle)}>
+              {t('diffModal.subtitleBefore')}{' '}
+              <span className={cx('byline-diff-modal-version', styles.version)}>
+                {versionLabel}
+              </span>{' '}
+              {t('diffModal.subtitleAfter')}
+            </p>
+          </div>
+          <IconButton onClick={onDismiss} size="xs" aria-label={t('diffModal.closeAriaLabel')}>
+            <CloseIcon width="15px" height="15px"/>
+          </IconButton>
+        </Modal.Header>
+
+        <Modal.Content className={cx('byline-diff-modal-content', styles.content)} style={{ minHeight: 0 }}>
+          {loading && (<div className={cx('byline-diff-modal-state', styles.state)}>
+              <LoaderRing size={28} color="#666666"/>
+              <span>{t('diffModal.loading')}</span>
+            </div>)}
+
+          {error && (<div className={cx('byline-diff-modal-state', 'byline-diff-modal-error', styles.state, styles.error)}>
+              {error}
+            </div>)}
+
+          {!loading && !error && historicalDoc && (<div className={cx('byline-diff-modal-viewer', styles.viewer)}>
+              <ReactDiffViewer oldValue={historicalStr} newValue={currentStr} splitView={true} compareMethod={DiffMethod.LINES} useDarkTheme={true} leftTitle={versionLabel} rightTitle={t('diffModal.currentVersion')} hideLineNumbers={false}/>
+            </div>)}
+        </Modal.Content>
+      </Modal.Container>
+    </Modal>);
+}

package/dist/widgets/source-locale-badge/source-locale-badge.jsx

@@ -0,0 +1,28 @@
+/**
+ * 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 { Badge } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './source-locale-badge.module.css';
+/**
+ * Small neutral badge indicating a document's content **source locale** — the
+ * locale it was authored in (its anchor: fallback floor, path locale,
+ * completeness yardstick). Rendered next to the document title in the edit and
+ * list views. Mirrors the localized-field {@link LocaleBadge} in spirit but uses
+ * the shared {@link Badge} with the `noeffect` (neutral) intent.
+ *
+ * NOTE: currently rendered for *every* document so the anchor is visible during
+ * development. The intended end state is to show it only when `locale` differs
+ * from the system's current default content locale (a normal single-default
+ * install then shows nothing). See docs/08-internationalization/index.md.
+ *
+ * Stable override handle: `.byline-source-locale-badge`.
+ */
+export const SourceLocaleBadge = ({ locale, className }) => (<Badge intent="noeffect" render={<span />} title={`Primary content language: ${locale.toUpperCase()}`} className={cx('byline-source-locale-badge', styles.badge, className)}>
+    {locale.toUpperCase()}
+  </Badge>);
+SourceLocaleBadge.displayName = 'SourceLocaleBadge';

package/dist/widgets/status-badge/status-badge.jsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { WORKFLOW_STATUS_ARCHIVED, WORKFLOW_STATUS_DRAFT, WORKFLOW_STATUS_PUBLISHED, } from '@byline/core';
+import { useTranslation } from '@byline/i18n/react';
+import { Badge } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './status-badge.module.css';
+function statusIntent(status) {
+    switch (status) {
+        case WORKFLOW_STATUS_PUBLISHED:
+            return 'success';
+        case WORKFLOW_STATUS_DRAFT:
+            return 'warning';
+        case WORKFLOW_STATUS_ARCHIVED:
+            return 'info';
+        default:
+            return 'noeffect';
+    }
+}
+/**
+ * Compact badge for workflow status values. Maps the three built-in
+ * statuses (draft, published, archived) to semantic intents and falls
+ * back to `noeffect` for any custom workflow statuses.
+ *
+ * When `hasPublishedVersion` is true and the current status is not
+ * `published`, a small green dot is rendered before the badge to
+ * indicate that a published version is live.
+ *
+ * Stable override handles: `.byline-status-badge-wrap`,
+ * `.byline-status-badge-dot`, `.byline-status-badge`.
+ */
+export const StatusBadge = ({ status, workflowStatuses, hasPublishedVersion, }) => {
+    const { t } = useTranslation('byline-admin');
+    const label = workflowStatuses.find((s) => s.name === status)?.label ?? String(status ?? '');
+    return (<span className={cx('byline-status-badge-wrap', styles.wrap)}>
+      {hasPublishedVersion === true && status !== 'published' && (<span title={t('statusBadge.publishedVersionLive')} className={cx('byline-status-badge-dot', styles.dot)}/>)}
+      <Badge intent={statusIntent(status)} className={cx('byline-status-badge', styles.badge)}>
+        {label}
+      </Badge>
+    </span>);
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/admin",
   "private": false,
   "license": "MPL-2.0",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -183,12 +183,12 @@
     "react-diff-viewer-continued": "^4.4.0",
     "uuid": "^14.0.2",
     "zod": "^4.6.2",
-    "@byline/analytics": "6.0.2",
-    "@byline/auth": "6.0.2",
-    "@byline/analytics-agent": "6.0.2",
-    "@byline/core": "6.0.2",
-    "@byline/ui": "6.0.2",
-    "@byline/i18n": "6.0.2"
+    "@byline/analytics": "6.1.0",
+    "@byline/analytics-agent": "6.1.0",
+    "@byline/core": "6.1.0",
+    "@byline/auth": "6.1.0",
+    "@byline/i18n": "6.1.0",
+    "@byline/ui": "6.1.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-renderer-capabilities.test.tsx

@@ -46,8 +46,8 @@ vi.mock('@byline/ui/react', async (importOriginal) => {
       Separator: () => <hr />,
     },
     Modal,
-    Input: ({ name, value, onChange }: any) => (
-      <input name={name} value={value ?? ''} onChange={onChange} />
+    Input: ({ name, value, onChange, readOnly }: any) => (
+      <input name={name} value={value ?? ''} onChange={onChange} readOnly={readOnly ?? false} />
     ),
   }
 })
@@ -130,6 +130,76 @@ describe('FormRenderer capabilities', () => {
     expect(input?.value).toBe('about-us')
   })
 
+  it('forwards adminConfig.lockPath to the path widget', () => {
+    render({ ...baseProps, adminConfig: { slug: 'pages', lockPath: true } })
+
+    const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
+    expect(input?.readOnly).toBe(true)
+    expect(input?.value).toBe('about-us')
+  })
+
+  it('leaves the path widget editable when no lockPath is declared', () => {
+    render({ ...baseProps, adminConfig: { slug: 'pages' } })
+
+    const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
+    expect(input?.readOnly).toBe(false)
+  })
+
+  it('keeps a counter source suppressing Regenerate without locking the input', () => {
+    // `sourceLocked` and `lockPath` stay independent: a counter-sourced path
+    // still has no derivable preview, but remains editable unless declared.
+    // The source needs a real value whose slug ('448') differs from the
+    // stored path ('about-us'), or Regenerate would be absent anyway and the
+    // assertion would hold even if `sourceLocked` forwarding broke.
+    render({
+      ...baseProps,
+      fields: [{ name: 'ref', label: 'Ref', type: 'counter' as const }],
+      useAsPath: 'ref',
+      initialData: { id: 'doc-1', path: 'about-us', fields: { ref: 448 } },
+      adminConfig: { slug: 'pages' },
+    })
+
+    const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
+    expect(input?.readOnly).toBe(false)
+    expect(container.querySelector('.byline-form-path-regenerate')).toBeNull()
+  })
+
+  it('renders the locked widget on create with no useAsPath and no stored path', () => {
+    // A collection whose paths come from an external system declares no
+    // `useAsPath` and has nothing stored yet — the case the old render gate
+    // hid outright.
+    render({
+      ...baseProps,
+      mode: 'create' as const,
+      useAsPath: undefined,
+      initialData: { fields: {} },
+      adminConfig: { slug: 'pages', lockPath: true },
+    })
+
+    expect(container.querySelector('.byline-form-path')).not.toBeNull()
+    const input = container.querySelector<HTMLInputElement>('input[name="__systemPath__"]')
+    expect(input?.readOnly).toBe(true)
+    expect(input?.value).toBe('')
+  })
+
+  it('keeps the widget hidden on create without useAsPath when unlocked', () => {
+    render({
+      ...baseProps,
+      mode: 'create' as const,
+      useAsPath: undefined,
+      initialData: { fields: {} },
+      adminConfig: { slug: 'pages' },
+    })
+
+    expect(container.querySelector('.byline-form-path')).toBeNull()
+  })
+
+  it('lets showPath: false override lockPath', () => {
+    render({ ...baseProps, showPath: false, adminConfig: { slug: 'pages', lockPath: true } })
+
+    expect(container.querySelector('.byline-form-path')).toBeNull()
+  })
+
   it('suppresses the path widget when showPath is false', () => {
     render({ ...baseProps, showPath: false })
     expect(container.querySelector('.byline-form-path')).toBeNull()

package/src/forms/form-renderer.tsx

@@ -11,8 +11,8 @@
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import type {
+  AdminResourceConfig,
   Field,
-  FormAdminConfig,
   GroupDefinition,
   RowDefinition,
   TabSetDefinition,
@@ -133,7 +133,13 @@ export interface FormRendererProps {
   workflowStatuses?: WorkflowStatus[]
   publishedVersion?: PublishedVersionInfo | null
   initialData?: Record<string, any>
-  adminConfig?: FormAdminConfig
+  /**
+   * Presentation configuration for the resource being edited — a collection
+   * or a singleton. Typed as the union rather than the shared
+   * `FormAdminConfig` base so the renderer can read collection-only members
+   * such as `lockPath`.
+   */
+  adminConfig?: AdminResourceConfig
   /**
    * Name of the schema field to render as the live form heading.
    * Sourced from `CollectionDefinition.useAsTitle` by the caller.
@@ -952,8 +958,13 @@ const FormContent = ({
               {layout.main.map((name) => renderItem(name))}
             </div>
             <div className={cx('byline-form-sidebar', styles.sidebar)}>
+              {/* A locked collection's widget renders even with no `useAsPath`
+                  and nothing stored yet: its path is managed, and the editor
+                  needs to see that. `showPath: false` still wins — it marks a
+                  path that must never be presented at all. */}
               {showPath &&
                 (useAsPath ||
+                  adminConfig?.lockPath === true ||
                   (typeof initialData?.path === 'string' && initialData.path.length > 0)) && (
                   <PathWidget
                     disabled={mutationsBlocked || discarding}
@@ -964,6 +975,7 @@ const FormContent = ({
                     mode={mode}
                     slugifier={pathSlugifier}
                     sourceLocked={pathSourceLocked}
+                    lockPath={adminConfig?.lockPath}
                   />
                 )}
               {tree && mode === 'edit' && typeof initialData?.id === 'string' && (

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

@@ -110,6 +110,7 @@ describe('PathWidget', () => {
       activeLocale: string
       slugifier: (value: string, ctx: { locale: string; collectionPath: string }) => string
       sourceLocked: boolean
+      lockPath: boolean
     }> = {}
   ) => {
     act(() => {
@@ -124,13 +125,14 @@ describe('PathWidget', () => {
           localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
         >
           <PathWidget
-            useAsPath={props.useAsPath ?? 'title'}
+            useAsPath={'useAsPath' in props ? props.useAsPath : 'title'}
             collectionPath="pages"
             defaultLocale="en"
             activeLocale={props.activeLocale ?? 'en'}
             mode={props.mode ?? 'create'}
             slugifier={props.slugifier}
             sourceLocked={props.sourceLocked}
+            lockPath={props.lockPath}
           />
         </I18nProvider>
       )
@@ -228,7 +230,7 @@ describe('PathWidget', () => {
   })
 
   it('does not render the Regenerate button when there is no useAsPath', () => {
-    setFixture({ systemPath: 'whatever', sourceValue: '' })
+    setFixture({ systemPath: 'whatever', sourceValue: 'Hello World' })
     render({ mode: 'edit', useAsPath: undefined })
     expect(container.querySelector('button')).toBeNull()
   })
@@ -245,6 +247,27 @@ describe('PathWidget', () => {
     expect(input.getAttribute('placeholder')).toBe('Will be saved as "0000001"')
   })
 
+  it('shows the translation-locale hint when editing a translation unlocked', () => {
+    setFixture({ systemPath: 'my-path', sourceValue: 'My Path' })
+    render({ mode: 'edit', activeLocale: 'fr' })
+
+    const input = getInput()
+    expect(input.readOnly).toBe(true)
+    expect(container.querySelector('[data-testid="help-text"]')?.textContent).toBe(
+      'Path is set in the default locale ("en") and applies across translations.'
+    )
+  })
+
+  it('shows the suggested-slug hint for an un-slugified stored value', () => {
+    setFixture({ systemPath: 'Not A Slug', sourceValue: 'My Path' })
+    render({ mode: 'edit' })
+
+    expect(getInput().readOnly).toBe(false)
+    expect(container.querySelector('[data-testid="help-text"]')?.textContent).toBe(
+      'Suggested: "not-a-slug"'
+    )
+  })
+
   it('suppresses the create-mode placeholder preview when the source is locked', () => {
     setFixture({ systemPath: null, sourceValue: 1 })
     render({ mode: 'create', sourceLocked: true })
@@ -259,4 +282,75 @@ describe('PathWidget', () => {
     render({ mode: 'edit', sourceLocked: true })
     expect(container.querySelector('button')).toBeNull()
   })
+
+  it('renders read-only and empty when creating in a locked collection', () => {
+    setFixture({ systemPath: null, sourceValue: 'Hello World' })
+    render({ mode: 'create', lockPath: true })
+
+    const input = getInput()
+    expect(input.readOnly).toBe(true)
+    expect(input.value).toBe('')
+    expect(input.getAttribute('placeholder')).toBeNull()
+    expect(container.querySelector('button')).toBeNull()
+    expect(container.querySelector('[data-testid="help-text"]')?.textContent).toBe(
+      'Assigned automatically when this document is saved.'
+    )
+  })
+
+  it('renders read-only and shows the stored path when editing a locked collection', () => {
+    setFixture({ systemPath: 'catalogue-item', sourceValue: 'Hello World' })
+    render({ mode: 'edit', lockPath: true })
+
+    const input = getInput()
+    expect(input.readOnly).toBe(true)
+    expect(input.value).toBe('catalogue-item')
+    // The stored path differs from what the source would derive, so an
+    // unlocked widget would offer Regenerate here.
+    expect(container.querySelector('button')).toBeNull()
+    expect(container.querySelector('[data-testid="help-text"]')?.textContent).toBe(
+      'This path is managed and cannot be edited here.'
+    )
+  })
+
+  it('prefers the locked hint over the translation-locale hint', () => {
+    setFixture({ systemPath: 'catalogue-item', sourceValue: 'Hello World' })
+    render({ mode: 'edit', lockPath: true, activeLocale: 'fr' })
+
+    expect(getInput().readOnly).toBe(true)
+    expect(container.querySelector('[data-testid="help-text"]')?.textContent).toBe(
+      'This path is managed and cannot be edited here.'
+    )
+  })
+
+  it('ignores a change event while locked — the lock is not merely visual', () => {
+    setFixture({ systemPath: 'catalogue-item', sourceValue: 'Hello World' })
+    render({ mode: 'edit', lockPath: true })
+
+    // Drive the input through the native prototype setter, exactly as the
+    // two typing tests above do. A direct `input.value = …` updates React's
+    // value tracker, which then suppresses onChange on its own — the
+    // assertion below would pass whether or not the guard exists.
+    const input = getInput()
+    act(() => {
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      )?.set
+      setter?.call(input, 'typed-over')
+      input.dispatchEvent(new Event('input', { bubbles: true }))
+    })
+
+    expect(fixture.setSystemPath).not.toHaveBeenCalled()
+  })
+
+  it('leaves a counter-sourced collection editable when lockPath is not set', () => {
+    // The explicit guard against reintroducing inference: a locked *source*
+    // suppresses the preview and Regenerate, but never the input itself.
+    setFixture({ systemPath: '0000448', sourceValue: 448 })
+    render({ mode: 'edit', sourceLocked: true })
+
+    const input = getInput()
+    expect(input.readOnly).toBe(false)
+    expect(container.querySelector('button')).toBeNull()
+  })
 })