@jackuait/blok 0.16.1 → 0.18.0

package/src/styles/audio.css

@@ -0,0 +1,528 @@
+
+/* =================================================
+   Audio block tool — "Now Playing" card
+
+   Full-bleed media player: the card always spans the editor column. A tall
+   rounded cover panel anchors the left; the right column stacks title, artist,
+   a hero waveform scrubber and a slim transport bar. The caption spans the
+   full width beneath, separated by a hairline. Airbnb-neutral surfaces, black
+   active states, restrained shadows — palette mirrors the image/video tools.
+   ================================================= */
+
+/* ----- palette / token declarations -----
+   Every --blok-audio-* var used below must be declared here so the
+   declared-custom-props gate (R3) passes. The waveform fill vars are also
+   set inline by waveform.ts; the declarations here supply non-zero defaults
+   that read correctly before JS runs. */
+[data-blok-tool="audio"] {
+  --blok-audio-cover-size: 104px;
+  --blok-audio-gap: var(--blok-space-3-5);
+  --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-ctrl-size: 30px;
+  --blok-audio-play-size: 36px;
+  --blok-audio-bar: var(--blok-border-subtle);
+  --blok-audio-bar-played: var(--blok-text-primary);
+  --blok-audio-seek-pct: 0%;
+  --blok-audio-vol-pct: 100%;
+  --blok-audio-speed-pct: 50%;
+  --blok-audio-pulse-ring: color-mix(in srgb, var(--blok-text-primary) 20%, transparent);
+
+  position: relative;
+  margin: var(--blok-space-2-5) 0;
+  font-family: var(--blok-font-family, var(--blok-font-sans));
+}
+
+/* ----- alignment (caption text only — the card is always full width) ----- */
+[data-blok-tool="audio"][data-align="left"]   { text-align: left; }
+[data-blok-tool="audio"][data-align="center"] { text-align: center; }
+[data-blok-tool="audio"][data-align="right"]  { text-align: right; }
+
+/* ----- card wrapper (figure) -------------------------------
+   CSS grid: cover + body share row 1; the caption spans both columns on
+   row 2. The <audio> media element is laid out via display:none so it never
+   claims a grid cell. */
+[data-blok-tool="audio"] .blok-audio-inner {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: stretch;
+  column-gap: var(--blok-audio-gap);
+  row-gap: var(--blok-space-2-5);
+  width: 100%;
+  padding: var(--blok-audio-pad);
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-lg);
+  box-shadow: var(--blok-image-shadow-resting);
+  text-align: left;
+  transition: box-shadow var(--blok-duration-base) ease, border-color var(--blok-duration-base) ease;
+}
+[data-blok-tool="audio"] .blok-audio-inner:hover {
+  box-shadow: var(--blok-video-shadow-hover);
+  border-color: var(--blok-border-secondary);
+}
+[data-blok-tool="audio"] [data-role="audio-media"] {
+  display: none;
+}
+
+/* ----- block selection ------------------------------------ */
+[data-blok-element-content].bg-selection:has([data-blok-tool="audio"]) {
+  background-color: transparent;
+}
+[data-blok-element-content].bg-selection:has([data-blok-tool="audio"]) .blok-audio-inner {
+  background-color: var(--blok-selection);
+}
+
+/* ----- cover art — tall rounded panel on the left --------- */
+[data-blok-tool="audio"] .blok-audio-cover {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+  align-self: stretch;
+  width: var(--blok-audio-cover-size);
+  min-height: var(--blok-audio-cover-size);
+  border-radius: var(--blok-radius-md);
+  overflow: hidden;
+  background: var(--blok-bg-secondary);
+  box-shadow: inset 0 0 0 1px var(--blok-border-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-blok-tool="audio"] .blok-audio-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+[data-blok-tool="audio"] .blok-audio-cover__placeholder {
+  display: flex;
+}
+[data-blok-tool="audio"] .blok-audio-cover__placeholder svg {
+  width: 34px;
+  height: 34px;
+  color: var(--blok-text-tertiary);
+}
+
+/* ----- right column (title + artist + waveform + controls) - */
+[data-blok-tool="audio"] .blok-audio-body {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--blok-space-1-5);
+}
+
+/* ----- title ----------------------------------------------- */
+[data-blok-tool="audio"] .blok-audio-title {
+  font-size: var(--blok-font-size-body);
+  font-weight: var(--blok-font-weight-semibold);
+  color: var(--blok-text-primary);
+  line-height: var(--blok-line-height-tight);
+  letter-spacing: -0.01em;
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-blok-tool="audio"] [data-role="audio-title"][contenteditable="true"]:empty::before {
+  content: attr(data-placeholder);
+  color: var(--blok-text-tertiary);
+  pointer-events: none;
+}
+
+/* ----- artist ---------------------------------------------- */
+[data-blok-tool="audio"] .blok-audio-artist {
+  font-size: var(--blok-font-size-ui-label);
+  font-weight: var(--blok-font-weight-regular);
+  color: var(--blok-text-secondary);
+  line-height: var(--blok-line-height-tight);
+  outline: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+[data-blok-tool="audio"] [data-role="audio-artist"][contenteditable="true"]:empty::before {
+  content: attr(data-placeholder);
+  color: var(--blok-text-tertiary);
+  pointer-events: none;
+}
+
+/* ----- waveform canvas (hero scrubber) -------------------- */
+[data-blok-tool="audio"] .blok-audio-waveform {
+  position: relative;
+  width: 100%;
+  height: var(--blok-audio-wave-height);
+  margin-top: var(--blok-space-1);
+  cursor: pointer;
+}
+[data-blok-tool="audio"] .blok-audio-waveform__canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* ----- controls bar --------------------------------------- */
+[data-blok-tool="audio"] .blok-audio-controls {
+  --blok-audio-seek-pct: 0%;
+  --blok-audio-vol-pct: 100%;
+  --blok-audio-speed-pct: 50%;
+  display: flex;
+  align-items: center;
+  gap: var(--blok-space-2-5);
+  margin-top: var(--blok-space-1);
+}
+
+/* generic control button */
+[data-blok-tool="audio"] .blok-audio-controls [data-role] {
+  flex-shrink: 0;
+  display: inline-grid;
+  place-items: center;
+  width: var(--blok-audio-ctrl-size);
+  height: var(--blok-audio-ctrl-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--blok-radius-pill);
+  background: transparent;
+  color: var(--blok-text-secondary);
+  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 {
+  background: var(--blok-bg-hover);
+  color: var(--blok-text-primary);
+}
+[data-blok-tool="audio"] .blok-audio-controls [data-role]:active {
+  transform: scale(0.92);
+}
+[data-blok-tool="audio"] .blok-audio-controls [data-role] svg {
+  width: 17px;
+  height: 17px;
+}
+
+/* play / pause — filled black puck */
+[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"] {
+  width: var(--blok-audio-play-size);
+  height: var(--blok-audio-play-size);
+  margin-right: var(--blok-space-0-5);
+  background: var(--blok-text-primary);
+  color: var(--blok-bg-primary);
+  box-shadow: var(--blok-image-shadow-resting);
+}
+[data-blok-tool="audio"] .blok-audio-controls [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 {
+  transform: scale(0.96);
+}
+[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-play"] svg {
+  width: 19px;
+  height: 19px;
+}
+
+/* time readout */
+[data-blok-tool="audio"] .blok-audio-controls__time {
+  flex-shrink: 0;
+  margin-right: auto;
+  font-size: var(--blok-font-size-ui-compact);
+  font-weight: var(--blok-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: var(--blok-text-secondary);
+  user-select: none;
+}
+
+/* volume cluster */
+[data-blok-tool="audio"] .blok-audio-controls__volume-wrap {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--blok-space-1);
+}
+
+/* volume range */
+[data-blok-tool="audio"] .blok-audio-controls__volume {
+  width: 0;
+  height: var(--blok-audio-bar-height);
+  margin: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  background: linear-gradient(
+    to right,
+    var(--blok-audio-bar-played) var(--blok-audio-vol-pct),
+    var(--blok-audio-bar) var(--blok-audio-vol-pct)
+  );
+  border-radius: var(--blok-radius-pill);
+  opacity: 0;
+  cursor: pointer;
+  transition: width var(--blok-duration-slow) ease, opacity var(--blok-duration-slow) ease;
+}
+[data-blok-tool="audio"] .blok-audio-controls__volume-wrap:hover .blok-audio-controls__volume,
+[data-blok-tool="audio"] .blok-audio-controls__volume-wrap:focus-within .blok-audio-controls__volume {
+  width: 64px;
+  opacity: 1;
+}
+[data-blok-tool="audio"] .blok-audio-controls__volume::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-text-primary);
+}
+[data-blok-tool="audio"] .blok-audio-controls__volume::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-text-primary);
+}
+
+/* loop active state — neutral black, no accent color */
+[data-blok-tool="audio"] .blok-audio-controls [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 {
+  color: var(--blok-bg-primary);
+  background: var(--blok-text-primary);
+}
+
+/* speed gear + its anchored menu */
+[data-blok-tool="audio"] .blok-audio-controls__speed-wrap {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+[data-blok-tool="audio"] .blok-audio-controls [data-role="audio-speed"][aria-expanded="true"] {
+  background: var(--blok-bg-hover);
+  color: var(--blok-text-primary);
+}
+
+/* ----- speed menu ----------------------------------------- */
+[data-blok-tool="audio"] .blok-audio-controls__speed-menu {
+  position: absolute;
+  bottom: calc(100% + var(--blok-space-2));
+  left: 0;
+  min-width: 132px;
+  padding: var(--blok-space-2);
+  background: var(--blok-bg-primary);
+  border: 1px solid var(--blok-border-subtle);
+  border-radius: var(--blok-radius-md);
+  box-shadow: var(--blok-image-shadow-popover);
+  z-index: var(--blok-z-popover);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-menu[hidden] { display: none; }
+
+[data-blok-tool="audio"] .blok-audio-controls__speed-readout {
+  font-size: var(--blok-font-size-ui-label);
+  font-weight: var(--blok-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  color: var(--blok-text-primary);
+  text-align: center;
+  margin-bottom: var(--blok-space-2);
+}
+
+[data-blok-tool="audio"] .blok-audio-controls__speed-slider {
+  width: 100%;
+  height: var(--blok-audio-bar-height);
+  margin: 0 0 var(--blok-space-2);
+  -webkit-appearance: none;
+  appearance: none;
+  background: linear-gradient(
+    to right,
+    var(--blok-audio-bar-played) var(--blok-audio-speed-pct),
+    var(--blok-audio-bar) var(--blok-audio-speed-pct)
+  );
+  border-radius: var(--blok-radius-pill);
+  cursor: pointer;
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-text-primary);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-slider::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border: 0;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-text-primary);
+}
+
+[data-blok-tool="audio"] .blok-audio-controls__speed-chips {
+  display: flex;
+  gap: var(--blok-space-1);
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-chip {
+  flex: 1 1 0;
+  padding: var(--blok-space-1) 0;
+  border: 0;
+  border-radius: var(--blok-radius-sm);
+  background: transparent;
+  color: var(--blok-text-secondary);
+  font-size: var(--blok-font-size-ui-compact);
+  font-weight: var(--blok-font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  cursor: pointer;
+  transition: background var(--blok-duration-base) ease, color var(--blok-duration-base) ease;
+}
+[data-blok-tool="audio"] .blok-audio-controls__speed-chip:hover {
+  background: var(--blok-bg-hover);
+  color: var(--blok-text-primary);
+}
+
+/* ----- caption row (full-width footer) -------------------- */
+[data-blok-tool="audio"] .blok-audio-caption-row {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--blok-space-2);
+  padding-top: var(--blok-space-2-5);
+  border-top: 1px solid var(--blok-border-subtle);
+}
+[data-blok-tool="audio"] .blok-audio-caption {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: block;
+  font-size: var(--blok-font-size-ui-label);
+  color: var(--blok-text-secondary);
+  line-height: var(--blok-line-height-body);
+  outline: none;
+  min-height: 1em;
+}
+[data-blok-tool="audio"] [data-role="audio-caption"][contenteditable="true"]:empty::before {
+  content: attr(data-placeholder);
+  color: var(--blok-text-tertiary);
+  pointer-events: none;
+}
+
+/* ----- empty / loading / error states --------------------- */
+[data-blok-tool="audio"][data-state="empty"] .blok-audio-inner,
+[data-blok-tool="audio"][data-state="loading"] .blok-audio-inner {
+  opacity: 0.7;
+}
+[data-blok-tool="audio"][data-state="error"] .blok-audio-inner {
+  border-color: color-mix(in srgb, var(--blok-color-danger) 30%, var(--blok-border-subtle));
+  background: color-mix(in srgb, var(--blok-color-danger) 4%, var(--blok-bg-primary));
+}
+
+/* ----- hide caption in non-rendered states --------------- */
+[data-blok-tool="audio"]:not([data-state="rendered"]) .blok-audio-caption-row {
+  display: none;
+}
+
+/* =================================================
+   Motion — bring the player to life
+
+   Three state-driven flourishes, all CSS-only and reduced-motion gated:
+     1. A staggered entrance as the rendered card mounts.
+     2. A "now playing" equalizer badge that only dances while data-playing.
+     3. A soft heartbeat ring on the play puck while data-playing.
+   ================================================= */
+
+/* ----- 1. mount entrance — rows lift into place, staggered -------- */
+[data-blok-tool="audio"][data-state="rendered"] .blok-audio-cover,
+[data-blok-tool="audio"][data-state="rendered"] .blok-audio-title,
+[data-blok-tool="audio"][data-state="rendered"] .blok-audio-artist,
+[data-blok-tool="audio"][data-state="rendered"] .blok-audio-waveform,
+[data-blok-tool="audio"][data-state="rendered"] .blok-audio-controls {
+  animation: blok-audio-rise var(--blok-duration-fade) var(--blok-ease-popover) both;
+}
+[data-blok-tool="audio"] .blok-audio-title    { animation-delay: 40ms; }
+[data-blok-tool="audio"] .blok-audio-artist   { animation-delay: 80ms; }
+[data-blok-tool="audio"] .blok-audio-waveform { animation-delay: 120ms; }
+[data-blok-tool="audio"] .blok-audio-controls { animation-delay: 160ms; }
+
+@keyframes blok-audio-rise {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* ----- 2. now-playing equalizer badge ---------------------------- */
+[data-blok-tool="audio"] .blok-audio-eq {
+  position: absolute;
+  left: var(--blok-space-1-5);
+  bottom: var(--blok-space-1-5);
+  display: flex;
+  align-items: flex-end;
+  gap: var(--blok-space-0-5);
+  height: 13px;
+  padding: var(--blok-space-1);
+  border-radius: var(--blok-radius-sm);
+  background: var(--blok-overlay-dark);
+  opacity: 0;
+  transform: translateY(3px) scale(0.85);
+  transform-origin: bottom left;
+  pointer-events: none;
+  transition:
+    opacity var(--blok-duration-slow) var(--blok-ease-popover),
+    transform var(--blok-duration-slow) var(--blok-ease-popover);
+}
+[data-blok-tool="audio"] .blok-audio-eq__bar {
+  width: 3px;
+  height: 30%;
+  border-radius: var(--blok-radius-pill);
+  background: var(--blok-text-on-dark);
+}
+[data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-eq {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+[data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-eq__bar {
+  animation: blok-audio-eq-bounce var(--blok-duration-bounce) var(--blok-ease-spring) infinite;
+}
+[data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-eq__bar:nth-child(2) {
+  animation-delay: -450ms;
+  animation-duration: 620ms;
+}
+[data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-eq__bar:nth-child(3) {
+  animation-delay: -200ms;
+  animation-duration: 540ms;
+}
+
+@keyframes blok-audio-eq-bounce {
+  0%, 100% { height: 26%; }
+  50%      { height: 96%; }
+}
+
+/* ----- 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;
+}
+
+@keyframes blok-audio-pulse {
+  0%   { box-shadow: var(--blok-image-shadow-resting), 0 0 0 0 var(--blok-audio-pulse-ring); }
+  70%  { box-shadow: var(--blok-image-shadow-resting), 0 0 0 7px transparent; }
+  100% { box-shadow: var(--blok-image-shadow-resting), 0 0 0 0 transparent; }
+}
+
+/* ----- reduced motion ------------------------------------ */
+@media (prefers-reduced-motion: reduce) {
+  [data-blok-tool="audio"] .blok-audio-inner,
+  [data-blok-tool="audio"] .blok-audio-controls [data-role],
+  [data-blok-tool="audio"] .blok-audio-controls__volume { transition: none; }
+
+  [data-blok-tool="audio"][data-state="rendered"] .blok-audio-cover,
+  [data-blok-tool="audio"][data-state="rendered"] .blok-audio-title,
+  [data-blok-tool="audio"][data-state="rendered"] .blok-audio-artist,
+  [data-blok-tool="audio"][data-state="rendered"] .blok-audio-waveform,
+  [data-blok-tool="audio"][data-state="rendered"] .blok-audio-controls,
+  [data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-eq__bar,
+  [data-blok-tool="audio"] .blok-audio-inner[data-playing="true"] .blok-audio-controls [data-role="audio-play"] {
+    animation: none;
+  }
+  /* The badge still appears while playing — it just holds steady. */
+  [data-blok-tool="audio"] .blok-audio-eq { transition: none; }
+}

package/src/styles/colors.css

@@ -414,6 +414,37 @@
 
   /* Image error-state radius (slightly larger than --blok-radius-md). */
   --blok-radius-md-plus: 8px;
+
+  /* Video player custom controls — Notion-style minimal palette: white glyphs
+     on a subtle dark scrim, neutral progress fill, no coral. */
+  --blok-video-stage: #000000;
+  --blok-video-accent: #ffffff;
+  --blok-video-control-fg: #ffffff;
+  --blok-video-control-bg-hover: rgba(255, 255, 255, 0.1);
+  --blok-video-control-bg-active: rgba(255, 255, 255, 0.2);
+  --blok-video-time-fg: rgba(255, 255, 255, 0.8);
+  --blok-video-track: rgba(255, 255, 255, 0.2);
+  --blok-video-buffered: rgba(255, 255, 255, 0.35);
+  --blok-video-volume-track: rgba(0, 0, 0, 0.3);
+  --blok-video-thumb: #ffffff;
+  --blok-video-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  --blok-video-burst-bg: rgba(0, 0, 0, 0.5);
+  --blok-video-burst-fg: #ffffff;
+  --blok-video-burst-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
+  --blok-video-burst-ring: rgba(255, 255, 255, 0.4);
+  /* Settings popover — near-opaque dark so video never bleeds through the text. */
+  --blok-video-menu-bg: rgba(22, 22, 22, 0.94);
+  --blok-video-menu-value-fg: rgba(255, 255, 255, 0.62);
+  /* Frosted-glass edge + resting glyph tint + selected-row wash. */
+  --blok-video-menu-border: rgba(255, 255, 255, 0.08);
+  --blok-video-menu-icon: rgba(255, 255, 255, 0.9);
+  --blok-video-menu-row-active: color-mix(in srgb, var(--blok-video-accent) 14%, transparent);
+  --blok-video-theater-scrim: rgba(0, 0, 0, 0.8);
+  --blok-video-theater-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
+  --blok-video-scrim-strong: rgba(0, 0, 0, 0.6);
+  --blok-video-scrim-mid: rgba(0, 0, 0, 0.2);
+  --blok-video-shadow-hover: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
+  --blok-video-focus-ring: color-mix(in srgb, var(--blok-video-accent) 30%, transparent);
 }
 
 /* ─── Dark theme — system preference ────────────────── */

package/src/styles/keyframes.css

@@ -66,3 +66,11 @@
   60%  { background-color: var(--blok-selection); }
   100% { background-color: transparent; }
 }
+
+/* Soft nudge when a resizable block (image/video/embed) hits its minimum
+   width — shared by the resize-cue rules in resize-cue.css. */
+@keyframes blok-resize-recoil {
+  0%   { transform: translateX(0); }
+  50%  { transform: translateX(3px); }
+  100% { transform: translateX(0); }
+}

package/src/styles/main.css

@@ -357,10 +357,13 @@
 @import './database.css';
 @import './media-empty.css';
 @import './image.css';
+@import './video.css';
+@import './audio.css';
 @import './embed.css';
 @import './bookmark.css';
 @import './file.css';
 @import './columns.css';
+@import './resize-cue.css';
 
 /*
   Image tool — selectors audited by unit tests (no backdrop-filter regression,

package/src/styles/resize-cue.css

@@ -0,0 +1,26 @@
+/*
+  Shared resize floor cue. When a resizable block (image / video / embed) is
+  dragged to its minimum width, attachResizeHandle sets data-resize-blocked on
+  the figure (see image/resizer.ts). The figure gives a soft nudge and the
+  dragged handle turns neutral, signalling "can't shrink further".
+
+  Imported AFTER the per-tool stylesheets so the handle rule wins the cascade
+  over each tool's same-specificity [data-role="resize-handle"]:hover/:active
+  rules (the [data-edge] qualifier matches their specificity; later source
+  order breaks the tie).
+*/
+
+[data-resize-blocked="true"] {
+  animation: blok-resize-recoil 260ms ease-out;
+}
+[data-resize-blocked="true"] [data-role="resize-handle"][data-edge] {
+  background: var(--blok-handle-fg-default);
+  border-color: var(--blok-handle-fg-default);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-resize-blocked="true"] {
+    animation: none;
+  }
+}