@seed-ship/mcp-ui-solid 2.2.7 → 2.2.9

package/src/components/UIResourceRenderer.tsx

@@ -168,9 +168,55 @@ function ChartRenderer(props: {
     setIsLoading(false)
   }
 
-  // Use native Chart.js renderer
-  if (useNative()) {
-    return (
+  // Reactive switch between native Chart.js and iframe fallback
+  // Must use <Show> — signals in component body are not reactive in SolidJS
+  return (
+    <Show
+      when={useNative()}
+      fallback={
+        <div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <Show when={isLoading()}>
+            <div class="absolute inset-0 flex items-center justify-center">
+              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+            </div>
+          </Show>
+
+          <Show when={error()}>
+            <div class="absolute inset-0 flex items-center justify-center p-4">
+              <div class="text-center">
+                <p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p>
+                <p class="text-gray-600 dark:text-gray-400 text-xs mt-1">{error()}</p>
+              </div>
+            </div>
+          </Show>
+
+          <Show when={iframeUrl() && !error()}>
+            <div class="w-full h-full p-4">
+              <Show when={params()?.title}>
+                <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
+                  {params()?.title}
+                </h3>
+              </Show>
+              <div class="w-full h-full" role="img" aria-label={params()?.title ? `Chart: ${params()?.title}` : 'Chart visualization'}>
+                <img
+                  src={iframeUrl()}
+                  alt={params()?.title ? `Chart: ${params()?.title}` : 'Chart visualization'}
+                  class="w-full h-auto max-h-[300px] object-contain"
+                  onError={() => {
+                    setError('Failed to load chart')
+                    props.onError?.({
+                      type: 'render',
+                      message: 'Chart rendering failed',
+                      componentId: props.component.id,
+                    })
+                  }}
+                />
+              </div>
+            </div>
+          </Show>
+        </div>
+      }
+    >
       <ChartJSRenderer
         component={props.component}
         onError={(err) => props.onError?.({
@@ -179,52 +225,7 @@ function ChartRenderer(props: {
           componentId: props.component.id,
         })}
       />
-    )
-  }
-
-  // Iframe fallback (Quickchart.io)
-  return (
-    <div class="relative w-full h-full min-h-[300px] bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
-      <Show when={isLoading()}>
-        <div class="absolute inset-0 flex items-center justify-center">
-          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
-        </div>
-      </Show>
-
-      <Show when={error()}>
-        <div class="absolute inset-0 flex items-center justify-center p-4">
-          <div class="text-center">
-            <p class="text-red-600 dark:text-red-400 text-sm font-medium">Chart Error</p>
-            <p class="text-gray-600 dark:text-gray-400 text-xs mt-1">{error()}</p>
-          </div>
-        </div>
-      </Show>
-
-      <Show when={iframeUrl() && !error()}>
-        <div class="w-full h-full p-4">
-          <Show when={params()?.title}>
-            <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-              {params()?.title}
-            </h3>
-          </Show>
-          <div class="w-full h-full" role="img" aria-label={params()?.title ? `Chart: ${params()?.title}` : 'Chart visualization'}>
-            <img
-              src={iframeUrl()}
-              alt={params()?.title ? `Chart: ${params()?.title}` : 'Chart visualization'}
-              class="w-full h-auto max-h-[300px] object-contain"
-              onError={() => {
-                setError('Failed to load chart')
-                props.onError?.({
-                  type: 'render',
-                  message: 'Chart rendering failed',
-                  componentId: props.component.id,
-                })
-              }}
-            />
-          </div>
-        </div>
-      </Show>
-    </div>
+    </Show>
   )
 }
 
@@ -291,8 +292,8 @@ export function renderCellValue(value: any): string {
   const hasHtml = /<[a-z][\s\S]*>/i.test(strValue)
   if (hasHtml) {
     return DOMPurify.sanitize(strValue, {
-      ALLOWED_TAGS: ['a', 'strong', 'em', 'b', 'i', 'code', 'span', 'br'],
-      ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'data-citation-page', 'data-citation-source', 'title'],
+      ALLOWED_TAGS: ['a', 'strong', 'em', 'b', 'i', 'code', 'span', 'br', 'button', 'svg', 'path'],
+      ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'data-citation-page', 'data-citation-source', 'data-citation-doc', 'data-citation-verified', 'title', 'fill', 'stroke', 'viewBox', 'stroke-linecap', 'stroke-linejoin', 'stroke-width', 'd'],
       ADD_ATTR: ['target', 'rel'],
     })
   }

package/src/components/renderCellValue.test.ts

@@ -105,6 +105,30 @@ describe('renderCellValue', () => {
     expect(result).toContain('<code>npm install</code>')
   })
 
+  // Citation buttons with SVG (P1.2)
+  it('preserves citation <button> with data-citation-page', () => {
+    const result = renderCellValue('<button data-citation-page="5" class="citation-btn"><svg viewBox="0 0 24 24"><path d="M12 2L2 7v10l10 5 10-5V7z"/></svg></button>')
+    expect(result).toContain('<button')
+    expect(result).toContain('data-citation-page="5"')
+    expect(result).toContain('<svg')
+    expect(result).toContain('<path')
+  })
+
+  it('preserves citation button with data-citation-doc and data-citation-verified', () => {
+    const result = renderCellValue('<button data-citation-page="3" data-citation-doc="report.pdf" data-citation-verified="true">p.3</button>')
+    expect(result).toContain('data-citation-page="3"')
+    expect(result).toContain('data-citation-doc="report.pdf"')
+    expect(result).toContain('data-citation-verified="true"')
+  })
+
+  it('preserves mixed text with citation button', () => {
+    const result = renderCellValue('See source <button data-citation-page="7">[7]</button> for details')
+    expect(result).toContain('See source')
+    expect(result).toContain('<button')
+    expect(result).toContain('data-citation-page="7"')
+    expect(result).toContain('for details')
+  })
+
   // Plain text XSS prevention
   it('sanitizes plain text that looks like HTML injection', () => {
     const result = renderCellValue('<img src=x onerror=alert(1)>')