@jxsuite/starters 0.34.0

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

@@ -0,0 +1,120 @@
+{
+  "tagName": "bl-newsletter-cta",
+  "state": {
+    "eyebrow": "The Long Field Letter",
+    "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": "This is a demo form. Wire it to your email provider in components/bl-newsletter-cta.json."
+  },
+  "style": {
+    "display": "block",
+    "backgroundColor": "var(--color-bg-cream)",
+    "border": "1px solid var(--color-border)",
+    "borderRadius": "var(--radius)",
+    "padding": "clamp(2rem, 5vw, 3rem)"
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "style": { "maxWidth": "var(--max-width-narrow)", "margin": "0 auto", "textAlign": "center" },
+      "children": [
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.eyebrow ? 'block' : 'none'}",
+            "textTransform": "uppercase",
+            "letterSpacing": "0.16em",
+            "fontSize": "0.78rem",
+            "fontWeight": "600",
+            "color": "var(--color-primary)",
+            "margin": "0 0 0.75rem"
+          },
+          "textContent": "${state.eyebrow}"
+        },
+        {
+          "tagName": "h2",
+          "style": {
+            "fontFamily": "var(--font-heading)",
+            "fontSize": "clamp(1.7rem, 3.5vw, 2.3rem)",
+            "fontWeight": "600",
+            "lineHeight": "1.15",
+            "margin": "0 0 0.85rem"
+          },
+          "textContent": "${state.heading}"
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "fontSize": "1.08rem",
+            "lineHeight": "1.65",
+            "color": "var(--color-text-muted)",
+            "margin": "0 auto 1.75rem",
+            "maxWidth": "52ch"
+          },
+          "textContent": "${state.text}"
+        },
+        {
+          "tagName": "form",
+          "attributes": { "action": "#", "method": "post" },
+          "style": {
+            "display": "flex",
+            "gap": "0.75rem",
+            "maxWidth": "460px",
+            "margin": "0 auto",
+            "@--sm": { "flexDirection": "column" }
+          },
+          "children": [
+            {
+              "tagName": "input",
+              "attributes": {
+                "type": "email",
+                "name": "email",
+                "placeholder": "${state.placeholder}",
+                "required": "true",
+                "aria-label": "Email address"
+              },
+              "style": {
+                "flex": "1",
+                "padding": "0.8rem 1rem",
+                "border": "1px solid var(--color-border)",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "fontFamily": "inherit",
+                "backgroundColor": "var(--color-bg-white)"
+              }
+            },
+            {
+              "tagName": "button",
+              "attributes": { "type": "submit" },
+              "style": {
+                "backgroundColor": "var(--color-primary)",
+                "color": "var(--color-text-white)",
+                "padding": "0.8rem 1.75rem",
+                "border": "none",
+                "borderRadius": "var(--radius)",
+                "fontSize": "1rem",
+                "fontWeight": "600",
+                "cursor": "pointer",
+                "transition": "background-color 0.15s",
+                ":hover": { "backgroundColor": "var(--color-primary-hover)" }
+              },
+              "textContent": "${state.cta}"
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.note ? 'block' : 'none'}",
+            "fontSize": "0.8rem",
+            "color": "var(--color-text-muted)",
+            "margin": "1rem 0 0"
+          },
+          "textContent": "${state.note}"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,114 @@
+{
+  "tagName": "bl-post-card",
+  "state": {
+    "title": "",
+    "excerpt": "",
+    "date": "",
+    "tag": "",
+    "href": "#",
+    "cover": { "type": "string", "format": "image", "default": "" }
+  },
+  "style": {
+    "display": "block",
+    "height": "100%"
+  },
+  "children": [
+    {
+      "tagName": "a",
+      "attributes": { "href": "${state.href}" },
+      "style": {
+        "display": "flex",
+        "flexDirection": "column",
+        "height": "100%",
+        "textDecoration": "none",
+        "color": "var(--color-text-primary)",
+        "backgroundColor": "var(--color-bg-white)",
+        "border": "1px solid var(--color-border)",
+        "borderRadius": "var(--radius)",
+        "overflow": "hidden",
+        "transition": "transform 0.15s, box-shadow 0.15s",
+        ":hover": {
+          "transform": "translateY(-3px)",
+          "boxShadow": "0 14px 40px rgba(17,17,17,0.12)"
+        }
+      },
+      "children": [
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.cover}",
+            "alt": "${state.title}",
+            "loading": "lazy"
+          },
+          "style": {
+            "display": "${state.cover ? 'block' : 'none'}",
+            "width": "100%",
+            "aspectRatio": "16 / 10",
+            "objectFit": "cover"
+          }
+        },
+        {
+          "tagName": "div",
+          "style": {
+            "padding": "1.5rem",
+            "display": "flex",
+            "flexDirection": "column",
+            "flex": "1"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "style": {
+                "display": "${state.tag ? 'inline-block' : 'none'}",
+                "alignSelf": "flex-start",
+                "backgroundColor": "rgba(14, 165, 233, 0.1)",
+                "color": "var(--color-primary)",
+                "padding": "0.25rem 0.65rem",
+                "borderRadius": "999px",
+                "fontSize": "0.72rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.08em",
+                "marginBottom": "0.85rem"
+              },
+              "textContent": "${state.tag}"
+            },
+            {
+              "tagName": "h3",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "1.4rem",
+                "fontWeight": "600",
+                "lineHeight": "1.2",
+                "letterSpacing": "-0.01em",
+                "margin": "0 0 0.6rem"
+              },
+              "textContent": "${state.title}"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "margin": "0 0 1.25rem",
+                "color": "var(--color-text-muted)",
+                "fontSize": "1rem",
+                "lineHeight": "1.6"
+              },
+              "textContent": "${state.excerpt}"
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "marginTop": "auto",
+                "fontSize": "0.8rem",
+                "letterSpacing": "0.04em",
+                "textTransform": "uppercase",
+                "color": "var(--color-text-muted)"
+              },
+              "textContent": "${state.date}"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,17 @@
+{
+  "tagName": "bl-post-list",
+  "state": {
+    "columns": "3"
+  },
+  "style": {
+    "display": "grid",
+    "gridTemplateColumns": "repeat(3, 1fr)",
+    "gap": "1.75rem",
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto",
+    "padding": "0 1.5rem",
+    "@--md": { "gridTemplateColumns": "repeat(2, 1fr)" },
+    "@--sm": { "gridTemplateColumns": "1fr" }
+  },
+  "children": [{ "tagName": "slot" }]
+}

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

@@ -0,0 +1,74 @@
+{
+  "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"
+    },
+    "& h2": {
+      "fontFamily": "var(--font-heading)",
+      "fontSize": "1.7rem",
+      "fontWeight": "600",
+      "lineHeight": "1.2",
+      "letterSpacing": "-0.01em",
+      "margin": "2.75rem 0 1rem"
+    },
+    "& h3": {
+      "fontFamily": "var(--font-heading)",
+      "fontSize": "1.35rem",
+      "fontWeight": "600",
+      "margin": "2.25rem 0 0.85rem"
+    },
+    "& a": {
+      "color": "var(--color-primary)",
+      "textDecoration": "underline",
+      "textUnderlineOffset": "2px"
+    },
+    "& blockquote": {
+      "margin": "2rem 0",
+      "padding": "0.5rem 0 0.5rem 1.5rem",
+      "borderLeft": "3px solid var(--color-primary)",
+      "fontStyle": "italic",
+      "fontSize": "1.35rem",
+      "lineHeight": "1.5",
+      "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",
+      "borderRadius": "var(--radius)",
+      "margin": "2rem 0"
+    },
+    "& strong": {
+      "fontWeight": "600"
+    },
+    "& code": {
+      "fontFamily": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+      "fontSize": "0.9em",
+      "backgroundColor": "var(--color-bg-cream)",
+      "padding": "0.15em 0.4em",
+      "borderRadius": "4px"
+    },
+    "& hr": {
+      "border": "none",
+      "borderTop": "1px solid var(--color-border)",
+      "margin": "2.75rem 0"
+    }
+  },
+  "children": [{ "tagName": "slot" }]
+}

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

@@ -0,0 +1,53 @@
+{
+  "tagName": "bl-section-header",
+  "state": {
+    "eyebrow": "",
+    "heading": "",
+    "subheading": "",
+    "align": "center"
+  },
+  "style": {
+    "display": "block",
+    "maxWidth": "var(--max-width-narrow)",
+    "margin": "0 auto 2.5rem",
+    "textAlign": "${state.align}"
+  },
+  "children": [
+    {
+      "tagName": "p",
+      "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"
+      },
+      "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}"
+    },
+    {
+      "tagName": "p",
+      "style": {
+        "display": "${state.subheading ? 'block' : 'none'}",
+        "fontSize": "1.15rem",
+        "lineHeight": "1.7",
+        "color": "var(--color-text-muted)",
+        "margin": "1rem 0 0"
+      },
+      "textContent": "${state.subheading}"
+    }
+  ]
+}

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

@@ -0,0 +1,26 @@
+{
+  "tagName": "bl-tag-pill",
+  "state": {
+    "label": ""
+  },
+  "style": {
+    "display": "inline-block"
+  },
+  "children": [
+    {
+      "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",
+        "fontWeight": "600",
+        "textTransform": "uppercase",
+        "letterSpacing": "0.08em"
+      },
+      "textContent": "${state.label}"
+    }
+  ]
+}

package/sites/blog/content/posts/designing-for-slowness.md

@@ -0,0 +1,25 @@
+---
+title: Designing for Slowness
+excerpt: Most interfaces are optimized to be fast. The best ones are optimized to be worth slowing down for. There is a difference.
+date: June 14, 2026
+author: Marren Oda
+tag: Design
+cover: /images/post-2.jpg
+order: 2
+---
+
+Speed is the default virtue of software. Faster load times, fewer taps, less friction — the whole discipline of interaction design has quietly agreed that the goal is to get the user out of the way of the machine as quickly as possible.
+
+But there is a category of experience that speed actively ruins. Reading a long essay. Looking at a photograph. Composing a difficult message to someone you love. For these, friction is not a bug. It is the point.
+
+## The tyranny of the frictionless
+
+When we remove every pause, we also remove every moment of consideration. The infinite scroll is frictionless by design, and it is frictionless precisely so that you never stop to ask whether you want to keep going. Frictionlessness is not neutral. It has a direction, and the direction is usually _more_.
+
+Good design for slowness does the opposite. It builds in the pause. A generous margin is a pause. A single column of text with nothing competing for attention is a pause. Whitespace is not empty; it is the room a reader needs to think.
+
+## What slowness asks of us
+
+Designing this way is harder, because you cannot measure it with the usual dashboards. Time-on-page goes up, which your analytics may read as failure. Bounce rate is a meaningless number for a page whose entire purpose is to be read slowly and then closed.
+
+The work, then, is to decide what an interface is _for_ before deciding how fast it should be. A checkout flow should be quick. An essay should be quiet. Knowing which is which — and having the nerve to design accordingly — is most of the job.

package/sites/blog/content/posts/notes-from-a-long-walk.md

@@ -0,0 +1,27 @@
+---
+title: Notes from a Long Walk
+excerpt: I left the phone at home and walked until the noise in my head went quiet. Some things you can only think about at three miles an hour.
+date: May 3, 2026
+author: Marren Oda
+tag: Essays
+cover: /images/post-3.jpg
+order: 5
+---
+
+The problem was not that I had run out of ideas. The problem was that I had too many, and they were all shouting at once, and I could not hear any single one of them clearly. So I put on boots and went out the door with nothing in my pockets but a key.
+
+Walking is the oldest thinking technology we have. There is something about the pace of it — three miles an hour, roughly the speed of a thought — that lets the mind settle. Faster and you are just moving. Slower and you fidget. But at a walk, the body handles itself and the mind is finally free to wander somewhere useful.
+
+## The pace of a thought
+
+For the first mile the noise followed me. The unfinished emails, the half-decisions, the small anxieties that fill the gaps in a day. But somewhere in the second mile it began to thin out, and by the third there was only the road, the weather, and one clear question I had been avoiding for weeks.
+
+> Solvitur ambulando — it is solved by walking. The Romans knew. So did every philosopher who ever wore out a pair of shoes.
+
+I did not solve it, exactly. But I saw its actual shape for the first time, which is most of what solving is. The answer had been buried under all the noise, and it took two hours of moving through the world to dig it out.
+
+## What the walk returns
+
+I came home tired in the good way, the way that clears rather than depletes. Nothing on my to-do list had changed. But the thing I could not think about at my desk had become thinkable somewhere around the fourth mile, and that was worth more than any hour I have ever spent staring at a screen, waiting for clarity to arrive on its own.
+
+It never does. You have to go out and walk it down.

package/sites/blog/content/posts/the-city-as-a-text.md

@@ -0,0 +1,27 @@
+---
+title: The City as a Text
+excerpt: A street is written in the same way a paragraph is — in layers, by many hands, with corrections that never quite erase what came before.
+date: May 31, 2026
+author: Marren Oda
+tag: Design
+cover: /images/post-4.jpg
+order: 3
+---
+
+You can read a city if you slow down enough. Not the map of it — the map is a summary, a table of contents — but the actual surface: the patched asphalt, the ghost sign fading on a brick wall, the doorway bricked over decades ago and still faintly outlined.
+
+Every building is a sentence someone wrote and someone else edited. The corner shop was a bank; you can tell from the disproportionate weight of the stone around the door. The wide sidewalk was once a streetcar line. The city is a palimpsest, written over and over, and the earlier drafts show through.
+
+## Reading the corrections
+
+What I love most are the corrections — the places where the city changed its mind. A grand staircase leading to a wall. A road that bends for no reason a driver can see, because it is still following the shape of a creek that was buried a century ago.
+
+> Cities, like dreams, are made of desires and fears, wrote Calvino. So is every design, if you look at it long enough.
+
+These are not mistakes. They are the record of a place negotiating with its own history, keeping what still worked and building around what did not. It is exactly how good design accretes: not by grand replacement, but by patient correction.
+
+## The lesson for makers
+
+If you make things — interfaces, products, essays — the city has a lesson for you. Nothing is written once. Everything you build will be edited by people you will never meet, adapted to uses you did not intend, patched and re-patched until the original draft is only faintly visible underneath.
+
+Design as if that is true, because it is. Leave room for the corrections. Build things that can be edited kindly. The best work, like the best streets, is the kind that ages into something richer than what you first drew.

package/sites/blog/content/posts/the-quiet-craft-of-revision.md

@@ -0,0 +1,27 @@
+---
+title: The Quiet Craft of Revision
+excerpt: First drafts are for finding out what you think. The real work — the craft — happens on the second pass, and the tenth.
+date: June 28, 2026
+author: Marren Oda
+tag: Craft
+cover: /images/post-1.jpg
+order: 1
+---
+
+There is a myth that good writers get it right the first time. They do not. What they have is a higher tolerance for looking at their own bad sentences, over and over, until the bad ones are gone.
+
+A first draft is a machine for finding out what you actually think. It is allowed to be clumsy. Its only job is to exist. Everything after that — the trimming, the reordering, the merciless cutting of the clever line you were most proud of — is where the writing actually happens.
+
+## Cutting is a form of respect
+
+The hardest edits are the ones that remove something good. Not something bad; a bad line is easy to delete. A good line that does not belong is the real test. Keeping it is a kindness to yourself and a small cruelty to the reader, who now has to carry a sentence that leads nowhere.
+
+> Write drunk, edit sober, the saying goes. I would put it differently: write generously, edit as if every word costs you something.
+
+The trick is to read your own work as a stranger would — someone who did not sit through the three hours it took to produce the paragraph, who owes it no loyalty, who will simply stop reading if it stops earning their attention.
+
+## Revision is thinking, continued
+
+We treat revision as cleanup, as if the ideas were already finished and we are just wiping down the counters. But most of what I believe about a subject, I discover on the fourth read, when the argument I thought I was making turns out to be a smaller, truer argument hiding underneath.
+
+So I have stopped rushing to publish. A piece that has only been drafted is a piece that has only been guessed at. Give it a week. Come back a stranger. Cut what you can no longer defend, and keep only what earns its place.

package/sites/blog/content/posts/tools-that-disappear.md

@@ -0,0 +1,27 @@
+---
+title: Tools That Disappear
+excerpt: The best tool is the one you stop noticing. Here is why so much software insists on being noticed instead — and what it costs us.
+date: May 17, 2026
+author: Marren Oda
+tag: Tech
+cover: /images/post-6.jpg
+order: 4
+---
+
+A good hammer disappears. You do not think about the hammer; you think about the nail. The tool becomes an extension of the hand, and all your attention flows through it to the work. This is the highest thing a tool can do — to vanish into the task.
+
+Most software cannot resist being noticed. It wants your attention, because attention is what it sells. So it interrupts, it badges, it pulses a red dot in the corner of your eye. The tool has become a rival for the very focus it was supposed to serve.
+
+## The economics of the red dot
+
+There is a reason for this, and it is not incompetence. A tool that disappears cannot show you an ad. A tool that disappears does not generate engagement metrics. The incentives of much modern software point directly away from the thing that would make it good.
+
+> The measure of a tool is not what it can do, but what it lets you forget about.
+
+I try to notice which of my tools respect my attention and which of them farm it. The plain text editor that opens instantly and then gets out of the way. The notebook that has never once sent me a notification. These are the tools I return to for years, precisely because they ask for nothing.
+
+## Choosing quiet tools
+
+You can choose differently. You can prefer the tool that does less and interrupts never over the one that does everything and pings constantly. You can turn off the badges, mute the pulses, and let your software return to being an extension of your hand instead of a claim on your eyes.
+
+It is a small rebellion, but a real one. Every tool you teach to disappear is a little more of your attention returned to the work — where it belonged all along.

package/sites/blog/content/posts/what-i-learned-rereading.md

@@ -0,0 +1,27 @@
+---
+title: What I Learned Rereading
+excerpt: A book does not change, but you do. Returning to the same pages years apart is the closest thing we have to a conversation with our former selves.
+date: April 19, 2026
+author: Marren Oda
+tag: Reading
+cover: /images/post-5.jpg
+order: 6
+---
+
+I keep the books I love, and every few years I read one of them again. Not to discover the plot — I know the plot — but to find out what has changed. Because the book has not changed. The words are exactly where I left them. The only variable in the experiment is me.
+
+This is the quiet gift of rereading. A first read is about the book. A second read, years later, is about the distance between who you were and who you are. The pages become a fixed point against which you can finally measure your own drift.
+
+## The margins remember
+
+In my oldest books there are notes in handwriting I barely recognize as mine. A younger person underlined that passage, wrote _yes_ in the margin beside an idea I now find naive, and skipped entirely the paragraph that today seems like the whole point.
+
+> We do not read the same book twice, because we are not the same reader twice.
+
+It is humbling and a little vertiginous to meet that earlier reader. They were so sure. They missed so much. And of course, the reader I am now is missing things too — passages I skim past that some future self will underline and wonder how I ever overlooked.
+
+## Reading as a long conversation
+
+So I have come to think of my shelf less as a collection and more as a set of appointments with my future self. Each book I reread is a conversation held across years, with someone who is me and also not me, who understood things I have forgotten and misunderstood things I have since learned.
+
+Buy fewer books, maybe. But keep the ones that matter, and go back to them. The best of them will have grown while you were away — which is to say, you will have.

package/sites/blog/images.json

@@ -0,0 +1,54 @@
+{
+  "site": "blog",
+  "thumbnail": "hero",
+  "images": [
+    {
+      "role": "hero",
+      "query": "writing desk notebook coffee",
+      "orientation": "landscape",
+      "photoId": 204511
+    },
+    {
+      "role": "author",
+      "query": "writer portrait",
+      "orientation": "portrait",
+      "photoId": 27471474
+    },
+    {
+      "role": "post-1",
+      "query": "minimal workspace desk",
+      "orientation": "landscape",
+      "photoId": 4884116
+    },
+    {
+      "role": "post-2",
+      "query": "typography design print",
+      "orientation": "landscape",
+      "photoId": 5045979
+    },
+    {
+      "role": "post-3",
+      "query": "nature landscape misty hills",
+      "orientation": "landscape",
+      "photoId": 4316213
+    },
+    {
+      "role": "post-4",
+      "query": "city architecture street",
+      "orientation": "landscape",
+      "photoId": 37718865
+    },
+    {
+      "role": "post-5",
+      "query": "books reading library",
+      "orientation": "landscape",
+      "photoId": 8762862
+    },
+    {
+      "role": "post-6",
+      "query": "abstract texture paper",
+      "orientation": "landscape",
+      "photoId": 8749388
+    }
+  ]
+}

package/sites/blog/layouts/base.json

@@ -0,0 +1,22 @@
+{
+  "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" }
+  ]
+}