@mdbase-dev/ui 0.1.0-beta.121 → 0.1.0-beta.124

package/README.md

@@ -22,7 +22,72 @@ applyThemePreference(loadThemePreference());
   as `--ink` belong to each app.
 - `theme` stores the System, Light or Dark choice as `mdbase:theme`.
 - `brand` draws the Frontmatter mark, each app's inverted mark, and the
-  `mdbase <app>` wordmark. Add `motion.css` to animate the mark.
+  `mdbase <app>` wordmark. Add `motion.css` to animate the mark: loops
+  (`orbit`, `scan`, `bounce`, `stream`, `sort`, `hop`), entrances
+  (`keys-first`, `drop`, `assemble`), one-shot `saved`/`error` signals, and a
+  `progress` fill.
+- `mark-activity` is the page-wide store behind the app switcher's mark.
+  `SaveNotice` already reports saves and problems to it. For other work, call
+  `signalMdbaseMark("saved" | "error")` when a write the person made finishes,
+  `trackMdbaseMarkProgress()` (or `useMdbaseMarkProgress(fraction)`) when the
+  total is known, and `holdMdbaseMarkBusy(loop)` (or `useMdbaseMarkBusy`) while
+  it is not.
 - `apps` lists the mdbase apps and builds links that open the current
   collection in another app. Lab and local builds pass their own URLs to
   `withAppUrls`.
+
+## Shared feedback
+
+Import `@mdbase-dev/ui/feedback` and `@mdbase-dev/ui/feedback.css`, alongside
+`tokens.css` and `controls.css`. Place one `FeedbackProvider` above the app shell
+(and its error boundary); place `FeedbackButton` in a quiet, accessible shell
+location. `useFeedback().open("problem")` opens the same form from an error action.
+
+```tsx
+import { FeedbackButton, FeedbackProvider, feedbackApplication,
+  resolveFeedbackEndpoint, useFeedback } from "@mdbase-dev/ui/feedback";
+import "@mdbase-dev/ui/feedback.css";
+
+<FeedbackProvider
+  endpoint={resolveFeedbackEndpoint(configuredFeedbackUrl, development)}
+  application={feedbackApplication("mdbase reader", "library", revision, environment)}
+  turnstileSiteKey={configuredPublicSiteKey}
+  collectionName={optionalCollectionDisplayName}
+>
+  <YourAppShell><FeedbackButton /></YourAppShell>
+</FeedbackProvider>;
+```
+
+Products: `mdbase editor`, `mdbase reader`, `mdbase writer`, `mdbase connect`.
+Views must be fixed identifiers, never URLs or document paths. Application/build
+metadata is always included and previewable; reply email, collection name,
+problem diagnostics, and a screenshot are optional. A single, initially collapsed
+**What gets sent** disclosure holds app details and optional diagnostic/collection
+controls, rather than repeating explanations around the form. Collection-name consent
+resets if the name changes. A missing or invalid endpoint hides entry points.
+
+For a **user-visible** failure, call `useFeedback().reportError({ code:
+"save_failed" })`. Use the exported `FeedbackErrorCode` union and optional HTTP
+status, not raw errors. Cancellation does nothing; background retries should not
+call it. The bug wiggles twice, at most once per 30 seconds, and never moves with
+reduced motion. It does not install global exception listeners or telemetry.
+
+The form opens focused on its description. Capture starts only on **Attach
+screenshot**, closes the native modal before requesting `getDisplayMedia`, then
+restores the form/draft and stops every track. Unsupported browsers can choose an
+image instead. Draw/highlight/blackout, undo/reset, and keyboard markup export one
+flattened raster; blackouts replace whole pixels and are painted last. Uploads
+are bounded PNG/JPEG, dimension-checked before decoding and re-encoded to discard
+metadata and filenames. Only the explicitly included final image is submitted.
+Opening markup excludes the image until Apply; cancelling or failing to apply
+redactions leaves the original excluded unless the user explicitly includes it.
+
+Drafts and the 30-event/five-minute diagnostic buffer are in-memory per provider.
+Cancel preserves the draft; successful dismissal clears it. No collection/auth
+SDK, persistence, public issue tracker, or feedback transport other than the
+configured stateless Worker is required. Turnstile loads when the form opens if a
+public key is configured. Submission omits credentials and referrers, retains the
+request ID for unchanged retries, and resets verification tokens after attempts.
+
+See [shared-feedback.md](../../docs/shared-feedback.md) for the Worker contract,
+rollout order, integration status, and regression checks.

package/css/brand.css

@@ -1,47 +1,50 @@
-/* The platform mark. `motion.css` animates the same structure when a motion is set. */
+/* The Frontmatter mark. `motion.css` animates the same structure when a motion is set. */
 .mdbase-mark {
+  --mark-ink: currentColor;
+  --mark-accent: var(--color-accent);
   overflow: visible;
 }
 
+/* An app mark is inverted: the bars take the app's colour and the line stays ink. */
+.mdbase-app-mark {
+  --mark-ink: var(--app);
+  --mark-accent: currentColor;
+  color: var(--color-text);
+}
+
+.mdbase-app-mark.is-editor { --app: var(--app-editor); }
+.mdbase-app-mark.is-reader { --app: var(--app-reader); }
+.mdbase-app-mark.is-writer { --app: var(--app-writer); }
+
 .mdbase-mark .mdbase-mark-segment,
 .mdbase-mark .mdbase-mark-row,
-.mdbase-mark .mdbase-mark-fence,
-.mdbase-mark .mdbase-mark-conveyor-track {
+.mdbase-mark .mdbase-mark-fence {
   transform-box: fill-box;
   transform-origin: center;
 }
 
 .mdbase-mark .mdbase-mark-ink,
-.mdbase-mark .mdbase-mark-conveyor-track {
-  fill: currentColor;
+.mdbase-mark .mdbase-mark-track {
+  fill: var(--mark-ink);
 }
 
 .mdbase-mark .mdbase-mark-accent {
-  fill: var(--color-accent);
-}
-
-.mdbase-mark .mdbase-mark-conveyor-track {
-  opacity: 0;
-  transform-box: view-box;
-  transform-origin: 0 0;
+  fill: var(--mark-accent);
 }
 
-/* An app mark takes its app's colour for the bars; the line stays ink. */
-.mdbase-app-mark {
-  color: var(--color-text);
-  overflow: visible;
+/* Progress: a faint copy keeps the shape visible while the lines fill. */
+.mdbase-mark .mdbase-mark-progress-ghost {
+  opacity: 0.22;
 }
 
-.mdbase-app-mark.is-editor { --app: var(--app-editor); }
-.mdbase-app-mark.is-reader { --app: var(--app-reader); }
-.mdbase-app-mark.is-writer { --app: var(--app-writer); }
-
-.mdbase-app-mark-bars {
-  fill: var(--app);
+.mdbase-mark .mdbase-mark-progress-fill {
+  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.mdbase-app-mark-line {
-  fill: currentColor;
+@media (prefers-reduced-motion: reduce) {
+  .mdbase-mark .mdbase-mark-progress-fill {
+    transition: none;
+  }
 }
 
 .wordmark {

package/css/feedback.css

@@ -0,0 +1,62 @@
+.mdbase-feedback-app { display: contents; }
+.mdbase-feedback-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+.mdbase-feedback-trigger { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-soft); font: 12px/1.4 var(--sans); cursor: pointer; }
+.mdbase-feedback-trigger:hover { background: var(--color-selected); color: var(--color-text); }
+.mdbase-feedback-bug { width: 22px; height: 22px; flex-shrink: 0; }
+@keyframes mdbase-feedback-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
+@media (prefers-reduced-motion: no-preference) { .mdbase-feedback-bug.is-wiggling { animation: mdbase-feedback-wiggle 280ms ease-in-out 2; } }
+.mdbase-feedback-dialog { position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 440px; max-width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-left: 1px solid var(--color-border-strong); background: var(--color-canvas); color: var(--color-text); font: 13px/1.5 var(--sans); overflow: hidden; }
+.mdbase-feedback-dialog[open] { display: flex; flex-direction: column; }
+.mdbase-feedback-dialog:not([open]) { display: none; }
+.mdbase-feedback-dialog::backdrop { background: var(--color-scrim); }
+.mdbase-feedback-dialog *, .mdbase-feedback-markup * { box-sizing: border-box; }
+.mdbase-feedback-dialog :is(button,input,textarea), .mdbase-feedback-markup button { font: inherit; }
+.mdbase-feedback-dialog :focus-visible, .mdbase-feedback-markup :focus-visible, .mdbase-feedback-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+.mdbase-feedback-dialog button, .mdbase-feedback-markup .mdbase-feedback-actions button, .mdbase-feedback-tools button { border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 7px 11px; background: var(--color-canvas); color: var(--color-text); cursor: pointer; }
+.mdbase-feedback-dialog button:hover, .mdbase-feedback-markup button:hover { background: var(--color-selected); }
+.mdbase-feedback-dialog button:disabled, .mdbase-feedback-markup button:disabled { opacity: .5; cursor: default; }
+.mdbase-feedback-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 27px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
+.mdbase-feedback-header h2 { font-size: 23px; line-height: 1.25; letter-spacing: -.5px; margin: 0; color: var(--color-text); }
+.mdbase-feedback-header button { border: 0; width: 34px; height: 34px; padding: 0; font-size: 23px; color: var(--color-text-muted); }
+.mdbase-feedback-dialog form { display: flex; flex-direction: column; flex: 1; overflow: hidden; margin: 0; }
+.mdbase-feedback-body { flex: 1; overflow-y: auto; padding: 23px 27px; }
+.mdbase-feedback-topics { display: grid; gap: 6px; border: 0; padding: 0; margin: 0 0 23px; }
+.mdbase-feedback-topics legend { margin-bottom: 10px; font-size: 12px; font-weight: 700; }
+.mdbase-feedback-topics label { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 12px; cursor: pointer; }
+.mdbase-feedback-topics label:has(:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
+.mdbase-feedback-dialog input:is([type=radio],[type=checkbox]) { accent-color: var(--color-accent); margin: 0; width: 14px; height: 14px; flex-shrink: 0; }
+.mdbase-feedback-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-weight: 700; }
+.mdbase-feedback-field small { margin-left: 6px; font-weight: 400; font-size: 11px; color: var(--color-text-muted); }
+.mdbase-feedback-field :is(input,textarea) { width: 100%; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: 4px; color: var(--color-text); padding: 10px 11px; font-weight: 400; }
+.mdbase-feedback-field textarea { min-height: 125px; resize: vertical; }
+.mdbase-feedback-field :is(input,textarea)::placeholder { color: var(--color-text-muted); }
+.mdbase-feedback-screenshot { margin: 0 0 20px; }
+.mdbase-feedback-dialog .mdbase-feedback-preview { display: block; position: relative; padding: 0; width: 100%; overflow: hidden; }
+.mdbase-feedback-preview img { display: block; width: 100%; height: 165px; object-fit: contain; }
+.mdbase-feedback-preview span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 4px 8px; font-size: 11px; white-space: nowrap; }
+.mdbase-feedback-screenshot-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11px; }
+.mdbase-feedback-screenshot-actions label { display: flex; align-items: center; gap: 7px; }
+.mdbase-feedback-upload { position: relative; color: var(--color-accent); cursor: pointer; padding: 6px 0; }
+.mdbase-feedback-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+.mdbase-feedback-upload:focus-within { outline: 2px solid var(--color-accent); outline-offset: 3px; }
+.mdbase-feedback-check { display: flex; gap: 8px; align-items: center; font-size: 12px; }
+.mdbase-feedback-details > .mdbase-feedback-check { margin: 14px 0 8px; }
+.mdbase-feedback-help { font-size: 11px; line-height: 1.6; color: var(--color-text-muted); margin: 9px 0; }
+.mdbase-feedback-dialog details { font-size: 11px; color: var(--color-text-soft); margin: 12px 0; }
+.mdbase-feedback-dialog summary { cursor: pointer; }
+.mdbase-feedback-dialog pre { font: 11px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--color-surface-subtle); padding: 12px; border: 1px solid var(--color-border); border-radius: 4px; }
+.mdbase-feedback-error { color: var(--color-danger); font-size: 12px; }
+.mdbase-feedback-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--color-border); padding: 18px 27px; flex-shrink: 0; }
+.mdbase-feedback-dialog .mdbase-feedback-primary, .mdbase-feedback-markup .mdbase-feedback-actions .mdbase-feedback-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
+.mdbase-feedback-dialog .mdbase-feedback-primary:hover, .mdbase-feedback-markup .mdbase-feedback-actions .mdbase-feedback-primary:hover { background: var(--color-accent-strong); }
+.mdbase-feedback-success { padding: 40px 27px; }
+.mdbase-feedback-success h3 { font-size: 25px; line-height: 1.3; margin: 0 0 17px; }
+.mdbase-feedback-success .mdbase-feedback-primary { margin-top: 20px; }
+.mdbase-feedback-markup { width: min(1100px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; }
+.mdbase-feedback-markup .mdbase-dialog-body { max-height: calc(100dvh - 34px); display: flex; flex-direction: column; overflow: hidden; padding: 20px; }
+.mdbase-feedback-tools { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 15px; }
+.mdbase-feedback-tools button[aria-pressed=true] { background: var(--color-selected); border-color: var(--color-accent); }
+.mdbase-feedback-canvas { background: var(--color-surface-subtle); border: 1px solid var(--color-border); padding: 12px; overflow: auto; display: flex; justify-content: center; align-items: center; min-height: 0; }
+.mdbase-feedback-canvas canvas { display: block; max-width: 100%; max-height: calc(100dvh - 345px); width: auto; height: auto; background: white; touch-action: none; cursor: crosshair; }
+.mdbase-feedback-markup .mdbase-feedback-actions { padding: 15px 0 0; }
+@media (max-width: 600px) { .mdbase-feedback-header { padding: 23px; } .mdbase-feedback-body { padding: 20px 23px; } .mdbase-feedback-actions { padding: 16px 23px; } .mdbase-feedback-tools { gap: 4px; } .mdbase-feedback-tools button { font-size: 11px; padding: 6px 8px; } }

package/css/motion.css

@@ -1,198 +1,306 @@
-/* Animations for the platform mark. Base mark styling lives in brand.css. */
+/*
+ * Animations for the Frontmatter mark. Base mark styling lives in brand.css.
+ * Colours go through --mark-ink and --mark-accent so the platform mark and the
+ * inverted app marks share every animation.
+ */
 
-/* Bootstrap: trace once in reading order, then continue as bounded I/O. */
-.mdbase-motion-bootstrap .mdbase-mark-segment {
-  --mdbase-trace-delay: 0ms;
-  stroke: currentColor;
-  stroke-width: 3;
-  stroke-dasharray: 1;
-  stroke-dashoffset: 1;
-  vector-effect: non-scaling-stroke;
-  animation: mdbase-trace-ink 720ms cubic-bezier(0.16, 1, 0.3, 1) var(--mdbase-trace-delay) 1 both;
+/* Each segment's place in reading order, and where assemble scatters it from. */
+.mdbase-mark-segment-1 { --step: 0; --scatter: translate(-18px, -22px) rotate(-24deg); }
+.mdbase-mark-segment-2 { --step: 1; --scatter: translate(6px, -30px) rotate(18deg); }
+.mdbase-mark-segment-3 { --step: 2; --scatter: translate(26px, -18px) rotate(-12deg); }
+.mdbase-mark-segment-4 { --step: 3; --scatter: translate(-30px, 4px) rotate(30deg); }
+.mdbase-mark-segment-5 { --step: 4; --scatter: translate(34px, 6px) rotate(-20deg); }
+.mdbase-mark-segment-6 { --step: 5; --scatter: translate(-24px, 26px) rotate(16deg); }
+.mdbase-mark-segment-7 { --step: 6; --scatter: translate(22px, 30px) rotate(-28deg); }
+.mdbase-mark-segment-8 { --step: 7; --scatter: translate(-14px, 34px) rotate(22deg); }
+.mdbase-mark-segment-9 { --step: 8; --scatter: translate(8px, 40px) rotate(-16deg); }
+.mdbase-mark-segment-10 { --step: 9; --scatter: translate(30px, 24px) rotate(26deg); }
+
+/* ---------- Loops ---------- */
+
+/* Orbit: the fences run in opposite directions, so the mark reads as turning. */
+.mdbase-motion-orbit .mdbase-mark-fence {
+  opacity: 0;
 }
 
-.mdbase-motion-bootstrap .mdbase-mark-accent {
-  stroke: var(--color-accent);
-  animation-name: mdbase-trace-accent;
+.mdbase-motion-orbit .mdbase-mark-track-top {
+  animation: mdbase-orbit-right 1.3s linear infinite;
 }
 
-.mdbase-motion-bootstrap .mdbase-mark-segment-2 { --mdbase-trace-delay: 35ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-3 { --mdbase-trace-delay: 70ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-4 { --mdbase-trace-delay: 125ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-5 { --mdbase-trace-delay: 165ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-6 { --mdbase-trace-delay: 220ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-7 { --mdbase-trace-delay: 260ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-8 { --mdbase-trace-delay: 315ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-9 { --mdbase-trace-delay: 350ms; }
-.mdbase-motion-bootstrap .mdbase-mark-segment-10 { --mdbase-trace-delay: 385ms; }
+.mdbase-motion-orbit .mdbase-mark-track-bottom {
+  animation: mdbase-orbit-left 1.3s linear infinite;
+}
 
-.mdbase-motion-bootstrap .mdbase-mark-fence {
-  animation: mdbase-hide-original-fence 1ms linear 1.12s 1 forwards;
+@keyframes mdbase-orbit-right {
+  from { transform: translateX(0); }
+  to { transform: translateX(28px); }
 }
 
-.mdbase-motion-bootstrap .mdbase-mark-conveyor-track {
-  animation:
-    mdbase-show-conveyor 1ms linear 1.12s 1 forwards,
-    mdbase-gap-conveyor 900ms linear 1.12s infinite;
+@keyframes mdbase-orbit-left {
+  from { transform: translateX(0); }
+  to { transform: translateX(-28px); }
 }
 
-@keyframes mdbase-trace-ink {
-  0% {
-    fill: transparent;
-    opacity: 0;
-    stroke-dashoffset: 1;
-    stroke-opacity: 1;
-  }
-  10% { opacity: 1; }
-  54% {
-    fill: transparent;
-    opacity: 1;
-    stroke-dashoffset: 0;
-    stroke-opacity: 1;
-  }
-  72%,
-  100% {
-    fill: currentColor;
-    opacity: 1;
-    stroke-dashoffset: 0;
-    stroke-opacity: 0;
-  }
+/* Scan: a brightness band reads the record line by line. */
+.mdbase-motion-scan :is(.mdbase-mark-fence, .mdbase-mark-row) {
+  opacity: 0.35;
+  animation: mdbase-scan 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdbase-trace-accent {
-  0% {
-    fill: transparent;
-    opacity: 0;
-    stroke-dashoffset: 1;
-    stroke-opacity: 1;
-  }
-  10% { opacity: 1; }
-  54% {
-    fill: transparent;
+.mdbase-motion-scan .mdbase-mark-row-top { animation-delay: 0.14s; }
+.mdbase-motion-scan .mdbase-mark-row-bottom { animation-delay: 0.28s; }
+.mdbase-motion-scan .mdbase-mark-fence-bottom { animation-delay: 0.42s; }
+
+@keyframes mdbase-scan {
+  0% { opacity: 0.35; }
+  14% { opacity: 1; }
+  46%, 100% { opacity: 0.35; }
+}
+
+/* Bounce: the fence dashes hop like a typing indicator, the bottom fence mirrored. */
+.mdbase-motion-bounce .mdbase-mark-fence .mdbase-mark-segment {
+  animation: mdbase-bounce-up 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite both;
+}
+
+.mdbase-motion-bounce .mdbase-mark-fence-bottom .mdbase-mark-segment {
+  animation-name: mdbase-bounce-down;
+}
+
+.mdbase-motion-bounce :is(.mdbase-mark-segment-2, .mdbase-mark-segment-9) { animation-delay: 0.14s; }
+.mdbase-motion-bounce :is(.mdbase-mark-segment-3, .mdbase-mark-segment-10) { animation-delay: 0.28s; }
+
+@keyframes mdbase-bounce-up {
+  0%, 40%, 100% { transform: translateY(0); }
+  20% { transform: translateY(-5px); }
+}
+
+@keyframes mdbase-bounce-down {
+  0%, 40%, 100% { transform: translateY(0); }
+  20% { transform: translateY(5px); }
+}
+
+/* Stream: records pass through the fences, as in a sync. The rows are clipped to the frame. */
+.mdbase-motion-stream .mdbase-mark-row {
+  animation: mdbase-stream 2.2s infinite;
+}
+
+.mdbase-motion-stream .mdbase-mark-row-bottom {
+  animation-delay: 0.1s;
+}
+
+@keyframes mdbase-stream {
+  0%, 30% {
     opacity: 1;
-    stroke-dashoffset: 0;
-    stroke-opacity: 1;
+    transform: translateX(0);
+    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
   }
-  72%,
-  100% {
-    fill: var(--color-accent);
-    opacity: 1;
-    stroke-dashoffset: 0;
-    stroke-opacity: 0;
+  48% { opacity: 0; transform: translateX(-44px); }
+  48.01% {
+    opacity: 0;
+    transform: translateX(44px);
+    animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
   }
+  70%, 100% { opacity: 1; transform: translateX(0); }
 }
 
-@keyframes mdbase-hide-original-fence {
-  to { opacity: 0; }
+/* Sort: the two fields swap places, one passing behind the other. */
+.mdbase-motion-sort .mdbase-mark-row-top {
+  animation: mdbase-sort-top 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-@keyframes mdbase-show-conveyor {
-  to { opacity: 1; }
+.mdbase-motion-sort .mdbase-mark-row-bottom {
+  animation: mdbase-sort-bottom 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-/* Unfold: the frontmatter boundary opens once to reveal its fields. */
-.mdbase-motion-unfold .mdbase-mark-fence-top {
-  animation: mdbase-unfold-top 760ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
+@keyframes mdbase-sort-top {
+  0%, 15% { opacity: 1; transform: translateY(0); }
+  27% { opacity: 0.25; }
+  40%, 65% { opacity: 1; transform: translateY(22px); }
+  77% { opacity: 0.25; }
+  90%, 100% { opacity: 1; transform: translateY(0); }
 }
 
-.mdbase-motion-unfold .mdbase-mark-fence-bottom {
-  animation: mdbase-unfold-bottom 760ms cubic-bezier(0.16, 1, 0.3, 1) 1 both;
+@keyframes mdbase-sort-bottom {
+  0%, 15% { transform: translateY(0); }
+  40%, 65% { transform: translateY(-22px); }
+  90%, 100% { transform: translateY(0); }
 }
 
-.mdbase-motion-unfold .mdbase-mark-row {
-  animation: mdbase-unfold-row 760ms cubic-bezier(0.16, 1, 0.3, 1) 70ms 1 both;
+/* Hop: the highlight moves from one value to the other and back. */
+.mdbase-motion-hop .mdbase-mark-segment-5 {
+  animation: mdbase-hop-from 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-@keyframes mdbase-unfold-top {
-  from { transform: translateY(27px) scaleX(0.62); }
-  to { transform: translateY(0) scaleX(1); }
+.mdbase-motion-hop .mdbase-mark-segment-7 {
+  animation: mdbase-hop-to 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
 }
 
-@keyframes mdbase-unfold-bottom {
-  from { transform: translateY(-27px) scaleX(0.62); }
-  to { transform: translateY(0) scaleX(1); }
+@keyframes mdbase-hop-from {
+  0%, 38%, 100% { fill: var(--mark-accent); }
+  50%, 88% { fill: var(--mark-ink); }
 }
 
-@keyframes mdbase-unfold-row {
-  from { opacity: 0; transform: scaleX(0.45); }
-  to { opacity: 1; transform: scaleX(1); }
+@keyframes mdbase-hop-to {
+  0%, 38%, 100% { fill: var(--mark-ink); }
+  50%, 88% { fill: var(--mark-accent); }
 }
 
-/* Rebalance: two fixed-width rows change structure in opposite directions. */
-.mdbase-motion-rebalance .mdbase-mark-segment-4,
-.mdbase-motion-rebalance .mdbase-mark-segment-6 {
+/* ---------- Entrances ---------- */
+
+/* Keys first: the fences open from their middle dash, keys appear, values extend, and the highlight lands last. */
+.mdbase-motion-keys-first .mdbase-mark-row .mdbase-mark-segment {
   transform-origin: left center;
 }
 
-.mdbase-motion-rebalance .mdbase-mark-segment-5,
-.mdbase-motion-rebalance .mdbase-mark-segment-7 {
-  transform-origin: right center;
+.mdbase-motion-keys-first .mdbase-mark-fence .mdbase-mark-segment {
+  animation: mdbase-fence-in 420ms cubic-bezier(0.16, 1, 0.3, 1) 100ms 1 both;
 }
 
-.mdbase-motion-rebalance .mdbase-mark-segment-4 {
-  animation: mdbase-rebalance-top-key 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+.mdbase-motion-keys-first :is(.mdbase-mark-segment-2, .mdbase-mark-segment-9) {
+  animation-delay: 0ms;
 }
 
-.mdbase-motion-rebalance .mdbase-mark-segment-5 {
-  animation: mdbase-rebalance-top-value 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+.mdbase-motion-keys-first :is(.mdbase-mark-segment-4, .mdbase-mark-segment-6) {
+  animation: mdbase-grow 260ms cubic-bezier(0.16, 1, 0.3, 1) 220ms 1 both;
 }
 
-.mdbase-motion-rebalance .mdbase-mark-segment-6 {
-  animation: mdbase-rebalance-bottom-key 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+.mdbase-motion-keys-first .mdbase-mark-segment-7 {
+  animation: mdbase-grow 480ms cubic-bezier(0.16, 1, 0.3, 1) 380ms 1 both;
 }
 
-.mdbase-motion-rebalance .mdbase-mark-segment-7 {
-  animation: mdbase-rebalance-bottom-value 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
+.mdbase-motion-keys-first .mdbase-mark-segment-5 {
+  animation:
+    mdbase-grow 520ms cubic-bezier(0.16, 1, 0.3, 1) 440ms 1 both,
+    mdbase-land 600ms ease 820ms 1 both;
 }
 
-@keyframes mdbase-rebalance-top-key {
-  0%, 15%, 100% { transform: scaleX(1); }
-  42%, 72% { transform: scaleX(2.666667); }
+@keyframes mdbase-fence-in {
+  from { opacity: 0; transform: scaleX(0); }
+  to { opacity: 1; transform: none; }
 }
 
-@keyframes mdbase-rebalance-top-value {
-  0%, 15%, 100% { transform: scaleX(1); }
-  42%, 72% { transform: scaleX(0.642857); }
+@keyframes mdbase-grow {
+  from { transform: scaleX(0); }
+  to { transform: none; }
 }
 
-@keyframes mdbase-rebalance-bottom-key {
-  0%, 15%, 100% { transform: scaleX(1); }
-  42%, 72% { transform: scaleX(0.428571); }
+@keyframes mdbase-land {
+  from { fill: var(--mark-ink); }
+  to { fill: var(--mark-accent); }
 }
 
-@keyframes mdbase-rebalance-bottom-value {
-  0%, 15%, 100% { transform: scaleX(1); }
-  42%, 72% { transform: scaleX(1.4); }
+/* Drop: segments fall into place in reading order with a little overshoot. */
+.mdbase-motion-drop .mdbase-mark-segment {
+  animation: mdbase-drop 560ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--step) * 45ms) 1 both;
 }
 
-/* Conveyor: repeated fence segments travel left inside exact fence clips. */
-.mdbase-motion-conveyor .mdbase-mark-fence {
-  opacity: 0;
+@keyframes mdbase-drop {
+  from { opacity: 0; transform: translateY(-12px); }
+  to { opacity: 1; transform: none; }
 }
 
-.mdbase-motion-conveyor .mdbase-mark-conveyor-track {
-  opacity: 1;
-  animation: mdbase-gap-conveyor 900ms linear infinite;
+/* Assemble: scattered pieces settle into the record. */
+.mdbase-motion-assemble .mdbase-mark-segment {
+  animation: mdbase-assemble 900ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--step) * 28ms + 28ms) 1 both;
 }
 
-@keyframes mdbase-gap-conveyor {
-  from { transform: translateX(0); }
-  to { transform: translateX(-28px); }
+@keyframes mdbase-assemble {
+  from { opacity: 0; transform: var(--scatter) scale(0.7); }
+  40% { opacity: 1; }
+  to { opacity: 1; transform: none; }
+}
+
+/* ---------- Signals ---------- */
+
+/* Saved: the fences press in, the highlight flashes success while it stretches, then settles. */
+.mdbase-signal-saved .mdbase-mark-accent {
+  transform-origin: left center;
+  animation: mdbase-saved-stretch 640ms cubic-bezier(0.34, 1.56, 0.64, 1) 80ms 1 both;
+}
+
+.mdbase-signal-saved .mdbase-mark-fence-top {
+  animation: mdbase-press-top 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
+}
+
+.mdbase-signal-saved .mdbase-mark-fence-bottom {
+  animation: mdbase-press-bottom 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 1 both;
+}
+
+.mdbase-signal-saved .mdbase-mark-row-bottom {
+  animation: mdbase-saved-dim 640ms ease 1 both;
+}
+
+@keyframes mdbase-press-top {
+  40% { transform: translateY(4px); }
+  to { transform: none; }
+}
+
+@keyframes mdbase-press-bottom {
+  40% { transform: translateY(-4px); }
+  to { transform: none; }
+}
+
+@keyframes mdbase-saved-stretch {
+  35% { fill: var(--color-success); transform: scaleX(0.8); }
+  to { transform: none; }
+}
+
+@keyframes mdbase-saved-dim {
+  30% { opacity: 0.35; }
+  to { opacity: 1; }
+}
+
+/* Error: the fields shake once and the highlight turns to danger before recovering. */
+.mdbase-signal-error .mdbase-mark-row {
+  animation: mdbase-shake 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 both;
+}
+
+.mdbase-signal-error .mdbase-mark-row-bottom {
+  animation-delay: 40ms;
+}
+
+.mdbase-signal-error .mdbase-mark-accent {
+  animation: mdbase-danger 1.4s ease 1 both;
+}
+
+@keyframes mdbase-shake {
+  15% { transform: translateX(-4px); }
+  35% { transform: translateX(4px); }
+  55% { transform: translateX(-2.5px); }
+  75% { transform: translateX(1.5px); }
+  to { transform: none; }
+}
+
+@keyframes mdbase-danger {
+  0%, 60% { fill: var(--color-danger); }
+  to { fill: var(--mark-accent); }
+}
+
+/* ---------- Hover ---------- */
+
+/* Wave: one ripple runs through the resting mark in reading order. */
+:is(.mdbase-app-switcher, .mdbase-mark-hover-host):hover .mdbase-mark-at-rest .mdbase-mark-segment {
+  animation: mdbase-wave 420ms cubic-bezier(0.45, 0, 0.55, 1) calc(var(--step) * 30ms) 1 both;
+}
+
+@keyframes mdbase-wave {
+  50% { transform: translateY(-3px); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .mdbase-mark .mdbase-mark-segment,
-  .mdbase-mark .mdbase-mark-row,
-  .mdbase-mark .mdbase-mark-fence,
-  .mdbase-mark .mdbase-mark-conveyor-track {
+  .mdbase-mark :is(.mdbase-mark-segment, .mdbase-mark-row, .mdbase-mark-fence, .mdbase-mark-track) {
     animation: none !important;
-    filter: none !important;
     opacity: 1;
-    stroke: none;
     transform: none !important;
   }
 
-  .mdbase-mark .mdbase-mark-conveyor-track {
-    opacity: 0;
+  /* Orbit's moving tracks stand in for the fences; with motion off, show the fences. */
+  .mdbase-mark .mdbase-mark-track {
+    display: none;
+  }
+
+  /* Keep a still cue for a failure, since it carries meaning. */
+  .mdbase-signal-error .mdbase-mark-accent {
+    fill: var(--color-danger);
   }
 }

package/css/screens.css

@@ -1,4 +1,4 @@
-/* Opening a collection: the wordmark, held still, over one quiet line. */
+/* Opening a collection: the wordmark, scanning, over one quiet line. */
 .mdbase-opening {
   width: 100%;
   height: 100%;