@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,206 @@
+/- kdl-version 2
+
+mu-footer {
+    state {
+        brand Atrium
+        tagline ""
+        visitLabel "Find us"
+        address ""
+        hours ""
+        readLabel Read
+        exhibitionsLink Exhibitions
+        visitLink "Plan your visit"
+        aboutLink "About the museum"
+        exhibitionsHref "/exhibitions/"
+        visitHref "/visit/"
+        aboutHref "/about/"
+        contactLabel Contact
+        email ""
+        phone ""
+        legal ""
+        credit ""
+    }
+    style {
+        display block
+        backgroundColor "var(--color-ink-deep)"
+        color "var(--color-chalk)"
+        borderBlockStart "2px solid var(--color-ink)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            marginInline auto
+            paddingInline "var(--gutter)"
+            paddingBlock "clamp(3rem, 6vw, 4.5rem) 2rem"
+            display grid
+            gridTemplateColumns "minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)"
+            gap "2.5rem"
+            @--lg gridTemplateColumns="minmax(0, 1fr) minmax(0, 1fr)"
+            @--sm gridTemplateColumns="minmax(0, 1fr)" gap="2rem"
+        }
+        div {
+            div {
+                style display=inline-flex alignItems=center gap="0.7rem" marginBlockEnd="1.1rem"
+                span aria-hidden="true" {
+                    style {
+                        width "1.05rem"
+                        height "1.05rem"
+                        borderRadius "50%"
+                        backgroundColor "var(--color-chalk)"
+                        flex "0 0 auto"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-display)"
+                        fontSize "1.55rem"
+                        fontWeight "700"
+                        lineHeight "1"
+                        letterSpacing "var(--display-tracking)"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0"
+                    maxWidth "38ch"
+                    fontSize "0.98rem"
+                    lineHeight "1.7"
+                    color "rgba(231, 227, 218, 0.72)"
+                }
+            }
+        }
+        div {
+            p "${state.visitLabel}" {
+                style {
+                    margin "0 0 0.9rem"
+                    paddingBlockEnd "0.7rem"
+                    borderBlockEnd "1px solid rgba(231, 227, 218, 0.2)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.64rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "rgba(231, 227, 218, 0.55)"
+                }
+            }
+            p "${state.address}" {
+                style {
+                    margin "0 0 0.6rem"
+                    fontSize "0.95rem"
+                    lineHeight "1.6"
+                    color "rgba(231, 227, 218, 0.85)"
+                }
+            }
+            p "${state.hours}" {
+                style {
+                    margin "0"
+                    fontSize "0.95rem"
+                    lineHeight "1.6"
+                    color "rgba(231, 227, 218, 0.6)"
+                }
+            }
+        }
+        div {
+            p "${state.readLabel}" {
+                style {
+                    margin "0 0 0.9rem"
+                    paddingBlockEnd "0.7rem"
+                    borderBlockEnd "1px solid rgba(231, 227, 218, 0.2)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.64rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "rgba(231, 227, 218, 0.55)"
+                }
+            }
+            a href="${state.exhibitionsHref}" "${state.exhibitionsLink}" {
+                style {
+                    display block
+                    marginBlockEnd "0.55rem"
+                    fontSize "0.95rem"
+                    color "rgba(231, 227, 218, 0.85)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-chalk)"
+                }
+            }
+            a href="${state.visitHref}" "${state.visitLink}" {
+                style {
+                    display block
+                    marginBlockEnd "0.55rem"
+                    fontSize "0.95rem"
+                    color "rgba(231, 227, 218, 0.85)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-chalk)"
+                }
+            }
+            a href="${state.aboutHref}" "${state.aboutLink}" {
+                style {
+                    display block
+                    fontSize "0.95rem"
+                    color "rgba(231, 227, 218, 0.85)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-chalk)"
+                }
+            }
+        }
+        div {
+            p "${state.contactLabel}" {
+                style {
+                    margin "0 0 0.9rem"
+                    paddingBlockEnd "0.7rem"
+                    borderBlockEnd "1px solid rgba(231, 227, 218, 0.2)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.64rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "rgba(231, 227, 218, 0.55)"
+                }
+            }
+            p {
+                style {
+                    margin "0 0 0.55rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.9rem"
+                    color "rgba(231, 227, 218, 0.85)"
+                }
+                bdi "${state.email}"
+            }
+            p {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.9rem"
+                    color "rgba(231, 227, 218, 0.85)"
+                }
+                bdi "${state.phone}"
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            marginInline auto
+            paddingInline "var(--gutter)"
+            paddingBlock "1.4rem"
+            borderBlockStart "1px solid rgba(231, 227, 218, 0.2)"
+            display flex
+            flexWrap wrap
+            justifyContent space-between
+            gap "1rem"
+            fontFamily "var(--font-label)"
+            fontSize "0.64rem"
+            letterSpacing "var(--label-tracking)"
+            textTransform "var(--label-case)"
+            color "rgba(231, 227, 218, 0.5)"
+        }
+        p "${state.legal}" {
+            style margin="0"
+        }
+        p "${state.credit}" {
+            style margin="0"
+        }
+    }
+}

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

@@ -0,0 +1,165 @@
+/- kdl-version 2
+
+mu-hero {
+    state {
+        kicker ""
+        title ""
+        standfirst ""
+        primaryLabel ""
+        primaryHref "/visit/"
+        secondaryLabel ""
+        secondaryHref "/exhibitions/"
+        noteLabel ""
+        note ""
+    }
+    style {
+        display block
+        backgroundColor "var(--color-card)"
+        paddingBlock "clamp(2.75rem, 7vw, 5.5rem)"
+        paddingInline "var(--gutter)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            marginInline auto
+            display grid
+            gridTemplateColumns "minmax(0, 1.4fr) minmax(0, 0.85fr)"
+            columnGap "clamp(2rem, 5vw, 4.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="minmax(0, 1fr)" rowGap="2.75rem"
+        }
+        div {
+            p "${state.kicker}" {
+                style {
+                    margin "0 0 1.4rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.68rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "var(--color-pigment)"
+                }
+            }
+            h1 "${state.title}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.7rem, 7vw, 5.2rem)"
+                    fontWeight "700"
+                    lineHeight "calc(0.95 * var(--leading-scale))"
+                    letterSpacing "var(--display-tracking)"
+                    maxWidth "14ch"
+                }
+            }
+            p "${state.standfirst}" {
+                style {
+                    margin "1.6rem 0 0"
+                    fontSize "1.16rem"
+                    lineHeight "1.65"
+                    color "var(--color-muted)"
+                    maxWidth "46ch"
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    gap "0.9rem"
+                    marginBlockStart "2.25rem"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.72rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                }
+                a href="${state.primaryHref}" "${state.primaryLabel}" {
+                    style {
+                        display inline-block
+                        padding "0.95rem 1.7rem"
+                        border "2px solid var(--color-ink)"
+                        backgroundColor "var(--color-ink)"
+                        color "var(--color-chalk)"
+                        textDecoration none
+                        transition "background-color 0.15s, border-color 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-pigment)"
+                            borderColor "var(--color-pigment)"
+                        }
+                    }
+                }
+                a href="${state.secondaryHref}" "${state.secondaryLabel}" {
+                    style {
+                        display inline-block
+                        padding "0.95rem 1.7rem"
+                        border "2px solid var(--color-ink)"
+                        backgroundColor transparent
+                        color "var(--color-ink)"
+                        textDecoration none
+                        transition "background-color 0.15s, color 0.15s"
+                        :hover backgroundColor="var(--color-ink)" color="var(--color-chalk)"
+                    }
+                }
+            }
+            p {
+                style {
+                    display "${state.note ? 'flex' : 'none'}"
+                    flexWrap wrap
+                    gap "0.75rem"
+                    margin "2.25rem 0 0"
+                    paddingBlockStart "1.1rem"
+                    borderBlockStart "1px solid var(--color-hairline)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.68rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                    color "var(--color-muted)"
+                }
+                span "${state.noteLabel}" {
+                    style color="var(--color-pigment)"
+                }
+                span "${state.note}"
+            }
+        }
+        div aria-hidden="true" {
+            style {
+                border "2px solid var(--color-ink)"
+                backgroundColor "var(--color-chalk)"
+                padding "clamp(0.9rem, 2.5vw, 1.75rem)"
+                display grid
+                gap "clamp(0.7rem, 2vw, 1.1rem)"
+                maxWidth "23rem"
+                marginInline auto
+                width "100%"
+                boxSizing border-box
+            }
+            div {
+                style {
+                    aspectRatio "1"
+                    borderRadius "50%"
+                    display grid
+                    placeItems center
+                    background "conic-gradient(from -90deg, var(--color-pigment) 0 25%, var(--color-pigment-deep) 25% 50%, var(--color-chalk-deep) 50% 75%, var(--color-card) 75% 100%)"
+                }
+                div {
+                    style {
+                        width "38%"
+                        aspectRatio "1"
+                        borderRadius "50%"
+                        backgroundColor "var(--color-card)"
+                        border "2px solid var(--color-ink)"
+                    }
+                }
+            }
+            div {
+                style display=grid gap="0.4rem"
+                div {
+                    style height="3px" backgroundColor="var(--color-ink)"
+                }
+                div {
+                    style height="1px" backgroundColor="var(--color-hairline)"
+                }
+                div {
+                    style height="1px" width="62%" backgroundColor="var(--color-hairline)"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,30 @@
+/- kdl-version 2
+
+mu-more {
+    state label="" href="#" space="0"
+    style display=block
+    div {
+        style marginBlockStart="${state.space}"
+        a href="${state.href}" {
+            style {
+                display inline-flex
+                alignItems baseline
+                gap "0.6rem"
+                fontFamily "var(--font-label)"
+                fontSize "0.7rem"
+                letterSpacing "var(--label-tracking)"
+                textTransform "var(--label-case)"
+                textDecoration none
+                paddingBlockEnd "0.2rem"
+                color "var(--color-pigment)"
+                borderBlockEnd "2px solid var(--color-pigment)"
+                transition "color 0.15s, border-color 0.15s"
+                :hover color="var(--color-ink)" borderColor="var(--color-ink)"
+            }
+            span "${state.label}"
+            span aria-hidden="true" → {
+                style display=inline-block lineHeight="1" transform="scaleX(var(--flip-inline, 1))"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,33 @@
+/- kdl-version 2
+
+mu-oculus {
+    state size="26rem" tone=chalk
+    style {
+        display block
+        width "100%"
+        maxWidth "${state.size}"
+        marginInline auto
+        border "2px solid var(--color-ink)"
+        padding "clamp(0.9rem, 2.5vw, 1.75rem)"
+        boxSizing border-box
+        backgroundColor "${state.tone === 'card' ? 'var(--color-card)' : 'var(--color-chalk)'}"
+    }
+    div aria-hidden="true" {
+        style {
+            aspectRatio "1"
+            borderRadius "50%"
+            display grid
+            placeItems center
+            background "conic-gradient(from -90deg, var(--color-pigment) 0 25%, var(--color-pigment-deep) 25% 50%, var(--color-chalk-deep) 50% 75%, var(--color-card) 75% 100%)"
+        }
+        div {
+            style {
+                width "40%"
+                aspectRatio "1"
+                borderRadius "50%"
+                backgroundColor "var(--color-card)"
+                border "2px solid var(--color-ink)"
+            }
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+/- kdl-version 2
+
+mu-pagehead {
+    state kicker="" title="" standfirst="" metaLabel="" metaValue=""
+    style {
+        display block
+        backgroundColor "var(--color-card)"
+        paddingBlock "clamp(2.5rem, 6vw, 4.5rem)"
+        paddingInline "var(--gutter)"
+    }
+    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.25rem"
+        }
+        p "${state.kicker}" {
+            style {
+                margin "0.55rem 0 0"
+                fontFamily "var(--font-label)"
+                fontSize "0.68rem"
+                lineHeight "1.5"
+                letterSpacing "var(--label-tracking)"
+                textTransform "var(--label-case)"
+                color "var(--color-pigment)"
+            }
+        }
+        div {
+            style minWidth="0"
+            h1 "${state.title}" {
+                style {
+                    margin "0"
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.2rem, 5.2vw, 3.9rem)"
+                    fontWeight "700"
+                    lineHeight "calc(1.02 * var(--leading-scale))"
+                    letterSpacing "var(--display-tracking)"
+                    maxWidth "18ch"
+                }
+            }
+            p "${state.standfirst}" {
+                style {
+                    display "${state.standfirst ? 'block' : 'none'}"
+                    margin "1.4rem 0 0"
+                    fontSize "1.12rem"
+                    lineHeight "1.65"
+                    color "var(--color-muted)"
+                    maxWidth "52ch"
+                }
+            }
+            div {
+                style {
+                    display "${state.metaValue ? 'flex' : 'none'}"
+                    flexWrap wrap
+                    gap "0.9rem"
+                    marginBlockStart "1.9rem"
+                    paddingBlockStart "1rem"
+                    borderBlockStart "1px solid var(--color-hairline)"
+                    fontFamily "var(--font-label)"
+                    fontSize "0.68rem"
+                    letterSpacing "var(--label-tracking)"
+                    textTransform "var(--label-case)"
+                }
+                span "${state.metaLabel}" {
+                    style color="var(--color-muted)"
+                }
+                span "${state.metaValue}" {
+                    style color="var(--color-pigment)"
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,36 @@
+/- kdl-version 2
+
+mu-quote {
+    state quote="" attribution=""
+    style {
+        display block
+        borderInlineStart "3px solid var(--color-pigment)"
+        paddingInlineStart "clamp(1.1rem, 3vw, 2rem)"
+    }
+    blockquote {
+        style margin="0"
+        p "${state.quote}" {
+            style {
+                margin "0"
+                fontFamily "var(--font-display)"
+                fontSize "clamp(1.35rem, 2.6vw, 1.8rem)"
+                fontWeight "400"
+                lineHeight "calc(1.32 * var(--leading-scale))"
+                letterSpacing "-0.02em"
+                maxWidth "32ch"
+            }
+        }
+        p "${state.attribution}" {
+            style {
+                display "${state.attribution ? 'block' : 'none'}"
+                margin "1.2rem 0 0"
+                fontFamily "var(--font-label)"
+                fontSize "0.66rem"
+                letterSpacing "var(--label-tracking)"
+                textTransform "var(--label-case)"
+                color inherit
+                opacity "0.62"
+            }
+        }
+    }
+}

package/sites/museum/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/museum/layouts/ar.jxn

@@ -0,0 +1,31 @@
+/- kdl-version 2
+$layout "./layouts/base.jxn"
+
+$element {
+    state {
+        brand أتريوم
+        skipLabel "انتقل إلى المحتوى"
+        railNote "متحف المدينة للفنّ والتاريخ · مفتوح اليوم من ١٠:٠٠ إلى ١٨:٠٠"
+        languageNavLabel اللغة
+        mainNavLabel "التنقّل الرئيسيّ"
+        navExhibitions المعارض
+        navVisit الزيارة
+        navAbout "عن المتحف"
+        homeHref "/ar/"
+        exhibitionsHref "/ar/exhibitions/"
+        visitHref "/ar/visit/"
+        aboutHref "/ar/about/"
+        footerTagline "متحف بلديّ تحت سقف من زجاج: أربعة قرون من المرفأ وصنّاعه وخرائطه، محفوظة أمانةً لكلّ من يعيش في هذه المدينة."
+        footerVisitLabel "أين تجدنا"
+        footerAddress "٢ رصيف الأهوسة، المرفأ القديم"
+        footerHours "من الثلاثاء إلى الأحد، من ١٠:٠٠ إلى ١٨:٠٠. مغلق يوم الاثنين."
+        footerReadLabel للقراءة
+        footerExhibitionsLink المعارض
+        footerVisitLink "خطّط لزيارتك"
+        footerAboutLink "عن المتحف"
+        footerContactLabel للتواصل
+        footerLegal "© ٢٠٢٦ أتريوم — متحف المدينة للفنّ والتاريخ"
+        footerCredit "متحف بلديّ، الدخول إليه مجّانيّ، بثلاث لغات."
+    }
+    slot
+}