@byline/ui 1.7.7 → 1.8.1

package/dist/forms/form-renderer.js

@@ -487,6 +487,7 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                                 useAsPath: useAsPath,
                                 collectionPath: collectionPath ?? '',
                                 defaultLocale: defaultLocale,
+                                activeLocale: contentLocale,
                                 mode: mode
                             }),
                             (layout.sidebar ?? []).map((name)=>renderItem(name))

package/dist/forms/path-widget.d.ts

@@ -5,6 +5,15 @@ export interface PathWidgetProps {
     collectionPath: string;
     /** Default content locale, forwarded to the slugifier as context. */
     defaultLocale: string;
+    /**
+     * The locale currently being edited in the form. When this differs
+     * from `defaultLocale` (i.e. the editor is editing a translation),
+     * the widget renders read-only — phase 1 paths are default-locale
+     * territory, and the lifecycle drops translation-locale path changes
+     * with a warn. Locking the input prevents the warn path being hit
+     * through the admin form and gives editors a clear cue.
+     */
+    activeLocale: string;
     /** `'create'` shows the live derived preview as placeholder text. */
     mode: 'create' | 'edit';
 }
@@ -22,4 +31,4 @@ export interface PathWidgetProps {
  * Stable override handles: `.byline-form-path`, `.byline-form-path-header`,
  * `.byline-form-path-regenerate`.
  */
-export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, mode }: PathWidgetProps) => import("react").JSX.Element;
+export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, }: PathWidgetProps) => import("react").JSX.Element;

package/dist/forms/path-widget.js

@@ -11,10 +11,11 @@ function coerceToString(value) {
     if (value instanceof Date) return value.toISOString();
     return String(value);
 }
-const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
+const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode })=>{
     const { setSystemPath } = useFormContext();
     const systemPath = useSystemPath();
     const sourceValue = useFieldValue(useAsPath ?? '');
+    const isReadOnly = activeLocale !== defaultLocale;
     const livePreview = useMemo(()=>{
         if (!useAsPath) return '';
         const asString = coerceToString(sourceValue);
@@ -52,13 +53,16 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
         defaultLocale,
         collectionPath
     ]);
-    const hint = inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : void 0;
-    const placeholder = 'create' === mode && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : void 0;
+    const validationHint = inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : void 0;
+    const readOnlyHint = isReadOnly ? `Path is set in the default locale ("${defaultLocale}") and applies across translations.` : void 0;
+    const hint = readOnlyHint ?? validationHint;
+    const placeholder = !isReadOnly && 'create' === mode && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : void 0;
     const srDescription = [
         'System-managed URL path for this document.',
         placeholder,
         hint
     ].filter(Boolean).join(' ');
+    const showRegenerate = !isReadOnly && useAsPath && livePreview.length > 0 && livePreview !== systemPath;
     return /*#__PURE__*/ jsxs("div", {
         className: "byline-form-path",
         children: [
@@ -70,7 +74,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
                         htmlFor: "system-path",
                         label: "Path"
                     }),
-                    useAsPath && livePreview.length > 0 && livePreview !== systemPath && /*#__PURE__*/ jsxs("button", {
+                    showRegenerate && /*#__PURE__*/ jsxs("button", {
                         type: "button",
                         onClick: handleRegenerate,
                         className: classnames('byline-form-path-regenerate', path_widget_module.regenerate),
@@ -89,6 +93,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode })=>{
                 placeholder: placeholder,
                 onChange: (e)=>handleChange(e.target.value),
                 helpText: hint,
+                readOnly: isReadOnly,
                 "aria-describedby": "system-path-description"
             }),
             /*#__PURE__*/ jsx("span", {

package/dist/styles/styles.css

@@ -1595,3 +1595,7 @@
   visibility: visible;
   transform: matrix(1, 0, 0, 1, 0, 0);
 }
+
+.byline-ui {
+  isolation: isolate;
+}

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "1.7.7",
+  "version": "1.8.1",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -65,9 +65,9 @@
     "react-diff-viewer-continued": "^4.2.2",
     "zod": "^4.4.2",
     "zod-form-data": "^3.0.1",
-    "@byline/admin": "1.7.7",
-    "@byline/core": "1.7.7",
-    "@byline/client": "1.7.7"
+    "@byline/client": "1.8.1",
+    "@byline/core": "1.8.1",
+    "@byline/admin": "1.8.1"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/forms/form-renderer.tsx

@@ -721,6 +721,7 @@ const FormContent = ({
                 useAsPath={useAsPath}
                 collectionPath={collectionPath ?? ''}
                 defaultLocale={defaultLocale}
+                activeLocale={contentLocale}
                 mode={mode}
               />
             )}

package/src/forms/path-widget.tsx

@@ -35,6 +35,15 @@ export interface PathWidgetProps {
   collectionPath: string
   /** Default content locale, forwarded to the slugifier as context. */
   defaultLocale: string
+  /**
+   * The locale currently being edited in the form. When this differs
+   * from `defaultLocale` (i.e. the editor is editing a translation),
+   * the widget renders read-only — phase 1 paths are default-locale
+   * territory, and the lifecycle drops translation-locale path changes
+   * with a warn. Locking the input prevents the warn path being hit
+   * through the admin form and gives editors a clear cue.
+   */
+  activeLocale: string
   /** `'create'` shows the live derived preview as placeholder text. */
   mode: 'create' | 'edit'
 }
@@ -53,11 +62,23 @@ export interface PathWidgetProps {
  * Stable override handles: `.byline-form-path`, `.byline-form-path-header`,
  * `.byline-form-path-regenerate`.
  */
-export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: PathWidgetProps) => {
+export const PathWidget = ({
+  useAsPath,
+  collectionPath,
+  defaultLocale,
+  activeLocale,
+  mode,
+}: PathWidgetProps) => {
   const { setSystemPath } = useFormContext()
   const systemPath = useSystemPath()
   const sourceValue = useFieldValue<unknown>(useAsPath ?? '')
 
+  // Phase 1: paths are written/edited only under the default content
+  // locale. When editing a translation, the widget locks down — the
+  // input is read-only, the Regenerate action is suppressed, and a
+  // helpText line explains why.
+  const isReadOnly = activeLocale !== defaultLocale
+
   // Live preview — what the server would derive from the current source
   // field value if no override were set. Used as placeholder in create
   // mode and as the target of the "Regenerate" action.
@@ -93,26 +114,40 @@ export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: P
     return slugify(inputValue, { locale: defaultLocale, collectionPath })
   }, [inputValue, defaultLocale, collectionPath])
 
-  const hint =
+  const validationHint =
     inputValue.length > 0 && formatted !== inputValue ? `Suggested: "${formatted}"` : undefined
 
+  // When read-only, replace the live validation hint with a fixed
+  // explanatory line so editors understand why the field is locked.
+  const readOnlyHint = isReadOnly
+    ? `Path is set in the default locale ("${defaultLocale}") and applies across translations.`
+    : undefined
+
+  const hint = readOnlyHint ?? validationHint
+
   const placeholder =
-    mode === 'create' && livePreview.length > 0 ? `Will be saved as "${livePreview}"` : undefined
+    !isReadOnly && mode === 'create' && livePreview.length > 0
+      ? `Will be saved as "${livePreview}"`
+      : undefined
 
   // Screen-reader description. The input's base purpose ("System-managed
   // URL path") plus whichever of the visible hints (placeholder preview
-  // in create mode, "Suggested" validation hint) currently applies. The
-  // visible helpText/placeholder cover sighted users; this element makes
-  // the same information addressable via aria-describedby for AT.
+  // in create mode, "Suggested" validation hint, or read-only explainer)
+  // currently applies. The visible helpText/placeholder cover sighted
+  // users; this element makes the same information addressable via
+  // aria-describedby for AT.
   const srDescription = ['System-managed URL path for this document.', placeholder, hint]
     .filter(Boolean)
     .join(' ')
 
+  const showRegenerate =
+    !isReadOnly && useAsPath && livePreview.length > 0 && livePreview !== systemPath
+
   return (
     <div className="byline-form-path">
       <div className={cx('byline-form-path-header', styles.header)}>
         <Label id="system-path-label" htmlFor="system-path" label="Path" />
-        {useAsPath && livePreview.length > 0 && livePreview !== systemPath && (
+        {showRegenerate && (
           <button
             type="button"
             onClick={handleRegenerate}
@@ -130,6 +165,7 @@ export const PathWidget = ({ useAsPath, collectionPath, defaultLocale, mode }: P
         placeholder={placeholder}
         onChange={(e) => handleChange(e.target.value)}
         helpText={hint}
+        readOnly={isReadOnly}
         aria-describedby="system-path-description"
       />
       <span

package/src/styles/styles.css

@@ -6,3 +6,7 @@
 @import "./functional/functional.css";
 @import "./theme/theme.css";
 @import "./components/components.css";
+
+.byline-ui {
+  isolation: isolate;
+}