feat(showcase): add wheel, swipe and keyboard navigation to the example gallery

- Wheel on the main viewer: horizontal deltas always switch examples;
  vertical deltas switch only at the modal scroll boundary, then stay in a
  sticky session (down = next, up = prev) until the pointer leaves the area
- Touch/pen horizontal swipe switches examples; the synthesized click after
  a swipe is swallowed so the media viewer does not open
- '[' / ']' switch examples while the gallery is expanded; ArrowLeft/Right
  stay reserved for model-level navigation
- Direction-aware slide transition on every switch for visual feedback
  (respects prefers-reduced-motion)

static/css/components/lora-modal/showcase.css

@@ -115,6 +115,9 @@
   position: relative;
   overflow: hidden;
   border-radius: var(--border-radius-sm);
+  /* Horizontal touch pans are claimed for swipe navigation (ShowcaseView);
+     vertical pans still scroll the modal */
+  touch-action: pan-y;
 }
 
 .main-media-container {
@@ -134,6 +137,32 @@
   margin-bottom: 0;
 }
 
+/* Direction-aware slide on example switches (set by updateMainDisplay) */
+.main-media-container.slide-from-right .media-wrapper {
+  animation: gallery-slide-from-right 0.25s ease;
+}
+
+.main-media-container.slide-from-left .media-wrapper {
+  animation: gallery-slide-from-left 0.25s ease;
+}
+
+@keyframes gallery-slide-from-right {
+  from { transform: translateX(32px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes gallery-slide-from-left {
+  from { transform: translateX(-32px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .main-media-container.slide-from-right .media-wrapper,
+  .main-media-container.slide-from-left .media-wrapper {
+    animation: none;
+  }
+}
+
 .main-media-container .media-wrapper img,
 .main-media-container .media-wrapper video {
   position: absolute;