@antglobal/copilot-cards-mini-program 0.0.0 → 1.0.0

package/dist/components/card-input/index.acss

@@ -0,0 +1,24 @@
+.card-input {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-input__label {
+  font-size: 28rpx;
+  color: #333333;
+  margin-bottom: 8rpx;
+}
+
+.card-input__field {
+  border: 1rpx solid #D9D9D9;
+  border-radius: 8rpx;
+  padding: 16rpx 24rpx;
+  font-size: 28rpx;
+  color: #333333;
+  background-color: #FFFFFF;
+}
+
+.card-input__field--disabled {
+  background-color: #F5F5F5;
+  color: #C0C0C0;
+}

package/dist/components/card-input/index.axml

@@ -0,0 +1,16 @@
+<!-- card-input: Alipay template -->
+<view class="card-input" style="{{node.props._styleString || ''}}">
+  <text a:if="{{node.props.label}}" class="card-input__label">{{node.props.label}}</text>
+  <input
+    class="card-input__field {{node.disabled ? 'card-input__field--disabled' : ''}}"
+    type="{{node.props.type || 'text'}}"
+    password="{{node.props.type === 'password'}}"
+    placeholder="{{node.props.placeholder || ''}}"
+    value="{{node.props.value || ''}}"
+    disabled="{{node.disabled}}"
+    maxlength="{{node.props.maxLength || -1}}"
+    onInput="onInput"
+    onBlur="onChange"
+    onConfirm="onConfirm"
+  />
+</view>

package/dist/components/card-input/index.d.ts

@@ -0,0 +1,25 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-input — Input component for mini-program.
+ * Supports text/password/number types with placeholder and label.
+ */
+
+interface CardInputInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardInputComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        onInput(this: CardInputInstance, e: any): void;
+        onChange(this: CardInputInstance, e: any): void;
+        onConfirm(this: CardInputInstance, e: any): void;
+    };
+};
+
+export { createCardInputComponent };

package/dist/components/card-input/index.js

@@ -0,0 +1,46 @@
+/**
+ * card-input — Input component for mini-program.
+ * Supports text/password/number types with placeholder and label.
+ */
+function createCardInputComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            onInput(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onInput',
+                    value,
+                });
+            },
+            onChange(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onChange',
+                    value,
+                });
+            },
+            onConfirm(e) {
+                const value = e.detail?.value ?? '';
+                if (!this.props.node)
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onSubmit',
+                    value,
+                });
+            },
+        },
+    };
+}
+
+export { createCardInputComponent };
+//# sourceMappingURL=index.js.map

package/dist/components/card-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-input/index.wxml

@@ -0,0 +1,16 @@
+<!-- card-input: WeChat template -->
+<view class="card-input" style="{{node.props._styleString || ''}}">
+  <text wx:if="{{node.props.label}}" class="card-input__label">{{node.props.label}}</text>
+  <input
+    class="card-input__field {{node.disabled ? 'card-input__field--disabled' : ''}}"
+    type="{{node.props.type || 'text'}}"
+    password="{{node.props.type === 'password'}}"
+    placeholder="{{node.props.placeholder || ''}}"
+    value="{{node.props.value || ''}}"
+    disabled="{{node.disabled}}"
+    maxlength="{{node.props.maxLength || -1}}"
+    bindinput="onInput"
+    bindblur="onChange"
+    bindconfirm="onConfirm"
+  />
+</view>

package/dist/components/card-node/index.acss

@@ -0,0 +1,5 @@
+.card-container {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}

package/dist/components/card-node/index.axml

@@ -0,0 +1,27 @@
+<!-- card-node: Alipay recursive dispatcher template -->
+<block a:if="{{node && node.visible}}">
+  <!-- Text -->
+  <card-text a:if="{{node.type === 'Text'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Button -->
+  <card-button a:elif="{{node.type === 'Button'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Image -->
+  <card-image a:elif="{{node.type === 'Image'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Input -->
+  <card-input a:elif="{{node.type === 'Input'}}" node="{{node}}" onEvent="onEvent" />
+
+  <!-- Divider -->
+  <card-divider a:elif="{{node.type === 'Divider'}}" node="{{node}}" />
+
+  <!-- Default container (unknown type or layout container) -->
+  <view a:else class="card-container card-{{node.type}}" style="{{node.props._styleString || ''}}">
+    <card-node
+      a:for="{{node.children}}"
+      a:key="id"
+      node="{{item}}"
+      onEvent="onEvent"
+    />
+  </view>
+</block>

package/dist/components/card-node/index.d.ts

@@ -0,0 +1,31 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-node — Recursive dispatcher component.
+ *
+ * Receives a MiniProgramRenderNode and dispatches rendering
+ * to the appropriate typed component based on node.type.
+ * For unknown types, renders as a generic container with children.
+ */
+
+interface CardNodeInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardNodeComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        /**
+         * Bubble events up to card-root.
+         * Each leaf component calls triggerEvent('event', { nodeId, eventName, ... })
+         * which flows through card-node → card-root.
+         */
+        onEvent(this: CardNodeInstance, e: any): void;
+    };
+};
+
+export { createCardNodeComponent };

package/dist/components/card-node/index.js

@@ -0,0 +1,29 @@
+/**
+ * card-node — Recursive dispatcher component.
+ *
+ * Receives a MiniProgramRenderNode and dispatches rendering
+ * to the appropriate typed component based on node.type.
+ * For unknown types, renders as a generic container with children.
+ */
+// ─── Component Definition ────────────────────────────────────────
+function createCardNodeComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            /**
+             * Bubble events up to card-root.
+             * Each leaf component calls triggerEvent('event', { nodeId, eventName, ... })
+             * which flows through card-node → card-root.
+             */
+            onEvent(e) {
+                // Pass through to parent
+                this.triggerEvent('event', e.detail ?? e);
+            },
+        },
+    };
+}
+
+export { createCardNodeComponent };
+//# sourceMappingURL=index.js.map

package/dist/components/card-node/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-node/index.wxml

@@ -0,0 +1,27 @@
+<!-- card-node: WeChat recursive dispatcher template -->
+<block wx:if="{{node && node.visible}}">
+  <!-- Text -->
+  <card-text wx:if="{{node.type === 'Text'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Button -->
+  <card-button wx:elif="{{node.type === 'Button'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Image -->
+  <card-image wx:elif="{{node.type === 'Image'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Input -->
+  <card-input wx:elif="{{node.type === 'Input'}}" node="{{node}}" bind:event="onEvent" />
+
+  <!-- Divider -->
+  <card-divider wx:elif="{{node.type === 'Divider'}}" node="{{node}}" />
+
+  <!-- Default container (unknown type or layout container) -->
+  <view wx:else class="card-container card-{{node.type}}" style="{{node.props._styleString || ''}}">
+    <card-node
+      wx:for="{{node.children}}"
+      wx:key="id"
+      node="{{item}}"
+      bind:event="onEvent"
+    />
+  </view>
+</block>

package/dist/components/card-root/index.acss

@@ -0,0 +1,4 @@
+.copilot-card-root {
+  width: 100%;
+  box-sizing: border-box;
+}

package/dist/components/card-root/index.axml

@@ -0,0 +1,4 @@
+<!-- card-root: Alipay mini-program template -->
+<view class="copilot-card-root">
+  <card-node a:if="{{tree}}" node="{{tree}}" onEvent="handleEvent" />
+</view>

package/dist/components/card-root/index.d.ts

@@ -0,0 +1,78 @@
+import { MiniProgramRenderNode, MiniProgramCardInstance } from '../../renderer/index.js';
+import { MiniProgramAdapter } from '../../adapter/index.js';
+import { CardSchemaInput } from '@antglobal/copilot-cards-core';
+
+/**
+ * card-root — Root container component for mini-program card rendering.
+ *
+ * This is the entry point component that accepts a CardSchema,
+ * initializes the renderer, and drives the recursive rendering pipeline.
+ *
+ * Usage in page AXML/WXML:
+ * ```xml
+ * <card-root schema="{{cardSchema}}" variables="{{variables}}" />
+ * ```
+ */
+
+interface CardRootProps {
+    /** The card schema JSON */
+    schema: CardSchemaInput | null;
+    /** External variables to merge */
+    variables: Record<string, any> | null;
+    /** Platform adapter instance (injected from page) */
+    adapter: MiniProgramAdapter | null;
+    /** Bot ID for bot-scoped action handlers */
+    botId: string;
+}
+interface CardRootData {
+    tree: MiniProgramRenderNode | null;
+}
+/**
+ * Mini-program component instance interface.
+ * This is the `this` context inside Component() methods.
+ */
+interface CardRootInstance {
+    props: CardRootProps;
+    data: CardRootData;
+    _instance: MiniProgramCardInstance | null;
+    setData(data: Partial<CardRootData>): void;
+    triggerEvent(name: string, detail?: any): void;
+}
+/**
+ * Create the card-root component definition object.
+ *
+ * This returns a plain object that can be passed to the platform's
+ * `Component()` constructor (Alipay or WeChat).
+ *
+ * @example
+ * ```ts
+ * // Alipay
+ * Component(createCardRootComponent());
+ *
+ * // WeChat
+ * Component(createCardRootComponent());
+ * ```
+ */
+declare function createCardRootComponent(): {
+    props: {
+        schema: null;
+        variables: null;
+        adapter: null;
+        botId: string;
+    };
+    data: {
+        tree: null;
+    };
+    didMount(this: CardRootInstance): void;
+    attached(this: CardRootInstance): void;
+    didUpdate(this: CardRootInstance, prevProps: CardRootProps): void;
+    didUnmount(this: CardRootInstance): void;
+    detached(this: CardRootInstance): void;
+    methods: {
+        handleEvent(this: CardRootInstance, e: any): Promise<void>;
+    };
+    _instance: MiniProgramCardInstance | null;
+};
+
+export { createCardRootComponent };
+export type { CardRootData, CardRootProps };

package/dist/components/card-root/index.js

@@ -0,0 +1,94 @@
+import { renderForMiniProgram } from '../../renderer/index.js';
+
+/**
+ * card-root — Root container component for mini-program card rendering.
+ *
+ * This is the entry point component that accepts a CardSchema,
+ * initializes the renderer, and drives the recursive rendering pipeline.
+ *
+ * Usage in page AXML/WXML:
+ * ```xml
+ * <card-root schema="{{cardSchema}}" variables="{{variables}}" />
+ * ```
+ */
+// ─── Component Definition ────────────────────────────────────────
+/**
+ * Create the card-root component definition object.
+ *
+ * This returns a plain object that can be passed to the platform's
+ * `Component()` constructor (Alipay or WeChat).
+ *
+ * @example
+ * ```ts
+ * // Alipay
+ * Component(createCardRootComponent());
+ *
+ * // WeChat
+ * Component(createCardRootComponent());
+ * ```
+ */
+function createCardRootComponent() {
+    function init(ctx) {
+        if (!ctx.props.schema || !ctx.props.adapter) {
+            console.warn('[card-root] Missing schema or adapter prop');
+            return;
+        }
+        ctx._instance = renderForMiniProgram(ctx.props.schema, {
+            adapter: ctx.props.adapter,
+            data: ctx.props.variables ?? undefined,
+            botId: ctx.props.botId || undefined,
+            onEmit: (eventName, payload) => {
+                ctx.triggerEvent('emit', { eventName, payload });
+            },
+        });
+        ctx.setData({ tree: ctx._instance.getData().tree });
+    }
+    return {
+        props: {
+            schema: null,
+            variables: null,
+            adapter: null,
+            botId: '',
+        },
+        data: {
+            tree: null,
+        },
+        // Alipay lifecycle
+        didMount() {
+            init(this);
+        },
+        // WeChat lifecycle
+        attached() {
+            init(this);
+        },
+        didUpdate(prevProps) {
+            if (prevProps.variables !== this.props.variables && this._instance) {
+                const result = this._instance.updateVariables(this.props.variables ?? {});
+                this.setData({ tree: result.tree });
+            }
+        },
+        didUnmount() {
+            this._instance?.dispose();
+            this._instance = null;
+        },
+        detached() {
+            this._instance?.dispose();
+            this._instance = null;
+        },
+        methods: {
+            async handleEvent(e) {
+                const detail = e.detail ?? e.target?.dataset ?? {};
+                const { nodeId, eventName } = detail;
+                if (!nodeId || !eventName || !this._instance)
+                    return;
+                await this._instance.handleEvent(nodeId, eventName, detail.value ?? detail);
+                // Re-sync data after event handling (variables may have changed)
+                this.setData({ tree: this._instance.getData().tree });
+            },
+        },
+        _instance: null,
+    };
+}
+
+export { createCardRootComponent };
+//# sourceMappingURL=index.js.map

package/dist/components/card-root/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-root/index.wxml

@@ -0,0 +1,4 @@
+<!-- card-root: WeChat mini-program template -->
+<view class="copilot-card-root">
+  <card-node wx:if="{{tree}}" node="{{tree}}" bind:event="handleEvent" />
+</view>

package/dist/components/card-text/index.acss

@@ -0,0 +1,11 @@
+.card-text {
+  word-break: break-word;
+}
+
+.card-text--bold {
+  font-weight: 600;
+}
+
+.card-text--italic {
+  font-style: italic;
+}

package/dist/components/card-text/index.axml

@@ -0,0 +1,8 @@
+<!-- card-text: Alipay template -->
+<view
+  class="card-text {{node.props.bold ? 'card-text--bold' : ''}} {{node.props.italic ? 'card-text--italic' : ''}}"
+  style="font-size: {{node.props.fontSize || '14px'}}; color: {{node.props.color || '#333333'}}; line-height: {{node.props.lineHeight || '1.5'}}; text-align: {{node.props.textAlign || 'left'}}; {{node.props.style ? node.props._styleString : ''}}"
+  onTap="onTap"
+>
+  <text>{{node.props.content}}</text>
+</view>

package/dist/components/card-text/index.d.ts

@@ -0,0 +1,23 @@
+import { MiniProgramRenderNode } from '../../renderer/index.js';
+
+/**
+ * card-text — Text component for mini-program.
+ * Renders text content with styling support.
+ */
+
+interface CardTextInstance {
+    props: {
+        node: MiniProgramRenderNode | null;
+    };
+    triggerEvent(name: string, detail?: any): void;
+}
+declare function createCardTextComponent(): {
+    props: {
+        node: null;
+    };
+    methods: {
+        onTap(this: CardTextInstance): void;
+    };
+};
+
+export { createCardTextComponent };

package/dist/components/card-text/index.js

@@ -0,0 +1,24 @@
+/**
+ * card-text — Text component for mini-program.
+ * Renders text content with styling support.
+ */
+function createCardTextComponent() {
+    return {
+        props: {
+            node: null,
+        },
+        methods: {
+            onTap() {
+                if (!this.props.node?.events.includes('onClick'))
+                    return;
+                this.triggerEvent('event', {
+                    nodeId: this.props.node.id,
+                    eventName: 'onClick',
+                });
+            },
+        },
+    };
+}
+
+export { createCardTextComponent };
+//# sourceMappingURL=index.js.map

package/dist/components/card-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/card-text/index.wxml

@@ -0,0 +1,8 @@
+<!-- card-text: WeChat template -->
+<view
+  class="card-text {{node.props.bold ? 'card-text--bold' : ''}} {{node.props.italic ? 'card-text--italic' : ''}}"
+  style="font-size: {{node.props.fontSize || '14px'}}; color: {{node.props.color || '#333333'}}; line-height: {{node.props.lineHeight || '1.5'}}; text-align: {{node.props.textAlign || 'left'}}; {{node.props.style ? node.props._styleString : ''}}"
+  bindtap="onTap"
+>
+  <text>{{node.props.content}}</text>
+</view>

package/dist/events/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Event system utilities for mini-program card components.
+ *
+ * Maps between schema event names and mini-program native events,
+ * and provides helpers for event bubbling.
+ */
+/**
+ * Map from mini-program native event names to schema event names.
+ * Mini-program templates use `bindtap`, `bindinput`, etc.
+ * Schema uses `onClick`, `onInput`, etc.
+ */
+declare const nativeToSchemaEventMap: Record<string, string>;
+/**
+ * Map from schema event names to Alipay mini-program event bindings.
+ */
+declare const schemaToAlipayEventMap: Record<string, string>;
+/**
+ * Map from schema event names to WeChat mini-program event bindings.
+ */
+declare const schemaToWeChatEventMap: Record<string, string>;
+interface CardEventDetail {
+    /** The node ID that triggered the event */
+    nodeId: string;
+    /** The schema event name (e.g. 'onClick', 'onInput') */
+    eventName: string;
+    /** Optional event value (e.g. input value) */
+    value?: unknown;
+    /** Additional event data */
+    [key: string]: unknown;
+}
+/**
+ * Create a standardized event detail object for triggerEvent.
+ */
+declare function createEventDetail(nodeId: string, eventName: string, extra?: Record<string, unknown>): CardEventDetail;
+
+export { createEventDetail, nativeToSchemaEventMap, schemaToAlipayEventMap, schemaToWeChatEventMap };
+export type { CardEventDetail };

package/dist/events/index.js

@@ -0,0 +1,51 @@
+/**
+ * Event system utilities for mini-program card components.
+ *
+ * Maps between schema event names and mini-program native events,
+ * and provides helpers for event bubbling.
+ */
+// ─── Event Name Mapping ──────────────────────────────────────────
+/**
+ * Map from mini-program native event names to schema event names.
+ * Mini-program templates use `bindtap`, `bindinput`, etc.
+ * Schema uses `onClick`, `onInput`, etc.
+ */
+const nativeToSchemaEventMap = {
+    tap: 'onClick',
+    input: 'onInput',
+    change: 'onChange',
+    confirm: 'onSubmit',
+    blur: 'onChange',
+    longpress: 'onLongPress',
+};
+/**
+ * Map from schema event names to Alipay mini-program event bindings.
+ */
+const schemaToAlipayEventMap = {
+    onClick: 'onTap',
+    onInput: 'onInput',
+    onChange: 'onBlur',
+    onSubmit: 'onConfirm',
+};
+/**
+ * Map from schema event names to WeChat mini-program event bindings.
+ */
+const schemaToWeChatEventMap = {
+    onClick: 'bindtap',
+    onInput: 'bindinput',
+    onChange: 'bindblur',
+    onSubmit: 'bindconfirm',
+};
+/**
+ * Create a standardized event detail object for triggerEvent.
+ */
+function createEventDetail(nodeId, eventName, extra) {
+    return {
+        nodeId,
+        eventName,
+        ...extra,
+    };
+}
+
+export { createEventDetail, nativeToSchemaEventMap, schemaToAlipayEventMap, schemaToWeChatEventMap };
+//# sourceMappingURL=index.js.map

package/dist/events/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+export { MiniProgramAdapter, MiniProgramNavigateOptions, MiniProgramRequestOptions, MiniProgramResponse, MiniProgramSystemInfo, MiniProgramToastOptions } from './adapter/index.js';
+export { AlipayAdapter } from './adapter/alipay.js';
+export { WeChatAdapter } from './adapter/wechat.js';
+export { MiniProgramActionContextOptions, createMiniProgramActionContext } from './action-context/index.js';
+export { MiniProgramCardInstance, MiniProgramRenderNode, MiniProgramRendererOptions, renderForMiniProgram } from './renderer/index.js';
+export { createCardRootComponent } from './components/card-root/index.js';
+export { createCardNodeComponent } from './components/card-node/index.js';
+export { createCardTextComponent } from './components/card-text/index.js';
+export { createCardButtonComponent } from './components/card-button/index.js';
+export { createCardImageComponent } from './components/card-image/index.js';
+export { createCardInputComponent } from './components/card-input/index.js';
+export { createCardDividerComponent } from './components/card-divider/index.js';
+export { CardEventDetail, createEventDetail, nativeToSchemaEventMap, schemaToAlipayEventMap, schemaToWeChatEventMap } from './events/index.js';
+export { DataPatch, MiniProgramStreamingCardInstance, MiniProgramStreamingOptions, createStreamingCardInstance } from './streaming/index.js';
+export { ActionRunnerContext, ActionStep, CardSchema, CardSchemaInput, ElementNode, ExpressionContext, ExpressionValue, RenderTreeNode, convertLegacySchema, createLifecycleManager, hasExpression, isLegacySchema, normalizeSchema, parseSchema, registerActionHandler, resolveDeep, resolveExpression, runActionStep, runActionSteps, validateSchema } from '@antglobal/copilot-cards-core';
+export { transformNode, transformTree } from './renderer/transform.js';