@jxsuite/starters 3.3.2 → 3.5.0

package/sites/home-services/layouts/base.jxn

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

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

@@ -0,0 +1,113 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Summit Heating & Cooling"
+
+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="Summit Heating & Cooling — licensed, insured HVAC contractor serving Northern Colorado with AC and furnace installation, repair, heat pumps, and 24/7 emergency service."
+    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=Oswald:wght@400;500;600;700&family=Barlow:wght@400;500;600;700&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#f4511e"
+    --color-primary-hover "#d84315"
+    --color-primary-soft "rgba(244, 81, 30, 0.12)"
+    --color-ink "#0e1a23"
+    --color-steel "#122430"
+    --color-steel-2 "#1a3341"
+    --color-steel-line "#28414f"
+    --color-bg-dark "#0e1a23"
+    --color-bg-steel "#122430"
+    --color-bg-cream "#eef1f4"
+    --color-bg-concrete "#e5eaee"
+    --color-bg-white "#ffffff"
+    --color-text-primary "#14212b"
+    --color-text-white "#ffffff"
+    --color-text-muted "#5c6b77"
+    --color-text-steel-muted "#9fb2be"
+    --color-border "#d9e0e6"
+    --color-border-strong "#c1cbd3"
+    --color-accent "#f4511e"
+    --hazard "repeating-linear-gradient(-45deg, #f4511e 0 16px, #0e1a23 16px 32px)"
+    --font-heading "'Oswald', 'Arial Narrow', 'Segoe UI', system-ui, sans-serif"
+    --font-body "'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1200px"
+    --max-width-narrow "820px"
+    --radius "0.5rem"
+    --radius-sm "0.35rem"
+    --shadow-card "0 2px 4px rgba(14,26,35,0.05), 0 16px 40px -22px rgba(14,26,35,0.35)"
+    --shadow-float "0 34px 70px -30px rgba(14,26,35,0.5)"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-white)"
+    WebkitFontSmoothing antialiased
+    h1 {
+        fontFamily "var(--font-heading)"
+    }
+    h2 {
+        fontFamily "var(--font-heading)"
+    }
+    h3 {
+        fontFamily "var(--font-heading)"
+    }
+    h4 {
+        fontFamily "var(--font-heading)"
+    }
+    strong {
+        color "var(--color-text-primary)"
+    }
+    a {
+        color "var(--color-primary)"
+        fontWeight "600"
+    }
+}
+
+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 {
+    services {
+        source "./content/services/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                name type=string
+                summary type=string
+                icon type=string
+                order type=number
+            }
+            required name summary
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/museum/components/mu-band.jxn

@@ -0,0 +1,63 @@
+/- kdl-version 2
+
+mu-band {
+    state index="" label="" tone=chalk
+    style {
+        display block
+        borderBlockStart "2px solid var(--color-ink)"
+        paddingBlock "var(--band-space)"
+        paddingInline "var(--gutter)"
+        backgroundColor "${state.tone === 'card' ? 'var(--color-card)' : state.tone === 'ink' ? 'var(--color-ink)' : 'var(--color-chalk)'}"
+        color "${state.tone === 'ink' ? 'var(--color-chalk)' : 'var(--color-ink)'}"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            marginInline auto
+            display grid
+            gridTemplateColumns "var(--label-column) minmax(0, 1fr)"
+            columnGap "clamp(1.5rem, 4vw, 3.5rem)"
+            @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="1.75rem"
+        }
+        div {
+            style display=flex flexDirection=column alignItems=start gap="0.6rem" {
+                @--md flexDirection=row alignItems=baseline gap="0.9rem"
+            }
+            span "${state.index}" {
+                style {
+                    display "${state.index ? 'block' : 'none'}"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.95rem"
+                    fontWeight "500"
+                    fontVariantNumeric tabular-nums
+                    lineHeight "1"
+                    color "${state.tone === 'ink' ? 'var(--color-chalk)' : 'var(--color-pigment)'}"
+                }
+            }
+            span aria-hidden="true" {
+                style {
+                    display block
+                    width "2.25rem"
+                    height "2px"
+                    backgroundColor "${state.tone === 'ink' ? 'rgba(231, 227, 218, 0.5)' : 'var(--color-pigment)'}"
+                    @--md display=none
+                }
+            }
+            span "${state.label}" {
+                style {
+                    display "${state.label ? 'block' : 'none'}"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.66rem"
+                    lineHeight "1.5"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "${state.tone === 'ink' ? 'rgba(231, 227, 218, 0.7)' : 'var(--color-muted)'}"
+                }
+            }
+        }
+        div {
+            style minWidth="0"
+            slot
+        }
+    }
+}

package/sites/museum/components/mu-cta.jxn

@@ -0,0 +1,76 @@
+/- kdl-version 2
+
+mu-cta {
+    state kicker="" heading="" text="" label="" href="/visit/"
+    style {
+        display block
+        backgroundColor "var(--color-ink)"
+        color "var(--color-chalk)"
+        borderBlockStart "2px solid var(--color-ink)"
+        paddingBlock "clamp(2.6rem, 6vw, 4rem)"
+        paddingInline "var(--gutter)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            marginInline auto
+            display flex
+            flexWrap wrap
+            alignItems center
+            justifyContent space-between
+            gap "1.75rem"
+        }
+        div {
+            style minWidth="0"
+            p "${state.kicker}" {
+                style {
+                    display "${state.kicker ? 'block' : 'none'}"
+                    margin "0 0 0.9rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.66rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "rgba(231, 227, 218, 0.6)"
+                }
+            }
+            h2 "${state.heading}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(1.7rem, 3.4vw, 2.5rem)"
+                    fontWeight "500"
+                    lineHeight "calc(1.1 * var(--leading-scale))"
+                    letterSpacing "var(--display-tracking)"
+                    maxWidth "20ch"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    display "${state.text ? 'block' : 'none'}"
+                    margin "1rem 0 0"
+                    fontSize "1.03rem"
+                    lineHeight "1.65"
+                    color "rgba(231, 227, 218, 0.75)"
+                    maxWidth "46ch"
+                }
+            }
+        }
+        a href="${state.href}" "${state.label}" {
+            style {
+                display inline-block
+                padding "1rem 1.8rem"
+                backgroundColor "var(--color-chalk)"
+                color "var(--color-ink)"
+                border "2px solid var(--color-chalk)"
+                fontFamily "var(--font-label)"
+                fontSize "0.72rem"
+                letterSpacing "var(--label-tracking)"
+                textTransform "var(--label-case)"
+                textDecoration none
+                whiteSpace nowrap
+                transition "background-color 0.15s, color 0.15s"
+                :hover backgroundColor=transparent color="var(--color-chalk)"
+            }
+        }
+    }
+}

package/sites/museum/components/mu-exhibition-card.jxn

@@ -0,0 +1,118 @@
+/- kdl-version 2
+
+mu-exhibition-card {
+    state {
+        title ""
+        description ""
+        gallery ""
+        status ""
+        href "#"
+        hue 214
+        date ""
+        until ""
+        locale en
+        opens {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/date"
+                    - (ref)"#/state/locale"
+                    - day=numeric month=long
+                }
+            }
+        }
+        closes {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/until"
+                    - (ref)"#/state/locale"
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+    }
+    style display=block height="100%"
+    a href="${state.href}" {
+        style {
+            display flex
+            flexDirection column
+            height "100%"
+            border "2px solid var(--color-ink)"
+            backgroundColor "var(--color-card)"
+            color inherit
+            textDecoration none
+            transition "border-color 0.15s"
+            :hover borderColor="var(--color-pigment)"
+        }
+        div aria-hidden="true" {
+            style {
+                aspectRatio "5 / 4"
+                borderBlockEnd "2px solid var(--color-ink)"
+                background "radial-gradient(circle at 64% 38%, hsl(${state.hue} 55% 45%) 0 29%, transparent 29.5%), repeating-linear-gradient(${state.hue}deg, var(--color-chalk-deep) 0 9px, var(--color-card) 9px 18px)"
+            }
+        }
+        div {
+            style display=flex flexDirection=column gap="0.75rem" flex="1" padding="1.25rem"
+            p "${state.status}" {
+                style {
+                    display "${state.status ? 'inline-block' : 'none'}"
+                    alignSelf start
+                    margin "0"
+                    paddingInline "0.55rem"
+                    paddingBlock "0.3rem"
+                    backgroundColor "var(--color-pigment-tint)"
+                    color "var(--color-pigment-deep)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.62rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                }
+            }
+            h3 "${state.title}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "1.3rem"
+                    fontWeight "500"
+                    lineHeight "calc(1.15 * var(--leading-scale))"
+                    letterSpacing "-0.015em"
+                }
+            }
+            p {
+                style {
+                    display flex
+                    flexWrap wrap
+                    gap "0.4rem"
+                    margin "0"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.72rem"
+                    fontVariantNumeric tabular-nums
+                    color "var(--color-pigment)"
+                }
+                span "${state.opens}"
+                span aria-hidden="true" — {
+                    style opacity="0.55"
+                }
+                span "${state.closes}"
+            }
+            p "${state.description}" {
+                style margin="0" fontSize="0.97rem" lineHeight="1.6" color="var(--color-muted)"
+            }
+            p "${state.gallery}" {
+                style {
+                    margin "auto 0 0"
+                    paddingBlockStart "0.9rem"
+                    borderBlockStart "1px solid var(--color-hairline)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.64rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "var(--color-muted)"
+                }
+            }
+        }
+    }
+}

package/sites/museum/components/mu-exhibition-row.jxn

@@ -0,0 +1,142 @@
+/- kdl-version 2
+
+mu-exhibition-row {
+    state {
+        index ""
+        title ""
+        description ""
+        gallery ""
+        curator ""
+        curatorLabel "Curated by"
+        href "#"
+        hue 214
+        date ""
+        until ""
+        locale en
+        order 0
+        orderLabel {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - (ref)"#/state/order"
+                    - (ref)"#/state/locale"
+                    - minimumIntegerDigits=2 useGrouping=#false
+                }
+            }
+        }
+        opens {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/date"
+                    - (ref)"#/state/locale"
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+        closes {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatDate"
+                value {
+                    - (ref)"#/state/until"
+                    - (ref)"#/state/locale"
+                    - day=numeric month=long year=numeric
+                }
+            }
+        }
+    }
+    style display=block borderBlockStart="1px solid var(--color-hairline)"
+    a href="${state.href}" {
+        style {
+            display grid
+            gridTemplateColumns "var(--label-column) 7.5rem minmax(0, 1fr)"
+            columnGap "clamp(1.25rem, 3.5vw, 3rem)"
+            alignItems start
+            paddingBlock "clamp(1.75rem, 4vw, 2.75rem)"
+            color inherit
+            textDecoration none
+            @--md gridTemplateColumns="4.5rem minmax(0, 1fr)" rowGap="1rem"
+            :hover color="var(--color-pigment)"
+            transition "color 0.15s"
+        }
+        span "${state.index ? state.index : state.orderLabel}" {
+            style {
+                fontFamily "var(--font-label)"
+                fontSize "0.95rem"
+                fontVariantNumeric tabular-nums
+                lineHeight "1.1"
+                color "var(--color-pigment)"
+            }
+        }
+        span aria-hidden="true" {
+            style {
+                display block
+                aspectRatio "1"
+                border "2px solid var(--color-ink)"
+                background "radial-gradient(circle at 60% 40%, hsl(${state.hue} 55% 45%) 0 34%, transparent 34.5%), repeating-linear-gradient(${state.hue}deg, var(--color-chalk-deep) 0 7px, var(--color-card) 7px 14px)"
+                @--md display=none
+            }
+        }
+        div {
+            style minWidth="0"
+            h2 "${state.title}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(1.6rem, 3.4vw, 2.4rem)"
+                    fontWeight "500"
+                    lineHeight "calc(1.06 * var(--leading-scale))"
+                    letterSpacing "var(--display-tracking)"
+                }
+            }
+            p {
+                style {
+                    display flex
+                    flexWrap wrap
+                    gap "0.45rem"
+                    margin "0.85rem 0 0"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.7rem"
+                    fontVariantNumeric tabular-nums
+                    color "var(--color-pigment)"
+                }
+                span "${state.opens}"
+                span aria-hidden="true" — {
+                    style opacity="0.55"
+                }
+                span "${state.closes}"
+            }
+            p "${state.description}" {
+                style {
+                    margin "0.9rem 0 0"
+                    fontSize "1.05rem"
+                    lineHeight "1.7"
+                    color "var(--color-muted)"
+                    maxWidth "var(--measure)"
+                }
+            }
+            p {
+                style {
+                    display flex
+                    flexWrap wrap
+                    gap "0.4rem 1.5rem"
+                    margin "1.1rem 0 0"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.64rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "var(--color-muted)"
+                }
+                span "${state.gallery}"
+                span {
+                    style display="${state.curator ? 'inline-flex' : 'none'}" gap="0.35rem"
+                    span "${state.curatorLabel}"
+                    span "${state.curator}"
+                }
+            }
+        }
+    }
+}

package/sites/museum/components/mu-fact.jxn

@@ -0,0 +1,40 @@
+/- kdl-version 2
+
+mu-fact {
+    state term="" value="" note="" layout=row
+    style {
+        display grid
+        gridTemplateColumns "${state.layout === 'stack' ? 'minmax(0, 1fr)' : 'var(--label-column) minmax(0, 1fr)'}"
+        columnGap "clamp(1rem, 3vw, 2rem)"
+        paddingBlock "0.95rem"
+        borderBlockStart "1px solid var(--color-hairline)"
+        @--sm gridTemplateColumns="minmax(0, 1fr)" rowGap="0.3rem"
+        rowGap "0.3rem"
+    }
+    span "${state.term}" {
+        style {
+            paddingBlockStart "0.28rem"
+            fontFamily "var(--font-label)"
+            fontSize "0.66rem"
+            lineHeight "1.5"
+            letterSpacing "var(--label-tracking)"
+            textTransform "var(--label-case)"
+            color "var(--color-muted)"
+        }
+    }
+    div {
+        style minWidth="0"
+        p "${state.value}" {
+            style margin="0" fontSize="1.03rem" lineHeight="1.55"
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                margin "0.25rem 0 0"
+                fontSize "0.9rem"
+                lineHeight "1.55"
+                color "var(--color-muted)"
+            }
+        }
+    }
+}