<!--
    Quilt – Browser-based collage generator
    Copyright (C) 2026 jfsen (github.com/jfsen)

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-->
<!--
╔══════════════════════════════════════════════════════════════════╗
║  Quilt — Table of Contents                                       ║
╚══════════════════════════════════════════════════════════════════╝

HEAD (lines 80–115)
  HEAD-A  Charset & Viewport               meta tags
  HEAD-B  Favicon                          inline SVG icon
  HEAD-C  Title & Description               Quilt • Collage Generator
  HEAD-D  Open Graph / Social Cards         og: / twitter: meta tags
  HEAD-E  CSS begins at line 117

CSS (lines 117–1017)
  CSS-1   Custom Properties           :root
  CSS-2   Base Reset & Body           *, body
  CSS-3   Scrollbar                   ::-webkit-scrollbar
  CSS-4   Sidebar                     .sidebar / .sidebar-section
  CSS-5   Input Groups                .input-row
  CSS-6   Buttons                     .btn / .btn-primary / …
  CSS-7   Image List                  .image-list / .image-item
  CSS-8   Main Area                   .main / .main-header
  CSS-9   Collage Preview             .collage-container / .collage-cell / …
  CSS-10  Crop Hint                   .crop-hint
  CSS-11  Empty State                 .empty-state
  CSS-11b Drop Zone Overlay           .drop-zone
  CSS-12  Scale Info                  .scale-info
  CSS-13  Responsive                  @media (max-width: 768px)

HTML (lines 1021–1364)
  HTML-A  Sidebar                     Settings, Import, Image list, Download
  HTML-B  Main Area                   Header, Drop zone, Empty state, Collage container

JS   (lines 1372–2730)
  JS-1    State ................................. L1374
  JS-2    DOM References ........................ L1385
  JS-3    Input Binding & Event Wiring .......... L1411
  JS-4    Image Import & Management
  JS-4a   processFiles .......................... L1495
  JS-4b   File Import Button .................... L1525
  JS-4c   Drag & Drop Image Import .............. L1535
  JS-4b   renderImageList ....................... L1587
  JS-4c   removeImage / removeAllImages ......... L1684
  JS-5    Drag & Drop Reordering
  JS-5a   Drag Start / End / Over / Drop ........ L1705
  JS-6    Layout Calculation Engines
  JS-6a   computeLayout ......................... L1774
  JS-6b   bestGrid (rows × columns) ............. L1868
  JS-6b1  masonryLayout ......................... L1910
  JS-6b2  heroGridLayout ........................ L1949
  JS-6b3  heroPriorityLayout .................... L1985
  JS-6c   priorityGridLayout (treemap) .......... L2089
  JS-6d   squarify (recursive treemap) .......... L2109
  JS-7    Collage Preview Rendering
  JS-7a   rebuildCollage ........................ L2188
  JS-7b   updateImagePosition ................... L2340
  JS-7c   selectCell ............................ L2355
  JS-8    Interactive Crop Dragging
  JS-8a   startCrop (mouse/touch) ............... L2364
  JS-8b   renderImageListQuick .................. L2484
  JS-9    High-Resolution Export
  JS-9a   downloadCollage ....................... L2499
  JS-10   Keyboard Shortcuts .................... L2642
  JS-11   Cleanup & Window Events
  JS-11a  Re-enable drag after slider ........... L2698
  JS-11b  Window Resize ......................... L2706
  JS-12   Initialization ........................ L2711
-->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="icon"
            href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%236366f1'/%3E%3Cstop offset='100%25' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='7' height='7' rx='1' fill='url(%23g)'/%3E%3Crect x='9' y='0' width='7' height='7' rx='1' fill='url(%23g)' opacity='0.6'/%3E%3Crect x='0' y='9' width='7' height='7' rx='1' fill='url(%23g)' opacity='0.3'/%3E%3Crect x='9' y='9' width='7' height='7' rx='1' fill='url(%23g)' opacity='0.8'/%3E%3C/svg%3E"
        />
        <title>Quilt • Collage Generator</title>
        <meta
            name="description"
            content="Create beautiful image collages right in your browser. Drag & drop, resize, crop, and export at full resolution — zero dependencies."
        />

        <!-- Open Graph / Social Cards -->
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Quilt • Collage Generator" />
        <meta
            property="og:description"
            content="Create beautiful image collages right in your browser. Drag & drop, resize, crop, and export at full resolution."
        />
        <meta
            property="og:image"
            content="https://quilt.jfsen.org/images/og-image.png"
        />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
        <meta property="og:url" content="https://quilt.jfsen.org" />
        <meta property="og:site_name" content="Quilt" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Quilt • Collage Generator" />
        <meta
            name="twitter:description"
            content="Create beautiful image collages right in your browser."
        />
        <meta
            name="twitter:image"
            content="https://quilt.jfsen.org/images/og-image.png"
        />
        <style>
            /* ── CSS-1: Custom Properties ─────────────────────────────── */
            :root {
                --bg: #07070e;
                --surface: rgba(22, 22, 46, 0.85);
                --surface2: rgba(30, 30, 58, 0.7);
                --surface3: rgba(40, 40, 75, 0.5);
                --text: #ffffff;
                --text2: rgba(210, 210, 235, 0.85);
                --text3: rgba(180, 180, 215, 0.55);
                --accent1: #6366f1;
                --accent2: #4f46e5;
                --accent3: #06b6d4;
                --accent-gradient: linear-gradient(135deg, #6366f1, #06b6d4);
                --accent-gradient-2: linear-gradient(135deg, #6366f1, #4f46e5);
                --danger: #fb7185;
                --border: rgba(255, 255, 255, 0.06);
                --border-hover: rgba(255, 255, 255, 0.12);
                --radius: 12px;
                --radius-sm: 8px;
                --radius-xs: 6px;
                --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
                --glow: 0 0 30px rgba(99, 102, 241, 0.15);
                --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }

            /* ── CSS-2: Base Reset & Body ───────────────────────────────── */
            *,
            *::before,
            *::after {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body {
                font-family:
                    "Inter",
                    "SF Pro",
                    "Segoe UI",
                    system-ui,
                    -apple-system,
                    sans-serif;
                background: var(--bg);
                background-image:
                    radial-gradient(
                        ellipse at 20% 50%,
                        rgba(99, 102, 241, 0.05) 0%,
                        transparent 50%
                    ),
                    radial-gradient(
                        ellipse at 80% 20%,
                        rgba(6, 182, 212, 0.03) 0%,
                        transparent 50%
                    ),
                    radial-gradient(
                        ellipse at 50% 80%,
                        rgba(99, 102, 241, 0.03) 0%,
                        transparent 50%
                    );
                color: var(--text);
                height: 100vh;
                display: flex;
                overflow: hidden;
                user-select: none;
                -webkit-user-select: none;
            }

            /* ── CSS-3: Scrollbar ──────────────────────────────────────── */
            ::-webkit-scrollbar {
                width: 6px;
            }
            ::-webkit-scrollbar-track {
                background: transparent;
            }
            ::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.08);
                border-radius: 3px;
            }
            ::-webkit-scrollbar-thumb:hover {
                background: rgba(255, 255, 255, 0.15);
            }

            /* ── CSS-4: Sidebar ────────────────────────────────────────── */
            .sidebar {
                width: 320px;
                min-width: 320px;
                background: var(--surface);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border-right: 1px solid var(--border);
                display: flex;
                flex-direction: column;
                overflow-y: auto;
                overflow-x: hidden;
                z-index: 10;
            }

            .sidebar-section {
                padding: 16px 18px;
                border-bottom: 1px solid var(--border);
                transition: background var(--transition);
            }
            .sidebar-section:last-of-type {
                border-bottom: none;
            }

            /* Make the image list section fill available space and scroll internally */
            .sidebar-section:has(#imageList) {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            .sidebar-section:has(#imageList) h3 {
                flex-shrink: 0;
                margin-bottom: 12px;
            }

            /* Retractable about section */
            .about-section {
                margin-top: 12px;
                font-size: 10px;
                color: var(--text3);
                text-align: center;
            }
            .about-section summary {
                cursor: pointer;
                font-weight: 500;
                user-select: none;
                display: inline;
                list-style: none;
            }
            .about-section summary::-webkit-details-marker {
                display: none;
            }
            .about-section[open] summary {
                margin-bottom: 8px;
            }
            .about-section p {
                line-height: 1.6;
                margin-top: 4px;
            }

            /* Retractable settings section */
            .settings-section {
                font-size: 12px;
            }
            .settings-section summary {
                cursor: pointer;
                font-weight: 700;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 1.2px;
                color: var(--text3);
                margin-bottom: 12px;
                user-select: none;
                list-style: none;
                display: inline-block;
            }
            .settings-section summary::-webkit-details-marker {
                display: none;
            }
            .settings-section[open] summary {
                margin-bottom: 12px;
            }

            .sidebar-section h3 {
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: 1.2px;
                color: var(--text3);
                margin-bottom: 12px;
                font-weight: 700;
            }

            .clear-all-btn {
                background: none;
                border: none;
                color: var(--text3);
                font-size: 10px;
                font-weight: 500;
                font-family: inherit;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 4px;
                margin-left: auto;
                transition: all var(--transition);
                letter-spacing: 0.3px;
                text-transform: none;
            }
            .clear-all-btn:hover {
                color: var(--danger);
                background: rgba(251, 113, 133, 0.08);
            }

            /* ── CSS-5: Input Groups ────────────────────────────────────── */
            .input-row {
                display: flex;
                gap: 8px;
                align-items: center;
                margin-bottom: 8px;
            }

            .input-row label {
                font-size: 12px;
                color: var(--text2);
                min-width: 44px;
                font-weight: 500;
                letter-spacing: 0.3px;
            }

            .input-row input {
                flex: 1;
                background: var(--surface2);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border: 1px solid var(--border);
                color: var(--text);
                padding: 8px 12px;
                border-radius: var(--radius-xs);
                font-size: 13px;
                font-family: inherit;
                outline: none;
                transition: all var(--transition);
            }

            .input-row input:hover {
                border-color: var(--border-hover);
                background: rgba(40, 40, 75, 0.5);
            }

            .input-row input:focus {
                border-color: var(--accent2);
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
                background: rgba(30, 30, 58, 0.9);
            }

            .canvasH-row.hidden {
                display: none;
            }

            .input-row select {
                display: none;
            }

            /* ── Custom dropdown widgets (replaces native <select>) ─── */
            .custom-select-wrap {
                position: relative;
                flex: 1;
            }
            .custom-select-trigger {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                padding: 8px 28px 8px 12px;
                background: var(--surface2);
                border: 1px solid var(--border);
                border-radius: var(--radius-xs);
                color: var(--text);
                font-size: 13px;
                font-family: inherit;
                cursor: pointer;
                transition: border-color var(--transition);
                user-select: none;
                position: relative;
            }
            .custom-select-trigger:hover {
                border-color: var(--border-hover);
            }
            .custom-select-trigger.open {
                border-color: var(--accent2);
                box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
            }
            .custom-select-trigger::after {
                content: "";
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 6px;
                background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b4b4d7' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")
                    no-repeat center;
                background-size: contain;
                pointer-events: none;
            }
            .custom-select-menu {
                position: absolute;
                top: calc(100% + 4px);
                left: 0;
                right: 0;
                background: #1a1a2e;
                border: 1px solid var(--border);
                border-radius: var(--radius-xs);
                z-index: 100;
                overflow: hidden;
                display: none;
                box-shadow: var(--shadow);
            }
            .custom-select-menu.open {
                display: block;
            }

            /* Format dropdown in the last section opens upward */
            .sidebar-section:last-of-type .custom-select-menu {
                top: auto;
                bottom: calc(100% + 4px);
            }
            .custom-select-option {
                padding: 8px 12px;
                font-size: 13px;
                color: var(--text);
                cursor: pointer;
            }
            .custom-select-option:hover {
                background: rgba(99, 102, 241, 0.12);
            }
            .custom-select-option.selected {
                color: var(--accent1);
                background: rgba(99, 102, 241, 0.15);
            }

            /* ── CSS-6: Buttons ─────────────────────────────────────────── */
            .btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 10px 18px;
                border-radius: var(--radius-xs);
                font-size: 13px;
                font-weight: 600;
                cursor: pointer;
                border: none;
                font-family: inherit;
                transition: all var(--transition);
                white-space: nowrap;
                position: relative;
                overflow: hidden;
                letter-spacing: 0.2px;
            }

            .btn::after {
                content: "";
                position: absolute;
                inset: 0;
                background: rgba(255, 255, 255, 0);
                transition: background var(--transition);
                pointer-events: none;
            }
            .btn:hover::after {
                background: rgba(255, 255, 255, 0.06);
            }
            .btn:active::after {
                background: rgba(255, 255, 255, 0.1);
            }

            .btn-primary {
                background: var(--accent-gradient);
                background-size: 200% 200%;
                color: #fff;
                animation: gradientShift 4s ease-in-out infinite;
            }
            .btn-primary:hover {
                transform: translateY(-1px);
                box-shadow: 0 8px 25px rgba(99, 102, 241, 0.35);
            }
            .btn-primary:active {
                transform: translateY(0);
            }

            @keyframes gradientShift {
                0%,
                100% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
            }

            .btn-danger {
                background: transparent;
                color: var(--danger);
                border: 1px solid rgba(251, 113, 133, 0.3);
            }
            .btn-danger:hover {
                background: rgba(251, 113, 133, 0.1);
                border-color: var(--danger);
            }

            .btn-sm {
                padding: 6px 12px;
                font-size: 11px;
            }

            .btn-block {
                width: 100%;
                justify-content: center;
            }

            .btn:disabled {
                opacity: 0.4;
                cursor: not-allowed;
                transform: none !important;
                box-shadow: none !important;
            }

            /* ── CSS-7: Image List ───────────────────────────────────────── */
            .image-list {
                display: flex;
                flex-direction: column;
                gap: 6px;
                flex: 1;
                min-height: 0;
                overflow-y: auto;
            }

            .image-item {
                display: flex;
                align-items: center;
                gap: 10px;
                background: var(--surface2);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-radius: var(--radius-sm);
                padding: 10px 10px 14px 10px;
                cursor: grab;
                border: 1.5px solid transparent;
                transition: all var(--transition);
                position: relative;
            }

            .image-item::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(
                    135deg,
                    transparent 60%,
                    rgba(99, 102, 241, 0.03)
                );
                pointer-events: none;
            }

            .image-item:active {
                cursor: grabbing;
            }
            .image-item.dragging {
                opacity: 0.4;
                border-color: var(--accent2);
                transform: scale(0.97);
            }
            .image-item.drag-over {
                border-color: var(--accent2);
                background: rgba(99, 102, 241, 0.12);
                transform: scale(1.02);
            }
            .image-item.selected {
                border-color: var(--accent2);
                background: rgba(99, 102, 241, 0.08);
                box-shadow: 0 0 20px rgba(99, 102, 241, 0.08);
            }

            .image-item .drag-handle {
                color: var(--text3);
                font-size: 16px;
                cursor: grab;
                line-height: 1;
                padding: 0 2px;
                flex-shrink: 0;
                transition: color var(--transition);
            }
            .image-item:hover .drag-handle {
                color: var(--text2);
            }

            .image-item .thumb {
                width: 40px;
                height: 40px;
                border-radius: var(--radius-xs);
                object-fit: cover;
                background: var(--bg);
                flex-shrink: 0;
                pointer-events: none;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            }

            .image-item .info {
                flex: 1;
                min-width: 0;
            }

            .image-item .name {
                font-size: 12px;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: var(--text);
                letter-spacing: 0.1px;
            }

            .image-item .priority-row {
                display: flex;
                align-items: center;
                gap: 6px;
                margin-top: 3px;
                min-width: 0;
            }
            .image-item .priority-row.hidden {
                display: none;
            }

            .image-item .priority-row > span {
                flex-shrink: 0;
                font-size: 9px;
                color: var(--text3);
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .image-item .priority-row input[type="range"] {
                flex: 1;
                min-width: 0;
                height: 6px;
                -webkit-appearance: none;
                appearance: none;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 3px;
                outline: none;
                cursor: pointer;
                transition: background var(--transition);
            }
            .image-item .priority-row input[type="range"]:hover {
                background: rgba(255, 255, 255, 0.12);
            }

            .image-item
                .priority-row
                input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--accent-gradient);
                cursor: pointer;
                box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
                transition:
                    transform 0.2s,
                    box-shadow 0.2s;
            }
            .image-item
                .priority-row
                input[type="range"]::-webkit-slider-thumb:hover {
                transform: scale(1.15);
                box-shadow: 0 0 16px rgba(99, 102, 241, 0.5);
            }
            .image-item .priority-row input[type="range"]::-moz-range-thumb {
                width: 18px;
                height: 18px;
                border-radius: 50%;
                background: var(--accent-gradient);
                cursor: pointer;
                border: none;
                box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
            }
            .image-item .priority-row input[type="range"]::-moz-range-track {
                height: 6px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 3px;
            }

            .image-item .priority-label {
                font-size: 10px;
                color: var(--text2);
                min-width: 26px;
                text-align: right;
                font-weight: 700;
                flex-shrink: 0;
                font-variant-numeric: tabular-nums;
            }

            .image-item .rm-btn {
                background: none;
                border: none;
                color: var(--text3);
                cursor: pointer;
                font-size: 15px;
                padding: 4px;
                line-height: 1;
                border-radius: var(--radius-xs);
                transition: all var(--transition);
                flex-shrink: 0;
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .image-item .rm-btn:hover {
                color: var(--danger);
                background: rgba(251, 113, 133, 0.1);
            }

            /* ── CSS-8: Main Area ───────────────────────────────────────── */
            .main {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 24px;
                overflow: auto;
                position: relative;
            }

            .main-header {
                position: absolute;
                top: 14px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 12px;
                color: var(--text2);
                background: var(--surface);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                padding: 7px 16px;
                border-radius: 20px;
                border: 1px solid var(--border);
                pointer-events: none;
                z-index: 5;
                font-weight: 500;
                letter-spacing: 0.3px;
            }

            /* ── CSS-9: Collage Preview ──────────────────────────────────── */
            .collage-container {
                position: relative;
                box-shadow:
                    0 4px 24px rgba(0, 0, 0, 0.6),
                    0 0 60px rgba(99, 102, 241, 0.06);
                border-radius: 4px;
                overflow: hidden;
                background: #0a0a12;
                cursor: default;
                transition: box-shadow var(--transition);
            }
            .collage-container:hover {
                box-shadow:
                    0 8px 32px rgba(0, 0, 0, 0.7),
                    0 0 80px rgba(99, 102, 241, 0.1);
            }

            .collage-grid {
                display: grid;
                width: 100%;
                height: 100%;
            }

            .collage-cell {
                position: relative;
                overflow: hidden;
                background: #0d0d1a;
                border: 1px solid rgba(255, 255, 255, 0.04);
                cursor: crosshair;
                transition: all 0.2s ease;
            }

            .collage-cell:hover {
                border-color: rgba(255, 255, 255, 0.12);
                z-index: 1;
            }

            .collage-cell.active {
                border-color: var(--accent2) !important;
                z-index: 2;
                box-shadow:
                    0 0 0 2px var(--accent2),
                    0 0 20px rgba(99, 102, 241, 0.2);
            }

            .collage-cell img {
                position: absolute;
                pointer-events: none;
            }

            .cell-number {
                position: absolute;
                top: 5px;
                left: 7px;
                font-size: 9px;
                color: rgba(255, 255, 255, 0.6);
                background: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(4px);
                -webkit-backdrop-filter: blur(4px);
                padding: 2px 7px;
                border-radius: 4px;
                pointer-events: none;
                z-index: 1;
                font-weight: 700;
                letter-spacing: 0.5px;
                border: 1px solid rgba(255, 255, 255, 0.04);
            }

            /* ── CSS-10: Crop Hint ───────────────────────────────────────── */
            .crop-hint {
                position: absolute;
                bottom: 6px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 9px;
                color: rgba(255, 255, 255, 0.7);
                background: rgba(0, 0, 0, 0.6);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                padding: 3px 10px;
                border-radius: 6px;
                pointer-events: none;
                z-index: 2;
                white-space: nowrap;
                border: 1px solid rgba(255, 255, 255, 0.04);
                font-weight: 500;
                letter-spacing: 0.2px;
            }

            /* ── CSS-11: Empty State ────────────────────────────────────── */
            .empty-state {
                text-align: center;
                color: var(--text2);
                padding: 40px;
            }

            .empty-state .icon {
                font-size: 64px;
                margin-bottom: 20px;
                opacity: 0.35;
                animation: floatIcon 4s ease-in-out infinite;
                transition:
                    opacity var(--transition),
                    transform var(--transition);
            }
            .empty-state .icon svg {
                width: 72px;
                height: 72px;
            }

            @keyframes floatIcon {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-6px);
                }
            }

            .empty-state p {
                font-size: 15px;
                margin-bottom: 6px;
                font-weight: 500;
            }
            .empty-state .sub {
                font-size: 13px;
                opacity: 0.5;
                font-weight: 400;
            }

            /* ── CSS-11b: Drop Zone Overlay ──────────────────────────── */
            .drop-zone {
                position: absolute;
                inset: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 16px;
                z-index: 20;
                pointer-events: none;
                visibility: hidden;
                backdrop-filter: blur(12px);
                -webkit-backdrop-filter: blur(12px);
                opacity: 0;
                transform: scale(0.96);
                transition:
                    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .drop-zone.active {
                visibility: visible;
                opacity: 1;
                transform: scale(1);
            }
            .drop-zone::before {
                content: "";
                position: absolute;
                inset: 20px;
                border-radius: 20px;
                border: 2px dashed rgba(99, 102, 241, 0.35);
                background: rgba(99, 102, 241, 0.04);
                box-shadow:
                    0 0 60px rgba(99, 102, 241, 0.08),
                    inset 0 0 60px rgba(99, 102, 241, 0.04);
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .drop-zone.active::before {
                border-color: rgba(99, 102, 241, 0.6);
                background: rgba(99, 102, 241, 0.08);
                box-shadow:
                    0 0 80px rgba(99, 102, 241, 0.15),
                    inset 0 0 80px rgba(99, 102, 241, 0.06);
            }
            .drop-zone .drop-icon {
                position: relative;
                z-index: 1;
                width: 64px;
                height: 64px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .drop-zone.active .drop-icon {
                transform: translateY(-6px);
                animation: dropPulse 1.6s ease-in-out infinite;
            }
            .drop-zone .drop-icon svg {
                width: 52px;
                height: 52px;
                opacity: 0.5;
                transition: opacity 0.3s ease;
            }
            .drop-zone.active .drop-icon svg {
                opacity: 0.85;
            }
            .drop-zone .drop-text {
                position: relative;
                z-index: 1;
                font-size: 16px;
                font-weight: 600;
                color: rgba(255, 255, 255, 0.8);
                letter-spacing: 0.3px;
            }
            .drop-zone .drop-sub {
                position: relative;
                z-index: 1;
                font-size: 12px;
                color: rgba(180, 180, 215, 0.5);
                font-weight: 400;
            }

            @keyframes dropPulse {
                0%,
                100% {
                    transform: translateY(-6px);
                }
                50% {
                    transform: translateY(-12px);
                }
            }

            /* ── CSS-12: Scale Info ─────────────────────────────────────── */
            .scale-info {
                position: absolute;
                bottom: 10px;
                right: 14px;
                font-size: 10px;
                color: var(--text3);
                pointer-events: none;
                font-weight: 500;
                letter-spacing: 0.3px;
                background: rgba(0, 0, 0, 0.3);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                padding: 3px 10px;
                border-radius: 6px;
                border: 1px solid rgba(255, 255, 255, 0.03);
            }

            /* ── CSS-13: Responsive (mobile ≤768px) ────────────────────── */
            @media (max-width: 768px) {
                body {
                    flex-direction: column;
                }
                .sidebar {
                    width: 100%;
                    min-width: 100%;
                    max-height: 40vh;
                    flex-shrink: 0;
                    backdrop-filter: blur(20px);
                    -webkit-backdrop-filter: blur(20px);
                }
                .main {
                    padding: 12px;
                }
            }
        </style>
    </head>
    <body>
        <!-- ════════════════════════════════════════════════════════════
             HTML-A: SIDEBAR
             Canvas size controls, layout selector, import button,
             sortable image list, priority sliders, and export footer.
             ════════════════════════════════════════════════════════════ -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-section">
                <details class="settings-section" open>
                    <summary>
                        <svg
                            viewBox="0 0 18 18"
                            width="14"
                            height="14"
                            fill="none"
                            stroke="currentColor"
                            stroke-width="1.5"
                            stroke-linecap="round"
                            opacity="0.5"
                            style="vertical-align: -2px; margin-right: 5px"
                        >
                            <rect x="2" y="2" width="14" height="14" rx="2" />
                            <path
                                d="M2 9h14"
                                stroke-dasharray="2 2"
                                stroke-width="1"
                            />
                            <path
                                d="M9 2v14"
                                stroke-dasharray="2 2"
                                stroke-width="1"
                            />
                        </svg>
                        Settings
                    </summary>
                    <div class="input-row">
                        <label>Width</label>
                        <input
                            type="number"
                            id="canvasW"
                            value="1920"
                            min="200"
                            max="8000"
                            step="10"
                        />
                    </div>
                    <div class="input-row canvasH-row" id="canvasHRow">
                        <label>Height</label>
                        <input
                            type="number"
                            id="canvasH"
                            value="1080"
                            min="200"
                            max="8000"
                            step="10"
                        />
                    </div>
                    <div class="input-row">
                        <label>Layout</label>
                        <select id="layoutSelect">
                            <option value="equal-grid">Equal Grid</option>
                            <option value="priority-grid">
                                Priority-Weighted Grid
                            </option>
                            <option value="horizontal">Horizontal Strip</option>
                            <option value="vertical">Vertical Strip</option>
                            <option value="hero-grid">Hero + Grid</option>
                            <option value="hero-priority">
                                Hero + Priority
                            </option>
                            <option value="masonry">Masonry</option>
                        </select>
                    </div>
                </details>
            </div>

            <div class="sidebar-section">
                <button class="btn btn-primary btn-block" id="importBtn">
                    <svg
                        viewBox="0 0 18 18"
                        width="15"
                        height="15"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path d="M9 3v12" />
                        <path d="M3 9h12" />
                    </svg>
                    Import Images
                </button>
                <input
                    type="file"
                    id="fileInput"
                    accept="image/*"
                    multiple
                    hidden
                />
                <p
                    style="
                        font-size: 10px;
                        color: var(--text3);
                        margin-top: 8px;
                        text-align: center;
                        letter-spacing: 0.3px;
                    "
                >
                    JPEG &middot; PNG &middot; WebP &middot; GIF &middot; SVG
                </p>
            </div>

            <div
                class="sidebar-section"
                style="flex: 1; overflow-y: auto; min-height: 0"
            >
                <h3 style="display: flex; align-items: center; gap: 7px">
                    <svg
                        viewBox="0 0 18 18"
                        width="14"
                        height="14"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        opacity="0.5"
                    >
                        <rect x="2" y="3" width="14" height="12" rx="2" />
                        <circle cx="7" cy="8" r="1.5" />
                        <path d="M2 13l4-4 3 3 4-5 3 3" />
                    </svg>
                    Images
                    <span id="imageCount" style="color: var(--text2)">(0)</span>
                    <button
                        id="clearAllBtn"
                        class="clear-all-btn"
                        title="Remove all images"
                        style="display: none"
                    >
                        Clear all
                    </button>
                </h3>
                <div class="image-list" id="imageList">
                    <div class="empty-state" style="padding: 24px">
                        <p style="font-size: 13px; opacity: 0.5">
                            No images yet
                        </p>
                        <p class="sub" style="font-size: 11px">
                            Import images to start
                        </p>
                    </div>
                </div>
            </div>

            <div class="sidebar-section">
                <div class="input-row" style="margin-bottom: 8px">
                    <label>Format</label>
                    <select id="exportFormat">
                        <option value="png">PNG (lossless)</option>
                        <option value="jpeg-high">JPG (high quality)</option>
                        <option value="jpeg-low">JPG (low quality)</option>
                    </select>
                </div>
                <button
                    class="btn btn-primary btn-block"
                    id="downloadBtn"
                    disabled
                >
                    <svg
                        viewBox="0 0 18 18"
                        width="15"
                        height="15"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="1.8"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <path d="M9 2v10" />
                        <path d="M5 8l4 4 4-4" />
                        <path
                            d="M2 13v1.5A1.5 1.5 0 0 0 3.5 16h11a1.5 1.5 0 0 0 1.5-1.5V13"
                        />
                    </svg>
                    Download Collage
                </button>
                <details class="about-section">
                    <summary>ⓘ About Quilt</summary>
                    <p>
                        Quilt is free software under
                        <a
                            href="https://www.gnu.org/licenses/agpl-3.0.html"
                            style="
                                color: var(--accent2);
                                text-decoration: none;
                                font-weight: 500;
                            "
                            target="_blank"
                            rel="noopener"
                            >GNU AGPLv3</a
                        >.
                    </p>
                    <p>
                        <a
                            href="https://github.com/jfsen/quilt"
                            style="
                                color: var(--text2);
                                text-decoration: none;
                                font-weight: 500;
                                transition: color 0.2s;
                            "
                            target="_blank"
                            rel="noopener"
                            onmouseover="this.style.color = 'var(--accent1)'"
                            onmouseout="this.style.color = 'var(--text2)'"
                            >View source on GitHub</a
                        >
                    </p>
                </details>
            </div>
        </aside>

        <!-- ════════════════════════════════════════════════════════════════
             HTML-B: MAIN AREA
             Collage preview (empty state or active collage grid),
             header bar with scale indicator, and dimension overlay.
             ════════════════════════════════════════════════════════════════ -->
        <main class="main" id="mainArea">
            <div class="main-header" id="mainHeader" style="display: none">
                Preview <span id="scaleLabel"></span>
            </div>
            <!-- Drop Zone Overlay -->
            <div class="drop-zone" id="dropZone">
                <div class="drop-icon">
                    <svg
                        viewBox="0 0 64 64"
                        fill="none"
                        stroke="url(#dropGrad)"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <defs>
                            <linearGradient
                                id="dropGrad"
                                x1="0"
                                y1="0"
                                x2="64"
                                y2="64"
                            >
                                <stop offset="0%" stop-color="#6366f1" />
                                <stop offset="100%" stop-color="#06b6d4" />
                            </linearGradient>
                        </defs>
                        <path d="M32 8v30" stroke-width="2" />
                        <path d="M22 28l10 10 10-10" stroke-width="2" />
                        <rect
                            x="12"
                            y="42"
                            width="40"
                            height="14"
                            rx="3"
                            opacity="0.45"
                        />
                    </svg>
                </div>
                <span class="drop-text">Drop images here</span>
                <span class="drop-sub">JPEG · PNG · WebP · GIF · SVG</span>
            </div>
            <div class="empty-state" id="emptyState">
                <div class="icon">
                    <svg
                        viewBox="0 0 80 80"
                        width="80"
                        height="80"
                        fill="none"
                        stroke="url(#emptyGrad)"
                        stroke-width="1.8"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    >
                        <defs>
                            <linearGradient
                                id="emptyGrad"
                                x1="0"
                                y1="0"
                                x2="80"
                                y2="80"
                            >
                                <stop offset="0%" stop-color="#6366f1" />
                                <stop offset="100%" stop-color="#06b6d4" />
                            </linearGradient>
                            <linearGradient
                                id="emptyGrad2"
                                x1="0"
                                y1="0"
                                x2="40"
                                y2="60"
                            >
                                <stop
                                    offset="0%"
                                    stop-color="rgba(99,102,241,0.15)"
                                />
                                <stop
                                    offset="100%"
                                    stop-color="rgba(6,182,212,0.06)"
                                />
                            </linearGradient>
                        </defs>
                        <rect
                            x="10"
                            y="14"
                            width="60"
                            height="52"
                            rx="6"
                            fill="url(#emptyGrad2)"
                        />
                        <rect x="10" y="14" width="60" height="52" rx="6" />
                        <path
                            d="M10 50l16-16 12 12 16-18 16 16"
                            stroke-width="1.8"
                        />
                        <circle
                            cx="26"
                            cy="28"
                            r="4"
                            fill="url(#emptyGrad)"
                            stroke="none"
                        />
                    </svg>
                </div>
                <p>Collage Preview</p>
                <p class="sub">Import images or drag &amp; drop them here</p>
            </div>
            <div
                class="collage-container"
                id="collageContainer"
                style="display: none"
            >
                <div class="collage-grid" id="collageGrid"></div>
            </div>
            <div class="scale-info" id="scaleInfo" style="display: none"></div>
        </main>

        <script>
            (function () {
                // ── 1. State ────────────────────────────────────────────
                const state = {
                    images: [], // { id, file, url, width, height, priority, cropX, cropY }
                    canvasW: 1920,
                    canvasH: 1080,
                    layout: "equal-grid",
                    nextId: 1,
                    activeCellIndex: null,
                    draggedItemIndex: null,
                };

                // ── 2. DOM References ─────────────────────────────────
                const $ = (s) => document.querySelector(s);
                const $$ = (s) => document.querySelectorAll(s);

                const els = {
                    canvasW: $("#canvasW"),
                    canvasH: $("#canvasH"),
                    canvasHRow: $("#canvasHRow"),
                    layoutSelect: $("#layoutSelect"),
                    importBtn: $("#importBtn"),
                    fileInput: $("#fileInput"),
                    imageList: $("#imageList"),
                    imageCount: $("#imageCount"),
                    clearAllBtn: $("#clearAllBtn"),
                    downloadBtn: $("#downloadBtn"),
                    mainArea: $("#mainArea"),
                    emptyState: $("#emptyState"),
                    collageContainer: $("#collageContainer"),
                    collageGrid: $("#collageGrid"),
                    mainHeader: $("#mainHeader"),
                    scaleLabel: $("#scaleLabel"),
                    scaleInfo: $("#scaleInfo"),
                    exportFormat: $("#exportFormat"),
                    dropZone: $("#dropZone"),
                };

                // ── 3. Input Binding & Event Wiring ────────────────────

                // Build custom dropdown widgets for all <select> elements
                function customizeSelect(sel) {
                    sel.style.display = "none";
                    var wrap = document.createElement("div");
                    wrap.className = "custom-select-wrap";
                    var trigger = document.createElement("div");
                    trigger.className = "custom-select-trigger";
                    trigger.textContent = sel.options[sel.selectedIndex].text;
                    var menu = document.createElement("div");
                    menu.className = "custom-select-menu";
                    [].slice.call(sel.options).forEach(function (opt) {
                        var el = document.createElement("div");
                        el.className =
                            "custom-select-option" +
                            (opt.selected ? " selected" : "");
                        el.textContent = opt.text;
                        el.onclick = function () {
                            sel.value = opt.value;
                            trigger.textContent = opt.text;
                            var cur = menu.querySelector(".selected");
                            if (cur) cur.classList.remove("selected");
                            el.classList.add("selected");
                            menu.classList.remove("open");
                            trigger.classList.remove("open");
                            sel.dispatchEvent(
                                new Event("change", { bubbles: true }),
                            );
                        };
                        menu.appendChild(el);
                    });
                    trigger.onclick = function (e) {
                        e.stopPropagation();
                        menu.classList.toggle("open");
                        trigger.classList.toggle("open");
                    };
                    document.addEventListener(
                        "click",
                        function () {
                            menu.classList.remove("open");
                            trigger.classList.remove("open");
                        },
                        { passive: true },
                    );
                    document.addEventListener("keydown", function (e) {
                        if (e.key === "Escape") {
                            menu.classList.remove("open");
                            trigger.classList.remove("open");
                        }
                    });
                    sel.parentNode.insertBefore(wrap, sel);
                    wrap.appendChild(trigger);
                    wrap.appendChild(menu);
                }
                customizeSelect(els.layoutSelect);
                customizeSelect(els.exportFormat);

                els.canvasW.addEventListener("input", () => {
                    state.canvasW = Math.max(
                        200,
                        Math.min(8000, parseInt(els.canvasW.value) || 1200),
                    );
                    rebuildCollage();
                });
                els.canvasH.addEventListener("input", () => {
                    state.canvasH = Math.max(
                        200,
                        Math.min(8000, parseInt(els.canvasH.value) || 800),
                    );
                    rebuildCollage();
                });
                els.layoutSelect.addEventListener("change", () => {
                    state.layout = els.layoutSelect.value;
                    // Show/hide height input (masonry auto-computes height)
                    if (state.layout === "masonry") {
                        els.canvasHRow.classList.add("hidden");
                    } else {
                        els.canvasHRow.classList.remove("hidden");
                    }
                    renderImageList();
                    rebuildCollage();
                });

                // ── 4a. processFiles — Shared file processing ──────────
                function processFiles(files) {
                    const fileList = Array.from(files);
                    if (fileList.length === 0) return;

                    fileList.forEach((file) => {
                        if (!file.type.startsWith("image/")) return;
                        const url = URL.createObjectURL(file);
                        const img = new Image();
                        img.onload = () => {
                            state.images.push({
                                id: state.nextId++,
                                file: file,
                                url: url,
                                width: img.naturalWidth,
                                height: img.naturalHeight,
                                priority: 50,
                                cropX: 50,
                                cropY: 50,
                            });
                            renderImageList();
                            rebuildCollage();
                        };
                        img.onerror = () => {
                            URL.revokeObjectURL(url);
                        };
                        img.src = url;
                    });
                }

                // ── 4b. File Import Button ──────────────────────────
                els.importBtn.addEventListener("click", () =>
                    els.fileInput.click(),
                );
                els.clearAllBtn.addEventListener("click", removeAllImages);
                els.fileInput.addEventListener("change", (e) => {
                    processFiles(e.target.files);
                    els.fileInput.value = "";
                });

                // ── 4c. Drag & Drop Image Import ─────────────────────
                let dragCounter = 0;

                function showDropZone() {
                    els.dropZone.classList.add("active");
                }

                function hideDropZone() {
                    els.dropZone.classList.remove("active");
                }

                function isFileDrag(e) {
                    return (
                        e.dataTransfer &&
                        e.dataTransfer.types &&
                        Array.from(e.dataTransfer.types).includes("Files")
                    );
                }

                document.addEventListener("dragenter", (e) => {
                    if (!isFileDrag(e)) return;
                    e.preventDefault();
                    dragCounter++;
                    if (dragCounter === 1) showDropZone();
                });

                document.addEventListener("dragleave", (e) => {
                    if (!isFileDrag(e)) return;
                    e.preventDefault();
                    dragCounter--;
                    if (dragCounter <= 0) {
                        dragCounter = 0;
                        hideDropZone();
                    }
                });

                document.addEventListener("dragover", (e) => {
                    if (!isFileDrag(e)) return;
                    e.preventDefault();
                    e.dataTransfer.dropEffect = "copy";
                });

                document.addEventListener("drop", (e) => {
                    if (!isFileDrag(e)) return;
                    e.preventDefault();
                    dragCounter = 0;
                    hideDropZone();
                    if (e.dataTransfer.files.length > 0) {
                        processFiles(e.dataTransfer.files);
                    }
                });

                // ── 4b. renderImageList — Build the sidebar image list ──
                function renderImageList() {
                    const list = els.imageList;
                    list.innerHTML = "";

                    if (state.images.length === 0) {
                        list.innerHTML = `<div class="empty-state" style="padding:24px;">
        <p style="font-size:13px;opacity:0.5;">No images yet</p>
        <p class="sub" style="font-size:11px;">Import images to start</p>
      </div>`;
                        els.imageCount.textContent = "(0)";
                        els.downloadBtn.disabled = true;
                        els.clearAllBtn.style.display = "none";
                        return;
                    }

                    els.imageCount.textContent = `(${state.images.length})`;
                    els.downloadBtn.disabled = false;
                    els.clearAllBtn.style.display = "";

                    state.images.forEach((img, index) => {
                        const item = document.createElement("div");
                        item.className =
                            "image-item" +
                            (state.activeCellIndex === index
                                ? " selected"
                                : "");
                        item.draggable = true;
                        item.dataset.index = index;

                        item.innerHTML = `
        <span class="drag-handle">⠿</span>
        <img class="thumb" src="${img.url}" alt="">
        <div class="info">
          <div class="name">${img.file?.name || "Image " + img.id}</div>
          <div class="priority-row${state.layout === "equal-grid" || state.layout === "masonry" || state.layout === "hero-grid" ? " hidden" : ""}">
            <span style="font-size:10px;color:var(--text2);">P:</span>
            <input type="range" min="1" max="100" value="${img.priority}" class="prio-slider">
            <span class="priority-label">${img.priority}</span>
          </div>
        </div>
        <button class="rm-btn" title="Remove">✕</button>
      `;

                        // Priority slider
                        const slider = item.querySelector(".prio-slider");
                        const label = item.querySelector(".priority-label");
                        // Prevent HTML5 drag from firing on parent when using slider
                        slider.addEventListener("mousedown", (e) => {
                            e.stopPropagation();
                            item.draggable = false;
                        });
                        slider.addEventListener(
                            "touchstart",
                            (e) => {
                                e.stopPropagation();
                                item.draggable = false;
                            },
                            { passive: false },
                        );
                        slider.addEventListener("input", (e) => {
                            e.stopPropagation();
                            img.priority = parseInt(slider.value);
                            label.textContent = img.priority;
                            rebuildCollage();
                        });

                        // Remove button
                        item.querySelector(".rm-btn").addEventListener(
                            "click",
                            (e) => {
                                e.stopPropagation();
                                removeImage(index);
                            },
                        );

                        // Click to select for crop adjustment
                        item.addEventListener("click", (e) => {
                            if (
                                e.target.tagName === "INPUT" ||
                                e.target.tagName === "BUTTON"
                            )
                                return;
                            selectCell(index);
                        });

                        // Drag and drop reorder
                        item.addEventListener("dragstart", handleDragStart);
                        item.addEventListener("dragend", handleDragEnd);
                        item.addEventListener("dragover", handleDragOver);
                        item.addEventListener("dragleave", handleDragLeave);
                        item.addEventListener("drop", handleDrop);

                        list.appendChild(item);
                    });
                }

                // ── 4c. removeImage / removeAllImages — Remove images ──────
                function removeImage(index) {
                    const img = state.images[index];
                    URL.revokeObjectURL(img.url);
                    state.images.splice(index, 1);
                    if (state.activeCellIndex === index)
                        state.activeCellIndex = null;
                    else if (state.activeCellIndex > index)
                        state.activeCellIndex--;
                    renderImageList();
                    rebuildCollage();
                }

                function removeAllImages() {
                    state.images.forEach((img) => URL.revokeObjectURL(img.url));
                    state.images = [];
                    state.activeCellIndex = null;
                    renderImageList();
                    rebuildCollage();
                }

                // ── 5a. Drag & Drop Reorder Handlers ────────────────────
                function handleDragStart(e) {
                    // Don't start drag if user is interacting with a form control
                    if (
                        e.target.tagName === "INPUT" ||
                        e.target.tagName === "BUTTON" ||
                        e.target.tagName === "SELECT" ||
                        e.target.tagName === "TEXTAREA"
                    ) {
                        e.preventDefault();
                        return false;
                    }
                    state.draggedItemIndex = parseInt(this.dataset.index);
                    this.classList.add("dragging");
                    e.dataTransfer.effectAllowed = "move";
                    e.dataTransfer.setData(
                        "text/plain",
                        state.draggedItemIndex,
                    );
                }

                function handleDragEnd(e) {
                    this.classList.remove("dragging");
                    state.draggedItemIndex = null;
                    $$(".image-item").forEach((el) =>
                        el.classList.remove("drag-over"),
                    );
                }

                function handleDragOver(e) {
                    e.preventDefault();
                    e.dataTransfer.dropEffect = "move";
                    this.classList.add("drag-over");
                }

                function handleDragLeave(e) {
                    this.classList.remove("drag-over");
                }

                function handleDrop(e) {
                    e.preventDefault();
                    this.classList.remove("drag-over");
                    const fromIdx = state.draggedItemIndex;
                    const toIdx = parseInt(this.dataset.index);
                    if (fromIdx === null || fromIdx === toIdx) return;

                    // Reorder
                    const [moved] = state.images.splice(fromIdx, 1);
                    state.images.splice(toIdx, 0, moved);

                    // Update active cell
                    if (state.activeCellIndex === fromIdx)
                        state.activeCellIndex = toIdx;
                    else if (
                        fromIdx < state.activeCellIndex &&
                        toIdx >= state.activeCellIndex
                    )
                        state.activeCellIndex--;
                    else if (
                        fromIdx > state.activeCellIndex &&
                        toIdx <= state.activeCellIndex
                    )
                        state.activeCellIndex++;

                    state.draggedItemIndex = null;
                    renderImageList();
                    rebuildCollage();
                }

                // ── 6a. computeLayout — Main layout dispatcher ────────────
                function computeLayout() {
                    const n = state.images.length;
                    if (n === 0) return null;

                    // Read dimensions and layout from the DOM so the
                    // current input values are always used
                    const cw = parseInt(els.canvasW.value) || state.canvasW;
                    const ch = parseInt(els.canvasH.value) || state.canvasH;
                    state.canvasW = cw;
                    state.canvasH = ch;
                    const layout = els.layoutSelect.value;
                    state.layout = layout;

                    // Each cell: { x, y, w, h } in canvas pixels
                    let cells = [];

                    if (layout === "equal-grid") {
                        // Find best grid for equal areas
                        const { rows, cols } = bestGrid(n, cw, ch);
                        const cellW = cw / cols;
                        const cellH = ch / rows;
                        for (let i = 0; i < n; i++) {
                            const row = Math.floor(i / cols);
                            const col = i % cols;
                            cells.push({
                                x: col * cellW,
                                y: row * cellH,
                                w: cellW,
                                h: cellH,
                            });
                        }
                    } else if (layout === "priority-grid") {
                        // Distribute space by priority using treemap-like approach
                        cells = priorityGridLayout(n, cw, ch);
                    } else if (layout === "horizontal") {
                        // All in one row, widths proportional to priority
                        const totalPriority = state.images.reduce(
                            (s, img) => s + img.priority,
                            0,
                        );
                        let x = 0;
                        for (let i = 0; i < n; i++) {
                            const frac =
                                state.images[i].priority / totalPriority;
                            const w = frac * cw;
                            cells.push({ x, y: 0, w, h: ch });
                            x += w;
                        }
                        // Fix rounding gaps
                        if (cells.length > 0)
                            cells[cells.length - 1].w =
                                cw - cells[cells.length - 1].x;
                    } else if (layout === "vertical") {
                        const totalPriority = state.images.reduce(
                            (s, img) => s + img.priority,
                            0,
                        );
                        let y = 0;
                        for (let i = 0; i < n; i++) {
                            const frac =
                                state.images[i].priority / totalPriority;
                            const h = frac * ch;
                            cells.push({ x: 0, y, w: cw, h });
                            y += h;
                        }
                        if (cells.length > 0)
                            cells[cells.length - 1].h =
                                ch - cells[cells.length - 1].y;
                    } else if (layout === "masonry") {
                        cells = masonryLayout(n, cw);
                        // Auto-compute canvas height from content
                        const computedH =
                            cells.length > 0
                                ? Math.max(
                                      200,
                                      Math.ceil(
                                          Math.max(
                                              ...cells.map((c) => c.y + c.h),
                                          ),
                                      ),
                                  )
                                : ch;
                        state.canvasH = computedH;
                        els.canvasH.value = computedH;
                    } else if (layout === "hero-grid") {
                        cells = heroGridLayout(n, cw, ch);
                    } else if (layout === "hero-priority") {
                        cells = heroPriorityLayout(n, cw, ch);
                    }

                    return cells;
                }

                // ── 6b. bestGrid — Optimize equal-grid rows × columns ─────
                //     Picks the grid that minimizes a combined score of:
                //     - aspect-ratio mismatch  (cell vs avg image)
                //     - wasted empty cells
                function bestGrid(n, cw, ch) {
                    // Compute average image aspect ratio for better cell matching
                    let avgImgAspect = 1;
                    if (state.images.length > 0) {
                        const aspects = state.images.map(
                            (img) => img.width / Math.max(img.height, 1),
                        );
                        avgImgAspect =
                            aspects.reduce((a, b) => a + b, 0) / aspects.length;
                    }

                    let bestRows = 1,
                        bestCols = n;
                    let bestScore = Infinity;

                    for (let rows = 1; rows <= n; rows++) {
                        const cols = Math.ceil(n / rows);
                        const cellAspect = cw / cols / (ch / rows);

                        // Score: prefer layouts where cell aspect matches average image aspect
                        // and where the grid is well-filled
                        const emptyCells = rows * cols - n;
                        const aspectPenalty = Math.abs(
                            Math.log(Math.max(cellAspect / avgImgAspect, 0.01)),
                        );
                        const emptyPenalty = emptyCells / (rows * cols);

                        const score = aspectPenalty * 10 + emptyPenalty * 5;
                        if (score < bestScore) {
                            bestScore = score;
                            bestRows = rows;
                            bestCols = cols;
                        }
                    }

                    return { rows: bestRows, cols: bestCols };
                }

                // ── 6b1. masonryLayout — Pinterest-style flowing columns ──
                //     Fixed-width columns, images stacked top-to-bottom
                //     preserving natural aspect ratios. Each image is placed
                //     in the shortest column (greedy bin-packing).
                //     Canvas height is auto-computed from content.
                function masonryLayout(n, cw) {
                    // Auto-pick column count: ~√n, with min 1, max n
                    const cols =
                        n <= 1
                            ? 1
                            : Math.max(2, Math.min(n, Math.ceil(Math.sqrt(n))));
                    const colWidth = cw / cols;
                    const colHeights = new Array(cols).fill(0);
                    const cells = [];

                    for (let i = 0; i < n; i++) {
                        const img = state.images[i];
                        const aspect = img.width / Math.max(img.height, 1);
                        const cellH = colWidth / aspect;

                        // Find shortest column
                        let sc = 0;
                        for (let c = 1; c < cols; c++) {
                            if (colHeights[c] < colHeights[sc]) sc = c;
                        }

                        cells.push({
                            x: sc * colWidth,
                            y: colHeights[sc],
                            w: colWidth,
                            h: cellH,
                        });

                        colHeights[sc] += cellH;
                    }

                    return cells;
                }

                // ── 6b2. heroGridLayout — Large hero + compact grid ────────
                //     Image 0 gets a prominent left-column area (55% of
                //     canvas width, full height). The remaining images fill
                //     the right side using bestGrid().
                function heroGridLayout(n, cw, ch) {
                    const cells = new Array(n);
                    if (n === 0) return cells;

                    const heroFrac = 0.55;
                    const heroW = cw * heroFrac;
                    const gridW = cw - heroW;

                    // Hero image (index 0) — full height, left side
                    cells[0] = { x: 0, y: 0, w: heroW, h: ch };

                    // Remaining images — equal grid on the right side
                    const nRemaining = n - 1;
                    if (nRemaining > 0) {
                        const { rows, cols } = bestGrid(nRemaining, gridW, ch);
                        const cellW = gridW / cols;
                        const cellH = ch / rows;
                        for (let i = 0; i < nRemaining; i++) {
                            const row = Math.floor(i / cols);
                            const col = i % cols;
                            cells[i + 1] = {
                                x: heroW + col * cellW,
                                y: row * cellH,
                                w: cellW,
                                h: cellH,
                            };
                        }
                    }

                    return cells;
                }

                // ── 6b3. heroPriorityLayout — Aspect-aware hero + treemap ─
                //     Image 0 is the hero. Its area equals priority/100 of the
                //     canvas (independent of other images). The cell's aspect
                //     ratio is derived from the hero image's natural shape.
                //     Remaining images fill the right strip (beside the hero)
                //     and bottom strip (below the hero) using squarify,
                //     allocated proportionally by region area.
                function heroPriorityLayout(n, cw, ch) {
                    const cells = new Array(n);
                    if (n === 0) return cells;
                    if (n === 1) {
                        cells[0] = { x: 0, y: 0, w: cw, h: ch };
                        return cells;
                    }

                    const heroP = state.images[0].priority;

                    // Hero area proportional to its slider (heroP / 100 of canvas)
                    const heroArea = (heroP / 100) * cw * ch;
                    const img0 = state.images[0];
                    const heroAspect = img0.width / Math.max(img0.height, 1);
                    let heroW = Math.sqrt(heroArea * heroAspect);
                    let heroH = heroArea / heroW;
                    heroW = Math.min(heroW, cw);
                    heroH = Math.min(heroH, ch);

                    cells[0] = { x: 0, y: 0, w: heroW, h: heroH };

                    const nRem = n - 1;
                    if (nRem === 0) return cells;

                    // Two remaining regions: right strip and bottom strip
                    const rightW = cw - heroW;
                    const rightH = heroH;
                    const bottomW = cw;
                    const bottomH = ch - heroH;
                    const rightArea = rightW * rightH;
                    const bottomArea = bottomW * bottomH;
                    const totalRemArea = rightArea + bottomArea;

                    if (totalRemArea <= 0) return cells;

                    // Allocate remaining images proportionally by region area
                    const rightCount = Math.max(
                        0,
                        Math.min(
                            nRem,
                            rightArea > 0
                                ? Math.round((rightArea / totalRemArea) * nRem)
                                : 0,
                        ),
                    );
                    const bottomCount = nRem - rightCount;

                    // Right strip — first rightCount images after the hero
                    if (rightCount > 0 && rightArea > 0) {
                        const rightImgs = state.images.slice(1, 1 + rightCount);
                        const rightP = rightImgs.reduce(
                            (s, img) => s + img.priority,
                            0,
                        );
                        if (rightP > 0) {
                            squarify(
                                rightImgs.map((img, i) => ({
                                    area: (img.priority / rightP) * rightArea,
                                    idx: 1 + i,
                                })),
                                heroW,
                                0,
                                rightW,
                                rightH,
                                cells,
                            );
                        }
                    }

                    // Bottom strip — remaining images
                    if (bottomCount > 0 && bottomArea > 0) {
                        const bottomImgs = state.images.slice(
                            1 + rightCount,
                            1 + rightCount + bottomCount,
                        );
                        const bottomP = bottomImgs.reduce(
                            (s, img) => s + img.priority,
                            0,
                        );
                        if (bottomP > 0) {
                            squarify(
                                bottomImgs.map((img, i) => ({
                                    area: (img.priority / bottomP) * bottomArea,
                                    idx: 1 + rightCount + i,
                                })),
                                0,
                                heroH,
                                bottomW,
                                bottomH,
                                cells,
                            );
                        }
                    }

                    return cells;
                }

                // ── 6c. priorityGridLayout — Treemap area distribution ────
                //     Allocates canvas area proportional to each image's
                //     priority value while preserving the original order.
                function priorityGridLayout(n, cw, ch) {
                    // Distribute area proportionally to priority, preserving image order
                    const totalPriority = state.images.reduce(
                        (s, img) => s + img.priority,
                        0,
                    );
                    const totalArea = cw * ch;
                    const items = state.images.map((img, i) => ({
                        area: (img.priority / totalPriority) * totalArea,
                        idx: i,
                    }));

                    const cells = new Array(n);
                    squarify(items, 0, 0, cw, ch, cells);
                    return cells;
                }

                // ── 6d. squarify — Recursive ordered treemap ──────────────
                //     Recursively splits a rectangle along its shorter axis,
                //     choosing the split point that minimizes aspect-ratio
                //     distortion across both child rectangles.
                //     Preserves original item order throughout.
                function squarify(items, x, y, w, h, out) {
                    if (items.length === 0) return;
                    if (items.length === 1) {
                        out[items[0].idx] = { x, y, w, h };
                        return;
                    }

                    const totalArea = items.reduce((s, it) => s + it.area, 0);
                    if (totalArea <= 0) return;

                    const rectAspect = w / h;

                    // Find the best split point that optimizes aspect ratios of the two sub-rectangles
                    let bestSplit = 1;
                    let bestScore = Infinity;
                    let runningSum = 0;

                    for (let i = 0; i < items.length - 1; i++) {
                        runningSum += items[i].area;
                        const frac = runningSum / totalArea;

                        let score;
                        if (rectAspect >= 1) {
                            // Split vertically: left gets frac*width, right gets (1-frac)*width
                            const leftAspect = (w * frac) / h;
                            const rightAspect = (w * (1 - frac)) / h;
                            score =
                                Math.abs(Math.log(Math.max(leftAspect, 0.01))) +
                                Math.abs(Math.log(Math.max(rightAspect, 0.01)));
                        } else {
                            // Split horizontally: top gets frac*height, bottom gets (1-frac)*height
                            const topAspect = w / (h * frac);
                            const bottomAspect = w / (h * (1 - frac));
                            score =
                                Math.abs(Math.log(Math.max(topAspect, 0.01))) +
                                Math.abs(
                                    Math.log(Math.max(bottomAspect, 0.01)),
                                );
                        }

                        if (score < bestScore) {
                            bestScore = score;
                            bestSplit = i + 1;
                        }
                    }

                    const leftItems = items.slice(0, bestSplit);
                    const rightItems = items.slice(bestSplit);
                    const leftSum = leftItems.reduce((s, it) => s + it.area, 0);
                    const frac = leftSum / totalArea;

                    if (rectAspect >= 1) {
                        squarify(leftItems, x, y, w * frac, h, out);
                        squarify(
                            rightItems,
                            x + w * frac,
                            y,
                            w * (1 - frac),
                            h,
                            out,
                        );
                    } else {
                        squarify(leftItems, x, y, w, h * frac, out);
                        squarify(
                            rightItems,
                            x,
                            y + h * frac,
                            w,
                            h * (1 - frac),
                            out,
                        );
                    }
                }

                // ── 7a. rebuildCollage — Render the collage DOM preview ────
                function rebuildCollage() {
                    const n = state.images.length;

                    if (n === 0) {
                        els.emptyState.style.display = "";
                        els.collageContainer.style.display = "none";
                        els.mainHeader.style.display = "none";
                        els.scaleInfo.style.display = "none";
                        els.downloadBtn.disabled = true;
                        return;
                    }

                    els.emptyState.style.display = "none";
                    els.collageContainer.style.display = "";
                    els.mainHeader.style.display = "";
                    els.scaleInfo.style.display = "";
                    els.downloadBtn.disabled = false;

                    const cells = computeLayout();
                    if (!cells) return;

                    // Determine display scale to fit in viewport
                    const maxW = els.mainArea.clientWidth - 40;
                    const maxH = els.mainArea.clientHeight - 60;
                    const scale = Math.min(
                        1,
                        maxW / state.canvasW,
                        maxH / state.canvasH,
                    );

                    els.collageContainer.style.width =
                        state.canvasW * scale + "px";
                    els.collageContainer.style.height =
                        state.canvasH * scale + "px";
                    els.scaleLabel.textContent =
                        scale < 0.99
                            ? `(${Math.round(scale * 100)}% scale)`
                            : "";
                    els.scaleInfo.textContent = `${state.canvasW}×${state.canvasH}px`;

                    // Build grid using absolute positioning for precise cell placement
                    const grid = els.collageGrid;
                    grid.innerHTML = "";
                    grid.style.position = "relative";
                    grid.style.width = "100%";
                    grid.style.height = "100%";

                    cells.forEach((cell, i) => {
                        const img = state.images[i];
                        const cellEl = document.createElement("div");
                        cellEl.className =
                            "collage-cell" +
                            (state.activeCellIndex === i ? " active" : "");
                        cellEl.style.position = "absolute";
                        cellEl.style.left =
                            (cell.x / state.canvasW) * 100 + "%";
                        cellEl.style.top = (cell.y / state.canvasH) * 100 + "%";
                        cellEl.style.width =
                            (cell.w / state.canvasW) * 100 + "%";
                        cellEl.style.height =
                            (cell.h / state.canvasH) * 100 + "%";
                        cellEl.dataset.index = i;

                        // Image element
                        const imgEl = document.createElement("img");
                        imgEl.src = img.url;
                        imgEl.draggable = false;

                        // Calculate cover-fit dimensions (CSS object-fit: cover equivalent)
                        // The image is sized so it completely fills the cell while
                        // maintaining its aspect ratio. The overflow is hidden and
                        // positioned via cropX/cropY.
                        const cellAspect = cell.w / cell.h;
                        const imgAspect = img.width / img.height;

                        let imgW, imgH;
                        if (imgAspect > cellAspect) {
                            // Image is wider-than-cell → match cell height, overflow horizontally
                            imgH = 100; // percentage of cell height
                            imgW =
                                cellAspect > 0
                                    ? (imgAspect / cellAspect) * 100
                                    : 100;
                        } else {
                            // Image is taller-than-cell → match cell width, overflow vertically
                            imgW = 100;
                            imgH =
                                imgAspect > 0
                                    ? (cellAspect / imgAspect) * 100
                                    : 100;
                        }

                        imgEl.style.width = imgW + "%";
                        imgEl.style.height = imgH + "%";
                        imgEl.style.position = "absolute";

                        // Apply crop offset
                        updateImagePosition(imgEl, img, imgW, imgH);

                        cellEl.appendChild(imgEl);

                        // Number badge
                        const badge = document.createElement("span");
                        badge.className = "cell-number";
                        badge.textContent = i + 1;
                        cellEl.appendChild(badge);

                        // Crop hint — arrow matches the draggable direction
                        // Use short form (arrow only) when the cell is too narrow
                        if (Math.abs(imgAspect - cellAspect) > 0.01) {
                            const hint = document.createElement("span");
                            hint.className = "crop-hint";
                            const arrow = imgAspect > cellAspect ? "↔" : "↕";
                            hint.textContent =
                                cell.w * scale >= 110
                                    ? arrow + " Drag to adjust crop"
                                    : arrow;
                            hint.style.display = "none";
                            cellEl.appendChild(hint);
                        }

                        // Click to select
                        cellEl.addEventListener("click", (e) => {
                            selectCell(i);
                        });

                        // Drag to adjust crop
                        cellEl.addEventListener("mousedown", (e) =>
                            startCrop(e, cellEl, i, imgW, imgH),
                        );
                        cellEl.addEventListener(
                            "touchstart",
                            (e) => startCrop(e, cellEl, i, imgW, imgH),
                            { passive: false },
                        );

                        // Show hint on hover when selected
                        cellEl.addEventListener("mouseenter", () => {
                            const hint = cellEl.querySelector(".crop-hint");
                            if (hint && state.activeCellIndex === i)
                                hint.style.display = "";
                        });
                        cellEl.addEventListener("mouseleave", () => {
                            const hint = cellEl.querySelector(".crop-hint");
                            if (hint) hint.style.display = "none";
                        });

                        grid.appendChild(cellEl);
                    });
                }

                // ── 7b. updateImagePosition — Apply crop offset to an image ───
                function updateImagePosition(
                    imgEl,
                    imgData,
                    imgWPercent,
                    imgHPercent,
                ) {
                    // cropX and cropY are 0-100 representing the position
                    // 50 = centered, 0 = left/top edge, 100 = right/bottom edge
                    const ox = (imgWPercent - 100) * (imgData.cropX / 100);
                    const oy = (imgHPercent - 100) * (imgData.cropY / 100);
                    imgEl.style.left = -ox + "%";
                    imgEl.style.top = -oy + "%";
                }

                // ── 7c. selectCell — Toggle cell selection for cropping ────
                function selectCell(index) {
                    state.activeCellIndex =
                        state.activeCellIndex === index ? null : index;
                    // Re-render to show active state and hints
                    rebuildCollage();
                    renderImageList();
                }

                // ── 8a. startCrop — Unified mouse/touch crop handler ─────
                //     Attaches mousemove/touchmove listeners that translate
                //     pointer deltas into cropX/cropY percentage offsets.
                //     Supports horizontal, vertical, and both-axes dragging
                //     depending on the image-vs-cell aspect ratio.
                function startCrop(e, cellEl, index, imgW, imgH) {
                    if (e.type === "mousedown" && e.button !== 0) return;
                    if (e.type === "touchstart" && e.touches.length !== 1)
                        return;

                    const isTouch = e.type === "touchstart";
                    const getPt = (ev) =>
                        isTouch
                            ? {
                                  x: ev.touches[0].clientX,
                                  y: ev.touches[0].clientY,
                              }
                            : { x: ev.clientX, y: ev.clientY };

                    const imgData = state.images[index];
                    if (!imgData) return;

                    state.activeCellIndex = index;
                    cellEl.classList.add("active");

                    const hint = cellEl.querySelector(".crop-hint");
                    if (!isTouch && hint) hint.style.display = "";

                    const pt = getPt(e);
                    const startX = pt.x;
                    const startY = pt.y;
                    const startCropX = imgData.cropX;
                    const startCropY = imgData.cropY;
                    const rect = cellEl.getBoundingClientRect();

                    const cellAspect = rect.width / rect.height;
                    const imgAspect = imgData.width / imgData.height;
                    const canDragX = imgAspect > cellAspect + 0.01;
                    const canDragY = imgAspect < cellAspect - 0.01;
                    const canDragBoth =
                        Math.abs(imgAspect - cellAspect) <= 0.01;

                    if (!canDragX && !canDragY && !canDragBoth) return;

                    function onMove(ev) {
                        const p = getPt(ev);
                        const dx = p.x - startX;
                        const dy = p.y - startY;

                        let newCropX = startCropX;
                        let newCropY = startCropY;

                        if (canDragX || canDragBoth) {
                            const overflowPx = rect.width * (imgW / 100 - 1);
                            if (overflowPx > 0.1) {
                                newCropX = Math.max(
                                    0,
                                    Math.min(
                                        100,
                                        startCropX - (dx / overflowPx) * 100,
                                    ),
                                );
                            }
                        }
                        if (canDragY || canDragBoth) {
                            const overflowPx = rect.height * (imgH / 100 - 1);
                            if (overflowPx > 0.1) {
                                newCropY = Math.max(
                                    0,
                                    Math.min(
                                        100,
                                        startCropY - (dy / overflowPx) * 100,
                                    ),
                                );
                            }
                        }

                        imgData.cropX = newCropX;
                        imgData.cropY = newCropY;

                        const imgEl = cellEl.querySelector("img");
                        if (imgEl)
                            updateImagePosition(imgEl, imgData, imgW, imgH);
                        renderImageListQuick();
                    }

                    function onUp() {
                        const moveType = isTouch ? "touchmove" : "mousemove";
                        const upType = isTouch ? "touchend" : "mouseup";
                        document.removeEventListener(moveType, onMove);
                        document.removeEventListener(upType, onUp);
                        if (!isTouch) {
                            document.body.style.cursor = "";
                            if (hint) hint.style.display = "none";
                        }
                        rebuildCollage();
                        renderImageList();
                    }

                    document.addEventListener(
                        isTouch ? "touchmove" : "mousemove",
                        onMove,
                        isTouch ? { passive: false } : undefined,
                    );
                    document.addEventListener(
                        isTouch ? "touchend" : "mouseup",
                        onUp,
                    );

                    if (!isTouch) {
                        document.body.style.cursor =
                            canDragX && canDragY
                                ? "move"
                                : canDragX
                                  ? "ew-resize"
                                  : "ns-resize";
                    }
                    e.preventDefault();
                }

                // ── 8b. renderImageListQuick — Lightweight slider sync ────
                //     Updates priority labels and sliders in-place without
                //     rebuilding the entire image list DOM. Called during
                //     crop drag for performance.
                function renderImageListQuick() {
                    const items = $$(".image-item");
                    items.forEach((item, i) => {
                        if (i >= state.images.length) return;
                        const label = item.querySelector(".priority-label");
                        const slider = item.querySelector(".prio-slider");
                        if (label) label.textContent = state.images[i].priority;
                        if (slider) slider.value = state.images[i].priority;
                    });
                }

                // ── 9a. downloadCollage — High-resolution export ─────────
                els.downloadBtn.addEventListener("click", downloadCollage);

                function downloadCollage() {
                    const n = state.images.length;
                    if (n === 0) return;

                    const cells = computeLayout();
                    if (!cells) return;

                    const cw = state.canvasW;
                    const ch = state.canvasH;

                    // Show loading state
                    const origText = els.downloadBtn.textContent;
                    els.downloadBtn.textContent = "⏳ Rendering...";
                    els.downloadBtn.disabled = true;

                    const canvas = document.createElement("canvas");
                    canvas.width = cw;
                    canvas.height = ch;
                    const ctx = canvas.getContext("2d");

                    // Background — transparent for PNG, opaque fill for JPEG
                    if (els.exportFormat.value !== "png") {
                        ctx.fillStyle = "#111111";
                        ctx.fillRect(0, 0, cw, ch);
                    }

                    // Image resampling quality — "high" uses a better
                    // downscaling filter (less soft, fewer artifacts)
                    ctx.imageSmoothingQuality =
                        els.exportFormat.value === "jpeg-low" ? "low" : "high";

                    // Load and draw all images
                    let loaded = 0;
                    const imageObjects = [];

                    state.images.forEach((imgData, i) => {
                        const img = new Image();
                        img.crossOrigin = "anonymous";
                        img.onload = () => {
                            imageObjects[i] = img;
                            loaded++;
                            if (loaded === n) drawAll();
                        };
                        img.onerror = () => {
                            loaded++;
                            if (loaded === n) drawAll();
                        };
                        img.src = imgData.url;
                    });

                    function drawAll() {
                        cells.forEach((cell, i) => {
                            const img = imageObjects[i];
                            if (!img) return;

                            const cellAspect = cell.w / cell.h;
                            const imgAspect =
                                img.naturalWidth / img.naturalHeight;

                            // Source rectangle (sx, sy, sw, sh): which portion of
                            // the full-resolution image to sample, in natural pixels.
                            // This mirrors the cover-fit logic from the preview,
                            // plus the crop offset.
                            let sx, sy, sw, sh;

                            if (imgAspect > cellAspect) {
                                // Image wider than cell: crop left/right edges
                                const drawW = cell.h * imgAspect;
                                sw = img.naturalWidth * (cell.w / drawW);
                                sh = img.naturalHeight;
                                sx =
                                    (img.naturalWidth - sw) *
                                    (state.images[i].cropX / 100);
                                sy = 0;
                            } else {
                                // Image taller than cell: crop top/bottom edges
                                const drawH = cell.w / imgAspect;
                                sw = img.naturalWidth;
                                sh = img.naturalHeight * (cell.h / drawH);
                                sx = 0;
                                sy =
                                    (img.naturalHeight - sh) *
                                    (state.images[i].cropY / 100);
                            }

                            ctx.save();
                            ctx.beginPath();
                            ctx.rect(cell.x, cell.y, cell.w, cell.h);
                            ctx.clip();
                            ctx.drawImage(
                                img,
                                sx,
                                sy,
                                sw,
                                sh,
                                cell.x,
                                cell.y,
                                cell.w,
                                cell.h,
                            );
                            ctx.restore();

                            // Cell border
                            ctx.strokeStyle = "rgba(255,255,255,0.08)";
                            ctx.lineWidth = 1;
                            ctx.strokeRect(cell.x, cell.y, cell.w, cell.h);
                        });

                        // Trigger download
                        const fmt = els.exportFormat.value;
                        const isPng = fmt === "png";
                        const mime = isPng ? "image/png" : "image/jpeg";
                        const ext = isPng ? "png" : "jpg";
                        const quality =
                            fmt === "jpeg-high"
                                ? 0.92
                                : fmt === "jpeg-low"
                                  ? 0.65
                                  : undefined;
                        canvas.toBlob(
                            (blob) => {
                                const url = URL.createObjectURL(blob);
                                const a = document.createElement("a");
                                a.href = url;
                                a.download = `collage_${cw}x${ch}.${ext}`;
                                document.body.appendChild(a);
                                a.click();
                                document.body.removeChild(a);
                                URL.revokeObjectURL(url);

                                // Restore button
                                els.downloadBtn.textContent = origText;
                                els.downloadBtn.disabled = false;
                            },
                            mime,
                            quality,
                        );
                    }
                }

                // ── 10. Keyboard Shortcuts ────────────────────────────────
                document.addEventListener("keydown", (e) => {
                    if (
                        e.target.tagName === "INPUT" ||
                        e.target.tagName === "SELECT"
                    )
                        return;

                    if (e.key === "Escape") {
                        state.activeCellIndex = null;
                        rebuildCollage();
                        renderImageList();
                    }

                    // Arrow keys move the image in the pressed direction
                    if (
                        state.activeCellIndex !== null &&
                        state.images[state.activeCellIndex]
                    ) {
                        const img = state.images[state.activeCellIndex];
                        const step = 5;
                        // ArrowRight → image moves right → reveals more of left side
                        if (e.key === "ArrowRight") {
                            img.cropX = Math.max(0, img.cropX - step);
                            rebuildCollage();
                            e.preventDefault();
                        }
                        // ArrowLeft → image moves left → reveals more of right side
                        if (e.key === "ArrowLeft") {
                            img.cropX = Math.min(100, img.cropX + step);
                            rebuildCollage();
                            e.preventDefault();
                        }
                        // ArrowDown → image moves down → reveals more of top
                        if (e.key === "ArrowDown") {
                            img.cropY = Math.max(0, img.cropY - step);
                            rebuildCollage();
                            e.preventDefault();
                        }
                        // ArrowUp → image moves up → reveals more of bottom
                        if (e.key === "ArrowUp") {
                            img.cropY = Math.min(100, img.cropY + step);
                            rebuildCollage();
                            e.preventDefault();
                        }
                        if (e.key === "r" || e.key === "R") {
                            img.cropX = 50;
                            img.cropY = 50;
                            img.priority = 50;
                            rebuildCollage();
                            renderImageList();
                            e.preventDefault();
                        }
                    }
                });

                // ── 11. Cleanup: re-enable drag after slider ─────────────
                document.addEventListener("mouseup", () => {
                    $$(".image-item").forEach((el) => (el.draggable = true));
                });
                document.addEventListener("touchend", () => {
                    $$(".image-item").forEach((el) => (el.draggable = true));
                });

                // ── 11b. Window Resize — Reflow preview ──────────────────
                window.addEventListener("resize", () => {
                    if (state.images.length > 0) rebuildCollage();
                });

                // ── 12. Initialization ───────────────────────────────────
                renderImageList();
                rebuildCollage();

                // Sync height-row visibility with layout (in case the browser
                // restored a non-default layout selection on reload)
                els.layoutSelect.dispatchEvent(new Event("change"));

                console.log("[Quilt] ready!");
                console.log("  - Import images to get started");
                console.log("  - Drag & drop to reorder images");
                console.log("  - Use priority sliders to control image sizes");
                console.log(
                    "  - Click a cell in the collage, then drag to adjust crop",
                );
                console.log("  - Arrow keys for fine crop adjustment");
                console.log("  - Press Escape to deselect");
            })();
        </script>
    </body>
</html>