@jxsuite/starters 0.34.0

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

@@ -0,0 +1,53 @@
+{
+  "tagName": "re-section-header",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "align": "center"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto 2.5rem",
+    "textAlign": "${state.align}"
+  },
+  "children": [
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.eyebrow ? 'block' : 'none'}",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.16em",
+        "fontSize": "0.8rem",
+        "fontWeight": "700",
+        "color": "var(--color-primary)",
+        "margin": "0 0 0.75rem"
+      },
+      "textContent": "${state.eyebrow}"
+    },
+    {
+      "tagName": "h2",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
+        "fontWeight": "800",
+        "lineHeight": "1.15",
+        "letterSpacing": "-0.02em",
+        "margin": "0"
+      },
+      "textContent": "${state.heading}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.subheading ? 'block' : 'none'}",
+        "fontSize": "1.1rem",
+        "lineHeight": "1.7",
+        "color": "var(--color-text-muted)",
+        "margin": "1rem 0 0"
+      },
+      "textContent": "${state.subheading}"
+    }
+  ]
+}

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

@@ -0,0 +1,36 @@
+{
+  "tagName": "re-stat",
+  "state": {
+    "value": "",
+    "label": ""
+  },
+  "style": {
+    "display": "block",
+    "textAlign": "center",
+    "padding": "1rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "clamp(2.25rem, 5vw, 3rem)",
+        "fontWeight": "800",
+        "lineHeight": "1",
+        "color": "var(--color-primary)",
+        "letterSpacing": "-0.02em"
+      },
+      "textContent": "${state.value}"
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "marginTop": "0.5rem",
+        "fontSize": "0.95rem",
+        "color": "var(--color-text-muted)",
+        "fontWeight": "600"
+      },
+      "textContent": "${state.label}"
+    }
+  ]
+}

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

@@ -0,0 +1,55 @@
+{
+  "tagName": "re-step",
+  "state": {
+    "number": "",
+    "title": "",
+    "text": ""
+  },
+  "style": {
+    "display": "block",
+    "position": "relative",
+    "paddingLeft": "3.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "position": "absolute",
+        "left": "0",
+        "top": "0",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "center",
+        "width": "2.5rem",
+        "height": "2.5rem",
+        "borderRadius": "999px",
+        "backgroundColor": "var(--color-primary)",
+        "color": "var(--color-text-white)",
+        "fontFamily": "var(--font-heading)",
+        "fontWeight": "800",
+        "fontSize": "1.1rem"
+      },
+      "textContent": "${state.number}"
+    },
+    {
+      "tagName": "h3",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.2rem",
+        "fontWeight": "700",
+        "margin": "0.3rem 0 0.4rem"
+      },
+      "textContent": "${state.title}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "margin": "0",
+        "color": "var(--color-text-muted)",
+        "fontSize": "0.98rem",
+        "lineHeight": "1.65"
+      },
+      "textContent": "${state.text}"
+    }
+  ]
+}

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

@@ -0,0 +1,54 @@
+{
+  "tagName": "re-testimonial",
+  "state": {
+    "quote": "",
+    "author": "",
+    "role": ""
+  },
+  "style": {
+    "display": "block",
+    "padding": "1.75rem",
+    "backgroundColor": "var(--color-bg-white)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "boxShadow": "0 4px 20px rgba(15,23,42,0.05)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "color": "var(--color-primary)",
+        "fontSize": "1.1rem",
+        "marginBottom": "0.75rem",
+        "letterSpacing": "0.1em"
+      },
+      "textContent": "★★★★★"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "fontFamily": "var(--font-heading)",
+        "fontSize": "1.12rem",
+        "lineHeight": "1.6",
+        "fontWeight": "500",
+        "margin": "0 0 1.25rem"
+      },
+      "textContent": "“${state.quote}”"
+    },
+    {
+      "tagName": "div",
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "fontWeight": "700" },
+          "textContent": "${state.author}"
+        },
+        {
+          "tagName": "div",
+          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
+          "textContent": "${state.role}"
+        }
+      ]
+    }
+  ]
+}

package/sites/real-estate/content/listings.csv

@@ -0,0 +1,7 @@
+Title,slug,price,beds,baths,sqft,city,image,order
+Cedar Lane Colonial,cedar-lane-colonial,425000,3,2,1850,Maplewood,/images/listing-1.jpg,1
+Harbor View Modern,harbor-view-modern,875000,4,3,2600,Bayport,/images/listing-2.jpg,2
+Lakeview Loft,lakeview-loft,389000,2,2,1200,Lakeview,/images/listing-3.jpg,3
+Willow Creek Cottage,willow-creek-cottage,315000,2,1,980,Cedar Grove,/images/listing-4.jpg,4
+Summit Ridge Contemporary,summit-ridge-contemporary,1150000,5,4,3400,Harbor Hills,/images/listing-5.jpg,5
+Birchwood Family Home,birchwood-family-home,549000,4,3,2200,Northshore,/images/listing-6.jpg,6

package/sites/real-estate/images.json

@@ -0,0 +1,84 @@
+{
+  "site": "real-estate",
+  "thumbnail": "hero",
+  "images": [
+    {
+      "role": "hero",
+      "query": "modern luxury house exterior",
+      "orientation": "landscape",
+      "photoId": 7031406
+    },
+    {
+      "role": "about",
+      "query": "real estate agent professional",
+      "orientation": "landscape",
+      "photoId": 8815820
+    },
+    {
+      "role": "listing-1",
+      "query": "modern house exterior",
+      "orientation": "landscape",
+      "photoId": 30580640
+    },
+    {
+      "role": "listing-2",
+      "query": "suburban home",
+      "orientation": "landscape",
+      "photoId": 15504477
+    },
+    {
+      "role": "listing-3",
+      "query": "luxury apartment interior",
+      "orientation": "landscape",
+      "photoId": 8135492
+    },
+    {
+      "role": "listing-4",
+      "query": "cozy cottage",
+      "orientation": "landscape",
+      "photoId": 15888628
+    },
+    {
+      "role": "listing-5",
+      "query": "contemporary home",
+      "orientation": "landscape",
+      "photoId": 8089172
+    },
+    {
+      "role": "listing-6",
+      "query": "family house",
+      "orientation": "landscape",
+      "photoId": 30580640
+    },
+    {
+      "role": "interior-1",
+      "query": "bright living room interior",
+      "orientation": "landscape",
+      "photoId": 29012619
+    },
+    {
+      "role": "interior-2",
+      "query": "modern kitchen interior",
+      "orientation": "landscape",
+      "photoId": 7045356
+    },
+    {
+      "role": "agent-1",
+      "query": "professional real estate agent portrait woman",
+      "orientation": "square",
+      "photoId": 7414903
+    },
+    {
+      "role": "agent-2",
+      "query": "professional real estate agent portrait man",
+      "orientation": "square",
+      "photoId": 7578866
+    },
+    {
+      "role": "agent-3",
+      "query": "friendly real estate agent portrait",
+      "orientation": "square",
+      "photoId": 7578856
+    }
+  ]
+}

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

@@ -0,0 +1,22 @@
+{
+  "tagName": "div",
+  "$elements": [
+    { "$ref": "../components/re-nav.json" },
+    { "$ref": "../components/re-footer.json" }
+  ],
+  "style": {
+    "minHeight": "100vh",
+    "display": "flex",
+    "flexDirection": "column",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "children": [
+    { "tagName": "re-nav" },
+    {
+      "tagName": "main",
+      "style": { "flex": "1" },
+      "children": [{ "tagName": "slot" }]
+    },
+    { "tagName": "re-footer" }
+  ]
+}

package/sites/real-estate/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "real-estate",
+  "private": true,
+  "description": "A residential real-estate agency starter — CSV property listings, a price and bedrooms filter island, and dynamic per-listing detail pages.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

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

@@ -0,0 +1,327 @@
+{
+  "$paths": { "contentType": "listings", "param": "slug", "field": "slug" },
+  "title": "${state.listing.data.Title} — Northshore Realty",
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": {
+        "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."
+      }
+    }
+  ],
+  "state": {
+    "listing": {
+      "$prototype": "ContentEntry",
+      "contentType": "listings",
+      "field": "slug",
+      "id": { "$ref": "#/$params/slug" },
+      "$src": "@jxsuite/parser/ContentEntry.class.json"
+    }
+  },
+  "children": [
+    {
+      "tagName": "article",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "2.5rem 1.5rem clamp(3rem, 6vw, 4.5rem)"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/listings/" },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "color": "var(--color-primary)",
+            "textDecoration": "none",
+            "fontWeight": "700",
+            "marginBottom": "1.75rem",
+            ":hover": { "textDecoration": "underline" }
+          },
+          "textContent": "← All listings"
+        },
+        {
+          "tagName": "header",
+          "style": {
+            "display": "flex",
+            "flexWrap": "wrap",
+            "alignItems": "flex-end",
+            "justifyContent": "space-between",
+            "gap": "1rem",
+            "marginBottom": "1.75rem"
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "children": [
+                {
+                  "tagName": "p",
+                  "style": {
+                    "display": "flex",
+                    "alignItems": "center",
+                    "gap": "0.4rem",
+                    "margin": "0 0 0.5rem",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600"
+                  },
+                  "children": [
+                    { "tagName": "span", "textContent": "📍" },
+                    { "tagName": "span", "textContent": "${state.listing.data.city}" }
+                  ]
+                },
+                {
+                  "tagName": "h1",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2rem, 4vw, 3rem)",
+                    "fontWeight": "800",
+                    "letterSpacing": "-0.03em",
+                    "lineHeight": "1.1",
+                    "margin": "0",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.listing.data.Title}"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(1.75rem, 3.5vw, 2.5rem)",
+                "fontWeight": "800",
+                "color": "var(--color-primary)",
+                "whiteSpace": "nowrap"
+              },
+              "textContent": "$${Number(state.listing.data.price).toLocaleString('en-US')}"
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "2fr 1fr",
+            "gridTemplateRows": "repeat(2, 1fr)",
+            "gap": "0.75rem",
+            "marginBottom": "2.5rem",
+            "@--sm": { "gridTemplateColumns": "1fr", "gridTemplateRows": "auto" }
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.listing.data.image}",
+                "alt": "${state.listing.data.Title}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "100%",
+                "gridRow": "span 2",
+                "objectFit": "cover",
+                "borderRadius": "var(--radius)",
+                "minHeight": "280px",
+                "@--sm": { "gridRow": "auto", "minHeight": "220px" }
+              }
+            },
+            {
+              "tagName": "img",
+              "attributes": {
+                "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": "135px"
+              }
+            },
+            {
+              "tagName": "img",
+              "attributes": {
+                "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": "135px"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(4, 1fr)",
+            "gap": "1rem",
+            "padding": "1.5rem",
+            "backgroundColor": "var(--color-bg-cream)",
+            "border": "1px solid var(--color-border)",
+            "borderRadius": "var(--radius)",
+            "marginBottom": "2.5rem",
+            "@--sm": { "gridTemplateColumns": "repeat(2, 1fr)" }
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": { "textAlign": "center" },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.6rem",
+                    "fontWeight": "800",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.listing.data.beds}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontSize": "0.85rem",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600"
+                  },
+                  "textContent": "Bedrooms"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": { "textAlign": "center" },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.6rem",
+                    "fontWeight": "800",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.listing.data.baths}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontSize": "0.85rem",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600"
+                  },
+                  "textContent": "Bathrooms"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": { "textAlign": "center" },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.6rem",
+                    "fontWeight": "800",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${Number(state.listing.data.sqft).toLocaleString('en-US')}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontSize": "0.85rem",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600"
+                  },
+                  "textContent": "Square feet"
+                }
+              ]
+            },
+            {
+              "tagName": "div",
+              "style": { "textAlign": "center" },
+              "children": [
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.6rem",
+                    "fontWeight": "800",
+                    "color": "var(--color-text-primary)"
+                  },
+                  "textContent": "${state.listing.data.city}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontSize": "0.85rem",
+                    "color": "var(--color-text-muted)",
+                    "fontWeight": "600"
+                  },
+                  "textContent": "Location"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "section",
+          "style": { "maxWidth": "var(--max-width-narrow)" },
+          "children": [
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.5rem",
+                "fontWeight": "700",
+                "margin": "0 0 1rem"
+              },
+              "textContent": "About this home"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "1.08rem",
+                "lineHeight": "1.8",
+                "color": "var(--color-text-primary)",
+                "margin": "0 0 1rem"
+              },
+              "textContent": "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."
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontSize": "1.08rem",
+                "lineHeight": "1.8",
+                "color": "var(--color-text-muted)",
+                "margin": "0"
+              },
+              "textContent": "Want to see it in person? Our team can arrange a private showing this week."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "tagName": "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/"
+      }
+    }
+  ]
+}