@jxsuite/starters 3.3.2 → 3.5.0

package/sites/portfolio/components/pv-project-card.jxn

@@ -0,0 +1,118 @@
+/- kdl-version 2
+
+pv-project-card {
+    state {
+        number ""
+        title ""
+        category ""
+        year ""
+        href "#"
+        cover type=string format=image default=""
+        alt ""
+    }
+    style display=block minWidth="0"
+    a href="${state.href}" {
+        style {
+            position relative
+            display block
+            height "100%"
+            overflow hidden
+            textDecoration none
+            color "var(--color-text-white)"
+            backgroundColor "var(--color-bg-elev)"
+            ":hover img" transform="scale(1.06)"
+            ":hover figcaption" transform="translateY(0)" opacity="1"
+        }
+        img src="${state.cover}" alt="${state.alt}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                transition "transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                inset "0"
+                background "linear-gradient(to top, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.25) 40%, transparent 68%)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                left "0"
+                right "0"
+                bottom "0"
+                padding "clamp(1.25rem, 2.5vw, 2rem)"
+            }
+            div {
+                style display=flex alignItems=center gap="0.7rem" marginBottom="0.6rem"
+                span "${state.number}" {
+                    style {
+                        fontFamily "var(--font-label)"
+                        fontSize "0.72rem"
+                        letterSpacing "0.1em"
+                        color "var(--color-primary)"
+                    }
+                }
+                span {
+                    style {
+                        width "1.5rem"
+                        height "1px"
+                        backgroundColor "var(--color-primary)"
+                        opacity "0.7"
+                    }
+                }
+                span "${state.category}" {
+                    style {
+                        display "${state.category ? 'inline' : 'none'}"
+                        fontSize "0.66rem"
+                        fontWeight "600"
+                        letterSpacing "0.2em"
+                        textTransform uppercase
+                        color "var(--color-text-white)"
+                        opacity "0.75"
+                    }
+                }
+            }
+            div {
+                style display=flex alignItems=baseline justifyContent=space-between gap="1rem"
+                h3 "${state.title}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontWeight "500"
+                        fontSize "clamp(1.6rem, 2.8vw, 2.4rem)"
+                        lineHeight "1.05"
+                        margin "0"
+                    }
+                }
+                span "${state.year}" {
+                    style {
+                        display "${state.year ? 'inline' : 'none'}"
+                        fontSize "0.8rem"
+                        color "var(--color-text-white)"
+                        opacity "0.6"
+                        whiteSpace nowrap
+                    }
+                }
+            }
+            figcaption "View project →" {
+                style {
+                    marginTop "0.75rem"
+                    fontSize "0.72rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.18em"
+                    color "var(--color-primary)"
+                    transform "translateY(0.75rem)"
+                    opacity "0"
+                    transition "transform 0.3s, opacity 0.3s"
+                }
+            }
+        }
+    }
+}

package/sites/portfolio/components/pv-project-grid.jxn

@@ -0,0 +1,29 @@
+/- kdl-version 2
+
+pv-project-grid {
+    state {}
+    style {
+        display grid
+        gridTemplateColumns "repeat(12, 1fr)"
+        gridAutoRows "clamp(230px, 32vw, 460px)"
+        gap "0.5rem"
+        padding "0 0.5rem"
+        "& pv-project-card" gridColumn="span 6"
+        "& pv-project-card:nth-of-type(6n + 1)" gridColumn="span 7"
+        "& pv-project-card:nth-of-type(6n + 2)" gridColumn="span 5"
+        "& pv-project-card:nth-of-type(6n + 3)" gridColumn="span 5"
+        "& pv-project-card:nth-of-type(6n + 4)" gridColumn="span 7"
+        "& pv-project-card:nth-of-type(6n + 5)" gridColumn="span 6"
+        "& pv-project-card:nth-of-type(6n + 6)" gridColumn="span 6"
+        @--sm gridTemplateColumns="1fr" gridAutoRows="68vw" {
+            "& pv-project-card" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 1)" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 2)" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 3)" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 4)" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 5)" gridColumn="span 1"
+            "& pv-project-card:nth-of-type(6n + 6)" gridColumn="span 1"
+        }
+    }
+    slot
+}

package/sites/portfolio/components/pv-section-header.jxn

@@ -0,0 +1,65 @@
+/- kdl-version 2
+
+pv-section-header {
+    state eyebrow="" heading="" subheading=""
+    style {
+        display block
+        maxWidth "var(--max-width)"
+        margin "0 auto"
+        padding "0 clamp(1.5rem, 4vw, 4rem)"
+    }
+    div {
+        style {
+            display flex
+            alignItems flex-end
+            justifyContent space-between
+            gap "2rem"
+            flexWrap wrap
+            borderBottom "1px solid var(--color-line)"
+            paddingBottom "1.5rem"
+        }
+        div {
+            div {
+                style {
+                    display "${state.eyebrow ? 'flex' : 'none'}"
+                    alignItems center
+                    gap "0.85rem"
+                    marginBottom "1.1rem"
+                }
+                span {
+                    style width="2.25rem" height="1px" backgroundColor="var(--color-primary)"
+                }
+                span "${state.eyebrow}" {
+                    style {
+                        textTransform uppercase
+                        letterSpacing "0.24em"
+                        fontSize "0.7rem"
+                        fontWeight "500"
+                        color "var(--color-primary)"
+                    }
+                }
+            }
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.2rem, 5vw, 3.6rem)"
+                    fontWeight "400"
+                    lineHeight "1.02"
+                    letterSpacing "-0.01em"
+                    margin "0"
+                    color "var(--color-text-primary)"
+                }
+            }
+        }
+        p "${state.subheading}" {
+            style {
+                display "${state.subheading ? 'block' : 'none'}"
+                fontSize "1.02rem"
+                lineHeight "1.7"
+                color "var(--color-text-muted)"
+                margin "0"
+                maxWidth "40ch"
+            }
+        }
+    }
+}

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

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

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

@@ -0,0 +1,177 @@
+/- kdl-version 2
+$paths contentType=projects param=slug field=slug
+$head {
+    meta name=description content="${state.entry.data.title} — a ${state.entry.data.category} project by Aperture Studio."
+}
+
+$element .title="${state.entry.data.title} — Aperture Studio" {
+    state {
+        entry {
+            $prototype ContentEntry
+            contentType projects
+            field slug
+            id (ref)"#/$params/slug"
+            $src "@jxsuite/parser/ContentEntry.class.json"
+        }
+    }
+    article {
+        style {
+            maxWidth "var(--max-width-narrow)"
+            margin "0 auto"
+            padding "clamp(7rem, 11vw, 9rem) 1.5rem clamp(3.5rem, 8vw, 6rem)"
+        }
+        a href="/work/" "← All work" {
+            style {
+                display inline-block
+                color "var(--color-primary)"
+                textDecoration none
+                fontWeight "600"
+                fontSize "0.85rem"
+                letterSpacing "0.05em"
+                textTransform uppercase
+                marginBottom "2rem"
+                :hover textDecoration=underline
+            }
+        }
+        header {
+            style marginBottom="2.5rem"
+            div {
+                style display=flex alignItems=center gap="0.85rem" marginBottom="1.25rem"
+                span "${state.entry.data.category}" {
+                    style {
+                        display inline-block
+                        padding "0.3rem 0.8rem"
+                        border "1px solid var(--color-border)"
+                        borderRadius "999px"
+                        fontSize "0.72rem"
+                        fontWeight "600"
+                        letterSpacing "0.14em"
+                        textTransform uppercase
+                        color "var(--color-primary)"
+                        backgroundColor "var(--color-bg-cream)"
+                    }
+                }
+                span "${state.entry.data.year}" {
+                    style fontSize="0.85rem" color="var(--color-text-muted)" letterSpacing="0.05em"
+                }
+            }
+            h1 "${state.entry.data.title}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.5rem, 6vw, 4rem)"
+                    fontWeight "600"
+                    lineHeight "1.06"
+                    letterSpacing "-0.01em"
+                    margin "0"
+                }
+            }
+        }
+        img src="${state.entry.data.cover}" alt="${state.entry.data.title}" {
+            style {
+                width "100%"
+                maxHeight "34rem"
+                objectFit cover
+                borderRadius "var(--radius)"
+                display "${state.entry.data.cover ? 'block' : 'none'}"
+                marginBottom "2.75rem"
+            }
+        }
+        div {
+            style {
+                fontSize "1.15rem"
+                lineHeight "1.85"
+                color "var(--color-text-primary)"
+                maxWidth "62ch"
+                margin "0 0 3.5rem"
+            }
+            .children "${state.entry.$children ?? []}"
+        }
+        section {
+            h2 "Selected frames" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.75rem"
+                    fontWeight "600"
+                    margin "0 0 1.5rem"
+                    paddingBottom "0.6rem"
+                    borderBottom "2px solid var(--color-ink)"
+                }
+            }
+            div {
+                style display=grid gridTemplateColumns="repeat(3, 1fr)" gap="1rem" {
+                    @--sm gridTemplateColumns="1fr"
+                }
+                img src="/images/project-2.jpg" alt="${state.entry.data.title} — frame" loading=lazy {
+                    style {
+                        width "100%"
+                        aspectRatio "4 / 5"
+                        objectFit cover
+                        borderRadius "var(--radius)"
+                        display block
+                    }
+                }
+                img src="/images/project-4.jpg" alt="${state.entry.data.title} — frame" loading=lazy {
+                    style {
+                        width "100%"
+                        aspectRatio "4 / 5"
+                        objectFit cover
+                        borderRadius "var(--radius)"
+                        display block
+                    }
+                }
+                img src="/images/project-6.jpg" alt="${state.entry.data.title} — frame" loading=lazy {
+                    style {
+                        width "100%"
+                        aspectRatio "4 / 5"
+                        objectFit cover
+                        borderRadius "var(--radius)"
+                        display block
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                marginTop "3.5rem"
+                padding "clamp(2.5rem, 6vw, 3.5rem)"
+                backgroundColor "var(--color-bg-dark)"
+                color "var(--color-text-white)"
+                borderRadius "var(--radius)"
+                textAlign center
+            }
+            h2 "Planning something similar?" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.75rem, 4vw, 2.5rem)"
+                    fontWeight "600"
+                    margin "0 0 1rem"
+                }
+            }
+            p "Tell us about your project and we'll be in touch to talk through the details." {
+                style {
+                    fontSize "1.1rem"
+                    lineHeight "1.7"
+                    opacity "0.82"
+                    margin "0 auto 2rem"
+                    maxWidth "48ch"
+                }
+            }
+            a href="/contact/" "Start a Project" {
+                style {
+                    display inline-block
+                    backgroundColor "var(--color-primary)"
+                    color "var(--color-text-white)"
+                    padding "0.9rem 2.25rem"
+                    borderRadius "var(--radius)"
+                    fontSize "0.95rem"
+                    fontWeight "600"
+                    letterSpacing "0.05em"
+                    textTransform uppercase
+                    textDecoration none
+                    transition "background-color 0.15s"
+                    :hover backgroundColor="var(--color-primary-hover)"
+                }
+            }
+        }
+    }
+}

package/sites/portfolio/project.jxn

@@ -0,0 +1,85 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Aperture Studio"
+
+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="Aperture Studio — a photography and creative studio crafting image-forward stories across weddings, portraits, editorial, travel, food, and architecture."
+    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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Fraunces:opsz,wght@9..144,300;9..144,400&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#c8a45c"
+    --color-primary-hover "#dcbd77"
+    --color-ink "#ece9e3"
+    --color-bg-dark "#161619"
+    --color-bg-cream "#161619"
+    --color-bg-white "#0c0c0d"
+    --color-bg "#0c0c0d"
+    --color-bg-elev "#161619"
+    --color-text-primary "#ece9e3"
+    --color-text-white "#ece9e3"
+    --color-text-muted "#8f8b82"
+    --color-border "#2a2a2e"
+    --color-line "#2a2a2e"
+    --color-accent "#c8a45c"
+    --font-heading "'Cormorant Garamond', Georgia, 'Times New Roman', serif"
+    --font-label "'Fraunces', Georgia, serif"
+    --max-width "1400px"
+    --max-width-narrow "760px"
+    --radius "0"
+    margin "0"
+    padding "0"
+    fontFamily "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg)"
+}
+
+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 {
+    projects {
+        source "./content/projects/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                title type=string
+                category type=string
+                cover type=string format=image
+                year type=number
+                order type=number
+                slug type=string
+            }
+            required title category slug
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/professional-firm/components/pf-article-header.jxn

@@ -0,0 +1,60 @@
+/- kdl-version 2
+
+pf-article-header {
+    state eyebrow=Insight title="" date="" author="" readingTime=""
+    style display=block marginBottom="clamp(2rem, 4vw, 3rem)"
+    p "${state.eyebrow}" {
+        style {
+            fontFamily "var(--font-sans)"
+            textTransform uppercase
+            letterSpacing "0.2em"
+            fontSize "0.72rem"
+            fontWeight "600"
+            color "var(--color-accent)"
+            paddingBottom "1rem"
+            borderBottom "1px solid var(--color-rule)"
+            margin "0 0 1.5rem"
+        }
+    }
+    h1 "${state.title}" {
+        style {
+            fontFamily "var(--font-serif)"
+            fontSize "clamp(2.1rem, 5vw, 3.2rem)"
+            fontWeight "500"
+            lineHeight "1.1"
+            letterSpacing "-0.02em"
+            margin "0 0 1.5rem"
+            color "var(--color-ink)"
+        }
+    }
+    div {
+        style {
+            display flex
+            flexWrap wrap
+            alignItems center
+            gap "0.6rem"
+            paddingTop "1.25rem"
+            borderTop "1px solid var(--color-hairline)"
+            fontFamily "var(--font-sans)"
+            fontSize "0.8rem"
+            textTransform uppercase
+            letterSpacing "0.1em"
+            color "var(--color-muted)"
+        }
+        span "${state.author}" {
+            style fontWeight="600" color="var(--color-ink)"
+        }
+        span "/" {
+            style color="var(--color-hairline)"
+        }
+        span "${state.date}" {
+            style fontVariantNumeric=tabular-nums
+        }
+        span "/" {
+            style display="${state.readingTime ? 'inline' : 'none'}" color="var(--color-hairline)"
+        }
+        span "${state.readingTime} min read" {
+            style display="${state.readingTime ? 'inline' : 'none'}" fontVariantNumeric=tabular-nums
+        }
+    }
+}

package/sites/professional-firm/components/pf-contact-form.jxn

@@ -0,0 +1,74 @@
+/- kdl-version 2
+
+pf-contact-form {
+    state {
+        heading "Request a consultation"
+        note "This is a demo form. Wire it to your CRM or email in pages/contact.md."
+    }
+    style display=block
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-serif)"
+            fontSize "1.7rem"
+            fontWeight "500"
+            letterSpacing "-0.01em"
+            margin "0 0 0.4rem"
+            color "var(--color-ink)"
+        }
+    }
+    div {
+        style height="2px" width="3rem" backgroundColor="var(--color-accent)" margin="0 0 1.5rem"
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start {
+            "& input, & textarea" {
+                width "100%"
+                padding "0.8rem 0"
+                border none
+                borderBottom "1px solid var(--color-hairline)"
+                borderRadius "0"
+                backgroundColor transparent
+                fontFamily "var(--font-sans)"
+                fontSize "1rem"
+                color "var(--color-ink)"
+                outline none
+                transition "border-color 0.15s"
+            }
+            "& input:focus, & textarea:focus" borderBottom="1px solid var(--color-accent)"
+        }
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name"
+        input type=email name=email placeholder="Work email" required="true" aria-label="Work email"
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            input type=text name=company placeholder=Company aria-label=Company
+            input type=text name=revenue placeholder="Annual revenue (approx.)" aria-label="Annual revenue"
+        }
+        textarea name=notes rows="4" placeholder="What can we help with?" aria-label="What can we help with?" {
+            style fontFamily="var(--font-sans)"
+        }
+        button type=submit "Request a consultation" {
+            style {
+                marginTop "0.75rem"
+                backgroundColor "var(--color-ink)"
+                color "var(--color-paper)"
+                padding "0.9rem 1.75rem"
+                border none
+                borderRadius "0"
+                fontFamily "var(--font-sans)"
+                fontSize "0.78rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "${state.note}" {
+            style fontSize="0.82rem" color="var(--color-muted)" margin="0"
+        }
+    }
+}