@open-feishu-card/renderer 0.2.25 → 0.2.27

package/dist/index.cjs

@@ -1127,8 +1127,6 @@ var BASE_STYLES_CSS = `/**
 .universal-card-header {
   width: 100%;
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 .universal-card-header__bg {
   box-sizing: border-box;
@@ -1262,7 +1260,7 @@ var BASE_STYLES_CSS = `/**
   line-height: 22px;
 }
 
-/* ---- div / note ---- */
+/* ---- div ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
 .universal-card-div--with-icon {
@@ -1274,10 +1272,6 @@ var BASE_STYLES_CSS = `/**
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
-.universal-card-note {
-  font-size: 12px;
-  color: #8f959e;
-}
 
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -1306,6 +1300,7 @@ var BASE_STYLES_CSS = `/**
   display: inline-flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 28px; padding: 4px 12px;
+  font-family: inherit;
   font-size: 14px; line-height: 22px; border-radius: 6px;
   border: 1px solid transparent; background: transparent; color: #1f2329;
   cursor: pointer; text-decoration: none; box-sizing: border-box;
@@ -1318,14 +1313,9 @@ var BASE_STYLES_CSS = `/**
   flex-shrink: 0; height: 1.2em; color: inherit;
 }
 .universal-card-button__icon .universal-card-icon { color: inherit; }
-/* default \u5BBD\u5EA6\uFF1A\u6309\u5185\u5BB9\u6536\u7F29\u3002\u5217\u662F flex column\uFF08\u9ED8\u8BA4 align-items:stretch\uFF09\uFF0C
-   body \u53C8\u6709 > * { width:100% }\uFF0C\u4E0D\u52A0\u8FD9\u4E24\u6761\u4F1A\u88AB\u6491\u6EE1\u6240\u5728\u5217\u3002 */
-.universal-card-button:not(.universal-card-button--block) {
-  width: auto;
-  max-width: 100%;
-  align-self: flex-start;
-}
-/* fill\uFF08width:"fill"\uFF09\uFF1A\u6491\u6EE1\u6240\u5728\u5217 */
+/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
+   \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
+   width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
 .universal-card-button--block { width: 100%; }
 
 /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
@@ -1347,11 +1337,12 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
 
-/* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF0C\u6309\u5185\u5BB9\u5BBD\uFF09 \u2014\u2014 */
+/* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF1B\u6491\u6EE1\u65F6\u6587\u5B57\u9760\u5DE6\uFF0C\u5BF9\u9F50\u771F\u673A\uFF09 \u2014\u2014 */
 .universal-card-button--text,
 .universal-card-button--primary_text,
 .universal-card-button--danger_text {
   border-color: transparent; background: transparent; padding: 4px 8px;
+  justify-content: flex-start;
 }
 .universal-card-button--text { color: #1f2329; }
 .universal-card-button--primary_text { color: #1456f0; }
@@ -1384,17 +1375,19 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
-/* input / select \u7B49\u8F93\u5165\u63A7\u4EF6\uFF1A\u9884\u89C8\u91CC\u6E32\u67D3\u6210\u53EA\u8BFB\u9759\u6001\u6846\uFF0C\u5C55\u793A placeholder */
+/* input / select\uFF1A\u9759\u6001\u9884\u89C8\u662F\u53EA\u8BFB\u6846\uFF1Binteractive \u53BB\u6389 --static\uFF0C\u6210\u4E3A\u53EF\u8F93\u5165\u63A7\u4EF6 */
+.universal-card-input,
 .universal-card-input--static {
   min-height: 32px; padding: 6px 12px; box-sizing: border-box;
-  font-size: 14px; line-height: 20px; color: #8f959e;
-  background: #f5f6f7; border: 1px solid #dee0e3; border-radius: 6px;
+  font-family: inherit; font-size: 14px; line-height: 20px;
+  background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
+  color: #1f2329; width: 100%;
+}
+.universal-card-input--static {
+  color: #8f959e; background: #f5f6f7;
   cursor: default; pointer-events: none;
 }
 
-/* ---- action \u5BB9\u5668 ---- */
-.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
-
 /* ---- checker \u52FE\u9009\u5668\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 universal-card-checker\uFF09 ---- */
 .universal-card-checker {
   display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
@@ -1985,7 +1978,6 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
-.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }
 `;
 
 // src/icon-font.ts
@@ -5612,10 +5604,6 @@ function registerBuiltins() {
     }
     return h("div", { className: `${CLS}-div` }, content);
   });
-  registerComponent(
-    "note",
-    (el, ctx) => h("div", { className: `${CLS}-note` }, renderElements(el.property?.elements, ctx))
-  );
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
@@ -5638,8 +5626,26 @@ function registerBuiltins() {
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
+    if (isStateHost(el)) {
+      style.position = "absolute";
+      style.width = "0";
+      style.height = "0";
+      style.overflow = "hidden";
+      style.margin = "0";
+      style.padding = "0";
+    }
     return h("div", { className: cls, style }, renderElements(p.columns, ctx));
   });
+  function isStateHost(el) {
+    if (el.id === "card_state") return true;
+    const actions = el.property?.actions;
+    if (!Array.isArray(actions)) return false;
+    return actions.some((item) => {
+      if (!item || typeof item !== "object") return false;
+      const action = item.action;
+      return typeof action?.url === "string" && action.url.includes("msgcard/unsupported_action#s1.");
+    });
+  }
   registerComponent("column", (el, ctx) => {
     const p = el.property || {};
     const style = {
@@ -5978,40 +5984,115 @@ function registerBuiltins() {
     const children = iconVNode ? [iconVNode, label] : [label];
     const actionUrl = Array.isArray(p.actions) ? resolveURL(p.actions.find((a) => a.type === "open_url")?.action?.url) : "";
     const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
-    const isText = type === "text" || type === "primary_text" || type === "danger_text";
     const wv = p.widthValue;
     const widthTok = p.width ?? wv?.value;
-    const block = widthTok === "fill" && !isText;
+    const block = widthTok === "fill";
     const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
     const style = {};
     if (p.margin) {
-      style.width = block ? "100%" : "auto";
+      style.width = "100%";
       applyOuterMargin(style, p.margin);
     }
     const styleProp = Object.keys(style).length ? { style } : {};
+    const extra = p;
+    const callback = readCallbackValue(extra);
+    const formAction = String(extra.form_action_type ?? extra.formActionType ?? "");
+    if (ctx.options.interactive && callback && !p.disabled && !url) {
+      return h("button", {
+        type: formAction === "reset" ? "reset" : formAction === "submit" ? "submit" : "button",
+        className: base,
+        "data-feishu-action": JSON.stringify(callback),
+        "data-feishu-tag": "button",
+        ...styleProp
+      }, children);
+    }
     if (url && !p.disabled) {
       return h("a", { className: base, href: url, target: "_blank", rel: "noopener", ...styleProp }, children);
     }
     const cls = `${base} ${CLS}-button--static` + (p.disabled ? ` ${CLS}-button--disabled` : "");
     return h("span", { className: cls, ...styleProp }, children);
   });
-  registerComponent(
-    "form",
-    (el, ctx) => h("div", { className: `${CLS}-form` }, renderElements(el.property?.elements, ctx))
-  );
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function readCallbackValue(p) {
+    const fromList = (list) => {
+      if (!Array.isArray(list)) return null;
+      for (const item of list) {
+        if (!isRecord(item) || item.type !== "callback") continue;
+        const inner = isRecord(item.action) ? item.action : item;
+        if (isRecord(inner.value)) return inner.value;
+      }
+      return null;
+    };
+    return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
+  }
+  registerComponent("form", (el, ctx) => {
+    const children = renderElements(el.property?.elements, ctx);
+    const className = `${CLS}-form`;
+    if (!ctx.options.interactive) return h("div", { className }, children);
+    const name = typeof el.property?.name === "string" ? el.property.name : "";
+    return h("form", { className, "data-feishu-form": name }, children);
+  });
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
     return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
   }
-  registerComponent("input", (el) => renderStaticField(el));
-  registerComponent("multi_select_static", (el) => renderStaticField(el));
-  registerComponent("select_static", (el) => renderStaticField(el));
-  registerComponent("date_picker", (el) => renderStaticField(el));
-  registerComponent("picker_time", (el) => renderStaticField(el));
-  registerComponent("picker_datetime", (el) => renderStaticField(el));
-  registerComponent("select_person", (el) => renderStaticField(el));
-  registerComponent("multi_select_person", (el) => renderStaticField(el));
+  function fieldText(value) {
+    if (typeof value === "string") return value;
+    return extractPlainText(value);
+  }
+  function renderInteractiveField(el) {
+    const p = el.property || {};
+    const ph = extractPlainText(p.placeholder) || "";
+    const name = typeof p.name === "string" ? p.name : void 0;
+    const nameProp = name ? { name } : {};
+    const callback = readCallbackValue(p);
+    const actionProp = callback ? { "data-feishu-action": JSON.stringify(callback), "data-feishu-tag": el.tag } : {};
+    if (el.tag === "select_static" || el.tag === "multi_select_static") {
+      const initial = p.initial_option ?? p.initialOption;
+      const options = Array.isArray(p.options) ? p.options : [];
+      return h("select", {
+        className: `${CLS}-input`,
+        ...nameProp,
+        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...actionProp
+      }, [
+        h("option", { value: "" }, ph),
+        ...options.map((option) => {
+          const item = isRecord(option) ? option : {};
+          const value = typeof item.value === "string" ? item.value : fieldText(item.text ?? item);
+          const label = fieldText(item.text ?? item.label) || value;
+          return h("option", {
+            value,
+            ...value !== "" && value === initial ? { selected: true } : {}
+          }, label);
+        })
+      ]);
+    }
+    const def = p.default_value ?? p.defaultValue;
+    const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
+    return h("input", {
+      className: `${CLS}-input`,
+      type: inputType,
+      placeholder: ph,
+      value: typeof def === "string" ? def : "",
+      ...nameProp,
+      ...actionProp
+    });
+  }
+  function renderField(el, ctx) {
+    return ctx.options.interactive ? renderInteractiveField(el) : renderStaticField(el);
+  }
+  registerComponent("input", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("date_picker", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_time", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_datetime", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_person", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_person", (el, ctx) => renderField(el, ctx));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6083,12 +6164,6 @@ function registerBuiltins() {
     const Tag = overall && !disabled ? "label" : "div";
     return h(Tag, props, checkbox, content, buttonsVNode);
   });
-  registerComponent("action", (el, ctx) => {
-    const p = el.property || {};
-    const layout = p.layout || "flow";
-    const style = { display: "flex", flexWrap: "wrap", gap: "12px" };
-    return h("div", { className: `${CLS}-action ${CLS}-action--${layout}`, style }, renderElements(p.actions, ctx));
-  });
   registerComponent("at", (el, ctx) => {
     const p = el.property || {};
     if (p.userID === "all") {

package/dist/index.d.cts

@@ -305,6 +305,12 @@ interface RenderOptions {
     avatarURLSuffix?: string;
     /** 自定义头像地址解析：入参为命中的 PersonInfo，返回最终 src（优先级最高） */
     resolvePersonAvatar?: (person: PersonInfo) => string | null | undefined;
+    /**
+     * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
+     * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
+     * 宿主监听这些控件，自己把点击发回卡片服务。
+     */
+    interactive?: boolean;
 }
 /**
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。

package/dist/index.d.ts

@@ -305,6 +305,12 @@ interface RenderOptions {
     avatarURLSuffix?: string;
     /** 自定义头像地址解析：入参为命中的 PersonInfo，返回最终 src（优先级最高） */
     resolvePersonAvatar?: (person: PersonInfo) => string | null | undefined;
+    /**
+     * 交互预览。默认关闭：回调按钮是不可点的 span，输入框是静态占位。
+     * 打开后，回调按钮变成带 data-feishu-action 的 button，输入框/下拉框变成真实表单控件。
+     * 宿主监听这些控件，自己把点击发回卡片服务。
+     */
+    interactive?: boolean;
 }
 /**
  * 人员信息：person_v1 / person_list / at 元素只带 ID，姓名与头像 key 在这里。

package/dist/index.js

@@ -1126,8 +1126,6 @@ var BASE_STYLES_CSS = `/**
 .universal-card-header {
   width: 100%;
   overflow: hidden;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
 }
 .universal-card-header__bg {
   box-sizing: border-box;
@@ -1261,7 +1259,7 @@ var BASE_STYLES_CSS = `/**
   line-height: 22px;
 }
 
-/* ---- div / note ---- */
+/* ---- div ---- */
 .universal-card-div > * + * { margin-top: 8px; }
 /* div \u5E26\u524D\u7F6E\u56FE\u6807\uFF1Aicon \u5728\u5DE6\u3001\u6587\u672C\u5728\u53F3\u6392\u6210\u4E00\u884C\uFF08\u590D\u523B\u7F51\u9875\u7248 .universal-card-div \u5E03\u5C40\uFF09 */
 .universal-card-div--with-icon {
@@ -1273,10 +1271,6 @@ var BASE_STYLES_CSS = `/**
   display: flex; align-items: center; overflow: hidden;
 }
 .universal-card-div__content { flex: 1; min-width: 0; }
-.universal-card-note {
-  font-size: 12px;
-  color: #8f959e;
-}
 
 /* ---- \u5E03\u5C40\uFF1Acolumn_set / column ---- */
 .universal-card-column-set { display: flex; }
@@ -1305,6 +1299,7 @@ var BASE_STYLES_CSS = `/**
   display: inline-flex; align-items: center; justify-content: center;
   gap: 4px;
   min-height: 28px; padding: 4px 12px;
+  font-family: inherit;
   font-size: 14px; line-height: 22px; border-radius: 6px;
   border: 1px solid transparent; background: transparent; color: #1f2329;
   cursor: pointer; text-decoration: none; box-sizing: border-box;
@@ -1317,14 +1312,9 @@ var BASE_STYLES_CSS = `/**
   flex-shrink: 0; height: 1.2em; color: inherit;
 }
 .universal-card-button__icon .universal-card-icon { color: inherit; }
-/* default \u5BBD\u5EA6\uFF1A\u6309\u5185\u5BB9\u6536\u7F29\u3002\u5217\u662F flex column\uFF08\u9ED8\u8BA4 align-items:stretch\uFF09\uFF0C
-   body \u53C8\u6709 > * { width:100% }\uFF0C\u4E0D\u52A0\u8FD9\u4E24\u6761\u4F1A\u88AB\u6491\u6EE1\u6240\u5728\u5217\u3002 */
-.universal-card-button:not(.universal-card-button--block) {
-  width: auto;
-  max-width: 100%;
-  align-self: flex-start;
-}
-/* fill\uFF08width:"fill"\uFF09\uFF1A\u6491\u6EE1\u6240\u5728\u5217 */
+/* \u5BBD\u5EA6\uFF1A\u5BF9\u9F50\u771F\u673A\u2014\u2014body > * { width:100% }\u3001\u5217 flex stretch \u4F1A\u628A\u6309\u94AE\u6491\u6EE1\u6240\u5728\u884C/\u5217\u3002
+   \u4E0D\u518D\u5F3A\u5236 width:auto\uFF08\u90A3\u662F\u7F51\u9875\u7248\u89C2\u611F\uFF1B\u771F\u673A\u72EC\u7ACB\u6210\u884C\u7684\u6309\u94AE\u9ED8\u8BA4\u5360\u6EE1\u6574\u884C\uFF09\u3002
+   width:"fill" \u663E\u5F0F\u6302 --block\uFF0C\u4E0E\u7F3A\u7701\u6491\u6EE1\u540C\u5BBD\uFF0C\u5E76\u4F9B margin calc \u8BC6\u522B\u3002 */
 .universal-card-button--block { width: 100%; }
 
 /* \u2014\u2014 outlined \u63CF\u8FB9\u65CF \u2014\u2014 */
@@ -1346,11 +1336,12 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
 
-/* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF0C\u6309\u5185\u5BB9\u5BBD\uFF09 \u2014\u2014 */
+/* \u2014\u2014 text \u7EAF\u6587\u5B57\u65CF\uFF08\u65E0\u8FB9\u6846/\u65E0\u5E95\u8272\uFF1B\u6491\u6EE1\u65F6\u6587\u5B57\u9760\u5DE6\uFF0C\u5BF9\u9F50\u771F\u673A\uFF09 \u2014\u2014 */
 .universal-card-button--text,
 .universal-card-button--primary_text,
 .universal-card-button--danger_text {
   border-color: transparent; background: transparent; padding: 4px 8px;
+  justify-content: flex-start;
 }
 .universal-card-button--text { color: #1f2329; }
 .universal-card-button--primary_text { color: #1456f0; }
@@ -1383,17 +1374,19 @@ var BASE_STYLES_CSS = `/**
 /* ---- \u8868\u5355\uFF08\u9884\u89C8\uFF1A\u4EC5\u900F\u4F20\uFF0C\u65E0\u8868\u5355\u8BED\u4E49\uFF09 ---- */
 .universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
 .universal-card-form > * { width: 100%; }
-/* input / select \u7B49\u8F93\u5165\u63A7\u4EF6\uFF1A\u9884\u89C8\u91CC\u6E32\u67D3\u6210\u53EA\u8BFB\u9759\u6001\u6846\uFF0C\u5C55\u793A placeholder */
+/* input / select\uFF1A\u9759\u6001\u9884\u89C8\u662F\u53EA\u8BFB\u6846\uFF1Binteractive \u53BB\u6389 --static\uFF0C\u6210\u4E3A\u53EF\u8F93\u5165\u63A7\u4EF6 */
+.universal-card-input,
 .universal-card-input--static {
   min-height: 32px; padding: 6px 12px; box-sizing: border-box;
-  font-size: 14px; line-height: 20px; color: #8f959e;
-  background: #f5f6f7; border: 1px solid #dee0e3; border-radius: 6px;
+  font-family: inherit; font-size: 14px; line-height: 20px;
+  background: #fff; border: 1px solid #dee0e3; border-radius: 6px;
+  color: #1f2329; width: 100%;
+}
+.universal-card-input--static {
+  color: #8f959e; background: #f5f6f7;
   cursor: default; pointer-events: none;
 }
 
-/* ---- action \u5BB9\u5668 ---- */
-.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
-
 /* ---- checker \u52FE\u9009\u5668\uFF08\u5BF9\u9F50\u7F51\u9875\u7248 universal-card-checker\uFF09 ---- */
 .universal-card-checker {
   display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
@@ -1984,7 +1977,6 @@ var BASE_STYLES_CSS = `/**
 }
 .universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
 .universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }
-.universal-card-root.theme-dark .universal-card-note { color: #8a8a8a; }
 `;
 
 // src/icon-font.ts
@@ -5611,10 +5603,6 @@ function registerBuiltins() {
     }
     return h("div", { className: `${CLS}-div` }, content);
   });
-  registerComponent(
-    "note",
-    (el, ctx) => h("div", { className: `${CLS}-note` }, renderElements(el.property?.elements, ctx))
-  );
   registerComponent("column_set", (el, ctx) => {
     const p = el.property || {};
     const gapRaw = p.horizontalSpacingValue?.value ?? p.horizontal_spacing;
@@ -5637,8 +5625,26 @@ function registerBuiltins() {
     const pad = boxToStyle(p.padding);
     if (pad) style.padding = pad;
     const cls = `${CLS}-column-set` + (bg ? ` ${CLS}-column-set--bg` : "");
+    if (isStateHost(el)) {
+      style.position = "absolute";
+      style.width = "0";
+      style.height = "0";
+      style.overflow = "hidden";
+      style.margin = "0";
+      style.padding = "0";
+    }
     return h("div", { className: cls, style }, renderElements(p.columns, ctx));
   });
+  function isStateHost(el) {
+    if (el.id === "card_state") return true;
+    const actions = el.property?.actions;
+    if (!Array.isArray(actions)) return false;
+    return actions.some((item) => {
+      if (!item || typeof item !== "object") return false;
+      const action = item.action;
+      return typeof action?.url === "string" && action.url.includes("msgcard/unsupported_action#s1.");
+    });
+  }
   registerComponent("column", (el, ctx) => {
     const p = el.property || {};
     const style = {
@@ -5977,40 +5983,115 @@ function registerBuiltins() {
     const children = iconVNode ? [iconVNode, label] : [label];
     const actionUrl = Array.isArray(p.actions) ? resolveURL(p.actions.find((a) => a.type === "open_url")?.action?.url) : "";
     const url = actionUrl || resolveURL(p.url) || p.behaviors?.[0]?.default_url?.url;
-    const isText = type === "text" || type === "primary_text" || type === "danger_text";
     const wv = p.widthValue;
     const widthTok = p.width ?? wv?.value;
-    const block = widthTok === "fill" && !isText;
+    const block = widthTok === "fill";
     const base = `${CLS}-button ${CLS}-button--${type}${block ? ` ${CLS}-button--block` : ""}`;
     const style = {};
     if (p.margin) {
-      style.width = block ? "100%" : "auto";
+      style.width = "100%";
       applyOuterMargin(style, p.margin);
     }
     const styleProp = Object.keys(style).length ? { style } : {};
+    const extra = p;
+    const callback = readCallbackValue(extra);
+    const formAction = String(extra.form_action_type ?? extra.formActionType ?? "");
+    if (ctx.options.interactive && callback && !p.disabled && !url) {
+      return h("button", {
+        type: formAction === "reset" ? "reset" : formAction === "submit" ? "submit" : "button",
+        className: base,
+        "data-feishu-action": JSON.stringify(callback),
+        "data-feishu-tag": "button",
+        ...styleProp
+      }, children);
+    }
     if (url && !p.disabled) {
       return h("a", { className: base, href: url, target: "_blank", rel: "noopener", ...styleProp }, children);
     }
     const cls = `${base} ${CLS}-button--static` + (p.disabled ? ` ${CLS}-button--disabled` : "");
     return h("span", { className: cls, ...styleProp }, children);
   });
-  registerComponent(
-    "form",
-    (el, ctx) => h("div", { className: `${CLS}-form` }, renderElements(el.property?.elements, ctx))
-  );
+  function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+  }
+  function readCallbackValue(p) {
+    const fromList = (list) => {
+      if (!Array.isArray(list)) return null;
+      for (const item of list) {
+        if (!isRecord(item) || item.type !== "callback") continue;
+        const inner = isRecord(item.action) ? item.action : item;
+        if (isRecord(inner.value)) return inner.value;
+      }
+      return null;
+    };
+    return fromList(p.actions) ?? fromList(p.behaviors) ?? (isRecord(p.value) ? p.value : null);
+  }
+  registerComponent("form", (el, ctx) => {
+    const children = renderElements(el.property?.elements, ctx);
+    const className = `${CLS}-form`;
+    if (!ctx.options.interactive) return h("div", { className }, children);
+    const name = typeof el.property?.name === "string" ? el.property.name : "";
+    return h("form", { className, "data-feishu-form": name }, children);
+  });
   function renderStaticField(el) {
     const p = el.property || {};
     const ph = extractPlainText(p.placeholder) || "";
     return h("div", { className: `${CLS}-input ${CLS}-input--static` }, ph);
   }
-  registerComponent("input", (el) => renderStaticField(el));
-  registerComponent("multi_select_static", (el) => renderStaticField(el));
-  registerComponent("select_static", (el) => renderStaticField(el));
-  registerComponent("date_picker", (el) => renderStaticField(el));
-  registerComponent("picker_time", (el) => renderStaticField(el));
-  registerComponent("picker_datetime", (el) => renderStaticField(el));
-  registerComponent("select_person", (el) => renderStaticField(el));
-  registerComponent("multi_select_person", (el) => renderStaticField(el));
+  function fieldText(value) {
+    if (typeof value === "string") return value;
+    return extractPlainText(value);
+  }
+  function renderInteractiveField(el) {
+    const p = el.property || {};
+    const ph = extractPlainText(p.placeholder) || "";
+    const name = typeof p.name === "string" ? p.name : void 0;
+    const nameProp = name ? { name } : {};
+    const callback = readCallbackValue(p);
+    const actionProp = callback ? { "data-feishu-action": JSON.stringify(callback), "data-feishu-tag": el.tag } : {};
+    if (el.tag === "select_static" || el.tag === "multi_select_static") {
+      const initial = p.initial_option ?? p.initialOption;
+      const options = Array.isArray(p.options) ? p.options : [];
+      return h("select", {
+        className: `${CLS}-input`,
+        ...nameProp,
+        ...el.tag === "multi_select_static" ? { multiple: true } : {},
+        ...actionProp
+      }, [
+        h("option", { value: "" }, ph),
+        ...options.map((option) => {
+          const item = isRecord(option) ? option : {};
+          const value = typeof item.value === "string" ? item.value : fieldText(item.text ?? item);
+          const label = fieldText(item.text ?? item.label) || value;
+          return h("option", {
+            value,
+            ...value !== "" && value === initial ? { selected: true } : {}
+          }, label);
+        })
+      ]);
+    }
+    const def = p.default_value ?? p.defaultValue;
+    const inputType = el.tag === "date_picker" ? "date" : el.tag === "picker_time" ? "time" : "text";
+    return h("input", {
+      className: `${CLS}-input`,
+      type: inputType,
+      placeholder: ph,
+      value: typeof def === "string" ? def : "",
+      ...nameProp,
+      ...actionProp
+    });
+  }
+  function renderField(el, ctx) {
+    return ctx.options.interactive ? renderInteractiveField(el) : renderStaticField(el);
+  }
+  registerComponent("input", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_static", (el, ctx) => renderField(el, ctx));
+  registerComponent("date_picker", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_time", (el, ctx) => renderField(el, ctx));
+  registerComponent("picker_datetime", (el, ctx) => renderField(el, ctx));
+  registerComponent("select_person", (el, ctx) => renderField(el, ctx));
+  registerComponent("multi_select_person", (el, ctx) => renderField(el, ctx));
   registerComponent("checker", (el, ctx) => {
     const p = el.property || {};
     const checked = p.checked === true;
@@ -6082,12 +6163,6 @@ function registerBuiltins() {
     const Tag = overall && !disabled ? "label" : "div";
     return h(Tag, props, checkbox, content, buttonsVNode);
   });
-  registerComponent("action", (el, ctx) => {
-    const p = el.property || {};
-    const layout = p.layout || "flow";
-    const style = { display: "flex", flexWrap: "wrap", gap: "12px" };
-    return h("div", { className: `${CLS}-action ${CLS}-action--${layout}`, style }, renderElements(p.actions, ctx));
-  });
   registerComponent("at", (el, ctx) => {
     const p = el.property || {};
     if (p.userID === "all") {