@mt-gloss/ui 0.1.89 → 0.1.91
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-CoGFzpf4.js → COMMITS-DAem0P4s.js} +118 -76
- package/composites-panels.js +68 -62
- package/index.js +1 -1
- package/lib/composites/panels/PanelChrome.d.ts +5 -1
- package/lib/composites/panels/PanelMount.d.ts +7 -0
- package/lib/composites/panels/hooks/useReducedMotionPanel.d.ts +6 -0
- package/lib/composites/panels/index.d.ts +4 -0
- package/lib/composites/panels/utils/positionKey.d.ts +2 -0
- package/package.json +1 -1
- package/ui.css +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { jsx as i, jsxs as
|
|
2
|
-
import { createContext as
|
|
3
|
-
const
|
|
4
|
-
function
|
|
5
|
-
const e =
|
|
1
|
+
import { jsx as i, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as h, useContext as E, useReducer as m, useRef as d, useEffect as s, useMemo as g, useCallback as v, useSyncExternalStore as S, useState as _, useLayoutEffect as P } from "react";
|
|
3
|
+
const f = h(null);
|
|
4
|
+
function y() {
|
|
5
|
+
const e = E(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 E(f);
|
|
14
14
|
}
|
|
15
|
-
const
|
|
15
|
+
const O = {
|
|
16
16
|
activePanelId: null,
|
|
17
17
|
activeTrigger: null,
|
|
18
18
|
bellCutoutOpen: !1,
|
|
@@ -20,8 +20,8 @@ const m = {
|
|
|
20
20
|
lockHint: null,
|
|
21
21
|
lastClose: null,
|
|
22
22
|
pendingSideEffects: []
|
|
23
|
-
},
|
|
24
|
-
function
|
|
23
|
+
}, L = /* @__PURE__ */ new Set(["settings"]);
|
|
24
|
+
function T(e, n) {
|
|
25
25
|
if (e == null || e.kind !== n.kind) return !1;
|
|
26
26
|
switch (e.kind) {
|
|
27
27
|
case "bell":
|
|
@@ -34,7 +34,7 @@ function O(e, n) {
|
|
|
34
34
|
return e.global === n.global && e.align === n.align;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
|
-
function
|
|
37
|
+
function D(e, n) {
|
|
38
38
|
switch (n.type) {
|
|
39
39
|
case "OPEN_PANEL": {
|
|
40
40
|
if (e.activePanelId && e.isDirty)
|
|
@@ -52,7 +52,7 @@ function L(e, n) {
|
|
|
52
52
|
}
|
|
53
53
|
]
|
|
54
54
|
};
|
|
55
|
-
if (e.activePanelId === n.panelId &&
|
|
55
|
+
if (e.activePanelId === n.panelId && T(e.activeTrigger, n.trigger))
|
|
56
56
|
return e;
|
|
57
57
|
const t = e.activePanelId != null ? [
|
|
58
58
|
{
|
|
@@ -60,13 +60,13 @@ function L(e, n) {
|
|
|
60
60
|
reason: "mutex-handoff",
|
|
61
61
|
previousPanelId: e.activePanelId
|
|
62
62
|
}
|
|
63
|
-
] : [],
|
|
63
|
+
] : [], r = n.panelId === "notification-center" && e.bellCutoutOpen;
|
|
64
64
|
return {
|
|
65
65
|
...e,
|
|
66
66
|
activePanelId: n.panelId,
|
|
67
67
|
activeTrigger: n.trigger,
|
|
68
68
|
isDirty: !1,
|
|
69
|
-
bellCutoutOpen:
|
|
69
|
+
bellCutoutOpen: r ? !1 : e.bellCutoutOpen,
|
|
70
70
|
lastClose: null,
|
|
71
71
|
// reset on fresh open
|
|
72
72
|
pendingSideEffects: [...e.pendingSideEffects, ...t]
|
|
@@ -75,7 +75,7 @@ function L(e, n) {
|
|
|
75
75
|
case "CLOSE_PANEL": {
|
|
76
76
|
if (e.activePanelId == null)
|
|
77
77
|
return e;
|
|
78
|
-
const t = e.activePanelId,
|
|
78
|
+
const t = e.activePanelId, r = e.isDirty ? n.reason === "apply-button" ? [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [];
|
|
79
79
|
return {
|
|
80
80
|
...e,
|
|
81
81
|
activePanelId: null,
|
|
@@ -84,7 +84,7 @@ function L(e, n) {
|
|
|
84
84
|
lockHint: null,
|
|
85
85
|
// closing clears any active lockHint (dirty-buffer condition gone)
|
|
86
86
|
lastClose: { panelId: t, reason: n.reason },
|
|
87
|
-
pendingSideEffects: [...e.pendingSideEffects, ...
|
|
87
|
+
pendingSideEffects: [...e.pendingSideEffects, ...r]
|
|
88
88
|
};
|
|
89
89
|
}
|
|
90
90
|
case "OPEN_BELL_CUTOUT":
|
|
@@ -101,7 +101,7 @@ function L(e, n) {
|
|
|
101
101
|
case "CLOSE_BELL_CUTOUT":
|
|
102
102
|
return e.bellCutoutOpen ? { ...e, bellCutoutOpen: !1 } : e;
|
|
103
103
|
case "BUFFER_BECOMES_DIRTY":
|
|
104
|
-
return e.activePanelId == null || !
|
|
104
|
+
return e.activePanelId == null || !L.has(e.activePanelId) ? {
|
|
105
105
|
...e,
|
|
106
106
|
pendingSideEffects: [
|
|
107
107
|
...e.pendingSideEffects,
|
|
@@ -134,32 +134,32 @@ function L(e, n) {
|
|
|
134
134
|
return e;
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
|
-
function
|
|
137
|
+
function N(e) {
|
|
138
138
|
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
139
|
}
|
|
140
|
-
function
|
|
141
|
-
const [e, n] =
|
|
140
|
+
function w() {
|
|
141
|
+
const [e, n] = m(D, O), t = d([]), r = d(null);
|
|
142
142
|
s(() => () => {
|
|
143
|
-
|
|
143
|
+
r.current != null && (window.clearTimeout(r.current), r.current = null);
|
|
144
144
|
}, []), s(() => {
|
|
145
145
|
if (e.pendingSideEffects.length !== 0) {
|
|
146
|
-
for (const
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
}, Math.max(0,
|
|
146
|
+
for (const l of e.pendingSideEffects)
|
|
147
|
+
l.type === "SCHEDULE_TIMER" ? (r.current != null && window.clearTimeout(r.current), r.current = window.setTimeout(() => {
|
|
148
|
+
r.current = null, n(l.action);
|
|
149
|
+
}, Math.max(0, l.ms))) : l.type === "SET_LOCK_HINT" ? n({ type: "SET_LOCK_HINT", hint: l.hint }) : l.type === "HANDOFF_CLOSE" ? t.current = [
|
|
150
150
|
...t.current.slice(-99),
|
|
151
151
|
{
|
|
152
|
-
panelId:
|
|
152
|
+
panelId: l.previousPanelId,
|
|
153
153
|
reason: "mutex-handoff",
|
|
154
154
|
at: Date.now(),
|
|
155
155
|
note: "F22: mutex-handoff synthetic close-log entry"
|
|
156
156
|
}
|
|
157
|
-
] :
|
|
157
|
+
] : l.type === "INVALID_DISPATCH" && process.env.NODE_ENV !== "production" && console.warn("[panels] INVALID_DISPATCH:", l.reason);
|
|
158
158
|
n({ type: "DRAIN_SIDE_EFFECTS" });
|
|
159
159
|
}
|
|
160
160
|
}, [e.pendingSideEffects, n]), s(() => {
|
|
161
161
|
if (!e.lastClose) return;
|
|
162
|
-
const
|
|
162
|
+
const l = {
|
|
163
163
|
panelId: e.lastClose.panelId,
|
|
164
164
|
reason: e.lastClose.reason,
|
|
165
165
|
at: Date.now(),
|
|
@@ -167,43 +167,37 @@ function D() {
|
|
|
167
167
|
};
|
|
168
168
|
t.current = [
|
|
169
169
|
...t.current.slice(-99),
|
|
170
|
-
|
|
170
|
+
l
|
|
171
171
|
];
|
|
172
172
|
}, [e.lastClose]);
|
|
173
|
-
const o =
|
|
174
|
-
() =>
|
|
175
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
173
|
+
const o = g(
|
|
174
|
+
() => N(e),
|
|
176
175
|
[e.activePanelId, e.bellCutoutOpen, e.isDirty]
|
|
177
|
-
), a =
|
|
176
|
+
), a = v(() => t.current.slice(), []);
|
|
178
177
|
return { state: e, surfaceState: o, dispatch: n, getCloseLog: a };
|
|
179
178
|
}
|
|
180
|
-
function
|
|
181
|
-
const n =
|
|
179
|
+
function j({ children: e }) {
|
|
180
|
+
const n = w(), t = g(
|
|
182
181
|
() => n,
|
|
183
182
|
// Re-publish only when one of the four coordinator fields changes identity.
|
|
184
183
|
// dispatch + getCloseLog are stable. state + surfaceState change on dispatch.
|
|
185
184
|
[n.state, n.surfaceState, n.dispatch, n.getCloseLog]
|
|
186
185
|
);
|
|
187
|
-
return /* @__PURE__ */ i(
|
|
186
|
+
return /* @__PURE__ */ i(f.Provider, { value: t, children: e });
|
|
188
187
|
}
|
|
189
|
-
const
|
|
188
|
+
const x = {
|
|
190
189
|
position: "relative",
|
|
191
190
|
pointerEvents: "auto"
|
|
192
191
|
};
|
|
193
|
-
function
|
|
194
|
-
|
|
195
|
-
return C(() => {
|
|
196
|
-
const r = requestAnimationFrame(() => a(t));
|
|
197
|
-
return () => cancelAnimationFrame(r);
|
|
198
|
-
}, [t]), /* @__PURE__ */ f(
|
|
192
|
+
function H({ children: e, onClose: n, footer: t }) {
|
|
193
|
+
return /* @__PURE__ */ p(
|
|
199
194
|
"div",
|
|
200
195
|
{
|
|
201
196
|
"data-chrome": "panel",
|
|
202
|
-
"data-open": o ? "true" : "false",
|
|
203
197
|
role: "dialog",
|
|
204
198
|
"aria-modal": "true",
|
|
205
199
|
className: "gloss-panel-chrome",
|
|
206
|
-
style:
|
|
200
|
+
style: x,
|
|
207
201
|
children: [
|
|
208
202
|
/* @__PURE__ */ i("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ i(
|
|
209
203
|
"button",
|
|
@@ -217,23 +211,69 @@ function x({ children: e, onClose: n, isOpen: t = !0, footer: l }) {
|
|
|
217
211
|
}
|
|
218
212
|
) }),
|
|
219
213
|
/* @__PURE__ */ i("div", { className: "gloss-panel-chrome__body", children: e }),
|
|
220
|
-
|
|
214
|
+
t != null && /* @__PURE__ */ i("div", { className: "gloss-panel-chrome__footer", children: t })
|
|
221
215
|
]
|
|
222
216
|
}
|
|
223
217
|
);
|
|
224
218
|
}
|
|
225
|
-
const
|
|
219
|
+
const b = "(prefers-reduced-motion: reduce)";
|
|
220
|
+
function C() {
|
|
221
|
+
return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(b);
|
|
222
|
+
}
|
|
223
|
+
function A(e) {
|
|
224
|
+
const n = C();
|
|
225
|
+
return n ? (n.addEventListener("change", e), () => {
|
|
226
|
+
n.removeEventListener("change", e);
|
|
227
|
+
}) : () => {
|
|
228
|
+
};
|
|
229
|
+
}
|
|
230
|
+
function F() {
|
|
231
|
+
const e = C();
|
|
232
|
+
return e ? e.matches : !1;
|
|
233
|
+
}
|
|
234
|
+
function R() {
|
|
235
|
+
return !1;
|
|
236
|
+
}
|
|
237
|
+
function k() {
|
|
238
|
+
return S(A, F, R);
|
|
239
|
+
}
|
|
240
|
+
function M({ isOpen: e, children: n }) {
|
|
241
|
+
const t = k(), [r, o] = _(!1);
|
|
242
|
+
s(() => {
|
|
243
|
+
if (!e) {
|
|
244
|
+
o(!1);
|
|
245
|
+
return;
|
|
246
|
+
}
|
|
247
|
+
const l = requestAnimationFrame(() => o(!0));
|
|
248
|
+
return () => cancelAnimationFrame(l);
|
|
249
|
+
}, [e]);
|
|
250
|
+
const a = [
|
|
251
|
+
"gloss-panel-mount",
|
|
252
|
+
r ? "has-panel" : "",
|
|
253
|
+
t ? "reduced-motion" : ""
|
|
254
|
+
].filter(Boolean).join(" ");
|
|
255
|
+
return /* @__PURE__ */ i(
|
|
256
|
+
"div",
|
|
257
|
+
{
|
|
258
|
+
className: a,
|
|
259
|
+
"data-mount": "panel",
|
|
260
|
+
"data-open": e ? "true" : "false",
|
|
261
|
+
children: n
|
|
262
|
+
}
|
|
263
|
+
);
|
|
264
|
+
}
|
|
265
|
+
const U = {
|
|
226
266
|
position: "fixed",
|
|
227
267
|
top: 0,
|
|
228
268
|
left: 0,
|
|
229
269
|
right: 0,
|
|
230
270
|
height: "var(--tb-h, 60px)",
|
|
231
|
-
perspective: "
|
|
271
|
+
perspective: "var(--panel-perspective, 1500px)",
|
|
232
272
|
perspectiveOrigin: "center bottom",
|
|
233
273
|
overflow: "visible",
|
|
234
274
|
pointerEvents: "none",
|
|
235
275
|
zIndex: 55
|
|
236
|
-
},
|
|
276
|
+
}, B = {
|
|
237
277
|
position: "fixed",
|
|
238
278
|
top: "var(--tb-h, 60px)",
|
|
239
279
|
left: 0,
|
|
@@ -249,8 +289,8 @@ const H = {
|
|
|
249
289
|
pointerEvents: "none",
|
|
250
290
|
background: "rgba(0, 0, 0, 0.04)"
|
|
251
291
|
};
|
|
252
|
-
function
|
|
253
|
-
const { state: n, dispatch: t, getCloseLog:
|
|
292
|
+
function z({ panelComponents: e }) {
|
|
293
|
+
const { state: n, dispatch: t, getCloseLog: r } = y(), o = n.activePanelId ? e[n.activePanelId] : null;
|
|
254
294
|
n.activePanelId && !o && process.env.NODE_ENV !== "production" && console.error(
|
|
255
295
|
"[panels] No panel component registered for activePanelId:",
|
|
256
296
|
n.activePanelId
|
|
@@ -263,8 +303,8 @@ function R({ panelComponents: e }) {
|
|
|
263
303
|
document.removeEventListener("keydown", c);
|
|
264
304
|
};
|
|
265
305
|
}, [n.activePanelId, t]);
|
|
266
|
-
const a =
|
|
267
|
-
|
|
306
|
+
const a = d(n);
|
|
307
|
+
P(() => {
|
|
268
308
|
a.current = n;
|
|
269
309
|
}), s(() => {
|
|
270
310
|
if (process.env.NODE_ENV === "production") return;
|
|
@@ -272,34 +312,34 @@ function R({ panelComponents: e }) {
|
|
|
272
312
|
return c.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), c.__panelsHostHandle = {
|
|
273
313
|
dispatch: t,
|
|
274
314
|
getState: () => a.current,
|
|
275
|
-
getCloseLog:
|
|
315
|
+
getCloseLog: r
|
|
276
316
|
}, () => {
|
|
277
317
|
c.__panelsHostHandle?.dispatch === t && delete c.__panelsHostHandle;
|
|
278
318
|
};
|
|
279
|
-
}, [t,
|
|
280
|
-
const
|
|
319
|
+
}, [t, r]);
|
|
320
|
+
const l = v(() => {
|
|
281
321
|
t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
|
|
282
|
-
}, [t]);
|
|
283
|
-
return /* @__PURE__ */
|
|
284
|
-
/* @__PURE__ */ i(
|
|
322
|
+
}, [t]), u = n.activePanelId != null && o != null;
|
|
323
|
+
return /* @__PURE__ */ p("div", { "data-panel-host": "true", style: U, children: [
|
|
324
|
+
u && /* @__PURE__ */ i(
|
|
285
325
|
"div",
|
|
286
326
|
{
|
|
287
327
|
"data-panel-scrim": "true",
|
|
288
|
-
style:
|
|
289
|
-
onClick:
|
|
328
|
+
style: B,
|
|
329
|
+
onClick: l
|
|
290
330
|
}
|
|
291
331
|
),
|
|
292
|
-
/* @__PURE__ */ i(
|
|
293
|
-
|
|
332
|
+
/* @__PURE__ */ i(M, { isOpen: u, children: u && /* @__PURE__ */ i(
|
|
333
|
+
H,
|
|
294
334
|
{
|
|
295
335
|
isOpen: !0,
|
|
296
336
|
onClose: () => t({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
297
337
|
children: /* @__PURE__ */ i(o, { isOpen: !0 })
|
|
298
338
|
}
|
|
299
|
-
)
|
|
300
|
-
] })
|
|
339
|
+
) })
|
|
340
|
+
] });
|
|
301
341
|
}
|
|
302
|
-
const
|
|
342
|
+
const Q = {
|
|
303
343
|
"apply-button": !0,
|
|
304
344
|
// the ONLY commit reason
|
|
305
345
|
"cancel-button": !1,
|
|
@@ -313,14 +353,16 @@ const U = {
|
|
|
313
353
|
"nav-escape-hatch": !1
|
|
314
354
|
};
|
|
315
355
|
export {
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
356
|
+
Q as C,
|
|
357
|
+
j as P,
|
|
358
|
+
q as a,
|
|
359
|
+
z as b,
|
|
360
|
+
H as c,
|
|
361
|
+
w as d,
|
|
362
|
+
N as e,
|
|
363
|
+
M as f,
|
|
364
|
+
k as g,
|
|
365
|
+
O as i,
|
|
366
|
+
D as r,
|
|
367
|
+
y as u
|
|
326
368
|
};
|
package/composites-panels.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { a as
|
|
2
|
-
import { C as
|
|
3
|
-
import { jsxs as c, jsx as
|
|
4
|
-
import { useEffect as
|
|
5
|
-
function
|
|
6
|
-
const
|
|
7
|
-
return /* @__PURE__ */ c("div", { "data-shell": "settings", "aria-hidden": !
|
|
8
|
-
/* @__PURE__ */
|
|
9
|
-
/* @__PURE__ */
|
|
1
|
+
import { a as r, u, f as p, c as f } from "./COMMITS-DAem0P4s.js";
|
|
2
|
+
import { C as H, b as N, P as O, e as w, i as A, r as z, d as M, g as D } from "./COMMITS-DAem0P4s.js";
|
|
3
|
+
import { jsxs as c, jsx as a, Fragment as m } from "react/jsx-runtime";
|
|
4
|
+
import { useEffect as i, useRef as P, useLayoutEffect as h, useCallback as v } from "react";
|
|
5
|
+
function _({ isOpen: e }) {
|
|
6
|
+
const t = r()?.state.activeTrigger, o = t?.kind === "card-overflow" ? t.cardId : null;
|
|
7
|
+
return /* @__PURE__ */ c("div", { "data-shell": "settings", "aria-hidden": !e, children: [
|
|
8
|
+
/* @__PURE__ */ a("p", { style: { margin: 0, fontSize: 14, color: "#495057" }, children: o ? `Settings for card: ${o}` : "Settings" }),
|
|
9
|
+
/* @__PURE__ */ a("p", { style: { margin: "8px 0 0", fontSize: 12, color: "#adb5bd" }, children: "Configuration options coming soon." })
|
|
10
10
|
] });
|
|
11
11
|
}
|
|
12
|
-
const
|
|
12
|
+
const y = {
|
|
13
13
|
position: "fixed",
|
|
14
14
|
inset: 0,
|
|
15
15
|
pointerEvents: "none",
|
|
16
16
|
zIndex: 55
|
|
17
|
-
},
|
|
17
|
+
}, g = {
|
|
18
18
|
position: "absolute",
|
|
19
19
|
inset: 0,
|
|
20
20
|
zIndex: 1,
|
|
@@ -23,54 +23,54 @@ const g = {
|
|
|
23
23
|
pointerEvents: "none",
|
|
24
24
|
background: "rgba(0, 0, 0, 0.04)"
|
|
25
25
|
};
|
|
26
|
-
function
|
|
27
|
-
const { state:
|
|
28
|
-
|
|
29
|
-
if (
|
|
30
|
-
function
|
|
31
|
-
d.key === "Escape" &&
|
|
26
|
+
function b() {
|
|
27
|
+
const { state: e, dispatch: n, getCloseLog: t } = u();
|
|
28
|
+
i(() => {
|
|
29
|
+
if (e.activePanelId == null) return;
|
|
30
|
+
function l(d) {
|
|
31
|
+
d.key === "Escape" && n({ type: "CLOSE_PANEL", reason: "escape-key" });
|
|
32
32
|
}
|
|
33
|
-
return document.addEventListener("keydown",
|
|
34
|
-
}, [
|
|
35
|
-
const o =
|
|
33
|
+
return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
|
|
34
|
+
}, [e.activePanelId, n]);
|
|
35
|
+
const o = P(e);
|
|
36
36
|
h(() => {
|
|
37
|
-
o.current =
|
|
38
|
-
}),
|
|
37
|
+
o.current = e;
|
|
38
|
+
}), i(() => {
|
|
39
39
|
if (process.env.NODE_ENV === "production") return;
|
|
40
|
-
const
|
|
41
|
-
return
|
|
42
|
-
dispatch:
|
|
40
|
+
const l = window;
|
|
41
|
+
return l.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), l.__panelsHostHandle = {
|
|
42
|
+
dispatch: n,
|
|
43
43
|
getState: () => o.current,
|
|
44
|
-
getCloseLog:
|
|
44
|
+
getCloseLog: t
|
|
45
45
|
}, () => {
|
|
46
|
-
|
|
46
|
+
l.__panelsHostHandle?.dispatch === n && delete window.__panelsHostHandle;
|
|
47
47
|
};
|
|
48
|
-
}, [
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
}, [
|
|
52
|
-
return /* @__PURE__ */
|
|
48
|
+
}, [n, t]);
|
|
49
|
+
const s = v(() => {
|
|
50
|
+
n({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
|
|
51
|
+
}, [n]);
|
|
52
|
+
return /* @__PURE__ */ a("div", { "data-panel-host": "true", style: y, children: e.activePanelId != null && /* @__PURE__ */ a(
|
|
53
53
|
"div",
|
|
54
54
|
{
|
|
55
55
|
"data-panel-scrim": "true",
|
|
56
|
-
style:
|
|
57
|
-
onClick:
|
|
56
|
+
style: g,
|
|
57
|
+
onClick: s
|
|
58
58
|
}
|
|
59
59
|
) });
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
const
|
|
63
|
-
if (
|
|
64
|
-
const { state:
|
|
65
|
-
if (
|
|
66
|
-
const
|
|
67
|
-
if (
|
|
61
|
+
function x({ panelComponents: e }) {
|
|
62
|
+
const n = r();
|
|
63
|
+
if (n == null) return null;
|
|
64
|
+
const { state: t, dispatch: o } = n;
|
|
65
|
+
if (t.activePanelId == null) return null;
|
|
66
|
+
const s = e[t.activePanelId];
|
|
67
|
+
if (s == null)
|
|
68
68
|
return process.env.NODE_ENV !== "production" && console.error(
|
|
69
69
|
"[panels] No panel component registered for activePanelId:",
|
|
70
|
-
|
|
70
|
+
t.activePanelId
|
|
71
71
|
), null;
|
|
72
|
-
const
|
|
73
|
-
/* @__PURE__ */
|
|
72
|
+
const l = t.activePanelId === "settings" ? /* @__PURE__ */ c(m, { children: [
|
|
73
|
+
/* @__PURE__ */ a(
|
|
74
74
|
"button",
|
|
75
75
|
{
|
|
76
76
|
id: "settings-cancel",
|
|
@@ -80,7 +80,7 @@ function b({ panelComponents: t }) {
|
|
|
80
80
|
children: "Cancel"
|
|
81
81
|
}
|
|
82
82
|
),
|
|
83
|
-
/* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ a(
|
|
84
84
|
"button",
|
|
85
85
|
{
|
|
86
86
|
id: "settings-apply",
|
|
@@ -91,28 +91,34 @@ function b({ panelComponents: t }) {
|
|
|
91
91
|
}
|
|
92
92
|
)
|
|
93
93
|
] }) : null;
|
|
94
|
-
return /* @__PURE__ */
|
|
95
|
-
|
|
94
|
+
return /* @__PURE__ */ a(p, { isOpen: !0, children: /* @__PURE__ */ a(
|
|
95
|
+
f,
|
|
96
96
|
{
|
|
97
97
|
isOpen: !0,
|
|
98
98
|
onClose: () => o({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
99
|
-
footer:
|
|
100
|
-
children: /* @__PURE__ */ s
|
|
99
|
+
footer: l,
|
|
100
|
+
children: /* @__PURE__ */ a(s, { isOpen: !0 })
|
|
101
101
|
}
|
|
102
|
-
);
|
|
102
|
+
) });
|
|
103
|
+
}
|
|
104
|
+
function k(e) {
|
|
105
|
+
return e === null ? null : e.kind === "manage-pages-action" ? `global-${e.align ?? "left"}` : e.kind === "card-overflow" || e.kind === "empty-cell" ? `section-${e.sectionIndex}` : null;
|
|
103
106
|
}
|
|
104
107
|
export {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
108
|
+
H as COMMITS,
|
|
109
|
+
f as PanelChrome,
|
|
110
|
+
N as PanelHost,
|
|
111
|
+
b as PanelHostShell,
|
|
112
|
+
p as PanelMount,
|
|
113
|
+
O as PanelProvider,
|
|
114
|
+
x as PanelSlot,
|
|
115
|
+
_ as SettingsShell,
|
|
116
|
+
w as deriveSurfaceState,
|
|
117
|
+
A as initialState,
|
|
118
|
+
k as positionKey,
|
|
119
|
+
z as reducer,
|
|
115
120
|
u as usePanelContext,
|
|
116
|
-
|
|
117
|
-
|
|
121
|
+
r as usePanelContextOptional,
|
|
122
|
+
M as usePanelCoordinator,
|
|
123
|
+
D as useReducedMotionPanel
|
|
118
124
|
};
|
package/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import F, { useRef as P, useEffect as A, useState as E, useCallback as C, useId
|
|
|
6
6
|
import { motion as G, useMotionValue as tt, AnimatePresence as at, useDragControls as nt } from "framer-motion";
|
|
7
7
|
import { B as rt, a as X, b as ce, U as fe } from "./UIContext-DP6JGCto.js";
|
|
8
8
|
import { c as Wo, u as Vo } from "./UIContext-DP6JGCto.js";
|
|
9
|
-
import { C as Uo, c as Yo, b as Zo, P as qo, e as Qo, i as Xo, r as Jo, u as el, a as tl, d as al } from "./COMMITS-
|
|
9
|
+
import { C as Uo, c as Yo, b as Zo, P as qo, e as Qo, i as Xo, r as Jo, u as el, a as tl, d as al } from "./COMMITS-DAem0P4s.js";
|
|
10
10
|
import { createPortal as st } from "react-dom";
|
|
11
11
|
import { DEFAULT_MARKET_PRESETS as rl, DEFAULT_PINNED as sl, PERIOD_OPTIONS as il, ROLLING_OPTIONS as ol, TODAY_PRESET as ll, findPreset as cl, formatDateRange as dl, formatMarketDates as ul, formatTrend as ml, formatValue as gl, generateMarketId as pl, getAllPresets as hl, getDateRangeForPreset as fl, getPresetLabel as bl, isInRange as vl, isMarketActive as yl, isSameDay as wl, normalizePresetId as _l, toUppercasePresetId as Cl } from "@mt-gloss/utils";
|
|
12
12
|
import it from "@mui/icons-material/AccessTime";
|
|
@@ -2,8 +2,12 @@ import { ReactNode } from 'react';
|
|
|
2
2
|
export interface PanelChromeProps {
|
|
3
3
|
children: ReactNode;
|
|
4
4
|
onClose: () => void;
|
|
5
|
+
/**
|
|
6
|
+
* @deprecated No-op since Phase 11.5 P3a. PanelMount owns all enter/exit motion.
|
|
7
|
+
* Kept for back-compat with P1/P2 call sites; has no rendering effect.
|
|
8
|
+
*/
|
|
5
9
|
isOpen?: boolean;
|
|
6
10
|
/** P2 — optional footer slot. Notification-center keeps null (no footer). */
|
|
7
11
|
footer?: ReactNode;
|
|
8
12
|
}
|
|
9
|
-
export declare function PanelChrome({ children, onClose,
|
|
13
|
+
export declare function PanelChrome({ children, onClose, footer }: PanelChromeProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface PanelMountProps {
|
|
3
|
+
/** Whether the panel is open. Maps to .has-panel class toggle. */
|
|
4
|
+
isOpen: boolean;
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
}
|
|
7
|
+
export declare function PanelMount({ isOpen, children }: PanelMountProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Returns `true` when the user's system preference is `prefers-reduced-motion: reduce`.
|
|
3
|
+
* SSR-safe (returns false during server render).
|
|
4
|
+
* Reactive — re-renders the host component when the system pref changes.
|
|
5
|
+
*/
|
|
6
|
+
export declare function useReducedMotionPanel(): boolean;
|
|
@@ -17,6 +17,10 @@ export type { PanelHostProps, PanelShellProps } from './PanelHost';
|
|
|
17
17
|
export type { PanelSlotProps } from './PanelSlot';
|
|
18
18
|
export type { PanelProviderProps } from './PanelProvider';
|
|
19
19
|
export type { PanelChromeProps } from './PanelChrome';
|
|
20
|
+
export { positionKey } from './utils/positionKey';
|
|
21
|
+
export { useReducedMotionPanel } from './hooks/useReducedMotionPanel';
|
|
22
|
+
export { PanelMount } from './PanelMount';
|
|
23
|
+
export type { PanelMountProps } from './PanelMount';
|
|
20
24
|
export { usePanelCoordinator } from './hooks/usePanelCoordinator';
|
|
21
25
|
export type { UsePanelCoordinatorReturn } from './hooks/usePanelCoordinator';
|
|
22
26
|
export { reducer, initialState } from './coordinator/coordinator';
|