@mt-gloss/ui 0.1.104 → 0.1.106
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-BEa-B4Oc.js → COMMITS-kaUvc5jL.js} +176 -114
- package/composites-panels.js +467 -366
- package/index.js +886 -946
- package/lib/composites/panels/PanelSlot.d.ts +14 -3
- package/lib/composites/panels/hooks/useEditingCardId.d.ts +16 -0
- package/lib/composites/panels/index.d.ts +1 -0
- package/lib/composites/panels/shells/SettingsShell.d.ts +6 -1
- package/lib/composites/panels/shells/settings/ColorControls.d.ts +9 -0
- package/lib/composites/panels/shells/settings/SlotsControls.d.ts +2 -0
- package/lib/composites/panels/shells/settings/ThresholdControls.d.ts +6 -0
- package/lib/composites/panels/shells/settings/TimeframeControls.d.ts +6 -0
- package/lib/composites/panels/shells/settings/index.d.ts +12 -0
- package/package.json +1 -1
- package/ui.css +1 -1
package/composites-panels.js
CHANGED
|
@@ -1,79 +1,161 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { C as
|
|
3
|
-
import { jsx as s, jsxs as
|
|
4
|
-
import { useState as
|
|
5
|
-
function
|
|
1
|
+
import { u as I, f as q, S as se, a as oe, g as E, c as A } from "./COMMITS-kaUvc5jL.js";
|
|
2
|
+
import { C as Je, b as Ze, P as et, e as tt, i as nt, r as st, d as ot } from "./COMMITS-kaUvc5jL.js";
|
|
3
|
+
import { jsx as s, jsxs as p, Fragment as ae } from "react/jsx-runtime";
|
|
4
|
+
import z, { useState as b, useRef as U, createContext as Y, useContext as K, useEffect as V, useLayoutEffect as re, useCallback as W } from "react";
|
|
5
|
+
function Be() {
|
|
6
|
+
const e = I();
|
|
7
|
+
if (e?.state.activePanelId !== "settings") return null;
|
|
8
|
+
const t = e.state.activeTrigger;
|
|
9
|
+
return t?.kind === "card-overflow" ? t.cardId : null;
|
|
10
|
+
}
|
|
11
|
+
function le({ children: e }) {
|
|
6
12
|
return /* @__PURE__ */ s("div", { className: "clone-stage", children: e });
|
|
7
13
|
}
|
|
8
|
-
function
|
|
14
|
+
function ie({ span: e, rotating: t = !0, children: o }) {
|
|
9
15
|
const n = ["clone-card", `span-${e}`, t ? "rotating" : ""].filter(Boolean).join(" ");
|
|
10
16
|
return /* @__PURE__ */ s("div", { className: n, children: o });
|
|
11
17
|
}
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
function ce({ value: e, onChange: t }) {
|
|
19
|
+
return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--threshold", children: [
|
|
20
|
+
/* @__PURE__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Alert level (%)" }),
|
|
21
|
+
/* @__PURE__ */ p("div", { className: "settings-shell__slider-row", children: [
|
|
22
|
+
/* @__PURE__ */ s(
|
|
23
|
+
"input",
|
|
24
|
+
{
|
|
25
|
+
id: "settings-threshold-input",
|
|
26
|
+
type: "range",
|
|
27
|
+
min: 0,
|
|
28
|
+
max: 100,
|
|
29
|
+
value: e,
|
|
30
|
+
onChange: t,
|
|
31
|
+
"aria-label": "Threshold",
|
|
32
|
+
"aria-valuenow": e,
|
|
33
|
+
"aria-valuemin": 0,
|
|
34
|
+
"aria-valuemax": 100,
|
|
35
|
+
className: "settings-shell__slider"
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
/* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
|
|
39
|
+
e,
|
|
40
|
+
"%"
|
|
41
|
+
] })
|
|
42
|
+
] })
|
|
43
|
+
] });
|
|
44
|
+
}
|
|
45
|
+
function de({ value: e, onChange: t }) {
|
|
46
|
+
return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--timeframe", children: [
|
|
47
|
+
/* @__PURE__ */ s("span", { className: "settings-shell__label", "aria-hidden": "true", children: "Rolling period (days)" }),
|
|
48
|
+
/* @__PURE__ */ p("div", { className: "settings-shell__slider-row", children: [
|
|
49
|
+
/* @__PURE__ */ s(
|
|
50
|
+
"input",
|
|
51
|
+
{
|
|
52
|
+
id: "settings-timeframe-input",
|
|
53
|
+
type: "range",
|
|
54
|
+
min: 7,
|
|
55
|
+
max: 90,
|
|
56
|
+
value: e,
|
|
57
|
+
onChange: t,
|
|
58
|
+
"aria-label": "Timeframe",
|
|
59
|
+
"aria-valuenow": e,
|
|
60
|
+
"aria-valuemin": 7,
|
|
61
|
+
"aria-valuemax": 90,
|
|
62
|
+
className: "settings-shell__slider"
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
/* @__PURE__ */ p("span", { className: "settings-shell__slider-value", "aria-live": "polite", children: [
|
|
66
|
+
e,
|
|
67
|
+
" days"
|
|
68
|
+
] })
|
|
69
|
+
] })
|
|
70
|
+
] });
|
|
71
|
+
}
|
|
72
|
+
const ue = ["Orders", "Quota", "Unassigned"];
|
|
73
|
+
function pe() {
|
|
74
|
+
return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--slots", "aria-label": "Stack slots (display only)", children: [
|
|
75
|
+
/* @__PURE__ */ s("p", { className: "settings-shell__help", children: "Slots are currently fixed. Drag-to-reorder is coming in a later phase." }),
|
|
76
|
+
/* @__PURE__ */ s("ul", { className: "settings-shell__slots-list", children: ue.map((e) => /* @__PURE__ */ s("li", { className: "settings-shell__slot-pill", children: e }, e)) })
|
|
77
|
+
] });
|
|
78
|
+
}
|
|
79
|
+
const me = ["#1d6fd8", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6"];
|
|
80
|
+
function he({ value: e, onSelect: t }) {
|
|
81
|
+
return /* @__PURE__ */ p("div", { className: "settings-shell__field settings-shell__field--color", role: "group", "aria-label": "Accent color", children: [
|
|
82
|
+
/* @__PURE__ */ s("span", { className: "settings-shell__label", children: "Accent color" }),
|
|
83
|
+
/* @__PURE__ */ s("div", { className: "settings-shell__swatch-row", children: me.map((o) => {
|
|
84
|
+
const n = e === o;
|
|
85
|
+
return /* @__PURE__ */ s(
|
|
86
|
+
"button",
|
|
87
|
+
{
|
|
88
|
+
type: "button",
|
|
89
|
+
"aria-pressed": n,
|
|
90
|
+
"aria-label": `Accent ${o}`,
|
|
91
|
+
className: `settings-shell__swatch${n ? " settings-shell__swatch--active" : ""}`,
|
|
92
|
+
style: { backgroundColor: o },
|
|
93
|
+
onClick: () => t(o)
|
|
94
|
+
},
|
|
95
|
+
o
|
|
96
|
+
);
|
|
97
|
+
}) })
|
|
98
|
+
] });
|
|
99
|
+
}
|
|
100
|
+
const fe = ["threshold", "timeframe", "color"];
|
|
101
|
+
function He({
|
|
14
102
|
isOpen: e,
|
|
15
103
|
cardSpan: t,
|
|
16
104
|
cardLabel: o = "Metric",
|
|
17
|
-
cardValue: n = "—"
|
|
105
|
+
cardValue: n = "—",
|
|
106
|
+
dimensions: r = fe,
|
|
107
|
+
initialTab: l
|
|
18
108
|
}) {
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
109
|
+
const d = I(), i = d?.state.activeTrigger, a = i?.kind === "card-overflow" ? i.cardId : null, c = q(), u = i?.span, h = t ?? u ?? 1, g = r[0] ?? "threshold", [f, y] = z.useState(l ?? g);
|
|
110
|
+
z.useEffect(() => {
|
|
111
|
+
r.includes(f) || y(g);
|
|
112
|
+
}, [r, f, g]);
|
|
113
|
+
const v = a != null ? d?.state?.bufferByCard?.[a]?.changes ?? {} : {}, N = typeof v.threshold == "number" ? v.threshold : 80, S = typeof v.timeframe == "number" ? v.timeframe : 30, w = typeof v.accent == "string" ? v.accent : null, C = (_) => {
|
|
114
|
+
a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "threshold", value: Number(_.target.value) });
|
|
115
|
+
}, te = (_) => {
|
|
116
|
+
a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "timeframe", value: Number(_.target.value) });
|
|
117
|
+
}, ne = (_) => {
|
|
118
|
+
a == null || d == null || d.dispatch({ type: "SET_BUFFER_VALUE", cardId: a, key: "accent", value: _ });
|
|
23
119
|
};
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */ s(
|
|
120
|
+
return /* @__PURE__ */ p("div", { className: "settings-shell", "data-shell": "settings", "aria-hidden": !e, children: [
|
|
121
|
+
/* @__PURE__ */ s("div", { "aria-hidden": "true", children: /* @__PURE__ */ s(le, { children: /* @__PURE__ */ p(ie, { span: h, rotating: !c, children: [
|
|
26
122
|
/* @__PURE__ */ s("div", { style: { fontSize: 9, textTransform: "uppercase", letterSpacing: "0.06em", color: "#9ca3af", marginBottom: 6 }, children: o }),
|
|
27
123
|
/* @__PURE__ */ s("div", { style: { fontSize: 22, fontWeight: 700, color: "#111827", lineHeight: 1 }, children: n })
|
|
28
|
-
] }) }),
|
|
29
|
-
/* @__PURE__ */
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
type: "button",
|
|
55
|
-
role: "radio",
|
|
56
|
-
"aria-pressed": f === g,
|
|
57
|
-
"aria-checked": f === g,
|
|
58
|
-
"aria-label": `Accent ${g}`,
|
|
59
|
-
className: "settings-shell__swatch",
|
|
60
|
-
style: { backgroundColor: g },
|
|
61
|
-
onClick: () => b(g),
|
|
62
|
-
"data-testid": `settings-swatch-${g}`
|
|
63
|
-
},
|
|
64
|
-
g
|
|
65
|
-
)) })
|
|
66
|
-
] })
|
|
67
|
-
] })
|
|
124
|
+
] }) }) }),
|
|
125
|
+
/* @__PURE__ */ s(
|
|
126
|
+
se,
|
|
127
|
+
{
|
|
128
|
+
dimensions: r,
|
|
129
|
+
activeTab: f,
|
|
130
|
+
onSelect: y,
|
|
131
|
+
reduced: c
|
|
132
|
+
}
|
|
133
|
+
),
|
|
134
|
+
/* @__PURE__ */ p(
|
|
135
|
+
"div",
|
|
136
|
+
{
|
|
137
|
+
role: "tabpanel",
|
|
138
|
+
id: `settings-tabpanel-${f}`,
|
|
139
|
+
"aria-label": "Settings dimension controls",
|
|
140
|
+
tabIndex: 0,
|
|
141
|
+
className: "settings-shell__tabpanel",
|
|
142
|
+
children: [
|
|
143
|
+
f === "threshold" && /* @__PURE__ */ s(ce, { value: N, onChange: C }),
|
|
144
|
+
f === "timeframe" && /* @__PURE__ */ s(de, { value: S, onChange: te }),
|
|
145
|
+
f === "slots" && /* @__PURE__ */ s(pe, {}),
|
|
146
|
+
f === "color" && /* @__PURE__ */ s(he, { value: w, onSelect: ne })
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
)
|
|
68
150
|
] });
|
|
69
151
|
}
|
|
70
|
-
function
|
|
71
|
-
const [n,
|
|
72
|
-
|
|
73
|
-
},
|
|
74
|
-
d(),
|
|
75
|
-
},
|
|
76
|
-
return /* @__PURE__ */ s("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */
|
|
152
|
+
function j({ lenses: e, activeLens: t, onLensChange: o }) {
|
|
153
|
+
const [n, r] = b(!1), l = U(null), d = () => {
|
|
154
|
+
l.current != null && (window.clearTimeout(l.current), l.current = null);
|
|
155
|
+
}, i = () => {
|
|
156
|
+
d(), l.current = window.setTimeout(() => r(!1), 100);
|
|
157
|
+
}, a = e.filter((c) => c !== t);
|
|
158
|
+
return /* @__PURE__ */ s("div", { className: "cat-segmented-wrap", children: /* @__PURE__ */ p("div", { className: "cat-segmented", children: [
|
|
77
159
|
/* @__PURE__ */ s(
|
|
78
160
|
"button",
|
|
79
161
|
{
|
|
@@ -84,14 +166,14 @@ function K({ lenses: e, activeLens: t, onLensChange: o }) {
|
|
|
84
166
|
children: t
|
|
85
167
|
}
|
|
86
168
|
),
|
|
87
|
-
/* @__PURE__ */
|
|
169
|
+
/* @__PURE__ */ p(
|
|
88
170
|
"div",
|
|
89
171
|
{
|
|
90
172
|
className: "cat-seg-more",
|
|
91
173
|
onMouseEnter: () => {
|
|
92
|
-
d(),
|
|
174
|
+
d(), r(!0);
|
|
93
175
|
},
|
|
94
|
-
onMouseLeave:
|
|
176
|
+
onMouseLeave: i,
|
|
95
177
|
children: [
|
|
96
178
|
/* @__PURE__ */ s("button", { type: "button", className: "cat-seg cat-seg-more-btn", "aria-haspopup": "menu", "aria-expanded": n, children: "More ▾" }),
|
|
97
179
|
n && /* @__PURE__ */ s(
|
|
@@ -100,15 +182,15 @@ function K({ lenses: e, activeLens: t, onLensChange: o }) {
|
|
|
100
182
|
className: "cat-seg-overflow",
|
|
101
183
|
role: "menu",
|
|
102
184
|
onMouseEnter: d,
|
|
103
|
-
onMouseLeave:
|
|
104
|
-
children:
|
|
185
|
+
onMouseLeave: i,
|
|
186
|
+
children: a.map((c) => /* @__PURE__ */ s(
|
|
105
187
|
"button",
|
|
106
188
|
{
|
|
107
189
|
type: "button",
|
|
108
190
|
"data-lens": c,
|
|
109
191
|
role: "menuitem",
|
|
110
192
|
onClick: () => {
|
|
111
|
-
o(c),
|
|
193
|
+
o(c), r(!1);
|
|
112
194
|
},
|
|
113
195
|
children: c
|
|
114
196
|
},
|
|
@@ -121,48 +203,48 @@ function K({ lenses: e, activeLens: t, onLensChange: o }) {
|
|
|
121
203
|
)
|
|
122
204
|
] }) });
|
|
123
205
|
}
|
|
124
|
-
function
|
|
206
|
+
function ge(e) {
|
|
125
207
|
return e.split("·").map((t, o) => {
|
|
126
|
-
const n = t.trim(),
|
|
127
|
-
return /* @__PURE__ */
|
|
128
|
-
/* @__PURE__ */ s("strong", { children:
|
|
208
|
+
const n = t.trim(), r = n.match(/^([$+\-]?[\d,]+(?:\.\d+)?[%+]?)\s*(.*)$/), l = r ? r[1] : "", d = r ? r[2] : n;
|
|
209
|
+
return /* @__PURE__ */ p("span", { children: [
|
|
210
|
+
/* @__PURE__ */ s("strong", { children: l }),
|
|
129
211
|
/* @__PURE__ */ s("small", { children: d })
|
|
130
212
|
] }, o);
|
|
131
213
|
});
|
|
132
214
|
}
|
|
133
|
-
function
|
|
215
|
+
function G({ tiles: e, selectedTileId: t, onSelectTile: o }) {
|
|
134
216
|
return /* @__PURE__ */ s("div", { className: "cat-tiles", children: e.map((n) => {
|
|
135
|
-
const
|
|
136
|
-
return
|
|
217
|
+
const r = n.id === t, l = n.stack === !0, d = ["cat-tile"];
|
|
218
|
+
return l && d.push("span-2"), r && d.push("selected"), /* @__PURE__ */ p(
|
|
137
219
|
"button",
|
|
138
220
|
{
|
|
139
221
|
type: "button",
|
|
140
222
|
className: d.join(" "),
|
|
141
223
|
"data-metric": n.id,
|
|
142
224
|
"data-desc": n.desc,
|
|
143
|
-
"aria-pressed":
|
|
225
|
+
"aria-pressed": r,
|
|
144
226
|
onClick: () => o(n.id, n.desc),
|
|
145
227
|
children: [
|
|
146
228
|
/* @__PURE__ */ s("span", { className: "cat-tile-label", children: n.label }),
|
|
147
|
-
/* @__PURE__ */ s("span", { className: "cat-tile-value", children:
|
|
148
|
-
n.variants && n.variants.length > 0 && /* @__PURE__ */ s("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((
|
|
229
|
+
/* @__PURE__ */ s("span", { className: "cat-tile-value", children: l ? ge(n.value) : n.value }),
|
|
230
|
+
n.variants && n.variants.length > 0 && /* @__PURE__ */ s("span", { className: "cat-tile-variants", "aria-hidden": "true", children: n.variants.map((i) => /* @__PURE__ */ s("span", { children: i }, i)) })
|
|
149
231
|
]
|
|
150
232
|
},
|
|
151
233
|
n.id
|
|
152
234
|
);
|
|
153
235
|
}) });
|
|
154
236
|
}
|
|
155
|
-
const
|
|
156
|
-
function
|
|
157
|
-
return
|
|
237
|
+
const R = Y(null);
|
|
238
|
+
function ve() {
|
|
239
|
+
return K(R);
|
|
158
240
|
}
|
|
159
|
-
function
|
|
160
|
-
const o =
|
|
241
|
+
function be({ mode: e, dispatch: t }) {
|
|
242
|
+
const o = ve();
|
|
161
243
|
if (o == null && e == null) return null;
|
|
162
|
-
const n = o?.mode ?? e ?? "add",
|
|
163
|
-
return /* @__PURE__ */
|
|
164
|
-
/* @__PURE__ */ s("div", { className: "cat-description", id: "cat-desc", children:
|
|
165
|
-
/* @__PURE__ */
|
|
244
|
+
const n = o?.mode ?? e ?? "add", r = o?.selectedTileId ?? null, l = o?.description ?? null, d = r == null;
|
|
245
|
+
return /* @__PURE__ */ p("div", { className: "panel-footer catalog", children: [
|
|
246
|
+
/* @__PURE__ */ s("div", { className: "cat-description", id: "cat-desc", children: l ?? /* @__PURE__ */ s("em", { children: "Tap a metric to see its description" }) }),
|
|
247
|
+
/* @__PURE__ */ p("div", { style: { display: "flex", padding: "10px 14px", gap: 8 }, children: [
|
|
166
248
|
/* @__PURE__ */ s("div", { className: "spacer", style: { flex: 1 } }),
|
|
167
249
|
/* @__PURE__ */ s(
|
|
168
250
|
"button",
|
|
@@ -199,14 +281,14 @@ function le({ mode: e, dispatch: t }) {
|
|
|
199
281
|
] })
|
|
200
282
|
] });
|
|
201
283
|
}
|
|
202
|
-
const
|
|
284
|
+
const Q = [
|
|
203
285
|
"Revenue",
|
|
204
286
|
"Order flow",
|
|
205
287
|
"Rep performance",
|
|
206
288
|
"Brand portfolio",
|
|
207
289
|
"Account coverage",
|
|
208
290
|
"Commission"
|
|
209
|
-
],
|
|
291
|
+
], X = "Order flow", J = {
|
|
210
292
|
Revenue: [
|
|
211
293
|
{ id: "rev-mtd", label: "Revenue MTD", value: "$184K", desc: "Month-to-date revenue across all manufacturers and territories." },
|
|
212
294
|
{ id: "rev-ytd", label: "Revenue YTD", value: "$2.1M", desc: "Year-to-date revenue including pending and posted orders.", variants: ["1×1", "1×3"] },
|
|
@@ -252,96 +334,96 @@ const W = [
|
|
|
252
334
|
{ id: "cm-rate", label: "Effective rate", value: "6.8%", desc: "Realized commission rate across all orders." }
|
|
253
335
|
]
|
|
254
336
|
};
|
|
255
|
-
function
|
|
337
|
+
function qe({
|
|
256
338
|
isOpen: e,
|
|
257
|
-
lenses: t =
|
|
258
|
-
defaultLens: o =
|
|
259
|
-
tilesByLens: n =
|
|
260
|
-
footerSlot:
|
|
339
|
+
lenses: t = Q,
|
|
340
|
+
defaultLens: o = X,
|
|
341
|
+
tilesByLens: n = J,
|
|
342
|
+
footerSlot: r
|
|
261
343
|
}) {
|
|
262
|
-
const [
|
|
263
|
-
return /* @__PURE__ */
|
|
264
|
-
|
|
344
|
+
const [l, d] = b(o), [i, a] = b(null), [c, u] = b(null), h = n[l] ?? [];
|
|
345
|
+
return /* @__PURE__ */ p(
|
|
346
|
+
R.Provider,
|
|
265
347
|
{
|
|
266
|
-
value: { mode: "add", selectedTileId:
|
|
348
|
+
value: { mode: "add", selectedTileId: i, description: c },
|
|
267
349
|
children: [
|
|
268
|
-
/* @__PURE__ */
|
|
350
|
+
/* @__PURE__ */ p("div", { "data-shell": "catalog-add", "aria-hidden": !e, children: [
|
|
269
351
|
/* @__PURE__ */ s("h3", { children: "Add a metric" }),
|
|
270
352
|
/* @__PURE__ */ s(
|
|
271
|
-
|
|
353
|
+
j,
|
|
272
354
|
{
|
|
273
355
|
lenses: t,
|
|
274
|
-
activeLens:
|
|
275
|
-
onLensChange: (
|
|
276
|
-
d(
|
|
356
|
+
activeLens: l,
|
|
357
|
+
onLensChange: (g) => {
|
|
358
|
+
d(g), a(null), u(null);
|
|
277
359
|
}
|
|
278
360
|
}
|
|
279
361
|
),
|
|
280
362
|
/* @__PURE__ */ s(
|
|
281
|
-
|
|
363
|
+
G,
|
|
282
364
|
{
|
|
283
|
-
tiles:
|
|
284
|
-
selectedTileId:
|
|
285
|
-
onSelectTile: (
|
|
286
|
-
|
|
365
|
+
tiles: h,
|
|
366
|
+
selectedTileId: i,
|
|
367
|
+
onSelectTile: (g, f) => {
|
|
368
|
+
a(g), u(f);
|
|
287
369
|
}
|
|
288
370
|
}
|
|
289
371
|
)
|
|
290
372
|
] }),
|
|
291
|
-
|
|
373
|
+
r
|
|
292
374
|
]
|
|
293
375
|
}
|
|
294
376
|
);
|
|
295
377
|
}
|
|
296
|
-
function
|
|
378
|
+
function Ue({
|
|
297
379
|
isOpen: e,
|
|
298
380
|
replacingLabel: t,
|
|
299
|
-
lenses: o =
|
|
300
|
-
defaultLens: n =
|
|
301
|
-
tilesByLens:
|
|
302
|
-
footerSlot:
|
|
381
|
+
lenses: o = Q,
|
|
382
|
+
defaultLens: n = X,
|
|
383
|
+
tilesByLens: r = J,
|
|
384
|
+
footerSlot: l
|
|
303
385
|
}) {
|
|
304
|
-
const [d,
|
|
305
|
-
return /* @__PURE__ */
|
|
306
|
-
|
|
386
|
+
const [d, i] = b(n), [a, c] = b(null), [u, h] = b(null), g = r[d] ?? [];
|
|
387
|
+
return /* @__PURE__ */ p(
|
|
388
|
+
R.Provider,
|
|
307
389
|
{
|
|
308
|
-
value: { mode: "replace", selectedTileId:
|
|
390
|
+
value: { mode: "replace", selectedTileId: a, description: u },
|
|
309
391
|
children: [
|
|
310
|
-
/* @__PURE__ */
|
|
392
|
+
/* @__PURE__ */ p("div", { "data-shell": "catalog-replace", "aria-hidden": !e, children: [
|
|
311
393
|
/* @__PURE__ */ s("h3", { children: "Replace metric" }),
|
|
312
|
-
t && /* @__PURE__ */
|
|
394
|
+
t && /* @__PURE__ */ p("p", { className: "cat-subtitle", children: [
|
|
313
395
|
"replacing ",
|
|
314
396
|
t
|
|
315
397
|
] }),
|
|
316
398
|
/* @__PURE__ */ s(
|
|
317
|
-
|
|
399
|
+
j,
|
|
318
400
|
{
|
|
319
401
|
lenses: o,
|
|
320
402
|
activeLens: d,
|
|
321
|
-
onLensChange: (
|
|
322
|
-
|
|
403
|
+
onLensChange: (f) => {
|
|
404
|
+
i(f), c(null), h(null);
|
|
323
405
|
}
|
|
324
406
|
}
|
|
325
407
|
),
|
|
326
408
|
/* @__PURE__ */ s(
|
|
327
|
-
|
|
409
|
+
G,
|
|
328
410
|
{
|
|
329
|
-
tiles:
|
|
330
|
-
selectedTileId:
|
|
331
|
-
onSelectTile: (
|
|
332
|
-
c(
|
|
411
|
+
tiles: g,
|
|
412
|
+
selectedTileId: a,
|
|
413
|
+
onSelectTile: (f, y) => {
|
|
414
|
+
c(f), h(y);
|
|
333
415
|
}
|
|
334
416
|
}
|
|
335
417
|
)
|
|
336
418
|
] }),
|
|
337
|
-
|
|
419
|
+
l
|
|
338
420
|
]
|
|
339
421
|
}
|
|
340
422
|
);
|
|
341
423
|
}
|
|
342
|
-
function
|
|
343
|
-
const
|
|
344
|
-
return e.active &&
|
|
424
|
+
function ye({ page: e, onRename: t, onKebab: o, onDragStart: n }) {
|
|
425
|
+
const r = ["pm-row"];
|
|
426
|
+
return e.active && r.push("active"), /* @__PURE__ */ p("div", { className: r.join(" "), "data-page-id": e.id, role: "listitem", children: [
|
|
345
427
|
/* @__PURE__ */ s(
|
|
346
428
|
"div",
|
|
347
429
|
{
|
|
@@ -364,13 +446,13 @@ function ie({ page: e, onRename: t, onKebab: o, onDragStart: n }) {
|
|
|
364
446
|
)
|
|
365
447
|
] });
|
|
366
448
|
}
|
|
367
|
-
const
|
|
368
|
-
function
|
|
369
|
-
return
|
|
449
|
+
const Z = Y(null);
|
|
450
|
+
function Ce() {
|
|
451
|
+
return K(Z);
|
|
370
452
|
}
|
|
371
|
-
function
|
|
372
|
-
const o =
|
|
373
|
-
return /* @__PURE__ */
|
|
453
|
+
function Pe(e = {}) {
|
|
454
|
+
const o = Ce()?.setPages;
|
|
455
|
+
return /* @__PURE__ */ p(
|
|
374
456
|
"div",
|
|
375
457
|
{
|
|
376
458
|
className: "panel-footer pm",
|
|
@@ -396,38 +478,38 @@ function de(e = {}) {
|
|
|
396
478
|
}
|
|
397
479
|
);
|
|
398
480
|
}
|
|
399
|
-
const
|
|
481
|
+
const _e = [
|
|
400
482
|
{ id: "p-pipeline", name: "My Pipeline", active: !0 },
|
|
401
483
|
{ id: "p-numbers", name: "My Numbers", active: !1 },
|
|
402
484
|
{ id: "p-morning", name: "My Morning", active: !1 },
|
|
403
485
|
{ id: "p-accounts", name: "My Accounts", active: !1 }
|
|
404
486
|
];
|
|
405
|
-
function
|
|
487
|
+
function Ye({
|
|
406
488
|
isOpen: e,
|
|
407
|
-
pages: t =
|
|
489
|
+
pages: t = _e,
|
|
408
490
|
footerSlot: o
|
|
409
491
|
}) {
|
|
410
|
-
const [n,
|
|
411
|
-
return /* @__PURE__ */
|
|
412
|
-
/* @__PURE__ */
|
|
492
|
+
const [n, r] = b(() => [...t]);
|
|
493
|
+
return /* @__PURE__ */ p(Z.Provider, { value: { pages: n, setPages: r }, children: [
|
|
494
|
+
/* @__PURE__ */ p("div", { "data-shell": "page-management", "aria-hidden": !e, children: [
|
|
413
495
|
/* @__PURE__ */ s("h3", { children: "Manage pages" }),
|
|
414
|
-
/* @__PURE__ */ s("div", { className: "pm-list", role: "list", children: n.map((
|
|
496
|
+
/* @__PURE__ */ s("div", { className: "pm-list", role: "list", children: n.map((l) => /* @__PURE__ */ s(ye, { page: l }, l.id)) })
|
|
415
497
|
] }),
|
|
416
498
|
o
|
|
417
499
|
] });
|
|
418
500
|
}
|
|
419
|
-
const
|
|
501
|
+
const Ke = {
|
|
420
502
|
SETTINGS: "settings",
|
|
421
503
|
CATALOG_ADD: "catalog-add",
|
|
422
504
|
CATALOG_REPLACE: "catalog-replace",
|
|
423
505
|
PAGE_MGMT: "page-management",
|
|
424
506
|
NOTIFICATION_CENTER: "notification-center"
|
|
425
|
-
},
|
|
507
|
+
}, Ne = {
|
|
426
508
|
position: "fixed",
|
|
427
509
|
inset: 0,
|
|
428
510
|
pointerEvents: "none",
|
|
429
511
|
zIndex: 55
|
|
430
|
-
},
|
|
512
|
+
}, Se = {
|
|
431
513
|
position: "absolute",
|
|
432
514
|
inset: 0,
|
|
433
515
|
zIndex: 1,
|
|
@@ -436,66 +518,81 @@ const Me = {
|
|
|
436
518
|
pointerEvents: "none",
|
|
437
519
|
background: "rgba(0, 0, 0, 0.04)"
|
|
438
520
|
};
|
|
439
|
-
function
|
|
440
|
-
const { state: e, dispatch: t, getCloseLog: o } =
|
|
441
|
-
|
|
521
|
+
function We() {
|
|
522
|
+
const { state: e, dispatch: t, getCloseLog: o } = oe();
|
|
523
|
+
V(() => {
|
|
442
524
|
if (e.activePanelId == null) return;
|
|
443
|
-
function
|
|
525
|
+
function l(d) {
|
|
444
526
|
d.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
|
|
445
527
|
}
|
|
446
|
-
return document.addEventListener("keydown",
|
|
528
|
+
return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
|
|
447
529
|
}, [e.activePanelId, t]);
|
|
448
|
-
const n =
|
|
449
|
-
|
|
530
|
+
const n = U(e);
|
|
531
|
+
re(() => {
|
|
450
532
|
n.current = e;
|
|
451
|
-
}),
|
|
533
|
+
}), V(() => {
|
|
452
534
|
if (process.env.NODE_ENV === "production") return;
|
|
453
|
-
const
|
|
454
|
-
return
|
|
535
|
+
const l = window;
|
|
536
|
+
return l.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), l.__panelsHostHandle = {
|
|
455
537
|
dispatch: t,
|
|
456
538
|
getState: () => n.current,
|
|
457
539
|
getCloseLog: o
|
|
458
540
|
}, () => {
|
|
459
|
-
|
|
541
|
+
l.__panelsHostHandle?.dispatch === t && delete window.__panelsHostHandle;
|
|
460
542
|
};
|
|
461
543
|
}, [t, o]);
|
|
462
|
-
const
|
|
544
|
+
const r = W(() => {
|
|
463
545
|
t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
|
|
464
546
|
}, [t]);
|
|
465
|
-
return /* @__PURE__ */ s("div", { "data-panel-host": "true", style:
|
|
547
|
+
return /* @__PURE__ */ s("div", { "data-panel-host": "true", style: Ne, children: e.activePanelId != null && /* @__PURE__ */ s(
|
|
466
548
|
"div",
|
|
467
549
|
{
|
|
468
550
|
"data-panel-scrim": "true",
|
|
469
|
-
style:
|
|
470
|
-
onClick:
|
|
551
|
+
style: Se,
|
|
552
|
+
onClick: r
|
|
471
553
|
}
|
|
472
554
|
) });
|
|
473
555
|
}
|
|
474
|
-
function
|
|
475
|
-
const
|
|
476
|
-
if (
|
|
477
|
-
const { state:
|
|
478
|
-
if (
|
|
479
|
-
const
|
|
480
|
-
if (
|
|
556
|
+
function je({ panelComponents: e, children: t }) {
|
|
557
|
+
const o = I();
|
|
558
|
+
if (o == null) return null;
|
|
559
|
+
const { state: n, dispatch: r } = o;
|
|
560
|
+
if (n.activePanelId == null) return null;
|
|
561
|
+
const l = e?.[n.activePanelId];
|
|
562
|
+
if (l == null && t == null)
|
|
481
563
|
return process.env.NODE_ENV !== "production" && console.error(
|
|
482
564
|
"[panels] No panel component registered for activePanelId:",
|
|
483
|
-
|
|
565
|
+
n.activePanelId
|
|
484
566
|
), null;
|
|
485
|
-
if (
|
|
486
|
-
|
|
487
|
-
|
|
567
|
+
if (n.activePanelId === "settings") {
|
|
568
|
+
const d = n.isDirty, i = n.activeTrigger, a = i?.kind === "card-overflow" ? i.cardId : null;
|
|
569
|
+
return /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
|
|
570
|
+
A,
|
|
488
571
|
{
|
|
489
572
|
isOpen: !0,
|
|
490
|
-
onClose: () =>
|
|
491
|
-
footer: /* @__PURE__ */
|
|
573
|
+
onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
574
|
+
footer: /* @__PURE__ */ p(ae, { children: [
|
|
575
|
+
/* @__PURE__ */ s(
|
|
576
|
+
"button",
|
|
577
|
+
{
|
|
578
|
+
id: "btn-reset",
|
|
579
|
+
type: "button",
|
|
580
|
+
className: "gloss-panel-chrome__footer-btn",
|
|
581
|
+
disabled: !d,
|
|
582
|
+
onClick: () => {
|
|
583
|
+
a != null && r({ type: "CLEAR_BUFFER", cardId: a });
|
|
584
|
+
},
|
|
585
|
+
children: "Reset"
|
|
586
|
+
}
|
|
587
|
+
),
|
|
588
|
+
/* @__PURE__ */ s("span", { style: { flex: 1 } }),
|
|
492
589
|
/* @__PURE__ */ s(
|
|
493
590
|
"button",
|
|
494
591
|
{
|
|
495
592
|
id: "settings-cancel",
|
|
496
593
|
type: "button",
|
|
497
594
|
className: "gloss-panel-chrome__footer-btn",
|
|
498
|
-
onClick: () =>
|
|
595
|
+
onClick: () => r({ type: "CLOSE_PANEL", reason: "cancel-button" }),
|
|
499
596
|
children: "Cancel"
|
|
500
597
|
}
|
|
501
598
|
),
|
|
@@ -505,235 +602,238 @@ function De({ panelComponents: e }) {
|
|
|
505
602
|
id: "settings-apply",
|
|
506
603
|
type: "button",
|
|
507
604
|
className: "gloss-panel-chrome__footer-btn gloss-panel-chrome__footer-btn--primary",
|
|
508
|
-
|
|
605
|
+
disabled: !d,
|
|
606
|
+
onClick: () => r({ type: "CLOSE_PANEL", reason: "apply-button" }),
|
|
509
607
|
children: "Apply"
|
|
510
608
|
}
|
|
511
609
|
)
|
|
512
610
|
] }),
|
|
513
|
-
children: /* @__PURE__ */ s(
|
|
611
|
+
children: l != null ? /* @__PURE__ */ s(l, { isOpen: !0 }) : t
|
|
514
612
|
}
|
|
515
613
|
) });
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
614
|
+
}
|
|
615
|
+
if (n.activePanelId === "catalog-add" || n.activePanelId === "catalog-replace") {
|
|
616
|
+
if (l == null) return null;
|
|
617
|
+
const d = n.activePanelId === "catalog-replace" ? "replace" : "add";
|
|
618
|
+
return /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
|
|
619
|
+
A,
|
|
520
620
|
{
|
|
521
621
|
isOpen: !0,
|
|
522
|
-
onClose: () =>
|
|
622
|
+
onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
523
623
|
footer: null,
|
|
524
624
|
children: /* @__PURE__ */ s(
|
|
525
|
-
|
|
625
|
+
l,
|
|
526
626
|
{
|
|
527
627
|
isOpen: !0,
|
|
528
|
-
footerSlot: /* @__PURE__ */ s(
|
|
628
|
+
footerSlot: /* @__PURE__ */ s(be, { mode: d, dispatch: r })
|
|
529
629
|
}
|
|
530
630
|
)
|
|
531
631
|
}
|
|
532
632
|
) });
|
|
533
633
|
}
|
|
534
|
-
return
|
|
535
|
-
|
|
634
|
+
return n.activePanelId === "page-management" ? l == null ? null : /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
|
|
635
|
+
A,
|
|
536
636
|
{
|
|
537
637
|
isOpen: !0,
|
|
538
|
-
onClose: () =>
|
|
638
|
+
onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
539
639
|
footer: null,
|
|
540
|
-
children: /* @__PURE__ */ s(
|
|
640
|
+
children: /* @__PURE__ */ s(l, { isOpen: !0, footerSlot: /* @__PURE__ */ s(Pe, {}) })
|
|
541
641
|
}
|
|
542
|
-
) }) : /* @__PURE__ */ s(
|
|
543
|
-
|
|
642
|
+
) }) : /* @__PURE__ */ s(E, { isOpen: !0, children: /* @__PURE__ */ s(
|
|
643
|
+
A,
|
|
544
644
|
{
|
|
545
645
|
isOpen: !0,
|
|
546
|
-
onClose: () =>
|
|
646
|
+
onClose: () => r({ type: "CLOSE_PANEL", reason: "header-x" }),
|
|
547
647
|
footer: null,
|
|
548
|
-
children: /* @__PURE__ */ s(
|
|
648
|
+
children: l != null ? /* @__PURE__ */ s(l, { isOpen: !0 }) : t
|
|
549
649
|
}
|
|
550
650
|
) });
|
|
551
651
|
}
|
|
552
|
-
function
|
|
652
|
+
function B(e) {
|
|
553
653
|
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;
|
|
554
654
|
}
|
|
555
|
-
const
|
|
556
|
-
function
|
|
655
|
+
const we = 685, H = 627, Ee = "cubic-bezier(0.22, 1, 0.36, 1)", Ae = 200;
|
|
656
|
+
function ee(e, t) {
|
|
557
657
|
if (typeof window > "u") return t;
|
|
558
658
|
const o = window.getComputedStyle(document.documentElement).getPropertyValue(e).trim();
|
|
559
659
|
if (!o) return t;
|
|
560
660
|
const n = parseFloat(o);
|
|
561
661
|
return Number.isNaN(n) ? t : o.endsWith("s") && !o.endsWith("ms") ? n * 1e3 : n;
|
|
562
662
|
}
|
|
563
|
-
function
|
|
663
|
+
function xe(e, t) {
|
|
564
664
|
return typeof window > "u" ? t : window.getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
|
|
565
665
|
}
|
|
566
|
-
function
|
|
666
|
+
function x(e) {
|
|
567
667
|
e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
|
|
568
668
|
}
|
|
569
|
-
function
|
|
570
|
-
const { mountEl: t, chromeEl: o, reducedMotion: n, onAssert:
|
|
669
|
+
function Te(e) {
|
|
670
|
+
const { mountEl: t, chromeEl: o, reducedMotion: n, onAssert: r } = e;
|
|
571
671
|
if (t == null || o == null) {
|
|
572
|
-
|
|
672
|
+
x(e), r?.({ branch: "slide-fallback-no-dom", timestamp: Date.now() });
|
|
573
673
|
return;
|
|
574
674
|
}
|
|
575
675
|
if (n) {
|
|
576
|
-
e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }),
|
|
676
|
+
e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), r?.({ branch: "slide-reduced-motion", timestamp: Date.now() });
|
|
577
677
|
return;
|
|
578
678
|
}
|
|
579
679
|
if (typeof o.animate != "function") {
|
|
580
|
-
|
|
680
|
+
x(e), r?.({ branch: "slide-no-waapi", timestamp: Date.now() });
|
|
581
681
|
return;
|
|
582
682
|
}
|
|
583
|
-
const
|
|
584
|
-
|
|
585
|
-
const d =
|
|
683
|
+
const l = o.cloneNode(!0);
|
|
684
|
+
l.id = "panel-chrome-frozen", l.style.cssText = "position:absolute;left:8px;right:8px;top:8px;z-index:1;pointer-events:none;", t.appendChild(l), o.style.zIndex = "2", e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger });
|
|
685
|
+
const d = ee("--panel-open-dur", we), i = xe("--panel-easing", Ee), a = o.animate(
|
|
586
686
|
[{ transform: "translateY(100%)" }, { transform: "translateY(0)" }],
|
|
587
|
-
{ duration: d, easing:
|
|
687
|
+
{ duration: d, easing: i, fill: "forwards" }
|
|
588
688
|
);
|
|
589
|
-
|
|
689
|
+
a.addEventListener(
|
|
590
690
|
"finish",
|
|
591
691
|
() => {
|
|
592
|
-
|
|
692
|
+
l.remove(), o.style.zIndex = "", a.cancel(), r?.({ branch: "slide-complete", frozen: "cleaned", timestamp: Date.now() });
|
|
593
693
|
},
|
|
594
694
|
{ once: !0 }
|
|
595
695
|
);
|
|
596
696
|
}
|
|
597
|
-
function
|
|
697
|
+
function Ie(e) {
|
|
598
698
|
const { mountEl: t, onAssert: o } = e;
|
|
599
699
|
if (t == null) {
|
|
600
|
-
e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() =>
|
|
700
|
+
e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), setTimeout(() => x(e), H), o?.({ branch: "handoff-fallback-no-mount", timestamp: Date.now() });
|
|
601
701
|
return;
|
|
602
702
|
}
|
|
603
|
-
const n =
|
|
604
|
-
let
|
|
605
|
-
const d = (
|
|
606
|
-
|
|
607
|
-
},
|
|
608
|
-
|
|
703
|
+
const n = ee("--panel-close-dur", H);
|
|
704
|
+
let r = !1, l = null;
|
|
705
|
+
const d = (a) => {
|
|
706
|
+
a.target !== t || a.propertyName !== "max-height" || r || (r = !0, l != null && clearTimeout(l), t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ branch: "handoff-complete", timestamp: Date.now() }));
|
|
707
|
+
}, i = () => {
|
|
708
|
+
r || (r = !0, t.removeEventListener("transitionend", d), e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ branch: "handoff-forced", timestamp: Date.now() }));
|
|
609
709
|
};
|
|
610
|
-
t.addEventListener("transitionend", d), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }),
|
|
710
|
+
t.addEventListener("transitionend", d), e.dispatch({ type: "CLOSE_PANEL", reason: "mutex-handoff" }), l = setTimeout(i, n + Ae);
|
|
611
711
|
}
|
|
612
|
-
function
|
|
712
|
+
function Le(e) {
|
|
613
713
|
const { state: t, onAssert: o } = e;
|
|
614
714
|
if (t.activePanelId && t.isDirty) {
|
|
615
715
|
e.dispatch({ type: "OPEN_PANEL", panelId: e.panelId, trigger: e.trigger }), o?.({ branch: "blocked-dirty", timestamp: Date.now() });
|
|
616
716
|
return;
|
|
617
717
|
}
|
|
618
|
-
const n =
|
|
619
|
-
if (!!t.activePanelId && n != null && n ===
|
|
620
|
-
|
|
718
|
+
const n = B(t.activeTrigger), r = B(e.trigger);
|
|
719
|
+
if (!!t.activePanelId && n != null && n === r) {
|
|
720
|
+
Te(e);
|
|
621
721
|
return;
|
|
622
722
|
}
|
|
623
723
|
if (t.activePanelId) {
|
|
624
|
-
|
|
724
|
+
Ie(e);
|
|
625
725
|
return;
|
|
626
726
|
}
|
|
627
|
-
|
|
727
|
+
x(e), o?.({ branch: "fresh-open", timestamp: Date.now() });
|
|
628
728
|
}
|
|
629
|
-
function
|
|
729
|
+
function Oe() {
|
|
630
730
|
if (!(typeof window > "u"))
|
|
631
731
|
return window.__panelsAsserter;
|
|
632
732
|
}
|
|
633
|
-
function
|
|
733
|
+
function Ge() {
|
|
634
734
|
const e = I(), t = q();
|
|
635
|
-
return
|
|
735
|
+
return W(
|
|
636
736
|
(o, n) => {
|
|
637
737
|
if (!e)
|
|
638
738
|
return;
|
|
639
|
-
const
|
|
739
|
+
const r = typeof document < "u" ? document.querySelector('[data-mount="panel"]') : null, l = typeof document < "u" ? document.querySelector('[data-chrome="panel"]') : null, d = {
|
|
640
740
|
panelId: o,
|
|
641
741
|
trigger: n,
|
|
642
742
|
state: e.state,
|
|
643
743
|
dispatch: e.dispatch,
|
|
644
|
-
mountEl:
|
|
645
|
-
chromeEl:
|
|
744
|
+
mountEl: r,
|
|
745
|
+
chromeEl: l,
|
|
646
746
|
reducedMotion: t,
|
|
647
|
-
onAssert: (
|
|
648
|
-
|
|
747
|
+
onAssert: (i) => {
|
|
748
|
+
Oe()?.recordTransition?.(i);
|
|
649
749
|
}
|
|
650
750
|
};
|
|
651
|
-
|
|
751
|
+
Le(d);
|
|
652
752
|
},
|
|
653
753
|
[e, t]
|
|
654
754
|
);
|
|
655
755
|
}
|
|
656
|
-
let
|
|
657
|
-
function
|
|
756
|
+
let T = !1, L = null;
|
|
757
|
+
function $() {
|
|
658
758
|
const e = [];
|
|
659
759
|
let t = "cleaned";
|
|
660
760
|
document.querySelectorAll("#panel-chrome-frozen").length > 0 && (e.push("#panel-chrome-frozen"), t = "lingering");
|
|
661
761
|
const n = document.querySelectorAll(".gloss-panel-mount");
|
|
662
762
|
n.length > 1 && e.push(`mount-count=${n.length}`);
|
|
663
|
-
const
|
|
664
|
-
|
|
665
|
-
const d =
|
|
763
|
+
const r = n[0] ?? null, l = r ? r.querySelectorAll(".gloss-panel-chrome") : [];
|
|
764
|
+
l.length > 1 && e.push(`chrome-count=${l.length}`);
|
|
765
|
+
const d = l[0] ?? null;
|
|
666
766
|
if (d) {
|
|
667
767
|
const u = d.style.zIndex;
|
|
668
768
|
u !== "" && u !== "2" && e.push(`chrome-zindex=${u}`);
|
|
669
769
|
}
|
|
670
|
-
const
|
|
770
|
+
const i = r ? "present" : "absent", a = d ? "present" : "absent";
|
|
671
771
|
return {
|
|
672
772
|
valid: e.length === 0,
|
|
673
|
-
mount:
|
|
674
|
-
chrome:
|
|
773
|
+
mount: i,
|
|
774
|
+
chrome: a,
|
|
675
775
|
frozen: t,
|
|
676
776
|
orphans: e,
|
|
677
777
|
timestamp: Date.now()
|
|
678
778
|
};
|
|
679
779
|
}
|
|
680
|
-
const
|
|
681
|
-
function
|
|
682
|
-
return { id: e, constraint: t, expected: o, actual: n, pass:
|
|
780
|
+
const O = "8px 8px 0px", k = "64px", M = "inset(0px 0px 60px 0px)", D = "inset(0px -40px -40px -40px)";
|
|
781
|
+
function m(e, t, o, n, r) {
|
|
782
|
+
return { id: e, constraint: t, expected: o, actual: n, pass: r };
|
|
683
783
|
}
|
|
684
784
|
function P(e) {
|
|
685
785
|
const t = parseInt(e, 10);
|
|
686
786
|
return Number.isFinite(t) ? t : NaN;
|
|
687
787
|
}
|
|
688
|
-
function
|
|
689
|
-
const e = [], t = document.querySelector(".gloss-panel-mount"), o = t?.querySelector(".gloss-panel-chrome") ?? null, n = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"),
|
|
788
|
+
function F() {
|
|
789
|
+
const e = [], t = document.querySelector(".gloss-panel-mount"), o = t?.querySelector(".gloss-panel-chrome") ?? null, n = document.querySelector(".gloss-panel-coordinator") ?? document.querySelector("[data-panel-coordinator]"), r = document.querySelector(".bell-cutout"), l = document.querySelector(".bell-popover"), d = document.querySelector(".gloss-bottom-toolbar");
|
|
690
790
|
if (!t)
|
|
691
|
-
e.push(
|
|
791
|
+
e.push(m("C1", "mount --reveal-y matches clip-path inset-bottom Npx", "mount present", "absent", !1));
|
|
692
792
|
else {
|
|
693
|
-
const
|
|
793
|
+
const i = getComputedStyle(t), a = i.getPropertyValue("--reveal-y").trim() || t.style.getPropertyValue("--reveal-y").trim(), c = i.clipPath || t.style.clipPath || "", u = c.match(/inset\(\s*0(?:px)?\s+0(?:px)?\s+(\d+)px\s+0(?:px)?\s*\)/), h = u ? parseInt(u[1], 10) : NaN, g = P(a), f = Number.isFinite(h) && Number.isFinite(g) && h === g;
|
|
694
794
|
e.push(
|
|
695
|
-
|
|
795
|
+
m(
|
|
696
796
|
"C1",
|
|
697
797
|
"mount --reveal-y matches clip-path inset-bottom Npx",
|
|
698
|
-
`inset(0 0 ${
|
|
699
|
-
`--reveal-y=${
|
|
700
|
-
|
|
798
|
+
`inset(0 0 ${g}px 0) === --reveal-y(${g}px)`,
|
|
799
|
+
`--reveal-y=${a || "n/a"} clip-path=${c || "n/a"}`,
|
|
800
|
+
f
|
|
701
801
|
)
|
|
702
802
|
);
|
|
703
803
|
}
|
|
704
804
|
if (!t)
|
|
705
|
-
e.push(
|
|
805
|
+
e.push(m("C2", "mount padding constant", O, "absent", !1));
|
|
706
806
|
else {
|
|
707
|
-
const
|
|
708
|
-
e.push(
|
|
807
|
+
const i = t.style.padding, a = getComputedStyle(t), c = i || a.padding || "", u = c === O || c === "8px 8px 0px 8px";
|
|
808
|
+
e.push(m("C2", "mount padding constant", O, c || "n/a", u));
|
|
709
809
|
}
|
|
710
810
|
if (!t)
|
|
711
|
-
e.push(
|
|
811
|
+
e.push(m("C3", "mount.bottom resolves to var(--tb-h)=64px", k, "absent", !1));
|
|
712
812
|
else {
|
|
713
|
-
const
|
|
714
|
-
e.push(
|
|
813
|
+
const a = getComputedStyle(t).bottom || t.style.bottom || "", c = a === k;
|
|
814
|
+
e.push(m("C3", "mount.bottom resolves to var(--tb-h)=64px", k, a || "n/a", c));
|
|
715
815
|
}
|
|
716
816
|
if (!o)
|
|
717
|
-
e.push(
|
|
817
|
+
e.push(m("C4", "panel-chrome height formula = (row-h*3)+(row-gap*3)-8px", "formula match", "absent", !1));
|
|
718
818
|
else {
|
|
719
|
-
const
|
|
720
|
-
|
|
819
|
+
const i = getComputedStyle(o), a = P(
|
|
820
|
+
i.getPropertyValue("--row-h").trim() || o.style.getPropertyValue("--row-h").trim() || "0"
|
|
721
821
|
), c = P(
|
|
722
|
-
|
|
723
|
-
), u =
|
|
822
|
+
i.getPropertyValue("--row-gap").trim() || o.style.getPropertyValue("--row-gap").trim() || "0"
|
|
823
|
+
), u = a * 3 + c * 3 - 8, h = P(i.height || o.style.height || ""), g = Number.isFinite(a) && Number.isFinite(c) && Number.isFinite(h) && Number.isFinite(u) && h === u;
|
|
724
824
|
e.push(
|
|
725
|
-
|
|
825
|
+
m(
|
|
726
826
|
"C4",
|
|
727
827
|
"panel-chrome height formula = (row-h*3)+(row-gap*3)-8px",
|
|
728
|
-
`${u}px (rh=${
|
|
729
|
-
`${
|
|
730
|
-
|
|
828
|
+
`${u}px (rh=${a} rg=${c})`,
|
|
829
|
+
`${h}px`,
|
|
830
|
+
g
|
|
731
831
|
)
|
|
732
832
|
);
|
|
733
833
|
}
|
|
734
834
|
if (!n || !o)
|
|
735
835
|
e.push(
|
|
736
|
-
|
|
836
|
+
m(
|
|
737
837
|
"C5",
|
|
738
838
|
'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
|
|
739
839
|
"present",
|
|
@@ -742,19 +842,19 @@ function M() {
|
|
|
742
842
|
)
|
|
743
843
|
);
|
|
744
844
|
else {
|
|
745
|
-
const
|
|
845
|
+
const i = getComputedStyle(n), a = getComputedStyle(o), c = i.perspective || n.style.perspective || "", u = (i.perspectiveOrigin || n.style.perspectiveOrigin || "").trim(), h = a.perspectiveStyle || o.style.perspectiveStyle || "", v = c !== "" && c !== "none" && (u === "center bottom" || u === "50% 100%") && h === "flat";
|
|
746
846
|
e.push(
|
|
747
|
-
|
|
847
|
+
m(
|
|
748
848
|
"C5",
|
|
749
849
|
'coordinator perspective + origin "center bottom"; chrome perspective-style flat',
|
|
750
850
|
"perspective:not-none, origin:center bottom, chrome-style:flat",
|
|
751
|
-
`perspective=${c} origin=${u} chrome-style=${
|
|
752
|
-
|
|
851
|
+
`perspective=${c} origin=${u} chrome-style=${h}`,
|
|
852
|
+
v
|
|
753
853
|
)
|
|
754
854
|
);
|
|
755
855
|
}
|
|
756
856
|
{
|
|
757
|
-
let
|
|
857
|
+
let i = !1, a = "absent";
|
|
758
858
|
try {
|
|
759
859
|
for (const c of Array.from(document.styleSheets)) {
|
|
760
860
|
let u = [];
|
|
@@ -763,81 +863,81 @@ function M() {
|
|
|
763
863
|
} catch {
|
|
764
864
|
continue;
|
|
765
865
|
}
|
|
766
|
-
for (const
|
|
767
|
-
if (
|
|
768
|
-
const
|
|
769
|
-
|
|
866
|
+
for (const h of u)
|
|
867
|
+
if (h.name === "stage-spin") {
|
|
868
|
+
const f = Array.from(h.cssRules), y = f.find((C) => C.keyText === "0%" || C.keyText === "from"), v = f.find((C) => C.keyText === "100%" || C.keyText === "to"), N = y?.style.transform ?? "", S = v?.style.transform ?? "", w = /rotateY\(\s*0(?:deg)?\s*\)/;
|
|
869
|
+
i = w.test(N) && w.test(S), a = `0%=${N || "n/a"} 100%=${S || "n/a"}`;
|
|
770
870
|
break;
|
|
771
871
|
}
|
|
772
|
-
if (
|
|
872
|
+
if (a !== "absent") break;
|
|
773
873
|
}
|
|
774
874
|
} catch {
|
|
775
|
-
|
|
875
|
+
a = "inspection-error";
|
|
776
876
|
}
|
|
777
877
|
e.push(
|
|
778
|
-
|
|
878
|
+
m(
|
|
779
879
|
"C6",
|
|
780
880
|
"@keyframes stage-spin 0% AND 100% anchor at rotateY(0)",
|
|
781
881
|
"both frames rotateY(0)",
|
|
782
|
-
|
|
783
|
-
|
|
882
|
+
a,
|
|
883
|
+
i
|
|
784
884
|
)
|
|
785
885
|
);
|
|
786
886
|
}
|
|
787
887
|
{
|
|
788
|
-
const
|
|
888
|
+
const i = document.documentElement, a = getComputedStyle(i), c = a.getPropertyValue("--panel-open-dur").trim() || i.style.getPropertyValue("--panel-open-dur").trim(), u = a.getPropertyValue("--panel-close-dur").trim() || i.style.getPropertyValue("--panel-close-dur").trim(), h = P(c) || parseFloat(c) * (c.endsWith("s") && !c.endsWith("ms") ? 1e3 : 1), g = P(u) || parseFloat(u) * (u.endsWith("s") && !u.endsWith("ms") ? 1e3 : 1), f = Number.isFinite(h) && Number.isFinite(g) && h > g;
|
|
789
889
|
e.push(
|
|
790
|
-
|
|
890
|
+
m("C7", "--panel-open-dur > --panel-close-dur", "open > close", `open=${c || "n/a"} close=${u || "n/a"}`, f)
|
|
791
891
|
);
|
|
792
892
|
}
|
|
793
|
-
if (!
|
|
794
|
-
e.push(
|
|
893
|
+
if (!r)
|
|
894
|
+
e.push(m("C8", "BellCutout zero computed animation/transition", "no inline timing", "absent", !1));
|
|
795
895
|
else {
|
|
796
|
-
const
|
|
896
|
+
const i = getComputedStyle(r), a = i.animationName || "", c = i.transitionProperty || "", u = (a === "" || a === "none") && (c === "" || c === "none" || c === "all");
|
|
797
897
|
e.push(
|
|
798
|
-
|
|
898
|
+
m(
|
|
799
899
|
"C8",
|
|
800
900
|
"BellCutout zero computed animation/transition",
|
|
801
901
|
"animation:none AND transition:none",
|
|
802
|
-
`animation=${
|
|
902
|
+
`animation=${a || "n/a"} transition=${c || "n/a"}`,
|
|
803
903
|
u
|
|
804
904
|
)
|
|
805
905
|
);
|
|
806
906
|
}
|
|
807
907
|
if (!t)
|
|
808
|
-
e.push(
|
|
908
|
+
e.push(m("C9", "mount closed-state clipPath", M, "absent", !1));
|
|
809
909
|
else {
|
|
810
|
-
const
|
|
811
|
-
e.push(
|
|
910
|
+
const i = t.style.clipPath, a = getComputedStyle(t), c = i || a.clipPath || "", u = c === M;
|
|
911
|
+
e.push(m("C9", "mount closed-state clipPath", M, c || "n/a", u));
|
|
812
912
|
}
|
|
813
|
-
if (!
|
|
814
|
-
e.push(
|
|
913
|
+
if (!l)
|
|
914
|
+
e.push(m("C10", "bell-popover parentElement === document.body (open)", "body", "absent", !1));
|
|
815
915
|
else {
|
|
816
|
-
const
|
|
916
|
+
const i = l.parentElement, a = i === document.body;
|
|
817
917
|
e.push(
|
|
818
|
-
|
|
918
|
+
m(
|
|
819
919
|
"C10",
|
|
820
920
|
"bell-popover parentElement === document.body (open)",
|
|
821
921
|
"body",
|
|
822
|
-
|
|
823
|
-
|
|
922
|
+
i === document.body ? "body" : i?.tagName ?? "n/a",
|
|
923
|
+
a
|
|
824
924
|
)
|
|
825
925
|
);
|
|
826
926
|
}
|
|
827
927
|
if (!n)
|
|
828
|
-
e.push(
|
|
928
|
+
e.push(m("C11", "coordinator overflow === visible", "visible", "absent", !1));
|
|
829
929
|
else {
|
|
830
|
-
const
|
|
831
|
-
e.push(
|
|
930
|
+
const a = getComputedStyle(n).overflow || n.style.overflow || "", c = a === "visible";
|
|
931
|
+
e.push(m("C11", "coordinator overflow === visible", "visible", a || "n/a", c));
|
|
832
932
|
}
|
|
833
933
|
if (!d)
|
|
834
|
-
e.push(
|
|
934
|
+
e.push(m("C12", "toolbar clipPath = inset(0 -40 -40 -40)", D, "absent", !1));
|
|
835
935
|
else {
|
|
836
|
-
const
|
|
837
|
-
e.push(
|
|
936
|
+
const i = d.style.clipPath, a = getComputedStyle(d), c = i || a.clipPath || "", u = c === D;
|
|
937
|
+
e.push(m("C12", "toolbar clipPath = inset(0 -40 -40 -40)", D, c || "n/a", u));
|
|
838
938
|
}
|
|
839
939
|
return e.push(
|
|
840
|
-
|
|
940
|
+
m(
|
|
841
941
|
"C13",
|
|
842
942
|
"same-position slide via WAAPI (mid-transition getAnimations().length > 0)",
|
|
843
943
|
"WAAPI driver wired in orchestrator (source-proof)",
|
|
@@ -845,7 +945,7 @@ function M() {
|
|
|
845
945
|
"wiring_only"
|
|
846
946
|
)
|
|
847
947
|
), e.push(
|
|
848
|
-
|
|
948
|
+
m(
|
|
849
949
|
"C14",
|
|
850
950
|
'cross-position handoff transitionend filtered by propertyName="max-height"',
|
|
851
951
|
"transitionend filter wired in orchestrator (source-proof)",
|
|
@@ -854,11 +954,11 @@ function M() {
|
|
|
854
954
|
)
|
|
855
955
|
), e;
|
|
856
956
|
}
|
|
857
|
-
function
|
|
858
|
-
return
|
|
957
|
+
function ke(e) {
|
|
958
|
+
return F().find((t) => t.id === e);
|
|
859
959
|
}
|
|
860
|
-
function
|
|
861
|
-
const e =
|
|
960
|
+
function Me() {
|
|
961
|
+
const e = $();
|
|
862
962
|
return { q12: [
|
|
863
963
|
{
|
|
864
964
|
id: "Q12-12",
|
|
@@ -867,74 +967,75 @@ function we() {
|
|
|
867
967
|
actual: `valid=${e.valid} mount=${e.mount} chrome=${e.chrome} frozen=${e.frozen} orphans=[${e.orphans.join(",")}]`,
|
|
868
968
|
pass: e.valid
|
|
869
969
|
}
|
|
870
|
-
], cc:
|
|
970
|
+
], cc: F() };
|
|
871
971
|
}
|
|
872
|
-
function
|
|
972
|
+
function De() {
|
|
873
973
|
return {
|
|
874
|
-
enable:
|
|
875
|
-
disable:
|
|
876
|
-
isEnabled: () =>
|
|
877
|
-
getLastReport: () =>
|
|
974
|
+
enable: $e,
|
|
975
|
+
disable: Re,
|
|
976
|
+
isEnabled: () => T,
|
|
977
|
+
getLastReport: () => L,
|
|
878
978
|
recordTransition: (e) => {
|
|
879
|
-
|
|
979
|
+
T && (L = { ...e, ...$() });
|
|
880
980
|
},
|
|
881
981
|
assertOnce: () => {
|
|
882
|
-
const e =
|
|
883
|
-
return
|
|
982
|
+
const e = $();
|
|
983
|
+
return L = e, e;
|
|
884
984
|
},
|
|
885
|
-
assertCcOnly:
|
|
886
|
-
getCcRowById:
|
|
887
|
-
assertPanelTruths:
|
|
985
|
+
assertCcOnly: F,
|
|
986
|
+
getCcRowById: ke,
|
|
987
|
+
assertPanelTruths: Me
|
|
888
988
|
};
|
|
889
989
|
}
|
|
890
|
-
function
|
|
891
|
-
if (
|
|
892
|
-
window.__panelsAsserter || (window.__panelsAsserter =
|
|
990
|
+
function $e() {
|
|
991
|
+
if (T = !0, typeof window > "u") return;
|
|
992
|
+
window.__panelsAsserter || (window.__panelsAsserter = De(), console.info(
|
|
893
993
|
"[panels] asserter enabled (P3b Q12-12 + P6 W5 cc:C1..C14). Inspect via window.__panelsAsserter."
|
|
894
994
|
));
|
|
895
995
|
}
|
|
896
|
-
function
|
|
897
|
-
|
|
996
|
+
function Re() {
|
|
997
|
+
T = !1;
|
|
898
998
|
}
|
|
899
999
|
export {
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
1000
|
+
Je as COMMITS,
|
|
1001
|
+
qe as CatalogAddShell,
|
|
1002
|
+
be as CatalogFooter,
|
|
1003
|
+
Ue as CatalogReplaceShell,
|
|
1004
|
+
R as CatalogStateContext,
|
|
1005
|
+
ie as CloneCard,
|
|
1006
|
+
le as CloneStage,
|
|
1007
|
+
X as MOCK_DEFAULT_LENS,
|
|
1008
|
+
Q as MOCK_LENSES,
|
|
1009
|
+
_e as MOCK_PAGES,
|
|
1010
|
+
J as MOCK_TILES_BY_LENS,
|
|
1011
|
+
Ke as PANEL_IDS,
|
|
1012
|
+
Pe as PageMgmtFooter,
|
|
1013
|
+
Ye as PageMgmtShell,
|
|
1014
|
+
Z as PageMgmtStateContext,
|
|
1015
|
+
A as PanelChrome,
|
|
1016
|
+
Ze as PanelHost,
|
|
1017
|
+
We as PanelHostShell,
|
|
1018
|
+
E as PanelMount,
|
|
1019
|
+
et as PanelProvider,
|
|
1020
|
+
je as PanelSlot,
|
|
1021
|
+
He as SettingsShell,
|
|
1022
|
+
F as assertCcOnly,
|
|
1023
|
+
$ as assertPanelDomShape,
|
|
1024
|
+
Me as assertPanelTruths,
|
|
1025
|
+
tt as deriveSurfaceState,
|
|
1026
|
+
Re as disablePanelAsserter,
|
|
1027
|
+
$e as enablePanelAsserter,
|
|
1028
|
+
ke as getCcRowById,
|
|
1029
|
+
nt as initialState,
|
|
1030
|
+
B as positionKey,
|
|
1031
|
+
st as reducer,
|
|
1032
|
+
Le as transitionToPanel,
|
|
1033
|
+
ve as useCatalogState,
|
|
1034
|
+
Be as useEditingCardId,
|
|
1035
|
+
Ce as usePageMgmtState,
|
|
1036
|
+
oe as usePanelContext,
|
|
936
1037
|
I as usePanelContextOptional,
|
|
937
|
-
|
|
1038
|
+
ot as usePanelCoordinator,
|
|
938
1039
|
q as useReducedMotionPanel,
|
|
939
|
-
|
|
1040
|
+
Ge as useTransitionToPanel
|
|
940
1041
|
};
|