@jackuait/blok 0.17.0 → 0.18.0

package/src/components/i18n/locales/yi/messages.json

@@ -388,6 +388,7 @@
   "tools.file.previewDownload": "אראפלאדן",
   "tools.file.previewOpenInNewTab": "עפֿן אין נײַעם טאַב",
   "toolNames.video": "ווידעא",
+  "toolNames.audio": "אויך",
   "tools.video.alignment": "אויסגלייכונג",
   "tools.video.alignmentLeft": "לינקס",
   "tools.video.alignmentCenter": "צענטער",
@@ -415,5 +416,31 @@
   "tools.video.emptyMaxSize": "ביז {size}",
   "tools.video.emptyUrlPlaceholder": "לייג צו ווידעא URL…",
   "tools.video.emptyUrlAria": "ווידעא URL",
-  "tools.video.emptySourceAria": "ווידעא מקור"
+  "tools.video.emptySourceAria": "ווידעא מקור",
+  "tools.audio.alignment": "אויסגלייכונג",
+  "tools.audio.alignmentLeft": "לינקס",
+  "tools.audio.alignmentCenter": "צענטער",
+  "tools.audio.alignmentRight": "רעכטס",
+  "tools.audio.caption": "אונטערקעפּל",
+  "tools.audio.loop": "שלייף",
+  "tools.audio.replace": "אויסבייטן אויך",
+  "tools.audio.download": "אראפלאדן",
+  "tools.audio.copyUrl": "קאָפּיר URL",
+  "tools.audio.uploading": "ארויפלאדנדיק…",
+  "tools.audio.errorUploadFailed": "אפלאד דורכגעפאלן",
+  "tools.audio.errorFileTooLarge": "Audio is too large. {size} exceeds the {max} limit.",
+  "tools.audio.errorReplace": "אויסבייטן",
+  "tools.audio.titlePlaceholder": "Track title",
+  "tools.audio.artistPlaceholder": "Artist",
+  "tools.audio.emptyAddAudio": "לייג צו א אויך",
+  "tools.audio.emptyUpload": "אפלאד",
+  "tools.audio.emptyLink": "לינק",
+  "tools.audio.emptyInsert": "אריינלייגן",
+  "tools.audio.emptyChooseFile": "קלייב א טעקע",
+  "tools.audio.emptyOrDropHere": "אדער לאז פאלן א אויך דא",
+  "tools.audio.emptyDropToUpload": "לאז פאלן צו לאדן",
+  "tools.audio.emptyMaxSize": "ביז {size}",
+  "tools.audio.emptyUrlPlaceholder": "לייג צו אויך URL…",
+  "tools.audio.emptyUrlAria": "אויך URL",
+  "tools.audio.emptySourceAria": "אויך מקור"
 }

package/src/components/i18n/locales/zh/messages.json

@@ -388,6 +388,7 @@
   "tools.file.previewDownload": "下载",
   "tools.file.previewOpenInNewTab": "在新标签页中打开",
   "toolNames.video": "视频",
+  "toolNames.audio": "音频",
   "tools.video.alignment": "对齐",
   "tools.video.alignmentLeft": "左对齐",
   "tools.video.alignmentCenter": "居中",
@@ -415,5 +416,31 @@
   "tools.video.emptyMaxSize": "最大 {size}",
   "tools.video.emptyUrlPlaceholder": "粘贴视频 URL…",
   "tools.video.emptyUrlAria": "视频 URL",
-  "tools.video.emptySourceAria": "视频来源"
+  "tools.video.emptySourceAria": "视频来源",
+  "tools.audio.alignment": "对齐",
+  "tools.audio.alignmentLeft": "左对齐",
+  "tools.audio.alignmentCenter": "居中",
+  "tools.audio.alignmentRight": "右对齐",
+  "tools.audio.caption": "说明",
+  "tools.audio.loop": "循环",
+  "tools.audio.replace": "替换音频",
+  "tools.audio.download": "下载",
+  "tools.audio.copyUrl": "复制链接",
+  "tools.audio.uploading": "上传中…",
+  "tools.audio.errorUploadFailed": "上传失败",
+  "tools.audio.errorFileTooLarge": "Audio is too large. {size} exceeds the {max} limit.",
+  "tools.audio.errorReplace": "替换",
+  "tools.audio.titlePlaceholder": "Track title",
+  "tools.audio.artistPlaceholder": "Artist",
+  "tools.audio.emptyAddAudio": "添加音频",
+  "tools.audio.emptyUpload": "上传",
+  "tools.audio.emptyLink": "链接",
+  "tools.audio.emptyInsert": "插入",
+  "tools.audio.emptyChooseFile": "选择文件",
+  "tools.audio.emptyOrDropHere": "或将音频拖放到此处",
+  "tools.audio.emptyDropToUpload": "拖放以上传",
+  "tools.audio.emptyMaxSize": "最大 {size}",
+  "tools.audio.emptyUrlPlaceholder": "粘贴音频 URL…",
+  "tools.audio.emptyUrlAria": "音频 URL",
+  "tools.audio.emptySourceAria": "音频来源"
 }

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

@@ -5,6 +5,7 @@ import {
   IconUpload,
 } from '../icons';
 import { formatBytes } from './format-bytes';
+import { matchesMime } from './mime-match';
 
 /**
  * Shared "empty" uploader surface for media-style block tools (image, file):
@@ -78,7 +79,7 @@ function formatsLabel(types: readonly string[]): string {
   const seen = new Set<string>();
   const out: string[] = [];
   for (const t of types) {
-    if (t === '*' || t === '*/*' || !t.includes('/')) continue;
+    if (t === '*' || t === '*/*' || t.endsWith('/*') || !t.includes('/')) continue;
     const label = mimeToLabel(t);
     if (seen.has(label)) continue;
     seen.add(label);
@@ -419,7 +420,7 @@ export function renderMediaEmptyState(opts: MediaEmptyStateOptions): MediaEmptyS
     for (const item of Array.from(clip.items)) {
       if (item.kind !== 'file') continue;
       const file = item.getAsFile();
-      if (file && (!types.length || types.some((t) => file.type === t))) {
+      if (file && (!types.length || matchesMime(file.type, types))) {
         ev.preventDefault();
         opts.onFile(file);
         return;

package/src/components/utils/mime-match.ts

@@ -0,0 +1,22 @@
+/**
+ * Match a file's MIME type against a list of patterns. Patterns may be exact
+ * MIME types (`image/png`), family wildcards (`image/*`), or the universal
+ * wildcard (a bare `*`, or `*` followed by `/*`). Matching is case-insensitive.
+ *
+ * Used by the media tools to gate uploads/paste/drop: a permissive default like
+ * `['image/*']` accepts any image, while an explicit list restricts to it.
+ */
+export function matchesMime(fileType: string, patterns: readonly string[]): boolean {
+  const type = fileType.toLowerCase();
+
+  return patterns.some((raw) => {
+    const pattern = raw.toLowerCase();
+
+    if (pattern === '*' || pattern === '*/*') return true;
+    if (pattern.endsWith('/*')) {
+      return type.startsWith(pattern.slice(0, -1));
+    }
+
+    return type === pattern;
+  });
+}

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/main.css

@@ -358,6 +358,7 @@
 @import './media-empty.css';
 @import './image.css';
 @import './video.css';
+@import './audio.css';
 @import './embed.css';
 @import './bookmark.css';
 @import './file.css';

package/src/tools/audio/constants.ts

@@ -0,0 +1,21 @@
+// Accept any audio type by default; consumers restrict via the `types` config.
+export const DEFAULT_MIME_TYPES = ['audio/*'] as const;
+
+export const DEFAULT_MAX_SIZE = 30 * 1024 * 1024; // 30 MiB
+
+export const DEFAULT_CAPTION_PLACEHOLDER = 'Write a caption…';
+
+export const MIN_WIDTH_PERCENT = 10;
+export const MAX_WIDTH_PERCENT = 100;
+
+/** Hard pixel floor for the player so inline controls don't crush together. */
+export const MIN_WIDTH_PX = 360;
+
+/** Number of amplitude buckets in the cached waveform. */
+export const WAVEFORM_BUCKETS = 300;
+
+/** Skip embedding an ID3 cover as a data: URL above this size (re-upload or drop). */
+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;