@navette-js/forms 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/builder.d.ts

@@ -1,7 +1,7 @@
 import { type ColorManager } from '@navette-js/support';
 import { Action } from '@navette-js/actions';
 import { Schema, type Component } from '@navette-js/schemas';
-import { Field } from './index.ts';
+import { Field, type Rule } from './index.ts';
 /** Whether an item key is acceptable: keys come from the browser. */
 export declare const isItemKey: (key: string) => boolean;
 /** Random four-character alphanumeric key. */
@@ -32,9 +32,17 @@ export declare class Block {
     private _icon;
     private _schema;
     private _defaults;
+    private _pickerGroup;
+    private _maxItems;
     constructor(name: string);
+    /** How many items of this block the builder may hold; at the limit, the block leaves the picker (checked on the server). */
+    maxItems(count: number | null): this;
+    getMaxItems(): number | null;
     static make(name: string): Block;
     label(label: string | null): this;
+    /** Group of the block in the block picker (also set by passing `{ 'Group label': [blocks] }` to `blocks()`). */
+    pickerGroup(label: string | null): this;
+    getPickerGroup(): string | null;
     icon(name: string | null): this;
     /** Item components: a function called for each item (with its current data). */
     schema(factory: (ctx: BlockContext) => Component[]): this;
@@ -66,10 +74,20 @@ export declare class Builder extends Field {
     private _addIcon;
     private _addAlignment;
     private _maxItems;
+    private _minItems;
+    private _addable;
+    private _deletable;
+    private _reorderable;
+    private _reorderableWithButtons;
+    private _collapsible;
+    private _collapsed;
+    private _persistCollapsed;
+    private _searchable;
     private _extraClass;
     private _uuid;
     static make(name: string): Builder;
-    blocks(blocks: Block[] | (() => Block[])): this;
+    /** Blocks, or `{ 'Group label': [blocks] }` to group them in the block picker. */
+    blocks(blocks: Block[] | Record<string, Block[]> | (() => Block[])): this;
     blockPickerColumns(columns?: number | null): this;
     blockPickerWidth(width: string | null): this;
     labelBetweenItems(label: string | null): this;
@@ -89,12 +107,35 @@ export declare class Builder extends Field {
     addActionIcon(name: string | null): this;
     addActionAlignment(alignment: 'start' | 'center' | 'end' | null): this;
     maxItems(count: number): this;
+    /** Minimum number of items, checked on the server. */
+    minItems(count: number | null): this;
+    /** `false`: no block picker (adding is refused on the server). */
+    addable(condition?: boolean): this;
+    /** `false`: no delete button (deleting is refused on the server). */
+    deletable(condition?: boolean): this;
+    /** `false`: items keep their order. */
+    reorderable(condition?: boolean): this;
+    private _dragAndDrop;
+    /** `false`: no drag and drop (buttons may still reorder, with `reorderableWithButtons()`). */
+    reorderableWithDragAndDrop(condition?: boolean): this;
+    private canDrag;
+    private canMove;
+    /** Move up / move down buttons in each item header. */
+    reorderableWithButtons(condition?: boolean): this;
+    /** Items can be collapsed from their header; `collapsed()` collapses them on load. */
+    collapsible(condition?: boolean): this;
+    collapsed(condition?: boolean): this;
+    /** Keeps each item's collapsed state in the browser (local storage). */
+    persistCollapsed(condition?: boolean): this;
+    /** Search field in the block picker. */
+    searchable(condition?: boolean): this;
+    getValidationRules(): Promise<Rule[]>;
     /** Class added to the root (e.g. `fi-fo-builder-not-contained`). */
     extraClass(name: string | null): this;
     generateUuidUsing(generator: () => string): this;
     getBlocks(): Block[];
     getBlock(name: unknown): Block | undefined;
-    /** Blocks offered in the picker (a subclass may remove some). */
+    /** Blocks offered in the picker: those under their `maxItems()` (a subclass may remove more). */
     getBlockPickerBlocks(): Block[];
     /** Well-formed items only: simple key, declared type, object data. Anything else the browser sends is ignored. */
     getItems(): Record<string, Item>;
@@ -115,7 +156,7 @@ export declare class Builder extends Field {
     getChildSchemas(): Schema[];
     protected newItem(block: Block): Item;
     /** A subclass may refuse adding (a rule cap, for instance). */
-    protected canAdd(_block: Block): boolean;
+    protected canAdd(block: Block): boolean;
     getActions(): Action[];
     /** Copy of an item; a subclass renews the keys of nested items. */
     protected cloneItem(item: Item): Item;

package/lib/builder.js

@@ -1,6 +1,6 @@
 // @navette-js/forms/builder — a list of items, each one a "block" picked from a menu.
 // The state is a map `item key → { type, data }`; key order is display order.
-// Not supported yet: block previews, collapsing, searching the block picker.
+// Not supported yet: block previews.
 import { Attributes, cls, e, icon, js, loadingIndicator, views, configured } from '@navette-js/support';
 import { t } from '@navette-js/support/i18n';
 import { Action } from '@navette-js/actions';
@@ -45,9 +45,17 @@ export class Block {
     _icon = null;
     _schema = () => [];
     _defaults = null;
+    _pickerGroup = null;
+    _maxItems = null;
     constructor(name) { this.name = name; }
+    /** How many items of this block the builder may hold; at the limit, the block leaves the picker (checked on the server). */
+    maxItems(count) { this._maxItems = count; return this; }
+    getMaxItems() { return this._maxItems; }
     static make(name) { return configured(new Block(name)); }
     label(label) { this._label = label; return this; }
+    /** Group of the block in the block picker (also set by passing `{ 'Group label': [blocks] }` to `blocks()`). */
+    pickerGroup(label) { this._pickerGroup = label; return this; }
+    getPickerGroup() { return this._pickerGroup; }
     icon(name) { this._icon = name; return this; }
     /** Item components: a function called for each item (with its current data). */
     schema(factory) { this._schema = factory; return this; }
@@ -77,10 +85,24 @@ export class Builder extends Field {
     _addIcon = null;
     _addAlignment = null;
     _maxItems = 100;
+    _minItems = null;
+    _addable = true;
+    _deletable = true;
+    _reorderable = true;
+    _reorderableWithButtons = false;
+    _collapsible = false;
+    _collapsed = false;
+    _persistCollapsed = false;
+    _searchable = false;
     _extraClass = null;
     _uuid = randomUUID;
     static make(name) { return configured(new Builder(name)); }
-    blocks(blocks) { this._blocks = blocks; this._resolvedBlocks = null; return this; }
+    /** Blocks, or `{ 'Group label': [blocks] }` to group them in the block picker. */
+    blocks(blocks) {
+        this._blocks = typeof blocks === 'function' || Array.isArray(blocks) ? blocks : Object.entries(blocks).flatMap(([group, list]) => list.map((block) => block.pickerGroup(group)));
+        this._resolvedBlocks = null;
+        return this;
+    }
     blockPickerColumns(columns = 2) { this._pickerColumns = columns; return this; }
     blockPickerWidth(width) { this._pickerWidth = width; return this; }
     labelBetweenItems(label) { this._labelBetweenItems = label; return this; }
@@ -100,13 +122,49 @@ export class Builder extends Field {
     addActionIcon(name) { this._addIcon = name; return this; }
     addActionAlignment(alignment) { this._addAlignment = alignment; return this; }
     maxItems(count) { this._maxItems = count; return this; }
+    /** Minimum number of items, checked on the server. */
+    minItems(count) { this._minItems = count; return this; }
+    /** `false`: no block picker (adding is refused on the server). */
+    addable(condition = true) { this._addable = condition; return this; }
+    /** `false`: no delete button (deleting is refused on the server). */
+    deletable(condition = true) { this._deletable = condition; return this; }
+    /** `false`: items keep their order. */
+    reorderable(condition = true) { this._reorderable = condition; return this; }
+    _dragAndDrop = true;
+    /** `false`: no drag and drop (buttons may still reorder, with `reorderableWithButtons()`). */
+    reorderableWithDragAndDrop(condition = true) { this._dragAndDrop = condition; return this; }
+    canDrag() { return this._reorderable && this._dragAndDrop; }
+    canMove() { return this._reorderable && (this._dragAndDrop || this._reorderableWithButtons); }
+    /** Move up / move down buttons in each item header. */
+    reorderableWithButtons(condition = true) { this._reorderableWithButtons = condition; return this; }
+    /** Items can be collapsed from their header; `collapsed()` collapses them on load. */
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    collapsed(condition = true) { this._collapsed = condition; if (condition)
+        this._collapsible = true; return this; }
+    /** Keeps each item's collapsed state in the browser (local storage). */
+    persistCollapsed(condition = true) { this._persistCollapsed = condition; return this; }
+    /** Search field in the block picker. */
+    searchable(condition = true) { this._searchable = condition; return this; }
+    async getValidationRules() {
+        const count = () => Object.keys(this.getItems()).length;
+        const rules = [];
+        if (await this.isRequired())
+            rules.push({ name: 'required', passes: () => count() > 0, message: (a) => `The ${a} field is required.` });
+        if (this._minItems !== null)
+            rules.push({ name: 'min', implicit: true, passes: () => count() >= this._minItems, message: (a) => `The ${a} field must have at least ${this._minItems} items.` });
+        const items = () => Object.values(this.getItems());
+        for (const block of this.getBlocks())
+            if (block.getMaxItems() !== null)
+                rules.push({ name: 'max', implicit: true, passes: () => items().filter((item) => item.type === block.name).length <= block.getMaxItems(), message: (a) => `The ${a} field must not have more than ${block.getMaxItems()} ${block.getLabel()} items.` });
+        return [...rules, ...this._rules];
+    }
     /** Class added to the root (e.g. `fi-fo-builder-not-contained`). */
     extraClass(name) { this._extraClass = name; return this; }
     generateUuidUsing(generator) { this._uuid = generator; return this; }
     getBlocks() { return (this._resolvedBlocks ??= typeof this._blocks === 'function' ? this._blocks() : this._blocks); }
     getBlock(name) { return typeof name === 'string' ? this.getBlocks().find((block) => block.name === name) : undefined; }
-    /** Blocks offered in the picker (a subclass may remove some). */
-    getBlockPickerBlocks() { return this.getBlocks(); }
+    /** Blocks offered in the picker: those under their `maxItems()` (a subclass may remove more). */
+    getBlockPickerBlocks() { const items = Object.values(this.getItems()); return this.getBlocks().filter((block) => block.getMaxItems() === null || items.filter((item) => item.type === block.name).length < block.getMaxItems()); }
     /** Well-formed items only: simple key, declared type, object data. Anything else the browser sends is ignored. */
     getItems() {
         const state = this.context().state;
@@ -165,7 +223,7 @@ export class Builder extends Field {
     /** Item schema: key `<builder>.<item>.data`, state at the same path. */
     itemSchema(itemKey, item) {
         const container = this.container;
-        return new Schema(container.livewire).key(`${this.getKey()}.${itemKey}.data`).statePath(`${this.getStatePath()}.${itemKey}.data`).operation(container.getOperation()).record(container.getRecord()).root(false)
+        return new Schema(container.livewire).key(`${this.getKey()}.${itemKey}.data`).statePath(`${this.getStatePath()}.${itemKey}.data`).operation(container.getOperation()).record(container.getRecord()).root(false).parentComponent(this)
             .components(this.getBlock(item.type).getComponents({ builder: this, itemKey, data: item.data }));
     }
     getChildSchemas() { return Object.entries(this.getItems()).map(([key, item]) => this.itemSchema(key, item)); }
@@ -179,7 +237,10 @@ export class Builder extends Field {
         return item;
     }
     /** A subclass may refuse adding (a rule cap, for instance). */
-    canAdd(_block) { return Object.keys(this.getItems()).length < this._maxItems; }
+    canAdd(block) {
+        const items = Object.values(this.getItems());
+        return this._addable && items.length < this._maxItems && (block.getMaxItems() === null || items.filter((item) => item.type === block.name).length < block.getMaxItems());
+    }
     getActions() {
         const insert = (items, after, key, item) => {
             if (after === null || !Object.hasOwn(items, after))
@@ -187,6 +248,8 @@ export class Builder extends Field {
             return Object.fromEntries(Object.entries(items).flatMap(([k, v]) => (k === after ? [[k, v], [key, item]] : [[k, v]])));
         };
         const move = (offset) => ({ arguments: args }) => {
+            if (!this.canMove())
+                return;
             const items = this.getItems();
             const keys = Object.keys(items);
             const from = keys.indexOf(String(args.item));
@@ -211,7 +274,7 @@ export class Builder extends Field {
                     return;
                 this.setItems(insert(items, args.afterItem, this._uuid(), this.newItem(block)));
             }),
-            Action.make('delete').action(({ arguments: args }) => { const items = this.getItems(); const key = String(args.item); if (!Object.hasOwn(items, key))
+            Action.make('delete').action(({ arguments: args }) => { const items = this.getItems(); const key = String(args.item); if (!this._deletable || !Object.hasOwn(items, key))
                 return; delete items[key]; this.setItems(items); }),
             Action.make('clone').action(({ arguments: args }) => {
                 const items = this.getItems();
@@ -224,6 +287,8 @@ export class Builder extends Field {
             Action.make('moveDown').action(move(1)),
             // Drag and drop: the new order is only accepted if it is a permutation of the existing keys.
             Action.make('reorder').action(({ arguments: args }) => {
+                if (!this.canDrag())
+                    return;
                 const items = this.getItems();
                 const keys = Object.keys(items);
                 const order = Array.isArray(args.items) ? args.items.map(String) : [];
@@ -249,20 +314,31 @@ export class Builder extends Field {
         const alignment = between ? null : this._addAlignment;
         const placement = alignment === 'start' ? 'bottom-start' : alignment === 'end' ? 'bottom-end' : null;
         const widthClass = this._pickerWidth ? `fi-width-${this._pickerWidth}` : null;
-        const signature = `${widthClass ?? ''}|${placement ?? ''}|${blocks.length ? 1 : 0}|0`;
+        const signature = `${widthClass ?? ''}|${placement ?? ''}|${blocks.length ? 1 : 0}|${this._searchable ? 1 : 0}`;
         const wireKey = `${key}.${actionName}.${afterItem ?? ''}.block-picker.${PICKER_HASHES[signature] ?? createHash('md5').update(signature).digest('hex')}`;
         const items = blocks.map((block) => {
             const expression = `mountAction('${actionName}', ${js(between ? { block: block.name, afterItem } : { block: block.name })}, { schemaComponent: ${js(key)} })`;
             const blockIcon = block.getIcon();
-            return `<button x-on:click="close" wire:click="${e(expression)}" type="button" wire:loading.attr="disabled" wire:target="${e(expression)}" class="fi-dropdown-list-item">${blockIcon ? icon(blockIcon, { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': expression }) }) + loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': expression })) : ''}<span class="fi-dropdown-list-item-label">${e(block.getLabel())}</span></button>`;
+            const search = this._searchable ? ` role="button" tabindex="0" wire:key="${e(createHash('md5').update(expression + block.getLabel().toLowerCase()).digest('hex'))}" data-block-label="${e(block.getLabel().toLowerCase())}" x-show="isBlockVisible($el)"` : '';
+            return `<button x-on:click="close" wire:click="${e(expression)}"${search} type="button" wire:loading.attr="disabled" wire:target="${e(expression)}" class="fi-dropdown-list-item">${blockIcon ? icon(blockIcon, { attributes: new Attributes({ 'wire:loading.remove.delay.default': '1', 'wire:target': expression }) }) + loadingIndicator(new Attributes({ 'wire:loading.delay.default': '', 'wire:target': expression })) : ''}<span class="fi-dropdown-list-item-label">${e(block.getLabel())}</span></button>`;
         });
         const grid = this._pickerColumns ? ` class="fi-grid fi-grid-direction-col lg:fi-grid-cols" style="--cols-lg: ${this._pickerColumns}; --cols-default: 1;"` : ' class="fi-grid fi-grid-direction-col" style="--cols-default: 1;"';
-        const list = blocks.length ? `<div class="fi-dropdown-list"><div><div${grid}>${items.join('')}</div></div></div>` : '';
+        // Grouped blocks: one labelled group per picker group (ungrouped blocks first), the groups laid out in the grid.
+        const groups = new Map();
+        blocks.forEach((block, index) => { const group = block.getPickerGroup() ?? ''; groups.set(group, [...(groups.get(group) ?? []), items[index]]); });
+        const grouped = [...groups.keys()].some((group) => group !== '');
+        const content = grouped
+            ? `<div${grid.replace(/class="([^"]*)"/, 'class="$1 fi-fo-builder-block-picker-groups"')}>${[...groups].map(([group, groupItems]) => `<div class="fi-fo-builder-block-picker-group"${group ? ` role="group" aria-label="${e(group)}"` : ''}>${group ? `<div class="fi-fo-builder-block-picker-group-label">${e(group)}</div>` : ''}${groupItems.join('')}</div>`).join('')}</div>`
+            : `<div${grid}>${items.join('')}</div>`;
+        const searchPrompt = tr('block_picker.search_prompt');
+        const searchInput = this._searchable ? `<div class="fi-fo-builder-block-picker-search-ctn"><div class="fi-input-wrp"><div class="fi-input-wrp-content-ctn"><input type="text" x-ref="searchInput" x-on:keydown.enter.prevent="" aria-label="${e(searchPrompt)}" placeholder="${e(searchPrompt)}" x-model.debounce.0="search" class="fi-input" /></div></div></div>` : '';
+        const noResults = this._searchable ? `<div x-cloak x-show="hasNoSearchResults" role="status" aria-live="polite" class="fi-fo-builder-block-picker-no-search-results-message">${e(tr('block_picker.no_search_results_message'))}</div>` : '';
+        const list = blocks.length ? `<div${this._searchable ? ' x-data="blockPicker()"' : ''} class="fi-dropdown-list">${searchInput}<div>${content}</div>${noResults}</div>` : '';
         const addIcon = !between && this._addIcon ? icon(this._addIcon, { size: 'sm' }) : '';
         const triggerLabel = between
             ? (this._addBetweenLabel ?? tr('actions.add_between.label'))
             : (this._addLabel ?? tr('actions.add.label').replace(':label', this._labelText.replace(/^./, (c) => c.toLowerCase())).trim());
-        return `<div x-data="filamentDropdown({ isMenu: true })" wire:key="${e(wireKey)}" class="${cls(['fi-dropdown', 'fi-fo-builder-block-picker', alignment ? `fi-align-${alignment}` : null])}"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger"><button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-btn-action fi-btn fi-size-sm">${addIcon}${e(triggerLabel)}</button></div><div x-cloak="x-cloak" x-ref="panel" wire:key="${e(wireKey)}.panel" wire:ignore.self="" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" x-float${placement ? `.placement.${placement}` : ''}.flip.shift.offset="{ offset: 8 }" class="${cls(['fi-dropdown-panel', widthClass])}">${list}</div></div>`;
+        return `<div x-data="filamentDropdown({ isMenu: ${this._searchable ? 'false' : 'true'} })" wire:key="${e(wireKey)}" class="${cls(['fi-dropdown', 'fi-fo-builder-block-picker', alignment ? `fi-align-${alignment}` : null])}"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger"><button type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-btn-action fi-btn fi-size-sm">${addIcon}${e(triggerLabel)}</button></div><div x-cloak="x-cloak" x-ref="panel" wire:key="${e(wireKey)}.panel" wire:ignore.self="" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" x-float${placement ? `.placement.${placement}` : ''}.flip.shift.offset="{ offset: 8 }" class="${cls(['fi-dropdown-panel', widthClass])}">${list}</div></div>`;
     }
     _labelText = '';
     async toHtml() {
@@ -283,13 +359,17 @@ export class Builder extends Field {
             if (this._blockHeaders) {
                 const moveButton = (action, label, iconName, direction, disabled) => {
                     const expression = this.actionExpression(action, { item: itemKey });
-                    return `<li x-on:click.stop class="fi-sr-only">${iconActionButton({ inHeader: true, label, icon: iconName, expression, disabled, attributes: { tabindex: '-1', 'data-reorder-hidden': 'data-reorder-hidden', 'data-reorder-direction': direction, 'data-reorder-action': expression, 'aria-describedby': descriptionId(itemKey) } })}</li>`;
+                    return `<li x-on:click.stop${this._reorderableWithButtons ? '' : ' class="fi-sr-only"'}>${iconActionButton({ inHeader: true, label, icon: iconName, expression, disabled, attributes: { tabindex: this._reorderableWithButtons ? null : '-1', 'data-reorder-hidden': 'data-reorder-hidden', 'data-reorder-direction': direction, 'data-reorder-action': expression, 'aria-describedby': descriptionId(itemKey) } })}</li>`;
                 };
                 const blockIcon = block.getIcon();
-                header = `<div class="fi-fo-builder-item-header"><ul class="fi-fo-builder-item-header-start-actions"><li x-on:click.stop><button title="${e(tr('actions.reorder.label'))}" aria-label="${e(tr('actions.reorder.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-sortable-handle="x-sortable-handle">${icon('m-arrows-up-down')}</button></li>${moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', index === 0)}${moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', index === keys.length - 1)}</ul>${this._blockIcons && blockIcon ? icon(blockIcon, { attributes: new Attributes().class(['fi-fo-builder-item-header-icon']) }) : ''}<${this._headingTag} class="fi-fo-builder-item-header-label fi-truncated">${e(block.getLabel())}${this._blockNumbers ? ` ${index + 1}` : ''}</${this._headingTag}><ul class="fi-fo-builder-item-header-end-actions">${this._cloneable ? `<li x-on:click.stop>${iconActionButton({ inHeader: true, label: tr('actions.clone.label'), icon: 'm-square-2-stack', expression: this.actionExpression('clone', { item: itemKey }) })}</li>` : ''}<li x-on:click.stop>${iconActionButton({ inHeader: true, label: tr('actions.delete.label'), icon: 'm-trash', expression: this.actionExpression('delete', { item: itemKey }), colorClasses: danger })}</li></ul></div>`;
+                const gray = colorsOf(this.livewire)?.getComponentClasses('icon-button', 'gray') ?? [];
+                const collapse = this._collapsible ? `<li class="fi-fo-builder-item-header-collapsible-actions" x-on:click.stop="toggleCollapsed"><div class="fi-fo-builder-item-header-collapse-action"><button title="${e(tr('actions.collapse.label'))}" aria-label="${e(tr('actions.collapse.label'))}" type="button" class="${cls(['fi-ac-icon-btn-action', 'fi-icon-btn', 'fi-size-sm', ...gray])}">${icon('m-chevron-up')}</button></div><div class="fi-fo-builder-item-header-expand-action"><button title="${e(tr('actions.expand.label'))}" aria-label="${e(tr('actions.expand.label'))}" type="button" class="${cls(['fi-ac-icon-btn-action', 'fi-icon-btn', 'fi-size-sm', ...gray])}">${icon('m-chevron-down')}</button></div></li>` : '';
+                const reorder = this.canDrag() ? `<li x-on:click.stop><button title="${e(tr('actions.reorder.label'))}" aria-label="${e(tr('actions.reorder.label'))}" type="button" wire:loading.attr="aria-disabled" wire:loading.class="fi-disabled" class="fi-ac-icon-btn-action fi-icon-btn fi-size-sm" x-sortable-handle="x-sortable-handle">${icon('m-arrows-up-down')}</button></li>` : '';
+                const moves = this.canMove() ? `${moveButton('moveUp', tr('actions.move_up.label'), 'm-arrow-up', 'up', index === 0)}${moveButton('moveDown', tr('actions.move_down.label'), 'm-arrow-down', 'down', index === keys.length - 1)}` : '';
+                header = `<div${this._collapsible ? ' x-on:click.stop="toggleCollapsed"' : ''} class="fi-fo-builder-item-header">${reorder || moves ? `<ul class="fi-fo-builder-item-header-start-actions">${reorder}${moves}</ul>` : ''}${this._blockIcons && blockIcon ? icon(blockIcon, { attributes: new Attributes().class(['fi-fo-builder-item-header-icon']) }) : ''}<${this._headingTag} class="fi-fo-builder-item-header-label fi-truncated">${e(block.getLabel())}${this._blockNumbers ? ` ${index + 1}` : ''}</${this._headingTag}><ul class="fi-fo-builder-item-header-end-actions">${this._cloneable ? `<li x-on:click.stop>${iconActionButton({ inHeader: true, label: tr('actions.clone.label'), icon: 'm-square-2-stack', expression: this.actionExpression('clone', { item: itemKey }) })}</li>` : ''}${this._deletable ? `<li x-on:click.stop>${iconActionButton({ inHeader: true, label: tr('actions.delete.label'), icon: 'm-trash', expression: this.actionExpression('delete', { item: itemKey }), colorClasses: danger })}</li>` : ''}${collapse}</ul></div>`;
             }
-            rows.push(`<li wire:ignore.self wire:key="${e(livewireKey)}.${e(itemKey)}.data.item" x-data="item(${e(js({ isCollapsed: false, collapseKey: null }))})" x-on:builder-expand.window="expandFromEvent" x-on:builder-collapse.window="collapseFromEvent" x-on:expand="expand" x-sortable-item="${e(itemKey)}" class="${cls(['fi-fo-builder-item', { 'fi-fo-builder-item-has-header': this._blockHeaders }])}" x-bind:class="itemClasses">${header}<div x-show="! isCollapsed" class="fi-fo-builder-item-content">${await this.itemSchema(itemKey, item).toHtml()}</div></li>`);
-            if (index < keys.length - 1 && this._addBetween && this.canAdd(block))
+            rows.push(`<li wire:ignore.self wire:key="${e(livewireKey)}.${e(itemKey)}.data.item" x-data="item(${e(js({ isCollapsed: this._collapsed, collapseKey: this._persistCollapsed ? `filament:builder:collapsed:${key}-${itemKey}` : null }))})" x-on:builder-expand.window="expandFromEvent" x-on:builder-collapse.window="collapseFromEvent" x-on:expand="expand" x-sortable-item="${e(itemKey)}" class="${cls(['fi-fo-builder-item', { 'fi-fo-builder-item-has-header': this._blockHeaders }])}" x-bind:class="itemClasses">${header}<div x-show="! isCollapsed" class="fi-fo-builder-item-content">${await this.itemSchema(itemKey, item).toHtml()}</div></li>`);
+            if (index < keys.length - 1 && this._addBetween && this._addable && this.getBlockPickerBlocks().length && Object.keys(items).length < this._maxItems)
                 rows.push(`<li class="fi-fo-builder-add-between-items-ctn"><div class="fi-fo-builder-add-between-items"><div class="fi-fo-builder-block-picker-ctn">${this.blockPickerHtml(itemKey)}</div></div></li>`);
             else if (index < keys.length - 1 && this._labelBetweenItems)
                 rows.push(`<li class="fi-fo-builder-label-between-items-ctn"><div class="fi-fo-builder-label-between-items-divider-before"></div><span class="fi-fo-builder-label-between-items">${e(this._labelBetweenItems)}</span><div class="fi-fo-builder-label-between-items-divider-after"></div></li>`);
@@ -300,7 +380,10 @@ export class Builder extends Field {
             return `<span class="fi-sr-only" data-reorder-description="${e(itemKey)}" data-reorder-label="${e(label)}" id="${e(descriptionId(itemKey))}">${e(tr('reordering.position', { label, position: String(index + 1), count: String(keys.length) }))}</span>`;
         }).join('');
         const list = keys.length ? `<ul x-sortable x-ref="reorderItems" data-sortable-animation-duration="300" x-on:end.stop="reorder" class="fi-fo-builder-items">${rows.join('')}</ul>` : '';
-        const html = `<div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" data-reorder-owner="data-reorder-owner" data-reorder-items="${e(JSON.stringify(keys))}" x-load="x-load" x-load-src="${e(asset('builder'))}" x-data="builderFormComponent(${e(js(config))})" class="${cls([this._extraClass, 'fi-fo-builder'])}"><span wire:ignore x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>${list}${this.blockPickerHtml()}${descriptions}</div>`;
+        const link = (label, click) => `<span x-on:click="${click}"><button type="button" class="${cls(['fi-ac-link-action', 'fi-link', 'fi-size-sm', ...(colorsOf(this.livewire)?.getComponentClasses('link', 'gray') ?? [])])}"><span class="fi-link-label">${e(label)}</span></button></span>`;
+        const collapseAll = this._collapsible ? `<div class="${cls(['fi-fo-builder-actions', { 'fi-hidden': keys.length < 2 }])}">${link(tr('actions.collapse_all.label'), 'collapseAll')}${link(tr('actions.expand_all.label'), 'expandAll')}</div>` : '';
+        const picker = this._addable && keys.length < this._maxItems ? this.blockPickerHtml() : '';
+        const html = `<div aria-labelledby="${e(id)}-label" id="${e(id)}" role="group" data-reorder-owner="data-reorder-owner" data-reorder-items="${e(JSON.stringify(keys))}" x-load="x-load" x-load-src="${e(asset('builder'))}" x-data="builderFormComponent(${e(js(config))})" class="${cls([this._extraClass, 'fi-fo-builder', { 'fi-collapsible': this._collapsible }])}"><span wire:ignore x-ref="reorderStatus" class="fi-sr-only" role="status" aria-live="polite" aria-atomic="true"></span>${collapseAll}${list}${picker}${descriptions}</div>`;
         return this.wrap(html, { labelAsDiv: true });
     }
 }