@jackuait/blok 0.17.0 → 0.19.0

package/src/styles/audio.css

@@ -0,0 +1,531 @@
+
+/* =================================================
+   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);
+  /* Comet-head tint — played colour nudged toward the editor accent. Subtle by
+     design; the waveform canvas blends bars toward it only at the playhead. */
+  --blok-audio-bar-head: color-mix(in srgb, var(--blok-audio-bar-played) 68%, var(--blok-color-accent) 32%);
+  --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

@@ -273,6 +273,17 @@
   margin-left: auto;
 }
 
+/**
+ * Content width mode
+ * 'full' (data-blok-width="full" on the editor wrapper) removes the
+ * --max-width-content constraint so content fills its container. The default
+ * 'narrow' mode leaves the attribute absent and keeps the max-w-blok-content
+ * Tailwind utility intact. Unlayered selector overrides the @layer utilities rule.
+ */
+[data-blok-width="full"] [data-blok-element-content] {
+  max-width: none;
+}
+
 /**
  * Multi-block drag visual feedback
  * Makes selected blocks semi-transparent during multi-block drag operation
@@ -358,6 +369,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;