@jxsuite/starters 3.4.0 → 3.5.0

package/sites/real-estate/components/re-stat.jxn

@@ -0,0 +1,26 @@
+/- kdl-version 2
+
+re-stat {
+    state value="" label=""
+    style display=block padding="0.5rem 0"
+    div "${state.value}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2.4rem, 5vw, 3.25rem)"
+            fontWeight "800"
+            lineHeight "1"
+            letterSpacing "-0.03em"
+            color "var(--color-text-white)"
+            fontVariantNumeric tabular-nums
+        }
+    }
+    div "${state.label}" {
+        style {
+            marginTop "0.6rem"
+            fontSize "0.9rem"
+            color "rgba(255,255,255,0.62)"
+            fontWeight "600"
+            lineHeight "1.4"
+        }
+    }
+}

package/sites/real-estate/components/re-step.jxn

@@ -0,0 +1,42 @@
+/- kdl-version 2
+
+re-step {
+    state number="" title="" text=""
+    style {
+        display block
+        padding "1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+    }
+    div "${state.number}" {
+        style {
+            display flex
+            alignItems center
+            justifyContent center
+            width "2.75rem"
+            height "2.75rem"
+            borderRadius "0.7rem"
+            backgroundColor "var(--color-teal-tint)"
+            border "1px solid var(--color-accent-soft)"
+            color "var(--color-primary)"
+            fontFamily "var(--font-heading)"
+            fontWeight "800"
+            fontSize "1.2rem"
+            fontVariantNumeric tabular-nums
+            marginBottom "1.1rem"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.2rem"
+            fontWeight "700"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="0.98rem" lineHeight="1.65"
+    }
+}

package/sites/real-estate/components/re-testimonial.jxn

@@ -0,0 +1,66 @@
+/- kdl-version 2
+
+re-testimonial {
+    state quote="" author="" role=""
+    style {
+        display flex
+        flexDirection column
+        padding "1.85rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+    }
+    div ★★★★★ {
+        style {
+            color "var(--color-accent-bright)"
+            fontSize "0.95rem"
+            marginBottom "1rem"
+            letterSpacing "0.14em"
+        }
+    }
+    p "“${state.quote}”" {
+        style {
+            fontFamily "var(--font-display)"
+            fontStyle italic
+            fontSize "1.2rem"
+            lineHeight "1.5"
+            fontWeight "400"
+            color "var(--color-text-primary)"
+            margin "0 0 1.5rem"
+            flex "1"
+        }
+    }
+    div {
+        style {
+            display flex
+            alignItems center
+            gap "0.75rem"
+            paddingTop "1.1rem"
+            borderTop "1px solid var(--color-border)"
+        }
+        div "${state.author.charAt(0)}" {
+            style {
+                display flex
+                alignItems center
+                justifyContent center
+                width "2.5rem"
+                height "2.5rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-teal-tint)"
+                color "var(--color-primary)"
+                fontFamily "var(--font-heading)"
+                fontWeight "800"
+                fontSize "1rem"
+            }
+        }
+        div {
+            div "${state.author}" {
+                style fontWeight="700" fontSize="0.95rem"
+            }
+            div "${state.role}" {
+                style fontSize="0.85rem" color="var(--color-text-muted)" fontWeight="500"
+            }
+        }
+    }
+}

package/sites/real-estate/document.schema.json

@@ -303,7 +303,13 @@
         },
         "FunctionDef": {
           "additionalProperties": false,
-          "description": "A function declaration. $prototype must be \"Function\". body (inline) and $src (external) are mutually exclusive. First parameter is always state (the reactive scope).",
+          "description": "A function declaration. $prototype must be \"Function\". body (inline) and $src (external) are mutually exclusive; declaring both is an error. First parameter is always state (the reactive scope).",
+          "not": {
+            "required": [
+              "body",
+              "$src"
+            ]
+          },
           "properties": {
             "$export": {
               "description": "Named export in $src module. Defaults to the state key name.",
@@ -339,11 +345,12 @@
               "type": "array"
             },
             "body": {
-              "description": "Inline function body: an opaque JS source string (first implicit parameter is state), or a structured statement array (spec §20) — explicit structured function declaration, analyzable by tooling and editable visually. The escalation ladder within the shape is structured statements → JS string.",
+              "description": "Inline function body: a source string in erasable TypeScript, which plain JavaScript already is (spec §23.1; types are erased before it is analysed or run; first implicit parameter is state), or a structured statement array (spec §20) — explicit structured function declaration, analyzable by tooling and editable visually. The escalation ladder within the shape is structured statements → source string.",
               "examples": [
                 "state.count++",
                 "state.items.push({ id: Date.now(), text: \"\", done: false })",
                 "return state.score >= 90 ? \"gold\" : \"silver\"",
+                "const input = event.target as HTMLInputElement; state.label = input.value",
                 [
                   {
                     "operator": "push",
@@ -604,6 +611,7 @@
               "type": "string"
             },
             "body": {
+              "description": "The member's body in erasable TypeScript, which plain JavaScript already is (spec §23.1), as one string or as an array of lines.",
               "oneOf": [
                 {
                   "type": "string"
@@ -675,6 +683,7 @@
               "type": "string"
             },
             "body": {
+              "description": "The member's body in erasable TypeScript, which plain JavaScript already is (spec §23.1), as one string or as an array of lines.",
               "oneOf": [
                 {
                   "type": "string"

package/sites/real-estate/layouts/base.jxn

@@ -0,0 +1,17 @@
+/- kdl-version 2
+$elements (ref)"../components/re-nav.jxn" (ref)"../components/re-footer.jxn"
+
+div {
+    style {
+        minHeight "100vh"
+        display flex
+        flexDirection column
+        backgroundColor "var(--color-bg-white)"
+    }
+    re-nav
+    main {
+        style flex="1"
+        slot
+    }
+    re-footer
+}

package/sites/real-estate/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.3"
+    "@jxsuite/parser": "^4.3.4"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.5.0",
-    "@jxsuite/runtime": "^6.2.2"
+    "@jxsuite/compiler": "^8.6.0",
+    "@jxsuite/runtime": "^6.3.0"
   }
 }

package/sites/real-estate/pages/[slug].jxn

@@ -0,0 +1,452 @@
+/- kdl-version 2
+$paths contentType=listings param=slug field=slug
+$head {
+    meta name=description content="${state.listing.data.Title} in ${state.listing.data.city} — ${state.listing.data.beds} bed, ${state.listing.data.baths} bath, ${state.listing.data.sqft} sqft. Listed by Northshore Realty."
+}
+
+$element .title="${state.listing.data.Title} — Northshore Realty" {
+    state {
+        listing {
+            $prototype ContentEntry
+            contentType listings
+            field slug
+            id (ref)"#/$params/slug"
+            $src "@jxsuite/parser/ContentEntry.class.json"
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "1.75rem 1.5rem clamp(3rem, 6vw, 4.5rem)"
+        }
+        a href="/listings/" "← All listings" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.5rem"
+                color "var(--color-text-muted)"
+                textDecoration none
+                fontWeight "600"
+                fontSize "0.9rem"
+                marginBottom "1.5rem"
+                :hover color="var(--color-primary)"
+            }
+        }
+        header {
+            style {
+                display flex
+                flexWrap wrap
+                alignItems flex-end
+                justifyContent space-between
+                gap "1rem"
+                marginBottom "1.75rem"
+            }
+            div {
+                div {
+                    style display=flex alignItems=center gap="0.75rem" marginBottom="0.75rem"
+                    span {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            gap "0.4rem"
+                            backgroundColor "var(--color-teal-tint)"
+                            color "var(--color-primary)"
+                            fontWeight "700"
+                            fontSize "0.74rem"
+                            letterSpacing "0.04em"
+                            textTransform uppercase
+                            padding "0.3rem 0.7rem"
+                            borderRadius "999px"
+                            border "1px solid var(--color-accent-soft)"
+                        }
+                        span {
+                            style {
+                                width "0.4rem"
+                                height "0.4rem"
+                                borderRadius "999px"
+                                backgroundColor "var(--color-accent-bright)"
+                            }
+                        }
+                        span "${state.listing.data.status}"
+                    }
+                    span {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            gap "0.35rem"
+                            color "var(--color-text-muted)"
+                            fontWeight "600"
+                            fontSize "0.92rem"
+                        }
+                        span 📍
+                        span "${state.listing.data.city}"
+                    }
+                }
+                h1 "${state.listing.data.Title}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "clamp(2rem, 4vw, 3rem)"
+                        fontWeight "500"
+                        letterSpacing "-0.02em"
+                        lineHeight "1.05"
+                        margin "0"
+                        color "var(--color-text-primary)"
+                    }
+                }
+            }
+            div {
+                style textAlign=right
+                div "$${Number(state.listing.data.price).toLocaleString('en-US')}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(1.75rem, 3.5vw, 2.5rem)"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-primary)"
+                        whiteSpace nowrap
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div "$${Math.round(Number(state.listing.data.price)/Number(state.listing.data.sqft)).toLocaleString('en-US')} / sqft" {
+                    style {
+                        fontSize "0.85rem"
+                        color "var(--color-text-muted)"
+                        fontWeight "600"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "2fr 1fr"
+                gridTemplateRows "repeat(2, 1fr)"
+                gap "0.75rem"
+                marginBottom "2.5rem"
+                @--sm gridTemplateColumns="1fr" gridTemplateRows=auto
+            }
+            img src="${state.listing.data.image}" alt="${state.listing.data.Title}" loading=eager {
+                style {
+                    width "100%"
+                    height "100%"
+                    gridRow "span 2"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "300px"
+                    @--sm gridRow=auto minHeight="230px"
+                }
+            }
+            img src="/images/interior-1.jpg" alt="Living space at ${state.listing.data.Title}" loading=lazy {
+                style {
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "145px"
+                }
+            }
+            img src="/images/interior-2.jpg" alt="Kitchen at ${state.listing.data.Title}" loading=lazy {
+                style {
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    borderRadius "var(--radius)"
+                    minHeight "145px"
+                }
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "1.6fr 1fr"
+                gap "clamp(2rem, 4vw, 3rem)"
+                alignItems start
+                @--md gridTemplateColumns="1fr"
+            }
+            div {
+                div {
+                    style {
+                        display grid
+                        gridTemplateColumns "repeat(3, 1fr)"
+                        gap "0"
+                        border "1px solid var(--color-border)"
+                        borderRadius "var(--radius)"
+                        overflow hidden
+                        marginBottom "2.5rem"
+                        @--sm gridTemplateColumns="repeat(2, 1fr)"
+                    }
+                    div {
+                        style {
+                            padding "1.25rem"
+                            borderRight "1px solid var(--color-border)"
+                            borderBottom "1px solid var(--color-border)"
+                        }
+                        div "${state.listing.data.beds}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div Bedrooms {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style {
+                            padding "1.25rem"
+                            borderRight "1px solid var(--color-border)"
+                            borderBottom "1px solid var(--color-border)"
+                        }
+                        div "${state.listing.data.baths}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div Bathrooms {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderBottom="1px solid var(--color-border)"
+                        div "${Number(state.listing.data.sqft).toLocaleString('en-US')}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div "Sq ft" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderRight="1px solid var(--color-border)"
+                        div "$${Math.round(Number(state.listing.data.price)/Number(state.listing.data.sqft)).toLocaleString('en-US')}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-primary)"
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                        div "Per sq ft" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem" borderRight="1px solid var(--color-border)"
+                        div Single-family {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                            }
+                        }
+                        div "Property type" {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                    div {
+                        style padding="1.25rem"
+                        div "${state.listing.data.city}" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.4rem"
+                                fontWeight "800"
+                                color "var(--color-text-primary)"
+                            }
+                        }
+                        div Location {
+                            style {
+                                fontSize "0.8rem"
+                                color "var(--color-text-muted)"
+                                fontWeight "600"
+                                textTransform uppercase
+                                letterSpacing "0.05em"
+                                marginTop "0.2rem"
+                            }
+                        }
+                    }
+                }
+                h2 "About this home" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.6rem"
+                        fontWeight "500"
+                        letterSpacing "-0.01em"
+                        margin "0 0 1rem"
+                    }
+                }
+                p "Set in the heart of ${state.listing.data.city}, ${state.listing.data.Title} offers ${state.listing.data.beds} bedrooms and ${state.listing.data.baths} bathrooms across ${Number(state.listing.data.sqft).toLocaleString('en-US')} thoughtfully finished square feet. Sunlit living spaces, an updated kitchen, and easy access to schools, parks, and the waterfront make this a home you can move right into." {
+                    style {
+                        fontSize "1.08rem"
+                        lineHeight "1.8"
+                        color "var(--color-text-secondary)"
+                        margin "0 0 1rem"
+                    }
+                }
+                p "Want to see it in person? Our team can arrange a private showing this week." {
+                    style {
+                        fontSize "1.08rem"
+                        lineHeight "1.8"
+                        color "var(--color-text-muted)"
+                        margin "0"
+                    }
+                }
+            }
+            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"
+                    @--md position=static
+                }
+                div "$${Number(state.listing.data.price).toLocaleString('en-US')}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.75rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        gap "0.75rem"
+                        margin "0.75rem 0 1.25rem"
+                        fontSize "0.9rem"
+                        fontWeight "600"
+                        color "var(--color-text-secondary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                    span "${state.listing.data.beds} bd"
+                    span · {
+                        style color="var(--color-border-strong)"
+                    }
+                    span "${state.listing.data.baths} ba"
+                    span · {
+                        style color="var(--color-border-strong)"
+                    }
+                    span "${Number(state.listing.data.sqft).toLocaleString('en-US')} sqft"
+                }
+                a href="/contact/" "Book a private showing" {
+                    style {
+                        display block
+                        textAlign center
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.85rem 1.25rem"
+                        borderRadius "999px"
+                        fontWeight "700"
+                        fontSize "0.98rem"
+                        textDecoration none
+                        transition "background-color 0.15s"
+                        :hover backgroundColor="var(--color-primary-hover)"
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        gap "0.85rem"
+                        marginTop "1.5rem"
+                        paddingTop "1.5rem"
+                        borderTop "1px solid var(--color-border)"
+                    }
+                    img src="/images/agent-1.jpg" alt="Priya Anand" loading=lazy width="56" height="56" {
+                        style width="3.25rem" height="3.25rem" borderRadius="999px" objectFit=cover
+                    }
+                    div {
+                        div "Priya Anand" {
+                            style fontWeight="700" fontSize="0.95rem"
+                        }
+                        div "Principal Broker" {
+                            style fontSize="0.82rem" color="var(--color-text-muted)"
+                        }
+                        a href=tel:+15552047781 "(555) 204-7781" {
+                            style {
+                                fontSize "0.85rem"
+                                color "var(--color-primary)"
+                                fontWeight "600"
+                                textDecoration none
+                                fontVariantNumeric tabular-nums
+                            }
+                        }
+                    }
+                }
+                div "Listed by Northshore Realty · Equal Housing Opportunity" {
+                    style {
+                        marginTop "1.25rem"
+                        fontSize "0.78rem"
+                        color "var(--color-text-muted)"
+                        lineHeight "1.5"
+                    }
+                }
+            }
+        }
+    }
+    re-cta {
+        $props {
+            heading "Book a private showing"
+            text "Reach out and we'll set up a walkthrough of this home at a time that works for you."
+            cta "Contact an agent"
+            ctaHref "/contact/"
+            cta2 "Back to listings"
+            cta2Href "/listings/"
+        }
+    }
+}

package/sites/real-estate/project.jxn

@@ -4,7 +4,7 @@ project "Northshore Realty"
 
 url "https://example.com"
 
-defaults layout="./layouts/base.json" lang=en
+defaults layout="./layouts/base.jxn" lang=en
 
 $head {
     meta name=viewport content="width=device-width, initial-scale=1"