npm - @trifle/trifle-hub - Versions diffs - 1.0.162 → 1.1.0 - Mend

@trifle/trifle-hub 1.0.162 → 1.1.0

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 (67) 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-CTjOLmjP.js → AccountIndex-Dn3bQlHS.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-YoSRBmlN.js";
-import { o as S } from "./index-BBZwHOZx.js";
+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";
 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-DMrF4S31.js → Earn-BVtdNUxL.js} RENAMED Viewed

@@ -1,15 +1,15 @@
-import { inject as E, ref as f, computed as Q, watch as j, onMounted as J, nextTick as R, createElementBlock as i, openBlock as r, createElementVNode as t, createVNode as b, createCommentVNode as v, withCtx as S, createTextVNode as w, unref as p, normalizeStyle as D, toDisplayString as A, normalizeClass as F, TransitionGroup as K, Fragment as H, renderList as z, createBlock as W } from "vue";
-import { m as X, n as N } from "./index-BBZwHOZx.js";
+import { inject as E, ref as f, computed as Q, watch as j, onMounted as J, nextTick as R, createElementBlock as r, openBlock as i, createElementVNode as t, createVNode as b, createCommentVNode as v, withCtx as S, createTextVNode as w, unref as p, normalizeStyle as D, toDisplayString as A, normalizeClass as F, TransitionGroup as K, Fragment as H, renderList as z, createBlock as W } from "vue";
+import { m as X, n as N } from "./index-B_6bbCRZ.js";
 import { H as Z } from "./HubPageHeader-VDMilTIN.js";
 import { storeToRefs as q } from "pinia";
-import { _ as ee } from "./SocialsButtons-uL2_XTTy.js";
-import { _ as te, a as le } from "./SwapBalls-ChUy9GIh.js";
-import { _ as se } from "./QuestCard-CapG6iNR.js";
+import { _ as ee } from "./SocialsButtons-DtwEuVa-.js";
+import { _ as te, a as le } from "./SwapBalls-jt0cB6dz.js";
+import { _ as se } from "./QuestCard-ABFoFHer.js";
 import { _ as ne } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const ae = { 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" }, re = {
+const ae = { 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" }, ie = {
   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" }, _e = { class: "_flex _justify-between _items-center" }, de = { class: "_flex _items-center _min-w-0 _flex-1" }, ue = { 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" }, me = {
+}, re = { class: "_relative _flex _flex-col _gap-2.5" }, _e = { class: "_flex _justify-between _items-center" }, de = { class: "_flex _items-center _min-w-0 _flex-1" }, ue = { 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" }, me = {
   key: 0,
   class: "_space-y-4"
 }, fe = {
@@ -24,10 +24,10 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
 }, be = {
   key: 1,
   class: "_space-y-3"
-}, ve = { class: "_text-mlg _bg-metallic-linearff _p-2.5 _rounded-lg _shadow-panel-insetff _border-4 _border-dashed _border-black/20 _text-center _flex _flex-col _gap-4" }, xe = { class: "_flex _items-center _gap-[0.75em] _justify-center _leading-none _mt-2 _-mb-1" }, he = { class: "_flex _items-center _gap-[0.5em]" }, ye = { class: "_flex-1 _text-center _text-stroke-2xl" }, ke = { class: "_mt-6 _bg-metallic-linear _p-4 _rounded-lg _shadow-panel _text-center _flex _flex-col _gap-3.5 _pb-5" }, we = { class: "_grid _grid-cols-2 _gap-2" }, $e = {
+}, ve = { class: "_text-mlg _bg-metallic-linearff _p-2.5 _rounded-lg _shadow-panel-insetff _border-4 _border-dashed _border-black/20 _text-center _flex _flex-col _gap-4" }, xe = { class: "_flex _items-center _gap-[0.75em] _justify-center _leading-none _mt-2 _-mb-1" }, he = { class: "_flex _items-center _gap-[0.5em]" }, ke = { class: "_flex-1 _text-center _text-stroke-2xl" }, ye = { class: "_mt-6 _bg-metallic-linear _p-4 _rounded-lg _shadow-panel _text-center _flex _flex-col _gap-3.5 _pb-5" }, we = { class: "_grid _grid-cols-2 _gap-2" }, $e = {
   __name: "Earn",
   setup(Ce) {
-    const d = E("TrifleHub/store"), x = E("hub"), { openHub: $ } = x, C = f([]), h = f(!0), y = f(null), P = f(0), L = f("all"), u = f("earn"), { backendUrl: U, isAuthenticated: k } = q(d), V = () => {
+    const d = E("TrifleHub/store"), x = E("hub"), { openHub: $ } = x, C = f([]), h = f(!0), k = f(null), P = f(0), L = f("all"), u = f("earn"), { backendUrl: U, isAuthenticated: y } = q(d), V = () => {
       var s;
       d.setProfileUsername((s = d.user) == null ? void 0 : s.username), $("profile");
     }, O = Q(() => {
@@ -60,9 +60,9 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
       return _;
     }), T = async () => {
       var s, e, o, _, c;
-      h.value = !0, y.value = null;
+      h.value = !0, k.value = null;
       try {
-        if (k.value || (e = (s = d.isFarcaster) == null ? void 0 : s.user) != null && e.id) {
+        if (y.value || (e = (s = d.isFarcaster) == null ? void 0 : s.user) != null && e.id) {
           const l = await fetch(`${U.value}/balls/point-categories-with-counts`, {
             method: "POST",
             headers: {
@@ -105,12 +105,12 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
             link: l.link || null
           }));
       } catch (l) {
-        console.error("Error fetching quest data:", l), y.value = "Failed to load quest data. Please try again later.";
+        console.error("Error fetching quest data:", l), k.value = "Failed to load quest data. Please try again later.";
       } finally {
         h.value = !1;
       }
     };
-    return j(k, () => {
+    return j(y, () => {
       T();
     }), J(() => {
       T();
@@ -129,7 +129,7 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
       { flush: "post" }
     ), (s, e) => {
       var o, _, c;
-      return r(), i("div", ae, [
+      return i(), r("div", ae, [
         t("header", oe, [
           b(Z, null, {
             icon: S(() => e[5] || (e[5] = [
@@ -144,8 +144,8 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
             ]),
             _: 1
           }),
-          p(k) ? v("", !0) : (r(), i("section", re, [
-            t("div", ie, [
+          p(y) ? v("", !0) : (i(), r("section", ie, [
+            t("div", re, [
               e[9] || (e[9] = t("div", null, [
                 t("p", { class: "_text-mlg" }, "You might have 🪩BALL$ to claim!")
               ], -1)),
@@ -161,13 +161,13 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
               ])
             ])
           ])),
-          p(k) ? (r(), i("section", {
+          p(y) ? (i(), 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: V
           }, [
             t("div", de, [
-              (o = p(d).user) != null && o.avatar ? (r(), i("div", {
+              (o = p(d).user) != null && o.avatar ? (i(), r("div", {
                 key: 0,
                 class: "_size-[1.125em] _block _rounded-full _shadow-panel-inset _bg-cover _bg-center",
                 style: D({ backgroundImage: `url(${(_ = p(d).user) == null ? void 0 : _.avatar})` })
@@ -192,9 +192,9 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
         ]),
         b(K, { name: "thub-page-group" }, {
           default: S(() => [
-            u.value === "earn" ? (r(), i("div", me, [
-              h.value ? (r(), i("div", fe, [
-                (r(), i(H, null, z(3, (l) => t("div", {
+            u.value === "earn" ? (i(), r("div", me, [
+              h.value ? (i(), r("div", fe, [
+                (i(), r(H, null, z(3, (l) => t("div", {
                   key: `loader-${l}`,
                   class: "_flex _items-center _gap-3 _p-3 _bg-metallic-linear _shadow-panel _rounded-lg animate-pulse"
                 }, e[12] || (e[12] = [
@@ -204,8 +204,8 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
                   ], -1),
                   t("div", { class: "_h-6 _w-12 _bg-black/30 _rounded" }, null, -1)
                 ]))), 64))
-              ])) : y.value ? (r(), i("div", pe, A(y.value), 1)) : (r(), i("div", ge, [
-                (r(!0), i(H, null, z(M.value, (l) => (r(), W(se, {
+              ])) : k.value ? (i(), r("div", pe, A(k.value), 1)) : (i(), r("div", ge, [
+                (i(!0), r(H, null, z(M.value, (l) => (i(), W(se, {
                   key: l.id,
                   quest: l,
                   highlight: l.id === O.value,
@@ -213,7 +213,7 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
                 }, null, 8, ["quest", "highlight"]))), 128))
               ]))
             ])) : v("", !0),
-            u.value === "spend" ? (r(), i("div", be, [
+            u.value === "spend" ? (i(), r("div", be, [
               t("section", ve, [
                 t("header", xe, [
                   e[13] || (e[13] = t("div", { class: "_text-[2.5em] _animate-wiggle-sm" }, "🪩", -1)),
@@ -221,14 +221,14 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
                   b(te, { class: "_h-[2.5em]" })
                 ]),
                 t("div", he, [
-                  t("p", ye, [
+                  t("p", ke, [
                     e[15] || (e[15] = w(" Add ")),
-                    e[16] || (e[16] = t("span", { class: "_inline-block" }, "lotto-balls", -1)),
-                    e[17] || (e[17] = w(" to the next ")),
+                    e[16] || (e[16] = t("span", { class: "_inline-block" }, "balls", -1)),
+                    e[17] || (e[17] = w(" to next week's ")),
                     t("button", {
                       class: "_underline",
-                      onClick: e[3] || (e[3] = (l) => p($)("games"))
-                    }, "weekly USDC lottery"),
+                      onClick: e[3] || (e[3] = (l) => p($)("games", !1, { tab: "lotteries" }))
+                    }, " USDC contest"),
                     e[18] || (e[18] = w("! "))
                   ])
                 ]),
@@ -240,7 +240,7 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
           ]),
           _: 1
         }),
-        t("section", ke, [
+        t("section", ye, [
           e[19] || (e[19] = t("div", { class: "_opacity-30 _animate-wiggle-sm" }, "follow for more BALL$", -1)),
           t("div", we, [
             b(ee)
@@ -249,7 +249,7 @@ const ae = { class: "_flex-1 _overflow-y-scroll-masked _no-scrollbar _px-5 _w-fu
       ]);
     };
   }
-}, Qe = /* @__PURE__ */ ne($e, [["__scopeId", "data-v-188a4258"]]);
+}, Qe = /* @__PURE__ */ ne($e, [["__scopeId", "data-v-9837718d"]]);
 export {
   Qe as default
 };

package/dist/{ExchangeController-6NjzC79Z.js → ExchangeController-DKSzd5W5.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-BBZwHOZx.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-B_6bbCRZ.js";
 const D = 0, b = {
   paymentAsset: null,
   amount: null,