cardbuddy 0.8.0 → 0.9.1

package/dist/vendored/styles/app.css

@@ -88,6 +88,8 @@
   --log-warn-border: rgba(224, 179, 65, 0.35);
   --scroll-thumb: rgba(148, 154, 171, 0.28);
   --scroll-thumb-hover: rgba(148, 154, 171, 0.45);
+  /* 静止档：鼠标不在滚动区域时弱化显示 */
+  --scroll-thumb-idle: rgba(148, 154, 171, 0.14);
   /* 语法高亮配色（JSON 树 / 结构树 / 代码编辑器），随主题切换；暗色默认=原硬编码值，保证暗色外观不变 */
   --jt-key: #9db4ff;
   --jt-string: #8fe39a;
@@ -242,6 +244,7 @@
   --log-warn-border: rgba(181, 129, 5, 0.3);
   --scroll-thumb: rgba(0, 0, 0, 0.2);
   --scroll-thumb-hover: rgba(0, 0, 0, 0.32);
+  --scroll-thumb-idle: rgba(0, 0, 0, 0.1);
   /* 语法高亮配色：浅色主题参考 GitHub Light / VSCode Light+，保证白底上的可读性 */
   --jt-key: #953800;
   --jt-string: #0a3069;
@@ -304,23 +307,47 @@ body {
   height: 100vh;
 }
 
-/* 全局滚动条（Firefox） */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scroll-thumb) transparent;
+/* 全局滚动条（仅 Firefox）：FF 不识别 ::-webkit-scrollbar，也不支持悬停分档/过渡，取中间档常显。
+   必须隔离在 FF：Chrome 121+ 一旦命中 scrollbar-width 会改走标准滚动条，
+   忽略 ::-webkit-scrollbar 定制（含下方三档透明度与过渡）。 */
+@supports (-moz-appearance: none) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-thumb) transparent;
+  }
 }
-/* 全局滚动条（WebKit） */
+/* 全局滚动条（WebKit）三档透明度：
+   静止（鼠标不在滚动区域）弱化 → 鼠标进入区域回常 → 按住 thumb 再提亮；
+   background-color 过渡保证移入/移出平滑淡入淡出。页面所有滚动区域继承本规则。
+   注：区域档必须用 :has(:hover)（容器内有被悬停后代）而非容器自身 :hover ——
+   Chromium 不会因滚动容器自身 hover 状态变化重算其 ::-webkit-scrollbar-* 样式（实测无效），
+   :has(:hover) 与祖先 hover 均可正常触发重绘。 */
 *::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 *::-webkit-scrollbar-thumb {
-  background: var(--scroll-thumb);
+  background: var(--scroll-thumb-idle);
   border-radius: 8px;
+  transition: background-color 0.2s ease;
+}
+*:has(:hover)::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
+}
+/* 纯文本滚动区兜底：CodeJar 编辑器与原生对话框正文以文本节点为主，容器内几乎没有可命中的
+   悬停后代，仅靠 :has(:hover) 会随鼠标落在「文字 / 缩进空白」上而闪烁，故改用紧贴外层容器的 hover。 */
+.st-expr:hover .st-expr__editor::-webkit-scrollbar-thumb,
+.st-code:hover .st-code__editor::-webkit-scrollbar-thumb,
+.debug__scope-raw:hover .debug__raw-editor::-webkit-scrollbar-thumb,
+.dlg:hover .dlg__msg::-webkit-scrollbar-thumb {
+  background: var(--scroll-thumb);
 }
 *::-webkit-scrollbar-thumb:hover {
   background: var(--scroll-thumb-hover);
 }
+*::-webkit-scrollbar-thumb:active {
+  background: var(--scroll-thumb-hover);
+}
 *::-webkit-scrollbar-track {
   background: transparent;
 }
@@ -884,7 +911,7 @@ body {
   flex: 0 0 auto;
   order: 2;
 }
-/* 底部弹出面板容器（运行态 / 事件 / 绑定错误）：Teleport 目标，宽度贯穿中右两栏；
+/* 底部弹出面板容器（运行态 / 事件 / 变量绑定）：Teleport 目标，宽度贯穿中右两栏；
    空容器（面板均 v-show 隐藏时）高度为 0，不占位 */
 .workside__panels {
   flex: 0 0 auto;
@@ -924,7 +951,7 @@ body {
   justify-content: center;
   overflow: hidden;
 }
-/* 画布层：直接按实际列宽/列高布局（width/height 100% 填满外框），不再使用 transform 缩放；内部 device-bar 固定高、phone-viewport 弹性填充 */
+/* 画布层：直接按实际列宽/列高布局（width/height 100% 填满外框），不再使用 transform 缩放；内部 canvas-bar 固定高、phone-viewport 弹性填充 */
 .phone__scaler {
   position: relative;
   width: 100%;
@@ -975,68 +1002,121 @@ body {
   cursor: col-resize !important;
 }
 
-/* 设备工具条（类 Chrome DevTools 设备模式顶部预留的细条）：
-   与手机框等宽、紧贴其上，通过下拉选择画布背景 */
-.device-bar {
+/* 画布工具条：原 device-bar（顶 28px）与 preview-statusbar（底 28px）合并为一条 32px——
+   把 28px 竖向空间还给手机视口，也消除「顶条 bg-bar / 底条透明」两种底色并存的割裂感。
+   视觉语法与全局状态栏同源：透明底融入舞台（--bg-stage），仅一条发丝线收边；
+   控件为 ghost chip（hover / 展开出 --bg-hover），读数等宽 + tabular-nums 不跳宽。
+   左组 = 改变画布（背景 / 宽度预设），右组 = 画布现状与动作（尺寸读数 / 刷新）。 */
+.canvas-bar {
   flex: 0 0 auto;
   width: 100%;
-  height: 28px;
+  height: 32px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 0 12px;
-  background: var(--bg-bar);
+  gap: 4px;
+  padding: 0 8px;
   border-bottom: 1px solid var(--border);
 }
-/* 背景下拉框由 Dropdown 组件统一渲染（.dd 体系），无边框模式见 dropdown.css 的 .dd--borderless */
-.device-bar__spacer {
+.canvas-bar__spacer {
   flex: 1 1 auto;
 }
-.device-bar__info {
+/* chip：两个 Dropdown 的 slot 触发器统一外观（24px 高 / 5px 圆角 / hover 出底） */
+.canvas-bar__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 5px;
+  color: var(--text-dim);
+  font-size: 11.5px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.canvas-bar__chip:hover,
+.dd--open > .dd__trigger--slot .canvas-bar__chip {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.canvas-bar__chev {
+  width: 10px;
+  height: 10px;
+  color: var(--text-faint);
+}
+.canvas-bar__icn {
+  flex: 0 0 auto;
+  width: 13px;
+  height: 13px;
+  color: var(--text-faint);
+}
+/* 背景小样：与 .phone__screen--bg-* 同色，触发器上直接可见当前模式，不必展开下拉 */
+.canvas-bar__swatch {
+  flex: 0 0 auto;
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--border-strong);
+}
+.canvas-bar__swatch--white {
+  background: #ffffff;
+}
+.canvas-bar__swatch--gray {
+  background: #f0f0f0;
+}
+.canvas-bar__swatch--checker {
+  background-color: #ffffff;
+  background-image:
+    linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%),
+    linear-gradient(45deg, #cfcfcf 25%, transparent 25%, transparent 75%, #cfcfcf 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 3px 3px;
+}
+/* 尺寸读数：等宽 + tabular-nums，拖拽分隔条改宽时数字不跳宽 */
+.canvas-bar__size {
+  padding: 0 4px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
   color: var(--text-faint);
-  font-size: 12px;
   white-space: nowrap;
 }
-/* 底部状态条刷新按钮：仅图标、与左侧尺寸文本上下对齐（同高 28px / 居中） */
-.statusbar__refresh {
+.canvas-bar__iconbtn {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  width: 24px;
+  height: 24px;
   padding: 0;
   background: transparent;
   color: var(--text-faint);
   border: none;
-  border-radius: 6px;
+  border-radius: 5px;
   cursor: pointer;
-  transition: background 0.15s, color 0.15s, transform 0.05s;
+  transition: background 0.15s, color 0.15s;
 }
-.statusbar__refresh:hover:not(:disabled) {
+.canvas-bar__iconbtn:hover:not(:disabled) {
+  background: var(--bg-hover);
   color: var(--accent);
 }
-.statusbar__refresh:active:not(:disabled) {
-  transform: translateY(1px);
-}
-.statusbar__refresh:disabled {
+.canvas-bar__iconbtn:disabled {
   opacity: 0.4;
   cursor: default;
 }
-.device-bar__label {
-  color: var(--text-faint);
-  font-size: 12px;
-  white-space: nowrap;
+/* 刷新中图标自转：把「点了没反应」的空白等待变成可见反馈 */
+.canvas-bar__iconbtn.is-loading svg {
+  animation: canvas-bar-spin 0.8s linear infinite;
 }
-/* 预览区底部状态条：与顶部 device-bar 同款风格，固定于画布底部展示画布宽高 */
-.preview-statusbar {
-  flex: 0 0 auto;
-  width: 100%;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 0 12px;
-  background: var(--bg-bar);
-  border-top: 1px solid var(--border);
+@keyframes canvas-bar-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* 窄列（预览列 < 300px，含 188 预设）：收起尺寸读数与 chip 文案只留图标，保证单行不挤 */
+.canvas-bar--tight .canvas-bar__size,
+.canvas-bar--tight .canvas-bar__txt {
+  display: none;
 }
 /* 预览区底部状态条：本地开发服务连接状态（连接图标 + 状态文案）。
    配色复用顶栏「连接」按钮的语义色类（app__btn--connected / --reconnecting / --disconnected / --warn），
@@ -1062,6 +1142,16 @@ body {
 .statusbar .app__btn--reconnecting { color: var(--warn); }
 .statusbar .app__btn--disconnected { color: var(--danger); }
 .statusbar .app__btn--warn { color: var(--warn); }
+/* 连接指示器现为可点按钮（开合底部「服务日志」面板）：保持状态栏读数观感
+   （无边框 / 无圆角 / 语义色由 app__btn--* 提供，语义色即连接态，不设选中态），
+   hover 仅加极淡底色提示可点。 */
+button.statusbar__conn {
+  cursor: pointer;
+  font: inherit;
+}
+.statusbar__conn:hover {
+  background: var(--bg-hover);
+}
 
 /* 颜色选择器（@ckpack/vue-color Sketch）预设区顶部分隔线：与系统边框色保持一致，
    覆盖组件默认的 1px solid #eee（深色主题下刺眼）。组件样式为全局注入且非 scoped，
@@ -1902,7 +1992,7 @@ body {
   color: var(--warn);
 }
 
-/* 底部面板（事件面板 / 绑定错误面板）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
+/* 底部面板（事件 / 变量绑定）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
    三者共用面板高度，由头部拖拽调整（无专门拖拽节点，与预览区宽度调节同一机制），约束 [120px, 60vh]。 */
 .errpanel {
   flex: 0 0 auto;
@@ -2052,6 +2142,78 @@ body {
 .errpanel__body .empty-state__hint {
   max-width: 460px;
 }
+
+/* ——— 服务日志面板（底部第四面板）：本地服务 cardbuddy 终端输出的实时镜像 ———
+   服务端按行镜像 stdout/stderr 并保留原始 ANSI，前端 preview/ansi.js 转成内联 style，
+   因此这里固定深色终端底 + 等宽字体：chalk 的等级色取自深色设计令牌，浅色主题下同样可读。
+   仅在有日志时切深底（见 .errpanel__body--term 绑定），空态仍走主题底色。 */
+.errpanel__body--term {
+  padding: 0;
+  background: #14161c;
+  color: #e8eaf0;
+}
+.svclog {
+  padding: 6px 0 10px;
+  font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+  font-size: 11.5px;
+  line-height: 1.55;
+}
+.svclog__line {
+  display: flex;
+  min-height: 1.55em;
+  padding: 0 12px;
+  /* 长行折行而非横向滚动：底部面板高度有限，横向滚动会同时吃掉两向空间 */
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-left: 2px solid transparent;
+}
+.svclog__line:hover {
+  background: rgba(255, 255, 255, 0.045);
+}
+/* 级别只作左侧色条 + 极淡底：ANSI 本身已带终端配色，不叠加二次着色以免打架 */
+.svclog__line--ok {
+  border-left-color: rgba(52, 211, 153, 0.55);
+}
+.svclog__line--warn {
+  border-left-color: var(--warn);
+  background: rgba(251, 191, 36, 0.07);
+}
+.svclog__line--error {
+  border-left-color: var(--danger);
+  background: rgba(248, 113, 113, 0.08);
+}
+.svclog__text {
+  min-width: 0;
+}
+/* 头部读数：行数 + 实时态小圆点，落在标题之后（与事件面板 tab 同一位置语言） */
+.svclog__meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 8px;
+  color: var(--text-faint);
+  font-size: 11px;
+  white-space: nowrap;
+}
+.svclog__dot {
+  width: 6px;
+  height: 6px;
+  margin-left: 4px;
+  border-radius: 50%;
+  background: var(--text-faint);
+}
+.svclog__dot.is-live {
+  background: var(--ok);
+  box-shadow: 0 0 0 2px var(--ok-soft);
+}
+/* 跟随最新输出按钮：开启态 accent，暂停态弱化（与其它头部图标按钮同一规格） */
+.svclog__follow.is-on {
+  color: var(--accent);
+}
+/* 复制完成瞬时反馈：与「已复制」语义一致的成功绿 */
+.errpanel__iconbtn.is-done {
+  color: var(--ok);
+}
 /* 事件面板日志：控制台风格高密度行 = 时间 | 等级 | 内容，发丝线分隔 */
 .debug__list--log {
   display: flex;
@@ -2930,11 +3092,45 @@ body {
 .confirm-modal__btn--warn:hover {
   background: var(--warn-hover);
 }
-.confirm-fade-enter-active,
-.confirm-fade-leave-active {
-  transition: opacity 0.15s ease;
+/* ===== 轻量浮层（帮助 / 快捷键弹层）统一进出场 =====
+   淡入 + 轻弹性缩放（过冲回稳），缩放原点由各浮层按锚定方位自定（transform-origin）；
+   离场快速收回、不回弹。 */
+.pop-enter-active {
+  transition: opacity 0.15s ease, transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
-.confirm-fade-enter-from,
-.confirm-fade-leave-to {
+.pop-leave-active {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.pop-enter-from,
+.pop-leave-to {
   opacity: 0;
+  transform: translateY(6px) scale(0.95);
+}
+/* ===== 带遮罩模态的统一进出场动画 =====
+   适用：确认框 / 卡片网格预览 / 远端预览二维码 / 登录凭据 / 组件选择 / 节点属性等居中模态。
+   遮罩仅淡入/淡出；弹卡片（.modal-card）微抬 + 缩放入场、原路离场。
+   右侧抽屉（ee-drawer）保留自己的右滑语言，不复用本组。 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-leave-active {
+  transition: opacity 0.16s ease;
+}
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+/* 入场带一点弹性：back-out 过冲曲线让弹卡片微 overshoot 后回稳；离场干脆不回弹 */
+.modal-enter-active .modal-card {
+  transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.modal-leave-active .modal-card {
+  transition: transform 0.16s ease;
+}
+.modal-enter-from .modal-card {
+  transform: translateY(14px) scale(0.94);
+}
+.modal-leave-to .modal-card {
+  transform: translateY(6px) scale(0.98);
 }

package/dist/vendored/styles/card-gallery.css

@@ -244,12 +244,4 @@
   font-size: 13px;
 }
 
-/* ============ 过渡 ============ */
-.cg-fade-enter-active,
-.cg-fade-leave-active {
-  transition: opacity 0.16s ease;
-}
-.cg-fade-enter,
-.cg-fade-leave-to {
-  opacity: 0;
-}
+/* 过渡：统一使用 app.css 的 .modal-* 进出场动画（遮罩淡入淡出 + 弹卡片抬升缩放） */

package/dist/vendored/styles/card-select.css

@@ -194,21 +194,6 @@
   background: var(--accent-soft);
 }
 
-/* 下拉列表滚动条（WebKit） */
-.csel__list::-webkit-scrollbar {
-  width: 8px;
-}
-.csel__list::-webkit-scrollbar-thumb {
-  background: var(--scroll-thumb);
-  border-radius: 4px;
-}
-.csel__list::-webkit-scrollbar-thumb:hover {
-  background: var(--scroll-thumb-hover);
-}
-.csel__list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 /* 弹出动画 */
 .csel-fade-enter-active,
 .csel-fade-leave-active {

package/dist/vendored/styles/dropdown.css

@@ -261,21 +261,6 @@
   cursor: default;
 }
 
-/* 滚动条 */
-.dd__list::-webkit-scrollbar {
-  width: 8px;
-}
-.dd__list::-webkit-scrollbar-thumb {
-  background: var(--scroll-thumb);
-  border-radius: 4px;
-}
-.dd__list::-webkit-scrollbar-thumb:hover {
-  background: var(--scroll-thumb-hover);
-}
-.dd__list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
 /* 弹出动画 */
 .dd-fade-enter-active,
 .dd-fade-leave-active {

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

@@ -38,7 +38,7 @@
 }
 .jt__list--root {
   padding-left: 2px;
-  padding-bottom: 44px;
+  padding-bottom: 52px;
 }
 .jt__child {
   padding-left: 16px;

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 {
@@ -648,15 +649,12 @@ select.ni-input {
 
 .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%);
 }
 
@@ -958,6 +972,8 @@ select.ee-input { height: 32px; }
   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);

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

@@ -144,6 +144,8 @@
   left: 10px;
   bottom: 36px;
   width: 300px;
+  /* 弹层锚定左下帮助按钮：弹性缩放自该角生长 */
+  transform-origin: bottom left;
   background: var(--bg-panel);
   border: 1px solid var(--border-strong);
   border-radius: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cardbuddy",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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": {