@jxsuite/starters 0.34.0

package/sites/shop/images.json

@@ -0,0 +1,54 @@
+{
+  "site": "shop",
+  "thumbnail": "hero",
+  "images": [
+    {
+      "role": "hero",
+      "query": "bicycle shop interior",
+      "orientation": "landscape",
+      "photoId": 2817452
+    },
+    {
+      "role": "about",
+      "query": "bike mechanic workshop",
+      "orientation": "landscape",
+      "photoId": 35305055
+    },
+    {
+      "role": "product-1",
+      "query": "road bicycle",
+      "orientation": "square",
+      "photoId": 5807638
+    },
+    {
+      "role": "product-2",
+      "query": "mountain bike",
+      "orientation": "square",
+      "photoId": 38239535
+    },
+    {
+      "role": "product-3",
+      "query": "gravel bike",
+      "orientation": "square",
+      "photoId": 12266469
+    },
+    {
+      "role": "product-4",
+      "query": "kids bicycle",
+      "orientation": "square",
+      "photoId": 28506741
+    },
+    {
+      "role": "product-5",
+      "query": "bike helmet",
+      "orientation": "square",
+      "photoId": 12956080
+    },
+    {
+      "role": "product-6",
+      "query": "cycling accessories",
+      "orientation": "square",
+      "photoId": 30443844
+    }
+  ]
+}

package/sites/shop/layouts/base.json

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

package/sites/shop/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "cadence-cycles",
+  "private": true,
+  "description": "A neighborhood bike shop selling road, mountain, gravel, and kids' bikes, plus gear and expert service.",
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "jx build",
+    "dev": "jx dev"
+  },
+  "devDependencies": {
+    "@jxsuite/compiler": "^0.19.0",
+    "@jxsuite/runtime": "^0.19.0"
+  }
+}

package/sites/shop/pages/about.md

@@ -0,0 +1,42 @@
+---
+title: "About — Cadence Cycles"
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::shp-section-header{props.eyebrow="Our story" props.heading="A shop built by people who ride" props.subheading="Good bikes, honest service, and a workshop that treats your ride like our own."}
+:::::
+
+:::shp-intro{props.image="/images/about.jpg" props.imageAlt="A mechanic working at the Cadence Cycles workshop" props.reverse="true"}
+
+### From a garage bench to Spoke Avenue
+
+Cadence started in 2009 as a two-person repair bench in a drafty garage. Word got around that we'd fix anything, explain what we did, and never upsell you a part you didn't need. Fifteen years later we've grown into a full shop — but that bench mentality hasn't changed.
+
+We stock bikes we'd ride ourselves, from featherweight road machines to a kid's very first pedal bike, and every one gets fitted and safety-checked before it rolls out the door.
+:::
+
+:::::section{style.padding="clamp(3rem, 8vw, 5rem) 1.5rem"}
+::shp-section-header{props.eyebrow="What we stand for" props.heading="Three things we won't cut corners on"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::shp-feature{props.icon="🛠️" props.title="Service first" props.text="We'd rather earn a repair customer for life than sell one bike and move on."}
+
+::shp-feature{props.icon="💬" props.title="Straight talk" props.text="Plain-English advice and up-front pricing. We'll tell you when you don't need the upgrade."}
+
+::shp-feature{props.icon="🌍" props.title="Ride local" props.text="We sponsor group rides, teach maintenance nights, and back the community trails."}
+::::
+:::::
+
+:::::section{style.padding="clamp(2rem, 5vw, 3.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.5rem" style.--sm.gridTemplateColumns="repeat(2, 1fr)"}
+::shp-stat{props.value="2009" props.label="Year founded"}
+
+::shp-stat{props.value="9" props.label="On the team"}
+
+::shp-stat{props.value="1,200+" props.label="Bikes fitted"}
+
+::shp-stat{props.value="4.9★" props.label="Rider rating"}
+::::
+:::::
+
+::shp-cta{props.heading="Roll in and say hi" props.text="Whether you're buying your first bike or your fifth, there's a coffee and a bike stand waiting." props.cta="Plan Your Visit" props.ctaHref="/contact/"}

package/sites/shop/pages/contact.md

@@ -0,0 +1,15 @@
+---
+title: "Visit & Contact — Cadence Cycles"
+---
+
+::::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::shp-section-header{props.eyebrow="Come by" props.heading="Visit the shop" props.subheading="Book a service, ask about a build, or just roll in for a chat. We're on the corner of Spoke & 4th."}
+::::::
+
+:::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+::shp-contact-form{}
+
+::shp-visit-info{}
+::::
+:::::

package/sites/shop/pages/index.md

@@ -0,0 +1,82 @@
+---
+title: "Cadence Cycles — Neighborhood bike shop for every rider"
+state:
+  featured:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: product
+    sort:
+      field: order
+      order: asc
+    limit: 4
+---
+
+::shp-hero{props.eyebrow="Riverbend · Since 2009" props.heading="Find your next favorite ride." props.subheading="A neighborhood bike shop stacked with road, mountain, gravel, and kids' bikes — plus the gear, service, and expert fittings to keep you rolling." props.cta="Shop Bikes" props.ctaHref="/products/" props.cta2="Our Story" props.cta2Href="/about/" props.bg="/images/hero.jpg"}
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.5rem" style.--sm.gridTemplateColumns="repeat(2, 1fr)"}
+::shp-stat{props.value="15 yrs" props.label="On Spoke Avenue"}
+
+::shp-stat{props.value="1,200+" props.label="Bikes fitted"}
+
+::shp-stat{props.value="48 hr" props.label="Service turnaround"}
+
+::shp-stat{props.value="4.9★" props.label="Rider rating"}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::shp-section-header{props.eyebrow="Fresh on the floor" props.heading="Featured rides" props.subheading="A few of the bikes our mechanics are most excited about this season."}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="repeat(2, 1fr)" style.--sm.gridTemplateColumns="1fr"}
+:::Array{items.ref="#/state/featured"}
+::shp-product-card{props.title="${item.data.title}" props.price="${item.data.price}" props.category="${item.data.category}" props.image="${item.data.image}" props.href="/products/${item.data.sku}/"}
+:::
+::::
+
+::::div{style.textAlign="center" style.marginTop="2.5rem"}
+:::a{href="/products/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+Browse the full shop →
+:::
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::shp-section-header{props.eyebrow="Why Cadence" props.heading="More than a bike sale"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::shp-feature{props.icon="🔧" props.title="On-site service" props.text="A full workshop with certified mechanics. Most tune-ups turned around in 48 hours or less."}
+
+::shp-feature{props.icon="📏" props.title="Proper fitting" props.text="Every bike we sell is sized and adjusted to you before it leaves the floor — no guesswork."}
+
+::shp-feature{props.icon="🤝" props.title="Lifetime support" props.text="Free first tune-up on every new bike, and honest advice for the life of the ride."}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::shp-section-header{props.eyebrow="At the workshop" props.heading="Book a service" props.subheading="Tune-ups, custom builds, and fixes done right, priced up front."}
+
+::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1fr" style.gap="1rem" style.--sm.gridTemplateColumns="1fr"}
+::shp-service{props.icon="⚙️" props.title="Standard tune-up" props.text="Gears, brakes, and a full safety check dialled in." props.price="$79"}
+
+::shp-service{props.icon="🛞" props.title="Wheel & tyre" props.text="Tubeless setups, truing, and flat repairs while you wait." props.price="$35"}
+
+::shp-service{props.icon="🚲" props.title="Custom build" props.text="Bring a frame or dream one up — we'll spec and build it." props.price="From $150"}
+
+::shp-service{props.icon="📐" props.title="Pro bike fit" props.text="A full body-and-bike fitting session with a fit specialist." props.price="$120"}
+::::
+:::::
+
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::shp-section-header{props.eyebrow="From the saddle" props.heading="Riders keep coming back"}
+
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+::shp-review{props.quote="Bought my first gravel bike here and they spent an hour fitting it. It rides like it was made for me." props.author="Priya N." props.role="Weekend adventurer"}
+
+::shp-review{props.quote="The workshop saved my race weekend with a same-day drivetrain rebuild. These folks know bikes." props.author="Marcus T." props.role="Cat 3 racer"}
+
+::shp-review{props.quote="Got my daughter's first pedal bike here. Free tune-up as she grew into it — such a nice touch." props.author="Dana R." props.role="Cargo-bike parent"}
+::::
+:::::
+
+::shp-cta{props.heading="Come take one for a spin" props.text="Test-ride anything on the floor, or roll in for a tune-up. We're on the corner of Spoke & 4th." props.cta="Plan Your Visit" props.ctaHref="/contact/"}

package/sites/shop/pages/products/[sku].json

@@ -0,0 +1,191 @@
+{
+  "$paths": {
+    "contentType": "product",
+    "param": "sku",
+    "field": "sku"
+  },
+  "title": "${state.product.data.title} — Cadence Cycles",
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "${state.product.data.title} — ${state.product.data.category} bike at Cadence Cycles, ${state.product.data.price}."
+      }
+    }
+  ],
+  "state": {
+    "product": {
+      "$prototype": "ContentEntry",
+      "contentType": "product",
+      "field": "sku",
+      "id": { "$ref": "#/$params/sku" },
+      "$src": "@jxsuite/parser/ContentEntry.class.json"
+    }
+  },
+  "children": [
+    {
+      "tagName": "article",
+      "style": {
+        "maxWidth": "var(--max-width)",
+        "margin": "0 auto",
+        "padding": "clamp(2rem, 5vw, 3.5rem) 1.5rem"
+      },
+      "children": [
+        {
+          "tagName": "a",
+          "attributes": { "href": "/products/" },
+          "style": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "0.4rem",
+            "color": "var(--color-primary)",
+            "textDecoration": "none",
+            "fontWeight": "600",
+            "fontSize": "0.95rem",
+            "marginBottom": "2rem"
+          },
+          "textContent": "← Back to the shop"
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "display": "grid",
+            "gridTemplateColumns": "1fr 1fr",
+            "gap": "clamp(2rem, 5vw, 3.5rem)",
+            "alignItems": "start",
+            "@--md": { "gridTemplateColumns": "1fr" }
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.product.data.image}",
+                "alt": "${state.product.data.title}",
+                "loading": "eager"
+              },
+              "style": {
+                "width": "100%",
+                "aspectRatio": "1 / 1",
+                "objectFit": "cover",
+                "borderRadius": "var(--radius)",
+                "display": "block",
+                "backgroundColor": "var(--color-bg-cream)",
+                "boxShadow": "0 12px 40px rgba(15,23,42,0.12)"
+              }
+            },
+            {
+              "tagName": "div",
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "inline-block",
+                    "padding": "0.3rem 0.8rem",
+                    "borderRadius": "999px",
+                    "fontSize": "0.75rem",
+                    "fontWeight": "600",
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.06em",
+                    "backgroundColor": "rgba(22, 163, 74, 0.12)",
+                    "color": "var(--color-primary-hover)"
+                  },
+                  "textContent": "${state.product.data.category}"
+                },
+                {
+                  "tagName": "h1",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "clamp(2rem, 5vw, 2.9rem)",
+                    "fontWeight": "700",
+                    "lineHeight": "1.1",
+                    "letterSpacing": "-0.02em",
+                    "margin": "1rem 0 0.5rem"
+                  },
+                  "textContent": "${state.product.data.title}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontSize": "1.9rem",
+                    "fontWeight": "700",
+                    "color": "var(--color-primary)",
+                    "margin": "0 0 1.5rem"
+                  },
+                  "textContent": "${state.product.data.price}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "fontSize": "1.08rem",
+                    "lineHeight": "1.75",
+                    "color": "var(--color-text-primary)",
+                    "borderTop": "1px solid var(--color-border)",
+                    "paddingTop": "1.5rem"
+                  },
+                  "children": "${state.product.$children ?? []}"
+                },
+                {
+                  "tagName": "div",
+                  "style": {
+                    "display": "flex",
+                    "flexWrap": "wrap",
+                    "gap": "0.75rem",
+                    "marginTop": "2rem"
+                  },
+                  "children": [
+                    {
+                      "tagName": "a",
+                      "attributes": { "href": "/contact/" },
+                      "style": {
+                        "display": "inline-block",
+                        "backgroundColor": "var(--color-primary)",
+                        "color": "var(--color-text-white)",
+                        "padding": "0.9rem 2rem",
+                        "borderRadius": "999px",
+                        "fontSize": "1.05rem",
+                        "fontWeight": "600",
+                        "textDecoration": "none",
+                        "transition": "background-color 0.15s",
+                        ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+                      },
+                      "textContent": "Reserve this bike →"
+                    },
+                    {
+                      "tagName": "a",
+                      "attributes": { "href": "/products/" },
+                      "style": {
+                        "display": "inline-block",
+                        "border": "1px solid var(--color-border)",
+                        "color": "var(--color-text-primary)",
+                        "padding": "0.9rem 2rem",
+                        "borderRadius": "999px",
+                        "fontSize": "1.05rem",
+                        "fontWeight": "600",
+                        "textDecoration": "none",
+                        "transition": "border-color 0.15s",
+                        ":hover": { "borderColor": "var(--color-primary)" }
+                      },
+                      "textContent": "Keep browsing"
+                    }
+                  ]
+                },
+                {
+                  "tagName": "p",
+                  "style": {
+                    "marginTop": "1.5rem",
+                    "fontSize": "0.9rem",
+                    "color": "var(--color-text-muted)",
+                    "lineHeight": "1.6"
+                  },
+                  "textContent": "Every bike is fitted and safety-checked in-store before you ride away. Free first tune-up included."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/sites/shop/pages/products.md

@@ -0,0 +1,29 @@
+---
+title: "Shop Bikes & Gear — Cadence Cycles"
+state:
+  products:
+    $prototype: ContentCollection
+    $src: "@jxsuite/parser/ContentCollection.class.json"
+    contentType: product
+    sort:
+      field: order
+      order: asc
+---
+
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::shp-section-header{props.eyebrow="The shop" props.heading="Every ride, one roof" props.subheading="From race-day carbon to a kid's first pedal bike. Filter by category to find your fit — then tap through for the full spec."}
+:::::
+
+::::::section{style.padding="clamp(3rem, 8vw, 5rem) 1.5rem"}
+::shp-product-filter{}
+
+:::::div{id="shop-grid" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.maxWidth="var(--max-width)" style.margin="0 auto" style.--md.gridTemplateColumns="repeat(2, 1fr)" style.--sm.gridTemplateColumns="1fr"}
+::::Array{items.ref="#/state/products"}
+:::div{data-category="${item.data.category}"}
+::shp-product-card{props.title="${item.data.title}" props.price="${item.data.price}" props.category="${item.data.category}" props.image="${item.data.image}" props.href="/products/${item.data.sku}/"}
+:::
+::::
+:::::
+::::::
+
+::shp-cta{props.heading="Not sure which bike is you?" props.text="Tell us where you ride and we'll match you to the right frame, size, and setup — no pressure." props.cta="Ask a Mechanic" props.ctaHref="/contact/"}

package/sites/shop/project.json

@@ -0,0 +1,105 @@
+{
+  "name": "Cadence Cycles",
+  "url": "https://example.com",
+  "defaults": {
+    "layout": "./layouts/base.json",
+    "lang": "en"
+  },
+  "$head": [
+    {
+      "tagName": "meta",
+      "attributes": { "name": "viewport", "content": "width=device-width, initial-scale=1" }
+    },
+    {
+      "tagName": "meta",
+      "attributes": {
+        "name": "description",
+        "content": "Cadence Cycles is a neighborhood bike shop selling road, mountain, gravel, and kids' bikes, plus gear, service, and expert fittings."
+      }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "icon", "href": "/favicon.svg" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.googleapis.com" }
+    },
+    {
+      "tagName": "link",
+      "attributes": { "rel": "preconnect", "href": "https://fonts.gstatic.com", "crossorigin": "" }
+    },
+    {
+      "tagName": "link",
+      "attributes": {
+        "rel": "stylesheet",
+        "href": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap"
+      }
+    }
+  ],
+  "$media": {
+    "--": "1200px",
+    "--lg": "(max-width: 1024px)",
+    "--md": "(max-width: 768px)",
+    "--sm": "(max-width: 640px)"
+  },
+  "style": {
+    "--color-primary": "#16a34a",
+    "--color-primary-hover": "#15803d",
+    "--color-ink": "#0f172a",
+    "--color-bg-dark": "#0f172a",
+    "--color-bg-cream": "#f3f6f4",
+    "--color-bg-white": "#ffffff",
+    "--color-text-primary": "#0f172a",
+    "--color-text-white": "#ffffff",
+    "--color-text-muted": "#64748b",
+    "--color-border": "#e2e8f0",
+    "--color-accent": "#f59e0b",
+    "--font-heading": "'Space Grotesk', 'Segoe UI', system-ui, sans-serif",
+    "--max-width": "1200px",
+    "--max-width-narrow": "820px",
+    "--radius": "0.75rem",
+    "margin": "0",
+    "padding": "0",
+    "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    "lineHeight": "1.6",
+    "color": "var(--color-text-primary)",
+    "backgroundColor": "var(--color-bg-white)"
+  },
+  "imports": {
+    "Markdown": "@jxsuite/parser/Markdown.class.json",
+    "ContentCollection": "@jxsuite/parser/ContentCollection.class.json",
+    "ContentEntry": "@jxsuite/parser/ContentEntry.class.json"
+  },
+  "images": {
+    "optimize": true,
+    "widths": [320, 640, 960, 1280, 1920],
+    "formats": ["webp", "avif"],
+    "quality": { "webp": 80, "avif": 65, "jpeg": 80, "png": 80 },
+    "sizes": "(max-width: 768px) 100vw, 50vw",
+    "lazyLoad": true
+  },
+  "contentTypes": {
+    "product": {
+      "source": "./content/product/",
+      "format": "Markdown",
+      "schema": {
+        "type": "object",
+        "properties": {
+          "title": { "type": "string" },
+          "sku": { "type": "string" },
+          "price": { "type": "string" },
+          "category": { "type": "string" },
+          "image": { "type": "string", "format": "image" },
+          "order": { "type": "number" }
+        },
+        "required": ["title", "sku"]
+      }
+    }
+  },
+  "build": {
+    "outDir": "./dist",
+    "format": "directory",
+    "trailingSlash": "always"
+  }
+}

package/sites/shop/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <rect width="32" height="32" rx="7" fill="#16a34a"/>
+  <circle cx="9.5" cy="21" r="4.5" fill="none" stroke="#fff" stroke-width="1.8"/>
+  <circle cx="22.5" cy="21" r="4.5" fill="none" stroke="#fff" stroke-width="1.8"/>
+  <path d="M9.5 21l5-8h6l-4 8M14.5 13h-3M20.5 13l2 8" fill="none" stroke="#fff" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>