@open-feishu-card/renderer 0.1.0

package/dist/styles.css

@@ -0,0 +1,605 @@
+/**
+ * open-feishu-card 样式表。
+ * 精简复刻飞书 Universal Card 外观，自包含（不依赖飞书 design token）。
+ * 类名沿用飞书原版前缀 universal-card。
+ *
+ * 注意：header 高光纹理图通过 JS 内联 base64 注入到 .universal-card-header__bg
+ * 的 background-image（见 renderCard 输出的内联 style），故此处不写 url()。
+ */
+
+.universal-card-root {
+  /* 对齐飞书网页版 locale=zh 字体栈：西文优先 Helvetica Neue / Tahoma，
+   * 中文再回落到 PingFang SC / Microsoft Yahei。原先把 PingFang 放在西文字体前，
+   * Windows 上会用微软雅黑的拉丁字形，观感与真卡不一致。 */
+  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma,
+    "PingFang SC", "Microsoft YaHei", Arial, "Hiragino Sans GB", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 14px;
+  line-height: 1.6;
+  color: #1f2329;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 1px solid #dee0e3;
+  overflow: hidden;
+  width: 100%;
+  max-width: 605px;
+  box-sizing: border-box;
+  box-shadow: 0 4px 14px rgba(31, 35, 41, 0.08);
+}
+.universal-card-root *,
+.universal-card-root *::before,
+.universal-card-root *::after { box-sizing: border-box; }
+
+/* ---- header ---- */
+.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;
+  width: 100%;
+  padding: 12px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  /* 图宽=header宽，使纹理自身的左右暗边落在 header 两端、亮带居中 */
+  background-size: 100% 140px;
+}
+/* 内容行：左侧图标 + 右侧标题区（对齐网页版 header__content = row） */
+.universal-card-header__content {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+.universal-card-header__icon {
+  display: flex;
+  height: 24px;
+  align-items: center;
+  margin-right: 8px;
+  flex-shrink: 0;
+  color: inherit;
+}
+.universal-card-header__text {
+  flex: 1;
+  max-width: 100%;
+  line-height: 24px;
+  overflow: hidden;
+  min-width: 0;
+}
+/* 标题行：标题 + 右侧标签同排 */
+.universal-card-header__text-title-wrapper,
+.universal-card-header__title-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.universal-card-header__tags {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  line-height: 1;
+  max-width: 100%;
+}
+.universal-card-header__text-title {
+  overflow: hidden;
+  margin-right: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  word-break: break-word;
+}
+/* 副标题：与标题同色，仅字重更轻（对齐真机 font-weight:400，无 opacity） */
+.universal-card-header__text-subtitle {
+  margin-top: 2px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-break: break-word;
+}
+
+/* ---- body ---- */
+.universal-card-body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 8px;
+  align-items: flex-start;
+}
+.universal-card-body > * { width: 100%; box-sizing: border-box; }
+
+/* ---- markdown 段落 ---- */
+/* 对齐网页版：line-height 默认 1.6；具体字号/行高由组件内联 style 按 text_size 给出 */
+.universal-card-markdown {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #1f2329;
+  word-break: break-word;
+  vertical-align: middle;
+}
+.universal-card-markdown__children {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: pre-wrap;
+}
+
+/* ---- hr 分割线 ---- */
+.universal-card-hr {
+  width: 100%;
+  height: 1px;
+  background-color: #dee0e3;
+  border: none;
+  margin: 8px 0;
+}
+
+/* ---- div ---- */
+.universal-card-div > * + * { margin-top: 8px; }
+/* div 带前置图标：icon 在左、文本在右排成一行（复刻网页版 .universal-card-div 布局） */
+.universal-card-div--with-icon {
+  display: flex; flex-wrap: nowrap; align-items: flex-start; line-height: 1.6;
+}
+.universal-card-div--with-icon > * + * { margin-top: 0; }
+.universal-card-div__icon_wrapper {
+  margin-right: 8px; flex-shrink: 0; height: 1.6em;
+  display: flex; align-items: center; overflow: hidden;
+}
+.universal-card-div__content { flex: 1; min-width: 0; }
+
+/* ---- 布局：column_set / column ---- */
+.universal-card-column-set { display: flex; }
+.universal-card-column { box-sizing: border-box; overflow-wrap: anywhere; }
+/* 列内纵向间距唯一来源是 column 组件输出的 flex row-gap（默认 8px，可被 vertical_spacing 覆盖）。
+   这里不再给相邻子元素设 margin-top——否则与 row-gap 叠加，间距翻倍。 */
+
+/* ---- 图片 ---- */
+.universal-card-image__wrapper { display: flex; max-width: 100%; }
+.universal-card-image__host { max-width: 100%; height: auto; object-fit: cover; border-radius: 4px; }
+.universal-card-image__placeholder {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 80px; min-height: 48px; padding: 8px 12px;
+  color: #8f959e; background: #f5f6f7; border: 1px dashed #dee0e3; border-radius: 4px;
+  font-size: 12px;
+}
+
+/* ---- 按钮 ---- */
+/* 飞书按钮文本是纯文本、单行：min-height 容纳偶发换行，文字超长省略号收尾。
+   样式全集逆向自网页版 ud__button：三大族——outlined（描边）/ text（纯文字）/ filled（实心），
+   每族再分 default / primary / danger 色，另加 laser 渐变。默认（未加变体类）= outlined-default。 */
+.universal-card-button {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 4px;
+  min-height: 28px; padding: 4px 12px;
+  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;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  transition: background-color .1s, border-color .1s, color .1s;
+}
+/* 按钮前置图标：继承按钮文字色（currentColor），高度对齐行高 */
+.universal-card-button__icon {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; height: 1.2em; color: inherit;
+}
+.universal-card-button__icon .universal-card-icon { color: inherit; }
+/* default 宽度：按内容收缩。列是 flex column（默认 align-items:stretch），
+   body 又有 > * { width:100% }，不加这两条会被撑满所在列。 */
+.universal-card-button:not(.universal-card-button--block) {
+  width: auto;
+  max-width: 100%;
+  align-self: flex-start;
+}
+/* fill（width:"fill"）：撑满所在列 */
+.universal-card-button--block { width: 100%; }
+
+/* —— outlined 描边族 —— */
+/* default：灰描边 + 白底 + 深字（未加变体类的裸 .universal-card-button 已是白底深字，
+   这里补上默认灰边与 default 变体一致） */
+.universal-card-button,
+.universal-card-button--default {
+  border-color: #dee0e3; background: #fff; color: #1f2329;
+}
+.universal-card-button--default:not(.universal-card-button--static):hover { background: #f5f6f7; }
+/* primary：蓝描边 + 蓝字 + 白底 */
+.universal-card-button--primary {
+  border-color: #1456f0; background: #fff; color: #1456f0;
+}
+.universal-card-button--primary:not(.universal-card-button--static):hover { background: #f0f4ff; }
+/* danger：红描边 + 红字 + 白底 */
+.universal-card-button--danger {
+  border-color: #f54a45; background: #fff; color: #f54a45;
+}
+.universal-card-button--danger:not(.universal-card-button--static):hover { background: #fef0f0; }
+
+/* —— text 纯文字族（无边框/无底色，按内容宽） —— */
+.universal-card-button--text,
+.universal-card-button--primary_text,
+.universal-card-button--danger_text {
+  border-color: transparent; background: transparent; padding: 4px 8px;
+}
+.universal-card-button--text { color: #1f2329; }
+.universal-card-button--primary_text { color: #1456f0; }
+.universal-card-button--danger_text { color: #f54a45; }
+.universal-card-button--text:not(.universal-card-button--static):hover { background: #f5f6f7; }
+.universal-card-button--primary_text:not(.universal-card-button--static):hover { background: #f0f4ff; }
+.universal-card-button--danger_text:not(.universal-card-button--static):hover { background: #fef0f0; }
+
+/* —— filled 实心族（有底色 + 白字） —— */
+.universal-card-button--primary_filled {
+  border-color: #1456f0; background: #1456f0; color: #fff;
+}
+.universal-card-button--primary_filled:not(.universal-card-button--static):hover { background: #0442d2; border-color: #0442d2; }
+.universal-card-button--danger_filled {
+  border-color: #f54a45; background: #f54a45; color: #fff;
+}
+.universal-card-button--danger_filled:not(.universal-card-button--static):hover { background: #e22e28; border-color: #e22e28; }
+/* laser：飞书「激光」渐变实心按钮（蓝→紫渐变 + 白字） */
+.universal-card-button--laser {
+  border-color: transparent; color: #fff;
+  background: linear-gradient(97deg, #4e83fd 0%, #7a35f0 100%);
+}
+.universal-card-button--laser:not(.universal-card-button--static):hover { filter: brightness(1.05); }
+
+.universal-card-button--disabled,
+.universal-card-button:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+/* 非跳转按钮：保留外观，但不可点（默认光标、无 hover、不响应点击） */
+.universal-card-button--static { cursor: default; pointer-events: none; }
+
+/* ---- 表单（预览：仅透传，无表单语义） ---- */
+.universal-card-form { display: flex; flex-direction: column; row-gap: 8px; }
+.universal-card-form > * { width: 100%; }
+/* input / select 等输入控件：预览里渲染成只读静态框，展示 placeholder */
+.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;
+  cursor: default; pointer-events: none;
+}
+
+/* ---- action 容器 ---- */
+.universal-card-action { display: flex; flex-wrap: wrap; gap: 12px; }
+
+/* ---- checker 勾选器（对齐网页版 universal-card-checker） ---- */
+.universal-card-checker {
+  display: flex; box-sizing: border-box; overflow: hidden; align-items: flex-start;
+  color: inherit;
+}
+.universal-card-checker--hover.universal-card-checker:hover {
+  background-color: rgba(31, 35, 41, 0.05); cursor: pointer;
+}
+.universal-card-checker--disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.universal-card-checker__checkbox-container {
+  display: inline-flex; align-items: center; margin-right: 8px; flex-shrink: 0;
+  height: calc(var(--universal-card-checker-line-height, 22px));
+  position: relative; cursor: pointer;
+}
+/* 原生 checkbox 藏起，用自定义方框画外观；点击由外层 label / 本 label 承接 */
+.universal-card-checker__input {
+  position: absolute; opacity: 0; width: 0; height: 0; margin: 0; padding: 0;
+}
+.universal-card-checker__box {
+  width: 16px; height: 16px; box-sizing: border-box;
+  border: 1px solid #8f959e; border-radius: 4px; background: #fff;
+  display: inline-flex; align-items: center; justify-content: center;
+  flex-shrink: 0; transition: background-color .1s, border-color .1s;
+}
+.universal-card-checker__input:checked + .universal-card-checker__box {
+  background: #1456f0; border-color: #1456f0;
+}
+.universal-card-checker__input:checked + .universal-card-checker__box::after {
+  content: ""; width: 3.5px; height: 7px;
+  border: solid #fff; border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translateY(-0.5px);
+}
+.universal-card-checker__content {
+  /* 真机：content 是 flex，唯一子项是 .universal-card-text（行内排版）。
+   * 不要把 text_tag / plain_text 直接做成 flex 子项——行首空格会被吃掉，
+   * tag 与后续文字贴死（真机靠 break-spaces + 行内流保留 content 里的空格）。 */
+  display: flex; flex: 1; min-width: 35px;
+  line-height: calc(var(--universal-card-checker-line-height, 22px));
+  word-break: break-word;
+}
+/* 真机 .universal-card-text：保留连续空格（text_tag 后常见两个空格） */
+.universal-card-text {
+  word-break: break-word;
+  white-space: break-spaces;
+}
+/* 勾选态：删除线 / 透明度由 :has(:checked) 驱动，本地切换无需 JS */
+.universal-card-checker--strike:has(.universal-card-checker__input:checked) .universal-card-checker__content {
+  text-decoration-line: line-through;
+  text-decoration-color: inherit;
+}
+.universal-card-checker:has(.universal-card-checker__input:checked) .universal-card-checker__content {
+  opacity: var(--checker-checked-opacity, 1);
+}
+.universal-card-checker__content--right { justify-content: right; }
+.universal-card-checker__content--center { justify-content: center; }
+.universal-card-checker__buttons {
+  display: flex; margin-left: 16px; column-gap: 10px; max-width: 150px; flex-shrink: 0;
+  align-items: center;
+}
+.universal-card-checker__buttons--auto-hide { opacity: 0; }
+.universal-card-checker:hover .universal-card-checker__buttons--auto-hide { opacity: 1; }
+.universal-card-checker__button { display: inline-flex; align-items: center; }
+
+
+/* ---- interactive_container 可点击交互容器 ---- */
+.universal-card-interactive-container {
+  display: flex; flex-direction: column; box-sizing: border-box;
+  border-radius: 6px; padding: 0; text-decoration: none; color: inherit;
+  cursor: pointer; transition: background-color .1s;
+}
+.universal-card-interactive-container:not(.universal-card-interactive-container--disabled):hover {
+  background-color: rgba(31, 35, 41, 0.05);
+}
+.universal-card-interactive-container--bordered { border: 1px solid #dee0e3; }
+/* disabled：去掉手型指针与 hover 灰底，外观退回普通块 */
+.universal-card-interactive-container--disabled {
+  cursor: default; transition: none;
+}
+
+/* ---- collapsible_panel 折叠面板（原生 <details>/<summary>，纯 CSS 可点） ---- */
+/* 外层 <details> 容器：border/background/radius 由内联 style 给（来自 border/background_color）。 */
+.universal-card-collapsible-panel {
+  box-sizing: border-box; overflow: hidden;
+}
+/* header（<summary>）：可点击整行；去掉浏览器默认三角标记，标题占满、箭头贴右
+   （icon_position=left 时靠 DOM 顺序在左）。 */
+.universal-card-collapsible-panel__header {
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer; box-sizing: border-box;
+  list-style: none; user-select: none;
+}
+.universal-card-collapsible-panel__header::-webkit-details-marker { display: none; }
+.universal-card-collapsible-panel__header::marker { content: ''; }
+.universal-card-collapsible-panel__title {
+  flex: 1; min-width: 0; font-size: 14px; line-height: 22px; color: #1f2329;
+  word-break: break-word;
+}
+/* 箭头图标包裹：收起态角度 0；展开态（details[open]）旋转到 --panel-icon-angle（内联给出，默认 -180deg）。
+   由用户点击 <summary> 切换 [open]，箭头方向随之自动更新，无需 JS。 */
+.universal-card-collapsible-panel__icon {
+  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
+  transition: transform .2s; color: #646a73; transform: rotate(0deg);
+}
+.universal-card-collapsible-panel[open] .universal-card-collapsible-panel__icon {
+  transform: rotate(var(--panel-icon-angle, -180deg));
+}
+/* 内容区：展开时显示（折叠态由 <details> 交给浏览器隐藏）。左右/底部内边距对齐 header
+   （真机内容 margin 0 12px 12px），顶部紧贴 header 不留空。 */
+.universal-card-collapsible-panel__content {
+  box-sizing: border-box; padding: 0 12px 12px;
+}
+
+/* ---- 人员 person_v1 / person_list（对齐网页版 universal-card-person*）---- */
+.universal-card-person {
+  display: inline-flex; align-items: center; width: auto; max-width: 100%;
+  vertical-align: bottom;
+}
+.universal-card-person__content {
+  display: flex; align-items: center; max-width: 100%; cursor: default;
+}
+/* 真机 --udtoken-tag-neutral-bg-normal = rgba(N900-raw, .1) = rgba(31,35,41,.1) */
+.universal-card-person__content--capsule.universal-card-person__content--name {
+  background: rgba(31, 35, 41, 0.1); border-radius: 99px;
+}
+.universal-card-person__avatar-wrapper {
+  display: flex; flex-shrink: 0;
+}
+.universal-card-person__internal-avatar,
+.universal-card-person-list__avatar,
+.universal-card-person-list__unknown-avatar {
+  flex-shrink: 0; border-radius: 50%; object-fit: cover;
+  display: inline-flex; align-items: center; justify-content: center;
+  overflow: hidden; vertical-align: middle;
+}
+.universal-card-person__avatar--placeholder {
+  background-color: #bbbfc4; color: #fff; font-weight: 500;
+  line-height: 1; text-transform: uppercase; user-select: none;
+}
+.universal-card-person__name {
+  display: inline-flex; align-items: center; min-width: 0;
+  color: #1f2329; max-width: 100%;
+}
+.universal-card-person__name .universal-card-text--line-1 {
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
+  overflow: hidden; word-break: break-all;
+}
+.universal-card-person .universal-card-text { line-height: inherit; }
+
+.universal-card-person-list {
+  display: flex; width: 100%; position: relative; align-items: flex-start;
+  justify-content: flex-start;
+}
+.universal-card-person-list--table {
+  flex-wrap: wrap; gap: 4px 8px; width: auto;
+}
+.universal-card-person-list__icon {
+  margin-right: 8px; flex-shrink: 0; overflow: hidden;
+  display: flex; align-items: center; height: 1.6em;
+}
+.universal-card-person-list__content {
+  overflow: hidden; min-width: 0; flex: 1;
+}
+.universal-card-person-list__content--lines {
+  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
+}
+.universal-card-person-list__content--combine {
+  display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 8px;
+}
+.universal-card-person-list__avatar-name {
+  display: inline-flex; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap; align-items: center; max-width: 100%;
+}
+.universal-card-person-list__avatar-name .universal-card-person-list__avatar,
+.universal-card-person-list__avatar-name .universal-card-person-list__unknown-avatar {
+  margin-right: 4px; flex-shrink: 0;
+}
+.universal-card-person-list__reaction-user {
+  align-items: center; display: inline-flex; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
+  vertical-align: middle;
+}
+.universal-card-person-list__reaction-user--blue { color: #1456f0; }
+.universal-card-person-list__reaction-user--disabled { cursor: default; }
+.universal-card-person-list__reaction-user__name {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  vertical-align: middle; display: inline-block; max-width: 100%;
+}
+.universal-card-person-list__reaction-user__comma {
+  color: #8f959e; white-space: pre; vertical-align: middle;
+}
+/* 葫芦串：叠放头像，重叠处用 SVG mask 挖月牙（对齐 ud__avatar-hollow-out，不用白描边） */
+.universal-card-person-list__avatar-group {
+  display: inline-flex; align-items: center; white-space: nowrap;
+}
+.universal-card-person-list__avatar-group-item {
+  display: inline-flex; border-radius: 50%; overflow: hidden;
+  position: relative; flex-shrink: 0;
+}
+.universal-card-person-list__avatar-group-item .universal-card-person-list__avatar,
+.universal-card-person-list__avatar-group-item .universal-card-person-list__unknown-avatar {
+  display: block; width: 100%; height: 100%;
+}
+
+/* ---- @人 / 链接 ---- */
+.universal-card-markdown-at { word-break: break-word; }
+.universal-card-markdown-link { color: #1456f0; text-decoration: none; }
+.universal-card-markdown-link:hover { text-decoration: underline; }
+
+/* ---- text_tag 彩色标签 ---- */
+.universal-card-text-tag { vertical-align: middle; margin: 0 2px; white-space: nowrap; }
+
+/* ---- markdown: heading / blockquote / list / code ---- */
+.universal-card-markdown-heading { word-break: break-word; }
+.universal-card-blockquote {
+  padding-left: 10px; position: relative; color: #646a73;
+}
+.universal-card-blockquote::before {
+  content: " "; position: absolute; left: 0; top: 0; height: 100%; width: 2px;
+  background-color: #dee0e3;
+}
+.universal-card-markdown-list { text-align: left; }
+.universal-card-markdown-list__item { align-items: flex-start; }
+.universal-card-markdown-list__marker { color: #1456f0; line-height: 1.6; }
+.universal-card-markdown-list__li-content { display: inline-block; }
+.universal-card-code-span {
+  border-radius: 4px; border: 1px solid #dee0e3; padding: 0 4px;
+  background-color: #f5f6f7; font-family: Menlo, Consolas, monospace; font-size: 13px;
+}
+.universal-card-markdown-code-block {
+  text-align: left; padding: 12px; min-width: 210px; margin: 4px 0;
+  font-size: 13px; font-weight: 400; line-height: 1.5;
+  background-color: #f5f6f7; border-radius: 6px; overflow-x: auto;
+  font-family: Menlo, Consolas, monospace; white-space: pre;
+}
+.universal-card-emoji { display: inline; }
+/* emoji 雪碧图：<i> 的 background-image/size/position/width 由 emoji.css（larkw-emoji__img--emoji-*）提供；
+   这里只管行内对齐（vertical-align 让表情与文字基线大致对齐）。 */
+.universal-card-emoji__img { display: inline-block; vertical-align: -0.15em; }
+
+/* 图标（standard_icon / ud_icon）：glyph 由图标字体 :before 画出。
+   字体 @font-face 与每图标 content 规则随 JS 注入（浏览器端 renderCard 自动注入，
+   Node/SSR 端引入 open-feishu-card/icon-font.css）。这里只管布局对齐。 */
+.universal-card-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: -0.125em;
+}
+
+/* ---- chart 图表 ---- */
+/* 挂载容器：aspect-ratio / height 由内联 style 给（来自 aspect_ratio）。
+   VChart 水合后会往 __vchart 里塞 <canvas>；水合前显示 loading 占位。 */
+.universal-card-chart {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.universal-card-chart__vchart {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.universal-card-chart__vchart canvas { display: block; }
+.universal-card-chart__loading,
+.universal-card-chart__placeholder {
+  display: flex; align-items: center; justify-content: center;
+  width: 100%; height: 100%;
+  color: #8f959e; font-size: 12px;
+  background: #f5f6f7; border: 1px dashed #dee0e3; border-radius: 4px;
+  box-sizing: border-box;
+}
+
+/* ---- table 表格 ---- */
+.universal-card-table {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #dee0e3;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.universal-card-table__scroll { width: 100%; overflow-x: auto; }
+.universal-card-table__table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
+  font-size: 14px;
+  color: #1f2329;
+}
+.universal-card-table__th,
+.universal-card-table__td {
+  padding: 8px 12px;
+  border-bottom: 1px solid #dee0e3;
+  border-right: 1px solid #eff0f1;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+.universal-card-table__th:last-child,
+.universal-card-table__td:last-child { border-right: none; }
+.universal-card-table__tbody tr:last-child .universal-card-table__td { border-bottom: none; }
+.universal-card-table__th {
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  color: #1f2329;
+}
+.universal-card-table__th-text--bold { font-weight: 600; }
+.universal-card-table__cell {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  word-break: break-word;
+}
+.universal-card-table__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
+
+/* 暗色主题下的表格/图表占位 */
+.universal-card-root.theme-dark .universal-card-table { border-color: #2e2e30; }
+.universal-card-root.theme-dark .universal-card-table__th,
+.universal-card-root.theme-dark .universal-card-table__td { border-color: #2e2e30; color: #d6d6d6; }
+.universal-card-root.theme-dark .universal-card-table__th { color: #ebebeb; }
+.universal-card-root.theme-dark .universal-card-chart__loading,
+.universal-card-root.theme-dark .universal-card-chart__placeholder {
+  background: #232323; border-color: #2e2e30; color: #8a8a8a;
+}
+
+/* ---- 暗色主题（可选）：给 .universal-card-root 加 .theme-dark 即可 ----
+   暗色高光图同样由 JS 注入；如需纯 CSS 暗色，可自行覆盖 background-image。 */
+.universal-card-root.theme-dark {
+  color: #ebebeb;
+  background-color: #1a1a1a;
+  border-color: #2e2e30;
+}
+.universal-card-root.theme-dark .universal-card-markdown { color: #d6d6d6; }
+.universal-card-root.theme-dark .universal-card-hr { background-color: #2e2e30; }

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@open-feishu-card/renderer",
+  "version": "0.1.0",
+  "description": "零框架依赖的飞书卡片渲染引擎：Web / DOM / SSR，输入 RAW 或公开 DSL，输出真实 DOM 或 HTML 字符串",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./icon-font.css": "./dist/icon-font.css",
+    "./emoji.css": "./dist/emoji.css",
+    "./all.css": "./dist/all.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/*.js",
+    "./dist/*.cjs"
+  ],
+  "dependencies": {
+    "@open-feishu-card/adapter": "0.1.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5",
+    "typescript": "^5.9.3",
+    "@types/node": "^22.20.1"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ztxtxwd/open-feishu-card-monorepo.git",
+    "directory": "packages/renderer"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "node --test test/*.test.mjs"
+  }
+}