@frontmcp/uipack 0.6.1 → 0.6.3

package/esm/bundler/{index.js → index.mjs}

@@ -1429,7 +1429,7 @@ async function calculateComponentHash(options) {
   const {
     entryPath,
     baseDir = dirname2(entryPath),
-    externals = [],
+    externals: _externals = [],
     dependencies = {},
     bundleOptions = {},
     maxDepth = 10
@@ -1546,7 +1546,7 @@ function buildIdFromHash(hash) {
 // libs/uipack/src/bundler/file-cache/component-builder.ts
 import { readFile as readFile3 } from "fs/promises";
 import { existsSync as existsSync3 } from "fs";
-import { resolve as resolve2, extname } from "path";
+import { resolve as resolve2, extname, basename } from "path";
 import { randomUUID } from "crypto";
 
 // libs/uipack/src/dependency/cdn-registry.ts
@@ -2054,7 +2054,7 @@ function getPackagePeerDependencies(packageName, registry = DEFAULT_CDN_REGISTRY
   }
   return [];
 }
-function resolveAllDependencies(packageNames, platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
+function resolveAllDependencies(packageNames, _platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
   const resolved = /* @__PURE__ */ new Set();
   const queue = [...packageNames];
   while (queue.length > 0) {
@@ -2617,7 +2617,7 @@ var ComponentBuilder = class {
     } = options;
     const absoluteEntryPath = resolve2(entryPath);
     if (!existsSync3(absoluteEntryPath)) {
-      throw new Error(`Entry file not found: ${absoluteEntryPath}`);
+      throw new Error(`Entry file not found: ${basename(absoluteEntryPath)}`);
     }
     const hashResult = await calculateComponentHash({
       entryPath: absoluteEntryPath,
@@ -2791,7 +2791,10 @@ var ComponentBuilder = class {
         bundlerVersion: this.esbuild.version
       };
     } catch (error) {
-      throw new Error(`Bundle failed for ${entryPath}: ${error}`);
+      const fileName = basename(entryPath);
+      const rawMessage = error instanceof Error ? error.message : String(error);
+      const sanitizedMessage = rawMessage.replace(/(?:\/[\w./-]+|[A-Z]:\\[\w.\\-]+)/g, (match) => basename(match));
+      throw new Error(`Bundle failed for ${fileName}: ${sanitizedMessage}`);
     }
   }
   /**
@@ -2804,8 +2807,10 @@ var ComponentBuilder = class {
       return void 0;
     }
     try {
-      const React = await import("react");
-      const ReactDOMServer = await import("react-dom/server");
+      const reactPkg = "react";
+      const reactDomServerPkg = "react-dom/server";
+      const React = await import(reactPkg);
+      const ReactDOMServer = await import(reactDomServerPkg);
       const exports = {};
       const module = { exports };
       if (executeCode2) {

package/esm/dependency/{index.js → index.mjs}

@@ -787,7 +787,7 @@ function getPackagePeerDependencies(packageName, registry = DEFAULT_CDN_REGISTRY
   }
   return [];
 }
-function resolveAllDependencies(packageNames, platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
+function resolveAllDependencies(packageNames, _platform = "unknown", registry = DEFAULT_CDN_REGISTRY) {
   const resolved = /* @__PURE__ */ new Set();
   const queue = [...packageNames];
   while (queue.length > 0) {
@@ -1085,6 +1085,12 @@ function escapeHtml(str) {
 function escapeHtmlAttr(str) {
   return str.replace(/&/g, "&").replace(/"/g, """);
 }
+function escapeJsString(str) {
+  return str.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function escapeScriptClose(jsonString) {
+  return jsonString.replace(/<\//g, "<\\/");
+}
 
 // libs/uipack/src/dependency/import-map.ts
 function createImportMap(dependencies) {
@@ -1883,7 +1889,6 @@ var PATH_REGEX = /\b(output|input|structuredContent)(\.[a-zA-Z_$][a-zA-Z0-9_$]*|
 var KEYWORDS = /* @__PURE__ */ new Set(["this", "else", "@index", "@key", "@first", "@last", "@root"]);
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;
@@ -2371,35 +2376,24 @@ var ComponentCache = class {
 };
 var componentCache = new ComponentCache();
 
-// libs/uipack/src/renderers/mdx.renderer.ts
-var REACT_CDN = {
-  react: "https://unpkg.com/react@18/umd/react.production.min.js",
-  reactDom: "https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
+// libs/uipack/src/renderers/mdx-client.renderer.ts
+function buildReactCdnUrls(version = "19") {
+  return {
+    react: `https://esm.sh/react@${version}`,
+    reactDom: `https://esm.sh/react-dom@${version}/client`,
+    jsxRuntime: `https://esm.sh/react@${version}/jsx-runtime`
+  };
+}
+var DEFAULT_CDN = {
+  mdx: "https://esm.sh/@mdx-js/mdx@3",
+  ...buildReactCdnUrls("19")
 };
-var INLINE_MDX_PLACEHOLDER = `
-// MDX runtime not available inline yet.
-// For blocked-network platforms, use pre-rendered HTML templates.
-console.warn('[FrontMCP] MDX hydration not available on this platform.');
-`;
-var MdxRenderer = class {
-  type = "mdx";
-  priority = 10;
-  // Between HTML (0) and React (20)
-  /**
-   * Lazy-loaded modules.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ReactDOMServer = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  jsxRuntime = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  mdxEvaluate = null;
+var MdxClientRenderer = class {
+  type = "mdx-client";
+  priority = 8;
+  // Lower than server-side MDX (10)
   /**
    * Check if this renderer can handle the given template.
-   *
-   * Accepts strings containing MDX syntax (Markdown + JSX).
    */
   canHandle(template) {
     if (typeof template !== "string") {
@@ -2408,11 +2402,9 @@ var MdxRenderer = class {
     return containsMdxSyntax(template);
   }
   /**
-   * Transpile MDX to executable JavaScript.
-   *
-   * Uses @mdx-js/mdx to compile MDX source to a module.
-   * Note: For MDX, we use evaluate() which combines compile + run,
-   * so this method just returns the source hash for caching purposes.
+   * Prepare MDX template for rendering.
+   * Caches the template hash for deduplication. Actual MDX compilation
+   * happens client-side via CDN-loaded @mdx-js/mdx in the browser.
    */
   async transpile(template, _options) {
     const hash = hashString(template);
@@ -2422,7 +2414,6 @@ var MdxRenderer = class {
     }
     const transpileResult = {
       code: template,
-      // Store original MDX for evaluate()
       hash,
       cached: false
     };
@@ -2430,37 +2421,20 @@ var MdxRenderer = class {
     return transpileResult;
   }
   /**
-   * Render MDX template to HTML string.
+   * Render MDX template to HTML with CDN scripts.
    *
-   * Uses @mdx-js/mdx's evaluate() for clean compilation + execution,
-   * then renders the resulting React component to HTML via SSR.
+   * The returned HTML includes:
+   * - A container div for the rendered content
+   * - Script tags that load React and MDX from CDN
+   * - Inline script that compiles and renders the MDX
    */
   async render(template, context, options) {
-    await this.loadReact();
-    await this.loadMdx();
-    if (!this.mdxEvaluate) {
-      throw new Error("MDX compilation requires @mdx-js/mdx. Install it: npm install @mdx-js/mdx");
-    }
-    const templateHash = hashString(template);
-    const cacheKey = `mdx-component:${templateHash}`;
-    let Content = componentCache.get(cacheKey);
-    if (!Content) {
-      const result = await this.mdxEvaluate(template, {
-        ...this.jsxRuntime,
-        Fragment: this.React.Fragment,
-        development: false
-      });
-      Content = result.default;
-      componentCache.set(cacheKey, Content);
-    }
-    const mdxComponents = {
-      // User-provided components from tool config
-      ...options?.mdxComponents,
-      // Wrapper that provides context to the content
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      wrapper: ({ children }) => {
-        return this.React.createElement("div", { className: "mdx-content" }, children);
-      }
+    const containerId = options?.containerId || "mdx-content";
+    const showLoading = options?.showLoading !== false;
+    const loadingMessage = options?.loadingMessage || "Loading...";
+    const cdn = {
+      ...DEFAULT_CDN,
+      ...options?.cdn
     };
     const props = {
       input: context.input,
@@ -2468,82 +2442,80 @@ var MdxRenderer = class {
       structuredContent: context.structuredContent,
       helpers: context.helpers
     };
+    const reservedProps = /* @__PURE__ */ new Set(["input", "output", "structuredContent", "helpers", "components"]);
+    const outputProps = typeof context.output === "object" && context.output !== null ? Object.fromEntries(Object.entries(context.output).filter(([key]) => !reservedProps.has(key))) : {};
     const spreadProps = {
-      ...props,
-      ...typeof context.output === "object" && context.output !== null ? context.output : {}
+      ...outputProps,
+      ...props
     };
-    const element = this.React.createElement(Content, {
-      components: mdxComponents,
-      ...spreadProps
+    const escapedMdx = escapeScriptClose(JSON.stringify(template));
+    const escapedProps = escapeScriptClose(JSON.stringify(spreadProps));
+    const safeContainerId = escapeJsString(containerId);
+    const loadingHtml = showLoading ? `<div class="mdx-loading">${escapeHtml(loadingMessage)}</div>` : "";
+    return `
+<div id="${escapeHtml(containerId)}">${loadingHtml}</div>
+<script type="module">
+(async function() {
+  try {
+    // Load dependencies from CDN
+    const [
+      { evaluate },
+      runtime,
+      React,
+      { createRoot }
+    ] = await Promise.all([
+      import('${cdn.mdx}'),
+      import('${cdn.jsxRuntime}'),
+      import('${cdn.react}'),
+      import('${cdn.reactDom}')
+    ]);
+
+    // MDX content and props
+    const mdxSource = ${escapedMdx};
+    const props = ${escapedProps};
+
+    // Compile and evaluate MDX
+    const { default: Content } = await evaluate(mdxSource, {
+      ...runtime,
+      Fragment: React.Fragment,
+      development: false
     });
-    const html = this.ReactDOMServer.renderToString(element);
-    if (options?.hydrate) {
-      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return `<div data-mdx-hydrate="true" data-props='${escapedProps}'>${html}</div>`;
+
+    // Render to DOM
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      const root = createRoot(container);
+      root.render(React.createElement(Content, props));
+    }
+  } catch (error) {
+    console.error('[FrontMCP] MDX client rendering failed:', error);
+    const container = document.getElementById('${safeContainerId}');
+    if (container) {
+      container.innerHTML = '<div class="mdx-error">Failed to render MDX content</div>';
     }
-    return html;
+  }
+})();
+</script>
+`;
   }
   /**
-   * Get runtime scripts for client-side functionality.
+   * Get runtime scripts - not needed for client renderer since scripts are inline.
    */
   getRuntimeScripts(platform) {
     if (platform.networkMode === "blocked") {
       return {
         headScripts: "",
-        inlineScripts: INLINE_MDX_PLACEHOLDER,
+        inlineScripts: `console.warn('[FrontMCP] Client-side MDX rendering requires network access. Use @frontmcp/ui for SSR.');`,
         isInline: true
       };
     }
     return {
-      headScripts: `
-        <script crossorigin src="${REACT_CDN.react}"></script>
-        <script crossorigin src="${REACT_CDN.reactDom}"></script>
-      `,
+      headScripts: "",
       isInline: false
     };
   }
-  /**
-   * Load React and ReactDOMServer modules.
-   */
-  async loadReact() {
-    if (this.React && this.ReactDOMServer && this.jsxRuntime) {
-      return;
-    }
-    try {
-      const [react, reactDomServer, jsxRuntime] = await Promise.all([
-        import("react"),
-        import("react-dom/server"),
-        import("react/jsx-runtime")
-      ]);
-      this.React = react;
-      this.ReactDOMServer = reactDomServer;
-      this.jsxRuntime = jsxRuntime;
-    } catch {
-      throw new Error("React is required for MdxRenderer. Install react and react-dom: npm install react react-dom");
-    }
-  }
-  /**
-   * Load @mdx-js/mdx evaluate function.
-   *
-   * evaluate() is the cleanest way to run MDX - it combines
-   * compile and run in a single step, handling all the runtime
-   * injection automatically.
-   */
-  async loadMdx() {
-    if (this.mdxEvaluate) {
-      return;
-    }
-    try {
-      const mdx = await import("@mdx-js/mdx");
-      this.mdxEvaluate = mdx.evaluate;
-    } catch {
-      console.warn(
-        "[@frontmcp/ui] @mdx-js/mdx not available. MDX rendering disabled. Install @mdx-js/mdx to enable: npm install @mdx-js/mdx"
-      );
-    }
-  }
 };
-var mdxRenderer = new MdxRenderer();
+var mdxClientRenderer = new MdxClientRenderer();
 
 // libs/uipack/src/validation/schema-paths.ts
 import { z as z2 } from "zod";
@@ -2939,7 +2911,7 @@ async function processTemplate(resolved, options) {
         structuredContent: context.structuredContent,
         helpers: defaultHelpers
       };
-      const html = await mdxRenderer.render(processedContent, templateContext);
+      const html = await mdxClientRenderer.render(processedContent, templateContext);
       return {
         html,
         format: "mdx"
@@ -3007,7 +2979,7 @@ async function processMdxTemplate(content, context, helpers) {
     structuredContent: context.structuredContent,
     helpers: defaultHelpers
   };
-  return mdxRenderer.render(processed, templateContext);
+  return mdxClientRenderer.render(processed, templateContext);
 }
 export {
   CDN_PROVIDER_PRIORITY,

package/esm/handlebars/{index.js → index.mjs}

@@ -229,7 +229,6 @@ var PATH_REGEX = /\b(output|input|structuredContent)(\.[a-zA-Z_$][a-zA-Z0-9_$]*|
 var KEYWORDS = /* @__PURE__ */ new Set(["this", "else", "@index", "@key", "@first", "@last", "@root"]);
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;