@mt-gloss/ui 0.1.97 → 0.1.99
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/{COMMITS-By42AA8m.js → COMMITS-K4Al1_wQ.js} +141 -85
- package/composites-panels.js +539 -300
- package/index.js +887 -881
- package/lib/composites/dashboard/BellCutout/BellCutout.d.ts +18 -2
- package/lib/composites/panels/asserter/domWalkAsserter.d.ts +86 -0
- package/lib/composites/panels/coordinator/types.d.ts +18 -0
- package/lib/composites/panels/index.d.ts +2 -1
- package/package.json +1 -1
- package/ui.css +1 -1
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as
|
|
3
|
-
const f =
|
|
4
|
-
function
|
|
5
|
-
const e =
|
|
1
|
+
import { jsx as a, jsxs as E } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as S, useContext as g, useReducer as m, useRef as d, useEffect as u, useMemo as C, useCallback as v, useSyncExternalStore as _, useLayoutEffect as I, useState as P } from "react";
|
|
3
|
+
const f = S(null);
|
|
4
|
+
function O() {
|
|
5
|
+
const e = g(f);
|
|
6
6
|
if (!e)
|
|
7
7
|
throw new Error(
|
|
8
8
|
"[panels] usePanelContext must be used inside <PanelProvider>. See @mt-gloss/ui/composites/panels."
|
|
9
9
|
);
|
|
10
10
|
return e;
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
return
|
|
12
|
+
function q() {
|
|
13
|
+
return g(f);
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const L = {
|
|
16
16
|
activePanelId: null,
|
|
17
17
|
activeTrigger: null,
|
|
18
18
|
bellCutoutOpen: !1,
|
|
19
19
|
isDirty: !1,
|
|
20
20
|
lockHint: null,
|
|
21
|
+
bufferByCard: {},
|
|
21
22
|
lastClose: null,
|
|
22
23
|
pendingSideEffects: []
|
|
23
|
-
},
|
|
24
|
-
function
|
|
24
|
+
}, p = /* @__PURE__ */ new Set(["settings"]);
|
|
25
|
+
function b(e, n) {
|
|
25
26
|
if (e == null || e.kind !== n.kind) return !1;
|
|
26
27
|
switch (e.kind) {
|
|
27
28
|
case "bell":
|
|
@@ -34,7 +35,7 @@ function L(e, n) {
|
|
|
34
35
|
return e.global === n.global && e.align === n.align;
|
|
35
36
|
}
|
|
36
37
|
}
|
|
37
|
-
function
|
|
38
|
+
function T(e, n) {
|
|
38
39
|
switch (n.type) {
|
|
39
40
|
case "OPEN_PANEL": {
|
|
40
41
|
if (e.activePanelId && e.isDirty)
|
|
@@ -52,7 +53,7 @@ function N(e, n) {
|
|
|
52
53
|
}
|
|
53
54
|
]
|
|
54
55
|
};
|
|
55
|
-
if (e.activePanelId === n.panelId &&
|
|
56
|
+
if (e.activePanelId === n.panelId && b(e.activeTrigger, n.trigger))
|
|
56
57
|
return e;
|
|
57
58
|
const t = e.activePanelId != null ? [
|
|
58
59
|
{
|
|
@@ -75,7 +76,15 @@ function N(e, n) {
|
|
|
75
76
|
case "CLOSE_PANEL": {
|
|
76
77
|
if (e.activePanelId == null)
|
|
77
78
|
return e;
|
|
78
|
-
const t = e.activePanelId, r = e.isDirty ? n.reason === "apply-button" ?
|
|
79
|
+
const t = e.activePanelId, r = e.activeTrigger?.cardId ?? null, i = r != null ? e.bufferByCard[r] : void 0, o = e.isDirty ? n.reason === "apply-button" ? r != null && i != null ? [
|
|
80
|
+
{
|
|
81
|
+
type: "COMMIT_BUFFER",
|
|
82
|
+
payload: { cardId: r, delta: i }
|
|
83
|
+
}
|
|
84
|
+
] : [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [], l = r != null && i != null ? (() => {
|
|
85
|
+
const c = { ...e.bufferByCard };
|
|
86
|
+
return delete c[r], c;
|
|
87
|
+
})() : e.bufferByCard;
|
|
79
88
|
return {
|
|
80
89
|
...e,
|
|
81
90
|
activePanelId: null,
|
|
@@ -83,8 +92,9 @@ function N(e, n) {
|
|
|
83
92
|
isDirty: !1,
|
|
84
93
|
lockHint: null,
|
|
85
94
|
// closing clears any active lockHint (dirty-buffer condition gone)
|
|
95
|
+
bufferByCard: l,
|
|
86
96
|
lastClose: { panelId: t, reason: n.reason },
|
|
87
|
-
pendingSideEffects: [...e.pendingSideEffects, ...
|
|
97
|
+
pendingSideEffects: [...e.pendingSideEffects, ...o]
|
|
88
98
|
};
|
|
89
99
|
}
|
|
90
100
|
case "OPEN_BELL_CUTOUT":
|
|
@@ -100,8 +110,54 @@ function N(e, n) {
|
|
|
100
110
|
} : { ...e, bellCutoutOpen: !0 };
|
|
101
111
|
case "CLOSE_BELL_CUTOUT":
|
|
102
112
|
return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
|
|
113
|
+
case "SET_BUFFER_VALUE": {
|
|
114
|
+
if (e.activePanelId == null || !p.has(e.activePanelId))
|
|
115
|
+
return {
|
|
116
|
+
...e,
|
|
117
|
+
pendingSideEffects: [
|
|
118
|
+
...e.pendingSideEffects,
|
|
119
|
+
{ type: "INVALID_DISPATCH", reason: "no-buffer-panel" }
|
|
120
|
+
]
|
|
121
|
+
};
|
|
122
|
+
const t = e.bufferByCard[n.cardId], r = t == null;
|
|
123
|
+
if (!r && t.changes[n.key] === n.value)
|
|
124
|
+
return e;
|
|
125
|
+
const o = { kind: "settings", changes: {
|
|
126
|
+
...t?.kind === "settings" ? t.changes : {},
|
|
127
|
+
[n.key]: n.value
|
|
128
|
+
} }, l = { ...e.bufferByCard, [n.cardId]: o }, c = r ? [
|
|
129
|
+
{
|
|
130
|
+
type: "SCHEDULE_TIMER",
|
|
131
|
+
ms: 0,
|
|
132
|
+
action: { type: "BUFFER_BECOMES_DIRTY" }
|
|
133
|
+
}
|
|
134
|
+
] : [];
|
|
135
|
+
return {
|
|
136
|
+
...e,
|
|
137
|
+
bufferByCard: l,
|
|
138
|
+
pendingSideEffects: [...e.pendingSideEffects, ...c]
|
|
139
|
+
};
|
|
140
|
+
}
|
|
141
|
+
case "CLEAR_BUFFER": {
|
|
142
|
+
if (e.bufferByCard[n.cardId] == null)
|
|
143
|
+
return e;
|
|
144
|
+
const r = Object.keys(e.bufferByCard).length === 1, i = { ...e.bufferByCard };
|
|
145
|
+
delete i[n.cardId];
|
|
146
|
+
const o = r && e.isDirty ? [
|
|
147
|
+
{
|
|
148
|
+
type: "SCHEDULE_TIMER",
|
|
149
|
+
ms: 0,
|
|
150
|
+
action: { type: "BUFFER_BECOMES_CLEAN" }
|
|
151
|
+
}
|
|
152
|
+
] : [];
|
|
153
|
+
return {
|
|
154
|
+
...e,
|
|
155
|
+
bufferByCard: i,
|
|
156
|
+
pendingSideEffects: [...e.pendingSideEffects, ...o]
|
|
157
|
+
};
|
|
158
|
+
}
|
|
103
159
|
case "BUFFER_BECOMES_DIRTY":
|
|
104
|
-
return e.activePanelId == null || !
|
|
160
|
+
return e.activePanelId == null || !p.has(e.activePanelId) ? {
|
|
105
161
|
...e,
|
|
106
162
|
pendingSideEffects: [
|
|
107
163
|
...e.pendingSideEffects,
|
|
@@ -134,14 +190,14 @@ function N(e, n) {
|
|
|
134
190
|
return e;
|
|
135
191
|
}
|
|
136
192
|
}
|
|
137
|
-
function
|
|
193
|
+
function D(e) {
|
|
138
194
|
return e.activePanelId === "notification-center" ? "notif-center" : e.activePanelId != null && e.bellCutoutOpen ? e.isDirty ? "panel-dirty+cutout" : "panel-clean+cutout" : e.activePanelId != null ? e.isDirty ? "panel-dirty" : "panel-clean" : e.bellCutoutOpen ? "bell-cutout-only" : "idle";
|
|
139
195
|
}
|
|
140
|
-
function
|
|
141
|
-
const [e, n] =
|
|
142
|
-
|
|
196
|
+
function w() {
|
|
197
|
+
const [e, n] = m(T, L), t = d([]), r = d(null);
|
|
198
|
+
u(() => () => {
|
|
143
199
|
r.current != null && (window.clearTimeout(r.current), r.current = null);
|
|
144
|
-
}, []),
|
|
200
|
+
}, []), u(() => {
|
|
145
201
|
if (e.pendingSideEffects.length !== 0) {
|
|
146
202
|
for (const l of e.pendingSideEffects)
|
|
147
203
|
l.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
|
|
@@ -157,7 +213,7 @@ function D() {
|
|
|
157
213
|
] : l.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", l.reason);
|
|
158
214
|
n({ type: "DRAIN_SIDE_EFFECTS" });
|
|
159
215
|
}
|
|
160
|
-
}, [e.pendingSideEffects, n]),
|
|
216
|
+
}, [e.pendingSideEffects, n]), u(() => {
|
|
161
217
|
if (!e.lastClose) return;
|
|
162
218
|
const l = {
|
|
163
219
|
panelId: e.lastClose.panelId,
|
|
@@ -170,57 +226,57 @@ function D() {
|
|
|
170
226
|
l
|
|
171
227
|
];
|
|
172
228
|
}, [e.lastClose]);
|
|
173
|
-
const i =
|
|
174
|
-
() =>
|
|
229
|
+
const i = C(
|
|
230
|
+
() => D(e),
|
|
175
231
|
[e.activePanelId, e.bellCutoutOpen, e.isDirty]
|
|
176
|
-
),
|
|
177
|
-
return { state: e, surfaceState: i, dispatch: n, getCloseLog:
|
|
232
|
+
), o = v(() => t.current.slice(), []);
|
|
233
|
+
return { state: e, surfaceState: i, dispatch: n, getCloseLog: o };
|
|
178
234
|
}
|
|
179
235
|
function Y({ children: e }) {
|
|
180
|
-
const n =
|
|
236
|
+
const n = w(), t = C(
|
|
181
237
|
() => n,
|
|
182
238
|
// Re-publish only when one of the four coordinator fields changes identity.
|
|
183
239
|
// dispatch + getCloseLog are stable. state + surfaceState change on dispatch.
|
|
184
240
|
[n.state, n.surfaceState, n.dispatch, n.getCloseLog]
|
|
185
241
|
);
|
|
186
|
-
return /* @__PURE__ */
|
|
242
|
+
return /* @__PURE__ */ a(f.Provider, { value: t, children: e });
|
|
187
243
|
}
|
|
188
|
-
const
|
|
189
|
-
function
|
|
190
|
-
return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(
|
|
244
|
+
const N = "(prefers-reduced-motion: reduce)";
|
|
245
|
+
function y() {
|
|
246
|
+
return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(N);
|
|
191
247
|
}
|
|
192
|
-
function
|
|
193
|
-
const n =
|
|
248
|
+
function x(e) {
|
|
249
|
+
const n = y();
|
|
194
250
|
return n ? (n.addEventListener("change", e), () => {
|
|
195
251
|
n.removeEventListener("change", e);
|
|
196
252
|
}) : () => {
|
|
197
253
|
};
|
|
198
254
|
}
|
|
199
|
-
function
|
|
200
|
-
const e =
|
|
255
|
+
function H() {
|
|
256
|
+
const e = y();
|
|
201
257
|
return e ? e.matches : !1;
|
|
202
258
|
}
|
|
203
|
-
function
|
|
259
|
+
function F() {
|
|
204
260
|
return !1;
|
|
205
261
|
}
|
|
206
262
|
function R() {
|
|
207
|
-
return
|
|
263
|
+
return _(x, H, F);
|
|
208
264
|
}
|
|
209
|
-
const
|
|
265
|
+
const B = {
|
|
210
266
|
position: "relative",
|
|
211
267
|
pointerEvents: "auto"
|
|
212
268
|
};
|
|
213
|
-
function
|
|
214
|
-
return /* @__PURE__ */
|
|
269
|
+
function A({ children: e, onClose: n, footer: t }) {
|
|
270
|
+
return /* @__PURE__ */ E(
|
|
215
271
|
"div",
|
|
216
272
|
{
|
|
217
273
|
"data-chrome": "panel",
|
|
218
274
|
role: "dialog",
|
|
219
275
|
"aria-modal": "true",
|
|
220
276
|
className: "gloss-panel-chrome",
|
|
221
|
-
style:
|
|
277
|
+
style: B,
|
|
222
278
|
children: [
|
|
223
|
-
/* @__PURE__ */
|
|
279
|
+
/* @__PURE__ */ a("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ a(
|
|
224
280
|
"button",
|
|
225
281
|
{
|
|
226
282
|
id: "panel-close",
|
|
@@ -231,13 +287,13 @@ function k({ children: e, onClose: n, footer: t }) {
|
|
|
231
287
|
children: "×"
|
|
232
288
|
}
|
|
233
289
|
) }),
|
|
234
|
-
/* @__PURE__ */
|
|
235
|
-
t != null && /* @__PURE__ */
|
|
290
|
+
/* @__PURE__ */ a("div", { className: "gloss-panel-chrome__body", children: e }),
|
|
291
|
+
t != null && /* @__PURE__ */ a("div", { className: "gloss-panel-chrome__footer", children: t })
|
|
236
292
|
]
|
|
237
293
|
}
|
|
238
294
|
);
|
|
239
295
|
}
|
|
240
|
-
function
|
|
296
|
+
function k(e) {
|
|
241
297
|
if (process.env.NODE_ENV === "production" || !e || !e.parentElement) return;
|
|
242
298
|
const n = e.parentElement, t = window.getComputedStyle(n);
|
|
243
299
|
t.perspective === "none" && console.warn(
|
|
@@ -248,26 +304,26 @@ function M(e) {
|
|
|
248
304
|
n
|
|
249
305
|
);
|
|
250
306
|
}
|
|
251
|
-
function
|
|
307
|
+
function M({ isOpen: e, children: n }) {
|
|
252
308
|
const t = R(), r = d(null);
|
|
253
|
-
|
|
254
|
-
|
|
309
|
+
I(() => {
|
|
310
|
+
k(r.current);
|
|
255
311
|
}, []);
|
|
256
|
-
const [i,
|
|
257
|
-
|
|
312
|
+
const [i, o] = P(!1);
|
|
313
|
+
u(() => {
|
|
258
314
|
if (!e) {
|
|
259
|
-
|
|
315
|
+
o(!1);
|
|
260
316
|
return;
|
|
261
317
|
}
|
|
262
|
-
const
|
|
263
|
-
return () => cancelAnimationFrame(
|
|
318
|
+
const c = requestAnimationFrame(() => o(!0));
|
|
319
|
+
return () => cancelAnimationFrame(c);
|
|
264
320
|
}, [e]);
|
|
265
321
|
const l = [
|
|
266
322
|
"gloss-panel-mount",
|
|
267
323
|
i ? "has-panel" : "",
|
|
268
324
|
t ? "reduced-motion" : ""
|
|
269
325
|
].filter(Boolean).join(" ");
|
|
270
|
-
return /* @__PURE__ */
|
|
326
|
+
return /* @__PURE__ */ a(
|
|
271
327
|
"div",
|
|
272
328
|
{
|
|
273
329
|
ref: r,
|
|
@@ -278,7 +334,7 @@ function U({ isOpen: e, children: n }) {
|
|
|
278
334
|
}
|
|
279
335
|
);
|
|
280
336
|
}
|
|
281
|
-
const
|
|
337
|
+
const U = {
|
|
282
338
|
position: "fixed",
|
|
283
339
|
top: 0,
|
|
284
340
|
left: 0,
|
|
@@ -289,7 +345,7 @@ const B = {
|
|
|
289
345
|
overflow: "visible",
|
|
290
346
|
pointerEvents: "none",
|
|
291
347
|
zIndex: 55
|
|
292
|
-
},
|
|
348
|
+
}, V = {
|
|
293
349
|
position: "fixed",
|
|
294
350
|
top: "var(--tb-h, 60px)",
|
|
295
351
|
left: 0,
|
|
@@ -306,51 +362,51 @@ const B = {
|
|
|
306
362
|
background: "rgba(0, 0, 0, 0.04)"
|
|
307
363
|
};
|
|
308
364
|
function z({ panelComponents: e }) {
|
|
309
|
-
const { state: n, dispatch: t, getCloseLog: r } =
|
|
365
|
+
const { state: n, dispatch: t, getCloseLog: r } = O(), i = n.activePanelId ? e[n.activePanelId] : null;
|
|
310
366
|
n.activePanelId && !i && process.env.NODE_ENV !== "production" && console.error(
|
|
311
367
|
"[panels] No panel component registered for activePanelId:",
|
|
312
368
|
n.activePanelId
|
|
313
|
-
),
|
|
369
|
+
), u(() => {
|
|
314
370
|
if (n.activePanelId == null) return;
|
|
315
|
-
function
|
|
316
|
-
|
|
371
|
+
function s(h) {
|
|
372
|
+
h.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
|
|
317
373
|
}
|
|
318
|
-
return document.addEventListener("keydown",
|
|
319
|
-
document.removeEventListener("keydown",
|
|
374
|
+
return document.addEventListener("keydown", s), () => {
|
|
375
|
+
document.removeEventListener("keydown", s);
|
|
320
376
|
};
|
|
321
377
|
}, [n.activePanelId, t]);
|
|
322
|
-
const
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
}),
|
|
378
|
+
const o = d(n);
|
|
379
|
+
I(() => {
|
|
380
|
+
o.current = n;
|
|
381
|
+
}), u(() => {
|
|
326
382
|
if (process.env.NODE_ENV === "production") return;
|
|
327
|
-
const
|
|
328
|
-
return
|
|
383
|
+
const s = window;
|
|
384
|
+
return s.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), s.__panelsHostHandle = {
|
|
329
385
|
dispatch: t,
|
|
330
|
-
getState: () =>
|
|
386
|
+
getState: () => o.current,
|
|
331
387
|
getCloseLog: r
|
|
332
388
|
}, () => {
|
|
333
|
-
|
|
389
|
+
s.__panelsHostHandle?.dispatch === t && delete s.__panelsHostHandle;
|
|
334
390
|
};
|
|
335
391
|
}, [t, r]);
|
|
336
|
-
const l =
|
|
392
|
+
const l = v(() => {
|
|
337
393
|
t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
|
|
338
|
-
}, [t]),
|
|
339
|
-
return /* @__PURE__ */
|
|
340
|
-
|
|
394
|
+
}, [t]), c = n.activePanelId != null && i != null;
|
|
395
|
+
return /* @__PURE__ */ E("div", { "data-panel-host": "true", style: U, children: [
|
|
396
|
+
c && /* @__PURE__ */ a(
|
|
341
397
|
"div",
|
|
342
398
|
{
|
|
343
399
|
"data-panel-scrim": "true",
|
|
344
|
-
style:
|
|
400
|
+
style: V,
|
|
345
401
|
onClick: l
|
|
346
402
|
}
|
|
347
403
|
),
|
|
348
|
-
/* @__PURE__ */
|
|
349
|
-
|
|
404
|
+
/* @__PURE__ */ a(M, { isOpen: c, children: c && /* @__PURE__ */ a(
|
|
405
|
+
A,
|
|
350
406
|
{
|
|
351
407
|
isOpen: !0,
|
|
352
408
|
onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
353
|
-
children: /* @__PURE__ */
|
|
409
|
+
children: /* @__PURE__ */ a(i, { isOpen: !0 })
|
|
354
410
|
}
|
|
355
411
|
) })
|
|
356
412
|
] });
|
|
@@ -371,14 +427,14 @@ const Q = {
|
|
|
371
427
|
export {
|
|
372
428
|
Q as C,
|
|
373
429
|
Y as P,
|
|
374
|
-
|
|
430
|
+
O as a,
|
|
375
431
|
z as b,
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
432
|
+
A as c,
|
|
433
|
+
w as d,
|
|
434
|
+
D as e,
|
|
379
435
|
R as f,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
436
|
+
M as g,
|
|
437
|
+
L as i,
|
|
438
|
+
T as r,
|
|
439
|
+
q as u
|
|
384
440
|
};
|