@cosmicdrift/kumiko-headless 0.338.0 → 0.340.0

package/dist/apex/css.js

@@ -70,6 +70,14 @@ const HERO = `
     border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg-card); color: var(--fg);
     font-size: 1.5rem; line-height: 1; cursor: pointer; }
   .apex-lightbox__close:hover { background: var(--bg-muted); }
+  .apex-lightbox__prev, .apex-lightbox__next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 1;
+    width: 2.5rem; height: 2.5rem; border: 1px solid var(--border); border-radius: 0.5rem;
+    background: var(--bg-card); color: var(--fg); font-size: 1.75rem; line-height: 1; cursor: pointer; }
+  .apex-lightbox__prev { left: 1rem; }
+  .apex-lightbox__next { right: 1rem; }
+  .apex-lightbox__prev:hover, .apex-lightbox__next:hover { background: var(--bg-muted); }
+  .apex-lightbox__prev[hidden], .apex-lightbox__next[hidden] { display: none; }
+  .apex-dark .apex-lightbox__prev, .apex-dark .apex-lightbox__next { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark-border); }
   .apex-dark .apex-lightbox__close { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark-border); }
 `;
 const FEATURES = `

package/dist/apex/lightbox.d.ts

@@ -1,4 +1,4 @@
-export declare const APEX_LIGHTBOX_HTML = "<dialog id=\"apex-lightbox\" class=\"apex-lightbox\" aria-label=\"Screenshot preview\">\n  <button type=\"button\" class=\"apex-lightbox__close\" aria-label=\"Close\">&times;</button>\n  <img class=\"apex-lightbox__img\" alt=\"\" />\n</dialog>";
+export declare const APEX_LIGHTBOX_HTML = "<dialog id=\"apex-lightbox\" class=\"apex-lightbox\" aria-label=\"Screenshot preview\">\n  <button type=\"button\" class=\"apex-lightbox__close\" aria-label=\"Close\">&times;</button>\n  <button type=\"button\" class=\"apex-lightbox__prev\" aria-label=\"Previous screenshot\">&lsaquo;</button>\n  <button type=\"button\" class=\"apex-lightbox__next\" aria-label=\"Next screenshot\">&rsaquo;</button>\n  <img class=\"apex-lightbox__img\" alt=\"\" />\n</dialog>";
 /** ponytail: one delegated listener; no-op when no .shot-frame on the page. */
-export declare const APEX_LIGHTBOX_SCRIPT = "<script>\n(function () {\n  var dlg = document.getElementById(\"apex-lightbox\");\n  if (!dlg) return;\n  var img = dlg.querySelector(\".apex-lightbox__img\");\n  var closeBtn = dlg.querySelector(\".apex-lightbox__close\");\n  if (!img || !closeBtn) return;\n  function open(src, alt) {\n    img.src = src;\n    img.alt = alt || \"\";\n    if (typeof dlg.showModal === \"function\") dlg.showModal();\n  }\n  function close() {\n    if (dlg.open) dlg.close();\n  }\n  document.addEventListener(\"click\", function (e) {\n    var t = e.target;\n    if (!(t instanceof HTMLImageElement)) return;\n    if (!t.closest(\".shot-frame\")) return;\n    e.preventDefault();\n    open(t.currentSrc || t.src, t.alt);\n  });\n  closeBtn.addEventListener(\"click\", close);\n  dlg.addEventListener(\"click\", function (e) {\n    if (e.target === dlg) close();\n  });\n  dlg.addEventListener(\"cancel\", function (e) {\n    e.preventDefault();\n    close();\n  });\n})();\n</script>";
-export declare const APEX_LIGHTBOX_SCRIPT_CSP_HASH = "sha256-f+hHLpDuQsjmtFZCjdM13D9NaMTCyOKaawAhfLf/X9o=";
+export declare const APEX_LIGHTBOX_SCRIPT = "<script>\n(function () {\n  var dlg = document.getElementById(\"apex-lightbox\");\n  if (!dlg) return;\n  var img = dlg.querySelector(\".apex-lightbox__img\");\n  var closeBtn = dlg.querySelector(\".apex-lightbox__close\");\n  var prevBtn = dlg.querySelector(\".apex-lightbox__prev\");\n  var nextBtn = dlg.querySelector(\".apex-lightbox__next\");\n  if (!img || !closeBtn || !prevBtn || !nextBtn) return;\n  var shots = [];\n  var current = 0;\n  function show(i) {\n    var shot = shots[i];\n    current = i;\n    img.src = shot.currentSrc || shot.src;\n    img.alt = shot.alt || \"\";\n  }\n  function step(delta) {\n    if (shots.length < 2) return;\n    show((current + delta + shots.length) % shots.length);\n  }\n  function open(target) {\n    shots = Array.prototype.slice.call(document.querySelectorAll(\".shot-frame img\"));\n    var start = shots.indexOf(target);\n    if (start < 0) {\n      shots = [target];\n      start = 0;\n    }\n    show(start);\n    prevBtn.hidden = nextBtn.hidden = shots.length < 2;\n    if (typeof dlg.showModal === \"function\") dlg.showModal();\n  }\n  function close() {\n    if (dlg.open) dlg.close();\n  }\n  document.addEventListener(\"click\", function (e) {\n    var t = e.target;\n    if (!(t instanceof HTMLImageElement)) return;\n    if (!t.closest(\".shot-frame\")) return;\n    e.preventDefault();\n    open(t);\n  });\n  closeBtn.addEventListener(\"click\", close);\n  prevBtn.addEventListener(\"click\", function () { step(-1); });\n  nextBtn.addEventListener(\"click\", function () { step(1); });\n  document.addEventListener(\"keydown\", function (e) {\n    if (!dlg.open) return;\n    if (e.key === \"ArrowLeft\") {\n      e.preventDefault();\n      step(-1);\n    } else if (e.key === \"ArrowRight\") {\n      e.preventDefault();\n      step(1);\n    }\n  });\n  dlg.addEventListener(\"click\", function (e) {\n    if (e.target === dlg) close();\n  });\n  dlg.addEventListener(\"cancel\", function (e) {\n    e.preventDefault();\n    close();\n  });\n})();\n</script>";
+export declare const APEX_LIGHTBOX_SCRIPT_CSP_HASH = "sha256-CLZlqZx0zShYKXq1Qg6+VYMTEC6tqiIlNf6JPA1nLck=";

package/dist/apex/lightbox.js

@@ -1,7 +1,10 @@
-// Vanilla lightbox for Apex marketing pages — click .shot-frame img to enlarge.
+// Vanilla lightbox for Apex marketing pages — click .shot-frame img to enlarge,
+// prev/next (buttons or arrow keys) walks all .shot-frame images on the page.
 // Injected by renderApexPage; no React, no per-app wiring.
 export const APEX_LIGHTBOX_HTML = `<dialog id="apex-lightbox" class="apex-lightbox" aria-label="Screenshot preview">
   <button type="button" class="apex-lightbox__close" aria-label="Close">&times;</button>
+  <button type="button" class="apex-lightbox__prev" aria-label="Previous screenshot">&lsaquo;</button>
+  <button type="button" class="apex-lightbox__next" aria-label="Next screenshot">&rsaquo;</button>
   <img class="apex-lightbox__img" alt="" />
 </dialog>`;
 // Split from APEX_LIGHTBOX_SCRIPT so APEX_LIGHTBOX_SCRIPT_CSP_HASH hashes
@@ -13,10 +16,30 @@ const APEX_LIGHTBOX_SCRIPT_BODY = `
   if (!dlg) return;
   var img = dlg.querySelector(".apex-lightbox__img");
   var closeBtn = dlg.querySelector(".apex-lightbox__close");
-  if (!img || !closeBtn) return;
-  function open(src, alt) {
-    img.src = src;
-    img.alt = alt || "";
+  var prevBtn = dlg.querySelector(".apex-lightbox__prev");
+  var nextBtn = dlg.querySelector(".apex-lightbox__next");
+  if (!img || !closeBtn || !prevBtn || !nextBtn) return;
+  var shots = [];
+  var current = 0;
+  function show(i) {
+    var shot = shots[i];
+    current = i;
+    img.src = shot.currentSrc || shot.src;
+    img.alt = shot.alt || "";
+  }
+  function step(delta) {
+    if (shots.length < 2) return;
+    show((current + delta + shots.length) % shots.length);
+  }
+  function open(target) {
+    shots = Array.prototype.slice.call(document.querySelectorAll(".shot-frame img"));
+    var start = shots.indexOf(target);
+    if (start < 0) {
+      shots = [target];
+      start = 0;
+    }
+    show(start);
+    prevBtn.hidden = nextBtn.hidden = shots.length < 2;
     if (typeof dlg.showModal === "function") dlg.showModal();
   }
   function close() {
@@ -27,9 +50,21 @@ const APEX_LIGHTBOX_SCRIPT_BODY = `
     if (!(t instanceof HTMLImageElement)) return;
     if (!t.closest(".shot-frame")) return;
     e.preventDefault();
-    open(t.currentSrc || t.src, t.alt);
+    open(t);
   });
   closeBtn.addEventListener("click", close);
+  prevBtn.addEventListener("click", function () { step(-1); });
+  nextBtn.addEventListener("click", function () { step(1); });
+  document.addEventListener("keydown", function (e) {
+    if (!dlg.open) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      step(-1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      step(1);
+    }
+  });
   dlg.addEventListener("click", function (e) {
     if (e.target === dlg) close();
   });
@@ -43,4 +78,4 @@ const APEX_LIGHTBOX_SCRIPT_BODY = `
 export const APEX_LIGHTBOX_SCRIPT = `<script>${APEX_LIGHTBOX_SCRIPT_BODY}</script>`;
 // CSP hash-source for the inline script above; apex output is often
 // pre-rendered, so a per-request nonce can't work. Guarded by lightbox.test.ts.
-export const APEX_LIGHTBOX_SCRIPT_CSP_HASH = "sha256-f+hHLpDuQsjmtFZCjdM13D9NaMTCyOKaawAhfLf/X9o=";
+export const APEX_LIGHTBOX_SCRIPT_CSP_HASH = "sha256-CLZlqZx0zShYKXq1Qg6+VYMTEC6tqiIlNf6JPA1nLck=";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-headless",
-  "version": "0.338.0",
+  "version": "0.340.0",
   "description": "Headless UI logic for Kumiko — Dispatcher contract, Form-Controller, View-Model, Nav-Resolver. Plattform- und React-frei; jeder Renderer (renderer, renderer-web, renderer-native, …) komponiert darauf.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -36,7 +36,7 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.338.0",
+    "@cosmicdrift/kumiko-framework": "0.340.0",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
   },