@theredhead/lucid-forms 0.1.0

package/fesm2022/theredhead-lucid-forms.mjs

@@ -0,0 +1,2789 @@
+import * as i0 from '@angular/core';
+import { computed, signal, InjectionToken, makeEnvironmentProviders, inject, Injectable, input, viewChild, ViewContainerRef, effect, untracked, ChangeDetectionStrategy, Component, output, forwardRef } from '@angular/core';
+import { UppercaseTextAdapter, CronTextAdapter, UuidTextAdapter, SlugTextAdapter, ColorTextAdapter, TimeTextAdapter, DateTextAdapter, PercentageTextAdapter, HexadecimalTextAdapter, DecimalTextAdapter, FloatTextAdapter, IntegerTextAdapter, MoneyTextAdapter, CreditCardTextAdapter, PhoneTextAdapter, IPAddressTextAdapter, UrlTextAdapter, EmailTextAdapter, UIMediaPlayer, UIImage, UIRichTextView, UIFileUpload, UIRichTextEditor, UISlider, UIColorPicker, DateInputAdapter, UIInput, UIAutocomplete, UIRadioGroup, UIToggle, UICheckbox, UIDropdownList, UIIcons, UIIcon, ModalRef, ModalService } from '@theredhead/lucid-kit';
+import * as i1 from '@theredhead/lucid-foundation';
+import { LoggerFactory, UISurface } from '@theredhead/lucid-foundation';
+import { JsonPipe } from '@angular/common';
+
+// ── Condition types ───────────────────────────────────────────────────
+/**
+ * Check whether a `Condition` is a `ConditionGroup` (has nested
+ * `conditions` array) rather than a single `FieldCondition`.
+ */
+function isConditionGroup(c) {
+    return "conditions" in c && Array.isArray(c.conditions);
+}
+
+// ── Form schema types ────────────────────────────────────────────────
+// ── Flair helpers ───────────────────────────────────────────────────
+/**
+ * Known flair component keys. Flair items are purely presentational
+ * elements that do not collect user input.
+ */
+const FLAIR_COMPONENTS = [
+    "flair:richtext",
+    "flair:image",
+    "flair:media",
+];
+/**
+ * Returns `true` if the given component key is a flair (non-data)
+ * component.
+ */
+function isFlairComponent(component) {
+    return FLAIR_COMPONENTS.includes(component);
+}
+
+// ── Validation engine ────────────────────────────────────────────────
+/** Registry of custom validators keyed by `validatorId`. */
+const customValidators = new Map();
+/**
+ * Register a custom validator that can be referenced by
+ * `{ type: "custom", params: { validatorId: "myId" } }` in a
+ * form schema.
+ */
+function registerCustomValidator(id, fn) {
+    customValidators.set(id, fn);
+}
+// ── Built-in validator implementations ────────────────────────────────
+function isEmpty(v) {
+    if (v === null || v === undefined)
+        return true;
+    if (typeof v === "boolean")
+        return !v;
+    if (typeof v === "string")
+        return v.trim().length === 0;
+    if (Array.isArray(v))
+        return v.length === 0;
+    return false;
+}
+function validateRequired(value, _params, message) {
+    return isEmpty(value)
+        ? { type: "required", message: message ?? "This field is required." }
+        : null;
+}
+function validateMinLength(value, params, message) {
+    const min = params["min"];
+    if (typeof value !== "string")
+        return null;
+    return value.length < min
+        ? {
+            type: "minLength",
+            message: message ?? `Must be at least ${min} characters.`,
+        }
+        : null;
+}
+function validateMaxLength(value, params, message) {
+    const max = params["max"];
+    if (typeof value !== "string")
+        return null;
+    return value.length > max
+        ? {
+            type: "maxLength",
+            message: message ?? `Must be at most ${max} characters.`,
+        }
+        : null;
+}
+function validateMin(value, params, message) {
+    const min = params["min"];
+    if (typeof value !== "number")
+        return null;
+    return value < min
+        ? { type: "min", message: message ?? `Must be at least ${min}.` }
+        : null;
+}
+function validateMax(value, params, message) {
+    const max = params["max"];
+    if (typeof value !== "number")
+        return null;
+    return value > max
+        ? { type: "max", message: message ?? `Must be at most ${max}.` }
+        : null;
+}
+function validatePattern(value, params, message) {
+    const pattern = params["pattern"];
+    if (typeof value !== "string" || value.length === 0)
+        return null;
+    const re = new RegExp(pattern);
+    return !re.test(value)
+        ? {
+            type: "pattern",
+            message: message ?? `Does not match the required pattern.`,
+        }
+        : null;
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function validateEmail(value, _params, message) {
+    if (typeof value !== "string" || value.length === 0)
+        return null;
+    return !EMAIL_RE.test(value)
+        ? {
+            type: "email",
+            message: message ?? "Enter a valid e-mail address.",
+        }
+        : null;
+}
+function validateCustom(value, params, message) {
+    const id = params["validatorId"];
+    const fn = customValidators.get(id);
+    if (!fn) {
+        return { type: "custom", message: `Unknown validator: "${id}".` };
+    }
+    const result = fn(value, params);
+    if (result) {
+        return { ...result, message: message ?? result.message };
+    }
+    return null;
+}
+// ── Public API ────────────────────────────────────────────────────────
+/**
+ * Run a single validation rule against a value.
+ */
+function runValidator(rule, value) {
+    const params = rule.params ?? {};
+    switch (rule.type) {
+        case "required":
+            return validateRequired(value, params, rule.message);
+        case "minLength":
+            return validateMinLength(value, params, rule.message);
+        case "maxLength":
+            return validateMaxLength(value, params, rule.message);
+        case "min":
+            return validateMin(value, params, rule.message);
+        case "max":
+            return validateMax(value, params, rule.message);
+        case "pattern":
+            return validatePattern(value, params, rule.message);
+        case "email":
+            return validateEmail(value, params, rule.message);
+        case "custom":
+            return validateCustom(value, params, rule.message);
+        default:
+            return null;
+    }
+}
+/**
+ * Validate a value against an array of rules and return a
+ * {@link ValidationResult}.
+ */
+function validate(rules, value) {
+    const errors = [];
+    for (const rule of rules) {
+        const error = runValidator(rule, value);
+        if (error) {
+            errors.push(error);
+        }
+    }
+    return { valid: errors.length === 0, errors };
+}
+
+// ── Condition evaluator ───────────────────────────────────────────────
+/**
+ * Evaluate a single {@link FieldCondition} against the current
+ * form values.
+ */
+function evaluateFieldCondition(condition, values) {
+    const actual = values[condition.field];
+    const target = condition.value;
+    switch (condition.operator) {
+        case "equals":
+            return actual === target;
+        case "notEquals":
+            return actual !== target;
+        case "contains":
+            if (typeof actual === "string" && typeof target === "string") {
+                return actual.includes(target);
+            }
+            if (Array.isArray(actual)) {
+                return actual.includes(target);
+            }
+            return false;
+        case "notContains":
+            if (typeof actual === "string" && typeof target === "string") {
+                return !actual.includes(target);
+            }
+            if (Array.isArray(actual)) {
+                return !actual.includes(target);
+            }
+            return true;
+        case "empty":
+            return (actual === null ||
+                actual === undefined ||
+                actual === "" ||
+                (Array.isArray(actual) && actual.length === 0));
+        case "notEmpty":
+            return (actual !== null &&
+                actual !== undefined &&
+                actual !== "" &&
+                !(Array.isArray(actual) && actual.length === 0));
+        case "greaterThan":
+            return typeof actual === "number" && typeof target === "number"
+                ? actual > target
+                : false;
+        case "lessThan":
+            return typeof actual === "number" && typeof target === "number"
+                ? actual < target
+                : false;
+        case "greaterThanOrEqual":
+            return typeof actual === "number" && typeof target === "number"
+                ? actual >= target
+                : false;
+        case "lessThanOrEqual":
+            return typeof actual === "number" && typeof target === "number"
+                ? actual <= target
+                : false;
+        case "in":
+            return Array.isArray(target) ? target.includes(actual) : false;
+        case "notIn":
+            return Array.isArray(target) ? !target.includes(actual) : true;
+        default:
+            return true;
+    }
+}
+/**
+ * Evaluate a {@link Condition} (single or group) against the
+ * current form values.
+ *
+ * @returns `true` when the condition is satisfied.
+ */
+function evaluateCondition(condition, values) {
+    if (isConditionGroup(condition)) {
+        const mode = condition.mode ?? "every";
+        return mode === "every"
+            ? condition.conditions.every((c) => evaluateFieldCondition(c, values))
+            : condition.conditions.some((c) => evaluateFieldCondition(c, values));
+    }
+    return evaluateFieldCondition(condition, values);
+}
+
+// ── Form engine ──────────────────────────────────────────────────────
+// ── Form engine ──────────────────────────────────────────────────────
+/**
+ * Signal-based form engine. Takes a {@link FormSchema}, creates
+ * reactive state for every field and group, evaluates conditions,
+ * runs validation, and produces a JSON output object.
+ *
+ * The engine is framework-agnostic (no Angular DI required) — it
+ * operates purely on signals and plain objects.
+ *
+ * @example
+ * ```ts
+ * const engine = new FormEngine(schema);
+ * engine.setValue("email", "test@example.com");
+ * console.log(engine.values());   // { email: "test@example.com", … }
+ * console.log(engine.valid());    // true / false
+ * ```
+ */
+class FormEngine {
+    schema;
+    /** All field states indexed by field ID. */
+    fieldMap = new Map();
+    /** Ordered group states. */
+    groups;
+    /** Live snapshot of all field values (including hidden fields). */
+    values;
+    /** Whether every visible field passes validation. */
+    valid;
+    /** Whether any field has been interacted with. */
+    touched;
+    /** Whether any field value differs from its default. */
+    dirty;
+    constructor(schema) {
+        this.schema = schema;
+        // 1. Build field & group states (populates fieldMap)
+        this.groups = schema.groups.map((g) => this.buildGroupState(g));
+        // 2. Reactive values — computed from individual field signals
+        this.values = computed(() => this.readFieldValues(), ...(ngDevMode ? [{ debugName: "values" }] : []));
+        // 3. Top-level computed signals
+        this.valid = computed(() => this.groups.filter((g) => g.visible()).every((g) => g.valid()), ...(ngDevMode ? [{ debugName: "valid" }] : []));
+        this.touched = computed(() => [...this.fieldMap.values()].some((f) => f.touched()), ...(ngDevMode ? [{ debugName: "touched" }] : []));
+        this.dirty = computed(() => [...this.fieldMap.values()].some((f) => f.dirty()), ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    }
+    // ── Public API ────────────────────────────────────────────────────
+    /**
+     * Get the {@link FieldState} for a field by ID.
+     * Throws if the field is not found.
+     */
+    getField(id) {
+        const state = this.fieldMap.get(id);
+        if (!state) {
+            throw new Error(`FormEngine: unknown field "${id}".`);
+        }
+        return state;
+    }
+    /** Set the value of a single field by ID. */
+    setValue(id, value) {
+        this.getField(id).value.set(value);
+    }
+    /** Mark a field as touched. */
+    markTouched(id) {
+        this.getField(id).touched.set(true);
+    }
+    /** Mark all fields as touched (e.g. on submit attempt). */
+    markAllTouched() {
+        for (const field of this.fieldMap.values()) {
+            field.touched.set(true);
+        }
+    }
+    /**
+     * Reset the form to its initial default values and clear
+     * touched/dirty state.
+     */
+    reset() {
+        for (const field of this.fieldMap.values()) {
+            const def = field.definition.defaultValue ??
+                this.defaultForComponent(field.definition.component);
+            field.value.set(def);
+            field.touched.set(false);
+        }
+    }
+    /**
+     * Produce the JSON output — a plain object containing only
+     * **visible** field values.
+     */
+    output() {
+        return computed(() => {
+            const result = {};
+            for (const group of this.groups) {
+                if (!group.visible())
+                    continue;
+                for (const field of group.fields) {
+                    if (!field.visible())
+                        continue;
+                    if (isFlairComponent(field.definition.component))
+                        continue;
+                    result[field.definition.id] = field.value();
+                }
+            }
+            return result;
+        });
+    }
+    // ── Private helpers ───────────────────────────────────────────────
+    buildGroupState(def) {
+        const fields = def.fields.map((f) => this.buildFieldState(f));
+        const visible = def.visibleWhen
+            ? computed(() => evaluateCondition(def.visibleWhen, this.readFieldValues()))
+            : computed(() => true);
+        const enabled = def.enabledWhen
+            ? computed(() => evaluateCondition(def.enabledWhen, this.readFieldValues()))
+            : computed(() => true);
+        const valid = computed(() => fields.filter((f) => f.visible()).every((f) => f.validation().valid), ...(ngDevMode ? [{ debugName: "valid" }] : []));
+        return { definition: def, fields, visible, enabled, valid };
+    }
+    buildFieldState(def) {
+        const defaultVal = def.defaultValue ?? this.defaultForComponent(def.component);
+        const value = signal(defaultVal, ...(ngDevMode ? [{ debugName: "value" }] : []));
+        const visible = def.visibleWhen
+            ? computed(() => evaluateCondition(def.visibleWhen, this.readFieldValues()))
+            : computed(() => true);
+        const enabled = def.enabledWhen
+            ? computed(() => evaluateCondition(def.enabledWhen, this.readFieldValues()))
+            : computed(() => true);
+        const validation = computed(() => !isFlairComponent(def.component) &&
+            def.validation &&
+            def.validation.length > 0
+            ? validate(def.validation, value())
+            : { valid: true, errors: [] }, ...(ngDevMode ? [{ debugName: "validation" }] : []));
+        const touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+        const dirty = computed(() => value() !== defaultVal, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+        const state = {
+            definition: def,
+            value,
+            visible,
+            enabled,
+            validation,
+            touched,
+            dirty,
+        };
+        this.fieldMap.set(def.id, state);
+        return state;
+    }
+    /**
+     * Read all current field values reactively. When called inside a
+     * `computed()`, it tracks every field's value signal so the
+     * computed re-evaluates whenever any field changes.
+     */
+    readFieldValues() {
+        const v = {};
+        for (const [id, field] of this.fieldMap) {
+            if (isFlairComponent(field.definition.component))
+                continue;
+            v[id] = field.value();
+        }
+        return v;
+    }
+    /**
+     * Produce a sensible default value for a given component type so
+     * fields without explicit `defaultValue` still have a typed zero.
+     */
+    defaultForComponent(component) {
+        switch (component) {
+            case "checkbox":
+            case "toggle":
+                return false;
+            case "slider":
+                return 0;
+            case "date":
+            case "time":
+            case "datetime":
+            case "color":
+                return null;
+            case "file":
+                return [];
+            case "autocomplete":
+                return [];
+            case "flair:richtext":
+            case "flair:image":
+            case "flair:media":
+                return null;
+            default:
+                return "";
+        }
+    }
+}
+
+// ── Field registry ───────────────────────────────────────────────────
+/**
+ * Multi-provider token that collects field registrations from
+ * across the application.
+ */
+const FORM_FIELD_REGISTRATIONS = new InjectionToken("FORM_FIELD_REGISTRATIONS", {
+    factory: () => new Map(),
+});
+/**
+ * Register one or more field types for use in form schemas.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * import { provideFormFields } from '@theredhead/lucid-forms';
+ * import { UIInput, UISelect, UICheckbox } from '@theredhead/lucid-kit';
+ *
+ * export const appConfig = {
+ *   providers: [
+ *     provideFormFields({
+ *       text:     { component: UIInput,    modelProperty: 'value' },
+ *       select:   { component: UISelect,   modelProperty: 'value' },
+ *       checkbox: { component: UICheckbox, modelProperty: 'checked' },
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+function provideFormFields(fields) {
+    const map = new Map(Object.entries(fields));
+    return makeEnvironmentProviders([
+        {
+            provide: FORM_FIELD_REGISTRATIONS,
+            useValue: map,
+        },
+    ]);
+}
+/**
+ * Injectable service that resolves a component key (e.g. `"text"`)
+ * to a {@link FormFieldRegistration}.
+ *
+ * It merges all maps provided via `FORM_FIELD_REGISTRATIONS`.
+ */
+class FormFieldRegistry {
+    maps = inject(FORM_FIELD_REGISTRATIONS, {
+        optional: true,
+    });
+    merged = null;
+    getMerged() {
+        if (this.merged)
+            return this.merged;
+        this.merged = new Map();
+        if (this.maps) {
+            for (const [key, reg] of this.maps) {
+                this.merged.set(key, reg);
+            }
+        }
+        return this.merged;
+    }
+    /** Resolve a component key to its registration, or `null`. */
+    resolve(key) {
+        return this.getMerged().get(key) ?? null;
+    }
+    /** All registered keys. */
+    keys() {
+        return [...this.getMerged().keys()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormFieldRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormFieldRegistry, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FormFieldRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+// ── Text adapter resolver ────────────────────────────────────────────
+/**
+ * Factory map from adapter key strings (as stored in form schema
+ * JSON) to {@link TextAdapter} constructors.
+ *
+ * @internal
+ */
+const ADAPTER_FACTORIES = {
+    email: () => new EmailTextAdapter(),
+    url: () => new UrlTextAdapter(),
+    ip: () => new IPAddressTextAdapter(),
+    phone: () => new PhoneTextAdapter(),
+    creditCard: () => new CreditCardTextAdapter(),
+    money: () => new MoneyTextAdapter(),
+    integer: () => new IntegerTextAdapter(),
+    float: () => new FloatTextAdapter(),
+    decimal: () => new DecimalTextAdapter(),
+    hexadecimal: () => new HexadecimalTextAdapter(),
+    percentage: () => new PercentageTextAdapter(),
+    date: () => new DateTextAdapter(),
+    time: () => new TimeTextAdapter(),
+    color: () => new ColorTextAdapter(),
+    slug: () => new SlugTextAdapter(),
+    uuid: () => new UuidTextAdapter(),
+    cron: () => new CronTextAdapter(),
+    uppercase: () => new UppercaseTextAdapter(),
+};
+/**
+ * All available text adapter keys, in display order.
+ */
+const TEXT_ADAPTER_KEYS = Object.keys(ADAPTER_FACTORIES);
+/**
+ * Resolve a text adapter key to a {@link TextAdapter} instance.
+ *
+ * Returns `undefined` for empty/unknown keys.
+ *
+ * @param key Adapter key (e.g. `"email"`, `"phone"`, `"money"`).
+ */
+function resolveTextAdapter(key) {
+    if (typeof key !== "string" || !key) {
+        return undefined;
+    }
+    return ADAPTER_FACTORIES[key]?.();
+}
+
+// ── Built-in field registrations for @theredhead/lucid-kit ──────────────
+/**
+ * Built-in field registrations that map common component keys
+ * to `@theredhead/lucid-kit` components.
+ *
+ * | Key             | Component           | Model property |
+ * |-----------------|---------------------|----------------|
+ * | `"text"`        | `UIInput`           | `value`        |
+ * | `"select"`      | `UIDropdownList`    | `value`        |
+ * | `"checkbox"`    | `UICheckbox`        | `checked`      |
+ * | `"toggle"`      | `UIToggle`          | `value`        |
+ * | `"radio"`       | `UIRadioGroup`      | `value`        |
+ * | `"autocomplete"`| `UIAutocomplete`    | `value`        |
+ * | `"date"`        | `UIInput` + `DateInputAdapter`  | `value` |
+ * | `"time"`        | `UIInput` + `TimeTextAdapter`   | `value` |
+ * | `"datetime"`    | `UIInput` + `DateInputAdapter`  | `value` |
+ * | `"color"`       | `UIColorPicker`     | `value`        |
+ * | `"slider"`      | `UISlider`          | `value`        |
+ * | `"richtext"`    | `UIRichTextEditor`  | `value`        |
+ * | `"file"`        | `UIFileUpload`      | `files`        |
+ * | `"flair:richtext"` | `UIRichTextView`   | `content`       |
+ * | `"flair:image"` | `UIImage`           | `src`          |
+ * | `"flair:media"` | `UIMediaPlayer`     | `source`       |
+ */
+const BUILT_IN_FIELDS = {
+    text: {
+        component: UIInput,
+        modelProperty: "value",
+        configTransforms: {
+            textAdapter: {
+                inputKey: "adapter",
+                transform: resolveTextAdapter,
+            },
+        },
+    },
+    select: { component: UIDropdownList, modelProperty: "value" },
+    checkbox: { component: UICheckbox, modelProperty: "checked" },
+    toggle: { component: UIToggle, modelProperty: "value" },
+    radio: { component: UIRadioGroup, modelProperty: "value" },
+    autocomplete: { component: UIAutocomplete, modelProperty: "value" },
+    date: {
+        component: UIInput,
+        modelProperty: "value",
+        defaultConfig: { adapter: new DateInputAdapter() },
+    },
+    time: {
+        component: UIInput,
+        modelProperty: "value",
+        defaultConfig: { adapter: new TimeTextAdapter() },
+    },
+    datetime: {
+        component: UIInput,
+        modelProperty: "value",
+        defaultConfig: { adapter: new DateInputAdapter() },
+    },
+    color: { component: UIColorPicker, modelProperty: "value" },
+    slider: {
+        component: UISlider,
+        modelProperty: "value",
+        defaultConfig: { showValue: true, showMinMax: true },
+    },
+    richtext: { component: UIRichTextEditor, modelProperty: "value" },
+    file: { component: UIFileUpload, modelProperty: "files" },
+    "flair:richtext": {
+        component: UIRichTextView,
+        modelProperty: "content",
+    },
+    "flair:image": { component: UIImage, modelProperty: "src" },
+    "flair:media": {
+        component: UIMediaPlayer,
+        modelProperty: "source",
+        defaultConfig: { controls: true },
+    },
+};
+/**
+ * Convenience provider that registers all built-in
+ * `@theredhead/lucid-kit` field types.
+ *
+ * @example
+ * ```ts
+ * import { provideBuiltInFormFields } from '@theredhead/lucid-forms';
+ *
+ * export const appConfig = {
+ *   providers: [provideBuiltInFormFields()],
+ * };
+ * ```
+ */
+function provideBuiltInFormFields() {
+    return provideFormFields(BUILT_IN_FIELDS);
+}
+
+// ── Export strategy types ────────────────────────────────────────────
+// ── String utilities ────────────────────────────────────────────────
+/**
+ * Convert a human-readable title to kebab-case.
+ *
+ * Falls back to `"generated-form"` when the input is empty or
+ * contains no usable characters.
+ *
+ * @internal
+ */
+function toKebabCase(text) {
+    return (text
+        .trim()
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/[\s_]+/g, "-")
+        .replace(/[^a-z0-9-]/gi, "")
+        .toLowerCase()
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "") || "generated-form");
+}
+/**
+ * Convert a human-readable title to PascalCase.
+ *
+ * Falls back to `"GeneratedForm"` when the input is empty.
+ *
+ * @internal
+ */
+function toPascalCase(text) {
+    return toKebabCase(text)
+        .split("-")
+        .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+        .join("");
+}
+
+// ── JSON export strategy ────────────────────────────────────────────
+/**
+ * Exports a {@link FormSchema} as a formatted JSON file.
+ *
+ * The output is a standard JSON document — identical to
+ * `JSON.stringify(schema, null, 2)`.
+ */
+class JsonExportStrategy {
+    label = "JSON Schema";
+    description = "Export the form schema as a JSON file.";
+    export(schema) {
+        const title = schema.title?.trim() || "form";
+        const fileName = toKebabCase(title) + ".schema.json";
+        return {
+            mimeType: "application/json",
+            fileName,
+            content: JSON.stringify(schema, null, 2) + "\n",
+        };
+    }
+}
+
+// ── Angular component export strategy ───────────────────────────────
+const FIELD_META = {
+    text: {
+        className: "UIInput",
+        selector: "ui-input",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    select: {
+        className: "UIDropdownList",
+        selector: "ui-dropdown-list",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    checkbox: {
+        className: "UICheckbox",
+        selector: "ui-checkbox",
+        modelProp: "checked",
+        tsType: "boolean",
+        defaultValue: "false",
+    },
+    toggle: {
+        className: "UIToggle",
+        selector: "ui-toggle",
+        modelProp: "value",
+        tsType: "boolean",
+        defaultValue: "false",
+    },
+    radio: {
+        className: "UIRadioGroup",
+        selector: "ui-radio-group",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    autocomplete: {
+        className: "UIAutocomplete",
+        selector: "ui-autocomplete",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    date: {
+        className: "UIInput",
+        selector: "ui-input",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    time: {
+        className: "UIInput",
+        selector: "ui-input",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    datetime: {
+        className: "UIInput",
+        selector: "ui-input",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    color: {
+        className: "UIColorPicker",
+        selector: "ui-color-picker",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    slider: {
+        className: "UISlider",
+        selector: "ui-slider",
+        modelProp: "value",
+        tsType: "number",
+        defaultValue: "0",
+    },
+    richtext: {
+        className: "UIRichTextEditor",
+        selector: "ui-rich-text-editor",
+        modelProp: "value",
+        tsType: "string",
+        defaultValue: "''",
+    },
+    file: {
+        className: "UIFileUpload",
+        selector: "ui-file-upload",
+        modelProp: "files",
+        tsType: "File[]",
+        defaultValue: "[]",
+    },
+};
+/** Fallback for unknown component keys. */
+const UNKNOWN_META = {
+    className: "UIInput",
+    selector: "ui-input",
+    modelProp: "value",
+    tsType: "string",
+    defaultValue: "''",
+};
+// ── Helpers ─────────────────────────────────────────────────────────
+/** @internal Convert a field id to a safe camelCase identifier. */
+function toCamelCase(text) {
+    const pascal = toPascalCase(text);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+/** @internal Resolve FieldMeta for a component key. */
+function metaFor(componentKey) {
+    return FIELD_META[componentKey] ?? UNKNOWN_META;
+}
+/**
+ * @internal Render config entries as template attribute bindings.
+ *
+ * String values → `key="value"`, others → `[key]="value"`.
+ */
+function configAttrs(config) {
+    if (!config)
+        return "";
+    return Object.entries(config)
+        .map(([k, v]) => typeof v === "string" ? `${k}="${v}"` : `[${k}]="${String(v)}"`)
+        .join(" ");
+}
+/**
+ * @internal Build the options property name for a field
+ * (e.g. `emailOptions`).
+ */
+function optionsPropName(fieldId) {
+    return toCamelCase(fieldId) + "Options";
+}
+// ── Strategy ────────────────────────────────────────────────────────
+/**
+ * Exports a {@link FormSchema} as a standalone Angular component
+ * with a fully declarative HTML template.
+ *
+ * The generated `.component.ts` file contains:
+ *
+ * - A typed `<Title>FormValues` interface with one property per field
+ * - Individual `signal()` fields for two-way binding
+ * - A `computed()` `formValues` signal that assembles the full typed object
+ * - A template that directly uses `@theredhead/lucid-kit` components
+ *   (`<ui-input>`, `<ui-select>`, …) — no `FormEngine` or `<ui-form>`
+ *
+ * The component is almost entirely declarative: the TypeScript class
+ * is just signals and a single computed.
+ */
+class AngularComponentExportStrategy {
+    label = "Angular Component";
+    description = "Standalone Angular component with declarative template.";
+    export(schema) {
+        const title = schema.title?.trim() || "Generated Form";
+        const kebab = toKebabCase(title);
+        const pascal = toPascalCase(title);
+        const className = pascal + "Component";
+        const interfaceName = pascal + "FormValues";
+        const selector = "app-" + kebab;
+        const fileName = kebab + ".component.ts";
+        const allFields = schema.groups.flatMap((g) => g.fields);
+        const lines = [
+            "// ── Generated by @theredhead/lucid-forms Designer ──────────────────────",
+            "",
+            ...this.buildImports(allFields),
+            "",
+            ...this.buildInterface(interfaceName, allFields),
+            "",
+            ...this.buildComponent(selector, className, interfaceName, allFields, schema.groups),
+            "",
+        ];
+        return {
+            mimeType: "text/typescript",
+            fileName,
+            content: lines.join("\n"),
+        };
+    }
+    // ── Code generators ─────────────────────────────────────────────
+    /** @internal Build the import statements. */
+    buildImports(fields) {
+        const angularImports = [
+            "ChangeDetectionStrategy",
+            "Component",
+            "computed",
+            "signal",
+        ];
+        const hasOutput = true; // always include formValues output
+        if (hasOutput)
+            angularImports.push("output");
+        const uiKitComponents = new Set();
+        for (const f of fields) {
+            uiKitComponents.add(metaFor(f.component).className);
+        }
+        const sorted = [...uiKitComponents].sort();
+        return [
+            `import { ${angularImports.join(", ")} } from '@angular/core';`,
+            `import { ${sorted.join(", ")} } from '@theredhead/lucid-kit';`,
+        ];
+    }
+    /** @internal Build the values interface. */
+    buildInterface(name, fields) {
+        const lines = [`export interface ${name} {`];
+        for (const f of fields) {
+            const meta = metaFor(f.component);
+            const prop = toCamelCase(f.id);
+            if (f.title) {
+                lines.push(`  /** ${f.title} */`);
+            }
+            lines.push(`  readonly ${prop}: ${meta.tsType};`);
+        }
+        lines.push("}");
+        return lines;
+    }
+    /** @internal Build the full @Component class. */
+    buildComponent(selector, className, interfaceName, fields, groups) {
+        const uiKitComponents = new Set();
+        for (const f of fields) {
+            uiKitComponents.add(metaFor(f.component).className);
+        }
+        const sorted = [...uiKitComponents].sort();
+        const template = this.buildTemplate(groups);
+        const classBody = this.buildClassBody(interfaceName, fields);
+        return [
+            "@Component({",
+            `  selector: '${selector}',`,
+            "  standalone: true,",
+            `  imports: [${sorted.join(", ")}],`,
+            "  changeDetection: ChangeDetectionStrategy.OnPush,",
+            "  template: `",
+            ...template.map((l) => "    " + l),
+            "  `,",
+            "})",
+            `export class ${className} {`,
+            ...classBody.map((l) => (l ? "  " + l : "")),
+            "}",
+        ];
+    }
+    /** @internal Build the HTML template with fieldsets and components. */
+    buildTemplate(groups) {
+        const lines = [];
+        for (const group of groups) {
+            if (group.title) {
+                lines.push("<fieldset>");
+                lines.push(`  <legend>${group.title}</legend>`);
+                lines.push("");
+            }
+            for (const field of group.fields) {
+                const meta = metaFor(field.component);
+                const prop = toCamelCase(field.id);
+                const attrs = [];
+                // Two-way binding
+                attrs.push(`[(${meta.modelProp})]="${prop}"`);
+                // aria-label
+                if (field.title) {
+                    attrs.push(`ariaLabel="${field.title}"`);
+                }
+                // Options (select, radio, autocomplete)
+                if (field.options && field.options.length > 0) {
+                    attrs.push(`[options]="${optionsPropName(field.id)}"`);
+                }
+                // Config attributes
+                const cfgStr = configAttrs(field.config);
+                if (cfgStr) {
+                    attrs.push(cfgStr);
+                }
+                const label = field.title || field.id;
+                const indent = group.title ? "  " : "";
+                lines.push(`${indent}<label>`);
+                lines.push(`${indent}  ${label}`);
+                lines.push(`${indent}  <${meta.selector} ${attrs.join(" ")} />`);
+                lines.push(`${indent}</label>`);
+                lines.push("");
+            }
+            if (group.title) {
+                lines.push("</fieldset>");
+                lines.push("");
+            }
+        }
+        return lines;
+    }
+    /** @internal Build the class body: signals, options, computed. */
+    buildClassBody(interfaceName, fields) {
+        const lines = [];
+        // Signal fields
+        lines.push("// ── Field signals ──");
+        for (const f of fields) {
+            const meta = metaFor(f.component);
+            const prop = toCamelCase(f.id);
+            const defaultVal = f.defaultValue !== undefined
+                ? JSON.stringify(f.defaultValue)
+                : meta.defaultValue;
+            lines.push(`public readonly ${prop} = signal<${meta.tsType}>(${defaultVal});`);
+        }
+        // Options properties
+        const fieldsWithOptions = fields.filter((f) => f.options && f.options.length > 0);
+        if (fieldsWithOptions.length > 0) {
+            lines.push("");
+            lines.push("// ── Options ──");
+            for (const f of fieldsWithOptions) {
+                const name = optionsPropName(f.id);
+                const json = JSON.stringify(f.options.map((o) => ({ label: o.label, value: o.value })), null, 2);
+                // Indent the JSON nicely
+                const indented = json.replace(/\n/g, "\n  ");
+                lines.push(`protected readonly ${name} = ${indented} as const;`);
+            }
+        }
+        // Computed form values
+        lines.push("");
+        lines.push("// ── Assembled form values ──");
+        lines.push(`public readonly formValues = computed<${interfaceName}>(() => ({`);
+        for (const f of fields) {
+            const prop = toCamelCase(f.id);
+            lines.push(`  ${prop}: this.${prop}(),`);
+        }
+        lines.push("}));");
+        return lines;
+    }
+}
+
+// ── Export barrel ────────────────────────────────────────────────────
+
+// ── UIFormField ──────────────────────────────────────────────────────
+/**
+ * Renders a single form field by dynamically creating the component
+ * registered for the field's `component` key and wiring up two-way
+ * value binding, config inputs, and validation display.
+ *
+ * This component is used internally by {@link UIFormGroup} and
+ * {@link UIForm}. It can also be used standalone for custom layouts.
+ *
+ * @example
+ * ```html
+ * <ui-form-field [state]="fieldState" />
+ * ```
+ */
+class UIFormField {
+    /** The field state managed by the {@link FormEngine}. */
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    registry = inject(FormFieldRegistry);
+    log = inject(LoggerFactory).createLogger("UIFormField");
+    outlet = viewChild("outlet", { ...(ngDevMode ? { debugName: "outlet" } : {}), read: ViewContainerRef });
+    /** @internal Show errors only when the field has been touched. */
+    showErrors = computed(() => this.state().touched() && !this.state().validation().valid, ...(ngDevMode ? [{ debugName: "showErrors" }] : []));
+    /** @internal Whether this field is a flair (non-data) component. */
+    isFlair = computed(() => isFlairComponent(this.state().definition.component), ...(ngDevMode ? [{ debugName: "isFlair" }] : []));
+    /** @internal Whether the field has a `required` validation rule. */
+    isRequired = computed(() => (this.state().definition.validation ?? []).some((r) => r.type === "required"), ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
+    constructor() {
+        // Create the component once the view is ready
+        effect(() => {
+            const fieldState = this.state();
+            const vcr = this.outlet();
+            if (!vcr)
+                return;
+            vcr.clear();
+            const reg = this.registry.resolve(fieldState.definition.component);
+            if (!reg) {
+                this.log.warn(`No component registered for "${fieldState.definition.component}"`, [fieldState.definition.id]);
+                return;
+            }
+            const ref = vcr.createComponent(reg.component);
+            // Wire the model property (two-way).
+            // Use untracked() so the effect does NOT track fieldState.value();
+            // otherwise every keystroke would re-run the effect and recreate
+            // the component, destroying focus.
+            ref.setInput(reg.modelProperty, untracked(() => fieldState.value()));
+            // Subscribe to model changes.
+            // Angular model() signals expose .subscribe() on the signal
+            // itself (not on a separate *Change property).
+            const modelProp = ref.instance[reg.modelProperty];
+            if (modelProp &&
+                typeof modelProp["subscribe"] ===
+                    "function") {
+                // model() signal — subscribe directly
+                modelProp.subscribe((v) => {
+                    fieldState.value.set(v);
+                    fieldState.touched.set(true);
+                });
+            }
+            else {
+                // Fallback: EventEmitter / output() — look for <prop>Change
+                const changeOutput = ref.instance[reg.modelProperty + "Change"];
+                if (changeOutput &&
+                    typeof changeOutput["subscribe"] ===
+                        "function") {
+                    changeOutput.subscribe((v) => {
+                        fieldState.value.set(v);
+                        fieldState.touched.set(true);
+                    });
+                }
+            }
+            // Apply config inputs (defaultConfig merged with field config)
+            const config = {
+                ...(reg.defaultConfig ?? {}),
+                ...(fieldState.definition.config ?? {}),
+            };
+            for (const [key, val] of Object.entries(config)) {
+                const transform = reg.configTransforms?.[key];
+                if (transform) {
+                    try {
+                        ref.setInput(transform.inputKey, transform.transform(val));
+                    }
+                    catch {
+                        this.log.debug(`Input "${transform.inputKey}" not found on component`, [fieldState.definition.component]);
+                    }
+                }
+                else {
+                    try {
+                        ref.setInput(key, val);
+                    }
+                    catch {
+                        this.log.debug(`Input "${key}" not found on component`, [
+                            fieldState.definition.component,
+                        ]);
+                    }
+                }
+            }
+            // Forward options for select/radio/autocomplete
+            if (fieldState.definition.options) {
+                try {
+                    ref.setInput("options", fieldState.definition.options);
+                }
+                catch {
+                    // Component may not have an options input
+                }
+            }
+            // Disabled state (untracked — don't recreate on toggle)
+            if (!untracked(() => fieldState.enabled())) {
+                try {
+                    ref.setInput("disabled", true);
+                }
+                catch {
+                    // Not all components have a disabled input
+                }
+            }
+            // Set aria label from title
+            try {
+                ref.setInput("ariaLabel", fieldState.definition.title);
+            }
+            catch {
+                // Not all components have ariaLabel
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFormField, isStandalone: true, selector: "ui-form-field", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.invalid": "showErrors()", "class.disabled": "!state().enabled()", "class.hidden": "!state().visible()" }, classAttribute: "ui-form-field" }, viewQueries: [{ propertyName: "outlet", first: true, predicate: ["outlet"], descendants: true, read: ViewContainerRef, isSignal: true }], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (state().visible() && !isFlair()) {\n  <label class=\"label\" [attr.for]=\"state().definition.id\">\n    {{ state().definition.title }}\n    @if (isRequired()) {\n      <span class=\"required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n\n  @if (state().definition.description) {\n    <p class=\"description\">{{ state().definition.description }}</p>\n  }\n}\n\n<div class=\"control\" [class.control--hidden]=\"!state().visible()\">\n  <ng-container #outlet />\n</div>\n\n@if (state().visible() && !isFlair() && showErrors()) {\n  <ul class=\"errors\" role=\"alert\">\n    @for (error of state().validation().errors; track error.type) {\n      <li class=\"error\">{{ error.message }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:block}:host(.hidden){display:none}.label{display:block;font-weight:600;font-size:.875rem;margin-bottom:4px}.required{margin-left:2px}.description{font-size:.8125rem;opacity:.65;margin:0 0 4px;line-height:1.4}.control{display:grid;width:100%;justify-items:stretch;margin-bottom:2px}.control--hidden{display:none}.errors{list-style:none;margin:2px 0 0;padding:0}.error{font-size:.8125rem;line-height:1.4}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormField, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-form-field", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-form-field",
+                        "[class.invalid]": "showErrors()",
+                        "[class.disabled]": "!state().enabled()",
+                        "[class.hidden]": "!state().visible()",
+                    }, template: "@if (state().visible() && !isFlair()) {\n  <label class=\"label\" [attr.for]=\"state().definition.id\">\n    {{ state().definition.title }}\n    @if (isRequired()) {\n      <span class=\"required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n\n  @if (state().definition.description) {\n    <p class=\"description\">{{ state().definition.description }}</p>\n  }\n}\n\n<div class=\"control\" [class.control--hidden]=\"!state().visible()\">\n  <ng-container #outlet />\n</div>\n\n@if (state().visible() && !isFlair() && showErrors()) {\n  <ul class=\"errors\" role=\"alert\">\n    @for (error of state().validation().errors; track error.type) {\n      <li class=\"error\">{{ error.message }}</li>\n    }\n  </ul>\n}\n", styles: [":host{display:block}:host(.hidden){display:none}.label{display:block;font-weight:600;font-size:.875rem;margin-bottom:4px}.required{margin-left:2px}.description{font-size:.8125rem;opacity:.65;margin:0 0 4px;line-height:1.4}.control{display:grid;width:100%;justify-items:stretch;margin-bottom:2px}.control--hidden{display:none}.errors{list-style:none;margin:2px 0 0;padding:0}.error{font-size:.8125rem;line-height:1.4}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], outlet: [{ type: i0.ViewChild, args: ["outlet", { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
+
+// ── UIFormGroup ──────────────────────────────────────────────────────
+/**
+ * Renders a group of form fields as a visual section (fieldset).
+ *
+ * In sequential (non-wizard) mode every group is displayed
+ * vertically. In wizard mode, {@link UIFormWizard} controls which
+ * group is visible.
+ *
+ * @example
+ * ```html
+ * <ui-form-group [state]="groupState" />
+ * ```
+ */
+class UIFormGroup {
+    /** The group state managed by the {@link FormEngine}. */
+    state = input.required(...(ngDevMode ? [{ debugName: "state" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFormGroup, isStandalone: true, selector: "ui-form-group", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.hidden": "!state().visible()" }, classAttribute: "ui-form-group" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (state().visible()) {\n  @if (state().definition.title) {\n    <h3 class=\"title\">{{ state().definition.title }}</h3>\n  }\n  @if (state().definition.description) {\n    <p class=\"description\">{{ state().definition.description }}</p>\n  }\n  <div class=\"fields\">\n    @for (field of state().fields; track field.definition.id) {\n      <ui-form-field [state]=\"field\" />\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.hidden){display:none}.title{font-size:1.125rem;font-weight:600;margin:0 0 4px}.description{font-size:.875rem;opacity:.65;margin:0 0 12px;line-height:1.4}.fields{display:flex;flex-direction:column;gap:16px}\n"], dependencies: [{ kind: "component", type: UIFormField, selector: "ui-form-field", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormGroup, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-form-group", standalone: true, imports: [UIFormField], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: {
+                        class: "ui-form-group",
+                        "[class.hidden]": "!state().visible()",
+                    }, template: "@if (state().visible()) {\n  @if (state().definition.title) {\n    <h3 class=\"title\">{{ state().definition.title }}</h3>\n  }\n  @if (state().definition.description) {\n    <p class=\"description\">{{ state().definition.description }}</p>\n  }\n  <div class=\"fields\">\n    @for (field of state().fields; track field.definition.id) {\n      <ui-form-field [state]=\"field\" />\n    }\n  </div>\n}\n", styles: [":host{display:block}:host(.hidden){display:none}.title{font-size:1.125rem;font-weight:600;margin:0 0 4px}.description{font-size:.875rem;opacity:.65;margin:0 0 12px;line-height:1.4}.fields{display:flex;flex-direction:column;gap:16px}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }] } });
+
+// ── FormSettings ─────────────────────────────────────────────────────
+/**
+ * DI token for {@link FormSettings}.
+ *
+ * Provided by `UIForm` and `UIFormWizard` so that descendant
+ * components can look up form-level settings without requiring
+ * explicit input threading.
+ */
+const FORM_SETTINGS = new InjectionToken("FORM_SETTINGS");
+
+// ── UIForm ───────────────────────────────────────────────────────────
+/**
+ * Top-level form component that renders all groups sequentially.
+ *
+ * Takes a {@link FormEngine} instance and displays every group's
+ * fields in order, with validation and conditional visibility.
+ *
+ * @example
+ * ```html
+ * <ui-form [engine]="engine" (formSubmit)="onSubmit($event)" />
+ * ```
+ */
+class UIForm {
+    /** The form engine instance that drives this form. */
+    engine = input.required(...(ngDevMode ? [{ debugName: "engine" }] : []));
+    /** Label for the submit button. Defaults to `"Submit"`. */
+    submitLabel = input("Submit", ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+    /** Whether to show the built-in submit button. Defaults to `true`. */
+    showSubmit = input(true, ...(ngDevMode ? [{ debugName: "showSubmit" }] : []));
+    /** Minimum width (in pixels) for form field controls. Defaults to `200`. */
+    fieldMinWidth = input(450, ...(ngDevMode ? [{ debugName: "fieldMinWidth" }] : []));
+    /** Emitted when the submit button is clicked and the form is valid. */
+    formSubmit = output();
+    /** @internal */
+    isValid = computed(() => this.engine().valid(), ...(ngDevMode ? [{ debugName: "isValid" }] : []));
+    /** @internal — collects all invalid visible fields for the summary. */
+    validationSummary = computed(() => {
+        const summary = [];
+        for (const group of this.engine().groups) {
+            if (!group.visible())
+                continue;
+            for (const field of group.fields) {
+                if (!field.visible())
+                    continue;
+                const v = field.validation();
+                if (!v.valid) {
+                    summary.push({
+                        fieldId: field.definition.id,
+                        title: field.definition.title || field.definition.id,
+                        errors: v.errors.map((e) => e.message),
+                    });
+                }
+            }
+        }
+        return summary;
+    }, ...(ngDevMode ? [{ debugName: "validationSummary" }] : []));
+    /** @internal */
+    onSubmit() {
+        const eng = this.engine();
+        eng.markAllTouched();
+        if (eng.valid()) {
+            this.formSubmit.emit(eng.output()());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIForm, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIForm, isStandalone: true, selector: "ui-form", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null }, fieldMinWidth: { classPropertyName: "fieldMinWidth", publicName: "fieldMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, host: { classAttribute: "ui-form" }, providers: [
+            {
+                provide: FORM_SETTINGS,
+                useExisting: forwardRef(() => UIForm),
+            },
+        ], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (engine().schema.title) {\n  <h2 class=\"title\">{{ engine().schema.title }}</h2>\n}\n@if (engine().schema.description) {\n  <p class=\"description\">{{ engine().schema.description }}</p>\n}\n\n@for (group of engine().groups; track group.definition.id) {\n  <ui-form-group [state]=\"group\" />\n}\n\n@if (showSubmit()) {\n  @if (!isValid() && validationSummary().length) {\n    <div class=\"validation-summary\" role=\"alert\">\n      <strong>Please fix the following issues:</strong>\n      <ul>\n        @for (item of validationSummary(); track item.fieldId) {\n          <li>\n            <strong>{{ item.title }}:</strong>\n            {{ item.errors[0] }}\n          </li>\n        }\n      </ul>\n    </div>\n  }\n  <div class=\"actions\">\n    <button\n      type=\"button\"\n      class=\"submit\"\n      [disabled]=\"!engine().valid()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ submitLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{display:block}.title{font-size:1.375rem;font-weight:700;margin:0 0 4px}.description{font-size:.9375rem;opacity:.65;margin:0 0 20px;line-height:1.4}ui-form-group{margin-bottom:24px}.actions{display:flex;justify-content:flex-end;padding-top:16px}.validation-summary{border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:.8125rem;line-height:1.5}.validation-summary strong{font-weight:600}.validation-summary ul{margin:6px 0 0;padding-left:20px}.validation-summary li{margin-bottom:2px}.submit{appearance:none;border:none;border-radius:8px;padding:10px 24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.submit:hover:not(:disabled){opacity:.88}.submit:disabled{opacity:.45;cursor:default}.submit:focus-visible{outline-offset:2px}\n"], dependencies: [{ kind: "component", type: UIFormGroup, selector: "ui-form-group", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIForm, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-form", standalone: true, imports: [UIFormGroup], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: {
+                        class: "ui-form",
+                    }, providers: [
+                        {
+                            provide: FORM_SETTINGS,
+                            useExisting: forwardRef(() => UIForm),
+                        },
+                    ], template: "@if (engine().schema.title) {\n  <h2 class=\"title\">{{ engine().schema.title }}</h2>\n}\n@if (engine().schema.description) {\n  <p class=\"description\">{{ engine().schema.description }}</p>\n}\n\n@for (group of engine().groups; track group.definition.id) {\n  <ui-form-group [state]=\"group\" />\n}\n\n@if (showSubmit()) {\n  @if (!isValid() && validationSummary().length) {\n    <div class=\"validation-summary\" role=\"alert\">\n      <strong>Please fix the following issues:</strong>\n      <ul>\n        @for (item of validationSummary(); track item.fieldId) {\n          <li>\n            <strong>{{ item.title }}:</strong>\n            {{ item.errors[0] }}\n          </li>\n        }\n      </ul>\n    </div>\n  }\n  <div class=\"actions\">\n    <button\n      type=\"button\"\n      class=\"submit\"\n      [disabled]=\"!engine().valid()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ submitLabel() }}\n    </button>\n  </div>\n}\n", styles: [":host{display:block}.title{font-size:1.375rem;font-weight:700;margin:0 0 4px}.description{font-size:.9375rem;opacity:.65;margin:0 0 20px;line-height:1.4}ui-form-group{margin-bottom:24px}.actions{display:flex;justify-content:flex-end;padding-top:16px}.validation-summary{border-radius:8px;padding:12px 16px;margin-bottom:16px;font-size:.8125rem;line-height:1.5}.validation-summary strong{font-weight:600}.validation-summary ul{margin:6px 0 0;padding-left:20px}.validation-summary li{margin-bottom:2px}.submit{appearance:none;border:none;border-radius:8px;padding:10px 24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.submit:hover:not(:disabled){opacity:.88}.submit:disabled{opacity:.45;cursor:default}.submit:focus-visible{outline-offset:2px}\n"] }]
+        }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], showSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubmit", required: false }] }], fieldMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldMinWidth", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+
+// ── UIFormWizard ─────────────────────────────────────────────────────
+/**
+ * Renders a {@link FormEngine}'s groups as wizard steps — one group
+ * at a time with previous / next / submit navigation.
+ *
+ * Only visible groups are included as steps. The wizard validates
+ * the current step before allowing navigation to the next.
+ *
+ * @example
+ * ```html
+ * <ui-form-wizard
+ *   [engine]="engine"
+ *   (formSubmit)="onSubmit($event)"
+ * />
+ * ```
+ */
+class UIFormWizard {
+    /** The form engine instance that drives this wizard. */
+    engine = input.required(...(ngDevMode ? [{ debugName: "engine" }] : []));
+    /** Label for the "Next" button. */
+    nextLabel = input("Next", ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
+    /** Label for the "Previous" button. */
+    prevLabel = input("Previous", ...(ngDevMode ? [{ debugName: "prevLabel" }] : []));
+    /** Label for the "Submit" button (last step). */
+    submitLabel = input("Submit", ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
+    /** Minimum width (in pixels) for form field controls. Defaults to `200`. */
+    fieldMinWidth = input(450, ...(ngDevMode ? [{ debugName: "fieldMinWidth" }] : []));
+    /** Emitted when the form is submitted (last step, valid). */
+    formSubmit = output();
+    /** Current step index. */
+    currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
+    /** Only visible groups are wizard steps. */
+    visibleGroups = computed(() => this.engine().groups.filter((g) => g.visible()), ...(ngDevMode ? [{ debugName: "visibleGroups" }] : []));
+    /** The currently displayed group state. */
+    currentGroup = computed(() => {
+        const groups = this.visibleGroups();
+        return groups[this.currentIndex()] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "currentGroup" }] : []));
+    /** Whether the current step is the last one. */
+    isLastStep = computed(() => this.currentIndex() === this.visibleGroups().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : []));
+    /** Whether the current step's fields are all valid. */
+    currentStepValid = computed(() => {
+        const group = this.currentGroup();
+        return group ? group.valid() : false;
+    }, ...(ngDevMode ? [{ debugName: "currentStepValid" }] : []));
+    /** Navigate to the next step (marks current fields touched). */
+    next() {
+        const group = this.currentGroup();
+        if (group) {
+            for (const field of group.fields) {
+                field.touched.set(true);
+            }
+        }
+        if (this.currentStepValid() && !this.isLastStep()) {
+            this.currentIndex.update((i) => i + 1);
+        }
+    }
+    /** Navigate to the previous step. */
+    prev() {
+        if (this.currentIndex() > 0) {
+            this.currentIndex.update((i) => i - 1);
+        }
+    }
+    /** Jump to a specific step. */
+    goTo(index) {
+        if (index >= 0 && index <= this.currentIndex()) {
+            this.currentIndex.set(index);
+        }
+    }
+    /** @internal Submit handler. */
+    onSubmit() {
+        const eng = this.engine();
+        eng.markAllTouched();
+        if (eng.valid()) {
+            this.formSubmit.emit(eng.output()());
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormWizard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFormWizard, isStandalone: true, selector: "ui-form-wizard", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, fieldMinWidth: { classPropertyName: "fieldMinWidth", publicName: "fieldMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, host: { classAttribute: "ui-form-wizard" }, providers: [
+            {
+                provide: FORM_SETTINGS,
+                useExisting: forwardRef(() => UIFormWizard),
+            },
+        ], hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (engine().schema.title) {\n  <h2 class=\"title\">{{ engine().schema.title }}</h2>\n}\n@if (engine().schema.description) {\n  <p class=\"description\">{{ engine().schema.description }}</p>\n}\n\n<!-- Step indicator -->\n<nav class=\"steps\" aria-label=\"Form steps\">\n  @for (step of visibleGroups(); track step.definition.id; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"step\"\n      [class.step--active]=\"i === currentIndex()\"\n      [class.step--completed]=\"i < currentIndex()\"\n      [disabled]=\"i > currentIndex()\"\n      (click)=\"goTo(i)\"\n      [attr.aria-current]=\"i === currentIndex() ? 'step' : null\"\n    >\n      <span class=\"step-number\">{{ i + 1 }}</span>\n      @if (step.definition.title) {\n        <span class=\"step-label\">{{ step.definition.title }}</span>\n      }\n    </button>\n  }\n</nav>\n\n<!-- Current group -->\n@if (currentGroup(); as group) {\n  <ui-form-group [state]=\"group\" />\n}\n\n<!-- Navigation -->\n<div class=\"actions\">\n  @if (currentIndex() > 0) {\n    <button type=\"button\" class=\"btn btn--prev\" (click)=\"prev()\">\n      {{ prevLabel() }}\n    </button>\n  }\n\n  <div class=\"spacer\"></div>\n\n  @if (isLastStep()) {\n    <button\n      type=\"button\"\n      class=\"btn btn--submit\"\n      [disabled]=\"!engine().valid()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ submitLabel() }}\n    </button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"btn btn--next\"\n      [disabled]=\"!currentStepValid()\"\n      (click)=\"next()\"\n    >\n      {{ nextLabel() }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.title{font-size:1.375rem;font-weight:700;margin:0 0 4px}.description{font-size:.9375rem;opacity:.65;margin:0 0 16px;line-height:1.4}.steps{display:flex;gap:4px;margin-bottom:24px;padding:0}.step{appearance:none;border:none;padding:8px 16px;border-radius:8px;font-size:.8125rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;opacity:.55;transition:opacity .15s ease,background .15s ease}.step:disabled{cursor:default}.step--active{opacity:1}.step--completed{opacity:.8}.step-number{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.75rem;font-weight:700}.step-label{white-space:nowrap}.actions{display:flex;align-items:center;padding-top:16px;margin-top:24px}.spacer{flex:1}.btn{appearance:none;border:none;border-radius:8px;padding:10px 24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline-offset:2px}.btn--next:hover:not(:disabled),.btn--submit:hover:not(:disabled){opacity:.88}\n"], dependencies: [{ kind: "component", type: UIFormGroup, selector: "ui-form-group", inputs: ["state"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormWizard, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-form-wizard", standalone: true, imports: [UIFormGroup], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: {
+                        class: "ui-form-wizard",
+                    }, providers: [
+                        {
+                            provide: FORM_SETTINGS,
+                            useExisting: forwardRef(() => UIFormWizard),
+                        },
+                    ], template: "@if (engine().schema.title) {\n  <h2 class=\"title\">{{ engine().schema.title }}</h2>\n}\n@if (engine().schema.description) {\n  <p class=\"description\">{{ engine().schema.description }}</p>\n}\n\n<!-- Step indicator -->\n<nav class=\"steps\" aria-label=\"Form steps\">\n  @for (step of visibleGroups(); track step.definition.id; let i = $index) {\n    <button\n      type=\"button\"\n      class=\"step\"\n      [class.step--active]=\"i === currentIndex()\"\n      [class.step--completed]=\"i < currentIndex()\"\n      [disabled]=\"i > currentIndex()\"\n      (click)=\"goTo(i)\"\n      [attr.aria-current]=\"i === currentIndex() ? 'step' : null\"\n    >\n      <span class=\"step-number\">{{ i + 1 }}</span>\n      @if (step.definition.title) {\n        <span class=\"step-label\">{{ step.definition.title }}</span>\n      }\n    </button>\n  }\n</nav>\n\n<!-- Current group -->\n@if (currentGroup(); as group) {\n  <ui-form-group [state]=\"group\" />\n}\n\n<!-- Navigation -->\n<div class=\"actions\">\n  @if (currentIndex() > 0) {\n    <button type=\"button\" class=\"btn btn--prev\" (click)=\"prev()\">\n      {{ prevLabel() }}\n    </button>\n  }\n\n  <div class=\"spacer\"></div>\n\n  @if (isLastStep()) {\n    <button\n      type=\"button\"\n      class=\"btn btn--submit\"\n      [disabled]=\"!engine().valid()\"\n      (click)=\"onSubmit()\"\n    >\n      {{ submitLabel() }}\n    </button>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"btn btn--next\"\n      [disabled]=\"!currentStepValid()\"\n      (click)=\"next()\"\n    >\n      {{ nextLabel() }}\n    </button>\n  }\n</div>\n", styles: [":host{display:block}.title{font-size:1.375rem;font-weight:700;margin:0 0 4px}.description{font-size:.9375rem;opacity:.65;margin:0 0 16px;line-height:1.4}.steps{display:flex;gap:4px;margin-bottom:24px;padding:0}.step{appearance:none;border:none;padding:8px 16px;border-radius:8px;font-size:.8125rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px;opacity:.55;transition:opacity .15s ease,background .15s ease}.step:disabled{cursor:default}.step--active{opacity:1}.step--completed{opacity:.8}.step-number{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:.75rem;font-weight:700}.step-label{white-space:nowrap}.actions{display:flex;align-items:center;padding-top:16px;margin-top:24px}.spacer{flex:1}.btn{appearance:none;border:none;border-radius:8px;padding:10px 24px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible{outline-offset:2px}.btn--next:hover:not(:disabled),.btn--submit:hover:not(:disabled){opacity:.88}\n"] }]
+        }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], fieldMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldMinWidth", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }] } });
+
+// ── FormDesignerEngine ───────────────────────────────────────────────
+// ── Counters for generating unique IDs ──────────────────────────────
+let nextFieldId = 1;
+let nextGroupId = 1;
+/** @internal Reset counters (for testing). */
+function resetDesignerCounters() {
+    nextFieldId = 1;
+    nextGroupId = 1;
+}
+// ── Engine ──────────────────────────────────────────────────────────
+/**
+ * Signal-based engine that maintains the mutable designer state
+ * and produces a readonly {@link FormSchema} snapshot on demand.
+ *
+ * All mutations go through public methods so the UI stays in sync
+ * via Angular's signal-based change detection.
+ *
+ * @example
+ * ```ts
+ * const engine = new FormDesignerEngine();
+ * engine.addGroup();
+ * engine.addField(engine.groups()[0].uid, 'text');
+ * const schema = engine.schema();
+ * ```
+ */
+class FormDesignerEngine {
+    // ── Form-level properties ─────────────────────────────────────────
+    /** Form ID. */
+    formId = signal("form-1", ...(ngDevMode ? [{ debugName: "formId" }] : []));
+    /** Form title. */
+    formTitle = signal("", ...(ngDevMode ? [{ debugName: "formTitle" }] : []));
+    /** Form description. */
+    formDescription = signal("", ...(ngDevMode ? [{ debugName: "formDescription" }] : []));
+    // ── Groups ────────────────────────────────────────────────────────
+    /** Ordered list of mutable group definitions. */
+    groups = signal([], ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    // ── Selection ─────────────────────────────────────────────────────
+    /** Currently selected item in the canvas. */
+    selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    /** The currently selected mutable field (convenience). */
+    selectedField = computed(() => {
+        const sel = this.selection();
+        if (!sel || sel.kind !== "field" || !sel.fieldUid)
+            return null;
+        for (const g of this.groups()) {
+            for (const f of g.fields()) {
+                if (f.uid === sel.fieldUid)
+                    return f;
+            }
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
+    /** The currently selected mutable group (convenience). */
+    selectedGroup = computed(() => {
+        const sel = this.selection();
+        if (!sel || !sel.groupUid)
+            return null;
+        return this.groups().find((g) => g.uid === sel.groupUid) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedGroup" }] : []));
+    // ── Computed schema output ────────────────────────────────────────
+    /**
+     * Produces a readonly {@link FormSchema} snapshot from the current
+     * mutable state. Fully JSON-serializable.
+     */
+    schema = computed(() => this.buildSchema(), ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    // ── Group mutations ───────────────────────────────────────────────
+    /** Add a new empty group at the end. Returns the new group's uid. */
+    addGroup() {
+        const uid = crypto.randomUUID();
+        const group = this.createMutableGroup(uid, `group-${nextGroupId++}`, "");
+        this.groups.update((gs) => [...gs, group]);
+        this.selection.set({ kind: "group", groupUid: uid, fieldUid: null });
+        return uid;
+    }
+    /** Remove a group by uid. Clears selection if it pointed at the group. */
+    removeGroup(uid) {
+        this.groups.update((gs) => gs.filter((g) => g.uid !== uid));
+        const sel = this.selection();
+        if (sel && sel.groupUid === uid) {
+            this.selection.set(null);
+        }
+    }
+    /** Move a group to a new index. */
+    moveGroup(uid, newIndex) {
+        this.groups.update((gs) => {
+            const idx = gs.findIndex((g) => g.uid === uid);
+            if (idx === -1 || idx === newIndex)
+                return gs;
+            const copy = [...gs];
+            const [item] = copy.splice(idx, 1);
+            copy.splice(newIndex, 0, item);
+            return copy;
+        });
+    }
+    // ── Field mutations ───────────────────────────────────────────────
+    /**
+     * Add a new field to a group. Returns the new field's uid.
+     *
+     * @param groupUid — Target group
+     * @param component — Field component key (e.g. `"text"`, `"select"`)
+     * @param atIndex — Optional insertion index (appends if omitted)
+     */
+    addField(groupUid, component, atIndex) {
+        const group = this.groups().find((g) => g.uid === groupUid);
+        if (!group) {
+            throw new Error(`FormDesignerEngine: unknown group "${groupUid}".`);
+        }
+        const uid = crypto.randomUUID();
+        const fieldId = `field_${nextFieldId++}`;
+        const field = this.createMutableField(uid, fieldId, this.labelForComponent(component), component);
+        group.fields.update((fs) => {
+            const copy = [...fs];
+            if (atIndex !== undefined && atIndex >= 0 && atIndex <= copy.length) {
+                copy.splice(atIndex, 0, field);
+            }
+            else {
+                copy.push(field);
+            }
+            return copy;
+        });
+        this.selection.set({ kind: "field", groupUid, fieldUid: uid });
+        return uid;
+    }
+    /** Remove a field by uid from its containing group. */
+    removeField(groupUid, fieldUid) {
+        const group = this.groups().find((g) => g.uid === groupUid);
+        if (!group)
+            return;
+        group.fields.update((fs) => fs.filter((f) => f.uid !== fieldUid));
+        const sel = this.selection();
+        if (sel && sel.fieldUid === fieldUid) {
+            this.selection.set(null);
+        }
+    }
+    /** Move a field to a new position within its group, or to another group. */
+    moveField(sourceGroupUid, fieldUid, targetGroupUid, targetIndex) {
+        const sourceGroup = this.groups().find((g) => g.uid === sourceGroupUid);
+        const targetGroup = this.groups().find((g) => g.uid === targetGroupUid);
+        if (!sourceGroup || !targetGroup)
+            return;
+        let movedField;
+        sourceGroup.fields.update((fs) => {
+            const idx = fs.findIndex((f) => f.uid === fieldUid);
+            if (idx === -1)
+                return fs;
+            const copy = [...fs];
+            [movedField] = copy.splice(idx, 1);
+            return copy;
+        });
+        if (!movedField)
+            return;
+        const fieldToInsert = movedField;
+        targetGroup.fields.update((fs) => {
+            const copy = [...fs];
+            copy.splice(Math.min(targetIndex, copy.length), 0, fieldToInsert);
+            return copy;
+        });
+    }
+    /** Duplicate a field within its group (inserted right after the original). */
+    duplicateField(groupUid, fieldUid) {
+        const group = this.groups().find((g) => g.uid === groupUid);
+        if (!group)
+            return null;
+        const fields = group.fields();
+        const original = fields.find((f) => f.uid === fieldUid);
+        if (!original)
+            return null;
+        const newUid = crypto.randomUUID();
+        const copy = this.createMutableField(newUid, original.id() + "_copy", original.title() + " (copy)", original.component());
+        // Copy properties
+        copy.description.set(original.description());
+        copy.config.set({ ...original.config() });
+        copy.options.set([...original.options()]);
+        copy.validation.set([...original.validation()]);
+        copy.visibleWhen.set(original.visibleWhen());
+        copy.enabledWhen.set(original.enabledWhen());
+        copy.defaultValue.set(original.defaultValue());
+        const idx = fields.findIndex((f) => f.uid === fieldUid);
+        group.fields.update((fs) => {
+            const arr = [...fs];
+            arr.splice(idx + 1, 0, copy);
+            return arr;
+        });
+        this.selection.set({ kind: "field", groupUid, fieldUid: newUid });
+        return newUid;
+    }
+    // ── Selection ─────────────────────────────────────────────────────
+    /** Select a field for editing in the inspector. */
+    selectField(groupUid, fieldUid) {
+        this.selection.set({ kind: "field", groupUid, fieldUid });
+    }
+    /** Select a group for editing in the inspector. */
+    selectGroup(groupUid) {
+        this.selection.set({ kind: "group", groupUid, fieldUid: null });
+    }
+    /** Select the form-level properties for editing. */
+    selectForm() {
+        this.selection.set({ kind: "form", groupUid: null, fieldUid: null });
+    }
+    /** Clear the selection. */
+    clearSelection() {
+        this.selection.set(null);
+    }
+    // ── Import / Export ───────────────────────────────────────────────
+    /**
+     * Load an existing {@link FormSchema} into the designer,
+     * replacing all current state.
+     */
+    loadSchema(schema) {
+        this.formId.set(schema.id);
+        this.formTitle.set(schema.title ?? "");
+        this.formDescription.set(schema.description ?? "");
+        const groups = schema.groups.map((gDef) => {
+            const gUid = crypto.randomUUID();
+            const fields = gDef.fields.map((fDef) => {
+                const fUid = crypto.randomUUID();
+                const mf = this.createMutableField(fUid, fDef.id, fDef.title, fDef.component);
+                mf.description.set(fDef.description ?? "");
+                mf.config.set({ ...(fDef.config ?? {}) });
+                mf.options.set([...(fDef.options ?? [])]);
+                mf.validation.set([...(fDef.validation ?? [])]);
+                mf.visibleWhen.set(fDef.visibleWhen ?? null);
+                mf.enabledWhen.set(fDef.enabledWhen ?? null);
+                mf.defaultValue.set(fDef.defaultValue ?? null);
+                return mf;
+            });
+            const mg = this.createMutableGroup(gUid, gDef.id, gDef.title ?? "");
+            mg.description.set(gDef.description ?? "");
+            mg.fields.set(fields);
+            mg.visibleWhen.set(gDef.visibleWhen ?? null);
+            mg.enabledWhen.set(gDef.enabledWhen ?? null);
+            return mg;
+        });
+        this.groups.set(groups);
+        this.selection.set(null);
+    }
+    /**
+     * Produce a pretty-printed JSON string of the current schema.
+     */
+    toJSON() {
+        return JSON.stringify(this.schema(), null, 2);
+    }
+    // ── Private helpers ───────────────────────────────────────────────
+    createMutableField(uid, id, title, component) {
+        return {
+            uid,
+            id: signal(id),
+            title: signal(title),
+            description: signal(""),
+            component: signal(component),
+            config: signal({}),
+            options: signal([]),
+            validation: signal([]),
+            visibleWhen: signal(null),
+            enabledWhen: signal(null),
+            defaultValue: signal(null),
+        };
+    }
+    createMutableGroup(uid, id, title) {
+        return {
+            uid,
+            id: signal(id),
+            title: signal(title),
+            description: signal(""),
+            fields: signal([]),
+            visibleWhen: signal(null),
+            enabledWhen: signal(null),
+        };
+    }
+    buildSchema() {
+        const groups = this.groups().map((g) => {
+            const fields = g.fields().map((f) => {
+                const def = {
+                    id: f.id(),
+                    title: f.title(),
+                    component: f.component(),
+                };
+                if (f.description())
+                    def["description"] = f.description();
+                if (Object.keys(f.config()).length > 0)
+                    def["config"] = f.config();
+                if (f.options().length > 0)
+                    def["options"] = f.options();
+                if (f.validation().length > 0)
+                    def["validation"] = f.validation();
+                if (f.visibleWhen())
+                    def["visibleWhen"] = f.visibleWhen();
+                if (f.enabledWhen())
+                    def["enabledWhen"] = f.enabledWhen();
+                if (f.defaultValue() !== null)
+                    def["defaultValue"] = f.defaultValue();
+                return def;
+            });
+            const gDef = {
+                id: g.id(),
+                fields,
+            };
+            if (g.title())
+                gDef["title"] = g.title();
+            if (g.description())
+                gDef["description"] = g.description();
+            if (g.visibleWhen())
+                gDef["visibleWhen"] = g.visibleWhen();
+            if (g.enabledWhen())
+                gDef["enabledWhen"] = g.enabledWhen();
+            return gDef;
+        });
+        const schema = {
+            id: this.formId(),
+            groups,
+        };
+        if (this.formTitle())
+            schema["title"] = this.formTitle();
+        if (this.formDescription())
+            schema["description"] = this.formDescription();
+        return schema;
+    }
+    /**
+     * Generate a sensible default label from a component key.
+     */
+    labelForComponent(component) {
+        const labels = {
+            text: "Text Field",
+            select: "Select",
+            checkbox: "Checkbox",
+            toggle: "Toggle",
+            radio: "Radio Group",
+            autocomplete: "Autocomplete",
+            date: "Date Picker",
+            time: "Time Picker",
+            datetime: "Date/Time",
+            color: "Color Picker",
+            slider: "Slider",
+            richtext: "Rich Text",
+            file: "File Upload",
+            "flair:richtext": "Rich Text (flair)",
+            "flair:image": "Image (flair)",
+            "flair:media": "Media (flair)",
+        };
+        return labels[component] ?? component;
+    }
+}
+
+// ── UIFieldPalette ──────────────────────────────────────────────────
+/** All built-in field types available in the palette. */
+const PALETTE_FIELDS = [
+    {
+        key: "text",
+        label: "Text",
+        description: "Single-line text input",
+        icon: UIIcons.Lucide.Text.TextCursorInput,
+    },
+    {
+        key: "select",
+        label: "Select",
+        description: "Dropdown selection",
+        icon: UIIcons.Lucide.Arrows.ChevronsUpDown,
+    },
+    {
+        key: "checkbox",
+        label: "Checkbox",
+        description: "Boolean checkbox",
+        icon: UIIcons.Lucide.Notifications.SquareCheck,
+    },
+    {
+        key: "toggle",
+        label: "Toggle",
+        description: "On/off toggle switch",
+        icon: UIIcons.Lucide.Account.ToggleLeft,
+    },
+    {
+        key: "radio",
+        label: "Radio",
+        description: "Radio button group",
+        icon: UIIcons.Lucide.Shapes.CircleDot,
+    },
+    {
+        key: "autocomplete",
+        label: "Autocomplete",
+        description: "Search with suggestions",
+        icon: UIIcons.Lucide.Social.Search,
+    },
+    {
+        key: "date",
+        label: "Date",
+        description: "Date picker",
+        icon: UIIcons.Lucide.Time.Calendar,
+    },
+    {
+        key: "time",
+        label: "Time",
+        description: "Time picker",
+        icon: UIIcons.Lucide.Time.Clock,
+    },
+    {
+        key: "datetime",
+        label: "Date/Time",
+        description: "Date and time picker",
+        icon: UIIcons.Lucide.Time.CalendarClock,
+    },
+    {
+        key: "color",
+        label: "Color",
+        description: "Color picker",
+        icon: UIIcons.Lucide.Design.Palette,
+    },
+    {
+        key: "slider",
+        label: "Slider",
+        description: "Numeric range slider",
+        icon: UIIcons.Lucide.Account.SlidersHorizontal,
+    },
+    {
+        key: "richtext",
+        label: "Rich Text",
+        description: "Rich text editor",
+        icon: UIIcons.Lucide.Text.Pilcrow,
+    },
+    {
+        key: "file",
+        label: "File",
+        description: "File upload",
+        icon: UIIcons.Lucide.Files.FileUp,
+    },
+];
+/** Flair (non-data) types available in the palette. */
+const PALETTE_FLAIR = [
+    {
+        key: "flair:richtext",
+        label: "Rich Text",
+        description: "Static rich text content",
+        icon: UIIcons.Lucide.Text.PenLine,
+    },
+    {
+        key: "flair:image",
+        label: "Image",
+        description: "Static image",
+        icon: UIIcons.Lucide.Photography.Image,
+    },
+    {
+        key: "flair:media",
+        label: "Media",
+        description: "Audio or video player",
+        icon: UIIcons.Lucide.Communication.Video,
+    },
+];
+/**
+ * Palette sidebar that lists available field types. Clicking or
+ * dragging a type emits the component key so the parent can add
+ * it to the canvas.
+ *
+ * @example
+ * ```html
+ * <ui-field-palette (fieldRequested)="onAddField($event)" />
+ * ```
+ */
+class UIFieldPalette {
+    /** Emitted when the user clicks a field type to add it. */
+    fieldRequested = output();
+    /** @internal Available field types. */
+    fieldTypes = PALETTE_FIELDS;
+    /** @internal Available flair types. */
+    flairTypes = PALETTE_FLAIR;
+    /** @internal */
+    onDragStart(event, key) {
+        event.dataTransfer?.setData("text/plain", key);
+        event.dataTransfer.effectAllowed = "copy";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFieldPalette, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFieldPalette, isStandalone: true, selector: "ui-field-palette", outputs: { fieldRequested: "fieldRequested" }, host: { classAttribute: "ui-field-palette" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<h3 class=\"heading\" id=\"heading-fields\">Fields</h3>\n<nav class=\"list\" aria-labelledby=\"heading-fields\">\n  @for (ft of fieldTypes; track ft.key) {\n    <button\n      type=\"button\"\n      class=\"item\"\n      [attr.aria-label]=\"'Add ' + ft.label + ' field: ' + ft.description\"\n      (click)=\"fieldRequested.emit(ft.key)\"\n      draggable=\"true\"\n      (dragstart)=\"onDragStart($event, ft.key)\"\n    >\n      <ui-icon\n        class=\"icon\"\n        [svg]=\"ft.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"label\">{{ ft.label }}</span>\n    </button>\n  }\n</nav>\n\n<h3 class=\"heading heading--flair\" id=\"heading-flair\">Flair</h3>\n<nav class=\"list\" aria-labelledby=\"heading-flair\">\n  @for (ft of flairTypes; track ft.key) {\n    <button\n      type=\"button\"\n      class=\"item\"\n      [attr.aria-label]=\"'Add ' + ft.label + ' flair: ' + ft.description\"\n      (click)=\"fieldRequested.emit(ft.key)\"\n      draggable=\"true\"\n      (dragstart)=\"onDragStart($event, ft.key)\"\n    >\n      <ui-icon\n        class=\"icon\"\n        [svg]=\"ft.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"label\">{{ ft.label }}</span>\n    </button>\n  }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;overflow-y:auto;padding:12px;min-width:180px}.heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;opacity:.6}.heading--flair{margin-top:16px}.list{display:flex;flex-direction:column;gap:4px}.item{appearance:none;border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:grab;font-size:.8125rem;transition:background .12s ease,border-color .12s ease}.item:active{cursor:grabbing}.icon{width:16px;height:16px;flex-shrink:0;opacity:.7}.label{font-weight:500}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFieldPalette, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-field-palette", standalone: true, imports: [UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-field-palette" }, template: "<h3 class=\"heading\" id=\"heading-fields\">Fields</h3>\n<nav class=\"list\" aria-labelledby=\"heading-fields\">\n  @for (ft of fieldTypes; track ft.key) {\n    <button\n      type=\"button\"\n      class=\"item\"\n      [attr.aria-label]=\"'Add ' + ft.label + ' field: ' + ft.description\"\n      (click)=\"fieldRequested.emit(ft.key)\"\n      draggable=\"true\"\n      (dragstart)=\"onDragStart($event, ft.key)\"\n    >\n      <ui-icon\n        class=\"icon\"\n        [svg]=\"ft.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"label\">{{ ft.label }}</span>\n    </button>\n  }\n</nav>\n\n<h3 class=\"heading heading--flair\" id=\"heading-flair\">Flair</h3>\n<nav class=\"list\" aria-labelledby=\"heading-flair\">\n  @for (ft of flairTypes; track ft.key) {\n    <button\n      type=\"button\"\n      class=\"item\"\n      [attr.aria-label]=\"'Add ' + ft.label + ' flair: ' + ft.description\"\n      (click)=\"fieldRequested.emit(ft.key)\"\n      draggable=\"true\"\n      (dragstart)=\"onDragStart($event, ft.key)\"\n    >\n      <ui-icon\n        class=\"icon\"\n        [svg]=\"ft.icon\"\n        [size]=\"16\"\n        aria-hidden=\"true\"\n      />\n      <span class=\"label\">{{ ft.label }}</span>\n    </button>\n  }\n</nav>\n", styles: [":host{display:flex;flex-direction:column;overflow-y:auto;padding:12px;min-width:180px}.heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;opacity:.6}.heading--flair{margin-top:16px}.list{display:flex;flex-direction:column;gap:4px}.item{appearance:none;border-radius:6px;padding:8px 10px;display:flex;align-items:center;gap:8px;cursor:grab;font-size:.8125rem;transition:background .12s ease,border-color .12s ease}.item:active{cursor:grabbing}.icon{width:16px;height:16px;flex-shrink:0;opacity:.7}.label{font-weight:500}\n"] }]
+        }], propDecorators: { fieldRequested: [{ type: i0.Output, args: ["fieldRequested"] }] } });
+
+// ── UIDesignerCanvas ────────────────────────────────────────────────
+/**
+ * The central canvas of the form designer. Displays all groups
+ * and their fields as interactive cards that can be selected,
+ * reordered, and deleted.
+ *
+ * @example
+ * ```html
+ * <ui-designer-canvas [engine]="engine" />
+ * ```
+ */
+class UIDesignerCanvas {
+    /** The designer engine driving this canvas. */
+    engine = input.required(...(ngDevMode ? [{ debugName: "engine" }] : []));
+    /** Emitted when "Add field" is clicked on a group (passes group uid). */
+    addFieldRequest = output();
+    /** @internal Icon references exposed to the template. */
+    icons = {
+        ChevronUp: UIIcons.Lucide.Arrows.ChevronUp,
+        ChevronDown: UIIcons.Lucide.Arrows.ChevronDown,
+        Copy: UIIcons.Lucide.Text.Copy,
+        X: UIIcons.Lucide.Notifications.X,
+    };
+    /** @internal Whether a component key is a flair type. */
+    isFlair = isFlairComponent;
+    /** @internal */
+    moveGroupUp(event, uid, index) {
+        event.stopPropagation();
+        this.engine().moveGroup(uid, index - 1);
+    }
+    /** @internal */
+    moveGroupDown(event, uid, index) {
+        event.stopPropagation();
+        this.engine().moveGroup(uid, index + 1);
+    }
+    /** @internal */
+    removeGroup(event, uid) {
+        event.stopPropagation();
+        this.engine().removeGroup(uid);
+    }
+    /** @internal */
+    moveFieldUp(event, groupUid, fieldUid, index) {
+        event.stopPropagation();
+        this.engine().moveField(groupUid, fieldUid, groupUid, index - 1);
+    }
+    /** @internal */
+    moveFieldDown(event, groupUid, fieldUid, index) {
+        event.stopPropagation();
+        this.engine().moveField(groupUid, fieldUid, groupUid, index + 1);
+    }
+    /** @internal */
+    duplicateField(event, groupUid, fieldUid) {
+        event.stopPropagation();
+        this.engine().duplicateField(groupUid, fieldUid);
+    }
+    /** @internal */
+    removeField(event, groupUid, fieldUid) {
+        event.stopPropagation();
+        this.engine().removeField(groupUid, fieldUid);
+    }
+    /** @internal */
+    onDragOver(event) {
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "copy";
+    }
+    /** @internal */
+    onDropField(event, group) {
+        event.preventDefault();
+        const component = event.dataTransfer?.getData("text/plain");
+        if (component) {
+            this.engine().addField(group.uid, component);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDesignerCanvas, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIDesignerCanvas, isStandalone: true, selector: "ui-designer-canvas", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { addFieldRequest: "addFieldRequest" }, host: { classAttribute: "ui-designer-canvas" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<!-- Form header (click to select form-level props) -->\n<button\n  type=\"button\"\n  class=\"form-header\"\n  [class.form-header--selected]=\"engine().selection()?.kind === 'form'\"\n  [attr.aria-pressed]=\"engine().selection()?.kind === 'form'\"\n  aria-label=\"Select form properties\"\n  (click)=\"engine().selectForm()\"\n>\n  <span class=\"form-title\">\n    {{ engine().formTitle() || \"Untitled Form\" }}\n  </span>\n  @if (engine().formDescription()) {\n    <span class=\"form-desc\">{{ engine().formDescription() }}</span>\n  }\n</button>\n\n<!-- Groups -->\n@for (group of engine().groups(); track group.uid; let gi = $index) {\n  <section\n    class=\"group\"\n    role=\"region\"\n    [attr.aria-label]=\"group.title() || 'Group ' + (gi + 1)\"\n    [class.group--selected]=\"\n      engine().selection()?.kind === 'group' &&\n      engine().selection()?.groupUid === group.uid\n    \"\n    (drop)=\"onDropField($event, group)\"\n    (dragover)=\"onDragOver($event)\"\n  >\n    <!-- Group header -->\n    <div class=\"group-header\">\n      <span\n        class=\"group-title\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"\n          'Select group: ' + (group.title() || 'Group ' + (gi + 1))\n        \"\n        (click)=\"engine().selectGroup(group.uid)\"\n        (keydown.enter)=\"engine().selectGroup(group.uid)\"\n        >{{ group.title() || \"Group \" + (gi + 1) }}</span\n      >\n      <div class=\"group-actions\">\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn\"\n          aria-label=\"Move group up\"\n          [disabled]=\"gi === 0\"\n          (click)=\"moveGroupUp($event, group.uid, gi)\"\n        >\n          <ui-icon [svg]=\"icons.ChevronUp\" [size]=\"14\" aria-hidden=\"true\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn\"\n          aria-label=\"Move group down\"\n          [disabled]=\"gi === engine().groups().length - 1\"\n          (click)=\"moveGroupDown($event, group.uid, gi)\"\n        >\n          <ui-icon\n            [svg]=\"icons.ChevronDown\"\n            [size]=\"14\"\n            aria-hidden=\"true\"\n          />\n        </button>\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn dc-icon-btn--danger\"\n          aria-label=\"Remove group\"\n          (click)=\"removeGroup($event, group.uid)\"\n        >\n          <ui-icon [svg]=\"icons.X\" [size]=\"14\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields -->\n    <div class=\"fields\">\n      @for (field of group.fields(); track field.uid; let fi = $index) {\n        <div\n          class=\"field\"\n          [class.field--selected]=\"\n            engine().selection()?.fieldUid === field.uid\n          \"\n          [class.field--flair]=\"isFlair(field.component())\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Select field: ' + field.title()\"\n          (click)=\"engine().selectField(group.uid, field.uid)\"\n          (keydown.enter)=\"engine().selectField(group.uid, field.uid)\"\n        >\n          <div\n            class=\"field-info\"\n          >\n            <span class=\"field-component\" aria-hidden=\"true\">{{\n              field.component()\n            }}</span>\n            <span class=\"field-title\">{{ field.title() }}</span>\n            <span class=\"field-id\" aria-hidden=\"true\">{{\n              field.id()\n            }}</span>\n          </div>\n          <div\n            class=\"field-actions\"\n            role=\"toolbar\"\n            [attr.aria-label]=\"'Actions for ' + field.title()\"\n          >\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Move field up\"\n              [disabled]=\"fi === 0\"\n              (click)=\"moveFieldUp($event, group.uid, field.uid, fi)\"\n            >\n              <ui-icon\n                [svg]=\"icons.ChevronUp\"\n                [size]=\"14\"\n                aria-hidden=\"true\"\n              />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Move field down\"\n              [disabled]=\"fi === group.fields().length - 1\"\n              (click)=\"moveFieldDown($event, group.uid, field.uid, fi)\"\n            >\n              <ui-icon\n                [svg]=\"icons.ChevronDown\"\n                [size]=\"14\"\n                aria-hidden=\"true\"\n              />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Duplicate field\"\n              (click)=\"duplicateField($event, group.uid, field.uid)\"\n            >\n              <ui-icon [svg]=\"icons.Copy\" [size]=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn dc-icon-btn--danger\"\n              aria-label=\"Remove field\"\n              (click)=\"removeField($event, group.uid, field.uid)\"\n            >\n              <ui-icon [svg]=\"icons.X\" [size]=\"14\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (group.fields().length === 0) {\n        <div class=\"dc-empty\">\n          Drop or click a field type to add it here\n        </div>\n      }\n    </div>\n\n    <!-- Add field button -->\n    <button\n      type=\"button\"\n      class=\"dc-add-field\"\n      (click)=\"addFieldRequest.emit(group.uid)\"\n    >\n      + Add field\n    </button>\n  </section>\n}\n\n<!-- Add group button -->\n<button type=\"button\" class=\"dc-add-group\" (click)=\"engine().addGroup()\">\n  + Add group\n</button>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;flex:1;padding:16px;overflow-y:auto}.form-header{appearance:none;border-radius:8px;padding:12px 16px;cursor:pointer;text-align:left;flex-shrink:0;transition:border-color .15s ease}.form-header--selected{border-style:solid}.form-title{display:block;font-weight:700;font-size:1rem}.form-desc{display:block;font-size:.8125rem;margin-top:2px}.group{border-radius:8px;overflow:hidden;flex-shrink:0}.group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer}.group-title{font-weight:600;font-size:.875rem;cursor:pointer;border-radius:4px;padding:2px 4px;margin:-2px -4px}.group-title:focus-visible{outline-offset:2px}.group-actions{display:flex;gap:2px}.fields{padding:8px;display:flex;flex-direction:column;gap:4px;min-height:40px}.field{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;cursor:pointer;transition:border-color .12s ease,background .12s ease}.field-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1;cursor:pointer;border-radius:4px;padding:2px;margin:-2px}.field-info:focus-visible{outline-offset:2px}.field-component{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px;flex-shrink:0}.field-title{font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-id{font-size:.75rem;font-family:monospace}.field-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s ease}.field:hover .field-actions,.field--selected .field-actions{opacity:1}.dc-empty{text-align:center;padding:16px;font-size:.8125rem;opacity:.5;font-style:italic}.dc-icon-btn{appearance:none;border:none;cursor:pointer;font-size:.8125rem;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background .1s ease}.dc-icon-btn:disabled{opacity:.3;cursor:default}.dc-add-field{appearance:none;border-radius:6px;padding:8px;margin:4px 8px 8px;cursor:pointer;font-size:.8125rem;font-weight:500;transition:background .12s ease}.dc-add-group{appearance:none;border-radius:8px;padding:14px;cursor:pointer;font-size:.875rem;font-weight:600;transition:background .12s ease,border-color .12s ease}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIDesignerCanvas, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-designer-canvas", standalone: true, imports: [UIIcon], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-designer-canvas" }, template: "<!-- Form header (click to select form-level props) -->\n<button\n  type=\"button\"\n  class=\"form-header\"\n  [class.form-header--selected]=\"engine().selection()?.kind === 'form'\"\n  [attr.aria-pressed]=\"engine().selection()?.kind === 'form'\"\n  aria-label=\"Select form properties\"\n  (click)=\"engine().selectForm()\"\n>\n  <span class=\"form-title\">\n    {{ engine().formTitle() || \"Untitled Form\" }}\n  </span>\n  @if (engine().formDescription()) {\n    <span class=\"form-desc\">{{ engine().formDescription() }}</span>\n  }\n</button>\n\n<!-- Groups -->\n@for (group of engine().groups(); track group.uid; let gi = $index) {\n  <section\n    class=\"group\"\n    role=\"region\"\n    [attr.aria-label]=\"group.title() || 'Group ' + (gi + 1)\"\n    [class.group--selected]=\"\n      engine().selection()?.kind === 'group' &&\n      engine().selection()?.groupUid === group.uid\n    \"\n    (drop)=\"onDropField($event, group)\"\n    (dragover)=\"onDragOver($event)\"\n  >\n    <!-- Group header -->\n    <div class=\"group-header\">\n      <span\n        class=\"group-title\"\n        tabindex=\"0\"\n        role=\"button\"\n        [attr.aria-label]=\"\n          'Select group: ' + (group.title() || 'Group ' + (gi + 1))\n        \"\n        (click)=\"engine().selectGroup(group.uid)\"\n        (keydown.enter)=\"engine().selectGroup(group.uid)\"\n        >{{ group.title() || \"Group \" + (gi + 1) }}</span\n      >\n      <div class=\"group-actions\">\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn\"\n          aria-label=\"Move group up\"\n          [disabled]=\"gi === 0\"\n          (click)=\"moveGroupUp($event, group.uid, gi)\"\n        >\n          <ui-icon [svg]=\"icons.ChevronUp\" [size]=\"14\" aria-hidden=\"true\" />\n        </button>\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn\"\n          aria-label=\"Move group down\"\n          [disabled]=\"gi === engine().groups().length - 1\"\n          (click)=\"moveGroupDown($event, group.uid, gi)\"\n        >\n          <ui-icon\n            [svg]=\"icons.ChevronDown\"\n            [size]=\"14\"\n            aria-hidden=\"true\"\n          />\n        </button>\n        <button\n          type=\"button\"\n          class=\"dc-icon-btn dc-icon-btn--danger\"\n          aria-label=\"Remove group\"\n          (click)=\"removeGroup($event, group.uid)\"\n        >\n          <ui-icon [svg]=\"icons.X\" [size]=\"14\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </div>\n\n    <!-- Fields -->\n    <div class=\"fields\">\n      @for (field of group.fields(); track field.uid; let fi = $index) {\n        <div\n          class=\"field\"\n          [class.field--selected]=\"\n            engine().selection()?.fieldUid === field.uid\n          \"\n          [class.field--flair]=\"isFlair(field.component())\"\n          role=\"button\"\n          tabindex=\"0\"\n          [attr.aria-label]=\"'Select field: ' + field.title()\"\n          (click)=\"engine().selectField(group.uid, field.uid)\"\n          (keydown.enter)=\"engine().selectField(group.uid, field.uid)\"\n        >\n          <div\n            class=\"field-info\"\n          >\n            <span class=\"field-component\" aria-hidden=\"true\">{{\n              field.component()\n            }}</span>\n            <span class=\"field-title\">{{ field.title() }}</span>\n            <span class=\"field-id\" aria-hidden=\"true\">{{\n              field.id()\n            }}</span>\n          </div>\n          <div\n            class=\"field-actions\"\n            role=\"toolbar\"\n            [attr.aria-label]=\"'Actions for ' + field.title()\"\n          >\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Move field up\"\n              [disabled]=\"fi === 0\"\n              (click)=\"moveFieldUp($event, group.uid, field.uid, fi)\"\n            >\n              <ui-icon\n                [svg]=\"icons.ChevronUp\"\n                [size]=\"14\"\n                aria-hidden=\"true\"\n              />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Move field down\"\n              [disabled]=\"fi === group.fields().length - 1\"\n              (click)=\"moveFieldDown($event, group.uid, field.uid, fi)\"\n            >\n              <ui-icon\n                [svg]=\"icons.ChevronDown\"\n                [size]=\"14\"\n                aria-hidden=\"true\"\n              />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn\"\n              aria-label=\"Duplicate field\"\n              (click)=\"duplicateField($event, group.uid, field.uid)\"\n            >\n              <ui-icon [svg]=\"icons.Copy\" [size]=\"14\" aria-hidden=\"true\" />\n            </button>\n            <button\n              type=\"button\"\n              class=\"dc-icon-btn dc-icon-btn--danger\"\n              aria-label=\"Remove field\"\n              (click)=\"removeField($event, group.uid, field.uid)\"\n            >\n              <ui-icon [svg]=\"icons.X\" [size]=\"14\" aria-hidden=\"true\" />\n            </button>\n          </div>\n        </div>\n      }\n\n      @if (group.fields().length === 0) {\n        <div class=\"dc-empty\">\n          Drop or click a field type to add it here\n        </div>\n      }\n    </div>\n\n    <!-- Add field button -->\n    <button\n      type=\"button\"\n      class=\"dc-add-field\"\n      (click)=\"addFieldRequest.emit(group.uid)\"\n    >\n      + Add field\n    </button>\n  </section>\n}\n\n<!-- Add group button -->\n<button type=\"button\" class=\"dc-add-group\" (click)=\"engine().addGroup()\">\n  + Add group\n</button>\n", styles: [":host{display:flex;flex-direction:column;gap:16px;flex:1;padding:16px;overflow-y:auto}.form-header{appearance:none;border-radius:8px;padding:12px 16px;cursor:pointer;text-align:left;flex-shrink:0;transition:border-color .15s ease}.form-header--selected{border-style:solid}.form-title{display:block;font-weight:700;font-size:1rem}.form-desc{display:block;font-size:.8125rem;margin-top:2px}.group{border-radius:8px;overflow:hidden;flex-shrink:0}.group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer}.group-title{font-weight:600;font-size:.875rem;cursor:pointer;border-radius:4px;padding:2px 4px;margin:-2px -4px}.group-title:focus-visible{outline-offset:2px}.group-actions{display:flex;gap:2px}.fields{padding:8px;display:flex;flex-direction:column;gap:4px;min-height:40px}.field{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;cursor:pointer;transition:border-color .12s ease,background .12s ease}.field-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1;cursor:pointer;border-radius:4px;padding:2px;margin:-2px}.field-info:focus-visible{outline-offset:2px}.field-component{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border-radius:4px;flex-shrink:0}.field-title{font-weight:500;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field-id{font-size:.75rem;font-family:monospace}.field-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .12s ease}.field:hover .field-actions,.field--selected .field-actions{opacity:1}.dc-empty{text-align:center;padding:16px;font-size:.8125rem;opacity:.5;font-style:italic}.dc-icon-btn{appearance:none;border:none;cursor:pointer;font-size:.8125rem;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;transition:background .1s ease}.dc-icon-btn:disabled{opacity:.3;cursor:default}.dc-add-field{appearance:none;border-radius:6px;padding:8px;margin:4px 8px 8px;cursor:pointer;font-size:.8125rem;font-weight:500;transition:background .12s ease}.dc-add-group{appearance:none;border-radius:8px;padding:14px;cursor:pointer;font-size:.875rem;font-weight:600;transition:background .12s ease,border-color .12s ease}\n"] }]
+        }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }], addFieldRequest: [{ type: i0.Output, args: ["addFieldRequest"] }] } });
+
+// ── Component config schemas ────────────────────────────────────────
+/**
+ * Map from component key (e.g. `"text"`, `"slider"`) to an ordered
+ * list of config property schemas.
+ *
+ * Properties that are not in this map for a given component are
+ * still stored in `config` but are only editable via the raw
+ * JSON fallback textarea.
+ */
+const COMPONENT_CONFIG_SCHEMAS = {
+    text: [
+        {
+            key: "type",
+            label: "Input type",
+            editor: "select",
+            options: ["text", "email", "password", "url", "tel", "search"],
+            defaultValue: "text",
+            visibleWhen: (cfg) => !cfg["textAdapter"],
+        },
+        {
+            key: "textAdapter",
+            label: "Text adapter",
+            editor: "select",
+            options: [
+                { label: "(none)", value: "" },
+                { label: "Email", value: "email" },
+                { label: "URL", value: "url" },
+                { label: "IP Address", value: "ip" },
+                { label: "Phone", value: "phone" },
+                { label: "Credit Card", value: "creditCard" },
+                { label: "Money", value: "money" },
+                { label: "Integer", value: "integer" },
+                { label: "Float", value: "float" },
+                { label: "Decimal", value: "decimal" },
+                { label: "Hexadecimal", value: "hexadecimal" },
+                { label: "Percentage", value: "percentage" },
+                { label: "Date", value: "date" },
+                { label: "Time", value: "time" },
+                { label: "Colour", value: "color" },
+                { label: "Slug", value: "slug" },
+                { label: "UUID", value: "uuid" },
+                { label: "Cron", value: "cron" },
+            ],
+            defaultValue: "",
+        },
+        {
+            key: "placeholder",
+            label: "Placeholder",
+            editor: "text",
+            placeholder: "e.g. Enter your name…",
+        },
+        {
+            key: "multiline",
+            label: "Multiline (textarea)",
+            editor: "boolean",
+            defaultValue: false,
+        },
+        {
+            key: "rows",
+            label: "Visible rows",
+            editor: "number",
+            defaultValue: 3,
+            placeholder: "3",
+        },
+    ],
+    select: [
+        {
+            key: "placeholder",
+            label: "Placeholder",
+            editor: "text",
+            placeholder: "e.g. Choose…",
+        },
+    ],
+    checkbox: [
+        {
+            key: "variant",
+            label: "Variant",
+            editor: "select",
+            options: ["checkbox", "switch"],
+            defaultValue: "checkbox",
+        },
+        {
+            key: "indeterminate",
+            label: "Indeterminate",
+            editor: "boolean",
+            defaultValue: false,
+        },
+    ],
+    toggle: [
+        {
+            key: "onLabel",
+            label: "On label",
+            editor: "text",
+            placeholder: "e.g. Enabled",
+        },
+        {
+            key: "offLabel",
+            label: "Off label",
+            editor: "text",
+            placeholder: "e.g. Disabled",
+        },
+        {
+            key: "size",
+            label: "Size",
+            editor: "select",
+            options: ["sm", "md", "lg"],
+            defaultValue: "md",
+        },
+    ],
+    radio: [],
+    autocomplete: [
+        {
+            key: "placeholder",
+            label: "Placeholder",
+            editor: "text",
+            placeholder: "e.g. Search…",
+        },
+        {
+            key: "minQueryLength",
+            label: "Min query length",
+            editor: "number",
+            defaultValue: 1,
+        },
+        {
+            key: "multi",
+            label: "Multi-select",
+            editor: "boolean",
+            defaultValue: false,
+        },
+    ],
+    date: [
+        {
+            key: "format",
+            label: "Date format",
+            editor: "select",
+            options: [
+                "yyyy-MM-dd",
+                "dd/MM/yyyy",
+                "MM/dd/yyyy",
+                "dd.MM.yyyy",
+                "dd-MM-yyyy",
+                "yyyy/MM/dd",
+            ],
+            defaultValue: "yyyy-MM-dd",
+        },
+        {
+            key: "placeholder",
+            label: "Placeholder",
+            editor: "text",
+            placeholder: "e.g. Select date",
+        },
+        {
+            key: "firstDayOfWeek",
+            label: "First day of week",
+            editor: "select",
+            options: [
+                { label: "Sunday", value: "0" },
+                { label: "Monday", value: "1" },
+                { label: "Tuesday", value: "2" },
+                { label: "Wednesday", value: "3" },
+                { label: "Thursday", value: "4" },
+                { label: "Friday", value: "5" },
+                { label: "Saturday", value: "6" },
+            ],
+            defaultValue: 1,
+        },
+    ],
+    time: [
+        {
+            key: "clockMode",
+            label: "Clock mode",
+            editor: "select",
+            options: [
+                { label: "24-hour", value: "24" },
+                { label: "12-hour", value: "12" },
+            ],
+            defaultValue: 24,
+        },
+        {
+            key: "minuteStep",
+            label: "Minute step",
+            editor: "number",
+            defaultValue: 1,
+        },
+    ],
+    datetime: [
+        {
+            key: "dateFormat",
+            label: "Date format",
+            editor: "select",
+            options: [
+                "yyyy-MM-dd",
+                "dd/MM/yyyy",
+                "MM/dd/yyyy",
+                "dd.MM.yyyy",
+                "dd-MM-yyyy",
+                "yyyy/MM/dd",
+            ],
+            defaultValue: "yyyy-MM-dd",
+        },
+        {
+            key: "clockMode",
+            label: "Clock mode",
+            editor: "select",
+            options: [
+                { label: "24-hour", value: "24" },
+                { label: "12-hour", value: "12" },
+            ],
+            defaultValue: 24,
+        },
+        {
+            key: "minuteStep",
+            label: "Minute step",
+            editor: "number",
+            defaultValue: 1,
+        },
+    ],
+    color: [
+        {
+            key: "defaultMode",
+            label: "Default mode",
+            editor: "select",
+            options: ["theme", "grid", "rgba", "hsla"],
+            defaultValue: "theme",
+        },
+    ],
+    slider: [
+        {
+            key: "mode",
+            label: "Mode",
+            editor: "select",
+            options: ["single", "range"],
+            defaultValue: "single",
+        },
+        {
+            key: "min",
+            label: "Min value",
+            editor: "number",
+            defaultValue: 0,
+        },
+        {
+            key: "max",
+            label: "Max value",
+            editor: "number",
+            defaultValue: 100,
+        },
+        {
+            key: "step",
+            label: "Step",
+            editor: "number",
+            defaultValue: 1,
+        },
+        {
+            key: "showValue",
+            label: "Show value label",
+            editor: "boolean",
+            defaultValue: false,
+        },
+        {
+            key: "showTicks",
+            label: "Show tick marks",
+            editor: "boolean",
+            defaultValue: false,
+        },
+    ],
+    richtext: [
+        {
+            key: "mode",
+            label: "Mode",
+            editor: "select",
+            options: ["html", "markdown"],
+            defaultValue: "html",
+        },
+        {
+            key: "placeholder",
+            label: "Placeholder",
+            editor: "text",
+            placeholder: "e.g. Type here…",
+        },
+        {
+            key: "sanitize",
+            label: "Sanitize HTML",
+            editor: "boolean",
+            defaultValue: true,
+        },
+        {
+            key: "maxLength",
+            label: "Max length",
+            editor: "number",
+            placeholder: "0 = unlimited",
+        },
+    ],
+    file: [
+        {
+            key: "accept",
+            label: "Accepted types",
+            editor: "text",
+            placeholder: "e.g. image/*,.pdf",
+        },
+        {
+            key: "multiple",
+            label: "Multiple files",
+            editor: "boolean",
+            defaultValue: false,
+        },
+        {
+            key: "maxFileSize",
+            label: "Max file size (bytes)",
+            editor: "number",
+            placeholder: "e.g. 5242880",
+        },
+    ],
+    // ── Flair components ────────────────────────────────────────────────
+    "flair:richtext": [
+        {
+            key: "content",
+            label: "HTML content",
+            editor: "richtext",
+        },
+    ],
+    "flair:image": [
+        {
+            key: "src",
+            label: "Image URL",
+            editor: "text",
+            placeholder: "https://example.com/image.png",
+        },
+        {
+            key: "alt",
+            label: "Alt text",
+            editor: "text",
+            placeholder: "Describe the image",
+        },
+        {
+            key: "width",
+            label: "Width (px)",
+            editor: "number",
+            placeholder: "e.g. 400",
+        },
+        {
+            key: "height",
+            label: "Height (px)",
+            editor: "number",
+            placeholder: "e.g. 300",
+        },
+    ],
+    "flair:media": [
+        {
+            key: "source",
+            label: "Media URL",
+            editor: "text",
+            placeholder: "https://example.com/video.mp4",
+        },
+        {
+            key: "type",
+            label: "Media type",
+            editor: "select",
+            options: ["video", "audio"],
+            defaultValue: "video",
+        },
+        {
+            key: "controls",
+            label: "Show controls",
+            editor: "boolean",
+            defaultValue: true,
+        },
+        {
+            key: "poster",
+            label: "Poster image URL",
+            editor: "text",
+            placeholder: "https://example.com/poster.jpg",
+        },
+    ],
+};
+/**
+ * Returns the config property schemas for a given component key.
+ * Returns an empty array for unknown components.
+ */
+function getConfigSchema(component) {
+    return COMPONENT_CONFIG_SCHEMAS[component] ?? [];
+}
+
+// ── UIRichTextContentDialog ─────────────────────────────────────────
+/**
+ * Modal dialog for editing the HTML content of a `flair:richtext`
+ * field in the form designer.
+ *
+ * Opens a full {@link UIRichTextEditor} inside a native `<dialog>`
+ * with Apply / Cancel actions.
+ *
+ * @internal  Used exclusively by {@link UIPropertyInspector}.
+ */
+class UIRichTextContentDialog {
+    modalRef = inject((ModalRef));
+    /** Pre-filled HTML content (set via input by ModalService). */
+    initialContent = input("", ...(ngDevMode ? [{ debugName: "initialContent" }] : []));
+    /** Mutable content value for the editor. @internal */
+    content = signal("", ...(ngDevMode ? [{ debugName: "content" }] : []));
+    constructor() {
+        queueMicrotask(() => {
+            this.content.set(this.initialContent());
+        });
+    }
+    /** @internal Called when the editor emits a value change. */
+    onValueChange(html) {
+        this.content.set(html);
+    }
+    /** Apply and close the dialog with the edited content. */
+    apply() {
+        this.modalRef.close(this.content());
+    }
+    /** Cancel and dismiss the dialog without a result. */
+    cancel() {
+        this.modalRef.close(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIRichTextContentDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: UIRichTextContentDialog, isStandalone: true, selector: "ui-richtext-content-dialog", inputs: { initialContent: { classPropertyName: "initialContent", publicName: "initialContent", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ui-richtext-content-dialog" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<div class=\"editor-wrapper\">\n  <ui-rich-text-editor\n    [value]=\"content()\"\n    (valueChange)=\"onValueChange($event)\"\n    ariaLabel=\"Edit rich text content\"\n  />\n</div>\n<div class=\"actions\">\n  <button\n    type=\"button\"\n    class=\"btn btn--cancel\"\n    (click)=\"cancel()\"\n  >\n    Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn--apply\"\n    (click)=\"apply()\"\n  >\n    Apply\n  </button>\n</div>\n", styles: [":host{display:block;padding:.75rem;min-width:32rem;max-width:48rem;font-family:inherit;font-size:.875rem}.editor-wrapper{border-radius:.25rem;overflow:hidden;min-height:14rem}.actions{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem}.btn{appearance:none;border-radius:.25rem;padding:.35rem .75rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:background-color 80ms ease,border-color 80ms ease;white-space:nowrap}.btn--apply:hover:not(:disabled){opacity:.9}\n"], dependencies: [{ kind: "component", type: UIRichTextEditor, selector: "ui-rich-text-editor", inputs: ["mode", "disabled", "readonly", "ariaLabel", "placeholder", "toolbarActions", "placeholders", "sanitise", "maxLength", "imageHandler", "emojiCategories", "value"], outputs: ["valueChange", "placeholderInserted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIRichTextContentDialog, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-richtext-content-dialog", standalone: true, imports: [UIRichTextEditor], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-richtext-content-dialog" }, template: "<div class=\"editor-wrapper\">\n  <ui-rich-text-editor\n    [value]=\"content()\"\n    (valueChange)=\"onValueChange($event)\"\n    ariaLabel=\"Edit rich text content\"\n  />\n</div>\n<div class=\"actions\">\n  <button\n    type=\"button\"\n    class=\"btn btn--cancel\"\n    (click)=\"cancel()\"\n  >\n    Cancel\n  </button>\n  <button\n    type=\"button\"\n    class=\"btn btn--apply\"\n    (click)=\"apply()\"\n  >\n    Apply\n  </button>\n</div>\n", styles: [":host{display:block;padding:.75rem;min-width:32rem;max-width:48rem;font-family:inherit;font-size:.875rem}.editor-wrapper{border-radius:.25rem;overflow:hidden;min-height:14rem}.actions{display:flex;gap:.35rem;justify-content:flex-end;margin-top:.5rem}.btn{appearance:none;border-radius:.25rem;padding:.35rem .75rem;font-family:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:background-color 80ms ease,border-color 80ms ease;white-space:nowrap}.btn--apply:hover:not(:disabled){opacity:.9}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { initialContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialContent", required: false }] }] } });
+
+// ── UIPropertyInspector ─────────────────────────────────────────────
+/** Available component keys for the component selector. */
+const COMPONENT_OPTIONS = [
+    "text",
+    "select",
+    "checkbox",
+    "toggle",
+    "radio",
+    "autocomplete",
+    "date",
+    "time",
+    "datetime",
+    "color",
+    "slider",
+    "richtext",
+    "file",
+    "flair:richtext",
+    "flair:image",
+    "flair:media",
+].map((k) => ({ value: k, label: k }));
+/** Available validation rule types. */
+const VALIDATION_TYPE_OPTIONS = [
+    "required",
+    "minLength",
+    "maxLength",
+    "min",
+    "max",
+    "pattern",
+    "email",
+].map((k) => ({ value: k, label: k }));
+/**
+ * Property inspector panel for editing the properties of the
+ * currently selected field, group, or form.
+ *
+ * @example
+ * ```html
+ * <ui-property-inspector [engine]="engine" />
+ * ```
+ */
+class UIPropertyInspector {
+    /** The designer engine driving this inspector. */
+    engine = input.required(...(ngDevMode ? [{ debugName: "engine" }] : []));
+    /** @internal */
+    componentOptions = COMPONENT_OPTIONS;
+    /** @internal */
+    validationTypeOptions = VALIDATION_TYPE_OPTIONS;
+    /** @internal */
+    configError = signal("", ...(ngDevMode ? [{ debugName: "configError" }] : []));
+    /** @internal X icon for remove buttons. */
+    iconX = UIIcons.Lucide.Notifications.X;
+    /** @internal Edit icon for the rich text button. */
+    iconEdit = UIIcons.Lucide.Text.Type;
+    modalService = inject(ModalService);
+    // ── Helpers ───────────────────────────────────────────────────────
+    /** @internal Extract input value from a DOM event. */
+    inputValue(event) {
+        return event.target.value;
+    }
+    /** @internal Whether the field type supports options. */
+    showOptions(field) {
+        const comp = field.component();
+        return comp === "select" || comp === "radio" || comp === "autocomplete";
+    }
+    /** @internal Whether the field is a flair (non-data) component. */
+    isFieldFlair(field) {
+        return isFlairComponent(field.component());
+    }
+    // ── Options ───────────────────────────────────────────────────────
+    /** @internal */
+    addOption(field) {
+        field.options.update((opts) => [...opts, { label: "", value: "" }]);
+    }
+    /** @internal */
+    removeOption(field, index) {
+        field.options.update((opts) => opts.filter((_, i) => i !== index));
+    }
+    /** @internal */
+    updateOption(field, index, key, value) {
+        field.options.update((opts) => {
+            const copy = [...opts];
+            copy[index] = { ...copy[index], [key]: value };
+            return copy;
+        });
+    }
+    // ── Validation ────────────────────────────────────────────────────
+    /** @internal */
+    addValidationRule(field) {
+        field.validation.update((rules) => [
+            ...rules,
+            { type: "required", message: "" },
+        ]);
+    }
+    /** @internal */
+    removeValidationRule(field, index) {
+        field.validation.update((rules) => rules.filter((_, i) => i !== index));
+    }
+    /** @internal */
+    updateValidationRule(field, index, key, value) {
+        field.validation.update((rules) => {
+            const copy = [...rules];
+            copy[index] = { ...copy[index], [key]: value };
+            return copy;
+        });
+    }
+    /** @internal */
+    ruleHasParam(type) {
+        return ["minLength", "maxLength", "min", "max", "pattern"].includes(type);
+    }
+    /** @internal */
+    paramPlaceholder(type) {
+        switch (type) {
+            case "minLength":
+                return "Min length";
+            case "maxLength":
+                return "Max length";
+            case "min":
+                return "Min value";
+            case "max":
+                return "Max value";
+            case "pattern":
+                return "Regex pattern";
+            default:
+                return "Param";
+        }
+    }
+    /** @internal */
+    ruleParamValue(rule) {
+        if (!rule.params)
+            return "";
+        const p = rule.params;
+        return String(p["min"] ?? p["max"] ?? p["pattern"] ?? "");
+    }
+    /** @internal */
+    updateValidationParam(field, index, type, value) {
+        field.validation.update((rules) => {
+            const copy = [...rules];
+            let params;
+            switch (type) {
+                case "minLength":
+                    params = { min: parseInt(value, 10) || 0 };
+                    break;
+                case "maxLength":
+                    params = { max: parseInt(value, 10) || 0 };
+                    break;
+                case "min":
+                    params = { min: parseFloat(value) || 0 };
+                    break;
+                case "max":
+                    params = { max: parseFloat(value) || 0 };
+                    break;
+                case "pattern":
+                    params = { pattern: value };
+                    break;
+                default:
+                    params = {};
+            }
+            copy[index] = { ...copy[index], params };
+            return copy;
+        });
+    }
+    // ── Structured Config ─────────────────────────────────────────────
+    /** @internal Returns the config property schemas for the field's component. */
+    configSchemaFor(field) {
+        return getConfigSchema(field.component());
+    }
+    /** @internal Read a single config value. */
+    configValue(field, key) {
+        return field.config()[key] ?? null;
+    }
+    /** @internal Set a string config value (removes key if empty). */
+    setConfigValue(field, key, value) {
+        field.config.update((cfg) => {
+            const copy = { ...cfg };
+            if (value === "") {
+                delete copy[key];
+            }
+            else {
+                copy[key] = value;
+            }
+            return copy;
+        });
+    }
+    /** @internal Set a numeric config value (removes key if empty/NaN). */
+    setConfigNumber(field, key, raw) {
+        field.config.update((cfg) => {
+            const copy = { ...cfg };
+            const n = parseFloat(raw);
+            if (raw === "" || isNaN(n)) {
+                delete copy[key];
+            }
+            else {
+                copy[key] = n;
+            }
+            return copy;
+        });
+    }
+    /** @internal Set a boolean config value. */
+    setConfigBoolean(field, key, checked) {
+        field.config.update((cfg) => {
+            const copy = { ...cfg };
+            if (!checked) {
+                delete copy[key];
+            }
+            else {
+                copy[key] = true;
+            }
+            return copy;
+        });
+    }
+    /** @internal Normalize select options to SelectOption[] with empty option. */
+    configSelectOptions(prop) {
+        const opts = (prop.options ?? []).map((o) => typeof o === "string" ? { label: o, value: o } : o);
+        return [{ label: "\u2014", value: "" }, ...opts];
+    }
+    /** @internal Open a richtext editor dialog for the given config key. */
+    openRichTextEditor(field, key) {
+        const current = field.config()[key] ?? "";
+        this.modalService
+            .openModal({
+            component: UIRichTextContentDialog,
+            inputs: { initialContent: current },
+            ariaLabel: "Edit rich text content",
+        })
+            .closed.subscribe((result) => {
+            if (result !== undefined) {
+                this.setConfigValue(field, key, result);
+            }
+        });
+    }
+    // ── Extra Config (raw JSON for unknown keys) ──────────────────────
+    /** @internal Whether the field has config keys not covered by the schema. */
+    hasExtraConfig(field) {
+        const schemaKeys = new Set(getConfigSchema(field.component()).map((p) => p.key));
+        return Object.keys(field.config()).some((k) => !schemaKeys.has(k));
+    }
+    /** @internal JSON string of config keys NOT in the structured schema. */
+    extraConfigJSON(field) {
+        const schemaKeys = new Set(getConfigSchema(field.component()).map((p) => p.key));
+        const extra = {};
+        for (const [k, v] of Object.entries(field.config())) {
+            if (!schemaKeys.has(k))
+                extra[k] = v;
+        }
+        return Object.keys(extra).length > 0 ? JSON.stringify(extra, null, 2) : "";
+    }
+    /** @internal Parse and merge extra config JSON back into the field. */
+    onExtraConfigChange(field, event) {
+        const raw = event.target.value.trim();
+        const schemaKeys = new Set(getConfigSchema(field.component()).map((p) => p.key));
+        // Keep all schema-managed keys, replace extra keys
+        const managed = {};
+        for (const [k, v] of Object.entries(field.config())) {
+            if (schemaKeys.has(k))
+                managed[k] = v;
+        }
+        if (!raw) {
+            field.config.set(managed);
+            this.configError.set("");
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            if (typeof parsed === "object" &&
+                parsed !== null &&
+                !Array.isArray(parsed)) {
+                field.config.set({ ...managed, ...parsed });
+                this.configError.set("");
+            }
+            else {
+                this.configError.set("Config must be a JSON object.");
+            }
+        }
+        catch {
+            this.configError.set("Invalid JSON.");
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPropertyInspector, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIPropertyInspector, isStandalone: true, selector: "ui-property-inspector", inputs: { engine: { classPropertyName: "engine", publicName: "engine", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "ui-property-inspector" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "@if (engine().selection(); as sel) {\n  @switch (sel.kind) {\n    @case (\"form\") {\n      <h3 class=\"heading\">Form Properties</h3>\n      <div class=\"section\">\n        <div class=\"label\">\n          ID\n          <ui-input\n            [value]=\"engine().formId()\"\n            (valueChange)=\"engine().formId.set($event)\"\n            ariaLabel=\"Form ID\"\n          />\n        </div>\n\n        <div class=\"label\">\n          Title\n          <ui-input\n            [value]=\"engine().formTitle()\"\n            (valueChange)=\"engine().formTitle.set($event)\"\n            ariaLabel=\"Form title\"\n          />\n        </div>\n\n        <div class=\"label\">\n          Description\n          <ui-input\n            [multiline]=\"true\"\n            [rows]=\"2\"\n            [value]=\"engine().formDescription()\"\n            (valueChange)=\"engine().formDescription.set($event)\"\n            ariaLabel=\"Form description\"\n          />\n        </div>\n      </div>\n    }\n\n    @case (\"group\") {\n      @if (engine().selectedGroup(); as group) {\n        <h3 class=\"heading\">Group Properties</h3>\n        <div class=\"section\">\n          <div class=\"label\">\n            ID\n            <ui-input\n              [value]=\"group.id()\"\n              (valueChange)=\"group.id.set($event)\"\n              ariaLabel=\"Group ID\"\n            />\n          </div>\n\n          <div class=\"label\">\n            Title\n            <ui-input\n              [value]=\"group.title()\"\n              (valueChange)=\"group.title.set($event)\"\n              ariaLabel=\"Group title\"\n            />\n          </div>\n\n          <div class=\"label\">\n            Description\n            <ui-input\n              [multiline]=\"true\"\n              [rows]=\"2\"\n              [value]=\"group.description()\"\n              (valueChange)=\"group.description.set($event)\"\n              ariaLabel=\"Group description\"\n            />\n          </div>\n        </div>\n      }\n    }\n\n    @case (\"field\") {\n      @if (engine().selectedField(); as field) {\n        <h3 class=\"heading\">Field Properties</h3>\n        <div class=\"section\">\n          <div class=\"label\">\n            ID\n            <ui-input\n              [value]=\"field.id()\"\n              (valueChange)=\"field.id.set($event)\"\n              ariaLabel=\"Field ID\"\n            />\n          </div>\n\n          @if (!isFieldFlair(field)) {\n            <div class=\"label\">\n              Title\n              <ui-input\n                [value]=\"field.title()\"\n                (valueChange)=\"field.title.set($event)\"\n                ariaLabel=\"Field title\"\n              />\n            </div>\n\n            <div class=\"label\">\n              Description\n              <ui-input\n                [multiline]=\"true\"\n                [rows]=\"2\"\n                [value]=\"field.description()\"\n                (valueChange)=\"field.description.set($event)\"\n                ariaLabel=\"Field description\"\n              />\n            </div>\n          }\n\n          <div class=\"label\">\n            Component\n            <ui-dropdown-list\n              [options]=\"componentOptions\"\n              [value]=\"field.component()\"\n              (valueChange)=\"field.component.set($event)\"\n              ariaLabel=\"Field component type\"\n            />\n          </div>\n\n          @if (!isFieldFlair(field)) {\n            <div class=\"label\">\n              Default Value\n              <ui-input\n                [value]=\"'' + (field.defaultValue() ?? '')\"\n                (valueChange)=\"field.defaultValue.set($event || null)\"\n                ariaLabel=\"Default value\"\n              />\n            </div>\n          }\n        </div>\n\n        <!-- Options (for select/radio/autocomplete) -->\n        @if (!isFieldFlair(field) && showOptions(field)) {\n          <h4 class=\"subheading\">Options</h4>\n          <div class=\"section\">\n            @for (opt of field.options(); track $index; let i = $index) {\n              <div class=\"pi-option-row\">\n                <ui-input\n                  [value]=\"opt.label\"\n                  (valueChange)=\"updateOption(field, i, 'label', $event)\"\n                  placeholder=\"Label\"\n                  ariaLabel=\"Option label\"\n                />\n                <ui-input\n                  [value]=\"'' + opt.value\"\n                  (valueChange)=\"updateOption(field, i, 'value', $event)\"\n                  placeholder=\"Value\"\n                  ariaLabel=\"Option value\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"icon-btn icon-btn--danger\"\n                  aria-label=\"Remove option\"\n                  (click)=\"removeOption(field, i)\"\n                >\n                  <ui-icon [svg]=\"iconX\" [size]=\"12\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"add-btn\"\n              (click)=\"addOption(field)\"\n            >\n              + Add option\n            </button>\n          </div>\n        }\n\n        <!-- Validation -->\n        @if (!isFieldFlair(field)) {\n          <h4 class=\"subheading\">Validation</h4>\n          <div class=\"section\">\n            @for (\n              rule of field.validation();\n              track $index;\n              let i = $index\n            ) {\n              <div class=\"validation-row\">\n                <ui-dropdown-list\n                  [options]=\"validationTypeOptions\"\n                  [value]=\"rule.type\"\n                  (valueChange)=\"\n                    updateValidationRule(field, i, 'type', $event)\n                  \"\n                  ariaLabel=\"Validation rule type\"\n                />\n\n                @if (ruleHasParam(rule.type)) {\n                  <ui-input\n                    [value]=\"ruleParamValue(rule)\"\n                    (valueChange)=\"\n                      updateValidationParam(field, i, rule.type, $event)\n                    \"\n                    [placeholder]=\"paramPlaceholder(rule.type)\"\n                    ariaLabel=\"Validation parameter\"\n                  />\n                }\n\n                <ui-input\n                  [value]=\"rule.message ?? ''\"\n                  (valueChange)=\"\n                    updateValidationRule(field, i, 'message', $event)\n                  \"\n                  placeholder=\"Error message\"\n                  ariaLabel=\"Validation error message\"\n                />\n\n                <button\n                  type=\"button\"\n                  class=\"icon-btn icon-btn--danger\"\n                  aria-label=\"Remove validation rule\"\n                  (click)=\"removeValidationRule(field, i)\"\n                >\n                  <ui-icon [svg]=\"iconX\" [size]=\"12\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"add-btn\"\n              (click)=\"addValidationRule(field)\"\n            >\n              + Add rule\n            </button>\n          </div>\n        }\n\n        <!-- Config -->\n        @if (configSchemaFor(field).length > 0) {\n          <h4 class=\"subheading\">Config</h4>\n          <div class=\"section\">\n            @for (prop of configSchemaFor(field); track prop.key) {\n              @if (!prop.visibleWhen || prop.visibleWhen(field.config())) {\n                @switch (prop.editor) {\n                  @case (\"text\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-input\n                        [placeholder]=\"prop.placeholder ?? ''\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigValue(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"number\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-input\n                        type=\"number\"\n                        [placeholder]=\"prop.placeholder ?? ''\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigNumber(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"boolean\") {\n                    <ui-checkbox\n                      [checked]=\"!!configValue(field, prop.key)\"\n                      (checkedChange)=\"\n                        setConfigBoolean(field, prop.key, $event)\n                      \"\n                      [ariaLabel]=\"prop.label\"\n                    >\n                      {{ prop.label }}\n                    </ui-checkbox>\n                  }\n\n                  @case (\"select\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-dropdown-list\n                        [options]=\"configSelectOptions(prop)\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigValue(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"richtext\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <button\n                        type=\"button\"\n                        class=\"edit-content-btn\"\n                        (click)=\"openRichTextEditor(field, prop.key)\"\n                      >\n                        <ui-icon [svg]=\"iconEdit\" [size]=\"14\" aria-hidden=\"true\" />\n                        Edit Content\n                      </button>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n\n        <!-- Extra config (raw JSON, for properties not in the schema) -->\n        @if (hasExtraConfig(field)) {\n          <h4 class=\"subheading\">Extra Config (JSON)</h4>\n          <div class=\"section\">\n            <textarea\n              class=\"textarea textarea--mono\"\n              rows=\"3\"\n              aria-label=\"Extra configuration JSON\"\n              aria-describedby=\"pi-config-error\"\n              [attr.aria-invalid]=\"configError() ? 'true' : null\"\n              [value]=\"extraConfigJSON(field)\"\n              (change)=\"onExtraConfigChange(field, $event)\"\n            ></textarea>\n            @if (configError()) {\n              <p class=\"error\" id=\"pi-config-error\" role=\"alert\">\n                {{ configError() }}\n              </p>\n            }\n          </div>\n        }\n      }\n    }\n  }\n} @else {\n  <div class=\"empty\">\n    <p>Select a field, group, or form header to edit its properties.</p>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;padding:12px;overflow-y:auto;min-width:260px;max-width:320px}.heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;opacity:.6}.subheading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px;opacity:.5}.section{display:flex;flex-direction:column;gap:8px}.label{display:flex;flex-direction:column;gap:3px;font-size:.75rem;font-weight:600}.label--row{flex-direction:row;align-items:center;gap:6px;cursor:pointer}.input,.textarea,.select{appearance:none;border-radius:5px;padding:6px 8px;font-size:.8125rem;font-family:inherit}.input:focus,.textarea:focus,.select:focus{outline-offset:-1px}.input--sm,.select--sm{padding:4px 6px;font-size:.75rem}.textarea--mono{font-family:monospace;font-size:.75rem}.pi-option-row,.validation-row{display:flex;gap:4px;align-items:center}.pi-option-row .input{flex:1}.validation-row>*{flex:1;min-width:0}.validation-row .icon-btn{flex:0 0 auto}.icon-btn{appearance:none;border:none;cursor:pointer;font-size:.75rem;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}.add-btn{appearance:none;border-radius:5px;padding:5px 8px;cursor:pointer;font-size:.75rem;font-weight:500}.edit-content-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:.75rem;font-weight:500;font-family:inherit;transition:background-color 80ms ease,color 80ms ease}.error{font-size:.75rem;margin:2px 0 0}.empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8125rem;padding:24px}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "component", type: UIInput, selector: "ui-input", inputs: ["type", "text", "value", "adapter", "placeholder", "disabled", "multiline", "rows", "heightAdjustable", "ariaLabel"], outputs: ["textChange", "valueChange"] }, { kind: "component", type: UIDropdownList, selector: "ui-dropdown-list", inputs: ["options", "placeholder", "disabled", "ariaLabel", "value"], outputs: ["valueChange"] }, { kind: "component", type: UICheckbox, selector: "ui-checkbox", inputs: ["variant", "checked", "disabled", "indeterminate", "ariaLabel"], outputs: ["checkedChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIPropertyInspector, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-property-inspector", standalone: true, imports: [UIIcon, UIInput, UIDropdownList, UICheckbox], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ["surfaceType"] }], host: { class: "ui-property-inspector" }, template: "@if (engine().selection(); as sel) {\n  @switch (sel.kind) {\n    @case (\"form\") {\n      <h3 class=\"heading\">Form Properties</h3>\n      <div class=\"section\">\n        <div class=\"label\">\n          ID\n          <ui-input\n            [value]=\"engine().formId()\"\n            (valueChange)=\"engine().formId.set($event)\"\n            ariaLabel=\"Form ID\"\n          />\n        </div>\n\n        <div class=\"label\">\n          Title\n          <ui-input\n            [value]=\"engine().formTitle()\"\n            (valueChange)=\"engine().formTitle.set($event)\"\n            ariaLabel=\"Form title\"\n          />\n        </div>\n\n        <div class=\"label\">\n          Description\n          <ui-input\n            [multiline]=\"true\"\n            [rows]=\"2\"\n            [value]=\"engine().formDescription()\"\n            (valueChange)=\"engine().formDescription.set($event)\"\n            ariaLabel=\"Form description\"\n          />\n        </div>\n      </div>\n    }\n\n    @case (\"group\") {\n      @if (engine().selectedGroup(); as group) {\n        <h3 class=\"heading\">Group Properties</h3>\n        <div class=\"section\">\n          <div class=\"label\">\n            ID\n            <ui-input\n              [value]=\"group.id()\"\n              (valueChange)=\"group.id.set($event)\"\n              ariaLabel=\"Group ID\"\n            />\n          </div>\n\n          <div class=\"label\">\n            Title\n            <ui-input\n              [value]=\"group.title()\"\n              (valueChange)=\"group.title.set($event)\"\n              ariaLabel=\"Group title\"\n            />\n          </div>\n\n          <div class=\"label\">\n            Description\n            <ui-input\n              [multiline]=\"true\"\n              [rows]=\"2\"\n              [value]=\"group.description()\"\n              (valueChange)=\"group.description.set($event)\"\n              ariaLabel=\"Group description\"\n            />\n          </div>\n        </div>\n      }\n    }\n\n    @case (\"field\") {\n      @if (engine().selectedField(); as field) {\n        <h3 class=\"heading\">Field Properties</h3>\n        <div class=\"section\">\n          <div class=\"label\">\n            ID\n            <ui-input\n              [value]=\"field.id()\"\n              (valueChange)=\"field.id.set($event)\"\n              ariaLabel=\"Field ID\"\n            />\n          </div>\n\n          @if (!isFieldFlair(field)) {\n            <div class=\"label\">\n              Title\n              <ui-input\n                [value]=\"field.title()\"\n                (valueChange)=\"field.title.set($event)\"\n                ariaLabel=\"Field title\"\n              />\n            </div>\n\n            <div class=\"label\">\n              Description\n              <ui-input\n                [multiline]=\"true\"\n                [rows]=\"2\"\n                [value]=\"field.description()\"\n                (valueChange)=\"field.description.set($event)\"\n                ariaLabel=\"Field description\"\n              />\n            </div>\n          }\n\n          <div class=\"label\">\n            Component\n            <ui-dropdown-list\n              [options]=\"componentOptions\"\n              [value]=\"field.component()\"\n              (valueChange)=\"field.component.set($event)\"\n              ariaLabel=\"Field component type\"\n            />\n          </div>\n\n          @if (!isFieldFlair(field)) {\n            <div class=\"label\">\n              Default Value\n              <ui-input\n                [value]=\"'' + (field.defaultValue() ?? '')\"\n                (valueChange)=\"field.defaultValue.set($event || null)\"\n                ariaLabel=\"Default value\"\n              />\n            </div>\n          }\n        </div>\n\n        <!-- Options (for select/radio/autocomplete) -->\n        @if (!isFieldFlair(field) && showOptions(field)) {\n          <h4 class=\"subheading\">Options</h4>\n          <div class=\"section\">\n            @for (opt of field.options(); track $index; let i = $index) {\n              <div class=\"pi-option-row\">\n                <ui-input\n                  [value]=\"opt.label\"\n                  (valueChange)=\"updateOption(field, i, 'label', $event)\"\n                  placeholder=\"Label\"\n                  ariaLabel=\"Option label\"\n                />\n                <ui-input\n                  [value]=\"'' + opt.value\"\n                  (valueChange)=\"updateOption(field, i, 'value', $event)\"\n                  placeholder=\"Value\"\n                  ariaLabel=\"Option value\"\n                />\n                <button\n                  type=\"button\"\n                  class=\"icon-btn icon-btn--danger\"\n                  aria-label=\"Remove option\"\n                  (click)=\"removeOption(field, i)\"\n                >\n                  <ui-icon [svg]=\"iconX\" [size]=\"12\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"add-btn\"\n              (click)=\"addOption(field)\"\n            >\n              + Add option\n            </button>\n          </div>\n        }\n\n        <!-- Validation -->\n        @if (!isFieldFlair(field)) {\n          <h4 class=\"subheading\">Validation</h4>\n          <div class=\"section\">\n            @for (\n              rule of field.validation();\n              track $index;\n              let i = $index\n            ) {\n              <div class=\"validation-row\">\n                <ui-dropdown-list\n                  [options]=\"validationTypeOptions\"\n                  [value]=\"rule.type\"\n                  (valueChange)=\"\n                    updateValidationRule(field, i, 'type', $event)\n                  \"\n                  ariaLabel=\"Validation rule type\"\n                />\n\n                @if (ruleHasParam(rule.type)) {\n                  <ui-input\n                    [value]=\"ruleParamValue(rule)\"\n                    (valueChange)=\"\n                      updateValidationParam(field, i, rule.type, $event)\n                    \"\n                    [placeholder]=\"paramPlaceholder(rule.type)\"\n                    ariaLabel=\"Validation parameter\"\n                  />\n                }\n\n                <ui-input\n                  [value]=\"rule.message ?? ''\"\n                  (valueChange)=\"\n                    updateValidationRule(field, i, 'message', $event)\n                  \"\n                  placeholder=\"Error message\"\n                  ariaLabel=\"Validation error message\"\n                />\n\n                <button\n                  type=\"button\"\n                  class=\"icon-btn icon-btn--danger\"\n                  aria-label=\"Remove validation rule\"\n                  (click)=\"removeValidationRule(field, i)\"\n                >\n                  <ui-icon [svg]=\"iconX\" [size]=\"12\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            }\n            <button\n              type=\"button\"\n              class=\"add-btn\"\n              (click)=\"addValidationRule(field)\"\n            >\n              + Add rule\n            </button>\n          </div>\n        }\n\n        <!-- Config -->\n        @if (configSchemaFor(field).length > 0) {\n          <h4 class=\"subheading\">Config</h4>\n          <div class=\"section\">\n            @for (prop of configSchemaFor(field); track prop.key) {\n              @if (!prop.visibleWhen || prop.visibleWhen(field.config())) {\n                @switch (prop.editor) {\n                  @case (\"text\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-input\n                        [placeholder]=\"prop.placeholder ?? ''\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigValue(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"number\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-input\n                        type=\"number\"\n                        [placeholder]=\"prop.placeholder ?? ''\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigNumber(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"boolean\") {\n                    <ui-checkbox\n                      [checked]=\"!!configValue(field, prop.key)\"\n                      (checkedChange)=\"\n                        setConfigBoolean(field, prop.key, $event)\n                      \"\n                      [ariaLabel]=\"prop.label\"\n                    >\n                      {{ prop.label }}\n                    </ui-checkbox>\n                  }\n\n                  @case (\"select\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <ui-dropdown-list\n                        [options]=\"configSelectOptions(prop)\"\n                        [value]=\"'' + (configValue(field, prop.key) ?? '')\"\n                        (valueChange)=\"\n                          setConfigValue(field, prop.key, $event)\n                        \"\n                        [ariaLabel]=\"prop.label\"\n                      />\n                    </div>\n                  }\n\n                  @case (\"richtext\") {\n                    <div class=\"label\">\n                      {{ prop.label }}\n                      <button\n                        type=\"button\"\n                        class=\"edit-content-btn\"\n                        (click)=\"openRichTextEditor(field, prop.key)\"\n                      >\n                        <ui-icon [svg]=\"iconEdit\" [size]=\"14\" aria-hidden=\"true\" />\n                        Edit Content\n                      </button>\n                    </div>\n                  }\n                }\n              }\n            }\n          </div>\n        }\n\n        <!-- Extra config (raw JSON, for properties not in the schema) -->\n        @if (hasExtraConfig(field)) {\n          <h4 class=\"subheading\">Extra Config (JSON)</h4>\n          <div class=\"section\">\n            <textarea\n              class=\"textarea textarea--mono\"\n              rows=\"3\"\n              aria-label=\"Extra configuration JSON\"\n              aria-describedby=\"pi-config-error\"\n              [attr.aria-invalid]=\"configError() ? 'true' : null\"\n              [value]=\"extraConfigJSON(field)\"\n              (change)=\"onExtraConfigChange(field, $event)\"\n            ></textarea>\n            @if (configError()) {\n              <p class=\"error\" id=\"pi-config-error\" role=\"alert\">\n                {{ configError() }}\n              </p>\n            }\n          </div>\n        }\n      }\n    }\n  }\n} @else {\n  <div class=\"empty\">\n    <p>Select a field, group, or form header to edit its properties.</p>\n  </div>\n}\n", styles: [":host{display:flex;flex-direction:column;padding:12px;overflow-y:auto;min-width:260px;max-width:320px}.heading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;opacity:.6}.subheading{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:16px 0 8px;opacity:.5}.section{display:flex;flex-direction:column;gap:8px}.label{display:flex;flex-direction:column;gap:3px;font-size:.75rem;font-weight:600}.label--row{flex-direction:row;align-items:center;gap:6px;cursor:pointer}.input,.textarea,.select{appearance:none;border-radius:5px;padding:6px 8px;font-size:.8125rem;font-family:inherit}.input:focus,.textarea:focus,.select:focus{outline-offset:-1px}.input--sm,.select--sm{padding:4px 6px;font-size:.75rem}.textarea--mono{font-family:monospace;font-size:.75rem}.pi-option-row,.validation-row{display:flex;gap:4px;align-items:center}.pi-option-row .input{flex:1}.validation-row>*{flex:1;min-width:0}.validation-row .icon-btn{flex:0 0 auto}.icon-btn{appearance:none;border:none;cursor:pointer;font-size:.75rem;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px}.add-btn{appearance:none;border-radius:5px;padding:5px 8px;cursor:pointer;font-size:.75rem;font-weight:500}.edit-content-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:.75rem;font-weight:500;font-family:inherit;transition:background-color 80ms ease,color 80ms ease}.error{font-size:.75rem;margin:2px 0 0}.empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:.8125rem;padding:24px}\n"] }]
+        }], propDecorators: { engine: [{ type: i0.Input, args: [{ isSignal: true, alias: "engine", required: true }] }] } });
+
+// ── UIFormDesigner ──────────────────────────────────────────────────
+/**
+ * Full-featured form designer that lets users visually build
+ * a {@link FormSchema} via a palette + canvas + inspector layout.
+ *
+ * Includes a live preview panel that renders the designed form
+ * using {@link UIForm} and {@link FormEngine}.
+ *
+ * @example
+ * ```html
+ * <ui-form-designer
+ *   [schema]="existingSchema"
+ *   (schemaChange)="onSave($event)"
+ * />
+ * ```
+ */
+class UIFormDesigner {
+    /**
+     * Optional initial schema to load into the designer.
+     * When set, the designer engine imports it on init.
+     */
+    schema = input(null, ...(ngDevMode ? [{ debugName: "schema" }] : []));
+    /** Emitted when the user clicks "Export" — always emits the raw schema. */
+    schemaChange = output();
+    /** @internal Icon SVG for the copy button. */
+    copyIcon = UIIcons.Lucide.Text.Copy;
+    /** @internal Active tab: design, preview, or json. */
+    activeTab = signal("design", ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    /** @internal The designer engine instance. */
+    designerEngine = new FormDesignerEngine();
+    /**
+     * @internal Preview engine — rebuilt whenever the schema changes.
+     * Returns null if the schema has no groups/fields.
+     */
+    previewEngine = computed(() => {
+        const schema = this.designerEngine.schema();
+        const hasFields = schema.groups.some((g) => g.fields.length > 0);
+        if (!hasFields)
+            return null;
+        return new FormEngine(schema);
+    }, ...(ngDevMode ? [{ debugName: "previewEngine" }] : []));
+    /** @internal Live output from the preview engine. */
+    previewOutput = computed(() => {
+        const eng = this.previewEngine();
+        return eng ? eng.output()() : null;
+    }, ...(ngDevMode ? [{ debugName: "previewOutput" }] : []));
+    /** @internal The group uid to add a field to when palette is clicked. */
+    lastGroupUid = null;
+    constructor() {
+        // Load initial schema when the input is set
+        effect(() => {
+            const s = this.schema();
+            if (s) {
+                this.designerEngine.loadSchema(s);
+            }
+        });
+    }
+    /** @internal Handle palette field click — add to first or last-used group. */
+    onFieldRequested(componentKey) {
+        let groups = this.designerEngine.groups();
+        // If there are no groups, create one first
+        if (groups.length === 0) {
+            this.lastGroupUid = this.designerEngine.addGroup();
+            groups = this.designerEngine.groups();
+        }
+        // Find the target group
+        const targetUid = this.lastGroupUid && groups.find((g) => g.uid === this.lastGroupUid)
+            ? this.lastGroupUid
+            : (groups[groups.length - 1]?.uid ?? this.designerEngine.addGroup());
+        this.designerEngine.addField(targetUid, componentKey);
+        this.lastGroupUid = targetUid;
+    }
+    /** @internal Handle "Add field" click within a specific group. */
+    onAddFieldToGroup(groupUid) {
+        // Default to text field — user can change in inspector
+        this.designerEngine.addField(groupUid, "text");
+        this.lastGroupUid = groupUid;
+    }
+    /** @internal Copy the current JSON schema to the clipboard. */
+    onCopyJson() {
+        const json = JSON.stringify(this.designerEngine.schema(), null, 2);
+        navigator.clipboard.writeText(json);
+    }
+    /** @internal Show submitted values in a native dialog. */
+    onPreviewSubmit(values) {
+        const dialog = document.createElement("dialog");
+        dialog.style.cssText =
+            "border:none;border-radius:12px;padding:24px;max-width:min(90vw,560px);" +
+                "max-height:85vh;display:flex;flex-direction:column;background:var(--ui-surface,#fff);" +
+                "color:var(--ui-text,#1d232b);box-shadow:0 8px 32px rgba(0,0,0,0.25);font-family:inherit;";
+        const heading = document.createElement("h2");
+        heading.textContent = "Submitted Values";
+        heading.style.cssText =
+            "margin:0 0 16px;font-size:1.125rem;font-weight:600;";
+        const pre = document.createElement("pre");
+        pre.textContent = JSON.stringify(values, null, 2);
+        pre.style.cssText =
+            "margin:0;padding:12px;border-radius:8px;background:rgba(0,0,0,0.06);" +
+                "font-size:0.8125rem;overflow:auto;flex:1;min-height:200px;white-space:pre-wrap;word-break:break-word;";
+        const footer = document.createElement("div");
+        footer.style.cssText =
+            "display:flex;justify-content:flex-end;margin-top:16px;";
+        const btn = document.createElement("button");
+        btn.textContent = "Close";
+        btn.style.cssText =
+            "appearance:none;border:none;border-radius:8px;padding:8px 20px;" +
+                "font-size:0.875rem;font-weight:600;cursor:pointer;" +
+                "background:var(--theredhead-primary,#3584e4);color:var(--theredhead-on-primary,#fff);";
+        btn.addEventListener("click", () => {
+            dialog.close();
+            dialog.remove();
+        });
+        footer.appendChild(btn);
+        dialog.append(heading, pre, footer);
+        dialog.addEventListener("click", (e) => {
+            if (e.target === dialog) {
+                dialog.close();
+                dialog.remove();
+            }
+        });
+        dialog.addEventListener("close", () => dialog.remove());
+        document.body.appendChild(dialog);
+        dialog.showModal();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormDesigner, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: UIFormDesigner, isStandalone: true, selector: "ui-form-designer", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ui-form-designer" }, hostDirectives: [{ directive: i1.UISurface, inputs: ["surfaceType", "surfaceType"] }], ngImport: i0, template: "<!-- Toolbar -->\n<header class=\"toolbar\">\n  <span class=\"toolbar-title\">Form Designer</span>\n\n  <div\n    class=\"toolbar-actions\"\n    role=\"tablist\"\n    aria-label=\"Designer views\"\n  >\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'design'\"\n      [attr.aria-selected]=\"activeTab() === 'design'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('design')\"\n    >\n      Design\n    </button>\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'preview'\"\n      [attr.aria-selected]=\"activeTab() === 'preview'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('preview')\"\n    >\n      Preview\n    </button>\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'json'\"\n      [attr.aria-selected]=\"activeTab() === 'json'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('json')\"\n    >\n      JSON\n    </button>\n  </div>\n</header>\n\n<!-- Content area -->\n<div\n  class=\"body\"\n  id=\"fd-tabpanel\"\n  role=\"tabpanel\"\n  [attr.aria-label]=\"activeTab() + ' view'\"\n>\n  @switch (activeTab()) {\n    @case (\"design\") {\n      <ui-field-palette\n        class=\"palette\"\n        (fieldRequested)=\"onFieldRequested($event)\"\n      />\n      <ui-designer-canvas\n        class=\"canvas\"\n        [engine]=\"designerEngine\"\n        (addFieldRequest)=\"onAddFieldToGroup($event)\"\n      />\n      <ui-property-inspector\n        class=\"inspector\"\n        [engine]=\"designerEngine\"\n      />\n    }\n\n    @case (\"preview\") {\n      <div class=\"preview\">\n        @if (previewEngine()) {\n          <ui-form\n            [engine]=\"previewEngine()!\"\n            submitLabel=\"Submit (Preview)\"\n            (formSubmit)=\"onPreviewSubmit($event)\"\n          />\n          <div class=\"preview-live\">\n            <h4 class=\"preview-live-heading\">\n              Live output\n              <span\n                class=\"preview-live-badge\"\n                [class.preview-live-badge--valid]=\"\n                  previewEngine()!.valid()\n                \"\n              >\n                {{ previewEngine()!.valid() ? \"\u2713 valid\" : \"\u2717 invalid\" }}\n              </span>\n            </h4>\n            <pre class=\"preview-live-json\">{{\n              previewOutput() | json\n            }}</pre>\n          </div>\n        } @else {\n          <p class=\"preview-empty\">\n            Add some fields to see the preview.\n          </p>\n        }\n      </div>\n    }\n\n    @case (\"json\") {\n      <div class=\"json\">\n        <div class=\"json-header\">\n          <button\n            type=\"button\"\n            class=\"copy-btn\"\n            aria-label=\"Copy JSON to clipboard\"\n            (click)=\"onCopyJson()\"\n          >\n            <ui-icon [svg]=\"copyIcon\" [size]=\"14\" />\n          </button>\n        </div>\n        <pre class=\"json-pre\">{{ designerEngine.schema() | json }}</pre>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-height:500px;border-radius:8px;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px}.toolbar-title{font-weight:700;font-size:.9375rem;margin-right:auto}.toolbar-actions{display:flex;gap:2px;border-radius:6px;padding:2px}.toolbar-btn{appearance:none;border:none;padding:5px 12px;border-radius:4px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .12s ease}.toolbar-btn--active:hover{opacity:.9}.body{display:flex;flex:1;overflow:hidden}.palette{flex:0 0 auto}.canvas{flex:1}.inspector{flex:0 0 auto}.preview{flex:1;padding:24px;overflow-y:auto;max-width:720px;margin:0 auto;width:100%;border-radius:12px}.preview-empty{text-align:center;font-size:.9375rem;padding:48px 16px;font-weight:500}.preview-live{margin-top:20px;padding-top:12px}.preview-live-heading{margin:0 0 4px;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.6;display:flex;align-items:center;gap:8px}.preview-live-badge{font-size:.75rem;font-weight:500;text-transform:none;letter-spacing:0;padding:1px 8px;border-radius:10px}.preview-live-json{margin:0;padding:12px;border-radius:8px;font-size:.8125rem;overflow:auto;max-height:300px}.json{flex:1;padding:16px;overflow:auto}.json-header{display:flex;justify-content:flex-end;margin-bottom:8px}.copy-btn{appearance:none;padding:4px 8px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .12s ease}.json-pre{font-family:monospace;font-size:.8125rem;white-space:pre-wrap;word-break:break-word;margin:0}:host-context(html.dark-theme) .toolbar-btn--active:hover{opacity:.9}@media(prefers-color-scheme:dark){:host-context(html:not(.light-theme):not(.dark-theme)) .toolbar-btn--active:hover{opacity:.9}}\n"], dependencies: [{ kind: "component", type: UIIcon, selector: "ui-icon", inputs: ["svg", "size", "ariaLabel"] }, { kind: "component", type: UIFieldPalette, selector: "ui-field-palette", outputs: ["fieldRequested"] }, { kind: "component", type: UIDesignerCanvas, selector: "ui-designer-canvas", inputs: ["engine"], outputs: ["addFieldRequest"] }, { kind: "component", type: UIPropertyInspector, selector: "ui-property-inspector", inputs: ["engine"] }, { kind: "component", type: UIForm, selector: "ui-form", inputs: ["engine", "submitLabel", "showSubmit", "fieldMinWidth"], outputs: ["formSubmit"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: UIFormDesigner, decorators: [{
+            type: Component,
+            args: [{ selector: "ui-form-designer", standalone: true, imports: [
+                        JsonPipe,
+                        UIIcon,
+                        UIFieldPalette,
+                        UIDesignerCanvas,
+                        UIPropertyInspector,
+                        UIForm,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [{ directive: UISurface, inputs: ['surfaceType'] }], host: { class: "ui-form-designer" }, template: "<!-- Toolbar -->\n<header class=\"toolbar\">\n  <span class=\"toolbar-title\">Form Designer</span>\n\n  <div\n    class=\"toolbar-actions\"\n    role=\"tablist\"\n    aria-label=\"Designer views\"\n  >\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'design'\"\n      [attr.aria-selected]=\"activeTab() === 'design'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('design')\"\n    >\n      Design\n    </button>\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'preview'\"\n      [attr.aria-selected]=\"activeTab() === 'preview'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('preview')\"\n    >\n      Preview\n    </button>\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"toolbar-btn\"\n      [class.toolbar-btn--active]=\"activeTab() === 'json'\"\n      [attr.aria-selected]=\"activeTab() === 'json'\"\n      aria-controls=\"fd-tabpanel\"\n      (click)=\"activeTab.set('json')\"\n    >\n      JSON\n    </button>\n  </div>\n</header>\n\n<!-- Content area -->\n<div\n  class=\"body\"\n  id=\"fd-tabpanel\"\n  role=\"tabpanel\"\n  [attr.aria-label]=\"activeTab() + ' view'\"\n>\n  @switch (activeTab()) {\n    @case (\"design\") {\n      <ui-field-palette\n        class=\"palette\"\n        (fieldRequested)=\"onFieldRequested($event)\"\n      />\n      <ui-designer-canvas\n        class=\"canvas\"\n        [engine]=\"designerEngine\"\n        (addFieldRequest)=\"onAddFieldToGroup($event)\"\n      />\n      <ui-property-inspector\n        class=\"inspector\"\n        [engine]=\"designerEngine\"\n      />\n    }\n\n    @case (\"preview\") {\n      <div class=\"preview\">\n        @if (previewEngine()) {\n          <ui-form\n            [engine]=\"previewEngine()!\"\n            submitLabel=\"Submit (Preview)\"\n            (formSubmit)=\"onPreviewSubmit($event)\"\n          />\n          <div class=\"preview-live\">\n            <h4 class=\"preview-live-heading\">\n              Live output\n              <span\n                class=\"preview-live-badge\"\n                [class.preview-live-badge--valid]=\"\n                  previewEngine()!.valid()\n                \"\n              >\n                {{ previewEngine()!.valid() ? \"\u2713 valid\" : \"\u2717 invalid\" }}\n              </span>\n            </h4>\n            <pre class=\"preview-live-json\">{{\n              previewOutput() | json\n            }}</pre>\n          </div>\n        } @else {\n          <p class=\"preview-empty\">\n            Add some fields to see the preview.\n          </p>\n        }\n      </div>\n    }\n\n    @case (\"json\") {\n      <div class=\"json\">\n        <div class=\"json-header\">\n          <button\n            type=\"button\"\n            class=\"copy-btn\"\n            aria-label=\"Copy JSON to clipboard\"\n            (click)=\"onCopyJson()\"\n          >\n            <ui-icon [svg]=\"copyIcon\" [size]=\"14\" />\n          </button>\n        </div>\n        <pre class=\"json-pre\">{{ designerEngine.schema() | json }}</pre>\n      </div>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;height:100%;min-height:500px;border-radius:8px;overflow:hidden}.toolbar{display:flex;align-items:center;gap:8px;padding:8px 12px}.toolbar-title{font-weight:700;font-size:.9375rem;margin-right:auto}.toolbar-actions{display:flex;gap:2px;border-radius:6px;padding:2px}.toolbar-btn{appearance:none;border:none;padding:5px 12px;border-radius:4px;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .12s ease}.toolbar-btn--active:hover{opacity:.9}.body{display:flex;flex:1;overflow:hidden}.palette{flex:0 0 auto}.canvas{flex:1}.inspector{flex:0 0 auto}.preview{flex:1;padding:24px;overflow-y:auto;max-width:720px;margin:0 auto;width:100%;border-radius:12px}.preview-empty{text-align:center;font-size:.9375rem;padding:48px 16px;font-weight:500}.preview-live{margin-top:20px;padding-top:12px}.preview-live-heading{margin:0 0 4px;font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.6;display:flex;align-items:center;gap:8px}.preview-live-badge{font-size:.75rem;font-weight:500;text-transform:none;letter-spacing:0;padding:1px 8px;border-radius:10px}.preview-live-json{margin:0;padding:12px;border-radius:8px;font-size:.8125rem;overflow:auto;max-height:300px}.json{flex:1;padding:16px;overflow:auto}.json-header{display:flex;justify-content:flex-end;margin-bottom:8px}.copy-btn{appearance:none;padding:4px 8px;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .12s ease}.json-pre{font-family:monospace;font-size:.8125rem;white-space:pre-wrap;word-break:break-word;margin:0}:host-context(html.dark-theme) .toolbar-btn--active:hover{opacity:.9}@media(prefers-color-scheme:dark){:host-context(html:not(.light-theme):not(.dark-theme)) .toolbar-btn--active:hover{opacity:.9}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], schemaChange: [{ type: i0.Output, args: ["schemaChange"] }] } });
+
+// ── Designer barrel ─────────────────────────────────────────────────
+
+/*
+ * Public API Surface of @theredhead/lucid-forms
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularComponentExportStrategy, BUILT_IN_FIELDS, FLAIR_COMPONENTS, FORM_FIELD_REGISTRATIONS, FormDesignerEngine, FormEngine, FormFieldRegistry, JsonExportStrategy, TEXT_ADAPTER_KEYS, UIDesignerCanvas, UIFieldPalette, UIForm, UIFormDesigner, UIFormField, UIFormGroup, UIFormWizard, UIPropertyInspector, evaluateCondition, isConditionGroup, isFlairComponent, provideBuiltInFormFields, provideFormFields, registerCustomValidator, resolveTextAdapter, validate };
+//# sourceMappingURL=theredhead-lucid-forms.mjs.map