cardbuddy 0.8.0 → 0.9.0

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;
@@ -1026,7 +1053,9 @@ body {
   font-size: 12px;
   white-space: nowrap;
 }
-/* 预览区底部状态条：与顶部 device-bar 同款风格，固定于画布底部展示画布宽高 */
+/* 预览区底部状态条：画布尺寸读数 + 刷新按钮。
+   底色透明（融入手机框 --bg-stage），不再作为独立暗面板——消除其与全局 .statusbar
+   （bg-bar）因所处父容器底色不同而产生的“颜色细微差异”观感；仅保留 1px 分隔线作页脚边界。 */
 .preview-statusbar {
   flex: 0 0 auto;
   width: 100%;
@@ -1035,7 +1064,7 @@ body {
   align-items: center;
   gap: 12px;
   padding: 0 12px;
-  background: var(--bg-bar);
+  background: transparent;
   border-top: 1px solid var(--border);
 }
 /* 预览区底部状态条：本地开发服务连接状态（连接图标 + 状态文案）。
@@ -1062,6 +1091,20 @@ 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 仅加极淡底色提示可点，
+   展开态用 accent 底线标识（与 .statusbar__item--prob.is-open 同一语言，不抢语义色）。 */
+button.statusbar__conn {
+  cursor: pointer;
+  font: inherit;
+}
+.statusbar__conn:hover {
+  background: var(--bg-hover);
+}
+.statusbar__conn.is-open {
+  background: var(--bg-hover);
+  box-shadow: inset 0 -2px 0 0 var(--accent);
+}
 
 /* 颜色选择器（@ckpack/vue-color Sketch）预设区顶部分隔线：与系统边框色保持一致，
    覆盖组件默认的 1px solid #eee（深色主题下刺眼）。组件样式为全局注入且非 scoped，
@@ -1902,7 +1945,7 @@ body {
   color: var(--warn);
 }
 
-/* 底部面板（事件面板 / 绑定错误面板）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
+/* 底部面板（事件 / 变量绑定）：点击状态栏指示器弹出 / 收起。与运行态面板互斥，
    三者共用面板高度，由头部拖拽调整（无专门拖拽节点，与预览区宽度调节同一机制），约束 [120px, 60vh]。 */
 .errpanel {
   flex: 0 0 auto;
@@ -2052,6 +2095,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 +3045,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.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": {