@jxsuite/starters 3.4.0 → 3.6.0

package/sites/professional-firm/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"
@@ -28596,6 +28605,21 @@
             }
           ]
         },
+        "$script": {
+          "additionalProperties": false,
+          "description": "This document's own modules, as TypeScript module text (spec.md §23.2). A state entry names an export of one with `$src: \"#client\"` or `$src: \"#server\"`. `client` runs in the browser; `server` runs only on the server and is never sent to one.",
+          "properties": {
+            "client": {
+              "description": "The module the browser runs. A Function entry with `$src: \"#client\"` is one of its exports.",
+              "type": "string"
+            },
+            "server": {
+              "description": "The module the server runs. A `timing: \"server\"` entry with `$src: \"#server\"` is one of its exports, called with `(args, env)`.",
+              "type": "string"
+            }
+          },
+          "type": "object"
+        },
         "$shadow": {
           "description": "Render this component into a shadow root instead of the light DOM (spec.md §16.6). Off unless set: a shadow root isolates the component's styles from the page and replaces the <slot> emulation with real slot distribution, so it changes how the component composes. Overrides `defaults.shadow` in both directions — `false` opts one component out of a project that opted in.",
           "oneOf": [

package/sites/professional-firm/layouts/article.jxn

@@ -0,0 +1,88 @@
+/- kdl-version 2
+$elements (ref)"../components/pf-nav.jxn" (ref)"../components/pf-footer.jxn"
+
+div {
+    style minHeight="100vh" display=flex flexDirection=column backgroundColor="var(--color-paper)"
+    pf-nav
+    main {
+        style flex="1"
+        div {
+            style {
+                maxWidth "1040px"
+                margin "0 auto"
+                padding "clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(3rem, 8vw, 5rem)"
+                display grid
+                gridTemplateColumns "minmax(0, 200px) minmax(0, 1fr)"
+                gap "clamp(2rem, 5vw, 4rem)"
+                alignItems start
+                @--md gridTemplateColumns="1fr" gap="2rem"
+            }
+            aside {
+                style {
+                    position sticky
+                    top "6rem"
+                    borderTop "3px solid var(--color-accent)"
+                    paddingTop "1.25rem"
+                    @--md position=static borderTop="1px solid var(--color-rule)"
+                }
+                div {
+                    style display=flex alignItems=baseline gap="0.5rem" marginBottom="1.5rem"
+                    span Meridian {
+                        style {
+                            fontFamily "var(--font-serif)"
+                            fontSize "1.15rem"
+                            fontWeight "600"
+                            color "var(--color-ink)"
+                        }
+                    }
+                    span Quarterly {
+                        style {
+                            fontFamily "var(--font-sans)"
+                            fontSize "0.62rem"
+                            fontWeight "600"
+                            textTransform uppercase
+                            letterSpacing "0.22em"
+                            color "var(--color-accent)"
+                        }
+                    }
+                }
+                div {
+                    style {
+                        fontFamily "var(--font-sans)"
+                        fontSize "0.68rem"
+                        fontWeight "600"
+                        textTransform uppercase
+                        letterSpacing "0.14em"
+                        color "var(--color-muted)"
+                        lineHeight "1.8"
+                        paddingBottom "1.25rem"
+                        marginBottom "1.25rem"
+                        borderBottom "1px solid var(--color-hairline)"
+                    }
+                    div "Filed under"
+                    div Insight {
+                        style color="var(--color-ink)"
+                    }
+                }
+                a href="/insights/" "← All insights" {
+                    style {
+                        fontFamily "var(--font-sans)"
+                        fontSize "0.72rem"
+                        fontWeight "600"
+                        textTransform uppercase
+                        letterSpacing "0.14em"
+                        color "var(--color-ink)"
+                        textDecoration none
+                        transition "color 0.15s"
+                        :hover color="var(--color-accent)"
+                    }
+                }
+            }
+            div {
+                style maxWidth="var(--measure)" minWidth="0"
+                slot
+            }
+        }
+    }
+    pf-footer
+}

package/sites/professional-firm/layouts/base.jxn

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

package/sites/professional-firm/package.json

@@ -9,10 +9,10 @@
     "dev": "jx dev"
   },
   "dependencies": {
-    "@jxsuite/parser": "^4.3.3"
+    "@jxsuite/parser": "^5.0.0"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^8.5.0",
-    "@jxsuite/runtime": "^6.2.2"
+    "@jxsuite/compiler": "^8.7.0",
+    "@jxsuite/runtime": "^7.0.0"
   }
 }

package/sites/professional-firm/pages/insights/[slug].jxn

@@ -0,0 +1,106 @@
+/- kdl-version 2
+$layout "./layouts/article.jxn"
+$paths contentType=insights param=slug field=id
+
+$element .title="${state.entry.data.title} — Meridian Advisory" {
+    state {
+        entry {
+            $prototype ContentEntry
+            $src "@jxsuite/parser/ContentEntry.class.json"
+            contentType insights
+            field id
+            id (ref)"#/$params/slug"
+        }
+    }
+    article {
+        pf-article-header {
+            $props {
+                eyebrow "${state.entry.data.category}"
+                title "${state.entry.data.title}"
+                date "${state.entry.data.date}"
+                author "${state.entry.data.author}"
+                readingTime "${state.entry._meta.readingTime}"
+            }
+        }
+        div {
+            style {
+                fontFamily "var(--font-serif)"
+                fontSize "1.2rem"
+                lineHeight "1.8"
+                color "var(--color-ink)"
+                "& p:first-of-type::first-letter" {
+                    float left
+                    fontFamily "var(--font-serif)"
+                    fontSize "3.6em"
+                    lineHeight "0.82"
+                    fontWeight "600"
+                    padding "0.02em 0.14em 0 0"
+                    color "var(--color-accent)"
+                }
+            }
+            .children {
+                $array items=(ref)"#/state/entry/$children" {
+                    p "${item.textContent}" {
+                        style margin="0 0 1.5rem"
+                    }
+                }
+            }
+        }
+        div "Written by ${state.entry.data.author} · Meridian Advisory" {
+            style {
+                marginTop "2.5rem"
+                paddingTop "1.5rem"
+                borderTop "1px solid var(--color-hairline)"
+                fontFamily "var(--font-sans)"
+                fontSize "0.78rem"
+                textTransform uppercase
+                letterSpacing "0.12em"
+                color "var(--color-muted)"
+            }
+        }
+        div {
+            style {
+                marginTop "2.5rem"
+                backgroundColor "var(--color-ink-deep)"
+                color "var(--color-text-white)"
+                borderTop "3px solid var(--color-accent)"
+                padding "2rem"
+                display flex
+                flexWrap wrap
+                alignItems center
+                justifyContent space-between
+                gap "1.25rem"
+            }
+            div {
+                div "Have a question this raised?" {
+                    style {
+                        fontFamily "var(--font-serif)"
+                        fontSize "1.35rem"
+                        fontWeight "500"
+                        marginBottom "0.3rem"
+                    }
+                }
+                div "Book a free consultation with a Meridian advisor." {
+                    style color="rgba(244,241,233,0.75)" fontSize="0.95rem"
+                }
+            }
+            a href="/contact/" "Book a consultation" {
+                style {
+                    display inline-block
+                    backgroundColor "var(--color-accent)"
+                    color "var(--color-ink-deep)"
+                    padding "0.85rem 1.75rem"
+                    fontFamily "var(--font-sans)"
+                    fontSize "0.76rem"
+                    fontWeight "600"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    textDecoration none
+                    whiteSpace nowrap
+                    transition "background-color 0.15s"
+                    :hover backgroundColor="#b0904c"
+                }
+            }
+        }
+    }
+}

package/sites/professional-firm/project.jxn

@@ -4,7 +4,7 @@ project "Meridian Advisory"
 
 url "https://example.com"
 
-defaults layout="./layouts/base.json" lang=en
+defaults layout="./layouts/base.jxn" lang=en
 
 $head {
     meta name=viewport content="width=device-width, initial-scale=1"

package/sites/real-estate/components/re-agent-band.jxn

@@ -0,0 +1,165 @@
+/- kdl-version 2
+
+re-agent-band {
+    state {
+        eyebrow "Your north shore team"
+        heading ""
+        text ""
+        phone "(555) 204-7788"
+        cta "Book a call"
+        ctaHref "/contact/"
+        cta2 "Meet the team"
+        cta2Href "/about/"
+        img1 type=string format=image default="/images/agent-1.jpg"
+        img2 type=string format=image default="/images/agent-2.jpg"
+        img3 type=string format=image default="/images/agent-3.jpg"
+    }
+    style display=block padding="clamp(2.5rem, 6vw, 4rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            position relative
+            overflow hidden
+            borderRadius "var(--radius-lg)"
+            background "radial-gradient(ellipse 60% 90% at 8% 0%, rgba(20,184,166,0.28), transparent 60%), radial-gradient(ellipse 50% 80% at 100% 100%, rgba(13,148,136,0.22), transparent 60%), var(--color-bg-dark)"
+            border "1px solid var(--color-bg-ink-soft)"
+            padding "clamp(2rem, 4vw, 3.25rem)"
+            display grid
+            gridTemplateColumns "auto 1fr"
+            gap "clamp(1.5rem, 4vw, 3.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="1.75rem"
+        }
+        div {
+            style display=flex flexDirection=column gap="1rem"
+            div {
+                style display=flex alignItems=center
+                img src="${state.img1}" alt="Northshore Realty agent" loading=lazy width="72" height="72" {
+                    style {
+                        width "4.5rem"
+                        height "4.5rem"
+                        borderRadius "999px"
+                        objectFit cover
+                        border "3px solid var(--color-bg-dark)"
+                        boxShadow "0 6px 18px rgba(0,0,0,0.4)"
+                    }
+                }
+                img src="${state.img2}" alt="Northshore Realty agent" loading=lazy width="72" height="72" {
+                    style {
+                        width "4.5rem"
+                        height "4.5rem"
+                        borderRadius "999px"
+                        objectFit cover
+                        border "3px solid var(--color-bg-dark)"
+                        marginLeft "-1.1rem"
+                        boxShadow "0 6px 18px rgba(0,0,0,0.4)"
+                    }
+                }
+                img src="${state.img3}" alt="Northshore Realty agent" loading=lazy width="72" height="72" {
+                    style {
+                        width "4.5rem"
+                        height "4.5rem"
+                        borderRadius "999px"
+                        objectFit cover
+                        border "3px solid var(--color-bg-dark)"
+                        marginLeft "-1.1rem"
+                        boxShadow "0 6px 18px rgba(0,0,0,0.4)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.4rem"
+                    color "var(--color-accent-bright)"
+                    fontWeight "700"
+                    fontSize "0.9rem"
+                }
+                span ★★★★★
+                span "4.9 · 220 reviews" {
+                    style color="rgba(255,255,255,0.6)" fontWeight="600"
+                }
+            }
+        }
+        div {
+            p "${state.eyebrow}" {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    fontSize "0.74rem"
+                    fontWeight "700"
+                    color "var(--color-accent-bright)"
+                    margin "0 0 0.8rem"
+                }
+            }
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(1.75rem, 3.4vw, 2.6rem)"
+                    fontWeight "500"
+                    lineHeight "1.1"
+                    letterSpacing "-0.015em"
+                    margin "0 0 0.9rem"
+                    color "var(--color-text-white)"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    fontSize "1.05rem"
+                    lineHeight "1.65"
+                    color "rgba(255,255,255,0.72)"
+                    margin "0 0 1.75rem"
+                    maxWidth "48ch"
+                }
+            }
+            div {
+                style display=flex alignItems=center gap="1.25rem" flexWrap=wrap
+                a href="${state.ctaHref}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-accent-bright)"
+                        color "var(--color-ink)"
+                        padding "0.85rem 1.6rem"
+                        borderRadius "999px"
+                        fontSize "1rem"
+                        fontWeight "700"
+                        textDecoration none
+                        transition "transform 0.15s, box-shadow 0.15s"
+                        boxShadow "0 12px 30px -12px rgba(20,184,166,0.7)"
+                        :hover {
+                            transform "translateY(-2px)"
+                            boxShadow "0 18px 40px -12px rgba(20,184,166,0.8)"
+                        }
+                    }
+                    span "${state.cta}"
+                    span →
+                }
+                a href=tel:+15552047788 {
+                    style display=inline-flex flexDirection=column textDecoration=none
+                    span "Call us" {
+                        style {
+                            fontSize "0.72rem"
+                            textTransform uppercase
+                            letterSpacing "0.12em"
+                            color "rgba(255,255,255,0.5)"
+                            fontWeight "700"
+                        }
+                    }
+                    span "${state.phone}" {
+                        style {
+                            fontSize "1.2rem"
+                            fontWeight "800"
+                            color "var(--color-text-white)"
+                            fontVariantNumeric tabular-nums
+                            letterSpacing "-0.01em"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/real-estate/components/re-agent-card.jxn

@@ -0,0 +1,78 @@
+/- kdl-version 2
+
+re-agent-card {
+    state {
+        name ""
+        role ""
+        phone ""
+        image type=string format=image default=""
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        transition "transform 0.2s, box-shadow 0.2s"
+        :hover transform="translateY(-3px)" boxShadow="var(--shadow-card)"
+        ":hover img" transform="scale(1.04)"
+    }
+    div {
+        style {
+            position relative
+            overflow hidden
+            aspectRatio "1 / 1"
+            backgroundColor "var(--color-bg-tint)"
+        }
+        img src="${state.image}" alt="${state.name}" loading=lazy {
+            style {
+                position absolute
+                inset "0"
+                width "100%"
+                height "100%"
+                objectFit cover
+                display block
+                transition "transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)"
+            }
+        }
+    }
+    div {
+        style padding="1.25rem"
+        p "${state.role}" {
+            style {
+                margin "0 0 0.5rem"
+                color "var(--color-primary)"
+                fontSize "0.72rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.1em"
+            }
+        }
+        h3 "${state.name}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.2rem"
+                fontWeight "700"
+                letterSpacing "-0.01em"
+                margin "0 0 0.6rem"
+            }
+        }
+        a href="tel:${state.phone}" {
+            style {
+                display inline-flex
+                alignItems center
+                gap "0.4rem"
+                color "var(--color-text-secondary)"
+                fontSize "0.92rem"
+                fontWeight "600"
+                textDecoration none
+                fontVariantNumeric tabular-nums
+                :hover color="var(--color-primary)"
+            }
+            span ☎ {
+                style fontSize="0.85rem"
+            }
+            span "${state.phone}"
+        }
+    }
+}

package/sites/real-estate/components/re-contact-form.jxn

@@ -0,0 +1,119 @@
+/- kdl-version 2
+
+re-contact-form {
+    state note="This is a demo form. Wire it to your CRM or email in pages/contact.md."
+    style display=block
+    form action="#" method=post {
+        style display=grid gap="0.9rem" marginTop="1.5rem"
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name" {
+            style {
+                width "100%"
+                padding "0.8rem 0.95rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-white)"
+                outline none
+                transition "border-color 0.15s, box-shadow 0.15s"
+                :focus {
+                    borderColor "var(--color-primary)"
+                    boxShadow "0 0 0 3px var(--color-accent-soft)"
+                }
+            }
+        }
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address" {
+            style {
+                width "100%"
+                padding "0.8rem 0.95rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-white)"
+                outline none
+                transition "border-color 0.15s, box-shadow 0.15s"
+                :focus {
+                    borderColor "var(--color-primary)"
+                    boxShadow "0 0 0 3px var(--color-accent-soft)"
+                }
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="0.9rem" {
+                @--sm gridTemplateColumns="1fr"
+            }
+            input type=text name=intent placeholder="Buying or selling?" aria-label="Buying or selling" {
+                style {
+                    width "100%"
+                    padding "0.8rem 0.95rem"
+                    border "1px solid var(--color-border-strong)"
+                    borderRadius "var(--radius-sm)"
+                    fontSize "1rem"
+                    fontFamily inherit
+                    backgroundColor "var(--color-bg-white)"
+                    outline none
+                    transition "border-color 0.15s, box-shadow 0.15s"
+                    :focus {
+                        borderColor "var(--color-primary)"
+                        boxShadow "0 0 0 3px var(--color-accent-soft)"
+                    }
+                }
+            }
+            input type=text name=area placeholder="Preferred area" aria-label="Preferred area" {
+                style {
+                    width "100%"
+                    padding "0.8rem 0.95rem"
+                    border "1px solid var(--color-border-strong)"
+                    borderRadius "var(--radius-sm)"
+                    fontSize "1rem"
+                    fontFamily inherit
+                    backgroundColor "var(--color-bg-white)"
+                    outline none
+                    transition "border-color 0.15s, box-shadow 0.15s"
+                    :focus {
+                        borderColor "var(--color-primary)"
+                        boxShadow "0 0 0 3px var(--color-accent-soft)"
+                    }
+                }
+            }
+        }
+        textarea name=notes rows="4" placeholder="What are you looking for? Budget, bedrooms, timing…" aria-label=Notes {
+            style {
+                width "100%"
+                padding "0.8rem 0.95rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius-sm)"
+                fontSize "1rem"
+                fontFamily inherit
+                backgroundColor "var(--color-bg-white)"
+                outline none
+                resize vertical
+                transition "border-color 0.15s, box-shadow 0.15s"
+                :focus {
+                    borderColor "var(--color-primary)"
+                    boxShadow "0 0 0 3px var(--color-accent-soft)"
+                }
+            }
+        }
+        button type=submit "Request a call" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.9rem 1.6rem"
+                border none
+                borderRadius "999px"
+                fontSize "1rem"
+                fontFamily inherit
+                fontWeight "700"
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s, transform 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)" transform="translateY(-1px)"
+            }
+        }
+    }
+    p "${state.note}" {
+        style fontSize="0.85rem" color="var(--color-text-muted)" margin="1rem 0 0"
+    }
+}