@viibestack/ui 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viibestack/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Dependency-free React UI kit -- icons, core components (Button, Card, Input, Modal, etc.), a real per-app data client (listRows/upsertRow/deleteRow/reportError), and a real per-app end-user auth client (signUp/logIn/logOut/getCurrentUser) backed by ViibeStack's own platform-managed data store.",
   "type": "module",
   "main": "./src/index.ts",

package/src/auth.ts

@@ -256,14 +256,17 @@ export interface MonetizationStatus {
   billing_interval: "monthly" | "annual";
   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
 }
 
 // Redirects the browser to Stripe Checkout to start (or restart) the
 // current end-user's subscription. Resolves once the redirect has been
 // issued (ok: true) -- there's no "after checkout" callback here; check
 // getMonetizationStatus() again once the user is back (Stripe redirects to
-// this app's own URL with ?billing=success/cancelled).
-export async function createMonetizationCheckout(interval: "monthly" | "annual"): Promise<ActionResult> {
+// this app's own URL with ?billing=success/cancelled). `seats` only matters
+// when the app owner set per-seat pricing (ignored server-side otherwise) --
+// omit it for flat-priced apps.
+export async function createMonetizationCheckout(interval: "monthly" | "annual", seats?: number): Promise<ActionResult> {
   const stored = loadStoredSession();
   if (!stored) return { ok: false, error: "not signed in" };
   const appId = await resolveAppId();
@@ -272,7 +275,7 @@ export async function createMonetizationCheckout(interval: "monthly" | "annual")
     const res = await fetch(`${window.location.origin}/api/apps/${appId}/monetization/checkout`, {
       method: "POST",
       headers: { "Content-Type": "application/json", Authorization: `Bearer ${stored.jwt}` },
-      body: JSON.stringify({ billing_interval: interval }),
+      body: JSON.stringify({ billing_interval: interval, seats }),
     });
     const body = (await res.json().catch(() => ({}))) as { url?: string; error?: string };
     if (!res.ok || !body.url) return { ok: false, error: body.error ?? "failed to start checkout" };
@@ -302,3 +305,28 @@ export async function getMonetizationStatus(): Promise<MonetizationStatus | null
     return null;
   }
 }
+
+// The standard "need help with this error?" report -- distinct from the
+// automatic window.onerror/unhandledrejection capture every generated app
+// already wires up (that one posts directly to .../errors via raw fetch per
+// integrationRequirements(), no packages/ui helper involved). This one is
+// for the explicit prompt: when an error surfaces, show a small toast/banner
+// asking the end-user if they want to report it, and call this if they say
+// yes. No sign-in required -- reporter_email is optional context, not auth.
+// Server-side this always emails the app owner (072_app_error_log_workflow.sql's
+// alerted_at still dedupes a recurring message within the same hour).
+export async function reportError(message: string, details?: Record<string, unknown>, reporterEmail?: string): Promise<ActionResult> {
+  const appId = await resolveAppId();
+  if (!appId) return { ok: false, error: "couldn't determine this app's id" };
+  try {
+    const res = await fetch(`${window.location.origin}/api/apps/${appId}/errors/report`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ message, details, reporter_email: reporterEmail }),
+    });
+    if (!res.ok) return { ok: false, error: "failed to report" };
+    return { ok: true };
+  } catch {
+    return { ok: false, error: "network error" };
+  }
+}

package/src/data.ts

@@ -33,17 +33,51 @@ function resolveAppId(): Promise<string | null> {
   return appIdPromise;
 }
 
-export async function listRows<T extends { id: string }>(table: string): Promise<T[]> {
+export interface RowsPage<T> {
+  rows: T[];
+  nextCursor: string | null;
+}
+
+// One page of a table, server-paginated (keyset on updated_at+id, newest
+// first) -- for a table expected to grow into the thousands+ (a CRM's
+// contacts, a helpdesk's tickets), build a real "load more"/infinite-scroll
+// UI around this instead of assuming listRows() below hands back
+// everything at once.
+export async function listRowsPage<T extends { id: string }>(table: string, opts?: { limit?: number; cursor?: string }): Promise<RowsPage<T>> {
   const appId = await resolveAppId();
-  if (!appId) return [];
+  if (!appId) return { rows: [], nextCursor: null };
   try {
-    const res = await fetch(`${window.location.origin}/api/apps/${appId}/data-public/${table}`, { headers: authHeaders() });
-    if (!res.ok) return [];
-    const data = (await res.json()) as { rows: T[] };
-    return data.rows ?? [];
+    const params = new URLSearchParams();
+    if (opts?.limit) params.set("limit", String(opts.limit));
+    if (opts?.cursor) params.set("cursor", opts.cursor);
+    const qs = params.toString();
+    const res = await fetch(`${window.location.origin}/api/apps/${appId}/data-public/${table}${qs ? `?${qs}` : ""}`, { headers: authHeaders() });
+    if (!res.ok) return { rows: [], nextCursor: null };
+    const data = (await res.json()) as { rows: T[]; next_cursor: string | null };
+    return { rows: data.rows ?? [], nextCursor: data.next_cursor ?? null };
   } catch {
-    return [];
+    return { rows: [], nextCursor: null };
+  }
+}
+
+// Convenience wrapper every existing generated app already calls expecting
+// a plain array back. Auto-pages up to MAX_AUTO_PAGES so a table's growth
+// no longer silently truncates at a hard 1000-row ceiling -- but this is
+// still a "fetch it all into memory" call, not real pagination; a table
+// genuinely headed into the tens of thousands of rows should move to
+// listRowsPage() above and render incrementally instead.
+const MAX_AUTO_PAGES = 20; // 20 x 1000-row pages = 20,000 rows before this stops and returns what it has
+
+export async function listRows<T extends { id: string }>(table: string): Promise<T[]> {
+  const all: T[] = [];
+  let cursor: string | undefined;
+  for (let page = 0; page < MAX_AUTO_PAGES; page++) {
+    const { rows, nextCursor } = await listRowsPage<T>(table, { limit: 1000, cursor });
+    all.push(...rows);
+    if (!nextCursor) break;
+    cursor = nextCursor;
   }
+  return all;
 }
 
 export async function upsertRow<T extends { id: string }>(table: string, row: T): Promise<void> {