@cratis/event-models 0.194.0 → 0.195.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,501 +0,0 @@
1
- import { useCallback as R, useEffect as x, useLayoutEffect as F, useMemo as q, useRef as L, useState as A } from "react";
2
- import { TemplateReferenceSource as O, TemplateScope as G } from "@cratis/scene.model";
3
- import { Fragment as U, jsx as c, jsxs as N } from "react/jsx-runtime";
4
- import { createPortal as j } from "react-dom";
5
- function W(t, a, i) {
6
- const n = i.trim().toLocaleLowerCase();
7
- return n.length === 0 ? !0 : [
8
- t.displayName,
9
- t.name,
10
- t.description,
11
- t.metadata?.category,
12
- t.metadata?.type,
13
- a
14
- ].some((o) => o?.toLocaleLowerCase().includes(n));
15
- }
16
- var l = /* @__PURE__ */ (function(t) {
17
- return t.Heading = "heading", t.Subheading = "subheading", t.Item = "item", t.Submenu = "submenu", t.Separator = "separator", t.Note = "note", t;
18
- })({}), M = 8, P = 4;
19
- function J(t, a, i) {
20
- const n = Math.max(M, Math.min(t.left, i.width - a.width - M)), o = t.top + t.height + P;
21
- return {
22
- left: n,
23
- top: o + a.height <= i.height - M ? o : Math.max(M, t.top - a.height - P)
24
- };
25
- }
26
- function K(t, a, i) {
27
- const n = t.left + t.width + P;
28
- return {
29
- left: n + a.width <= i.width - M ? n : Math.max(M, t.left - a.width - P),
30
- top: Math.max(M, Math.min(t.top - 4, i.height - a.height - M))
31
- };
32
- }
33
- var H = ({ entries: t, depth: a, anchor: i, openPath: n, label: o, filter: u, onOpen: m, onCollapse: g, onChosen: p }) => {
34
- const f = L(null), [h, _] = A();
35
- F(() => {
36
- const e = f.current?.getBoundingClientRect();
37
- if (!e) return;
38
- const r = {
39
- width: window.innerWidth,
40
- height: window.innerHeight
41
- };
42
- _(a === 0 ? J(i, e, r) : K(i, e, r));
43
- }, [
44
- i,
45
- a,
46
- t
47
- ]), x(() => {
48
- a === 0 && h && f.current?.querySelector("[data-cascade-focusable]")?.focus();
49
- }, [a, h === void 0]);
50
- const k = n[a], s = k ? t.find((e) => e.kind === l.Submenu && e.id === k.id) : void 0;
51
- return /* @__PURE__ */ N(U, { children: [/* @__PURE__ */ N("div", {
52
- ref: f,
53
- className: "studio-cascade-menu__panel",
54
- role: "menu",
55
- "aria-label": o,
56
- "data-cascade-depth": a,
57
- style: {
58
- top: h?.top ?? 0,
59
- left: h?.left ?? 0,
60
- visibility: h ? "visible" : "hidden"
61
- },
62
- children: [u && /* @__PURE__ */ c("input", {
63
- type: "search",
64
- className: "studio-cascade-menu__filter",
65
- role: "searchbox",
66
- "aria-label": u.placeholder,
67
- placeholder: u.placeholder,
68
- value: u.value,
69
- "data-cascade-focusable": "",
70
- onChange: (e) => u.onChange(e.target.value)
71
- }), t.map((e) => {
72
- switch (e.kind) {
73
- case l.Heading:
74
- return /* @__PURE__ */ c("div", {
75
- className: "studio-cascade-menu__heading",
76
- role: "presentation",
77
- "data-cascade-entry": e.id,
78
- children: e.label
79
- }, e.id);
80
- case l.Subheading:
81
- return /* @__PURE__ */ c("div", {
82
- className: "studio-cascade-menu__subheading",
83
- role: "presentation",
84
- "data-cascade-entry": e.id,
85
- children: e.label
86
- }, e.id);
87
- case l.Separator:
88
- return /* @__PURE__ */ c("div", {
89
- className: "studio-cascade-menu__separator",
90
- role: "separator"
91
- }, e.id);
92
- case l.Note:
93
- return /* @__PURE__ */ c("div", {
94
- className: "studio-cascade-menu__note",
95
- role: "presentation",
96
- "data-cascade-entry": e.id,
97
- children: e.label
98
- }, e.id);
99
- case l.Submenu:
100
- return /* @__PURE__ */ N("button", {
101
- type: "button",
102
- role: "menuitem",
103
- "aria-haspopup": "menu",
104
- "aria-expanded": k?.id === e.id,
105
- className: `studio-cascade-menu__row studio-cascade-menu__row--submenu${k?.id === e.id ? " studio-cascade-menu__row--open" : ""}`,
106
- "data-cascade-focusable": "",
107
- "data-cascade-entry": e.id,
108
- onMouseEnter: (r) => m(a, {
109
- id: e.id,
110
- rect: D(r.currentTarget)
111
- }),
112
- onClick: (r) => m(a, {
113
- id: e.id,
114
- rect: D(r.currentTarget)
115
- }),
116
- children: [/* @__PURE__ */ c("span", {
117
- className: "studio-cascade-menu__label",
118
- children: e.label
119
- }), /* @__PURE__ */ c("span", {
120
- className: "studio-cascade-menu__chevron",
121
- "aria-hidden": "true",
122
- children: "▸"
123
- })]
124
- }, e.id);
125
- default:
126
- return /* @__PURE__ */ N("div", {
127
- className: "studio-cascade-menu__line",
128
- role: "presentation",
129
- onMouseEnter: () => g(a),
130
- children: [/* @__PURE__ */ N("button", {
131
- type: "button",
132
- role: e.checked === void 0 ? "menuitem" : "menuitemradio",
133
- "aria-checked": e.checked,
134
- "aria-disabled": e.disabledReason !== void 0,
135
- title: e.disabledReason,
136
- className: `studio-cascade-menu__row${e.checked ? " studio-cascade-menu__row--current" : ""}${e.disabledReason ? " studio-cascade-menu__row--disabled" : ""}`,
137
- "data-cascade-focusable": "",
138
- "data-cascade-entry": e.id,
139
- onClick: () => {
140
- e.disabledReason || (e.onActivate(), p());
141
- },
142
- children: [
143
- /* @__PURE__ */ c("span", {
144
- className: "studio-cascade-menu__check",
145
- "aria-hidden": "true",
146
- children: e.checked ? "✓" : ""
147
- }),
148
- /* @__PURE__ */ N("span", {
149
- className: "studio-cascade-menu__text",
150
- children: [/* @__PURE__ */ c("span", {
151
- className: "studio-cascade-menu__label",
152
- children: e.label
153
- }), e.description && /* @__PURE__ */ c("span", {
154
- className: "studio-cascade-menu__description",
155
- children: e.description
156
- })]
157
- }),
158
- e.trailing && /* @__PURE__ */ c("span", {
159
- className: "studio-cascade-menu__trailing",
160
- children: e.trailing
161
- })
162
- ]
163
- }), e.actions?.map((r, d) => /* @__PURE__ */ c("button", {
164
- type: "button",
165
- className: "studio-cascade-menu__secondary",
166
- "data-cascade-focusable": "",
167
- "data-cascade-entry": `${e.id}:action-${d}`,
168
- title: r.label,
169
- "aria-label": `${r.label}: ${e.label}`,
170
- onClick: () => {
171
- r.onActivate(), r.closes && p();
172
- },
173
- children: r.label
174
- }, d))]
175
- }, e.id);
176
- }
177
- })]
178
- }), s && s.kind === l.Submenu && /* @__PURE__ */ c(H, {
179
- entries: s.entries,
180
- depth: a + 1,
181
- anchor: k.rect,
182
- openPath: n,
183
- label: s.label,
184
- onOpen: m,
185
- onCollapse: g,
186
- onChosen: p
187
- })] });
188
- };
189
- function D(t) {
190
- const { top: a, left: i, width: n, height: o } = t.getBoundingClientRect();
191
- return {
192
- top: a,
193
- left: i,
194
- width: n,
195
- height: o
196
- };
197
- }
198
- var w = /* @__PURE__ */ (function(t) {
199
- return t.Previous = "previous", t.Next = "next", t.First = "first", t.Last = "last", t.Into = "into", t.Out = "out", t;
200
- })({});
201
- function Q(t, a) {
202
- switch (t) {
203
- case "ArrowDown":
204
- return w.Next;
205
- case "ArrowUp":
206
- return w.Previous;
207
- case "ArrowRight":
208
- return a ? void 0 : w.Into;
209
- case "ArrowLeft":
210
- return a ? void 0 : w.Out;
211
- case "Home":
212
- return a ? void 0 : w.First;
213
- case "End":
214
- return a ? void 0 : w.Last;
215
- default:
216
- return;
217
- }
218
- }
219
- function V(t, a, i) {
220
- if (i === 0) return -1;
221
- switch (t) {
222
- case w.First:
223
- return 0;
224
- case w.Last:
225
- return i - 1;
226
- case w.Previous:
227
- return a <= 0 ? i - 1 : a - 1;
228
- default:
229
- return a < 0 || a >= i - 1 ? 0 : a + 1;
230
- }
231
- }
232
- var v = (t) => {
233
- t.isPropagationStopped = () => !0;
234
- }, X = {
235
- onPointerDown: v,
236
- onPointerUp: v,
237
- onMouseDown: v,
238
- onMouseUp: v,
239
- onClick: v,
240
- onDoubleClick: v,
241
- onContextMenu: v,
242
- onWheel: v,
243
- onKeyUp: v,
244
- onDragStart: v
245
- }, Y = v, y = (t) => [...t.querySelectorAll('[data-cascade-focusable]:not([aria-disabled="true"])')], Z = ({ anchor: t, trigger: a, entries: i, label: n, filter: o, onClose: u }) => {
246
- const m = L(null), [g, p] = A([]), [f] = A(() => ({
247
- top: t.top,
248
- left: t.left,
249
- width: t.width,
250
- height: t.height
251
- }));
252
- x(() => {
253
- const s = a ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
254
- return () => s?.focus?.();
255
- }, [a]), x(() => {
256
- const s = (e) => {
257
- const r = e.target;
258
- !m.current?.contains(r) && !a?.contains(r) && u();
259
- };
260
- return document.addEventListener("pointerdown", s, !0), () => document.removeEventListener("pointerdown", s, !0);
261
- }, [u, a]);
262
- const h = R((s, e) => p((r) => [...r.slice(0, s), e]), []), _ = R((s) => p((e) => e.length > s ? e.slice(0, s) : e), []);
263
- return j(/* @__PURE__ */ c("div", {
264
- ...X,
265
- ref: m,
266
- className: "studio-cascade-menu",
267
- onKeyDown: (s) => {
268
- Y(s);
269
- const e = document.activeElement, r = e?.closest(".studio-cascade-menu__panel"), d = Number(r?.dataset.cascadeDepth ?? 0);
270
- if (s.key === "Escape") {
271
- if (s.preventDefault(), s.stopPropagation(), d > 0) {
272
- const b = m.current?.querySelector(`[data-cascade-depth="${d - 1}"] [aria-expanded="true"]`);
273
- _(d - 1), b?.focus();
274
- } else u();
275
- return;
276
- }
277
- if (s.key === "Tab" && r) {
278
- const b = y(r);
279
- if (b.length === 0) return;
280
- s.preventDefault();
281
- const $ = b.indexOf(e);
282
- b[s.shiftKey ? $ <= 0 ? b.length - 1 : $ - 1 : ($ + 1) % b.length]?.focus();
283
- return;
284
- }
285
- const T = Q(s.key, e instanceof HTMLInputElement);
286
- if (!T || !r) return;
287
- if (s.preventDefault(), T === w.Into) {
288
- if (e?.getAttribute("aria-haspopup") !== "menu") return;
289
- e.click(), requestAnimationFrame(() => {
290
- const b = m.current?.querySelector(`[data-cascade-depth="${d + 1}"]`);
291
- b && y(b)[0]?.focus();
292
- });
293
- return;
294
- }
295
- if (T === w.Out) {
296
- if (d === 0) return;
297
- const b = m.current?.querySelector(`[data-cascade-depth="${d - 1}"] [aria-expanded="true"]`);
298
- _(d - 1), b?.focus();
299
- return;
300
- }
301
- const S = y(r);
302
- S[V(T, S.indexOf(e), S.length)]?.focus();
303
- },
304
- children: /* @__PURE__ */ c(H, {
305
- entries: i,
306
- depth: 0,
307
- anchor: f,
308
- openPath: g,
309
- label: n,
310
- filter: o,
311
- onOpen: h,
312
- onCollapse: _,
313
- onChosen: u
314
- })
315
- }), document.body);
316
- }, I = /* @__PURE__ */ (function(t) {
317
- return t.Blueprint = "blueprint", t.Application = "application", t;
318
- })({}), C = (t) => ({
319
- kind: l.Separator,
320
- id: t,
321
- label: ""
322
- }), z = " · ";
323
- function ee(t, a) {
324
- return a ? (t.reference.source === O.Own ? I.Application : I.Blueprint) === a.kind && t.reference.id.toLowerCase() === a.id.toLowerCase() : !1;
325
- }
326
- function te(t, a, i, n, o) {
327
- const u = (e, r, d) => ({
328
- kind: l.Item,
329
- id: r,
330
- label: e.displayName ?? e.name,
331
- checked: ee(e, a),
332
- actions: [...o.onPreview ? [{
333
- label: n.preview,
334
- closes: !0,
335
- onActivate: () => o.onPreview(e)
336
- }] : [], ...d !== void 0 && o.onCopyToMine ? [{
337
- label: n.copyToMine,
338
- closes: !0,
339
- onActivate: () => o.onCopyToMine(e)
340
- }] : []],
341
- onActivate: () => o.onChoose(e)
342
- }), m = E(t.own, void 0, i), g = m.length > 1 || m.some((e) => e.category !== void 0), p = m.flatMap((e, r) => [...g ? [{
343
- kind: l.Subheading,
344
- id: `own-category-${r}`,
345
- label: e.category ?? n.uncategorized
346
- }] : [], ...e.templates.map((d) => u(d, `own:${d.reference.id}`))]), f = t.blueprints.map((e) => ({
347
- blueprint: e,
348
- categories: E(e.categories, e.blueprint, i)
349
- })).filter((e) => e.categories.length > 0), h = o.onBrowseGallery ? [...f.length > 0 ? [C("blueprints-gallery-separator")] : [], {
350
- kind: l.Item,
351
- id: "browse-gallery",
352
- label: n.browseGallery,
353
- onActivate: o.onBrowseGallery
354
- }] : [], _ = f.length === 0 && h.length === 0 ? [] : [{
355
- kind: l.Submenu,
356
- id: "blueprints",
357
- label: n.blueprints,
358
- entries: [
359
- {
360
- kind: l.Heading,
361
- id: "blueprints-heading",
362
- label: n.blueprints
363
- },
364
- ...f.map(({ blueprint: e, categories: r }) => ({
365
- kind: l.Submenu,
366
- id: `blueprint:${e.blueprint}`,
367
- label: B(e),
368
- entries: r.flatMap((d, T) => [{
369
- kind: l.Heading,
370
- id: `blueprint:${e.blueprint}:category-${T}`,
371
- label: [B(e), d.category ?? n.uncategorized].join(z)
372
- }, ...d.templates.map((S) => u(S, `blueprint:${e.blueprint}:${S.reference.id}`, e.blueprint))])
373
- })),
374
- ...h
375
- ]
376
- }], k = [...o.onNewFromCurrent ? [{
377
- kind: l.Item,
378
- id: "new-from-current",
379
- label: `+ ${n.newFromCurrent}`,
380
- onActivate: o.onNewFromCurrent
381
- }] : [], ...o.onClear ? [{
382
- kind: l.Item,
383
- id: "clear",
384
- label: n.clear,
385
- onActivate: o.onClear
386
- }] : []], s = p.length === 0 && f.length === 0;
387
- return [
388
- ...p.length > 0 ? [{
389
- kind: l.Heading,
390
- id: "my-templates",
391
- label: n.myTemplates
392
- }, ...p] : [],
393
- ...s ? [{
394
- kind: l.Note,
395
- id: "nothing-applies",
396
- label: n.nothingApplies
397
- }] : [],
398
- ..._.length > 0 ? [...p.length > 0 ? [C("blueprints-separator")] : [], ..._] : [],
399
- ...k.length > 0 ? [C("footer-separator"), ...k] : []
400
- ];
401
- }
402
- function B(t) {
403
- return t.displayName ?? t.blueprint;
404
- }
405
- function E(t, a, i) {
406
- return t.map((n) => ({
407
- ...n,
408
- templates: n.templates.filter((o) => W(o, a, i))
409
- })).filter((n) => n.templates.length > 0);
410
- }
411
- var ae = ({ anchor: t, trigger: a, applicable: i, current: n, labels: o, handlers: u, onClose: m }) => {
412
- const [g, p] = A(""), f = q(() => te(i, n, g, o, u), [
413
- i,
414
- n,
415
- g,
416
- o,
417
- u
418
- ]);
419
- return /* @__PURE__ */ c(Z, {
420
- anchor: t,
421
- trigger: a,
422
- entries: f,
423
- label: o.menu,
424
- onClose: m,
425
- filter: {
426
- value: g,
427
- placeholder: o.filter,
428
- onChange: p
429
- }
430
- });
431
- }, se = ({ applicable: t, current: a, currentLabel: i, status: n, labels: o, handlers: u, ariaLabel: m, disabled: g = !1 }) => {
432
- const p = L(null), [f, h] = A();
433
- return /* @__PURE__ */ N("div", {
434
- className: "studio-template-picker",
435
- children: [
436
- /* @__PURE__ */ N("button", {
437
- ref: p,
438
- type: "button",
439
- className: "studio-template-picker__select",
440
- "aria-haspopup": "menu",
441
- "aria-expanded": f !== void 0,
442
- "aria-label": m,
443
- disabled: g,
444
- onClick: () => h((_) => _ ? void 0 : p.current?.getBoundingClientRect()),
445
- children: [/* @__PURE__ */ c("span", {
446
- className: "studio-template-picker__value",
447
- children: i ?? o.noTemplate
448
- }), /* @__PURE__ */ c("span", {
449
- className: "studio-template-picker__caret",
450
- "aria-hidden": "true",
451
- children: "▾"
452
- })]
453
- }),
454
- n && /* @__PURE__ */ c("span", {
455
- className: "studio-template-picker__status",
456
- children: n
457
- }),
458
- f && /* @__PURE__ */ c(ae, {
459
- anchor: f,
460
- trigger: p.current,
461
- applicable: t,
462
- current: a,
463
- labels: o,
464
- handlers: u,
465
- onClose: () => h(void 0)
466
- })
467
- ]
468
- });
469
- };
470
- function ce({ bundles: t, profile: a, scope: i }) {
471
- const n = a.layout ? [...t].reverse().flatMap((o) => [...o.layouts ?? []]).find((o) => o.name === a.layout) : void 0;
472
- return {
473
- scope: i ?? G.Slice,
474
- ...n ? { container: {
475
- name: n.name,
476
- slots: n.slots
477
- } } : {}
478
- };
479
- }
480
- function le(t) {
481
- const a = {
482
- screen: /* @__PURE__ */ new Map(),
483
- dialog: /* @__PURE__ */ new Map()
484
- };
485
- for (const i of t) {
486
- for (const n of i.screenTemplates ?? []) a.screen.set(n.name, i.manifest.name);
487
- for (const n of i.dialogTemplates ?? []) a.dialog.set(n.name, i.manifest.name);
488
- }
489
- return t.map((i) => ({
490
- manifest: i.manifest,
491
- layouts: i.layouts,
492
- screenTemplates: i.screenTemplates?.filter((n) => a.screen.get(n.name) === i.manifest.name),
493
- dialogTemplates: i.dialogTemplates?.filter((n) => a.dialog.get(n.name) === i.manifest.name)
494
- }));
495
- }
496
- export {
497
- I as i,
498
- ce as n,
499
- se as r,
500
- le as t
501
- };