wendang-react 0.0.0-stage → 0.5.6

package/dist/styles/editor-interaction.css

@@ -0,0 +1,621 @@
+/* 编辑态图片：src 由 node view 按 attachmentId 解析而来（正文不存存储地址）。
+   给个最小样式，避免加载中/缺失时排版跳动。 */
+.ywiki-prose img.ywiki-image {
+  max-width: 100%;
+  border-radius: var(--content-media-radius);
+  display: block;
+}
+/**
+ * 图片容器（node view）的**三层结构**：
+ *   frame（块级、占满整行）→ 水平对齐（flex justify-content）
+ *     inner（贴合图片尺寸）→ 选中框 / 四角手柄 / 块选中高亮
+ *       img
+ *
+ * 选中框必须画在 **inner** 上（用户反馈"编辑图片大小时外框没有跟随图片
+ * 大小变化"）：frame 占满整行，蓝框会横跨整行、右边空出一大片，看起来
+ * 像框没跟着图片走。
+ */
+.ywiki-prose .ywiki-image-frame {
+  display: flex;
+  justify-content: center;
+  /* 图注在图片下方：纵向排列，图片仍按 justify-content 水平对齐 */
+  flex-direction: column;
+  align-items: center;
+}
+/* 有图注时，图片与图注各自成行；图片的水平对齐交给内层 */
+.ywiki-prose .ywiki-image-frame.has-caption > .ywiki-image-inner { align-self: center; }
+/* 图注：一行灰色小字，超出省略（完整内容见 title） */
+.ywiki-prose .ywiki-image-caption {
+  max-width: 100%;
+  margin-top: 6px;
+  padding: 0 2px;
+  color: var(--color-text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: text;
+}
+.ywiki-prose .ywiki-image-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px;
+  width: 100%;
+}
+/**
+ * 图片行**整行选中**：给整行加一圈描边。
+ *
+ * 只给每张图铺底色是不够的——图片之间的间隙、行首行尾的留白都没有任何
+ * 选中信号，整行看起来和未选中几乎一样（用户实测反馈："一行全选中也要有
+ * 选中效果"）。
+ *
+ * 不能用普通块的 `::before` 蓝带：图片行是 flex 容器，绝对定位的伪元素
+ * 会参与 flex 布局计算，外扩的 6px 也容易被行高吃掉。改为与其它自带外观
+ * 的块一致的实色描边；圆角取 6px，与表格的选中框对齐。
+ */
+.ywiki-prose .ywiki-image-gallery.is-block-selected {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+/**
+ * 单张图片（独立图片块）被**整块选中**：给图片本身加一圈描边。
+ *
+ * 图片块没有自带外观，走的是"普通块铺蓝带"分支，结果只有一条半透明底色
+ * 与图片上的淡色覆盖，**没有边框**——与表格、高亮块、文件卡片的选中观感
+ * 不一致（用户实测反馈："只有一张图的选中没有边框"）。
+ *
+ * 只作用于独立图片（图片行内的子图不带 `is-block-selected`，整行选中时
+ * 描边画在行容器上），因此不会与图片行的整行框重叠。
+ */
+.ywiki-prose .ywiki-image-frame.is-block-selected .ywiki-image-inner {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame.is-in-gallery .ywiki-image-inner {
+  /* 图片行里不显示四角缩放手柄（等高排布，单图改宽会破坏对齐）。 */
+  cursor: default;
+}
+.ywiki-prose .ywiki-image-gallery {
+  position: relative;
+}
+/* 图片行内的框选矩形（挂在 portal 上，视口坐标定位） */
+.ywiki-gallery-marquee {
+  position: fixed;
+  z-index: 69;
+  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  border-radius: 2px;
+  pointer-events: none;
+}
+/**
+ * 图片上的选中覆盖层：**只有一个 `::after`，强度固定 16%**。
+ *
+ * ## 为什么必须合并到一个选择器（用户实测："为什么还有蓝色区域"）
+ *
+ * 这里曾经有两处独立规则写同一个 `::after`：
+ *  - 框选命中（`.is-multi-picked`）16%；
+ *  - 整块选中（`.ywiki-image-frame.is-block-selected`）18%。
+ *
+ * 两者可以同时命中（框选后松手会转成块选区），于是同一个伪元素被两条规则
+ * 分别赋值——后者胜出，颜色却与整页带（16%）不一致，图上出现一块更深的矩形。
+ * 更早还叠过一层 frame 的 16% 背景，合计接近 50%。
+ *
+ * 现在统一为一条规则、一个强度：图片区域与非图片区域的选中底色完全相同。
+ *
+ * `outline` 仍按状态区分（框选中是实线、块选中不描边）——那表达的是"这是
+ * 框选出来的"与"这块在选区里"的差别，不影响底色。
+ */
+.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner,
+.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner,
+.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner {
+  /**
+   * 圆角与表格/其他块的选中描边统一为 6px（用户反馈："图片选中的圆角
+   * 和表格选中的差不多，现在有点不一致"）。早先是 3px/4px，混在一起时
+   * 图片的框明显更方。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+.ywiki-prose .is-block-selected .ywiki-image-inner::after,
+.ywiki-prose .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after,
+.ywiki-prose .ywiki-image-frame.is-block-selected-image .ywiki-image-inner::after,
+.wendang-portal .ywiki-image-frame.is-multi-picked .ywiki-image-inner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--content-media-radius, 4px);
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  pointer-events: none;
+}
+/**
+ * 跨图片拖拽：**落点提示**。
+ *
+ * ## 从"虚线框"改为"柔和的整体高亮"（用户反馈：虚线框看起来比较生硬）
+ *
+ * 原先落在目标图上画 2px dashed outline。虚线在照片这类复杂底图上会碎成
+ * 一段段，而且"框住整张图"的观感太抢眼——它表达的是"我要插到这里"，不是
+ * "这张图被选中了"，用户的原话是"看怎么处理更好看点"。
+ *
+ * 现在改成两层柔和的信号：
+ *  1. 图片本身叠一层淡强调色（和块选中同一套语言，`::after` 已存在，复用）；
+ *  2. 外加一圈 2px 实线 + 3px 留白的描边，颜色是强调色但带透明度。
+ *
+ * 不用虚线、不用发光：拖拽是高频操作，提示需要"看得见但不吵"。
+ */
+.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner {
+  outline: 2px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
+  outline-offset: 3px;
+  border-radius: var(--content-media-radius, 6px);
+}
+/* 落点图上再叠一层淡色，明确"松手就并到这里" */
+.ywiki-prose .ywiki-image-frame.is-image-drop-target .ywiki-image-inner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--content-media-radius, 6px);
+  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
+  pointer-events: none;
+}
+
+/**
+ * 插入指示线：一条**细长的圆头光带**，插在将要落入的位置。
+ *
+ * 几何与颜色都由脚本内联（挂在 portal / body 上取不到主题变量），这里只给
+ * 形状与层级。圆头 + 柔和外发光让它看起来像"一根发光的针"，比纯色方块轻。
+ */
+.ywiki-image-drop-line,
+.ywiki-gallery-drop-line {
+  position: fixed;
+  border-radius: 999px;
+  pointer-events: none;
+  /* 必须高于图片行内容，否则会被图片盖住、看起来"拖拽没有反馈" */
+  z-index: 70;
+}
+.ywiki-image-drop-line { z-index: 60; }
+/**
+ * 指示线两端的小圆点：把"针"的两端收圆，视觉上更像刻度而不是一条色块。
+ * 用伪元素而不是额外 DOM，避免拖拽期间频繁创建节点。
+ */
+.ywiki-image-drop-line::before,
+.ywiki-image-drop-line::after,
+.ywiki-gallery-drop-line::before,
+.ywiki-gallery-drop-line::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  margin-left: -3.5px;
+  border-radius: 50%;
+  background: inherit;
+}
+.ywiki-image-drop-line::before,
+.ywiki-gallery-drop-line::before { top: -3px; }
+.ywiki-image-drop-line::after,
+.ywiki-gallery-drop-line::after { bottom: -3px; }
+.wendang-portal .ywiki-gallery-drop-line,
+.wendang-portal .ywiki-image-drop-line { position: fixed; }
+.ywiki-prose .ywiki-image-frame.is-gallery-dragging {
+  opacity: 0.55;
+}
+/**
+ * 图片行（飞书口径）：**按比例铺满整行**，高度由比例自然产生。
+ *
+ * 为什么不用固定行高：固定行高在图片少时右侧留一大片空白（实测两图并排只占
+ * 一半宽度）。飞书改成「各列按 比例/比例和 分宽度」——列宽加起来正好铺满，
+ * 高度 = 可用宽 / 比例和，因此同行几乎等高且无空白。
+ *
+ * `--ywiki-image-ratio` 由 node view 按原图宽高比写入，`flex-basis` 用比例
+ * 作为权重，`flex-grow` 让它们把剩余空间按权重分掉。
+ */
+.ywiki-prose .ywiki-image-gallery {
+  /* 12px 间距与飞书的 column-gap 实测一致 */
+  gap: 12px;
+  align-items: flex-start;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
+  flex: 1 1 0;
+  /* 基础宽度置零，完全由 flex-grow 按比例分配，避免比例小的图先占位 */
+  min-width: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  justify-content: flex-start;
+}
+/* 分配权重 = 原始比例 × 用户拖角设定的相对缩放（`--ywiki-image-weight`） */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame {
+  flex-grow: calc(var(--ywiki-image-ratio, 1) * var(--ywiki-image-weight, 1));
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame .ywiki-image-inner {
+  width: 100%;
+  max-width: none;
+}
+/**
+ * 图库内图片高度由比例与列宽共同决定：
+ * `width:100%` + `aspect-ratio` 让高度自动算出来，不用固定行高。
+ * 没有 aspect-ratio（历史图片）时退回 4:3，等补算比例后再自动校正。
+ */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image {
+  width: 100%;
+  height: auto;
+  max-width: none;
+  aspect-ratio: var(--ywiki-image-ratio, 1.3333);
+  object-fit: contain;
+  border-radius: var(--content-media-radius);
+}
+/**
+ * 图片**加载中**：渐变沿边框流动的指示（与阅读端同一口径）。
+ *
+ * 不再用"整块灰底 + 微光"——静态灰块在浅色页面上看不出在加载，更像"图丢了"。
+ * 现在是一条沿圆角绕圈的渐变，像贪吃蛇一样顺着边框跑，图片区域本身保持透明。
+ *
+ * 实现同阅读端：conic-gradient + `mask-composite: exclude` 挖空中间，只留 2px
+ * 边框；旋转靠 `@property` 注册的角度变量插值（定义在 content-style.css，
+ * 该文件也被编辑器引入）。加载完成后 `data-image-loading` 移除，遮罩随之消失。
+ */
+.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
+  box-sizing: border-box;
+  padding: 3px;
+  border-radius: var(--content-media-radius);
+  background-image: conic-gradient(
+    from var(--ywiki-image-flow-angle),
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 0turn 55%,
+    color-mix(in srgb, var(--color-accent) 55%, transparent) 78%,
+    var(--color-accent) 92%,
+    color-mix(in srgb, var(--color-accent) 14%, var(--color-surface-subtle)) 100%
+  );
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-clip: content-box, border-box;
+  -webkit-mask-composite: xor;
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-clip: content-box, border-box;
+  mask-composite: exclude;
+  animation: ywiki-image-flow 1.4s linear infinite;
+  /* 独立图片没有 aspect-ratio 撑高，需要最小高度才看得见框 */
+  min-height: 120px;
+}
+/* 图片行内的高度由 aspect-ratio 与列宽决定，不叠加最小高度（否则整行被撑高） */
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-loading] {
+  min-height: 0;
+}
+/**
+ * 加载失败：淡底 + 细实线边框，**不流动**。
+ *
+ * "在转 = 还在取 / 静止 = 取不到"，靠动效区分，不需要图标或文字。
+ * 不用虚线：缩略图尺寸下虚线会碎成一段段，看起来像边框画错了。
+ */
+.ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-error] {
+  box-sizing: border-box;
+  min-height: 72px;
+  background-color: color-mix(in srgb, var(--color-surface-subtle) 70%, var(--color-border));
+  border-radius: var(--content-media-radius);
+  outline: 1px solid color-mix(in srgb, var(--color-border-strong) 55%, transparent);
+  outline-offset: -1px;
+}
+.ywiki-prose .ywiki-image-gallery > .ywiki-image-frame img.ywiki-image[data-image-error] {
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ywiki-prose .ywiki-image-frame img.ywiki-image[data-image-loading] {
+    animation: none;
+  }
+}
+
+/* 显式缩放过（data-sized）的图默认靠左：缩放锚点在左缘，拖动位置稳定 */
+.ywiki-prose .ywiki-image-frame[data-sized] {
+  justify-content: flex-start;
+}
+/* 显式对齐（图片工具条的左/中/右）优先于上面的默认规则 */
+.ywiki-prose .ywiki-image-frame[data-align='left'] { justify-content: flex-start; }
+.ywiki-prose .ywiki-image-frame[data-align='center'] { justify-content: center; }
+.ywiki-prose .ywiki-image-frame[data-align='right'] { justify-content: flex-end; }
+
+/* inner 贴合图片：选中框/手柄相对它定位，才随图片尺寸变化 */
+.ywiki-prose .ywiki-image-inner {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+/* 缩放期间禁止选中文本：跟手拖动时若触发文字选区会打断手感 */
+.ywiki-prose .ywiki-image-frame.is-resizing {
+  user-select: none;
+}
+
+/**
+ * 选中态（对齐飞书截图）：蓝框 + 四角圆点手柄，拖动等比缩放。
+ * 手柄只在"用户点过这张图"时显示（见 `.img-pick-active` 门控说明），
+ * 未选中时 display:none，既不拦截点击也不产生视觉噪声。
+ */
+/**
+ * 四角手柄的尺寸与观感对齐飞书（实测飞书是 20×20 的命中区）。
+ *
+ * 早前是 10px 的小圆点：在 380px 宽的缩略图上几乎看不见，用户反馈
+ * "选中了但看不清是不是选中了"（实测飞书明显更醒目）。这里放大到 14px
+ * 的实心圆 + 2px 蓝描边 + 白色打底，并给整块加一圈白色外发光，
+ * 保证在深色/蓝色图片上也能分辨。
+ */
+.ywiki-prose .ywiki-image-handle {
+  display: none;
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 2px solid var(--color-accent);
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
+  z-index: 3;
+}
+/*
+ * 选中外观需**同时**满足：node view 处于选中态，且用户点过这张图
+ * （`.img-pick-active`）。只看前者会被 PM 的默认选区骗到——文档以图片
+ * 开头时一打开页面就是 NodeSelection，不门控就会出现"没点过却带蓝框"。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-inner {
+  /**
+   * 双层描边：内层蓝色实线 + 外层白色细线。
+   *
+   * 单用蓝色在蓝底图片上几乎看不出边界（用户反馈"看不清有没有选中"）；
+   * 白色隔离带让边框在任何底图上都有对比，与飞书的观感一致。
+   *
+   * 圆角与表格/其它块的选中框统一为 6px（用户反馈"图片选中的圆角和表格
+   * 选中的差不多，现在有点不一致"）：早先这里是 4px，图片行的框是 3px，
+   * 与表格的 6px 摆在一起时能明显看出差别。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+  border-radius: 6px;
+  box-shadow: 0 0 0 5px #fff, 0 0 0 6px color-mix(in srgb, var(--color-accent) 28%, transparent);
+}
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected .ywiki-image-handle {
+  display: block;
+}
+/*
+ * 图片行内**显示**四角手柄（对齐飞书）：拖角调整该图的相对权重，
+ * 整行按新权重重算，因此仍然铺满、仍然等高。
+ * 唯一的例外是「整行处于块选区」时——那时拖动语义是移动整行，
+ * 由行内重排逻辑让位给整块拖拽（见 image-nodeview 的 mousedown 判定）。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-handle {
+  display: block;
+}
+/* 图片行内仍画选中蓝框，但只包住被选中的那一张（inner 贴合图片） */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected.is-in-gallery .ywiki-image-inner {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 3px;
+  /* 与其它块/图片的选中框同一圆角 */
+  border-radius: 6px;
+}
+/* 四个角：手柄中心骑在蓝框上（outline-offset 3px + 手柄半宽 7px = -10px） */
+.ywiki-prose .ywiki-image-handle.handle-nw { left: -10px; top: -10px; cursor: nwse-resize; }
+.ywiki-prose .ywiki-image-handle.handle-ne { right: -10px; top: -10px; cursor: nesw-resize; }
+.ywiki-prose .ywiki-image-handle.handle-sw { left: -10px; bottom: -10px; cursor: nesw-resize; }
+.ywiki-prose .ywiki-image-handle.handle-se { right: -10px; bottom: -10px; cursor: nwse-resize; }
+
+/**
+ * 已选中的图片：放大镜光标（点击再次 = 打开大图预览）。
+ * 拖拽缩放期间必须让位给缩放光标——否则指针拖离手柄、落在图片上时
+ * 会突然变成放大镜（用户实测反馈）。
+ */
+.editor-shell.img-pick-active .ywiki-prose .ywiki-image-frame.is-selected:not(.is-resizing) img.ywiki-image {
+  cursor: zoom-in;
+}
+.ywiki-prose img.ywiki-image[data-image-missing] {
+  min-width: 120px;
+  min-height: 40px;
+  border: 1px dashed var(--color-border-strong);
+  background: var(--color-surface-subtle);
+}
+
+/**
+ * 块级选中：普通块铺蓝底，**自带视觉身份的块只加外圈**。
+ *
+ * ## 两种画法，按块是否有自己的「脸」来分
+ *
+ * 飞书的做法（用户提供了对照截图）是一套区分得很清楚的规则：
+ *
+ *  - **普通块**（段落、标题、列表、引用、图片…）——本来没有底色，选中时铺一条
+ *    半透明蓝带，一眼能看出"这一段被选中了"；
+ *  - **自带视觉身份的块**（高亮块、表格、代码块）——它们本来就有底色或边框，
+ *    再往里铺一层蓝会把内容染色、把表格单元格弄脏。这些块只在**外围加一圈
+ *    描边**，表达"这块在选区里"，内容配色完全不动。
+ *
+ * 早先我一度把两类统一成蓝底，结果表格单元格被整片染蓝、高亮块的黄绿底色
+ * 也被改掉——用户明确纠正："像这类（高亮、表格等等）都可以有个外圈，不用蓝色
+ * 背景"。
+ *
+ * ## 宽度只到正文列，不能铺到整页
+ *
+ * 曾经把带子向两侧溢出到"页面横带"边缘，那是把**可起手区域**和**高亮宽度**
+ * 混为一谈了：起手区可以宽（用户在页面空白处按下就能拖选），但高亮必须只覆盖
+ * 正文，否则左侧目录、右侧大纲栏也被染蓝（用户原话："我内容区域在红框区域，
+ * 为啥选中后有个这么宽的蓝色背景？不合理啊！"）。
+ *
+ * ## 为什么普通块用伪元素而不是直接改 `background`
+ *
+ * 直接改背景会与块自身可能存在的底色冲突；伪元素能叠一层半透明，原底色仍透出。
+ * 不能用 `z-index: -1`：那会让底色跑到祖先背景之后（`.tiptap` 是
+ * `position: relative`），一旦宿主给正文加了底色，高亮就整块消失。
+ */
+.ywiki-prose .is-block-selected {
+  position: relative;
+  border-radius: 6px;
+}
+
+/**
+ * 普通块：铺半透明蓝带。
+ *
+ * 排除自带视觉身份的块（见下方外圈分支）——这是两类画法的唯一分界。
+ * 用 `[data-block-chrome]` 声明式判断，而不是硬枚举类名：新增块时只在自己的
+ * 渲染代码里加属性即可，不必回来改这里（思维导图就曾因为漏改而错误地变成蓝底）。
+ */
+.ywiki-prose .is-block-selected:not([data-block-chrome]):not(.doc-callout):not(.tableWrapper):not(.code-block-wrap):not(.ywiki-image-gallery)::before {
+  content: '';
+  position: absolute;
+  /**
+   * 四周比块本身**外扩**，让选中色不要紧贴文字（用户反馈"文字选中区域
+   * 往外扩一下"）。块盒子就是文字行盒，贴着它画会让文字看起来被框死。
+   *
+   * 纵向外扩量由 `measureBlocksPadding` 按**实测块间距**逐块写入：
+   *  - 相邻两个都选中：各溢出间隙的一半 → 两块拼成连续一条，且不重叠
+   *    （间隙实测 6.86px 到 21px 不等，写死一个值必然要么留白缝要么叠出深线）；
+   *  - 开边一侧（首块上方 / 末块下方）：用 `SELECT_PAD_Y` 给文字留呼吸空间。
+   *
+   * 横向用 `SELECT_PAD_X`：再宽就会溢出正文列（用户此前明确反对底色超出版心）。
+   * 两侧同时外扩，因此带子比正文列宽 2×6px，仍落在阅读区留白内。
+   */
+  top: calc(-1 * var(--block-select-pad-top, 5px));
+  bottom: calc(-1 * var(--block-select-pad-bottom, 5px));
+  left: calc(-1 * var(--block-select-pad-x, 6px));
+  right: calc(-1 * var(--block-select-pad-x, 6px));
+  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
+  /* 6px 圆角：外扩后的矩形边角更明显，需要圆角才不生硬 */
+  border-radius: 6px;
+  pointer-events: none;
+}
+
+/**
+ * 自带视觉身份的块：**只加外圈，不铺蓝底**。
+ *
+ * ## 哪些块算"自带视觉身份"
+ *
+ * 判据是「它本身已经有可见的边框、底色或独立画布」。这类块再往里铺一层蓝，
+ * 会把内容染色或把画布弄脏；只在外围加圈，既表达"在选区里"，又不改内容观感：
+ *
+ *  - 高亮块（浅色底 + 边框）
+ *  - 表格（网格线）
+ *  - 代码块（深色底）
+ *  - 思维导图（独立画布；用户实测："为啥思维导图没有框而是蓝色"）
+ *  - 文件卡片 / 视频嵌入（自带卡片外观）
+ *  - 分栏（多列结构，铺底色会把两栏之间的空隙也染上）
+ *
+ * 其余块（段落、标题、列表、引用、图片…）没有自己的外观，走蓝底分支。
+ *
+ * ## 为什么用 `[data-block-chrome]` 而不是继续堆类名选择器
+ *
+ * 之前是 `:is(.doc-callout, .tableWrapper, .code-block-wrap)` 硬枚举。每新增
+ * 一种块都要改两处（`:not()` 与 `:is()`），漏一处就会退化成"这个块又变蓝了"——
+ * 思维导图就是这么漏掉的。改为让节点自己在根元素上声明 `data-block-chrome`，
+ * 新增块时只在自己的渲染代码里加一个属性，不必再来碰这里。
+ *
+ * `outline` 而不是 `border`：border 会参与盒模型，给一个已经撑满正文列宽度的
+ * 表格加上 2px 边框会让它溢出或挤压内容；outline 不占布局，`outline-offset`
+ * 还能让它落在块的外侧，正好是"外圈"的观感。
+ *
+ * 用 55% 而非更浅的透明度：高亮块是浅蓝底、代码块是深底、表格有网格线，
+ * 太淡的圈在这些底色上都看不清边界。
+ */
+.ywiki-prose :is([data-block-chrome], .doc-callout, .tableWrapper, .code-block-wrap).is-block-selected {
+  /**
+   * 描边圆角跟着**块自己的圆角**走，而不是写死 6px。
+   *
+   * 各块自带外观的圆角并不统一（高亮块 9px、文件卡片 8px、思维导图 12px），
+   * 写死一个值就会出现"框的角比块本身的角更方"的错位观感（用户实测反馈：
+   * "思维导图的选中圆角最好和选中带边框的圆角一致"）。用变量按块类型覆盖，
+   * 默认 6px 与表格一致。
+   */
+  --block-select-radius: 6px;
+  /**
+   * 实色而不是 55% 半透明：高亮块自带浅色底与彩色边框，半透明蓝圈叠在
+   * 这些底色上几乎看不出来（用户反馈"高亮没有被选中、没有边框"）。与图片
+   * 选中的描边用同一个强度，所有块的"被选中"一眼可辨且观感一致。
+   */
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  /* 与铺色分支同一圆角，两种选中画的观感才统一 */
+  border-radius: var(--block-select-radius);
+}
+/* 各块按自身外观的圆角覆盖描边圆角（值取自它们各自的 border-radius） */
+.ywiki-prose .doc-callout.is-block-selected { --block-select-radius: 9px; }
+.ywiki-prose .doc-file-attachment.is-block-selected { --block-select-radius: 8px; }
+.ywiki-prose [data-mind-map-node].is-block-selected { --block-select-radius: 12px; }
+
+/* 块级拖拽期间：屏蔽浏览器原生的字形级选中高亮。
+   块级选择本质上是一个覆盖整块文字的文本选区（复制/删除需要它），
+   但浏览器会为它画字形级蓝底，与"整块底色"叠在一起很乱。
+   这里只影响绘制，不影响选区模型与复制行为。 */
+.ywiki-prose.is-block-selecting ::selection,
+.ywiki-prose.is-block-selecting *::selection {
+  background: transparent;
+  color: inherit;
+}
+
+/**
+ * 拖拽选择框（飞书式的矩形，跟随鼠标）。
+ *
+ * ## 必须**填充**，不能只描边（用户对比飞书截图后指出）
+ *
+ * 此前这里刻意只画边框、不铺底色，理由是"填充会盖住高亮块/表格的颜色"。
+ * 但飞书的拖拽框本身就是一块**半透明蓝色矩形**，用户一眼就能判断"我现在框住
+ * 了哪些内容、范围有多大"；只有边框时，框内的内容看起来和框外没区别，
+ * 拖动过程中几乎无法判断落点，这正是用户反馈的差异。
+ *
+ * 用极低的透明度（12%）解决当初的顾虑：底色仍然透得出来，不会把高亮色
+ * 染成另一种颜色；框的边界由 1px 实线 + 白描边交代清楚。
+ */
+.block-marquee {
+  position: absolute;
+  z-index: 33;
+  pointer-events: none;
+  /**
+   * 宽高由插件按「按下点 → 当前指针」的拖拽矩形写入，边框必须算在尺寸内——
+   * 否则 1px 边框会让框比鼠标实际划出的范围多出 2px（用户实测：左边贴合、
+   * 右边多出一截）。
+   */
+  box-sizing: border-box;
+  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-accent) 65%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-surface) 60%, transparent);
+  border-radius: 2px;
+}
+
+/* ---------------------------------------------------------------- 表格交互样式 */
+/* 这几条此前完全缺失：resizable 生效但没有任何可视反馈，选中态也没有高亮，
+   导致"能拖列宽但看不出在哪拖、选中了格子也不知道"。 */
+/**
+ * 列宽拖拽手柄。
+ *
+ * prosemirror-tables 为**每一行**各插一个 4px 宽的 widget，默认样式是强调色 +
+ * 60% 透明度：鼠标经过列边界时它会在表格上竖着亮起一条分段蓝线，既没有
+ * 拖拽反馈，也不像任何已知控件（用户反馈"表格里这个蓝色是什么？没什么用吧"）。
+ *
+ * 改为两级语义：
+ *  - 悬停边界：中性色细线，连续贯穿整列（`top/bottom: -1px` 补齐行间缝隙），
+ *    配合 `col-resize` 光标表达"这里可以拖"；
+ *  - 真正拖拽中（单元格带 `column-resize-dragging`）：才使用强调色。
+ */
+.ywiki-prose .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: -4px;
+  bottom: -4px;
+  width: 3px;
+  border-radius: 2px;
+  background-color: var(--color-border-strong, #b9c3d2);
+  pointer-events: none;
+}
+.ywiki-prose .column-resize-dragging .column-resize-handle {
+  background-color: var(--color-accent, #2f6feb);
+  box-shadow: 0 0 0 1px var(--color-surface, #fff);
+}
+.ywiki-prose.resize-cursor, .ywiki-prose .resize-cursor { cursor: col-resize; }
+/* 矩形选中的单元格 */
+.ywiki-prose .selectedCell:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
+  pointer-events: none;
+  z-index: 2;
+}
+.ywiki-prose td,
+.ywiki-prose th {
+  position: relative;
+}

package/dist/styles/file-video.css

@@ -0,0 +1,12 @@
+.doc-file-video { margin-top: 8px; }
+.doc-file-video video {
+  width: 100%;
+  max-height: 420px;
+  border-radius: 6px;
+  background: #000;
+}
+.doc-file-video-fallback {
+  margin: 0;
+  font-size: 13px;
+  color: var(--color-text-faint);
+}