@jxsuite/starters 0.34.0 → 0.35.0

package/sites/blog/components/bl-section-header.json

@@ -3,49 +3,66 @@
   "state": {
     "eyebrow": "",
     "heading": "",
-    "subheading": "",
-    "align": "center"
+    "subheading": ""
   },
   "style": {
     "display": "block",
-    "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 2.5rem",
-    "textAlign": "${state.align}"
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto 2rem"
   },
   "children": [
     {
-      "tagName": "p",
+      "tagName": "div",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
-        "textTransform": "uppercase",
-        "letterSpacing": "0.16em",
-        "fontSize": "0.8rem",
-        "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 0.75rem"
+        "display": "flex",
+        "alignItems": "baseline",
+        "justifyContent": "space-between",
+        "gap": "1.5rem",
+        "flexWrap": "wrap",
+        "borderBottom": "1.5px solid var(--color-rule)",
+        "paddingBottom": "0.9rem"
       },
-      "textContent": "${state.eyebrow}"
-    },
-    {
-      "tagName": "h2",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(1.9rem, 4vw, 2.6rem)",
-        "fontWeight": "600",
-        "lineHeight": "1.15",
-        "letterSpacing": "-0.02em",
-        "margin": "0"
-      },
-      "textContent": "${state.heading}"
+      "children": [
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.7rem, 3.5vw, 2.4rem)",
+            "fontWeight": "700",
+            "lineHeight": "1.05",
+            "letterSpacing": "-0.02em",
+            "margin": "0",
+            "color": "var(--color-text-primary)"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "span",
+          "style": {
+            "display": "${state.eyebrow ? 'block' : 'none'}",
+            "fontFamily": "var(--font-body)",
+            "fontSize": "0.74rem",
+            "fontWeight": "500",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.18em",
+            "color": "var(--color-text-muted)",
+            "whiteSpace": "nowrap"
+          },
+          "textContent": "${state.eyebrow}"
+        }
+      ]
     },
     {
       "tagName": "p",
       "style": {
         "display": "${state.subheading ? 'block' : 'none'}",
-        "fontSize": "1.15rem",
-        "lineHeight": "1.7",
+        "fontFamily": "var(--font-heading)",
+        "fontStyle": "italic",
+        "fontSize": "1.2rem",
+        "lineHeight": "1.5",
         "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0"
+        "margin": "1rem 0 0",
+        "maxWidth": "54ch"
       },
       "textContent": "${state.subheading}"
     }

package/sites/blog/components/bl-tag-pill.json

@@ -4,21 +4,24 @@
     "label": ""
   },
   "style": {
-    "display": "inline-block"
+    "display": "inline-flex",
+    "alignItems": "center",
+    "gap": "0.5rem"
   },
   "children": [
+    {
+      "tagName": "span",
+      "style": { "width": "1.6rem", "height": "1px", "backgroundColor": "var(--color-primary)" }
+    },
     {
       "tagName": "span",
       "style": {
-        "display": "inline-block",
-        "backgroundColor": "rgba(14, 165, 233, 0.1)",
-        "color": "var(--color-primary)",
-        "padding": "0.3rem 0.75rem",
-        "borderRadius": "999px",
-        "fontSize": "0.75rem",
+        "fontFamily": "var(--font-body)",
+        "fontSize": "0.74rem",
         "fontWeight": "600",
         "textTransform": "uppercase",
-        "letterSpacing": "0.08em"
+        "letterSpacing": "0.18em",
+        "color": "var(--color-primary)"
       },
       "textContent": "${state.label}"
     }

package/sites/blog/package.json

@@ -9,7 +9,7 @@
     "dev": "jx dev"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^0.19.0",
-    "@jxsuite/runtime": "^0.19.0"
+    "@jxsuite/compiler": "^0.34.0",
+    "@jxsuite/runtime": "^0.34.0"
   }
 }

package/sites/blog/pages/index.md

@@ -10,39 +10,41 @@ state:
       order: asc
 ---
 
-::bl-masthead{props.eyebrow="Essays · Field notes · Since 2021" props.heading="The Long Field" props.subheading="Slow essays on design, technology, and the craft of making things well — written by hand, published most Sundays." props.cta="Read the latest" props.ctaHref="#latest" props.cta2="About the field" props.cta2Href="/about/" props.bg="/images/hero.jpg"}
+::bl-masthead{props.edition="Field Notes · Vol. IV · Published most Sundays" props.heading="The Long Field" props.subheading="Slow essays on design, technology, and the craft of making things well — written by hand, one at a time." props.colophon="Est. 2021 · Set in Fraunces & Newsreader · Marren Oda, editor" props.cta="Read the latest" props.ctaHref="#latest"}
 
-::::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-:::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1fr 1.4fr" style.gap="clamp(2rem, 5vw, 4rem)" style.alignItems="center" style.--md.gridTemplateColumns="1fr"}
-::img{src="/images/author.jpg" alt="Marren Oda, writer and editor" loading="lazy" style.width="100%" style.height="auto" style.borderRadius="var(--radius)" style.boxShadow="0 12px 40px rgba(17,17,17,0.12)"}
-
-::::div{style.fontSize="1.15rem" style.lineHeight="1.8"}
-
-### A field to think out loud in
-
-The Long Field is a one-person publication about design, technology, and the slow craft of making things well. No hot takes, no hustle — just field notes from the workbench, written when there's something worth saying.
-
-I'm Marren, a writer and editor. I care about clear prose, quiet tools, and the kind of work that ages well. If that's your kind of thing, you're in the right place.
-
-:::a{href="/about/" style.display="inline-block" style.marginTop="0.5rem" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
-More about the field →
-:::
-::::
-:::::
+::::::div{style.backgroundColor="var(--color-ink)" style.color="var(--color-text-white)" style.padding="0.7rem 1.5rem" style.fontFamily="var(--font-body)" style.fontSize="0.74rem" style.fontWeight="500" style.textTransform="uppercase" style.letterSpacing="0.16em" style.textAlign="center" style.overflow="hidden" style.whiteSpace="nowrap" style.textOverflow="ellipsis"}
+In this issue — Designing for slowness · The quiet craft of revision · Notes from a long walk · Tools that disappear · The city as a text
 ::::::
 
-:::::section{id="latest" style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::bl-section-header{props.eyebrow="Latest writing" props.heading="Recent essays & field notes"}
+:::::section{id="latest" style.padding="clamp(3rem, 7vw, 5rem) 1.5rem"}
+::bl-section-header{props.eyebrow="Six recent essays" props.heading="The Index" props.subheading="A running list of what's been written lately — newest thinking at the top."}
 
 ::::bl-post-list
 :::Array{items.ref="#/state/posts"}
-::bl-post-card{props.title="${item.data.title}" props.excerpt="${item.data.excerpt}" props.date="${item.data.date}" props.tag="${item.data.tag}" props.cover="${item.data.cover}" props.href="/${item.id}/"}
+::bl-post-card{props.number="${item.data.order}" props.title="${item.data.title}" props.excerpt="${item.data.excerpt}" props.date="${item.data.date}" props.tag="${item.data.tag}" props.href="/${item.id}/"}
 :::
 ::::
 :::::
 
-:::::section{style.padding="0 1.5rem clamp(3.5rem, 8vw, 6rem)"}
-::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
-::bl-newsletter-cta
+::::::section{style.padding="clamp(3rem, 7vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)" style.borderTop="1.5px solid var(--color-rule)" style.borderBottom="1.5px solid var(--color-rule)"}
+:::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1.1fr 0.9fr" style.gap="clamp(2rem, 6vw, 5rem)" style.alignItems="center" style.--md.gridTemplateColumns="1fr"}
+::::div
+:::p{style.fontFamily="var(--font-heading)" style.fontStyle="italic" style.fontWeight="400" style.fontSize="clamp(1.6rem, 3.6vw, 2.6rem)" style.lineHeight="1.35" style.margin="0" style.color="var(--color-text-primary)"}
+"No hot takes, no hustle — just field notes from the workbench, written when there's something worth saying."
+:::
+::::
+
+::::div
+
+### A field to think out loud in
+
+The Long Field is a one-person publication about design, technology, and the slow craft of making things well. I'm Marren — a writer and editor who cares about clear prose, quiet tools, and work that ages well.
+
+:::a{href="/about/" style.display="inline-block" style.marginTop="0.5rem" style.fontFamily="var(--font-body)" style.fontSize="0.78rem" style.fontWeight="600" style.textTransform="uppercase" style.letterSpacing="0.16em" style.color="var(--color-primary)" style.textDecoration="none" style.borderBottom="1px solid var(--color-primary)" style.paddingBottom="0.15rem"}
+More about the field →
+:::
 ::::
 :::::
+::::::
+
+::bl-newsletter-cta{props.eyebrow="The Sunday Dispatch" props.heading="One essay, most Sundays." props.text="Field notes on design, technology, and craft — sent when there's something worth saying."}

package/sites/blog/project.json

@@ -33,7 +33,7 @@
       "tagName": "link",
       "attributes": {
         "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&display=swap"
       }
     }
   ],
@@ -44,28 +44,31 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--color-primary": "#0ea5e9",
-    "--color-primary-hover": "#0284c7",
-    "--color-ink": "#111111",
-    "--color-bg-dark": "#111111",
-    "--color-bg-cream": "#f6f5f2",
-    "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#141414",
-    "--color-text-white": "#ffffff",
-    "--color-text-muted": "#6b7280",
-    "--color-border": "#e5e4e0",
-    "--color-accent": "#0ea5e9",
+    "--color-primary": "#9a2f1a",
+    "--color-primary-hover": "#7a2412",
+    "--color-ink": "#1c1a17",
+    "--color-bg-dark": "#1c1a17",
+    "--color-bg-cream": "#efe9db",
+    "--color-bg-white": "#f6f1e7",
+    "--color-paper": "#f6f1e7",
+    "--color-text-primary": "#1c1a17",
+    "--color-text-white": "#f6f1e7",
+    "--color-text-muted": "#6f685c",
+    "--color-border": "#d8cfbd",
+    "--color-rule": "#1c1a17",
+    "--color-accent": "#9a2f1a",
     "--font-heading": "'Fraunces', Georgia, 'Times New Roman', serif",
     "--font-body": "'Newsreader', Georgia, 'Times New Roman', serif",
-    "--max-width": "1200px",
-    "--max-width-narrow": "740px",
-    "--radius": "0.5rem",
+    "--max-width": "1160px",
+    "--max-width-narrow": "680px",
+    "--radius": "0",
     "margin": "0",
     "padding": "0",
     "fontFamily": "var(--font-body)",
+    "fontSize": "19px",
     "lineHeight": "1.7",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-paper)"
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",

package/sites/course/components/co-application.json

@@ -10,159 +10,214 @@
     {
       "tagName": "form",
       "attributes": { "action": "#", "method": "post" },
-      "style": { "display": "grid", "gap": "1rem", "alignContent": "start", "marginTop": "1.5rem" },
+      "style": {
+        "display": "grid",
+        "gap": "1.1rem",
+        "alignContent": "start",
+        "marginTop": "1.5rem",
+        "padding": "clamp(1.5rem, 4vw, 2.25rem)",
+        "backgroundColor": "var(--color-bg-white)",
+        "border": "1px solid var(--color-border)",
+        "borderRadius": "var(--radius)",
+        "boxShadow": "0 16px 44px -28px rgba(15,20,36,0.4)",
+        "& label": {
+          "display": "block",
+          "fontFamily": "var(--font-mono)",
+          "fontSize": "0.74rem",
+          "fontWeight": "600",
+          "textTransform": "uppercase",
+          "letterSpacing": "0.06em",
+          "color": "var(--color-text-muted)",
+          "marginBottom": "0.4rem"
+        },
+        "& input, & select, & textarea": {
+          "width": "100%",
+          "padding": "0.8rem 0.95rem",
+          "border": "1px solid var(--color-border-strong)",
+          "borderRadius": "var(--radius-sm)",
+          "fontSize": "1rem",
+          "fontFamily": "var(--font-body)",
+          "backgroundColor": "var(--color-bg-white)",
+          "color": "var(--color-text-primary)"
+        },
+        "& input:focus, & select:focus, & textarea:focus": {
+          "outline": "none",
+          "borderColor": "var(--color-primary)",
+          "boxShadow": "0 0 0 3px rgba(79,70,229,0.15)"
+        }
+      },
       "children": [
         {
-          "tagName": "input",
-          "attributes": {
-            "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)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
-          }
+          "tagName": "div",
+          "children": [
+            { "tagName": "label", "attributes": { "for": "app-name" }, "textContent": "Your name" },
+            {
+              "tagName": "input",
+              "attributes": {
+                "id": "app-name",
+                "type": "text",
+                "name": "name",
+                "placeholder": "Ada Lovelace",
+                "required": "true"
+              }
+            }
+          ]
         },
         {
-          "tagName": "input",
-          "attributes": {
-            "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)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem"
-          }
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "label",
+              "attributes": { "for": "app-email" },
+              "textContent": "Email address"
+            },
+            {
+              "tagName": "input",
+              "attributes": {
+                "id": "app-email",
+                "type": "email",
+                "name": "email",
+                "placeholder": "you@example.com",
+                "required": "true"
+              }
+            }
+          ]
         },
         {
           "tagName": "div",
           "style": {
             "display": "grid",
             "gridTemplateColumns": "1fr 1fr",
-            "gap": "1rem",
+            "gap": "1.1rem",
             "@--sm": { "gridTemplateColumns": "1fr" }
           },
           "children": [
             {
-              "tagName": "select",
-              "attributes": { "name": "cohort", "aria-label": "Preferred cohort" },
-              "style": {
-                "width": "100%",
-                "padding": "0.8rem 0.95rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem",
-                "backgroundColor": "var(--color-bg-white)"
-              },
+              "tagName": "div",
               "children": [
                 {
-                  "tagName": "option",
-                  "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                  "tagName": "label",
+                  "attributes": { "for": "app-cohort" },
                   "textContent": "Preferred cohort"
                 },
                 {
-                  "tagName": "option",
-                  "attributes": { "value": "fall" },
-                  "textContent": "Fall 2026 · Sept 8"
-                },
-                {
-                  "tagName": "option",
-                  "attributes": { "value": "winter" },
-                  "textContent": "Winter 2027 · Jan 12"
-                },
-                {
-                  "tagName": "option",
-                  "attributes": { "value": "unsure" },
-                  "textContent": "Not sure yet"
+                  "tagName": "select",
+                  "attributes": { "id": "app-cohort", "name": "cohort" },
+                  "children": [
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                      "textContent": "Choose a cohort"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "fall" },
+                      "textContent": "Fall 2026 · Sept 8"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "winter" },
+                      "textContent": "Winter 2027 · Jan 12"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "unsure" },
+                      "textContent": "Not sure yet"
+                    }
+                  ]
                 }
               ]
             },
             {
-              "tagName": "select",
-              "attributes": { "name": "experience", "aria-label": "Coding experience" },
-              "style": {
-                "width": "100%",
-                "padding": "0.8rem 0.95rem",
-                "border": "1px solid var(--color-border)",
-                "borderRadius": "var(--radius)",
-                "fontSize": "1rem",
-                "backgroundColor": "var(--color-bg-white)"
-              },
+              "tagName": "div",
               "children": [
                 {
-                  "tagName": "option",
-                  "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                  "tagName": "label",
+                  "attributes": { "for": "app-exp" },
                   "textContent": "Coding experience"
                 },
                 {
-                  "tagName": "option",
-                  "attributes": { "value": "none" },
-                  "textContent": "Complete beginner"
-                },
-                {
-                  "tagName": "option",
-                  "attributes": { "value": "some" },
-                  "textContent": "Some self-taught"
-                },
-                {
-                  "tagName": "option",
-                  "attributes": { "value": "cs" },
-                  "textContent": "CS / bootcamp background"
+                  "tagName": "select",
+                  "attributes": { "id": "app-exp", "name": "experience" },
+                  "children": [
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "", "disabled": "true", "selected": "true" },
+                      "textContent": "Choose one"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "none" },
+                      "textContent": "Complete beginner"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "some" },
+                      "textContent": "Some self-taught"
+                    },
+                    {
+                      "tagName": "option",
+                      "attributes": { "value": "cs" },
+                      "textContent": "CS / bootcamp background"
+                    }
+                  ]
                 }
               ]
             }
           ]
         },
         {
-          "tagName": "textarea",
-          "attributes": {
-            "name": "goals",
-            "rows": "3",
-            "placeholder": "What are you hoping to build or become?",
-            "aria-label": "Your goals"
-          },
-          "style": {
-            "width": "100%",
-            "padding": "0.8rem 0.95rem",
-            "border": "1px solid var(--color-border)",
-            "borderRadius": "var(--radius)",
-            "fontSize": "1rem",
-            "fontFamily": "inherit"
-          }
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "label",
+              "attributes": { "for": "app-goals" },
+              "textContent": "What do you want to build?"
+            },
+            {
+              "tagName": "textarea",
+              "attributes": {
+                "id": "app-goals",
+                "name": "goals",
+                "rows": "3",
+                "placeholder": "Tell us what you're hoping to build or become..."
+              },
+              "style": { "fontFamily": "var(--font-body)", "resize": "vertical" }
+            }
+          ]
         },
         {
           "tagName": "button",
           "attributes": { "type": "submit" },
-          "textContent": "Submit Application",
+          "textContent": "Submit Application →",
           "style": {
             "backgroundColor": "var(--color-primary)",
             "color": "var(--color-text-white)",
             "padding": "0.9rem 1.75rem",
             "border": "none",
-            "borderRadius": "var(--radius)",
+            "borderRadius": "999px",
             "fontSize": "1rem",
-            "fontWeight": "700",
+            "fontWeight": "600",
+            "fontFamily": "var(--font-body)",
             "cursor": "pointer",
             "justifySelf": "start",
-            ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+            "boxShadow": "0 14px 30px -14px rgba(79,70,229,0.9)",
+            "transition": "background-color 0.15s, transform 0.15s",
+            ":hover": {
+              "backgroundColor": "var(--color-primary-hover)",
+              "transform": "translateY(-1px)"
+            }
           }
         },
         {
           "tagName": "p",
-          "style": { "fontSize": "0.85rem", "color": "var(--color-text-muted)", "margin": "0" },
-          "textContent": "This is a demo form. Wire it to your CRM or email in pages/enroll.md."
+          "style": {
+            "fontFamily": "var(--font-mono)",
+            "fontSize": "0.78rem",
+            "color": "var(--color-text-faint)",
+            "margin": "0"
+          },
+          "textContent": "// demo form — wire it to your CRM or email in pages/enroll.md"
         }
       ]
     }