@snowcone-app/ui 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",
@@ -103,7 +103,7 @@
     "react-instantsearch": "^7.15.5",
     "react-zoom-pan-pinch": "^3.6.4",
     "tailwind-merge": "^3.0.0",
-    "@snowcone-app/sdk": "0.16.0"
+    "@snowcone-app/sdk": "0.17.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

package/src/composed/HeroProductImage.tsx

@@ -1044,6 +1044,20 @@ export const HeroProductImage = memo(function HeroProductImage({
         />
       )}
 
+      {/* Server render error badge — the realtime renderer rejected the last
+          render (e.g. asset_not_allowed). The stale image above stays visible
+          on purpose (stale + clearly marked beats blank); the typed code is
+          exposed via data-render-error so agents/tests can assert on it. */}
+      {realtimeContext?.renderError && (
+        <div
+          role="alert"
+          data-render-error={realtimeContext.renderError.code}
+          className="absolute inset-x-0 bottom-0 z-20 bg-red-600/90 text-white text-xs font-medium px-3 py-2 pointer-events-none"
+        >
+          {`Render blocked: ${realtimeContext.renderError.code} — ${realtimeContext.renderError.message}`}
+        </div>
+      )}
+
       {/* Previous image — fades out during crossfade */}
       {prevUrl && (
         <img

package/src/patterns/RealtimeProvider.tsx

@@ -38,6 +38,7 @@ import React, {
 } from "react";
 import { useRealtimeMockup } from "@snowcone-app/sdk/react";
 import { resolveVariantId as resolveVariantIdUtil } from "@snowcone-app/sdk";
+import type { RealtimeRenderError } from "@snowcone-app/sdk";
 import { readEnv } from "../lib/env";
 import { useProductOptional } from "./Product";
 import type { ReactProductContext } from "./Product";
@@ -69,6 +70,15 @@ export interface RealtimeContextValue {
   // Mockup results (use subscriptions for performance-critical components)
   mockupResults: MockupResult[];
 
+  /**
+   * Most recent server render error (stable machine-readable `code` +
+   * human message, e.g. `{code: 'asset_not_allowed', ...}`). Cleared when a
+   * later render succeeds. While set, `mockupResults` still holds the LAST
+   * GOOD renders — surface the error visibly (badge the stale mockup) rather
+   * than blanking it or logging console-only.
+   */
+  renderError: RealtimeRenderError | null;
+
   // Debug/tracking state (now refs, won't trigger re-renders)
   isPendingMockups: boolean;
   canvasBlobsSent: number;
@@ -328,8 +338,10 @@ export function RealtimeProvider({
     },
     onAllMockupsRendered: (results) => {
     },
-    onError: (error) => {
-      console.error("[RealtimeProvider] Error:", error);
+    onError: (error, detail) => {
+      // Logged for traces; the actionable surface is `renderError` on the
+      // context (and the hook state), which consumers must render visibly.
+      console.error(`[RealtimeProvider] Render error [${detail.code}]:`, error);
     },
   });
 
@@ -341,6 +353,7 @@ export function RealtimeProvider({
   const {
     isConnected,
     isConfigured,
+    renderError,
     mockupResults: rawMockupResults,
     sendCanvasBlob: sendCanvasBlobRaw,
     sendCanvasState: sendCanvasStateRaw,
@@ -1067,6 +1080,7 @@ export function RealtimeProvider({
       isEnabled,
       isConnected,
       isConfigured,
+      renderError,
       // Read from ref - this is a snapshot at render time, NOT reactive
       // For reactive updates, use getMockupResultsImmediate() or subscribe functions
       get mockupResults() {
@@ -1110,6 +1124,7 @@ export function RealtimeProvider({
       isEnabled,
       isConnected,
       isConfigured,
+      renderError,
       // mockupResults removed from deps - it's a getter that reads from ref
       canvasExportSize,
       mockupWidth,