vrtalk-web-sdk 0.1.530 → 0.1.532

package/dist/src/model/general/index.d.ts

@@ -7,6 +7,7 @@ export * from './goto-position';
 export * from './hover-border-settings';
 export * from './multi-language-str';
 export * from './renderer';
+export * from './tintable-icon-ref';
 export * from './vector';
 export * from './vr-media';
 export * from './vrtalk-base-data';

package/dist/src/model/general/tintable-icon-ref.d.ts

@@ -0,0 +1,18 @@
+import { Color } from './color';
+/**
+ * 可染色图标引用
+ *
+ * 用于"图标库 + 媒体库"双选场景。url 是最终 src（无论来自哪边都填这个），
+ * 当图标来自图标库时再额外写 iconCategory / iconFilename 用于回显已选项；
+ * 从媒体库选的图标，这两个字段留空即可。
+ *
+ * colorEnabled = true 时渲染端用 mask-image 把不透明像素 tint 成 color
+ *（适合 mono 图标；color 图标可关掉 colorEnabled 保持原色）。
+ */
+export declare class TintableIconRef {
+    url: string;
+    iconCategory: string;
+    iconFilename: string;
+    colorEnabled: boolean;
+    color: Color;
+}

package/dist/src/model/vr/index.d.ts

@@ -1,6 +1,7 @@
 export * from './vr-action';
 export * from './vr-action-platform-capability';
-export * from './popup-user-form-icons';
+export * from './xr-interaction-control';
+export * from './xr-bound-variable-control';
 export * from './vr-ad-channel';
 export * from './vr-ad-item';
 export * from './vr-ai-settings';

package/dist/src/model/vr/vr-action.d.ts

@@ -3,6 +3,7 @@ import { XrMessageCard } from './xr-message-card';
 import { VrComponent2dDeformationSettings } from '../vr-component/vr-component-data';
 import { XrTypedValue, XrVariableScopeType, XrVariableTarget } from './xr-logic';
 import { MultiLanguageStr } from '../general/multi-language-str';
+import { XrInteractionControlConfig, XrInteractionDataType } from './xr-interaction-control';
 export declare type XrActionCategory = 'basic' | 'condition' | 'count_loop' | 'expression_loop';
 export declare class XrActionCategoryDefine {
     static readonly BASIC: XrActionCategory;
@@ -581,126 +582,15 @@ export declare class VrActionParamsHitAnalyticsEvent {
     analyticsEventDataKey: string;
     fieldBindings: VrActionHitAnalyticsEventFieldBinding[];
 }
-export declare type PopupUserFormDataType = 'string' | 'number' | 'boolean' | 'enum' | 'color' | 'css_color';
-export declare class PopupUserFormDataTypeDefine {
-    static readonly STRING: PopupUserFormDataType;
-    static readonly NUMBER: PopupUserFormDataType;
-    static readonly BOOLEAN: PopupUserFormDataType;
-    static readonly ENUM: PopupUserFormDataType;
-    static readonly COLOR: PopupUserFormDataType;
-    static readonly CSS_COLOR: PopupUserFormDataType;
-}
-export declare type PopupUserFormControlVariant = 'number_input' | 'number_slider' | 'number_slider_vertical' | 'number_stepper' | 'number_star_rating' | 'number_segment' | 'number_emoji_scale' | 'number_dial' | 'number_progress_tap' | 'number_chip_tile' | 'string_input' | 'string_textarea' | 'string_select' | 'string_autocomplete' | 'string_segment' | 'string_radio' | 'string_tag' | 'string_card_grid' | 'string_avatar_list' | 'string_color_swatch' | 'boolean_switch' | 'boolean_checkbox' | 'boolean_segment' | 'boolean_thumb' | 'boolean_card_pair' | 'color_picker' | 'color_swatch_picker' | 'css_color_input' | 'css_color_swatch_picker' | 'css_color_advanced';
-export declare class PopupUserFormControlVariantDefine {
-    static readonly NUMBER_INPUT: PopupUserFormControlVariant;
-    static readonly NUMBER_SLIDER: PopupUserFormControlVariant;
-    static readonly NUMBER_SLIDER_VERTICAL: PopupUserFormControlVariant;
-    static readonly NUMBER_STEPPER: PopupUserFormControlVariant;
-    static readonly NUMBER_STAR_RATING: PopupUserFormControlVariant;
-    static readonly NUMBER_SEGMENT: PopupUserFormControlVariant;
-    static readonly NUMBER_EMOJI_SCALE: PopupUserFormControlVariant;
-    static readonly NUMBER_DIAL: PopupUserFormControlVariant;
-    static readonly NUMBER_PROGRESS_TAP: PopupUserFormControlVariant;
-    static readonly NUMBER_CHIP_TILE: PopupUserFormControlVariant;
-    static readonly STRING_INPUT: PopupUserFormControlVariant;
-    static readonly STRING_TEXTAREA: PopupUserFormControlVariant;
-    static readonly STRING_SELECT: PopupUserFormControlVariant;
-    static readonly STRING_AUTOCOMPLETE: PopupUserFormControlVariant;
-    static readonly STRING_SEGMENT: PopupUserFormControlVariant;
-    static readonly STRING_RADIO: PopupUserFormControlVariant;
-    static readonly STRING_TAG: PopupUserFormControlVariant;
-    static readonly STRING_CARD_GRID: PopupUserFormControlVariant;
-    static readonly STRING_AVATAR_LIST: PopupUserFormControlVariant;
-    static readonly STRING_COLOR_SWATCH: PopupUserFormControlVariant;
-    static readonly BOOLEAN_SWITCH: PopupUserFormControlVariant;
-    static readonly BOOLEAN_CHECKBOX: PopupUserFormControlVariant;
-    static readonly BOOLEAN_SEGMENT: PopupUserFormControlVariant;
-    static readonly BOOLEAN_THUMB: PopupUserFormControlVariant;
-    static readonly BOOLEAN_CARD_PAIR: PopupUserFormControlVariant;
-    static readonly COLOR_PICKER: PopupUserFormControlVariant;
-    static readonly COLOR_SWATCH_PICKER: PopupUserFormControlVariant;
-    static readonly CSS_COLOR_INPUT: PopupUserFormControlVariant;
-    static readonly CSS_COLOR_SWATCH_PICKER: PopupUserFormControlVariant;
-    static readonly CSS_COLOR_ADVANCED: PopupUserFormControlVariant;
-}
-export declare class PopupUserFormDataTypeDefaultVariant {
-    static getDefault(dataType: PopupUserFormDataType): PopupUserFormControlVariant;
-}
-export declare class PopupUserFormOption {
-    label: MultiLanguageStr;
-    value: string | number;
-    iconUrl: string;
-    imageUrl: string;
-    description: MultiLanguageStr;
-    badge: MultiLanguageStr;
-    color: string;
-    disabled: boolean;
-}
-export declare class PopupUserFormControlConfig {
-    variant: PopupUserFormControlVariant;
-    min: number | null;
-    max: number | null;
-    step: number | null;
-    precision: number | null;
-    sliderShowTicks: boolean;
-    sliderActiveColor: string;
-    sliderTrackColor: string;
-    sliderShowTooltip: boolean;
-    starCount: number;
-    starAllowHalf: boolean;
-    starIcon: 'star' | 'heart' | 'thumb' | 'like' | 'fire' | 'crown' | 'flower' | 'custom';
-    starCustomIconUrl: string;
-    starActiveColor: string;
-    starInactiveColor: string;
-    starSize: number;
-    starShowValueLabel: boolean;
-    emojiScaleEmojis: string[];
-    emojiScaleSize: number;
-    emojiScaleAnimateOnSelect: boolean;
-    dialSize: number;
-    dialActiveColor: string;
-    dialShowValueInCenter: boolean;
-    dialStartAngle: number;
-    progressTapHeight: number;
-    progressTapGradientFrom: string;
-    progressTapGradientTo: string;
-    progressTapShowMarks: boolean;
-    chipTileSize: number;
-    chipTileColumns: number;
-    chipTileActiveColor: string;
-    options: PopupUserFormOption[];
-    textareaRows: number;
-    textareaMaxLength: number | null;
-    textareaShowCount: boolean;
-    tagMode: 'pill' | 'card';
-    cardGridColumns: number;
-    cardGridImageRatio: '1:1' | '4:3' | '16:9';
-    cardGridShowDescription: boolean;
-    avatarListShowSubtitle: boolean;
-    avatarListSize: number;
-    colorSwatchSize: number;
-    colorSwatchShape: 'square' | 'circle';
-    colorSwatchColumns: number;
-    booleanTrueLabel: MultiLanguageStr;
-    booleanFalseLabel: MultiLanguageStr;
-    booleanTrueIconUrl: string;
-    booleanFalseIconUrl: string;
-    booleanTrueColor: string;
-    booleanFalseColor: string;
-    colorSwatchOptions: Color[];
-    cssColorSwatchOptions: string[];
-    borderRadius: number | null;
-    accentColor: string;
-}
 export declare class PopupUserFormField {
     fieldKey: string;
     label: MultiLanguageStr;
     description: MultiLanguageStr;
     placeholder: MultiLanguageStr;
     required: boolean;
-    dataType: PopupUserFormDataType;
+    dataType: XrInteractionDataType;
     defaultValue: string | number | boolean | object | null;
-    control: PopupUserFormControlConfig;
+    control: XrInteractionControlConfig;
     boundVariableScope: XrVariableScopeType | '';
     boundVariableKey: string;
 }

package/dist/src/model/vr/xr-bound-variable-control.d.ts

@@ -0,0 +1,25 @@
+import { MultiLanguageStr } from '../general/multi-language-str';
+import { XrInteractionControlConfig, XrInteractionDataType } from './xr-interaction-control';
+import { XrVariableScopeType } from './xr-logic';
+/**
+ * 绑定变量控件
+ *
+ * 用在「监控面板」和「汉堡菜单画布节点」内，把一个 XrInteractionControlConfig
+ * 与 XrRuntimeState 中的某个变量双向绑定 —— 用户操作控件即写变量；
+ * 变量被其他地方改也会回灌到控件上。
+ *
+ * 与表单 Action 里的 PopupUserFormField 关系：
+ *  - 两者内嵌同一个 XrInteractionControlConfig（控件外观 / 配置共用一套）
+ *  - PopupUserFormField 是「填表上下文」（required / defaultValue / fieldKey / 同步提交）
+ *  - XrBoundVariableControl 是「持久 widget 上下文」（实时绑定变量；可选 label / description / placeholder）
+ */
+export declare class XrBoundVariableControl {
+    boundVariableScope: XrVariableScopeType | '';
+    boundVariableKey: string;
+    dataType: XrInteractionDataType;
+    control: XrInteractionControlConfig;
+    label: MultiLanguageStr;
+    description: MultiLanguageStr;
+    placeholder: MultiLanguageStr;
+    commitTextOnBlur: boolean;
+}

package/dist/src/model/vr/xr-hamburger-menu.d.ts

@@ -1,7 +1,9 @@
 import { VRTalkBaseData } from '../general/vrtalk-base-data';
 import { MultiLanguageStr } from '../general/multi-language-str';
 import { XrAnyAction } from './vr-action';
+import { TintableIconRef } from '../general/tintable-icon-ref';
 import { FreeButton } from '../general/free-button';
+import { XrBoundVariableControl } from './xr-bound-variable-control';
 export declare const XR_HAMBURGER_MENU_DEFAULT_COLOR = "#262626";
 export declare type XrHamburgerMenuNodeType = 'group' | 'text_item' | 'media_carousel_item' | 'grid_media_item' | 'waterfall_media_item' | 'webview_item' | 'rich_text_item' | 'canvas_item' | 'image_item' | 'grid_image_item' | 'waterfall_image_item' | 'video_item';
 export declare class XrHamburgerMenuNodeTypeDefine {
@@ -65,25 +67,20 @@ export declare class XrHamburgerMenuNodeBase extends VRTalkBaseData {
     requireXrReady: boolean;
 }
 /**
- * 中间基类：在 NodeBase 之上加 title（多语言显示标题）+ 图标字段
+ * 中间基类：在 NodeBase 之上加 title（多语言显示标题）+ 图标
  * 除 RichTextItem 之外的全部节点类型都继承自此类
  *
- * 图标字段从 group/text_item 提升到此基类：所有节点（image/video/grid/webview/canvas 等）
- * 既然都有标题，理应都能在标题左侧配图标。
+ * 图标采用统一的 TintableIconRef 结构（图标库 / 媒体库 + 可选 tint 颜色）
  */
 export declare class XrHamburgerMenuNode extends XrHamburgerMenuNodeBase {
     title: MultiLanguageStr;
-    icon: string;
-    iconCategory: string;
-    iconFilename: string;
-    iconColorEnabled: boolean;
-    iconColor: import("../general/color").Color;
+    icon: TintableIconRef;
 }
 /**
  * 文字菜单项 — 点击后执行 actionList
  *
- * 图标字段已上移至 XrHamburgerMenuNode 基类（icon / iconCategory / iconFilename
- * / iconColorEnabled / iconColor），本类只保留自己独有的 actionList。
+ * 图标字段已上移至 XrHamburgerMenuNode 基类（icon: TintableIconRef），
+ * 本类只保留自己独有的 actionList。
  */
 export declare class XrHamburgerMenuTextItem extends XrHamburgerMenuNode {
     constructor();
@@ -272,8 +269,7 @@ export declare class XrHamburgerMenuWebViewItem extends XrHamburgerMenuNode {
  * 分组节点 — 可包含子节点
  * SDK 不限深度，5 级限制由 console 编辑端实施
  *
- * 图标字段已上移至 XrHamburgerMenuNode 基类（icon / iconCategory / iconFilename
- * / iconColorEnabled / iconColor）。
+ * 图标字段已上移至 XrHamburgerMenuNode 基类（icon: TintableIconRef）。
  */
 export declare class XrHamburgerMenuGroup extends XrHamburgerMenuNode {
     constructor();
@@ -325,13 +321,14 @@ export declare class XrHamburgerMenu {
     pcWidth: number;
     openedByDefault: boolean;
 }
-export declare type XrHamburgerCanvasComponentType = 'image' | 'text' | 'progress-bar' | 'video' | 'button';
+export declare type XrHamburgerCanvasComponentType = 'image' | 'text' | 'progress-bar' | 'video' | 'button' | 'variable-control';
 export declare class XrHamburgerCanvasComponentTypeDefine {
     static readonly IMAGE: XrHamburgerCanvasComponentType;
     static readonly TEXT: XrHamburgerCanvasComponentType;
     static readonly PROGRESS_BAR: XrHamburgerCanvasComponentType;
     static readonly VIDEO: XrHamburgerCanvasComponentType;
     static readonly BUTTON: XrHamburgerCanvasComponentType;
+    static readonly VARIABLE_CONTROL: XrHamburgerCanvasComponentType;
 }
 export declare type XrHamburgerCanvasComponentImageMode = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';
 export declare class XrHamburgerCanvasComponentImageModeDefine {
@@ -460,6 +457,19 @@ export declare class XrHamburgerCanvasComponentButton extends XrHamburgerCanvasC
     textBold: boolean;
     textItalic: boolean;
     textUnderline: boolean;
-    iconSrc: string;
+    icon: TintableIconRef;
     iconPosition: XrHamburgerCanvasComponentButtonIconPosition;
 }
+/**
+ * 绑定变量控件 —— 在画布上摆放一个与变量双向绑定的交互控件。
+ *
+ * 内嵌共享的 XrBoundVariableControl（包含变量绑定 + XrInteractionControlConfig）。
+ * 编辑器：复用 vrtalk-bound-variable-control-edit。
+ * 运行时：复用 vrtalk-bound-variable-control 渲染。
+ */
+export declare class XrHamburgerCanvasComponentVariableControl extends XrHamburgerCanvasComponentBase {
+    type: XrHamburgerCanvasComponentType;
+    width: number;
+    height: number;
+    bound: XrBoundVariableControl;
+}

package/dist/src/model/vr/xr-interaction-control.d.ts

@@ -0,0 +1,132 @@
+import { Color, TintableIconRef } from '../general';
+import { MultiLanguageStr } from '../general/multi-language-str';
+/**
+ * 交互控件（Interaction Control）共享 schema
+ *
+ * 本文件描述「一个用户可交互的控件该长什么样」的抽象 —— 包括：
+ *  - 数据类型（dataType）
+ *  - 控件外观变体（variant；如滑块 / 旋钮 / 评分 / 卡片网格 / ...）
+ *  - 变体相关配置（min/max/options/颜色 等）
+ *
+ * 三个消费者各自再加自己的"上下文"字段：
+ *  - 表单字段 (PopupUserFormField)：fieldKey / label / required / defaultValue / 绑定变量
+ *  - 监控面板节点 / 汉堡菜单画布节点 (XrBoundVariableControl)：变量绑定 + 可选 label
+ *
+ * 重命名自旧的 PopupUserFormControl* / PopupUserFormDataType* / PopupUserFormOption。
+ */
+export declare type XrInteractionDataType = 'string' | 'number' | 'boolean' | 'enum' | 'color' | 'css_color';
+export declare class XrInteractionDataTypeDefine {
+    static readonly STRING: XrInteractionDataType;
+    static readonly NUMBER: XrInteractionDataType;
+    static readonly BOOLEAN: XrInteractionDataType;
+    static readonly ENUM: XrInteractionDataType;
+    static readonly COLOR: XrInteractionDataType;
+    static readonly CSS_COLOR: XrInteractionDataType;
+}
+export declare type XrInteractionControlVariant = 'number_input' | 'number_slider' | 'number_slider_vertical' | 'number_stepper' | 'number_star_rating' | 'number_segment' | 'number_emoji_scale' | 'number_dial' | 'number_progress_tap' | 'number_chip_tile' | 'string_input' | 'string_textarea' | 'string_select' | 'string_autocomplete' | 'string_segment' | 'string_radio' | 'string_tag' | 'string_card_grid' | 'string_avatar_list' | 'string_color_swatch' | 'boolean_switch' | 'boolean_checkbox' | 'boolean_segment' | 'boolean_thumb' | 'boolean_card_pair' | 'color_picker' | 'color_swatch_picker' | 'css_color_input' | 'css_color_swatch_picker' | 'css_color_advanced';
+export declare class XrInteractionControlVariantDefine {
+    static readonly NUMBER_INPUT: XrInteractionControlVariant;
+    static readonly NUMBER_SLIDER: XrInteractionControlVariant;
+    static readonly NUMBER_SLIDER_VERTICAL: XrInteractionControlVariant;
+    static readonly NUMBER_STEPPER: XrInteractionControlVariant;
+    static readonly NUMBER_STAR_RATING: XrInteractionControlVariant;
+    static readonly NUMBER_SEGMENT: XrInteractionControlVariant;
+    static readonly NUMBER_EMOJI_SCALE: XrInteractionControlVariant;
+    static readonly NUMBER_DIAL: XrInteractionControlVariant;
+    static readonly NUMBER_PROGRESS_TAP: XrInteractionControlVariant;
+    static readonly NUMBER_CHIP_TILE: XrInteractionControlVariant;
+    static readonly STRING_INPUT: XrInteractionControlVariant;
+    static readonly STRING_TEXTAREA: XrInteractionControlVariant;
+    static readonly STRING_SELECT: XrInteractionControlVariant;
+    static readonly STRING_AUTOCOMPLETE: XrInteractionControlVariant;
+    static readonly STRING_SEGMENT: XrInteractionControlVariant;
+    static readonly STRING_RADIO: XrInteractionControlVariant;
+    static readonly STRING_TAG: XrInteractionControlVariant;
+    static readonly STRING_CARD_GRID: XrInteractionControlVariant;
+    static readonly STRING_AVATAR_LIST: XrInteractionControlVariant;
+    static readonly STRING_COLOR_SWATCH: XrInteractionControlVariant;
+    static readonly BOOLEAN_SWITCH: XrInteractionControlVariant;
+    static readonly BOOLEAN_CHECKBOX: XrInteractionControlVariant;
+    static readonly BOOLEAN_SEGMENT: XrInteractionControlVariant;
+    static readonly BOOLEAN_THUMB: XrInteractionControlVariant;
+    static readonly BOOLEAN_CARD_PAIR: XrInteractionControlVariant;
+    static readonly COLOR_PICKER: XrInteractionControlVariant;
+    static readonly COLOR_SWATCH_PICKER: XrInteractionControlVariant;
+    static readonly CSS_COLOR_INPUT: XrInteractionControlVariant;
+    static readonly CSS_COLOR_SWATCH_PICKER: XrInteractionControlVariant;
+    static readonly CSS_COLOR_ADVANCED: XrInteractionControlVariant;
+}
+export declare class XrInteractionControlDefaultVariant {
+    static getDefault(dataType: XrInteractionDataType): XrInteractionControlVariant;
+}
+export declare type XrInteractionControlVariantTierLevel = 'A' | 'B' | 'C';
+export declare class XrInteractionControlVariantTier {
+    private static readonly TIER_A;
+    private static readonly TIER_B;
+    static getTier(variant: XrInteractionControlVariant): XrInteractionControlVariantTierLevel;
+}
+export declare class XrInteractionOption {
+    label: MultiLanguageStr;
+    value: string | number;
+    icon: TintableIconRef;
+    imageUrl: string;
+    description: MultiLanguageStr;
+    badge: MultiLanguageStr;
+    color: string;
+    disabled: boolean;
+}
+export declare class XrInteractionControlConfig {
+    variant: XrInteractionControlVariant;
+    min: number | null;
+    max: number | null;
+    step: number | null;
+    precision: number | null;
+    sliderShowTicks: boolean;
+    sliderActiveColor: string;
+    sliderTrackColor: string;
+    sliderShowTooltip: boolean;
+    starCount: number;
+    starAllowHalf: boolean;
+    starIcon: TintableIconRef;
+    starActiveColor: string;
+    starInactiveColor: string;
+    starSize: number;
+    starShowValueLabel: boolean;
+    emojiScaleEmojis: string[];
+    emojiScaleSize: number;
+    emojiScaleAnimateOnSelect: boolean;
+    dialSize: number;
+    dialActiveColor: string;
+    dialShowValueInCenter: boolean;
+    dialStartAngle: number;
+    progressTapHeight: number;
+    progressTapGradientFrom: string;
+    progressTapGradientTo: string;
+    progressTapShowMarks: boolean;
+    chipTileSize: number;
+    chipTileColumns: number;
+    chipTileActiveColor: string;
+    options: XrInteractionOption[];
+    textareaRows: number;
+    textareaMaxLength: number | null;
+    textareaShowCount: boolean;
+    tagMode: 'pill' | 'card';
+    cardGridColumns: number;
+    cardGridImageRatio: '1:1' | '4:3' | '16:9';
+    cardGridShowDescription: boolean;
+    avatarListShowSubtitle: boolean;
+    avatarListSize: number;
+    colorSwatchSize: number;
+    colorSwatchShape: 'square' | 'circle';
+    colorSwatchColumns: number;
+    booleanTrueLabel: MultiLanguageStr;
+    booleanFalseLabel: MultiLanguageStr;
+    booleanTrueIcon: TintableIconRef;
+    booleanFalseIcon: TintableIconRef;
+    booleanTrueColor: string;
+    booleanFalseColor: string;
+    colorSwatchOptions: Color[];
+    cssColorSwatchOptions: string[];
+    borderRadius: number | null;
+    accentColor: string;
+}

package/dist/src/model/vr/xr-logic.d.ts

@@ -1,4 +1,4 @@
-import { Color, type MediaLoopMode, MultiLanguageStr, Vector3, VRTalkBaseData } from '../general';
+import { Color, type MediaLoopMode, MultiLanguageStr, TintableIconRef, Vector3, VRTalkBaseData } from '../general';
 import type { XrMonitorComponentType, XrMonitorComponentImageMode, XrMonitorComponentTextAlign, XrMonitorComponentVerticalAlign, XrMonitorComponentProgressBarDirection, XrMonitorComponentVideoObjectFit, XrMonitorComponentButtonIconPosition } from './xr-monitor';
 import { VrSignalTrigger } from '@/model';
 import type { XrAnyAction } from './vr-action';
@@ -276,8 +276,9 @@ export declare class XrMonitorComponentRuntimeState {
     loop: boolean;
     controls: boolean;
     objectFit: XrMonitorComponentVideoObjectFit;
-    iconSrc: string;
+    icon: TintableIconRef;
     iconPosition: XrMonitorComponentButtonIconPosition;
+    bound: any;
 }
 /**
  * 监控面板运行时状态

package/dist/src/model/vr/xr-monitor.d.ts

@@ -1,13 +1,16 @@
 import { Vector2, VRTalkBaseData } from '../../model';
 import type { XrAnyAction } from './vr-action';
 import { MultiLanguageStr } from '../general/multi-language-str';
-export declare type XrMonitorComponentType = 'image' | 'text' | 'progress-bar' | 'video' | 'button';
+import { TintableIconRef } from '../general/tintable-icon-ref';
+import { XrBoundVariableControl } from './xr-bound-variable-control';
+export declare type XrMonitorComponentType = 'image' | 'text' | 'progress-bar' | 'video' | 'button' | 'variable-control';
 export declare class XrMonitorComponentTypeDefine {
     static readonly IMAGE: XrMonitorComponentType;
     static readonly TEXT: XrMonitorComponentType;
     static readonly PROGRESS_BAR: XrMonitorComponentType;
     static readonly VIDEO: XrMonitorComponentType;
     static readonly BUTTON: XrMonitorComponentType;
+    static readonly VARIABLE_CONTROL: XrMonitorComponentType;
 }
 export declare type XrMonitorComponentImageMode = 'contain' | 'cover' | 'fill' | 'scale-down' | 'none';
 export declare class XrMonitorComponentImageModeDefine {
@@ -125,9 +128,22 @@ export declare class XrMonitorComponentButton extends XrMonitorComponentBase {
     textBold: boolean;
     textItalic: boolean;
     textUnderline: boolean;
-    iconSrc: string;
+    icon: TintableIconRef;
     iconPosition: XrMonitorComponentButtonIconPosition;
 }
+/**
+ * 绑定变量控件 —— 把一个交互控件与某个变量双向绑定。
+ *
+ * 内嵌共享的 XrBoundVariableControl（包含变量绑定 + XrInteractionControlConfig）。
+ * 编辑器：复用 vrtalk-bound-variable-control-edit。
+ * 运行时：复用 vrtalk-bound-variable-control 渲染。
+ */
+export declare class XrMonitorComponentVariableControl extends XrMonitorComponentBase {
+    type: XrMonitorComponentType;
+    width: number;
+    height: number;
+    bound: XrBoundVariableControl;
+}
 export declare class XrMonitor extends VRTalkBaseData {
     name: string;
     remark: string;

package/dist/src/model/vr-component/vr-component-tag-data.d.ts

@@ -2,6 +2,7 @@ import { VrComponentData } from '../vr-component/vr-component-data';
 import { Vector3 } from '../general/vector';
 import { VrContentCardShowStyle } from '../vr';
 import { MultiLanguageStr } from '../general/multi-language-str';
+import { TintableIconRef } from '../general/tintable-icon-ref';
 export declare type VrComponentTagTextLocation = 'none' | 'top' | 'bottom';
 export declare class VrComponentTagTextLocationDefine {
     static readonly NONE: VrComponentTagTextLocation;
@@ -19,11 +20,8 @@ export declare class VrComponentTagData extends VrComponentData {
     enabledBackground: boolean;
     backgroundColor: import("../general/color").Color;
     enabledCustomIcon: boolean;
-    iconSrc: string;
-    iconCategory: string;
-    iconFilename: string;
-    enabledIconColorOverride: boolean;
-    overrideIconColor: import("../general/color").Color;
+    icon: TintableIconRef;
+    constructor();
     enabledStem: boolean;
     stemColor: import("../general/color").Color;
     stemLength: number;

package/dist/src/vue/common/pick-str.d.ts

@@ -0,0 +1,12 @@
+/**
+ * SDK 共享 Vue 组件统一取值 helper：
+ * - MultiLanguageStr 对象 → 按当前语言挑出 string
+ * - string / null / undefined → 老数据兼容兜底
+ *
+ * 注意：此文件被 SDK build 时类型检查，并会原样 copy 到 dist/vue/common/pick-str.ts。
+ * 因此 *不能* import 'vrtalk-web-sdk'（自引用）。MultiLanguageStr 的解析逻辑直接 inline。
+ *
+ * 消费方通过 setPickStrLanguageGetter 注入当前语言 getter，避免 SDK 反向依赖业务 store。
+ */
+export declare function setPickStrLanguageGetter(fn: () => string): void;
+export declare function pickStr(v: any): string;