@theokit/ui 0.13.0

package/dist/slide-deck/index.js

@@ -0,0 +1,1111 @@
+import { Slide, extractFrontmatter } from '../chunk-ZUS5KZGO.js';
+import { createContext, useContext, useRef, useState, useEffect, useCallback, useMemo, useReducer, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+var DeckContext = createContext(null);
+function useDeckContext() {
+  const ctx = useContext(DeckContext);
+  if (!ctx) {
+    throw new Error(
+      "SlideDeck sub-components must be used inside <SlideDeck>. Wrap them in <SlideDeck slides={...}>."
+    );
+  }
+  return ctx;
+}
+var Controls = ({ className }) => {
+  const { state, dispatch } = useDeckContext();
+  const atStart = state.currentIndex <= 0;
+  const atEnd = state.currentIndex >= state.totalSlides - 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["theo-slide-deck-controls", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-controls": true,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Previous slide",
+            disabled: atStart,
+            onClick: () => dispatch({ type: "PREV_SLIDE" }),
+            className: "theo-slide-deck-controls-prev",
+            children: "\u2190"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-live": "polite",
+            className: "theo-slide-deck-controls-indicator",
+            style: { fontVariantNumeric: "tabular-nums", minWidth: 64, textAlign: "center" },
+            children: state.totalSlides === 0 ? "0 / 0" : `${state.currentIndex + 1} / ${state.totalSlides}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Next slide",
+            disabled: atEnd,
+            onClick: () => dispatch({ type: "NEXT_SLIDE" }),
+            className: "theo-slide-deck-controls-next",
+            children: "\u2192"
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/composites/slide-deck/fragments.ts
+var FRAGMENT_MARKER_RE = /^\s*\*\s+\S/gm;
+function countFragmentsInMarkdown(markdown) {
+  if (!markdown) return 0;
+  const stripped = markdown.replace(/```[\s\S]*?```/g, "");
+  const matches = stripped.match(FRAGMENT_MARKER_RE);
+  return matches ? matches.length : 0;
+}
+function formatElapsed(ms) {
+  const s = Math.floor(ms / 1e3);
+  const mm = Math.floor(s / 60).toString().padStart(2, "0");
+  const ss = (s % 60).toString().padStart(2, "0");
+  return `${mm}:${ss}`;
+}
+var PresenterView = ({ className }) => {
+  const { state, slides } = useDeckContext();
+  const startedAt = useRef(null);
+  const [elapsed, setElapsed] = useState(0);
+  useEffect(() => {
+    if (state.presenterMode) {
+      if (startedAt.current === null) {
+        startedAt.current = Date.now();
+      }
+      const interval = window.setInterval(() => {
+        if (startedAt.current !== null) {
+          setElapsed(Date.now() - startedAt.current);
+        }
+      }, 1e3);
+      return () => window.clearInterval(interval);
+    }
+    startedAt.current = null;
+    setElapsed(0);
+    return void 0;
+  }, [state.presenterMode]);
+  if (!state.presenterMode) return null;
+  const current = slides[state.currentIndex];
+  const next = slides[state.currentIndex + 1];
+  const notes = current?.notes;
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: ["theo-slide-deck-presenter", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-presenter": true,
+      "aria-label": "Presenter view",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr",
+        gridTemplateRows: "auto 1fr",
+        gap: 16,
+        padding: 16,
+        background: "color-mix(in srgb, currentColor 6%, transparent)",
+        borderRadius: 8
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            style: {
+              gridColumn: "1 / -1",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 14, fontWeight: 600 }, children: "Presenter view" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-label": "Elapsed time",
+                  style: { fontVariantNumeric: "tabular-nums", fontSize: 14 },
+                  children: formatElapsed(elapsed)
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("section", { "aria-label": "Current slide preview", children: [
+          /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px", fontSize: 12, opacity: 0.7 }, children: "Current" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                aspectRatio: "16 / 9",
+                overflow: "hidden",
+                border: "1px solid rgba(127,127,127,0.3)",
+                borderRadius: 6
+              },
+              children: current ? /* @__PURE__ */ jsx(Slide, { markdown: current.markdown, "aria-label": "Current slide" }) : null
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("section", { "aria-label": "Next slide preview", children: [
+          /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px", fontSize: 12, opacity: 0.7 }, children: "Next" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                aspectRatio: "16 / 9",
+                overflow: "hidden",
+                border: "1px solid rgba(127,127,127,0.3)",
+                borderRadius: 6,
+                opacity: next ? 1 : 0.4
+              },
+              children: next ? /* @__PURE__ */ jsx(Slide, { markdown: next.markdown, "aria-label": "Next slide" }) : /* @__PURE__ */ jsx("div", { style: { padding: 16, fontSize: 14, opacity: 0.6 }, children: "End of deck" })
+            }
+          )
+        ] }),
+        notes ? /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": "Speaker notes",
+            style: {
+              gridColumn: "1 / -1",
+              background: "color-mix(in srgb, currentColor 8%, transparent)",
+              padding: 12,
+              borderRadius: 6,
+              fontSize: 14,
+              whiteSpace: "pre-wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx("strong", { children: "Notes: " }),
+              notes
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+};
+
+// src/components/composites/slide-deck/print-styles.ts
+var STYLE_ID = "theo-slide-deck-print-styles";
+var PRINT_CSS = `
+@media print {
+  @page {
+    size: 1280px 720px;
+    margin: 0;
+  }
+  body > * {
+    visibility: hidden;
+  }
+  .theo-slide-deck-print-container,
+  .theo-slide-deck-print-container * {
+    visibility: visible;
+  }
+  .theo-slide-deck-print-container {
+    position: absolute;
+    inset: 0;
+  }
+  .theo-slide-deck-print-slide {
+    page-break-after: always;
+    break-after: page;
+    width: 1280px;
+    height: 720px;
+    overflow: hidden;
+  }
+  .theo-slide-deck-print-slide:last-child {
+    page-break-after: auto;
+    break-after: auto;
+  }
+}
+`;
+function injectPrintStyles() {
+  if (typeof document === "undefined") {
+    throw new Error("injectPrintStyles requires a document (browser env)");
+  }
+  let style = document.getElementById(STYLE_ID);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = PRINT_CSS;
+    document.head.appendChild(style);
+  }
+  return style;
+}
+function removePrintStyles() {
+  if (typeof document === "undefined") return;
+  const style = document.getElementById(STYLE_ID);
+  if (style) style.remove();
+}
+function printDeck(opts = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") return;
+  injectPrintStyles();
+  const cleanup = () => {
+    removePrintStyles();
+    window.removeEventListener("afterprint", cleanup);
+    opts.onAfterPrint?.();
+  };
+  window.addEventListener("afterprint", cleanup);
+  window.print();
+}
+var ProgressBar = ({ className }) => {
+  const { state } = useDeckContext();
+  const value = state.totalSlides === 0 ? 0 : state.currentIndex + 1;
+  const max = Math.max(1, state.totalSlides);
+  return /* @__PURE__ */ jsx(
+    "progress",
+    {
+      className: ["theo-slide-deck-progress", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-progress": true,
+      value,
+      max,
+      "aria-label": "Slide progress"
+    }
+  );
+};
+var SlideNumber = ({ className }) => {
+  const { state } = useDeckContext();
+  if (state.totalSlides === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["theo-slide-deck-slide-number", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-slide-number": true,
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        bottom: 12,
+        right: 16,
+        fontVariantNumeric: "tabular-nums",
+        fontSize: 14,
+        opacity: 0.6
+      },
+      children: [
+        state.currentIndex + 1,
+        " / ",
+        state.totalSlides
+      ]
+    }
+  );
+};
+
+// src/components/composites/slide-deck/notes.ts
+var NOTES_RE = /<!--\s*notes?:\s*([\s\S]*?)\s*-->/gi;
+function extractNotes(md) {
+  const matches = [...md.matchAll(NOTES_RE)];
+  if (matches.length === 0) {
+    return { body: md, notes: void 0 };
+  }
+  const notes = matches.map((m) => (m[1] ?? "").trim()).filter((s) => s.length > 0).join("\n\n");
+  const body = md.replace(NOTES_RE, "").trim();
+  return { body, notes: notes.length > 0 ? notes : void 0 };
+}
+
+// src/components/composites/slide-deck/split-deck.ts
+async function splitDeck(markdown) {
+  const { body: bodyAfterFM } = extractFrontmatter(markdown);
+  if (bodyAfterFM.trim().length === 0) {
+    return [];
+  }
+  const { fromMarkdown } = await import('mdast-util-from-markdown');
+  const tree = fromMarkdown(bodyAfterFM);
+  const breakOffsets = [];
+  for (const node of tree.children) {
+    if (node.type === "thematicBreak") {
+      const start = node.position?.start.offset;
+      const end = node.position?.end.offset;
+      if (typeof start === "number" && typeof end === "number") {
+        breakOffsets.push(start);
+        breakOffsets.push(end);
+      }
+    }
+  }
+  if (breakOffsets.length === 0) {
+    const { body, notes } = extractNotes(bodyAfterFM);
+    if (body.trim().length === 0 && !notes) return [];
+    return [{ markdown: body, notes }];
+  }
+  const slides = [];
+  const positions = [0];
+  for (let i = 0; i < breakOffsets.length; i += 2) {
+    const start = breakOffsets[i];
+    const end = breakOffsets[i + 1];
+    if (typeof start === "number") positions.push(start);
+    if (typeof end === "number") positions.push(end);
+  }
+  positions.push(bodyAfterFM.length);
+  for (let i = 0; i < positions.length - 1; i += 2) {
+    const start = positions[i];
+    const end = positions[i + 1];
+    if (typeof start !== "number" || typeof end !== "number") continue;
+    const chunk = bodyAfterFM.slice(start, end).trim();
+    if (chunk.length === 0) continue;
+    const { body, notes } = extractNotes(chunk);
+    if (body.trim().length === 0 && !notes) continue;
+    slides.push({ markdown: body, notes });
+  }
+  return slides;
+}
+var CANVAS_W = 1280;
+var CANVAS_H = 720;
+var ThumbnailItem = ({
+  markdown,
+  index,
+  isCurrent,
+  scale,
+  eager,
+  onSelect,
+  registerRef
+}) => {
+  const [revealed, setRevealed] = useState(eager);
+  const setRef = useCallback(
+    (el) => {
+      registerRef(index, el);
+      if (eager) return;
+      if (!el) return;
+      if (typeof IntersectionObserver === "undefined") {
+        setRevealed(true);
+        return;
+      }
+      const io = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (entry.isIntersecting) {
+              setRevealed(true);
+              io.disconnect();
+              break;
+            }
+          }
+        },
+        { rootMargin: "200px" }
+      );
+      io.observe(el);
+    },
+    [index, eager, registerRef]
+  );
+  const w = Math.round(CANVAS_W * scale);
+  const h = Math.round(CANVAS_H * scale);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: setRef,
+      type: "button",
+      onClick: () => onSelect(index),
+      "data-theo-slide-deck-thumbnail": true,
+      "data-current": isCurrent || void 0,
+      "aria-label": `Slide ${index + 1}`,
+      "aria-current": isCurrent ? "page" : void 0,
+      className: "theo-slide-deck-thumbnail",
+      style: {
+        width: w,
+        height: h,
+        padding: 0,
+        border: isCurrent ? "2px solid currentColor" : "1px solid rgba(127,127,127,0.3)",
+        borderRadius: 6,
+        overflow: "hidden",
+        position: "relative",
+        cursor: "pointer",
+        flexShrink: 0,
+        background: "transparent"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: CANVAS_W,
+            height: CANVAS_H,
+            transform: `scale(${scale})`,
+            transformOrigin: "top left",
+            pointerEvents: "none"
+          },
+          children: revealed ? /* @__PURE__ */ jsx(Slide, { markdown, "aria-label": `Thumbnail ${index + 1}` }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-theo-slide-deck-thumbnail-placeholder": true,
+              style: {
+                width: "100%",
+                height: "100%",
+                background: "rgba(127,127,127,0.08)"
+              }
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var Thumbnails = ({ className, scale = 0.18 }) => {
+  const { state, dispatch, slides } = useDeckContext();
+  const refs = useRef(/* @__PURE__ */ new Map());
+  const registerRef = useCallback((index, el) => {
+    if (el) {
+      refs.current.set(index, el);
+    } else {
+      refs.current.delete(index);
+    }
+  }, []);
+  const onSelect = useCallback(
+    (index) => {
+      dispatch({ type: "JUMP_TO", index });
+    },
+    [dispatch]
+  );
+  useEffect(() => {
+    const el = refs.current.get(state.currentIndex);
+    if (el && "scrollIntoView" in el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    }
+  }, [state.currentIndex]);
+  const eagerAll = useMemo(() => typeof IntersectionObserver === "undefined", []);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      className: ["theo-slide-deck-thumbnails", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-thumbnails": true,
+      "aria-label": "Slide thumbnails",
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        overflowY: "auto",
+        padding: 8,
+        listStyle: "none",
+        margin: 0
+      },
+      children: slides.map((slide, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        ThumbnailItem,
+        {
+          markdown: slide.markdown,
+          index,
+          isCurrent: index === state.currentIndex,
+          scale,
+          eager: eagerAll || index < 3,
+          onSelect,
+          registerRef
+        }
+      ) }, `${slide.id ?? index}-${index}`))
+    }
+  );
+};
+function readHashIndex(hash) {
+  if (!hash || hash === "#" || hash === "#/") return void 0;
+  const match = hash.match(/^#\/(\d+)/);
+  if (!match) return void 0;
+  const oneBased = Number.parseInt(match[1] ?? "", 10);
+  if (!Number.isFinite(oneBased) || oneBased < 1) return void 0;
+  return oneBased - 1;
+}
+function readInitialHash() {
+  if (typeof window === "undefined") return void 0;
+  return readHashIndex(window.location.hash);
+}
+function formatHash(zeroBasedIndex) {
+  return `#/${zeroBasedIndex + 1}`;
+}
+function useDeckHashRouting(dispatch, opts) {
+  const { enabled = true, totalSlides, currentIndex } = opts;
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined") return;
+    const handler = () => {
+      const idx = readHashIndex(window.location.hash);
+      if (typeof idx !== "number") return;
+      const clamped = Math.max(0, Math.min(idx, Math.max(0, totalSlides - 1)));
+      dispatch({ type: "JUMP_TO", index: clamped });
+    };
+    window.addEventListener("hashchange", handler);
+    return () => window.removeEventListener("hashchange", handler);
+  }, [enabled, totalSlides, dispatch]);
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof window === "undefined") return;
+    const targetHash = formatHash(currentIndex);
+    if (window.location.hash === targetHash) return;
+    window.history.replaceState(null, "", targetHash);
+  }, [enabled, currentIndex]);
+}
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (target.isContentEditable) return true;
+  return false;
+}
+function useDeckKeyboard(dispatch, opts) {
+  const { enabled = true, totalSlides, onToggleFullscreen, onPrint } = opts;
+  useEffect(() => {
+    if (!enabled) return;
+    const handler = (event) => {
+      if (isEditableTarget(event.target)) return;
+      const key = event.key;
+      const isPrintCombo = (event.ctrlKey || event.metaKey) && (key === "p" || key === "P");
+      if (isPrintCombo) {
+        event.preventDefault();
+        onPrint?.();
+        return;
+      }
+      switch (key) {
+        case "ArrowRight":
+        case " ":
+        case "Spacebar":
+        case "PageDown":
+          dispatch({ type: "NEXT_SLIDE" });
+          break;
+        case "ArrowLeft":
+        case "PageUp":
+          dispatch({ type: "PREV_SLIDE" });
+          break;
+        case "Home":
+          dispatch({ type: "JUMP_TO", index: 0 });
+          break;
+        case "End":
+          dispatch({ type: "JUMP_TO", index: Math.max(0, totalSlides - 1) });
+          break;
+        case "Escape":
+          dispatch({ type: "SET_FULLSCREEN", value: false });
+          break;
+        case "f":
+        case "F":
+          onToggleFullscreen?.();
+          break;
+        case "n":
+        case "N":
+        case "p":
+        case "P":
+          dispatch({ type: "TOGGLE_PRESENTER" });
+          break;
+        default:
+          return;
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [enabled, totalSlides, dispatch, onToggleFullscreen, onPrint]);
+}
+function deckReducer(state, action) {
+  switch (action.type) {
+    case "NEXT_SLIDE": {
+      if (state.currentFragment < state.totalFragmentsInCurrent) {
+        return { ...state, currentFragment: state.currentFragment + 1 };
+      }
+      const next = Math.min(state.currentIndex + 1, Math.max(0, state.totalSlides - 1));
+      if (next === state.currentIndex) return state;
+      return {
+        ...state,
+        currentIndex: next,
+        currentFragment: 0,
+        transitionDirection: "next"
+      };
+    }
+    case "PREV_SLIDE": {
+      if (state.currentFragment > 0) {
+        return { ...state, currentFragment: state.currentFragment - 1 };
+      }
+      const prev = Math.max(state.currentIndex - 1, 0);
+      if (prev === state.currentIndex) return state;
+      return {
+        ...state,
+        currentIndex: prev,
+        currentFragment: 0,
+        transitionDirection: "prev"
+      };
+    }
+    case "JUMP_TO": {
+      const clamped = Math.max(0, Math.min(action.index, Math.max(0, state.totalSlides - 1)));
+      if (clamped === state.currentIndex) return state;
+      return {
+        ...state,
+        currentIndex: clamped,
+        currentFragment: 0,
+        transitionDirection: "none"
+      };
+    }
+    case "NEXT_FRAGMENT": {
+      if (state.currentFragment >= state.totalFragmentsInCurrent) return state;
+      return { ...state, currentFragment: state.currentFragment + 1 };
+    }
+    case "PREV_FRAGMENT": {
+      if (state.currentFragment <= 0) return state;
+      return { ...state, currentFragment: state.currentFragment - 1 };
+    }
+    case "RESET_FRAGMENTS":
+      return { ...state, currentFragment: 0 };
+    case "TOGGLE_PRESENTER":
+      return { ...state, presenterMode: !state.presenterMode };
+    case "SET_FULLSCREEN":
+      return state.fullscreen === action.value ? state : { ...state, fullscreen: action.value };
+    case "UPDATE_TOTAL_SLIDES": {
+      const next = Math.max(0, action.total);
+      const clampedIdx = Math.max(0, Math.min(state.currentIndex, Math.max(0, next - 1)));
+      return { ...state, totalSlides: next, currentIndex: clampedIdx };
+    }
+    case "UPDATE_TOTAL_FRAGMENTS":
+      return { ...state, totalFragmentsInCurrent: Math.max(0, action.total) };
+    case "TRANSITION_END":
+      return state.transitionDirection === "none" ? state : { ...state, transitionDirection: "none" };
+  }
+}
+function initDeckState(init) {
+  const total = Math.max(0, init.totalSlides);
+  let idx = init.initialIndex ?? 0;
+  if (init.initFromHash) {
+    const fromHash = init.initFromHash();
+    if (typeof fromHash === "number" && Number.isFinite(fromHash)) {
+      idx = fromHash;
+    }
+  }
+  const clamped = Math.max(0, Math.min(idx, Math.max(0, total - 1)));
+  return {
+    currentIndex: clamped,
+    currentFragment: 0,
+    presenterMode: false,
+    fullscreen: false,
+    transitionDirection: "none",
+    totalSlides: total,
+    totalFragmentsInCurrent: 0
+  };
+}
+function useDeckState(opts) {
+  const [state, dispatch] = useReducer(deckReducer, opts, initDeckState);
+  return [state, dispatch];
+}
+var SWIPE_THRESHOLD_PX = 50;
+var SWIPE_VELOCITY_PX_PER_MS = 0.3;
+function useDeckSwipe(ref, dispatch, opts = {}) {
+  const { enabled = true } = opts;
+  useEffect(() => {
+    if (!enabled) return;
+    const el = ref.current;
+    if (!el) return;
+    let tracked = null;
+    const onPointerDown = (e) => {
+      if (tracked !== null) return;
+      tracked = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startedAt: e.timeStamp
+      };
+    };
+    const onPointerUp = (e) => {
+      if (!tracked || e.pointerId !== tracked.pointerId) return;
+      const dx = e.clientX - tracked.startX;
+      const dy = e.clientY - tracked.startY;
+      const dt = Math.max(1, e.timeStamp - tracked.startedAt);
+      tracked = null;
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      const velocity = absDx / dt;
+      if (absDx < absDy * 2) return;
+      if (absDx < SWIPE_THRESHOLD_PX) return;
+      if (velocity < SWIPE_VELOCITY_PX_PER_MS) return;
+      if (dx < 0) {
+        dispatch({ type: "NEXT_SLIDE" });
+      } else if (dx > 0) {
+        dispatch({ type: "PREV_SLIDE" });
+      }
+    };
+    const onPointerCancel = (e) => {
+      if (tracked && e.pointerId === tracked.pointerId) {
+        tracked = null;
+      }
+    };
+    el.addEventListener("pointerdown", onPointerDown);
+    el.addEventListener("pointerup", onPointerUp);
+    el.addEventListener("pointercancel", onPointerCancel);
+    return () => {
+      el.removeEventListener("pointerdown", onPointerDown);
+      el.removeEventListener("pointerup", onPointerUp);
+      el.removeEventListener("pointercancel", onPointerCancel);
+    };
+  }, [enabled, ref, dispatch]);
+}
+function isFullscreenSupported() {
+  if (typeof document === "undefined") return false;
+  const doc = document;
+  const el = document.documentElement;
+  return Boolean(el.requestFullscreen ?? el.webkitRequestFullscreen) && Boolean(doc.exitFullscreen ?? doc.webkitExitFullscreen);
+}
+function currentFullscreenElement() {
+  if (typeof document === "undefined") return null;
+  const doc = document;
+  return document.fullscreenElement ?? doc.webkitFullscreenElement ?? null;
+}
+function useFullscreen(ref) {
+  const supported = isFullscreenSupported();
+  const [isFullscreen, setFullscreen] = useState(false);
+  useEffect(() => {
+    if (!supported) return;
+    const handler = () => {
+      setFullscreen(currentFullscreenElement() !== null);
+    };
+    document.addEventListener("fullscreenchange", handler);
+    document.addEventListener("webkitfullscreenchange", handler);
+    return () => {
+      document.removeEventListener("fullscreenchange", handler);
+      document.removeEventListener("webkitfullscreenchange", handler);
+    };
+  }, [supported]);
+  const toggle = useCallback(async () => {
+    if (!supported) return;
+    const el = ref.current;
+    if (!el) return;
+    const doc = document;
+    try {
+      if (currentFullscreenElement()) {
+        await (doc.exitFullscreen?.() ?? doc.webkitExitFullscreen?.());
+      } else {
+        await (el.requestFullscreen?.() ?? el.webkitRequestFullscreen?.());
+      }
+    } catch {
+    }
+  }, [ref, supported]);
+  return { isFullscreen, toggle, isSupported: supported };
+}
+function generateDeckId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `deck-${Math.random().toString(36).slice(2, 10)}`;
+}
+var SlideDeckBase = ({
+  slides: slidesInput,
+  initialIndex = 0,
+  transition = "fade",
+  enableKeyboard = true,
+  enableTouch = true,
+  enableHashRouting = true,
+  deckId: deckIdProp,
+  onIndexChange,
+  children,
+  className,
+  "aria-label": ariaLabel = "Slide deck",
+  plugins
+}) => {
+  const generatedId = useId();
+  const deckId = deckIdProp ?? generatedId ?? generateDeckId();
+  const rootRef = useRef(null);
+  const [parsedSlides, setParsedSlides] = useState(() => {
+    return Array.isArray(slidesInput) ? slidesInput : [];
+  });
+  useEffect(() => {
+    if (Array.isArray(slidesInput)) {
+      setParsedSlides(slidesInput);
+      return;
+    }
+    let cancelled = false;
+    splitDeck(slidesInput).then(
+      (result) => {
+        if (!cancelled) setParsedSlides(result);
+      },
+      () => {
+        if (!cancelled) setParsedSlides([]);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [slidesInput]);
+  const [state, dispatch] = useDeckState({
+    initialIndex,
+    totalSlides: parsedSlides.length,
+    initFromHash: enableHashRouting ? readInitialHash : void 0
+  });
+  const previousLengthRef = useRef(0);
+  useEffect(() => {
+    const length = parsedSlides.length;
+    dispatch({ type: "UPDATE_TOTAL_SLIDES", total: length });
+    if (previousLengthRef.current === 0 && length > 0) {
+      let target = initialIndex;
+      if (enableHashRouting) {
+        const hashIdx = readInitialHash();
+        if (typeof hashIdx === "number") target = hashIdx;
+      }
+      if (target > 0) {
+        dispatch({ type: "JUMP_TO", index: target });
+      }
+    }
+    previousLengthRef.current = length;
+  }, [parsedSlides.length, dispatch, initialIndex, enableHashRouting]);
+  useEffect(() => {
+    const current = parsedSlides[state.currentIndex];
+    const count = current ? countFragmentsInMarkdown(current.markdown) : 0;
+    dispatch({ type: "UPDATE_TOTAL_FRAGMENTS", total: count });
+  }, [parsedSlides, state.currentIndex, dispatch]);
+  const fullscreen = useFullscreen(rootRef);
+  useEffect(() => {
+    dispatch({ type: "SET_FULLSCREEN", value: fullscreen.isFullscreen });
+  }, [fullscreen.isFullscreen, dispatch]);
+  useEffect(() => {
+    if (state.transitionDirection === "none") return;
+    const t = setTimeout(() => dispatch({ type: "TRANSITION_END" }), 300);
+    return () => clearTimeout(t);
+  }, [state.transitionDirection, dispatch]);
+  const onPrint = useCallback(() => {
+    printDeck();
+  }, []);
+  useDeckKeyboard(dispatch, {
+    enabled: enableKeyboard,
+    totalSlides: parsedSlides.length,
+    onToggleFullscreen: fullscreen.toggle,
+    onPrint
+  });
+  useDeckSwipe(rootRef, dispatch, { enabled: enableTouch });
+  useDeckHashRouting(dispatch, {
+    enabled: enableHashRouting,
+    totalSlides: parsedSlides.length,
+    currentIndex: state.currentIndex
+  });
+  const lastIndexRef = useRef(state.currentIndex);
+  useEffect(() => {
+    if (lastIndexRef.current !== state.currentIndex) {
+      lastIndexRef.current = state.currentIndex;
+      onIndexChange?.(state.currentIndex, parsedSlides[state.currentIndex]);
+    }
+  }, [state.currentIndex, parsedSlides, onIndexChange]);
+  const contextValue = useMemo(
+    () => ({
+      state,
+      dispatch,
+      slides: parsedSlides,
+      transition,
+      deckId,
+      plugins,
+      toggleFullscreen: fullscreen.toggle,
+      print: onPrint
+    }),
+    [state, dispatch, parsedSlides, transition, deckId, plugins, fullscreen.toggle, onPrint]
+  );
+  return /* @__PURE__ */ jsx(DeckContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      "aria-roledescription": "slide deck",
+      "aria-label": ariaLabel,
+      "data-theo-slide-deck": true,
+      "data-theo-slide-deck-fullscreen": state.fullscreen ? "true" : void 0,
+      className: ["theo-slide-deck", className].filter(Boolean).join(" "),
+      style: { position: "relative", width: "100%", height: "100%" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "status",
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              padding: 0,
+              margin: -1,
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap",
+              border: 0
+            },
+            children: parsedSlides.length > 0 ? `Slide ${state.currentIndex + 1} of ${parsedSlides.length}` : "Empty deck"
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx(DefaultDeckLayout, {}),
+        /* @__PURE__ */ jsx(PrintContainer, { slides: parsedSlides, plugins })
+      ]
+    }
+  ) });
+};
+var SlidesView = ({ className }) => {
+  const { state, slides, transition, plugins } = useDeckContext();
+  const current = slides[state.currentIndex];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["theo-slide-deck-slide-frame", className].filter(Boolean).join(" "),
+      "data-theo-slide-deck-transition": transition,
+      "data-theo-slide-deck-direction": state.transitionDirection,
+      style: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        minHeight: 0,
+        overflow: "hidden"
+      },
+      children: current ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-theo-slide-deck-slide-state": "incoming",
+          style: { position: "absolute", inset: 0 },
+          children: /* @__PURE__ */ jsx(
+            Slide,
+            {
+              markdown: current.markdown,
+              plugins,
+              "aria-label": `Slide ${state.currentIndex + 1}`
+            }
+          )
+        },
+        state.currentIndex
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-theo-slide-deck-empty": true,
+          style: {
+            display: "grid",
+            placeItems: "center",
+            height: "100%",
+            opacity: 0.6,
+            fontSize: 14
+          },
+          children: "Empty deck"
+        }
+      )
+    }
+  );
+};
+var PresenterButton = ({ className }) => {
+  const { state, dispatch } = useDeckContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => dispatch({ type: "TOGGLE_PRESENTER" }),
+      "aria-pressed": state.presenterMode,
+      "aria-label": state.presenterMode ? "Close presenter view" : "Open presenter view",
+      className: ["theo-slide-deck-presenter-button", className].filter(Boolean).join(" "),
+      children: state.presenterMode ? "Close presenter" : "Presenter"
+    }
+  );
+};
+var FullscreenButton = ({ className }) => {
+  const { state, toggleFullscreen } = useDeckContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => void toggleFullscreen(),
+      "aria-pressed": state.fullscreen,
+      "aria-label": state.fullscreen ? "Exit fullscreen" : "Enter fullscreen",
+      className: ["theo-slide-deck-fullscreen-button", className].filter(Boolean).join(" "),
+      children: state.fullscreen ? "Exit fullscreen" : "Fullscreen"
+    }
+  );
+};
+var PrintButton = ({ className }) => {
+  const { print } = useDeckContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => print(),
+      "aria-label": "Print or save deck as PDF",
+      className: ["theo-slide-deck-print-button", className].filter(Boolean).join(" "),
+      children: "Print"
+    }
+  );
+};
+var PrintContainer = ({
+  slides,
+  plugins
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "theo-slide-deck-print-container",
+      "aria-hidden": "true",
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        visibility: "hidden"
+      },
+      children: slides.map((slide, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "theo-slide-deck-print-slide",
+          style: { width: 1280, height: 720 },
+          children: /* @__PURE__ */ jsx(
+            Slide,
+            {
+              markdown: slide.markdown,
+              plugins,
+              "aria-label": `Print slide ${index + 1}`
+            }
+          )
+        },
+        `print-${slide.id ?? index}`
+      ))
+    }
+  );
+};
+var DefaultDeckLayout = () => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "theo-slide-deck-default-layout",
+      style: {
+        display: "grid",
+        gridTemplateColumns: "1fr",
+        gridTemplateRows: "1fr auto",
+        gap: 8,
+        height: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(SlidesView, {}),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8,
+              padding: "4px 8px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Controls, {}),
+              /* @__PURE__ */ jsx(ProgressBar, {}),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4 }, children: [
+                /* @__PURE__ */ jsx(PresenterButton, {}),
+                /* @__PURE__ */ jsx(FullscreenButton, {}),
+                /* @__PURE__ */ jsx(PrintButton, {})
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(SlideNumber, {}),
+        /* @__PURE__ */ jsx(PresenterView, {})
+      ]
+    }
+  );
+};
+var SlideDeck = SlideDeckBase;
+SlideDeck.Slides = SlidesView;
+SlideDeck.Controls = Controls;
+SlideDeck.ProgressBar = ProgressBar;
+SlideDeck.SlideNumber = SlideNumber;
+SlideDeck.Thumbnails = Thumbnails;
+SlideDeck.PresenterView = PresenterView;
+SlideDeck.PresenterButton = PresenterButton;
+SlideDeck.FullscreenButton = FullscreenButton;
+SlideDeck.PrintButton = PrintButton;
+var slideDeckSlide = z.object({
+  /** Markdown content of this slide. Capped at 50 KB (same as Slide body). */
+  markdown: z.string().max(5e4),
+  /** Optional id for hash routing (defaults to numeric index, 1-based). */
+  id: z.string().regex(/^[a-z0-9-]+$/, "id must be lowercase kebab-case").max(64).optional(),
+  /** Speaker notes (plain text extracted from <!-- notes: ... --> comments). */
+  notes: z.string().max(5e3).optional()
+});
+var slideDeckInput = z.union([z.string().max(5e5), z.array(slideDeckSlide).max(500)]);
+var slideDeckTransition = z.enum(["none", "fade", "slide"]);
+
+export { Controls, DeckContext, PresenterView, ProgressBar, SlideDeck, SlideNumber, Thumbnails, countFragmentsInMarkdown, deckReducer, extractNotes, formatHash, injectPrintStyles, printDeck, readHashIndex, readInitialHash, removePrintStyles, slideDeckInput, slideDeckSlide, slideDeckTransition, splitDeck, useDeckContext, useDeckHashRouting, useDeckKeyboard, useDeckState, useDeckSwipe, useFullscreen };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map