@squadbase/vantage 0.5.3-dev.71d2349 → 0.6.0-dev.3cc6138

package/dist/slide/index.js

@@ -0,0 +1,1571 @@
+import { useSearchState } from '../chunk-FVWU275X.js';
+import '../chunk-SVNOWE5U.js';
+import { createContext, useRef, useState, useLayoutEffect, useContext, createElement, Children, isValidElement, useCallback, cloneElement, useMemo, useEffect } from 'react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { createRoot } from 'react-dom/client';
+import { ChevronLeftIcon, ChevronRightIcon, PanelLeftCloseIcon, PanelLeftOpenIcon, MinimizeIcon, MaximizeIcon, DownloadIcon } from 'lucide-react';
+
+// @squadbase/vantage — generated build. Do not edit.
+
+// src/slide/constants.ts
+var CANVAS_WIDTH = 1920;
+var CANVAS_HEIGHT = 1080;
+function SlideCanvas({ children, scale, themeVars }) {
+  const containerRef = useRef(null);
+  const [fitScale, setFitScale] = useState(null);
+  useLayoutEffect(() => {
+    if (scale !== void 0) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const measure = () => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width === 0 || height === 0) return;
+      setFitScale(Math.min(width / CANVAS_WIDTH, height / CANVAS_HEIGHT));
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [scale]);
+  const measured = scale ?? fitScale;
+  const s = measured ?? 1;
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, style: { position: "relative", height: "100%", width: "100%" }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        width: CANVAS_WIDTH * s,
+        height: CANVAS_HEIGHT * s,
+        overflow: "hidden",
+        background: "var(--slide-bg)",
+        color: "var(--slide-fg)",
+        // Hidden until measured — the same flash the layout effect avoids,
+        // for the frame this time.
+        visibility: measured === null ? "hidden" : void 0,
+        ...themeVars
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slide-canvas": "",
+          style: {
+            width: CANVAS_WIDTH,
+            height: CANVAS_HEIGHT,
+            transform: `scale(${s})`,
+            transformOrigin: "top left",
+            fontFamily: "var(--slide-font-body)",
+            fontSize: "var(--slide-size-body)",
+            ...themeVars
+          },
+          children
+        }
+      )
+    }
+  ) });
+}
+
+// src/slide/dom.ts
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function nextFrame() {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+function nextPaint() {
+  return new Promise((resolve) => {
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      resolve();
+    };
+    requestAnimationFrame(settle);
+    setTimeout(settle, 50);
+  });
+}
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.rel = "noopener";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+
+// src/slide/print-ready.ts
+var DEFAULT_WAITFOR_TIMEOUT_MS = 1e4;
+async function waitForFonts() {
+  if (!("fonts" in document)) return;
+  await document.fonts.ready;
+}
+async function waitForDataWaitfor(root, timeoutMs = DEFAULT_WAITFOR_TIMEOUT_MS) {
+  const targets = Array.from(root.querySelectorAll("[data-waitfor]"));
+  if (targets.length === 0) return;
+  const deadline = performance.now() + timeoutMs;
+  await Promise.all(
+    targets.map(async (el) => {
+      const selector = el.getAttribute("data-waitfor");
+      if (!selector) return;
+      while (performance.now() < deadline) {
+        try {
+          if (el.querySelector(selector)) return;
+        } catch {
+          return;
+        }
+        await nextFrame();
+      }
+    })
+  );
+}
+function isFrameAnimationSettled(frame) {
+  if (typeof document.getAnimations !== "function") return true;
+  for (const animation of document.getAnimations()) {
+    const effect = animation.effect;
+    if (!effect) continue;
+    const target = effect.target;
+    if (!target || !frame.contains(target)) continue;
+    if (effect.getComputedTiming().iterations === Infinity) continue;
+    if (animation.playState !== "finished") return false;
+  }
+  return true;
+}
+var SlideNumberContext = createContext(null);
+function SlideNumberProvider({
+  index,
+  total,
+  children
+}) {
+  const value = useMemo(() => ({ index, total }), [index, total]);
+  return /* @__PURE__ */ jsx(SlideNumberContext.Provider, { value, children });
+}
+function useSlideNumber() {
+  const ctx = useContext(SlideNumberContext);
+  if (!ctx) return { current: 0, total: 0 };
+  return { current: ctx.index + 1, total: ctx.total };
+}
+
+// src/slide/theme.ts
+function themeToCssVars(theme) {
+  if (!theme) return void 0;
+  const vars = {};
+  if (theme.bg) vars["--slide-bg"] = theme.bg;
+  if (theme.fg) vars["--slide-fg"] = theme.fg;
+  if (theme.accent) vars["--slide-accent"] = theme.accent;
+  if (theme.muted) vars["--slide-muted"] = theme.muted;
+  if (theme.fontDisplay) vars["--slide-font-display"] = theme.fontDisplay;
+  if (theme.fontBody) vars["--slide-font-body"] = theme.fontBody;
+  if (theme.sizeHero !== void 0) vars["--slide-size-hero"] = `${theme.sizeHero}px`;
+  if (theme.sizeBody !== void 0) vars["--slide-size-body"] = `${theme.sizeBody}px`;
+  if (theme.radius !== void 0) vars["--slide-radius"] = `${theme.radius}px`;
+  return Object.keys(vars).length > 0 ? vars : void 0;
+}
+
+// src/slide/export-pptx.ts
+var EMU_W = 12192e3;
+var EMU_H = 6858e3;
+var CAPTURE_PIXEL_RATIO = 2;
+var ANIMATION_TIMEOUT_MS = 15e3;
+var POLL_INTERVAL_MS = 100;
+var CAPTURE_CLASS = "vantage-slide-capture";
+var FROZEN_PROPS = ["opacity", "transform", "filter", "clip-path"];
+async function exportDeckAsPptx({
+  slides,
+  fileName,
+  theme,
+  onProgress
+}) {
+  if (slides.length === 0) return;
+  const total = slides.length;
+  onProgress?.({ phase: "processing", current: 0, total, percent: 0 });
+  const container = document.createElement("div");
+  container.className = CAPTURE_CLASS;
+  container.setAttribute("aria-hidden", "true");
+  Object.assign(container.style, {
+    position: "fixed",
+    left: "-99999px",
+    top: "0",
+    pointerEvents: "none"
+  });
+  document.body.appendChild(container);
+  const captureStyle = document.createElement("style");
+  captureStyle.textContent = `.${CAPTURE_CLASS} *, .${CAPTURE_CLASS} *::before, .${CAPTURE_CLASS} *::after {
+    animation-delay: -1s !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    animation-fill-mode: forwards !important;
+    transition: none !important;
+  }`;
+  document.head.appendChild(captureStyle);
+  const themeVars = themeToCssVars(theme);
+  const roots = [];
+  const frames = [];
+  for (let i = 0; i < slides.length; i++) {
+    const slide = slides[i];
+    if (!slide) continue;
+    const host = document.createElement("div");
+    host.setAttribute("data-slide-canvas", "");
+    Object.assign(host.style, {
+      width: `${CANVAS_WIDTH}px`,
+      height: `${CANVAS_HEIGHT}px`,
+      overflow: "hidden",
+      background: "var(--slide-bg)",
+      color: "var(--slide-fg)",
+      fontFamily: "var(--slide-font-body)",
+      fontSize: "var(--slide-size-body)"
+    });
+    if (themeVars) {
+      for (const [key, value] of Object.entries(themeVars)) {
+        host.style.setProperty(key, String(value));
+      }
+    }
+    container.appendChild(host);
+    frames.push(host);
+    const root = createRoot(host);
+    root.render(createElement(SlideNumberProvider, { index: i, total }, slide));
+    roots.push(root);
+  }
+  await nextPaint();
+  try {
+    await waitForFonts();
+    const deadline = performance.now() + ANIMATION_TIMEOUT_MS;
+    while (performance.now() < deadline) {
+      if (frames.every((frame) => isFrameAnimationSettled(frame))) break;
+      await sleep(POLL_INTERVAL_MS);
+    }
+    await waitForDataWaitfor(container);
+    const { toBlob, getFontEmbedCSS } = await import('html-to-image');
+    const fontEmbedCSS = await getFontEmbedCSS(container);
+    const images = [];
+    for (let i = 0; i < frames.length; i++) {
+      const frame = frames[i];
+      freezeForCapture(frame);
+      const blob = await toBlob(frame, {
+        width: CANVAS_WIDTH,
+        height: CANVAS_HEIGHT,
+        pixelRatio: CAPTURE_PIXEL_RATIO,
+        fontEmbedCSS,
+        cacheBust: true
+      });
+      if (!blob) throw new Error(`Failed to capture slide ${i + 1}.`);
+      images.push(new Uint8Array(await blob.arrayBuffer()));
+      onProgress?.({
+        phase: "processing",
+        current: i + 1,
+        total,
+        percent: Math.min(95, (i + 1) / total * 95)
+      });
+    }
+    onProgress?.({ phase: "generating", current: total, total, percent: 98 });
+    const pptx = await buildImagePptx(images);
+    downloadBlob(
+      new Blob([pptx], {
+        type: "application/vnd.openxmlformats-officedocument.presentationml.presentation"
+      }),
+      `${fileName}.pptx`
+    );
+  } finally {
+    onProgress?.({ phase: "done", current: total, total, percent: 100 });
+    for (const root of roots) root.unmount();
+    container.remove();
+    captureStyle.remove();
+  }
+}
+function freezeForCapture(root) {
+  for (const el of root.querySelectorAll("*")) {
+    const styles = getComputedStyle(el);
+    for (const prop of FROZEN_PROPS) {
+      el.style.setProperty(prop, styles.getPropertyValue(prop), "important");
+    }
+    el.style.setProperty("animation", "none", "important");
+    el.style.setProperty("transition", "none", "important");
+  }
+}
+var XML_DECL = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n';
+var REL_NS = "http://schemas.openxmlformats.org/package/2006/relationships";
+var OD_REL = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+async function buildImagePptx(images) {
+  const { zipSync, strToU8 } = await import('fflate');
+  const n = images.length;
+  const files = {};
+  files["[Content_Types].xml"] = strToU8(contentTypesXml(n));
+  files["_rels/.rels"] = strToU8(rootRelsXml());
+  files["ppt/presentation.xml"] = strToU8(presentationXml(n));
+  files["ppt/_rels/presentation.xml.rels"] = strToU8(presentationRelsXml(n));
+  files["ppt/presProps.xml"] = strToU8(presPropsXml());
+  files["ppt/theme/theme1.xml"] = strToU8(themeXml());
+  files["ppt/slideMasters/slideMaster1.xml"] = strToU8(slideMasterXml());
+  files["ppt/slideMasters/_rels/slideMaster1.xml.rels"] = strToU8(slideMasterRelsXml());
+  files["ppt/slideLayouts/slideLayout1.xml"] = strToU8(slideLayoutXml());
+  files["ppt/slideLayouts/_rels/slideLayout1.xml.rels"] = strToU8(slideLayoutRelsXml());
+  for (let i = 0; i < n; i++) {
+    const image = images[i];
+    if (!image) continue;
+    const idx = i + 1;
+    files[`ppt/slides/slide${idx}.xml`] = strToU8(slideXml());
+    files[`ppt/slides/_rels/slide${idx}.xml.rels`] = strToU8(slideRelsXml(idx));
+    files[`ppt/media/image${idx}.png`] = image;
+  }
+  return zipSync(files);
+}
+function contentTypesXml(n) {
+  const slideOverrides = Array.from(
+    { length: n },
+    (_, i) => `<Override PartName="/ppt/slides/slide${i + 1}.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slide+xml"/>`
+  ).join("");
+  return `${XML_DECL}<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Default Extension="png" ContentType="image/png"/><Override PartName="/ppt/presentation.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml"/><Override PartName="/ppt/presProps.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.presProps+xml"/><Override PartName="/ppt/slideMasters/slideMaster1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideMaster+xml"/><Override PartName="/ppt/slideLayouts/slideLayout1.xml" ContentType="application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml"/><Override PartName="/ppt/theme/theme1.xml" ContentType="application/vnd.openxmlformats-officedocument.theme+xml"/>${slideOverrides}</Types>`;
+}
+function rootRelsXml() {
+  return `${XML_DECL}<Relationships xmlns="${REL_NS}"><Relationship Id="rId1" Type="${OD_REL}/officeDocument" Target="ppt/presentation.xml"/></Relationships>`;
+}
+function presentationXml(n) {
+  const sldIds = Array.from(
+    { length: n },
+    (_, i) => `<p:sldId id="${256 + i}" r:id="rId${i + 3}"/>`
+  ).join("");
+  return `${XML_DECL}<p:presentation xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${OD_REL}" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"><p:sldMasterIdLst><p:sldMasterId id="2147483648" r:id="rId1"/></p:sldMasterIdLst><p:sldIdLst>${sldIds}</p:sldIdLst><p:sldSz cx="${EMU_W}" cy="${EMU_H}"/><p:notesSz cx="6858000" cy="9144000"/></p:presentation>`;
+}
+function presentationRelsXml(n) {
+  const rels = [
+    `<Relationship Id="rId1" Type="${OD_REL}/slideMaster" Target="slideMasters/slideMaster1.xml"/>`,
+    `<Relationship Id="rId2" Type="${OD_REL}/presProps" Target="presProps.xml"/>`
+  ];
+  for (let i = 0; i < n; i++) {
+    rels.push(
+      `<Relationship Id="rId${i + 3}" Type="${OD_REL}/slide" Target="slides/slide${i + 1}.xml"/>`
+    );
+  }
+  return `${XML_DECL}<Relationships xmlns="${REL_NS}">${rels.join("")}</Relationships>`;
+}
+function presPropsXml() {
+  return `${XML_DECL}<p:presentationPr xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${OD_REL}" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"/>`;
+}
+function slideMasterXml() {
+  return `${XML_DECL}<p:sldMaster xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${OD_REL}" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"><p:cSld><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr></p:spTree></p:cSld><p:clrMap bg1="lt1" tx1="dk1" bg2="lt2" tx2="dk2" accent1="accent1" accent2="accent2" accent3="accent3" accent4="accent4" accent5="accent5" accent6="accent6" hlink="hlink" folHlink="folHlink"/><p:sldLayoutIdLst><p:sldLayoutId id="2147483649" r:id="rId1"/></p:sldLayoutIdLst></p:sldMaster>`;
+}
+function slideMasterRelsXml() {
+  return `${XML_DECL}<Relationships xmlns="${REL_NS}"><Relationship Id="rId1" Type="${OD_REL}/slideLayout" Target="../slideLayouts/slideLayout1.xml"/><Relationship Id="rId2" Type="${OD_REL}/theme" Target="../theme/theme1.xml"/></Relationships>`;
+}
+function slideLayoutXml() {
+  return `${XML_DECL}<p:sldLayout xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${OD_REL}" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" type="blank" preserve="1"><p:cSld name="Blank"><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr></p:spTree></p:cSld><p:clrMapOvr><a:masterClrMapping/></p:clrMapOvr></p:sldLayout>`;
+}
+function slideLayoutRelsXml() {
+  return `${XML_DECL}<Relationships xmlns="${REL_NS}"><Relationship Id="rId1" Type="${OD_REL}/slideMaster" Target="../slideMasters/slideMaster1.xml"/></Relationships>`;
+}
+function slideXml() {
+  return `${XML_DECL}<p:sld xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${OD_REL}" xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main"><p:cSld><p:spTree><p:nvGrpSpPr><p:cNvPr id="1" name=""/><p:cNvGrpSpPr/><p:nvPr/></p:nvGrpSpPr><p:grpSpPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="0" cy="0"/><a:chOff x="0" y="0"/><a:chExt cx="0" cy="0"/></a:xfrm></p:grpSpPr><p:pic><p:nvPicPr><p:cNvPr id="2" name="Slide"/><p:cNvPicPr><a:picLocks noChangeAspect="1"/></p:cNvPicPr><p:nvPr/></p:nvPicPr><p:blipFill><a:blip r:embed="rId2"/><a:stretch><a:fillRect/></a:stretch></p:blipFill><p:spPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="${EMU_W}" cy="${EMU_H}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom></p:spPr></p:pic></p:spTree></p:cSld><p:clrMapOvr><a:masterClrMapping/></p:clrMapOvr></p:sld>`;
+}
+function slideRelsXml(idx) {
+  return `${XML_DECL}<Relationships xmlns="${REL_NS}"><Relationship Id="rId1" Type="${OD_REL}/slideLayout" Target="../slideLayouts/slideLayout1.xml"/><Relationship Id="rId2" Type="${OD_REL}/image" Target="../media/image${idx}.png"/></Relationships>`;
+}
+function themeXml() {
+  return `${XML_DECL}<a:theme xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" name="Office Theme"><a:themeElements><a:clrScheme name="Office"><a:dk1><a:sysClr val="windowText" lastClr="000000"/></a:dk1><a:lt1><a:sysClr val="window" lastClr="FFFFFF"/></a:lt1><a:dk2><a:srgbClr val="44546A"/></a:dk2><a:lt2><a:srgbClr val="E7E6E6"/></a:lt2><a:accent1><a:srgbClr val="4472C4"/></a:accent1><a:accent2><a:srgbClr val="ED7D31"/></a:accent2><a:accent3><a:srgbClr val="A5A5A5"/></a:accent3><a:accent4><a:srgbClr val="FFC000"/></a:accent4><a:accent5><a:srgbClr val="5B9BD5"/></a:accent5><a:accent6><a:srgbClr val="70AD47"/></a:accent6><a:hlink><a:srgbClr val="0563C1"/></a:hlink><a:folHlink><a:srgbClr val="954F72"/></a:folHlink></a:clrScheme><a:fontScheme name="Office"><a:majorFont><a:latin typeface="Calibri Light"/><a:ea typeface=""/><a:cs typeface=""/></a:majorFont><a:minorFont><a:latin typeface="Calibri"/><a:ea typeface=""/><a:cs typeface=""/></a:minorFont></a:fontScheme><a:fmtScheme name="Office"><a:fillStyleLst><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:gradFill rotWithShape="1"><a:gsLst><a:gs pos="0"><a:schemeClr val="phClr"><a:lumMod val="110000"/><a:satMod val="105000"/><a:tint val="67000"/></a:schemeClr></a:gs><a:gs pos="50000"><a:schemeClr val="phClr"><a:lumMod val="105000"/><a:satMod val="103000"/><a:tint val="73000"/></a:schemeClr></a:gs><a:gs pos="100000"><a:schemeClr val="phClr"><a:lumMod val="105000"/><a:satMod val="109000"/><a:tint val="81000"/></a:schemeClr></a:gs></a:gsLst><a:lin ang="5400000" scaled="0"/></a:gradFill><a:gradFill rotWithShape="1"><a:gsLst><a:gs pos="0"><a:schemeClr val="phClr"><a:satMod val="103000"/><a:lumMod val="102000"/><a:tint val="94000"/></a:schemeClr></a:gs><a:gs pos="50000"><a:schemeClr val="phClr"><a:satMod val="110000"/><a:lumMod val="100000"/><a:shade val="100000"/></a:schemeClr></a:gs><a:gs pos="100000"><a:schemeClr val="phClr"><a:lumMod val="99000"/><a:satMod val="120000"/><a:shade val="78000"/></a:schemeClr></a:gs></a:gsLst><a:lin ang="5400000" scaled="0"/></a:gradFill></a:fillStyleLst><a:lnStyleLst><a:ln w="6350" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:prstDash val="solid"/><a:miter lim="800000"/></a:ln><a:ln w="12700" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:prstDash val="solid"/><a:miter lim="800000"/></a:ln><a:ln w="19050" cap="flat" cmpd="sng" algn="ctr"><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:prstDash val="solid"/><a:miter lim="800000"/></a:ln></a:lnStyleLst><a:effectStyleLst><a:effectStyle><a:effectLst/></a:effectStyle><a:effectStyle><a:effectLst/></a:effectStyle><a:effectStyle><a:effectLst/></a:effectStyle></a:effectStyleLst><a:bgFillStyleLst><a:solidFill><a:schemeClr val="phClr"/></a:solidFill><a:solidFill><a:schemeClr val="phClr"><a:tint val="95000"/><a:satMod val="170000"/></a:schemeClr></a:solidFill><a:gradFill rotWithShape="1"><a:gsLst><a:gs pos="0"><a:schemeClr val="phClr"><a:tint val="93000"/><a:satMod val="150000"/><a:shade val="98000"/><a:lumMod val="102000"/></a:schemeClr></a:gs><a:gs pos="50000"><a:schemeClr val="phClr"><a:tint val="98000"/><a:satMod val="130000"/><a:shade val="90000"/><a:lumMod val="103000"/></a:schemeClr></a:gs><a:gs pos="100000"><a:schemeClr val="phClr"><a:shade val="63000"/><a:satMod val="120000"/></a:schemeClr></a:gs></a:gsLst><a:lin ang="5400000" scaled="0"/></a:gradFill></a:bgFillStyleLst></a:fmtScheme></a:themeElements></a:theme>`;
+}
+
+// src/slide/keys.ts
+function isTypingTarget(target) {
+  return target instanceof HTMLElement && (target.isContentEditable || target.matches("input, textarea"));
+}
+function hasModifier(e) {
+  return e.altKey || e.ctrlKey || e.metaKey;
+}
+function isForwardKey(e) {
+  return e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === " " || e.key === "PageDown";
+}
+function isBackwardKey(e) {
+  return e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "PageUp";
+}
+var THUMB_WIDTH = 176;
+var THUMB_HEIGHT = Math.round(THUMB_WIDTH * CANVAS_HEIGHT / CANVAS_WIDTH);
+var NUMBER_COLUMN = 20;
+var GUTTER = 10;
+var RAIL_WIDTH = NUMBER_COLUMN + THUMB_WIDTH + GUTTER * 3;
+var ITEM_BUTTON = {
+  display: "flex",
+  alignItems: "center",
+  gap: GUTTER,
+  width: "100%",
+  padding: 0,
+  border: "none",
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  cursor: "pointer",
+  textAlign: "left"
+};
+function SlideRail({ slides, index, onSelect, themeVars }) {
+  const listRef = useRef(null);
+  useEffect(() => {
+    const item = listRef.current?.children[index];
+    item?.scrollIntoView({ block: "nearest" });
+  }, [index]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slide-chrome": "",
+      "aria-label": "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7",
+      style: {
+        flex: "0 0 auto",
+        width: RAIL_WIDTH,
+        height: "100%",
+        overflowY: "auto",
+        overscrollBehavior: "contain",
+        background: "color-mix(in oklab, var(--slide-fg) 6%, var(--slide-bg))",
+        color: "var(--slide-fg)",
+        borderRight: "1px solid color-mix(in oklab, var(--slide-fg) 14%, transparent)",
+        fontFamily: 'system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif',
+        userSelect: "none",
+        // An embedded deck does not put the theme on its root, so the rail
+        // carries it too rather than reading whatever cascaded in.
+        ...themeVars
+      },
+      children: /* @__PURE__ */ jsx(
+        "ol",
+        {
+          ref: listRef,
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: GUTTER,
+            margin: 0,
+            padding: GUTTER,
+            listStyle: "none"
+          },
+          children: slides.map((slide, i) => {
+            const active = i === index;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                style: {
+                  contentVisibility: "auto",
+                  containIntrinsicSize: `${THUMB_HEIGHT}px ${RAIL_WIDTH - GUTTER * 2}px`
+                },
+                children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    style: ITEM_BUTTON,
+                    onClick: () => onSelect(i),
+                    "aria-current": active ? "true" : void 0,
+                    "aria-label": `\u30B9\u30E9\u30A4\u30C9 ${i + 1}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            flex: `0 0 ${NUMBER_COLUMN}px`,
+                            textAlign: "right",
+                            fontSize: 11,
+                            fontVariantNumeric: "tabular-nums",
+                            color: active ? "var(--slide-fg)" : "var(--slide-muted)",
+                            fontWeight: active ? 600 : 400
+                          },
+                          children: i + 1
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            position: "relative",
+                            display: "block",
+                            width: THUMB_WIDTH,
+                            height: THUMB_HEIGHT,
+                            overflow: "hidden",
+                            borderRadius: 4,
+                            background: "var(--slide-bg)",
+                            outline: active ? "2px solid color-mix(in oklab, var(--slide-fg) 55%, transparent)" : "1px solid color-mix(in oklab, var(--slide-fg) 14%, transparent)",
+                            outlineOffset: active ? 1 : 0,
+                            // The thumbnail is a picture of a slide, not a live copy:
+                            // clicks belong to the button, never to the slide's own
+                            // links and buttons.
+                            pointerEvents: "none"
+                          },
+                          children: /* @__PURE__ */ jsx(SlideNumberProvider, { index: i, total: slides.length, children: /* @__PURE__ */ jsx(SlideCanvas, { scale: THUMB_WIDTH / CANVAS_WIDTH, themeVars, children: slide }) })
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              i
+            );
+          })
+        }
+      )
+    }
+  );
+}
+var BUTTON = {
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 6,
+  height: 32,
+  minWidth: 32,
+  padding: "0 8px",
+  border: "none",
+  borderRadius: 8,
+  background: "transparent",
+  color: "inherit",
+  font: "inherit",
+  fontSize: 13,
+  cursor: "pointer"
+};
+function SlideToolbar({
+  current,
+  total,
+  onPrev,
+  onNext,
+  onFullscreen,
+  onExport,
+  exportProgress,
+  railOpen,
+  onToggleRail,
+  isFullscreen
+}) {
+  const [hovered, setHovered] = useState(false);
+  const busy = exportProgress !== null && exportProgress.phase !== "done";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slide-chrome": "",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        position: "absolute",
+        bottom: 16,
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        alignItems: "center",
+        gap: 2,
+        padding: 4,
+        borderRadius: 12,
+        background: "rgb(0 0 0 / 0.55)",
+        color: "#fff",
+        backdropFilter: "blur(8px)",
+        opacity: hovered || busy ? 1 : 0.25,
+        transition: "opacity 150ms ease",
+        fontFamily: 'system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif',
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onPrev, "aria-label": "\u524D\u306E\u30B9\u30E9\u30A4\u30C9", children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16, "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs("span", { style: { padding: "0 8px", fontSize: 13, fontVariantNumeric: "tabular-nums" }, children: [
+          current,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", style: BUTTON, onClick: onNext, "aria-label": "\u6B21\u306E\u30B9\u30E9\u30A4\u30C9", children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16, "aria-hidden": "true" }) }),
+        isFullscreen ? null : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: BUTTON,
+            onClick: onToggleRail,
+            "aria-label": railOpen ? "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u9589\u3058\u308B (L)" : "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u958B\u304F (L)",
+            title: railOpen ? "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u9589\u3058\u308B (L)" : "\u30B9\u30E9\u30A4\u30C9\u4E00\u89A7\u3092\u958B\u304F (L)",
+            "aria-pressed": railOpen,
+            children: railOpen ? /* @__PURE__ */ jsx(PanelLeftCloseIcon, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(PanelLeftOpenIcon, { size: 16, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            style: BUTTON,
+            onClick: onFullscreen,
+            "aria-label": isFullscreen ? "\u5168\u753B\u9762\u8868\u793A\u3092\u7D42\u4E86 (F)" : "\u5168\u753B\u9762\u8868\u793A (F)",
+            title: isFullscreen ? "\u5168\u753B\u9762\u8868\u793A\u3092\u7D42\u4E86 (F)" : "\u5168\u753B\u9762\u8868\u793A (F)",
+            children: isFullscreen ? /* @__PURE__ */ jsx(MinimizeIcon, { size: 16, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(MaximizeIcon, { size: 16, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            style: { ...BUTTON, opacity: busy ? 0.6 : 1, cursor: busy ? "progress" : "pointer" },
+            onClick: onExport,
+            disabled: busy,
+            "aria-label": "PowerPoint \u3068\u3057\u3066\u66F8\u304D\u51FA\u3059",
+            title: "PowerPoint \u3068\u3057\u3066\u66F8\u304D\u51FA\u3059",
+            children: [
+              /* @__PURE__ */ jsx(DownloadIcon, { size: 16, "aria-hidden": "true" }),
+              busy ? /* @__PURE__ */ jsxs("span", { children: [
+                Math.round(exportProgress.percent),
+                "%"
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var QUERY = "(prefers-reduced-motion: reduce)";
+function matches() {
+  if (typeof window === "undefined") return false;
+  return window.matchMedia(QUERY).matches;
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(matches);
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    setReduced(mql.matches);
+    const onChange = (e) => setReduced(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return reduced;
+}
+var StepHostContext = createContext(null);
+function StepHost({
+  isActiveSlide,
+  entryDirection,
+  controllerRef,
+  children
+}) {
+  const registrations = useRef([]);
+  const composite = useMemo(
+    () => ({
+      advance: () => {
+        for (const r of registrations.current) {
+          if (r.controller.advance()) return true;
+        }
+        return false;
+      },
+      retreat: () => {
+        for (let i = registrations.current.length - 1; i >= 0; i--) {
+          if (registrations.current[i].controller.retreat()) return true;
+        }
+        return false;
+      }
+    }),
+    []
+  );
+  useLayoutEffect(() => {
+    if (!isActiveSlide) return;
+    controllerRef.current = composite;
+    return () => {
+      if (controllerRef.current === composite) controllerRef.current = null;
+    };
+  }, [isActiveSlide, composite, controllerRef]);
+  const value = useMemo(
+    () => ({
+      register: (reg) => {
+        registrations.current.push(reg);
+        return () => {
+          const i = registrations.current.indexOf(reg);
+          if (i !== -1) registrations.current.splice(i, 1);
+        };
+      },
+      entryDirection,
+      isActiveSlide
+    }),
+    [entryDirection, isActiveSlide]
+  );
+  return /* @__PURE__ */ jsx(StepHostContext.Provider, { value, children });
+}
+function useIsActiveSlide() {
+  return useContext(StepHostContext)?.isActiveSlide ?? false;
+}
+function Steps({ children }) {
+  const host = useContext(StepHostContext);
+  const flat = Children.toArray(children);
+  const stepCount = flat.filter((c) => isValidElement(c) && c.type === Step).length;
+  const initial = host?.entryDirection === "forward" ? 0 : stepCount;
+  const revealedRef = useRef(initial);
+  const [revealed, setRevealed] = useState(initial);
+  const idRef = useRef({});
+  const applyRevealed = useCallback((n) => {
+    revealedRef.current = n;
+    setRevealed(n);
+  }, []);
+  useLayoutEffect(() => {
+    if (!host) return;
+    const controller = {
+      advance: () => {
+        if (revealedRef.current >= stepCount) return false;
+        applyRevealed(revealedRef.current + 1);
+        return true;
+      },
+      retreat: () => {
+        if (revealedRef.current <= 0) return false;
+        applyRevealed(revealedRef.current - 1);
+        return true;
+      }
+    };
+    return host.register({
+      id: idRef.current,
+      stepCount,
+      initialRevealed: revealedRef.current,
+      controller,
+      setRevealed: applyRevealed
+    });
+  }, [host, stepCount, applyRevealed]);
+  const effective = host ? revealed : stepCount;
+  let stepIndex = 0;
+  return /* @__PURE__ */ jsx(Fragment, { children: flat.map((child, key) => {
+    if (isValidElement(child) && child.type === Step) {
+      const index = stepIndex++;
+      return cloneElement(child, {
+        key: child.key ?? key,
+        _revealed: index < effective
+      });
+    }
+    return child;
+  }) });
+}
+function Step({ children, duration = 180, _revealed }) {
+  const reduceMotion = usePrefersReducedMotion();
+  const revealed = _revealed ?? true;
+  const ms = reduceMotion ? 0 : duration;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slide-step": revealed ? "revealed" : "pending",
+      style: {
+        opacity: revealed ? 1 : 0,
+        // `visibility` as well as opacity so a pending step is out of the
+        // accessibility tree and cannot be tabbed into.
+        visibility: revealed ? "visible" : "hidden",
+        transition: `opacity ${ms}ms cubic-bezier(0, 0, 0.2, 1)`
+      },
+      children
+    }
+  );
+}
+var DEFAULT_EASING = "cubic-bezier(.4, 0, .2, 1)";
+var MORPH_SELECTOR = "[data-slide-morph]";
+var TEXT_FILL_COLOR_PROPERTY = "-webkit-text-fill-color";
+var MORPH_VISUAL_PROPERTIES = [
+  "opacity",
+  "color",
+  "background-color",
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color",
+  "outline-color",
+  "text-decoration-color",
+  TEXT_FILL_COLOR_PROPERTY,
+  "-webkit-text-stroke-color",
+  "fill",
+  "stroke"
+];
+var BORDER_COLOR_PROPERTIES = [
+  "border-top-color",
+  "border-right-color",
+  "border-bottom-color",
+  "border-left-color"
+];
+var BORDER_SIDE_PROPERTIES = [
+  {
+    width: "borderTopWidth",
+    style: "borderTopStyle",
+    color: "borderTopColor",
+    cssWidth: "border-top-width",
+    cssStyle: "border-top-style",
+    cssColor: "border-top-color"
+  },
+  {
+    width: "borderRightWidth",
+    style: "borderRightStyle",
+    color: "borderRightColor",
+    cssWidth: "border-right-width",
+    cssStyle: "border-right-style",
+    cssColor: "border-right-color"
+  },
+  {
+    width: "borderBottomWidth",
+    style: "borderBottomStyle",
+    color: "borderBottomColor",
+    cssWidth: "border-bottom-width",
+    cssStyle: "border-bottom-style",
+    cssColor: "border-bottom-color"
+  },
+  {
+    width: "borderLeftWidth",
+    style: "borderLeftStyle",
+    color: "borderLeftColor",
+    cssWidth: "border-left-width",
+    cssStyle: "border-left-style",
+    cssColor: "border-left-color"
+  }
+];
+var INHERITED_VISUAL_PROPERTIES = /* @__PURE__ */ new Set([
+  "color",
+  "text-decoration-color",
+  TEXT_FILL_COLOR_PROPERTY,
+  "-webkit-text-stroke-color",
+  "fill",
+  "stroke"
+]);
+function runPhase(el, phase, fallbackDuration, fallbackEasing) {
+  if (!phase) return null;
+  return el.animate(phase.keyframes, {
+    duration: phase.duration ?? fallbackDuration,
+    easing: phase.easing ?? fallbackEasing,
+    delay: phase.delay ?? 0,
+    fill: "both"
+  });
+}
+function resolveMorph(morph, fallbackDuration, fallbackEasing) {
+  if (!morph) return null;
+  if (morph === true) return { duration: fallbackDuration, easing: fallbackEasing, delay: 0 };
+  return {
+    duration: morph.duration ?? fallbackDuration,
+    easing: morph.easing ?? fallbackEasing,
+    delay: morph.delay ?? 0
+  };
+}
+function localTransform(styles) {
+  return styles.transform && styles.transform !== "none" ? styles.transform : "";
+}
+function measureUntransformedClientRect(el) {
+  const styles = getComputedStyle(el);
+  if (!localTransform(styles)) return el.getBoundingClientRect();
+  const value = el.style.getPropertyValue("transform");
+  const priority = el.style.getPropertyPriority("transform");
+  el.style.setProperty("transform", "none", "important");
+  try {
+    return el.getBoundingClientRect();
+  } finally {
+    if (value) el.style.setProperty("transform", value, priority);
+    else el.style.removeProperty("transform");
+  }
+}
+function measureLocalRect(el, wrapper, wrapperRect) {
+  const rect = measureUntransformedClientRect(el);
+  const scaleX = wrapperRect.width / (wrapper.offsetWidth || wrapperRect.width || 1) || 1;
+  const scaleY = wrapperRect.height / (wrapper.offsetHeight || wrapperRect.height || 1) || 1;
+  return {
+    left: (rect.left - wrapperRect.left) / scaleX,
+    top: (rect.top - wrapperRect.top) / scaleY,
+    width: rect.width / scaleX,
+    height: rect.height / scaleY
+  };
+}
+function hasUsableRect(rect) {
+  return rect.width > 0 && rect.height > 0;
+}
+function collectMorphElements(root) {
+  const elements = /* @__PURE__ */ new Map();
+  for (const el of root.querySelectorAll(MORPH_SELECTOR)) {
+    const id = el.dataset.slideMorph;
+    if (id && !elements.has(id)) elements.set(id, el);
+  }
+  return elements;
+}
+function shouldSkipCopiedStyle(source, styles, prop, preserveInherited) {
+  if (prop === TEXT_FILL_COLOR_PROPERTY && styles.getPropertyValue(prop) === styles.color) {
+    return true;
+  }
+  if (!preserveInherited || !INHERITED_VISUAL_PROPERTIES.has(prop)) return false;
+  const parent = source.parentElement;
+  if (!parent) return false;
+  return styles.getPropertyValue(prop) === getComputedStyle(parent).getPropertyValue(prop);
+}
+function copyComputedStyles(source, target, preserveInherited = false) {
+  const styles = getComputedStyle(source);
+  for (let i = 0; i < styles.length; i++) {
+    const prop = styles[i];
+    if (shouldSkipCopiedStyle(source, styles, prop, preserveInherited)) continue;
+    target.style.setProperty(prop, styles.getPropertyValue(prop), styles.getPropertyPriority(prop));
+  }
+  const sourceChildren = source.querySelectorAll("*");
+  const targetChildren = target.querySelectorAll("*");
+  for (let i = 0; i < sourceChildren.length; i++) {
+    const child = targetChildren[i];
+    if (!child) continue;
+    copyComputedStyles(sourceChildren[i], child, true);
+  }
+}
+function cloneMorphElement(source) {
+  const clone = source.cloneNode(true);
+  copyComputedStyles(source, clone);
+  clone.removeAttribute("data-slide-morph");
+  return clone;
+}
+function parsePx(value) {
+  const match = value.trim().match(/^(-?\d*\.?\d+)px$/);
+  if (!match) return null;
+  const n = Number.parseFloat(match[1]);
+  return Number.isFinite(n) ? n : null;
+}
+function scaleRadius(value, scaleX, scaleY) {
+  const parts = value.trim().split(/\s+/);
+  const x = parsePx(parts[0] ?? "");
+  const y = parsePx(parts[1] ?? parts[0] ?? "");
+  if (x === null || y === null) return value;
+  const nextX = x / scaleX;
+  const nextY = y / scaleY;
+  return Math.abs(nextX - nextY) < 1e-3 ? `${nextX}px` : `${nextX}px ${nextY}px`;
+}
+function radiusKeyframe(styles, scaleX = 1, scaleY = 1) {
+  return {
+    borderTopLeftRadius: scaleRadius(styles.borderTopLeftRadius, scaleX, scaleY),
+    borderTopRightRadius: scaleRadius(styles.borderTopRightRadius, scaleX, scaleY),
+    borderBottomRightRadius: scaleRadius(styles.borderBottomRightRadius, scaleX, scaleY),
+    borderBottomLeftRadius: scaleRadius(styles.borderBottomLeftRadius, scaleX, scaleY)
+  };
+}
+function morphTransform(rect, scaleX, scaleY, local) {
+  return [`translate(${rect.left}px, ${rect.top}px)`, `scale(${scaleX}, ${scaleY})`, local].filter(Boolean).join(" ");
+}
+function morphTranslateTransform(rect, local) {
+  return [`translate(${rect.left}px, ${rect.top}px)`, local].filter(Boolean).join(" ");
+}
+function keyframeProperty(css) {
+  return css.replace(/^-/, "").replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function visualStyleKeyframe(styles, opacity, options = {}) {
+  const frame = {};
+  for (const prop of MORPH_VISUAL_PROPERTIES) {
+    if (options.includeBorderColors === false && BORDER_COLOR_PROPERTIES.includes(prop)) {
+      continue;
+    }
+    const value = styles.getPropertyValue(prop);
+    if (prop === TEXT_FILL_COLOR_PROPERTY && value === styles.color) continue;
+    if (value) frame[keyframeProperty(prop)] = value;
+  }
+  if (opacity !== void 0) frame.opacity = opacity;
+  return frame;
+}
+function hideBorderColors(el) {
+  for (const { color } of BORDER_SIDE_PROPERTIES) {
+    el.style[color] = "transparent";
+  }
+}
+function isVisibleBorderSide(styles, side) {
+  const width = parsePx(styles.getPropertyValue(side.cssWidth)) ?? 0;
+  const borderStyle = styles.getPropertyValue(side.cssStyle);
+  return width > 0 && borderStyle !== "none" && borderStyle !== "hidden";
+}
+function hasVisibleBorder(styles) {
+  return BORDER_SIDE_PROPERTIES.some((side) => isVisibleBorderSide(styles, side));
+}
+function borderFrameKeyframe(rect, styles, opacity) {
+  const frame = {
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    opacity,
+    transform: morphTranslateTransform(rect, localTransform(styles)),
+    ...radiusKeyframe(styles)
+  };
+  for (const side of BORDER_SIDE_PROPERTIES) {
+    frame[side.width] = styles.getPropertyValue(side.cssWidth);
+    frame[side.color] = styles.getPropertyValue(side.cssColor);
+  }
+  return frame;
+}
+function appendBorderFrame(wrapper, overlay, sourceStyles, targetStyles, rect) {
+  if (!overlay.parentElement) wrapper.appendChild(overlay);
+  const frame = document.createElement("div");
+  Object.assign(frame.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    margin: "0",
+    transformOrigin: "top left",
+    pointerEvents: "none",
+    boxSizing: "border-box",
+    background: "transparent"
+  });
+  for (const side of BORDER_SIDE_PROPERTIES) {
+    const styles = isVisibleBorderSide(sourceStyles, side) ? sourceStyles : targetStyles;
+    frame.style[side.style] = styles.getPropertyValue(side.cssStyle);
+    frame.style[side.width] = sourceStyles.getPropertyValue(side.cssWidth);
+    frame.style[side.color] = sourceStyles.getPropertyValue(side.cssColor);
+  }
+  overlay.appendChild(frame);
+  return frame;
+}
+function hasVisualStyleChange(from, to) {
+  for (const prop of MORPH_VISUAL_PROPERTIES) {
+    if (from.getPropertyValue(prop) !== to.getPropertyValue(prop)) return true;
+  }
+  return false;
+}
+function effectiveOpacity(el, boundary) {
+  let opacity = 1;
+  let node = el;
+  while (node && node !== boundary) {
+    const value = Number.parseFloat(getComputedStyle(node).opacity);
+    if (Number.isFinite(value)) opacity *= value;
+    node = node.parentElement;
+  }
+  return String(opacity);
+}
+function hideOriginal(el) {
+  const value = el.style.getPropertyValue("visibility");
+  const priority = el.style.getPropertyPriority("visibility");
+  el.style.setProperty("visibility", "hidden", "important");
+  return () => {
+    if (value) el.style.setProperty("visibility", value, priority);
+    else el.style.removeProperty("visibility");
+  };
+}
+function appendPositionedClone(wrapper, overlay, source, rect) {
+  if (!overlay.parentElement) wrapper.appendChild(overlay);
+  const clone = cloneMorphElement(source);
+  Object.assign(clone.style, {
+    position: "absolute",
+    left: "0",
+    top: "0",
+    width: `${rect.width}px`,
+    height: `${rect.height}px`,
+    margin: "0",
+    transformOrigin: "top left",
+    pointerEvents: "none",
+    boxSizing: "border-box"
+  });
+  overlay.appendChild(clone);
+  return clone;
+}
+function morphOptions(phase) {
+  return { duration: phase.duration, easing: phase.easing, delay: phase.delay, fill: "both" };
+}
+function runDescendantVisualStyleTransitions(clone, source, target, phase) {
+  const animations = [];
+  const cloneChildren = clone.querySelectorAll("*");
+  const sourceChildren = source.querySelectorAll("*");
+  const targetChildren = target.querySelectorAll("*");
+  for (let i = 0; i < sourceChildren.length; i++) {
+    const cloneChild = cloneChildren[i];
+    const targetChild = targetChildren[i];
+    if (!cloneChild || !targetChild) continue;
+    const sourceStyles = getComputedStyle(sourceChildren[i]);
+    const targetStyles = getComputedStyle(targetChild);
+    if (!hasVisualStyleChange(sourceStyles, targetStyles)) continue;
+    animations.push(
+      cloneChild.animate(
+        [visualStyleKeyframe(sourceStyles), visualStyleKeyframe(targetStyles)],
+        morphOptions(phase)
+      )
+    );
+  }
+  return animations;
+}
+function runStationaryMorph(clone, rect, styles, fromOpacity, toOpacity, phase) {
+  const transform = morphTransform(rect, 1, 1, localTransform(styles));
+  return clone.animate(
+    [
+      { ...visualStyleKeyframe(styles, fromOpacity), ...radiusKeyframe(styles), transform },
+      { ...visualStyleKeyframe(styles, toOpacity), ...radiusKeyframe(styles), transform }
+    ],
+    morphOptions(phase)
+  );
+}
+function runMorphTransition(wrapper, outgoingLayer, incomingLayer, phase) {
+  const wrapperRect = wrapper.getBoundingClientRect();
+  if (wrapperRect.width === 0 || wrapperRect.height === 0) {
+    return { animations: [], cleanup: () => {
+    } };
+  }
+  const incoming = collectMorphElements(incomingLayer);
+  const outgoing = collectMorphElements(outgoingLayer);
+  const overlay = document.createElement("div");
+  overlay.setAttribute("data-slide-morph-layer", "");
+  Object.assign(overlay.style, {
+    position: "absolute",
+    inset: "0",
+    zIndex: "2147483647",
+    pointerEvents: "none"
+  });
+  const animations = [];
+  const restore = [];
+  const fadeOutSource = (source, from) => {
+    const clone = appendPositionedClone(wrapper, overlay, source, from);
+    restore.push(hideOriginal(source));
+    animations.push(
+      runStationaryMorph(
+        clone,
+        from,
+        getComputedStyle(source),
+        effectiveOpacity(source, outgoingLayer),
+        "0",
+        phase
+      )
+    );
+  };
+  const fadeInTarget = (target, to) => {
+    const clone = appendPositionedClone(wrapper, overlay, target, to);
+    restore.push(hideOriginal(target));
+    animations.push(
+      runStationaryMorph(
+        clone,
+        to,
+        getComputedStyle(target),
+        "0",
+        effectiveOpacity(target, incomingLayer),
+        phase
+      )
+    );
+  };
+  for (const [id, source] of outgoing) {
+    const target = incoming.get(id);
+    const from = measureLocalRect(source, wrapper, wrapperRect);
+    if (!hasUsableRect(from)) {
+      if (target) {
+        const to2 = measureLocalRect(target, wrapper, wrapperRect);
+        if (hasUsableRect(to2)) fadeInTarget(target, to2);
+      }
+      continue;
+    }
+    if (!target) {
+      fadeOutSource(source, from);
+      continue;
+    }
+    const to = measureLocalRect(target, wrapper, wrapperRect);
+    if (!hasUsableRect(to)) {
+      fadeOutSource(source, from);
+      continue;
+    }
+    const clone = appendPositionedClone(wrapper, overlay, source, from);
+    restore.push(hideOriginal(source), hideOriginal(target));
+    const sourceStyles = getComputedStyle(source);
+    const targetStyles = getComputedStyle(target);
+    const fromOpacity = effectiveOpacity(source, outgoingLayer);
+    const toOpacity = effectiveOpacity(target, incomingLayer);
+    const needsBorderFrame = hasVisibleBorder(sourceStyles) || hasVisibleBorder(targetStyles);
+    const scaleX = to.width / from.width;
+    const scaleY = to.height / from.height;
+    if (needsBorderFrame) {
+      hideBorderColors(clone);
+      const borderFrame = appendBorderFrame(wrapper, overlay, sourceStyles, targetStyles, from);
+      animations.push(
+        borderFrame.animate(
+          [
+            borderFrameKeyframe(from, sourceStyles, fromOpacity),
+            borderFrameKeyframe(to, targetStyles, toOpacity)
+          ],
+          morphOptions(phase)
+        )
+      );
+    }
+    animations.push(
+      clone.animate(
+        [
+          {
+            ...visualStyleKeyframe(sourceStyles, fromOpacity, {
+              includeBorderColors: !needsBorderFrame
+            }),
+            ...radiusKeyframe(sourceStyles),
+            transform: morphTransform(from, 1, 1, localTransform(sourceStyles))
+          },
+          {
+            ...visualStyleKeyframe(targetStyles, toOpacity, {
+              includeBorderColors: !needsBorderFrame
+            }),
+            ...radiusKeyframe(targetStyles, scaleX, scaleY),
+            transform: morphTransform(to, scaleX, scaleY, localTransform(targetStyles))
+          }
+        ],
+        morphOptions(phase)
+      ),
+      ...runDescendantVisualStyleTransitions(clone, source, target, phase)
+    );
+  }
+  for (const [id, target] of incoming) {
+    if (outgoing.has(id)) continue;
+    const to = measureLocalRect(target, wrapper, wrapperRect);
+    if (!hasUsableRect(to)) continue;
+    fadeInTarget(target, to);
+  }
+  if (animations.length === 0) overlay.remove();
+  let cleaned = false;
+  return {
+    animations,
+    cleanup: () => {
+      if (cleaned) return;
+      cleaned = true;
+      for (const fn of restore) fn();
+      overlay.remove();
+    }
+  };
+}
+function SlideTransitionLayer({
+  slides,
+  transitions,
+  index,
+  disabled,
+  stepControllerRef,
+  entryDirection = "jump"
+}) {
+  const [current, setCurrent] = useState(index);
+  const [outgoing, setOutgoing] = useState(null);
+  const [direction, setDirection] = useState("forward");
+  const wrapperRef = useRef(null);
+  const outgoingLayerRef = useRef(null);
+  const incomingLayerRef = useRef(null);
+  const animationsRef = useRef([]);
+  const cleanupRef = useRef(null);
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  useEffect(() => {
+    if (index === currentRef.current) return;
+    const prev = currentRef.current;
+    const next = index;
+    for (const animation of animationsRef.current) {
+      try {
+        animation.cancel();
+      } catch {
+      }
+    }
+    animationsRef.current = [];
+    cleanupRef.current?.();
+    cleanupRef.current = null;
+    if (disabled || !transitions[next]) {
+      setCurrent(next);
+      setOutgoing(null);
+      return;
+    }
+    setDirection(next > prev ? "forward" : "backward");
+    setOutgoing(prev);
+    setCurrent(next);
+  }, [index, transitions, disabled]);
+  useLayoutEffect(() => {
+    if (outgoing === null) return;
+    const transition = transitions[current];
+    const wrapper = wrapperRef.current;
+    const out = outgoingLayerRef.current;
+    const inc = incomingLayerRef.current;
+    if (!transition || !wrapper || !out || !inc) {
+      setOutgoing(null);
+      return;
+    }
+    wrapper.dataset.slideDir = direction;
+    wrapper.style.setProperty("--slide-dir", direction === "forward" ? "1" : "-1");
+    const easing = transition.easing ?? DEFAULT_EASING;
+    const duration = transition.duration;
+    const morphPhase = resolveMorph(transition.morph, duration, easing);
+    const morphRun = morphPhase ? runMorphTransition(wrapper, out, inc, morphPhase) : null;
+    const animations = [];
+    const exitAnimation = runPhase(out, transition.exit, duration, easing);
+    const enterAnimation = runPhase(inc, transition.enter, duration, easing);
+    if (exitAnimation) animations.push(exitAnimation);
+    if (enterAnimation) animations.push(enterAnimation);
+    const cleanups = [];
+    if (morphRun) {
+      animations.push(...morphRun.animations);
+      cleanups.push(morphRun.cleanup);
+      if (!exitAnimation && morphRun.animations.length > 0) cleanups.push(hideOriginal(out));
+    }
+    animationsRef.current = animations;
+    if (animations.length === 0) {
+      for (const fn of cleanups) fn();
+      setOutgoing(null);
+      return;
+    }
+    let cleaned = false;
+    const cleanup = () => {
+      if (cleaned) return;
+      cleaned = true;
+      for (const fn of cleanups) fn();
+      if (cleanupRef.current === cleanup) cleanupRef.current = null;
+    };
+    cleanupRef.current = cleanup;
+    let cancelled = false;
+    Promise.all(animations.map((a) => a.finished)).then(() => {
+      if (cancelled) return;
+      cleanup();
+      animationsRef.current = [];
+      setOutgoing(null);
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [outgoing, current, direction, transitions]);
+  useEffect(() => {
+    return () => {
+      for (const animation of animationsRef.current) {
+        try {
+          animation.cancel();
+        } catch {
+        }
+      }
+      animationsRef.current = [];
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
+  }, []);
+  const total = slides.length;
+  const currentSlide = slides[current];
+  const outgoingSlide = outgoing !== null ? slides[outgoing] : null;
+  const outgoingEntryDirection = entryDirection === "backward" ? "forward" : "backward";
+  const fallbackControllerRef = useRef(null);
+  const controllerRef = stepControllerRef ?? fallbackControllerRef;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      style: {
+        position: "relative",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden",
+        background: "var(--slide-bg)"
+      },
+      children: [
+        outgoingSlide && outgoing !== null ? /* @__PURE__ */ jsx("div", { ref: outgoingLayerRef, style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx(SlideNumberProvider, { index: outgoing, total, children: /* @__PURE__ */ jsx(
+          StepHost,
+          {
+            isActiveSlide: false,
+            entryDirection: outgoingEntryDirection,
+            controllerRef,
+            children: outgoingSlide
+          }
+        ) }) }) : null,
+        currentSlide ? /* @__PURE__ */ jsx("div", { ref: incomingLayerRef, style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ jsx(SlideNumberProvider, { index: current, total, children: /* @__PURE__ */ jsx(StepHost, { isActiveSlide: true, entryDirection, controllerRef, children: currentSlide }) }) }) : null
+      ]
+    }
+  );
+}
+var PASSTHROUGH = 'a, button, input, textarea, select, label, summary, iframe, video, audio, embed, object, [role="button"], [role="link"], [contenteditable="true"], [data-slide-interactive], [data-slide-chrome]';
+function useClickNav({
+  ref,
+  enabled = true,
+  edgeRatio = 0.3,
+  canPrev,
+  canNext,
+  onPrev,
+  onNext
+}) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || !enabled) return;
+    const onClick = (event) => {
+      if (event.button !== 0 || event.defaultPrevented) return;
+      const target = event.target;
+      if (target instanceof Element && target.closest(PASSTHROUGH)) return;
+      if (window.getSelection()?.toString()) return;
+      const rect = el.getBoundingClientRect();
+      if (rect.width === 0) return;
+      const x = (event.clientX - rect.left) / rect.width;
+      if (x < edgeRatio) {
+        onPrev();
+      } else if (x > 1 - edgeRatio) {
+        onNext();
+      }
+    };
+    el.addEventListener("click", onClick);
+    return () => el.removeEventListener("click", onClick);
+  }, [ref, enabled, edgeRatio, canPrev, canNext, onPrev, onNext]);
+}
+function Slide({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+Slide.displayName = "Slide";
+function collectSlides(children) {
+  const slides = [];
+  const transitions = [];
+  for (const child of Children.toArray(children)) {
+    if (!isValidElement(child) || child.type !== Slide) continue;
+    slides.push(child);
+    transitions.push(child.props.transition);
+  }
+  return { slides, transitions };
+}
+function defaultExportName() {
+  if (typeof window === "undefined") return "slides";
+  const parts = window.location.pathname.split("/").filter(Boolean);
+  return parts[parts.length - 1] ?? "slides";
+}
+function SlideDeck({
+  theme,
+  embedded = false,
+  exportName,
+  // Reads `embedded` from earlier in this same pattern, which is why the two
+  // must stay in this order.
+  rail = !embedded,
+  children
+}) {
+  const { slides, transitions } = useMemo(() => collectSlides(children), [children]);
+  const total = slides.length;
+  const [page, setPage] = useSearchState("p", 1);
+  const index = Math.min(Math.max(Math.floor(page) - 1, 0), Math.max(total - 1, 0));
+  const [railOpen, setRailOpen] = useSearchState("rail", rail);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [entryDirection, setEntryDirection] = useState("jump");
+  const [exporting, setExporting] = useState(null);
+  const stepControllerRef = useRef(null);
+  const viewportRef = useRef(null);
+  const stageRef = useRef(null);
+  const reduceMotion = usePrefersReducedMotion();
+  const goTo = useCallback(
+    (next, direction) => {
+      const clamped = Math.min(Math.max(next, 0), Math.max(total - 1, 0));
+      setEntryDirection(direction);
+      setPage(clamped + 1);
+    },
+    [setPage, total]
+  );
+  const goNext = useCallback(() => {
+    if (stepControllerRef.current?.advance()) return;
+    if (index < total - 1) goTo(index + 1, "forward");
+  }, [goTo, index, total]);
+  const goPrev = useCallback(() => {
+    if (stepControllerRef.current?.retreat()) return;
+    if (index > 0) goTo(index - 1, "backward");
+  }, [goTo, index]);
+  const toggleRail = useCallback(() => setRailOpen((open) => !open), [setRailOpen]);
+  const toggleFullscreen = useCallback(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else void el.requestFullscreen?.();
+  }, []);
+  useEffect(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === viewportRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (isTypingTarget(event.target)) return;
+      if (isForwardKey(event)) {
+        event.preventDefault();
+        goNext();
+        return;
+      }
+      if (isBackwardKey(event)) {
+        event.preventDefault();
+        goPrev();
+        return;
+      }
+      if (hasModifier(event)) return;
+      if (event.key === "Home") {
+        event.preventDefault();
+        goTo(0, "jump");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        goTo(total - 1, "jump");
+        return;
+      }
+      if (event.key === "f" || event.key === "F") {
+        event.preventDefault();
+        toggleFullscreen();
+        return;
+      }
+      if (event.key === "l" || event.key === "L") {
+        event.preventDefault();
+        toggleRail();
+        return;
+      }
+      if (event.key === "Escape" && !document.fullscreenElement) {
+        window.history.back();
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [goNext, goPrev, goTo, toggleFullscreen, toggleRail, total]);
+  useClickNav({
+    // The stage, not the whole deck: the edge thirds that turn the page are
+    // measured against the slide, so opening the rail must not shift them.
+    ref: stageRef,
+    canPrev: true,
+    canNext: true,
+    onPrev: goPrev,
+    onNext: goNext
+  });
+  useEffect(() => {
+    if (embedded) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [embedded]);
+  const selectSlide = useCallback(
+    (next) => goTo(next, "jump"),
+    [goTo]
+  );
+  const onExport = useCallback(async () => {
+    if (exporting) return;
+    try {
+      await exportDeckAsPptx({
+        slides,
+        theme,
+        fileName: exportName ?? defaultExportName(),
+        onProgress: setExporting
+      });
+    } finally {
+      setExporting(null);
+    }
+  }, [exporting, slides, theme, exportName]);
+  const themeVars = themeToCssVars(theme);
+  const showRail = railOpen && !isFullscreen;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: viewportRef,
+      "data-slide-deck": "",
+      style: embedded ? { position: "relative", width: "100%", aspectRatio: "16 / 9", background: "var(--slide-bg)" } : {
+        position: "fixed",
+        inset: 0,
+        zIndex: 50,
+        background: "var(--slide-bg)",
+        ...themeVars
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", height: "100%", width: "100%" }, children: [
+        showRail ? /* @__PURE__ */ jsx(SlideRail, { slides, index, onSelect: selectSlide, themeVars }) : null,
+        /* @__PURE__ */ jsxs("div", { ref: stageRef, style: { position: "relative", flex: "1 1 auto", minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(SlideCanvas, { themeVars, children: /* @__PURE__ */ jsx(
+            SlideTransitionLayer,
+            {
+              slides,
+              transitions,
+              index,
+              disabled: reduceMotion,
+              stepControllerRef,
+              entryDirection
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            SlideToolbar,
+            {
+              current: index + 1,
+              total,
+              onPrev: goPrev,
+              onNext: goNext,
+              onFullscreen: toggleFullscreen,
+              onExport,
+              exportProgress: exporting,
+              railOpen,
+              onToggleRail: toggleRail,
+              isFullscreen
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+SlideDeck.displayName = "SlideDeck";
+function MorphElement({ id, children, className, style }) {
+  const child = Children.toArray(children)[0] ?? null;
+  if (Children.count(children) === 1 && isValidElement(child) && typeof child.type === "string") {
+    return cloneElement(child, {
+      "data-slide-morph": id,
+      className: [child.props.className, className].filter(Boolean).join(" ") || void 0,
+      style: style ? { ...child.props.style, ...style } : child.props.style
+    });
+  }
+  return /* @__PURE__ */ jsx("div", { className, style, "data-slide-morph": id, children });
+}
+
+export { CANVAS_HEIGHT, CANVAS_WIDTH, MorphElement, Slide, SlideCanvas, SlideDeck, Step, Steps, exportDeckAsPptx, useIsActiveSlide, useSlideNumber };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map