@xihan-ui/styles 1.0.0 → 1.1.0

package/index.unlayered.css

@@ -5369,6 +5369,119 @@ input[data-scope='mention'][data-part='input'] {
   visibility: visible;
 }
 
+/* styles/resizable.css */
+/* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+[data-scope='resizable'] {
+  --xh-resizable-skin: 1;
+}
+
+/* 分工：**尺寸与位移**由连接层每帧写进内联样式（inline-size / block-size / left / top）。
+   这份皮肤一条都不碰那四个——内联优先级更高，写了不但是死声明，
+   还会在拖动的每一帧跟连接层抢位置。皮肤只管定位上下文、把手落位与状态表现。 */
+
+/* 定位上下文，八向可调靠它才成立：
+   推西边与北边时容器的起点会动，那段位移写成 left / top。relative 的 left / top
+   是视觉位移、元素仍占原位，因此对边钉得住。改成 static 会让这两个方向只变尺寸不移位。 */
+[data-scope='resizable'][data-part='root'] {
+  position: relative;
+  /* 把层序关在容器里：把手的 1 / 2 只跟彼此比，不跟外面的层号打架 */
+  isolation: isolate;
+  box-sizing: border-box;
+}
+
+/* 调整期间关掉选中：把手一按就会把容器里的文字刷成选中态 */
+[data-scope='resizable'][data-part='root'][data-resizing] {
+  user-select: none;
+}
+
+[data-scope='resizable'][data-part='root'][hidden] {
+  display: none;
+}
+
+/* 把手压在边上，往外挪半个身位，两侧各留出一点可抓的余量——
+   贴着边只有一两个像素能按到。落位按 data-edge 分派。 */
+[data-scope='resizable'][data-part='handle'] {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  touch-action: none;
+}
+
+[data-scope='resizable'][data-part='handle'][hidden] {
+  display: none;
+}
+
+/* 四条边：各占一整条，厚度是可抓的余量 */
+[data-scope='resizable'][data-part='handle'][data-edge='n'],
+[data-scope='resizable'][data-part='handle'][data-edge='s'] {
+  inset-inline: var(--xh-resizable-grip, var(--xh-space-2));
+  block-size: var(--xh-resizable-grip, var(--xh-space-2));
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='e'],
+[data-scope='resizable'][data-part='handle'][data-edge='w'] {
+  inset-block: var(--xh-resizable-grip, var(--xh-space-2));
+  inline-size: var(--xh-resizable-grip, var(--xh-space-2));
+}
+
+/* 落位用逻辑属性：e 说的是行尾侧，从右往左排版时它就该落在屏幕左边——
+   机器那边也是把逻辑边翻成物理边再算几何的，两处同源 */
+[data-scope='resizable'][data-part='handle'][data-edge='n'] {
+  inset-block-start: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='s'] {
+  inset-block-end: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='e'] {
+  inset-inline-end: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='w'] {
+  inset-inline-start: calc(var(--xh-resizable-grip, var(--xh-space-2)) / -2);
+}
+
+/* 四个角：压在两条边的交点上，盖过相邻两条边（它们同时动两轴） */
+[data-scope='resizable'][data-part='handle'][data-edge='ne'],
+[data-scope='resizable'][data-part='handle'][data-edge='nw'],
+[data-scope='resizable'][data-part='handle'][data-edge='se'],
+[data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+  z-index: 2;
+  inline-size: var(--xh-resizable-corner, var(--xh-space-3));
+  block-size: var(--xh-resizable-corner, var(--xh-space-3));
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='nw'] {
+  inset-block-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  inset-inline-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='ne'] {
+  inset-block-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  inset-inline-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+  inset-block-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  inset-inline-start: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle'][data-edge='se'] {
+  inset-block-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+  inset-inline-end: calc(var(--xh-resizable-corner, var(--xh-space-3)) / -2);
+}
+
+[data-scope='resizable'][data-part='handle']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 没开放的边不显示把手：留着一个抓不动的区域只会让人反复去试 */
+[data-scope='resizable'][data-part='handle'][data-disabled] {
+  display: none;
+}
+
 /* styles/result.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='result'] {
@@ -19340,6 +19453,109 @@ input[data-scope='mention'][data-part='input'] {
 /* hidden-input 是 type=hidden 的原生输入，浏览器本就不渲染它，
    这里一条声明都不给：给了 display / 尺寸反而会把它拽回布局里，在拇指内部撑出一块空白。 */
 
+/* styles/sortable.css */
+/* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+[data-scope='sortable'] {
+  --xh-sortable-skin: 1;
+}
+
+/* 分工：**每一项的位移**由连接层每帧写进内联 transform（让位与跟手都在那儿算）。
+   这份皮肤一条都不碰 transform——内联优先级更高，写了不但是死声明，
+   还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
+
+[data-scope='sortable'][data-part='root'] {
+  display: flex;
+  gap: var(--xh-sortable-gap, var(--xh-space-2));
+}
+
+/* 拖动期间关掉选中：整项可拖时按下不 preventDefault，不关这条会一路刷蓝 */
+[data-scope='sortable'][data-part='root'][data-dragging] {
+  user-select: none;
+}
+
+[data-scope='sortable'][data-part='root'][data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+[data-scope='sortable'][data-part='root'][data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+/* 换行网格：主轴横排、允许折行，落点按最近中心判，与单轴那两档是不同的判据 */
+[data-scope='sortable'][data-part='root'][data-orientation='both'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* 项里面放什么、怎么排全是使用者的事：这里不给 display 也不给间距。
+   给了会盖掉使用者自己的单元格布局——网格里的一格被压成 flex 行之后就不再撑满，
+   看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
+
+/* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
+   其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。 */
+[data-scope='sortable'][data-part='root'][data-dragging] [data-part='item']:not([data-dragging]) {
+  transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+}
+
+[data-scope='sortable'][data-part='item'][data-dragging] {
+  /* 拖起来的那一项浮在上面。层级由连接层写内联，这里只管观感 */
+  box-shadow: var(--xh-sortable-item-shadow-dragging, var(--xh-elevation-raised));
+  opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
+}
+
+[data-scope='sortable'][data-part='item-handle'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: var(--xh-sortable-handle-size, var(--xh-control-action-size));
+  block-size: var(--xh-sortable-handle-size, var(--xh-control-action-size));
+  padding: 0;
+  border: 0;
+  border-radius: var(--xh-sortable-handle-radius, var(--xh-shape-control));
+  background: transparent;
+  color: var(--xh-sortable-handle-fg, var(--xh-fg-muted));
+  cursor: grab;
+}
+
+[data-scope='sortable'][data-part='item-handle']:hover {
+  background: var(--xh-sortable-handle-bg-hover, var(--xh-bg-subtle-hover));
+  color: var(--xh-sortable-handle-fg-hover, var(--xh-fg-default));
+}
+
+[data-scope='sortable'][data-part='item-handle'][data-dragging] {
+  cursor: grabbing;
+}
+
+[data-scope='sortable'][data-part='item-handle']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+[data-scope='sortable'][data-part='item-handle'][aria-disabled='true'] {
+  cursor: not-allowed;
+  color: var(--xh-sortable-handle-fg-disabled, var(--xh-fg-disabled));
+}
+
+/* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+[data-scope='sortable'][data-part='live-region'] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+/* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+   不补的话作者给节点加 hidden 后它照样显示 */
+[data-scope='sortable'][data-part='root'][hidden],
+[data-scope='sortable'][data-part='item-handle'][hidden] {
+  display: none;
+}
+
 /* styles/splitter.css */
 /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
 [data-scope='splitter'] {
@@ -20114,8 +20330,11 @@ input[data-scope='mention'][data-part='input'] {
 }
 
 /* —— 三个可叠加的外观开关 —— */
-/* 斑马纹：表体偶数行换一层浅底；悬停与选中的底色仍按原规则盖过它 */
-[data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row']:nth-of-type(even) {
+/* 斑马纹：表体偶数行换一层浅底。它是最底下那一档，悬停、选中、落点都要盖得过它，
+   所以祖先链与 :nth-of-type 都收进 :where()——特指度落到与基础底同档（0-2-0），
+   只靠排在基础底之后压过它一条。照字面写祖先链是 0-8-0，比悬停与选中都高，
+   斑马表里偶数行会既不响应悬停也显不出选中 */
+:where([data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body']) > [data-scope='table'][data-part='row']:where(:nth-of-type(even)) {
   background: var(--xh-table-row-bg-striped, var(--xh-bg-subtle));
 }
 
@@ -20260,6 +20479,294 @@ input[data-scope='mention'][data-part='input'] {
   display: none;
 }
 
+/* 列宽把手贴在表头格的行尾侧。它压在相邻两列的接缝上，因此往外挪半个身位，
+   两边各留出一点可抓的余量——贴着边只有一两个像素能按到。 */
+[data-scope='table'][data-part='column-resize-trigger'] {
+  display: inline-flex;
+  flex: none;
+  align-self: stretch;
+  inline-size: var(--xh-table-resize-width, var(--xh-space-2));
+  /* 推到行尾侧。把手在标记里是表头格的最后一个孩子，auto 外边距把它顶到那一头，
+     不必给每个表头格加定位上下文——那条会落到所有既有表格上 */
+  margin-inline-start: auto;
+  align-items: center;
+  justify-content: center;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+[data-scope='table'][data-part='column-resize-trigger'][hidden] {
+  display: none;
+}
+
+/* 接缝上那条线。平时借表头的分隔色，按住与聚焦时换成品牌色好认 */
+[data-scope='table'][data-part='column-resize-trigger']::after {
+  content: '';
+  display: block;
+  inline-size: var(--xh-table-resize-line, var(--xh-stroke-thin));
+  block-size: var(--xh-table-resize-line-length, 60%);
+  border-radius: var(--xh-table-resize-radius, var(--xh-shape-pill));
+  background: var(--xh-table-resize-fg, var(--xh-border-default));
+}
+
+[data-scope='table'][data-part='column-resize-trigger']:hover::after,
+[data-scope='table'][data-part='column-resize-trigger'][data-resizing]::after {
+  background: var(--xh-table-resize-fg-active, var(--xh-border-control-focus));
+  block-size: 100%;
+}
+
+[data-scope='table'][data-part='column-resize-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 不可改宽的列不显示把手：留着一条抓不动的线只会让人反复去试 */
+[data-scope='table'][data-part='column-resize-trigger'][data-disabled] {
+  display: none;
+}
+
+/* 列拖拽把手贴在表头格的行首侧，位置由源码顺序定，不写 auto 外边距：
+   同一个表头格里的改宽把手已经用 margin-inline-start: auto 把自己顶到行尾侧，
+   再添一条 auto，剩余空白会在两条外边距之间平分，两个把手谁都到不了自己那一头。
+   待在行首侧还有一层好处：它的位置与这一列有多宽、格里有没有排序把手都无关 */
+[data-scope='table'][data-part='column-drag-trigger'] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-table-drag-size, var(--xh-control-indicator-size));
+  block-size: var(--xh-table-drag-size, var(--xh-control-indicator-size));
+  border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
+  color: var(--xh-table-drag-fg, var(--xh-fg-subtle));
+  cursor: grab;
+  /* 关掉这一轴的默认手势：不关的话触屏上手指一划就被系统当成滚动收走 */
+  touch-action: none;
+}
+
+[data-scope='table'][data-part='column-drag-trigger'][hidden] {
+  display: none;
+}
+
+/* 抓手是两条竖线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+   :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+[data-scope='table'][data-part='column-drag-trigger']:empty::after {
+  content: '';
+  display: block;
+  inline-size: var(--xh-table-drag-grip-w, var(--xh-space-1));
+  block-size: var(--xh-table-drag-grip-h, var(--xh-space-2));
+  border-inline: var(--xh-stroke-thin) solid currentColor;
+}
+
+[data-scope='table'][data-part='column-drag-trigger']:not([data-disabled]):hover,
+[data-scope='table'][data-part='column-drag-trigger'][data-dragging] {
+  color: var(--xh-table-drag-fg-active, var(--xh-fg-default));
+}
+
+[data-scope='table'][data-part='column-drag-trigger'][data-dragging] {
+  cursor: grabbing;
+}
+
+/* 不可拖的列照样带一个把手，这里保住它的位置、只把它压到禁用色。
+   收成 display: none 是不行的：把手在行首侧，藏掉之后同一行里能拖与不能拖的两列，
+   标题起点会错开一格 */
+[data-scope='table'][data-part='column-drag-trigger'][data-disabled] {
+  color: var(--xh-table-drag-fg-disabled, var(--xh-fg-disabled));
+  cursor: not-allowed;
+}
+
+[data-scope='table'][data-part='column-drag-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 落点指示线：拖到哪一列的哪一侧，线就画在那一列的那条边上。列头与表体的格子一起画，
+   线贯穿整张表才看得出这一列要落到哪儿。
+   定位上下文由这条规则自己给：列头与格子平时都不定位，缺了它伪元素会一路上溯到表格根，
+   线就飞到整张表的左上角去。
+   冻结列排除在外：它靠 position: sticky 钉住，在这儿改成 relative 会把吸附顶掉；
+   而冻结列既不可拖也不做落点，排除掉不会漏画任何一条线 */
+[data-scope='table'][data-part='column-header'][data-drop]:not([data-frozen]),
+[data-scope='table'][data-part='cell'][data-drop]:not([data-frozen]) {
+  position: relative;
+}
+
+/* 线整条画在盒内：列头与格子都收 overflow: hidden，压着边画会被裁掉半条 */
+[data-scope='table'][data-part='column-header'][data-drop]:not([data-frozen])::after,
+[data-scope='table'][data-part='cell'][data-drop]:not([data-frozen])::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inline-size: var(--xh-table-drop-line, var(--xh-stroke-thick));
+  background: var(--xh-table-drop-fg, var(--xh-border-control-focus));
+}
+
+/* 落在哪一侧走逻辑属性：rtl 下 before 自己就换到右边去了。
+   换成 box-shadow: inset 的话偏移量是物理的，书写方向一反 before 与 after 就调个个儿 */
+[data-scope='table'][data-part='column-header'][data-drop='before']:not([data-frozen])::after,
+[data-scope='table'][data-part='cell'][data-drop='before']:not([data-frozen])::after {
+  inset-inline-start: 0;
+}
+
+[data-scope='table'][data-part='column-header'][data-drop='after']:not([data-frozen])::after,
+[data-scope='table'][data-part='cell'][data-drop='after']:not([data-frozen])::after {
+  inset-inline-end: 0;
+}
+
+/* 被拖的那一列整列压暗，让人看得出正在搬的是它。这里只动 opacity 与 user-select，
+   一个 transform 都不写：冻结列是 position: sticky，祖先一有 transform 就掉出吸附。
+   位置的事全交给落点指示线，被拖的列自己原地不动 */
+[data-scope='table'][data-part='column-header'][data-dragging],
+[data-scope='table'][data-part='cell'][data-dragging] {
+  opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+  user-select: none;
+}
+
+/* —— 行拖拽排序 —— */
+/* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+   这条不写 touch-action：整行关掉纵向手势，表格自己就滚不动了；
+   触屏那一路交给下面那块专属把手 */
+[data-scope='table'][data-part='row'][data-row-draggable] {
+  cursor: grab;
+}
+
+/* 行拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+   代价只是这一小块地方不再跟着表格滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+   touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+   皮肤再写一遍会盖掉那份条件判断，让不可拖的行也白白让出滚动 */
+[data-scope='table'][data-part='row-drag-trigger'] {
+  display: inline-flex;
+  flex: none;
+  /* 行是 align-items: stretch 的 flex 容器，不自己居中就会被拉成整行高 */
+  align-self: center;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-table-row-drag-size, var(--xh-control-indicator-size));
+  block-size: var(--xh-table-row-drag-size, var(--xh-control-indicator-size));
+  border-radius: var(--xh-table-trigger-radius, var(--xh-shape-control));
+  color: var(--xh-table-row-drag-fg, var(--xh-fg-subtle));
+  cursor: grab;
+}
+
+[data-scope='table'][data-part='row-drag-trigger'][hidden] {
+  display: none;
+}
+
+/* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+   线的走向与能拖的方向垂直——行沿块向上下排，画横线；列沿行向左右排，那边画的是竖线。
+   两处都用逻辑属性，书写模式一换，线跟着排列轴自己转过去。
+   :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+[data-scope='table'][data-part='row-drag-trigger']:empty::after {
+  content: '';
+  display: block;
+  inline-size: var(--xh-table-row-drag-grip-long, var(--xh-space-2));
+  block-size: var(--xh-table-row-drag-grip-short, var(--xh-space-1));
+  border-block: var(--xh-stroke-thin) solid currentColor;
+}
+
+[data-scope='table'][data-part='row-drag-trigger']:not([data-disabled]):hover,
+[data-scope='table'][data-part='row-drag-trigger'][data-dragging] {
+  color: var(--xh-table-row-drag-fg-active, var(--xh-fg-default));
+}
+
+[data-scope='table'][data-part='row-drag-trigger'][data-dragging] {
+  cursor: grabbing;
+}
+
+/* 不可拖的行照样带一个把手，这里保住它的位置、只把它压到禁用色。
+   收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一张表里能拖与不能拖的两行，
+   首列内容的起点会错开一格 */
+[data-scope='table'][data-part='row-drag-trigger'][data-disabled] {
+  color: var(--xh-table-row-drag-fg-disabled, var(--xh-fg-disabled));
+  cursor: not-allowed;
+}
+
+[data-scope='table'][data-part='row-drag-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 被拖的行整行压暗，与被拖的列同一档透明度。这里只动 opacity、cursor 与 user-select，
+   一个 transform 都不写：斑马纹按 nth-of-type 算、行间线按兄弟选择器算，两者认的都是 DOM 位置，
+   跟手让位会让它们在拖动全程与行错开。位置的事全交给落点指示线 */
+[data-scope='table'][data-part='row'][data-dragging] {
+  opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* 详情行与它的数据行是同一块，一起压暗 */
+[data-scope='table'][data-part='expanded-row'][data-dragging] {
+  opacity: var(--xh-table-dragging-opacity, var(--xh-state-dragging-opacity));
+}
+
+/* 落点指示：插到两行之间画一条横线，落进一行里面画一整圈。两档都靠伪元素画，
+   定位上下文只给带 data-drop 的那一行：缺了它伪元素会一路上溯到表格根，指示飞到整张表的左上角；
+   写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个 */
+[data-scope='table'][data-part='row'][data-drop] {
+  position: relative;
+}
+
+/* 线贯穿整行宽度，并且要压在单元格之上：行是 flex 容器，横向吸附的格子带着层号，
+   伪元素不抬到它上面就会被盖住。
+   选择器逐值列出前后两档，不写成裸 [data-drop]：换父那一档用的是同一个 ::after，
+   裸写会让它先摊上一条线高的横条，再由下面那块整个改写 */
+[data-scope='table'][data-part='row']:is([data-drop='before'], [data-drop='after'])::after {
+  content: '';
+  position: absolute;
+  z-index: calc(var(--xh-table-sticky-column-layer, 1) + 1);
+  inset-inline: 0;
+  block-size: var(--xh-table-drop-line, var(--xh-stroke-thick));
+  background: var(--xh-table-drop-fg, var(--xh-border-control-focus));
+}
+
+/* 线整条画在行内，不压着边。压着边画的话，首行那条上沿线会被表格根的圆角与滚动裁掉半条 */
+[data-scope='table'][data-part='row'][data-drop='before']::after {
+  inset-block-start: 0;
+}
+
+[data-scope='table'][data-part='row'][data-drop='after']::after {
+  inset-block-end: 0;
+}
+
+/* 落进这一行里面（这一行成为新的父）：整行淡底，与上下沿那条横线一眼分得开。
+   底色打在行上而不是伪元素上，横向吸附的格子取的是 background: inherit，跟着一起换色，
+   横向滚过去时冻结列不会留下一块没上色的补丁。
+   祖先写到 root 与 body 两层，是为把特指度抬到 0-8-0：拖动时指针必然停在落点这一行上、
+   悬停恒真，而悬停那条是 0-6-0、选中那条是 0-3-0，少写一层祖先这块淡底就会被那两档盖掉。
+   禁用的行不接换父落点，:not([data-disabled]) 不会漏画任何一处高亮 */
+[data-scope='table'][data-part='root'] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row'][data-drop='inside']:not([data-disabled]) {
+  background: var(--xh-table-drop-inside-bg, var(--xh-bg-brand-subtle));
+}
+
+/* 换父那一档的描边：与底色分两层画，因为它得压在横向吸附的格子之上——
+   格子带着层号，画在行自己的背景层上会被首尾的冻结列盖掉半圈。
+   零偏移的内投影四边同时着色、不涉及方向，书写模式一换也不用调；
+   整圈画在行内不压着边，与上下沿那条横线同一口径。
+   行上不写 transform：冻结列是 position: sticky，祖先一有 transform 就掉出吸附 */
+[data-scope='table'][data-part='row'][data-drop='inside']::after {
+  content: '';
+  position: absolute;
+  z-index: calc(var(--xh-table-sticky-column-layer, 1) + 1);
+  inset: 0;
+  box-shadow: inset 0 0 0 var(--xh-table-drop-line, var(--xh-stroke-thick))
+    var(--xh-table-drop-fg, var(--xh-border-control-focus));
+  /* 这一层盖满整行，让它不接指针，落点判定照旧落到行与格子上 */
+  pointer-events: none;
+}
+
+/* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+[data-scope='table'][data-part='live-region'] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西 */
 [data-scope='table'][data-part='sort-trigger']::after {
   color: var(--xh-table-sort-fg, var(--xh-fg-subtle));
@@ -20559,11 +21066,150 @@ input[data-scope='mention'][data-part='input'] {
   outline-offset: var(--xh-ring-offset);
 }
 
+/* —— 标签拖拽换位 —— */
+/* 整张标签都是拖动源，光标换成抓手告诉人这张标签按得动。
+   这条不写 touch-action：整张标签关掉手势，标签带自己就滚不动了；
+   触屏那一路交给下面那块专属把手 */
+[data-scope='tabs'][data-part='trigger'][data-draggable] {
+  cursor: grab;
+}
+
+/* 标签拖拽把手：标签里的一小块专属拖动区，按下即拖。触屏靠它起手，
+   代价只是这一小块地方不再跟着标签带滚。整张标签起手那一路原样保留，把手是叠加的第二个入口。
+   touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+   皮肤再写一遍会盖掉那份条件判断，让不可拖的标签也白白让出滚动 */
+[data-scope='tabs'][data-part='tab-drag-trigger'] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+  block-size: var(--xh-tabs-drag-size, var(--xh-control-indicator-size));
+  border-radius: var(--xh-tabs-drag-radius, var(--xh-shape-control));
+  color: var(--xh-tabs-drag-fg, var(--xh-fg-subtle));
+  cursor: grab;
+}
+
+/* 抓手是两条与排列轴垂直的线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+   标签带横排时标签左右排开，画的是两条竖线；竖排那一档在下面换成横线。
+   基础这一档同时兜住 root 上没写方向的情形。
+   :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+[data-scope='tabs'][data-part='tab-drag-trigger']:empty::after {
+  content: '';
+  display: block;
+  inline-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+  block-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+  border-inline: var(--xh-stroke-thin) solid currentColor;
+}
+
+/* 竖排的标签上下排开，两条线跟着转九十度：长短对调，描边换到块向两侧，
+   行向那两条得显式清零，否则四边都留着描边，抓手成了一个方框 */
+[data-scope='tabs'][data-part='root'][data-orientation='vertical']
+  [data-scope='tabs'][data-part='tab-drag-trigger']:empty::after {
+  inline-size: var(--xh-tabs-drag-grip-long, var(--xh-space-2));
+  block-size: var(--xh-tabs-drag-grip-short, var(--xh-space-1));
+  border-inline: 0;
+  border-block: var(--xh-stroke-thin) solid currentColor;
+}
+
+[data-scope='tabs'][data-part='tab-drag-trigger']:not([data-disabled]):hover,
+[data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+  color: var(--xh-tabs-drag-fg-active, var(--xh-fg-default));
+}
+
+[data-scope='tabs'][data-part='tab-drag-trigger'][data-dragging] {
+  cursor: grabbing;
+}
+
+/* 不可拖的标签照样带一个把手，这里保住它的位置、只把它压到禁用色。
+   收成 display: none 是不行的：把手占着标签内的头一格，藏掉之后同一条标签带里
+   能拖与不能拖的两张标签，文字起点会错开一格 */
+[data-scope='tabs'][data-part='tab-drag-trigger'][data-disabled] {
+  color: var(--xh-tabs-drag-fg-disabled, var(--xh-fg-disabled));
+  cursor: not-allowed;
+}
+
+[data-scope='tabs'][data-part='tab-drag-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 被拖的那张标签压暗，让人看得出正在搬的是它。这里只动 opacity、cursor 与 user-select，
+   一个 transform 都不写：标签原地不动，要落到哪儿全交给落点指示 */
+[data-scope='tabs'][data-part='trigger'][data-dragging] {
+  opacity: var(--xh-tabs-dragging-opacity, var(--xh-state-dragging-opacity));
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* 落点指示线：插到哪张标签的哪一侧，线就画在那张标签的那条边上。
+   定位上下文不必在这儿再给：标签的基础规则里已经是 position: relative。
+   线走 ::after：选中态那道指示画的是 box-shadow（card 档的顶边条、segment 档的浮起），
+   line 档只换文字色，标签上两个伪元素都空着，落点线不与谁抢。
+   标签自身不收 overflow，线不会被裁掉；仍整条画在盒内不压着边 */
+[data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+  content: '';
+  position: absolute;
+  background: var(--xh-tabs-drop-fg, var(--xh-border-control-focus));
+}
+
+/* 线的方向跟着标签带的排法换：方向写在 root 的 data-orientation 上，从根往下选。
+   横排的标签左右排开，线是一条竖的，贯穿标签的块向、贴在行向的前后沿 */
+[data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+  [data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+  inset-block: 0;
+  inline-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+}
+
+/* 落在前沿还是后沿走逻辑属性：rtl 下 before 自己就换到右边去了。
+   换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+[data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+  [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+  inset-inline-start: 0;
+}
+
+[data-scope='tabs'][data-part='root'][data-orientation='horizontal']
+  [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+  inset-inline-end: 0;
+}
+
+/* 竖排的标签上下排开，线是一条横的，贯穿标签的行向、贴在块向的前后沿 */
+[data-scope='tabs'][data-part='root'][data-orientation='vertical']
+  [data-scope='tabs'][data-part='trigger']:is([data-drop='before'], [data-drop='after'])::after {
+  inset-inline: 0;
+  block-size: var(--xh-tabs-drop-line, var(--xh-stroke-thick));
+}
+
+/* 块向同样走逻辑属性，跟着书写模式走 */
+[data-scope='tabs'][data-part='root'][data-orientation='vertical']
+  [data-scope='tabs'][data-part='trigger'][data-drop='before']::after {
+  inset-block-start: 0;
+}
+
+[data-scope='tabs'][data-part='root'][data-orientation='vertical']
+  [data-scope='tabs'][data-part='trigger'][data-drop='after']::after {
+  inset-block-end: 0;
+}
+
+/* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+[data-scope='tabs'][data-part='live-region'] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
    写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
 [data-scope='tabs'][data-part='root'][hidden],
 [data-scope='tabs'][data-part='list'][hidden],
-[data-scope='tabs'][data-part='trigger'][hidden] {
+[data-scope='tabs'][data-part='trigger'][hidden],
+[data-scope='tabs'][data-part='tab-drag-trigger'][hidden] {
   display: none;
 }
 
@@ -24240,6 +24886,135 @@ input[data-scope='mention'][data-part='input'] {
   mask: var(--xh-glyph-mark-check) center / contain no-repeat;
 }
 
+/* —— 节点拖拽搬家 —— */
+/* 整行都是拖动源，光标换成抓手告诉人这一行按得动。
+   这条不写 touch-action：整行关掉纵向手势，树容器自己就滚不动了；
+   触屏那一路交给下面那块专属把手 */
+[data-scope='tree'][data-part='item'][data-draggable],
+[data-scope='tree'][data-part='branch-control'][data-draggable] {
+  cursor: grab;
+}
+
+/* 节点拖拽把手：行里的一小块专属拖动区，按下即拖。触屏靠它起手，
+   代价只是这一小块地方不再跟着树滚。整行起手那一路原样保留，把手是叠加的第二个入口。
+   touch-action 不在这儿写：连接层按「拖不动就不写」把它写进了内联 style，
+   皮肤再写一遍会盖掉那份条件判断，让不可拖的节点也白白让出滚动 */
+[data-scope='tree'][data-part='node-drag-trigger'] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--xh-tree-drag-size, var(--xh-control-indicator-size));
+  block-size: var(--xh-tree-drag-size, var(--xh-control-indicator-size));
+  border-radius: var(--xh-tree-drag-radius, var(--xh-shape-control));
+  color: var(--xh-tree-drag-fg, var(--xh-fg-subtle));
+  cursor: grab;
+}
+
+[data-scope='tree'][data-part='node-drag-trigger'][hidden] {
+  display: none;
+}
+
+/* 抓手是两条横线：盒子取边框盒，块向两侧的描边就是那两条线，宽高与线宽都走令牌。
+   线的走向与能拖的方向垂直——节点沿块向上下排，画的就是横线。
+   用逻辑属性写，书写模式一换，线跟着排列轴自己转过去。
+   :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起 */
+[data-scope='tree'][data-part='node-drag-trigger']:empty::after {
+  content: '';
+  display: block;
+  inline-size: var(--xh-tree-drag-grip-long, var(--xh-space-2));
+  block-size: var(--xh-tree-drag-grip-short, var(--xh-space-1));
+  border-block: var(--xh-stroke-thin) solid currentColor;
+}
+
+[data-scope='tree'][data-part='node-drag-trigger']:not([data-disabled]):hover,
+[data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+  color: var(--xh-tree-drag-fg-active, var(--xh-fg-default));
+}
+
+[data-scope='tree'][data-part='node-drag-trigger'][data-dragging] {
+  cursor: grabbing;
+}
+
+/* 不可拖的节点照样带一个把手，这里保住它的位置、只把它压到禁用色。
+   收成 display: none 是不行的：把手占着行首那一格，藏掉之后同一层里能拖与不能拖的两个节点，
+   文字起点会错开一格，层级关系跟着读歪 */
+[data-scope='tree'][data-part='node-drag-trigger'][data-disabled] {
+  color: var(--xh-tree-drag-fg-disabled, var(--xh-fg-disabled));
+  cursor: not-allowed;
+}
+
+[data-scope='tree'][data-part='node-drag-trigger']:focus-visible {
+  outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+  outline-offset: var(--xh-ring-offset);
+}
+
+/* 被拖的那一行压暗，让人看得出正在搬的是它。这里只动 opacity、cursor 与 user-select，
+   一个 transform 都不写：行原地不动，要落到哪儿全交给落点指示 */
+[data-scope='tree'][data-part='item'][data-dragging],
+[data-scope='tree'][data-part='branch-control'][data-dragging] {
+  opacity: var(--xh-tree-dragging-opacity, var(--xh-state-dragging-opacity));
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* 落点指示线：插到哪一行的哪一侧，横线就画在那一行的那条边上。
+   定位上下文只给要画线的那一行：行平时都不定位，缺了它伪元素会一路上溯到最近的定位祖先，
+   线就画到树外面去；写到所有行上则是给每一行都多担一份，而落点同一时刻只有一个。
+   整块高亮那一档不在此列：它不靠伪元素，用不着这层上下文 */
+[data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after']),
+[data-scope='tree'][data-part='branch-control']:is([data-drop='before'], [data-drop='after']) {
+  position: relative;
+}
+
+/* 线贯穿整行宽度。行自身不收 overflow，线不会被行裁掉；
+   但仍整条画在行内不压着边——压着边画的话，首行那条上沿线会被树容器的圆角与滚动裁掉半条 */
+[data-scope='tree'][data-part='item']:is([data-drop='before'], [data-drop='after'])::after,
+[data-scope='tree'][data-part='branch-control']:is([data-drop='before'], [data-drop='after'])::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  block-size: var(--xh-tree-drop-line, var(--xh-stroke-thick));
+  background: var(--xh-tree-drop-fg, var(--xh-border-control-focus));
+}
+
+/* 落在上沿还是下沿走逻辑属性，块向跟着书写模式走。
+   换成 box-shadow 的偏移量则是物理的，写不出逻辑方向 */
+[data-scope='tree'][data-part='item'][data-drop='before']::after,
+[data-scope='tree'][data-part='branch-control'][data-drop='before']::after {
+  inset-block-start: 0;
+}
+
+[data-scope='tree'][data-part='item'][data-drop='after']::after,
+[data-scope='tree'][data-part='branch-control'][data-drop='after']::after {
+  inset-block-end: 0;
+}
+
+/* 放进这个节点里面：整行淡底加一圈内描边，与上下沿那条横线一眼分得开。
+   描边走零偏移的内投影，四边同时着色、不涉及方向，也跟着行的圆角走。
+   选择器里那条 :not([data-disabled]) 是把特指度补到与悬停那条齐平，再靠排在它之后压过它：
+   指针本来就停在落点这一行上，少了这一段，落点底色会被悬停那档灰盖掉。
+   禁用的节点从来不做落点，这一段因此不会漏画任何一处高亮 */
+[data-scope='tree'][data-part='item'][data-drop='inside']:not([data-disabled]),
+[data-scope='tree'][data-part='branch-control'][data-drop='inside']:not([data-disabled]) {
+  background: var(--xh-tree-drop-inside-bg, var(--xh-bg-brand-subtle));
+  box-shadow: inset 0 0 0 var(--xh-tree-drop-line, var(--xh-stroke-thick))
+    var(--xh-tree-drop-fg, var(--xh-border-control-focus));
+}
+
+/* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+[data-scope='tree'][data-part='live-region'] {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
    写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
 [data-scope='tree'][data-part='branch-checkbox'][hidden] {