@behindthemusictree/genre-tree-view 6.2.0 → 6.4.0

package/dist/styles.css

@@ -236,19 +236,6 @@
   gap: 0.5rem;
 }
 
-.gtv-zoom-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  width: fit-content;
-  padding: 0.1875rem;
-  box-sizing: border-box;
-  background: var(--gtv-surface, var(--color-surface, #ffffff));
-  border: 1px solid var(--gtv-border, var(--color-border, #e4e4e7));
-  border-radius: 0.5rem;
-  filter: drop-shadow(0 2px 6px rgba(24, 24, 27, 0.16));
-}
-
 /* Top-centre: the top corners belong to the host (search + panel on the left, app chrome on the
    right), and the trail sits right above the wheel it describes. */
 .gtv-wheel-breadcrumb {
@@ -310,8 +297,7 @@
   }
 }
 
-.gtv-wheel-floating-controls--horizontal,
-.gtv-wheel-floating-controls--horizontal .gtv-zoom-controls {
+.gtv-wheel-floating-controls--horizontal {
   flex-direction: row;
 }
 
@@ -322,38 +308,11 @@
   }
 }
 
-.gtv-zoom-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 0.375rem;
-  background: transparent;
-  color: var(--gtv-text-muted, var(--color-text-muted, #52525b));
-  cursor: pointer;
-}
-
-.gtv-zoom-btn:hover {
-  background-color: var(--gtv-surface-muted, var(--color-surface-muted, #f4f4f5));
-  color: var(--gtv-text, var(--color-text, #18181b));
-}
-
-.gtv-zoom-btn--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.gtv-zoom-btn--disabled:hover {
-  background-color: transparent;
-  color: var(--gtv-text-muted, var(--color-text-muted, #52525b));
-}
-
-.gtv-zoom-btn--selected {
-  background-color: var(--gtv-surface-muted, var(--color-surface-muted, #f4f4f5));
-  color: var(--gtv-text, var(--color-text, #18181b));
+/* Pinch and pan replace the buttons on a touch screen (see `showZoomControls`). */
+@media (pointer: coarse) {
+  .gtv-zoom-controls--auto {
+    display: none;
+  }
 }
 
 /* Node info panel — shows a clicked node's own fields, anchored to the left of the tree
@@ -485,6 +444,83 @@
   }
 }
 
+.gtv-info-panel-grabber {
+  display: none;
+}
+
+/* A side column would leave no room for the tree in a narrow container, so the node panel docks
+   to the bottom as a sheet within thumb reach: peek covers INFO_PANEL_SHEET_PEEK_FRACTION of the
+   container (see constants.ts), full rises to the panel's usual top. */
+@container (max-width: 767px) {
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded) {
+    --gtv-info-panel-header-inset: 0px;
+    top: auto;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: 40%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    border-radius: var(--radius-panel, 1rem) var(--radius-panel, 1rem) 0 0;
+    transition: transform 200ms ease-out, visibility 0s linear 0s, height 200ms ease-out;
+  }
+
+  .gtv-info-panel--sheet-full:not(.gtv-info-panel--expanded) {
+    height: calc(100% - var(--gtv-info-panel-top, var(--layout-gutter, 0.75rem)));
+  }
+
+  .gtv-info-panel--sheet.gtv-info-panel--collapsed:not(.gtv-info-panel--expanded) {
+    transform: translateY(100%);
+    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+  }
+
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded) > .gtv-info-panel-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded) .gtv-info-panel-grabber {
+    display: flex;
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: var(--layout-touch-target, 2.75rem);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded) > .gtv-info-panel-header {
+    flex: none;
+    border-radius: 0;
+  }
+
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded) .gtv-info-panel-grabber::before {
+    content: "";
+    width: 2.25rem;
+    height: 0.25rem;
+    border-radius: 9999px;
+    background: currentColor;
+    opacity: 0.4;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gtv-info-panel--sheet:not(.gtv-info-panel--expanded),
+  .gtv-info-panel--sheet.gtv-info-panel--collapsed:not(.gtv-info-panel--expanded) {
+    transition: none;
+  }
+}
+
 .gtv-info-panel-header {
   display: flex;
   align-items: center;
@@ -1721,3 +1757,24 @@
     animation: gtv-busy-pulse 1.6s ease-in-out infinite;
   }
 }
+
+/* Finger-sized hit areas (44px, Apple HIG) on touch screens; mouse layouts keep their density. */
+@media (pointer: coarse) {
+  .gtv-info-panel-close,
+  .gtv-info-panel-previous,
+  .gtv-info-panel-zoom-in {
+    width: var(--layout-touch-target, 2.75rem);
+    height: var(--layout-touch-target, 2.75rem);
+  }
+
+  .gtv-menu-row {
+    height: var(--layout-touch-target, 2.75rem);
+    font-size: 0.875rem;
+  }
+
+  .gtv-outline-row,
+  .gtv-info-panel-child,
+  .gtv-info-panel-section-toggle {
+    min-height: var(--layout-touch-target, 2.75rem);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@behindthemusictree/genre-tree-view",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "description": "Reusable, presentational D3-based genre/hierarchy tree visualization component for React",
   "repository": {
     "type": "git",
@@ -27,6 +27,7 @@
     "dist"
   ],
   "peerDependencies": {
+    "@behindthemusictree/ui": "^0.10.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
@@ -35,6 +36,7 @@
     "react-icons": "5.7.0"
   },
   "devDependencies": {
+    "@behindthemusictree/ui": "0.10.0",
     "@codspeed/vitest-plugin": "6.0.1",
     "@testing-library/jest-dom": "7.0.0",
     "@testing-library/react": "16.3.2",
@@ -62,4 +64,4 @@
     "coverage": "vitest run --coverage",
     "bench": "vitest bench --run"
   }
-}
+}