@feedmepos/mf-media 0.0.7 → 0.0.8

package/dist/AiStudio-40fbac7c.js

@@ -0,0 +1,792 @@
+import { defineComponent as j, computed as S, resolveComponent as B, openBlock as c, createElementBlock as y, createElementVNode as t, normalizeStyle as ee, createVNode as k, toDisplayString as d, unref as a, createCommentVNode as A, normalizeClass as V, createTextVNode as oe, createBlock as q, Fragment as M, renderList as O, mergeModels as H, useModel as G, renderSlot as ae, withCtx as te, ref as E, withDirectives as ne, vModelText as ie, onMounted as le } from "vue";
+import { defineStore as re, storeToRefs as de } from "pinia";
+import { useI18n as N, useCoreStore as ce } from "@feedmepos/mf-common";
+import { useDialog as ue, useSnackbar as me } from "@feedmepos/ui-library";
+import { z as W, p as fe, G as pe, K as ve } from "./media-picker-1af09b4a.js";
+const xe = { class: "rounded-xl border border-fm-color-neutral-gray-200 bg-white overflow-hidden" }, ge = ["src", "alt"], ye = {
+  key: 1,
+  class: "absolute inset-0 flex flex-col items-center justify-center gap-4 p-12 text-center"
+}, be = { class: "text-xs font-semibold" }, he = { class: "text-xs text-fm-color-typo-secondary line-clamp-3" }, _e = {
+  key: 2,
+  class: "absolute inset-0 flex items-center justify-center"
+}, $e = { class: "flex flex-col items-center gap-8" }, ke = { class: "text-xs text-fm-color-typo-secondary" }, Ie = {
+  key: 3,
+  class: "absolute left-8 top-8 px-4 py-4 rounded text-xs font-bold bg-black/60 text-white"
+}, we = {
+  key: 0,
+  class: "flex items-center gap-4 px-8 py-8"
+}, Te = { class: "flex-1 text-xs text-fm-color-typo-secondary truncate" }, Ce = ["title"], Fe = ["title"], Se = ["title"], Re = {
+  key: 1,
+  class: "flex justify-end px-8 py-8"
+}, Y = "w-32 h-32 rounded-md flex items-center justify-center text-fm-color-typo-secondary hover:bg-fm-color-neutral-gray-100", Be = /* @__PURE__ */ j({
+  __name: "StudioImageCard",
+  props: {
+    item: {},
+    ratio: {},
+    fromRef: { type: Boolean }
+  },
+  emits: ["preview", "variant", "discard", "save"],
+  setup(e, { emit: f }) {
+    const s = e, l = f, { t: r } = N(), m = S(() => s.item.status === "success" && !!s.item.url), p = S(() => s.item.status === "failed"), w = S(() => s.ratio.replace("x", " / ")), n = S(
+      () => s.item.width && s.item.height ? `${s.item.width}×${s.item.height}` : ""
+    );
+    return ($, g) => {
+      const C = B("FmIcon"), T = B("FmCircularProgress"), F = B("FmButton");
+      return c(), y("div", xe, [
+        t("div", {
+          class: "relative bg-fm-color-neutral-gray-100",
+          style: ee({ aspectRatio: w.value })
+        }, [
+          m.value ? (c(), y("img", {
+            key: 0,
+            src: e.item.url,
+            class: "w-full h-full object-cover",
+            alt: n.value
+          }, null, 8, ge)) : p.value ? (c(), y("div", ye, [
+            k(C, {
+              name: "error_outline",
+              size: "md"
+            }),
+            t("span", be, d(a(r)("media.studio.failed")), 1),
+            t("span", he, d(e.item.error), 1)
+          ])) : (c(), y("div", _e, [
+            t("div", $e, [
+              k(T, { size: "md" }),
+              t("span", ke, d(a(r)("media.studio.rendering")), 1)
+            ])
+          ])),
+          m.value ? (c(), y("span", Ie, d(e.fromRef ? a(r)("media.studio.refTag") : a(r)("media.studio.aiTag")), 1)) : A("", !0)
+        ], 4),
+        m.value ? (c(), y("div", we, [
+          t("span", Te, d(n.value), 1),
+          t("button", {
+            type: "button",
+            class: V(Y),
+            title: a(r)("media.studio.preview"),
+            onClick: g[0] || (g[0] = (u) => l("preview"))
+          }, [
+            k(C, {
+              name: "open_in_full",
+              size: "sm"
+            })
+          ], 8, Ce),
+          t("button", {
+            type: "button",
+            class: V(Y),
+            title: a(r)("media.studio.variant"),
+            onClick: g[1] || (g[1] = (u) => l("variant"))
+          }, [
+            k(C, {
+              name: "add_photo_alternate",
+              size: "sm"
+            })
+          ], 8, Fe),
+          t("button", {
+            type: "button",
+            class: V(Y),
+            title: a(r)("media.studio.discard"),
+            onClick: g[2] || (g[2] = (u) => l("discard"))
+          }, [
+            k(C, {
+              name: "delete",
+              size: "sm"
+            })
+          ], 8, Se),
+          k(F, {
+            label: e.item.saved ? a(r)("media.studio.saved") : a(r)("media.studio.save"),
+            variant: "primary",
+            size: "md",
+            disabled: e.item.saved,
+            onClick: g[3] || (g[3] = (u) => l("save"))
+          }, null, 8, ["label", "disabled"])
+        ])) : p.value ? (c(), y("div", Re, [
+          k(F, {
+            label: a(r)("media.studio.retry"),
+            variant: "tertiary",
+            size: "md",
+            onClick: g[4] || (g[4] = (u) => l("variant"))
+          }, null, 8, ["label"])
+        ])) : A("", !0)
+      ]);
+    };
+  }
+}), ze = { class: "flex flex-col gap-12" }, Ee = { class: "flex items-center gap-12" }, Pe = { class: "flex-1 min-w-0 flex flex-col gap-4" }, Ue = { class: "text-sm font-semibold line-clamp-2" }, Ae = { class: "text-xs text-fm-color-typo-secondary" }, De = {
+  key: 0,
+  class: "flex items-center gap-4 text-xs font-semibold"
+}, Me = { class: "grid gap-16 grid-cols-[repeat(auto-fill,minmax(min(240px,100%),1fr))]" }, Oe = /* @__PURE__ */ j({
+  __name: "StudioBatch",
+  props: {
+    batch: {}
+  },
+  emits: ["regenerate", "preview", "variant", "discard", "save"],
+  setup(e, { emit: f }) {
+    const s = e, l = f, { t: r } = N(), m = S(
+      () => s.batch.items.some((n) => n.status === "pending" || n.status === "processing")
+    ), p = S(
+      () => !!(s.batch.params.refAssetId || s.batch.params.refTmpToken)
+    ), w = S(() => {
+      const n = {
+        style: r(`media.studio.styles.${s.batch.params.style}`),
+        ratio: s.batch.params.ratio,
+        count: s.batch.items.length
+      };
+      return p.value ? r("media.studio.batchMetaRef", { ...n, strength: s.batch.params.refStrength ?? 55 }) : r("media.studio.batchMeta", n);
+    });
+    return (n, $) => {
+      const g = B("FmCircularProgress"), C = B("FmButton");
+      return c(), y("div", ze, [
+        t("div", Ee, [
+          t("div", Pe, [
+            t("span", Ue, d(e.batch.params.prompt), 1),
+            t("span", Ae, d(w.value), 1)
+          ]),
+          m.value ? (c(), y("span", De, [
+            k(g, { size: "md" }),
+            oe(" " + d(a(r)("media.studio.generating")), 1)
+          ])) : (c(), q(C, {
+            key: 1,
+            label: a(r)("media.studio.regenerate"),
+            variant: "tertiary",
+            size: "md",
+            "prepend-icon": "refresh",
+            onClick: $[0] || ($[0] = (T) => l("regenerate"))
+          }, null, 8, ["label"]))
+        ]),
+        t("div", Me, [
+          (c(!0), y(M, null, O(e.batch.items, (T) => (c(), q(Be, {
+            key: T.taskId,
+            item: T,
+            ratio: e.batch.params.ratio,
+            "from-ref": p.value,
+            onPreview: (F) => l("preview", T),
+            onVariant: $[1] || ($[1] = (F) => l("variant")),
+            onDiscard: (F) => l("discard", T),
+            onSave: (F) => l("save", T)
+          }, null, 8, ["item", "ratio", "from-ref", "onPreview", "onDiscard", "onSave"]))), 128))
+        ])
+      ]);
+    };
+  }
+}), Ve = [
+  "none",
+  "photo",
+  "flatlay",
+  "studio",
+  "warm",
+  "illus"
+], je = ["1x1", "4x3", "3x4", "16x9"], Ne = [1, 2, 4];
+function J(e) {
+  return `/media-v1/businesses/${e}/generations`;
+}
+async function Le(e, f) {
+  const { data: s } = await W().post(J(e), f);
+  return s;
+}
+async function Ge(e, f) {
+  const { data: s } = await W().get(
+    `${J(e)}/${f}`
+  );
+  return s;
+}
+async function qe(e, f) {
+  const { data: s } = await W().post(
+    `${J(e)}/ref-upload-intent`,
+    f
+  );
+  return s;
+}
+async function He(e, f) {
+  const s = await fetch(e.uploadUrl, {
+    method: e.method,
+    headers: { "Content-Type": f.type },
+    body: f
+  });
+  if (!s.ok)
+    throw new Error(`reference upload failed: ${s.status} ${await s.text()}`);
+}
+const Ke = { class: "w-[320px] max-h-screen overflow-auto flex flex-col gap-16 p-16 rounded-xl border border-fm-color-neutral-gray-200 bg-white sticky top-0 self-start" }, Ye = { class: "flex flex-col gap-8" }, We = { class: "flex items-baseline gap-8" }, Je = { class: "text-sm font-semibold" }, Qe = { class: "text-xs text-fm-color-typo-tertiary" }, Xe = { class: "grid grid-cols-2 gap-8" }, Ze = ["onClick"], et = { class: "flex items-center gap-8" }, tt = { class: "text-sm font-semibold" }, st = { class: "text-xs text-fm-color-typo-secondary" }, ot = { class: "flex flex-col gap-8" }, at = {
+  key: 0,
+  class: "flex items-center gap-8 px-8 py-8 rounded-lg bg-[#FFF7F0]"
+}, nt = { class: "text-xs" }, it = { class: "flex flex-col gap-8" }, lt = { class: "text-sm font-semibold" }, rt = { class: "flex flex-wrap gap-4" }, dt = { class: "flex flex-col gap-8" }, ct = { class: "text-sm font-semibold" }, ut = { class: "grid grid-cols-2 gap-8" }, mt = ["onClick"], ft = { class: "text-fm-color-typo-secondary" }, pt = { class: "flex flex-col gap-8" }, vt = { class: "text-sm font-semibold" }, xt = { class: "flex gap-8" }, gt = ["onClick"], yt = { class: "flex flex-col gap-8 sticky bottom-0 bg-white pt-12" }, bt = { class: "text-xs text-fm-color-typo-tertiary text-center" }, ht = "border-[--fm-color-brand-primary,#FF7823] bg-[#FFF7F0]", _t = "border-fm-color-neutral-gray-200 bg-white", $t = /* @__PURE__ */ j({
+  __name: "StudioControls",
+  props: /* @__PURE__ */ H({
+    busy: { type: Boolean },
+    hasRef: { type: Boolean }
+  }, {
+    prompt: { required: !0 },
+    promptModifiers: {},
+    style: { required: !0 },
+    styleModifiers: {},
+    ratio: { required: !0 },
+    ratioModifiers: {},
+    count: { required: !0 },
+    countModifiers: {}
+  }),
+  emits: /* @__PURE__ */ H(["generate"], ["update:prompt", "update:style", "update:ratio", "update:count"]),
+  setup(e, { emit: f }) {
+    const s = e, l = G(e, "prompt"), r = G(e, "style"), m = G(e, "ratio"), p = G(e, "count"), w = f, { t: n } = N(), $ = ["hero", "banner", "social", "menu"], g = {
+      hero: "restaurant",
+      banner: "campaign",
+      social: "photo_camera",
+      menu: "menu_book"
+    }, C = S(
+      () => $.map((o) => ({
+        key: o,
+        icon: g[o],
+        name: n(`media.studio.tpl.${o}.name`),
+        desc: n(`media.studio.tpl.${o}.desc`),
+        prompt: n(`media.studio.tpl.${o}.prompt`)
+      }))
+    ), T = S(
+      () => {
+        var o;
+        return (o = C.value.find((v) => v.prompt === l.value)) == null ? void 0 : o.key;
+      }
+    ), F = S(() => /\[[^\]]+\]/.test(l.value)), u = S(() => l.value.trim().length > 0 && !s.busy);
+    function i(o) {
+      return o ? ht : _t;
+    }
+    return (o, v) => {
+      const _ = B("FmIcon"), R = B("FmTextarea"), K = B("FmChip"), z = B("FmButton");
+      return c(), y("div", Ke, [
+        t("div", Ye, [
+          t("div", We, [
+            t("span", Je, d(a(n)("media.studio.templates")), 1),
+            t("span", Qe, d(a(n)("media.studio.templatesHint")), 1)
+          ]),
+          t("div", Xe, [
+            (c(!0), y(M, null, O(C.value, (b) => (c(), y("button", {
+              key: b.key,
+              type: "button",
+              class: V(["flex flex-col items-start gap-4 p-12 rounded-lg border text-left", i(T.value === b.key)]),
+              onClick: (L) => l.value = b.prompt
+            }, [
+              t("span", et, [
+                k(_, {
+                  name: b.icon,
+                  size: "sm"
+                }, null, 8, ["name"]),
+                t("span", tt, d(b.name), 1)
+              ]),
+              t("span", st, d(b.desc), 1)
+            ], 10, Ze))), 128))
+          ])
+        ]),
+        t("div", ot, [
+          k(R, {
+            modelValue: l.value,
+            "onUpdate:modelValue": v[0] || (v[0] = (b) => l.value = b),
+            label: a(n)("media.studio.prompt"),
+            placeholder: e.hasRef ? a(n)("media.studio.promptPlaceholderRef") : a(n)("media.studio.promptPlaceholder"),
+            "max-length": 500,
+            "show-word-count": ""
+          }, null, 8, ["modelValue", "label", "placeholder"]),
+          F.value ? (c(), y("div", at, [
+            k(_, {
+              name: "info",
+              size: "sm"
+            }),
+            t("span", nt, d(a(n)("media.studio.slotHint")), 1)
+          ])) : A("", !0)
+        ]),
+        ae(o.$slots, "default"),
+        t("div", it, [
+          t("span", lt, d(a(n)("media.studio.style")), 1),
+          t("div", rt, [
+            (c(!0), y(M, null, O(a(Ve), (b) => (c(), q(K, {
+              key: b,
+              label: a(n)(`media.studio.styles.${b}`),
+              selected: r.value === b,
+              selectable: "",
+              compact: "",
+              onClick: (L) => r.value = b
+            }, null, 8, ["label", "selected", "onClick"]))), 128))
+          ])
+        ]),
+        t("div", dt, [
+          t("span", ct, d(a(n)("media.studio.ratio")), 1),
+          t("div", ut, [
+            (c(!0), y(M, null, O(a(je), (b) => (c(), y("button", {
+              key: b,
+              type: "button",
+              class: V(["flex items-center justify-center gap-4 h-40 rounded-lg border text-xs font-semibold", i(m.value === b)]),
+              onClick: (L) => m.value = b
+            }, [
+              t("span", null, d(b), 1),
+              t("span", ft, d(a(n)(`media.studio.ratios.${b}`)), 1)
+            ], 10, mt))), 128))
+          ])
+        ]),
+        t("div", pt, [
+          t("span", vt, d(a(n)("media.studio.count")), 1),
+          t("div", xt, [
+            (c(!0), y(M, null, O(a(Ne), (b) => (c(), y("button", {
+              key: b,
+              type: "button",
+              class: V(["flex-1 h-40 rounded-lg border text-sm font-semibold", i(p.value === b)]),
+              onClick: (L) => p.value = b
+            }, " × " + d(b), 11, gt))), 128))
+          ])
+        ]),
+        t("div", yt, [
+          k(z, {
+            label: e.busy ? a(n)("media.studio.generateBusy") : a(n)("media.studio.generate"),
+            "prepend-icon": "auto_awesome",
+            variant: "primary",
+            size: "md",
+            disabled: !u.value,
+            onClick: v[1] || (v[1] = (b) => w("generate"))
+          }, null, 8, ["label", "disabled"]),
+          t("span", bt, d(a(n)("media.studio.disclaimer")), 1)
+        ])
+      ]);
+    };
+  }
+}), kt = {
+  key: 0,
+  class: "flex h-[560px]"
+}, It = { class: "flex-1 min-w-0 flex items-center justify-center bg-black p-16" }, wt = ["src", "alt"], Tt = { class: "w-[300px] flex-shrink-0 flex flex-col gap-12 p-16 overflow-y-auto" }, Ct = { class: "flex items-start justify-between gap-8" }, Ft = { class: "fm-typo-en-title-sm-600" }, St = ["title"], Rt = { class: "text-sm font-semibold break-words" }, Bt = { class: "text-xs text-fm-color-typo-secondary" }, zt = /* @__PURE__ */ j({
+  __name: "StudioPreviewDialog",
+  props: {
+    item: {},
+    prompt: {}
+  },
+  emits: ["close", "save", "variant"],
+  setup(e, { emit: f }) {
+    const s = e, l = f, { t: r } = N();
+    return (m, p) => {
+      const w = B("FmIcon"), n = B("FmButton"), $ = B("FmDialog");
+      return c(), q($, {
+        "model-value": !!s.item,
+        "max-width": 920,
+        "max-height": "560px",
+        "content-class": "!p-0 studio-preview-dialog-content",
+        "close-button": !1,
+        "onUpdate:modelValue": p[3] || (p[3] = (g) => !g && l("close"))
+      }, {
+        default: te(() => [
+          s.item ? (c(), y("div", kt, [
+            t("div", It, [
+              t("img", {
+                src: s.item.url,
+                class: "max-w-full max-h-full object-contain",
+                alt: s.prompt
+              }, null, 8, wt)
+            ]),
+            t("div", Tt, [
+              t("div", Ct, [
+                t("span", Ft, d(a(r)("media.studio.preview")), 1),
+                t("button", {
+                  type: "button",
+                  class: "w-32 h-32 rounded-lg bg-fm-color-neutral-gray-100 flex items-center justify-center flex-shrink-0",
+                  title: a(r)("media.library.cancelButton"),
+                  onClick: p[0] || (p[0] = (g) => l("close"))
+                }, [
+                  k(w, {
+                    name: "close",
+                    size: "sm"
+                  })
+                ], 8, St)
+              ]),
+              t("span", Rt, d(s.prompt), 1),
+              t("span", Bt, d(s.item.width) + "×" + d(s.item.height), 1),
+              p[4] || (p[4] = t("div", { class: "flex-1" }, null, -1)),
+              k(n, {
+                label: a(r)("media.studio.variant"),
+                variant: "tertiary",
+                size: "md",
+                onClick: p[1] || (p[1] = (g) => l("variant"))
+              }, null, 8, ["label"]),
+              k(n, {
+                label: s.item.saved ? a(r)("media.studio.saved") : a(r)("media.studio.save"),
+                variant: "primary",
+                size: "md",
+                disabled: s.item.saved,
+                onClick: p[2] || (p[2] = (g) => l("save"))
+              }, null, 8, ["label", "disabled"])
+            ])
+          ])) : A("", !0)
+        ]),
+        _: 1
+      }, 8, ["model-value"]);
+    };
+  }
+}), Et = { class: "flex flex-col gap-8" }, Pt = { class: "flex items-baseline gap-8" }, Ut = { class: "text-sm font-semibold" }, At = { class: "text-xs text-fm-color-typo-tertiary" }, Dt = {
+  key: 0,
+  class: "flex items-center gap-8 p-8 rounded-lg border border-fm-color-neutral-gray-200"
+}, Mt = ["src"], Ot = { class: "flex-1 text-xs truncate" }, Vt = { class: "flex gap-8" }, jt = { class: "text-xs text-fm-color-typo-tertiary" }, Nt = {
+  key: 2,
+  class: "text-xs text-[--fm-color-typo-critical,#FF3B30]"
+}, Lt = {
+  key: 3,
+  class: "flex flex-col gap-4"
+}, Gt = { class: "flex items-baseline gap-8" }, qt = { class: "text-xs font-semibold" }, Ht = { class: "text-xs font-semibold" }, Kt = { class: "text-xs text-fm-color-typo-secondary" }, Yt = /* @__PURE__ */ j({
+  __name: "StudioRefPicker",
+  props: /* @__PURE__ */ H({
+    businessId: {},
+    restaurantId: {}
+  }, {
+    strength: { required: !0 },
+    strengthModifiers: {}
+  }),
+  emits: /* @__PURE__ */ H(["change"], ["update:strength"]),
+  setup(e, { emit: f }) {
+    const s = e, l = G(e, "strength"), r = f, { t: m } = N(), p = E(!1), w = E(!1), n = E(""), $ = E(null), g = E(null), C = S(() => l.value <= 35 ? m("media.studio.refWeak") : l.value >= 70 ? m("media.studio.refStrong") : m("media.studio.refMid"));
+    function T(i) {
+      p.value = !1, n.value = "", $.value = { url: i.url, label: i.asset.fileName }, r("change", {
+        refAssetId: i.asset.id,
+        // null means the original was picked, and the request omits refRatio for that.
+        refRatio: i.ratio ?? void 0,
+        label: i.asset.fileName
+      });
+    }
+    async function F(i) {
+      var v;
+      const o = (v = i.target.files) == null ? void 0 : v[0];
+      if (o) {
+        w.value = !0, n.value = "";
+        try {
+          const _ = await qe(s.businessId, {
+            contentType: o.type,
+            fileSize: o.size
+          });
+          await He(_, o), $.value = { url: URL.createObjectURL(o), label: o.name }, r("change", { refTmpToken: _.token, label: o.name });
+        } catch (_) {
+          n.value = _ instanceof Error ? _.message : String(_), $.value = null, r("change", null);
+        } finally {
+          w.value = !1, g.value && (g.value.value = "");
+        }
+      }
+    }
+    function u() {
+      $.value = null, n.value = "", r("change", null);
+    }
+    return (i, o) => {
+      const v = B("FmButton");
+      return c(), y("div", Et, [
+        t("div", Pt, [
+          t("span", Ut, d(a(m)("media.studio.ref")), 1),
+          t("span", At, d(a(m)("media.studio.refHint")), 1)
+        ]),
+        $.value ? (c(), y("div", Dt, [
+          $.value.url ? (c(), y("img", {
+            key: 0,
+            src: $.value.url,
+            class: "w-48 h-48 rounded object-cover",
+            alt: ""
+          }, null, 8, Mt)) : A("", !0),
+          t("span", Ot, d($.value.label), 1),
+          k(v, {
+            label: a(m)("media.studio.refClear"),
+            variant: "tertiary",
+            size: "md",
+            onClick: u
+          }, null, 8, ["label"])
+        ])) : (c(), y(M, { key: 1 }, [
+          t("div", Vt, [
+            k(v, {
+              label: a(m)("media.studio.refPick"),
+              variant: "tertiary",
+              size: "md",
+              class: "flex-1",
+              onClick: o[0] || (o[0] = (_) => p.value = !0)
+            }, null, 8, ["label"]),
+            k(v, {
+              label: a(m)("media.studio.refUpload"),
+              variant: "tertiary",
+              size: "md",
+              class: "flex-1",
+              disabled: w.value,
+              onClick: o[1] || (o[1] = (_) => {
+                var R;
+                return (R = g.value) == null ? void 0 : R.click();
+              })
+            }, null, 8, ["label", "disabled"]),
+            t("input", {
+              ref_key: "fileInput",
+              ref: g,
+              type: "file",
+              accept: "image/jpeg,image/png,image/webp",
+              class: "hidden",
+              onChange: F
+            }, null, 544)
+          ]),
+          t("span", jt, d(a(m)("media.studio.refUploadHint")), 1)
+        ], 64)),
+        n.value ? (c(), y("span", Nt, d(n.value), 1)) : A("", !0),
+        $.value ? (c(), y("div", Lt, [
+          t("div", Gt, [
+            t("span", qt, d(a(m)("media.studio.refStrength")), 1),
+            o[4] || (o[4] = t("span", { class: "flex-1" }, null, -1)),
+            t("span", Ht, d(l.value) + "%", 1)
+          ]),
+          ne(t("input", {
+            "onUpdate:modelValue": o[2] || (o[2] = (_) => l.value = _),
+            type: "range",
+            min: "10",
+            max: "90",
+            step: "5",
+            class: "w-full cursor-pointer accent-[--fm-color-brand-primary,#FF7823]"
+          }, null, 512), [
+            [
+              ie,
+              l.value,
+              void 0,
+              { number: !0 }
+            ]
+          ]),
+          t("span", Kt, d(C.value), 1)
+        ])) : A("", !0),
+        k(a(fe), {
+          open: p.value,
+          "onUpdate:open": o[3] || (o[3] = (_) => p.value = _),
+          "business-id": e.businessId,
+          "restaurant-id": e.restaurantId,
+          "allow-upload": !1,
+          onSelect: T
+        }, null, 8, ["open", "business-id", "restaurant-id"])
+      ]);
+    };
+  }
+}), Wt = "ai", Jt = "ai-generated";
+function Qt(e) {
+  return e === "success" || e === "failed";
+}
+function Z(e) {
+  return e.some((f) => !Qt(f.status));
+}
+function Xt(e, f) {
+  return e.map((s) => {
+    const l = f.find((r) => r.taskId === s.taskId);
+    return l ? { ...s, ...l, saved: s.saved } : s;
+  });
+}
+function Zt(e) {
+  const f = !!(e.refAssetId || e.refTmpToken);
+  return {
+    prompt: e.prompt.trim(),
+    style: e.style,
+    ratio: e.ratio,
+    count: e.count,
+    refAssetId: e.refAssetId,
+    refRatio: e.refRatio,
+    refTmpToken: e.refTmpToken,
+    refStrength: f ? e.refStrength : void 0,
+    restaurantId: e.restaurantId
+  };
+}
+const es = 3e3, ts = re("mediaGeneration", () => {
+  const e = E([]), f = S(() => e.value.some((u) => Z(u.items)));
+  let s, l = "";
+  function r(u, i) {
+    const o = e.value.find((v) => v.batchId === u);
+    o && (o.items = Xt(o.items, i));
+  }
+  function m() {
+    s !== void 0 || !l || (s = setTimeout(async () => {
+      s = void 0;
+      const u = e.value.filter((i) => Z(i.items));
+      for (const i of u)
+        try {
+          const o = await Ge(l, i.batchId);
+          r(i.batchId, o.items);
+        } catch {
+        }
+      f.value && m();
+    }, es));
+  }
+  async function p(u, i) {
+    l = u;
+    const o = await Le(u, Zt(i));
+    e.value.unshift({
+      batchId: o.batchId,
+      params: i,
+      items: o.items.map((v) => ({
+        taskId: v.taskId,
+        assetId: v.assetId,
+        imageId: v.imageId,
+        status: v.status,
+        attempts: 0,
+        error: v.error,
+        saved: !1
+      }))
+    }), m();
+  }
+  async function w(u, i) {
+    await p(u, i);
+  }
+  async function n(u, i) {
+    await p(u, { ...i.params });
+  }
+  async function $(u, i) {
+    await p(u, { ...i.params, count: 1 });
+  }
+  async function g(u, i, o) {
+    var _;
+    await pe(u, o.assetId, [Jt]);
+    const v = (_ = e.value.find((R) => R.batchId === i.batchId)) == null ? void 0 : _.items.find((R) => R.taskId === o.taskId);
+    v && (v.saved = !0);
+  }
+  async function C(u, i, o) {
+    await ve(u, [
+      {
+        refType: Wt,
+        refId: i.batchId,
+        imageId: o.imageId,
+        aspectRatios: null
+      }
+    ]);
+    const v = e.value.find((_) => _.batchId === i.batchId);
+    v && (v.items = v.items.filter((_) => _.taskId !== o.taskId), v.items.length === 0 && (e.value = e.value.filter((_) => _.batchId !== i.batchId)));
+  }
+  function T(u) {
+    l = u, f.value && m();
+  }
+  function F() {
+    s !== void 0 && clearTimeout(s), s = void 0, e.value = [];
+  }
+  return { batches: e, busy: f, compose: w, regenerate: n, variantOf: $, save: g, discard: C, resume: T, reset: F };
+}), ss = { class: "flex items-start gap-24 p-24" }, os = { class: "flex-1 min-w-0 flex flex-col gap-24" }, as = {
+  key: 0,
+  class: "min-h-[340px] flex flex-col items-center justify-center gap-12 border-2 border-dashed border-fm-color-neutral-gray-300 rounded-2xl"
+}, ns = { class: "text-lg font-semibold" }, is = { class: "text-sm text-fm-color-typo-secondary" }, ms = /* @__PURE__ */ j({
+  __name: "AiStudio",
+  setup(e) {
+    const f = ce(), { t: s } = N(), l = ue(), r = me(), m = S(() => {
+      var h;
+      return ((h = f.currentBusiness.value) == null ? void 0 : h.id) ?? "";
+    }), p = S(() => {
+      var h;
+      return (h = f.currentRestaurant.value) == null ? void 0 : h._id;
+    }), w = ts(), { batches: n, busy: $ } = de(w);
+    le(() => w.resume(m.value));
+    const g = E(""), C = E("photo"), T = E("1x1"), F = E(2), u = E(55), i = E(null), o = S(() => !!i.value);
+    function v() {
+      var h, x, P, U;
+      return {
+        prompt: g.value,
+        style: C.value,
+        ratio: T.value,
+        count: F.value,
+        refAssetId: (h = i.value) == null ? void 0 : h.refAssetId,
+        refRatio: (x = i.value) == null ? void 0 : x.refRatio,
+        refTmpToken: (P = i.value) == null ? void 0 : P.refTmpToken,
+        refStrength: i.value ? u.value : void 0,
+        refLabel: (U = i.value) == null ? void 0 : U.label,
+        restaurantId: p.value
+      };
+    }
+    function _(h) {
+      var P, U;
+      return ((U = (P = h == null ? void 0 : h.response) == null ? void 0 : P.data) == null ? void 0 : U.message) ?? (h instanceof Error ? h.message : String(h));
+    }
+    function R(h) {
+      r.open({ type: "error", title: _(h) });
+    }
+    async function K() {
+      try {
+        await w.compose(m.value, v());
+      } catch (h) {
+        R(h);
+      }
+    }
+    const z = E(null);
+    async function b(h, x) {
+      try {
+        await w.save(m.value, h, x), r.open({ type: "success", title: s("media.studio.savedToast") });
+      } catch (P) {
+        R(P);
+      }
+    }
+    function L(h, x) {
+      l.open({
+        title: s("media.studio.discardTitle"),
+        message: s("media.studio.discardMessage"),
+        primaryActions: { text: s("media.studio.discard"), close: !1, variant: "destructive" },
+        secondaryActions: { text: s("media.library.cancelButton"), close: !0 }
+      }).onPrimary(async () => {
+        var P;
+        try {
+          await w.discard(m.value, h, x), ((P = z.value) == null ? void 0 : P.item.taskId) === x.taskId && (z.value = null), r.open({ type: "success", title: s("media.studio.discardedToast") });
+        } catch (U) {
+          R(U);
+        }
+        l.close();
+      });
+    }
+    async function Q(h) {
+      try {
+        await w.variantOf(m.value, h);
+      } catch (x) {
+        R(x);
+      }
+    }
+    async function se(h) {
+      try {
+        await w.regenerate(m.value, h);
+      } catch (x) {
+        R(x);
+      }
+    }
+    return (h, x) => {
+      var U, X;
+      const P = B("FmIcon");
+      return c(), y("div", ss, [
+        k($t, {
+          prompt: g.value,
+          "onUpdate:prompt": x[2] || (x[2] = (I) => g.value = I),
+          style: ee(C.value),
+          "onUpdate:style": x[3] || (x[3] = (I) => C.value = I),
+          ratio: T.value,
+          "onUpdate:ratio": x[4] || (x[4] = (I) => T.value = I),
+          count: F.value,
+          "onUpdate:count": x[5] || (x[5] = (I) => F.value = I),
+          class: "flex-shrink-0",
+          busy: a($),
+          "has-ref": o.value,
+          onGenerate: K
+        }, {
+          default: te(() => [
+            k(Yt, {
+              strength: u.value,
+              "onUpdate:strength": x[0] || (x[0] = (I) => u.value = I),
+              "business-id": m.value,
+              "restaurant-id": p.value,
+              onChange: x[1] || (x[1] = (I) => i.value = I)
+            }, null, 8, ["strength", "business-id", "restaurant-id"])
+          ]),
+          _: 1
+        }, 8, ["prompt", "style", "ratio", "count", "busy", "has-ref"]),
+        t("div", os, [
+          a(n).length === 0 ? (c(), y("div", as, [
+            k(P, {
+              name: "auto_awesome",
+              size: "xl"
+            }),
+            t("span", ns, d(a(s)("media.studio.emptyTitle")), 1),
+            t("span", is, d(a(s)("media.studio.emptyHint")), 1)
+          ])) : A("", !0),
+          (c(!0), y(M, null, O(a(n), (I) => (c(), q(Oe, {
+            key: I.batchId,
+            batch: I,
+            onRegenerate: (D) => se(I),
+            onVariant: (D) => Q(I),
+            onPreview: (D) => z.value = { batch: I, item: D },
+            onDiscard: (D) => L(I, D),
+            onSave: (D) => b(I, D)
+          }, null, 8, ["batch", "onRegenerate", "onVariant", "onPreview", "onDiscard", "onSave"]))), 128))
+        ]),
+        k(zt, {
+          item: ((U = z.value) == null ? void 0 : U.item) ?? null,
+          prompt: ((X = z.value) == null ? void 0 : X.batch.params.prompt) ?? "",
+          onClose: x[6] || (x[6] = (I) => z.value = null),
+          onSave: x[7] || (x[7] = (I) => z.value && b(z.value.batch, z.value.item)),
+          onVariant: x[8] || (x[8] = (I) => z.value && Q(z.value.batch))
+        }, null, 8, ["item", "prompt"])
+      ]);
+    };
+  }
+});
+export {
+  ms as default
+};