decaframe 0.1.0

package/dist/export/viewer.js

@@ -0,0 +1,1112 @@
+import{PRESENT_IDLE_MS as i,PRESENT_NEXT_KEYS as o,PRESENT_PREV_KEYS as a}from"../present/constants.js";import{DIAGRAM_ZOOM_JS as n}from"../diagramZoom.js";import{FIT_FLOOR as d,FIT_STEP as s}from"../fit.js";const t=JSON.stringify(Object.fromEntries(o.map(e=>[e,1]))),r=JSON.stringify(Object.fromEntries(a.map(e=>[e,1]))),u=`
+html, body { margin: 0; padding: 0; height: 100%; }
+
+body {
+  --dfx-glass: color-mix(in oklab, oklch(0.885 0.004 228.8) 50%, transparent);
+  --dfx-glass-edge: color-mix(in oklab, oklch(0.19 0.004 228.8) 15%, transparent);
+  --dfx-glass-hover-edge: color-mix(in oklab, oklch(0.19 0.004 228.8) 38%, transparent);
+  --dfx-glass-blur: blur(40px);
+  --dfx-glass-sheen: linear-gradient(
+    145deg,
+    color-mix(in oklab, white 55%, transparent) 0,
+    color-mix(in oklab, white 18%, transparent) 90px,
+    transparent 240px
+  );
+  
+  --dfx-stage: oklch(0 0 0);
+  --dfx-stage-ink: oklch(0.925 0.003 228.8);
+  
+  --dfx-fg: oklch(0.148 0.004 228.8);
+  --dfx-muted-fg: oklch(0.46 0.014 228.8);
+  --dfx-muted: oklch(0.963 0.002 228.8);
+  --dfx-bg: oklch(1 0 0);
+  --dfx-border: oklch(0.915 0.004 228.8);
+  
+  --dfx-input: oklch(0.915 0.004 228.8);
+  
+  --dfx-mark: oklch(0.32 0.006 228.8);
+  
+  background: var(--dfx-muted);
+}
+[data-mode='dark'] body {
+  --dfx-glass: color-mix(in oklab, oklch(0.19 0.004 228.8) 50%, transparent);
+  --dfx-glass-edge: color-mix(in oklab, oklch(0.885 0.004 228.8) 15%, transparent);
+  --dfx-glass-hover-edge: color-mix(in oklab, oklch(0.885 0.004 228.8) 38%, transparent);
+  --dfx-glass-sheen: linear-gradient(
+    145deg,
+    color-mix(in oklab, white 10%, transparent) 0,
+    color-mix(in oklab, white 3.5%, transparent) 90px,
+    transparent 240px
+  );
+  --dfx-fg: oklch(0.987 0.002 228.8);
+  --dfx-muted-fg: oklch(0.823 0.010 228.8);
+  --dfx-muted: oklch(0.275 0.008 228.8);
+  --dfx-bg: oklch(0.148 0.004 228.8);
+  --dfx-border: oklch(0.345 0.010 228.8);
+  --dfx-input: oklch(0.375 0.010 228.8);
+  --dfx-mark: oklch(0.93 0.003 214.3);
+}
+
+[data-view='present'] body { background: var(--dfx-stage); }
+
+.dfx-deck {
+  display: flex;
+  height: 100svh;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+.dfx-deck::-webkit-scrollbar { display: none; }
+
+.dfx-slide {
+  position: relative;
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  scroll-snap-align: center;
+  scroll-snap-stop: always;
+  overflow: hidden;
+}
+[data-format='fluid'] .dfx-slide { overflow-y: auto; overscroll-behavior-y: contain; }
+
+.dfx-fit {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(var(--dfx-fit, 1));
+  transform-origin: center center;
+}
+
+[data-format='fluid'] .dfx-fit {
+  position: static;
+  width: max-content;
+  transform: translateX(var(--dfx-x, 0px)) scale(var(--dfx-fit, 1));
+  transform-origin: top left;
+}
+
+.dfx-hud {
+  position: fixed;
+  right: 16px;
+  bottom: 14px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--dfx-stage) 82%, transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  color: var(--dfx-stage-ink);
+  font: 500 12px/1 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+  transition: opacity 0.4s;
+}
+.dfx-hud[data-idle='true'] { opacity: 0; }
+
+[data-view='browse'] .dfx-hud { display: none; }
+
+.dfx-hud-btn {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  pointer-events: auto;
+}
+.dfx-hud-btn:hover { background: color-mix(in oklab, white 14%, transparent); }
+.dfx-hud-btn:disabled { opacity: 0.35; cursor: default; }
+
+.dfx-hud-more { position: relative; }
+.dfx-hud-more > summary.dfx-hud-btn { list-style: none; }
+.dfx-hud-more > summary::-webkit-details-marker { display: none; }
+.dfx-hud-more .dfx-menu {
+  top: auto;
+  bottom: calc(100% + 8px);
+  background: color-mix(in oklab, var(--dfx-stage) 92%, transparent);
+  border-color: color-mix(in oklab, white 15%, transparent);
+  color: var(--dfx-stage-ink);
+}
+.dfx-hud-more .dfx-menu-item:hover { background: color-mix(in oklab, white 14%, transparent); }
+
+.dfx-hud-at {
+  min-width: 34px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: color-mix(in oklab, white 10%, transparent);
+}
+
+.dfx-titlebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  padding: 0 10px;
+  z-index: 10;
+}
+.dfx-titlebar::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: -10px;
+  z-index: -1;
+  pointer-events: none;
+  background: linear-gradient(to bottom, var(--dfx-muted) 0%, var(--dfx-muted) 78%, transparent 100%);
+}
+
+.dfx-titlebar-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.dfx-titlebar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.dfx-brand {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  height: 32px;
+  color: var(--dfx-fg);
+}
+
+.dfx-rail-toggle {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  margin-left: -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--dfx-muted-fg);
+  cursor: pointer;
+}
+.dfx-rail-toggle:hover { background: color-mix(in oklab, var(--dfx-fg) 8%, transparent); color: var(--dfx-fg); }
+
+.dfx-mode-toggle {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 1px solid var(--dfx-glass-edge);
+  border-radius: 999px;
+  background: var(--dfx-glass);
+  background-image: var(--dfx-glass-sheen);
+  -webkit-backdrop-filter: var(--dfx-glass-blur);
+  backdrop-filter: var(--dfx-glass-blur);
+  color: var(--dfx-muted-fg);
+  cursor: pointer;
+}
+.dfx-mode-toggle:hover { color: var(--dfx-fg); }
+
+.dfx-titlebar-title {
+  flex: 1 1 auto;
+  min-width: 0;
+  font: 600 13px/1 ui-sans-serif, system-ui, sans-serif;
+  color: var(--dfx-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dfx-split { display: inline-flex; align-items: center; position: relative; }
+.dfx-present-btn {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 14px;
+  border-radius: 20px 0 0 20px;
+  border: 1px solid var(--dfx-border);
+  border-right: none;
+  background: var(--dfx-bg);
+  color: var(--dfx-fg);
+  font: 500 14px/1 ui-sans-serif, system-ui, sans-serif;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.25s ease;
+}
+[data-mode='dark'] .dfx-present-btn { background: transparent; }
+.dfx-present-btn:hover { background: var(--dfx-muted); border-color: var(--dfx-glass-hover-edge); }
+[data-mode='dark'] .dfx-present-btn:hover {
+  background: color-mix(in oklab, var(--dfx-input) 30%, transparent);
+}
+.dfx-present-btn svg { flex: none; }
+
+.dfx-split-more { position: relative; }
+
+.dfx-split-more > summary {
+  
+  box-sizing: border-box;
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding-inline: 6px;
+  border: 1px solid var(--dfx-border);
+  border-radius: 0 20px 20px 0;
+  background: var(--dfx-bg);
+  color: var(--dfx-fg);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.25s ease;
+}
+[data-mode='dark'] .dfx-split-more > summary { background: transparent; }
+.dfx-split-more > summary::-webkit-details-marker { display: none; }
+.dfx-split-more > summary:hover,
+.dfx-split-more[open] > summary { background: var(--dfx-muted); border-color: var(--dfx-glass-hover-edge); }
+[data-mode='dark'] .dfx-split-more > summary:hover,
+[data-mode='dark'] .dfx-split-more[open] > summary {
+  background: color-mix(in oklab, var(--dfx-input) 30%, transparent);
+}
+
+.dfx-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  min-width: 180px;
+  padding: 4px;
+  border-radius: 10px;
+  border: 1px solid var(--dfx-border);
+  background: var(--dfx-glass);
+  -webkit-backdrop-filter: var(--dfx-glass-blur);
+  backdrop-filter: var(--dfx-glass-blur);
+  
+  color: var(--dfx-fg);
+  box-shadow: 0 8px 24px color-mix(in oklab, black 25%, transparent);
+  
+  pointer-events: auto;
+  z-index: 20;
+}
+.dfx-menu-item {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: 500 13px/1.3 ui-sans-serif, system-ui, sans-serif;
+  text-align: left;
+  cursor: pointer;
+}
+.dfx-menu-item:hover { background: color-mix(in oklab, var(--dfx-fg) 8%, transparent); }
+
+.dfx-rail {
+  
+  box-sizing: border-box;
+  position: fixed;
+  top: 50px;
+  left: 10px;
+  bottom: 14px;
+  width: 140px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 16px;
+  background-color: var(--dfx-glass);
+  background-image: var(--dfx-glass-sheen);
+  -webkit-backdrop-filter: var(--dfx-glass-blur);
+  backdrop-filter: var(--dfx-glass-blur);
+  border: 1px solid var(--dfx-glass-edge);
+  
+  overflow: hidden;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  z-index: 9;
+}
+
+.dfx-rail-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 13px 14px;
+  border-bottom: 1px solid var(--dfx-border);
+  font-family: ui-monospace, monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--dfx-muted-fg);
+}
+.dfx-count { margin-left: auto; color: var(--dfx-muted-fg); }
+
+.dfx-rail-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px;
+}
+.dfx-rail-list::-webkit-scrollbar { width: 0; }
+
+.dfx-rail-item {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 4px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: none;
+  font: inherit;
+  text-align: left;
+  color: var(--dfx-muted-fg);
+  cursor: pointer;
+}
+.dfx-rail-item:focus-visible {
+  outline: none;
+  border-color: color-mix(in oklab, var(--dfx-mark) 55%, transparent);
+}
+
+.dfx-thumb {
+  
+  position: relative;
+  box-sizing: content-box;
+  display: block;
+  width: 110px;
+  
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 5px;
+  border: 1px solid var(--dfx-border);
+  background: var(--dfx-bg);
+  pointer-events: none;
+}
+.dfx-rail-item:hover .dfx-thumb { border-color: color-mix(in oklab, var(--dfx-muted-fg) 75%, transparent); }
+.dfx-rail-item[data-current='true'] .dfx-thumb {
+  border-color: var(--dfx-mark);
+  box-shadow: 0 0 0 1px var(--dfx-mark);
+}
+
+.dfx-rail-num {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 1px 5px;
+  border-radius: 4px;
+  background: var(--dfx-muted);
+  font-family: ui-monospace, monospace;
+  font-size: 9px;
+  letter-spacing: 0.06em;
+  line-height: 1.5;
+  color: var(--dfx-muted-fg);
+}
+.dfx-rail-item[data-current='true'] .dfx-rail-num { color: var(--dfx-mark); }
+
+.dfx-rail-foot {
+  display: flex;
+  justify-content: center;
+  padding: 10px 14px 12px;
+  border-top: 1px solid var(--dfx-border);
+  color: var(--dfx-muted-fg);
+}
+
+.dfx-rail-show {
+  position: fixed;
+  left: 16px;
+  top: 59px;
+  z-index: 9;
+  display: none;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border-radius: 11px;
+  background-color: var(--dfx-glass);
+  background-image: var(--dfx-glass-sheen);
+  -webkit-backdrop-filter: var(--dfx-glass-blur);
+  backdrop-filter: var(--dfx-glass-blur);
+  border: 1px solid var(--dfx-glass-edge);
+  color: var(--dfx-muted-fg);
+  cursor: pointer;
+}
+.dfx-rail-show:hover { color: var(--dfx-fg); }
+
+[data-view='present'] .dfx-titlebar,
+[data-view='present'] .dfx-rail {
+  display: none;
+}
+[data-view='browse'] .dfx-deck {
+  position: absolute;
+  top: calc(44px + 30px);
+  left: 150px;
+  right: 0;
+  bottom: 90px;
+  height: auto;
+}
+
+[data-rail-collapsed='true'] .dfx-rail { display: none; }
+[data-rail-collapsed='true'][data-view='browse'] .dfx-deck { left: 0; }
+[data-rail-collapsed='true'][data-view='browse'] .dfx-rail-show { display: grid; }
+
+.dfx-presenter { display: none; }
+[data-role='presenter'] .dfx-titlebar,
+[data-role='presenter'] .dfx-rail,
+[data-role='presenter'] .dfx-deck,
+[data-role='presenter'] .dfx-hud {
+  display: none;
+}
+
+[data-role='presenter'] body { background: var(--dfx-bg); }
+[data-role='presenter'] .dfx-presenter {
+  display: flex;
+  flex-direction: column;
+  height: 100svh;
+  color: var(--dfx-fg);
+  font: 500 13px/1.4 ui-sans-serif, system-ui, sans-serif;
+}
+
+.dfx-presenter-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--dfx-border);
+}
+.dfx-presenter-timer { font-variant-numeric: tabular-nums; font-weight: 600; }
+.dfx-presenter-timer-btn {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dfx-muted-fg);
+  cursor: pointer;
+}
+.dfx-presenter-timer-btn:hover { color: var(--dfx-fg); background: color-mix(in oklab, var(--dfx-fg) 8%, transparent); }
+.dfx-presenter-count { margin-inline-start: auto; color: var(--dfx-muted-fg); }
+
+.dfx-presenter-body {
+  flex: 1;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(320px, 480px) 1fr;
+  grid-template-rows: auto auto;
+  gap: 8px 16px;
+  padding: 16px;
+}
+.dfx-presenter-current {
+  grid-column: 1;
+  grid-row: 1;
+  position: relative;
+  
+  aspect-ratio: 16 / 9;
+  border-radius: 8px;
+  overflow: hidden;
+  
+  border: 1px solid var(--dfx-border);
+  background: var(--dfx-bg);
+  box-shadow: 0 8px 24px color-mix(in oklab, black 25%, transparent);
+}
+.dfx-presenter-adjacent { grid-column: 1; grid-row: 2; display: flex; gap: 8px; align-self: start; }
+.dfx-presenter-thumb {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  cursor: pointer;
+  padding: 6px;
+}
+.dfx-presenter-thumb:hover:not(:disabled) { background: color-mix(in oklab, var(--dfx-fg) 5%, transparent); }
+.dfx-presenter-thumb:disabled { cursor: default; }
+.dfx-presenter-thumb:disabled .dfx-presenter-thumb-label { opacity: 0.35; }
+.dfx-presenter-thumb-pic {
+  position: relative;
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 6px;
+  overflow: hidden;
+  border: 1px solid var(--dfx-border);
+  background: var(--dfx-bg);
+}
+.dfx-presenter-thumb-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dfx-muted-fg);
+}
+
+.dfx-presenter-notes {
+  grid-column: 2;
+  grid-row: 1 / 3;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.dfx-presenter-notes-label {
+  margin: 0 0 8px;
+  font-weight: 600;
+  color: var(--dfx-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 11px;
+}
+
+.dfx-presenter-notes-body { flex: 1; overflow-y: auto; white-space: pre-wrap; line-height: 1.6; }
+.dfx-presenter-notes-body[data-empty='true'] { color: var(--dfx-muted-fg); font-style: italic; }
+
+[class^='dfx-']:focus-visible, [class*=' dfx-']:focus-visible {
+  outline: 2px solid var(--dfx-mark);
+  outline-offset: 2px;
+}
+
+.dfx-embed {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  inline-size: 100%;
+  block-size: 100%;
+  border: 0;
+}
+
+.dfx-embed:not([src]) { display: none; }
+
+.dfx-missing {
+  position: absolute;
+  inset: auto 0 0 0;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  background: rgba(17, 18, 20, 0.72);
+  color: #fff;
+  font: 500 11px/1.35 ui-sans-serif, system-ui, sans-serif;
+  text-align: start;
+}
+.dfx-missing-label { font-weight: 600; letter-spacing: 0.02em; }
+.dfx-missing-why { font-weight: 400; opacity: 0.82; }
+@container (max-width: 260px) { .dfx-missing-why { display: none; } }
+
+@media (prefers-reduced-motion: reduce) { .dfx-deck { scroll-behavior: auto; } }
+`,p=`
+(function () {
+  var slides = Array.prototype.slice.call(document.querySelectorAll('.dfx-slide'))
+  var notesEl = document.getElementById('dfx-notes')
+  var notesData = []
+  try { notesData = notesEl ? JSON.parse(notesEl.textContent) : [] } catch (e) { notesData = [] }
+
+  
+  function pictureFailed(el) {
+    if (!el || el.tagName !== 'IMG' || el.className.indexOf('media-img') < 0) return
+    if (el.getAttribute('src') === 'data:,') return
+    el.setAttribute('src', 'data:,')
+  }
+  document.addEventListener('error', function (e) { pictureFailed(e.target) }, true)
+
+  
+  Array.prototype.forEach.call(document.querySelectorAll('img.media-img'), function (el) {
+    if (el.complete && el.naturalWidth === 0) pictureFailed(el)
+  })
+
+  
+  if (location.protocol !== 'file:') {
+    var embeds = document.querySelectorAll('iframe.dfx-embed[data-src]')
+    for (var e = 0; e < embeds.length; e++) embeds[e].src = embeds[e].getAttribute('data-src')
+  }
+
+  
+  function frameHeightPx(ratio, w, h) {
+    var parts = ratio.split('/')
+    var rw = parseFloat(parts[0])
+    var rh = parseFloat(parts[1])
+    if (!rw || !rh || !isFinite(rw) || !isFinite(rh)) return h
+    return (w * rh) / rw
+  }
+
+  
+  function sizeThumb(el, targetWidth, source) {
+    var ratio = getComputedStyle(source).aspectRatio
+    var scale = targetWidth / source.offsetWidth
+    el.style.height = (frameHeightPx(ratio, source.offsetWidth, source.offsetHeight) * scale) + 'px'
+  }
+
+  
+  function fitThumb(thumb, clone) {
+    var w = thumb.clientWidth / clone.offsetWidth
+    var h = thumb.clientHeight / clone.offsetHeight
+    clone.style.transform = 'scale(' + Math.min(w, h) + ')'
+  }
+
+  
+  function cloneSlide(i) {
+    var clone = slides[i].firstElementChild.cloneNode(true)
+    clone.style.position = 'absolute'
+    clone.style.top = '0'
+    clone.style.left = '0'
+    clone.style.transformOrigin = 'top left'
+    clone.style.counterReset = 'dfx-page ' + i
+    return clone
+  }
+
+  
+${n}
+
+  
+  function zoomDiagrams() {
+    try {
+      var figures = document.querySelectorAll('.dfx-deck .blk-diagram')
+      for (var i = 0; i < figures.length; i++) {
+        var drawing = figures[i].querySelector('.diagram-drawing')
+        
+        if (!drawing || !drawing.querySelector('svg')) continue
+        var stored = parseFloat(figures[i].getAttribute('data-zoom'))
+        
+        attachZoom(drawing, figures[i], { initial: stored > 0 && isFinite(stored) ? stored : 1 })
+      }
+    } catch (e) {
+      
+    }
+  }
+
+  if (new URLSearchParams(location.search).get('view') === 'presenter') initPresenter()
+  else initDeck()
+
+  function initDeck() {
+    var deck = document.querySelector('.dfx-deck')
+    var hud = document.querySelector('.dfx-hud')
+    var at = document.querySelector('.dfx-at')
+    var fluid = document.documentElement.dataset.format === 'fluid'
+    var idle
+
+    
+    
+    function fit() {
+      if (fluid && slides.length) {
+        var b0 = slides[0].firstElementChild
+        var k0 = Math.min(1, slides[0].clientWidth / b0.offsetWidth)
+        document.documentElement.style.setProperty('--fluid-floor', (slides[0].clientHeight / k0) + 'px')
+      }
+      for (var i = 0; i < slides.length; i++) {
+        var box = slides[i].firstElementChild
+        var w = slides[i].clientWidth / box.offsetWidth
+        var k = fluid ? Math.min(1, w) : Math.min(w, slides[i].clientHeight / box.offsetHeight)
+        box.style.setProperty('--dfx-fit', k)
+        if (fluid) {
+
+          box.style.setProperty('--dfx-x', Math.max(0, (slides[i].clientWidth - box.offsetWidth * k) / 2) + 'px')
+          box.style.marginBottom = -box.offsetHeight * (1 - k) + 'px'
+        }
+      }
+    }
+
+    
+    var cur = 0
+    function index() { return Math.round(deck.scrollLeft / deck.clientWidth) }
+
+    var root = document.documentElement
+    var rail = document.querySelector('.dfx-rail-list')
+    var presentBtn = document.querySelector('.dfx-present-btn')
+    var railToggle = document.querySelector('.dfx-rail-toggle')
+    var railShow = document.querySelector('.dfx-rail-show')
+    var modeToggle = document.querySelector('.dfx-mode-toggle')
+    var presenterWin = null
+
+    
+    function setView(mode) {
+      root.dataset.view = mode
+      fit()
+      markCurrent()
+    }
+
+    function markCurrent() {
+      
+      for (var s = 0; s < slides.length; s++) slides[s].dataset.current = String(s === cur)
+      if (!rail) return
+      var items = rail.querySelectorAll('.dfx-rail-item')
+      for (var i = 0; i < items.length; i++) {
+        items[i].dataset.current = String(i === cur)
+        items[i].setAttribute('aria-selected', String(i === cur))
+      }
+    }
+
+    
+    function buildRail() {
+      if (!rail) return
+      for (var i = 0; i < slides.length; i++) {
+        
+        var item = document.createElement('button')
+        item.type = 'button'
+        item.className = 'dfx-rail-item'
+        item.setAttribute('role', 'option')
+        item.setAttribute('aria-label', 'Page ' + (i + 1))
+        var thumb = document.createElement('span')
+        thumb.className = 'dfx-thumb'
+        var source = slides[i].firstElementChild
+        var clone = cloneSlide(i)
+        thumb.appendChild(clone)
+        item.appendChild(thumb)
+        var num = document.createElement('span')
+        num.className = 'dfx-rail-num'
+        num.textContent = (i + 1 < 10 ? '0' : '') + (i + 1)
+        item.appendChild(num)
+        ;(function (i2) {
+          item.addEventListener('click', function () { go(i2) })
+        })(i)
+        rail.appendChild(item)
+        sizeThumb(thumb, thumb.clientWidth, source)
+        fitThumb(thumb, clone)
+      }
+      markCurrent()
+    }
+
+    if (presentBtn) {
+      presentBtn.addEventListener('click', function () {
+        setView('present')
+
+        if (document.documentElement.requestFullscreen) {
+          var req = document.documentElement.requestFullscreen()
+          if (req && req.catch) req.catch(function () {})
+        }
+      })
+    }
+
+    
+    var RAIL_AUTO_COLLAPSE = 700
+    var userSetRail = false
+    function autoRail() {
+      if (userSetRail) return
+      root.dataset.railCollapsed = innerWidth < RAIL_AUTO_COLLAPSE ? 'true' : 'false'
+    }
+
+    
+    function toggleRail() {
+      userSetRail = true
+      root.dataset.railCollapsed = root.dataset.railCollapsed === 'true' ? 'false' : 'true'
+      fit()
+    }
+    if (railToggle) railToggle.addEventListener('click', toggleRail)
+    if (railShow) railShow.addEventListener('click', toggleRail)
+
+    
+    var MOON_SVG = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" ' +
+      'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+      '<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>'
+    var SUN_SVG = '<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" ' +
+      'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+      '<circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/>' +
+      '<path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/>' +
+      '<path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>'
+    if (modeToggle) {
+      modeToggle.addEventListener('click', function (e) {
+        
+        e.stopPropagation()
+        var next = root.dataset.mode === 'dark' ? 'light' : 'dark'
+        root.dataset.mode = next
+        modeToggle.innerHTML = next === 'dark' ? SUN_SVG : MOON_SVG
+        modeToggle.setAttribute('aria-label', 'Switch to ' + (next === 'dark' ? 'light' : 'dark') + ' theme')
+      })
+    }
+
+    
+    function openPresenter() {
+      if (presenterWin && !presenterWin.closed) { presenterWin.focus(); return }
+      var url = location.href.split('#')[0].split('?')[0] + '?view=presenter&at=' + cur
+      presenterWin = window.open(url, 'dfx-presenter', 'width=1100,height=700')
+    }
+
+    var hudButtons = document.querySelectorAll('.dfx-hud-btn:not(summary)')
+    for (var hi = 0; hi < hudButtons.length; hi++) {
+      hudButtons[hi].addEventListener('click', function (e) {
+        var action = e.currentTarget.getAttribute('data-action')
+        if (action === 'prev') go(cur - 1)
+        else if (action === 'next') go(cur + 1)
+      })
+    }
+
+    
+    var splitMore = document.querySelector('.dfx-split-more')
+    var hudMore = document.querySelector('.dfx-hud-more')
+    ;[splitMore, hudMore].forEach(function (details) {
+      if (!details) return
+      details.querySelectorAll('.dfx-menu-item').forEach(function (item) {
+        item.addEventListener('click', function () {
+          details.open = false
+          var action = item.getAttribute('data-action')
+          if (action === 'presenter-view') { setView('present'); openPresenter() }
+          else if (action === 'start-over') go(0)
+          else if (action === 'exit') exitPresenting()
+        })
+      })
+    })
+    
+    addEventListener('click', function (e) {
+      ;[splitMore, hudMore].forEach(function (details) {
+        if (details && details.open && !details.contains(e.target)) details.open = false
+      })
+    })
+
+    function updateHudButtons() {
+      var prevBtn = document.querySelector('.dfx-hud-btn[data-action="prev"]')
+      var nextBtn = document.querySelector('.dfx-hud-btn[data-action="next"]')
+      if (prevBtn) prevBtn.disabled = cur === 0
+      if (nextBtn) nextBtn.disabled = cur === slides.length - 1
+    }
+
+    
+    document.addEventListener('fullscreenchange', function () {
+      if (!document.fullscreenElement && root.dataset.view === 'present') setView('browse')
+    })
+
+    
+    function exitPresenting() {
+      if (document.fullscreenElement) {
+        var ext = document.exitFullscreen()
+        if (ext && ext.catch) ext.catch(function () {})
+      } else {
+        setView('browse')
+      }
+    }
+
+    function wake() {
+      hud.dataset.idle = 'false'
+      clearTimeout(idle)
+      idle = setTimeout(function () { hud.dataset.idle = 'true' }, ${i})
+    }
+
+    
+    function show(n) {
+      at.textContent = String(n + 1)
+      markCurrent()
+      updateHudButtons()
+      if (presenterWin && !presenterWin.closed) presenterWin.postMessage({ at: n }, '*')
+      try { history.replaceState(null, '', '#' + (n + 1)) } catch (e) {  }
+    }
+
+    
+    function go(i) {
+      cur = Math.max(0, Math.min(slides.length - 1, i))
+      deck.scrollTo({ left: cur * deck.clientWidth })
+      show(cur)
+    }
+
+    
+    addEventListener('message', function (e) {
+      if (e.source !== presenterWin) return
+      var msg = e.data || {}
+      if (typeof msg.go === 'number') go(msg.go)
+    })
+
+    var NEXT = ${t}
+    var PREV = ${r}
+
+    addEventListener('keydown', function (e) {
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      if (e.key === 'Escape' && ((splitMore && splitMore.open) || (hudMore && hudMore.open))) {
+        if (splitMore) splitMore.open = false
+        if (hudMore) hudMore.open = false
+        e.preventDefault()
+        return
+      }
+      if (NEXT[e.key]) { go(cur + 1); e.preventDefault() }
+      else if (PREV[e.key]) { go(cur - 1); e.preventDefault() }
+      
+      else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        var s = slides[cur]
+        if (fluid && s.scrollHeight > s.clientHeight + 1) {
+          s.scrollTop += e.key === 'ArrowDown' ? 80 : -80
+          wake()
+        }
+        e.preventDefault()
+      }
+      else if (e.key === 'Home') { go(0); e.preventDefault() }
+      else if (e.key === 'End') { go(slides.length - 1); e.preventDefault() }
+      else if (e.key === 'f') {
+        var toggle = document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen()
+        if (toggle && toggle.catch) toggle.catch(function () {})
+      }
+      else if (e.key === 'Escape' && root.dataset.view === 'present' && !document.fullscreenElement) {
+        setView('browse')
+      }
+    })
+
+    
+    addEventListener('click', function (e) {
+      if (e.target.closest('a')) return
+      if (e.target.closest('.dfx-titlebar, .dfx-rail, .dfx-rail-show, .dfx-hud, .dfx-presenter')) return
+      if (String(getSelection())) return
+      go(cur + 1)
+    })
+
+    
+    deck.addEventListener('scroll', function () {
+      clearTimeout(deck._t)
+      deck._t = setTimeout(function () { cur = index(); show(cur) }, 90)
+    })
+    addEventListener('resize', function () { autoRail(); fit() })
+
+    
+    var NEAR = { x: 260, y: 170 }
+    addEventListener('mousemove', function (e) {
+      if (e.clientX > innerWidth - NEAR.x && e.clientY > innerHeight - NEAR.y) wake()
+    })
+
+    autoRail()
+    fit()
+    buildRail()
+    
+    zoomDiagrams()
+    updateHudButtons()
+    
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(fit)
+
+    
+    function autoFitPages() {
+      if (document.documentElement.getAttribute('data-autofit') === 'off') return
+      var found = readScale(deck, ${d}, ${s})
+      for (var i = 0; i < found.length; i++) {
+        if (found[i].scale >= 1) continue
+        var el = deck.querySelector('.page[data-id="' + found[i].id + '"]')
+        if (el) el.style.setProperty('--fit', String(found[i].scale))
+      }
+    }
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(autoFitPages)
+
+    
+    hud.dataset.idle = 'true'
+
+    var start = parseInt(location.hash.slice(1), 10)
+    if (start > 1) { deck.style.scrollBehavior = 'auto'; go(start - 1); deck.style.scrollBehavior = '' }
+    else show(cur)
+  }
+
+  
+  function initPresenter() {
+    document.documentElement.dataset.role = 'presenter'
+    var params = new URLSearchParams(location.search)
+    var startAt = parseInt(params.get('at'), 10)
+    var at = Number.isInteger(startAt) && startAt >= 0 && startAt < slides.length ? startAt : 0
+    var seconds = 0
+    var paused = false
+    var NEXT_MAP_ = ${t}
+    var PREV_MAP_ = ${r}
+
+    var timerEl = document.querySelector('.dfx-presenter-timer')
+    var countEl = document.querySelector('.dfx-presenter-count')
+    var currentEl = document.querySelector('.dfx-presenter-current')
+    var notesBody = document.querySelector('.dfx-presenter-notes-body')
+    var thumbs = document.querySelectorAll('.dfx-presenter-thumb')
+    var pauseBtn = document.querySelector('.dfx-presenter-timer-btn[data-action="pause"]')
+    var resetBtn = document.querySelector('.dfx-presenter-timer-btn[data-action="reset"]')
+
+    function render() {
+      countEl.textContent = 'Slide ' + (at + 1) + ' of ' + slides.length
+
+      currentEl.innerHTML = ''
+      var clone = cloneSlide(at)
+      currentEl.appendChild(clone)
+      sizeThumb(currentEl, currentEl.clientWidth, slides[at].firstElementChild)
+      fitThumb(currentEl, clone)
+
+      var note = notesData[at]
+      notesBody.textContent = note || 'No notes for this page.'
+      notesBody.dataset.empty = note ? 'false' : 'true'
+
+      for (var i = 0; i < thumbs.length; i++) {
+        var dir = thumbs[i].getAttribute('data-action') === 'prev' ? -1 : 1
+        var target = at + dir
+        var pic = thumbs[i].querySelector('.dfx-presenter-thumb-pic')
+        pic.innerHTML = ''
+        thumbs[i].disabled = !slides[target]
+        if (slides[target]) {
+          var thumbClone = cloneSlide(target)
+          pic.appendChild(thumbClone)
+          sizeThumb(pic, pic.clientWidth, slides[target].firstElementChild)
+          fitThumb(pic, thumbClone)
+        }
+      }
+    }
+
+    
+    function go(n) {
+      at = Math.max(0, Math.min(slides.length - 1, n))
+      render()
+      if (window.opener && !window.opener.closed) window.opener.postMessage({ go: at }, '*')
+    }
+
+    for (var ti = 0; ti < thumbs.length; ti++) {
+      thumbs[ti].addEventListener('click', function (e) {
+        go(at + (e.currentTarget.getAttribute('data-action') === 'prev' ? -1 : 1))
+      })
+    }
+
+    addEventListener('message', function (e) {
+      if (e.source !== window.opener) return
+      var msg = e.data || {}
+      if (typeof msg.at === 'number') { at = msg.at; render() }
+    })
+
+    addEventListener('keydown', function (e) {
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      if (NEXT_MAP_[e.key]) { go(at + 1); e.preventDefault() }
+      else if (PREV_MAP_[e.key]) { go(at - 1); e.preventDefault() }
+    })
+
+    function renderTimer() {
+      var mm = String(Math.floor(seconds / 60)).padStart(2, '0')
+      var ss = String(seconds % 60).padStart(2, '0')
+      timerEl.textContent = mm + ':' + ss
+    }
+
+    
+    var PAUSE_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" ' +
+      'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+      '<rect x="14" y="3" width="5" height="18" rx="1"/><rect x="5" y="3" width="5" height="18" rx="1"/></svg>'
+    var PLAY_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" ' +
+      'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
+      '<polygon points="6 3 20 12 6 21 6 3"/></svg>'
+    if (pauseBtn) {
+      pauseBtn.addEventListener('click', function () {
+        paused = !paused
+        pauseBtn.setAttribute('aria-label', paused ? 'Resume timer' : 'Pause timer')
+        pauseBtn.innerHTML = paused ? PLAY_SVG : PAUSE_SVG
+      })
+    }
+    
+    if (resetBtn) resetBtn.addEventListener('click', function () { seconds = 0; renderTimer() })
+
+    setInterval(function () {
+      if (paused) return
+      seconds++
+      renderTimer()
+    }, 1000)
+
+    render()
+  }
+})()
+`;export{u as VIEWER_CSS,p as VIEWER_JS};