@jxsuite/starters 3.3.2 → 3.5.0

package/sites/blog/components/bl-post-card.jxn

@@ -0,0 +1,106 @@
+/- kdl-version 2
+
+bl-post-card {
+    state {
+        number ""
+        title ""
+        excerpt ""
+        date ""
+        tag ""
+        href "#"
+        cover type=string format=image default=""
+    }
+    style display=block
+    a href="${state.href}" {
+        style {
+            display grid
+            gridTemplateColumns "clamp(2.4rem, 5vw, 4.5rem) 1fr auto"
+            gap "clamp(1rem, 3vw, 2.75rem)"
+            alignItems start
+            padding "1.75rem 0.75rem"
+            textDecoration none
+            color "var(--color-text-primary)"
+            borderBottom "1px solid var(--color-border)"
+            transition "color 0.18s, background-color 0.18s"
+            @--sm gridTemplateColumns="auto 1fr" gap="1rem 1.25rem"
+            :hover color="var(--color-primary)" backgroundColor="var(--color-bg-cream)"
+        }
+        span "${state.number}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontWeight "400"
+                fontSize "clamp(1.6rem, 4vw, 2.6rem)"
+                lineHeight "1"
+                color "var(--color-text-muted)"
+                fontVariantNumeric tabular-nums
+            }
+        }
+        div {
+            style minWidth="0" {
+                @--sm gridColumn="1 / -1"
+            }
+            span "${state.tag}" {
+                style {
+                    display "${state.tag ? 'block' : 'none'}"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    color "var(--color-primary)"
+                    marginBottom "0.6rem"
+                }
+            }
+            h3 "${state.title}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontWeight "600"
+                    fontSize "clamp(1.5rem, 3.2vw, 2.15rem)"
+                    lineHeight "1.1"
+                    letterSpacing "-0.015em"
+                    margin "0 0 0.6rem"
+                    color inherit
+                }
+            }
+            p "${state.excerpt}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontStyle italic
+                    fontWeight "400"
+                    fontSize "1.15rem"
+                    lineHeight "1.5"
+                    color "var(--color-text-muted)"
+                    margin "0"
+                    maxWidth "62ch"
+                }
+            }
+        }
+        div {
+            style textAlign=right whiteSpace=nowrap {
+                @--sm textAlign=left gridColumn="1 / -1"
+            }
+            span "${state.date}" {
+                style {
+                    display block
+                    fontFamily "var(--font-body)"
+                    fontSize "0.72rem"
+                    fontWeight "500"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    color "var(--color-text-muted)"
+                    marginBottom "0.6rem"
+                }
+            }
+            span "Read →" {
+                style {
+                    fontFamily "var(--font-body)"
+                    fontSize "0.78rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    color "var(--color-primary)"
+                }
+            }
+        }
+    }
+}

package/sites/blog/components/bl-post-list.jxn

@@ -0,0 +1,11 @@
+/- kdl-version 2
+
+bl-post-list {
+    style {
+        display block
+        maxWidth "var(--max-width)"
+        margin "0 auto"
+        borderTop "1.5px solid var(--color-rule)"
+    }
+    slot
+}

package/sites/blog/components/bl-prose.jxn

@@ -0,0 +1,67 @@
+/- kdl-version 2
+
+bl-prose {
+    style {
+        display block
+        fontFamily "var(--font-body)"
+        fontSize "1.2rem"
+        lineHeight "1.8"
+        color "var(--color-text-primary)"
+        "& p" margin="0 0 1.5rem"
+        "& > p:first-of-type::first-letter" {
+            float left
+            fontFamily "var(--font-heading)"
+            fontWeight "900"
+            fontSize "4.6rem"
+            lineHeight "0.78"
+            paddingRight "0.7rem"
+            paddingTop "0.35rem"
+            color "var(--color-primary)"
+        }
+        "& h2" {
+            fontFamily "var(--font-heading)"
+            fontSize "1.9rem"
+            fontWeight "700"
+            lineHeight "1.15"
+            letterSpacing "-0.015em"
+            margin "3rem 0 1rem"
+        }
+        "& h3" {
+            fontFamily "var(--font-heading)"
+            fontSize "1.45rem"
+            fontWeight "600"
+            margin "2.25rem 0 0.85rem"
+        }
+        "& a" {
+            color "var(--color-primary)"
+            textDecoration underline
+            textUnderlineOffset "3px"
+            textDecorationThickness "1px"
+        }
+        "& blockquote" {
+            margin "2.5rem 0"
+            padding "0.25rem 0 0.25rem 1.75rem"
+            borderLeft "2px solid var(--color-primary)"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontWeight "400"
+            fontSize "1.55rem"
+            lineHeight "1.45"
+            color "var(--color-text-primary)"
+        }
+        "& ul" margin="0 0 1.5rem" padding="0 0 0 1.4rem"
+        "& ol" margin="0 0 1.5rem" padding="0 0 0 1.4rem"
+        "& li" margin="0 0 0.5rem"
+        "& img" width="100%" height=auto margin="2.5rem 0"
+        "& strong" fontWeight="600"
+        "& em" fontStyle=italic
+        "& code" {
+            fontFamily "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
+            fontSize "0.85em"
+            backgroundColor "var(--color-bg-cream)"
+            padding "0.15em 0.4em"
+        }
+        "& hr" border=none borderTop="1px solid var(--color-border)" width="4rem" margin="3rem auto"
+    }
+    slot
+}

package/sites/blog/components/bl-section-header.jxn

@@ -0,0 +1,52 @@
+/- kdl-version 2
+
+bl-section-header {
+    state eyebrow="" heading="" subheading=""
+    style display=block maxWidth="var(--max-width)" margin="0 auto 2rem"
+    div {
+        style {
+            display flex
+            alignItems baseline
+            justifyContent space-between
+            gap "1.5rem"
+            flexWrap wrap
+            borderBottom "1.5px solid var(--color-rule)"
+            paddingBottom "0.9rem"
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(1.7rem, 3.5vw, 2.4rem)"
+                fontWeight "700"
+                lineHeight "1.05"
+                letterSpacing "-0.02em"
+                margin "0"
+                color "var(--color-text-primary)"
+            }
+        }
+        span "${state.eyebrow}" {
+            style {
+                display "${state.eyebrow ? 'block' : 'none'}"
+                fontFamily "var(--font-body)"
+                fontSize "0.74rem"
+                fontWeight "500"
+                textTransform uppercase
+                letterSpacing "0.18em"
+                color "var(--color-text-muted)"
+                whiteSpace nowrap
+            }
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontSize "1.2rem"
+            lineHeight "1.5"
+            color "var(--color-text-muted)"
+            margin "1rem 0 0"
+            maxWidth "54ch"
+        }
+    }
+}

package/sites/blog/components/bl-tag-pill.jxn

@@ -0,0 +1,19 @@
+/- kdl-version 2
+
+bl-tag-pill {
+    state label=""
+    style display=inline-flex alignItems=center gap="0.5rem"
+    span {
+        style width="1.6rem" height="1px" backgroundColor="var(--color-primary)"
+    }
+    span "${state.label}" {
+        style {
+            fontFamily "var(--font-body)"
+            fontSize "0.74rem"
+            fontWeight "600"
+            textTransform uppercase
+            letterSpacing "0.18em"
+            color "var(--color-primary)"
+        }
+    }
+}

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

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

package/sites/blog/layouts/post.jxn

@@ -0,0 +1,13 @@
+/- kdl-version 2
+$layout "./layouts/base.jxn"
+
+div {
+    article {
+        style {
+            maxWidth "var(--max-width-narrow)"
+            margin "0 auto"
+            padding "clamp(2.5rem, 6vw, 4.5rem) 1.5rem"
+        }
+        slot
+    }
+}

package/sites/blog/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/blog/pages/[slug].jxn

@@ -0,0 +1,107 @@
+/- kdl-version 2
+$layout "./layouts/post.jxn"
+$paths contentType=posts param=slug field=id
+$head {
+    meta name=description content="${state.entry.data.excerpt}"
+}
+
+$element .title="${state.entry.data.title} — The Long Field" {
+    state {
+        entry {
+            $prototype ContentEntry
+            contentType posts
+            field id
+            id (ref)"#/$params/slug"
+            $src "@jxsuite/parser/ContentEntry.class.json"
+        }
+    }
+    a href="/" "← All writing" {
+        style {
+            display inline-flex
+            alignItems center
+            gap "0.4rem"
+            color "var(--color-primary)"
+            textDecoration none
+            fontWeight "600"
+            fontSize "0.95rem"
+            marginBottom "2rem"
+            :hover textDecoration=underline
+        }
+    }
+    header {
+        style marginBottom="2rem"
+        div {
+            style marginBottom="1.1rem"
+            bl-tag-pill {
+                $props label="${state.entry.data.tag}"
+            }
+        }
+        h1 "${state.entry.data.title}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2.1rem, 5vw, 3.2rem)"
+                fontWeight "600"
+                lineHeight "1.1"
+                letterSpacing "-0.02em"
+                margin "0 0 1rem"
+                color "var(--color-text-primary)"
+            }
+        }
+        p "${state.entry.data.excerpt}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.35rem"
+                lineHeight "1.5"
+                color "var(--color-text-muted)"
+                fontStyle italic
+                margin "0 0 1.5rem"
+            }
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "0.6rem"
+                fontSize "0.9rem"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                color "var(--color-text-muted)"
+                borderTop "1px solid var(--color-border)"
+                paddingTop "1.25rem"
+            }
+            span "${state.entry.data.author}" {
+                style fontWeight="600" color="var(--color-text-primary)"
+            }
+            span ·
+            span "${state.entry.data.date}"
+        }
+    }
+    img src="${state.entry.data.cover}" alt="${state.entry.data.title}" loading=lazy {
+        style {
+            width "100%"
+            aspectRatio "16 / 9"
+            objectFit cover
+            borderRadius "var(--radius)"
+            marginBottom "2.5rem"
+            display "${state.entry.data.cover ? 'block' : 'none'}"
+        }
+    }
+    bl-prose {
+        .children "${state.entry.$children}"
+    }
+    hr {
+        style border=none borderTop="1px solid var(--color-border)" margin="3rem 0 2.5rem"
+    }
+    bl-author-bio {
+        $props {
+            name "${state.entry.data.author}"
+            role "Writer & editor"
+            bio "Marren Oda writes The Long Field — slow essays on design, technology, and the craft of making things well."
+            avatar "/images/author.jpg"
+        }
+    }
+    div {
+        style marginTop="2.5rem"
+        bl-newsletter-cta
+    }
+}

package/sites/blog/project.jxn

@@ -0,0 +1,86 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "The Long Field"
+
+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="The Long Field — essays and field notes on design, technology, and the craft of making things well."
+    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;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#9a2f1a"
+    --color-primary-hover "#7a2412"
+    --color-ink "#1c1a17"
+    --color-bg-dark "#1c1a17"
+    --color-bg-cream "#efe9db"
+    --color-bg-white "#f6f1e7"
+    --color-paper "#f6f1e7"
+    --color-text-primary "#1c1a17"
+    --color-text-white "#f6f1e7"
+    --color-text-muted "#6f685c"
+    --color-border "#d8cfbd"
+    --color-rule "#1c1a17"
+    --color-accent "#9a2f1a"
+    --font-heading "'Fraunces', Georgia, 'Times New Roman', serif"
+    --font-body "'Newsreader', Georgia, 'Times New Roman', serif"
+    --max-width "1160px"
+    --max-width-narrow "680px"
+    --radius "0"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "19px"
+    lineHeight "1.7"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-paper)"
+}
+
+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 {
+    posts {
+        source "./content/posts/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                excerpt type=string
+                date type=string
+                author type=string
+                tag type=string
+                cover type=string format=image
+                order type=number
+            }
+            required title excerpt date
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/course/components/co-application.jxn

@@ -0,0 +1,106 @@
+/- kdl-version 2
+
+co-application {
+    state heading="Start your application"
+    style display=block
+    form action="#" method=post {
+        style {
+            display grid
+            gap "1.1rem"
+            alignContent start
+            marginTop "1.5rem"
+            padding "clamp(1.5rem, 4vw, 2.25rem)"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            borderRadius "var(--radius)"
+            boxShadow "0 16px 44px -28px rgba(15,20,36,0.4)"
+            "& label" {
+                display block
+                fontFamily "var(--font-mono)"
+                fontSize "0.74rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.06em"
+                color "var(--color-text-muted)"
+                marginBottom "0.4rem"
+            }
+            "& input, & select, & textarea" {
+                width "100%"
+                padding "0.8rem 0.95rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily "var(--font-body)"
+                backgroundColor "var(--color-bg-white)"
+                color "var(--color-text-primary)"
+            }
+            "& input:focus, & select:focus, & textarea:focus" {
+                outline none
+                borderColor "var(--color-primary)"
+                boxShadow "0 0 0 3px rgba(79,70,229,0.15)"
+            }
+        }
+        div {
+            label for=app-name "Your name"
+            input id=app-name type=text name=name placeholder="Ada Lovelace" required="true"
+        }
+        div {
+            label for=app-email "Email address"
+            input id=app-email type=email name=email placeholder=you@example.com required="true"
+        }
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1.1rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            div {
+                label for=app-cohort "Preferred cohort"
+                select id=app-cohort name=cohort {
+                    option value="" disabled="true" selected="true" "Choose a cohort"
+                    option value=fall "Fall 2026 · Sept 8"
+                    option value=winter "Winter 2027 · Jan 12"
+                    option value=unsure "Not sure yet"
+                }
+            }
+            div {
+                label for=app-exp "Coding experience"
+                select id=app-exp name=experience {
+                    option value="" disabled="true" selected="true" "Choose one"
+                    option value=none "Complete beginner"
+                    option value=some "Some self-taught"
+                    option value=cs "CS / bootcamp background"
+                }
+            }
+        }
+        div {
+            label for=app-goals "What do you want to build?"
+            textarea id=app-goals name=goals rows="3" placeholder="Tell us what you're hoping to build or become..." {
+                style fontFamily="var(--font-body)" resize=vertical
+            }
+        }
+        button type=submit "Submit Application →" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.9rem 1.75rem"
+                border none
+                borderRadius "999px"
+                fontSize "1rem"
+                fontWeight "600"
+                fontFamily "var(--font-body)"
+                cursor pointer
+                justifySelf start
+                boxShadow "0 14px 30px -14px rgba(79,70,229,0.9)"
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-1px)"
+            }
+        }
+        p "// demo form — wire it to your CRM or email in pages/enroll.md" {
+            style {
+                fontFamily "var(--font-mono)"
+                fontSize "0.78rem"
+                color "var(--color-text-faint)"
+                margin "0"
+            }
+        }
+    }
+}