@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.
@@ -1,27 +1,28 @@
1
- import { jsx as o, jsxs as p } from "react/jsx-runtime";
2
- import { createContext as I, useContext as E, useReducer as P, useRef as d, useEffect as s, useMemo as v, useCallback as g, useSyncExternalStore as S, useLayoutEffect as C, useState as _ } from "react";
3
- const f = I(null);
4
- function y() {
5
- const e = E(f);
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 j() {
13
- return E(f);
12
+ function q() {
13
+ return g(f);
14
14
  }
15
- const O = {
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
- }, w = /* @__PURE__ */ new Set(["settings"]);
24
- function L(e, n) {
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 N(e, n) {
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 && L(e.activeTrigger, n.trigger))
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" ? [{ type: "COMMIT_BUFFER" }] : [{ type: "DISCARD_BUFFER" }] : [];
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, ...r]
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 || !w.has(e.activePanelId) ? {
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 T(e) {
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 D() {
141
- const [e, n] = P(N, O), t = d([]), r = d(null);
142
- s(() => () => {
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
- }, []), s(() => {
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]), s(() => {
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 = v(
174
- () => T(e),
229
+ const i = C(
230
+ () => D(e),
175
231
  [e.activePanelId, e.bellCutoutOpen, e.isDirty]
176
- ), a = g(() => t.current.slice(), []);
177
- return { state: e, surfaceState: i, dispatch: n, getCloseLog: a };
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 = D(), t = v(
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__ */ o(f.Provider, { value: t, children: e });
242
+ return /* @__PURE__ */ a(f.Provider, { value: t, children: e });
187
243
  }
188
- const x = "(prefers-reduced-motion: reduce)";
189
- function h() {
190
- return typeof window > "u" || typeof window.matchMedia != "function" ? null : window.matchMedia(x);
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 H(e) {
193
- const n = h();
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 b() {
200
- const e = h();
255
+ function H() {
256
+ const e = y();
201
257
  return e ? e.matches : !1;
202
258
  }
203
- function A() {
259
+ function F() {
204
260
  return !1;
205
261
  }
206
262
  function R() {
207
- return S(H, b, A);
263
+ return _(x, H, F);
208
264
  }
209
- const F = {
265
+ const B = {
210
266
  position: "relative",
211
267
  pointerEvents: "auto"
212
268
  };
213
- function k({ children: e, onClose: n, footer: t }) {
214
- return /* @__PURE__ */ p(
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: F,
277
+ style: B,
222
278
  children: [
223
- /* @__PURE__ */ o("div", { className: "gloss-panel-chrome__header", children: /* @__PURE__ */ o(
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__ */ o("div", { className: "gloss-panel-chrome__body", children: e }),
235
- t != null && /* @__PURE__ */ o("div", { className: "gloss-panel-chrome__footer", children: t })
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 M(e) {
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 U({ isOpen: e, children: n }) {
307
+ function M({ isOpen: e, children: n }) {
252
308
  const t = R(), r = d(null);
253
- C(() => {
254
- M(r.current);
309
+ I(() => {
310
+ k(r.current);
255
311
  }, []);
256
- const [i, a] = _(!1);
257
- s(() => {
312
+ const [i, o] = P(!1);
313
+ u(() => {
258
314
  if (!e) {
259
- a(!1);
315
+ o(!1);
260
316
  return;
261
317
  }
262
- const u = requestAnimationFrame(() => a(!0));
263
- return () => cancelAnimationFrame(u);
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__ */ o(
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 B = {
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
- }, K = {
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 } = y(), i = n.activePanelId ? e[n.activePanelId] : null;
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
- ), s(() => {
369
+ ), u(() => {
314
370
  if (n.activePanelId == null) return;
315
- function c(m) {
316
- m.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
371
+ function s(h) {
372
+ h.key === "Escape" && t({ type: "CLOSE_PANEL", reason: "escape-key" });
317
373
  }
318
- return document.addEventListener("keydown", c), () => {
319
- document.removeEventListener("keydown", c);
374
+ return document.addEventListener("keydown", s), () => {
375
+ document.removeEventListener("keydown", s);
320
376
  };
321
377
  }, [n.activePanelId, t]);
322
- const a = d(n);
323
- C(() => {
324
- a.current = n;
325
- }), s(() => {
378
+ const o = d(n);
379
+ I(() => {
380
+ o.current = n;
381
+ }), u(() => {
326
382
  if (process.env.NODE_ENV === "production") return;
327
- const c = window;
328
- return c.__panelsHostHandle && console.warn("[panels] multiple PanelHost/PanelHostShell instances mounted; dev handle is unreliable"), c.__panelsHostHandle = {
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: () => a.current,
386
+ getState: () => o.current,
331
387
  getCloseLog: r
332
388
  }, () => {
333
- c.__panelsHostHandle?.dispatch === t && delete c.__panelsHostHandle;
389
+ s.__panelsHostHandle?.dispatch === t && delete s.__panelsHostHandle;
334
390
  };
335
391
  }, [t, r]);
336
- const l = g(() => {
392
+ const l = v(() => {
337
393
  t({ type: "CLOSE_PANEL", reason: "nav-escape-hatch" });
338
- }, [t]), u = n.activePanelId != null && i != null;
339
- return /* @__PURE__ */ p("div", { "data-panel-host": "true", style: B, children: [
340
- u && /* @__PURE__ */ o(
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: K,
400
+ style: V,
345
401
  onClick: l
346
402
  }
347
403
  ),
348
- /* @__PURE__ */ o(U, { isOpen: u, children: u && /* @__PURE__ */ o(
349
- k,
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__ */ o(i, { isOpen: !0 })
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
- j as a,
430
+ O as a,
375
431
  z as b,
376
- k as c,
377
- D as d,
378
- T as e,
432
+ A as c,
433
+ w as d,
434
+ D as e,
379
435
  R as f,
380
- U as g,
381
- O as i,
382
- N as r,
383
- y as u
436
+ M as g,
437
+ L as i,
438
+ T as r,
439
+ q as u
384
440
  };