frontend: multi-page assets

frontend/src/styles.css

@@ -393,7 +393,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 .documents-main {
   flex: 1;
   display: grid;
-  grid-template-columns: 20rem minmax(0, 1fr) 20rem;
+  grid-template-columns: 20rem minmax(0, 1fr) 30rem;
   min-height: 0;
   overflow: hidden;
 }
@@ -1590,6 +1590,7 @@ button.icon-button.ghost:hover:not([disabled]) {
   align-items: center;
   justify-content: center;
   overflow: visible;
+  position: relative;
 }
 
 .thumbnail-preview {
@@ -1672,7 +1673,7 @@ button.icon-button.ghost:hover:not([disabled]) {
 
 .preview-stack--stacked {
   width: 100%;
-  min-height: 320px;
+  min-height: 420px;
   flex-shrink: 0;
 }
 
@@ -1728,11 +1729,75 @@ button.icon-button.ghost:hover:not([disabled]) {
   box-shadow:
     inset 0 0 0 999px var(--accent-elevated),
     0 6px 18px var(--accent-elevated-strong);
-  filter: saturate(118%) brightness(1.05);
 }
 
 .preview-pane--stack {
-  min-height: 260px;
+  min-height: 460px;
+  position: relative;
+  --preview-nav-scale: 1;
+}
+
+.preview-pane__nav-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.2em;
+  height: 2.2em;
+  padding: 0.45em;
+  border-radius: 999px;
+  border: none;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+  transition: background 0.15s ease, opacity 0.15s ease;
+  pointer-events: auto;
+}
+
+.preview-pane__nav-button:hover:not([disabled]) {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.preview-pane__nav-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.preview-pane__nav-button:focus-visible {
+  outline: 2px solid var(--accent, #2684ff);
+  outline-offset: 2px;
+}
+
+.preview-pane__nav {
+  margin-top: 0.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.preview-pane__nav--overlay {
+  position: absolute;
+  bottom: 0.75rem;
+  left: 50%;
+  transform: translateX(-50%) scale(var(--preview-nav-scale, 1));
+  margin-top: 0;
+  pointer-events: none;
+  z-index: 20;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.preview-pane__nav--overlay .preview-pane__nav-button {
+  pointer-events: auto;
+  transform: scale(calc(1 / var(--preview-nav-scale, 1)));
+}
+
+.preview-pane--stack:hover .preview-pane__nav--overlay,
+.skeuo-item__card:hover .preview-pane__nav--overlay {
+  opacity: 1;
+}
+
+.skeuo-card__nav {
+  bottom: 0.5rem;
 }
 
 .bulk-tags {
@@ -2023,3 +2088,7 @@ form.inline {
   width: 0.9rem;
   height: 0.9rem;
 }
+.preview-pane__nav-button svg {
+  width: 100%;
+  height: 100%;
+}