@jxsuite/starters 3.3.2 → 3.5.0

package/sites/restaurant/components/bit-menu-item.jxn

@@ -0,0 +1,50 @@
+/- kdl-version 2
+
+bit-menu-item {
+    state name="" price="" description=""
+    style display=block padding="1.05rem 0"
+    div {
+        style display=flex alignItems=baseline gap="0"
+        h3 "${state.name}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.3rem"
+                fontWeight "600"
+                letterSpacing "-0.005em"
+                margin "0"
+                color "var(--color-text-primary)"
+            }
+        }
+        span {
+            style {
+                flex "1 1 auto"
+                margin "0 0.6rem"
+                borderBottom "1.5px dotted var(--color-border-strong)"
+                transform "translateY(-0.32em)"
+            }
+        }
+        span "${state.price}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "1.2rem"
+                fontWeight "600"
+                color "var(--color-primary)"
+                whiteSpace nowrap
+                fontVariantNumeric tabular-nums
+            }
+        }
+    }
+    p "${state.description}" {
+        style {
+            display "${state.description ? 'block' : 'none'}"
+            margin "0.4rem 0 0"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontWeight "400"
+            color "var(--color-text-muted)"
+            fontSize "1.02rem"
+            lineHeight "1.55"
+            maxWidth "58ch"
+        }
+    }
+}

package/sites/restaurant/components/bit-nav.jxn

@@ -0,0 +1,145 @@
+/- kdl-version 2
+
+bit-nav {
+    state brand="Bistro & Café" status="Open today · 8am – 3pm" place="128 Market St · Riverbend"
+    style display=block position=sticky top="0" zIndex="50"
+    div {
+        style backgroundColor="var(--color-espresso)" color="var(--color-text-white)"
+        div {
+            style {
+                maxWidth "var(--max-width-wide)"
+                margin "0 auto"
+                padding "0.42rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent center
+                gap "0.9rem"
+                fontFamily "var(--font-body)"
+                fontSize "0.72rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.18em"
+            }
+            span {
+                style display=inline-flex alignItems=center gap="0.5rem" color="var(--color-amber)"
+                span {
+                    style {
+                        width "0.42rem"
+                        height "0.42rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-amber)"
+                        boxShadow "0 0 0 3px rgba(201,138,60,0.25)"
+                    }
+                }
+                span "${state.status}"
+            }
+            span — {
+                style opacity="0.35" {
+                    @--sm display=none
+                }
+            }
+            span "${state.place}" {
+                style opacity="0.72" {
+                    @--sm display=none
+                }
+            }
+        }
+    }
+    div {
+        style {
+            backgroundColor "rgba(246,236,219,0.9)"
+            backdropFilter "blur(8px)"
+            borderBottom "1px solid var(--color-border)"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width-wide)"
+                margin "0 auto"
+                padding "0.85rem 1.5rem"
+                display grid
+                gridTemplateColumns "1fr auto 1fr"
+                alignItems center
+                gap "1rem"
+            }
+            nav {
+                style {
+                    display flex
+                    alignItems center
+                    gap "1.75rem"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.76rem"
+                    fontWeight "700"
+                    textTransform uppercase
+                    letterSpacing "0.16em"
+                    @--sm gap="1.1rem"
+                }
+                a href="/menu/" Menu {
+                    style {
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/about/" Story {
+                    style {
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        transition "color 0.15s"
+                        @--sm display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+            }
+            a href="/" "${state.brand}" {
+                style {
+                    justifySelf center
+                    textAlign center
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.35rem, 3.5vw, 1.85rem)"
+                    fontWeight "700"
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    letterSpacing "-0.01em"
+                    lineHeight "1"
+                    whiteSpace nowrap
+                }
+            }
+            nav {
+                style justifySelf=end display=flex alignItems=center gap="1.5rem"
+                a href="/contact/" Visit {
+                    style {
+                        fontFamily "var(--font-body)"
+                        fontSize "0.76rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.16em"
+                        color "var(--color-text-primary)"
+                        textDecoration none
+                        transition "color 0.15s"
+                        @--md display=none
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/contact/" Reserve {
+                    style {
+                        display inline-block
+                        border "1px solid var(--color-primary)"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.5rem 1.25rem"
+                        borderRadius "999px"
+                        textDecoration none
+                        fontFamily "var(--font-body)"
+                        fontWeight "700"
+                        fontSize "0.76rem"
+                        textTransform uppercase
+                        letterSpacing "0.14em"
+                        transition "background-color 0.15s, color 0.15s"
+                        :hover backgroundColor=transparent color="var(--color-primary)"
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/restaurant/components/bit-reservation.jxn

@@ -0,0 +1,90 @@
+/- kdl-version 2
+
+bit-reservation {
+    state {
+        heading "Request a table"
+        intro "Tell us when you'd like to come in and we'll confirm by email within a day."
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        padding "clamp(1.75rem, 3.5vw, 2.75rem)"
+        boxShadow "0 24px 60px -40px rgba(30,21,15,0.5)"
+        "& input" {
+            width "100%"
+            padding "0.8rem 0.95rem"
+            border "1px solid var(--color-border-strong)"
+            borderRadius "var(--radius)"
+            fontSize "1rem"
+            fontFamily "var(--font-body)"
+            backgroundColor "var(--color-bg-paper)"
+            color "var(--color-text-primary)"
+        }
+        "& input:focus" outline=none borderColor="var(--color-primary)"
+        "& textarea:focus" outline=none borderColor="var(--color-primary)"
+    }
+    h3 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(1.65rem, 3vw, 2rem)"
+            fontWeight "700"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.intro}" {
+        style {
+            margin "0 0 1.5rem"
+            fontFamily "var(--font-heading)"
+            fontStyle italic
+            fontSize "1.05rem"
+            color "var(--color-text-muted)"
+        }
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name"
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address"
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem"
+            input type=date name=date aria-label="Preferred date"
+            input type=number name=party min="1" max="20" placeholder="Party size" aria-label="Party size"
+        }
+        textarea name=notes rows="3" placeholder="Anything we should know?" aria-label=Notes {
+            style {
+                width "100%"
+                padding "0.8rem 0.95rem"
+                border "1px solid var(--color-border-strong)"
+                borderRadius "var(--radius)"
+                fontSize "1rem"
+                fontFamily "var(--font-body)"
+                backgroundColor "var(--color-bg-paper)"
+                color "var(--color-text-primary)"
+            }
+        }
+        button type=submit "Request a Table" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.9rem 1.75rem"
+                border none
+                borderRadius "999px"
+                fontFamily "var(--font-body)"
+                fontSize "0.85rem"
+                fontWeight "700"
+                textTransform uppercase
+                letterSpacing "0.14em"
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "This is a demo form. Wire it to your booking provider or email in pages/contact.md." {
+            style fontSize="0.85rem" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

package/sites/restaurant/components/bit-review.jxn

@@ -0,0 +1,54 @@
+/- kdl-version 2
+
+bit-review {
+    state quote="" author="" role=""
+    style display=block
+    div “ {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "4.5rem"
+            lineHeight "0.6"
+            fontWeight "700"
+            color "var(--color-primary)"
+            marginBottom "1rem"
+            height "2rem"
+        }
+    }
+    p "${state.quote}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(1.5rem, 3vw, 2.15rem)"
+            fontStyle italic
+            fontWeight "400"
+            lineHeight "1.35"
+            letterSpacing "-0.01em"
+            margin "0 0 1.75rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    div {
+        style display=flex alignItems=center gap="0.85rem"
+        span {
+            style width="2rem" height="1px" backgroundColor="var(--color-primary)"
+        }
+        div {
+            div "${state.author}" {
+                style {
+                    fontFamily "var(--font-body)"
+                    fontWeight "700"
+                    fontSize "0.85rem"
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    color "var(--color-text-primary)"
+                }
+            }
+            div "${state.role}" {
+                style {
+                    fontFamily "var(--font-body)"
+                    fontSize "0.85rem"
+                    color "var(--color-text-muted)"
+                }
+            }
+        }
+    }
+}

package/sites/restaurant/components/bit-section-header.jxn

@@ -0,0 +1,73 @@
+/- kdl-version 2
+
+bit-section-header {
+    state eyebrow="" heading="" headingAccent="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto 2.75rem"
+        textAlign "${state.align}"
+    }
+    div {
+        style {
+            display "${state.eyebrow ? 'flex' : 'none'}"
+            alignItems center
+            gap "0.85rem"
+            justifyContent "${state.align === 'center' ? 'center' : 'flex-start'}"
+            marginBottom "1.1rem"
+        }
+        span {
+            style width="2.25rem" height="1px" backgroundColor="var(--color-primary)"
+        }
+        p "${state.eyebrow}" {
+            style {
+                margin "0"
+                fontFamily "var(--font-body)"
+                textTransform uppercase
+                letterSpacing "0.22em"
+                fontSize "0.74rem"
+                fontWeight "700"
+                color "var(--color-primary)"
+            }
+        }
+        span {
+            style {
+                display "${state.align === 'center' ? 'block' : 'none'}"
+                width "2.25rem"
+                height "1px"
+                backgroundColor "var(--color-primary)"
+            }
+        }
+    }
+    h2 {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2rem, 4.4vw, 3rem)"
+            fontWeight "700"
+            lineHeight "1.1"
+            letterSpacing "-0.02em"
+            margin "0"
+            color "var(--color-text-primary)"
+        }
+        span "${state.heading}"
+        span " ${state.headingAccent}" {
+            style {
+                display "${state.headingAccent ? 'inline' : 'none'}"
+                fontStyle italic
+                fontWeight "500"
+                color "var(--color-primary)"
+            }
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontFamily "var(--font-body)"
+            fontSize "1.1rem"
+            lineHeight "1.7"
+            color "var(--color-text-muted)"
+            margin "1.1rem auto 0"
+            maxWidth "56ch"
+        }
+    }
+}

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

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

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

@@ -0,0 +1,93 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project "Bistro & Café"
+
+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="A neighborhood bistro and café serving seasonal plates, house pastries, and small-batch coffee."
+    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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Mulish:wght@300;400;500;600;700;800&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#bd5a34"
+    --color-primary-hover "#a44827"
+    --color-amber "#c98a3c"
+    --color-ink "#241b14"
+    --color-espresso "#1e150f"
+    --color-bg-dark "#1e150f"
+    --color-bg-cream "#efe3d1"
+    --color-bg-paper "#f6ecdb"
+    --color-bg-white "#fffaf2"
+    --color-text-primary "#2a1f17"
+    --color-text-white "#f6ecdb"
+    --color-text-muted "#7c6a58"
+    --color-border "#e2d5bf"
+    --color-border-strong "#cbb99d"
+    --color-accent "#bd5a34"
+    --font-heading "'Playfair Display', Georgia, 'Times New Roman', serif"
+    --font-body "'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif"
+    --max-width "1200px"
+    --max-width-wide "1320px"
+    --max-width-narrow "780px"
+    --radius "0.25rem"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    fontSize "17px"
+    lineHeight "1.7"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg-paper)"
+    "& a" {
+        color "var(--color-primary)"
+        textUnderlineOffset "0.2em"
+        textDecorationColor "var(--color-border-strong)"
+    }
+}
+
+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 {
+    menu {
+        source "./content/menu/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                name type=string
+                course type=string
+                price type=string
+                description type=string
+                image type=string format=image
+                order type=number
+            }
+            required name course
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/saas/components/sa-check-item.jxn

@@ -0,0 +1,25 @@
+/- kdl-version 2
+
+sa-check-item {
+    state text=""
+    style display=flex alignItems=flex-start gap="0.7rem"
+    span ✓ {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            flexShrink "0"
+            width "1.4rem"
+            height "1.4rem"
+            borderRadius "50%"
+            backgroundColor "var(--color-accent-soft)"
+            color "var(--color-primary)"
+            fontSize "0.8rem"
+            fontWeight "700"
+            marginTop "0.1rem"
+        }
+    }
+    span "${state.text}" {
+        style color="var(--color-text-primary)" fontSize="1rem" lineHeight="1.6"
+    }
+}