@aquera/mcp-ui-render 0.0.1

package/src/elements/aq-mcp-config.js

@@ -0,0 +1,673 @@
+var AqMcpConfig_1;
+import { __decorate, __metadata } from "tslib";
+/**
+ * `<aq-mcp-config>` — root element. Owns the descriptor + values + validation
+ * state, renders ordered sections (§12), and emits intent for the host:
+ *   - `aq-mcp-change` — on any field edit `{ attribute, value, values }`
+ *   - `aq-mcp-submit` — per-section save `{ sectionKey, submitTool, values }` (§13/§14)
+ *   - `aq-mcp-action` — button/action `{ tool, args, confirm, field, action }` (§5).
+ *     `action` is the specific `FieldAction` clicked for a multi-action control's
+ *     own toolbar (e.g. `properties-table`'s "Download"/"Edit Configuration"),
+ *     undefined for the classic single-action `button` control.
+ *   - `aq-mcp-options-request` — a `select`/`radio` field with `tool` set has no
+ *     options yet `{ attribute, tool, args }` (§9.6); host resolves + feeds them
+ *     back via the `dynamicOptions` property (see below), one request per attribute.
+ * It performs NO network I/O and holds no secrets (D-4): it renders, validates,
+ * and emits; the host executes tools. A host driving its OWN "submit
+ * everything" button (bypassing per-section footers) can call the public
+ * `validateAll()` method directly on the element to get the library's real
+ * validation + inline field-error display instead of just the raw `values`.
+ * Every field is also validated live on its own edits (`onFieldInput`), not
+ * just on submit — its error updates the instant its value changes.
+ * `sectionsLayout` ('stacked' default, or 'tabs' with `tabsPlacement` for
+ * orientation) controls how sections are arranged — everything else
+ * (validation, submit, footers) behaves identically in either layout.
+ * `tabsShowErrorIndicator` (default true, tabs mode only) puts a red dot on a
+ * tab whose section has a required-but-empty or invalid field, computed live
+ * — not just after a failed submit.
+ *
+ * Renders into LIGHT DOM (`createRenderRoot()` returns `this`, no shadow
+ * root) on all three elements in this package, deliberately: it lets Nile's
+ * CSS custom-property tokens (`--ng-*`/`--nile-*`) and `mcp-ui-render.css`
+ * cascade in from the host's own stylesheet the same way any other page
+ * content does, with no per-shadow-root style injection needed. The
+ * trade-off is zero style encapsulation — a host's global CSS can affect
+ * `.aq-mcp-*` classes and vice versa — and it means `mcp-ui-render.css` MUST
+ * be loaded globally by the host; without it these elements render
+ * structurally correct but entirely unstyled, with no error or warning
+ * (see USAGE.md "Styling & light DOM").
+ */
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { fieldApplies, seedDefaults } from '../engine/values.js';
+import { validateField } from '../engine/validate.js';
+import { collectSubmit } from '../engine/submit.js';
+import { sectionStatus } from '../engine/status.js';
+import './aq-mcp-section.js';
+/**
+ * Header glyphs for the section keys the bootstrap contract itself defines
+ * (§2): `authorization` is who the connector signs in AS, `tenantAttributes`
+ * is where it reads and writes. Any other key falls through to
+ * `FALLBACK_SECTION_ICON`, so an unknown section is never iconless, and a
+ * host can override any of it via `sectionIcons`.
+ */
+const DEFAULT_SECTION_ICONS = {
+    authorization: 'ng-user-01',
+    tenantAttributes: 'ng-server',
+};
+const FALLBACK_SECTION_ICON = 'ng-settings-01';
+/** Highest descriptor contract MAJOR this build understands (§9.5). */
+const SUPPORTED_MAJOR = 1;
+/** Parse the MAJOR from a `MAJOR.MINOR` version string; NaN when malformed. */
+function majorOf(version) {
+    return Number.parseInt(String(version ?? '').split('.')[0], 10);
+}
+let AqMcpConfig = AqMcpConfig_1 = class AqMcpConfig extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The `bootstrap` response to render. */
+        this.descriptor = null;
+        /** Current values keyed by `attribute`. */
+        this.values = {};
+        /**
+         * Host-fed options for `select`/`radio` fields whose list is resolved dynamically
+         * (`field.tool` set, e.g. `listFtpServers`) rather than declared statically as
+         * `field.options` (§9.6) — keyed by `field.attribute`. This library performs no
+         * network I/O itself (D-4): it only ASKS, via `aq-mcp-options-request`; the host
+         * calls the tool and sets the result back in here (immutably — a new object, not
+         * a mutated one, so Lit's property-changed check fires):
+         *
+         *   el.addEventListener('aq-mcp-options-request', async (e) => {
+         *     const { attribute, tool, args } = e.detail;
+         *     const options = await host.callTool(tool, args); // e.g. FTP server list
+         *     el.dynamicOptions = { ...el.dynamicOptions, [attribute]: options };
+         *   });
+         *
+         * Takes priority over `field.options` when both are present for the same
+         * attribute. A field is requested at most once per attribute for this
+         * element's lifetime — a host that needs to force a refresh re-triggers it
+         * itself (out of scope here, same "host decides" split as `validateAll()`).
+         */
+        this.dynamicOptions = {};
+        /** Master switch for every section's footer (§13/§14) — the default "Save
+         *  <label>" button, AND any `registerSectionFooter` override. Default true;
+         *  set false to hide every section's footer at once, e.g. when the host
+         *  drives submission itself via its own button(s). */
+        this.showSectionFooters = true;
+        /** How sections are laid out. `'stacked'` (default) is today's behavior —
+         *  every section as its own card, one after another. `'tabs'` renders one
+         *  `nile-nav-tab` per section (nav) with the section's own card as that
+         *  tab's panel — orientation controlled by `tabsPlacement`. `'accordion'`
+         *  renders one `nile-accordion` per section, single-open, with a completion
+         *  summary in each collapsed header (field count + status chip) and a
+         *  two-column, label-above-control body — see `renderAccordion`. */
+        this.sectionsLayout = 'stacked';
+        /** Tab orientation when `sectionsLayout === 'tabs'` — passed straight
+         *  through to `nile-nav-tab-group`'s own `placement`. Ignored in
+         *  `'stacked'` mode. `'start'` gives a left-hand vertical tab list. */
+        this.tabsPlacement = 'top';
+        /** In `'tabs'` mode, show a small red dot next to a tab's label when that
+         *  section has a required-but-empty field or a live validation error — lets
+         *  the user spot which tab needs attention without opening it. Default
+         *  true (this is a pure addition with no prior equivalent, so there's
+         *  nothing to stay backward-compatible with); set false to opt out.
+         *  Ignored in `'stacked'` mode, where inline field errors are already
+         *  visible without needing a tab-level summary. */
+        this.tabsShowErrorIndicator = true;
+        /** Which section starts expanded in `'accordion'` mode. Left unset
+         *  (`null`), the library picks: the first section with a required-but-empty
+         *  field, else the first visible section — so a form always opens on the
+         *  part that still needs work. A section `key` pins that section instead;
+         *  the empty string starts every section collapsed. Only consulted when the
+         *  descriptor (or this property) changes — never re-evaluated on a value
+         *  edit, which would slam the card the user is typing in shut. Ignored in
+         *  the other layouts. */
+        this.accordionOpenSection = null;
+        /** Show the open section's save footer in `'accordion'` mode. Default
+         *  FALSE, unlike the other two layouts: an accordion is a whole-form
+         *  overview, and the host normally drives one submit for all of it via
+         *  `validateAll()`. Set true to get the per-section "Save <label>" button
+         *  here too; `showSectionFooters` still overrides both to off. Ignored in
+         *  the other layouts. */
+        this.accordionShowFooters = false;
+        /** How many columns the open section's field grid uses in `'accordion'`
+         *  mode. `2` (default) is the side-by-side layout; `1` stacks every field
+         *  full width, which suits a narrow container, a long-label descriptor, or
+         *  simply a host that prefers a single reading column.
+         *
+         *  This is a CEILING, not a fixed count: at `2` the grid still collapses to
+         *  one column when the container is too narrow to give each cell a usable
+         *  width (see `.aq-mcp-section__body--dense`), so `1` means "never two",
+         *  not "always exactly one regardless of space". Ignored in the other
+         *  layouts, whose rows are single-column by construction. */
+        this.accordionColumns = 2;
+        /** Host override for section header icons in `'accordion'` mode, keyed by
+         *  `section.key` → `nile-glyph` name. Highest priority in a three-step
+         *  fallback: this map, then the descriptor's own `section.icon`, then
+         *  `DEFAULT_SECTION_ICONS` below. The host wins because it knows the
+         *  product's iconography; the descriptor only knows the connector. */
+        this.sectionIcons = {};
+        this.errors = {};
+        /** The single expanded section's `key` in `'accordion'` mode, or null when
+         *  all are collapsed. Holding ONE key is what makes the accordion
+         *  single-open: setting it re-renders every sibling with `open=false`. */
+        this.openKey = null;
+        this.pendingAction = null;
+        /** Attributes already asked about via `aq-mcp-options-request` — a plain dedupe
+         *  guard, not rendered state, so mutated in place rather than reassigned (no
+         *  need to trigger a Lit update for it). */
+        this.requestedOptions = new Set();
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate(changed) {
+        // Re-seed on a `values` change too, not just `descriptor` — a field that was
+        // inapplicable at initial load (e.g. gated behind `dependencyAttribute`) only
+        // gets its own `defaultValue` seeded once the user's edit makes it apply, and
+        // that edit lands as a `values` change, never a `descriptor` one. `seedDefaults`
+        // only ever fills in a currently-`undefined` attribute, so comparing key counts
+        // is enough to tell "did this seeding pass actually add anything" — guards
+        // against reassigning (and re-triggering `willUpdate`) every single time.
+        if ((changed.has('descriptor') || changed.has('values')) && this.descriptor) {
+            const seeded = seedDefaults(this.descriptor, this.values);
+            if (Object.keys(seeded).length !== Object.keys(this.values).length) {
+                this.values = seeded;
+            }
+        }
+        // Which accordion card starts open is decided from the descriptor, NOT
+        // re-decided on every edit — see `accordionOpenSection`'s doc comment.
+        // Runs after the seeding above so `resolveOpenKey`'s completeness check
+        // sees defaults that were just filled in, not the pre-seed blanks.
+        if (changed.has('descriptor') || changed.has('accordionOpenSection') || changed.has('sectionsLayout')) {
+            this.openKey = this.resolveOpenKey();
+        }
+    }
+    /** The section to expand first: an explicit `accordionOpenSection` wins
+     *  (including `''` for "all collapsed"), else the first section still
+     *  missing a required value, else the first visible one. */
+    resolveOpenKey() {
+        if (this.accordionOpenSection != null)
+            return this.accordionOpenSection || null;
+        const visible = this.visibleSections(this.sortedSections());
+        const needsAttention = visible.find((s) => sectionStatus(s, this.values).state === 'incomplete');
+        return (needsAttention ?? visible[0])?.key ?? null;
+    }
+    /** Sections in render order (§12) — `order` ascending, missing treated as 0. */
+    sortedSections() {
+        return [...(this.descriptor?.sections ?? [])].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    updated(changed) {
+        if (changed.has('descriptor') || changed.has('values') || changed.has('dynamicOptions')) {
+            this.requestPendingOptions();
+        }
+    }
+    /** Emits `aq-mcp-options-request` for every currently-applicable `select`/`radio`
+     *  field that declares `tool` but has no options yet — neither a static
+     *  `field.options` nor an already-fed `dynamicOptions` entry — and hasn't been
+     *  asked about before. Skipped for a field that's statically hidden or whose
+     *  `dependencyAttribute` condition isn't currently met (§12) — no point asking
+     *  for FTP servers before the user has even chosen SFTP storage. */
+    requestPendingOptions() {
+        for (const section of this.descriptor?.sections ?? []) {
+            for (const field of section.fields ?? []) {
+                if (!field.tool)
+                    continue;
+                if (field['ui-component'] !== 'select' && field['ui-component'] !== 'radio')
+                    continue;
+                if (field.hidden || !fieldApplies(field, this.values))
+                    continue;
+                if (this.requestedOptions.has(field.attribute))
+                    continue;
+                const hasOptions = (this.dynamicOptions[field.attribute] ?? field.options ?? []).length > 0;
+                if (hasOptions)
+                    continue;
+                this.requestedOptions.add(field.attribute);
+                this.dispatchEvent(new CustomEvent('aq-mcp-options-request', {
+                    detail: { attribute: field.attribute, tool: field.tool, args: field.args ?? {} },
+                    bubbles: true,
+                    composed: true,
+                }));
+            }
+        }
+    }
+    /** Look up a field's own schema by `attribute` — needed to re-validate it
+     *  live on every edit (`onFieldInput`), since the event only carries the
+     *  new value, not the field definition itself. */
+    fieldByAttribute(attribute) {
+        for (const s of this.descriptor?.sections ?? []) {
+            const f = (s.fields ?? []).find((field) => field.attribute === attribute);
+            if (f)
+                return f;
+        }
+        return undefined;
+    }
+    /** Whether a field is currently in play for validation — skips
+     *  `datatype: "none"` (buttons/reports never hold a value), statically
+     *  hidden fields, and fields whose `dependencyAttribute` condition isn't
+     *  currently met. Shared by `computeErrors`, live on-change validation, and
+     *  the tab error-indicator, so all three agree on what "applicable" means. */
+    fieldNeedsValidation(f) {
+        return f.datatype !== 'none' && !f.hidden && fieldApplies(f, this.values);
+    }
+    // ---- field intent ----
+    onFieldInput(e) {
+        const { attribute, value } = e.detail;
+        this.values = { ...this.values, [attribute]: value };
+        // Live-validate on every change (not just clear-and-wait-for-submit): an
+        // edited field's error updates immediately to reflect its NEW value —
+        // shows the instant it's typed, clears the instant it's actually fixed.
+        const field = this.fieldByAttribute(attribute);
+        const msg = field && this.fieldNeedsValidation(field) ? validateField(field, value) : null;
+        this.errors = { ...this.errors, [attribute]: msg };
+        this.dispatchEvent(new CustomEvent('aq-mcp-change', {
+            detail: { attribute, value, values: this.values },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    onFieldAction(e) {
+        const { field, action } = e.detail;
+        const confirm = action?.confirm ?? field.confirm;
+        if (confirm) {
+            this.pendingAction = { field, action }; // honour confirm before invoking (§5)
+            return;
+        }
+        this.emitAction(field, action);
+    }
+    onSectionSubmit(e) {
+        const { sectionKey } = e.detail;
+        const section = (this.descriptor?.sections ?? []).find((s) => s.key === sectionKey);
+        if (section)
+            this.submitSection(section);
+    }
+    emitAction(field, action) {
+        this.dispatchEvent(new CustomEvent('aq-mcp-action', {
+            detail: {
+                tool: action?.tool ?? field.tool,
+                args: action?.args ?? field.args ?? {},
+                confirm: action?.confirm ?? field.confirm,
+                field,
+                action,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // ---- submit ----
+    /** Validate one batch of fields against the current `values` — shared by
+     *  `validateSection` (one section) and the public `validateAll` (every
+     *  section), so both paths compute errors identically. */
+    computeErrors(fields) {
+        const errs = {};
+        let ok = true;
+        for (const f of fields) {
+            if (!this.fieldNeedsValidation(f))
+                continue;
+            const msg = validateField(f, this.values[f.attribute]);
+            errs[f.attribute] = msg;
+            if (msg)
+                ok = false;
+        }
+        return { errs, ok };
+    }
+    /** Does this section have an actual, currently-recorded validation error —
+     *  i.e. a field present in `this.errors` with a message. Deliberately reads
+     *  `this.errors`, NOT a fresh re-validation of every field: a required field
+     *  the user simply hasn't reached yet is incomplete, not invalid, and
+     *  shouldn't flag its tab before the user has done anything. An error only
+     *  lands in `this.errors` once a field has actually been edited (live
+     *  validation) or the section/form has been submitted at least once —
+     *  exactly the same "has this field's error actually surfaced" signal the
+     *  inline per-field error display already uses. */
+    sectionHasError(section) {
+        return (section.fields ?? []).some((f) => !!this.errors[f.attribute]);
+    }
+    validateSection(section) {
+        const { errs, ok } = this.computeErrors(section.fields ?? []);
+        this.errors = { ...this.errors, ...errs };
+        return ok;
+    }
+    submitSection(section) {
+        if (!this.validateSection(section))
+            return;
+        this.dispatchEvent(new CustomEvent('aq-mcp-submit', {
+            detail: collectSubmit(section, this.values),
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /** Validate every section's applicable fields at once and return the full
+     *  form state. Pushes results into this element's own `errors` state — the
+     *  same thing a section's Save button does via `validateSection`, just
+     *  across ALL sections at once — so a host-driven "submit everything"
+     *  button (bypassing per-section footers entirely) still gets the
+     *  library's real validation and inline field-error display, not just the
+     *  raw `values`. Call it imperatively on the element (e.g. an Angular
+     *  template ref: `<aq-mcp-config #cfg>` then `cfg.validateAll()`) — there's
+     *  no natural event to hang this off, since the host decides what "submit
+     *  everything" even means for its own data shape. */
+    validateAll() {
+        const allFields = (this.descriptor?.sections ?? []).flatMap((s) => s.fields ?? []);
+        const { errs, ok } = this.computeErrors(allFields);
+        this.errors = errs;
+        return { valid: ok, values: this.values };
+    }
+    render() {
+        const d = this.descriptor;
+        if (!d)
+            return html ``;
+        const sections = this.sortedSections();
+        const major = majorOf(d.version);
+        // MAJOR ahead of what we support → best-effort render on known keys + a notice (§9.5).
+        const versionAhead = Number.isFinite(major) && major > SUPPORTED_MAJOR;
+        return html `
+      <div
+        class="aq-mcp ${this.sectionsLayout === 'accordion' ? 'aq-mcp--accordion' : ''}"
+        @field-input=${this.onFieldInput}
+        @field-action=${this.onFieldAction}
+        @section-submit=${this.onSectionSubmit}
+      >
+        ${versionAhead
+            ? html `<nile-section-message
+              variant="warning"
+              heading="Unsupported configuration version"
+              description="This form was built for an older version (v${SUPPORTED_MAJOR}.x). Some fields may not render as intended."
+            ></nile-section-message>`
+            : html ``}
+        ${this.renderSections(sections)}
+        ${this.renderConfirm()}
+      </div>
+    `;
+    }
+    /** Dispatch to the layout the host asked for. `'stacked'` — today's
+     *  default — is the fallback for any unrecognised value, so a typo'd
+     *  attribute renders a usable form rather than nothing. */
+    renderSections(sections) {
+        if (this.sectionsLayout === 'tabs')
+            return this.renderTabs(sections);
+        if (this.sectionsLayout === 'accordion')
+            return this.renderAccordion(sections);
+        return sections.map((s) => this.renderSection(s));
+    }
+    /** A section whose every field is statically hidden has nothing to show
+     *  (§7, §12) — in 'stacked' mode `renderSection` just renders nothing for
+     *  it; in 'tabs' mode it must not get a tab at all (an empty tab is worse
+     *  than no tab), so this filters the nav list up front. */
+    visibleSections(sections) {
+        return sections.filter((s) => {
+            const fields = s.fields ?? [];
+            return !(fields.length > 0 && fields.every((f) => f.hidden));
+        });
+    }
+    renderTabs(sections) {
+        const visible = this.visibleSections(sections);
+        if (visible.length === 0)
+            return html ``;
+        // 'start'/'end' are the vertical placements — nile-nav-tab-group's own
+        // `width` attribute fixes each tab item's width (its documented purpose:
+        // preventing layout shift when switching tabs), which for a vertical nav
+        // list is exactly the nav column's width; `indicator-placement="left"`
+        // is Nile's own documented pairing for vertical placement.
+        const vertical = this.tabsPlacement === 'start' || this.tabsPlacement === 'end';
+        return html `
+      <nile-nav-tab-group
+        class="aq-mcp-tabs"
+        placement=${this.tabsPlacement}
+        indicator-placement=${vertical ? 'left' : ''}
+        width=${vertical ? '220px' : ''}
+      >
+        ${visible.map((s) => html `<nile-nav-tab slot="nav" panel=${s.key}>
+            <span class="aq-mcp-tab-label" title=${s.label}>${s.label}</span>
+            ${this.tabsShowErrorIndicator && this.sectionHasError(s)
+            ? html `<span
+                  slot="suffix"
+                  class="aq-mcp-tab-error-dot"
+                  role="img"
+                  aria-label="${s.label} has a validation error"
+                ></span>`
+            : ''}
+          </nile-nav-tab>`)}
+        ${visible.map((s) => html `<nile-nav-tab-panel name=${s.key}>${this.renderSection(s, true)}</nile-nav-tab-panel>`)}
+      </nile-nav-tab-group>
+    `;
+    }
+    /**
+     * Is this `nile-show`/`nile-hide` the ACCORDION's own, or one that bubbled up
+     * from a descendant?
+     *
+     * Every Nile component emits with `bubbles: true, composed: true`
+     * (`internal/nile-element.ts`), and `nile-tooltip` emits the same
+     * `nile-show`/`nile-hide` names an accordion does. A field's help tooltip
+     * lives inside the open card, so without this guard simply hovering an info
+     * icon opened the section and dismissing the tooltip COLLAPSED it — the
+     * card slamming shut under the user's cursor.
+     *
+     * `currentTarget` is the `nile-accordion` the listener sits on;
+     * `target` is whatever emitted. Comparing them keeps a descendant's
+     * identically-named event from driving this element's open state, and stays
+     * correct for any future nested Nile component that reuses these names.
+     */
+    static isOwnDisclosure(e) {
+        return e.target === e.currentTarget;
+    }
+    /**
+     * `sectionsLayout: 'accordion'` — one `nile-accordion` per visible section,
+     * single-open, in §12 order.
+     *
+     * Single-open falls out of holding ONE key: `nile-accordion` owns its own
+     * `open` flag, so both directions are wired — `?open` down from `openKey`,
+     * `nile-show`/`nile-hide` back up. Setting `openKey` on a show re-renders
+     * every sibling with `open=false`, which closes them; there's no need to
+     * imperatively call `hide()` on the others.
+     */
+    /** Host map first, then the built-in map for the contract's own section
+     *  keys, then a generic glyph. The descriptor has no icon field and its
+     *  shape is fixed, so the host is the only place a product can override
+     *  this — which is the right place anyway: iconography is the app's
+     *  decision, not the connector's. */
+    iconFor(section) {
+        return this.sectionIcons[section.key] ?? DEFAULT_SECTION_ICONS[section.key] ?? FALLBACK_SECTION_ICON;
+    }
+    /**
+     * The header's completion readout, for a section the user may never open.
+     *
+     * A mark and a NUMBER, no sentence. The count is descriptor-derived (how
+     * many `isRequired` fields still hold no value); the check and the dot are
+     * symbols. An earlier version read "Complete" and "N required left", which
+     * is the renderer narrating state in words the descriptor never supplied.
+     *
+     * The trade-off is real and worth naming: a bare dot-and-count is terser
+     * than "2 required left", and leans on the reader connecting it to the `*`
+     * marks inside the card. `title` carries the count on hover and to assistive
+     * tech using the descriptor's own key name rather than invented prose.
+     */
+    renderSectionStatus(status) {
+        if (status.state === 'neutral')
+            return html ``;
+        if (status.state === 'incomplete') {
+            return html `<span
+        class="aq-mcp-acc__state aq-mcp-acc__state--incomplete"
+        title="isRequired: ${status.requiredEmpty}"
+      >
+        <span class="aq-mcp-acc__dot"></span>${status.requiredEmpty}
+      </span>`;
+        }
+        return html `<span class="aq-mcp-acc__state aq-mcp-acc__state--complete">
+      <nile-glyph name="ng-check" method="stroke" size="18" color="currentColor"></nile-glyph>
+    </span>`;
+    }
+    /**
+     * `sectionsLayout: 'accordion'` — one `nile-accordion` per visible section,
+     * single-open, in §12 order. Each header is an icon tile, the section
+     * `label`, its `authType` badge, and a completion status beside the chevron,
+     * so a collapsed section says what it is and whether it still needs work
+     * without being opened.
+     *
+     * Every word of connector-describing text here is a descriptor VALUE
+     * rendered verbatim — `section.label` and `section.authType`. An earlier
+     * version composed a sentence around them ("Basic authentication · saved by
+     * the platform"), which read as the connector's own description of itself
+     * but was the renderer putting words in its mouth: only "Basic" came from
+     * the descriptor, and "saved by the platform" was inferred from a key being
+     * ABSENT. The `bootstrap` format carries no prose field, so rather than
+     * invent one, nothing is written here that the descriptor did not supply.
+     *
+     * Single-open falls out of holding ONE key: `nile-accordion` owns its own
+     * `open` flag, so both directions are wired — `?open` down from `openKey`,
+     * `nile-show`/`nile-hide` back up. Setting `openKey` on a show re-renders
+     * every sibling with `open=false`, which closes them; there's no need to
+     * imperatively call `hide()` on the others.
+     */
+    renderAccordion(sections) {
+        const visible = this.visibleSections(sections);
+        if (visible.length === 0)
+            return html ``;
+        return html `<div class="aq-mcp-acc-list">
+      ${visible.map((s) => {
+            const status = sectionStatus(s, this.values);
+            return html `<nile-accordion
+          class="aq-mcp-acc"
+          data-section=${s.key}
+          data-state=${status.state}
+          expandIconPlacement="right"
+          size="lg"
+          ?open=${this.openKey === s.key}
+          @nile-show=${(e) => {
+                if (!AqMcpConfig_1.isOwnDisclosure(e))
+                    return;
+                this.openKey = s.key;
+            }}
+          @nile-hide=${(e) => {
+                if (!AqMcpConfig_1.isOwnDisclosure(e))
+                    return;
+                // Only clear if THIS section is the one recorded as open — a hide
+                // fired by a sibling being re-rendered closed must not wipe the
+                // key that was just set by the section the user actually opened.
+                if (this.openKey === s.key)
+                    this.openKey = null;
+            }}
+        >
+          <div slot="summary" class="aq-mcp-acc__summary">
+            <span class="aq-mcp-acc__icon" aria-hidden="true">
+              <nile-glyph name=${this.iconFor(s)} method="stroke" size="20" color="currentColor"></nile-glyph>
+            </span>
+            <span class="aq-mcp-acc__heading">
+              <span class="aq-mcp-acc__label">${s.label}</span>
+              ${s.authType ? html `<nile-badge variant="info">${s.authType}</nile-badge>` : ''}
+            </span>
+            ${this.renderSectionStatus(status)}
+          </div>
+          ${this.renderSection(s, false, true)}
+        </nile-accordion>`;
+        })}
+    </div>`;
+    }
+    /** `compact` drops the per-section card's own border + title (the tab nav
+     *  already shows the label) when nested inside a tab panel — the authType
+     *  badge and save-target caption still show either way. `dense` is the
+     *  accordion equivalent: the card AND the header go (the accordion's own
+     *  summary carries all of it), and the body switches to the two-column,
+     *  label-above-control grid. They're separate flags, not one enum, because
+     *  each drops a different amount of chrome. */
+    renderSection(section, compact = false, dense = false) {
+        const fields = section.fields ?? [];
+        // Section whose every field is hidden renders nothing (§7, §12).
+        if (fields.length > 0 && fields.every((f) => f.hidden))
+            return html ``;
+        // Accordion mode hides the per-section footer unless the host opts back
+        // in (`accordionShowFooters`) — `showSectionFooters` still vetoes both.
+        const showFooter = this.showSectionFooters && (!dense || this.accordionShowFooters);
+        return html `<aq-mcp-section
+      .section=${section}
+      .values=${this.values}
+      .errors=${this.errors}
+      .showFooter=${showFooter}
+      .compact=${compact}
+      .dense=${dense}
+      .columns=${this.accordionColumns}
+      .dynamicOptions=${this.dynamicOptions}
+    ></aq-mcp-section>`;
+    }
+    renderConfirm() {
+        const pending = this.pendingAction;
+        if (!pending)
+            return html ``;
+        const { field, action } = pending;
+        const cancel = () => {
+            this.pendingAction = null;
+        };
+        const proceed = () => {
+            this.pendingAction = null;
+            this.emitAction(field, action);
+        };
+        return html `
+      <nile-dialog open label="Please confirm" @nile-close=${cancel} @nile-hide=${cancel}>
+        <p>${action?.confirm ?? field.confirm}</p>
+        <nile-button slot="footer" variant="ghost" @click=${cancel}>Cancel</nile-button>
+        <nile-button slot="footer" variant="primary" @click=${proceed}>Continue</nile-button>
+      </nile-dialog>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "descriptor", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "values", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "dynamicOptions", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "showSectionFooters", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AqMcpConfig.prototype, "sectionsLayout", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], AqMcpConfig.prototype, "tabsPlacement", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "tabsShowErrorIndicator", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "accordionOpenSection", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "accordionShowFooters", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], AqMcpConfig.prototype, "accordionColumns", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "sectionIcons", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "errors", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "openKey", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AqMcpConfig.prototype, "pendingAction", void 0);
+AqMcpConfig = AqMcpConfig_1 = __decorate([
+    customElement('aq-mcp-config')
+], AqMcpConfig);
+export { AqMcpConfig };
+//# sourceMappingURL=aq-mcp-config.js.map