npm - @byline/admin - Versions diffs - 5.2.0 → 6.0.1 - Mend

@byline/admin 5.2.0 → 6.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/exports-parity.test.node.js +37 -0
package/dist/fields/array/array-field.jsx +209 -0
package/dist/fields/blocks/blocks-field.jsx +248 -0
package/dist/fields/checkbox/checkbox-field.jsx +24 -0
package/dist/fields/code/code-editor.jsx +211 -0
package/dist/fields/code/code-field.jsx +109 -0
package/dist/fields/column-formatter.jsx +25 -0
package/dist/fields/date-time-formatter.jsx +18 -0
package/dist/fields/datetime/datetime-field.jsx +22 -0
package/dist/fields/draggable-context-menu.jsx +50 -0
package/dist/fields/field-admin.test.node.js +40 -0
package/dist/fields/field-renderer.jsx +136 -0
package/dist/fields/field-services-context.jsx +17 -0
package/dist/fields/file/file-field.jsx +176 -0
package/dist/fields/file/file-upload-field.jsx +89 -0
package/dist/fields/group/group-field.jsx +46 -0
package/dist/fields/image/image-field.jsx +183 -0
package/dist/fields/image/image-upload-field.jsx +157 -0
package/dist/fields/local-date-time.jsx +69 -0
package/dist/fields/locale-badge.jsx +19 -0
package/dist/fields/numerical/numerical-field.jsx +93 -0
package/dist/fields/relation/relation-column-formatter.jsx +74 -0
package/dist/fields/relation/relation-display.jsx +118 -0
package/dist/fields/relation/relation-field.jsx +108 -0
package/dist/fields/relation/relation-many-field.jsx +142 -0
package/dist/fields/relation/relation-picker.jsx +240 -0
package/dist/fields/relation/relation-summary.jsx +45 -0
package/dist/fields/select/select-field.jsx +27 -0
package/dist/fields/sortable-item.jsx +54 -0
package/dist/fields/text/text-field.jsx +79 -0
package/dist/fields/text-area/text-area-field.jsx +79 -0
package/dist/forms/available-locales-reconcile.test.node.js +43 -0
package/dist/forms/available-locales-widget.jsx +63 -0
package/dist/forms/document-actions.jsx +486 -0
package/dist/forms/form-context.jsx +598 -0
package/dist/forms/form-modals.jsx +128 -0
package/dist/forms/form-renderer.jsx +532 -0
package/dist/forms/form-status-display.jsx +69 -0
package/dist/forms/navigation-guard.jsx +68 -0
package/dist/forms/nested-path.test.node.js +115 -0
package/dist/forms/path-widget.jsx +125 -0
package/dist/forms/pending-uploads.test.node.js +19 -0
package/dist/forms/repeating-items.test.node.js +29 -0
package/dist/forms/scheduled-publication-control.jsx +389 -0
package/dist/forms/scheduled-publication-state.test.node.js +121 -0
package/dist/forms/scheduled-publication-time.test.node.js +70 -0
package/dist/forms/status-transitions.test.node.js +76 -0
package/dist/forms/tree-placement-widget.jsx +160 -0
package/dist/forms/upload-executor.test.node.js +368 -0
package/dist/forms/use-form-layout.test.node.js +69 -0
package/dist/modules/admin-account/components/change-password.jsx +169 -0
package/dist/modules/admin-account/components/container.jsx +164 -0
package/dist/modules/admin-account/components/preferences.jsx +148 -0
package/dist/modules/admin-account/components/theme-switch.jsx +52 -0
package/dist/modules/admin-account/components/update.jsx +186 -0
package/dist/modules/admin-permissions/components/inspector.jsx +200 -0
package/dist/modules/admin-preferences/schemas.test.node.js +48 -0
package/dist/modules/admin-roles/components/create.jsx +155 -0
package/dist/modules/admin-roles/components/permissions.jsx +239 -0
package/dist/modules/admin-roles/components/update.jsx +148 -0
package/dist/modules/admin-users/components/create.jsx +206 -0
package/dist/modules/admin-users/components/roles.jsx +126 -0
package/dist/modules/admin-users/components/set-password.jsx +133 -0
package/dist/modules/admin-users/components/update.jsx +215 -0
package/dist/modules/analytics/components/dashboard.jsx +208 -0
package/dist/modules/analytics/components/dashboard.test.node.js +162 -0
package/dist/modules/analytics/components/timeseries.jsx +193 -0
package/dist/modules/auth/components/sign-in-form.jsx +89 -0
package/dist/modules/auth/safe-redirect.test.node.js +40 -0
package/dist/modules/auth/sign-in-form-props.test.node.js +7 -0
package/dist/presentation/group.jsx +26 -0
package/dist/presentation/row.jsx +23 -0
package/dist/presentation/tabs.jsx +39 -0
package/dist/services/admin-services-context.jsx +17 -0
package/dist/widgets/diff-viewer/diff-modal.jsx +110 -0
package/dist/widgets/source-locale-badge/source-locale-badge.jsx +28 -0
package/dist/widgets/status-badge/status-badge.jsx +46 -0
package/package.json +7 -7

package/dist/fields/code/code-editor.jsx ADDED Viewed

@@ -0,0 +1,211 @@
+/**
+ * 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, useRef } from 'react';
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { bracketMatching, HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, keymap, lineNumbers } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+// ---------------------------------------------------------------------------
+// CodeEditor — the CodeMirror 6 half of the `code` field widget.
+//
+// This module owns EVERY CodeMirror import and is loaded through
+// `React.lazy` from `code-field.tsx`, so none of it lands in the main admin
+// chunk — the consuming app's bundler splits it out and fetches it the first
+// time a code field actually renders. Keep it dependency-tight: anything
+// imported here ships in the lazy chunk.
+//
+// Theming: one theme + one highlight style, both defined entirely in terms
+// of `--byline-code-*` CSS custom properties (declared with light/dark
+// values in `code-field.module.css`). The admin theme contract is a
+// `.dark`/`.light` class on <html>, so the editor follows theme flips live
+// with zero JS involvement.
+// ---------------------------------------------------------------------------
+/**
+ * Per-language lazy loaders. Each grammar stays in its own chunk — adding a
+ * code field to a document only fetches the grammar it actually uses.
+ * Unknown languages resolve to `null` → plain text (no language extension).
+ */
+const LANGUAGE_LOADERS = {
+    javascript: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
+    jsx: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true })),
+    typescript: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ typescript: true })),
+    tsx: () => import('@codemirror/lang-javascript').then((m) => m.javascript({ jsx: true, typescript: true })),
+    json: () => import('@codemirror/lang-json').then((m) => m.json()),
+    html: () => import('@codemirror/lang-html').then((m) => m.html()),
+    css: () => import('@codemirror/lang-css').then((m) => m.css()),
+    markdown: () => import('@codemirror/lang-markdown').then((m) => m.markdown()),
+    python: () => import('@codemirror/lang-python').then((m) => m.python()),
+    sql: () => import('@codemirror/lang-sql').then((m) => m.sql()),
+    yaml: () => import('@codemirror/lang-yaml').then((m) => m.yaml()),
+};
+/** Common aliases → canonical loader keys. */
+const LANGUAGE_ALIASES = {
+    js: 'javascript',
+    ts: 'typescript',
+    md: 'markdown',
+    py: 'python',
+    yml: 'yaml',
+};
+const resolveLanguageLoader = (language) => {
+    if (!language)
+        return null;
+    const key = LANGUAGE_ALIASES[language] ?? language;
+    return LANGUAGE_LOADERS[key] ?? null;
+};
+const bylineCodeTheme = EditorView.theme({
+    '&': {
+        backgroundColor: 'var(--byline-code-bg)',
+        color: 'var(--byline-code-fg)',
+        fontSize: 'var(--byline-code-font-size, 13px)',
+        border: '1px solid var(--byline-code-border)',
+        borderRadius: 'var(--byline-code-radius, 4px)',
+    },
+    '&.cm-focused': {
+        outline: '2px solid var(--byline-code-focus-ring)',
+        outlineOffset: '-1px',
+    },
+    '.cm-content': {
+        fontFamily: 'var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)',
+        caretColor: 'var(--byline-code-caret)',
+        minHeight: 'var(--byline-code-min-height, 6rem)',
+    },
+    '.cm-scroller': {
+        fontFamily: 'inherit',
+        maxHeight: 'var(--byline-code-max-height, 32rem)',
+    },
+    '.cm-gutters': {
+        backgroundColor: 'var(--byline-code-gutter-bg)',
+        color: 'var(--byline-code-gutter-fg)',
+        border: 'none',
+        borderRight: '1px solid var(--byline-code-border)',
+    },
+    '.cm-activeLine': { backgroundColor: 'var(--byline-code-active-line)' },
+    '.cm-activeLineGutter': { backgroundColor: 'var(--byline-code-active-line)' },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+        backgroundColor: 'var(--byline-code-selection) !important',
+    },
+    '.cm-cursor': { borderLeftColor: 'var(--byline-code-caret)' },
+});
+const bylineHighlightStyle = HighlightStyle.define([
+    { tag: tags.keyword, color: 'var(--byline-code-keyword)' },
+    { tag: [tags.string, tags.special(tags.string)], color: 'var(--byline-code-string)' },
+    { tag: tags.comment, color: 'var(--byline-code-comment)', fontStyle: 'italic' },
+    { tag: [tags.number, tags.bool, tags.null], color: 'var(--byline-code-number)' },
+    {
+        tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
+        color: 'var(--byline-code-function)',
+    },
+    { tag: [tags.typeName, tags.className, tags.tagName], color: 'var(--byline-code-type)' },
+    { tag: [tags.propertyName, tags.attributeName], color: 'var(--byline-code-property)' },
+    { tag: [tags.operator, tags.definitionKeyword], color: 'var(--byline-code-operator)' },
+]);
+const CodeEditor = ({ id, value, language, readOnly, onChange, ariaInvalid, ariaDescribedBy, }) => {
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    // Keep the latest onChange without recreating the EditorView.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const languageCompartment = useRef(new Compartment());
+    const readOnlyCompartment = useRef(new Compartment());
+    const ariaCompartment = useRef(new Compartment());
+    const initialValueRef = useRef(value);
+    // Create the view once per mount. The form store lives above the tab
+    // layout, so remounts (tab switches, conditional visibility) re-seed from
+    // the store-backed `value` — same contract the other widgets follow.
+    useEffect(() => {
+        if (containerRef.current == null)
+            return;
+        const state = EditorState.create({
+            doc: initialValueRef.current,
+            extensions: [
+                lineNumbers(),
+                history(),
+                bracketMatching(),
+                keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+                EditorView.lineWrapping,
+                bylineCodeTheme,
+                syntaxHighlighting(bylineHighlightStyle),
+                languageCompartment.current.of([]),
+                readOnlyCompartment.current.of([]),
+                ariaCompartment.current.of([]),
+                EditorView.updateListener.of((update) => {
+                    if (update.docChanged) {
+                        onChangeRef.current?.(update.state.doc.toString());
+                    }
+                }),
+            ],
+        });
+        const view = new EditorView({ state, parent: containerRef.current });
+        viewRef.current = view;
+        return () => {
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+    // External value sync — only while unfocused, so we never fight the
+    // editor's own keystrokes (our own onChange echoes back as an equal doc).
+    useEffect(() => {
+        const view = viewRef.current;
+        if (view == null || view.hasFocus)
+            return;
+        const current = view.state.doc.toString();
+        if (current !== value) {
+            view.dispatch({ changes: { from: 0, to: current.length, insert: value } });
+        }
+    }, [value]);
+    // Language switching through a compartment: each grammar loads lazily the
+    // first time it's requested and reconfigures in place (no view recreation).
+    useEffect(() => {
+        let cancelled = false;
+        const view = viewRef.current;
+        if (view == null)
+            return;
+        const loader = resolveLanguageLoader(language);
+        if (loader == null) {
+            view.dispatch({ effects: languageCompartment.current.reconfigure([]) });
+            return;
+        }
+        loader()
+            .then((extension) => {
+            if (!cancelled && viewRef.current != null) {
+                viewRef.current.dispatch({
+                    effects: languageCompartment.current.reconfigure(extension),
+                });
+            }
+        })
+            .catch(() => {
+            // Grammar chunk failed to load — degrade to plain text.
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [language]);
+    useEffect(() => {
+        viewRef.current?.dispatch({
+            effects: readOnlyCompartment.current.reconfigure([
+                EditorState.readOnly.of(readOnly === true),
+                EditorView.editable.of(readOnly !== true),
+            ]),
+        });
+    }, [readOnly]);
+    // ARIA lives on CodeMirror's own contenteditable (which already carries
+    // role="textbox"), not on the wrapper div.
+    useEffect(() => {
+        const attributes = {};
+        if (ariaInvalid)
+            attributes['aria-invalid'] = 'true';
+        if (ariaDescribedBy)
+            attributes['aria-describedby'] = ariaDescribedBy;
+        viewRef.current?.dispatch({
+            effects: ariaCompartment.current.reconfigure(EditorView.contentAttributes.of(attributes)),
+        });
+    }, [ariaInvalid, ariaDescribedBy]);
+    return <div ref={containerRef} id={id} className="byline-code-editor"/>;
+};
+export default CodeEditor;

package/dist/fields/code/code-field.jsx ADDED Viewed

@@ -0,0 +1,109 @@
+/**
+ * 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 React, { Suspense, useCallback } from 'react';
+import { ErrorText, HelpText, Label } from '@byline/ui/react';
+import cx from 'clsx';
+import { useFieldError, useFieldValue } from '../../forms/form-context';
+import { LocaleBadge } from '../locale-badge';
+import styles from './code-field.module.css';
+// The CodeMirror half of the widget. `React.lazy` is the bundle-splitting
+// boundary: `code-editor.tsx` owns every CodeMirror import, so the editor
+// (and its per-language grammars) stays out of the main admin chunk and is
+// fetched the first time a code field actually renders.
+const CodeEditor = React.lazy(() => import('./code-editor'));
+/**
+ * Resolve the form-store path of a sibling field (same group/block/array
+ * item scope). `content[id=x].code` + `language` → `content[id=x].language`;
+ * a top-level `code` + `language` → `language`.
+ */
+const siblingFieldPath = (fieldPath, siblingName) => {
+    const lastDot = fieldPath.lastIndexOf('.');
+    return lastDot === -1 ? siblingName : `${fieldPath.slice(0, lastDot + 1)}${siblingName}`;
+};
+export const CodeField = ({ field, value, defaultValue, onChange, id, path, locale, components, }) => {
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    // Effective highlight language: a sibling `languageField` selection (e.g.
+    // a `select` next to the code field) wins over the schema's static
+    // `language` hint. The hook subscribes to the sibling path, so switching
+    // the select re-highlights live. When no `languageField` is declared we
+    // subscribe to our own path — a stable no-op (hooks must run
+    // unconditionally).
+    const siblingPath = field.languageField
+        ? siblingFieldPath(fieldPath, field.languageField)
+        : fieldPath;
+    const siblingLanguage = useFieldValue(siblingPath);
+    const effectiveLanguage = (field.languageField ? siblingLanguage : undefined) || field.language;
+    const handleChange = useCallback((value) => {
+        if (onChange) {
+            onChange(value);
+        }
+    }, [onChange]);
+    // Custom component slots (from admin config)
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    // Shared props available to every slot component
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId,
+    };
+    const showBadge = !!locale && !!field.label;
+    const hasCustomLabel = !!CustomLabel;
+    const labelRowClass = cx('byline-field-code-label-row', styles['label-row']);
+    // ── Label rendering ──────────────────────────────────────────
+    const renderLabel = () => {
+        if (hasCustomLabel) {
+            return (<div className={labelRowClass}>
+          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional}/>
+          {showBadge && <LocaleBadge locale={locale}/>}
+        </div>);
+        }
+        if (field.label) {
+            return (<div className={labelRowClass}>
+          <Label id={`${htmlId}-label`} htmlFor={htmlId} label={field.label} required={!field.optional}/>
+          {showBadge && <LocaleBadge locale={locale}/>}
+        </div>);
+        }
+        return null;
+    };
+    // ── Field input rendering ────────────────────────────────────
+    const renderInput = () => {
+        if (CustomField) {
+            return (<CustomField {...slotBaseProps} onChange={handleChange} defaultValue={defaultValue} placeholder={field.placeholder}/>);
+        }
+        return (<Suspense fallback={
+            // Read-only monospace textarea: keeps the layout stable and the
+            // content visible while the editor chunk loads.
+            <textarea className={cx('byline-field-code-loading', styles.loading)} readOnly value={incomingValue} rows={6} aria-label={field.label}/>}>
+        <CodeEditor id={htmlId} value={incomingValue} language={effectiveLanguage} onChange={handleChange} readOnly={field.readOnly === true} ariaInvalid={fieldError != null} ariaDescribedBy={fieldError != null
+                ? `error-for-${htmlId}`
+                : field.helpText
+                    ? `help-for-${htmlId}`
+                    : undefined}/>
+      </Suspense>);
+    };
+    return (<div className={`byline-field-code ${field.name}`}>
+      {renderLabel()}
+      {BeforeField && <BeforeField {...slotBaseProps}/>}
+      {renderInput()}
+      {AfterField && <AfterField {...slotBaseProps}/>}
+      {fieldError != null && <ErrorText id={`error-for-${htmlId}`} text={fieldError}/>}
+      {CustomHelpText ? (<CustomHelpText {...slotBaseProps} helpText={field.helpText}/>) : (fieldError == null &&
+            field.helpText && <HelpText id={`help-for-${htmlId}`} text={field.helpText}/>)}
+    </div>);
+};

package/dist/fields/column-formatter.jsx ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * 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
+ */
+/**
+ * Type guard: returns true when the formatter is a `{ component }` wrapper
+ * rather than a plain function.
+ */
+export function isComponentFormatter(fmt) {
+    return typeof fmt === 'object' && fmt !== null && 'component' in fmt;
+}
+/**
+ * Render a cell value through its column formatter (if any).
+ * Handles both plain-function and `{ component }` formatters.
+ */
+export function renderFormatted(value, document, formatter) {
+    if (isComponentFormatter(formatter)) {
+        const Component = formatter.component;
+        return <Component value={value} record={document}/>;
+    }
+    return formatter(value, document);
+}

package/dist/fields/date-time-formatter.jsx ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * 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 { LocalDateTime } from './local-date-time';
+/**
+ * SSR-safe date-time column formatter for list views.
+ *
+ * Uses the `LocalDateTime` component which renders a placeholder on the server
+ * and formats to the user's locale/timezone after hydration, avoiding
+ * server/client mismatches.
+ */
+export function DateTimeFormatter({ value }) {
+    return <LocalDateTime value={value}/>;
+}

package/dist/fields/datetime/datetime-field.jsx ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * 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 { DatePicker, ErrorText } from '@byline/ui/react';
+import cx from 'clsx';
+import { useFieldError, useFieldValue, useIsDirty } from '../../forms/form-context';
+import styles from './datetime-field.module.css';
+export const DateTimeField = ({ field, value, defaultValue, onChange, id, path, }) => {
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const isDirty = useIsDirty(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? null;
+    return (<div className={`byline-field-datetime ${field.name}`}>
+      <DatePicker id={id ?? fieldPath} name={field.name} label={field.label} required={!field.optional} initialValue={incomingValue} mode={field.mode || 'datetime'} yearsInFuture={field.yearsInFuture || 1} yearsInPast={field.yearsInPast || 10} onDateChange={(date) => onChange?.(date)} className={cx(isDirty && ['byline-field-datetime-dirty', styles.dirty])}/>
+      {fieldError && <ErrorText id={`${field.name}-error`} text={fieldError}/>}
+    </div>);
+};

package/dist/fields/draggable-context-menu.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+'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 { DeleteIcon, Dropdown as DropdownMenu, EllipsisIcon, IconButton, PlusIcon, } from '@byline/ui/react';
+import cx from 'clsx';
+import styles from './draggable-context-menu.module.css';
+export function DraggableContextMenu({ onAddBelow, onRemove, }) {
+    const { t } = useTranslation('byline-admin');
+    const itemClass = cx('byline-draggable-menu-item', styles.item);
+    const rowClass = cx('byline-draggable-menu-row', styles.row);
+    const iconSlotClass = cx('byline-draggable-menu-icon-slot', styles['icon-slot']);
+    const labelClass = cx('byline-draggable-menu-label', styles.label);
+    return (<DropdownMenu.Root modal={false}>
+      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" aria-label={t('fields.draggableMenu.triggerAriaLabel')}/>}>
+        <EllipsisIcon width="16px" height="16px"/>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content align="end" sideOffset={0} className={cx('byline-draggable-menu', styles.menu)}>
+          <DropdownMenu.Item className={itemClass} onClick={onAddBelow}>
+            <div className={rowClass}>
+              <span className={iconSlotClass}>
+                <PlusIcon width="18px" height="18px"/>
+              </span>
+              <span className={labelClass}>{t('fields.draggableMenu.addBelow')}</span>
+            </div>
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator className={cx('byline-draggable-menu-separator', styles.separator)}/>
+          <DropdownMenu.Item className={itemClass} onClick={onRemove}>
+            <div className={rowClass}>
+              <div className={rowClass}>
+                <span className={iconSlotClass}>
+                  <DeleteIcon width="18px" height="18px" svgClassName={cx('byline-draggable-menu-delete-icon', styles['delete-icon'])}/>
+                </span>
+                <span className={cx('byline-draggable-menu-label byline-draggable-menu-label-danger', styles.label, styles['label-danger'])}>
+                  {t('fields.draggableMenu.remove')}
+                </span>
+              </div>
+            </div>
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>);
+}

package/dist/fields/field-admin.test.node.js ADDED Viewed

@@ -0,0 +1,40 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import { sliceFieldAdmin } from './field-admin.js';
+describe('sliceFieldAdmin', () => {
+    const answer = { editor: (() => null) };
+    const question = { components: {} };
+    it('returns undefined for an undefined map', () => {
+        expect(sliceFieldAdmin(undefined, 'faq')).toBeUndefined();
+    });
+    it('returns undefined when no entry addresses a descendant of the child', () => {
+        expect(sliceFieldAdmin({ faq: question, other: question }, 'faq')).toBeUndefined();
+    });
+    it('strips the child prefix from descendant keys', () => {
+        expect(sliceFieldAdmin({ 'faq.answer': answer, 'faq.question': question }, 'faq')).toEqual({
+            answer,
+            question,
+        });
+    });
+    it('keeps deeper paths dotted for the next level to slice', () => {
+        const map = { 'files.filesGroup.publicationFile': question };
+        const level1 = sliceFieldAdmin(map, 'files');
+        expect(level1).toEqual({ 'filesGroup.publicationFile': question });
+        expect(sliceFieldAdmin(level1, 'filesGroup')).toEqual({ publicationFile: question });
+    });
+    it('does not match on name prefixes that are not path segments', () => {
+        // 'faqExtra.answer' must not be sliced by child 'faq'.
+        expect(sliceFieldAdmin({ 'faqExtra.answer': answer }, 'faq')).toBeUndefined();
+    });
+    it('excludes the child’s own exact-name entry from the slice', () => {
+        expect(sliceFieldAdmin({ faq: question, 'faq.answer': answer }, 'faq')).toEqual({
+            answer,
+        });
+    });
+});

package/dist/fields/field-renderer.jsx ADDED Viewed

@@ -0,0 +1,136 @@
+/**
+ * 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 { getAdminConfig } from '@byline/core';
+import cx from 'clsx';
+import { useFormContext } from '../forms/form-context';
+import { ArrayField } from './array/array-field';
+import { BlocksField } from './blocks/blocks-field';
+import { CheckboxField } from './checkbox/checkbox-field';
+import { CodeField } from './code/code-field';
+import { DateTimeField } from './datetime/datetime-field';
+import styles from './field-renderer.module.css';
+import { FileField } from './file/file-field';
+import { GroupField } from './group/group-field';
+import { ImageField } from './image/image-field';
+import { LocaleBadge } from './locale-badge';
+import { NumericalField } from './numerical/numerical-field';
+import { RelationField } from './relation/relation-field';
+import { RelationManyField } from './relation/relation-many-field';
+import { SelectField } from './select/select-field';
+import { TextField } from './text/text-field';
+import { TextAreaField } from './text-area/text-area-field';
+import { useFieldChangeHandler } from './use-field-change-handler';
+import { useFieldCondition } from './use-field-condition';
+export const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableSorting, hideLabel, contentLocale, components, editor, fieldAdmin, }) => {
+    const path = basePath ? `${basePath}.${field.name}` : field.name;
+    const htmlId = path.replace(/[[\].]/g, '-');
+    const handleChange = useFieldChangeHandler(field, path);
+    const { getFieldValue } = useFormContext();
+    // Conditional visibility (BaseField.condition) — re-evaluated on every form
+    // edit; the field unmounts while its condition is false.
+    const visible = useFieldCondition(field, basePath);
+    // Conditional fields unmount while hidden, so on re-show the uncontrolled
+    // widget must be re-seeded from the live form store (which survives the
+    // unmount) rather than the initial document data — otherwise an edit made
+    // before hiding would be visually reverted while the store (and the patch
+    // stream) still carried it. `undefined` means the path was never written,
+    // in which case the initial default stands.
+    const storedValue = field.condition ? getFieldValue(path) : undefined;
+    const defaultValue = storedValue !== undefined ? storedValue : initialDefault;
+    // When a locale is active and the field is localised, inject a badge into
+    // the field label so the editor knows they are editing locale-specific content.
+    const isLocalised = field.localized === true;
+    const badge = isLocalised && contentLocale && !hideLabel ? <LocaleBadge locale={contentLocale}/> : null;
+    // All hooks have run by this point, so a conditional bail-out is safe.
+    // Hiding retains the field's stored value — no clearing patch is emitted.
+    if (!visible)
+        return null;
+    /**
+     * Render the underlying field widget. If the field is localised, we wrap it
+     * so we can append the locale badge after the label.
+     */
+    const renderField = () => {
+        switch (field.type) {
+            case 'text':
+                return (<TextField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId} locale={isLocalised ? contentLocale : undefined} components={components}/>);
+            case 'textArea':
+                return (<TextAreaField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId} locale={isLocalised ? contentLocale : undefined} components={components}/>);
+            case 'code':
+                return (<CodeField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId} locale={isLocalised ? contentLocale : undefined} components={components}/>);
+            case 'checkbox':
+                return (<CheckboxField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId}/>);
+            case 'select':
+                return (<SelectField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId}/>);
+            case 'richText': {
+                // Admin-side per-field override takes precedence over the globally
+                // registered editor (`AdminConfig.fields.richText.editor`). The
+                // override travels via `FieldAdminConfig.fields.<name>.editor` —
+                // see admin-types — so React component references stay out of the
+                // schema graph that's loaded by the server bootstrap.
+                const RichTextEditor = editor ?? getAdminConfig().fields?.richText?.editor;
+                if (!RichTextEditor) {
+                    throw new Error('No richText editor registered. Install @byline/richtext-lexical and set ' +
+                        '`fields.richText.editor` in your admin config.');
+                }
+                return (<RichTextEditor field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} instanceKey={htmlId} locale={isLocalised ? contentLocale : undefined}/>);
+            }
+            case 'datetime':
+                return (<DateTimeField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId}/>);
+            case 'integer':
+            case 'float':
+            case 'decimal':
+                return (<NumericalField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId} components={components}/>);
+            case 'counter':
+                // Counter values are allocator-assigned; force readOnly at the
+                // renderer level so the widget is always non-editable regardless
+                // of whether the developer set `field.readOnly` explicitly.
+                return (<NumericalField field={hideLabel
+                        ? { ...field, label: undefined, readOnly: true }
+                        : { ...field, readOnly: true }} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId} components={components}/>);
+            case 'file':
+                return (<FileField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path}/>);
+            case 'image':
+                return (<ImageField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path}/>);
+            case 'relation':
+                if (field.hasMany) {
+                    return (<RelationManyField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} path={path} id={htmlId}/>);
+                }
+                return (<RelationField field={hideLabel ? { ...field, label: undefined } : field} defaultValue={defaultValue} onChange={handleChange} path={path} id={htmlId}/>);
+            case 'group':
+                // Render a group field as a fixed-order inline field group.
+                return (<GroupField field={hideLabel
+                        ? { ...field, label: undefined }
+                        : field} defaultValue={defaultValue} path={path} disableSorting={disableSorting} contentLocale={contentLocale} fieldAdmin={fieldAdmin}/>);
+            case 'blocks':
+                if (!field.blocks)
+                    return null;
+                return (<BlocksField field={field} defaultValue={defaultValue} path={path} contentLocale={contentLocale}/>);
+            case 'array':
+                if (!field.fields)
+                    return null;
+                return (<ArrayField field={field} defaultValue={defaultValue} path={path} disableSorting={disableSorting} contentLocale={contentLocale} fieldAdmin={fieldAdmin}/>);
+            default:
+                return null;
+        }
+    };
+    // text, textArea, and code render the badge inside their own Label row;
+    // the outer wrapper is only needed for other field types.
+    const selfBadge = field.type === 'text' ||
+        field.type === 'textArea' ||
+        field.type === 'code' ||
+        field.type === 'richText';
+    if (badge && !selfBadge) {
+        return (<div className={cx('byline-field-localized-wrap', styles['localized-wrap'])}>
+        {renderField()}
+        <span className={cx('byline-field-localized-badge', styles['localized-badge'])}>
+          {badge}
+        </span>
+      </div>);
+    }
+    return renderField();
+};

package/dist/fields/field-services-context.jsx ADDED Viewed

@@ -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 FieldServicesContext = createContext(null);
+export const BylineFieldServicesProvider = ({ services, children, }) => (<FieldServicesContext.Provider value={services}>{children}</FieldServicesContext.Provider>);
+export const useBylineFieldServices = () => {
+    const ctx = useContext(FieldServicesContext);
+    if (!ctx) {
+        throw new Error('@byline/ui: BylineFieldServicesProvider missing. Wrap your admin tree with <BylineFieldServicesProvider services={…} />.');
+    }
+    return ctx;
+};