cardbuddy 0.6.0

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

@@ -0,0 +1,234 @@
+/* 卡片网格预览弹窗（顶栏「网格预览」图标按钮触发）。
+   顶栏按钮复用 .app__btn.app__btn--icon（与刷新/连接同款尺寸 --ctrl-sm=28px）；
+   弹窗与网格统一使用主题 token（--bg-input / --border / --accent 等），深浅主题自动适配。 */
+
+/* ============ 弹窗遮罩与容器 ============ */
+.cg-mask {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-appmodal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(0, 0, 0, 0.5);
+  /* 独立显示区背景用暗色半透明，不随编辑器主题翻转（预览即真实卡片内容） */
+}
+.cg-modal {
+  display: flex;
+  flex-direction: column;
+  width: min(960px, 100%);
+  height: 84vh;
+  max-height: 84vh;
+  background: var(--bg-panel, #fff);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
+}
+
+/* ============ 弹窗头部 ============ */
+.cg-modal__head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+.cg-modal__title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+}
+.cg-modal__count {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-faint);
+}
+.cg-modal__search {
+  position: relative;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.cg-modal__search-icon {
+  position: absolute;
+  left: 10px;
+  color: var(--text-faint);
+  pointer-events: none;
+}
+.cg-modal__input {
+  width: 100%;
+  height: var(--ctrl-md);
+  padding: 0 10px 0 30px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.cg-modal__input:focus {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+.cg-modal__close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ctrl-md);
+  height: var(--ctrl-md);
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.cg-modal__close:hover {
+  background: var(--bg-hover);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+/* 排序切换按钮：与搜索框同高，激活态高亮（对齐 csel-combo 的「按修改时间排序」） */
+.cg-modal__sort {
+  flex: 0 0 auto;
+  height: var(--ctrl-md);
+  padding: 0 10px;
+  background: var(--bg-input);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.cg-modal__sort:hover {
+  background: var(--bg-hover);
+  border-color: var(--border-strong);
+}
+.cg-modal__sort--active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent-border);
+}
+
+/* ============ 网格 ============ */
+.cg-grid {
+  flex: 1 1 auto;
+  /* 关键：flex 子项默认 min-height:auto 会被内容撑高、导致 overflow:hidden 裁切而非滚动。
+     设 0 后网格在弹窗内获得有界高度，overflow-y:auto 才会真正出现滚动条。 */
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  grid-auto-rows: max-content;
+  gap: 14px;
+  align-content: start;
+}
+
+/* ============ 卡片格子 ============ */
+.cg-tile {
+  display: flex;
+  flex-direction: column;
+  height: 220px;
+  padding: 0;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, transform 0.08s, box-shadow 0.15s;
+}
+.cg-tile:hover {
+  border-color: var(--accent-border);
+  background: var(--bg-hover);
+  transform: translateY(-2px);
+}
+.cg-tile--active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+.cg-tile__thumb {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 卡片根截图本身为白底，固定白底框避免透明/深色主题下错位 */
+  background: #fff;
+  border-bottom: 1px solid var(--border);
+}
+.cg-tile__img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+}
+.cg-tile__skeleton,
+.cg-tile__fallback {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+.cg-tile__fallback .app__icon {
+  width: 28px;
+  height: 28px;
+  opacity: 0.7;
+}
+.cg-tile__meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+}
+.cg-tile__name {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cg-tile__id {
+  font-size: 11px;
+  color: var(--text-faint);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cg-empty {
+  grid-column: 1 / -1;
+  padding: 48px 0;
+  text-align: center;
+  color: var(--text-faint);
+  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;
+}

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

@@ -0,0 +1,281 @@
+/* 自定义卡片下拉框 —— Codex / WorkBuddy 暗色风格 */
+.csel {
+  position: relative;
+  /* 不再写死 380px：折叠态按所选卡片名自适应（带最小/最大带宽，
+     避免过窄成 stub 或过长撑爆顶栏）；展开态弹出层再用
+     min-width:100% + width:max-content 按列表真实内容撑开 */
+  flex: 0 1 auto;
+  width: auto;
+  min-width: 240px;
+  max-width: 360px;
+}
+.csel__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+  padding: 7px 10px 7px 12px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+.csel__trigger:hover {
+  border-color: var(--border-strong);
+  background: var(--bg-hover);
+}
+.csel__trigger--active {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+  background: var(--bg-hover);
+}
+.csel__current {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.csel__id {
+  font-weight: 600;
+  color: var(--text);
+}
+.csel__name {
+  color: var(--text-dim);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.csel__chev {
+  flex: 0 0 auto;
+  color: var(--text-dim);
+  transition: transform 0.18s ease;
+}
+.csel--open .csel__chev {
+  transform: rotate(180deg);
+}
+.csel__pop {
+  position: absolute;
+  /* 须高于手机预览内的节点选中遮罩 .ce-sel-overlay（--z-overlay-low），否则卡片选择下拉会被遮罩盖住 */
+  z-index: var(--z-pop);
+  top: calc(100% + 6px);
+  left: 0;
+  right: auto;          /* 去掉 right:0，允许弹出层超出折叠态宽度 */
+  min-width: 100%;      /* 至少与折叠态等宽 */
+  width: max-content;   /* 按列表实际内容（最长卡片名）撑开 */
+  max-width: min(480px, 92vw);  /* 极端长名时截断，避免溢出视口 */
+  background: var(--bg-pop);
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+}
+.csel__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+}
+.csel__search-icon {
+  color: var(--text-faint);
+  flex: 0 0 auto;
+}
+.csel__input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--text);
+  font-size: 13px;
+}
+.csel__input::placeholder {
+  color: var(--text-faint);
+}
+.csel__list {
+  list-style: none;
+  margin: 0;
+  padding: 4px;
+  max-height: 320px;
+  overflow-y: auto;
+}
+.csel__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 10px;
+  border-radius: 7px;
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 13px;
+}
+.csel__item--active {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.csel__item--selected .csel__item-id {
+  color: var(--accent);
+}
+.csel__item-id {
+  font-weight: 600;
+  color: var(--text);
+  flex: 0 0 auto;
+}
+.csel__item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.csel__check {
+  color: var(--accent);
+  flex: 0 0 auto;
+}
+.csel__empty {
+  padding: 14px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 13px;
+}
+.csel__foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 10px;
+  border-top: 1px solid var(--border);
+}
+.csel__count {
+  color: var(--text-faint);
+  font-size: 11px;
+  white-space: nowrap;
+}
+/* 底部「按修改时间排序」开关：小按钮，激活态高亮 accent */
+.csel__sort {
+  flex: 0 0 auto;
+  padding: 3px 8px;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.csel__sort:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+.csel__sort--active {
+  color: var(--accent);
+  border-color: var(--accent-border);
+  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 {
+  transition: opacity 0.14s ease, transform 0.14s ease;
+}
+.csel-fade-enter,
+.csel-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* 卡片选择 + 打开文件夹 分段组合控件：
+   共用一个外框 / 底色，中间一道分隔线，打开态高亮整框而非仅触发器段。 */
+.csel-combo {
+  display: inline-flex;
+  align-items: stretch;
+  flex: 0 1 auto;
+  min-width: 240px;
+  max-width: 360px;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
+}
+.csel-combo:hover {
+  border-color: var(--border-strong);
+}
+/* 打开态：高亮整框（而非 trigger 段内描边），与下拉弹出联动 */
+.csel-combo:has(.csel--open) {
+  border-color: var(--accent-border);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+}
+/* 触发器段在组合内不再单独带框 / 底色 / 圆角，宽度撑满剩余空间 */
+.csel--combo {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  background: transparent;
+}
+.csel--combo .csel__trigger {
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+.csel--combo .csel__trigger:hover {
+  background: var(--bg-hover);
+}
+/* 触发器段激活（下拉展开）时去掉自身描边/光环，避免与外框双重高亮 */
+.csel--combo .csel__trigger--active {
+  border-color: transparent;
+  box-shadow: none;
+  background: var(--bg-hover);
+}
+/* 文件夹图标段：去框、左侧分隔线、仅图标 + 鼠标效果 */
+.csel-combo__btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-left: 1px solid var(--border);
+  border-radius: 0;
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+.csel-combo__btn:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+.csel-combo__btn:active:not(:disabled) {
+  background: var(--bg-active);
+}
+.csel-combo__btn:disabled {
+  opacity: 0.4;
+  cursor: default;
+}