indas-ui 0.0.1 → 0.1.1

package/dist/components/modals/ImageModal.js

@@ -0,0 +1,551 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/index.js';
+import { Button } from '../ui/index.js';
+import { Download, Printer, Copy, Maximize2, FileImage, File, X, Minus, Plus, Maximize } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext.js';
+// ─── Zoom constants ───
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 5.0;
+const ZOOM_STEP = 0.25;
+// Physical zoom presets are defined inside the component (PHYSICAL_PRESETS)
+// since they depend on container width for scale conversion
+export function ImageModal({ isOpen: controlledIsOpen, onClose: controlledOnClose, title, children, preview, previewClassName = '', previewContainerClassName = '', details, onPreviewClick, isPdfMode = false, pdfUrl, onDownloadPdf, cleanMode = false, enableZoom = false, viewBoxWidthMM, viewBoxHeightMM, exportFilename, extraExportButtons, extraHeaderButtons }) {
+    const { t } = useLanguage();
+    const contentRef = useRef(null);
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    // Use controlled state if provided, otherwise use internal state
+    const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen;
+    const setIsOpen = controlledOnClose ? (open) => !open && controlledOnClose() : setInternalIsOpen;
+    // Determine if zoom should be active
+    const isZoomMode = enableZoom && !isPdfMode && !cleanMode;
+    // ─── Adaptive modal width based on SVG aspect ratio ───
+    const [computedModalWidth, setComputedModalWidth] = useState(undefined);
+    useEffect(() => {
+        if (!isZoomMode || !viewBoxWidthMM || !viewBoxHeightMM || !isOpen) {
+            setComputedModalWidth(undefined);
+            return;
+        }
+        const compute = () => {
+            const viewportH = window.innerHeight;
+            const viewportW = window.innerWidth;
+            const modalH = viewportH * 0.95;
+            // Header ~44px + Details ~36px + Footer ~52px + padding ~20px = ~152px chrome
+            const chromeH = 152;
+            const contentH = modalH - chromeH;
+            const aspect = viewBoxWidthMM / viewBoxHeightMM;
+            const idealContentW = contentH * aspect;
+            // Add padding (48px sides) and clamp between 60vw and 92vw
+            const minW = viewportW * 0.6;
+            const maxW = viewportW * 0.92;
+            const idealModalW = idealContentW + 48;
+            setComputedModalWidth(Math.max(minW, Math.min(maxW, idealModalW)));
+        };
+        compute();
+        window.addEventListener('resize', compute);
+        return () => window.removeEventListener('resize', compute);
+    }, [isZoomMode, viewBoxWidthMM, viewBoxHeightMM, isOpen]);
+    // ─── Zoom state ───
+    const [zoomScale, setZoomScale] = useState(1);
+    const [showZoomPresets, setShowZoomPresets] = useState(false);
+    const scrollContainerRef = useRef(null);
+    const zoomPresetsRef = useRef(null);
+    const zoomEnabled = isZoomMode && isOpen;
+    const clampScale = useCallback((s) => Math.min(MAX_SCALE, Math.max(MIN_SCALE, s)), []);
+    // Apply zoom: center the scroll position after scale change
+    const applyZoom = useCallback((newScale) => {
+        const clamped = clampScale(newScale);
+        const container = scrollContainerRef.current;
+        if (container) {
+            const prevScale = zoomScale;
+            // Remember the center point as a ratio of scroll
+            const scrollCenterX = (container.scrollLeft + container.clientWidth / 2) / (container.scrollWidth || 1);
+            const scrollCenterY = (container.scrollTop + container.clientHeight / 2) / (container.scrollHeight || 1);
+            setZoomScale(clamped);
+            // After state update, re-center scroll
+            requestAnimationFrame(() => {
+                const newScrollWidth = container.scrollWidth;
+                const newScrollHeight = container.scrollHeight;
+                container.scrollLeft = scrollCenterX * newScrollWidth - container.clientWidth / 2;
+                container.scrollTop = scrollCenterY * newScrollHeight - container.clientHeight / 2;
+            });
+        }
+        else {
+            setZoomScale(clamped);
+        }
+    }, [clampScale, zoomScale]);
+    // Zoom actions
+    const zoomIn = useCallback(() => applyZoom(zoomScale + ZOOM_STEP), [zoomScale, applyZoom]);
+    const zoomOut = useCallback(() => applyZoom(zoomScale - ZOOM_STEP), [zoomScale, applyZoom]);
+    const fitToPage = useCallback(() => {
+        setZoomScale(1);
+        const container = scrollContainerRef.current;
+        if (container) {
+            requestAnimationFrame(() => {
+                container.scrollLeft = 0;
+                container.scrollTop = 0;
+            });
+        }
+    }, []);
+    const setZoomLevel = useCallback((newScale) => applyZoom(newScale), [applyZoom]);
+    // Ctrl+Wheel = zoom, plain wheel = scroll (native)
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container || !zoomEnabled)
+            return;
+        const handleWheel = (e) => {
+            if (e.ctrlKey || e.metaKey) {
+                // Ctrl+scroll = zoom
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+                const newScale = clampScale(zoomScale + delta);
+                // Zoom toward cursor
+                const rect = container.getBoundingClientRect();
+                const cursorXRatio = (e.clientX - rect.left + container.scrollLeft) / (container.scrollWidth || 1);
+                const cursorYRatio = (e.clientY - rect.top + container.scrollTop) / (container.scrollHeight || 1);
+                setZoomScale(newScale);
+                requestAnimationFrame(() => {
+                    container.scrollLeft = cursorXRatio * container.scrollWidth - (e.clientX - rect.left);
+                    container.scrollTop = cursorYRatio * container.scrollHeight - (e.clientY - rect.top);
+                });
+            }
+            // else: plain scroll = native scroll (don't prevent default)
+        };
+        container.addEventListener('wheel', handleWheel, { passive: false });
+        return () => container.removeEventListener('wheel', handleWheel);
+    }, [zoomEnabled, zoomScale, clampScale]);
+    // Touch pinch-to-zoom
+    const pinchStartRef = useRef({ distance: 0, scale: 1 });
+    const getTouchDistance = (touches) => {
+        if (touches.length < 2)
+            return 0;
+        const dx = touches[0].clientX - touches[1].clientX;
+        const dy = touches[0].clientY - touches[1].clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    };
+    useEffect(() => {
+        const container = scrollContainerRef.current;
+        if (!container || !zoomEnabled)
+            return;
+        const handleTouchStart = (e) => {
+            if (e.touches.length === 2) {
+                e.preventDefault();
+                pinchStartRef.current = { distance: getTouchDistance(e.touches), scale: zoomScale };
+            }
+        };
+        const handleTouchMove = (e) => {
+            if (e.touches.length === 2) {
+                e.preventDefault();
+                const distance = getTouchDistance(e.touches);
+                const pinchRatio = distance / pinchStartRef.current.distance;
+                const newScale = clampScale(pinchStartRef.current.scale * pinchRatio);
+                setZoomScale(newScale);
+            }
+        };
+        container.addEventListener('touchstart', handleTouchStart, { passive: false });
+        container.addEventListener('touchmove', handleTouchMove, { passive: false });
+        return () => {
+            container.removeEventListener('touchstart', handleTouchStart);
+            container.removeEventListener('touchmove', handleTouchMove);
+        };
+    }, [zoomEnabled, zoomScale, clampScale]);
+    // Reset zoom when modal opens
+    useEffect(() => {
+        if (isOpen) {
+            setZoomScale(1);
+            setShowZoomPresets(false);
+            const container = scrollContainerRef.current;
+            if (container) {
+                requestAnimationFrame(() => {
+                    container.scrollLeft = 0;
+                    container.scrollTop = 0;
+                });
+            }
+        }
+    }, [isOpen]);
+    // Track the rendered SVG base width (at zoomScale=1) for mm scale calculation
+    const [svgBaseWidth, setSvgBaseWidth] = useState(0);
+    const zoomScaleRef = useRef(zoomScale);
+    zoomScaleRef.current = zoomScale;
+    useEffect(() => {
+        if (!isZoomMode || !isOpen)
+            return;
+        let observer = null;
+        const measure = () => {
+            const svg = contentRef.current?.querySelector('svg');
+            if (svg) {
+                // getBoundingClientRect includes CSS transform, so divide out current zoom
+                setSvgBaseWidth(svg.getBoundingClientRect().width / zoomScaleRef.current);
+            }
+            else {
+                const container = scrollContainerRef.current;
+                if (container) {
+                    setSvgBaseWidth(container.getBoundingClientRect().width);
+                }
+            }
+        };
+        const setup = () => {
+            const container = scrollContainerRef.current;
+            if (!container)
+                return;
+            observer = new ResizeObserver(() => measure());
+            observer.observe(container);
+            measure();
+        };
+        // Defer to next frame so the dialog content is fully rendered
+        const raf = requestAnimationFrame(setup);
+        return () => {
+            cancelAnimationFrame(raf);
+            observer?.disconnect();
+        };
+    }, [isZoomMode, isOpen]);
+    // Close zoom presets dropdown on outside click
+    useEffect(() => {
+        if (!showZoomPresets)
+            return;
+        const handleClickOutside = (e) => {
+            if (zoomPresetsRef.current && !zoomPresetsRef.current.contains(e.target)) {
+                setShowZoomPresets(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [showZoomPresets]);
+    // ─── Zoom % (plain) ───
+    // Displayed % is the literal CSS zoom: 100% = fit-to-page, 200% = 2× etc.
+    // Picking a preset sets exactly that value, so the label always matches.
+    const physicalPercent = Math.round(zoomScale * 100);
+    // mm scale display (informational): how many CSS px represent 1mm of the diagram
+    const pxPerMM = viewBoxWidthMM && svgBaseWidth > 0
+        ? (svgBaseWidth / viewBoxWidthMM) * zoomScale
+        : 0;
+    const mmScale = pxPerMM > 0 ? pxPerMM.toFixed(1) : null;
+    // Plain zoom presets (literal % of CSS scale)
+    const PHYSICAL_PRESETS = [10, 25, 50, 75, 100, 150, 200, 300, 500];
+    const handlePreviewClick = () => {
+        if (onPreviewClick) {
+            onPreviewClick();
+        }
+        else {
+            setIsOpen(true);
+        }
+    };
+    const handleClose = () => {
+        setIsOpen(false);
+    };
+    // Build export filename: uses exportFilename prop if provided, otherwise falls back to title
+    const getExportName = (extension) => {
+        const base = exportFilename || title || 'export';
+        // Sanitize: replace unsafe chars, collapse spaces/underscores
+        const sanitized = base.replace(/[<>:"/\\|?*]/g, '').replace(/\s+/g, '_').replace(/_+/g, '_').trim();
+        return `${sanitized}.${extension}`;
+    };
+    // Clone SVG and strip dimension arrows for clean exports
+    const getCleanSvg = () => {
+        const svgElement = contentRef.current?.querySelector('svg');
+        if (!svgElement)
+            return null;
+        const clone = svgElement.cloneNode(true);
+        clone.querySelectorAll('[data-dimension]').forEach(el => el.remove());
+        return clone;
+    };
+    // Crop viewBox to the actual bounding box of the SVG's content (after dimension
+    // arrows are stripped) so exports don't carry empty padding around the diagram.
+    // Returns the final {width, height} of the cropped viewBox, or null on failure.
+    // Mutates `svg` in place. Falls back to the existing viewBox dimensions if getBBox throws.
+    const cropToContent = (svg, padMm = 2) => {
+        const host = document.createElement('div');
+        host.style.cssText = 'position:absolute;left:-99999px;top:-99999px;width:0;height:0;overflow:hidden';
+        document.body.appendChild(host);
+        host.appendChild(svg);
+        let result = null;
+        try {
+            const bbox = svg.getBBox();
+            const x = bbox.x - padMm;
+            const y = bbox.y - padMm;
+            const w = bbox.width + padMm * 2;
+            const h = bbox.height + padMm * 2;
+            if (w > 0 && h > 0) {
+                svg.setAttribute('viewBox', `${x} ${y} ${w} ${h}`);
+                result = { width: w, height: h };
+            }
+        }
+        catch {
+            const viewBox = svg.getAttribute('viewBox');
+            if (viewBox) {
+                const parts = viewBox.split(/\s+/);
+                const vbWidth = parseFloat(parts[2]);
+                const vbHeight = parseFloat(parts[3]);
+                if (vbWidth > 0 && vbHeight > 0)
+                    result = { width: vbWidth, height: vbHeight };
+            }
+        }
+        host.removeChild(svg);
+        document.body.removeChild(host);
+        return result;
+    };
+    const exportAsPNG = async () => {
+        if (!contentRef.current)
+            return;
+        try {
+            const clonedSvg = getCleanSvg();
+            if (!clonedSvg)
+                return;
+            const size = cropToContent(clonedSvg);
+            const width = size?.width ?? 800;
+            const height = size?.height ?? 600;
+            // PNG renders at 2x the mm-numeric dimensions for crisp resolution.
+            clonedSvg.setAttribute('width', String(width * 2));
+            clonedSvg.setAttribute('height', String(height * 2));
+            const canvas = document.createElement('canvas');
+            canvas.width = width * 2;
+            canvas.height = height * 2;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            const svgData = new XMLSerializer().serializeToString(clonedSvg);
+            const base64Data = btoa(unescape(encodeURIComponent(svgData)));
+            const dataUrl = `data:image/svg+xml;base64,${base64Data}`;
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = () => {
+                ctx.fillStyle = 'white';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                canvas.toBlob((blob) => {
+                    if (blob) {
+                        const downloadUrl = URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.download = getExportName('png');
+                        link.href = downloadUrl;
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                        URL.revokeObjectURL(downloadUrl);
+                    }
+                }, 'image/png');
+            };
+            img.onerror = (err) => {
+                console.error('Error loading SVG image:', err);
+            };
+            img.src = dataUrl;
+        }
+        catch (error) {
+            console.error('Error exporting PNG:', error);
+        }
+    };
+    const exportAsSVG = () => {
+        if (!contentRef.current)
+            return;
+        try {
+            const cleanSvg = getCleanSvg();
+            if (!cleanSvg)
+                return;
+            const size = cropToContent(cleanSvg);
+            if (size) {
+                cleanSvg.setAttribute('width', `${size.width}mm`);
+                cleanSvg.setAttribute('height', `${size.height}mm`);
+            }
+            const svgData = new XMLSerializer().serializeToString(cleanSvg);
+            const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+            const url = URL.createObjectURL(blob);
+            const link = document.createElement('a');
+            link.download = getExportName('svg');
+            link.href = url;
+            link.click();
+            URL.revokeObjectURL(url);
+        }
+        catch (error) {
+            console.error('Error exporting SVG:', error);
+        }
+    };
+    const exportAsPDF = async () => {
+        if (!contentRef.current)
+            return;
+        try {
+            const svgElement = getCleanSvg();
+            if (!svgElement)
+                return;
+            const size = cropToContent(svgElement);
+            const svgWidth = size?.width ?? 800;
+            const svgHeight = size?.height ?? 600;
+            // Use mm units so 1 SVG unit (which is 1mm after the crop) = 1mm in the PDF.
+            // Page size matches content + small margin — preserves true physical scale.
+            const titleSpace = title ? 12 : 0; // mm reserved for title
+            const margin = 5; // mm
+            const pageWidth = svgWidth + margin * 2;
+            const pageHeight = svgHeight + margin * 2 + titleSpace;
+            const orientation = pageWidth > pageHeight ? 'landscape' : 'portrait';
+            // jsPDF and the svg2pdf plugin download only when a PDF is actually requested.
+            const { jsPDF } = await import('jspdf');
+            await import('svg2pdf.js');
+            const pdf = new jsPDF({
+                orientation,
+                unit: 'mm',
+                format: [pageWidth, pageHeight]
+            });
+            if (title) {
+                pdf.setFontSize(10);
+                pdf.setTextColor(30, 41, 59);
+                pdf.text(title, pageWidth / 2, margin + 5, { align: 'center' });
+            }
+            // @ts-ignore - svg2pdf.js adds this method to jsPDF
+            await pdf.svg(svgElement, {
+                x: margin,
+                y: margin + titleSpace,
+                width: svgWidth,
+                height: svgHeight
+            });
+            const filename = getExportName('pdf');
+            pdf.save(filename);
+        }
+        catch (error) {
+            console.error('Error exporting vector PDF:', error);
+        }
+    };
+    const handlePrint = async () => {
+        if (!contentRef.current)
+            return;
+        try {
+            const svgElement = getCleanSvg();
+            if (!svgElement)
+                return;
+            const size = cropToContent(svgElement);
+            const svgWidth = size?.width ?? 800;
+            const svgHeight = size?.height ?? 600;
+            const titleSpace = title ? 12 : 0;
+            const margin = 5;
+            const pageWidth = svgWidth + margin * 2;
+            const pageHeight = svgHeight + margin * 2 + titleSpace;
+            const orientation = pageWidth > pageHeight ? 'landscape' : 'portrait';
+            // jsPDF and the svg2pdf plugin download only when a PDF is actually requested.
+            const { jsPDF } = await import('jspdf');
+            await import('svg2pdf.js');
+            const pdf = new jsPDF({
+                orientation,
+                unit: 'mm',
+                format: [pageWidth, pageHeight]
+            });
+            if (title) {
+                pdf.setFontSize(10);
+                pdf.setTextColor(30, 41, 59);
+                pdf.text(title, pageWidth / 2, margin + 5, { align: 'center' });
+            }
+            // @ts-ignore - svg2pdf.js adds this method to jsPDF
+            await pdf.svg(svgElement, {
+                x: margin,
+                y: margin + titleSpace,
+                width: svgWidth,
+                height: svgHeight
+            });
+            pdf.autoPrint();
+            const pdfBlob = pdf.output('blob');
+            const pdfBlobUrl = URL.createObjectURL(pdfBlob);
+            const printWindow = window.open(pdfBlobUrl, '_blank');
+            if (printWindow) {
+                printWindow.onload = () => {
+                    setTimeout(() => URL.revokeObjectURL(pdfBlobUrl), 1000);
+                };
+            }
+        }
+        catch (error) {
+            console.error('Error printing vector PDF:', error);
+        }
+    };
+    const copyToClipboard = async () => {
+        if (!contentRef.current)
+            return;
+        try {
+            const clonedSvg = getCleanSvg();
+            if (!clonedSvg)
+                return;
+            const size = cropToContent(clonedSvg);
+            const width = size?.width ?? 800;
+            const height = size?.height ?? 600;
+            clonedSvg.setAttribute('width', String(width * 2));
+            clonedSvg.setAttribute('height', String(height * 2));
+            const canvas = document.createElement('canvas');
+            canvas.width = width * 2;
+            canvas.height = height * 2;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            const svgData = new XMLSerializer().serializeToString(clonedSvg);
+            const base64Data = btoa(unescape(encodeURIComponent(svgData)));
+            const dataUrl = `data:image/svg+xml;base64,${base64Data}`;
+            const img = new Image();
+            img.crossOrigin = 'anonymous';
+            img.onload = async () => {
+                ctx.fillStyle = 'white';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                canvas.toBlob(async (blob) => {
+                    if (blob) {
+                        try {
+                            await navigator.clipboard.write([
+                                new ClipboardItem({ 'image/png': blob })
+                            ]);
+                            alert('Copied to clipboard!');
+                        }
+                        catch (err) {
+                            console.error('Failed to copy:', err);
+                        }
+                    }
+                }, 'image/png');
+            };
+            img.onerror = (err) => {
+                console.error('Error loading SVG for clipboard:', err);
+            };
+            img.src = dataUrl;
+        }
+        catch (error) {
+            console.error('Error copying to clipboard:', error);
+        }
+    };
+    const toggleFullScreen = () => {
+        // Prefer the scroll container (zoom mode) for proper background,
+        // fall back to content ref for non-zoom mode
+        const target = scrollContainerRef.current || contentRef.current;
+        if (!target)
+            return;
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+        else {
+            target.requestFullscreen();
+        }
+    };
+    // ─── Zoom button styles ───
+    const zoomBtnBase = 'flex items-center justify-center h-7 px-2 rounded text-xs font-medium transition-colors select-none';
+    const zoomBtn = `${zoomBtnBase} text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))] disabled:opacity-40 disabled:cursor-not-allowed`;
+    const zoomBtnActive = `${zoomBtnBase} bg-[rgb(var(--bg-subtle))] text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bd-default))]`;
+    return (_jsxs(_Fragment, { children: [preview && (_jsx("div", { className: `border border-[rgb(var(--bd-default))] rounded bg-[rgb(var(--bg-surface))] h-full flex items-center justify-center transition-all cursor-pointer hover:shadow-lg ${previewContainerClassName}`, onClick: handlePreviewClick, children: _jsx("div", { className: previewClassName, children: preview }) })), _jsx(Dialog, { open: isOpen, onOpenChange: handleClose, children: _jsxs(DialogContent, { className: `flex flex-col p-0 bg-[rgb(var(--bg-surface))] z-[100] overflow-hidden ${isPdfMode || cleanMode
+                        ? 'w-[70vw] max-w-[70vw] h-[98vh]'
+                        : isZoomMode
+                            ? 'h-[95vh] max-w-[92vw]'
+                            : 'w-auto max-w-[95vw] max-h-[95vh]'}`, style: isZoomMode && computedModalWidth ? { width: `${computedModalWidth}px` } : undefined, hideCloseButton: true, children: [cleanMode ? (_jsx(DialogTitle, { className: "sr-only", children: title || 'Preview' })) : (_jsx(DialogHeader, { className: "px-4 md:px-6 py-2.5 border-b border-[rgb(var(--bd-default))] flex-shrink-0 bg-[rgb(var(--bg-surface))]", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(DialogTitle, { className: "flex-shrink-0 mr-auto", children: title }), isZoomMode && (_jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [_jsx("button", { className: zoomBtn, onClick: zoomOut, disabled: zoomScale <= MIN_SCALE, title: t('Zoom Out'), children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsxs("div", { className: "relative", ref: zoomPresetsRef, children: [_jsxs("button", { className: `${zoomBtnActive} min-w-[3.5rem] gap-1`, onClick: () => setShowZoomPresets(!showZoomPresets), title: t('Zoom Level'), children: [physicalPercent, "%"] }), showZoomPresets && (_jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 mt-1 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-md shadow-lg z-50 py-1 min-w-[5rem]", children: PHYSICAL_PRESETS.map((preset) => (_jsxs("button", { className: `w-full text-left px-3 py-1.5 text-xs hover:bg-[rgb(var(--bg-subtle))] transition-colors ${physicalPercent === preset
+                                                                ? 'text-[rgb(var(--color-primary))] font-medium'
+                                                                : 'text-[rgb(var(--fg-default))]'}`, onClick: () => { setZoomLevel(preset / 100); setShowZoomPresets(false); }, children: [preset, "%"] }, preset))) }))] }), _jsx("button", { className: zoomBtn, onClick: zoomIn, disabled: zoomScale >= MAX_SCALE, title: t('Zoom In'), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) }), _jsx("div", { className: "w-px h-4 bg-[rgb(var(--bd-default))] mx-1" }), _jsxs("button", { className: zoomBtn, onClick: fitToPage, title: t('Fit to Page'), children: [_jsx(Maximize, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "ml-1 hidden sm:inline", children: t('Fit Page') })] }), _jsxs("button", { className: zoomBtn, onClick: toggleFullScreen, title: t('Full Screen'), children: [_jsx(Maximize2, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "ml-1 hidden sm:inline", children: t('Full Screen') })] }), mmScale && (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-px h-4 bg-[rgb(var(--bd-default))] mx-1" }), _jsxs("span", { className: "flex items-center h-7 text-[0.65rem] text-[rgb(var(--fg-muted))] select-none whitespace-nowrap", children: ["1mm = ", mmScale, "px"] })] }))] })), extraHeaderButtons && (_jsxs(_Fragment, { children: [isZoomMode && _jsx("div", { className: "w-px h-4 bg-[rgb(var(--bd-default))] mx-1" }), _jsx("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: extraHeaderButtons })] })), _jsxs("button", { onClick: handleClose, className: "flex-shrink-0 rounded-sm opacity-70 ring-offset-[rgb(var(--bg-surface))] transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[rgb(var(--color-primary))] focus:ring-offset-2", children: [_jsx(X, { className: "h-4 w-4 text-[rgb(var(--color-icon))]" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }) })), !cleanMode && details && details.length > 0 && (_jsx("div", { className: "px-6 py-2 bg-[rgb(var(--bg-subtle))] border-b border-[rgb(var(--bd-default))] flex-shrink-0", children: _jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-5 gap-y-1 text-xs text-[rgb(var(--fg-default))]", children: details.map((detail, index) => (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "font-medium text-[rgb(var(--fg-muted))]", children: [detail.label, ":"] }), _jsx("span", { className: "font-normal", children: detail.value })] }, index))) }) })), isPdfMode && pdfUrl ? (_jsx("div", { className: "flex-1 bg-[rgb(var(--bg-subtle))] overflow-hidden p-0", style: { minHeight: 0 }, children: _jsx("embed", { src: pdfUrl, type: "application/pdf", className: "w-full h-full", style: { border: 'none' } }) })) : isZoomMode ? (
+                        // Zoomable SVG Mode - uses native overflow scroll + CSS scale for zoom
+                        _jsx("div", { ref: scrollContainerRef, className: "flex-1 bg-[rgb(var(--bg-subtle))] overflow-auto relative", style: { minHeight: 0 }, children: _jsx("div", { style: {
+                                    width: zoomScale <= 1 ? '100%' : `${zoomScale * 100}%`,
+                                    height: zoomScale <= 1 ? '100%' : `${zoomScale * 100}%`,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    minHeight: '100%'
+                                }, children: _jsx("div", { ref: contentRef, style: {
+                                        transform: `scale(${zoomScale})`,
+                                        transformOrigin: 'center center',
+                                        transition: 'transform 0.15s ease-out',
+                                        width: zoomScale > 1 ? `${100 / zoomScale}%` : '100%',
+                                        height: zoomScale > 1 ? `${100 / zoomScale}%` : '100%',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        padding: '1rem'
+                                    }, children: children }) }) })) : (
+                        // Image/SVG Mode (no zoom)
+                        _jsx("div", { ref: contentRef, className: "flex-1 px-6 pb-6 bg-[rgb(var(--bg-surface))] rounded-lg flex items-center justify-center", style: { minHeight: 0 }, children: _jsx("div", { className: "w-full h-full flex items-center justify-center bg-[rgb(var(--bg-surface))]", children: children }) })), cleanMode ? null : isPdfMode ? (_jsx("div", { className: "flex items-center justify-end border-t px-6 py-4 gap-2 bg-[rgb(var(--bg-surface))] flex-shrink-0", children: _jsxs(Button, { variant: "action-save", size: "sm", onClick: onDownloadPdf, className: "flex items-center gap-2", children: [_jsx(Download, { className: "h-4 w-4" }), "Download PDF"] }) })) : (_jsxs("div", { className: "flex items-center justify-between border-t border-[rgb(var(--bd-default))] px-6 py-2.5 bg-[rgb(var(--bg-surface))] flex-shrink-0", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs("span", { className: "text-[0.65rem] text-[rgb(var(--fg-muted))] mr-1 hidden sm:inline", children: [t('Export'), ":"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: exportAsPNG, className: "flex items-center gap-1.5 h-7 text-xs", children: [_jsx(FileImage, { className: "h-3.5 w-3.5" }), "PNG"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: exportAsSVG, className: "flex items-center gap-1.5 h-7 text-xs", children: [_jsx(Download, { className: "h-3.5 w-3.5" }), "SVG"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: exportAsPDF, className: "flex items-center gap-1.5 h-7 text-xs", children: [_jsx(File, { className: "h-3.5 w-3.5" }), "PDF"] }), extraExportButtons] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: copyToClipboard, className: "flex items-center gap-1.5 h-7 text-xs", children: [_jsx(Copy, { className: "h-3.5 w-3.5" }), t('Copy')] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handlePrint, className: "flex items-center gap-1.5 h-7 text-xs", children: [_jsx(Printer, { className: "h-3.5 w-3.5" }), t('Print')] })] })] }))] }) })] }));
+}

package/dist/components/modals/Modal.d.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const modalSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    master: string;
+    fullscreen: string;
+};
+/**
+ * SSR-safe mobile detection hook
+ * @param breakpoint - Pixel width threshold (default 768)
+ */
+export declare function useIsMobile(breakpoint?: number): boolean;
+export declare function useModalDepth(): number;
+/**
+ * Modal wrapper — intercepts the device back button in standalone PWA mode.
+ * When a modal opens, a history entry is pushed. Pressing the device back
+ * button fires `popstate` which closes the modal instead of navigating away.
+ */
+declare function Modal({ open, onOpenChange, ...props }: DialogPrimitive.DialogProps): React.JSX.Element;
+/**
+ * ADAPTIVE TRIGGER
+ *
+ * On desktop: opens the modal dialog as normal.
+ * On mobile + mobilePageUrl: navigates to a dedicated page instead,
+ * so users get native back-button support and full-screen real estate.
+ */
+declare const ModalTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    mobilePageUrl?: string;
+    onMobileNavigate?: (url: string) => void;
+    mobileBreakpoint?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ADAPTIVE MODAL CONTENT
+ *
+ * Desktop: standard Radix dialog overlay (unchanged)
+ * Mobile: renders as a full-screen page with a back-arrow header.
+ *         No Radix overlay/portal — just a fixed div on top of everything.
+ *         ModalHeader/ModalTitle inside become the page header automatically.
+ */
+declare const ModalContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideCloseButton?: boolean;
+    disableOutsideClick?: boolean;
+    size?: keyof typeof modalSizes;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ADAPTIVE HEADER
+ *
+ * Desktop: renders as normal header div
+ * Mobile page mode: renders as a sticky top bar with a back arrow (ChevronLeft)
+ *                   that closes the modal, plus the title inline
+ */
+declare const ModalHeader: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const ModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const ModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const Dialog: typeof Modal;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    mobilePageUrl?: string;
+    onMobileNavigate?: (url: string) => void;
+    mobileBreakpoint?: number;
+} & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    hideCloseButton?: boolean;
+    disableOutsideClick?: boolean;
+    size?: keyof typeof modalSizes;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogHeader: {
+    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Modal, ModalPortal, ModalOverlay, ModalClose, ModalTrigger, ModalContent, ModalHeader, ModalFooter, ModalTitle, ModalDescription, };