@jackuait/blok 0.19.0 → 0.19.1

package/dist/chunks/{tools-BdoYHyV0.mjs → tools-CelSzJoA.mjs}

@@ -1,5 +1,5 @@
 import { i as e, t } from "./chunk-5O_1xk2F.mjs";
-import { $ as n, $n as r, $r as i, $t as a, An as o, At as s, B as c, Bn as l, Bt as u, C as d, Cn as f, Cr as p, Ct as m, Dn as h, Dr as g, Dt as _, En as v, Er as y, Et as b, F as x, Fi as S, Fn as C, Ft as w, G as T, Gn as E, Gt as D, H as ee, Hn as O, Ht as k, I as A, In as j, Ir as M, It as te, J as ne, Jn as N, Jt as re, Kn as ie, Kt as ae, L as oe, Ln as se, Lr as ce, Lt as P, Mn as le, Mr as F, Mt as ue, Nn as de, Nr as fe, Nt as pe, Oi as me, On as I, Or as he, Ot as ge, P as _e, Pi as L, Pn as ve, Pt as ye, Q as be, Qn as xe, Qt as Se, R as Ce, Rn as we, Rt as Te, S as Ee, Sn as De, St as Oe, T as ke, Tn as Ae, Tr as je, Tt as Me, U as R, Un as Ne, Ut as Pe, Vn as Fe, Vt as Ie, W as Le, Wn as Re, Wt as ze, X as Be, Xn as Ve, Xt as He, Y as Ue, Yn as We, Yt as Ge, Z as Ke, Zn as qe, Zt as Je, _ as Ye, _n as Xe, _t as Ze, a as Qe, ar as $e, at as et, b as tt, bn as nt, bt as rt, c as it, ci as at, cn as ot, cr as st, ct as z, d as ct, dn as lt, dt as ut, en as dt, et as ft, f as pt, fn as mt, fr as ht, ft as gt, g as _t, gn as vt, gr as yt, gt as bt, h as xt, hn as St, ht as Ct, i as wt, in as Tt, ir as Et, it as Dt, jn as Ot, jt as kt, kn as At, kr as B, kt as jt, l as Mt, ln as Nt, lr as Pt, lt as Ft, mn as It, mr as Lt, mt as Rt, n as zt, nn as Bt, nr as Vt, nt as Ht, o as V, oi as Ut, on as Wt, or as Gt, ot as Kt, p as qt, pn as Jt, pr as Yt, pt as Xt, q as Zt, qt as Qt, r as $t, rr as en, rt as tn, s as nn, sn as rn, sr as an, st as on, t as sn, tr as cn, u as H, un as ln, ur as un, ut as dn, v as fn, vn as pn, vt as mn, wn as hn, wr as U, wt as gn, x as _n, xn as vn, xt as yn, y as bn, yn as xn, yr as Sn, yt as Cn, z as wn, zn as Tn, zt as En } from "./constants-BmCvHbkL.mjs";
+import { $ as n, $n as r, $r as i, $t as a, An as o, At as s, B as c, Bn as l, Bt as u, C as d, Cn as f, Cr as p, Ct as m, Dn as h, Dr as g, Dt as _, En as v, Er as y, Et as b, F as x, Fi as S, Fn as C, Ft as w, G as T, Gn as E, Gt as D, H as ee, Hn as O, Ht as k, I as A, In as j, Ir as M, It as te, J as ne, Jn as N, Jt as re, Kn as ie, Kt as ae, L as oe, Ln as se, Lr as ce, Lt as P, Mn as le, Mr as F, Mt as ue, Nn as de, Nr as fe, Nt as pe, Oi as me, On as I, Or as he, Ot as ge, P as _e, Pi as L, Pn as ve, Pt as ye, Q as be, Qn as xe, Qt as Se, R as Ce, Rn as we, Rt as Te, S as Ee, Sn as De, St as Oe, T as ke, Tn as Ae, Tr as je, Tt as Me, U as R, Un as Ne, Ut as Pe, Vn as Fe, Vt as Ie, W as Le, Wn as Re, Wt as ze, X as Be, Xn as Ve, Xt as He, Y as Ue, Yn as We, Yt as Ge, Z as Ke, Zn as qe, Zt as Je, _ as Ye, _n as Xe, _t as Ze, a as Qe, ar as $e, at as et, b as tt, bn as nt, bt as rt, c as it, ci as at, cn as ot, cr as st, ct as z, d as ct, dn as lt, dt as ut, en as dt, et as ft, f as pt, fn as mt, fr as ht, ft as gt, g as _t, gn as vt, gr as yt, gt as bt, h as xt, hn as St, ht as Ct, i as wt, in as Tt, ir as Et, it as Dt, jn as Ot, jt as kt, kn as At, kr as B, kt as jt, l as Mt, ln as Nt, lr as Pt, lt as Ft, mn as It, mr as Lt, mt as Rt, n as zt, nn as Bt, nr as Vt, nt as Ht, o as V, oi as Ut, on as Wt, or as Gt, ot as Kt, p as qt, pn as Jt, pr as Yt, pt as Xt, q as Zt, qt as Qt, r as $t, rr as en, rt as tn, s as nn, sn as rn, sr as an, st as on, t as sn, tr as cn, u as H, un as ln, ur as un, ut as dn, v as fn, vn as pn, vt as mn, wn as hn, wr as U, wt as gn, x as _n, xn as vn, xt as yn, y as bn, yn as xn, yr as Sn, yt as Cn, z as wn, zn as Tn, zt as En } from "./constants-DzQOOvgv.mjs";
 import { t as W } from "./objectSpread2-jlBcdYeb.mjs";
 import { n as G } from "./tw-DmW6-pCY.mjs";
 import { n as Dn } from "./lightweight-i18n-DJpMke7a.mjs";
@@ -14268,8 +14268,10 @@ function lm(e, t) {
 function um(e) {
 	let t = document.createElement("div");
 	t.className = "blok-audio-caption-row", t.setAttribute("data-role", "audio-caption-row");
-	let n = cm("audio-caption", e.value, e.editable, e.placeholder);
-	return n.className = "blok-audio-caption", t.appendChild(n), t;
+	let n = document.createElement("div");
+	n.className = "blok-audio-caption-row__inner";
+	let r = cm("audio-caption", e.value, e.editable, e.placeholder);
+	return r.className = "blok-audio-caption", n.appendChild(r), t.appendChild(n), t;
 }
 //#endregion
 //#region src/tools/audio/controls.ts
@@ -14657,7 +14659,7 @@ var Lm = class {
 }, Rm = class {
 	constructor(e) {
 		var t, n, r;
-		this.root = null, this.uploadingEl = null, this.lastFileName = null, this.errorMessage = null, this.lastSource = null, this.controlsHandle = null, this.waveformHandle = null, this.destroyed = !1, this.api = e.api, this.block = e.block, this.config = (t = e.config) == null ? {} : t, this.readOnly = e.readOnly, this.data = W(W({}, e.data), {}, { url: (n = (r = e.data) == null ? void 0 : r.url) == null ? "" : n }), this.state = this.data.url ? "RENDERED" : "EMPTY", this.uploader = new Lm(this.config);
+		this.root = null, this.uploadingEl = null, this.lastFileName = null, this.errorMessage = null, this.lastSource = null, this.controlsHandle = null, this.waveformHandle = null, this.destroyed = !1, this.captionExitTimer = null, this.api = e.api, this.block = e.block, this.config = (t = e.config) == null ? {} : t, this.readOnly = e.readOnly, this.data = W(W({}, e.data), {}, { url: (n = (r = e.data) == null ? void 0 : r.url) == null ? "" : n }), this.state = this.data.url ? "RENDERED" : "EMPTY", this.uploader = new Lm(this.config);
 	}
 	render() {
 		let e = document.createElement("div");
@@ -14782,7 +14784,7 @@ var Lm = class {
 	}
 	removed() {
 		var e, t;
-		this.destroyed = !0, (e = this.controlsHandle) == null || e.destroy(), this.controlsHandle = null, (t = this.waveformHandle) == null || t.destroy(), this.waveformHandle = null, this.data.url.startsWith("blob:") && URL.revokeObjectURL(this.data.url);
+		this.destroyed = !0, this.captionExitTimer && (clearTimeout(this.captionExitTimer), this.captionExitTimer = null), (e = this.controlsHandle) == null || e.destroy(), this.controlsHandle = null, (t = this.waveformHandle) == null || t.destroy(), this.waveformHandle = null, this.data.url.startsWith("blob:") && URL.revokeObjectURL(this.data.url);
 	}
 	startUpload(e) {
 		this.lastFileName = e.name, this.lastSource = {
@@ -14835,7 +14837,7 @@ var Lm = class {
 	renderState() {
 		var e, t;
 		if (this.root) {
-			if ((e = this.controlsHandle) == null || e.destroy(), this.controlsHandle = null, (t = this.waveformHandle) == null || t.destroy(), this.waveformHandle = null, this.root.replaceChildren(), this.uploadingEl = null, this.syncRootAttributes(), this.state === "EMPTY") {
+			if (this.captionExitTimer && (clearTimeout(this.captionExitTimer), this.captionExitTimer = null), (e = this.controlsHandle) == null || e.destroy(), this.controlsHandle = null, (t = this.waveformHandle) == null || t.destroy(), this.waveformHandle = null, this.root.replaceChildren(), this.uploadingEl = null, this.syncRootAttributes(), this.state === "EMPTY") {
 				this.renderEmpty();
 				return;
 			}
@@ -14880,55 +14882,84 @@ var Lm = class {
 		r.type = "button", r.className = "blok-audio-retry", r.setAttribute("data-action", "replace"), r.textContent = Z(this.api.i18n, "tools.audio.errorReplace", "Replace"), r.addEventListener("click", () => this.transitionToEmpty()), t.append(n, r), this.root.appendChild(t);
 	}
 	renderRendered() {
-		var e, t;
+		var e;
 		if (!this.root) return;
-		let n = Z(this.api.i18n, "tools.audio.titlePlaceholder", "Track title"), r = Z(this.api.i18n, "tools.audio.artistPlaceholder", "Artist"), { figure: i, audio: a, waveformMount: o, title: s, artist: c, body: l } = lm(this.data, {
+		let t = Z(this.api.i18n, "tools.audio.titlePlaceholder", "Track title"), n = Z(this.api.i18n, "tools.audio.artistPlaceholder", "Artist"), { figure: r, audio: i, waveformMount: a, title: o, artist: s, body: c } = lm(this.data, {
 			editable: !this.readOnly,
-			titlePlaceholder: n,
-			artistPlaceholder: r
+			titlePlaceholder: t,
+			artistPlaceholder: n
 		});
 		(e = this.data.peaks) != null && e.length && (this.waveformHandle = Am({
-			mount: o,
-			media: a,
+			mount: a,
+			media: i,
 			peaks: this.data.peaks
 		})), this.controlsHandle = pm({
-			media: a,
-			figure: i,
+			media: i,
+			figure: r,
 			data: this.data,
 			onLoopChange: (e) => {
 				this.data.loop = e || void 0, this.block.dispatchChange();
 			}
-		}), l.appendChild(this.controlsHandle.element);
-		let u = (t = this.config.captionPlaceholder) == null ? am : t;
-		if (this.data.captionVisible !== !1 || !this.readOnly) {
-			var d;
-			i.appendChild(um({
-				value: (d = this.data.caption) == null ? "" : d,
-				placeholder: u,
-				editable: !this.readOnly
-			}));
-		}
-		s.addEventListener("blur", () => {
+		}), c.appendChild(this.controlsHandle.element), this.data.captionVisible !== !1 && r.appendChild(this.createCaptionRow()), o.addEventListener("blur", () => {
 			var e;
-			let t = (e = s.textContent) == null ? "" : e;
+			let t = (e = o.textContent) == null ? "" : e;
 			t !== this.data.title && (this.data.title = t || void 0, this.block.dispatchChange());
-		}), c.addEventListener("blur", () => {
+		}), s.addEventListener("blur", () => {
 			var e;
-			let t = (e = c.textContent) == null ? "" : e;
+			let t = (e = s.textContent) == null ? "" : e;
 			t !== this.data.artist && (this.data.artist = t || void 0, this.block.dispatchChange());
-		});
-		let f = i.querySelector("[data-role=\"audio-caption\"]");
-		f && f.addEventListener("blur", () => {
+		}), this.root.appendChild(r);
+	}
+	createCaptionRow() {
+		var e, t;
+		let n = (e = this.config.captionPlaceholder) == null ? am : e, r = um({
+			value: (t = this.data.caption) == null ? "" : t,
+			placeholder: n,
+			editable: !this.readOnly
+		}), i = r.querySelector("[data-role=\"audio-caption\"]");
+		return i == null || i.addEventListener("blur", () => {
 			var e;
-			let t = (e = f.textContent) == null ? "" : e;
+			let t = (e = i.textContent) == null ? "" : e;
 			t !== this.data.caption && (this.data.caption = t || void 0, this.block.dispatchChange());
-		}), this.root.appendChild(i);
+		}), r;
+	}
+	prefersReducedMotion() {
+		var e, t, n;
+		return (e = (t = (n = globalThis).matchMedia) == null ? void 0 : t.call(n, "(prefers-reduced-motion: reduce)").matches) == null ? !1 : e;
 	}
 	setAlignment(e) {
 		this.data.alignment !== e && (this.data.alignment = e, this.block.dispatchChange(), this.renderState());
 	}
 	toggleCaption() {
-		this.data.captionVisible = this.data.captionVisible === !1, this.block.dispatchChange(), this.renderState();
+		var e;
+		let t = this.data.captionVisible === !1;
+		this.data.captionVisible = t, t || (this.data.caption = void 0), this.block.dispatchChange();
+		let n = (e = this.root) == null ? void 0 : e.querySelector("[data-role=\"audio-figure\"]");
+		if (!n || this.prefersReducedMotion()) {
+			this.renderState();
+			return;
+		}
+		this.syncRootAttributes(), t ? this.animateCaptionIn(n) : this.animateCaptionOut(n);
+	}
+	animateCaptionIn(e) {
+		let t = e.querySelector("[data-role=\"audio-caption-row\"]");
+		if (t) {
+			this.captionExitTimer && (clearTimeout(this.captionExitTimer), this.captionExitTimer = null), t.classList.remove("is-collapsed");
+			return;
+		}
+		let n = this.createCaptionRow();
+		n.classList.add("is-collapsed"), e.appendChild(n), n.offsetHeight, n.classList.remove("is-collapsed");
+	}
+	animateCaptionOut(e) {
+		let t = e.querySelector("[data-role=\"audio-caption-row\"]");
+		if (!t) return;
+		t.classList.add("is-collapsed");
+		let n = () => {
+			this.captionExitTimer && (clearTimeout(this.captionExitTimer), this.captionExitTimer = null), t.remove();
+		};
+		t.addEventListener("transitionend", (e) => {
+			e.propertyName === "grid-template-rows" && n();
+		}, { once: !0 }), this.captionExitTimer = setTimeout(n, 360);
 	}
 	toggleLoop() {
 		this.data.loop = this.data.loop === !0 ? void 0 : !0, this.block.dispatchChange(), this.renderState();

package/dist/full.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/blok-BosfCfPX.cjs`),t=require(`./chunks/constants-ChsAFZ8F.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-DmEzyrn3.cjs`);var i={paragraph:{class:r.k,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.O,inlineToolbar:!0},list:{class:r.D,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.Pi,exports.Header=r.O,exports.Italic=r.c,exports.Link=r.s,exports.List=r.D,exports.Marker=r.o,exports.Paragraph=r.k,exports.Strikethrough=r.i,exports.Toggle=r.T,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/blok-gFn3FI95.cjs`),t=require(`./chunks/constants-DmKwEMyC.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-BcF1rHBg.cjs`);var i={paragraph:{class:r.k,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.O,inlineToolbar:!0},list:{class:r.D,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.Pi,exports.Header=r.O,exports.Italic=r.c,exports.Link=r.s,exports.List=r.D,exports.Marker=r.o,exports.Paragraph=r.k,exports.Strikethrough=r.i,exports.Toggle=r.T,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-CXB-exXU.mjs";
-import { Pi as n } from "./chunks/constants-BmCvHbkL.mjs";
+import { n as e, t } from "./chunks/blok-C52qeiPg.mjs";
+import { Pi as n } from "./chunks/constants-DzQOOvgv.mjs";
 import { t as r } from "./chunks/objectSpread2-jlBcdYeb.mjs";
-import { D as i, O as a, T as o, a as s, c, i as l, k as u, l as d, n as f, o as p, s as m, t as h } from "./chunks/tools-BdoYHyV0.mjs";
+import { D as i, O as a, T as o, a as s, c, i as l, k as u, l as d, n as f, o as p, s as m, t as h } from "./chunks/tools-CelSzJoA.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-BL1yB9zm.cjs`);const e=require(`./chunks/blok-BosfCfPX.cjs`),t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=new WeakMap;function a(e,t){i.set(e,t)}function o(e){return i.get(e)}function s(e){i.delete(e)}function c(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;return(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]),o}function l(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.i(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=d,exports.useBlok=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-BL1yB9zm.cjs`);const e=require(`./chunks/blok-gFn3FI95.cjs`),t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=new WeakMap;function a(e,t){i.set(e,t)}function o(e){return i.get(e)}function s(e){i.delete(e)}function c(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;return(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]),o}function l(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.i(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=d,exports.useBlok=c;

package/dist/react.mjs

@@ -1,4 +1,4 @@
-import { i as e, t } from "./chunks/blok-CXB-exXU.mjs";
+import { i as e, t } from "./chunks/blok-C52qeiPg.mjs";
 import { t as n } from "./chunks/objectSpread2-jlBcdYeb.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/tools.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/constants-ChsAFZ8F.cjs`),t=require(`./chunks/tools-DmEzyrn3.cjs`);exports.Audio=t.g,exports.Bold=t.l,exports.Bookmark=t.u,exports.Callout=t.w,exports.Code=t.y,exports.Column=t.p,exports.ColumnList=t.m,exports.Columns=t.f,exports.Convert=e.m,exports.Database=t.C,exports.DatabaseRow=t.S,exports.Divider=t.x,exports.Embed=t.d,exports.File=t._,exports.Header=t.O,exports.Image=t.v,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.D,exports.Marker=t.o,exports.Paragraph=t.k,exports.Quote=t.b,exports.Strikethrough=t.i,exports.Table=t.E,exports.Toggle=t.T,exports.Underline=t.a,exports.Video=t.h,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./chunks/constants-DmKwEMyC.cjs`),t=require(`./chunks/tools-BcF1rHBg.cjs`);exports.Audio=t.g,exports.Bold=t.l,exports.Bookmark=t.u,exports.Callout=t.w,exports.Code=t.y,exports.Column=t.p,exports.ColumnList=t.m,exports.Columns=t.f,exports.Convert=e.m,exports.Database=t.C,exports.DatabaseRow=t.S,exports.Divider=t.x,exports.Embed=t.d,exports.File=t._,exports.Header=t.O,exports.Image=t.v,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.D,exports.Marker=t.o,exports.Paragraph=t.k,exports.Quote=t.b,exports.Strikethrough=t.i,exports.Table=t.E,exports.Toggle=t.T,exports.Underline=t.a,exports.Video=t.h,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-BmCvHbkL.mjs";
-import { C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "./chunks/tools-BdoYHyV0.mjs";
+import { m as e } from "./chunks/constants-DzQOOvgv.mjs";
+import { C as t, D as n, E as r, O as i, S as a, T as o, _ as s, a as c, b as l, c as u, d, f, g as p, h as m, i as h, k as g, l as _, m as v, n as y, o as b, p as x, r as S, s as C, t as w, u as T, v as E, w as D, x as O, y as k } from "./chunks/tools-CelSzJoA.mjs";
 export { p as Audio, _ as Bold, T as Bookmark, D as Callout, k as Code, x as Column, v as ColumnList, f as Columns, e as Convert, t as Database, a as DatabaseRow, O as Divider, d as Embed, s as File, i as Header, E as Image, S as InlineCode, u as Italic, C as Link, n as List, b as Marker, g as Paragraph, l as Quote, h as Strikethrough, r as Table, o as Toggle, c as Underline, m as Video, w as defaultBlockTools, y as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "main": "./dist/blok.cjs",

package/src/blok.ts

@@ -36,9 +36,11 @@ class Blok {
   private readonly initialConfiguration: BlokConfig|string|undefined;
 
   /**
-   * Promise that resolves when core modules are ready and UI is rendered on the page
+   * Promise that resolves when core modules are ready and UI is rendered on the page.
+   * Resolves with the fully-initialized Blok instance, so awaiting it narrows a
+   * pre-ready reference (see {@link PendingBlok}) to the complete API surface.
    */
-  public isReady: Promise<void>;
+  public isReady: Promise<Blok>;
 
   /**
    * Stores destroy method implementation.
@@ -218,7 +220,7 @@ class Blok {
 
         Object.setPrototypeOf(this, null);
 
-        return;
+        return this;
       }
 
       this.exportAPI(blok);
@@ -276,6 +278,8 @@ class Blok {
        * @todo pass API as an argument. It will allow to use Blok's API when blok is ready
        */
       onReady();
+
+      return this;
     });
   }
 

package/src/styles/audio.css

@@ -385,20 +385,38 @@
   color: var(--blok-text-primary);
 }
 
-/* ----- caption row (full-width footer) -------------------- */
+/* ----- 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. */
 [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 + 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);
-  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;
+  padding-top: var(--blok-space-2-5);
+  border-top: 1px solid var(--blok-border-subtle);
   font-size: var(--blok-font-size-ui-label);
   color: var(--blok-text-secondary);
   line-height: var(--blok-line-height-body);
@@ -528,4 +546,6 @@
   }
   /* The badge still appears while playing — it just holds steady. */
   [data-blok-tool="audio"] .blok-audio-eq { transition: none; }
+  /* Caption appears/disappears instantly (JS also takes the instant path). */
+  [data-blok-tool="audio"] .blok-audio-caption-row { transition: none; }
 }

package/src/tools/audio/index.ts

@@ -52,6 +52,8 @@ export class AudioTool implements BlockTool {
   private controlsHandle: ControlsHandle | null = null;
   private waveformHandle: WaveformHandle | null = null;
   private destroyed = false;
+  /** Pending fallback timer for the caption collapse-out animation. */
+  private captionExitTimer: ReturnType<typeof setTimeout> | null = null;
 
   constructor(options: BlockToolConstructorOptions<AudioData, AudioConfig>) {
     this.api = options.api;
@@ -199,6 +201,7 @@ export class AudioTool implements BlockTool {
 
   public removed(): void {
     this.destroyed = true;
+    if (this.captionExitTimer) { clearTimeout(this.captionExitTimer); this.captionExitTimer = null; }
     this.controlsHandle?.destroy();
     this.controlsHandle = null;
     this.waveformHandle?.destroy();
@@ -299,6 +302,7 @@ export class AudioTool implements BlockTool {
 
   private renderState(): void {
     if (!this.root) return;
+    if (this.captionExitTimer) { clearTimeout(this.captionExitTimer); this.captionExitTimer = null; }
     this.controlsHandle?.destroy();
     this.controlsHandle = null;
     this.waveformHandle?.destroy();
@@ -393,14 +397,9 @@ export class AudioTool implements BlockTool {
     body.appendChild(this.controlsHandle.element);
 
     // Caption row — outside body, below the card
-    const placeholder = this.config.captionPlaceholder ?? DEFAULT_CAPTION_PLACEHOLDER;
     const captionVisible = this.data.captionVisible !== false;
-    if (captionVisible || !this.readOnly) {
-      figure.appendChild(renderCaptionRow({
-        value: this.data.caption ?? '',
-        placeholder,
-        editable: !this.readOnly,
-      }));
+    if (captionVisible) {
+      figure.appendChild(this.createCaptionRow());
     }
 
     // Wire title/artist blur handlers
@@ -419,21 +418,32 @@ export class AudioTool implements BlockTool {
       }
     });
 
-    // Wire caption blur handler
-    const captionEl = figure.querySelector<HTMLElement>('[data-role="audio-caption"]');
-    if (captionEl) {
-      captionEl.addEventListener('blur', () => {
-        const next = captionEl.textContent ?? '';
-        if (next !== this.data.caption) {
-          this.data.caption = next || undefined;
-          this.block.dispatchChange();
-        }
-      });
-    }
-
     this.root.appendChild(figure);
   }
 
+  /** Build a caption row (with its blur handler wired) ready to mount. */
+  private createCaptionRow(): HTMLElement {
+    const placeholder = this.config.captionPlaceholder ?? DEFAULT_CAPTION_PLACEHOLDER;
+    const row = renderCaptionRow({
+      value: this.data.caption ?? '',
+      placeholder,
+      editable: !this.readOnly,
+    });
+    const captionEl = row.querySelector<HTMLElement>('[data-role="audio-caption"]');
+    captionEl?.addEventListener('blur', () => {
+      const next = captionEl.textContent ?? '';
+      if (next !== this.data.caption) {
+        this.data.caption = next || undefined;
+        this.block.dispatchChange();
+      }
+    });
+    return row;
+  }
+
+  private prefersReducedMotion(): boolean {
+    return globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+  }
+
   private setAlignment(next: AudioAlignment): void {
     if (this.data.alignment === next) return;
     this.data.alignment = next;
@@ -442,9 +452,54 @@ export class AudioTool implements BlockTool {
   }
 
   private toggleCaption(): void {
-    this.data.captionVisible = this.data.captionVisible === false;
+    const enabling = this.data.captionVisible === false;
+    this.data.captionVisible = enabling;
+    // Removing the caption clears its text too, so re-enabling starts fresh
+    // rather than resurrecting the old text.
+    if (!enabling) this.data.caption = undefined;
     this.block.dispatchChange();
-    this.renderState();
+
+    const figure = this.root?.querySelector<HTMLElement>('[data-role="audio-figure"]');
+    // No live card to animate (or motion is off) — fall back to an instant
+    // re-render so the caption snaps in/out.
+    if (!figure || this.prefersReducedMotion()) {
+      this.renderState();
+      return;
+    }
+    this.syncRootAttributes();
+    if (enabling) this.animateCaptionIn(figure);
+    else this.animateCaptionOut(figure);
+  }
+
+  private animateCaptionIn(figure: HTMLElement): void {
+    const existing = figure.querySelector<HTMLElement>('[data-role="audio-caption-row"]');
+    if (existing) {
+      // A collapse-out was mid-flight — cancel it and re-open in place.
+      if (this.captionExitTimer) { clearTimeout(this.captionExitTimer); this.captionExitTimer = null; }
+      existing.classList.remove('is-collapsed');
+      return;
+    }
+    const row = this.createCaptionRow();
+    row.classList.add('is-collapsed');
+    figure.appendChild(row);
+    // Force a reflow so the collapsed state is committed, then expand into view.
+    void row.offsetHeight;
+    row.classList.remove('is-collapsed');
+  }
+
+  private animateCaptionOut(figure: HTMLElement): void {
+    const row = figure.querySelector<HTMLElement>('[data-role="audio-caption-row"]');
+    if (!row) return;
+    row.classList.add('is-collapsed');
+    const finish = (): void => {
+      if (this.captionExitTimer) { clearTimeout(this.captionExitTimer); this.captionExitTimer = null; }
+      row.remove();
+    };
+    row.addEventListener('transitionend', (e) => {
+      if (e.propertyName === 'grid-template-rows') finish();
+    }, { once: true });
+    // Fallback in case transitionend never fires (display:none, interrupted, etc.).
+    this.captionExitTimer = setTimeout(finish, 360);
   }
 
   private toggleLoop(): void {

package/src/tools/audio/ui.ts

@@ -97,8 +97,13 @@ export function renderCaptionRow(opts: CaptionRowOptions): HTMLElement {
   const row = document.createElement('div');
   row.className = 'blok-audio-caption-row';
   row.setAttribute('data-role', 'audio-caption-row');
+  // Inner wrapper carries the visible layout (padding/border) so the row itself
+  // can collapse cleanly via grid-template-rows when toggled.
+  const inner = document.createElement('div');
+  inner.className = 'blok-audio-caption-row__inner';
   const cap = editableLine('audio-caption', opts.value, opts.editable, opts.placeholder);
   cap.className = 'blok-audio-caption';
-  row.appendChild(cap);
+  inner.appendChild(cap);
+  row.appendChild(inner);
   return row;
 }

package/types/index.d.ts

@@ -207,11 +207,37 @@ export function wrapLegacyInlineTool(
   }
 ): InlineToolConstructable;
 
+/**
+ * The surface of a Blok instance that is guaranteed to exist synchronously,
+ * immediately after `new Blok()` and before `isReady` has resolved.
+ *
+ * Blok constructs its module APIs (`blocks`, `caret`, `history`, `readOnly`, …)
+ * asynchronously: they only become available once `isReady` resolves. Accessing
+ * them earlier returns `undefined` at runtime. Type a reference you hold during
+ * that window as `PendingBlok` so the not-yet-available members are unreachable,
+ * then await `isReady` to obtain the fully-initialized {@link Blok}:
+ *
+ * @example
+ * const pending: PendingBlok = new Blok(config);
+ * const editor = await pending.isReady; // editor is a ready Blok
+ * editor.blocks.render(data);
+ */
+export interface PendingBlok {
+  /** Resolves with the fully-initialized Blok instance once core modules are ready. */
+  isReady: Promise<Blok>;
+  /** Destroy the instance. Safe to call before `isReady` resolves. */
+  destroy(): void;
+  /** Theme API, exposed immediately after construction. */
+  theme: Theme;
+  /** Width API, exposed immediately after construction. */
+  width: Width;
+}
+
 /**
  * Main Blok class
  */
 export class Blok {
-  public isReady: Promise<void>;
+  public isReady: Promise<Blok>;
 
   public blocks: Blocks;
   public caret: Caret;