@navette-js/schemas 0.0.0-stage → 1.0.0-beta.2

package/lib/index.js

@@ -0,0 +1,829 @@
+// @navette-js/schemas — Schema, Component and the layout components.
+// Each component renders in two steps: async property resolution, then a synchronous EJS view (ADR 0003).
+import { Attributes, HtmlString, cls, e, evaluate, icon, js, renderHook, views, configured, configureUsing } from '@navette-js/support';
+import { t } from '@navette-js/support/i18n';
+import { fileURLToPath } from 'node:url';
+import { createHash } from 'node:crypto';
+views.namespace('filament-schemas', fileURLToPath(new URL('../views', import.meta.url)));
+export class Component {
+    _grow = true;
+    /** Inside a Flex: `false` keeps the natural width instead of filling the available space. */
+    grow(condition = true) { this._grow = condition; return this; }
+    canGrow() { return this._grow; }
+    /** Default configuration for every instance later created by `make()`: `TextInput.configureUsing((input) => input.maxLength(255))`. */
+    static configureUsing(configure) { configureUsing(this, configure); }
+    _name = null;
+    _keyName = null;
+    _hidden = false;
+    _visible = true;
+    _columnSpan = { default: 1 };
+    _extraAttributes = {};
+    _columnStart = null;
+    container;
+    hidden(condition = true) { this._hidden = condition; return this; }
+    visible(condition = true) { this._visible = condition; return this; }
+    key(key) { this._keyName = key; return this; }
+    /** Hidden for the given operation(s) (`'create'`, `'edit'`…). */
+    hiddenOn(operations) { const list = [].concat(operations); return this.hidden(({ operation }) => operation !== null && list.includes(operation)); }
+    /** Visible only for the given operation(s). */
+    visibleOn(operations) { const list = [].concat(operations); return this.visible(({ operation }) => operation !== null && list.includes(operation)); }
+    /** A number applies from the `lg` breakpoint; an object replaces the default entirely. Values may be closures. */
+    columnSpan(span) { this._columnSpan = typeof span === 'object' ? span : { default: 1, lg: span }; return this; }
+    columnSpanFull() { this._columnSpan = { default: 'full' }; return this; }
+    /** Starting grid column, from the `lg` breakpoint. */
+    columnStart(start) { this._columnStart = start; return this; }
+    /** Full grid width on every screen size (`columnSpan('full')` only applies from `lg`). */
+    columnSpanFull() { return this.columnSpan({ default: 'full' }); }
+    extraAttributes(attributes) { Object.assign(this._extraAttributes, attributes); return this; }
+    get livewire() { return this.container.livewire; }
+    isLiberatedFromContainerGrid() { return false; }
+    /** Server methods the component's JavaScript may call (announced to the browser). */
+    getExposedMethods() { return []; }
+    /** False for an exposed method after which the host must re-render (e.g. next wizard step, to show validation errors). */
+    isRenderlessMethod(_method) { return true; }
+    hasStatePath() { return false; }
+    /** Absolute component key: `<schema key>.<key or name>`, or null. */
+    getKey() {
+        // `::data::` in a generated key (section, tabs) stands for the schema state path, and is dropped when there is none (infolists).
+        const statePath = this.container.getStatePath();
+        const own = (this._keyName ?? this._name)?.replace('::data::', statePath ? `::${statePath}::` : '::') ?? null;
+        return own === null ? null : `${this.container.getKey()}.${own}`;
+    }
+    getLivewireKey() { const k = this.getKey(); return k === null ? null : `${this.livewire.id}.${k}`; }
+    getStatePath() { return this.hasStatePath() ? [this.container.getStatePath(), this._name].filter(Boolean).join('.') : ''; }
+    getAlpineScopeConfiguration() {
+        // A stateless (layout) component exposes its container's state path.
+        return { key: this.getKey(), exposedMethods: this.getExposedMethods(), path: this.hasStatePath() ? this.getStatePath() : this.container.getStatePath(), containerPath: this.container.getStatePath() };
+    }
+    context() {
+        const livewire = this.livewire;
+        const read = (path) => path.split('.').reduce((o, k) => o?.[k], livewire);
+        return { livewire, component: this, operation: this.container.getOperation(), record: this.container.getRecord(), get: (p) => read([this.container.getStatePath(), p].filter(Boolean).join('.')), state: this.hasStatePath() ? read(this.getStatePath()) : undefined };
+    }
+    async isVisible() {
+        const ctx = this.context();
+        return !(await evaluate(this._hidden, ctx)) && (await evaluate(this._visible, ctx));
+    }
+    /** Grid column wrapper, rendered even when the component is hidden. */
+    async toSchemaHtml(isVisible) {
+        const key = this.getKey();
+        const span = {};
+        const rawSpan = typeof this._columnSpan === 'object' ? this._columnSpan : { default: 1, lg: this._columnSpan };
+        for (const [breakpoint, value] of Object.entries(rawSpan))
+            span[breakpoint] = await evaluate(value, this.context());
+        const attributes = new Attributes()
+            .when(!this.container.isInline(), (a) => a.gridColumn(span, !isVisible))
+            .when(!this.container.isInline() && this._columnStart !== null, (a) => a.class(['lg:fi-grid-col-start']).style([`--col-start-lg: ${this._columnStart}`]))
+            .merge({ 'wire:key': this.getLivewireKey() });
+        return views.render('filament-schemas::component', {
+            key, isVisible, attributes: attributes.toHtml(),
+            alpine: isVisible ? `filamentSchemaComponent(${js(this.getAlpineScopeConfiguration())})` : null,
+            html: isVisible ? await this.toHtml() : '',
+        });
+    }
+}
+export class Schema {
+    livewire;
+    _key = 'schema';
+    _components = [];
+    _statePath = null;
+    _columns = {};
+    _root = true;
+    _inline = false;
+    _operation = null;
+    _record = null;
+    _extraClass = null;
+    _partial = false;
+    _dense = false;
+    constructor(livewire) { this.livewire = livewire; }
+    static make(livewire) { return configured(new Schema(livewire)); }
+    key(key) { this._key = key; return this; }
+    components(components) { this._components = components; for (const c of components)
+        c.container = this; return this; }
+    schema(components) { return this.components(components); }
+    statePath(path) { this._statePath = path; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    root(isRoot = true) { this._root = isRoot; return this; }
+    inline(isInline = true) { this._inline = isInline; return this; }
+    operation(operation) { this._operation = operation; return this; }
+    record(record) { this._record = record; return this; }
+    /** Class placed before the grid classes (e.g. `fi-section-content`). */
+    extraClass(name) { this._extraClass = name; return this; }
+    /** Tighter spacing between components (`fi-sc-dense`). */
+    dense(condition = true) { this._dense = condition; return this; }
+    /** Partially rendered schema: its root carries `wire:partial="schema.<key>"`. */
+    partiallyRendered(condition = true) { this._partial = condition; return this; }
+    _partialName = null;
+    /** Root `wire:partial` name when it differs from the schema key (filters form: `table-filters-form`). */
+    partialName(name) { this._partialName = name; return this; }
+    _gap = true;
+    /** `false`: components touch, with no gap (no `fi-sc-has-gap`), as in a FusedGroup. */
+    gap(condition = true) { this._gap = condition; return this; }
+    _fieldWrapperView = null;
+    /**
+     * Field wrapper for this schema: `'filament-forms::plain-field-wrapper'` keeps only a screen-reader label
+     * (FusedGroup fields). `null`: the usual wrapper.
+     */
+    fieldWrapperView(view) { this._fieldWrapperView = view; return this; }
+    getFieldWrapperView() { return this._fieldWrapperView; }
+    getKey() { return this._key; }
+    getStatePath() { return this._statePath ?? ''; }
+    getComponents() { return this._components; }
+    getOperation() { return this._operation; }
+    getRecord() { return this._record; }
+    isInline() { return this._inline; }
+    isRoot() { return this._root; }
+    /** All components, depth-first. */
+    getFlatComponents() {
+        return this._components.flatMap((c) => [c, ...(c.getChildSchemas?.() ?? []).flatMap((s) => s.getFlatComponents())]);
+    }
+    /** Same, without hidden components or their descendants: a field inside a hidden section is neither validated nor saved. */
+    async getVisibleFlatComponents() {
+        const out = [];
+        for (const c of this._components) {
+            if (!(await c.isVisible()))
+                continue;
+            out.push(c);
+            for (const s of (c.getChildSchemas?.() ?? []))
+                out.push(...(await s.getVisibleFlatComponents()));
+        }
+        return out;
+    }
+    async toHtml() {
+        const withVisibility = await Promise.all(this._components.map(async (c) => [c, await c.isVisible()]));
+        if (!withVisibility.some(([, v]) => v))
+            return '';
+        const attributes = new Attributes(this._extraClass ? { class: this._extraClass } : {})
+            .when(!this._inline, (a) => a.grid(this._columns))
+            .merge({
+            'wire:partial': this._partialName ?? (this._partial ? `schema.${this._key}` : null),
+            'x-data': this._root ? `filamentSchema({ livewireId: ${js(this.livewire.id)}, schemaKey: ${js(this._key)} })` : null,
+            'x-on:form-validation-error.window': this._root ? 'handleFormValidationError' : null,
+            'x-on:reset-schema-component-state.window': this._root ? 'handleClientSideStateReset' : null,
+        })
+            .class(['fi-sc', { 'fi-inline': this._inline }, { 'fi-sc-has-gap': this._gap }, { 'fi-sc-dense': this._dense }]);
+        const parts = [];
+        for (const [component, isVisible] of withVisibility) {
+            if (!component.isLiberatedFromContainerGrid())
+                parts.push(await component.toSchemaHtml(isVisible));
+            else if (isVisible)
+                parts.push(`<div class="fi-sc-liberated" wire:key="${e(component.getLivewireKey() ?? '')}" x-data="filamentSchemaComponent(${js(component.getAlpineScopeConfiguration())})">${await component.toHtml()}</div>`);
+        }
+        return `<div ${attributes.toHtml()}>${parts.join('')}</div>`;
+    }
+}
+/** Child schema of a layout component: shares the parent's key and state path, without being a root. */
+export function childSchema(parent, components) {
+    const c = parent.container;
+    return new Schema(c.livewire).key(c.getKey()).statePath(c.getStatePath() || null).operation(c.getOperation()).record(c.getRecord()).root(false).components(components);
+}
+/** Stateful group: its children live under `<container path>.<name>` (used by filter forms). */
+export class StatefulGroup extends Component {
+    children;
+    constructor(name, children) { super(); this._name = name; this.children = children; }
+    static make(name, children) { return configured(new StatefulGroup(name, children)); }
+    hasStatePath() { return true; }
+    getChildSchemas() {
+        const c = this.container;
+        return [new Schema(c.livewire).key(this.getKey()).statePath(this.getStatePath()).operation(c.getOperation()).record(c.getRecord()).root(false).components(this.children)];
+    }
+    async toHtml() { return `<div id="${e(this.getKey())}">${await this.getChildSchemas()[0].toHtml()}</div>`; }
+}
+/** Groups components in a grid, without any chrome. */
+export class Group extends Component {
+    children;
+    _columns = {};
+    constructor(children = []) { super(); this.children = children; }
+    static make(children = []) { return configured(new Group(children)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    getChildSchemas() { return [childSchema(this, this.children).columns(this._columns)]; }
+    async toHtml() { return `<div>${await this.getChildSchemas()[0].toHtml()}</div>`; }
+}
+/** Column grid: two columns from `lg` by default. */
+export class Grid extends Group {
+    constructor(columns = 2) { super(); this._columns = columns; }
+    static make(columns = 2) { return configured(new Grid(Array.isArray(columns) ? 2 : columns)); }
+}
+/**
+ * Components side by side from a breakpoint: each fills the available space,
+ * except those marked `grow(false)`, which keep their natural width.
+ */
+export class Flex extends Component {
+    children;
+    _from = 'sm';
+    constructor(children = []) { super(); this.children = children; }
+    static make(children = []) { return configured(new Flex(children)); }
+    schema(components) { this.children = components; return this; }
+    from(breakpoint) { this._from = breakpoint; return this; }
+    getChildSchemas() { return [childSchema(this, this.children)]; }
+    async toHtml() {
+        const parts = [];
+        for (const component of this.getChildSchemas()[0].getComponents()) {
+            if (!(await component.isVisible()))
+                continue;
+            parts.push(`<div wire:key="${e(component.getLivewireKey() ?? '')}" x-data="filamentSchemaComponent(${js(component.getAlpineScopeConfiguration())})"${component.canGrow() ? ' class="fi-growable"' : ''}>${await component.toHtml()}</div>`);
+        }
+        return `<div class="fi-sc-flex fi-from-${this._from}">${parts.join('')}</div>`;
+    }
+}
+export const slug = (text) => text.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+/** Card grouping components, with an optional header (heading, actions). */
+export class Section extends Component {
+    children = [];
+    _columns = {};
+    _heading;
+    _afterHeader = [];
+    constructor(heading = null) {
+        super();
+        this._heading = heading;
+        // A section with a heading gets a key derived from it.
+        if (heading !== null)
+            this._keyName = `${slug(heading)}::data::section`;
+    }
+    static make(heading = null) { return configured(new Section(heading)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    _collapsible = false;
+    _collapsed = false;
+    /** Collapsible by clicking its header; `collapsed()` starts it collapsed. */
+    collapsible(condition = true) { this._collapsible = condition; return this; }
+    collapsed(condition = true) { this._collapsed = condition; if (condition)
+        this._collapsible = true; return this; }
+    /** Actions shown to the right of the heading. */
+    afterHeader(actions) { this._afterHeader = actions; return this; }
+    /** Actions the section exposes for mounting. */
+    getActions() { return this._afterHeader; }
+    getChildSchemas() { return [childSchema(this, this.children).columns(this._columns).extraClass('fi-section-content')]; }
+    async toHtml() {
+        const [content] = this.getChildSchemas();
+        if (this._heading === null) {
+            return `<div class="fi-sc-section"><section x-data="{
+                isCollapsed: false,
+            }" class="fi-section"><div class="fi-section-content-ctn">${await content.toHtml()}</div></section></div>`;
+        }
+        const key = this.getKey();
+        const ctx = this.context();
+        const after = [];
+        // Mount context: the host's, plus the schema the section belongs to.
+        const mountContext = { ...(this.livewire.getActionMountContext?.() ?? {}), schemaComponent: this.container.getKey() };
+        for (const action of this._afterHeader)
+            if (await action.isVisible(ctx))
+                after.push(`<div class="fi-sc-action">${await action.toHtml(ctx, mountContext)}</div>`);
+        // Collapsible section: listens to `collapse-section` / `expand-section`… window events, with a toggle button in the header.
+        const idTest = `if ($event.detail.id == (${js(key)} ?? $el.id))`;
+        const collapse = this._collapsible ? ` x-on:collapse-section.window="${e(`${idTest} isCollapsed = true`)}" x-on:expand="isCollapsed = false" x-on:expand-section.window="${e(`${idTest} isCollapsed = false`)}" x-on:open-section.window="${e(`${idTest} isCollapsed = false`)}" x-on:toggle-section.window="${e(`${idTest} isCollapsed = ! isCollapsed`)}" x-on:reset-schema-component-state.window="${e(`if (($event.detail.livewireId === ${js(this.livewire.id)}) && ($event.detail.schemaKey === ${js(key.split('.')[0])})) $nextTick(() => isCollapsed = ${this._collapsed ? 'true' : 'false'})`)}" x-bind:class="isCollapsed &amp;&amp; 'fi-collapsed'"` : '';
+        const collapseButton = this._collapsible ? `<button type="button" x-on:click.stop="isCollapsed = ! isCollapsed" aria-label="${e(t(this._collapsed ? 'filament::components/section.actions.expand.label' : 'filament::components/section.actions.collapse.label'))}" x-bind:aria-label="isCollapsed ? ${e(js(t('filament::components/section.actions.expand.label')))} : ${e(js(t('filament::components/section.actions.collapse.label')))}" aria-expanded="${this._collapsed ? 'false' : 'true'}" x-bind:aria-expanded="(! isCollapsed).toString()" aria-controls="${e(key)}-content" class="fi-icon-btn fi-size-md fi-section-collapse-btn">${icon('m-chevron-up')}</button>` : '';
+        return `<div id="${e(key)}" class="fi-sc-section"><section x-data="{
+                isCollapsed: ${this._collapsed ? 'true' : 'false'},
+            }"${collapse} aria-labelledby="${e(key)}-heading" class="${cls(['fi-section', 'fi-section-has-header', { 'fi-collapsible': this._collapsible, 'fi-collapsed': this._collapsed }])}"><header${this._collapsible ? ` x-on:click="if (! $event.target.closest('.fi-section-header-after-ctn')) isCollapsed = ! isCollapsed"` : ''} class="fi-section-header"><div class="fi-section-header-content fi-section-header-content-has-heading"><div class="fi-section-header-text-ctn"><h2 id="${e(key)}-heading" class="fi-section-header-heading">${e(this._heading)}</h2></div>${after.length ? `<div class="fi-section-header-after-ctn"><div class="fi-sc fi-inline fi-align-end fi-sc-has-gap fi-sc-dense">${after.join('')}</div></div>` : ''}</div>${collapseButton}</header><div id="${e(key)}-content" class="fi-section-content-ctn">${await content.toHtml()}</div></section></div>`;
+    }
+}
+/**
+ * Raw markup in a schema. The content is inserted AS IS: never put a user- or database-supplied value in it
+ * without escaping it with `e()` from `@navette-js/support`.
+ */
+export class Html extends Component {
+    content;
+    constructor(content) { super(); this.content = content; }
+    static make(content) { return new Html(content); }
+    async toHtml() { return typeof this.content === 'function' ? this.content(this.context()) : this.content; }
+}
+/** A tab of a Tabs component: a label, an optional icon and its own schema. */
+export class Tab extends Component {
+    children = [];
+    _columns = {};
+    _icon = null;
+    label;
+    constructor(label) { super(); this.label = label; this._keyName = `${slug(label)}::data::tab`; }
+    static make(label) { return configured(new Tab(label)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    icon(name) { this._icon = name; return this; }
+    getLabel() { return this.label; }
+    getIcon() { return this._icon; }
+    /** Browser-side tab key (no schema prefix): `::data::` follows the schema state path, and is dropped in infolists. */
+    getTabKey() { const statePath = this.container.getStatePath(); return this._keyName.replace('::data::', statePath ? `::${statePath}::` : '::'); }
+    getChildSchemas() { return [childSchema(this, this.children).columns(this._columns)]; }
+    async toHtml() { return this.getChildSchemas()[0].toHtml(); }
+}
+/** Layout tabs: every panel is rendered, the browser only shows the active one. */
+export class Tabs extends Component {
+    tabs = [];
+    label;
+    constructor(label) { super(); this.label = label; this._keyName = `${slug(label)}::data::tabs`; }
+    static make(label) { return configured(new Tabs(label)); }
+    schema(tabs) { this.tabs = tabs; return this; }
+    getExposedMethods() { return ['getLazyLoadedTabBadges', 'getDeferredTabBadges']; }
+    getLazyLoadedTabBadges() { return {}; }
+    getDeferredTabBadges() { return {}; }
+    getChildSchemas() { return [childSchema(this, this.tabs)]; }
+    async toHtml() {
+        // Building the child schema attaches the tabs to their container, which is what gives them their keys.
+        this.getChildSchemas();
+        const key = this.getKey();
+        const id = this.livewire.id;
+        const q = (k) => `'${k.replace(/[^A-Za-z0-9:_-]/g, '')}'`;
+        const tabId = (tab) => `fi-sc-tab-${createHash('md5').update(tab.getKey()).digest('hex')}`;
+        const visible = [];
+        for (const tab of this.tabs)
+            if (await tab.isVisible())
+                visible.push(tab);
+        const buttons = visible.map((tab) => {
+            const k = tab.getTabKey();
+            return `<button type="button" x-bind:class="{
+ 'fi-active': isTabSelected(${q(k)}),
+ 'fi-sc-tabs-header-overflow': overflowTabs.includes(${q(k)}),
+ 'fi-sc-tabs-header-overflow-open': isOverflowOpen &amp;&amp; overflowTabs.includes(${q(k)}),
+ }" id="${tabId(tab)}" role="tab" aria-controls="${e(tab.getKey())}" tabindex="-1" x-bind:tabindex="getTabIndex(${q(k)})" data-tab-key="${e(k)}" x-bind:data-tab-available="Boolean(true).toString()" x-bind:aria-selected="isTabSelected(${q(k)})" x-on:click="selectTab(${q(k)}, $event)" x-show="true" class="fi-tabs-item">${tab.getIcon() ? icon(tab.getIcon()) : ''}<span class="fi-tabs-item-label">${e(tab.getLabel())}</span></button>`;
+        });
+        const panels = [];
+        for (const tab of visible) {
+            const k = tab.getTabKey();
+            panels.push(`<div aria-labelledby="${tabId(tab)}" id="${e(tab.getKey())}" role="tabpanel" tabindex="0" wire:key="${e(`${id}.${tab.getKey()}`)}.container" x-show="true" x-bind:class="{ 'fi-active': isTabSelected(${q(k)}) }" x-on:expand="revealTab(${q(k)})" x-data="filamentSchemaComponent(${e(js(tab.getAlpineScopeConfiguration()))})" class="fi-sc-tabs-tab">${await tab.toHtml()}</div>`);
+        }
+        return `<div x-data="tabsSchemaComponent({
+ activeTab: 1,
+ hasTabPanels: true,
+ isScrollable: true,
+ isVertical: false,
+ isTabPersisted: false,
+ isTabPersistedInQueryString: false,
+ livewireId: ${e(js(id))},
+ schemaKey: ${e(js(key.split('.')[0]))},
+ tab: null,
+ tabQueryStringKey: null,
+ })" x-load x-load-src="${e(views.render('filament-schemas::asset', { path: 'tabs' }).trim())}" wire:ignore.self id="${e(key)}" wire:key="${e(`${id}.${key}`)}.container" class="fi-sc-tabs fi-contained"><div x-cloak="x-cloak" x-ref="tabsHeader" class="fi-tabs fi-contained"><div x-ref="tablist" role="tablist" x-bind:role="hasVisibleTabHeaders ? 'tablist' : 'group'" aria-label="${e(this.label)}" x-on:keydown="handleKeydown($event)" class="fi-sc-tabs-tablist">${buttons.join('')}</div></div>${panels.join('')}</div>`;
+    }
+}
+/** Render hook injection point, using the host's scopes. Liberated from the container grid. */
+export class RenderHook extends Component {
+    hook;
+    constructor(hook) { super(); this.hook = hook; }
+    static make(hook) { return configured(new RenderHook(hook)); }
+    isLiberatedFromContainerGrid() { return true; }
+    async toHtml() { return renderHook(this.hook, this.livewire.getRenderHookScopes?.() ?? []); }
+}
+/** Embeds another schema of the host (`form`, `infolist`…) as a root schema. */
+export class EmbeddedSchema extends Component {
+    schemaName;
+    constructor(name) { super(); this.schemaName = name; }
+    static make(name) { return configured(new EmbeddedSchema(name)); }
+    async toHtml() { return (await this.livewire.getSchema(this.schemaName)).toHtml(); }
+}
+/** `<form>` element: content and footer (actions), submitted to a host method. */
+export class Form extends Component {
+    children;
+    _footer = [];
+    _id = null;
+    _submit = null;
+    constructor(children) { super(); this.children = children; }
+    static make(children = []) { return configured(new Form(children)); }
+    id(id) { this._id = id; return this; }
+    livewireSubmitHandler(method) { this._submit = method; return this; }
+    footer(components) { this._footer = components; return this; }
+    getChildSchemas() { return [childSchema(this, this.children), childSchema(this, this._footer)]; }
+    async toHtml() {
+        const attributes = new Attributes().merge({ id: this._id, 'wire:submit': this._submit }).class(['fi-sc-form']);
+        const [content, footer] = this.getChildSchemas();
+        return `<form ${attributes.toHtml()}>${await content.toHtml()}${await footer.toHtml()}</form>`;
+    }
+}
+/** Row of actions in a schema. */
+export class Actions extends Component {
+    actions;
+    _fullWidth = false;
+    _alignment = null;
+    constructor(actions) { super(); this.actions = actions; }
+    static make(actions) { return configured(new Actions(actions)); }
+    fullWidth(condition = true) { this._fullWidth = condition; return this; }
+    alignment(alignment) { this._alignment = alignment; return this; }
+    async toHtml() {
+        const ctx = this.context();
+        const visible = [];
+        for (const a of this.actions)
+            if (await a.isVisible(ctx))
+                visible.push(await a.toHtml(ctx));
+        if (!visible.length)
+            return '';
+        const inner = cls(['fi-ac', { 'fi-width-full': this._fullWidth }, this._alignment ? `fi-align-${this._alignment}` : null]);
+        return `<div ${new Attributes().merge({ id: this.getKey() }).class(['fi-sc-actions']).toHtml()}><div class="${inner}">${visible.join('')}</div></div>`;
+    }
+}
+let colorManager = null;
+/** Color manager used outside a panel; inside a panel, the host panel's manager takes precedence. */
+export const useColorManager = (manager) => { colorManager = manager; };
+const colorsFor = (component) => component.livewire?.panel?.colors ?? colorManager;
+/** Color classes without computed shades (icon, callout, empty state); none for gray, the default. */
+const plainColorClasses = (color) => (color && color !== 'gray' ? ['fi-color', `fi-color-${color.replace(/[^a-zA-Z0-9_-]/g, '')}`] : []);
+/** Size or weight class: only class-name characters are kept. */
+const safeClass = (value) => (value ? value.replace(/[^a-zA-Z0-9_:-]/g, '') || null : null);
+const tooltipExpression = (text) => (text ? `{ content: ${js(text)}, theme: $store.theme, allowHTML: false }` : null);
+const isBlank = (value) => value === null || value === undefined || (typeof value === 'string' && value.trim() === '') || (value instanceof HtmlString && value.html.trim() === '');
+/** Escaped text, or an `HtmlString`'s HTML inserted as is (build it only from escaped values). */
+const textOrHtml = (value) => (value instanceof HtmlString ? value.html : e(value));
+/**
+ * Inline row mixing components and actions (footers, controls, after a label).
+ * Actions are mounted with `schemaComponent: mountKey` (the root schema by default, which finds them through the parent's `getActions()`).
+ * `actionView`: `'button'` (full button), `'link'` (link, or icon button for an `iconButton()` action), `'auto'` (icon button if `iconButton()`, button otherwise).
+ * `scope` overrides keys of the components' Alpine configuration (`path`, `containerPath`).
+ */
+export async function renderInlineItems(parent, items, options = {}) {
+    const components = items.filter((item) => item instanceof Component);
+    if (components.length)
+        childSchema(parent, components).inline();
+    const ctx = parent.context();
+    const mountContext = { ...(parent.livewire.getActionMountContext?.() ?? {}), schemaComponent: options.mountKey ?? parent.container.getKey() };
+    const parts = [];
+    for (const item of items) {
+        if (item instanceof Component) {
+            if (!(await item.isVisible()))
+                continue;
+            const key = item.getKey();
+            const attributes = new Attributes().merge({
+                'wire:partial': key !== null ? `schema-component::${key}` : null,
+                'x-data': `filamentSchemaComponent(${js({ ...item.getAlpineScopeConfiguration(), ...(options.scope ?? {}) })})`,
+                'wire:key': item.getLivewireKey(),
+            });
+            parts.push(`<div ${attributes.toHtml()}><div class="fi-sc-component">${await item.toHtml()}</div></div>`);
+            continue;
+        }
+        if (!(await item.isVisible(ctx)))
+            continue;
+        const action = item;
+        const view = options.actionView ?? 'button';
+        const asLink = typeof action.toLinkHtml === 'function' && (view === 'link' || (view === 'auto' && action._iconButton === true));
+        // The link rendering is shared with table rows: its row key, empty here, is stripped.
+        const html = asLink ? String(await action.toLinkHtml(ctx, mountContext, '')).replace(' wire:key=""', '') : await action.toHtml(ctx, mountContext);
+        parts.push(`<div class="fi-sc-action">${html}</div>`);
+    }
+    if (!parts.length)
+        return '';
+    return `<div class="${cls(['fi-sc', 'fi-inline', options.alignment ? `fi-align-${options.alignment}` : null, 'fi-sc-has-gap', 'fi-sc-dense'])}">${parts.join('')}</div>`;
+}
+/** Actions among inline items (expose them through `getActions()` so they can be mounted). */
+const actionsOf = (items) => items.filter((item) => !(item instanceof Component));
+/** Column-direction grid: items fill column by column. */
+function columnGrid(columns) {
+    const cols = typeof columns === 'number' ? { lg: columns } : { ...(columns ?? {}) };
+    for (const key of Object.keys(cols))
+        if (!cols[key])
+            delete cols[key];
+    cols.default ??= 1;
+    const name = (breakpoint) => breakpoint.replace(/@/g, 'c').replace(/!/g, 'n');
+    return new Attributes()
+        .class(['fi-grid', 'fi-grid-direction-col', ...Object.keys(cols).map((breakpoint) => (breakpoint === 'default' ? (cols[breakpoint] > 1 ? 'fi-grid-cols' : '') : `${breakpoint}:fi-grid-cols`))])
+        .style(Object.entries(cols).map(([breakpoint, count]) => `--cols-${name(breakpoint)}: ${count}`));
+}
+/**
+ * Titled frame grouping fields: a legend and a two-column grid by default.
+ * With `statePath()`, the fields live under that path and the fieldset gets a key (and an `id`).
+ */
+export class Fieldset extends Component {
+    children = [];
+    _columns = 2;
+    _label;
+    _hiddenLabel = false;
+    _contained = true;
+    _markedAsRequired = false;
+    constructor(label = null) { super(); this._label = label; }
+    static make(label = null) { return configured(new Fieldset(label)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    label(label) { this._label = label; return this; }
+    /** Keeps the legend for screen readers only. */
+    hiddenLabel(condition = true) { this._hiddenLabel = condition; return this; }
+    /** `false`: no border or padding. */
+    contained(condition = true) { this._contained = condition; return this; }
+    /** Asterisk after the legend (the fieldset itself is never validated). */
+    markAsRequired(condition = true) { this._markedAsRequired = condition; return this; }
+    /** State path of the fields, relative to the container. */
+    statePath(path) { this._name = path; return this; }
+    hasStatePath() { return this._name !== null; }
+    getChildSchemas() {
+        const schema = childSchema(this, this.children).columns(this._columns);
+        if (this.hasStatePath())
+            schema.key(this.getKey()).statePath(this.getStatePath());
+        return [schema];
+    }
+    async toHtml() {
+        const label = await evaluate(this._label, this.context());
+        const attributes = new Attributes().merge({ id: this.getKey(), ...this._extraAttributes })
+            .class(['fi-sc-fieldset', 'fi-fieldset', { 'fi-fieldset-label-hidden': this._hiddenLabel, 'fi-fieldset-not-contained': !this._contained }]);
+        const legend = isBlank(label) ? '' : `<legend>${e(label)}${this._markedAsRequired ? '<sup class="fi-fieldset-label-required-mark">*</sup>' : ''}</legend>`;
+        return `<fieldset ${attributes.toHtml()}>${legend}${await this.getChildSchemas()[0].toHtml()}</fieldset>`;
+    }
+}
+/**
+ * Text in a schema: a plain `<span>`, or a badge with `badge()`. The content is escaped;
+ * an `HtmlString` (from `@navette-js/support`) is inserted as is, so build it only from escaped values.
+ */
+export class Text extends Component {
+    _content;
+    _badge = false;
+    _color = null;
+    _size = null;
+    _weight = null;
+    _fontFamily = null;
+    _icon = null;
+    _iconPosition = 'before';
+    _iconSize = null;
+    _tooltip = null;
+    _copyable = false;
+    _copyableState = null;
+    _copyMessage = null;
+    _copyMessageDuration = 2000;
+    constructor(content) { super(); this._content = content; }
+    static make(content) { return configured(new Text(content)); }
+    content(content) { this._content = content; return this; }
+    /** Renders as a badge. */
+    badge(condition = true) { this._badge = condition; return this; }
+    /** Color (`gray` by default; `primary`, `danger`…). */
+    color(color) { this._color = color; return this; }
+    /** Text or badge size (`xs`, `sm`, `md`, `lg`). */
+    size(size) { this._size = size; return this; }
+    /** Font weight (`bold`, `semibold`, `medium`…). */
+    weight(weight) { this._weight = weight; return this; }
+    /** Font family (`sans`, `serif`, `mono`). */
+    fontFamily(family) { this._fontFamily = family; return this; }
+    /** Badge icon. */
+    icon(name) { this._icon = name; return this; }
+    iconPosition(position) { this._iconPosition = position; return this; }
+    iconSize(size) { this._iconSize = size; return this; }
+    tooltip(text) { this._tooltip = text; return this; }
+    /** Clicking copies the text (or `copyableState()`) to the clipboard. */
+    copyable(condition = true) { this._copyable = condition; return this; }
+    copyableState(state) { this._copyableState = state; return this; }
+    copyMessage(message) { this._copyMessage = message; return this; }
+    copyMessageDuration(milliseconds) { this._copyMessageDuration = milliseconds; return this; }
+    async getContent() { return evaluate(this._content, this.context()); }
+    async toHtml() {
+        const ctx = this.context();
+        const content = await this.getContent();
+        const color = (await evaluate(this._color, ctx)) ?? 'gray';
+        const tooltip = tooltipExpression(await evaluate(this._tooltip, ctx));
+        const isCopyable = Boolean(await evaluate(this._copyable, ctx));
+        const copyableState = (await evaluate(this._copyableState, ctx)) ?? (content instanceof HtmlString ? content.html : content);
+        const copy = `window.navigator.clipboard.writeText(${js(copyableState)})\n$tooltip(${js(this._copyMessage ?? t('filament::components/copyable.messages.copied'))}, {\n theme: $store.theme,\n timeout: ${js(this._copyMessageDuration)},\n})`;
+        if (await evaluate(this._badge, ctx)) {
+            const tag = isCopyable ? 'button' : 'span';
+            const attributes = new Attributes().merge({ 'x-on:click': isCopyable ? copy : null, 'x-tooltip': tooltip, ...this._extraAttributes, type: isCopyable ? 'button' : null })
+                .class(['fi-sc-text', 'fi-badge', `fi-size-${safeClass(this._size) ?? 'md'}`, ...(color !== 'gray' ? (colorsFor(this)?.getComponentClasses('badge', color) ?? plainColorClasses(color)) : [])]);
+            const iconHtml = this._icon ? icon(this._icon, { size: safeClass(this._iconSize) ?? 'sm' }) : '';
+            return `<${tag} ${attributes.toHtml()}>${this._iconPosition === 'before' ? iconHtml : ''}<span class="fi-badge-label-ctn"><span class="fi-badge-label">${textOrHtml(content)}</span></span>${this._iconPosition === 'after' ? iconHtml : ''}</${tag}>`;
+        }
+        // Text color: same contrast-aware classes as a link.
+        const colorClasses = color !== 'gray' ? (colorsFor(this)?.getComponentClasses('link', color) ?? plainColorClasses(color)) : [];
+        const attributes = new Attributes().merge({
+            role: isCopyable ? 'button' : null, tabindex: isCopyable ? '0' : null, 'x-on:click': isCopyable ? copy : null,
+            'x-on:keydown.enter.prevent': isCopyable ? '$el.click()' : null, 'x-on:keydown.space.prevent': isCopyable ? '$el.click()' : null, 'x-tooltip': tooltip,
+        }).class([...colorClasses, 'fi-sc-text', { 'fi-copyable': isCopyable }, this._size ? `fi-size-${safeClass(this._size)}` : null, this._weight ? `fi-font-${safeClass(this._weight)}` : null, this._fontFamily ? `fi-font-${safeClass(this._fontFamily)}` : null])
+            .merge(this._extraAttributes);
+        return `<span ${attributes.toHtml()}>${textOrHtml(content)}</span>`;
+    }
+}
+/** Heroicon in a schema: decorative, unless a tooltip or an `aria-label` (extra attribute) describes it. */
+export class Icon extends Component {
+    _icon;
+    _color = null;
+    _size = null;
+    _tooltip = null;
+    constructor(name) { super(); this._icon = name; }
+    static make(name) { return configured(new Icon(name)); }
+    icon(name) { this._icon = name; return this; }
+    /** Color (`primary` by default). */
+    color(color) { this._color = color; return this; }
+    /** Size (`xs` … `2xl`); `base` resets to the default size. */
+    size(size) { this._size = size === 'base' ? null : size; return this; }
+    tooltip(text) { this._tooltip = text; return this; }
+    async toHtml() {
+        const ctx = this.context();
+        const name = await evaluate(this._icon, ctx);
+        if (!name)
+            return '';
+        const tooltip = await evaluate(this._tooltip, ctx);
+        const { 'aria-label': ariaLabel = null, 'aria-labelledby': ariaLabelledBy = null, 'aria-describedby': ariaDescribedBy = null, ...extra } = this._extraAttributes;
+        const attributes = new Attributes({ 'x-tooltip': tooltipExpression(tooltip) }).merge({ ...extra, 'aria-hidden': 'true' })
+            .class([...plainColorClasses((await evaluate(this._color, ctx)) ?? 'primary'), 'fi-sc-icon']);
+        const html = icon(name, { size: safeClass(this._size) ?? 'md', attributes });
+        const label = ariaLabel ?? (ariaLabelledBy ? null : tooltip);
+        if (!label && !ariaLabelledBy)
+            return html;
+        return `${html}<span ${new Attributes().merge({ 'aria-describedby': ariaDescribedBy ? e(ariaDescribedBy) : null, 'aria-label': label ? e(label) : null, 'aria-labelledby': ariaLabelledBy ? e(ariaLabelledBy) : null, role: 'img' }).class(['fi-sr-only']).toHtml()}></span>`;
+    }
+}
+/** Image in a schema. Only same-site (`/…`) or http(s) URLs are rendered. */
+export class Image extends Component {
+    _url;
+    _alt;
+    _height = null;
+    _width = null;
+    _alignment = null;
+    _tooltip = null;
+    constructor(url, alt) { super(); this._url = url; this._alt = alt; }
+    static make(url, alt) { return configured(new Image(url, alt)); }
+    url(url) { this._url = url; return this; }
+    alt(alt) { this._alt = alt; return this; }
+    static dimension(value) {
+        if (value === null)
+            return null;
+        const css = typeof value === 'number' ? `${value}px` : value.trim();
+        return /^(\d+(\.\d+)?(px|rem|em|%|vh|vw)?|auto)$/.test(css) ? css : null;
+    }
+    /** Height (`8rem` by default); a number is in pixels. */
+    imageHeight(height) { this._height = Image.dimension(height); return this; }
+    imageWidth(width) { this._width = Image.dimension(width); return this; }
+    imageSize(size) { return this.imageWidth(size).imageHeight(size); }
+    /** Alignment (`start`, `center`, `end`). */
+    alignment(alignment) { this._alignment = alignment; return this; }
+    alignStart() { return this.alignment('start'); }
+    alignCenter() { return this.alignment('center'); }
+    alignEnd() { return this.alignment('end'); }
+    tooltip(text) { this._tooltip = text; return this; }
+    async toHtml() {
+        const ctx = this.context();
+        const url = String((await evaluate(this._url, ctx)) ?? '');
+        if (!/^(\/(?!\/)|https?:\/\/)/i.test(url))
+            return '';
+        const tooltip = tooltipExpression(await evaluate(this._tooltip, ctx));
+        const attributes = new Attributes(this._extraAttributes)
+            .class(['fi-sc-image', this._alignment ? `fi-align-${safeClass(this._alignment)}` : null])
+            .style([`height: ${this._height ?? '8rem'}`, this._width ? `width: ${this._width}` : null]);
+        return `<img alt="${e(await evaluate(this._alt, ctx))}" src="${e(url)}"${tooltip ? ` x-tooltip="${tooltip}"` : ''} ${attributes.toHtml()} />`;
+    }
+}
+/** Bulleted list: each item is a component; a string becomes a `Text`. Two columns from `sm`. */
+export class UnorderedList extends Component {
+    children;
+    _columns = { sm: 2 };
+    _size = null;
+    constructor(items = []) { super(); this.children = UnorderedList.normalize(items); }
+    static make(items = []) { return configured(new UnorderedList(items)); }
+    static normalize(items) { return items.map((item) => (item instanceof Component ? item : Text.make(item))); }
+    schema(items) { this.children = UnorderedList.normalize(items); return this; }
+    columns(columns) { this._columns = columns; return this; }
+    /** Text size (`xs`, `sm`, `md`, `lg`). */
+    size(size) { this._size = size; return this; }
+    getChildSchemas() { return [childSchema(this, this.children)]; }
+    async toHtml() {
+        const attributes = columnGrid(this._columns).merge(this._extraAttributes).class(['fi-sc-unordered-list', this._size ? `fi-size-${safeClass(this._size)}` : null]);
+        const items = [];
+        for (const component of this.getChildSchemas()[0].getComponents()) {
+            items.push(`<li wire:key="${e(component.getLivewireKey() ?? '')}" x-data="filamentSchemaComponent(${js(component.getAlpineScopeConfiguration())})">${await component.toHtml()}</li>`);
+        }
+        return `<ul ${attributes.toHtml()}>${items.join('')}</ul>`;
+    }
+}
+/** Empty state: icon, heading, description and a footer (actions, components). */
+export class EmptyState extends Component {
+    _heading;
+    _description = null;
+    _icon = null;
+    _iconColor = null;
+    _iconSize = null;
+    _compact = false;
+    _contained = true;
+    _headingTag = 'h2';
+    _footer = [];
+    constructor(heading) { super(); this._heading = heading; }
+    static make(heading) { return configured(new EmptyState(heading)); }
+    heading(heading) { this._heading = heading; return this; }
+    description(description) { this._description = description; return this; }
+    icon(name) { this._icon = name; return this; }
+    /** Icon color (`primary` by default). */
+    iconColor(color) { this._iconColor = color; return this; }
+    iconSize(size) { this._iconSize = size; return this; }
+    /** Compact variant. */
+    compact(condition = true) { this._compact = condition; return this; }
+    /** `false`: no surrounding card. */
+    contained(condition = true) { this._contained = condition; return this; }
+    /** Heading tag (`h2` by default). */
+    headingTag(tag) { this._headingTag = tag; return this; }
+    /** Footer: inline actions and components. */
+    footer(items) { this._footer = items; return this; }
+    /** Footer actions, mounted on the root schema. */
+    getActions() { return actionsOf(this._footer); }
+    async toHtml() {
+        const ctx = this.context();
+        const description = await evaluate(this._description, ctx);
+        const footer = await renderInlineItems(this, this._footer);
+        const iconColor = this._iconColor ?? 'primary';
+        const iconHtml = this._icon ? `<div class="${cls(['fi-empty-state-icon-bg', ...plainColorClasses(iconColor)])}">${icon(this._icon, { size: safeClass(this._iconSize) ?? 'lg', attributes: new Attributes().class(plainColorClasses(iconColor)) })}</div>` : '';
+        return `<div ${new Attributes(this._extraAttributes).class(['fi-sc-empty-state']).toHtml()}><section class="${cls(['fi-empty-state', { 'fi-compact': this._compact, 'fi-empty-state-not-contained': !this._contained }])}"><div class="fi-empty-state-content">${iconHtml}<div class="fi-empty-state-text-ctn"><${this._headingTag} class="fi-empty-state-heading">${e(await evaluate(this._heading, ctx))}</${this._headingTag}>${isBlank(description) ? '' : `<p class="fi-empty-state-description">${e(description)}</p>`}${footer ? `<footer class="fi-empty-state-footer">${footer}</footer>` : ''}</div></div></section></div>`;
+    }
+}
+const CALLOUT_ICONS = { danger: 'o-x-circle', info: 'o-information-circle', success: 'o-check-circle', warning: 'o-exclamation-circle' };
+/**
+ * Information box: a status (`info()`, `success()`, `warning()`, `danger()`) setting color and icon,
+ * heading, description, footer actions (as links) and control actions (on the right).
+ */
+export class Callout extends Component {
+    _heading;
+    _description = null;
+    _status = null;
+    _color = null;
+    _hasColor = false;
+    _icon = null;
+    _iconColor = null;
+    _iconSize = null;
+    _footerActions = [];
+    _footerActionsAlignment = 'start';
+    _footer = null;
+    _controlActions = [];
+    constructor(heading = null) { super(); this._heading = heading; }
+    static make(heading = null) { return configured(new Callout(heading)); }
+    heading(heading) { this._heading = heading; return this; }
+    description(description) { this._description = description; return this; }
+    /** Status: sets color, icon and a screen-reader prefix ("Note:"…). */
+    status(status) { this._status = status; return this; }
+    danger() { return this.status('danger'); }
+    info() { return this.status('info'); }
+    success() { return this.status('success'); }
+    warning() { return this.status('warning'); }
+    /** Background color; `null` removes the status color (the icon keeps it). */
+    color(color) { this._color = color; this._hasColor = true; return this; }
+    icon(name) { this._icon = name; return this; }
+    iconColor(color) { this._iconColor = color; return this; }
+    /** Icon size (`lg` by default). */
+    iconSize(size) { this._iconSize = size; return this; }
+    /** Footer actions, rendered as links. */
+    actions(actions) { this._footerActions = [...this._footerActions, ...actions]; return this; }
+    footerActions(actions) { return this.actions(actions); }
+    /** Footer actions alignment (`start`, `center`, `end`, `between`). */
+    footerActionsAlignment(alignment) { this._footerActionsAlignment = alignment; return this; }
+    /** Free-form footer (components and actions), replacing the footer actions. */
+    footer(items) { this._footer = items; return this; }
+    /** Small actions on the right of the callout (dismiss…). */
+    controlActions(actions) { this._controlActions = [...this._controlActions, ...actions]; return this; }
+    getColor() { return this._hasColor ? this._color : (this._color ?? this._status); }
+    getIcon() { return this._icon ?? (this._status ? (CALLOUT_ICONS[this._status] ?? null) : null); }
+    /** Callout actions, mounted on the root schema. */
+    getActions() { return [...(this._footer ? actionsOf(this._footer) : this._footerActions), ...this._controlActions]; }
+    async toHtml() {
+        const ctx = this.context();
+        const heading = await evaluate(this._heading, ctx);
+        const description = await evaluate(this._description, ctx);
+        const color = this.getColor() ?? 'gray';
+        const iconName = this.getIcon();
+        const iconColor = this._iconColor ?? this._status ?? color;
+        const footer = this._footer ? await renderInlineItems(this, this._footer, { actionView: 'link' }) : await renderInlineItems(this, this._footerActions, { alignment: ['right', 'end'].includes(this._footerActionsAlignment) ? 'end' : this._footerActionsAlignment === 'justify' ? 'between' : this._footerActionsAlignment, actionView: 'link' });
+        const controls = await renderInlineItems(this, this._controlActions, { alignment: 'start', actionView: 'auto' });
+        const statusKey = this._status ? `filament-schemas::components.callout.statuses.${this._status}` : null;
+        const statusLabel = statusKey && t(statusKey) !== statusKey ? t(statusKey) : null;
+        const statusHtml = statusLabel ? `<span class="fi-sr-only">${e(statusLabel)} </span>` : '';
+        const hasHeading = !isBlank(heading), hasDescription = !isBlank(description);
+        const text = hasHeading || hasDescription ? `<div class="fi-callout-text">${hasHeading ? `<h4 class="fi-callout-heading">${statusHtml}${e(heading)}</h4>` : ''}${hasDescription ? `<p class="fi-callout-description">${hasHeading ? '' : statusHtml}${e(description)}</p>` : ''}</div>` : '';
+        const main = text || footer ? `<div class="fi-callout-main">${text}${footer ? `<div class="fi-callout-footer">${footer}</div>` : ''}</div>` : '';
+        const iconHtml = iconName ? icon(iconName, { size: safeClass(this._iconSize) ?? 'lg', attributes: new Attributes({ 'aria-hidden': 'true' }).class([...plainColorClasses(iconColor), 'fi-callout-icon']) }) : '';
+        const attributes = new Attributes(this._extraAttributes).class([...plainColorClasses(color), 'fi-sc-callout', 'fi-callout']);
+        return `<div ${attributes.toHtml()}>${iconHtml}${main}${controls ? `<div class="fi-callout-controls">${controls}</div>` : ''}</div>`;
+    }
+}
+/**
+ * Fields joined under a single label: each field keeps only a screen-reader label,
+ * and the first validation error among the fields is shown under the group.
+ */
+export class FusedGroup extends Component {
+    children;
+    _columns = {};
+    _label = null;
+    _hiddenLabel = false;
+    _markedAsRequired = false;
+    constructor(children = []) { super(); this.children = children; }
+    static make(children = []) { return configured(new FusedGroup(children)); }
+    schema(components) { this.children = components; return this; }
+    columns(columns) { this._columns = columns; return this; }
+    label(label) { this._label = label; return this; }
+    hiddenLabel(condition = true) { this._hiddenLabel = condition; return this; }
+    /** Asterisk after the label (validation stays per field). */
+    markAsRequired(condition = true) { this._markedAsRequired = condition; return this; }
+    getChildSchemas() { return [childSchema(this, this.children).columns(this._columns).gap(false).fieldWrapperView('filament-forms::plain-field-wrapper')]; }
+    /** First error among the group's fields (including one on an item of a multi-valued field). */
+    firstError() {
+        const errors = this.livewire._errors ?? {};
+        for (const component of this.getChildSchemas()[0].getComponents()) {
+            if (!component.hasStatePath())
+                continue;
+            const path = component.getStatePath();
+            if (errors[path]?.length)
+                return errors[path][0];
+            const nested = Object.keys(errors).find((key) => key.startsWith(`${path}.`) && errors[key].length);
+            if (nested)
+                return errors[nested][0];
+        }
+        return null;
+    }
+    async toHtml() {
+        const id = this.getKey();
+        const label = await evaluate(this._label, this.context());
+        const error = this.firstError();
+        const hasLabel = !isBlank(label);
+        const inner = new Attributes().merge({ id, role: 'group', 'aria-labelledby': id && hasLabel ? `${id}-label` : null, ...this._extraAttributes, 'aria-describedby': id && error !== null ? `${id}-error` : null }).class(['fi-sc-fused-group']);
+        const labelId = id ? `id="${e(id)}-label" ` : '';
+        const labelHtml = !hasLabel ? '' : this._hiddenLabel
+            ? `<label ${labelId}class="fi-fo-field-label fi-sr-only">${e(label)}</label>`
+            : `<div class="fi-fo-field-label-col"><div class="fi-fo-field-label-ctn"><label ${labelId}class="fi-fo-field-label"><span class="fi-fo-field-label-content">${e(label)}${this._markedAsRequired ? '<sup class="fi-fo-field-label-required-mark">*</sup>' : ''}</span></label></div></div>`;
+        const errorHtml = error !== null ? `<p data-validation-error ${id ? `id="${e(id)}-error" ` : ''}class="fi-fo-field-wrp-error-message">${e(error)}</p>` : '';
+        return `<div data-field-wrapper class="fi-fo-field">${labelHtml}<div class="fi-fo-field-content-col"><div ${inner.toHtml()}>${await this.getChildSchemas()[0].toHtml()}</div>${errorHtml}</div></div>`;
+    }
+}