@kurtbruns/kestrel 1.8.0 → 1.10.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=53e67a63">
+<link rel="stylesheet" href="./styles.css?v=abd15153">
 <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=020f590a"></script>
+<script src="./app.js?v=183fc216"></script>
 </body>
 </html>

package/dist/public/dashboard/styles.css

@@ -438,6 +438,39 @@ body.nav-resizing .sidebar {
   font-weight: 600;
   margin: 0 0 10px;
 }
+/* The tab per doc set under the docs header: an underlined strip, the current set in the
+   foreground over an accent rule, the way tabs read as switchable. Links, since each set's
+   index is its own address. */
+.docs-tabs {
+  display: flex;
+  gap: 24px;
+  border-bottom: 1px solid var(--line);
+  margin: 0 0 20px;
+}
+.docs-tabs a {
+  padding: 8px 0 10px;
+  margin-bottom: -1px;
+  border-bottom: 2px solid transparent;
+  color: var(--muted);
+  font-size: 15px;
+  font-weight: 600;
+  text-decoration: none;
+}
+.docs-tabs a:hover {
+  color: var(--fg);
+}
+.docs-tabs a[aria-current="page"] {
+  color: var(--fg);
+  border-bottom-color: var(--accent);
+}
+/* A doc page's set, in the eyebrow over its title: the link back to that set's index. */
+.doc .doc-set a {
+  color: var(--muted);
+  text-decoration: none;
+}
+.doc .doc-set a:hover {
+  color: var(--accent);
+}
 .docs-index > h1 {
   font-size: 28px;
   line-height: 1.15;
@@ -1492,12 +1525,18 @@ td a:hover {
   text-decoration: underline;
 }
 
+/* A badge is a plain label, so it shows the default cursor rather than the text one. In a
+   row or card that opens on click it keeps the container's pointer. */
 .badge {
   display: inline-block;
   padding: 2px 8px;
   border-radius: 999px;
   font-size: 12px;
   border: 1px solid var(--line);
+  cursor: default;
+}
+.clickable .badge {
+  cursor: inherit;
 }
 .badge.draft {
   background: var(--status-draft-bg);
@@ -1545,6 +1584,16 @@ td a:hover {
   color: var(--danger-fg);
   border-color: var(--danger-line);
 }
+/* A suppressed address's consent status, kept but not in effect, takes the unsubscribed
+   grey: grey is "not mailed", whatever the label says, so a confirmed-but-suppressed row
+   never reads as one that is mailed. The red flag says why. It overrides the status's own
+   hue (.badge.confirmed and the rest, same specificity) by coming after them, so keep it
+   below them. */
+.badge.held {
+  background: var(--status-draft-bg);
+  color: var(--status-draft-fg);
+  border-color: var(--status-draft-line);
+}
 /* Suppression is an overlay on the address, not a consent status, so it rides next to
    the email rather than in the Status column — sized down to read as secondary. */
 .row-flag {
@@ -1554,6 +1603,128 @@ td a:hover {
   vertical-align: middle;
 }
 
+/* The Subscribers summary: the counts, with the Legend toggle at the card's right edge
+   (at the end of the counts' last line when they wrap), and the legend opening below
+   across the card. The legend is in the page's own colors (not an inverted tooltip),
+   each pill drawn as the list draws it beside its definition. */
+.sub-summary-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+/* The negative margin lines the first count's text up with the card's edge. */
+#subCounts {
+  gap: 10px 12px;
+  margin-left: -8px;
+}
+/* Each count is a filter (DESIGN §3): it reads as the plain count it was, and shows on
+   hover that it can be chosen. The chosen one takes the Secondary palette of a pressed
+   toggle, since it switches what you're looking at and commits nothing. */
+.sub-count {
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  padding: 4px 8px;
+  margin: -4px 0;
+  border-radius: 6px;
+}
+.sub-count:hover {
+  background: var(--hover);
+  color: var(--fg);
+}
+.sub-count[aria-pressed="true"] {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+/* Forced colors drop the tint, so the chosen count keeps an outline there. */
+@media (forced-colors: active) {
+  .sub-count[aria-pressed="true"] {
+    outline: 1px solid ButtonText;
+  }
+}
+/* The padding and equal negative margin give a 24px target without moving the label. */
+.sub-legend-toggle {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  margin: -4px -6px;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 13px;
+  border-radius: 4px;
+}
+.sub-legend-toggle:hover {
+  color: var(--fg);
+}
+.sub-legend-toggle::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  margin-top: -3px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+.sub-legend-toggle[aria-expanded="true"]::after {
+  margin-top: 3px;
+  transform: rotate(-135deg);
+}
+/* One grid for every group, each list a subgrid, so every definition starts at the same
+   edge. Each group is named by an h2 in the app's label style, and the panel has no title of
+   its own: the Legend toggle already names it. Its headings are a step smaller and more
+   widely tracked than the base label, and set apart by space alone (a group's break, 28px,
+   is three and a half rows'), so the one rule in the panel is the divider under the counts.
+   A paragraph keeps the app's 1rem beneath it. The panel carries the divider across the
+   card; its body is the container that caps the line length, once, for everything in it. */
+.sub-legend {
+  margin-top: 14px;
+  padding-top: 18px;
+  border-top: 1px solid var(--line);
+  font-size: 13px;
+  line-height: 1.45;
+}
+.sub-legend-body {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 16px;
+  max-width: 88ch;
+}
+.sub-legend h2 {
+  grid-column: 1 / -1;
+  margin: 28px 0 10px;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+}
+.sub-legend h2:first-child {
+  margin-top: 0;
+}
+.sub-legend dl {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  row-gap: 8px;
+  align-items: baseline;
+  margin: 0;
+}
+.sub-legend dd {
+  margin: 0;
+}
+/* An act's name is a term, not a heading: lighter than bold, so it doesn't outweigh the
+   pills in the column beside it. */
+.sub-legend-act {
+  font-weight: 500;
+}
+.sub-legend p {
+  grid-column: 1 / -1;
+  margin: 0 0 1rem;
+  color: var(--muted);
+}
+
 /* list views (posts / subscribers / sends): search on the left, filters pinned right */
 .list-toolbar {
   display: flex;
@@ -1617,8 +1788,17 @@ td a:hover {
 .list-table .c-status {
   width: 128px;
 }
+/* Wide enough for the longest date on one line, a date outside the current year with
+   its year ("Sep 30, 2027, 12:00 AM"), with room for a wider system font. Narrower
+   screens, until the table stacks, keep the room for the text column instead (the Drafts
+   table has two date columns), so an off-year date wraps there. */
 .list-table .c-date {
-  width: 148px;
+  width: 176px;
+}
+@media (max-width: 840px) {
+  .list-table .c-date {
+    width: 148px;
+  }
 }
 .list-table .c-num {
   width: 104px;
@@ -1633,6 +1813,14 @@ 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;
+}
+.list-table.subs-table {
+  min-width: 680px;
+}
 
 .dash-section table {
   border-color: var(--line);
@@ -1788,6 +1976,7 @@ body.web-mode .content {
   border-radius: 999px;
   background: var(--accent-on);
   color: var(--accent);
+  cursor: default;
 }
 .web-bar-text {
   overflow-wrap: anywhere;
@@ -1965,13 +2154,15 @@ body.web-mode .content {
 /* An outcome cell reuses the tile swatch palette (sw-ok / sw-warn / sw-danger /
    sw-sending / sw-neutral) so a row reads the same bucket as its tile above. The
    swatch + label hold one line — nowrap so the label never breaks mid-word in the
-   fixed-width column; the consequence rides in the cell's `title` tooltip and the
-   reconciliation line above, not inline, so the row stays a clean one-liner. */
+   fixed-width column; the consequence is said in the reconciliation line above, not
+   inline or on hover (DESIGN §11), so the row stays a clean one-liner. A plain label,
+   so the default cursor. */
 .rec-out {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   white-space: nowrap;
+  cursor: default;
 }
 .rec-people-empty {
   margin: 14px 0 0;
@@ -1997,7 +2188,7 @@ body.web-mode .content {
 }
 /* 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. */
+   hue as its badge elsewhere. A plain label, so the default cursor (DESIGN §11). */
 .phase-pill {
   display: inline-block;
   padding: 2px 10px;
@@ -2006,6 +2197,7 @@ body.web-mode .content {
   font-weight: 600;
   border: 1px solid var(--line);
   white-space: nowrap;
+  cursor: default;
 }
 .phase-pill.tone-sending {
   background: var(--status-sending-bg);
@@ -2189,8 +2381,9 @@ body.web-mode .content {
   font-size: 12.5px;
   color: var(--warn-fg);
 }
-/* A scheduled send while no provider is connected (DESIGN §4): the countdown stays, and a
-   line beneath it in the same amber says the send will be held when it fires. */
+/* A scheduled send's card while no provider is connected (DESIGN §4): the countdown stays,
+   and a line beneath it in amber says the send will be held when it fires. The editor's
+   violet banner says it as a .sched-note instead, since amber text doesn't read on violet. */
 .sched-held {
   margin-top: 4px;
   font-size: 12.5px;
@@ -2680,6 +2873,15 @@ body.web-mode .content {
 .modal .hint.not-connected a {
   color: inherit;
 }
+/* On Workers Free's limits, a send too large for D1's daily writes (DESIGN §4): the same amber
+   box, since it is a warning to read before scheduling, though it disables nothing. */
+.modal .hint.daily-writes {
+  color: var(--warn-fg);
+  background: var(--warn-bg);
+  border: 1px solid var(--warn-line);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
 .modal .actions {
   display: flex;
   justify-content: flex-end;
@@ -2771,6 +2973,11 @@ button.linkbtn:hover {
 .page-head {
   margin-bottom: 16px;
 }
+/* A head with several acts (Subscribers: Import, Export, Add subscriber) puts them under
+   the title when the two don't fit side by side, rather than squeezing either. */
+.spread.page-head {
+  flex-wrap: wrap;
+}
 .page-head-row {
   display: flex;
   align-items: center;
@@ -2989,18 +3196,6 @@ textarea.is-invalid {
   visibility: visible;
   transform: translateY(0);
 }
-/* Drop the tip below the icon instead of above it. The default opens upward,
-   which clips against the top of the viewport when the icon sits at the top of a
-   page (e.g. the Subscribers counts card); this variant opens downward there. */
-.info.tip-below::after {
-  top: calc(100% + 8px);
-  bottom: auto;
-  transform: translateY(-2px);
-}
-.info.tip-below:hover::after,
-.info.tip-below:focus::after {
-  transform: translateY(0);
-}
 /* The "Auto-generate from subject" toggle, grouped just under the slug field. */
 .slug-auto-toggle {
   display: inline-flex;
@@ -3066,6 +3261,25 @@ textarea.is-invalid {
   margin-top: 6px;
   font-size: 13px;
 }
+/* The scheduled banner's notes under the countdown (DESIGN §4): a send that will be held
+   with no provider connected, and one too large for D1's daily writes on Workers Free's
+   limits. Each keeps the banner's own violet, since amber words on violet fall short of
+   contrast and mix two of the color meanings, and an amber ⚠️ leads it to say it's worth a
+   look. Held is the stronger of the two (the send won't go out), so it keeps the weight. */
+.sched-note {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  margin-top: 6px;
+  font-size: 12.5px;
+  color: var(--status-scheduled-fg);
+}
+.sched-note-mark {
+  flex: none;
+}
+.sched-note-held {
+  font-weight: 500;
+}
 .sched-remade-mark {
   margin-top: 4px;
   font-size: 12.5px;
@@ -4030,6 +4244,13 @@ button.api-filter-clear svg {
   font-size: 13px;
   font-variant-numeric: tabular-nums;
 }
+/* A step already done (the list has subscribers): a check in place of its number. */
+.setup-steps li.setup-done::before {
+  content: "✓";
+  color: var(--ok-fg);
+  border-color: var(--ok-line);
+  background: var(--ok-bg);
+}
 .setup-step-main {
   flex: 1 1 auto;
   min-width: 0;
@@ -4185,7 +4406,8 @@ button.copied svg {
 }
 
 /* Intent chips — the grouping made visible. Editable wears the Kestrel accent;
-   read-only wears a warn tone; copy-out stays muted. */
+   read-only wears a warn tone; copy-out stays muted. Plain labels, so the default
+   cursor (DESIGN §11). */
 .set-chip {
   display: inline-flex;
   align-items: center;
@@ -4198,6 +4420,7 @@ button.copied svg {
   color: var(--muted);
   background: var(--card);
   white-space: nowrap;
+  cursor: default;
 }
 .set-chip svg {
   width: 12px;
@@ -4451,6 +4674,12 @@ button.set-field-remove {
   font-size: 13.5px;
   overflow-x: auto;
 }
+/* A value with one quiet line of explanation under it (the From address and where replies go). */
+.set-kv > .set-kv-stack {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+}
 .set-kv > div:nth-last-child(1),
 .set-kv > div:nth-last-child(2) {
   border-bottom: 0;
@@ -4459,6 +4688,7 @@ button.set-field-remove {
   font-family: var(--mono);
   font-size: 13px;
 }
+/* A status pill in the settings reflection: a plain label, so the default cursor (DESIGN §11). */
 .set-pill {
   display: inline-flex;
   align-items: center;
@@ -4471,6 +4701,7 @@ button.set-field-remove {
   color: var(--muted);
   border: 1px solid var(--line-soft);
   white-space: nowrap;
+  cursor: default;
 }
 .set-pill.ok {
   background: var(--ok-bg);
@@ -5343,6 +5574,7 @@ button.set-embed-copy svg {
   border-radius: 999px;
   border: 1px solid var(--line-soft);
   color: var(--muted);
+  cursor: default;
 }
 .set-req-pill .dot {
   width: 6px;
@@ -5893,8 +6125,268 @@ body.has-savebar .content {
   .posts-table td.updated::before {
     content: " · edited ";
   }
-  /* Subscribers: status pill · joined <date>. */
+}
+
+/* The Subscribers table has four fixed columns beside its email, so it runs out of room
+   well above phone width, and where depends on the sidebar (a rail up to 1024px, then
+   full), not the viewport. So it stacks by its own width, measured on its wrapper,
+   whenever the email would get less than about 250px: the same stacked row as the
+   phone layout above, repeated here because a container query can't share its rules. */
+.subs-wrap {
+  container-type: inline-size;
+}
+@container (max-width: 759px) {
+  .list-table.subs-table.stacks,
+  .list-table.subs-table.stacks tbody,
+  .list-table.subs-table.stacks tr {
+    display: block;
+    min-width: 0;
+  }
+  .list-table.subs-table.stacks colgroup,
+  .list-table.subs-table.stacks thead {
+    display: none;
+  }
+  .list-table.subs-table.stacks tr {
+    position: relative;
+    padding: 11px 14px;
+    border-bottom: 1px solid var(--line);
+  }
+  .list-table.subs-table.stacks tr:last-child {
+    border-bottom: 0;
+  }
+  .list-table.subs-table.stacks td {
+    display: inline;
+    padding: 0;
+    border: 0;
+    font-size: 13px;
+    text-align: left;
+  }
+  .list-table.subs-table.stacks td:first-child {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 14px;
+    padding-right: 36px;
+  }
+  .list-table.subs-table.stacks td.act {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: auto;
+  }
+  .list-table.subs-table.stacks td.empty {
+    display: none;
+  }
+  /* Subscribers: status pill · how they joined · joined <date>. */
+  .subs-table td.how::before {
+    content: " · ";
+  }
   .subs-table td.joined::before {
     content: " · joined ";
   }
 }
+
+/* --- Import (DESIGN §3, Import subscribers): the format before the file, the plan of the
+   file chosen with what the commit needs, then the result. Cards on the page ground, the
+   drop zone dashed so it reads as a place to put something. --- */
+.imp {
+  max-width: 820px;
+}
+.imp-card h2 {
+  margin: 0 0 10px;
+}
+/* Where the page moves focus after a plan, a re-plan, or the result: a place to read from,
+   not a control, so it takes no ring. */
+.imp-file:focus,
+.imp-act-error:focus,
+#impDoneHead:focus {
+  outline: none;
+}
+.imp-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+.imp-card-head h2 {
+  margin: 0;
+}
+.imp-text {
+  font-size: 13.5px;
+  line-height: 1.55;
+  margin: 0 0 10px;
+}
+.imp-sample,
+.imp-ref {
+  font-size: 12.5px;
+  margin: 4px 0 8px;
+}
+.imp-sample td,
+.imp-ref td {
+  vertical-align: top;
+}
+.imp-sample td {
+  font-family: var(--mono);
+  white-space: nowrap;
+}
+.imp-links {
+  margin-top: 10px;
+}
+.imp-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 26px 16px;
+  border: 2px dashed var(--line-soft);
+  border-radius: 10px;
+  background: var(--card);
+  text-align: center;
+}
+.imp-drop.over {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+}
+.imp-drop > svg {
+  width: 22px;
+  height: 22px;
+  color: var(--muted);
+}
+.imp-drop-line {
+  margin: 0;
+  font-size: 13.5px;
+}
+.imp-drop .field-hint {
+  margin: 0;
+}
+.imp-file-error {
+  margin-top: 10px;
+}
+.imp-file-error .field-error {
+  margin: 0 0 10px;
+  font-size: 13.5px;
+}
+.imp-file-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.imp-file-name {
+  overflow-wrap: anywhere;
+}
+.imp-plain {
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.imp-plain .field-hint {
+  flex-basis: 100%;
+  margin: 0;
+}
+.imp-plain-label {
+  font-size: 13.5px;
+}
+.imp-outcomes {
+  margin: 0 0 10px;
+  padding-left: 18px;
+  font-size: 13.5px;
+  line-height: 1.55;
+}
+.imp-outcomes li + li {
+  margin-top: 4px;
+}
+.imp-kept-head {
+  font-size: 13px;
+  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 {
+  color: var(--warn-fg);
+  background: var(--warn-bg);
+  border: 1px solid var(--warn-line);
+  border-radius: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 12px 0 0;
+}
+.imp-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  font-size: 13.5px;
+  line-height: 1.5;
+  margin: 10px 0 0;
+  cursor: pointer;
+}
+.imp-check input {
+  width: auto;
+  margin: 3px 0 0;
+  flex: 0 0 auto;
+  cursor: pointer;
+}
+.imp-check + .field-error {
+  margin-left: 24px;
+}
+.imp-attest-hint {
+  margin: 6px 0 0 24px;
+}
+.imp-act-error {
+  margin-top: 14px;
+}
+.imp-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 14px;
+  margin-top: 18px;
+}
+/* View subscriber's title is the address, so a long one breaks rather than widens the dialog. */
+.sub-title {
+  overflow-wrap: anywhere;
+}
+.imp-dl,
+.sub-dl {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 16px;
+  margin: 0;
+  font-size: 13.5px;
+}
+.imp-dl dt,
+.sub-dl dt {
+  color: var(--muted);
+}
+.imp-dl dd,
+.sub-dl dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+.sub-evidence {
+  margin: 0;
+  white-space: pre-wrap;
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font: 12px / 1.5 var(--mono);
+}
+@media (max-width: 540px) {
+  .imp-dl,
+  .sub-dl {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+  .imp-dl dd,
+  .sub-dl dd {
+    margin-bottom: 8px;
+  }
+}