@kurtbruns/kestrel 1.18.0 → 1.20.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=56492b07">
+<link rel="stylesheet" href="./styles.css?v=00bc34db">
 <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=e16b1474"></script>
+<script src="./app.js?v=0af2b352"></script>
 </body>
 </html>

package/dist/public/dashboard/styles.css

@@ -4767,47 +4767,149 @@ button.copy-btn.api-copy-path {
 }
 
 /* Setup steps: the first-run checklist, and the regular dashboard's Finish setting up card
-   (one component, two layouts). The card is the compact one. */
+   (one component, two layouts). The card is the compact one. Finished steps fold into one
+   line above the list, behind a solid check; each step left carries a small ring beside its
+   title that says where it stands: plain to take, dashed while AWS has it, dotted while it
+   waits on another step, solid red while a problem above is in its way. */
 .setup-title {
   margin-top: 0;
 }
+/* The done steps' toggle: one "N done" line that shows them in place in the list, and hides
+   them again. A plain text control, so it reads as a line of the card, not a button. */
+.setup-fold {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  margin: 10px 0 2px;
+  padding: 2px;
+  border: 0;
+  background: none;
+  color: var(--fg);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 6px;
+}
+.setup-fold:hover {
+  background: none;
+  color: var(--fg);
+}
+.setup-fold:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+/* A chevron that points down while the done steps are hidden and up while they show. */
+.setup-fold::after {
+  content: "";
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -4px;
+  border-right: 1.5px solid var(--muted);
+  border-bottom: 1.5px solid var(--muted);
+  transform: rotate(45deg);
+}
+.setup-fold[aria-expanded="true"]::after {
+  margin-top: 3px;
+  transform: rotate(-135deg);
+}
 .setup-steps {
   list-style: none;
-  counter-reset: step;
   margin: 8px 0 0;
   padding: 0;
 }
+/* Every row is as tall as one with a button, so a row with only a title, or no control, doesn't
+   read as squeezed beside its neighbours. */
 .setup-steps li {
-  counter-increment: step;
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 12px;
+  min-height: 59px;
+  box-sizing: border-box;
   padding: 12px 2px;
   border-top: 1px solid var(--line);
 }
 .setup-steps li:first-child {
   border-top: 0;
 }
+/* The mark: beside the title's first line, whatever the hint below it. */
+.setup-fold-mark,
 .setup-steps li::before {
-  content: counter(step);
   flex: 0 0 auto;
-  width: 26px;
-  height: 26px;
+  align-self: flex-start;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 999px;
-  border: 1px solid var(--line);
-  color: var(--muted);
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 1;
 }
-/* A step already done (the list has subscribers): a check in place of its number. */
+.setup-fold-mark {
+  margin-top: 0;
+  align-self: center;
+}
+.setup-steps li::before {
+  content: "";
+  border: 1.5px solid var(--muted);
+}
+/* A step with only a title: the mark sits level with it, as the title does with its button. */
+.setup-steps li:not(:has(.setup-hint))::before {
+  align-self: center;
+  margin-top: 0;
+}
+/* Done: a solid check, in the fold's line and on each step it opens to. */
+.setup-fold-mark,
 .setup-steps li.setup-done::before {
   content: "✓";
-  color: var(--ok-fg);
-  border-color: var(--ok-line);
-  background: var(--ok-bg);
+  border: 0;
+  background: var(--ok-fg);
+  color: var(--card);
+}
+/* Waiting on AWS, not on the publisher. */
+.setup-steps li.setup-waiting::before {
+  border-style: dashed;
+  border-color: var(--accent);
+}
+/* Can't be taken until an earlier step is: muted, its hint the step it waits for. Its ring is
+   ten even dashes drawn by an SVG mask over the muted color, since a dotted border this small
+   renders as faint specks that vary with the screen. */
+.setup-steps li.setup-blocked::before {
+  border: 0;
+  background: var(--muted);
+  -webkit-mask:
+    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7.25' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='2.4 2.155'/></svg>")
+    center / 100% 100% no-repeat;
+  mask:
+    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7.25' fill='none' stroke='black' stroke-width='1.5' stroke-dasharray='2.4 2.155'/></svg>")
+    center / 100% 100% no-repeat;
+}
+.setup-steps li.setup-blocked strong {
+  color: var(--muted);
+  font-weight: 500;
+}
+/* A problem the health block states is in its way. */
+.setup-steps li.setup-attention::before {
+  content: "!";
+  color: var(--danger-on);
+  background: var(--danger-fg);
+  border-color: var(--danger-fg);
+}
+.setup-steps li.setup-attention .setup-hint {
+  color: var(--danger-fg);
+}
+/* A failed notification is an amber health line, so the step pointing at it is amber too. */
+.setup-steps li.setup-notify.setup-attention::before {
+  background: var(--warn-fg);
+  border-color: var(--warn-fg);
+  color: var(--card);
+}
+.setup-steps li.setup-notify.setup-attention .setup-hint {
+  color: var(--warn-fg);
 }
 .setup-step-main {
   flex: 1 1 auto;
@@ -4845,15 +4947,15 @@ button.copy-btn.api-copy-path {
 }
 .setup-card .setup-title {
   font-size: 16px;
+  margin-bottom: 4px;
+}
+.setup-note {
+  margin: 0;
 }
 .setup-card .setup-steps li {
+  min-height: 51px;
   padding: 8px 2px;
 }
-.setup-card .setup-steps li::before {
-  width: 22px;
-  height: 22px;
-  font-size: 12px;
-}
 
 /* ============================================================
    Settings page. Grouped by intent, made visible: each section
@@ -5348,7 +5450,11 @@ button.set-field-remove {
 .settings .set-warn {
   color: var(--warn-fg);
 }
-/* A notification channel that has stopped delivering: the one red in the settings reflection. */
+/* A provider warning that stops every email: red, beside the amber ones (DESIGN §8). */
+.settings .set-error {
+  color: var(--danger-fg);
+}
+/* A notification channel that has stopped delivering: red in the settings reflection. */
 .set-pill.danger {
   background: var(--danger-bg);
   color: var(--danger-fg);