@jxsuite/starters 3.3.2 → 3.5.0

package/sites/museum/layouts/base.jxn

@@ -0,0 +1,227 @@
+/- kdl-version 2
+$elements {
+    - (ref)"../components/mu-footer.jxn"
+}
+
+div {
+    state {
+        brand Atrium
+        skipLabel "Skip to content"
+        railNote "City Museum of Art & History · Open today 10:00–18:00"
+        languageNavLabel Language
+        mainNavLabel Main
+        navExhibitions Exhibitions
+        navVisit Visit
+        navAbout About
+        homeHref "/"
+        exhibitionsHref "/exhibitions/"
+        visitHref "/visit/"
+        aboutHref "/about/"
+        footerTagline "A city museum in a glass hall: four centuries of the harbour, its makers and its maps, held in trust for everyone who lives here."
+        footerVisitLabel "Find us"
+        footerAddress "2 Quai des Écluses, Old Harbour"
+        footerHours "Tuesday to Sunday, 10:00–18:00. Closed Mondays."
+        footerReadLabel Read
+        footerExhibitionsLink Exhibitions
+        footerVisitLink "Plan your visit"
+        footerAboutLink "About the museum"
+        footerContactLabel Contact
+        footerEmail bonjour@atrium.example
+        footerPhone "+1 555 0140"
+        footerLegal "© 2026 Atrium — City Museum of Art & History"
+        footerCredit "A civic museum, free to enter, in three languages."
+    }
+    style minHeight="100vh" display=flex flexDirection=column backgroundColor="var(--color-chalk)"
+    a href="#main" "${state.skipLabel}" {
+        style {
+            position absolute
+            insetBlockStart "0.5rem"
+            insetInlineStart "0.5rem"
+            zIndex "100"
+            backgroundColor "var(--color-ink)"
+            color "var(--color-chalk)"
+            fontFamily "var(--font-label)"
+            fontSize "0.7rem"
+            letterSpacing "var(--label-tracking)"
+            textTransform "var(--label-case)"
+            textDecoration none
+            padding "0.6rem 1rem"
+            transform "translateY(-250%)"
+            :focus transform="translateY(0)"
+        }
+    }
+    header {
+        style {
+            position sticky
+            insetBlockStart "0"
+            zIndex "50"
+            backgroundColor "var(--color-card)"
+            borderBlockEnd "2px solid var(--color-ink)"
+        }
+        div {
+            style backgroundColor="var(--color-ink)" color="var(--color-chalk)"
+            div {
+                style {
+                    maxWidth "var(--max-width)"
+                    marginInline auto
+                    paddingInline "var(--gutter)"
+                    minHeight "2.5rem"
+                    display flex
+                    alignItems stretch
+                    justifyContent space-between
+                    gap "1.5rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.66rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                }
+                p "${state.railNote}" {
+                    style margin="0" alignSelf=center color="rgba(231, 227, 218, 0.66)" {
+                        @--md display=none
+                    }
+                }
+                nav aria-label="${state.languageNavLabel}" {
+                    style display=flex alignItems=stretch marginInlineStart=auto
+                    .children {
+                        $array items=(ref)"#/state/$page/alternates" {
+                            a .lang="${item.code}" dir="${item.dir}" href="${item.url}" hreflang="${item.code}" aria-current="${item.current ? 'page' : 'false'}" "${item.label}" {
+                                style {
+                                    display inline-flex
+                                    alignItems center
+                                    paddingInline "0.85rem"
+                                    paddingBlock "0.7rem"
+                                    textDecoration none
+                                    whiteSpace nowrap
+                                    transition "color 0.15s, background-color 0.15s"
+                                    color "${item.current ? 'var(--color-chalk)' : 'rgba(231, 227, 218, 0.6)'}"
+                                    backgroundColor "${item.current ? 'rgba(231, 227, 218, 0.1)' : 'transparent'}"
+                                    boxShadow "${item.current ? 'inset 0 -2px 0 0 var(--color-chalk)' : 'none'}"
+                                    :hover {
+                                        color "var(--color-chalk)"
+                                        backgroundColor "rgba(231, 227, 218, 0.1)"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                maxWidth "var(--max-width)"
+                marginInline auto
+                paddingInline "var(--gutter)"
+                minHeight "4.6rem"
+                display flex
+                alignItems center
+                justifyContent space-between
+                gap "1.5rem"
+            }
+            a href="${state.homeHref}" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.7rem"
+                    textDecoration none
+                    color "var(--color-ink)"
+                }
+                span aria-hidden="true" {
+                    style {
+                        width "1.05rem"
+                        height "1.05rem"
+                        borderRadius "50%"
+                        backgroundColor "var(--color-pigment)"
+                        flex "0 0 auto"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.55rem"
+                        fontWeight "700"
+                        lineHeight "1"
+                        letterSpacing "var(--display-tracking)"
+                    }
+                }
+            }
+            nav aria-label="${state.mainNavLabel}" {
+                style {
+                    display flex
+                    alignItems center
+                    gap "1.9rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.7rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    @--sm gap="1.1rem"
+                }
+                a href="${state.exhibitionsHref}" "${state.navExhibitions}" {
+                    style {
+                        color "var(--color-ink)"
+                        textDecoration none
+                        paddingBlock "0.35rem"
+                        borderBlockEnd "2px solid transparent"
+                        transition "color 0.15s, border-color 0.15s"
+                        :hover {
+                            color "var(--color-pigment)"
+                            borderBlockEnd "2px solid var(--color-pigment)"
+                        }
+                    }
+                }
+                a href="${state.visitHref}" "${state.navVisit}" {
+                    style {
+                        color "var(--color-ink)"
+                        textDecoration none
+                        paddingBlock "0.35rem"
+                        borderBlockEnd "2px solid transparent"
+                        transition "color 0.15s, border-color 0.15s"
+                        :hover {
+                            color "var(--color-pigment)"
+                            borderBlockEnd "2px solid var(--color-pigment)"
+                        }
+                    }
+                }
+                a href="${state.aboutHref}" "${state.navAbout}" {
+                    style {
+                        color "var(--color-ink)"
+                        textDecoration none
+                        paddingBlock "0.35rem"
+                        borderBlockEnd "2px solid transparent"
+                        @--sm display=none
+                        transition "color 0.15s, border-color 0.15s"
+                        :hover {
+                            color "var(--color-pigment)"
+                            borderBlockEnd "2px solid var(--color-pigment)"
+                        }
+                    }
+                }
+            }
+        }
+    }
+    main .id=main {
+        style flex="1"
+        slot
+    }
+    mu-footer {
+        $props {
+            brand "${state.brand}"
+            tagline "${state.footerTagline}"
+            visitLabel "${state.footerVisitLabel}"
+            address "${state.footerAddress}"
+            hours "${state.footerHours}"
+            readLabel "${state.footerReadLabel}"
+            exhibitionsLink "${state.footerExhibitionsLink}"
+            visitLink "${state.footerVisitLink}"
+            aboutLink "${state.footerAboutLink}"
+            contactLabel "${state.footerContactLabel}"
+            email "${state.footerEmail}"
+            phone "${state.footerPhone}"
+            legal "${state.footerLegal}"
+            credit "${state.footerCredit}"
+            exhibitionsHref "${state.exhibitionsHref}"
+            visitHref "${state.visitHref}"
+            aboutHref "${state.aboutHref}"
+        }
+    }
+}

package/sites/museum/layouts/fr-ca.jxn

@@ -0,0 +1,30 @@
+/- kdl-version 2
+$layout "./layouts/base.jxn"
+
+$element {
+    state {
+        skipLabel "Aller au contenu"
+        railNote "Musée municipal d'art et d'histoire · Ouvert aujourd'hui de 10 h à 18 h"
+        languageNavLabel Langue
+        mainNavLabel Principal
+        navExhibitions Expositions
+        navVisit Visite
+        navAbout "À propos"
+        homeHref "/fr-ca/"
+        exhibitionsHref "/fr-ca/expositions/"
+        visitHref "/fr-ca/visite/"
+        aboutHref "/fr-ca/a-propos/"
+        footerTagline "Un musée municipal sous une halle de verre : quatre siècles de port, de métiers et de cartes, gardés en fiducie pour toutes celles et ceux qui vivent ici."
+        footerVisitLabel "Nous trouver"
+        footerAddress "2, quai des Écluses, Vieux-Port"
+        footerHours "Du mardi au dimanche, de 10 h à 18 h. Fermé le lundi."
+        footerReadLabel "À lire"
+        footerExhibitionsLink Expositions
+        footerVisitLink "Préparer sa visite"
+        footerAboutLink "À propos du musée"
+        footerContactLabel "Nous joindre"
+        footerLegal "© 2026 Atrium — Musée municipal d'art et d'histoire"
+        footerCredit "Un musée public, à entrée libre, en trois langues."
+    }
+    slot
+}

package/sites/museum/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/museum/pages/about.jxn

@@ -0,0 +1,228 @@
+/- kdl-version 2
+
+$element .title="About the museum — Atrium" .description="Atrium is the city's museum of art and history: a glass hall over the old customs house, free to enter, run by the city and its readers since 1897." {
+    state {
+        catalogued {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 0.94
+                    - #null
+                    - style=percent
+                }
+            }
+        }
+        archive {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 1240
+                    - #null
+                    - style=unit unit=meter unitDisplay=long
+                }
+            }
+        }
+        staff {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatNumber"
+                value {
+                    - 61
+                }
+            }
+        }
+        languages {
+            $expression {
+                operator call
+                target (ref)"window#/Intl/formatList"
+                value {
+                    - English French Arabic
+                }
+            }
+        }
+    }
+    mu-pagehead {
+        $props {
+            kicker About
+            title "A museum that argues with itself"
+            standfirst "Atrium was founded by 240 households who each put in what they could and demanded, in writing, that entry stay free. It has been kept that way for a hundred and twenty-nine years, through two rebuildings and one fire."
+            metaLabel "Reading room"
+            metaValue "Second floor, no appointment needed"
+        }
+    }
+    mu-band {
+        $props index="01" label="The building" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1.4fr) minmax(0, 0.8fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                rowGap "1.25rem"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+                alignItems start
+            }
+            div {
+                style maxWidth="var(--measure)"
+                p "The museum began in a room above the customs house, which it outgrew in nineteen years. The glass hall that replaced it in 1916 was built over the customs house rather than instead of it: the old stone walls are still standing inside, holding up nothing, and the tour begins by walking between them." {
+                    style margin="0" lineHeight="1.75"
+                }
+                p "The roof is the reason people photograph the building and the reason the conservators dislike it. Every object on the ground floor is placed by how much light it can take, which is why the map cabinet sits in the darkest corner and the salt pan sits outside in the rain." {
+                    style margin="1.1rem 0 0" lineHeight="1.75"
+                }
+                p "Nothing here is a copy. Where the museum shows a reproduction — three of the maps are too fragile to hang — the label says so in the first line, in the same size type as the title." {
+                    style margin="1.1rem 0 0" lineHeight="1.75"
+                }
+                p "Where the museum does not know something, the label says that too. Roughly one object in nine has no attributed maker, and the catalogue records the gap rather than a guess." {
+                    style margin="1.1rem 0 0" lineHeight="1.75"
+                }
+            }
+            mu-oculus {
+                $props size="20rem" tone=card
+            }
+        }
+    }
+    mu-band {
+        $props index="02" label="What we hold" tone=card
+        div {
+            style {
+                display grid
+                gridTemplateColumns "repeat(2, minmax(0, 1fr))"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                @--md gridTemplateColumns="minmax(0, 1fr)"
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term Catalogued
+                        value "${state.catalogued}"
+                        note "Of everything accessioned. The remainder is mostly the 2019 workshop bequest."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term Archive
+                        value "${state.archive}"
+                        note "Of shelved paper: ledgers, survey notebooks, and workshop correspondence."
+                    }
+                }
+            }
+            div {
+                mu-fact {
+                    $props {
+                        term Staff
+                        value "${state.staff}"
+                        note "Curators, conservators, front-of-house and the two people who keep the roof clean."
+                    }
+                }
+                mu-fact {
+                    $props {
+                        term "Labels in"
+                        value "${state.languages}"
+                        note "Every wall label, every room, with no abridged version for any of the three."
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="03" label="Three languages" tone=chalk
+        div {
+            style {
+                display grid
+                gridTemplateColumns "minmax(0, 1fr) minmax(0, 0.85fr)"
+                columnGap "clamp(2rem, 5vw, 4rem)"
+                alignItems start
+                @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2rem"
+            }
+            div {
+                style maxWidth="var(--measure)"
+                p "A third of this city reads French at home and a growing share reads Arabic, so the museum is written three times over rather than once with translations bolted on. Each language has its own pages, its own wall text and its own reading of the collection — the Arabic route through Gallery 2 is not the English one reversed, it is a different argument by a different curator." {
+                    style margin="0" lineHeight="1.75"
+                }
+                p "Every page carries the same switch, and it lists only the languages that page actually exists in. If a language is missing from the switch, the page has not been written in it yet — that is a commitment we would rather show than hide." {
+                    style margin="1.1rem 0 0" lineHeight="1.75"
+                }
+            }
+            div {
+                style {
+                    border "2px solid var(--color-ink)"
+                    backgroundColor "var(--color-card)"
+                    padding "clamp(1.25rem, 3vw, 1.9rem)"
+                }
+                p "This page, in every language it exists in" {
+                    style {
+                        margin "0 0 1.1rem"
+                        fontFamily "var(--font-label)"
+                        fontSize "0.66rem"
+                        letterSpacing "var(--label-tracking)"
+                        textTransform "var(--label-case)"
+                        color "var(--color-muted)"
+                    }
+                }
+                ul {
+                    style listStyle=none margin="0" padding="0" display=grid gap="0.55rem"
+                    .children {
+                        $array items=(ref)"#/state/$page/alternates" {
+                            li {
+                                a .lang="${item.code}" dir="${item.dir}" href="${item.url}" hreflang="${item.code}" aria-current="${item.current ? 'page' : 'false'}" {
+                                    style {
+                                        display flex
+                                        alignItems baseline
+                                        gap "0.7rem"
+                                        textDecoration none
+                                        paddingBlock "0.35rem"
+                                        borderBlockEnd "1px solid var(--color-hairline)"
+                                        color "${item.current ? 'var(--color-muted)' : 'var(--color-pigment)'}"
+                                        :hover color="var(--color-ink)"
+                                    }
+                                    span "${item.code}" {
+                                        style {
+                                            fontFamily "var(--font-label)"
+                                            fontSize "0.64rem"
+                                            letterSpacing "var(--label-tracking)"
+                                            textTransform "var(--label-case)"
+                                            opacity "0.7"
+                                        }
+                                    }
+                                    span "${item.label}" {
+                                        style fontSize="1.02rem"
+                                    }
+                                    span "You are here" {
+                                        style {
+                                            marginInlineStart auto
+                                            fontFamily "var(--font-label)"
+                                            fontSize "0.62rem"
+                                            letterSpacing "var(--label-tracking)"
+                                            textTransform "var(--label-case)"
+                                            display "${item.current ? 'inline' : 'none'}"
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    mu-band {
+        $props index="04" label="In the founders' words" tone=ink
+        mu-quote {
+            $props {
+                quote "Let it be free at the door, or let it be something other than ours."
+                attribution "Subscription minute book, 4 November 1897"
+            }
+        }
+    }
+    mu-cta {
+        $props {
+            kicker "Come in"
+            heading "The reading room is open to anyone with a question."
+            text "Second floor, above the map cabinet. No appointment to read; ask at the desk to handle."
+            label "Plan your visit"
+            href "/visit/"
+        }
+    }
+}