syntaxmatrix 2.6.4.4__py3-none-any.whl → 3.0.1__py3-none-any.whl

syntaxmatrix/page_builder_generation.py

@@ -5,13 +5,12 @@ import io
 import os
 import re
 from typing import Any, Dict, List, Optional, Tuple
-
 import requests
-from PIL import Image
 from bs4 import BeautifulSoup
+from PIL import Image
 
-PIXABAY_API_URL = "https://pixabay.com/api/"
 
+PIXABAY_API_URL = "https://pixabay.com/api/"
 
 # ─────────────────────────────────────────────────────────
 # Icons (inline SVG)
@@ -373,9 +372,21 @@ def fill_layout_images_from_pixabay(
 
     return layout
 
+def _make_thumb(full_path: str, thumb_path: str, max_w: int = 640, max_h: int = 420) -> bool:
+    """
+    Create a JPEG/PNG thumbnail that fits within max_w x max_h, preserving aspect ratio.
+    Returns True if created.
+    """
+    try:
+        os.makedirs(os.path.dirname(thumb_path), exist_ok=True)
+        with Image.open(full_path) as im:
+            im = im.convert("RGB") if im.mode in ("P", "RGBA") else im
+            im.thumbnail((max_w, max_h))
+            im.save(thumb_path, quality=82, optimize=True)
+        return True
+    except Exception:
+        return False
 
-import re
-from typing import Dict, Any, Optional
 
 def _extract_hero_image_url_from_layout(layout: Dict[str, Any]) -> str:
     """Find hero image URL from the saved layout JSON (builder)."""
@@ -710,34 +721,135 @@ def _theme_style_from_layout(layout: Dict[str, Any]) -> str:
 # ─────────────────────────────────────────────────────────
 # Compile layout JSON → modern HTML with animations
 # ─────────────────────────────────────────────────────────
+_ALLOWED_RICH_TAGS = {
+    "p", "br", "strong", "b", "em", "i", "u",
+    "ul", "ol", "li", "hr",
+    "span", "div",
+    "a",
+}
+
+_ALLOWED_ATTRS = {
+    "span": {"style"},
+    "div": {"style"},
+    "p": {"style"},
+    "a": {"href", "target", "rel"},
+}
+
+_ALLOWED_STYLE_PROPS = {
+    "color",
+    "background-color",
+    "font-size",
+    "font-weight",
+    "font-style",
+    "text-decoration",
+    "text-align",
+}
+
+_COLOR_RE = re.compile(r"^(#[0-9a-fA-F]{3,8}|rgb\([^\)]*\)|rgba\([^\)]*\)|hsl\([^\)]*\)|hsla\([^\)]*\))$")
+_SIZE_RE = re.compile(r"^\d+(\.\d+)?(px|rem|em|%)$")
+
+
+def _sanitize_style(style: str) -> str:
+    if not style:
+        return ""
+    out = []
+    # split "a:b; c:d"
+    for part in style.split(";"):
+        if ":" not in part:
+            continue
+        k, v = part.split(":", 1)
+        k = k.strip().lower()
+        v = v.strip()
+        if k not in _ALLOWED_STYLE_PROPS:
+            continue
+
+        if k in ("color", "background-color"):
+            if not _COLOR_RE.match(v):
+                continue
+
+        if k == "font-size":
+            if not _SIZE_RE.match(v):
+                continue
+
+        if k == "text-align":
+            vv = v.lower()
+            if vv not in ("left", "center", "right", "justify"):
+                continue
+            v = vv
+
+        out.append(f"{k}:{v}")
+    return ";".join(out)
+
+
+def _sanitize_rich_html(html: str) -> str:
+    if not html:
+        return ""
+
+    soup = BeautifulSoup(html, "html.parser")
+
+    # hard remove scripts/styles
+    for bad in soup(["script", "style"]):
+        bad.decompose()
+
+    for tag in list(soup.find_all(True)):
+        name = (tag.name or "").lower()
+
+        if name not in _ALLOWED_RICH_TAGS:
+            tag.unwrap()
+            continue
+
+        # strip attrs
+        allowed = _ALLOWED_ATTRS.get(name, set())
+        attrs = dict(tag.attrs) if tag.attrs else {}
+        for a in list(attrs.keys()):
+            if a not in allowed:
+                tag.attrs.pop(a, None)
+
+        # style sanitise
+        if "style" in tag.attrs:
+            s = _sanitize_style(tag.get("style") or "")
+            if s:
+                tag["style"] = s
+            else:
+                tag.attrs.pop("style", None)
+
+        # link sanitise
+        if name == "a":
+            href = (tag.get("href") or "").strip()
+            low = href.lower()
+            if low.startswith("javascript:") or low.startswith("data:"):
+                tag.attrs.pop("href", None)
+            tag["rel"] = "noopener noreferrer"
+
+            # if target set, ensure it’s safe
+            if tag.get("target") and tag.get("target") != "_blank":
+                tag.attrs.pop("target", None)
+
+    return str(soup)
+
+
+def _safe_align(val: str) -> str:
+    v = (val or "").strip().lower()
+    return v if v in ("left", "center", "right", "justify") else ""
+
+
 def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
     page_id = re.sub(r"[^a-z0-9\-]+", "-", (page_slug or "page").lower()).strip("-") or "page"
 
     css = """
     <style>
-        .smxp{--r:18px;--bd:rgba(148,163,184,.28);--mut:#94a3b8;--fg:#0f172a;--card:rgba(255,255,255,.72);
         .smxp{
             --r:18px;
             --bd: rgba(148,163,184,.25);
             --fg: #0f172a;
-            --mut: #475569;                 /* <- darker, readable */
+            --mut:#000000;                /* <- darker, readable */
             --card: rgba(255,255,255,.78);
             --bg: #f8fafc;
             font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
             background: var(--bg);
-            color: var(--fg);
             overflow-x: clip;
         }
-        @media (prefers-color-scheme: dark){
-            .smxp{
-                --fg:#e2e8f0;
-                --mut:#a7b3c6;
-                --card:rgba(2,6,23,.45);
-                --bg: radial-gradient(circle at 20% 10%, rgba(30,64,175,.25), rgba(2,6,23,.95) 55%);
-                --bd: rgba(148,163,184,.18);
-            }
-        }
-
+       
         font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--fg); }
         @media (prefers-color-scheme: dark){
         .smxp{--fg:#e2e8f0;--card:rgba(2,6,23,.45);--bd:rgba(148,163,184,.18);--mut:#a7b3c6;}
@@ -759,7 +871,31 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
         .smxp .btn:hover{transform:translateY(-1px)}
         .smxp .grid{display:grid;gap:12px}
         .smxp .card{border:1px solid var(--bd);border-radius:var(--r);background:var(--card);padding:14px;min-width:0}
-        .smxp .card h3{margin:10px 0 6px;font-size:1.05rem}
+        .smxp .card h3{
+            margin:10px 0 6px;
+            font-size:1.05rem;
+            line-height:1.25;
+            display:-webkit-box;
+            -webkit-line-clamp:2;
+            -webkit-box-orient:vertical;
+            overflow:hidden;
+        }
+        .smxp .smx-rich{
+            margin-top:8px;
+            color: var(--mut);
+            line-height:1.65;
+        }
+        .smxp .smx-rich p{margin:0 0 10px}
+        .smxp .smx-rich ul, .smxp .smx-rich ol{margin:0 0 10px 22px}
+        .smxp .smx-rich hr{
+            border:0;
+            border-top:1px solid var(--bd);
+            margin:14px 0;
+        }
+        .smxp .card p{
+            white-space: pre-wrap;     /* ✅ preserve new lines */
+            overflow-wrap: anywhere;
+        }
         .smxp .icon{width:20px;height:20px;opacity:.9}
         .smxp img{width:100%;height:auto;border-radius:calc(var(--r) - 6px);display:block}
         .smxp .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease, transform .55s ease}
@@ -767,20 +903,20 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
 
         .smxp .hero{ padding:0; }
         .smxp .hero-banner{
-        position:relative;
-        width:100%;
-        min-height:clamp(380px, 60vh, 680px);
-        display:flex;
-        align-items:flex-end;
-        overflow:hidden;
+            position:relative;
+            width:100%;
+            min-height:clamp(380px, 60vh, 680px);
+            display:flex;
+            align-items:flex-end;
+            overflow:hidden;
         }
         .smxp .hero-bg{
-        position:absolute; inset:0;
-        background-position:center;
-        background-size:cover;
-        background-repeat:no-repeat;
-        transform:scale(1.02);
-        filter:saturate(1.02);
+            position:absolute; inset:0;
+            background-position:center;
+            background-size:cover;
+            background-repeat:no-repeat;
+            transform:scale(1.02);
+            filter:saturate(1.02);
         }
         .smxp .hero-overlay{
             position:absolute; inset:0;
@@ -802,18 +938,205 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
         }
         .smxp .hero-content{ position:relative; width:100%; padding:72px 18px 48px; }
         .smxp .hero-panel{
-        max-width:760px;
-        border:1px solid var(--bd);
-        background:rgba(255,255,255,.80);
-        border-radius:var(--r);
-        padding:18px;
-        backdrop-filter: blur(10px);
+            max-width:760px;
+            border:1px solid rgba(148,163,184,.30);
+            background: rgba(2,6,23,.16);              /* VERY transparent */
+            border-radius:var(--r);
+            padding:18px;
+
+            -webkit-backdrop-filter: blur(18px) saturate(155%);
+            backdrop-filter: blur(18px) saturate(155%);
+
+            box-shadow: 0 18px 45px rgba(2,6,23,.26);
+            color: rgba(248,250,252,.96);
         }
-        @media (prefers-color-scheme: dark){
-        .smxp .hero-panel{ background:rgba(2,6,23,.58); }
+
+        .smxp .hero-panel p{ color: rgba(226,232,240,.84); }
+        .smxp .hero-panel h1{
+            color: rgba(248,250,252,.98);
+            text-shadow: 0 10px 30px rgba(2,6,23,.45);
+        }
+        .smxp .hero-panel .kicker{
+            color: rgba(165,180,252,.95);
+            text-transform: uppercase;
+            letter-spacing: .18em;
+        }
+
+        .smxp .hero-panel .btn{
+            background: rgba(15,23,42,.42);
+            border-color: rgba(148,163,184,.45);
+            color: rgba(248,250,252,.96);
+        }
+        .smxp .hero-panel .btn-primary{
+            background: rgba(79,70,229,.92);
+            border-color: rgba(129,140,248,.70);
+        }
+
+    </style>
+    """.strip()
+
+    gallery_css = """
+    <style>
+        /* Gallery: horizontal rail (ONLY) */
+        .smxp section[data-section-type="gallery"] .grid{
+            display:flex !important;
+            gap:14px;
+            overflow-x:auto;
+            padding: 6px 2px 12px;
+            scroll-snap-type:x mandatory;
+            -webkit-overflow-scrolling: touch;
+            scrollbar-gutter: stable;
+        }
+        /* IMAGE tiles (true gallery items) */
+        .smxp section[data-section-type="gallery"] .gimg{
+            flex: 0 0 auto;
+            width: clamp(220px, 30vw, 380px);
+            aspect-ratio: 16 / 10;
+            scroll-snap-align: start;
+            cursor: zoom-in;
+            border:1px solid var(--bd);
+            border-radius: var(--r);
+            background: var(--card);
+            overflow:hidden;
+            position:relative;
+        }
+        .smxp section[data-section-type="gallery"] .gimg img{
+            width:100%;
+            height:100%;
+            object-fit: cover;
+            border-radius: 0; /* tile already rounds */
+        }
+        .smxp section[data-section-type="gallery"] .gimg figcaption{
+            position:absolute;
+            left:0; right:0; bottom:0;
+            padding:10px 12px;
+            background: linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,.55) 55%, rgba(2,6,23,.78) 100%);
+            color: rgba(255,255,255,.92);
+            font-weight: 700;
+            font-size: .92rem;
+            line-height: 1.2;
+            opacity: 0;
+            transform: translateY(6px);
+            transition: opacity .16s ease, transform .16s ease;
+            pointer-events:none;
+        }
+        .smxp section[data-section-type="gallery"] .gimg:hover figcaption{
+            opacity:1;
+            transform:none;
+        }
+
+        /* CARD items inside a gallery rail stay as content cards (not lightbox) */
+        .smxp section[data-section-type="gallery"] .card{
+            flex: 0 0 auto;
+            width: clamp(260px, 34vw, 420px);
+            scroll-snap-align: start;
+            cursor: default;
+        }
+
+        @media (max-width: 860px){
+            .smxp section[data-section-type="gallery"] .gimg{ width: 86vw; }
+            .smxp section[data-section-type="gallery"] .card{ width: 86vw; }
         }
-        .smxp .lead{ margin-top:10px; font-size:1.05rem; line-height:1.65; }
 
+        /* Rail nav buttons (injected by JS) */
+        .smxp .smx-gallery-wrap{ position:relative; }
+        .smxp .smx-gallery-nav{
+            position:absolute;
+            top:50%;
+            transform:translateY(-50%);
+            width:38px;
+            height:38px;
+            border-radius:999px;
+            border:1px solid var(--bd);
+            background: rgba(255,255,255,.82);
+            color: var(--fg);
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            cursor:pointer;
+            z-index: 5;
+            box-shadow: 0 10px 24px rgba(15,23,42,.12);
+        }
+        .smxp .smx-gallery-nav:hover{ transform:translateY(-50%) scale(1.03); }
+        .smxp .smx-gallery-nav:active{ transform:translateY(-50%) scale(.98); }
+        .smxp .smx-gallery-nav.prev{ left: 10px; }
+        .smxp .smx-gallery-nav.next{ right: 10px; }
+        .smxp .smx-gallery-nav[disabled]{ opacity:.35; cursor:default; }
+
+        /* Lightbox (“lightbulb”) overlay */
+        .smxp .smx-lightbox{
+            position:fixed; inset:0;
+            display:none;
+            align-items:center;
+            justify-content:center;
+            padding: 20px;
+            background: rgba(2,6,23,.72);
+            z-index: 9999;
+        }
+        .smxp .smx-lightbox.open{ display:flex; }
+
+        .smxp .smx-lightbox-panel{
+            width:min(1100px, 96vw);
+            max-height: 92vh;
+            border-radius: 16px;
+            border: 1px solid rgba(148,163,184,.28);
+            background: rgba(255,255,255,.95);
+            overflow:hidden;
+            display:flex;
+            flex-direction:column;
+        }
+        .smxp .smx-lightbox-top{
+            display:flex;
+            align-items:center;
+            justify-content:space-between;
+            gap: 10px;
+            padding: 10px 12px;
+            border-bottom: 1px solid rgba(148,163,184,.22);
+        }
+        .smxp .smx-lightbox-title{ font-weight:700; color: var(--fg); }
+        .smxp .smx-lightbox-close{
+            border:1px solid rgba(148,163,184,.28);
+            background: rgba(255,255,255,.75);
+            color: var(--fg);
+            border-radius: 12px;
+            padding: 8px 10px;
+            cursor:pointer;
+        }
+        .smxp .smx-lightbox-body{
+            position:relative;
+            padding: 12px;
+            display:grid;
+            gap: 10px;
+        }
+        .smxp .smx-lightbox-img{
+            width:100%;
+            max-height: 68vh;
+            object-fit: contain;
+            border-radius: 14px;
+            background: rgba(0,0,0,.04);
+        }
+        .smxp .smx-lightbox-caption{
+            color: var(--mut);
+            line-height: 1.6;
+        }
+        .smxp .smx-lightbox-arrow{
+            position:absolute;
+            top:50%;
+            transform:translateY(-50%);
+            width:44px;
+            height:44px;
+            border-radius:999px;
+            border:1px solid rgba(148,163,184,.28);
+            background: rgba(255,255,255,.82);
+            color: var(--fg);
+            display:flex;
+            align-items:center;
+            justify-content:center;
+            cursor:pointer;
+        }
+        .smxp .smx-lightbox-arrow.prev{ left: 10px; }
+        .smxp .smx-lightbox-arrow.next{ right: 10px; }
+        .smxp .smx-lightbox-arrow[disabled]{ opacity:.35; cursor:default; }
     </style>
     """.strip()
 
@@ -831,11 +1154,226 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
     </script>
     """.strip()
 
+    gallery_js = f"""
+    <script>
+        (function(){{
+            const root = document.getElementById("smxp-{page_id}") || document.querySelector(".smxp");
+            if(!root) return;
+
+            const gallerySecs = root.querySelectorAll('section[data-section-type="gallery"]');
+            if(!gallerySecs.length) return;
+
+            // Ensure single lightbox per page
+            let lb = root.querySelector(".smx-lightbox");
+            if(!lb){{
+            lb = document.createElement("div");
+            lb.className = "smx-lightbox";
+            lb.innerHTML = `
+                <div class="smx-lightbox-panel" role="dialog" aria-modal="true">
+                <div class="smx-lightbox-top">
+                    <div class="smx-lightbox-title"></div>
+                    <button class="smx-lightbox-close" type="button">Close</button>
+                </div>
+                <div class="smx-lightbox-body">
+                    <button class="smx-lightbox-arrow prev" type="button" aria-label="Previous">‹</button>
+                    <img class="smx-lightbox-img" alt="" />
+                    <button class="smx-lightbox-arrow next" type="button" aria-label="Next">›</button>
+                    <div class="smx-lightbox-caption"></div>
+                </div>
+                </div>`;
+            root.appendChild(lb);
+            }}
+
+            const lbTitle = lb.querySelector(".smx-lightbox-title");
+            const lbImg   = lb.querySelector(".smx-lightbox-img");
+            const lbCap   = lb.querySelector(".smx-lightbox-caption");
+            const btnClose= lb.querySelector(".smx-lightbox-close");
+            const btnPrev = lb.querySelector(".smx-lightbox-arrow.prev");
+            const btnNext = lb.querySelector(".smx-lightbox-arrow.next");
+
+            let slides = [];
+            let idx = 0;
+            let lastFocus = null;
+            let prevOverflow = "";
+
+            function render(){{
+            const s = slides[idx];
+            if(!s) return;
+            lbImg.src = s.src;
+            lbImg.alt = s.title || "image";
+            lbTitle.textContent = s.title || "";
+            lbCap.textContent = s.caption || "";
+            btnPrev.disabled = (idx <= 0);
+            btnNext.disabled = (idx >= slides.length - 1);
+            }}
+
+            function openAt(i){{
+            idx = Math.max(0, Math.min(i, slides.length - 1));
+            lastFocus = document.activeElement;
+            prevOverflow = document.body.style.overflow;
+            document.body.style.overflow = "hidden";
+            lb.classList.add("open");
+            render();
+            btnClose.focus();
+            }}
+
+            function close(){{
+            lb.classList.remove("open");
+            document.body.style.overflow = prevOverflow || "";
+            if(lastFocus && lastFocus.focus) lastFocus.focus();
+            }}
+
+            function move(d){{
+            const ni = idx + d;
+            if(ni < 0 || ni >= slides.length) return;
+            idx = ni;
+            render();
+            }}
+
+            btnClose.addEventListener("click", close);
+            lb.addEventListener("click", (e)=> {{ if(e.target === lb) close(); }});
+            btnPrev.addEventListener("click", ()=> move(-1));
+            btnNext.addEventListener("click", ()=> move(+1));
+
+            document.addEventListener("keydown", (e)=> {{
+            if(!lb.classList.contains("open")) return;
+            if(e.key === "Escape") return close();
+            if(e.key === "ArrowLeft") return move(-1);
+            if(e.key === "ArrowRight") return move(+1);
+            }});
+
+            function ensureNav(sec, rail){{
+                let wrap = sec.querySelector(".smx-gallery-wrap");
+                if(!wrap){{
+                    wrap = document.createElement("div");
+                    wrap.className = "smx-gallery-wrap";
+                    rail.parentNode.insertBefore(wrap, rail);
+                    wrap.appendChild(rail);
+                }}
+
+                let prev = wrap.querySelector("button.smx-gallery-nav.prev");
+                let next = wrap.querySelector("button.smx-gallery-nav.next");
+
+                if(!prev){{
+                    prev = document.createElement("button");
+                    prev.className = "smx-gallery-nav prev";
+                    prev.type = "button";
+                    prev.setAttribute("aria-label","Scroll left");
+                    prev.innerHTML = "‹";
+                    wrap.appendChild(prev);
+                }}
+                if(!next){{
+                    next = document.createElement("button");
+                    next.className = "smx-gallery-nav next";
+                    next.type = "button";
+                    next.setAttribute("aria-label","Scroll right");
+                    next.innerHTML = "›";
+                    wrap.appendChild(next);
+                }}
+
+                function update(){{
+                    const max = rail.scrollWidth - rail.clientWidth;
+                    const canScroll = max > 4;
+                    prev.style.display = canScroll ? "" : "none";
+                    next.style.display = canScroll ? "" : "none";
+                    prev.disabled = rail.scrollLeft <= 2;
+                    next.disabled = rail.scrollLeft >= (max - 2);
+                }}
+
+                prev.addEventListener("click", ()=> {{
+                    if(prev.disabled) return;
+                    rail.scrollBy({{ left: -Math.max(260, rail.clientWidth * 0.85), behavior:"smooth" }});
+                }});
+                next.addEventListener("click", ()=> {{
+                    if(next.disabled) return;
+                    rail.scrollBy({{ left:  Math.max(260, rail.clientWidth * 0.85), behavior:"smooth" }});
+                }});
+
+                rail.addEventListener("scroll", update, {{ passive:true }});
+                window.addEventListener("resize", update);
+                update();
+            }}
+
+            function initGallerySection(sec){{
+                const rail = sec.querySelector(".grid");
+                if(!rail) return;
+
+                ensureNav(sec, rail);
+
+                // Build slides from IMAGE tiles only (cards remain content cards)
+                const tiles = Array.from(rail.querySelectorAll('[data-item-type="image"]'));
+                if(!tiles.length) return;
+
+                // Build a local slide list for THIS rail
+                const localSlides = [];
+                tiles.forEach(tile => {{
+                    const img = tile.querySelector("img");
+                    if(!img) return;
+
+                    const full = (tile.getAttribute("data-full") || img.getAttribute("data-full") || img.getAttribute("src") || "").trim();
+                    if(!full) return;
+
+                    const title = (tile.getAttribute("data-title") || "").trim();
+                    const caption = (tile.getAttribute("data-caption") || "").trim();
+
+                    const slideIndex = localSlides.length;
+                    localSlides.push({{ src: full, title, caption }});
+
+                    tile.dataset.smxSlide = String(slideIndex);
+
+                    // IMPORTANT: don’t double-bind (dynamic inserts / re-init safe)
+                    if(tile.dataset.smxBound === "1") return;
+                    tile.dataset.smxBound = "1";
+
+                    tile.addEventListener("click", (e)=> {{
+                    if(e.target && e.target.closest && e.target.closest("a,button")) return;
+                    slides = localSlides; // activate the correct slide set for this rail
+                    const i = parseInt(tile.dataset.smxSlide || "0", 10);
+                    openAt(i);
+                    }});
+                }});
+            }}
+
+            gallerySecs.forEach(sec => initGallerySection(sec));
+
+            // Re-init when new gallery sections or new tiles are inserted dynamically (Admin editor)
+            const obs = new MutationObserver((mutations) => {{
+            for(const m of mutations){{
+                if(m.type !== "childList") continue;
+
+                // If a gallery section is added, init it
+                m.addedNodes && m.addedNodes.forEach(node => {{
+                if(!(node instanceof Element)) return;
+
+                if(node.matches && node.matches('section[data-section-type="gallery"]')){{
+                    initGallerySection(node);
+                    return;
+                }}
+
+                // If anything added inside/near a gallery section, init the nearest section
+                const sec = node.closest ? node.closest('section[data-section-type="gallery"]') : null;
+                if(sec) initGallerySection(sec);
+                }});
+            }}
+            }});
+
+            obs.observe(root, {{ childList: true, subtree: true }});
+
+        }})();
+    </script>
+    """.strip()
+
+
     def esc(s: str) -> str:
         s = s or ""
         s = s.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
         s = s.replace('"', "&quot;").replace("'", "&#39;")
         return s
+    
+    def esc_nl(s: str) -> str:
+        # preserve paragraphs in plain text
+        return esc(s).replace("\n", "<br>")
+
 
     def icon_svg(name: str) -> str:
         svg = _ICON_SVGS.get((name or "").strip().lower())
@@ -843,7 +1381,7 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
             return ""
         return f'<span class="icon">{svg}</span>'
 
-    parts: List[str] = [f'<div class="smxp" id="smxp-{page_id}">', css]
+    parts: List[str] = [f'<div class="smxp" id="smxp-{page_id}">', css, gallery_css]
     sections = layout.get("sections") if isinstance(layout.get("sections"), list) else []
 
     # Map first section id by type (used for default Hero CTA anchors)
@@ -869,7 +1407,7 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
     for s in sections:
         stype = (s.get("type") or "section").lower()
         title = esc(s.get("title") or "")
-        text = esc(s.get("text") or "")
+        text = esc_nl(s.get("text") or "")
         items = s.get("items") if isinstance(s.get("items"), list) else []
         sec_dom_id = (s.get("id") or "").strip()
         if not sec_dom_id:
@@ -913,10 +1451,10 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
                 )
 
             btn_row_html = f'<div class="btnRow">{"".join(btns)}</div>' if btns else ""
-
+            
             parts.append(
                 f'''
-                <section id="{esc(sec_dom_id)}" class="hero hero-banner">
+                <section id="{esc(sec_dom_id)}" class="hero hero-banner" data-section-type="hero">
                     <div class="hero-bg"{bg_style}></div>
                     <div class="hero-overlay"></div>
                     <div class="wrap hero-content">
@@ -939,38 +1477,94 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
             cols = 3
         cols = max(1, min(5, cols))
 
-        cards: List[str] = []
+        tiles: List[str] = []
         for it in items:
             if not isinstance(it, dict):
                 continue
-            it_title = esc(it.get("title") or "")
-            it_text = esc(it.get("text") or "")
-            img = (it.get("imageUrl") or "").strip()
+
+            it_type = str(it.get("type") or "card").lower().strip()
+
+            title_plain = (it.get("title") or "").strip()
+            cap_plain   = (it.get("text") or "").strip()
+
+            it_title = esc(title_plain)
+            it_text  = esc_nl(cap_plain)
+
+            full = (it.get("imageUrl") or "").strip()
+            thumb = (it.get("thumbUrl") or it.get("thumb_url") or "").strip()
+            src = thumb or full  # rail prefers thumb if available
+
+            # IMAGE tiles: true gallery behaviour (thumb in rail, full in lightbox)
+            if stype == "gallery" and it_type == "image":
+                if not src:
+                    continue
+                full_for_lb = full or src
+                tiles.append(
+                    f'''
+                    <figure class="gimg reveal"
+                            data-item-type="image"
+                            data-full="{esc(full_for_lb)}"
+                            data-title="{esc(title_plain)}"
+                            data-caption="{esc(cap_plain)}">
+                        <img loading="lazy" decoding="async"
+                            src="{esc(src)}"
+                            data-full="{esc(full_for_lb)}"
+                            alt="{esc(title_plain or 'image')}">
+                        {f'<figcaption>{it_title}</figcaption>' if title_plain else ''}
+                    </figure>
+                    '''.strip()
+                )
+                continue
+
+            # Default: render as a content card (Card, FAQ, Quote, etc.)
             ic = icon_svg(it.get("icon") or "")
+            img_html = f'<img loading="lazy" decoding="async" src="{esc(full)}" alt="{it_title}">' if full else ""
+
+            title_align = _safe_align(str(it.get("titleAlign") or ""))
+            text_align  = _safe_align(str(it.get("textAlign") or ""))
+
+            title_align_css = f"text-align:{title_align};" if title_align else ""
+            text_align_css  = f"text-align:{text_align};" if text_align else ""
 
-            img_html = f'<img loading="lazy" decoding="async" src="{esc(img)}" alt="{it_title}">' if img else ""
-            cards.append(
+            raw_html = str(it.get("textHtml") or "").strip()
+            if raw_html:
+                safe_html = _sanitize_rich_html(raw_html)
+                body_html = f'<div class="smx-rich" style="{text_align_css}">{safe_html}</div>'
+            else:
+                body_html = f'<p style="margin-top:8px;{text_align_css}">{it_text}</p>'
+
+            tiles.append(
                 f'''
-                <div class="card reveal">
+                <div class="card reveal" data-item-type="{esc(it_type)}">
                 {img_html}
-                <div style="display:flex;gap:10px;align-items:center;margin-top:{'10px' if img_html else '0'};">
+                <div style="display:flex;gap:10px;align-items:flex-start;margin-top:{'10px' if img_html else '0'};">
                     {ic}
-                    <h3 style="margin:0">{it_title}</h3>
+                    <h3 style="margin:0;{title_align_css}">{it_title}</h3>
                 </div>
-                <p style="margin-top:8px">{it_text}</p>
+                {body_html}
                 </div>
                 '''.strip()
             )
 
-        grid_html = (
-            f'<div class="grid" style="grid-template-columns:repeat({cols}, minmax(0, 1fr));">'
-            + "\n".join(cards) +
-            "</div>"
-        ) if cards else ""
+        if tiles:
+            if stype == "gallery":
+                grid_html = '<div class="grid">' + "\n".join(tiles) + "</div>"
+            else:
+                grid_html = (
+                    f'<div class="grid" style="grid-template-columns:repeat({cols}, minmax(0, 1fr));">'
+                    + "\n".join(tiles) +
+                    "</div>"
+                )
+        else:
+            grid_html = ""
+
+        
+        sec_class = "sec sec-gallery" if stype == "gallery" else "sec"
+        sec_extra_attr = ' data-section-type="gallery"' if stype == "gallery" else ""
 
         parts.append(
             f'''
-            <section id="{esc(sec_dom_id)}" class="sec">
+           <section id="{esc(sec_dom_id)}" class="sec" data-section-type="{esc(stype or 'section')}">
             <div class="wrap">
                 <h2 class="reveal">{title}</h2>
                 {'<p class="reveal" style="margin-bottom:14px;">'+text+'</p>' if text else ''}
@@ -981,12 +1575,11 @@ def compile_layout_to_html(layout: Dict[str, Any], *, page_slug: str) -> str:
         )
 
     parts.append(js)
+    parts.append(gallery_js)
     parts.append("</div>")
-    return "\n\n".join(parts)
 
+    return "\n\n".join(parts)
 
-from bs4 import BeautifulSoup
-from typing import Dict, Any, List, Tuple
 
 def _layout_non_hero_sections(layout: Dict[str, Any]) -> List[Dict[str, Any]]:
     sections = layout.get("sections") if isinstance(layout.get("sections"), list) else []