@jxsuite/starters 3.4.0 → 3.6.0

package/sites/fitness-studio/components/fs-section-header.jxn

@@ -0,0 +1,55 @@
+/- kdl-version 2
+
+fs-section-header {
+    state eyebrow="" heading="" subheading="" align=center onDark=#false
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "${state.align === 'left' ? '0 0 2.75rem' : '0 auto 2.75rem'}"
+        textAlign "${state.align}"
+    }
+    div {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.55rem"
+            marginBottom "1rem"
+        }
+        span {
+            style width="1.6rem" height="3px" borderRadius="2px" background="var(--grad-hot)"
+        }
+        span "${state.eyebrow}" {
+            style {
+                fontFamily "var(--font-heading)"
+                textTransform uppercase
+                letterSpacing "0.16em"
+                fontSize "0.78rem"
+                fontWeight "700"
+                color "var(--color-primary)"
+            }
+        }
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(2.2rem, 5.2vw, 3.6rem)"
+            fontWeight "400"
+            lineHeight "0.98"
+            letterSpacing "0.01em"
+            textTransform uppercase
+            margin "0"
+            color "${state.onDark ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.12rem"
+            lineHeight "1.7"
+            fontWeight "500"
+            color "${state.onDark ? 'rgba(255,255,255,0.75)' : 'var(--color-text-muted)'}"
+            margin "${state.align === 'left' ? '1.15rem 0 0' : '1.15rem auto 0'}"
+            maxWidth "54ch"
+        }
+    }
+}

package/sites/fitness-studio/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"
@@ -28596,6 +28605,21 @@
             }
           ]
         },
+        "$script": {
+          "additionalProperties": false,
+          "description": "This document's own modules, as TypeScript module text (spec.md §23.2). A state entry names an export of one with `$src: \"#client\"` or `$src: \"#server\"`. `client` runs in the browser; `server` runs only on the server and is never sent to one.",
+          "properties": {
+            "client": {
+              "description": "The module the browser runs. A Function entry with `$src: \"#client\"` is one of its exports.",
+              "type": "string"
+            },
+            "server": {
+              "description": "The module the server runs. A `timing: \"server\"` entry with `$src: \"#server\"` is one of its exports, called with `(args, env)`.",
+              "type": "string"
+            }
+          },
+          "type": "object"
+        },
         "$shadow": {
           "description": "Render this component into a shadow root instead of the light DOM (spec.md §16.6). Off unless set: a shadow root isolates the component's styles from the page and replaces the <slot> emulation with real slot distribution, so it changes how the component composes. Overrides `defaults.shadow` in both directions — `false` opts one component out of a project that opted in.",
           "oneOf": [

package/sites/fitness-studio/layouts/base.jxn

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

package/sites/fitness-studio/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.3"
+    "@jxsuite/parser": "^5.0.0"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.5.0",
-    "@jxsuite/runtime": "^6.2.2"
+    "@jxsuite/compiler": "^8.7.0",
+    "@jxsuite/runtime": "^7.0.0"
   }
 }

package/sites/fitness-studio/project.jxn

@@ -4,7 +4,7 @@ project "Ember Yoga & Fitness"
 
 url "https://example.com"
 
-defaults layout="./layouts/base.json" lang=en
+defaults layout="./layouts/base.jxn" lang=en
 
 $head {
     meta name=viewport content="width=device-width, initial-scale=1"

package/sites/home-services/components/hs-callbar.jxn

@@ -0,0 +1,60 @@
+/- kdl-version 2
+
+hs-callbar {
+    state phone="(970) 555-0148" phoneHref=tel:+19705550148
+    style {
+        display none
+        position fixed
+        bottom "0"
+        left "0"
+        right "0"
+        zIndex "70"
+        gridTemplateColumns "1fr 1fr"
+        backgroundColor "var(--color-steel)"
+        borderTop "2px solid var(--color-primary)"
+        boxShadow "0 -8px 26px -14px rgba(0,0,0,0.7)"
+        @--md display=grid
+    }
+    a href="${state.phoneHref}" {
+        style {
+            display flex
+            alignItems center
+            justifyContent center
+            gap "0.5rem"
+            padding "0.95rem 1rem"
+            color "var(--color-text-white)"
+            textDecoration none
+            fontFamily "var(--font-heading)"
+            textTransform uppercase
+            letterSpacing "0.04em"
+            fontWeight "600"
+            fontSize "1rem"
+            borderRight "1px solid var(--color-steel-line)"
+        }
+        span ☏ {
+            style color="var(--color-primary)" fontSize="1.15rem"
+        }
+        span "Call Now"
+    }
+    a href="/contact/" {
+        style {
+            display flex
+            alignItems center
+            justifyContent center
+            gap "0.5rem"
+            padding "0.95rem 1rem"
+            backgroundColor "var(--color-primary)"
+            color "var(--color-text-white)"
+            textDecoration none
+            fontFamily "var(--font-heading)"
+            textTransform uppercase
+            letterSpacing "0.04em"
+            fontWeight "600"
+            fontSize "1rem"
+        }
+        span ⚡ {
+            style fontSize="1.1rem"
+        }
+        span "Free Quote"
+    }
+}

package/sites/home-services/components/hs-cta.jxn

@@ -0,0 +1,139 @@
+/- kdl-version 2
+
+hs-cta {
+    state {
+        eyebrow ""
+        heading ""
+        text ""
+        cta "Get a Free Quote"
+        ctaHref "/contact/"
+        phone ""
+        phoneHref tel:+19705550148
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-bg-dark)"
+        backgroundImage "linear-gradient(105deg, rgba(14,26,35,0.97) 0%, rgba(14,26,35,0.9) 48%, rgba(14,26,35,0.62) 100%), url('${state.bg}')"
+        backgroundSize "cover, cover"
+        backgroundPosition "center, center"
+        color "var(--color-text-white)"
+    }
+    div {
+        style position=absolute top="0" left="0" right="0" height="6px" background="var(--hazard)"
+    }
+    div {
+        style {
+            position relative
+            zIndex "5"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3.25rem, 7vw, 5rem) 1.5rem"
+            display grid
+            gridTemplateColumns "1.35fr 1fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2rem"
+        }
+        div {
+            p {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    textTransform uppercase
+                    fontFamily "var(--font-heading)"
+                    letterSpacing "0.14em"
+                    fontSize "0.82rem"
+                    fontWeight "600"
+                    color "var(--color-primary)"
+                    margin "0 0 1rem"
+                }
+                span {
+                    style {
+                        width "1.6rem"
+                        height "0.2rem"
+                        backgroundColor "var(--color-primary)"
+                        display inline-block
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.1rem, 4.6vw, 3.2rem)"
+                    fontWeight "700"
+                    textTransform uppercase
+                    lineHeight "1.02"
+                    letterSpacing "0.01em"
+                    margin "0 0 1rem"
+                    color "var(--color-text-white)"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    fontSize "1.12rem"
+                    lineHeight "1.65"
+                    color "#cdd8e0"
+                    margin "0"
+                    maxWidth "52ch"
+                }
+            }
+        }
+        div {
+            style display=flex flexDirection=column gap="1rem" alignItems=stretch
+            a href="${state.ctaHref}" "${state.cta}" {
+                style {
+                    display block
+                    textAlign center
+                    backgroundColor "var(--color-primary)"
+                    color "var(--color-text-white)"
+                    padding "1.05rem 2rem"
+                    borderRadius "var(--radius-sm)"
+                    fontFamily "var(--font-heading)"
+                    textTransform uppercase
+                    letterSpacing "0.05em"
+                    fontSize "1.1rem"
+                    fontWeight "600"
+                    textDecoration none
+                    boxShadow "0 16px 34px -14px rgba(244,81,30,0.9)"
+                    transition "background-color 0.15s, transform 0.15s"
+                    :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-2px)"
+                }
+            }
+            a href="${state.phoneHref}" {
+                style {
+                    display "${state.phone ? 'flex' : 'none'}"
+                    alignItems center
+                    justifyContent center
+                    gap "0.6rem"
+                    padding "1rem 2rem"
+                    border "1px solid rgba(255,255,255,0.28)"
+                    borderRadius "var(--radius-sm)"
+                    backgroundColor "rgba(255,255,255,0.04)"
+                    color "var(--color-text-white)"
+                    textDecoration none
+                    transition "background-color 0.15s, border-color 0.15s"
+                    :hover {
+                        backgroundColor "rgba(255,255,255,0.09)"
+                        borderColor "rgba(255,255,255,0.5)"
+                    }
+                }
+                span ☏ {
+                    style color="var(--color-primary)" fontSize="1.2rem"
+                }
+                span "${state.phone}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontWeight "700"
+                        fontSize "1.3rem"
+                        letterSpacing "0.01em"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/home-services/components/hs-feature.jxn

@@ -0,0 +1,43 @@
+/- kdl-version 2
+
+hs-feature {
+    state icon="" title="" text=""
+    style {
+        display flex
+        gap "1.1rem"
+        padding "1.6rem 1.5rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderLeft "4px solid var(--color-primary)"
+        borderRadius "var(--radius)"
+    }
+    div "${state.icon}" {
+        style {
+            flexShrink "0"
+            display flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "var(--radius-sm)"
+            backgroundColor "var(--color-primary-soft)"
+            fontSize "1.55rem"
+            lineHeight "1"
+        }
+    }
+    div {
+        h3 "${state.title}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.22rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.02em"
+                margin "0 0 0.4rem"
+            }
+        }
+        p "${state.text}" {
+            style margin="0" color="var(--color-text-muted)" fontSize="0.98rem" lineHeight="1.6"
+        }
+    }
+}

package/sites/home-services/components/hs-footer.jxn

@@ -0,0 +1,169 @@
+/- kdl-version 2
+
+hs-footer {
+    state {
+        brand SUMMIT
+        brandSub "HEATING & COOLING"
+        tagline "Reliable heating and cooling for Northern Colorado homes — repairs, installs, and 24/7 emergency service."
+        address "1420 Prospect Road, Fort Collins, CO 80525"
+        phone "(970) 555-0148"
+        phoneHref tel:+19705550148
+        license "CO HVAC Lic. #C-48219 · Bonded & Insured"
+    }
+    style {
+        display block
+        position relative
+        backgroundColor "var(--color-bg-dark)"
+        color "var(--color-text-white)"
+        paddingBottom "2rem"
+    }
+    div {
+        style height="6px" background="var(--hazard)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "3.25rem 1.5rem 0"
+            display grid
+            gridTemplateColumns "2fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            div {
+                style display=flex alignItems=center gap="0.6rem" marginBottom="0.9rem"
+                span ▲ {
+                    style {
+                        display flex
+                        alignItems center
+                        justifyContent center
+                        width "2.3rem"
+                        height "2.3rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        borderRadius "0.3rem"
+                        fontFamily "var(--font-heading)"
+                        fontWeight "700"
+                        fontSize "1.25rem"
+                        clipPath "polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)"
+                    }
+                }
+                span {
+                    style display=flex flexDirection=column lineHeight="1"
+                    span "${state.brand}" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.25rem"
+                            letterSpacing "0.06em"
+                        }
+                    }
+                    span "${state.brandSub}" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "500"
+                            fontSize "0.58rem"
+                            letterSpacing "0.24em"
+                            color "var(--color-primary)"
+                            marginTop "0.15rem"
+                        }
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style margin="0 0 1rem" opacity="0.72" maxWidth="42ch" lineHeight="1.6"
+            }
+            p "${state.license}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.78rem"
+                    letterSpacing "0.05em"
+                    textTransform uppercase
+                    opacity "0.55"
+                }
+            }
+        }
+        div {
+            div Contact {
+                style {
+                    fontFamily "var(--font-heading)"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.78rem"
+                    color "var(--color-primary)"
+                    marginBottom "0.9rem"
+                    fontWeight "600"
+                }
+            }
+            a href="${state.phoneHref}" "${state.phone}" {
+                style {
+                    display block
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.35rem"
+                    fontWeight "700"
+                    color "var(--color-text-white)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    letterSpacing "0.01em"
+                }
+            }
+            p "${state.address}" {
+                style margin="0" opacity="0.78" lineHeight="1.55"
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    fontFamily "var(--font-heading)"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.78rem"
+                    color "var(--color-primary)"
+                    marginBottom "0.9rem"
+                    fontWeight "600"
+                }
+            }
+            a href="/services/" Services {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    marginBottom "0.45rem"
+                }
+            }
+            a href="/about/" About {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                    marginBottom "0.45rem"
+                }
+            }
+            a href="/contact/" Contact {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    textDecoration none
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.5rem auto 0"
+            padding "1.5rem 1.5rem 0"
+            borderTop "1px solid var(--color-steel-line)"
+            fontSize "0.85rem"
+            opacity "0.55"
+        }
+        p "© Summit Heating & Cooling. Built with Jx." {
+            style margin="0"
+        }
+    }
+}

package/sites/home-services/components/hs-gallery.jxn

@@ -0,0 +1,51 @@
+/- kdl-version 2
+
+hs-gallery {
+    state {
+        img1 type=string format=image default=""
+        img2 type=string format=image default=""
+        img3 type=string format=image default=""
+        alt "Recent HVAC project by Summit Heating & Cooling"
+    }
+    style {
+        boxSizing border-box
+        display grid
+        gridTemplateColumns "minmax(0, 1.62fr) minmax(0, 1fr)"
+        gridTemplateRows "minmax(0, 1fr) minmax(0, 1fr)"
+        gap "0.9rem"
+        height "clamp(360px, 44vw, 540px)"
+        maxWidth "var(--max-width)"
+        margin "0 auto"
+        padding "0 1.5rem"
+        @--sm gridTemplateColumns="1fr" gridTemplateRows=auto height=auto
+    }
+    img src="${state.img1}" alt="${state.alt}" loading=lazy {
+        style {
+            gridColumn "1"
+            gridRow "1 / span 2"
+            width "100%"
+            height "100%"
+            objectFit cover
+            borderRadius "var(--radius)"
+            display block
+            borderBottom "4px solid var(--color-primary)"
+            @--sm gridColumn=auto gridRow=auto height="240px"
+            minHeight "0"
+            minWidth "0"
+        }
+    }
+    img src="${state.img2}" alt="${state.alt}" loading=lazy {
+        style width="100%" height="100%" objectFit=cover borderRadius="var(--radius)" display=block {
+            @--sm height="200px"
+            minHeight "0"
+            minWidth "0"
+        }
+    }
+    img src="${state.img3}" alt="${state.alt}" loading=lazy {
+        style width="100%" height="100%" objectFit=cover borderRadius="var(--radius)" display=block {
+            @--sm height="200px"
+            minHeight "0"
+            minWidth "0"
+        }
+    }
+}