@inchurch/matcha-theme 22.38.9 → 22.40.0

package/components/matcha-tree-view.scss

@@ -35,17 +35,22 @@ matcha-tree-branch,
     display:        flex;
     flex-direction: column;
     gap:            0;
-    min-height:     2px; // alvo de drop mínimo quando o branch está vazio
 }
 
 // ── Recuo (bloco de filhos) ────────────────────────────────────────────────
 // O recuo é do BLOCO, não de cada linha: o item dentro do container não recua
 // sozinho, e a guia vira UM traço por nível, contínuo por estrutura.
 .matcha-tree-view__children {
-    position:             relative;
-    padding-inline-start: var(--matcha-tree-view-indent-step, 32px);
+    position:  relative;
     // Motion do Figma: filhos entram em 200ms, desacelerando.
     animation: matcha-tree-view-children-in var(--matcha-duration-fast, 200ms) var(--matcha-easing-decelerated, ease-out) both;
+
+    // O padding mora no BRANCH, não no bloco: a faixa do recuo (onde passa a
+    // guia) é da lista de filhos no hit-test do arraste. No bloco, o cursor
+    // sobre a guia caía na lista de fora, e o destino mostrado era outro.
+    > matcha-tree-branch {
+        padding-inline-start: var(--matcha-tree-view-indent-step, 32px);
+    }
 }
 
 @keyframes matcha-tree-view-children-in {
@@ -125,7 +130,7 @@ matcha-tree-branch,
 
 // Recuo travado ([maxIndentLevel]): o bloco não recua nem desenha guia; a linha
 // fica no recuo do pai e o contexto entrega `clamped` pra ela sinalizar (L5+).
-.matcha-tree-view .matcha-tree-view__children.is-clamped {
+.matcha-tree-view .matcha-tree-view__children.is-clamped > matcha-tree-branch {
     padding-inline-start: 0;
 }
 
@@ -322,35 +327,26 @@ matcha-tree-view-item:focus-within .matcha-tree-view-item__actions,
     opacity: 1;
 }
 
-// Alvo de drop de um branch VAZIO — nó expandido sem filhos, lazy-load, árvore
-// vazia. Renderizado durante todo o drag (não só quando já está sob o cursor):
-// sem altura própria o branch tem ~2px e é impossível mirar pra soltar/reparentar
-// dentro do nó. (IN-42506)
+// "Solte aqui para tornar filho" — o alvo de uma pasta ABERTA e VAZIA que aceita
+// o item (Figma: filhos · vazio). Aparece durante todo o arraste pra dar onde
+// mirar (IN-42506), mas só onde o drop é possível: nunca numa página, nunca na
+// outra árvore. É sempre neutro: quando o cursor chega nele (`.is-target`), o
+// destaque é o Recebendo na linha do PAI — um sinal só, como no Figma.
 .matcha-tree-view .matcha-drop-list-empty-placeholder {
     display:         flex;
     align-items:     center;
     justify-content: center;
-    min-height:      40px;
+    min-height:      48px;
     margin:          var(--matcha-space-050, 4px) 0;
-    padding:         var(--matcha-space-150, 12px);
+    padding:         var(--matcha-space-100, 8px) var(--matcha-space-150, 12px);
     font-size:       var(--matcha-text-body-sm, 12px);
+    line-height:     16px;
     color:           var(--matcha-color-text-muted);
-    border:          2px dashed var(--matcha-color-surface-border);
+    border:          var(--matcha-border-hairline, 1px) dashed var(--matcha-color-surface-border);
     border-radius:   var(--matcha-radius-md, 4px);
     background:      transparent;
-    // Sem transição: o feedback de aceite/rejeição precisa ser imediato durante o
-    // drag (o estado alterna a cada mousemove perto de uma borda de validação).
-
-    // Drag ativo mas o cursor ainda não chegou / chegou e o drop é válido.
-    &.can-accept {
-        border-color: var(--matcha-color-accent);
-    }
-
-    // Cursor sobre o alvo e o drop é rejeitado (profundidade, ciclo, tipo).
-    &.cannot-accept {
-        border-color: var(--matcha-color-danger);
-        background:    var(--matcha-color-danger-alpha, transparent);
-    }
+    box-sizing:      border-box;
+    pointer-events:  auto;
 }
 
 // Em ponteiro grosso (toque) não existe hover: grip e ações ficam visíveis.
@@ -538,18 +534,86 @@ matcha-tree-view-item:focus-within .matcha-tree-view-item__disclosure,
 }
 
 // ── Drag-and-drop (compõe com o motor do matcha-drop-list) ──────────────────
+// Um alvo por vez: a árvore resolve o destino sob o cursor e pinta UMA coisa —
+// Recebendo na pasta que vai receber, Recusado na linha que não aceita, ou a
+// linha do Figma entre irmãos. As classes vêm do branch (estado da árvore).
+
+// Dragging = o FANTASMA na origem, durante o arraste inteiro (Figma:
+// opacity/disabled). Esmaece o bloco todo: a subárvore vai junto com o nó.
+.matcha-tree-view .matcha-tree-view__node.is-dragging {
+    opacity: var(--matcha-opacity-disabled, 0.38);
+}
+
+// Durante o arraste o hover das linhas sai de cena: um fundo de hover sob o
+// cursor parecia um segundo alvo ao lado do Recebendo, e o grip e o kebab
+// revelados na linha de destino eram ruído (ela é destino, não alvo de clique).
+.matcha-tree-view--dragging matcha-tree-view-item:not([disabled]):hover .matcha-tree-view-item__row {
+    background: transparent;
+}
+
+.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__grip,
+.matcha-tree-view--dragging matcha-tree-view-item:hover .matcha-tree-view-item__actions {
+    opacity: 0;
+}
 
-// Dragging = o FANTASMA na origem. O motor do drop-list aplica isso INLINE no
-// wrapper arrastado (opacidade + translate dos irmãos) — não há classe pra
-// estilizar aqui; o que o tema garante é que o wrapper não ganhe fundo, sombra
-// ou escala de "card solto" (ver as regras do wrapper acima).
+// Recebendo = a pasta que vai receber o item como filho: tinta accent + hairline
+// accent. Mesma especificidade da regra acima e declarada depois: vence o hover
+// suprimido e o selected.
+.matcha-tree-view .matcha-tree-view__node.is-drop-into > matcha-tree-view-item .matcha-tree-view-item__row {
+    background: var(--matcha-color-accent-surface-hover, var(--matcha-color-accent-alpha));
+    box-shadow: inset 0 0 0 var(--matcha-border-hairline, 1px) var(--matcha-color-accent);
+}
+
+// Recusado = destino inválido (tipo ou profundidade), só na linha sob o cursor:
+// tracejado danger de 2px (Figma: border/thin).
+.matcha-tree-view .matcha-tree-view__node.is-drop-rejected > matcha-tree-view-item .matcha-tree-view-item__row {
+    outline:        var(--matcha-border-thin, 2px) dashed var(--matcha-color-danger);
+    outline-offset: calc(-1 * var(--matcha-border-thin, 2px));
+}
+
+// Entre irmãos = a linha do Figma (matcha/tree-view/drop-indicator): 2px accent
+// com uma bolinha no começo, na borda do nó e no recuo do nível dele.
+.matcha-tree-view__drop-line {
+    position:       absolute;
+    inset-inline:   0;
+    top:            calc(-1 * var(--matcha-border-thin, 2px) / 2);
+    height:         var(--matcha-border-thin, 2px);
+    border-radius:  var(--matcha-radius-pill, 9999px);
+    background:     var(--matcha-color-accent);
+    pointer-events: none;
+    z-index:        1;
+
+    &::before {
+        content:            "";
+        position:           absolute;
+        inset-inline-start: 0;
+        top:                50%;
+        width:              var(--matcha-space-075, 6px);
+        height:             var(--matcha-space-075, 6px);
+        border-radius:      var(--matcha-radius-pill, 9999px);
+        background:         var(--matcha-color-accent);
+        transform:          translateY(-50%);
+    }
+
+    &--after {
+        top:    auto;
+        bottom: calc(-1 * var(--matcha-border-thin, 2px) / 2);
+    }
+}
 
 // Levantado = a cópia que acompanha o cursor: SÓ a linha, com superfície e
-// elevação level-2. O motor clona o wrapper inteiro (a subárvore junto);
-// esconder os filhos no clone deixa a cópia do tamanho de uma linha.
-.matcha-drag-ghost {
-    box-shadow: none; // a elevação é da row, não da caixa do clone
+// elevação level-2 — a sombra é da row, não da caixa do clone. Escopado no
+// clone de nó da árvore: o ghost das listas planas segue com a opacidade e a
+// sombra do drop-list.
+.matcha-drag-ghost:has(> .matcha-tree-view__node) {
+    opacity:       1;
+    box-shadow:    none;
+    border-radius: 0;
+}
 
+// O motor clona o wrapper inteiro (a subárvore junto); esconder os filhos no
+// clone deixa a cópia do tamanho de uma linha.
+.matcha-drag-ghost {
     .matcha-tree-view__children-host { display: none; }
 
     .matcha-tree-view-item__row {
@@ -574,48 +638,6 @@ matcha-tree-view-item:focus-within .matcha-tree-view-item__disclosure,
     border:   0;
 }
 
-// Recebendo = o PAI que vai receber o drop dentro: tinta accent + hairline
-// accent na linha dele. O motor marca o branch dos filhos; a linha do pai é a
-// irmã anterior do bloco, daí o :has() com filhos diretos.
-.matcha-tree-view .matcha-tree-view__node:has(
-    > .matcha-tree-view__children-host > .matcha-tree-view__children > matcha-tree-branch.matcha-drop-list-receiving
-) > matcha-tree-view-item .matcha-tree-view-item__row {
-    background: var(--matcha-color-accent-surface-hover, var(--matcha-color-accent-alpha));
-    box-shadow: inset 0 0 0 var(--matcha-border-hairline, 1px) var(--matcha-color-accent);
-}
-
-// Recusado = destino inválido por TIPO: tracejado danger na linha do pai. A
-// zona em si não ganha moldura, e a subárvore de quem está sendo arrastado
-// (.matcha-drop-zone-self) não é pintada: rejeitar a si mesmo é óbvio.
-.matcha-tree-view .matcha-tree-view__node:has(
-    > .matcha-tree-view__children-host > .matcha-drop-zone-cannot-accept:not(.matcha-drop-zone-self)
-) > matcha-tree-view-item .matcha-tree-view-item__row {
-    outline:        var(--matcha-border-hairline, 1px) dashed var(--matcha-color-danger);
-    outline-offset: calc(-1 * var(--matcha-border-hairline, 1px));
-}
-
-// A moldura listrada/tracejada que o drop-list dá à zona não vale na árvore.
-.matcha-tree-view .matcha-tree-view__children.matcha-drop-zone-cannot-accept {
-    outline:    none;
-    background: transparent;
-    border:     0;
-}
-
-// O branch NÃO herda a moldura listrada do drop-list plano.
-.matcha-tree-view matcha-tree-branch.matcha-drop-list-receiving,
-.matcha-tree-view matcha-tree-branch.matcha-drop-list-can-accept,
-.matcha-tree-view matcha-tree-branch.matcha-drop-list-cannot-accept {
-    background: transparent;
-    border:     0;
-    padding:    0;
-
-    &::before { content: none; }
-}
-
-// Entre irmãos NÃO há linha indicadora: o motor abre o espaço do item arrastado
-// (translateY nos irmãos, 150ms) e deixa o fantasma na origem. É o "indicador"
-// do código; o bloco drop-indicator do Figma é a representação estática disso.
-
 // Respeita preferência de redução de movimento
 @media (prefers-reduced-motion: reduce) {
     matcha-tree-view-item,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inchurch/matcha-theme",
-  "version": "22.38.9",
+  "version": "22.40.0",
   "description": "Themes for matcha-design-system",
   "main": "main.scss",
   "scripts": {