@feedmepos/mf-menu-portal 1.0.4-dev.3 → 1.0.4

package/dist/TreeEditorOpenner.vue_vue_type_script_setup_true_lang-B8nXazx6.js

@@ -0,0 +1,1291 @@
+import { defineComponent as W, computed as F, ref as j, resolveComponent as D, openBlock as p, createElementBlock as R, createVNode as d, withKeys as ie, withModifiers as H, unref as e, normalizeClass as X, withCtx as $, createElementVNode as V, toDisplayString as K, createCommentVNode as U, h as ve, shallowRef as Q, watch as ee, onBeforeUnmount as le, createBlock as B, Fragment as Z, onUnmounted as fe, mergeProps as ge, renderList as oe, onMounted as me, nextTick as ye, renderSlot as be } from "vue";
+import { useI18n as Y } from "@feedmepos/mf-common";
+import { components as _e, useSnackbar as ke, useDialog as we } from "@feedmepos/ui-library";
+import { _ as he } from "./ProductImageEditorDialog.vue_vue_type_script_setup_true_lang-CjQRRqBx.js";
+import { u as xe } from "./useActionFeedback-CXx7dOVc.js";
+import { e as te, u as J, b as pe, N as ue, f as Ce, a as Fe } from "./provide-Bwf3KcOV.js";
+import { _ as $e, b as Ie } from "./ProductInlineCreateHost.vue_vue_type_script_setup_true_lang-3yzUcogQ.js";
+import { _ as de } from "./vuedraggable-CBtQLb_S.js";
+import { _ as ce } from "./ProductFilterMenu.vue_vue_type_script_setup_true_lang-Cgc0Ms_n.js";
+import { _ as Se } from "./TranslationLanguageSelector.vue_vue_type_script_setup_true_lang-BJZ6VcrT.js";
+import { _ as ze } from "./TranslationSideSheet.vue_vue_type_script_setup_true_lang-B0j2PNih.js";
+import { u as Te } from "./useEditorValidation-Ctef5Bxt.js";
+import { O as Ee } from "./LinkProductSideSheet.vue_vue_type_script_setup_true_lang-C0rc1FRO.js";
+import { _ as Re } from "./CatalogLinkProductAction.vue_vue_type_script_setup_true_lang-P59vHZEn.js";
+const Be = { key: 0 }, Le = { class: "fm-typo-en-body-md-600 text-fm-color-neutral-gray-400" }, De = { class: "fm-typo-en-title-sm-600" }, Me = { class: "max-h-[60vh] min-h-0 flex-1 overflow-y-auto" }, Ve = /* @__PURE__ */ W({
+  __name: "RestaurantAttributesFilter",
+  props: {
+    filter: {},
+    fullWidth: { type: Boolean, default: !1 }
+  },
+  emits: ["confirm"],
+  setup(A, { emit: _ }) {
+    const o = A, l = _, { t } = Y(), c = F(() => o.filter ?? null), m = j(!1), r = j({}), y = j({});
+    function x() {
+      var b;
+      (b = c.value) != null && b.available && (r.value = { ...c.value.selectedCustom }, y.value = { ...c.value.selectedStandard }, m.value = !0);
+    }
+    function T() {
+      l("confirm", {
+        custom: r.value,
+        standard: y.value
+      }), m.value = !1;
+    }
+    const S = F(
+      () => {
+        var b;
+        return (((b = c.value) == null ? void 0 : b.custom) ?? []).map((v) => ({ ...v, kind: "custom" }));
+      }
+    ), E = F(
+      () => {
+        var b;
+        return (((b = c.value) == null ? void 0 : b.standard) ?? []).map((v) => ({ ...v, kind: "standard" }));
+      }
+    ), f = [
+      {
+        header: () => t("portalshell.customAttributes.form.key"),
+        accessorKey: "key",
+        enableSorting: !1
+      },
+      {
+        header: () => t("portalshell.customAttributes.form.value"),
+        accessorKey: "values",
+        enableSorting: !1,
+        cell: (b) => {
+          const v = b.row.original, M = v.kind === "custom" ? r : y, a = t("menu.common.labels.a11y_labelled_name", {
+            label: t(
+              v.kind === "custom" ? "menu.link_product.rules.restaurant_custom_attributes_filter" : "menu.link_product.rules.restaurant_filter"
+            ),
+            name: v.key
+          }), g = (k) => {
+            var O;
+            k.el instanceof HTMLElement && ((O = k.el.querySelector("input")) == null || O.setAttribute("aria-label", a));
+          };
+          return ve(_e.FmSelect, {
+            "aria-label": a,
+            modelValue: M.value[v.key] ?? null,
+            onVnodeMounted: g,
+            onVnodeUpdated: g,
+            placeholder: t("portalshell.customAttributes.form.valuePlaceholder"),
+            items: v.values.map((k) => ({ label: k, value: k })),
+            clearable: !0,
+            searchable: !0,
+            "onUpdate:modelValue": (k) => {
+              M.value = { ...M.value, [v.key]: k ?? "" };
+            }
+          });
+        }
+      }
+    ];
+    return (b, v) => {
+      var i;
+      const M = D("FmIcon"), a = D("FmChip"), g = D("FmTable"), k = D("FmSpacer"), O = D("FmButton"), n = D("FmDialog");
+      return (i = c.value) != null && i.available ? (p(), R("div", Be, [
+        d(a, {
+          class: X(["cursor-pointer", b.fullWidth ? "w-full justify-between" : ""]),
+          role: "button",
+          tabindex: "0",
+          "aria-label": e(t)("menu.catalog.form.restaurant_attributes_title"),
+          onClick: x,
+          onKeydown: [
+            ie(H(x, ["prevent"]), ["enter"]),
+            ie(H(x, ["prevent"]), ["space"])
+          ]
+        }, {
+          default: $(() => [
+            V("span", Le, K(e(t)("menu.catalog.form.restaurant_attributes_title")), 1),
+            d(M, {
+              color: "neutral-gray-400",
+              name: "launch",
+              size: "sm"
+            })
+          ]),
+          _: 1
+        }, 8, ["class", "aria-label", "onKeydown"]),
+        d(n, {
+          modelValue: m.value,
+          "onUpdate:modelValue": v[1] || (v[1] = (z) => m.value = z),
+          overlay: !0,
+          "min-width": "min(calc(100% - 48px), 560px)"
+        }, {
+          "dialog-header": $(() => [
+            V("div", De, K(e(t)("menu.catalog.form.restaurant_attributes_title")), 1)
+          ]),
+          "dialog-footer": $(() => [
+            d(k),
+            d(O, {
+              label: e(t)("menu.common.actions.confirm"),
+              size: "lg",
+              type: "submit",
+              variant: "primary",
+              onClick: T
+            }, null, 8, ["label"]),
+            d(O, {
+              label: e(t)("menu.common.actions.cancel"),
+              size: "lg",
+              variant: "tertiary",
+              onClick: v[0] || (v[0] = (z) => m.value = !1)
+            }, null, 8, ["label"])
+          ]),
+          default: $(() => [
+            V("div", Me, [
+              d(de, {
+                title: e(t)("menu.link_product.rules.restaurant_custom_attributes_filter")
+              }, {
+                default: $(() => [
+                  d(g, {
+                    "column-defs": f,
+                    "row-data": S.value,
+                    "shrink-at": !1,
+                    "page-size": S.value.length,
+                    "hide-footer": ""
+                  }, null, 8, ["row-data", "page-size"])
+                ]),
+                _: 1
+              }, 8, ["title"]),
+              d(de, {
+                title: e(t)("menu.link_product.rules.restaurant_filter")
+              }, {
+                default: $(() => [
+                  d(g, {
+                    "column-defs": f,
+                    "row-data": E.value,
+                    "shrink-at": !1,
+                    "page-size": E.value.length,
+                    "hide-footer": ""
+                  }, null, 8, ["row-data", "page-size"])
+                ]),
+                _: 1
+              }, 8, ["title"])
+            ])
+          ]),
+          _: 1
+        }, 8, ["modelValue"])
+      ])) : U("", !0);
+    };
+  }
+}), Ue = { class: "h-full overflow-auto pl-[25px]" }, Ae = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 p-24 text-center text-fm-color-neutral-gray-400"
+}, Oe = /* @__PURE__ */ W({
+  __name: "DetailPane",
+  props: {
+    selected: {}
+  },
+  setup(A, { expose: _ }) {
+    const o = A, l = te(), { t } = Y(), c = Q(null), m = Q(null), r = Q({ status: "loading" });
+    let y = null, x = null;
+    const T = F(
+      () => r.value.status === "ready" ? r.value.value : null
+    );
+    function S() {
+      var a;
+      (a = c.value) == null || a.open("category");
+    }
+    function E() {
+      var g, k;
+      const a = (k = (g = o.selected) == null ? void 0 : g.selection) == null ? void 0 : k.itemId;
+      f(), a && v(a);
+    }
+    _({ openCategoryCreate: S, refreshSelected: E });
+    function f() {
+      var a;
+      y == null || y(), y = null, (a = m.value) == null || a.dispose(), m.value = null, r.value = { status: "loading" };
+    }
+    function b() {
+      f(), x == null || x.dispose(), x = null;
+    }
+    function v(a) {
+      x ?? (x = l.item.editorScope());
+      const g = l.item.editor(a);
+      m.value = g, r.value = g.get(), y = g.subscribe((k) => {
+        r.value = k;
+      });
+    }
+    function M(a) {
+      var k;
+      const g = ((k = T.value) == null ? void 0 : k.itemId) ?? null;
+      f(), x == null || x.select(a), g && v(g);
+    }
+    return ee(
+      () => o.selected,
+      (a) => {
+        var k;
+        if (a && !a.selectable) return;
+        const g = a == null ? void 0 : a.selection;
+        (g == null ? void 0 : g.itemId) !== ((k = T.value) == null ? void 0 : k.itemId) && (f(), g && v(g.itemId));
+      },
+      { immediate: !0 }
+    ), le(b), (a, g) => {
+      var k, O, n;
+      return p(), R("div", Ue, [
+        T.value && m.value ? (p(), B($e, {
+          key: 0,
+          sdk: e(l),
+          session: m.value,
+          view: T.value,
+          "tree-selection": (k = a.selected) == null ? void 0 : k.selection,
+          "item-breadcrumb": (O = a.selected) == null ? void 0 : O.itemBreadcrumb,
+          presentation: "tree",
+          onCreateEntity: g[0] || (g[0] = (i) => {
+            var z;
+            return (z = c.value) == null ? void 0 : z.open(i);
+          }),
+          onSelectScope: g[1] || (g[1] = (i) => M(i))
+        }, null, 8, ["sdk", "session", "view", "tree-selection", "item-breadcrumb"])) : (p(), R("p", Ae, K(e(t)("menu.tree_editor.labels.please_select_a_product_to_edit")), 1)),
+        d(Ie, {
+          ref_key: "inlineCreate",
+          ref: c,
+          "item-id": ((n = T.value) == null ? void 0 : n.itemId) ?? null,
+          presentation: "tree",
+          sdk: e(l)
+        }, null, 8, ["item-id", "sdk"])
+      ]);
+    };
+  }
+}), Ne = /* @__PURE__ */ W({
+  __name: "EditorHistoryControls",
+  props: {
+    canUndo: { type: Boolean },
+    canRedo: { type: Boolean },
+    committing: { type: Boolean }
+  },
+  emits: ["undo", "redo"],
+  setup(A, { emit: _ }) {
+    const o = _, { t: l } = Y();
+    return (t, c) => {
+      const m = D("FmButton");
+      return p(), R(Z, null, [
+        d(m, {
+          "aria-label": e(l)("menu.tree_editor.actions.undo"),
+          disabled: !t.canUndo || t.committing,
+          icon: "undo",
+          variant: "tertiary",
+          onClick: c[0] || (c[0] = (r) => o("undo"))
+        }, null, 8, ["aria-label", "disabled"]),
+        d(m, {
+          "aria-label": e(l)("menu.tree_editor.actions.redo"),
+          disabled: !t.canRedo || t.committing,
+          icon: "redo",
+          variant: "tertiary",
+          onClick: c[1] || (c[1] = (r) => o("redo"))
+        }, null, 8, ["aria-label", "disabled"])
+      ], 64);
+    };
+  }
+}), Pe = { class: "space-y-8" }, je = /* @__PURE__ */ W({
+  __name: "ScopeSwitcher",
+  setup(A) {
+    const _ = te(), { t: o } = Y(), l = J(_.context.current), t = J(_.catalog.list), c = J(_.scheduler.list), m = J(_.tree.view), r = F(
+      () => l.value.status === "ready" ? l.value.value : { catalogId: null, schedulerId: null }
+    ), y = F(() => [
+      { label: o("menu.tree_editor.labels.main_catalog"), value: null },
+      ...t.value.status === "ready" ? t.value.value.rows.map((f) => ({
+        label: f.name,
+        value: f.id
+      })) : []
+    ]), x = F(() => [
+      { label: o("menu.tree_editor.labels.all_time"), value: null },
+      ...c.value.status === "ready" ? c.value.value.rows.map((f) => ({
+        label: f.name,
+        value: f.id
+      })) : []
+    ]), T = F(() => {
+      const f = y.value.find(
+        (b) => b.value === r.value.catalogId
+      );
+      return o("menu.common.labels.a11y_labelled_name", {
+        label: o("menu.common.labels.catalog"),
+        name: (f == null ? void 0 : f.label) ?? o("menu.tree_editor.labels.main_catalog")
+      });
+    }), S = F(() => {
+      const f = x.value.find(
+        (b) => b.value === r.value.schedulerId
+      );
+      return o("menu.common.labels.a11y_labelled_name", {
+        label: o("menu.common.labels.scheduler"),
+        name: (f == null ? void 0 : f.label) ?? o("menu.tree_editor.labels.all_time")
+      });
+    }), E = F(
+      () => m.value.status === "ready" && m.value.value.schedulerScopeAvailable
+    );
+    return (f, b) => (p(), R("div", Pe, [
+      d(ce, {
+        "model-value": r.value.catalogId,
+        options: y.value,
+        title: T.value,
+        "full-width": "",
+        "onUpdate:modelValue": b[0] || (b[0] = (v) => e(_).context.select({ catalogId: v }))
+      }, null, 8, ["model-value", "options", "title"]),
+      E.value ? (p(), B(ce, {
+        key: 0,
+        "model-value": r.value.schedulerId,
+        options: x.value,
+        title: S.value,
+        "full-width": "",
+        "onUpdate:modelValue": b[1] || (b[1] = (v) => e(_).context.select({ schedulerId: v }))
+      }, null, 8, ["model-value", "options", "title"])) : U("", !0)
+    ]));
+  }
+}), Ke = { class: "space-y-8" }, He = /* @__PURE__ */ W({
+  __name: "TreeFilter",
+  setup(A) {
+    const _ = te(), { t: o } = Y(), l = J(_.tree.view), t = F(
+      () => l.value.status === "ready" ? l.value.value.restaurantFilter : null
+    ), c = j("");
+    let m;
+    return ee(c, (r) => {
+      m && clearTimeout(m), m = setTimeout(() => _.tree.setQuery(r), 300);
+    }), fe(() => {
+      m && clearTimeout(m);
+    }), (r, y) => {
+      const x = D("FmSearch");
+      return p(), R("div", Ke, [
+        d(je),
+        d(Ve, {
+          filter: t.value,
+          "full-width": "",
+          onConfirm: y[0] || (y[0] = (T) => e(_).tree.setRestaurantFilter(T))
+        }, null, 8, ["filter"]),
+        y[2] || (y[2] = V("div", { class: "h-[1px] bg-fm-color-neutral-gray-100" }, null, -1)),
+        d(x, {
+          modelValue: c.value,
+          "onUpdate:modelValue": y[1] || (y[1] = (T) => c.value = T),
+          placeholder: e(o)("menu.tree_editor.labels.search")
+        }, null, 8, ["modelValue", "placeholder"])
+      ]);
+    };
+  }
+}), We = { class: "fm-typo-en-title-sm-600" }, qe = /* @__PURE__ */ W({
+  __name: "CategoryRenameDialog",
+  props: {
+    categoryId: {}
+  },
+  emits: ["close"],
+  setup(A, { emit: _ }) {
+    const o = A, l = _, t = te(), { t: c } = Y(), m = pe(), r = Q(null), y = Q({
+      status: "loading"
+    }), x = F(
+      () => y.value.status === "ready" ? y.value.value : null
+    ), T = Te(() => r.value), S = F(
+      () => x.value ? T.issue(x.value.fieldIssues, "name") ?? x.value.nameIssue : null
+    );
+    let E = null;
+    const f = Q(null), b = Q(
+      null
+    ), v = F(
+      () => {
+        var w;
+        return ((w = b.value) == null ? void 0 : w.status) === "ready" ? b.value.value : null;
+      }
+    ), M = Q(!1);
+    let a = null;
+    function g(w) {
+      var C;
+      a == null || a(), a = null, w && ((C = f.value) == null || C.dispose()), f.value = null, b.value = null, M.value = !1;
+    }
+    function k(w) {
+      var C, h;
+      g(!0), E == null || E(), E = null, w ? (C = r.value) == null || C.discard() : (h = r.value) == null || h.dispose(), r.value = null, y.value = { status: "loading" };
+    }
+    ee(
+      () => o.categoryId,
+      (w) => {
+        if (r.value && k(!0), !w) return;
+        const C = t.category.editor(w);
+        r.value = C, y.value = C.get(), E = C.subscribe((h) => {
+          y.value = h;
+        });
+      },
+      { immediate: !0 }
+    ), le(() => k(!0));
+    async function O() {
+      const w = r.value;
+      !w || (await T.submit(() => w.submit())).kind !== "success" || (k(!1), l("close"));
+    }
+    function n() {
+      k(!0), l("close");
+    }
+    function i() {
+      var h;
+      const w = r.value;
+      if (!w || ((h = x.value) == null ? void 0 : h.translation.state) !== "allowed") return;
+      g(!0);
+      const C = w.translationEditor();
+      f.value = C, b.value = C.get(), a = C.subscribe((I) => {
+        b.value = I;
+      }), M.value = !0;
+    }
+    function z(w) {
+      var I;
+      const C = f.value, h = (I = v.value) == null ? void 0 : I.nameLocale;
+      if (!(!C || !h)) {
+        for (const q of Object.keys(h))
+          q in w || C.removeLocale(q);
+        for (const [q, u] of Object.entries(w))
+          q in h || C.addLocale(q), C.setNameLocale(q, u);
+      }
+    }
+    function P() {
+      const w = f.value;
+      w && w.apply().kind === "success" && g(!1);
+    }
+    return (w, C) => {
+      const h = D("FmButton"), I = D("FmForm"), q = D("FmSpacer"), u = D("FmDialog");
+      return p(), R(Z, null, [
+        d(u, {
+          "model-value": w.categoryId !== null,
+          overlay: !0,
+          "min-width": "min(calc(100% - 48px), 480px)",
+          "onUpdate:modelValue": C[0] || (C[0] = (s) => !s && n())
+        }, {
+          "dialog-header": $(() => [
+            V("div", We, K(e(c)("menu.category.manager.dialog.update.title")), 1)
+          ]),
+          "dialog-footer": $(() => [
+            d(q),
+            d(h, {
+              label: e(c)("menu.common.actions.cancel"),
+              size: "md",
+              variant: "tertiary",
+              onClick: n
+            }, null, 8, ["label"]),
+            d(h, {
+              label: e(c)("menu.category.manager.dialog.update.action"),
+              size: "md",
+              variant: "primary"
+            }, null, 8, ["label"])
+          ]),
+          default: $(() => [
+            d(I, { onValidationSuccess: O }, {
+              default: $(() => {
+                var s;
+                return [
+                  d(Se, ge(
+                    {
+                      autofocus: "",
+                      "error-messages": S.value ? [e(m)(S.value)] : [],
+                      label: e(c)("menu.category.dialog.add.name.label"),
+                      placeholder: e(c)("menu.category.dialog.add.name.placeholder"),
+                      "model-value": ((s = x.value) == null ? void 0 : s.name) ?? ""
+                    },
+                    e(T).field("name", (L) => {
+                      var G;
+                      return (G = r.value) == null ? void 0 : G.setName(L);
+                    })
+                  ), {
+                    append: $(() => {
+                      var L;
+                      return [
+                        d(h, {
+                          "aria-label": e(c)("menu.common.translation.translation_label"),
+                          disabled: ((L = x.value) == null ? void 0 : L.translation.state) !== "allowed",
+                          icon: "g_translate",
+                          variant: "tertiary",
+                          onClick: i
+                        }, null, 8, ["aria-label", "disabled"])
+                      ];
+                    }),
+                    _: 1
+                  }, 16, ["error-messages", "label", "placeholder", "model-value"])
+                ];
+              }),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value"]),
+        v.value ? (p(), B(ze, {
+          key: 0,
+          "model-value": M.value,
+          dirty: v.value.dirty,
+          name: v.value.name,
+          "name-locale": v.value.nameLocale,
+          "supported-locales": v.value.supportedLocales,
+          title: e(c)("menu.common.translation.sheet_title", {
+            entity: e(c)("menu.category.entity")
+          }),
+          "name-section-label": e(c)("menu.common.translation.name_section", {
+            entity: e(c)("menu.category.entity")
+          }),
+          "z-index": 200,
+          onDiscard: C[1] || (C[1] = (s) => g(!0)),
+          onSave: P,
+          "onUpdate:modelValue": C[2] || (C[2] = (s) => !s && g(!0)),
+          "onUpdate:name": C[3] || (C[3] = (s) => {
+            var L;
+            return (L = f.value) == null ? void 0 : L.setName(s);
+          }),
+          "onUpdate:nameLocale": z
+        }, null, 8, ["model-value", "dirty", "name", "name-locale", "supported-locales", "title", "name-section-label"])) : U("", !0)
+      ], 64);
+    };
+  }
+}), ne = /* @__PURE__ */ W({
+  __name: "TextChip",
+  props: {
+    label: {},
+    variant: {},
+    border: { type: Boolean },
+    bold: { type: Boolean, default: !0 },
+    size: { default: "md" }
+  },
+  setup(A) {
+    const _ = A, o = {
+      neutral: "text-fm-color-typo-neutral bg-fm-color-neutral-gray-100",
+      primary: "text-fm-color-typo-primary bg-fm-color-system-primary-100",
+      secondary: "text-fm-color-typo-secondary bg-fm-color-system-secondary-100",
+      success: "text-fm-color-typo-success bg-fm-color-system-success-100",
+      warning: "text-fm-color-primary bg-fm-color-system-warning-100",
+      error: "text-fm-color-typo-error bg-fm-color-system-error-100",
+      info: "text-fm-color-typo-info bg-fm-color-system-info-100"
+    }, l = F(() => _.size === "xs" ? "text-[8px] tracking-wide leading-[10px] no-underline" : _.size === "sm" ? _.bold ? "fm-typo-en-body-sm-600" : "fm-typo-en-body-sm-400" : _.bold ? "fm-typo-en-body-md-600" : "fm-typo-en-body-md-400");
+    return (t, c) => (p(), R("span", {
+      class: X(["inline-block fm-corner-radius-md px-4 py-[2px] text-nowrap max-w-full", [
+        l.value,
+        o[t.variant],
+        t.border ? "border border-fm-color-neutral-gray-400" : ""
+      ]])
+    }, K(t.label), 3));
+  }
+}), Qe = ["aria-selected", "aria-expanded", "aria-label"], Ye = ["draggable", "data-node-id", "data-testid"], Ge = { class: "flex min-w-0 flex-1 items-center gap-4" }, Je = { class: "flex min-w-0 items-center gap-4" }, Xe = {
+  key: 2,
+  class: "w-24 shrink-0"
+}, Ze = { class: "flex shrink-0 items-center gap-4" }, et = { class: "tree-right-area relative flex shrink-0 items-center gap-4" }, tt = { class: "absolute right-full flex items-center opacity-0 group-hover:static group-hover:opacity-100 focus-within:static focus-within:opacity-100" }, at = {
+  key: 0,
+  role: "group"
+}, nt = /* @__PURE__ */ W({
+  __name: "TreeRow",
+  props: {
+    node: {},
+    depth: {},
+    expanded: {},
+    selectedId: {},
+    draggingId: {},
+    currencySymbol: {}
+  },
+  emits: ["toggle", "select", "remove", "add-item", "rename", "catalog-link", "drag-start", "drag-end", "drop"],
+  setup(A, { emit: _ }) {
+    const o = A, l = _, { t, n: c } = Y(), m = F(() => o.expanded.has(o.node.id)), r = F(() => o.node.remove.state === "allowed"), y = F(() => o.node.kind === "item"), x = F(() => o.node.addItem.state === "allowed"), T = F(() => {
+      var n;
+      return ((n = o.node.rename) == null ? void 0 : n.state) === "allowed";
+    }), S = F(
+      () => {
+        var n;
+        return ((n = o.node.linkToCatalog) == null ? void 0 : n.state) === "allowed";
+      }
+    ), E = F(
+      () => {
+        var n;
+        return ((n = o.node.unlinkFromCatalog) == null ? void 0 : n.state) === "allowed";
+      }
+    ), f = F(() => o.node.children.length > 0);
+    function b(n) {
+      l("catalog-link", { node: o.node, linked: n }), y.value && o.node.selectable && l("select", o.node);
+    }
+    const v = F(
+      () => o.node.labelMessage ? t(o.node.labelMessage.code) : o.node.label
+    ), M = F(() => {
+      const n = o.node.highlight.filter(Boolean);
+      if (!n.length) return [{ text: v.value, highlighted: !1 }];
+      const i = n.map((z) => z.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+      return v.value.split(new RegExp(`(${i})`, "gi")).map((z, P) => ({
+        text: z,
+        highlighted: P % 2 === 1
+      }));
+    }), a = F(() => v.value.trim()), g = F(
+      () => ["pl-12", "pl-32", "pl-[52px]", "pl-72", "pl-[92px]", "pl-112"][Math.min(o.depth, 5)]
+    ), k = F(() => o.node.kind === "category" || o.node.kind === "subCategory" ? "view_list" : o.node.kind === "group" ? "database" : o.node.kind === "variant" ? "lunch_dining" : "fastfood");
+    function O(n) {
+      const i = n.currentTarget.getBoundingClientRect(), z = (n.clientY - i.top) / i.height;
+      return z < 0.25 ? "before" : z > 0.75 ? "after" : f.value || o.node.kind !== "item" ? "inside" : "after";
+    }
+    return (n, i) => {
+      const z = D("FmIcon"), P = D("FmButton"), w = D("FmTooltip"), C = D("TreeRow", !0);
+      return p(), R("li", {
+        role: "treeitem",
+        "aria-selected": n.node.selectable ? n.selectedId === n.node.id : void 0,
+        "aria-expanded": f.value ? m.value : void 0,
+        "aria-label": a.value,
+        onClick: i[19] || (i[19] = H((h) => n.node.selectable && l("select", n.node), ["stop"]))
+      }, [
+        V("div", {
+          class: X(["tree-row group relative flex max-w-full select-none items-center gap-4 rounded min-h-[32px] py-4 pr-8 hover:bg-fm-color-opacity-sm", [
+            g.value,
+            n.node.selectable ? "cursor-pointer" : void 0,
+            n.selectedId === n.node.id ? "bg-fm-color-system-warning-100" : void 0
+          ]]),
+          draggable: n.node.draggable,
+          "data-node-id": n.node.id,
+          "data-testid": `tree-row-${n.node.id}`,
+          onDragstart: i[6] || (i[6] = (h) => l("drag-start", n.node)),
+          onDragend: i[7] || (i[7] = (h) => l("drag-end")),
+          onDragover: i[8] || (i[8] = H(() => {
+          }, ["prevent"])),
+          onDrop: i[9] || (i[9] = H((h) => l("drop", { node: n.node, position: O(h) }), ["prevent"]))
+        }, [
+          V("div", Ge, [
+            V("div", Je, [
+              n.node.draggable ? (p(), B(z, {
+                key: 0,
+                class: "invisible absolute left-0 shrink-0 text-fm-color-neutral-gray-400 group-hover:visible",
+                name: "drag_indicator",
+                outline: "",
+                size: "sm"
+              })) : U("", !0),
+              f.value ? (p(), B(P, {
+                key: 1,
+                class: "shrink-0 !h-24 !w-24 !p-4",
+                label: a.value,
+                "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                  label: m.value ? e(t)("menu.tree_editor.actions.collapse_row") : e(t)("menu.tree_editor.actions.expand_row"),
+                  name: a.value
+                }),
+                size: "md",
+                variant: "tertiary",
+                onClick: i[0] || (i[0] = H((h) => l("toggle", n.node.id), ["stop"]))
+              }, {
+                default: $(() => [
+                  d(z, {
+                    name: m.value ? "expand_more" : "chevron_right",
+                    color: "neutral-gray-400",
+                    outline: "",
+                    size: "sm"
+                  }, null, 8, ["name"])
+                ]),
+                _: 1
+              }, 8, ["label", "aria-label"])) : (p(), R("span", Xe)),
+              d(z, {
+                name: k.value,
+                class: "shrink-0 text-fm-color-neutral-gray-400",
+                outline: "",
+                size: "sm"
+              }, null, 8, ["name"]),
+              V("span", {
+                class: X([
+                  "fm-typo-en-body-md-400 min-w-0 flex-1 truncate",
+                  n.selectedId === n.node.id ? "text-fm-color-primary" : void 0
+                ])
+              }, [
+                (p(!0), R(Z, null, oe(M.value, (h, I) => (p(), R("span", {
+                  key: I,
+                  class: X(
+                    h.highlighted ? "bg-fm-color-system-warning-100" : void 0
+                  )
+                }, K(h.text), 3))), 128))
+              ], 2)
+            ]),
+            V("div", Ze, [
+              n.node.kind === "category" && n.node.itemCount > 0 ? (p(), B(ne, {
+                key: 0,
+                label: e(t)("menu.tree_editor.labels.products", { count: n.node.itemCount }),
+                class: "shrink-0",
+                size: "xs",
+                variant: "neutral"
+              }, null, 8, ["label"])) : U("", !0),
+              y.value && n.node.groupCount > 0 ? (p(), B(ne, {
+                key: 1,
+                label: e(t)("menu.tree_editor.labels.groups", { count: n.node.groupCount }),
+                class: "shrink-0",
+                size: "xs",
+                variant: "neutral"
+              }, null, 8, ["label"])) : U("", !0),
+              y.value && n.node.variantCount > 0 ? (p(), B(ne, {
+                key: 2,
+                label: e(t)("menu.tree_editor.labels.variants", {
+                  count: n.node.variantCount
+                }),
+                class: "shrink-0",
+                size: "xs",
+                variant: "neutral"
+              }, null, 8, ["label"])) : U("", !0),
+              n.node.orderFrom ? (p(), B(ne, {
+                key: 3,
+                label: e(t)(e(Ee)[n.node.orderFrom]),
+                border: "",
+                class: "shrink-0",
+                size: "xs",
+                variant: "neutral"
+              }, null, 8, ["label"])) : U("", !0)
+            ])
+          ]),
+          V("div", et, [
+            V("div", tt, [
+              x.value ? (p(), B(w, {
+                key: 0,
+                class: "shrink-0",
+                content: e(t)("menu.tree_editor.actions.add_product"),
+                placement: "top",
+                "z-index": 999
+              }, {
+                default: $(() => [
+                  d(P, {
+                    "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                      label: e(t)("menu.tree_editor.actions.add_product"),
+                      name: a.value
+                    }),
+                    class: "shrink-0 !h-24 !w-24 !p-4 opacity-0 focus-visible:opacity-100 group-hover:opacity-100",
+                    label: a.value,
+                    size: "md",
+                    variant: "tertiary",
+                    onClick: i[1] || (i[1] = H((h) => l("add-item", n.node), ["stop"]))
+                  }, {
+                    default: $(() => [
+                      d(z, {
+                        name: "add",
+                        color: "neutral-gray-400",
+                        outline: "",
+                        size: "sm"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "label"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : U("", !0),
+              T.value ? (p(), B(w, {
+                key: 1,
+                class: "shrink-0",
+                content: e(t)("menu.tree_editor.actions.edit_category"),
+                placement: "top",
+                "z-index": 999
+              }, {
+                default: $(() => [
+                  d(P, {
+                    "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                      label: e(t)("menu.tree_editor.actions.edit_category"),
+                      name: a.value
+                    }),
+                    class: "shrink-0 !h-24 !w-24 !p-4 opacity-0 focus-visible:opacity-100 group-hover:opacity-100",
+                    label: a.value,
+                    size: "md",
+                    variant: "tertiary",
+                    onClick: i[2] || (i[2] = H((h) => l("rename", n.node), ["stop"]))
+                  }, {
+                    default: $(() => [
+                      d(z, {
+                        name: "edit",
+                        color: "neutral-gray-400",
+                        outline: "",
+                        size: "sm"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "label"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : U("", !0),
+              r.value ? (p(), B(w, {
+                key: 2,
+                class: "shrink-0",
+                content: y.value ? e(t)("menu.tree_editor.actions.delete_product") : e(t)("menu.tree_editor.actions.delete_category"),
+                placement: "top",
+                "z-index": 999
+              }, {
+                default: $(() => [
+                  d(P, {
+                    "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                      label: y.value ? e(t)("menu.tree_editor.actions.delete_product") : e(t)("menu.tree_editor.actions.delete_category"),
+                      name: a.value
+                    }),
+                    class: "shrink-0 !h-24 !w-24 !p-4 opacity-0 focus-visible:opacity-100 group-hover:opacity-100",
+                    label: a.value,
+                    size: "md",
+                    variant: "tertiary",
+                    onClick: i[3] || (i[3] = H((h) => l("remove", n.node), ["stop"]))
+                  }, {
+                    default: $(() => [
+                      d(z, {
+                        name: "delete",
+                        color: "neutral-gray-400",
+                        outline: "",
+                        size: "sm"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "label"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : U("", !0),
+              S.value ? (p(), B(w, {
+                key: 3,
+                class: "shrink-0",
+                content: y.value ? e(t)("menu.tree_editor.actions.link_product_to_catalog") : e(t)("menu.tree_editor.actions.link_category_to_catalog"),
+                placement: "top",
+                "z-index": 999
+              }, {
+                default: $(() => [
+                  d(P, {
+                    "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                      label: y.value ? e(t)("menu.tree_editor.actions.link_product_to_catalog") : e(t)("menu.tree_editor.actions.link_category_to_catalog"),
+                      name: a.value
+                    }),
+                    class: "shrink-0 !h-24 !w-24 !p-4 opacity-0 focus-visible:opacity-100 group-hover:opacity-100",
+                    label: a.value,
+                    size: "md",
+                    variant: "tertiary",
+                    onClick: i[4] || (i[4] = H((h) => b(!0), ["stop"]))
+                  }, {
+                    default: $(() => [
+                      d(z, {
+                        name: "add_link",
+                        color: "neutral-gray-400",
+                        outline: "",
+                        size: "sm"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "label"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : U("", !0),
+              E.value ? (p(), B(w, {
+                key: 4,
+                class: "shrink-0",
+                content: e(t)("menu.tree_editor.actions.unlink_product_from_catalog"),
+                placement: "top",
+                "z-index": 999
+              }, {
+                default: $(() => [
+                  d(P, {
+                    "aria-label": e(t)("menu.common.labels.a11y_labelled_name", {
+                      label: e(t)(
+                        "menu.tree_editor.actions.unlink_product_from_catalog"
+                      ),
+                      name: a.value
+                    }),
+                    class: "shrink-0 !h-24 !w-24 !p-4 opacity-0 focus-visible:opacity-100 group-hover:opacity-100",
+                    label: a.value,
+                    size: "md",
+                    variant: "tertiary",
+                    onClick: i[5] || (i[5] = H((h) => b(!1), ["stop"]))
+                  }, {
+                    default: $(() => [
+                      d(z, {
+                        name: "link_off",
+                        color: "neutral-gray-400",
+                        outline: "",
+                        size: "sm"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["aria-label", "label"])
+                ]),
+                _: 1
+              }, 8, ["content"])) : U("", !0)
+            ]),
+            n.node.price ? (p(), R("span", {
+              key: 0,
+              class: X([
+                "fm-typo-en-body-md-400 shrink-0",
+                n.node.priceTone === "primary" ? "text-fm-color-primary" : "text-fm-color-typo-secondary"
+              ])
+            }, K(n.currencySymbol) + K(e(c)(n.node.price.amount, {
+              minimumFractionDigits: n.node.price.precision,
+              maximumFractionDigits: n.node.price.precision
+            })), 3)) : U("", !0)
+          ])
+        ], 42, Ye),
+        m.value && f.value ? (p(), R("ul", at, [
+          (p(!0), R(Z, null, oe(n.node.children, (h) => (p(), B(C, {
+            key: h.id,
+            depth: n.depth + 1,
+            "dragging-id": n.draggingId,
+            expanded: n.expanded,
+            "currency-symbol": n.currencySymbol,
+            node: h,
+            "selected-id": n.selectedId,
+            onAddItem: i[10] || (i[10] = (I) => l("add-item", I)),
+            onRename: i[11] || (i[11] = (I) => l("rename", I)),
+            onCatalogLink: i[12] || (i[12] = (I) => l("catalog-link", I)),
+            onRemove: i[13] || (i[13] = (I) => l("remove", I)),
+            onDragEnd: i[14] || (i[14] = (I) => l("drag-end")),
+            onDragStart: i[15] || (i[15] = (I) => l("drag-start", I)),
+            onDrop: i[16] || (i[16] = (I) => l("drop", I)),
+            onSelect: i[17] || (i[17] = (I) => l("select", I)),
+            onToggle: i[18] || (i[18] = (I) => l("toggle", I))
+          }, null, 8, ["depth", "dragging-id", "expanded", "currency-symbol", "node", "selected-id"]))), 128))
+        ])) : U("", !0)
+      ], 8, Qe);
+    };
+  }
+}), lt = { class: "relative flex h-full min-h-0 flex-col gap-4 p-8" }, ot = { class: "mt-12 flex items-center justify-between gap-4" }, rt = { class: "fm-typo-en-body-md-400 flex items-center" }, st = { class: "ml-auto flex items-center" }, it = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 p-16 text-fm-color-neutral-gray-400",
+  role: "alert"
+}, ut = {
+  key: 2,
+  class: "fm-typo-en-body-md-400 p-16 text-fm-color-neutral-gray-400",
+  role: "status"
+}, dt = {
+  key: 3,
+  class: "fm-typo-en-body-md-400 p-16 text-fm-color-neutral-gray-400"
+}, ct = ["aria-label"], mt = {
+  key: 0,
+  class: "tree-overlay absolute inset-0 flex items-center justify-center bg-white/50"
+}, pt = /* @__PURE__ */ W({
+  __name: "TreePanel",
+  emits: ["select", "create-category"],
+  setup(A, { emit: _ }) {
+    const o = te(), { t: l } = Y(), t = ke(), c = pe(), m = _, r = J(o.tree.view), y = J(o.category.list), x = F(
+      () => r.value.status === "ready" ? r.value.value : null
+    ), T = F(
+      () => y.value.status === "ready" && y.value.value.create.state === "allowed"
+    ), S = j(/* @__PURE__ */ new Set()), E = j(null), f = j(null), b = j(null), v = j(null), M = j(!1);
+    let a = null, g = null;
+    function k() {
+      const u = v.value;
+      M.value = !!u && u.scrollHeight > u.clientHeight + 1;
+    }
+    function O() {
+      var s;
+      const u = ((s = v.value) == null ? void 0 : s.querySelector('ul[role="tree"]')) ?? null;
+      u !== g && (g && (a == null || a.unobserve(g)), u && (a == null || a.observe(u)), g = u), k();
+    }
+    me(() => {
+      a = new ResizeObserver(O), v.value && a.observe(v.value), O();
+    }), le(() => a == null ? void 0 : a.disconnect()), ee([x, S], async () => {
+      await ye(), O();
+    }), ee(
+      () => {
+        var u;
+        return (u = x.value) == null ? void 0 : u.autoExpandIds;
+      },
+      (u) => {
+        if (!(u != null && u.length)) return;
+        const s = new Set(S.value);
+        for (const L of u) s.add(L);
+        S.value = s;
+      },
+      // The first published view can already carry a query's matches, so this has
+      // to run on mount rather than only on the next change.
+      { immediate: !0 }
+    );
+    function n(u) {
+      const s = new Set(S.value);
+      s.has(u) ? s.delete(u) : s.add(u), S.value = s;
+    }
+    function i() {
+      var u;
+      S.value = new Set(((u = x.value) == null ? void 0 : u.expandableIds) ?? []);
+    }
+    function z() {
+      S.value = /* @__PURE__ */ new Set();
+    }
+    function P(u) {
+      u.selectable && (E.value = u.id, m("select", u));
+    }
+    function w(u) {
+      const s = u.kind === "rejected" ? c(u.issues[0]) : u.kind === "failure" ? c(u.error.message) : null;
+      s !== null && t.open({
+        type: "error",
+        title: l("menu.tree_editor.feedback.update_failed"),
+        message: s
+      });
+    }
+    async function C(u) {
+      if (!u.entityId) return;
+      const s = u.kind === "item" ? await o.item.remove(u.entityId) : await o.category.remove(u.entityId);
+      w(s);
+    }
+    async function h(u) {
+      w(
+        await o.tree.setCatalogLink(u.node.id, u.linked)
+      );
+    }
+    async function I(u) {
+      if (!u.entityId) return;
+      const s = o.item.editor(void 0, { loadInventoryCatalogue: !1 });
+      try {
+        s.setName(ue), s.setCategory(u.entityId);
+        const L = await s.submit();
+        if (L.kind === "success") {
+          const G = new Set(S.value);
+          G.add(u.id), S.value = G, t.open({
+            type: "success",
+            title: l("menu.tree_editor.feedback.product_created", {
+              name: ue
+            })
+          });
+          return;
+        }
+        w(L);
+      } finally {
+        s.dispose();
+      }
+    }
+    async function q(u) {
+      const s = f.value;
+      if (f.value = null, !s || s === u.node.id) return;
+      const L = await o.tree.rearrange({
+        draggedNodeId: s,
+        targetNodeId: u.node.id,
+        position: u.position
+      });
+      L.kind === "rejected" ? t.open({ message: l(L.issues[0].code), type: "warning" }) : w(L);
+    }
+    return (u, s) => {
+      const L = D("FmButton"), G = D("FmIcon"), re = D("FmTooltip"), se = D("FmCircularProgress");
+      return p(), R("div", lt, [
+        d(He),
+        V("div", ot, [
+          T.value ? (p(), B(L, {
+            key: 0,
+            label: e(l)("menu.tree_editor.actions.add_category"),
+            "prepend-icon": "add",
+            class: "!h-32 shrink-0 !gap-4 !px-8 !py-4",
+            "text-color": "primary",
+            variant: "plain",
+            onClick: s[0] || (s[0] = (ae) => m("create-category"))
+          }, {
+            default: $(() => [
+              V("span", rt, K(e(l)("menu.tree_editor.actions.add_category")), 1)
+            ]),
+            _: 1
+          }, 8, ["label"])) : (p(), B(Re, {
+            key: 1,
+            sdk: e(o),
+            presentation: "tree"
+          }, null, 8, ["sdk"])),
+          V("div", st, [
+            d(re, {
+              content: e(l)("menu.tree_editor.actions.expand_all"),
+              placement: "top",
+              "z-index": 999
+            }, {
+              default: $(() => [
+                d(L, {
+                  "aria-label": e(l)("menu.tree_editor.actions.expand_all"),
+                  label: e(l)("menu.tree_editor.actions.expand_all"),
+                  class: "shrink-0 !h-24 !w-24 !p-4",
+                  variant: "tertiary",
+                  onClick: i
+                }, {
+                  default: $(() => [
+                    d(G, {
+                      name: "expand_all",
+                      color: "neutral-gray-400",
+                      outline: "",
+                      size: "sm"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "label"])
+              ]),
+              _: 1
+            }, 8, ["content"]),
+            d(re, {
+              content: e(l)("menu.tree_editor.actions.collapse_all"),
+              placement: "top",
+              "z-index": 999
+            }, {
+              default: $(() => [
+                d(L, {
+                  "aria-label": e(l)("menu.tree_editor.actions.collapse_all"),
+                  label: e(l)("menu.tree_editor.actions.collapse_all"),
+                  class: "shrink-0 !h-24 !w-24 !p-4",
+                  variant: "tertiary",
+                  onClick: z
+                }, {
+                  default: $(() => [
+                    d(G, {
+                      name: "collapse_all",
+                      color: "neutral-gray-400",
+                      outline: "",
+                      size: "sm"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "label"])
+              ]),
+              _: 1
+            }, 8, ["content"])
+          ])
+        ]),
+        V("div", {
+          ref_key: "scrollElement",
+          ref: v,
+          class: X(["menu-tree-scroll min-h-0 flex-1 overflow-auto", M.value ? "pr-[14px]" : void 0])
+        }, [
+          e(r).status === "loading" ? (p(), B(se, {
+            key: 0,
+            size: "lg"
+          })) : e(r).status === "error" ? (p(), R("p", it, K(e(c)(e(r).error.message)), 1)) : e(r).status === "unavailable" ? (p(), R("p", ut, K(e(c)(e(r).reason)), 1)) : e(r).status === "ready" && e(r).value.nodes.length === 0 ? (p(), R("p", dt, K(e(l)("menu.tree_editor.labels.no_items")), 1)) : e(r).status === "ready" ? (p(), R("ul", {
+            key: 4,
+            "aria-label": e(l)("menu.tree_editor.labels.tree"),
+            role: "tree"
+          }, [
+            (p(!0), R(Z, null, oe(e(r).value.nodes, (ae) => (p(), B(nt, {
+              key: ae.id,
+              depth: 0,
+              "dragging-id": f.value,
+              expanded: S.value,
+              node: ae,
+              "currency-symbol": e(r).value.currencySymbol,
+              "selected-id": E.value,
+              onAddItem: s[1] || (s[1] = (N) => I(N)),
+              onRename: s[2] || (s[2] = (N) => b.value = N.entityId),
+              onCatalogLink: s[3] || (s[3] = (N) => h(N)),
+              onRemove: s[4] || (s[4] = (N) => C(N)),
+              onDragEnd: s[5] || (s[5] = (N) => f.value = null),
+              onDragStart: s[6] || (s[6] = (N) => f.value = N.id),
+              onDrop: s[7] || (s[7] = (N) => q(N)),
+              onSelect: s[8] || (s[8] = (N) => P(N)),
+              onToggle: s[9] || (s[9] = (N) => n(N))
+            }, null, 8, ["dragging-id", "expanded", "node", "currency-symbol", "selected-id"]))), 128))
+          ], 8, ct)) : U("", !0)
+        ], 2),
+        e(r).status === "ready" && e(r).stale ? (p(), R("div", mt, [
+          d(se, { size: "lg" })
+        ])) : U("", !0),
+        d(qe, {
+          "category-id": b.value,
+          onClose: s[10] || (s[10] = (ae) => b.value = null)
+        }, null, 8, ["category-id"])
+      ]);
+    };
+  }
+}), vt = { class: "-mx-24 flex min-h-0 flex-1" }, ft = ["aria-label"], gt = ["aria-label"], yt = /* @__PURE__ */ W({
+  __name: "MenuManagementEditor",
+  props: {
+    draft: {}
+  },
+  emits: ["close"],
+  setup(A, { emit: _ }) {
+    const o = A, l = _, { t } = Y(), { run: c } = xe(), m = j(null), r = j(null);
+    function y() {
+      var a;
+      (a = r.value) == null || a.openCategoryCreate();
+    }
+    function x() {
+      var a;
+      o.draft.undo(), (a = r.value) == null || a.refreshSelected();
+    }
+    function T() {
+      var a;
+      o.draft.redo(), (a = r.value) == null || a.refreshSelected();
+    }
+    Ce(o.draft);
+    const S = J(o.draft.state), E = F(
+      () => S.value.status === "ready" ? S.value.value : {
+        dirty: !1,
+        canUndo: !1,
+        canRedo: !1,
+        committing: !1,
+        invalidated: !0
+      }
+    ), f = we();
+    async function b() {
+      (await c(() => o.draft.commit(), {
+        loadingTitle: t("menu.tree_editor.feedback.saving"),
+        successMessage: t("menu.tree_editor.feedback.saved")
+      })).kind === "success" && l("close");
+    }
+    async function v() {
+      (await c(() => o.draft.discard(), {
+        showLoading: !1
+      })).kind === "success" && l("close");
+    }
+    function M() {
+      if (!E.value.dirty) return void v();
+      f.open({
+        title: t("menu.tree_editor.actions.confirm_discard_title"),
+        message: t("menu.tree_editor.actions.confirm_discard_message"),
+        primaryActions: {
+          text: t("menu.tree_editor.actions.discard"),
+          variant: "primary",
+          close: !0
+        },
+        secondaryActions: {
+          text: t("menu.tree_editor.actions.keep_editing"),
+          variant: "tertiary",
+          close: !0
+        }
+      }).onPrimary(() => void v());
+    }
+    return (a, g) => (p(), B(he, {
+      "primary-action": {
+        label: e(t)("menu.tree_editor.actions.save"),
+        disabled: E.value.committing
+      },
+      "secondary-actions": [
+        { label: e(t)("menu.tree_editor.actions.cancel"), click: M }
+      ],
+      show: !0,
+      title: e(t)("menu.tree_editor.title"),
+      onOnCancel: M,
+      onOnPrimary: b
+    }, {
+      "append-title": $(() => [
+        d(Ne, {
+          "can-redo": E.value.canRedo,
+          "can-undo": E.value.canUndo,
+          committing: E.value.committing,
+          onRedo: T,
+          onUndo: x
+        }, null, 8, ["can-redo", "can-undo", "committing"])
+      ]),
+      default: $(() => [
+        V("div", vt, [
+          V("aside", {
+            "aria-label": e(t)("menu.tree_editor.labels.tree"),
+            class: "w-[300px] shrink-0 overflow-hidden border-r bg-fm-color-neutral-white pl-24"
+          }, [
+            d(pt, {
+              onCreateCategory: y,
+              onSelect: g[0] || (g[0] = (k) => m.value = k)
+            })
+          ], 8, ft),
+          V("section", {
+            "aria-label": e(t)("menu.tree_editor.labels.detail"),
+            class: "min-h-0 min-w-0 flex-1 overflow-hidden pr-24",
+            "data-testid": "menu-management-editor-detail-host"
+          }, [
+            d(Oe, {
+              ref_key: "detailPane",
+              ref: r,
+              selected: m.value
+            }, null, 8, ["selected"])
+          ], 8, gt)
+        ])
+      ]),
+      _: 1
+    }, 8, ["primary-action", "secondary-actions", "title"]));
+  }
+}), bt = "treeEditorOpen", Bt = /* @__PURE__ */ W({
+  __name: "TreeEditorOpenner",
+  props: {
+    canOpen: { type: Boolean },
+    listenForMessage: { type: Boolean, default: !0 }
+  },
+  setup(A) {
+    const _ = A, o = Fe(), l = Q(null);
+    function t() {
+      if (!_.canOpen || l.value) return;
+      const m = o.drafts.open();
+      m.kind === "success" && (l.value = m.value);
+    }
+    function c(m) {
+      var r;
+      _.canOpen && ((r = m.data) == null ? void 0 : r.type) === bt && t();
+    }
+    return me(() => {
+      _.listenForMessage && window.addEventListener("message", c);
+    }), le(() => {
+      var m;
+      _.listenForMessage && window.removeEventListener("message", c), (m = l.value) == null || m.dispose();
+    }), (m, r) => (p(), R(Z, null, [
+      be(m.$slots, "default", { trigger: t }),
+      l.value ? (p(), B(yt, {
+        key: 0,
+        draft: l.value,
+        onClose: r[0] || (r[0] = (y) => l.value = null)
+      }, null, 8, ["draft"])) : U("", !0)
+    ], 64));
+  }
+});
+export {
+  Bt as _,
+  ne as a,
+  Ve as b
+};