@cosmicdrift/kumiko-headless 0.123.3 → 0.124.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-headless",
-  "version": "0.123.3",
+  "version": "0.124.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>",
@@ -32,7 +32,7 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.123.3",
+    "@cosmicdrift/kumiko-framework": "0.124.0",
     "zod": "^4.4.3"
   },
   "publishConfig": {

package/src/apex/__tests__/render.test.ts

@@ -251,6 +251,25 @@ describe("renderApexPage", () => {
     expect(html).toContain('<link rel="preconnect" href="https://api.example.com" />');
   });
 
+  test("hero screenshot includes apex lightbox chrome", () => {
+    const html = renderApexPage(
+      page({
+        sections: [
+          {
+            kind: "hero",
+            title: "h",
+            tagline: "t",
+            screenshot: { src: "/shots/demo.png", alt: "Dashboard" },
+          },
+        ],
+      }),
+    );
+    expect(html).toContain('class="shot-frame"');
+    expect(html).toContain('<dialog id="apex-lightbox"');
+    expect(html).toContain("apex-lightbox");
+    expect(html).toContain(".shot-frame img");
+  });
+
   test("renders schemaJson as json-ld script tag", () => {
     const html = renderApexPage(
       page({

package/src/apex/css.ts

@@ -59,10 +59,20 @@ const HERO = `
   .hero-meta { margin-top: 1.5rem; font-size: 0.875rem; color: var(--fg-subtle); }
   .hero-meta strong { color: var(--fg-muted); font-weight: 600; }
   .shot-frame { border-radius: 0.75rem; border: 1px solid var(--border); background: var(--bg-card);
-    box-shadow: var(--shadow); overflow: hidden; }
+    box-shadow: var(--shadow); overflow: hidden; cursor: zoom-in; }
   .shot-bar { display: flex; gap: 0.4rem; padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); background: var(--bg-muted); }
   .shot-bar span { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--border); }
   .shot-frame img { display: block; width: 100%; height: auto; }
+  .apex-lightbox { border: none; padding: 0; margin: auto; max-width: 95vw; max-height: 90vh;
+    background: transparent; overflow: visible; }
+  .apex-lightbox::backdrop { background: rgba(15, 23, 42, 0.72); }
+  .apex-lightbox__img { display: block; max-width: 90vw; max-height: 85vh; width: auto; height: auto;
+    border-radius: 0.75rem; border: 1px solid var(--border); box-shadow: var(--shadow); }
+  .apex-lightbox__close { position: fixed; top: 1rem; right: 1rem; 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.5rem; line-height: 1; cursor: pointer; }
+  .apex-lightbox__close:hover { background: var(--bg-muted); }
+  .apex-dark .apex-lightbox__close { background: var(--on-dark); color: var(--primary); border-color: var(--on-dark-border); }
 `;
 
 const FEATURES = `

package/src/apex/index.ts

@@ -6,8 +6,10 @@
 
 import { escapeHtml } from "../format";
 import { APEX_STRUCTURAL_CSS } from "./css";
+import { APEX_LIGHTBOX_HTML, APEX_LIGHTBOX_SCRIPT } from "./lightbox";
 
 export { APEX_NAV_MENU_CSS, APEX_STRUCTURAL_CSS } from "./css";
+export { APEX_LIGHTBOX_HTML, APEX_LIGHTBOX_SCRIPT } from "./lightbox";
 
 export type ApexTheme = "light" | "dark";
 
@@ -522,6 +524,9 @@ export function renderApexPage(page: ApexPage): string {
     ${sections}
 
     ${renderFooter(page.footer)}
+
+    ${APEX_LIGHTBOX_HTML}
+    ${APEX_LIGHTBOX_SCRIPT}
   </body>
 </html>`;
 }

package/src/apex/lightbox.ts

@@ -0,0 +1,41 @@
+// Vanilla lightbox for Apex marketing pages — click .shot-frame img to enlarge.
+// 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>
+  <img class="apex-lightbox__img" alt="" />
+</dialog>`;
+
+/** ponytail: one delegated listener; no-op when no .shot-frame on the page. */
+export const APEX_LIGHTBOX_SCRIPT = `<script>
+(function () {
+  var dlg = document.getElementById("apex-lightbox");
+  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 || "";
+    if (typeof dlg.showModal === "function") dlg.showModal();
+  }
+  function close() {
+    if (dlg.open) dlg.close();
+  }
+  document.addEventListener("click", function (e) {
+    var t = e.target;
+    if (!(t instanceof HTMLImageElement)) return;
+    if (!t.closest(".shot-frame")) return;
+    e.preventDefault();
+    open(t.currentSrc || t.src, t.alt);
+  });
+  closeBtn.addEventListener("click", close);
+  dlg.addEventListener("click", function (e) {
+    if (e.target === dlg) close();
+  });
+  dlg.addEventListener("cancel", function (e) {
+    e.preventDefault();
+    close();
+  });
+})();
+</script>`;