@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/style/icons/geopackage.svg

@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg3277"
+   width="400.82117"
+   height="256.85327"
+   viewBox="0 0 400.82116 256.85326"
+   sodipodi:docname="gpkg.svg"
+   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs3281" />
+  <sodipodi:namedview
+     id="namedview3279"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="0.72065244"
+     inkscape:cx="226.87774"
+     inkscape:cy="-25.671182"
+     inkscape:window-width="1392"
+     inkscape:window-height="819"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="g3283" />
+  <g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g3283"
+     transform="translate(-492.85044,-305.79343)">
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 619.92828,318.89096 -126.57794,43.6946 72.66453,24.45024 126.0702,-43.86544 z"
+       id="path27294"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 764.03284,318.26024 892.96276,361.64273 821.01494,386.8637 692.08506,342.78712 Z"
+       id="path25085"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.998017;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 692.08506,343.34388 6e-5,128.998 128.92986,45.0725 V 386.72637 Z"
+       id="path8254"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:0.995047;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 566.01488,386.86228 126.07018,-43.5184 v 129.57429 l -126.07018,43.97675 z"
+       id="path8252"
+       sodipodi:nodetypes="ccccc" />
+    <ellipse
+       style="opacity:0.981538;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.854823;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       id="path27364"
+       cx="692.78217"
+       cy="393.29343"
+       rx="87.072594"
+       ry="87.072586" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="m 566.01488,386.86228 v 130.03264 l 128.92988,45.25179 V 430.93886 Z"
+       id="path4259"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="fill:#000000"
+       d="m 609.44473,398.37299 c -4.05198,-34.47328 26.71036,-91.86359 92.38579,-90.68684 0.3461,0.56003 -0.3023,2.52565 -1.441,4.36803 -3.3312,5.39001 -2.9067,5.90672 4.1798,5.08819 3.4375,-0.39705 7.2625,-1.10509 8.5,-1.57343 2.2093,-0.83615 2.25,-0.7157 2.25,6.66904 v 7.52056 l 3.75,-0.64386 c 4.6768,-0.80298 12.6839,-6.02043 13.8642,-9.03395 0.8747,-2.23341 0.9644,-2.20472 7.2067,2.30616 5.1332,3.70942 6.0727,4.79891 5,5.7981 -2.7203,2.53381 -21.8809,7.48292 -28.9703,7.48292 h -6.8506 v -3 c 0,-4.41866 -2.2556,-3.71199 -4.7878,1.5 -1.8968,3.90423 -2.5992,4.5 -5.3053,4.5 -1.9573,0 -4.5301,1.11748 -6.9069,3 -2.712,2.14788 -4.8831,3.00435 -7.6439,3.01532 -2.1209,0.008 -4.5311,0.45153 -5.3561,0.98468 -1.3189,0.85232 -1.3113,0.97123 0.063,0.98469 0.8596,0.008 2.7,1.25281 4.0899,2.76531 2.2691,2.46935 2.4353,3.18374 1.6282,7 l -0.8988,4.25 h -9.8702 -9.8703 l -1.1957,5.75 c -1.0877,5.23056 -0.9859,6.35557 1.1267,12.45347 l 2.3223,6.70346 8.0525,-0.58568 c 4.4288,-0.32213 9.5149,-1.17823 11.3024,-1.90244 3.1056,-1.25824 3.25,-1.55788 3.25,-6.74278 0,-5.27715 0.086,-5.44318 3.125,-6.05103 1.7188,-0.34375 6.7813,-0.63488 11.25,-0.64696 5.8226,-0.0157 9.3164,-0.5628 12.329,-1.9305 3.4971,-1.58764 4.7162,-1.71523 7.25,-0.75881 1.8881,0.71267 3.046,1.85553 3.046,3.00633 0,1.02111 2.2886,5.13439 5.0857,9.1406 4.8117,6.89157 5.0316,7.48014 4.0807,10.92418 -0.9499,3.43999 -0.8758,3.64016 1.3469,3.64016 1.347,0 2.6058,-0.74775 2.9461,-1.75 0.3267,-0.9625 1.2499,-2.61372 2.0515,-3.66938 1.4179,-1.86741 1.5126,-1.8694 3.4969,-0.0736 1.3625,1.23309 2.3721,1.51312 3.0416,0.84365 0.6695,-0.66948 -1.3083,-4.27556 -5.9584,-10.86395 -5.5413,-7.85107 -6.7652,-10.22684 -6.0025,-11.65195 0.795,-1.48555 1.7622,-1.68302 5.6848,-1.16066 5.9092,0.78692 10.4432,4.38846 12.7114,10.09722 1.7399,4.37917 5.4793,7.2287 9.486,7.2287 h 2.07 l -2.0203,-3.96016 c -2.5089,-4.91789 -2.5108,-5.33027 -0.02,-4.53984 1.5354,0.48732 2,0.1797 2,-1.3242 0,-2.08394 4.6227,-3.97312 6.0712,-2.48115 1.2275,1.26439 3.6434,23.84439 2.7962,26.13467 -0.546,1.47588 -2.803,2.66242 -8.0195,4.21597 -9.8362,2.92936 -17.2431,6.30761 -21.878,9.9785 l -3.8642,3.06051 -8.8028,-1.62491 c -11.0898,-2.04705 -12.8646,-3.1545 -13.5779,-8.47266 -0.3063,-2.28355 -0.782,-4.37704 -1.0572,-4.6522 -1.4502,-1.45023 -24.526,-4.32368 -34.7628,-4.32877 -10.3284,-0.005 -11.7932,-0.22467 -13.4086,-2.00966 -1.8037,-1.99311 -1.8227,-1.98874 -3.5269,0.81357 -0.9423,1.54961 -3.9365,4.24407 -6.6537,5.98768 -4.2592,2.73313 -5.1801,3.93072 -6.6792,8.68643 -0.9563,3.03392 -1.44005,3.89197 -2.4377,4.46881 0,0 -40.91412,-14.16786 -41.07389,-14.24754 z m 123.87459,-2.20508 v -3.5 h -5.5834 c -6.577,0 -6.813,1.33159 -0.8389,4.73355 5.4219,3.08752 6.4223,2.89537 6.4223,-1.23355 z m -19.0212,-10.817 c 1.4344,-4.48605 1.1392,-5.0017 -2.3608,-4.12326 -2.2507,0.56489 -2.618,1.19141 -2.618,4.46534 0,2.13549 0.549,4.00958 1.25,4.26659 1.6896,0.61952 2.2973,-0.13162 3.7288,-4.60867 z m 2.0212,-10.28999 c 0,-0.76615 -0.675,-1.39301 -1.5,-1.39301 -0.8254,0 -1.5,0.88541 -1.5,1.96862 0,1.33904 0.4797,1.78453 1.5,1.39301 0.825,-0.31658 1.5,-1.20246 1.5,-1.96862 z m -28.0324,-39.73388 c 4.6055,-6.1 4.7781,-6.65913 2.0554,-6.65913 -2.5828,0 -5.3993,-4.34757 -4.6921,-7.24271 0.3033,-1.24151 -0.025,-3.03218 -0.7295,-3.97927 -1.1813,-1.58806 -1.4988,-1.49458 -4.0824,1.20208 -2.614,2.7284 -2.7144,3.13416 -1.5006,6.06433 0.8629,2.08323 0.9573,3.36166 0.2807,3.79793 -0.5611,0.36171 -1.7512,2.08487 -2.6448,3.82926 -1.2299,2.40107 -1.3246,3.27664 -0.3895,3.6039 0.877,0.30694 0.6828,1.05457 -0.6698,2.57838 l -1.905,2.1461 h 5.1226 c 5.0207,0 5.2028,-0.10623 9.155,-5.34087 z m -13.9455,-8.22613 c 0.6474,-1.96185 0.963,-3.78114 0.7013,-4.04286 -0.2617,-0.26172 -2.1065,0.30178 -4.0996,1.25222 -2.6238,1.25116 -3.6238,2.3669 -3.6238,4.04286 0,1.89167 0.5341,2.31478 2.9224,2.31478 2.4637,0 3.1072,-0.55991 4.0997,-3.567 z"
+       id="path27310"
+       sodipodi:nodetypes="ccsssscssssscsssscscsscccsscsssssssssssssssssssscssssssscsscsssssccscssssssssssssssssssssssscssssssss" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 694.94476,430.8164 821.01494,386.8637 V 517.73109 L 694.94476,562.14671 Z"
+       id="path6595"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 566.01486,387.20932 694.94478,430.59181 622.99696,455.81278 494.06708,411.7362 Z"
+       id="path26550"
+       sodipodi:nodetypes="ccccc" />
+    <path
+       style="opacity:0.981538;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+       d="M 821.01494,386.8637 694.437,430.5583 767.10153,455.00854 893.17173,411.1431 Z"
+       id="path27292"
+       sodipodi:nodetypes="ccccc" />
+  </g>
+</svg>

package/style/icons/pencil_solid.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+        d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"
+        fill="#616161"
+        class="jp-icon3"
+        />
+</svg>

package/style/identify.css

@@ -0,0 +1,95 @@
+.jgis-identify-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.jgis-identify-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+}
+
+.jgis-identify-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: bold;
+  font-size: var(--jp-ui-font-size1);
+  cursor: pointer;
+  line-height: 1.5rem;
+  flex-grow: 1;
+}
+
+.jgis-identify-card-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.jgis-identify-content {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem 0.5rem 0 0.5rem;
+}
+
+.jgis-identify-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.375rem;
+}
+
+.jgis-identify-property-rows > .jgis-identify-row:nth-child(odd) {
+  background-color: var(--jp-layout-color1);
+}
+
+.jgis-identify-property-rows > .jgis-identify-row:nth-child(even) {
+  background-color: var(--jp-layout-color0);
+}
+
+.jgis-identify-property-rows > .jgis-identify-row:first-child {
+  border-top-left-radius: var(--jp-border-radius);
+  border-top-right-radius: var(--jp-border-radius);
+}
+
+.jgis-identify-property-rows > .jgis-identify-row:last-child {
+  border-bottom-left-radius: var(--jp-border-radius);
+  border-bottom-right-radius: var(--jp-border-radius);
+}
+
+.jgis-identify-row-add {
+  justify-content: flex-end;
+  padding-right: 0;
+}
+
+.jgis-identify-row-editor {
+  align-items: center;
+}
+
+.jgis-identify-col-key {
+  flex: 0 0 clamp(7rem, 30%, 12rem);
+  min-width: 0;
+  max-width: clamp(7rem, 30%, 12rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.jgis-identify-col-value {
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.jgis-identify-col-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-self: center;
+}
+
+.jgis-identify-add-button {
+  justify-content: center;
+}

package/style/layerBrowser.css

@@ -9,6 +9,16 @@
   max-height: 100%;
 }
 
+@media (max-width: 768px) {
+  .jGIS-layerbrowser-FormDialog .jp-Dialog-content {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
 .jGIS-layerbrowser-FormDialog form {
   padding: 10px;
 }
@@ -87,6 +97,24 @@
   }
 }
 
+@media (max-width: 768px) {
+  .jGIS-layer-browser-grid {
+    grid-template-columns: repeat(2, minmax(0px, 1fr));
+    padding: 0.5rem;
+    gap: 0.5rem;
+  }
+
+  .jGIS-layer-browser-header {
+    padding: 0.5rem;
+    gap: 8px;
+  }
+
+  .jGIS-layer-browser-categories {
+    padding: 0 0.5rem;
+    gap: 1rem;
+  }
+}
+
 .jGIS-layer-browser-categories {
   display: flex;
   gap: 2rem;

package/style/leftPanel.css

@@ -146,6 +146,31 @@ li .lm-Menu-itemLabel {
   text-transform: capitalize;
 }
 
+/* "More options" (⋮) button — hidden by default, shown on hover or on touch devices */
+.jp-gis-layer-more-btn {
+  opacity: 0;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+
+.jp-gis-layerItem .jp-gis-layer-more-btn,
+.jp-gis-layerGroupHeader .jp-gis-layer-more-btn {
+  margin-right: 6px;
+}
+
+.jp-gis-layerItem:hover .jp-gis-layer-more-btn,
+.jp-gis-layerGroupHeader:hover .jp-gis-layer-more-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (pointer: coarse) {
+  .jp-gis-layer-more-btn {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
 #jp-drag-indicator {
   top: calc(-1 * var(--jp-border-width) + 1px);
   left: calc(-1 * var(--jp-border-width));

package/style/shared/button.css

@@ -155,3 +155,15 @@
   height: 1rem;
   width: 1rem;
 }
+
+.jgis-button[data-size='icon-md'] {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.jgis-button[data-variant='icon'] > svg,
+.jgis-button[data-variant='icon'] > [data-icon] {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}

package/style/shared/dropdownMenu.css

@@ -126,6 +126,15 @@
   opacity: 0.5;
 }
 
+.jgis-dropdown-menu-item[data-variant='destructive'] {
+  color: var(--jp-error-color1);
+}
+
+.jgis-dropdown-menu-item[data-variant='destructive']:focus {
+  background-color: color-mix(in srgb, var(--jp-error-color1) 20%, transparent);
+  color: var(--jp-ui-font-color0);
+}
+
 .jgis-dropdown-menu-checkbox-item {
   position: relative;
   display: flex;

package/style/shared/nativeSelect.css

@@ -0,0 +1,75 @@
+.jgis-native-select {
+  position: relative;
+  width: fit-content;
+}
+
+.jgis-native-select:has(select:disabled) {
+  opacity: 0.5;
+}
+
+[data-slot='native-select'] {
+  box-sizing: border-box;
+  height: 2rem;
+  width: 100%;
+  min-width: 0;
+  appearance: none;
+  border-radius: var(--jp-border-radius, 0.375rem);
+  border: 1px solid var(--jp-border-color1);
+  background-color: transparent;
+  padding: 0.25rem 2rem 0.25rem 0.625rem;
+  font-size: 0.875rem;
+  color: var(--jp-ui-font-color1);
+  transition:
+    color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  outline: none;
+  user-select: none;
+  cursor: pointer;
+}
+
+[data-slot='native-select']::selection {
+  background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+}
+
+[data-slot='native-select']:focus-visible {
+  border-color: var(--jp-brand-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-brand-color1-rgb), 0.1);
+}
+
+[data-slot='native-select'][aria-invalid='true'] {
+  border-color: var(--jp-error-color1);
+  box-shadow: 0 0 0 3px rgba(var(--jp-error-color1-rgb), 0.2);
+}
+
+[data-slot='native-select']:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+[data-slot='native-select'][data-size='sm'] {
+  height: 1.75rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  border-radius: min(var(--jp-border-radius, 0.375rem), 10px);
+}
+
+.jgis-native-select-icon {
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  right: 0.625rem;
+  width: 1rem;
+  height: 1rem;
+  transform: translateY(-50%);
+  color: var(--jp-ui-font-color2);
+  user-select: none;
+  flex-shrink: 0;
+}
+
+[data-slot='native-select-option'],
+[data-slot='native-select-optgroup'] {
+  background: Canvas;
+  color: CanvasText;
+}

package/style/shared/tabs.css

@@ -62,7 +62,7 @@
   width: 100%;
   overflow-y: auto;
   /* max-height: 480px; */
-  padding-top: 1rem;
+  padding-top: 0.5rem;
 }
 
 .jgis-tabs-content:focus-visible {

package/style/spectaProgressBar.css

@@ -66,7 +66,6 @@
   transition-delay: 0s;
 }
 
-/* Button = dot */
 .jgis-specta-progress .jgis-specta-progress-input {
   position: absolute;
   top: 50%;

package/style/storyPanel.css

@@ -1,6 +1,5 @@
 .jgis-story-viewer-panel {
   padding: 1rem;
-  padding-right: 0;
   overflow: auto;
   position: relative;
 }
@@ -11,6 +10,10 @@
   /* animation-duration is set dynamically via inline style from segment.transition.time */
 }
 
+.jgis-story-segment-container--no-segment-animation {
+  animation: none;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -128,9 +131,6 @@
   margin: 0 auto;
 }
 
-.jgis-story-viewer-content {
-}
-
 .jgis-story-viewer-content p,
 .jgis-story-viewer-content span,
 .jgis-story-viewer-content li {
@@ -172,16 +172,16 @@
   overflow: auto;
   background: linear-gradient(
     to left,
-    var(--jgis-specta-bg-color, var(--jp-layout-color0)) 49%,
+    var(--jgis-specta-panel-color, var(--jp-layout-color0)) 49%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, var(--jp-layout-color0)) 60%,
+        var(--jgis-specta-panel-color, var(--jp-layout-color0)) 60%,
         transparent
       )
       65%,
     color-mix(
         in srgb,
-        var(--jgis-specta-bg-color, var(--jp-layout-color0)) 50%,
+        var(--jgis-specta-panel-color, var(--jp-layout-color0)) 50%,
         transparent
       )
       70%,
@@ -195,13 +195,144 @@
   width: 45%;
   align-items: center;
   font-size: var(--jp-ui-font-size3);
-  padding-right: 1.7rem;
+  padding-right: 0.7rem;
   color: var(--jgis-specta-text-color, var(--jp-ui-font-color1));
-  background-color: var(--jgis-specta-bg-color, var(--jp-layout-color0));
+  background-color: var(--jgis-specta-panel-color, var(--jp-layout-color0));
   overflow-y: auto;
   max-height: 100%;
 }
 
+.jgis-story-viewer-panel-specta-mod.jgis-story-viewer-panel-specta-mod-vertical-scroll {
+  align-items: flex-start;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+}
+
+.jgis-story-stage-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+}
+
+.jgis-story-stage-overlay--sized {
+  bottom: auto;
+}
+
+.jgis-story-stage-overlay--transitioning {
+  overflow: hidden;
+}
+
+.jgis-story-segment-transition-stack {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  transform: translateY(
+    calc(
+      var(--jgis-segment-transition-progress, 0) * -1 *
+        var(--jgis-transition-translate, var(--jgis-handoff-gap-height, 100%))
+    )
+  );
+}
+
+.jgis-story-segment-transition-gap {
+  flex-shrink: 0;
+  height: var(--jgis-handoff-gap-height, 100%);
+  width: 100%;
+  pointer-events: none;
+}
+
+.jgis-story-segment-transition-stack .jgis-story-segment-overlay-pane {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.jgis-story-stage-overlay-content {
+  max-width: 60rem;
+  background-color: var(--jgis-specta-bg-color, var(--jp-layout-color0));
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.jgis-story-segment-overlay-pane {
+  position: absolute;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+}
+
+.jgis-story-markdown-scroll-pane {
+  top: 0;
+  height: auto;
+  box-sizing: border-box;
+  background-color: var(--jgis-specta-bg-color, var(--jp-layout-color0));
+}
+
+.jgis-story-segment-transition-stack .jgis-story-map-scroll-pane {
+  height: var(--jgis-handoff-gap-height, 100%);
+  min-height: var(--jgis-handoff-gap-height, 100%);
+}
+
+.jgis-story-map-scroll-pane {
+  top: 0;
+  height: 100%;
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  box-sizing: border-box;
+  background-color: transparent;
+  align-items: flex-end;
+  padding-right: 1rem;
+}
+
+.jgis-story-map-overlay-content {
+  width: 25%;
+  max-width: 30rem;
+  max-height: 100%;
+  overflow: auto;
+  padding: 0.75rem;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: var(--jgis-specta-bg-color, var(--jp-layout-color0));
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.06),
+    0 4px 12px rgba(0, 0, 0, 0.1),
+    0 12px 28px rgba(0, 0, 0, 0.08);
+}
+
+.jgis-story-segment-overlay-pane.jgis-story-markdown-scroll-pane:not(
+    .jgis-story-markdown-scroll-pane--measure
+  )
+  .jgis-story-stage-overlay-content {
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.jgis-story-markdown-measure-host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.jgis-story-markdown-scroll-pane--measure {
+  position: relative;
+  height: auto;
+}
+
+.jgis-story-virtual-track {
+  box-sizing: border-box;
+  width: 100%;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+
 .jGIS-property-panel
   .jp-FormGroup-content
   fieldset