@jackuait/blok 0.19.2 → 0.21.0

package/src/components/modules/paste/notion-preprocessor.ts

@@ -0,0 +1,67 @@
+/**
+ * Pre-process Notion clipboard HTML before sanitization.
+ *
+ * Notion encodes block/inline state with classes (`to-do-list`, `checkbox-on`,
+ * `toggle`, `callout`, `block-color-*`) and non-semantic markup that Blok's
+ * sanitizer strips.  This function rewrites that markup into Blok's allowed
+ * semantic tag set BEFORE the sanitizer runs.  It mirrors
+ * `preprocessGoogleDocsHtml` and is a no-op when the source is not Notion.
+ *
+ * Scope note: this is the HTML *fallback* path (Notion desktop app /
+ * cross-browser paste).  The higher-fidelity path parses Notion's proprietary
+ * `text/_notion-blocks-v3-production` JSON flavor directly when present
+ * (web→web); see docs/plans/2026-06-22-notion-paste-migration-design.md §4.1b.
+ *
+ * @param html - raw clipboard HTML string
+ * @returns preprocessed HTML string (unchanged when not Notion)
+ */
+export function preprocessNotionHtml(html: string): string {
+  const wrapper = document.createElement('div');
+
+  wrapper.innerHTML = html;
+
+  if (!isNotionClipboard(wrapper)) {
+    return html;
+  }
+
+  normalizeInlineMarks(wrapper);
+
+  return wrapper.innerHTML;
+}
+
+/**
+ * Centralized Notion clipboard signature.  This is the ONE place to update
+ * when Notion changes its class names.
+ */
+const NOTION_SIGNATURE_SELECTOR = [
+  'figure.callout',
+  'ul.to-do-list',
+  'ul.toggle',
+  'ol.numbered-list',
+  'ul.bulleted-list',
+  '.notion-text-equation-token',
+  '[class*="block-color-"]',
+  'figure.equation',
+].join(', ');
+
+/**
+ * Whether the pasted markup originated from Notion.
+ */
+function isNotionClipboard(wrapper: HTMLElement): boolean {
+  return wrapper.querySelector(NOTION_SIGNATURE_SELECTOR) !== null;
+}
+
+/**
+ * Rewrite inline marks that Blok's sanitizer strips into allowed equivalents.
+ *
+ * Notion emits strikethrough as `<del>`/`<strike>`, but Blok's strikethrough
+ * inline tool only whitelists `<s>` — so the others are dropped unless rewritten.
+ */
+function normalizeInlineMarks(wrapper: HTMLElement): void {
+  wrapper.querySelectorAll('del, strike').forEach((el) => {
+    const s = document.createElement('s');
+
+    s.innerHTML = el.innerHTML;
+    el.replaceWith(s);
+  });
+}

package/src/components/utils/media-empty-state.ts

@@ -48,8 +48,22 @@ export interface MediaEmptyStateOptions {
   labels: MediaEmptyStateLabels;
   onFile(file: File): void;
   onUrl(url: string): void;
+  /**
+   * How the panel transitions when switching Upload/Link tabs:
+   * - `'reflow'` (default): ease the panel height between the two layouts and
+   *   fade the incoming content in. Smooths the inline reflow of image/file
+   *   blocks, where content below the card shifts with the height.
+   * - `'slide'`: keep the height instant and slide + fade the incoming panel in
+   *   from the travel direction. A floating popover (audio cover-picker) has
+   *   nothing reflowing beneath it, so a height tween only reads as lag — the
+   *   directional slide gives the swap personality without the bottom-edge crawl.
+   * - `'none'`: swap instantly with no animation.
+   */
+  swap?: MediaEmptyStateSwap;
 }
 
+export type MediaEmptyStateSwap = 'reflow' | 'slide' | 'none';
+
 const MIME_LABELS: Record<string, string> = {
   'image/jpeg': 'JPG',
   'image/jpg': 'JPG',
@@ -170,6 +184,26 @@ function animatePanelSwap(panel: HTMLElement, startHeight: number): void {
   }
 }
 
+/**
+ * Slides the freshly-rendered panel content in from the travel direction while
+ * fading it up — `dir` is +1 when moving to a tab on the right, -1 to the left.
+ * The panel keeps its new height instantly; only the content moves, so there is
+ * no bottom-edge crawl (the part that read as lag in a floating popover).
+ */
+function animatePanelContent(panel: HTMLElement, dir: number): void {
+  const dx = dir * 12;
+  for (const child of Array.from(panel.children)) {
+    if (!canAnimate(child)) continue;
+    child.animate(
+      [
+        { opacity: 0, transform: `translateX(${dx}px)` },
+        { opacity: 1, transform: 'translateX(0)' },
+      ],
+      { duration: 200, easing: SWAP_EASING, fill: 'backwards' }
+    );
+  }
+}
+
 export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyStateElement {
   const { labels } = opts;
   const types = opts.acceptTypes;
@@ -177,6 +211,8 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
   const formats = formatsLabel(types);
   const sizeHint = opts.maxSize !== undefined ? formatBytes(opts.maxSize) : '';
 
+  const swapMode: MediaEmptyStateSwap = opts.swap ?? 'reflow';
+
   const root = document.createElement('div') as unknown as MediaEmptyStateElement;
   root.className = 'blok-media-empty';
   root.setAttribute('data-blok-media-empty-state', '');
@@ -349,10 +385,17 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
     queueMicrotask(() => urlInput.focus());
   };
 
-  const activate = (kind: SourceKind, animate = false): void => {
-    const startHeight = animate && canAnimate(panel) && !prefersReducedMotion()
+  const activate = (kind: SourceKind, transition = false): void => {
+    const prevKind = card.getAttribute('data-active-tab') as SourceKind | null;
+    const motion = transition
+      && swapMode !== 'none'
+      && canAnimate(panel)
+      && !prefersReducedMotion();
+    // Capture the reflow start-height before the content swaps (height tween only).
+    const startHeight = motion && swapMode === 'reflow'
       ? panel.getBoundingClientRect().height
       : null;
+    const dir = prevKind ? Math.sign(tabKinds.indexOf(kind) - tabKinds.indexOf(prevKind)) : 0;
 
     const activeTab = tabList[tabKinds.indexOf(kind)];
     for (const tab of tabList) {
@@ -367,9 +410,9 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
     if (kind === 'upload') renderUpload();
     else renderEmbed();
 
-    if (startHeight !== null) {
-      animatePanelSwap(panel, startHeight);
-    }
+    if (!motion) return;
+    if (swapMode === 'reflow' && startHeight !== null) animatePanelSwap(panel, startHeight);
+    else if (swapMode === 'slide') animatePanelContent(panel, dir);
   };
 
   tabList.forEach((tab, idx) => {

package/src/styles/audio.css

@@ -20,7 +20,10 @@
   --blok-audio-pad: var(--blok-space-3-5);
   --blok-audio-radius: var(--blok-radius-md);
   --blok-audio-wave-height: 56px;
-  --blok-audio-bar-height: 3px;
+  --blok-audio-bar-height: 4px;
+  /* lift the slim slider thumbs (volume + speed) off the track so they read as
+     tactile pucks rather than flat dots */
+  --blok-audio-thumb-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
   --blok-audio-ctrl-size: 30px;
   --blok-audio-play-size: 36px;
   --blok-audio-bar: var(--blok-border-subtle);
@@ -33,6 +36,46 @@
   --blok-audio-speed-pct: 50%;
   --blok-audio-pulse-ring: color-mix(in srgb, var(--blok-text-primary) 20%, transparent);
 
+  /* no-cover vinyl placeholder — a glossy black record. The disc body is built
+     from --blok-overlay-dark (near-black in both themes) so it always reads as
+     vinyl, not a grey CD; grooves + sheen are white at low alpha, the label is
+     a cream-white puck, the spindle is a crisp dark dot. A fixed specular sits
+     above the disc (placeholder::after) so grooves shimmer *under* it as it spins. */
+  --blok-audio-disc-size: 92px;
+  --blok-audio-groove-w: 0.75px;
+  --blok-audio-groove-gap: 2px;
+  --blok-audio-cover-glow: color-mix(in srgb, var(--blok-bg-primary) 55%, transparent);
+  /* glossy black record body: a near-black face with a centre→edge vignette so it
+     reads as a curved, light-catching surface rather than a flat circle. */
+  --blok-audio-disc-base: var(--blok-overlay-dark);
+  --blok-audio-disc-deep: color-mix(in srgb, #000 42%, var(--blok-overlay-dark));
+  --blok-audio-disc-edge: color-mix(in srgb, var(--blok-text-on-dark) 6%, var(--blok-overlay-dark));
+  --blok-audio-disc-groove: color-mix(in srgb, var(--blok-text-on-dark) 8%, transparent);
+  --blok-audio-disc-rim: color-mix(in srgb, var(--blok-text-on-dark) 16%, transparent);
+  --blok-audio-disc-rim-light: color-mix(in srgb, var(--blok-text-on-dark) 26%, transparent);
+  /* fixed specular reflection — two bright bands of "light" the grooves shimmer
+     under as the disc spins (this is what sells real glossy vinyl). */
+  --blok-audio-disc-sheen: color-mix(in srgb, var(--blok-text-on-dark) 32%, transparent);
+  --blok-audio-disc-sheen-soft: color-mix(in srgb, var(--blok-text-on-dark) 12%, transparent);
+  /* a soft highlight wedge printed on the disc — sweeps round with the grooves so
+     the (otherwise radially-symmetric) spin actually reads as motion. */
+  --blok-audio-disc-shine: color-mix(in srgb, var(--blok-text-on-dark) 10%, transparent);
+  /* centre label — a matte, faintly warm cream puck (not a flat white disc) */
+  --blok-audio-disc-label: color-mix(in srgb, var(--blok-text-on-dark) 93%, var(--blok-overlay-dark));
+  --blok-audio-disc-label-hi: var(--blok-text-on-dark);
+  --blok-audio-disc-label-edge: color-mix(in srgb, var(--blok-text-on-dark) 72%, var(--blok-overlay-dark));
+  --blok-audio-disc-label-ring: color-mix(in srgb, var(--blok-overlay-dark) 24%, transparent);
+  --blok-audio-disc-hole: var(--blok-overlay-dark);
+  /* opaque fill for the reflection mask (only its alpha matters) */
+  --blok-audio-mask-solid: #000;
+  /* depth shadows for the disc rim, label lift and spindle catch-light */
+  --blok-audio-disc-inner-shadow: rgba(0, 0, 0, 0.5);
+  --blok-audio-label-shadow: rgba(0, 0, 0, 0.35);
+  --blok-audio-spindle-catch: rgba(255, 255, 255, 0.4);
+  /* cover overlay button — a semi-transparent dark scrim (same near-black as
+     the disc, blended down to ~45% opacity so the art shows through) */
+  --blok-audio-cover-scrim: color-mix(in srgb, var(--blok-overlay-dark) 50%, transparent);
+
   position: relative;
   margin: var(--blok-space-2-5) 0;
   font-family: var(--blok-font-family, var(--blok-font-sans));
@@ -70,6 +113,20 @@
   display: none;
 }
 
+/* Top-of-card toolbar anchor — a zero-size marker the editor centers the +/tunes
+   buttons on. Pinned to the top-left of the grid; line-height stays a hair above 0
+   (the positioner floors a 0 line-height back to its 24px default), so the buttons
+   land flush with the top of the cover art. */
+[data-blok-tool="audio"] .blok-audio-toolbar-anchor {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  width: 0;
+  height: 0;
+  line-height: 1px;
+  pointer-events: none;
+}
+
 /* ----- block selection ------------------------------------ */
 [data-blok-element-content].bg-selection:has([data-blok-tool="audio"]) {
   background-color: transparent;
@@ -100,13 +157,215 @@
   object-fit: cover;
   display: block;
 }
+
+/* ----- change-cover overlay button (edit mode only) -------- */
+/* Stretches across the full cover panel; stays invisible until the cover
+   is hovered or the button receives keyboard focus — preventing it from
+   obscuring the art in read-only contexts. */
+[data-blok-tool="audio"] .blok-audio-cover__change {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  color: var(--blok-text-on-dark);
+  background: var(--blok-audio-cover-scrim);
+  opacity: 0;
+  transition: opacity var(--blok-duration-base) ease;
+}
+[data-blok-tool="audio"] .blok-audio-cover:hover .blok-audio-cover__change,
+[data-blok-tool="audio"] .blok-audio-cover.is-picker-open .blok-audio-cover__change,
+[data-blok-tool="audio"] .blok-audio-cover__change:focus-visible {
+  opacity: 1;
+}
+[data-blok-tool="audio"] .blok-audio-cover__change svg {
+  width: 20px;
+  height: 20px;
+  pointer-events: none;
+}
+
+/* ----- cover-picker dialog (top-layer promoted) ------------- */
+/* The dialog is its own elevated surface so the media-empty card inside layers
+   correctly. Two UA/reset hazards to beat:
+   1. The `[data-blok-top-layer][popover]` reset in main.css (specificity 0,0,2,0)
+      forces width:auto and strips border/padding — without an explicit width the
+      flex-column surface collapses to a ~2px sliver. So every box-model property
+      is re-asserted with matching specificity (mirrors the image-lightbox /
+      file-preview precedent).
+   2. The UA `[popover]` rule paints `background: Canvas` (white) and the reset
+      does NOT clear it. The media-empty card uses --blok-bg-secondary, which in
+      the dark theme is a translucent white overlay meant to sit on a dark parent;
+      over the white canvas it reads white. Painting the dialog with the solid
+      --blok-bg-primary surface gives that overlay the dark backdrop it expects.
+   Width stays a plain length (not a --blok-space token) per the proven pattern;
+   the other surface tokens resolve fine on the promoted element (colors +
+   spacing are bridged to [data-blok-top-layer]). The base rule covers the
+   no-Popover-API fallback (element stays in normal flow, no reset applied). */
+.blok-audio-cover-picker,
+.blok-audio-cover-picker[data-blok-top-layer][popover] {
+  z-index: 1;
+  width: min(440px, calc(100vw - 32px));
+  padding: var(--blok-space-2);
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-lg);
+  box-shadow: var(--blok-popover-box-shadow);
+}
+/* The picker lives at document.body, outside blok's scoped border-box reset, so
+   its subtree would default to content-box. The media-empty Upload/Link height-
+   swap animation measures the border-box height but animates the `height`
+   property — under content-box that adds the panel padding on top, overshooting
+   then snapping back (a visible height jump). Match the inline (border-box)
+   context the component was built for. */
+.blok-audio-cover-picker,
+.blok-audio-cover-picker * {
+  box-sizing: border-box;
+}
+
+/* Entrance — the picker rises + scales up from its top-left anchor corner so it
+   reads as growing out of the cover, matching the block's own mount language
+   (blok-audio-rise / --blok-ease-popover). The directional content slide between
+   the Upload/Link tabs is driven from media-empty-state.ts (WAAPI). */
+.blok-audio-cover-picker {
+  transform-origin: top left;
+  animation: blok-audio-cover-picker-in var(--blok-duration-slow) var(--blok-ease-popover) both;
+}
+
+@keyframes blok-audio-cover-picker-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .blok-audio-cover-picker { animation: none; }
+}
+
+/* ----- no-cover placeholder: a glossy black vinyl record --- */
 [data-blok-tool="audio"] .blok-audio-cover__placeholder {
+  position: relative;
   display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  /* faint top-centre sheen so the panel has depth behind the disc */
+  background: radial-gradient(120% 90% at 50% 36%, var(--blok-audio-cover-glow), transparent 70%);
 }
-[data-blok-tool="audio"] .blok-audio-cover__placeholder svg {
-  width: 34px;
-  height: 34px;
-  color: var(--blok-text-tertiary);
+
+/* fixed specular glint pinned over the disc — it does NOT rotate, so the grooves
+   shimmer beneath it as the record spins (the bit that sells the motion). */
+[data-blok-tool="audio"] .blok-audio-cover__placeholder::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--blok-audio-disc-size);
+  height: var(--blok-audio-disc-size);
+  transform: translate(-50%, -50%);
+  border-radius: var(--blok-radius-pill);
+  background:
+    /* bright crescent of light along the top rim */
+    radial-gradient(72% 50% at 50% 2%, var(--blok-audio-disc-sheen), transparent 60%),
+    /* the main gloss: two opposed soft bands (a vinyl "bow-tie" reflection) */
+    conic-gradient(
+      from 142deg at 50% 50%,
+      transparent 0 6%,
+      var(--blok-audio-disc-sheen) 15%,
+      transparent 30% 64%,
+      var(--blok-audio-disc-sheen-soft) 80%,
+      transparent 92% 100%
+    ),
+    /* faint bounce light in the lower-right quadrant */
+    radial-gradient(44% 36% at 72% 84%, var(--blok-audio-disc-sheen-soft), transparent 62%);
+  /* the gloss only lives on the vinyl — keep it off the matte paper label */
+  mask: radial-gradient(circle at center, transparent 30%, var(--blok-audio-mask-solid) 40%);
+  -webkit-mask: radial-gradient(circle at center, transparent 30%, var(--blok-audio-mask-solid) 40%);
+  pointer-events: none;
+}
+
+/* the record body: fine concentric grooves over a near-black radial face,
+   lifted off the panel by an inset rim + soft shadow. Its rotation is driven
+   imperatively by disc.ts (transform: rotate), which spins the platter up on
+   play and lets it coast down on pause — so the disc has real inertia rather
+   than snapping on/off with a CSS animation. */
+[data-blok-tool="audio"] .blok-audio-cover__disc {
+  position: relative;
+  will-change: transform;
+  width: var(--blok-audio-disc-size);
+  height: var(--blok-audio-disc-size);
+  border-radius: var(--blok-radius-pill);
+  background:
+    /* soft shine wedge that rotates with the grooves (rotation feedback) */
+    conic-gradient(
+      from 210deg,
+      transparent 0 64%,
+      var(--blok-audio-disc-shine) 78%,
+      transparent 92% 100%
+    ),
+    /* a bright hairline run just inside the edge — the glossy outer bevel */
+    radial-gradient(
+      circle at center,
+      transparent 82%,
+      var(--blok-audio-disc-rim-light) 85% 87%,
+      transparent 90%
+    ),
+    /* fine concentric grooves */
+    repeating-radial-gradient(
+      circle at center,
+      var(--blok-audio-disc-groove) 0 var(--blok-audio-groove-w),
+      transparent var(--blok-audio-groove-w) var(--blok-audio-groove-gap)
+    ),
+    /* glossy black face with a centre→edge vignette (curved-surface shading) */
+    radial-gradient(
+      circle at center,
+      var(--blok-audio-disc-edge) 0 14%,
+      var(--blok-audio-disc-base) 44%,
+      var(--blok-audio-disc-base) 72%,
+      var(--blok-audio-disc-deep) 100%
+    );
+  box-shadow:
+    inset 0 0 0 1px var(--blok-audio-disc-rim),
+    inset 0 0 7px var(--blok-audio-disc-inner-shadow),
+    var(--blok-image-shadow-resting);
+}
+
+/* centre label — a small matte cream puck with a printed concentric ring */
+[data-blok-tool="audio"] .blok-audio-cover__disc::before {
+  content: "";
+  position: absolute;
+  inset: 36%;
+  border-radius: var(--blok-radius-pill);
+  background:
+    /* a thin printed ring near the label rim */
+    radial-gradient(
+      circle at center,
+      transparent 58%,
+      var(--blok-audio-disc-label-ring) 60% 64%,
+      transparent 66%
+    ),
+    /* paper with a soft off-axis sheen */
+    radial-gradient(
+      circle at 40% 34%,
+      var(--blok-audio-disc-label-hi),
+      var(--blok-audio-disc-label) 52%,
+      var(--blok-audio-disc-label-edge)
+    );
+  box-shadow:
+    inset 0 0 0 1px var(--blok-audio-disc-rim),
+    0 1px 1px var(--blok-audio-label-shadow);
+}
+
+/* spindle hole — a crisp dark dot with a tiny rim catch */
+[data-blok-tool="audio"] .blok-audio-cover__disc::after {
+  content: "";
+  position: absolute;
+  inset: 47%;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-audio-disc-hole);
+  box-shadow: inset 0 1px 1px var(--blok-audio-spindle-catch);
 }
 
 /* ----- right column (title + artist + waveform + controls) - */
@@ -180,8 +439,12 @@
   margin-top: var(--blok-space-1);
 }
 
-/* generic control button */
-[data-blok-tool="audio"] .blok-audio-controls [data-role] {
+/* generic control button — scoped to <button> so the volume <input> and the
+   time <span> (both carry data-role) keep their own slim/text styling instead
+   of being clobbered into a 30px pill. Every button-specific rule below is also
+   anchored on `button[data-role…]` so they share this rule's specificity and
+   win on source order. */
+[data-blok-tool="audio"] .blok-audio-controls button[data-role] {
   flex-shrink: 0;
   display: inline-grid;
   place-items: center;
@@ -195,20 +458,20 @@
   cursor: pointer;
   transition: background var(--blok-duration-base) ease, color var(--blok-duration-base) ease, transform var(--blok-duration-base) ease;
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role]:hover {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role]:hover {
   background: var(--blok-bg-hover);
   color: var(--blok-text-primary);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role]:active {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role]:active {
   transform: scale(0.92);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role] svg {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role] svg {
   width: 17px;
   height: 17px;
 }
 
 /* play / pause — filled black puck */
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"] {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-play"] {
   width: var(--blok-audio-play-size);
   height: var(--blok-audio-play-size);
   margin-right: var(--blok-space-0-5);
@@ -216,15 +479,15 @@
   color: var(--blok-bg-primary);
   box-shadow: var(--blok-image-shadow-resting);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"]:hover {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-play"]:hover {
   background: var(--blok-text-primary);
   color: var(--blok-bg-primary);
   transform: scale(1.05);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"]:active {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-play"]:active {
   transform: scale(0.96);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"] svg {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-play"] svg {
   width: 19px;
   height: 19px;
 }
@@ -278,6 +541,7 @@
   height: 12px;
   border-radius: var(--blok-radius-pill);
   background: var(--blok-text-primary);
+  box-shadow: var(--blok-audio-thumb-shadow);
 }
 [data-blok-tool="audio"] .blok-audio-controls__volume::-moz-range-thumb {
   width: 12px;
@@ -285,14 +549,15 @@
   border: 0;
   border-radius: var(--blok-radius-pill);
   background: var(--blok-text-primary);
+  box-shadow: var(--blok-audio-thumb-shadow);
 }
 
 /* loop active state — neutral black, no accent color */
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-loop"][aria-pressed="true"] {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-loop"][aria-pressed="true"] {
   color: var(--blok-bg-primary);
   background: var(--blok-text-primary);
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-loop"][aria-pressed="true"]:hover {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-loop"][aria-pressed="true"]:hover {
   color: var(--blok-bg-primary);
   background: var(--blok-text-primary);
 }
@@ -303,7 +568,7 @@
   display: inline-flex;
   flex-shrink: 0;
 }
-[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-speed"][aria-expanded="true"] {
+[data-blok-tool="audio"] .blok-audio-controls button[data-role="audio-speed"][aria-expanded="true"] {
   background: var(--blok-bg-hover);
   color: var(--blok-text-primary);
 }
@@ -332,10 +597,50 @@
   margin-bottom: var(--blok-space-2);
 }
 
+/* − [slider] ＋ — flat icon steppers flank a flexible track (mirrors the video
+   player's speed control). */
+[data-blok-tool="audio"] .blok-audio-controls__speed-slider-row {
+  display: flex;
+  align-items: center;
+  gap: var(--blok-space-1-5);
+  margin-bottom: var(--blok-space-2);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-step {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--blok-radius-sm);
+  background: transparent;
+  color: var(--blok-text-tertiary);
+  cursor: pointer;
+  transition: background var(--blok-duration-base) ease, color var(--blok-duration-base) ease, transform var(--blok-duration-base) ease, opacity var(--blok-duration-base) ease;
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-step:hover {
+  background: var(--blok-bg-hover);
+  color: var(--blok-text-primary);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-step:active {
+  transform: scale(0.92);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-step:disabled {
+  opacity: 0.35;
+  cursor: default;
+  transform: none;
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-step svg {
+  width: 15px;
+  height: 15px;
+}
+
 [data-blok-tool="audio"] .blok-audio-controls__speed-slider {
-  width: 100%;
+  flex: 1 1 auto;
+  min-width: 0;
   height: var(--blok-audio-bar-height);
-  margin: 0 0 var(--blok-space-2);
+  margin: 0;
   -webkit-appearance: none;
   appearance: none;
   background: linear-gradient(
@@ -353,6 +658,7 @@
   height: 12px;
   border-radius: var(--blok-radius-pill);
   background: var(--blok-text-primary);
+  box-shadow: var(--blok-audio-thumb-shadow);
 }
 [data-blok-tool="audio"] .blok-audio-controls__speed-slider::-moz-range-thumb {
   width: 12px;
@@ -360,6 +666,7 @@
   border: 0;
   border-radius: var(--blok-radius-pill);
   background: var(--blok-text-primary);
+  box-shadow: var(--blok-audio-thumb-shadow);
 }
 
 [data-blok-tool="audio"] .blok-audio-controls__speed-chips {
@@ -386,30 +693,29 @@
 }
 
 /* ----- caption row (full-width footer) --------------------
-   The row is a single-track grid wrapper so it can collapse to zero height
-   (grid-template-rows 1fr → 0fr) when the caption is toggled, while the inner
-   element holds the actual padding/border that fade out with it. */
+   The row claims its full height in a single layout step; the visible reveal
+   rides transform + opacity on the inner, keeping the whole animation on the
+   compositor. This is deliberate: animating the row's *height* would resize the
+   card every frame, forcing a re-raster of its 24px-blur box-shadow and the
+   high-DPI waveform canvas each frame — which is what made the toggle lag.
+   overflow:hidden clips the inner as it slides; padding/border live on the
+   caption child below so they're clipped too. */
 [data-blok-tool="audio"] .blok-audio-caption-row {
   grid-column: 1 / -1;
   grid-row: 2;
-  display: grid;
-  grid-template-rows: 1fr;
-  transition:
-    grid-template-rows var(--blok-duration-slow) var(--blok-ease-popover),
-    opacity var(--blok-duration-slow) var(--blok-ease-popover);
-}
-[data-blok-tool="audio"] .blok-audio-caption-row.is-collapsed {
-  grid-template-rows: 0fr;
-  opacity: 0;
+  overflow: hidden;
 }
-/* overflow:hidden + min-height:0 lets the grid track collapse fully to 0; the
-   padding/border live on the caption child below so they get clipped too. */
 [data-blok-tool="audio"] .blok-audio-caption-row__inner {
-  min-height: 0;
-  overflow: hidden;
   display: flex;
   align-items: flex-start;
   gap: var(--blok-space-2);
+  transition:
+    transform var(--blok-duration-slow) var(--blok-ease-popover),
+    opacity var(--blok-duration-slow) var(--blok-ease-popover);
+}
+[data-blok-tool="audio"] .blok-audio-caption-row.is-collapsed .blok-audio-caption-row__inner {
+  transform: translateY(6px);
+  opacity: 0;
 }
 [data-blok-tool="audio"] .blok-audio-caption {
   flex: 1 1 auto;
@@ -518,6 +824,9 @@
   50%      { height: 96%; }
 }
 
+/* The vinyl placeholder's spin is driven by disc.ts (inertial rotation via
+   transform), not a CSS animation — see the .blok-audio-cover__disc rule. */
+
 /* ----- 3. play puck heartbeat while playing ---------------------- */
 [data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-controls [data-role="audio-play"] {
   animation: blok-audio-pulse var(--blok-duration-rotation) var(--blok-ease-spring) infinite;
@@ -546,6 +855,9 @@
   }
   /* The badge still appears while playing — it just holds steady. */
   [data-blok-tool="audio"] .blok-audio-eq { transition: none; }
+  /* The record holds still under reduced motion (disc.ts skips the spin loop). */
   /* Caption appears/disappears instantly (JS also takes the instant path). */
-  [data-blok-tool="audio"] .blok-audio-caption-row { transition: none; }
+  [data-blok-tool="audio"] .blok-audio-caption-row__inner { transition: none; }
+  /* Cover overlay button appears instantly — no fade. */
+  [data-blok-tool="audio"] .blok-audio-cover__change { transition: none; }
 }