@seed-ship/mcp-ui-solid 1.0.2

package/dist/StreamingUIRenderer-oyg_cKKl.js

@@ -0,0 +1,757 @@
+import { delegateEvents as V, createComponent as s, memo as S, template as u, insert as l, addEventListener as J, effect as b, style as F, className as T, setStyleProperty as E, setAttribute as Q, use as Z } from "solid-js/web";
+import { createSignal as k, ErrorBoundary as ee, Show as v, For as I, onMount as te } from "solid-js";
+import { c as re, u as ne } from "./useStreamingUI-BL0nh13E.js";
+const R = {
+  maxDataPoints: 1e3,
+  maxTableRows: 100,
+  maxPayloadSize: 50 * 1024,
+  // 50KB
+  renderTimeout: 5e3
+  // 5 seconds
+};
+function ae(e) {
+  const t = [];
+  return (e.colStart < 1 || e.colStart > 12) && t.push({
+    path: "position.colStart",
+    message: "Column start must be between 1 and 12",
+    code: "INVALID_GRID_COL_START"
+  }), (e.colSpan < 1 || e.colSpan > 12) && t.push({
+    path: "position.colSpan",
+    message: "Column span must be between 1 and 12",
+    code: "INVALID_GRID_COL_SPAN"
+  }), e.colStart + e.colSpan - 1 > 12 && t.push({
+    path: "position",
+    message: "Column start + span exceeds grid width (12)",
+    code: "GRID_OVERFLOW"
+  }), e.rowStart !== void 0 && e.rowStart < 1 && t.push({
+    path: "position.rowStart",
+    message: "Row start must be >= 1",
+    code: "INVALID_GRID_ROW_START"
+  }), e.rowSpan !== void 0 && e.rowSpan < 1 && t.push({
+    path: "position.rowSpan",
+    message: "Row span must be >= 1",
+    code: "INVALID_GRID_ROW_SPAN"
+  }), {
+    valid: t.length === 0,
+    errors: t.length > 0 ? t : void 0
+  };
+}
+function le(e, t = R) {
+  const r = [], o = e.data.datasets.reduce(
+    (a, n) => a + n.data.length,
+    0
+  );
+  o > t.maxDataPoints && r.push({
+    path: "params.data",
+    message: `Chart exceeds max data points: ${o} > ${t.maxDataPoints}`,
+    code: "RESOURCE_LIMIT_EXCEEDED"
+  });
+  const i = e.data.labels.length;
+  for (const [a, n] of e.data.datasets.entries())
+    n.data.length !== i && r.push({
+      path: `params.data.datasets[${a}]`,
+      message: `Dataset length mismatch: expected ${i}, got ${n.data.length}`,
+      code: "DATA_LENGTH_MISMATCH"
+    });
+  for (const [a, n] of e.data.datasets.entries())
+    for (const [d, c] of n.data.entries())
+      (typeof c != "number" || !Number.isFinite(c)) && r.push({
+        path: `params.data.datasets[${a}].data[${d}]`,
+        message: `Invalid data value: ${c} (must be finite number)`,
+        code: "INVALID_DATA_TYPE"
+      });
+  return {
+    valid: r.length === 0,
+    errors: r.length > 0 ? r : void 0
+  };
+}
+function ie(e, t = R) {
+  const r = [];
+  e.rows.length > t.maxTableRows && r.push({
+    path: "params.rows",
+    message: `Table exceeds max rows: ${e.rows.length} > ${t.maxTableRows}`,
+    code: "RESOURCE_LIMIT_EXCEEDED"
+  }), e.columns.length === 0 && r.push({
+    path: "params.columns",
+    message: "Table must have at least one column",
+    code: "EMPTY_COLUMNS"
+  });
+  const o = /* @__PURE__ */ new Set();
+  for (const [i, a] of e.columns.entries())
+    o.has(a.key) && r.push({
+      path: `params.columns[${i}]`,
+      message: `Duplicate column key: ${a.key}`,
+      code: "DUPLICATE_COLUMN_KEY"
+    }), o.add(a.key);
+  for (const [i, a] of e.rows.entries())
+    for (const n of e.columns)
+      n.key in a || r.push({
+        path: `params.rows[${i}]`,
+        message: `Missing column key: ${n.key}`,
+        code: "MISSING_COLUMN_DATA"
+      });
+  return {
+    valid: r.length === 0,
+    errors: r.length > 0 ? r : void 0
+  };
+}
+function oe(e, t = R) {
+  const r = JSON.stringify(e).length;
+  return r > t.maxPayloadSize ? {
+    valid: !1,
+    errors: [
+      {
+        path: "component",
+        message: `Payload size exceeds limit: ${r} > ${t.maxPayloadSize} bytes`,
+        code: "PAYLOAD_TOO_LARGE"
+      }
+    ]
+  } : { valid: !0 };
+}
+function L(e, t = R) {
+  const r = [], o = ae(e.position);
+  o.valid || r.push(...o.errors || []);
+  const i = oe(e, t);
+  switch (i.valid || r.push(...i.errors || []), e.type) {
+    case "chart":
+      const a = le(e.params, t);
+      a.valid || r.push(...a.errors || []);
+      break;
+    case "table":
+      const n = ie(e.params, t);
+      n.valid || r.push(...n.errors || []);
+      break;
+    case "metric":
+      const d = e.params;
+      (!d.title || !d.value) && r.push({
+        path: "params",
+        message: "Metric must have title and value",
+        code: "INVALID_METRIC"
+      });
+      break;
+    case "text":
+      e.params.content || r.push({
+        path: "params",
+        message: "Text component must have content",
+        code: "INVALID_TEXT"
+      });
+      break;
+    default:
+      r.push({
+        path: "type",
+        message: `Unknown component type: ${e.type}`,
+        code: "UNKNOWN_COMPONENT_TYPE"
+      });
+  }
+  return {
+    valid: r.length === 0,
+    errors: r.length > 0 ? r : void 0
+  };
+}
+function tt(e, t = R) {
+  var o;
+  const r = [];
+  e.components.length === 0 && r.push({
+    path: "components",
+    message: "Layout must have at least one component",
+    code: "EMPTY_LAYOUT"
+  }), e.components.length > 12 && r.push({
+    path: "components",
+    message: `Layout exceeds max components: ${e.components.length} > 12`,
+    code: "TOO_MANY_COMPONENTS"
+  });
+  for (const [i, a] of e.components.entries()) {
+    const n = L(a, t);
+    n.valid || r.push(
+      ...((o = n.errors) == null ? void 0 : o.map((d) => ({
+        ...d,
+        path: `components[${i}].${d.path}`
+      }))) || []
+    );
+  }
+  return e.grid.columns !== 12 && r.push({
+    path: "grid.columns",
+    message: "Grid must have 12 columns (Bootstrap-like)",
+    code: "INVALID_GRID_COLUMNS"
+  }), {
+    valid: r.length === 0,
+    errors: r.length > 0 ? r : void 0
+  };
+}
+var se = /* @__PURE__ */ u('<p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono">'), de = /* @__PURE__ */ u('<button class="mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline">Retry Rendering'), ce = /* @__PURE__ */ u('<div class="w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4"><div class="flex items-start gap-3"><div class=flex-shrink-0><svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400"fill=none stroke=currentColor viewBox="0 0 24 24"><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg></div><div class="flex-1 min-w-0"><p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">Component Failed to Render</p><p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">Type: <!> | ID: <!>...');
+const z = re("generative-ui");
+function ue(e) {
+  return (() => {
+    var t = ce(), r = t.firstChild, o = r.firstChild, i = o.nextSibling, a = i.firstChild, n = a.nextSibling, d = n.firstChild, c = d.nextSibling, h = c.nextSibling, m = h.nextSibling;
+    return m.nextSibling, l(n, () => e.componentType, c), l(n, () => e.componentId.slice(0, 8), m), l(i, s(v, {
+      get when() {
+        return !1;
+      },
+      get children() {
+        var g = se();
+        return l(g, () => e.error.message), g;
+      }
+    }), null), l(i, s(v, {
+      get when() {
+        return e.allowRetry;
+      },
+      get children() {
+        var g = de();
+        return J(g, "click", e.onRetry, !0), g;
+      }
+    }), null), t;
+  })();
+}
+const Y = (e) => {
+  const [t, r] = k(0), [o] = k(performance.now()), i = (n) => {
+    var m;
+    const c = performance.now() - o(), h = {
+      componentId: e.componentId,
+      componentType: e.componentType,
+      errorMessage: n.message,
+      errorStack: n.stack,
+      renderDuration: c,
+      retryCount: t(),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      userAgent: navigator.userAgent,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight
+      }
+    };
+    z.error(`Component render failed: ${e.componentType}`, h), (m = e.onError) == null || m.call(e, {
+      type: "render",
+      message: n.message,
+      componentId: e.componentId,
+      details: h
+    });
+  }, a = () => {
+    const n = t() + 1;
+    z.info(`Retrying component render: ${e.componentType}`, {
+      componentId: e.componentId,
+      retryCount: n
+    }), r(n);
+  };
+  return s(ee, {
+    fallback: (n) => (i(n), e.fallback ? e.fallback(n, e.allowRetry ? a : void 0) : s(ue, {
+      error: n,
+      get componentId() {
+        return e.componentId;
+      },
+      get componentType() {
+        return e.componentType;
+      },
+      get allowRetry() {
+        return e.allowRetry;
+      },
+      onRetry: a
+    })),
+    get children() {
+      return t(), S(() => e.children);
+    }
+  });
+};
+V(["click"]);
+var me = /* @__PURE__ */ u('<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">'), ge = /* @__PURE__ */ u('<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">'), j = /* @__PURE__ */ u('<h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">'), he = /* @__PURE__ */ u('<div class="w-full h-full p-4"><div class="w-full h-full"><img alt="Chart visualization"class="w-full h-auto max-h-[300px] object-contain">'), ve = /* @__PURE__ */ u('<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">'), fe = /* @__PURE__ */ u('<div class="mt-3 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Showing <!> - <!> of '), xe = /* @__PURE__ */ u('<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"><div class=p-4><div class=overflow-x-auto><table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700"><thead class="bg-gray-50 dark:bg-gray-900"><tr></tr></thead><tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">'), pe = /* @__PURE__ */ u('<th scope=col class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">'), $e = /* @__PURE__ */ u('<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">'), ye = /* @__PURE__ */ u('<td class="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">'), _e = /* @__PURE__ */ u('<span class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">'), be = /* @__PURE__ */ u('<div class="mt-3 flex items-center"><span> <!>%'), we = /* @__PURE__ */ u('<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">'), Ce = /* @__PURE__ */ u('<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4"><div class="flex flex-col h-full justify-between"><div><p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide"></p><div class="mt-2 flex items-baseline"><p class="text-2xl font-semibold text-gray-900 dark:text-white">'), Se = /* @__PURE__ */ u('<div class="w-full h-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4"><div>'), ke = /* @__PURE__ */ u('<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">'), Ie = /* @__PURE__ */ u('<div><div class="grid gap-4">'), Re = /* @__PURE__ */ u("<div>");
+function Ee(e) {
+  const [t, r] = k(), [o, i] = k(!0), [a, n] = k();
+  return te(() => {
+    const d = e.component.params, c = {
+      type: d.type,
+      data: d.data,
+      options: {
+        ...d.options,
+        responsive: !0,
+        maintainAspectRatio: !1
+      }
+    }, m = `https://quickchart.io/chart?c=${encodeURIComponent(JSON.stringify(c))}&width=500&height=300&devicePixelRatio=2`;
+    r(m), i(!1);
+  }), (() => {
+    var d = ve();
+    return l(d, s(v, {
+      get when() {
+        return o();
+      },
+      get children() {
+        return me();
+      }
+    }), null), l(d, s(v, {
+      get when() {
+        return a();
+      },
+      get children() {
+        var c = ge(), h = c.firstChild, m = h.firstChild, g = m.nextSibling;
+        return l(g, a), c;
+      }
+    }), null), l(d, s(v, {
+      get when() {
+        return S(() => !!t())() && !a();
+      },
+      get children() {
+        var c = he(), h = c.firstChild, m = h.firstChild;
+        return l(c, s(v, {
+          get when() {
+            return e.component.params.title;
+          },
+          get children() {
+            var g = j();
+            return l(g, () => e.component.params.title), g;
+          }
+        }), h), m.addEventListener("error", () => {
+          var g;
+          n("Failed to load chart"), (g = e.onError) == null || g.call(e, {
+            type: "render",
+            message: "Chart rendering failed",
+            componentId: e.component.id
+          });
+        }), b(() => Q(m, "src", t())), c;
+      }
+    }), null), d;
+  })();
+}
+function Te(e) {
+  const t = e.component.params;
+  return (() => {
+    var r = xe(), o = r.firstChild, i = o.firstChild, a = i.firstChild, n = a.firstChild, d = n.firstChild, c = n.nextSibling;
+    return l(o, s(v, {
+      get when() {
+        return t.title;
+      },
+      get children() {
+        var h = j();
+        return l(h, () => t.title), h;
+      }
+    }), i), l(d, s(I, {
+      get each() {
+        return t.columns;
+      },
+      children: (h) => (() => {
+        var m = pe();
+        return l(m, () => h.label), b((g) => F(m, h.width ? {
+          width: h.width
+        } : {}, g)), m;
+      })()
+    })), l(c, s(I, {
+      get each() {
+        return t.rows.slice(0, R.maxTableRows);
+      },
+      children: (h) => (() => {
+        var m = $e();
+        return l(m, s(I, {
+          get each() {
+            return t.columns;
+          },
+          children: (g) => (() => {
+            var y = ye();
+            return l(y, () => h[g.key] || "-"), y;
+          })()
+        })), m;
+      })()
+    })), l(o, s(v, {
+      get when() {
+        return t.pagination;
+      },
+      get children() {
+        var h = fe(), m = h.firstChild, g = m.firstChild, y = g.nextSibling, f = y.nextSibling, p = f.nextSibling;
+        return p.nextSibling, l(m, () => t.pagination.currentPage * t.pagination.pageSize + 1, y), l(m, () => Math.min((t.pagination.currentPage + 1) * t.pagination.pageSize, t.pagination.totalRows), p), l(m, () => t.pagination.totalRows, null), h;
+      }
+    }), null), r;
+  })();
+}
+function De(e) {
+  const t = e.component.params;
+  return (() => {
+    var r = Ce(), o = r.firstChild, i = o.firstChild, a = i.firstChild, n = a.nextSibling, d = n.firstChild;
+    return l(a, () => t.title), l(d, () => t.value), l(n, s(v, {
+      get when() {
+        return t.unit;
+      },
+      get children() {
+        var c = _e();
+        return l(c, () => t.unit), c;
+      }
+    }), null), l(o, s(v, {
+      get when() {
+        return t.trend;
+      },
+      get children() {
+        var c = be(), h = c.firstChild, m = h.firstChild, g = m.nextSibling;
+        return g.nextSibling, l(h, (() => {
+          var y = S(() => t.trend.direction === "up");
+          return () => (y() || t.trend.direction === "down", "�");
+        })(), m), l(h, () => Math.abs(t.trend.value), g), b(() => T(h, `text-sm font-medium ${t.trend.direction === "up" ? "text-green-600 dark:text-green-400" : t.trend.direction === "down" ? "text-red-600 dark:text-red-400" : "text-gray-600 dark:text-gray-400"}`)), c;
+      }
+    }), null), l(o, s(v, {
+      get when() {
+        return t.subtitle;
+      },
+      get children() {
+        var c = we();
+        return l(c, () => t.subtitle), c;
+      }
+    }), null), r;
+  })();
+}
+function Le(e) {
+  const t = e.component.params;
+  return (() => {
+    var r = Se(), o = r.firstChild;
+    return b((i) => {
+      var a = `prose prose-sm dark:prose-invert max-w-none ${t.className || ""}`, n = t.content;
+      return a !== i.e && T(o, i.e = a), n !== i.t && (o.innerHTML = i.t = n), i;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+function Pe(e) {
+  var r;
+  const t = L(e.component);
+  return t.valid ? s(Y, {
+    get componentId() {
+      return e.component.id;
+    },
+    get componentType() {
+      return e.component.type;
+    },
+    get onError() {
+      return e.onError;
+    },
+    allowRetry: !0,
+    get children() {
+      return [s(v, {
+        get when() {
+          return e.component.type === "chart";
+        },
+        get children() {
+          return s(Ee, {
+            get component() {
+              return e.component;
+            },
+            get onError() {
+              return e.onError;
+            }
+          });
+        }
+      }), s(v, {
+        get when() {
+          return e.component.type === "table";
+        },
+        get children() {
+          return s(Te, {
+            get component() {
+              return e.component;
+            },
+            get onError() {
+              return e.onError;
+            }
+          });
+        }
+      }), s(v, {
+        get when() {
+          return e.component.type === "metric";
+        },
+        get children() {
+          return s(De, {
+            get component() {
+              return e.component;
+            }
+          });
+        }
+      }), s(v, {
+        get when() {
+          return e.component.type === "text";
+        },
+        get children() {
+          return s(Le, {
+            get component() {
+              return e.component;
+            }
+          });
+        }
+      })];
+    }
+  }) : ((r = e.onError) == null || r.call(e, {
+    type: "validation",
+    message: "Component validation failed",
+    componentId: e.component.id,
+    details: t.errors
+  }), (() => {
+    var o = ke(), i = o.firstChild, a = i.nextSibling;
+    return l(a, () => {
+      var n, d;
+      return ((d = (n = t.errors) == null ? void 0 : n[0]) == null ? void 0 : d.message) || "Unknown validation error";
+    }), o;
+  })());
+}
+const rt = (e) => {
+  const t = () => "type" in e.content ? {
+    id: "single-component",
+    components: [e.content],
+    grid: {
+      columns: 12,
+      gap: "1rem"
+    }
+  } : e.content, r = (o) => {
+    const {
+      colStart: i,
+      colSpan: a,
+      rowStart: n,
+      rowSpan: d = 1
+    } = o.position;
+    return {
+      "grid-column": `${i} / span ${a}`,
+      "grid-row": n ? `${n} / span ${d}` : "auto"
+    };
+  };
+  return (() => {
+    var o = Ie(), i = o.firstChild;
+    return l(i, s(I, {
+      get each() {
+        return t().components;
+      },
+      children: (a) => (() => {
+        var n = Re();
+        return l(n, s(Pe, {
+          component: a,
+          get onError() {
+            return e.onError;
+          }
+        })), b((d) => F(n, r(a), d)), n;
+      })()
+    })), b((a) => {
+      var n = `w-full ${e.class || ""}`, d = `repeat(${t().grid.columns}, 1fr)`, c = t().grid.gap;
+      return n !== a.e && T(o, a.e = n), d !== a.t && E(i, "grid-template-columns", a.t = d), c !== a.a && E(i, "gap", a.a = c), a;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0
+    }), o;
+  })();
+};
+var Ae = /* @__PURE__ */ u('<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">'), Me = /* @__PURE__ */ u('<h3 class="text-sm font-semibold text-text-primary">'), Ne = /* @__PURE__ */ u('<span class="text-sm text-text-secondary">'), Oe = /* @__PURE__ */ u('<div class=mt-2><p class="text-2xl font-semibold text-text-primary">'), Ue = /* @__PURE__ */ u('<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: <!>...'), Ge = /* @__PURE__ */ u('<span class="text-sm text-text-secondary"> / '), ze = /* @__PURE__ */ u('<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">'), Ve = /* @__PURE__ */ u('<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">'), Fe = /* @__PURE__ */ u('<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'), Ye = /* @__PURE__ */ u('<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">'), je = /* @__PURE__ */ u('<div><div class="font-medium text-text-primary">Cost</div><div>$'), Be = /* @__PURE__ */ u('<div><div class="font-medium text-text-primary">Cached</div><div class=text-success-primary>Yes'), Ke = /* @__PURE__ */ u('<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'), We = /* @__PURE__ */ u('<div><div class="grid grid-cols-12 gap-4">'), He = /* @__PURE__ */ u("<div>"), qe = /* @__PURE__ */ u('<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">');
+function Xe(e) {
+  var o;
+  const t = L(e.component);
+  if (!t.valid)
+    return (o = e.onError) == null || o.call(e, {
+      type: "validation",
+      message: "Component validation failed",
+      componentId: e.component.id,
+      details: t.errors
+    }), (() => {
+      var i = Ae(), a = i.firstChild, n = a.nextSibling;
+      return l(n, () => {
+        var d, c;
+        return ((c = (d = t.errors) == null ? void 0 : d[0]) == null ? void 0 : c.message) || "Unknown validation error";
+      }), i;
+    })();
+  const r = e.component.params;
+  return s(Y, {
+    get componentId() {
+      return e.component.id;
+    },
+    get componentType() {
+      return e.component.type;
+    },
+    get onError() {
+      return e.onError;
+    },
+    allowRetry: !1,
+    get children() {
+      var i = Ue(), a = i.firstChild, n = a.firstChild, d = a.nextSibling, c = d.firstChild, h = c.nextSibling;
+      return h.nextSibling, l(n, () => e.component.type), l(i, s(v, {
+        get when() {
+          return r == null ? void 0 : r.title;
+        },
+        get children() {
+          var m = Me();
+          return l(m, () => r.title), m;
+        }
+      }), d), l(i, s(v, {
+        get when() {
+          return S(() => e.component.type === "metric")() && (r == null ? void 0 : r.value);
+        },
+        get children() {
+          var m = Oe(), g = m.firstChild;
+          return l(g, () => r.value), l(m, s(v, {
+            get when() {
+              return r.unit;
+            },
+            get children() {
+              var y = Ne();
+              return l(y, () => r.unit), y;
+            }
+          }), null), m;
+        }
+      }), d), l(d, () => e.component.id.slice(0, 8), h), i;
+    }
+  });
+}
+function nt(e) {
+  const {
+    components: t,
+    isLoading: r,
+    isStreaming: o,
+    error: i,
+    progress: a,
+    metadata: n,
+    startStreaming: d
+  } = ne({
+    query: e.query,
+    spaceIds: e.spaceIds,
+    sessionId: e.sessionId,
+    options: e.options,
+    onComplete: e.onComplete,
+    onError: e.onError,
+    onComponentReceived: e.onComponentReceived
+  }), [c, h] = k(/* @__PURE__ */ new Set()), m = (g) => {
+    h((y) => /* @__PURE__ */ new Set([...y, g])), setTimeout(() => {
+      h((y) => {
+        const f = new Set(y);
+        return f.delete(g), f;
+      });
+    }, 500);
+  };
+  return (() => {
+    var g = We(), y = g.firstChild;
+    return l(g, s(v, {
+      get when() {
+        return S(() => e.showProgress !== !1)() && (r() || o());
+      },
+      get children() {
+        var f = Ve(), p = f.firstChild, _ = p.firstChild, w = p.nextSibling, C = w.firstChild;
+        return l(_, () => a().message), l(p, s(v, {
+          get when() {
+            return a().totalCount !== null;
+          },
+          get children() {
+            var x = Ge(), D = x.firstChild;
+            return l(x, () => a().receivedCount, D), l(x, () => a().totalCount, null), x;
+          }
+        }), null), l(f, s(v, {
+          get when() {
+            return S(() => a().totalCount === null)() && o();
+          },
+          get children() {
+            return ze();
+          }
+        }), null), b((x) => E(C, "width", a().totalCount !== null ? `${a().receivedCount / a().totalCount * 100}%` : "0%")), f;
+      }
+    }), y), l(g, s(v, {
+      get when() {
+        return i();
+      },
+      get children() {
+        var f = Ye(), p = f.firstChild, _ = p.firstChild, w = _.nextSibling, C = p.nextSibling;
+        return l(w, () => {
+          var x;
+          return (x = i()) == null ? void 0 : x.error;
+        }), l(C, () => {
+          var x;
+          return (x = i()) == null ? void 0 : x.message;
+        }), l(f, s(v, {
+          get when() {
+            var x;
+            return (x = i()) == null ? void 0 : x.recoverable;
+          },
+          get children() {
+            var x = Fe();
+            return x.$$click = () => d(), x;
+          }
+        }), null), f;
+      }
+    }), y), l(y, s(I, {
+      get each() {
+        return t();
+      },
+      children: (f) => (() => {
+        var p = He();
+        return Z(() => m(f.id), p), l(p, s(Xe, {
+          component: f,
+          get onError() {
+            return e.onRenderError;
+          }
+        })), b((_) => {
+          var w = `
+                col-span-${f.position.colSpan}
+                ${c().has(f.id) ? "animate-fade-in-up" : ""}
+              `, C = f.position.colStart, x = f.position.colStart + f.position.colSpan;
+          return w !== _.e && T(p, _.e = w), C !== _.t && E(p, "grid-column-start", _.t = C), x !== _.a && E(p, "grid-column-end", _.a = x), _;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        }), p;
+      })()
+    }), null), l(y, s(v, {
+      get when() {
+        return S(() => !!o())() && a().totalCount !== null;
+      },
+      get children() {
+        return s(I, {
+          get each() {
+            return Array.from({
+              length: a().totalCount - a().receivedCount
+            });
+          },
+          children: () => s(Je, {})
+        });
+      }
+    }), null), l(g, s(v, {
+      get when() {
+        return S(() => e.showMetadata !== !1)() && n();
+      },
+      get children() {
+        var f = Ke(), p = f.firstChild, _ = p.firstChild, w = _.firstChild, C = w.nextSibling, x = _.nextSibling, D = x.firstChild, B = D.nextSibling, P = x.nextSibling, K = P.firstChild, A = K.nextSibling, W = A.firstChild, M = P.nextSibling, H = M.firstChild, N = H.nextSibling, q = N.firstChild;
+        return l(C, () => {
+          var $;
+          return ($ = n()) == null ? void 0 : $.provider;
+        }), l(B, () => {
+          var $;
+          return ($ = n()) == null ? void 0 : $.model;
+        }), l(A, () => {
+          var $;
+          return ($ = n()) == null ? void 0 : $.executionTimeMs;
+        }, W), l(p, s(v, {
+          get when() {
+            var $;
+            return (($ = n()) == null ? void 0 : $.costUSD) !== void 0;
+          },
+          get children() {
+            var $ = je(), X = $.firstChild, O = X.nextSibling;
+            return O.firstChild, l(O, () => {
+              var U, G;
+              return (G = (U = n()) == null ? void 0 : U.costUSD) == null ? void 0 : G.toFixed(4);
+            }, null), $;
+          }
+        }), M), l(N, () => {
+          var $;
+          return ($ = n()) == null ? void 0 : $.firstTokenMs;
+        }, q), l(p, s(v, {
+          get when() {
+            var $;
+            return ($ = n()) == null ? void 0 : $.cached;
+          },
+          get children() {
+            return Be();
+          }
+        }), null), f;
+      }
+    }), null), b(() => T(g, `streaming-ui-renderer ${e.class || ""}`)), g;
+  })();
+}
+function Je() {
+  return qe();
+}
+V(["click"]);
+export {
+  R as D,
+  Y as G,
+  nt as S,
+  rt as U,
+  tt as a,
+  L as v
+};
+//# sourceMappingURL=StreamingUIRenderer-oyg_cKKl.js.map