@cratis/event-models 0.179.0 → 0.181.0

package/dist/screen-editor/SearchableSelect-C4yzIyo_.js

@@ -0,0 +1,110 @@
+import { useId as P, useMemo as Q, useRef as R, useState as p } from "react";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+function T(u, a) {
+  const s = a.trim().toLowerCase();
+  return u.filter((o) => s === "" || o.label.toLowerCase().includes(s) || (o.group ?? "").toLowerCase().includes(s));
+}
+var $ = ({ id: u, options: a, value: s, onChange: o, disabled: b, invalid: A, placeholder: j, searchLabel: v, emptyLabel: O, clearLabel: E, clearable: I, renderClosed: g, inline: i, ...y }) => {
+  const [K, w] = p(!1), c = i === !0 || K, [h, N] = p(""), [k, m] = p(0), x = P(), D = R(null), f = a.find((e) => e.value === s), n = Q(() => T(a, h), [a, h]), r = n.filter((e) => e.disabled !== !0), _ = () => {
+    i !== !0 && w(!1), N("");
+  }, C = (e) => {
+    e.disabled || (o(e.value), _());
+  }, L = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation(), _();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (e.preventDefault(), r.length === 0) return;
+      m((t) => (t + (e.key === "ArrowDown" ? 1 : -1) + r.length) % r.length);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const t = r[Math.min(k, r.length - 1)];
+      t && C(t);
+    }
+  }, M = n.some((e) => e.section !== void 0), S = (e) => M ? e.section ?? "" : e.group ?? "", q = [...new Set(n.map(S))].sort((e, t) => M ? 0 : e === "" ? -1 : t === "" ? 1 : 0), B = r[Math.min(k, Math.max(r.length - 1, 0))]?.value;
+  return /* @__PURE__ */ d("div", {
+    ref: D,
+    className: "studio-editor-select",
+    onKeyDown: c ? L : void 0,
+    onBlur: (e) => {
+      D.current?.contains(e.relatedTarget) || _();
+    },
+    children: [
+      i !== !0 && /* @__PURE__ */ l("button", {
+        type: "button",
+        id: u,
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": c,
+        "aria-controls": c ? x : void 0,
+        "aria-invalid": A || void 0,
+        className: "studio-editor-select__trigger",
+        disabled: b,
+        ...y,
+        onClick: () => {
+          w(!c), m(0);
+        },
+        children: g ? g(f) : /* @__PURE__ */ l("span", {
+          className: f ? void 0 : "studio-editor-select__placeholder",
+          children: f?.label ?? j
+        })
+      }),
+      I === !0 && s !== void 0 && !b && /* @__PURE__ */ l("button", {
+        type: "button",
+        className: "studio-editor-select__clear",
+        "aria-label": E,
+        onClick: () => o(void 0),
+        children: "×"
+      }),
+      c && /* @__PURE__ */ d("div", {
+        className: `studio-editor-select__panel${i === !0 ? " studio-editor-select__panel--inline" : ""}`,
+        children: [(i !== !0 || a.length > 10) && /* @__PURE__ */ l("input", {
+          type: "search",
+          autoFocus: !0,
+          className: "studio-editor-select__search",
+          "aria-label": v,
+          placeholder: v,
+          value: h,
+          onChange: (e) => {
+            N(e.target.value), m(0);
+          }
+        }), /* @__PURE__ */ d("ul", {
+          id: x,
+          role: "listbox",
+          "aria-labelledby": y["aria-labelledby"],
+          className: "studio-editor-select__options",
+          children: [n.length === 0 && /* @__PURE__ */ l("li", {
+            className: "studio-editor-select__empty",
+            children: O
+          }), q.map((e) => /* @__PURE__ */ d("li", {
+            role: "presentation",
+            children: [e !== "" && /* @__PURE__ */ l("div", {
+              className: "studio-editor-select__group",
+              children: e
+            }), /* @__PURE__ */ l("ul", {
+              role: "presentation",
+              children: n.filter((t) => S(t) === e).map((t) => /* @__PURE__ */ d("li", {
+                role: "option",
+                "aria-selected": t.value === s,
+                "aria-disabled": t.disabled || void 0,
+                className: [
+                  "studio-editor-select__option",
+                  t.value === B ? "studio-editor-select__option--active" : "",
+                  t.value === s ? "studio-editor-select__option--chosen" : ""
+                ].join(" ").trim(),
+                title: t.reason ?? (t.group ? t.group : void 0),
+                onMouseDown: (F) => F.preventDefault(),
+                onClick: () => C(t),
+                children: [/* @__PURE__ */ l("span", { children: t.label }), t.trailing !== void 0 ? /* @__PURE__ */ l("small", { children: t.trailing }) : t.disabled && t.reason && /* @__PURE__ */ l("small", { children: t.reason })]
+              }, t.value))
+            })]
+          }, e))]
+        })]
+      })
+    ]
+  });
+};
+export {
+  $ as t
+};

package/dist/screen-editor/{SelectEditor-BuQPlIyf.js → SelectEditor-eeAE7a9p.js}

@@ -1,5 +1,5 @@
 import { n as b, t as p } from "./choiceKeys-DQcUX97p.js";
-import { t as h } from "./SearchableSelect-WUNlC3tk.js";
+import { t as h } from "./SearchableSelect-C4yzIyo_.js";
 import { jsx as m } from "react/jsx-runtime";
 var x = ({ value: i, onChange: c, descriptor: o, context: s, disabled: n, problem: d, id: r }) => {
   const a = s.strings.editors.select, l = i ?? void 0, t = b(o.choices ?? [], l);

package/dist/screen-editor/SliceEditor-DLqvdYge.js

@@ -0,0 +1,51 @@
+import { t as m } from "./SearchableSelect-C4yzIyo_.js";
+import { jsx as b } from "react/jsx-runtime";
+function h(a, i, t) {
+  const l = a.slices.length > 0 ? a.slices : a.stateChangeSlices.map((e) => ({
+    id: e.id,
+    name: e.name,
+    kind: "StateChange",
+    path: e.origin
+  })), c = i !== void 0, r = l.map((e) => {
+    const o = i === void 0 || i.includes(e.kind);
+    return {
+      value: e.id,
+      label: e.name,
+      group: e.path.join(" › "),
+      ...c ? {
+        section: o ? t.slice.sections.accepted : t.slice.sections.refused,
+        trailing: o ? e.path[0] ?? "" : t.slice.kindName(e.kind)
+      } : {},
+      ...o ? {} : {
+        disabled: !0,
+        reason: t.slice.notKind(t.slice.kindName(i?.[0] ?? e.kind))
+      }
+    };
+  });
+  return c ? [...r.filter((e) => e.disabled !== !0), ...r.filter((e) => e.disabled === !0)] : r;
+}
+var f = ({ value: a, onChange: i, descriptor: t, context: l, disabled: c, problem: r, inline: e, id: o }) => {
+  const s = l.strings.editors, d = h(l.lookups, t.editorOptions?.kinds, s), n = typeof a == "string" && a !== "" ? a : void 0, p = n !== void 0 && !d.some((u) => u.value === n);
+  return /* @__PURE__ */ b(m, {
+    id: o,
+    ...e ? { inline: e } : {},
+    options: p ? [...d, {
+      value: n,
+      label: n,
+      group: ""
+    }] : d,
+    value: n,
+    disabled: c,
+    invalid: p || r !== void 0,
+    placeholder: s.slice.placeholder,
+    searchLabel: s.select.search,
+    emptyLabel: s.select.empty,
+    clearLabel: s.select.clear,
+    clearable: t.constraints?.required !== !0,
+    "aria-labelledby": `${o}-label`,
+    onChange: i
+  });
+};
+export {
+  f as SliceEditor
+};

package/dist/screen-editor/{StateChangeEditors-9k3Gqtc0.js → StateChangeEditors-OQ-OUDrv.js}

@@ -1,4 +1,4 @@
-import { SliceEditor as r } from "./SliceEditor-Dle8OlsB.js";
+import { SliceEditor as r } from "./SliceEditor-DLqvdYge.js";
 import { jsx as i } from "react/jsx-runtime";
 var d = (t) => /* @__PURE__ */ i(r, {
   ...t,

package/dist/screen-editor/TemplatePicker/TemplatePicker.d.ts

@@ -0,0 +1,28 @@
+import type { ApplicableTemplateSet } from '@cratis/scene.engine';
+import { TemplateReference } from '../ScreenTemplates/TemplateReference';
+import { TemplatePickerHandlers } from './TemplatePickerHandlers';
+import { TemplatePickerLabels } from './TemplatePickerLabels';
+export interface TemplatePickerProps {
+    /** What applies at the target - Scene's `applicableTemplates`. */
+    applicable: ApplicableTemplateSet;
+    /** The template in effect, which gets the check. */
+    current?: TemplateReference;
+    /** What to show for it in the closed control. */
+    currentLabel?: string;
+    /** A line under the control, for example where an inherited template was chosen. */
+    status?: string;
+    /** The labels to use. */
+    labels: TemplatePickerLabels;
+    /** What choosing does. */
+    handlers: TemplatePickerHandlers;
+    /** The accessible name of the control. */
+    ariaLabel: string;
+    /** Whether the control can be used. */
+    disabled?: boolean;
+}
+/**
+ * The control that chooses a template: a select-shaped button showing what is in effect, which opens the one
+ * {@link TemplatePickerMenu}. It is parameterised by the target alone - what applies comes from Scene - so every
+ * place that applies a template uses this and none draws a menu of its own (spec TPL4).
+ */
+export declare const TemplatePicker: ({ applicable, current, currentLabel, status, labels, handlers, ariaLabel, disabled }: TemplatePickerProps) => import("react").JSX.Element;

package/dist/screen-editor/TemplatePicker/TemplatePickerHandlers.d.ts

@@ -0,0 +1,14 @@
+import type { ApplicableTemplate } from '@cratis/scene.engine';
+/** What choosing in the template picker does. */
+export interface TemplatePickerHandlers {
+    /** A template was chosen: the reference to store. */
+    onChoose: (template: ApplicableTemplate) => void;
+    /** The user asked to copy a blueprint template into their own (spec TPL3). Absent when copying is not offered. */
+    onCopyToMine?: (template: ApplicableTemplate) => void;
+    /** The user asked to look at a template before choosing it. Absent when the host cannot show one. */
+    onPreview?: (template: ApplicableTemplate) => void;
+    /** The user asked for a new template made from what is there now. Absent when that is not offered. */
+    onNewFromCurrent?: () => void;
+    /** The user gave up the choice, so the level inherits again (or has no template). Absent when there is nothing to give up. */
+    onClear?: () => void;
+}

package/dist/screen-editor/TemplatePicker/TemplatePickerLabels.d.ts

@@ -0,0 +1,27 @@
+/** Every label the template picker shows. The host owns the resource file; declaring the shape here makes a missing label a compile error there. */
+export interface TemplatePickerLabels {
+    /** The filter field's placeholder and accessible name. */
+    filter: string;
+    /** The heading over the user's own templates. */
+    myTemplates: string;
+    /** The row that opens the blueprints, and the heading of the panel it opens. */
+    blueprints: string;
+    /** The category heading for templates that name none, shown only beside named ones. */
+    uncategorized: string;
+    /** The footer action that makes a template from what is there now. */
+    newFromCurrent: string;
+    /** The footer action that gives up the choice. */
+    clear: string;
+    /** The secondary action on a blueprint template that copies it into the user's own. */
+    copyToMine: string;
+    /** The secondary action on a template that opens it to look at before it is chosen. */
+    preview: string;
+    /** Shown when nothing applies at the target, or nothing matches the filter. */
+    nothingApplies: string;
+    /** What the control shows when no template is chosen. */
+    noTemplate: string;
+    /** The accessible name of the menu. */
+    menu: string;
+    /** The text beside a pinned blueprint template when its blueprint has since been updated; `{version}` is the installed version. */
+    updateAvailable: string;
+}

package/dist/screen-editor/TemplatePicker/TemplatePickerMenu.d.ts

@@ -0,0 +1,26 @@
+import type { ApplicableTemplateSet } from '@cratis/scene.engine';
+import { TemplateReference } from '../ScreenTemplates/TemplateReference';
+import { TemplatePickerHandlers } from './TemplatePickerHandlers';
+import { TemplatePickerLabels } from './TemplatePickerLabels';
+export interface TemplatePickerMenuProps {
+    /** Where the menu opens: the control that was pressed. */
+    anchor: DOMRect;
+    /** The control that opened the menu. */
+    trigger?: HTMLElement | null;
+    /** What applies at the target - Scene's `applicableTemplates`. */
+    applicable: ApplicableTemplateSet;
+    /** The template in effect, which gets the check. */
+    current?: TemplateReference;
+    /** The labels to use. */
+    labels: TemplatePickerLabels;
+    /** What choosing does. */
+    handlers: TemplatePickerHandlers;
+    /** Called when the menu should go away. */
+    onClose: () => void;
+}
+/**
+ * The template picker's menu, for a host that has its own control to open it from - a header action, a row's caret.
+ * Everything that chooses a template draws this one menu (spec TPL4): the levels of the board, the UI Profile default,
+ * the screen editor's `template` property.
+ */
+export declare const TemplatePickerMenu: ({ anchor, trigger, applicable, current, labels, handlers, onClose }: TemplatePickerMenuProps) => import("react").JSX.Element;

package/dist/screen-editor/TemplatePicker/describeTemplatePicker.d.ts

@@ -0,0 +1,26 @@
+import type { ApplicableTemplate, ApplicableTemplateSet } from '@cratis/scene.engine';
+import { CascadeEntry } from '../CascadeMenu';
+import { TemplateReference } from '../ScreenTemplates/TemplateReference';
+import { TemplatePickerHandlers } from './TemplatePickerHandlers';
+import { TemplatePickerLabels } from './TemplatePickerLabels';
+/** The separator between the two names in a blueprint's category heading: `CRM · Workspace`. */
+export declare const blueprintCategorySeparator = " \u00B7 ";
+/** Whether a template is the one in effect. */
+export declare function isCurrentTemplate(template: ApplicableTemplate, current: TemplateReference | undefined): boolean;
+/**
+ * The rows of the template picker, from what Scene says applies at the target.
+ *
+ * The user's own templates come first, directly, grouped by category with a check on the one in effect; the blueprints
+ * are always one level deeper (`Blueprints ▸`, then the blueprint, then its templates grouped as
+ * `Blueprint · Category`), and a blueprint with nothing applicable is not in the set at all, so it is never listed
+ * (spec TPL2). The footer holds "New template from current…" and "Clear template". Nothing here decides what applies:
+ * a template that is not in the set is not shown, and one that is, is.
+ *
+ * @param set What applies at the target - Scene's `applicableTemplates`.
+ * @param current The template in effect, if any.
+ * @param filter What was typed into the filter.
+ * @param labels The labels to use.
+ * @param handlers What choosing does.
+ * @returns The rows of the first panel.
+ */
+export declare function describeTemplatePicker(set: ApplicableTemplateSet, current: TemplateReference | undefined, filter: string, labels: TemplatePickerLabels, handlers: TemplatePickerHandlers): CascadeEntry[];

package/dist/screen-editor/TemplatePicker/index.d.ts

@@ -0,0 +1,6 @@
+export * from './TemplatePickerLabels';
+export * from './TemplatePickerHandlers';
+export * from './templateMatchesFilter';
+export * from './describeTemplatePicker';
+export * from './TemplatePickerMenu';
+export * from './TemplatePicker';

package/dist/screen-editor/TemplatePicker/templateMatchesFilter.d.ts

@@ -0,0 +1,11 @@
+import type { ApplicableTemplate } from '@cratis/scene.engine';
+/**
+ * Whether a template matches what was typed into the picker's filter: its name, description, category or blueprint,
+ * ignoring case. A blank filter matches everything.
+ *
+ * @param template The template.
+ * @param blueprint The blueprint it comes from, or `undefined` for an own template.
+ * @param filter What was typed.
+ * @returns Whether it matches.
+ */
+export declare function templateMatchesFilter(template: ApplicableTemplate, blueprint: string | undefined, filter: string): boolean;

package/dist/screen-editor/TemplatePropertyEditor-D_OaRTPe.js

@@ -0,0 +1,38 @@
+import { i as b, n as v, r as k, t as g } from "./toTemplateSources-CN-BMZ39.js";
+import { useMemo as y } from "react";
+import { applicableTemplates as S } from "@cratis/scene.engine";
+import { jsx as m } from "react/jsx-runtime";
+var j = ({ value: o, onChange: i, context: p, disabled: c, id: d }) => {
+  const n = p.session?.environment, s = p.session?.screenStrings.properties.templates.picker, t = n?.runtime.bundles, a = n?.runtime.profile, l = n?.templateScope, u = y(() => S({ blueprints: g(t ?? []) }, v({
+    bundles: t ?? [],
+    profile: a ?? {},
+    scope: l
+  })), [
+    t,
+    a,
+    l
+  ]), e = typeof o == "string" && o !== "" ? o : void 0;
+  if (!s) return /* @__PURE__ */ m("output", {
+    id: d,
+    children: e ?? ""
+  });
+  const f = t?.flatMap((r) => [...r.screenTemplates ?? [], ...r.dialogTemplates ?? []]).find((r) => r.name === e), T = {
+    onChoose: (r) => i(r.name),
+    onClear: e ? () => i(void 0) : void 0
+  };
+  return /* @__PURE__ */ m(k, {
+    ariaLabel: s.menu,
+    applicable: u,
+    current: e ? {
+      kind: b.Blueprint,
+      id: e
+    } : void 0,
+    currentLabel: e ? f?.displayName ?? e : void 0,
+    labels: s,
+    handlers: T,
+    disabled: c
+  });
+};
+export {
+  j as TemplatePropertyEditor
+};