@cratis/event-models 0.239.1 → 0.239.3

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

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

package/dist/theme.css

@@ -31,7 +31,7 @@
   --primary-400: light-dark(#609af8, #7eb6fb);
   --highlight-bg: light-dark(#eff6ff, color-mix(in srgb, #60a5fa, transparent 84%));
   --text-color: light-dark(#374151, #ffffff);
-  --text-color-secondary: light-dark(#6b7280, #d1d5db);
+  --text-color-secondary: light-dark(#596170, #d1d5db);
 
   --surface-0: light-dark(#ffffff, #111827);
   --surface-50: light-dark(#f9fafb, #1f2937);
@@ -56,6 +56,11 @@
   --board-change-changed: light-dark(#854d0e, #facc15);
   --board-change-removed: light-dark(#9f1239, #fb7185);
   --board-placeholder-event: light-dark(#9a4a00, #ffd6aa);
+  --board-annotation-information: #2563eb;
+  --board-annotation-warning: #f59e0b;
+  --board-annotation-error: #dc2626;
+  --board-annotation-ink: #ffffff;
+  --board-annotation-warning-ink: #1f1300;
   --board-placeholder-readmodel: light-dark(#4d5c0a, #d4e793);
 
   --green-500: #22c55e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cratis/event-models",
-  "version": "0.239.1",
+  "version": "0.239.3",
   "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.239.1",
+    "@cratis/scene": "^0.239.3",
     "@cratis/scene.blueprint.approvals": "^4.12.0",
     "@cratis/scene.blueprint.bookings": "^4.12.0",
     "@cratis/scene.blueprint.catalog": "^4.12.0",
@@ -104,7 +104,7 @@
   "devDependencies": {
     "@cratis/components": "^4.29.1",
     "@cratis/fundamentals": "^7.25.1",
-    "@cratis/scene": "0.239.1",
+    "@cratis/scene": "0.239.3",
     "@cratis/scene.blueprint.approvals": "4.71.0",
     "@cratis/scene.blueprint.bookings": "4.71.0",
     "@cratis/scene.blueprint.catalog": "4.71.0",