@qafka/react-native 2.0.0

package/dist/cards/cta/dispatcher.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchCTA = void 0;
+const react_native_1 = require("react-native");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+/**
+ * SDK-internal CTA dispatcher.
+ * Resolves embedded `{{fieldName}}` templates against the card's data context at click time.
+ * Falls back to host callbacks for actions that cross the SDK boundary (deep_link, tool_trigger).
+ */
+const dispatchCTA = async (config, ctx) => {
+    const action = (0, resolveFieldName_1.resolveDeep)(config.action, ctx.data, ctx.iterationItem);
+    ctx.lifecycle.onCTAStart?.(action);
+    try {
+        const result = await runAction(action, ctx);
+        if (result.status === "success") {
+            ctx.lifecycle.onCTASuccess?.(action, result.result);
+        }
+        else if (result.status === "error") {
+            ctx.lifecycle.onCTAError?.(action, result.error);
+        }
+        return result;
+    }
+    catch (error) {
+        ctx.lifecycle.onCTAError?.(action, error);
+        return { status: "error", error };
+    }
+};
+exports.dispatchCTA = dispatchCTA;
+async function runAction(action, ctx) {
+    switch (action.type) {
+        case "external_navigation": {
+            if (!ctx.hostCallbacks.onExternalNavigation) {
+                return { status: "skipped", reason: "no onExternalNavigation handler registered" };
+            }
+            await ctx.hostCallbacks.onExternalNavigation(action);
+            return { status: "success" };
+        }
+        case "deep_link": {
+            if (!ctx.hostCallbacks.onDeepLink) {
+                return { status: "skipped", reason: "no onDeepLink handler registered" };
+            }
+            await ctx.hostCallbacks.onDeepLink(action.path, action);
+            return { status: "success" };
+        }
+        case "suggest_message": {
+            if (ctx.hostCallbacks.onSuggestMessage) {
+                await ctx.hostCallbacks.onSuggestMessage(action.text);
+                return { status: "success" };
+            }
+            return { status: "skipped", reason: "no onSuggestMessage handler registered" };
+        }
+        case "copy": {
+            if (ctx.hostCallbacks.onCopy) {
+                await ctx.hostCallbacks.onCopy(action.value);
+            }
+            else {
+                react_native_1.Clipboard.setString(action.value);
+            }
+            return { status: "success", result: { copied: action.value } };
+        }
+        case "dismiss": {
+            ctx.dismiss();
+            return { status: "success" };
+        }
+        case "share": {
+            if (ctx.hostCallbacks.onShare) {
+                await ctx.hostCallbacks.onShare({ text: action.text, url: action.url });
+            }
+            else {
+                await react_native_1.Share.share({
+                    message: action.text ?? action.url ?? "",
+                    url: action.url,
+                });
+            }
+            return { status: "success" };
+        }
+        case "tool_trigger": {
+            if (!ctx.hostCallbacks.onToolTrigger) {
+                return { status: "skipped", reason: "tool_trigger requires onToolTrigger callback" };
+            }
+            await ctx.hostCallbacks.onToolTrigger(action.toolName, action.params ?? {}, { ctaDisplayMode: action.ctaDisplayMode ?? "user_message" });
+            return { status: "success" };
+        }
+        default: {
+            const exhaustive = action;
+            return { status: "error", error: new Error(`Unknown CTA type: ${exhaustive.type}`) };
+        }
+    }
+}

package/dist/cards/cta/types.d.ts

@@ -0,0 +1,66 @@
+import type { ActionConfig, CardAction, CardActionType, ExternalNavigationAction } from "../types";
+/**
+ * Host-provided callbacks for CTA actions that cannot be handled inside the SDK
+ * (deep_link requires host navigation; tool_trigger requires backend roundtrip).
+ */
+export interface CardCTAHostCallbacks {
+    onDeepLink?: (path: string, action: CardAction) => void | Promise<void>;
+    onToolTrigger?: (toolName: string, params: Record<string, unknown>, meta: {
+        ctaDisplayMode: "user_message" | "silent";
+    }) => void | Promise<void>;
+    onExternalNavigation?: (action: ExternalNavigationAction) => void | Promise<void>;
+    onSuggestMessage?: (text: string) => void | Promise<void>;
+    onShare?: (payload: {
+        text?: string;
+        url?: string;
+    }) => void | Promise<void>;
+    onCopy?: (value: string) => void | Promise<void>;
+}
+export interface CardCTALifecycle {
+    onCTAStart?: (action: CardAction) => void;
+    onCTASuccess?: (action: CardAction, result?: unknown) => void;
+    onCTAError?: (action: CardAction, error: unknown) => void;
+    onCTAClick?: (event: CardCTATelemetryEvent) => void;
+}
+export interface CardCTATelemetryEvent {
+    event: "cta_click";
+    cardTemplateId: string;
+    cardSlug: string;
+    actionType: CardActionType;
+    toolName?: string;
+    messageId?: string;
+    /**
+    * Position in the list. Present only in list mode; omitted entirely for
+    * single-card / detail mode (avoids partners having to handle a `null`).
+    */
+    itemIndex?: number;
+    /**
+    * The bound data record for this card. In list mode this is the iterated
+    * item; in detail/single mode it's the full tool result. Lets partners
+    * react to the click without re-resolving from the original array.
+    */
+    item: unknown;
+    confirmed: boolean;
+}
+export interface CTADispatchContext {
+    data: unknown;
+    iterationItem?: unknown;
+    iterationIndex?: number;
+    cardTemplateId: string;
+    cardSlug: string;
+    messageId?: string;
+    hostCallbacks: CardCTAHostCallbacks;
+    lifecycle: CardCTALifecycle;
+    dismiss: () => void;
+}
+export type CTAResult = {
+    status: "success";
+    result?: unknown;
+} | {
+    status: "error";
+    error: unknown;
+} | {
+    status: "skipped";
+    reason: string;
+};
+export type CTADispatcher = (config: ActionConfig, ctx: CTADispatchContext) => Promise<CTAResult>;

package/dist/cards/cta/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cards/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Card renderer.
+ *
+ * Renders Qafka cards from JSON definitions.
+ */
+export { CardRenderer } from "./renderer/CardRenderer";
+export type { CardRendererProps } from "./renderer/CardRenderer";
+export { renderNode } from "./renderer/renderNode";
+export type { RenderContext } from "./renderer/renderNode";
+export { CardRuntimeProvider, useCardRuntime, } from "./cta/CardContext";
+export type { CardRuntimeContextValue } from "./cta/CardContext";
+export { dispatchCTA } from "./cta/dispatcher";
+export type { CardCTAHostCallbacks, CardCTALifecycle, CardCTATelemetryEvent, CTADispatchContext, CTADispatcher, CTAResult, } from "./cta/types";
+export { resolveFieldName, resolveTemplateString, resolveDeep, evaluateShowIf, } from "./bindings/resolveFieldName";
+export { QView } from "./primitives/QView";
+export { QText } from "./primitives/QText";
+export { QImage } from "./primitives/QImage";
+export { QIcon } from "./primitives/QIcon";
+export { QDivider } from "./primitives/QDivider";
+export { QButton } from "./primitives/QButton";

package/dist/cards/index.js

@@ -0,0 +1,34 @@
+"use strict";
+/**
+ * Card renderer.
+ *
+ * Renders Qafka cards from JSON definitions.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QButton = exports.QDivider = exports.QIcon = exports.QImage = exports.QText = exports.QView = exports.evaluateShowIf = exports.resolveDeep = exports.resolveTemplateString = exports.resolveFieldName = exports.dispatchCTA = exports.useCardRuntime = exports.CardRuntimeProvider = exports.renderNode = exports.CardRenderer = void 0;
+var CardRenderer_1 = require("./renderer/CardRenderer");
+Object.defineProperty(exports, "CardRenderer", { enumerable: true, get: function () { return CardRenderer_1.CardRenderer; } });
+var renderNode_1 = require("./renderer/renderNode");
+Object.defineProperty(exports, "renderNode", { enumerable: true, get: function () { return renderNode_1.renderNode; } });
+var CardContext_1 = require("./cta/CardContext");
+Object.defineProperty(exports, "CardRuntimeProvider", { enumerable: true, get: function () { return CardContext_1.CardRuntimeProvider; } });
+Object.defineProperty(exports, "useCardRuntime", { enumerable: true, get: function () { return CardContext_1.useCardRuntime; } });
+var dispatcher_1 = require("./cta/dispatcher");
+Object.defineProperty(exports, "dispatchCTA", { enumerable: true, get: function () { return dispatcher_1.dispatchCTA; } });
+var resolveFieldName_1 = require("./bindings/resolveFieldName");
+Object.defineProperty(exports, "resolveFieldName", { enumerable: true, get: function () { return resolveFieldName_1.resolveFieldName; } });
+Object.defineProperty(exports, "resolveTemplateString", { enumerable: true, get: function () { return resolveFieldName_1.resolveTemplateString; } });
+Object.defineProperty(exports, "resolveDeep", { enumerable: true, get: function () { return resolveFieldName_1.resolveDeep; } });
+Object.defineProperty(exports, "evaluateShowIf", { enumerable: true, get: function () { return resolveFieldName_1.evaluateShowIf; } });
+var QView_1 = require("./primitives/QView");
+Object.defineProperty(exports, "QView", { enumerable: true, get: function () { return QView_1.QView; } });
+var QText_1 = require("./primitives/QText");
+Object.defineProperty(exports, "QText", { enumerable: true, get: function () { return QText_1.QText; } });
+var QImage_1 = require("./primitives/QImage");
+Object.defineProperty(exports, "QImage", { enumerable: true, get: function () { return QImage_1.QImage; } });
+var QIcon_1 = require("./primitives/QIcon");
+Object.defineProperty(exports, "QIcon", { enumerable: true, get: function () { return QIcon_1.QIcon; } });
+var QDivider_1 = require("./primitives/QDivider");
+Object.defineProperty(exports, "QDivider", { enumerable: true, get: function () { return QDivider_1.QDivider; } });
+var QButton_1 = require("./primitives/QButton");
+Object.defineProperty(exports, "QButton", { enumerable: true, get: function () { return QButton_1.QButton; } });

package/dist/cards/primitives/QButton.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { QButtonNode } from "../types";
+interface QButtonProps {
+    node: QButtonNode;
+    data: unknown;
+    iterationItem?: unknown;
+    iterationIndex?: number;
+}
+export declare function QButton({ node, data, iterationItem, iterationIndex, }: QButtonProps): React.ReactElement | null;
+export {};

package/dist/cards/primitives/QButton.js

@@ -0,0 +1,115 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QButton = QButton;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+const CardContext_1 = require("../cta/CardContext");
+const dispatcher_1 = require("../cta/dispatcher");
+const VARIANT_STYLES = {
+    primary: {
+        container: { backgroundColor: "#111", borderRadius: 8, paddingVertical: 12, paddingHorizontal: 16 },
+        label: { color: "#fff", fontWeight: "600", fontSize: 14 },
+    },
+    secondary: {
+        container: { backgroundColor: "#f3f3f3", borderRadius: 8, paddingVertical: 12, paddingHorizontal: 16 },
+        label: { color: "#111", fontWeight: "600", fontSize: 14 },
+    },
+    ghost: {
+        container: { backgroundColor: "transparent", borderRadius: 8, paddingVertical: 12, paddingHorizontal: 16 },
+        label: { color: "#111", fontWeight: "500", fontSize: 14 },
+    },
+    destructive: {
+        container: { backgroundColor: "#d92d20", borderRadius: 8, paddingVertical: 12, paddingHorizontal: 16 },
+        label: { color: "#fff", fontWeight: "600", fontSize: 14 },
+    },
+};
+function QButton({ node, data, iterationItem, iterationIndex, }) {
+    const runtime = (0, CardContext_1.useCardRuntime)();
+    const [state, setState] = (0, react_1.useState)("idle");
+    const boundLabel = (0, resolveFieldName_1.resolveFieldName)(node.labelFieldName, data, iterationItem);
+    const label = typeof boundLabel === "string" ? boundLabel : (node.label ?? "");
+    const variant = VARIANT_STYLES[node.variant ?? "primary"];
+    const handlePress = (0, react_1.useCallback)(async () => {
+        if (state === "loading" || !node.action)
+            return;
+        setState("loading");
+        // `data` is whatever this card is bound against — the iterated item in
+        // list mode, the full tool result in detail mode. Either way, that's what
+        // the partner needs in the click event. `itemIndex` is only meaningful in
+        // list mode; omit it otherwise so partners don't see `null`.
+        runtime.lifecycle.onCTAClick?.({
+            event: "cta_click",
+            cardTemplateId: runtime.cardTemplateId,
+            cardSlug: runtime.cardSlug,
+            actionType: node.action.action.type,
+            messageId: runtime.messageId,
+            ...(typeof iterationIndex === "number" ? { itemIndex: iterationIndex } : {}),
+            item: data,
+            confirmed: !node.action.requiresConfirmation,
+        });
+        const result = await (0, dispatcher_1.dispatchCTA)(node.action, {
+            data: runtime.data,
+            iterationItem,
+            iterationIndex,
+            cardTemplateId: runtime.cardTemplateId,
+            cardSlug: runtime.cardSlug,
+            messageId: runtime.messageId,
+            hostCallbacks: runtime.hostCallbacks,
+            lifecycle: runtime.lifecycle,
+            dismiss: runtime.dismiss,
+        });
+        setState(result.status === "success" ? "success" : "error");
+        setTimeout(() => setState("idle"), 1200);
+    }, [state, node.action, runtime, iterationItem, iterationIndex]);
+    if (label === "" && !node.labelFieldName)
+        return null;
+    const disabled = state === "loading" || !node.action;
+    const containerStyle = {
+        ...variant.container,
+        opacity: disabled ? 0.6 : 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        ...node.style,
+    };
+    return (<react_native_1.Pressable onPress={handlePress} disabled={disabled} style={containerStyle}>
+ {state === "loading" ? (<react_native_1.ActivityIndicator size="small" color={variant.label.color}/>) : (<react_native_1.View>
+ <react_native_1.Text style={variant.label}>{label}</react_native_1.Text>
+ </react_native_1.View>)}
+ </react_native_1.Pressable>);
+}

package/dist/cards/primitives/QDivider.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { QDividerNode } from "../types";
+interface QDividerProps {
+    node: QDividerNode;
+}
+export declare function QDivider({ node }: QDividerProps): React.ReactElement;
+export {};

package/dist/cards/primitives/QDivider.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QDivider = QDivider;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function QDivider({ node }) {
+    const style = {
+        height: node.thickness ?? 1,
+        width: "100%",
+        backgroundColor: node.color ?? "rgba(0,0,0,0.1)",
+        ...node.style,
+    };
+    return <react_native_1.View style={style}/>;
+}

package/dist/cards/primitives/QIcon.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { QIconNode } from "../types";
+interface QIconProps {
+    node: QIconNode;
+    data: unknown;
+    iterationItem?: unknown;
+}
+/**
+ * Icon = unicode/emoji string rendered via <Text>. No icon font dependency.
+ * Future versions may add a pluggable icon resolver (e.g. `@expo/vector-icons`).
+ */
+export declare function QIcon({ node, data, iterationItem }: QIconProps): React.ReactElement | null;
+export {};

package/dist/cards/primitives/QIcon.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QIcon = QIcon;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+/**
+ * Icon = unicode/emoji string rendered via <Text>. No icon font dependency.
+ * Future versions may add a pluggable icon resolver (e.g. `@expo/vector-icons`).
+ */
+function QIcon({ node, data, iterationItem }) {
+    const bound = (0, resolveFieldName_1.resolveFieldName)(node.nameFieldName, data, iterationItem);
+    const name = typeof bound === "string" ? bound : node.name;
+    if (!name)
+        return null;
+    const style = {
+        fontSize: node.size ?? 16,
+        color: node.color,
+        lineHeight: node.size ?? 16,
+        ...node.style,
+    };
+    return <react_native_1.Text style={style}>{name}</react_native_1.Text>;
+}

package/dist/cards/primitives/QImage.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { QImageNode } from "../types";
+interface QImageProps {
+    node: QImageNode;
+    data: unknown;
+    iterationItem?: unknown;
+}
+export declare function QImage({ node, data, iterationItem }: QImageProps): React.ReactElement | null;
+export {};

package/dist/cards/primitives/QImage.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QImage = QImage;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+function QImage({ node, data, iterationItem }) {
+    const boundSrc = (0, resolveFieldName_1.resolveFieldName)(node.srcFieldName, data, iterationItem);
+    const src = typeof boundSrc === "string" ? boundSrc : node.src;
+    if (!src)
+        return null;
+    const style = {
+        width: "100%",
+        aspectRatio: node.aspectRatio ?? 1,
+        resizeMode: node.fit ?? "cover",
+        ...node.style,
+    };
+    return <react_native_1.Image source={{ uri: src }} style={style}/>;
+}

package/dist/cards/primitives/QText.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import type { QTextNode } from "../types";
+interface QTextProps {
+    node: QTextNode;
+    data: unknown;
+    iterationItem?: unknown;
+}
+export declare function QText({ node, data, iterationItem }: QTextProps): React.ReactElement | null;
+export {};

package/dist/cards/primitives/QText.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QText = QText;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+const VARIANT_STYLE = {
+    title: { fontSize: 18, fontWeight: "600", lineHeight: 24 },
+    body: { fontSize: 14, fontWeight: "400", lineHeight: 20 },
+    caption: { fontSize: 12, fontWeight: "400", lineHeight: 16, opacity: 0.7 },
+};
+function QText({ node, data, iterationItem }) {
+    const variantStyle = VARIANT_STYLE[node.variant ?? "body"];
+    const bound = (0, resolveFieldName_1.resolveFieldName)(node.fieldName, data, iterationItem);
+    const value = bound !== undefined ? String(bound) : (node.text ?? "");
+    if (value === "" && node.fieldName)
+        return null;
+    const style = {
+        ...variantStyle,
+        textAlign: node.align,
+        color: node.color,
+        ...node.style,
+    };
+    return (<react_native_1.Text style={style} numberOfLines={node.numberOfLines} ellipsizeMode={node.ellipsizeMode}>
+ {value}
+ </react_native_1.Text>);
+}

package/dist/cards/primitives/QView.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { QViewNode } from "../types";
+interface QViewProps {
+    node: QViewNode;
+    children?: React.ReactNode;
+}
+export declare function QView({ node, children }: QViewProps): React.ReactElement;
+export {};

package/dist/cards/primitives/QView.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QView = QView;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+function QView({ node, children }) {
+    const style = {
+        flexDirection: node.direction ?? "column",
+        gap: node.gap,
+        padding: node.padding,
+        backgroundColor: node.background,
+        borderRadius: node.borderRadius,
+        ...node.style,
+    };
+    return <react_native_1.View style={style}>{children}</react_native_1.View>;
+}

package/dist/cards/renderer/CardRenderer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { CardDefinition } from "../types";
+import type { CardCTAHostCallbacks, CardCTALifecycle } from "../cta/types";
+export interface CardRendererProps {
+    definition: CardDefinition;
+    data: unknown;
+    cardTemplateId: string;
+    cardSlug: string;
+    messageId?: string;
+    /**
+    * Position when this card is one of many in a list-mode render. Threaded
+    * down through renderNode so QButton can attach it to CTA telemetry events.
+    * Omit for single-card / detail mode.
+    */
+    iterationIndex?: number;
+    hostCallbacks?: CardCTAHostCallbacks;
+    lifecycle?: CardCTALifecycle;
+}
+export declare function CardRenderer({ definition, data, cardTemplateId, cardSlug, messageId, iterationIndex, hostCallbacks, lifecycle, }: CardRendererProps): React.ReactElement | null;

package/dist/cards/renderer/CardRenderer.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardRenderer = CardRenderer;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const CardContext_1 = require("../cta/CardContext");
+const renderNode_1 = require("./renderNode");
+function CardRenderer({ definition, data, cardTemplateId, cardSlug, messageId, iterationIndex, hostCallbacks = {}, lifecycle = {}, }) {
+    const [dismissed, setDismissed] = (0, react_1.useState)(false);
+    const dismiss = (0, react_1.useCallback)(() => setDismissed(true), []);
+    if (dismissed)
+        return null;
+    if (definition.schemaVersion !== 1) {
+        if (__DEV__) {
+            console.warn(`[card-renderer] Unsupported schemaVersion ${definition.schemaVersion}; skipping render.`);
+        }
+        return null;
+    }
+    const runtime = {
+        data,
+        cardTemplateId,
+        cardSlug,
+        messageId,
+        hostCallbacks,
+        lifecycle,
+        dismiss,
+    };
+    return (<CardContext_1.CardRuntimeProvider value={runtime}>
+ <react_native_1.View>{(0, renderNode_1.renderNode)(definition.root, { data, iterationIndex })}</react_native_1.View>
+ </CardContext_1.CardRuntimeProvider>);
+}

package/dist/cards/renderer/renderNode.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { CardNode } from "../types";
+export interface RenderContext {
+    data: unknown;
+    iterationItem?: unknown;
+    iterationIndex?: number;
+}
+/**
+ * Walks a CardNode tree and produces RN elements.
+ * Unknown components silently skip (whitelist enforcement at render layer).
+ * `showIf` evaluated against the same data context the node would bind against.
+ */
+export declare function renderNode(node: CardNode, ctx: RenderContext, key?: string | number): React.ReactNode;

package/dist/cards/renderer/renderNode.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderNode = renderNode;
+const react_1 = __importDefault(require("react"));
+const QView_1 = require("../primitives/QView");
+const QText_1 = require("../primitives/QText");
+const QImage_1 = require("../primitives/QImage");
+const QIcon_1 = require("../primitives/QIcon");
+const QDivider_1 = require("../primitives/QDivider");
+const QButton_1 = require("../primitives/QButton");
+const resolveFieldName_1 = require("../bindings/resolveFieldName");
+/**
+ * Walks a CardNode tree and produces RN elements.
+ * Unknown components silently skip (whitelist enforcement at render layer).
+ * `showIf` evaluated against the same data context the node would bind against.
+ */
+function renderNode(node, ctx, key) {
+    if (!(0, resolveFieldName_1.evaluateShowIf)(node.showIf, ctx.data, ctx.iterationItem))
+        return null;
+    const children = node.children?.map((child, idx) => renderNode(child, ctx, `${key ?? "n"}-${idx}`));
+    switch (node.component) {
+        case "QView":
+            return (<QView_1.QView key={key} node={node}>
+ {children}
+ </QView_1.QView>);
+        case "QText":
+            return <QText_1.QText key={key} node={node} data={ctx.data} iterationItem={ctx.iterationItem}/>;
+        case "QImage":
+            return <QImage_1.QImage key={key} node={node} data={ctx.data} iterationItem={ctx.iterationItem}/>;
+        case "QIcon":
+            return <QIcon_1.QIcon key={key} node={node} data={ctx.data} iterationItem={ctx.iterationItem}/>;
+        case "QDivider":
+            return <QDivider_1.QDivider key={key} node={node}/>;
+        case "QButton":
+            return (<QButton_1.QButton key={key} node={node} data={ctx.data} iterationItem={ctx.iterationItem} iterationIndex={ctx.iterationIndex}/>);
+        default:
+            return null;
+    }
+}