@kurtbruns/kestrel 1.20.0 → 1.22.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=102ce128">
 <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=867db6b1"></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 {
@@ -4314,24 +4336,33 @@ button.api-filter-clear svg {
   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 {
+   margin to its left while it is hovered or focused, as GitHub's headings show theirs. The
+   API reference's headings and the Settings sections' titles wear the same. The icon's padding
+   runs its box up to the text, so moving between the two never leaves the link: no gap for the
+   cursor to change in or the icon to vanish in. */
+a.api-self,
+a.set-sec-link {
   position: relative;
   color: inherit;
   text-decoration: none;
 }
-a.api-self svg {
+a.api-self svg,
+a.set-sec-link svg {
   position: absolute;
   left: -20px;
   top: 50%;
-  width: 14px;
+  box-sizing: border-box;
+  width: 20px;
   height: 14px;
+  padding-right: 6px;
   transform: translateY(-50%);
-  color: var(--muted);
+  fill: var(--muted);
   opacity: 0;
 }
 a.api-self:hover svg,
-a.api-self:focus-visible svg {
+a.api-self:focus-visible svg,
+a.set-sec-link:hover svg,
+a.set-sec-link:focus-visible svg {
   opacity: 1;
 }
 .api-op-call {
@@ -4992,20 +5023,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 +5058,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 +5137,20 @@ 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;
+  }
+  /* The page's gutter here is narrower than the link icon's place in the margin. */
+  a.set-sec-link svg {
+    left: -15px;
+    width: 15px;
+    height: 12px;
+    padding-right: 3px;
+  }
 }
 .set-sec-title {
   margin: 0;
@@ -5234,6 +5263,7 @@ button.copied svg {
   min-width: 0;
 }
 .set-logo-tile {
+  position: relative;
   width: 100%;
   aspect-ratio: 1;
   border-radius: 10px;
@@ -5253,6 +5283,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 +5572,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 +5693,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 +5713,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 {
@@ -6218,9 +6269,8 @@ button.set-embed-copy svg {
    here — only safe container defaults. */
 /* The sample email renders in an isolated <iframe> — so the template's own <style>
    block applies exactly as it would in a mail client and can't leak into the
-   dashboard, and the reading measure is constrained to the email column
-   (~640px, matching the view-in-browser render). Its height is sized to content
-   from script. */
+   dashboard, and the document inside draws the email's page and column. Its height
+   is sized to content from script. */
 .set-email-frame {
   display: block;
   width: 100%;
@@ -6230,19 +6280,42 @@ button.set-embed-copy svg {
 }
 
 /* --- Template page: sample-email header actions, dropdown, variables --- */
+/* The bar stays one row at every width: the titles wrap beside the controls, and the toggle
+   gives way in the two steps below, so narrowing the pane changes the layout only there. */
+.set-tpl-sample {
+  container-type: inline-size;
+}
+/* A tablet's pane: the toggle keeps its use, since Phone still looks different, but only its
+   icons, so the bar stays one row. */
+@container (max-width: 640px) {
+  .set-tpl-sample .wtog-lbl {
+    display: none;
+  }
+}
+/* A pane this narrow is close to a phone's width already, so Desktop and Phone would look
+   alike, and the toggle goes. */
+@container (max-width: 480px) {
+  .set-tpl-sample .set-wtog {
+    display: none;
+  }
+  .set-email-stage .set-email-frame.phone {
+    max-width: 100%;
+  }
+}
 .set-preview-titles {
   display: flex;
+  flex: 1 1 0;
   flex-direction: column;
   gap: 1px;
   min-width: 0;
 }
 .set-preview-actions {
   display: flex;
+  flex: 0 0 auto;
   align-items: center;
   gap: 8px;
-  flex-wrap: wrap;
 }
-/* Preview width toggle (640 / 375) — proof both inbox measures; 640 is the default. */
+/* Preview width toggle — proof both inbox measures; Desktop is the default. */
 .set-wtog {
   display: inline-flex;
   gap: 2px;
@@ -6344,25 +6417,27 @@ button.set-embed-copy svg {
 .set-req-pill.bad .dot {
   background: var(--danger-fg);
 }
-/* The sample email sits on a sunken stage so the (width-capped) email card reads as a
-   message on a surface; the width toggle sets its max-width. */
+/* The sample email fills its pane, as a post's Preview does, since an email arrives as a page
+   and not as a card on a surface. So the stage shows only beside the width toggle's Phone, where
+   its color says the frame ends there. --chip, since --sunken is all but the email's own page
+   in dark mode. */
 .set-email-stage {
   display: flex;
   justify-content: center;
-  padding: 16px;
-  background: var(--sunken);
+  background: var(--chip);
 }
 .set-email-stage .set-email-frame {
   width: 100%;
-  max-width: 640px;
+  max-width: 100%;
   /* Floor the auto-sized frame at the default template's height, so emptying or
      shortening the template doesn't collapse the preview and yank the page scroll
-     (the frame can still grow taller for a longer template or the 375 measure). */
-  min-height: 392px;
-  border-radius: 6px;
-  box-shadow: 0 1px 4px rgba(15, 18, 25, 0.1);
+     (the frame can still grow taller for a longer template or the Phone measure). */
+  min-height: 452px;
   transition: max-width 0.16s ease;
 }
+.set-email-stage .set-email-frame.phone {
+  max-width: 375px;
+}
 /* "Start from example": the trigger of a shared menu (openMenu). */
 .set-menu-btn {
   display: inline-flex;
@@ -6574,12 +6649,14 @@ button.set-embed-copy svg {
 .set-rp .set-wtog {
   flex: 0 0 auto;
 }
-.set-rp .wtog-btn {
+.set-rp .wtog-btn,
+.set-tpl-sample .wtog-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
 }
-.set-rp .wtog-btn svg {
+.set-rp .wtog-btn svg,
+.set-tpl-sample .wtog-btn svg {
   width: 13px;
   height: 13px;
 }