@frontmcp/uipack 0.12.2 → 1.0.0-beta.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 (298) hide show
  1. package/CLAUDE.md +56 -154
  2. package/README.md +367 -62
  3. package/adapters/base-template.d.ts +30 -0
  4. package/adapters/base-template.d.ts.map +1 -0
  5. package/adapters/cdn-info.d.ts +34 -0
  6. package/adapters/cdn-info.d.ts.map +1 -0
  7. package/adapters/constants.d.ts +18 -0
  8. package/adapters/constants.d.ts.map +1 -0
  9. package/adapters/content-detector.d.ts +19 -0
  10. package/adapters/content-detector.d.ts.map +1 -0
  11. package/adapters/content-renderers.d.ts +27 -0
  12. package/adapters/content-renderers.d.ts.map +1 -0
  13. package/adapters/index.d.ts +14 -7
  14. package/adapters/index.d.ts.map +1 -1
  15. package/adapters/index.js +2343 -426
  16. package/adapters/render-failure.d.ts +18 -0
  17. package/adapters/render-failure.d.ts.map +1 -0
  18. package/adapters/response-builder.d.ts +34 -104
  19. package/adapters/response-builder.d.ts.map +1 -1
  20. package/adapters/serving-mode.d.ts +28 -91
  21. package/adapters/serving-mode.d.ts.map +1 -1
  22. package/adapters/template-renderer.d.ts +50 -0
  23. package/adapters/template-renderer.d.ts.map +1 -0
  24. package/adapters/type-detector.d.ts +18 -0
  25. package/adapters/type-detector.d.ts.map +1 -0
  26. package/bridge-runtime/index.js +1 -1
  27. package/component/index.d.ts +14 -0
  28. package/component/index.d.ts.map +1 -0
  29. package/component/index.js +2043 -0
  30. package/component/loader.d.ts +36 -0
  31. package/component/loader.d.ts.map +1 -0
  32. package/component/renderer.d.ts +30 -0
  33. package/component/renderer.d.ts.map +1 -0
  34. package/component/transpiler.d.ts +49 -0
  35. package/component/transpiler.d.ts.map +1 -0
  36. package/component/types.d.ts +82 -0
  37. package/component/types.d.ts.map +1 -0
  38. package/esm/adapters/index.mjs +2337 -422
  39. package/esm/bridge-runtime/index.mjs +1 -1
  40. package/esm/component/index.mjs +2013 -0
  41. package/esm/index.mjs +3446 -13935
  42. package/esm/package.json +3 -12
  43. package/esm/resolver/index.mjs +661 -0
  44. package/esm/shell/index.mjs +1406 -0
  45. package/esm/types/index.mjs +11 -11
  46. package/esm/utils/index.mjs +53 -8
  47. package/index.d.ts +12 -40
  48. package/index.d.ts.map +1 -1
  49. package/index.js +3579 -14218
  50. package/package.json +3 -12
  51. package/resolver/cdn-registry.d.ts +39 -0
  52. package/resolver/cdn-registry.d.ts.map +1 -0
  53. package/resolver/esm-sh.resolver.d.ts +54 -0
  54. package/resolver/esm-sh.resolver.d.ts.map +1 -0
  55. package/resolver/import-map.d.ts +47 -0
  56. package/resolver/import-map.d.ts.map +1 -0
  57. package/resolver/import-parser.d.ts +28 -0
  58. package/resolver/import-parser.d.ts.map +1 -0
  59. package/resolver/import-rewriter.d.ts +29 -0
  60. package/resolver/import-rewriter.d.ts.map +1 -0
  61. package/resolver/index.d.ts +15 -0
  62. package/resolver/index.d.ts.map +1 -0
  63. package/resolver/index.js +708 -0
  64. package/resolver/types.d.ts +191 -0
  65. package/resolver/types.d.ts.map +1 -0
  66. package/shell/builder.d.ts +31 -0
  67. package/shell/builder.d.ts.map +1 -0
  68. package/shell/csp.d.ts +37 -0
  69. package/shell/csp.d.ts.map +1 -0
  70. package/shell/custom-shell-applier.d.ts +33 -0
  71. package/shell/custom-shell-applier.d.ts.map +1 -0
  72. package/shell/custom-shell-resolver.d.ts +47 -0
  73. package/shell/custom-shell-resolver.d.ts.map +1 -0
  74. package/shell/custom-shell-types.d.ts +75 -0
  75. package/shell/custom-shell-types.d.ts.map +1 -0
  76. package/shell/custom-shell-validator.d.ts +26 -0
  77. package/shell/custom-shell-validator.d.ts.map +1 -0
  78. package/shell/data-injector.d.ts +40 -0
  79. package/shell/data-injector.d.ts.map +1 -0
  80. package/shell/index.d.ts +19 -0
  81. package/shell/index.d.ts.map +1 -0
  82. package/shell/index.js +1453 -0
  83. package/shell/types.d.ts +54 -0
  84. package/shell/types.d.ts.map +1 -0
  85. package/types/index.d.ts +1 -3
  86. package/types/index.d.ts.map +1 -1
  87. package/types/index.js +11 -11
  88. package/types/ui-config.d.ts +50 -11
  89. package/types/ui-config.d.ts.map +1 -1
  90. package/types/ui-runtime.d.ts +8 -82
  91. package/types/ui-runtime.d.ts.map +1 -1
  92. package/utils/index.d.ts +9 -3
  93. package/utils/index.d.ts.map +1 -1
  94. package/utils/index.js +59 -7
  95. package/adapters/platform-meta.constants.d.ts +0 -26
  96. package/adapters/platform-meta.constants.d.ts.map +0 -1
  97. package/adapters/platform-meta.d.ts +0 -234
  98. package/adapters/platform-meta.d.ts.map +0 -1
  99. package/base-template/bridge.d.ts +0 -90
  100. package/base-template/bridge.d.ts.map +0 -1
  101. package/base-template/default-base-template.d.ts +0 -91
  102. package/base-template/default-base-template.d.ts.map +0 -1
  103. package/base-template/index.d.ts +0 -15
  104. package/base-template/index.d.ts.map +0 -1
  105. package/base-template/index.js +0 -1393
  106. package/base-template/polyfills.d.ts +0 -31
  107. package/base-template/polyfills.d.ts.map +0 -1
  108. package/base-template/theme-styles.d.ts +0 -74
  109. package/base-template/theme-styles.d.ts.map +0 -1
  110. package/build/builders/base-builder.d.ts +0 -124
  111. package/build/builders/base-builder.d.ts.map +0 -1
  112. package/build/builders/esbuild-config.d.ts +0 -94
  113. package/build/builders/esbuild-config.d.ts.map +0 -1
  114. package/build/builders/hybrid-builder.d.ts +0 -93
  115. package/build/builders/hybrid-builder.d.ts.map +0 -1
  116. package/build/builders/index.d.ts +0 -17
  117. package/build/builders/index.d.ts.map +0 -1
  118. package/build/builders/inline-builder.d.ts +0 -83
  119. package/build/builders/inline-builder.d.ts.map +0 -1
  120. package/build/builders/static-builder.d.ts +0 -78
  121. package/build/builders/static-builder.d.ts.map +0 -1
  122. package/build/builders/types.d.ts +0 -341
  123. package/build/builders/types.d.ts.map +0 -1
  124. package/build/cdn-resources.d.ts +0 -244
  125. package/build/cdn-resources.d.ts.map +0 -1
  126. package/build/hybrid-data.d.ts +0 -127
  127. package/build/hybrid-data.d.ts.map +0 -1
  128. package/build/index.d.ts +0 -299
  129. package/build/index.d.ts.map +0 -1
  130. package/build/index.js +0 -8699
  131. package/build/ui-components-browser.d.ts +0 -64
  132. package/build/ui-components-browser.d.ts.map +0 -1
  133. package/build/widget-manifest.d.ts +0 -362
  134. package/build/widget-manifest.d.ts.map +0 -1
  135. package/bundler/cache.d.ts +0 -173
  136. package/bundler/cache.d.ts.map +0 -1
  137. package/bundler/file-cache/component-builder.d.ts +0 -167
  138. package/bundler/file-cache/component-builder.d.ts.map +0 -1
  139. package/bundler/file-cache/hash-calculator.d.ts +0 -155
  140. package/bundler/file-cache/hash-calculator.d.ts.map +0 -1
  141. package/bundler/file-cache/index.d.ts +0 -12
  142. package/bundler/file-cache/index.d.ts.map +0 -1
  143. package/bundler/file-cache/storage/filesystem.d.ts +0 -149
  144. package/bundler/file-cache/storage/filesystem.d.ts.map +0 -1
  145. package/bundler/file-cache/storage/index.d.ts +0 -11
  146. package/bundler/file-cache/storage/index.d.ts.map +0 -1
  147. package/bundler/file-cache/storage/interface.d.ts +0 -152
  148. package/bundler/file-cache/storage/interface.d.ts.map +0 -1
  149. package/bundler/file-cache/storage/redis.d.ts +0 -139
  150. package/bundler/file-cache/storage/redis.d.ts.map +0 -1
  151. package/bundler/index.d.ts +0 -35
  152. package/bundler/index.d.ts.map +0 -1
  153. package/bundler/index.js +0 -2953
  154. package/bundler/sandbox/enclave-adapter.d.ts +0 -121
  155. package/bundler/sandbox/enclave-adapter.d.ts.map +0 -1
  156. package/bundler/sandbox/executor.d.ts +0 -14
  157. package/bundler/sandbox/executor.d.ts.map +0 -1
  158. package/bundler/sandbox/policy.d.ts +0 -62
  159. package/bundler/sandbox/policy.d.ts.map +0 -1
  160. package/bundler/types.d.ts +0 -702
  161. package/bundler/types.d.ts.map +0 -1
  162. package/dependency/cdn-registry.d.ts +0 -98
  163. package/dependency/cdn-registry.d.ts.map +0 -1
  164. package/dependency/import-map.d.ts +0 -186
  165. package/dependency/import-map.d.ts.map +0 -1
  166. package/dependency/import-parser.d.ts +0 -82
  167. package/dependency/import-parser.d.ts.map +0 -1
  168. package/dependency/index.d.ts +0 -17
  169. package/dependency/index.d.ts.map +0 -1
  170. package/dependency/index.js +0 -3180
  171. package/dependency/resolver.d.ts +0 -164
  172. package/dependency/resolver.d.ts.map +0 -1
  173. package/dependency/schemas.d.ts +0 -486
  174. package/dependency/schemas.d.ts.map +0 -1
  175. package/dependency/template-loader.d.ts +0 -204
  176. package/dependency/template-loader.d.ts.map +0 -1
  177. package/dependency/template-processor.d.ts +0 -118
  178. package/dependency/template-processor.d.ts.map +0 -1
  179. package/dependency/types.d.ts +0 -739
  180. package/dependency/types.d.ts.map +0 -1
  181. package/esm/base-template/index.mjs +0 -1359
  182. package/esm/build/index.mjs +0 -8601
  183. package/esm/bundler/index.mjs +0 -2895
  184. package/esm/dependency/index.mjs +0 -3068
  185. package/esm/handlebars/index.mjs +0 -587
  186. package/esm/registry/index.mjs +0 -6305
  187. package/esm/renderers/index.mjs +0 -1557
  188. package/esm/runtime/index.mjs +0 -5361
  189. package/esm/styles/index.mjs +0 -171
  190. package/esm/theme/index.mjs +0 -756
  191. package/esm/tool-template/index.mjs +0 -3652
  192. package/esm/validation/index.mjs +0 -542
  193. package/handlebars/expression-extractor.d.ts +0 -147
  194. package/handlebars/expression-extractor.d.ts.map +0 -1
  195. package/handlebars/helpers.d.ts +0 -339
  196. package/handlebars/helpers.d.ts.map +0 -1
  197. package/handlebars/index.d.ts +0 -195
  198. package/handlebars/index.d.ts.map +0 -1
  199. package/handlebars/index.js +0 -659
  200. package/preview/claude-preview.d.ts +0 -67
  201. package/preview/claude-preview.d.ts.map +0 -1
  202. package/preview/generic-preview.d.ts +0 -66
  203. package/preview/generic-preview.d.ts.map +0 -1
  204. package/preview/index.d.ts +0 -36
  205. package/preview/index.d.ts.map +0 -1
  206. package/preview/openai-preview.d.ts +0 -70
  207. package/preview/openai-preview.d.ts.map +0 -1
  208. package/preview/types.d.ts +0 -199
  209. package/preview/types.d.ts.map +0 -1
  210. package/registry/index.d.ts +0 -46
  211. package/registry/index.d.ts.map +0 -1
  212. package/registry/index.js +0 -6342
  213. package/registry/render-template.d.ts +0 -91
  214. package/registry/render-template.d.ts.map +0 -1
  215. package/registry/tool-ui.registry.d.ts +0 -294
  216. package/registry/tool-ui.registry.d.ts.map +0 -1
  217. package/registry/uri-utils.d.ts +0 -56
  218. package/registry/uri-utils.d.ts.map +0 -1
  219. package/renderers/cache.d.ts +0 -145
  220. package/renderers/cache.d.ts.map +0 -1
  221. package/renderers/html.renderer.d.ts +0 -123
  222. package/renderers/html.renderer.d.ts.map +0 -1
  223. package/renderers/index.d.ts +0 -36
  224. package/renderers/index.d.ts.map +0 -1
  225. package/renderers/index.js +0 -1603
  226. package/renderers/mdx-client.renderer.d.ts +0 -124
  227. package/renderers/mdx-client.renderer.d.ts.map +0 -1
  228. package/renderers/registry.d.ts +0 -133
  229. package/renderers/registry.d.ts.map +0 -1
  230. package/renderers/types.d.ts +0 -343
  231. package/renderers/types.d.ts.map +0 -1
  232. package/renderers/utils/detect.d.ts +0 -107
  233. package/renderers/utils/detect.d.ts.map +0 -1
  234. package/renderers/utils/hash.d.ts +0 -40
  235. package/renderers/utils/hash.d.ts.map +0 -1
  236. package/renderers/utils/index.d.ts +0 -9
  237. package/renderers/utils/index.d.ts.map +0 -1
  238. package/renderers/utils/transpiler.d.ts +0 -70
  239. package/renderers/utils/transpiler.d.ts.map +0 -1
  240. package/runtime/adapters/html.adapter.d.ts +0 -59
  241. package/runtime/adapters/html.adapter.d.ts.map +0 -1
  242. package/runtime/adapters/index.d.ts +0 -26
  243. package/runtime/adapters/index.d.ts.map +0 -1
  244. package/runtime/adapters/mdx.adapter.d.ts +0 -73
  245. package/runtime/adapters/mdx.adapter.d.ts.map +0 -1
  246. package/runtime/adapters/types.d.ts +0 -95
  247. package/runtime/adapters/types.d.ts.map +0 -1
  248. package/runtime/csp.d.ts +0 -48
  249. package/runtime/csp.d.ts.map +0 -1
  250. package/runtime/index.d.ts +0 -17
  251. package/runtime/index.d.ts.map +0 -1
  252. package/runtime/index.js +0 -5432
  253. package/runtime/mcp-bridge.d.ts +0 -101
  254. package/runtime/mcp-bridge.d.ts.map +0 -1
  255. package/runtime/renderer-runtime.d.ts +0 -133
  256. package/runtime/renderer-runtime.d.ts.map +0 -1
  257. package/runtime/sanitizer.d.ts +0 -180
  258. package/runtime/sanitizer.d.ts.map +0 -1
  259. package/runtime/types.d.ts +0 -415
  260. package/runtime/types.d.ts.map +0 -1
  261. package/runtime/wrapper.d.ts +0 -421
  262. package/runtime/wrapper.d.ts.map +0 -1
  263. package/styles/index.d.ts +0 -8
  264. package/styles/index.d.ts.map +0 -1
  265. package/styles/index.js +0 -222
  266. package/styles/variants.d.ts +0 -51
  267. package/styles/variants.d.ts.map +0 -1
  268. package/theme/cdn.d.ts +0 -195
  269. package/theme/cdn.d.ts.map +0 -1
  270. package/theme/css-to-theme.d.ts +0 -64
  271. package/theme/css-to-theme.d.ts.map +0 -1
  272. package/theme/index.d.ts +0 -19
  273. package/theme/index.d.ts.map +0 -1
  274. package/theme/index.js +0 -814
  275. package/theme/platforms.d.ts +0 -102
  276. package/theme/platforms.d.ts.map +0 -1
  277. package/theme/presets/github-openai.d.ts +0 -50
  278. package/theme/presets/github-openai.d.ts.map +0 -1
  279. package/theme/presets/index.d.ts +0 -11
  280. package/theme/presets/index.d.ts.map +0 -1
  281. package/theme/theme.d.ts +0 -396
  282. package/theme/theme.d.ts.map +0 -1
  283. package/tool-template/builder.d.ts +0 -213
  284. package/tool-template/builder.d.ts.map +0 -1
  285. package/tool-template/index.d.ts +0 -16
  286. package/tool-template/index.d.ts.map +0 -1
  287. package/tool-template/index.js +0 -3690
  288. package/validation/error-box.d.ts +0 -56
  289. package/validation/error-box.d.ts.map +0 -1
  290. package/validation/index.d.ts +0 -13
  291. package/validation/index.d.ts.map +0 -1
  292. package/validation/index.js +0 -576
  293. package/validation/schema-paths.d.ts +0 -118
  294. package/validation/schema-paths.d.ts.map +0 -1
  295. package/validation/template-validator.d.ts +0 -143
  296. package/validation/template-validator.d.ts.map +0 -1
  297. package/validation/wrapper.d.ts +0 -97
  298. package/validation/wrapper.d.ts.map +0 -1
@@ -1,1393 +0,0 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
-
20
- // libs/uipack/src/base-template/index.ts
21
- var base_template_exports = {};
22
- __export(base_template_exports, {
23
- BRIDGE_TYPES: () => BRIDGE_TYPES,
24
- createDefaultBaseTemplate: () => createDefaultBaseTemplate,
25
- createMinimalBaseTemplate: () => createMinimalBaseTemplate,
26
- renderBridgeScript: () => renderBridgeScript,
27
- renderMcpSessionPolyfill: () => renderMcpSessionPolyfill,
28
- renderMinimalThemeStyles: () => renderMinimalThemeStyles,
29
- renderThemeCssOnly: () => renderThemeCssOnly,
30
- renderThemeStyles: () => renderThemeStyles
31
- });
32
- module.exports = __toCommonJS(base_template_exports);
33
-
34
- // libs/uipack/src/theme/cdn.ts
35
- var CDN = {
36
- /**
37
- * Tailwind CSS v4 Browser CDN
38
- * Generates styles on-the-fly with @theme support
39
- * @see https://tailwindcss.com/docs/installation/play-cdn
40
- */
41
- tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
42
- /**
43
- * HTMX 2.x - High power tools for HTML
44
- * Enables AJAX, WebSockets, Server Sent Events directly in HTML
45
- * @see https://htmx.org
46
- */
47
- htmx: {
48
- url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
49
- integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
50
- },
51
- /**
52
- * Alpine.js - Lightweight reactive framework
53
- * Used for more complex client-side interactions
54
- * @see https://alpinejs.dev
55
- */
56
- alpine: {
57
- url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
58
- integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
59
- },
60
- /**
61
- * Google Fonts - Inter for modern UI typography
62
- */
63
- fonts: {
64
- preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
65
- inter: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
66
- mono: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
67
- },
68
- /**
69
- * Lucide Icons - Beautiful & consistent icons
70
- * @see https://lucide.dev
71
- */
72
- icons: {
73
- url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js",
74
- integrity: "sha384-wpLmHb7v7V1LsEuTmPQ9tXqWZvTtRWWVqJuE+Yz6X0I6O2T6bHJVeXH1lVWqF4qE"
75
- }
76
- };
77
- var scriptCache = /* @__PURE__ */ new Map();
78
- function getCachedScript(url) {
79
- return scriptCache.get(url);
80
- }
81
- function buildScriptTag(url, integrity, options = {}) {
82
- const attrs = [`src="${url}"`];
83
- if (integrity) {
84
- attrs.push(`integrity="${integrity}"`);
85
- attrs.push('crossorigin="anonymous"');
86
- }
87
- if (options.defer) attrs.push("defer");
88
- if (options.async) attrs.push("async");
89
- return `<script ${attrs.join(" ")}></script>`;
90
- }
91
- function buildInlineScriptTag(content) {
92
- return `<script>${content}</script>`;
93
- }
94
- function buildFontPreconnectFromTheme(theme) {
95
- const preconnect = theme.cdn?.fonts?.preconnect ?? CDN.fonts.preconnect;
96
- return preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n ");
97
- }
98
- function buildFontStylesheetsFromTheme(theme) {
99
- const stylesheets = theme.cdn?.fonts?.stylesheets ?? [CDN.fonts.inter];
100
- return stylesheets.map((url) => `<link href="${url}" rel="stylesheet">`).join("\n ");
101
- }
102
- function buildCdnScriptsFromTheme(theme, options = {}) {
103
- const { tailwind = true, htmx = true, alpine = false, icons = false, inline = false } = options;
104
- const scripts = [];
105
- const tailwindUrl = theme.cdn?.scripts?.tailwind ?? CDN.tailwind;
106
- const htmxConfig = theme.cdn?.scripts?.htmx ?? CDN.htmx;
107
- const alpineConfig = theme.cdn?.scripts?.alpine ?? CDN.alpine;
108
- const iconsConfig = theme.cdn?.icons?.script ?? CDN.icons;
109
- if (inline) {
110
- if (tailwind) {
111
- const cached = getCachedScript(tailwindUrl);
112
- if (cached) {
113
- scripts.push(buildInlineScriptTag(cached));
114
- } else {
115
- console.warn(
116
- "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScriptsFromTheme() first."
117
- );
118
- }
119
- }
120
- if (htmx) {
121
- const cached = getCachedScript(htmxConfig.url);
122
- if (cached) {
123
- scripts.push(buildInlineScriptTag(cached));
124
- } else {
125
- console.warn(
126
- "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScriptsFromTheme() first."
127
- );
128
- }
129
- }
130
- if (alpine) {
131
- const cached = getCachedScript(alpineConfig.url);
132
- if (cached) {
133
- scripts.push(buildInlineScriptTag(cached));
134
- } else {
135
- console.warn(
136
- "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScriptsFromTheme() first."
137
- );
138
- }
139
- }
140
- if (icons) {
141
- const cached = getCachedScript(iconsConfig.url);
142
- if (cached) {
143
- scripts.push(buildInlineScriptTag(cached));
144
- } else {
145
- console.warn(
146
- "[frontmcp/ui] Inline mode requested but icons script not cached. Call fetchAndCacheScriptsFromTheme() first."
147
- );
148
- }
149
- }
150
- } else {
151
- if (tailwind) {
152
- scripts.push(buildScriptTag(tailwindUrl));
153
- }
154
- if (htmx) {
155
- scripts.push(buildScriptTag(htmxConfig.url, htmxConfig.integrity));
156
- }
157
- if (alpine) {
158
- scripts.push(buildScriptTag(alpineConfig.url, alpineConfig.integrity, { defer: true }));
159
- }
160
- if (icons) {
161
- scripts.push(buildScriptTag(iconsConfig.url, iconsConfig.integrity));
162
- }
163
- }
164
- return scripts.join("\n ");
165
- }
166
-
167
- // libs/uipack/src/theme/presets/github-openai.ts
168
- var GITHUB_OPENAI_THEME = {
169
- name: "github-openai",
170
- colors: {
171
- semantic: {
172
- // Primary: Near-black for main actions and branding
173
- primary: "#24292f",
174
- // Secondary: Medium gray for secondary elements
175
- secondary: "#57606a",
176
- // Accent: Blue for links, focus states, and highlights
177
- accent: "#0969da",
178
- // Status colors
179
- success: "#1a7f37",
180
- // GitHub green
181
- warning: "#9a6700",
182
- // Amber warning
183
- danger: "#cf222e",
184
- // GitHub red
185
- info: "#0969da"
186
- // Blue info
187
- },
188
- surface: {
189
- // Pure white background
190
- background: "#ffffff",
191
- // Light gray surface (GitHub code background style)
192
- surface: "#f6f8fa",
193
- // White elevated surfaces (modals, cards)
194
- elevated: "#ffffff",
195
- // Dark semi-transparent overlay
196
- overlay: "rgba(27, 31, 36, 0.5)"
197
- },
198
- text: {
199
- // Near-black for primary text
200
- primary: "#24292f",
201
- // Gray for secondary/muted text
202
- secondary: "#57606a",
203
- // Light gray for disabled text
204
- disabled: "#8c959f",
205
- // White for text on dark backgrounds
206
- inverse: "#ffffff",
207
- // Blue for links
208
- link: "#0969da"
209
- },
210
- border: {
211
- // Light gray border (GitHub style)
212
- default: "#d0d7de",
213
- // Medium gray on hover
214
- hover: "#8c959f",
215
- // Blue focus ring
216
- focus: "#0969da",
217
- // Subtle divider
218
- divider: "#d8dee4"
219
- }
220
- },
221
- typography: {
222
- families: {
223
- // System UI font stack (GitHub/Apple style)
224
- sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
225
- // Monospace stack
226
- mono: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace'
227
- },
228
- sizes: {
229
- xs: "0.75rem",
230
- // 12px
231
- sm: "0.875rem",
232
- // 14px
233
- base: "1rem",
234
- // 16px
235
- lg: "1.125rem",
236
- // 18px
237
- xl: "1.25rem",
238
- // 20px
239
- "2xl": "1.5rem",
240
- // 24px
241
- "3xl": "1.875rem",
242
- // 30px
243
- "4xl": "2.25rem"
244
- // 36px
245
- },
246
- weights: {
247
- normal: "400",
248
- medium: "500",
249
- semibold: "600",
250
- bold: "700"
251
- }
252
- },
253
- radius: {
254
- none: "0",
255
- sm: "3px",
256
- // GitHub uses smaller radii
257
- md: "6px",
258
- lg: "8px",
259
- xl: "12px",
260
- "2xl": "16px",
261
- full: "9999px"
262
- },
263
- shadows: {
264
- // Subtle shadows with gray tones
265
- sm: "0 1px 0 rgba(27, 31, 36, 0.04)",
266
- md: "0 3px 6px rgba(140, 149, 159, 0.15)",
267
- lg: "0 8px 24px rgba(140, 149, 159, 0.2)",
268
- xl: "0 12px 28px rgba(140, 149, 159, 0.3)"
269
- },
270
- components: {
271
- button: {
272
- radius: "6px",
273
- paddingX: "16px",
274
- paddingY: "5px",
275
- fontSize: "14px",
276
- fontWeight: "500"
277
- },
278
- card: {
279
- radius: "6px",
280
- padding: "16px",
281
- shadow: "0 1px 0 rgba(27, 31, 36, 0.04)",
282
- borderWidth: "1px"
283
- },
284
- input: {
285
- radius: "6px",
286
- paddingX: "12px",
287
- paddingY: "5px",
288
- borderWidth: "1px",
289
- focusRingWidth: "3px"
290
- }
291
- },
292
- cdn: {
293
- fonts: {
294
- preconnect: ["https://fonts.googleapis.com", "https://fonts.gstatic.com"],
295
- stylesheets: [
296
- // System UI fonts don't need external stylesheets, but we include
297
- // Inter as an optional enhancement for consistent cross-platform rendering
298
- "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
299
- ]
300
- },
301
- icons: {
302
- script: {
303
- url: "https://cdn.jsdelivr.net/npm/lucide@0.294.0/dist/umd/lucide.min.js"
304
- }
305
- },
306
- scripts: {
307
- tailwind: "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4",
308
- htmx: {
309
- url: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.7/htmx.min.js",
310
- integrity: "sha512-T6VLg/MJYMbLTmQ8VLvonbWg8VOvmDhXcOvHzCwo6ShdGuUU5SEcp1IAPXL4k9lVoMi8gRXl5K/S/zh43Y9rJA=="
311
- },
312
- alpine: {
313
- url: "https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js",
314
- integrity: "sha384-6zY8MFQJ/EqS1r4RJl+7j8rvZPuBWpT0RzWf+IFcKhxqUzQNmJzA1X1VEVZhYaEz"
315
- }
316
- }
317
- }
318
- };
319
- var DEFAULT_THEME = GITHUB_OPENAI_THEME;
320
-
321
- // libs/uipack/src/theme/theme.ts
322
- function emitColorScale(lines, name, scale) {
323
- for (const [shade, value] of Object.entries(scale)) {
324
- if (value) lines.push(`--color-${name}-${shade}: ${value};`);
325
- }
326
- }
327
- var OPACITY_VARIANTS = [10, 20, 30, 50, 70, 90];
328
- function emitColorWithOpacityVariants(lines, name, value) {
329
- lines.push(`--color-${name}: ${value};`);
330
- for (const opacity of OPACITY_VARIANTS) {
331
- lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
332
- }
333
- }
334
- function emitBrandColorWithVariants(lines, name, value) {
335
- lines.push(`--color-${name}: ${value};`);
336
- lines.push(`--color-${name}-hover: color-mix(in oklch, ${value} 85%, black);`);
337
- for (const opacity of OPACITY_VARIANTS) {
338
- lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
339
- }
340
- }
341
- function buildThemeCss(theme) {
342
- const lines = [];
343
- const semantic = theme.colors.semantic;
344
- if (typeof semantic.primary === "string") {
345
- emitBrandColorWithVariants(lines, "primary", semantic.primary);
346
- } else if (semantic.primary) {
347
- emitColorScale(lines, "primary", semantic.primary);
348
- }
349
- if (semantic.secondary) {
350
- if (typeof semantic.secondary === "string") {
351
- emitBrandColorWithVariants(lines, "secondary", semantic.secondary);
352
- } else {
353
- emitColorScale(lines, "secondary", semantic.secondary);
354
- }
355
- }
356
- if (semantic.accent) {
357
- if (typeof semantic.accent === "string") {
358
- lines.push(`--color-accent: ${semantic.accent};`);
359
- } else {
360
- emitColorScale(lines, "accent", semantic.accent);
361
- }
362
- }
363
- if (semantic.neutral) {
364
- if (typeof semantic.neutral === "string") {
365
- lines.push(`--color-neutral: ${semantic.neutral};`);
366
- } else {
367
- emitColorScale(lines, "neutral", semantic.neutral);
368
- }
369
- }
370
- if (semantic.success) emitColorWithOpacityVariants(lines, "success", semantic.success);
371
- if (semantic.warning) emitColorWithOpacityVariants(lines, "warning", semantic.warning);
372
- if (semantic.danger) emitColorWithOpacityVariants(lines, "danger", semantic.danger);
373
- if (semantic.info) emitColorWithOpacityVariants(lines, "info", semantic.info);
374
- const surface = theme.colors.surface;
375
- if (surface?.background) lines.push(`--color-background: ${surface.background};`);
376
- if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
377
- if (surface?.elevated) lines.push(`--color-elevated: ${surface.elevated};`);
378
- if (surface?.overlay) lines.push(`--color-overlay: ${surface.overlay};`);
379
- const text = theme.colors.text;
380
- if (text?.primary) lines.push(`--color-text-primary: ${text.primary};`);
381
- if (text?.secondary) lines.push(`--color-text-secondary: ${text.secondary};`);
382
- if (text?.disabled) lines.push(`--color-text-disabled: ${text.disabled};`);
383
- if (text?.inverse) lines.push(`--color-text-inverse: ${text.inverse};`);
384
- if (text?.link) lines.push(`--color-text-link: ${text.link};`);
385
- const border = theme.colors.border;
386
- if (border?.default) lines.push(`--color-border: ${border.default};`);
387
- if (border?.hover) lines.push(`--color-border-hover: ${border.hover};`);
388
- if (border?.focus) lines.push(`--color-border-focus: ${border.focus};`);
389
- if (border?.divider) lines.push(`--color-divider: ${border.divider};`);
390
- if (theme.colors.custom) {
391
- for (const [key, value] of Object.entries(theme.colors.custom)) {
392
- lines.push(`--color-${key}: ${value};`);
393
- }
394
- }
395
- const typography = theme.typography;
396
- if (typography?.families?.sans) lines.push(`--font-sans: ${typography.families.sans};`);
397
- if (typography?.families?.serif) lines.push(`--font-serif: ${typography.families.serif};`);
398
- if (typography?.families?.mono) lines.push(`--font-mono: ${typography.families.mono};`);
399
- if (typography?.families?.display) lines.push(`--font-display: ${typography.families.display};`);
400
- const radius = theme.radius;
401
- if (radius?.none) lines.push(`--radius-none: ${radius.none};`);
402
- if (radius?.sm) lines.push(`--radius-sm: ${radius.sm};`);
403
- if (radius?.md) lines.push(`--radius-md: ${radius.md};`);
404
- if (radius?.lg) lines.push(`--radius-lg: ${radius.lg};`);
405
- if (radius?.xl) lines.push(`--radius-xl: ${radius.xl};`);
406
- if (radius?.["2xl"]) lines.push(`--radius-2xl: ${radius["2xl"]};`);
407
- if (radius?.full) lines.push(`--radius-full: ${radius.full};`);
408
- if (theme.customVars) {
409
- for (const [key, value] of Object.entries(theme.customVars)) {
410
- lines.push(`${key}: ${value};`);
411
- }
412
- }
413
- return lines.join("\n ");
414
- }
415
- function buildStyleBlock(theme) {
416
- const themeCss = buildThemeCss(theme);
417
- const customCss = theme.customCss || "";
418
- return `<style type="text/tailwindcss">
419
- @theme {
420
- ${themeCss}
421
- }
422
- ${customCss}
423
- </style>`;
424
- }
425
-
426
- // libs/uipack/src/base-template/theme-styles.ts
427
- function renderThemeStyles(options = {}) {
428
- const {
429
- theme = DEFAULT_THEME,
430
- tailwind = true,
431
- htmx = false,
432
- alpine = false,
433
- fonts = true,
434
- inline = false
435
- } = options;
436
- const parts = [];
437
- if (fonts && !inline) {
438
- parts.push(buildFontPreconnectFromTheme(theme));
439
- }
440
- if (fonts && !inline) {
441
- parts.push(buildFontStylesheetsFromTheme(theme));
442
- }
443
- const scriptOptions = {
444
- tailwind,
445
- htmx,
446
- alpine,
447
- inline
448
- };
449
- parts.push(buildCdnScriptsFromTheme(theme, scriptOptions));
450
- parts.push(buildStyleBlock(theme));
451
- return parts.filter(Boolean).join("\n ");
452
- }
453
- function renderMinimalThemeStyles(theme = DEFAULT_THEME) {
454
- return renderThemeStyles({
455
- theme,
456
- tailwind: true,
457
- htmx: false,
458
- alpine: false,
459
- fonts: false,
460
- inline: false
461
- });
462
- }
463
- function renderThemeCssOnly(theme = DEFAULT_THEME) {
464
- return buildStyleBlock(theme);
465
- }
466
-
467
- // libs/uipack/src/base-template/polyfills.ts
468
- function renderMcpSessionPolyfill(mcpSession) {
469
- const fallbackCode = mcpSession ? `
470
- return {
471
- mcpUrl: '${escapeJs(mcpSession.mcpUrl)}',
472
- sessionId: '${escapeJs(mcpSession.sessionId)}'
473
- };` : `
474
- return null;`;
475
- return `<script>
476
- (function() {
477
- 'use strict';
478
-
479
- window.__frontmcp = window.__frontmcp || {};
480
-
481
- /**
482
- * Auto-detect MCP session from page context.
483
- * Tries multiple sources in order of priority.
484
- */
485
- window.__frontmcp.detectMcpSession = function() {
486
- // 1. Check if explicitly set by developer
487
- if (window.__frontmcp.mcpSession) {
488
- return window.__frontmcp.mcpSession;
489
- }
490
-
491
- // 2. Check meta tags
492
- var mcpUrlMeta = document.querySelector('meta[name="mcp-url"]');
493
- var sessionIdMeta = document.querySelector('meta[name="mcp-session-id"]');
494
- if (mcpUrlMeta && sessionIdMeta) {
495
- return {
496
- mcpUrl: mcpUrlMeta.getAttribute('content'),
497
- sessionId: sessionIdMeta.getAttribute('content')
498
- };
499
- }
500
-
501
- // 3. Check URL query parameters (for ngrok/iframe scenarios)
502
- try {
503
- var params = new URLSearchParams(window.location.search);
504
- var mcpUrl = params.get('mcpUrl');
505
- var sessionId = params.get('sessionId');
506
- if (mcpUrl && sessionId) {
507
- return { mcpUrl: mcpUrl, sessionId: sessionId };
508
- }
509
- } catch (e) {
510
- // URLSearchParams may not be available in all environments
511
- }
512
-
513
- // 4. Use explicit fallback if provided at render time
514
- ${fallbackCode}
515
- };
516
-
517
- /**
518
- * Enhanced callTool that uses HTTP fallback when MCP bridge is unavailable.
519
- * This wraps window.mcpBridge.callTool with HTTP fallback support.
520
- */
521
- window.__frontmcp.callTool = async function(toolName, args) {
522
- // Priority 1: Direct OpenAI SDK call (most reliable in OpenAI iframe)
523
- if (typeof window !== 'undefined' && window.openai && typeof window.openai.callTool === 'function') {
524
- return window.openai.callTool(toolName, args);
525
- }
526
-
527
- // Priority 2: If MCP bridge has callTool, use it
528
- if (window.mcpBridge && typeof window.mcpBridge.callTool === 'function') {
529
- try {
530
- return await window.mcpBridge.callTool(toolName, args);
531
- } catch (e) {
532
- // If MCP bridge fails, fall through to HTTP fallback
533
- console.warn('MCP bridge callTool failed, trying HTTP fallback:', e.message);
534
- }
535
- }
536
-
537
- // Priority 3: HTTP fallback using detected session
538
- var session = window.__frontmcp.detectMcpSession();
539
- if (!session) {
540
- throw new Error(
541
- 'MCP session not available. Set window.__frontmcp.mcpSession, ' +
542
- 'add meta tags, or provide URL parameters.'
543
- );
544
- }
545
-
546
- var response = await fetch(session.mcpUrl, {
547
- method: 'POST',
548
- headers: {
549
- 'Content-Type': 'application/json',
550
- 'X-Session-Id': session.sessionId
551
- },
552
- body: JSON.stringify({
553
- jsonrpc: '2.0',
554
- method: 'tools/call',
555
- params: { name: toolName, arguments: args || {} },
556
- id: Date.now()
557
- })
558
- });
559
-
560
- if (!response.ok) {
561
- throw new Error('HTTP ' + response.status + ': ' + response.statusText);
562
- }
563
-
564
- var result = await response.json();
565
- if (result.error) {
566
- throw new Error(result.error.message || 'Tool call failed');
567
- }
568
- return result.result;
569
- };
570
-
571
- /**
572
- * Get tool output from all possible sources.
573
- * Priority: pre-rendered HTML from metadata > structured data > raw output
574
- *
575
- * Note: Returns undefined for null values from OpenAI (which is its initial state)
576
- * to allow proper loading state handling in the bridge.
577
- */
578
- window.__frontmcp.getToolOutput = function() {
579
- // 1. Check for pre-rendered HTML in OpenAI toolResponseMetadata (highest priority)
580
- // This is set when the tool has a UI template (React, HTML, etc.)
581
- if (window.openai && window.openai.toolResponseMetadata) {
582
- var html = window.openai.toolResponseMetadata['ui/html'];
583
- if (html && typeof html === 'string') {
584
- return html; // Return HTML string directly
585
- }
586
- }
587
-
588
- // 2. Check for pre-rendered HTML in MCP response metadata (for MCP Inspector, etc.)
589
- if (window.__mcpResponseMeta) {
590
- var mcpHtml = window.__mcpResponseMeta['ui/html'];
591
- if (mcpHtml && typeof mcpHtml === 'string') {
592
- return mcpHtml; // Return HTML string directly
593
- }
594
- }
595
-
596
- // 3. OpenAI injects structured data into window.openai.toolOutput
597
- // Skip null - that's OpenAI's initial state before real data is injected
598
- if (window.openai && window.openai.toolOutput !== undefined && window.openai.toolOutput !== null) {
599
- return window.openai.toolOutput;
600
- }
601
-
602
- // 4. MCP Bridge stores in window.__mcpToolOutput (skip null)
603
- if (window.__mcpToolOutput !== undefined && window.__mcpToolOutput !== null) {
604
- return window.__mcpToolOutput;
605
- }
606
-
607
- // 5. Explicit injection
608
- if (window.__frontmcp.toolOutput !== undefined) {
609
- return window.__frontmcp.toolOutput;
610
- }
611
-
612
- return undefined;
613
- };
614
- })();
615
- </script>`;
616
- }
617
- function escapeJs(str) {
618
- return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/`/g, "\\`").replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/<\/script/gi, "<\\/script").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
619
- }
620
-
621
- // libs/uipack/src/base-template/bridge.ts
622
- function renderBridgeScript() {
623
- return `<script>
624
- (function() {
625
- 'use strict';
626
-
627
- // ============================================
628
- // Debug Mode
629
- // ============================================
630
-
631
- var DEBUG = window.location.search.indexOf('frontmcp_debug=1') > -1 ||
632
- window.localStorage.getItem('frontmcp_debug') === '1';
633
- var debugLog = [];
634
-
635
- function log(level, message, data) {
636
- var entry = {
637
- ts: new Date().toISOString(),
638
- level: level,
639
- message: message,
640
- data: data
641
- };
642
- debugLog.push(entry);
643
- if (DEBUG) {
644
- console[level === 'error' ? 'error' : level === 'warn' ? 'warn' : 'log'](
645
- '[frontmcp] ' + message,
646
- data || ''
647
- );
648
- }
649
- }
650
-
651
- // ============================================
652
- // Bridge State Management
653
- // ============================================
654
-
655
- var state = { data: null, loading: true, error: null };
656
- var subscribers = [];
657
- var stateVersion = 0; // For React useSyncExternalStore stability
658
-
659
- function notify() {
660
- stateVersion++;
661
- for (var i = 0; i < subscribers.length; i++) {
662
- try { subscribers[i](); } catch(e) {
663
- log('error', 'Subscriber error:', { error: e.message, stack: e.stack });
664
- }
665
- }
666
- // Dispatch custom event for HTMX
667
- if (typeof CustomEvent !== 'undefined') {
668
- document.dispatchEvent(new CustomEvent('frontmcp:change', { detail: state }));
669
- }
670
- }
671
-
672
- function setData(data) {
673
- // Skip if data hasn't actually changed (prevents unnecessary re-renders)
674
- if (!state.loading && state.data === data) return;
675
- log('info', 'setData called', {
676
- dataType: typeof data,
677
- dataLength: typeof data === 'string' ? data.length : 'N/A',
678
- isNull: data === null,
679
- isUndefined: data === undefined
680
- });
681
- state = { data: data, loading: false, error: null };
682
- notify();
683
- }
684
-
685
- function setError(error) {
686
- log('error', 'setError called', { error: error });
687
- state = { data: null, loading: false, error: error };
688
- notify();
689
- }
690
-
691
- function reset() {
692
- log('info', 'reset called');
693
- state = { data: null, loading: true, error: null };
694
- notify();
695
- }
696
-
697
- // ============================================
698
- // Data Validation
699
- // ============================================
700
-
701
- function validateToolOutput(data, source) {
702
- var errors = [];
703
-
704
- if (data === undefined) {
705
- errors.push('toolOutput is undefined');
706
- } else if (data === null) {
707
- // null is valid initial state from OpenAI
708
- log('info', 'toolOutput is null (OpenAI initial state)', { source: source });
709
- return { valid: false, errors: ['initial_state'], isInitial: true };
710
- }
711
-
712
- if (typeof data === 'object' && data !== null) {
713
- if (data.isError === true) {
714
- errors.push('Tool returned error: ' + JSON.stringify(data));
715
- }
716
- // Check for MCP error structure
717
- if (data.error && data.error.code) {
718
- errors.push('MCP error: code=' + data.error.code + ', message=' + (data.error.message || 'unknown'));
719
- }
720
- }
721
-
722
- if (errors.length > 0) {
723
- log('warn', 'Validation issues', { source: source, errors: errors });
724
- }
725
-
726
- return { valid: errors.length === 0, errors: errors, isInitial: false };
727
- }
728
-
729
- function validateMetadata(meta, source) {
730
- var errors = [];
731
-
732
- if (!meta) {
733
- errors.push('toolResponseMetadata is null/undefined');
734
- return { valid: false, errors: errors };
735
- }
736
-
737
- if (typeof meta !== 'object') {
738
- errors.push('toolResponseMetadata is not an object: ' + typeof meta);
739
- return { valid: false, errors: errors };
740
- }
741
-
742
- var html = meta['ui/html'];
743
- if (html !== undefined) {
744
- if (typeof html !== 'string') {
745
- errors.push('ui/html is not a string: ' + typeof html);
746
- } else if (html.length === 0) {
747
- errors.push('ui/html is empty string');
748
- } else if (html.indexOf('validation-error') > -1) {
749
- errors.push('ui/html contains validation error');
750
- log('warn', 'HTML contains validation error', { htmlPreview: html.substring(0, 500) });
751
- }
752
- }
753
-
754
- if (errors.length > 0) {
755
- log('warn', 'Metadata validation issues', { source: source, errors: errors, keys: Object.keys(meta) });
756
- }
757
-
758
- return { valid: errors.length === 0, errors: errors };
759
- }
760
-
761
- // ============================================
762
- // OpenAI Platform Interceptors
763
- // ============================================
764
-
765
- var openaiIntercepted = false;
766
-
767
- function checkOpenAIData(openai) {
768
- if (!openai) {
769
- log('warn', 'checkOpenAIData: openai object is null');
770
- return false;
771
- }
772
-
773
- log('info', 'checkOpenAIData called', {
774
- hasToolOutput: openai.toolOutput !== undefined,
775
- hasToolResponseMetadata: openai.toolResponseMetadata !== undefined,
776
- toolOutputType: typeof openai.toolOutput,
777
- metadataKeys: openai.toolResponseMetadata ? Object.keys(openai.toolResponseMetadata) : []
778
- });
779
-
780
- // Priority 1: Pre-rendered HTML from toolResponseMetadata
781
- if (openai.toolResponseMetadata) {
782
- var metaValidation = validateMetadata(openai.toolResponseMetadata, 'openai.toolResponseMetadata');
783
- var html = openai.toolResponseMetadata['ui/html'];
784
- if (html && typeof html === 'string') {
785
- log('info', 'Using ui/html from metadata', { htmlLength: html.length });
786
- setData(html);
787
- return true;
788
- }
789
- }
790
-
791
- // Priority 2: Tool output (skip null - that's OpenAI's initial state)
792
- if (openai.toolOutput !== undefined && openai.toolOutput !== null) {
793
- var outputValidation = validateToolOutput(openai.toolOutput, 'openai.toolOutput');
794
- if (!outputValidation.isInitial) {
795
- log('info', 'Using toolOutput', {
796
- valid: outputValidation.valid,
797
- errors: outputValidation.errors
798
- });
799
- setData(openai.toolOutput);
800
- return true;
801
- }
802
- }
803
-
804
- log('info', 'checkOpenAIData: no data found yet');
805
- return false;
806
- }
807
-
808
- function installPropertyInterceptor(obj, prop, onSet) {
809
- var current = obj[prop];
810
- var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
811
-
812
- // Don't re-intercept
813
- if (descriptor && descriptor.get && descriptor.set) return;
814
-
815
- Object.defineProperty(obj, prop, {
816
- get: function() { return current; },
817
- set: function(val) {
818
- current = val;
819
- onSet(val);
820
- },
821
- enumerable: true,
822
- configurable: true
823
- });
824
- }
825
-
826
- function installOpenAIInterceptors(openai) {
827
- if (!openai || openaiIntercepted) return;
828
- openaiIntercepted = true;
829
-
830
- // Check existing data first
831
- if (checkOpenAIData(openai)) return;
832
-
833
- // Intercept toolOutput
834
- installPropertyInterceptor(openai, 'toolOutput', function(val) {
835
- checkOpenAIData(openai);
836
- });
837
-
838
- // Intercept toolResponseMetadata
839
- installPropertyInterceptor(openai, 'toolResponseMetadata', function(val) {
840
- checkOpenAIData(openai);
841
- });
842
- }
843
-
844
- // Install interceptor on window.openai
845
- if (typeof window.openai !== 'undefined') {
846
- installOpenAIInterceptors(window.openai);
847
- } else {
848
- // OpenAI object doesn't exist yet - wait for it
849
- var pendingOpenai = undefined;
850
- Object.defineProperty(window, 'openai', {
851
- get: function() { return pendingOpenai; },
852
- set: function(val) {
853
- pendingOpenai = val;
854
- if (val) installOpenAIInterceptors(val);
855
- },
856
- enumerable: true,
857
- configurable: true
858
- });
859
- }
860
-
861
- // ============================================
862
- // MCP/Generic Platform Support
863
- // ============================================
864
-
865
- // Check for existing __frontmcp.toolOutput
866
- if (window.__frontmcp && window.__frontmcp.toolOutput !== undefined) {
867
- setData(window.__frontmcp.toolOutput);
868
- }
869
-
870
- // Check for __mcpToolOutput
871
- if (window.__mcpToolOutput !== undefined && window.__mcpToolOutput !== null) {
872
- setData(window.__mcpToolOutput);
873
- }
874
-
875
- // Check for __mcpResponseMeta
876
- if (window.__mcpResponseMeta && window.__mcpResponseMeta['ui/html']) {
877
- setData(window.__mcpResponseMeta['ui/html']);
878
- }
879
-
880
- // ============================================
881
- // Bridge API
882
- // ============================================
883
-
884
- window.__frontmcp = window.__frontmcp || {};
885
-
886
- window.__frontmcp.bridge = {
887
- getState: function() { return state; },
888
-
889
- // React useSyncExternalStore compatible
890
- getSnapshot: function() { return state; },
891
- getServerSnapshot: function() { return { data: null, loading: true, error: null }; },
892
-
893
- subscribe: function(callback) {
894
- subscribers.push(callback);
895
- return function() {
896
- var idx = subscribers.indexOf(callback);
897
- if (idx > -1) subscribers.splice(idx, 1);
898
- };
899
- },
900
-
901
- hasData: function() { return !state.loading && state.data !== null; },
902
-
903
- // Manual control (for testing/custom injection)
904
- setData: setData,
905
- setError: setError,
906
- reset: reset,
907
-
908
- // Debug API
909
- debug: {
910
- getLogs: function() { return debugLog.slice(); },
911
- getLastErrors: function() {
912
- return debugLog.filter(function(e) { return e.level === 'error' || e.level === 'warn'; });
913
- },
914
- enableDebug: function() {
915
- DEBUG = true;
916
- window.localStorage.setItem('frontmcp_debug', '1');
917
- console.log('[frontmcp] Debug mode enabled. Reload page to see all logs.');
918
- },
919
- disableDebug: function() {
920
- DEBUG = false;
921
- window.localStorage.removeItem('frontmcp_debug');
922
- },
923
- isDebugEnabled: function() { return DEBUG; },
924
- getStateHistory: function() {
925
- return {
926
- current: state,
927
- version: stateVersion,
928
- subscriberCount: subscribers.length,
929
- openaiIntercepted: openaiIntercepted,
930
- pollCount: pollCount
931
- };
932
- },
933
- dumpAll: function() {
934
- console.group('[frontmcp] Debug Dump');
935
- console.log('State:', state);
936
- console.log('Version:', stateVersion);
937
- console.log('Subscribers:', subscribers.length);
938
- console.log('OpenAI Intercepted:', openaiIntercepted);
939
- console.log('Poll Count:', pollCount);
940
- console.log('Debug Logs:', debugLog);
941
- console.groupEnd();
942
- return {
943
- state: state,
944
- logs: debugLog,
945
- version: stateVersion,
946
- openaiIntercepted: openaiIntercepted
947
- };
948
- }
949
- }
950
- };
951
-
952
- // ============================================
953
- // Fallback Polling (for platforms that don't trigger setters)
954
- // ============================================
955
-
956
- var pollCount = 0;
957
- var maxPolls = 30; // ~3 seconds with exponential backoff
958
-
959
- function pollForData() {
960
- if (state.data !== null || pollCount >= maxPolls) return;
961
- pollCount++;
962
-
963
- // Check all sources
964
- if (window.openai) {
965
- if (checkOpenAIData(window.openai)) return;
966
- }
967
-
968
- // Use getToolOutput if available
969
- if (window.__frontmcp.getToolOutput) {
970
- var data = window.__frontmcp.getToolOutput();
971
- if (data !== undefined && data !== null) {
972
- setData(data);
973
- return;
974
- }
975
- }
976
-
977
- // Exponential backoff: 50ms, 75ms, 112ms, ...
978
- var delay = Math.min(50 * Math.pow(1.5, Math.min(pollCount, 10)), 500);
979
- setTimeout(pollForData, delay);
980
- }
981
-
982
- // Start polling after a brief delay (give interceptors time to fire)
983
- setTimeout(pollForData, 50);
984
- })();
985
- </script>`;
986
- }
987
- var BRIDGE_TYPES = `
988
- interface BridgeState<T = unknown> {
989
- data: T | null;
990
- loading: boolean;
991
- error: string | null;
992
- }
993
-
994
- interface PlatformBridge<T = unknown> {
995
- getState(): BridgeState<T>;
996
- subscribe(callback: () => void): () => void;
997
- getSnapshot(): BridgeState<T>;
998
- getServerSnapshot(): BridgeState<T>;
999
- hasData(): boolean;
1000
- setData(data: T): void;
1001
- setError(error: string): void;
1002
- reset(): void;
1003
- }
1004
-
1005
- declare global {
1006
- interface Window {
1007
- __frontmcp: {
1008
- bridge: PlatformBridge;
1009
- // ... other __frontmcp methods
1010
- };
1011
- }
1012
- }
1013
- `;
1014
-
1015
- // libs/uipack/src/base-template/default-base-template.ts
1016
- function escapeAttr(str) {
1017
- return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
1018
- }
1019
- function createDefaultBaseTemplate(options) {
1020
- const {
1021
- toolName,
1022
- theme = DEFAULT_THEME,
1023
- mcpSession,
1024
- htmx = false,
1025
- alpine = false,
1026
- fonts = true,
1027
- inline = false,
1028
- headContent = "",
1029
- bodyClass = "bg-transparent font-sans antialiased",
1030
- containerClass = "p-4"
1031
- } = options;
1032
- const themeStylesOptions = {
1033
- theme,
1034
- tailwind: true,
1035
- htmx,
1036
- alpine,
1037
- fonts,
1038
- inline
1039
- };
1040
- const themeStyles = renderThemeStyles(themeStylesOptions);
1041
- const polyfills = renderMcpSessionPolyfill(mcpSession);
1042
- const bridge = renderBridgeScript();
1043
- return `<!DOCTYPE html>
1044
- <html lang="en">
1045
- <head>
1046
- <meta charset="utf-8">
1047
- <meta name="viewport" content="width=device-width, initial-scale=1">
1048
- <meta name="color-scheme" content="light dark">
1049
- <title>${escapeAttr(toolName)} Widget</title>
1050
- ${themeStyles}
1051
- ${polyfills}
1052
- ${bridge}
1053
- ${headContent}
1054
- </head>
1055
- <body class="${escapeAttr(bodyClass)}">
1056
- <div id="widget-root" class="${escapeAttr(containerClass)}"></div>
1057
-
1058
- <script>
1059
- (function() {
1060
- 'use strict';
1061
-
1062
- var root = document.getElementById('widget-root');
1063
-
1064
- /**
1065
- * Render the widget based on bridge state.
1066
- * Uses the reactive bridge to automatically re-render when data changes.
1067
- */
1068
- function render() {
1069
- var state = window.__frontmcp.bridge.getState();
1070
-
1071
- // Loading state
1072
- if (state.loading) {
1073
- root.innerHTML = renderLoading();
1074
- return;
1075
- }
1076
-
1077
- // Error state
1078
- if (state.error) {
1079
- root.innerHTML = renderError(state.error);
1080
- return;
1081
- }
1082
-
1083
- // No data state
1084
- if (state.data === null) {
1085
- root.innerHTML = renderEmpty();
1086
- return;
1087
- }
1088
-
1089
- // Render data
1090
- try {
1091
- // Check for custom renderer provided by developer
1092
- if (window.__frontmcp && typeof window.__frontmcp.renderContent === 'function') {
1093
- root.innerHTML = window.__frontmcp.renderContent(state.data);
1094
- return;
1095
- }
1096
-
1097
- // Fall back to default renderer
1098
- root.innerHTML = defaultRenderer(state.data);
1099
- } catch (e) {
1100
- console.error('[frontmcp] Error rendering widget:', e);
1101
- root.innerHTML = renderError(e.message || 'Render error');
1102
- }
1103
- }
1104
-
1105
- /**
1106
- * Default renderer for tool output.
1107
- * Handles both pre-rendered HTML strings and raw JSON data.
1108
- */
1109
- function defaultRenderer(data) {
1110
- // Check if data is pre-rendered HTML (server-side rendered widget)
1111
- if (typeof data === 'string' && data.trim().startsWith('<')) {
1112
- // Direct HTML injection - content was already rendered/sanitized server-side
1113
- return data;
1114
- }
1115
-
1116
- // Check for special wrapper with HTML content
1117
- if (data && typeof data === 'object' && data.__html) {
1118
- return data.__html;
1119
- }
1120
-
1121
- // Fallback: JSON renderer for raw data
1122
- var json = JSON.stringify(data, null, 2);
1123
- return '<pre class="p-4 bg-surface rounded-md overflow-auto text-sm font-mono text-text-primary border border-border">' +
1124
- escapeHtml(json) +
1125
- '</pre>';
1126
- }
1127
-
1128
- /**
1129
- * Render loading state with animated spinner.
1130
- */
1131
- function renderLoading() {
1132
- return '<div class="flex items-center justify-center p-8">' +
1133
- '<div class="flex flex-col items-center gap-3">' +
1134
- '<svg class="animate-spin h-8 w-8 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
1135
- '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
1136
- '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
1137
- '</svg>' +
1138
- '<p class="text-text-secondary text-sm">Loading...</p>' +
1139
- '</div>' +
1140
- '</div>';
1141
- }
1142
-
1143
- /**
1144
- * Render error message.
1145
- */
1146
- function renderError(message) {
1147
- return '<div class="p-4 bg-red-50 border border-red-200 rounded-md">' +
1148
- '<p class="text-red-600 text-sm">Error: ' + escapeHtml(message) + '</p>' +
1149
- '</div>';
1150
- }
1151
-
1152
- /**
1153
- * Render empty state (no data available).
1154
- */
1155
- function renderEmpty() {
1156
- return '<div class="p-4 text-text-secondary text-sm text-center">' +
1157
- 'No data available' +
1158
- '</div>';
1159
- }
1160
-
1161
- /**
1162
- * Escape HTML special characters.
1163
- */
1164
- function escapeHtml(str) {
1165
- if (typeof str !== 'string') return str;
1166
- return str
1167
- .replace(/&/g, '&amp;')
1168
- .replace(/</g, '&lt;')
1169
- .replace(/>/g, '&gt;')
1170
- .replace(/"/g, '&quot;');
1171
- }
1172
-
1173
- /**
1174
- * Create debug overlay panel.
1175
- * Shows bridge state, logs, and OpenAI data status.
1176
- */
1177
- function createDebugOverlay() {
1178
- var overlay = document.createElement('div');
1179
- overlay.id = 'frontmcp-debug-overlay';
1180
- overlay.style.cssText = 'position:fixed;bottom:10px;right:10px;width:400px;max-height:60vh;' +
1181
- 'background:rgba(0,0,0,0.9);color:#0f0;font-family:monospace;font-size:11px;' +
1182
- 'padding:10px;border-radius:4px;z-index:99999;overflow:auto;display:none;';
1183
-
1184
- var toggle = document.createElement('button');
1185
- toggle.id = 'frontmcp-debug-toggle';
1186
- toggle.textContent = 'Debug';
1187
- toggle.style.cssText = 'position:fixed;bottom:10px;right:10px;padding:4px 8px;' +
1188
- 'background:#333;color:#0f0;font-family:monospace;font-size:10px;border:1px solid #0f0;' +
1189
- 'border-radius:4px;z-index:100000;cursor:pointer;';
1190
-
1191
- toggle.onclick = function() {
1192
- var o = document.getElementById('frontmcp-debug-overlay');
1193
- if (o.style.display === 'none') {
1194
- o.style.display = 'block';
1195
- toggle.style.right = '420px';
1196
- updateDebugOverlay();
1197
- } else {
1198
- o.style.display = 'none';
1199
- toggle.style.right = '10px';
1200
- }
1201
- };
1202
-
1203
- document.body.appendChild(overlay);
1204
- document.body.appendChild(toggle);
1205
-
1206
- // Auto-update every second
1207
- setInterval(updateDebugOverlay, 1000);
1208
- }
1209
-
1210
- function updateDebugOverlay() {
1211
- var overlay = document.getElementById('frontmcp-debug-overlay');
1212
- if (!overlay || overlay.style.display === 'none') return;
1213
-
1214
- var state = window.__frontmcp.bridge.getState();
1215
- var debug = window.__frontmcp.bridge.debug;
1216
- var logs = debug.getLogs();
1217
- var errors = debug.getLastErrors();
1218
- var stateHistory = debug.getStateHistory();
1219
-
1220
- var html = '<div style="margin-bottom:10px;border-bottom:1px solid #333;padding-bottom:5px;">' +
1221
- '<strong>FrontMCP Debug Panel</strong>' +
1222
- '<span style="float:right;color:#666;">v' + stateHistory.version + '</span>' +
1223
- '</div>';
1224
-
1225
- // Bridge State
1226
- html += '<div style="margin-bottom:10px;">' +
1227
- '<div style="color:#ff0;">Bridge State:</div>' +
1228
- '<div>Loading: ' + state.loading + '</div>' +
1229
- '<div>Has Data: ' + (state.data !== null) + '</div>' +
1230
- '<div>Data Type: ' + (state.data === null ? 'null' : typeof state.data) + '</div>' +
1231
- (typeof state.data === 'string' ? '<div>Data Length: ' + state.data.length + '</div>' : '') +
1232
- '<div>Error: ' + (state.error || 'none') + '</div>' +
1233
- '</div>';
1234
-
1235
- // OpenAI Status
1236
- html += '<div style="margin-bottom:10px;">' +
1237
- '<div style="color:#ff0;">OpenAI Status:</div>' +
1238
- '<div>Intercepted: ' + stateHistory.openaiIntercepted + '</div>' +
1239
- '<div>Poll Count: ' + stateHistory.pollCount + '</div>';
1240
-
1241
- if (window.openai) {
1242
- html += '<div>window.openai: exists</div>' +
1243
- '<div>toolOutput: ' + (window.openai.toolOutput !== undefined ? 'present' : 'undefined') + '</div>' +
1244
- '<div>toolResponseMetadata: ' + (window.openai.toolResponseMetadata !== undefined ? 'present' : 'undefined') + '</div>';
1245
- if (window.openai.toolResponseMetadata) {
1246
- html += '<div>meta keys: ' + Object.keys(window.openai.toolResponseMetadata).join(', ') + '</div>';
1247
- }
1248
- } else {
1249
- html += '<div>window.openai: undefined</div>';
1250
- }
1251
- html += '</div>';
1252
-
1253
- // Errors
1254
- if (errors.length > 0) {
1255
- html += '<div style="margin-bottom:10px;">' +
1256
- '<div style="color:#f00;">Errors (' + errors.length + '):</div>';
1257
- errors.slice(-5).forEach(function(e) {
1258
- html += '<div style="color:#f88;font-size:10px;">[' + e.level + '] ' + escapeHtml(e.message) + '</div>';
1259
- });
1260
- html += '</div>';
1261
- }
1262
-
1263
- // Recent Logs
1264
- html += '<div>' +
1265
- '<div style="color:#ff0;">Recent Logs (' + logs.length + '):</div>' +
1266
- '<div style="max-height:150px;overflow:auto;">';
1267
- logs.slice(-10).forEach(function(e) {
1268
- var color = e.level === 'error' ? '#f00' : e.level === 'warn' ? '#ff0' : '#0f0';
1269
- html += '<div style="color:' + color + ';font-size:10px;">' +
1270
- '[' + e.ts.split('T')[1].split('.')[0] + '] ' + escapeHtml(e.message) +
1271
- '</div>';
1272
- });
1273
- html += '</div></div>';
1274
-
1275
- // Actions
1276
- html += '<div style="margin-top:10px;border-top:1px solid #333;padding-top:5px;">' +
1277
- '<button onclick="console.log(window.__frontmcp.bridge.debug.dumpAll())" ' +
1278
- 'style="font-size:10px;padding:2px 6px;margin-right:5px;">Dump to Console</button>' +
1279
- '<button onclick="window.__frontmcp.bridge.reset()" ' +
1280
- 'style="font-size:10px;padding:2px 6px;">Reset Bridge</button>' +
1281
- '</div>';
1282
-
1283
- overlay.innerHTML = html;
1284
- }
1285
-
1286
- /**
1287
- * Initialize the widget with reactive rendering.
1288
- */
1289
- function init() {
1290
- // Subscribe to bridge state changes for reactive re-rendering
1291
- window.__frontmcp.bridge.subscribe(render);
1292
-
1293
- // Initial render
1294
- render();
1295
-
1296
- // Global click handler for SSR-compatible tool calls
1297
- // Handles buttons/elements with data-tool-call attribute
1298
- document.addEventListener('click', function(e) {
1299
- var target = e.target;
1300
- // Walk up the DOM to find element with data-tool-call (handles clicks on child elements)
1301
- while (target && target !== document.body) {
1302
- if (target.hasAttribute && target.hasAttribute('data-tool-call')) {
1303
- var toolName = target.getAttribute('data-tool-call');
1304
- var argsStr = target.getAttribute('data-tool-args');
1305
- var args = {};
1306
-
1307
- if (argsStr) {
1308
- try {
1309
- args = JSON.parse(argsStr);
1310
- } catch (parseErr) {
1311
- console.error('[frontmcp] Failed to parse data-tool-args:', parseErr);
1312
- }
1313
- }
1314
-
1315
- // Prevent default behavior and stop propagation
1316
- e.preventDefault();
1317
- e.stopPropagation();
1318
-
1319
- // Show loading state on the button
1320
- var originalContent = target.innerHTML;
1321
- var loadingContent = '<span style="display:inline-flex;align-items:center;">' +
1322
- '<span style="animation:spin 1s linear infinite;margin-right:4px;">\u23F3</span>' +
1323
- 'Loading...' +
1324
- '</span>';
1325
- target.innerHTML = loadingContent;
1326
- target.disabled = true;
1327
-
1328
- // Call the tool
1329
- if (window.__frontmcp && typeof window.__frontmcp.callTool === 'function') {
1330
- window.__frontmcp.callTool(toolName, args)
1331
- .then(function(result) {
1332
- console.log('[frontmcp] Tool call success:', toolName, result);
1333
- // Restore button state on success
1334
- target.innerHTML = originalContent;
1335
- target.disabled = false;
1336
- })
1337
- .catch(function(err) {
1338
- console.error('[frontmcp] Tool call failed:', toolName, err);
1339
- // Restore button state on error
1340
- target.innerHTML = originalContent;
1341
- target.disabled = false;
1342
- });
1343
- } else {
1344
- console.error('[frontmcp] callTool not available');
1345
- target.innerHTML = originalContent;
1346
- target.disabled = false;
1347
- }
1348
-
1349
- return;
1350
- }
1351
- target = target.parentElement;
1352
- }
1353
- });
1354
-
1355
- // Create debug overlay if debug mode is enabled
1356
- var DEBUG = window.location.search.indexOf('frontmcp_debug=1') > -1 ||
1357
- window.localStorage.getItem('frontmcp_debug') === '1';
1358
- if (DEBUG) {
1359
- createDebugOverlay();
1360
- }
1361
- }
1362
-
1363
- // Initialize when DOM is ready
1364
- if (document.readyState === 'loading') {
1365
- document.addEventListener('DOMContentLoaded', init);
1366
- } else {
1367
- init();
1368
- }
1369
- })();
1370
- </script>
1371
- </body>
1372
- </html>`;
1373
- }
1374
- function createMinimalBaseTemplate(toolName, mcpSession) {
1375
- return createDefaultBaseTemplate({
1376
- toolName,
1377
- mcpSession,
1378
- fonts: false,
1379
- htmx: false,
1380
- alpine: false
1381
- });
1382
- }
1383
- // Annotate the CommonJS export names for ESM import in node:
1384
- 0 && (module.exports = {
1385
- BRIDGE_TYPES,
1386
- createDefaultBaseTemplate,
1387
- createMinimalBaseTemplate,
1388
- renderBridgeScript,
1389
- renderMcpSessionPolyfill,
1390
- renderMinimalThemeStyles,
1391
- renderThemeCssOnly,
1392
- renderThemeStyles
1393
- });