@printwithsynergy/lens-pdf 0.3.0-beta.81

package/dist/components/LensPDFDemo.js

@@ -0,0 +1,1060 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * `<LensPDFDemo>` — kitchen-sink interactive demo component.
+ *
+ * **Most consumers should not import this directly.** Use
+ * {@link LensPDF} instead — it's a one-liner production drop-in:
+ *
+ * ```tsx
+ * <LensPDF pdfUrl="/proofs/abc.pdf" workerSrc={pdfWorkerSrc} />
+ * ```
+ *
+ * `<LensPDFDemo>` is the same renderer with the marketing chrome
+ * (URL bar, drag-and-drop upload, file picker, empty state) turned
+ * on; it powers the public showcase at lenspdf.com so reviewers
+ * can drop arbitrary PDFs into the page without a host.
+ *
+ * One mount, full feature surface. Backed by
+ * `createBrowserViewerServices`, every viewer-only feature LensPDF
+ * ships works on any PDF the browser can fetch:
+ *
+ *   - PageCanvas + multi-page navigation + multi-DPI tile cache
+ *   - Color picker (RGB + CMYK + every detected spot ink + TAC)
+ *   - Densitometer (CMYK + every detected spot ink + TAC limit)
+ *   - Measure tool (mm / in / pt)
+ *   - TAC heatmap overlay (CMYK + spots)
+ *   - Per-ink CMYK + spot separations preview (inks default ON,
+ *     untick to hide that plate — same UX as Acrobat's Output
+ *     Preview)
+ *   - PDF layers (per-OCG isolated rendering, default all on)
+ *   - Annotation canvas + toolbar + thread (in-memory)
+ *
+ * Three mutually-exclusive primary canvases — Page (default),
+ * Separation preview, Layer preview — match the lint-pdf reference
+ * viewer's UX so the same muscle memory carries over.
+ *
+ * Server-only features (true ICC separations, preflight findings,
+ * server-persisted annotations, PDF report exports) self-hide because
+ * their dedicated services are intentionally `markUnwired`. Hosts
+ * that have a backend pass `services` to override.
+ *
+ * Internal organisation:
+ *
+ *   - Inline CSS-in-JS lives in `LensPDFDemo.styles.ts` (so this
+ *     file focuses on the React tree, not 270 lines of styling).
+ *   - Smaller building blocks (`PageCanvas`, `SeparationCanvas`,
+ *     `LayerCanvas`, `AnnotationCanvas`, `AnnotationToolbar`,
+ *     `AnnotationThread`, `LayerPanel`, `BoxOverlay`,
+ *     `DielineOverlay`, `TACHeatmapOverlay`, `ColorPickerTool`,
+ *     `DensitometerTool`, `MeasureTool`) each ship as their own
+ *     component file and are composed here.
+ *
+ * @public
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createBrowserViewerServices, useBrowserViewerServicesVersion, createCodexOverlayServices, extractInksFromColorWorld, extractLayersFromOcgs, PROCESS_CHANNELS, } from "../browser/index.js";
+import { darkThemeTokens } from "../plugin/services.js";
+import { DEFAULT_DPI, pageInfoFromDimensions } from "../types/index.js";
+import { isUnwired, ViewerHostContext, ViewerServicesContext } from "../host/index.js";
+import { validatePdfFile, validatePdfUrl } from "../host/pdfValidation.js";
+import { brandStyle, btnStyle, dropOverlayStyle, emptyStateStyle, errorStyle, exitFsStyle, footerStyle, ghostBtnStyle, headingStyle, layoutStyle, pageNavBtnStyle, pageNavStyle, preparingOverlayStyle, shellStyle, sidebarStyle, stageInnerStyle, stageStyle, topbarStyle, urlBarStyle, urlInputStyle, } from "./LensPDFDemo.styles.js";
+import { AnnotationCanvas } from "./AnnotationCanvas.js";
+import { useIsMobile } from "./useIsMobile.js";
+import { BoxOverlay } from "./BoxOverlay.js";
+import { ColorPickerTool } from "./ColorPickerTool.js";
+import { DensitometerTool } from "./DensitometerTool.js";
+import { DielineOverlay } from "./DielineOverlay.js";
+import { LayerCanvas } from "./LayerCanvas.js";
+import { MeasureTool } from "./MeasureTool.js";
+import { PageCanvas } from "./PageCanvas.js";
+import { SeparationCanvas } from "./SeparationCanvas.js";
+import { TACHeatmapOverlay } from "./TACHeatmapOverlay.js";
+import { pluginsForPreset } from "./presets.js";
+import { computeFeatureAvailability, pluginsForSlot, resolveShellPlugins, } from "./shellPlugins.js";
+const DEFAULT_TOOLS = [
+    "color-picker",
+    "densitometer",
+    "measure",
+    "annotate",
+    "tac-heatmap",
+    "separations",
+    "layers",
+];
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const DEFAULT_MAX_BYTES = 50 * 1024 * 1024;
+const FLATTENED_LAYER_INDEX = -1;
+// PTS_TO_PX must match PageCanvas's internal pts-to-pixel conversion
+// (which is `DEFAULT_DPI / 72`). Using a different ratio here makes
+// the canvas-area parent div size disagree with PageCanvas's rendered
+// page, so absolute-positioned overlays (TAC heatmap, separations,
+// layers, annotations, dieline) shift relative to the page content.
+const PTS_TO_PX = DEFAULT_DPI / 72;
+const DEFAULT_PAGE = pageInfoFromDimensions(1, 612, 792);
+function formatMaxSize(bytes) {
+    return `${Math.round(bytes / (1024 * 1024))} MB`;
+}
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+/**
+ * Complete interactive LensPDF demo — upload, URL paste, drag-drop,
+ * validation, sidebar controls, theming, and optional fullscreen mode.
+ * All viewer-only features (color picker, densitometer, measure,
+ * separations, TAC heatmap, layers, annotations) are wired out of the
+ * box.
+ *
+ * @public
+ */
+export function LensPDFDemo({ tokens: tokenOverrides, maxFileSize = DEFAULT_MAX_BYTES, brand, brandLogoUrl, className, tools = DEFAULT_TOOLS, initialZoom = 80, tacLimit = 300, workerSrc, services: serviceOverrides, footer, fullscreen: initialFullscreen = false, initialPdfUrl, initialPage = 1, embedded = false, items, forceInspectionPanel, spotPalette, selectedItem, onItemSelect, dieline, showBoxOverlays = false, cropToTrim = false, onPageChange: onPageChangeProp, onZoomChange: onZoomChangeProp, onError: onErrorProp, preset = "demo", plugins: customPlugins = [], codex, }) {
+    const overlayItems = useMemo(() => items ?? [], [items]);
+    // Selection: controlled when onItemSelect is supplied, uncontrolled otherwise.
+    const [internalSelected, setInternalSelected] = useState(null);
+    const effectiveSelected = onItemSelect !== undefined ? (selectedItem ?? null) : internalSelected;
+    const handleItemClick = useCallback((item) => {
+        if (onItemSelect)
+            onItemSelect(item);
+        else
+            setInternalSelected(item);
+    }, [onItemSelect]);
+    // -----------------------------------------------------------------------
+    // Tokens
+    // -----------------------------------------------------------------------
+    const tokens = useMemo(() => ({ ...darkThemeTokens, ...tokenOverrides }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(tokenOverrides)]);
+    // Brand resolution: explicit prop > tokens.logo* > built-in default.
+    // Lets a host bundle its identity (colors + logo + label) into one
+    // tokens object without dropping the existing prop API.
+    const effectiveBrand = brand ?? tokens.logoText ?? "LensPDF";
+    const effectiveLogoUrl = brandLogoUrl ?? tokens.logoUrl;
+    const effectiveLogoMaxHeight = tokens.logoMaxHeight ?? 24;
+    const effectiveLogoAlt = tokens.logoAlt;
+    // -----------------------------------------------------------------------
+    // Responsive layout
+    // -----------------------------------------------------------------------
+    // On mobile the tools sidebar collapses into a slide-in drawer
+    // anchored to the left edge; the densitometer / color-picker
+    // readouts switch to bottom sheets via `useIsMobile()` inside those
+    // components. Desktop keeps the persistent sidebar.
+    const isMobile = useIsMobile();
+    const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
+    // Open when no PDF pre-loaded so the user sees how to load one; auto-closes
+    // after a PDF is loaded so the canvas gets the space back.
+    const [mobileUrlBarOpen, setMobileUrlBarOpen] = useState(!initialPdfUrl);
+    /** Height of the marketing top bar (URL row). Drawer + dimmer start below it so they never cover the chrome or collide with the tools toggle. */
+    const headerBarRef = useRef(null);
+    const [headerChromePx, setHeaderChromePx] = useState(0);
+    useLayoutEffect(() => {
+        if (embedded) {
+            setHeaderChromePx(0);
+            return;
+        }
+        const el = headerBarRef.current;
+        if (!el || typeof ResizeObserver === "undefined") {
+            setHeaderChromePx(el?.offsetHeight ?? 0);
+            return;
+        }
+        const sync = () => setHeaderChromePx(Math.ceil(el.getBoundingClientRect().height));
+        sync();
+        const ro = new ResizeObserver(sync);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [embedded, isMobile]);
+    // -----------------------------------------------------------------------
+    // PDF state
+    // -----------------------------------------------------------------------
+    const [pdfUrl, setPdfUrl] = useState(initialPdfUrl ?? "");
+    const [draftUrl, setDraftUrl] = useState(initialPdfUrl ?? "");
+    const [error, setError] = useState(null);
+    const [dragging, setDragging] = useState(false);
+    const [fullscreen, setFullscreen] = useState(initialFullscreen);
+    const fileInputRef = useRef(null);
+    // Embedded mode treats `initialPdfUrl` as a controlled prop — when
+    // it changes, swap the loaded PDF and reset to page 1. Demo mode
+    // ignores subsequent changes (the user drives the URL via the
+    // upload bar) so behaviour stays unsurprising.
+    useEffect(() => {
+        if (!embedded)
+            return;
+        const next = initialPdfUrl ?? "";
+        setPdfUrl((prev) => (prev === next ? prev : next));
+        setDraftUrl(next);
+        if (next)
+            setCurrentPage(initialPage);
+        // initialPage intentionally read once via closure; the page-reset
+        // belongs to URL change only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [embedded, initialPdfUrl]);
+    // -----------------------------------------------------------------------
+    // Page / zoom state
+    // -----------------------------------------------------------------------
+    const [zoom, setZoom] = useState(initialZoom);
+    const [page, setPage] = useState(initialPage !== 1
+        ? { ...DEFAULT_PAGE, page_num: initialPage }
+        : DEFAULT_PAGE);
+    const [pageCount, setPageCount] = useState(1);
+    const [currentPage, setCurrentPage] = useState(initialPage);
+    // Lifecycle callbacks: fire host listeners whenever core state moves.
+    // Wrapped in effects rather than threading through every setter
+    // callsite (zoom slider / arrow keys / wheel pinch / page nav buttons /
+    // "jump to page" from annotation thread, etc.) so behaviour stays in
+    // one place.
+    useEffect(() => {
+        onPageChangeProp?.(currentPage);
+    }, [currentPage, onPageChangeProp]);
+    useEffect(() => {
+        onZoomChangeProp?.(zoom);
+    }, [zoom, onZoomChangeProp]);
+    useEffect(() => {
+        if (error)
+            onErrorProp?.(error);
+    }, [error, onErrorProp]);
+    // -----------------------------------------------------------------------
+    // Viewer mode (mutually exclusive primary canvas) + tool overlay state
+    // -----------------------------------------------------------------------
+    const [viewerMode, setViewerMode] = useState("page");
+    const [activeTool, setActiveTool] = useState("none");
+    const [showHeatmap, setShowHeatmap] = useState(false);
+    const [allLayerIndices, setAllLayerIndices] = useState([]);
+    const [enabledLayers, setEnabledLayers] = useState(new Set());
+    const [enabledChannels, setEnabledChannels] = useState(new Set(PROCESS_CHANNELS));
+    const [detectedInks, setDetectedInks] = useState([]);
+    // -----------------------------------------------------------------------
+    // Annotation state
+    // -----------------------------------------------------------------------
+    // Pen first — draws immediately. Select (second in toolbar) only
+    // grabs existing annotations; defaulting to pointer felt "broken" on
+    // an empty page.
+    const [annotationTool, setAnnotationTool] = useState("pen");
+    const [strokeColor, setStrokeColor] = useState(tokens.accent);
+    const [savingAnnotation, setSavingAnnotation] = useState(false);
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [indexedAnnotations, setIndexedAnnotations] = useState([]);
+    const [selectedAnnotationId, setSelectedAnnotationId] = useState(null);
+    // -----------------------------------------------------------------------
+    // Services
+    // -----------------------------------------------------------------------
+    const [browserServices, setBrowserServices] = useState(null);
+    const [codexOverlay, setCodexOverlay] = useState(null);
+    const [preparing, setPreparing] = useState(false);
+    const [toolsLoading, setToolsLoading] = useState(false);
+    // Reactive: re-render every time the services notify a new tile / channel
+    // / heatmap / annotation has landed. PageCanvas / SeparationCanvas /
+    // TACHeatmapOverlay re-read the synchronous URL builders and pick up the
+    // fresh blob URL. AnnotationThread reads it as `refreshKey` so the
+    // sidebar list re-fetches after AnnotationCanvas persists a drawing.
+    const servicesVersion = useBrowserViewerServicesVersion(browserServices);
+    // Subscribe to codex overlay notifications (blob URLs for Ghostscript renders).
+    const [codexVersion, setCodexVersion] = useState(0);
+    useEffect(() => {
+        if (!codexOverlay)
+            return;
+        return codexOverlay.subscribe(() => setCodexVersion((v) => v + 1));
+    }, [codexOverlay]);
+    // Build / dispose services whenever the PDF URL changes.
+    useEffect(() => {
+        if (!pdfUrl) {
+            setBrowserServices(null);
+            return;
+        }
+        const next = createBrowserViewerServices({
+            pdfUrl,
+            workerSrc,
+            tokens,
+            tacLimit,
+        });
+        setBrowserServices(next);
+        return () => next.dispose();
+    }, [pdfUrl, workerSrc, tacLimit, tokens, serviceOverrides]);
+    // Codex background extraction — fires extractStream in parallel with pdfjs.
+    // As SSE events arrive the viewer silently upgrades ink list + renders.
+    useEffect(() => {
+        if (!pdfUrl || !codex) {
+            setCodexOverlay(null);
+            return;
+        }
+        let cancelled = false;
+        let overlay = null;
+        let layerData = [];
+        (async () => {
+            const res = await fetch(pdfUrl);
+            if (!res.ok || cancelled)
+                return;
+            const bytes = new Uint8Array(await res.arrayBuffer());
+            if (cancelled)
+                return;
+            await codex.extractStream(bytes, {
+                granular: true,
+                onColorWorld: (data) => {
+                    if (cancelled)
+                        return;
+                    const inks = extractInksFromColorWorld(data);
+                    setDetectedInks(inks);
+                    setEnabledChannels(new Set(inks.map((i) => i.name)));
+                },
+                onOcgs: (data) => {
+                    if (cancelled)
+                        return;
+                    layerData = extractLayersFromOcgs(data);
+                },
+                onPhase2: (doc) => {
+                    if (cancelled)
+                        return;
+                    overlay = createCodexOverlayServices(codex, doc.pdf_sha256, tacLimit, layerData);
+                    setCodexOverlay(overlay);
+                    // Update layer indices from codex's accurate OCG list.
+                    if (layerData.length > 0) {
+                        const indices = layerData.map((l) => l.ocg_index);
+                        setAllLayerIndices(indices);
+                        setEnabledLayers(new Set(indices));
+                    }
+                },
+            });
+        })().catch((err) => {
+            // eslint-disable-next-line no-console
+            console.warn("[lens-pdf] codex overlay extraction failed", err);
+        });
+        return () => {
+            cancelled = true;
+            if (overlay) {
+                overlay.dispose();
+                overlay = null;
+            }
+            setCodexOverlay(null);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pdfUrl, codex, tacLimit]);
+    // Resolve page count + initial layer list when services come online.
+    useEffect(() => {
+        const svc = browserServices;
+        if (!svc) {
+            setPageCount(1);
+            setToolsLoading(false);
+            return;
+        }
+        let cancelled = false;
+        setToolsLoading(true);
+        (async () => {
+            try {
+                const total = await svc.getPageCount();
+                if (cancelled)
+                    return;
+                setPageCount(total);
+                const next = Math.min(total, Math.max(1, currentPage));
+                if (next !== currentPage)
+                    setCurrentPage(next);
+                const dims = await svc.getPageDimensions(next);
+                if (cancelled)
+                    return;
+                setPage(pageInfoFromDimensions(next, dims.widthPts, dims.heightPts));
+                const layers = await svc.layers.listLayers();
+                if (cancelled)
+                    return;
+                const indices = layers.length > 0
+                    ? layers.map((l) => l.ocg_index)
+                    : [FLATTENED_LAYER_INDEX];
+                setAllLayerIndices(indices);
+                // Default all detected layers ON, matching the lint-pdf
+                // viewer's "Layers mode" default.
+                setEnabledLayers(new Set(indices));
+                // Surface every ink the PDF declares so the Inks panel can
+                // toggle CMYK + spots, and the densitometer / color picker
+                // report on every plate the document carries.
+                const inks = await svc.getInks();
+                if (cancelled)
+                    return;
+                setDetectedInks(inks);
+                setEnabledChannels(new Set(inks.map((i) => i.name)));
+                setError(null);
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load PDF.");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setToolsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+        // currentPage intentionally omitted — handled below.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [browserServices]);
+    // Re-read page dimensions on page navigation.
+    useEffect(() => {
+        const svc = browserServices;
+        if (!svc)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                const dims = await svc.getPageDimensions(currentPage);
+                if (cancelled)
+                    return;
+                setPage(pageInfoFromDimensions(currentPage, dims.widthPts, dims.heightPts));
+            }
+            catch {
+                // Ignore — error already surfaced by the initial load effect.
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [browserServices, currentPage]);
+    // Pre-warm separations / heatmap / layer rasters whenever we enter a
+    // mode that needs them. Without this, <SeparationCanvas> /
+    // <LayerCanvas> latch onto the empty URL the lazy builder returns
+    // before the analysis raster lands and never retry.
+    useEffect(() => {
+        const svc = browserServices;
+        if (!svc)
+            return;
+        if (viewerMode === "page" && !showHeatmap)
+            return;
+        let cancelled = false;
+        setPreparing(true);
+        (async () => {
+            try {
+                await svc.prepare(currentPage, { tacLimit });
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to prepare page.");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setPreparing(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [browserServices, currentPage, viewerMode, showHeatmap, tacLimit]);
+    const services = useMemo(() => {
+        if (!browserServices)
+            return serviceOverrides ?? null;
+        // Base: pdfjs services with optional host overrides on top.
+        const base = serviceOverrides
+            ? {
+                pageImages: isUnwired(serviceOverrides.pageImages)
+                    ? browserServices.pageImages
+                    : serviceOverrides.pageImages,
+                layers: isUnwired(serviceOverrides.layers)
+                    ? browserServices.layers
+                    : serviceOverrides.layers,
+                separations: isUnwired(serviceOverrides.separations)
+                    ? browserServices.separations
+                    : serviceOverrides.separations,
+                tacHeatmap: isUnwired(serviceOverrides.tacHeatmap)
+                    ? browserServices.tacHeatmap
+                    : serviceOverrides.tacHeatmap,
+                colorSample: isUnwired(serviceOverrides.colorSample)
+                    ? browserServices.colorSample
+                    : serviceOverrides.colorSample,
+                densitometer: isUnwired(serviceOverrides.densitometer)
+                    ? browserServices.densitometer
+                    : serviceOverrides.densitometer,
+                annotations: isUnwired(serviceOverrides.annotations)
+                    ? browserServices.annotations
+                    : serviceOverrides.annotations,
+                reports: isUnwired(serviceOverrides.reports)
+                    ? browserServices.reports
+                    : serviceOverrides.reports,
+                telemetry: isUnwired(serviceOverrides.telemetry)
+                    ? browserServices.telemetry
+                    : serviceOverrides.telemetry,
+                i18n: isUnwired(serviceOverrides.i18n)
+                    ? browserServices.i18n
+                    : serviceOverrides.i18n,
+                tokens: serviceOverrides.tokens ?? browserServices.tokens,
+            }
+            : browserServices;
+        // Codex overlay: swap in Ghostscript-accurate renders once available.
+        // pageImages, colorSample, densitometer, annotations stay on pdfjs.
+        if (codexOverlay) {
+            return {
+                ...base,
+                separations: codexOverlay.separations,
+                tacHeatmap: codexOverlay.tacHeatmap,
+                layers: codexOverlay.layers,
+            };
+        }
+        return base;
+        // codexVersion + servicesVersion are intentionally in deps to force a
+        // re-render when lazy blob URLs land inside the overlay or pdfjs caches.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [serviceOverrides, browserServices, codexOverlay, codexVersion, servicesVersion]);
+    // -----------------------------------------------------------------------
+    // Blob URL lifecycle (uploads only)
+    // -----------------------------------------------------------------------
+    const blobUrlRef = useRef(null);
+    const revokePreviousBlob = useCallback(() => {
+        if (blobUrlRef.current) {
+            URL.revokeObjectURL(blobUrlRef.current);
+            blobUrlRef.current = null;
+        }
+    }, []);
+    useEffect(() => revokePreviousBlob, [revokePreviousBlob]);
+    // -----------------------------------------------------------------------
+    // Derived
+    // -----------------------------------------------------------------------
+    const scale = zoom / 100;
+    const canvasW = Math.round(page.width_pts * PTS_TO_PX * scale);
+    const canvasH = Math.round(page.height_pts * PTS_TO_PX * scale);
+    const hostValue = useMemo(() => ({
+        apiBase: "",
+        jobApiBase: "",
+        // readOnly = false so AnnotationCanvas persists drawings to the
+        // in-memory annotation service.
+        readOnly: false,
+        debug: false,
+        pdfUrl: pdfUrl || undefined,
+    }), [pdfUrl]);
+    // -----------------------------------------------------------------------
+    // Input handlers
+    // -----------------------------------------------------------------------
+    const loadUrl = useCallback((e) => {
+        e.preventDefault();
+        const result = validatePdfUrl(draftUrl);
+        if (!result.valid) {
+            setError(result.error ?? "Invalid URL.");
+            return;
+        }
+        setError(null);
+        revokePreviousBlob();
+        setCurrentPage(1);
+        setViewerMode("page");
+        setPdfUrl(draftUrl.trim());
+    }, [draftUrl, revokePreviousBlob]);
+    const loadFile = useCallback(async (file) => {
+        const result = await validatePdfFile(file, maxFileSize);
+        if (!result.valid) {
+            setError(result.error ?? "Invalid file.");
+            return;
+        }
+        setError(null);
+        revokePreviousBlob();
+        const blobUrl = URL.createObjectURL(file);
+        blobUrlRef.current = blobUrl;
+        setDraftUrl(file.name);
+        setCurrentPage(1);
+        setViewerMode("page");
+        setPdfUrl(blobUrl);
+    }, [revokePreviousBlob, maxFileSize]);
+    const onFileChange = useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (file)
+            loadFile(file);
+        e.target.value = "";
+    }, [loadFile]);
+    const onDragOver = useCallback((e) => {
+        e.preventDefault();
+        setDragging(true);
+    }, []);
+    const onDragLeave = useCallback((e) => {
+        e.preventDefault();
+        setDragging(false);
+    }, []);
+    const onDrop = useCallback((e) => {
+        e.preventDefault();
+        setDragging(false);
+        const file = e.dataTransfer.files?.[0];
+        if (file)
+            loadFile(file);
+    }, [loadFile]);
+    // -----------------------------------------------------------------------
+    // Annotation undo/redo plumbing
+    // -----------------------------------------------------------------------
+    const annotationCanvasRef = useRef(null);
+    const annotationWrapRef = useRef(null);
+    useEffect(() => {
+        if (activeTool !== "annotate")
+            return;
+        const wrap = annotationWrapRef.current;
+        if (!wrap)
+            return;
+        annotationCanvasRef.current =
+            wrap.querySelector("canvas") ?? null;
+    }, [activeTool, currentPage, canvasW, canvasH]);
+    useEffect(() => {
+        setIndexedAnnotations([]);
+        setSelectedAnnotationId(null);
+    }, [currentPage]);
+    const triggerUndo = useCallback(() => {
+        const fn = annotationCanvasRef.current?.__annotationUndo;
+        fn?.();
+    }, []);
+    const triggerRedo = useCallback(() => {
+        const fn = annotationCanvasRef.current?.__annotationRedo;
+        fn?.();
+    }, []);
+    const handleAnnotationHistoryChange = useCallback((canU, canR) => {
+        setCanUndo(canU);
+        setCanRedo(canR);
+    }, []);
+    // -----------------------------------------------------------------------
+    // Plugin availability + slot resolution
+    // -----------------------------------------------------------------------
+    const availability = useMemo(() => computeFeatureAvailability({
+        tools,
+        services,
+        detectedInkCount: detectedInks.length,
+        layerCount: allLayerIndices.length,
+        isUnwired,
+    }), [tools, services, detectedInks.length, allLayerIndices.length]);
+    const shellPluginContext = useMemo(() => ({
+        tokens,
+        isMobile,
+        pdfUrl,
+        servicesVersion,
+        currentPage,
+        setCurrentPage,
+        viewerMode,
+        setViewerMode,
+        activeTool,
+        setActiveTool,
+        showHeatmap,
+        setShowHeatmap,
+        enabledChannels,
+        setEnabledChannels,
+        detectedInks: detectedInks.map((ink) => ({
+            name: ink.name,
+            type: ink.type,
+            altRgb: ink.altRgb,
+        })),
+        spotPalette,
+        items,
+        forceInspectionPanel,
+        selectedItem,
+        onItemSelect,
+        enabledLayers,
+        setEnabledLayers,
+        allLayerIndices,
+        annotationTool,
+        setAnnotationTool,
+        strokeColor,
+        setStrokeColor,
+        savingAnnotation,
+        canUndo,
+        canRedo,
+        triggerUndo,
+        triggerRedo,
+        indexedAnnotations,
+        selectedAnnotationId,
+        setSelectedAnnotationId,
+        availability,
+    }), [
+        tokens,
+        isMobile,
+        pdfUrl,
+        servicesVersion,
+        currentPage,
+        viewerMode,
+        activeTool,
+        showHeatmap,
+        enabledChannels,
+        detectedInks,
+        enabledLayers,
+        allLayerIndices,
+        annotationTool,
+        strokeColor,
+        savingAnnotation,
+        canUndo,
+        canRedo,
+        triggerUndo,
+        triggerRedo,
+        indexedAnnotations,
+        selectedAnnotationId,
+        availability,
+    ]);
+    const resolvedPlugins = useMemo(() => resolveShellPlugins([...pluginsForPreset(preset), ...customPlugins]), [preset, customPlugins]);
+    const leftPanelPlugins = useMemo(() => pluginsForSlot(resolvedPlugins, "panel.left", shellPluginContext), [resolvedPlugins, shellPluginContext]);
+    const toolbarOverlayPlugins = useMemo(() => pluginsForSlot(resolvedPlugins, "overlay.toolbar", shellPluginContext), [resolvedPlugins, shellPluginContext]);
+    const showColorPicker = availability.colorPicker;
+    const showDensitometer = availability.densitometer;
+    const showMeasure = availability.measure;
+    const showAnnotate = availability.annotate;
+    const showSeparations = availability.separations;
+    const showLayersControl = availability.layers;
+    const hasAnyTool = leftPanelPlugins.length > 0;
+    useEffect(() => {
+        if (viewerMode === "separation" && !availability.separations)
+            setViewerMode("page");
+        if (viewerMode === "layer" && !availability.layers)
+            setViewerMode("page");
+    }, [viewerMode, availability.separations, availability.layers]);
+    useEffect(() => {
+        if (activeTool === "color-picker" && !availability.colorPicker)
+            setActiveTool("none");
+        if (activeTool === "densitometer" && !availability.densitometer)
+            setActiveTool("none");
+        if (activeTool === "measure" && !availability.measure)
+            setActiveTool("none");
+        if (activeTool === "annotate" && !availability.annotate)
+            setActiveTool("none");
+    }, [
+        activeTool,
+        availability.colorPicker,
+        availability.densitometer,
+        availability.measure,
+        availability.annotate,
+    ]);
+    useEffect(() => {
+        if (!availability.tacHeatmap && showHeatmap)
+            setShowHeatmap(false);
+    }, [availability.tacHeatmap, showHeatmap]);
+    // On mobile, dismiss the tools drawer automatically when the user
+    // activates an interactive tool so the canvas is immediately visible.
+    useEffect(() => {
+        if (isMobile && activeTool !== "none")
+            setMobileSidebarOpen(false);
+    }, [activeTool, isMobile]);
+    // Collapse the URL bar accordion when a PDF finishes loading on mobile.
+    useEffect(() => {
+        if (isMobile && pdfUrl)
+            setMobileUrlBarOpen(false);
+    }, [pdfUrl, isMobile]);
+    // Match the document background to the viewer's dark bg so overscroll
+    // bounce (iOS rubber-band, macOS elastic scroll) shows the same colour
+    // as the viewer chrome instead of the host page's white body background.
+    // Only applies in standalone (non-embedded) mode; embedded consumers own
+    // their own page background.
+    useEffect(() => {
+        if (embedded || typeof document === "undefined")
+            return;
+        const html = document.documentElement;
+        const body = document.body;
+        const prevHtmlBg = html.style.backgroundColor;
+        const prevBodyBg = body.style.backgroundColor;
+        const prevHtmlOverscroll = html.style.overscrollBehavior;
+        const prevBodyOverscroll = body.style.overscrollBehavior;
+        html.style.backgroundColor = tokens.bg;
+        body.style.backgroundColor = tokens.bg;
+        html.style.overscrollBehavior = "none";
+        body.style.overscrollBehavior = "none";
+        return () => {
+            html.style.backgroundColor = prevHtmlBg;
+            body.style.backgroundColor = prevBodyBg;
+            html.style.overscrollBehavior = prevHtmlOverscroll;
+            body.style.overscrollBehavior = prevBodyOverscroll;
+        };
+    }, [embedded, tokens.bg]);
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    const placeholderServices = services;
+    return (_jsx(ViewerHostContext.Provider, { value: hostValue, children: placeholderServices ? (_jsx(ViewerServicesContext.Provider, { value: placeholderServices, children: renderShell() })) : (renderShell()) }));
+    function renderShell() {
+        return (_jsxs("div", { className: className, style: shellStyle(tokens, fullscreen), onDragOver: embedded ? undefined : onDragOver, onDragLeave: embedded ? undefined : onDragLeave, onDrop: embedded ? undefined : onDrop, children: [fullscreen && (_jsx("button", { type: "button", style: exitFsStyle, onClick: () => setFullscreen(false), children: "Exit fullscreen" })), !embedded && dragging && (_jsx("div", { style: dropOverlayStyle, children: "Drop your PDF here" })), !embedded && (_jsxs("header", { ref: headerBarRef, style: {
+                        ...topbarStyle,
+                        position: "relative",
+                        zIndex: 100,
+                        background: tokens.bg,
+                        borderBottom: `1px solid ${tokens.border}`,
+                        ...(isMobile
+                            ? {
+                                flexDirection: "column",
+                                alignItems: "stretch",
+                                gap: 12,
+                                padding: "12px 14px",
+                            }
+                            : {}),
+                    }, children: [isMobile ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 10,
+                                        width: "100%",
+                                        minWidth: 0,
+                                    }, children: [hasAnyTool && (_jsx("button", { type: "button", "aria-label": "Open tools panel", "aria-expanded": mobileSidebarOpen, onClick: () => setMobileSidebarOpen((v) => !v), style: {
+                                                flexShrink: 0,
+                                                width: 44,
+                                                height: 44,
+                                                borderRadius: 8,
+                                                border: `1px solid ${tokens.border}`,
+                                                background: tokens.bg,
+                                                color: tokens.fg,
+                                                cursor: "pointer",
+                                                fontSize: 22,
+                                                lineHeight: 1,
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                boxShadow: "0 2px 8px rgba(0,0,0,0.25)",
+                                            }, children: "\u2630" })), _jsxs("div", { style: {
+                                                ...brandStyle,
+                                                flex: 1,
+                                                minWidth: 0,
+                                                overflow: "hidden",
+                                            }, children: [effectiveLogoUrl && (_jsx("img", { src: effectiveLogoUrl, alt: effectiveLogoAlt ?? "", "aria-hidden": effectiveLogoAlt ? undefined : "true", style: {
+                                                        height: effectiveLogoMaxHeight,
+                                                        width: "auto",
+                                                        maxHeight: effectiveLogoMaxHeight,
+                                                        flexShrink: 0,
+                                                    } })), _jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: effectiveBrand }), _jsx("span", { style: { opacity: 0.4 }, children: "\u00B7" }), _jsx("span", { style: {
+                                                        opacity: 0.6,
+                                                        fontWeight: 400,
+                                                        fontSize: 13,
+                                                        flexShrink: 0,
+                                                    }, children: "demo" })] }), _jsx("button", { type: "button", "aria-label": mobileUrlBarOpen ? "Close file controls" : pdfUrl ? "Change file" : "Open a PDF", "aria-expanded": mobileUrlBarOpen, onClick: () => setMobileUrlBarOpen((v) => !v), style: {
+                                                flexShrink: 0,
+                                                width: 36,
+                                                height: 36,
+                                                borderRadius: 8,
+                                                border: `1px solid ${(pdfUrl || preparing) ? tokens.accent : tokens.border}`,
+                                                background: (pdfUrl || preparing) ? `${tokens.accent}22` : "transparent",
+                                                color: (pdfUrl || preparing) ? tokens.accent : tokens.fg,
+                                                cursor: "pointer",
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                opacity: mobileUrlBarOpen ? 0.6 : 1,
+                                                transition: "opacity 0.15s",
+                                            }, children: preparing ? (
+                                            // Spinner
+                                            _jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: [_jsx("circle", { cx: 8, cy: 8, r: 6, stroke: "currentColor", strokeWidth: 2, strokeOpacity: 0.25 }), _jsx("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", style: { transformOrigin: "8px 8px", animation: "lens-pdf-tools-spin 0.7s linear infinite" } })] })) : pdfUrl ? (
+                                            // Filled document — file is loaded
+                                            _jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": true, children: _jsx("path", { d: "M4 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V6.414A1 1 0 0 0 12.707 6L9 2.293A1 1 0 0 0 8.586 2H4zm4 .5V6a1 1 0 0 0 1 1h3.5L8 2.5z" }) })) : (
+                                            // Outline folder — nothing loaded yet
+                                            _jsx("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": true, children: _jsx("path", { d: "M2 5a1 1 0 0 1 1-1h3.586a1 1 0 0 1 .707.293L8.414 5.4A1 1 0 0 0 9.121 5.7H13a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z", strokeLinejoin: "round" }) })) })] }), _jsx("div", { style: {
+                                        overflow: "hidden",
+                                        maxHeight: mobileUrlBarOpen ? 300 : 0,
+                                        transition: "max-height 0.22s ease",
+                                    }, children: _jsxs("form", { onSubmit: loadUrl, style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: 10,
+                                            width: "100%",
+                                            paddingTop: 2,
+                                            paddingBottom: 2,
+                                        }, children: [_jsx("input", { type: "text", inputMode: "url", autoCapitalize: "off", autoCorrect: "off", spellCheck: false, enterKeyHint: "go", placeholder: "Paste PDF URL (https://\u2026)", value: draftUrl, onChange: (e) => setDraftUrl(e.target.value), style: {
+                                                    ...urlInputStyle(tokens),
+                                                    width: "100%",
+                                                    boxSizing: "border-box",
+                                                    minHeight: 44,
+                                                    fontSize: 16,
+                                                } }), _jsxs("div", { style: {
+                                                    display: "flex",
+                                                    gap: 10,
+                                                    width: "100%",
+                                                }, children: [_jsx("button", { type: "submit", disabled: !/^https?:\/\//i.test(draftUrl.trim()), style: {
+                                                            ...btnStyle(tokens, !/^https?:\/\//i.test(draftUrl.trim())),
+                                                            flex: 1,
+                                                            minHeight: 44,
+                                                            padding: "12px 14px",
+                                                            fontSize: 15,
+                                                        }, children: "Load" }), _jsx("button", { type: "button", style: {
+                                                            ...ghostBtnStyle(tokens),
+                                                            flex: 1,
+                                                            minHeight: 44,
+                                                            padding: "12px 14px",
+                                                            fontSize: 15,
+                                                        }, onClick: () => fileInputRef.current?.click(), children: "Upload PDF" })] })] }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: brandStyle, children: [effectiveLogoUrl && (_jsx("img", { src: effectiveLogoUrl, alt: effectiveLogoAlt ?? "", "aria-hidden": effectiveLogoAlt ? undefined : "true", style: {
+                                                height: effectiveLogoMaxHeight,
+                                                width: "auto",
+                                                maxHeight: effectiveLogoMaxHeight,
+                                            } })), _jsx("span", { children: effectiveBrand }), _jsx("span", { style: { opacity: 0.4 }, children: "\u00B7" }), _jsx("span", { style: { opacity: 0.6, fontWeight: 400, fontSize: 13 }, children: "demo" })] }), _jsxs("form", { style: urlBarStyle, onSubmit: loadUrl, children: [_jsx("input", { type: "text", placeholder: "Paste any PDF URL the browser can fetch\u2026", value: draftUrl, onChange: (e) => setDraftUrl(e.target.value), style: urlInputStyle(tokens) }), _jsx("button", { type: "submit", disabled: !/^https?:\/\//i.test(draftUrl.trim()), style: btnStyle(tokens, !/^https?:\/\//i.test(draftUrl.trim())), children: "Load" })] }), _jsx("button", { type: "button", style: ghostBtnStyle(tokens), onClick: () => fileInputRef.current?.click(), children: "Upload PDF" })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: "application/pdf,.pdf", style: { display: "none" }, onChange: onFileChange })] })), error && (_jsxs("div", { style: errorStyle(), children: [_jsx("span", { children: error }), _jsx("button", { type: "button", onClick: () => setError(null), "aria-label": "Dismiss", style: {
+                                background: "transparent",
+                                border: "none",
+                                color: "inherit",
+                                cursor: "pointer",
+                                fontSize: 18,
+                            }, children: "\u00D7" })] })), _jsxs("div", { style: { ...layoutStyle, position: "relative" }, children: [embedded && hasAnyTool && isMobile && !mobileSidebarOpen && (_jsx("button", { type: "button", "aria-label": "Open tools panel", "aria-expanded": mobileSidebarOpen, onClick: () => setMobileSidebarOpen((v) => !v), style: {
+                                position: "absolute",
+                                top: 12,
+                                right: 12,
+                                left: "auto",
+                                zIndex: 60,
+                                width: 44,
+                                height: 44,
+                                borderRadius: 8,
+                                border: `1px solid ${tokens.border}`,
+                                background: tokens.bg,
+                                color: tokens.fg,
+                                cursor: "pointer",
+                                fontSize: 22,
+                                lineHeight: 1,
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.35)",
+                            }, children: "\u2630" })), hasAnyTool && isMobile && mobileSidebarOpen && (_jsx("div", { onClick: () => setMobileSidebarOpen(false), style: {
+                                position: "fixed",
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                top: 0,
+                                zIndex: 140,
+                                background: "rgba(0, 0, 0, 0.72)",
+                            } })), hasAnyTool && (_jsxs("aside", { style: isMobile
+                                ? {
+                                    ...sidebarStyle(tokens),
+                                    position: "fixed",
+                                    top: 0,
+                                    left: 0,
+                                    bottom: 0,
+                                    width: "min(85vw, 320px)",
+                                    maxWidth: "100%",
+                                    zIndex: 141,
+                                    transform: mobileSidebarOpen
+                                        ? "translateX(0)"
+                                        : "translateX(-100%)",
+                                    transition: "transform 0.22s ease-out",
+                                    borderRight: `1px solid ${tokens.border}`,
+                                    boxShadow: mobileSidebarOpen
+                                        ? "8px 0 24px rgba(0, 0, 0, 0.45)"
+                                        : "none",
+                                    WebkitOverflowScrolling: "touch",
+                                    overscrollBehavior: "contain",
+                                    paddingTop: "max(12px, env(safe-area-inset-top))",
+                                    paddingBottom: "max(16px, env(safe-area-inset-bottom))",
+                                }
+                                : sidebarStyle(tokens), children: [isMobile && (_jsxs("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "space-between",
+                                        gap: 8,
+                                        marginBottom: 8,
+                                        position: "sticky",
+                                        top: 0,
+                                        zIndex: 2,
+                                        paddingTop: 2,
+                                        paddingBottom: 8,
+                                        background: tokens.bg,
+                                        borderBottom: `1px solid ${tokens.border}`,
+                                    }, children: [_jsx("h2", { style: { ...headingStyle, margin: 0 }, children: "Tools" }), _jsx("button", { type: "button", onClick: () => setMobileSidebarOpen(false), "aria-label": "Close tools panel", style: {
+                                                width: 36,
+                                                height: 36,
+                                                borderRadius: 8,
+                                                border: `1px solid ${tokens.border}`,
+                                                background: tokens.bg,
+                                                color: tokens.fg,
+                                                cursor: "pointer",
+                                                fontSize: 20,
+                                                lineHeight: 1,
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                flexShrink: 0,
+                                            }, children: "\u00D7" })] })), _jsxs("div", { style: pageNavStyle, children: [_jsx("span", { style: { width: 44 }, children: "Zoom" }), _jsx("input", { type: "range", min: "25", max: "400", step: "5", value: zoom, onChange: (e) => setZoom(Number(e.target.value)), style: { flex: 1 } }), _jsxs("span", { style: {
+                                                minWidth: 44,
+                                                textAlign: "right",
+                                                fontVariantNumeric: "tabular-nums",
+                                            }, children: [zoom, "%"] })] }), pageCount > 1 && (_jsxs("div", { style: pageNavStyle, children: [_jsx("button", { type: "button", style: pageNavBtnStyle(tokens, currentPage <= 1), onClick: () => setCurrentPage((p) => Math.max(1, p - 1)), disabled: currentPage <= 1, "aria-label": "Previous page", children: "\u2039" }), _jsxs("span", { style: {
+                                                flex: 1,
+                                                textAlign: "center",
+                                                fontSize: 12,
+                                                fontVariantNumeric: "tabular-nums",
+                                                opacity: 0.8,
+                                            }, children: ["Page ", currentPage, " / ", pageCount] }), _jsx("button", { type: "button", style: pageNavBtnStyle(tokens, currentPage >= pageCount), onClick: () => setCurrentPage((p) => Math.min(pageCount, p + 1)), disabled: currentPage >= pageCount, "aria-label": "Next page", children: "\u203A" })] })), toolsLoading ? (_jsxs("div", { style: {
+                                        display: "flex",
+                                        alignItems: "center",
+                                        gap: 8,
+                                        padding: "8px 0",
+                                        opacity: 0.8,
+                                        fontSize: 12,
+                                    }, children: [_jsx("span", { "aria-hidden": true, style: {
+                                                width: 14,
+                                                height: 14,
+                                                borderRadius: "50%",
+                                                border: "2px solid rgba(255,255,255,0.2)",
+                                                borderTopColor: "rgba(255,255,255,0.75)",
+                                                animation: "lens-pdf-tools-spin 0.85s linear infinite",
+                                            } }), _jsx("span", { children: "Loading tools\u2026" }), _jsx("style", { children: `@keyframes lens-pdf-tools-spin { to { transform: rotate(360deg); } }` })] })) : (leftPanelPlugins.map((plugin) => (_jsx("div", { children: plugin.render(shellPluginContext) }, plugin.id))))] })), _jsx("section", { style: {
+                                ...stageStyle,
+                                ...(isMobile
+                                    ? {
+                                        padding: "12px 8px",
+                                        paddingBottom: "max(12px, env(safe-area-inset-bottom))",
+                                        gap: 8,
+                                    }
+                                    : {}),
+                            }, children: !pdfUrl && embedded ? (_jsx("div", { style: emptyStateStyle, children: _jsx("p", { style: { margin: 0, opacity: 0.6 }, children: "Loading\u2026" }) })) : !pdfUrl ? (_jsxs("div", { style: emptyStateStyle, children: [effectiveLogoUrl && (_jsx("img", { src: effectiveLogoUrl, alt: effectiveLogoAlt ?? "", "aria-hidden": effectiveLogoAlt ? undefined : "true", style: { height: 64, width: "auto", maxHeight: 64, opacity: 0.85 } })), _jsxs("h2", { style: { margin: 0 }, children: [effectiveBrand, " demo viewer"] }), _jsx("p", { style: { margin: 0, maxWidth: 380 }, children: "Paste a PDF URL above or drag-and-drop a file anywhere on this page to start inspecting." }), _jsx("button", { type: "button", style: {
+                                            ...btnStyle(tokens),
+                                            padding: "10px 24px",
+                                            fontSize: 15,
+                                        }, onClick: () => fileInputRef.current?.click(), children: "Choose a file" }), _jsxs("p", { style: {
+                                            fontSize: 11,
+                                            opacity: 0.55,
+                                            maxWidth: 460,
+                                            lineHeight: 1.55,
+                                            margin: 0,
+                                        }, children: ["LensPDF supports ", _jsx("strong", { children: "full CMYK + spot inks" }), " ", "with no approximation when a backend (Ghostscript / MuPDF + ICC profiles) is wired through the", " ", _jsx("code", { children: "services" }), " prop \u2014 the densitometer, TAC heatmap, and color picker read true plate values straight from the host. The RGB-derived path is only used as the fallback when no backend data is supplied, which is the mode this demo runs in. Annotations live in this tab only and are discarded on reload. Max upload ", formatMaxSize(maxFileSize), "."] })] })) : (_jsxs("div", { style: stageInnerStyle, children: [toolbarOverlayPlugins.length > 0 && (
+                                    // Sticky at the top of the stage scroll container on both
+                                    // mobile and desktop — the toolbar stays visible while the
+                                    // canvas scrolls, but never escapes upward into the host
+                                    // page's chrome (the `fixed` variant covered marketing-site
+                                    // nav when the viewer was mounted in `embedded` mode).
+                                    _jsx("div", { style: {
+                                            position: "sticky",
+                                            top: 0,
+                                            zIndex: 30,
+                                            alignSelf: "center",
+                                            ...(isMobile
+                                                ? {
+                                                    paddingTop: 8,
+                                                    maxWidth: "100%",
+                                                }
+                                                : {}),
+                                        }, children: toolbarOverlayPlugins.map((plugin) => (_jsx("div", { children: plugin.render(shellPluginContext) }, plugin.id))) })), _jsxs("div", { style: {
+                                            width: canvasW,
+                                            height: canvasH,
+                                            position: "relative",
+                                            background: "#fff",
+                                            boxShadow: "0 24px 60px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.3)",
+                                            borderRadius: 4,
+                                        }, children: [viewerMode === "separation" && services ? (_jsx(SeparationCanvas, { jobId: "lens-pdf-demo", pageNum: page.page_num, enabledChannels: enabledChannels, allChannels: detectedInks.length > 0
+                                                    ? detectedInks.map((i) => i.name)
+                                                    : [...PROCESS_CHANNELS], width: canvasW, height: canvasH })) : viewerMode === "layer" &&
+                                                services &&
+                                                allLayerIndices.length > 0 &&
+                                                allLayerIndices.every((layerIndex) => layerIndex !== FLATTENED_LAYER_INDEX) ? (_jsx(LayerCanvas, { jobId: "lens-pdf-demo", pageNum: page.page_num, enabledLayers: enabledLayers, allLayers: allLayerIndices, width: canvasW, height: canvasH })) : (_jsx(PageCanvas, { jobId: "lens-pdf-demo", page: page, zoom: zoom, items: overlayItems, selectedItem: effectiveSelected, onItemClick: handleItemClick, cropToTrim: cropToTrim })), viewerMode === "page" && showBoxOverlays && (_jsx(BoxOverlay, { page: page, canvasWidth: canvasW, canvasHeight: canvasH, dieline: dieline ?? null })), viewerMode === "page" && dieline && !showBoxOverlays && (_jsx(DielineOverlay, { page: page, canvasWidth: canvasW, canvasHeight: canvasH, dieline: dieline })), services && showHeatmap && (_jsx(TACHeatmapOverlay, { jobId: "lens-pdf-demo", pageNum: page.page_num, width: canvasW, height: canvasH, pageWidthPts: page.width_pts, pageHeightPts: page.height_pts, tacLimit: tacLimit })), services && showAnnotate && (_jsx("div", { ref: annotationWrapRef, style: {
+                                                    position: "absolute",
+                                                    inset: 0,
+                                                    pointerEvents: activeTool === "annotate" ? "auto" : "none",
+                                                }, children: _jsx(AnnotationCanvas, { jobId: "lens-pdf-demo", pageNum: page.page_num, width: canvasW, height: canvasH, activeTool: annotationTool, strokeColor: strokeColor, onSavingChange: setSavingAnnotation, onHistoryChange: handleAnnotationHistoryChange, onIndexedAnnotationsChange: setIndexedAnnotations, selectedAnnotationNumber: selectedAnnotationId?.startsWith("obj-")
+                                                        ? Number(selectedAnnotationId.slice(4))
+                                                        : null, onSelectedAnnotationNumberChange: (annotationNumber) => {
+                                                        setSelectedAnnotationId(annotationNumber != null ? `obj-${annotationNumber}` : null);
+                                                    } }) })), showAnnotate &&
+                                                indexedAnnotations.map((row) => {
+                                                    const id = `obj-${row.number}`;
+                                                    const selected = selectedAnnotationId === id;
+                                                    return (_jsx("button", { type: "button", onClick: () => {
+                                                            setSelectedAnnotationId(id);
+                                                            setActiveTool("annotate");
+                                                        }, title: `Annotation #${row.number}`, style: {
+                                                            position: "absolute",
+                                                            left: Math.max(10, row.centerX - 12),
+                                                            top: Math.max(10, row.centerY - 12),
+                                                            width: 24,
+                                                            height: 24,
+                                                            borderRadius: "50%",
+                                                            border: selected
+                                                                ? "2px solid rgba(251,191,36,0.98)"
+                                                                : "1px solid rgba(255,255,255,0.82)",
+                                                            background: selected
+                                                                ? "rgba(251,191,36,0.95)"
+                                                                : "rgba(15,23,42,0.9)",
+                                                            color: selected ? "#111827" : "#f8fafc",
+                                                            fontSize: 11,
+                                                            fontWeight: 700,
+                                                            lineHeight: "24px",
+                                                            textAlign: "center",
+                                                            cursor: "pointer",
+                                                            boxShadow: "0 1px 4px rgba(0,0,0,0.45)",
+                                                            zIndex: 26,
+                                                            padding: 0,
+                                                        }, children: row.number }, id));
+                                                }), activeTool === "color-picker" && (_jsx(ColorPickerTool, { jobId: "lens-pdf-demo", pageNum: page.page_num, pageWidthPts: page.width_pts, pageHeightPts: page.height_pts, canvasWidth: canvasW, canvasHeight: canvasH })), activeTool === "densitometer" && (_jsx(DensitometerTool, { jobId: "lens-pdf-demo", pageNum: page.page_num, pageWidthPts: page.width_pts, pageHeightPts: page.height_pts, canvasWidth: canvasW, canvasHeight: canvasH, tacLimit: tacLimit })), activeTool === "measure" && (_jsx(MeasureTool, { pageWidthPts: page.width_pts, pageHeightPts: page.height_pts, canvasWidth: canvasW, canvasHeight: canvasH })), preparing &&
+                                                (viewerMode !== "page" || showHeatmap) && (_jsx("div", { style: preparingOverlayStyle, children: "Rasterising page & computing CMYK\u2026" }))] })] })) })] }), _jsxs("footer", { style: footerStyle(tokens), children: [_jsxs("span", { children: [effectiveBrand, " \u00B7 AGPL-3.0"] }), footer] })] }));
+    }
+}
+//# sourceMappingURL=LensPDFDemo.js.map