@papyrus-sdk/ui-react 0.2.8 → 0.2.9

package/dist/index.js

@@ -57,16 +57,31 @@ var Topbar = ({
     triggerScrollToPage
   } = (0, import_core.useViewerStore)();
   const fileInputRef = (0, import_react.useRef)(null);
+  const zoomTimerRef = (0, import_react.useRef)(null);
+  const pendingZoomRef = (0, import_react.useRef)(null);
   const [pageInput, setPageInput] = (0, import_react.useState)(currentPage.toString());
+  const pageDigits = Math.max(2, String(pageCount || 1).length);
   const [showPageThemes, setShowPageThemes] = (0, import_react.useState)(false);
   const isDark = uiTheme === "dark";
   (0, import_react.useEffect)(() => {
     setPageInput(currentPage.toString());
   }, [currentPage]);
+  (0, import_react.useEffect)(() => () => {
+    if (zoomTimerRef.current) clearTimeout(zoomTimerRef.current);
+  }, []);
   const handleZoom = (delta) => {
-    const newZoom = Math.max(0.2, Math.min(5, zoom + delta));
-    engine.setZoom(newZoom);
-    setDocumentState({ zoom: newZoom });
+    const baseZoom = pendingZoomRef.current ?? zoom;
+    const nextZoom = Math.max(0.2, Math.min(5, baseZoom + delta));
+    pendingZoomRef.current = nextZoom;
+    if (zoomTimerRef.current) return;
+    zoomTimerRef.current = setTimeout(() => {
+      zoomTimerRef.current = null;
+      const targetZoom = pendingZoomRef.current;
+      pendingZoomRef.current = null;
+      if (targetZoom == null) return;
+      engine.setZoom(targetZoom);
+      setDocumentState({ zoom: targetZoom });
+    }, 80);
   };
   const handlePageChange = (page) => {
     if (pageCount <= 0) return;
@@ -102,7 +117,8 @@ var Topbar = ({
               "input",
               {
                 type: "text",
-                className: "papyrus-input w-10 text-center bg-transparent focus:outline-none font-bold text-sm",
+                className: "papyrus-input text-center bg-transparent focus:outline-none font-bold text-sm shrink-0",
+                style: { width: `${pageDigits + 1.75}ch` },
                 value: pageInput,
                 onChange: (e) => setPageInput(e.target.value),
                 onKeyDown: (e) => e.key === "Enter" && handlePageChange(parseInt(pageInput)),
@@ -194,22 +210,44 @@ var withAlpha = (hex, alpha) => {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 var Thumbnail = ({ engine, pageIndex, active, isDark, accentColor, onClick }) => {
+  const wrapperRef = (0, import_react2.useRef)(null);
   const canvasRef = (0, import_react2.useRef)(null);
   const htmlRef = (0, import_react2.useRef)(null);
   const accentSoft = withAlpha(accentColor, 0.12);
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
+  const [isVisible, setIsVisible] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    const target = wrapperRef.current;
+    if (!target) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsVisible(true);
+      return;
+    }
+    const root = target.closest(".custom-scrollbar");
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      });
+    }, { root: root ?? null, rootMargin: "200px" });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, []);
   (0, import_react2.useEffect)(() => {
-    if (renderTargetType === "element") return;
+    if (renderTargetType === "element" || !isVisible) return;
     const target = canvasRef.current;
     if (target) {
       engine.renderPage(pageIndex, target, 0.15).catch((err) => {
         console.error("[Papyrus] Thumbnail render failed:", err);
       });
     }
-  }, [engine, pageIndex, renderTargetType]);
+  }, [engine, pageIndex, renderTargetType, isVisible]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
+      ref: wrapperRef,
       onClick,
       className: `p-3 cursor-pointer transition-all rounded-lg border-2 ${active ? "shadow-sm" : "border-transparent"}`,
       style: active ? { borderColor: accentColor, backgroundColor: accentSoft } : void 0,
@@ -382,6 +420,7 @@ var SidebarRight = ({ engine }) => {
   const searchService = new import_core3.SearchService(engine);
   const isDark = uiTheme === "dark";
   const accentSoft = withAlpha2(accentColor, 0.12);
+  const resultsCount = searchResults.length;
   const handleSearch = async (e) => {
     e.preventDefault();
     if (!query.trim()) {
@@ -421,7 +460,7 @@ var SidebarRight = ({ engine }) => {
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => toggleSidebarRight(), className: "text-gray-400 hover:text-red-500 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => toggleSidebarRight(), className: "papyrus-unstyled-button text-gray-400 hover:text-red-500 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1 overflow-y-auto p-4 custom-scrollbar bg-opacity-50", children: sidebarRightTab === "search" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { onSubmit: handleSearch, className: "relative mb-6", children: [
@@ -435,7 +474,8 @@ var SidebarRight = ({ engine }) => {
                 onChange: (e) => setQuery(e.target.value)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "absolute right-3 top-2.5 text-gray-400 transition-colors", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
+            resultsCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute right-9 top-2.5 text-[10px] font-bold text-gray-400", children: resultsCount }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", className: "papyrus-unstyled-button absolute right-3 top-2.5 text-gray-400 transition-colors", style: { color: accentColor }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }) })
           ] }),
           isSearching && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col items-center justify-center py-12 space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "w-6 h-6 border-2 border-t-transparent rounded-full animate-spin", style: { borderColor: accentColor } }),
@@ -445,7 +485,9 @@ var SidebarRight = ({ engine }) => {
             "div",
             {
               onClick: () => {
-                setDocumentState({ activeSearchIndex: idx });
+                const page = res.pageIndex + 1;
+                engine.goToPage(page);
+                setDocumentState({ activeSearchIndex: idx, currentPage: page });
                 triggerScrollToPage(res.pageIndex);
               },
               className: `p-4 rounded-xl border-2 cursor-pointer transition-all group hover:scale-[1.02] ${idx === activeSearchIndex ? "shadow-lg" : isDark ? "border-[#333] hover:border-[#555] bg-[#222]" : "border-gray-50 hover:border-gray-200 bg-gray-50/50 hover:bg-white"}`,
@@ -521,7 +563,7 @@ var import_react4 = require("react");
 var import_core4 = require("@papyrus-sdk/core");
 var import_types = require("@papyrus-sdk/types");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
+var PageRenderer = ({ engine, pageIndex, availableWidth, onMeasuredSize }) => {
   const containerRef = (0, import_react4.useRef)(null);
   const canvasRef = (0, import_react4.useRef)(null);
   const htmlLayerRef = (0, import_react4.useRef)(null);
@@ -531,6 +573,10 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
   const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
   const [startPos, setStartPos] = (0, import_react4.useState)({ x: 0, y: 0 });
   const [currentRect, setCurrentRect] = (0, import_react4.useState)({ x: 0, y: 0, w: 0, h: 0 });
+  const [textLayerVersion, setTextLayerVersion] = (0, import_react4.useState)(0);
+  const [selectionMenu, setSelectionMenu] = (0, import_react4.useState)(null);
+  const [isInkDrawing, setIsInkDrawing] = (0, import_react4.useState)(false);
+  const [inkPoints, setInkPoints] = (0, import_react4.useState)([]);
   const {
     zoom,
     rotation,
@@ -543,10 +589,20 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
     removeAnnotation,
     selectedAnnotationId,
     setSelectedAnnotation,
-    accentColor
+    accentColor,
+    annotationColor,
+    searchQuery,
+    searchResults,
+    activeSearchIndex
   } = (0, import_core4.useViewerStore)();
   const renderTargetType = engine.getRenderTargetType?.() ?? "canvas";
   const isElementRender = renderTargetType === "element";
+  const textMarkupTools = /* @__PURE__ */ new Set(["highlight", "underline", "squiggly", "strikeout"]);
+  const canSelectText = activeTool === "select" || textMarkupTools.has(activeTool);
+  const hasSearchHits = (0, import_react4.useMemo)(
+    () => Boolean(searchQuery?.trim()) && searchResults.some((res) => res.pageIndex === pageIndex),
+    [searchQuery, searchResults, pageIndex]
+  );
   (0, import_react4.useEffect)(() => {
     let active = true;
     const loadSize = async () => {
@@ -579,8 +635,14 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
     };
   }, [pageSize, zoom, fitScale]);
   (0, import_react4.useEffect)(() => {
-    if (scrollToPageSignal === pageIndex && containerRef.current) {
-      containerRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    if (!displaySize || !onMeasuredSize) return;
+    onMeasuredSize(pageIndex, {
+      width: Math.round(displaySize.width),
+      height: Math.round(displaySize.height)
+    });
+  }, [displaySize, onMeasuredSize, pageIndex]);
+  (0, import_react4.useEffect)(() => {
+    if (scrollToPageSignal === pageIndex) {
       setDocumentState({ scrollToPageSignal: null });
     }
   }, [scrollToPageSignal, pageIndex, setDocumentState]);
@@ -592,10 +654,15 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
       setLoading(true);
       try {
         const RENDER_SCALE = 2;
-        const renderScale = isElementRender ? 1 : RENDER_SCALE * fitScale;
-        await engine.renderPage(pageIndex, renderTarget, renderScale);
+        const canvasRenderScale = isElementRender ? 1 : RENDER_SCALE * fitScale;
+        const textRenderScale = isElementRender ? 1 : fitScale;
+        if (!isElementRender && canvasRef.current && displaySize) {
+          canvasRef.current.style.width = `${displaySize.width}px`;
+          canvasRef.current.style.height = `${displaySize.height}px`;
+        }
+        await engine.renderPage(pageIndex, renderTarget, canvasRenderScale);
         if (!isElementRender && !pageSize && canvasRef.current) {
-          const denom = renderScale * Math.max(zoom, 0.01);
+          const denom = canvasRenderScale * Math.max(zoom, 0.01);
           if (denom > 0) {
             setPageSize({
               width: canvasRef.current.width / denom,
@@ -606,7 +673,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
         if (!active || !textLayerRef.current) return;
         if (!isElementRender) {
           textLayerRef.current.innerHTML = "";
-          await engine.renderTextLayer(pageIndex, textLayerRef.current, renderScale);
+          await engine.renderTextLayer(pageIndex, textLayerRef.current, textRenderScale);
         }
         if (!active || !textLayerRef.current) return;
         if (!isElementRender && displaySize) {
@@ -617,6 +684,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
           textLayerRef.current.style.width = `${displaySize.width}px`;
           textLayerRef.current.style.height = `${displaySize.height}px`;
         }
+        setTextLayerVersion((v) => v + 1);
       } catch (err) {
         if (!active) return;
         console.error("[Papyrus] Falha na renderiza\xE7\xE3o:", err);
@@ -629,8 +697,68 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
       active = false;
     };
   }, [engine, pageIndex, zoom, rotation, isElementRender, fitScale, displaySize, pageSize]);
+  (0, import_react4.useEffect)(() => {
+    if (isElementRender) return;
+    const layer = textLayerRef.current;
+    if (!layer) return;
+    const query = searchQuery?.trim().toLowerCase();
+    const existingMarks = Array.from(layer.querySelectorAll("mark.papyrus-search-hit"));
+    existingMarks.forEach((mark) => {
+      const parent = mark.parentNode;
+      if (!parent) return;
+      while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
+      parent.removeChild(mark);
+      parent.normalize();
+    });
+    if (!query || !hasSearchHits) return;
+    const nodes = [];
+    const walker = document.createTreeWalker(layer, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        const text = node.nodeValue ?? "";
+        if (!text.trim()) return NodeFilter.FILTER_REJECT;
+        return NodeFilter.FILTER_ACCEPT;
+      }
+    });
+    while (walker.nextNode()) {
+      nodes.push(walker.currentNode);
+    }
+    nodes.forEach((textNode) => {
+      const text = textNode.nodeValue ?? "";
+      const lower = text.toLowerCase();
+      if (!lower.includes(query)) return;
+      const fragment = document.createDocumentFragment();
+      let cursor = 0;
+      let index = lower.indexOf(query, cursor);
+      while (index !== -1) {
+        if (index > cursor) {
+          fragment.appendChild(document.createTextNode(text.slice(cursor, index)));
+        }
+        const mark = document.createElement("mark");
+        mark.className = "papyrus-search-hit";
+        mark.textContent = text.slice(index, index + query.length);
+        fragment.appendChild(mark);
+        cursor = index + query.length;
+        index = lower.indexOf(query, cursor);
+      }
+      if (cursor < text.length) {
+        fragment.appendChild(document.createTextNode(text.slice(cursor)));
+      }
+      const parent = textNode.parentNode;
+      if (parent) parent.replaceChild(fragment, textNode);
+    });
+  }, [searchQuery, hasSearchHits, pageIndex, isElementRender, activeSearchIndex, textLayerVersion]);
   const handleMouseDown = (e) => {
-    if (activeTool === "select") return;
+    setSelectionMenu(null);
+    if (activeTool === "ink") {
+      const rect2 = containerRef.current?.getBoundingClientRect();
+      if (!rect2) return;
+      const x2 = (e.clientX - rect2.left) / rect2.width;
+      const y2 = (e.clientY - rect2.top) / rect2.height;
+      setIsInkDrawing(true);
+      setInkPoints([{ x: x2, y: y2 }]);
+      return;
+    }
+    if (canSelectText) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
     setIsDragging(true);
@@ -640,6 +768,14 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
     setCurrentRect({ x, y, w: 0, h: 0 });
   };
   const handleMouseMove = (e) => {
+    if (isInkDrawing) {
+      const rect2 = containerRef.current?.getBoundingClientRect();
+      if (!rect2) return;
+      const x = (e.clientX - rect2.left) / rect2.width;
+      const y = (e.clientY - rect2.top) / rect2.height;
+      setInkPoints((prev) => [...prev, { x, y }]);
+      return;
+    }
     if (!isDragging) return;
     const rect = containerRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -653,6 +789,115 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
     });
   };
   const handleMouseUp = (e) => {
+    if (isInkDrawing) {
+      setIsInkDrawing(false);
+      if (inkPoints.length > 1) {
+        const xs = inkPoints.map((p) => p.x);
+        const ys = inkPoints.map((p) => p.y);
+        const minX = Math.min(...xs);
+        const maxX = Math.max(...xs);
+        const minY = Math.min(...ys);
+        const maxY = Math.max(...ys);
+        const width = Math.max(maxX - minX, 5e-4);
+        const height = Math.max(maxY - minY, 5e-4);
+        const path = inkPoints.map((p) => ({
+          x: Math.max(0, Math.min(1, p.x)),
+          y: Math.max(0, Math.min(1, p.y))
+        }));
+        addAnnotation({
+          id: Math.random().toString(36).substr(2, 9),
+          pageIndex,
+          type: "ink",
+          rect: { x: minX, y: minY, width, height },
+          path,
+          color: annotationColor,
+          createdAt: Date.now()
+        });
+      }
+      setInkPoints([]);
+      return;
+    }
+    const selection = window.getSelection();
+    const selectionText = selection?.toString().trim() ?? "";
+    if (selectionText && textLayerRef.current && containerRef.current && selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      if (textLayerRef.current.contains(range.commonAncestorContainer)) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const clientRects = Array.from(range.getClientRects());
+        const rects = clientRects.filter((r) => r.width > 1 && r.height > 1).map((r) => {
+          const x = (r.left - containerRect.left) / containerRect.width;
+          const y = (r.top - containerRect.top) / containerRect.height;
+          const width = r.width / containerRect.width;
+          const height = r.height / containerRect.height;
+          return {
+            x: Math.max(0, Math.min(1, x)),
+            y: Math.max(0, Math.min(1, y)),
+            width: Math.max(0, Math.min(1, width)),
+            height: Math.max(0, Math.min(1, height))
+          };
+        });
+        const uniqueRects = rects.filter((rect, index, list) => {
+          const key = `${Math.round(rect.x * 1e4)}-${Math.round(rect.y * 1e4)}-${Math.round(rect.width * 1e4)}-${Math.round(rect.height * 1e4)}`;
+          return list.findIndex((r) => `${Math.round(r.x * 1e4)}-${Math.round(r.y * 1e4)}-${Math.round(r.width * 1e4)}-${Math.round(r.height * 1e4)}` === key) === index;
+        });
+        const mergedRects = uniqueRects.reduce((acc, rect) => {
+          const target = acc.find((r) => {
+            const closeY = Math.abs(r.y - rect.y) < 2e-3 && Math.abs(r.height - rect.height) < 2e-3;
+            const overlaps = rect.x <= r.x + r.width + 2e-3 && rect.x + rect.width >= r.x - 2e-3;
+            return closeY && overlaps;
+          });
+          if (!target) {
+            acc.push({ ...rect });
+            return acc;
+          }
+          const left = Math.min(target.x, rect.x);
+          const right = Math.max(target.x + target.width, rect.x + rect.width);
+          target.x = left;
+          target.width = right - left;
+          return acc;
+        }, []);
+        if (mergedRects.length) {
+          const xs = mergedRects.map((r) => r.x);
+          const ys = mergedRects.map((r) => r.y);
+          const xe = mergedRects.map((r) => r.x + r.width);
+          const ye = mergedRects.map((r) => r.y + r.height);
+          const rect = {
+            x: Math.min(...xs),
+            y: Math.min(...ys),
+            width: Math.max(...xe) - Math.min(...xs),
+            height: Math.max(...ye) - Math.min(...ys)
+          };
+          if (textMarkupTools.has(activeTool)) {
+            addAnnotation({
+              id: Math.random().toString(36).substr(2, 9),
+              pageIndex,
+              type: activeTool,
+              rect,
+              rects: mergedRects,
+              color: annotationColor,
+              content: selectionText,
+              createdAt: Date.now()
+            });
+            selection.removeAllRanges();
+            setSelectionMenu(null);
+            return;
+          }
+          if (activeTool === "select") {
+            const anchorX = (rect.x + rect.width) * containerRect.width;
+            const anchorY = rect.y * containerRect.height;
+            setSelectionMenu({
+              rects: mergedRects,
+              rect,
+              text: selectionText,
+              anchor: {
+                x: Math.max(12, Math.min(containerRect.width - 12, anchorX)),
+                y: Math.max(12, anchorY - 32)
+              }
+            });
+          }
+        }
+      }
+    }
     if (isDragging) {
       setIsDragging(false);
       if (currentRect.w > 5 && currentRect.h > 5) {
@@ -668,7 +913,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
               width: currentRect.w / rect.width,
               height: currentRect.h / rect.height
             },
-            color: activeTool === "highlight" ? "#fbbf24" : activeTool === "strikeout" ? "#ef4444" : accentColor,
+            color: activeTool === "highlight" ? annotationColor : accentColor,
             content: activeTool === "text" || activeTool === "comment" ? "" : void 0,
             createdAt: Date.now()
           });
@@ -678,7 +923,6 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
       return;
     }
     if (activeTool === "select") {
-      const selection = window.getSelection();
       const selectedText = selection?.toString().trim();
       if (selectedText) {
         import_core4.papyrusEvents.emit(import_types.PapyrusEventType.TEXT_SELECTED, {
@@ -704,7 +948,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
     "div",
     {
       ref: containerRef,
-      className: `relative inline-block shadow-2xl bg-white mb-10 transition-all ${activeTool !== "select" ? "no-select cursor-crosshair" : ""}`,
+      className: `relative inline-block shadow-2xl bg-white mb-10 transition-all ${canSelectText ? "" : "no-select cursor-crosshair"}`,
       style: { scrollMarginTop: "20px", minHeight: "100px" },
       onMouseDown: handleMouseDown,
       onMouseMove: handleMouseMove,
@@ -733,7 +977,7 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
             ref: textLayerRef,
             className: "textLayer",
             style: {
-              pointerEvents: isElementRender ? "none" : activeTool === "select" ? "auto" : "none",
+              pointerEvents: isElementRender ? "none" : canSelectText ? "auto" : "none",
               display: isElementRender ? "none" : "block"
             }
           }
@@ -743,8 +987,9 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
           {
             className: "absolute border-2 z-[40] pointer-events-none",
             style: {
-              borderColor: accentColor,
-              backgroundColor: `${accentColor}33`,
+              borderColor: activeTool === "highlight" ? annotationColor : accentColor,
+              backgroundColor: activeTool === "highlight" ? `${annotationColor}66` : `${accentColor}33`,
+              mixBlendMode: activeTool === "highlight" ? "multiply" : void 0,
               left: currentRect.x,
               top: currentRect.y,
               width: currentRect.w,
@@ -752,6 +997,60 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
             }
           }
         ),
+        isInkDrawing && inkPoints.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "svg",
+          {
+            className: "absolute inset-0 pointer-events-none z-[45]",
+            viewBox: "0 0 1 1",
+            preserveAspectRatio: "none",
+            style: { width: "100%", height: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "path",
+              {
+                d: inkPoints.map((p, idx) => `${idx === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" "),
+                fill: "none",
+                stroke: annotationColor,
+                strokeWidth: 8e-3,
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        selectionMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "absolute z-[60] flex items-center gap-1 rounded-full border px-2 py-1 shadow-xl bg-white/95 backdrop-blur-md text-gray-700",
+            style: { left: selectionMenu.anchor.x, top: selectionMenu.anchor.y },
+            children: [
+              { id: "highlight", label: "Marcar" },
+              { id: "underline", label: "Sublinhar" },
+              { id: "squiggly", label: "Onda" },
+              { id: "strikeout", label: "Risco" }
+            ].map((action) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                className: "text-[10px] font-bold px-2 py-1 rounded-full hover:bg-gray-100",
+                onClick: () => {
+                  addAnnotation({
+                    id: Math.random().toString(36).substr(2, 9),
+                    pageIndex,
+                    type: action.id,
+                    rect: selectionMenu.rect,
+                    rects: selectionMenu.rects,
+                    content: selectionMenu.text,
+                    color: annotationColor,
+                    createdAt: Date.now()
+                  });
+                  window.getSelection()?.removeAllRanges();
+                  setSelectionMenu(null);
+                },
+                children: action.label
+              },
+              action.id
+            ))
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-0 pointer-events-none z-20", children: annotations.filter((a) => a.pageIndex === pageIndex).map((ann) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           AnnotationItem,
           {
@@ -769,6 +1068,101 @@ var PageRenderer = ({ engine, pageIndex, availableWidth }) => {
 };
 var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
   const isText = ann.type === "text" || ann.type === "comment";
+  const isHighlight = ann.type === "highlight";
+  const isMarkup = ann.type === "highlight" || ann.type === "underline" || ann.type === "squiggly" || ann.type === "strikeout";
+  const rects = ann.rects && ann.rects.length > 0 ? ann.rects : [ann.rect];
+  const isInk = ann.type === "ink" && ann.path && ann.path.length > 1;
+  const renderMarkupRects = () => {
+    if (!isMarkup) return null;
+    return rects.map((r, idx) => {
+      const left = ann.rect.width ? (r.x - ann.rect.x) / ann.rect.width * 100 : 0;
+      const top = ann.rect.height ? (r.y - ann.rect.y) / ann.rect.height * 100 : 0;
+      const width = ann.rect.width ? r.width / ann.rect.width * 100 : 100;
+      const height = ann.rect.height ? r.height / ann.rect.height * 100 : 100;
+      if (ann.type === "highlight") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "absolute rounded-sm",
+            style: {
+              left: `${left}%`,
+              top: `${top}%`,
+              width: `${width}%`,
+              height: `${height}%`,
+              backgroundColor: `${ann.color}88`,
+              mixBlendMode: "multiply"
+            }
+          },
+          idx
+        );
+      }
+      const lineStyle = {
+        left: `${left}%`,
+        width: `${width}%`
+      };
+      if (ann.type === "underline") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "absolute",
+            style: {
+              ...lineStyle,
+              top: `calc(${top}% + ${height}% - 2px)`,
+              height: "2px",
+              backgroundColor: ann.color
+            }
+          },
+          idx
+        );
+      }
+      if (ann.type === "strikeout") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "absolute",
+            style: {
+              ...lineStyle,
+              top: `calc(${top}% + ${height * 0.5}% - 1px)`,
+              height: "2px",
+              backgroundColor: ann.color
+            }
+          },
+          idx
+        );
+      }
+      if (ann.type === "squiggly") {
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            className: "absolute",
+            style: {
+              ...lineStyle,
+              top: `calc(${top}% + ${height}% - 4px)`,
+              height: "4px",
+              backgroundImage: `linear-gradient(135deg, transparent 75%, ${ann.color} 0), linear-gradient(225deg, transparent 75%, ${ann.color} 0)`,
+              backgroundSize: "6px 6px",
+              backgroundPosition: "0 0, 3px 3px"
+            }
+          },
+          idx
+        );
+      }
+      return null;
+    });
+  };
+  const renderInk = () => {
+    if (!isInk || !ann.path) return null;
+    const d = ann.path.map((p, idx) => `${idx === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "svg",
+      {
+        className: "absolute inset-0",
+        viewBox: `${ann.rect.x} ${ann.rect.y} ${ann.rect.width} ${ann.rect.height}`,
+        preserveAspectRatio: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d, fill: "none", stroke: ann.color, strokeWidth: 8e-3, strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
@@ -778,8 +1172,9 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
         top: `${ann.rect.y * 100}%`,
         width: `${ann.rect.width * 100}%`,
         height: `${ann.rect.height * 100}%`,
-        backgroundColor: ann.type === "highlight" ? `${ann.color}77` : "transparent",
-        borderBottom: ann.type === "strikeout" ? `2px solid ${ann.color}` : "none",
+        backgroundColor: !isMarkup && isHighlight ? `${ann.color}88` : "transparent",
+        mixBlendMode: !isMarkup && isHighlight ? "multiply" : void 0,
+        borderBottom: ann.type === "strikeout" && !isMarkup ? `2px solid ${ann.color}` : "none",
         outline: isSelected ? `2px solid ${accentColor}` : void 0
       },
       onClick: (e) => {
@@ -787,6 +1182,8 @@ var AnnotationItem = ({ ann, isSelected, accentColor, onDelete, onSelect }) => {
         onSelect();
       },
       children: [
+        renderMarkupRects(),
+        renderInk(),
         isText && isSelected && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-full mt-2 w-64 bg-white shadow-2xl rounded-xl p-4 border border-gray-100 z-50", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "textarea",
           {
@@ -816,14 +1213,36 @@ var PageRenderer_default = PageRenderer;
 
 // components/Viewer.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var BASE_OVERSCAN = 6;
 var Viewer = ({ engine }) => {
-  const { viewMode, pageCount, currentPage, activeTool, uiTheme, setDocumentState, accentColor } = (0, import_core5.useViewerStore)();
+  const { pageCount, currentPage, zoom, activeTool, uiTheme, scrollToPageSignal, setDocumentState, accentColor, annotationColor, setAnnotationColor } = (0, import_core5.useViewerStore)();
   const isDark = uiTheme === "dark";
   const viewerRef = (0, import_react5.useRef)(null);
+  const colorPickerRef = (0, import_react5.useRef)(null);
+  const pageRefs = (0, import_react5.useRef)([]);
+  const intersectionRatiosRef = (0, import_react5.useRef)({});
+  const frameRef = (0, import_react5.useRef)(null);
+  const jumpRef = (0, import_react5.useRef)(false);
+  const jumpTimerRef = (0, import_react5.useRef)(null);
   const [availableWidth, setAvailableWidth] = (0, import_react5.useState)(null);
+  const [basePageSize, setBasePageSize] = (0, import_react5.useState)(null);
+  const [pageSizes, setPageSizes] = (0, import_react5.useState)({});
+  const [colorPickerOpen, setColorPickerOpen] = (0, import_react5.useState)(false);
   const isCompact = availableWidth !== null && availableWidth < 820;
   const paddingY = isCompact ? "py-10" : "py-16";
-  const toolDockPosition = isCompact ? "bottom-6" : "bottom-10";
+  const toolDockPosition = isCompact ? "bottom-4" : "bottom-8";
+  const colorPalette = ["#fbbf24", "#f97316", "#ef4444", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#111827"];
+  (0, import_react5.useEffect)(() => {
+    if (!colorPickerOpen) return;
+    const handleClick = (event) => {
+      if (!colorPickerRef.current) return;
+      if (!colorPickerRef.current.contains(event.target)) {
+        setColorPickerOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [colorPickerOpen]);
   (0, import_react5.useEffect)(() => {
     const element = viewerRef.current;
     if (!element) return;
@@ -840,29 +1259,139 @@ var Viewer = ({ engine }) => {
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
+  (0, import_react5.useEffect)(() => {
+    let active = true;
+    if (!pageCount) return;
+    const loadBaseSize = async () => {
+      try {
+        const size = await engine.getPageDimensions(0);
+        if (!active || !size.width || !size.height) return;
+        setBasePageSize(size);
+      } catch {
+      }
+    };
+    loadBaseSize();
+    return () => {
+      active = false;
+    };
+  }, [engine, pageCount]);
+  (0, import_react5.useEffect)(() => {
+    if (scrollToPageSignal == null) return;
+    const root = viewerRef.current;
+    const target = pageRefs.current[scrollToPageSignal];
+    if (root) {
+      setDocumentState({ currentPage: scrollToPageSignal + 1 });
+      jumpRef.current = true;
+      if (jumpTimerRef.current) clearTimeout(jumpTimerRef.current);
+      const previousBehavior = root.style.scrollBehavior;
+      root.style.scrollBehavior = "auto";
+      let targetTop = null;
+      if (target) {
+        targetTop = target.offsetTop;
+      } else if (basePageSize && availableWidth) {
+        const fitScale = Math.min(1, Math.max(0, availableWidth - 48) / basePageSize.width);
+        const estimatedPageHeight = basePageSize.height * fitScale * zoom + 64;
+        targetTop = Math.max(0, estimatedPageHeight * scrollToPageSignal);
+      } else if (pageCount > 1) {
+        const maxScroll = Math.max(0, root.scrollHeight - root.clientHeight);
+        const ratio = scrollToPageSignal / Math.max(1, pageCount - 1);
+        targetTop = Math.max(0, maxScroll * ratio);
+      }
+      if (targetTop != null) {
+        root.scrollTop = Math.max(0, targetTop - 12);
+      }
+      requestAnimationFrame(() => {
+        root.style.scrollBehavior = previousBehavior;
+      });
+      jumpTimerRef.current = setTimeout(() => {
+        jumpRef.current = false;
+      }, 250);
+    }
+    setDocumentState({ scrollToPageSignal: null });
+  }, [scrollToPageSignal, setDocumentState, basePageSize, availableWidth, zoom, pageCount]);
+  (0, import_react5.useEffect)(() => {
+    setPageSizes({});
+  }, [zoom]);
   (0, import_react5.useEffect)(() => {
     const root = viewerRef.current;
     if (!root) return;
+    const flushCurrentPage = () => {
+      if (jumpRef.current) return;
+      const ratios = intersectionRatiosRef.current;
+      const entries = Object.entries(ratios).filter(([, ratio]) => ratio > 0);
+      if (!entries.length) return;
+      const currentIndex = currentPage - 1;
+      const currentRatio = ratios[currentIndex] ?? 0;
+      const [bestIndexText, bestRatio] = entries.reduce(
+        (best, candidate) => Number(candidate[1]) > Number(best[1]) ? candidate : best
+      );
+      const bestIndex = Number(bestIndexText);
+      if (!Number.isFinite(bestIndex)) return;
+      const bestPage = bestIndex + 1;
+      const shouldSwitch = bestPage !== currentPage && (currentRatio <= 0 || bestRatio >= currentRatio + 0.1 || bestRatio >= 0.75);
+      if (shouldSwitch) setDocumentState({ currentPage: bestPage });
+    };
     const observer = new IntersectionObserver((entries) => {
       entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const pageIndex = parseInt(entry.target.getAttribute("data-page-index") || "0");
-          if (pageIndex + 1 !== currentPage) setDocumentState({ currentPage: pageIndex + 1 });
-        }
+        const pageIndex = parseInt(entry.target.getAttribute("data-page-index") || "0");
+        if (!Number.isFinite(pageIndex)) return;
+        intersectionRatiosRef.current[pageIndex] = entry.isIntersecting ? entry.intersectionRatio : 0;
+      });
+      if (frameRef.current != null) cancelAnimationFrame(frameRef.current);
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        flushCurrentPage();
       });
-    }, { root, threshold: 0.5 });
+    }, { root, threshold: [0.25, 0.5, 0.75] });
     const pageElements = root.querySelectorAll(".page-container");
     pageElements.forEach((el) => observer.observe(el));
     return () => {
+      if (frameRef.current != null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
       pageElements.forEach((el) => observer.unobserve(el));
       observer.disconnect();
     };
   }, [pageCount, setDocumentState, currentPage]);
+  const virtualOverscan = zoom > 1.35 ? 4 : BASE_OVERSCAN;
+  const virtualAnchor = currentPage - 1;
+  const virtualStart = Math.max(0, virtualAnchor - virtualOverscan);
+  const virtualEnd = Math.min(pageCount - 1, virtualAnchor + virtualOverscan);
+  const fallbackSize = (0, import_react5.useMemo)(() => {
+    if (basePageSize && availableWidth) {
+      const fitScale = Math.min(1, Math.max(0, availableWidth - 48) / basePageSize.width);
+      return {
+        width: Math.round(basePageSize.width * fitScale * zoom),
+        height: Math.round(basePageSize.height * fitScale * zoom)
+      };
+    }
+    const base = availableWidth ? Math.max(680, availableWidth * 1.3) : 1100;
+    return {
+      width: Math.round((availableWidth ?? 860) - 48),
+      height: Math.round(base * zoom)
+    };
+  }, [basePageSize, availableWidth, zoom]);
+  const averagePageHeight = (0, import_react5.useMemo)(() => {
+    const heights = Object.values(pageSizes).map((size) => size.height);
+    if (!heights.length) return availableWidth ? Math.max(680, availableWidth * 1.3) : 1100;
+    return Math.round(heights.reduce((sum, h) => sum + h, 0) / heights.length);
+  }, [pageSizes, availableWidth]);
   const pages = Array.from({ length: pageCount }).map((_, i) => i);
+  const handlePageMeasured = (pageIndex, size) => {
+    setPageSizes((prev) => {
+      const current = prev[pageIndex];
+      if (current && current.width === size.width && current.height === size.height) return prev;
+      return { ...prev, [pageIndex]: size };
+    });
+  };
   const tools = [
     { id: "select", name: "Select", icon: "M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5" },
-    { id: "highlight", name: "Marker", icon: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" },
-    { id: "strikeout", name: "Strike", icon: "M13 10V3L4 14h7v7l9-11h-7z" },
+    { id: "highlight", name: "Highlight", icon: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" },
+    { id: "underline", name: "Underline", icon: "M6 3v6a6 6 0 0012 0V3M4 21h16" },
+    { id: "squiggly", name: "Squiggly", icon: "M3 17c2-4 4-4 6 0s4 4 6 0 4-4 6 0" },
+    { id: "strikeout", name: "Strike", icon: "M4 12h16M8 6h8M8 18h8" },
+    { id: "ink", name: "Freehand", icon: "M4 19c4-6 7-9 10-9 3 0 5 2 6 5" },
     { id: "comment", name: "Note", icon: "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
@@ -870,19 +1399,96 @@ var Viewer = ({ engine }) => {
     {
       ref: viewerRef,
       "data-papyrus-theme": uiTheme,
-      className: `papyrus-viewer papyrus-theme flex-1 overflow-auto flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
+      className: `papyrus-viewer papyrus-theme min-w-0 w-full flex-1 overflow-y-scroll overflow-x-hidden flex flex-col items-center ${paddingY} relative custom-scrollbar scroll-smooth ${isDark ? "bg-[#121212]" : "bg-[#e9ecef]"}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-center gap-6 w-full", children: pages.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-page-index": idx, className: "page-container", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PageRenderer_default, { engine, pageIndex: idx, availableWidth: availableWidth ?? void 0 }) }, idx)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `fixed ${toolDockPosition} left-1/2 -translate-x-1/2 shadow-2xl rounded-2xl p-2 flex border z-50 ${isDark ? "bg-[#2a2a2a]/90 border-[#3a3a3a] backdrop-blur-xl" : "bg-white/95 border-gray-100 backdrop-blur-md"}`, children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex flex-col items-center gap-6 w-full min-w-0", children: pages.map((idx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
           {
-            onClick: () => setDocumentState({ activeTool: tool.id }),
-            className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all ${activeTool === tool.id ? "text-white shadow-lg" : "text-gray-400"}`,
-            style: activeTool === tool.id ? { backgroundColor: accentColor } : void 0,
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: tool.icon }) })
+            ref: (element) => {
+              pageRefs.current[idx] = element;
+            },
+            "data-page-index": idx,
+            className: "page-container",
+            children: idx >= virtualStart && idx <= virtualEnd ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              PageRenderer_default,
+              {
+                engine,
+                pageIndex: idx,
+                availableWidth: availableWidth ?? void 0,
+                onMeasuredSize: handlePageMeasured
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: `inline-block mb-10 shadow-2xl border ${isDark ? "bg-[#0f0f0f] border-[#2b2b2b]" : "bg-white border-gray-200"}`,
+                style: {
+                  width: pageSizes[idx]?.width ?? fallbackSize.width,
+                  height: pageSizes[idx]?.height ?? Math.max(fallbackSize.height, averagePageHeight)
+                }
+              }
+            )
           },
-          tool.id
-        )) })
+          idx
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `papyrus-tool-dock sticky ${toolDockPosition} w-full flex justify-center pointer-events-none z-[70]`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `pointer-events-auto shadow-2xl rounded-2xl p-2 flex items-center border z-[80] ${isDark ? "bg-[#2a2a2a]/90 border-[#3a3a3a] backdrop-blur-xl" : "bg-white/95 border-gray-100 backdrop-blur-md"}`, children: [
+          tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              title: tool.name,
+              "aria-label": tool.name,
+              onClick: () => setDocumentState({ activeTool: tool.id }),
+              className: `w-10 h-10 rounded-xl flex items-center justify-center transition-all ${activeTool === tool.id ? "text-white shadow-lg" : "text-gray-400"}`,
+              style: activeTool === tool.id ? { backgroundColor: accentColor } : void 0,
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: tool.icon }) })
+            },
+            tool.id
+          )),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "w-px h-7 mx-2 bg-white/10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: colorPickerRef, className: "relative", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                title: "Cor do marcador",
+                "aria-label": "Cor do marcador",
+                onClick: () => setColorPickerOpen((prev) => !prev),
+                className: "w-9 h-9 rounded-full flex items-center justify-center border transition-all cursor-pointer relative",
+                style: { borderColor: annotationColor },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-5 h-5 rounded-full", style: { backgroundColor: annotationColor } })
+              }
+            ),
+            colorPickerOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-48 rounded-xl border p-3 shadow-2xl overflow-hidden ${isDark ? "bg-[#1f1f1f] border-[#333]" : "bg-white border-gray-200"}`, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid grid-cols-4 gap-2 mb-3", children: colorPalette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  onClick: () => {
+                    setAnnotationColor(color);
+                    setColorPickerOpen(false);
+                  },
+                  className: "w-7 h-7 rounded-full border transition-all",
+                  style: { backgroundColor: color, borderColor: color === annotationColor ? "#fff" : "transparent" }
+                },
+                color
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-[10px] uppercase tracking-widest text-gray-400 shrink-0", children: "Hex" }),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: annotationColor.toUpperCase(),
+                    onChange: (e) => {
+                      const next = e.target.value.trim();
+                      if (next.startsWith("#") && (next.length === 4 || next.length === 7)) {
+                        setAnnotationColor(next);
+                      }
+                    },
+                    className: `flex-1 min-w-0 w-full text-xs rounded-md px-2 py-1 border ${isDark ? "bg-[#2a2a2a] border-[#444] text-white" : "bg-gray-100 border-gray-200 text-gray-700"}`
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ] }) })
       ]
     }
   );