themed-markdown 0.1.86 → 0.1.88

package/dist/index.mjs

@@ -1032,7 +1032,8 @@ function resetFontScale(theme2) {
 
 // industryMarkdown/components/IndustryMarkdownSlide.tsx
 import { defaultSchema } from "hast-util-sanitize";
-import React13, { useRef as useRef7, useEffect as useEffect7, useLayoutEffect, useState as useState9, useMemo as useMemo2, useCallback } from "react";
+import React13, { useRef as useRef8, useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useState as useState10, useMemo as useMemo3, useCallback as useCallback2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
 import ReactMarkdown from "react-markdown";
 import rehypeHighlight from "rehype-highlight";
 import rehypeRaw from "rehype-raw";
@@ -1622,18 +1623,310 @@ function parseSkillMarkdown(content) {
 // industryMarkdown/utils/markdownUtils.ts
 var parseMarkdownChunks2 = parseMarkdownChunks;
 
+// industryMarkdown/utils/useAnnotations.ts
+import { useEffect as useEffect2, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// industryMarkdown/utils/annotationResolver.ts
+var SKIP_SELECTOR = "script, style, code, pre";
+function buildTextIndex(root) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode(node) {
+      const parent = node.parentElement;
+      if (!parent)
+        return NodeFilter.FILTER_REJECT;
+      if (parent.closest(SKIP_SELECTOR))
+        return NodeFilter.FILTER_REJECT;
+      if (parent.hasAttribute("data-annotation-marker"))
+        return NodeFilter.FILTER_REJECT;
+      if (!node.nodeValue)
+        return NodeFilter.FILTER_REJECT;
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  let text = "";
+  const nodes = [];
+  let current = walker.nextNode();
+  while (current) {
+    const value = current.nodeValue ?? "";
+    const start = text.length;
+    text += value;
+    nodes.push({ node: current, start, end: start + value.length });
+    current = walker.nextNode();
+  }
+  return { text, nodes };
+}
+function findOffset(index, offset) {
+  for (const entry of index.nodes) {
+    if (offset >= entry.start && offset <= entry.end) {
+      return { node: entry.node, localOffset: offset - entry.start };
+    }
+  }
+  return null;
+}
+function resolveTextQuote(root, anchor) {
+  if (!anchor.exact)
+    return null;
+  const index = buildTextIndex(root);
+  const needle = `${anchor.prefix ?? ""}${anchor.exact}${anchor.suffix ?? ""}`;
+  if (!needle)
+    return null;
+  const matchStart = index.text.indexOf(needle);
+  if (matchStart === -1)
+    return null;
+  const exactStart = matchStart + (anchor.prefix?.length ?? 0);
+  const exactEnd = exactStart + anchor.exact.length;
+  const startLoc = findOffset(index, exactStart);
+  const endLoc = findOffset(index, exactEnd);
+  if (!startLoc || !endLoc)
+    return null;
+  const range = document.createRange();
+  range.setStart(startLoc.node, startLoc.localOffset);
+  range.setEnd(endLoc.node, endLoc.localOffset);
+  return range;
+}
+function selectionToAnchor(root, selection, contextLength = 32) {
+  if (selection.rangeCount === 0)
+    return null;
+  const range = selection.getRangeAt(0);
+  if (range.collapsed)
+    return null;
+  if (!root.contains(range.commonAncestorContainer))
+    return null;
+  const exact = range.toString();
+  if (!exact.trim())
+    return null;
+  const index = buildTextIndex(root);
+  const startEntry = index.nodes.find((e) => e.node === range.startContainer);
+  const endEntry = index.nodes.find((e) => e.node === range.endContainer);
+  if (!startEntry || !endEntry) {
+    return { exact };
+  }
+  const startOffset = startEntry.start + range.startOffset;
+  const endOffset = endEntry.start + range.endOffset;
+  const prefix = index.text.slice(Math.max(0, startOffset - contextLength), startOffset);
+  const suffix = index.text.slice(endOffset, Math.min(index.text.length, endOffset + contextLength));
+  return { exact, prefix, suffix };
+}
+
+// industryMarkdown/utils/useAnnotations.ts
+var MARKER_CLASS = "industry-md-annotation";
+var INDICATOR_HOST_CLASS = "industry-md-annotation-indicator";
+function annotationsSignature(annotations) {
+  return annotations.map((a) => `${a.id}|${a.anchor.exact}|${a.anchor.prefix ?? ""}|${a.anchor.suffix ?? ""}|${a.count ?? ""}`).join("::");
+}
+function clearMarkers(root) {
+  const markers = root.querySelectorAll(`.${MARKER_CLASS}`);
+  markers.forEach((marker) => {
+    const parent = marker.parentNode;
+    if (!parent)
+      return;
+    while (marker.firstChild) {
+      parent.insertBefore(marker.firstChild, marker);
+    }
+    parent.removeChild(marker);
+  });
+  const hosts = root.querySelectorAll(`.${INDICATOR_HOST_CLASS}`);
+  hosts.forEach((host) => host.parentNode?.removeChild(host));
+  root.normalize();
+}
+function wrapRange(range, annotationId) {
+  const textNodes = [];
+  const walker = document.createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
+  let current = walker.nextNode();
+  while (current) {
+    if (range.intersectsNode(current))
+      textNodes.push(current);
+    current = walker.nextNode();
+  }
+  if (range.commonAncestorContainer.nodeType === Node.TEXT_NODE) {
+    textNodes.push(range.commonAncestorContainer);
+  }
+  const markers = [];
+  textNodes.forEach((textNode) => {
+    if (!textNode.parentNode || !textNode.nodeValue)
+      return;
+    const isStart = textNode === range.startContainer;
+    const isEnd = textNode === range.endContainer;
+    const start = isStart ? range.startOffset : 0;
+    const end = isEnd ? range.endOffset : textNode.nodeValue.length;
+    if (start >= end)
+      return;
+    let target = textNode;
+    if (start > 0) {
+      target = target.splitText(start);
+    }
+    if (end - start < target.nodeValue.length) {
+      target.splitText(end - start);
+    }
+    const marker = document.createElement("span");
+    marker.className = MARKER_CLASS;
+    marker.setAttribute("data-annotation-id", annotationId);
+    marker.setAttribute("data-annotation-marker", "true");
+    target.parentNode.insertBefore(marker, target);
+    marker.appendChild(target);
+    markers.push(marker);
+  });
+  return markers;
+}
+function useAnnotations({
+  rootRef,
+  annotations,
+  activeAnnotationId,
+  onSelectionChange,
+  onAnnotationClick
+}) {
+  const [mounts, setMounts] = useState2([]);
+  const signature = useMemo(() => annotationsSignature(annotations ?? []), [annotations]);
+  const annotationsRef = useRef(annotations);
+  annotationsRef.current = annotations;
+  const lastAppliedRef = useRef("");
+  const lastResolvedIdsRef = useRef(new Set);
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    if (!root)
+      return;
+    const current = annotationsRef.current ?? [];
+    const existingMarkerIds = new Set;
+    root.querySelectorAll(`.${MARKER_CLASS}`).forEach((el) => {
+      const id = el.getAttribute("data-annotation-id");
+      if (id)
+        existingMarkerIds.add(id);
+    });
+    const annotationsChanged = lastAppliedRef.current !== signature;
+    const allResolvedMarkersPresent = Array.from(lastResolvedIdsRef.current).every((id) => existingMarkerIds.has(id));
+    if (!annotationsChanged && allResolvedMarkersPresent) {
+      return;
+    }
+    clearMarkers(root);
+    lastAppliedRef.current = signature;
+    if (current.length === 0) {
+      lastResolvedIdsRef.current = new Set;
+      setMounts((prev) => prev.length === 0 ? prev : []);
+      return;
+    }
+    const next = [];
+    const resolvedIds = new Set;
+    current.forEach((annotation) => {
+      const range = resolveTextQuote(root, annotation.anchor);
+      if (!range) {
+        next.push({ annotation, host: document.createElement("span"), resolved: false });
+        return;
+      }
+      const markers = wrapRange(range, annotation.id);
+      if (markers.length === 0) {
+        next.push({ annotation, host: document.createElement("span"), resolved: false });
+        return;
+      }
+      const last = markers[markers.length - 1];
+      last.classList.add(`${MARKER_CLASS}--last`);
+      if (typeof annotation.count === "number" && annotation.count > 0) {
+        last.setAttribute("data-count", String(annotation.count));
+      }
+      const host = document.createElement("span");
+      host.className = INDICATOR_HOST_CLASS;
+      host.setAttribute("data-annotation-indicator-for", annotation.id);
+      last.parentNode.insertBefore(host, last.nextSibling);
+      next.push({ annotation, host, resolved: true });
+      resolvedIds.add(annotation.id);
+    });
+    lastResolvedIdsRef.current = resolvedIds;
+    setMounts(next);
+  });
+  useEffect2(() => {
+    const root = rootRef.current;
+    if (!root)
+      return;
+    const markers = root.querySelectorAll(`.${MARKER_CLASS}`);
+    markers.forEach((marker) => {
+      const id = marker.getAttribute("data-annotation-id");
+      if (id && id === activeAnnotationId) {
+        marker.setAttribute("data-active", "true");
+      } else {
+        marker.removeAttribute("data-active");
+      }
+    });
+  }, [rootRef, activeAnnotationId, mounts]);
+  useEffect2(() => {
+    if (!onSelectionChange)
+      return;
+    const root = rootRef.current;
+    if (!root)
+      return;
+    const emit = () => {
+      const selection = document.getSelection();
+      if (!selection || selection.rangeCount === 0 || selection.isCollapsed) {
+        onSelectionChange(null);
+        return;
+      }
+      const range = selection.getRangeAt(0);
+      if (!root.contains(range.commonAncestorContainer)) {
+        onSelectionChange(null);
+        return;
+      }
+      const anchor = selectionToAnchor(root, selection);
+      if (!anchor) {
+        onSelectionChange(null);
+        return;
+      }
+      onSelectionChange({ anchor, rect: range.getBoundingClientRect() });
+    };
+    const handleMouseUp = () => {
+      window.setTimeout(emit, 0);
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Shift" || event.key === "Meta" || event.key === "Control" || event.key === "Alt") {
+        return;
+      }
+      window.setTimeout(emit, 0);
+    };
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("keyup", handleKeyUp);
+    return () => {
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [rootRef, onSelectionChange]);
+  useEffect2(() => {
+    if (!onAnnotationClick)
+      return;
+    const root = rootRef.current;
+    if (!root)
+      return;
+    const handleClick = (event) => {
+      const selection = document.getSelection();
+      if (selection && !selection.isCollapsed)
+        return;
+      const target = event.target;
+      if (!(target instanceof Element))
+        return;
+      const marker = target.closest(`.${MARKER_CLASS}`);
+      if (!marker)
+        return;
+      const id = marker.getAttribute("data-annotation-id");
+      if (!id)
+        return;
+      onAnnotationClick(id, event);
+    };
+    root.addEventListener("click", handleClick);
+    return () => {
+      root.removeEventListener("click", handleClick);
+    };
+  }, [rootRef, onAnnotationClick]);
+  return mounts;
+}
+
 // industryMarkdown/components/IndustryHtmlModal.tsx
-import React3, { useState as useState2 } from "react";
+import React3, { useCallback, useState as useState3 } from "react";
 var useIndustryHtmlModal = () => {
-  const [htmlModalOpen, setHtmlModalOpen] = useState2(false);
-  const [htmlModalContent, setHtmlModalContent] = useState2("");
-  const openHtmlModal = (content) => {
+  const [htmlModalOpen, setHtmlModalOpen] = useState3(false);
+  const [htmlModalContent, setHtmlModalContent] = useState3("");
+  const openHtmlModal = useCallback((content) => {
     setHtmlModalContent(content);
     setHtmlModalOpen(true);
-  };
-  const closeHtmlModal = () => {
+  }, []);
+  const closeHtmlModal = useCallback(() => {
     setHtmlModalOpen(false);
-  };
+  }, []);
   return { htmlModalOpen, htmlModalContent, openHtmlModal, closeHtmlModal };
 };
 function IndustryHtmlModal({ isOpen, onClose, htmlContent, theme: theme2 }) {
@@ -1737,11 +2030,11 @@ function IndustryHtmlModal({ isOpen, onClose, htmlContent, theme: theme2 }) {
 
 // industryMarkdown/components/IndustryLazyMermaidDiagram.tsx
 import { MoveRight } from "lucide-react";
-import React6, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import React6, { useEffect as useEffect4, useRef as useRef3, useState as useState5 } from "react";
 
 // industryMarkdown/components/IndustryMermaidDiagram.tsx
 import { Expand, Copy, Check } from "lucide-react";
-import React5, { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import React5, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 var getMermaidSync = () => {
   if (typeof window !== "undefined") {
     const mermaid = window.mermaid;
@@ -1763,12 +2056,12 @@ function IndustryMermaidDiagram({
   onExpandClick
 }) {
   const theme2 = themeOverride ?? theme;
-  const [errorDetails, setErrorDetails] = useState3(null);
-  const [isIntersecting, setIsIntersecting] = useState3(false);
-  const [hasRendered, setHasRendered] = useState3(false);
-  const [containerElement, setContainerElement] = useState3(null);
-  const [copiedError, setCopiedError] = useState3(false);
-  const observerRef = useRef(null);
+  const [errorDetails, setErrorDetails] = useState4(null);
+  const [isIntersecting, setIsIntersecting] = useState4(false);
+  const [hasRendered, setHasRendered] = useState4(false);
+  const [containerElement, setContainerElement] = useState4(null);
+  const [copiedError, setCopiedError] = useState4(false);
+  const observerRef = useRef2(null);
   const containerRef = React5.useCallback((node) => {
     setContainerElement(node);
     if (observerRef.current) {
@@ -1793,14 +2086,14 @@ function IndustryMermaidDiagram({
       observerRef.current.observe(node);
     }
   }, [rootMargin, hasRendered, isModalMode]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (observerRef.current) {
         observerRef.current.disconnect();
       }
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!hasRendered)
       return;
     const renderDiagram = async () => {
@@ -2135,15 +2428,15 @@ function IndustryLazyMermaidDiagram({
   onExpandClick
 }) {
   const theme2 = themeOverride ?? theme;
-  const [isIntersecting, setIsIntersecting] = useState4(false);
-  const [hasRendered, setHasRendered] = useState4(false);
-  const [isMounted, setIsMounted] = useState4(false);
-  const [hasError, setHasError] = useState4(false);
-  const containerRef = useRef2(null);
-  useEffect3(() => {
+  const [isIntersecting, setIsIntersecting] = useState5(false);
+  const [hasRendered, setHasRendered] = useState5(false);
+  const [isMounted, setIsMounted] = useState5(false);
+  const [hasError, setHasError] = useState5(false);
+  const containerRef = useRef3(null);
+  useEffect4(() => {
     setIsMounted(true);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isMounted)
       return;
     if (typeof IntersectionObserver === "undefined") {
@@ -2264,7 +2557,7 @@ function IndustryLazyMermaidDiagram({
 
 // industryMarkdown/components/IndustryMarkdownComponents.tsx
 import { Copy as Copy2, Monitor, FileText, Check as Check2 } from "lucide-react";
-import React9, { useMemo, useState as useState6, useRef as useRef4 } from "react";
+import React9, { useMemo as useMemo2, useState as useState7, useRef as useRef5 } from "react";
 
 // industryMarkdown/utils/componentUtils.tsx
 import React7 from "react";
@@ -2300,7 +2593,7 @@ var LinkWithLoadingIndicator = ({ href, children, onClick, className }) => {
 };
 // industryMarkdown/components/IndustryBashCommandDropdown.tsx
 import { Play, ChevronDown } from "lucide-react";
-import React8, { useState as useState5, useRef as useRef3, useEffect as useEffect4 } from "react";
+import React8, { useState as useState6, useRef as useRef4, useEffect as useEffect5 } from "react";
 var IndustryBashCommandDropdown = ({
   commands,
   allCommands,
@@ -2309,11 +2602,11 @@ var IndustryBashCommandDropdown = ({
   slideIdPrefix: _slideIdPrefix,
   theme: themeOverride
 }) => {
-  const [isOpen, setIsOpen] = useState5(false);
-  const [isRunning, setIsRunning] = useState5(false);
-  const dropdownRef = useRef3(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [isRunning, setIsRunning] = useState6(false);
+  const dropdownRef = useRef4(null);
   const theme2 = themeOverride ?? theme;
-  useEffect4(() => {
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2432,7 +2725,7 @@ var IndustryBashCommandDropdown = ({
       e.currentTarget.style.backgroundColor = theme2.colors.muted;
     }
   }, "\uD83D\uDE80 Run all (", commands.length, " commands)"), commands.map((cmd, index) => {
-    const [isHovered, setIsHovered] = useState5(false);
+    const [isHovered, setIsHovered] = useState6(false);
     return /* @__PURE__ */ React8.createElement("div", {
       key: index,
       style: dropdownItemStyle(isHovered),
@@ -2485,12 +2778,12 @@ var OptimizedMarkdownMedia = React9.memo(({
   theme: theme2,
   ...props
 }) => {
-  const transformedSrc = useMemo(() => {
+  const transformedSrc = useMemo2(() => {
     return transformImageUrl(src, repositoryInfo);
   }, [src, repositoryInfo]);
-  const [hasErrored, setHasErrored] = useState6(() => failedImageCache.has(transformedSrc));
-  const retryCount = useRef4(0);
-  const mediaStyle = useMemo(() => ({
+  const [hasErrored, setHasErrored] = useState7(() => failedImageCache.has(transformedSrc));
+  const retryCount = useRef5(0);
+  const mediaStyle = useMemo2(() => ({
     maxWidth: "100%",
     height: "auto",
     display: "block",
@@ -2862,7 +3155,7 @@ var createIndustryMarkdownComponents = ({
     }, children),
     source: ({ srcset, srcSet, ...props }) => {
       const srcsetValue = srcset || srcSet;
-      const transformedSrcset = useMemo(() => {
+      const transformedSrcset = useMemo2(() => {
         if (!srcsetValue || !repositoryInfo)
           return srcsetValue;
         return srcsetValue.split(",").map((src) => {
@@ -2884,7 +3177,7 @@ var createIndustryMarkdownComponents = ({
       const codeString = extractTextFromChildren(children);
       const matchLang = /language-(\w+)/.exec(className || "");
       const language = matchLang ? matchLang[1] : null;
-      const [copied, setCopied] = useState6(false);
+      const [copied, setCopied] = useState7(false);
       let isInline;
       let isCodeBlock;
       const hasNewlines = codeString.includes(`
@@ -3109,11 +3402,11 @@ var createIndustryMarkdownComponents = ({
 };
 
 // industryMarkdown/components/IndustryMermaidModal.tsx
-import React11, { useEffect as useEffect6, useRef as useRef6 } from "react";
+import React11, { useEffect as useEffect7, useRef as useRef7 } from "react";
 import { createPortal } from "react-dom";
 
 // industryMarkdown/components/IndustryZoomableMermaidDiagram.tsx
-import React10, { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import React10, { useEffect as useEffect6, useRef as useRef6, useState as useState8 } from "react";
 import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 function IndustryZoomableMermaidDiagram({
   code,
@@ -3123,13 +3416,13 @@ function IndustryZoomableMermaidDiagram({
   padding = 0.9
 }) {
   const theme2 = themeOverride ?? theme;
-  const [calculatedScale, setCalculatedScale] = useState7(1);
-  const [hasInitialized, setHasInitialized] = useState7(false);
-  const containerRef = useRef5(null);
-  const diagramRef = useRef5(null);
-  const [isCalculating, setIsCalculating] = useState7(true);
-  const transformRef = useRef5(null);
-  useEffect5(() => {
+  const [calculatedScale, setCalculatedScale] = useState8(1);
+  const [hasInitialized, setHasInitialized] = useState8(false);
+  const containerRef = useRef6(null);
+  const diagramRef = useRef6(null);
+  const [isCalculating, setIsCalculating] = useState8(true);
+  const transformRef = useRef6(null);
+  useEffect6(() => {
     if (!containerRef.current || !diagramRef.current)
       return;
     const calculateOptimalScale = () => {
@@ -3193,7 +3486,7 @@ function IndustryZoomableMermaidDiagram({
       resizeObserver.disconnect();
     };
   }, [code, fitStrategy, padding]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (hasInitialized && transformRef.current) {
       const { centerView } = transformRef.current;
       centerView(calculatedScale, 0, "easeOut");
@@ -3303,8 +3596,8 @@ function IndustryMermaidModal({
   mermaidCode,
   theme: theme2
 }) {
-  const modalRef = useRef6(null);
-  useEffect6(() => {
+  const modalRef = useRef7(null);
+  useEffect7(() => {
     const handleEscape = (event) => {
       if (event.key === "Escape") {
         onClose();
@@ -3406,7 +3699,7 @@ function IndustryMermaidModal({
 }
 
 // industryMarkdown/components/IndustryPlaceholderModal.tsx
-import React12, { useState as useState8 } from "react";
+import React12, { useState as useState9 } from "react";
 function IndustryPlaceholderModal({
   isOpen,
   onClose,
@@ -3415,7 +3708,7 @@ function IndustryPlaceholderModal({
   onCopy,
   theme: theme2
 }) {
-  const [values, setValues] = useState8({});
+  const [values, setValues] = useState9({});
   if (!isOpen)
     return null;
   const handleSubmit = (e) => {
@@ -3784,6 +4077,54 @@ var highlightOverrides = `
     text-decoration: none !important;
   }
 `;
+var annotationCSS = `
+  .industry-md-annotation {
+    background-color: var(--industry-md-annotation-bg, rgba(255, 193, 7, 0.22));
+    padding: 0.15em 0.25em;
+    margin: 0 -0.05em;
+    border-radius: 3px;
+    cursor: pointer;
+    /* Re-apply padding/radius on each line fragment when the highlight wraps. */
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+  .industry-md-annotation[data-active="true"] {
+    background-color: var(
+      --industry-md-annotation-active-bg,
+      rgba(255, 193, 7, 0.5)
+    );
+  }
+  .industry-md-annotation--last {
+    position: relative;
+  }
+  .industry-md-annotation--last[data-count]::after {
+    content: attr(data-count);
+    position: absolute;
+    top: -0.85em;
+    right: -0.8em;
+    min-width: 1.1em;
+    height: 1.1em;
+    padding: 0 0.3em;
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: var(
+      --industry-md-annotation-badge-bg,
+      rgba(180, 120, 0, 0.95)
+    );
+    color: var(--industry-md-annotation-badge-color, #fff);
+    font-size: 0.65em;
+    font-weight: 600;
+    line-height: 1.1em;
+    text-align: center;
+    pointer-events: none;
+    box-shadow: 0 0 0 1.5px var(--industry-md-annotation-badge-ring, #fff);
+  }
+  .industry-md-annotation-indicator {
+    display: inline;
+    margin-left: 0.25em;
+    vertical-align: baseline;
+  }
+`;
 var fontTransitionCSS = `
   .markdown-slide * {
     transition: font-size 0.2s ease-in-out;
@@ -3841,6 +4182,12 @@ var injectStyles = () => {
       transitionStyle.textContent = fontTransitionCSS;
       document.head.appendChild(transitionStyle);
     }
+    if (!document.getElementById("markdown-slide-annotations")) {
+      const annotationStyle = document.createElement("style");
+      annotationStyle.id = "markdown-slide-annotations";
+      annotationStyle.textContent = annotationCSS;
+      document.head.appendChild(annotationStyle);
+    }
     stylesInjected = true;
   }
 };
@@ -3870,29 +4217,37 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
   enableKeyboardScrolling = true,
   keyboardScrollConfig,
   repositoryInfo,
-  editable = false
+  editable = false,
+  annotations,
+  activeAnnotationId,
+  renderAnnotation,
+  onSelectionChange,
+  onAnnotationClick,
+  annotationStyle
 }) {
-  const slideRef = useRef7(null);
-  const scrollPositionsRef = useRef7(new Map);
-  const [measuredContainerWidth, setMeasuredContainerWidth] = useState9(null);
-  let chunks = [];
-  try {
-    if (typeof content === "string") {
-      chunks = parseMarkdownChunks2(content, slideIdPrefix);
-    } else {}
-  } catch (error) {
-    console.error("Error parsing markdown chunks:", error);
-  }
-  const [checkedItems, setCheckedItems] = useState9({});
+  const slideRef = useRef8(null);
+  const scrollPositionsRef = useRef8(new Map);
+  const [measuredContainerWidth, setMeasuredContainerWidth] = useState10(null);
+  const chunks = useMemo3(() => {
+    if (typeof content !== "string")
+      return [];
+    try {
+      return parseMarkdownChunks2(content, slideIdPrefix);
+    } catch (error) {
+      console.error("Error parsing markdown chunks:", error);
+      return [];
+    }
+  }, [content, slideIdPrefix]);
+  const [checkedItems, setCheckedItems] = useState10({});
   const { htmlModalOpen, htmlModalContent, openHtmlModal, closeHtmlModal } = useIndustryHtmlModal();
-  const [mermaidModalOpen, setMermaidModalOpen] = useState9(false);
-  const [mermaidModalCode, setMermaidModalCode] = useState9("");
-  const [placeholderModalOpen, setPlaceholderModalOpen] = useState9(false);
-  const [placeholderModalData, setPlaceholderModalData] = useState9(null);
-  useEffect7(() => {
+  const [mermaidModalOpen, setMermaidModalOpen] = useState10(false);
+  const [mermaidModalCode, setMermaidModalCode] = useState10("");
+  const [placeholderModalOpen, setPlaceholderModalOpen] = useState10(false);
+  const [placeholderModalData, setPlaceholderModalData] = useState10(null);
+  useEffect8(() => {
     injectStyles();
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (containerWidth !== undefined) {
       return;
     }
@@ -3951,7 +4306,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
       ...keyboardScrollConfig?.keys
     }
   };
-  const handleKeyDown = useCallback((event) => {
+  const handleKeyDown = useCallback2((event) => {
     if (!enableKeyboardScrolling) {
       return;
     }
@@ -4061,7 +4416,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
       }, scrollConfig.smoothScroll ? 100 : 0);
     }
   }, [enableKeyboardScrolling, isVisible, slideIndex, scrollConfig]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (autoFocusOnVisible && isVisible && slideRef.current) {
       slideRef.current.focus({ preventScroll: true });
     }
@@ -4085,7 +4440,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     setMermaidModalCode("");
   };
   const baseTheme = themeOverride ?? theme;
-  const theme2 = useMemo2(() => {
+  const theme2 = useMemo3(() => {
     if (fontSizeScale === 1)
       return baseTheme;
     return {
@@ -4093,7 +4448,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
       fontSizes: baseTheme.fontSizes.map((size) => Math.round(size * fontSizeScale))
     };
   }, [baseTheme, fontSizeScale]);
-  const calculateSlidePadding = useMemo2(() => {
+  const calculateSlidePadding = useMemo3(() => {
     const effectiveContainerWidth = containerWidth ?? measuredContainerWidth ?? 800;
     const paddingPercentage = 0.03;
     const horizontalPadding = Math.max(5, Math.round(effectiveContainerWidth * paddingPercentage));
@@ -4104,7 +4459,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     };
     return result;
   }, [containerWidth, measuredContainerWidth]);
-  const finalPadding = useMemo2(() => {
+  const finalPadding = useMemo3(() => {
     const basePadding = calculateSlidePadding.horizontal;
     const baseVerticalPadding = calculateSlidePadding.vertical;
     const baseHorizontalValue = parseInt(basePadding.replace("px", ""), 10);
@@ -4119,7 +4474,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     const left = baseHorizontalValue + leftExtra;
     return `${top}px ${right}px ${bottom}px ${left}px`;
   }, [calculateSlidePadding.horizontal, calculateSlidePadding.vertical, additionalPadding]);
-  useEffect7(() => {
+  useEffect8(() => {
     const slideElement = slideRef.current;
     if (slideElement) {
       const handleScroll = () => {
@@ -4132,13 +4487,13 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     }
     return;
   }, [slideIndex]);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (slideRef.current) {
       const savedPosition = scrollPositionsRef.current.get(slideIndex) ?? 0;
       slideRef.current.scrollTop = savedPosition;
     }
   }, [slideIndex]);
-  const sanitizeSchema = useMemo2(() => ({
+  const sanitizeSchema = useMemo3(() => ({
     ...defaultSchema,
     tagNames: [...defaultSchema.tagNames || [], "picture", "source", "mark"],
     attributes: {
@@ -4206,7 +4561,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     }
   }), []);
   const rootMargin = isVisible ? "0px" : "100px";
-  const getMarkdownComponents = useCallback((chunkIndex) => {
+  const getMarkdownComponents = useCallback2((chunkIndex) => {
     const baseComponents = createIndustryMarkdownComponents({
       theme: theme2,
       slideIdPrefix,
@@ -4258,6 +4613,76 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
     searchQuery,
     editable
   ]);
+  const renderedChunks = useMemo3(() => {
+    if (chunks.length === 0) {
+      return /* @__PURE__ */ React13.createElement("div", {
+        style: {
+          padding: theme2.space[4],
+          textAlign: "center",
+          color: theme2.colors.muted,
+          fontSize: theme2.fontSizes[2]
+        }
+      }, "No content to display");
+    }
+    return chunks.map((chunk, index) => {
+      if (chunk.type === "markdown_chunk") {
+        const processedContent = searchQuery ? highlightSearchMatches(chunk.content, searchQuery) : chunk.content;
+        return /* @__PURE__ */ React13.createElement(ReactMarkdown, {
+          key: `${chunk.id}-${JSON.stringify(theme2.colors.accent)}`,
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [
+            rehypeRaw,
+            [rehypeSanitize, sanitizeSchema],
+            rehypeSlug,
+            rehypeHighlight
+          ],
+          components: getMarkdownComponents(index)
+        }, processedContent);
+      }
+      if (chunk.type === "mermaid_chunk") {
+        const mermaidProps = {
+          id: chunk.id,
+          code: chunk.content,
+          onCopyError: onCopyMermaidError,
+          rootMargin,
+          theme: theme2,
+          onExpandClick: () => openMermaidModal(chunk.content)
+        };
+        if (onShowMermaidInPanel) {
+          mermaidProps.onShowInPanel = onShowMermaidInPanel;
+        }
+        return /* @__PURE__ */ React13.createElement(IndustryLazyMermaidDiagram, {
+          key: chunk.id,
+          ...mermaidProps
+        });
+      }
+      return null;
+    });
+  }, [
+    chunks,
+    content,
+    searchQuery,
+    theme2,
+    sanitizeSchema,
+    getMarkdownComponents,
+    rootMargin,
+    onCopyMermaidError,
+    onShowMermaidInPanel
+  ]);
+  const annotationMounts = useAnnotations({
+    rootRef: slideRef,
+    annotations: annotations ?? [],
+    activeAnnotationId,
+    onSelectionChange,
+    onAnnotationClick
+  });
+  const annotationCSSVars = {};
+  if (annotationStyle?.backgroundColor) {
+    annotationCSSVars["--industry-md-annotation-bg"] = annotationStyle.backgroundColor;
+  }
+  if (annotationStyle?.activeBackgroundColor) {
+    annotationCSSVars["--industry-md-annotation-active-bg"] = annotationStyle.activeBackgroundColor;
+  }
   return /* @__PURE__ */ React13.createElement("div", {
     className: "markdown-slide",
     ref: slideRef,
@@ -4273,7 +4698,8 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
       outline: "none",
       border: "2px solid transparent",
       transition: "border-color 0.2s ease",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      ...annotationCSSVars
     },
     tabIndex: 0,
     onKeyDown: handleKeyDown,
@@ -4282,47 +4708,9 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
         slideRef.current.focus();
       }
     }
-  }, chunks.length === 0 ? /* @__PURE__ */ React13.createElement("div", {
-    style: {
-      padding: theme2.space[4],
-      textAlign: "center",
-      color: theme2.colors.muted,
-      fontSize: theme2.fontSizes[2]
-    }
-  }, "No content to display") : chunks.map((chunk, index) => {
-    if (chunk.type === "markdown_chunk") {
-      const processedContent = searchQuery ? highlightSearchMatches(chunk.content, searchQuery) : chunk.content;
-      return /* @__PURE__ */ React13.createElement(ReactMarkdown, {
-        key: `${chunk.id}-${JSON.stringify(theme2.colors.accent)}`,
-        remarkPlugins: [remarkGfm],
-        rehypePlugins: [
-          rehypeRaw,
-          [rehypeSanitize, sanitizeSchema],
-          rehypeSlug,
-          rehypeHighlight
-        ],
-        components: getMarkdownComponents(index)
-      }, processedContent);
-    }
-    if (chunk.type === "mermaid_chunk") {
-      const mermaidProps = {
-        id: chunk.id,
-        code: chunk.content,
-        onCopyError: onCopyMermaidError,
-        rootMargin,
-        theme: theme2,
-        onExpandClick: () => openMermaidModal(chunk.content)
-      };
-      if (onShowMermaidInPanel) {
-        mermaidProps.onShowInPanel = onShowMermaidInPanel;
-      }
-      return /* @__PURE__ */ React13.createElement(IndustryLazyMermaidDiagram, {
-        key: chunk.id,
-        ...mermaidProps
-      });
-    }
-    return null;
-  }), /* @__PURE__ */ React13.createElement(IndustryHtmlModal, {
+  }, renderedChunks, renderAnnotation && annotationMounts.filter((mount) => mount.resolved).map((mount) => createPortal2(/* @__PURE__ */ React13.createElement(React13.Fragment, {
+    key: mount.annotation.id
+  }, renderAnnotation(mount.annotation)), mount.host)), /* @__PURE__ */ React13.createElement(IndustryHtmlModal, {
     isOpen: htmlModalOpen,
     onClose: closeHtmlModal,
     htmlContent: htmlModalContent,
@@ -4343,7 +4731,7 @@ var IndustryMarkdownSlide = React13.memo(function IndustryMarkdownSlide2({
 });
 // industryMarkdown/components/SlidePresentation.tsx
 import { AnimatedResizableLayout } from "@principal-ade/panels";
-import React17, { useState as useState10, useCallback as useCallback2, useRef as useRef9, useEffect as useEffect9 } from "react";
+import React17, { useState as useState11, useCallback as useCallback3, useRef as useRef10, useEffect as useEffect10 } from "react";
 
 // industryMarkdown/utils/extractSlideTitles.ts
 function extractSlideTitle2(content, slideIndex) {
@@ -4614,7 +5002,7 @@ var SlideNavigationHeader = ({
 
 // industryMarkdown/components/SlideSearchBar.tsx
 import { Search, X as X2 } from "lucide-react";
-import React16, { useRef as useRef8, useEffect as useEffect8 } from "react";
+import React16, { useRef as useRef9, useEffect as useEffect9 } from "react";
 var SlideSearchBar = ({
   showSearch,
   searchQuery,
@@ -4628,8 +5016,8 @@ var SlideSearchBar = ({
   onClose,
   onClear
 }) => {
-  const searchInputRef = useRef8(null);
-  useEffect8(() => {
+  const searchInputRef = useRef9(null);
+  useEffect9(() => {
     if (showSearch && searchInputRef.current) {
       searchInputRef.current.focus();
     }
@@ -4831,8 +5219,8 @@ var SlidePresentation = ({
   fontSizeScale,
   theme: theme2
 }) => {
-  const [isMobile, setIsMobile] = useState10(false);
-  useEffect9(() => {
+  const [isMobile, setIsMobile] = useState11(false);
+  useEffect10(() => {
     const checkMobile = () => {
       setIsMobile(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768);
     };
@@ -4842,17 +5230,17 @@ var SlidePresentation = ({
   }, []);
   const effectiveTocDisplayMode = isMobile ? "overlay" : tocDisplayMode;
   const defaultTocOpen = initialTocOpen ?? effectiveTocDisplayMode === "sidebar";
-  const [currentSlide, setCurrentSlide] = useState10(initialSlide);
-  const [isFullscreen, setIsFullscreen] = useState10(false);
-  const [showTOC, setShowTOC] = useState10(defaultTocOpen);
-  const [showSearch, setShowSearch] = useState10(false);
-  const [searchQuery, setSearchQuery] = useState10("");
-  const [searchResults, setSearchResults] = useState10([]);
-  const [currentSearchResult, setCurrentSearchResult] = useState10(-1);
-  const [searchStartSlide, setSearchStartSlide] = useState10(0);
-  const containerRef = useRef9(null);
+  const [currentSlide, setCurrentSlide] = useState11(initialSlide);
+  const [isFullscreen, setIsFullscreen] = useState11(false);
+  const [showTOC, setShowTOC] = useState11(defaultTocOpen);
+  const [showSearch, setShowSearch] = useState11(false);
+  const [searchQuery, setSearchQuery] = useState11("");
+  const [searchResults, setSearchResults] = useState11([]);
+  const [currentSearchResult, setCurrentSearchResult] = useState11(-1);
+  const [searchStartSlide, setSearchStartSlide] = useState11(0);
+  const containerRef = useRef10(null);
   const slideTitles = extractAllSlideTitles(slides);
-  const navigateToSlide = useCallback2((slideIndex) => {
+  const navigateToSlide = useCallback3((slideIndex) => {
     if (slideIndex >= 0 && slideIndex < slides.length) {
       setCurrentSlide(slideIndex);
       onSlideChange?.(slideIndex);
@@ -4861,7 +5249,7 @@ var SlidePresentation = ({
       }
     }
   }, [slides.length, onSlideChange, effectiveTocDisplayMode]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!searchQuery.trim()) {
       setSearchResults([]);
       setCurrentSearchResult(-1);
@@ -4879,7 +5267,7 @@ var SlidePresentation = ({
     setSearchResults(results);
     setCurrentSearchResult(-1);
   }, [searchQuery, slides]);
-  const navigateToSearchResult = useCallback2((resultIndex) => {
+  const navigateToSearchResult = useCallback3((resultIndex) => {
     if (searchResults.length === 0)
       return;
     let newIndex = resultIndex;
@@ -4894,22 +5282,22 @@ var SlidePresentation = ({
       navigateToSlide(targetSlide);
     }
   }, [searchResults, navigateToSlide, currentSlide, currentSearchResult]);
-  const closeSearch = useCallback2(() => {
+  const closeSearch = useCallback3(() => {
     setShowSearch(false);
   }, []);
-  const clearSearch = useCallback2(() => {
+  const clearSearch = useCallback3(() => {
     setSearchQuery("");
     setSearchResults([]);
     setCurrentSearchResult(-1);
     setSearchStartSlide(0);
   }, []);
-  const goToPreviousSlide = useCallback2(() => {
+  const goToPreviousSlide = useCallback3(() => {
     navigateToSlide(currentSlide - 1);
   }, [currentSlide, navigateToSlide]);
-  const goToNextSlide = useCallback2(() => {
+  const goToNextSlide = useCallback3(() => {
     navigateToSlide(currentSlide + 1);
   }, [currentSlide, navigateToSlide]);
-  const toggleFullscreen = useCallback2(() => {
+  const toggleFullscreen = useCallback3(() => {
     if (!containerRef.current)
       return;
     if (!isFullscreen) {
@@ -4920,7 +5308,7 @@ var SlidePresentation = ({
       setIsFullscreen(false);
     }
   }, [isFullscreen]);
-  useEffect9(() => {
+  useEffect10(() => {
     const handleKeyDown = (event) => {
       if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
         if (showSearch && (event.key === "Tab" || event.key === "Enter" || event.key === "Escape")) {} else {
@@ -5038,7 +5426,7 @@ var SlidePresentation = ({
     currentSearchResult,
     tocDisplayMode
   ]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (currentSlide >= slides.length && slides.length > 0) {
       setCurrentSlide(slides.length - 1);
     }
@@ -5499,7 +5887,7 @@ var SlidePresentation = ({
 };
 // industryMarkdown/components/SlidePresentationBook.tsx
 import { AnimatedResizableLayout as AnimatedResizableLayout2 } from "@principal-ade/panels";
-import React18, { useState as useState11, useCallback as useCallback3, useRef as useRef10, useEffect as useEffect10 } from "react";
+import React18, { useState as useState12, useCallback as useCallback4, useRef as useRef11, useEffect as useEffect11 } from "react";
 var SlidePresentationBook = ({
   slides,
   initialSlide = 0,
@@ -5529,8 +5917,8 @@ var SlidePresentationBook = ({
   repositoryInfo,
   width
 }) => {
-  const [isMobile, setIsMobile] = useState11(false);
-  useEffect10(() => {
+  const [isMobile, setIsMobile] = useState12(false);
+  useEffect11(() => {
     const checkMobile = () => {
       setIsMobile(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent) || window.innerWidth < 768);
     };
@@ -5541,20 +5929,20 @@ var SlidePresentationBook = ({
   const effectiveTocDisplayMode = isMobile && viewMode === "single" ? "overlay" : tocDisplayMode ?? (viewMode === "single" ? "sidebar" : "overlay");
   const defaultTocOpen = initialTocOpen ?? false;
   const adjustedInitialSlide = viewMode === "book" ? Math.floor(initialSlide / 2) * 2 : initialSlide;
-  const [currentSlide, setCurrentSlide] = useState11(adjustedInitialSlide);
-  const [isFullscreen, setIsFullscreen] = useState11(false);
-  const [showTOC, setShowTOC] = useState11(defaultTocOpen);
-  const [showSearch, setShowSearch] = useState11(false);
-  const [searchQuery, setSearchQuery] = useState11("");
-  const [searchResults, setSearchResults] = useState11([]);
-  const [currentSearchResult, setCurrentSearchResult] = useState11(-1);
-  const [searchStartSlide, setSearchStartSlide] = useState11(0);
-  const [collapsedSide, setCollapsedSide] = useState11(null);
-  const [lastInteractedSide, setLastInteractedSide] = useState11("left");
-  const containerRef = useRef10(null);
+  const [currentSlide, setCurrentSlide] = useState12(adjustedInitialSlide);
+  const [isFullscreen, setIsFullscreen] = useState12(false);
+  const [showTOC, setShowTOC] = useState12(defaultTocOpen);
+  const [showSearch, setShowSearch] = useState12(false);
+  const [searchQuery, setSearchQuery] = useState12("");
+  const [searchResults, setSearchResults] = useState12([]);
+  const [currentSearchResult, setCurrentSearchResult] = useState12(-1);
+  const [searchStartSlide, setSearchStartSlide] = useState12(0);
+  const [collapsedSide, setCollapsedSide] = useState12(null);
+  const [lastInteractedSide, setLastInteractedSide] = useState12("left");
+  const containerRef = useRef11(null);
   const slideTitles = extractAllSlideTitles(slides);
   const stepSize = viewMode === "book" ? 2 : 1;
-  const navigateToSlide = useCallback3((slideIndex) => {
+  const navigateToSlide = useCallback4((slideIndex) => {
     const targetSlide = viewMode === "book" ? Math.floor(slideIndex / 2) * 2 : slideIndex;
     if (targetSlide >= 0 && targetSlide < slides.length) {
       setCurrentSlide(targetSlide);
@@ -5564,7 +5952,7 @@ var SlidePresentationBook = ({
       }
     }
   }, [slides.length, onSlideChange, viewMode, effectiveTocDisplayMode]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!searchQuery.trim()) {
       setSearchResults([]);
       setCurrentSearchResult(-1);
@@ -5582,7 +5970,7 @@ var SlidePresentationBook = ({
     setSearchResults(results);
     setCurrentSearchResult(-1);
   }, [searchQuery, slides]);
-  const navigateToSearchResult = useCallback3((resultIndex) => {
+  const navigateToSearchResult = useCallback4((resultIndex) => {
     if (searchResults.length === 0)
       return;
     let newIndex = resultIndex;
@@ -5597,22 +5985,22 @@ var SlidePresentationBook = ({
       navigateToSlide(targetSlide);
     }
   }, [searchResults, navigateToSlide, currentSlide, currentSearchResult]);
-  const closeSearch = useCallback3(() => {
+  const closeSearch = useCallback4(() => {
     setShowSearch(false);
   }, []);
-  const clearSearch = useCallback3(() => {
+  const clearSearch = useCallback4(() => {
     setSearchQuery("");
     setSearchResults([]);
     setCurrentSearchResult(-1);
     setSearchStartSlide(0);
   }, []);
-  const goToPreviousSlide = useCallback3(() => {
+  const goToPreviousSlide = useCallback4(() => {
     navigateToSlide(currentSlide - stepSize);
   }, [currentSlide, navigateToSlide, stepSize]);
-  const goToNextSlide = useCallback3(() => {
+  const goToNextSlide = useCallback4(() => {
     navigateToSlide(currentSlide + stepSize);
   }, [currentSlide, navigateToSlide, stepSize]);
-  const handleCollapseLeft = useCallback3(() => {
+  const handleCollapseLeft = useCallback4(() => {
     if (collapsedSide === "left") {
       setCollapsedSide(null);
     } else if (collapsedSide === "right") {
@@ -5622,7 +6010,7 @@ var SlidePresentationBook = ({
       setCollapsedSide("right");
     }
   }, [collapsedSide]);
-  const handleCollapseRight = useCallback3(() => {
+  const handleCollapseRight = useCallback4(() => {
     if (collapsedSide === "right") {
       setCollapsedSide(null);
     } else if (collapsedSide === "left") {
@@ -5632,7 +6020,7 @@ var SlidePresentationBook = ({
       setCollapsedSide("left");
     }
   }, [collapsedSide]);
-  const toggleFullscreen = useCallback3(() => {
+  const toggleFullscreen = useCallback4(() => {
     if (!containerRef.current)
       return;
     if (!isFullscreen) {
@@ -5643,7 +6031,7 @@ var SlidePresentationBook = ({
       setIsFullscreen(false);
     }
   }, [isFullscreen]);
-  useEffect10(() => {
+  useEffect11(() => {
     const handleKeyDown = (event) => {
       if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
         if (showSearch && (event.key === "Tab" || event.key === "Enter" || event.key === "Escape")) {} else {
@@ -5762,7 +6150,7 @@ var SlidePresentationBook = ({
     searchResults,
     effectiveTocDisplayMode
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (currentSlide >= slides.length && slides.length > 0) {
       setCurrentSlide(slides.length - 1);
     }
@@ -6425,7 +6813,7 @@ var SlidePresentationBook = ({
   }));
 };
 // industryMarkdown/components/DocumentView.tsx
-import React19, { useRef as useRef11 } from "react";
+import React19, { useRef as useRef12 } from "react";
 var DocumentView = ({
   content,
   onCheckboxChange,
@@ -6442,9 +6830,15 @@ var DocumentView = ({
   fontSizeScale,
   theme: theme2,
   transparentBackground = false,
-  editable = false
+  editable = false,
+  annotations,
+  activeAnnotationId,
+  renderAnnotation,
+  onSelectionChange,
+  onAnnotationClick,
+  annotationStyle
 }) => {
-  const containerRef = useRef11(null);
+  const containerRef = useRef12(null);
   const backgroundColor = transparentBackground ? "transparent" : theme2.colors.background;
   return /* @__PURE__ */ React19.createElement("div", {
     ref: containerRef,
@@ -6476,7 +6870,13 @@ var DocumentView = ({
     repositoryInfo,
     transparentBackground,
     editable,
-    containerWidth: width
+    containerWidth: width,
+    annotations,
+    activeAnnotationId,
+    renderAnnotation,
+    onSelectionChange,
+    onAnnotationClick,
+    annotationStyle
   })));
 };
 // industryMarkdown/components/SkillMarkdown.tsx