@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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,300 @@
   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-mainview-stage {
+  --jgis-story-title-bar-height: 2.5rem;
+}
+
+.jgis-story-title-bar {
+  height: var(--jgis-story-title-bar-height);
+  position: relative;
+  z-index: 50;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 0.75rem;
+  box-sizing: border-box;
+  background-color: color-mix(in srgb, var(--jp-layout-color1), transparent 8%);
+  pointer-events: auto;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.jgis-story-title-bar-scroll-btn,
+.jgis-story-title-bar-menu-btn {
+  flex-shrink: 0;
+  min-width: 2rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.jgis-story-title-bar--mobile {
+  justify-content: flex-start;
+  padding: 0.5rem 0;
+  overflow: visible;
+}
+
+.jgis-story-title-bar--mobile .jgis-story-title-bar-menu-btn {
+  position: relative;
+  z-index: 1;
+}
+
+.jgis-story-title-bar-active-segment {
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+  max-width: calc(100% - 4rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+  pointer-events: none;
+  opacity: 1;
+  font-weight: bold;
+  margin-top: 3px;
+}
+
+.jgis-story-title-bar-active-segment[data-slide-direction] {
+  animation: jgis-story-title-bar-active-segment-enter 0.5s ease-out both;
+}
+
+.jgis-story-title-bar-active-segment[data-slide-direction='next'] {
+  --jgis-story-title-bar-slide-offset: 0.35rem;
+}
+
+.jgis-story-title-bar-active-segment[data-slide-direction='prev'] {
+  --jgis-story-title-bar-slide-offset: -0.35rem;
+}
+
+@keyframes jgis-story-title-bar-active-segment-enter {
+  from {
+    opacity: 0;
+    transform: translate(-50%, var(--jgis-story-title-bar-slide-offset));
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+.jgis-story-title-bar-segments {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1.5rem;
+  margin-top: 3px;
+  min-width: 0;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-x: contain;
+  touch-action: pan-x;
+  scrollbar-width: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.jgis-story-title-bar-label {
+  position: relative;
+  opacity: 0.7;
+  padding: 0.25rem 0;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.jgis-story-title-bar-active-segment::after,
+.jgis-story-title-bar-label::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 3px;
+  transition:
+    background-color 300ms ease-in,
+    width 300ms ease-in,
+    opacity 300ms ease-in;
+  background-color: transparent;
+}
+
+.jgis-story-title-bar-active-segment[data-state='active']::after,
+.jgis-story-title-bar-label[data-state='active']::after {
+  width: 100%;
+  background-color: var(--jp-inverse-layout-color2);
+}
+
+.jgis-story-title-bar-label[data-state='active'] {
+  opacity: 1;
+  font-weight: bold;
+}
+
+.jgis-story-title-bar-segment {
+  flex-shrink: 0;
+  white-space: nowrap;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+.jgis-popover-content.jgis-story-title-bar-segment-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 12rem;
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  width: calc(var(--radix-popper-available-width) - 1rem);
+  margin: 0 0.5rem;
+  box-sizing: border-box;
+}
+
+.jgis-story-title-bar-segment-menu-item {
+  width: 100%;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.jgis-story-stage-overlay {
+  position: absolute;
+  inset: 0;
+  top: var(--jgis-story-title-bar-height);
+  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-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;
+}
+
+.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
@@ -221,6 +508,40 @@
   right: 0.125rem;
 }
 
+/* Full-viewport touch scroll driver; segment UI is on ListStoryStageOverlay. */
+.jgis-story-mobile-list-scroll {
+  position: fixed;
+  inset: 0;
+  top: var(--jgis-story-title-bar-height);
+  width: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+  background: transparent;
+}
+
+/* Mobile list only (scroll driver mounted); desktop list keeps 25% map cards. */
+.jgis-mainview-stage:has(.jgis-story-mobile-list-scroll)
+  .jgis-story-map-scroll-pane {
+  padding-left: 1rem;
+}
+
+.jgis-mainview-stage:has(.jgis-story-mobile-list-scroll)
+  .jgis-story-map-overlay-content {
+  width: fit-content;
+  background-color: color-mix(
+    in srgb,
+    var(--jgis-specta-bg-color, var(--jp-layout-color0)) 90%,
+    transparent
+  );
+}
+
+.jgis-mainview-stage:has(.jgis-story-mobile-list-scroll)
+  .jgis-story-viewer-image-section {
+  opacity: 0.9;
+}
+
 /* Hierarchy: .form-group > .jp-FormGroup-content > .jp-objectFieldWrapper > #jgis-source-properties-field */
 .form-group:has(
   .jp-FormGroup-content .jp-objectFieldWrapper #jgis-source-properties-field

package/style/storySpectaArticleOverlay.css

@@ -0,0 +1,129 @@
+/* Specta article typography for list story stage overlay markdown (subset of specta/style/article.css). */
+
+.jgis-story-stage-overlay-content .specta-article-host-widget {
+  --jp-content-font-family: 'Source Serif 4', Georgia, serif;
+  --jp-code-font-family:
+    'Source Code Pro', Menlo, Monaco, 'Courier New', Courier, monospace;
+  --jp-code-font-size: 14px;
+  font-family: var(--jp-content-font-family);
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h1 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  letter-spacing: -0.014em;
+  line-height: 38px;
+  margin-bottom: 24px;
+  margin-top: 1.5em !important;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h2 {
+  font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  margin-top: 1em !important;
+  font-size: 1.6em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h3 {
+  margin-top: 1em !important;
+  font-size: 1.3em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h4 {
+  margin-top: 1em;
+  font-size: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h5 {
+  margin-top: 1em;
+  font-size: 1.1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget h6 {
+  margin-top: 1em;
+  font-size: 1em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 1.2em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget a:hover {
+  text-decoration: underline;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre {
+  background-color: var(--jp-cell-editor-background) !important;
+  padding: 32px !important;
+  border-radius: 4px !important;
+  border: 1px solid var(--jp-cell-editor-border-color) !important;
+  overflow-x: auto;
+  margin-top: 56px !important;
+  font-size: 0.85em !important;
+  line-height: 1.4 !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget pre code {
+  color: #222;
+  background-color: transparent !important;
+  padding: 0;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget code {
+  background-color: #e9ecef;
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-size: 14px !important;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 1.5em auto;
+  border-radius: 4px;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget blockquote {
+  border-left: 3px solid transparent;
+  padding-left: 16px;
+  margin: 1.2em 0;
+  font-style: italic;
+  color: var(--jp-ui-font-color2);
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget ul,
+.jgis-story-stage-overlay-content .specta-article-host-widget ol {
+  margin-bottom: 1.2em;
+  padding-left: 1.5em;
+}
+
+.jgis-story-stage-overlay-content .specta-article-host-widget li {
+  margin-bottom: 0.4em;
+}
+
+.jgis-story-stage-overlay-content
+  .specta-article-host-widget
+  .jp-MarkdownOutput {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.jgis-story-overlay-markdown-plain {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--jp-content-font-family, var(--jp-ui-font-family1));
+  font-size: 1rem;
+  line-height: 1.6;
+}