@jxsuite/starters 3.4.0 → 3.5.0

package/sites/blog/components/bl-newsletter-cta.json

@@ -1,134 +0,0 @@
-{
-  "tagName": "bl-newsletter-cta",
-  "state": {
-    "eyebrow": "The Sunday Dispatch",
-    "heading": "One essay, most Sundays.",
-    "text": "Field notes on design, technology, and craft — sent when there's something worth saying. No noise, unsubscribe anytime.",
-    "placeholder": "you@example.com",
-    "cta": "Subscribe",
-    "note": "Demo form — wire it to your email provider in components/bl-newsletter-cta.json."
-  },
-  "style": {
-    "display": "block",
-    "backgroundColor": "var(--color-ink)",
-    "color": "var(--color-text-white)",
-    "padding": "clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem)"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto", "textAlign": "center" },
-      "children": [
-        {
-          "tagName": "p",
-          "style": {
-            "display": "${state.eyebrow ? 'block' : 'none'}",
-            "fontFamily": "var(--font-body)",
-            "fontSize": "0.74rem",
-            "fontWeight": "500",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.24em",
-            "color": "var(--color-text-white)",
-            "opacity": "0.6",
-            "margin": "0 0 1.25rem"
-          },
-          "textContent": "${state.eyebrow}"
-        },
-        {
-          "tagName": "h2",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontWeight": "700",
-            "fontSize": "clamp(2rem, 5vw, 3.2rem)",
-            "lineHeight": "1.05",
-            "letterSpacing": "-0.02em",
-            "margin": "0 0 1rem"
-          },
-          "textContent": "${state.heading}"
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontStyle": "italic",
-            "fontSize": "1.2rem",
-            "lineHeight": "1.6",
-            "opacity": "0.8",
-            "margin": "0 auto 2rem",
-            "maxWidth": "48ch"
-          },
-          "textContent": "${state.text}"
-        },
-        {
-          "tagName": "form",
-          "attributes": { "action": "#", "method": "post" },
-          "style": {
-            "display": "flex",
-            "gap": "0",
-            "maxWidth": "440px",
-            "margin": "0 auto",
-            "borderBottom": "1.5px solid rgba(246, 241, 231, 0.5)",
-            "@--sm": { "flexDirection": "column", "gap": "1rem", "borderBottom": "none" }
-          },
-          "children": [
-            {
-              "tagName": "input",
-              "attributes": {
-                "type": "email",
-                "name": "email",
-                "placeholder": "${state.placeholder}",
-                "required": "true",
-                "aria-label": "Email address"
-              },
-              "style": {
-                "flex": "1",
-                "padding": "0.75rem 0.25rem",
-                "border": "none",
-                "borderBottom": "1.5px solid transparent",
-                "backgroundColor": "transparent",
-                "color": "var(--color-text-white)",
-                "fontSize": "1.05rem",
-                "fontFamily": "var(--font-heading)",
-                "outline": "none",
-                "@--sm": {
-                  "borderBottom": "1.5px solid rgba(246, 241, 231, 0.5)",
-                  "textAlign": "center"
-                }
-              }
-            },
-            {
-              "tagName": "button",
-              "attributes": { "type": "submit" },
-              "style": {
-                "backgroundColor": "transparent",
-                "color": "var(--color-text-white)",
-                "padding": "0.75rem 0.5rem",
-                "border": "none",
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.8rem",
-                "fontWeight": "600",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.16em",
-                "cursor": "pointer",
-                "whiteSpace": "nowrap",
-                "transition": "opacity 0.15s",
-                ":hover": { "opacity": "0.6" }
-              },
-              "textContent": "${state.cta} →"
-            }
-          ]
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "display": "${state.note ? 'block' : 'none'}",
-            "fontSize": "0.75rem",
-            "opacity": "0.5",
-            "margin": "1.5rem 0 0"
-          },
-          "textContent": "${state.note}"
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-post-card.json

@@ -1,132 +0,0 @@
-{
-  "tagName": "bl-post-card",
-  "state": {
-    "number": "",
-    "title": "",
-    "excerpt": "",
-    "date": "",
-    "tag": "",
-    "href": "#",
-    "cover": { "type": "string", "format": "image", "default": "" }
-  },
-  "style": { "display": "block" },
-  "children": [
-    {
-      "tagName": "a",
-      "attributes": { "href": "${state.href}" },
-      "style": {
-        "display": "grid",
-        "gridTemplateColumns": "clamp(2.4rem, 5vw, 4.5rem) 1fr auto",
-        "gap": "clamp(1rem, 3vw, 2.75rem)",
-        "alignItems": "start",
-        "padding": "1.75rem 0.75rem",
-        "textDecoration": "none",
-        "color": "var(--color-text-primary)",
-        "borderBottom": "1px solid var(--color-border)",
-        "transition": "color 0.18s, background-color 0.18s",
-        "@--sm": { "gridTemplateColumns": "auto 1fr", "gap": "1rem 1.25rem" },
-        ":hover": {
-          "color": "var(--color-primary)",
-          "backgroundColor": "var(--color-bg-cream)"
-        }
-      },
-      "children": [
-        {
-          "tagName": "span",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontWeight": "400",
-            "fontSize": "clamp(1.6rem, 4vw, 2.6rem)",
-            "lineHeight": "1",
-            "color": "var(--color-text-muted)",
-            "fontVariantNumeric": "tabular-nums"
-          },
-          "textContent": "${state.number}"
-        },
-        {
-          "tagName": "div",
-          "style": { "minWidth": "0", "@--sm": { "gridColumn": "1 / -1" } },
-          "children": [
-            {
-              "tagName": "span",
-              "style": {
-                "display": "${state.tag ? 'block' : 'none'}",
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.72rem",
-                "fontWeight": "600",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.16em",
-                "color": "var(--color-primary)",
-                "marginBottom": "0.6rem"
-              },
-              "textContent": "${state.tag}"
-            },
-            {
-              "tagName": "h3",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontWeight": "600",
-                "fontSize": "clamp(1.5rem, 3.2vw, 2.15rem)",
-                "lineHeight": "1.1",
-                "letterSpacing": "-0.015em",
-                "margin": "0 0 0.6rem",
-                "color": "inherit"
-              },
-              "textContent": "${state.title}"
-            },
-            {
-              "tagName": "p",
-              "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontStyle": "italic",
-                "fontWeight": "400",
-                "fontSize": "1.15rem",
-                "lineHeight": "1.5",
-                "color": "var(--color-text-muted)",
-                "margin": "0",
-                "maxWidth": "62ch"
-              },
-              "textContent": "${state.excerpt}"
-            }
-          ]
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "textAlign": "right",
-            "whiteSpace": "nowrap",
-            "@--sm": { "textAlign": "left", "gridColumn": "1 / -1" }
-          },
-          "children": [
-            {
-              "tagName": "span",
-              "style": {
-                "display": "block",
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.72rem",
-                "fontWeight": "500",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.14em",
-                "color": "var(--color-text-muted)",
-                "marginBottom": "0.6rem"
-              },
-              "textContent": "${state.date}"
-            },
-            {
-              "tagName": "span",
-              "style": {
-                "fontFamily": "var(--font-body)",
-                "fontSize": "0.78rem",
-                "fontWeight": "600",
-                "textTransform": "uppercase",
-                "letterSpacing": "0.12em",
-                "color": "var(--color-primary)"
-              },
-              "textContent": "Read →"
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/sites/blog/components/bl-post-list.json

@@ -1,10 +0,0 @@
-{
-  "tagName": "bl-post-list",
-  "style": {
-    "display": "block",
-    "maxWidth": "var(--max-width)",
-    "margin": "0 auto",
-    "borderTop": "1.5px solid var(--color-rule)"
-  },
-  "children": [{ "tagName": "slot" }]
-}

package/sites/blog/components/bl-prose.json

@@ -1,89 +0,0 @@
-{
-  "tagName": "bl-prose",
-  "style": {
-    "display": "block",
-    "fontFamily": "var(--font-body)",
-    "fontSize": "1.2rem",
-    "lineHeight": "1.8",
-    "color": "var(--color-text-primary)",
-    "& p": {
-      "margin": "0 0 1.5rem"
-    },
-    "& > p:first-of-type::first-letter": {
-      "float": "left",
-      "fontFamily": "var(--font-heading)",
-      "fontWeight": "900",
-      "fontSize": "4.6rem",
-      "lineHeight": "0.78",
-      "paddingRight": "0.7rem",
-      "paddingTop": "0.35rem",
-      "color": "var(--color-primary)"
-    },
-    "& h2": {
-      "fontFamily": "var(--font-heading)",
-      "fontSize": "1.9rem",
-      "fontWeight": "700",
-      "lineHeight": "1.15",
-      "letterSpacing": "-0.015em",
-      "margin": "3rem 0 1rem"
-    },
-    "& h3": {
-      "fontFamily": "var(--font-heading)",
-      "fontSize": "1.45rem",
-      "fontWeight": "600",
-      "margin": "2.25rem 0 0.85rem"
-    },
-    "& a": {
-      "color": "var(--color-primary)",
-      "textDecoration": "underline",
-      "textUnderlineOffset": "3px",
-      "textDecorationThickness": "1px"
-    },
-    "& blockquote": {
-      "margin": "2.5rem 0",
-      "padding": "0.25rem 0 0.25rem 1.75rem",
-      "borderLeft": "2px solid var(--color-primary)",
-      "fontFamily": "var(--font-heading)",
-      "fontStyle": "italic",
-      "fontWeight": "400",
-      "fontSize": "1.55rem",
-      "lineHeight": "1.45",
-      "color": "var(--color-text-primary)"
-    },
-    "& ul": {
-      "margin": "0 0 1.5rem",
-      "padding": "0 0 0 1.4rem"
-    },
-    "& ol": {
-      "margin": "0 0 1.5rem",
-      "padding": "0 0 0 1.4rem"
-    },
-    "& li": {
-      "margin": "0 0 0.5rem"
-    },
-    "& img": {
-      "width": "100%",
-      "height": "auto",
-      "margin": "2.5rem 0"
-    },
-    "& strong": {
-      "fontWeight": "600"
-    },
-    "& em": {
-      "fontStyle": "italic"
-    },
-    "& code": {
-      "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
-      "fontSize": "0.85em",
-      "backgroundColor": "var(--color-bg-cream)",
-      "padding": "0.15em 0.4em"
-    },
-    "& hr": {
-      "border": "none",
-      "borderTop": "1px solid var(--color-border)",
-      "width": "4rem",
-      "margin": "3rem auto"
-    }
-  },
-  "children": [{ "tagName": "slot" }]
-}

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

@@ -1,70 +0,0 @@
-{
-  "tagName": "bl-section-header",
-  "state": {
-    "eyebrow": "",
-    "heading": "",
-    "subheading": ""
-  },
-  "style": {
-    "display": "block",
-    "maxWidth": "var(--max-width)",
-    "margin": "0 auto 2rem"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "display": "flex",
-        "alignItems": "baseline",
-        "justifyContent": "space-between",
-        "gap": "1.5rem",
-        "flexWrap": "wrap",
-        "borderBottom": "1.5px solid var(--color-rule)",
-        "paddingBottom": "0.9rem"
-      },
-      "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'}",
-        "fontFamily": "var(--font-heading)",
-        "fontStyle": "italic",
-        "fontSize": "1.2rem",
-        "lineHeight": "1.5",
-        "color": "var(--color-text-muted)",
-        "margin": "1rem 0 0",
-        "maxWidth": "54ch"
-      },
-      "textContent": "${state.subheading}"
-    }
-  ]
-}

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

@@ -1,29 +0,0 @@
-{
-  "tagName": "bl-tag-pill",
-  "state": {
-    "label": ""
-  },
-  "style": {
-    "display": "inline-flex",
-    "alignItems": "center",
-    "gap": "0.5rem"
-  },
-  "children": [
-    {
-      "tagName": "span",
-      "style": { "width": "1.6rem", "height": "1px", "backgroundColor": "var(--color-primary)" }
-    },
-    {
-      "tagName": "span",
-      "style": {
-        "fontFamily": "var(--font-body)",
-        "fontSize": "0.74rem",
-        "fontWeight": "600",
-        "textTransform": "uppercase",
-        "letterSpacing": "0.18em",
-        "color": "var(--color-primary)"
-      },
-      "textContent": "${state.label}"
-    }
-  ]
-}

package/sites/blog/layouts/base.json

@@ -1,22 +0,0 @@
-{
-  "tagName": "div",
-  "$elements": [
-    { "$ref": "../components/bl-nav.json" },
-    { "$ref": "../components/bl-footer.json" }
-  ],
-  "style": {
-    "minHeight": "100vh",
-    "display": "flex",
-    "flexDirection": "column",
-    "backgroundColor": "var(--color-bg-white)"
-  },
-  "children": [
-    { "tagName": "bl-nav" },
-    {
-      "tagName": "main",
-      "style": { "flex": "1" },
-      "children": [{ "tagName": "slot" }]
-    },
-    { "tagName": "bl-footer" }
-  ]
-}

package/sites/blog/layouts/post.json

@@ -1,15 +0,0 @@
-{
-  "tagName": "div",
-  "$layout": "./layouts/base.json",
-  "children": [
-    {
-      "tagName": "article",
-      "style": {
-        "maxWidth": "var(--max-width-narrow)",
-        "margin": "0 auto",
-        "padding": "clamp(2.5rem, 6vw, 4.5rem) 1.5rem"
-      },
-      "children": [{ "tagName": "slot" }]
-    }
-  ]
-}

package/sites/blog/pages/[slug].json

@@ -1,148 +0,0 @@
-{
-  "$layout": "./layouts/post.json",
-  "$paths": {
-    "contentType": "posts",
-    "param": "slug",
-    "field": "id"
-  },
-  "title": "${state.entry.data.title} — The Long Field",
-  "$head": [
-    {
-      "tagName": "meta",
-      "attributes": {
-        "name": "description",
-        "content": "${state.entry.data.excerpt}"
-      }
-    }
-  ],
-  "state": {
-    "entry": {
-      "$prototype": "ContentEntry",
-      "contentType": "posts",
-      "field": "id",
-      "id": { "$ref": "#/$params/slug" },
-      "$src": "@jxsuite/parser/ContentEntry.class.json"
-    }
-  },
-  "children": [
-    {
-      "tagName": "a",
-      "attributes": { "href": "/" },
-      "style": {
-        "display": "inline-flex",
-        "alignItems": "center",
-        "gap": "0.4rem",
-        "color": "var(--color-primary)",
-        "textDecoration": "none",
-        "fontWeight": "600",
-        "fontSize": "0.95rem",
-        "marginBottom": "2rem",
-        ":hover": { "textDecoration": "underline" }
-      },
-      "textContent": "← All writing"
-    },
-    {
-      "tagName": "header",
-      "style": { "marginBottom": "2rem" },
-      "children": [
-        {
-          "tagName": "div",
-          "style": { "marginBottom": "1.1rem" },
-          "children": [
-            { "tagName": "bl-tag-pill", "$props": { "label": "${state.entry.data.tag}" } }
-          ]
-        },
-        {
-          "tagName": "h1",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "clamp(2.1rem, 5vw, 3.2rem)",
-            "fontWeight": "600",
-            "lineHeight": "1.1",
-            "letterSpacing": "-0.02em",
-            "margin": "0 0 1rem",
-            "color": "var(--color-text-primary)"
-          },
-          "textContent": "${state.entry.data.title}"
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "fontFamily": "var(--font-heading)",
-            "fontSize": "1.35rem",
-            "lineHeight": "1.5",
-            "color": "var(--color-text-muted)",
-            "fontStyle": "italic",
-            "margin": "0 0 1.5rem"
-          },
-          "textContent": "${state.entry.data.excerpt}"
-        },
-        {
-          "tagName": "div",
-          "style": {
-            "display": "flex",
-            "alignItems": "center",
-            "gap": "0.6rem",
-            "fontSize": "0.9rem",
-            "textTransform": "uppercase",
-            "letterSpacing": "0.06em",
-            "color": "var(--color-text-muted)",
-            "borderTop": "1px solid var(--color-border)",
-            "paddingTop": "1.25rem"
-          },
-          "children": [
-            {
-              "tagName": "span",
-              "style": { "fontWeight": "600", "color": "var(--color-text-primary)" },
-              "textContent": "${state.entry.data.author}"
-            },
-            { "tagName": "span", "textContent": "·" },
-            { "tagName": "span", "textContent": "${state.entry.data.date}" }
-          ]
-        }
-      ]
-    },
-    {
-      "tagName": "img",
-      "attributes": {
-        "src": "${state.entry.data.cover}",
-        "alt": "${state.entry.data.title}",
-        "loading": "lazy"
-      },
-      "style": {
-        "width": "100%",
-        "aspectRatio": "16 / 9",
-        "objectFit": "cover",
-        "borderRadius": "var(--radius)",
-        "marginBottom": "2.5rem",
-        "display": "${state.entry.data.cover ? 'block' : 'none'}"
-      }
-    },
-    {
-      "tagName": "bl-prose",
-      "children": "${state.entry.$children}"
-    },
-    {
-      "tagName": "hr",
-      "style": {
-        "border": "none",
-        "borderTop": "1px solid var(--color-border)",
-        "margin": "3rem 0 2.5rem"
-      }
-    },
-    {
-      "tagName": "bl-author-bio",
-      "$props": {
-        "name": "${state.entry.data.author}",
-        "role": "Writer & editor",
-        "bio": "Marren Oda writes The Long Field — slow essays on design, technology, and the craft of making things well.",
-        "avatar": "/images/author.jpg"
-      }
-    },
-    {
-      "tagName": "div",
-      "style": { "marginTop": "2.5rem" },
-      "children": [{ "tagName": "bl-newsletter-cta" }]
-    }
-  ]
-}