@rtsee/ngx 0.0.115 → 0.0.117

package/dist/ngx/src/lib/theme/presentation/story-details.scss

@@ -227,43 +227,154 @@
     }
   }
 
-  /* ── HERO ACTIONS (buttons) ────────────────────────────────── */
+  /* ── READING PANEL (slides preview + start reading CTA) ─────── */
 
-  .rtsee-story-details-cover-actions {
+  .rtsee-story-details-reading-panel {
+    position: relative;
+    z-index: 3;
     display: flex;
+    flex-direction: column;
     align-items: stretch;
-    margin-top: -$rts-offset-md;
-    padding-bottom: $rts-offset-xl;
+    gap: ($rts-offset-md + $rts-offset-xsm);
+    margin: (-$rts-offset-lg) 0 $rts-offset-xl;
+    padding: ($rts-offset-md + $rts-offset-xsm);
+    border-radius: 20px;
+    border: 1px solid rgba($rts-rates-accent-purple, 0.25);
+    background:
+      radial-gradient(
+        120% 140% at 0% 0%,
+        rgba($rts-rates-accent-purple, 0.18) 0%,
+        rgba($rts-rates-accent-purple, 0) 60%
+      ),
+      linear-gradient(
+        135deg,
+        $rts-rates-bg-card-start 0%,
+        $rts-rates-bg-card-end 100%
+      );
+    backdrop-filter: blur(14px);
+    box-shadow:
+      0 12px 40px rgba(0, 0, 0, 0.35),
+      0 0 0 1px rgba(255, 255, 255, 0.02) inset;
+    animation: rtseeCardSlideUp 0.6s ease-out both;
 
-    // Mobile-first default
-    flex-direction: column;
-    gap: $rts-offset-sm;
-    width: 100%;
+    // fan the preview circles out when the panel is hovered
+    &:hover .rtsee-story-slides-preview-circle {
+      &:nth-child(1) { transform: translateX(-4px) rotate(-8deg); }
+      &:nth-child(2) { transform: translateY(-3px); }
+      &:nth-child(3) { transform: translateX(4px) rotate(8deg); }
+    }
 
-    /* Override primeng button defaults to look premium dark theme */
-    ::v-deep .p-button {
-      border-radius: 8px;
-      font-weight: 600;
-      padding: 12px 24px;
-      transition:
-        transform 0.2s ease,
-        box-shadow 0.2s ease;
-      width: 100%;
+    rtsee-story-slides-preview {
+      display: block;
     }
 
-    .rtsee-story-details-start-reading ::v-deep .p-button {
-      background: linear-gradient(135deg, $rts-rates-accent-purple 0%, $rts-rates-accent-purple-light 100%);
-      border: none;
-      box-shadow: 0 4px 16px rgba($rts-rates-accent-purple, 0.3);
+    /* ── Start reading CTA ── */
+    .rtsee-story-details-start-reading.rts-action-button {
+      display: block;
+      width: 100%;
 
-      &:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba($rts-rates-accent-purple, 0.4);
+      .p-button {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        min-height: 58px;
+        justify-content: center;
+        gap: ($rts-offset-sm + $rts-offset-xsm);
+        padding: $rts-offset-md $rts-offset-lg;
+        border: none;
+        border-radius: 14px;
+        font-size: 1.12rem;
+        font-weight: 700;
+        letter-spacing: 0.01em;
+        color: #fff;
+        background: linear-gradient(
+          135deg,
+          $rts-rates-accent-purple 0%,
+          $rts-rates-accent-purple-light 100%
+        );
+        box-shadow:
+          0 8px 24px rgba($rts-rates-accent-purple, 0.45),
+          0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+        animation: rtseeStartReadingGlow 2.8s ease-in-out infinite;
+        transition:
+          transform 0.2s ease,
+          box-shadow 0.2s ease,
+          filter 0.2s ease;
+
+        .p-button-icon {
+          font-size: 1.15rem;
+        }
+
+        // soft light sweep across the button
+        &::after {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: -60%;
+          width: 40%;
+          height: 100%;
+          background: linear-gradient(
+            100deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.28) 50%,
+            rgba(255, 255, 255, 0) 100%
+          );
+          transform: skewX(-20deg);
+          animation: rtseeStartReadingShine 3.6s ease-in-out infinite;
+          pointer-events: none;
+        }
+
+        &:hover {
+          animation: none;
+          transform: translateY(-2px);
+          filter: brightness(1.06);
+          box-shadow:
+            0 12px 30px rgba($rts-rates-accent-purple, 0.55),
+            0 0 0 1px rgba(255, 255, 255, 0.18) inset;
+        }
+
+        &:active {
+          transform: translateY(0) scale(0.99);
+        }
+
+        &:focus-visible {
+          outline: 2px solid $rts-rates-accent-purple-light;
+          outline-offset: 3px;
+        }
       }
+    }
+  }
 
-      &:active {
-        transform: translateY(0);
-        box-shadow: 0 4px 12px rgba($rts-rates-accent-purple, 0.3);
+  @keyframes rtseeStartReadingGlow {
+    0%,
+    100% {
+      box-shadow:
+        0 8px 24px rgba($rts-rates-accent-purple, 0.4),
+        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+    }
+    50% {
+      box-shadow:
+        0 8px 32px rgba($rts-rates-accent-purple, 0.65),
+        0 0 0 1px rgba(255, 255, 255, 0.12) inset;
+    }
+  }
+
+  @keyframes rtseeStartReadingShine {
+    0%,
+    60% {
+      left: -60%;
+    }
+    100% {
+      left: 130%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .rtsee-story-details-reading-panel .rtsee-story-details-start-reading .p-button {
+      animation: none;
+
+      &::after {
+        display: none;
       }
     }
   }
@@ -351,6 +462,47 @@
     white-space: pre-line;
   }
 
+  /* ── STORY ELEMENTS (author / characters / artifacts / places) ── */
+
+  .rtsee-story-details-elements {
+    margin-bottom: $rts-offset-xl;
+  }
+
+  .rtsee-story-details-elements-grid {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    gap: ($rts-offset-sm + $rts-offset-xsm);
+    // compact row thumbnails: single column on phones, auto-filled columns on wider screens
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
+    // an expanded card shouldn't stretch its row neighbours
+    align-items: start;
+  }
+
+  .rtsee-story-details-elements-item {
+    min-width: 0;
+
+    rtsee-story-element-thumbnail {
+      display: block;
+    }
+
+    // stagger card entrance
+    @for $i from 1 through 8 {
+      &:nth-child(#{$i}) .rtsee-story-element-thumbnail {
+        animation-delay: #{$i * 0.06}s;
+      }
+    }
+  }
+
+  .rtsee-story-details-elements-featured {
+    max-width: 560px;
+
+    rtsee-story-element-thumbnail {
+      display: block;
+    }
+  }
+
   /* ── COMMENTS SECTION / INTEGRATED LOGIC ─────────────────── */
 
   .rtsee-story-details-votes {
@@ -392,15 +544,13 @@
       gap: $rts-offset-lg;
     }
 
-    .rtsee-story-details-cover-actions {
-      flex-direction: row;
-      align-items: center;
+    .rtsee-story-details-elements-grid {
       gap: $rts-offset-md;
-      width: auto;
+    }
 
-      ::v-deep .p-button {
-        width: auto;
-      }
+    .rtsee-story-details-reading-panel {
+      max-width: 460px;
+      padding: $rts-offset-lg;
     }
   }
 

package/dist/ngx/src/lib/theme/presentation/story-element-thumbnail.scss

@@ -0,0 +1,214 @@
+@import "./variables";
+
+/* ── STORY ELEMENT THUMBNAIL (author / characters / artifacts / locations) ── */
+/* compact row: small image in the top-left corner, name & description on the right */
+
+// opaque approximation of the card background (used to fade the text under the toggle)
+$rts-element-thumbnail-fade-bg: #15151f;
+$rts-element-thumbnail-image-size: 56px;
+$rts-element-thumbnail-image-size-featured: 72px;
+
+.rtsee-story-element-thumbnail {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: ($rts-offset-sm + $rts-offset-xsm);
+  height: 100%;
+  padding: ($rts-offset-sm + $rts-offset-xsm);
+  background: linear-gradient(
+    135deg,
+    $rts-rates-bg-card-start 0%,
+    $rts-rates-bg-card-end 100%
+  );
+  border: 1px solid $rts-rates-border-dim;
+  border-radius: 14px;
+  backdrop-filter: blur(12px);
+  color: $rts-rates-text-primary;
+  transition:
+    transform 0.3s ease,
+    border-color 0.3s ease,
+    box-shadow 0.3s ease;
+  animation: rtseeElementThumbnailSlideUp 0.6s ease-out both;
+
+  &:hover {
+    transform: translateY(-2px);
+    border-color: rgba($rts-rates-accent-purple, 0.3);
+    box-shadow: 0 8px 28px rgba($rts-rates-accent-purple, 0.12);
+
+    .rtsee-story-element-thumbnail-image {
+      transform: scale(1.06);
+    }
+  }
+
+  .rtsee-story-element-thumbnail-media {
+    position: relative;
+    flex-shrink: 0;
+    width: $rts-element-thumbnail-image-size;
+    height: $rts-element-thumbnail-image-size;
+    margin: 0;
+    overflow: hidden;
+    border-radius: 12px;
+    border: 1px solid $rts-rates-border-med;
+    background: linear-gradient(
+      135deg,
+      rgba($rts-rates-accent-purple, 0.35) 0%,
+      rgba($rts-rates-accent-purple-light, 0.15) 100%
+    );
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
+  }
+
+  .rtsee-story-element-thumbnail-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s ease;
+  }
+
+  .rtsee-story-element-thumbnail-placeholder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: rgba(255, 255, 255, 0.85);
+    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  .rtsee-story-element-thumbnail-body {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .rtsee-story-element-thumbnail-name {
+    margin: 0;
+    font-size: 0.98rem;
+    font-weight: 700;
+    line-height: 1.3;
+    color: #fff;
+    letter-spacing: -0.01em;
+    overflow-wrap: anywhere;
+  }
+
+  .rtsee-story-element-thumbnail-description-wrapper {
+    position: relative;
+  }
+
+  .rtsee-story-element-thumbnail-description {
+    margin: 0;
+    font-size: 0.86rem;
+    line-height: 1.55;
+    color: $rts-rates-text-secondary;
+    overflow-wrap: anywhere;
+    white-space: pre-line;
+    // the full text stays in the DOM (SEO), only visually clamped
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    &.rtsee-story-element-thumbnail-description-truncatable {
+      cursor: pointer;
+    }
+  }
+
+  .rtsee-story-element-thumbnail-toggle {
+    padding: 0;
+    border: none;
+    background: none;
+    font: inherit;
+    font-size: 0.86rem;
+    line-height: 1.55;
+    font-weight: 600;
+    color: $rts-rates-accent-purple-light;
+    cursor: pointer;
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: #fff;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba($rts-rates-accent-purple-light, 0.7);
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+  }
+
+  // collapsed: sits over the end of the last visible line
+  .rtsee-story-element-thumbnail-toggle-more {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    padding-left: 2.2em;
+    background: linear-gradient(
+      90deg,
+      rgba($rts-element-thumbnail-fade-bg, 0) 0%,
+      $rts-element-thumbnail-fade-bg 1.8em
+    );
+
+    &::before {
+      content: "…\00a0";
+      color: $rts-rates-text-secondary;
+      font-weight: 400;
+    }
+  }
+
+  // expanded: the paragraph flows inline so the toggle follows the last word
+  &.rtsee-story-element-thumbnail-expanded {
+    .rtsee-story-element-thumbnail-description {
+      display: inline;
+      -webkit-line-clamp: unset;
+      line-clamp: none;
+      overflow: visible;
+    }
+
+    .rtsee-story-element-thumbnail-toggle-less {
+      margin-left: 0.4em;
+    }
+  }
+
+  /* featured variant (single item, e.g. author) */
+  &.rtsee-story-element-thumbnail-featured {
+    gap: $rts-offset-md;
+    padding: $rts-offset-md;
+
+    .rtsee-story-element-thumbnail-media {
+      width: $rts-element-thumbnail-image-size-featured;
+      height: $rts-element-thumbnail-image-size-featured;
+      border-radius: 50%;
+    }
+
+    .rtsee-story-element-thumbnail-placeholder {
+      font-size: 1.7rem;
+    }
+
+    .rtsee-story-element-thumbnail-name {
+      font-size: 1.08rem;
+    }
+
+    .rtsee-story-element-thumbnail-description {
+      -webkit-line-clamp: 4;
+      line-clamp: 4;
+    }
+  }
+}
+
+@keyframes rtseeElementThumbnailSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/ngx/src/lib/theme/presentation/story-player.scss

@@ -36,6 +36,18 @@
           //display: block;
         }
 
+        // virtual slide whose content is not loaded yet
+        .story-player-slide-placeholder {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          height: 100%;
+          background: $rts-reading-light-bg;
+          color: $rts-reading-light-muted;
+          font-size: 2rem;
+        }
+
         .rtsee-presentation-slide-controls {
           padding: $rts-offset-sm;
           display: flex;
@@ -73,3 +85,46 @@
 
 
 
+
+/* ── READING THEMES (story player only) ─────────────────────── */
+
+// dark: optimal for bedtime reading in a dark room
+.rtsee-story-player.rtsee-story-player-theme-dark {
+  background-color: $rts-reading-dark-bg;
+  color: $rts-reading-dark-text;
+  color-scheme: dark; // dark scrollbars & native controls
+
+  .rtsee-presentation-slide {
+    background-color: $rts-reading-dark-bg;
+    color: $rts-reading-dark-text;
+    transition:
+      background-color 0.3s ease,
+      color 0.3s ease;
+
+    .rtsee-presentation-slide-default {
+      .rtsee-presentation-slide-text {
+        color: $rts-reading-dark-text;
+      }
+
+      // slightly soften bright illustrations so they don't glare in the dark
+      .rtsee-presentation-slide-image-container {
+        filter: brightness(0.9);
+      }
+    }
+
+    .slide-navigation-btn.navigation-prev .p-button {
+      background: $rts-reading-dark-surface;
+      border-color: rgba(255, 255, 255, 0.08);
+      color: $rts-reading-dark-text;
+    }
+  }
+
+  .story-player-slide-container .story-player-slide-placeholder {
+    background: $rts-reading-dark-bg;
+    color: $rts-reading-dark-muted;
+  }
+}
+
+.rtsee-presentation .rtsee-presentation-story-viewer-container.rtsee-presentation-story-viewer-container-dark {
+  background-color: $rts-reading-dark-bg;
+}

package/dist/ngx/src/lib/theme/presentation/story-slides-preview.scss

@@ -0,0 +1,128 @@
+@import "./variables";
+
+/* ── STORY SLIDES PREVIEW (circles stack + "N slides" + "~N min") ── */
+
+$rts-slides-preview-circle: 52px;
+
+.rtsee-story-slides-preview {
+  display: flex;
+  align-items: center;
+  gap: $rts-offset-md;
+  color: $rts-rates-text-primary;
+
+  .rtsee-story-slides-preview-stack {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: 14px; // compensates the first circle's negative margin
+  }
+
+  .rtsee-story-slides-preview-circle {
+    position: relative;
+    display: block;
+    width: $rts-slides-preview-circle;
+    height: $rts-slides-preview-circle;
+    margin-left: -14px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 2px solid $rts-rates-bg-main;
+    box-shadow:
+      0 0 0 1px rgba($rts-rates-accent-purple, 0.45),
+      0 4px 12px rgba(0, 0, 0, 0.35);
+    background: linear-gradient(
+      135deg,
+      rgba($rts-rates-accent-purple, 0.35) 0%,
+      rgba($rts-rates-accent-purple-light, 0.15) 100%
+    );
+    transition: transform 0.3s ease;
+    // backwards: the finished animation must not override the hover transforms
+    animation: rtseeSlidesPreviewPop 0.45s ease-out backwards;
+
+    @for $i from 1 through 3 {
+      &:nth-child(#{$i}) {
+        z-index: 4 - $i;
+        animation-delay: #{$i * 0.08}s;
+      }
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.rtsee-story-slides-preview-circle-skeleton {
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0.06) 0%,
+        rgba(255, 255, 255, 0.16) 50%,
+        rgba(255, 255, 255, 0.06) 100%
+      );
+      background-size: 200% 100%;
+      animation: rtseeSlidesPreviewShimmer 1.2s linear infinite;
+    }
+  }
+
+  .rtsee-story-slides-preview-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  .rtsee-story-slides-preview-total {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 6px;
+    white-space: nowrap;
+  }
+
+  .rtsee-story-slides-preview-count {
+    font-size: 1.35rem;
+    font-weight: 800;
+    line-height: 1.1;
+    color: #fff;
+  }
+
+  .rtsee-story-slides-preview-label {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: $rts-rates-text-primary;
+  }
+
+  .rtsee-story-slides-preview-time {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: $rts-rates-text-secondary;
+    white-space: nowrap;
+
+    .pi {
+      font-size: 0.8rem;
+      opacity: 0.8;
+    }
+  }
+}
+
+@keyframes rtseeSlidesPreviewPop {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes rtseeSlidesPreviewShimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}

package/dist/ngx/src/lib/theme/presentation/variables.scss

@@ -3,6 +3,16 @@
 $story-thumb-width: 220px;
 $story-thumb-image-padding: 68%;
 
+// story player reading themes
+$rts-reading-light-bg: #ffffff;
+$rts-reading-light-text: #333333;
+$rts-reading-light-muted: #888888;
+// warm near-black + warm off-white: low glare & less blue light for bedtime reading
+$rts-reading-dark-bg: #14121a;
+$rts-reading-dark-surface: #1c1924;
+$rts-reading-dark-text: #ece6da;
+$rts-reading-dark-muted: #9a93a6;
+
 $presentation-dashboard-header-height: 50.5px;
 $presentation-dashboard-tabs-height: 51.5px;
 $presentation-header-create-button: 36.5px;