@seams/voice-capture 0.68.0 → 0.69.0

package/dist/esm/card/index.js

@@ -1,5 +1,5 @@
 import { PhraseCard } from "./phraseCard.js";
-import { t as VoiceVisual } from "../chunks/visual-Di3ojTED.js";
+import { t as VoiceVisual } from "../chunks/visual-DU1OVwCA.js";
 import { VoiceRibbon } from "./ribbon.js";
 import { VoicePrompt, leaveSurface } from "./prompt.js";
 import { openPhraseCard } from "./surface.js";

package/dist/esm/card/phraseCard.js

@@ -229,7 +229,7 @@ var PhraseCard = class {
 			duration: RIBBON_MOVE_MS,
 			easing: EASE_MOVE
 		});
-		for (const [index, element] of changed.entries()) fadeIn(element, this.motion.matches, 20 + index * 30);
+		for (const [index, element] of changed.entries()) fadeIn(element, this.motion.matches, 0 + index * 20);
 	}
 	markedText(text) {
 		if (typeof text === "string") return [text];
@@ -444,7 +444,7 @@ function fadeIn(element, reduced, delay) {
 		transform: "none"
 	}], {
 		delay: reduced ? 0 : delay,
-		duration: reduced ? 150 : 200,
+		duration: reduced ? 150 : 140,
 		easing: ROW_EASE,
 		fill: "both"
 	});

package/dist/esm/card/prompt.js

@@ -1,7 +1,7 @@
 import { styleNonce } from "../config.js";
 import { useSystemVoiceMicrophone } from "../microphoneInput.js";
 import { ROW_EASE } from "./rowMotion.js";
-import { t as VoiceVisual } from "../chunks/visual-Di3ojTED.js";
+import { t as VoiceVisual } from "../chunks/visual-DU1OVwCA.js";
 //#region src/card/prompt.ts
 const CSS = `
 .seams-voiceid-activation-surface { width: min(100%, 26.25rem); margin: 0 auto; background: transparent; }
@@ -22,7 +22,9 @@ const CSS = `
   margin: 0 auto;
   padding: 3.5rem 1.5rem 1.5rem;
   display: grid;
-  grid-template-rows: auto minmax(6rem, auto) 5rem minmax(3.375rem, auto) minmax(5rem, auto);
+  /* Named rows. The context row is empty (0 high) unless the card shows the text that its sentence
+     speaks for. A host that sets its own rows keeps these names. */
+  grid-template-rows: [context] auto [title] auto [phrase] minmax(6rem, auto) [line] 5rem [status] minmax(3.375rem, auto) [action] minmax(5rem, auto);
   border: 1px solid var(--seams-colors-borderPrimary, #303b41);
   border-radius: var(--seams-shape-card, 16px);
   background: var(--seams-colors-colorBackground, #192024);
@@ -54,12 +56,14 @@ const CSS = `
 }
 /* A card that holds focus itself (until its first control is ready, or after a confirm). */
 .seams-voiceid-prompt[tabindex="-1"]:focus { outline: none; }
-/* Each line owns its row. The download overlays rows 3-5; an auto-placed line would move to new rows. */
-.seams-voiceid-prompt > h2 { grid-area: 1 / 1; }
-.seams-voiceid-prompt > .seams-voiceid-phrase { grid-area: 2 / 1; }
-.seams-voiceid-prompt > .seams-voiceid-ribbon { grid-area: 3 / 1; }
-.seams-voiceid-prompt > .seams-voiceid-status { grid-area: 4 / 1; }
-.seams-voiceid-progress-slot { grid-row: 5; grid-column: 1; min-width: 0; align-self: center; }
+/* Each line owns its row. The download overlays the rows line, status and action; an auto-placed
+   line would move to new rows. */
+.seams-voiceid-prompt > .seams-voiceid-context { grid-row: context; grid-column: 1; }
+.seams-voiceid-prompt > h2 { grid-row: title; grid-column: 1; }
+.seams-voiceid-prompt > .seams-voiceid-phrase { grid-row: phrase; grid-column: 1; }
+.seams-voiceid-prompt > .seams-voiceid-ribbon { grid-row: line; grid-column: 1; }
+.seams-voiceid-prompt > .seams-voiceid-status { grid-row: status; grid-column: 1; }
+.seams-voiceid-progress-slot { grid-row: action; grid-column: 1; min-width: 0; align-self: center; }
 .seams-voiceid-progress-slot:empty { visibility: hidden; }
 .seams-voiceid-activation-surface .seams-voiceid-record-slot { transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1) 80ms, visibility 0s linear 0s; }
 .seams-voiceid-activation-surface[data-preparation="loading"] .seams-voiceid-record-slot { opacity: 0; visibility: hidden; transition: none; }
@@ -255,6 +259,23 @@ const CSS = `
   overflow: visible;
 }
 .seams-voiceid-ribbon .seams-voiceid-ribbon-check { stroke: var(--seams-colors-colorBackground, #192024); }
+/* The theme can colour the voice line (with its ring and its seal) and its three echo lines,
+   and set their widths. With none of these values, the line has the card's text colour. */
+.seams-voiceid-ribbon { color: var(--seams-colors-voiceLine, currentColor); }
+.seams-voiceid-ribbon .seams-voiceid-ribbon-line { stroke-width: var(--seams-shape-voiceLineWidth, 1px); }
+.seams-voiceid-ribbon .seams-voiceid-ribbon-echo {
+  stroke-width: var(--seams-shape-voiceEchoWidth, 0.65px);
+  color: var(--seams-colors-voiceEcho, var(--seams-colors-voiceLine, currentColor));
+}
+.seams-voiceid-ribbon .seams-voiceid-ribbon-echo[data-layer="2"] {
+  color: var(--seams-colors-voiceEchoDeep, var(--seams-colors-voiceEcho, var(--seams-colors-voiceLine, currentColor)));
+}
+/* The pixel style (voiceLine: 'pixels'): dots in X blue tones by default, the lightest in the
+   middle row. The theme colours the three bands: voiceEcho (the middle row), voiceLine (rows
+   1 and 2 from it) and voiceEchoDeep (rows 3 and 4). */
+.seams-voiceid-ribbon-pixel { fill: var(--seams-colors-voiceEchoDeep, #1a6fb0); }
+.seams-voiceid-ribbon-pixel[data-band="1"] { fill: var(--seams-colors-voiceLine, #1d9bf0); }
+.seams-voiceid-ribbon-pixel[data-band="0"] { fill: var(--seams-colors-voiceEcho, #8ecdf8); }
 .seams-voiceid-prompt .seams-voiceid-phrase.seams-voiceid-success-headline {
   display: grid;
   align-content: end;
@@ -302,8 +323,10 @@ const CSS = `
   right: auto;
   left: 0.75rem;
 }
+/* Minimize sits beside Close, in the trailing corner: one button width and a small gap in. */
+.seams-voiceid-prompt .seams-voiceid-close.seams-voiceid-minimize { right: 3.375rem; }
 .seams-voiceid-prompt .seams-voiceid-record-slot {
-  grid-row: 5;
+  grid-row: action;
   grid-column: 1;
   align-self: center;
   width: 100%;
@@ -385,7 +408,7 @@ const CSS = `
 .seams-voiceid-prompt:has(.seams-voiceid-model-download:not([data-state="ready"])) > .seams-voiceid-phrase { opacity: 0.35; }
 .seams-voiceid-prompt:has(.seams-voiceid-model-download[data-state="failed"]) > .seams-voiceid-record-slot { display: none; }
 .seams-voiceid-model-download progress {
-  grid-row: 3;
+  grid-row: line;
   justify-self: center;
   appearance: none;
   display: block;
@@ -403,7 +426,7 @@ const CSS = `
    a looping animation would compete with it on a software-rendered page. */
 .seams-voiceid-model-download progress::-moz-progress-bar { background: var(--seams-colors-textPrimary, #eff2f3); border-radius: 999px; }
 .seams-voiceid-model-download p {
-  grid-row: 4;
+  grid-row: status;
   align-self: start;
   margin: 0;
   font-size: 0.75rem;
@@ -411,9 +434,9 @@ const CSS = `
   color: var(--seams-colors-textSecondary, #9cabb3);
   font-variant-numeric: tabular-nums;
 }
-.seams-voiceid-model-download button { grid-row: 5; }
+.seams-voiceid-model-download button { grid-row: action; }
 /* A phrase card shows its check and its result in the same card. */
-.seams-voiceid-prompt > .seams-voiceid-status-line { grid-area: 3 / 1; }
+.seams-voiceid-prompt > .seams-voiceid-status-line { grid-row: line; grid-column: 1; }
 .seams-voiceid-status-line {
   transition: opacity 120ms ease;
   display: block;
@@ -423,7 +446,9 @@ const CSS = `
   margin: auto;
   overflow: visible;
   opacity: 0;
-  color: var(--seams-colors-textPrimary, #eff2f3);
+  /* The theme can colour the check's line and the seal that it closes into (the disc behind the
+     tick): voiceSeal, else the voice line's colour, else the card's text colour. */
+  color: var(--seams-colors-voiceSeal, var(--seams-colors-voiceLine, var(--seams-colors-textPrimary, #eff2f3)));
 }
 .seams-voiceid-ribbon { transition: opacity 120ms ease; }
 .seams-voiceid-prompt[data-phrase-line="status"] > .seams-voiceid-ribbon { opacity: 0; }
@@ -463,12 +488,29 @@ const CSS = `
 .seams-voiceid-prompt .seams-voiceid-phrase.seams-voiceid-phrase-dim { color: var(--seams-colors-textMuted, #6f7f87); }
 .seams-voiceid-prompt[data-phrase-view] > h2 { min-height: 1.19rem; }
 .seams-voiceid-prompt[data-phrase-view="check"] {
-  grid-template-rows: auto minmax(6rem, auto) 5rem minmax(3.375rem, auto) 0;
+  grid-template-rows: [context] auto [title] auto [phrase] minmax(6rem, auto) [line] 5rem [status] minmax(3.375rem, auto) [action] 0;
 }
 .seams-voiceid-prompt[data-phrase-view="check"] .seams-voiceid-record-slot { display: none; }
+/* A card that records by itself (autoStart) has no Record row: its rows sit in the middle. */
+.seams-voiceid-prompt[data-auto-start] {
+  grid-template-rows: [context] auto [title] auto [phrase] minmax(6rem, auto) [line] 5rem [status] minmax(3.375rem, auto) [action] 0;
+}
+.seams-voiceid-prompt[data-auto-start] > .seams-voiceid-record-slot { display: none; }
+/* The result reads from the top as one group: the seal, the headline under it, the caption and
+   the detail, then the button. Every row has its content's height, so the card has no empty
+   band, and the line row glides to its new place (phraseCard.ts transition). An empty label
+   takes no room. */
+.seams-voiceid-prompt[data-phrase-view="result"] {
+  grid-template-rows: [context] auto [title] auto [line] 4.5rem [phrase] auto [status] auto [action] auto;
+}
+.seams-voiceid-prompt[data-phrase-view="result"] > h2:empty { display: none; }
+.seams-voiceid-prompt[data-phrase-view="result"] > .seams-voiceid-phrase { margin-top: 0.5rem; }
+.seams-voiceid-prompt[data-phrase-view="result"] > .seams-voiceid-status { min-height: 0; margin-top: 0.375rem; }
+.seams-voiceid-prompt[data-phrase-view="result"] > .seams-voiceid-record-slot { margin-top: 1.5rem; }
 .seams-voiceid-prompt[data-phrase-view] .seams-voiceid-microphone { display: none; }
 .seams-voiceid-prompt .seams-voiceid-close { transition: opacity 150ms ease, visibility 0s linear 0s; }
-.seams-voiceid-prompt[data-phrase-view="check"] .seams-voiceid-close {
+/* The check hides Back and Close, as the caller works; Minimize stays. */
+.seams-voiceid-prompt[data-phrase-view="check"] .seams-voiceid-close:not(.seams-voiceid-minimize) {
   opacity: 0;
   visibility: hidden;
   transition: opacity 150ms ease, visibility 0s linear 150ms;
@@ -505,6 +547,213 @@ const CSS = `
 @media (prefers-reduced-motion: reduce) {
   .seams-voiceid-status-line rect { animation: none !important; transition: none; }
 }
+/* The note layout: a card with a context, in the shape of a form. The context (a note) sits
+   in a soft box under its label, the sentence to read sits centred in a blue box under its own
+   label, and one button right under it changes with the card: Record or the voice line while
+   it records, the check, then the result's action. The status sits at the foot, under the
+   button. */
+.seams-voiceid-prompt[data-context] {
+  grid-template-rows: [context] auto [title] auto [phrase] auto [line] 4.5rem [action] 0 [status] auto;
+  text-align: start;
+  /* The height of the button: 4.5rem as the voice line, with either line style, and 3.5rem as
+     Record or a result's action. The microphone's circle follows it. */
+  --seams-voiceid-button-height: 4.5rem;
+  /* The fill of what the person says: a tint of the main button's colour (voiceFill). */
+  --seams-voiceid-tint: 16%;
+  --seams-voiceid-fill: var(--seams-colors-voiceFill, color-mix(in srgb, var(--seams-colors-buttonBackground, #1d9bf0) var(--seams-voiceid-tint), var(--seams-colors-colorBackground, #192024)));
+}
+/* A form is as wide as an app's dialog for a note: 560 px. */
+.seams-voiceid-activation-surface:has(> .seams-voiceid-prompt[data-context]),
+.seams-voiceid-prompt[data-context] {
+  width: min(100%, 35rem);
+}
+[data-theme="light"] .seams-voiceid-prompt[data-context] { --seams-voiceid-tint: 14%; }
+[data-theme="dark"] .seams-voiceid-prompt[data-context] { --seams-voiceid-tint: 24%; }
+/* A button (Record, Try again, a result's action) takes the place of the voice line. */
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="check"]):has(> .seams-voiceid-record-slot > .seams-voiceid-primary:not([hidden])) {
+  --seams-voiceid-button-height: 3.5rem;
+  grid-template-rows: [context] auto [title] auto [phrase] auto [line] 0 [action] auto [status] auto;
+}
+/* A result's caption and detail read before its button. */
+.seams-voiceid-prompt[data-context][data-phrase-view="result"]:not([data-phrase-view="check"]):has(> .seams-voiceid-record-slot > .seams-voiceid-primary:not([hidden])) {
+  grid-template-rows: [context] auto [title] auto [phrase] auto [status] auto [line] 0 [action] auto;
+}
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="check"]):has(> .seams-voiceid-record-slot > .seams-voiceid-primary:not([hidden])) > :is(.seams-voiceid-ribbon, .seams-voiceid-status-line) {
+  visibility: hidden;
+}
+.seams-voiceid-prompt[data-context] > .seams-voiceid-glow { display: none; }
+/* A line across the card under the context: above it is what the person posts, below it is
+   the voice signature. */
+.seams-voiceid-prompt .seams-voiceid-context {
+  margin: 0 -1.5rem 1.25rem;
+  padding: 0 1.5rem 1.25rem;
+  border: 0;
+  border-bottom: 1px solid var(--seams-colors-borderPrimary, #303b41);
+}
+.seams-voiceid-prompt .seams-voiceid-context-label {
+  display: block;
+  margin-bottom: 0.375rem;
+  color: var(--seams-colors-textSecondary, #9cabb3);
+  font-size: 0.9375rem;
+  line-height: 1.3;
+}
+.seams-voiceid-prompt .seams-voiceid-context > blockquote {
+  max-height: 8.5rem;
+  margin: 0;
+  padding: 0.75rem 1rem;
+  overflow-y: auto;
+  border-radius: 1rem;
+  background: var(--seams-colors-surface, #202b31);
+  color: var(--seams-colors-textPrimary, #eff2f3);
+  font-size: 1rem;
+  line-height: 1.45;
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+/* A result has no label: its empty title takes no room. */
+.seams-voiceid-prompt[data-context] > h2:empty { display: none; }
+.seams-voiceid-prompt[data-context] > h2 {
+  margin: 0 0 0.625rem;
+  color: var(--seams-colors-textPrimary, #eff2f3);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.3;
+  text-align: center;
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-phrase {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: none;
+  /* A thin gap to the button: the sentence and the voice belong together. */
+  margin: 0 0 0.5rem;
+  padding: 0.875rem 1.25rem;
+  border-radius: 1rem;
+  /* Blue, apart from the grey box of the context: this is what the person says. */
+  background: var(--seams-voiceid-fill);
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: normal;
+  line-height: 1.35;
+  text-align: center;
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-phrase.seams-voiceid-success-headline {
+  display: block;
+  padding: 0;
+  background: none;
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+/* The status sits at the foot of the card, under the button: "Listening", or the check. */
+.seams-voiceid-prompt[data-context] .seams-voiceid-status {
+  min-height: 1.125rem;
+  margin: 0;
+  padding: 0.625rem 0 0;
+  text-align: center;
+}
+.seams-voiceid-prompt[data-context][data-phrase-view="result"] .seams-voiceid-status { padding: 0.25rem 0 0.75rem; }
+/* Under the button, the check's caption and detail share one line at the size of "Listening",
+   so the card keeps its height when the check starts. A long line ends with an ellipsis. */
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="result"]) .seams-voiceid-status.seams-voiceid-two-lines {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="result"]) .seams-voiceid-status.seams-voiceid-two-lines > span {
+  display: inline;
+}
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="result"]) .seams-voiceid-status .seams-voiceid-caption {
+  margin: 0;
+  font-size: inherit;
+}
+.seams-voiceid-prompt[data-context]:not([data-phrase-view="result"]) .seams-voiceid-status .seams-voiceid-caption-detail:not(:empty)::before {
+  content: ' · ';
+}
+/* A result's link, such as the transaction in a block explorer: short, in the main button's
+   colour, underlined only on hover. */
+.seams-voiceid-prompt[data-context] .seams-voiceid-status a {
+  color: var(--seams-colors-buttonBackground, var(--seams-colors-textPrimary, #eff2f3));
+  font-weight: 500;
+  text-decoration: none;
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-status a:hover,
+.seams-voiceid-prompt[data-context] .seams-voiceid-status a:focus-visible { text-decoration: underline; }
+/* The voice line and the check, in the main button's colours, with either line style. The line
+   keeps its drawing size; the taller button gives it room above and below. */
+.seams-voiceid-prompt[data-context] > :is(.seams-voiceid-ribbon, .seams-voiceid-status-line) {
+  box-sizing: border-box;
+  width: 100%;
+  height: 4.5rem;
+  padding-block: 0.5rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--seams-colors-buttonBackground, var(--seams-colors-textPrimary, #eff2f3));
+  color: var(--seams-colors-textButton, var(--seams-colors-colorBackground, #192024));
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-ribbon .seams-voiceid-ribbon-echo { color: currentColor; }
+.seams-voiceid-prompt[data-context] .seams-voiceid-status-line rect {
+  fill: color-mix(in srgb, currentColor 35%, transparent);
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-status-line rect[data-state="done"],
+.seams-voiceid-prompt[data-context] .seams-voiceid-status-line rect[data-state="run"] { fill: currentColor; }
+.seams-voiceid-prompt[data-context] .seams-voiceid-status-check {
+  stroke: var(--seams-colors-buttonBackground, var(--seams-colors-textPrimary, #eff2f3));
+}
+.seams-voiceid-prompt[data-context][data-voice-line="pixels"] {
+  --seams-voiceid-pixel-background: var(--seams-colors-voicePixelBackground, var(--seams-colors-buttonBackground, var(--seams-colors-textPrimary, #eff2f3)));
+  --seams-voiceid-pixel-ink: var(--seams-colors-textButton, var(--seams-colors-colorBackground, #192024));
+}
+.seams-voiceid-prompt[data-context][data-voice-line="pixels"] > :is(.seams-voiceid-ribbon, .seams-voiceid-status-line) {
+  background: var(--seams-voiceid-pixel-background);
+  color: var(--seams-voiceid-pixel-ink);
+}
+.seams-voiceid-prompt[data-context][data-voice-line="pixels"] .seams-voiceid-status-check {
+  stroke: var(--seams-voiceid-pixel-background);
+}
+/* On the button, the dots are the button's text colour: full in the middle row, then mixed a
+   little and more with the button's colour (white, light and light blue on X blue). */
+.seams-voiceid-prompt[data-context] .seams-voiceid-ribbon-pixel[data-band="0"] { fill: var(--seams-voiceid-pixel-ink); }
+.seams-voiceid-prompt[data-context] .seams-voiceid-ribbon-pixel[data-band="1"] {
+  fill: color-mix(in srgb, var(--seams-voiceid-pixel-ink) 80%, var(--seams-voiceid-pixel-background));
+}
+.seams-voiceid-prompt[data-context] .seams-voiceid-ribbon-pixel[data-band="2"] {
+  fill: color-mix(in srgb, var(--seams-voiceid-pixel-ink) 55%, var(--seams-voiceid-pixel-background));
+}
+/* The microphone at the left of the button, as on an app's own voice button: on Record, on the
+   voice line while the card records, and on the check. A result's button has none. Its circle
+   keeps the same gap to the button's top, left and bottom, so it follows the button's round end.
+   The line leaves the icon its room. */
+.seams-voiceid-prompt[data-context] > .seams-voiceid-line-icon {
+  --seams-voiceid-icon-gap: 0.375rem;
+  grid-row: line / span 2;
+  grid-column: 1;
+  align-self: center;
+  justify-self: start;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: calc(var(--seams-voiceid-button-height) - 2 * var(--seams-voiceid-icon-gap));
+  height: calc(var(--seams-voiceid-button-height) - 2 * var(--seams-voiceid-icon-gap));
+  margin-inline-start: var(--seams-voiceid-icon-gap);
+  border-radius: 50%;
+  transition: width 180ms ease, height 180ms ease;
+  background: var(--seams-colors-textButton, var(--seams-colors-colorBackground, #192024));
+  color: var(--seams-colors-buttonBackground, var(--seams-colors-textPrimary, #eff2f3));
+  pointer-events: none;
+}
+.seams-voiceid-line-icon > svg { width: 46%; height: 46%; }
+.seams-voiceid-prompt[data-context][data-phrase-view="result"] > .seams-voiceid-line-icon { display: none; }
+.seams-voiceid-prompt[data-context] > :is(.seams-voiceid-ribbon, .seams-voiceid-status-line) {
+  box-sizing: border-box;
+  padding-inline: calc(var(--seams-voiceid-button-height) + 0.25rem) 1rem;
+}
+/* The status line's own space below it is the gap above the button, in every view. */
+.seams-voiceid-prompt[data-context] > .seams-voiceid-record-slot { margin-top: 0; }
+.seams-voiceid-prompt[data-context] .seams-voiceid-primary {
+  min-height: 3.5rem;
+  border-radius: 9999px;
+  font-size: 1.0625rem;
+  font-weight: 700;
+}
 @media (hover: hover) and (pointer: fine) {
   .seams-voiceid-close:hover { background: var(--seams-colors-surface, #202b31); }
   .seams-voiceid-primary:hover:not(:disabled) { opacity: 0.9; }
@@ -595,6 +844,29 @@ var VoicePrompt = class {
 		this.element.append(this.visual.glow, this.cancel, this.title, this.phrase, this.visual.element, this.status, slot, this.progress);
 		this.sizes.observe(this.element);
 	}
+	/** Draws the voice as wave lines (the default) or as columns of pixels. */
+	useVoiceLine(style) {
+		this.element.dataset.voiceLine = style;
+		this.visual.setLineStyle(style);
+	}
+	/**
+	* Shows the text that the sentence speaks for, such as the note that a spoken summary signs,
+	* above the sentence. It stays for the check and the result.
+	*/
+	showContext(label, text) {
+		const document = this.element.ownerDocument;
+		const context = document.createElement("figure");
+		context.className = "seams-voiceid-context";
+		const caption = document.createElement("figcaption");
+		caption.className = "seams-voiceid-context-label";
+		caption.textContent = label;
+		const body = document.createElement("blockquote");
+		body.textContent = text;
+		context.append(caption, body);
+		this.title.before(context);
+		this.element.append(microphoneIcon(document));
+		this.element.dataset.context = "";
+	}
 	/**
 	* In an app's dialog with a step before this card, Back in the leading corner returns to that
 	* step. With `close`, Close stays in the trailing corner and ends the whole dialog; without it,
@@ -614,6 +886,16 @@ var VoicePrompt = class {
 		return this.cancel;
 	}
 	/**
+	* Minimize in the trailing corner, beside Close. It stays in the check, where Close is hidden,
+	* so the person can hide the card while the check goes on. The result is the control.
+	*/
+	showMinimize() {
+		const minimize = cornerButton(this.element.ownerDocument, "Minimize", MINIMIZE_PATH);
+		minimize.classList.add("seams-voiceid-minimize");
+		this.cancel.before(minimize);
+		return minimize;
+	}
+	/**
 	* Moves the rows to a new state. The rows whose content changes fade out together, take their
 	* new content and fade in one after another; the other rows stay still. A change that comes
 	* during a fade joins it, so no state in between is drawn.
@@ -1018,8 +1300,8 @@ function fadeRowsIn(rows) {
 			opacity: to,
 			transform: "none"
 		}], {
-			delay: reduced ? 0 : 20 + index * 30,
-			duration: reduced ? 150 : 200,
+			delay: reduced ? 0 : 0 + index * 20,
+			duration: reduced ? 150 : 140,
 			easing: ROW_EASE,
 			fill: "backwards",
 			id: ROW_MOTION
@@ -1029,7 +1311,7 @@ function fadeRowsIn(rows) {
 function ignoreCancel() {}
 function continueFade({ row, opacity }) {
 	row.animate([{ opacity }, { opacity: 1 }], {
-		duration: 200 * (1 - opacity),
+		duration: 140 * (1 - opacity),
 		easing: ROW_EASE,
 		id: ROW_MOTION
 	});
@@ -1062,6 +1344,34 @@ function leaveSurface(element) {
 }
 const CLOSE_PATH = "M6 6l12 12M18 6L6 18";
 const BACK_PATH = "m15 18-6-6 6-6";
+const MINIMIZE_PATH = "M6 12h12";
+/** A microphone: its head, its stand and its foot. */
+const MICROPHONE_PATHS = [
+	"M9 5a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0z",
+	"M5 10a7 7 0 0 0 14 0",
+	"M8 21h8",
+	"M12 17v4"
+];
+/** The microphone at the left of a form card's button, in its own circle. */
+function microphoneIcon(document) {
+	const circle = document.createElement("span");
+	circle.className = "seams-voiceid-line-icon";
+	circle.setAttribute("aria-hidden", "true");
+	const icon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	icon.setAttribute("viewBox", "0 0 24 24");
+	for (const d of MICROPHONE_PATHS) {
+		const part = document.createElementNS("http://www.w3.org/2000/svg", "path");
+		part.setAttribute("d", d);
+		part.setAttribute("fill", "none");
+		part.setAttribute("stroke", "currentColor");
+		part.setAttribute("stroke-width", "1.8");
+		part.setAttribute("stroke-linecap", "round");
+		part.setAttribute("stroke-linejoin", "round");
+		icon.append(part);
+	}
+	circle.append(icon);
+	return circle;
+}
 /** A control in a corner of the card, with an icon and no text. */
 function cornerButton(document, label, path) {
 	const button = document.createElement("button");

package/dist/esm/card/ribbon.js

@@ -31,6 +31,19 @@ const LINE_REST_OPACITY = .55;
 const SUCCESS_MS = 1140;
 const SEAL_RADIUS = 22.5;
 const CHECK_PATH = "M161 26.8 151.4 36.3 147.1 32";
+const PIXEL_COLUMNS = 44;
+/** The rows above the middle row, and the rows below it. */
+const PIXEL_ROWS = 4;
+const PIXEL_PITCH = 7;
+/** Rows sit closer than columns, so the tallest column keeps a gap to the edge of a button. */
+const PIXEL_ROW_PITCH = 6;
+const PIXEL_SIZE = 4.5;
+const PIXEL_STEP_MS = 70;
+/** A column shows between this share of the level and all of it. */
+const PIXEL_SPREAD = .3;
+const PIXEL_IDLE_LEVEL = .18;
+const PIXEL_IDLE_SWING = .12;
+const PIXEL_IDLE_PERIOD_MS = 2400;
 const easeMove = cubicBezier(.65, 0, .35, 1);
 const easeArc = cubicBezier(.4, 0, .2, 1);
 const easeSeal = cubicBezier(.34, 1.56, .64, 1);
@@ -57,6 +70,14 @@ var VoiceRibbon = class {
 	target = 0;
 	level = 0;
 	stopped = false;
+	lineStyle = "wave";
+	/** The pixel style's dots by column, top row first. Made when the style is first chosen. */
+	pixels = null;
+	/** The level of each column, the newest at the right end. */
+	pixelLevels = new Array(PIXEL_COLUMNS).fill(0);
+	/** The rows that each column shows now, above and below the middle row. */
+	pixelHeights = new Array(PIXEL_COLUMNS).fill(-1);
+	pixelClock = 0;
 	constructor(document, checking = "ring") {
 		this.checking = checking;
 		this.element = document.createElementNS(SVG_NAMESPACE, "svg");
@@ -94,10 +115,61 @@ var VoiceRibbon = class {
 				this.bottom
 			].entries()) segment.dataset.seamsProgressSegment = String(index);
 		}
-		for (let layer = 3; layer >= 0; layer -= 1) this.lines.push(this.append(document, "path", layer === 0 ? "1" : "0.65"));
+		for (let layer = 3; layer >= 0; layer -= 1) {
+			const line = this.append(document, "path", layer === 0 ? "1" : "0.65");
+			line.classList.add(layer === 0 ? "seams-voiceid-ribbon-line" : "seams-voiceid-ribbon-echo");
+			if (layer > 0) line.dataset.layer = String(layer);
+			this.lines.push(line);
+		}
 		this.paint(performance.now());
 	}
 	readLevel = () => this.level;
+	/** Draws the voice as wave lines (the default) or as columns of pixels. */
+	setLineStyle(style) {
+		this.lineStyle = style;
+		this.element.dataset.lineStyle = style;
+		if (style === "pixels" && !this.pixels) this.pixels = this.makePixels();
+		this.pixelHeights.fill(-1);
+		this.paint(performance.now());
+		this.wake();
+	}
+	makePixels() {
+		const document = this.element.ownerDocument;
+		const group = document.createElementNS(SVG_NAMESPACE, "g");
+		group.classList.add("seams-voiceid-ribbon-pixels");
+		group.setAttribute("opacity", "0");
+		const left = (WIDTH - ((PIXEL_COLUMNS - 1) * PIXEL_PITCH + PIXEL_SIZE)) / 2;
+		const columns = [];
+		for (let column = 0; column < PIXEL_COLUMNS; column += 1) {
+			const dots = [];
+			for (let row = -PIXEL_ROWS; row <= PIXEL_ROWS; row += 1) {
+				const dot = document.createElementNS(SVG_NAMESPACE, "rect");
+				dot.classList.add("seams-voiceid-ribbon-pixel");
+				const distance = Math.abs(row);
+				dot.dataset.band = distance === 0 ? "0" : distance <= 2 ? "1" : "2";
+				dot.setAttribute("x", (left + column * PIXEL_PITCH).toFixed(2));
+				dot.setAttribute("y", (MID - PIXEL_SIZE / 2 + row * PIXEL_ROW_PITCH).toFixed(2));
+				dot.setAttribute("width", String(PIXEL_SIZE));
+				dot.setAttribute("height", String(PIXEL_SIZE));
+				dot.setAttribute("rx", "1");
+				dot.setAttribute("opacity", "0");
+				group.append(dot);
+				dots.push(dot);
+			}
+			columns.push(dots);
+		}
+		this.element.prepend(group);
+		return {
+			group,
+			columns
+		};
+	}
+	/** The voice line's width now: 1, or the theme's `voiceLineWidth`. */
+	lineWidth() {
+		const line = this.lines[this.lines.length - 1];
+		const width = line ? Number.parseFloat(getComputedStyle(line).strokeWidth) : NaN;
+		return Number.isFinite(width) && width > 0 ? width : 1;
+	}
 	setPhase(phase) {
 		if (phase === "processing" && this.stage.kind === "line") {
 			const amplitude = Math.max(this.level, this.idleAmplitude(performance.now()));
@@ -177,13 +249,23 @@ var VoiceRibbon = class {
 		this.previousTime = time;
 		this.level += (this.target - this.level) * (1 - Math.exp(-dt / (this.target > this.level ? 55 : 200)));
 		if (!this.motion.matches) this.position += dt * (.0012 + this.level * .003);
+		if (this.lineStyle === "pixels") this.stepPixels(dt);
 		this.paint(time);
-		if (!(!this.element.isConnected || this.stage.kind === "sealed" || this.stage.kind === "line" && this.phase === "idle" && this.level <= .001)) this.frame = requestAnimationFrame(this.draw);
+		if (!(!this.element.isConnected || this.stage.kind === "sealed" || this.stage.kind === "line" && this.phase === "idle" && this.level <= .001 && this.pixelLevels.every((level) => level <= .001))) this.frame = requestAnimationFrame(this.draw);
 	};
 	idleAmplitude(time) {
 		if (this.phase !== "listening" || this.motion.matches) return 0;
 		return IDLE_AMPLITUDE * (.72 + .28 * Math.sin(time / IDLE_PERIOD_MS * TAU));
 	}
+	/** Adds the level of each step at the right end; the older columns move left. */
+	stepPixels(dt) {
+		this.pixelClock += dt;
+		while (this.pixelClock >= PIXEL_STEP_MS) {
+			this.pixelClock -= PIXEL_STEP_MS;
+			this.pixelLevels.shift();
+			this.pixelLevels.push(this.level * (PIXEL_SPREAD + (1 - PIXEL_SPREAD) * Math.random()));
+		}
+	}
 	paint(time) {
 		for (const part of [
 			this.ripple,
@@ -195,9 +277,11 @@ var VoiceRibbon = class {
 			this.check
 		]) part.setAttribute("opacity", "0");
 		for (const line of this.lines) line.setAttribute("opacity", "0");
+		this.pixels?.group.setAttribute("opacity", "0");
 		switch (this.stage.kind) {
 			case "line":
-				this.paintLine(Math.max(this.level, this.idleAmplitude(time)));
+				if (this.lineStyle === "pixels") this.paintPixels(time);
+				else this.paintLine(Math.max(this.level, this.idleAmplitude(time)));
 				return;
 			case "capture":
 				this.paintCapture(time, this.stage);
@@ -226,6 +310,23 @@ var VoiceRibbon = class {
 			this.lines[index].setAttribute("opacity", String(layer === 0 ? LINE_REST_OPACITY + amplitude * .4 : .1 + amplitude * .1));
 		}
 	}
+	/** Each column shows the middle dot and as many rows above and below it as its level. */
+	paintPixels(time) {
+		if (!this.pixels) return;
+		this.pixels.group.setAttribute("opacity", "1");
+		const live = this.phase === "listening" && !this.motion.matches;
+		for (const [column, dots] of this.pixels.columns.entries()) {
+			let level = this.pixelLevels[column] ?? 0;
+			if (live) {
+				const wave = Math.sin(time / PIXEL_IDLE_PERIOD_MS * TAU - column * .55);
+				level = Math.max(level, PIXEL_IDLE_LEVEL + PIXEL_IDLE_SWING * wave);
+			}
+			const height = Math.min(PIXEL_ROWS, Math.round(level * PIXEL_ROWS * 1.3));
+			if (height === this.pixelHeights[column]) continue;
+			this.pixelHeights[column] = height;
+			for (const [index, dot] of dots.entries()) dot.setAttribute("opacity", Math.abs(index - PIXEL_ROWS) <= height ? "1" : "0");
+		}
+	}
 	paintSegments(time, stage) {
 		const elapsed = time - stage.startedAt;
 		if (!this.motion.matches && elapsed < SPLIT_FLATTEN_MS) {
@@ -242,7 +343,7 @@ var VoiceRibbon = class {
 		].entries()) {
 			const start = index * (width + gap);
 			segment.setAttribute("d", `M${start.toFixed(2)} ${MID}H${(start + width).toFixed(2)}`);
-			segment.setAttribute("stroke-width", "1");
+			segment.setAttribute("stroke-width", String(this.lineWidth()));
 			segment.setAttribute("opacity", this.segmentOpacity(split, index));
 		}
 	}
@@ -268,7 +369,7 @@ var VoiceRibbon = class {
 		const lineOpacity = LINE_REST_OPACITY + amplitude * .4;
 		for (const [half, turned] of [[this.top, false], [this.bottom, true]]) {
 			half.setAttribute("d", this.halfPath(tail, head, turned, amplitude, waveScale));
-			half.setAttribute("stroke-width", lerp(1, 2, settled).toFixed(2));
+			half.setAttribute("stroke-width", lerp(this.lineWidth(), Math.max(2, this.lineWidth()), settled).toFixed(2));
 			half.setAttribute("opacity", lerp(lineOpacity, 1, settled).toFixed(3));
 		}
 		this.middle.setAttribute("d", this.linePath(0, amplitude, BEND_START, WIDTH - BEND_START, waveScale));