@jxsuite/starters 0.34.0

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

@@ -0,0 +1,59 @@
+{
+  "tagName": "re-intro",
+  "state": {
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "",
+    "reverse": false
+  },
+  "style": {
+    "display": "block",
+    "padding": "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "display": "grid",
+        "gridTemplateColumns": "1fr 1fr",
+        "gap": "clamp(2rem, 5vw, 4rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr" }
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "style": { "order": "${state.reverse ? '2' : '1'}" },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "width": "100%",
+                "height": "auto",
+                "borderRadius": "var(--radius)",
+                "display": "block",
+                "boxShadow": "0 12px 40px rgba(15,23,42,0.14)"
+              }
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "order": "${state.reverse ? '1' : '2'}",
+            "fontSize": "1.08rem",
+            "lineHeight": "1.8",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [{ "tagName": "slot" }]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,126 @@
+{
+  "tagName": "re-listing-card",
+  "state": {
+    "heading": "",
+    "price": "0",
+    "beds": "0",
+    "baths": "0",
+    "sqft": "0",
+    "city": "",
+    "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": "0 4px 20px rgba(15,23,42,0.05)",
+    "transition": "transform 0.2s, box-shadow 0.2s",
+    ":hover": {
+      "transform": "translateY(-4px)",
+      "boxShadow": "0 14px 34px rgba(15,23,42,0.14)"
+    }
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": { "display": "block", "position": "relative", "textDecoration": "none" },
+      "children": [
+        {
+          "tagName": "img",
+          "attributes": { "src": "${state.image}", "alt": "${state.heading}", "loading": "lazy" },
+          "style": {
+            "width": "100%",
+            "height": "230px",
+            "objectFit": "cover",
+            "display": "block"
+          }
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "position": "absolute",
+            "top": "0.9rem",
+            "left": "0.9rem",
+            "backgroundColor": "var(--color-bg-white)",
+            "color": "var(--color-primary)",
+            "fontWeight": "800",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.05rem",
+            "padding": "0.35rem 0.75rem",
+            "borderRadius": "999px",
+            "boxShadow": "0 4px 12px rgba(15,23,42,0.18)"
+          },
+          "textContent": "$${Number(state.price).toLocaleString('en-US')}"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": { "padding": "1.15rem 1.25rem 1.35rem" },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "${state.href}" },
+          "style": {
+            "textDecoration": "none",
+            "color": "var(--color-text-primary)"
+          },
+          "children": [
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.2rem",
+                "fontWeight": "700",
+                "margin": "0 0 0.35rem",
+                "letterSpacing": "-0.01em"
+              },
+              "textContent": "${state.heading}"
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "0.4rem",
+            "margin": "0 0 0.85rem",
+            "color": "var(--color-text-muted)",
+            "fontSize": "0.9rem"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "📍" },
+            { "tagName": "span", "textContent": "${state.city}" }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "flex",
+            "gap": "1rem",
+            "paddingTop": "0.85rem",
+            "borderTop": "1px solid var(--color-border)",
+            "fontSize": "0.9rem",
+            "color": "var(--color-text-primary)",
+            "fontWeight": "600"
+          },
+          "children": [
+            { "tagName": "span", "textContent": "${state.beds} bd" },
+            { "tagName": "span", "style": { "color": "var(--color-border)" }, "textContent": "|" },
+            { "tagName": "span", "textContent": "${state.baths} ba" },
+            { "tagName": "span", "style": { "color": "var(--color-border)" }, "textContent": "|" },
+            {
+              "tagName": "span",
+              "textContent": "${Number(state.sqft).toLocaleString('en-US')} sqft"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,337 @@
+{
+  "tagName": "re-listings-filter",
+  "$elements": [{ "$ref": "./re-listing-card.json" }],
+  "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"
+      },
+      {
+        "Title": "Harbor View Modern",
+        "link": "/harbor-view-modern/",
+        "price": 875000,
+        "beds": 4,
+        "baths": 3,
+        "sqft": 2600,
+        "city": "Bayport",
+        "image": "/images/listing-2.jpg"
+      },
+      {
+        "Title": "Lakeview Loft",
+        "link": "/lakeview-loft/",
+        "price": 389000,
+        "beds": 2,
+        "baths": 2,
+        "sqft": 1200,
+        "city": "Lakeview",
+        "image": "/images/listing-3.jpg"
+      },
+      {
+        "Title": "Willow Creek Cottage",
+        "link": "/willow-creek-cottage/",
+        "price": 315000,
+        "beds": 2,
+        "baths": 1,
+        "sqft": 980,
+        "city": "Cedar Grove",
+        "image": "/images/listing-4.jpg"
+      },
+      {
+        "Title": "Summit Ridge Contemporary",
+        "link": "/summit-ridge-contemporary/",
+        "price": 1150000,
+        "beds": 5,
+        "baths": 4,
+        "sqft": 3400,
+        "city": "Harbor Hills",
+        "image": "/images/listing-5.jpg"
+      },
+      {
+        "Title": "Birchwood Family Home",
+        "link": "/birchwood-family-home/",
+        "price": 549000,
+        "beds": 4,
+        "baths": 3,
+        "sqft": 2200,
+        "city": "Northshore",
+        "image": "/images/listing-6.jpg"
+      }
+    ],
+    "visibleCount": {
+      "$prototype": "Function",
+      "body": "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": "block",
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto",
+    "padding": "0 1.5rem"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "display": "flex",
+        "flexWrap": "wrap",
+        "gap": "2rem",
+        "alignItems": "flex-end",
+        "justifyContent": "space-between",
+        "padding": "1.5rem",
+        "backgroundColor": "var(--color-bg-cream)",
+        "border": "1px solid var(--color-border)",
+        "borderRadius": "var(--radius)",
+        "marginBottom": "2rem"
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-muted)",
+                "marginBottom": "0.6rem"
+              },
+              "textContent": "Bedrooms"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "gap": "0.4rem", "flexWrap": "wrap" },
+              "children": [
+                {
+                  "tagName": "button",
+                  "textContent": "Any",
+                  "onclick": { "$ref": "#/state/setBeds0" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "2+",
+                  "onclick": { "$ref": "#/state/setBeds2" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "3+",
+                  "onclick": { "$ref": "#/state/setBeds3" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "4+",
+                  "onclick": { "$ref": "#/state/setBeds4" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "textTransform": "uppercase",
+                "letterSpacing": "0.12em",
+                "fontSize": "0.72rem",
+                "fontWeight": "700",
+                "color": "var(--color-text-muted)",
+                "marginBottom": "0.6rem"
+              },
+              "textContent": "Max Price"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "gap": "0.4rem", "flexWrap": "wrap" },
+              "children": [
+                {
+                  "tagName": "button",
+                  "textContent": "Any",
+                  "onclick": { "$ref": "#/state/setPrice0" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "$400k",
+                  "onclick": { "$ref": "#/state/setPrice400" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "$700k",
+                  "onclick": { "$ref": "#/state/setPrice700" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                },
+                {
+                  "tagName": "button",
+                  "textContent": "$1.2M",
+                  "onclick": { "$ref": "#/state/setPrice1200" },
+                  "style": {
+                    "padding": "0.5rem 1rem",
+                    "borderRadius": "999px",
+                    "border": "1px solid var(--color-border)",
+                    "cursor": "pointer",
+                    "fontWeight": "600",
+                    "fontSize": "0.9rem",
+                    "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)'}"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "fontSize": "0.95rem",
+            "fontWeight": "700",
+            "color": "var(--color-text-primary)",
+            "whiteSpace": "nowrap"
+          },
+          "textContent": "${state.visibleCount} homes"
+        }
+      ]
+    },
+    {
+      "tagName": "div",
+      "style": {
+        "display": "grid",
+        "gridTemplateColumns": "repeat(3, 1fr)",
+        "gap": "1.5rem",
+        "@--md": { "gridTemplateColumns": "repeat(2, 1fr)" },
+        "@--sm": { "gridTemplateColumns": "1fr" }
+      },
+      "children": {
+        "$prototype": "Array",
+        "items": { "$ref": "#/state/listings" },
+        "map": {
+          "tagName": "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" },
+            "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'}"
+          }
+        }
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,117 @@
+{
+  "tagName": "re-nav",
+  "state": {
+    "brand": "Northshore Realty"
+  },
+  "style": {
+    "display": "block",
+    "position": "sticky",
+    "top": "0",
+    "zIndex": "50",
+    "backgroundColor": "rgba(255, 255, 255, 0.9)",
+    "backdropFilter": "blur(8px)",
+    "borderBottom": "1px solid var(--color-border)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "1rem 1.5rem",
+        "display": "flex",
+        "alignItems": "center",
+        "justifyContent": "space-between",
+        "gap": "1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/" },
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "0.5rem",
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "1.35rem",
+            "fontWeight": "800",
+            "color": "var(--color-text-primary)",
+            "textDecoration": "none",
+            "letterSpacing": "-0.02em"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "inline-flex",
+                "alignItems": "center",
+                "justifyContent": "center",
+                "width": "1.75rem",
+                "height": "1.75rem",
+                "borderRadius": "0.4rem",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "fontSize": "1rem"
+              },
+              "textContent": "⌂"
+            },
+            { "tagName": "span", "textContent": "${state.brand}" }
+          ]
+        },
+        {
+          "tagName": "nav",
+          "style": {
+            "display": "flex",
+            "alignItems": "center",
+            "gap": "1.75rem",
+            "@--sm": { "gap": "1rem" }
+          },
+          "children": [
+            {
+              "tagName": "a",
+              "attributes": { "href": "/listings/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "Listings"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/about/" },
+              "style": {
+                "color": "var(--color-text-primary)",
+                "textDecoration": "none",
+                "fontWeight": "600",
+                "fontSize": "0.95rem",
+                "@--sm": { "display": "none" },
+                ":hover": { "color": "var(--color-primary)" }
+              },
+              "textContent": "About"
+            },
+            {
+              "tagName": "a",
+              "attributes": { "href": "/contact/" },
+              "style": {
+                "display": "inline-block",
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.55rem 1.25rem",
+                "borderRadius": "var(--radius)",
+                "textDecoration": "none",
+                "fontWeight": "700",
+                "fontSize": "0.95rem",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "Contact"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}