@byline/admin 6.0.3 → 6.2.0

package/dist/forms/form-renderer.d.ts

@@ -6,7 +6,7 @@
  * Copyright (c) Infonomic Company Limited
  */
 import { type ReactNode } from 'react';
-import type { Field, FormAdminConfig, WorkflowStatus } from '@byline/core';
+import type { AdminResourceConfig, Field, WorkflowStatus } from '@byline/core';
 import type { DocumentPatch } from '@byline/core/patches';
 import { type DocumentActionsLocaleOption } from './document-actions.js';
 import { type ScheduledPublicationInfo, type SchedulePublicationInput } from './scheduled-publication-control.js';
@@ -95,7 +95,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.

package/dist/forms/form-renderer.js

@@ -10,7 +10,7 @@ import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { AdminGroup } from "../presentation/group.js";
 import { AdminRow } from "../presentation/row.js";
-import { AdminTabs } from "../presentation/tabs.js";
+import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
 import { AvailableLocalesWidget } from "./available-locales-widget.js";
 import { DocumentActions } from "./document-actions.js";
 import { FormProvider, useFieldValue, useFormContext } from "./form-context.js";
@@ -284,10 +284,12 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
         const requested = activeTabBySet[set.name] ?? '';
         const resolvedActive = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
         const activeTab = visibleTabs.find((t)=>t.name === resolvedActive);
+        const idBase = `tabset:${set.name}`;
         return /*#__PURE__*/ jsxs("div", {
             className: clsx('byline-form-tabset', form_renderer_module.tabset),
             children: [
                 visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
+                    idBase: idBase,
                     tabs: visibleTabs,
                     activeTab: resolvedActive,
                     onChange: (tabName)=>handleTabChange(set.name, tabName),
@@ -295,11 +297,14 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                     className: clsx('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
                 }),
                 activeTab && /*#__PURE__*/ jsx("div", {
+                    role: "tabpanel",
+                    id: tabPanelId(idBase, activeTab.name),
+                    "aria-labelledby": tabTriggerId(idBase, activeTab.name),
                     className: clsx('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
                     children: activeTab.fields.map((name)=>renderItem(name))
                 })
             ]
-        }, `tabset:${set.name}`);
+        }, idBase);
     };
     const busyAnnouncement = isUploading ? t('forms.actions.uploading') : isSubmitting ? t('forms.actions.saving') : '';
     return /*#__PURE__*/ jsxs(Fragment, {
@@ -533,7 +538,7 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                                 /*#__PURE__*/ jsxs("div", {
                                     className: clsx('byline-form-sidebar', form_renderer_module.sidebar),
                                     children: [
-                                        showPath && (useAsPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
+                                        showPath && (useAsPath || adminConfig?.lockPath === true || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
                                             disabled: mutationsBlocked || discarding,
                                             useAsPath: useAsPath,
                                             collectionPath: collectionPath ?? '',
@@ -541,7 +546,8 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                                             activeLocale: contentLocale,
                                             mode: mode,
                                             slugifier: pathSlugifier,
-                                            sourceLocked: pathSourceLocked
+                                            sourceLocked: pathSourceLocked,
+                                            lockPath: adminConfig?.lockPath
                                         }),
                                         tree && 'edit' === mode && 'string' == typeof initialData?.id && /*#__PURE__*/ jsx(TreePlacementWidget, {
                                             disabled: mutationsBlocked || discarding,

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

@@ -35,6 +35,14 @@ export interface PathWidgetProps {
      * persisted path. Defaults to `false`.
      */
     sourceLocked?: boolean;
+    /**
+     * When `true`, the collection declares its paths managed
+     * (`CollectionAdminConfig.lockPath`): the input renders read-only in both
+     * modes and the preview placeholder and "Regenerate" action are
+     * suppressed. Independent of `sourceLocked`, which answers whether the
+     * form can derive a preview at all. Defaults to `false`.
+     */
+    lockPath?: boolean;
 }
 /**
  * System-managed `path` widget.
@@ -52,4 +60,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, activeLocale, mode, slugifier, sourceLocked, disabled, }: PathWidgetProps) => import("react").JSX.Element;
+export declare const PathWidget: ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, slugifier, sourceLocked, lockPath, disabled, }: PathWidgetProps) => import("react").JSX.Element;

package/dist/forms/path-widget.js

@@ -12,13 +12,14 @@ function coerceToString(value) {
     if (value instanceof Date) return value.toISOString();
     return String(value);
 }
-const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, slugifier, sourceLocked = false, disabled = false })=>{
+const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mode, slugifier, sourceLocked = false, lockPath = false, disabled = false })=>{
     const { setSystemPath } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const systemPath = useSystemPath();
     const sourceValue = useFieldValue(useAsPath ?? '');
     const runSlugify = slugifier ?? slugify;
-    const isReadOnly = activeLocale !== defaultLocale;
+    const translationLocked = activeLocale !== defaultLocale;
+    const isReadOnly = lockPath || translationLocked;
     const livePreview = useMemo(()=>{
         if (!useAsPath || sourceLocked) return '';
         const asString = coerceToString(sourceValue);
@@ -37,10 +38,11 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mo
     ]);
     const inputValue = systemPath ?? '';
     const handleChange = useCallback((next)=>{
-        if (disabled) return;
+        if (disabled || isReadOnly) return;
         setSystemPath(0 === next.length ? null : next);
     }, [
         disabled,
+        isReadOnly,
         setSystemPath
     ]);
     const handleRegenerate = useCallback(()=>{
@@ -65,10 +67,11 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mo
     const validationHint = inputValue.length > 0 && formatted !== inputValue ? t('pathWidget.suggestedHint', {
         formatted
     }) : void 0;
-    const readOnlyHint = isReadOnly ? t('pathWidget.readOnlyHint', {
+    const lockedHint = lockPath ? 'create' === mode ? t('pathWidget.lockedCreateHint') : t('pathWidget.lockedHint') : void 0;
+    const translationHint = translationLocked ? t('pathWidget.readOnlyHint', {
         locale: defaultLocale
     }) : void 0;
-    const hint = readOnlyHint ?? validationHint;
+    const hint = lockedHint ?? translationHint ?? validationHint;
     const placeholder = !isReadOnly && 'create' === mode && livePreview.length > 0 ? t('pathWidget.willBeSavedAs', {
         preview: livePreview
     }) : void 0;

package/dist/presentation/tab-strip-drag.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 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
+ */
+/**
+ * Pure state for click-and-drag scrolling of the tab strip.
+ *
+ * The DOM plumbing — pointer capture, the click suppression, the cursor —
+ * lives in `tabs.tsx`; the rules it follows are here so they can be tested
+ * without a pointer.
+ */
+/**
+ * How far the pointer must travel before the gesture stops being a click and
+ * becomes a drag.
+ *
+ * Without a threshold every click on a tab would nudge the strip by a pixel or
+ * two, and the click suppression that follows a drag would swallow the very
+ * clicks that select tabs.
+ */
+export declare const DRAG_THRESHOLD_PX = 5;
+/**
+ * How long after a drag a click is treated as that drag's own click.
+ *
+ * A window rather than a consume-once flag, because the click is not
+ * guaranteed to arrive: a drag released outside the strip produces none, and
+ * a flag left armed would swallow the reader's next deliberate click on a tab.
+ * Far longer than the browser's synthetic click takes to arrive, far shorter
+ * than anyone can release and deliberately click again.
+ */
+export declare const CLICK_SUPPRESSION_MS = 100;
+/** Where a gesture began. An internal part of `DragState`, not a public type. */
+interface DragOrigin {
+    /** Pointer x at the moment the button went down. */
+    pointerX: number;
+    /** The viewport's scroll offset at that same moment. */
+    scrollLeft: number;
+}
+export interface DragState {
+    origin: DragOrigin;
+    /** Whether the threshold has already been crossed. */
+    dragging: boolean;
+}
+export interface DragAdvance {
+    dragging: boolean;
+    /** The offset to scroll to, or `null` while the gesture is still a click. */
+    scrollLeft: number | null;
+}
+/**
+ * Whether a `pointerdown` should begin a potential drag.
+ *
+ * Mouse only. Touch and pen already scroll the viewport natively, with
+ * momentum and rubber-banding that a hand-rolled drag does not reproduce, so
+ * taking the gesture over would trade a good interaction for a worse one.
+ */
+export declare function shouldStartDrag({ pointerType, button, overflowing, }: {
+    pointerType: string;
+    button: number;
+    overflowing: boolean;
+}): boolean;
+/**
+ * Advance a gesture given the pointer's current x.
+ *
+ * Returns `scrollLeft: null` while the pointer is still within the threshold,
+ * so the caller leaves the viewport alone and lets the click through.
+ */
+export declare function advanceDrag({ origin, dragging }: DragState, pointerX: number, maxScroll: number): DragAdvance;
+/**
+ * Whether a click arriving now belongs to a drag that has just ended, and
+ * should therefore not reach the tab underneath.
+ */
+export declare function shouldSuppressClick(dragEndedAt: number | null, now: number): boolean;
+export {};

package/dist/presentation/tab-strip-drag.js

@@ -0,0 +1,25 @@
+const DRAG_THRESHOLD_PX = 5;
+const CLICK_SUPPRESSION_MS = 100;
+function shouldStartDrag({ pointerType, button, overflowing }) {
+    if ('mouse' !== pointerType) return false;
+    if (0 !== button) return false;
+    return overflowing;
+}
+function advanceDrag({ origin, dragging }, pointerX, maxScroll) {
+    const delta = pointerX - origin.pointerX;
+    const isDragging = dragging || Math.abs(delta) >= DRAG_THRESHOLD_PX;
+    if (false === isDragging) return {
+        dragging: false,
+        scrollLeft: null
+    };
+    const next = origin.scrollLeft - delta;
+    return {
+        dragging: true,
+        scrollLeft: Math.min(Math.max(next, 0), maxScroll)
+    };
+}
+function shouldSuppressClick(dragEndedAt, now) {
+    if (null == dragEndedAt) return false;
+    return now - dragEndedAt < CLICK_SUPPRESSION_MS;
+}
+export { CLICK_SUPPRESSION_MS, DRAG_THRESHOLD_PX, advanceDrag, shouldStartDrag, shouldSuppressClick };

package/dist/presentation/tab-strip-drag.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/presentation/tab-strip-geometry.d.ts

@@ -0,0 +1,75 @@
+/**
+ * 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 interface StripMeasurements {
+    /**
+     * Intrinsic content width of the tablist row.
+     *
+     * The row is laid out at `max-content`, so this is the width the tabs want
+     * regardless of how much room the viewport currently gives them. A row that
+     * shrank to its container would report the container's width back and the
+     * strip could never detect overflow at all.
+     */
+    rowWidth: number;
+    /**
+     * Usable width of the strip container.
+     *
+     * Independent of whether the trigger is rendered — the container is sized by
+     * the layout above it, not by its own children.
+     */
+    containerWidth: number;
+    /** Width the overflow trigger occupies when it is rendered. */
+    triggerWidth: number;
+    /** Gap between the viewport and the trigger. */
+    triggerGap: number;
+    /** Current horizontal scroll offset of the viewport. */
+    scrollLeft: number;
+}
+export interface StripState {
+    /** Whether the row needs the scrolling viewport and the overflow trigger. */
+    overflowing: boolean;
+    /** Width available to the scrolling viewport. */
+    viewportWidth: number;
+    /** Whether the viewport is scrolled fully left (hides the leading fade). */
+    atStart: boolean;
+    /** Whether the viewport is scrolled fully right (hides the trailing fade). */
+    atEnd: boolean;
+}
+export interface RevealMeasurements {
+    viewportWidth: number;
+    scrollLeft: number;
+    /** The tab's offset from the start of the row. */
+    tabOffsetLeft: number;
+    tabWidth: number;
+    rowWidth: number;
+    padding?: number;
+}
+/**
+ * Resolve whether the strip overflows, and where it sits within its scroll
+ * range.
+ *
+ * Overflow is decided against the bare container, and deliberately takes no
+ * account of the trigger: a row that fits the container fits, and reserving
+ * the trigger's width first would summon a menu for tabs that were never cut
+ * off. The trigger is subtracted only afterwards, to size the viewport it now
+ * shares the container with.
+ *
+ * That ordering is also what keeps the result stable. The trigger's presence
+ * changes the viewport but never `containerWidth` — which the layout above
+ * sets — and never `rowWidth`, which the row holds at `max-content`. So the
+ * overflow answer cannot feed back into its own inputs.
+ */
+export declare function computeStripState({ rowWidth, containerWidth, triggerWidth, triggerGap, scrollLeft, }: StripMeasurements): StripState;
+/**
+ * The scroll offset that brings one tab into view, or `null` when the tab is
+ * already visible and the viewport should be left untouched.
+ *
+ * Returning `null` rather than the current offset is the point: this runs on
+ * selection and on focus, and writing `scrollLeft` unconditionally would
+ * cancel a scroll the reader is in the middle of.
+ */
+export declare function computeRevealScroll({ viewportWidth, scrollLeft, tabOffsetLeft, tabWidth, rowWidth, padding, }: RevealMeasurements): number | null;

package/dist/presentation/tab-strip-geometry.js

@@ -0,0 +1,36 @@
+const EDGE_EPSILON = 1;
+const DEFAULT_REVEAL_PADDING = 8;
+function computeStripState({ rowWidth, containerWidth, triggerWidth, triggerGap, scrollLeft }) {
+    const measured = containerWidth > 0;
+    const overflowing = measured && rowWidth > containerWidth;
+    if (false === overflowing) return {
+        overflowing: false,
+        viewportWidth: Math.max(0, containerWidth),
+        atStart: true,
+        atEnd: true
+    };
+    const viewportWidth = Math.max(0, containerWidth - triggerWidth - triggerGap);
+    const maxScroll = Math.max(0, rowWidth - viewportWidth);
+    return {
+        overflowing: true,
+        viewportWidth,
+        atStart: scrollLeft <= EDGE_EPSILON,
+        atEnd: scrollLeft >= maxScroll - EDGE_EPSILON
+    };
+}
+function computeRevealScroll({ viewportWidth, scrollLeft, tabOffsetLeft, tabWidth, rowWidth, padding = DEFAULT_REVEAL_PADDING }) {
+    const maxScroll = Math.max(0, rowWidth - viewportWidth);
+    const clamp = (value)=>Math.min(Math.max(value, 0), maxScroll);
+    const leadingEdge = tabOffsetLeft - padding;
+    const trailingEdge = tabOffsetLeft + tabWidth + padding;
+    let next;
+    if (tabWidth + 2 * padding >= viewportWidth) next = leadingEdge;
+    else if (leadingEdge < scrollLeft) next = leadingEdge;
+    else {
+        if (!(trailingEdge > scrollLeft + viewportWidth)) return null;
+        next = trailingEdge - viewportWidth;
+    }
+    const clamped = clamp(next);
+    return clamped === scrollLeft ? null : clamped;
+}
+export { computeRevealScroll, computeStripState };

package/dist/presentation/tab-strip-geometry.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/presentation/tabs.d.ts

@@ -6,20 +6,43 @@ interface AdminTabsProps {
     tabs: AdminTabItem[];
     activeTab: string;
     onChange: (name: string) => void;
+    /**
+     * Prefix for the generated tab and panel ids. The consumer that renders the
+     * panels builds its panel ids from the same base via `tabPanelId`, which is
+     * what associates the two halves for assistive technology.
+     */
+    idBase: string;
     /** Error counts keyed by tab name — shows a danger badge when > 0. */
     errorCounts?: Record<string, number>;
     className?: string;
 }
+/** Id of the button for one tab. */
+export declare const tabTriggerId: (idBase: string, name: string) => string;
+/** Id the consumer must put on the panel belonging to one tab. */
+export declare const tabPanelId: (idBase: string, name: string) => string;
 /**
  * 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.
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array,
+ * and by the collection history view. The number of tabs a collection can
+ * declare is unbounded while the column they sit in is not, so the strip
+ * scrolls horizontally and — only once the tabs genuinely exceed the column —
+ * grows a menu listing every tab.
  *
- * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
- * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
- * `.byline-admin-tab-badge`.
+ * The menu is a jump list rather than a list of the tabs that happen to be
+ * out of view: its contents stay put as the strip scrolls, and no tab ever
+ * changes position in the strip as a result of being selected. Editors learn
+ * where a tab lives and it stays there.
+ *
+ * Scroll position is moved only when the selection changes or a tab takes
+ * focus. A reader who scrolls the strip to look at other labels keeps their
+ * position through re-measurement, re-render and resize.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tabs-viewport`,
+ * `.byline-admin-tablist`, `.byline-admin-tab`, `.byline-admin-tab-active`,
+ * `.byline-admin-tab-label`, `.byline-admin-tab-badge`,
+ * `.byline-admin-tabs-overflow-trigger`, `.byline-admin-tabs-overflow-menu`,
+ * `.byline-admin-tabs-overflow-item`.
  */
-export declare const AdminTabs: ({ tabs, activeTab, onChange, errorCounts, className, }: AdminTabsProps) => import("react").JSX.Element;
+export declare const AdminTabs: ({ tabs, activeTab, onChange, idBase, errorCounts, className, }: AdminTabsProps) => import("react").JSX.Element;
 export {};