npm - @trifle/trifle-hub - Versions diffs - 1.0.163 → 1.1.1 - Mend

@trifle/trifle-hub 1.0.163 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/README.md CHANGED Viewed

@@ -69,6 +69,89 @@ Add the TrifleHub component to your app layout:
 </script>
 ```
+## Styles
+CSS is automatically injected when the plugin is registered — no separate stylesheet import is required.
+Since v1.1.0, all compiled styles ship inside `@layer trifle-hub`. This keeps trifle-hub's styles from polluting the global cascade and lets you control where they sit relative to your own CSS.
+trifle-hub ships its own element reset (preflight) inside `@layer trifle-hub.base`. If your app has no preflight of its own, trifle-hub provides the baseline for buttons, inputs, etc.
+### Layer order
+For trifle-hub's utility classes (e.g. `_bg-metallic-linear`, `_shadow-panel`) to correctly override element resets on tags like `<button>`, `trifle-hub` must be declared **after** `base` in the layer order. This ensures trifle-hub utility classes beat preflight resets, while your own app utilities still win over trifle-hub when they conflict.
+#### Why `index.html` — not your CSS file
+trifle-hub injects its CSS via JavaScript at runtime. Because CSS layer order is locked by the **first** appearance of each layer name, any `@layer` declaration in your app's CSS file may arrive too late if trifle-hub's JS runs first (which depends on import order in `main.js`).
+The safest approach for any Vite app is to declare the layer order as a `<style>` tag in `index.html`. It is processed by the browser before any JavaScript runs, so trifle-hub's injection always lands in the correct position.
+```html
+<!-- index.html <head> — before any <script> tags -->
+<style>@layer theme, base, trifle-hub, components, utilities;</style>
+```
+Include `theme` if you use Tailwind v4 (it has an extra `@layer properties, theme, ...` that v3 does not).
+#### Tailwind v4
+In `index.html`:
+```html
+<style>@layer properties, theme, base, trifle-hub, components, utilities;</style>
+```
+Your `style.css` needs no extra layer declaration:
+```css
+@import "tailwindcss";
+```
+#### Tailwind v3 — with your own preflight
+In `index.html`:
+```html
+<style>@layer base, trifle-hub, components, utilities;</style>
+```
+Tailwind v3 outputs **unlayered** CSS by default, which unconditionally beats any `@layer` rule. To opt in to the layer system, wrap each directive in an explicit `@layer` block in your CSS:
+```css
+@layer base {
+  @tailwind base;
+}
+@layer components {
+  @tailwind components;
+}
+@layer utilities {
+  @tailwind utilities;
+}
+```
+Any styles written outside a `@layer` block remain unlayered and beat everything above.
+#### Tailwind v3 — without your own preflight
+In `index.html`:
+```html
+<style>@layer trifle-hub;</style>
+```
+If your app has `@tailwind base` commented out (relying on trifle-hub's built-in reset), your unlayered `@tailwind components/utilities` output naturally beats `@layer trifle-hub` without needing any wrapping:
+```css
+/* @tailwind base; */   ← leave commented out
+@tailwind components;
+@tailwind utilities;
+```
+### Standalone CSS file
+The compiled stylesheet is available at `dist/trifle-hub.css` if you prefer to manage it explicitly (e.g., for SSR, critical CSS extraction, or strict layer ordering). The `style` field in the package manifest points to this file. If importing it directly, note that the JS bundle also auto-injects the CSS — disable one or the other to avoid loading styles twice.
 ## Available Provide/Inject Resources
 The TrifleHub plugin provides several resources via Vue's provide/inject system:

package/dist/{AccountIndex-Dn3bQlHS.js → AccountIndex-D60Jm77t.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { inject as g, computed as n, createBlock as _, openBlock as p, withCtx as a, createElementVNode as i, createVNode as u, createTextVNode as l, normalizeClass as A, toDisplayString as k, unref as L, onMounted as C, watch as x } from "vue";
 import { storeToRefs as T } from "pinia";
-import { A as N, a as W, _ as o, b as F } from "./Profile-DcXgQ25_.js";
-import { o as S } from "./index-B_6bbCRZ.js";
+import { A as N, a as W, _ as o, b as F } from "./Profile-yM_ILkFM.js";
+import { o as S } from "./index-BjgdEoUq.js";
 const $ = ["data"], B = { class: "_w-full _max-w-[22em] _mx-auto _px-1.5 sm:_px-8 _flex _flex-col _gap-4 _items-center" }, D = { class: "_flex _flex-col _w-full _leading-none" }, P = {
   __name: "ConnectAccount",
   setup(y) {

package/dist/Earn-Du-QbIyl.js ADDED Viewed

@@ -0,0 +1,297 @@
+import { inject as H, ref as f, computed as N, watch as Q, onMounted as G, nextTick as J, createElementBlock as r, openBlock as a, createElementVNode as t, createVNode as I, createCommentVNode as m, withCtx as C, createTextVNode as W, unref as b, normalizeStyle as k, toDisplayString as D, normalizeClass as S, TransitionGroup as Z, Fragment as j, renderList as E, createBlock as K } from "vue";
+import { m as X, n as V } from "./index-BjgdEoUq.js";
+import { H as q } from "./HubPageHeader-VDMilTIN.js";
+import { storeToRefs as ee } from "pinia";
+import { _ as te } from "./SocialsButtons-WqOFzwOG.js";
+import { _ as le } from "./QuestCard-BAD8PgfA.js";
+import { _ as se } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const ne = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-full _flex _flex-col" }, oe = { class: "_-mt-3.5 _space-y-3.5" }, ae = {
+  key: 0,
+  class: "_mt-4 _px-3.5 _py-3 _flex _flex-col _gap-3 _rounded-lg _overflow-hidden _shadow-panel _bg-metallic-cone"
+}, ie = { class: "_relative _flex _flex-col _gap-2.5" }, re = { class: "_flex _justify-between _items-center" }, _e = { class: "_flex _items-center _min-w-0 _flex-1" }, de = { class: "_text-right _min-w-0 _truncate _text-stroke-3xl" }, ce = { class: "_gap-[0.45rem] _mt-6 _grid _grid-cols-2 _text-stroke-2xl _text-xl _tracking-wide _mb-3" }, ue = {
+  key: 0,
+  class: "_space-y-4"
+}, pe = {
+  key: 0,
+  class: "_space-y-2"
+}, fe = {
+  key: 1,
+  class: "_p-4 _bg-red-100 _text-red-700 _rounded-lg"
+}, me = {
+  key: 2,
+  class: "_space-y-2"
+}, ge = {
+  key: 1,
+  class: "_space-y-3"
+}, be = { class: "_bg-metallic-coneff _-mx-2 _p-2.5ff _rounded-lg_shadow-panel-inset _text-center _flex _flex-col _gap-4" }, he = ["href"], ve = {
+  class: "masked-oval _relative _flex _items-center _justify-center _pointer-events-none",
+  style: { "aspect-ratio": "14.5/9" }
+}, xe = ["src"], ye = { class: "_px-2.5 _mx-6 _flex _justify-center _-mt-5 _relative _p-2" }, ke = { class: "_bg-metallic-linearff _shadow-panel-insetff _rounded-lg _flex _items-center _w-fullff _justify-between _flex-col _gap-1 _shadow-panel-insetff _rounded-full _w-full _pb-5" }, we = ["href"], Pe = {
+  key: 0,
+  class: "_relative _-mt-3 _shadow-panel-inset _rounded-md"
+}, Te = ["innerHTML"], $e = { class: "_mt-6 _bg-metallic-linear _p-4 _rounded-lg _shadow-panel _text-center _flex _flex-col _gap-3 _pb-5" }, Le = { class: "_grid _grid-cols-2 _gap-2" }, Be = {
+  __name: "Earn",
+  setup(Ie) {
+    const d = H("TrifleHub/store"), h = H("hub"), { openHub: z } = h, w = f([]), v = f(!0), x = f(null), P = f(0), T = f("all"), c = f("earn"), { backendUrl: F, isAuthenticated: y } = ee(d), O = () => {
+      var s;
+      d.setProfileUsername((s = d.user) == null ? void 0 : s.username), z("profile");
+    }, M = N(() => {
+      var s;
+      return (s = h.highlightQuestId) == null ? void 0 : s.value;
+    }), U = N(() => {
+      var e;
+      let s = [];
+      const l = d.isFarcaster ? "farcaster" : "web", i = w.value.filter(
+        (n) => !n.hiddenFromQuests && (!n.platforms || n.platforms.includes(l))
+      );
+      T.value === "all" ? s = i : T.value === "once" ? s = i.filter((n) => n.once) : T.value === "ongoing" ? s = i.filter((n) => !n.once) : s = i;
+      const _ = s.slice().sort((n, o) => {
+        if (n.enabled && !o.enabled) return -1;
+        if (!n.enabled && o.enabled) return 1;
+        if (n.enabled && o.enabled) {
+          const p = n.completed && n.once, g = o.completed && o.once;
+          if (p && !g) return 1;
+          if (!p && g) return -1;
+        }
+        return 0;
+      }), u = (e = h.highlightQuestId) == null ? void 0 : e.value;
+      if (u) {
+        const n = _.findIndex((o) => o.id === u);
+        if (n > 0) {
+          const [o] = _.splice(n, 1);
+          _.unshift(o);
+        }
+      }
+      return _;
+    }), $ = async () => {
+      var s, l, i, _, u;
+      v.value = !0, x.value = null;
+      try {
+        if (y.value || (l = (s = d.isFarcaster) == null ? void 0 : s.user) != null && l.id) {
+          const e = await fetch(`${F.value}/balls/point-categories-with-counts`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+              // Authorization: `Bearer ${auth.authToken}`
+            },
+            body: JSON.stringify({
+              userId: ((i = d.user) == null ? void 0 : i.id) || ((u = (_ = d.isFarcaster) == null ? void 0 : _.user) == null ? void 0 : u.id)
+            })
+          });
+          if (!e.ok)
+            throw new Error(`HTTP error! status: ${e.status}`);
+          const n = await e.json();
+          P.value = n.balls.total, w.value = V.map((o) => {
+            const p = n.balls.data.filter((B) => B.name === o.id), g = p.length > 0;
+            let L = null;
+            if (!o.once && g)
+              if (o.id === "gm") {
+                const B = (/* @__PURE__ */ new Date()).toDateString(), R = p.filter(
+                  (Y) => new Date(Y.createdAt).toDateString() === B
+                );
+                L = Math.min(R.length / 10 * 100, 100);
+              } else o.id === "burn-kudzu" && (L = Math.min(p.length % 10 * 10, 100));
+            return {
+              ...o,
+              completed: g,
+              progress: L,
+              requiresLogin: !1,
+              enabled: o.enabled !== void 0 ? o.enabled : !0,
+              link: o.link || null
+            };
+          });
+        } else
+          P.value = 0, w.value = V.map((e) => ({
+            ...e,
+            completed: !1,
+            progress: null,
+            requiresLogin: !0,
+            enabled: e.enabled !== void 0 ? e.enabled : !0,
+            link: e.link || null
+          }));
+      } catch (e) {
+        console.error("Error fetching quest data:", e), x.value = "Failed to load quest data. Please try again later.";
+      } finally {
+        v.value = !1;
+      }
+    };
+    Q(y, () => {
+      $();
+    }), G(() => {
+      $();
+    }), Q(
+      () => {
+        var s;
+        return [(s = h.highlightQuestId) == null ? void 0 : s.value, v.value];
+      },
+      async ([s, l]) => {
+        var i;
+        !s || l || (await J(), (i = document.getElementById(`thub-quest-${s}`)) == null || i.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest"
+        }));
+      },
+      { flush: "post" }
+    );
+    const A = [
+      {
+        name: "like-lottery",
+        title: "NEW PRIZES SOON",
+        link: "https://trifle.life/prizes",
+        linkDisabled: !0,
+        bgVideo: "https://gm-trifle.b-cdn.net/dsiwc6udm/video/upload/q_auto:eco/v1757079745/lottery-gif-loop-better-shorter__16-9__240p-400br_f5bx63.mp4",
+        bgBlur: 0,
+        isNewUntil: /* @__PURE__ */ new Date("September 30, 2099")
+      }
+    ];
+    return (s, l) => {
+      var i, _, u;
+      return a(), r("div", ne, [
+        t("header", oe, [
+          I(q, null, {
+            icon: C(() => l[3] || (l[3] = [
+              t("img", {
+                src: X,
+                alt: "📈🪩",
+                class: "_h-[1.75em]"
+              }, null, -1)
+            ])),
+            default: C(() => [
+              l[4] || (l[4] = W(" BALL$ "))
+            ]),
+            _: 1
+          }),
+          b(y) ? m("", !0) : (a(), r("section", ae, [
+            t("div", ie, [
+              l[7] || (l[7] = t("div", null, [
+                t("p", { class: "_text-mlg" }, "You might have 🪩BALL$ to claim!")
+              ], -1)),
+              t("div", re, [
+                l[6] || (l[6] = t("p", { class: "_italic _text-[#888] _text-em-sm _animate-blink" }, "Login to claim →", -1)),
+                t("button", {
+                  class: "_bubble-btn _px-6 _py-2",
+                  style: { filter: "hue-rotate(-340deg) saturate(1.8)" },
+                  onClick: l[0] || (l[0] = (e) => b(z)("account"))
+                }, l[5] || (l[5] = [
+                  t("span", { style: { filter: "hue-rotate(340deg) saturate(0.5)" } }, "Login", -1)
+                ]))
+              ])
+            ])
+          ])),
+          b(y) ? (a(), r("section", {
+            key: 1,
+            class: "_px-3 _py-3 _bg-metallic-cone _rounded-lg _shadow-panel _flex _justify-between _items-center _flex-wrap _gap-2 _leading-none _text-3xl _cursor-pointer _whitespace-nowrap",
+            onClick: O
+          }, [
+            t("div", _e, [
+              (i = b(d).user) != null && i.avatar ? (a(), r("div", {
+                key: 0,
+                class: "_size-[1.125em] _block _rounded-full _shadow-panel-inset _bg-cover _bg-center",
+                style: k({ backgroundImage: `url(${(_ = b(d).user) == null ? void 0 : _.avatar})` })
+              }, null, 4)) : m("", !0),
+              l[8] || (l[8] = t("div", { class: "_opacity-30 _text-mlg _text-stroke-lg _ml-[0.37em] _min-w-0 _truncate" }, " Your Balance ", -1))
+            ]),
+            t("div", de, D(((u = P.value) == null ? void 0 : u.toLocaleString()) || "???"), 1),
+            l[9] || (l[9] = t("div", { class: "_flex-shrink-0" }, "🪩", -1))
+          ])) : m("", !0)
+        ]),
+        t("nav", ce, [
+          t("button", {
+            class: S(["_bubble-btn _px-4.5 _h-16", { "_animate-wiggle-sm": c.value === "earn" }]),
+            onClick: l[1] || (l[1] = (e) => c.value = "earn"),
+            style: k(c.value === "earn" ? "filter: hue-rotate(-70deg) saturate(1.6)" : "")
+          }, " earn ", 6),
+          t("button", {
+            class: S(["_bubble-btn _px-4.5 _h-16", { "_animate-wiggle-sm": c.value === "spend" }]),
+            onClick: l[2] || (l[2] = (e) => c.value = "spend"),
+            style: k(c.value === "spend" ? "filter: hue-rotate(-345deg) saturate(2.5)" : "")
+          }, " spend ", 6)
+        ]),
+        I(Z, { name: "thub-page-group" }, {
+          default: C(() => [
+            c.value === "earn" ? (a(), r("div", ue, [
+              v.value ? (a(), r("div", pe, [
+                (a(), r(j, null, E(3, (e) => t("div", {
+                  key: `loader-${e}`,
+                  class: "_flex _items-center _gap-3 _p-3 _bg-metallic-linear _shadow-panel _rounded-lg animate-pulse"
+                }, l[10] || (l[10] = [
+                  t("div", { class: "_size-8 _rounded-full _bg-black/30" }, null, -1),
+                  t("div", { class: "_flex-1 _space-y-2" }, [
+                    t("div", { class: "_h-4 _bg-black/30 _rounded w-3/4" })
+                  ], -1),
+                  t("div", { class: "_h-6 _w-12 _bg-black/30 _rounded" }, null, -1)
+                ]))), 64))
+              ])) : x.value ? (a(), r("div", fe, D(x.value), 1)) : (a(), r("div", me, [
+                (a(!0), r(j, null, E(U.value, (e) => (a(), K(le, {
+                  key: e.id,
+                  quest: e,
+                  highlight: e.id === M.value,
+                  onPointsUpdated: $
+                }, null, 8, ["quest", "highlight"]))), 128))
+              ]))
+            ])) : m("", !0),
+            c.value === "spend" ? (a(), r("div", ge, [
+              t("section", be, [
+                (a(), r(j, null, E(A, (e) => t("section", {
+                  key: e.name,
+                  class: "_relative _group"
+                }, [
+                  t("a", {
+                    href: e.linkDisabled ? null : e.link,
+                    class: "_block _pointer-events-auto _cursor-pointer _scale-[1.05] mouse:hover:_scale-[1.1] _duration-500"
+                  }, [
+                    t("figure", ve, [
+                      t("video", {
+                        src: e.bgVideo,
+                        autoplay: "",
+                        muted: "",
+                        playsinline: "",
+                        "webkit-playsinline": "",
+                        preload: "auto",
+                        loop: "",
+                        class: "_absolute _top-0 _left-0 _w-full _h-full _object-cover",
+                        style: k({
+                          filter: e.bgBlur ? `blur(${e.bgBlur}px)` : "none"
+                          // imageRendering: 'pixelated'
+                        }),
+                        loading: "lazy"
+                      }, null, 12, xe)
+                    ])
+                  ], 8, he),
+                  t("div", ye, [
+                    t("div", ke, [
+                      t("a", {
+                        href: e.linkDisabled ? null : e.link,
+                        class: S(["_-mt-8 _relative _z-10 _bg-metallic-cone _shadow-panel _rounded-full _px-8 _py-1.5 _weight-black _text-em-2xl sm:_text-em-3xl mouse:hover:_scale-[1.05] _duration-150", {
+                          "_animate-rainbow-wiggle-sm": !0,
+                          // '_tracking-[0.2em]': !game.title,
+                          "_tracking-[0.05em]": e.title
+                        }])
+                      }, D(e.title), 11, we),
+                      e.description ? (a(), r("div", Pe, [
+                        t("p", {
+                          class: "_px-4.5 _leading-none _py-4.5 _italic _opacity-50ff _whitespace-nowrap _text-stroke-lg _tracking-[0.01em]",
+                          innerHTML: e.description
+                        }, null, 8, Te)
+                      ])) : m("", !0)
+                    ])
+                  ])
+                ])), 64))
+              ])
+            ])) : m("", !0)
+          ]),
+          _: 1
+        }),
+        t("section", $e, [
+          l[11] || (l[11] = t("header", { class: "_-mt-0.5 _opacity-30 _animate-wiggle-sm" }, "follow for updates", -1)),
+          t("div", Le, [
+            I(te)
+          ])
+        ])
+      ]);
+    };
+  }
+}, Ne = /* @__PURE__ */ se(Be, [["__scopeId", "data-v-086e7ded"]]);
+export {
+  Ne as default
+};

package/dist/{ExchangeController-DKSzd5W5.js → ExchangeController-Co2XHJuv.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { a as k, g as U, C as l, E as w, b as E, S as A, c as x, f as P, d as N, e as I, O as L, N as f, h as C, B as T, i as W, s as _, j as v } from "./index-B_6bbCRZ.js";
+import { a as k, g as U, C as l, E as w, b as E, S as A, c as x, f as P, d as N, e as I, O as L, N as f, h as C, B as T, i as W, s as _, j as v } from "./index-BjgdEoUq.js";
 const D = 0, b = {
   paymentAsset: null,
   amount: null,