@kurtbruns/kestrel 1.12.0 → 1.13.0

package/dist/public/dashboard/index.html

@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Kestrel</title>
 <link rel="icon" href="/favicon.svg">
-<link rel="stylesheet" href="./styles.css?v=1396c31b">
+<link rel="stylesheet" href="./styles.css?v=7f1a9a46">
 <script>
 // Sidebar mode guard — set the width-based data-nav on <html> before first paint so the
 // sidebar renders in its final width with no flash. The collapse toggle's override is
@@ -113,6 +113,6 @@
 </section>
 <div id="toasts" role="status" aria-live="polite"></div>
 
-<script src="./app.js?v=fc72c770"></script>
+<script src="./app.js?v=1aa2dbe5"></script>
 </body>
 </html>

package/dist/public/dashboard/styles.css

@@ -1854,8 +1854,10 @@ td a:hover {
 .dash-drafts {
   table-layout: fixed;
 }
+/* Wide enough for the longest "edited <date>", a two-digit day and hour included, with the
+   cell's padding: the fixed layout clips anything wider rather than growing the column. */
 .dash-drafts td.edited {
-  width: 11.5em;
+  width: 15em;
   white-space: nowrap;
 }
 @media (min-width: 721px) {
@@ -1867,13 +1869,15 @@ td a:hover {
 .list-table .c-act {
   width: 56px;
 }
-/* Subscribers: how each joined ("Imported · Sendy, single opt-in"), which may wrap to two
-   lines; the table takes a wider floor so the email column keeps room beside it. */
-.list-table .c-how {
-  width: 152px;
-}
+/* Subscribers: a floor that keeps the email column about 250px beside its two others. With
+   only Status and Joined beside an address, which rarely needs more than half the row, fixed
+   widths left one wide gap before them; a share of the row each spreads the space evenly. */
 .list-table.subs-table {
-  min-width: 680px;
+  min-width: 610px;
+}
+.list-table.subs-table .c-status,
+.list-table.subs-table .c-date {
+  width: 24%;
 }
 
 .dash-section table {
@@ -1934,20 +1938,143 @@ th.num .th-sort {
   cursor: default;
 }
 
-/* API reference: query-param table inside a route card */
-.api-query {
+/* A route's or an object's sections (query, body, returns, refusals, fields) as Stripe's and
+   Mux's references set theirs: a heading over a rule, then unboxed rows, each with the name,
+   its type, and Required on one line and what it means under it, so a long name never
+   squeezes its description. A name breaks only where its words join (the <wbr> the page puts
+   after each _ . /). */
+.block.api-sec {
+  margin-top: 22px;
+}
+.api-sec > .block-head {
   margin: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line-soft);
 }
-.api-query td {
-  padding: 5px 10px;
+.api-sec > .block-head .block-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg);
+}
+.api-sec-meta {
+  margin-left: 2px;
+  font: 400 12px var(--mono);
+  color: var(--muted);
+}
+/* Rules divide rows; the last row in a section has none under it. */
+.api-row,
+.api-lrow {
+  padding: 11px 0;
+  border-bottom: 1px solid var(--line);
+}
+.api-row:last-child,
+.api-lrow:last-child {
+  border-bottom: 0;
+}
+.api-row-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+code.api-row-name {
   font-size: 13px;
-  vertical-align: top;
+  font-weight: 600;
+  overflow-wrap: break-word;
 }
-.api-query td:first-child {
-  white-space: nowrap;
-  width: 1%;
+.api-row-type {
+  font: 12px var(--mono);
+  color: var(--muted);
+}
+/* A type that names an object links to it, and reads as a link. */
+.api-row-type a {
+  color: var(--fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.api-row-desc {
+  margin-top: 3px;
+  font-size: 13.5px;
+}
+/* The refusals and the statuses are a ledger: the status in a column of its own, tinted by
+   its class, so a reader scans by status. */
+.api-lrow {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 6px;
+}
+.api-st {
+  font: 600 12.5px / 20px var(--mono);
+  color: var(--muted);
+}
+.api-st-4xx {
+  color: var(--warn-fg);
+}
+.api-st-5xx {
+  color: var(--danger-fg);
+}
+.api-st-2xx {
+  color: var(--ok-fg);
+}
+.api-with {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--muted);
+}
+/* A status's name is words, not a code. */
+.api-statuses code.api-row-name {
+  font-family: inherit;
+}
+/* A value's short cells beside its name (a condition kind's severity and fields), each led by
+   its column's name, and the label of a later long line ("Remedy:"). */
+.api-row-meta {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.api-row-key {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+/* What every route shares, described once ahead of the routes: concept prose, an object's
+   description, an enum's values under a field's line, and the refusal table's next moves. */
+/* The reference's paragraphs, each with space below it, as a doc page's are. */
+.api-prose {
+  margin: 0 0 10px;
+  font-size: 14px;
+}
+/* A list in the reference's prose (the status ranges under Requests), set like its paragraphs. */
+.prose-list {
+  padding-left: 20px;
+}
+.prose-list li {
+  margin: 6px 0;
+}
+.api-values {
+  margin: 4px 0 0;
+  padding-left: 16px;
+}
+.api-values li {
+  margin: 2px 0;
+}
+/* The name of a group an enum's values fall into, over its bullets. */
+.api-values-group {
+  margin: 8px 0 0;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+.api-returns {
+  margin: 4px 0 6px;
+  font-size: 13.5px;
+}
+/* A refusal's next move, under what it means: quieter, the step a client takes from it. */
+.api-move-next {
+  display: block;
+  margin-top: 2px;
+  font-size: 12.5px;
+  color: var(--muted);
 }
-
 /* editor header */
 .editor-head {
   display: flex;
@@ -2242,7 +2369,7 @@ body.web-mode .content {
   font-size: 22px;
   letter-spacing: -0.01em;
 }
-/* The derived-phase pill (progressing / retrying / backing-off / needs-attention /
+/* The derived-phase pill (progressing / retrying / backing_off / needs_attention /
    settling / …). Tones reuse the status + semantic palettes so a phase reads the same
    hue as its badge elsewhere. A plain label, so the default cursor (DESIGN §11). */
 .phase-pill {
@@ -4016,16 +4143,27 @@ button.api-filter-clear svg {
   color: var(--fg);
   background: var(--hover);
 }
+/* The reference reads as a document: a doc page's line height, not the browser's default. */
 .api-content {
   min-width: 0;
-  max-width: 820px;
+  max-width: 1440px;
+  line-height: 1.5;
+}
+/* One reading measure for the page, a doc page's (720px): the intro, the topics, and each
+   route's and object's prose and tables keep it, and only a route's examples, beside its
+   prose on a wide screen, reach past it. */
+.api-head,
+.api-blurb,
+.api-section[data-tier="overview"] .api-res,
+.api-op-body {
+  max-width: 720px;
 }
 .api-head {
   margin: 0 0 12px;
 }
 .api-head h1 {
   margin: 0 0 4px;
-  font-size: 22px;
+  font-size: 28px;
 }
 .api-section {
   scroll-margin-top: calc(var(--bar-h) + 2px);
@@ -4036,35 +4174,53 @@ button.api-filter-clear svg {
 .api-section.api-last {
   min-height: calc(100vh - var(--bar-h));
 }
+/* A tier is a page heading here, not the app's small-caps section label that h2 is elsewhere. */
 .api-section h2 {
-  font-size: 18px;
-  margin: 24px 0 4px;
+  font-size: 24px;
+  font-weight: 650;
+  color: var(--fg);
+  text-transform: none;
+  letter-spacing: normal;
+  margin: 28px 0 4px;
+}
+/* Where a jump from the rail or an address moves focus: a place to read from, not a control,
+   so it takes no ring. */
+.api-section h2:focus,
+.api-res-head h3:focus {
+  outline: none;
 }
 .api-blurb {
-  margin: 0;
+  margin: 0 0 10px;
   font-size: 14px;
-  max-width: 62ch;
 }
-/* A resource: its heading stays pinned under the room bar while its rows scroll by. */
+/* A resource: its heading over a rule, scrolling with its routes. */
 .api-res {
   margin-top: 16px;
   scroll-margin-top: var(--bar-h);
 }
+/* A resource's heading, set like the page's other headings, flush with the text: it only
+   pins under the bar, its vertical padding the band the rows scroll beneath. */
 .api-res-head {
-  position: sticky;
-  top: var(--bar-h);
-  z-index: var(--z-content);
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 6px;
+  margin: 0;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--line-soft);
   background: var(--bg);
-  border-radius: 6px;
 }
 
 .api-res-head h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: 20px;
+  font-weight: 650;
+}
+/* A Getting started topic is a heading over prose, not a list's head: no rule, a step smaller. */
+.api-section[data-tier="overview"] .api-res-head {
+  border-bottom: none;
+}
+.api-section[data-tier="overview"] .api-res-head h3 {
+  font-size: 18px;
 }
 .api-rows {
   list-style: none;
@@ -4073,46 +4229,8 @@ button.api-filter-clear svg {
 }
 .api-rows > li {
   border-bottom: 1px solid var(--line);
-}
-/* One route per row: badge, path, and summary line, a native disclosure that opens in
-   place to the full documentation. */
-.api-route-sum {
-  display: grid;
-  grid-template-columns: 62px minmax(0, max-content) minmax(0, 1fr) 20px;
-  gap: 14px;
-  align-items: center;
-  padding: 9px 6px;
-  border-radius: 6px;
-  list-style: none;
-  cursor: pointer;
-}
-.api-route-sum::-webkit-details-marker {
-  display: none;
-}
-.api-route-sum:hover {
-  background: var(--hover);
-}
-.api-route-line {
-  color: var(--muted);
-  font-size: 13.5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.api-route[open] .api-route-line {
-  visibility: hidden;
-}
-.api-chev {
-  width: 6px;
-  height: 6px;
-  border-right: 1.6px solid var(--muted);
-  border-bottom: 1.6px solid var(--muted);
-  justify-self: center;
-  transform: rotate(-45deg);
-  transition: transform 0.15s;
-}
-.api-route[open] .api-chev {
-  transform: rotate(45deg);
+  /* A route reached from its address lands just under the bar, the rule above it hidden. */
+  scroll-margin-top: calc(var(--bar-h) - 1px);
 }
 /* The verb as a tinted label: its own --method-* color as text over a wash of itself. */
 .api-method {
@@ -4136,6 +4254,13 @@ button.api-filter-clear svg {
 .api-method.m-DELETE {
   --m: var(--method-delete);
 }
+/* An object heads its resource as a row of its own, marked in the verb's column. */
+.api-method.m-OBJECT {
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--card);
+  box-shadow: inset 0 0 0 1px var(--line-soft);
+}
 .api-path {
   font: 13.5px var(--mono);
   overflow-wrap: anywhere;
@@ -4146,30 +4271,128 @@ button.api-filter-clear svg {
   border-radius: 3px;
   padding: 0 2px;
 }
-.api-route-detail {
-  padding: 2px 6px 18px 82px;
-}
 .api-summary {
-  margin: 2px 0 0;
-  font-size: 14.5px;
+  margin: 0 0 10px;
+  font-size: 15px;
 }
 .api-desc {
-  margin: 6px 0 0;
+  margin: 0 0 10px;
   font-size: 14px;
 }
-/* A query parameter the route can't be called without. */
+/* A field or parameter the request can't do without. */
 .api-req {
-  margin-left: 4px;
-  font-size: 11px;
-  color: var(--muted);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  padding: 0 4px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--warn-fg);
 }
 
 .api-empty {
   margin: 20px 0;
 }
+/* An object, first under the resource whose routes return it: a row like a route's, that
+   opens to its fields and example. */
+/* A route or an object, laid out in full as Stripe and Mux lay theirs: its name and tools,
+   its method and path, then what it does beside its examples on a wide screen, under them
+   on a narrow one. The examples scroll with the page: pinned, one taller than the window
+   (the send view's) would never show its end. */
+/* Each route and object its own block, with room around it so the page reads as one at a time. */
+.api-op {
+  padding: 36px 0 40px;
+}
+.api-op-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+.api-op-head h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 650;
+}
+.api-op-head h4:focus {
+  outline: none;
+}
+/* A heading is a link to its own address, in the heading's own ink, with a link icon in the
+   margin to its left while it is hovered or focused, as GitHub's headings show theirs. */
+a.api-self {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+a.api-self svg {
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  color: var(--muted);
+  opacity: 0;
+}
+a.api-self:hover svg,
+a.api-self:focus-visible svg {
+  opacity: 1;
+}
+.api-op-call {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 10px;
+}
+.api-op-call .api-method {
+  padding: 0 6px;
+}
+/* Copy sits right after the path it copies, an icon alone, so the two read as one. */
+button.copy-btn.api-copy-path {
+  padding: 3px 5px;
+}
+button.copy-btn.api-copy-path span:empty {
+  display: none;
+}
+.api-op-body {
+  display: grid;
+  gap: 4px 28px;
+}
+.api-op-text,
+.api-op-code {
+  min-width: 0;
+}
+@media (min-width: 1280px) {
+  .api-op-body {
+    max-width: none;
+    /* The examples take what the window has beyond the prose's measure, never under 360px. */
+    grid-template-columns: minmax(0, 720px) minmax(360px, 1fr);
+  }
+  .api-op-code {
+    align-self: start;
+  }
+  .api-op-code > .block:first-child {
+    margin-top: 0;
+  }
+}
+/* The rail lists every route by name under its resource, so it reads as the page's contents. */
+.api-nav-ops {
+  display: none;
+}
+.api-nav-ops.open,
+.api-nav.filtering .api-nav-ops {
+  display: flex;
+  flex-direction: column;
+}
+.api-nav a.api-nav-op {
+  padding-left: 30px;
+  font-size: 13px;
+}
+.api-nav-tier + .api-nav-ops a.api-nav-op {
+  padding-left: 20px;
+}
+.api-object {
+  border-bottom: 1px solid var(--line);
+  /* Reached from a route's Returns, it lands just under the bar. */
+  scroll-margin-top: calc(var(--bar-h) - 1px);
+}
 /* Reference room on mobile. The bar stays ONE row at --bar-h, the same as on desktop, so
    the in-page anchors (scroll-margin-top) and the scroll-spy line keep clearing it: the back
    link is a --bar-h square holding its arrow, the wordmark and the two tabs follow, and the
@@ -4284,11 +4507,13 @@ button.api-filter-clear svg {
     font-size: 13px;
   }
   /* The API rail is the tier chips alone on a phone: its resources need the column the
-     rail no longer has. A route row stacks its summary under its path. */
+     rail no longer has. */
   .api-filter {
     max-width: none;
   }
-  .api-nav a.api-nav-res {
+  .api-nav a.api-nav-res,
+  .api-nav .api-nav-ops,
+  .api-nav.filtering .api-nav-ops {
     display: none;
   }
   .api-nav a.api-nav-tier {
@@ -4297,25 +4522,6 @@ button.api-filter-clear svg {
   .api-nav a.api-nav-tier ~ a.api-nav-tier {
     margin-top: 0;
   }
-  .api-route-sum {
-    grid-template-columns: 62px minmax(0, 1fr) 20px;
-    gap: 4px 10px;
-  }
-  .api-route-line {
-    grid-column: 2;
-    grid-row: 2;
-    white-space: normal;
-  }
-  .api-chev {
-    grid-column: 3;
-    grid-row: 1;
-  }
-  .api-route[open] .api-route-line {
-    display: none;
-  }
-  .api-route-detail {
-    padding: 0 4px 14px;
-  }
   /* inline-flex centres the chip's text in its 32px; the gap stands in for the space
      between the label and its ↗ that flex drops. */
   .rail-link {
@@ -4734,12 +4940,22 @@ button.copied svg {
   font-weight: 600;
   color: var(--muted);
 }
-.block pre {
+/* A code block (an example, a curl command, a template): a raised card with its label and Copy
+   in a header inside it, so the code stands apart from the page in both themes. */
+.code-block {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.code-block > .block-head {
+  margin: 0;
+  padding: 4px 6px 4px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.code-block pre {
   margin: 0;
   overflow-x: auto;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 6px;
   padding: 10px 12px;
   font: 12.5px / 1.5 var(--mono);
 }
@@ -6515,7 +6731,7 @@ body.has-savebar .content {
 .subs-wrap {
   container-type: inline-size;
 }
-@container (max-width: 759px) {
+@container (max-width: 609px) {
   .list-table.subs-table.stacks,
   .list-table.subs-table.stacks tbody,
   .list-table.subs-table.stacks tr {
@@ -6556,10 +6772,7 @@ body.has-savebar .content {
   .list-table.subs-table.stacks td.empty {
     display: none;
   }
-  /* Subscribers: status pill · how they joined · joined <date>. */
-  .subs-table td.how::before {
-    content: " · ";
-  }
+  /* Subscribers: status pill · joined <date>. */
   .subs-table td.joined::before {
     content: " · joined ";
   }
@@ -6687,8 +6900,10 @@ body.has-savebar .content {
   font-weight: 600;
   margin: 14px 0 4px;
 }
-/* The same amber box the Schedule dialog gives D1's daily-writes warning (DESIGN §4). */
-.hint.daily-writes.imp-warn {
+/* On Workers Free's limits, the advice to move to Workers Paid on a list past what Free suits,
+   on the Dashboard, the Subscribers screen, and an import's plan (DESIGN §4): the same amber
+   box the Schedule dialog gives D1's daily-writes warning. */
+.workers-plan {
   color: var(--warn-fg);
   background: var(--warn-bg);
   border: 1px solid var(--warn-line);
@@ -6729,9 +6944,73 @@ body.has-savebar .content {
   gap: 14px;
   margin-top: 18px;
 }
-/* View subscriber's title is the address, so a long one breaks rather than widens the dialog. */
+/* A subscriber's page is titled with the address, so a long one breaks rather than widens
+   the head; the status pill and the flag sit beside it, as the roster draws them. */
 .sub-title {
   overflow-wrap: anywhere;
+  margin: 0;
+}
+.sub-page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.sub-page-title .sub-pills {
+  white-space: nowrap;
+}
+/* Whether they receive posts: the page's first answer, under the head, in the record's
+   meta-line place; muted, with a green dot only when they do, as a confirmed pill is. */
+.sub-receives {
+  margin: -6px 0 14px;
+  font-size: 13.5px;
+  color: var(--muted);
+}
+.sub-receives.yes::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: var(--ok-fg);
+}
+/* The import note: the card's own small print, outside a dialog's hint styles. */
+.sub-note {
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.sub-sec .sub-meaning {
+  margin: 8px 0;
+  font-size: 13.5px;
+}
+.sub-sec p:last-child {
+  margin-bottom: 0;
+}
+.sub-sup-line,
+.sub-left-line {
+  margin: 0;
+}
+/* Sends is a table, and a table is already a card, so its section is no card of its own:
+   the label sits on the page above it, as the dashboard's sections do. */
+.sub-sends {
+  margin-top: 22px;
+}
+.sub-sends-table .c-out {
+  width: 160px;
+}
+.sub-sends-table .sub-send a {
+  font-weight: 500;
+}
+.sub-more {
+  margin-top: 12px;
+}
+/* The roster's address is its row's link, as a Sent row's subject is, in the text's color
+   since the whole row is the click target. */
+.subs-table a.sub-email {
+  color: inherit;
 }
 .imp-dl,
 .sub-dl {