@byline/admin 5.1.3 → 5.2.0

package/dist/fields/blocks/blocks-field.jsx

@@ -1,248 +0,0 @@
-/**
- * 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, useMemo, useState } from 'react';
-import { getAdminConfig } from '@byline/core';
-import { useTranslation } from '@byline/i18n/react';
-import { Card, CloseIcon, DraggableSortable, IconButton, Modal, moveItem, PlusIcon, } from '@byline/ui/react';
-import cx from 'clsx';
-import { defaultScalarForField } from '../../fields/field-helpers';
-import { GroupField } from '../../fields/group/group-field';
-import { SortableItem } from '../../fields/sortable-item';
-import { useFormContext } from '../../forms/form-context';
-import { hasExistingIdTargets } from '../../forms/nested-path';
-import { moveRepeatingItems, repeatingItemId, repeatingItemPath } from '../../forms/repeating-items';
-import styles from './blocks-field.module.css';
-// ---------------------------------------------------------------------------
-// BlocksField — renders `type: 'blocks'` fields. Children are heterogeneous
-// group fields selected via a modal picker. Supports D&D.
-// ---------------------------------------------------------------------------
-export const BlocksField = ({ field, defaultValue, path, contentLocale, }) => {
-    const { appendPatch, getFieldValue, getFieldValues, removePendingUploadsUnder, setFieldStore } = useFormContext();
-    const { t } = useTranslation('byline-admin');
-    const [items, setItems] = useState([]);
-    const [showAddBlockModal, setShowAddBlockModal] = useState(false);
-    const [pendingInsertIndex, setPendingInsertIndex] = useState(null);
-    const availableBlocks = useMemo(() => field.blocks ?? [], [field.blocks]);
-    // Site-wide per-block admin config (`AdminConfig.blockAdmin`), resolved by
-    // blockType. Registry-based on purpose: blocks are cross-collection units,
-    // so their admin config applies wherever the block renders — no threading
-    // from the collection admin config is needed (mirrors how FieldRenderer
-    // resolves the global richText editor from admin config).
-    const blockAdminByType = useMemo(() => {
-        const map = new Map();
-        for (const entry of getAdminConfig().blockAdmin ?? []) {
-            map.set(entry.blockType, entry);
-        }
-        return map;
-    }, []);
-    const [selectedBlockName, setSelectedBlockName] = useState(() => availableBlocks[0]?.blockType ?? '');
-    useEffect(() => {
-        if (selectedBlockName == null ||
-            !availableBlocks.some((b) => b.blockType === selectedBlockName)) {
-            setSelectedBlockName(availableBlocks[0]?.blockType ?? '');
-        }
-    }, [availableBlocks, selectedBlockName]);
-    useEffect(() => {
-        // Prefer the live form-store value over `defaultValue` when seeding the
-        // rendered list. The store lives in FormProvider — above the tab layout —
-        // so it survives this field unmounting/remounting as the editor switches
-        // tabs; `defaultValue` is only the initial seed and is empty in create
-        // mode. Re-seeding from `defaultValue` on remount would drop blocks the
-        // editor had already added on an earlier visit to this tab.
-        const storeValue = getFieldValue(path);
-        const source = Array.isArray(storeValue) ? storeValue : defaultValue;
-        if (Array.isArray(source)) {
-            setItems(source.map((item) => ({
-                id: item && typeof item === 'object' && '_id' in item
-                    ? String(item._id)
-                    : crypto.randomUUID(),
-                data: item,
-            })));
-        }
-        else {
-            setItems([]);
-        }
-    }, [defaultValue, getFieldValue, path]);
-    const handleDragEnd = ({ moveFromIndex, moveToIndex, }) => {
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        if (!Array.isArray(currentArray))
-            return;
-        const move = moveRepeatingItems(currentArray, moveFromIndex, moveToIndex);
-        if (move == null)
-            return;
-        setItems((prev) => moveItem(prev, move.fromIndex, move.toIndex));
-        setFieldStore(path, move.items);
-        appendPatch({
-            kind: 'array.move',
-            path,
-            itemId: move.itemId,
-            toIndex: move.toIndex,
-        });
-    };
-    const handleAddItem = async (forcedVariantName, atIndex) => {
-        setShowAddBlockModal(false);
-        setPendingInsertIndex(null);
-        const variant = (forcedVariantName != null
-            ? availableBlocks.find((v) => v.blockType === forcedVariantName)
-            : undefined) ?? availableBlocks[0];
-        if (!variant)
-            return;
-        const compositeFields = (variant.fields ?? []);
-        const newId = crypto.randomUUID();
-        const newItem = {
-            _id: newId,
-            _type: variant.blockType,
-        };
-        for (const f of compositeFields) {
-            newItem[f.name] = await defaultScalarForField(f, getFieldValues);
-        }
-        if (!hasExistingIdTargets(getFieldValues(), path))
-            return;
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        const insertAt = atIndex != null ? atIndex : currentArray ? currentArray.length : 0;
-        const newItemWrapper = { id: newId, data: newItem };
-        setItems((prev) => {
-            const next = [...prev];
-            next.splice(insertAt, 0, newItemWrapper);
-            return next;
-        });
-        appendPatch({
-            kind: 'array.insert',
-            path: path,
-            index: insertAt,
-            item: newItem,
-        });
-        const newArrayValue = currentArray ? [...currentArray] : [];
-        newArrayValue.splice(insertAt, 0, newItem);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleRemoveItem = (index) => {
-        const currentArray = (getFieldValue(path) ?? defaultValue);
-        if (!Array.isArray(currentArray) || index < 0 || index >= currentArray.length)
-            return;
-        const item = currentArray[index];
-        const itemPath = repeatingItemPath(path, item, index);
-        const itemId = repeatingItemId(item) ?? String(index);
-        setItems((prev) => prev.filter((_, i) => i !== index));
-        removePendingUploadsUnder(itemPath);
-        appendPatch({
-            kind: 'array.remove',
-            path: path,
-            itemId,
-        });
-        const newArrayValue = [...currentArray];
-        newArrayValue.splice(index, 1);
-        setFieldStore(path, newArrayValue);
-    };
-    const handleInsertBelow = (index, forcedVariantName) => {
-        if (availableBlocks.length > 1 && forcedVariantName == null) {
-            setPendingInsertIndex(index + 1);
-            setShowAddBlockModal(true);
-        }
-        else {
-            void handleAddItem(forcedVariantName, index + 1);
-        }
-    };
-    const renderItem = (itemWrapper, index) => {
-        const item = itemWrapper.data;
-        const arrayElementPath = repeatingItemPath(path, item, index);
-        if (!item || typeof item !== 'object' || typeof item._type !== 'string')
-            return null;
-        const subField = field.blocks?.find((b) => b.blockType === item._type);
-        if (subField == null)
-            return null;
-        // Extract field data (everything except _id and _type)
-        const { _id, _type, ...fieldData } = item;
-        const label = subField.label ?? _type;
-        // Render the block's children directly with arrayElementPath as the
-        // path (not basePath).  FieldRenderer would append the group name
-        // (e.g. "richTextBlock") producing paths like
-        // "content[id=...].richTextBlock.constrainedWidth", but the flat block
-        // shape stores fields directly on the item so the correct path is
-        // "content[id=...].constrainedWidth".
-        const body = (<GroupField key={subField.blockType} field={{
-                type: 'group',
-                name: subField.blockType,
-                fields: subField.fields,
-                label: undefined,
-            }} defaultValue={fieldData} path={arrayElementPath} 
-        // Arrays directly inside a block are fully sortable: each
-        // DraggableSortable is an independent DndContext and drag listeners
-        // are grip-scoped, so the inner array's drags can't leak into the
-        // block-level context (and vice versa).
-        disableSorting={false} contentLocale={contentLocale} fieldAdmin={blockAdminByType.get(item._type)?.fields}/>);
-        return (<SortableItem key={itemWrapper.id} id={itemWrapper.id} label={label ?? subField.blockType} onAddBelow={() => handleInsertBelow(index)} onRemove={() => handleRemoveItem(index)}>
-        {body}
-      </SortableItem>);
-    };
-    return (<div className={`byline-field-blocks ${field.name}`}>
-      {field.label && (<h3 className={cx('byline-field-blocks-title', styles.title)}>{field.label}</h3>)}
-      <DraggableSortable ids={items.map((i) => i.id)} onDragEnd={handleDragEnd} className={cx('byline-field-blocks-stack', styles.stack)}>
-        {items.map((item, index) => renderItem(item, index))}
-        <div className={cx('byline-field-blocks-add-row', styles['add-row'])}>
-          <IconButton onClick={() => {
-            setPendingInsertIndex(null);
-            setShowAddBlockModal(true);
-        }} disabled={!selectedBlockName} aria-label={t('fields.blocks.addBlockAriaLabel')} variant="outlined">
-            <PlusIcon />
-          </IconButton>
-          {/* Text-styled button so the label is clickable too. Removed from
-            the tab order (tabIndex -1) — the IconButton is the single
-            keyboard/screen-reader control for this action. */}
-          <button type="button" tabIndex={-1} disabled={!selectedBlockName} onClick={() => {
-            setPendingInsertIndex(null);
-            setShowAddBlockModal(true);
-        }} className={cx('byline-field-blocks-add-label', styles['add-label'])}>
-            {t('fields.blocks.addBlock')}
-          </button>
-        </div>
-      </DraggableSortable>
-      <Modal isOpen={showAddBlockModal} closeOnOverlayClick={true} onDismiss={() => {
-            setShowAddBlockModal(false);
-            setPendingInsertIndex(null);
-        }}>
-        <Modal.Container style={{ maxWidth: '700px' }}>
-          <Modal.Header className={cx('byline-field-blocks-modal-head', styles['modal-head'])}>
-            <h3 className={cx('byline-field-blocks-modal-title', styles['modal-title'])}>
-              {t('fields.blocks.modalTitle')}
-            </h3>
-            <IconButton arial-label={t('common.actions.close')} size="xs" onClick={() => {
-            setShowAddBlockModal(false);
-            setPendingInsertIndex(null);
-        }}>
-              <CloseIcon width="16px" height="16px" svgClassName="white-icon"/>
-            </IconButton>
-          </Modal.Header>
-          <Modal.Content className={cx('byline-field-blocks-card-cursor', styles['modal-content'])}>
-            <div className={cx('byline-field-blocks-grid', styles.grid)}>
-              {availableBlocks.map((b, index) => (<Card key={b.blockType} hover onClick={() => void handleAddItem(b.blockType, pendingInsertIndex ?? undefined)} className={cx('byline-field-blocks-card', styles.card)}>
-                  <Card.Header>
-                    <div className={cx('byline-field-blocks-card-head', styles['card-head'])}>
-                      <Card.Title className={cx('byline-field-blocks-card-title', styles['card-title'])}>
-                        {b.label ?? b.blockType}
-                      </Card.Title>
-                      <span className={cx('byline-field-blocks-card-index', styles['card-index'])}>
-                        {index + 1}
-                      </span>
-                    </div>
-                    <code className={cx('byline-field-blocks-card-code', styles['card-code'])}>
-                      {b.blockType}
-                    </code>
-                  </Card.Header>
-                  <Card.Content>
-                    <p className={cx('byline-field-blocks-card-body', styles['card-body'])}>
-                      {b.helpText ?? b.label ?? b.blockType}
-                    </p>
-                  </Card.Content>
-                </Card>))}
-            </div>
-          </Modal.Content>
-        </Modal.Container>
-      </Modal>
-    </div>);
-};

package/dist/fields/checkbox/checkbox-field.jsx

@@ -1,24 +0,0 @@
-/**
- * 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 { Checkbox } from '@byline/ui/react';
-import { useFieldError, useFieldValue } from '../../forms/form-context';
-import styles from './checkbox-field.module.css';
-export const CheckboxField = ({ field, value, defaultValue, onChange, id, path, }) => {
-    const fieldPath = path ?? field.name;
-    const fieldError = useFieldError(fieldPath);
-    const fieldValue = useFieldValue(fieldPath);
-    const checked = value ?? fieldValue ?? defaultValue ?? false;
-    return (<div className={`byline-field-checkbox ${field.name} ${styles['field-checkbox']}`}>
-      <Checkbox id={id ?? fieldPath} name={field.name} label={field.label} checked={checked} size="sm" helpText={field.helpText} 
-    // TODO: Handle indeterminate state
-    onCheckedChange={(value) => {
-            const next = value === 'indeterminate' ? false : Boolean(value);
-            onChange?.(next);
-        }} error={fieldError != null} errorText={fieldError}/>
-    </div>);
-};

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

@@ -1,211 +0,0 @@
-/**
- * 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

@@ -1,109 +0,0 @@
-/**
- * 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

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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>);
-};