@cratis/event-models 0.140.0 → 0.141.0

package/dist/screen-editor/index.js

@@ -1,6 +1,6 @@
-import { createElement as It, useCallback as B, useEffect as pe, useId as Qo, useLayoutEffect as tt, useMemo as $, useRef as te, useState as A } from "react";
+import { createElement as It, useCallback as B, useEffect as pe, useId as Qo, useLayoutEffect as tt, useMemo as $, useRef as Z, useState as A } from "react";
 import { LayoutArrangement as V, PrototypeOverlayFrame as Yo } from "@cratis/scene/ScreenEditor";
-import { BindingMode as bh, BindingMode as Xn, BindingNullBehavior as yh, BindingNullBehavior as Bt, BindingSourceKind as wh, BindingSourceKind as E, CollectionOperation as be, DestinationKind as Ch, DestinationKind as De, DiagnosticCode as ve, DiagnosticSeverity as Tr, EditTarget as Nr, EditingScopeKind as Rt, FlowContainerKind as Ut, FormGenerationMode as ce, FormWidthUnit as me, GridUnitType as Pr, HorizontalAlignment as Pn, InteractionActionKind as Ke, InteractionTriggerKind as Zo, Orientation as Qe, PackageKind as Dt, PropertyValueType as x, ProvenanceKind as eo, QueryOriginKind as Ir, QueryResultShape as Rr, SceneEditKind as Z, SceneNodeKind as Dr, TemplateScope as Xo, VerticalAlignment as In, Visibility as Rn, isIconReference as Or, parseIconReference as xr } from "@cratis/scene.model";
+import { BindingMode as bh, BindingMode as Xn, BindingNullBehavior as yh, BindingNullBehavior as Bt, BindingSourceKind as wh, BindingSourceKind as E, CollectionOperation as be, DestinationKind as Ch, DestinationKind as De, DiagnosticCode as ve, DiagnosticSeverity as Tr, EditTarget as Nr, EditingScopeKind as Rt, FlowContainerKind as Ut, FormGenerationMode as ce, FormWidthUnit as me, GridUnitType as Pr, HorizontalAlignment as Pn, InteractionActionKind as Ke, InteractionTriggerKind as Zo, Orientation as Qe, PackageKind as Dt, PropertyValueType as x, ProvenanceKind as eo, QueryOriginKind as Ir, QueryResultShape as Rr, SceneEditKind as X, SceneNodeKind as Dr, TemplateScope as Xo, VerticalAlignment as In, Visibility as Rn, isIconReference as Or, parseIconReference as xr } from "@cratis/scene.model";
 import { EffectiveIconCatalog as Fr, applyEdit as Dn, baseComponentLibraries as Mr, computeSizeClass as _r, corePackage as On, createDescriptorCatalog as $r, elementNodeId as ie, findLayoutTypeDescriptor as to, inspect as xn, isCanvas as Fe, isDockPanel as Ar, isExternalComponent as st, isGrid as Fn, isPackageSelectionValid as Lr, isPanel as nt, isStackPanel as Mn, isThemeCompatible as Er, isWrapPanel as Br, packagesOfKind as no, resolveComponentName as _n, resolveEffectiveConfiguration as Ur, resolveIconLibraries as jr, resolvePackageDependencies as Vr, resolveTemplateChain as ea, toComponentCatalog as $n, validateBinding as qr } from "@cratis/scene.engine";
 import { Fragment as se, jsx as i, jsxs as h } from "react/jsx-runtime";
 import { ErrorBoundary as $t, IconButton as ze, Tabs as Wr, TextArea as zr } from "@cratis/components/Common";
@@ -245,16 +245,16 @@ var le = (e, t) => typeof e == "number" ? e : t;
 function Pa(e, t) {
   const n = e, o = { ...n.properties ?? {} }, a = Ze(e).map((q) => Pa(q, t)), r = o[_l];
   if (r != null && typeof r == "object") return Bl(r, n, o, a);
-  const s = o[wo], c = typeof o.legacyType == "string" && o.legacyType !== "" ? o[yo] : void 0, u = c ?? (nt(e) ? Ml(Na(e)) : t(st(e) ? e.componentName : "")), d = st(e) ? e.componentName : "", { [yo]: l, [wo]: m, [_e]: g, [$e]: b, ...f } = o, p = {};
+  const s = o[wo], d = typeof o.legacyType == "string" && o.legacyType !== "" ? o[yo] : void 0, u = d ?? (nt(e) ? Ml(Na(e)) : t(st(e) ? e.componentName : "")), c = st(e) ? e.componentName : "", { [yo]: l, [wo]: m, [_e]: g, [$e]: b, ...f } = o, p = {};
   for (const q of s?.topKeys ?? []) q in f && (p[q] = f[q], delete f[q]);
-  const v = le(g, s?.position.x ?? 0), k = le(b, s?.position.y ?? 0), j = n.name ?? "", _ = s?.emptyName === !0 && j === (c ?? "");
+  const v = le(g, s?.position.x ?? 0), k = le(b, s?.position.y ?? 0), j = n.name ?? "", _ = s?.emptyName === !0 && j === (d ?? "");
   return {
     ...El(n, s),
     ...p,
     _derivedTypeId: u ?? "externalComponent",
     id: n.id,
     ..._ ? {} : { name: j },
-    componentName: u ? u.slice(u.lastIndexOf(".") + 1) : Ta(d),
+    componentName: u ? u.slice(u.lastIndexOf(".") + 1) : Ta(c),
     properties: {
       ...f,
       canvas: {
@@ -278,22 +278,22 @@ function El(e, t) {
   return r;
 }
 function Bl(e, t, n, o) {
-  const a = { ...e }, r = e.properties ?? {}, s = r.canvas ?? {}, c = n[_e], u = n[$e];
-  (typeof c == "number" || typeof u == "number") && (e.position && typeof e.position == "object" ? a.position = {
+  const a = { ...e }, r = e.properties ?? {}, s = r.canvas ?? {}, d = n[_e], u = n[$e];
+  (typeof d == "number" || typeof u == "number") && (e.position && typeof e.position == "object" ? a.position = {
     ...e.position,
-    x: le(c, le(s.x, 0)),
+    x: le(d, le(s.x, 0)),
     y: le(u, le(s.y, 0))
   } : a.properties = {
     ...r,
     canvas: {
       ...s,
-      x: le(c, le(s.x, 0)),
+      x: le(d, le(s.x, 0)),
       y: le(u, le(s.y, 0))
     }
   }), t.size?.width !== void 0 && (a.width = t.size.width), t.size?.height !== void 0 && (a.height = t.size.height), t.name !== void 0 && t.name !== "" && t.name !== e.componentName && t.name !== e._derivedTypeId && (a.name = t.name), t.zIndex !== void 0 && "ZIndex" in e && (a.ZIndex = t.zIndex);
-  const d = e.slots ?? {};
-  return (o.length > 0 || "children" in d) && (a.slots = {
-    ...d,
+  const c = e.slots ?? {};
+  return (o.length > 0 || "children" in c) && (a.slots = {
+    ...c,
     children: o
   }), a;
 }
@@ -360,15 +360,15 @@ function Da(e, t, n) {
 }
 function Oa(e, t, n, o = 0, a = null) {
   return e.flatMap((r) => {
-    const s = n.idOf(r), c = n.childrenOf(r), u = c.length > 0 && t.has(s), d = {
+    const s = n.idOf(r), d = n.childrenOf(r), u = d.length > 0 && t.has(s), c = {
       node: r,
       id: s,
       depth: o,
       parentId: a,
-      hasChildren: c.length > 0,
+      hasChildren: d.length > 0,
       isExpanded: u
     };
-    return u ? [d, ...Oa(c, t, n, o + 1, s)] : [d];
+    return u ? [c, ...Oa(d, t, n, o + 1, s)] : [c];
   });
 }
 var ye = /* @__PURE__ */ (function(e) {
@@ -419,9 +419,9 @@ function Vl(e, t, n, o, a) {
   if (o === Re.Inside) return {
     nodeId: t,
     targetParentId: n,
-    index: a.childrenOf(r.node).filter((c) => a.idOf(c) !== t).length
+    index: a.childrenOf(r.node).filter((d) => a.idOf(d) !== t).length
   };
-  const s = r.siblings.filter((c) => a.idOf(c) !== t).findIndex((c) => a.idOf(c) === n);
+  const s = r.siblings.filter((d) => a.idOf(d) !== t).findIndex((d) => a.idOf(d) === n);
   return {
     nodeId: t,
     targetParentId: r.parent === null ? null : a.idOf(r.parent),
@@ -438,7 +438,7 @@ var xa = ({ ownership: e, label: t }) => e === Q.Local ? null : /* @__PURE__ */
   "data-ownership": e,
   children: t
 });
-function Wl({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: a, dropZone: r, onSelect: s, onToggle: c, onKeyDown: u, onDragStart: d, onDragOver: l, onDrop: m, onDragEnd: g }) {
+function Wl({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: a, dropZone: r, onSelect: s, onToggle: d, onKeyDown: u, onDragStart: c, onDragOver: l, onDrop: m, onDragEnd: g }) {
   const b = t.ownershipOf(e.node), f = lt(b, Te.Move);
   return /* @__PURE__ */ h("li", {
     role: "treeitem",
@@ -454,7 +454,7 @@ function Wl({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: a, dro
     draggable: f,
     onClick: () => s(e.id),
     onKeyDown: (p) => u(p, e.id),
-    onDragStart: () => d(e.id),
+    onDragStart: () => c(e.id),
     onDragOver: (p) => l(p, e.id),
     onDrop: (p) => m(p, e.id),
     onDragEnd: g,
@@ -466,7 +466,7 @@ function Wl({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: a, dro
         "aria-hidden": !e.hasChildren,
         disabled: !e.hasChildren,
         onClick: (p) => {
-          p.stopPropagation(), c(e.id);
+          p.stopPropagation(), d(e.id);
         },
         children: e.hasChildren ? e.isExpanded ? "▾" : "▸" : ""
       }),
@@ -488,11 +488,11 @@ var Co = {
   ArrowRight: ye.Indent
 };
 function Fa({ roots: e, adapter: t, strings: n, selectedId: o, onSelect: a, onEdit: r, onRemove: s }) {
-  const [c, u] = A(() => new Set(e.flatMap((S) => [t.idOf(S), ...t.childrenOf(S).map((I) => t.idOf(I))]))), [d, l] = A(o), [m, g] = A(), [b, f] = A(), [p, v] = A(""), k = $(() => Oa(e, c, t), [
+  const [d, u] = A(() => new Set(e.flatMap((S) => [t.idOf(S), ...t.childrenOf(S).map((I) => t.idOf(I))]))), [c, l] = A(o), [m, g] = A(), [b, f] = A(), [p, v] = A(""), k = $(() => Oa(e, d, t), [
     e,
-    c,
+    d,
     t
-  ]), j = k.some((S) => S.id === d) ? d : k[0]?.id, _ = B((S) => u((I) => {
+  ]), j = k.some((S) => S.id === c) ? c : k[0]?.id, _ = B((S) => u((I) => {
     const L = new Set(I);
     return L.delete(S) || L.add(S), L;
   }), []), q = B((S) => {
@@ -655,26 +655,26 @@ function tc(e, t) {
   const [n, o] = A(), [a, r] = A(0);
   return pe(() => {
     let s = !0;
-    return e.search().then((c) => {
+    return e.search().then((d) => {
       s && (o({
         source: e,
-        entries: c.entries,
-        diagnostics: [...e.diagnostics, ...c.diagnostics]
+        entries: d.entries,
+        diagnostics: [...e.diagnostics, ...d.diagnostics]
       }), r((u) => u + 1));
-    }).catch((c) => {
+    }).catch((d) => {
       s && (o({
         source: e,
         entries: [],
         diagnostics: e.diagnostics,
-        error: c instanceof Error ? c.message : String(c)
+        error: d instanceof Error ? d.message : String(d)
       }), r((u) => u + 1));
     }), () => {
       s = !1;
     };
   }, [e]), $(() => {
-    const s = n?.source === e ? n : void 0, c = s ? ec(s) : { status: "loading" };
+    const s = n?.source === e ? n : void 0, d = s ? ec(s) : { status: "loading" };
     return {
-      catalog: Xl(e, s?.entries ?? [], t, c),
+      catalog: Xl(e, s?.entries ?? [], t, d),
       diagnostics: s?.diagnostics ?? e.diagnostics,
       loadedVersion: a
     };
@@ -685,8 +685,8 @@ function tc(e, t) {
     a
   ]);
 }
-function Ma({ value: e, onChange: t, catalog: n, adapters: o, allowed: a, readOnly: r, disabled: s, validationMessage: c, showMessage: u = !0, invalid: d, strings: l, pickerLabels: m, placement: g, id: b, ...f }) {
-  const { catalog: p, loadedVersion: v } = tc(n, o), k = v > 0 ? Kl(n, p, e, a) : void 0, j = c ?? (k ? Jl(k, l) : void 0);
+function Ma({ value: e, onChange: t, catalog: n, adapters: o, allowed: a, readOnly: r, disabled: s, validationMessage: d, showMessage: u = !0, invalid: c, strings: l, pickerLabels: m, placement: g, id: b, ...f }) {
+  const { catalog: p, loadedVersion: v } = tc(n, o), k = v > 0 ? Kl(n, p, e, a) : void 0, j = d ?? (k ? Jl(k, l) : void 0);
   return /* @__PURE__ */ i(Jr, {
     id: b,
     value: e,
@@ -699,7 +699,7 @@ function Ma({ value: e, onChange: t, catalog: n, adapters: o, allowed: a, readOn
     allowed: a,
     readOnly: r,
     disabled: s,
-    invalid: j !== void 0 || d === !0,
+    invalid: j !== void 0 || c === !0,
     validationMessage: u ? j : void 0,
     placement: g,
     labels: {
@@ -756,7 +756,7 @@ function rc(e, t, n) {
   switch (n.kind) {
     case "add":
       return [{
-        kind: Z.AddCollectionItem,
+        kind: X.AddCollectionItem,
         ...o,
         item: {
           id: n.item.id,
@@ -766,20 +766,20 @@ function rc(e, t, n) {
       }];
     case "remove":
       return [{
-        kind: Z.RemoveCollectionItem,
+        kind: X.RemoveCollectionItem,
         ...o,
         itemId: n.item.id
       }];
     case "move":
       return [{
-        kind: Z.ReorderCollectionItem,
+        kind: X.ReorderCollectionItem,
         ...o,
         itemId: n.item.id,
         index: n.toIndex
       }];
     case "update":
       return [{
-        kind: Z.EditCollectionItem,
+        kind: X.EditCollectionItem,
         ...o,
         itemId: n.item.id,
         field: n.field,
@@ -819,11 +819,11 @@ function cc(e) {
 function dc(e, t, n, o, a) {
   const r = Bn(t).map((s) => uc(e, s, n)).filter((s) => !!s && s.outputs.length > 0);
   return {
-    dataContextPaths: Object.keys(o).sort((s, c) => s.localeCompare(c)),
+    dataContextPaths: Object.keys(o).sort((s, d) => s.localeCompare(d)),
     queryResults: a.map((s) => ({
       id: s.id,
       name: s.name,
-      fields: s.resultFields.map((c) => c.name)
+      fields: s.resultFields.map((d) => d.name)
     })),
     componentOutputs: r
   };
@@ -957,20 +957,20 @@ var Tc = (e, t) => e.descriptor.valueType === "number" && typeof t == "string" ?
 function gn(e, t, n) {
   const o = Tc(t, n);
   return t.editTarget === Nr.Instance ? o === void 0 ? {
-    kind: Z.ResetInstanceValue,
+    kind: X.ResetInstanceValue,
     component: e,
     path: t.descriptor.path
   } : {
-    kind: Z.SetInstanceValue,
+    kind: X.SetInstanceValue,
     component: e,
     path: t.descriptor.path,
     value: o
   } : o === void 0 ? {
-    kind: Z.ResetProperty,
+    kind: X.ResetProperty,
     nodeId: ie(e),
     path: t.descriptor.path
   } : {
-    kind: Z.SetProperty,
+    kind: X.SetProperty,
     nodeId: ie(e),
     path: t.descriptor.path,
     value: o
@@ -1032,13 +1032,13 @@ var Ic = (e, t) => {
       return t.unknownSource(n);
   }
 }, Rc = ({ action: e, slices: t, sources: n, strings: o, disabled: a, suggestSource: r, onChange: s }) => {
-  const c = o.properties.action, u = e ? t.find((l) => l.id === e.sliceId) : void 0, d = e ? Nc(e, t, new Set(n)) : [];
+  const d = o.properties.action, u = e ? t.find((l) => l.id === e.sliceId) : void 0, c = e ? Nc(e, t, new Set(n)) : [];
   return /* @__PURE__ */ h("fieldset", {
     className: "studio-editor-query",
     disabled: a,
     children: [
-      /* @__PURE__ */ i("legend", { children: c.label }),
-      /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: c.slice }), /* @__PURE__ */ h("select", {
+      /* @__PURE__ */ i("legend", { children: d.label }),
+      /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: d.slice }), /* @__PURE__ */ h("select", {
         value: e?.sliceId ?? "",
         onChange: (l) => {
           const m = t.find((g) => g.id === l.target.value);
@@ -1052,7 +1052,7 @@ var Ic = (e, t) => {
         children: [
           /* @__PURE__ */ i("option", {
             value: "",
-            children: c.none
+            children: d.none
           }),
           e && !u && /* @__PURE__ */ i("option", {
             value: e.sliceId,
@@ -1066,7 +1066,7 @@ var Ic = (e, t) => {
       })] }),
       e && u && /* @__PURE__ */ h(se, { children: [/* @__PURE__ */ h("div", {
         className: "studio-editor-query__group",
-        children: [/* @__PURE__ */ i("strong", { children: c.inputs }), u.inputs.map((l) => /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ h("span", { children: [c.sourceFor(l.name), l.required ? " *" : ""] }), /* @__PURE__ */ h("select", {
+        children: [/* @__PURE__ */ i("strong", { children: d.inputs }), u.inputs.map((l) => /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ h("span", { children: [d.sourceFor(l.name), l.required ? " *" : ""] }), /* @__PURE__ */ h("select", {
           value: e.inputs[l.name] ?? "",
           onChange: (m) => s({
             ...e,
@@ -1083,7 +1083,7 @@ var Ic = (e, t) => {
             children: m
           }, m))]
         })] }, l.name))]
-      }), /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: c.presentation }), /* @__PURE__ */ h("select", {
+      }), /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: d.presentation }), /* @__PURE__ */ h("select", {
         value: e.presentation,
         onChange: (l) => s({
           ...e,
@@ -1092,25 +1092,25 @@ var Ic = (e, t) => {
         children: [
           /* @__PURE__ */ i("option", {
             value: de.None,
-            children: c.presentations.none
+            children: d.presentations.none
           }),
           /* @__PURE__ */ i("option", {
             value: de.Modal,
-            children: c.presentations.modal
+            children: d.presentations.modal
           }),
           /* @__PURE__ */ i("option", {
             value: de.Drawer,
-            children: c.presentations.drawer
+            children: d.presentations.drawer
           })
         ]
       })] })] }),
-      d.length > 0 && /* @__PURE__ */ i("ul", {
+      c.length > 0 && /* @__PURE__ */ i("ul", {
         className: "studio-editor-diagnostics",
         role: "alert",
         "aria-label": o.properties.diagnostics,
-        children: d.map((l, m) => /* @__PURE__ */ i("li", {
+        children: c.map((l, m) => /* @__PURE__ */ i("li", {
           "data-severity": "error",
-          children: Ic(l, c.problems)
+          children: Ic(l, d.problems)
         }, m))
       })
     ]
@@ -1190,13 +1190,13 @@ function La(e, t, n, o, a) {
   };
 }
 var xc = ({ component: e, descriptor: t, controller: n, environment: o, strings: a, disabled: r }) => {
-  const s = $(() => Fc(o, t), [o, t]), [c, u] = A([]);
+  const s = $(() => Fc(o, t), [o, t]), [d, u] = A([]);
   return s.length === 0 ? null : /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__actions",
     children: [
       /* @__PURE__ */ i("strong", { children: a.properties.designTimeActions }),
-      s.map(({ id: d, action: l }) => {
-        const m = La(e, t, n, o, l?.descriptor.label ?? d);
+      s.map(({ id: c, action: l }) => {
+        const m = La(e, t, n, o, l?.descriptor.label ?? c);
         if (!(!l || So(() => l.isVisible(m), !0))) return null;
         const g = !r && (l ? So(() => l.isEnabled(m), !1) : !1);
         return /* @__PURE__ */ i("button", {
@@ -1212,12 +1212,12 @@ var xc = ({ component: e, descriptor: t, controller: n, environment: o, strings:
             });
             u(b.diagnostics.map((f) => typeof f == "string" ? f : f.message)), b.applied && n.applyAll(b.edits, l.descriptor.label);
           },
-          children: l?.descriptor.label ?? d
-        }, d);
+          children: l?.descriptor.label ?? c
+        }, c);
       }),
-      c.length > 0 && /* @__PURE__ */ i("ul", {
+      d.length > 0 && /* @__PURE__ */ i("ul", {
         className: "studio-editor-properties__action-messages",
-        children: c.map((d) => /* @__PURE__ */ i("li", { children: d }, d))
+        children: d.map((c) => /* @__PURE__ */ i("li", { children: c }, c))
       })
     ]
   });
@@ -1248,14 +1248,14 @@ var Mc = ({ component: e, descriptor: t, controller: n, environment: o, strings:
   const s = La(e, t, n, o, a.properties.designTimeDesigners);
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__designers",
-    children: [/* @__PURE__ */ i("strong", { children: a.properties.designTimeDesigners }), r.map(({ id: c, Designer: u }) => /* @__PURE__ */ i($t, {
+    children: [/* @__PURE__ */ i("strong", { children: a.properties.designTimeDesigners }), r.map(({ id: d, Designer: u }) => /* @__PURE__ */ i($t, {
       fallback: /* @__PURE__ */ i("p", {
         className: "studio-editor-binding__missing",
         role: "alert",
-        children: a.properties.designerFailed(c)
+        children: a.properties.designerFailed(d)
       }),
       children: /* @__PURE__ */ i(u, { context: s })
-    }, c))]
+    }, d))]
   });
 };
 function _c(e, t, n) {
@@ -1483,11 +1483,11 @@ var Hc = ({ form: e, strings: t, onChange: n }) => {
         })
       ] }),
       /* @__PURE__ */ h("fieldset", { children: [/* @__PURE__ */ i("legend", { children: t.placements }), o.fields.map((r) => {
-        const s = a.placements.find((c) => c.field === r.name) ?? r.placement;
+        const s = a.placements.find((d) => d.field === r.name) ?? r.placement;
         return /* @__PURE__ */ h("fieldset", { children: [/* @__PURE__ */ i("legend", { children: r.label || r.name }), /* @__PURE__ */ i(Jc, {
           placement: s,
           strings: t,
-          onChange: (c) => n(Wc(o, r.name, () => c))
+          onChange: (d) => n(Wc(o, r.name, () => d))
         })] }, r.name);
       })] })
     ]
@@ -1570,9 +1570,9 @@ function To(e, t) {
   };
 }
 var Kc = ({ controller: e, slices: t, strings: n, disabled: o }) => {
-  const a = e.document.screens.find((d) => d.name === ge);
+  const a = e.document.screens.find((c) => c.name === ge);
   if (!a) return null;
-  const r = a.forms ?? [], s = n.properties.forms, c = (d, l = s.label) => e.setScreenForms(d, l), u = (d, l) => c(r.map((m, g) => g === d ? l : m));
+  const r = a.forms ?? [], s = n.properties.forms, d = (c, l = s.label) => e.setScreenForms(c, l), u = (c, l) => d(r.map((m, g) => g === c ? l : m));
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__forms",
     children: [
@@ -1580,28 +1580,28 @@ var Kc = ({ controller: e, slices: t, strings: n, disabled: o }) => {
       /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: s.add }), /* @__PURE__ */ h("select", {
         value: "",
         disabled: o || t.length === 0,
-        onChange: (d) => {
-          const l = t.find((m) => m.id === d.target.value);
-          l && c([...r, No(l)], s.add);
+        onChange: (c) => {
+          const l = t.find((m) => m.id === c.target.value);
+          l && d([...r, No(l)], s.add);
         },
         children: [/* @__PURE__ */ i("option", {
           value: "",
           children: s.chooseCommand
-        }), t.map((d) => /* @__PURE__ */ i("option", {
-          value: d.id,
-          children: d.name
-        }, d.id))]
+        }), t.map((c) => /* @__PURE__ */ i("option", {
+          value: c.id,
+          children: c.name
+        }, c.id))]
       })] }),
-      r.map((d, l) => {
-        const m = t.find((f) => f.name === d.forCommand), g = m?.inputs.map((f) => f.name) ?? d.fields.map((f) => f.sourceProperty ?? f.name), b = Zc(d, m) === ce.Auto;
+      r.map((c, l) => {
+        const m = t.find((f) => f.name === c.forCommand), g = m?.inputs.map((f) => f.name) ?? c.fields.map((f) => f.sourceProperty ?? f.name), b = Zc(c, m) === ce.Auto;
         return /* @__PURE__ */ h("fieldset", {
           className: "studio-editor-properties__form",
           disabled: o,
           children: [
-            /* @__PURE__ */ i("legend", { children: d.name }),
+            /* @__PURE__ */ i("legend", { children: c.name }),
             /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: s.mode }), /* @__PURE__ */ h("select", {
               value: b ? ce.Auto : ce.Manual,
-              onChange: (f) => m && u(l, f.target.value === ce.Auto ? No(m) : Qc(d, m)),
+              onChange: (f) => m && u(l, f.target.value === ce.Auto ? No(m) : Qc(c, m)),
               children: [/* @__PURE__ */ i("option", {
                 value: ce.Auto,
                 children: s.auto
@@ -1611,16 +1611,16 @@ var Kc = ({ controller: e, slices: t, strings: n, disabled: o }) => {
               })]
             })] }),
             /* @__PURE__ */ i(Vc, {
-              form: d,
+              form: c,
               commandProperties: g
             }),
             /* @__PURE__ */ h("div", {
               className: "studio-editor-properties__form-fields",
-              children: [d.fields.map((f, p) => /* @__PURE__ */ h("fieldset", { children: [
+              children: [c.fields.map((f, p) => /* @__PURE__ */ h("fieldset", { children: [
                 /* @__PURE__ */ i("legend", { children: f.name }),
                 /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: s.fieldLabel }), /* @__PURE__ */ i("input", {
                   value: f.label ?? "",
-                  onChange: (v) => u(l, Po(d, p, {
+                  onChange: (v) => u(l, Po(c, p, {
                     ...f,
                     label: v.target.value || void 0
                   }))
@@ -1628,7 +1628,7 @@ var Kc = ({ controller: e, slices: t, strings: n, disabled: o }) => {
                 /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: s.sourceProperty }), /* @__PURE__ */ i("input", {
                   list: `form-${l}-sources`,
                   value: f.sourceProperty ?? "",
-                  onChange: (v) => u(l, Po(d, p, {
+                  onChange: (v) => u(l, Po(c, p, {
                     ...f,
                     sourceProperty: v.target.value || void 0
                   }))
@@ -1639,17 +1639,17 @@ var Kc = ({ controller: e, slices: t, strings: n, disabled: o }) => {
               })]
             }),
             !b && /* @__PURE__ */ i(Hc, {
-              form: d,
+              form: c,
               strings: s,
               onChange: (f) => u(l, f)
             }),
             /* @__PURE__ */ i("button", {
               type: "button",
-              onClick: () => c(r.filter((f, p) => p !== l), s.remove),
+              onClick: () => d(r.filter((f, p) => p !== l), s.remove),
               children: s.remove
             })
           ]
-        }, `${d.name}:${l}`);
+        }, `${c.name}:${l}`);
       })
     ]
   });
@@ -1688,11 +1688,11 @@ function Po(e, t, n) {
 var U = /* @__PURE__ */ (function(e) {
   return e.String = "string", e.Number = "number", e.Boolean = "boolean", e.Null = "null", e.Json = "json", e;
 })(U || {}), Xc = ({ property: e, sources: t, strings: n, disabled: o, onChange: a }) => {
-  const r = n.properties.binding, s = _a(e.effectiveValue) ? e.effectiveValue : void 0, c = s ? void 0 : nd(e.effectiveValue), u = fc(e), d = s ?? u, l = td(d, e.descriptor.acceptedBindingKinds?.length ? e.descriptor.acceptedBindingKinds : jn, t, r), m = d.query ? t.queryResults.find((p) => p.id === d.query || p.name === d.query) : void 0, g = d.componentId ? t.componentOutputs.find((p) => p.componentId === d.componentId) : void 0, b = (p) => a(od({
-    ...d,
+  const r = n.properties.binding, s = _a(e.effectiveValue) ? e.effectiveValue : void 0, d = s ? void 0 : nd(e.effectiveValue), u = fc(e), c = s ?? u, l = td(c, e.descriptor.acceptedBindingKinds?.length ? e.descriptor.acceptedBindingKinds : jn, t, r), m = c.query ? t.queryResults.find((p) => p.id === c.query || p.name === c.query) : void 0, g = c.componentId ? t.componentOutputs.find((p) => p.componentId === c.componentId) : void 0, b = (p) => a(od({
+    ...c,
     ...p
   })), f = () => a(void 0);
-  return c !== void 0 ? /* @__PURE__ */ h("fieldset", {
+  return d !== void 0 ? /* @__PURE__ */ h("fieldset", {
     className: "studio-editor-binding",
     disabled: o,
     children: [
@@ -1700,7 +1700,7 @@ var U = /* @__PURE__ */ (function(e) {
       /* @__PURE__ */ h("div", {
         className: "studio-editor-binding__missing",
         role: "alert",
-        children: [/* @__PURE__ */ i("p", { children: r.unsupportedValue }), /* @__PURE__ */ i("pre", { children: JSON.stringify(c, void 0, 2) ?? "" })]
+        children: [/* @__PURE__ */ i("p", { children: r.unsupportedValue }), /* @__PURE__ */ i("pre", { children: JSON.stringify(d, void 0, 2) ?? "" })]
       }),
       /* @__PURE__ */ h("div", {
         className: "studio-editor-binding__row",
@@ -1724,8 +1724,8 @@ var U = /* @__PURE__ */ (function(e) {
         className: "studio-editor-binding__row",
         children: [
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.source }), /* @__PURE__ */ i("select", {
-            value: d.kind ?? E.DataContext,
-            onChange: (p) => b(ad(p.target.value, d)),
+            value: c.kind ?? E.DataContext,
+            onChange: (p) => b(ad(p.target.value, c)),
             children: l.map((p) => /* @__PURE__ */ i("option", {
               value: p.kind,
               disabled: p.disabled,
@@ -1733,7 +1733,7 @@ var U = /* @__PURE__ */ (function(e) {
             }, p.kind))
           })] }),
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.mode }), /* @__PURE__ */ h("select", {
-            value: d.mode ?? "",
+            value: c.mode ?? "",
             onChange: (p) => b({ mode: p.target.value === "" ? void 0 : p.target.value }),
             children: [/* @__PURE__ */ i("option", {
               value: "",
@@ -1744,7 +1744,7 @@ var U = /* @__PURE__ */ (function(e) {
             }, p))]
           })] }),
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.nullBehavior }), /* @__PURE__ */ h("select", {
-            value: d.nullBehavior ?? "",
+            value: c.nullBehavior ?? "",
             onChange: (p) => b({ nullBehavior: p.target.value === "" ? void 0 : p.target.value }),
             children: [/* @__PURE__ */ i("option", {
               value: "",
@@ -1755,7 +1755,7 @@ var U = /* @__PURE__ */ (function(e) {
             }, p))]
           })] }),
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.expectedType }), /* @__PURE__ */ h("select", {
-            value: d.expectedValueType ?? "",
+            value: c.expectedValueType ?? "",
             onChange: (p) => b({ expectedValueType: p.target.value === "" ? void 0 : p.target.value }),
             children: [/* @__PURE__ */ i("option", {
               value: "",
@@ -1775,16 +1775,16 @@ var U = /* @__PURE__ */ (function(e) {
           p.reason
         ]
       }, `${p.kind}:reason`)),
-      He(d) === E.DataContext && /* @__PURE__ */ i(Xt, {
+      He(c) === E.DataContext && /* @__PURE__ */ i(Xt, {
         id: `${e.descriptor.path}-data-context-paths`,
         label: r.path,
-        value: d.path,
+        value: c.path,
         options: t.dataContextPaths,
         onChange: (p) => b({ path: p })
       }),
-      He(d) === E.QueryResult && /* @__PURE__ */ h(se, { children: [
+      He(c) === E.QueryResult && /* @__PURE__ */ h(se, { children: [
         /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.query }), /* @__PURE__ */ h("select", {
-          value: d.query ?? "",
+          value: c.query ?? "",
           onChange: (p) => b({
             query: p.target.value,
             path: ""
@@ -1794,9 +1794,9 @@ var U = /* @__PURE__ */ (function(e) {
               value: "",
               children: r.noSource
             }),
-            d.query && !m && /* @__PURE__ */ i("option", {
-              value: d.query,
-              children: r.missingQuery(d.query)
+            c.query && !m && /* @__PURE__ */ i("option", {
+              value: c.query,
+              children: r.missingQuery(c.query)
             }),
             t.queryResults.map((p) => /* @__PURE__ */ i("option", {
               value: p.id,
@@ -1807,19 +1807,19 @@ var U = /* @__PURE__ */ (function(e) {
         /* @__PURE__ */ i(Xt, {
           id: `${e.descriptor.path}-query-paths`,
           label: r.path,
-          value: d.path,
+          value: c.path,
           options: m?.fields ?? [],
           onChange: (p) => b({ path: p })
         }),
-        d.query && !m && /* @__PURE__ */ i("p", {
+        c.query && !m && /* @__PURE__ */ i("p", {
           className: "studio-editor-binding__missing",
           role: "alert",
-          children: r.missingQuery(d.query)
+          children: r.missingQuery(c.query)
         })
       ] }),
-      He(d) === E.ComponentProperty && /* @__PURE__ */ h(se, { children: [
+      He(c) === E.ComponentProperty && /* @__PURE__ */ h(se, { children: [
         /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.component }), /* @__PURE__ */ h("select", {
-          value: d.componentId ?? "",
+          value: c.componentId ?? "",
           onChange: (p) => b({
             componentId: p.target.value,
             componentPropertyPath: "",
@@ -1830,9 +1830,9 @@ var U = /* @__PURE__ */ (function(e) {
               value: "",
               children: r.noSource
             }),
-            d.componentId && !g && /* @__PURE__ */ i("option", {
-              value: d.componentId,
-              children: r.missingComponent(d.componentId)
+            c.componentId && !g && /* @__PURE__ */ i("option", {
+              value: c.componentId,
+              children: r.missingComponent(c.componentId)
             }),
             t.componentOutputs.map((p) => /* @__PURE__ */ h("option", {
               value: p.componentId,
@@ -1848,28 +1848,28 @@ var U = /* @__PURE__ */ (function(e) {
         /* @__PURE__ */ i(Xt, {
           id: `${e.descriptor.path}-component-paths`,
           label: r.componentProperty,
-          value: d.componentPropertyPath ?? d.path,
+          value: c.componentPropertyPath ?? c.path,
           options: g?.outputs.map((p) => p.path) ?? [],
           onChange: (p) => b({
             componentPropertyPath: p,
             path: p
           })
         }),
-        d.componentId && !g && /* @__PURE__ */ i("p", {
+        c.componentId && !g && /* @__PURE__ */ i("p", {
           className: "studio-editor-binding__missing",
           role: "alert",
-          children: r.missingComponent(d.componentId)
+          children: r.missingComponent(c.componentId)
         })
       ] }),
-      He(d) === E.Literal && /* @__PURE__ */ i(ed, {
-        value: d.value,
-        targetType: d.expectedValueType ?? e.descriptor.valueType,
+      He(c) === E.Literal && /* @__PURE__ */ i(ed, {
+        value: c.value,
+        targetType: c.expectedValueType ?? e.descriptor.valueType,
         strings: r,
         onChange: (p) => b({
           value: p,
           path: ""
         })
-      }, et(d.value, d.expectedValueType ?? e.descriptor.valueType)),
+      }, et(c.value, c.expectedValueType ?? e.descriptor.valueType)),
       s && /* @__PURE__ */ i("button", {
         type: "button",
         onClick: f,
@@ -1889,7 +1889,7 @@ var U = /* @__PURE__ */ (function(e) {
     children: o.map((r) => /* @__PURE__ */ i("option", { value: r }, r))
   })
 ] }), ed = ({ value: e, targetType: t, strings: n, onChange: o }) => {
-  const a = vn(e, t), r = et(e, t), s = te(r), [c, u] = A(a), [d, l] = A(() => en(e, a)), [m, g] = A();
+  const a = vn(e, t), r = et(e, t), s = Z(r), [d, u] = A(a), [c, l] = A(() => en(e, a)), [m, g] = A();
   pe(() => {
     const f = et(e, t);
     if (f === s.current) return;
@@ -1905,7 +1905,7 @@ var U = /* @__PURE__ */ (function(e) {
     className: "studio-editor-binding__literal",
     children: [
       /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalType }), /* @__PURE__ */ h("select", {
-        value: c,
+        value: d,
         onChange: (f) => b(f.target.value),
         children: [
           /* @__PURE__ */ i("option", {
@@ -1930,16 +1930,16 @@ var U = /* @__PURE__ */ (function(e) {
           })
         ]
       })] }),
-      c === U.String && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("input", {
+      d === U.String && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("input", {
         value: typeof e == "string" ? e : "",
         onChange: (f) => o(f.target.value)
       })] }),
-      c === U.Number && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("input", {
+      d === U.Number && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("input", {
         type: "number",
         value: typeof e == "number" ? String(e) : "",
         onChange: (f) => o(f.target.value === "" ? void 0 : Number(f.target.value))
       })] }),
-      c === U.Boolean && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ h("select", {
+      d === U.Boolean && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ h("select", {
         value: e === !0 ? "true" : "false",
         onChange: (f) => o(f.target.value === "true"),
         children: [/* @__PURE__ */ i("option", {
@@ -1950,9 +1950,9 @@ var U = /* @__PURE__ */ (function(e) {
           children: "false"
         })]
       })] }),
-      c === U.Null && /* @__PURE__ */ i("p", { children: n.literalNull }),
-      c === U.Json && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("textarea", {
-        value: d,
+      d === U.Null && /* @__PURE__ */ i("p", { children: n.literalNull }),
+      d === U.Json && /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.literalValue }), /* @__PURE__ */ i("textarea", {
+        value: c,
         onChange: (f) => {
           const p = f.target.value;
           l(p);
@@ -1975,12 +1975,12 @@ var U = /* @__PURE__ */ (function(e) {
 function td(e, t, n, o) {
   const a = He(e);
   return jn.map((r) => {
-    const s = t.includes(r), c = r === E.QueryResult && n.queryResults.length === 0 || r === E.ComponentProperty && n.componentOutputs.length === 0;
+    const s = t.includes(r), d = r === E.QueryResult && n.queryResults.length === 0 || r === E.ComponentProperty && n.componentOutputs.length === 0;
     return {
       kind: r,
       label: id(r, o.sources),
-      disabled: r !== a && (!s || c),
-      reason: s ? c ? o.unavailableSource : void 0 : o.incompatibleSource
+      disabled: r !== a && (!s || d),
+      reason: s ? d ? o.unavailableSource : void 0 : o.incompatibleSource
     };
   });
 }
@@ -2149,7 +2149,7 @@ function Io(e, t, n, o) {
   };
 }
 var fd = (e) => e.origin.map((t) => t.name).join(" / "), gd = ({ property: e, candidates: t, scope: n, strings: o, disabled: a, onChange: r }) => {
-  const s = o.properties.query, [c, u] = A(), d = ld(e.effectiveValue) ? e.effectiveValue : void 0, l = c ?? d, m = l ? t.find((v) => v.id === l.queryId) : void 0, g = l ? Io(e.descriptor, m, l, n).diagnostics : [], b = (v) => {
+  const s = o.properties.query, [d, u] = A(), c = ld(e.effectiveValue) ? e.effectiveValue : void 0, l = d ?? c, m = l ? t.find((v) => v.id === l.queryId) : void 0, g = l ? Io(e.descriptor, m, l, n).diagnostics : [], b = (v) => {
     if (!v) {
       u(void 0), r(void 0);
       return;
@@ -2250,26 +2250,26 @@ function vd(e, t) {
   }
 }
 var bd = ({ outlets: e, disabled: t, strings: n, onChange: o }) => {
-  const a = (u, d) => o(e.map((l, m) => m === u ? yd(d) : l)), r = (u) => o(e.filter((d, l) => l !== u)), s = (u, d) => o(wd(e, u, d)), c = () => o([...e, { name: Cd(e, n.newOutletName) }]);
+  const a = (u, c) => o(e.map((l, m) => m === u ? yd(c) : l)), r = (u) => o(e.filter((c, l) => l !== u)), s = (u, c) => o(wd(e, u, c)), d = () => o([...e, { name: Cd(e, n.newOutletName) }]);
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-outlets",
     children: [
       /* @__PURE__ */ i("strong", { children: n.label }),
-      e.map((u, d) => /* @__PURE__ */ h("fieldset", {
+      e.map((u, c) => /* @__PURE__ */ h("fieldset", {
         className: "studio-editor-outlets__item",
         disabled: t,
         children: [
           /* @__PURE__ */ i("legend", { children: u.name || n.unnamed }),
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.name }), /* @__PURE__ */ i("input", {
             value: u.name,
-            onChange: (l) => a(d, {
+            onChange: (l) => a(c, {
               ...u,
               name: l.target.value
             })
           })] }),
           /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: n.description }), /* @__PURE__ */ i("input", {
             value: u.description ?? "",
-            onChange: (l) => a(d, {
+            onChange: (l) => a(c, {
               ...u,
               description: l.target.value || void 0
             })
@@ -2279,29 +2279,29 @@ var bd = ({ outlets: e, disabled: t, strings: n, onChange: o }) => {
             children: [
               /* @__PURE__ */ i("button", {
                 type: "button",
-                disabled: d === 0,
-                onClick: () => s(d, d - 1),
+                disabled: c === 0,
+                onClick: () => s(c, c - 1),
                 children: n.moveUp
               }),
               /* @__PURE__ */ i("button", {
                 type: "button",
-                disabled: d === e.length - 1,
-                onClick: () => s(d, d + 1),
+                disabled: c === e.length - 1,
+                onClick: () => s(c, c + 1),
                 children: n.moveDown
               }),
               /* @__PURE__ */ i("button", {
                 type: "button",
-                onClick: () => r(d),
+                onClick: () => r(c),
                 children: n.remove
               })
             ]
           })
         ]
-      }, `${u.name}:${d}`)),
+      }, `${u.name}:${c}`)),
       /* @__PURE__ */ i("button", {
         type: "button",
         disabled: t,
-        onClick: c,
+        onClick: d,
         children: n.add
       })
     ]
@@ -2330,21 +2330,21 @@ var xt = /* @__PURE__ */ (function(e) {
 })({});
 function Sd(e, t, n) {
   const o = n.trim().toLocaleLowerCase(), a = /* @__PURE__ */ new Map();
-  for (const s of e) for (const c of s.screenTemplates ?? []) a.set(c.name, {
-    template: c,
+  for (const s of e) for (const d of s.screenTemplates ?? []) a.set(d.name, {
+    template: d,
     packageName: s.manifest.name,
-    label: c.displayName ?? c.name,
-    ...Td(c, t)
+    label: d.displayName ?? d.name,
+    ...Td(d, t)
   });
   const r = /* @__PURE__ */ new Map();
   for (const s of a.values()) {
     if (o && !Nd(s, o)) continue;
-    const c = s.template.metadata?.category ?? "";
-    r.set(c, [...r.get(c) ?? [], s]);
+    const d = s.template.metadata?.category ?? "";
+    r.set(d, [...r.get(d) ?? [], s]);
   }
-  return [...r.entries()].map(([s, c]) => ({
+  return [...r.entries()].map(([s, d]) => ({
     name: s,
-    entries: c.sort((u, d) => u.label.localeCompare(d.label))
+    entries: d.sort((u, c) => u.label.localeCompare(c.label))
   })).sort(Pd);
 }
 function kd(e, t) {
@@ -2372,11 +2372,11 @@ function Pd(e, t) {
   return e.name === "" ? t.name === "" ? 0 : 1 : t.name === "" ? -1 : e.name.localeCompare(t.name);
 }
 var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelect: r }) => {
-  const [s, c] = A(""), u = Qo(), d = $(() => Sd(e, t, s), [
+  const [s, d] = A(""), u = Qo(), c = $(() => Sd(e, t, s), [
     e,
     t,
     s
-  ]), l = d.some((m) => m.entries.some((g) => g.template.name === n));
+  ]), l = c.some((m) => m.entries.some((g) => g.template.name === n));
   return /* @__PURE__ */ h("fieldset", {
     className: "studio-editor-template-browser",
     disabled: o,
@@ -2388,7 +2388,7 @@ var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelec
         "aria-label": a.search,
         placeholder: a.search,
         value: s,
-        onChange: (m) => c(m.target.value)
+        onChange: (m) => d(m.target.value)
       }),
       /* @__PURE__ */ h("label", {
         className: "studio-editor-template-browser__entry",
@@ -2406,11 +2406,11 @@ var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelec
         className: "studio-editor-binding__missing",
         children: a.missing(n)
       }),
-      d.length === 0 && /* @__PURE__ */ i("p", {
+      c.length === 0 && /* @__PURE__ */ i("p", {
         className: "studio-editor-template-browser__empty",
         children: a.noMatches
       }),
-      d.map((m) => /* @__PURE__ */ h("div", {
+      c.map((m) => /* @__PURE__ */ h("div", {
         className: "studio-editor-template-browser__category",
         role: "group",
         "aria-label": m.name || a.uncategorized,
@@ -2444,9 +2444,9 @@ var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelec
 }, Rd = ({ controller: e, environment: t, strings: n, disabled: o, authoringTemplate: a }) => {
   const r = n.properties.templates;
   if (a) {
-    const c = e.document.screenTemplates.find((d) => d.name === a);
-    if (!c) return null;
-    const u = c.metadata ?? {};
+    const d = e.document.screenTemplates.find((c) => c.name === a);
+    if (!d) return null;
+    const u = d.metadata ?? {};
     return /* @__PURE__ */ h("section", {
       className: "studio-editor-properties__templates",
       children: [
@@ -2454,36 +2454,36 @@ var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelec
         /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.category }), /* @__PURE__ */ i("input", {
           value: u.category ?? "",
           disabled: o,
-          onChange: (d) => e.setScreenTemplateMetadata(a, Ro({
+          onChange: (c) => e.setScreenTemplateMetadata(a, Ro({
             ...u,
-            category: d.target.value || void 0
+            category: c.target.value || void 0
           }), r.category)
         })] }),
         /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: r.scope }), /* @__PURE__ */ h("select", {
           value: u.scopes?.[0] ?? "",
           disabled: o,
-          onChange: (d) => e.setScreenTemplateMetadata(a, Ro({
+          onChange: (c) => e.setScreenTemplateMetadata(a, Ro({
             ...u,
-            scopes: d.target.value ? [d.target.value] : void 0
+            scopes: c.target.value ? [c.target.value] : void 0
           }), r.scope),
           children: [/* @__PURE__ */ i("option", {
             value: "",
             children: r.anyScope
-          }), Object.values(Xo).map((d) => /* @__PURE__ */ i("option", {
-            value: d,
-            children: d
-          }, d))]
+          }), Object.values(Xo).map((c) => /* @__PURE__ */ i("option", {
+            value: c,
+            children: c
+          }, c))]
         })] }),
         /* @__PURE__ */ i(bd, {
-          outlets: c.outlets ?? [],
+          outlets: d.outlets ?? [],
           disabled: o,
           strings: n.properties.outlets,
-          onChange: (d) => e.setScreenTemplateOutlets(a, d, n.properties.outlets.label)
+          onChange: (c) => e.setScreenTemplateOutlets(a, c, n.properties.outlets.label)
         })
       ]
     });
   }
-  const s = e.document.screens.find((c) => c.name === ge);
+  const s = e.document.screens.find((d) => d.name === ge);
   return s ? /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__templates",
     children: [/* @__PURE__ */ i("strong", { children: r.label }), /* @__PURE__ */ i(Id, {
@@ -2492,7 +2492,7 @@ var Id = ({ packages: e, scope: t, selected: n, disabled: o, strings: a, onSelec
       selected: s.screenTemplate,
       disabled: o,
       strings: r,
-      onSelect: (c) => e.setScreenTemplate(t.runtime.bundles.flatMap((u) => u.screenTemplates ?? []).find((u) => u.name === c), r.choose)
+      onSelect: (d) => e.setScreenTemplate(t.runtime.bundles.flatMap((u) => u.screenTemplates ?? []).find((u) => u.name === d), r.choose)
     })]
   }) : null;
 };
@@ -2501,36 +2501,36 @@ function Ro(e) {
   return Object.keys(t).length > 0 ? t : void 0;
 }
 var Dd = ({ templates: e, referencedTemplates: t, disabled: n, strings: o, onChange: a }) => {
-  const r = (d, l) => a(e.map((m, g) => g === d ? xd(l) : m)), s = (d) => a(e.filter((l, m) => m !== d)), c = (d, l) => a(Fd(e, d, l)), u = () => a([...e, Od(Md(e, o.newTemplateName))]);
+  const r = (c, l) => a(e.map((m, g) => g === c ? xd(l) : m)), s = (c) => a(e.filter((l, m) => m !== c)), d = (c, l) => a(Fd(e, c, l)), u = () => a([...e, Od(Md(e, o.newTemplateName))]);
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-dialog-templates",
     children: [
       /* @__PURE__ */ i("strong", { children: o.label }),
-      e.map((d, l) => {
-        const m = t.has(d.name);
+      e.map((c, l) => {
+        const m = t.has(c.name);
         return /* @__PURE__ */ h("fieldset", {
           className: "studio-editor-dialog-templates__item",
           disabled: n,
           children: [
-            /* @__PURE__ */ i("legend", { children: d.displayName || d.name || o.unnamed }),
+            /* @__PURE__ */ i("legend", { children: c.displayName || c.name || o.unnamed }),
             /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: o.name }), /* @__PURE__ */ i("input", {
-              value: d.name,
+              value: c.name,
               onChange: (g) => r(l, {
-                ...d,
+                ...c,
                 name: g.target.value
               })
             })] }),
             /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: o.displayName }), /* @__PURE__ */ i("input", {
-              value: d.displayName ?? "",
+              value: c.displayName ?? "",
               onChange: (g) => r(l, {
-                ...d,
+                ...c,
                 displayName: g.target.value || void 0
               })
             })] }),
             /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: o.description }), /* @__PURE__ */ i("input", {
-              value: d.description ?? "",
+              value: c.description ?? "",
               onChange: (g) => r(l, {
-                ...d,
+                ...c,
                 description: g.target.value || void 0
               })
             })] }),
@@ -2540,13 +2540,13 @@ var Dd = ({ templates: e, referencedTemplates: t, disabled: n, strings: o, onCha
                 /* @__PURE__ */ i("button", {
                   type: "button",
                   disabled: l === 0,
-                  onClick: () => c(l, l - 1),
+                  onClick: () => d(l, l - 1),
                   children: o.moveUp
                 }),
                 /* @__PURE__ */ i("button", {
                   type: "button",
                   disabled: l === e.length - 1,
-                  onClick: () => c(l, l + 1),
+                  onClick: () => d(l, l + 1),
                   children: o.moveDown
                 }),
                 /* @__PURE__ */ i("button", {
@@ -2559,7 +2559,7 @@ var Dd = ({ templates: e, referencedTemplates: t, disabled: n, strings: o, onCha
               ]
             })
           ]
-        }, `${d.name}:${l}`);
+        }, `${c.name}:${l}`);
       }),
       /* @__PURE__ */ i("button", {
         type: "button",
@@ -2623,7 +2623,7 @@ function rt(e, t) {
   for (const o of Object.values(n)) rt(o, t);
 }
 var Ad = (e, t, n = !1) => ({
-  kind: Z.ChangeLayoutType,
+  kind: X.ChangeLayoutType,
   nodeId: e,
   to: t,
   ...n ? { acceptLoss: !0 } : {}
@@ -2644,9 +2644,9 @@ function Ld(e, t, n) {
   };
 }
 var Ed = ({ inspection: e, controller: t, strings: n, disabled: o }) => {
-  const a = n.properties, [r, s] = A(), c = to(t.context.catalog, e.typeId), u = c?.capabilities.convertibleTo ?? [];
-  if (!c || u.length === 0) return null;
-  const d = (l) => {
+  const a = n.properties, [r, s] = A(), d = to(t.context.catalog, e.typeId), u = d?.capabilities.convertibleTo ?? [];
+  if (!d || u.length === 0) return null;
+  const c = (l) => {
     const m = t.tryApply(l, a.changeLayout), g = Ld(l, m.applied, m.diagnostics);
     s(g.kind === "confirm" ? {
       lost: g.lost,
@@ -2658,10 +2658,10 @@ var Ed = ({ inspection: e, controller: t, strings: n, disabled: o }) => {
     children: [/* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: a.layoutType }), /* @__PURE__ */ h("select", {
       value: e.typeId,
       disabled: o,
-      onChange: (l) => d(Ad(e.nodeId, l.target.value)),
+      onChange: (l) => c(Ad(e.nodeId, l.target.value)),
       children: [/* @__PURE__ */ i("option", {
         value: e.typeId,
-        children: c.label
+        children: d.label
       }), u.map((l) => /* @__PURE__ */ i("option", {
         value: l,
         children: to(t.context.catalog, l)?.label ?? l
@@ -2698,14 +2698,14 @@ function Bd(e, t, n, o = {}) {
     ...o.editableFields && o.editableFields.length > 0 ? { editableFields: o.editableFields } : {}
   };
   return {
-    kind: Z.ExposeProperty,
+    kind: X.ExposeProperty,
     owner: e,
     property: a
   };
 }
 function Ud(e, t, n) {
   return {
-    kind: Z.UnexposeProperty,
+    kind: X.UnexposeProperty,
     owner: e,
     component: t,
     path: n
@@ -2719,19 +2719,19 @@ var jd = (e, t, n, o) => e.exposures.some((a) => a.owner === t && a.properties.s
 ], qd = ({ inspection: e, componentId: t, controller: n, strings: o, authoringTemplate: a }) => {
   const r = o.properties;
   if (a === void 0) return null;
-  const s = e.properties.filter((c) => c.descriptor.valueType !== x.Object && c.descriptor.group !== "Placement");
+  const s = e.properties.filter((d) => d.descriptor.valueType !== x.Object && d.descriptor.group !== "Placement");
   return s.length === 0 ? null : /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__exposure",
-    children: [/* @__PURE__ */ i("strong", { children: r.exposure }), /* @__PURE__ */ i("ul", { children: s.map((c) => {
-      const u = c.descriptor.path, d = jd(n.document, a, t, u), l = c.descriptor.valueType === x.Collection;
+    children: [/* @__PURE__ */ i("strong", { children: r.exposure }), /* @__PURE__ */ i("ul", { children: s.map((d) => {
+      const u = d.descriptor.path, c = jd(n.document, a, t, u), l = d.descriptor.valueType === x.Collection;
       return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ h("label", { children: [
         /* @__PURE__ */ i("input", {
           type: "checkbox",
-          checked: d,
-          onChange: (m) => n.apply(m.target.checked ? Bd(a, t, u, l ? { operations: Vd } : {}) : Ud(a, t, u), d ? r.unexposeProperty : r.exposeProperty)
+          checked: c,
+          onChange: (m) => n.apply(m.target.checked ? Bd(a, t, u, l ? { operations: Vd } : {}) : Ud(a, t, u), c ? r.unexposeProperty : r.exposeProperty)
         }),
-        /* @__PURE__ */ i("span", { children: c.descriptor.label }),
-        d && /* @__PURE__ */ i("em", { children: r.exposedToScopes })
+        /* @__PURE__ */ i("span", { children: d.descriptor.label }),
+        c && /* @__PURE__ */ i("em", { children: r.exposedToScopes })
       ] }) }, u);
     }) })]
   });
@@ -2767,31 +2767,31 @@ var Jd = ({ properties: e, controller: t, catalog: n, adapters: o, diagnostics:
   const s = r.properties;
   return /* @__PURE__ */ i("section", {
     className: "studio-editor-properties__icons",
-    children: e.map((c) => {
-      const { path: u, label: d } = c.descriptor, l = Or(c.effectiveValue) ? c.effectiveValue : void 0, m = `studio-editor-icon-${u}`;
+    children: e.map((d) => {
+      const { path: u, label: c } = d.descriptor, l = Or(d.effectiveValue) ? d.effectiveValue : void 0, m = `studio-editor-icon-${u}`;
       return /* @__PURE__ */ h("div", {
         className: "studio-editor-properties__icon",
         children: [
           /* @__PURE__ */ i("span", {
             id: m,
             className: "studio-editor-properties__icon-label",
-            children: d
+            children: c
           }),
           /* @__PURE__ */ i(Ma, {
             value: l,
-            onChange: (g) => t.setProperty(c, g),
+            onChange: (g) => t.setProperty(d, g),
             catalog: n,
             adapters: o,
-            allowed: Ba(c.descriptor.choices),
-            readOnly: !c.editable,
+            allowed: Ba(d.descriptor.choices),
+            readOnly: !d.editable,
             validationMessage: ja(a, u),
             strings: s.icon,
             pickerLabels: s.iconPickerLabels,
             "aria-labelledby": m
           }),
-          !c.editable && c.reason && /* @__PURE__ */ i("p", {
+          !d.editable && d.reason && /* @__PURE__ */ i("p", {
             className: "studio-editor-properties__hint",
-            children: c.reason
+            children: d.reason
           })
         ]
       }, u);
@@ -2934,8 +2934,8 @@ function au(e, t, n) {
     }
   };
 }
-var ru = (e) => e.key === "Enter" && (e.ctrlKey || e.metaKey), iu = ({ label: e, description: t, value: n, onApply: o, readOnly: a = !1, reason: r, required: s = !1, strings: c, rows: u = 6 }) => {
-  const d = au(n, s, o), l = Qo(), m = d.outcome.kind === ae.Invalid ? Kd(d.outcome.problem, c) : void 0, g = [
+var ru = (e) => e.key === "Enter" && (e.ctrlKey || e.metaKey), iu = ({ label: e, description: t, value: n, onApply: o, readOnly: a = !1, reason: r, required: s = !1, strings: d, rows: u = 6 }) => {
+  const c = au(n, s, o), l = Qo(), m = c.outcome.kind === ae.Invalid ? Kd(c.outcome.problem, d) : void 0, g = [
     t && `${l}-description`,
     m && `${l}-problem`,
     r && `${l}-reason`
@@ -2956,17 +2956,17 @@ var ru = (e) => e.key === "Enter" && (e.ctrlKey || e.metaKey), iu = ({ label: e,
       /* @__PURE__ */ i(zr, {
         id: l,
         className: "studio-editor-json__text",
-        value: d.text,
+        value: c.text,
         rows: u,
         readOnly: a,
         invalid: m !== void 0,
-        placeholder: a ? void 0 : c.placeholder,
+        placeholder: a ? void 0 : d.placeholder,
         spellCheck: !1,
         "aria-describedby": g,
-        onChange: d.edit,
-        onBlur: a ? void 0 : d.commit,
+        onChange: c.edit,
+        onBlur: a ? void 0 : c.commit,
         onKeyDown: (b) => {
-          a || (ru(b) && d.commit(), b.key === "Escape" && d.revert());
+          a || (ru(b) && c.commit(), b.key === "Escape" && c.revert());
         }
       }),
       m && /* @__PURE__ */ i("p", {
@@ -2994,14 +2994,14 @@ var ru = (e) => e.key === "Enter" && (e.ctrlKey || e.metaKey), iu = ({ label: e,
     strings: o,
     onApply: (r) => n(a, r)
   }, `${t}:${a.descriptor.path}`))
-}), lu = ({ id: e, label: t, value: n, destinations: o, outlets: a, dialogTemplates: r, problems: s = [], disabled: c, strings: u, onChange: d }) => {
-  const l = n ?? {}, m = (p) => d(uu({
+}), lu = ({ id: e, label: t, value: n, destinations: o, outlets: a, dialogTemplates: r, problems: s = [], disabled: d, strings: u, onChange: c }) => {
+  const l = n ?? {}, m = (p) => c(uu({
     ...l,
     ...p
-  })), g = () => d(void 0), b = `${e}-outlets`, f = `${e}-dialogs`;
+  })), g = () => c(void 0), b = `${e}-outlets`, f = `${e}-dialogs`;
   return /* @__PURE__ */ h("fieldset", {
     className: "studio-editor-destination",
-    disabled: c,
+    disabled: d,
     children: [
       /* @__PURE__ */ i("legend", { children: t || u.label }),
       /* @__PURE__ */ h("label", { children: [/* @__PURE__ */ i("span", { children: u.screen }), /* @__PURE__ */ h("select", {
@@ -3180,16 +3180,16 @@ function fu(e) {
   return e?.kind === Zo.Click;
 }
 var gu = ({ behaviors: e, targets: t, destinations: n, slices: o, strings: a, disabled: r, onChange: s }) => {
-  const c = pu(e), [u, d] = A(z.None), l = c.kind === z.None ? {
+  const d = pu(e), [u, c] = A(z.None), l = d.kind === z.None ? {
     kind: u,
     target: ""
-  } : c, m = vu(l.kind, t, n, o), g = l.target !== "" && !m.some((p) => p.value === l.target), b = (p) => {
-    d(p), c.kind !== z.None && s(Oo(e, {
+  } : d, m = vu(l.kind, t, n, o), g = l.target !== "" && !m.some((p) => p.value === l.target), b = (p) => {
+    c(p), d.kind !== z.None && s(Oo(e, {
       kind: z.None,
       target: ""
     }));
   }, f = (p) => {
-    p === "" && c.kind === z.None || (p === "" && d(l.kind), s(Oo(e, {
+    p === "" && d.kind === z.None || (p === "" && c(l.kind), s(Oo(e, {
       kind: l.kind,
       target: p
     })));
@@ -3336,25 +3336,25 @@ function Iu(e) {
 function Ru(e, t) {
   const n = ie(e);
   return Object.entries(Iu(t)).map(([o, a]) => ({
-    kind: Z.SetProperty,
+    kind: X.SetProperty,
     nodeId: n,
     path: o,
     value: a
   }));
 }
 var Du = (e) => e.descriptor.valueType === x.QueryReference, Ou = (e, t) => e.find((n) => n.component === t), xu = /* @__PURE__ */ new Set([zn]), Fu = (e) => e.descriptor.valueType === x.Collection && !!e.descriptor.item && !xu.has(e.descriptor.path), Mu = ({ controller: e, environment: t, strings: n, ownership: o, authoringTemplate: a }) => {
-  const { inspection: r, selectedId: s, selection: c } = e, u = n.properties, d = $(() => cc(t.availableSources), [t.availableSources]), l = $(() => dc(e.document, e.composition.roots, e.context, t.availableSources, t.queryCandidates), [
+  const { inspection: r, selectedId: s, selection: d } = e, u = n.properties, c = $(() => cc(t.availableSources), [t.availableSources]), l = $(() => dc(e.document, e.composition.roots, e.context, t.availableSources, t.queryCandidates), [
     e.document,
     e.composition.roots,
     e.context,
     t.availableSources,
     t.queryCandidates
   ]);
-  if (!s || !c || !r) return /* @__PURE__ */ i("p", {
+  if (!s || !d || !r) return /* @__PURE__ */ i("p", {
     className: "studio-editor-properties-empty",
     children: n.noSelection
   });
-  const m = Ll(e.composition.roots, s), g = Gl(r.properties, m, c.properties), b = kc(g, r.typeId), f = new Map(r.properties.map((y) => [y.descriptor.path, y])), p = r.properties.filter(Du), v = r.properties.filter($a), k = r.properties.filter(Fu), j = r.properties.filter((y) => y.descriptor.valueType === x.Icon), _ = r.properties.filter(Tu), q = [...r.diagnostics, ...e.diagnostics], { runtime: C } = t, M = r.typeId.endsWith("action"), D = r.typeId.endsWith("toolbarButton"), W = o !== void 0 && o !== "local", S = c.properties, I = Ou(e.context.catalog.components, r.typeId), L = (y) => {
+  const m = Ll(e.composition.roots, s), g = Gl(r.properties, m, d.properties), b = kc(g, r.typeId), f = new Map(r.properties.map((y) => [y.descriptor.path, y])), p = r.properties.filter(Du), v = r.properties.filter($a), k = r.properties.filter(Fu), j = r.properties.filter((y) => y.descriptor.valueType === x.Icon), _ = r.properties.filter(Tu), q = [...r.diagnostics, ...e.diagnostics], { runtime: C } = t, M = r.typeId.endsWith("action"), D = r.typeId.endsWith("toolbarButton"), W = o !== void 0 && o !== "local", S = d.properties, I = Ou(e.context.catalog.components, r.typeId), L = (y) => {
     const F = f.get(y.name);
     if (!F) return;
     if (F.descriptor.valueType !== x.Enum) return e.setProperty(F, y.value);
@@ -3407,14 +3407,14 @@ var Du = (e) => e.descriptor.valueType === x.QueryReference, Ou = (e, t) => e.fi
         strings: n,
         disabled: o !== void 0 && o !== "local"
       }),
-      I && st(c) && /* @__PURE__ */ h(se, { children: [/* @__PURE__ */ i(Mc, {
-        component: c,
+      I && st(d) && /* @__PURE__ */ h(se, { children: [/* @__PURE__ */ i(Mc, {
+        component: d,
         descriptor: I,
         controller: e,
         environment: t,
         strings: n
       }), /* @__PURE__ */ i(xc, {
-        component: c,
+        component: d,
         descriptor: I,
         controller: e,
         environment: t,
@@ -3467,7 +3467,7 @@ var Du = (e) => e.descriptor.valueType === x.QueryReference, Ou = (e, t) => e.fi
       p.map((y) => /* @__PURE__ */ i(gd, {
         property: y,
         candidates: t.queryCandidates,
-        scope: d,
+        scope: c,
         strings: n,
         disabled: !y.editable,
         onChange: (F) => G(y, F)
@@ -3482,7 +3482,7 @@ var Du = (e) => e.descriptor.valueType === x.QueryReference, Ou = (e, t) => e.fi
         onChange: (y) => y && e.applyAll(Ru(s, y), n.properties.action.label)
       }),
       D && /* @__PURE__ */ i(gu, {
-        behaviors: c.behaviors,
+        behaviors: d.behaviors,
         targets: Ha(t, e.document),
         destinations: t.destinations,
         slices: t.stateChangeSlices,
@@ -3500,17 +3500,17 @@ var Du = (e) => e.descriptor.valueType === x.QueryReference, Ou = (e, t) => e.fi
     ]
   });
 }, _u = ({ property: e, componentId: t, controller: n, strings: o, destinations: a, environment: r, icons: s }) => {
-  const { items: c, fixed: u } = oc(e), d = Hd(s.diagnostics, e.descriptor.path), l = ac(e), m = l.fields.destination !== "readonly" || e.editable, g = [...u, ...c].filter((v) => v.destination !== void 0 || v.destinationReference !== void 0 || m), b = Ha(r, n.document), f = $u(b, e), p = (v, k) => {
+  const { items: d, fixed: u } = oc(e), c = Hd(s.diagnostics, e.descriptor.path), l = ac(e), m = l.fields.destination !== "readonly" || e.editable, g = [...u, ...d].filter((v) => v.destination !== void 0 || v.destinationReference !== void 0 || m), b = Ha(r, n.document), f = $u(b, e), p = (v, k) => {
     n.setCollectionItemDestination(t, e.descriptor.path, v.id, k, o.properties.destination.label);
   };
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-properties__collection",
     children: [/* @__PURE__ */ i(Gr, {
-      items: c,
+      items: d,
       fixedItems: u,
       capabilities: l,
       destinations: a,
-      validation: d,
+      validation: c,
       renderIconField: (v) => /* @__PURE__ */ i(Ma, {
         value: v.value,
         onChange: v.onChange,
@@ -3563,7 +3563,7 @@ function Fo(e) {
   return !!e && typeof e == "object" && !Array.isArray(e);
 }
 var Ja = ({ strings: e, controller: t, environment: n, authoringTemplate: o, structure: a, onClose: r }) => {
-  const [s, c] = A(Zt.Properties), u = t.selectedId ? t.ownershipOf(t.selectedId) : void 0;
+  const [s, d] = A(Zt.Properties), u = t.selectedId ? t.ownershipOf(t.selectedId) : void 0;
   return /* @__PURE__ */ h("section", {
     className: "studio-editor-inspector",
     "aria-label": e.inspectorTitle,
@@ -3584,7 +3584,7 @@ var Ja = ({ strings: e, controller: t, environment: n, authoringTemplate: o, str
       className: "studio-editor-inspector__tabs",
       "aria-label": e.inspectorTitle,
       value: s,
-      onChange: c,
+      onChange: d,
       tabs: [{
         id: Zt.Properties,
         label: e.propertiesTab,
@@ -3991,8 +3991,8 @@ function op(e) {
   return _r(t.width, t.height);
 }
 var ap = ({ windowSize: e, available: t, strings: n, onResize: o }) => {
-  const a = np(e, t), r = ir(e), s = op(e), c = (u, d, l) => /* @__PURE__ */ i(ze, {
-    icon: d,
+  const a = np(e, t), r = ir(e), s = op(e), d = (u, c, l) => /* @__PURE__ */ i(ze, {
+    icon: c,
     "aria-label": l,
     "aria-pressed": a === u,
     title: l,
@@ -4005,8 +4005,8 @@ var ap = ({ windowSize: e, available: t, strings: n, onResize: o }) => {
     role: "group",
     "aria-label": n.sizeClass(s.width, s.height),
     children: [
-      c(Me.Desktop, /* @__PURE__ */ i(sn, { "aria-hidden": "true" }), n.desktopPreview),
-      c(Me.Mobile, /* @__PURE__ */ i(Oi, { "aria-hidden": "true" }), n.mobilePreview),
+      d(Me.Desktop, /* @__PURE__ */ i(sn, { "aria-hidden": "true" }), n.desktopPreview),
+      d(Me.Mobile, /* @__PURE__ */ i(Oi, { "aria-hidden": "true" }), n.mobilePreview),
       /* @__PURE__ */ h("span", {
         className: "studio-editor-viewport-controls__size",
         role: "status",
@@ -4035,20 +4035,20 @@ var Cn = ({ elementId: e, tone: t, text: n }) => /* @__PURE__ */ i("div", {
   children: n
 }), Pt = /* @__PURE__ */ (function(e) {
   return e.Empty = "empty", e.Failed = "failed", e.Declaration = "declaration", e;
-})({}), ee = /* @__PURE__ */ (function(e) {
+})({}), te = /* @__PURE__ */ (function(e) {
   return e.Window = "window", e.Toast = "toast", e.Tooltip = "tooltip", e.Mask = "mask", e.Busy = "busy", e;
 })({}), cr = {
-  dialog: ee.Window,
-  confirmDialog: ee.Window,
-  confirmationDialog: ee.Window,
-  commandDialog: ee.Window,
-  stepperCommandDialog: ee.Window,
-  overlayPanel: ee.Window,
-  sidebar: ee.Window,
-  toast: ee.Toast,
-  tooltip: ee.Tooltip,
-  blockUI: ee.Mask,
-  busyIndicatorDialog: ee.Busy
+  dialog: te.Window,
+  confirmDialog: te.Window,
+  confirmationDialog: te.Window,
+  commandDialog: te.Window,
+  stepperCommandDialog: te.Window,
+  overlayPanel: te.Window,
+  sidebar: te.Window,
+  toast: te.Toast,
+  tooltip: te.Tooltip,
+  blockUI: te.Mask,
+  busyIndicatorDialog: te.Busy
 }, Be = (e, ...t) => {
   for (const n of t) {
     const o = e.properties?.[n];
@@ -4056,9 +4056,9 @@ var Cn = ({ elementId: e, tone: t, text: n }) => /* @__PURE__ */ i("div", {
   }
 };
 function rp({ kind: e, tag: t, element: n, slots: o, message: a }) {
-  const r = o.content ?? [], s = Be(n, "header", "title", "summary") ?? n.name ?? n.componentName, c = Be(n, "message", "detail", "text", "label"), u = () => {
+  const r = o.content ?? [], s = Be(n, "header", "title", "summary") ?? n.name ?? n.componentName, d = Be(n, "message", "detail", "text", "label"), u = () => {
     switch (e) {
-      case ee.Toast:
+      case te.Toast:
         return a ? It(a, {
           element: {
             ...n,
@@ -4073,7 +4073,7 @@ function rp({ kind: e, tag: t, element: n, slots: o, message: a }) {
           className: "studio-overlay-preview__body",
           children: s
         });
-      case ee.Tooltip:
+      case te.Tooltip:
         return /* @__PURE__ */ h("div", {
           className: "studio-overlay-preview__tooltip",
           children: [/* @__PURE__ */ i("span", {
@@ -4085,7 +4085,7 @@ function rp({ kind: e, tag: t, element: n, slots: o, message: a }) {
             children: Be(n, "text") ?? s
           })]
         });
-      case ee.Mask:
+      case te.Mask:
         return /* @__PURE__ */ h("div", {
           className: "studio-overlay-preview__masked",
           children: [/* @__PURE__ */ i("div", {
@@ -4099,13 +4099,13 @@ function rp({ kind: e, tag: t, element: n, slots: o, message: a }) {
             })
           })]
         });
-      case ee.Busy:
+      case te.Busy:
         return /* @__PURE__ */ h("div", {
           className: "studio-overlay-preview__busy",
           children: [/* @__PURE__ */ i("i", {
             className: "pi pi-spin pi-spinner",
             "aria-hidden": "true"
-          }), /* @__PURE__ */ i("span", { children: c ?? s })]
+          }), /* @__PURE__ */ i("span", { children: d ?? s })]
         });
       default:
         return /* @__PURE__ */ h("div", {
@@ -4118,7 +4118,7 @@ function rp({ kind: e, tag: t, element: n, slots: o, message: a }) {
             })]
           }), /* @__PURE__ */ i("div", {
             className: "studio-overlay-preview__body",
-            children: r.length > 0 ? r : c
+            children: r.length > 0 ? r : d
           })]
         });
     }
@@ -4627,7 +4627,7 @@ function ur(e, t, n) {
   const o = Yn(e, t), a = n ?? {};
   if (!o) return { ...a };
   const r = { ...o };
-  for (const [s, c] of Object.entries(a)) c !== void 0 && (r[s] = c);
+  for (const [s, d] of Object.entries(a)) d !== void 0 && (r[s] = d);
   return r;
 }
 function sp(e, t, n) {
@@ -4639,33 +4639,36 @@ var lp = (e) => {
   return t > 0 && n > 0;
 }, Sn = (e) => Array.from(e.children).filter((t) => !t.hasAttribute("data-studio-placeholder-for")).some((t) => lp(t) || getComputedStyle(t).display === "contents" && Sn(t)), cp = 150;
 function dp(e, t) {
-  const [n, o] = A(!0);
+  const [n, o] = A(!0), a = Z(!0);
   return tt(() => {
-    const a = e.current;
-    if (!a) return;
-    let r;
-    const s = () => {
-      clearTimeout(r), Sn(a) ? o(!0) : r = setTimeout(() => o(Sn(a)), cp);
-    }, c = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(s), u = () => {
-      c?.disconnect(), Array.from(a.children).forEach((l) => c?.observe(l));
-    }, d = new MutationObserver(() => {
-      u(), s();
+    const r = e.current;
+    if (!r) return;
+    const s = (g) => {
+      a.current !== g && (a.current = g, o(g));
+    };
+    let d;
+    const u = () => {
+      clearTimeout(d), Sn(r) ? s(!0) : d = setTimeout(() => s(Sn(r)), cp);
+    }, c = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(u), l = () => {
+      c?.disconnect(), Array.from(r.children).forEach((g) => c?.observe(g));
+    }, m = new MutationObserver(() => {
+      l(), u();
     });
-    return s(), u(), d.observe(a, { childList: !0 }), () => {
-      clearTimeout(r), c?.disconnect(), d.disconnect();
+    return u(), l(), m.observe(r, { childList: !0 }), () => {
+      clearTimeout(d), c?.disconnect(), m.disconnect();
     };
   }, [e, t]), n;
 }
-var up = ({ element: e }) => e.name || e.componentName, pp = (e) => {
-  const t = te(e), n = te(0);
-  return t.current !== e && (t.current = e, n.current += 1), n.current;
+var up = ({ element: e }) => e.name || e.componentName, pp = (e, t) => {
+  const n = Z(e), o = Z(0);
+  return n.current !== e && (n.current = e, t && (o.current += 1)), o.current;
 };
 function mp(e, t, n, o) {
   const a = (r) => {
-    const s = te(null), c = $(() => ({
+    const s = Z(null), d = $(() => ({
       ...r.element,
       properties: ur(e, r.element.componentName, r.element.properties)
-    }), [r.element]), u = $(() => sp(e, r.element.componentName, r.element.properties), [r.element]), d = dr.has(_t(r.element.componentName)), l = cr[_t(r.element.componentName)], [m, g] = A(), b = dp(s, r.element), f = up(r), p = pp(r.element);
+    }), [r.element]), u = $(() => sp(e, r.element.componentName, r.element.properties), [r.element]), c = dr.has(_t(r.element.componentName)), l = cr[_t(r.element.componentName)], [m, g] = A(), b = dp(s, r.element), f = up(r), p = pp(r.element, m !== void 0);
     return /* @__PURE__ */ h("span", {
       ref: s,
       "data-studio-element": r.element.id,
@@ -4682,17 +4685,17 @@ function mp(e, t, n, o) {
         children: l ? /* @__PURE__ */ i(rp, {
           kind: l,
           tag: n.overlay(f),
-          element: c,
+          element: d,
           slots: r.slots,
           message: o
         }) : It(t, {
           ...r,
-          element: c
+          element: d
         })
       }, p), !b && /* @__PURE__ */ i(Cn, {
         elementId: r.element.id,
-        tone: d ? Pt.Declaration : Pt.Empty,
-        text: d ? n.declaration(f) : n.nothingToShow(f)
+        tone: c ? Pt.Declaration : Pt.Empty,
+        text: c ? n.declaration(f) : n.nothingToShow(f)
       })]
     });
   };
@@ -4750,39 +4753,39 @@ var xe = /* @__PURE__ */ (function(e) {
   return t - e.left < a || e.left + e.width - t < a || n - e.top < r || e.top + e.height - n < r;
 }, Eo = ({ region: e, rect: t }, n, o) => e.axis === xe.Vertical ? Math.abs(n - (t.left + t.width / 2)) : Math.abs(o - (t.top + t.height / 2));
 function wp(e, t, n, o = 6) {
-  const a = e.filter((d) => d.region.kind === fe.Container);
+  const a = e.filter((c) => c.region.kind === fe.Container);
   if (a.length === 0) return;
-  const r = a.map((d, l) => ({
-    placed: d,
+  const r = a.map((c, l) => ({
+    placed: c,
     order: l
-  })).filter(({ placed: d }) => bp(d.rect, t, n)).sort((d, l) => vt(d.placed.rect) - vt(l.placed.rect) || l.order - d.order).map(({ placed: d }) => d), s = r[0], c = s && r.length > 1 && yp(s.rect, t, n, o) ? r[1] : s ?? [...a].sort((d, l) => vt(l.rect) - vt(d.rect))[0], u = e.filter((d) => d.region.kind === fe.Between && d.region.containerId === c.region.containerId);
-  return c.region.isEmptyContainer || u.length === 0 ? {
-    target: c,
-    container: c.rect
+  })).filter(({ placed: c }) => bp(c.rect, t, n)).sort((c, l) => vt(c.placed.rect) - vt(l.placed.rect) || l.order - c.order).map(({ placed: c }) => c), s = r[0], d = s && r.length > 1 && yp(s.rect, t, n, o) ? r[1] : s ?? [...a].sort((c, l) => vt(l.rect) - vt(c.rect))[0], u = e.filter((c) => c.region.kind === fe.Between && c.region.containerId === d.region.containerId);
+  return d.region.isEmptyContainer || u.length === 0 ? {
+    target: d,
+    container: d.rect
   } : {
-    target: u.reduce((d, l) => Eo(l, t, n) < Eo(d, t, n) ? l : d),
-    container: c.rect
+    target: u.reduce((c, l) => Eo(l, t, n) < Eo(c, t, n) ? l : c),
+    container: d.rect
   };
 }
 var Cp = (e, t) => e?.top === t?.top && e?.left === t?.left && e?.width === t?.width && e?.height === t?.height, Sp = (e, t) => !!e && e.denied === t.denied && e.drop?.target.region.id === t.drop?.target.region.id && Cp(e.drop?.target.rect, t.drop?.target.rect);
 function kp(e, t, n) {
-  const [o, a] = A(), r = te(void 0);
+  const [o, a] = A(), r = Z(void 0);
   r.current = o;
-  const [s, c] = A(), u = te(0), d = te(void 0), l = B(() => {
-    u.current = 0, d.current = void 0, c(void 0), a(void 0);
-  }, []), m = te(!1);
+  const [s, d] = A(), u = Z(0), c = Z(void 0), l = B(() => {
+    u.current = 0, c.current = void 0, d(void 0), a(void 0);
+  }, []), m = Z(!1);
   pe(() => {
     const C = (M) => {
-      M.key !== "Escape" || !d.current && !u.current && !r.current || (m.current = !0, l());
+      M.key !== "Escape" || !c.current && !u.current && !r.current || (m.current = !0, l());
     };
     return window.addEventListener("keydown", C, !0), () => window.removeEventListener("keydown", C, !0);
   }, [l]), pe(() => (window.addEventListener("dragend", l), window.addEventListener("drop", l), () => {
     window.removeEventListener("dragend", l), window.removeEventListener("drop", l);
   }), [l]);
   const g = B((C) => {
-    d.current = C, c(C);
+    c.current = C, d(C);
   }, []), b = (C) => {
-    const M = d.current, { region: D } = C.target;
+    const M = c.current, { region: D } = C.target;
     if (!M || !D.containerId) return;
     const W = D.kind === fe.Container ? f(D.containerId) : D.index;
     return vp(n.composition.roots, n.adapter, M, D.containerId, W);
@@ -4854,11 +4857,11 @@ function kn(e, t, n) {
   for (const r of a) {
     const s = pr(r);
     if (s.length === 0) continue;
-    const c = Math.min(...s.map((m) => m.left)), u = Math.min(...s.map((m) => m.top)), d = Math.max(...s.map((m) => m.right)), l = Math.max(...s.map((m) => m.bottom));
+    const d = Math.min(...s.map((m) => m.left)), u = Math.min(...s.map((m) => m.top)), c = Math.max(...s.map((m) => m.right)), l = Math.max(...s.map((m) => m.bottom));
     return {
-      left: c - n.left,
+      left: d - n.left,
       top: u - n.top,
-      width: d - c,
+      width: c - d,
       height: l - u
     };
   }
@@ -4887,7 +4890,7 @@ function Np(e, t, n) {
 }
 var mr = (e, t) => e === t || !!e && !!t && e.left === t.left && e.top === t.top && e.width === t.width && e.height === t.height, Pp = (e, t) => e.length === t.length && e.every((n, o) => n.region.id === t[o].region.id && mr(n.rect, t[o].rect)), Ip = mr;
 function Rp(e, t, n) {
-  const [o, a] = A([]), [r, s] = A(), c = te([]), u = B(() => {
+  const [o, a] = A([]), [r, s] = A(), d = Z([]), u = B(() => {
     const l = e.current;
     if (!l) return [];
     const m = l.getBoundingClientRect(), g = (f) => kn(l, f, m), b = {
@@ -4903,11 +4906,11 @@ function Rp(e, t, n) {
         rect: p
       }] : [];
     });
-  }, [e, t]), d = B(() => {
+  }, [e, t]), c = B(() => {
     const l = e.current;
     if (!l) return;
     const m = u();
-    c.current = m, a((b) => Pp(b, m) ? b : m);
+    d.current = m, a((b) => Pp(b, m) ? b : m);
     const g = n ? kn(l, n, l.getBoundingClientRect()) : void 0;
     s((b) => Ip(b, g) ? b : g);
   }, [
@@ -4916,19 +4919,19 @@ function Rp(e, t, n) {
     n
   ]);
   return tt(() => {
-    d();
+    c();
   }), tt(() => {
     const l = e.current;
     if (!l || typeof ResizeObserver > "u") return;
-    const m = new ResizeObserver(d);
+    const m = new ResizeObserver(c);
     return m.observe(l), () => m.disconnect();
-  }, [e, d]), tt(() => {
+  }, [e, c]), tt(() => {
     const l = e.current;
     if (!l || typeof MutationObserver > "u") return;
     let m = 0;
     const g = new MutationObserver(() => {
       m === 0 && (m = requestAnimationFrame(() => {
-        m = 0, d();
+        m = 0, c();
       }));
     });
     return g.observe(l, {
@@ -4937,7 +4940,7 @@ function Rp(e, t, n) {
     }), () => {
       g.disconnect(), m !== 0 && cancelAnimationFrame(m);
     };
-  }, [e, d]), {
+  }, [e, c]), {
     placed: o,
     selectionRect: r,
     measureNow: u
@@ -4964,15 +4967,15 @@ function xp(e) {
   return n?.dataset.sceneId ?? n?.dataset.studioElement ?? n?.dataset.studioPlaceholderFor;
 }
 function Fp(e, t) {
-  const n = te(t);
+  const n = Z(t);
   n.current = t, pe(() => {
     const o = e.current;
     if (!o) return;
     const a = (r) => {
       const s = r.target;
       if (s?.closest?.(".studio-screen-surface__chrome")) return;
-      const c = Op(r.type, s, r.button);
-      c.select && (Un(s) || o.focus({ preventScroll: !0 }), n.current(xp(s))), c.cancelDefault && r.preventDefault(), c.swallow && r.stopPropagation();
+      const d = Op(r.type, s, r.button);
+      d.select && (Un(s) || o.focus({ preventScroll: !0 }), n.current(xp(s))), d.cancelDefault && r.preventDefault(), d.swallow && r.stopPropagation();
     };
     for (const r of Bo) o.addEventListener(r, a, !0);
     return () => {
@@ -4982,7 +4985,7 @@ function Fp(e, t) {
 }
 var Mp = () => {
 }, _p = ({ controller: e, environment: t, resolveBinding: n = Mp, configuration: o, strings: a, viewportHeight: r }) => {
-  const s = te(null), { composition: c, dropRegions: u, selectedId: d } = e, { selectionRect: l, measureNow: m } = Rp(s, u, d), { feedback: g, draggedId: b, startMoving: f, endMoving: p, handlers: v } = kp(s, m, e), [k, j] = A();
+  const s = Z(null), { composition: d, dropRegions: u, selectedId: c } = e, { selectionRect: l, measureNow: m } = Rp(s, u, c), { feedback: g, draggedId: b, startMoving: f, endMoving: p, handlers: v } = kp(s, m, e), [k, j] = A();
   tt(() => {
     const y = s.current?.closest("[data-studio-viewport]") ?? s.current?.parentElement;
     if (r !== void 0 || !y || typeof ResizeObserver > "u") return;
@@ -5012,8 +5015,8 @@ var Mp = () => {
       height: Ne.height
     };
   }), () => M(void 0)), [M]);
-  const D = $(() => ya(c.element, t.runtime.profile, t.runtime.packages), [
-    c,
+  const D = $(() => ya(d.element, t.runtime.profile, t.runtime.packages), [
+    d,
     t.runtime.profile,
     t.runtime.packages
   ]), W = $(() => hp(t.runtime.registry, a), [t.runtime.registry, a]), S = $(() => Qn(t.runtime), [t.runtime]), I = $(() => /* @__PURE__ */ i(ta, {
@@ -5085,8 +5088,8 @@ var Mp = () => {
       })]
     })
   });
-}, Uo = 40, hr = ({ controller: e, environment: t, strings: n, window: o, deviceFrame: a = !1, saveFailure: r, onSave: s, isSaving: c = !1 }) => {
-  const u = !!e.selectedId && e.canRemove(e.selectedId), d = /* @__PURE__ */ h(se, { children: [
+}, Uo = 40, hr = ({ controller: e, environment: t, strings: n, window: o, deviceFrame: a = !1, saveFailure: r, onSave: s, isSaving: d = !1 }) => {
+  const u = !!e.selectedId && e.canRemove(e.selectedId), c = /* @__PURE__ */ h(se, { children: [
     /* @__PURE__ */ i("span", {
       className: "studio-screen-editor-window__state",
       role: "status",
@@ -5105,7 +5108,7 @@ var Mp = () => {
       title: n.save,
       variant: "ghost",
       size: "small",
-      disabled: !e.isDirty || c,
+      disabled: !e.isDirty || d,
       onClick: s
     }),
     /* @__PURE__ */ i(ze, {
@@ -5150,7 +5153,7 @@ var Mp = () => {
     role: "group",
     "aria-label": n.windowLabel,
     children: [
-      /* @__PURE__ */ i(tp, { controls: d }),
+      /* @__PURE__ */ i(tp, { controls: c }),
       r && /* @__PURE__ */ h("p", {
         className: "studio-screen-editor-window__notice",
         role: "alert",
@@ -5183,18 +5186,18 @@ var Mp = () => {
   });
 };
 function $p(e, t, n) {
-  const o = e.screens.find((c) => c.name === ge);
+  const o = e.screens.find((d) => d.name === ge);
   if (!o || o.screenTemplate === t?.name) return e;
-  const a = o.screenTemplate, r = e.screens.map((c) => {
-    if (c !== o) return c;
-    const { screenTemplate: u, ...d } = c;
+  const a = o.screenTemplate, r = e.screens.map((d) => {
+    if (d !== o) return d;
+    const { screenTemplate: u, ...c } = d;
     return t ? {
-      ...d,
+      ...c,
       screenTemplate: t.name
-    } : d;
+    } : c;
   });
-  let s = e.screenTemplates.filter((c) => !Ap(c, a, r, n));
-  return t && !s.some((c) => c.name === t.name) && (s = [...s, globalThis.structuredClone(t)]), {
+  let s = e.screenTemplates.filter((d) => !Ap(d, a, r, n));
+  return t && !s.some((d) => d.name === t.name) && (s = [...s, globalThis.structuredClone(t)]), {
     ...e,
     screens: r,
     screenTemplates: s
@@ -5254,7 +5257,7 @@ function Ep(e) {
 function Bp(e) {
   if (e.targetParentId !== null)
     return {
-      kind: Z.MoveNode,
+      kind: X.MoveNode,
       nodeId: ie(e.nodeId),
       target: ie(e.targetParentId),
       index: e.index
@@ -5262,7 +5265,7 @@ function Bp(e) {
 }
 function br(e, t, n) {
   return {
-    kind: Z.InsertNode,
+    kind: X.InsertNode,
     target: ie(e),
     index: t,
     element: n
@@ -5270,7 +5273,7 @@ function br(e, t, n) {
 }
 function Up(e) {
   return {
-    kind: Z.RemoveNode,
+    kind: X.RemoveNode,
     nodeId: ie(e)
   };
 }
@@ -5285,11 +5288,11 @@ var yr = (e, t) => (e?.children ?? []).map((n) => {
 function jp(e, t, n, o) {
   const a = Ye(e, t.nodeId);
   if (!a || t.targetParentId === null) return;
-  const r = At(e, t.nodeId), s = Ye(e, t.targetParentId), c = !!r && Fe(r), u = !!s && Fe(s);
-  if (!c && !u) return;
-  const d = c && u && r.id === t.targetParentId, l = d ? r.children.findIndex((g) => g.id === t.nodeId) : t.index, m = u ? gr(a, n ?? (d ? vr(a) : void 0) ?? fr(yr(s, o))) : Ep(a);
+  const r = At(e, t.nodeId), s = Ye(e, t.targetParentId), d = !!r && Fe(r), u = !!s && Fe(s);
+  if (!d && !u) return;
+  const c = d && u && r.id === t.targetParentId, l = c ? r.children.findIndex((g) => g.id === t.nodeId) : t.index, m = u ? gr(a, n ?? (c ? vr(a) : void 0) ?? fr(yr(s, o))) : Ep(a);
   return [{
-    kind: Z.RemoveNode,
+    kind: X.RemoveNode,
     nodeId: ie(t.nodeId)
   }, br(t.targetParentId, l, m)];
 }
@@ -5316,7 +5319,7 @@ function jo(e, t, n, o) {
     axis: r,
     isEmptyContainer: t.length === 0
   };
-  return r === xe.None || t.length === 0 ? [s] : [s, ...Array.from({ length: t.length + 1 }, (c, u) => ({
+  return r === xe.None || t.length === 0 ? [s] : [s, ...Array.from({ length: t.length + 1 }, (d, u) => ({
     id: `${a}:between:${u}`,
     kind: fe.Between,
     containerId: e,
@@ -5392,12 +5395,12 @@ function Hp(e, t, n, o) {
   let a = e.document;
   const r = [];
   for (const s of t) {
-    const c = Dn(a, s, n);
-    if (r.push(...c.diagnostics), !c.applied) return {
+    const d = Dn(a, s, n);
+    if (r.push(...d.diagnostics), !d.applied) return {
       ...e,
       diagnostics: r
     };
-    a = c.model;
+    a = d.model;
   }
   return {
     ...e,
@@ -5524,9 +5527,9 @@ var am = "composition";
 function Nn(e, t) {
   const n = e.screens.find((s) => s.name === ge), o = t !== void 0 ? un(t, !0) : un(void 0), a = ea(e, o).levels.filter((s) => s.kind === Dr.ScreenTemplate).map((s) => s.owner), r = [];
   for (const s of a) {
-    const c = e.screenTemplates.find((u) => u.name === s);
-    if (c)
-      for (const u of c.slots) r.push(...c.content?.[u.name] ?? []);
+    const d = e.screenTemplates.find((u) => u.name === s);
+    if (d)
+      for (const u of d.slots) r.push(...d.content?.[u.name] ?? []);
   }
   return (t === void 0 || o.kind === Rt.Screen) && r.push(...n?.slotContent.content ?? []), {
     element: Mt(N.Stack, am, "Composition", r),
@@ -5573,16 +5576,16 @@ function sm(e) {
 }
 var lm = (e, t) => At(e, t)?.id;
 function wr(e, t, n) {
-  const [o, a] = A(() => zp(e.document)), r = te(void 0);
+  const [o, a] = A(() => zp(e.document)), r = Z(void 0);
   r.current ??= new Wp(o, a);
-  const s = B((T) => r.current.commit(T), []), [c, u] = A(), d = te(void 0), l = B((T, O) => {
-    const P = d.current?.(T), R = d.current?.(O);
+  const s = B((T) => r.current.commit(T), []), [d, u] = A(), c = Z(void 0), l = B((T, O) => {
+    const P = c.current?.(T), R = c.current?.(O);
     return P && R ? {
       height: P.height,
       bottom: P.top + P.height - R.top
     } : void 0;
   }, []), m = B((T) => {
-    d.current = T;
+    c.current = T;
   }, []), g = sm(n.runtime.icons), b = $(() => ({
     catalog: n.runtime.catalog,
     scope: un(t, t !== void 0),
@@ -5600,9 +5603,9 @@ function wr(e, t, n) {
     f,
     k,
     v
-  ]), _ = c ? Ye(f.roots, c) : void 0, q = $(() => c ? xn(o.document, ie(c), b) : void 0, [
+  ]), _ = d ? Ye(f.roots, d) : void 0, q = $(() => d ? xn(o.document, ie(d), b) : void 0, [
     o.document,
-    c,
+    d,
     b
   ]), C = B((T, O) => {
     const P = r.current.current, R = s((H) => Gp(H, T, b, O));
@@ -5625,10 +5628,10 @@ function wr(e, t, n) {
       index: O ?? R.length
     };
   }, [k, f]), S = B((T, O, P, R, H) => {
-    const X = W(O, P);
-    if (!X.parent) return;
-    const Ae = Ye(Nn(r.current.current.document, t).roots, X.parent), ut = Ae && Fe(Ae) ? gr(T, H ?? fr(yr(Ae, l))) : T;
-    C(br(X.parent, X.index, ut), R).applied && u(T.id);
+    const ee = W(O, P);
+    if (!ee.parent) return;
+    const Ae = Ye(Nn(r.current.current.document, t).roots, ee.parent), ut = Ae && Fe(Ae) ? gr(T, H ?? fr(yr(Ae, l))) : T;
+    C(br(ee.parent, ee.index, ut), R).applied && u(T.id);
   }, [
     C,
     W,
@@ -5658,10 +5661,10 @@ function wr(e, t, n) {
     });
   }, [s]), G = B((T, O, P) => {
     s((R) => {
-      const H = R.document.screenTemplates.map((X) => X.name === T ? {
-        ...X,
+      const H = R.document.screenTemplates.map((ee) => ee.name === T ? {
+        ...ee,
         outlets: O
-      } : X);
+      } : ee);
       return Ie(R, {
         ...R.document,
         screenTemplates: H
@@ -5669,9 +5672,9 @@ function wr(e, t, n) {
     });
   }, [s]), y = B((T, O, P) => {
     s((R) => {
-      const H = R.document.screenTemplates.map((X) => {
-        if (X.name !== T) return X;
-        const { metadata: Ae, ...ut } = X;
+      const H = R.document.screenTemplates.map((ee) => {
+        if (ee.name !== T) return ee;
+        const { metadata: Ae, ...ut } = ee;
         return O ? {
           ...ut,
           metadata: O
@@ -5688,7 +5691,7 @@ function wr(e, t, n) {
       dialogTemplates: T
     }, O));
   }, [s]), Y = B((T, O, P, R, H) => {
-    s((X) => Ie(X, Vo(X.document, T, (Ae) => cm(Ae, O, P, R)), H));
+    s((ee) => Ie(ee, Vo(ee.document, T, (Ae) => cm(Ae, O, P, R)), H));
   }, [s]), ne = B((T, O) => {
     const P = n.runtime.bundles.flatMap((R) => R.screenTemplates ?? []);
     s((R) => Ie(R, $p(R.document, T, P), O));
@@ -5701,7 +5704,7 @@ function wr(e, t, n) {
     document: o.document,
     composition: f,
     context: b,
-    selectedId: c,
+    selectedId: d,
     selection: _,
     inspection: q,
     diagnostics: o.diagnostics,
@@ -5723,7 +5726,7 @@ function wr(e, t, n) {
       C(Up(T), "Remove").applied && u((P) => P === T || P === void 0 ? O : P);
     },
     canRemove: (T) => hn(f.roots, T, v),
-    setProperty: (T, O) => c && M(gn(c, T, O), "Change"),
+    setProperty: (T, O) => d && M(gn(d, T, O), "Change"),
     setScreenForms: L,
     setScreenTemplateOutlets: G,
     setScreenTemplateMetadata: y,
@@ -5786,15 +5789,15 @@ var zo = () => ({
       onClose: () => n.close()
     })
   });
-}, pm = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: a, paletteSources: r, sourceRect: s, initialSize: c, rememberWindowAs: u, windowMemory: d, centerOffsetX: l, renderPaletteHost: m, onClose: g, onBeforeClose: b, opened: f }) => {
+}, pm = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: a, paletteSources: r, sourceRect: s, initialSize: d, rememberWindowAs: u, windowMemory: c, centerOffsetX: l, renderPaletteHost: m, onClose: g, onBeforeClose: b, opened: f }) => {
   const p = wr(f, e.authoringTemplate, t), v = $(() => Xa(n.layoutDrawer, o, a, r, n.packageTitles), [
     n,
     o,
     a,
     r
-  ]), k = $(() => d ?? Qu(), [d]), j = $(() => Xu({
+  ]), k = $(() => c ?? Qu(), [c]), j = $(() => Xu({
     remembered: u ? k.read(u) : void 0,
-    saved: c,
+    saved: d,
     lastUsed: k.readLastUsed()
   }, zo()), []), _ = B((y) => {
     u && k.write(u, y);
@@ -6036,14 +6039,14 @@ var qe = "p-anchored-overlay", bt = "p-collapsible", an = "p-overlay-mask", w =
     problem: t.problem,
     strings: e.strings
   });
-}, bm = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: a, paletteSources: r, initialSize: s, onChange: c, renderPaletteHost: u, opened: d }) => {
-  const l = wr(d, e.authoringTemplate, t), [m, g] = A(s ?? Et[Me.Desktop]), [b, f] = A(!0), p = $(() => Xa(n.layoutDrawer, o, a, r, n.packageTitles), [
+}, bm = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: a, paletteSources: r, initialSize: s, onChange: d, renderPaletteHost: u, opened: c }) => {
+  const l = wr(c, e.authoringTemplate, t), [m, g] = A(s ?? Et[Me.Desktop]), [b, f] = A(!0), p = $(() => Xa(n.layoutDrawer, o, a, r, n.packageTitles), [
     n,
     o,
     a,
     r
-  ]), v = te(c);
-  v.current = c, pe(() => {
+  ]), v = Z(d);
+  v.current = d, pe(() => {
     const _ = ot(l.document, e.authoringTemplate);
     v.current?.({
       document: l.document,
@@ -6326,7 +6329,7 @@ function Lm(e, t, n) {
     component: aa(l.manifest.name, m),
     displayName: m,
     properties: []
-  }))).filter((l) => !r.has(l.component)), c = [...a, ...s].map(Dm).map(Mm).map($m), u = [...c, ...Em(c, o, t)], d = new Set(Object.values(o).flat());
+  }))).filter((l) => !r.has(l.component)), d = [...a, ...s].map(Dm).map(Mm).map($m), u = [...d, ...Em(d, o, t)], c = new Set(Object.values(o).flat());
   return {
     id: Am++,
     bundles: e,
@@ -6338,7 +6341,7 @@ function Lm(e, t, n) {
     ...n ? { appearance: n } : {},
     icons: Tm(t.packages, e),
     iconAdapters: Zr(e),
-    isKnownComponent: (l) => d.has(l),
+    isKnownComponent: (l) => c.has(l),
     legacyTypeOf: (l) => {
       const m = _n(l, t, o), g = m?.package === Ho ? `${Ho}.${Ta(m.name)}` : void 0;
       return g !== void 0 && Im.has(g) ? g : void 0;
@@ -6348,7 +6351,7 @@ function Lm(e, t, n) {
 function Em(e, t, n) {
   const o = [];
   for (const a of new Set(Object.values(t).flat())) {
-    const r = _n(a, n, t), s = r && e.find((c) => c.component === aa(r.package, r.name));
+    const r = _n(a, n, t), s = r && e.find((d) => d.component === aa(r.package, r.name));
     s && o.push({
       ...s,
       component: a
@@ -6437,19 +6440,19 @@ function kr(e, t) {
     packages: a.packages,
     layout: r.length > 0 ? r : void 0,
     theme: e.theme.length > 0 ? e.theme : void 0
-  }, c = new Set(o);
+  }, d = new Set(o);
   return {
     selection: a,
     profile: s,
     entries: a.packages.flatMap((u) => {
-      const d = n.find((l) => l.name === u);
-      return d ? [{
+      const c = n.find((l) => l.name === u);
+      return c ? [{
         name: u,
-        displayName: d.displayName ?? d.name,
-        description: d.description,
-        version: d.version,
-        kind: d.kind,
-        inclusion: u === On ? rn.Fallback : c.has(u) ? rn.Explicit : rn.Automatic,
+        displayName: c.displayName ?? c.name,
+        description: c.description,
+        version: c.version,
+        kind: c.kind,
+        inclusion: u === On ? rn.Fallback : d.has(u) ? rn.Explicit : rn.Automatic,
         requiredBy: n.filter((l) => a.packages.includes(l.name) && l.dependencies.some((m) => m.name === u)).map((l) => l.name)
       }] : [];
     }),
@@ -6460,7 +6463,7 @@ function kr(e, t) {
   };
 }
 function Qm(e) {
-  const t = e.map((s) => s.manifest), n = zm(t), o = n.find((s) => t.find((c) => c.name === s)?.kind === Dt.Blueprint) ?? "", a = {
+  const t = e.map((s) => s.manifest), n = zm(t), o = n.find((s) => t.find((d) => d.name === s)?.kind === Dt.Blueprint) ?? "", a = {
     packages: n.filter((s) => s !== o && s !== On),
     shell: o,
     templatePacks: [],
@@ -6503,10 +6506,10 @@ var Xm = ({ document: e, runtime: t, resolveBinding: n, registry: o = t.registry
     a,
     t.profile,
     t.packages
-  ]), c = $(() => Qn(t), [t]);
+  ]), d = $(() => Qn(t), [t]);
   return /* @__PURE__ */ i(oa, {
-    theme: c,
-    className: `studio-profile-theme ${Kn(c)}`,
+    theme: d,
+    className: `studio-profile-theme ${Kn(d)}`,
     children: /* @__PURE__ */ i(ta, {
       registry: t.iconAdapters,
       children: /* @__PURE__ */ i(va, {
@@ -6561,7 +6564,7 @@ function ah(e, t = 240) {
   return pe(() => {
     const r = e.current;
     if (!r || !n) return;
-    const s = new IntersectionObserver((c) => a(c.some((u) => u.isIntersecting)), { rootMargin: `${t}px` });
+    const s = new IntersectionObserver((d) => a(d.some((u) => u.isIntersecting)), { rootMargin: `${t}px` });
     return s.observe(r), () => s.disconnect();
   }, [
     e,
@@ -6574,8 +6577,8 @@ var rh = [
   "#fa0",
   "#3c3"
 ], ih = () => {
-}, Jo = 16, yg = ({ document: e, runtime: t, windowSize: n, width: o, title: a, openTitle: r, onClick: s, placeholder: c }) => {
-  const u = te(null), d = ah(u), l = $(() => oh(n, o ?? 240, o === void 0 ? 112 : void 0), [
+}, Jo = 16, yg = ({ document: e, runtime: t, windowSize: n, width: o, title: a, openTitle: r, onClick: s, placeholder: d }) => {
+  const u = Z(null), c = ah(u), l = $(() => oh(n, o ?? 240, o === void 0 ? 112 : void 0), [
     n?.width,
     n?.height,
     o
@@ -6596,7 +6599,7 @@ var rh = [
     className: `screen-thumbnail__body ${Kn(m)}`,
     "data-screen-thumbnail-body": "",
     inert: !0,
-    children: d ? /* @__PURE__ */ i("div", {
+    children: c ? /* @__PURE__ */ i("div", {
       className: "screen-thumbnail__canvas",
       style: {
         width: l.canvasWidth,
@@ -6611,7 +6614,7 @@ var rh = [
         resolveBinding: ih,
         registry: g
       })
-    }) : c
+    }) : d
   })] });
   return s ? /* @__PURE__ */ i("div", {
     ref: u,