@specbook/ui 0.2.0 → 0.4.0

package/src/styles/app.css

@@ -146,6 +146,8 @@
   .list-col {
     min-height: 0;
     overflow: auto;
+    /* folding a group changes how tall the list is: keep the scrollbar's space, so the list does not widen and narrow */
+    scrollbar-gutter: stable;
     /* scrolling to the end of the list must not drag the whole page along */
     overscroll-behavior: contain;
     padding: var(--sb-space-3);
@@ -287,6 +289,37 @@
     font-size: 15px;
     outline: none;
   }
+  /* New environment: a small form in the palette's frame, above a docked panel and the settings popover */
+  .newenv-backdrop {
+    z-index: 60;
+  }
+  .newenv {
+    /* the palette stretches to fill its height; a short form should not */
+    align-self: flex-start;
+  }
+  .newenv form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sb-space-2);
+    padding: var(--sb-space-4);
+  }
+  .newenv h2 {
+    margin: 0;
+    font-size: 15px;
+  }
+  .newenv label {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .newenv input,
+  .newenv select {
+    border: 1px solid var(--sb-border);
+    border-radius: var(--sb-radius-control);
+    padding: 8px 10px;
+    /* 16px, so iOS does not zoom the page when a field is focused */
+    font-size: 16px;
+  }
   .palette ul {
     list-style: none;
     margin: 0;
@@ -427,7 +460,11 @@
     padding: var(--sb-space-3) 0 0;
     border-top: 1px solid var(--sb-border);
   }
+  /* the tick says it passed; the sentence is muted, so a list of checks reads calmly and a failure stands out */
   .checks .ok {
+    color: var(--sb-text-muted);
+  }
+  .checks .ok .tick {
     color: var(--sb-success);
   }
   .checks .bad {
@@ -647,6 +684,19 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+    /* room for it: a name of ordinary length stays whole and the search field gives way instead, while a
+       longer one still ends in an ellipsis. Narrower than this only the logo is left. */
+    @media (min-width: 360px) {
+      .brand {
+        flex: 0 0 auto;
+      }
+      .brand-name {
+        max-width: 9ch;
+      }
+      .header .palette-btn {
+        min-width: 64px;
+      }
+    }
     .palette-btn {
       flex: 1;
       min-width: 0;
@@ -657,7 +707,7 @@
       white-space: nowrap;
     }
     .palette-btn kbd,
-    .header .spacer {
+    .header > .spacer {
       display: none;
     }
     .header .menu-btn {
@@ -693,12 +743,37 @@
       justify-content: space-between;
       flex-wrap: nowrap;
     }
-    .header-controls select {
-      min-width: 140px;
+    /* every labelled control in the menu: the label to the left, the control the same width on the right */
+    .header-controls .row > select {
+      flex: 0 0 56%;
+      width: 56%;
+      min-width: 0;
+    }
+    /* Synthetic data is a row inside a row (its label and, once fixed, a seed field): the inner one fills it */
+    .header-controls .row > .row {
+      flex: 1 1 100%;
+    }
+    .header-controls .row.muted {
+      flex-wrap: wrap;
+    }
+    .header-controls .seed-input {
+      flex: 0 0 56%;
+      margin-left: auto;
+    }
+    .header-controls .envmenu,
+    .header-controls .envmenu-btn {
+      width: 100%;
+    }
+    .header-controls .envmenu-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--sb-space-2);
     }
     /* in the menu there is room for the words, and each link is a full row */
     .header-controls .gh-label,
-    .header-controls .share-label {
+    .header-controls .share-label,
+    .header-controls .envmenu-label {
       display: inline;
     }
     .header-controls .gh-star,
@@ -800,10 +875,11 @@
     min-width: 120px;
     max-width: 360px;
   }
-  /* GitHub and Share keep their icons and lose their words where the header is tight */
+  /* GitHub, Share and Environment settings keep their icons and lose their words where the header is tight */
   @media (max-width: 1360px) {
     .gh-label,
-    .share-label {
+    .share-label,
+    .envmenu-label {
       display: none;
     }
   }

package/src/styles/embed.css

@@ -0,0 +1,116 @@
+/*
+ * How the panel sits on someone else's page. Unlayered on purpose: it must beat the app's layered rules (the full-screen
+ * phone sheet, the sheet from the right) which this presentation replaces.
+ */
+
+/* the browser's top layer when it has one (so no host z-index can cover the panel), else a very high fixed box */
+.sb-top {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: visible;
+  background: transparent;
+  color: inherit;
+}
+.sb-top.sb-fallback {
+  z-index: 2147483000;
+}
+.sb-top[hidden] {
+  display: none;
+}
+
+.panel-backdrop {
+  backdrop-filter: blur(2px);
+}
+
+/* desktop: a centered dialog */
+.panel.popover {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  width: min(880px, calc(100vw - 48px));
+  min-width: 0;
+  height: min(86vh, 780px);
+  overflow: hidden;
+  border: 1px solid var(--sb-border);
+  border-radius: 14px;
+  box-shadow:
+    0 24px 64px color-mix(in srgb, black 35%, transparent),
+    0 2px 8px color-mix(in srgb, black 20%, transparent);
+  animation: sb-popover-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+@keyframes sb-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+}
+@keyframes sb-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(24px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .panel.popover {
+    animation: none;
+  }
+}
+
+/* phone: a sheet from the bottom, with a handle, clear of the notch and the home bar */
+@media (max-width: 820px) {
+  .panel.popover {
+    inset: auto 0 0 0;
+    margin: 0;
+    width: 100%;
+    height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 12px));
+    border-width: 1px 0 0;
+    border-radius: 16px 16px 0 0;
+    padding-bottom: env(safe-area-inset-bottom, 0px);
+    animation-name: sb-sheet-in;
+  }
+  .panel.popover::before {
+    content: "";
+    flex: none;
+    width: 36px;
+    height: 4px;
+    margin: 8px auto 0;
+    border-radius: 2px;
+    background: var(--sb-border);
+  }
+}
+
+/* a finger, not a pointer: the controls of the header are comfortable targets */
+@media (pointer: coarse) {
+  .panel.popover .panel-head .icon {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.embed-problem {
+  margin: var(--sb-space-4);
+  color: var(--sb-text);
+}
+
+/* what the page's attributes asked for that could not be done, over the foot of the panel */
+.embed-banner {
+  position: fixed;
+  left: 50%;
+  bottom: 12px;
+  transform: translateX(-50%);
+  z-index: 22;
+  max-width: min(640px, calc(100vw - 24px));
+  padding: 6px 12px;
+  border: 1px solid var(--sb-border);
+  border-radius: 8px;
+  background: var(--sb-surface-raised, var(--sb-surface));
+  color: var(--sb-text);
+  font-size: 13px;
+}

package/src/styles/panel.css

@@ -377,6 +377,46 @@
     gap: var(--sb-space-2);
     padding: 8px;
   }
+  .panel-error {
+    margin: var(--sb-space-4);
+    padding: var(--sb-space-4);
+    border: 1px solid var(--sb-border);
+    border-left: 3px solid var(--sb-danger, #dc2626);
+    border-radius: var(--sb-radius-card);
+    background: var(--sb-surface);
+  }
+  .panel-error pre {
+    margin: var(--sb-space-2) 0 var(--sb-space-3);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    font: 12px var(--sb-font-mono);
+    color: var(--sb-text-muted);
+  }
+  button.flows-title {
+    width: 100%;
+    border: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+  @media (pointer: coarse) {
+    button.flows-title {
+      min-height: 44px;
+    }
+  }
+  button.flows-title:hover {
+    background: var(--sb-surface-raised);
+  }
+  button.flows-title:focus-visible {
+    outline: 2px solid var(--sb-focus-ring);
+    outline-offset: -2px;
+  }
+  .flows-title .caret {
+    width: 1em;
+    color: var(--sb-text-muted);
+  }
   .flows-title .count {
     margin-left: auto;
     font-size: 12px;
@@ -390,6 +430,20 @@
   .flows .op-row:last-child {
     border-bottom: 0;
   }
+  /* saved requests: the same block as flows, in the neutral border colour, so flows stay the one accent */
+  .flows.requests {
+    border-color: var(--sb-border);
+    border-left-color: var(--sb-text-muted);
+    background: var(--sb-surface-raised);
+  }
+  .method.req {
+    color: var(--sb-text-muted);
+  }
+  .req-tag {
+    margin-left: 6px;
+    font-size: 11px;
+    font-weight: 500;
+  }
   .flow-play {
     font-size: 10px;
     text-align: center;
@@ -970,6 +1024,99 @@
     border: 0;
   }
 
+  /* ---- a failed check: what was expected, what came back, as a colored diff */
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .checks .bad {
+    margin-top: var(--sb-space-2);
+    color: inherit;
+  }
+  .check-fail {
+    display: grid;
+    gap: var(--sb-space-2);
+    margin: 0;
+    min-width: 0;
+    padding: var(--sb-space-3);
+    border: 1px solid color-mix(in srgb, var(--sb-danger) 35%, var(--sb-border));
+    border-left: 3px solid var(--sb-danger);
+    border-radius: var(--sb-radius-control);
+    background: color-mix(in srgb, var(--sb-danger) 5%, var(--sb-surface));
+  }
+  .check-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sb-space-2);
+    color: var(--sb-danger);
+  }
+  .check-head strong {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .diff-legend {
+    display: flex;
+    gap: var(--sb-space-3);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .diff-key.diff-expected,
+  .diff-line.diff-expected {
+    color: var(--sb-success);
+  }
+  .diff-key.diff-received,
+  .diff-line.diff-received {
+    color: var(--sb-danger);
+  }
+  .diff {
+    margin: 0;
+    padding: var(--sb-space-2) 0;
+    white-space: pre;
+    max-height: 18em;
+    overflow: auto;
+    border-radius: var(--sb-radius-control);
+    background: var(--sb-surface);
+    border: 1px solid var(--sb-border);
+    font: 12.5px / 1.5 var(--sb-font-mono);
+  }
+  .diff-line {
+    display: flex;
+    min-width: max-content;
+    padding: 0 var(--sb-space-3) 0 0;
+  }
+  .diff-line.diff-expected {
+    background: var(--sb-success-subtle);
+  }
+  .diff-line.diff-received {
+    background: var(--sb-danger-subtle);
+  }
+  .diff-line.diff-same {
+    color: var(--sb-text-muted);
+  }
+  .diff-line.diff-skip {
+    color: var(--sb-text-muted);
+    font-style: italic;
+  }
+  .diff-gutter {
+    flex: none;
+    width: 2em;
+    text-align: center;
+    user-select: none;
+  }
+  .diff-text {
+    white-space: pre;
+  }
+  .check-where {
+    font: 12px var(--sb-font-mono);
+    color: var(--sb-text-muted);
+    overflow-wrap: anywhere;
+  }
+
   /* ---- shared small controls */
   .link {
     background: none;
@@ -1462,6 +1609,66 @@
       width: 60%;
     }
   }
+  .controls-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sb-space-2);
+  }
+  .controls-head .gen-all {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    text-transform: none;
+    letter-spacing: 0;
+    font-size: 12px;
+    padding: 4px 10px;
+  }
+  /* a value with a generator: the cell and the button that makes another, never wider than the column */
+  .cell-gen {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-width: 0;
+  }
+  .cell-gen > :first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  .cell-gen .cell {
+    width: 100%;
+    min-width: 0;
+  }
+  .gen {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    margin-right: 4px;
+    padding: 0;
+    color: var(--sb-text-muted);
+    background: transparent;
+    border: 1px solid var(--sb-border);
+    border-radius: var(--sb-radius-control);
+    cursor: pointer;
+  }
+  .gen:hover,
+  .gen:focus-visible {
+    color: var(--sb-accent);
+    border-color: var(--sb-accent);
+  }
+  /* a finger, not a pointer: the button is a comfortable target */
+  @media (pointer: coarse) {
+    .gen {
+      width: 44px;
+      height: 44px;
+    }
+    .controls-head .gen-all {
+      min-height: 44px;
+    }
+  }
   .multi-cell {
     display: flex;
     flex-wrap: wrap;
@@ -1578,6 +1785,8 @@
     max-height: min(70vh, 640px);
     overflow: auto;
     display: grid;
+    /* one column that cannot outgrow the popover: Safari sizes an auto track to its widest field */
+    grid-template-columns: minmax(0, 1fr);
     gap: var(--sb-space-3);
     padding: var(--sb-space-3) var(--sb-space-4);
     background: var(--sb-surface);
@@ -1651,6 +1860,23 @@
     background: var(--sb-danger-subtle);
     color: var(--sb-danger);
   }
+  /* a variable's value, where it comes from */
+  .envrow .src {
+    flex: none;
+    padding: 0 8px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+  }
+  .src.inherited {
+    background: var(--sb-surface-raised);
+    color: var(--sb-text-muted);
+  }
+  .envuse {
+    margin: -2px 0 var(--sb-space-2);
+    padding-left: 2px;
+    overflow-wrap: anywhere;
+  }
   .op-lock {
     display: inline-block;
     margin-left: 6px;
@@ -1745,12 +1971,10 @@
     .panel-head .spacer {
       display: none;
     }
-    .panel-head label.row > .muted {
+    /* the Environment badge in the panel is the one switch on a phone: a bare, unlabeled copy here only confuses */
+    .panel-head label.row {
       display: none;
     }
-    .panel-head select {
-      max-width: 34%;
-    }
     .stepper {
       gap: 0;
     }
@@ -1805,6 +2029,13 @@
     .envrow {
       flex-wrap: wrap;
     }
+    /* a variable: its name above, then the value (an address needs the room) beside its source */
+    .envrow code {
+      flex: 1 0 100%;
+    }
+    .envrow input {
+      flex: 1 1 0;
+    }
     .envrow input,
     .envrow select {
       min-width: 0;

package/src/viewer/embed.ts

@@ -7,7 +7,8 @@
  *   <script type="module" src="https://ui.specbook.dev/v1/specbook.js"></script>
  *
  * The script takes the page over (it owns the document, as `/docs` does). `spec` may be relative.
- * `baseUrl` gives the API address when the document has none, `target` names another container.
+ * `baseUrl` gives the API address when the document has none, `target` names another container, and
+ * `defaultEnv` (`"live"` or the name of a server) picks the environment shown first instead of `mock`.
  */
 import { handleOAuthCallback } from '../oauth-callback'
 import { SpecWorker } from './client'
@@ -17,6 +18,7 @@ interface EmbedConfig {
   spec?: string
   baseUrl?: string
   target?: string
+  defaultEnv?: string
 }
 
 function readConfig(): EmbedConfig {
@@ -29,7 +31,11 @@ function readConfig(): EmbedConfig {
     }
   }
   const script = document.querySelector<HTMLScriptElement>('script[src$="specbook.js"][data-spec]')
-  return { spec: script?.dataset.spec, baseUrl: script?.dataset.baseUrl }
+  return {
+    spec: script?.dataset.spec,
+    baseUrl: script?.dataset.baseUrl,
+    defaultEnv: script?.dataset.defaultEnv,
+  }
 }
 
 function container(sel?: string): HTMLElement {
@@ -72,6 +78,7 @@ async function start() {
       worker,
       source: { kind: 'url', url },
       baseUrl: cfg.baseUrl,
+      defaultEnv: typeof cfg.defaultEnv === 'string' ? cfg.defaultEnv : undefined,
       shareable: false,
       setTitle: false,
     })

package/src/viewer/manifests.ts

@@ -0,0 +1,2 @@
+// The viewer's registry has its one manifest from the start; there is nothing to fill in.
+export {}

package/src/viewer/mount.ts

@@ -12,6 +12,7 @@ export async function mountOpened(o: {
   worker: SpecWorker
   source: Source
   baseUrl?: string
+  defaultEnv?: string
   shareable?: boolean
   setTitle?: boolean
 }): Promise<void> {
@@ -19,6 +20,7 @@ export async function mountOpened(o: {
   const g: ViewerGlobal = {
     open: o.result,
     baseUrl: o.baseUrl,
+    defaultEnv: o.defaultEnv,
     source:
       o.shareable === false
         ? undefined

package/src/viewer/protocol.ts

@@ -25,6 +25,12 @@ export interface OpenResult {
   auth: Record<string, AuthProfileLike>
   secrets: Record<string, Record<string, never>>
   defaultProfile?: string
+  /**
+   * Sign-in addresses the document gives relative to its servers, as variables: the values for `live`,
+   * and per other environment. The profiles in `auth` read them as `{{name}}`.
+   */
+  authVars: Record<string, string>
+  authEnvironmentVars: Record<string, Record<string, string>>
   /** absolute API address, from `servers` (resolved against the spec URL) or `host` */
   baseUrl?: string
   /** every usable server the document lists, as environments; the first is `live` */