@frontmcp/ui 0.6.0 → 0.6.1

package/esm/widgets/index.js

@@ -1,31 +1,17 @@
-// libs/ui/src/theme/platforms.ts
-var CLAUDE_PLATFORM = {
-  id: "claude",
-  name: "Claude (Artifacts)",
-  supportsWidgets: true,
-  supportsTailwind: true,
-  supportsHtmx: false,
-  // Network blocked, HTMX won't work for API calls
-  networkMode: "blocked",
-  scriptStrategy: "inline",
-  maxInlineSize: 100 * 1024,
-  // 100KB limit for artifacts
-  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
-  options: {
-    mode: "artifacts",
-    framework: "react"
-    // Claude artifacts prefer React
-  }
-};
-
-// libs/ui/src/utils/escape-html.ts
-function escapeHtml(str) {
-  if (str === null || str === void 0) {
-    return "";
-  }
-  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");
-}
+// 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";
 
 // libs/ui/src/components/card.ts
 function getVariantClasses(variant) {
@@ -48,7 +34,7 @@ function getSizeClasses(size) {
 }
 function buildDataAttrs(data) {
   if (!data) return "";
-  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml(value)}"`).join(" ");
+  return Object.entries(data).map(([key, value]) => `data-${key}="${escapeHtml2(value)}"`).join(" ");
 }
 function card(content, options = {}) {
   const {
@@ -69,18 +55,18 @@ function card(content, options = {}) {
   const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
   const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
   const dataAttrs = buildDataAttrs(data);
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
   const hasHeader = title || subtitle || headerActions;
   const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
         <div>
-          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : ""}
-          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(subtitle)}</p>` : ""}
+          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml2(title)}</h3>` : ""}
+          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml2(subtitle)}</p>` : ""}
         </div>
         ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ""}
       </div>` : "";
   const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
   if (href) {
-    return `<a href="${escapeHtml(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
+    return `<a href="${escapeHtml2(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
       ${headerHtml}
       ${content}
       ${footerHtml}
@@ -145,7 +131,7 @@ function badge(text, options = {}) {
       outline: "border border-current"
     };
     const dotClasses = ["inline-block rounded-full", getSizeClasses2(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
-    return `<span class="${dotClasses}" aria-label="${escapeHtml(text)}" title="${escapeHtml(text)}"></span>`;
+    return `<span class="${dotClasses}" aria-label="${escapeHtml2(text)}" title="${escapeHtml2(text)}"></span>`;
   }
   const variantClasses = getVariantClasses2(variant);
   const sizeClasses = getSizeClasses2(size, false);
@@ -168,106 +154,62 @@ function badge(text, options = {}) {
         </svg>
       </button>` : "";
   return `<span class="${baseClasses}">
-    ${iconHtml}${escapeHtml(text)}${removeHtml}
+    ${iconHtml}${escapeHtml2(text)}${removeHtml}
   </span>`;
 }
 
-// libs/ui/src/validation/error-box.ts
-var errorIcon = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-  <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>`;
-function validationErrorBox(options) {
-  const { componentName, invalidParam } = options;
-  return `<div
-  class="validation-error flex items-start gap-3 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg"
-  role="alert"
-  data-testid="validation-error"
-  data-component="${escapeHtml(componentName)}"
-  data-param="${escapeHtml(invalidParam)}"
->
-  ${errorIcon}
-  <div class="min-w-0">
-    <p class="font-semibold text-sm">${escapeHtml(componentName)}: Invalid Configuration</p>
-    <p class="text-sm opacity-90 mt-0.5">The "${escapeHtml(invalidParam)}" parameter is invalid.</p>
-  </div>
-</div>`;
-}
-
-// libs/ui/src/validation/wrapper.ts
-function getFirstInvalidPath(error) {
-  const firstError = error.issues[0];
-  if (!firstError || firstError.path.length === 0) {
-    return "options";
-  }
-  return firstError.path.map(String).join(".");
-}
-function validateOptions(options, config) {
-  const result = config.schema.safeParse(options);
-  if (result.success) {
-    return { success: true, data: result.data };
-  }
-  const invalidParam = getFirstInvalidPath(result.error);
-  return {
-    success: false,
-    error: validationErrorBox({
-      componentName: config.componentName,
-      invalidParam
-    })
-  };
-}
-
-// libs/ui/src/validation/schema-paths.ts
-import { z } from "zod";
+// libs/ui/src/components/button.ts
+import { validateOptions } from "@frontmcp/uipack/validation";
 
 // libs/ui/src/components/button.schema.ts
-import { z as z2 } from "zod";
-var ButtonVariantSchema = z2.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
-var ButtonSizeSchema = z2.enum(["xs", "sm", "md", "lg", "xl"]);
-var ButtonOptionsSchema = z2.object({
+import { z } from "zod";
+var ButtonVariantSchema = z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = z.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = z.object({
   /** Button variant */
   variant: ButtonVariantSchema.optional(),
   /** Button size */
   size: ButtonSizeSchema.optional(),
   /** Button type attribute */
-  type: z2.enum(["button", "submit", "reset"]).optional(),
+  type: z.enum(["button", "submit", "reset"]).optional(),
   /** Disabled state */
-  disabled: z2.boolean().optional(),
+  disabled: z.boolean().optional(),
   /** Loading state */
-  loading: z2.boolean().optional(),
+  loading: z.boolean().optional(),
   /** Full width */
-  fullWidth: z2.boolean().optional(),
+  fullWidth: z.boolean().optional(),
   /** Icon before text (HTML string) */
-  iconBefore: z2.string().optional(),
+  iconBefore: z.string().optional(),
   /** Icon after text (HTML string) */
-  iconAfter: z2.string().optional(),
+  iconAfter: z.string().optional(),
   /** Icon only (no text) */
-  iconOnly: z2.boolean().optional(),
+  iconOnly: z.boolean().optional(),
   /** Additional CSS classes */
-  className: z2.string().optional(),
+  className: z.string().optional(),
   /** Button ID */
-  id: z2.string().optional(),
+  id: z.string().optional(),
   /** Name attribute */
-  name: z2.string().optional(),
+  name: z.string().optional(),
   /** Value attribute */
-  value: z2.string().optional(),
+  value: z.string().optional(),
   /** Click handler (URL for links) */
-  href: z2.string().optional(),
+  href: z.string().optional(),
   /** Open in new tab */
-  target: z2.enum(["_blank", "_self"]).optional(),
+  target: z.enum(["_blank", "_self"]).optional(),
   /** Data attributes */
-  data: z2.record(z2.string(), z2.string()).optional(),
+  data: z.record(z.string(), z.string()).optional(),
   /** ARIA label */
-  ariaLabel: z2.string().optional()
+  ariaLabel: z.string().optional()
 }).strict();
-var ButtonGroupOptionsSchema = z2.object({
+var ButtonGroupOptionsSchema = z.object({
   /** Attach buttons visually */
-  attached: z2.boolean().optional(),
+  attached: z.boolean().optional(),
   /** Direction */
-  direction: z2.enum(["horizontal", "vertical"]).optional(),
+  direction: z.enum(["horizontal", "vertical"]).optional(),
   /** Gap between buttons */
-  gap: z2.enum(["sm", "md", "lg"]).optional(),
+  gap: z.enum(["sm", "md", "lg"]).optional(),
   /** Additional CSS classes */
-  className: z2.string().optional()
+  className: z.string().optional()
 }).strict();
 
 // libs/ui/src/components/button.ts
@@ -360,7 +302,7 @@ function button(text, options = {}) {
   }
   const variantClasses = getVariantClasses3(variant);
   const sizeClasses = getSizeClasses3(size, iconOnly);
-  const safeClassName = className ? escapeHtml(className) : "";
+  const safeClassName = className ? escapeHtml2(className) : "";
   const baseClasses = [
     "inline-flex items-center justify-center",
     "font-medium",
@@ -375,24 +317,24 @@ function button(text, options = {}) {
   ].filter(Boolean).join(" ");
   const dataAttrs = data ? Object.entries(data).map(([key, val]) => {
     const safeKey = sanitizeDataKey(key);
-    return safeKey ? `data-${safeKey}="${escapeHtml(val)}"` : "";
+    return safeKey ? `data-${safeKey}="${escapeHtml2(val)}"` : "";
   }).filter(Boolean).join(" ") : "";
-  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
-  const nameAttr = name ? `name="${escapeHtml(name)}"` : "";
-  const valueAttr = value ? `value="${escapeHtml(value)}"` : "";
+  const idAttr = id ? `id="${escapeHtml2(id)}"` : "";
+  const nameAttr = name ? `name="${escapeHtml2(name)}"` : "";
+  const valueAttr = value ? `value="${escapeHtml2(value)}"` : "";
   const disabledAttr = disabled || loading ? "disabled" : "";
-  const targetAttr = target ? `target="${escapeHtml(target)}"` : "";
+  const targetAttr = target ? `target="${escapeHtml2(target)}"` : "";
   const relAttr = target === "_blank" ? 'rel="noopener noreferrer"' : "";
   const trimmedText = text.trim();
   const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : void 0);
-  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${escapeHtml(effectiveAriaLabel)}"` : "";
+  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${escapeHtml2(effectiveAriaLabel)}"` : "";
   const iconBeforeHtml = iconBefore && !loading ? `<span class="${iconOnly ? "" : "mr-2"}">${iconBefore}</span>` : "";
   const iconAfterHtml = iconAfter && !loading ? `<span class="${iconOnly ? "" : "ml-2"}">${iconAfter}</span>` : "";
   const loadingHtml = loading ? loadingSpinner : "";
-  const textHtml = iconOnly ? "" : escapeHtml(text);
+  const textHtml = iconOnly ? "" : escapeHtml2(text);
   const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
   if (href && !disabled && !loading && isValidHrefProtocol(href)) {
-    return `<a href="${escapeHtml(
+    return `<a href="${escapeHtml2(
       href
     )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
       ${contentHtml}
@@ -469,7 +411,7 @@ function resourceWidget(options) {
     cardOptions = {}
   } = options;
   const iconHtml = thumbnail ? `<div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
-        <img src="${escapeHtml(thumbnail)}" alt="${escapeHtml(title)}" class="w-full h-full object-cover">
+        <img src="${escapeHtml2(thumbnail)}" alt="${escapeHtml2(title)}" class="w-full h-full object-cover">
       </div>` : `<div class="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400">
         ${icon || resourceIcons[type]}
       </div>`;
@@ -504,12 +446,12 @@ function resourceWidget(options) {
     const variant = action.variant ? variantMap[action.variant] : "ghost";
     const htmxAttrs = [];
     if (action.htmx) {
-      if (action.htmx.get) htmxAttrs.push(`hx-get="${escapeHtml(action.htmx.get)}"`);
-      if (action.htmx.post) htmxAttrs.push(`hx-post="${escapeHtml(action.htmx.post)}"`);
-      if (action.htmx.delete) htmxAttrs.push(`hx-delete="${escapeHtml(action.htmx.delete)}"`);
-      if (action.htmx.target) htmxAttrs.push(`hx-target="${escapeHtml(action.htmx.target)}"`);
-      if (action.htmx.swap) htmxAttrs.push(`hx-swap="${escapeHtml(action.htmx.swap)}"`);
-      if (action.htmx.confirm) htmxAttrs.push(`hx-confirm="${escapeHtml(action.htmx.confirm)}"`);
+      if (action.htmx.get) htmxAttrs.push(`hx-get="${escapeHtml2(action.htmx.get)}"`);
+      if (action.htmx.post) htmxAttrs.push(`hx-post="${escapeHtml2(action.htmx.post)}"`);
+      if (action.htmx.delete) htmxAttrs.push(`hx-delete="${escapeHtml2(action.htmx.delete)}"`);
+      if (action.htmx.target) htmxAttrs.push(`hx-target="${escapeHtml2(action.htmx.target)}"`);
+      if (action.htmx.swap) htmxAttrs.push(`hx-swap="${escapeHtml2(action.htmx.swap)}"`);
+      if (action.htmx.confirm) htmxAttrs.push(`hx-confirm="${escapeHtml2(action.htmx.confirm)}"`);
     }
     return button(action.label, {
       variant,
@@ -526,12 +468,12 @@ function resourceWidget(options) {
       <div class="flex-1 min-w-0">
         <div class="flex items-start justify-between gap-2">
           <div class="min-w-0">
-            ${url ? `<a href="${escapeHtml(
+            ${url ? `<a href="${escapeHtml2(
     url
-  )}" class="font-semibold text-text-primary hover:text-primary truncate block">${escapeHtml(
+  )}" class="font-semibold text-text-primary hover:text-primary truncate block">${escapeHtml2(
     title
-  )}</a>` : `<h3 class="font-semibold text-text-primary truncate">${escapeHtml(title)}</h3>`}
-            ${description ? `<p class="text-sm text-text-secondary mt-0.5 line-clamp-2">${escapeHtml(description)}</p>` : ""}
+  )}</a>` : `<h3 class="font-semibold text-text-primary truncate">${escapeHtml2(title)}</h3>`}
+            ${description ? `<p class="text-sm text-text-secondary mt-0.5 line-clamp-2">${escapeHtml2(description)}</p>` : ""}
             ${metaHtml}
             ${tagsHtml}
           </div>
@@ -559,7 +501,7 @@ function resourceList(options) {
     showLoadMore = false,
     loadMoreUrl
   } = options;
-  const titleHtml = title ? `<h2 class="text-lg font-semibold text-text-primary mb-4">${escapeHtml(title)}</h2>` : "";
+  const titleHtml = title ? `<h2 class="text-lg font-semibold text-text-primary mb-4">${escapeHtml2(title)}</h2>` : "";
   if (resources.length === 0) {
     return `<div class="${className}">
       ${titleHtml}
@@ -567,7 +509,7 @@ function resourceList(options) {
         <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
         </svg>
-        <p>${escapeHtml(emptyMessage)}</p>
+        <p>${escapeHtml2(emptyMessage)}</p>
       </div>
     </div>`;
   }
@@ -594,7 +536,7 @@ function resourceItem(options) {
   </div>`;
   const statusHtml = status ? badge(status.label, { variant: status.variant, size: "sm" }) : "";
   const metaText = meta?.size ? formatFileSize(meta.size) : "";
-  const titleElement = url ? `<a href="${escapeHtml(url)}" class="font-medium text-text-primary hover:text-primary">${escapeHtml(title)}</a>` : `<span class="font-medium text-text-primary">${escapeHtml(title)}</span>`;
+  const titleElement = url ? `<a href="${escapeHtml2(url)}" class="font-medium text-text-primary hover:text-primary">${escapeHtml2(title)}</a>` : `<span class="font-medium text-text-primary">${escapeHtml2(title)}</span>`;
   return `<div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
     ${iconHtml}
     <div class="flex-1 min-w-0">
@@ -602,7 +544,7 @@ function resourceItem(options) {
         ${titleElement}
         ${statusHtml}
       </div>
-      ${description || metaText ? `<p class="text-sm text-text-secondary truncate">${escapeHtml(description || metaText)}</p>` : ""}
+      ${description || metaText ? `<p class="text-sm text-text-secondary truncate">${escapeHtml2(description || metaText)}</p>` : ""}
     </div>
   </div>`;
 }
@@ -631,7 +573,7 @@ function codePreview(options) {
       </script>` : "";
   const copyButton = showCopy ? `<button
         type="button"
-        onclick="copyCode(this, ${escapeHtml(JSON.stringify(code))})"
+        onclick="copyCode(this, ${escapeHtml2(JSON.stringify(code))})"
         class="p-1.5 rounded hover:bg-gray-700 transition-colors"
         title="Copy code"
       >
@@ -642,9 +584,9 @@ function codePreview(options) {
   return `<div class="code-preview rounded-lg overflow-hidden ${className}">
     ${filename || showCopy ? `
       <div class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700">
-        ${filename ? `<span class="text-sm text-gray-300">${escapeHtml(filename)}</span>` : "<span></span>"}
+        ${filename ? `<span class="text-sm text-gray-300">${escapeHtml2(filename)}</span>` : "<span></span>"}
         <div class="flex items-center gap-2">
-          ${language ? `<span class="text-xs text-gray-500">${escapeHtml(language)}</span>` : ""}
+          ${language ? `<span class="text-xs text-gray-500">${escapeHtml2(language)}</span>` : ""}
           ${copyButton}
         </div>
       </div>
@@ -652,7 +594,7 @@ function codePreview(options) {
     <div class="bg-gray-900 p-4 overflow-auto" style="max-height: ${maxHeight}">
       <div class="flex text-sm font-mono">
         ${lineNumbersHtml}
-        <pre class="flex-1 text-gray-100"><code>${escapeHtml(code)}</code></pre>
+        <pre class="flex-1 text-gray-100"><code>${escapeHtml2(code)}</code></pre>
       </div>
     </div>
     ${copyScript}
@@ -661,13 +603,13 @@ function codePreview(options) {
 function imagePreview(options) {
   const { src, alt, caption, maxHeight = "400px", clickable = true, className = "" } = options;
   const imageHtml = `<img
-    src="${escapeHtml(src)}"
-    alt="${escapeHtml(alt)}"
+    src="${escapeHtml2(src)}"
+    alt="${escapeHtml2(alt)}"
     class="max-w-full h-auto rounded-lg"
     style="max-height: ${maxHeight}"
   >`;
-  const captionHtml = caption ? `<p class="text-sm text-text-secondary mt-2 text-center">${escapeHtml(caption)}</p>` : "";
-  const content = clickable ? `<a href="${escapeHtml(src)}" target="_blank" rel="noopener" class="block">${imageHtml}</a>` : imageHtml;
+  const captionHtml = caption ? `<p class="text-sm text-text-secondary mt-2 text-center">${escapeHtml2(caption)}</p>` : "";
+  const content = clickable ? `<a href="${escapeHtml2(src)}" target="_blank" rel="noopener" class="block">${imageHtml}</a>` : imageHtml;
   return `<div class="image-preview ${className}">
     ${content}
     ${captionHtml}
@@ -701,11 +643,11 @@ function progressBar(options) {
   };
   const animatedClass = animated ? "bg-stripes animate-stripes" : "";
   const displayLabel = label || `${Math.round(clampedValue)}%`;
-  const insideLabel = labelPosition === "inside" && size === "lg" && clampedValue > 10 ? `<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">${escapeHtml(
+  const insideLabel = labelPosition === "inside" && size === "lg" && clampedValue > 10 ? `<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">${escapeHtml2(
     displayLabel
   )}</span>` : "";
   const outsideLabel = showLabel && labelPosition === "outside" ? `<div class="flex justify-between mb-1">
-        <span class="text-sm font-medium text-text-primary">${label ? escapeHtml(label) : "Progress"}</span>
+        <span class="text-sm font-medium text-text-primary">${label ? escapeHtml2(label) : "Progress"}</span>
         <span class="text-sm text-text-secondary">${Math.round(clampedValue)}%</span>
       </div>` : "";
   return `<div class="progress-bar ${className}">
@@ -787,13 +729,13 @@ function stepProgress(options) {
             ${getStepIcon(step, index)}
           </div>
           <div class="pt-2">
-            <div class="${classes.text}">${escapeHtml(step.label)}</div>
-            ${step.description ? `<p class="text-sm text-text-secondary mt-0.5">${escapeHtml(step.description)}</p>` : ""}
+            <div class="${classes.text}">${escapeHtml2(step.label)}</div>
+            ${step.description ? `<p class="text-sm text-text-secondary mt-0.5">${escapeHtml2(step.description)}</p>` : ""}
           </div>
         </div>
         ${connectorHtml}
       `;
-      return step.href && step.status === "completed" ? `<a href="${escapeHtml(step.href)}" class="block hover:opacity-80">${stepContent}</a>` : `<div>${stepContent}</div>`;
+      return step.href && step.status === "completed" ? `<a href="${escapeHtml2(step.href)}" class="block hover:opacity-80">${stepContent}</a>` : `<div>${stepContent}</div>`;
     }).join("\n");
     return `<div class="step-progress ${className}">${stepsHtml2}</div>`;
   }
@@ -807,12 +749,12 @@ function stepProgress(options) {
           ${getStepIcon(step, index)}
         </div>
         <div class="mt-2 text-center">
-          <div class="${classes.text} text-sm">${escapeHtml(step.label)}</div>
-          ${step.description ? `<p class="text-xs text-text-secondary mt-0.5 max-w-[120px]">${escapeHtml(step.description)}</p>` : ""}
+          <div class="${classes.text} text-sm">${escapeHtml2(step.label)}</div>
+          ${step.description ? `<p class="text-xs text-text-secondary mt-0.5 max-w-[120px]">${escapeHtml2(step.description)}</p>` : ""}
         </div>
       </div>
     `;
-    const clickableStep = step.href && step.status === "completed" ? `<a href="${escapeHtml(step.href)}" class="hover:opacity-80">${stepHtml}</a>` : stepHtml;
+    const clickableStep = step.href && step.status === "completed" ? `<a href="${escapeHtml2(step.href)}" class="hover:opacity-80">${stepHtml}</a>` : stepHtml;
     return `${clickableStep}${connectorHtml}`;
   }).join("\n");
   return `<div class="step-progress flex items-start ${className}">${stepsHtml}</div>`;
@@ -855,7 +797,7 @@ function circularProgress(options) {
         style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${offset}; transition: stroke-dashoffset 0.3s ease;"
       />
     </svg>
-    ${showLabel ? `<span class="absolute text-sm font-semibold text-text-primary">${escapeHtml(displayLabel)}</span>` : ""}
+    ${showLabel ? `<span class="absolute text-sm font-semibold text-text-primary">${escapeHtml2(displayLabel)}</span>` : ""}
   </div>`;
 }
 function statusIndicator(options) {
@@ -883,7 +825,7 @@ function statusIndicator(options) {
       ${pulseHtml}
       <span class="relative ${sizeInfo.dot} ${statusInfo.color} rounded-full"></span>
     </span>
-    ${displayLabel ? `<span class="${sizeInfo.text} text-text-secondary">${escapeHtml(displayLabel)}</span>` : ""}
+    ${displayLabel ? `<span class="${sizeInfo.text} text-text-secondary">${escapeHtml2(displayLabel)}</span>` : ""}
   </div>`;
 }
 function skeleton(options = {}) {

package/index.d.ts

@@ -1,56 +1,40 @@
 /**
  * @frontmcp/ui
  *
- * Comprehensive UI library for FrontMCP applications.
- * Provides theme system, layouts, components, page templates, and widgets
- * for building authentication and authorization UIs across multiple LLM platforms.
+ * UI component library for FrontMCP applications.
+ * Provides HTML components, React components, and rendering utilities.
  *
- * Key features:
- * - Multi-framework renderer support (HTML, React, MDX)
- * - Platform-aware theming (OpenAI, Claude, etc.)
- * - Runtime JSX/TSX transpilation with SWC
- * - MCP Bridge integration for cross-platform widgets
- * - Standalone types and adapters for external consumers (AgentLink)
- * - Build-time API for pre-compiling UI templates
- *
- * ## Standalone Usage (without @frontmcp/sdk)
- *
- * For external systems like AgentLink that want to use the UI components
- * without the full SDK:
+ * For build tools, bundling, platform adapters, and theming, use @frontmcp/uipack.
  *
+ * @example HTML components
  * ```typescript
- * // Import standalone types
- * import type { UITemplateConfig, TemplateContext } from '@frontmcp/ui/types';
+ * import { button, card, alert, badge } from '@frontmcp/ui/components';
+ * import { baseLayout } from '@frontmcp/ui/layouts';
+ * ```
  *
- * // Import platform adapters
- * import { buildUIMeta } from '@frontmcp/ui/adapters';
+ * @example Theme (from uipack)
+ * ```typescript
+ * import { DEFAULT_THEME, createTheme } from '@frontmcp/uipack/theme';
+ * ```
  *
- * // Import build-time API
- * import { buildToolUI } from '@frontmcp/ui/build';
+ * @example React components
+ * ```typescript
+ * import { Button, Card, Alert, Badge } from '@frontmcp/ui/react';
+ * import { useMcpBridge, useCallTool } from '@frontmcp/ui/react/hooks';
+ * ```
  *
- * // Import components directly
- * import { card, button, table } from '@frontmcp/ui/components';
+ * @example Universal renderer
+ * ```typescript
+ * import { UniversalApp, FrontMCPProvider } from '@frontmcp/ui/universal';
  * ```
  */
-export * from './types';
-export { safeStringify } from './utils';
-export { type AIPlatformType, type UIMetadata, type BuildUIMetaOptions, type BuildToolDiscoveryMetaOptions, buildUIMeta, buildToolDiscoveryMeta, buildOpenAICSP, type ResolvedServingMode, type ResolveServingModeOptions, resolveServingMode, isPlatformModeSupported, getDefaultServingMode, platformUsesStructuredContent, platformSupportsWidgets, type TextContentBlock, type BuildToolResponseOptions, type ToolResponseContent, buildToolResponseContent, } from './adapters';
-export { type BuildTargetPlatform, type BuildOptions, type BuildResult, type MultiBuildOptions, type MultiBuildResult, type StaticWidgetOptions, buildToolUI, buildToolUIMulti, buildStaticWidget, } from './build';
-export * from './validation';
-export * from './theme';
-export * from './layouts';
 export * from './components';
+export * from './layouts';
 export * from './pages';
 export * from './widgets';
-export { type ProviderType, type DisplayMode, type ThemeMode, type HostContext, type MCPBridge, type MCPBridgeExtended, type WrapToolUIOptions, type OpenAIRuntime, type OpenAIUserAgent, type SafeAreaInsets, MCP_BRIDGE_RUNTIME, getMCPBridgeScript, isMCPBridgeSupported, DEFAULT_CDN_DOMAINS, DEFAULT_CSP_DIRECTIVES, RESTRICTIVE_CSP_DIRECTIVES, buildCSPDirectives, buildCSPMetaTag, validateCSPDomain, sanitizeCSPDomains, type WrapToolUIFullOptions, wrapToolUI, wrapToolUIMinimal, createTemplateHelpers, getToolUIMimeType, type SanitizerFn, type SanitizeOptions, REDACTION_TOKENS, PII_PATTERNS, sanitizeInput, createSanitizer, detectPII, isEmail, isPhone, isCreditCard, isSSN, isIPv4, detectPIIType, redactPIIFromText, } from './runtime';
-export * from './tool-template';
-export * from './base-template';
-export * from './renderers';
 export { type PlatformAdapter, type AdapterCapabilities, type BridgeConfig, FrontMcpBridge, createBridge, AdapterRegistry, defaultRegistry, registerAdapter, generateBridgeIIFE, generatePlatformBundle, UNIVERSAL_BRIDGE_SCRIPT, BRIDGE_SCRIPT_TAGS, } from './bridge';
 export { registerAllComponents, registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect, FmcpElement, } from './web-components';
-export { ToolUIRegistry, type RenderOptions, type UIRenderResult, type CompileStaticWidgetOptions, type HybridComponentPayload, type BuildHybridComponentPayloadOptions, renderToolTemplate, renderToolTemplateAsync, isReactComponent, hasUIConfig, containsMdxSyntax, type RenderTemplateOptions, UI_RESOURCE_SCHEME, isUIResourceUri, isStaticWidgetUri, parseWidgetUri, buildStaticWidgetUri, getUIResourceMimeType, type ParsedWidgetUri, } from './registry';
-export { type CDNProvider, type CDNPlatformType, type CDNDependency, type FileBundleOptions, type ImportMap, type ResolvedDependency, type ComponentBuildManifest, type CDNRegistryEntry, type CDNRegistry, type ParsedImport, type ParsedImportResult, type TemplateMode, detectTemplateMode, DEFAULT_CDN_REGISTRY, lookupPackage, getPackageCDNUrl, isPackageRegistered, parseImports, extractExternalPackages, getPackageName, DependencyResolver, createResolver, createClaudeResolver, createOpenAIResolver, resolveDependencies, generateImportMapForPackages, createImportMap, generateImportMapScriptTag, generateDependencyHTML, generateUMDShim, } from './dependency';
-export { ComponentBuilder, createFilesystemBuilder, createRedisBuilder, type ComponentBuildOptions, type ComponentBuildResult, FilesystemStorage, RedisStorage, type BuildCacheStorage, sha256, calculateComponentHash, calculateQuickHash, generateBuildId, } from './bundler/file-cache';
-export { type ContentType, type UniversalContent, type FrontMCPState, type FrontMCPStore, type RenderContext, type ClientRenderer, type UniversalAppProps, type FrontMCPProviderProps, type CDNType, type UniversalRuntimeOptions, type UniversalRuntimeResult, createFrontMCPStore, getGlobalStore, setGlobalStore, resetGlobalStore, useFrontMCPStore, useToolOutput as useUniversalToolOutput, useToolInput as useUniversalToolInput, useContent, useToolName, useLoadingState, initializeStoreFromWindow, FrontMCPProvider, ComponentsProvider, UniversalProvider, useFrontMCPContext, useComponents, withFrontMCP, RendererRegistry, rendererRegistry, detectRenderer, renderContent, createContent, htmlRenderer, safeHtmlRenderer, markdownRenderer, reactRenderer, mdxRenderer, UniversalApp, UniversalAppWithProvider, LoadingSpinner, ErrorDisplay, EmptyState, buildUniversalRuntime, buildMinimalRuntime, getCachedRuntime, clearRuntimeCache, getRuntimeCacheStats, buildAppScript, buildDataInjectionCode, buildComponentCode, RUNTIME_PLACEHOLDERS, type CachedRuntimeOptions, type CachedRuntimeResult, DEFAULT_FRONTMCP_STATE, UNIVERSAL_CDN, detectContentType, } from './universal';
-export { type TypeFetchResult, type TypeFetchError, type TypeFetchErrorCode, type TypeFetchBatchRequest, type TypeFetchBatchResult, type TypeCacheEntry, type TypeCacheStats, type DtsImport, type DtsParseResult, type TypeFetcherOptions, type PackageResolution, DEFAULT_TYPE_FETCHER_OPTIONS, TYPE_CACHE_PREFIX, DEFAULT_TYPE_CACHE_TTL, type TypeCacheAdapter, type TypeCacheOptions, DEFAULT_CACHE_OPTIONS as DEFAULT_TYPE_CACHE_OPTIONS, MemoryTypeCache, globalTypeCache, parseDtsImports, isRelativeImport, getPackageFromSpecifier, getSubpathFromSpecifier, parseImportStatement, combineDtsContents, TypeFetcher, createTypeFetcher, } from './typings';
+export * from './react';
+export * from './render';
+export { ReactRenderer, reactRenderer, buildHydrationScript, ReactRendererAdapter, createReactAdapter, loadReactAdapter, } from './renderers';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAKH,cAAc,cAAc,CAAC;AAK7B,cAAc,WAAW,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,cAAc,WAAW,CAAC;AAK1B,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,YAAY,EAEjB,cAAc,EACd,YAAY,EAEZ,eAAe,EACf,eAAe,EACf,eAAe,EAEf,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,UAAU,CAAC;AAKlB,OAAO,EAEL,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAElB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,UAAU,EAEV,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAK1B,cAAc,SAAS,CAAC;AAKxB,cAAc,UAAU,CAAC;AAKzB,OAAO,EACL,aAAa,EACb,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,aAAa,CAAC"}