@cratis/event-models 0.195.0 → 0.196.0

package/dist/screen-editor/toTemplateSources-B9ALGe3x.js

@@ -0,0 +1,501 @@
+import { useCallback as R, useEffect as x, useLayoutEffect as F, useMemo as q, useRef as L, useState as T } from "react";
+import { TemplateReferenceSource as O, TemplateScope as U } from "@cratis/scene.model";
+import { Fragment as j, jsx as c, jsxs as N } from "react/jsx-runtime";
+import { createPortal as W } from "react-dom";
+function G(e, a, o) {
+  const n = o.trim().toLocaleLowerCase();
+  return n.length === 0 ? !0 : [
+    e.displayName,
+    e.name,
+    e.description,
+    e.metadata?.category,
+    e.metadata?.type,
+    a
+  ].some((r) => r?.toLocaleLowerCase().includes(n));
+}
+var l = /* @__PURE__ */ (function(e) {
+  return e.Heading = "heading", e.Subheading = "subheading", e.Item = "item", e.Submenu = "submenu", e.Separator = "separator", e.Note = "note", e;
+})({}), M = 8, S = 4;
+function J(e, a, o) {
+  const n = Math.max(M, Math.min(e.left, o.width - a.width - M)), r = e.top + e.height + S;
+  return {
+    left: n,
+    top: r + a.height <= o.height - M ? r : Math.max(M, e.top - a.height - S)
+  };
+}
+function K(e, a, o) {
+  const n = e.left + e.width + S;
+  return {
+    left: n + a.width <= o.width - M ? n : Math.max(M, e.left - a.width - S),
+    top: Math.max(M, Math.min(e.top - 4, o.height - a.height - M))
+  };
+}
+var H = ({ entries: e, depth: a, anchor: o, openPath: n, label: r, filter: u, onOpen: d, onCollapse: h, onChosen: m }) => {
+  const p = L(null), [f, _] = T();
+  F(() => {
+    const t = p.current?.getBoundingClientRect();
+    if (!t) return;
+    const s = {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+    _(a === 0 ? J(o, t, s) : K(o, t, s));
+  }, [
+    o,
+    a,
+    e
+  ]), x(() => {
+    a === 0 && f && p.current?.querySelector("[data-cascade-focusable]")?.focus();
+  }, [a, f === void 0]);
+  const k = n[a], i = k ? e.find((t) => t.kind === l.Submenu && t.id === k.id) : void 0;
+  return /* @__PURE__ */ N(j, { children: [/* @__PURE__ */ N("div", {
+    ref: p,
+    className: "studio-cascade-menu__panel",
+    role: "menu",
+    "aria-label": r,
+    "data-cascade-depth": a,
+    style: {
+      top: f?.top ?? 0,
+      left: f?.left ?? 0,
+      visibility: f ? "visible" : "hidden"
+    },
+    children: [u && /* @__PURE__ */ c("input", {
+      type: "search",
+      className: "studio-cascade-menu__filter",
+      role: "searchbox",
+      "aria-label": u.placeholder,
+      placeholder: u.placeholder,
+      value: u.value,
+      "data-cascade-focusable": "",
+      onChange: (t) => u.onChange(t.target.value)
+    }), e.map((t) => {
+      switch (t.kind) {
+        case l.Heading:
+          return /* @__PURE__ */ c("div", {
+            className: "studio-cascade-menu__heading",
+            role: "presentation",
+            "data-cascade-entry": t.id,
+            children: t.label
+          }, t.id);
+        case l.Subheading:
+          return /* @__PURE__ */ c("div", {
+            className: "studio-cascade-menu__subheading",
+            role: "presentation",
+            "data-cascade-entry": t.id,
+            children: t.label
+          }, t.id);
+        case l.Separator:
+          return /* @__PURE__ */ c("div", {
+            className: "studio-cascade-menu__separator",
+            role: "separator"
+          }, t.id);
+        case l.Note:
+          return /* @__PURE__ */ c("div", {
+            className: "studio-cascade-menu__note",
+            role: "presentation",
+            "data-cascade-entry": t.id,
+            children: t.label
+          }, t.id);
+        case l.Submenu:
+          return /* @__PURE__ */ N("button", {
+            type: "button",
+            role: "menuitem",
+            "aria-haspopup": "menu",
+            "aria-expanded": k?.id === t.id,
+            className: `studio-cascade-menu__row studio-cascade-menu__row--submenu${k?.id === t.id ? " studio-cascade-menu__row--open" : ""}`,
+            "data-cascade-focusable": "",
+            "data-cascade-entry": t.id,
+            onMouseEnter: (s) => d(a, {
+              id: t.id,
+              rect: D(s.currentTarget)
+            }),
+            onClick: (s) => d(a, {
+              id: t.id,
+              rect: D(s.currentTarget)
+            }),
+            children: [/* @__PURE__ */ c("span", {
+              className: "studio-cascade-menu__label",
+              children: t.label
+            }), /* @__PURE__ */ c("span", {
+              className: "studio-cascade-menu__chevron",
+              "aria-hidden": "true",
+              children: "▸"
+            })]
+          }, t.id);
+        default:
+          return /* @__PURE__ */ N("div", {
+            className: "studio-cascade-menu__line",
+            role: "presentation",
+            onMouseEnter: () => h(a),
+            children: [/* @__PURE__ */ N("button", {
+              type: "button",
+              role: t.checked === void 0 ? "menuitem" : "menuitemradio",
+              "aria-checked": t.checked,
+              "aria-disabled": t.disabledReason !== void 0,
+              title: t.disabledReason,
+              className: `studio-cascade-menu__row${t.checked ? " studio-cascade-menu__row--current" : ""}${t.disabledReason ? " studio-cascade-menu__row--disabled" : ""}`,
+              "data-cascade-focusable": "",
+              "data-cascade-entry": t.id,
+              onClick: () => {
+                t.disabledReason || (t.onActivate(), m());
+              },
+              children: [
+                /* @__PURE__ */ c("span", {
+                  className: "studio-cascade-menu__check",
+                  "aria-hidden": "true",
+                  children: t.checked ? "✓" : ""
+                }),
+                /* @__PURE__ */ N("span", {
+                  className: "studio-cascade-menu__text",
+                  children: [/* @__PURE__ */ c("span", {
+                    className: "studio-cascade-menu__label",
+                    children: t.label
+                  }), t.description && /* @__PURE__ */ c("span", {
+                    className: "studio-cascade-menu__description",
+                    children: t.description
+                  })]
+                }),
+                t.trailing && /* @__PURE__ */ c("span", {
+                  className: "studio-cascade-menu__trailing",
+                  children: t.trailing
+                })
+              ]
+            }), t.actions?.map((s, g) => /* @__PURE__ */ c("button", {
+              type: "button",
+              className: "studio-cascade-menu__secondary",
+              "data-cascade-focusable": "",
+              "data-cascade-entry": `${t.id}:action-${g}`,
+              title: s.label,
+              "aria-label": `${s.label}: ${t.label}`,
+              onClick: () => {
+                s.onActivate(), s.closes && m();
+              },
+              children: s.label
+            }, g))]
+          }, t.id);
+      }
+    })]
+  }), i && i.kind === l.Submenu && /* @__PURE__ */ c(H, {
+    entries: i.entries,
+    depth: a + 1,
+    anchor: k.rect,
+    openPath: n,
+    label: i.label,
+    onOpen: d,
+    onCollapse: h,
+    onChosen: m
+  })] });
+};
+function D(e) {
+  const { top: a, left: o, width: n, height: r } = e.getBoundingClientRect();
+  return {
+    top: a,
+    left: o,
+    width: n,
+    height: r
+  };
+}
+var w = /* @__PURE__ */ (function(e) {
+  return e.Previous = "previous", e.Next = "next", e.First = "first", e.Last = "last", e.Into = "into", e.Out = "out", e;
+})({});
+function Q(e, a) {
+  switch (e) {
+    case "ArrowDown":
+      return w.Next;
+    case "ArrowUp":
+      return w.Previous;
+    case "ArrowRight":
+      return a ? void 0 : w.Into;
+    case "ArrowLeft":
+      return a ? void 0 : w.Out;
+    case "Home":
+      return a ? void 0 : w.First;
+    case "End":
+      return a ? void 0 : w.Last;
+    default:
+      return;
+  }
+}
+function V(e, a, o) {
+  if (o === 0) return -1;
+  switch (e) {
+    case w.First:
+      return 0;
+    case w.Last:
+      return o - 1;
+    case w.Previous:
+      return a <= 0 ? o - 1 : a - 1;
+    default:
+      return a < 0 || a >= o - 1 ? 0 : a + 1;
+  }
+}
+var v = (e) => {
+  e.isPropagationStopped = () => !0;
+}, X = {
+  onPointerDown: v,
+  onPointerUp: v,
+  onMouseDown: v,
+  onMouseUp: v,
+  onClick: v,
+  onDoubleClick: v,
+  onContextMenu: v,
+  onWheel: v,
+  onKeyUp: v,
+  onDragStart: v
+}, Y = v, C = (e) => [...e.querySelectorAll('[data-cascade-focusable]:not([aria-disabled="true"])')], Z = ({ anchor: e, trigger: a, entries: o, label: n, filter: r, onClose: u }) => {
+  const d = L(null), [h, m] = T([]), [p] = T(() => ({
+    top: e.top,
+    left: e.left,
+    width: e.width,
+    height: e.height
+  }));
+  x(() => {
+    const i = a ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    return () => i?.focus?.();
+  }, [a]), x(() => {
+    const i = (t) => {
+      const s = t.target;
+      !d.current?.contains(s) && !a?.contains(s) && u();
+    };
+    return document.addEventListener("pointerdown", i, !0), () => document.removeEventListener("pointerdown", i, !0);
+  }, [u, a]);
+  const f = R((i, t) => m((s) => [...s.slice(0, i), t]), []), _ = R((i) => m((t) => t.length > i ? t.slice(0, i) : t), []);
+  return W(/* @__PURE__ */ c("div", {
+    ...X,
+    ref: d,
+    className: "studio-cascade-menu",
+    onKeyDown: (i) => {
+      Y(i);
+      const t = document.activeElement, s = t?.closest(".studio-cascade-menu__panel"), g = Number(s?.dataset.cascadeDepth ?? 0);
+      if (i.key === "Escape") {
+        if (i.preventDefault(), i.stopPropagation(), g > 0) {
+          const b = d.current?.querySelector(`[data-cascade-depth="${g - 1}"] [aria-expanded="true"]`);
+          _(g - 1), b?.focus();
+        } else u();
+        return;
+      }
+      if (i.key === "Tab" && s) {
+        const b = C(s);
+        if (b.length === 0) return;
+        i.preventDefault();
+        const $ = b.indexOf(t);
+        b[i.shiftKey ? $ <= 0 ? b.length - 1 : $ - 1 : ($ + 1) % b.length]?.focus();
+        return;
+      }
+      const A = Q(i.key, t instanceof HTMLInputElement);
+      if (!A || !s) return;
+      if (i.preventDefault(), A === w.Into) {
+        if (t?.getAttribute("aria-haspopup") !== "menu") return;
+        t.click(), requestAnimationFrame(() => {
+          const b = d.current?.querySelector(`[data-cascade-depth="${g + 1}"]`);
+          b && C(b)[0]?.focus();
+        });
+        return;
+      }
+      if (A === w.Out) {
+        if (g === 0) return;
+        const b = d.current?.querySelector(`[data-cascade-depth="${g - 1}"] [aria-expanded="true"]`);
+        _(g - 1), b?.focus();
+        return;
+      }
+      const P = C(s);
+      P[V(A, P.indexOf(t), P.length)]?.focus();
+    },
+    children: /* @__PURE__ */ c(H, {
+      entries: o,
+      depth: 0,
+      anchor: p,
+      openPath: h,
+      label: n,
+      filter: r,
+      onOpen: f,
+      onCollapse: _,
+      onChosen: u
+    })
+  }), document.body);
+}, I = /* @__PURE__ */ (function(e) {
+  return e.Blueprint = "blueprint", e.Application = "application", e;
+})({}), y = (e) => ({
+  kind: l.Separator,
+  id: e,
+  label: ""
+}), z = " · ";
+function ee(e, a) {
+  return a ? (e.reference.source === O.Own ? I.Application : I.Blueprint) === a.kind && e.reference.id.toLowerCase() === a.id.toLowerCase() : !1;
+}
+function te(e, a, o, n, r) {
+  const u = (i, t, s) => ({
+    kind: l.Item,
+    id: t,
+    label: i.displayName ?? i.name,
+    checked: ee(i, a),
+    actions: [...r.onPreview ? [{
+      label: n.preview,
+      closes: !0,
+      onActivate: () => r.onPreview(i)
+    }] : [], ...s !== void 0 && r.onCopyToMine ? [{
+      label: n.copyToMine,
+      closes: !0,
+      onActivate: () => r.onCopyToMine(i)
+    }] : []],
+    onActivate: () => r.onChoose(i)
+  }), d = E(e.own, void 0, o), h = d.length > 1 || d.some((i) => i.category !== void 0), m = d.flatMap((i, t) => [...h ? [{
+    kind: l.Subheading,
+    id: `own-category-${t}`,
+    label: i.category ?? n.uncategorized
+  }] : [], ...i.templates.map((s) => u(s, `own:${s.reference.id}`))]), p = e.blueprints.map((i) => ({
+    blueprint: i,
+    categories: E(i.categories, i.blueprint, o)
+  })).filter((i) => i.categories.length > 0), f = p.length === 0 ? [] : [{
+    kind: l.Submenu,
+    id: "blueprints",
+    label: n.blueprints,
+    entries: [{
+      kind: l.Heading,
+      id: "blueprints-heading",
+      label: n.blueprints
+    }, ...p.map(({ blueprint: i, categories: t }) => ({
+      kind: l.Submenu,
+      id: `blueprint:${i.blueprint}`,
+      label: B(i),
+      entries: t.flatMap((s, g) => [{
+        kind: l.Heading,
+        id: `blueprint:${i.blueprint}:category-${g}`,
+        label: [B(i), s.category ?? n.uncategorized].join(z)
+      }, ...s.templates.map((A) => u(A, `blueprint:${i.blueprint}:${A.reference.id}`, i.blueprint))])
+    }))]
+  }], _ = [
+    ...r.onBrowseAll ? [{
+      kind: l.Item,
+      id: "browse-all",
+      label: n.browseAll,
+      onActivate: r.onBrowseAll
+    }] : [],
+    ...r.onNewFromCurrent ? [{
+      kind: l.Item,
+      id: "new-from-current",
+      label: `+ ${n.newFromCurrent}`,
+      onActivate: r.onNewFromCurrent
+    }] : [],
+    ...r.onClear ? [{
+      kind: l.Item,
+      id: "clear",
+      label: n.clear,
+      onActivate: r.onClear
+    }] : []
+  ], k = m.length === 0 && p.length === 0;
+  return [
+    ...m.length > 0 ? [{
+      kind: l.Heading,
+      id: "my-templates",
+      label: n.myTemplates
+    }, ...m] : [],
+    ...k ? [{
+      kind: l.Note,
+      id: "nothing-applies",
+      label: n.nothingApplies
+    }] : [],
+    ...f.length > 0 ? [...m.length > 0 ? [y("blueprints-separator")] : [], ...f] : [],
+    ..._.length > 0 ? [y("footer-separator"), ..._] : []
+  ];
+}
+function B(e) {
+  return e.displayName ?? e.blueprint;
+}
+function E(e, a, o) {
+  return e.map((n) => ({
+    ...n,
+    templates: n.templates.filter((r) => G(r, a, o))
+  })).filter((n) => n.templates.length > 0);
+}
+var ae = ({ anchor: e, trigger: a, applicable: o, current: n, labels: r, handlers: u, onClose: d }) => {
+  const [h, m] = T(""), p = q(() => te(o, n, h, r, u), [
+    o,
+    n,
+    h,
+    r,
+    u
+  ]);
+  return /* @__PURE__ */ c(Z, {
+    anchor: e,
+    trigger: a,
+    entries: p,
+    label: r.menu,
+    onClose: d,
+    filter: {
+      value: h,
+      placeholder: r.filter,
+      onChange: m
+    }
+  });
+}, se = ({ applicable: e, current: a, currentLabel: o, status: n, labels: r, handlers: u, ariaLabel: d, disabled: h = !1 }) => {
+  const m = L(null), [p, f] = T();
+  return /* @__PURE__ */ N("div", {
+    className: "studio-template-picker",
+    children: [
+      /* @__PURE__ */ N("button", {
+        ref: m,
+        type: "button",
+        className: "studio-template-picker__select",
+        "aria-haspopup": "menu",
+        "aria-expanded": p !== void 0,
+        "aria-label": d,
+        disabled: h,
+        onClick: () => f((_) => _ ? void 0 : m.current?.getBoundingClientRect()),
+        children: [/* @__PURE__ */ c("span", {
+          className: "studio-template-picker__value",
+          children: o ?? r.noTemplate
+        }), /* @__PURE__ */ c("span", {
+          className: "studio-template-picker__caret",
+          "aria-hidden": "true",
+          children: "▾"
+        })]
+      }),
+      n && /* @__PURE__ */ c("span", {
+        className: "studio-template-picker__status",
+        children: n
+      }),
+      p && /* @__PURE__ */ c(ae, {
+        anchor: p,
+        trigger: m.current,
+        applicable: e,
+        current: a,
+        labels: r,
+        handlers: u,
+        onClose: () => f(void 0)
+      })
+    ]
+  });
+};
+function ce({ bundles: e, profile: a, scope: o }) {
+  const n = a.layout ? [...e].reverse().flatMap((r) => [...r.layouts ?? []]).find((r) => r.name === a.layout) : void 0;
+  return {
+    scope: o ?? U.Slice,
+    ...n ? { container: {
+      name: n.name,
+      slots: n.slots
+    } } : {}
+  };
+}
+function le(e) {
+  const a = {
+    screen: /* @__PURE__ */ new Map(),
+    dialog: /* @__PURE__ */ new Map()
+  };
+  for (const o of e) {
+    for (const n of o.screenTemplates ?? []) a.screen.set(n.name, o.manifest.name);
+    for (const n of o.dialogTemplates ?? []) a.dialog.set(n.name, o.manifest.name);
+  }
+  return e.map((o) => ({
+    manifest: o.manifest,
+    layouts: o.layouts,
+    screenTemplates: o.screenTemplates?.filter((n) => a.screen.get(n.name) === o.manifest.name),
+    dialogTemplates: o.dialogTemplates?.filter((n) => a.dialog.get(n.name) === o.manifest.name)
+  }));
+}
+export {
+  I as i,
+  ce as n,
+  se as r,
+  le as t
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cratis/event-models",
-  "version": "0.195.0",
+  "version": "0.196.0",
   "description": "The Cratis event model board as a configurable React component.",
   "license": "MIT",
   "author": "Cratis",
@@ -68,7 +68,7 @@
   "peerDependencies": {
     "@cratis/components": "^4.26.2",
     "@cratis/fundamentals": "^7.22.0",
-    "@cratis/scene": "^0.195.0",
+    "@cratis/scene": "^0.196.0",
     "@cratis/scene.blueprint.approvals": "^4.12.0",
     "@cratis/scene.blueprint.components": "^4.12.0",
     "@cratis/scene.blueprint.crm": "^4.12.0",
@@ -96,7 +96,7 @@
   "devDependencies": {
     "@cratis/components": "^4.26.2",
     "@cratis/fundamentals": "^7.22.0",
-    "@cratis/scene": "0.195.0",
+    "@cratis/scene": "0.196.0",
     "@cratis/scene.blueprint.approvals": "4.53.0",
     "@cratis/scene.blueprint.components": "4.53.0",
     "@cratis/scene.blueprint.crm": "4.53.0",