@jxsuite/starters 3.3.2 → 3.5.0

package/sites/real-estate/components/re-listing-card.jxn

@@ -0,0 +1,210 @@
+/- kdl-version 2
+
+re-listing-card {
+    state {
+        heading ""
+        price "0"
+        beds "0"
+        baths "0"
+        sqft "0"
+        city ""
+        status "For Sale"
+        image type=string format=image default=""
+        href "#"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.2s, box-shadow 0.2s, border-color 0.2s"
+        :hover {
+            transform "translateY(-4px)"
+            boxShadow "0 18px 40px -18px rgba(15,23,42,0.28)"
+            borderColor "var(--color-border-strong)"
+        }
+        ":hover img" transform="scale(1.05)"
+    }
+    a href="${state.href}" {
+        style {
+            display block
+            position relative
+            overflow hidden
+            textDecoration none
+            aspectRatio "3 / 2"
+            backgroundColor "var(--color-bg-tint)"
+        }
+        img src="${state.image}" alt="${state.heading}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                transition "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
+            }
+        }
+        span {
+            style {
+                position absolute
+                top "0.85rem"
+                left "0.85rem"
+                display inline-flex
+                alignItems center
+                gap "0.35rem"
+                backgroundColor "${state.status === 'New' ? 'var(--color-status-new)' : 'rgba(11,18,32,0.82)'}"
+                color "var(--color-text-white)"
+                fontWeight "700"
+                fontSize "0.72rem"
+                letterSpacing "0.04em"
+                textTransform uppercase
+                padding "0.3rem 0.65rem"
+                borderRadius "999px"
+                backdropFilter "blur(4px)"
+            }
+            span {
+                style {
+                    width "0.4rem"
+                    height "0.4rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-accent-bright)"
+                }
+            }
+            span "${state.status}"
+        }
+        span ♡ {
+            style {
+                position absolute
+                top "0.85rem"
+                right "0.85rem"
+                display inline-flex
+                alignItems center
+                justifyContent center
+                width "2rem"
+                height "2rem"
+                borderRadius "999px"
+                backgroundColor "rgba(255,255,255,0.92)"
+                color "var(--color-text-secondary)"
+                fontSize "0.95rem"
+                boxShadow "0 2px 8px rgba(15,23,42,0.18)"
+            }
+        }
+    }
+    div {
+        style padding="1.1rem 1.25rem 1.3rem"
+        div {
+            style {
+                display flex
+                alignItems baseline
+                justifyContent space-between
+                gap "0.75rem"
+                marginBottom "0.35rem"
+            }
+            div "$${Number(state.price).toLocaleString('en-US')}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.5rem"
+                    fontWeight "800"
+                    letterSpacing "-0.02em"
+                    color "var(--color-text-primary)"
+                    fontVariantNumeric tabular-nums
+                }
+            }
+            div "${state.sqft && Number(state.sqft) > 0 ? '$' + Math.round(Number(state.price)/Number(state.sqft)).toLocaleString('en-US') + '/sqft' : ''}" {
+                style {
+                    fontSize "0.78rem"
+                    fontWeight "600"
+                    color "var(--color-text-muted)"
+                    whiteSpace nowrap
+                    fontVariantNumeric tabular-nums
+                }
+            }
+        }
+        a href="${state.href}" {
+            style textDecoration=none color="var(--color-text-primary)"
+            h3 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.05rem"
+                    fontWeight "700"
+                    margin "0 0 0.25rem"
+                    letterSpacing "-0.01em"
+                }
+            }
+        }
+        p {
+            style {
+                display flex
+                alignItems center
+                gap "0.3rem"
+                margin "0 0 0.9rem"
+                color "var(--color-text-muted)"
+                fontSize "0.88rem"
+                fontWeight "500"
+            }
+            span 📍 {
+                style fontSize="0.8rem"
+            }
+            span "${state.city}"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                paddingTop "0.85rem"
+                borderTop "1px solid var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${state.beds}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div beds {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+            div {
+                style width="1px" alignSelf=stretch backgroundColor="var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${state.baths}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div baths {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+            div {
+                style width="1px" alignSelf=stretch backgroundColor="var(--color-border)"
+            }
+            div {
+                style flex="1" textAlign=center
+                div "${Number(state.sqft).toLocaleString('en-US')}" {
+                    style {
+                        fontWeight "800"
+                        fontSize "0.98rem"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div sqft {
+                    style fontSize="0.72rem" color="var(--color-text-muted)" fontWeight="600"
+                }
+            }
+        }
+    }
+}

package/sites/real-estate/components/re-listings-filter.jxn

@@ -0,0 +1,371 @@
+/- kdl-version 2
+$elements {
+    - (ref)"./re-listing-card.jxn"
+}
+
+re-listings-filter {
+    state {
+        minBeds 0
+        maxPrice 0
+        listings {
+            - {
+                Title "Cedar Lane Colonial"
+                link "/cedar-lane-colonial/"
+                price 425000
+                beds 3
+                baths 2
+                sqft 1850
+                city Maplewood
+                image "/images/listing-1.jpg"
+                status New
+            }
+            - {
+                Title "Harbor View Modern"
+                link "/harbor-view-modern/"
+                price 875000
+                beds 4
+                baths 3
+                sqft 2600
+                city Bayport
+                image "/images/listing-2.jpg"
+                status "For Sale"
+            }
+            - {
+                Title "Lakeview Loft"
+                link "/lakeview-loft/"
+                price 389000
+                beds 2
+                baths 2
+                sqft 1200
+                city Lakeview
+                image "/images/listing-3.jpg"
+                status New
+            }
+            - {
+                Title "Willow Creek Cottage"
+                link "/willow-creek-cottage/"
+                price 315000
+                beds 2
+                baths 1
+                sqft 980
+                city "Cedar Grove"
+                image "/images/listing-4.jpg"
+                status "For Sale"
+            }
+            - {
+                Title "Summit Ridge Contemporary"
+                link "/summit-ridge-contemporary/"
+                price 1150000
+                beds 5
+                baths 4
+                sqft 3400
+                city "Harbor Hills"
+                image "/images/listing-5.jpg"
+                status "For Sale"
+            }
+            - {
+                Title "Birchwood Family Home"
+                link "/birchwood-family-home/"
+                price 549000
+                beds 4
+                baths 3
+                sqft 2200
+                city Northshore
+                image "/images/listing-6.jpg"
+                status "For Sale"
+            }
+        }
+        (fn)visibleCount "return state.listings.filter(l => (state.minBeds === 0 || l.beds >= state.minBeds) && (state.maxPrice === 0 || l.price <= state.maxPrice)).length;"
+        setBeds0 {
+            $expression operator="=" target=(ref)"#/state/minBeds" value=0
+        }
+        setBeds2 {
+            $expression operator="=" target=(ref)"#/state/minBeds" value=2
+        }
+        setBeds3 {
+            $expression operator="=" target=(ref)"#/state/minBeds" value=3
+        }
+        setBeds4 {
+            $expression operator="=" target=(ref)"#/state/minBeds" value=4
+        }
+        setPrice0 {
+            $expression operator="=" target=(ref)"#/state/maxPrice" value=0
+        }
+        setPrice400 {
+            $expression operator="=" target=(ref)"#/state/maxPrice" value=400000
+        }
+        setPrice700 {
+            $expression operator="=" target=(ref)"#/state/maxPrice" value=700000
+        }
+        setPrice1200 {
+            $expression operator="=" target=(ref)"#/state/maxPrice" value=1200000
+        }
+    }
+    style {
+        display grid
+        gridTemplateColumns "290px 1fr"
+        gap "clamp(1.5rem, 3vw, 2.5rem)"
+        alignItems start
+        maxWidth "var(--max-width)"
+        margin "0 auto"
+        padding "0 1.5rem"
+        @--lg gridTemplateColumns="1fr"
+    }
+    aside {
+        style {
+            position sticky
+            top "5rem"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius-lg)"
+            boxShadow "var(--shadow-card)"
+            padding "1.5rem"
+            @--lg position=static
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                justifyContent space-between
+                paddingBottom "1.1rem"
+                marginBottom "1.25rem"
+                borderBottom "1px solid var(--color-border)"
+            }
+            div {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    fontFamily "var(--font-heading)"
+                    fontWeight "800"
+                    fontSize "1.05rem"
+                    letterSpacing "-0.01em"
+                }
+                span ⛃ {
+                    style color="var(--color-primary)"
+                }
+                span Filters
+            }
+            span {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.35rem"
+                    padding "0.3rem 0.7rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-teal-tint)"
+                    color "var(--color-primary)"
+                    fontWeight "800"
+                    fontSize "0.82rem"
+                    fontVariantNumeric tabular-nums
+                }
+                span "${state.visibleCount}"
+                span "of 6" {
+                    style fontWeight="600" color="var(--color-text-muted)"
+                }
+            }
+        }
+        div Bedrooms {
+            style {
+                textTransform uppercase
+                letterSpacing "0.1em"
+                fontSize "0.72rem"
+                fontWeight "700"
+                color "var(--color-text-muted)"
+                marginBottom "0.7rem"
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(4, 1fr)"
+                gap "0.4rem"
+                marginBottom "1.5rem"
+            }
+            button onclick=(ref)"#/state/setBeds0" Any {
+                style {
+                    padding "0.55rem 0.4rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.minBeds === 0 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    transition "all 0.15s"
+                    backgroundColor "${state.minBeds === 0 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.minBeds === 0 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setBeds2" "2+" {
+                style {
+                    padding "0.55rem 0.4rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.minBeds === 2 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    transition "all 0.15s"
+                    backgroundColor "${state.minBeds === 2 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.minBeds === 2 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setBeds3" "3+" {
+                style {
+                    padding "0.55rem 0.4rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.minBeds === 3 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    transition "all 0.15s"
+                    backgroundColor "${state.minBeds === 3 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.minBeds === 3 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setBeds4" "4+" {
+                style {
+                    padding "0.55rem 0.4rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.minBeds === 4 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    transition "all 0.15s"
+                    backgroundColor "${state.minBeds === 4 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.minBeds === 4 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+        }
+        div "Max price" {
+            style {
+                textTransform uppercase
+                letterSpacing "0.1em"
+                fontSize "0.72rem"
+                fontWeight "700"
+                color "var(--color-text-muted)"
+                marginBottom "0.7rem"
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="repeat(2, 1fr)" gap="0.4rem"
+            button onclick=(ref)"#/state/setPrice0" Any {
+                style {
+                    padding "0.6rem 0.5rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.maxPrice === 0 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    fontVariantNumeric tabular-nums
+                    transition "all 0.15s"
+                    backgroundColor "${state.maxPrice === 0 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.maxPrice === 0 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setPrice400" "≤ $400k" {
+                style {
+                    padding "0.6rem 0.5rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.maxPrice === 400000 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    fontVariantNumeric tabular-nums
+                    transition "all 0.15s"
+                    backgroundColor "${state.maxPrice === 400000 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.maxPrice === 400000 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setPrice700" "≤ $700k" {
+                style {
+                    padding "0.6rem 0.5rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.maxPrice === 700000 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    fontVariantNumeric tabular-nums
+                    transition "all 0.15s"
+                    backgroundColor "${state.maxPrice === 700000 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.maxPrice === 700000 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+            button onclick=(ref)"#/state/setPrice1200" "≤ $1.2M" {
+                style {
+                    padding "0.6rem 0.5rem"
+                    borderRadius "var(--radius-sm)"
+                    border "1px solid ${state.maxPrice === 1200000 ? 'var(--color-primary)' : 'var(--color-border-strong)'}"
+                    cursor pointer
+                    fontWeight "700"
+                    fontSize "0.88rem"
+                    fontFamily inherit
+                    fontVariantNumeric tabular-nums
+                    transition "all 0.15s"
+                    backgroundColor "${state.maxPrice === 1200000 ? 'var(--color-primary)' : 'var(--color-bg-white)'}"
+                    color "${state.maxPrice === 1200000 ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+                }
+            }
+        }
+        p "Results update instantly — no page reloads." {
+            style {
+                margin "1.5rem 0 0"
+                fontSize "0.82rem"
+                color "var(--color-text-muted)"
+                lineHeight "1.5"
+            }
+        }
+    }
+    div {
+        div {
+            style {
+                display flex
+                alignItems baseline
+                justifyContent space-between
+                gap "1rem"
+                marginBottom "1.25rem"
+                flexWrap wrap
+            }
+            div {
+                style fontWeight="700" fontSize="1rem" color="var(--color-text-primary)"
+                span "${state.visibleCount}" {
+                    style color="var(--color-primary)" fontVariantNumeric=tabular-nums
+                }
+                span " homes on the north shore"
+            }
+            div "Sorted by newest" {
+                style fontSize="0.85rem" color="var(--color-text-muted)" fontWeight="600"
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="repeat(2, 1fr)" gap="1.35rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            .children {
+                $array items=(ref)"#/state/listings" {
+                    re-listing-card {
+                        $props {
+                            heading (ref)"$map/item/Title"
+                            price (ref)"$map/item/price"
+                            beds (ref)"$map/item/beds"
+                            baths (ref)"$map/item/baths"
+                            sqft (ref)"$map/item/sqft"
+                            city (ref)"$map/item/city"
+                            status (ref)"$map/item/status"
+                            image (ref)"$map/item/image"
+                            href (ref)"$map/item/link"
+                        }
+                        style {
+                            display "${(state.minBeds === 0 || item.beds >= state.minBeds) && (state.maxPrice === 0 || item.price <= state.maxPrice) ? 'block' : 'none'}"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}