@atom63/resume 0.1.0

package/dist/index.js

@@ -0,0 +1,638 @@
+import { PAGE, ResumeFontFamilyContext, PaginationReportContext, resumeMdxComponents, WRAPPER_PADDING_X } from './chunk-FL25EF7U.js';
+export { BLOCK_GAP_PX, Columns, Entry, Footer, Group, Header, Main, PAGE, PaginatedResume, PaginationReportContext, ResumeFontFamilyContext, Rule, Section, Sidebar, packIntoPages, resumeMdxComponents, usePaginationReport, useResumeFontFamily } from './chunk-FL25EF7U.js';
+import { MDXProvider } from '@mdx-js/react';
+import clsx from 'clsx';
+import { Maximize2, Minus, Plus, ClipboardCopy } from 'lucide-react';
+import { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useIsMobile(breakpointPx = 768) {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${breakpointPx}px)`);
+    const update = () => setIsMobile(mql.matches);
+    update();
+    mql.addEventListener("change", update);
+    return () => mql.removeEventListener("change", update);
+  }, [breakpointPx]);
+  return isMobile;
+}
+
+// src/viewer/print.ts
+function createPrintClone(source) {
+  const clone = source.cloneNode(true);
+  clone.id = "resume-print-clone";
+  clone.style.cssText = "background:white;color:black";
+  clone.querySelector("[data-resume-measure]")?.remove();
+  return clone;
+}
+function hideBodyChildren() {
+  const hidden = [];
+  const preserveTags = /* @__PURE__ */ new Set(["STYLE", "LINK", "SCRIPT"]);
+  for (const child of Array.from(document.body.children)) {
+    if (!preserveTags.has(child.tagName)) {
+      child.style.setProperty("display", "none", "important");
+      hidden.push(child);
+    }
+  }
+  return hidden;
+}
+function registerPrintController(opts) {
+  let hiddenElements = [];
+  let savedTitle = "";
+  const beforePrint = () => {
+    if (!opts.shouldOwnPrint()) return;
+    const target = opts.getTarget();
+    if (!target) return;
+    savedTitle = document.title;
+    document.title = opts.getFilename();
+    const clone = createPrintClone(target);
+    hiddenElements = hideBodyChildren();
+    document.body.appendChild(clone);
+  };
+  const afterPrint = () => {
+    const clone = document.getElementById("resume-print-clone");
+    if (clone) clone.remove();
+    document.title = savedTitle;
+    for (const el of hiddenElements) {
+      el.style.removeProperty("display");
+    }
+    hiddenElements = [];
+    opts.onAfterPrint?.();
+  };
+  window.addEventListener("beforeprint", beforePrint);
+  window.addEventListener("afterprint", afterPrint);
+  return () => {
+    window.removeEventListener("beforeprint", beforePrint);
+    window.removeEventListener("afterprint", afterPrint);
+  };
+}
+
+// src/viewer/viewport.ts
+var INTERACTIVE_PAN_SELECTOR = 'a, button, [role="button"], input, textarea, select';
+var PAN_THRESHOLD_PX = 6;
+function clampZoom(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+function isInteractivePanTarget(target) {
+  return target instanceof HTMLElement && Boolean(target.closest(INTERACTIVE_PAN_SELECTOR));
+}
+function getTouchDistance(touches) {
+  if (touches.length < 2) {
+    return 0;
+  }
+  const first = touches[0];
+  const second = touches[1];
+  if (!first || !second) {
+    return 0;
+  }
+  const deltaX = first.clientX - second.clientX;
+  const deltaY = first.clientY - second.clientY;
+  return Math.hypot(deltaX, deltaY);
+}
+function clampScrollPosition(element) {
+  const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+  const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+  element.scrollLeft = Math.min(Math.max(0, element.scrollLeft), maxScrollLeft);
+  element.scrollTop = Math.min(Math.max(0, element.scrollTop), maxScrollTop);
+}
+function hasExceededPanThreshold(startX, startY, currentX, currentY, threshold = PAN_THRESHOLD_PX) {
+  return Math.abs(currentX - startX) > threshold || Math.abs(currentY - startY) > threshold;
+}
+
+// src/viewer/use-resume-viewport.ts
+var SCALE_STEP = 0.1;
+var MIN_SCALE = 0.25;
+var MAX_SCALE = 2;
+var WHEEL_ZOOM_SENSITIVITY = 0.01;
+var WHEEL_ZOOM_CAP = 0.03;
+var clampResumeZoom = (value) => clampZoom(value, MIN_SCALE, MAX_SCALE);
+function isInputFocused() {
+  const tag = document.activeElement?.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA";
+}
+function useResumeViewport({
+  scrollRef,
+  contentRef,
+  isMobile,
+  isActive,
+  pdfFilename,
+  onCopy,
+  onError
+}) {
+  const isActiveRef = useRef(isActive);
+  isActiveRef.current = isActive;
+  const printRequestedRef = useRef(false);
+  const requestPrint = useCallback(() => {
+    printRequestedRef.current = true;
+    window.print();
+  }, []);
+  const zoomAnchorRef = useRef(null);
+  const [pageCount, setPageCount] = useState(1);
+  const [zoom, setZoom] = useState(1);
+  const [fitScale, setFitScale] = useState(1);
+  const [isFitToWidth, setIsFitToWidth] = useState(true);
+  const [, forceRender] = useState(0);
+  const dragRef = useRef(null);
+  const touchPanRef = useRef(null);
+  const pinchRef = useRef(null);
+  const effectiveScale = isFitToWidth ? fitScale : zoom;
+  const effectiveScaleRef = useRef(effectiveScale);
+  const isFitToWidthRef = useRef(isFitToWidth);
+  const fitScaleRef = useRef(fitScale);
+  effectiveScaleRef.current = effectiveScale;
+  isFitToWidthRef.current = isFitToWidth;
+  fitScaleRef.current = fitScale;
+  useEffect(() => {
+    if (isFitToWidth) setZoom(fitScale);
+  }, [isFitToWidth, fitScale]);
+  useEffect(() => {
+    const viewport = scrollRef.current;
+    if (!viewport) return;
+    const updateFitScale = () => {
+      const available = Math.max(0, viewport.clientWidth - WRAPPER_PADDING_X);
+      setFitScale(clampResumeZoom(Math.min(1, available / PAGE.widthPx)));
+    };
+    updateFitScale();
+    const observer = new ResizeObserver(updateFitScale);
+    observer.observe(viewport);
+    window.visualViewport?.addEventListener("resize", updateFitScale);
+    return () => {
+      observer.disconnect();
+      window.visualViewport?.removeEventListener("resize", updateFitScale);
+    };
+  }, [scrollRef]);
+  const captureViewportCenter = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    zoomAnchorRef.current = {
+      pointX: el.scrollLeft + el.clientWidth / 2,
+      pointY: el.scrollTop + el.clientHeight / 2,
+      viewportX: el.clientWidth / 2,
+      viewportY: el.clientHeight / 2,
+      prevScale: effectiveScaleRef.current
+    };
+  }, [scrollRef]);
+  const handleZoomIn = useCallback(() => {
+    captureViewportCenter();
+    setIsFitToWidth(false);
+    setZoom((prev) => clampResumeZoom(prev + SCALE_STEP));
+  }, [captureViewportCenter]);
+  const handleZoomOut = useCallback(() => {
+    captureViewportCenter();
+    setIsFitToWidth(false);
+    setZoom((prev) => clampResumeZoom(prev - SCALE_STEP));
+  }, [captureViewportCenter]);
+  const handleActualSize = useCallback(() => {
+    captureViewportCenter();
+    setIsFitToWidth(false);
+    setZoom(1);
+  }, [captureViewportCenter]);
+  const handleFitToWidth = useCallback(() => {
+    setIsFitToWidth(true);
+  }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    let pendingDelta = 0;
+    let rafId = 0;
+    let lastCursorX = 0;
+    let lastCursorY = 0;
+    const flush = () => {
+      rafId = 0;
+      const delta = pendingDelta;
+      pendingDelta = 0;
+      const cursorX = lastCursorX;
+      const cursorY = lastCursorY;
+      setZoom((prev) => {
+        const next = clampResumeZoom(prev + delta);
+        if (next === prev) return prev;
+        zoomAnchorRef.current = {
+          pointX: el.scrollLeft + cursorX,
+          pointY: el.scrollTop + cursorY,
+          viewportX: cursorX,
+          viewportY: cursorY,
+          prevScale: isFitToWidthRef.current ? fitScaleRef.current : prev
+        };
+        return next;
+      });
+      setIsFitToWidth(false);
+    };
+    const onWheel = (e) => {
+      if (!e.ctrlKey) return;
+      e.preventDefault();
+      pendingDelta = Math.max(
+        -WHEEL_ZOOM_CAP,
+        Math.min(pendingDelta + -e.deltaY * WHEEL_ZOOM_SENSITIVITY, WHEEL_ZOOM_CAP)
+      );
+      const rect = el.getBoundingClientRect();
+      lastCursorX = e.clientX - rect.left;
+      lastCursorY = e.clientY - rect.top;
+      if (rafId === 0) {
+        rafId = requestAnimationFrame(flush);
+      }
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      if (rafId !== 0) cancelAnimationFrame(rafId);
+    };
+  }, [scrollRef]);
+  useLayoutEffect(() => {
+    const anchor = zoomAnchorRef.current;
+    if (!anchor) return;
+    const el = scrollRef.current;
+    if (!el) return;
+    const ratio = effectiveScale / anchor.prevScale;
+    el.scrollLeft = anchor.pointX * ratio - anchor.viewportX;
+    el.scrollTop = anchor.pointY * ratio - anchor.viewportY;
+    zoomAnchorRef.current = null;
+  }, [effectiveScale, scrollRef]);
+  useEffect(
+    () => registerPrintController({
+      getTarget: () => contentRef.current,
+      getFilename: () => pdfFilename ?? "resume",
+      shouldOwnPrint: () => printRequestedRef.current || isActiveRef.current,
+      onAfterPrint: () => {
+        printRequestedRef.current = false;
+        forceRender((n) => n + 1);
+      }
+    }),
+    [pdfFilename, contentRef]
+  );
+  useEffect(() => {
+    const keyActions = {
+      "+": handleZoomIn,
+      "=": handleZoomIn,
+      "-": handleZoomOut,
+      _: handleZoomOut
+    };
+    const modKeyActions = {
+      "0": handleFitToWidth,
+      "1": handleActualSize,
+      p: requestPrint
+    };
+    const handleKeyDown = (e) => {
+      if (!isActiveRef.current || isInputFocused()) return;
+      const mod = e.ctrlKey || e.metaKey;
+      const action = mod ? modKeyActions[e.key] : keyActions[e.key];
+      if (action) {
+        e.preventDefault();
+        action();
+      }
+    };
+    globalThis.addEventListener("keydown", handleKeyDown);
+    return () => globalThis.removeEventListener("keydown", handleKeyDown);
+  }, [handleZoomIn, handleZoomOut, handleFitToWidth, handleActualSize, requestPrint]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const setPanActive = (active) => {
+      if (isMobile) {
+        el.dataset.panActive = active ? "" : void 0;
+      }
+    };
+    const moveDrag = (clientX, clientY) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      el.scrollLeft = drag.scrollX - (clientX - drag.startX);
+      el.scrollTop = drag.scrollY - (clientY - drag.startY);
+      clampScrollPosition(el);
+    };
+    const beginDrag = (clientX, clientY) => {
+      dragRef.current = {
+        startX: clientX,
+        startY: clientY,
+        scrollX: el.scrollLeft,
+        scrollY: el.scrollTop
+      };
+      setPanActive(true);
+      if (!isMobile) {
+        el.classList.replace("resume-viewer-scroll-grab", "resume-viewer-scroll-grabbing");
+        el.classList.replace("cursor-grab", "cursor-grabbing");
+      }
+    };
+    const endDrag = () => {
+      touchPanRef.current = null;
+      pinchRef.current = null;
+      if (!dragRef.current) return;
+      dragRef.current = null;
+      setPanActive(false);
+      if (!isMobile) {
+        el.classList.replace("resume-viewer-scroll-grabbing", "resume-viewer-scroll-grab");
+        el.classList.replace("cursor-grabbing", "cursor-grab");
+      }
+    };
+    const captureZoomAnchor = (clientX, clientY) => {
+      const rect = el.getBoundingClientRect();
+      zoomAnchorRef.current = {
+        pointX: el.scrollLeft + clientX - rect.left,
+        pointY: el.scrollTop + clientY - rect.top,
+        viewportX: clientX - rect.left,
+        viewportY: clientY - rect.top,
+        prevScale: effectiveScaleRef.current
+      };
+    };
+    const onMouseDown = (e) => {
+      if (isMobile || e.button !== 0) return;
+      if (isInteractivePanTarget(e.target)) return;
+      beginDrag(e.clientX, e.clientY);
+      e.preventDefault();
+    };
+    const onMouseMove = (e) => {
+      if (isMobile) return;
+      moveDrag(e.clientX, e.clientY);
+    };
+    const onTouchStart = (e) => {
+      if (!isMobile) return;
+      if (e.touches.length === 2) {
+        touchPanRef.current = null;
+        dragRef.current = null;
+        const distance = getTouchDistance(e.touches);
+        if (distance <= 0) return;
+        pinchRef.current = {
+          startDistance: distance,
+          startScale: effectiveScaleRef.current
+        };
+        setIsFitToWidth(false);
+        return;
+      }
+      if (e.touches.length !== 1 || pinchRef.current) return;
+      if (isInteractivePanTarget(e.target)) return;
+      const touch = e.touches[0];
+      if (!touch) return;
+      touchPanRef.current = {
+        startX: touch.clientX,
+        startY: touch.clientY,
+        scrollX: el.scrollLeft,
+        scrollY: el.scrollTop
+      };
+    };
+    const onTouchMove = (e) => {
+      if (!isMobile) return;
+      if (pinchRef.current && e.touches.length === 2) {
+        const distance = getTouchDistance(e.touches);
+        if (distance <= 0 || pinchRef.current.startDistance <= 0) return;
+        const first = e.touches[0];
+        const second = e.touches[1];
+        if (!first || !second) return;
+        const centerX = (first.clientX + second.clientX) / 2;
+        const centerY = (first.clientY + second.clientY) / 2;
+        const nextScale = clampResumeZoom(
+          pinchRef.current.startScale * (distance / pinchRef.current.startDistance)
+        );
+        captureZoomAnchor(centerX, centerY);
+        setZoom(nextScale);
+        setIsFitToWidth(false);
+        e.preventDefault();
+        return;
+      }
+      const pendingPan = touchPanRef.current;
+      const touch = e.touches[0];
+      if (!pendingPan || !touch) return;
+      if (!dragRef.current) {
+        if (!hasExceededPanThreshold(
+          pendingPan.startX,
+          pendingPan.startY,
+          touch.clientX,
+          touch.clientY
+        )) {
+          return;
+        }
+        dragRef.current = {
+          startX: pendingPan.startX,
+          startY: pendingPan.startY,
+          scrollX: pendingPan.scrollX,
+          scrollY: pendingPan.scrollY
+        };
+        setPanActive(true);
+      }
+      moveDrag(touch.clientX, touch.clientY);
+      e.preventDefault();
+    };
+    el.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", endDrag);
+    if (isMobile) {
+      el.addEventListener("touchstart", onTouchStart, { passive: true });
+      el.addEventListener("touchmove", onTouchMove, { passive: false });
+      el.addEventListener("touchend", endDrag);
+      el.addEventListener("touchcancel", endDrag);
+    }
+    return () => {
+      el.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", endDrag);
+      delete el.dataset.panActive;
+      if (isMobile) {
+        el.removeEventListener("touchstart", onTouchStart);
+        el.removeEventListener("touchmove", onTouchMove);
+        el.removeEventListener("touchend", endDrag);
+        el.removeEventListener("touchcancel", endDrag);
+      }
+    };
+  }, [isMobile, scrollRef]);
+  const handleCopyText = useCallback(async () => {
+    const content = contentRef.current;
+    if (!content) return;
+    try {
+      await navigator.clipboard.writeText(content.innerText);
+      onCopy?.();
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [contentRef, onCopy, onError]);
+  const totalHeight = pageCount * PAGE.heightPx + Math.max(0, pageCount - 1) * PAGE.gapPx;
+  return {
+    pageCount,
+    setPageCount,
+    effectiveScale,
+    isFitToWidth,
+    totalHeight,
+    handleZoomIn,
+    handleZoomOut,
+    handleActualSize,
+    handleFitToWidth,
+    requestPrint,
+    handleCopyText,
+    minScale: MIN_SCALE,
+    maxScale: MAX_SCALE
+  };
+}
+function ResumeViewer({
+  Content,
+  components,
+  fontFamily,
+  isActive = true,
+  pdfFilename,
+  onCopy,
+  onError,
+  className,
+  toolbarStart,
+  toolbarEnd
+}) {
+  const isMobile = useIsMobile();
+  const scrollRef = useRef(null);
+  const contentRef = useRef(null);
+  const {
+    pageCount,
+    setPageCount,
+    effectiveScale,
+    isFitToWidth,
+    totalHeight,
+    handleZoomIn,
+    handleZoomOut,
+    handleActualSize,
+    handleFitToWidth,
+    requestPrint,
+    handleCopyText,
+    minScale,
+    maxScale
+  } = useResumeViewport({
+    scrollRef,
+    contentRef,
+    isMobile,
+    isActive,
+    pdfFilename,
+    onCopy,
+    onError
+  });
+  return /* @__PURE__ */ jsxs("div", { className: "resume-viewer", children: [
+    /* @__PURE__ */ jsxs("div", { className: "resume-viewer-toolbar", children: [
+      toolbarStart,
+      /* @__PURE__ */ jsxs("span", { className: "resume-viewer-pagecount", children: [
+        pageCount,
+        " page",
+        pageCount > 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "resume-viewer-controls", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Fit resume to width",
+            "aria-pressed": isFitToWidth,
+            className: clsx("resume-viewer-btn", isFitToWidth && "resume-viewer-btn-active"),
+            onClick: handleFitToWidth,
+            title: "Fit to width",
+            type: "button",
+            children: /* @__PURE__ */ jsx(Maximize2, { className: "resume-viewer-icon" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "resume-viewer-btn-group", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Zoom out",
+              className: "resume-viewer-btn",
+              disabled: !isFitToWidth && effectiveScale <= minScale,
+              onClick: handleZoomOut,
+              title: "Zoom out",
+              type: "button",
+              children: /* @__PURE__ */ jsx(Minus, { className: "resume-viewer-icon" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "resume-viewer-zoom-label",
+              onClick: handleActualSize,
+              title: "Actual size (100%)",
+              type: "button",
+              children: [
+                Math.round(effectiveScale * 100),
+                "%"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "Zoom in",
+              className: "resume-viewer-btn",
+              disabled: effectiveScale >= maxScale,
+              onClick: handleZoomIn,
+              title: "Zoom in",
+              type: "button",
+              children: /* @__PURE__ */ jsx(Plus, { className: "resume-viewer-icon" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": "Copy resume text",
+            className: "resume-viewer-btn",
+            onClick: handleCopyText,
+            title: "Copy resume text",
+            type: "button",
+            children: /* @__PURE__ */ jsx(ClipboardCopy, { className: "resume-viewer-icon" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "resume-viewer-btn resume-viewer-btn-text",
+            onClick: requestPrint,
+            type: "button",
+            children: "Save to PDF"
+          }
+        ),
+        toolbarEnd
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          "resume-viewer-scroll",
+          isMobile ? "resume-viewer-scroll-mobile" : "resume-viewer-scroll-grab",
+          className
+        ),
+        ref: scrollRef,
+        children: /* @__PURE__ */ jsx(
+          "section",
+          {
+            "aria-label": isMobile ? "Resume preview. Drag with one finger to pan, pinch to zoom." : "Resume preview. Drag to pan, Ctrl+scroll to zoom.",
+            className: "resume-viewer-stage",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "resume-viewer-page-box",
+                style: {
+                  width: PAGE.widthPx * effectiveScale,
+                  height: totalHeight * effectiveScale
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "resume-viewer-scale-root",
+                    "data-resume-scale-root": "",
+                    style: {
+                      width: PAGE.widthPx,
+                      height: totalHeight,
+                      transform: effectiveScale === 1 ? void 0 : `scale(${effectiveScale})`
+                    },
+                    children: /* @__PURE__ */ jsx(ResumeFontFamilyContext.Provider, { value: fontFamily, children: /* @__PURE__ */ jsx(PaginationReportContext.Provider, { value: setPageCount, children: /* @__PURE__ */ jsx(MDXProvider, { components: components ?? resumeMdxComponents, children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "resume-viewer-content",
+                        id: "resume-print-target",
+                        ref: contentRef,
+                        style: { zIndex: 1 },
+                        children: /* @__PURE__ */ jsx(Content, {})
+                      }
+                    ) }) }) })
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+
+export { MAX_SCALE, MIN_SCALE, ResumeViewer, SCALE_STEP, useIsMobile as useResumeIsMobile, useResumeViewport };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map