@cratis/event-models 0.175.0 → 0.176.0

package/dist/screen-editor/CollectionEditor-C7eX8Hw7.js

@@ -0,0 +1,320 @@
+import { a as u, i as D, r as T, t as A } from "./iconDiagnostics-Ds4CnqD0.js";
+import { n as P, t as $ } from "./allowedIconChoices-DBgeRdGI.js";
+import { StructuredPropertyEditor as U } from "./StructuredPropertyEditor-B3lVjrHZ.js";
+import { CollectionOperation as C, DestinationKind as v, PropertyValueType as L, SceneEditKind as O } from "@cratis/scene.model";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { OrderedItemEditor as F } from "@cratis/components/ConfigurationEditor";
+var K = /* @__PURE__ */ new Set([
+  "label",
+  "icon",
+  "destination"
+]), j = (e) => e.valueType === L.Collection && e.item !== void 0 && e.item.properties.every((i) => K.has(i.path)), N = (e) => typeof e == "string" ? e : "";
+function V(e) {
+  const i = (e.items ?? []).map((t) => ({
+    id: t.id,
+    label: N(t.values.label),
+    ...t.values.icon ? { icon: t.values.icon } : {},
+    ...Z(t.values.destination) ? {
+      destinationReference: t.values.destination,
+      destination: t.values.destination.screen
+    } : {},
+    values: t.values,
+    editable: t.editable
+  }));
+  return {
+    fixed: i.filter((t) => !t.editable),
+    items: i.filter((t) => t.editable)
+  };
+}
+function W(e) {
+  const i = new Set(e.operations ?? []), t = i.has(C.EditFields), r = e.descriptor.constraints?.maximumItems;
+  return {
+    add: i.has(C.Add),
+    remove: i.has(C.Remove),
+    reorder: i.has(C.Reorder),
+    fields: {
+      label: t ? "editable" : "readonly",
+      icon: t ? "editable" : "readonly",
+      destination: t ? "editable" : "readonly"
+    },
+    ...r !== void 0 ? { maxItems: r } : {},
+    ...e.reason ? { reasons: {
+      add: e.reason,
+      remove: e.reason,
+      reorder: e.reason
+    } } : {}
+  };
+}
+function _(e, i, t) {
+  const r = {
+    component: e,
+    path: i.descriptor.path
+  };
+  switch (t.kind) {
+    case "add":
+      return [{
+        kind: O.AddCollectionItem,
+        ...r,
+        item: {
+          id: t.item.id,
+          values: M(t.item)
+        },
+        index: t.index
+      }];
+    case "remove":
+      return [{
+        kind: O.RemoveCollectionItem,
+        ...r,
+        itemId: t.item.id
+      }];
+    case "move":
+      return [{
+        kind: O.ReorderCollectionItem,
+        ...r,
+        itemId: t.item.id,
+        index: t.toIndex
+      }];
+    case "update":
+      return [{
+        kind: O.EditCollectionItem,
+        ...r,
+        itemId: t.item.id,
+        field: t.field,
+        value: z(t.item, t.field)
+      }];
+  }
+}
+var z = (e, i) => i === "destination" ? x(e) : e[i], M = (e) => ({
+  ...e.values,
+  label: e.label,
+  ...e.icon ? { icon: e.icon } : {},
+  ...x(e) ? { destination: x(e) } : {}
+});
+function x(e) {
+  if (!(!e.destination && !e.destinationReference))
+    return {
+      ...e.destinationReference ?? {},
+      ...e.destination ? { screen: e.destination } : {}
+    };
+}
+function Z(e) {
+  return !e || typeof e != "object" || Array.isArray(e) ? !1 : [
+    "screen",
+    "module",
+    "feature",
+    "slice",
+    "outlet",
+    "route",
+    "kind",
+    "dialog",
+    "routeParameterBindings"
+  ].some((i) => i in e);
+}
+var q = /^:[A-Za-z_][A-Za-z0-9_]*$/;
+function B(e, i) {
+  if (!e) return [];
+  const t = [];
+  return !e.screen && !e.route && !e.dialog && !e.slice && t.push(u.NoTarget), e.screen && !i.screens.includes(e.screen) && t.push(u.UnknownScreen), e.route !== void 0 && !G(e.route, e.kind) && t.push(u.InvalidRoute), e.outlet && !i.outlets.includes(e.outlet) && t.push(u.UnknownOutlet), e.dialog && !i.dialogTemplates.includes(e.dialog) && t.push(u.UnknownDialog), e.slice && !i.slices.includes(e.slice) && t.push(u.UnknownSlice), e.kind === v.Outlet && !e.outlet && t.push(u.OutletKindWithoutOutlet), e.kind === v.Dialog && !e.dialog && t.push(u.DialogKindWithoutDialog), e.kind === v.External && !e.route && t.push(u.ExternalKindWithoutRoute), t;
+}
+function G(e, i) {
+  if (i === v.External) return H(e);
+  if (!e.startsWith("/") || /\s/.test(e) || e.includes("//")) return !1;
+  const t = e.split("/").filter((r) => r.startsWith(":"));
+  return t.every((r) => q.test(r)) ? new Set(t).size === t.length : !1;
+}
+function H(e) {
+  try {
+    const i = new URL(e);
+    return i.protocol === "https:" || i.protocol === "http:";
+  } catch {
+    return !1;
+  }
+}
+var J = ({ id: e, label: i, value: t, destinations: r, outlets: s, dialogTemplates: p, problems: m = [], disabled: I, strings: a, onChange: b }) => {
+  const d = t ?? {}, h = (o) => b(Y({
+    ...d,
+    ...o
+  })), y = () => b(void 0), g = `${e}-outlets`, k = `${e}-dialogs`;
+  return /* @__PURE__ */ c("fieldset", {
+    className: "studio-editor-destination",
+    disabled: I,
+    children: [
+      /* @__PURE__ */ n("legend", { children: i || a.label }),
+      /* @__PURE__ */ c("label", { children: [/* @__PURE__ */ n("span", { children: a.screen }), /* @__PURE__ */ c("select", {
+        value: d.screen ?? "",
+        onChange: (o) => h({ screen: o.target.value || void 0 }),
+        children: [
+          /* @__PURE__ */ n("option", {
+            value: "",
+            children: a.noScreen
+          }),
+          X(d.screen, r) && /* @__PURE__ */ n("option", {
+            value: d.screen,
+            children: a.missingScreen(d.screen)
+          }),
+          r.map((o) => /* @__PURE__ */ n("option", {
+            value: o.id,
+            children: Q(o)
+          }, o.id))
+        ]
+      })] }),
+      /* @__PURE__ */ c("label", { children: [/* @__PURE__ */ n("span", { children: a.route }), /* @__PURE__ */ n("input", {
+        value: d.route ?? "",
+        placeholder: a.routePlaceholder,
+        onChange: (o) => h({ route: o.target.value || void 0 })
+      })] }),
+      /* @__PURE__ */ c("label", { children: [/* @__PURE__ */ n("span", { children: a.kind }), /* @__PURE__ */ c("select", {
+        value: d.kind ?? "",
+        onChange: (o) => h({ kind: o.target.value || void 0 }),
+        children: [
+          /* @__PURE__ */ n("option", {
+            value: "",
+            children: a.kinds.default
+          }),
+          /* @__PURE__ */ n("option", {
+            value: v.Outlet,
+            children: a.kinds.outlet
+          }),
+          /* @__PURE__ */ n("option", {
+            value: v.Dialog,
+            children: a.kinds.dialog
+          }),
+          /* @__PURE__ */ n("option", {
+            value: v.External,
+            children: a.kinds.external
+          })
+        ]
+      })] }),
+      /* @__PURE__ */ c("label", { children: [
+        /* @__PURE__ */ n("span", { children: a.outlet }),
+        /* @__PURE__ */ n("input", {
+          list: g,
+          value: d.outlet ?? "",
+          onChange: (o) => h({ outlet: o.target.value || void 0 })
+        }),
+        /* @__PURE__ */ n("datalist", {
+          id: g,
+          children: s.map((o) => /* @__PURE__ */ n("option", { value: o }, o))
+        })
+      ] }),
+      /* @__PURE__ */ c("label", { children: [
+        /* @__PURE__ */ n("span", { children: a.dialog }),
+        /* @__PURE__ */ n("input", {
+          list: k,
+          value: d.dialog ?? "",
+          onChange: (o) => h({ dialog: o.target.value || void 0 })
+        }),
+        /* @__PURE__ */ n("datalist", {
+          id: k,
+          children: p.map((o) => /* @__PURE__ */ n("option", { value: o }, o))
+        })
+      ] }),
+      /* @__PURE__ */ n("button", {
+        type: "button",
+        onClick: y,
+        children: a.clear
+      }),
+      m.length > 0 && /* @__PURE__ */ n("ul", {
+        className: "studio-editor-diagnostics",
+        role: "alert",
+        "aria-label": i || a.label,
+        children: m.map((o) => /* @__PURE__ */ n("li", {
+          "data-severity": "error",
+          children: a.problems[o]
+        }, o))
+      })
+    ]
+  });
+};
+function Q(e) {
+  return e.group ? `${e.group} / ${e.label}` : e.label;
+}
+function X(e, i) {
+  return !!e && !i.some((t) => t.id === e);
+}
+function Y(e) {
+  const i = {
+    ...e,
+    ...e.screen ? { screen: e.screen } : {},
+    ...e.route ? { route: e.route } : {},
+    ...e.outlet ? { outlet: e.outlet } : {},
+    ...e.dialog ? { dialog: e.dialog } : {}
+  };
+  for (const t of [
+    "screen",
+    "route",
+    "outlet",
+    "dialog",
+    "kind"
+  ]) i[t] || delete i[t];
+  return Object.keys(i).length > 0 ? i : void 0;
+}
+var ee = ({ context: e }) => {
+  const { session: i } = e;
+  if (!i) return null;
+  const { controller: t, environment: r, property: s, screenStrings: p } = i, m = e.selection?.id ?? "", I = r.destinations, a = e.lookups.icons, { items: b, fixed: d } = V(s), h = A(a.diagnostics, s.descriptor.path), y = W(s), g = y.fields.destination !== "readonly" || s.editable, k = [...d, ...b].filter((l) => l.destination !== void 0 || l.destinationReference !== void 0 || g), o = T(r, t.document), R = te(o, s), S = (l, f) => {
+    t.setCollectionItemDestination(m, s.descriptor.path, l.id, f, p.properties.destination.label);
+  };
+  return /* @__PURE__ */ c("section", {
+    className: "studio-editor-properties__collection",
+    children: [/* @__PURE__ */ n(F, {
+      items: b,
+      fixedItems: d,
+      capabilities: y,
+      destinations: I,
+      validation: h,
+      renderIconField: (l) => /* @__PURE__ */ n(P, {
+        value: l.value,
+        onChange: l.onChange,
+        allowed: $(s.descriptor.item?.properties.find((f) => f.path === "icon")?.choices),
+        catalog: a.catalog,
+        adapters: a.adapters,
+        readOnly: l.readOnly,
+        showMessage: !1,
+        invalid: l.invalid,
+        strings: p.properties.icon,
+        pickerLabels: p.properties.iconPickerLabels,
+        "aria-label": l["aria-label"],
+        "aria-describedby": l["aria-describedby"]
+      }),
+      "aria-label": s.descriptor.label,
+      createItem: () => ({
+        id: globalThis.crypto.randomUUID(),
+        label: "",
+        values: {}
+      }),
+      onChange: (l) => t.applyAll(_(m, s, l), p.properties.itemsLabel)
+    }), k.length > 0 && /* @__PURE__ */ c("div", {
+      className: "studio-editor-destinations",
+      children: [/* @__PURE__ */ n("strong", { children: p.properties.destination.label }), k.map((l) => /* @__PURE__ */ n(J, {
+        id: `${m}-${s.descriptor.path}-${l.id}`,
+        label: l.label,
+        value: l.destinationReference,
+        destinations: I,
+        outlets: R.outlets,
+        dialogTemplates: R.dialogTemplates,
+        problems: B(l.destinationReference, o),
+        disabled: !g || d.some((f) => f.id === l.id),
+        strings: p.properties.destination,
+        onChange: (f) => S(l, f)
+      }, l.id))]
+    })]
+  });
+};
+function te(e, i) {
+  const t = (i.items ?? []).map((s) => E(s.values.destination) ? s.values.destination.outlet : void 0).filter(w), r = (i.items ?? []).map((s) => E(s.values.destination) ? s.values.destination.dialog : void 0).filter(w);
+  return {
+    outlets: D([...e.outlets, ...t]),
+    dialogTemplates: D([...e.dialogTemplates, ...r])
+  };
+}
+function w(e) {
+  return typeof e == "string";
+}
+function E(e) {
+  return !!e && typeof e == "object" && !Array.isArray(e);
+}
+var se = (e) => j(e.descriptor) && e.context.session ? /* @__PURE__ */ n(ee, { ...e }) : /* @__PURE__ */ n(U, { ...e });
+export {
+  se as CollectionEditor
+};

package/dist/screen-editor/ColorEditor-Cc6Xq8pW.js

@@ -0,0 +1,49 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+var p = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i, _ = ({ value: c, onChange: t, descriptor: v, context: d, disabled: a, id: u }) => {
+  const l = d.strings.editors.color, s = d.lookups.colorTokens, e = typeof c == "string" ? c : void 0, n = e !== void 0 && !s.some((o) => o.name === e), b = p.test(e ?? "") ? e : "#000000";
+  return /* @__PURE__ */ m("div", {
+    id: u,
+    className: "studio-editor-color",
+    role: "group",
+    "aria-labelledby": `${u}-label`,
+    children: [s.length > 0 && /* @__PURE__ */ r("div", {
+      className: "studio-editor-color__tokens",
+      role: "radiogroup",
+      "aria-label": l.tokens,
+      children: s.map((o) => /* @__PURE__ */ r("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": e === o.name,
+        "aria-label": o.label,
+        title: o.label,
+        disabled: a,
+        className: `studio-editor-color__swatch${e === o.name ? " studio-editor-color__swatch--chosen" : ""}`,
+        style: o.value ? { background: o.value } : void 0,
+        onClick: () => t(e === o.name ? void 0 : o.name)
+      }, o.name))
+    }), v.editorOptions?.tokensOnly !== !0 && /* @__PURE__ */ m("div", {
+      className: "studio-editor-color__custom",
+      children: [/* @__PURE__ */ r("input", {
+        type: "color",
+        "aria-label": l.custom,
+        disabled: a,
+        value: b,
+        onChange: (o) => t(o.target.value)
+      }), /* @__PURE__ */ r("input", {
+        type: "text",
+        "aria-label": l.hex,
+        placeholder: "#rrggbb",
+        disabled: a,
+        className: "studio-editor-field__input",
+        defaultValue: n ? e : "",
+        onBlur: (o) => {
+          const i = o.target.value.trim();
+          i === "" ? n && t(void 0) : p.test(i) && t(i);
+        }
+      }, e ?? "")]
+    })]
+  });
+};
+export {
+  _ as ColorEditor
+};

package/dist/screen-editor/ColumnListEditor-Cku6GGLp.js

@@ -0,0 +1,103 @@
+import { l as m, o as _, v as N, y } from "./structuredValue-vqCZttsk.js";
+import { FieldEditor as C } from "./FieldEditor-SquvComm.js";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+var p = [
+  "start",
+  "center",
+  "end"
+], B = ({ value: h, onChange: b, descriptor: v, context: n, disabled: c, id: f }) => {
+  const r = n.strings.editors.columnList, l = (Array.isArray(h) ? h : []).filter(_), d = (t) => b(t.length === 0 ? void 0 : t), s = (t, i, e) => {
+    const o = { ...l[t] };
+    e === void 0 || e === "" ? delete o[i] : o[i] = e, d(N(l, t, o));
+  }, w = {
+    ...v,
+    editorKind: "field",
+    label: r.field
+  };
+  return /* @__PURE__ */ u("fieldset", {
+    id: f,
+    className: "studio-editor-columns",
+    disabled: c,
+    children: [l.map((t, i) => /* @__PURE__ */ u("div", {
+      className: "studio-editor-columns__row",
+      children: [
+        /* @__PURE__ */ a(C, {
+          id: `${f}-${i}-field`,
+          value: t.field,
+          descriptor: w,
+          context: n,
+          disabled: c,
+          onChange: (e) => s(i, "field", e)
+        }),
+        /* @__PURE__ */ a("input", {
+          className: "studio-editor-field__input",
+          "aria-label": r.header,
+          placeholder: r.header,
+          defaultValue: String(t.header ?? ""),
+          onBlur: (e) => {
+            e.target.value !== (t.header ?? "") && s(i, "header", e.target.value);
+          }
+        }, String(t.header ?? "")),
+        /* @__PURE__ */ a("input", {
+          className: "studio-editor-field__input studio-editor-columns__width",
+          "aria-label": r.width,
+          placeholder: r.width,
+          defaultValue: String(t.width ?? ""),
+          onBlur: (e) => {
+            const o = e.target.value.trim(), g = o === "" ? void 0 : Number.isFinite(Number(o)) ? Number(o) : o;
+            g !== t.width && s(i, "width", g);
+          }
+        }, String(t.width ?? "")),
+        /* @__PURE__ */ u("select", {
+          "aria-label": r.align,
+          value: p.includes(t.align) ? String(t.align) : "",
+          onChange: (e) => s(i, "align", e.target.value),
+          children: [/* @__PURE__ */ a("option", {
+            value: "",
+            children: r.align
+          }), p.map((e) => /* @__PURE__ */ a("option", {
+            value: e,
+            children: r.alignments[e]
+          }, e))]
+        }),
+        /* @__PURE__ */ a("input", {
+          className: "studio-editor-field__input",
+          "aria-label": r.format,
+          placeholder: r.format,
+          defaultValue: String(t.format ?? ""),
+          onBlur: (e) => {
+            e.target.value !== (t.format ?? "") && s(i, "format", e.target.value);
+          }
+        }, String(t.format ?? "")),
+        /* @__PURE__ */ a("button", {
+          type: "button",
+          "aria-label": n.strings.editors.list.moveUp,
+          disabled: i === 0,
+          onClick: () => d(m(l, i, -1)),
+          children: "↑"
+        }),
+        /* @__PURE__ */ a("button", {
+          type: "button",
+          "aria-label": n.strings.editors.list.moveDown,
+          disabled: i === l.length - 1,
+          onClick: () => d(m(l, i, 1)),
+          children: "↓"
+        }),
+        /* @__PURE__ */ a("button", {
+          type: "button",
+          "aria-label": r.remove,
+          onClick: () => d(y(l, i)),
+          children: "×"
+        })
+      ]
+    }, typeof t.id == "string" ? t.id : i)), /* @__PURE__ */ a("button", {
+      type: "button",
+      className: "studio-editor-list__add",
+      onClick: () => d([...l, { id: globalThis.crypto.randomUUID() }]),
+      children: r.add
+    })]
+  });
+};
+export {
+  B as ColumnListEditor
+};

package/dist/screen-editor/EnumEditor-DNnnf9i3.js

@@ -0,0 +1,26 @@
+import { n as u, t as h } from "./choiceKeys-DQcUX97p.js";
+import { jsx as c } from "react/jsx-runtime";
+var b = ({ value: s, onChange: a, descriptor: i, disabled: d, id: t }) => {
+  const o = s ?? void 0, n = u(i.choices ?? [], o), l = i.constraints?.required === !0;
+  return /* @__PURE__ */ c("div", {
+    id: t,
+    role: "radiogroup",
+    "aria-labelledby": `${t}-label`,
+    className: "studio-editor-chips",
+    children: n.map((e) => {
+      const r = o !== void 0 && e.key === h(o);
+      return /* @__PURE__ */ c("button", {
+        type: "button",
+        role: "radio",
+        "aria-checked": r,
+        disabled: d,
+        className: `studio-editor-chip${r ? " studio-editor-chip--chosen" : ""}`,
+        onClick: () => a(r && !l ? void 0 : e.value),
+        children: e.label
+      }, e.key);
+    })
+  });
+};
+export {
+  b as EnumEditor
+};

package/dist/screen-editor/FieldEditor-SquvComm.js

@@ -0,0 +1,66 @@
+import { t as y } from "./SearchableSelect-WUNlC3tk.js";
+import { Fragment as h, jsx as d, jsxs as v } from "react/jsx-runtime";
+function g(n) {
+  const e = n.toLowerCase().replace(/[?[\]]/g, "");
+  return /^(u?int\d*|long|short|byte|float|double|decimal|number|single)$/.test(e) ? "number" : e === "bool" || e === "boolean" ? "boolean" : /^(date|time|datetime|datetimeoffset|dateonly|timeonly|timestamp)$/.test(e) ? "date" : e === "guid" || e === "uuid" ? "id" : "string";
+}
+function x(n, e) {
+  const r = n.editorKind === "bindingPath" ? Object.entries(e.availableSources).map(([t, s]) => ({
+    name: t,
+    type: s
+  })) : e.fields.map((t) => ({
+    name: t.name,
+    type: t.type
+  })), l = n.editorOptions?.fieldKinds;
+  return {
+    all: r,
+    offered: r.filter((t) => l === void 0 || l.includes(g(t.type)))
+  };
+}
+var K = ({ value: n, onChange: e, descriptor: r, context: l, disabled: t, problem: s, id: c }) => {
+  const o = l.strings.editors, f = r.editorOptions?.fieldKinds, { all: b, offered: m } = x(r, l.lookups), a = typeof n == "string" && n !== "" ? n : void 0, u = a === void 0 || m.some((i) => i.name === a);
+  return b.length === 0 ? /* @__PURE__ */ d("input", {
+    id: c,
+    type: "text",
+    className: "studio-editor-field__input",
+    disabled: t,
+    defaultValue: a ?? "",
+    "aria-invalid": s ? !0 : void 0,
+    onBlur: (i) => {
+      const p = i.target.value.trim();
+      p !== (a ?? "") && e(p === "" ? void 0 : p);
+    }
+  }, a ?? "") : /* @__PURE__ */ v(h, { children: [
+    /* @__PURE__ */ d(y, {
+      id: c,
+      options: (u ? m : [...m, {
+        name: a,
+        type: ""
+      }]).map((i) => ({
+        value: i.name,
+        label: i.type ? `${i.name} · ${i.type}` : i.name
+      })),
+      value: a,
+      disabled: t,
+      invalid: !u || s !== void 0,
+      placeholder: o.field.placeholder,
+      searchLabel: o.select.search,
+      emptyLabel: o.select.empty,
+      clearLabel: o.select.clear,
+      clearable: r.constraints?.required !== !0,
+      "aria-labelledby": `${c}-label`,
+      onChange: e
+    }),
+    f !== void 0 && /* @__PURE__ */ d("small", {
+      className: "studio-editor-properties__hint",
+      children: f.map(o.field.typed).join(", ")
+    }),
+    !u && /* @__PURE__ */ d("span", {
+      className: "studio-editor-chip studio-editor-chip--error",
+      children: o.unresolved
+    })
+  ] });
+};
+export {
+  K as FieldEditor
+};

package/dist/screen-editor/FieldListEditor-CNxskXPf.js

@@ -0,0 +1,56 @@
+import { l as c, t as g, v as w, y as m } from "./structuredValue-vqCZttsk.js";
+import { FieldEditor as y } from "./FieldEditor-SquvComm.js";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+var $ = ({ value: p, onChange: b, descriptor: h, context: l, disabled: a, problem: v, id: d }) => {
+  const s = l.strings.editors.list, o = g(p).filter((i) => typeof i == "string"), e = (i) => b(i.length === 0 ? void 0 : i), f = {
+    ...h,
+    editorKind: "field"
+  };
+  return /* @__PURE__ */ u("fieldset", {
+    id: d,
+    className: "studio-editor-list",
+    disabled: a,
+    children: [o.map((i, t) => /* @__PURE__ */ u("div", {
+      className: "studio-editor-list__row",
+      children: [
+        /* @__PURE__ */ r(y, {
+          id: `${d}-${t}`,
+          value: i,
+          descriptor: f,
+          context: l,
+          disabled: a,
+          problem: v,
+          onChange: (n) => e(n === void 0 ? m(o, t) : w(o, t, n))
+        }),
+        /* @__PURE__ */ r("button", {
+          type: "button",
+          "aria-label": s.moveUp,
+          disabled: t === 0,
+          onClick: () => e(c(o, t, -1)),
+          children: "↑"
+        }),
+        /* @__PURE__ */ r("button", {
+          type: "button",
+          "aria-label": s.moveDown,
+          disabled: t === o.length - 1,
+          onClick: () => e(c(o, t, 1)),
+          children: "↓"
+        }),
+        /* @__PURE__ */ r("button", {
+          type: "button",
+          "aria-label": s.remove,
+          onClick: () => e(m(o, t)),
+          children: "×"
+        })
+      ]
+    }, `${t}:${i}`)), /* @__PURE__ */ r("button", {
+      type: "button",
+      className: "studio-editor-list__add",
+      onClick: () => e([...o, ""]),
+      children: s.add
+    })]
+  });
+};
+export {
+  $ as FieldListEditor
+};

package/dist/screen-editor/IconEditor-C0ibqn-e.js

@@ -0,0 +1,22 @@
+import { n as t, t as d } from "./allowedIconChoices-DBgeRdGI.js";
+import { isIconReference as p } from "@cratis/scene.model";
+import { jsx as g } from "react/jsx-runtime";
+var I = ({ value: a, onChange: s, descriptor: i, context: o, disabled: l, problem: n, id: e }) => {
+  const { icons: r } = o.lookups;
+  return /* @__PURE__ */ g(t, {
+    id: e,
+    value: p(a) ? a : void 0,
+    onChange: (c) => s(c),
+    catalog: r.catalog,
+    adapters: r.adapters,
+    allowed: d(i.choices),
+    readOnly: l,
+    validationMessage: n?.message,
+    strings: o.strings.icon,
+    pickerLabels: o.strings.iconPicker,
+    "aria-labelledby": `${e}-label`
+  });
+};
+export {
+  I as IconEditor
+};