@snowcone-app/sdk 0.1.14 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.2.0
+
+### Minor Changes
+
+- [#220](https://github.com/snowcone-app/snowcone-monorepo/pull/220) [`aa318b5`](https://github.com/snowcone-app/snowcone-monorepo/commit/aa318b51a15e977ecb993c81ae30b6afcf6864b8) Thanks [@kevinsproles](https://github.com/kevinsproles)! - Add realtime saved-design-state API: `createDesignState` (top-level export for building a design state payload) and `RenderSession.renderSavedState(placement, stateId)` (render a previously-saved design state in a realtime session). These were already in `main` and documented on developers.snowcone.app but were missing from the published `@snowcone-app/sdk@0.1.15`, so docs examples failed to compile against the npm package.
+
 All notable changes to the Merch SDK will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
@@ -8,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [0.1.9] - 2025-10-16
 
 ### Added
+
 - **DOM-Based URL Resolution** - Intelligent URL resolution for transformed assets
   - Added `resolveUrlFromDOM()` to find actual rendered URLs in the DOM
   - Automatically resolves Vercel Blob Storage URLs from v0.dev
@@ -15,18 +22,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Perfect for environments where image URLs are transformed at runtime
 
 ### Changed
+
 - **Enhanced URL Normalization** - Multi-tier resolution strategy
   1. First attempts to find actual URL in DOM (for v0/Blob Storage)
   2. Falls back to `window.location.origin` conversion
   3. Warns about localhost URLs for better developer experience
 
 ### Fixed
+
 - Relative URLs now work correctly in v0.dev and Vercel Blob Storage environments
 - Mockup generation can access transformed image URLs with hash suffixes
 
 ## [0.1.8] - 2025-10-16
 
 ### Added
+
 - **Automatic URL Normalization** - Relative artwork URLs are now automatically converted to absolute URLs
   - Added `normalizeImageUrl()` utility function in `utils/url.ts`
   - Supports `/images/art.jpg`, `./art.jpg`, `../art.jpg` patterns
@@ -34,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - SSR-safe with helpful warnings
 
 ### Changed
+
 - **Design Generation** - All artwork URLs are normalized in `createDesignForPlacements()`
   - Handles placement designs, provided images, and default URLs
   - Single source of truth for URL normalization
@@ -42,12 +53,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Clear error messages for invalid formats
 
 ### Fixed
+
 - Artwork URLs no longer require absolute paths - relative paths work seamlessly
 - Better developer experience matching Next.js image patterns
 
 ## [0.1.7] - 2025-10-16
 
 ### Changed
+
 - Version bump to maintain parity with @snowcone-app/ui 0.1.11
 - No functional changes in this release
 

package/README.md

@@ -2,7 +2,11 @@
 
 **JavaScript/TypeScript SDK for product mockups and print-on-demand**
 
-Merch provides a simple SDK for fetching product data and generating real-time merchandise mockups. Use it to visualize artwork on t-shirts, posters, mugs, and more.
+A small, isomorphic SDK for fetching product data and building real-time
+merchandise mockup URLs. Use it to visualize artwork on t-shirts, posters, mugs,
+and more — in the browser or on the server.
+
+📖 **Full documentation: [developers.snowcone.app/sdk](https://developers.snowcone.app/sdk)**
 
 ## Installation
 
@@ -33,9 +37,9 @@ const url = getMockupUrl('hoodie-black', {
 // <img src={url} />
 ```
 
-> The `key` is your **publishable** token — public and safe to expose (like
-> Cloudinary's cloud name). It defaults to your `shop.id`. See the security
-> ladder below if you want to lock things down.
+> The `shop` ID is your **publishable** token — public and safe to expose (like
+> Cloudinary's cloud name). It defaults to your `shop.id`. See [Public or
+> signed](#public-or-signed) below if you want to lock things down.
 
 ## Core Functions
 
@@ -94,7 +98,7 @@ const url = getMockupUrl(productCode: string, opts: {
   asset?: string;         // Single default-placement image (get-started shorthand)
   design?: Design;        // Multi-placement: { [placementKey]: Fill } — takes precedence over `asset`
   options?: Record<string, string>; // Variant picks: { size: "m" } → opt.size=m
-  secret?: string;        // Optional: per-shop secret → appends an L3 &signature (server only)
+  secret?: string;        // Optional: per-shop secret → appends a signed &signature (server only)
   base?: string;          // Optional: override the host (default img.snowcone.app)
   width?: number;         // Optional: display width
   view?: string;          // Optional: camera view / mockup scene (alias: `mockup`)
@@ -140,18 +144,16 @@ const cap = getMockupUrl('RQNU68', {
 > accepted (it builds the same URL as `getMockupUrl(productCode, { asset, … })`).
 > Prefer the code-first form above for new code.
 
-### Security ladder
+### Public or signed
 
-The default is open and frictionless; climb only as far as you need:
+The default is open and frictionless. There's one decision to make up front:
 
-| Level | Control | Effect |
-|---|---|---|
-| **L0** (default) | none | public token, any domain, any asset |
-| **L1** | domain allowlist | token only renders from your domains |
-| **L2** | asset allowlist | restrict which asset sources composite |
-| **L3** | signed URLs | URL must carry a valid `&s` (HMAC of a per-shop secret) |
+- **Public** — the Shop ID alone, safe to expose. Lock it to your **asset
+  origins** so a stolen ID can only re-render your own catalog.
+- **Signed** — your server appends an `&signature` (HMAC of a per-shop secret),
+  so only you can mint valid URLs. The secret stays server-side.
 
-For **L3**, pass `secret` (server-side only) and `getMockupUrl` appends the
+To sign, pass `secret` (server-side only) and `getMockupUrl` appends the
 verified `&signature`:
 
 ```typescript
@@ -163,25 +165,62 @@ const url = getMockupUrl('hoodie-black', {
 });
 ```
 
-### React Hooks (Optional)
+See [Public or signed](https://developers.snowcone.app/get-started) for the full picture.
+
+### Realtime: render a saved canvas, no pixel upload
 
-For React applications, use the React-specific exports:
+`getMockupUrl` composites **one** artwork onto a product. For a full multi-layer
+design — the kind the Snowcone canvas editor produces — use a **`RenderSession`**:
+the browser sends a ~1 KB description of the canvas (or just a saved design's id)
+over a WebSocket, and the server rasterizes it and **fetches the referenced assets
+itself**. No per-placement PNG is ever uploaded, so it's fast on thin/mobile
+clients. This is exactly how the Snowcone PDP renders mockups (see ADR-0079).
+
+Authorize the session with a short-lived **grant**. Mint it server-side with a
+secret API key (`sk_…`, scope `mockups:realtime`) so the key never reaches the
+browser. Create the key — and find your publishable `shop.id` — on the
+[API keys page](https://snowcone.app/api-keys):
 
 ```typescript
-import { useRealtimeMockup } from '@snowcone-app/sdk/react';
-
-function MyComponent() {
-  const { mockupUrl, isGenerating } = useRealtimeMockup({
-    productId: 'BEEB77',
-    artworkUrl: artwork.src,
-    placement: 'Front',
-    alignment: 'center'
+// YOUR backend route, e.g. POST /api/realtime/grant
+import { mintRealtimeGrant } from '@snowcone-app/sdk';
+
+export async function POST(req: Request) {
+  const { shop } = await req.json();
+  const grant = await mintRealtimeGrant({
+    apiKey: process.env.SNOWCONE_API_KEY!, // secret — server only
+    shop,                                  // = shop.id (publishable)
   });
-
-  return <img src={mockupUrl} alt="Product mockup" />;
+  return Response.json(grant); // { token, expiresAt }
 }
 ```
 
+In the browser, point a `RenderSession` at that proxy and render. Render a **saved**
+design by id (no canvas JSON needed) or a live `serializeStateForServer(...)` state:
+
+```typescript
+import { RenderSession } from '@snowcone-app/sdk';
+
+const session = new RenderSession({
+  shop: 'YOUR_SHOP_ID',            // publishable, like Stripe pk_
+  grantUrl: '/api/realtime/grant', // your proxy above
+  product: { productId: 'BEEB77', mockupIds: ['Front'] },
+});
+
+session.onMockups((results) => { img.src = results[0].imageUrl; });
+
+// (a) render a SAVED canvas by id — ideal for fulfillment / agents
+await session.renderSavedState('Front', 'design-state-id');
+
+// (b) or render a live canvas state from @snowcone-app/canvas
+// import { serializeStateForServer } from '@snowcone-app/canvas';
+// await session.renderState('Front', serializeStateForServer(canvasState));
+```
+
+React apps can use the lower-level `useRealtimeMockup({ getToken })` hook from
+`@snowcone-app/sdk/react` instead. Full walkthrough:
+[Realtime server-side render](https://developers.snowcone.app/realtime).
+
 ## TypeScript Support
 
 Full TypeScript definitions are included. Import types:
@@ -211,14 +250,14 @@ See: [@snowcone-app/ui on npm](https://www.npmjs.com/package/@snowcone-app/ui)
 
 ## Examples
 
-- [Next.js Example](https://github.com/snowcone-app/ui-components/tree/main/examples/next-ecommerce)
-- [Basic Product Display](https://github.com/snowcone-app/ui-components/tree/main/examples/next-ecommerce/app/demos)
+- [Getting started](https://developers.snowcone.app/get-started)
+- [Mockup URLs reference](https://developers.snowcone.app/mockups)
+- [Live playground](https://developers.snowcone.app/playground)
 
 ## Support
 
-- **Issues:** [GitHub Issues](https://github.com/snowcone-app/ui-components/issues)
-- **Discussions:** [GitHub Discussions](https://github.com/snowcone-app/ui-components/discussions)
-- **Docs:** [developers.snowcone.app](https://developers.snowcone.app)
+- **Docs:** [developers.snowcone.app/sdk](https://developers.snowcone.app/sdk)
+- **Issues:** [GitHub Issues](https://github.com/snowcone-app/snowcone-monorepo/issues)
 
 ## License
 

package/dist/{chunk-6MV7TDTM.js → chunk-D5ZRGKA5.js}

@@ -1,6 +1,9 @@
+// src/realtime/constants.ts
+var REALTIME_WS_URL = "wss://cdn.snowcone.app/realtime";
+
 // src/realtime/websocket.ts
 var RealtimeMockupService = class {
-  constructor(wsUrl = "wss://WS_URL_NOT_CONFIGURED.invalid/realtime") {
+  constructor(wsUrl = REALTIME_WS_URL) {
     this.wsUrl = wsUrl;
   }
   ws = null;
@@ -469,6 +472,32 @@ var RealtimeMockupService = class {
     }
     return true;
   }
+  /**
+   * Render a SAVED canvas by reference (ADR-0079 Phase 4). Sends a `stateId`
+   * instead of inline state; the server resolves it, fetches the referenced
+   * assets, and renders — nothing is uploaded and the client need not hold the
+   * canvas JSON. One-shot (no throttle). Results arrive like any other render.
+   */
+  sendCanvasStateRef(placement, stateId) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasStateRef BLOCKED for "${placement}": ${reason}`);
+      return false;
+    }
+    this.lastSentVersion = ++this.requestVersion;
+    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
+    const message = JSON.stringify({
+      type: "canvas_state",
+      placement,
+      version: this.lastSentVersion,
+      stateId
+    });
+    this.ws.send(message);
+    this.lastBlobSentAt = Date.now();
+    this.addLog(`Sent canvas stateId "${stateId}" for "${placement}" (v${this.lastSentVersion})`, "sent");
+    this.callbacks.onBlobSent?.(placement);
+    return true;
+  }
   sendCanvasStateImmediately(placement, state) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
       console.log(`[WS] sendCanvasStateImmediately ABORTED: ws not open`);
@@ -649,5 +678,6 @@ ${versionToSend}
 };
 
 export {
+  REALTIME_WS_URL,
   RealtimeMockupService
 };

package/dist/index.cjs

@@ -38,6 +38,7 @@ __export(index_exports, {
   DEFAULT_ARTWORK_URL: () => DEFAULT_ARTWORK_URL,
   DEFAULT_ASPECT_RATIO: () => DEFAULT_ASPECT_RATIO,
   DEFAULT_COLOR: () => DEFAULT_COLOR,
+  DEFAULT_GRANT_BASE: () => DEFAULT_GRANT_BASE,
   DEFAULT_MOCKUP_BASE: () => DEFAULT_MOCKUP_BASE,
   DEFAULT_PLACEMENT_DIMENSIONS: () => DEFAULT_PLACEMENT_DIMENSIONS,
   Elements: () => Elements,
@@ -51,7 +52,9 @@ __export(index_exports, {
   ProductLoader: () => ProductLoader,
   ProductProps: () => ProductProps,
   PropertyManager: () => PropertyManager,
+  REALTIME_WS_URL: () => REALTIME_WS_URL,
   RealtimeMockupService: () => RealtimeMockupService,
+  RenderSession: () => RenderSession,
   StandardComponents: () => StandardComponents,
   StandardEvents: () => StandardEvents,
   StateManager: () => StateManager,
@@ -73,6 +76,7 @@ __export(index_exports, {
   createComponent: () => createComponent,
   createContextProvider: () => createContextProvider,
   createDesignForPlacements: () => createDesignForPlacements,
+  createDesignState: () => createDesignState,
   createDevFetcher: () => createDevFetcher,
   createErrorHandler: () => createErrorHandler,
   createEventManager: () => createEventManager,
@@ -95,6 +99,7 @@ __export(index_exports, {
   describeProductPrice: () => describeProductPrice,
   describeProductTitle: () => describeProductTitle,
   extractProductId: () => extractProductId,
+  fetchRealtimeGrant: () => fetchRealtimeGrant,
   filterImagePlacements: () => filterImagePlacements,
   findBestCombination: () => findBestCombination,
   findClosestSnapPoint: () => findClosestSnapPoint,
@@ -118,6 +123,7 @@ __export(index_exports, {
   isValidAlignment: () => isValidAlignment,
   isValidTileCount: () => isValidTileCount,
   listProducts: () => listProducts,
+  mintRealtimeGrant: () => mintRealtimeGrant,
   mockupUrl: () => mockupUrl,
   normalizeChoice: () => normalizeChoice,
   prepareOptionRenderData: () => prepareOptionRenderData,
@@ -4797,9 +4803,12 @@ function createSvelteComponent(descriptor, svelte) {
   };
 }
 
+// src/realtime/constants.ts
+var REALTIME_WS_URL = "wss://cdn.snowcone.app/realtime";
+
 // src/realtime/websocket.ts
 var RealtimeMockupService = class {
-  constructor(wsUrl = "wss://WS_URL_NOT_CONFIGURED.invalid/realtime") {
+  constructor(wsUrl = REALTIME_WS_URL) {
     this.wsUrl = wsUrl;
   }
   ws = null;
@@ -5268,6 +5277,32 @@ var RealtimeMockupService = class {
     }
     return true;
   }
+  /**
+   * Render a SAVED canvas by reference (ADR-0079 Phase 4). Sends a `stateId`
+   * instead of inline state; the server resolves it, fetches the referenced
+   * assets, and renders — nothing is uploaded and the client need not hold the
+   * canvas JSON. One-shot (no throttle). Results arrive like any other render.
+   */
+  sendCanvasStateRef(placement, stateId) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasStateRef BLOCKED for "${placement}": ${reason}`);
+      return false;
+    }
+    this.lastSentVersion = ++this.requestVersion;
+    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
+    const message = JSON.stringify({
+      type: "canvas_state",
+      placement,
+      version: this.lastSentVersion,
+      stateId
+    });
+    this.ws.send(message);
+    this.lastBlobSentAt = Date.now();
+    this.addLog(`Sent canvas stateId "${stateId}" for "${placement}" (v${this.lastSentVersion})`, "sent");
+    this.callbacks.onBlobSent?.(placement);
+    return true;
+  }
   sendCanvasStateImmediately(placement, state) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
       console.log(`[WS] sendCanvasStateImmediately ABORTED: ws not open`);
@@ -5447,6 +5482,198 @@ ${versionToSend}
   }
 };
 
+// src/realtime/grant.ts
+var DEFAULT_GRANT_BASE = "https://api.snowcone.app";
+async function mintRealtimeGrant(opts) {
+  const f = opts.fetch ?? globalThis.fetch;
+  const res = await f(`${opts.base ?? DEFAULT_GRANT_BASE}/realtime/grant`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${opts.apiKey}`
+    },
+    body: JSON.stringify({ shop: opts.shop })
+  });
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    throw new Error(`realtime grant failed: ${res.status}${detail ? ` ${detail}` : ""}`);
+  }
+  return await res.json();
+}
+async function fetchRealtimeGrant(grantUrl, shop, fetchImpl) {
+  const f = fetchImpl ?? globalThis.fetch;
+  const res = await f(grantUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ shop })
+  });
+  if (!res.ok) throw new Error(`realtime grant failed: ${res.status}`);
+  return await res.json();
+}
+
+// src/realtime/session.ts
+var RenderSession = class {
+  svc;
+  opts;
+  product;
+  mockupCb = null;
+  errorCb = null;
+  ready = null;
+  constructor(opts) {
+    if (!opts.shop) throw new Error("RenderSession: `shop` is required");
+    if (!opts.getToken && !opts.grantUrl) {
+      throw new Error("RenderSession: provide `grantUrl` or `getToken` to authorize the session");
+    }
+    this.opts = opts;
+    this.product = opts.product ?? null;
+    this.svc = new RealtimeMockupService(opts.wsUrl ?? REALTIME_WS_URL);
+    const getToken = opts.getToken ?? (() => fetchRealtimeGrant(opts.grantUrl, opts.shop, opts.fetch));
+    this.svc.setTokenProvider(getToken);
+  }
+  /** Register a callback fired whenever rendered mockup URLs update. */
+  onMockups(cb) {
+    this.mockupCb = cb;
+    return this;
+  }
+  /** Register an error callback (server/transport errors). */
+  onError(cb) {
+    this.errorCb = cb;
+    return this;
+  }
+  /** Set or update the product. Sends config immediately if already connected. */
+  setProduct(product) {
+    this.product = product;
+    this.svc.sendConfig(this.toConfig(product));
+  }
+  /**
+   * Connect, authorize, and configure. Resolves once the session is ready to
+   * accept {@link RenderSession.renderState}. Idempotent.
+   */
+  connect() {
+    if (this.ready) return this.ready;
+    if (!this.product) {
+      return Promise.reject(
+        new Error("RenderSession: set a product (via options.product or setProduct) before connect()")
+      );
+    }
+    const product = this.product;
+    this.ready = new Promise((resolve, reject) => {
+      let settled = false;
+      this.svc.setCallbacks({
+        onConnected: () => {
+          this.svc.sendConfig(this.toConfig(product));
+        },
+        onConfigReceived: () => {
+          if (!settled) {
+            settled = true;
+            resolve();
+          }
+        },
+        onMockupRendered: () => {
+          this.mockupCb?.(this.svc.getState().mockupResults);
+        },
+        onAllMockupsRendered: (results) => {
+          this.mockupCb?.(results);
+        },
+        onError: (error) => {
+          this.errorCb?.(error);
+          if (!settled) {
+            settled = true;
+            reject(new Error(error));
+          }
+        }
+      });
+      this.svc.sendConfig(this.toConfig(product));
+      this.svc.connect();
+    });
+    return this.ready;
+  }
+  /**
+   * Render a canvas state for a placement. The server rasterizes it and fetches
+   * the assets referenced inside — no pixels are uploaded. Results arrive via
+   * {@link RenderSession.onMockups}. Safe to call repeatedly (e.g. on every
+   * canvas edit); pass `throttleMs` to debounce during live dragging.
+   *
+   * `placement` is the print-area NAME (e.g. `'Front'`, the product's
+   * `placements[].label`) — a different id from the product's `mockupIds`, and it
+   * must match an artboard in `state`. The server renders only once it has a state
+   * for EVERY required placement, so on a multi-placement product call this once
+   * per placement; a missing one surfaces as an `incomplete_canvas_placements`
+   * error on {@link RenderSession.onError}.
+   *
+   * `state` is the flattened `serializeStateForServer()` shape — NOT the
+   * un-flattened shape `createDesignState` takes.
+   */
+  async renderState(placement, state, throttleMs = 0) {
+    await this.connect();
+    this.svc.sendCanvasState(placement, state, this.product?.mockupIds.length ?? 1, throttleMs);
+  }
+  /**
+   * Render a SAVED canvas by reference (ADR-0079 Phase 4). The server resolves
+   * the `stateId`, fetches the referenced assets, and renders — no pixels are
+   * uploaded and you don't need to hold the canvas JSON. Ideal for re-rendering
+   * a stored design (fulfillment, agents, server-to-server). Results arrive via
+   * {@link RenderSession.onMockups}.
+   */
+  async renderSavedState(placement, stateId) {
+    await this.connect();
+    this.svc.sendCanvasStateRef(placement, stateId);
+  }
+  /** Update only the mockup ids to render (reuses the current state). */
+  updateMockupIds(mockupIds) {
+    if (this.product) this.product = { ...this.product, mockupIds };
+    this.svc.updateMockupIds(mockupIds);
+  }
+  /** Current rendered results. */
+  getMockups() {
+    return this.svc.getState().mockupResults;
+  }
+  /** Close the WebSocket and stop auto-renew. */
+  close() {
+    this.svc.disconnect();
+    this.ready = null;
+  }
+  /** Escape hatch: the underlying low-level service. */
+  get service() {
+    return this.svc;
+  }
+  toConfig(product) {
+    return {
+      productId: product.productId,
+      mockupIds: product.mockupIds,
+      // shop comes from the grant token server-side; sent for completeness.
+      shop: this.opts.shop,
+      // WebSocketConfig requires these; the server treats empty variant as "none".
+      variantId: product.variantId ?? "",
+      width: product.width ?? 1e3,
+      ...product.placementSettings ? { placementSettings: product.placementSettings } : {}
+    };
+  }
+};
+
+// src/realtime/design-state.ts
+var TRANSPARENT_1X1_PNG = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==";
+async function createDesignState(input) {
+  const f = input.fetch ?? globalThis.fetch;
+  const res = await f(`${input.base ?? DEFAULT_GRANT_BASE}/snowcone/design-states`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      productId: input.productId,
+      stateJson: JSON.stringify(input.state),
+      previewBase64: input.previewBase64 ?? TRANSPARENT_1X1_PNG
+    })
+  });
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    throw new Error(`createDesignState failed: ${res.status}${detail ? ` ${detail}` : ""}`);
+  }
+  const body = await res.json();
+  const ds = body?.designState;
+  if (!ds?.id) throw new Error("createDesignState: response missing designState.id");
+  return { stateId: ds.id, stateUrl: ds.stateUrl ?? "", previewUrl: ds.previewUrl ?? "" };
+}
+
 // src/index.ts
 function getFetcher(config) {
   return config?.fetcher || globalThis.fetch.bind(globalThis);
@@ -5534,6 +5761,7 @@ function createClient(config) {
   DEFAULT_ARTWORK_URL,
   DEFAULT_ASPECT_RATIO,
   DEFAULT_COLOR,
+  DEFAULT_GRANT_BASE,
   DEFAULT_MOCKUP_BASE,
   DEFAULT_PLACEMENT_DIMENSIONS,
   Elements,
@@ -5547,7 +5775,9 @@ function createClient(config) {
   ProductLoader,
   ProductProps,
   PropertyManager,
+  REALTIME_WS_URL,
   RealtimeMockupService,
+  RenderSession,
   StandardComponents,
   StandardEvents,
   StateManager,
@@ -5569,6 +5799,7 @@ function createClient(config) {
   createComponent,
   createContextProvider,
   createDesignForPlacements,
+  createDesignState,
   createDevFetcher,
   createErrorHandler,
   createEventManager,
@@ -5591,6 +5822,7 @@ function createClient(config) {
   describeProductPrice,
   describeProductTitle,
   extractProductId,
+  fetchRealtimeGrant,
   filterImagePlacements,
   findBestCombination,
   findClosestSnapPoint,
@@ -5614,6 +5846,7 @@ function createClient(config) {
   isValidAlignment,
   isValidTileCount,
   listProducts,
+  mintRealtimeGrant,
   mockupUrl,
   normalizeChoice,
   prepareOptionRenderData,