@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,162 @@
+/- kdl-version 2
+
+re-nav {
+    state brand=Northshore
+    style {
+        display block
+        position sticky
+        top "0"
+        zIndex "50"
+        backgroundColor "rgba(255, 255, 255, 0.86)"
+        backdropFilter "blur(14px)"
+        borderBottom "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "0.85rem 1.5rem"
+            display flex
+            alignItems center
+            gap "1.25rem"
+        }
+        a href="/" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.6rem"
+                textDecoration none
+                marginRight "0.5rem"
+            }
+            span ⌂ {
+                style {
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    width "2rem"
+                    height "2rem"
+                    borderRadius "0.55rem"
+                    background "linear-gradient(150deg, var(--color-accent-bright), var(--color-primary))"
+                    color "var(--color-text-white)"
+                    fontSize "1.05rem"
+                    boxShadow "0 6px 16px -6px rgba(15,118,110,0.6)"
+                }
+            }
+            span {
+                style display=flex flexDirection=column lineHeight="1"
+                span "${state.brand} Realty" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.15rem"
+                        fontWeight "800"
+                        letterSpacing "-0.03em"
+                        color "var(--color-text-primary)"
+                    }
+                }
+                span "North Shore MLS" {
+                    style {
+                        fontSize "0.62rem"
+                        fontWeight "700"
+                        letterSpacing "0.22em"
+                        textTransform uppercase
+                        color "var(--color-text-muted)"
+                        marginTop "0.2rem"
+                    }
+                }
+            }
+        }
+        nav {
+            style display=flex alignItems=center gap="1.4rem" marginLeft="0.5rem" {
+                @--md display=none
+            }
+            a href="/listings/" Buy {
+                style {
+                    color "var(--color-text-secondary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/listings/" Listings {
+                style {
+                    color "var(--color-text-secondary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/#neighborhoods" Neighborhoods {
+                style {
+                    color "var(--color-text-secondary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-primary)"
+                }
+            }
+            a href="/about/" About {
+                style {
+                    color "var(--color-text-secondary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.92rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-primary)"
+                }
+            }
+        }
+        a href="/listings/" aria-label="Search homes" {
+            style {
+                marginLeft auto
+                display inline-flex
+                alignItems center
+                gap "0.55rem"
+                padding "0.5rem 0.9rem 0.5rem 0.75rem"
+                borderRadius "999px"
+                border "1px solid var(--color-border-strong)"
+                backgroundColor "var(--color-bg-white)"
+                color "var(--color-text-muted)"
+                textDecoration none
+                fontSize "0.88rem"
+                fontWeight "600"
+                transition "border-color 0.15s, color 0.15s"
+                @--sm display=none
+                :hover borderColor="var(--color-primary)" color="var(--color-primary)"
+            }
+            span ⌕ {
+                style {
+                    display inline-flex
+                    alignItems center
+                    justifyContent center
+                    width "1.5rem"
+                    height "1.5rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-teal-tint)"
+                    color "var(--color-primary)"
+                    fontSize "0.85rem"
+                }
+            }
+            span "Search homes"
+        }
+        a href="/contact/" "List with us" {
+            style {
+                display inline-flex
+                alignItems center
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.6rem 1.15rem"
+                borderRadius "999px"
+                textDecoration none
+                fontWeight "700"
+                fontSize "0.9rem"
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-1px)"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,101 @@
+/- kdl-version 2
+
+re-neighborhood {
+    state {
+        name ""
+        count ""
+        price ""
+        href "/listings/"
+        image type=string format=image default=""
+    }
+    style display=block minWidth="0"
+    a href="${state.href}" {
+        style {
+            position relative
+            display block
+            overflow hidden
+            borderRadius "var(--radius)"
+            textDecoration none
+            color "var(--color-text-white)"
+            aspectRatio "4 / 5"
+            backgroundColor "var(--color-bg-dark)"
+            ":hover img" transform="scale(1.07)"
+            ":hover .re-nb-go" transform="translateX(0.2rem)"
+        }
+        img src="${state.image}" alt="${state.name}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                transition "transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(to top, rgba(11,18,32,0.9) 0%, rgba(11,18,32,0.35) 45%, rgba(11,18,32,0.05) 75%)"
+            }
+        }
+        span "${state.count} listings" {
+            style {
+                position absolute
+                top "0.85rem"
+                right "0.85rem"
+                display inline-flex
+                alignItems center
+                gap "0.3rem"
+                padding "0.28rem 0.6rem"
+                borderRadius "999px"
+                backgroundColor "rgba(255,255,255,0.16)"
+                border "1px solid rgba(255,255,255,0.25)"
+                backdropFilter "blur(6px)"
+                fontSize "0.72rem"
+                fontWeight "700"
+                fontVariantNumeric tabular-nums
+            }
+        }
+        div {
+            style position=absolute left="0" right="0" bottom="0" padding="1.15rem"
+            h3 "${state.name}" {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "1.35rem"
+                    fontWeight "500"
+                    letterSpacing "-0.01em"
+                    margin "0 0 0.3rem"
+                    color "var(--color-text-white)"
+                }
+            }
+            div {
+                style display=flex alignItems=center justifyContent=space-between gap="0.5rem"
+                span "Median ${state.price}" {
+                    style {
+                        fontSize "0.82rem"
+                        fontWeight "600"
+                        color "rgba(255,255,255,0.82)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                span class=re-nb-go → {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "1.7rem"
+                        height "1.7rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-accent-bright)"
+                        color "var(--color-ink)"
+                        fontSize "0.85rem"
+                        fontWeight "800"
+                        transition "transform 0.2s"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/real-estate/components/re-section-header.jxn

@@ -0,0 +1,55 @@
+/- kdl-version 2
+
+re-section-header {
+    state eyebrow="" heading="" subheading="" align=left
+    style {
+        display block
+        maxWidth "${state.align === 'center' ? 'var(--max-width-narrow)' : 'var(--max-width)'}"
+        margin "${state.align === 'center' ? '0 auto 2.75rem' : '0 auto 2.5rem'}"
+        padding "0 1.5rem"
+        textAlign "${state.align}"
+    }
+    p {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.6rem"
+            textTransform uppercase
+            letterSpacing "0.14em"
+            fontSize "0.74rem"
+            fontWeight "700"
+            color "var(--color-primary)"
+            margin "0 0 0.9rem"
+        }
+        span {
+            style {
+                width "1.6rem"
+                height "2px"
+                backgroundColor "var(--color-accent)"
+                borderRadius "2px"
+            }
+        }
+        span "${state.eyebrow}"
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(1.9rem, 3.6vw, 2.8rem)"
+            fontWeight "500"
+            lineHeight "1.1"
+            letterSpacing "-0.015em"
+            margin "0"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.08rem"
+            lineHeight "1.65"
+            color "var(--color-text-muted)"
+            margin "${state.align === 'center' ? '1rem auto 0' : '1rem 0 0'}"
+            maxWidth "56ch"
+        }
+    }
+}

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.2"
+    "@jxsuite/parser": "^4.3.4"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.4.0",
-    "@jxsuite/runtime": "^6.2.1"
+    "@jxsuite/compiler": "^8.6.0",
+    "@jxsuite/runtime": "^6.3.0"
   }
 }