@cratis/event-models 0.281.1 → 0.281.3

package/dist/screen-editor/index.js

@@ -135,7 +135,7 @@ var ju = (e) => e ? {
 ], ua = ({ sourceRect: e, initialSize: t, centerOffsetX: n = 0, children: o, renderInspector: i, canClose: r, onClosed: s }) => {
   const [l, c] = L("entering"), [u, d] = L(() => ju(t)), p = V(u);
   p.current = u;
-  const [m, g] = L(!1), [f, v] = L(() => ({
+  const [m, f] = L(!1), [g, v] = L(() => ({
     width: window.innerWidth,
     height: window.innerHeight
   }));
@@ -146,7 +146,7 @@ var ju = (e) => e ? {
     });
     return window.addEventListener("resize", I), () => window.removeEventListener("resize", I);
   }, []);
-  const h = z(() => g((I) => !I), []), k = V(null);
+  const h = z(() => f((I) => !I), []), k = V(null);
   ie(() => {
     const I = requestAnimationFrame(() => c("visible"));
     return () => cancelAnimationFrame(I);
@@ -161,7 +161,7 @@ var ju = (e) => e ? {
       startWidth: u.width,
       startHeight: u.height
     }, H.target.setPointerCapture(H.pointerId);
-  }, y = z((I) => {
+  }, w = z((I) => {
     const H = k.current;
     if (!H) return;
     const { direction: te } = H;
@@ -180,7 +180,7 @@ var ju = (e) => e ? {
     });
   }, []), S = z(() => {
     k.current = null;
-  }, []), w = Fu(u, f, n - (m ? 360 / 2 : 0)), T = w.offsetX, A = {
+  }, []), y = Fu(u, g, n - (m ? 360 / 2 : 0)), T = y.offsetX, A = {
     size: u,
     setSize: d,
     isInspectorOpen: m,
@@ -191,7 +191,7 @@ var ju = (e) => e ? {
     closeWithoutSaving: () => {
       x(!0);
     }
-  }, N = e.left + e.width / 2, C = e.top + e.height / 2, $ = f.width / 2 + T - w.width / 2, _ = f.height / 2 - w.height / 2, R = `${N - $}px ${C - _}px`, F = [
+  }, N = e.left + e.width / 2, C = e.top + e.height / 2, $ = g.width / 2 + T - y.width / 2, _ = g.height / 2 - y.height / 2, R = `${N - $}px ${C - _}px`, F = [
     "prototype-editor-overlay-content",
     l === "visible" ? "prototype-editor-overlay-content--visible" : "",
     l === "closing" ? "prototype-editor-overlay-content--closing" : ""
@@ -207,17 +207,17 @@ var ju = (e) => e ? {
       "data-testid": "studio-screen-editor-frame",
       style: {
         transformOrigin: R,
-        width: w.width,
-        height: w.height,
-        marginLeft: -(w.width / 2) + T,
-        marginTop: -(w.height / 2)
+        width: y.width,
+        height: y.height,
+        marginLeft: -(y.width / 2) + T,
+        marginTop: -(y.height / 2)
       },
       onClick: (I) => I.stopPropagation(),
       onPointerDown: (I) => I.stopPropagation(),
       children: [l === "visible" && Uu.map((I) => /* @__PURE__ */ a("div", {
         className: `prototype-editor-overlay-resize prototype-editor-overlay-resize--${I}`,
         onPointerDown: (H) => O(I, H),
-        onPointerMove: y,
+        onPointerMove: w,
         onPointerUp: S,
         onPointerCancel: S
       }, I)), o(A)]
@@ -373,11 +373,11 @@ function Xn(e, t = () => {
 }
 var ge = (e, t) => typeof e == "number" ? e : t;
 function fa(e, t) {
-  const n = e, o = { ...n.properties ?? {} }, i = sn(e).map((y) => fa(y, t)), r = o[Xu];
+  const n = e, o = { ...n.properties ?? {} }, i = sn(e).map((w) => fa(w, t)), r = o[Xu];
   if (r != null && typeof r == "object") return op(r, n, o, i);
-  const s = o[Mi], l = typeof o.legacyType == "string" && o.legacyType !== "" ? o[Ai] : void 0, c = l ?? (Jt(e) ? Zu(ha(e)) : t(Ye(e) ? e.componentName : "")), u = Ye(e) ? e.componentName : "", { [Ai]: d, [Mi]: p, [et]: m, [tt]: g, ...f } = o, v = {};
-  for (const y of s?.topKeys ?? []) y in f && (v[y] = f[y], delete f[y]);
-  const h = ge(m, s?.position.x ?? 0), k = ge(g, s?.position.y ?? 0), x = n.name ?? "", O = s?.emptyName === !0 && x === (l ?? "");
+  const s = o[Mi], l = typeof o.legacyType == "string" && o.legacyType !== "" ? o[Ai] : void 0, c = l ?? (Jt(e) ? Zu(ha(e)) : t(Ye(e) ? e.componentName : "")), u = Ye(e) ? e.componentName : "", { [Ai]: d, [Mi]: p, [et]: m, [tt]: f, ...g } = o, v = {};
+  for (const w of s?.topKeys ?? []) w in g && (v[w] = g[w], delete g[w]);
+  const h = ge(m, s?.position.x ?? 0), k = ge(f, s?.position.y ?? 0), x = n.name ?? "", O = s?.emptyName === !0 && x === (l ?? "");
   return {
     ...np(n, s),
     ...v,
@@ -386,7 +386,7 @@ function fa(e, t) {
     ...O ? {} : { name: x },
     componentName: c ? c.slice(c.lastIndexOf(".") + 1) : ma(u),
     properties: {
-      ...f,
+      ...g,
       canvas: {
         ...s?.canvas ?? {},
         x: h,
@@ -569,7 +569,7 @@ var ya = ({ ownership: e, label: t }) => e === oe.Local ? null : /* @__PURE__ */
   children: t
 });
 function lp({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: i, dropZone: r, onSelect: s, onToggle: l, onKeyDown: c, onDragStart: u, onDragOver: d, onDrop: p, onDragEnd: m }) {
-  const g = t.ownershipOf(e.node), f = _t(g, Le.Move) && (t.isMovable?.(e.node) ?? !0), v = t.detailOf?.(e.node), h = t.problemsOf?.(e.node) ?? 0;
+  const f = t.ownershipOf(e.node), g = _t(f, Le.Move) && (t.isMovable?.(e.node) ?? !0), v = t.detailOf?.(e.node), h = t.problemsOf?.(e.node) ?? 0;
   return /* @__PURE__ */ b("li", {
     role: "treeitem",
     "aria-level": e.depth + 1,
@@ -577,11 +577,11 @@ function lp({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: i, dro
     "aria-expanded": e.hasChildren ? e.isExpanded : void 0,
     tabIndex: i ? 0 : -1,
     "data-row-id": e.id,
-    "data-ownership": g,
+    "data-ownership": f,
     "data-drop-zone": r,
     className: "studio-editor-structure-row",
     style: { paddingInlineStart: `${e.depth * 16 + 8}px` },
-    draggable: f,
+    draggable: g,
     onClick: () => s(e.id),
     onKeyDown: (k) => c(k, e.id),
     onDragStart: () => u(e.id),
@@ -616,8 +616,8 @@ function lp({ row: e, adapter: t, strings: n, isSelected: o, isFocusable: i, dro
         children: ["⚠ ", h]
       }),
       /* @__PURE__ */ a(ya, {
-        ownership: g,
-        label: n.ownership[g]
+        ownership: f,
+        label: n.ownership[f]
       })
     ]
   });
@@ -629,23 +629,23 @@ var Fi = {
   ArrowRight: $e.Indent
 };
 function wa({ roots: e, adapter: t, strings: n, selectedId: o, onSelect: i, onEdit: r, onRemove: s }) {
-  const [l, c] = L(() => new Set(e.flatMap((N) => [t.idOf(N), ...t.childrenOf(N).map((C) => t.idOf(C))]))), [u, d] = L(o), [p, m] = L(), [g, f] = L(), [v, h] = L(""), k = j(() => ba(e, l, t), [
+  const [l, c] = L(() => new Set(e.flatMap((N) => [t.idOf(N), ...t.childrenOf(N).map((C) => t.idOf(C))]))), [u, d] = L(o), [p, m] = L(), [f, g] = L(), [v, h] = L(""), k = j(() => ba(e, l, t), [
     e,
     l,
     t
   ]), x = k.some((N) => N.id === u) ? u : k[0]?.id, O = z((N) => c((C) => {
     const $ = new Set(C);
     return $.delete(N) || $.add(N), $;
-  }), []), y = z((N) => {
+  }), []), w = z((N) => {
     if (!N) return;
     const C = r(N);
     h(C ? n.rejection[C] : n.moved), !C && N.targetParentId && c(($) => new Set($).add(N.targetParentId));
   }, [r, n]), S = (N) => {
     N && (d(N), requestAnimationFrame(() => document.querySelector(`[data-row-id="${CSS.escape(N)}"]`)?.focus()));
-  }, w = (N, C) => {
+  }, y = (N, C) => {
     const $ = k.findIndex((R) => R.id === C), _ = k[$];
     if (N.altKey && Fi[N.key]) {
-      N.preventDefault(), y(rp(e, C, Fi[N.key], t)), S(C);
+      N.preventDefault(), w(rp(e, C, Fi[N.key], t)), S(C);
       return;
     }
     if (Bo(N) && s && eo(e, C, t)) {
@@ -681,12 +681,12 @@ function wa({ roots: e, adapter: t, strings: n, selectedId: o, onSelect: i, onEd
     if (!p) return;
     N.preventDefault();
     const $ = N.currentTarget.getBoundingClientRect(), _ = k.find((R) => R.id === C);
-    f({
+    g({
       id: C,
       zone: sp(N.clientY - $.top, $.height, !!_ && t.acceptsChildren(_.node))
     });
   }, A = (N, C) => {
-    N.preventDefault(), p && g?.id === C && y(ap(e, p, C, g.zone, t)), m(void 0), f(void 0);
+    N.preventDefault(), p && f?.id === C && w(ap(e, p, C, f.zone, t)), m(void 0), g(void 0);
   };
   return k.length === 0 ? /* @__PURE__ */ a("p", {
     className: "studio-editor-structure-empty",
@@ -701,17 +701,17 @@ function wa({ roots: e, adapter: t, strings: n, selectedId: o, onSelect: i, onEd
       strings: n,
       isSelected: N.id === o,
       isFocusable: N.id === x,
-      dropZone: g?.id === N.id ? g.zone : void 0,
+      dropZone: f?.id === N.id ? f.zone : void 0,
       onSelect: (C) => {
         d(C), i(C);
       },
       onToggle: O,
-      onKeyDown: w,
+      onKeyDown: y,
       onDragStart: m,
       onDragOver: T,
       onDrop: A,
       onDragEnd: () => {
-        m(void 0), f(void 0);
+        m(void 0), g(void 0);
       }
     }, N.id))
   }), /* @__PURE__ */ a("p", {
@@ -958,7 +958,7 @@ function Uo(e, t, n = []) {
 var Cp = ({ component: e, descriptor: t, controller: n, environment: o, strings: i, disabled: r }) => {
   const [s, l] = L([]), { designTime: c, packageDescriptorOf: u } = o.runtime, d = u(t);
   if ((d.actions ?? []).length === 0) return null;
-  const p = (h) => un(e, d, n, o, h), m = c.actions(d, p(i.properties.designTimeActions)), g = Uo(d, o, m.map((h) => h.diagnostic)) !== void 0, f = g ? [] : m.flatMap((h) => h.diagnostic ? [h.diagnostic] : []), v = (h, k) => {
+  const p = (h) => un(e, d, n, o, h), m = c.actions(d, p(i.properties.designTimeActions)), f = Uo(d, o, m.map((h) => h.diagnostic)) !== void 0, g = f ? [] : m.flatMap((h) => h.diagnostic ? [h.diagnostic] : []), v = (h, k) => {
     const x = c.runAction(d, h, p(k));
     l(x.diagnostics);
   };
@@ -969,13 +969,13 @@ var Cp = ({ component: e, descriptor: t, controller: n, environment: o, strings:
       m.filter((h) => h.visible).map((h) => /* @__PURE__ */ a("button", {
         type: "button",
         disabled: r || !h.enabled,
-        title: g ? h.descriptor.description : h.diagnostic ?? h.descriptor.description,
+        title: f ? h.descriptor.description : h.diagnostic ?? h.descriptor.description,
         onClick: () => v(h.descriptor.id, h.descriptor.label),
         children: h.descriptor.label
       }, h.descriptor.id)),
-      [...f, ...s].length > 0 && /* @__PURE__ */ a("ul", {
+      [...g, ...s].length > 0 && /* @__PURE__ */ a("ul", {
         className: "studio-editor-properties__action-messages",
-        children: [.../* @__PURE__ */ new Set([...f, ...s])].map((h) => /* @__PURE__ */ a("li", { children: h }, h))
+        children: [.../* @__PURE__ */ new Set([...g, ...s])].map((h) => /* @__PURE__ */ a("li", { children: h }, h))
       })
     ]
   });
@@ -1501,7 +1501,7 @@ var Qp = ({ form: e, slice: t, idPrefix: n, strings: o, disabled: i, onChange: r
       /* @__PURE__ */ a("legend", { children: u.label }),
       /* @__PURE__ */ b("label", { children: [/* @__PURE__ */ a("span", { children: u.command }), /* @__PURE__ */ b("select", {
         value: d?.id ?? t ?? "",
-        onChange: (g) => s(n.find((f) => f.id === g.target.value)),
+        onChange: (f) => s(n.find((g) => g.id === f.target.value)),
         children: [
           /* @__PURE__ */ a("option", {
             value: "",
@@ -1511,10 +1511,10 @@ var Qp = ({ form: e, slice: t, idPrefix: n, strings: o, disabled: i, onChange: r
             value: t,
             children: t
           }),
-          n.map((g) => /* @__PURE__ */ b("option", {
-            value: g.id,
-            children: [g.name, g.origin.length > 0 ? ` - ${g.origin.join(" / ")}` : ""]
-          }, g.id))
+          n.map((f) => /* @__PURE__ */ b("option", {
+            value: f.id,
+            children: [f.name, f.origin.length > 0 ? ` - ${f.origin.join(" / ")}` : ""]
+          }, f.id))
         ]
       })] }),
       m && /* @__PURE__ */ a("p", {
@@ -1651,12 +1651,12 @@ function rm(e, t) {
 var Nt = /* @__PURE__ */ (function(e) {
   return e.Desktop = "desktop", e.Tablet = "tablet", e.Phone = "phone", e;
 })({}), am = ({ templateName: e, environment: t, strings: n, disabled: o, onApply: i, onDiscard: r }) => {
-  const [s, l] = L(pt.Populated), [c, u] = L(Nt.Desktop), { bundles: d, profile: p, registry: m, designTime: g } = t.runtime, f = j(() => im(e, s, d, p), [
+  const [s, l] = L(pt.Populated), [c, u] = L(Nt.Desktop), { bundles: d, profile: p, registry: m, designTime: f } = t.runtime, g = j(() => im(e, s, d, p), [
     e,
     s,
     d,
     p
-  ]), v = rm(e, g.host.templates);
+  ]), v = rm(e, f.host.templates);
   return /* @__PURE__ */ b("section", {
     className: "studio-editor-template-preview",
     "aria-label": n.preview(e),
@@ -1683,13 +1683,13 @@ var Nt = /* @__PURE__ */ (function(e) {
         className: "studio-editor-template-preview__frame",
         "data-size": c,
         "data-state": s,
-        children: f ? /* @__PURE__ */ a(wt, {
+        children: g ? /* @__PURE__ */ a(wt, {
           fallback: /* @__PURE__ */ a("p", {
             role: "alert",
             children: n.previewFailed
           }),
           children: /* @__PURE__ */ a(Ao, {
-            element: f,
+            element: g,
             registry: m,
             resolveBinding: () => {
             }
@@ -1819,8 +1819,8 @@ var Nt = /* @__PURE__ */ (function(e) {
     ...c,
     ...t.runtime.bundles.flatMap((h) => h.screenTemplates ?? []),
     ...e.document.screenTemplates
-  ].find((h) => h.name === p), g = p !== void 0 && c.some((h) => h.name === p), f = p ? {
-    kind: g ? ui.Application : ui.Blueprint,
+  ].find((h) => h.name === p), f = p !== void 0 && c.some((h) => h.name === p), g = p ? {
+    kind: f ? ui.Application : ui.Blueprint,
     id: p
   } : void 0, v = {
     onChoose: (h) => u(h.name),
@@ -1844,7 +1844,7 @@ var Nt = /* @__PURE__ */ (function(e) {
       /* @__PURE__ */ a(Ms, {
         ariaLabel: i.choose,
         applicable: d,
-        current: f,
+        current: g,
         currentLabel: p ? m?.displayName ?? p : void 0,
         labels: i.picker,
         handlers: v,
@@ -2066,7 +2066,7 @@ var bm = ({ inspection: e, controller: t, strings: n, disabled: o }) => {
 var ym = ({ location: e, strings: t }) => {
   const n = t.properties.location, [o, i] = L(), [r, s] = L(""), [l, c] = L(), [u, d] = L(!1);
   if (!e) return null;
-  const p = o?.featureId ?? e.currentFeatureId, m = o?.path ?? e.path, g = e.features.filter((v) => v.id !== p), f = async () => {
+  const p = o?.featureId ?? e.currentFeatureId, m = o?.path ?? e.path, f = e.features.filter((v) => v.id !== p), g = async () => {
     const v = e.features.find((k) => k.id === r);
     if (!v || !e.move) return;
     d(!0);
@@ -2098,7 +2098,7 @@ var ym = ({ location: e, strings: t }) => {
           children: m.map((v, h) => /* @__PURE__ */ a("li", { children: v }, `${h}:${v}`))
         })]
       }),
-      e.move && g.length > 0 && /* @__PURE__ */ b("div", {
+      e.move && f.length > 0 && /* @__PURE__ */ b("div", {
         className: "studio-editor-properties__location-move",
         children: [
           /* @__PURE__ */ b("label", { children: [/* @__PURE__ */ a("span", { children: n.moveTo }), /* @__PURE__ */ b("select", {
@@ -2108,7 +2108,7 @@ var ym = ({ location: e, strings: t }) => {
             children: [/* @__PURE__ */ a("option", {
               value: "",
               children: m.join(" / ")
-            }), g.map((v) => /* @__PURE__ */ a("option", {
+            }), f.map((v) => /* @__PURE__ */ a("option", {
               value: v.id,
               children: v.path.join(" / ")
             }, v.id))]
@@ -2117,7 +2117,7 @@ var ym = ({ location: e, strings: t }) => {
             type: "button",
             disabled: u || r === "",
             onClick: () => {
-              f();
+              g();
             },
             children: n.move
           }),
@@ -2235,7 +2235,7 @@ function zi(e, t) {
   };
 }
 var zo = ({ registry: e, property: t, context: n, componentId: o, onChange: i, diagnostics: r, presentation: s = "field" }) => {
-  const l = s === "popover", { descriptor: c } = t, u = `pe-${o}-${c.path}`.replace(/[^A-Za-z0-9_-]/g, "-"), d = e.resolve(c), p = Ds(t), { editor: m, failed: g } = zi(e, d?.id), { editor: f } = zi(e, p ? "bindingExpression" : void 0), v = n.strings.editors, h = !t.editable || c.readOnly === !0, k = t.editable ? c.readOnly === !0 ? v.readOnly : void 0 : t.reason ?? v.inherited, x = t.effectiveValue, O = Nm(t, r), y = x == null || !pi(c) ? void 0 : Sn(c, x) ?? io(c, x), S = y !== void 0 && Sn(c, x) !== void 0 ? Ls(c, x) : void 0, w = S !== void 0 && Sn(c, S) === void 0, T = ($) => i(t, $), A = p && $s(x), N = c.valueType === "boolean", C = pi(c);
+  const l = s === "popover", { descriptor: c } = t, u = `pe-${o}-${c.path}`.replace(/[^A-Za-z0-9_-]/g, "-"), d = e.resolve(c), p = Ds(t), { editor: m, failed: f } = zi(e, d?.id), { editor: g } = zi(e, p ? "bindingExpression" : void 0), v = n.strings.editors, h = !t.editable || c.readOnly === !0, k = t.editable ? c.readOnly === !0 ? v.readOnly : void 0 : t.reason ?? v.inherited, x = t.effectiveValue, O = Nm(t, r), w = x == null || !pi(c) ? void 0 : Sn(c, x) ?? io(c, x), S = w !== void 0 && Sn(c, x) !== void 0 ? Ls(c, x) : void 0, y = S !== void 0 && Sn(c, S) === void 0, T = ($) => i(t, $), A = p && $s(x), N = c.valueType === "boolean", C = pi(c);
   return /* @__PURE__ */ b("div", {
     className: `studio-editor-field${N ? " studio-editor-field--inline" : ""}`,
     "data-property": c.path,
@@ -2253,14 +2253,14 @@ var zo = ({ registry: e, property: t, context: n, componentId: o, onChange: i, d
       }),
       /* @__PURE__ */ b("div", {
         className: "studio-editor-field__control",
-        children: [y !== void 0 ? /* @__PURE__ */ b("div", {
+        children: [w !== void 0 ? /* @__PURE__ */ b("div", {
           className: "studio-editor-structured__mismatch",
           role: "alert",
           children: [
-            /* @__PURE__ */ a("p", { children: n.strings.structured.mismatch(c.label, y) }),
+            /* @__PURE__ */ a("p", { children: n.strings.structured.mismatch(c.label, w) }),
             /* @__PURE__ */ a("button", {
               type: "button",
-              disabled: h || !w,
+              disabled: h || !y,
               onClick: () => T(S),
               children: n.strings.structured.convert
             }),
@@ -2288,7 +2288,7 @@ var zo = ({ registry: e, property: t, context: n, componentId: o, onChange: i, d
             ...k ? { readOnlyReason: k } : {},
             ...O ? { problem: O } : {}
           })
-        }, o) : g ? /* @__PURE__ */ a("p", {
+        }, o) : f ? /* @__PURE__ */ a("p", {
           className: "studio-editor-binding__missing",
           role: "alert",
           children: v.cannotLoad(c.label)
@@ -2300,7 +2300,7 @@ var zo = ({ registry: e, property: t, context: n, componentId: o, onChange: i, d
           className: "studio-editor-structured__undescribed",
           role: "alert",
           children: v.undescribed(c.label)
-        }), f && /* @__PURE__ */ a(f, {
+        }), g && /* @__PURE__ */ a(g, {
           id: `${u}-binding`,
           value: t.currentValue,
           onChange: T,
@@ -2895,7 +2895,7 @@ function Ko(e) {
       diagnostics: s
     },
     references: (v) => d?.references?.(v) ?? []
-  }, g = o.properties, f = g.editors ?? Oa;
+  }, f = o.properties, g = f.editors ?? Oa;
   return {
     model: t.document,
     ...c && t.selectedId ? { selection: {
@@ -2911,15 +2911,15 @@ function Ko(e) {
     lookups: m,
     strings: {
       editors: e.slotNames ? {
-        ...f,
+        ...g,
         renderingSlot: {
-          ...f.renderingSlot,
+          ...g.renderingSlot,
           names: e.slotNames
         }
-      } : f,
-      structured: g.structured ?? xr,
-      icon: g.icon,
-      iconPicker: g.iconPickerLabels ?? Om.properties.iconPickerLabels ?? {}
+      } : g,
+      structured: f.structured ?? xr,
+      icon: f.icon,
+      iconPicker: f.iconPickerLabels ?? Om.properties.iconPickerLabels ?? {}
     }
   };
 }
@@ -3134,12 +3134,12 @@ var jm = ({ behaviors: e, targets: t, destinations: n, slices: o, strings: i, di
   const l = Mm(e), [c, u] = L(X.None), d = l.kind === X.None ? {
     kind: c,
     target: ""
-  } : l, p = Um(d.kind, t, n, o), m = d.target !== "" && !p.some((v) => v.value === d.target), g = (v) => {
+  } : l, p = Um(d.kind, t, n, o), m = d.target !== "" && !p.some((v) => v.value === d.target), f = (v) => {
     u(v), l.kind !== X.None && s(Hi(e, {
       kind: X.None,
       target: ""
     }));
-  }, f = (v) => {
+  }, g = (v) => {
     v === "" && l.kind === X.None || (v === "" && u(d.kind), s(Hi(e, {
       kind: d.kind,
       target: v
@@ -3152,7 +3152,7 @@ var jm = ({ behaviors: e, targets: t, destinations: n, slices: o, strings: i, di
       /* @__PURE__ */ a("legend", { children: i.label }),
       /* @__PURE__ */ b("label", { children: [/* @__PURE__ */ a("span", { children: i.onClick }), /* @__PURE__ */ b("select", {
         value: d.kind,
-        onChange: (v) => g(v.target.value),
+        onChange: (v) => f(v.target.value),
         children: [
           /* @__PURE__ */ a("option", {
             value: X.None,
@@ -3174,7 +3174,7 @@ var jm = ({ behaviors: e, targets: t, destinations: n, slices: o, strings: i, di
       })] }),
       d.kind !== X.None && /* @__PURE__ */ b("label", { children: [/* @__PURE__ */ a("span", { children: i.target }), /* @__PURE__ */ b("select", {
         value: d.target,
-        onChange: (v) => f(v.target.value),
+        onChange: (v) => g(v.target.value),
         children: [
           /* @__PURE__ */ a("option", {
             value: "",
@@ -3463,67 +3463,67 @@ function Ym(e, t) {
   return [n.name, ...o].join(" › ");
 }
 function Yo(e) {
-  const { region: t, module: n, navigation: o, structure: i, newId: r, slots: s, startingLabel: l, strings: c } = e, u = Lr(i, o, n, t), d = Jm(o, n, t), p = ml(i, o, { slots: [...s] }), m = (O) => `${n ?? "application"}:${t}:${O}`, g = [], f = (O, y) => {
-    const S = O.filter((w) => !w.readOnly);
-    O.forEach((w) => {
-      const T = rn(d, w.id)?.target ?? (w.target ? {
-        module: w.target.module,
-        ...w.target.feature ? { feature: w.target.feature } : {}
-      } : void 0), A = w.readOnly ? -1 : S.indexOf(w), N = Ym(i, T), C = p.filter(($) => $.entry === m(w.id)).map(($) => ({
+  const { region: t, module: n, navigation: o, structure: i, newId: r, slots: s, startingLabel: l, strings: c } = e, u = Lr(i, o, n, t), d = Jm(o, n, t), p = ml(i, o, { slots: [...s] }), m = (O) => `${n ?? "application"}:${t}:${O}`, f = [], g = (O, w) => {
+    const S = O.filter((y) => !y.readOnly);
+    O.forEach((y) => {
+      const T = rn(d, y.id)?.target ?? (y.target ? {
+        module: y.target.module,
+        ...y.target.feature ? { feature: y.target.feature } : {}
+      } : void 0), A = y.readOnly ? -1 : S.indexOf(y), N = Ym(i, T), C = p.filter(($) => $.entry === m(y.id)).map(($) => ({
         code: $.code,
         message: $.message
       }));
-      g.push({
-        id: w.id,
-        label: w.title,
+      f.push({
+        id: y.id,
+        label: y.title,
         index: A,
         count: S.length,
-        ...y ? { parentId: y } : {},
-        readOnly: w.readOnly,
-        ...w.readOnly ? {
+        ...w ? { parentId: w } : {},
+        readOnly: y.readOnly,
+        ...y.readOnly ? {
           readOnlyReason: Vo,
           origin: c.application
         } : {},
         values: {
           target: T,
-          slot: w.slot,
-          icon: w.icon,
-          children: w.children?.length
+          slot: y.slot,
+          icon: y.icon,
+          children: y.children?.length
         },
         chips: {
           target: N ?? "",
-          slot: w.slot === "content" || w.slot === "" ? c.mainArea : w.slot
+          slot: y.slot === "content" || y.slot === "" ? c.mainArea : y.slot
         },
         ...C.length > 0 ? { problems: C } : {},
-        unlinked: T === void 0 && !(w.children && w.children.length > 0)
-      }), w.children && f(w.children, w.id);
+        unlinked: T === void 0 && !(y.children && y.children.length > 0)
+      }), y.children && g(y.children, y.id);
     });
   };
-  f(u.items);
-  const v = t, h = (O, y, S, w = {}) => y.rejected ? { rejected: y.rejected } : {
+  g(u.items);
+  const v = t, h = (O, w, S, y = {}) => w.rejected ? { rejected: w.rejected } : {
     label: O,
     edits: [],
-    navigationEdits: y.edits,
+    navigationEdits: w.edits,
     ...S ? { select: S } : {},
-    ...w
+    ...y
   }, k = (O) => ({ edits: [{
     kind: hi.SetRegionItems,
     ...n !== void 0 ? { module: n } : {},
     region: t,
     items: O
   }] }), x = (O) => {
-    const y = r(), S = al(o, n, t, {
-      id: y,
+    const w = r(), S = al(o, n, t, {
+      id: w,
       title: l
-    }, O), w = S.edits.some((T) => T.kind === hi.SetRegionMode);
-    return h("Add", S, { itemId: y }, {
+    }, O), y = S.edits.some((T) => T.kind === hi.SetRegionMode);
+    return h("Add", S, { itemId: w }, {
       renameNext: !0,
-      ...w ? { notice: c.extendsNotice } : {}
+      ...y ? { notice: c.extendsNotice } : {}
     });
   };
   return {
     kind: hn.Region,
-    items: g,
+    items: f,
     regionTag: {
       text: u.sources.label,
       long: c.tagLong(t, u.sources.label),
@@ -3535,42 +3535,42 @@ function Yo(e) {
       ...u.mode ? { mode: Qm(u.mode) } : {}
     },
     add: (O) => O === M.addItem ? x() : { rejected: O },
-    act: (O, y) => {
+    act: (O, w) => {
       switch (O) {
         case M.addSubItem:
-          return y.parentId !== void 0 ? { rejected: "subItemOfSubItem" } : x(y.id);
+          return w.parentId !== void 0 ? { rejected: "subItemOfSubItem" } : x(w.id);
         case M.moveEarlier:
         case M.moveLater: {
-          const S = y.index + (O === M.moveEarlier ? -1 : 1), w = $t(d, y.id);
-          return !w || S < 0 || S >= w.length ? { rejected: "noWhere" } : h("Move", k(Hm(d, y.id, S)), { itemId: y.id });
+          const S = w.index + (O === M.moveEarlier ? -1 : 1), y = $t(d, w.id);
+          return !y || S < 0 || S >= y.length ? { rejected: "noWhere" } : h("Move", k(Hm(d, w.id, S)), { itemId: w.id });
         }
         case M.duplicate: {
-          const S = qm(d, y.id, r);
+          const S = qm(d, w.id, r);
           return S.copy ? h("Duplicate", k(S.items), { itemId: S.copy.id }) : { rejected: O };
         }
         case M.delete: {
-          const S = $t(d, y.id) ?? [], w = S.findIndex((A) => A.id === y.id), T = S[w + 1] ?? S[w - 1];
-          return h("Remove", k(Km(d, y.id)), { itemId: T?.id ?? null });
+          const S = $t(d, w.id) ?? [], y = S.findIndex((A) => A.id === w.id), T = S[y + 1] ?? S[y - 1];
+          return h("Remove", k(Km(d, w.id)), { itemId: T?.id ?? null });
         }
         default:
           return { rejected: O };
       }
     },
-    rename: (O, y) => h("Rename", k(Wt(d, O.id, { title: y })), { itemId: O.id }),
-    choice: (O, y) => {
-      const S = rn(d, y.id);
+    rename: (O, w) => h("Rename", k(Wt(d, O.id, { title: w })), { itemId: O.id }),
+    choice: (O, w) => {
+      const S = rn(d, w.id);
       if (S) {
         if (O === M.target) return {
           property: Mn("target", "Navigate to", "navigationItemTarget", S.target),
-          plan: (w) => h("Link", k(Wt(d, y.id, { target: Zm(w) ? w : void 0 })), { itemId: y.id })
+          plan: (y) => h("Link", k(Wt(d, w.id, { target: Zm(y) ? y : void 0 })), { itemId: w.id })
         };
         if (O === M.slot) return {
           property: Mn("slot", "Render into slot", "renderingSlot", S.slot ?? "content"),
-          plan: (w) => h("Change", k(Wt(d, y.id, { slot: typeof w == "string" && w !== "content" ? w : void 0 })), { itemId: y.id })
+          plan: (y) => h("Change", k(Wt(d, w.id, { slot: typeof y == "string" && y !== "content" ? y : void 0 })), { itemId: w.id })
         };
         if (O === "icon") return {
           property: Mn("icon", "Icon", "icon", S.icon),
-          plan: (w) => h("Change", k(Wt(d, y.id, { icon: typeof w == "string" && w !== "" ? w : void 0 })), { itemId: y.id })
+          plan: (y) => h("Change", k(Wt(d, w.id, { icon: typeof y == "string" && y !== "" ? y : void 0 })), { itemId: w.id })
         };
       }
     },
@@ -3607,29 +3607,29 @@ function Mn(e, t, n, o) {
 }
 var yt = () => globalThis.crypto.randomUUID(), Gi = (e) => typeof e == "string" ? e : "";
 function Xm({ componentId: e, property: t, newId: n, startingLabel: o, startingDestination: i }) {
-  const r = t.descriptor.path, s = t.items ?? [], l = s.filter((g) => g.editable), c = new Set(t.operations ?? []), u = {
+  const r = t.descriptor.path, s = t.items ?? [], l = s.filter((f) => f.editable), c = new Set(t.operations ?? []), u = {
     component: e,
     path: r
-  }, d = s.map((g) => {
-    const f = l.indexOf(g);
+  }, d = s.map((f) => {
+    const g = l.indexOf(f);
     return {
-      id: g.id,
-      label: Gi(g.values.label) || Gi(g.values.title),
-      index: f,
+      id: f.id,
+      label: Gi(f.values.label) || Gi(f.values.title),
+      index: g,
       count: l.length,
-      readOnly: !g.editable,
-      ...g.editable ? {} : { readOnlyReason: Vo },
-      values: g.values,
-      unlinked: g.values.destination === void 0 && g.values.target === void 0
+      readOnly: !f.editable,
+      ...f.editable ? {} : { readOnlyReason: Vo },
+      values: f.values,
+      unlinked: f.values.destination === void 0 && f.values.target === void 0
     };
-  }), p = (g) => c.has(g), m = (g) => p(g) ? void 0 : { rejected: t.reason ?? g };
+  }), p = (f) => c.has(f), m = (f) => p(f) ? void 0 : { rejected: t.reason ?? f };
   return {
     kind: hn.Collection,
     items: d,
-    add: (g) => {
-      if (g !== M.addItem) return { rejected: g };
-      const f = m(we.Add);
-      if (f) return f;
+    add: (f) => {
+      if (f !== M.addItem) return { rejected: f };
+      const g = m(we.Add);
+      if (g) return g;
       const v = t.descriptor.item?.properties.some((k) => k.path === "destination" && k.constraints?.required === !0) === !0;
       if (v && i === void 0) return { rejected: "noDestination" };
       const h = n();
@@ -3651,28 +3651,28 @@ function Xm({ componentId: e, property: t, newId: n, startingLabel: o, startingD
         renameNext: !0
       };
     },
-    act: (g, f) => {
-      switch (g) {
+    act: (f, g) => {
+      switch (f) {
         case M.moveEarlier:
         case M.moveLater: {
           const v = m(we.Reorder);
           if (v) return v;
-          const h = f.index + (g === M.moveEarlier ? -1 : 1);
+          const h = g.index + (f === M.moveEarlier ? -1 : 1);
           return h < 0 || h >= l.length ? { rejected: "noWhere" } : {
             label: "Move",
             edits: [{
               kind: Y.ReorderCollectionItem,
               ...u,
-              itemId: f.id,
+              itemId: g.id,
               index: h
             }],
-            select: { itemId: f.id }
+            select: { itemId: g.id }
           };
         }
         case M.duplicate: {
           const v = m(we.Add);
           if (v) return v;
-          const h = n(), k = s.find((x) => x.id === f.id);
+          const h = n(), k = s.find((x) => x.id === g.id);
           return {
             label: "Duplicate",
             edits: [{
@@ -3682,7 +3682,7 @@ function Xm({ componentId: e, property: t, newId: n, startingLabel: o, startingD
                 id: h,
                 values: structuredClone(k?.values ?? {})
               },
-              index: f.index + 1
+              index: g.index + 1
             }],
             select: { itemId: h }
           };
@@ -3690,31 +3690,31 @@ function Xm({ componentId: e, property: t, newId: n, startingLabel: o, startingD
         case M.delete: {
           const v = m(we.Remove);
           if (v) return v;
-          const h = l[f.index + 1] ?? l[f.index - 1];
+          const h = l[g.index + 1] ?? l[g.index - 1];
           return {
             label: "Remove",
             edits: [{
               kind: Y.RemoveCollectionItem,
               ...u,
-              itemId: f.id
+              itemId: g.id
             }],
             select: { itemId: h?.id ?? null }
           };
         }
         default:
-          return { rejected: g };
+          return { rejected: f };
       }
     },
-    rename: (g, f) => m(we.EditFields) ?? {
+    rename: (f, g) => m(we.EditFields) ?? {
       label: "Rename",
       edits: [{
         kind: Y.EditCollectionItem,
         ...u,
-        itemId: g.id,
+        itemId: f.id,
         field: "label",
-        value: f
+        value: g
       }],
-      select: { itemId: g.id }
+      select: { itemId: f.id }
     },
     choice: () => {
     },
@@ -3817,12 +3817,12 @@ var lo = (e) => typeof e == "string" ? e : "", fn = { [M.addButton]: {
 function oh({ component: e, addActionId: t, ownershipOf: n, inspect: o, newId: i, startingLabel: r, structure: s }) {
   const l = fn[t];
   if (!l) return;
-  const c = e.slots?.[l.slot] ?? [], u = c.map((m, g) => {
-    const f = m.id, v = m.properties ?? {}, h = n(f) !== oe.Local, k = s ? $a(s, f, v) : void 0;
+  const c = e.slots?.[l.slot] ?? [], u = c.map((m, f) => {
+    const g = m.id, v = m.properties ?? {}, h = n(g) !== oe.Local, k = s ? $a(s, g, v) : void 0;
     return {
-      id: f,
+      id: g,
       label: lo(v[l.labelProperty]),
-      index: g,
+      index: f,
       count: c.length,
       readOnly: h,
       ...h ? { readOnlyReason: Vo } : {},
@@ -3830,15 +3830,15 @@ function oh({ component: e, addActionId: t, ownershipOf: n, inspect: o, newId: i
         ...v,
         slice: k.slice
       } : v,
-      unlinked: k ? !1 : l.isUnlinked(f, v)
+      unlinked: k ? !1 : l.isUnlinked(g, v)
     };
-  }), d = ae(e.id), p = (m, g, f) => ({
-    label: f,
+  }), d = ae(e.id), p = (m, f, g) => ({
+    label: g,
     edits: [{
       kind: Y.InsertNode,
       target: d,
       slot: l.slot,
-      index: g,
+      index: f,
       element: m
     }],
     select: { elementId: m.id }
@@ -3849,42 +3849,42 @@ function oh({ component: e, addActionId: t, ownershipOf: n, inspect: o, newId: i
     add: (m) => {
       if (m !== t) return { rejected: m };
       if (n(e.id) !== oe.Local) return { rejected: "inherited" };
-      const g = ue(i(), l.componentName, l.componentName, {
+      const f = ue(i(), l.componentName, l.componentName, {
         ...l.startingProperties,
         [l.labelProperty]: r
       });
       return {
-        ...p(g, c.length, "Add"),
+        ...p(f, c.length, "Add"),
         renameNext: !0
       };
     },
-    act: (m, g) => {
-      const f = c[g.index];
+    act: (m, f) => {
+      const g = c[f.index];
       switch (m) {
         case M.moveEarlier:
         case M.moveLater: {
-          const v = g.index + (m === M.moveEarlier ? -1 : 1);
+          const v = f.index + (m === M.moveEarlier ? -1 : 1);
           return v < 0 || v >= c.length ? { rejected: "noWhere" } : {
             label: "Move",
             edits: [{
               kind: Y.MoveNode,
-              nodeId: ae(g.id),
+              nodeId: ae(f.id),
               target: d,
               slot: l.slot,
               index: v
             }],
-            select: { elementId: g.id }
+            select: { elementId: f.id }
           };
         }
         case M.duplicate:
-          return p(nh(f, i), g.index + 1, "Duplicate");
+          return p(nh(g, i), f.index + 1, "Duplicate");
         case M.delete: {
-          const v = c[g.index + 1] ?? c[g.index - 1];
+          const v = c[f.index + 1] ?? c[f.index - 1];
           return {
             label: "Remove",
             edits: [{
               kind: Y.RemoveNode,
-              nodeId: ae(g.id)
+              nodeId: ae(f.id)
             }],
             select: { elementId: v ? v.id : e.id }
           };
@@ -3893,23 +3893,23 @@ function oh({ component: e, addActionId: t, ownershipOf: n, inspect: o, newId: i
           return { rejected: m };
       }
     },
-    rename: (m, g) => {
-      const f = o(m.id)?.properties.find((v) => v.descriptor.path === l.labelProperty);
-      return f ? {
+    rename: (m, f) => {
+      const g = o(m.id)?.properties.find((v) => v.descriptor.path === l.labelProperty);
+      return g ? {
         label: "Rename",
-        edits: [ao(m.id, f, g)],
+        edits: [ao(m.id, g, f)],
         select: { elementId: m.id }
       } : { rejected: "rename" };
     },
-    choice: (m, g) => {
-      const f = m === M.slice ? "slice" : m === M.emphasis ? "emphasis" : void 0, v = f ? o(g.id)?.properties.find((h) => h.descriptor.path === f) : void 0;
+    choice: (m, f) => {
+      const g = m === M.slice ? "slice" : m === M.emphasis ? "emphasis" : void 0, v = g ? o(f.id)?.properties.find((h) => h.descriptor.path === g) : void 0;
       if (v)
         return {
           property: v,
           plan: (h) => ({
             label: "Change",
-            edits: [ao(g.id, v, h)],
-            select: { elementId: g.id }
+            edits: [ao(f.id, v, h)],
+            select: { elementId: f.id }
           })
         };
     },
@@ -3940,10 +3940,10 @@ function Ji(e, t, n, o, i) {
   if (!d) return;
   let p;
   if (d.itemsPath !== void 0) {
-    const g = s(t.id)?.properties.find((f) => f.descriptor.path === d.itemsPath);
-    p = g && Xm({
+    const f = s(t.id)?.properties.find((g) => g.descriptor.path === d.itemsPath);
+    p = f && Xm({
       componentId: t.id,
-      property: g,
+      property: f,
       newId: c,
       startingLabel: u.item,
       ...e.startingDestination ? { startingDestination: e.startingDestination } : {}
@@ -3958,7 +3958,7 @@ function Ji(e, t, n, o, i) {
     ...e.structure ? { structure: e.structure } : {}
   }) : p = e.otherSource?.(t, i ? void 0 : o);
   if (!p) return;
-  const m = o === void 0 ? void 0 : p.items.find((g) => g.id === o);
+  const m = o === void 0 ? void 0 : p.items.find((f) => f.id === o);
   return {
     componentId: t.id,
     componentName: t.componentName,
@@ -3974,13 +3974,13 @@ function rh({ controller: e, environment: t, strings: n, startingLabels: o, star
     const C = setTimeout(() => p(""), 4e3);
     return () => clearTimeout(C);
   }, [d]);
-  const { document: m, composition: g, context: f, selectedId: v, ownershipOf: h, selectedItemId: k, navigation: x, navigationModule: O, structure: y } = e, S = t.navigation?.slots ?? t.propertyEditors?.slots ?? ah, w = z((C) => {
+  const { document: m, composition: f, context: g, selectedId: v, ownershipOf: h, selectedItemId: k, navigation: x, navigationModule: O, structure: w } = e, S = t.navigation?.slots ?? t.propertyEditors?.slots ?? ah, y = z((C) => {
     const $ = gn(C.componentName);
     return $ ? Yo({
       region: $,
       module: O,
       navigation: x,
-      structure: y,
+      structure: w,
       newId: yt,
       slots: S,
       startingLabel: o.item,
@@ -3996,35 +3996,35 @@ function rh({ controller: e, environment: t, strings: n, startingLabels: o, star
   }, [
     O,
     x,
-    y,
+    w,
     S,
     o,
     n,
     r,
     k
   ]), T = j(() => ih({
-    roots: g.roots,
-    catalog: f.catalog,
+    roots: f.roots,
+    catalog: g.catalog,
     selectedId: v,
     selectedItemId: k,
     ownershipOf: h,
     newId: yt,
-    inspect: (C) => Po(m, ae(C), f),
+    inspect: (C) => Po(m, ae(C), g),
     startingLabels: o,
-    structure: y,
+    structure: w,
     ...i ? { startingDestination: i } : {},
-    otherSource: w
+    otherSource: y
   }), [
-    g,
     f,
+    g,
     v,
     k,
     h,
     m,
     o,
     i,
-    y,
-    w
+    w,
+    y
   ]), A = e.selectItem, N = z((C, $) => {
     if (Go(C))
       return u(n.announce.refused(C.rejected)), !1;
@@ -4112,7 +4112,7 @@ var Aa = (e) => ({
   editable: r,
   ...s ? { reason: s } : {}
 }), co = ({ controller: e, environment: t, strings: n, region: o, itemId: i }) => {
-  const r = (n.designMode ?? mn).navigation, { selection: s, navigation: l, structure: c, navigationModule: u } = e, d = o ? i : e.selectedItemId, p = o ?? (s && "componentName" in s ? gn(String(s.componentName)) : void 0), [m, g] = L(!1), f = j(() => jo(t.availableSources), [t.availableSources]);
+  const r = (n.designMode ?? mn).navigation, { selection: s, navigation: l, structure: c, navigationModule: u } = e, d = o ? i : e.selectedItemId, p = o ?? (s && "componentName" in s ? gn(String(s.componentName)) : void 0), [m, f] = L(!1), g = j(() => jo(t.availableSources), [t.availableSources]);
   if (!p) return null;
   const v = t.navigation?.slots ?? t.propertyEditors?.slots ?? ["content"], h = Yo({
     region: p,
@@ -4130,14 +4130,14 @@ var Aa = (e) => ({
       application: r.application,
       mainArea: "Main area"
     }
-  }), k = c.modules.find((I) => I.id === u)?.name ?? u, x = k ?? r.application, O = r.regionName[p], y = d ? h.items.find((I) => I.id === d) : void 0, S = t.propertyEditors?.registry ?? pn, w = Ko({
+  }), k = c.modules.find((I) => I.id === u)?.name ?? u, x = k ?? r.application, O = r.regionName[p], w = d ? h.items.find((I) => I.id === d) : void 0, S = t.propertyEditors?.registry ?? pn, y = Ko({
     controller: e,
     environment: t,
     strings: n,
     ownership: void 0,
     diagnostics: [],
     inCanvas: !1,
-    bindingScope: f,
+    bindingScope: g,
     slotNames: Aa(r)
   }), T = h.region?.mode, A = (I, H = !1) => {
     const te = Ur(l, u, p, I, { copy: H });
@@ -4145,38 +4145,38 @@ var Aa = (e) => ({
   }, N = (I) => {
     if (I !== T) {
       if (T === Ee.Inherit && I === Ee.Override) {
-        g(!0);
+        f(!0);
         return;
       }
-      g(!1), A(I);
+      f(!1), A(I);
     }
-  }, C = y ? !y.readOnly : !1, $ = (I) => {
+  }, C = w ? !w.readOnly : !1, $ = (I) => {
     !I || "rejected" in I || I.navigationEdits && e.applyNavigationEdits(I.navigationEdits, I.label);
   }, _ = (I, H) => {
-    if (y)
+    if (w)
       switch (I.descriptor.path) {
         case "label":
-          typeof H == "string" && H !== "" && $(h.rename(y, H));
+          typeof H == "string" && H !== "" && $(h.rename(w, H));
           break;
         case "target":
-          $(h.choice("target", y)?.plan(H));
+          $(h.choice("target", w)?.plan(H));
           break;
         case "slot":
-          $(h.choice("slot", y)?.plan(H));
+          $(h.choice("slot", w)?.plan(H));
           break;
         case "icon":
-          $(h.choice("icon", y)?.plan(H));
+          $(h.choice("icon", w)?.plan(H));
       }
   }, R = (() => {
-    if (!y) return [];
+    if (!w) return [];
     const I = [];
-    for (let H = y; ; ) {
+    for (let H = w; ; ) {
       I.unshift(H.label);
       const te = H.parentId ? h.items.find((pe) => pe.id === H.parentId) : void 0;
       if (!te) break;
       H = te;
     }
-    return [y.readOnly ? r.application : x, ...I];
+    return [w.readOnly ? r.application : x, ...I];
   })(), F = l.application.logo, G = (I) => {
     const H = Ol(l, u, {
       image: F?.image ?? "",
@@ -4189,14 +4189,14 @@ var Aa = (e) => ({
     className: "studio-editor-properties__navigation",
     "data-region": p,
     "data-scope": u ?? "application",
-    children: y ? /* @__PURE__ */ b(re, { children: [
+    children: w ? /* @__PURE__ */ b(re, { children: [
       /* @__PURE__ */ b("header", {
         className: "studio-editor-properties__header",
         children: [
           /* @__PURE__ */ a("strong", { children: r.navigationItem }),
           /* @__PURE__ */ a("span", {
-            className: `studio-editor-chip${y.readOnly ? " studio-editor-chip--inherited" : ""}`,
-            children: y.readOnly ? r.inheritedReadOnly : r.definedIn(x)
+            className: `studio-editor-chip${w.readOnly ? " studio-editor-chip--inherited" : ""}`,
+            children: w.readOnly ? r.inheritedReadOnly : r.definedIn(x)
           }),
           /* @__PURE__ */ a("span", {
             className: "studio-editor-chip",
@@ -4204,7 +4204,7 @@ var Aa = (e) => ({
           })
         ]
       }),
-      y.readOnly && /* @__PURE__ */ a("p", {
+      w.readOnly && /* @__PURE__ */ a("p", {
         className: "studio-editor-callout",
         role: "note",
         children: k ? r.inheritedNote(k) : r.inheritedFromApplication
@@ -4218,24 +4218,24 @@ var Aa = (e) => ({
           R.join(" › ")
         ]
       }),
-      y.problems?.map((I) => /* @__PURE__ */ a("p", {
+      w.problems?.map((I) => /* @__PURE__ */ a("p", {
         className: "studio-editor-chip studio-editor-chip--error",
         role: "alert",
         children: r.problems[I.code] ?? I.message
       }, I.code)),
       [
-        zt("label", r.label, q.String, "text", y.label, C, r.inheritedFromApplication),
-        zt("target", r.navigateTo, q.String, "navigationItemTarget", y.values.target, C, r.inheritedFromApplication),
-        zt("slot", r.renderIntoSlot, q.String, "renderingSlot", y.values.slot, C, r.inheritedFromApplication),
-        zt("icon", r.icon, q.String, "icon", y.values.icon, C, r.inheritedFromApplication)
+        zt("label", r.label, q.String, "text", w.label, C, r.inheritedFromApplication),
+        zt("target", r.navigateTo, q.String, "navigationItemTarget", w.values.target, C, r.inheritedFromApplication),
+        zt("slot", r.renderIntoSlot, q.String, "renderingSlot", w.values.slot, C, r.inheritedFromApplication),
+        zt("icon", r.icon, q.String, "icon", w.values.icon, C, r.inheritedFromApplication)
       ].map((I) => /* @__PURE__ */ a(zo, {
         registry: S,
         property: I,
-        context: w,
-        componentId: y.id,
+        context: y,
+        componentId: w.id,
         onChange: _,
         diagnostics: []
-      }, `${y.id}-${I.descriptor.path}`))
+      }, `${w.id}-${I.descriptor.path}`))
     ] }) : /* @__PURE__ */ b(re, { children: [
       /* @__PURE__ */ a("header", {
         className: "studio-editor-properties__header",
@@ -4275,7 +4275,7 @@ var Aa = (e) => ({
               autoFocus: !0,
               "data-answer": "copy",
               onClick: () => {
-                g(!1), A(Ee.Override, !0);
+                f(!1), A(Ee.Override, !0);
               },
               children: r.copyYes
             }),
@@ -4283,7 +4283,7 @@ var Aa = (e) => ({
               type: "button",
               "data-answer": "empty",
               onClick: () => {
-                g(!1), A(Ee.Override);
+                f(!1), A(Ee.Override);
               },
               children: r.copyNo
             })
@@ -4333,7 +4333,7 @@ var Aa = (e) => ({
 }, ch = [gt.Topbar, gt.Sidebar], dh = ({ controller: e, environment: t, strings: n }) => {
   const o = lh, i = (n.designMode ?? mn).navigation, [r, s] = L(gt.Topbar), [l, c] = L(), { navigation: u, structure: d, navigationModule: p } = e;
   if (!t.navigation) return null;
-  const m = t.navigation.slots ?? t.propertyEditors?.slots ?? ["content"], g = Yo({
+  const m = t.navigation.slots ?? t.propertyEditors?.slots ?? ["content"], f = Yo({
     region: r,
     module: p,
     navigation: u,
@@ -4349,12 +4349,12 @@ var Aa = (e) => ({
       application: i.application,
       mainArea: "Main area"
     }
-  }), f = g.items.find((y) => y.id === l), v = f !== void 0 && !f.readOnly, h = (y) => {
-    Go(y) || !y.navigationEdits || e.applyNavigationEdits(y.navigationEdits, y.label).applied && y.select?.itemId !== void 0 && c(y.select.itemId === null ? void 0 : y.select.itemId);
-  }, k = (y, S) => h(g.act(y, S)), x = (y) => {
-    c(void 0), e.setNavigationModule(y === "" ? void 0 : y);
-  }, O = (y) => {
-    c(void 0), s(y);
+  }), g = f.items.find((w) => w.id === l), v = g !== void 0 && !g.readOnly, h = (w) => {
+    Go(w) || !w.navigationEdits || e.applyNavigationEdits(w.navigationEdits, w.label).applied && w.select?.itemId !== void 0 && c(w.select.itemId === null ? void 0 : w.select.itemId);
+  }, k = (w, S) => h(f.act(w, S)), x = (w) => {
+    c(void 0), e.setNavigationModule(w === "" ? void 0 : w);
+  }, O = (w) => {
+    c(void 0), s(w);
   };
   return /* @__PURE__ */ b("section", {
     className: "studio-editor-properties__shell-navigation",
@@ -4375,60 +4375,60 @@ var Aa = (e) => ({
         children: [o.level, /* @__PURE__ */ b("select", {
           "data-shell-level": !0,
           value: p ?? "",
-          onChange: (y) => x(y.target.value),
+          onChange: (w) => x(w.target.value),
           children: [/* @__PURE__ */ a("option", {
             value: "",
             children: i.application
-          }), d.modules.map((y) => /* @__PURE__ */ a("option", {
-            value: y.id,
-            children: y.name
-          }, y.id))]
+          }), d.modules.map((w) => /* @__PURE__ */ a("option", {
+            value: w.id,
+            children: w.name
+          }, w.id))]
         })]
       }),
       /* @__PURE__ */ a("div", {
         role: "tablist",
         "aria-label": o.region,
         className: "studio-editor-properties__tabs",
-        children: ch.map((y) => /* @__PURE__ */ a("button", {
+        children: ch.map((w) => /* @__PURE__ */ a("button", {
           type: "button",
           role: "tab",
-          "aria-selected": y === r,
-          "data-shell-region": y,
-          onClick: () => O(y),
-          children: i.regionName[y]
-        }, y))
+          "aria-selected": w === r,
+          "data-shell-region": w,
+          onClick: () => O(w),
+          children: i.regionName[w]
+        }, w))
       }),
       /* @__PURE__ */ b("p", {
         className: "studio-editor-properties__hint",
         children: [
           /* @__PURE__ */ a("strong", { children: o.items }),
           " ",
-          g.regionTag?.long
+          f.regionTag?.long
         ]
       }),
-      g.items.length === 0 && /* @__PURE__ */ a("p", {
+      f.items.length === 0 && /* @__PURE__ */ a("p", {
         className: "studio-editor-properties__hint",
         children: o.empty
       }),
       /* @__PURE__ */ a("ul", {
         className: "studio-editor-properties__items",
         "aria-label": o.items,
-        children: g.items.map((y) => /* @__PURE__ */ a("li", {
-          "data-shell-item": y.id,
-          "data-parent": y.parentId,
-          "data-read-only": y.readOnly || void 0,
-          style: { paddingInlineStart: y.parentId ? "1.5rem" : 0 },
+        children: f.items.map((w) => /* @__PURE__ */ a("li", {
+          "data-shell-item": w.id,
+          "data-parent": w.parentId,
+          "data-read-only": w.readOnly || void 0,
+          style: { paddingInlineStart: w.parentId ? "1.5rem" : 0 },
           children: /* @__PURE__ */ b("button", {
             type: "button",
-            "aria-pressed": y.id === l,
-            onClick: () => c(y.id === l ? void 0 : y.id),
+            "aria-pressed": w.id === l,
+            onClick: () => c(w.id === l ? void 0 : w.id),
             children: [
-              y.label,
-              y.readOnly && /* @__PURE__ */ b("em", { children: [" · ", o.inherited] }),
-              y.unlinked && /* @__PURE__ */ b("em", { children: [" · ", o.notLinked] })
+              w.label,
+              w.readOnly && /* @__PURE__ */ b("em", { children: [" · ", o.inherited] }),
+              w.unlinked && /* @__PURE__ */ b("em", { children: [" · ", o.notLinked] })
             ]
           })
-        }, y.id))
+        }, w.id))
       }),
       /* @__PURE__ */ b("div", {
         role: "toolbar",
@@ -4438,39 +4438,39 @@ var Aa = (e) => ({
           /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "addItem",
-            onClick: () => h(g.add(M.addItem)),
+            onClick: () => h(f.add(M.addItem)),
             children: o.add
           }),
-          f && v && f.parentId === void 0 && r === gt.Sidebar && /* @__PURE__ */ a("button", {
+          g && v && g.parentId === void 0 && r === gt.Sidebar && /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "addSubItem",
-            onClick: () => k(M.addSubItem, f),
+            onClick: () => k(M.addSubItem, g),
             children: o.addSub
           }),
-          f && v && /* @__PURE__ */ a("button", {
+          g && v && /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "moveEarlier",
-            disabled: f.index <= 0,
-            onClick: () => k(M.moveEarlier, f),
+            disabled: g.index <= 0,
+            onClick: () => k(M.moveEarlier, g),
             children: o.earlier
           }),
-          f && v && /* @__PURE__ */ a("button", {
+          g && v && /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "moveLater",
-            disabled: f.index >= f.count - 1,
-            onClick: () => k(M.moveLater, f),
+            disabled: g.index >= g.count - 1,
+            onClick: () => k(M.moveLater, g),
             children: o.later
           }),
-          f && v && /* @__PURE__ */ a("button", {
+          g && v && /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "duplicate",
-            onClick: () => k(M.duplicate, f),
+            onClick: () => k(M.duplicate, g),
             children: o.duplicate
           }),
-          f && v && /* @__PURE__ */ a("button", {
+          g && v && /* @__PURE__ */ a("button", {
             type: "button",
             "data-shell-action": "delete",
-            onClick: () => k(M.delete, f),
+            onClick: () => k(M.delete, g),
             children: o.remove
           })
         ]
@@ -4480,7 +4480,7 @@ var Aa = (e) => ({
         environment: t,
         strings: n,
         region: r,
-        ...f ? { itemId: f.id } : {}
+        ...g ? { itemId: g.id } : {}
       })
     ]
   });
@@ -4502,9 +4502,9 @@ function Qi(e, t) {
 var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e) => /(^|:)toolbar$/.test(String(e.componentName ?? "")), hh = ({ controller: e, strings: t, element: n }) => {
   const o = (t.designMode ?? mn).toolbar, { structure: i } = e, r = ph(n), s = mh(n), l = n.properties ?? {}, c = j(() => {
     if (!r || i.modules.length === 0) return;
-    const f = Do(n.id, l);
-    if (!f) return;
-    const v = Il(new ln(i), f), h = v.slice ? Ia(i).find((k) => k.id === v.slice) : void 0;
+    const g = Do(n.id, l);
+    if (!g) return;
+    const v = Il(new ln(i), g), h = v.slice ? Ia(i).find((k) => k.id === v.slice) : void 0;
     return {
       resolved: v,
       feature: h ? h.path[h.path.length - 1] : void 0
@@ -4530,7 +4530,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
     l
   ]);
   if (!r && !s) return null;
-  const m = r ? d : u, g = c?.resolved.dialog;
+  const m = r ? d : u, f = c?.resolved.dialog;
   return /* @__PURE__ */ b("section", {
     className: "studio-editor-properties__toolbar-button",
     "data-section": "toolbarButton",
@@ -4545,7 +4545,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
           className: "studio-editor-chip",
           "data-chip": "feature",
           children: c.feature
-        }), g && /* @__PURE__ */ a("span", {
+        }), f && /* @__PURE__ */ a("span", {
           className: "studio-editor-chip",
           "data-chip": "dialog",
           children: o.opensAsDialog
@@ -4562,11 +4562,11 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
           children: o.upgrade
         })]
       }),
-      g && /* @__PURE__ */ a("p", {
+      f && /* @__PURE__ */ a("p", {
         className: "studio-editor-properties__hint",
-        "data-dialog": g.template,
-        "data-source": g.source,
-        children: g.source === "slice" ? o.dialogFromSlice(g.template) : o.dialogDefault(g.template)
+        "data-dialog": f.template,
+        "data-source": f.source,
+        children: f.source === "slice" ? o.dialogFromSlice(f.template) : o.dialogDefault(f.template)
       })
     ] }), /* @__PURE__ */ a(Rr, {
       diagnostics: m,
@@ -4634,7 +4634,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
       strings: n
     })
   });
-  const p = Es(e.composition.roots, s), m = dp(r.properties, p, l.properties), { runtime: g } = t, f = fh(e.context.catalog.components, r.typeId), v = f ? g.packageDescriptorOf(f) : void 0, h = (R) => !!v && g.designTime.propertyEditor(v, R.descriptor).contribution !== void 0, k = t.propertyEditors?.registry ?? pn, x = [...r.diagnostics, ...e.diagnostics], O = hp(m, r.typeId, (R) => gh.has(R.descriptor.path) || h(R)), y = fp(O), S = {
+  const p = Es(e.composition.roots, s), m = dp(r.properties, p, l.properties), { runtime: f } = t, g = fh(e.context.catalog.components, r.typeId), v = g ? f.packageDescriptorOf(g) : void 0, h = (R) => !!v && f.designTime.propertyEditor(v, R.descriptor).contribution !== void 0, k = t.propertyEditors?.registry ?? pn, x = [...r.diagnostics, ...e.diagnostics], O = hp(m, r.typeId, (R) => gh.has(R.descriptor.path) || h(R)), w = fp(O), S = {
     controller: e,
     environment: t,
     strings: n,
@@ -4643,7 +4643,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
     diagnostics: x,
     inCanvas: p,
     bindingScope: u
-  }, w = Ko(S), T = r.typeId.endsWith("action"), A = r.typeId.endsWith("toolbarButton"), N = Ca(r.typeId), C = e.document.screens.find((R) => R.name === "Screen")?.forms ?? [], $ = o !== void 0 && o !== "local", _ = l.properties;
+  }, y = Ko(S), T = r.typeId.endsWith("action"), A = r.typeId.endsWith("toolbarButton"), N = Ca(r.typeId), C = e.document.screens.find((R) => R.name === "Screen")?.forms ?? [], $ = o !== void 0 && o !== "local", _ = l.properties;
   return /* @__PURE__ */ b("div", {
     className: "studio-editor-properties",
     children: [
@@ -4689,9 +4689,9 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
         disabled: o !== void 0 && o !== "local",
         authoringTemplate: i
       }),
-      f && Ye(l) && /* @__PURE__ */ b(re, { children: [
+      g && Ye(l) && /* @__PURE__ */ b(re, { children: [
         /* @__PURE__ */ a(Ip, {
-          descriptor: f,
+          descriptor: g,
           component: l,
           controller: e,
           environment: t,
@@ -4699,14 +4699,14 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
         }),
         /* @__PURE__ */ a(Np, {
           component: l,
-          descriptor: f,
+          descriptor: g,
           controller: e,
           environment: t,
           strings: n
         }),
         /* @__PURE__ */ a(Cp, {
           component: l,
-          descriptor: f,
+          descriptor: g,
           controller: e,
           environment: t,
           strings: n,
@@ -4714,7 +4714,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
         }),
         /* @__PURE__ */ a(Tp, {
           component: l,
-          descriptor: f,
+          descriptor: g,
           properties: r.properties.filter((R) => !ka(r.typeId, R.descriptor.path)),
           controller: e,
           environment: t,
@@ -4722,11 +4722,11 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
           disabled: o !== void 0 && o !== "local"
         })
       ] }),
-      y.length === 0 && r.properties.length === 0 && /* @__PURE__ */ a("p", {
+      w.length === 0 && r.properties.length === 0 && /* @__PURE__ */ a("p", {
         className: "studio-editor-properties-empty",
         children: c.noProperties
       }),
-      y.map((R) => /* @__PURE__ */ b("section", {
+      w.map((R) => /* @__PURE__ */ b("section", {
         className: "studio-editor-properties__group",
         "aria-label": R.name,
         children: [/* @__PURE__ */ a("h4", {
@@ -4735,7 +4735,7 @@ var ph = (e) => String(e.componentName ?? "").endsWith("toolbarItem"), mh = (e)
         }), R.properties.map((F) => /* @__PURE__ */ a(zo, {
           registry: k,
           property: F,
-          context: Rm(w, S, F),
+          context: Rm(y, S, F),
           componentId: s,
           onChange: e.setProperty,
           diagnostics: x
@@ -4921,7 +4921,7 @@ function Th({ entries: e, usage: t, query: n, groups: o, frequentTitle: i }) {
       category: m.category,
       keywords: [...m.keywords]
     }, n)
-  }), l = (m) => m.map(s).filter((g) => g.match.matched), c = new Map(e.map((m) => [m.key, m])), u = Sl(t).flatMap((m) => c.get(m) ?? []), d = [], p = l(u);
+  }), l = (m) => m.map(s).filter((f) => f.match.matched), c = new Map(e.map((m) => [m.key, m])), u = Sl(t).flatMap((m) => c.get(m) ?? []), d = [], p = l(u);
   return p.length > 0 && d.push({
     id: La,
     title: i,
@@ -4929,20 +4929,20 @@ function Th({ entries: e, usage: t, query: n, groups: o, frequentTitle: i }) {
     count: p.length,
     expanded: r || (o.frequent ?? !0),
     rows: p
-  }), [...new Set(e.map((m) => m.category))].sort((m, g) => {
-    const f = (v) => ol.indexOf(v);
-    return (f(m) < 0 ? 1e3 : f(m)) - (f(g) < 0 ? 1e3 : f(g)) || m.localeCompare(g);
-  }).forEach((m, g) => {
-    const f = l(e.filter((h) => h.category === m));
-    if (f.length === 0) return;
-    const v = o[m] ?? (g === 0 && p.length === 0);
+  }), [...new Set(e.map((m) => m.category))].sort((m, f) => {
+    const g = (v) => ol.indexOf(v);
+    return (g(m) < 0 ? 1e3 : g(m)) - (g(f) < 0 ? 1e3 : g(f)) || m.localeCompare(f);
+  }).forEach((m, f) => {
+    const g = l(e.filter((h) => h.category === m));
+    if (g.length === 0) return;
+    const v = o[m] ?? (f === 0 && p.length === 0);
     d.push({
       id: m,
       title: m,
       frequent: !1,
-      count: f.length,
+      count: g.length,
       expanded: r || v,
-      rows: f
+      rows: g
     });
   }), d;
 }
@@ -5041,7 +5041,7 @@ var $h = (e) => e.dataTransfer.types.includes(Xo), Ah = {
   viaKeyword: (e, t, n) => `...${e} matches "${t}" via keyword "${n}"`,
   addLabel: (e) => `Add ${e}`
 }, Mh = "★", Fh = ({ entries: e, memory: t, strings: n = Ah, onAdd: o, usageVersion: i = 0 }) => {
-  const [r, s] = L(""), [l, c] = L(() => t.readGroups()), u = V(null), d = V(null), p = Js(), m = j(() => ({ ...t.readUsage() }), [t, i]), g = j(() => Th({
+  const [r, s] = L(""), [l, c] = L(() => t.readGroups()), u = V(null), d = V(null), p = Js(), m = j(() => ({ ...t.readUsage() }), [t, i]), f = j(() => Th({
     entries: e,
     usage: m,
     query: r,
@@ -5053,34 +5053,34 @@ var $h = (e) => e.dataTransfer.types.includes(Xo), Ah = {
     r,
     l,
     n.frequentlyUsed
-  ]), f = r.trim().length > 0, v = z((w) => {
-    f || c((T) => {
+  ]), g = r.trim().length > 0, v = z((y) => {
+    g || c((T) => {
       const A = {
         ...T,
-        [w.id]: !w.expanded
+        [y.id]: !y.expanded
       };
       return t.writeGroups(A), A;
     });
-  }, [f, t]), h = () => [...d.current?.querySelectorAll("[data-picker-focus]") ?? []], k = (w, T) => {
-    const A = h(), N = w ? A.indexOf(w) : -1;
+  }, [g, t]), h = () => [...d.current?.querySelectorAll("[data-picker-focus]") ?? []], k = (y, T) => {
+    const A = h(), N = y ? A.indexOf(y) : -1;
     A[Math.min(Math.max(N + T, 0), A.length - 1)]?.focus();
-  }, x = (w) => {
-    const T = w.target, A = T === u.current;
-    if (w.key === "/" && !A)
-      w.preventDefault(), u.current?.focus();
-    else if (w.key === "ArrowDown")
-      w.preventDefault(), k(A ? null : T, 1);
-    else if (w.key === "ArrowUp") {
-      w.preventDefault();
+  }, x = (y) => {
+    const T = y.target, A = T === u.current;
+    if (y.key === "/" && !A)
+      y.preventDefault(), u.current?.focus();
+    else if (y.key === "ArrowDown")
+      y.preventDefault(), k(A ? null : T, 1);
+    else if (y.key === "ArrowUp") {
+      y.preventDefault();
       const N = h();
       if (A) return;
       N.indexOf(T) <= 0 ? u.current?.focus() : k(T, -1);
-    } else w.key === "Escape" && A && r !== "" && (w.stopPropagation(), s(""));
-  }, O = (w, T) => {
-    Rh(T, w.payload, w.label), T.currentTarget.closest('[data-cratis-part="toolbar-folder-panel"]')?.setAttribute("data-dragging", "");
-  }, y = (w) => {
-    w.currentTarget.closest('[data-cratis-part="toolbar-folder-panel"]')?.removeAttribute("data-dragging");
-  }, S = Nh(g);
+    } else y.key === "Escape" && A && r !== "" && (y.stopPropagation(), s(""));
+  }, O = (y, T) => {
+    Rh(T, y.payload, y.label), T.currentTarget.closest('[data-cratis-part="toolbar-folder-panel"]')?.setAttribute("data-dragging", "");
+  }, w = (y) => {
+    y.currentTarget.closest('[data-cratis-part="toolbar-folder-panel"]')?.removeAttribute("data-dragging");
+  }, S = Nh(f);
   return /* @__PURE__ */ b("div", {
     ref: d,
     className: "studio-component-picker",
@@ -5098,49 +5098,49 @@ var $h = (e) => e.dataTransfer.types.includes(Xo), Ah = {
         "aria-label": n.filterLabel,
         autoComplete: "off",
         spellCheck: !1,
-        onChange: (w) => s(w.target.value)
+        onChange: (y) => s(y.target.value)
       }),
-      g.length === 0 && /* @__PURE__ */ a("p", {
+      f.length === 0 && /* @__PURE__ */ a("p", {
         className: "studio-component-picker__empty",
         role: "status",
         children: n.nothingMatches
       }),
       /* @__PURE__ */ a("div", {
         className: "studio-component-picker__groups",
-        children: g.map((w) => /* @__PURE__ */ b("section", {
+        children: f.map((y) => /* @__PURE__ */ b("section", {
           className: "studio-component-picker__group",
-          "data-group": w.id,
-          "data-expanded": w.expanded,
+          "data-group": y.id,
+          "data-expanded": y.expanded,
           children: [/* @__PURE__ */ b("button", {
             type: "button",
             "data-picker-focus": !0,
             className: "studio-component-picker__group-header",
-            "aria-expanded": w.expanded,
-            "aria-controls": `${p}-${w.id}`,
-            onClick: () => v(w),
+            "aria-expanded": y.expanded,
+            "aria-controls": `${p}-${y.id}`,
+            onClick: () => v(y),
             children: [
               /* @__PURE__ */ a("span", {
                 className: "studio-component-picker__chevron",
                 "aria-hidden": "true",
-                children: w.frequent ? /* @__PURE__ */ a("span", {
+                children: y.frequent ? /* @__PURE__ */ a("span", {
                   className: "studio-component-picker__star",
                   children: Mh
-                }) : w.expanded ? "▼" : "▶"
+                }) : y.expanded ? "▼" : "▶"
               }),
               /* @__PURE__ */ a("span", {
                 className: "studio-component-picker__group-title",
-                children: w.title
+                children: y.title
               }),
               /* @__PURE__ */ a("span", {
                 className: "studio-component-picker__count",
-                "aria-label": `${w.count}`,
-                children: w.count
+                "aria-label": `${y.count}`,
+                children: y.count
               })
             ]
-          }), w.expanded && /* @__PURE__ */ a("ul", {
-            id: `${p}-${w.id}`,
+          }), y.expanded && /* @__PURE__ */ a("ul", {
+            id: `${p}-${y.id}`,
             className: "studio-component-picker__rows",
-            children: w.rows.map(({ entry: T, match: A }) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ b("button", {
+            children: y.rows.map(({ entry: T, match: A }) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ b("button", {
               type: "button",
               "data-picker-focus": !0,
               "data-component": T.key,
@@ -5149,7 +5149,7 @@ var $h = (e) => e.dataTransfer.types.includes(Xo), Ah = {
               title: n.addLabel(T.label),
               onClick: () => o(T),
               onDragStart: (N) => O(T, N),
-              onDragEnd: y,
+              onDragEnd: w,
               children: [
                 /* @__PURE__ */ a("span", {
                   className: "studio-component-picker__badge",
@@ -5173,9 +5173,9 @@ var $h = (e) => e.dataTransfer.types.includes(Xo), Ah = {
               ]
             }) }, T.key))
           })]
-        }, w.id))
+        }, y.id))
       }),
-      f && g.length > 0 && /* @__PURE__ */ a("p", {
+      g && f.length > 0 && /* @__PURE__ */ a("p", {
         className: "studio-component-picker__note",
         children: n.groupsHint
       }),
@@ -5502,14 +5502,14 @@ var Xh = async (e) => {
   ];
   ie(() => {
     if (!i) return;
-    const f = (v) => {
+    const g = (v) => {
       v.key === "Escape" && !v.defaultPrevented && i();
     };
-    return globalThis.addEventListener("keydown", f), () => globalThis.removeEventListener("keydown", f);
+    return globalThis.addEventListener("keydown", g), () => globalThis.removeEventListener("keydown", g);
   }, [i]);
-  const g = async () => {
-    const f = await Xh(p);
-    c(f ? "copied" : "failed"), globalThis.open?.(Zh(e, t, n), "_blank", "noopener,noreferrer");
+  const f = async () => {
+    const g = await Xh(p);
+    c(g ? "copied" : "failed"), globalThis.open?.(Zh(e, t, n), "_blank", "noopener,noreferrer");
   };
   return /* @__PURE__ */ a("div", {
     className: `studio-crash studio-crash--${r}`,
@@ -5528,13 +5528,13 @@ var Xh = async (e) => {
         }),
         /* @__PURE__ */ a("dl", {
           className: "studio-crash__facts",
-          children: m.filter(([, f]) => f).map(([f, v]) => /* @__PURE__ */ b("div", {
+          children: m.filter(([, g]) => g).map(([g, v]) => /* @__PURE__ */ b("div", {
             className: "studio-crash__fact",
-            children: [/* @__PURE__ */ a("dt", { children: f }), /* @__PURE__ */ a("dd", {
-              "data-crash-fact": f,
+            children: [/* @__PURE__ */ a("dt", { children: g }), /* @__PURE__ */ a("dd", {
+              "data-crash-fact": g,
               children: v
             })]
-          }, f))
+          }, g))
         }),
         /* @__PURE__ */ b("div", {
           className: "studio-crash__actions",
@@ -5562,7 +5562,7 @@ var Xh = async (e) => {
               type: "button",
               "data-crash-action": "report",
               onClick: () => {
-                g();
+                f();
               },
               children: s.report
             })
@@ -5745,13 +5745,16 @@ var Qa = ({ environment: e, children: t }) => {
     loader: e.richText,
     children: n
   }) : n;
-}, df = ({ controls: e }) => /* @__PURE__ */ a("div", {
+}, df = ({ controls: e, title: t }) => /* @__PURE__ */ b("div", {
   className: "studio-window-title-bar",
   role: "toolbar",
-  children: /* @__PURE__ */ a("div", {
+  children: [t && /* @__PURE__ */ a("div", {
+    className: "studio-window-title-bar__title",
+    children: t
+  }), /* @__PURE__ */ a("div", {
     className: "studio-window-title-bar__controls",
     children: e
-  })
+  })]
 }), uf = ({ strings: e, message: t, onKeepEditing: n, onDiscard: o }) => /* @__PURE__ */ b("div", {
   className: "studio-screen-editor-window__notice",
   role: "alert",
@@ -5939,26 +5942,26 @@ function xf(e, t, n, o = Rf, i = !1) {
     r,
     s,
     l
-  ]), u = j(() => gf(t, c).name, [t, c]), d = wf(e, n, u), [p, m] = L(() => o.read(d)), [g, f] = L(() => o.readTemplate(d)), [v, h] = L();
+  ]), u = j(() => gf(t, c).name, [t, c]), d = wf(e, n, u), [p, m] = L(() => o.read(d)), [f, g] = L(() => o.readTemplate(d)), [v, h] = L();
   ie(() => {
-    m(o.read(d)), f(o.readTemplate(d)), h(void 0);
+    m(o.read(d)), g(o.readTemplate(d)), h(void 0);
   }, [o, d]);
   const k = Cf(d), x = k && (p ?? kf(d)), O = j(() => x ? vf(t, c) : void 0, [
     x,
     t,
     c
-  ]), y = z(() => {
+  ]), w = z(() => {
     const C = !x;
     m(C), h(void 0), o.write(d, C);
   }, [
     x,
     d,
     o
-  ]), S = rr(d) && i, w = !rr(d) || (g ?? Sf(d)), T = z(() => {
-    const C = !w;
-    f(C), o.writeTemplate(d, C);
+  ]), S = rr(d) && i, y = !rr(d) || (f ?? Sf(d)), T = z(() => {
+    const C = !y;
+    g(C), o.writeTemplate(d, C);
   }, [
-    w,
+    y,
     d,
     o
   ]), A = z((C) => {
@@ -5967,10 +5970,10 @@ function xf(e, t, n, o = Rf, i = !1) {
   return {
     available: k,
     shown: x,
-    toggle: y,
+    toggle: w,
     template: {
       available: S,
-      shown: w,
+      shown: y,
       toggle: T
     },
     frame: O,
@@ -6648,7 +6651,7 @@ function jf(e, t, n, o) {
     const s = V(null), l = j(() => ({
       ...r.element,
       properties: ns(e, r.element.componentName, r.element.properties)
-    }), [r.element]), c = j(() => $f(e, r.element.componentName, r.element.properties), [r.element]), u = ts.has(Pt(r.element.componentName)), d = e.startsWith(`${Hr}:`), p = d ? void 0 : Xa[Pt(r.element.componentName)], m = d && Pt(r.element.componentName) === "topbar", [g, f] = L(), v = Ff(s, r.element), h = Lf(r), k = Bf(r.element, g !== void 0);
+    }), [r.element]), c = j(() => $f(e, r.element.componentName, r.element.properties), [r.element]), u = ts.has(Pt(r.element.componentName)), d = e.startsWith(`${Hr}:`), p = d ? void 0 : Xa[Pt(r.element.componentName)], m = d && Pt(r.element.componentName) === "topbar", [f, g] = L(), v = Ff(s, r.element), h = Lf(r), k = Bf(r.element, f !== void 0);
     return /* @__PURE__ */ b("span", {
       ref: s,
       "data-studio-element": r.element.id,
@@ -6656,11 +6659,11 @@ function jf(e, t, n, o) {
       "data-studio-sample": c.length > 0 ? c.join(" ") : void 0,
       title: c.length > 0 ? n.sampleContent(c) : void 0,
       children: [/* @__PURE__ */ a(wt, {
-        onError: (x) => f(x instanceof Error ? x.message : String(x)),
+        onError: (x) => g(x instanceof Error ? x.message : String(x)),
         fallback: /* @__PURE__ */ a(fo, {
           elementId: r.element.id,
           tone: en.Failed,
-          text: n.failedToDraw(h, g ?? "")
+          text: n.failedToDraw(h, f ?? "")
         }),
         children: p ? /* @__PURE__ */ a(Df, {
           kind: p,
@@ -6943,8 +6946,8 @@ function ug(e, t, n) {
     c.current = 0, u.current = void 0, l(void 0), i(void 0);
   }, []), p = V(!1);
   ie(() => {
-    const S = (w) => {
-      w.key !== "Escape" || !u.current && !c.current && !r.current || (p.current = !0, d());
+    const S = (y) => {
+      y.key !== "Escape" || !u.current && !c.current && !r.current || (p.current = !0, d());
     };
     return window.addEventListener("keydown", S, !0), () => window.removeEventListener("keydown", S, !0);
   }, [d]), ie(() => (window.addEventListener("dragend", d), window.addEventListener("drop", d), () => {
@@ -6952,35 +6955,35 @@ function ug(e, t, n) {
   }), [d]);
   const m = z((S) => {
     u.current = S, l(S);
-  }, []), g = (S) => {
-    const w = u.current, { region: T } = S.target;
-    if (!w || !T.containerId) return;
-    const A = T.kind === Pe.Container ? f(T.containerId) : T.index;
-    return rg(n.composition.roots, n.adapter, w, T.containerId, A);
-  }, f = (S) => {
-    const w = [...n.composition.roots];
-    for (; w.length > 0; ) {
-      const T = w.pop();
+  }, []), f = (S) => {
+    const y = u.current, { region: T } = S.target;
+    if (!y || !T.containerId) return;
+    const A = T.kind === Pe.Container ? g(T.containerId) : T.index;
+    return rg(n.composition.roots, n.adapter, y, T.containerId, A);
+  }, g = (S) => {
+    const y = [...n.composition.roots];
+    for (; y.length > 0; ) {
+      const T = y.pop();
       if (n.adapter.idOf(T) === S) return n.adapter.childrenOf(T).length;
-      w.push(...n.adapter.childrenOf(T));
+      y.push(...n.adapter.childrenOf(T));
     }
     return 0;
   }, v = (S) => {
-    const w = e.current.getBoundingClientRect(), T = lg(t(), S.clientX - w.left, S.clientY - w.top), A = S.target.closest("[data-scene-id], [data-studio-element]"), N = A?.dataset.sceneId ?? A?.dataset.studioElement, C = !!N && n.ownershipOf(N) !== oe.Local;
+    const y = e.current.getBoundingClientRect(), T = lg(t(), S.clientX - y.left, S.clientY - y.top), A = S.target.closest("[data-scene-id], [data-studio-element]"), N = A?.dataset.sceneId ?? A?.dataset.studioElement, C = !!N && n.ownershipOf(N) !== oe.Local;
     if (!T || C) return { denied: !0 };
     if (uo(S)) {
-      const $ = g(T), _ = $ ? n.validateMove($) : ee.NodeNotFound;
+      const $ = f(T), _ = $ ? n.validateMove($) : ee.NodeNotFound;
       if (_ && _ !== ee.NoChange) return { denied: !0 };
     }
     return {
       drop: T,
       denied: !1
     };
-  }, h = (S, w) => {
+  }, h = (S, y) => {
     const T = e.current.getBoundingClientRect();
     return {
-      left: S.clientX - T.left - w.container.left,
-      top: S.clientY - T.top - w.container.top
+      left: S.clientX - T.left - y.container.left,
+      top: S.clientY - T.top - y.container.top
     };
   };
   return {
@@ -6994,17 +6997,17 @@ function ug(e, t, n) {
       },
       onDragOver: (S) => {
         if (!Kt(S) || (S.preventDefault(), p.current)) return;
-        const w = v(S);
-        S.dataTransfer.dropEffect = w.denied ? "none" : uo(S) ? "move" : "copy", i((T) => dg(T, w) ? T : w);
+        const y = v(S);
+        S.dataTransfer.dropEffect = y.denied ? "none" : uo(S) ? "move" : "copy", i((T) => dg(T, y) ? T : y);
       },
       onDragLeave: (S) => {
         Kt(S) && (c.current = Math.max(0, c.current - 1), c.current === 0 && i(void 0));
       },
       onDrop: (S) => {
         if (!Kt(S)) return;
-        const w = _h(S), T = Eh(S), { drop: A, denied: N } = v(S), C = A && w ? g(A) : void 0, $ = p.current;
+        const y = _h(S), T = Eh(S), { drop: A, denied: N } = v(S), C = A && y ? f(A) : void 0, $ = p.current;
         if (S.preventDefault(), d(), p.current = !1, $ || N || !A) return;
-        if (w) {
+        if (y) {
           C && n.move(C, h(S, A));
           return;
         }
@@ -7041,16 +7044,16 @@ function mg(e, t, n) {
   const [o, i] = L([]), [r, s] = L(), l = V([]), c = z(() => {
     const d = e.current;
     if (!d) return [];
-    const p = d.getBoundingClientRect(), m = (f) => Be(d, f, p), g = {
+    const p = d.getBoundingClientRect(), m = (g) => Be(d, g, p), f = {
       left: 0,
       top: 0,
       width: p.width,
       height: p.height
     };
-    return t.flatMap((f) => {
-      const v = pg(f, g, m);
+    return t.flatMap((g) => {
+      const v = pg(g, f, m);
       return v ? [{
-        region: f,
+        region: g,
         rect: v
       }] : [];
     });
@@ -7058,9 +7061,9 @@ function mg(e, t, n) {
     const d = e.current;
     if (!d) return;
     const p = c();
-    l.current = p, i((g) => eg(g, p) ? g : p);
+    l.current = p, i((f) => eg(f, p) ? f : p);
     const m = n ? Be(d, n, d.getBoundingClientRect()) : void 0;
-    s((g) => ls(g, m) ? g : m);
+    s((f) => ls(f, m) ? f : m);
   }, [
     e,
     c,
@@ -7157,26 +7160,26 @@ var pr = 'button:not(:disabled), [href], input:not(:disabled), select:not(:disab
   ie(() => ((p.current?.querySelector(pr) ?? p.current)?.focus({ preventScroll: !0 }), () => {
     r.isConnected && r.focus({ preventScroll: !0 });
   }), [r]), ie(() => {
-    const f = (v) => {
+    const g = (v) => {
       const h = v.target;
       p.current?.contains(h) || r.contains(h) || d();
     };
-    return document.addEventListener("pointerdown", f, !0), () => document.removeEventListener("pointerdown", f, !0);
+    return document.addEventListener("pointerdown", g, !0), () => document.removeEventListener("pointerdown", g, !0);
   }, [r, d]);
-  const m = (f) => {
-    if (f.key === "Escape") {
-      f.preventDefault(), f.stopPropagation(), d();
+  const m = (g) => {
+    if (g.key === "Escape") {
+      g.preventDefault(), g.stopPropagation(), d();
       return;
     }
-    if (f.key !== "Tab") return;
+    if (g.key !== "Tab") return;
     const v = Array.from(p.current?.querySelectorAll(pr) ?? []);
     if (v.length === 0) {
-      f.preventDefault();
+      g.preventDefault();
       return;
     }
     const h = v[0], k = v[v.length - 1];
-    f.shiftKey && document.activeElement === h ? (f.preventDefault(), k.focus()) : !f.shiftKey && document.activeElement === k && (f.preventDefault(), h.focus());
-  }, g = Math.max(s.left, Math.min(i.left, s.left + s.width - mr));
+    g.shiftKey && document.activeElement === h ? (g.preventDefault(), k.focus()) : !g.shiftKey && document.activeElement === k && (g.preventDefault(), h.focus());
+  }, f = Math.max(s.left, Math.min(i.left, s.left + s.width - mr));
   return /* @__PURE__ */ a("div", {
     ref: p,
     role: "dialog",
@@ -7185,7 +7188,7 @@ var pr = 'button:not(:disabled), [href], input:not(:disabled), select:not(:disab
     className: "studio-design-popover",
     "data-property": t.descriptor.path,
     style: {
-      left: g,
+      left: f,
       top: i.top + i.height + 6,
       width: mr
     },
@@ -7231,16 +7234,16 @@ var hr = [
   [M.duplicate]: /* @__PURE__ */ a(Jc, { "aria-hidden": "true" }),
   [M.delete]: /* @__PURE__ */ a(ed, { "aria-hidden": "true" })
 }, Ig = ({ subject: e, item: t, anchor: n, bounds: o, strings: i, renameToken: r, chipLabel: s, onRename: l, onAction: c, onChoice: u, readOnlyActions: d, onReadOnlyAction: p, onLeave: m }) => {
-  const g = V(null), f = V(null), [v, h] = L({
+  const f = V(null), g = V(null), [v, h] = L({
     width: 380,
     height: 100
-  }), [k, x] = L(t.label), [O, y] = L(0), S = e.mode.itemToolbar, w = S.some((E) => E.compact === !0), T = S.some((E) => hr.includes(E.id)), A = S.find((E) => E.id === M.rename), N = A && Ut(A, t);
+  }), [k, x] = L(t.label), [O, w] = L(0), S = e.mode.itemToolbar, y = S.some((E) => E.compact === !0), T = S.some((E) => hr.includes(E.id)), A = S.find((E) => E.id === M.rename), N = A && Ut(A, t);
   ie(() => {
     x(t.label);
   }, [t.id, t.label]), ie(() => {
-    r === 0 || !f.current || (f.current.focus({ preventScroll: !0 }), f.current.select());
+    r === 0 || !g.current || (g.current.focus({ preventScroll: !0 }), g.current.select());
   }, [r, t.id]), Ce(() => {
-    const E = g.current?.getBoundingClientRect();
+    const E = f.current?.getBoundingClientRect();
     E && (Math.round(E.width) !== Math.round(v.width) || Math.round(E.height) !== Math.round(v.height)) && h({
       width: E.width,
       height: E.height
@@ -7262,7 +7265,7 @@ var hr = [
       return;
     }
     R();
-  }, I = () => Array.from(g.current?.querySelectorAll("[data-roving]:not(:disabled)") ?? []), H = (E) => {
+  }, I = () => Array.from(f.current?.querySelectorAll("[data-roving]:not(:disabled)") ?? []), H = (E) => {
     if (E.target instanceof HTMLInputElement) return;
     const ne = I(), fe = ne.indexOf(E.target);
     if (fe < 0) return;
@@ -7270,14 +7273,14 @@ var hr = [
     if (je === void 0 || E.altKey) return;
     E.preventDefault();
     const nt = ne[(je + ne.length) % ne.length];
-    y(Number(nt.dataset.roving)), nt.focus();
+    w(Number(nt.dataset.roving)), nt.focus();
   }, te = {
-    ref: g,
+    ref: f,
     role: "toolbar",
     "aria-label": i.toolbarLabel(t.label),
     className: "studio-design-toolbar",
     "data-side": $.side,
-    "data-compact": w ? "true" : void 0,
+    "data-compact": y ? "true" : void 0,
     "data-kind": e.source.kind,
     style: {
       left: $.left,
@@ -7316,7 +7319,7 @@ var hr = [
     ...te,
     children: [
       N?.visible && /* @__PURE__ */ a("input", {
-        ref: f,
+        ref: g,
         type: "text",
         className: "studio-design-toolbar__title",
         value: k,
@@ -7470,7 +7473,7 @@ var jn = 34, Eg = ({ surface: e, state: t, controller: n, environment: o, editor
     if (typeof F != "string" || F === "") return;
     const G = o.propertyEditors?.slices?.find((H) => H.id === F) ?? o.stateChangeSlices.find((H) => H.id === F), I = F.split(".");
     return G?.name ?? I[I.length - 1];
-  }, [o]), g = z((F, G) => {
+  }, [o]), f = z((F, G) => {
     const I = G.chips?.[F];
     if (I !== void 0 && I !== "") return I;
     switch (F) {
@@ -7483,9 +7486,9 @@ var jn = 34, Eg = ({ surface: e, state: t, controller: n, environment: o, editor
       default:
         return r.notLinked;
     }
-  }, [m, r]), f = s?.selected?.parentId !== void 0 && l !== void 0 && l.items[s.selected.id] === void 0, v = s?.selected?.parentId;
+  }, [m, r]), g = s?.selected?.parentId !== void 0 && l !== void 0 && l.items[s.selected.id] === void 0, v = s?.selected?.parentId;
   if (ie(() => {
-    if (!f || !v) return;
+    if (!g || !v) return;
     const F = e.current?.querySelector(`[data-scene-nav-item="${CSS.escape(v)}"] > [data-scene-nav-link]`);
     F && (F.focus({ preventScroll: !0 }), F.dispatchEvent(new KeyboardEvent("keydown", {
       key: "ArrowRight",
@@ -7493,16 +7496,16 @@ var jn = 34, Eg = ({ surface: e, state: t, controller: n, environment: o, editor
       cancelable: !0
     })));
   }, [
-    f,
+    g,
     v,
     e
   ]), !s || !l) return null;
-  const { selected: h, source: k } = s, x = s.mode.addActions[0], O = k.items.flatMap((F) => l.items[F.id] ? [l.items[F.id]] : []), y = O[O.length - 1], S = s.mode.itemToolbar.some((F) => F.compact === !0), w = y ?? l.component, T = w && x ? S || !y ? {
-    left: (y ?? w).left,
-    top: (y ? y.top + y.height : w.top) + 8
+  const { selected: h, source: k } = s, x = s.mode.addActions[0], O = k.items.flatMap((F) => l.items[F.id] ? [l.items[F.id]] : []), w = O[O.length - 1], S = s.mode.itemToolbar.some((F) => F.compact === !0), y = w ?? l.component, T = y && x ? S || !w ? {
+    left: (w ?? y).left,
+    top: (w ? w.top + w.height : y.top) + 8
   } : {
-    left: y.left + y.width + 8,
-    top: y.top + (y.height - jn) / 2
+    left: w.left + w.width + 8,
+    top: w.top + (w.height - jn) / 2
   } : void 0, A = h ? l.items[h.id] : void 0, N = c && h && c.itemId === h.id ? k.choice(c.actionId, h) : void 0, C = () => u(void 0), $ = () => Ko({
     controller: n,
     environment: o,
@@ -7540,7 +7543,7 @@ var jn = 34, Eg = ({ surface: e, state: t, controller: n, environment: o, editor
       bounds: l.surface,
       strings: r,
       renameToken: t.renameToken,
-      chipLabel: g,
+      chipLabel: f,
       onRename: (F) => t.rename(h, F),
       onAction: (F) => t.act(F, h),
       onChoice: (F, G) => u((I) => I && I.actionId === F && I.itemId === h.id ? void 0 : {
@@ -7609,8 +7612,8 @@ function cs(e, t) {
   });
 }
 var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width && e.height === t.height, vr = "content", Mg = (e, t) => e.length === t.length && e.every((n, o) => n.id === t[o].id && n.rect.left === t[o].rect.left && n.rect.top === t[o].rect.top && n.rect.width === t[o].rect.width && n.rect.height === t[o].rect.height), Fg = ({ surface: e, controller: t, strings: n }) => {
-  const o = vo(e, z((g, f) => Be(g, "composition", f), []), Ag), { composition: i, context: r, selectedId: s, navigation: l, navigationModule: c, structure: u } = t, d = j(() => cs(i.roots, r.catalog), [i.roots, r.catalog]), p = z((g, f) => d.flatMap((v) => {
-    const h = Be(g, v.id, f);
+  const o = vo(e, z((f, g) => Be(f, "composition", g), []), Ag), { composition: i, context: r, selectedId: s, navigation: l, navigationModule: c, structure: u } = t, d = j(() => cs(i.roots, r.catalog), [i.roots, r.catalog]), p = z((f, g) => d.flatMap((v) => {
+    const h = Be(f, v.id, g);
     return h ? [{
       ...v,
       rect: h
@@ -7630,14 +7633,14 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
       className: "studio-design-slot__name",
       children: n.slotName(vr)
     })
-  }), m?.map(({ id: g, name: f, region: v, rect: h }) => {
+  }), m?.map(({ id: f, name: g, region: v, rect: h }) => {
     if (v) {
       const k = Lr(u, l, c, v).sources;
       return /* @__PURE__ */ a("div", {
         className: "studio-design-region",
         "data-region": v,
-        "data-selected": g === s ? "true" : void 0,
-        "data-frame-for": g,
+        "data-selected": f === s ? "true" : void 0,
+        "data-frame-for": f,
         "aria-hidden": "true",
         style: {
           left: h.left,
@@ -7651,11 +7654,11 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
           title: n.navigation.tagLong(v, k.label),
           children: k.label
         })
-      }, g);
+      }, f);
     }
     return /* @__PURE__ */ a("div", {
       className: "studio-design-frame",
-      "data-frame-for": g,
+      "data-frame-for": f,
       "aria-hidden": "true",
       style: {
         left: h.left - gr,
@@ -7665,9 +7668,9 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
       },
       children: /* @__PURE__ */ a("span", {
         className: "studio-design-frame__name",
-        children: f
+        children: g
       })
-    }, g);
+    }, f);
   })] });
 }, Lg = Kl(), Gt = () => {
   throw new Error("The screen is being designed; it does not navigate.");
@@ -7690,7 +7693,7 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
     closeDialog: Gt,
     closeOutlet: Gt,
     back: Gt
-  }, [d, i]), m = t.application.logo, g = j(() => m ? {
+  }, [d, i]), m = t.application.logo, f = j(() => m ? {
     title: m.title,
     locked: n !== void 0,
     lockedReason: o
@@ -7700,8 +7703,8 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
     o
   ]);
   if (e.modules.length === 0 && !i) return /* @__PURE__ */ a(re, { children: s });
-  const f = /* @__PURE__ */ a(es.Provider, {
-    value: g,
+  const g = /* @__PURE__ */ a(es.Provider, {
+    value: f,
     children: /* @__PURE__ */ a(Ul, {
       model: c,
       children: /* @__PURE__ */ a(zl, {
@@ -7713,8 +7716,8 @@ var Ag = (e, t) => e.left === t.left && e.top === t.top && e.width === t.width &
   });
   return p ? /* @__PURE__ */ a(Wl, {
     value: p,
-    children: f
-  }) : f;
+    children: g
+  }) : g;
 }, jg = 'button, a[href], [role="button"], [role="radio"], [role="option"], [role="menuitem"]', Ug = (e) => {
   const t = e;
   return !!t && typeof t.closest == "function" && t.closest(jg) !== null;
@@ -7923,9 +7926,9 @@ var ov = () => {
   button: "Button",
   item: "New item"
 }, rv = ({ controller: e, environment: t, resolveBinding: n = ov, configuration: o, strings: i, editorStrings: r, viewportHeight: s, shell: l }) => {
-  const c = V(null), { composition: u, dropRegions: d, selectedId: p } = e, { selectionRect: m, measureNow: g } = mg(c, d, p), { feedback: f, draggedId: v, startMoving: h, endMoving: k, handlers: x } = ug(c, g, e), [O, y] = L(), S = ig(e, t), { document: w, context: T } = e, A = j(() => o ?? (w.instanceContributions.length > 0 ? jr(Ro(w, T.scope), w.instanceContributions, T.catalog) : void 0), [
+  const c = V(null), { composition: u, dropRegions: d, selectedId: p } = e, { selectionRect: m, measureNow: f } = mg(c, d, p), { feedback: g, draggedId: v, startMoving: h, endMoving: k, handlers: x } = ug(c, f, e), [O, w] = L(), S = ig(e, t), { document: y, context: T } = e, A = j(() => o ?? (y.instanceContributions.length > 0 ? jr(Ro(y, T.scope), y.instanceContributions, T.catalog) : void 0), [
     o,
-    w,
+    y,
     T
   ]), N = r?.designMode ?? mn, C = t.destinations[0], $ = j(() => C ? { screen: C.id } : void 0, [C]), _ = rh({
     controller: e,
@@ -7937,8 +7940,8 @@ var ov = () => {
   Ce(() => {
     const P = c.current?.closest("[data-studio-viewport]") ?? c.current?.parentElement;
     if (s !== void 0 || !P || typeof ResizeObserver > "u") return;
-    const B = new ResizeObserver(() => y(P.clientHeight));
-    return y(P.clientHeight), B.observe(P), () => B.disconnect();
+    const B = new ResizeObserver(() => w(P.clientHeight));
+    return w(P.clientHeight), B.observe(P), () => B.disconnect();
   }, [s]);
   const R = (P) => {
     if (P.key === "Escape" && l?.peeking) {
@@ -8027,7 +8030,7 @@ var ov = () => {
       ref: c,
       className: "studio-screen-surface",
       style: nt,
-      "data-studio-dragging": f ? "true" : void 0,
+      "data-studio-dragging": g ? "true" : void 0,
       onKeyDown: R,
       tabIndex: -1,
       ...x,
@@ -8054,8 +8057,8 @@ var ov = () => {
             onDragEnd: k,
             children: /* @__PURE__ */ a(bc, { "aria-hidden": "true" })
           }),
-          f && /* @__PURE__ */ a(Zf, {
-            feedback: f,
+          g && /* @__PURE__ */ a(Zf, {
+            feedback: g,
             deniedText: i.dropDenied
           }),
           /* @__PURE__ */ a(tg, {
@@ -8079,14 +8082,14 @@ var ov = () => {
             className: "studio-screen-surface__announcement",
             role: "status",
             "aria-live": "polite",
-            children: f ? f.denied || !f.drop ? i.dropDenied : i.dropTarget(f.drop.target.region.kind === Pe.Container ? "into" : "between") : ""
+            children: g ? g.denied || !g.drop ? i.dropDenied : i.dropTarget(g.drop.target.region.kind === Pe.Container ? "into" : "between") : ""
           })
         ]
       })]
     })
   });
-}, wr = 40, bs = ({ controller: e, environment: t, strings: n, window: o, authoringTemplate: i, deviceFrame: r = !1, saveFailure: s, onKeepEditing: l, onDiscard: c, onPreview: u }) => {
-  const d = xf(e.document, t.runtime, i, void 0, e.composition.templates.length > 0), p = !!e.selectedId && e.canRemove(e.selectedId), m = /* @__PURE__ */ b(re, { children: [
+}, wr = 40, bs = ({ controller: e, environment: t, strings: n, window: o, authoringTemplate: i, title: r, deviceFrame: s = !1, saveFailure: l, onKeepEditing: c, onDiscard: u, onPreview: d }) => {
+  const p = xf(e.document, t.runtime, i, void 0, e.composition.templates.length > 0), m = !!e.selectedId && e.canRemove(e.selectedId), f = /* @__PURE__ */ b(re, { children: [
     /* @__PURE__ */ a("span", {
       className: "studio-screen-editor-window__state",
       role: "status",
@@ -8098,20 +8101,20 @@ var ov = () => {
       available: o.available,
       strings: n,
       onResize: o.setSize,
-      shell: d.available ? {
-        shown: d.shown,
-        toggle: d.toggle
+      shell: p.available ? {
+        shown: p.shown,
+        toggle: p.toggle
       } : void 0,
-      template: d.template.available ? d.template : void 0
+      template: p.template.available ? p.template : void 0
     }),
-    u && /* @__PURE__ */ a(De, {
+    d && /* @__PURE__ */ a(De, {
       icon: /* @__PURE__ */ a(Dc, { "aria-hidden": "true" }),
       "aria-label": n.previewScreen,
       title: n.previewScreen,
       variant: "ghost",
       size: "small",
       "data-studio-preview-screen": "",
-      onClick: () => u(e.document)
+      onClick: () => d(e.document)
     }),
     /* @__PURE__ */ a(De, {
       icon: /* @__PURE__ */ a(Wc, { "aria-hidden": "true" }),
@@ -8137,7 +8140,7 @@ var ov = () => {
       title: n.deleteElement,
       variant: "ghost",
       size: "small",
-      disabled: !p,
+      disabled: !m,
       onClick: () => e.selectedId && e.remove(e.selectedId)
     }),
     /* @__PURE__ */ a(De, {
@@ -8155,28 +8158,31 @@ var ov = () => {
     role: "group",
     "aria-label": n.windowLabel,
     children: [
-      /* @__PURE__ */ a(df, { controls: m }),
-      s && /* @__PURE__ */ a(uf, {
+      /* @__PURE__ */ a(df, {
+        controls: f,
+        title: r
+      }),
+      l && /* @__PURE__ */ a(uf, {
         strings: n,
-        message: s,
-        onKeepEditing: l,
-        onDiscard: c
+        message: l,
+        onKeepEditing: c,
+        onDiscard: u
       }),
       /* @__PURE__ */ a("div", {
         className: "studio-screen-editor-window__canvas",
         "data-studio-viewport": "",
         children: /* @__PURE__ */ b("div", {
-          className: r ? "studio-screen-editor-window__viewport studio-screen-editor-window__device" : "studio-screen-editor-window__viewport",
-          style: r ? {
+          className: s ? "studio-screen-editor-window__viewport studio-screen-editor-window__device" : "studio-screen-editor-window__viewport",
+          style: s ? {
             width: o.size.width,
             minHeight: o.size.height - wr
           } : void 0,
-          children: [d.peeking && /* @__PURE__ */ b("div", {
+          children: [p.peeking && /* @__PURE__ */ b("div", {
             className: "studio-screen-editor-window__peek",
             role: "status",
-            children: [/* @__PURE__ */ a("span", { children: n.shellPeeking(d.peekingName) }), /* @__PURE__ */ a("button", {
+            children: [/* @__PURE__ */ a("span", { children: n.shellPeeking(p.peekingName) }), /* @__PURE__ */ a("button", {
               type: "button",
-              onClick: d.back,
+              onClick: p.back,
               children: n.shellPeekBack
             })]
           }), /* @__PURE__ */ a(rv, {
@@ -8186,8 +8192,8 @@ var ov = () => {
             },
             strings: n.surface,
             editorStrings: n,
-            viewportHeight: r ? o.size.height - wr : void 0,
-            shell: d
+            viewportHeight: s ? o.size.height - wr : void 0,
+            shell: p
           })]
         })
       })
@@ -8571,14 +8577,14 @@ var _v = { modules: [] }, Ev = (e, t) => wo(e, t)?.id;
 function Ts(e, t, n, o) {
   const [i, r] = L(() => fv(e.document)), s = V(void 0);
   s.current ??= new hv(i, r);
-  const l = z((P) => s.current.commit(P), []), [c, u] = L(), [d, p] = L(), [m, g] = L(n.navigation?.module), f = V(void 0), v = z((P, B) => {
-    const U = f.current?.(P), W = f.current?.(B);
+  const l = z((P) => s.current.commit(P), []), [c, u] = L(), [d, p] = L(), [m, f] = L(n.navigation?.module), g = V(void 0), v = z((P, B) => {
+    const U = g.current?.(P), W = g.current?.(B);
     return U && W ? {
       height: U.height,
       bottom: U.top + U.height - W.top
     } : void 0;
   }, []), h = z((P) => {
-    f.current = P;
+    g.current = P;
   }, []), k = Rv(n.runtime.icons);
   Dv(n.stateChangeSlices, n.registerDesignTimeCommands);
   const x = j(() => ({
@@ -8590,13 +8596,13 @@ function Ts(e, t, n, o) {
     n,
     t,
     k
-  ]), O = j(() => bo(i.document, t), [i.document, t]), y = j(() => xv(i.document, O.roots, x), [
+  ]), O = j(() => bo(i.document, t), [i.document, t]), w = j(() => xv(i.document, O.roots, x), [
     i.document,
     O,
     x
-  ]), S = j(() => Nv(y), [y]), w = nn(i.document, t), T = j(() => mv(O.roots, Iv(w), S).filter((P) => P.containerId !== null), [
+  ]), S = j(() => Nv(w), [w]), y = nn(i.document, t), T = j(() => mv(O.roots, Iv(y), S).filter((P) => P.containerId !== null), [
     O,
-    w,
+    y,
     S
   ]), A = c ? qe(O.roots, c) : void 0, N = j(() => c ? Po(i.document, ae(c), x) : void 0, [
     i.document,
@@ -8617,12 +8623,12 @@ function Ts(e, t, n, o) {
       diagnostics: W.diagnostics
     };
   }, [l, x]), R = z((P, B) => {
-    const U = P ?? w?.id ?? O.entry, W = U ? qe(O.roots, U)?.children ?? [] : [];
+    const U = P ?? y?.id ?? O.entry, W = U ? qe(O.roots, U)?.children ?? [] : [];
     return {
       parent: U,
       index: B ?? W.length
     };
-  }, [w, O]), F = V(o);
+  }, [y, O]), F = V(o);
   F.current = o;
   const G = z((P, B, U, W, J, de) => {
     const Ue = R(B, U);
@@ -8719,7 +8725,7 @@ function Ts(e, t, n, o) {
     structure: fe,
     navigationModule: m,
     applyNavigationEdits: je,
-    setNavigationModule: g,
+    setNavigationModule: f,
     selectedItemId: d && d.componentId === c ? d.itemId : void 0,
     selectItem: nt,
     document: i.document,
@@ -8730,7 +8736,7 @@ function Ts(e, t, n, o) {
     inspection: N,
     diagnostics: i.diagnostics,
     adapter: S,
-    ownershipOf: y,
+    ownershipOf: w,
     dropRegions: T,
     select: u,
     setMeasurer: h,
@@ -8815,15 +8821,15 @@ var Tr = () => ({
       onClose: () => n.close()
     })
   });
-}, Fv = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: i, paletteSources: r, sourceRect: s, initialSize: l, rememberWindowAs: c, windowMemory: u, centerOffsetX: d, renderPaletteHost: p, onClose: m, onBeforeClose: g, onPreview: f, opened: v }) => {
+}, Fv = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: i, paletteSources: r, sourceRect: s, initialSize: l, rememberWindowAs: c, windowMemory: u, centerOffsetX: d, renderPaletteHost: p, onClose: m, onBeforeClose: f, onPreview: g, opened: v }) => {
   const h = V(void 0), k = Ts(v, e.authoringTemplate, t, (_) => h.current?.(_)), x = j(() => u ?? rf(), [u]), O = j(() => lf({
     remembered: c ? x.read(c) : void 0,
     saved: l,
     lastUsed: x.readLastUsed()
-  }, Tr()), []), y = z((_) => {
+  }, Tr()), []), w = z((_) => {
     c && x.write(c, _);
   }, [x, c]), S = z((_) => {
-    y(_);
+    w(_);
     const R = nn(k.document, e.authoringTemplate);
     m({
       document: on(k.document, e.screen),
@@ -8836,24 +8842,24 @@ var Tr = () => ({
     k,
     t.runtime.legacyTypeOf,
     m,
-    y,
+    w,
     e.authoringTemplate,
     e.screen
-  ]), [w, T] = L(), A = z(async (_) => {
-    y(_);
+  ]), [y, T] = L(), A = z(async (_) => {
+    w(_);
     const R = nn(k.document, e.authoringTemplate), F = {
       document: on(k.document, e.screen),
       legacyElements: Xn(R, t.runtime.legacyTypeOf),
       windowSize: _,
       layout: po(R),
       changed: k.isDirty
-    }, G = await g?.(F);
+    }, G = await f?.(F);
     return T(G), !G;
   }, [
     k,
     t.runtime.legacyTypeOf,
-    g,
-    y,
+    f,
+    w,
     e.authoringTemplate,
     e.screen
   ]), { palette: N, recordInserted: C } = Ua({
@@ -8905,10 +8911,10 @@ var Tr = () => ({
           available: Tr()
         },
         authoringTemplate: e.authoringTemplate,
-        saveFailure: w,
+        saveFailure: y,
         onKeepEditing: () => T(void 0),
         onDiscard: _.closeWithoutSaving,
-        onPreview: f
+        onPreview: g
       })
     })]
   });
@@ -9049,82 +9055,83 @@ var dt = "p-anchored-overlay", Vt = "p-collapsible", Kn = "p-overlay-mask", D =
     problem: t.problem,
     strings: e.strings
   });
-}, zv = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: i, paletteSources: r, initialSize: s, onChange: l, renderPaletteHost: c, opened: u }) => {
-  const d = V(void 0), p = Ts(u, e.authoringTemplate, t, (y) => d.current?.(y)), [m, g] = L(s ?? vn[Xe.Desktop]), [f, v] = L(!0), h = V(l);
-  h.current = l, ie(() => {
-    const y = nn(p.document, e.authoringTemplate);
-    h.current?.({
-      document: on(p.document, e.screen),
-      legacyElements: Xn(y, t.runtime.legacyTypeOf),
-      windowSize: m,
-      layout: po(y),
-      changed: p.isDirty
+}, zv = ({ subject: e, environment: t, strings: n, layoutLabels: o, icons: i, paletteSources: r, initialSize: s, onChange: l, renderPaletteHost: c, title: u, opened: d }) => {
+  const p = V(void 0), m = Ts(d, e.authoringTemplate, t, (S) => p.current?.(S)), [f, g] = L(s ?? vn[Xe.Desktop]), [v, h] = L(!0), k = V(l);
+  k.current = l, ie(() => {
+    const S = nn(m.document, e.authoringTemplate);
+    k.current?.({
+      document: on(m.document, e.screen),
+      legacyElements: Xn(S, t.runtime.legacyTypeOf),
+      windowSize: f,
+      layout: po(S),
+      changed: m.isDirty
     });
   }, [
-    p.document,
-    p.isDirty,
-    m,
+    m.document,
+    m.isDirty,
+    f,
     e.authoringTemplate,
     e.screen,
     t.runtime.legacyTypeOf
   ]);
-  const k = z((y) => {
-    if (!Zo(y)) return;
-    const S = p.selection, w = S && "children" in S ? p.selectedId : void 0;
-    y.kind === "layout" ? p.insertLayout(y.item, w, void 0) : p.insertComponent(ei(y.componentName, y.package), w, void 0);
-  }, [p]), { palette: x, recordInserted: O } = Ua({
+  const x = z((S) => {
+    if (!Zo(S)) return;
+    const y = m.selection, T = y && "children" in y ? m.selectedId : void 0;
+    S.kind === "layout" ? m.insertLayout(S.item, T, void 0) : m.insertComponent(ei(S.componentName, S.package), T, void 0);
+  }, [m]), { palette: O, recordInserted: w } = Ua({
     strings: n,
     layoutLabels: o,
     icons: i,
     paletteSources: r,
-    onAdd: (y) => k(y.payload)
+    onAdd: (S) => x(S.payload)
   });
-  return d.current = O, /* @__PURE__ */ a(Qa, {
+  return p.current = w, /* @__PURE__ */ a(Qa, {
     environment: t,
     children: /* @__PURE__ */ b("div", {
       className: "studio-screen-editor-workspace",
       children: [
-        c ? c(x) : /* @__PURE__ */ a(za, {
+        c ? c(O) : /* @__PURE__ */ a(za, {
           placement: "inline",
-          children: x
+          children: O
         }),
         /* @__PURE__ */ a("div", {
           className: "studio-screen-editor-workspace__stage",
           children: /* @__PURE__ */ a(bs, {
-            controller: p,
+            controller: m,
             environment: t,
             strings: n,
             window: {
-              size: m,
+              size: f,
               setSize: g,
-              isInspectorOpen: f,
-              toggleInspector: () => v((y) => !y),
+              isInspectorOpen: v,
+              toggleInspector: () => h((S) => !S),
               available: {
                 width: 1600,
                 height: 1e3
               }
             },
             authoringTemplate: e.authoringTemplate,
+            title: u,
             deviceFrame: !0
           })
         }),
-        f && /* @__PURE__ */ a("aside", {
+        v && /* @__PURE__ */ a("aside", {
           className: "studio-screen-editor-workspace__inspector",
           style: { flexBasis: 360 },
           children: /* @__PURE__ */ a(Ma, {
             strings: n,
-            controller: p,
+            controller: m,
             environment: t,
             authoringTemplate: e.authoringTemplate,
-            onClose: () => v(!1),
+            onClose: () => h(!1),
             structure: /* @__PURE__ */ a(wa, {
-              roots: p.composition.roots,
-              adapter: p.adapter,
+              roots: m.composition.roots,
+              adapter: m.adapter,
               strings: n,
-              selectedId: p.selectedId,
-              onSelect: p.select,
-              onEdit: p.move,
-              onRemove: p.remove
+              selectedId: m.selectedId,
+              onSelect: m.select,
+              onEdit: m.move,
+              onRemove: m.remove
             })
           })
         })
@@ -9444,8 +9451,8 @@ function fb(e, t, n) {
     },
     isKnownComponent: (p) => u.has(p),
     legacyTypeOf: (p) => {
-      const m = Uh(p, t, o), g = m?.package === Ir ? `${Ir}.${ma(m.name)}` : void 0;
-      return g !== void 0 && nb.has(g) ? g : void 0;
+      const m = Uh(p, t, o), f = m?.package === Ir ? `${Ir}.${ma(m.name)}` : void 0;
+      return f !== void 0 && nb.has(f) ? f : void 0;
     }
   };
 }
@@ -9836,10 +9843,10 @@ var Jb = [
     n?.width,
     n?.height,
     o
-  ]), p = j(() => ai(t), [t]), m = j(() => qb(t.registry), [t.registry]), g = {
+  ]), p = j(() => ai(t), [t]), m = j(() => qb(t.registry), [t.registry]), f = {
     width: d.width,
     height: Pr + d.bodyHeight
-  }, f = /* @__PURE__ */ b(re, { children: [/* @__PURE__ */ b("div", {
+  }, g = /* @__PURE__ */ b(re, { children: [/* @__PURE__ */ b("div", {
     className: "screen-thumbnail__title-bar",
     style: { height: Pr },
     children: [Jb.map((h) => /* @__PURE__ */ a("span", {
@@ -9875,21 +9882,21 @@ var Jb = [
     role: "button",
     tabIndex: 0,
     className: "screen-thumbnail screen-thumbnail--clickable",
-    style: g,
+    style: f,
     title: r,
     "aria-label": r,
     onClick: s,
     onKeyDown: (h) => {
       h.key !== "Enter" && h.key !== " " || (h.preventDefault(), h.currentTarget.click());
     },
-    children: f
+    children: g
   }) : /* @__PURE__ */ a("div", {
     ref: c,
     className: "screen-thumbnail",
-    style: g,
+    style: f,
     role: "img",
     "aria-label": i,
-    children: f
+    children: g
   });
 }, ut = /* @__PURE__ */ new Map(), Yb = 200;
 function $0(e) {