@jxsuite/starters 3.3.2 → 3.5.0

package/sites/saas/components/sa-pricing.jxn

@@ -0,0 +1,317 @@
+/- kdl-version 2
+
+sa-pricing {
+    state {
+        billing monthly
+        starterMonthly "0"
+        starterAnnual "0"
+        proMonthly "29"
+        proAnnual "24"
+        scaleMonthly "79"
+        scaleAnnual "63"
+    }
+    style display=block maxWidth="var(--max-width)" margin="0 auto" padding="0 1.5rem"
+    div {
+        style {
+            display flex
+            flexDirection column
+            alignItems center
+            gap "0.6rem"
+            marginBottom "2.75rem"
+        }
+        div {
+            style {
+                display inline-flex
+                padding "0.3rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-bg-cream)"
+                border "1px solid var(--color-border)"
+            }
+            button Monthly {
+                (on)onclick {
+                    $expression operator="=" target=(ref)"#/state/billing" value=monthly
+                }
+                style {
+                    padding "0.5rem 1.25rem"
+                    border none
+                    borderRadius "999px"
+                    cursor pointer
+                    fontSize "0.9rem"
+                    fontWeight "600"
+                    fontFamily inherit
+                    transition "background-color 0.15s, color 0.15s, box-shadow 0.15s"
+                    backgroundColor "${state.billing === 'monthly' ? 'var(--color-bg-elev2)' : 'transparent'}"
+                    color "${state.billing === 'monthly' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}"
+                    boxShadow "${state.billing === 'monthly' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
+                }
+            }
+            button Annual {
+                (on)onclick {
+                    $expression operator="=" target=(ref)"#/state/billing" value=annual
+                }
+                style {
+                    padding "0.5rem 1.25rem"
+                    border none
+                    borderRadius "999px"
+                    cursor pointer
+                    fontSize "0.9rem"
+                    fontWeight "600"
+                    fontFamily inherit
+                    transition "background-color 0.15s, color 0.15s, box-shadow 0.15s"
+                    backgroundColor "${state.billing === 'annual' ? 'var(--color-bg-elev2)' : 'transparent'}"
+                    color "${state.billing === 'annual' ? 'var(--color-text-primary)' : 'var(--color-text-muted)'}"
+                    boxShadow "${state.billing === 'annual' ? '0 1px 4px rgba(20, 20, 43, 0.1)' : 'none'}"
+                }
+            }
+        }
+        p "${state.billing === 'annual' ? 'You’re saving 20% with annual billing' : 'Switch to annual and save 20%'}" {
+            style margin="0" fontSize="0.85rem" fontWeight="600" color="var(--color-primary)"
+        }
+    }
+    div {
+        style display=grid gridTemplateColumns="repeat(3, 1fr)" gap="1.25rem" alignItems=stretch {
+            @--md gridTemplateColumns="1fr" maxWidth="420px" margin="0 auto"
+        }
+        div {
+            style {
+                display flex
+                flexDirection column
+                padding "2rem"
+                borderRadius "var(--radius)"
+                border "1px solid var(--color-border)"
+                backgroundColor "var(--color-bg-white)"
+            }
+            h3 Starter {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "600"
+                    margin "0 0 0.35rem"
+                }
+            }
+            p "For individuals and side projects getting off the ground." {
+                style {
+                    margin "0 0 1.25rem"
+                    color "var(--color-text-muted)"
+                    fontSize "0.92rem"
+                    lineHeight "1.55"
+                }
+            }
+            div {
+                style display=flex alignItems=baseline gap="0.25rem" marginBottom="0.25rem"
+                span "$${state.billing === 'monthly' ? state.starterMonthly : state.starterAnnual}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "2.75rem"
+                        fontWeight "700"
+                        letterSpacing "-0.03em"
+                        lineHeight "1"
+                    }
+                }
+                span "/mo" {
+                    style color="var(--color-text-muted)" fontSize="0.95rem"
+                }
+            }
+            p "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}" {
+                style margin="0 0 1.5rem" fontSize="0.82rem" color="var(--color-text-muted)"
+            }
+            a href="/contact/" "Start for free" {
+                style {
+                    display block
+                    textAlign center
+                    padding "0.7rem 1rem"
+                    borderRadius "var(--radius)"
+                    border "1px solid var(--color-border)"
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.95rem"
+                    marginBottom "1.5rem"
+                    transition "border-color 0.15s"
+                    :hover borderColor="var(--color-primary)"
+                }
+            }
+            div {
+                style display=flex flexDirection=column gap="0.6rem"
+                sa-check-item {
+                    $props text="Up to 3 projects"
+                }
+                sa-check-item {
+                    $props text="Community support"
+                }
+                sa-check-item {
+                    $props text="1 GB storage"
+                }
+            }
+        }
+        div {
+            style {
+                position relative
+                display flex
+                flexDirection column
+                padding "2rem"
+                borderRadius "var(--radius)"
+                border "1px solid rgba(124, 116, 255, 0.6)"
+                backgroundColor "var(--color-bg-elev)"
+                boxShadow "0 24px 70px -18px var(--glow)"
+            }
+            span "Most popular" {
+                style {
+                    position absolute
+                    top "-0.75rem"
+                    left "2rem"
+                    padding "0.25rem 0.75rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-primary)"
+                    color "var(--color-text-white)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    letterSpacing "0.05em"
+                    textTransform uppercase
+                }
+            }
+            h3 Pro {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "600"
+                    margin "0 0 0.35rem"
+                }
+            }
+            p "For growing teams that need automation and insight." {
+                style {
+                    margin "0 0 1.25rem"
+                    color "var(--color-text-muted)"
+                    fontSize "0.92rem"
+                    lineHeight "1.55"
+                }
+            }
+            div {
+                style display=flex alignItems=baseline gap="0.25rem" marginBottom="0.25rem"
+                span "$${state.billing === 'monthly' ? state.proMonthly : state.proAnnual}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "2.75rem"
+                        fontWeight "700"
+                        letterSpacing "-0.03em"
+                        lineHeight "1"
+                        color "var(--color-primary)"
+                    }
+                }
+                span "/mo" {
+                    style color="var(--color-text-muted)" fontSize="0.95rem"
+                }
+            }
+            p "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}" {
+                style margin="0 0 1.5rem" fontSize="0.82rem" color="var(--color-text-muted)"
+            }
+            a href="/contact/" "Start 14-day trial" {
+                style {
+                    display block
+                    textAlign center
+                    padding "0.7rem 1rem"
+                    borderRadius "999px"
+                    background "var(--grad-btn)"
+                    color "#ffffff"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.95rem"
+                    marginBottom "1.5rem"
+                    boxShadow "0 10px 26px -8px var(--glow)"
+                    transition "transform 0.15s"
+                    :hover transform="translateY(-2px)"
+                }
+            }
+            div {
+                style display=flex flexDirection=column gap="0.6rem"
+                sa-check-item {
+                    $props text="Unlimited projects"
+                }
+                sa-check-item {
+                    $props text="Automations & workflows"
+                }
+                sa-check-item {
+                    $props text="Analytics dashboard"
+                }
+                sa-check-item {
+                    $props text="Priority email support"
+                }
+            }
+        }
+        div {
+            style {
+                display flex
+                flexDirection column
+                padding "2rem"
+                borderRadius "var(--radius)"
+                border "1px solid var(--color-border)"
+                backgroundColor "var(--color-bg-white)"
+            }
+            h3 Scale {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.25rem"
+                    fontWeight "600"
+                    margin "0 0 0.35rem"
+                }
+            }
+            p "For organizations that need control, security, and SLAs." {
+                style {
+                    margin "0 0 1.25rem"
+                    color "var(--color-text-muted)"
+                    fontSize "0.92rem"
+                    lineHeight "1.55"
+                }
+            }
+            div {
+                style display=flex alignItems=baseline gap="0.25rem" marginBottom="0.25rem"
+                span "$${state.billing === 'monthly' ? state.scaleMonthly : state.scaleAnnual}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "2.75rem"
+                        fontWeight "700"
+                        letterSpacing "-0.03em"
+                        lineHeight "1"
+                    }
+                }
+                span "/mo" {
+                    style color="var(--color-text-muted)" fontSize="0.95rem"
+                }
+            }
+            p "${state.billing === 'annual' ? 'per user · billed annually' : 'per user · billed monthly'}" {
+                style margin="0 0 1.5rem" fontSize="0.82rem" color="var(--color-text-muted)"
+            }
+            a href="/contact/" "Talk to sales" {
+                style {
+                    display block
+                    textAlign center
+                    padding "0.7rem 1rem"
+                    borderRadius "var(--radius)"
+                    border "1px solid var(--color-border)"
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontWeight "600"
+                    fontSize "0.95rem"
+                    marginBottom "1.5rem"
+                    transition "border-color 0.15s"
+                    :hover borderColor="var(--color-primary)"
+                }
+            }
+            div {
+                style display=flex flexDirection=column gap="0.6rem"
+                sa-check-item {
+                    $props text="Everything in Pro"
+                }
+                sa-check-item {
+                    $props text="SSO & SCIM provisioning"
+                }
+                sa-check-item {
+                    $props text="Advanced permissions"
+                }
+                sa-check-item {
+                    $props text="99.9% uptime SLA"
+                }
+            }
+        }
+    }
+}

package/sites/saas/components/sa-section-header.jxn

@@ -0,0 +1,43 @@
+/- kdl-version 2
+
+sa-section-header {
+    state eyebrow="" heading="" subheading="" align=center
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto 3rem"
+        textAlign "${state.align}"
+    }
+    p "${state.eyebrow}" {
+        style {
+            display "${state.eyebrow ? 'block' : 'none'}"
+            fontFamily "var(--font-heading)"
+            textTransform uppercase
+            letterSpacing "0.12em"
+            fontSize "0.8rem"
+            fontWeight "600"
+            color "var(--color-primary)"
+            margin "0 0 0.75rem"
+        }
+    }
+    h2 "${state.heading}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(1.9rem, 4vw, 2.6rem)"
+            fontWeight "700"
+            lineHeight "1.15"
+            letterSpacing "-0.03em"
+            margin "0"
+        }
+    }
+    p "${state.subheading}" {
+        style {
+            display "${state.subheading ? 'block' : 'none'}"
+            fontSize "1.1rem"
+            lineHeight "1.7"
+            color "var(--color-text-muted)"
+            margin "1rem auto 0"
+            maxWidth "56ch"
+        }
+    }
+}

package/sites/saas/components/sa-stat.jxn

@@ -0,0 +1,32 @@
+/- kdl-version 2
+
+sa-stat {
+    state value="0" label=""
+    style {
+        display flex
+        flexDirection column
+        gap "0.5rem"
+        padding "1.9rem"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        backgroundColor "var(--color-bg-elev)"
+        textAlign center
+    }
+    div "${state.value}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "clamp(2.25rem, 5vw, 3.4rem)"
+            fontWeight "700"
+            letterSpacing "-0.03em"
+            lineHeight "1"
+            background "var(--grad)"
+            backgroundClip text
+            webkitBackgroundClip text
+            webkitTextFillColor transparent
+            color "var(--color-primary)"
+        }
+    }
+    div "${state.label}" {
+        style fontSize="0.9rem" color="var(--color-text-muted)" lineHeight="1.5"
+    }
+}

package/sites/saas/components/sa-testimonial-card.jxn

@@ -0,0 +1,37 @@
+/- kdl-version 2
+
+sa-testimonial-card {
+    state quote="" author="" company=""
+    style {
+        display flex
+        flexDirection column
+        gap "1.25rem"
+        padding "1.9rem"
+        backgroundColor "var(--color-bg-white)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        boxShadow "0 4px 24px rgba(20, 20, 43, 0.05)"
+    }
+    div ★★★★★ {
+        style color="var(--color-primary)" fontSize="1rem" letterSpacing="0.15em"
+    }
+    p "“${state.quote}”" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.12rem"
+            lineHeight "1.6"
+            fontWeight "500"
+            margin "0"
+            flex "1"
+            color "var(--color-text-primary)"
+        }
+    }
+    div {
+        div "${state.author}" {
+            style fontWeight="600" color="var(--color-text-primary)"
+        }
+        div "${state.company}" {
+            style fontSize="0.9rem" color="var(--color-text-muted)"
+        }
+    }
+}

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

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

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

@@ -0,0 +1,119 @@
+/- kdl-version 2
+$schema "./project.schema.json"
+project Flowlark
+
+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="Flowlark is the modern product platform that helps teams plan, ship, and scale — with pricing that flexes from your first project to your thousandth."
+    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=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap"
+}
+
+$media {
+    -- "1200px"
+    --lg "(max-width: 1024px)"
+    --md "(max-width: 768px)"
+    --sm "(max-width: 640px)"
+}
+
+style {
+    --color-primary "#7c74ff"
+    --color-primary-hover "#948dff"
+    --color-ink "#050509"
+    --color-bg-dark "#0a0a14"
+    --color-bg-cream "#14141f"
+    --color-bg-surface "#14141f"
+    --color-bg-white "#0a0a14"
+    --color-bg "#0a0a14"
+    --color-bg-elev "#14141f"
+    --color-bg-elev2 "#1c1c2b"
+    --color-text-primary "#edecf5"
+    --color-text-white "#ffffff"
+    --color-text-muted "#9494ac"
+    --color-border "#262636"
+    --color-line "#262636"
+    --color-accent "#7c74ff"
+    --color-accent-soft "rgba(124, 116, 255, 0.14)"
+    --grad "linear-gradient(120deg, #8b7bff 0%, #22d3ee 55%, #f472b6 100%)"
+    --grad-btn "linear-gradient(120deg, #7c74ff, #a06bff)"
+    --glow "rgba(124, 116, 255, 0.45)"
+    --font-heading "'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif"
+    --font-body "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    --max-width "1200px"
+    --max-width-narrow "820px"
+    --radius "0.9rem"
+    margin "0"
+    padding "0"
+    fontFamily "var(--font-body)"
+    lineHeight "1.6"
+    color "var(--color-text-primary)"
+    backgroundColor "var(--color-bg)"
+    table {
+        width "100%"
+        borderCollapse collapse
+        fontSize "0.95rem"
+        textAlign left
+        backgroundColor "var(--color-bg-white)"
+        thead {
+            borderBottom "1px solid var(--color-border)"
+            th {
+                padding "1rem 1.1rem"
+                fontFamily "var(--font-heading)"
+                fontSize "0.9rem"
+                fontWeight "600"
+                color "var(--color-text-primary)"
+            }
+        }
+        tbody {
+            tr {
+                borderBottom "1px solid var(--color-border)"
+            }
+            td {
+                padding "0.9rem 1.1rem"
+                color "var(--color-text-muted)"
+                :first-child {
+                    color "var(--color-text-primary)"
+                    fontWeight "600"
+                }
+            }
+        }
+    }
+}
+
+images {
+    optimize #true
+    widths 320 640 960 1280 1920
+    formats webp avif
+    quality webp=80 avif=65 jpeg=80 png=80
+    sizes "(max-width: 768px) 100vw, 50vw"
+    lazyLoad #true
+}
+
+content {
+    testimonials {
+        source "./content/testimonials/"
+        format Markdown
+        schema {
+            type object
+            properties {
+                quote type=string
+                author type=string
+                company type=string
+                order type=number
+            }
+            required quote author
+        }
+    }
+}
+
+build outDir="./dist" format=directory trailingSlash=always
+
+extensions {
+    - "@jxsuite/parser"
+}

package/sites/shop/components/shp-badge.jxn

@@ -0,0 +1,17 @@
+/- kdl-version 2
+
+shp-badge {
+    state label=""
+    style {
+        display inline-block
+        padding "0.25rem 0.7rem"
+        borderRadius "999px"
+        fontSize "0.72rem"
+        fontWeight "600"
+        textTransform uppercase
+        letterSpacing "0.06em"
+        backgroundColor "rgba(22, 163, 74, 0.12)"
+        color "var(--color-primary-hover)"
+    }
+    span "${state.label}"
+}