canopycms 0.3.3 → 0.5.0

package/dist/config/schemas/field.d.ts

@@ -33,6 +33,7 @@ export declare const imageFieldSchema: z.ZodObject<{
     list: z.ZodOptional<z.ZodBoolean>;
     isTitle: z.ZodOptional<z.ZodBoolean>;
     isBody: z.ZodOptional<z.ZodBoolean>;
+    maxItems: z.ZodOptional<z.ZodNumber>;
 } & {
     type: z.ZodLiteral<"image">;
     aspect: z.ZodOptional<z.ZodString>;
@@ -46,6 +47,7 @@ export declare const imageFieldSchema: z.ZodObject<{
     list?: boolean | undefined;
     isTitle?: boolean | undefined;
     isBody?: boolean | undefined;
+    maxItems?: number | undefined;
     aspect?: string | undefined;
     altOptional?: boolean | undefined;
 }, {
@@ -57,9 +59,16 @@ export declare const imageFieldSchema: z.ZodObject<{
     list?: boolean | undefined;
     isTitle?: boolean | undefined;
     isBody?: boolean | undefined;
+    maxItems?: number | undefined;
     aspect?: string | undefined;
     altOptional?: boolean | undefined;
 }>;
+/**
+ * A dotted field path for `optionSort: { field }`: non-empty segments, so `'a..b'` and `'.a'`
+ * fail at config time rather than sorting on a value no entry has.
+ * @internal Exported for the reference-options endpoint, which validates `sortField` the same way.
+ */
+export declare const referenceSortFieldSchema: z.ZodString;
 /** @internal Exported for tests. */
 export declare const referenceFieldSchema: z.ZodObject<{
     name: z.ZodString;
@@ -69,6 +78,7 @@ export declare const referenceFieldSchema: z.ZodObject<{
     list: z.ZodOptional<z.ZodBoolean>;
     isTitle: z.ZodOptional<z.ZodBoolean>;
     isBody: z.ZodOptional<z.ZodBoolean>;
+    maxItems: z.ZodOptional<z.ZodNumber>;
 } & {
     type: z.ZodLiteral<"reference">;
     collections: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -85,6 +95,16 @@ export declare const referenceFieldSchema: z.ZodObject<{
         label: string;
     }>]>, "many">>;
     includeBody: z.ZodOptional<z.ZodBoolean>;
+    optionSort: z.ZodOptional<z.ZodUnion<[z.ZodEnum<["label", "collection"]>, z.ZodObject<{
+        field: z.ZodString;
+        direction: z.ZodOptional<z.ZodEnum<["asc", "desc"]>>;
+    }, "strict", z.ZodTypeAny, {
+        field: string;
+        direction?: "asc" | "desc" | undefined;
+    }, {
+        field: string;
+        direction?: "asc" | "desc" | undefined;
+    }>]>>;
 }, "strip", z.ZodTypeAny, {
     name: string;
     type: "reference";
@@ -98,10 +118,15 @@ export declare const referenceFieldSchema: z.ZodObject<{
     list?: boolean | undefined;
     isTitle?: boolean | undefined;
     isBody?: boolean | undefined;
+    maxItems?: number | undefined;
     collections?: string[] | undefined;
     entryTypes?: string[] | undefined;
     displayField?: string | undefined;
     includeBody?: boolean | undefined;
+    optionSort?: "collection" | "label" | {
+        field: string;
+        direction?: "asc" | "desc" | undefined;
+    } | undefined;
 }, {
     name: string;
     type: "reference";
@@ -115,10 +140,15 @@ export declare const referenceFieldSchema: z.ZodObject<{
     list?: boolean | undefined;
     isTitle?: boolean | undefined;
     isBody?: boolean | undefined;
+    maxItems?: number | undefined;
     collections?: string[] | undefined;
     entryTypes?: string[] | undefined;
     displayField?: string | undefined;
     includeBody?: boolean | undefined;
+    optionSort?: "collection" | "label" | {
+        field: string;
+        direction?: "asc" | "desc" | undefined;
+    } | undefined;
 }>;
 export declare const blockSchema: z.ZodObject<{
     name: z.ZodString;

package/dist/config/schemas/field.js

@@ -12,6 +12,9 @@ const fieldBaseSchema = z.object({
     list: z.boolean().optional(),
     isTitle: z.boolean().optional(),
     isBody: z.boolean().optional(),
+    // Listed so a parse keeps it (zod strips unknown keys); which fields may carry it is
+    // `ensureMaxItemsPlacement`'s call (config/validation.ts).
+    maxItems: z.number().int().positive().optional(),
 });
 export const selectOptionSchema = z.union([
     z.string(),
@@ -94,6 +97,14 @@ const selectFieldSchema = fieldBaseSchema.extend({
     type: z.literal('select'),
     options: z.array(selectOptionSchema).min(1),
 });
+/**
+ * A dotted field path for `optionSort: { field }`: non-empty segments, so `'a..b'` and `'.a'`
+ * fail at config time rather than sorting on a value no entry has.
+ * @internal Exported for the reference-options endpoint, which validates `sortField` the same way.
+ */
+export const referenceSortFieldSchema = z
+    .string()
+    .regex(/^[^.]+(\.[^.]+)*$/, 'must be a field name or a dotted path such as "meta.publishedAt"');
 // At least one of `collections` or `entryTypes` must be specified (enforced by config validation).
 /** @internal Exported for tests. */
 export const referenceFieldSchema = fieldBaseSchema.extend({
@@ -107,6 +118,17 @@ export const referenceFieldSchema = fieldBaseSchema.extend({
     // runtime-consumed flag and the feature would no-op with no error. (`resolvedSchema` is
     // absent on purpose — it is type-inference-only and stripping it changes no behavior.)
     includeBody: z.boolean().optional(),
+    optionSort: z
+        .union([
+        z.enum(['label', 'collection']),
+        z
+            .object({
+            field: referenceSortFieldSchema,
+            direction: z.enum(['asc', 'desc']).optional(),
+        })
+            .strict(),
+    ])
+        .optional(),
 });
 // Use a mutable holder to enable forward references in recursive z.lazy() closures.
 // blockSchema/objectFieldSchema reference fieldHolder[0] via z.lazy, which is resolved

package/dist/config/types.d.ts

@@ -9,6 +9,7 @@ import type { LogicalPath, ContentId } from '../paths/types.js';
 import type { PermissionPath } from '../authorization/types.js';
 import type { EntryLinkUrlResolver } from '../entry-link-resolver.js';
 import type { CropRect } from '../assets/transform-directives.js';
+import type { SeoFieldLocation } from '../static/seo.js';
 declare const scalarFieldTypes: readonly ["string", "number", "boolean", "datetime", "code"];
 export declare const markdownFieldTypes: readonly ["markdown", "mdx"];
 export declare const primitiveFieldTypes: readonly ["string", "number", "boolean", "datetime", "code", "markdown", "mdx"];
@@ -45,12 +46,20 @@ interface BaseFieldConfig {
     /** Mark this field as the display title for entries using this schema. At most one field per schema. */
     isTitle?: boolean;
     /**
-     * Mark this field as the body content for md/mdx entries.
-     * The field must be type 'markdown' or 'mdx'. At most one per schema.
-     * When present, the file's markdown content is mapped to this field,
-     * making TypeFromEntrySchema include it without manual `& { body: string }`.
+     * Mark this field as the entry's body. The field must be type 'markdown' or 'mdx'. At most one
+     * per schema. On an md/mdx entry, the file's markdown content is mapped to this field, making
+     * TypeFromEntrySchema include it without manual `& { body: string }`. On a json/yaml entry, it
+     * is the prose a link-only reference omits. Either way a reference carries it only with
+     * `includeBody: true`.
      */
     isBody?: boolean;
+    /**
+     * On a `list: true` field or a `block` field: the most items the list may hold. The editor
+     * stops adding at the cap, saving over it is refused, and a static build fails on an entry
+     * over it, so adding a cap to a list that already holds more fails the build until the
+     * content is fixed. `ensureMaxItemsPlacement` (`validation.ts`) refuses it elsewhere in a registry schema.
+     */
+    maxItems?: number;
 }
 interface PrimitiveFieldConfig extends BaseFieldConfig {
     type: (typeof scalarFieldTypes)[number];
@@ -117,7 +126,9 @@ export interface ReferenceFieldConfig extends BaseFieldConfig {
     options?: ReferenceOption[];
     /**
      * Include the referenced entry's body in the resolved value, under that entry type's own
-     * body field name (`isBody: true`, else `body`). Defaults to `false`.
+     * body field name (`isBody: true`, else `body`). Defaults to `false`. The body is an md/mdx
+     * target's markdown content, or a json/yaml target's `isBody` field; a json/yaml field merely
+     * named `body` is ordinary data and always resolves.
      *
      * This is the embed-vs-link distinction, declared where it is actually known. A reference
      * that **embeds** its target — a shared call-to-action block rendered inline — needs the
@@ -131,12 +142,31 @@ export interface ReferenceFieldConfig extends BaseFieldConfig {
      * contains both kinds: a page with a shared CTA *and* a related-posts list cannot be served
      * by a single call-level setting, and a call-level flag would mean the same field resolved
      * to different shapes in different places.
-     *
-     * Only affects formats that HAVE a separate body — md and mdx. A json/yaml target's whole
-     * document is already its data, so this is a no-op there.
      */
     includeBody?: boolean;
+    /** Order of the picker's options. Default `'label'`. See {@link ReferenceOptionSort}. */
+    optionSort?: ReferenceOptionSort;
 }
+/**
+ * How a reference picker orders its options. Every mode runs after the search filter.
+ *
+ * - `'label'`: alphabetical by label.
+ * - `'collection'`: one group per collection, in content-tree order (a collection, then its
+ *   subcollections), each in its collection's own order, then by label.
+ * - `{ field, direction }`: by the target's value at `field`, a dotted path for a nested field
+ *   (`'meta.publishedAt'`). Numbers compare as numbers and sort before strings (`'desc'` reverses that too); strings compare
+ *   as plain text, so point it at an ISO date (`YYYY-MM-DD`; unquoted frontmatter dates count):
+ *   a display date like `'March 4'` sorts by month name. An entry with no value sorts first
+ *   under `'desc'`, last under `'asc'` (the default). Ties go by label.
+ *
+ * @example
+ * // Newest first, with entries not yet given a date at the top.
+ * optionSort: { field: 'publishedAt', direction: 'desc' }
+ */
+export type ReferenceOptionSort = 'label' | 'collection' | {
+    field: string;
+    direction?: 'asc' | 'desc';
+};
 /**
  * Image field config. The value is a structured object (see `ImageFieldValue`
  * below), not a bare URL string.
@@ -460,6 +490,8 @@ export interface CanopyConfig {
     validateEntry?: ValidateEntryHook;
     /** Site default for every field checked as MDX — see {@link CanopyConfigInput.mdxAllow}. */
     mdxAllow?: MdxAllowlist;
+    /** Where entries keep their SEO fields — see {@link CanopyConfigInput.seo}. */
+    seo?: SeoFieldLocation;
     /** Dev-mode-only behavior — see {@link CanopyConfigInput.dev}. */
     dev?: DevConfig;
 }
@@ -549,6 +581,13 @@ export interface CanopyConfigInput {
     validateEntry?: ValidateEntryHook;
     /** What every field checked as MDX accepts; a field's own `mdxAllow` replaces it key by key. */
     mdxAllow?: MdxAllowlist;
+    /**
+     * Where entries keep their SEO fields: `group` when `defineSeoFieldGroup({ group })` nests
+     * them, `fields` for renamed ones. Omit for the flat default. Every surface that reads an
+     * entry's `noindex` reads it here: the sitemap and page metadata helpers `createNextCanopyContext`
+     * returns, AI content and the editor's reference picker.
+     */
+    seo?: SeoFieldLocation;
     /** Dev-mode-only behavior (content-sync divergence detection). Ignored when mode !== 'dev'. */
     dev?: DevConfig;
 }

package/dist/config/validation.d.ts

@@ -62,6 +62,12 @@ export declare const ensureNoGroupsInsideComplexFields: (fields: unknown) => voi
  * never be saved empty, so it would never be stamped. Throws on the first problem.
  */
 export declare const ensureStampOnPublishPlacement: (fields: unknown, scopeLabel?: string) => void;
+/**
+ * Check that `maxItems` is a positive whole number on a field that holds items: a `list: true`
+ * field or a `block` field. Recurses into groups, objects and block templates like
+ * `ensureStampOnPublishPlacement`. Throws on the first problem.
+ */
+export declare const ensureMaxItemsPlacement: (fields: unknown, scopeLabel?: string) => void;
 /**
  * Check every markdown and mdx field's `mdxAllow` against its schema and its `renderAs`,
  * `mdxAllow` and `executable` against each other. Throws on the first problem.

package/dist/config/validation.js

@@ -294,6 +294,39 @@ export const ensureStampOnPublishPlacement = (fields, scopeLabel = 'entry schema
     };
     check(fields, undefined);
 };
+/**
+ * Check that `maxItems` is a positive whole number on a field that holds items: a `list: true`
+ * field or a `block` field. Recurses into groups, objects and block templates like
+ * `ensureStampOnPublishPlacement`. Throws on the first problem.
+ */
+export const ensureMaxItemsPlacement = (fields, scopeLabel = 'entry schema') => {
+    const refuse = (f, why) => {
+        throw new Error(`${scopeLabel}: field "${f.name ?? 'unknown'}" has maxItems, ${why}`);
+    };
+    const check = (scopeFields) => {
+        if (!Array.isArray(scopeFields))
+            return;
+        for (const field of scopeFields) {
+            const f = field;
+            if (f?.maxItems !== undefined) {
+                if (typeof f.maxItems !== 'number' || !Number.isInteger(f.maxItems) || f.maxItems < 1) {
+                    refuse(f, 'which must be a positive whole number');
+                }
+                if (f.list !== true && f.type !== 'block') {
+                    refuse(f, 'but it is not a list; only a `list: true` field or a block field holds items');
+                }
+            }
+            if (f?.type === 'group' || f?.type === 'object')
+                check(f.fields);
+            if (f?.type === 'block' && Array.isArray(f.templates)) {
+                for (const template of f.templates) {
+                    check(template.fields);
+                }
+            }
+        }
+    };
+    check(fields);
+};
 /**
  * Check every markdown and mdx field's `mdxAllow` against its schema and its `renderAs`,
  * `mdxAllow` and `executable` against each other. Throws on the first problem.

package/dist/content-store.d.ts

@@ -557,10 +557,11 @@ export declare class ContentStore {
      * Measured (2000 occurrences of one target, local disk, the friendliest case for NOT
      * caching): cloning a snippet-sized target is ~63x cheaper than re-reading and parsing it, a
      * 265KB JSON target ~0.8x -- a wash at the pathological end, never a blow-up, and on the
-     * EFS/NFS this targets the syscall the memo removes dominates both. An md/mdx target
-     * resolves to its FRONTMATTER unless the field sets `includeBody`, which is why
-     * `includeBody` is opt-in per field: an embedded body sits inside the memoized object and is
-     * cloned once per referencing entry.
+     * EFS/NFS this targets the syscall the memo removes dominates both. A target resolves
+     * without its body (an md/mdx target to its frontmatter, a json/yaml one without its `isBody`
+     * field) unless the field sets `includeBody`, which is why `includeBody` is opt-in per
+     * field: an embedded body sits inside the memoized object and is cloned once per referencing
+     * entry.
      */
     private resolveSingleReference;
     /**

package/dist/content-store.js

@@ -20,7 +20,7 @@ import { serializeFrontmatter, serializeYaml } from './utils/content-serialize.j
 import { serializeJson } from './utils/json-source-splice.js';
 import { withLock } from './utils/async-mutex.js';
 import { assertContentWriteLockHeld, ContentWriteLockBusyError, DEFAULT_CONTENT_WRITE_LOCK_WAIT_MS, withContentWriteLock, } from './utils/content-write-lock.js';
-import { findBodyFieldName } from './utils/body-field.js';
+import { findBodyFieldName, linkOnlyReferenceData } from './utils/body-field.js';
 import { withItemKeys } from './item-keys.js';
 import { buildMissingReference, buildResolvedReference, buildRestrictedReference, } from './entry-schema.js';
 import { warnDanglingReference } from './dangling-reference-log.js';
@@ -1611,10 +1611,11 @@ export class ContentStore {
      * Measured (2000 occurrences of one target, local disk, the friendliest case for NOT
      * caching): cloning a snippet-sized target is ~63x cheaper than re-reading and parsing it, a
      * 265KB JSON target ~0.8x -- a wash at the pathological end, never a blow-up, and on the
-     * EFS/NFS this targets the syscall the memo removes dominates both. An md/mdx target
-     * resolves to its FRONTMATTER unless the field sets `includeBody`, which is why
-     * `includeBody` is opt-in per field: an embedded body sits inside the memoized object and is
-     * cloned once per referencing entry.
+     * EFS/NFS this targets the syscall the memo removes dominates both. A target resolves
+     * without its body (an md/mdx target to its frontmatter, a json/yaml one without its `isBody`
+     * field) unless the field sets `includeBody`, which is why `includeBody` is opt-in per
+     * field: an embedded body sits inside the memoized object and is cloned once per referencing
+     * entry.
      */
     resolveSingleReference(id, idIndex, includeBody, cache, access) {
         if (!cache)
@@ -1738,9 +1739,13 @@ export class ContentStore {
             //
             // `'body' in doc` narrows the ContentDocument union to its markdown variant, so
             // `doc.body`/`doc.bodyFieldName` are reachable at all -- a type guard, not a redundant
-            // runtime check. Only a field that asked to EMBED its target passes a body at all.
+            // runtime check. Only a field that asked to EMBED its target passes a body at all, and
+            // only such a field keeps a json/yaml target's `isBody` field.
             const bodyForEmbed = includeBody && 'body' in doc ? { fieldName: doc.bodyFieldName, value: doc.body } : undefined;
-            return buildResolvedReference(doc.data, meta, bodyForEmbed);
+            const data = includeBody
+                ? doc.data
+                : linkOnlyReferenceData(doc.data, doc.format, this.entryTypeOf(location.collection, location.relativePath)?.schema);
+            return buildResolvedReference(data, meta, bodyForEmbed);
         }
         catch (error) {
             // Index hit but the file is gone — the typical symptom of an external

package/dist/editor/FormRenderer.js

@@ -16,6 +16,7 @@ import { DateTimeField } from './fields/DateTimeField.js';
 import { BlockField } from './fields/BlockField.js';
 import { SelectField } from './fields/SelectField.js';
 import { ReferenceField } from './fields/ReferenceField.js';
+import { ReferenceListField } from './fields/ReferenceListField.js';
 import { CodeField } from './fields/CodeField.js';
 import { ImageField } from './fields/ImageField.js';
 import { ObjectField } from './fields/ObjectField.js';
@@ -201,7 +202,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
         switch (field.type) {
             case 'string':
                 if (field.list) {
-                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
+                    return wrapWithComments(_jsx(StringListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue) ? currentValue : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, maxItems: field.maxItems }, fieldKey(path)));
                 }
                 return wrapWithComments(_jsx(TextField, { id: fieldId, label: label, description: field.description, value: currentValue ?? '', onChange: update, dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             case 'boolean':
@@ -210,7 +211,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                 if (field.list) {
                     return wrapWithComments(_jsx(NumberListField, { id: fieldId, label: label, description: field.description, value: Array.isArray(currentValue)
                             ? currentValue.filter((v) => typeof v === 'number')
-                            : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
+                            : [], onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, maxItems: field.maxItems }, fieldKey(path)));
                 }
                 return wrapWithComments(_jsx(NumberField, { id: fieldId, label: label, description: field.description, value: typeof currentValue === 'number' ? currentValue : undefined, onChange: (v) => update(v), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
             case 'datetime':
@@ -229,22 +230,23 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
                         ? Array.isArray(currentValue)
                             ? currentValue
                             : []
-                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
+                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, maxItems: isMulti ? selectField.maxItems : undefined }, fieldKey(path)));
             }
             case 'reference': {
                 const referenceField = field;
                 const staticOptions = referenceField.options
                     ? normalizeOptions(referenceField.options)
                     : undefined;
-                const isMulti = Boolean(referenceField.list);
-                return wrapWithComments(_jsx(ReferenceField, { id: fieldId, label: label, description: field.description, options: staticOptions?.map((opt) => ({
-                        label: opt.label,
-                        value: opt.value,
-                    })), collections: referenceField.collections, entryTypes: referenceField.entryTypes, displayField: referenceField.displayField, branch: branch, value: isMulti
-                        ? Array.isArray(currentValue)
-                            ? currentValue
-                            : []
-                        : (currentValue ?? ''), multiple: isMulti, onChange: (next) => update(next), dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly }, fieldKey(path)));
+                if (referenceField.list) {
+                    return wrapWithComments(_jsx(ReferenceListField, { id: fieldId, label: label, description: field.description, required: field.required, options: staticOptions, collections: referenceField.collections, entryTypes: referenceField.entryTypes, displayField: referenceField.displayField, branch: branch, optionSort: referenceField.optionSort, value: Array.isArray(currentValue) ? currentValue : [], onChange: (next) => update(next), path: path, canopyPath: canopyPath, readOnly: readOnly, resetKey: boundaryResetKey, maxItems: referenceField.maxItems, itemError: (index) => fieldErrors?.[normalizeCanopyPath([...path, index])], onRemoved: (index, id, title) => onRemoved?.({
+                            kind: 'list-item',
+                            listPath: path,
+                            index,
+                            item: id,
+                            label: `"${title}" from ${label}`,
+                        }) }, fieldKey(path)));
+                }
+                return wrapWithComments(_jsx(ReferenceField, { id: fieldId, label: label, description: field.description, options: staticOptions, collections: referenceField.collections, entryTypes: referenceField.entryTypes, displayField: referenceField.displayField, branch: branch, optionSort: referenceField.optionSort, value: currentValue ?? '', onChange: (next) => update(next), dataCanopyField: canopyPath, readOnly: readOnly }, fieldKey(path)));
             }
             case 'image': {
                 const imageField = field;
@@ -256,7 +258,7 @@ export const FormRenderer = ({ fields, value, onChange, customRenderers, branch
             }
             case 'block': {
                 const blockField = field;
-                return wrapWithComments(_jsx(BlockField, { label: label, required: field.required, description: field.description, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, resetKey: boundaryResetKey, hasErrors: rowHasErrors(path), onRemoved: (index, block) => {
+                return wrapWithComments(_jsx(BlockField, { label: label, required: field.required, description: field.description, templates: blockField.templates, value: (Array.isArray(currentValue) ? currentValue : []), onChange: (next) => update(next), renderField: renderField, path: path, dataCanopyField: normalizeCanopyPath(path), readOnly: readOnly, resetKey: boundaryResetKey, hasErrors: rowHasErrors(path), maxItems: blockField.maxItems, onRemoved: (index, block) => {
                         const template = blockField.templates.find((t) => t.name === block.template);
                         onRemoved?.({
                             kind: 'list-item',

package/dist/editor/copy.d.ts

@@ -19,3 +19,8 @@ export declare const EDITOR_ACTIONS: {
     readonly changeUrl: "Change URL";
     readonly changeSlug: "Change slug";
 };
+/**
+ * Why a list at its `maxItems` adds nothing more, as a disabled Add's Tooltip or an input's hint.
+ * `one` and `many` name what the list holds.
+ */
+export declare const listFullReason: (maxItems: number, one?: string, many?: string) => string;

package/dist/editor/copy.js

@@ -19,3 +19,8 @@ export const EDITOR_ACTIONS = {
     changeUrl: 'Change URL',
     changeSlug: 'Change slug',
 };
+/**
+ * Why a list at its `maxItems` adds nothing more, as a disabled Add's Tooltip or an input's hint.
+ * `one` and `many` name what the list holds.
+ */
+export const listFullReason = (maxItems, one = 'item', many = 'items') => `This list holds at most ${maxItems} ${maxItems === 1 ? one : many}. Remove one to add another.`;

package/dist/editor/fields/BlockField.d.ts

@@ -26,6 +26,8 @@ export interface BlockFieldProps {
     hasErrors?: (index: number) => boolean;
     /** Told of each block Remove takes out, so the caller can offer Undo. */
     onRemoved?: (index: number, block: BlockInstance) => void;
+    /** The most blocks the list holds; at it, every add control is disabled and says why. */
+    maxItems?: number;
 }
 export declare const BlockField: React.FC<BlockFieldProps>;
 export {};

package/dist/editor/fields/BlockField.js

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useId, useRef, useState } from 'react';
-import { ActionIcon, Box, Button, Group, Menu, Paper, ScrollArea, Stack, Text, Tooltip, } from '@mantine/core';
+import { ActionIcon, Box, Button, Group, Menu, Paper, ScrollArea, Stack, Text, Tooltip, VisuallyHidden, } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconPlus } from '@tabler/icons-react';
 import { ITEM_KEY, mintItemKey, withFreshItemKeys } from '../../item-keys.js';
 import { isPlainRecord } from '../../validation/field-traversal.js';
 import { formatCanopyPath } from '../canopy-path.js';
+import { listFullReason } from '../copy.js';
 import { useFieldCommentControl } from '../comments/field-comment-context.js';
 import { ExpandAllButton } from './ExpandAllButton.js';
 import { groupDescriptionProps } from './FieldDescription.js';
@@ -22,12 +23,13 @@ const ADD_SECTION = 'Add section';
  * The block templates as a menu, each with its description, so an editor picks a section by
  * what it is for. `target` is the control that opens it.
  */
-const TemplateMenu = ({ templates, onPick, onOpenChange, target }) => (_jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "md", width: 320, onChange: onOpenChange, children: [target, _jsx(Menu.Dropdown, { "data-testid": "block-template-menu", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "auto", children: templates.map((template) => (_jsxs(Menu.Item, { onClick: () => onPick(template.name), "data-testid": `block-template-${template.name}`, children: [_jsx(Text, { size: "sm", fw: 500, children: schemaLabel(template) }), template.description && (_jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'normal' }, children: template.description }))] }, template.name))) }) })] }));
+const TemplateMenu = ({ templates, onPick, onOpenChange, disabled, target }) => (_jsxs(Menu, { position: "bottom-start", withinPortal: true, shadow: "md", width: 320, onChange: onOpenChange, disabled: disabled, children: [target, _jsx(Menu.Dropdown, { "data-testid": "block-template-menu", children: _jsx(ScrollArea.Autosize, { mah: 360, type: "auto", children: templates.map((template) => (_jsxs(Menu.Item, { onClick: () => onPick(template.name), "data-testid": `block-template-${template.name}`, children: [_jsx(Text, { size: "sm", fw: 500, children: schemaLabel(template) }), template.description && (_jsx(Text, { size: "xs", c: "dimmed", style: { whiteSpace: 'normal' }, children: template.description }))] }, template.name))) }) })] }));
 /**
  * The gap before a block. Its add control shows while the gap is hovered, the control is focused
  * or its menu is open, and stays in the tab order, so a keyboard reaches it before each block.
  */
-const InsertBetween = ({ templates, onPick }) => {
+const InsertBetween = ({ templates, onPick, blockedReason }) => {
+    const reasonId = useId();
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
     const [opened, setOpened] = useState(false);
@@ -35,9 +37,9 @@ const InsertBetween = ({ templates, onPick }) => {
     const noHover = useMediaQuery('(hover: none)');
     const shown = hovered || focused || opened;
     const opacity = shown ? 1 : noHover ? 0.6 : 0;
-    return (_jsxs(Box, { h: 20, pos: "relative", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), "data-testid": "block-insert-between", children: [_jsx(Box, { "aria-hidden": true, pos: "absolute", left: 0, right: 0, top: "50%", h: 2, bg: "var(--mantine-primary-color-filled)", style: { opacity: shown ? 1 : 0, transition: 'opacity 120ms ease' } }), _jsx(Group, { justify: "center", h: "100%", style: { position: 'relative' }, children: _jsx(TemplateMenu, { templates: templates, onPick: onPick, onOpenChange: setOpened, target: _jsx(Tooltip, { label: "Add section here", openDelay: 300, children: _jsx(Menu.Target, { children: _jsx(ActionIcon, { size: "sm", radius: "xl", variant: "default", "aria-label": "Add section here", onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: { opacity, transition: 'opacity 120ms ease' }, children: _jsx(IconPlus, { size: 14, "aria-hidden": true }) }) }) }) }) })] }));
+    return (_jsxs(Box, { h: 20, pos: "relative", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), "data-testid": "block-insert-between", children: [_jsx(Box, { "aria-hidden": true, pos: "absolute", left: 0, right: 0, top: "50%", h: 2, bg: "var(--mantine-primary-color-filled)", style: { opacity: shown ? 1 : 0, transition: 'opacity 120ms ease' } }), _jsx(Group, { justify: "center", h: "100%", style: { position: 'relative' }, children: _jsx(TemplateMenu, { templates: templates, onPick: onPick, onOpenChange: setOpened, disabled: !!blockedReason, target: _jsx(Tooltip, { label: blockedReason ?? 'Add section here', openDelay: 300, multiline: !!blockedReason, maw: 280, children: _jsx(Menu.Target, { children: _jsxs(ActionIcon, { size: "sm", radius: "xl", variant: "default", "aria-label": "Add section here", "aria-disabled": blockedReason ? true : undefined, "aria-describedby": blockedReason ? reasonId : undefined, "data-disabled": blockedReason ? true : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), style: { opacity, transition: 'opacity 120ms ease' }, children: [_jsx(IconPlus, { size: 14, "aria-hidden": true }), blockedReason && (_jsx(VisuallyHidden, { component: "span", id: reasonId, children: blockedReason }))] }) }) }) }) })] }));
 };
-export const BlockField = ({ label, required, description, templates, value, onChange, renderField, path, dataCanopyField, readOnly = false, resetKey = '', hasErrors, onRemoved, }) => {
+export const BlockField = ({ label, required, description, templates, value, onChange, renderField, path, dataCanopyField, readOnly = false, resetKey = '', hasErrors, onRemoved, maxItems, }) => {
     const descriptionBaseId = useId();
     const commentControl = useFieldCommentControl(dataCanopyField ?? formatCanopyPath(path));
     const keysFor = useListItemKeys();
@@ -48,7 +50,12 @@ export const BlockField = ({ label, required, description, templates, value, onC
         if (!readOnly)
             onChange(next);
     };
+    const fullReason = maxItems !== undefined && value.length >= maxItems
+        ? listFullReason(maxItems, 'section', 'sections')
+        : undefined;
     const insertAt = (index, block) => {
+        if (fullReason)
+            return;
         focusAfterRenderRef.current = index;
         emit([...value.slice(0, index), block, ...value.slice(index)]);
     };
@@ -81,7 +88,7 @@ export const BlockField = ({ label, required, description, templates, value, onC
                         ...value.slice(0, idx + 1),
                         withFreshItemKeys({ type: 'block', name: 'blocks', templates }, structuredClone(value[idx])),
                         ...value.slice(idx + 1),
-                    ]), onRemove: (idx) => {
+                    ]), duplicateBlockedReason: fullReason, onRemove: (idx) => {
                         if (readOnly)
                             return;
                         const block = value[idx];
@@ -89,7 +96,7 @@ export const BlockField = ({ label, required, description, templates, value, onC
                         onRemoved?.(idx, block);
                     }, renderBetween: readOnly
                         ? undefined
-                        : (idx) => _jsx(InsertBetween, { templates: templates, onPick: addAt(idx) }), renderItem: (block, idx) => {
+                        : (idx) => (_jsx(InsertBetween, { templates: templates, onPick: addAt(idx), blockedReason: fullReason })), renderItem: (block, idx) => {
                         const template = findTemplate(templates, block.template);
                         const currentPath = [...path, idx];
                         if (!template) {
@@ -99,5 +106,5 @@ export const BlockField = ({ label, required, description, templates, value, onC
                                 ...(isPlainRecord(block.value) ? block.value : {}),
                                 [f.name]: next,
                             }), [...currentPath, f.name]) }, f.name)));
-                    } }), value.length === 0 && (_jsx(Text, { size: "sm", c: "dimmed", children: readOnly ? 'No sections.' : 'No sections yet.' })), !readOnly && (_jsx(Group, { children: _jsx(TemplateMenu, { templates: templates, onPick: addAt(value.length), target: _jsx(Menu.Target, { children: _jsx(Button, { variant: "light", size: "xs", leftSection: _jsx(IconPlus, { size: 14, "aria-hidden": true }), "data-testid": "block-add-section", children: ADD_SECTION }) }) }) }))] }) }));
+                    } }), value.length === 0 && (_jsx(Text, { size: "sm", c: "dimmed", children: readOnly ? 'No sections.' : 'No sections yet.' })), !readOnly && (_jsx(Group, { children: _jsx(TemplateMenu, { templates: templates, onPick: addAt(value.length), disabled: !!fullReason, target: _jsx(Tooltip, { label: fullReason, disabled: !fullReason, multiline: true, maw: 280, children: _jsx(Menu.Target, { children: _jsx(Button, { variant: "light", size: "xs", leftSection: _jsx(IconPlus, { size: 14, "aria-hidden": true }), "data-disabled": fullReason ? true : undefined, "aria-disabled": fullReason ? true : undefined, "data-testid": "block-add-section", children: ADD_SECTION }) }) }) }) }))] }) }));
 };

package/dist/editor/fields/ItemList.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
+import { type MantineColor } from '@mantine/core';
 import type { ItemExpansion } from './item-expansion.js';
 /** What a collapsed row shows: its title, and a second value from its content. */
 interface ItemSummary {
     title: string;
     secondary?: string;
+    /** A status shown after the title, in its colour's light variant; part of the row's name. */
+    badge?: {
+        label: string;
+        color: MantineColor;
+    };
+    /** The title is still loading: the row shows a placeholder in its place. */
+    pending?: boolean;
 }
 export interface ItemListProps<T> {
     items: readonly T[];
@@ -20,7 +28,10 @@ export interface ItemListProps<T> {
     /** True when a field inside row `index` has a validation error. */
     hasErrors?: (index: number) => boolean;
     onMove: (from: number, to: number) => void;
-    onDuplicate: (index: number) => void;
+    /** Without it, the row menu offers no Duplicate. */
+    onDuplicate?: (index: number) => void;
+    /** Why Duplicate can't act now, such as a list at its `maxItems`; shown in its place. */
+    duplicateBlockedReason?: string;
     /** Takes row `index` out; focus has already moved to the enclosing `[data-removal-focus]` list. */
     onRemove: (index: number) => void;
     /** Rendered before row `index`, such as a block list's insert-here control. */
@@ -30,13 +41,20 @@ export interface ItemListProps<T> {
      * Cleared once used.
      */
     focusAfterRenderRef?: React.MutableRefObject<number | null>;
+    /**
+     * Said through the list's live region, by a caller whose own control keeps focus when it adds a
+     * row. Pass a new object for each announcement.
+     */
+    announcement?: {
+        message: string;
+    };
     'data-testid'?: string;
 }
 /**
  * The rows of an object list or block list: each collapses to a one-line summary and carries a
  * drag handle (pointer and keyboard, via dnd-kit) and a "…" menu with Move up, Move down,
- * Duplicate and Remove. A read-only list keeps only collapsing. A collapsed row stays mounted
+ * Duplicate (when the list offers it) and Remove. A read-only list keeps only collapsing. A collapsed row stays mounted
  * and opens when something asks to reveal a field inside it (`REVEAL_FIELD_EVENT`).
  */
-export declare function ItemList<T>({ items, itemKeys, path, readOnly, expansion, summarize, renderItem, describe, hasErrors, onMove, onDuplicate, onRemove, renderBetween, focusAfterRenderRef, 'data-testid': testId, }: ItemListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ItemList<T>({ items, itemKeys, path, readOnly, expansion, summarize, renderItem, describe, hasErrors, onMove, onDuplicate, onRemove, renderBetween, focusAfterRenderRef, announcement: callerAnnouncement, duplicateBlockedReason, 'data-testid': testId, }: ItemListProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};