@jackuait/blok 0.19.1 → 0.20.0

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; }
 }

package/src/styles/tables.css

@@ -152,3 +152,13 @@
 [data-blok-theme="dark"] [data-blok-interface] [data-blok-table-haze="right"] {
   background-image: linear-gradient(to left, var(--blok-dark), transparent);
 }
+
+/* Table card pins its top toolbar anchor absolutely to the (position:relative)
+   wrapper top, so the +/tunes buttons sit flush with the table's top edge while
+   the marker stays out of the flow — it never becomes the wrapper's firstChild,
+   which the grid/scroll structure relies on. */
+[data-blok-tool="table"] .blok-toolbar-top-anchor {
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/src/tools/audio/constants.ts

@@ -19,3 +19,9 @@ export const COVER_DATA_URL_CAP_BYTES = 150 * 1024;
 
 /** Direct links to a playable audio file. */
 export const URL_PATTERN = /^https?:\/\/\S+\.(mp3|wav|ogg|oga|m4a|aac|flac|weba)(\?\S*)?$/i;
+
+/** Accepted cover-image MIME types (family wildcard). */
+export const COVER_TYPES = ['image/*'] as const;
+
+/** Max cover-image size in bytes. */
+export const COVER_MAX_SIZE = 10 * 1024 * 1024; // 10 MiB

package/src/tools/audio/controls.ts

@@ -1,4 +1,5 @@
 import {
+  IconMinus,
   IconPlayerLoop,
   IconPlayerPause,
   IconPlayerPlay,
@@ -6,7 +7,9 @@ import {
   IconPlayerSpeed,
   IconPlayerVolume,
   IconPlayerVolumeMute,
+  IconPlus,
 } from '../../components/icons';
+import { createPlatterSpin } from './disc';
 import type { AudioData } from '../../../types/tools/audio';
 
 /** Minimal storage seam (localStorage-shaped) for volume + position persistence. */
@@ -99,11 +102,17 @@ export function attachControls({
 
   const state = { playing: false, selectedRate: 1 };
 
+  // Inertial spin for the no-cover vinyl record (no-op when a cover image is
+  // shown — the disc only exists in the placeholder). Spins up on play, coasts
+  // down on pause.
+  const platter = createPlatterSpin(figure);
+
   const setPlaying = (next: boolean): void => {
     state.playing = next;
     figure.setAttribute('data-playing', String(next));
     playToggle.innerHTML = next ? IconPlayerPause : IconPlayerPlay;
     playToggle.setAttribute('aria-label', next ? 'Pause' : 'Play');
+    if (next) platter.start(); else platter.stop();
   };
   setPlaying(false);
 
@@ -139,7 +148,10 @@ export function attachControls({
     muteToggle.innerHTML = muted ? IconPlayerVolumeMute : IconPlayerVolume;
     muteToggle.setAttribute('aria-label', muted ? 'Unmute' : 'Mute');
     volumeInput.value = muted ? '0' : String(media.volume);
-    volumeInput.style.setProperty('--blok-vol-pct', `${Number(volumeInput.value) * 100}%`);
+    // audio.css paints the filled track from --blok-audio-vol-pct (same naming
+    // as the speed slider's --blok-audio-speed-pct); writing any other name
+    // freezes the fill at its 100% default, so muted looks identical to full.
+    volumeInput.style.setProperty('--blok-audio-vol-pct', `${Number(volumeInput.value) * 100}%`);
   };
 
   // ----- persistence -----
@@ -207,6 +219,20 @@ export function attachControls({
   speedReadout.setAttribute('aria-hidden', 'true');
   speedReadout.textContent = speedLabel(state.selectedRate);
 
+  // − [slider] ＋ — flat steppers flank the track, mirroring the video player.
+  // Identified by class only (no data-role) so the generic button[data-role]
+  // control-button rule doesn't size them into 30px pills.
+  const speedStepper = (icon: string, label: string): HTMLButtonElement => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'blok-audio-controls__speed-step';
+    btn.setAttribute('aria-label', label);
+    btn.innerHTML = icon;
+    return btn;
+  };
+  const speedDec = speedStepper(IconMinus, 'Decrease playback speed');
+  const speedInc = speedStepper(IconPlus, 'Increase playback speed');
+
   const speedSlider = document.createElement('input');
   speedSlider.type = 'range';
   speedSlider.className = 'blok-audio-controls__speed-slider';
@@ -216,6 +242,12 @@ export function attachControls({
   speedSlider.value = String(state.selectedRate);
   speedSlider.setAttribute('aria-label', 'Playback speed');
 
+  // Drive the elapsed-fill gradient from JS so the painted track tracks the
+  // native knob exactly (same approach as the volume + video sliders).
+  const speedFillPct = (rate: number): string =>
+    `${((rate - SPEED_MIN) / (SPEED_MAX - SPEED_MIN)) * 100}%`;
+  speedSlider.style.setProperty('--blok-audio-speed-pct', speedFillPct(state.selectedRate));
+
   const setRate = (rate: number): void => {
     const next = clampRate(rate);
     state.selectedRate = next;
@@ -223,11 +255,25 @@ export function attachControls({
     speedReadout.textContent = speedLabel(next);
     speedSlider.value = String(next);
     speedSlider.setAttribute('aria-valuetext', speedLabel(next));
+    speedSlider.style.setProperty('--blok-audio-speed-pct', speedFillPct(next));
+    speedDec.disabled = next <= SPEED_MIN;
+    speedInc.disabled = next >= SPEED_MAX;
   };
 
   const onSpeedSliderInput = (): void => setRate(Number(speedSlider.value));
   speedSlider.addEventListener('input', onSpeedSliderInput);
-
+  speedDec.addEventListener('click', () => setRate(state.selectedRate - SPEED_SLIDER_STEP));
+  speedInc.addEventListener('click', () => setRate(state.selectedRate + SPEED_SLIDER_STEP));
+  speedDec.disabled = state.selectedRate <= SPEED_MIN;
+  speedInc.disabled = state.selectedRate >= SPEED_MAX;
+
+  const speedSliderRow = document.createElement('div');
+  speedSliderRow.className = 'blok-audio-controls__speed-slider-row';
+  speedSliderRow.append(speedDec, speedSlider, speedInc);
+
+  // Quiet quick-jump presets (mirrors the video player): every chip reads the
+  // same muted weight, lifting only on hover. The live rate is communicated by
+  // the readout + slider knob, not a filled "selected" chip.
   const speedChipRow = document.createElement('div');
   speedChipRow.className = 'blok-audio-controls__speed-chips';
   SPEED_PRESETS.forEach((rate) => {
@@ -235,14 +281,13 @@ export function attachControls({
     chip.type = 'button';
     chip.className = 'blok-audio-controls__speed-chip';
     chip.textContent = `${rate}×`;
-    chip.addEventListener('click', () => {
-      setRate(rate);
-      closeSpeedMenu();
-    });
+    // Apply the preset but leave the menu open so the user can keep nudging the
+    // rate (slider/steppers/other presets) without re-opening it each time.
+    chip.addEventListener('click', () => setRate(rate));
     speedChipRow.appendChild(chip);
   });
 
-  speedMenu.append(speedReadout, speedSlider, speedChipRow);
+  speedMenu.append(speedReadout, speedSliderRow, speedChipRow);
 
   // Gear + menu share a positioned wrapper so the menu anchors directly above
   // the gear button (rather than the card corner).
@@ -391,6 +436,7 @@ export function attachControls({
 
   // ----- destroy -----
   const destroy = (): void => {
+    platter.destroy();
     closeSpeedMenu();
 
     playToggle.removeEventListener('click', togglePlay);