@deckspec/renderer 0.1.0 → 0.1.2

package/dist/viewer-css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Viewer CSS — slide viewer shell.
+ *
+ * Options (body classes):
+ *   .maximum  — scale slide to fill viewport (default on)
+ *   .grid-on  — thumbnail overview grid
+ *
+ * Fullscreen always forces maximum scaling.
+ */
+export declare const viewerCSS = "\n/* ================================================================ */\n/* Reset                                                            */\n/* ================================================================ */\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n/* ================================================================ */\n/* Body \u2014 default: single-slide, centered on black                  */\n/* ================================================================ */\nbody {\n  background: #000;\n  margin: 0;\n  overflow: hidden;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-family: system-ui, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* ================================================================ */\n/* Slide outer \u2014 scaling container (container queries)              */\n/* ================================================================ */\n.slide-outer {\n  container-type: size;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  background: var(--color-background, #fff);\n  position: absolute;\n  visibility: hidden;\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.slide-outer.active {\n  position: relative;\n  visibility: visible;\n  pointer-events: auto;\n}\n\n/* .slide is scaled by JS (resizeObserver sets --s on .slide-outer) */\n.slide-outer .slide,\n.slide-outer .slide-pad,\n.slide-outer .slide-stack,\n.slide-outer .slide-center,\n.slide-outer .slide-white {\n  transform-origin: center center;\n  transform: scale(var(--s, 1));\n  flex-shrink: 0;\n}\n\n/* ================================================================ */\n/* Maximum OFF \u2014 fit viewport but cap at 1200px                     */\n/* ================================================================ */\nbody:not(.maximum):not(.grid-on) .slide-outer.active {\n  width: min(100vw, calc(100vh * 16 / 9), 1200px);\n}\n\n/* ================================================================ */\n/* Maximum ON \u2014 fill viewport (aspect-ratio preserved)              */\n/* ================================================================ */\nbody.maximum:not(.grid-on) .slide-outer.active {\n  width: min(100vw, calc(100vh * 16 / 9));\n}\n\n/* ================================================================ */\n/* Grid ON \u2014 thumbnail overview                                     */\n/* ================================================================ */\nbody.grid-on {\n  overflow: auto;\n  height: auto;\n  display: block;\n  padding: 1.5rem;\n  background: #111;\n}\n\nbody.grid-on .slide-outer {\n  position: relative;\n  visibility: visible;\n  pointer-events: auto;\n  width: 100%;\n  border-radius: 8px;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.3);\n  cursor: pointer;\n  transition: box-shadow 0.15s, outline 0.15s;\n  outline: 2px solid transparent;\n}\n\nbody.grid-on .slide-outer:hover {\n  box-shadow: 0 4px 20px rgba(0,0,0,0.5);\n  outline-color: var(--color-primary, #2563eb);\n}\n\n.grid-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 1rem;\n  max-width: 1600px;\n  margin: 0 auto;\n}\n\n/* ================================================================ */\n/* Navigation Controls                                              */\n/* ================================================================ */\n.nav-controls {\n  position: fixed;\n  bottom: 1.5rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  gap: 0.25rem;\n  align-items: center;\n  background: rgba(0, 0, 0, 0.75);\n  padding: 0.375rem;\n  border-radius: 2rem;\n  color: #fff;\n  font-family: system-ui, sans-serif;\n  font-size: 0.8rem;\n  z-index: 1000;\n  user-select: none;\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n}\n\n.nav-controls.visible {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.nav-controls button {\n  background: transparent;\n  border: none;\n  color: #fff;\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: background 0.15s;\n  position: relative;\n}\n\n.nav-controls button:hover {\n  background: rgba(255, 255, 255, 0.18);\n}\n\n.nav-controls button.active {\n  background: rgba(255, 255, 255, 0.22);\n}\n\n.nav-controls button svg {\n  width: 16px;\n  height: 16px;\n}\n\n.nav-controls .slide-counter {\n  min-width: 3.5rem;\n  text-align: center;\n  font-variant-numeric: tabular-nums;\n  font-size: 0.75rem;\n  opacity: 0.8;\n}\n\n.nav-controls .divider {\n  width: 1px;\n  height: 1.25rem;\n  background: rgba(255, 255, 255, 0.2);\n  margin: 0 0.125rem;\n}\n\n/* -- Home link ---------------------------------------------------- */\n.nav-home {\n  color: rgba(255, 255, 255, 0.7);\n  text-decoration: none;\n  font-size: 0.85rem;\n  padding: 0 0.375rem;\n  display: flex;\n  align-items: center;\n}\n\n.nav-home:hover {\n  color: #fff;\n}\n\n/* -- More menu ---------------------------------------------------- */\n.nav-menu {\n  position: absolute;\n  bottom: calc(100% + 0.5rem);\n  right: 0.375rem;\n  background: rgba(0, 0, 0, 0.85);\n  backdrop-filter: blur(12px);\n  -webkit-backdrop-filter: blur(12px);\n  border-radius: 0.75rem;\n  padding: 0.375rem;\n  min-width: 10rem;\n  display: none;\n  flex-direction: column;\n  gap: 0.125rem;\n}\n\n.nav-menu.open {\n  display: flex;\n}\n\n.nav-menu button {\n  width: 100%;\n  height: auto;\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.8rem;\n  gap: 0.5rem;\n  justify-content: flex-start;\n  white-space: nowrap;\n}\n\n.nav-menu button svg {\n  width: 14px;\n  height: 14px;\n  flex-shrink: 0;\n}\n\n.nav-menu button .menu-label {\n  opacity: 0.9;\n}\n\n.nav-menu button .menu-key {\n  margin-left: auto;\n  opacity: 0.4;\n  font-size: 0.7rem;\n}\n\n/* ================================================================ */\n/* State Badges \u2014 visible in grid mode                              */\n/* ================================================================ */\n.state-badge {\n  display: none;\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.2rem 0.5rem;\n  border-radius: 1rem;\n  font-size: 0.65rem;\n  font-weight: 600;\n  letter-spacing: 0.02em;\n  color: #fff;\n  z-index: 10;\n  pointer-events: none;\n  text-transform: uppercase;\n}\n\nbody.grid-on .state-badge {\n  display: flex;\n}\n\n.state-badge[data-badge=\"generated\"] { background: #6b7280; }\n.state-badge[data-badge=\"approved\"]  { background: #16a34a; }\n.state-badge[data-badge=\"locked\"]    { background: #7c3aed; }\n.state-badge[data-badge=\"derived\"]   { background: #3b82f6; }\n";
+//# sourceMappingURL=viewer-css.d.ts.map

package/dist/viewer-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-css.d.ts","sourceRoot":"","sources":["../src/viewer-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,SAAS,0vNA8QrB,CAAC"}

package/dist/viewer-css.js

@@ -0,0 +1,281 @@
+/**
+ * Viewer CSS — slide viewer shell.
+ *
+ * Options (body classes):
+ *   .maximum  — scale slide to fill viewport (default on)
+ *   .grid-on  — thumbnail overview grid
+ *
+ * Fullscreen always forces maximum scaling.
+ */
+export const viewerCSS = /* css */ `
+/* ================================================================ */
+/* Reset                                                            */
+/* ================================================================ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ================================================================ */
+/* Body — default: single-slide, centered on black                  */
+/* ================================================================ */
+body {
+  background: #000;
+  margin: 0;
+  overflow: hidden;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ================================================================ */
+/* Slide outer — scaling container (container queries)              */
+/* ================================================================ */
+.slide-outer {
+  container-type: size;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  background: var(--color-background, #fff);
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.slide-outer.active {
+  position: relative;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+/* .slide is scaled by JS (resizeObserver sets --s on .slide-outer) */
+.slide-outer .slide,
+.slide-outer .slide-pad,
+.slide-outer .slide-stack,
+.slide-outer .slide-center,
+.slide-outer .slide-white {
+  transform-origin: center center;
+  transform: scale(var(--s, 1));
+  flex-shrink: 0;
+}
+
+/* ================================================================ */
+/* Maximum OFF — fit viewport but cap at 1200px                     */
+/* ================================================================ */
+body:not(.maximum):not(.grid-on) .slide-outer.active {
+  width: min(100vw, calc(100vh * 16 / 9), 1200px);
+}
+
+/* ================================================================ */
+/* Maximum ON — fill viewport (aspect-ratio preserved)              */
+/* ================================================================ */
+body.maximum:not(.grid-on) .slide-outer.active {
+  width: min(100vw, calc(100vh * 16 / 9));
+}
+
+/* ================================================================ */
+/* Grid ON — thumbnail overview                                     */
+/* ================================================================ */
+body.grid-on {
+  overflow: auto;
+  height: auto;
+  display: block;
+  padding: 1.5rem;
+  background: #111;
+}
+
+body.grid-on .slide-outer {
+  position: relative;
+  visibility: visible;
+  pointer-events: auto;
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  cursor: pointer;
+  transition: box-shadow 0.15s, outline 0.15s;
+  outline: 2px solid transparent;
+}
+
+body.grid-on .slide-outer:hover {
+  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+  outline-color: var(--color-primary, #2563eb);
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  max-width: 1600px;
+  margin: 0 auto;
+}
+
+/* ================================================================ */
+/* Navigation Controls                                              */
+/* ================================================================ */
+.nav-controls {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.75);
+  padding: 0.375rem;
+  border-radius: 2rem;
+  color: #fff;
+  font-family: system-ui, sans-serif;
+  font-size: 0.8rem;
+  z-index: 1000;
+  user-select: none;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s;
+}
+
+.nav-controls.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.nav-controls button {
+  background: transparent;
+  border: none;
+  color: #fff;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s;
+  position: relative;
+}
+
+.nav-controls button:hover {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.nav-controls button.active {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.nav-controls button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.nav-controls .slide-counter {
+  min-width: 3.5rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.nav-controls .divider {
+  width: 1px;
+  height: 1.25rem;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 0.125rem;
+}
+
+/* -- Home link ---------------------------------------------------- */
+.nav-home {
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  font-size: 0.85rem;
+  padding: 0 0.375rem;
+  display: flex;
+  align-items: center;
+}
+
+.nav-home:hover {
+  color: #fff;
+}
+
+/* -- More menu ---------------------------------------------------- */
+.nav-menu {
+  position: absolute;
+  bottom: calc(100% + 0.5rem);
+  right: 0.375rem;
+  background: rgba(0, 0, 0, 0.85);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border-radius: 0.75rem;
+  padding: 0.375rem;
+  min-width: 10rem;
+  display: none;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.nav-menu.open {
+  display: flex;
+}
+
+.nav-menu button {
+  width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8rem;
+  gap: 0.5rem;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.nav-menu button svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+}
+
+.nav-menu button .menu-label {
+  opacity: 0.9;
+}
+
+.nav-menu button .menu-key {
+  margin-left: auto;
+  opacity: 0.4;
+  font-size: 0.7rem;
+}
+
+/* ================================================================ */
+/* State Badges — visible in grid mode                              */
+/* ================================================================ */
+.state-badge {
+  display: none;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.5rem;
+  border-radius: 1rem;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: #fff;
+  z-index: 10;
+  pointer-events: none;
+  text-transform: uppercase;
+}
+
+body.grid-on .state-badge {
+  display: flex;
+}
+
+.state-badge[data-badge="generated"] { background: #6b7280; }
+.state-badge[data-badge="approved"]  { background: #16a34a; }
+.state-badge[data-badge="locked"]    { background: #7c3aed; }
+.state-badge[data-badge="derived"]   { background: #3b82f6; }
+`;
+//# sourceMappingURL=viewer-css.js.map

package/dist/viewer-css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-css.js","sourceRoot":"","sources":["../src/viewer-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QlC,CAAC"}

package/dist/viewer-js.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Viewer JS — option-based slide viewer.
+ *
+ * Options (toggleable):
+ *   maximum (M) — scale slide to fill viewport (default: on)
+ *   grid    (G) — thumbnail overview
+ *
+ * Fullscreen (F) always forces maximum scaling.
+ * Keyboard: ←/→/Space navigate, Home/End, Esc exit grid/fullscreen.
+ * URL params: ?page=N&maximum=off&grid=on
+ */
+export declare const viewerJS = "\n(function() {\n  var slides = document.querySelectorAll('.slide-outer');\n  var total = slides.length;\n  if (total === 0) return;\n\n  var current = 0;\n  var body = document.body;\n  var counter = document.getElementById('current-slide');\n  var btnPrev = document.getElementById('btn-prev');\n  var btnNext = document.getElementById('btn-next');\n  var btnFullscreen = document.getElementById('btn-fullscreen');\n  var btnMaximum = document.getElementById('btn-maximum');\n  var btnGrid = document.getElementById('btn-grid');\n  var btnMore = document.getElementById('btn-more');\n  var navMenu = document.getElementById('nav-menu');\n  var nav = document.getElementById('nav-controls');\n\n  var ICON_FULLSCREEN = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 3H5a2 2 0 0 0-2 2v3\"/><path d=\"M21 8V5a2 2 0 0 0-2-2h-3\"/><path d=\"M3 16v3a2 2 0 0 0 2 2h3\"/><path d=\"M16 21h3a2 2 0 0 0 2-2v-3\"/></svg>';\n  var ICON_SHRINK = '<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 14h6v6\"/><path d=\"M20 10h-6V4\"/><path d=\"M14 10l7-7\"/><path d=\"M3 21l7-7\"/></svg>';\n\n  /* -- State ------------------------------------------------------- */\n  var maximum = true;\n  var gridOn = false;\n\n  /* -- URL params -------------------------------------------------- */\n  var params = new URLSearchParams(window.location.search);\n  var initialPage = parseInt(params.get('page'), 10);\n  if (initialPage >= 1 && initialPage <= total) current = initialPage - 1;\n  if (params.get('maximum') === 'off') maximum = false;\n  if (params.get('grid') === 'on') gridOn = true;\n\n  /* -- Nav auto-hide ----------------------------------------------- */\n  var hideTimer = null;\n  function showNav() {\n    nav.classList.add('visible');\n    clearTimeout(hideTimer);\n    hideTimer = setTimeout(function() { nav.classList.remove('visible'); }, 3000);\n  }\n  document.addEventListener('mousemove', showNav);\n  document.addEventListener('touchstart', showNav);\n  nav.addEventListener('mouseenter', function() { clearTimeout(hideTimer); nav.classList.add('visible'); });\n  nav.addEventListener('mouseleave', function() { hideTimer = setTimeout(function() { nav.classList.remove('visible'); }, 3000); });\n\n  /* -- URL sync ---------------------------------------------------- */\n  function syncURL() {\n    var p = new URLSearchParams();\n    p.set('page', current + 1);\n    if (!maximum) p.set('maximum', 'off');\n    if (gridOn) p.set('grid', 'on');\n    var qs = p.toString();\n    var url = window.location.pathname + (qs ? '?' + qs : '');\n    history.replaceState(null, '', url);\n  }\n\n  /* -- Apply state to DOM ------------------------------------------ */\n  function applyState() {\n    body.classList.toggle('maximum', maximum && !gridOn);\n    body.classList.toggle('grid-on', gridOn);\n\n    if (gridOn) {\n      /* Move slides into grid container */\n      if (!gridWrap.parentNode) {\n        body.insertBefore(gridWrap, nav);\n      }\n      slides.forEach(function(s) {\n        s.classList.remove('active');\n        gridWrap.appendChild(s);\n      });\n      gridWrap.style.display = '';\n    } else {\n      /* Move slides back to body */\n      if (gridWrap.parentNode) {\n        var frag = document.createDocumentFragment();\n        while (gridWrap.firstChild) frag.appendChild(gridWrap.firstChild);\n        body.insertBefore(frag, nav);\n        gridWrap.style.display = 'none';\n      }\n      showSlide(current);\n    }\n\n    updateMenuLabels();\n    syncURL();\n  }\n\n  /* -- Slide navigation -------------------------------------------- */\n  function showSlide(index) {\n    if (index < 0) index = 0;\n    if (index >= total) index = total - 1;\n    current = index;\n    counter.textContent = (current + 1);\n    slides.forEach(function(s, i) { s.classList.toggle('active', i === current); });\n    syncURL();\n  }\n\n  /* -- Grid container ---------------------------------------------- */\n  var gridWrap = document.createElement('div');\n  gridWrap.className = 'grid-container';\n  gridWrap.style.display = 'none';\n\n  /* -- Toggle functions -------------------------------------------- */\n  function toggleMaximum() {\n    maximum = !maximum;\n    applyState();\n  }\n\n  function toggleGrid() {\n    gridOn = !gridOn;\n    if (document.fullscreenElement) document.exitFullscreen();\n    applyState();\n  }\n\n  function toggleFullscreen() {\n    if (document.fullscreenElement) {\n      document.exitFullscreen();\n    } else {\n      if (gridOn) { gridOn = false; }\n      maximum = true;\n      applyState();\n      if (body.requestFullscreen) body.requestFullscreen();\n    }\n  }\n\n  document.addEventListener('fullscreenchange', function() {\n    if (document.fullscreenElement) {\n      btnFullscreen.innerHTML = ICON_SHRINK;\n      btnFullscreen.classList.add('active');\n    } else {\n      btnFullscreen.innerHTML = ICON_FULLSCREEN;\n      btnFullscreen.classList.remove('active');\n    }\n  });\n\n  /* -- More menu --------------------------------------------------- */\n  function closeMenu() { navMenu.classList.remove('open'); }\n  function toggleMenu(e) {\n    e.stopPropagation();\n    navMenu.classList.toggle('open');\n  }\n  btnMore.addEventListener('click', toggleMenu);\n  document.addEventListener('click', function(e) {\n    if (!navMenu.contains(e.target) && e.target !== btnMore) closeMenu();\n  });\n  navMenu.addEventListener('click', function(e) { e.stopPropagation(); });\n\n  /* -- Grid click to single view ----------------------------------- */\n  slides.forEach(function(s, i) {\n    s.addEventListener('click', function() {\n      if (!gridOn) return;\n      current = i;\n      gridOn = false;\n      applyState();\n    });\n  });\n\n  /* -- Button events ----------------------------------------------- */\n  btnPrev.addEventListener('click', function(e) { e.stopPropagation(); showSlide(current - 1); });\n  btnNext.addEventListener('click', function(e) { e.stopPropagation(); showSlide(current + 1); });\n  btnMaximum.addEventListener('click', function() { closeMenu(); toggleMaximum(); });\n  btnGrid.addEventListener('click', function() { closeMenu(); toggleGrid(); });\n  btnFullscreen.addEventListener('click', toggleFullscreen);\n\n  /* -- Keyboard ---------------------------------------------------- */\n  document.addEventListener('keydown', function(e) {\n    showNav();\n    if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); showSlide(current + 1); }\n    else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); showSlide(current - 1); }\n    else if (e.key === 'Home') { e.preventDefault(); showSlide(0); }\n    else if (e.key === 'End') { e.preventDefault(); showSlide(total - 1); }\n    else if (e.key === 'm' || e.key === 'M') { toggleMaximum(); }\n    else if (e.key === 'g' || e.key === 'G') { toggleGrid(); }\n    else if (e.key === 'f' || e.key === 'F') { toggleFullscreen(); }\n    else if (e.key === 'Escape') {\n      closeMenu();\n      if (document.fullscreenElement) document.exitFullscreen();\n      else if (gridOn) { gridOn = false; applyState(); }\n    }\n  });\n\n  /* -- Menu labels ------------------------------------------------- */\n  function updateMenuLabels() {\n    var maxLabel = btnMaximum.querySelector('.menu-label');\n    if (maxLabel) maxLabel.textContent = maximum ? 'Maximum off' : 'Maximum on';\n    var gridLabel = btnGrid.querySelector('.menu-label');\n    if (gridLabel) gridLabel.textContent = gridOn ? 'Grid off' : 'Grid on';\n  }\n\n  /* -- Slide scaling via ResizeObserver ----------------------------- */\n  var SLIDE_W = 1200;\n  var SLIDE_H = 675;\n\n  function updateScale(outer) {\n    var w = outer.clientWidth;\n    var h = outer.clientHeight;\n    if (w === 0 || h === 0) return;\n    var s = Math.min(w / SLIDE_W, h / SLIDE_H);\n    outer.style.setProperty('--s', s);\n  }\n\n  var ro = new ResizeObserver(function(entries) {\n    entries.forEach(function(entry) { updateScale(entry.target); });\n  });\n\n  slides.forEach(function(s) { ro.observe(s); });\n\n  /* -- State badges ------------------------------------------------ */\n  var BADGE_LABELS = { generated: 'GEN', approved: 'APR', locked: 'LCK', derived: 'DER' };\n  slides.forEach(function(s) {\n    var state = s.getAttribute('data-state') || 'generated';\n    var badge = document.createElement('span');\n    badge.className = 'state-badge';\n    badge.setAttribute('data-badge', state);\n    badge.textContent = BADGE_LABELS[state] || state.toUpperCase().slice(0, 3);\n    s.appendChild(badge);\n  });\n\n  /* -- Init -------------------------------------------------------- */\n  applyState();\n  showNav();\n})();\n";
+//# sourceMappingURL=viewer-js.d.ts.map

package/dist/viewer-js.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-js.d.ts","sourceRoot":"","sources":["../src/viewer-js.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,6rRA4NpB,CAAC"}

package/dist/viewer-js.js

@@ -0,0 +1,233 @@
+/**
+ * Viewer JS — option-based slide viewer.
+ *
+ * Options (toggleable):
+ *   maximum (M) — scale slide to fill viewport (default: on)
+ *   grid    (G) — thumbnail overview
+ *
+ * Fullscreen (F) always forces maximum scaling.
+ * Keyboard: ←/→/Space navigate, Home/End, Esc exit grid/fullscreen.
+ * URL params: ?page=N&maximum=off&grid=on
+ */
+export const viewerJS = /* js */ `
+(function() {
+  var slides = document.querySelectorAll('.slide-outer');
+  var total = slides.length;
+  if (total === 0) return;
+
+  var current = 0;
+  var body = document.body;
+  var counter = document.getElementById('current-slide');
+  var btnPrev = document.getElementById('btn-prev');
+  var btnNext = document.getElementById('btn-next');
+  var btnFullscreen = document.getElementById('btn-fullscreen');
+  var btnMaximum = document.getElementById('btn-maximum');
+  var btnGrid = document.getElementById('btn-grid');
+  var btnMore = document.getElementById('btn-more');
+  var navMenu = document.getElementById('nav-menu');
+  var nav = document.getElementById('nav-controls');
+
+  var ICON_FULLSCREEN = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg>';
+  var ICON_SHRINK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 14h6v6"/><path d="M20 10h-6V4"/><path d="M14 10l7-7"/><path d="M3 21l7-7"/></svg>';
+
+  /* -- State ------------------------------------------------------- */
+  var maximum = true;
+  var gridOn = false;
+
+  /* -- URL params -------------------------------------------------- */
+  var params = new URLSearchParams(window.location.search);
+  var initialPage = parseInt(params.get('page'), 10);
+  if (initialPage >= 1 && initialPage <= total) current = initialPage - 1;
+  if (params.get('maximum') === 'off') maximum = false;
+  if (params.get('grid') === 'on') gridOn = true;
+
+  /* -- Nav auto-hide ----------------------------------------------- */
+  var hideTimer = null;
+  function showNav() {
+    nav.classList.add('visible');
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(function() { nav.classList.remove('visible'); }, 3000);
+  }
+  document.addEventListener('mousemove', showNav);
+  document.addEventListener('touchstart', showNav);
+  nav.addEventListener('mouseenter', function() { clearTimeout(hideTimer); nav.classList.add('visible'); });
+  nav.addEventListener('mouseleave', function() { hideTimer = setTimeout(function() { nav.classList.remove('visible'); }, 3000); });
+
+  /* -- URL sync ---------------------------------------------------- */
+  function syncURL() {
+    var p = new URLSearchParams();
+    p.set('page', current + 1);
+    if (!maximum) p.set('maximum', 'off');
+    if (gridOn) p.set('grid', 'on');
+    var qs = p.toString();
+    var url = window.location.pathname + (qs ? '?' + qs : '');
+    history.replaceState(null, '', url);
+  }
+
+  /* -- Apply state to DOM ------------------------------------------ */
+  function applyState() {
+    body.classList.toggle('maximum', maximum && !gridOn);
+    body.classList.toggle('grid-on', gridOn);
+
+    if (gridOn) {
+      /* Move slides into grid container */
+      if (!gridWrap.parentNode) {
+        body.insertBefore(gridWrap, nav);
+      }
+      slides.forEach(function(s) {
+        s.classList.remove('active');
+        gridWrap.appendChild(s);
+      });
+      gridWrap.style.display = '';
+    } else {
+      /* Move slides back to body */
+      if (gridWrap.parentNode) {
+        var frag = document.createDocumentFragment();
+        while (gridWrap.firstChild) frag.appendChild(gridWrap.firstChild);
+        body.insertBefore(frag, nav);
+        gridWrap.style.display = 'none';
+      }
+      showSlide(current);
+    }
+
+    updateMenuLabels();
+    syncURL();
+  }
+
+  /* -- Slide navigation -------------------------------------------- */
+  function showSlide(index) {
+    if (index < 0) index = 0;
+    if (index >= total) index = total - 1;
+    current = index;
+    counter.textContent = (current + 1);
+    slides.forEach(function(s, i) { s.classList.toggle('active', i === current); });
+    syncURL();
+  }
+
+  /* -- Grid container ---------------------------------------------- */
+  var gridWrap = document.createElement('div');
+  gridWrap.className = 'grid-container';
+  gridWrap.style.display = 'none';
+
+  /* -- Toggle functions -------------------------------------------- */
+  function toggleMaximum() {
+    maximum = !maximum;
+    applyState();
+  }
+
+  function toggleGrid() {
+    gridOn = !gridOn;
+    if (document.fullscreenElement) document.exitFullscreen();
+    applyState();
+  }
+
+  function toggleFullscreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      if (gridOn) { gridOn = false; }
+      maximum = true;
+      applyState();
+      if (body.requestFullscreen) body.requestFullscreen();
+    }
+  }
+
+  document.addEventListener('fullscreenchange', function() {
+    if (document.fullscreenElement) {
+      btnFullscreen.innerHTML = ICON_SHRINK;
+      btnFullscreen.classList.add('active');
+    } else {
+      btnFullscreen.innerHTML = ICON_FULLSCREEN;
+      btnFullscreen.classList.remove('active');
+    }
+  });
+
+  /* -- More menu --------------------------------------------------- */
+  function closeMenu() { navMenu.classList.remove('open'); }
+  function toggleMenu(e) {
+    e.stopPropagation();
+    navMenu.classList.toggle('open');
+  }
+  btnMore.addEventListener('click', toggleMenu);
+  document.addEventListener('click', function(e) {
+    if (!navMenu.contains(e.target) && e.target !== btnMore) closeMenu();
+  });
+  navMenu.addEventListener('click', function(e) { e.stopPropagation(); });
+
+  /* -- Grid click to single view ----------------------------------- */
+  slides.forEach(function(s, i) {
+    s.addEventListener('click', function() {
+      if (!gridOn) return;
+      current = i;
+      gridOn = false;
+      applyState();
+    });
+  });
+
+  /* -- Button events ----------------------------------------------- */
+  btnPrev.addEventListener('click', function(e) { e.stopPropagation(); showSlide(current - 1); });
+  btnNext.addEventListener('click', function(e) { e.stopPropagation(); showSlide(current + 1); });
+  btnMaximum.addEventListener('click', function() { closeMenu(); toggleMaximum(); });
+  btnGrid.addEventListener('click', function() { closeMenu(); toggleGrid(); });
+  btnFullscreen.addEventListener('click', toggleFullscreen);
+
+  /* -- Keyboard ---------------------------------------------------- */
+  document.addEventListener('keydown', function(e) {
+    showNav();
+    if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') { e.preventDefault(); showSlide(current + 1); }
+    else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { e.preventDefault(); showSlide(current - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); showSlide(0); }
+    else if (e.key === 'End') { e.preventDefault(); showSlide(total - 1); }
+    else if (e.key === 'm' || e.key === 'M') { toggleMaximum(); }
+    else if (e.key === 'g' || e.key === 'G') { toggleGrid(); }
+    else if (e.key === 'f' || e.key === 'F') { toggleFullscreen(); }
+    else if (e.key === 'Escape') {
+      closeMenu();
+      if (document.fullscreenElement) document.exitFullscreen();
+      else if (gridOn) { gridOn = false; applyState(); }
+    }
+  });
+
+  /* -- Menu labels ------------------------------------------------- */
+  function updateMenuLabels() {
+    var maxLabel = btnMaximum.querySelector('.menu-label');
+    if (maxLabel) maxLabel.textContent = maximum ? 'Maximum off' : 'Maximum on';
+    var gridLabel = btnGrid.querySelector('.menu-label');
+    if (gridLabel) gridLabel.textContent = gridOn ? 'Grid off' : 'Grid on';
+  }
+
+  /* -- Slide scaling via ResizeObserver ----------------------------- */
+  var SLIDE_W = 1200;
+  var SLIDE_H = 675;
+
+  function updateScale(outer) {
+    var w = outer.clientWidth;
+    var h = outer.clientHeight;
+    if (w === 0 || h === 0) return;
+    var s = Math.min(w / SLIDE_W, h / SLIDE_H);
+    outer.style.setProperty('--s', s);
+  }
+
+  var ro = new ResizeObserver(function(entries) {
+    entries.forEach(function(entry) { updateScale(entry.target); });
+  });
+
+  slides.forEach(function(s) { ro.observe(s); });
+
+  /* -- State badges ------------------------------------------------ */
+  var BADGE_LABELS = { generated: 'GEN', approved: 'APR', locked: 'LCK', derived: 'DER' };
+  slides.forEach(function(s) {
+    var state = s.getAttribute('data-state') || 'generated';
+    var badge = document.createElement('span');
+    badge.className = 'state-badge';
+    badge.setAttribute('data-badge', state);
+    badge.textContent = BADGE_LABELS[state] || state.toUpperCase().slice(0, 3);
+    s.appendChild(badge);
+  });
+
+  /* -- Init -------------------------------------------------------- */
+  applyState();
+  showNav();
+})();
+`;
+//# sourceMappingURL=viewer-js.js.map

package/dist/viewer-js.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"viewer-js.js","sourceRoot":"","sources":["../src/viewer-js.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4NhC,CAAC"}

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@deckspec/renderer",
-  "version": "0.1.0",
+  "version": "0.1.2",
+  "files": [
+    "dist",
+    "src"
+  ],
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
     "esbuild": "^0.27.4",
     "zod": "^3.23.0",
-    "@deckspec/dsl": "0.1.0",
-    "@deckspec/schema": "0.1.0"
+    "@deckspec/dsl": "0.1.2",
+    "@deckspec/schema": "0.1.2"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "composite": true,
-    "jsx": "react-jsx"
-  },
-  "include": ["src/"],
-  "references": [
-    { "path": "../schema" },
-    { "path": "../dsl" }
-  ]
-}