@seed-ship/mcp-ui-solid 6.5.0 → 6.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (104) hide show
  1. package/CHANGELOG.md +161 -0
  2. package/README.md +37 -0
  3. package/dist/adapters/connector.cjs +112 -0
  4. package/dist/adapters/connector.cjs.map +1 -0
  5. package/dist/adapters/connector.d.ts +71 -0
  6. package/dist/adapters/connector.d.ts.map +1 -0
  7. package/dist/adapters/connector.js +112 -0
  8. package/dist/adapters/connector.js.map +1 -0
  9. package/dist/adapters/index.d.ts +18 -0
  10. package/dist/adapters/index.d.ts.map +1 -0
  11. package/dist/adapters.cjs +6 -0
  12. package/dist/adapters.cjs.map +1 -0
  13. package/dist/adapters.d.cts +18 -0
  14. package/dist/adapters.d.ts +18 -0
  15. package/dist/adapters.js +6 -0
  16. package/dist/adapters.js.map +1 -0
  17. package/dist/components/ActionGroupRenderer.cjs +12 -3
  18. package/dist/components/ActionGroupRenderer.cjs.map +1 -1
  19. package/dist/components/ActionGroupRenderer.d.ts.map +1 -1
  20. package/dist/components/ActionGroupRenderer.js +12 -3
  21. package/dist/components/ActionGroupRenderer.js.map +1 -1
  22. package/dist/components/ExpandableWrapper.cjs +24 -6
  23. package/dist/components/ExpandableWrapper.cjs.map +1 -1
  24. package/dist/components/ExpandableWrapper.d.ts.map +1 -1
  25. package/dist/components/ExpandableWrapper.js +24 -6
  26. package/dist/components/ExpandableWrapper.js.map +1 -1
  27. package/dist/components/FeedbackInline.cjs +6 -2
  28. package/dist/components/FeedbackInline.cjs.map +1 -1
  29. package/dist/components/FeedbackInline.d.ts +2 -2
  30. package/dist/components/FeedbackInline.d.ts.map +1 -1
  31. package/dist/components/FeedbackInline.js +7 -3
  32. package/dist/components/FeedbackInline.js.map +1 -1
  33. package/dist/components/PresentationFeedback.cjs +207 -0
  34. package/dist/components/PresentationFeedback.cjs.map +1 -0
  35. package/dist/components/PresentationFeedback.d.ts +113 -0
  36. package/dist/components/PresentationFeedback.d.ts.map +1 -0
  37. package/dist/components/PresentationFeedback.js +207 -0
  38. package/dist/components/PresentationFeedback.js.map +1 -0
  39. package/dist/components/StreamingUIRenderer.cjs +82 -195
  40. package/dist/components/StreamingUIRenderer.cjs.map +1 -1
  41. package/dist/components/StreamingUIRenderer.d.ts +25 -5
  42. package/dist/components/StreamingUIRenderer.d.ts.map +1 -1
  43. package/dist/components/StreamingUIRenderer.js +84 -197
  44. package/dist/components/StreamingUIRenderer.js.map +1 -1
  45. package/dist/components/UIResourceRenderer.cjs +22 -15
  46. package/dist/components/UIResourceRenderer.cjs.map +1 -1
  47. package/dist/components/UIResourceRenderer.d.ts.map +1 -1
  48. package/dist/components/UIResourceRenderer.js +22 -15
  49. package/dist/components/UIResourceRenderer.js.map +1 -1
  50. package/dist/components/index.d.ts +2 -0
  51. package/dist/components/index.d.ts.map +1 -1
  52. package/dist/components.cjs +3 -0
  53. package/dist/components.cjs.map +1 -1
  54. package/dist/components.d.cts +2 -0
  55. package/dist/components.d.ts +2 -0
  56. package/dist/components.js +3 -0
  57. package/dist/components.js.map +1 -1
  58. package/dist/context/MCPActionContext.cjs +4 -1
  59. package/dist/context/MCPActionContext.cjs.map +1 -1
  60. package/dist/context/MCPActionContext.d.ts +13 -1
  61. package/dist/context/MCPActionContext.d.ts.map +1 -1
  62. package/dist/context/MCPActionContext.js +4 -1
  63. package/dist/context/MCPActionContext.js.map +1 -1
  64. package/dist/context/MCPUIStringsContext.cjs +38 -0
  65. package/dist/context/MCPUIStringsContext.cjs.map +1 -0
  66. package/dist/context/MCPUIStringsContext.d.ts +95 -0
  67. package/dist/context/MCPUIStringsContext.d.ts.map +1 -0
  68. package/dist/context/MCPUIStringsContext.js +38 -0
  69. package/dist/context/MCPUIStringsContext.js.map +1 -0
  70. package/dist/index.cjs +8 -0
  71. package/dist/index.cjs.map +1 -1
  72. package/dist/index.d.cts +5 -0
  73. package/dist/index.d.ts +5 -0
  74. package/dist/index.d.ts.map +1 -1
  75. package/dist/index.js +8 -0
  76. package/dist/index.js.map +1 -1
  77. package/dist/mcp-ui-spec/dist/schemas.cjs +103 -0
  78. package/dist/mcp-ui-spec/dist/schemas.cjs.map +1 -1
  79. package/dist/mcp-ui-spec/dist/schemas.js +103 -0
  80. package/dist/mcp-ui-spec/dist/schemas.js.map +1 -1
  81. package/docs/briefs/ROADMAP-opendata-macro-mcpui.md +912 -0
  82. package/package.json +17 -5
  83. package/src/adapters/connector.test.ts +165 -0
  84. package/src/adapters/connector.ts +234 -0
  85. package/src/adapters/index.ts +24 -0
  86. package/src/components/ActionGroupRenderer.test.tsx +1 -0
  87. package/src/components/ActionGroupRenderer.tsx +19 -4
  88. package/src/components/ActionSubmit.test.tsx +188 -0
  89. package/src/components/ExpandableWrapper.test.tsx +5 -2
  90. package/src/components/ExpandableWrapper.tsx +8 -6
  91. package/src/components/FeedbackInline.test.tsx +6 -3
  92. package/src/components/FeedbackInline.tsx +8 -6
  93. package/src/components/PresentationFeedback.test.tsx +163 -0
  94. package/src/components/PresentationFeedback.tsx +326 -0
  95. package/src/components/StreamingUIRenderer.parity.test.tsx +158 -0
  96. package/src/components/StreamingUIRenderer.tsx +42 -166
  97. package/src/components/UIResourceRenderer.tsx +19 -6
  98. package/src/components/index.ts +10 -0
  99. package/src/context/MCPActionContext.tsx +17 -1
  100. package/src/context/MCPUIStringsContext.test.tsx +116 -0
  101. package/src/context/MCPUIStringsContext.tsx +128 -0
  102. package/src/index.ts +27 -0
  103. package/tsconfig.tsbuildinfo +1 -1
  104. package/vite.config.ts +1 -0
@@ -3,137 +3,17 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const web = require("solid-js/web");
4
4
  const solidJs = require("solid-js");
5
5
  const useStreamingUI = require("../hooks/useStreamingUI.cjs");
6
- const validation = require("../services/validation.cjs");
7
- const GenerativeUIErrorBoundary = require("./GenerativeUIErrorBoundary.cjs");
8
- const perf = require("../utils/perf.cjs");
9
- const MCPUITelemetryContext = require("../context/MCPUITelemetryContext.cjs");
10
- var _tmpl$ = /* @__PURE__ */ web.template(`<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"><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"></path><line x1=12 y1=9 x2=12 y2=13></line><line x1=12 y1=17 x2=12.01 y2=17></line></svg><span>Invalid <!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<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">`), _tmpl$3 = /* @__PURE__ */ web.template(`<h3 class="text-sm font-semibold text-text-primary">`), _tmpl$4 = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class=mt-2><p class="text-2xl font-semibold text-text-primary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div class="w-full bg-surface-secondary border border-border-subtle rounded-lg p-4"><div class="flex items-center gap-2 mb-2"><span class="text-xs font-medium text-text-tertiary uppercase"></span></div><!$><!/><!$><!/><div class="mt-3 text-xs text-text-tertiary">Component ID: <!$><!/>...`), _tmpl$7 = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$9 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">Retry`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$10 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$11 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$12 = /* @__PURE__ */ web.template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary">Provider</div><div></div></div><div><div class="font-medium text-text-primary">Model</div><div></div></div><div><div class="font-medium text-text-primary">Execution Time</div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary">TTFB</div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$13 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$14 = /* @__PURE__ */ web.template(`<div>`), _tmpl$15 = /* @__PURE__ */ web.template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
11
- function StreamingComponentRenderer(props) {
12
- var _a, _b, _c, _d, _e, _f;
13
- perf.markRenderStart(props.component.id);
14
- const telemetry = MCPUITelemetryContext.useTelemetry();
15
- solidJs.onMount(() => {
16
- perf.markRenderEnd(props.component.id);
17
- if (telemetry) {
18
- const ts = Date.now();
19
- telemetry.dispatch({
20
- type: "component:mounted",
21
- id: props.component.id,
22
- componentType: props.component.type,
23
- ts
24
- });
25
- if (typeof performance !== "undefined" && typeof performance.getEntriesByName === "function") {
26
- const entries = performance.getEntriesByName(`${perf.PERF_PREFIX}${props.component.id}:render`, "measure");
27
- const last = entries[entries.length - 1];
28
- if (last) {
29
- telemetry.dispatch({
30
- type: "component:rendered",
31
- id: props.component.id,
32
- componentType: props.component.type,
33
- durationMs: last.duration,
34
- ts
35
- });
36
- }
37
- }
38
- }
39
- });
40
- solidJs.onCleanup(() => {
41
- if (telemetry) {
42
- telemetry.dispatch({
43
- type: "component:unmounted",
44
- id: props.component.id,
45
- componentType: props.component.type,
46
- ts: Date.now()
47
- });
48
- }
49
- });
50
- const validation$1 = validation.validateComponent(props.component);
51
- if (!validation$1.valid) {
52
- (_a = props.onError) == null ? void 0 : _a.call(props, {
53
- type: "validation",
54
- message: "Component validation failed",
55
- componentId: props.component.id,
56
- details: validation$1.errors
57
- });
58
- if (telemetry) {
59
- telemetry.dispatch({
60
- type: "validation:failed",
61
- id: props.component.id,
62
- componentType: props.component.type,
63
- errorCount: ((_b = validation$1.errors) == null ? void 0 : _b.length) ?? 0,
64
- firstErrorCode: ((_d = (_c = validation$1.errors) == null ? void 0 : _c[0]) == null ? void 0 : _d.code) ?? null,
65
- ts: Date.now()
66
- });
67
- }
68
- const mode = props.errorMode ?? "block";
69
- const firstError = ((_f = (_e = validation$1.errors) == null ? void 0 : _e[0]) == null ? void 0 : _f.message) || "Unknown validation error";
70
- if (mode === "silent") {
71
- return null;
72
- }
73
- if (mode === "inline-warn") {
74
- return (() => {
75
- var _el$ = web.getNextElement(_tmpl$), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, [_el$6, _co$] = web.getNextMarker(_el$5.nextSibling);
76
- web.setAttribute(_el$, "title", firstError);
77
- web.insert(_el$3, () => props.component.type, _el$6, _co$);
78
- return _el$;
79
- })();
6
+ const UIResourceRenderer = require("./UIResourceRenderer.cjs");
7
+ const MCPUIStringsContext = require("../context/MCPUIStringsContext.cjs");
8
+ var _tmpl$ = /* @__PURE__ */ web.template(`<span class="text-sm text-text-secondary"><!$><!/> / <!$><!/>`), _tmpl$2 = /* @__PURE__ */ web.template(`<div class=mt-2><div class="h-1 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="animate-progress-indeterminate h-full w-1/3 bg-brand-primary">`), _tmpl$3 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-2 flex items-center justify-between"><span class="text-sm font-medium text-text-primary"></span><!$><!/></div><div class="h-2 w-full overflow-hidden rounded-full bg-surface-tertiary"><div class="h-full bg-brand-primary transition-all duration-300 ease-out"></div></div><!$><!/>`), _tmpl$4 = /* @__PURE__ */ web.template(`<button type=button class="mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover">`), _tmpl$5 = /* @__PURE__ */ web.template(`<div class="mb-4 rounded-lg border border-border-error bg-error-subtle p-4"><div class="mb-2 flex items-center gap-2"><svg class="h-5 w-5 text-error-primary"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg><span class="font-medium text-error-primary"></span></div><p class="text-sm text-text-secondary"></p><!$><!/>`), _tmpl$6 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cost</div><div>$<!$><!/>`), _tmpl$7 = /* @__PURE__ */ web.template(`<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes`), _tmpl$8 = /* @__PURE__ */ web.template(`<div class="mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary"><div class="grid grid-cols-2 gap-4 md:grid-cols-4"><div><div class="font-medium text-text-primary">Provider</div><div></div></div><div><div class="font-medium text-text-primary">Model</div><div></div></div><div><div class="font-medium text-text-primary">Execution Time</div><div><!$><!/>ms</div></div><!$><!/><div><div class="font-medium text-text-primary">TTFB</div><div><!$><!/>ms</div></div><!$><!/>`), _tmpl$9 = /* @__PURE__ */ web.template(`<div><!$><!/><!$><!/><div class="grid grid-cols-12 gap-4"><!$><!/><!$><!/></div><!$><!/>`), _tmpl$0 = /* @__PURE__ */ web.template(`<div>`), _tmpl$1 = /* @__PURE__ */ web.template(`<div class="col-span-12 md:col-span-6 lg:col-span-4"><div class="animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4"><div class="mb-4 h-6 w-1/2 rounded bg-surface-tertiary"></div><div class=space-y-3><div class="h-4 rounded bg-surface-tertiary"></div><div class="h-4 w-5/6 rounded bg-surface-tertiary"></div><div class="h-4 w-4/6 rounded bg-surface-tertiary"></div></div><div class="mt-4 h-32 rounded bg-surface-tertiary">`);
9
+ function asFullWidth(component) {
10
+ return {
11
+ ...component,
12
+ position: {
13
+ colStart: 1,
14
+ colSpan: 12
80
15
  }
81
- return (() => {
82
- var _el$7 = web.getNextElement(_tmpl$2), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
83
- web.insert(_el$9, firstError);
84
- return _el$7;
85
- })();
86
- }
87
- const params = props.component.params;
88
- return web.createComponent(GenerativeUIErrorBoundary.GenerativeUIErrorBoundary, {
89
- get componentId() {
90
- return props.component.id;
91
- },
92
- get componentType() {
93
- return props.component.type;
94
- },
95
- get onError() {
96
- return props.onError;
97
- },
98
- allowRetry: false,
99
- get children() {
100
- var _el$0 = web.getNextElement(_tmpl$6), _el$1 = _el$0.firstChild, _el$10 = _el$1.firstChild, _el$22 = _el$1.nextSibling, [_el$23, _co$4] = web.getNextMarker(_el$22.nextSibling), _el$24 = _el$23.nextSibling, [_el$25, _co$5] = web.getNextMarker(_el$24.nextSibling), _el$17 = _el$25.nextSibling, _el$18 = _el$17.firstChild, _el$20 = _el$18.nextSibling, [_el$21, _co$3] = web.getNextMarker(_el$20.nextSibling);
101
- _el$21.nextSibling;
102
- web.insert(_el$10, () => props.component.type);
103
- web.insert(_el$0, web.createComponent(solidJs.Show, {
104
- get when() {
105
- return params == null ? void 0 : params.title;
106
- },
107
- get children() {
108
- var _el$11 = web.getNextElement(_tmpl$3);
109
- web.insert(_el$11, () => params.title);
110
- return _el$11;
111
- }
112
- }), _el$23, _co$4);
113
- web.insert(_el$0, web.createComponent(solidJs.Show, {
114
- get when() {
115
- return web.memo(() => props.component.type === "metric")() && (params == null ? void 0 : params.value);
116
- },
117
- get children() {
118
- var _el$12 = web.getNextElement(_tmpl$5), _el$13 = _el$12.firstChild, _el$15 = _el$13.nextSibling, [_el$16, _co$2] = web.getNextMarker(_el$15.nextSibling);
119
- web.insert(_el$13, () => params.value);
120
- web.insert(_el$12, web.createComponent(solidJs.Show, {
121
- get when() {
122
- return params.unit;
123
- },
124
- get children() {
125
- var _el$14 = web.getNextElement(_tmpl$4);
126
- web.insert(_el$14, () => params.unit);
127
- return _el$14;
128
- }
129
- }), _el$16, _co$2);
130
- return _el$12;
131
- }
132
- }), _el$25, _co$5);
133
- web.insert(_el$17, () => props.component.id.slice(0, 8), _el$21, _co$3);
134
- return _el$0;
135
- }
136
- });
16
+ };
137
17
  }
138
18
  function StreamingUIRenderer(props) {
139
19
  const {
@@ -153,6 +33,7 @@ function StreamingUIRenderer(props) {
153
33
  onError: props.onError,
154
34
  onComponentReceived: props.onComponentReceived
155
35
  });
36
+ const strings = MCPUIStringsContext.useMCPUIStrings();
156
37
  const [animatingComponents, setAnimatingComponents] = solidJs.createSignal(/* @__PURE__ */ new Set());
157
38
  const handleComponentRender = (componentId) => {
158
39
  setAnimatingComponents((prev) => /* @__PURE__ */ new Set([...prev, componentId]));
@@ -165,81 +46,87 @@ function StreamingUIRenderer(props) {
165
46
  }, 500);
166
47
  };
167
48
  return (() => {
168
- var _el$26 = web.getNextElement(_tmpl$13), _el$87 = _el$26.firstChild, [_el$88, _co$16] = web.getNextMarker(_el$87.nextSibling), _el$89 = _el$88.nextSibling, [_el$90, _co$17] = web.getNextMarker(_el$89.nextSibling), _el$51 = _el$90.nextSibling, _el$52 = _el$51.firstChild, [_el$53, _co$1] = web.getNextMarker(_el$52.nextSibling), _el$54 = _el$53.nextSibling, [_el$55, _co$10] = web.getNextMarker(_el$54.nextSibling), _el$91 = _el$51.nextSibling, [_el$92, _co$18] = web.getNextMarker(_el$91.nextSibling);
169
- web.insert(_el$26, web.createComponent(solidJs.Show, {
49
+ var _el$ = web.getNextElement(_tmpl$9), _el$60 = _el$.firstChild, [_el$61, _co$11] = web.getNextMarker(_el$60.nextSibling), _el$62 = _el$61.nextSibling, [_el$63, _co$12] = web.getNextMarker(_el$62.nextSibling), _el$24 = _el$63.nextSibling, _el$25 = _el$24.firstChild, [_el$26, _co$6] = web.getNextMarker(_el$25.nextSibling), _el$27 = _el$26.nextSibling, [_el$28, _co$7] = web.getNextMarker(_el$27.nextSibling), _el$64 = _el$24.nextSibling, [_el$65, _co$13] = web.getNextMarker(_el$64.nextSibling);
50
+ web.insert(_el$, web.createComponent(solidJs.Show, {
170
51
  get when() {
171
52
  return web.memo(() => props.showProgress !== false)() && (isLoading() || isStreaming());
172
53
  },
173
54
  get children() {
174
- var _el$27 = web.getNextElement(_tmpl$9), _el$28 = _el$27.firstChild, _el$29 = _el$28.firstChild, _el$36 = _el$29.nextSibling, [_el$37, _co$8] = web.getNextMarker(_el$36.nextSibling), _el$38 = _el$28.nextSibling, _el$39 = _el$38.firstChild, _el$41 = _el$38.nextSibling, [_el$42, _co$9] = web.getNextMarker(_el$41.nextSibling);
175
- web.insert(_el$29, () => progress().message);
176
- web.insert(_el$28, web.createComponent(solidJs.Show, {
55
+ var _el$2 = web.getNextElement(_tmpl$3), _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$1 = _el$4.nextSibling, [_el$10, _co$3] = web.getNextMarker(_el$1.nextSibling), _el$11 = _el$3.nextSibling, _el$12 = _el$11.firstChild, _el$14 = _el$11.nextSibling, [_el$15, _co$4] = web.getNextMarker(_el$14.nextSibling);
56
+ web.insert(_el$4, () => progress().message);
57
+ web.insert(_el$3, web.createComponent(solidJs.Show, {
177
58
  get when() {
178
59
  return progress().totalCount !== null;
179
60
  },
180
61
  get children() {
181
- var _el$30 = web.getNextElement(_tmpl$7), _el$32 = _el$30.firstChild, [_el$33, _co$6] = web.getNextMarker(_el$32.nextSibling), _el$31 = _el$33.nextSibling, _el$34 = _el$31.nextSibling, [_el$35, _co$7] = web.getNextMarker(_el$34.nextSibling);
182
- web.insert(_el$30, () => progress().receivedCount, _el$33, _co$6);
183
- web.insert(_el$30, () => progress().totalCount, _el$35, _co$7);
184
- return _el$30;
62
+ var _el$5 = web.getNextElement(_tmpl$), _el$7 = _el$5.firstChild, [_el$8, _co$] = web.getNextMarker(_el$7.nextSibling), _el$6 = _el$8.nextSibling, _el$9 = _el$6.nextSibling, [_el$0, _co$2] = web.getNextMarker(_el$9.nextSibling);
63
+ web.insert(_el$5, () => progress().receivedCount, _el$8, _co$);
64
+ web.insert(_el$5, () => progress().totalCount, _el$0, _co$2);
65
+ return _el$5;
185
66
  }
186
- }), _el$37, _co$8);
187
- web.insert(_el$27, web.createComponent(solidJs.Show, {
67
+ }), _el$10, _co$3);
68
+ web.insert(_el$2, web.createComponent(solidJs.Show, {
188
69
  get when() {
189
70
  return web.memo(() => progress().totalCount === null)() && isStreaming();
190
71
  },
191
72
  get children() {
192
- return web.getNextElement(_tmpl$8);
73
+ return web.getNextElement(_tmpl$2);
193
74
  }
194
- }), _el$42, _co$9);
195
- web.effect((_$p) => web.style(_el$39, progress().totalCount !== null ? `width: ${progress().receivedCount / progress().totalCount * 100}%` : "width: 0%", _$p));
196
- return _el$27;
75
+ }), _el$15, _co$4);
76
+ web.effect((_$p) => web.style(_el$12, progress().totalCount !== null ? `width: ${progress().receivedCount / progress().totalCount * 100}%` : "width: 0%", _$p));
77
+ return _el$2;
197
78
  }
198
- }), _el$88, _co$16);
199
- web.insert(_el$26, web.createComponent(solidJs.Show, {
79
+ }), _el$61, _co$11);
80
+ web.insert(_el$, web.createComponent(solidJs.Show, {
200
81
  get when() {
201
82
  return error();
202
83
  },
203
84
  get children() {
204
- var _el$43 = web.getNextElement(_tmpl$1), _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling, _el$47 = _el$44.nextSibling, _el$49 = _el$47.nextSibling, [_el$50, _co$0] = web.getNextMarker(_el$49.nextSibling);
205
- web.insert(_el$46, () => {
85
+ var _el$16 = web.getNextElement(_tmpl$5), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$22 = _el$20.nextSibling, [_el$23, _co$5] = web.getNextMarker(_el$22.nextSibling);
86
+ web.insert(_el$19, () => {
206
87
  var _a;
207
88
  return (_a = error()) == null ? void 0 : _a.error;
208
89
  });
209
- web.insert(_el$47, () => {
90
+ web.insert(_el$20, () => {
210
91
  var _a;
211
92
  return (_a = error()) == null ? void 0 : _a.message;
212
93
  });
213
- web.insert(_el$43, web.createComponent(solidJs.Show, {
94
+ web.insert(_el$16, web.createComponent(solidJs.Show, {
214
95
  get when() {
215
96
  var _a;
216
97
  return (_a = error()) == null ? void 0 : _a.recoverable;
217
98
  },
218
99
  get children() {
219
- var _el$48 = web.getNextElement(_tmpl$0);
220
- _el$48.$$click = () => startStreaming();
100
+ var _el$21 = web.getNextElement(_tmpl$4);
101
+ _el$21.$$click = () => startStreaming();
102
+ web.insert(_el$21, () => strings.retry);
221
103
  web.runHydrationEvents();
222
- return _el$48;
104
+ return _el$21;
223
105
  }
224
- }), _el$50, _co$0);
225
- return _el$43;
106
+ }), _el$23, _co$5);
107
+ return _el$16;
226
108
  }
227
- }), _el$90, _co$17);
228
- web.insert(_el$51, web.createComponent(solidJs.For, {
109
+ }), _el$63, _co$12);
110
+ web.insert(_el$24, web.createComponent(solidJs.For, {
229
111
  get each() {
230
112
  return components();
231
113
  },
232
114
  children: (component) => {
233
115
  solidJs.onMount(() => handleComponentRender(component.id));
234
116
  return (() => {
235
- var _el$93 = web.getNextElement(_tmpl$14);
236
- web.insert(_el$93, web.createComponent(StreamingComponentRenderer, {
237
- component,
238
- get onError() {
239
- return props.onRenderError;
117
+ var _el$66 = web.getNextElement(_tmpl$0);
118
+ web.insert(_el$66, web.createComponent(UIResourceRenderer.UIResourceRenderer, {
119
+ get content() {
120
+ return asFullWidth(component);
240
121
  },
241
122
  get errorMode() {
242
123
  return props.errorMode;
124
+ },
125
+ get onError() {
126
+ return props.onRenderError;
127
+ },
128
+ get toolbarVariant() {
129
+ return props.toolbarVariant;
243
130
  }
244
131
  }));
245
132
  web.effect((_p$) => {
@@ -247,18 +134,18 @@ function StreamingUIRenderer(props) {
247
134
  col-span-${component.position.colSpan}
248
135
  ${animatingComponents().has(component.id) ? "animate-fade-in-up" : ""}
249
136
  `, _v$2 = `grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`;
250
- _v$ !== _p$.e && web.className(_el$93, _p$.e = _v$);
251
- _p$.t = web.style(_el$93, _v$2, _p$.t);
137
+ _v$ !== _p$.e && web.className(_el$66, _p$.e = _v$);
138
+ _p$.t = web.style(_el$66, _v$2, _p$.t);
252
139
  return _p$;
253
140
  }, {
254
141
  e: void 0,
255
142
  t: void 0
256
143
  });
257
- return _el$93;
144
+ return _el$66;
258
145
  })();
259
146
  }
260
- }), _el$53, _co$1);
261
- web.insert(_el$51, web.createComponent(solidJs.Show, {
147
+ }), _el$26, _co$6);
148
+ web.insert(_el$24, web.createComponent(solidJs.Show, {
262
149
  get when() {
263
150
  return web.memo(() => !!isStreaming())() && progress().totalCount !== null;
264
151
  },
@@ -272,65 +159,65 @@ function StreamingUIRenderer(props) {
272
159
  children: () => web.createComponent(SkeletonComponent, {})
273
160
  });
274
161
  }
275
- }), _el$55, _co$10);
276
- web.insert(_el$26, web.createComponent(solidJs.Show, {
162
+ }), _el$28, _co$7);
163
+ web.insert(_el$, web.createComponent(solidJs.Show, {
277
164
  get when() {
278
165
  return web.memo(() => props.showMetadata !== false)() && metadata();
279
166
  },
280
167
  get children() {
281
- var _el$56 = web.getNextElement(_tmpl$12), _el$57 = _el$56.firstChild, _el$58 = _el$57.firstChild, _el$59 = _el$58.firstChild, _el$60 = _el$59.nextSibling, _el$61 = _el$58.nextSibling, _el$62 = _el$61.firstChild, _el$63 = _el$62.nextSibling, _el$64 = _el$61.nextSibling, _el$65 = _el$64.firstChild, _el$66 = _el$65.nextSibling, _el$68 = _el$66.firstChild, [_el$69, _co$11] = web.getNextMarker(_el$68.nextSibling);
282
- _el$69.nextSibling;
283
- var _el$83 = _el$64.nextSibling, [_el$84, _co$14] = web.getNextMarker(_el$83.nextSibling), _el$76 = _el$84.nextSibling, _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling, _el$80 = _el$78.firstChild, [_el$81, _co$13] = web.getNextMarker(_el$80.nextSibling);
284
- _el$81.nextSibling;
285
- var _el$85 = _el$76.nextSibling, [_el$86, _co$15] = web.getNextMarker(_el$85.nextSibling);
286
- web.insert(_el$60, () => {
168
+ var _el$29 = web.getNextElement(_tmpl$8), _el$30 = _el$29.firstChild, _el$31 = _el$30.firstChild, _el$32 = _el$31.firstChild, _el$33 = _el$32.nextSibling, _el$34 = _el$31.nextSibling, _el$35 = _el$34.firstChild, _el$36 = _el$35.nextSibling, _el$37 = _el$34.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$41 = _el$39.firstChild, [_el$42, _co$8] = web.getNextMarker(_el$41.nextSibling);
169
+ _el$42.nextSibling;
170
+ var _el$56 = _el$37.nextSibling, [_el$57, _co$1] = web.getNextMarker(_el$56.nextSibling), _el$49 = _el$57.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.nextSibling, _el$53 = _el$51.firstChild, [_el$54, _co$0] = web.getNextMarker(_el$53.nextSibling);
171
+ _el$54.nextSibling;
172
+ var _el$58 = _el$49.nextSibling, [_el$59, _co$10] = web.getNextMarker(_el$58.nextSibling);
173
+ web.insert(_el$33, () => {
287
174
  var _a;
288
175
  return (_a = metadata()) == null ? void 0 : _a.provider;
289
176
  });
290
- web.insert(_el$63, () => {
177
+ web.insert(_el$36, () => {
291
178
  var _a;
292
179
  return (_a = metadata()) == null ? void 0 : _a.model;
293
180
  });
294
- web.insert(_el$66, () => {
181
+ web.insert(_el$39, () => {
295
182
  var _a;
296
183
  return (_a = metadata()) == null ? void 0 : _a.executionTimeMs;
297
- }, _el$69, _co$11);
298
- web.insert(_el$57, web.createComponent(solidJs.Show, {
184
+ }, _el$42, _co$8);
185
+ web.insert(_el$30, web.createComponent(solidJs.Show, {
299
186
  get when() {
300
187
  var _a;
301
188
  return ((_a = metadata()) == null ? void 0 : _a.costUSD) !== void 0;
302
189
  },
303
190
  get children() {
304
- var _el$70 = web.getNextElement(_tmpl$10), _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling, _el$73 = _el$72.firstChild, _el$74 = _el$73.nextSibling, [_el$75, _co$12] = web.getNextMarker(_el$74.nextSibling);
305
- web.insert(_el$72, () => {
191
+ var _el$43 = web.getNextElement(_tmpl$6), _el$44 = _el$43.firstChild, _el$45 = _el$44.nextSibling, _el$46 = _el$45.firstChild, _el$47 = _el$46.nextSibling, [_el$48, _co$9] = web.getNextMarker(_el$47.nextSibling);
192
+ web.insert(_el$45, () => {
306
193
  var _a, _b;
307
194
  return (_b = (_a = metadata()) == null ? void 0 : _a.costUSD) == null ? void 0 : _b.toFixed(4);
308
- }, _el$75, _co$12);
309
- return _el$70;
195
+ }, _el$48, _co$9);
196
+ return _el$43;
310
197
  }
311
- }), _el$84, _co$14);
312
- web.insert(_el$78, () => {
198
+ }), _el$57, _co$1);
199
+ web.insert(_el$51, () => {
313
200
  var _a;
314
201
  return (_a = metadata()) == null ? void 0 : _a.firstTokenMs;
315
- }, _el$81, _co$13);
316
- web.insert(_el$57, web.createComponent(solidJs.Show, {
202
+ }, _el$54, _co$0);
203
+ web.insert(_el$30, web.createComponent(solidJs.Show, {
317
204
  get when() {
318
205
  var _a;
319
206
  return (_a = metadata()) == null ? void 0 : _a.cached;
320
207
  },
321
208
  get children() {
322
- return web.getNextElement(_tmpl$11);
209
+ return web.getNextElement(_tmpl$7);
323
210
  }
324
- }), _el$86, _co$15);
325
- return _el$56;
211
+ }), _el$59, _co$10);
212
+ return _el$29;
326
213
  }
327
- }), _el$92, _co$18);
328
- web.effect(() => web.className(_el$26, `streaming-ui-renderer ${props.class || ""}`));
329
- return _el$26;
214
+ }), _el$65, _co$13);
215
+ web.effect(() => web.className(_el$, `streaming-ui-renderer ${props.class || ""}`));
216
+ return _el$;
330
217
  })();
331
218
  }
332
219
  function SkeletonComponent() {
333
- return web.getNextElement(_tmpl$15);
220
+ return web.getNextElement(_tmpl$1);
334
221
  }
335
222
  web.delegateEvents(["click"]);
336
223
  exports.StreamingUIRenderer = StreamingUIRenderer;
@@ -1 +1 @@
1
- {"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component - Phase 2\n *\n * Renders streaming dashboard components with skeleton states and progress indicators.\n * Uses the useStreamingUI hook for SSE connection and state management.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount, onCleanup } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { validateComponent } from '../services/validation'\nimport { GenerativeUIErrorBoundary } from './GenerativeUIErrorBoundary'\nimport { markRenderStart, markRenderEnd, PERF_PREFIX } from '../utils/perf'\nimport { useTelemetry } from '../context/MCPUITelemetryContext'\nimport type { ValidationErrorMode } from './UIResourceRenderer'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n /**\n * How to react when a streamed component fails `validateComponent()`\n * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0\n * behavior). See `ValidationErrorMode` in `UIResourceRenderer`.\n */\n errorMode?: ValidationErrorMode\n}\n\n/**\n * Component Renderer - Inline lightweight version\n * (Full implementation in UIResourceRenderer)\n */\nfunction StreamingComponentRenderer(props: {\n component: UIComponent\n onError?: (error: RendererError) => void\n errorMode?: ValidationErrorMode\n}) {\n // Performance marks (v5.4.0) — see utils/perf.ts\n markRenderStart(props.component.id)\n\n // Telemetry sink (B.5 — v5.6.0). Same wiring as ComponentRenderer in\n // UIResourceRenderer.tsx — null when no Provider, no-op everywhere then.\n const telemetry = useTelemetry()\n\n onMount(() => {\n markRenderEnd(props.component.id)\n if (telemetry) {\n const ts = Date.now()\n telemetry.dispatch({\n type: 'component:mounted',\n id: props.component.id,\n componentType: props.component.type,\n ts,\n })\n if (typeof performance !== 'undefined' && typeof performance.getEntriesByName === 'function') {\n const entries = performance.getEntriesByName(`${PERF_PREFIX}${props.component.id}:render`, 'measure')\n const last = entries[entries.length - 1]\n if (last) {\n telemetry.dispatch({\n type: 'component:rendered',\n id: props.component.id,\n componentType: props.component.type,\n durationMs: last.duration,\n ts,\n })\n }\n }\n }\n })\n\n onCleanup(() => {\n if (telemetry) {\n telemetry.dispatch({\n type: 'component:unmounted',\n id: props.component.id,\n componentType: props.component.type,\n ts: Date.now(),\n })\n }\n })\n\n // Validate component before rendering\n const validation = validateComponent(props.component)\n if (!validation.valid) {\n props.onError?.({\n type: 'validation',\n message: 'Component validation failed',\n componentId: props.component.id,\n details: validation.errors,\n })\n\n if (telemetry) {\n telemetry.dispatch({\n type: 'validation:failed',\n id: props.component.id,\n componentType: props.component.type,\n errorCount: validation.errors?.length ?? 0,\n firstErrorCode: validation.errors?.[0]?.code ?? null,\n ts: Date.now(),\n })\n }\n\n const mode: ValidationErrorMode = props.errorMode ?? 'block'\n const firstError = validation.errors?.[0]?.message || 'Unknown validation error'\n\n if (mode === 'silent') {\n return null\n }\n\n if (mode === 'inline-warn') {\n return (\n <div\n 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\"\n role=\"alert\"\n aria-label=\"Component validation warning\"\n title={firstError}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"w-3.5 h-3.5\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\"\n >\n <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\" />\n <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\n <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\n </svg>\n <span>Invalid {props.component.type}</span>\n </div>\n )\n }\n\n return (\n <div class=\"w-full bg-error-subtle border border-border-error rounded-lg p-4\">\n <p class=\"text-sm font-medium text-error-primary\">Validation Error</p>\n <p class=\"text-xs text-text-secondary mt-1\">\n {firstError}\n </p>\n </div>\n )\n }\n\n // Simplified renderer - just show component type and title\n // Full rendering logic in UIResourceRenderer\n const params = props.component.params as any\n\n return (\n <GenerativeUIErrorBoundary\n componentId={props.component.id}\n componentType={props.component.type}\n onError={props.onError}\n allowRetry={false}\n >\n <div class=\"w-full bg-surface-secondary border border-border-subtle rounded-lg p-4\">\n <div class=\"flex items-center gap-2 mb-2\">\n <span class=\"text-xs font-medium text-text-tertiary uppercase\">\n {props.component.type}\n </span>\n </div>\n <Show when={params?.title}>\n <h3 class=\"text-sm font-semibold text-text-primary\">{params.title}</h3>\n </Show>\n <Show when={props.component.type === 'metric' && params?.value}>\n <div class=\"mt-2\">\n <p class=\"text-2xl font-semibold text-text-primary\">{params.value}</p>\n <Show when={params.unit}>\n <span class=\"text-sm text-text-secondary\">{params.unit}</span>\n </Show>\n </div>\n </Show>\n <div class=\"mt-3 text-xs text-text-tertiary\">\n Component ID: {props.component.id.slice(0, 8)}...\n </div>\n </div>\n </GenerativeUIErrorBoundary>\n )\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n Retry\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components */}\n <For each={components()}>\n {(component) => {\n // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n onMount(() => handleComponentRender(component.id))\n\n return (\n <div\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <StreamingComponentRenderer\n component={component}\n onError={props.onRenderError}\n errorMode={props.errorMode}\n />\n </div>\n )\n }}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["StreamingComponentRenderer","props","markRenderStart","component","id","telemetry","useTelemetry","onMount","markRenderEnd","ts","Date","now","dispatch","type","componentType","performance","getEntriesByName","entries","PERF_PREFIX","last","length","durationMs","duration","onCleanup","validation","validateComponent","valid","onError","message","componentId","details","errors","errorCount","firstErrorCode","code","mode","errorMode","firstError","_el$","_$getNextElement","_tmpl$","_el$2","firstChild","_el$3","nextSibling","_el$4","_el$5","_el$6","_co$","_$getNextMarker","_$setAttribute","_$insert","_el$7","_tmpl$2","_el$8","_el$9","params","_$createComponent","GenerativeUIErrorBoundary","allowRetry","children","_el$0","_tmpl$6","_el$1","_el$10","_el$22","_el$23","_co$4","_el$24","_el$25","_co$5","_el$17","_el$18","_el$20","_el$21","_co$3","Show","when","title","_el$11","_tmpl$3","_$memo","value","_el$12","_tmpl$5","_el$13","_el$15","_el$16","_co$2","unit","_el$14","_tmpl$4","slice","StreamingUIRenderer","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onComponentReceived","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","prev","setTimeout","next","delete","_el$26","_tmpl$13","_el$87","_el$88","_co$16","_el$89","_el$90","_co$17","_el$51","_el$52","_el$53","_co$1","_el$54","_el$55","_co$10","_el$91","_el$92","_co$18","showProgress","_el$27","_tmpl$9","_el$28","_el$29","_el$36","_el$37","_co$8","_el$38","_el$39","_el$41","_el$42","_co$9","totalCount","_el$30","_tmpl$7","_el$32","_el$33","_co$6","_el$31","_el$34","_el$35","_co$7","receivedCount","_tmpl$8","_$effect","_$p","_$style","_el$43","_tmpl$1","_el$44","_el$45","_el$46","_el$47","_el$49","_el$50","_co$0","recoverable","_el$48","_tmpl$0","$$click","_$runHydrationEvents","For","each","_el$93","_tmpl$14","onRenderError","_p$","_v$","position","colSpan","has","_v$2","colStart","e","_$className","t","undefined","Array","from","SkeletonComponent","showMetadata","_el$56","_tmpl$12","_el$57","_el$58","_el$59","_el$60","_el$61","_el$62","_el$63","_el$64","_el$65","_el$66","_el$68","_el$69","_co$11","_el$83","_el$84","_co$14","_el$76","_el$77","_el$78","_el$80","_el$81","_co$13","_el$85","_el$86","_co$15","provider","model","executionTimeMs","costUSD","_el$70","_tmpl$10","_el$71","_el$72","_el$73","_el$74","_el$75","_co$12","toFixed","firstTokenMs","cached","_tmpl$11","class","_tmpl$15","_$delegateEvents"],"mappings":"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"}
1
+ {"version":3,"file":"StreamingUIRenderer.cjs","sources":["../../src/components/StreamingUIRenderer.tsx"],"sourcesContent":["/**\n * StreamingUIRenderer Component\n *\n * Renders streaming dashboard components with skeleton states and progress\n * indicators. Uses the `useStreamingUI` hook for SSE connection and state.\n *\n * ## Rendering parity (v6.6.0 — closes Gap 1 of ROADMAP-opendata-macro-mcpui)\n *\n * Each component received over SSE is delegated to the real\n * `<UIResourceRenderer>`. Streamed `table` / `chart` / `map` / `action-group`\n * therefore render with the SAME fidelity as a static layout — no more\n * simplified \"type + title\" placeholder. Validation, telemetry, the error\n * boundary and `errorMode` all come from `<UIResourceRenderer>`, so the two\n * paths cannot drift.\n *\n * Delegation is a one-way value import (`UIResourceRenderer` never imports\n * this file — no cycle). The streamed component's `position` is normalized\n * to full-width before delegation : this component owns the 12-column grid,\n * `<UIResourceRenderer>` only owns the component's own rendering.\n *\n * Features:\n * - Skeleton loading states while components stream\n * - Progress bar and status messages\n * - Smooth component animations on arrival\n * - Error handling with retry capability\n * - Responsive 12-column grid layout\n *\n * Usage:\n * ```tsx\n * <StreamingUIRenderer\n * query=\"Show me revenue trends\"\n * spaceIds={['uuid1', 'uuid2']}\n * onComplete={(metadata) => console.log('Done!', metadata)}\n * />\n * ```\n */\n\nimport { Show, For, createSignal, onMount } from 'solid-js'\nimport { useStreamingUI, type UseStreamingUIOptions } from '../hooks/useStreamingUI'\nimport type { UIComponent, RendererError } from '../types'\nimport { UIResourceRenderer, type ValidationErrorMode } from './UIResourceRenderer'\nimport { useMCPUIStrings } from '../context/MCPUIStringsContext'\n\nexport interface StreamingUIRendererProps extends UseStreamingUIOptions {\n class?: string\n showProgress?: boolean\n showMetadata?: boolean\n onRenderError?: (error: RendererError) => void\n /**\n * How to react when a streamed component fails `validateComponent()`\n * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0\n * behavior). Forwarded to the delegated `<UIResourceRenderer>`.\n */\n errorMode?: ValidationErrorMode\n /**\n * Visibility behavior of the inline expand button on streamed components\n * wrapped in `<ExpandableWrapper>` (v6.6.0 — parity with the static\n * `<UIResourceRenderer toolbarVariant>` prop). Forwarded as-is.\n */\n toolbarVariant?: 'hover' | 'always-visible'\n}\n\n/**\n * The 12-column placement of a streamed component is owned by this\n * component's outer grid (the cell `<div>` below). Delegating the component\n * verbatim to `<UIResourceRenderer>` would re-apply that placement inside a\n * fresh nested 12-column grid and visually misplace it. We hand\n * `<UIResourceRenderer>` a full-width copy so it only renders the component,\n * not a competing layout.\n */\nfunction asFullWidth(component: UIComponent): UIComponent {\n return { ...component, position: { colStart: 1, colSpan: 12 } }\n}\n\nexport function StreamingUIRenderer(props: StreamingUIRendererProps) {\n const { components, isLoading, isStreaming, error, progress, metadata, startStreaming } =\n useStreamingUI({\n query: props.query,\n spaceIds: props.spaceIds,\n sessionId: props.sessionId,\n options: props.options,\n onComplete: props.onComplete,\n onError: props.onError,\n onComponentReceived: props.onComponentReceived,\n })\n\n const strings = useMCPUIStrings()\n const [animatingComponents, setAnimatingComponents] = createSignal<Set<string>>(new Set())\n\n // Track new components for animation\n const handleComponentRender = (componentId: string) => {\n setAnimatingComponents((prev) => new Set([...prev, componentId]))\n\n // Remove from animating set after animation completes\n setTimeout(() => {\n setAnimatingComponents((prev) => {\n const next = new Set(prev)\n next.delete(componentId)\n return next\n })\n }, 500)\n }\n\n return (\n <div class={`streaming-ui-renderer ${props.class || ''}`}>\n {/* Progress Bar */}\n <Show when={props.showProgress !== false && (isLoading() || isStreaming())}>\n <div class=\"mb-4 rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Status Message */}\n <div class=\"mb-2 flex items-center justify-between\">\n <span class=\"text-sm font-medium text-text-primary\">{progress().message}</span>\n <Show when={progress().totalCount !== null}>\n <span class=\"text-sm text-text-secondary\">\n {progress().receivedCount} / {progress().totalCount}\n </span>\n </Show>\n </div>\n\n {/* Progress Bar */}\n <div class=\"h-2 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div\n class=\"h-full bg-brand-primary transition-all duration-300 ease-out\"\n style={\n progress().totalCount !== null\n ? `width: ${(progress().receivedCount / progress().totalCount!) * 100}%`\n : 'width: 0%'\n }\n />\n </div>\n\n {/* Indeterminate Progress (when totalCount unknown) */}\n <Show when={progress().totalCount === null && isStreaming()}>\n <div class=\"mt-2\">\n <div class=\"h-1 w-full overflow-hidden rounded-full bg-surface-tertiary\">\n <div class=\"animate-progress-indeterminate h-full w-1/3 bg-brand-primary\" />\n </div>\n </div>\n </Show>\n </div>\n </Show>\n\n {/* Error State */}\n <Show when={error()}>\n <div class=\"mb-4 rounded-lg border border-border-error bg-error-subtle p-4\">\n <div class=\"mb-2 flex items-center gap-2\">\n <svg\n class=\"h-5 w-5 text-error-primary\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n >\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n stroke-width=\"2\"\n d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"\n />\n </svg>\n <span class=\"font-medium text-error-primary\">{error()?.error}</span>\n </div>\n <p class=\"text-sm text-text-secondary\">{error()?.message}</p>\n\n {/* Retry Button (if recoverable) */}\n <Show when={error()?.recoverable}>\n <button\n type=\"button\"\n class=\"mt-3 rounded-md bg-error-primary px-3 py-1.5 text-sm font-medium text-white hover:bg-error-hover\"\n onClick={() => startStreaming()}\n >\n {strings.retry}\n </button>\n </Show>\n </div>\n </Show>\n\n {/* Components Grid */}\n <div class=\"grid grid-cols-12 gap-4\">\n {/* Render received components — delegated to the real UIResourceRenderer */}\n <For each={components()}>\n {(component) => {\n // Trigger animation on mount (SSR-safe, no 'use' directive needed)\n onMount(() => handleComponentRender(component.id))\n\n return (\n <div\n class={`\n col-span-${component.position.colSpan}\n ${animatingComponents().has(component.id) ? 'animate-fade-in-up' : ''}\n `}\n style={`grid-column-start: ${component.position.colStart}; grid-column-end: ${component.position.colStart + component.position.colSpan}`}\n >\n <UIResourceRenderer\n content={asFullWidth(component)}\n errorMode={props.errorMode}\n onError={props.onRenderError}\n toolbarVariant={props.toolbarVariant}\n />\n </div>\n )\n }}\n </For>\n\n {/* Skeleton placeholders (if streaming and expecting more) */}\n <Show when={isStreaming() && progress().totalCount !== null}>\n <For\n each={Array.from({\n length: progress().totalCount! - progress().receivedCount,\n })}\n >\n {() => <SkeletonComponent />}\n </For>\n </Show>\n </div>\n\n {/* Metadata Display */}\n <Show when={props.showMetadata !== false && metadata()}>\n <div class=\"mt-6 rounded-lg border border-border-subtle bg-surface-secondary p-4 text-sm text-text-secondary\">\n <div class=\"grid grid-cols-2 gap-4 md:grid-cols-4\">\n <div>\n <div class=\"font-medium text-text-primary\">Provider</div>\n <div>{metadata()?.provider}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Model</div>\n <div>{metadata()?.model}</div>\n </div>\n <div>\n <div class=\"font-medium text-text-primary\">Execution Time</div>\n <div>{metadata()?.executionTimeMs}ms</div>\n </div>\n <Show when={metadata()?.costUSD !== undefined}>\n <div>\n <div class=\"font-medium text-text-primary\">Cost</div>\n <div>${metadata()?.costUSD?.toFixed(4)}</div>\n </div>\n </Show>\n <div>\n <div class=\"font-medium text-text-primary\">TTFB</div>\n <div>{metadata()?.firstTokenMs}ms</div>\n </div>\n <Show when={metadata()?.cached}>\n <div>\n <div class=\"font-medium text-text-primary\">Cached</div>\n <div class=\"text-success-primary\">Yes</div>\n </div>\n </Show>\n </div>\n </div>\n </Show>\n </div>\n )\n}\n\n/**\n * Skeleton Component - Placeholder while components load\n */\nfunction SkeletonComponent() {\n return (\n <div class=\"col-span-12 md:col-span-6 lg:col-span-4\">\n <div class=\"animate-pulse rounded-lg border border-border-subtle bg-surface-secondary p-4\">\n {/* Header skeleton */}\n <div class=\"mb-4 h-6 w-1/2 rounded bg-surface-tertiary\" />\n\n {/* Content skeleton */}\n <div class=\"space-y-3\">\n <div class=\"h-4 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-5/6 rounded bg-surface-tertiary\" />\n <div class=\"h-4 w-4/6 rounded bg-surface-tertiary\" />\n </div>\n\n {/* Chart/visual skeleton */}\n <div class=\"mt-4 h-32 rounded bg-surface-tertiary\" />\n </div>\n </div>\n )\n}\n\n// CSS Animations (add to global styles or Tailwind config)\n/*\n@keyframes fade-in-up {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(400%);\n }\n}\n\n.animate-fade-in-up {\n animation: fade-in-up 0.5s ease-out;\n}\n\n.animate-progress-indeterminate {\n animation: progress-indeterminate 1.5s infinite ease-in-out;\n}\n*/\n"],"names":["asFullWidth","component","position","colStart","colSpan","StreamingUIRenderer","props","components","isLoading","isStreaming","error","progress","metadata","startStreaming","useStreamingUI","query","spaceIds","sessionId","options","onComplete","onError","onComponentReceived","strings","useMCPUIStrings","animatingComponents","setAnimatingComponents","createSignal","Set","handleComponentRender","componentId","prev","setTimeout","next","delete","_el$","_$getNextElement","_tmpl$9","_el$60","firstChild","_el$61","_co$11","_$getNextMarker","nextSibling","_el$62","_el$63","_co$12","_el$24","_el$25","_el$26","_co$6","_el$27","_el$28","_co$7","_el$64","_el$65","_co$13","_$insert","_$createComponent","Show","when","_$memo","showProgress","children","_el$2","_tmpl$3","_el$3","_el$4","_el$1","_el$10","_co$3","_el$11","_el$12","_el$14","_el$15","_co$4","message","totalCount","_el$5","_tmpl$","_el$7","_el$8","_co$","_el$6","_el$9","_el$0","_co$2","receivedCount","_tmpl$2","_$effect","_$p","_$style","_el$16","_tmpl$5","_el$17","_el$18","_el$19","_el$20","_el$22","_el$23","_co$5","recoverable","_el$21","_tmpl$4","$$click","retry","_$runHydrationEvents","For","each","onMount","id","_el$66","_tmpl$0","UIResourceRenderer","content","errorMode","onRenderError","toolbarVariant","_p$","_v$","has","_v$2","e","_$className","t","undefined","Array","from","length","SkeletonComponent","showMetadata","_el$29","_tmpl$8","_el$30","_el$31","_el$32","_el$33","_el$34","_el$35","_el$36","_el$37","_el$38","_el$39","_el$41","_el$42","_co$8","_el$56","_el$57","_co$1","_el$49","_el$50","_el$51","_el$53","_el$54","_co$0","_el$58","_el$59","_co$10","provider","model","executionTimeMs","costUSD","_el$43","_tmpl$6","_el$44","_el$45","_el$46","_el$47","_el$48","_co$9","toFixed","firstTokenMs","cached","_tmpl$7","class","_tmpl$1","_$delegateEvents"],"mappings":";;;;;;;;AAsEA,SAASA,YAAYC,WAAqC;AACxD,SAAO;AAAA,IAAE,GAAGA;AAAAA,IAAWC,UAAU;AAAA,MAAEC,UAAU;AAAA,MAAGC,SAAS;AAAA,IAAA;AAAA,EAAG;AAC9D;AAEO,SAASC,oBAAoBC,OAAiC;AACnE,QAAM;AAAA,IAAEC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAaC;AAAAA,IAAOC;AAAAA,IAAUC;AAAAA,IAAUC;AAAAA,EAAAA,IACrEC,8BAAe;AAAA,IACbC,OAAOT,MAAMS;AAAAA,IACbC,UAAUV,MAAMU;AAAAA,IAChBC,WAAWX,MAAMW;AAAAA,IACjBC,SAASZ,MAAMY;AAAAA,IACfC,YAAYb,MAAMa;AAAAA,IAClBC,SAASd,MAAMc;AAAAA,IACfC,qBAAqBf,MAAMe;AAAAA,EAAAA,CAC5B;AAEH,QAAMC,UAAUC,oBAAAA,gBAAAA;AAChB,QAAM,CAACC,qBAAqBC,sBAAsB,IAAIC,QAAAA,aAA0B,oBAAIC,KAAK;AAGzF,QAAMC,wBAAwBA,CAACC,gBAAwB;AACrDJ,2BAAwBK,CAAAA,6BAAaH,IAAI,CAAC,GAAGG,MAAMD,WAAW,CAAC,CAAC;AAGhEE,eAAW,MAAM;AACfN,6BAAwBK,CAAAA,SAAS;AAC/B,cAAME,OAAO,IAAIL,IAAIG,IAAI;AACzBE,aAAKC,OAAOJ,WAAW;AACvB,eAAOG;AAAAA,MACT,CAAC;AAAA,IACH,GAAG,GAAG;AAAA,EACR;AAEA,UAAA,MAAA;AAAA,QAAAE,OAAAC,IAAAA,eAAAC,OAAA,GAAAC,SAAAH,KAAAI,YAAA,CAAAC,QAAAC,MAAA,IAAAC,IAAAA,cAAAJ,OAAAK,WAAA,GAAAC,SAAAJ,OAAAG,aAAA,CAAAE,QAAAC,MAAA,IAAAJ,kBAAAE,OAAAD,WAAA,GAAAI,SAAAF,OAAAF,aAAAK,SAAAD,OAAAR,YAAA,CAAAU,QAAAC,KAAA,IAAAR,IAAAA,cAAAM,OAAAL,WAAA,GAAAQ,SAAAF,OAAAN,aAAA,CAAAS,QAAAC,KAAA,IAAAX,IAAAA,cAAAS,OAAAR,WAAA,GAAAW,SAAAP,OAAAJ,aAAA,CAAAY,QAAAC,MAAA,IAAAd,kBAAAY,OAAAX,WAAA;AAAAc,eAAAtB,MAAAuB,IAAAA,gBAGKC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,IAAAA,KAAA,MAAAtD,MAAMuD,iBAAiB,KAAK,QAAKrD,eAAeC;MAAc;AAAA,MAAA,IAAAqD,WAAA;AAAA,YAAAC,QAAA5B,IAAAA,eAAA6B,OAAA,GAAAC,QAAAF,MAAAzB,YAAA4B,QAAAD,MAAA3B,YAAA6B,QAAAD,MAAAxB,aAAA,CAAA0B,QAAAC,KAAA,IAAA5B,IAAAA,cAAA0B,MAAAzB,WAAA,GAAA4B,SAAAL,MAAAvB,aAAA6B,SAAAD,OAAAhC,YAAAkC,SAAAF,OAAA5B,aAAA,CAAA+B,QAAAC,KAAA,IAAAjC,IAAAA,cAAA+B,OAAA9B,WAAA;AAAAc,YAAAA,OAAAU,OAAA,MAIfvD,SAAAA,EAAWgE,OAAO;AAAAnB,mBAAAS,OAAAR,IAAAA,gBACtEC,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEhD,SAAAA,EAAWiE,eAAe;AAAA,UAAI;AAAA,UAAA,IAAAd,WAAA;AAAA,gBAAAe,QAAA1C,IAAAA,eAAA2C,MAAA,GAAAC,QAAAF,MAAAvC,YAAA,CAAA0C,OAAAC,IAAA,IAAAxC,IAAAA,cAAAsC,MAAArC,WAAA,GAAAwC,QAAAF,MAAAtC,aAAAyC,QAAAD,MAAAxC,aAAA,CAAA0C,OAAAC,KAAA,IAAA5C,kBAAA0C,MAAAzC,WAAA;AAAAc,gBAAAA,OAAAqB,OAAA,MAErClE,SAAAA,EAAW2E,eAAaN,OAAAC,IAAA;AAAAzB,gBAAAA,OAAAqB,OAAA,MAAKlE,SAAAA,EAAWiE,YAAUQ,OAAAC,KAAA;AAAA,mBAAAR;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAT,QAAAC,KAAA;AAAAb,mBAAAO,OAAAN,IAAAA,gBAkBxDC,cAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEC,IAAAA,KAAA,MAAAjD,SAAAA,EAAWiE,eAAe,IAAI,EAAA,KAAInE,YAAAA;AAAAA,UAAa;AAAA,UAAA,IAAAqD,WAAA;AAAA,mBAAA3B,IAAAA,eAAAoD,OAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAd,QAAAC,KAAA;AAAAc,mBAAAC,SAAAC,UAAAnB,QARrD5D,WAAWiE,eAAe,OACtB,UAAWjE,SAAAA,EAAW2E,gBAAgB3E,WAAWiE,aAAe,GAAG,MACnE,aAAWa,GAAA,CAAA;AAAA,eAAA1B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAAxB,QAAAC,MAAA;AAAAgB,eAAAtB,MAAAuB,IAAAA,gBAiBxBC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjD,MAAAA;AAAAA,MAAO;AAAA,MAAA,IAAAoD,WAAA;AAAA,YAAA6B,SAAAxD,IAAAA,eAAAyD,OAAA,GAAAC,SAAAF,OAAArD,YAAAwD,SAAAD,OAAAvD,YAAAyD,SAAAD,OAAApD,aAAAsD,SAAAH,OAAAnD,aAAAuD,SAAAD,OAAAtD,aAAA,CAAAwD,QAAAC,KAAA,IAAA1D,kBAAAwD,OAAAvD,WAAA;AAAAc,YAAAA,OAAAuC,QAAA;;AAgBiCrF,6BAAAA,MAAAA,mBAASA;AAAAA,SAAK;AAAA8C,YAAAA,OAAAwC,QAAA;;AAEtBtF,6BAAAA,MAAAA,mBAASiE;AAAAA,SAAO;AAAAnB,mBAAAmC,QAAAlC,IAAAA,gBAGvDC,cAAI;AAAA,UAAA,IAACC,OAAI;;AAAA,oBAAEjD,iBAAAA,mBAAS0F;AAAAA,UAAW;AAAA,UAAA,IAAAtC,WAAA;AAAA,gBAAAuC,SAAAlE,IAAAA,eAAAmE,OAAA;AAAAD,mBAAAE,UAInB,MAAM1F,eAAAA;AAAgB2C,gBAAAA,OAAA6C,QAAA,MAE9B/E,QAAQkF,KAAK;AAAAC,mCAAAA;AAAA,mBAAAJ;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAH,QAAAC,KAAA;AAAA,eAAAR;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA/C,QAAAC,MAAA;AAAAW,eAAAV,QAAAW,IAAAA,gBASnBiD,aAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEpG,WAAAA;AAAAA,MAAY;AAAA,MAAAuD,UACnB7D,CAAAA,cAAc;AAEd2G,gBAAAA,QAAQ,MAAMhF,sBAAsB3B,UAAU4G,EAAE,CAAC;AAEjD,gBAAA,MAAA;AAAA,cAAAC,SAAA3E,IAAAA,eAAA4E,OAAA;AAAAvD,qBAAAsD,QAAArD,IAAAA,gBAQKuD,uCAAkB;AAAA,YAAA,IACjBC,UAAO;AAAA,qBAAEjH,YAAYC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC/BiH,YAAS;AAAA,qBAAE5G,MAAM4G;AAAAA,YAAS;AAAA,YAAA,IAC1B9F,UAAO;AAAA,qBAAEd,MAAM6G;AAAAA,YAAa;AAAA,YAAA,IAC5BC,iBAAc;AAAA,qBAAE9G,MAAM8G;AAAAA,YAAc;AAAA,UAAA,CAAA,CAAA;AAAA5B,cAAAA,OAAA6B,CAAAA,QAAA;AAAA,gBAAAC,MAV/B;AAAA,6BACMrH,UAAUC,SAASE,OAAO;AAAA,oBACnCoB,sBAAsB+F,IAAItH,UAAU4G,EAAE,IAAI,uBAAuB,EAAE;AAAA,mBACtEW,OACM,sBAAsBvH,UAAUC,SAASC,QAAQ,sBAAsBF,UAAUC,SAASC,WAAWF,UAAUC,SAASE,OAAO;AAAEkH,oBAAAD,IAAAI,KAAAC,IAAAA,UAAAZ,QAAAO,IAAAI,IAAAH,GAAA;AAAAD,gBAAAM,IAAAjC,IAAAA,MAAAoB,QAAAU,MAAAH,IAAAM,CAAA;AAAA,mBAAAN;AAAAA,UAAA,GAAA;AAAA,YAAAI,GAAAG;AAAAA,YAAAD,GAAAC;AAAAA,UAAAA,CAAA;AAAA,iBAAAd;AAAAA,QAAA,GAAA;AAAA,MAU9I;AAAA,IAAA,CAAC,GAAA9D,QAAAC,KAAA;AAAAO,eAAAV,QAAAW,IAAAA,gBAIFC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,IAAAA,KAAA,MAAA,CAAA,CAAAnD,YAAAA,CAAa,EAAA,KAAIE,SAAAA,EAAWiE,eAAe;AAAA,MAAI;AAAA,MAAA,IAAAd,WAAA;AAAA,eAAAL,IAAAA,gBACxDiD,QAAAA,KAAG;AAAA,UAAA,IACFC,OAAI;AAAA,mBAAEkB,MAAMC,KAAK;AAAA,cACfC,QAAQpH,SAAAA,EAAWiE,aAAcjE,WAAW2E;AAAAA,YAAAA,CAC7C;AAAA,UAAC;AAAA,UAAAxB,UAEDA,MAAAL,oBAAOuE,mBAAiB,CAAA,CAAA;AAAA,QAAA,CAAG;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA7E,QAAAC,KAAA;AAAAI,eAAAtB,MAAAuB,IAAAA,gBAMjCC,cAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEC,IAAAA,KAAA,MAAAtD,MAAM2H,iBAAiB,KAAK,EAAA,KAAIrH,SAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAkD,WAAA;AAAA,YAAAoE,SAAA/F,IAAAA,eAAAgG,OAAA,GAAAC,SAAAF,OAAA5F,YAAA+F,SAAAD,OAAA9F,YAAAgG,SAAAD,OAAA/F,YAAAiG,SAAAD,OAAA5F,aAAA8F,SAAAH,OAAA3F,aAAA+F,SAAAD,OAAAlG,YAAAoG,SAAAD,OAAA/F,aAAAiG,SAAAH,OAAA9F,aAAAkG,SAAAD,OAAArG,YAAAuG,SAAAD,OAAAlG,aAAAoG,SAAAD,OAAAvG,YAAA,CAAAyG,QAAAC,KAAA,IAAAvG,IAAAA,cAAAqG,OAAApG,WAAA;AAAAqG,eAAArG;YAAAuG,SAAAN,OAAAjG,aAAA,CAAAwG,QAAAC,KAAA,IAAA1G,IAAAA,cAAAwG,OAAAvG,WAAA,GAAA0G,SAAAF,OAAAxG,aAAA2G,SAAAD,OAAA9G,YAAAgH,SAAAD,OAAA3G,aAAA6G,SAAAD,OAAAhH,YAAA,CAAAkH,QAAAC,KAAA,IAAAhH,IAAAA,cAAA8G,OAAA7G,WAAA;AAAA8G,eAAA9G;YAAAgH,SAAAN,OAAA1G,aAAA,CAAAiH,QAAAC,MAAA,IAAAnH,IAAAA,cAAAiH,OAAAhH,WAAA;AAAAc,YAAAA,OAAA+E,QAAA;;AAKxC3H,gCAAAA,MAAAA,mBAAYiJ;AAAAA,SAAQ;AAAArG,YAAAA,OAAAkF,QAAA;;AAIpB9H,gCAAAA,MAAAA,mBAAYkJ;AAAAA,SAAK;AAAAtG,YAAAA,OAAAqF,QAAA,MAAA;;AAIjBjI,gCAAAA,MAAAA,mBAAYmJ;AAAAA,WAAehB,QAAAC,KAAA;AAAAxF,mBAAA4E,QAAA3E,IAAAA,gBAElCC,cAAI;AAAA,UAAA,IAACC,OAAI;;AAAA,qBAAE/C,cAAAA,MAAAA,mBAAYoJ,aAAYpC;AAAAA,UAAS;AAAA,UAAA,IAAA9D,WAAA;AAAA,gBAAAmG,SAAA9H,mBAAA+H,OAAA,GAAAC,SAAAF,OAAA3H,YAAA8H,SAAAD,OAAAzH,aAAA2H,SAAAD,OAAA9H,YAAAgI,SAAAD,OAAA3H,aAAA,CAAA6H,QAAAC,KAAA,IAAA/H,IAAAA,cAAA6H,OAAA5H,WAAA;AAAAc,uBAAA4G,QAAA,MAAA;;AAGlCxJ,gDAAAA,mBAAYoJ,YAAZpJ,mBAAqB6J,QAAQ;AAAA,eAAEF,QAAAC,KAAA;AAAA,mBAAAP;AAAAA,UAAA;AAAA,QAAA,CAAA,GAAAf,QAAAC,KAAA;AAAA3F,YAAAA,OAAA8F,QAAA,MAAA;;AAKlC1I,gCAAAA,MAAAA,mBAAY8J;AAAAA,WAAYlB,QAAAC,KAAA;AAAAjG,mBAAA4E,QAAA3E,IAAAA,gBAE/BC,cAAI;AAAA,UAAA,IAACC,OAAI;;AAAA,oBAAE/C,oBAAAA,mBAAY+J;AAAAA,UAAM;AAAA,UAAA,IAAA7G,WAAA;AAAA,mBAAA3B,IAAAA,eAAAyI,OAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAjB,QAAAC,MAAA;AAAA,eAAA1B;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA5E,QAAAC,MAAA;AAAAiC,eAAA,MAAAkC,cAAAxF,MAxI1B,yBAAyB5B,MAAMuK,SAAS,EAAE,EAAE,CAAA;AAAA,WAAA3I;AAAAA,EAAA,GAAA;AAmJ5D;AAKA,SAAS8F,oBAAoB;AAC3B,SAAA7F,IAAAA,eAAA2I,OAAA;AAkBF;AAGAC,IAAAA,eAAA,CAAA,OAAA,CAAA;;"}
@@ -1,8 +1,22 @@
1
1
  /**
2
- * StreamingUIRenderer Component - Phase 2
2
+ * StreamingUIRenderer Component
3
3
  *
4
- * Renders streaming dashboard components with skeleton states and progress indicators.
5
- * Uses the useStreamingUI hook for SSE connection and state management.
4
+ * Renders streaming dashboard components with skeleton states and progress
5
+ * indicators. Uses the `useStreamingUI` hook for SSE connection and state.
6
+ *
7
+ * ## Rendering parity (v6.6.0 — closes Gap 1 of ROADMAP-opendata-macro-mcpui)
8
+ *
9
+ * Each component received over SSE is delegated to the real
10
+ * `<UIResourceRenderer>`. Streamed `table` / `chart` / `map` / `action-group`
11
+ * therefore render with the SAME fidelity as a static layout — no more
12
+ * simplified "type + title" placeholder. Validation, telemetry, the error
13
+ * boundary and `errorMode` all come from `<UIResourceRenderer>`, so the two
14
+ * paths cannot drift.
15
+ *
16
+ * Delegation is a one-way value import (`UIResourceRenderer` never imports
17
+ * this file — no cycle). The streamed component's `position` is normalized
18
+ * to full-width before delegation : this component owns the 12-column grid,
19
+ * `<UIResourceRenderer>` only owns the component's own rendering.
6
20
  *
7
21
  * Features:
8
22
  * - Skeleton loading states while components stream
@@ -22,7 +36,7 @@
22
36
  */
23
37
  import { type UseStreamingUIOptions } from '../hooks/useStreamingUI';
24
38
  import type { RendererError } from '../types';
25
- import type { ValidationErrorMode } from './UIResourceRenderer';
39
+ import { type ValidationErrorMode } from './UIResourceRenderer';
26
40
  export interface StreamingUIRendererProps extends UseStreamingUIOptions {
27
41
  class?: string;
28
42
  showProgress?: boolean;
@@ -31,9 +45,15 @@ export interface StreamingUIRendererProps extends UseStreamingUIOptions {
31
45
  /**
32
46
  * How to react when a streamed component fails `validateComponent()`
33
47
  * (v5.4.0). Defaults to `'block'` (full red error card — pre-v5.4.0
34
- * behavior). See `ValidationErrorMode` in `UIResourceRenderer`.
48
+ * behavior). Forwarded to the delegated `<UIResourceRenderer>`.
35
49
  */
36
50
  errorMode?: ValidationErrorMode;
51
+ /**
52
+ * Visibility behavior of the inline expand button on streamed components
53
+ * wrapped in `<ExpandableWrapper>` (v6.6.0 — parity with the static
54
+ * `<UIResourceRenderer toolbarVariant>` prop). Forwarded as-is.
55
+ */
56
+ toolbarVariant?: 'hover' | 'always-visible';
37
57
  }
38
58
  export declare function StreamingUIRenderer(props: StreamingUIRendererProps): import("solid-js").JSX.Element;
39
59
  //# sourceMappingURL=StreamingUIRenderer.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAK1D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAE/D,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAA;CAChC;AA6JD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCA+KlE"}
1
+ {"version":3,"file":"StreamingUIRenderer.d.ts","sourceRoot":"","sources":["../../src/components/StreamingUIRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAGH,OAAO,EAAkB,KAAK,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AACpF,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,UAAU,CAAA;AAC1D,OAAO,EAAsB,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAA;AAGnF,MAAM,WAAW,wBAAyB,SAAQ,qBAAqB;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC9C;;;;OAIG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAA;IAC/B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,gBAAgB,CAAA;CAC5C;AAcD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,kCAiLlE"}