react-av-timeline 1.2.4 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,323 +1,725 @@
1
- import ae from "react";
2
- var g = { exports: {} }, y = {};
3
- var q;
4
- function oe() {
5
- if (q) return y;
6
- q = 1;
7
- var t = Symbol.for("react.transitional.element"), a = Symbol.for("react.fragment");
8
- function s(l, c, u) {
9
- var m = null;
10
- if (u !== void 0 && (m = "" + u), c.key !== void 0 && (m = "" + c.key), "key" in c) {
11
- u = {};
12
- for (var f in c)
13
- f !== "key" && (u[f] = c[f]);
14
- } else u = c;
15
- return c = u.ref, {
16
- $$typeof: t,
17
- type: l,
18
- key: m,
19
- ref: c !== void 0 ? c : null,
20
- props: u
1
+ import gt, { useRef as J, useState as be, useMemo as V, useCallback as ze, useEffect as he, useLayoutEffect as Me } from "react";
2
+ var pe = { exports: {} }, se = {};
3
+ var De;
4
+ function wt() {
5
+ if (De) return se;
6
+ De = 1;
7
+ var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
8
+ function o(c, i, s) {
9
+ var _ = null;
10
+ if (s !== void 0 && (_ = "" + s), i.key !== void 0 && (_ = "" + i.key), "key" in i) {
11
+ s = {};
12
+ for (var y in i)
13
+ y !== "key" && (s[y] = i[y]);
14
+ } else s = i;
15
+ return i = s.ref, {
16
+ $$typeof: r,
17
+ type: c,
18
+ key: _,
19
+ ref: i !== void 0 ? i : null,
20
+ props: s
21
21
  };
22
22
  }
23
- return y.Fragment = a, y.jsx = s, y.jsxs = s, y;
23
+ return se.Fragment = n, se.jsx = o, se.jsxs = o, se;
24
24
  }
25
- var T = {};
26
- var J;
27
- function ie() {
28
- return J || (J = 1, process.env.NODE_ENV !== "production" && (function() {
29
- function t(e) {
30
- if (e == null) return null;
31
- if (typeof e == "function")
32
- return e.$$typeof === re ? null : e.displayName || e.name || null;
33
- if (typeof e == "string") return e;
34
- switch (e) {
35
- case k:
25
+ var ae = {};
26
+ var Ye;
27
+ function Nt() {
28
+ return Ye || (Ye = 1, process.env.NODE_ENV !== "production" && (function() {
29
+ function r(t) {
30
+ if (t == null) return null;
31
+ if (typeof t == "function")
32
+ return t.$$typeof === we ? null : t.displayName || t.name || null;
33
+ if (typeof t == "string") return t;
34
+ switch (t) {
35
+ case M:
36
36
  return "Fragment";
37
- case N:
37
+ case oe:
38
38
  return "Profiler";
39
- case S:
39
+ case ye:
40
40
  return "StrictMode";
41
- case Z:
41
+ case ce:
42
42
  return "Suspense";
43
- case Q:
43
+ case le:
44
44
  return "SuspenseList";
45
- case ee:
45
+ case ge:
46
46
  return "Activity";
47
47
  }
48
- if (typeof e == "object")
49
- switch (typeof e.tag == "number" && console.error(
48
+ if (typeof t == "object")
49
+ switch (typeof t.tag == "number" && console.error(
50
50
  "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
51
- ), e.$$typeof) {
52
- case x:
51
+ ), t.$$typeof) {
52
+ case q:
53
53
  return "Portal";
54
- case B:
55
- return e.displayName || "Context";
56
- case X:
57
- return (e._context.displayName || "Context") + ".Consumer";
58
- case H:
59
- var r = e.render;
60
- return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
61
- case K:
62
- return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
63
- case P:
64
- r = e._payload, e = e._init;
54
+ case ie:
55
+ return t.displayName || "Context";
56
+ case ke:
57
+ return (t._context.displayName || "Context") + ".Consumer";
58
+ case I:
59
+ var m = t.render;
60
+ return t = t.displayName, t || (t = m.displayName || m.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
61
+ case ue:
62
+ return m = t.displayName || null, m !== null ? m : r(t.type) || "Memo";
63
+ case G:
64
+ m = t._payload, t = t._init;
65
65
  try {
66
- return t(e(r));
66
+ return r(t(m));
67
67
  } catch {
68
68
  }
69
69
  }
70
70
  return null;
71
71
  }
72
- function a(e) {
73
- return "" + e;
72
+ function n(t) {
73
+ return "" + t;
74
74
  }
75
- function s(e) {
75
+ function o(t) {
76
76
  try {
77
- a(e);
78
- var r = !1;
77
+ n(t);
78
+ var m = !1;
79
79
  } catch {
80
- r = !0;
80
+ m = !0;
81
81
  }
82
- if (r) {
83
- r = console;
84
- var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
85
- return n.call(
86
- r,
82
+ if (m) {
83
+ m = console;
84
+ var N = m.error, E = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
85
+ return N.call(
86
+ m,
87
87
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
88
- o
89
- ), a(e);
88
+ E
89
+ ), n(t);
90
90
  }
91
91
  }
92
- function l(e) {
93
- if (e === k) return "<>";
94
- if (typeof e == "object" && e !== null && e.$$typeof === P)
92
+ function c(t) {
93
+ if (t === M) return "<>";
94
+ if (typeof t == "object" && t !== null && t.$$typeof === G)
95
95
  return "<...>";
96
96
  try {
97
- var r = t(e);
98
- return r ? "<" + r + ">" : "<...>";
97
+ var m = r(t);
98
+ return m ? "<" + m + ">" : "<...>";
99
99
  } catch {
100
100
  return "<...>";
101
101
  }
102
102
  }
103
- function c() {
104
- var e = $.A;
105
- return e === null ? null : e.getOwner();
103
+ function i() {
104
+ var t = U.A;
105
+ return t === null ? null : t.getOwner();
106
106
  }
107
- function u() {
107
+ function s() {
108
108
  return Error("react-stack-top-frame");
109
109
  }
110
- function m(e) {
111
- if (I.call(e, "key")) {
112
- var r = Object.getOwnPropertyDescriptor(e, "key").get;
113
- if (r && r.isReactWarning) return !1;
110
+ function _(t) {
111
+ if (P.call(t, "key")) {
112
+ var m = Object.getOwnPropertyDescriptor(t, "key").get;
113
+ if (m && m.isReactWarning) return !1;
114
114
  }
115
- return e.key !== void 0;
115
+ return t.key !== void 0;
116
116
  }
117
- function f(e, r) {
118
- function n() {
119
- F || (F = !0, console.error(
117
+ function y(t, m) {
118
+ function N() {
119
+ B || (B = !0, console.error(
120
120
  "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
121
- r
121
+ m
122
122
  ));
123
123
  }
124
- n.isReactWarning = !0, Object.defineProperty(e, "key", {
125
- get: n,
124
+ N.isReactWarning = !0, Object.defineProperty(t, "key", {
125
+ get: N,
126
126
  configurable: !0
127
127
  });
128
128
  }
129
- function E() {
130
- var e = t(this.type);
131
- return L[e] || (L[e] = !0, console.error(
129
+ function p() {
130
+ var t = r(this.type);
131
+ return de[t] || (de[t] = !0, console.error(
132
132
  "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
133
- )), e = this.props.ref, e !== void 0 ? e : null;
133
+ )), t = this.props.ref, t !== void 0 ? t : null;
134
134
  }
135
- function R(e, r, n, o, A, Y) {
136
- var i = n.ref;
137
- return e = {
138
- $$typeof: h,
139
- type: e,
140
- key: r,
141
- props: n,
142
- _owner: o
143
- }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
135
+ function l(t, m, N, E, x, z) {
136
+ var b = N.ref;
137
+ return t = {
138
+ $$typeof: j,
139
+ type: t,
140
+ key: m,
141
+ props: N,
142
+ _owner: E
143
+ }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(t, "ref", {
144
144
  enumerable: !1,
145
- get: E
146
- }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
145
+ get: p
146
+ }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
147
147
  configurable: !1,
148
148
  enumerable: !1,
149
149
  writable: !0,
150
150
  value: 0
151
- }), Object.defineProperty(e, "_debugInfo", {
151
+ }), Object.defineProperty(t, "_debugInfo", {
152
152
  configurable: !1,
153
153
  enumerable: !1,
154
154
  writable: !0,
155
155
  value: null
156
- }), Object.defineProperty(e, "_debugStack", {
156
+ }), Object.defineProperty(t, "_debugStack", {
157
157
  configurable: !1,
158
158
  enumerable: !1,
159
159
  writable: !0,
160
- value: A
161
- }), Object.defineProperty(e, "_debugTask", {
160
+ value: x
161
+ }), Object.defineProperty(t, "_debugTask", {
162
162
  configurable: !1,
163
163
  enumerable: !1,
164
164
  writable: !0,
165
- value: Y
166
- }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
165
+ value: z
166
+ }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
167
167
  }
168
- function d(e, r, n, o, A, Y) {
169
- var i = r.children;
170
- if (i !== void 0)
171
- if (o)
172
- if (te(i)) {
173
- for (o = 0; o < i.length; o++)
174
- v(i[o]);
175
- Object.freeze && Object.freeze(i);
168
+ function w(t, m, N, E, x, z) {
169
+ var b = m.children;
170
+ if (b !== void 0)
171
+ if (E)
172
+ if (K(b)) {
173
+ for (E = 0; E < b.length; E++)
174
+ u(b[E]);
175
+ Object.freeze && Object.freeze(b);
176
176
  } else
177
177
  console.error(
178
178
  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
179
179
  );
180
- else v(i);
181
- if (I.call(r, "key")) {
182
- i = t(e);
183
- var b = Object.keys(r).filter(function(ne) {
184
- return ne !== "key";
180
+ else u(b);
181
+ if (P.call(m, "key")) {
182
+ b = r(t);
183
+ var S = Object.keys(m).filter(function(A) {
184
+ return A !== "key";
185
185
  });
186
- o = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", V[i + o] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
186
+ E = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", ee[b + E] || (S = 0 < S.length ? "{" + S.join(": ..., ") + ": ...}" : "{}", console.error(
187
187
  `A props object containing a "key" prop is being spread into JSX:
188
188
  let props = %s;
189
189
  <%s {...props} />
190
190
  React keys must be passed directly to JSX without using spread:
191
191
  let props = %s;
192
192
  <%s key={someKey} {...props} />`,
193
- o,
194
- i,
193
+ E,
195
194
  b,
196
- i
197
- ), V[i + o] = !0);
195
+ S,
196
+ b
197
+ ), ee[b + E] = !0);
198
198
  }
199
- if (i = null, n !== void 0 && (s(n), i = "" + n), m(r) && (s(r.key), i = "" + r.key), "key" in r) {
200
- n = {};
201
- for (var D in r)
202
- D !== "key" && (n[D] = r[D]);
203
- } else n = r;
204
- return i && f(
205
- n,
206
- typeof e == "function" ? e.displayName || e.name || "Unknown" : e
207
- ), R(
208
- e,
209
- i,
210
- n,
211
- c(),
212
- A,
213
- Y
199
+ if (b = null, N !== void 0 && (o(N), b = "" + N), _(m) && (o(m.key), b = "" + m.key), "key" in m) {
200
+ N = {};
201
+ for (var O in m)
202
+ O !== "key" && (N[O] = m[O]);
203
+ } else N = m;
204
+ return b && y(
205
+ N,
206
+ typeof t == "function" ? t.displayName || t.name || "Unknown" : t
207
+ ), l(
208
+ t,
209
+ b,
210
+ N,
211
+ i(),
212
+ x,
213
+ z
214
214
  );
215
215
  }
216
- function v(e) {
217
- w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
216
+ function u(t) {
217
+ k(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === G && (t._payload.status === "fulfilled" ? k(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
218
218
  }
219
- function w(e) {
220
- return typeof e == "object" && e !== null && e.$$typeof === h;
219
+ function k(t) {
220
+ return typeof t == "object" && t !== null && t.$$typeof === j;
221
221
  }
222
- var p = ae, h = Symbol.for("react.transitional.element"), x = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), $ = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, C = console.createTask ? console.createTask : function() {
222
+ var v = gt, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), M = /* @__PURE__ */ Symbol.for("react.fragment"), ye = /* @__PURE__ */ Symbol.for("react.strict_mode"), oe = /* @__PURE__ */ Symbol.for("react.profiler"), ke = /* @__PURE__ */ Symbol.for("react.consumer"), ie = /* @__PURE__ */ Symbol.for("react.context"), I = /* @__PURE__ */ Symbol.for("react.forward_ref"), ce = /* @__PURE__ */ Symbol.for("react.suspense"), le = /* @__PURE__ */ Symbol.for("react.suspense_list"), ue = /* @__PURE__ */ Symbol.for("react.memo"), G = /* @__PURE__ */ Symbol.for("react.lazy"), ge = /* @__PURE__ */ Symbol.for("react.activity"), we = /* @__PURE__ */ Symbol.for("react.client.reference"), U = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, K = Array.isArray, X = console.createTask ? console.createTask : function() {
223
223
  return null;
224
224
  };
225
- p = {
226
- react_stack_bottom_frame: function(e) {
227
- return e();
225
+ v = {
226
+ react_stack_bottom_frame: function(t) {
227
+ return t();
228
228
  }
229
229
  };
230
- var F, L = {}, W = p.react_stack_bottom_frame.bind(
231
- p,
232
- u
233
- )(), U = C(l(u)), V = {};
234
- T.Fragment = k, T.jsx = function(e, r, n) {
235
- var o = 1e4 > $.recentlyCreatedOwnerStacks++;
236
- return d(
237
- e,
238
- r,
239
- n,
230
+ var B, de = {}, Q = v.react_stack_bottom_frame.bind(
231
+ v,
232
+ s
233
+ )(), L = X(c(s)), ee = {};
234
+ ae.Fragment = M, ae.jsx = function(t, m, N) {
235
+ var E = 1e4 > U.recentlyCreatedOwnerStacks++;
236
+ return w(
237
+ t,
238
+ m,
239
+ N,
240
240
  !1,
241
- o ? Error("react-stack-top-frame") : W,
242
- o ? C(l(e)) : U
241
+ E ? Error("react-stack-top-frame") : Q,
242
+ E ? X(c(t)) : L
243
243
  );
244
- }, T.jsxs = function(e, r, n) {
245
- var o = 1e4 > $.recentlyCreatedOwnerStacks++;
246
- return d(
247
- e,
248
- r,
249
- n,
244
+ }, ae.jsxs = function(t, m, N) {
245
+ var E = 1e4 > U.recentlyCreatedOwnerStacks++;
246
+ return w(
247
+ t,
248
+ m,
249
+ N,
250
250
  !0,
251
- o ? Error("react-stack-top-frame") : W,
252
- o ? C(l(e)) : U
251
+ E ? Error("react-stack-top-frame") : Q,
252
+ E ? X(c(t)) : L
253
253
  );
254
254
  };
255
- })()), T;
255
+ })()), ae;
256
256
  }
257
- var z;
258
- function se() {
259
- return z || (z = 1, process.env.NODE_ENV === "production" ? g.exports = oe() : g.exports = ie()), g.exports;
257
+ var qe;
258
+ function Et() {
259
+ return qe || (qe = 1, process.env.NODE_ENV === "production" ? pe.exports = wt() : pe.exports = Nt()), pe.exports;
260
260
  }
261
- var _ = se();
262
- const le = "_timeline_100yd_1", j = {
263
- timeline: le,
264
- "timeline-items": "_timeline-items_100yd_6",
265
- "timeline-item": "_timeline-item_100yd_6",
266
- "timeline-indicator": "_timeline-indicator_100yd_24"
261
+ var a = Et();
262
+ const jt = "_timeline_x6ik7_1", ve = {
263
+ timeline: jt,
264
+ "timeline-items": "_timeline-items_x6ik7_6",
265
+ "timeline-item": "_timeline-item_x6ik7_6",
266
+ "timeline-indicator": "_timeline-indicator_x6ik7_26"
267
267
  };
268
- function G() {
269
- var t = Math.floor(120 + Math.random() * 91), a = Math.floor(120 + Math.random() * 91), s = Math.floor(120 + Math.random() * 91);
270
- return `rgb(${t},${a},${s})`;
268
+ function Ue() {
269
+ var r = Math.floor(120 + Math.random() * 91), n = Math.floor(120 + Math.random() * 91), o = Math.floor(120 + Math.random() * 91);
270
+ return `rgb(${r},${n},${o})`;
271
271
  }
272
- function M(t, a) {
273
- return a === t.length - 1 ? t[a] - t[a - 1] : t[a + 1] - t[a];
274
- }
275
- function ce(t, a, s = 1) {
276
- return a + s >= t.length ? t.at(-1) : t[a + s];
272
+ const Rt = new Array(20).fill(0).map(Ue);
273
+ function Er({ items: r, currentTime: n, totalTime: o, scale: c = 1, indicator: i, itemStyle: s }) {
274
+ const _ = r.map((l, w) => {
275
+ let u, k;
276
+ if (Array.isArray(l.time))
277
+ [u, k] = l.time;
278
+ else if (u = l.time, w === r.length - 1)
279
+ k = o;
280
+ else {
281
+ const v = r[w + 1];
282
+ k = Array.isArray(v.time) ? v.time[0] : v.time;
283
+ }
284
+ return { ...l, start: u, end: k };
285
+ }).filter((l) => l.start >= 0);
286
+ let y = 0;
287
+ const p = [];
288
+ return _.forEach((l, w) => {
289
+ let u;
290
+ if (l.level !== void 0)
291
+ u = l.level;
292
+ else {
293
+ u = 0;
294
+ const v = p.filter((j) => l.start < j.end && l.end > j.start).map((j) => j.level);
295
+ for (; v.includes(u); )
296
+ u++;
297
+ }
298
+ u > y && (y = u), p.push({ ...l, level: u });
299
+ }), a.jsxs("div", { className: ve.timeline, children: [a.jsx("div", { className: ve["timeline-indicator"], ...i }), a.jsx("div", { className: ve["timeline-items"], style: {
300
+ "--translate": `${50 - n / o * c * 100}%`,
301
+ height: `${(y + 1) * 40}px`
302
+ // 动态计算总高度
303
+ }, children: p.map((l, w) => {
304
+ const u = (l.end - l.start) / o * c * 100 + "%", k = l.start / o * c * 100 + "%";
305
+ return a.jsx("span", { className: ve["timeline-item"], style: {
306
+ "--bg": l.style?.background || Rt[w % 20],
307
+ width: u,
308
+ left: k,
309
+ top: `${l.level * 40}px`,
310
+ // 重叠时垂直偏移,每一层 40px
311
+ position: "absolute",
312
+ ...s,
313
+ ...l.style
314
+ }, children: l.content }, w);
315
+ }) })] });
277
316
  }
278
- const ue = new Array(20).fill(0).map(G);
279
- function _e({ items: t, currentTime: a, totalTime: s, scale: l = 1, indicator: c, itemStyle: u }) {
280
- t = t.filter((f) => f.time >= 0), t[0].time !== 0 && t.unshift({
281
- time: 0,
282
- content: void 0
317
+ const Tt = "_timeline_kp8su_1", xe = {
318
+ timeline: Tt,
319
+ "timeline-items": "_timeline-items_kp8su_6",
320
+ "timeline-item": "_timeline-item_kp8su_6",
321
+ "timeline-indicator": "_timeline-indicator_kp8su_25"
322
+ }, Mt = new Array(20).fill(0).map(Ue);
323
+ function jr({ items: r, currentTime: n, totalTime: o, scale: c = 1, indicator: i, itemStyle: s, prev: _ = 2, height: y, left: p = 10 }) {
324
+ const l = r.map((u, k) => {
325
+ let v, j;
326
+ if (Array.isArray(u.time))
327
+ [v, j] = u.time;
328
+ else if (v = u.time, k === r.length - 1)
329
+ j = o;
330
+ else {
331
+ const q = r[k + 1];
332
+ j = Array.isArray(q.time) ? q.time[0] : q.time;
333
+ }
334
+ return { ...u, start: v, end: j };
335
+ }).filter((u) => u.start >= 0), w = l.filter((u, k) => {
336
+ const v = l[k + _] || l[l.length - 1];
337
+ return n <= v.start;
283
338
  });
284
- const m = t.map((f) => f.time);
285
- return _.jsxs("div", { className: j.timeline, children: [_.jsx("div", { className: j["timeline-indicator"], ...c }), _.jsx("div", { className: j["timeline-items"], style: {
286
- "--translate": `${l * 50 / l - a / s * l * 100}%`
287
- }, children: t.map((f, E) => {
288
- const d = M(m, E) / s * l * 100 + "%";
289
- return _.jsx("span", { className: j["timeline-item"], style: {
290
- "--bg": f.style?.background || ue[E % 20],
291
- width: d,
292
- ...u
293
- }, children: f.content });
339
+ return a.jsxs("div", { className: xe.timeline, style: { height: y }, children: [a.jsx("div", { className: xe["timeline-indicator"], ...i, style: { left: `${p}%` } }), a.jsx("div", { className: xe["timeline-items"], style: {
340
+ "--translate": `${p - n / o * c * 100}%`
341
+ }, children: w.map((u, k) => {
342
+ const v = (u.end - u.start) / o * c * 100 + "%", j = u.start / o * c * 100 + "%";
343
+ return a.jsx("div", { className: xe["timeline-item"], style: {
344
+ "--bg": u.style?.background || Mt[k % 20],
345
+ width: v,
346
+ left: j,
347
+ top: `${k * 35}px`,
348
+ // 垂直时间轴不受 Level 影响,始终使用 index 实现自动补位
349
+ position: "absolute",
350
+ ...s,
351
+ ...u.style
352
+ }, children: u.content }, u.start + k);
294
353
  }) })] });
295
354
  }
296
- const fe = "_timeline_212s7_1", O = {
297
- timeline: fe,
298
- "timeline-items": "_timeline-items_212s7_6",
299
- "timeline-item": "_timeline-item_212s7_6",
300
- "timeline-indicator": "_timeline-indicator_212s7_20"
301
- }, me = new Array(20).fill(0).map(G);
302
- function Ee({ items: t, currentTime: a, totalTime: s, scale: l = 1, indicator: c, itemStyle: u, prev: m = 2, height: f, left: E = 10 }) {
303
- const R = t.map((d) => d.time);
304
- return _.jsxs("div", { className: O.timeline, style: { height: f }, children: [_.jsx("div", { className: O["timeline-indicator"], ...c, style: { left: `${E}%` } }), _.jsx("div", { className: O["timeline-items"], style: {
305
- "--translate": `${l * E / l - a / s * l * 100}%`
306
- }, children: t.map((d, v) => {
307
- const p = M(R, v) / s * l * 100 + "%", h = t.slice(0, v).reduce((x, k, S) => {
308
- const N = M(R, S);
309
- return x + N / s * l * 100;
310
- }, 0) + "%";
311
- if (a <= ce(t, v, m).time)
312
- return _.jsx("div", { className: O["timeline-item"], style: {
313
- "--bg": d.style?.background || me[v % 20],
314
- width: p,
315
- left: h,
316
- ...u
317
- }, children: d.content });
318
- }) })] });
355
+ const At = "_waterfall_113bd_1", Ct = "_popover_113bd_2", $t = "_timebar_113bd_62", Lt = "_timeItem_113bd_73", Ot = "_toolbar_113bd_84", St = "_search_113bd_94", Ft = "_zoom_113bd_132", It = "_zoomItem_113bd_141", Pt = "_zoomActive_113bd_155", zt = "_scroller_113bd_161", Dt = "_canvas_113bd_168", Yt = "_ruler_113bd_173", qt = "_rulerLabel_113bd_183", Wt = "_rulerTrack_113bd_198", Vt = "_rulerDim_113bd_204", Ut = "_tick_113bd_213", Xt = "_grid_113bd_228", Bt = "_rows_113bd_238", Ht = "_row_113bd_238", Jt = "_label_113bd_246", Zt = "_track_113bd_249", Gt = "_dot_113bd_269", Kt = "_name_113bd_276", Qt = "_tag_113bd_284", er = "_duration_113bd_297", tr = "_mark_113bd_305", rr = "_bar_113bd_318", nr = "_barActive_113bd_344", sr = "_barText_113bd_349", ar = "_idTag_113bd_353", or = "_dim_113bd_360", ir = "_cursor_113bd_369", cr = "_empty_113bd_388", lr = "_popoverHead_113bd_415", ur = "_close_113bd_430", dr = "_kv_113bd_448", mr = "_raw_113bd_464", Ae = {
356
+ waterfall: At,
357
+ popover: Ct,
358
+ timebar: $t,
359
+ timeItem: Lt,
360
+ toolbar: Ot,
361
+ search: St,
362
+ zoom: Ft,
363
+ zoomItem: It,
364
+ zoomActive: Pt,
365
+ scroller: zt,
366
+ canvas: Dt,
367
+ ruler: Yt,
368
+ rulerLabel: qt,
369
+ rulerTrack: Wt,
370
+ rulerDim: Vt,
371
+ tick: Ut,
372
+ grid: Xt,
373
+ rows: Bt,
374
+ row: Ht,
375
+ label: Jt,
376
+ track: Zt,
377
+ dot: Gt,
378
+ name: Kt,
379
+ tag: Qt,
380
+ duration: er,
381
+ mark: tr,
382
+ bar: rr,
383
+ barActive: nr,
384
+ barText: sr,
385
+ idTag: ar,
386
+ dim: or,
387
+ cursor: ir,
388
+ empty: cr,
389
+ popoverHead: lr,
390
+ close: ur,
391
+ kv: dr,
392
+ raw: mr
393
+ }, Xe = { type: "clock", millisecond: !0 }, fr = [0.5, 1, 1.5, 2, 4, 8, 16], _r = {
394
+ search: "搜索片段",
395
+ noMatch: (r) => `没有匹配 “${r}” 的片段`,
396
+ empty: "暂无时间线数据",
397
+ current: "当前",
398
+ total: "总",
399
+ track: "轨道",
400
+ start: "开始",
401
+ end: "结束",
402
+ duration: "时长",
403
+ close: "关闭详情",
404
+ zoom: "缩放",
405
+ lanesColumn: "轨道",
406
+ sequenceColumn: "片段"
407
+ };
408
+ function D(r) {
409
+ const n = Number.isFinite(r.duration) ? Math.max(r.duration, 0) : 0;
410
+ return r.start + n;
411
+ }
412
+ function Be(r, n, o) {
413
+ const c = r.length > 0;
414
+ let i = 0, s = 0;
415
+ c && (i = 1 / 0, s = -1 / 0, r.forEach((l) => {
416
+ Number.isFinite(l.start) && (i = Math.min(i, l.start));
417
+ const w = D(l);
418
+ Number.isFinite(w) && (s = Math.max(s, w));
419
+ }), Number.isFinite(i) || (i = 0), Number.isFinite(s) || (s = i));
420
+ const _ = typeof n == "number" && Number.isFinite(n) ? n : i, y = c ? Math.max(s - _, 0) : 0, p = typeof o == "number" && Number.isFinite(o) ? Math.max(o, 0) : y;
421
+ return { start: _, end: _ + p, duration: p };
422
+ }
423
+ function Z(r, n) {
424
+ return Number.isFinite(r) ? Math.min(Math.max(r, n.start), n.end) : n.start;
425
+ }
426
+ function He(r, n, o) {
427
+ const c = o ?? Be(r), i = Z(n, c);
428
+ return r.filter((s) => Number.isFinite(s.start) ? s.start <= i && i <= D(s) : !1);
429
+ }
430
+ function br(r, n, o) {
431
+ const c = He(r, n, o), i = /* @__PURE__ */ new Map();
432
+ return c.forEach((s) => {
433
+ i.set(s.index, s);
434
+ }), [...i.entries()].sort((s, _) => s[0] - _[0]).map(([, s]) => s);
435
+ }
436
+ function hr(r, n) {
437
+ const o = n.trim().toLowerCase();
438
+ return o ? (r.name ?? "").toLowerCase().includes(o) || r.id.toLowerCase().includes(o) : !0;
439
+ }
440
+ function We(r, n, o) {
441
+ return r?.name ?? `${o.track} ${n}`;
442
+ }
443
+ function pr(r, n, o, c) {
444
+ if (o === "sequence")
445
+ return r.map((s, _) => ({ clip: s, order: _ })).sort((s, _) => s.clip.start - _.clip.start || s.order - _.order).map(({ clip: s, order: _ }) => {
446
+ const y = n?.find((l) => l.index === s.index), p = We(y, s.index, c);
447
+ return {
448
+ id: `clip-${s.id}-${_}`,
449
+ index: s.index,
450
+ trackName: p,
451
+ label: s.name ?? s.id,
452
+ start: s.start,
453
+ end: D(s),
454
+ clips: [s]
455
+ };
456
+ });
457
+ const i = /* @__PURE__ */ new Map();
458
+ return n?.forEach((s) => {
459
+ i.has(s.index) || i.set(s.index, s);
460
+ }), r.forEach((s) => {
461
+ i.has(s.index) || i.set(s.index, void 0);
462
+ }), [...i.keys()].sort((s, _) => s - _).map((s) => {
463
+ const _ = i.get(s), y = We(_, s, c), p = r.filter((u) => u.index === s), l = p.map((u) => u.start).filter(Number.isFinite), w = p.map(D).filter(Number.isFinite);
464
+ return {
465
+ id: `track-${s}`,
466
+ index: s,
467
+ trackName: y,
468
+ label: y,
469
+ start: l.length ? Math.min(...l) : 0,
470
+ end: w.length ? Math.max(...w) : 0,
471
+ clips: p
472
+ };
473
+ });
474
+ }
475
+ function vr(r) {
476
+ if (!Number.isFinite(r) || r <= 0)
477
+ return 1;
478
+ const n = Math.pow(10, Math.floor(Math.log10(r))), o = [1, 2, 5, 10];
479
+ for (let c = 0; c < o.length; c++) {
480
+ const i = o[c] * n;
481
+ if (i >= r)
482
+ return i;
483
+ }
484
+ return 10 * n;
485
+ }
486
+ function xr(r, n, o = 64) {
487
+ const c = Number.isFinite(n) && n > 0 ? n : 1e-6, i = vr(o / c), s = Math.ceil(r.start / i) * i, _ = [];
488
+ for (let y = 0; y < 500; y++) {
489
+ const p = s + y * i;
490
+ if (p > r.end + i * 1e-6)
491
+ break;
492
+ p < r.start - i * 1e-6 || _.push({ value: p, x: (p - r.start) * c });
493
+ }
494
+ return {
495
+ step: i,
496
+ ticks: _,
497
+ firstOffset: (s - r.start) * c
498
+ };
499
+ }
500
+ function Y(r, n = 2) {
501
+ return String(Math.floor(Math.abs(r))).padStart(n, "0");
502
+ }
503
+ function Je(r) {
504
+ if (!Number.isFinite(r))
505
+ return "-";
506
+ const n = Math.round(r * 1e3) / 1e3;
507
+ return Object.is(n, -0) ? "0" : String(n);
508
+ }
509
+ function Ze(r, n, o, c) {
510
+ if (!Number.isFinite(r))
511
+ return "-";
512
+ const i = c === "ms" ? 1 : 1e3, s = Number.isFinite(o) ? o : 0, _ = Math.round((s + r) * i), y = _ < 0, p = Math.abs(_), l = Math.floor(p / 36e5), w = Math.floor(p % 36e5 / 6e4), u = Math.floor(p % 6e4 / 1e3), k = p % 1e3;
513
+ let v = `${Y(l)}:${Y(w)}:${Y(u)}`;
514
+ return n && (v += `.${Y(k, 3)}`), (y ? "-" : "") + v;
515
+ }
516
+ function Ge(r, n, o, c) {
517
+ if (!Number.isFinite(r))
518
+ return "-";
519
+ const i = Number.isInteger(n) && n > 0 ? n : 25, s = Number.isFinite(o) ? o : 0, _ = c === "ms" ? 1 : 1e3, y = Math.round((s + r) * _ * i / 1e3), p = y < 0, l = Math.abs(y), w = l % i, u = Math.floor(l / i), k = Math.floor(u / 3600), v = Math.floor(u % 3600 / 60), j = u % 60;
520
+ return `${p ? "-" : ""}${Y(k)}:${Y(v)}:${Y(j)}:${Y(w)}`;
521
+ }
522
+ function yr(r, n = Xe, o = "s") {
523
+ return typeof n == "function" ? n(r) : n.type === "number" ? Je(r) : n.type === "clock" ? Ze(r, n.millisecond !== !1, n.offset ?? 0, o) : Ge(r, n.fps, n.offset ?? 0, o);
524
+ }
525
+ function kr(r, n = Xe, o = "s") {
526
+ return typeof n == "function" ? n(r) : n.type === "number" ? Je(r) : n.type === "clock" ? Ze(r, n.millisecond !== !1, 0, o) : Ge(r, n.fps, 0, o);
527
+ }
528
+ const gr = typeof Ae == "object" && Ae ? Ae : {}, f = new Proxy(gr, {
529
+ get(r, n) {
530
+ return typeof n == "string" ? r[n] ?? "" : void 0;
531
+ }
532
+ });
533
+ function Ce(...r) {
534
+ return r.filter(Boolean).join(" ");
535
+ }
536
+ function $e(r) {
537
+ return `var(--wf-clip-${(r % 6 + 6) % 6 + 1})`;
538
+ }
539
+ function wr(r) {
540
+ if (!r)
541
+ return;
542
+ const n = r.trim().replace(/^#/, "");
543
+ if (!/^[0-9a-fA-F]{6}$/.test(n))
544
+ return;
545
+ const o = parseInt(n.slice(0, 2), 16), c = parseInt(n.slice(2, 4), 16), i = parseInt(n.slice(4, 6), 16);
546
+ return 0.299 * o + 0.587 * c + 0.114 * i > 150 ? "#14161c" : "#ffffff";
547
+ }
548
+ function Ve(r, n) {
549
+ const o = n.trim();
550
+ if (!o)
551
+ return r;
552
+ const c = r.toLowerCase().indexOf(o.toLowerCase());
553
+ return c < 0 ? r : a.jsxs(a.Fragment, { children: [r.slice(0, c), a.jsx("mark", { className: f.mark, children: r.slice(c, c + o.length) }), r.slice(c + o.length)] });
554
+ }
555
+ function Rr({ clips: r, tracks: n, layout: o = "lanes", unit: c = "s", viewStart: i, viewDuration: s, currentTime: _, onCurrentTimeChange: y, formatTime: p, formatDuration: l, fixedPlayhead: w = !1, playheadPosition: u = 0.5, followMode: k = "off", zoom: v, defaultZoom: j = 1, onZoomChange: q, labelWidth: M = 220, height: ye = 360, minTickGap: oe = 64, showTime: ke = !0, showDetail: ie = !0, showSearch: I = !0, showZoom: ce = !0, emptyText: le, labels: ue, onClipClick: G, className: ge, style: we }) {
556
+ const U = J(null), P = J(null), K = J(null), X = J(null), B = J(!1), de = typeof v == "number" && v > 0 ? v : j > 0 ? j : 1, Q = J(de), [L, ee] = be(""), [t, m] = be(j), [N, E] = be(0), [x, z] = be(null), b = V(() => ({ ..._r, ...ue }), [ue]), S = typeof v == "number" && Number.isFinite(v) ? v : t, O = S > 0 ? S : 1, A = k !== "off" ? "sequence" : o, g = V(() => Be(r, i, s), [r, i, s]), Ne = g.duration, Ee = Math.max(Ne, 1), te = Math.max(N - M, 320), T = te / Ee * O, je = Ne * T, Le = Math.min(Math.max(Number.isFinite(u) ? u : 0.5, 0), 1), F = w ? te * Le : 0, Ke = V(() => r.reduce((e, d) => {
557
+ const h = D(d);
558
+ return Number.isFinite(h) ? Math.max(e, h) : e;
559
+ }, g.end), [r, g.end]), Qe = Math.max(g.end, Ke), H = Math.max(Qe - g.start, 0) * T, re = Math.max(H - je, 0), et = w ? Math.max(0, te * (1 - Le) - re) : 0, tt = M + F + H + et, R = typeof _ == "number" && Number.isFinite(_) ? Z(_, g) : void 0, me = ze((e) => yr(e, p, c), [p, c]), fe = ze((e) => l ? l(e) : kr(e, p, c), [l, p, c]), Re = V(() => pr(r, n, A, b), [r, n, A, b]), W = V(() => L.trim() ? Re.map((e) => ({
560
+ ...e,
561
+ clips: e.clips.filter((d) => hr(d, L))
562
+ })).filter((e) => e.clips.length > 0) : Re, [Re, L]), rt = V(() => R === void 0 ? /* @__PURE__ */ new Set() : new Set(He(r, R, g)), [r, R, g]), { step: nt, ticks: st, firstOffset: at } = V(() => xr(g, T, oe), [g, T, oe]), ot = Math.max(nt * T, 1);
563
+ he(() => {
564
+ const e = P.current;
565
+ if (!e)
566
+ return;
567
+ const d = () => E(e.clientWidth);
568
+ if (d(), typeof ResizeObserver > "u")
569
+ return window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
570
+ const h = new ResizeObserver(d);
571
+ return h.observe(e), () => h.disconnect();
572
+ }, []), he(() => {
573
+ I || ee("");
574
+ }, [I]), he(() => {
575
+ if (!I)
576
+ return;
577
+ const e = (d) => {
578
+ if (!(d.metaKey || d.ctrlKey) || d.key.toLowerCase() !== "f")
579
+ return;
580
+ const h = U.current;
581
+ h && (!B.current && !h.contains(document.activeElement) || (d.preventDefault(), K.current?.focus(), K.current?.select()));
582
+ };
583
+ return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
584
+ }, [I]), he(() => {
585
+ if (!x)
586
+ return;
587
+ const e = (h) => {
588
+ const C = X.current;
589
+ C && h.target instanceof Node && C.contains(h.target) || z(null);
590
+ }, d = (h) => {
591
+ h.key === "Escape" && z(null);
592
+ };
593
+ return document.addEventListener("mousedown", e), document.addEventListener("keydown", d), () => {
594
+ document.removeEventListener("mousedown", e), document.removeEventListener("keydown", d);
595
+ };
596
+ }, [x]), Me(() => {
597
+ const e = P.current, d = Q.current;
598
+ if (!e || d === O)
599
+ return;
600
+ const h = te / Ee * d;
601
+ if (w) {
602
+ const C = Z(R ?? g.start, g);
603
+ e.scrollLeft = Math.max(0, (C - g.start) * T);
604
+ } else if (h > 0) {
605
+ const C = Z(g.start + (e.scrollLeft + e.clientWidth / 2 - M - F) / h, g);
606
+ e.scrollLeft = Math.max(0, M + F + (C - g.start) * T - e.clientWidth / 2);
607
+ }
608
+ Q.current = O;
609
+ }, [
610
+ O,
611
+ te,
612
+ Ee,
613
+ w,
614
+ R,
615
+ g,
616
+ T,
617
+ M,
618
+ F
619
+ ]), Me(() => {
620
+ if (!w)
621
+ return;
622
+ const e = P.current;
623
+ if (!e)
624
+ return;
625
+ const d = Z(R ?? g.start, g);
626
+ e.scrollLeft = Math.max(0, (d - g.start) * T);
627
+ }, [w, R, g, T]), Me(() => {
628
+ if (k === "off" || A !== "sequence")
629
+ return;
630
+ const e = P.current;
631
+ if (!e || R === void 0)
632
+ return;
633
+ if (k === "hide") {
634
+ e.scrollTop = 0;
635
+ return;
636
+ }
637
+ const d = e.querySelectorAll('[data-wf="row"]');
638
+ if (!d.length)
639
+ return;
640
+ let h = -1;
641
+ for (let $ = 0; $ < W.length; $++) {
642
+ const ne = W[$];
643
+ if (ne.start <= R && R <= ne.end) {
644
+ h = $;
645
+ break;
646
+ }
647
+ }
648
+ if (h < 0) {
649
+ for (let $ = 0; $ < W.length; $++)
650
+ if (W[$].end >= R) {
651
+ h = $;
652
+ break;
653
+ }
654
+ }
655
+ if (h < 0)
656
+ return;
657
+ const C = d[0].getBoundingClientRect().height || 32;
658
+ e.scrollTop = h * C;
659
+ }, [k, A, R, W]);
660
+ const it = (e) => {
661
+ v === void 0 && m(e), q?.(e);
662
+ }, Oe = (e, d) => {
663
+ G?.(e), ie && z({ clip: e, x: d.clientX, y: d.clientY });
664
+ }, ct = (e) => {
665
+ if (!y || !Number.isFinite(T) || T <= 0 || e.clientX < M)
666
+ return;
667
+ const d = e.currentTarget.getBoundingClientRect(), h = g.start + (e.clientX - d.left) / T;
668
+ y(Z(h, g));
669
+ }, lt = (e, d) => {
670
+ if (!e.clips.length)
671
+ return;
672
+ const h = R ?? g.start, C = br(e.clips, h, g)[0], $ = A === "sequence" ? e.clips[0] : C ?? e.clips[0];
673
+ Oe($, d);
674
+ }, Te = (e, d) => {
675
+ const h = L.trim();
676
+ return h ? e.toLowerCase().includes(h.toLowerCase()) ? Ve(e, L) : d && d.id.toLowerCase().includes(h.toLowerCase()) ? a.jsxs(a.Fragment, { children: [e, " ", a.jsxs("span", { className: f.idTag, children: ["#", Ve(d.id, L)] })] }) : e : e;
677
+ }, ut = (e) => e.label !== void 0 ? e.label : Te(e.name ?? e.id, e), dt = (e, d) => {
678
+ const h = D(e);
679
+ if (!Number.isFinite(e.start) || !Number.isFinite(h) || h < g.start)
680
+ return null;
681
+ const C = Math.max(e.start, g.start), $ = (C - g.start) * T, ne = Math.max((h - C) * T, 2), Ie = e.name ?? e.id, Pe = fe(h - e.start);
682
+ return a.jsx("button", { type: "button", "data-wf": "bar", "data-clip-id": e.id, className: Ce(f.bar, rt.has(e) && f.barActive), style: {
683
+ left: $,
684
+ width: ne,
685
+ background: e.color ?? $e(e.index),
686
+ color: wr(e.color),
687
+ ...e.style
688
+ }, title: `${Ie} · ${Pe}`, "aria-label": `${Ie} ${Pe}`, onClick: (kt) => Oe(e, kt), children: ne > 60 && a.jsx("span", { className: f.barText, children: ut(e) }) }, d);
689
+ }, Se = k === "hide" && A === "sequence" ? R : void 0, Fe = r.length > 0, mt = Fe && L.trim() ? b.noMatch(L) : le ?? b.empty, ft = !Fe || W.length === 0, _t = 300, bt = typeof window > "u" ? 1024 : window.innerWidth, ht = typeof window > "u" ? 768 : window.innerHeight, pt = x ? Math.max(12, Math.min(x.x + 12, bt - _t - 12)) : 0, vt = x ? Math.max(12, Math.min(x.y + 12, ht - 240)) : 0;
690
+ let _e = "";
691
+ if (x?.clip.meta)
692
+ try {
693
+ _e = JSON.stringify(x.clip.meta, null, 2);
694
+ } catch {
695
+ _e = "[无法序列化的数据]";
696
+ }
697
+ const xt = x ? n?.find((e) => e.index === x.clip.index) : void 0, yt = x ? xt?.name ?? `${b.track} ${x.clip.index}` : "";
698
+ return a.jsxs("div", { ref: U, className: Ce(f.waterfall, ge), style: we, onMouseEnter: () => {
699
+ B.current = !0;
700
+ }, onMouseLeave: () => {
701
+ B.current = !1;
702
+ }, children: [ke && a.jsxs("div", { className: f.timebar, children: [a.jsxs("span", { className: f.timeItem, "data-wf": "current-time", children: [b.current, ":", a.jsx("b", { children: R === void 0 ? "-" : me(R) })] }), a.jsxs("span", { className: f.timeItem, "data-wf": "total-time", children: [b.total, ":", a.jsx("b", { children: fe(Ne) })] })] }), (I || ce) && a.jsxs("div", { className: f.toolbar, children: [I && a.jsxs("div", { className: f.search, children: [a.jsx("input", { ref: K, "data-wf": "search", value: L, onChange: (e) => ee(e.target.value), placeholder: b.search, "aria-label": b.search }), a.jsx("kbd", { children: "⌘F" })] }), ce && a.jsx("div", { className: f.zoom, role: "group", "aria-label": b.zoom, "data-wf": "zoom", children: fr.map((e) => a.jsxs("button", { type: "button", "data-zoom": e, className: Ce(f.zoomItem, e === O && f.zoomActive), "aria-pressed": e === O, onClick: () => it(e), children: [e, "x"] }, e)) })] }), a.jsx("div", { ref: P, className: f.scroller, style: { height: ye }, "data-wf": "scroller", "data-wf-layout": A, children: a.jsxs("div", { className: f.canvas, "data-wf": "canvas", style: { width: tt }, children: [a.jsxs("div", { className: f.ruler, "data-wf": "ruler", children: [a.jsx("div", { className: f.rulerLabel, "data-wf": "ruler-label", style: { width: M }, children: A === "lanes" ? b.lanesColumn : b.sequenceColumn }), a.jsxs("div", { className: f.rulerTrack, "data-wf": "ruler-track", style: { width: H, marginLeft: F }, onClick: ct, children: [st.map((e) => a.jsx("span", { className: f.tick, style: { left: e.x }, children: me(e.value) }, e.value)), re > 0 && a.jsx("span", { className: f.rulerDim, style: { left: je, width: re } })] })] }), H > 0 && a.jsx("div", { className: f.grid, style: {
703
+ left: M + F,
704
+ width: H,
705
+ backgroundSize: `${ot}px 100%`,
706
+ backgroundPositionX: at
707
+ } }), ft ? a.jsx("div", { className: f.empty, "data-wf": "empty", children: mt }) : a.jsx("div", { className: f.rows, children: W.map((e) => a.jsxs("div", { className: f.row, "data-wf": "row", "data-start": e.start, "data-end": e.end, style: Se !== void 0 && e.end < Se ? { display: "none" } : void 0, children: [a.jsxs("div", { className: f.label, style: { width: M }, title: e.label, onClick: (d) => lt(e, d), children: [a.jsx("span", { className: f.dot, style: {
708
+ background: e.clips[0]?.color ?? $e(e.index)
709
+ } }), a.jsx("span", { className: f.name, children: A === "sequence" ? Te(e.label, e.clips[0]) : Te(e.label) }), A === "sequence" && a.jsx("span", { className: f.tag, title: e.trackName, children: e.trackName }), A === "sequence" && a.jsx("span", { className: f.duration, children: fe(e.end - e.start) })] }), a.jsx("div", { className: f.track, style: { width: H, marginLeft: F }, children: e.clips.map((d, h) => dt(d, `${e.id}-${h}`)) })] }, e.id)) }), re > 0 && a.jsx("div", { className: f.dim, "data-wf": "dim", style: { left: M + F + je, width: re } }), R !== void 0 && a.jsx("div", { className: f.cursor, "data-wf": "cursor", style: { left: M + F + (R - g.start) * T } })] }) }), ie && x && a.jsxs("div", { ref: X, className: f.popover, "data-wf": "detail", style: { left: pt, top: vt }, role: "dialog", "aria-label": x.clip.name ?? x.clip.id, children: [a.jsxs("div", { className: f.popoverHead, children: [a.jsx("span", { className: f.dot, style: {
710
+ background: x.clip.color ?? $e(x.clip.index)
711
+ } }), a.jsx("strong", { title: x.clip.name ?? x.clip.id, children: x.clip.name ?? x.clip.id }), a.jsx("button", { type: "button", className: f.close, "aria-label": b.close, onClick: () => z(null), children: "×" })] }), a.jsxs("dl", { className: f.kv, children: [a.jsx("dt", { children: b.track }), a.jsxs("dd", { children: [x.clip.index, " · ", yt] }), a.jsx("dt", { children: b.start }), a.jsx("dd", { children: me(x.clip.start) }), a.jsx("dt", { children: b.end }), a.jsx("dd", { children: me(D(x.clip)) }), a.jsx("dt", { children: b.duration }), a.jsx("dd", { children: fe(D(x.clip) - x.clip.start) })] }), _e && a.jsx("pre", { className: f.raw, children: _e })] })] });
319
712
  }
320
713
  export {
321
- Ee as Vertical,
322
- _e as default
714
+ Rr as TraceWaterfall,
715
+ jr as Vertical,
716
+ pr as buildRows,
717
+ xr as buildTicks,
718
+ Er as default,
719
+ kr as formatDuration,
720
+ yr as formatTime,
721
+ He as getActiveAt,
722
+ D as getClipEnd,
723
+ br as getTopActiveAt,
724
+ Be as resolveRange
323
725
  };