@jxsuite/starters 3.3.2 → 3.5.0

package/sites/nonprofit/components/np-program-card.jxn

@@ -0,0 +1,95 @@
+/- kdl-version 2
+
+np-program-card {
+    state {
+        title ""
+        summary ""
+        tag Program
+        href "/programs/"
+        image type=string format=image default=""
+    }
+    style {
+        display flex
+        flexDirection column
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius-lg)"
+        overflow hidden
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.18s, box-shadow 0.18s"
+        :hover transform="translateY(-5px)" boxShadow="var(--shadow-float)"
+    }
+    div {
+        style position=relative aspectRatio="16 / 11" overflow=hidden
+        img src="${state.image}" alt="${state.title}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+            }
+        }
+        span {
+            style {
+                position absolute
+                left "1rem"
+                top "1rem"
+                display inline-flex
+                alignItems center
+                gap "0.4rem"
+                padding "0.4rem 0.85rem"
+                borderRadius "999px"
+                backgroundColor "rgba(251,245,236,0.92)"
+                backdropFilter "blur(4px)"
+                fontSize "0.74rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.08em"
+                color "var(--color-primary)"
+            }
+            span 🌿 {
+                style fontSize="0.8rem"
+            }
+            span "${state.tag}"
+        }
+    }
+    div {
+        style padding="1.6rem 1.6rem 1.75rem" display=flex flexDirection=column flex="1"
+        h3 "${state.title}" {
+            style {
+                fontFamily "var(--font-display)"
+                fontSize "1.5rem"
+                fontWeight "600"
+                lineHeight "1.15"
+                color "var(--color-primary-deep)"
+                margin "0 0 0.6rem"
+            }
+        }
+        p "${state.summary}" {
+            style {
+                margin "0 0 1.35rem"
+                color "var(--color-text-muted)"
+                fontSize "1rem"
+                fontWeight "600"
+                lineHeight "1.65"
+                flex "1"
+            }
+        }
+        a href="${state.href}" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.45rem"
+                color "var(--color-accent)"
+                fontWeight "800"
+                fontSize "0.95rem"
+                textDecoration none
+                transition "gap 0.18s"
+                :hover gap="0.85rem"
+            }
+            span "Learn more"
+            span →
+        }
+    }
+}

package/sites/nonprofit/components/np-section-header.jxn

@@ -0,0 +1,63 @@
+/- kdl-version 2
+
+np-section-header {
+    state eyebrow="" heading="" headingAccent="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        marginTop "0"
+        marginBottom "clamp(2.25rem, 5vw, 3rem)"
+        marginLeft "${state.align === 'center' ? 'auto' : '0'}"
+        marginRight "${state.align === 'center' ? 'auto' : '0'}"
+        textAlign "${state.align}"
+    }
+    p "${state.eyebrow}" {
+        style {
+            display "${state.eyebrow ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.5rem"
+            padding "0.35rem 0.9rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-primary-soft)"
+            textTransform uppercase
+            letterSpacing "0.14em"
+            fontSize "0.75rem"
+            fontWeight "800"
+            color "var(--color-primary)"
+            margin "0 0 1rem"
+        }
+    }
+    h2 {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(2rem, 4.4vw, 2.9rem)"
+            fontWeight "600"
+            lineHeight "1.1"
+            letterSpacing "-0.015em"
+            color "var(--color-primary-deep)"
+            margin "0"
+        }
+        span "${state.heading} "
+        span "${state.headingAccent}" {
+            style {
+                display "${state.headingAccent ? 'inline' : 'none'}"
+                fontStyle italic
+                fontWeight "500"
+                color "var(--color-accent)"
+            }
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.12rem"
+            lineHeight "1.7"
+            color "var(--color-text-muted)"
+            fontWeight "600"
+            margin "1rem auto 0"
+            maxWidth "${state.align === 'center' ? '52ch' : 'none'}"
+            marginLeft "${state.align === 'center' ? 'auto' : '0'}"
+            marginRight "${state.align === 'center' ? 'auto' : '0'}"
+        }
+    }
+}

package/sites/nonprofit/components/np-stat.jxn

@@ -0,0 +1,51 @@
+/- kdl-version 2
+
+np-stat {
+    state number="" label="" note="" icon=""
+    style {
+        display flex
+        flexDirection column
+        alignItems flex-start
+        gap "0.35rem"
+        padding "1.6rem 1.6rem 1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        boxShadow "var(--shadow-card)"
+    }
+    span "${state.icon}" {
+        style {
+            display "${state.icon ? 'inline-flex' : 'none'}"
+            alignItems center
+            justifyContent center
+            width "2.6rem"
+            height "2.6rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-primary-soft)"
+            fontSize "1.3rem"
+            marginBottom "0.5rem"
+        }
+    }
+    div "${state.number}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "clamp(2.4rem, 5vw, 3.4rem)"
+            fontWeight "700"
+            lineHeight "1"
+            letterSpacing "-0.02em"
+            color "var(--color-primary)"
+        }
+    }
+    div "${state.label}" {
+        style fontWeight="800" fontSize="1.02rem" color="var(--color-text-primary)"
+    }
+    p "${state.note}" {
+        style {
+            display "${state.note ? 'block' : 'none'}"
+            margin "0.15rem 0 0"
+            fontSize "0.92rem"
+            fontWeight "600"
+            color "var(--color-text-muted)"
+            lineHeight "1.55"
+        }
+    }
+}

package/sites/nonprofit/components/np-step.jxn

@@ -0,0 +1,73 @@
+/- kdl-version 2
+
+np-step {
+    state {
+        num ""
+        title ""
+        text ""
+        badgeBg "var(--color-primary-soft)"
+        badgeColor "var(--color-primary)"
+        href ""
+        linkText ""
+    }
+    style {
+        display flex
+        flexDirection column
+        padding "2rem 1.9rem 2.1rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius-lg)"
+        boxShadow "var(--shadow-card)"
+        transition "transform 0.18s"
+        :hover transform="translateY(-4px)"
+    }
+    div "${state.num}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3.5rem"
+            height "3.5rem"
+            borderRadius "999px 999px 999px 6px"
+            backgroundColor "${state.badgeBg}"
+            color "${state.badgeColor}"
+            fontSize "1.6rem"
+            marginBottom "1.25rem"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.4rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "1rem"
+            fontWeight "600"
+            lineHeight "1.65"
+            flex "1"
+        }
+    }
+    a href="${state.href}" {
+        style {
+            display "${state.linkText ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.45rem"
+            marginTop "1.35rem"
+            color "${state.badgeColor}"
+            fontWeight "800"
+            fontSize "0.95rem"
+            textDecoration none
+            transition "gap 0.18s"
+            :hover gap="0.85rem"
+        }
+        span "${state.linkText}"
+        span →
+    }
+}

package/sites/nonprofit/components/np-team-member.jxn

@@ -0,0 +1,60 @@
+/- kdl-version 2
+
+np-team-member {
+    state initials="" name="" role="" bio=""
+    style {
+        display flex
+        flexDirection column
+        alignItems center
+        textAlign center
+        padding "2rem 1.75rem 2.1rem"
+        backgroundColor "var(--color-bg-cream)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius-lg)"
+    }
+    div "${state.initials}" {
+        style {
+            width "4.75rem"
+            height "4.75rem"
+            margin "0 0 1.15rem"
+            borderRadius "58% 42% 47% 53% / 55% 50% 50% 45%"
+            backgroundColor "var(--color-primary)"
+            color "var(--color-text-white)"
+            display flex
+            alignItems center
+            justifyContent center
+            fontFamily "var(--font-display)"
+            fontWeight "700"
+            fontSize "1.55rem"
+            boxShadow "0 14px 26px -14px rgba(23,58,43,0.8)"
+        }
+    }
+    h3 "${state.name}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.32rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 0.15rem"
+        }
+    }
+    p "${state.role}" {
+        style {
+            margin "0 0 0.85rem"
+            color "var(--color-accent)"
+            fontWeight "800"
+            fontSize "0.85rem"
+            textTransform uppercase
+            letterSpacing "0.06em"
+        }
+    }
+    p "${state.bio}" {
+        style {
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "0.98rem"
+            fontWeight "600"
+            lineHeight "1.65"
+        }
+    }
+}

package/sites/nonprofit/components/np-testimonial.jxn

@@ -0,0 +1,120 @@
+/- kdl-version 2
+
+np-testimonial {
+    state {
+        quote ""
+        author ""
+        role ""
+        image type=string format=image default=""
+        imageAlt ""
+        stat ""
+        statLabel ""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-bg-mint)"
+        borderRadius "var(--radius-lg)"
+        border "1px solid var(--color-border)"
+    }
+    div {
+        style {
+            display grid
+            gridTemplateColumns "0.82fr 1.18fr"
+            gap "clamp(1.75rem, 4vw, 3.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            style position=relative alignSelf=stretch minHeight="clamp(320px, 42vw, 460px)" {
+                @--md minHeight="300px"
+            }
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    position absolute
+                    inset "0"
+                    width "100%"
+                    height "100%"
+                    objectFit cover
+                    display block
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    display "${state.stat ? 'flex' : 'none'}"
+                    flexDirection column
+                    right "1.1rem"
+                    bottom "1.1rem"
+                    padding "0.85rem 1.15rem"
+                    backgroundColor "var(--color-bg-white)"
+                    borderRadius "1rem"
+                    boxShadow "var(--shadow-card)"
+                    lineHeight "1.1"
+                }
+                span "${state.stat}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.65rem"
+                        fontWeight "700"
+                        color "var(--color-primary)"
+                    }
+                }
+                span "${state.statLabel}" {
+                    style {
+                        fontSize "0.76rem"
+                        fontWeight "700"
+                        color "var(--color-text-muted)"
+                        maxWidth "14ch"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                padding "clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem) 0"
+                @--md padding="0 clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 6vw, 2.75rem)"
+            }
+            div “ {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "3.5rem"
+                    lineHeight "0.6"
+                    color "var(--color-accent)"
+                    margin "0 0 1rem"
+                }
+            }
+            p "${state.quote}" {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(1.4rem, 2.6vw, 1.95rem)"
+                    lineHeight "1.4"
+                    fontWeight "500"
+                    letterSpacing "-0.01em"
+                    color "var(--color-primary-deep)"
+                    margin "0 0 1.75rem"
+                }
+            }
+            div {
+                style display=flex alignItems=center gap="0.9rem"
+                span {
+                    style {
+                        width "2.6rem"
+                        height "0.28rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-accent)"
+                    }
+                }
+                div {
+                    div "${state.author}" {
+                        style fontWeight="800" fontSize="1.05rem" color="var(--color-text-primary)"
+                    }
+                    div "${state.role}" {
+                        style fontSize="0.92rem" fontWeight="700" color="var(--color-primary)"
+                    }
+                }
+            }
+        }
+    }
+}

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

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

package/sites/nonprofit/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/nonprofit/project.jxn

@@ -0,0 +1,99 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Rivertown Foundation"
+
+url "https://example.com"
+
+defaults layout="./layouts/base.jxn" lang=en
+
+$head {
+    meta name=viewport content="width=device-width, initial-scale=1"
+    meta name=description content="Rivertown Foundation is a community nonprofit running local programs in food security, youth mentoring, housing, and job training — powered by neighbors helping neighbors."
+    link rel=icon href="/favicon.svg"
+    link rel=preconnect href="https://fonts.googleapis.com"
+    link rel=preconnect href="https://fonts.gstatic.com" crossorigin=""
+    link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..600&family=Nunito:wght@400;500;600;700;800&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 560px)"
+}
+
+style {
+    --color-primary "#2f7d55"
+    --color-primary-hover "#256845"
+    --color-primary-deep "#173a2b"
+    --color-primary-soft "#e3efe6"
+    --color-accent "#f26a3d"
+    --color-accent-hover "#e0552b"
+    --color-accent-soft "#ffe6da"
+    --color-gold "#e9a63d"
+    --color-gold-soft "#fbeccf"
+    --color-ink "#22332a"
+    --color-bg-dark "#173a2b"
+    --color-bg-cream "#fbf5ec"
+    --color-bg-cream-deep "#f6ecda"
+    --color-bg-mint "#eef6ef"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#23342b"
+    --color-text-secondary "#3f5147"
+    --color-text-muted "#61715f"
+    --color-text-white "#ffffff"
+    --color-border "#eadfce"
+    --color-border-strong "#dccdb4"
+    --font-display "'Fraunces', Georgia, 'Times New Roman', serif"
+    --font-heading "'Fraunces', Georgia, 'Times New Roman', serif"
+    --font-body "'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1180px"
+    --max-width-wide "1300px"
+    --max-width-narrow "760px"
+    --radius "1.25rem"
+    --radius-sm "0.75rem"
+    --radius-lg "2rem"
+    --radius-pill "999px"
+    --shadow-card "0 2px 6px rgba(23,58,43,0.05), 0 20px 44px -26px rgba(23,58,43,0.3)"
+    --shadow-float "0 34px 74px -32px rgba(23,58,43,0.4)"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.7"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-white)"
+    WebkitFontSmoothing antialiased
+}
+
+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
+}
+
+content {
+    programs {
+        source "./content/programs/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                summary type=string
+                image type=string format=image
+                order type=number
+            }
+            required title summary
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}