@viibestack/ui 0.6.3 → 0.6.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@viibestack/ui",
-  "version": "0.6.3",
-  "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), a real per-app data client (listRows/upsertRow/deleteRow/captureClientError), and a real per-app end-user auth client (signUp/logIn/logOut/getCurrentUser/reportError) backed by ViibeStack's own platform-managed data store.",
+  "version": "0.6.4",
+  "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), a real per-app data client (listRows/upsertRow/deleteRow/captureClientError), 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",
   "types": "./src/index.ts",

package/src/badge.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+// Small fixed "Powered by ViibeStack" badge every generated app is required
+// to render once near its root layout (see integrationRequirements() item
+// 11 in services/deploy/src/mcp-agent.ts, and scratch-scaffold.ts's
+// layout.tsx template, which injects this automatically for from-scratch
+// builds). Self-gating: resolves this app's own tenant plan at runtime via
+// GET /api/apps/:id/badge-status and renders nothing once that tenant is
+// actively paying for a plan that waives the badge (Growing Business and
+// above) -- no build-time branching needed, so the same shipped code keeps
+// working correctly if a tenant upgrades/downgrades after the app was
+// already deployed.
+import { useEffect, useState } from "react";
+
+let showBadgePromise: Promise<boolean> | null = null;
+
+function resolveShowBadge(): Promise<boolean> {
+  if (!showBadgePromise) {
+    showBadgePromise = fetch(`${window.location.origin}/api/apps/resolve?hostname=${window.location.hostname}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data: { app_id?: string } | null) => {
+        if (!data?.app_id) return true;
+        return fetch(`${window.location.origin}/api/apps/${data.app_id}/badge-status`)
+          .then((res) => (res.ok ? res.json() : null))
+          .then((status: { show_badge?: boolean } | null) => status?.show_badge ?? true);
+      })
+      .catch(() => true);
+  }
+  return showBadgePromise;
+}
+
+export function PoweredByBadge() {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    resolveShowBadge().then((result) => {
+      if (!cancelled) setShow(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!show) return null;
+
+  return (
+    <a
+      href="https://viibestack.ai?utm_source=powered_by_badge"
+      target="_blank"
+      rel="noopener noreferrer"
+      style={{
+        position: "fixed",
+        bottom: "1rem",
+        right: "1rem",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.375rem",
+        padding: "0.375rem 0.75rem",
+        borderRadius: "9999px",
+        backgroundColor: "rgba(17, 17, 17, 0.85)",
+        color: "#fff",
+        fontSize: "0.75rem",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+        fontWeight: 500,
+        textDecoration: "none",
+        boxShadow: "0 2px 8px rgba(0, 0, 0, 0.2)",
+      }}
+    >
+      Powered by ViibeStack
+    </a>
+  );
+}

package/src/index.ts

@@ -3,3 +3,4 @@ export * from "./components";
 export * from "./nav";
 export * from "./data";
 export * from "./auth";
+export * from "./badge";