@elizaos/ui 2.0.0-alpha.85 → 2.0.0-beta.1

package/dist/components/config-ui/config-renderer.d.ts

@@ -0,0 +1,164 @@
+import React from "react";
+import type { FieldRegistry, FieldRenderer, FieldRenderProps, JsonSchemaObject } from "../../config/config-catalog";
+import type { ConfigUiHint, PluginUiTheme } from "../../types";
+export interface ConfigRendererProps {
+    /** JSON Schema describing the config structure (type: "object"). */
+    schema: JsonSchemaObject | null;
+    /** UI rendering hints keyed by property name. */
+    hints?: Record<string, ConfigUiHint>;
+    /** Current config values keyed by property name. */
+    values?: Record<string, unknown>;
+    /** Which keys currently have values set (for status dots). */
+    setKeys?: Set<string>;
+    /** Field registry (catalog + renderers + action handlers). */
+    registry: FieldRegistry;
+    /** Plugin ID (used for revealing sensitive values via API). */
+    pluginId?: string;
+    /** Callback to reveal a sensitive field's real value. */
+    revealSecret?: (pluginId: string, key: string) => Promise<string | null>;
+    /** Callback when a field value changes. */
+    onChange?: (key: string, value: unknown) => void;
+    /** Render function for each field — receives renderProps and the resolved renderer. */
+    renderField?: (renderProps: FieldRenderProps, renderer: FieldRenderer) => React.ReactNode;
+    /** Show a validation error summary above the form fields when errors exist. Defaults to true. */
+    showValidationSummary?: boolean;
+    /** Partial theme overrides for plugin UI tokens. */
+    theme?: Partial<PluginUiTheme>;
+}
+/** Handle exposed by ConfigRenderer via ref for parent-driven validation. */
+export interface ConfigRendererHandle {
+    /** Run validation on all visible fields. Returns true if the form is valid (no errors). */
+    validateAll: () => boolean;
+}
+export declare const ConfigRenderer: React.ForwardRefExoticComponent<ConfigRendererProps & React.RefAttributes<ConfigRendererHandle>>;
+/** The default registry wiring defaultCatalog → defaultRenderers. */
+export declare const defaultRegistry: FieldRegistry<{
+    text: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    password: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    number: {
+        validator: import("zod").ZodCoercedNumber<unknown>;
+        description: string;
+    };
+    boolean: {
+        validator: import("zod").ZodCoercedBoolean<unknown>;
+        description: string;
+    };
+    url: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    select: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    textarea: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    email: {
+        validator: import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodLiteral<"">]>;
+        description: string;
+    };
+    color: {
+        validator: import("zod").ZodUnion<[import("zod").ZodString, import("zod").ZodLiteral<"">]>;
+        description: string;
+    };
+    radio: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    multiselect: {
+        validator: import("zod").ZodUnion<[import("zod").ZodArray<import("zod").ZodString>, import("zod").ZodString]>;
+        description: string;
+    };
+    date: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    json: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    code: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    array: {
+        validator: import("zod").ZodArray<import("zod").ZodUnknown>;
+        description: string;
+    };
+    keyvalue: {
+        validator: import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>;
+        description: string;
+    };
+    datetime: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    file: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    custom: {
+        validator: import("zod").ZodUnknown;
+        description: string;
+    };
+    markdown: {
+        validator: import("zod").ZodString;
+        description: string;
+    };
+    "checkbox-group": {
+        validator: import("zod").ZodUnion<[import("zod").ZodArray<import("zod").ZodString>, import("zod").ZodString]>;
+        description: string;
+    };
+    group: {
+        validator: import("zod").ZodUnion<[import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodUnknown>, import("zod").ZodString]>;
+        description: string;
+    };
+    table: {
+        validator: import("zod").ZodUnion<[import("zod").ZodArray<import("zod").ZodRecord<import("zod").ZodString, import("zod").ZodString>>, import("zod").ZodString]>;
+        description: string;
+    };
+}, {
+    save: {
+        params: import("zod").ZodObject<{}, import("zod/v4/core").$strip>;
+        description: string;
+    };
+    reset: {
+        params: import("zod").ZodObject<{}, import("zod/v4/core").$strip>;
+        description: string;
+    };
+    testConnection: {
+        params: import("zod").ZodObject<{
+            key: import("zod").ZodOptional<import("zod").ZodString>;
+        }, import("zod/v4/core").$strip>;
+        description: string;
+    };
+}>;
+/**
+ * Convenience hook that creates a ref for ConfigRenderer and exposes
+ * a `validateAll()` function the parent can call before submitting.
+ *
+ * @example
+ * ```tsx
+ * const { configRef, validateAll } = useConfigValidation();
+ *
+ * const handleSave = () => {
+ *   if (!validateAll()) return; // form has errors
+ *   // proceed with save
+ * };
+ *
+ * return <ConfigRenderer ref={configRef} ... />;
+ * ```
+ */
+export declare function useConfigValidation(): {
+    configRef: React.RefObject<ConfigRendererHandle | null>;
+    validateAll: () => boolean;
+};
+//# sourceMappingURL=config-renderer.d.ts.map

package/dist/components/config-ui/config-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-renderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/config-renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAEjB,MAAM,6BAA6B,CAAC;AASrC,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAK/D,MAAM,WAAW,mBAAmB;IAClC,oEAAoE;IACpE,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACrC,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtB,8DAA8D;IAC9D,QAAQ,EAAE,aAAa,CAAC;IACxB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACzE,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uFAAuF;IACvF,WAAW,CAAC,EAAE,CACZ,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EAAE,aAAa,KACpB,KAAK,CAAC,SAAS,CAAC;IACrB,iGAAiG;IACjG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oDAAoD;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CAChC;AAED,6EAA6E;AAC7E,MAAM,WAAW,oBAAoB;IACnC,2FAA2F;IAC3F,WAAW,EAAE,MAAM,OAAO,CAAC;CAC5B;AA2LD,eAAO,MAAM,cAAc,kGAyXzB,CAAC;AAqEH,qEAAqE;AACrE,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAAmD,CAAC;AAIhF;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB;;uBAGG,OAAO;EAM5C"}

package/dist/components/config-ui/config-renderer.js

@@ -0,0 +1,396 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useState, } from "react";
+import { defaultCatalog, defineRegistry, evaluateVisibility, resolveFields, runValidation, } from "../../config/config-catalog.js";
+import { useApp } from "../../state/index.js";
+import { ConfigField } from "./config-field.js";
+// ── Group icons ────────────────────────────────────────────────────────
+const GROUP_ICONS = {
+    // Auth & Security
+    auth: "\u{1F511}",
+    authentication: "\u{1F511}",
+    security: "\u{1F6E1}\uFE0F",
+    permissions: "\u{1F512}",
+    "api keys": "\u{1F511}",
+    // Connection & Network
+    connection: "\u{1F517}",
+    network: "\u{1F310}",
+    api: "\u{1F50C}",
+    webhook: "\u{1F4E1}",
+    // Models & AI
+    models: "\u{1F916}",
+    model: "\u{1F916}",
+    "ai models": "\u{1F916}",
+    "text generation": "\u{1F916}",
+    embeddings: "\u{1F9E0}",
+    // Behavior & Config
+    behavior: "\u2699\uFE0F",
+    configuration: "\u2699\uFE0F",
+    general: "\u2699\uFE0F",
+    defaults: "\u2699\uFE0F",
+    advanced: "\u{1F527}",
+    features: "\u2728",
+    // Time & Scheduling
+    timing: "\u23F1\uFE0F",
+    scheduling: "\u{1F4C5}",
+    // Storage & Data
+    storage: "\u{1F4BE}",
+    bucket: "\u{1F4E6}",
+    paths: "\u{1F4C2}",
+    output: "\u{1F4E4}",
+    repository: "\u{1F4DA}",
+    // Communication
+    messaging: "\u{1F4AC}",
+    channels: "\u{1F4E2}",
+    chatrooms: "\u{1F4AC}",
+    voice: "\u{1F3A4}",
+    speech: "\u{1F3A4}",
+    "speech-to-text": "\u{1F3A4}",
+    // Identity
+    identity: "\u{1F464}",
+    "client identity": "\u{1F464}",
+    session: "\u{1F464}",
+    // Display & Media
+    display: "\u{1F3A8}",
+    media: "\u{1F3AC}",
+    // Notifications
+    notifications: "\u{1F514}",
+    logging: "\u{1F4DD}",
+    // Finance & Trading
+    trading: "\u{1F4C8}",
+    "risk management": "\u{1F6E1}\uFE0F",
+    wallet: "\u{1F4B0}",
+    payment: "\u{1F4B3}",
+    pricing: "\u{1F4B2}",
+    // Blockchain
+    blockchain: "\u26D3\uFE0F",
+    ethereum: "\u26D3\uFE0F",
+    solana: "\u26D3\uFE0F",
+    base: "\u26D3\uFE0F",
+    arbitrum: "\u26D3\uFE0F",
+    bsc: "\u26D3\uFE0F",
+    testnets: "\u{1F9EA}",
+    "dex config": "\u{1F4CA}",
+    // Social
+    posting: "\u{1F4DD}",
+    "x/twitter authentication": "\u{1F511}",
+    "x/twitter behavior": "\u{1F426}",
+    // System
+    limits: "\u{1F4CF}",
+    providers: "\u{1F50C}",
+    commands: "\u2318",
+    actions: "\u26A1",
+    policies: "\u{1F4DC}",
+    autonomy: "\u{1F916}",
+    "background jobs": "\u{1F504}",
+    "workflow connection": "\u{1F517}",
+    app: "\u{1F4F1}",
+};
+function groupIcon(group) {
+    return GROUP_ICONS[group.toLowerCase()] ?? "\u25A0";
+}
+// ── Width → Tailwind column span ───────────────────────────────────────
+function widthClass(width) {
+    switch (width) {
+        case "half":
+            return "col-span-6 sm:col-span-3";
+        case "third":
+            return "col-span-6 sm:col-span-2";
+        default:
+            return "col-span-6";
+    }
+}
+function ValidationSummary({ fieldErrors, fieldLabels, pluginId, }) {
+    const { t } = useApp();
+    const errorEntries = [...fieldErrors.entries()].filter(([, errors]) => errors.length > 0);
+    const totalErrors = errorEntries.length;
+    if (totalErrors === 0)
+        return null;
+    const handleFieldClick = (key) => {
+        const el = document.getElementById(pluginId ? `field-${pluginId}-${key}` : `field-${key}`);
+        if (el) {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+    };
+    return (_jsxs("div", { className: "mb-4 border border-destructive bg-[color-mix(in_srgb,var(--destructive)_6%,transparent)] px-4 py-3 rounded-sm", role: "alert", children: [_jsxs("div", { className: "text-sm font-semibold text-destructive mb-2", children: [totalErrors, " ", totalErrors === 1 ? "field needs" : "fields need", " ", t("config-renderer.attention", { defaultValue: "attention" })] }), _jsx("ul", { className: "list-none m-0 p-0 flex flex-col gap-1", children: errorEntries.map(([key]) => (_jsx("li", { children: _jsxs(Button, { type: "button", variant: "link", className: "text-xs text-destructive p-0 h-auto hover:underline transition-all text-left flex items-center gap-1.5", onClick: () => handleFieldClick(key), children: [_jsx("span", { className: "opacity-60", children: t("config-renderer.Rarr", { defaultValue: "→" }) }), _jsx("span", { children: fieldLabels.get(key) ?? key })] }) }, key))) })] }));
+}
+// ── Theme mapping ──────────────────────────────────────────────────────
+/** Maps PluginUiTheme keys to CSS variable names. */
+const THEME_TO_CSS = {
+    fieldGap: "--plugin-field-gap",
+    groupGap: "--plugin-group-gap",
+    sectionPadding: "--plugin-section-padding",
+    labelSize: "--plugin-label-size",
+    helpSize: "--plugin-help-size",
+    errorSize: "--plugin-error-size",
+    labelColor: "--plugin-label",
+    helpColor: "--plugin-help",
+    errorColor: "--plugin-error",
+    borderColor: "--plugin-border",
+    focusRing: "--plugin-focus-ring",
+    inputHeight: "--plugin-input-height",
+    maxFieldWidth: "--plugin-max-field-width",
+};
+// ── Component ──────────────────────────────────────────────────────────
+export const ConfigRenderer = forwardRef(function ConfigRenderer({ schema, hints = {}, values = {}, setKeys = new Set(), registry, pluginId = "", revealSecret, onChange, renderField: renderFieldOverride, showValidationSummary = true, theme, }, ref) {
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    const [fieldErrors, setFieldErrors] = useState(new Map());
+    // ── Validation pipeline (4 stages) ──────────────────────────────────
+    const validateField = useCallback((field, value) => {
+        const errors = [];
+        // 1. Required check
+        if (field.required && (value == null || value === "")) {
+            errors.push("This field is required.");
+        }
+        // 2. Zod validation
+        if (value != null && value !== "") {
+            const result = registry.catalog.validate(field.fieldType, value);
+            if (!result.success) {
+                errors.push(...result.error.issues.map((i) => i.message));
+            }
+        }
+        // 3. Pattern validation from hints
+        if (field.hint.pattern && typeof value === "string" && value) {
+            try {
+                // Guard against ReDoS: reject overly long or nested-quantifier patterns
+                const pat = field.hint.pattern;
+                if (pat.length <= 200 && !/([+*])\)?[+*]/.test(pat)) {
+                    if (!new RegExp(pat).test(value)) {
+                        errors.push(field.hint.patternError ?? "Invalid format.");
+                    }
+                }
+            }
+            catch {
+                // invalid regex in hint — skip
+            }
+        }
+        // 4. Declarative validation checks (json-render style)
+        if (field.validation) {
+            const checkResult = runValidation(field.validation, value, values, registry.catalog.functions);
+            if (!checkResult.valid) {
+                errors.push(...checkResult.errors);
+            }
+        }
+        return errors;
+    }, [registry, values]);
+    // ── Visibility evaluation ────────────────────────────────────────────
+    const isFieldVisible = useCallback((field) => {
+        // Hidden fields are never visible
+        if (field.hidden)
+            return false;
+        // Rich visibility condition (json-render style) takes priority
+        if (field.visible !== undefined) {
+            return evaluateVisibility(field.visible, values);
+        }
+        return true;
+    }, [values]);
+    // ── Field change handler ─────────────────────────────────────────────
+    const handleFieldChange = useCallback((field, value) => {
+        // Validate and store errors
+        const errors = validateField(field, value);
+        setFieldErrors((prev) => {
+            const next = new Map(prev);
+            if (errors.length > 0) {
+                next.set(field.key, errors);
+            }
+            else {
+                next.delete(field.key);
+            }
+            return next;
+        });
+        onChange?.(field.key, value);
+    }, [validateField, onChange]);
+    // ── Action execution ─────────────────────────────────────────────────
+    const executeAction = useCallback(async (action, params) => {
+        const handler = registry.resolveAction(action);
+        if (!handler) {
+            console.warn(`[config-renderer] No handler for action: ${action}`);
+            return undefined;
+        }
+        return handler(params ?? {}, values);
+    }, [registry, values]);
+    // ── Build render props for a field ───────────────────────────────────
+    const buildRenderProps = useCallback((field) => {
+        const isSensitive = field.hint.sensitive === true;
+        return {
+            key: field.key,
+            value: values[field.key],
+            schema: field.schema,
+            hint: field.hint,
+            fieldType: field.fieldType,
+            onChange: (value) => handleFieldChange(field, value),
+            isSet: setKeys.has(field.key),
+            required: field.required,
+            errors: fieldErrors.get(field.key),
+            readonly: field.readonly,
+            onReveal: isSensitive && revealSecret && pluginId
+                ? () => revealSecret(pluginId, field.key)
+                : undefined,
+            onAction: (action, params) => executeAction(action, params),
+        };
+    }, [
+        values,
+        setKeys,
+        fieldErrors,
+        handleFieldChange,
+        revealSecret,
+        pluginId,
+        executeAction,
+    ]);
+    // ── Render a single field ────────────────────────────────────────────
+    const renderField = useCallback((field) => {
+        const rp = buildRenderProps(field);
+        const renderer = registry.resolveOrFallback(field.fieldType);
+        if (renderFieldOverride) {
+            return (_jsx("div", { className: widthClass(field.width), children: renderFieldOverride(rp, renderer) }, field.key));
+        }
+        return (_jsx("div", { className: widthClass(field.width), children: _jsx(ConfigField, { renderProps: rp, renderer: renderer, pluginId: pluginId }) }, field.key));
+    }, [buildRenderProps, registry, renderFieldOverride, pluginId]);
+    // ── Resolve and partition fields ─────────────────────────────────────
+    const { groups, advanced, showHeaders, allVisibleFields } = useMemo(() => {
+        if (!schema)
+            return {
+                groups: new Map(),
+                advanced: [],
+                showHeaders: false,
+                allVisibleFields: [],
+            };
+        const catalog = registry.catalog;
+        const allFields = resolveFields(schema, hints, catalog);
+        // Filter: hidden fields, showIf + rich visibility conditions
+        const visibleFields = allFields.filter(isFieldVisible);
+        const generalFields = visibleFields.filter((f) => !f.advanced);
+        const advancedFields = visibleFields.filter((f) => f.advanced);
+        // Group general fields, sort required-unconfigured to the top within each group.
+        // Use setKeys (server-persisted state) instead of live `values` to decide
+        // emptiness — otherwise typing into a field causes it to jump position
+        // mid-keystroke as it transitions from "empty required" to "filled required".
+        const fieldGroups = new Map();
+        for (const f of generalFields) {
+            const g = fieldGroups.get(f.group) ?? [];
+            g.push(f);
+            fieldGroups.set(f.group, g);
+        }
+        for (const [, fields] of fieldGroups) {
+            fields.sort((a, b) => {
+                const aEmpty = a.required && !setKeys.has(a.key);
+                const bEmpty = b.required && !setKeys.has(b.key);
+                if (aEmpty && !bEmpty)
+                    return -1;
+                if (!aEmpty && bEmpty)
+                    return 1;
+                return (a.hint.order ?? 999) - (b.hint.order ?? 999);
+            });
+        }
+        return {
+            groups: fieldGroups,
+            advanced: advancedFields,
+            showHeaders: fieldGroups.size > 1,
+            allVisibleFields: visibleFields,
+        };
+    }, [schema, hints, registry, isFieldVisible, setKeys]);
+    // ── Field labels for validation summary ────────────────────────────
+    const fieldLabels = useMemo(() => {
+        const labels = new Map();
+        for (const field of allVisibleFields) {
+            labels.set(field.key, field.hint.label ?? field.key);
+        }
+        return labels;
+    }, [allVisibleFields]);
+    // ── Validate all visible fields ────────────────────────────────────
+    const validateAll = useCallback(() => {
+        const nextErrors = new Map();
+        for (const field of allVisibleFields) {
+            const errors = validateField(field, values[field.key]);
+            if (errors.length > 0) {
+                nextErrors.set(field.key, errors);
+            }
+        }
+        setFieldErrors(nextErrors);
+        return nextErrors.size === 0;
+    }, [allVisibleFields, validateField, values]);
+    // ── Expose validateAll to parent via ref ───────────────────────────
+    useImperativeHandle(ref, () => ({ validateAll }), [validateAll]);
+    // ── Configuration progress ─────────────────────────────────────────
+    const configProgress = useMemo(() => {
+        const total = allVisibleFields.length;
+        if (total === 0)
+            return null;
+        const isConfigured = (f) => {
+            if (setKeys.has(f.key))
+                return true;
+            const v = values[f.key];
+            return v != null && v !== "";
+        };
+        const configured = allVisibleFields.filter(isConfigured).length;
+        const requiredTotal = allVisibleFields.filter((f) => f.required).length;
+        const requiredSet = allVisibleFields.filter((f) => f.required && isConfigured(f)).length;
+        return { total, configured, requiredTotal, requiredSet };
+    }, [allVisibleFields, values, setKeys]);
+    // ── Theme style ────────────────────────────────────────────────────
+    const themeStyle = useMemo(() => {
+        if (!theme)
+            return undefined;
+        const style = {};
+        for (const [key, value] of Object.entries(theme)) {
+            const cssVar = THEME_TO_CSS[key];
+            if (cssVar && value) {
+                style[cssVar] = value;
+            }
+        }
+        return Object.keys(style).length > 0 ? style : undefined;
+    }, [theme]);
+    // ── useApp for i18n ─────────────────────────────────────────────────
+    const { t: tFn } = useApp();
+    // ── Empty state ──────────────────────────────────────────────────────
+    if (!schema) {
+        return (_jsx("div", { className: "text-xs text-muted italic py-3", children: tFn("config-renderer.NoSchemaProvided") }));
+    }
+    // ── Render ───────────────────────────────────────────────────────────
+    return (_jsxs("div", { style: themeStyle, children: [configProgress &&
+                configProgress.requiredTotal > 0 &&
+                configProgress.requiredSet < configProgress.requiredTotal && (_jsxs("div", { className: "mb-4 px-3.5 py-2.5 border border-[var(--warning,#f39c12)] bg-[color-mix(in_srgb,var(--warning,#f39c12)_6%,transparent)] rounded-sm", children: [_jsx(ConfigProgressText, { configProgress: configProgress }), _jsx("div", { className: "w-full h-1.5 bg-border rounded-full overflow-hidden", children: _jsx("div", { className: "h-full bg-[var(--warning,#f39c12)] rounded-full transition-all duration-300", style: {
+                                width: `${(configProgress.requiredSet / configProgress.requiredTotal) * 100}%`,
+                            } }) })] })), showValidationSummary && fieldErrors.size > 0 ? (_jsx(ValidationSummary, { fieldErrors: fieldErrors, fieldLabels: fieldLabels, pluginId: pluginId })) : null, [...groups.entries()].map(([group, fields], groupIndex) => (_jsxs("div", { className: groupIndex > 0 ? "mt-5" : "", children: [showHeaders && (_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("span", { className: "text-base leading-none", children: groupIcon(group) }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-txt opacity-70", children: group }), _jsx("span", { className: "flex-1 h-px bg-border ml-1" })] })), _jsx("div", { className: "grid grid-cols-6 gap-x-5 gap-y-0", children: fields.map((f) => renderField(f)) })] }, group))), advanced.length > 0 && (_jsxs("div", { className: "mt-5 pt-4", children: [_jsx(AdvancedSectionToggle, { advanced: advanced, advancedOpen: advancedOpen, setAdvancedOpen: setAdvancedOpen }), advancedOpen && (_jsx("div", { className: "grid grid-cols-6 gap-x-5 gap-y-0 pt-1 animate-[cr-slide_var(--duration-normal,200ms)_ease]", children: advanced.map((f) => renderField(f)) }))] }))] }));
+});
+function ConfigProgressText({ configProgress, }) {
+    const { t } = useApp();
+    return (_jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [_jsxs("span", { className: "text-xs font-semibold text-[var(--warning,#f39c12)]", children: [configProgress.requiredSet, "/", configProgress.requiredTotal, " ", t("config-renderer.requiredFieldsConf", {
+                        defaultValue: "required fields configured",
+                    })] }), _jsxs("span", { className: "text-xs-tight text-muted", children: [configProgress.configured, "/", configProgress.total, " ", t("config-renderer.total", { defaultValue: "total" })] })] }));
+}
+function AdvancedSectionToggle({ advanced, advancedOpen, setAdvancedOpen, }) {
+    const { t } = useApp();
+    return (_jsxs(Button, { type: "button", variant: "ghost", className: "flex items-center gap-2 cursor-pointer select-none group mb-3 p-0 h-auto", onClick: () => setAdvancedOpen((prev) => !prev), children: [_jsx("span", { className: "inline-block text-2xs text-muted transition-transform duration-200 group-hover:text-txt", style: { transform: advancedOpen ? "rotate(90deg)" : "none" }, children: "\u25B6" }), _jsx("span", { className: "text-xs font-bold uppercase tracking-wider text-muted group-hover:text-txt transition-colors", children: t("nav.advanced", { defaultValue: "Advanced" }) }), _jsx("span", { className: "inline-flex items-center justify-center min-w-[18px] h-[18px] px-1.5 text-2xs font-bold bg-[var(--accent-subtle,rgba(255,255,255,0.05))] text-accent border border-border rounded-sm", children: advanced.length }), _jsx("span", { className: "flex-1 h-px bg-border opacity-50 ml-1" })] }));
+}
+// ── Default registry ───────────────────────────────────────────────────
+import { Button } from "@elizaos/ui";
+// Import actual field renderers
+import { defaultRenderers } from "./config-field.js";
+/** The default registry wiring defaultCatalog → defaultRenderers. */
+export const defaultRegistry = defineRegistry(defaultCatalog, defaultRenderers);
+// ── useConfigValidation hook ────────────────────────────────────────────
+/**
+ * Convenience hook that creates a ref for ConfigRenderer and exposes
+ * a `validateAll()` function the parent can call before submitting.
+ *
+ * @example
+ * ```tsx
+ * const { configRef, validateAll } = useConfigValidation();
+ *
+ * const handleSave = () => {
+ *   if (!validateAll()) return; // form has errors
+ *   // proceed with save
+ * };
+ *
+ * return <ConfigRenderer ref={configRef} ... />;
+ * ```
+ */
+export function useConfigValidation() {
+    const configRef = React.useRef(null);
+    const validateAll = useCallback(() => {
+        if (!configRef.current)
+            return true;
+        return configRef.current.validateAll();
+    }, []);
+    return { configRef, validateAll };
+}

package/dist/components/config-ui/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./config-control-primitives";
+export * from "./config-field";
+export * from "./config-renderer";
+export { evaluateUiVisibility, getSupportedComponents, runValidation as runUiValidation, sanitizeLinkHref, UiRenderer, type UiRendererProps, } from "./ui-renderer";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/config-ui/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EACL,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,IAAI,eAAe,EAChC,gBAAgB,EAChB,UAAU,EACV,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC"}

package/dist/components/config-ui/index.js

@@ -0,0 +1,4 @@
+export * from "./config-control-primitives.js";
+export * from "./config-field.js";
+export * from "./config-renderer.js";
+export { evaluateUiVisibility, getSupportedComponents, runValidation as runUiValidation, sanitizeLinkHref, UiRenderer, } from "./ui-renderer.js";

package/dist/components/config-ui/ui-renderer.d.ts

@@ -0,0 +1,15 @@
+import type { AuthState, UiSpec, UiSpecValidationCheck, UiSpecVisibilityCondition } from "../../config/ui-spec";
+export declare function evaluateUiVisibility(condition: UiSpecVisibilityCondition | undefined, state: Record<string, unknown>, auth?: AuthState): boolean;
+export declare function sanitizeLinkHref(href: unknown): string;
+export declare function runValidation(checks: UiSpecValidationCheck[], value: unknown, customValidators?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean | Promise<boolean>>): string[];
+export interface UiRendererProps {
+    spec: UiSpec;
+    onAction?: (action: string, params?: Record<string, unknown>) => void;
+    loading?: boolean;
+    auth?: AuthState;
+    validators?: Record<string, (value: unknown, args?: Record<string, unknown>) => boolean | Promise<boolean>>;
+}
+export declare function UiRenderer({ spec, onAction, loading, auth, validators, }: UiRendererProps): import("react/jsx-runtime").JSX.Element;
+/** Get the full list of supported component types. */
+export declare function getSupportedComponents(): string[];
+//# sourceMappingURL=ui-renderer.d.ts.map

package/dist/components/config-ui/ui-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-renderer.d.ts","sourceRoot":"","sources":["../../../../../../src/components/config-ui/ui-renderer.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EACV,SAAS,EAKT,MAAM,EACN,qBAAqB,EACrB,yBAAyB,EAC1B,MAAM,sBAAsB,CAAC;AA+G9B,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,yBAAyB,GAAG,SAAS,EAChD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9B,IAAI,CAAC,EAAE,SAAS,GACf,OAAO,CAqDT;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CA0BtD;AA+BD,wBAAgB,aAAa,CAC3B,MAAM,EAAE,qBAAqB,EAAE,EAC/B,KAAK,EAAE,OAAO,EACd,gBAAgB,CAAC,EAAE,MAAM,CACvB,MAAM,EACN,CACE,KAAK,EAAE,OAAO,EACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAChC,GACA,MAAM,EAAE,CAWV;AA63CD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CACjB,MAAM,EACN,CACE,KAAK,EAAE,OAAO,EACd,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAChC,CAAC;CACH;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,UAAU,GACX,EAAE,eAAe,2CAsEjB;AAED,sDAAsD;AACtD,wBAAgB,sBAAsB,IAAI,MAAM,EAAE,CAEjD"}