@nibgate/sdk 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nibgate/sdk",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Framework-agnostic browser and server package for creator-owned gated content, unlock events, and receipts.",
   "type": "module",
   "sideEffects": false,

package/src/browser/index.js

@@ -556,6 +556,66 @@ export function createOnchainRating(resource, options = {}) {
   return controller;
 }
 
+export function mountRatingUI(resource, options = {}) {
+  const item = createGate(resource, options.gateOptions || {});
+  const win = browserWindow();
+  if (!win) return null;
+  const target = typeof options.target === 'string' ? win.document.querySelector(options.target) : options.target;
+  if (!target) return null;
+
+  const stars = [1, 2, 3, 4, 5];
+  let selectedRating = 0;
+
+  const container = win.document.createElement('div');
+  container.className = 'nibgate-rating-ui';
+  container.style.cssText = 'display:flex;align-items:center;gap:4px;padding:8px 0';
+
+  const starButtons = stars.map((value) => {
+    const btn = win.document.createElement('button');
+    btn.type = 'button';
+    btn.dataset.nibgateRatingValue = String(value);
+    btn.setAttribute('aria-label', `${value} star${value > 1 ? 's' : ''}`);
+    btn.innerHTML = '☆';
+    btn.style.cssText = 'background:none;border:none;font-size:24px;cursor:pointer;color:#ccc;transition:color 0.15s;padding:2px;line-height:1';
+    btn.addEventListener('mouseenter', () => {
+      starButtons.forEach((b, i) => b.style.color = i < value ? '#f5b342' : '#ccc');
+    });
+    btn.addEventListener('mouseleave', () => {
+      starButtons.forEach((b, i) => b.style.color = i < selectedRating ? '#f5b342' : '#ccc');
+    });
+    btn.addEventListener('click', () => {
+      selectedRating = value;
+      starButtons.forEach((b, i) => b.style.color = i < value ? '#f5b342' : '#ccc');
+      rate(item.resource, { rating: value }).catch(() => {});
+    });
+    container.appendChild(btn);
+    return btn;
+  });
+
+  const statusEl = win.document.createElement('span');
+  statusEl.style.cssText = 'font-size:13px;color:#888;margin-left:8px';
+  statusEl.textContent = options.label || 'Rate this content';
+  container.appendChild(statusEl);
+
+  target.appendChild(container);
+
+  function rate(r, input = {}) {
+    return item.rate({ ...input, rating: r });
+  }
+
+  function setRating(value) {
+    selectedRating = value;
+    starButtons.forEach((b, i) => b.style.color = i < value ? '#f5b342' : '#ccc');
+  }
+
+  return {
+    resource: item.resource,
+    container,
+    setRating,
+    rate
+  };
+}
+
 export async function payAndUnlockResource(resource, options = {}) {
   const item = createGate(resource, options.gateOptions || {});
   const payPath = options.payPath || item.resource.payPath || '/api/nibgate/pay';
@@ -690,6 +750,9 @@ export function createNibgate(defaults = {}) {
     createOnchainRating(resource, options = {}) {
       return createOnchainRating(resourceWithDefaults(resource), options);
     },
+    mountRatingUI(resource, options = {}) {
+      return mountRatingUI(resourceWithDefaults(resource), options);
+    },
     payAndUnlockResource(resource, options = {}) {
       return payAndUnlockResource(resourceWithDefaults(resource), options);
     },

package/src/index.d.ts

@@ -114,6 +114,7 @@ export type NibgateClient = {
   createEvmGatewayUnlock(resource: NibgateResource | string, options?: NibgateEvmGatewayUnlockOptions): NibgateEvmGatewayUnlockController;
   rateContentOnchain(resource: NibgateResource | string, options: NibgateOnchainRatingOptions): Promise<NibgateOnchainRatingResult>;
   createOnchainRating(resource: NibgateResource | string, options?: NibgateOnchainRatingUiOptions): NibgateOnchainRatingController;
+  mountRatingUI(resource: NibgateResource | string, options?: NibgateRatingUiOptions): NibgateRatingUiController | null;
   payAndUnlockResource(resource: NibgateResource | string, options?: NibgatePaymentOptions): Promise<NibgatePaymentResult>;
   setupResourcePage(resource: NibgateResource | string, options?: NibgatePageSetupOptions): NibgateGate;
   ratingMessage(resource: NibgateResource | string, rating?: NibgateRating | number, options?: Record<string, unknown>): string;
@@ -430,5 +431,18 @@ export declare function ratingMessage(resource: NibgateResource | string, rating
 export declare function createNibgate(defaults?: { resource?: NibgateResource }): NibgateClient;
 export declare const nibgate: NibgateClient;
 
+export interface NibgateRatingUiOptions {
+  target?: string | HTMLElement;
+  label?: string;
+  gateOptions?: Record<string, unknown>;
+}
+export interface NibgateRatingUiController {
+  resource: NibgateResource;
+  container: HTMLElement;
+  setRating(value: number): void;
+  rate(resource: NibgateResource | string, input?: Record<string, unknown>): ReturnType<typeof rateContentOnchain>;
+}
+export declare function mountRatingUI(resource: NibgateResource | string, options?: NibgateRatingUiOptions): NibgateRatingUiController | null;
+
 export declare function createTransferCheckout(resource: NibgateResource | string, options: NibgateTransferCheckoutOptions): NibgateTransferCheckout;
 export declare function payWithTransfer(resource: NibgateResource | string, options: NibgateTransferCheckoutOptions & NibgateAccessCheckOptions): Promise<NibgateAccessCheckResult>;