@feedmepos/mf-miniprogram-v2 0.2.0-dev.3 → 0.2.1-dev.2

package/dist/ModuleCenterView-D3PNaPqU.js

@@ -0,0 +1,151 @@
+import { defineComponent as T, openBlock as e, createElementBlock as s, createElementVNode as o, toDisplayString as i, createCommentVNode as g, ref as M, computed as y, onMounted as I, resolveComponent as h, createVNode as m, unref as u, Fragment as v, renderList as b, normalizeClass as A, createBlock as p, withCtx as R } from "vue";
+import { useRouter as z } from "vue-router";
+import { u as D, c as G, f as q, _ as f, t as K } from "./ModuleEmptyState.vue_vue_type_script_setup_true_lang-Dhv_xE17.js";
+import { _ as O } from "./AppTabs.vue_vue_type_script_setup_true_lang-DP7BBWtM.js";
+import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const P = { class: "card" }, U = { class: "card__head" }, j = { class: "card__name fm-typo-en-body-md-600 text-fm-color-typo-primary" }, H = { class: "card__version fm-typo-en-body-sm-400 text-fm-color-typo-tertiary" }, J = { class: "card__description fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, Q = { class: "card__tags" }, W = { class: "card__tag card__tag--tier fm-typo-en-body-sm-600" }, X = {
+  key: 0,
+  class: "card__tag card__tag--slot fm-typo-en-body-sm-400"
+}, Y = /* @__PURE__ */ T({
+  __name: "ModuleCard",
+  props: {
+    entry: {}
+  },
+  setup(l) {
+    return (n, c) => (e(), s("article", P, [
+      o("header", U, [
+        o("h3", j, i(l.entry.name), 1),
+        o("span", H, i(l.entry.version), 1)
+      ]),
+      o("p", J, i(l.entry.description || l.entry.id), 1),
+      o("footer", Q, [
+        o("span", W, i(l.entry.category), 1),
+        l.entry.slot ? (e(), s("span", X, i(l.entry.slot), 1)) : g("", !0)
+      ])
+    ]));
+  }
+}), Z = /* @__PURE__ */ w(Y, [["__scopeId", "data-v-653174c0"]]), ee = { class: "shell" }, te = { class: "centre" }, oe = { class: "centre__inner" }, se = { class: "centre__head" }, ne = {
+  key: 0,
+  class: "centre__filters"
+}, ae = { class: "centre__facet-label fm-typo-en-body-sm-600 text-fm-color-typo-tertiary" }, le = { class: "centre__chips" }, re = ["aria-pressed", "onClick"], ie = {
+  key: 1,
+  class: "centre__note fm-typo-en-body-md-400"
+}, ce = {
+  key: 6,
+  class: "centre__grid"
+}, de = /* @__PURE__ */ T({
+  __name: "ModuleCenterView",
+  setup(l) {
+    z();
+    const n = D(), c = M(""), d = M([]), F = y(() => G(n.entries.value ?? [])), k = y(() => q(n.entries.value ?? [], c.value, d.value)), V = y(() => c.value.trim().length > 0 || d.value.length > 0), C = y(() => {
+      var r;
+      return (((r = n.entries.value) == null ? void 0 : r.length) ?? 0) > 0;
+    }), N = {
+      tier: "Type",
+      slot: "Slot",
+      label: "Tag"
+    };
+    function $(r) {
+      return d.value.some((a) => a.kind === r.kind && a.value === r.value);
+    }
+    function B(r) {
+      d.value = K(d.value, r);
+    }
+    function x() {
+      c.value = "", d.value = [];
+    }
+    return I(() => n.load()), (r, a) => {
+      const L = h("FmButton"), E = h("FmTextField"), S = h("RouterLink");
+      return e(), s("div", ee, [
+        m(O, { active: "modules" }),
+        o("div", te, [
+          o("div", oe, [
+            o("header", se, [
+              a[3] || (a[3] = o("div", null, [
+                o("h2", { class: "centre__title fm-typo-en-title-sm-600 text-fm-color-typo-primary" }, "Module library"),
+                o("p", { class: "centre__subtitle fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " Modules the agent can put on a page. Published from the platform, not from your app. ")
+              ], -1)),
+              m(L, {
+                size: "md",
+                variant: "tertiary",
+                icon: "refresh",
+                onClick: a[0] || (a[0] = (t) => u(n).load(!0))
+              })
+            ]),
+            C.value ? (e(), s("div", ne, [
+              m(E, {
+                modelValue: c.value,
+                "onUpdate:modelValue": a[1] || (a[1] = (t) => c.value = t),
+                label: "Search",
+                placeholder: "name, slot, or label"
+              }, null, 8, ["modelValue"]),
+              (e(!0), s(v, null, b(F.value, (t) => (e(), s("div", {
+                key: t.kind,
+                class: "centre__facet"
+              }, [
+                o("span", ae, i(N[t.kind]), 1),
+                o("div", le, [
+                  (e(!0), s(v, null, b(t.values, (_) => (e(), s("button", {
+                    key: _,
+                    type: "button",
+                    class: A(["centre__chip fm-typo-en-body-sm-400", { "centre__chip--on": $({ kind: t.kind, value: _ }) }]),
+                    "aria-pressed": $({ kind: t.kind, value: _ }),
+                    onClick: (ue) => B({ kind: t.kind, value: _ })
+                  }, i(_), 11, re))), 128))
+                ])
+              ]))), 128)),
+              V.value ? (e(), s("button", {
+                key: 0,
+                type: "button",
+                class: "centre__clear fm-typo-en-body-sm-600",
+                onClick: x
+              }, " Clear filters ")) : g("", !0)
+            ])) : g("", !0),
+            u(n).entries.value === null ? (e(), s("p", ie, "Loading…")) : u(n).loadError.value ? (e(), p(f, {
+              key: 2,
+              icon: "error_outline",
+              tone: "error",
+              title: "Could not load the module library",
+              message: u(n).loadError.value,
+              "action-label": "Try again",
+              onAction: a[2] || (a[2] = (t) => u(n).load(!0))
+            }, null, 8, ["message"])) : u(n).unpublished.value ? (e(), p(f, {
+              key: 3,
+              icon: "widgets",
+              title: "No module library has been published yet",
+              message: "Modules are published from the platform, separately from merging them. Once one is published it appears here, and every workspace started afterwards receives it."
+            })) : C.value ? k.value.length ? (e(), s("ul", ce, [
+              (e(!0), s(v, null, b(k.value, (t) => (e(), s("li", {
+                key: t.id
+              }, [
+                m(S, {
+                  class: "centre__link",
+                  to: { name: "miniprogram-v2-module-detail", params: { name: t.name } }
+                }, {
+                  default: R(() => [
+                    m(Z, { entry: t }, null, 8, ["entry"])
+                  ]),
+                  _: 2
+                }, 1032, ["to"])
+              ]))), 128))
+            ])) : (e(), p(f, {
+              key: 5,
+              icon: "search_off",
+              title: "No module matches these filters",
+              "action-label": "Clear filters",
+              onAction: x
+            })) : (e(), p(f, {
+              key: 4,
+              icon: "widgets",
+              title: "The module library is empty",
+              message: "It has been published, but holds no modules. Nothing here is available to put on a page yet."
+            }))
+          ])
+        ])
+      ]);
+    };
+  }
+}), he = /* @__PURE__ */ w(de, [["__scopeId", "data-v-90fb25ab"]]);
+export {
+  he as default
+};

package/dist/ModuleDetailView-DCXsI6HI.js

@@ -0,0 +1,191 @@
+import { defineComponent as C, ref as M, computed as u, watch as T, resolveComponent as k, openBlock as n, createElementBlock as l, createElementVNode as e, toDisplayString as i, createCommentVNode as _, Fragment as I, renderList as S, createVNode as f, onMounted as B, withCtx as L, unref as d, createBlock as v } from "vue";
+import { useRoute as N, useRouter as P } from "vue-router";
+import { m as A, i as F, u as V, _ as g } from "./ModuleEmptyState.vue_vue_type_script_setup_true_lang-Dhv_xE17.js";
+import { _ as R } from "./AppTabs.vue_vue_type_script_setup_true_lang-DP7BBWtM.js";
+import { useDialog as j } from "@feedmepos/ui-library";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const z = { class: "detail" }, q = { class: "detail__head" }, K = { class: "detail__name fm-typo-en-title-sm-600 text-fm-color-typo-primary" }, O = { class: "detail__version fm-typo-en-body-md-400 text-fm-color-typo-tertiary" }, Y = {
+  key: 0,
+  class: "detail__description fm-typo-en-body-md-400 text-fm-color-typo-secondary"
+}, G = { class: "detail__columns" }, H = { class: "detail__preview" }, J = {
+  key: 0,
+  class: "detail__note detail__note--error fm-typo-en-body-md-400"
+}, Q = {
+  key: 1,
+  class: "detail__note fm-typo-en-body-md-400"
+}, U = ["srcdoc"], W = { class: "detail__facts" }, X = { class: "detail__section" }, Z = { class: "detail__list fm-typo-en-body-md-400" }, ee = { key: 0 }, te = { key: 1 }, oe = { class: "detail__section" }, ne = {
+  key: 0,
+  class: "detail__note fm-typo-en-body-md-400"
+}, se = {
+  key: 1,
+  class: "detail__props"
+}, le = {
+  key: 0,
+  class: "detail__optional fm-typo-en-body-sm-400"
+}, ae = { class: "detail__section" }, ie = ["value"], re = /* @__PURE__ */ C({
+  __name: "ModuleDetail",
+  props: {
+    entry: {},
+    previewDocument: {},
+    previewError: {}
+  },
+  setup(o) {
+    const r = o, b = j(), s = M(!1);
+    let c;
+    const m = u(() => A(r.entry)), y = u(
+      () => r.previewDocument ? F(r.previewDocument, r.entry.name) : null
+    );
+    T(
+      () => r.entry.name,
+      () => {
+        s.value = !1;
+      }
+    );
+    async function x() {
+      try {
+        await navigator.clipboard.writeText(m.value), s.value = !0, window.clearTimeout(c), c = window.setTimeout(() => {
+          s.value = !1;
+        }, 2e3);
+      } catch (a) {
+        b.open({
+          title: "Could not copy",
+          message: `${a instanceof Error ? a.message : String(a)}. Select the text below and copy it manually.`,
+          dismissAway: !0,
+          primaryActions: { close: !0, text: "OK" }
+        });
+      }
+    }
+    return (a, t) => {
+      var p, D, $;
+      const h = k("FmButton");
+      return n(), l("div", z, [
+        e("header", q, [
+          e("h3", K, i(o.entry.name), 1),
+          e("span", O, i(o.entry.version), 1),
+          o.entry.description ? (n(), l("p", Y, i(o.entry.description), 1)) : _("", !0)
+        ]),
+        e("div", G, [
+          e("section", H, [
+            t[0] || (t[0] = e("h4", { class: "detail__label fm-typo-en-body-sm-600 text-fm-color-typo-tertiary" }, "Preview", -1)),
+            o.previewError ? (n(), l("p", J, i(o.previewError), 1)) : y.value ? (n(), l("iframe", {
+              key: o.entry.name,
+              class: "detail__frame",
+              title: "module preview",
+              sandbox: "allow-scripts",
+              srcdoc: y.value
+            }, null, 8, U)) : (n(), l("p", Q, "Loading preview…")),
+            t[1] || (t[1] = e("p", { class: "detail__hint fm-typo-en-body-sm-400 text-fm-color-typo-tertiary" }, " Stand-in brand colours. Your business's own palette applies in the workspace preview. ", -1))
+          ]),
+          e("div", W, [
+            e("section", X, [
+              t[6] || (t[6] = e("h4", { class: "detail__label fm-typo-en-body-sm-600 text-fm-color-typo-tertiary" }, "Details", -1)),
+              e("dl", Z, [
+                t[2] || (t[2] = e("dt", null, "Id", -1)),
+                e("dd", null, i(o.entry.id), 1),
+                t[3] || (t[3] = e("dt", null, "Slot", -1)),
+                e("dd", null, i(o.entry.slot ?? "—"), 1),
+                t[4] || (t[4] = e("dt", null, "Data shape", -1)),
+                e("dd", null, i(o.entry.dataShape ?? "—"), 1),
+                t[5] || (t[5] = e("dt", null, "Type", -1)),
+                e("dd", null, i(o.entry.category), 1),
+                (p = o.entry.labels) != null && p.length ? (n(), l("dt", ee, "Labels")) : _("", !0),
+                (D = o.entry.labels) != null && D.length ? (n(), l("dd", te, i(o.entry.labels.join(", ")), 1)) : _("", !0)
+              ])
+            ]),
+            e("section", oe, [
+              t[7] || (t[7] = e("h4", { class: "detail__label fm-typo-en-body-sm-600 text-fm-color-typo-tertiary" }, "Props", -1)),
+              ($ = o.entry.props) != null && $.length ? (n(), l("ul", se, [
+                (n(!0), l(I, null, S(o.entry.props, (w) => (n(), l("li", {
+                  key: w.name
+                }, [
+                  e("code", null, i(w.name), 1),
+                  w.required ? _("", !0) : (n(), l("span", le, "optional"))
+                ]))), 128))
+              ])) : (n(), l("p", ne, " This module declares no props interface, so it can only be offered as a like-for-like swap. "))
+            ]),
+            e("section", ae, [
+              t[8] || (t[8] = e("h4", { class: "detail__label fm-typo-en-body-sm-600 text-fm-color-typo-tertiary" }, "Ask the agent for it", -1)),
+              t[9] || (t[9] = e("p", { class: "detail__hint fm-typo-en-body-sm-400 text-fm-color-typo-tertiary" }, " Paste this into a workspace chat. The agent copies the module into your app's own code. ", -1)),
+              e("textarea", {
+                class: "detail__prompt",
+                readonly: "",
+                value: m.value
+              }, null, 8, ie),
+              f(h, {
+                class: "detail__copy",
+                size: "md",
+                variant: s.value ? "secondary" : "primary",
+                icon: s.value ? "check" : "content_copy",
+                label: s.value ? "Copied" : "Copy prompt",
+                onClick: x
+              }, null, 8, ["variant", "icon", "label"])
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+}), de = /* @__PURE__ */ E(re, [["__scopeId", "data-v-ad739f79"]]), ce = { class: "shell" }, me = { class: "page" }, ue = { class: "page__inner" }, ye = { class: "page__head" }, pe = {
+  key: 0,
+  class: "page__note fm-typo-en-body-md-400"
+}, _e = /* @__PURE__ */ C({
+  __name: "ModuleDetailView",
+  setup(o) {
+    const r = N(), b = P(), s = V(), c = u(() => String(r.params.name ?? "")), m = u(() => s.find(c.value)), y = u(() => s.entries.value === null);
+    return B(() => s.load()), (x, a) => {
+      const t = k("FmIcon"), h = k("RouterLink");
+      return n(), l("div", ce, [
+        f(R, { active: "modules" }),
+        e("div", me, [
+          e("div", ue, [
+            e("header", ye, [
+              f(h, {
+                class: "page__back",
+                to: { name: "miniprogram-v2-module-center" }
+              }, {
+                default: L(() => [
+                  f(t, {
+                    name: "arrow_back",
+                    size: "sm",
+                    color: "typo-secondary"
+                  }),
+                  a[2] || (a[2] = e("span", { class: "fm-typo-en-body-sm-600" }, "Module library", -1))
+                ]),
+                _: 1
+              })
+            ]),
+            y.value ? (n(), l("p", pe, "Loading…")) : d(s).loadError.value ? (n(), v(g, {
+              key: 1,
+              icon: "error_outline",
+              tone: "error",
+              title: "Could not load the module library",
+              message: d(s).loadError.value,
+              "action-label": "Try again",
+              onAction: a[0] || (a[0] = (p) => d(s).load(!0))
+            }, null, 8, ["message"])) : d(s).unpublished.value ? (n(), v(g, {
+              key: 2,
+              icon: "widgets",
+              title: "No module library has been published yet",
+              message: "Nothing has been published for this page to show."
+            })) : m.value ? (n(), v(de, {
+              key: 4,
+              entry: m.value,
+              "preview-document": d(s).previewDocument.value,
+              "preview-error": d(s).previewError.value
+            }, null, 8, ["entry", "preview-document", "preview-error"])) : (n(), v(g, {
+              key: 3,
+              icon: "search_off",
+              title: `No module named “${c.value}”`,
+              message: "It is not in the published library. It may have been renamed, withdrawn, or never published.",
+              "action-label": "Back to the library",
+              onAction: a[1] || (a[1] = (p) => d(b).push({ name: "miniprogram-v2-module-center" }))
+            }, null, 8, ["title"]))
+          ])
+        ])
+      ]);
+    };
+  }
+}), ke = /* @__PURE__ */ E(_e, [["__scopeId", "data-v-3450e7c8"]]);
+export {
+  ke as default
+};

package/dist/ModuleEmptyState.vue_vue_type_script_setup_true_lang-Dhv_xE17.js

@@ -0,0 +1,124 @@
+import { shallowReadonly as r, ref as s, defineComponent as x, resolveComponent as p, openBlock as u, createElementBlock as h, createVNode as E, createElementVNode as P, normalizeClass as F, toDisplayString as v, createCommentVNode as g, createBlock as L } from "vue";
+import { h as M, g as w, e as y, p as $ } from "./AppTabs.vue_vue_type_script_setup_true_lang-DP7BBWtM.js";
+const b = ["tier", "slot", "label"];
+function C(e, t) {
+  return t === "tier" ? [e.category] : t === "slot" ? e.slot ? [e.slot] : [] : e.labels ?? [];
+}
+function V(e) {
+  return b.map((t) => ({
+    kind: t,
+    values: [...new Set(e.flatMap((o) => C(o, t)))].sort((o, n) => o.localeCompare(n))
+  })).filter((t) => t.values.length > 0);
+}
+function j(e, t) {
+  const o = e.filter((n) => !(n.kind === t.kind && n.value === t.value));
+  return o.length === e.length ? [...e, t] : o;
+}
+function I(e, t) {
+  return b.every((o) => {
+    const n = t.filter((c) => c.kind === o);
+    if (!n.length) return !0;
+    const l = C(e, o);
+    return n.some((c) => l.includes(c.value));
+  });
+}
+function z(e, t, o = []) {
+  const n = t.trim().toLowerCase();
+  return e.filter((l) => I(l, o) ? n ? [l.name, l.description ?? "", l.slot ?? "", ...l.labels ?? []].join(" ").toLowerCase().includes(n) : !0 : !1);
+}
+function R(e) {
+  const t = e.slot ? ` It is published to fill the ${e.slot} slot.` : "";
+  return `Use the block-swap skill. Put the library module ${e.id} on the page, replacing whatever currently fills its slot.${t} Its source is already in this workspace at src/components/library/${e.name}/. Copy that directory to src/components/blocks/${e.name}/ and point the view there — the library directory is delivered per workspace and is not committed, so a view importing from it builds in the workspace and fails the release build. Tell me which page you changed.`;
+}
+function G(e, t) {
+  if (!e.includes("</head>")) return e;
+  const o = JSON.stringify(t).replace(/</g, "\\u003c");
+  return e.replace("</head>", `<script>window.__FM_PREVIEW_MODULE__=${o}<\/script></head>`);
+}
+const i = s(null), m = s(null), d = s(!1), k = s(null), f = s(null);
+let a = null;
+async function T() {
+  m.value = null, d.value = !1;
+  try {
+    const e = await M(w.componentLibraryCatalog());
+    i.value = e.components ?? [];
+  } catch (e) {
+    const t = y(e);
+    i.value = [], t.includes("no component library has been published") ? d.value = !0 : m.value = t || "Could not load the module library.";
+  }
+}
+async function B() {
+  f.value = null;
+  try {
+    k.value = await $(w.componentLibraryPreview());
+  } catch (e) {
+    f.value = y(e) || "Could not load the preview document.";
+  }
+}
+function O() {
+  function e(o = !1) {
+    return !o && (i.value !== null || a) ? a ?? Promise.resolve() : (a = Promise.all([T(), B()]).then(() => {
+    }).finally(() => {
+      a = null;
+    }), a);
+  }
+  function t(o) {
+    var n;
+    return ((n = i.value) == null ? void 0 : n.find((l) => l.name === o)) ?? null;
+  }
+  return {
+    entries: r(i),
+    loadError: r(m),
+    unpublished: r(d),
+    previewDocument: r(k),
+    previewError: r(f),
+    load: e,
+    find: t
+  };
+}
+const D = { class: "flex min-h-0 flex-1 flex-col items-center justify-center gap-8 p-24 text-center" }, N = {
+  key: 0,
+  class: "m-0 max-w-[46ch] fm-typo-en-body-sm-400 text-fm-color-typo-tertiary"
+}, U = /* @__PURE__ */ x({
+  __name: "ModuleEmptyState",
+  props: {
+    icon: {},
+    title: {},
+    message: {},
+    actionLabel: {},
+    tone: {}
+  },
+  emits: ["action"],
+  setup(e) {
+    return (t, o) => {
+      const n = p("FmIcon"), l = p("FmButton");
+      return u(), h("div", D, [
+        E(n, {
+          name: e.icon,
+          size: "xl",
+          color: e.tone === "error" ? "typo-warning" : "neutral-gray-300"
+        }, null, 8, ["name", "color"]),
+        P("p", {
+          class: F(["m-0 fm-typo-en-body-md-600", e.tone === "error" ? "text-fm-color-typo-warning" : "text-fm-color-typo-secondary"])
+        }, v(e.title), 3),
+        e.message ? (u(), h("p", N, v(e.message), 1)) : g("", !0),
+        e.actionLabel ? (u(), L(l, {
+          key: 1,
+          size: "md",
+          variant: "secondary",
+          label: e.actionLabel,
+          onClick: o[0] || (o[0] = (c) => t.$emit("action"))
+        }, null, 8, ["label"])) : g("", !0)
+      ]);
+    };
+  }
+});
+export {
+  U as _,
+  V as c,
+  z as f,
+  G as i,
+  R as m,
+  j as t,
+  O as u
+};

package/dist/app.js

@@ -3,16 +3,30 @@ const n = [
   {
     path: "/",
     name: "miniprogram-v2-control",
-    component: () => import("./ControlPlaneView-BIHhP7C_.js")
+    component: () => import("./ControlPlaneView-B61eRNvP.js")
+  },
+  {
+    // The shared component library, not this merchant's workspace — which is
+    // why it sits beside the control view rather than inside it.
+    path: "/modules",
+    name: "miniprogram-v2-module-center",
+    component: () => import("./ModuleCenterView-D3PNaPqU.js")
+  },
+  {
+    // Keyed by the module's directory name, which is what the catalog, the
+    // delivered library directory and the block-swap skill all already use.
+    path: "/modules/:name",
+    name: "miniprogram-v2-module-detail",
+    component: () => import("./ModuleDetailView-DCXsI6HI.js")
   },
   {
     path: "/:pathMatch(.*)*",
     redirect: { name: "miniprogram-v2-control" }
   }
-], r = {}, p = o(() => import("./App-CaNGbhK8.js")), m = o(() => import("./ControlPlaneView-BIHhP7C_.js"));
+], t = {}, e = o(() => import("./App-CaNGbhK8.js")), r = o(() => import("./ControlPlaneView-B61eRNvP.js"));
 export {
-  p as FmApp,
-  m as MiniprogramWorkspace,
-  r as i18nMessages,
+  e as FmApp,
+  r as MiniprogramWorkspace,
+  t as i18nMessages,
   n as routes
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedmepos/mf-miniprogram-v2",
-  "version": "0.2.0-dev.3",
+  "version": "0.2.1-dev.2",
   "type": "module",
   "publishConfig": {
     "access": "public",