@jxsuite/starters 3.4.0 → 3.5.0

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

@@ -1,454 +0,0 @@
-{
-  "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",
-        "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"
-      }
-    ],
-    "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": "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" }
-  },
-  "children": [
-    {
-      "tagName": "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" }
-      },
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "paddingBottom": "1.1rem",
-            "marginBottom": "1.25rem",
-            "borderBottom": "1px solid var(--color-border)"
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "display": "inline-flex",
-                "alignItems": "center",
-                "gap": "0.5rem",
-                "fontFamily": "var(--font-heading)",
-                "fontWeight": "800",
-                "fontSize": "1.05rem",
-                "letterSpacing": "-0.01em"
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "style": { "color": "var(--color-primary)" },
-                  "textContent": "⛃"
-                },
-                { "tagName": "span", "textContent": "Filters" }
-              ]
-            },
-            {
-              "tagName": "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"
-              },
-              "children": [
-                { "tagName": "span", "textContent": "${state.visibleCount}" },
-                {
-                  "tagName": "span",
-                  "style": { "fontWeight": "600", "color": "var(--color-text-muted)" },
-                  "textContent": "of 6"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "textTransform": "uppercase",
-            "letterSpacing": "0.1em",
-            "fontSize": "0.72rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-muted)",
-            "marginBottom": "0.7rem"
-          },
-          "textContent": "Bedrooms"
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "display": "grid",
-            "gridTemplateColumns": "repeat(4, 1fr)",
-            "gap": "0.4rem",
-            "marginBottom": "1.5rem"
-          },
-          "children": [
-            {
-              "tagName": "button",
-              "textContent": "Any",
-              "onclick": { "$ref": "#/state/setBeds0" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "2+",
-              "onclick": { "$ref": "#/state/setBeds2" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "3+",
-              "onclick": { "$ref": "#/state/setBeds3" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "4+",
-              "onclick": { "$ref": "#/state/setBeds4" },
-              "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)'}"
-              }
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "textTransform": "uppercase",
-            "letterSpacing": "0.1em",
-            "fontSize": "0.72rem",
-            "fontWeight": "700",
-            "color": "var(--color-text-muted)",
-            "marginBottom": "0.7rem"
-          },
-          "textContent": "Max price"
-        },
-        {
-          "tagName": "div",
-          "style": { "display": "grid", "gridTemplateColumns": "repeat(2, 1fr)", "gap": "0.4rem" },
-          "children": [
-            {
-              "tagName": "button",
-              "textContent": "Any",
-              "onclick": { "$ref": "#/state/setPrice0" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "≤ $400k",
-              "onclick": { "$ref": "#/state/setPrice400" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "≤ $700k",
-              "onclick": { "$ref": "#/state/setPrice700" },
-              "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)'}"
-              }
-            },
-            {
-              "tagName": "button",
-              "textContent": "≤ $1.2M",
-              "onclick": { "$ref": "#/state/setPrice1200" },
-              "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)'}"
-              }
-            }
-          ]
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "margin": "1.5rem 0 0",
-            "fontSize": "0.82rem",
-            "color": "var(--color-text-muted)",
-            "lineHeight": "1.5"
-          },
-          "textContent": "Results update instantly — no page reloads."
-        }
-      ]
-    },
-    {
-      "tagName": "div",
-      "children": [
-        {
-          "tagName": "div",
-          "style": {
-            "display": "flex",
-            "alignItems": "baseline",
-            "justifyContent": "space-between",
-            "gap": "1rem",
-            "marginBottom": "1.25rem",
-            "flexWrap": "wrap"
-          },
-          "children": [
-            {
-              "tagName": "div",
-              "style": {
-                "fontWeight": "700",
-                "fontSize": "1rem",
-                "color": "var(--color-text-primary)"
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "style": {
-                    "color": "var(--color-primary)",
-                    "fontVariantNumeric": "tabular-nums"
-                  },
-                  "textContent": "${state.visibleCount}"
-                },
-                { "tagName": "span", "textContent": " homes on the north shore" }
-              ]
-            },
-            {
-              "tagName": "div",
-              "style": {
-                "fontSize": "0.85rem",
-                "color": "var(--color-text-muted)",
-                "fontWeight": "600"
-              },
-              "textContent": "Sorted by newest"
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "display": "grid",
-            "gridTemplateColumns": "repeat(2, 1fr)",
-            "gap": "1.35rem",
-            "@--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" },
-                "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'}"
-              }
-            }
-          }
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,216 +0,0 @@
-{
-  "tagName": "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)"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "maxWidth": "var(--max-width)",
-        "margin": "0 auto",
-        "padding": "0.85rem 1.5rem",
-        "display": "flex",
-        "alignItems": "center",
-        "gap": "1.25rem"
-      },
-      "children": [
-        {
-          "tagName": "a",
-          "attributes": { "href": "/" },
-          "style": {
-            "display": "inline-flex",
-            "alignItems": "center",
-            "gap": "0.6rem",
-            "textDecoration": "none",
-            "marginRight": "0.5rem"
-          },
-          "children": [
-            {
-              "tagName": "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)"
-              },
-              "textContent": "⌂"
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "display": "flex",
-                "flexDirection": "column",
-                "lineHeight": "1"
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontFamily": "var(--font-heading)",
-                    "fontSize": "1.15rem",
-                    "fontWeight": "800",
-                    "letterSpacing": "-0.03em",
-                    "color": "var(--color-text-primary)"
-                  },
-                  "textContent": "${state.brand} Realty"
-                },
-                {
-                  "tagName": "span",
-                  "style": {
-                    "fontSize": "0.62rem",
-                    "fontWeight": "700",
-                    "letterSpacing": "0.22em",
-                    "textTransform": "uppercase",
-                    "color": "var(--color-text-muted)",
-                    "marginTop": "0.2rem"
-                  },
-                  "textContent": "North Shore MLS"
-                }
-              ]
-            }
-          ]
-        },
-        {
-          "tagName": "nav",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "1.4rem",
-            "marginLeft": "0.5rem",
-            "@--md": { "display": "none" }
-          },
-          "children": [
-            {
-              "tagName": "a",
-              "attributes": { "href": "/listings/" },
-              "style": {
-                "color": "var(--color-text-secondary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.92rem",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Buy"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/listings/" },
-              "style": {
-                "color": "var(--color-text-secondary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.92rem",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Listings"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/#neighborhoods" },
-              "style": {
-                "color": "var(--color-text-secondary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.92rem",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "Neighborhoods"
-            },
-            {
-              "tagName": "a",
-              "attributes": { "href": "/about/" },
-              "style": {
-                "color": "var(--color-text-secondary)",
-                "textDecoration": "none",
-                "fontWeight": "600",
-                "fontSize": "0.92rem",
-                "transition": "color 0.15s",
-                ":hover": { "color": "var(--color-primary)" }
-              },
-              "textContent": "About"
-            }
-          ]
-        },
-        {
-          "tagName": "a",
-          "attributes": { "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)" }
-          },
-          "children": [
-            {
-              "tagName": "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"
-              },
-              "textContent": "⌕"
-            },
-            { "tagName": "span", "textContent": "Search homes" }
-          ]
-        },
-        {
-          "tagName": "a",
-          "attributes": { "href": "/contact/" },
-          "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)"
-            }
-          },
-          "textContent": "List with us"
-        }
-      ]
-    }
-  ]
-}