mlform 0.1.9 → 0.1.10

package/dist/mlform/kit.mjs

@@ -1,3 +1,1896 @@
-import { A as e, C as t, D as n, E as r, F as i, M as a, N as o, O as s, P as c, R as l, S as u, T as d, _ as f, a as p, b as m, c as h, d as g, f as _, g as v, h as y, i as b, j as x, k as S, l as C, m as w, n as T, o as E, p as D, r as O, s as k, t as A, u as j, v as M, w as N, x as P, y as F, z as I } from "../transport-B6ePTLFK.js";
-import { a as L, c as R, d as z, i as B, l as V, n as H, o as U, r as W, s as G, t as K, u as q } from "../kit-QY6zff-h.js";
-export { l as assertPayloadWithinLimits, I as assertTransportCapabilities, G as collectLayoutReferences, p as createFallbackTransport, k as createFanoutTransport, U as createFormView, c as createGraphqlTransport, n as createGrpcSessionTransport, s as createGrpcStreamTransport, S as createGrpcTransport, e as createGrpcUnaryTransport, T as createHedgedTransport, i as createJsonTransport, h as createLoadBalancedTransport, f as createMemoryCircuitBreakerState, y as createMemorySharedRateLimiter, _ as createMemoryTransportCacheStore, A as createMemoryTransportHealthState, b as createPipelineTransport, E as createQuorumFanoutTransport, O as createRacingTransport, C as createRoutingTransport, a as createSessionTransport, o as createSseTransport, x as createWebSocketSessionTransport, j as createWeightedRoutingTransport, q as defaultKitDesignSystem, z as defaultKitLabels, R as flattenLayoutNodes, L as mountAccordionForm, W as mountForm, H as mountTabsForm, K as mountWizardForm, r as pipe, B as unmountForm, V as walkLayoutNodes, M as withAuth, g as withCache, v as withCircuitBreaker, D as withDedup, P as withLogging, F as withMetrics, w as withRateLimit, u as withRequestTransform, t as withResponseTransform, d as withRetry, N as withTimeout, m as withTracing };
+import { t as e } from "../runtime-CI7vlp9i.js";
+import { i as t, s as n } from "../schema-DSAZ6bts.js";
+import { n as r } from "../builtins-D8rXH4ED.js";
+import { _ as i, a, h as o, l as s, m as c, p as l, r as u, t as d } from "../primitives-k9HTnd72.js";
+import { d as f, h as p, r as m } from "../design-6suKVQDo.js";
+import { LitElement as h, css as g, html as _, nothing as v } from "lit";
+import { customElement as y, property as b, state as x } from "lit/decorators.js";
+import { repeat as S } from "lit/directives/repeat.js";
+//#region src/kit/defaults.ts
+var C = { ...c }, w = {
+	mode: "auto",
+	theme: "neutral",
+	recipe: "default"
+}, ee = (e) => {
+	let n = t();
+	for (let t of e.listFields()) n.registerField(t);
+	for (let t of e.listReports()) n.registerReport(t);
+	return n;
+}, te = (e) => e?.clone() ?? u(), ne = (e) => e?.clone() ?? p.clone(), re = (e = {}) => ({
+	...C,
+	...e
+}), ie = (e = {}) => f(w, e), T = (e, t) => {
+	if (t(e), "children" in e) for (let n of e.children) T(n, t);
+}, E = (e, t) => {
+	switch (e.kind) {
+		case "stacked":
+		case "split":
+			for (let n of e.children) T(n, t);
+			return;
+		case "wizard":
+			for (let n of e.steps) for (let e of n.children) T(e, t);
+			return;
+		case "tabs":
+			for (let n of e.tabs) for (let e of n.children) T(e, t);
+			return;
+	}
+}, D = (e) => {
+	let t = [];
+	return E(e, (e) => {
+		t.push(e);
+	}), t;
+}, O = (e) => {
+	let t = {
+		fields: [],
+		reports: []
+	};
+	for (let n of D(e)) switch (n.kind) {
+		case "field":
+			t.fields.push(n.field);
+			break;
+		case "report":
+			t.reports.push(n.report);
+			break;
+		default: break;
+	}
+	return t;
+}, k = {
+	invalidDesignSystemSnapshot: "replaceDesignSystem requires an explicit mode, theme, and recipe.",
+	fieldDuplicateInLayout: (e) => `Field "${e}" appears multiple times in layout.`,
+	fieldMissingInLayout: (e) => `Field "${e}" is missing from layout.`,
+	reportDuplicateInLayout: (e) => `Report "${e}" appears multiple times in layout.`,
+	unknownFieldReference: (e) => `Layout references unknown field "${e}".`,
+	unknownReportReference: (e) => `Layout references unknown report "${e}".`,
+	wizardRequiresSteps: "Wizard layout must define at least one step.",
+	wizardStepEmpty: (e) => `Wizard step "${e}" must contain at least one layout node.`,
+	tabsRequiresTabs: "Tabs layout must define at least one tab.",
+	tabEmpty: (e) => `Tab "${e}" must contain at least one layout node.`,
+	nonWizardNextStep: "nextStep() is only available for wizard layouts.",
+	nonWizardGoToStep: "goToStep() is only available for wizard layouts.",
+	nonTabsSetActiveTab: "setActiveTab() is only available for tabs layouts.",
+	unknownTab: (e) => `Unknown tab "${e}".`,
+	unknownWizardStep: (e) => `Unknown wizard step "${e}".`,
+	unknownDisclosureSection: (e) => `Unknown disclosure section "${e}".`
+}, A = {
+	wizard: "mlf-kit-wizard",
+	tabs: "mlf-kit-tabs",
+	disclosure: "mlf-kit-disclosure",
+	stepIndicator: "mlf-kit-step-indicator"
+}, ae = async (e) => {
+	await Promise.resolve(), "updateComplete" in e && await e.updateComplete, await Promise.resolve();
+}, oe = (e) => {
+	let t = e.getSnapshot().fields.filter((e) => e.state.visible && e.state.errors.length > 0), n = new Map(e.getLayoutReferences().fields.map((e, t) => [e, t]));
+	return t.sort((e, t) => (n.get(e.id) ?? 0) - (n.get(t.id) ?? 0)), t[0] ?? null;
+}, j = async (e, t, n) => {
+	let r = oe(t);
+	if (!r) return !1;
+	let i = t.getSnapshot().layout.kind;
+	return i === "wizard" && r.stepId && await t.goToStep(r.stepId), i === "tabs" && r.tabId && t.setActiveTab(r.tabId), r.sectionId && t.openSection(r.sectionId), await ae(e), n(e, r.id);
+}, M = ({ node: e, view: t, snapshot: n, registry: r, primitiveText: i = o, sectionClass: a, sectionCopyClass: s, sectionTitleClass: c, sectionDescriptionClass: l, childrenClass: u, groupBaseClass: d }) => {
+	switch (e.kind) {
+		case "section": {
+			let o = n.disclosure?.openSectionIds.includes(e.id) ?? !0;
+			return _`
+        <section class=${a} data-section-id=${e.id}>
+          ${e.title || e.description ? _`
+                <button
+                  type="button"
+                  class=${s}
+                  aria-expanded=${String(o)}
+                  @click=${() => t?.toggleSection(e.id)}
+                >
+                  <span class="section-label">
+                    ${e.title ? _`<span class=${c}>${e.title}</span>` : v}
+                    ${e.description ? _`<span class=${l}>${e.description}</span>` : v}
+                  </span>
+                  <span class="section-toggle-icon" aria-hidden="true">${o ? "−" : "+"}</span>
+                </button>
+              ` : v}
+          ${o ? _`
+                <div class=${u}>
+                  ${S(e.children, (t, n) => `${e.id}-${n}`, (e) => M({
+				node: e,
+				view: t,
+				snapshot: n,
+				registry: r,
+				primitiveText: i,
+				sectionClass: a,
+				sectionCopyClass: s,
+				sectionTitleClass: c,
+				sectionDescriptionClass: l,
+				childrenClass: u,
+				groupBaseClass: d
+			}))}
+                </div>
+              ` : v}
+        </section>
+      `;
+		}
+		case "group": return _`
+        <div
+          class=${`${d}${e.columns ? ` columns-${e.columns}` : ""}`}
+          data-group-id=${e.id}
+        >
+          ${S(e.children, (t, n) => `${e.id}-${n}`, (e) => M({
+			node: e,
+			view: t,
+			snapshot: n,
+			registry: r,
+			primitiveText: i,
+			sectionClass: a,
+			sectionCopyClass: s,
+			sectionTitleClass: c,
+			sectionDescriptionClass: l,
+			childrenClass: u,
+			groupBaseClass: d
+		}))}
+        </div>
+      `;
+		case "field": {
+			let t = n.fields.find((t) => t.id === e.field);
+			return t ? _`
+        <mlf-field-frame
+          data-field-id=${t.id}
+          .controller=${t.controller}
+          .descriptor=${t.descriptor}
+          .registry=${r}
+          .text=${i}
+        ></mlf-field-frame>
+      ` : v;
+		}
+		case "report": {
+			let t = n.reports.find((t) => t.id === e.report);
+			return t ? _`
+        <mlf-report-frame
+          .controller=${t.controller}
+          .descriptor=${t.descriptor}
+          .registry=${r}
+          .text=${i}
+          .lastResult=${n.form.lastResult}
+        ></mlf-report-frame>
+      ` : v;
+		}
+	}
+}, se = g`
+  :host {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+    font-family: var(--mlf-font-family-body);
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  .root {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100%;
+    border-radius: var(--mlf-panel-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow:
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
+    overflow: hidden;
+  }
+  .header,
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem;
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
+    border-bottom: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+  }
+  .footer {
+    border-bottom: none;
+    border-top: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
+  }
+  .title {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+  .actions {
+    display: inline-flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .body {
+    display: grid;
+    gap: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .section + .section {
+    margin-block-start: var(--mlf-section-gap, 1rem);
+  }
+  .section-toggle {
+    inline-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .section-copy,
+  .nested-copy {
+    display: grid;
+    gap: 0.35rem;
+  }
+  .section-label {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+  .section-title {
+    margin: 0;
+    font-size: 0.96rem;
+    font-weight: 700;
+    line-height: 1.35;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+  }
+  .section-description,
+  .nested-description {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    color: var(--mlf-color-text-muted, #475569);
+    line-height: 1.5;
+  }
+  .section-toggle-icon {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    border-radius: var(--mlf-control-radius, var(--mlf-input-radius, 8px));
+    color: var(--mlf-section-toggle-color, var(--mlf-color-text-muted, currentColor));
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .section-toggle:focus-visible .section-toggle-icon {
+    outline: var(--mlf-focus-ring-width, 2px) solid
+      var(--mlf-focus-ring-color, var(--mlf-color-accent, #1e40af));
+    outline-offset: 2px;
+  }
+  .section-panel {
+    display: grid;
+    gap: 1rem;
+    padding-block-start: 0.75rem;
+  }
+  .collection,
+  .section-children,
+  .nested-section,
+  .group {
+    display: grid;
+    gap: var(--mlf-section-gap, 1rem);
+  }
+  .nested-copy {
+    padding: 0 0.5rem;
+  }
+  .nested-title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+  }
+  .group.columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .group.columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: var(--mlf-input-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid var(--mlf-input-border, #e2e8f0);
+    background: var(--mlf-input-bg, var(--mlf-color-surface-elevated, #ffffff));
+    color: var(--mlf-color-text, #0f172a);
+    font: inherit;
+    font-size: 0.92rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .btn-submit {
+    border-color: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    background: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    color: var(--mlf-submit-color, #ffffff);
+  }
+  .btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  @media (max-width: 900px) {
+    .group.columns-2,
+    .group.columns-3 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .header,
+    .footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  }
+`, N = class extends h {
+	static styles = se;
+	#e;
+	get view() {
+		return this.#e;
+	}
+	set view(e) {
+		this.#e = e;
+	}
+	#t;
+	get registry() {
+		return this.#t;
+	}
+	set registry(e) {
+		this.#t = e;
+	}
+	#n = o;
+	get primitiveText() {
+		return this.#n;
+	}
+	set primitiveText(e) {
+		this.#n = e;
+	}
+	#r = "Submit";
+	get submitLabel() {
+		return this.#r;
+	}
+	set submitLabel(e) {
+		this.#r = e;
+	}
+	#i = "Validating...";
+	get validatingLabel() {
+		return this.#i;
+	}
+	set validatingLabel(e) {
+		this.#i = e;
+	}
+	#a = "Submitting...";
+	get submittingLabel() {
+		return this.#a;
+	}
+	set submittingLabel(e) {
+		this.#a = e;
+	}
+	#o = null;
+	get snapshot() {
+		return this.#o;
+	}
+	set snapshot(e) {
+		this.#o = e;
+	}
+	#s = null;
+	willUpdate(e) {
+		e.has("view") && (this.#s?.(), this.#s = null, this.snapshot = this.view?.getSnapshot() ?? null, this.view && (this.#s = this.view.subscribe((e) => {
+			this.snapshot = e;
+		})));
+	}
+	disconnectedCallback() {
+		this.#s?.(), this.#s = null, super.disconnectedCallback();
+	}
+	render() {
+		let e = this.snapshot;
+		if (!e || e.layout.kind !== "stacked" && e.layout.kind !== "split") return _``;
+		let t = e.form.status, n = t === "validating" ? this.validatingLabel : t === "submitting" ? this.submittingLabel : this.submitLabel;
+		return _`
+      <section class="root" part="layout-panel">
+        <div class="body">
+          <div class="collection">
+            ${S(e.layout.children, (e, t) => `root-${t}`, (t) => M({
+			node: t,
+			view: this.view,
+			snapshot: e,
+			registry: this.registry,
+			primitiveText: this.primitiveText,
+			sectionClass: "section",
+			sectionCopyClass: "section-toggle",
+			sectionTitleClass: "section-title",
+			sectionDescriptionClass: "section-description",
+			childrenClass: "section-panel",
+			groupBaseClass: "group"
+		}))}
+          </div>
+        </div>
+
+        <footer class="footer" part="actions">
+          <span>${e.disclosure?.openSectionIds.length ?? 0} sections open</span>
+          <button
+            type="button"
+            class="btn btn-submit"
+            ?disabled=${t === "validating" || t === "submitting"}
+            @click=${this.#c}
+          >
+            ${n}
+          </button>
+        </footer>
+      </section>
+    `;
+	}
+	#c = async () => {
+		if (this.view) try {
+			await this.view.submit();
+		} catch (e) {
+			if (!await j(this, this.view, s)) throw e;
+		}
+	};
+};
+l([b({ attribute: !1 })], N.prototype, "view", null), l([b({ attribute: !1 })], N.prototype, "registry", null), l([b({ attribute: !1 })], N.prototype, "primitiveText", null), l([b({ type: String })], N.prototype, "submitLabel", null), l([b({ type: String })], N.prototype, "validatingLabel", null), l([b({ type: String })], N.prototype, "submittingLabel", null), l([x()], N.prototype, "snapshot", null), N = l([y(A.disclosure)], N);
+//#endregion
+//#region src/kit/tabs-root-styles.ts
+var ce = g`
+  :host {
+    display: block;
+    flex: 1 1 auto;
+    align-self: stretch;
+    inline-size: 100%;
+    block-size: 100%;
+    color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+    font-family: var(--mlf-font-family-body);
+    min-width: 0;
+    min-height: 0;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  .root {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    inline-size: 100%;
+    block-size: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--mlf-panel-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow:
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
+  }
+  .tablist {
+    display: flex;
+    gap: 0.35rem;
+    overflow-x: auto;
+    padding: 0.85rem 1rem 0;
+    border-bottom: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
+    scrollbar-width: thin;
+  }
+  .tab {
+    position: relative;
+    border: none;
+    border-radius: 12px 12px 0 0;
+    background: transparent;
+    color: var(--mlf-color-text-muted, #475569);
+    font: inherit;
+    font-size: 0.94rem;
+    font-weight: 600;
+    padding: 0.85rem 1rem 0.75rem;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+  .tab[aria-selected="true"] {
+    color: var(--mlf-color-text, #0f172a);
+    background: color-mix(in srgb, var(--mlf-color-surface, #ffffff) 94%, transparent);
+  }
+  .tab[aria-selected="true"]::after {
+    content: "";
+    position: absolute;
+    inset-inline: 0.8rem;
+    inset-block-end: 0;
+    block-size: 3px;
+    border-radius: 999px;
+    background: var(--mlf-color-accent, #1e40af);
+  }
+  .tab-panel {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .tab-header {
+    display: grid;
+    gap: 0.35rem;
+    padding: 1rem 1.25rem 0.5rem;
+  }
+  .tab-title {
+    margin: 0;
+    font-size: 1.08rem;
+    font-weight: 700;
+    color: var(--mlf-color-text, #0f172a);
+    line-height: 1.3;
+  }
+  .tab-description {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    color: var(--mlf-color-text-muted, #475569);
+    line-height: 1.5;
+  }
+  .body {
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+    padding: 0.5rem 1rem 1.25rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .collection,
+  .section-children,
+  .group {
+    display: grid;
+    gap: var(--mlf-section-gap, 1rem);
+  }
+  .section {
+    display: grid;
+    gap: 0.75rem;
+  }
+  .section-copy {
+    inline-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .section-label {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+  .section-title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1.35;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+  }
+  .section-description {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    color: var(--mlf-color-text-muted, #475569);
+    line-height: 1.5;
+  }
+  .section-toggle-icon {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    border-radius: var(--mlf-control-radius, var(--mlf-input-radius, 8px));
+    color: var(--mlf-section-toggle-color, var(--mlf-color-text-muted, currentColor));
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .section-copy:focus-visible .section-toggle-icon {
+    outline: var(--mlf-focus-ring-width, 2px) solid
+      var(--mlf-focus-ring-color, var(--mlf-color-accent, #1e40af));
+    outline-offset: 2px;
+  }
+  .group.columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .group.columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.85rem 1rem 1rem;
+    border-top: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
+  }
+  .nav {
+    display: inline-flex;
+    gap: 0.5rem;
+  }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: var(--mlf-input-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid var(--mlf-input-border, #e2e8f0);
+    background: var(--mlf-input-bg, var(--mlf-color-surface-elevated, #ffffff));
+    color: var(--mlf-color-text, #0f172a);
+    font: inherit;
+    font-size: 0.92rem;
+    font-weight: 600;
+    cursor: pointer;
+  }
+  .btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .btn-submit {
+    border-color: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    background: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    color: var(--mlf-submit-color, #ffffff);
+  }
+  @media (max-width: 900px) {
+    .group.columns-2,
+    .group.columns-3 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .footer {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .nav {
+      justify-content: space-between;
+    }
+  }
+`, P = class extends h {
+	static styles = ce;
+	#e;
+	get view() {
+		return this.#e;
+	}
+	set view(e) {
+		this.#e = e;
+	}
+	#t;
+	get registry() {
+		return this.#t;
+	}
+	set registry(e) {
+		this.#t = e;
+	}
+	#n = o;
+	get primitiveText() {
+		return this.#n;
+	}
+	set primitiveText(e) {
+		this.#n = e;
+	}
+	#r = "Submit";
+	get submitLabel() {
+		return this.#r;
+	}
+	set submitLabel(e) {
+		this.#r = e;
+	}
+	#i = "Validating...";
+	get validatingLabel() {
+		return this.#i;
+	}
+	set validatingLabel(e) {
+		this.#i = e;
+	}
+	#a = "Submitting...";
+	get submittingLabel() {
+		return this.#a;
+	}
+	set submittingLabel(e) {
+		this.#a = e;
+	}
+	#o = null;
+	get snapshot() {
+		return this.#o;
+	}
+	set snapshot(e) {
+		this.#o = e;
+	}
+	#s = null;
+	willUpdate(e) {
+		e.has("view") && (this.#s?.(), this.#s = null, this.snapshot = this.view?.getSnapshot() ?? null, this.view && (this.#s = this.view.subscribe((e) => {
+			this.snapshot = e;
+		})));
+	}
+	disconnectedCallback() {
+		this.#s?.(), this.#s = null, super.disconnectedCallback();
+	}
+	render() {
+		let e = this.snapshot, t = e?.tabs;
+		if (!e || !t || e.layout.kind !== "tabs") return _``;
+		let n = e.layout.tabs[t.activeTabIndex];
+		if (!n) return _``;
+		let r = e.form.status, i = r === "validating" ? this.validatingLabel : r === "submitting" ? this.submittingLabel : this.submitLabel;
+		return _`
+      <section class="root" part="tabs-panel">
+        <div class="tablist" role="tablist" aria-label="Form sections">
+          ${S(e.layout.tabs, (e) => e.id, (e, n) => _`
+              <button
+                type="button"
+                class="tab"
+                role="tab"
+                aria-selected=${String(n === t.activeTabIndex)}
+                aria-controls=${`panel-${e.id}`}
+                id=${`tab-${e.id}`}
+                @click=${() => this.view?.setActiveTab(e.id)}
+              >
+                ${e.title}
+              </button>
+            `)}
+        </div>
+
+        <div
+          class="tab-panel"
+          role="tabpanel"
+          id=${`panel-${n.id}`}
+          aria-labelledby=${`tab-${n.id}`}
+        >
+          ${n.title || n.description ? _`
+                <header class="tab-header">
+                  <h1 class="tab-title">${n.title}</h1>
+                  ${n.description ? _`<p class="tab-description">${n.description}</p>` : v}
+                </header>
+              ` : v}
+
+          <div class="body">
+            <div class="collection">
+              ${S(n.children, (e, t) => `${n.id}-${t}`, (t) => M({
+			node: t,
+			view: this.view,
+			snapshot: e,
+			registry: this.registry,
+			primitiveText: this.primitiveText,
+			sectionClass: "section",
+			sectionCopyClass: "section-copy",
+			sectionTitleClass: "section-title",
+			sectionDescriptionClass: "section-description",
+			childrenClass: "section-children",
+			groupBaseClass: "group"
+		}))}
+            </div>
+          </div>
+        </div>
+
+        <footer class="footer" part="actions">
+          <div class="nav">
+            <button
+              type="button"
+              class="btn"
+              ?disabled=${!t.canGoPrev}
+              @click=${() => this.view?.prevTab()}
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              class="btn"
+              ?disabled=${!t.canGoNext}
+              @click=${() => this.view?.nextTab()}
+            >
+              Next
+            </button>
+          </div>
+          <button
+            type="button"
+            class="btn btn-submit"
+            ?disabled=${r === "validating" || r === "submitting"}
+            @click=${this.#c}
+          >
+            ${i}
+          </button>
+        </footer>
+      </section>
+    `;
+	}
+	#c = async () => {
+		if (this.view) try {
+			await this.view.submit();
+		} catch (e) {
+			if (!await j(this, this.view, s)) throw e;
+		}
+	};
+};
+l([b({ attribute: !1 })], P.prototype, "view", null), l([b({ attribute: !1 })], P.prototype, "registry", null), l([b({ attribute: !1 })], P.prototype, "primitiveText", null), l([b({ type: String })], P.prototype, "submitLabel", null), l([b({ type: String })], P.prototype, "validatingLabel", null), l([b({ type: String })], P.prototype, "submittingLabel", null), l([x()], P.prototype, "snapshot", null), P = l([y(A.tabs)], P);
+//#endregion
+//#region src/kit/step-indicator.ts
+var F = class extends h {
+	static styles = g`
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    .indicator {
+      display: grid;
+      gap: 0.5rem;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+    }
+
+    .step-label {
+      font-size: var(--mlf-font-size-sm, 0.84rem);
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--mlf-color-text-muted, #475569);
+    }
+
+    .step-fraction {
+      font-size: var(--mlf-font-size-sm, 0.84rem);
+      font-weight: 700;
+      color: var(--mlf-color-accent, #1e40af);
+    }
+
+    .track {
+      height: 4px;
+      border-radius: 999px;
+      background: var(--mlf-color-border, #e2e8f0);
+      overflow: hidden;
+    }
+
+    .fill {
+      height: 100%;
+      border-radius: 999px;
+      background: var(--mlf-color-accent, #1e40af);
+      transition: width 0.3s ease;
+    }
+
+    .dots {
+      display: flex;
+      gap: 0.4rem;
+      flex-wrap: wrap;
+    }
+
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--mlf-color-border, #e2e8f0);
+      transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
+    }
+
+    .dot.active {
+      background: var(--mlf-color-accent, #1e40af);
+      transform: scale(1.25);
+    }
+
+    .dot.done {
+      background: color-mix(in srgb, var(--mlf-color-accent, #1e40af) 50%, transparent);
+    }
+  `;
+	#e = 1;
+	get current() {
+		return this.#e;
+	}
+	set current(e) {
+		this.#e = e;
+	}
+	#t = 1;
+	get total() {
+		return this.#t;
+	}
+	set total(e) {
+		this.#t = e;
+	}
+	#n = "Step";
+	get label() {
+		return this.#n;
+	}
+	set label(e) {
+		this.#n = e;
+	}
+	render() {
+		let e = this.total > 0 ? Math.round(this.current / this.total * 100) : 0;
+		return _`
+      <div
+        class="indicator"
+        role="status"
+        aria-label=${`${this.label} ${this.current} of ${this.total}`}
+      >
+        <div class="header">
+          <span class="step-label">${this.label}</span>
+          <span class="step-fraction">${this.current} / ${this.total}</span>
+        </div>
+        <div class="track" aria-hidden="true">
+          <div class="fill" style="width: ${e}%"></div>
+        </div>
+        <div class="dots" aria-hidden="true">
+          ${Array.from({ length: this.total }, (e, t) => _`<div class=${t + 1 < this.current ? "dot done" : t + 1 === this.current ? "dot active" : "dot"}></div>`)}
+        </div>
+      </div>
+    `;
+	}
+};
+l([b({ type: Number })], F.prototype, "current", null), l([b({ type: Number })], F.prototype, "total", null), l([b({ type: String })], F.prototype, "label", null), F = l([y(A.stepIndicator)], F);
+//#endregion
+//#region src/kit/wizard-constants.ts
+var I = {
+	prev: "Previous",
+	next: "Next",
+	submit: "Submit",
+	validating: "Validating...",
+	submitting: "Submitting..."
+}, L = Object.freeze({
+	stepLabel: (e, t) => `Step ${e} of ${t}`,
+	prevLabel: "Previous",
+	nextLabel: "Next",
+	submitLabel: "Submit",
+	validatingLabel: "Validating...",
+	submittingLabel: "Submitting..."
+}), R = (e) => e ? Object.freeze({
+	...L,
+	...e
+}) : L, le = g`
+  :host {
+    display: block;
+    flex: 1 1 auto;
+    align-self: stretch;
+    inline-size: 100%;
+    block-size: 100%;
+    color: var(--mlf-shell-color, var(--mlf-color-text, #0f172a));
+    background: var(--mlf-shell-bg, var(--mlf-color-bg, #f5f7fa));
+    font-family: var(--mlf-font-family-body);
+    min-width: 0;
+    min-height: 0;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  .root {
+    display: grid;
+    grid-template-rows: 1fr;
+    gap: var(--mlf-shell-gap, 1rem);
+    inline-size: 100%;
+    block-size: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+  .panel {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    border-radius: var(--mlf-panel-radius, 12px);
+    border: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-panel-bg, var(--mlf-color-surface, #ffffff));
+    box-shadow:
+      0 2px 4px var(--mlf-shell-panel-shadow-soft, rgba(0, 0, 0, 0.04)),
+      0 8px 16px var(--mlf-shell-panel-shadow, rgba(0, 0, 0, 0.04));
+  }
+  .pane-header {
+    flex: 0 0 auto;
+    display: grid;
+    gap: 0.85rem;
+    padding: 1rem 1.5rem;
+    border-bottom: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(
+      --mlf-shell-header-bg,
+      color-mix(in srgb, var(--mlf-color-surface, #ffffff) 76%, transparent)
+    );
+    backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+    -webkit-backdrop-filter: blur(var(--mlf-shell-header-blur, 3px));
+  }
+  .step-title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--mlf-pane-title-color, var(--mlf-color-text, #0f172a));
+    line-height: 1.3;
+  }
+  .step-description {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    color: var(--mlf-color-text-muted, #475569);
+    line-height: 1.5;
+  }
+  .pane-body {
+    flex: 1 1 auto;
+    display: grid;
+    align-content: start;
+    gap: 1rem;
+    padding: 1rem 1rem 1.25rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .collection,
+  .section-children,
+  .section,
+  .group {
+    display: grid;
+    gap: var(--mlf-section-gap, 1rem);
+  }
+  .section-copy {
+    inline-size: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    min-height: 2rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  .section-label {
+    display: grid;
+    gap: 0.25rem;
+    min-inline-size: 0;
+  }
+  .section-title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    line-height: 1.35;
+    color: var(--mlf-section-title-color, var(--mlf-color-text, currentColor));
+  }
+  .section-description {
+    margin: 0;
+    font-size: var(--mlf-font-size-sm, 0.84rem);
+    color: var(--mlf-color-text-muted, #475569);
+    line-height: 1.5;
+  }
+  .section-toggle-icon {
+    flex: 0 0 auto;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    border-radius: var(--mlf-control-radius, var(--mlf-input-radius, 8px));
+    color: var(--mlf-section-toggle-color, var(--mlf-color-text-muted, currentColor));
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+  .section-copy:focus-visible .section-toggle-icon {
+    outline: var(--mlf-focus-ring-width, 2px) solid
+      var(--mlf-focus-ring-color, var(--mlf-color-accent, #1e40af));
+    outline-offset: 2px;
+  }
+  .group.columns-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .group.columns-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 1.5rem;
+    border-top: var(--mlf-border-width, 1px) solid
+      var(--mlf-shell-panel-border, var(--mlf-color-border, #e2e8f0));
+    background: var(--mlf-shell-action-bg, var(--mlf-color-surface-muted, #f5f7fa));
+  }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.5rem;
+    padding: 0.5rem 1.25rem;
+    border: var(--mlf-border-width, 1px) solid transparent;
+    border-radius: var(--mlf-input-radius, 12px);
+    font: inherit;
+    font-size: 0.95rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      opacity 0.2s ease;
+  }
+  .btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+  .btn-prev {
+    background: transparent;
+    border-color: var(--mlf-input-border, var(--mlf-color-border, #e2e8f0));
+    color: var(--mlf-color-text-muted, #475569);
+  }
+  .btn-next,
+  .btn-submit {
+    background: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    border-color: var(--mlf-submit-bg, var(--mlf-color-accent, #1e40af));
+    color: var(--mlf-submit-color, #ffffff);
+  }
+  .spacer {
+    flex: 1 1 auto;
+  }
+  @media (max-width: 900px) {
+    .group.columns-2,
+    .group.columns-3 {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+`, z = class extends h {
+	static styles = le;
+	#e;
+	get view() {
+		return this.#e;
+	}
+	set view(e) {
+		this.#e = e;
+	}
+	#t;
+	get registry() {
+		return this.#t;
+	}
+	set registry(e) {
+		this.#t = e;
+	}
+	#n = o;
+	get primitiveText() {
+		return this.#n;
+	}
+	set primitiveText(e) {
+		this.#n = e;
+	}
+	#r = I;
+	get labels() {
+		return this.#r;
+	}
+	set labels(e) {
+		this.#r = e;
+	}
+	#i = R();
+	get text() {
+		return this.#i;
+	}
+	set text(e) {
+		this.#i = e;
+	}
+	#a = null;
+	get snapshot() {
+		return this.#a;
+	}
+	set snapshot(e) {
+		this.#a = e;
+	}
+	#o = null;
+	willUpdate(e) {
+		e.has("view") && (this.#o?.(), this.#o = null, this.snapshot = this.view?.getSnapshot() ?? null, this.view && (this.#o = this.view.subscribe((e) => {
+			this.snapshot = e;
+		})));
+	}
+	disconnectedCallback() {
+		this.#o?.(), this.#o = null, super.disconnectedCallback();
+	}
+	render() {
+		let e = this.snapshot, t = e?.wizard;
+		if (!e || !t || e.layout.kind !== "wizard") return _``;
+		let n = e.layout.steps[t.stepIndex];
+		if (!n) return _``;
+		let r = e.form.status, i = r === "validating" || r === "submitting", a = t.isLastStep ? r === "validating" ? this.labels.validating : r === "submitting" ? this.labels.submitting : this.labels.submit : this.labels.next;
+		return _`
+      <div class="root">
+        <section class="panel" part="wizard-panel">
+          <header class="pane-header">
+            <mlf-kit-step-indicator
+              .current=${t.stepIndex + 1}
+              .total=${t.stepCount}
+              .label=${this.text.stepLabel(t.stepIndex + 1, t.stepCount).split(" ")[0] ?? "Step"}
+            ></mlf-kit-step-indicator>
+            <h1 class="step-title">${n.title}</h1>
+            ${n.description ? _`<p class="step-description">${n.description}</p>` : v}
+          </header>
+
+          <div class="pane-body">
+            <div class="collection">
+              ${S(n.children, (e, t) => `${n.id}-${t}`, (t) => M({
+			node: t,
+			view: this.view,
+			snapshot: e,
+			registry: this.registry,
+			primitiveText: this.primitiveText,
+			sectionClass: "section",
+			sectionCopyClass: "section-copy",
+			sectionTitleClass: "section-title",
+			sectionDescriptionClass: "section-description",
+			childrenClass: "section-children",
+			groupBaseClass: "group"
+		}))}
+            </div>
+          </div>
+
+          <div class="actions" part="actions">
+            <button
+              type="button"
+              class="btn btn-prev"
+              ?disabled=${!t.canPrev || i}
+              @click=${this.#s}
+            >
+              ${this.labels.prev}
+            </button>
+            <span class="spacer"></span>
+            <button
+              type="button"
+              class=${t.isLastStep ? "btn btn-submit" : "btn btn-next"}
+              ?disabled=${i}
+              @click=${t.isLastStep ? this.#l : this.#c}
+            >
+              ${a}
+            </button>
+          </div>
+        </section>
+      </div>
+    `;
+	}
+	#s = () => {
+		this.view?.prevStep();
+	};
+	#c = async () => {
+		await this.view?.nextStep() === !1 && this.view && await j(this, this.view, s);
+	};
+	#l = async () => {
+		if (this.view) {
+			if (!await this.view.nextStep()) {
+				await j(this, this.view, s);
+				return;
+			}
+			try {
+				await this.view.submit();
+			} catch (e) {
+				if (!await j(this, this.view, s)) throw e;
+			}
+		}
+	};
+};
+l([b({ attribute: !1 })], z.prototype, "view", null), l([b({ attribute: !1 })], z.prototype, "registry", null), l([b({ attribute: !1 })], z.prototype, "primitiveText", null), l([b({ attribute: !1 })], z.prototype, "labels", null), l([b({ attribute: !1 })], z.prototype, "text", null), l([x()], z.prototype, "snapshot", null), z = l([y(A.wizard)], z);
+//#endregion
+//#region src/kit/layout-helpers.ts
+var ue = (e, t) => ({
+	fieldIds: new Set(e.map((e) => e.id)),
+	reportIds: new Set(t.map((e) => e.id))
+}), de = () => ({
+	fieldStepIds: /* @__PURE__ */ new Map(),
+	reportStepIds: /* @__PURE__ */ new Map(),
+	fieldTabIds: /* @__PURE__ */ new Map(),
+	reportTabIds: /* @__PURE__ */ new Map(),
+	fieldSectionIds: /* @__PURE__ */ new Map(),
+	reportSectionIds: /* @__PURE__ */ new Map(),
+	fieldIdsInLayout: /* @__PURE__ */ new Set(),
+	reportIdsInLayout: /* @__PURE__ */ new Set()
+}), B = (e, t, r) => {
+	let i = n(t ?? e) || e, a = r.get(i) ?? 0;
+	return r.set(i, a + 1), a === 0 ? i : `${i}-${a + 1}`;
+}, fe = (e, t) => {
+	if (!t.fieldIds.has(e)) throw TypeError(k.unknownFieldReference(e));
+}, pe = (e, t) => {
+	if (!t.reportIds.has(e)) throw TypeError(k.unknownReportReference(e));
+}, me = (e, t, n, r, i) => {
+	if (t.fieldIdsInLayout.has(e)) throw TypeError(k.fieldDuplicateInLayout(e));
+	t.fieldIdsInLayout.add(e), n && t.fieldStepIds.set(e, n), r && t.fieldTabIds.set(e, r), i && t.fieldSectionIds.set(e, i);
+}, he = (e, t, n, r, i) => {
+	if (t.reportIdsInLayout.has(e)) throw TypeError(k.reportDuplicateInLayout(e));
+	t.reportIdsInLayout.add(e), n && t.reportStepIds.set(e, n), r && t.reportTabIds.set(e, r), i && t.reportSectionIds.set(e, i);
+}, ge = (e, t) => [...e.map((e) => ({
+	kind: "field",
+	field: e.id
+})), ...t.map((e) => ({
+	kind: "report",
+	report: e.id
+}))], V = (e, t) => {
+	for (let n of e) if (!t.fieldIdsInLayout.has(n.id)) throw TypeError(k.fieldMissingInLayout(n.id));
+}, H = (e, t, n, r, i, a, o) => e.map((e) => {
+	switch (e.kind) {
+		case "section": {
+			let o = B("section", e.id ?? e.title, r);
+			return {
+				kind: "section",
+				id: o,
+				title: e.title,
+				description: e.description,
+				defaultOpen: e.defaultOpen ?? !0,
+				children: H(e.children, t, n, r, i, a, o)
+			};
+		}
+		case "group": return {
+			kind: "group",
+			id: B("group", e.id, r),
+			columns: e.columns,
+			children: H(e.children, t, n, r, i, a, o)
+		};
+		case "field": return fe(e.field, t), me(e.field, n, i, a, o), {
+			kind: "field",
+			field: e.field
+		};
+		case "report": return pe(e.report, t), he(e.report, n, i, a, o), {
+			kind: "report",
+			report: e.report
+		};
+	}
+}), _e = (e, t, n) => {
+	let r = ue(t, n), i = de(), a = /* @__PURE__ */ new Map();
+	if (!e || e.kind === void 0 || e.kind === "stacked" || e.kind === "split") {
+		let o = H(e?.children ?? ge(t, n), r, i, a, null, null, null);
+		return V(t, i), {
+			layout: {
+				kind: e?.kind ?? "stacked",
+				children: o
+			},
+			maps: i
+		};
+	}
+	if (e.kind === "tabs") {
+		if (e.tabs.length === 0) throw TypeError(k.tabsRequiresTabs);
+		let n = /* @__PURE__ */ new Map(), o = e.tabs.map((e, t) => {
+			let o = B("tab", e.id ?? e.title ?? `tab-${t + 1}`, n), s = H(e.children, r, i, a, null, o, null);
+			if (s.length === 0) throw TypeError(k.tabEmpty(o));
+			return {
+				id: o,
+				title: e.title,
+				description: e.description,
+				children: s
+			};
+		});
+		return V(t, i), {
+			layout: {
+				kind: "tabs",
+				tabs: o
+			},
+			maps: i
+		};
+	}
+	let o = e;
+	if (o.steps.length === 0) throw TypeError(k.wizardRequiresSteps);
+	let s = /* @__PURE__ */ new Map(), c = o.steps.map((e, t) => {
+		let n = B("step", e.id ?? e.title ?? `step-${t + 1}`, s), o = H(e.children, r, i, a, n, null, null);
+		if (o.length === 0) throw TypeError(k.wizardStepEmpty(n));
+		return {
+			id: n,
+			title: e.title,
+			description: e.description,
+			children: o
+		};
+	});
+	return V(t, i), {
+		layout: {
+			kind: "wizard",
+			steps: c
+		},
+		maps: i
+	};
+}, U = (e, t, n) => {
+	if (n.length === 0) return null;
+	let r = Math.min(Math.max(t, 0), n.length - 1);
+	return {
+		kind: e,
+		index: r,
+		count: n.length,
+		currentId: n[r] ?? n[0],
+		canGoNext: r < n.length - 1,
+		canGoPrev: r > 0
+	};
+}, W = ({ layout: e, stepIndex: t, formState: n }) => {
+	let r = U("wizard-step", t, (e.kind === "wizard" ? e.steps : []).map((e) => e.id));
+	return r ? {
+		stepIndex: r.index,
+		stepCount: r.count,
+		currentStepId: r.currentId,
+		canNext: n.status !== "validating" && n.status !== "submitting",
+		canPrev: r.canGoPrev,
+		isLastStep: r.index === r.count - 1
+	} : null;
+}, G = ({ layout: e, activeTabIndex: t }) => {
+	let n = U("tab", t, (e.kind === "tabs" ? e.tabs : []).map((e) => e.id));
+	return n ? {
+		activeTabIndex: n.index,
+		tabCount: n.count,
+		currentTabId: n.currentId,
+		canGoNext: n.canGoNext,
+		canGoPrev: n.canGoPrev
+	} : null;
+}, K = (e, t = []) => {
+	for (let n of e) n.kind === "section" ? (t.push({
+		id: n.id,
+		defaultOpen: n.defaultOpen
+	}), K(n.children, t)) : n.kind === "group" && K(n.children, t);
+	return t;
+}, q = ({ layout: e, openSectionIds: t }) => {
+	let n = e.kind === "wizard" ? e.steps.flatMap((e) => K(e.children)) : e.kind === "tabs" ? e.tabs.flatMap((e) => K(e.children)) : K(e.children);
+	return n.length === 0 ? null : {
+		openSectionIds: n.map((e) => e.id).filter((e) => t.has(e)),
+		sectionCount: n.length
+	};
+}, ve = (e) => ({
+	form: e.formState,
+	wizard: W(e),
+	tabs: G(e),
+	disclosure: q(e)
+}), J = (e, t, n, r, i, a, o) => e.kind === "wizard" ? i === (e.steps[t]?.id ?? null) && (!o || r.has(o)) : e.kind === "tabs" ? a === (e.tabs[n]?.id ?? null) && (!o || r.has(o)) : !o || r.has(o), ye = (e) => ({
+	component: "unsupported-field",
+	props: { label: e.config.label ?? e.id }
+}), be = (e, t, n, r, i, a) => {
+	let o = n.maps.fieldStepIds.get(e.id) ?? null, s = n.maps.fieldTabIds.get(e.id) ?? null, c = n.maps.fieldSectionIds.get(e.id) ?? null, l = t.getField(e.kind);
+	return {
+		id: e.id,
+		kind: e.kind,
+		config: e.config,
+		controller: e,
+		state: e.state,
+		descriptor: l?.describe(e.config, {
+			fieldId: e.id,
+			state: e.state,
+			value: e.state.value
+		}) ?? ye(e),
+		stepId: o,
+		tabId: s,
+		sectionId: c,
+		visibleInLayout: J(n.layout, r, i, a, o, s, c)
+	};
+}, xe = (e, t, n, r, i, a, o) => {
+	let s = r.maps.reportStepIds.get(e.id) ?? null, c = r.maps.reportTabIds.get(e.id) ?? null, l = r.maps.reportSectionIds.get(e.id) ?? null, u = n.getReport(e.kind);
+	return {
+		id: e.id,
+		kind: e.kind,
+		config: e.config,
+		controller: e,
+		state: e.state,
+		descriptor: u ? u.describe(e.config, {
+			reportId: e.id,
+			state: e.state,
+			payload: e.state.payload,
+			result: t.state.lastResult
+		}) : null,
+		stepId: s,
+		tabId: c,
+		sectionId: l,
+		visibleInLayout: J(r.layout, i, a, o, s, c, l)
+	};
+}, Se = ({ form: e, descriptorRegistry: t, resolvedLayout: n, stepIndex: r, activeTabIndex: i, openSectionIds: a }) => ({
+	form: e.state,
+	layout: n.layout,
+	fields: e.fields.map((e) => be(e, t, n, r, i, a)),
+	reports: e.reports.map((o) => xe(o, e, t, n, r, i, a)),
+	wizard: W({
+		layout: n.layout,
+		stepIndex: r,
+		activeTabIndex: i,
+		openSectionIds: a,
+		formState: e.state
+	}),
+	tabs: G({
+		layout: n.layout,
+		stepIndex: r,
+		activeTabIndex: i,
+		openSectionIds: a,
+		formState: e.state
+	}),
+	disclosure: q({
+		layout: n.layout,
+		stepIndex: r,
+		activeTabIndex: i,
+		openSectionIds: a,
+		formState: e.state
+	})
+}), Ce = (e, t, n, r, i) => ve({
+	formState: e.state,
+	layout: t,
+	stepIndex: n,
+	activeTabIndex: r,
+	openSectionIds: i
+}), we = ({ form: e, descriptorRegistry: t, resolvedLayout: n, getStepIndex: r, getActiveTabIndex: i, getOpenSectionIds: a }) => {
+	let o = e.state, s = -1, c = -1, l = "", u = null;
+	return () => {
+		let d = r(), f = i(), p = a(), m = e.state, h = Array.from(p).sort().join("|");
+		return u && o === m && s === d && c === f && l === h ? u : (o = m, s = d, c = f, l = h, u = Se({
+			form: e,
+			descriptorRegistry: t,
+			resolvedLayout: n,
+			stepIndex: d,
+			activeTabIndex: f,
+			openSectionIds: p
+		}), u);
+	};
+}, Y = (e, t) => e.flatMap((e) => e.kind === "section" ? t.has(e.id) ? [e] : [] : [e]), Te = async (e, t, n) => {
+	if (t.layout.kind !== "wizard") return !1;
+	let r = t.layout.steps[n]?.id;
+	if (!r) return !1;
+	let i = e.fields.filter((e) => t.maps.fieldStepIds.get(e.id) === r && e.state.visible);
+	return (await Promise.all(i.map((e) => e.validate()))).every((e) => e.errors.length === 0);
+}, Ee = (e, t, n, r) => {
+	switch (e.layout.kind) {
+		case "stacked":
+		case "split": return Y(e.layout.children, r);
+		case "wizard": return Y(e.layout.steps[t]?.children ?? [], r);
+		case "tabs": return Y(e.layout.tabs[n]?.children ?? [], r);
+	}
+}, X = (e, t) => {
+	if (!e.some((e) => e.id === t)) throw TypeError(k.unknownDisclosureSection(t));
+}, Z = (t) => {
+	let n = !t.registry || !t.descriptorRegistry || !t.behaviors ? r() : null, i = t.registry ? ee(t.registry) : n.registry, a = t.descriptorRegistry?.clone() ?? n.descriptorRegistry, o = e({
+		schema: t.schema,
+		registry: i,
+		behaviors: t.behaviors ?? n?.behaviors,
+		transport: t.transport,
+		initialValues: t.initialValues,
+		validators: t.validators,
+		hooks: t.hooks,
+		hookFailurePolicy: t.hookFailurePolicy,
+		inactiveFieldPolicy: t.inactiveFieldPolicy,
+		listenerErrorPolicy: t.listenerErrorPolicy,
+		onListenerError: t.onListenerError
+	}), s = _e(t.layout, o.fields, o.reports), c = 0, l = 0, u = s.layout.kind === "wizard" ? s.layout.steps.flatMap((e) => K(e.children)) : s.layout.kind === "tabs" ? s.layout.tabs.flatMap((e) => K(e.children)) : K(s.layout.children), d = new Set(u.filter((e) => e.defaultOpen).map((e) => e.id)), f = /* @__PURE__ */ new Set(), p = s.layout.kind === "wizard" ? s.layout.steps : [], m = s.layout.kind === "tabs" ? s.layout.tabs : [], h = O(s.layout), g = /* @__PURE__ */ new Map();
+	for (let e of D(s.layout)) "id" in e && g.set(e.id, e);
+	let _ = () => Ce(o, s.layout, c, l, d), v = we({
+		form: o,
+		descriptorRegistry: a,
+		resolvedLayout: s,
+		getStepIndex: () => c,
+		getActiveTabIndex: () => l,
+		getOpenSectionIds: () => d
+	}), y = () => {
+		let e = v();
+		for (let t of f) t(e);
+	};
+	return o.subscribe(() => {
+		y();
+	}), Object.freeze({
+		form: o,
+		engineRegistry: i,
+		descriptorRegistry: a,
+		get state() {
+			return _();
+		},
+		getSnapshot: v,
+		getNodeById(e) {
+			return g.get(e);
+		},
+		getField(e) {
+			return v().fields.find((t) => t.id === e);
+		},
+		getReport(e) {
+			return v().reports.find((t) => t.id === e);
+		},
+		getVisibleFields() {
+			return v().fields.filter((e) => e.visibleInLayout && e.state.visible);
+		},
+		getVisibleReports() {
+			return v().reports.filter((e) => e.visibleInLayout);
+		},
+		getActiveLayoutNodes() {
+			return Ee(s, c, l, d);
+		},
+		getLayoutReferences() {
+			return h;
+		},
+		validate() {
+			return o.validate();
+		},
+		submit(e) {
+			return o.submit(e);
+		},
+		reset() {
+			o.reset();
+		},
+		subscribe(e) {
+			return f.add(e), () => {
+				f.delete(e);
+			};
+		},
+		async nextStep() {
+			return s.layout.kind !== "wizard" || !await Te(o, s, c) ? !1 : (c < p.length - 1 && (c += 1, y()), !0);
+		},
+		prevStep() {
+			s.layout.kind === "wizard" && c > 0 && (--c, y());
+		},
+		async goToStep(e) {
+			if (s.layout.kind !== "wizard") throw TypeError(k.nonWizardGoToStep);
+			let t = p.findIndex((t) => t.id === e);
+			if (t < 0) throw TypeError(k.unknownWizardStep(e));
+			if (t <= c) return c = t, y(), !0;
+			for (; c < t;) if (!await this.nextStep()) return !1;
+			return !0;
+		},
+		setActiveTab(e) {
+			if (s.layout.kind !== "tabs") throw TypeError(k.nonTabsSetActiveTab);
+			let t = m.findIndex((t) => t.id === e);
+			if (t < 0) throw TypeError(k.unknownTab(e));
+			t !== l && (l = t, y());
+		},
+		nextTab() {
+			return s.layout.kind !== "tabs" || l >= m.length - 1 ? !1 : (l += 1, y(), !0);
+		},
+		prevTab() {
+			return s.layout.kind !== "tabs" || l <= 0 ? !1 : (--l, y(), !0);
+		},
+		toggleSection(e) {
+			X(u, e), d.has(e) ? d.delete(e) : d.add(e), y();
+		},
+		openSection(e) {
+			X(u, e), d.has(e) || (d.add(e), y());
+		},
+		closeSection(e) {
+			X(u, e), d.delete(e) && y();
+		},
+		openAllSections() {
+			d = new Set(u.map((e) => e.id)), y();
+		},
+		closeAllSections() {
+			d = /* @__PURE__ */ new Set(), y();
+		}
+	});
+}, Q = Symbol("mlform.kit.mounted"), De = (e) => {
+	if (!e.mode || !e.theme || !e.recipe) throw TypeError(k.invalidDesignSystemSnapshot);
+}, Oe = (e) => {
+	let t = e.layout;
+	return !!(t && "children" in t && t.children && t.children.length > 0);
+}, ke = (e) => Z({
+	schema: e.schema,
+	transport: e.transport,
+	registry: e.registry,
+	descriptorRegistry: e.descriptorRegistry,
+	behaviors: e.behaviors,
+	initialValues: e.initialValues,
+	validators: e.validators,
+	hooks: e.hooks,
+	hookFailurePolicy: e.hookFailurePolicy,
+	inactiveFieldPolicy: e.inactiveFieldPolicy,
+	listenerErrorPolicy: e.listenerErrorPolicy,
+	onListenerError: e.onListenerError,
+	layout: e.layout
+}), Ae = (e, t) => {
+	let n = e;
+	n[Q]?.unmount();
+	let r = te(t.primitiveRegistry), i = ne(t.designSystemRegistry), a = re(t.labels), o = ie(t.designSystem), s = !t.layout || (t.layout.kind === void 0 || t.layout.kind === "stacked" || t.layout.kind === "split") && !Oe(t), c = ke(t), l = () => {}, u = s ? (() => {
+		let n = d(e, c.form, {
+			registry: r,
+			descriptorRegistry: c.descriptorRegistry,
+			layout: t.layout?.kind === "split" ? "split" : "stacked",
+			containerStrategy: t.containerStrategy,
+			formLabel: a.form,
+			reportsLabel: a.reports,
+			submitLabel: a.submit,
+			validatingLabel: a.validating,
+			submittingLabel: a.submitting,
+			reportPane: t.reportPane,
+			text: t.primitiveText,
+			reportTransport: t.reportTransport
+		});
+		return l = () => n.unmount(), n.host;
+	})() : (() => {
+		let n = je(e, t, r, a, c);
+		return l = () => n.remove(), n;
+	})(), f = m(u, {
+		config: o,
+		registry: i,
+		onChange: t.onDesignSystemChange
+	}), p = !1, h = Object.freeze({
+		form: c.form,
+		host: u,
+		engineRegistry: c.engineRegistry,
+		descriptorRegistry: c.descriptorRegistry,
+		primitiveRegistry: r,
+		designSystemRegistry: i,
+		designSystem: f,
+		updateDesignSystem(e) {
+			f.update(e);
+		},
+		replaceDesignSystem(e) {
+			De(e), f.replace(e);
+		},
+		resetDesignSystem() {
+			f.reset();
+		},
+		unmount() {
+			p || (p = !0, n[Q] === h && delete n[Q], c.form.abortSubmit("unmount"), f.disconnect(), l());
+		}
+	});
+	return n[Q] = h, h;
+}, $ = (e) => {
+	e.unmount();
+}, je = (e, t, n, r, a) => {
+	let o = a.getSnapshot(), s = o.layout.kind === "wizard" ? A.wizard : o.layout.kind === "tabs" ? A.tabs : A.disclosure, c = document.createElement(s);
+	if (c.view = a, c.registry = n, c.primitiveText = i(t.primitiveText), o.layout.kind === "wizard") {
+		let e = {
+			...I,
+			...t.labels
+		};
+		c.labels = e, c.text = R({
+			prevLabel: e.prev,
+			nextLabel: e.next,
+			submitLabel: e.submit,
+			validatingLabel: e.validating,
+			submittingLabel: e.submitting
+		});
+	} else c.submitLabel = r.submit, c.validatingLabel = r.validating, c.submittingLabel = r.submitting;
+	return e.replaceChildren(c), c;
+}, Me = (e, t) => e ? typeof e == "function" ? e(t) ?? {} : e : {}, Ne = (e) => {
+	let t = e.validate, n = {
+		kind: e.kind,
+		schema: e.schema,
+		getDefaultValue: e.value?.default,
+		normalizeValue: e.value?.normalize,
+		cloneValue: e.value?.clone,
+		isEqual: e.value?.isEqual,
+		serializeValue: e.value?.serialize,
+		validate: t ? (e, n, r) => t({
+			...r,
+			config: n,
+			value: e
+		}) : void 0
+	}, r = {
+		kind: e.kind,
+		describe(t, n) {
+			let r = Me(e.render.hints, {
+				config: t,
+				fieldId: t.id,
+				state: n.state,
+				value: n.value
+			});
+			return {
+				component: "declarative-field",
+				props: {
+					id: t.id,
+					kind: t.kind,
+					label: t.label,
+					description: t.description ?? "",
+					showDescriptionInline: !!t.showDescriptionInline,
+					required: !!t.required,
+					disabled: !!t.disabled,
+					widget: e.render.widget,
+					value: n.value,
+					state: n.state.status,
+					errors: n.state.errors,
+					...r,
+					...t.ui
+				},
+				meta: {
+					declarative: !0,
+					widget: e.render.widget
+				}
+			};
+		}
+	}, i = r.describe.bind(r);
+	return Object.assign(n, { describe: i }), {
+		kind: e.kind,
+		schema: e.schema,
+		getDefaultValue: e.value?.default,
+		normalizeValue: e.value?.normalize,
+		cloneValue: e.value?.clone,
+		isEqual: e.value?.isEqual,
+		serializeValue: e.value?.serialize,
+		validate: n.validate,
+		describe: i,
+		definition: n,
+		presenter: r
+	};
+}, Pe = (e) => {
+	let t = {
+		kind: e.kind,
+		schema: e.schema,
+		payloadSchema: e.payloadSchema,
+		payloadValidationPolicy: e.payloadValidationPolicy,
+		partialUpdatePolicy: e.partialUpdatePolicy,
+		clonePayload: e.clonePayload,
+		fetch: e.fetch,
+		resolvePayload: (t, n) => e.resolve({
+			config: n.report,
+			report: n.report,
+			result: n.result
+		})
+	}, n = {
+		kind: e.kind,
+		describe(t, n) {
+			if (n.payload === void 0 && n.state.error === null && n.result === null) return null;
+			let r = {
+				config: t,
+				report: t,
+				reportId: t.id,
+				state: n.state,
+				payload: n.payload,
+				result: n.result
+			};
+			return {
+				component: "declarative-report",
+				props: {
+					id: t.id,
+					kind: t.kind,
+					label: t.label ?? t.id,
+					description: t.description ?? "",
+					payload: n.payload,
+					error: n.state.error,
+					state: n.state.status,
+					summary: e.render.summary?.(r) ?? null,
+					content: n.payload === void 0 ? [] : a(e.render.content(r)),
+					...t.ui
+				},
+				meta: { declarative: !0 }
+			};
+		}
+	}, r = n.describe.bind(n);
+	return Object.assign(t, { describe: r }), {
+		kind: e.kind,
+		schema: e.schema,
+		payloadSchema: e.payloadSchema,
+		payloadValidationPolicy: e.payloadValidationPolicy,
+		partialUpdatePolicy: e.partialUpdatePolicy,
+		clonePayload: t.clonePayload,
+		fetch: t.fetch,
+		resolvePayload: t.resolvePayload,
+		describe: r,
+		definition: t,
+		presenter: n
+	};
+}, Fe = (e, t, n) => {
+	e.registerField(n.definition), t.registerField(n.presenter);
+}, Ie = (e, t, n) => {
+	e.registerReport(n.definition), t.registerReport(n.presenter);
+};
+//#endregion
+export { O as collectLayoutReferences, Z as createFormView, w as defaultKitDesignSystem, C as defaultKitLabels, Ne as defineFieldKind, Pe as defineReportKind, D as flattenLayoutNodes, Ae as mountForm, Fe as registerDefinedFieldKind, Ie as registerDefinedReportKind, $ as unmountForm, E as walkLayoutNodes };