@frontmcp/uipack 0.6.1 → 0.6.3

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

@@ -8,13 +8,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// libs/uipack/src/utils/safe-stringify.ts
-var init_safe_stringify = __esm({
-  "libs/uipack/src/utils/safe-stringify.ts"() {
-    "use strict";
-  }
-});
-
 // libs/uipack/src/utils/escape-html.ts
 function escapeHtml(str) {
   if (str === null || str === void 0) {
@@ -23,6 +16,12 @@ function escapeHtml(str) {
   const s = String(str);
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
 }
+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, "<\\/");
+}
 var init_escape_html = __esm({
   "libs/uipack/src/utils/escape-html.ts"() {
     "use strict";
@@ -33,7 +32,6 @@ var init_escape_html = __esm({
 var init_utils = __esm({
   "libs/uipack/src/utils/index.ts"() {
     "use strict";
-    init_safe_stringify();
     init_escape_html();
   }
 });
@@ -264,7 +262,6 @@ var init_helpers = __esm({
 // libs/uipack/src/handlebars/expression-extractor.ts
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;
@@ -867,11 +864,12 @@ var CLAUDE_PLATFORM = {
   id: "claude",
   name: "Claude (Artifacts)",
   supportsWidgets: true,
+  // Claude Artifacts support interactive widgets
   supportsTailwind: true,
   supportsHtmx: false,
   // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
+  networkMode: "limited",
+  scriptStrategy: "cdn",
   maxInlineSize: 100 * 1024,
   // 100KB limit for artifacts
   cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
@@ -1315,35 +1313,25 @@ var RendererRegistry = class {
 };
 var rendererRegistry = new RendererRegistry();
 
-// 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
+init_utils();
+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") {
@@ -1352,11 +1340,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);
@@ -1366,7 +1352,6 @@ var MdxRenderer = class {
     }
     const transpileResult = {
       code: template,
-      // Store original MDX for evaluate()
       hash,
       cached: false
     };
@@ -1374,37 +1359,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,
@@ -1412,114 +1380,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();
-function buildMdxHydrationScript() {
-  return `
-<script>
-(function() {
-  // MDX hydration requires React and component definitions
-  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
-    console.warn('[FrontMCP] React not available for MDX hydration');
-    return;
-  }
-
-  // Find all elements marked for MDX hydration
-  document.querySelectorAll('[data-mdx-hydrate]').forEach(function(root) {
-    var propsJson = root.getAttribute('data-props');
-    var props = propsJson ? JSON.parse(propsJson) : {};
-
-    // MDX content is pre-rendered, hydration mainly attaches event handlers
-    // For full interactivity, components need to be available client-side
-    if (window.__frontmcp_mdx_content) {
-      try {
-        ReactDOM.hydrateRoot(root, React.createElement(
-          window.__frontmcp_mdx_content,
-          props
-        ));
-      } catch (e) {
-        console.error('[FrontMCP] MDX hydration failed', e);
-      }
-    }
-  });
-})();
-</script>
-`;
-}
+var mdxClientRenderer = new MdxClientRenderer();
 
 // libs/uipack/src/renderers/utils/transpiler.ts
 var DEFAULT_SWC_OPTIONS = {
@@ -1534,7 +1468,10 @@ async function loadSwcTransform() {
     return swcTransform;
   }
   try {
-    const swc = await import("@swc/core");
+    const swc = await import(
+      /* webpackIgnore: true */
+      "@swc/core"
+    );
     swcTransform = swc.transform;
     return swcTransform;
   } catch {
@@ -1589,50 +1526,23 @@ async function isSwcAvailable() {
   const transform = await loadSwcTransform();
   return transform !== null;
 }
-async function executeTranspiledCode(code, context = {}) {
-  let React;
-  let jsxRuntime;
-  try {
-    React = await import("react");
-    jsxRuntime = await import("react/jsx-runtime");
-  } catch {
-    throw new Error("React is required for JSX templates. Install react: npm install react react-dom");
-  }
-  const exports = {};
-  const module = { exports };
-  const require2 = (id) => {
-    switch (id) {
-      case "react":
-        return React;
-      case "react/jsx-runtime":
-        return jsxRuntime;
-      case "react/jsx-dev-runtime":
-        return jsxRuntime;
-      default:
-        if (context[id]) {
-          return context[id];
-        }
-        throw new Error(`Module '${id}' not available in JSX template context`);
-    }
-  };
-  try {
-    const fn = new Function("exports", "require", "module", "__filename", "__dirname", "React", "context", code);
-    fn(exports, require2, module, "template.js", "/", React, context);
-    return module.exports["default"] || module.exports[Object.keys(module.exports)[0]] || module.exports;
-  } catch (error) {
-    throw new Error(`Failed to execute transpiled JSX: ${error instanceof Error ? error.message : String(error)}`);
-  }
+async function executeTranspiledCode(_code, _context = {}) {
+  throw new Error(
+    'executeTranspiledCode has been moved to @frontmcp/ui/renderers. Install @frontmcp/ui and import from there: import { executeTranspiledCode } from "@frontmcp/ui/renderers"'
+  );
 }
-async function transpileAndExecute(source, context = {}) {
-  const result = await transpileJsx(source);
-  return executeTranspiledCode(result.code, context);
+async function transpileAndExecute(_source, _context = {}) {
+  throw new Error(
+    'transpileAndExecute has been moved to @frontmcp/ui/renderers. Install @frontmcp/ui and import from there: import { transpileAndExecute } from "@frontmcp/ui/renderers"'
+  );
 }
 export {
   HtmlRenderer,
-  MdxRenderer,
+  MdxClientRenderer,
   RendererRegistry,
   TranspileCache,
-  buildMdxHydrationScript,
+  buildReactCdnUrls,
+  componentCache,
   containsJsx,
   containsMdxSyntax,
   detectTemplateType,
@@ -1645,8 +1555,7 @@ export {
   isReactComponent,
   isSwcAvailable,
   isTemplateBuilderFunction,
-  mdxRenderer,
-  renderCache,
+  mdxClientRenderer,
   rendererRegistry,
   transpileAndExecute,
   transpileCache,

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

@@ -8,13 +8,6 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// libs/uipack/src/utils/safe-stringify.ts
-var init_safe_stringify = __esm({
-  "libs/uipack/src/utils/safe-stringify.ts"() {
-    "use strict";
-  }
-});
-
 // libs/uipack/src/utils/escape-html.ts
 function escapeHtml(str) {
   if (str === null || str === void 0) {
@@ -33,7 +26,6 @@ var init_escape_html = __esm({
 var init_utils = __esm({
   "libs/uipack/src/utils/index.ts"() {
     "use strict";
-    init_safe_stringify();
     init_escape_html();
   }
 });
@@ -264,7 +256,6 @@ var init_helpers = __esm({
 // libs/uipack/src/handlebars/expression-extractor.ts
 function extractExpressions(template) {
   const expressions = [];
-  const lines = template.split("\n");
   const positionMap = buildPositionMap(template);
   let match;
   EXPRESSION_REGEX.lastIndex = 0;
@@ -884,7 +875,7 @@ var init_mdx_adapter = __esm({
           return this.renderMarkdown(source, context);
         }
         try {
-          const compiled = await this.mdxRuntime.compile(source, {
+          const _compiled = await this.mdxRuntime.compile(source, {
             outputFormat: "function-body",
             development: false
           });
@@ -2405,9 +2396,6 @@ var scriptCache = /* @__PURE__ */ new Map();
 function getCachedScript(url) {
   return scriptCache.get(url);
 }
-function isScriptCached(url) {
-  return scriptCache.has(url);
-}
 function buildFontPreconnect() {
   return CDN.fonts.preconnect.map((url, i) => `<link rel="preconnect" href="${url}"${i > 0 ? " crossorigin" : ""}>`).join("\n  ");
 }
@@ -2440,8 +2428,9 @@ function buildCdnScripts(options = {}) {
   const scripts = [];
   if (inline) {
     if (tailwind) {
-      if (isScriptCached(CDN.tailwind)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.tailwind)));
+      const cached = getCachedScript(CDN.tailwind);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Tailwind script not cached. Call fetchAndCacheScripts() first."
@@ -2449,8 +2438,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (htmx) {
-      if (isScriptCached(CDN.htmx.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.htmx.url)));
+      const cached = getCachedScript(CDN.htmx.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but HTMX script not cached. Call fetchAndCacheScripts() first."
@@ -2458,8 +2448,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (alpine) {
-      if (isScriptCached(CDN.alpine.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.alpine.url)));
+      const cached = getCachedScript(CDN.alpine.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Alpine.js script not cached. Call fetchAndCacheScripts() first."
@@ -2467,8 +2458,9 @@ function buildCdnScripts(options = {}) {
       }
     }
     if (icons) {
-      if (isScriptCached(CDN.icons.url)) {
-        scripts.push(buildInlineScriptTag(getCachedScript(CDN.icons.url)));
+      const cached = getCachedScript(CDN.icons.url);
+      if (cached) {
+        scripts.push(buildInlineScriptTag(cached));
       } else {
         console.warn(
           "[frontmcp/ui] Inline mode requested but Lucide icons script not cached. Call fetchAndCacheScripts() first."
@@ -2510,11 +2502,12 @@ var CLAUDE_PLATFORM = {
   id: "claude",
   name: "Claude (Artifacts)",
   supportsWidgets: true,
+  // Claude Artifacts support interactive widgets
   supportsTailwind: true,
   supportsHtmx: false,
   // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
+  networkMode: "limited",
+  scriptStrategy: "cdn",
   maxInlineSize: 100 * 1024,
   // 100KB limit for artifacts
   cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
@@ -2770,17 +2763,31 @@ function emitColorScale(lines, name, scale) {
     if (value) lines.push(`--color-${name}-${shade}: ${value};`);
   }
 }
+var OPACITY_VARIANTS = [10, 20, 30, 50, 70, 90];
+function emitColorWithOpacityVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
+function emitBrandColorWithVariants(lines, name, value) {
+  lines.push(`--color-${name}: ${value};`);
+  lines.push(`--color-${name}-hover: color-mix(in oklch, ${value} 85%, black);`);
+  for (const opacity of OPACITY_VARIANTS) {
+    lines.push(`--color-${name}-${opacity}: color-mix(in oklch, ${value} ${opacity}%, transparent);`);
+  }
+}
 function buildThemeCss(theme) {
   const lines = [];
   const semantic = theme.colors.semantic;
   if (typeof semantic.primary === "string") {
-    lines.push(`--color-primary: ${semantic.primary};`);
+    emitBrandColorWithVariants(lines, "primary", semantic.primary);
   } else if (semantic.primary) {
     emitColorScale(lines, "primary", semantic.primary);
   }
   if (semantic.secondary) {
     if (typeof semantic.secondary === "string") {
-      lines.push(`--color-secondary: ${semantic.secondary};`);
+      emitBrandColorWithVariants(lines, "secondary", semantic.secondary);
     } else {
       emitColorScale(lines, "secondary", semantic.secondary);
     }
@@ -2799,10 +2806,10 @@ function buildThemeCss(theme) {
       emitColorScale(lines, "neutral", semantic.neutral);
     }
   }
-  if (semantic.success) lines.push(`--color-success: ${semantic.success};`);
-  if (semantic.warning) lines.push(`--color-warning: ${semantic.warning};`);
-  if (semantic.danger) lines.push(`--color-danger: ${semantic.danger};`);
-  if (semantic.info) lines.push(`--color-info: ${semantic.info};`);
+  if (semantic.success) emitColorWithOpacityVariants(lines, "success", semantic.success);
+  if (semantic.warning) emitColorWithOpacityVariants(lines, "warning", semantic.warning);
+  if (semantic.danger) emitColorWithOpacityVariants(lines, "danger", semantic.danger);
+  if (semantic.info) emitColorWithOpacityVariants(lines, "info", semantic.info);
   const surface = theme.colors.surface;
   if (surface?.background) lines.push(`--color-background: ${surface.background};`);
   if (surface?.surface) lines.push(`--color-surface: ${surface.surface};`);
@@ -4570,13 +4577,13 @@ function getToolUIMimeType(platform = "generic") {
   }
 }
 var CLOUDFLARE_CDN = {
-  tailwindCss: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css",
+  tailwindCss: "https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.min.js",
   htmx: "https://cdnjs.cloudflare.com/ajax/libs/htmx/2.0.4/htmx.min.js",
   alpinejs: "https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.14.3/cdn.min.js"
 };
 function wrapToolUIForClaude(options) {
   const { content, toolName, input = {}, output, title, includeHtmx = false, includeAlpine = false } = options;
-  const tailwindCss = `<link href="${CLOUDFLARE_CDN.tailwindCss}" rel="stylesheet">`;
+  const tailwindCss = `<script src="${CLOUDFLARE_CDN.tailwindCss}" crossorigin="anonymous"></script>`;
   const htmxScript = includeHtmx ? `<script src="${CLOUDFLARE_CDN.htmx}" crossorigin="anonymous"></script>` : "";
   const alpineScript = includeAlpine ? `<script src="${CLOUDFLARE_CDN.alpinejs}" crossorigin="anonymous" defer></script>` : "";
   const helpers = createTemplateHelpers();
@@ -4833,16 +4840,18 @@ var RendererRuntime = class {
    * Get or load an adapter for a UI type.
    */
   async getAdapter(type, content) {
-    if (this.adapters.has(type)) {
-      return this.adapters.get(type);
+    const cachedAdapter = this.adapters.get(type);
+    if (cachedAdapter) {
+      return cachedAdapter;
     }
     let resolvedType = type;
     if (type === "auto" && content) {
       resolvedType = this.detectType(content);
       this.log("Auto-detected type:", resolvedType);
     }
-    if (this.adapters.has(resolvedType)) {
-      return this.adapters.get(resolvedType);
+    const resolvedAdapter = this.adapters.get(resolvedType);
+    if (resolvedAdapter) {
+      return resolvedAdapter;
     }
     const adapter = await loadAdapter(resolvedType);
     if (adapter) {

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

@@ -24,7 +24,7 @@ var BADGE_VARIANTS = {
   success: "bg-success/10 text-success",
   warning: "bg-warning/10 text-warning",
   danger: "bg-danger/10 text-danger",
-  info: "bg-blue-100 text-blue-800",
+  info: "bg-info/10 text-info",
   outline: "border border-border text-text-primary bg-transparent"
 };
 var BADGE_SIZES = {
@@ -44,7 +44,7 @@ var BADGE_DOT_VARIANTS = {
   success: "bg-success",
   warning: "bg-warning",
   danger: "bg-danger",
-  info: "bg-blue-500",
+  info: "bg-info",
   outline: "border border-current"
 };
 function getBadgeVariantClasses(variant) {
@@ -62,7 +62,7 @@ function getBadgeDotVariantClasses(variant) {
 var BUTTON_VARIANTS = {
   primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
   secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
-  outline: "border-2 border-primary text-primary hover:bg-primary/10",
+  outline: "border-2 border-primary text-primary bg-transparent hover:bg-primary/10",
   ghost: "text-text-primary hover:bg-gray-100",
   danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
   success: "bg-success hover:bg-success/90 text-white shadow-sm",
@@ -82,7 +82,7 @@ var BUTTON_ICON_SIZES = {
   lg: "p-3",
   xl: "p-4"
 };
-var BUTTON_BASE_CLASSES = "inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2";
+var BUTTON_BASE_CLASSES = "cursor-pointer inline-flex items-center justify-center font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2";
 function getButtonVariantClasses(variant) {
   return BUTTON_VARIANTS[variant];
 }
@@ -91,8 +91,8 @@ function getButtonSizeClasses(size, iconOnly) {
 }
 var ALERT_VARIANTS = {
   info: {
-    container: "bg-blue-50 border-blue-200 text-blue-800",
-    icon: "text-blue-500"
+    container: "bg-info/10 border-info/30 text-info",
+    icon: "text-info"
   },
   success: {
     container: "bg-success/10 border-success/30 text-success",