@jxsuite/starters 3.3.2 → 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.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/event/project.jxn

@@ -0,0 +1,114 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Horizon Conf 2026"
+
+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="Horizon Conf 2026 — a one-day tech and design conference. Two stages, hands-on workshops, and the people building what's next. Save the date: June 12, 2026."
+    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=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#ff3d9a"
+    --color-primary-hover "#ff6bb4"
+    --color-ink "#050308"
+    --color-bg "#0a0711"
+    --color-bg-dark "#0a0711"
+    --color-bg-cream "#0f0b1c"
+    --color-bg-white "#150f28"
+    --color-bg-elev "#150f28"
+    --color-bg-elev2 "#1e1638"
+    --color-text-primary "#f3eefe"
+    --color-text-white "#ffffff"
+    --color-text-muted "#a99fc8"
+    --color-border "#2b2148"
+    --color-accent "#22e0ff"
+    --color-cyan "#22e0ff"
+    --color-violet "#a855f7"
+    --color-lime "#c6ff4d"
+    --grad "linear-gradient(115deg, #22e0ff 0%, #a855f7 50%, #ff3d9a 100%)"
+    --grad-btn "linear-gradient(120deg, #ff3d9a 0%, #a855f7 100%)"
+    --grad-cyan "linear-gradient(120deg, #22e0ff 0%, #7c74ff 100%)"
+    --glow "rgba(255, 61, 154, 0.5)"
+    --glow-cyan "rgba(34, 224, 255, 0.4)"
+    --font-heading "'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif"
+    --font-body "'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1200px"
+    --max-width-narrow "860px"
+    --radius "1rem"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg)"
+    h1 {
+        fontFamily "var(--font-heading)"
+        color "var(--color-text-primary)"
+    }
+    h2 {
+        fontFamily "var(--font-heading)"
+        color "var(--color-text-primary)"
+    }
+    h3 {
+        fontFamily "var(--font-heading)"
+        color "var(--color-text-primary)"
+    }
+    h4 {
+        fontFamily "var(--font-heading)"
+        color "var(--color-text-primary)"
+    }
+    strong {
+        color "var(--color-text-primary)"
+    }
+    a {
+        color "var(--color-primary)"
+    }
+}
+
+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 {
+    sessions {
+        source "./content/sessions/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                time type=string
+                track type=string
+                speaker type=string
+                order type=number
+            }
+            required title track
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}