@jxsuite/starters 3.3.2 → 3.5.0

package/sites/shop/components/shp-service.jxn

@@ -0,0 +1,58 @@
+/- kdl-version 2
+
+shp-service {
+    state icon="" title="" text="" price=""
+    style {
+        display flex
+        gap "1rem"
+        alignItems flex-start
+        padding "1.5rem"
+        backgroundColor "var(--color-bg-cream)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+    }
+    div "${state.icon}" {
+        style {
+            flex "0 0 auto"
+            width "2.75rem"
+            height "2.75rem"
+            display flex
+            alignItems center
+            justifyContent center
+            borderRadius "0.6rem"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            fontSize "1.35rem"
+            lineHeight "1"
+        }
+    }
+    div {
+        div {
+            style display=flex alignItems=baseline justifyContent=space-between gap="0.75rem"
+            h3 "${state.title}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.15rem"
+                    fontWeight "600"
+                    margin "0"
+                }
+            }
+            span "${state.price}" {
+                style {
+                    display "${state.price ? 'inline' : 'none'}"
+                    fontWeight "700"
+                    color "var(--color-primary)"
+                    whiteSpace nowrap
+                }
+            }
+        }
+        p "${state.text}" {
+            style {
+                margin "0.35rem 0 0"
+                color "var(--color-text-muted)"
+                fontSize "0.95rem"
+                lineHeight "1.6"
+            }
+        }
+    }
+}

package/sites/shop/components/shp-stat.jxn

@@ -0,0 +1,27 @@
+/- kdl-version 2
+
+shp-stat {
+    state value="" label=""
+    style display=block
+    div "${state.value}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2.25rem, 5vw, 3rem)"
+            fontWeight "800"
+            lineHeight "1"
+            color "var(--color-primary)"
+            letterSpacing "-0.03em"
+            fontVariantNumeric tabular-nums
+        }
+    }
+    div "${state.label}" {
+        style {
+            marginTop "0.5rem"
+            fontSize "0.85rem"
+            color "var(--color-text-muted)"
+            textTransform uppercase
+            letterSpacing "0.08em"
+            fontWeight "600"
+        }
+    }
+}

package/sites/shop/components/shp-trust.jxn

@@ -0,0 +1,39 @@
+/- kdl-version 2
+
+shp-trust {
+    state icon="" title="" text=""
+    style display=flex alignItems=flex-start gap="0.9rem" padding="0.25rem 0"
+    span "${state.icon}" {
+        style {
+            flex "0 0 auto"
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "2.85rem"
+            height "2.85rem"
+            borderRadius "999px"
+            backgroundColor "rgba(255,255,255,0.08)"
+            border "1px solid rgba(255,255,255,0.14)"
+            fontSize "1.35rem"
+            lineHeight "1"
+        }
+    }
+    div {
+        div "${state.title}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.02rem"
+                fontWeight "700"
+                color "var(--color-text-white)"
+            }
+        }
+        p "${state.text}" {
+            style {
+                margin "0.25rem 0 0"
+                fontSize "0.9rem"
+                lineHeight "1.55"
+                color "rgba(255,255,255,0.68)"
+            }
+        }
+    }
+}

package/sites/shop/components/shp-visit-info.jxn

@@ -0,0 +1,82 @@
+/- kdl-version 2
+
+shp-visit-info {
+    state {
+        address1 "412 Spoke Avenue"
+        address2 "Riverbend, CA 90210"
+        phone "(555) 042-7100"
+        phoneHref tel:+15550427100
+        weekdays "9:00am – 6:30pm"
+        saturday "9:00am – 5:00pm"
+        sunday "10:00am – 4:00pm"
+    }
+    style display=grid gap="1.5rem"
+    div {
+        style {
+            padding "2rem"
+            backgroundColor "var(--color-bg-cream)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius)"
+        }
+        h3 "Find us" {
+            style fontFamily="var(--font-heading)" fontSize="1.4rem" margin="0 0 1rem"
+        }
+        p "${state.address1}" {
+            style margin="0 0 0.35rem"
+        }
+        p "${state.address2}" {
+            style margin="0 0 0.75rem"
+        }
+        a href="${state.phoneHref}" "${state.phone}" {
+            style color="var(--color-primary)" textDecoration=none fontWeight="600"
+        }
+    }
+    div {
+        style {
+            padding "2rem"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius)"
+        }
+        h3 "Shop hours" {
+            style fontFamily="var(--font-heading)" fontSize="1.4rem" margin="0 0 1.25rem"
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+            }
+            span "Monday – Friday" {
+                style fontWeight="500"
+            }
+            span "${state.weekdays}" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style {
+                display flex
+                justifyContent space-between
+                padding "0.6rem 0"
+                borderBottom "1px solid var(--color-border)"
+            }
+            span Saturday {
+                style fontWeight="500"
+            }
+            span "${state.saturday}" {
+                style color="var(--color-text-muted)"
+            }
+        }
+        div {
+            style display=flex justifyContent=space-between padding="0.6rem 0"
+            span Sunday {
+                style fontWeight="500"
+            }
+            span "${state.sunday}" {
+                style color="var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/shop/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/shop/layouts/base.jxn

@@ -0,0 +1,17 @@
+/- kdl-version 2
+$elements (ref)"../components/shp-nav.jxn" (ref)"../components/shp-footer.jxn"
+
+div {
+    style {
+        minHeight "100vh"
+        display flex
+        flexDirection column
+        backgroundColor "var(--color-bg-white)"
+    }
+    shp-nav
+    main {
+        style flex="1"
+        slot
+    }
+    shp-footer
+}

package/sites/shop/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"
   }
 }

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

@@ -0,0 +1,351 @@
+/- kdl-version 2
+$paths contentType=product param=sku field=sku
+$head {
+    meta name=description content="${state.product.data.title} — shop this ${state.product.data.category} bike at Cadence Cycles. Fitted in-store with a free first tune-up, free shipping, and 30-day returns."
+}
+
+$element .title="${state.product.data.title} — Cadence Cycles" {
+    state {
+        product {
+            $prototype ContentEntry
+            contentType product
+            field sku
+            id (ref)"#/$params/sku"
+            $src "@jxsuite/parser/ContentEntry.class.json"
+        }
+    }
+    article {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(1.5rem, 4vw, 2.5rem) 1.5rem clamp(3rem, 6vw, 4.5rem)"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "0.5rem"
+                fontSize "0.85rem"
+                fontWeight "600"
+                color "var(--color-text-muted)"
+                marginBottom "1.75rem"
+                flexWrap wrap
+            }
+            a href="/" Home {
+                style color="var(--color-text-muted)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            span "/" {
+                style opacity="0.5"
+            }
+            a href="/products/" Shop {
+                style color="var(--color-text-muted)" textDecoration=none {
+                    :hover color="var(--color-primary)"
+                }
+            }
+            span "/" {
+                style opacity="0.5"
+            }
+            span "${state.product.data.category}" {
+                style color="var(--color-text-primary)"
+            }
+        }
+        div {
+            style {
+                display grid
+                gridTemplateColumns "1.05fr 0.95fr"
+                gap "clamp(1.75rem, 4vw, 3.25rem)"
+                alignItems start
+                @--md gridTemplateColumns="1fr"
+            }
+            div {
+                div {
+                    style {
+                        position relative
+                        aspectRatio "1 / 1"
+                        borderRadius "var(--radius-lg)"
+                        overflow hidden
+                        backgroundColor "var(--color-panel)"
+                        border "1px solid var(--color-border)"
+                        boxShadow "var(--shadow-card)"
+                    }
+                    img src="${state.product.data.image}" alt="${state.product.data.title}" loading=eager {
+                        style {
+                            position absolute
+                            inset "0"
+                            width "100%"
+                            height "100%"
+                            objectFit cover
+                            display block
+                        }
+                    }
+                    span "${state.product.data.badge}" {
+                        style {
+                            display "${state.product.data.badge ? 'inline-flex' : 'none'}"
+                            position absolute
+                            top "1rem"
+                            left "1rem"
+                            alignItems center
+                            padding "0.35rem 0.8rem"
+                            borderRadius "999px"
+                            fontSize "0.72rem"
+                            fontWeight "800"
+                            textTransform uppercase
+                            letterSpacing "0.06em"
+                            color "var(--color-text-white)"
+                            backgroundColor "${state.product.data.badge === 'Sale' ? 'var(--color-sale)' : (state.product.data.badge === 'New' ? 'var(--color-primary)' : 'var(--color-gold)')}"
+                            boxShadow "0 8px 18px -8px rgba(13,17,23,0.5)"
+                        }
+                    }
+                }
+                div {
+                    style {
+                        display grid
+                        gridTemplateColumns "repeat(3, 1fr)"
+                        gap "0.6rem"
+                        marginTop "0.85rem"
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.5rem"
+                            padding "0.7rem 0.75rem"
+                            borderRadius "var(--radius-sm)"
+                            backgroundColor "var(--color-bg-cream)"
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-secondary)"
+                        }
+                        span 🔧 {
+                            style color="var(--color-primary)"
+                        }
+                        span "Fitted free"
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.5rem"
+                            padding "0.7rem 0.75rem"
+                            borderRadius "var(--radius-sm)"
+                            backgroundColor "var(--color-bg-cream)"
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-secondary)"
+                        }
+                        span 🚚 {
+                            style color="var(--color-primary)"
+                        }
+                        span "Ships fast"
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.5rem"
+                            padding "0.7rem 0.75rem"
+                            borderRadius "var(--radius-sm)"
+                            backgroundColor "var(--color-bg-cream)"
+                            fontSize "0.8rem"
+                            fontWeight "600"
+                            color "var(--color-text-secondary)"
+                        }
+                        span ↩ {
+                            style color="var(--color-primary)"
+                        }
+                        span "30-day returns"
+                    }
+                }
+            }
+            div {
+                div "${state.product.data.category}" {
+                    style {
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.12em"
+                        color "var(--color-primary)"
+                    }
+                }
+                h1 "${state.product.data.title}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2rem, 4.5vw, 3rem)"
+                        fontWeight "800"
+                        lineHeight "1.04"
+                        letterSpacing "-0.03em"
+                        margin "0.6rem 0 0.75rem"
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        gap "0.5rem"
+                        marginBottom "1.35rem"
+                        fontSize "0.9rem"
+                    }
+                    span ★★★★★ {
+                        style color="var(--color-accent)" letterSpacing="0.08em"
+                    }
+                    span "4.9 · 128 reviews" {
+                        style color="var(--color-text-muted)" fontWeight="600"
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems baseline
+                        gap "0.85rem"
+                        flexWrap wrap
+                        paddingBottom "1.5rem"
+                        marginBottom "1.5rem"
+                        borderBottom "1px solid var(--color-border)"
+                    }
+                    span "${state.product.data.price}" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontSize "2.4rem"
+                            fontWeight "800"
+                            letterSpacing "-0.02em"
+                            color "var(--color-text-primary)"
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    span "${state.product.data.oldPrice}" {
+                        style {
+                            display "${state.product.data.oldPrice ? 'inline' : 'none'}"
+                            fontSize "1.3rem"
+                            fontWeight "600"
+                            color "var(--color-text-muted)"
+                            textDecoration line-through
+                            fontVariantNumeric tabular-nums
+                        }
+                    }
+                    span "On sale" {
+                        style {
+                            display "${state.product.data.oldPrice ? 'inline-flex' : 'none'}"
+                            alignItems center
+                            padding "0.28rem 0.7rem"
+                            borderRadius "999px"
+                            backgroundColor "var(--color-sale-tint)"
+                            color "var(--color-sale)"
+                            fontSize "0.75rem"
+                            fontWeight "800"
+                            textTransform uppercase
+                            letterSpacing "0.05em"
+                        }
+                    }
+                }
+                div {
+                    style fontSize="1.05rem" lineHeight="1.75" color="var(--color-text-secondary)"
+                    .children "${state.product.$children ?? []}"
+                }
+                div {
+                    style display=flex flexWrap=wrap gap="0.75rem" marginTop="1.75rem"
+                    a href="/contact/" {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            gap "0.5rem"
+                            backgroundColor "var(--color-primary)"
+                            color "var(--color-text-white)"
+                            padding "1rem 2.25rem"
+                            borderRadius "999px"
+                            fontSize "1.05rem"
+                            fontWeight "700"
+                            textDecoration none
+                            boxShadow "0 14px 30px -12px rgba(10,157,84,0.8)"
+                            transition "transform 0.15s, background-color 0.15s"
+                            :hover {
+                                backgroundColor "var(--color-primary-hover)"
+                                transform "translateY(-2px)"
+                            }
+                        }
+                        span 🛒
+                        span "Add to cart"
+                    }
+                    a href="/contact/" "Reserve in-store" {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            border "1px solid var(--color-line-strong)"
+                            color "var(--color-text-primary)"
+                            padding "1rem 1.85rem"
+                            borderRadius "999px"
+                            fontSize "1.05rem"
+                            fontWeight "700"
+                            textDecoration none
+                            transition "border-color 0.15s"
+                            :hover borderColor="var(--color-primary)"
+                        }
+                    }
+                }
+                div {
+                    style {
+                        marginTop "1.75rem"
+                        padding "1.25rem"
+                        borderRadius "var(--radius)"
+                        backgroundColor "var(--color-bg-cream)"
+                        display grid
+                        gap "0.7rem"
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.6rem"
+                            fontSize "0.92rem"
+                            fontWeight "500"
+                            color "var(--color-text-secondary)"
+                        }
+                        span ✓ {
+                            style color="var(--color-primary)" fontWeight="800"
+                        }
+                        span "Professionally assembled and safety-checked before pickup."
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.6rem"
+                            fontSize "0.92rem"
+                            fontWeight "500"
+                            color "var(--color-text-secondary)"
+                        }
+                        span ✓ {
+                            style color="var(--color-primary)" fontWeight="800"
+                        }
+                        span "Free first tune-up and a lifetime of expert advice."
+                    }
+                    div {
+                        style {
+                            display flex
+                            alignItems center
+                            gap "0.6rem"
+                            fontSize "0.92rem"
+                            fontWeight "500"
+                            color "var(--color-text-secondary)"
+                        }
+                        span ✓ {
+                            style color="var(--color-primary)" fontWeight="800"
+                        }
+                        span "In stock now — 30-day returns, no questions asked."
+                    }
+                }
+            }
+        }
+    }
+    shp-cta {
+        $props {
+            heading "Not sure it's the right fit?"
+            text "Tell us where and how you ride and our mechanics will match you to the right frame, size, and setup — no pressure."
+            cta "Ask a mechanic"
+            ctaHref "/contact/"
+            cta2 "Keep browsing"
+            cta2Href "/products/"
+        }
+    }
+}