@jxsuite/starters 3.4.0 → 3.5.0

package/sites/event/components/ev-speaker-card.jxn

@@ -0,0 +1,104 @@
+/- kdl-version 2
+
+ev-speaker-card {
+    state {
+        name ""
+        title ""
+        topic ""
+        photo type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        backgroundColor "var(--color-bg-elev)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        transition "transform 0.2s, box-shadow 0.2s, border-color 0.2s"
+        :hover {
+            transform "translateY(-5px)"
+            borderColor "rgba(255,61,154,0.55)"
+            boxShadow "0 26px 60px -22px var(--glow)"
+        }
+    }
+    div {
+        style {
+            position relative
+            aspectRatio "4 / 5"
+            overflow hidden
+            backgroundColor "var(--color-bg-elev2)"
+        }
+        img src="${state.photo}" alt="${state.name}" width="1000" height="1400" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                filter "saturate(1.05) contrast(1.02)"
+                transition "transform 0.35s ease"
+                :hover transform="scale(1.06)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(180deg, rgba(34,224,255,0.18) 0%, transparent 30%, rgba(10,7,17,0.15) 55%, rgba(10,7,17,0.9) 100%)"
+                pointerEvents none
+            }
+        }
+        div {
+            style {
+                position absolute
+                left "0"
+                right "0"
+                bottom "0"
+                height "3px"
+                background "var(--grad)"
+                pointerEvents none
+            }
+        }
+    }
+    div {
+        style padding="1.3rem 1.4rem 1.6rem"
+        h3 "${state.name}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.3rem"
+                fontWeight "700"
+                letterSpacing "-0.01em"
+                margin "0 0 0.3rem"
+                color "var(--color-text-primary)"
+            }
+        }
+        p "${state.title}" {
+            style {
+                margin "0 0 0.75rem"
+                fontSize "0.9rem"
+                fontWeight "600"
+                background "var(--grad)"
+                backgroundClip text
+                webkitBackgroundClip text
+                webkitTextFillColor transparent
+                color "var(--color-accent)"
+            }
+        }
+        p {
+            style {
+                display "${state.topic ? 'flex' : 'none'}"
+                gap "0.5rem"
+                alignItems baseline
+                margin "0"
+                fontSize "0.94rem"
+                lineHeight "1.55"
+                color "var(--color-text-muted)"
+            }
+            span ▸ {
+                style color="var(--color-lime)" fontWeight="700"
+            }
+            span "${state.topic}"
+        }
+    }
+}

package/sites/event/components/ev-sponsors.jxn

@@ -0,0 +1,110 @@
+/- kdl-version 2
+
+ev-sponsors {
+    state {
+        label "Backed by the teams building the modern web"
+        logo1 "◈ Northwind"
+        logo2 "✦ Lumen"
+        logo3 "▲ Apex"
+        logo4 "❖ Corva"
+        logo5 "⬡ Hivebase"
+        logo6 "◐ Kestrel"
+    }
+    style {
+        display block
+        padding "clamp(2.5rem, 5vw, 3.5rem) 1.5rem"
+        borderTop "1px solid var(--color-border)"
+        borderBottom "1px solid var(--color-border)"
+        backgroundColor "var(--color-bg-cream)"
+    }
+    div {
+        style maxWidth="var(--max-width)" margin="0 auto" textAlign=center
+        p "${state.label}" {
+            style {
+                fontSize "0.78rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                color "var(--color-text-muted)"
+                margin "0 0 1.85rem"
+            }
+        }
+        div {
+            style {
+                display flex
+                flexWrap wrap
+                justifyContent center
+                alignItems center
+                gap "clamp(1.5rem, 5vw, 3.5rem)"
+            }
+            span "${state.logo1}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            span "${state.logo2}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            span "${state.logo3}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            span "${state.logo4}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            span "${state.logo5}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    @--sm display=none
+                    :hover opacity="1"
+                }
+            }
+            span "${state.logo6}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    opacity "0.7"
+                    transition "opacity 0.15s"
+                    @--sm display=none
+                    :hover opacity="1"
+                }
+            }
+        }
+    }
+}

package/sites/event/components/ev-stat.jxn

@@ -0,0 +1,39 @@
+/- kdl-version 2
+
+ev-stat {
+    state value="" label=""
+    style {
+        display block
+        textAlign center
+        padding "1.4rem 0.75rem"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        background "linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))"
+        transition "border-color 0.18s, transform 0.18s"
+        :hover borderColor="rgba(255,61,154,0.45)" transform="translateY(-2px)"
+    }
+    div "${state.value}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2.4rem, 5vw, 3.4rem)"
+            fontWeight "800"
+            lineHeight "1"
+            letterSpacing "-0.03em"
+            background "var(--grad)"
+            backgroundClip text
+            webkitBackgroundClip text
+            webkitTextFillColor transparent
+            color "var(--color-accent)"
+        }
+    }
+    div "${state.label}" {
+        style {
+            marginTop "0.55rem"
+            fontSize "0.82rem"
+            fontWeight "600"
+            textTransform uppercase
+            letterSpacing "0.1em"
+            color "var(--color-text-muted)"
+        }
+    }
+}

package/sites/event/components/ev-ticket-card.jxn

@@ -0,0 +1,169 @@
+/- kdl-version 2
+
+ev-ticket-card {
+    state {
+        tier ""
+        price ""
+        period ""
+        description ""
+        perk1 ""
+        perk2 ""
+        perk3 ""
+        perk4 ""
+        cta "Get tickets"
+        ctaHref "/tickets/"
+        featured #false
+        badge "Most popular"
+    }
+    style {
+        display flex
+        flexDirection column
+        position relative
+        padding "2.1rem"
+        borderRadius "var(--radius)"
+        border "${state.featured ? '2px solid transparent' : '1px solid var(--color-border)'}"
+        backgroundColor "${state.featured ? 'var(--color-bg-elev)' : 'var(--color-bg-elev)'}"
+        backgroundImage "${state.featured ? 'linear-gradient(var(--color-bg-elev), var(--color-bg-elev)), var(--grad)' : 'none'}"
+        backgroundOrigin border-box
+        backgroundClip "${state.featured ? 'padding-box, border-box' : 'border-box'}"
+        boxShadow "${state.featured ? '0 30px 70px -22px var(--glow)' : 'none'}"
+        transform "${state.featured ? 'translateY(-6px)' : 'none'}"
+    }
+    span "${state.badge}" {
+        style {
+            display "${state.featured ? 'inline-block' : 'none'}"
+            position absolute
+            top "-0.85rem"
+            left "50%"
+            transform "translateX(-50%)"
+            background "var(--grad-btn)"
+            color "#ffffff"
+            fontSize "0.7rem"
+            fontWeight "800"
+            letterSpacing "0.1em"
+            textTransform uppercase
+            padding "0.35rem 0.95rem"
+            borderRadius "999px"
+            whiteSpace nowrap
+            boxShadow "0 10px 26px -8px var(--glow)"
+        }
+    }
+    h3 "${state.tier}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.4rem"
+            fontWeight "700"
+            letterSpacing "-0.01em"
+            margin "0 0 0.4rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.description}" {
+        style {
+            margin "0 0 1.35rem"
+            fontSize "0.95rem"
+            lineHeight "1.55"
+            color "var(--color-text-muted)"
+        }
+    }
+    div {
+        style display=flex alignItems=baseline gap="0.4rem" marginBottom="1.6rem"
+        span "${state.price}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "2.7rem"
+                fontWeight "800"
+                letterSpacing "-0.03em"
+                lineHeight "1"
+                color "${state.featured ? 'transparent' : 'var(--color-text-primary)'}"
+                background "${state.featured ? 'var(--grad)' : 'none'}"
+                backgroundClip "${state.featured ? 'text' : 'border-box'}"
+                webkitBackgroundClip "${state.featured ? 'text' : 'border-box'}"
+                webkitTextFillColor "${state.featured ? 'transparent' : 'var(--color-text-primary)'}"
+            }
+        }
+        span "${state.period}" {
+            style fontSize="0.9rem" color="var(--color-text-muted)"
+        }
+    }
+    ul {
+        style {
+            listStyle none
+            margin "0 0 1.85rem"
+            padding "0"
+            display flex
+            flexDirection column
+            gap "0.7rem"
+            flex "1"
+        }
+        li {
+            style {
+                display "${state.perk1 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                color "var(--color-text-primary)"
+            }
+            span ✓ {
+                style color="var(--color-lime)" fontWeight="800"
+            }
+            span "${state.perk1}"
+        }
+        li {
+            style {
+                display "${state.perk2 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                color "var(--color-text-primary)"
+            }
+            span ✓ {
+                style color="var(--color-lime)" fontWeight="800"
+            }
+            span "${state.perk2}"
+        }
+        li {
+            style {
+                display "${state.perk3 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                color "var(--color-text-primary)"
+            }
+            span ✓ {
+                style color="var(--color-lime)" fontWeight="800"
+            }
+            span "${state.perk3}"
+        }
+        li {
+            style {
+                display "${state.perk4 ? 'flex' : 'none'}"
+                gap "0.65rem"
+                alignItems flex-start
+                fontSize "0.95rem"
+                color "var(--color-text-primary)"
+            }
+            span ✓ {
+                style color="var(--color-lime)" fontWeight="800"
+            }
+            span "${state.perk4}"
+        }
+    }
+    a href="${state.ctaHref}" "${state.cta}" {
+        style {
+            display block
+            textAlign center
+            padding "0.9rem 1.5rem"
+            borderRadius "999px"
+            fontSize "1rem"
+            fontWeight "700"
+            textDecoration none
+            transition "transform 0.15s, box-shadow 0.15s, background-color 0.15s"
+            color "${state.featured ? '#ffffff' : 'var(--color-text-primary)'}"
+            background "${state.featured ? 'var(--grad-btn)' : 'rgba(255,255,255,0.04)'}"
+            border "${state.featured ? 'none' : '1px solid var(--color-border)'}"
+            boxShadow "${state.featured ? '0 12px 30px -8px var(--glow)' : 'none'}"
+            :hover transform="translateY(-2px)"
+        }
+    }
+}

package/sites/event/components/ev-venue.jxn

@@ -0,0 +1,61 @@
+/- kdl-version 2
+
+ev-venue {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1fr 1fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}"
+            div {
+                style {
+                    position relative
+                    borderRadius "1.15rem"
+                    padding "0.4rem"
+                    background "linear-gradient(150deg, rgba(34,224,255,0.55), rgba(168,85,247,0.35) 45%, rgba(255,61,154,0.5))"
+                    boxShadow "0 30px 70px -30px rgba(0,0,0,0.8), 0 0 80px -30px var(--glow-cyan)"
+                }
+                div {
+                    style {
+                        position relative
+                        borderRadius "0.85rem"
+                        overflow hidden
+                        aspectRatio "3 / 2"
+                        backgroundColor "var(--color-bg-elev)"
+                    }
+                    img src="${state.image}" alt="${state.imageAlt}" width="1600" height="1067" loading=lazy {
+                        style {
+                            position absolute
+                            inset "0"
+                            width "100%"
+                            height "100%"
+                            objectFit cover
+                            display block
+                        }
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontSize "1.08rem"
+                lineHeight "1.8"
+                color "var(--color-text-primary)"
+            }
+            slot
+        }
+    }
+}

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

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

package/sites/event/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.3"
+    "@jxsuite/parser": "^4.3.4"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.5.0",
-    "@jxsuite/runtime": "^6.2.2"
+    "@jxsuite/compiler": "^8.6.0",
+    "@jxsuite/runtime": "^6.3.0"
   }
 }

package/sites/event/project.jxn

@@ -4,7 +4,7 @@ project "Horizon Conf 2026"
 
 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/fitness-studio/components/fs-band.jxn

@@ -0,0 +1,119 @@
+/- kdl-version 2
+
+fs-band {
+    state {
+        kicker ""
+        heading ""
+        text ""
+        cta ""
+        ctaHref "/contact/"
+        image type=string format=image default=""
+    }
+    style {
+        display flex
+        alignItems center
+        justifyContent center
+        position relative
+        overflow hidden
+        minHeight "clamp(360px, 58vh, 620px)"
+        padding "clamp(3.5rem, 8vw, 6rem) 1.5rem"
+        textAlign center
+        color "#ffffff"
+        backgroundColor "var(--duo-shadow)"
+    }
+    div {
+        style position=absolute inset="0" zIndex="0"
+        img src="${state.image}" alt="" width="1920" height="1080" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                objectPosition "center 35%"
+                filter "grayscale(100%) contrast(1.12)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                backgroundColor "var(--duo-shadow)"
+                mixBlendMode lighten
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(120deg, #d6157a 0%, #ff2e63 52%, #ff8c42 100%)"
+                mixBlendMode multiply
+                opacity "0.9"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "radial-gradient(ellipse 70% 70% at 50% 50%, rgba(20,6,16,0.15), rgba(20,6,16,0.55))"
+            }
+        }
+    }
+    div {
+        style position=relative zIndex="5" maxWidth="var(--max-width-narrow)"
+        p "${state.kicker}" {
+            style {
+                display "${state.kicker ? 'block' : 'none'}"
+                margin "0 0 1.1rem"
+                fontFamily "var(--font-heading)"
+                textTransform uppercase
+                letterSpacing "0.22em"
+                fontSize "0.8rem"
+                fontWeight "700"
+                color "rgba(255,255,255,0.85)"
+            }
+        }
+        p "${state.heading}" {
+            style {
+                margin "0"
+                fontFamily "var(--font-display)"
+                fontSize "clamp(2.4rem, 7vw, 5rem)"
+                fontWeight "400"
+                lineHeight "0.95"
+                letterSpacing "0.01em"
+                textTransform uppercase
+                textShadow "0 14px 40px rgba(20,6,16,0.4)"
+            }
+        }
+        p "${state.text}" {
+            style {
+                display "${state.text ? 'block' : 'none'}"
+                margin "1.4rem auto 0"
+                maxWidth "44ch"
+                fontSize "1.1rem"
+                fontWeight "500"
+                lineHeight "1.65"
+                color "rgba(255,255,255,0.92)"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display "${state.cta ? 'inline-block' : 'none'}"
+                marginTop "2rem"
+                backgroundColor "#ffffff"
+                color "var(--color-ink)"
+                padding "1rem 2.3rem"
+                borderRadius "999px"
+                fontFamily "var(--font-heading)"
+                fontSize "0.9rem"
+                fontWeight "800"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                textDecoration none
+                boxShadow "0 16px 40px -14px rgba(0,0,0,0.5)"
+                transition "transform 0.15s, box-shadow 0.15s"
+                :hover transform="translateY(-3px)" boxShadow="0 22px 48px -14px rgba(0,0,0,0.55)"
+            }
+        }
+    }
+}