cardbuddy 0.6.0 → 0.8.0

package/dist/vendored/styles/setters.css

@@ -220,7 +220,7 @@
   background: var(--bg-input);
   border-left: 1px solid var(--border);
   color: var(--text-dim);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 1;
   cursor: pointer;
   user-select: none;
@@ -309,7 +309,7 @@
   background: var(--accent);
 }
 .st-switch__text {
-  font-size: 11px;
+  font-size: 12px;
   color: var(--text-dim);
 }
 
@@ -763,12 +763,31 @@
 /* --------------------------- 代码编辑器（SetCode） --------------------------- */
 
 .st-code {
+  position: relative;
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 0;
 }
 
+/* 代码编辑器右上角语言标签：等宽小字 + 发丝线框的弱化标识，不挡交互 */
+.st-code__lang {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  padding: 0 5px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg-bar);
+  color: var(--text-faint);
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 10px;
+  line-height: 16px;
+  letter-spacing: 0.4px;
+  pointer-events: none;
+  user-select: none;
+}
+
 .st-code__editor {
   min-height: 140px;
   max-height: 340px;
@@ -796,6 +815,76 @@
   pointer-events: none;
 }
 
+/* 桥接期间只读：边框着淡 accent 提示「外部编辑中」，不用 opacity 压暗（与 disabled 区分） */
+.st-code__editor.is-bridged {
+  border-color: var(--accent-border);
+}
+
+/* 底栏右侧动作组：VSCode 桥接按钮 + 同步徽标（与左侧行数 hint 两端对齐） */
+.st-code__foot-actions {
+  flex: 0 0 auto;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.st-code__bridge-tag {
+  font-size: 11px;
+  color: var(--accent);
+  white-space: nowrap;
+}
+
+/* 文字+图标弱按钮：与 .ee-help / 面板关闭按钮同一语言（22px 高、无边框、hover 浅底） */
+.st-code__vscode {
+  flex: 0 0 auto;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 0 5px;
+  background: none;
+  border: none;
+  border-radius: 6px;
+  color: var(--text-faint);
+  font-size: 11px;
+  line-height: normal;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 0.15s, background 0.15s;
+}
+
+.st-code__vscode-label {
+  font-size: 11px;
+  line-height: normal;
+  letter-spacing: 0.2px;
+}
+
+.st-code__vscode:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.st-code__vscode.is-on {
+  color: var(--accent);
+}
+
+.st-code__vscode.is-on:hover {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.st-code__vscode:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.st-code__vscode svg {
+  display: block;
+  fill: currentColor;
+}
+
 .st-code__foot {
   display: flex;
   align-items: center;

package/dist/vendored/styles/structure-tree.css

@@ -8,6 +8,9 @@
 .st {
   position: relative;
   min-height: 100%;
+  /* flex 列布局 + 底部帮助按钮 margin-top:auto：内容不足一屏时按钮仍吸附面板底部 */
+  display: flex;
+  flex-direction: column;
 }
 
 /* 顶部工具条：与 JsonTree 的 .jt__toolbar 同款（sticky 顶部），
@@ -16,7 +19,7 @@
   display: flex;
   justify-content: flex-start;
   gap: 12px;
-  padding: 4px 0 8px;
+  padding: 8px 12px;
   position: sticky;
   top: 0;
   z-index: var(--z-sticky);
@@ -86,14 +89,148 @@
   list-style: none;
 }
 
-/* 操作提示：淡色弱文案，提示 Ctrl/⌘ 点击画布可定位节点 */
-.st__tip {
+/* 帮助悬浮按钮容器：零高度 sticky 吸附在滚动视口底部（滚动容器为外层 .debug__body），
+   内容过长时按钮仍固定于面板左下角可见，且不占用固定布局区域 */
+.st__help-wrap {
+  position: sticky;
+  bottom: 10px;
+  height: 0;
+  z-index: var(--z-pop);
+  /* 内容较短时把按钮推到 .st 底部（即面板可见区底部）；内容较长时由 sticky 吸附兜底 */
+  margin-top: auto;
+}
+.st__help {
+  position: absolute;
+  left: 10px;
+  bottom: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  background: var(--bg-input);
+  color: var(--text-dim);
+  border: 1px solid var(--border-strong);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.st__help svg {
+  transition: transform 0.05s;
+}
+.st__help:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+/* 按压反馈下移到内部图标：按钮本身是零高度 sticky 容器内的绝对定位元素，
+   其 transform 会按 sticky 未吸附时的静态位置（即内容最底部）计入 .debug__body
+   的可滚动溢出，按下时多出 1px 溢出导致面板主体闪现滚动条；图标在 28px 按钮内
+   上下各有 6px 余量，1px 位移不会外溢。 */
+.st__help:active svg {
+  transform: translateY(1px);
+}
+/* 气泡展开时按钮保持激活态配色 */
+.st__help--open {
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+/* 使用说明气泡：自左下角按钮向上弹出 */
+.st__help-pop {
+  position: absolute;
+  left: 10px;
+  bottom: 36px;
+  width: 300px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+.st__help-pop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.st__help-pop-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+}
+.st__help-pop-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.15s, color 0.15s;
+}
+.st__help-pop-close:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.st__help-pop-body {
   margin: 0;
-  padding: 6px 8px 8px;
+  padding: 10px 12px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.6;
+}
+/* 快捷键清单：左列按键示意（kbd 芯片），右列一句话说明 */
+.st__keys {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.st__keys-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.st__keys-combo {
+  flex: 0 0 108px; /* 左列固定宽度，组合键纵向对齐 */
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  white-space: nowrap;
+}
+.st__kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  border-bottom-width: 2px; /* 键帽底部加厚，模拟按键立体感 */
+  border-radius: 5px;
+  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  line-height: 1;
+}
+.st__kbd-plus {
   color: var(--text-faint);
   font-size: 11px;
+}
+.st__keys-desc {
+  flex: 1 1 auto;
+  color: var(--text-dim);
+  font-size: 12px;
   line-height: 1.5;
-  border-bottom: 1px solid var(--border);
 }
 
 .st__node {
@@ -216,30 +353,36 @@
   margin-left: auto;
   padding: 0 6px;
   font-size: 11px;
-  line-height: 18px;
-  color: var(--st-badge-fg);
-  background: var(--st-badge-bg);
+  line-height: 16px;
+  border: 1px solid transparent;
   border-radius: var(--radius-xs);
 }
 
+/* 有事件：soft 语言（浅底 + 同色文字 + 发丝描边），与面板内分段 / 来源切换一致，
+   不再用实心蓝块；hover 仅提亮文字，不做缩放 / 透明度旧语言 */
 .st__badge--clickable {
+  color: var(--accent);
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
   cursor: pointer;
-  transition: opacity 0.15s, transform 0.1s;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
 }
 .st__badge--clickable:hover {
-  opacity: 0.85;
-  transform: scale(1.05);
+  color: var(--accent-hover);
 }
+
+/* 无事件：透明底 + 发丝线框的弱标识 */
 .st__badge--muted {
   cursor: pointer;
-  background: var(--border-strong);
   color: var(--text-faint);
-  opacity: 0.7;
-  transition: opacity 0.15s, color 0.15s;
+  background: transparent;
+  border-color: var(--border);
+  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
 }
 .st__badge--muted:hover {
-  opacity: 1;
   color: var(--text-dim);
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
 }
 
 /* 行最右侧「齿轮」：打开节点属性面板（替代原双击行为）。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cardbuddy",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Local dev service for the CardBuddy card editor — decouples card CRUD (sync/save/validate/render-status/screenshot) from the static public editor, so the editor can be deployed to any static host while each developer runs a local service against their own card source.",
   "type": "module",
   "bin": {