@behindthemusictree/genre-tree-view 5.0.0 → 6.2.0

package/dist/styles.css

@@ -67,6 +67,12 @@
   animation: gtv-spin 1s linear infinite;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .gtv-icon--spin {
+    animation: none;
+  }
+}
+
 @keyframes gtv-spin {
   from {
     transform: rotate(0deg);
@@ -226,6 +232,7 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
+  align-items: flex-end;
   gap: 0.5rem;
 }
 
@@ -308,6 +315,13 @@
   flex-direction: row;
 }
 
+/* The breadcrumb reserves a fixed strip beside the controls, so a wider box stacks instead. */
+@container (max-width: 767px) {
+  .gtv-wheel-floating-controls--horizontal {
+    flex-direction: column;
+  }
+}
+
 .gtv-zoom-btn {
   display: flex;
   align-items: center;
@@ -503,11 +517,6 @@
   visibility: hidden;
 }
 
-.gtv-info-panel-title--editor {
-  overflow: visible;
-  white-space: normal;
-}
-
 .gtv-info-panel-close,
 .gtv-info-panel-previous,
 .gtv-info-panel-zoom-in {
@@ -534,25 +543,6 @@
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.gtv-info-panel-edit {
-  flex-shrink: 0;
-  height: 24px;
-  padding: 0 0.5rem;
-  font: inherit;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border: 1px solid currentColor;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-}
-
-.gtv-info-panel-edit:hover,
-.gtv-info-panel-edit[aria-pressed="true"] {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
 .gtv-info-panel-fields {
   margin: 0;
   padding: 0.625rem 1.5rem;
@@ -1244,6 +1234,12 @@
   box-shadow: 0 2px 600px rgba(255, 255, 255, 0.16);
 }
 
+@media (prefers-reduced-motion: no-preference) {
+  .gtv-wheel-chip--circle {
+    transition: width 250ms ease-out, height 250ms ease-out;
+  }
+}
+
 /* Center "Mainstream Pop" chip: white fill (see centerNodeColor), so the default white label
    text and light border used for colored chips would be invisible / too subtle here. */
 .gtv-wheel-chip--center {
@@ -1674,3 +1670,54 @@
 .gtv-stage--moving * {
   pointer-events: none;
 }
+
+/* GenreTreeWheelRadialPopCore only: darker background slice behind an underground-scene subtree
+   (an svg path inside the pop layer, painted under that branch's links and nodes). */
+.gtv-wheel-scene-sector {
+  pointer-events: none;
+}
+
+/* BusyIndicator — fades in after a delay so fast operations never flash. The ring spins via
+   transform only, so it keeps turning on the compositor while the main thread rebuilds the SVG. */
+.gtv-busy {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: gtv-busy-fade-in 0.2s ease-out 150ms both;
+}
+
+.gtv-busy-ring {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 2px solid color-mix(in srgb, var(--gtv-busy-color, var(--color-primary, #6366f1)) 25%, transparent);
+  border-top-color: var(--gtv-busy-color, var(--color-primary, #6366f1));
+  border-radius: 50%;
+  animation: gtv-spin 0.8s linear infinite;
+}
+
+@keyframes gtv-busy-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes gtv-busy-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gtv-busy-ring {
+    animation: gtv-busy-pulse 1.6s ease-in-out infinite;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@behindthemusictree/genre-tree-view",
-  "version": "5.0.0",
+  "version": "6.2.0",
   "description": "Reusable, presentational D3-based genre/hierarchy tree visualization component for React",
   "repository": {
     "type": "git",