@seed-ship/mcp-ui-solid 5.3.1 → 5.5.0

package/dist/utils/logger.js

@@ -1,4 +1,24 @@
-const isDev = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+let debugOverride = null;
+function readEnvFlag() {
+  if (typeof process !== "undefined" && process.env) {
+    if (process.env.MCP_UI_DEBUG === "true") return true;
+    if (process.env.NODE_ENV !== "production") return true;
+  }
+  if (typeof globalThis !== "undefined" && globalThis.__MCP_UI_DEBUG__ === true) {
+    return true;
+  }
+  return false;
+}
+function isDebugActive() {
+  if (debugOverride !== null) return debugOverride;
+  return readEnvFlag();
+}
+function setDebugMode(enabled) {
+  debugOverride = enabled;
+}
+function isDebugEnabled() {
+  return isDebugActive();
+}
 function formatLogMessage(feature, message, context) {
   const contextStr = context ? ` ${JSON.stringify(context)}` : "";
   return `[@seed-ship/mcp-ui-solid:${feature}] ${message}${contextStr}`;
@@ -6,12 +26,12 @@ function formatLogMessage(feature, message, context) {
 function createLogger(feature) {
   return {
     info(message, context) {
-      if (isDev) {
+      if (isDebugActive()) {
         console.info(formatLogMessage(feature, message, context));
       }
     },
     warn(message, context) {
-      if (isDev) {
+      if (isDebugActive()) {
         console.warn(formatLogMessage(feature, message, context));
       }
     },
@@ -19,13 +39,15 @@ function createLogger(feature) {
       console.error(formatLogMessage(feature, message, context));
     },
     debug(message, context) {
-      if (isDev) {
+      if (isDebugActive()) {
         console.debug(formatLogMessage(feature, message, context));
       }
     }
   };
 }
 export {
-  createLogger
+  createLogger,
+  isDebugEnabled,
+  setDebugMode
 };
 //# sourceMappingURL=logger.js.map

package/dist/utils/logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"logger.js","sources":["../../src/utils/logger.ts"],"sourcesContent":["/**\n * Simple internal logger utility\n *\n * Provides basic logging functionality for the package.\n * Consumers can disable logging by setting NODE_ENV=production\n * or by implementing their own logging solution.\n */\n\nconst isDev = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'\n\nexport interface Logger {\n  info(message: string, context?: Record<string, unknown>): void\n  warn(message: string, context?: Record<string, unknown>): void\n  error(message: string, context?: Record<string, unknown>): void\n  debug(message: string, context?: Record<string, unknown>): void\n}\n\nfunction formatLogMessage(\n  feature: string,\n  message: string,\n  context?: Record<string, unknown>\n): string {\n  const contextStr = context ? ` ${JSON.stringify(context)}` : ''\n  return `[@seed-ship/mcp-ui-solid:${feature}] ${message}${contextStr}`\n}\n\n/**\n * Creates a feature-scoped logger\n *\n * @param feature - Feature name for log prefixing\n * @returns Logger instance\n *\n * @example\n * ```typescript\n * const logger = createLogger('my-component')\n * logger.info('Component mounted', { componentId: '123' })\n * ```\n */\nexport function createLogger(feature: string): Logger {\n  return {\n    info(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.info(formatLogMessage(feature, message, context))\n      }\n    },\n\n    warn(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.warn(formatLogMessage(feature, message, context))\n      }\n    },\n\n    error(message: string, context?: Record<string, unknown>) {\n      // Always log errors, even in production\n      console.error(formatLogMessage(feature, message, context))\n    },\n\n    debug(message: string, context?: Record<string, unknown>) {\n      if (isDev) {\n        console.debug(formatLogMessage(feature, message, context))\n      }\n    },\n  }\n}\n\n/**\n * No-op logger for testing or when logging is disabled\n */\nexport const noopLogger: Logger = {\n  info: () => {},\n  warn: () => {},\n  error: () => {},\n  debug: () => {},\n}\n"],"names":[],"mappings":"AAQA,MAAM,QAAQ,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa;AASzE,SAAS,iBACP,SACA,SACA,SACQ;AACR,QAAM,aAAa,UAAU,IAAI,KAAK,UAAU,OAAO,CAAC,KAAK;AAC7D,SAAO,4BAA4B,OAAO,KAAK,OAAO,GAAG,UAAU;AACrE;AAcO,SAAS,aAAa,SAAyB;AACpD,SAAO;AAAA,IACL,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,KAAK,SAAiB,SAAmC;AACvD,UAAI,OAAO;AACT,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,MAAM,SAAiB,SAAmC;AAExD,cAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,IAC3D;AAAA,IAEA,MAAM,SAAiB,SAAmC;AACxD,UAAI,OAAO;AACT,gBAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"logger.js","sources":["../../src/utils/logger.ts"],"sourcesContent":["/**\n * Simple internal logger utility\n *\n * Logging is enabled when EITHER:\n *   1. `process.env.NODE_ENV !== 'production'` (dev build), OR\n *   2. `process.env.MCP_UI_DEBUG === 'true'` (server-side opt-in for prod), OR\n *   3. `globalThis.__MCP_UI_DEBUG__ === true` (browser-side runtime toggle), OR\n *   4. `setDebugMode(true)` has been called from app code.\n *\n * `error` always logs regardless of mode.\n *\n * @see setDebugMode, isDebugEnabled — runtime controls (v5.4.0)\n */\n\ndeclare global {\n  // Browser-side runtime flag — settable from devtools console:\n  //   `globalThis.__MCP_UI_DEBUG__ = true`\n  // eslint-disable-next-line no-var\n  var __MCP_UI_DEBUG__: boolean | undefined\n}\n\nlet debugOverride: boolean | null = null\n\nfunction readEnvFlag(): boolean {\n  if (typeof process !== 'undefined' && process.env) {\n    if (process.env.MCP_UI_DEBUG === 'true') return true\n    if (process.env.NODE_ENV !== 'production') return true\n  }\n  if (typeof globalThis !== 'undefined' && globalThis.__MCP_UI_DEBUG__ === true) {\n    return true\n  }\n  return false\n}\n\nfunction isDebugActive(): boolean {\n  if (debugOverride !== null) return debugOverride\n  return readEnvFlag()\n}\n\n/**\n * Programmatically enable/disable verbose logging at runtime.\n *\n * Pass `null` to clear the override and fall back to env-based detection.\n *\n * @example\n * ```ts\n * import { setDebugMode } from '@seed-ship/mcp-ui-solid'\n * setDebugMode(true)   // turn on verbose logs\n * setDebugMode(false)  // turn off (overrides NODE_ENV=development)\n * setDebugMode(null)   // restore env-based behavior\n * ```\n */\nexport function setDebugMode(enabled: boolean | null): void {\n  debugOverride = enabled\n}\n\n/**\n * Whether verbose logging is currently active (env + override combined).\n */\nexport function isDebugEnabled(): boolean {\n  return isDebugActive()\n}\n\nexport interface Logger {\n  info(message: string, context?: Record<string, unknown>): void\n  warn(message: string, context?: Record<string, unknown>): void\n  error(message: string, context?: Record<string, unknown>): void\n  debug(message: string, context?: Record<string, unknown>): void\n}\n\nfunction formatLogMessage(\n  feature: string,\n  message: string,\n  context?: Record<string, unknown>\n): string {\n  const contextStr = context ? ` ${JSON.stringify(context)}` : ''\n  return `[@seed-ship/mcp-ui-solid:${feature}] ${message}${contextStr}`\n}\n\n/**\n * Creates a feature-scoped logger\n *\n * @param feature - Feature name for log prefixing\n * @returns Logger instance\n *\n * @example\n * ```typescript\n * const logger = createLogger('my-component')\n * logger.info('Component mounted', { componentId: '123' })\n * ```\n */\nexport function createLogger(feature: string): Logger {\n  return {\n    info(message: string, context?: Record<string, unknown>) {\n      if (isDebugActive()) {\n        console.info(formatLogMessage(feature, message, context))\n      }\n    },\n\n    warn(message: string, context?: Record<string, unknown>) {\n      if (isDebugActive()) {\n        console.warn(formatLogMessage(feature, message, context))\n      }\n    },\n\n    error(message: string, context?: Record<string, unknown>) {\n      // Always log errors, even in production\n      console.error(formatLogMessage(feature, message, context))\n    },\n\n    debug(message: string, context?: Record<string, unknown>) {\n      if (isDebugActive()) {\n        console.debug(formatLogMessage(feature, message, context))\n      }\n    },\n  }\n}\n\n/**\n * No-op logger for testing or when logging is disabled\n */\nexport const noopLogger: Logger = {\n  info: () => {},\n  warn: () => {},\n  error: () => {},\n  debug: () => {},\n}\n"],"names":[],"mappings":"AAqBA,IAAI,gBAAgC;AAEpC,SAAS,cAAuB;AAC9B,MAAI,OAAO,YAAY,eAAe,QAAQ,KAAK;AACjD,QAAI,QAAQ,IAAI,iBAAiB,OAAQ,QAAO;AAChD,QAAI,QAAQ,IAAI,aAAa,aAAc,QAAO;AAAA,EACpD;AACA,MAAI,OAAO,eAAe,eAAe,WAAW,qBAAqB,MAAM;AAC7E,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,SAAS,gBAAyB;AAChC,MAAI,kBAAkB,KAAM,QAAO;AACnC,SAAO,YAAA;AACT;AAeO,SAAS,aAAa,SAA+B;AAC1D,kBAAgB;AAClB;AAKO,SAAS,iBAA0B;AACxC,SAAO,cAAA;AACT;AASA,SAAS,iBACP,SACA,SACA,SACQ;AACR,QAAM,aAAa,UAAU,IAAI,KAAK,UAAU,OAAO,CAAC,KAAK;AAC7D,SAAO,4BAA4B,OAAO,KAAK,OAAO,GAAG,UAAU;AACrE;AAcO,SAAS,aAAa,SAAyB;AACpD,SAAO;AAAA,IACL,KAAK,SAAiB,SAAmC;AACvD,UAAI,iBAAiB;AACnB,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,KAAK,SAAiB,SAAmC;AACvD,UAAI,iBAAiB;AACnB,gBAAQ,KAAK,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC1D;AAAA,IACF;AAAA,IAEA,MAAM,SAAiB,SAAmC;AAExD,cAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,IAC3D;AAAA,IAEA,MAAM,SAAiB,SAAmC;AACxD,UAAI,iBAAiB;AACnB,gBAAQ,MAAM,iBAAiB,SAAS,SAAS,OAAO,CAAC;AAAA,MAC3D;AAAA,IACF;AAAA,EAAA;AAEJ;"}

package/dist/utils/perf.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const PERF_PREFIX = "mcp-ui:component:";
+function hasPerf() {
+  return typeof performance !== "undefined" && typeof performance.mark === "function";
+}
+function markRenderStart(componentId) {
+  if (!hasPerf()) return;
+  try {
+    performance.mark(`${PERF_PREFIX}${componentId}:render-start`);
+  } catch {
+  }
+}
+function markRenderEnd(componentId) {
+  if (!hasPerf()) return;
+  try {
+    performance.mark(`${PERF_PREFIX}${componentId}:render-end`);
+    if (typeof performance.measure === "function") {
+      try {
+        performance.measure(
+          `${PERF_PREFIX}${componentId}:render`,
+          `${PERF_PREFIX}${componentId}:render-start`,
+          `${PERF_PREFIX}${componentId}:render-end`
+        );
+      } catch {
+      }
+    }
+  } catch {
+  }
+}
+exports.PERF_PREFIX = PERF_PREFIX;
+exports.markRenderEnd = markRenderEnd;
+exports.markRenderStart = markRenderStart;
+//# sourceMappingURL=perf.cjs.map

package/dist/utils/perf.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.cjs","sources":["../../src/utils/perf.ts"],"sourcesContent":["/**\n * Performance markers for component renders (v5.4.0)\n *\n * Emits `performance.mark()` entries that show up automatically in Chrome\n * DevTools \"Performance\" panel under user timings. Consumers can also\n * query them via `performance.getEntriesByName(...)` for custom tracing.\n *\n * Naming convention :\n *   `mcp-ui:component:<id>:render-start`\n *   `mcp-ui:component:<id>:render-end`\n *   `mcp-ui:component:<id>:render`         (a `measure` between the two)\n *\n * Always-on: marks are cheap (sub-microsecond) and only matter when a\n * profiler is recording. SSR-safe (`performance` is guarded).\n */\n\nexport const PERF_PREFIX = 'mcp-ui:component:'\n\nfunction hasPerf(): boolean {\n  return typeof performance !== 'undefined' && typeof performance.mark === 'function'\n}\n\nexport function markRenderStart(componentId: string): void {\n  if (!hasPerf()) return\n  try {\n    performance.mark(`${PERF_PREFIX}${componentId}:render-start`)\n  } catch {\n    // Ignore — performance.mark can throw on malformed names; not worth crashing the render.\n  }\n}\n\nexport function markRenderEnd(componentId: string): void {\n  if (!hasPerf()) return\n  try {\n    performance.mark(`${PERF_PREFIX}${componentId}:render-end`)\n    if (typeof performance.measure === 'function') {\n      try {\n        performance.measure(\n          `${PERF_PREFIX}${componentId}:render`,\n          `${PERF_PREFIX}${componentId}:render-start`,\n          `${PERF_PREFIX}${componentId}:render-end`\n        )\n      } catch {\n        // Start mark may be missing if the render path was short-circuited — ignore.\n      }\n    }\n  } catch {\n    // Ignore.\n  }\n}\n"],"names":[],"mappings":";;AAgBO,MAAM,cAAc;AAE3B,SAAS,UAAmB;AAC1B,SAAO,OAAO,gBAAgB,eAAe,OAAO,YAAY,SAAS;AAC3E;AAEO,SAAS,gBAAgB,aAA2B;AACzD,MAAI,CAAC,UAAW;AAChB,MAAI;AACF,gBAAY,KAAK,GAAG,WAAW,GAAG,WAAW,eAAe;AAAA,EAC9D,QAAQ;AAAA,EAER;AACF;AAEO,SAAS,cAAc,aAA2B;AACvD,MAAI,CAAC,UAAW;AAChB,MAAI;AACF,gBAAY,KAAK,GAAG,WAAW,GAAG,WAAW,aAAa;AAC1D,QAAI,OAAO,YAAY,YAAY,YAAY;AAC7C,UAAI;AACF,oBAAY;AAAA,UACV,GAAG,WAAW,GAAG,WAAW;AAAA,UAC5B,GAAG,WAAW,GAAG,WAAW;AAAA,UAC5B,GAAG,WAAW,GAAG,WAAW;AAAA,QAAA;AAAA,MAEhC,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,QAAQ;AAAA,EAER;AACF;;;;"}

package/dist/utils/perf.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Performance markers for component renders (v5.4.0)
+ *
+ * Emits `performance.mark()` entries that show up automatically in Chrome
+ * DevTools "Performance" panel under user timings. Consumers can also
+ * query them via `performance.getEntriesByName(...)` for custom tracing.
+ *
+ * Naming convention :
+ *   `mcp-ui:component:<id>:render-start`
+ *   `mcp-ui:component:<id>:render-end`
+ *   `mcp-ui:component:<id>:render`         (a `measure` between the two)
+ *
+ * Always-on: marks are cheap (sub-microsecond) and only matter when a
+ * profiler is recording. SSR-safe (`performance` is guarded).
+ */
+export declare const PERF_PREFIX = "mcp-ui:component:";
+export declare function markRenderStart(componentId: string): void;
+export declare function markRenderEnd(componentId: string): void;
+//# sourceMappingURL=perf.d.ts.map

package/dist/utils/perf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.d.ts","sourceRoot":"","sources":["../../src/utils/perf.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,WAAW,sBAAsB,CAAA;AAM9C,wBAAgB,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAOzD;AAED,wBAAgB,aAAa,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAkBvD"}

package/dist/utils/perf.js

@@ -0,0 +1,34 @@
+const PERF_PREFIX = "mcp-ui:component:";
+function hasPerf() {
+  return typeof performance !== "undefined" && typeof performance.mark === "function";
+}
+function markRenderStart(componentId) {
+  if (!hasPerf()) return;
+  try {
+    performance.mark(`${PERF_PREFIX}${componentId}:render-start`);
+  } catch {
+  }
+}
+function markRenderEnd(componentId) {
+  if (!hasPerf()) return;
+  try {
+    performance.mark(`${PERF_PREFIX}${componentId}:render-end`);
+    if (typeof performance.measure === "function") {
+      try {
+        performance.measure(
+          `${PERF_PREFIX}${componentId}:render`,
+          `${PERF_PREFIX}${componentId}:render-start`,
+          `${PERF_PREFIX}${componentId}:render-end`
+        );
+      } catch {
+      }
+    }
+  } catch {
+  }
+}
+export {
+  PERF_PREFIX,
+  markRenderEnd,
+  markRenderStart
+};
+//# sourceMappingURL=perf.js.map

package/dist/utils/perf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"perf.js","sources":["../../src/utils/perf.ts"],"sourcesContent":["/**\n * Performance markers for component renders (v5.4.0)\n *\n * Emits `performance.mark()` entries that show up automatically in Chrome\n * DevTools \"Performance\" panel under user timings. Consumers can also\n * query them via `performance.getEntriesByName(...)` for custom tracing.\n *\n * Naming convention :\n *   `mcp-ui:component:<id>:render-start`\n *   `mcp-ui:component:<id>:render-end`\n *   `mcp-ui:component:<id>:render`         (a `measure` between the two)\n *\n * Always-on: marks are cheap (sub-microsecond) and only matter when a\n * profiler is recording. SSR-safe (`performance` is guarded).\n */\n\nexport const PERF_PREFIX = 'mcp-ui:component:'\n\nfunction hasPerf(): boolean {\n  return typeof performance !== 'undefined' && typeof performance.mark === 'function'\n}\n\nexport function markRenderStart(componentId: string): void {\n  if (!hasPerf()) return\n  try {\n    performance.mark(`${PERF_PREFIX}${componentId}:render-start`)\n  } catch {\n    // Ignore — performance.mark can throw on malformed names; not worth crashing the render.\n  }\n}\n\nexport function markRenderEnd(componentId: string): void {\n  if (!hasPerf()) return\n  try {\n    performance.mark(`${PERF_PREFIX}${componentId}:render-end`)\n    if (typeof performance.measure === 'function') {\n      try {\n        performance.measure(\n          `${PERF_PREFIX}${componentId}:render`,\n          `${PERF_PREFIX}${componentId}:render-start`,\n          `${PERF_PREFIX}${componentId}:render-end`\n        )\n      } catch {\n        // Start mark may be missing if the render path was short-circuited — ignore.\n      }\n    }\n  } catch {\n    // Ignore.\n  }\n}\n"],"names":[],"mappings":"AAgBO,MAAM,cAAc;AAE3B,SAAS,UAAmB;AAC1B,SAAO,OAAO,gBAAgB,eAAe,OAAO,YAAY,SAAS;AAC3E;AAEO,SAAS,gBAAgB,aAA2B;AACzD,MAAI,CAAC,UAAW;AAChB,MAAI;AACF,gBAAY,KAAK,GAAG,WAAW,GAAG,WAAW,eAAe;AAAA,EAC9D,QAAQ;AAAA,EAER;AACF;AAEO,SAAS,cAAc,aAA2B;AACvD,MAAI,CAAC,UAAW;AAChB,MAAI;AACF,gBAAY,KAAK,GAAG,WAAW,GAAG,WAAW,aAAa;AAC1D,QAAI,OAAO,YAAY,YAAY,YAAY;AAC7C,UAAI;AACF,oBAAY;AAAA,UACV,GAAG,WAAW,GAAG,WAAW;AAAA,UAC5B,GAAG,WAAW,GAAG,WAAW;AAAA,UAC5B,GAAG,WAAW,GAAG,WAAW;AAAA,QAAA;AAAA,MAEhC,QAAQ;AAAA,MAER;AAAA,IACF;AAAA,EACF,QAAQ;AAAA,EAER;AACF;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-ship/mcp-ui-solid",
-  "version": "5.3.1",
+  "version": "5.5.0",
   "description": "SolidJS components for rendering MCP-generated UI resources",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -142,7 +142,8 @@
     "@types/dompurify": "^3.0.5",
     "dompurify": "^3.4.1",
     "marked": "^16.3.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "@seed-ship/mcp-ui-spec": "^5.0.1"
   },
   "devDependencies": {
     "@size-limit/esbuild": "^12.0.0",

package/src/components/StreamingUIRenderer.tsx

@@ -26,12 +26,20 @@ import { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamin
 import type { UIComponent, RendererError } from '../types'
 import { validateComponent } from '../services/validation'
 import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
+import { markRenderStart, markRenderEnd } from '../utils/perf'
+import type { ValidationErrorMode } from './UIResourceRenderer'
 
 export interface StreamingUIRendererProps extends UseStreamingUIOptions {
   class?: string
   showProgress?: boolean
   showMetadata?: boolean
   onRenderError?: (error: RendererError) => void
+  /**
+   * How to react when a streamed component fails `validateComponent()`
+   * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0
+   * behavior). See `ValidationErrorMode` in `UIResourceRenderer`.
+   */
+  errorMode?: ValidationErrorMode
 }
 
 /**
@@ -41,7 +49,12 @@ export interface StreamingUIRendererProps extends UseStreamingUIOptions {
 function StreamingComponentRenderer(props: {
   component: UIComponent
   onError?: (error: RendererError) => void
+  errorMode?: ValidationErrorMode
 }) {
+  // Performance marks (v5.4.0) — see utils/perf.ts
+  markRenderStart(props.component.id)
+  onMount(() => markRenderEnd(props.component.id))
+
   // Validate component before rendering
   const validation = validateComponent(props.component)
   if (!validation.valid) {
@@ -52,11 +65,46 @@ function StreamingComponentRenderer(props: {
       details: validation.errors,
     })
 
+    const mode: ValidationErrorMode = props.errorMode ?? 'block'
+    const firstError = validation.errors?.[0]?.message || 'Unknown validation error'
+
+    if (mode === 'silent') {
+      return null
+    }
+
+    if (mode === 'inline-warn') {
+      return (
+        <div
+          class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"
+          role="alert"
+          aria-label="Component validation warning"
+          title={firstError}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-3.5 h-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <span>Invalid {props.component.type}</span>
+        </div>
+      )
+    }
+
     return (
       <div class="w-full bg-error-subtle border border-border-error rounded-lg p-4">
         <p class="text-sm font-medium text-error-primary">Validation Error</p>
         <p class="text-xs text-text-secondary mt-1">
-          {validation.errors?.[0]?.message || 'Unknown validation error'}
+          {firstError}
         </p>
       </div>
     )
@@ -214,7 +262,11 @@ export function StreamingUIRenderer(props: StreamingUIRendererProps) {
                 `}
                 style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}
               >
-                <StreamingComponentRenderer component={component} onError={props.onRenderError} />
+                <StreamingComponentRenderer
+                  component={component}
+                  onError={props.onRenderError}
+                  errorMode={props.errorMode}
+                />
               </div>
             )
           }}

package/src/components/UIResourceRenderer.errorMode.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * Tests for `errorMode` prop on `<UIResourceRenderer>` — v5.4.0 (B.3)
+ */
+
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, cleanup } from '@solidjs/testing-library'
+import { UIResourceRenderer } from './UIResourceRenderer'
+import type { UIComponent, RendererError } from '../types'
+
+// A component that fails `validateComponent()` — colStart=99 violates the 1-12 grid range
+const invalidComponent: UIComponent = {
+  id: 'broken-1',
+  type: 'metric',
+  position: { colStart: 99, colSpan: 1 },
+  params: { value: 42 },
+}
+
+const validComponent: UIComponent = {
+  id: 'ok-1',
+  type: 'metric',
+  position: { colStart: 1, colSpan: 6 },
+  params: { title: 'OK', value: 42 },
+}
+
+describe('<UIResourceRenderer errorMode> — v5.4.0', () => {
+  beforeEach(() => {
+    cleanup()
+  })
+
+  it("default (no prop) = 'block': renders the red Validation Error card", () => {
+    const { getByText } = render(() => <UIResourceRenderer content={invalidComponent} />)
+    expect(getByText('Validation Error')).toBeTruthy()
+  })
+
+  it("errorMode='block' explicitly: same as default", () => {
+    const { getByText } = render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="block" />
+    ))
+    expect(getByText('Validation Error')).toBeTruthy()
+  })
+
+  it("errorMode='inline-warn': renders compact yellow chip, no big red card", () => {
+    const { container, queryByText } = render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="inline-warn" />
+    ))
+    expect(queryByText('Validation Error')).toBeNull()
+
+    const chip = container.querySelector('[role="alert"][aria-label="Component validation warning"]')
+    expect(chip).toBeTruthy()
+    expect(chip!.textContent).toContain('Invalid metric')
+    // tooltip carries the error message
+    expect(chip!.getAttribute('title')).toBeTruthy()
+  })
+
+  it("errorMode='silent': renders nothing in the slot, no error UI", () => {
+    const { container, queryByText, queryByRole } = render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="silent" />
+    ))
+    expect(queryByText('Validation Error')).toBeNull()
+    expect(queryByRole('alert')).toBeNull()
+    // The slot wrapper is still in the DOM (grid layout) but has no error UI inside
+    expect(container.querySelector('[role="alert"]')).toBeNull()
+  })
+
+  it("onError still fires for ALL three modes (consumer can always log)", () => {
+    const errors: RendererError[] = []
+    const onError = (e: RendererError) => errors.push(e)
+
+    cleanup()
+    render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="block" onError={onError} />
+    ))
+    cleanup()
+    render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="inline-warn" onError={onError} />
+    ))
+    cleanup()
+    render(() => (
+      <UIResourceRenderer content={invalidComponent} errorMode="silent" onError={onError} />
+    ))
+
+    expect(errors.length).toBe(3)
+    expect(errors.every((e) => e.type === 'validation')).toBe(true)
+    expect(errors.every((e) => e.componentId === 'broken-1')).toBe(true)
+  })
+
+  it("valid components render normally regardless of errorMode", () => {
+    const { queryByText } = render(() => (
+      <UIResourceRenderer content={validComponent} errorMode="inline-warn" />
+    ))
+    // No error UI for a valid component
+    expect(queryByText('Validation Error')).toBeNull()
+    expect(queryByText('Invalid metric')).toBeNull()
+  })
+})

package/src/components/UIResourceRenderer.tsx

@@ -4,11 +4,28 @@
  */
 
 import DOMPurify from 'dompurify'
-import { Component, createSignal, Show, For, createMemo, createEffect } from 'solid-js'
+import { Component, createSignal, Show, For, createMemo, createEffect, onMount } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import type { UIComponent, UILayout, RendererError, TableVirtualizeOptions } from '../types'
 import { validateComponent, DEFAULT_RESOURCE_LIMITS, getIframeSandbox } from '../services/validation'
 import { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'
+import { markRenderStart, markRenderEnd } from '../utils/perf'
+
+/**
+ * How `<UIResourceRenderer>` reacts when `validateComponent()` rejects a
+ * component (v5.4.0).
+ *
+ * - `'block'`  : full-slot red error card (default — backward compatible)
+ * - `'inline-warn'` : compact yellow chip in the slot, tooltip carries the
+ *                    error message — keeps the surrounding layout clean
+ *                    (e.g. inside a chat message)
+ * - `'silent'` : render nothing in the slot; `onError` still fires so the
+ *                consumer can log/alert
+ *
+ * Runtime errors caught by `<GenerativeUIErrorBoundary>` are NOT affected by
+ * this prop — they always show the boundary's fallback UI.
+ */
+export type ValidationErrorMode = 'block' | 'inline-warn' | 'silent'
 import { GridRenderer } from './GridRenderer'
 import { FooterRenderer } from './FooterRenderer'
 import { CarouselRenderer } from './CarouselRenderer'
@@ -93,6 +110,15 @@ export interface UIResourceRendererProps {
    * Custom CSS class
    */
   class?: string
+
+  /**
+   * How to react when a component fails `validateComponent()` (v5.4.0).
+   * Defaults to `'block'` (replaces the slot with a red error card —
+   * the pre-v5.4.0 behavior).
+   *
+   * @see ValidationErrorMode
+   */
+  errorMode?: ValidationErrorMode
 }
 
 /**
@@ -1102,7 +1128,13 @@ function LinkRenderer(props: { component: UIComponent }) {
 function ComponentRenderer(props: {
   component: UIComponent
   onError?: (error: RendererError) => void
+  errorMode?: ValidationErrorMode
 }) {
+  // Performance marks — visible in Chrome DevTools "Performance" panel under
+  // user timings. Always-on, SSR-safe (see utils/perf.ts).
+  markRenderStart(props.component.id)
+  onMount(() => markRenderEnd(props.component.id))
+
   // Validate component before rendering
   const validation = validateComponent(props.component)
   if (!validation.valid) {
@@ -1113,11 +1145,47 @@ function ComponentRenderer(props: {
       details: validation.errors,
     })
 
+    const mode: ValidationErrorMode = props.errorMode ?? 'block'
+    const firstError = validation.errors?.[0]?.message || 'Unknown validation error'
+
+    if (mode === 'silent') {
+      return null
+    }
+
+    if (mode === 'inline-warn') {
+      return (
+        <div
+          class="inline-flex items-center gap-1.5 px-2 py-1 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-xs text-yellow-800 dark:text-yellow-200"
+          role="alert"
+          aria-label="Component validation warning"
+          title={firstError}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-3.5 h-3.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+            <line x1="12" y1="9" x2="12" y2="13" />
+            <line x1="12" y1="17" x2="12.01" y2="17" />
+          </svg>
+          <span>Invalid {props.component.type}</span>
+        </div>
+      )
+    }
+
+    // mode === 'block' (default, pre-v5.4.0 behavior)
     return (
       <div class="w-full h-full bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
         <p class="text-sm font-medium text-red-900 dark:text-red-100">Validation Error</p>
         <p class="text-xs text-red-700 dark:text-red-300 mt-1">
-          {validation.errors?.[0]?.message || 'Unknown validation error'}
+          {firstError}
         </p>
       </div>
     )
@@ -1450,7 +1518,7 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
 
   // Wrapper function for RenderContext (breaks circular dependency)
   const renderComponent = (component: UIComponent, onError?: (error: RendererError) => void) => (
-    <ComponentRenderer component={component} onError={onError} />
+    <ComponentRenderer component={component} onError={onError} errorMode={props.errorMode} />
   )
 
   return (
@@ -1460,7 +1528,7 @@ export const UIResourceRenderer: Component<UIResourceRendererProps> = (props) =>
           <For each={layoutData.components}>
             {(component) => (
               <div style={getGridStyleString(component)}>
-                <ComponentRenderer component={component} onError={props.onError} />
+                <ComponentRenderer component={component} onError={props.onError} errorMode={props.errorMode} />
               </div>
             )}
           </For>

package/src/index.ts

@@ -89,6 +89,13 @@ export type {
   GenerativeUIErrorBoundaryProps,
 } from './components'
 
+// Validation error mode (v5.4.0)
+export type { ValidationErrorMode } from './components/UIResourceRenderer'
+
+// Runtime debug mode + perf marks (v5.4.0)
+export { setDebugMode, isDebugEnabled } from './utils/logger'
+export { markRenderStart, markRenderEnd, PERF_PREFIX } from './utils/perf'
+
 export type { DraggableGridItemProps } from './components/DraggableGridItem'
 export type { ResizeHandleProps as ResizeHandleComponentProps } from './components/ResizeHandle'
 export type { EditableUIResourceRendererProps } from './components/EditableUIResourceRenderer'