@byline/admin 2.5.2 → 2.6.0

package/dist/forms/form-renderer_module.css

@@ -0,0 +1,245 @@
+:is(.form-MVxxVb, .byline-form) {
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+:is(.heading-row-qw_UYh, .byline-form-heading-row) {
+  align-items: start;
+  gap: .25rem var(--spacing-16);
+  margin-bottom: var(--spacing-8);
+  grid-template-columns: 1fr;
+  display: grid;
+}
+
+@media (min-width: 40rem) {
+  :is(.heading-row-qw_UYh, .byline-form-heading-row) {
+    grid-template-columns: 1fr auto;
+  }
+}
+
+:is(.heading-wnLlb_, .byline-form-heading) {
+  margin-bottom: 0;
+  font-size: 1.75rem;
+}
+
+:is(.status-bar-kQCXLT, .byline-form-status-bar) {
+  z-index: 20;
+  align-items: start;
+  gap: .25rem var(--spacing-16);
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+  border-radius: var(--border-radius-sm);
+  background-color: var(--canvas-25);
+  grid-template-columns: 1fr;
+  margin-bottom: .25rem;
+  display: grid;
+  position: sticky;
+  top: 45px;
+}
+
+@media (min-width: 40rem) {
+  :is(.status-bar-kQCXLT, .byline-form-status-bar) {
+    grid-template-columns: 1fr auto;
+  }
+}
+
+@media (min-width: 66rem) {
+  :is(.status-bar-kQCXLT, .byline-form-status-bar) {
+    margin-bottom: 0;
+  }
+}
+
+:is(.status-XbhkJR, .byline-form-status) {
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  display: flex;
+}
+
+:is(.status-meta-gppNXX, .byline-form-status-meta) {
+  flex-direction: column;
+  font-size: .8rem;
+  line-height: 1.25;
+  display: flex;
+}
+
+@media (min-width: 48rem) {
+  :is(.status-meta-gppNXX, .byline-form-status-meta) {
+    margin-bottom: .25rem;
+    line-height: .75rem;
+  }
+}
+
+@media (min-width: 66rem) {
+  :is(.status-meta-gppNXX, .byline-form-status-meta) {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+@media (min-width: 40rem) {
+  :is(.status-meta-gppNXX, .byline-form-status-meta) {
+    gap: var(--spacing-8);
+  }
+}
+
+:is(.status-cell-Tr3QHl, .byline-form-status-cell) {
+  align-items: center;
+  gap: .25rem;
+  min-width: 0;
+  display: flex;
+}
+
+:is(.status-muted-vHn34O, .byline-form-status-muted) {
+  color: var(--gray-500);
+  flex-shrink: 0;
+}
+
+:is(.status-trunc-jGiHWf, .byline-form-status-trunc) {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:is(.status-published-hqosWb, .byline-form-status-published) {
+  font-size: .8rem;
+  line-height: 1rem;
+  display: inline;
+}
+
+@media (min-width: 48rem) {
+  :is(.status-published-hqosWb, .byline-form-status-published) {
+    line-height: .875rem;
+  }
+}
+
+:is(.status-unpublish-DiCNI0, .byline-form-status-unpublish) {
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: .8rem;
+  text-decoration: underline;
+}
+
+:is(.actions-AZBIdR, .byline-form-actions) {
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.actions-button-VIwbST, .byline-form-actions-button) {
+  min-width: 70px;
+  min-height: 28px;
+}
+
+:is(.actions-status-wrap-hSvlps, .byline-form-actions-status-wrap) {
+  z-index: 10;
+  position: relative;
+}
+
+:is(.actions-combo-button-XvqHCC, .byline-form-actions-combo-button) {
+  min-width: 100px;
+  min-height: 28px;
+}
+
+:is(.actions-combo-trigger-bmXUzc, .byline-form-actions-combo-trigger) {
+  min-height: 28px;
+}
+
+:is(.layout-WTbLYr, .byline-form-layout) {
+  gap: var(--spacing-12);
+  padding-top: var(--spacing-32);
+  flex-direction: column;
+  display: flex;
+}
+
+@media (min-width: 60rem) {
+  :is(.layout-WTbLYr, .byline-form-layout) {
+    gap: var(--spacing-32);
+    grid-column-gap: 36px;
+    grid-template-columns: minmax(0, 1fr) .4fr;
+    align-items: start;
+    display: grid;
+  }
+}
+
+:is(.content-_P5cdJ, .byline-form-content) {
+  gap: var(--spacing-20);
+  flex-direction: column;
+  max-width: 100%;
+  margin-bottom: 2.75rem;
+  display: flex;
+}
+
+@media (min-width: 60rem) {
+  :is(.content-_P5cdJ, .byline-form-content) {
+    margin-bottom: 3.75rem;
+  }
+}
+
+:is(.sidebar-WsxX88, .byline-form-sidebar) {
+  gap: var(--spacing-20);
+  background-color: oklch(from var(--canvas-50) l c h / .2);
+  flex-direction: column;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 4rem;
+  display: flex;
+}
+
+@media (min-width: 60rem) {
+  :is(.sidebar-WsxX88, .byline-form-sidebar) {
+    padding-top: .25rem;
+    padding-right: 12px;
+    padding-left: var(--spacing-16);
+    border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
+    margin-bottom: 0;
+    position: sticky;
+    top: 95px;
+  }
+}
+
+:is(.tabset-xfaMkP, .byline-form-tabset) {
+  gap: var(--spacing-20);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.tabset-tabs-jZpqd_, .byline-form-tabset-tabs) {
+  margin-top: -1rem;
+  margin-bottom: 0;
+}
+
+:is(.tabset-fields-JJefdw, .byline-form-tabset-fields) {
+  gap: var(--spacing-20);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.guard-modal-head-r2TApi, .byline-form-guard-modal-head) {
+  margin-bottom: var(--spacing-8);
+  padding-top: 1rem;
+}
+
+:is(.guard-modal-title-p9dFJ9, .byline-form-guard-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+:is(.guard-modal-text-uW56HS, .byline-form-guard-modal-text) {
+  font-size: var(--font-size-sm);
+}
+
+:is(:is([data-theme="dark"], .dark) .status-bar-kQCXLT, :is([data-theme="dark"], .dark) .byline-form-status-bar) {
+  background-color: var(--canvas-800);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-700);
+}
+
+:is(:is([data-theme="dark"], .dark) .sidebar-WsxX88, :is([data-theme="dark"], .dark) .byline-form-sidebar) {
+  border-left-color: var(--gray-800);
+  background-color: var(--canvas-900);
+}
+

package/dist/forms/navigation-guard.d.ts

@@ -0,0 +1,54 @@
+/**
+ * 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
+ */
+/** The result returned by a `UseNavigationGuard` hook. */
+export interface NavigationGuardResult {
+    /** Whether a navigation attempt is currently being blocked (show confirmation UI). */
+    isBlocked: boolean;
+    /** Cancel the pending navigation — stay on the current page. */
+    stay: () => void;
+    /** Confirm the pending navigation — leave the page. */
+    proceed: () => void;
+}
+/**
+ * A hook that blocks in-app navigation and (optionally) browser unload when
+ * `shouldBlock` is `true`.
+ *
+ * Each framework adapter implements this signature.
+ */
+export type UseNavigationGuard = (shouldBlock: boolean) => NavigationGuardResult;
+/**
+ * Fallback navigation guard that only handles the browser's native
+ * `beforeunload` event.  In-app (client-side) route changes are **not**
+ * intercepted — `isBlocked` will never become `true`.
+ *
+ * This is used when no framework-specific adapter has been provided.
+ */
+export declare const useBeforeUnloadGuard: UseNavigationGuard;
+/**
+ * Provide a framework-specific `UseNavigationGuard` hook to all descendant
+ * `FormRenderer` instances.
+ *
+ * ```tsx
+ * import { NavigationGuardProvider } from './navigation-guard'
+ * import { useTanStackNavigationGuard } from './tanstack-navigation-guard'
+ *
+ * function App() {
+ *   return (
+ *     <NavigationGuardProvider value={useTanStackNavigationGuard}>
+ *       <Outlet />
+ *     </NavigationGuardProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare const NavigationGuardProvider: import("react").Provider<UseNavigationGuard>;
+/**
+ * Consume the current `UseNavigationGuard` hook from context.
+ * Falls back to `useBeforeUnloadGuard` when no provider is present.
+ */
+export declare const useNavigationGuardAdapter: () => UseNavigationGuard;

package/dist/forms/navigation-guard.js

@@ -0,0 +1,22 @@
+import { createContext, useContext, useEffect } from "react";
+const useBeforeUnloadGuard = (shouldBlock)=>{
+    useEffect(()=>{
+        if (!shouldBlock) return;
+        const handler = (e)=>{
+            e.preventDefault();
+        };
+        window.addEventListener('beforeunload', handler);
+        return ()=>window.removeEventListener('beforeunload', handler);
+    }, [
+        shouldBlock
+    ]);
+    return {
+        isBlocked: false,
+        stay: ()=>{},
+        proceed: ()=>{}
+    };
+};
+const NavigationGuardContext = /*#__PURE__*/ createContext(useBeforeUnloadGuard);
+const NavigationGuardProvider = NavigationGuardContext.Provider;
+const useNavigationGuardAdapter = ()=>useContext(NavigationGuardContext);
+export { NavigationGuardProvider, useBeforeUnloadGuard, useNavigationGuardAdapter };

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

@@ -0,0 +1,36 @@
+export interface PathWidgetProps {
+    /** The collection's `useAsPath` source field name, when configured. */
+    useAsPath: string | undefined;
+    /** Collection path, forwarded to the slugifier as context. */
+    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';
+}
+/**
+ * System-managed `path` widget.
+ *
+ * Edits the path stored in `byline_document_paths` for the current
+ * (document, locale) row. Displays the current persisted/overridden
+ * value as an editable input.
+ * In create mode, when the user hasn't supplied an override, the input
+ * shows the live-derived preview (slugified `useAsPath` source field) as
+ * a placeholder so the user sees what will be saved. The "Regenerate"
+ * action explicitly writes the current live preview into the override
+ * slot so the user can re-anchor a path against the source field after
+ * editing the title.
+ *
+ * Stable override handles: `.byline-form-path`, `.byline-form-path-header`,
+ * `.byline-form-path-regenerate`.
+ */
+export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, }: PathWidgetProps) => import("react").JSX.Element;

package/dist/forms/path-widget.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { slugify } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Input, Label } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldValue, useFormContext, useSystemPath } from "./form-context.js";
+import path_widget_module from "./path-widget.module.js";
+function coerceToString(value) {
+    if (null == value) return '';
+    if (value instanceof Date) return value.toISOString();
+    return String(value);
+}
+const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode })=>{
+    const { setSystemPath } = useFormContext();
+    const { t } = useTranslation('byline-admin');
+    const systemPath = useSystemPath();
+    const sourceValue = useFieldValue(useAsPath ?? '');
+    const isReadOnly = activeLocale !== defaultLocale;
+    const livePreview = useMemo(()=>{
+        if (!useAsPath) return '';
+        const asString = coerceToString(sourceValue);
+        if (0 === asString.length) return '';
+        return slugify(asString, {
+            locale: defaultLocale,
+            collectionPath
+        });
+    }, [
+        useAsPath,
+        sourceValue,
+        defaultLocale,
+        collectionPath
+    ]);
+    const inputValue = systemPath ?? '';
+    const handleChange = useCallback((next)=>{
+        setSystemPath(0 === next.length ? null : next);
+    }, [
+        setSystemPath
+    ]);
+    const handleRegenerate = useCallback(()=>{
+        if (livePreview.length > 0) setSystemPath(livePreview);
+    }, [
+        livePreview,
+        setSystemPath
+    ]);
+    const formatted = useMemo(()=>{
+        if (0 === inputValue.length) return '';
+        return slugify(inputValue, {
+            locale: defaultLocale,
+            collectionPath
+        });
+    }, [
+        inputValue,
+        defaultLocale,
+        collectionPath
+    ]);
+    const validationHint = inputValue.length > 0 && formatted !== inputValue ? t('pathWidget.suggestedHint', {
+        formatted
+    }) : void 0;
+    const readOnlyHint = isReadOnly ? t('pathWidget.readOnlyHint', {
+        locale: defaultLocale
+    }) : void 0;
+    const hint = readOnlyHint ?? validationHint;
+    const placeholder = !isReadOnly && 'create' === mode && livePreview.length > 0 ? t('pathWidget.willBeSavedAs', {
+        preview: livePreview
+    }) : void 0;
+    const srDescription = [
+        t("pathWidget.srDescription"),
+        placeholder,
+        hint
+    ].filter(Boolean).join(' ');
+    const showRegenerate = !isReadOnly && useAsPath && livePreview.length > 0 && livePreview !== systemPath;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "byline-form-path",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-form-path-header', path_widget_module.header),
+                children: [
+                    /*#__PURE__*/ jsx(Label, {
+                        id: "system-path-label",
+                        htmlFor: "system-path",
+                        label: t('pathWidget.label')
+                    }),
+                    showRegenerate && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: handleRegenerate,
+                        className: classnames('byline-form-path-regenerate', path_widget_module.regenerate),
+                        "aria-label": t('pathWidget.regenerateAriaLabel', {
+                            field: useAsPath
+                        }),
+                        children: t('pathWidget.regenerateButton', {
+                            field: useAsPath
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Input, {
+                id: "system-path",
+                name: "__systemPath__",
+                value: inputValue,
+                placeholder: placeholder,
+                onChange: (e)=>handleChange(e.target.value),
+                helpText: hint,
+                readOnly: isReadOnly,
+                "aria-describedby": "system-path-description"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                id: "system-path-description",
+                className: classnames('byline-form-path-sr-only', path_widget_module["sr-only"]),
+                children: srDescription
+            })
+        ]
+    });
+};
+export { PathWidget };

package/dist/forms/path-widget.module.js

@@ -0,0 +1,8 @@
+import "./path-widget_module.css";
+const path_widget_module = {
+    header: "header-mJ5Fde",
+    regenerate: "regenerate-P5Mdye",
+    "sr-only": "sr-only-feJgAM",
+    srOnly: "sr-only-feJgAM"
+};
+export default path_widget_module;

package/dist/forms/path-widget_module.css

@@ -0,0 +1,29 @@
+:is(.header-mJ5Fde, .byline-form-path-header) {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-8);
+  display: flex;
+}
+
+:is(.regenerate-P5Mdye, .byline-form-path-regenerate) {
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: .8rem;
+  text-decoration: underline;
+}
+
+:is(.sr-only-feJgAM, .byline-form-path-sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+

package/dist/forms/upload-executor.d.ts

@@ -0,0 +1,57 @@
+/**
+ * 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
+ */
+/**
+ * Upload Executor
+ *
+ * Handles batch execution of pending file uploads at form submission time.
+ * This enables "deferred uploads" — files are selected/previewed immediately
+ * but only uploaded when the user clicks Save.
+ */
+import type { StoredFileValue } from '@byline/core';
+import type { UploadFieldFn } from '../fields/field-services-types';
+import type { PendingUpload } from './form-context';
+export interface UploadResult {
+    fieldPath: string;
+    success: boolean;
+    storedFile?: StoredFileValue;
+    error?: string;
+}
+export interface ExecuteUploadsResult {
+    /** All upload results (both successful and failed) */
+    results: UploadResult[];
+    /** Map of field path to StoredFileValue for successful uploads */
+    successful: Map<string, StoredFileValue>;
+    /** Map of field path to error message for failed uploads */
+    errors: Map<string, string>;
+    /** Whether all uploads succeeded */
+    allSucceeded: boolean;
+}
+/**
+ * Execute all pending uploads sequentially.
+ * Returns a result object with successful uploads and any errors.
+ *
+ * @param pendingUploads - Map of field path to PendingUpload
+ * @param uploadField - Host-provided upload transport (resolved via
+ *                         `useBylineFieldServices()` in the calling React tree)
+ * @returns Promise resolving to ExecuteUploadsResult
+ */
+export declare function executeUploads(pendingUploads: Map<string, PendingUpload>, uploadField: UploadFieldFn): Promise<ExecuteUploadsResult>;
+/**
+ * Progress callback type for upload execution with progress tracking.
+ */
+export type UploadProgressCallback = (info: {
+    current: number;
+    total: number;
+    fieldPath: string;
+    status: 'uploading' | 'done' | 'error';
+}) => void;
+/**
+ * Execute uploads with progress callbacks.
+ * Useful for showing upload progress in the UI.
+ */
+export declare function executeUploadsWithProgress(pendingUploads: Map<string, PendingUpload>, uploadField: UploadFieldFn, onProgress?: UploadProgressCallback): Promise<ExecuteUploadsResult>;

package/dist/forms/upload-executor.js

@@ -0,0 +1,94 @@
+async function executeUploads(pendingUploads, uploadField) {
+    const results = [];
+    const successful = new Map();
+    const errors = new Map();
+    for (const [fieldPath, upload] of pendingUploads.entries()){
+        const formData = new FormData();
+        formData.append('file', upload.file);
+        formData.append('field', uploadFieldName(fieldPath));
+        try {
+            const result = await uploadField(upload.collectionPath, formData, false);
+            results.push({
+                fieldPath,
+                success: true,
+                storedFile: result.storedFile
+            });
+            successful.set(fieldPath, result.storedFile);
+        } catch (err) {
+            const message = err instanceof Error ? err.message : 'Upload failed';
+            results.push({
+                fieldPath,
+                success: false,
+                error: message
+            });
+            errors.set(fieldPath, message);
+        }
+    }
+    return {
+        results,
+        successful,
+        errors,
+        allSucceeded: 0 === errors.size
+    };
+}
+function uploadFieldName(fieldPath) {
+    const dot = fieldPath.lastIndexOf('.');
+    return -1 === dot ? fieldPath : fieldPath.slice(dot + 1);
+}
+async function executeUploadsWithProgress(pendingUploads, uploadField, onProgress) {
+    const results = [];
+    const successful = new Map();
+    const errors = new Map();
+    const entries = Array.from(pendingUploads.entries());
+    const total = entries.length;
+    for(let i = 0; i < entries.length; i++){
+        const entry = entries[i];
+        if (!entry) continue;
+        const [fieldPath, upload] = entry;
+        onProgress?.({
+            current: i + 1,
+            total,
+            fieldPath,
+            status: 'uploading'
+        });
+        const formData = new FormData();
+        formData.append('file', upload.file);
+        formData.append('field', uploadFieldName(fieldPath));
+        try {
+            const result = await uploadField(upload.collectionPath, formData, false);
+            results.push({
+                fieldPath,
+                success: true,
+                storedFile: result.storedFile
+            });
+            successful.set(fieldPath, result.storedFile);
+            onProgress?.({
+                current: i + 1,
+                total,
+                fieldPath,
+                status: 'done'
+            });
+        } catch (err) {
+            const message = err instanceof Error ? err.message : 'Upload failed';
+            results.push({
+                fieldPath,
+                success: false,
+                error: message
+            });
+            errors.set(fieldPath, message);
+            onProgress?.({
+                current: i + 1,
+                total,
+                fieldPath,
+                status: 'error'
+            });
+        }
+    }
+    return {
+        results,
+        successful,
+        errors,
+        allSucceeded: 0 === errors.size
+    };
+}
+export { executeUploads, executeUploadsWithProgress };