@dusted/anqst 1.0.1 → 1.5.0

package/dist/src/emit.js

@@ -13,6 +13,7 @@ const node_path_1 = __importDefault(require("node:path"));
 const typescript_1 = __importDefault(require("typescript"));
 const pngjs_1 = require("pngjs");
 const layout_1 = require("./layout");
+const structured_top_level_codecs_1 = require("./structured-top-level-codecs");
 function stripAnQstType(typeText) {
     return typeText
         .replace(/\bAnQst\.Type\.stringArray\b/g, "string[]")
@@ -22,6 +23,27 @@ function stripAnQstType(typeText) {
         .replace(/\bAnQst\.Type\.quint64\b/g, "bigint")
         .replace(/\bAnQst\.Type\.qint32\b/g, "number")
         .replace(/\bAnQst\.Type\.quint32\b/g, "number")
+        .replace(/\bAnQst\.Type\.qint16\b/g, "number")
+        .replace(/\bAnQst\.Type\.quint16\b/g, "number")
+        .replace(/\bAnQst\.Type\.qint8\b/g, "number")
+        .replace(/\bAnQst\.Type\.quint8\b/g, "number")
+        .replace(/\bAnQst\.Type\.int32\b/g, "number")
+        .replace(/\bAnQst\.Type\.uint32\b/g, "number")
+        .replace(/\bAnQst\.Type\.int16\b/g, "number")
+        .replace(/\bAnQst\.Type\.uint16\b/g, "number")
+        .replace(/\bAnQst\.Type\.int8\b/g, "number")
+        .replace(/\bAnQst\.Type\.uint8\b/g, "number")
+        .replace(/\bAnQst\.Type\.buffer\b/g, "ArrayBuffer")
+        .replace(/\bAnQst\.Type\.blob\b/g, "ArrayBuffer")
+        .replace(/\bAnQst\.Type\.typedArray\b/g, "Uint8Array")
+        .replace(/\bAnQst\.Type\.uint8Array\b/g, "Uint8Array")
+        .replace(/\bAnQst\.Type\.int8Array\b/g, "Int8Array")
+        .replace(/\bAnQst\.Type\.uint16Array\b/g, "Uint16Array")
+        .replace(/\bAnQst\.Type\.int16Array\b/g, "Int16Array")
+        .replace(/\bAnQst\.Type\.uint32Array\b/g, "Uint32Array")
+        .replace(/\bAnQst\.Type\.int32Array\b/g, "Int32Array")
+        .replace(/\bAnQst\.Type\.float32Array\b/g, "Float32Array")
+        .replace(/\bAnQst\.Type\.float64Array\b/g, "Float64Array")
         .replace(/\bAnQst\.Type\.object\b/g, "object")
         .replace(/\bAnQst\.Type\.json\b/g, "object");
 }
@@ -31,6 +53,36 @@ function splitGeneric(typeText) {
         return null;
     return { name: m[1], arg: m[2].trim() };
 }
+function filterNullishUnionTypeNodes(types) {
+    return types.filter((part) => part.kind !== typescript_1.default.SyntaxKind.NullKeyword && part.kind !== typescript_1.default.SyntaxKind.UndefinedKeyword);
+}
+function isStringLikeUnionTypeNode(node) {
+    return node.types.every((part) => {
+        if (typescript_1.default.isLiteralTypeNode(part) && typescript_1.default.isStringLiteral(part.literal))
+            return true;
+        if (part.kind === typescript_1.default.SyntaxKind.StringKeyword)
+            return true;
+        return false;
+    });
+}
+function isBooleanLikeUnionTypeNode(node) {
+    return node.types.every((part) => {
+        if (typescript_1.default.isLiteralTypeNode(part) && (part.literal.kind === typescript_1.default.SyntaxKind.TrueKeyword || part.literal.kind === typescript_1.default.SyntaxKind.FalseKeyword))
+            return true;
+        if (part.kind === typescript_1.default.SyntaxKind.BooleanKeyword)
+            return true;
+        return false;
+    });
+}
+function isNumberLikeUnionTypeNode(node) {
+    return node.types.every((part) => {
+        if (typescript_1.default.isLiteralTypeNode(part) && typescript_1.default.isNumericLiteral(part.literal))
+            return true;
+        if (part.kind === typescript_1.default.SyntaxKind.NumberKeyword || part.kind === typescript_1.default.SyntaxKind.BigIntKeyword)
+            return true;
+        return false;
+    });
+}
 function mapTsTypeToCpp(typeText) {
     const raw = typeText.trim();
     if (/\bAnQst\.Type\.qint64\b/.test(raw))
@@ -55,6 +107,9 @@ function mapTsTypeToCpp(typeText) {
         return "QString";
     if (/\bAnQst\.Type\.json\b/.test(raw) || /\bAnQst\.Type\.object\b/.test(raw))
         return "QVariantMap";
+    if (/\bAnQst\.Type\.(?:buffer|blob|typedArray|uint8Array|int8Array|uint16Array|int16Array|uint32Array|int32Array|float32Array|float64Array)\b/.test(raw)) {
+        return "QByteArray";
+    }
     if (/\bAnQst\.Type\.(u?int(8|16|32))\b/.test(raw)) {
         const narrowed = raw.match(/\bAnQst\.Type\.(u?int(?:8|16|32))\b/)?.[1];
         if (narrowed === "int8")
@@ -83,6 +138,20 @@ function mapTsTypeToCpp(typeText) {
         return "void";
     if (t === "object")
         return "QVariantMap";
+    if (t === "ArrayBuffer")
+        return "QByteArray";
+    if ([
+        "Uint8Array",
+        "Int8Array",
+        "Uint16Array",
+        "Int16Array",
+        "Uint32Array",
+        "Int32Array",
+        "Float32Array",
+        "Float64Array"
+    ].includes(t)) {
+        return "QByteArray";
+    }
     if (t.endsWith("[]")) {
         return `QList<${mapTsTypeToCpp(t.slice(0, -2))}>`;
     }
@@ -117,6 +186,8 @@ function variantToCppExpression(cppType, expr) {
         return `${expr}.toStringList()`;
     if (cppType === "QVariantMap")
         return `${expr}.toMap()`;
+    if (cppType === "QByteArray")
+        return `${expr}.toByteArray()`;
     if (cppType === "double")
         return `${expr}.toDouble()`;
     if (cppType === "bool")
@@ -140,6 +211,7 @@ function cppToVariantExpression(cppType, expr) {
     if (cppType === "QString" ||
         cppType === "QStringList" ||
         cppType === "QVariantMap" ||
+        cppType === "QByteArray" ||
         cppType === "double" ||
         cppType === "bool" ||
         cppType === "qint64" ||
@@ -398,6 +470,7 @@ class CppTypeNormalizer {
         this.seedOrder = [];
         this.allKnownNames = new Set();
         this.usedNames = new Set();
+        this.syntheticNameByKey = new Map();
         for (const decl of collectStructDecls(spec)) {
             this.allKnownNames.add(decl.name);
             this.usedNames.add(decl.name);
@@ -459,6 +532,16 @@ class CppTypeNormalizer {
             return this.mapTypeNode(typeNode.type, nameHintParts, deps);
         }
         if (typescript_1.default.isUnionTypeNode(typeNode)) {
+            const filtered = filterNullishUnionTypeNodes(typeNode.types);
+            if (filtered.length === 1) {
+                return this.mapTypeNode(filtered[0], nameHintParts, deps);
+            }
+            if (isStringLikeUnionTypeNode(typeNode))
+                return "QString";
+            if (isBooleanLikeUnionTypeNode(typeNode))
+                return "bool";
+            if (isNumberLikeUnionTypeNode(typeNode))
+                return "double";
             return "QString";
         }
         if (typescript_1.default.isTypeLiteralNode(typeNode)) {
@@ -506,7 +589,14 @@ class CppTypeNormalizer {
     }
     ensureSyntheticStruct(typeNode, nameHintParts, deps) {
         const baseName = this.makeSyntheticBaseName(nameHintParts);
+        const syntheticKey = `${baseName}::${typeNode.getText()}`;
+        const existingName = this.syntheticNameByKey.get(syntheticKey);
+        if (existingName) {
+            deps.add(existingName);
+            return existingName;
+        }
         const synthesizedName = this.allocateUniqueName(baseName);
+        this.syntheticNameByKey.set(syntheticKey, synthesizedName);
         if (this.declMap.has(synthesizedName)) {
             deps.add(synthesizedName);
             return synthesizedName;
@@ -647,6 +737,29 @@ function collectDragDropMimeConstants(spec) {
     }
     return constants;
 }
+function collectDragDropPayloadHelpers(spec, cppTypes, cppCodecCatalog) {
+    const seen = new Set();
+    const helpers = [];
+    for (const service of spec.services) {
+        for (const member of service.members) {
+            if ((member.kind !== "DropTarget" && member.kind !== "HoverTarget") || !member.payloadTypeText)
+                continue;
+            const typeName = member.payloadTypeText.replace(/\s/g, "");
+            if (seen.has(typeName))
+                continue;
+            seen.add(typeName);
+            const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
+            if (!payloadSite)
+                continue;
+            helpers.push({
+                typeName,
+                cppType: cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]),
+                codecId: payloadSite.codecId
+            });
+        }
+    }
+    return helpers;
+}
 function renderTypesHeader(spec, cppTypes) {
     const decls = cppTypes.orderedDecls.map(renderCppDecl).join("\n\n");
     const metatypes = cppTypes.structNames
@@ -663,6 +776,7 @@ function renderTypesHeader(spec, cppTypes) {
     return `#pragma once
 #include <QString>
 #include <QStringList>
+#include <QByteArray>
 #include <QList>
 #include <QVariantMap>
 #include <QMetaType>
@@ -687,6 +801,8 @@ function renderWidgetUmbrellaHeader(spec) {
 }
 function renderWidgetHeader(spec, cppTypes) {
     const widgetClassName = `${spec.widgetName}Widget`;
+    const cppCodecCatalog = (0, structured_top_level_codecs_1.buildStructuredCodecCatalog)(spec);
+    const dragDropPayloadHelpers = collectDragDropPayloadHelpers(spec, cppTypes, cppCodecCatalog);
     const callbackAliases = [];
     const publicMethods = [];
     const slotMethods = [];
@@ -696,6 +812,10 @@ function renderWidgetHeader(spec, cppTypes) {
     const properties = [];
     const fields = [];
     const publicSlots = [];
+    const dragDropHelperMethods = dragDropPayloadHelpers.flatMap((helper) => [
+        `static QByteArray encodeDragDropPayload_${helper.typeName}(const ${helper.cppType}& payload);`,
+        `static std::optional<${helper.cppType}> decodeDragDropPayload_${helper.typeName}(const QByteArray& rawPayload);`
+    ]);
     const bindings = [];
     for (const service of spec.services) {
         for (const member of service.members) {
@@ -747,6 +867,7 @@ function renderWidgetHeader(spec, cppTypes) {
         }
     }
     return `#pragma once
+#include <QByteArray>
 #include <QDateTime>
 #include <QHash>
 #include <QMetaMethod>
@@ -754,6 +875,7 @@ function renderWidgetHeader(spec, cppTypes) {
 #include <QVariant>
 #include <QVariantList>
 #include <functional>
+#include <optional>
 #include "AnQstWebHostBase.h"
 #include "${spec.widgetName}Types.h"
 
@@ -784,6 +906,7 @@ ${handleMethods.join("\n")}
     static constexpr const char* kBootstrapContentRoot = "qrc:/${spec.widgetName.toLowerCase()}";
     static constexpr const char* kBootstrapBridgeObject = "${spec.widgetName}Bridge";
     static constexpr int kMaxQueuedCallsPerEndpoint = 1024;
+${dragDropHelperMethods.map((s) => `    ${s}`).join("\n")}
 
     handle handle;
 ${publicMethods.map((s) => `    ${s}`).join("\n")}
@@ -836,13 +959,22 @@ ${fields.map((f) => `    ${f}`).join("\n")}
 }
 function renderCppStub(spec, cppTypes) {
     const widgetClassName = `${spec.widgetName}Widget`;
+    const cppCodecCatalog = (0, structured_top_level_codecs_1.buildStructuredCodecCatalog)(spec);
+    const dragDropPayloadHelpers = collectDragDropPayloadHelpers(spec, cppTypes, cppCodecCatalog);
+    const cppCodecHelpers = (0, structured_top_level_codecs_1.renderCppStructuredCodecHelpers)(cppCodecCatalog, (typeText, pathHintParts) => cppTypes.mapTypeText(typeText, pathHintParts)).trim();
     const lines = [];
     lines.push(`#include "include/${spec.widgetName}Widget.h"`);
     lines.push(`#include <QDebug>`);
     lines.push(`#include <QElapsedTimer>`);
     lines.push(`#include <QEventLoop>`);
+    lines.push(`#include <QJsonArray>`);
+    lines.push(`#include <QJsonDocument>`);
     lines.push(`#include <QMetaType>`);
     lines.push(`#include <QTimer>`);
+    lines.push(`#include <cstring>`);
+    lines.push(`#include <cstdint>`);
+    lines.push(`#include <string>`);
+    lines.push(`#include <vector>`);
     lines.push(`#include <stdexcept>`);
     lines.push("");
     lines.push(`using namespace ${spec.widgetName};`);
@@ -860,8 +992,31 @@ function renderCppStub(spec, cppTypes) {
     lines.push("    }();");
     lines.push("    Q_UNUSED(registered);");
     lines.push("}");
+    if (cppCodecHelpers.length > 0) {
+        lines.push("");
+        lines.push(cppCodecHelpers);
+    }
     lines.push("}");
     lines.push("");
+    for (const helper of dragDropPayloadHelpers) {
+        lines.push(`QByteArray ${widgetClassName}::encodeDragDropPayload_${helper.typeName}(const ${helper.cppType}& payload) {`);
+        lines.push(`    return QJsonDocument::fromVariant(anqstNormalizeWireItems(encode${helper.codecId}(payload))).toJson(QJsonDocument::Compact);`);
+        lines.push(`}`);
+        lines.push("");
+        lines.push(`std::optional<${helper.cppType}> ${widgetClassName}::decodeDragDropPayload_${helper.typeName}(const QByteArray& rawPayload) {`);
+        lines.push(`    QJsonParseError parseError;`);
+        lines.push(`    const QJsonDocument document = QJsonDocument::fromJson(rawPayload, &parseError);`);
+        lines.push(`    if (parseError.error != QJsonParseError::NoError || !document.isArray()) {`);
+        lines.push(`        return std::nullopt;`);
+        lines.push(`    }`);
+        lines.push(`    try {`);
+        lines.push(`        return decode${helper.codecId}(document.array().toVariantList());`);
+        lines.push(`    } catch (...) {`);
+        lines.push(`        return std::nullopt;`);
+        lines.push(`    }`);
+        lines.push(`}`);
+        lines.push("");
+    }
     for (const service of spec.services) {
         for (const member of service.members) {
             if (member.kind !== "Call" || !member.payloadTypeText)
@@ -912,17 +1067,19 @@ function renderCppStub(spec, cppTypes) {
         for (const member of service.members) {
             if (member.kind === "DropTarget" && member.payloadTypeText) {
                 const cppType = cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]);
+                const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
                 lines.push(`    QObject::connect(this, &AnQstWebHostBase::anQstBridge_dropReceived, this, [this](const QString& service, const QString& member, const QVariant& payload, double x, double y) {`);
                 lines.push(`        if (service == QStringLiteral("${service.name}") && member == QStringLiteral("${member.name}")) {`);
-                lines.push(`            emit ${member.name}(payload.value<${cppType}>(), x, y);`);
+                lines.push(`            emit ${member.name}(${payloadSite ? `decode${payloadSite.codecId}(payload)` : `payload.value<${cppType}>()`}, x, y);`);
                 lines.push(`        }`);
                 lines.push(`    });`);
             }
             else if (member.kind === "HoverTarget" && member.payloadTypeText) {
                 const cppType = cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]);
+                const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
                 lines.push(`    QObject::connect(this, &AnQstWebHostBase::anQstBridge_hoverUpdated, this, [this](const QString& service, const QString& member, const QVariant& payload, double x, double y) {`);
                 lines.push(`        if (service == QStringLiteral("${service.name}") && member == QStringLiteral("${member.name}")) {`);
-                lines.push(`            emit ${member.name}(payload.value<${cppType}>(), x, y);`);
+                lines.push(`            emit ${member.name}(${payloadSite ? `decode${payloadSite.codecId}(payload)` : `payload.value<${cppType}>()`}, x, y);`);
                 lines.push(`        }`);
                 lines.push(`    });`);
                 lines.push(`    QObject::connect(this, &AnQstWebHostBase::anQstBridge_hoverLeft, this, [this](const QString& service, const QString& member) {`);
@@ -1028,11 +1185,13 @@ function renderCppStub(spec, cppTypes) {
                 continue;
             const timeoutMs = member.timeoutMs;
             const cppType = cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]);
+            const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
             lines.push(`    if (service == QStringLiteral("${service.name}") && member == QStringLiteral("${member.name}")) {`);
             for (let i = 0; i < member.parameters.length; i++) {
                 const p = member.parameters[i];
                 const pType = cppTypes.mapTypeText(p.typeText, [service.name, member.name, p.name]);
-                lines.push(`        const ${pType} ${p.name} = ${variantToCppExpression(pType, `args.value(${i})`)};`);
+                const paramSite = (0, structured_top_level_codecs_1.getStructuredParameterSite)(cppCodecCatalog, service.name, member.name, p.name);
+                lines.push(`        const ${pType} ${p.name} = ${paramSite ? `decode${paramSite.codecId}(args.value(${i}))` : variantToCppExpression(pType, `args.value(${i})`)};`);
             }
             lines.push(`        const QString requestId = QStringLiteral("call-%1").arg(++m_callRequestCounter);`);
             lines.push(`        const QString queueKey = makeBindingKey(QStringLiteral("${service.name}"), QStringLiteral("${member.name}"));`);
@@ -1049,7 +1208,7 @@ function renderCppStub(spec, cppTypes) {
             lines.push(`            try {`);
             const callArgs = member.parameters.map((p) => p.name).join(", ");
             lines.push(`                const ${cppType} result = m_${member.name}Handler(${callArgs});`);
-            lines.push(`                return ${cppToVariantExpression(cppType, "result")};`);
+            lines.push(`                return ${payloadSite ? `encode${payloadSite.codecId}(result)` : cppToVariantExpression(cppType, "result")};`);
             lines.push(`            } catch (const std::exception& ex) {`);
             lines.push(`                return QVariantMap{`);
             lines.push(`                    {QStringLiteral("code"), QStringLiteral("CallHandlerError")},`);
@@ -1101,7 +1260,8 @@ function renderCppStub(spec, cppTypes) {
             for (let i = 0; i < member.parameters.length; i++) {
                 const p = member.parameters[i];
                 const pType = cppTypes.mapTypeText(p.typeText, [service.name, member.name, p.name]);
-                lines.push(`        const ${pType} ${p.name} = ${variantToCppExpression(pType, `args.value(${i})`)};`);
+                const paramSite = (0, structured_top_level_codecs_1.getStructuredParameterSite)(cppCodecCatalog, service.name, member.name, p.name);
+                lines.push(`        const ${pType} ${p.name} = ${paramSite ? `decode${paramSite.codecId}(args.value(${i}))` : variantToCppExpression(pType, `args.value(${i})`)};`);
             }
             const argNames = member.parameters.map((p) => p.name).join(", ");
             lines.push(`        emit ${member.name}(${argNames});`);
@@ -1117,8 +1277,9 @@ function renderCppStub(spec, cppTypes) {
             if (member.kind !== "Input" || !member.payloadTypeText)
                 continue;
             const cppType = cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]);
+            const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
             lines.push(`    if (service == QStringLiteral("${service.name}") && member == QStringLiteral("${member.name}")) {`);
-            lines.push(`        const ${cppType} typedValue = ${variantToCppExpression(cppType, "value")};`);
+            lines.push(`        const ${cppType} typedValue = ${payloadSite ? `decode${payloadSite.codecId}(value)` : variantToCppExpression(cppType, "value")};`);
             lines.push(`        set${pascalCase(member.name)}(typedValue);`);
             lines.push(`        if (m_${member.name}Handler) m_${member.name}Handler(typedValue);`);
             lines.push(`        return;`);
@@ -1138,12 +1299,14 @@ function renderCppStub(spec, cppTypes) {
             }
             if (member.kind === "Slot") {
                 const ret = member.payloadTypeText ? cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]) : "void";
+                const payloadSite = member.payloadTypeText ? (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name) : undefined;
                 const args = member.parameters.map((p) => `${cppTypes.mapTypeText(p.typeText, [service.name, member.name, p.name])} ${p.name}`).join(", ");
                 lines.push(`${ret} ${widgetClassName}::slot_${member.name}(${args}) {`);
                 lines.push(`    QVariantList invokeArgs;`);
                 for (const p of member.parameters) {
                     const pType = mapTsTypeToCpp(p.typeText);
-                    lines.push(`    invokeArgs.push_back(${cppToVariantExpression(pType, p.name)});`);
+                    const paramSite = (0, structured_top_level_codecs_1.getStructuredParameterSite)(cppCodecCatalog, service.name, member.name, p.name);
+                    lines.push(`    invokeArgs.push_back(${paramSite ? `encode${paramSite.codecId}(${p.name})` : cppToVariantExpression(pType, p.name)});`);
                 }
                 lines.push(`    QVariant result;`);
                 lines.push(`    QString invokeError;`);
@@ -1160,13 +1323,14 @@ function renderCppStub(spec, cppTypes) {
                     lines.push(`    return;`);
                 }
                 else {
-                    lines.push(`    return ${variantToCppExpression(ret, "result")};`);
+                    lines.push(`    return ${payloadSite ? `decode${payloadSite.codecId}(result)` : variantToCppExpression(ret, "result")};`);
                 }
                 lines.push("}");
                 lines.push("");
             }
             else if ((member.kind === "Input" || member.kind === "Output") && member.payloadTypeText) {
                 const cppType = cppTypes.mapTypeText(member.payloadTypeText, [service.name, member.name, "Payload"]);
+                const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(cppCodecCatalog, service.name, member.name);
                 const cap = member.name.charAt(0).toUpperCase() + member.name.slice(1);
                 lines.push(`${cppType} ${widgetClassName}::${member.name}() const {`);
                 lines.push(`    return m_${member.name};`);
@@ -1174,9 +1338,40 @@ function renderCppStub(spec, cppTypes) {
                 lines.push("");
                 lines.push(`void ${widgetClassName}::set${cap}(const ${cppType}& value) {`);
                 lines.push(`    if (m_${member.name} == value) return;`);
+                if (member.kind === "Output") {
+                    lines.push(`    QVariant encodedValue;`);
+                    lines.push(`    try {`);
+                    lines.push(`        encodedValue = ${payloadSite ? `encode${payloadSite.codecId}(value)` : cppToVariantExpression(cppType, "value")};`);
+                    lines.push(`    } catch (const std::exception& ex) {`);
+                    lines.push(`        emitHostError(`);
+                    lines.push(`            QStringLiteral("SerializationError"),`);
+                    lines.push(`            QStringLiteral("bridge"),`);
+                    lines.push(`            QStringLiteral("error"),`);
+                    lines.push(`            true,`);
+                    lines.push(`            QStringLiteral("Failed to serialize Output ${service.name}.${member.name}."),`);
+                    lines.push(`            {`);
+                    lines.push(`                {QStringLiteral("service"), QStringLiteral("${service.name}")},`);
+                    lines.push(`                {QStringLiteral("member"), QStringLiteral("${member.name}")},`);
+                    lines.push(`                {QStringLiteral("detail"), QString::fromUtf8(ex.what())},`);
+                    lines.push(`            });`);
+                    lines.push(`        return;`);
+                    lines.push(`    } catch (...) {`);
+                    lines.push(`        emitHostError(`);
+                    lines.push(`            QStringLiteral("SerializationError"),`);
+                    lines.push(`            QStringLiteral("bridge"),`);
+                    lines.push(`            QStringLiteral("error"),`);
+                    lines.push(`            true,`);
+                    lines.push(`            QStringLiteral("Failed to serialize Output ${service.name}.${member.name}."),`);
+                    lines.push(`            {`);
+                    lines.push(`                {QStringLiteral("service"), QStringLiteral("${service.name}")},`);
+                    lines.push(`                {QStringLiteral("member"), QStringLiteral("${member.name}")},`);
+                    lines.push(`            });`);
+                    lines.push(`        return;`);
+                    lines.push(`    }`);
+                }
                 lines.push(`    m_${member.name} = value;`);
                 if (member.kind === "Output") {
-                    lines.push(`    setOutputValue(QStringLiteral("${service.name}"), QStringLiteral("${member.name}"), ${cppToVariantExpression(cppType, "value")});`);
+                    lines.push(`    setOutputValue(QStringLiteral("${service.name}"), QStringLiteral("${member.name}"), encodedValue);`);
                 }
                 lines.push(`    emit ${member.name}Changed(value);`);
                 lines.push("}");
@@ -1363,59 +1558,155 @@ function slotHandlerReturnType(tsRet) {
     }
     return `${tsRet} | Promise<${tsRet}> | Error`;
 }
-function renderTsService(spec, serviceName) {
+function renderTsService(spec, serviceName, codecCatalog) {
     const members = spec.services.find((s) => s.name === serviceName)?.members ?? [];
     const fieldLines = [];
     const methodLines = [];
     const setMembers = [];
     const onSlotMembers = [];
     const constructorBodyLines = [];
-    constructorBodyLines.push("    this._bridge.ready().catch((error) => console.error('AnQst bridge ready() failed', error, (error as { stack?: unknown })?.stack));");
     for (const m of members) {
         const args = m.parameters.map((p) => `${p.name}: ${mapTypeTextToTs(p.typeText)}`).join(", ");
-        const valueArgs = m.parameters.map((p) => p.name).join(", ");
-        const valueArray = valueArgs.length > 0 ? `[${valueArgs}]` : "[]";
+        const paramSites = m.parameters.map((p) => (0, structured_top_level_codecs_1.getStructuredParameterSite)(codecCatalog, serviceName, m.name, p.name));
+        const encodedValueArray = paramSites.length > 0
+            ? `[${m.parameters.map((p, index) => `${paramSites[index] ? `encode${paramSites[index].codecId}(${p.name})` : p.name}`).join(", ")}]`
+            : "[]";
+        const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, serviceName, m.name);
         if (m.kind === "Call") {
             const ret = mapTypeTextToTs(m.payloadTypeText ?? "void");
-            methodLines.push(`  async ${m.name}(${args}): Promise<${ret}> { return this._bridge.call<${ret}>("${serviceName}", "${m.name}", ${valueArray}); }`);
+            if (payloadSite) {
+                methodLines.push(`  async ${m.name}(${args}): Promise<${ret}> { const result = await this._bridge.call<unknown>("${serviceName}", "${m.name}", ${encodedValueArray}); return decode${payloadSite.codecId}(result); }`);
+            }
+            else {
+                methodLines.push(`  async ${m.name}(${args}): Promise<${ret}> { return this._bridge.call<${ret}>("${serviceName}", "${m.name}", ${encodedValueArray}); }`);
+            }
             continue;
         }
         if (m.kind === "Emitter") {
-            methodLines.push(`  ${m.name}(${args}): void { this._bridge.emit("${serviceName}", "${m.name}", ${valueArray}); }`);
+            methodLines.push(`  ${m.name}(${args}): void {`);
+            methodLines.push(`    let encodedArgs: unknown[];`);
+            methodLines.push(`    try {`);
+            methodLines.push(`      encodedArgs = ${encodedValueArray};`);
+            methodLines.push(`    } catch (error) {`);
+            methodLines.push(`      this._bridge.reportFrontendDiagnostic({`);
+            methodLines.push(`        code: "SerializationError",`);
+            methodLines.push(`        severity: "error",`);
+            methodLines.push(`        category: "bridge",`);
+            methodLines.push(`        recoverable: true,`);
+            methodLines.push(`        message: \`Failed to serialize Emitter ${serviceName}.${m.name}: \${errorMessage(error)}\`,`);
+            methodLines.push(`        service: "${serviceName}",`);
+            methodLines.push(`        member: "${m.name}",`);
+            methodLines.push(`        context: { interaction: "Emitter" }`);
+            methodLines.push(`      });`);
+            methodLines.push(`      return;`);
+            methodLines.push(`    }`);
+            methodLines.push(`    this._bridge.emit("${serviceName}", "${m.name}", encodedArgs);`);
+            methodLines.push(`  }`);
             continue;
         }
         if (m.kind === "Slot") {
             const ret = mapTypeTextToTs(m.payloadTypeText ?? "void");
+            const decodedArgs = m.parameters.map((p, index) => `${paramSites[index] ? `decode${paramSites[index].codecId}(wireArgs[${index}])` : `wireArgs[${index}] as ${mapTypeTextToTs(p.typeText)}`}`).join(", ");
             onSlotMembers.push(`    ${m.name}: (handler: (${args}) => ${slotHandlerReturnType(ret)}): void => {`);
-            onSlotMembers.push(`      this._bridge.registerSlot("${serviceName}", "${m.name}", handler as (...args: unknown[]) => unknown);`);
+            onSlotMembers.push(`      this._bridge.registerSlot("${serviceName}", "${m.name}", (...wireArgs: unknown[]) => {`);
+            onSlotMembers.push(`        const result = handler(${decodedArgs});`);
+            if (payloadSite) {
+                onSlotMembers.push(`        if (result instanceof Promise) return result.then((value) => value instanceof Error ? value : encode${payloadSite.codecId}(value));`);
+                onSlotMembers.push(`        return result instanceof Error ? result : encode${payloadSite.codecId}(result);`);
+            }
+            else {
+                onSlotMembers.push("        return result;");
+            }
+            onSlotMembers.push("      });");
             onSlotMembers.push("    },");
             continue;
         }
         if ((m.kind === "Input" || m.kind === "Output") && m.payloadTypeText) {
             const tsType = mapTypeTextToTs(m.payloadTypeText);
-            fieldLines.push(`  private readonly _${m.name} = signal<${tsType}>((undefined as unknown) as ${tsType});`);
-            methodLines.push(`  ${m.name}(): ${tsType} { return this._${m.name}(); }`);
+            fieldLines.push(`  private readonly _${m.name} = signal<${tsType} | undefined>(undefined);`);
+            methodLines.push(`  ${m.name}(): ${tsType} | undefined { return this._${m.name}(); }`);
             if (m.kind === "Input") {
                 setMembers.push(`    ${m.name}: (value: ${tsType}): void => {`);
+                setMembers.push(`      let encodedValue: unknown;`);
+                setMembers.push(`      try {`);
+                setMembers.push(`        encodedValue = ${payloadSite ? `encode${payloadSite.codecId}(value)` : "value"};`);
+                setMembers.push(`      } catch (error) {`);
+                setMembers.push(`        this._bridge.reportFrontendDiagnostic({`);
+                setMembers.push(`          code: "SerializationError",`);
+                setMembers.push(`          severity: "error",`);
+                setMembers.push(`          category: "bridge",`);
+                setMembers.push(`          recoverable: true,`);
+                setMembers.push(`          message: \`Failed to serialize Input ${serviceName}.${m.name}: \${errorMessage(error)}\`,`);
+                setMembers.push(`          service: "${serviceName}",`);
+                setMembers.push(`          member: "${m.name}",`);
+                setMembers.push(`          context: { interaction: "Input" }`);
+                setMembers.push(`        });`);
+                setMembers.push(`        return;`);
+                setMembers.push(`      }`);
                 setMembers.push(`      this._${m.name}.set(value);`);
-                setMembers.push(`      this._bridge.setInput("${serviceName}", "${m.name}", value);`);
+                setMembers.push(`      this._bridge.setInput("${serviceName}", "${m.name}", encodedValue);`);
                 setMembers.push("    },");
             }
             if (m.kind === "Output") {
-                constructorBodyLines.push(`    this._bridge.onOutput("${serviceName}", "${m.name}", (value) => this._${m.name}.set(value as ${tsType}));`);
+                constructorBodyLines.push(`    this._bridge.onOutput("${serviceName}", "${m.name}", (value) => {`);
+                constructorBodyLines.push(`      try {`);
+                constructorBodyLines.push(`        this._${m.name}.set(${payloadSite ? `decode${payloadSite.codecId}(value)` : `value as ${tsType}`});`);
+                constructorBodyLines.push(`      } catch (error) {`);
+                constructorBodyLines.push(`        this._bridge.reportFrontendDiagnostic({`);
+                constructorBodyLines.push(`          code: "DeserializationError",`);
+                constructorBodyLines.push(`          severity: "error",`);
+                constructorBodyLines.push(`          category: "bridge",`);
+                constructorBodyLines.push(`          recoverable: true,`);
+                constructorBodyLines.push(`          message: \`Failed to deserialize Output ${serviceName}.${m.name}: \${errorMessage(error)}\`,`);
+                constructorBodyLines.push(`          service: "${serviceName}",`);
+                constructorBodyLines.push(`          member: "${m.name}",`);
+                constructorBodyLines.push(`          context: { interaction: "Output" }`);
+                constructorBodyLines.push(`        });`);
+                constructorBodyLines.push(`      }`);
+                constructorBodyLines.push(`    });`);
             }
         }
         if (m.kind === "DropTarget" && m.payloadTypeText) {
             const tsType = mapTypeTextToTs(m.payloadTypeText);
             fieldLines.push(`  private readonly _${m.name} = signal<{ payload: ${tsType}; x: number; y: number } | null>(null);`);
             methodLines.push(`  ${m.name}(): { payload: ${tsType}; x: number; y: number } | null { return this._${m.name}(); }`);
-            constructorBodyLines.push(`    this._bridge.onDrop("${serviceName}", "${m.name}", (payload, x, y) => this._${m.name}.set({ payload: payload as ${tsType}, x, y }));`);
+            constructorBodyLines.push(`    this._bridge.onDrop("${serviceName}", "${m.name}", (payload, x, y) => {`);
+            constructorBodyLines.push(`      try {`);
+            constructorBodyLines.push(`        this._${m.name}.set({ payload: ${payloadSite ? `decode${payloadSite.codecId}(payload)` : `payload as ${tsType}`}, x, y });`);
+            constructorBodyLines.push(`      } catch (error) {`);
+            constructorBodyLines.push(`        this._bridge.reportFrontendDiagnostic({`);
+            constructorBodyLines.push(`          code: "DeserializationError",`);
+            constructorBodyLines.push(`          severity: "error",`);
+            constructorBodyLines.push(`          category: "bridge",`);
+            constructorBodyLines.push(`          recoverable: true,`);
+            constructorBodyLines.push(`          message: \`Failed to deserialize DropTarget ${serviceName}.${m.name}: \${errorMessage(error)}\`,`);
+            constructorBodyLines.push(`          service: "${serviceName}",`);
+            constructorBodyLines.push(`          member: "${m.name}",`);
+            constructorBodyLines.push(`          context: { interaction: "DropTarget" }`);
+            constructorBodyLines.push(`        });`);
+            constructorBodyLines.push(`      }`);
+            constructorBodyLines.push(`    });`);
         }
         if (m.kind === "HoverTarget" && m.payloadTypeText) {
             const tsType = mapTypeTextToTs(m.payloadTypeText);
             fieldLines.push(`  private readonly _${m.name} = signal<{ payload: ${tsType}; x: number; y: number } | null>(null);`);
             methodLines.push(`  ${m.name}(): { payload: ${tsType}; x: number; y: number } | null { return this._${m.name}(); }`);
-            constructorBodyLines.push(`    this._bridge.onHover("${serviceName}", "${m.name}", (payload, x, y) => this._${m.name}.set({ payload: payload as ${tsType}, x, y }));`);
+            constructorBodyLines.push(`    this._bridge.onHover("${serviceName}", "${m.name}", (payload, x, y) => {`);
+            constructorBodyLines.push(`      try {`);
+            constructorBodyLines.push(`        this._${m.name}.set({ payload: ${payloadSite ? `decode${payloadSite.codecId}(payload)` : `payload as ${tsType}`}, x, y });`);
+            constructorBodyLines.push(`      } catch (error) {`);
+            constructorBodyLines.push(`        this._bridge.reportFrontendDiagnostic({`);
+            constructorBodyLines.push(`          code: "DeserializationError",`);
+            constructorBodyLines.push(`          severity: "error",`);
+            constructorBodyLines.push(`          category: "bridge",`);
+            constructorBodyLines.push(`          recoverable: true,`);
+            constructorBodyLines.push(`          message: \`Failed to deserialize HoverTarget ${serviceName}.${m.name}: \${errorMessage(error)}\`,`);
+            constructorBodyLines.push(`          service: "${serviceName}",`);
+            constructorBodyLines.push(`          member: "${m.name}",`);
+            constructorBodyLines.push(`          context: { interaction: "HoverTarget" }`);
+            constructorBodyLines.push(`        });`);
+            constructorBodyLines.push(`      }`);
+            constructorBodyLines.push(`    });`);
             constructorBodyLines.push(`    this._bridge.onHoverLeft("${serviceName}", "${m.name}", () => this._${m.name}.set(null));`);
         }
     }
@@ -1464,7 +1755,7 @@ function renderTsServiceDts(spec, serviceName) {
         }
         if ((m.kind === "Input" || m.kind === "Output") && m.payloadTypeText) {
             const tsType = mapTypeTextToTs(m.payloadTypeText);
-            classMembers.push(`  ${m.name}(): ${tsType};`);
+            classMembers.push(`  ${m.name}(): ${tsType} | undefined;`);
             if (m.kind === "Input") {
                 setMembers.push(`  ${m.name}(value: ${tsType}): void;`);
             }
@@ -1495,7 +1786,8 @@ export declare class ${serviceName} {
 }`;
 }
 function renderTsServices(spec) {
-    const serviceClasses = spec.services.map((s) => renderTsService(spec, s.name)).join("\n");
+    const codecCatalog = (0, structured_top_level_codecs_1.buildStructuredCodecCatalog)(spec);
+    const serviceClasses = spec.services.map((s) => renderTsService(spec, s.name, codecCatalog)).join("\n");
     const externalTypeImports = renderRequiredTypeImports(spec, `frontend/${(0, layout_1.generatedFrontendDirName)(spec.widgetName)}/services.ts`).trim();
     const localTypeImports = renderLocalTypeImports(spec).trim();
     const typeImports = [externalTypeImports, localTypeImports].filter((s) => s.length > 0).join("\n");
@@ -1503,6 +1795,9 @@ function renderTsServices(spec) {
     return `import { Injectable, inject, signal } from "@angular/core";
 ${typeImportsBlock}
 
+// Structured/top-level codec helpers
+${(0, structured_top_level_codecs_1.renderTsStructuredCodecHelpers)(codecCatalog)}
+
 type SlotHandler = (...args: unknown[]) => unknown;
 type OutputHandler = (value: unknown) => void;
 type SlotInvocationListener = (requestId: string, service: string, member: string, args: unknown[]) => void;
@@ -1510,6 +1805,28 @@ type OutputListener = (service: string, member: string, value: unknown) => void;
 type DropListener = (service: string, member: string, payload: unknown, x: number, y: number) => void;
 type HoverListener = (service: string, member: string, payload: unknown, x: number, y: number) => void;
 type HoverLeftListener = (service: string, member: string) => void;
+type HostDiagnosticListener = (payload: unknown) => void;
+type DisconnectListener = () => void;
+
+export type AnQstBridgeSeverity = "info" | "warn" | "error" | "fatal";
+export type AnQstBridgeSource = "frontend" | "host";
+export type AnQstBridgeTransport = "qt-webchannel" | "dev-websocket";
+export type AnQstBridgeState = "starting" | "ready" | "failed" | "disconnected";
+
+export interface AnQstBridgeDiagnostic {
+  code: string;
+  severity: AnQstBridgeSeverity;
+  category: string;
+  recoverable: boolean;
+  message: string;
+  timestamp: string;
+  source: AnQstBridgeSource;
+  transport?: AnQstBridgeTransport;
+  service?: string;
+  member?: string;
+  requestId?: string;
+  context?: Record<string, unknown>;
+}
 
 interface HostBridgeApi {
   anQstBridge_call(service: string, member: string, args: unknown[], callback: (result: unknown) => void): void;
@@ -1521,6 +1838,7 @@ interface HostBridgeApi {
   anQstBridge_slotInvocationRequested: {
     connect: (cb: (requestId: string, service: string, member: string, args: unknown[]) => void) => void;
   };
+  anQstBridge_hostDiagnostic?: { connect: (cb: (payload: unknown) => void) => void };
   anQstBridge_dropReceived: { connect: (cb: (service: string, member: string, payload: unknown, x: number, y: number) => void) => void };
   anQstBridge_hoverUpdated: { connect: (cb: (service: string, member: string, payload: unknown, x: number, y: number) => void) => void };
   anQstBridge_hoverLeft: { connect: (cb: (service: string, member: string) => void) => void };
@@ -1534,6 +1852,7 @@ interface QWebChannelCtor {
 }
 
 interface BridgeAdapter {
+  readonly transport: AnQstBridgeTransport;
   call<T>(service: string, member: string, args: unknown[]): Promise<T>;
   emit(service: string, member: string, args: unknown[]): void;
   setInput(service: string, member: string, value: unknown): void;
@@ -1541,11 +1860,82 @@ interface BridgeAdapter {
   resolveSlot(requestId: string, ok: boolean, payload: unknown, error: string): void;
   onOutput(handler: OutputListener): void;
   onSlotInvocation(handler: SlotInvocationListener): void;
+  onHostDiagnostic(handler: HostDiagnosticListener): void;
+  onDisconnected(handler: DisconnectListener): void;
   onDrop(handler: DropListener): void;
   onHover(handler: HoverListener): void;
   onHoverLeft(handler: HoverLeftListener): void;
 }
 
+function errorMessage(error: unknown): string {
+  if (error instanceof Error && typeof error.message === "string" && error.message.length > 0) {
+    return error.message;
+  }
+  return String(error);
+}
+
+function normalizeSeverity(value: unknown): AnQstBridgeSeverity {
+  if (value === "info" || value === "warn" || value === "error" || value === "fatal") {
+    return value;
+  }
+  return "error";
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  if (value === null || typeof value !== "object") {
+    return undefined;
+  }
+  return value as Record<string, unknown>;
+}
+
+function readString(record: Record<string, unknown> | undefined, key: string): string | undefined {
+  const value = record?.[key];
+  return typeof value === "string" && value.length > 0 ? value : undefined;
+}
+
+function readBoolean(record: Record<string, unknown> | undefined, key: string): boolean | undefined {
+  const value = record?.[key];
+  return typeof value === "boolean" ? value : undefined;
+}
+
+function readContext(record: Record<string, unknown> | undefined): Record<string, unknown> | undefined {
+  const context = asRecord(record?.["context"]);
+  return context === undefined ? undefined : context;
+}
+
+function normalizeHostDiagnostic(
+  payload: unknown,
+  transport: AnQstBridgeTransport
+): Omit<AnQstBridgeDiagnostic, "timestamp"> {
+  const row = asRecord(payload);
+  if (row === undefined) {
+    return {
+      code: "HostDiagnosticMalformed",
+      severity: "error",
+      category: "bridge",
+      recoverable: true,
+      message: "Host emitted a malformed diagnostic payload.",
+      source: "host",
+      transport
+    };
+  }
+
+  const context = readContext(row);
+  return {
+    code: readString(row, "code") ?? "HostDiagnostic",
+    severity: normalizeSeverity(row["severity"]),
+    category: readString(row, "category") ?? "bridge",
+    recoverable: readBoolean(row, "recoverable") ?? true,
+    message: readString(row, "message") ?? "Host emitted a diagnostic payload.",
+    source: "host",
+    transport,
+    service: readString(row, "service") ?? readString(context, "service"),
+    member: readString(row, "member") ?? readString(context, "member"),
+    requestId: readString(row, "requestId") ?? readString(context, "requestId"),
+    context
+  };
+}
+
 function isBridgeCallError(value: unknown): value is {
   code: unknown;
   message: unknown;
@@ -1565,6 +1955,8 @@ function isBridgeCallError(value: unknown): value is {
 }
 
 class QtWebChannelAdapter implements BridgeAdapter {
+  readonly transport = "qt-webchannel" as const;
+
   private constructor(private readonly host: HostBridgeApi) {}
 
   static async create(): Promise<QtWebChannelAdapter> {
@@ -1632,6 +2024,14 @@ class QtWebChannelAdapter implements BridgeAdapter {
     this.host.anQstBridge_slotInvocationRequested.connect(handler);
   }
 
+  onHostDiagnostic(handler: HostDiagnosticListener): void {
+    this.host.anQstBridge_hostDiagnostic?.connect(handler);
+  }
+
+  onDisconnected(_handler: DisconnectListener): void {
+    // QWebChannel does not expose a deterministic disconnect event here.
+  }
+
   onDrop(handler: DropListener): void {
     this.host.anQstBridge_dropReceived.connect(handler);
   }
@@ -1646,6 +2046,7 @@ class QtWebChannelAdapter implements BridgeAdapter {
 }
 
 class WebSocketBridgeAdapter implements BridgeAdapter {
+  readonly transport = "dev-websocket" as const;
   private readonly pending = new Map<string, {
     service: string;
     member: string;
@@ -1655,6 +2056,8 @@ class WebSocketBridgeAdapter implements BridgeAdapter {
   }>();
   private readonly outputListeners: OutputListener[] = [];
   private readonly slotListeners: SlotInvocationListener[] = [];
+  private readonly hostDiagnosticListeners: HostDiagnosticListener[] = [];
+  private readonly disconnectListeners: DisconnectListener[] = [];
   private readonly dropListeners: DropListener[] = [];
   private readonly hoverListeners: HoverListener[] = [];
   private readonly hoverLeftListeners: HoverLeftListener[] = [];
@@ -1726,7 +2129,9 @@ class WebSocketBridgeAdapter implements BridgeAdapter {
         return;
       }
       if (type === "hostError") {
-        console.error("AnQst host error:", message["payload"]);
+        for (const listener of this.hostDiagnosticListeners) {
+          listener(message["payload"]);
+        }
         return;
       }
       if (type === "widgetReattached") {
@@ -1745,6 +2150,9 @@ class WebSocketBridgeAdapter implements BridgeAdapter {
         });
       }
       this.pending.clear();
+      for (const listener of this.disconnectListeners) {
+        listener();
+      }
     });
   }
 
@@ -1813,6 +2221,14 @@ class WebSocketBridgeAdapter implements BridgeAdapter {
     this.slotListeners.push(handler);
   }
 
+  onHostDiagnostic(handler: HostDiagnosticListener): void {
+    this.hostDiagnosticListeners.push(handler);
+  }
+
+  onDisconnected(handler: DisconnectListener): void {
+    this.disconnectListeners.push(handler);
+  }
+
   onDrop(handler: DropListener): void {
     this.dropListeners.push(handler);
   }
@@ -1828,53 +2244,116 @@ class WebSocketBridgeAdapter implements BridgeAdapter {
 
 @Injectable({ providedIn: "root" })
 class AnQstBridgeRuntime {
+  private static readonly maxDiagnostics = 50;
   private adapter: BridgeAdapter | null = null;
   private readonly slotHandlers = new Map<string, SlotHandler>();
   private readonly outputHandlers = new Map<string, OutputHandler[]>();
   private readonly dropHandlers = new Map<string, ((payload: unknown, x: number, y: number) => void)[]>();
   private readonly hoverHandlers = new Map<string, ((payload: unknown, x: number, y: number) => void)[]>();
   private readonly hoverLeftHandlers = new Map<string, (() => void)[]>();
-  private readonly startup = this.init();
+  private readonly diagnosticListeners = new Set<(diagnostic: AnQstBridgeDiagnostic) => void>();
+  private readonly _diagnostics = signal<readonly AnQstBridgeDiagnostic[]>([]);
+  private readonly _state = signal<AnQstBridgeState>("starting");
+  private readonly startup = this.init().catch((error) => {
+    this._state.set("failed");
+    this.reportFrontendDiagnostic({
+      code: "BridgeBootstrapError",
+      severity: "fatal",
+      category: "bridge",
+      recoverable: false,
+      message: \`Failed to initialize bridge: \${errorMessage(error)}\`
+    });
+    throw error;
+  });
+
+  diagnostics(): readonly AnQstBridgeDiagnostic[] {
+    return this._diagnostics();
+  }
+
+  state(): AnQstBridgeState {
+    return this._state();
+  }
+
+  subscribeDiagnostics(listener: (diagnostic: AnQstBridgeDiagnostic) => void): () => void {
+    this.diagnosticListeners.add(listener);
+    return () => this.diagnosticListeners.delete(listener);
+  }
 
   async ready(): Promise<void> {
     return this.startup;
   }
 
+  reportFrontendDiagnostic(diagnostic: Omit<AnQstBridgeDiagnostic, "timestamp" | "source">): void {
+    this.pushDiagnostic({
+      ...diagnostic,
+      source: "frontend",
+      transport: diagnostic.transport ?? this.adapter?.transport,
+      timestamp: new Date().toISOString()
+    });
+  }
+
   async call<T>(service: string, member: string, args: unknown[]): Promise<T> {
     const adapter = await this.requireAdapter();
     return adapter.call<T>(service, member, args);
   }
 
   emit(service: string, member: string, args: unknown[]): void {
-    if (this.adapter !== null) {
-      this.adapter.emit(service, member, args);
-      return;
-    }
-    this.ready()
-      .then(() => this.requireAdapterSync().emit(service, member, args))
-      .catch((error) => console.error(error));
+    this.publishNonCall("Emitter", service, member, (adapter) => adapter.emit(service, member, args));
   }
 
   setInput(service: string, member: string, value: unknown): void {
-    if (this.adapter !== null) {
-      this.adapter.setInput(service, member, value);
-      return;
-    }
-    this.ready()
-      .then(() => this.requireAdapterSync().setInput(service, member, value))
-      .catch((error) => console.error(error));
+    this.publishNonCall("Input", service, member, (adapter) => adapter.setInput(service, member, value));
   }
 
   registerSlot(service: string, member: string, handler: SlotHandler): void {
     const key = this.key(service, member);
     this.slotHandlers.set(key, handler);
     if (this.adapter !== null) {
-      this.adapter.registerSlot(service, member);
+      try {
+        this.adapter.registerSlot(service, member);
+      } catch (error) {
+        this.reportFrontendDiagnostic({
+          code: "BridgePublishError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`Failed to register Slot \${service}.\${member}: \${errorMessage(error)}\`,
+          service,
+          member,
+          context: { interaction: "Slot" }
+        });
+      }
       return;
     }
     this.ready()
-      .then(() => this.requireAdapterSync().registerSlot(service, member))
-      .catch((error) => console.error(error));
+      .then(() => {
+        try {
+          this.requireAdapterSync().registerSlot(service, member);
+        } catch (error) {
+          this.reportFrontendDiagnostic({
+            code: "BridgePublishError",
+            severity: "error",
+            category: "bridge",
+            recoverable: true,
+            message: \`Failed to register Slot \${service}.\${member}: \${errorMessage(error)}\`,
+            service,
+            member,
+            context: { interaction: "Slot" }
+          });
+        }
+      })
+      .catch((error) => {
+        this.reportFrontendDiagnostic({
+          code: "BridgePublishError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`Failed to register Slot \${service}.\${member}: \${errorMessage(error)}\`,
+          service,
+          member,
+          context: { interaction: "Slot" }
+        });
+      });
   }
 
   onOutput(service: string, member: string, handler: OutputHandler): void {
@@ -1917,6 +2396,73 @@ class AnQstBridgeRuntime {
     return this.requireAdapterSync();
   }
 
+  private pushDiagnostic(diagnostic: AnQstBridgeDiagnostic): void {
+    const previous = this._diagnostics();
+    const trimmed = previous.length >= AnQstBridgeRuntime.maxDiagnostics
+      ? previous.slice(previous.length - (AnQstBridgeRuntime.maxDiagnostics - 1))
+      : previous;
+    const next = [...trimmed, diagnostic];
+    this._diagnostics.set(next);
+    for (const listener of this.diagnosticListeners) {
+      listener(diagnostic);
+    }
+  }
+
+  private publishNonCall(
+    interaction: "Emitter" | "Input",
+    service: string,
+    member: string,
+    publish: (adapter: BridgeAdapter) => void
+  ): void {
+    if (this.adapter !== null) {
+      try {
+        publish(this.adapter);
+      } catch (error) {
+        this.reportFrontendDiagnostic({
+          code: "BridgePublishError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`Failed to publish \${interaction} \${service}.\${member}: \${errorMessage(error)}\`,
+          service,
+          member,
+          context: { interaction }
+        });
+      }
+      return;
+    }
+
+    this.ready()
+      .then(() => {
+        try {
+          publish(this.requireAdapterSync());
+        } catch (error) {
+          this.reportFrontendDiagnostic({
+            code: "BridgePublishError",
+            severity: "error",
+            category: "bridge",
+            recoverable: true,
+            message: \`Failed to publish \${interaction} \${service}.\${member}: \${errorMessage(error)}\`,
+            service,
+            member,
+            context: { interaction }
+          });
+        }
+      })
+      .catch((error) => {
+        this.reportFrontendDiagnostic({
+          code: "BridgePublishError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`Failed to publish \${interaction} \${service}.\${member}: \${errorMessage(error)}\`,
+          service,
+          member,
+          context: { interaction }
+        });
+      });
+  }
+
   private async init(): Promise<void> {
     const anyWindow = window as unknown as { qt?: { webChannelTransport?: unknown }; QWebChannel?: QWebChannelCtor };
     if (typeof anyWindow.QWebChannel === "function" && anyWindow.qt?.webChannelTransport !== undefined) {
@@ -1925,44 +2471,98 @@ class AnQstBridgeRuntime {
       this.adapter = await WebSocketBridgeAdapter.create();
     }
 
-    this.adapter.onOutput((service, member, value) => {
+    const adapter = this.adapter;
+    adapter.onHostDiagnostic((payload) => {
+      this.pushDiagnostic({
+        ...normalizeHostDiagnostic(payload, adapter.transport),
+        timestamp: new Date().toISOString()
+      });
+    });
+    adapter.onDisconnected(() => {
+      this._state.set("disconnected");
+      this.reportFrontendDiagnostic({
+        code: "BridgeDisconnectedError",
+        severity: "error",
+        category: "bridge",
+        recoverable: true,
+        message: "Bridge disconnected.",
+        transport: adapter.transport
+      });
+    });
+
+    adapter.onOutput((service, member, value) => {
       const key = this.key(service, member);
       for (const outputHandler of this.outputHandlers.get(key) ?? []) {
         outputHandler(value);
       }
     });
-    this.adapter.onSlotInvocation(async (requestId, service, member, args) => {
+    adapter.onSlotInvocation(async (requestId, service, member, args) => {
       const key = this.key(service, member);
       const handler = this.slotHandlers.get(key);
       if (handler === undefined) {
-        this.adapter!.resolveSlot(requestId, false, undefined, "No slot handler registered.");
+        this.reportFrontendDiagnostic({
+          code: "HandlerNotRegisteredError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`No slot handler registered for \${service}.\${member}.\`,
+          service,
+          member,
+          requestId,
+          context: { interaction: "Slot" }
+        });
+        adapter.resolveSlot(requestId, false, undefined, "No slot handler registered.");
         return;
       }
       try {
         const result = await Promise.resolve(handler(...args));
         if (result instanceof Error) {
-          this.adapter!.resolveSlot(requestId, false, undefined, result.message);
+          this.reportFrontendDiagnostic({
+            code: "SlotRequestFailed",
+            severity: "error",
+            category: "bridge",
+            recoverable: true,
+            message: result.message.length > 0
+              ? result.message
+              : \`Slot \${service}.\${member} returned an Error.\`,
+            service,
+            member,
+            requestId,
+            context: { interaction: "Slot" }
+          });
+          adapter.resolveSlot(requestId, false, undefined, result.message);
           return;
         }
-        this.adapter!.resolveSlot(requestId, true, result, "");
+        adapter.resolveSlot(requestId, true, result, "");
       } catch (error) {
-        const message = error instanceof Error ? error.message : String(error);
-        this.adapter!.resolveSlot(requestId, false, undefined, message);
+        const message = errorMessage(error);
+        this.reportFrontendDiagnostic({
+          code: "SlotHandlerError",
+          severity: "error",
+          category: "bridge",
+          recoverable: true,
+          message: \`Slot handler \${service}.\${member} threw: \${message}\`,
+          service,
+          member,
+          requestId,
+          context: { interaction: "Slot" }
+        });
+        adapter.resolveSlot(requestId, false, undefined, message);
       }
     });
-    this.adapter.onDrop((service, member, payload, x, y) => {
+    adapter.onDrop((service, member, payload, x, y) => {
       const key = this.key(service, member);
       for (const handler of this.dropHandlers.get(key) ?? []) {
         handler(payload, x, y);
       }
     });
-    this.adapter.onHover((service, member, payload, x, y) => {
+    adapter.onHover((service, member, payload, x, y) => {
       const key = this.key(service, member);
       for (const handler of this.hoverHandlers.get(key) ?? []) {
         handler(payload, x, y);
       }
     });
-    this.adapter.onHoverLeft((service, member) => {
+    adapter.onHoverLeft((service, member) => {
       const key = this.key(service, member);
       for (const handler of this.hoverLeftHandlers.get(key) ?? []) {
         handler();
@@ -1971,9 +2571,10 @@ class AnQstBridgeRuntime {
     for (const key of this.slotHandlers.keys()) {
       const parts = key.split("::");
       if (parts.length === 2) {
-        this.adapter.registerSlot(parts[0], parts[1]);
+        adapter.registerSlot(parts[0], parts[1]);
       }
     }
+    this._state.set("ready");
   }
 
   private key(service: string, member: string): string {
@@ -1981,6 +2582,23 @@ class AnQstBridgeRuntime {
   }
 
 }
+
+@Injectable({ providedIn: "root" })
+export class AnQstBridgeDiagnostics {
+  private readonly _bridge = inject(AnQstBridgeRuntime);
+
+  diagnostics(): readonly AnQstBridgeDiagnostic[] {
+    return this._bridge.diagnostics();
+  }
+
+  state(): AnQstBridgeState {
+    return this._bridge.state();
+  }
+
+  subscribe(listener: (diagnostic: AnQstBridgeDiagnostic) => void): () => void {
+    return this._bridge.subscribeDiagnostics(listener);
+  }
+}
 ${serviceClasses}
 `;
 }
@@ -1993,10 +2611,38 @@ function renderTsTypes(spec) {
 function renderTypeServicesDts(spec) {
     const externalTypeImports = renderRequiredTypeImports(spec, `frontend/${(0, layout_1.generatedFrontendDirName)(spec.widgetName)}/types/services.d.ts`).trim();
     const localTypeImports = renderLocalTypeImports(spec).trim();
+    const bridgeDiagnosticsDecl = `export type AnQstBridgeSeverity = "info" | "warn" | "error" | "fatal";
+
+export type AnQstBridgeSource = "frontend" | "host";
+
+export type AnQstBridgeTransport = "qt-webchannel" | "dev-websocket";
+
+export type AnQstBridgeState = "starting" | "ready" | "failed" | "disconnected";
+
+export interface AnQstBridgeDiagnostic {
+  code: string;
+  severity: AnQstBridgeSeverity;
+  category: string;
+  recoverable: boolean;
+  message: string;
+  timestamp: string;
+  source: AnQstBridgeSource;
+  transport?: AnQstBridgeTransport;
+  service?: string;
+  member?: string;
+  requestId?: string;
+  context?: Record<string, unknown>;
+}
+
+export declare class AnQstBridgeDiagnostics {
+  diagnostics(): readonly AnQstBridgeDiagnostic[];
+  state(): AnQstBridgeState;
+  subscribe(listener: (diagnostic: AnQstBridgeDiagnostic) => void): () => void;
+}`;
     const serviceDecls = spec.services
         .map((s) => renderTsServiceDts(spec, s.name))
         .join("\n\n");
-    const sections = [externalTypeImports, localTypeImports, serviceDecls.trim()].filter((s) => s.length > 0);
+    const sections = [externalTypeImports, localTypeImports, bridgeDiagnosticsDecl, serviceDecls.trim()].filter((s) => s.length > 0);
     return sections.length > 0 ? `${sections.join("\n\n")}\n` : "";
 }
 function renderTypeTypesDts(spec) {
@@ -2072,6 +2718,7 @@ function renderNodeExpressWsTypes(spec) {
     return sections.length > 0 ? `${sections.join("\n\n")}\n` : "";
 }
 function renderNodeExpressWsIndex(spec) {
+    const codecCatalog = (0, structured_top_level_codecs_1.buildStructuredCodecCatalog)(spec);
     const typeImports = renderRequiredTypeImports(spec, `backend/node/express/${generatedNodeExpressWsDirName(spec.widgetName)}/index.ts`);
     const typeDecls = renderTypeDeclarations(spec, true);
     const handlerBridgeTypeName = `${spec.widgetName}HandlerBridge`;
@@ -2103,8 +2750,13 @@ function renderNodeExpressWsIndex(spec) {
         .map((member) => {
         const ret = mapTypeTextToTs(member.payloadTypeText ?? "void");
         const args = nodeParamArgs(member);
+        const paramSites = member.parameters.map((p) => (0, structured_top_level_codecs_1.getStructuredParameterSite)(codecCatalog, service.name, member.name, p.name));
+        const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, service.name, member.name);
+        const encodedArgs = member.parameters.length > 0
+            ? `[${member.parameters.map((p, index) => `${paramSites[index] ? `encode${paramSites[index].codecId}(${p.name})` : p.name}`).join(", ")}]`
+            : "[]";
         return `  ${service.name}_${member.name}(${args}${args ? ", " : ""}timeoutMs = this.defaultSlotTimeoutMs): Promise<${ret}> {
-    return this.invokeSlot("${service.name}", "${member.name}", ${nodeParamValues(member)}, timeoutMs) as Promise<${ret}>;
+    return this.invokeSlot("${service.name}", "${member.name}", ${encodedArgs}, timeoutMs).then((value) => ${payloadSite ? `decode${payloadSite.codecId}(value)` : `value as ${ret}`});
   }`;
     }))
         .join("\n");
@@ -2113,8 +2765,9 @@ function renderNodeExpressWsIndex(spec) {
         .filter((member) => member.kind === "Output" && member.payloadTypeText)
         .map((member) => {
         const typeText = mapTypeTextToTs(member.payloadTypeText);
+        const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, service.name, member.name);
         return `  set${service.name}_${nodeCap(member.name)}(value: ${typeText}): void {
-    this.setOutputValue("${service.name}", "${member.name}", value);
+    this.setOutputValue("${service.name}", "${member.name}", ${payloadSite ? `encode${payloadSite.codecId}(value)` : "value"});
   }`;
     }))
         .join("\n");
@@ -2167,8 +2820,9 @@ function renderNodeExpressWsIndex(spec) {
             .filter((member) => (member.kind === "Input" || member.kind === "Output") && member.payloadTypeText)
             .map((member) => {
             const typeText = mapTypeTextToTs(member.payloadTypeText);
+            const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, service.name, member.name);
             if (member.kind === "Input") {
-                return `            ${member.name}: {\n              get: () => session.readInput("${service.name}", "${member.name}") as Promise<${typeText}>,\n              on: (handler: (value: ${typeText}) => void) => session.onInput("${service.name}", "${member.name}", handler as (value: unknown) => void)\n            },`;
+                return `            ${member.name}: {\n              get: () => session.readInput("${service.name}", "${member.name}").then((value) => ${payloadSite ? `decode${payloadSite.codecId}(value)` : `value as ${typeText}`}),\n              on: (handler: (value: ${typeText}) => void) => session.onInput("${service.name}", "${member.name}", (value) => handler(${payloadSite ? `decode${payloadSite.codecId}(value)` : `value as ${typeText}`}))\n            },`;
             }
             return `            ${member.name}: {\n              set: (value: ${typeText}) => session.set${service.name}_${nodeCap(member.name)}(value)\n            },`;
         })
@@ -2180,6 +2834,11 @@ function renderNodeExpressWsIndex(spec) {
         .flatMap((service) => service.members
         .filter((member) => member.kind === "Call" && member.payloadTypeText)
         .map((member) => {
+        const paramSites = member.parameters.map((p) => (0, structured_top_level_codecs_1.getStructuredParameterSite)(codecCatalog, service.name, member.name, p.name));
+        const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, service.name, member.name);
+        const decodedArgs = member.parameters.length > 0
+            ? member.parameters.map((p, index) => `${paramSites[index] ? `decode${paramSites[index].codecId}(args[${index}])` : `args[${index}] as ${mapTypeTextToTs(p.typeText)}`}`).join(", ")
+            : "";
         return `    if (service === "${service.name}" && member === "${member.name}") {
       const handler = implementation.${service.name}.${member.name};
       if (typeof handler !== "function") {
@@ -2202,8 +2861,8 @@ function renderNodeExpressWsIndex(spec) {
         });
         throw err;
       }
-      Promise.resolve(handler(buildHandlerBridge(session), ...(args as ${nodeParamTuple(member)})))
-        .then((result) => sendJson(session.socket, { type: "callResult", requestId, result }))
+      Promise.resolve(handler(buildHandlerBridge(session)${decodedArgs ? `, ${decodedArgs}` : ""}))
+        .then((result) => sendJson(session.socket, { type: "callResult", requestId, result: ${payloadSite ? `encode${payloadSite.codecId}(result)` : "result"} }))
         .catch((error) => {
           const message = error instanceof Error ? error.message : String(error);
           emitDiagnostic({
@@ -2231,6 +2890,13 @@ function renderNodeExpressWsIndex(spec) {
         .flatMap((service) => service.members
         .filter((member) => member.kind === "Emitter")
         .map((member) => {
+        const paramSites = member.parameters.map((p) => (0, structured_top_level_codecs_1.getStructuredParameterSite)(codecCatalog, service.name, member.name, p.name));
+        const decodedArgs = member.parameters.length > 0
+            ? member.parameters.map((p, index) => `${paramSites[index] ? `decode${paramSites[index].codecId}(args[${index}])` : `args[${index}] as ${mapTypeTextToTs(p.typeText)}`}`).join(", ")
+            : "";
+        const decodedSignalArgs = member.parameters.length > 0
+            ? `[${member.parameters.map((p, index) => `${paramSites[index] ? `decode${paramSites[index].codecId}(args[${index}])` : `args[${index}] as ${mapTypeTextToTs(p.typeText)}`}`).join(", ")}]`
+            : "[]";
         return `    if (service === "${service.name}" && member === "${member.name}") {
       const handler = implementation.${service.name}.${member.name};
       if (typeof handler !== "function") {
@@ -2247,7 +2913,8 @@ function renderNodeExpressWsIndex(spec) {
         });
         throw err;
       }
-      void Promise.resolve(handler(buildHandlerBridge(session), ...(args as ${nodeParamTuple(member)}))).catch((error) => {
+      session.emitSignal(service, member, ${decodedSignalArgs});
+      void Promise.resolve(handler(buildHandlerBridge(session)${decodedArgs ? `, ${decodedArgs}` : ""})).catch((error) => {
         const message = error instanceof Error ? error.message : String(error);
         emitDiagnostic({
           code: "EmitterHandlerError",
@@ -2268,6 +2935,7 @@ function renderNodeExpressWsIndex(spec) {
         .flatMap((service) => service.members
         .filter((member) => member.kind === "Input" && member.payloadTypeText)
         .map((member) => {
+        const payloadSite = (0, structured_top_level_codecs_1.getStructuredPayloadSite)(codecCatalog, service.name, member.name);
         return `    if (service === "${service.name}" && member === "${member.name}") {
       const handler = implementation.${service.name}.${member.name};
       if (typeof handler !== "function") {
@@ -2284,7 +2952,9 @@ function renderNodeExpressWsIndex(spec) {
         });
         throw err;
       }
-      void Promise.resolve(handler(buildHandlerBridge(session), value as ${mapTypeTextToTs(member.payloadTypeText)})).catch((error) => {
+      const decodedValue = ${payloadSite ? `decode${payloadSite.codecId}(value)` : `value as ${mapTypeTextToTs(member.payloadTypeText)}`};
+      session.setInputState(service, member, decodedValue);
+      void Promise.resolve(handler(buildHandlerBridge(session), decodedValue)).catch((error) => {
         const message = error instanceof Error ? error.message : String(error);
         emitDiagnostic({
           code: "InputHandlerError",
@@ -2306,6 +2976,9 @@ import type { WebSocket, WebSocketServer } from "ws";
 ${typeImports}
 ${typeDecls}
 
+// Structured/top-level codec helpers
+${(0, structured_top_level_codecs_1.renderTsStructuredCodecHelpers)(codecCatalog)}
+
 ${handlerInterfaces}
 
 export interface ${spec.widgetName}NodeImplementation {
@@ -2672,7 +3345,6 @@ ${callDispatch}
       const service = String(message.service ?? "");
       const member = String(message.member ?? "");
       const args = Array.isArray(message.args) ? (message.args as unknown[]) : [];
-      session.emitSignal(service, member, args);
 ${emitterDispatch}
       const err = new Error(\`No Emitter mapping found for \${service}.\${member}\`);
       emitDiagnostic({
@@ -2691,7 +3363,6 @@ ${emitterDispatch}
       const service = String(message.service ?? "");
       const member = String(message.member ?? "");
       const value = message.value;
-      session.setInputState(service, member, value);
 ${inputDispatch}
       const err = new Error(\`No Input mapping found for \${service}.\${member}\`);
       emitDiagnostic({
@@ -2985,13 +3656,15 @@ function renderQtIntegrationCMake(widgetName) {
     const generatedRootVar = "ANQST_GENERATED_WIDGET_DIR";
     const generatedIncludeVar = "ANQST_GENERATED_INCLUDE_DIR";
     const projectRootVar = "ANQST_PROJECT_ROOT";
+    const requiredFilesVar = "ANQST_REQUIRED_GENERATED_FILES";
+    const widgetBinaryDirVar = "ANQST_GENERATED_WIDGET_BINARY_DIR";
     const widgetTarget = `${widgetName}Widget`;
-    const autogenTarget = `${widgetTarget}_anqst_codegen`;
     return `cmake_minimum_required(VERSION 3.21)
 
 set(${projectRootVar} "\${CMAKE_CURRENT_LIST_DIR}/../../../../..")
 set(${generatedRootVar} "\${CMAKE_CURRENT_LIST_DIR}/../qt/${generatedCppLibraryDirName(widgetName)}")
 set(${generatedIncludeVar} "\${${generatedRootVar}}/include")
+set(${widgetBinaryDirVar} "\${CMAKE_CURRENT_BINARY_DIR}/${generatedCppLibraryDirName(widgetName)}")
 
 if(TARGET ${widgetTarget})
     return()
@@ -3001,66 +3674,27 @@ if(NOT TARGET anqstwebhostbase)
     message(FATAL_ERROR "Target 'anqstwebhostbase' must exist before including generated AnQst CMake for ${widgetName}.")
 endif()
 
-find_package(Qt5 REQUIRED COMPONENTS Core Widgets)
-set(CMAKE_AUTOMOC ON)
-set(CMAKE_AUTOUIC ON)
-set(CMAKE_AUTORCC ON)
-
-find_program(ANQST_NPM_EXECUTABLE npm REQUIRED)
-find_program(ANQST_NPX_EXECUTABLE npx REQUIRED)
-
-add_custom_command(
-    OUTPUT
-        "\${${generatedRootVar}}/CMakeLists.txt"
-        "\${${generatedRootVar}}/${widgetName}.qrc"
-        "\${${generatedRootVar}}/${widgetName}.cpp"
-        "\${${generatedIncludeVar}}/${widgetName}.h"
-        "\${${generatedIncludeVar}}/${widgetName}Widget.h"
-        "\${${generatedIncludeVar}}/${widgetName}Types.h"
-        "\${${generatedRootVar}}/webapp/index.html"
-    COMMAND "\${ANQST_NPM_EXECUTABLE}" install
-    COMMAND "\${ANQST_NPX_EXECUTABLE}" anqst build
-    WORKING_DIRECTORY "\${${projectRootVar}}"
-    COMMENT "Generating AnQst widget library (${widgetTarget}) from Angular project"
-    VERBATIM
-)
-
-add_custom_target(${autogenTarget}
-    DEPENDS
-        "\${${generatedRootVar}}/CMakeLists.txt"
-        "\${${generatedRootVar}}/${widgetName}.qrc"
-        "\${${generatedRootVar}}/${widgetName}.cpp"
-        "\${${generatedIncludeVar}}/${widgetName}.h"
-        "\${${generatedIncludeVar}}/${widgetName}Widget.h"
-        "\${${generatedIncludeVar}}/${widgetName}Types.h"
-        "\${${generatedRootVar}}/webapp/index.html"
-)
-
-set_source_files_properties(
+set(${requiredFilesVar}
+    "\${${generatedRootVar}}/CMakeLists.txt"
     "\${${generatedRootVar}}/${widgetName}.qrc"
     "\${${generatedRootVar}}/${widgetName}.cpp"
     "\${${generatedIncludeVar}}/${widgetName}.h"
     "\${${generatedIncludeVar}}/${widgetName}Widget.h"
     "\${${generatedIncludeVar}}/${widgetName}Types.h"
-    PROPERTIES GENERATED TRUE
+    "\${${generatedRootVar}}/webapp/index.html"
 )
 
-add_library(${widgetTarget}
-    "\${${generatedRootVar}}/${widgetName}.qrc"
-    "\${${generatedRootVar}}/${widgetName}.cpp"
-    "\${${generatedIncludeVar}}/${widgetName}.h"
-    "\${${generatedIncludeVar}}/${widgetName}Widget.h"
-    "\${${generatedIncludeVar}}/${widgetName}Types.h"
-)
-add_dependencies(${widgetTarget} ${autogenTarget})
-target_include_directories(${widgetTarget}
-    PUBLIC
-        "\${${generatedIncludeVar}}"
-)
-target_link_libraries(${widgetTarget}
-    PUBLIC
-        anqstwebhostbase
-)
+foreach(required_file IN LISTS ${requiredFilesVar})
+    if(NOT EXISTS "\${required_file}")
+        message(FATAL_ERROR
+            "Generated AnQst widget tree is incomplete for ${widgetName}. "
+            "Missing file: \${required_file}. "
+            "Run 'npx anqst build' in '\${${projectRootVar}}' first."
+        )
+    endif()
+endforeach()
+
+add_subdirectory("\${${generatedRootVar}}" "\${${widgetBinaryDirVar}}")
 `;
 }
 function installQtIntegrationCMake(cwd, widgetName) {