@kurtbruns/kestrel 1.20.0 → 1.21.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=00bc34db">
+<link rel="stylesheet" href="./styles.css?v=aacdaf66">
 <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
@@ -116,6 +116,6 @@
 </section>
 <div id="toasts" role="status" aria-live="polite"></div>
 
-<script src="./app.js?v=0af2b352"></script>
+<script src="./app.js?v=e3dbd207"></script>
 </body>
 </html>

package/dist/public/dashboard/styles.css

@@ -2,7 +2,13 @@
    prefers-color-scheme (see the dark block below). This is the admin surface's own
    palette — independent of, and never loaded alongside, the reader/email-card
    `TOKENS` in src/lib/page.ts. The two reuse names like --muted and --bg with
-   different values on purpose; don't assume they share meaning. */
+   different values on purpose; don't assume they share meaning.
+
+   Specificity, not source order, decides this file's cascade, so rules stay grouped by
+   component. That is why Biome's noDescendingSpecificity is off in biome.json, which takes no
+   comments: it compares selectors by their last element alone, so `#settingsBtn svg` outranks
+   every later `svg` rule, components that never nest included, and satisfying it would mean
+   moving rules out of their sections, changing the cascade to fix nothing. */
 :root {
   color-scheme: light dark;
   /* Layering — one named z-index ladder (DESIGN §9). Every fixed or floating surface
@@ -1197,7 +1203,6 @@ body.tool-mode .content {
   }
 }
 
-/* biome-ignore lint/style/noDescendingSpecificity: specificity (not source order) decides the cascade; base rule grouped here intentionally */
 button {
   font-family: inherit;
   font-size: 14px;
@@ -1524,7 +1529,6 @@ td a {
   text-decoration: none;
   font-weight: 500;
 }
-/* biome-ignore lint/style/noDescendingSpecificity: specificity (not source order) decides the cascade; hover rule grouped with its base */
 td a:hover {
   text-decoration: underline;
 }
@@ -1942,6 +1946,24 @@ th.num .th-sort {
   cursor: default;
 }
 
+/* A labelled block (a code block, or the API reference's query and content-type tables):
+   its label line, then the block. Ahead of the sections below, which refine it. */
+.block {
+  margin-top: 10px;
+}
+.block-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0 4px;
+}
+.block-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+
 /* 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
@@ -4148,6 +4170,11 @@ button.api-filter-clear svg {
   max-width: 1440px;
   line-height: 1.5;
 }
+/* A resource: its heading over a rule, scrolling with its routes. */
+.api-res {
+  margin-top: 16px;
+  scroll-margin-top: var(--bar-h);
+}
 /* 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. */
@@ -4192,11 +4219,6 @@ button.api-filter-clear svg {
   margin: 0 0 10px;
   font-size: 14px;
 }
-/* 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 {
@@ -4992,20 +5014,10 @@ button.copy-btn.api-copy-path {
 }
 
 /* --- copying text out of the app (DESIGN §7, ui/copy.ts) ---
-   A labelled block (a code block, or the API reference's query and content-type tables):
-   its label line, then the block. The Copy is a control outside the five roles: the word
-   and its glyph, no fill or border, quiet on the line it shares; the glyph turns to a
-   check in the ok hue for a moment once a copy has landed, and the word stays. A Copy
-   beside a single value (an address) is the same control. --- */
-.block {
-  margin-top: 10px;
-}
-.block-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 8px 0 4px;
-}
+   The Copy is a control outside the five roles: the word and its glyph, no fill or border,
+   quiet on the line it shares; the glyph turns to a check in the ok hue for a moment once a
+   copy has landed, and the word stays. A Copy beside a single value (an address) is the same
+   control. --- */
 button.copy-btn {
   display: inline-flex;
   align-items: center;
@@ -5037,12 +5049,6 @@ button.copy-btn svg {
 button.copied svg {
   color: var(--ok-fg);
 }
-.block-label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-}
 /* 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 {
@@ -5122,6 +5128,13 @@ button.copied svg {
   align-items: center;
   gap: 12px;
   margin: 0 0 14px;
+  scroll-margin-top: 20px; /* a link to the section leaves its title room at the top */
+}
+@media (max-width: 539px) {
+  /* The phone's floating menu button, 52px tall from the top, would cover the title. */
+  .set-sec-head {
+    scroll-margin-top: 60px;
+  }
 }
 .set-sec-title {
   margin: 0;
@@ -5234,6 +5247,7 @@ button.copied svg {
   min-width: 0;
 }
 .set-logo-tile {
+  position: relative;
   width: 100%;
   aspect-ratio: 1;
   border-radius: 10px;
@@ -5253,6 +5267,22 @@ button.copied svg {
 .set-logo-tile:hover {
   border-color: var(--accent);
 }
+.set-logo-tile.dragover::after {
+  content: "Drop to upload";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px;
+  border: 2px dashed var(--ring);
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--ring) 14%, var(--card));
+  color: var(--fg);
+  font-size: 11px;
+  font-weight: 600;
+  text-align: center;
+}
 .set-logo-ph {
   display: flex;
   flex-direction: column;
@@ -5526,29 +5556,38 @@ button.set-field-remove {
   margin-top: 5px;
 }
 
-/* --- confirmation email: the rendered card + the words-only edit body ---
-   The card colors are LITERALS matching src/emails/system.ts, which now ships light+dark
-   (its `prefers-color-scheme` block). The light literals are here; a dark @media block
-   below overrides them with the email's dark palette, so the preview tracks the dashboard
-   theme and stays byte-honest about what a light- or dark-mode inbox receives. */
+/* --- confirmation email: the rendered preview + the words-only edit body ---
+   The stage and column copy the email's frame in src/emails/system.ts, and their colors are
+   LITERALS matching its light and dark palettes (its `prefers-color-scheme` block). The
+   light literals are here; a dark @media block below overrides them, so the preview tracks
+   the dashboard theme and shows what a light- or dark-mode inbox receives. */
+/* The top border is the app's, not the email's: it keeps the inbox row above from reading as
+   part of an email whose page is the same white. */
 .set-ce-stage {
-  background: #f4f4f5;
-  padding: 22px 18px;
+  border-top: 1px solid var(--line);
+  background: #ffffff;
+  padding: 8px 12px 48px;
 }
-.set-ce-card {
-  max-width: 440px;
+.set-ce-col {
+  max-width: 664px;
   margin: 0 auto;
-  background: #ffffff;
-  border-radius: 8px;
-  padding: 28px 26px;
-  font-size: 15px;
+  padding: 24px 32px 32px;
+  font-size: 16px;
   line-height: 1.6;
   color: #18181b;
+  word-break: break-word;
+}
+/* The email's narrow rule, at its width, so a phone sees what its inbox will show. */
+@media (max-width: 560px) {
+  .set-ce-col {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
 }
 .set-ce-msg {
   margin: 0 0 20px;
 }
-/* Publication masthead inside the preview card, matching masthead() in
+/* Publication masthead inside the preview, matching masthead() in
    src/emails/system.ts (logo beside name + tagline, over a hairline rule). Light
    literals here; the dark @media block below carries the dark overrides. */
 .set-ce-mast {
@@ -5638,8 +5677,6 @@ button.set-field-remove {
   color: #ffffff;
   border-radius: 6px;
   text-decoration: none;
-  font-size: 15px;
-  font-weight: 500;
 }
 .set-ce-foot {
   color: #71717a;
@@ -5660,17 +5697,15 @@ button.set-field-remove {
 .set-ce-editfoot .grow {
   flex: 1;
 }
-/* Dark rendering of the preview card — the email's dark palette (the reader card pages'
-   tokens: page #18181b, card #232327, ink #ededed, muted #a1a1aa, rule #2e2e33, accent
-   button #e5e7eb/#18181b), matching the `prefers-color-scheme` block in
-   src/emails/system.ts. Overrides only the card literals; the edit body + chrome around
-   it already theme via the --* tokens. */
+/* Dark rendering of the preview: the email's dark palette (page #18181b, ink #ededed,
+   muted #a1a1aa, rule #2e2e33, accent button #e5e7eb/#18181b), matching the
+   `prefers-color-scheme` block in src/emails/system.ts. Overrides only the preview's
+   literals; the edit body + chrome around it already theme via the --* tokens. */
 @media (prefers-color-scheme: dark) {
   .set-ce-stage {
     background: #18181b;
   }
-  .set-ce-card {
-    background: #232327;
+  .set-ce-col {
     color: #ededed;
   }
   .set-ce-mast {