@viibestack/ui 0.7.7 → 0.7.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viibestack/ui",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), a TeamGrid/TeamMemberCard people-grid pattern, gamification primitives (PointsDisplay, StreakCounter, Achievements, Leaderboard, fireReward), a real per-app data client for browser code (listRows/listRowsPage/getRow/upsertRow/deleteRow/captureClientError) plus server-safe variants for Route Handlers/Server Components (listRowsServer/listRowsPageServer/getRowServer/upsertRowServer/deleteRowServer/resolveAppIdByHostname), a real per-app end-user auth client (signUp/logIn/logOut/getCurrentUser/reportError), and a self-gating PoweredByBadge component -- backed by ViibeStack's own platform-managed data store.",
   "type": "module",
   "main": "./src/index.ts",

package/src/auth.ts

@@ -303,6 +303,15 @@ export interface MonetizationStatus {
   status: string; // mirrors Stripe verbatim: trialing/active/past_due/canceled/...
   trial_end: string | null;
   seats: number; // 1 unless the app owner set pricing_model to per-seat
+  // ISO timestamp of this subscription's current billing period end (its
+  // next charge date), straight from Stripe's own subscription object --
+  // null only until the first customer.subscription.created/updated event
+  // lands (moments after checkout, not before). Lets an app show a
+  // subscriber their real next-charge date instead of leaving them to
+  // guess -- see 140_monetization_current_period_end.sql's own comment for
+  // why this was added (a subscriber billed twice in 12 days with no way
+  // for the app -- or its owner -- to see or predict their next charge).
+  current_period_end: string | null;
 }
 
 // Redirects the browser to Stripe Checkout to start (or restart) the

package/src/badge.tsx

@@ -110,22 +110,43 @@ export function PoweredByBadge() {
           setDismissed(true);
         }}
         style={{
+          // Tap target is 2.75rem (44px, Apple's/Android's usual minimum
+          // recommendation) even though the visible glyph stays the same
+          // small size below -- was a literal 1rem (16px) box, reported as
+          // hard to hit on mobile. Negative margin cancels the extra size
+          // from the pill's own layout (this flex row centers on cross-axis
+          // with no fixed height, so a bigger child would otherwise stretch
+          // the whole badge taller) -- the button still visually reads as
+          // the same small pill, just easier to actually tap.
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          width: "1rem",
-          height: "1rem",
+          width: "2.75rem",
+          height: "2.75rem",
+          margin: "-0.875rem",
           padding: 0,
           border: "none",
           borderRadius: "9999px",
-          background: "rgba(255, 255, 255, 0.15)",
+          background: "transparent",
           color: "#fff",
           fontSize: "0.7rem",
           lineHeight: 1,
           cursor: "pointer",
         }}
       >
-        ✕
+        <span
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "1rem",
+            height: "1rem",
+            borderRadius: "9999px",
+            background: "rgba(255, 255, 255, 0.15)",
+          }}
+        >
+          &#x2715;
+        </span>
       </button>
     </span>
   );