@frontmcp/ui 0.6.0 → 0.6.2

package/esm/layouts/index.mjs

@@ -0,0 +1,409 @@
+// libs/ui/src/layouts/base.ts
+import {
+  OPENAI_PLATFORM,
+  canUseCdn,
+  needsInlineScripts,
+  DEFAULT_THEME,
+  buildThemeCss,
+  mergeThemes,
+  buildFontPreconnect,
+  buildFontStylesheets,
+  buildCdnScripts
+} from "@frontmcp/uipack/theme";
+import { escapeHtml } from "@frontmcp/uipack/utils";
+import { escapeHtml as escapeHtml2 } from "@frontmcp/uipack/utils";
+function getSizeClass(size) {
+  const sizeMap = {
+    xs: "max-w-sm",
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-xl",
+    xl: "max-w-2xl",
+    "2xl": "max-w-3xl",
+    "3xl": "max-w-4xl",
+    full: "max-w-full"
+  };
+  return sizeMap[size];
+}
+function getAlignmentClasses(alignment) {
+  const alignMap = {
+    center: "min-h-screen flex items-center justify-center",
+    top: "min-h-screen flex flex-col items-center pt-12",
+    start: "min-h-screen"
+  };
+  return alignMap[alignment];
+}
+function getBackgroundClasses(background) {
+  switch (background) {
+    case "gradient":
+      return "bg-gradient-to-br from-primary to-secondary";
+    case "pattern":
+      return 'bg-surface bg-[url("data:image/svg+xml,...")]';
+    // Pattern would be defined
+    case "solid":
+      return "bg-background";
+    case "none":
+    default:
+      return "";
+  }
+}
+function buildMetaTags(options) {
+  const tags = [];
+  if (options.description) {
+    tags.push(`<meta name="description" content="${escapeHtml(options.description)}">`);
+  }
+  if (options.og) {
+    if (options.og.title) {
+      tags.push(`<meta property="og:title" content="${escapeHtml(options.og.title)}">`);
+    }
+    if (options.og.description) {
+      tags.push(`<meta property="og:description" content="${escapeHtml(options.og.description)}">`);
+    }
+    if (options.og.image) {
+      tags.push(`<meta property="og:image" content="${escapeHtml(options.og.image)}">`);
+    }
+    if (options.og.type) {
+      tags.push(`<meta property="og:type" content="${escapeHtml(options.og.type)}">`);
+    }
+  }
+  if (options.favicon) {
+    tags.push(`<link rel="icon" href="${escapeHtml(options.favicon)}">`);
+  }
+  return tags.join("\n  ");
+}
+function buildBodyAttrs(attrs) {
+  if (!attrs) return "";
+  return Object.entries(attrs).map(([key, value]) => `${key}="${escapeHtml(value)}"`).join(" ");
+}
+function baseLayout(content, options) {
+  const {
+    title,
+    pageType: _pageType = "custom",
+    size = "md",
+    alignment = "center",
+    background = "solid",
+    platform = OPENAI_PLATFORM,
+    theme: themeOverrides,
+    includeHtmx,
+    includeAlpine = false,
+    includeIcons = false,
+    headExtra = "",
+    bodyAttrs,
+    bodyClass = "",
+    titleSuffix = "FrontMCP"
+  } = options;
+  const theme = themeOverrides ? mergeThemes(DEFAULT_THEME, themeOverrides) : DEFAULT_THEME;
+  const shouldIncludeHtmx = includeHtmx ?? platform.supportsHtmx;
+  const useCdn = canUseCdn(platform);
+  const useInline = needsInlineScripts(platform);
+  const fontPreconnect = useCdn ? buildFontPreconnect() : "";
+  const fontStylesheets = useCdn ? buildFontStylesheets({ inter: true }) : "";
+  const scripts = buildCdnScripts({
+    tailwind: platform.supportsTailwind,
+    htmx: shouldIncludeHtmx,
+    alpine: includeAlpine,
+    icons: includeIcons,
+    inline: useInline
+  });
+  const themeCss = buildThemeCss(theme);
+  const customCss = theme.customCss || "";
+  const styleBlock = platform.supportsTailwind ? `<style type="text/tailwindcss">
+    @theme {
+      ${themeCss}
+    }
+    ${customCss}
+  </style>` : "";
+  const sizeClass = getSizeClass(size);
+  const alignmentClasses = getAlignmentClasses(alignment);
+  const backgroundClasses = getBackgroundClasses(background);
+  const allBodyClasses = [backgroundClasses, "font-sans antialiased", bodyClass].filter(Boolean).join(" ");
+  const metaTags = buildMetaTags(options);
+  const bodyAttrStr = buildBodyAttrs(bodyAttrs);
+  const wrappedContent = alignment === "center" ? `<div class="${alignmentClasses} p-4">
+    <div class="w-full ${sizeClass}">
+      ${content}
+    </div>
+  </div>` : `<div class="${alignmentClasses}">
+    <div class="w-full ${sizeClass} mx-auto px-4 py-8">
+      ${content}
+    </div>
+  </div>`;
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}${titleSuffix ? ` - ${escapeHtml(titleSuffix)}` : ""}</title>
+  ${metaTags}
+
+  <!-- Fonts -->
+  ${fontPreconnect}
+  ${fontStylesheets}
+
+  <!-- Tailwind CSS -->
+  ${scripts}
+  ${styleBlock}
+
+  ${headExtra}
+</head>
+<body class="${escapeHtml(allBodyClasses)}"${bodyAttrStr ? ` ${bodyAttrStr}` : ""}>
+  ${wrappedContent}
+</body>
+</html>`;
+}
+function createLayoutBuilder(defaults) {
+  return (content, options = {}) => {
+    let mergedTheme = DEFAULT_THEME;
+    if (defaults.theme) {
+      mergedTheme = mergeThemes(mergedTheme, defaults.theme);
+    }
+    if (options.theme) {
+      mergedTheme = mergeThemes(mergedTheme, options.theme);
+    }
+    const merged = {
+      ...defaults,
+      ...options,
+      theme: mergedTheme
+    };
+    if (!merged.title) {
+      throw new Error("createLayoutBuilder: title is required either in defaults or options");
+    }
+    return baseLayout(content, merged);
+  };
+}
+
+// libs/ui/src/layouts/presets.ts
+function authLayout(content, options) {
+  const { showBranding = true, logo, footer, ...baseOptions } = options;
+  const brandingHtml = showBranding && logo ? `<div class="text-center mb-8">${logo}</div>` : showBranding ? `<div class="text-center mb-8">
+          <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary mb-4">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+            </svg>
+          </div>
+        </div>` : "";
+  const footerHtml = footer ? `<div class="mt-8 text-center text-sm text-text-secondary">${footer}</div>` : "";
+  const wrappedContent = `
+    <div class="bg-white rounded-2xl shadow-xl p-8">
+      ${brandingHtml}
+      ${content}
+    </div>
+    ${footerHtml}
+  `;
+  return baseLayout(wrappedContent, {
+    ...baseOptions,
+    pageType: "auth",
+    size: baseOptions.size ?? "sm",
+    alignment: "center",
+    background: "gradient"
+  });
+}
+function consentLayout(content, options) {
+  const { clientName, clientIcon, userInfo, ...baseOptions } = options;
+  const headerHtml = clientName ? `<div class="text-center mb-6">
+        ${clientIcon ? `<img src="${escapeHtml2(clientIcon)}" alt="${escapeHtml2(
+    clientName
+  )}" class="w-16 h-16 rounded-xl mx-auto mb-4">` : `<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary text-white font-bold text-2xl mx-auto mb-4">
+              ${escapeHtml2(clientName.charAt(0).toUpperCase())}
+            </div>`}
+        <h1 class="text-2xl font-bold text-text-primary">${escapeHtml2(clientName)}</h1>
+      </div>` : "";
+  const userInfoHtml = userInfo ? `<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg mb-6">
+        ${userInfo.avatar ? `<img src="${escapeHtml2(userInfo.avatar)}" class="w-10 h-10 rounded-full">` : `<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-medium">
+              ${escapeHtml2((userInfo.name || userInfo.email || "U").charAt(0).toUpperCase())}
+            </div>`}
+        <div>
+          ${userInfo.name ? `<div class="font-medium text-text-primary">${escapeHtml2(userInfo.name)}</div>` : ""}
+          ${userInfo.email ? `<div class="text-sm text-text-secondary">${escapeHtml2(userInfo.email)}</div>` : ""}
+        </div>
+      </div>` : "";
+  const wrappedContent = `
+    ${headerHtml}
+    ${userInfoHtml}
+    ${content}
+  `;
+  return baseLayout(wrappedContent, {
+    ...baseOptions,
+    pageType: "consent",
+    size: baseOptions.size ?? "lg",
+    alignment: "top",
+    background: "solid"
+  });
+}
+function errorLayout(content, options) {
+  const {
+    errorCode,
+    errorTitle = "Something went wrong",
+    errorMessage,
+    showRetry = true,
+    retryUrl,
+    showHome = true,
+    homeUrl = "/",
+    ...baseOptions
+  } = options;
+  const errorHtml = `
+    <div class="text-center">
+      <!-- Error icon -->
+      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-danger/10 mb-6">
+        <svg class="w-10 h-10 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+        </svg>
+      </div>
+
+      ${errorCode ? `<p class="text-6xl font-bold text-danger mb-2">${escapeHtml2(errorCode)}</p>` : ""}
+      <h1 class="text-2xl font-bold text-text-primary mb-4">${escapeHtml2(errorTitle)}</h1>
+      ${errorMessage ? `<p class="text-text-secondary mb-8">${escapeHtml2(errorMessage)}</p>` : ""}
+
+      ${content}
+
+      <div class="flex gap-4 justify-center mt-8">
+        ${showRetry ? `<button onclick="${retryUrl ? `window.location.href='${escapeHtml2(retryUrl)}'` : "window.location.reload()"}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">Try Again</button>` : ""}
+        ${showHome ? `<a href="${escapeHtml2(
+    homeUrl
+  )}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-text-primary font-medium rounded-lg transition-colors">Go Home</a>` : ""}
+      </div>
+    </div>
+  `;
+  return baseLayout(errorHtml, {
+    ...baseOptions,
+    pageType: "error",
+    size: "sm",
+    alignment: "center",
+    background: "solid",
+    title: baseOptions.title ?? errorTitle
+  });
+}
+function loadingLayout(content, options) {
+  const { message = "Loading...", showSpinner = true, showProgress = false, progress = 0, ...baseOptions } = options;
+  const spinnerHtml = showSpinner ? `<div class="inline-flex items-center justify-center w-16 h-16 mb-6">
+        <svg class="animate-spin w-12 h-12 text-primary" fill="none" viewBox="0 0 24 24">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <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>
+        </svg>
+      </div>` : "";
+  const progressHtml = showProgress ? `<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
+        <div class="bg-primary h-2 rounded-full transition-all duration-300" style="width: ${progress}%"></div>
+      </div>` : "";
+  const loadingHtml = `
+    <div class="text-center">
+      ${spinnerHtml}
+      <h2 class="text-xl font-medium text-text-primary mb-2">${escapeHtml2(message)}</h2>
+      ${progressHtml}
+      ${content}
+    </div>
+  `;
+  return baseLayout(loadingHtml, {
+    ...baseOptions,
+    pageType: "loading",
+    size: "sm",
+    alignment: "center",
+    background: "solid",
+    title: baseOptions.title ?? "Loading"
+  });
+}
+function successLayout(content, options) {
+  const {
+    successTitle = "Success!",
+    successMessage,
+    continueText = "Continue",
+    continueUrl,
+    autoClose,
+    ...baseOptions
+  } = options;
+  const autoCloseScript = autoClose ? `<script>
+        let countdown = ${autoClose};
+        const countdownEl = document.getElementById('countdown');
+        const interval = setInterval(() => {
+          countdown--;
+          if (countdownEl) countdownEl.textContent = countdown;
+          if (countdown <= 0) {
+            clearInterval(interval);
+            ${continueUrl ? `window.location.href = '${escapeHtml2(continueUrl)}';` : "window.close();"}
+          }
+        }, 1000);
+      </script>` : "";
+  const successHtml = `
+    <div class="text-center">
+      <!-- Success icon -->
+      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-success/10 mb-6">
+        <svg class="w-10 h-10 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+        </svg>
+      </div>
+
+      <h1 class="text-2xl font-bold text-text-primary mb-4">${escapeHtml2(successTitle)}</h1>
+      ${successMessage ? `<p class="text-text-secondary mb-8">${escapeHtml2(successMessage)}</p>` : ""}
+
+      ${content}
+
+      ${continueUrl ? `<a href="${escapeHtml2(
+    continueUrl
+  )}" class="inline-block mt-6 px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">${escapeHtml2(
+    continueText
+  )}</a>` : ""}
+
+      ${autoClose ? `<p class="mt-4 text-sm text-text-secondary">Closing in <span id="countdown">${autoClose}</span> seconds...</p>` : ""}
+    </div>
+    ${autoCloseScript}
+  `;
+  return baseLayout(successHtml, {
+    ...baseOptions,
+    pageType: "success",
+    size: "sm",
+    alignment: "center",
+    background: "solid",
+    title: baseOptions.title ?? successTitle
+  });
+}
+function widgetLayout(content, options) {
+  const { maxWidth = "100%", showBorder = false, transparent = true, ...baseOptions } = options;
+  const containerClasses = [
+    "widget-container",
+    showBorder ? "border border-border rounded-lg" : "",
+    transparent ? "" : "bg-surface"
+  ].filter(Boolean).join(" ");
+  const wrappedContent = `
+    <div class="${containerClasses}" style="max-width: ${escapeHtml2(maxWidth)}">
+      ${content}
+    </div>
+  `;
+  return baseLayout(wrappedContent, {
+    ...baseOptions,
+    pageType: "widget",
+    size: "full",
+    alignment: "start",
+    background: "none"
+  });
+}
+var authLayoutBuilder = createLayoutBuilder({
+  pageType: "auth",
+  size: "sm",
+  alignment: "center",
+  background: "gradient"
+});
+var consentLayoutBuilder = createLayoutBuilder({
+  pageType: "consent",
+  size: "lg",
+  alignment: "top",
+  background: "solid"
+});
+var errorLayoutBuilder = createLayoutBuilder({
+  pageType: "error",
+  size: "sm",
+  alignment: "center",
+  background: "solid"
+});
+export {
+  authLayout,
+  authLayoutBuilder,
+  baseLayout,
+  consentLayout,
+  consentLayoutBuilder,
+  createLayoutBuilder,
+  errorLayout,
+  errorLayoutBuilder,
+  escapeHtml2 as escapeHtml,
+  loadingLayout,
+  successLayout,
+  widgetLayout
+};

package/esm/package.json

@@ -1,27 +1,20 @@
 {
   "name": "@frontmcp/ui",
-  "version": "0.6.0",
-  "description": "FrontMCP UI - Comprehensive UI library for authentication and authorization flows with multi-framework support (HTML, React, MDX)",
+  "version": "0.6.2",
+  "description": "FrontMCP UI - React components and hooks for MCP applications",
   "author": "AgentFront <info@agentfront.dev>",
   "homepage": "https://docs.agentfront.dev",
   "license": "Apache-2.0",
   "keywords": [
     "mcp",
     "ui",
-    "tailwind",
-    "htmx",
-    "oauth",
-    "authentication",
-    "authorization",
-    "consent",
     "agentfront",
     "frontmcp",
-    "framework",
-    "typescript",
     "react",
-    "mdx",
-    "jsx",
-    "ssr"
+    "hooks",
+    "components",
+    "ssr",
+    "jsx"
   ],
   "repository": {
     "type": "git",
@@ -32,8 +25,9 @@
   },
   "type": "commonjs",
   "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
+  "module": "./dist/esm/index.mjs",
   "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -43,8 +37,8 @@
         "default": "./dist/index.js"
       },
       "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/esm/index.mjs"
       }
     },
     "./*": {
@@ -54,33 +48,22 @@
         "default": "./dist/*/index.js"
       },
       "import": {
-        "types": "./dist/esm/*/index.d.ts",
-        "default": "./dist/esm/*/index.js"
+        "types": "./dist/*/index.d.ts",
+        "default": "./dist/esm/*/index.mjs"
       }
     },
     "./esm": null
   },
   "dependencies": {
+    "@mdx-js/mdx": "^3.1.1",
     "@swc/core": "^1.5.0",
-    "enclave-vm": "^1.0.3",
     "esbuild": "^0.27.1",
-    "handlebars": "^4.7.8",
     "zod": "^4.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    }
-  },
-  "optionalDependencies": {
-    "@mdx-js/mdx": "^3.1.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@frontmcp/uipack": "0.6.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",