cardbuddy 0.7.0 → 0.9.0

package/dist/vendored/styles/node-inspector.css

@@ -10,8 +10,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  /* 遮罩完全透明：不遮挡预览区，仅面板自身浮于其上 */
-  background: transparent;
+  /* 半透明遮罩：与确认框 / 组件面板等全局模态统一（--scrim-modal + 轻 blur） */
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 
 .ni-panel {
@@ -33,28 +34,28 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 16px;
+  padding: 10px 16px;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 
 .ni-title {
-  font-size: 16px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text);
 }
 
 .ni-close {
-  width: var(--ctrl-sm);
-  height: var(--ctrl-sm);
+  width: 22px;
+  height: 22px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-input);
-  border: 1px solid var(--border-strong);
+  background: none;
+  border: none;
   border-radius: 6px;
-  color: var(--text-dim);
-  font-size: 18px;
+  color: var(--text-faint);
+  font-size: 15px;
   cursor: pointer;
   line-height: 1;
   transition: background 0.15s, color 0.15s;
@@ -87,8 +88,8 @@
   min-height: 0;
   overflow-y: auto;
   /* 仅给内容留 16px 横向间距，滚动条（右侧）紧贴面板边缘；
-     底部 76px 预留给悬浮的 .ni-foot，避免内容被遮挡 */
-  padding: 0 16px 76px;
+     底栏已改普通贴底 flex 行（不再悬浮），留 12px 收尾呼吸即可 */
+  padding: 0 16px 12px;
 }
 
 .ni-body > .ni-sec {
@@ -103,7 +104,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text);
   margin-bottom: 12px;
@@ -199,7 +200,7 @@ select.ni-input {
   border: 1px solid var(--border);
   border-radius: 8px;
   margin-bottom: 8px;
-  background: var(--bg-panel);
+  background: transparent;
 }
 
 .ni-prop-label {
@@ -291,7 +292,8 @@ select.ni-input {
   font-size: 12px;
   padding: 6px 10px;
   border-radius: 6px;
-  background: var(--bg-input);
+  background: transparent;
+  border: 1px solid var(--border);
 }
 
 .ni-key {
@@ -314,7 +316,7 @@ select.ni-input {
   margin-left: auto;
   font-size: 12px;
   padding: 2px 8px;
-  background: var(--bg-soft);
+  background: var(--accent-soft);
   border-radius: 4px;
   color: var(--accent);
 }
@@ -325,7 +327,7 @@ select.ni-input {
   padding: 0 10px;
   font-size: 12px;
   border: 1px solid var(--border-strong);
-  background: var(--bg-input);
+  background: transparent;
   color: var(--text-dim);
   border-radius: 6px;
   cursor: pointer;
@@ -362,8 +364,9 @@ select.ni-input {
   align-items: center;
   gap: 8px;
   padding: 7px 10px;
-  background: var(--bg-input);
-  border-radius: 7px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
 }
 
 .ni-event-name {
@@ -388,9 +391,9 @@ select.ni-input {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 10px;
+  padding: 6px 8px;
   border-radius: 6px;
-  background: var(--bg-input);
+  background: transparent;
   cursor: pointer;
   user-select: none;
   transition: background 0.15s;
@@ -403,7 +406,7 @@ select.ni-input {
 .ptree__group-name {
   flex: 1 1 auto;
   min-width: 0;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 600;
   color: var(--text);
   white-space: nowrap;
@@ -452,9 +455,10 @@ select.ni-input {
 }
 
 .ptree__label {
-  flex: 0 0 96px;
+  flex: 0 0 88px;
   font-size: 12px;
   color: var(--text-dim);
+  text-align: right;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -465,21 +469,16 @@ select.ni-input {
   min-width: 0;
 }
 
-/* 底部：悬浮操作条，不占布局高度（内容可滚到其下方） */
+/* 底栏：普通 flex 行贴底，发丝线分隔，不叠悬浮阴影（与事件抽屉 .ee-foot 统一） */
 .ni-foot {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding: 12px 16px;
-  background: var(--bg-panel);
+  padding: 10px 16px;
+  background: var(--bg-bar);
   border-top: 1px solid var(--border);
-  box-shadow: 0 -8px 24px var(--shadow-card);
 }
 
 .ni-tip {
@@ -497,30 +496,29 @@ select.ni-input {
 .ni-btn {
   white-space: nowrap;
   height: var(--ctrl-sm);
-  padding: 0 16px;
-  font-size: 13px;
+  padding: 0 14px;
+  font-size: 12px;
   border-radius: 6px;
-  border: 1px solid var(--accent);
-  background: var(--accent);
-  color: var(--on-accent);
+  border: 1px solid var(--accent-border);
+  background: transparent;
+  color: var(--accent);
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: background 0.15s, color 0.15s;
 }
 
 .ni-btn:hover {
-  opacity: 0.92;
+  background: var(--accent-soft);
 }
 
 .ni-btn--ghost {
   background: transparent;
-  color: var(--text);
+  color: var(--text-dim);
   border-color: var(--border-strong);
 }
 
 .ni-btn--ghost:hover {
-  border-color: var(--accent);
-  color: var(--accent);
-  opacity: 1;
+  background: var(--bg-hover);
+  color: var(--text);
 }
 
 /* ===================== 事件页签（开关式：事件列表 + 开关 + 动作参数） ===================== */
@@ -535,19 +533,19 @@ select.ni-input {
   border: 1px solid var(--border);
   border-radius: 8px;
   overflow: hidden;
-  background: var(--bg-panel);
+  background: transparent;
 }
 
 .ni-evt-head {
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 12px 14px;
+  padding: 8px 12px;
 }
 
 .ni-evt-name {
   flex: 0 0 auto;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
   color: var(--text);
   white-space: nowrap;
@@ -563,39 +561,41 @@ select.ni-input {
   text-overflow: ellipsis;
 }
 
-/* 开关 */
+/* 开关：与 setter 家族 .st-switch 同语言（发丝线轨道 + soft 开启态），不用实心 accent 填充 */
 .ni-switch {
   flex: 0 0 auto;
   position: relative;
-  width: 36px;
-  height: 20px;
+  width: 34px;
+  height: 18px;
   padding: 0;
   margin: 0;
-  border: none;
-  border-radius: 10px;
-  background: var(--border-strong);
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  background: var(--bg-hover);
   cursor: pointer;
-  transition: background 0.18s;
+  transition: background 0.16s, border-color 0.16s;
   flex-shrink: 0;
 }
 
 .ni-switch.is-on {
-  background: var(--accent);
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
 }
 
 .ni-switch__dot {
   position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
+  top: 1px;
+  left: 1px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
-  background: var(--on-accent);
-  transition: transform 0.18s;
+  background: var(--text-dim);
+  transition: transform 0.16s, background 0.16s;
 }
 
 .ni-switch.is-on .ni-switch__dot {
   transform: translateX(16px);
+  background: var(--accent);
 }
 
 .ni-evt-body {
@@ -643,20 +643,18 @@ select.ni-input {
 }
 
 /* ===================== 事件编辑抽屉（EventEditor.vue，右侧滑出） ===================== */
-/* 100vh × calc(100vw - 预览面板宽度)；上下排布，上方事件开关列表 + 下方动作/脚本编辑区；
-   抽屉主体不产生滚动条，脚本编辑区填满剩余高度。 */
+/* 100vh × calc(100vw - 预览面板宽度)；上下排布：顶部事件 chip 行 + 动作/脚本编辑区；
+   抽屉主体不产生滚动条，脚本编辑区填满剩余高度。轻 chrome：事件列表为顶部可换行
+   内联事件项行（不单独占列），底栏发丝线不叠阴影；仅抽屉最外层保留投影区分层级。 */
 
 .ee-overlay {
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  /* 左缘 = 当前预览面板宽度（由 App 根节点注入的 --preview-width 实时驱动），
-     不再写死 375px；面板宽度随之 = 100vw − 预览面板宽度，随分隔条拖拽动态变化 */
-  left: var(--preview-width, 375px);
+  inset: 0;
   z-index: var(--z-appmodal);
-  /* 透明：手机区（左侧预览面板）保持可见且可交互，不遮罩 */
-  background: transparent;
+  /* 半透明遮罩：与确认框 / 组件面板等全局模态统一（--scrim-modal + 轻 blur）；
+     抽屉主体仍右缘贴边满高 */
+  background: var(--scrim-modal);
+  backdrop-filter: blur(var(--scrim-modal-blur));
 }
 
 /* 抽屉主体：右侧贴边、满高、宽度 = 视口减去手机宽度 */
@@ -676,13 +674,29 @@ select.ni-input {
   overflow: hidden;
 }
 
-/* 从右往左滑入/滑出（DebugPanel 中 <Transition name="ee-drawer"> 驱动） */
+/* 进出场动画（DebugPanel 中 <Transition name="ee-drawer"> 驱动）：
+   遮罩只做淡入/淡出，抽屉主体单独从右往左滑入/滑出——全屏遮罩不应跟随主体平移。
+   离场遮罩淡出与主体滑动同长（0.26s），保证滑动过程可见；入场遮罩淡入稍快。 */
 .ee-drawer-enter-active,
 .ee-drawer-leave-active {
-  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
+  transition: opacity 0.18s ease;
+}
+.ee-drawer-leave-active {
+  transition: opacity 0.24s ease;
+}
+/* 主体滑入带一点弹性（过冲后回稳）；滑出干脆不回弹 */
+.ee-drawer-enter-active .ee-panel {
+  transition: transform 0.34s cubic-bezier(0.32, 1.32, 0.45, 1);
+}
+.ee-drawer-leave-active .ee-panel {
+  transition: transform 0.24s cubic-bezier(0.4, 0, 0.6, 1);
 }
 .ee-drawer-enter-from,
 .ee-drawer-leave-to {
+  opacity: 0;
+}
+.ee-drawer-enter-from .ee-panel,
+.ee-drawer-leave-to .ee-panel {
   transform: translateX(100%);
 }
 
@@ -690,13 +704,13 @@ select.ni-input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 12px 20px;
+  padding: 10px 16px;
   border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 
 .ee-title {
-  font-size: 16px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--text);
 }
@@ -714,11 +728,11 @@ select.ni-input {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-input);
-  border: 1px solid var(--border-strong);
+  background: none;
+  border: none;
   border-radius: 6px;
-  color: var(--text-dim);
-  font-size: 18px;
+  color: var(--text-faint);
+  font-size: 15px;
   cursor: pointer;
   line-height: 1;
   transition: background 0.15s, color 0.15s;
@@ -727,7 +741,7 @@ select.ni-input {
 .ee-close::before { content: '✕'; }
 .ee-close:hover { background: var(--bg-hover); color: var(--text); }
 
-/* 主体：上事件开关列表 + 下动作/脚本编辑区，纵向上下排布，不滚动 */
+/* 主体：上事件 chip 行 + 下动作/脚本编辑区，纵向排布 */
 .ee-body {
   flex: 1 1 auto;
   min-height: 0;
@@ -736,61 +750,80 @@ select.ni-input {
   overflow: hidden;
 }
 
-/* 上方事件开关列表：有界高度（最多约 40%），内部独立滚动，不再单列占宽 */
+/* 顶部事件条：左事件项、右帮助图标，两端对齐 + 垂直居中；
+   事件过多的滚动交给 .ee-evt-list 自身，side 不滚动（避免裁切帮助弹层） */
 .ee-side {
+  position: relative;
   flex: 0 0 auto;
-  max-height: 40%;
   min-width: 0;
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
   border-bottom: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 12px 16px;
-  line-height: 28px;
+  padding: 8px 16px;
+}
+
+.ee-side > .ee-empty {
+  flex: 1 1 auto;
 }
 
 .ee-evt-list {
+  flex: 1 1 auto;
+  min-width: 0;
   display: flex;
-  flex-direction: column;
-  gap: 4px;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  /* 约三行高度封顶，超出内部滚动 */
+  max-height: 108px;
+  overflow-y: auto;
 }
 
+/* 事件项：内联字段组（名称 + 开关），不是按钮——无描边无胶囊，仅靠文字色与浅底表达状态：
+   关闭 = 弱色名称；开启 = 常色名称；正在编辑 = 浅底 + accent 名称 */
 .ee-evt {
   display: flex;
   align-items: center;
-  gap: 10px;
-  height: var(--ctrl-lg);
-  padding: 0 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg-input);
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px 0 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background 0.15s;
 }
 
 .ee-evt:hover {
   background: var(--bg-hover);
 }
-
+.ee-evt.is-on .ee-evt-name {
+  color: var(--text);
+}
+.ee-evt.is-sel {
+  background: var(--bg-input);
+}
+.ee-evt.is-sel .ee-evt-name {
+  color: var(--accent);
+}
 .ee-evt-name {
   flex: 1 1 auto;
   min-width: 0;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
-  color: var(--text);
+  color: var(--text-faint);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-/* 下方详情区：填满剩余高度，底部 76px 预留给悬浮的 .ee-foot */
+/* 右侧详情区：填满剩余高度；底栏为普通 flex 行，无需预留悬浮高度 */
 .ee-detail {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  /* 底部 76px 预留给悬浮的 .ee-foot，避免详情最末内容被遮挡 */
-  padding: 16px 24px 76px;
+  padding: 12px 16px;
   overflow: hidden;
 }
 
@@ -803,7 +836,7 @@ select.ni-input {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
+  margin-top: 8px;
   overflow: hidden;
 }
 
@@ -820,6 +853,11 @@ select.ni-input {
   flex: 1 1 auto;
   min-height: 0;
 }
+/* 代码行语义已由上文（动作类型 / 描述）说明，去掉独占的 label 列把整宽还给编辑器；
+   语言改由编辑器右上角 JS 标签标示 */
+.ee-detail-body .ptree__row--block .ptree__label {
+  display: none;
+}
 .ee-detail-body .st-code {
   flex: 1 1 auto;
   min-height: 0;
@@ -875,7 +913,7 @@ select.ni-input {
 }
 
 .ee-field-label {
-  flex: 0 0 80px;
+  flex: 0 0 64px;
   font-size: 12px;
   color: var(--text-dim);
   text-align: right;
@@ -902,23 +940,65 @@ select.ni-input {
 
 select.ee-input { height: 32px; }
 
-.ee-evt-desc {
-  margin: 8px 0 0;
-  font-size: 11px;
+/* 帮助图标按钮：与事件项同排的纯图标弱按钮 */
+.ee-help {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: none;
+  border: none;
+  border-radius: 6px;
   color: var(--text-faint);
-  line-height: 1.4;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+.ee-help:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+/* 弹层外点击关闭：透明遮罩铺满视口 */
+.ee-help__mask {
+  position: fixed;
+  inset: 0;
+  z-index: 6;
+}
+/* 使用说明弹层：锚定事件条右下角，浮于详情区之上 */
+.ee-help__pop {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 12px;
+  z-index: 7;
+  /* 弹层锚定右上帮助图标：弹性缩放自该角生长 */
+  transform-origin: top right;
+  width: min(340px, 78%);
+  padding: 8px 10px;
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  background: var(--bg-panel);
+  box-shadow: var(--shadow-3);
+}
+.ee-help__text {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-dim);
+  white-space: pre-wrap;
 }
 
 /* 开关 */
 .ee-switch {
   flex: 0 0 auto;
   position: relative;
-  width: 36px;
-  height: 20px;
+  width: 30px;
+  height: 16px;
   padding: 0;
   margin: 0;
   border: none;
-  border-radius: 10px;
+  border-radius: 8px;
   background: var(--border-strong);
   cursor: pointer;
   transition: background 0.18s;
@@ -930,14 +1010,14 @@ select.ee-input { height: 32px; }
   position: absolute;
   top: 2px;
   left: 2px;
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
   border-radius: 50%;
   background: var(--on-accent);
   transition: transform 0.18s;
 }
 
-.ee-switch.is-on .ee-switch__dot { transform: translateX(16px); }
+.ee-switch.is-on .ee-switch__dot { transform: translateX(14px); }
 
 .ee-evt-orphan {
   flex: 0 0 auto;
@@ -946,22 +1026,16 @@ select.ee-input { height: 32px; }
   color: var(--warn);
 }
 
-/* 底栏 */
-/* 底部：悬浮操作条，不占布局高度（内容可滚到其下方） */
+/* 底栏：普通 flex 行贴底，发丝线分隔，不用悬浮阴影 */
 .ee-foot {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
-  padding: 12px 24px;
-  background: var(--bg-panel);
+  padding: 10px 16px;
+  background: var(--bg-bar);
   border-top: 1px solid var(--border);
-  box-shadow: 0 -8px 24px var(--shadow-card);
 }
 
 .ee-tip {
@@ -979,25 +1053,24 @@ select.ee-input { height: 32px; }
 .ee-btn {
   white-space: nowrap;
   height: var(--ctrl-sm);
-  padding: 0 16px;
-  font-size: 13px;
+  padding: 0 14px;
+  font-size: 12px;
   border-radius: 6px;
-  border: 1px solid var(--accent);
-  background: var(--accent);
-  color: var(--on-accent);
+  border: 1px solid var(--accent-border);
+  background: transparent;
+  color: var(--accent);
   cursor: pointer;
-  transition: opacity 0.15s;
+  transition: background 0.15s, color 0.15s;
 }
 
-.ee-btn:hover { opacity: 0.92; }
+.ee-btn:hover { background: var(--accent-soft); }
 
 .ee-btn--ghost {
   background: transparent;
-  color: var(--text);
+  color: var(--text-dim);
   border-color: var(--border-strong);
 }
 
 .ee-btn--ghost:hover {
   background: var(--bg-hover);
-  opacity: 1;
 }