@frontmcp/ui 0.6.1 → 0.6.2

package/index.js

@@ -43,7 +43,7 @@ __export(index_exports, {
   AvatarSpacingSchema: () => AvatarSpacingSchema,
   AvatarStatusSchema: () => AvatarStatusSchema,
   AvatarWithTextOptionsSchema: () => AvatarWithTextOptionsSchema,
-  BRIDGE_SCRIPT_TAGS: () => BRIDGE_SCRIPT_TAGS,
+  BRIDGE_SCRIPT_TAGS: () => import_uipack.BRIDGE_SCRIPT_TAGS,
   Badge: () => Badge,
   BadgeGroupOptionsSchema: () => BadgeGroupOptionsSchema,
   BadgeOptionsSchema: () => BadgeOptionsSchema,
@@ -107,7 +107,7 @@ __export(index_exports, {
   TextareaResizeSchema: () => TextareaResizeSchema,
   ToastOptionsSchema: () => ToastOptionsSchema,
   ToastPositionSchema: () => ToastPositionSchema,
-  UNIVERSAL_BRIDGE_SCRIPT: () => UNIVERSAL_BRIDGE_SCRIPT,
+  UNIVERSAL_BRIDGE_SCRIPT: () => import_uipack.UNIVERSAL_BRIDGE_SCRIPT,
   actionList: () => actionList,
   activeBadge: () => activeBadge,
   alert: () => alert,
@@ -121,22 +121,15 @@ __export(index_exports, {
   badgeGroup: () => badgeGroup,
   baseLayout: () => baseLayout,
   betaBadge: () => betaBadge,
-  buildHydrationScript: () => buildHydrationScript,
   busyDot: () => busyDot,
   button: () => button,
   buttonGroup: () => buttonGroup,
   card: () => card,
   cardGroup: () => cardGroup,
   checkbox: () => checkbox,
-  circularProgress: () => circularProgress,
-  codePreview: () => codePreview,
   confirmModal: () => confirmModal,
-  consentDeniedPage: () => consentDeniedPage,
   consentLayout: () => consentLayout,
   consentLayoutBuilder: () => consentLayoutBuilder,
-  consentPage: () => consentPage,
-  consentSuccessPage: () => consentSuccessPage,
-  contentSkeleton: () => contentSkeleton,
   createBridge: () => createBridge,
   createLayoutBuilder: () => createLayoutBuilder,
   createReactAdapter: () => createReactAdapter,
@@ -149,45 +142,33 @@ __export(index_exports, {
   errorBadge: () => errorBadge,
   errorLayout: () => errorLayout,
   errorLayoutBuilder: () => errorLayoutBuilder,
-  errorPage: () => errorPage,
   escapeHtml: () => import_utils2.escapeHtml,
   featureList: () => featureList,
-  forbiddenPage: () => forbiddenPage,
   form: () => form,
   formActions: () => formActions,
   formRow: () => formRow,
   formSection: () => formSection,
-  generateBridgeIIFE: () => generateBridgeIIFE,
-  generatePlatformBundle: () => generatePlatformBundle,
+  generateBridgeIIFE: () => import_uipack.generateBridgeIIFE,
+  generatePlatformBundle: () => import_uipack.generatePlatformBundle,
   ghostButton: () => ghostButton,
   hiddenInput: () => hiddenInput,
-  imagePreview: () => imagePreview,
   inactiveBadge: () => inactiveBadge,
   infoAlert: () => infoAlert,
   input: () => input,
-  isBrowser: () => isBrowser,
-  isReactAvailable: () => isReactAvailable,
-  isServer: () => isServer,
   linkButton: () => linkButton,
   loadReactAdapter: () => loadReactAdapter,
   loadingLayout: () => loadingLayout,
-  maintenancePage: () => maintenancePage,
   modal: () => modal,
   modalTrigger: () => modalTrigger,
   newBadge: () => newBadge,
-  notFoundPage: () => notFoundPage,
-  oauthErrorPage: () => oauthErrorPage,
   offlineDot: () => offlineDot,
-  offlinePage: () => offlinePage,
   onlineDot: () => onlineDot,
   outlineButton: () => outlineButton,
   pagination: () => pagination,
   pendingBadge: () => pendingBadge,
   permissionList: () => permissionList,
   primaryButton: () => primaryButton,
-  progressBar: () => progressBar,
   radioGroup: () => radioGroup,
-  rateLimitPage: () => rateLimitPage,
   reactRenderer: () => reactRenderer,
   registerAdapter: () => registerAdapter,
   registerAllComponents: () => registerAllComponents,
@@ -205,26 +186,14 @@ __export(index_exports, {
   renderButtonSync: () => renderButtonSync,
   renderCard: () => renderCard,
   renderCardSync: () => renderCardSync,
-  renderChildrenToString: () => renderChildrenToString,
-  renderToString: () => renderToString,
-  renderToStringSync: () => renderToStringSync,
-  resourceItem: () => resourceItem,
-  resourceList: () => resourceList,
-  resourceWidget: () => resourceWidget,
   secondaryButton: () => secondaryButton,
   select: () => select,
-  serverErrorPage: () => serverErrorPage,
-  sessionExpiredPage: () => sessionExpiredPage,
-  skeleton: () => skeleton,
-  statusIndicator: () => statusIndicator,
-  stepProgress: () => stepProgress,
   successAlert: () => successAlert,
   successLayout: () => successLayout,
   table: () => table,
   textarea: () => textarea,
   toast: () => toast,
   toastContainer: () => toastContainer,
-  unauthorizedPage: () => unauthorizedPage,
   useCallTool: () => useCallTool,
   useCapability: () => useCapability,
   useDisplayMode: () => useDisplayMode,
@@ -947,7 +916,7 @@ function getAlignmentClasses(alignment) {
   };
   return alignMap[alignment];
 }
-function getBackgroundClasses(background, theme) {
+function getBackgroundClasses(background) {
   switch (background) {
     case "gradient":
       return "bg-gradient-to-br from-primary to-secondary";
@@ -992,7 +961,7 @@ function buildBodyAttrs(attrs) {
 function baseLayout(content, options) {
   const {
     title,
-    pageType = "custom",
+    pageType: _pageType = "custom",
     size = "md",
     alignment = "center",
     background = "solid",
@@ -1029,7 +998,7 @@ function baseLayout(content, options) {
   </style>` : "";
   const sizeClass = getSizeClass(size);
   const alignmentClasses = getAlignmentClasses(alignment);
-  const backgroundClasses = getBackgroundClasses(background, theme);
+  const backgroundClasses = getBackgroundClasses(background);
   const allBodyClasses = [backgroundClasses, "font-sans antialiased", bodyClass].filter(Boolean).join(" ");
   const metaTags = buildMetaTags(options);
   const bodyAttrStr = buildBodyAttrs(bodyAttrs);
@@ -2896,926 +2865,6 @@ var errorLayoutBuilder = createLayoutBuilder({
   background: "solid"
 });
 
-// libs/ui/src/pages/consent.ts
-function consentPage(options) {
-  const {
-    client,
-    user,
-    permissions,
-    approveUrl,
-    denyUrl,
-    csrfToken,
-    state,
-    redirectUri,
-    responseType,
-    nonce,
-    codeChallenge,
-    codeChallengeMethod,
-    error,
-    layout = {},
-    warningMessage,
-    allowScopeSelection = false,
-    approveText = "Allow",
-    denyText = "Deny"
-  } = options;
-  const errorAlert = error ? alert(error, { variant: "danger", dismissible: true }) : "";
-  const unverifiedWarning = !client.verified ? alert(warningMessage || "This application has not been verified. Only authorize applications you trust.", {
-    variant: "warning",
-    title: "Unverified Application"
-  }) : "";
-  const clientHeader = `
-    <div class="text-center mb-6">
-      ${client.icon ? `<img src="${(0, import_utils2.escapeHtml)(client.icon)}" alt="${(0, import_utils2.escapeHtml)(
-    client.name
-  )}" class="w-16 h-16 rounded-xl mx-auto mb-4 shadow-md">` : `<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 shadow-md">
-            ${(0, import_utils2.escapeHtml)(client.name.charAt(0).toUpperCase())}
-          </div>`}
-      <h1 class="text-xl font-bold text-text-primary">
-        ${client.verified ? `<span class="inline-flex items-center gap-1">
-          ${(0, import_utils2.escapeHtml)(client.name)}
-          <svg class="w-5 h-5 text-primary" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-          </svg>
-        </span>` : (0, import_utils2.escapeHtml)(client.name)}
-      </h1>
-      <p class="text-text-secondary mt-1">wants to access your account</p>
-    </div>
-  `;
-  const userSection = user ? `
-    <div class="flex items-center gap-3 p-4 bg-gray-50 rounded-lg mb-6">
-      ${user.avatar ? `<img src="${(0, import_utils2.escapeHtml)(user.avatar)}" class="w-12 h-12 rounded-full">` : `<div class="w-12 h-12 rounded-full bg-primary text-white flex items-center justify-center font-semibold text-lg">
-            ${(0, import_utils2.escapeHtml)((user.name || user.email || "U").charAt(0).toUpperCase())}
-          </div>`}
-      <div class="flex-1 min-w-0">
-        ${user.name ? `<div class="font-medium text-text-primary truncate">${(0, import_utils2.escapeHtml)(user.name)}</div>` : ""}
-        ${user.email ? `<div class="text-sm text-text-secondary truncate">${(0, import_utils2.escapeHtml)(user.email)}</div>` : ""}
-      </div>
-      <a href="/login?prompt=select_account" class="text-sm text-primary hover:text-primary/80">
-        Switch account
-      </a>
-    </div>
-  ` : "";
-  const permissionsSection = `
-    <div class="mb-6">
-      <h3 class="font-medium text-text-primary mb-3">This will allow ${(0, import_utils2.escapeHtml)(client.name)} to:</h3>
-      ${permissionList(permissions, {
-    checkable: allowScopeSelection,
-    inputName: "scope"
-  })}
-    </div>
-  `;
-  const hiddenFields = [
-    csrfToken ? csrfInput(csrfToken) : "",
-    state ? hiddenInput("state", state) : "",
-    redirectUri ? hiddenInput("redirect_uri", redirectUri) : "",
-    responseType ? hiddenInput("response_type", responseType) : "",
-    nonce ? hiddenInput("nonce", nonce) : "",
-    codeChallenge ? hiddenInput("code_challenge", codeChallenge) : "",
-    codeChallengeMethod ? hiddenInput("code_challenge_method", codeChallengeMethod) : "",
-    hiddenInput("client_id", client.clientId),
-    // Include all scopes if not selectable
-    !allowScopeSelection ? permissions.map((p) => hiddenInput("scope[]", p.scope)).join("\n") : ""
-  ].filter(Boolean).join("\n");
-  const actionsHtml = `
-    <div class="flex gap-3 pt-4">
-      <form action="${(0, import_utils2.escapeHtml)(denyUrl || approveUrl)}" method="post" class="flex-1">
-        ${hiddenFields}
-        <input type="hidden" name="action" value="deny">
-        ${outlineButton(denyText, { type: "submit", fullWidth: true })}
-      </form>
-      <form action="${(0, import_utils2.escapeHtml)(approveUrl)}" method="post" class="flex-1">
-        ${hiddenFields}
-        <input type="hidden" name="action" value="approve">
-        ${primaryButton(approveText, { type: "submit", fullWidth: true })}
-      </form>
-    </div>
-  `;
-  const linksHtml = client.privacyUrl || client.termsUrl || client.websiteUrl ? `
-    <div class="text-center text-xs text-text-secondary mt-6 space-x-3">
-      ${client.websiteUrl ? `<a href="${(0, import_utils2.escapeHtml)(
-    client.websiteUrl
-  )}" target="_blank" rel="noopener" class="hover:text-primary">Website</a>` : ""}
-      ${client.privacyUrl ? `<a href="${(0, import_utils2.escapeHtml)(
-    client.privacyUrl
-  )}" target="_blank" rel="noopener" class="hover:text-primary">Privacy Policy</a>` : ""}
-      ${client.termsUrl ? `<a href="${(0, import_utils2.escapeHtml)(
-    client.termsUrl
-  )}" target="_blank" rel="noopener" class="hover:text-primary">Terms of Service</a>` : ""}
-    </div>
-  ` : "";
-  const content = `
-    ${errorAlert}
-    ${unverifiedWarning}
-    ${clientHeader}
-    ${userSection}
-    ${permissionsSection}
-    ${actionsHtml}
-    ${linksHtml}
-  `;
-  return consentLayout(content, {
-    title: `Authorize ${client.name}`,
-    clientName: client.name,
-    clientIcon: client.icon,
-    userInfo: user,
-    ...layout
-  });
-}
-function consentSuccessPage(options) {
-  const { client, redirectUrl, autoRedirectDelay = 3e3, layout = {} } = options;
-  const redirectScript = redirectUrl && autoRedirectDelay > 0 ? `
-    <script>
-      setTimeout(() => {
-        window.location.href = '${(0, import_utils2.escapeHtml)(redirectUrl)}';
-      }, ${autoRedirectDelay});
-    </script>
-  ` : "";
-  const content = `
-    <div class="text-center">
-      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-success/10 mb-6">
-        <svg class="w-8 h-8 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-2">Authorization Successful</h1>
-      <p class="text-text-secondary mb-4">
-        You have authorized <strong>${(0, import_utils2.escapeHtml)(client.name)}</strong> to access your account.
-      </p>
-      ${redirectUrl ? `<p class="text-sm text-text-secondary">Redirecting you back to ${(0, import_utils2.escapeHtml)(client.name)}...</p>` : ""}
-    </div>
-    ${redirectScript}
-  `;
-  return consentLayout(content, {
-    title: "Authorization Successful",
-    clientName: client.name,
-    clientIcon: client.icon,
-    ...layout
-  });
-}
-function consentDeniedPage(options) {
-  const { client, redirectUrl, layout = {} } = options;
-  const content = `
-    <div class="text-center">
-      <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 mb-6">
-        <svg class="w-8 h-8 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-        </svg>
-      </div>
-      <h1 class="text-2xl font-bold text-text-primary mb-2">Authorization Denied</h1>
-      <p class="text-text-secondary mb-6">
-        You denied <strong>${(0, import_utils2.escapeHtml)(client.name)}</strong> access to your account.
-      </p>
-      ${redirectUrl ? `
-        <a href="${(0, import_utils2.escapeHtml)(
-    redirectUrl
-  )}" class="inline-block px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
-          Return to ${(0, import_utils2.escapeHtml)(client.name)}
-        </a>
-      ` : ""}
-    </div>
-  `;
-  return consentLayout(content, {
-    title: "Authorization Denied",
-    clientName: client.name,
-    clientIcon: client.icon,
-    ...layout
-  });
-}
-
-// libs/ui/src/pages/error.ts
-function errorPage(options) {
-  const {
-    code,
-    title = "Something went wrong",
-    message,
-    details,
-    showStack = false,
-    stack,
-    showRetry = true,
-    retryUrl,
-    showHome = true,
-    homeUrl = "/",
-    showBack = false,
-    actions,
-    layout = {},
-    requestId
-  } = options;
-  const detailsHtml = details || showStack && stack ? `
-    <div class="mt-8 text-left">
-      ${details ? `
-        <div class="p-4 bg-gray-50 rounded-lg text-sm text-text-secondary mb-4">
-          <strong class="text-text-primary">Details:</strong>
-          <p class="mt-1">${(0, import_utils2.escapeHtml)(details)}</p>
-        </div>
-      ` : ""}
-      ${showStack && stack ? `
-        <details class="p-4 bg-gray-900 rounded-lg text-sm">
-          <summary class="text-gray-300 cursor-pointer hover:text-white">Stack Trace</summary>
-          <pre class="mt-2 text-xs text-gray-400 overflow-x-auto whitespace-pre-wrap">${(0, import_utils2.escapeHtml)(stack)}</pre>
-        </details>
-      ` : ""}
-    </div>
-  ` : "";
-  const requestIdHtml = requestId ? `
-    <p class="text-xs text-text-secondary mt-6">
-      Request ID: <code class="px-1.5 py-0.5 bg-gray-100 rounded text-xs">${(0, import_utils2.escapeHtml)(requestId)}</code>
-    </p>
-  ` : "";
-  const content = `
-    ${detailsHtml}
-    ${actions || ""}
-    ${requestIdHtml}
-  `;
-  return errorLayout(content, {
-    title: `${code ? `Error ${code} - ` : ""}${title}`,
-    errorCode: code?.toString(),
-    errorTitle: title,
-    errorMessage: message,
-    showRetry,
-    retryUrl,
-    showHome,
-    homeUrl,
-    ...layout
-  });
-}
-function notFoundPage(options = {}) {
-  return errorPage({
-    code: 404,
-    title: "Page Not Found",
-    message: "The page you're looking for doesn't exist or has been moved.",
-    showRetry: false,
-    ...options
-  });
-}
-function forbiddenPage(options = {}) {
-  return errorPage({
-    code: 403,
-    title: "Access Denied",
-    message: "You don't have permission to access this resource.",
-    showRetry: false,
-    ...options
-  });
-}
-function unauthorizedPage(options = {}) {
-  const { loginUrl = "/login", ...rest } = options;
-  return errorPage({
-    code: 401,
-    title: "Authentication Required",
-    message: "Please sign in to access this resource.",
-    showRetry: false,
-    showHome: false,
-    actions: `
-      <div class="flex justify-center mt-8">
-        <a href="${(0, import_utils2.escapeHtml)(
-      loginUrl
-    )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
-          Sign In
-        </a>
-      </div>
-    `,
-    ...rest
-  });
-}
-function serverErrorPage(options = {}) {
-  return errorPage({
-    code: 500,
-    title: "Server Error",
-    message: "We're having trouble processing your request. Please try again later.",
-    showRetry: true,
-    ...options
-  });
-}
-function maintenancePage(options = {}) {
-  const { estimatedTime, ...rest } = options;
-  const timeMessage = estimatedTime ? `We expect to be back by ${(0, import_utils2.escapeHtml)(estimatedTime)}.` : "We'll be back shortly.";
-  return errorPage({
-    code: 503,
-    title: "Under Maintenance",
-    message: `We're currently performing scheduled maintenance. ${timeMessage}`,
-    showRetry: true,
-    showHome: false,
-    ...rest
-  });
-}
-function rateLimitPage(options = {}) {
-  const { retryAfter, ...rest } = options;
-  const retryMessage = retryAfter ? `Please wait ${retryAfter} seconds before trying again.` : "Please wait a moment before trying again.";
-  return errorPage({
-    code: 429,
-    title: "Too Many Requests",
-    message: `You've made too many requests. ${retryMessage}`,
-    showRetry: true,
-    showHome: true,
-    ...rest
-  });
-}
-function offlinePage(options = {}) {
-  return errorPage({
-    title: "You're Offline",
-    message: "Please check your internet connection and try again.",
-    showRetry: true,
-    showHome: false,
-    ...options,
-    layout: {
-      ...options.layout
-    }
-  });
-}
-function sessionExpiredPage(options = {}) {
-  const { loginUrl = "/login", ...rest } = options;
-  return errorPage({
-    title: "Session Expired",
-    message: "Your session has expired. Please sign in again to continue.",
-    showRetry: false,
-    showHome: false,
-    actions: `
-      <div class="flex justify-center mt-8">
-        <a href="${(0, import_utils2.escapeHtml)(
-      loginUrl
-    )}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">
-          Sign In Again
-        </a>
-      </div>
-    `,
-    ...rest
-  });
-}
-function oauthErrorPage(options) {
-  const { errorCode, errorDescription, redirectUri, clientName, ...rest } = options;
-  const errorMessages = {
-    invalid_request: {
-      title: "Invalid Request",
-      message: "The authorization request is missing required parameters or is malformed."
-    },
-    unauthorized_client: {
-      title: "Unauthorized Client",
-      message: "The client is not authorized to request an authorization code."
-    },
-    access_denied: {
-      title: "Access Denied",
-      message: "The resource owner denied the authorization request."
-    },
-    unsupported_response_type: {
-      title: "Unsupported Response Type",
-      message: "The authorization server does not support the requested response type."
-    },
-    invalid_scope: {
-      title: "Invalid Scope",
-      message: "The requested scope is invalid, unknown, or malformed."
-    },
-    server_error: {
-      title: "Server Error",
-      message: "The authorization server encountered an unexpected error."
-    },
-    temporarily_unavailable: {
-      title: "Temporarily Unavailable",
-      message: "The authorization server is temporarily unavailable. Please try again later."
-    }
-  };
-  const errorInfo = errorCode && errorMessages[errorCode] ? errorMessages[errorCode] : { title: "Authorization Error", message: errorDescription || "An error occurred during authorization." };
-  const clientMessage = clientName ? ` while connecting to ${(0, import_utils2.escapeHtml)(clientName)}` : "";
-  const redirectAction = redirectUri ? `
-    <a href="${(0, import_utils2.escapeHtml)(
-    redirectUri
-  )}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-text-primary font-medium rounded-lg transition-colors">
-      Return to ${clientName ? (0, import_utils2.escapeHtml)(clientName) : "Application"}
-    </a>
-  ` : "";
-  return errorPage({
-    title: errorInfo.title,
-    message: `${errorInfo.message}${clientMessage}`,
-    details: errorCode && errorDescription ? `Error: ${errorCode}
-${errorDescription}` : void 0,
-    showRetry: errorCode === "server_error" || errorCode === "temporarily_unavailable",
-    showHome: true,
-    actions: redirectAction ? `<div class="flex justify-center gap-4 mt-8">${redirectAction}</div>` : void 0,
-    ...rest
-  });
-}
-
-// libs/ui/src/widgets/resource.ts
-var resourceIcons = {
-  document: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
-  </svg>`,
-  image: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-  </svg>`,
-  code: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
-  </svg>`,
-  data: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
-  </svg>`,
-  file: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
-  </svg>`,
-  link: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
-  </svg>`,
-  user: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-  </svg>`,
-  event: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-  </svg>`,
-  message: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
-  </svg>`,
-  task: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
-  </svg>`,
-  custom: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
-  </svg>`
-};
-function formatFileSize(bytes) {
-  if (bytes === 0) return "0 B";
-  const k = 1024;
-  const sizes = ["B", "KB", "MB", "GB", "TB"];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
-}
-function formatDate(date) {
-  const d = typeof date === "string" ? new Date(date) : date;
-  return d.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "short",
-    day: "numeric"
-  });
-}
-function resourceWidget(options) {
-  const {
-    type,
-    title,
-    description,
-    icon,
-    thumbnail,
-    url,
-    meta,
-    status,
-    actions = [],
-    className = "",
-    cardOptions = {}
-  } = options;
-  const iconHtml = thumbnail ? `<div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
-        <img src="${(0, import_utils2.escapeHtml)(thumbnail)}" alt="${(0, import_utils2.escapeHtml)(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>`;
-  const statusHtml = status ? badge(status.label, { variant: status.variant, size: "sm" }) : "";
-  const metaItems = [];
-  if (meta?.size) {
-    metaItems.push(formatFileSize(meta.size));
-  }
-  if (meta?.mimeType) {
-    metaItems.push(meta.mimeType);
-  }
-  if (meta?.updatedAt) {
-    metaItems.push(`Updated ${formatDate(meta.updatedAt)}`);
-  } else if (meta?.createdAt) {
-    metaItems.push(`Created ${formatDate(meta.createdAt)}`);
-  }
-  if (meta?.author) {
-    metaItems.push(`by ${meta.author}`);
-  }
-  const metaHtml = metaItems.length > 0 ? `<div class="text-xs text-text-secondary mt-1">${metaItems.join(" \u2022 ")}</div>` : "";
-  const tagsHtml = meta?.tags && meta.tags.length > 0 ? `<div class="flex flex-wrap gap-1 mt-2">
-        ${meta.tags.map((tag) => badge(tag, { variant: "default", size: "sm" })).join("")}
-      </div>` : "";
-  const actionsHtml = actions.length > 0 ? `<div class="flex gap-2 mt-4">
-        ${actions.map((action) => {
-    const variantMap = {
-      primary: "primary",
-      secondary: "secondary",
-      danger: "danger",
-      ghost: "ghost"
-    };
-    const variant = action.variant ? variantMap[action.variant] : "ghost";
-    const htmxAttrs = [];
-    if (action.htmx) {
-      if (action.htmx.get) htmxAttrs.push(`hx-get="${(0, import_utils2.escapeHtml)(action.htmx.get)}"`);
-      if (action.htmx.post) htmxAttrs.push(`hx-post="${(0, import_utils2.escapeHtml)(action.htmx.post)}"`);
-      if (action.htmx.delete) htmxAttrs.push(`hx-delete="${(0, import_utils2.escapeHtml)(action.htmx.delete)}"`);
-      if (action.htmx.target) htmxAttrs.push(`hx-target="${(0, import_utils2.escapeHtml)(action.htmx.target)}"`);
-      if (action.htmx.swap) htmxAttrs.push(`hx-swap="${(0, import_utils2.escapeHtml)(action.htmx.swap)}"`);
-      if (action.htmx.confirm) htmxAttrs.push(`hx-confirm="${(0, import_utils2.escapeHtml)(action.htmx.confirm)}"`);
-    }
-    return button(action.label, {
-      variant,
-      size: "sm",
-      href: action.href,
-      disabled: action.disabled,
-      iconBefore: action.icon
-    });
-  }).join("")}
-      </div>` : "";
-  const content = `
-    <div class="flex gap-4">
-      ${iconHtml}
-      <div class="flex-1 min-w-0">
-        <div class="flex items-start justify-between gap-2">
-          <div class="min-w-0">
-            ${url ? `<a href="${(0, import_utils2.escapeHtml)(
-    url
-  )}" class="font-semibold text-text-primary hover:text-primary truncate block">${(0, import_utils2.escapeHtml)(
-    title
-  )}</a>` : `<h3 class="font-semibold text-text-primary truncate">${(0, import_utils2.escapeHtml)(title)}</h3>`}
-            ${description ? `<p class="text-sm text-text-secondary mt-0.5 line-clamp-2">${(0, import_utils2.escapeHtml)(description)}</p>` : ""}
-            ${metaHtml}
-            ${tagsHtml}
-          </div>
-          ${statusHtml}
-        </div>
-        ${actionsHtml}
-      </div>
-    </div>
-  `;
-  return card(content, {
-    variant: "default",
-    size: "md",
-    className: `resource-widget resource-${type} ${className}`,
-    ...cardOptions
-  });
-}
-function resourceList(options) {
-  const {
-    resources,
-    title,
-    emptyMessage = "No resources found",
-    layout = "list",
-    columns = 2,
-    className = "",
-    showLoadMore = false,
-    loadMoreUrl
-  } = options;
-  const titleHtml = title ? `<h2 class="text-lg font-semibold text-text-primary mb-4">${(0, import_utils2.escapeHtml)(title)}</h2>` : "";
-  if (resources.length === 0) {
-    return `<div class="${className}">
-      ${titleHtml}
-      <div class="text-center py-12 text-text-secondary">
-        <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>${(0, import_utils2.escapeHtml)(emptyMessage)}</p>
-      </div>
-    </div>`;
-  }
-  const layoutClasses = layout === "grid" ? `grid grid-cols-1 md:grid-cols-${columns} gap-4` : "space-y-4";
-  const resourcesHtml = resources.map((r) => resourceWidget(r)).join("\n");
-  const loadMoreHtml = showLoadMore && loadMoreUrl ? `<div class="text-center mt-6">
-        ${button("Load More", {
-    variant: "outline",
-    href: loadMoreUrl
-  })}
-      </div>` : "";
-  return `<div class="resource-list ${className}">
-    ${titleHtml}
-    <div class="${layoutClasses}">
-      ${resourcesHtml}
-    </div>
-    ${loadMoreHtml}
-  </div>`;
-}
-function resourceItem(options) {
-  const { type, title, description, icon, url, meta, status } = options;
-  const iconHtml = `<div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400">
-    ${icon || resourceIcons[type]}
-  </div>`;
-  const statusHtml = status ? badge(status.label, { variant: status.variant, size: "sm" }) : "";
-  const metaText = meta?.size ? formatFileSize(meta.size) : "";
-  const titleElement = url ? `<a href="${(0, import_utils2.escapeHtml)(url)}" class="font-medium text-text-primary hover:text-primary">${(0, import_utils2.escapeHtml)(title)}</a>` : `<span class="font-medium text-text-primary">${(0, import_utils2.escapeHtml)(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">
-      <div class="flex items-center gap-2">
-        ${titleElement}
-        ${statusHtml}
-      </div>
-      ${description || metaText ? `<p class="text-sm text-text-secondary truncate">${(0, import_utils2.escapeHtml)(description || metaText)}</p>` : ""}
-    </div>
-  </div>`;
-}
-function codePreview(options) {
-  const {
-    code,
-    language = "text",
-    filename,
-    lineNumbers = true,
-    maxHeight = "400px",
-    showCopy = true,
-    className = ""
-  } = options;
-  const lines = code.split("\n");
-  const lineNumbersHtml = lineNumbers ? `<div class="text-right select-none pr-4 text-gray-500">
-        ${lines.map((_, i) => `<div>${i + 1}</div>`).join("")}
-      </div>` : "";
-  const copyScript = showCopy ? `<script>
-        function copyCode(btn, code) {
-          navigator.clipboard.writeText(code).then(() => {
-            const original = btn.innerHTML;
-            btn.innerHTML = '<svg class="w-4 h-4 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>';
-            setTimeout(() => btn.innerHTML = original, 2000);
-          });
-        }
-      </script>` : "";
-  const copyButton = showCopy ? `<button
-        type="button"
-        onclick="copyCode(this, ${(0, import_utils2.escapeHtml)(JSON.stringify(code))})"
-        class="p-1.5 rounded hover:bg-gray-700 transition-colors"
-        title="Copy code"
-      >
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
-        </svg>
-      </button>` : "";
-  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">${(0, import_utils2.escapeHtml)(filename)}</span>` : "<span></span>"}
-        <div class="flex items-center gap-2">
-          ${language ? `<span class="text-xs text-gray-500">${(0, import_utils2.escapeHtml)(language)}</span>` : ""}
-          ${copyButton}
-        </div>
-      </div>
-    ` : ""}
-    <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>${(0, import_utils2.escapeHtml)(code)}</code></pre>
-      </div>
-    </div>
-    ${copyScript}
-  </div>`;
-}
-function imagePreview(options) {
-  const { src, alt, caption, maxHeight = "400px", clickable = true, className = "" } = options;
-  const imageHtml = `<img
-    src="${(0, import_utils2.escapeHtml)(src)}"
-    alt="${(0, import_utils2.escapeHtml)(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">${(0, import_utils2.escapeHtml)(caption)}</p>` : "";
-  const content = clickable ? `<a href="${(0, import_utils2.escapeHtml)(src)}" target="_blank" rel="noopener" class="block">${imageHtml}</a>` : imageHtml;
-  return `<div class="image-preview ${className}">
-    ${content}
-    ${captionHtml}
-  </div>`;
-}
-
-// libs/ui/src/widgets/progress.ts
-function progressBar(options) {
-  const {
-    value,
-    showLabel = true,
-    labelPosition = "outside",
-    size = "md",
-    variant = "primary",
-    animated = false,
-    className = "",
-    label
-  } = options;
-  const clampedValue = Math.min(100, Math.max(0, value));
-  const sizeClasses = {
-    sm: "h-1.5",
-    md: "h-2.5",
-    lg: "h-4"
-  };
-  const variantClasses = {
-    primary: "bg-primary",
-    success: "bg-success",
-    warning: "bg-warning",
-    danger: "bg-danger",
-    info: "bg-blue-500"
-  };
-  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">${(0, import_utils2.escapeHtml)(
-    displayLabel
-  )}</span>` : "";
-  const outsideLabel = showLabel && labelPosition === "outside" ? `<div class="flex justify-between mb-1">
-        <span class="text-sm font-medium text-text-primary">${label ? (0, import_utils2.escapeHtml)(label) : "Progress"}</span>
-        <span class="text-sm text-text-secondary">${Math.round(clampedValue)}%</span>
-      </div>` : "";
-  return `<div class="progress-bar ${className}">
-    ${outsideLabel}
-    <div class="relative w-full ${sizeClasses[size]} bg-gray-200 rounded-full overflow-hidden">
-      <div
-        class="${variantClasses[variant]} ${sizeClasses[size]} ${animatedClass} rounded-full transition-all duration-300"
-        style="width: ${clampedValue}%"
-        role="progressbar"
-        aria-valuenow="${clampedValue}"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      ></div>
-      ${insideLabel}
-    </div>
-  </div>
-  ${animated ? `<style>
-    .bg-stripes {
-      background-image: linear-gradient(
-        45deg,
-        rgba(255,255,255,0.15) 25%,
-        transparent 25%,
-        transparent 50%,
-        rgba(255,255,255,0.15) 50%,
-        rgba(255,255,255,0.15) 75%,
-        transparent 75%,
-        transparent
-      );
-      background-size: 1rem 1rem;
-    }
-    @keyframes stripes {
-      from { background-position: 1rem 0; }
-      to { background-position: 0 0; }
-    }
-    .animate-stripes {
-      animation: stripes 1s linear infinite;
-    }
-  </style>` : ""}`;
-}
-function stepProgress(options) {
-  const { steps, orientation = "horizontal", connector = "line", className = "" } = options;
-  const getStepIcon = (step, index) => {
-    if (step.icon) return step.icon;
-    if (step.status === "completed") {
-      return `<svg class="w-5 h-5" 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>`;
-    }
-    return `<span class="font-medium">${index + 1}</span>`;
-  };
-  const getStepClasses = (status) => {
-    switch (status) {
-      case "completed":
-        return {
-          circle: "bg-success text-white",
-          text: "text-text-primary"
-        };
-      case "current":
-        return {
-          circle: "bg-primary text-white ring-4 ring-primary/20",
-          text: "text-primary font-medium"
-        };
-      case "upcoming":
-      default:
-        return {
-          circle: "bg-gray-200 text-gray-500",
-          text: "text-text-secondary"
-        };
-    }
-  };
-  if (orientation === "vertical") {
-    const stepsHtml2 = steps.map((step, index) => {
-      const classes = getStepClasses(step.status);
-      const isLast = index === steps.length - 1;
-      const connectorHtml = !isLast && connector !== "none" ? `<div class="ml-5 w-0.5 h-8 ${connector === "dashed" ? "border-l-2 border-dashed border-gray-300" : "bg-gray-200"} ${step.status === "completed" ? "bg-success" : ""}"></div>` : "";
-      const stepContent = `
-        <div class="flex items-start gap-4">
-          <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center flex-shrink-0">
-            ${getStepIcon(step, index)}
-          </div>
-          <div class="pt-2">
-            <div class="${classes.text}">${(0, import_utils2.escapeHtml)(step.label)}</div>
-            ${step.description ? `<p class="text-sm text-text-secondary mt-0.5">${(0, import_utils2.escapeHtml)(step.description)}</p>` : ""}
-          </div>
-        </div>
-        ${connectorHtml}
-      `;
-      return step.href && step.status === "completed" ? `<a href="${(0, import_utils2.escapeHtml)(step.href)}" class="block hover:opacity-80">${stepContent}</a>` : `<div>${stepContent}</div>`;
-    }).join("\n");
-    return `<div class="step-progress ${className}">${stepsHtml2}</div>`;
-  }
-  const stepsHtml = steps.map((step, index) => {
-    const classes = getStepClasses(step.status);
-    const isLast = index === steps.length - 1;
-    const connectorHtml = !isLast && connector !== "none" ? `<div class="flex-1 h-0.5 mx-2 ${connector === "dashed" ? "border-t-2 border-dashed border-gray-300" : "bg-gray-200"} ${step.status === "completed" ? "bg-success" : ""}"></div>` : "";
-    const stepHtml = `
-      <div class="flex flex-col items-center">
-        <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center">
-          ${getStepIcon(step, index)}
-        </div>
-        <div class="mt-2 text-center">
-          <div class="${classes.text} text-sm">${(0, import_utils2.escapeHtml)(step.label)}</div>
-          ${step.description ? `<p class="text-xs text-text-secondary mt-0.5 max-w-[120px]">${(0, import_utils2.escapeHtml)(step.description)}</p>` : ""}
-        </div>
-      </div>
-    `;
-    const clickableStep = step.href && step.status === "completed" ? `<a href="${(0, import_utils2.escapeHtml)(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>`;
-}
-function circularProgress(options) {
-  const { value, size = 80, strokeWidth = 8, variant = "primary", showLabel = true, label, className = "" } = options;
-  const clampedValue = Math.min(100, Math.max(0, value));
-  const radius = (size - strokeWidth) / 2;
-  const circumference = radius * 2 * Math.PI;
-  const offset = circumference - clampedValue / 100 * circumference;
-  const variantColors = {
-    primary: "text-primary",
-    success: "text-success",
-    warning: "text-warning",
-    danger: "text-danger"
-  };
-  const displayLabel = label || `${Math.round(clampedValue)}%`;
-  return `<div class="circular-progress inline-flex items-center justify-center ${className}" style="width: ${size}px; height: ${size}px;">
-    <svg class="transform -rotate-90" width="${size}" height="${size}">
-      <!-- Background circle -->
-      <circle
-        cx="${size / 2}"
-        cy="${size / 2}"
-        r="${radius}"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="${strokeWidth}"
-        class="text-gray-200"
-      />
-      <!-- Progress circle -->
-      <circle
-        cx="${size / 2}"
-        cy="${size / 2}"
-        r="${radius}"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="${strokeWidth}"
-        stroke-linecap="round"
-        class="${variantColors[variant]}"
-        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">${(0, import_utils2.escapeHtml)(displayLabel)}</span>` : ""}
-  </div>`;
-}
-function statusIndicator(options) {
-  const { status, label, size = "md", pulse = false, className = "" } = options;
-  const sizeClasses = {
-    sm: { dot: "w-2 h-2", text: "text-xs" },
-    md: { dot: "w-2.5 h-2.5", text: "text-sm" },
-    lg: { dot: "w-3 h-3", text: "text-base" }
-  };
-  const statusClasses = {
-    online: { color: "bg-success", label: "Online" },
-    offline: { color: "bg-gray-400", label: "Offline" },
-    busy: { color: "bg-danger", label: "Busy" },
-    away: { color: "bg-warning", label: "Away" },
-    loading: { color: "bg-blue-500", label: "Loading" },
-    error: { color: "bg-danger", label: "Error" },
-    success: { color: "bg-success", label: "Success" }
-  };
-  const statusInfo = statusClasses[status];
-  const sizeInfo = sizeClasses[size];
-  const displayLabel = label || statusInfo.label;
-  const pulseHtml = pulse || status === "loading" ? `<span class="absolute ${sizeInfo.dot} ${statusInfo.color} rounded-full animate-ping opacity-75"></span>` : "";
-  return `<div class="status-indicator inline-flex items-center gap-2 ${className}">
-    <span class="relative flex">
-      ${pulseHtml}
-      <span class="relative ${sizeInfo.dot} ${statusInfo.color} rounded-full"></span>
-    </span>
-    ${displayLabel ? `<span class="${sizeInfo.text} text-text-secondary">${(0, import_utils2.escapeHtml)(displayLabel)}</span>` : ""}
-  </div>`;
-}
-function skeleton(options = {}) {
-  const { type = "text", width, height, lines = 3, animated = true, className = "" } = options;
-  const animateClass = animated ? "animate-pulse" : "";
-  const baseClass = `bg-gray-200 ${animateClass}`;
-  switch (type) {
-    case "circle":
-      return `<div class="${baseClass} rounded-full ${className}" style="width: ${width || "40px"}; height: ${height || "40px"}"></div>`;
-    case "rect":
-      return `<div class="${baseClass} rounded ${className}" style="width: ${width || "100%"}; height: ${height || "100px"}"></div>`;
-    case "card":
-      return `<div class="${animateClass} space-y-4 ${className}">
-        <div class="bg-gray-200 rounded h-40"></div>
-        <div class="space-y-2">
-          <div class="bg-gray-200 h-4 rounded w-3/4"></div>
-          <div class="bg-gray-200 h-4 rounded w-1/2"></div>
-        </div>
-      </div>`;
-    case "text":
-    default: {
-      const linesHtml = Array(lines).fill(0).map((_, i) => {
-        const lineWidth = i === lines - 1 ? "60%" : i === 0 ? "90%" : "80%";
-        return `<div class="bg-gray-200 h-4 rounded" style="width: ${lineWidth}"></div>`;
-      }).join("\n");
-      return `<div class="${animateClass} space-y-2 ${className}" style="width: ${width || "100%"}">
-        ${linesHtml}
-      </div>`;
-    }
-  }
-}
-function contentSkeleton(options = {}) {
-  const { animated = true, className = "" } = options;
-  const animateClass = animated ? "animate-pulse" : "";
-  return `<div class="${animateClass} flex gap-4 ${className}">
-    <div class="bg-gray-200 rounded-full w-12 h-12 flex-shrink-0"></div>
-    <div class="flex-1 space-y-2 py-1">
-      <div class="bg-gray-200 h-4 rounded w-3/4"></div>
-      <div class="bg-gray-200 h-4 rounded w-1/2"></div>
-    </div>
-  </div>`;
-}
-
 // libs/ui/src/bridge/core/adapter-registry.ts
 var AdapterRegistry = class {
   _adapters = /* @__PURE__ */ new Map();
@@ -4180,50 +3229,50 @@ var FrontMcpBridge = class {
    * Get current theme.
    */
   getTheme() {
-    this._ensureInitialized();
-    return this._adapter.getTheme();
+    const adapter = this._ensureInitialized();
+    return adapter.getTheme();
   }
   /**
    * Get current display mode.
    */
   getDisplayMode() {
-    this._ensureInitialized();
-    return this._adapter.getDisplayMode();
+    const adapter = this._ensureInitialized();
+    return adapter.getDisplayMode();
   }
   /**
    * Get tool input arguments.
    */
   getToolInput() {
-    this._ensureInitialized();
-    return this._adapter.getToolInput();
+    const adapter = this._ensureInitialized();
+    return adapter.getToolInput();
   }
   /**
    * Get tool output/result.
    */
   getToolOutput() {
-    this._ensureInitialized();
-    return this._adapter.getToolOutput();
+    const adapter = this._ensureInitialized();
+    return adapter.getToolOutput();
   }
   /**
    * Get structured content (parsed output).
    */
   getStructuredContent() {
-    this._ensureInitialized();
-    return this._adapter.getStructuredContent();
+    const adapter = this._ensureInitialized();
+    return adapter.getStructuredContent();
   }
   /**
    * Get persisted widget state.
    */
   getWidgetState() {
-    this._ensureInitialized();
-    return this._adapter.getWidgetState();
+    const adapter = this._ensureInitialized();
+    return adapter.getWidgetState();
   }
   /**
    * Get full host context.
    */
   getHostContext() {
-    this._ensureInitialized();
-    return this._adapter.getHostContext();
+    const adapter = this._ensureInitialized();
+    return adapter.getHostContext();
   }
   // ============================================
   // Actions (delegate to adapter)
@@ -4234,2026 +3283,134 @@ var FrontMcpBridge = class {
    * @param args - Tool arguments
    */
   async callTool(name, args) {
-    this._ensureInitialized();
+    const adapter = this._ensureInitialized();
     if (!this.hasCapability("canCallTools")) {
       throw new Error("Tool calls are not supported by the current adapter");
     }
-    return this._adapter.callTool(name, args);
+    return adapter.callTool(name, args);
   }
   /**
    * Send a follow-up message to the conversation.
    * @param content - Message content
    */
   async sendMessage(content) {
-    this._ensureInitialized();
+    const adapter = this._ensureInitialized();
     if (!this.hasCapability("canSendMessages")) {
       throw new Error("Sending messages is not supported by the current adapter");
     }
-    return this._adapter.sendMessage(content);
+    return adapter.sendMessage(content);
   }
   /**
    * Open an external link.
    * @param url - URL to open
    */
   async openLink(url) {
-    this._ensureInitialized();
-    return this._adapter.openLink(url);
+    const adapter = this._ensureInitialized();
+    return adapter.openLink(url);
   }
   /**
    * Request a display mode change.
    * @param mode - Desired display mode
    */
   async requestDisplayMode(mode) {
-    this._ensureInitialized();
-    return this._adapter.requestDisplayMode(mode);
+    const adapter = this._ensureInitialized();
+    return adapter.requestDisplayMode(mode);
   }
   /**
    * Request widget close.
    */
   async requestClose() {
-    this._ensureInitialized();
-    return this._adapter.requestClose();
+    const adapter = this._ensureInitialized();
+    return adapter.requestClose();
   }
   /**
    * Set widget state (persisted across sessions).
    * @param state - State object to persist
    */
-  setWidgetState(state) {
-    this._ensureInitialized();
-    this._adapter.setWidgetState(state);
-  }
-  // ============================================
-  // Events (delegate to adapter)
-  // ============================================
-  /**
-   * Subscribe to host context changes.
-   * @param callback - Called when context changes
-   * @returns Unsubscribe function
-   */
-  onContextChange(callback) {
-    this._ensureInitialized();
-    return this._adapter.onContextChange(callback);
-  }
-  /**
-   * Subscribe to tool result updates.
-   * @param callback - Called when tool result is received
-   * @returns Unsubscribe function
-   */
-  onToolResult(callback) {
-    this._ensureInitialized();
-    return this._adapter.onToolResult(callback);
-  }
-  // ============================================
-  // Private Helpers
-  // ============================================
-  /**
-   * Ensure the bridge is initialized before operations.
-   */
-  _ensureInitialized() {
-    if (!this._initialized || !this._adapter) {
-      throw new Error("FrontMcpBridge is not initialized. Call initialize() first.");
-    }
-  }
-  /**
-   * Wrap a promise with a timeout.
-   */
-  _withTimeout(promise, ms) {
-    return new Promise((resolve, reject) => {
-      const timer = setTimeout(() => {
-        reject(new Error(`Operation timed out after ${ms}ms`));
-      }, ms);
-      promise.then((result) => {
-        clearTimeout(timer);
-        resolve(result);
-      }).catch((error) => {
-        clearTimeout(timer);
-        reject(error);
-      });
-    });
-  }
-  /**
-   * Emit a bridge event via CustomEvent.
-   */
-  _emitEvent(type, payload) {
-    if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") {
-      try {
-        const event = new CustomEvent(type, { detail: payload });
-        window.dispatchEvent(event);
-      } catch {
-      }
-    }
-  }
-  /**
-   * Log debug message if debugging is enabled.
-   */
-  _log(message) {
-    if (this._config.debug) {
-      console.log(`[FrontMcpBridge] ${message}`);
-    }
-  }
-};
-async function createBridge(config, registry) {
-  const bridge = new FrontMcpBridge(config, registry);
-  await bridge.initialize();
-  return bridge;
-}
-
-// libs/ui/src/bridge/adapters/base-adapter.ts
-var DEFAULT_CAPABILITIES = {
-  canCallTools: false,
-  canSendMessages: false,
-  canOpenLinks: false,
-  canPersistState: true,
-  // localStorage fallback
-  hasNetworkAccess: true,
-  supportsDisplayModes: false,
-  supportsTheme: true
-};
-var DEFAULT_SAFE_AREA = {
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0
-};
-var BaseAdapter = class {
-  _capabilities = { ...DEFAULT_CAPABILITIES };
-  _hostContext;
-  _widgetState = {};
-  _toolInput = {};
-  _toolOutput = void 0;
-  _structuredContent = void 0;
-  _initialized = false;
-  _contextListeners = /* @__PURE__ */ new Set();
-  _toolResultListeners = /* @__PURE__ */ new Set();
-  constructor() {
-    this._hostContext = this._createDefaultHostContext();
-  }
-  get capabilities() {
-    return this._capabilities;
-  }
-  async initialize() {
-    if (this._initialized) return;
-    this._loadWidgetState();
-    this._readInjectedData();
-    this._initialized = true;
-  }
-  dispose() {
-    this._contextListeners.clear();
-    this._toolResultListeners.clear();
-    this._initialized = false;
-  }
-  // ============================================
-  // Data Access
-  // ============================================
-  getTheme() {
-    return this._hostContext.theme;
-  }
-  getDisplayMode() {
-    return this._hostContext.displayMode;
-  }
-  getUserAgent() {
-    return this._hostContext.userAgent;
-  }
-  getLocale() {
-    return this._hostContext.locale;
-  }
-  getToolInput() {
-    return this._toolInput;
-  }
-  getToolOutput() {
-    return this._toolOutput;
-  }
-  getStructuredContent() {
-    return this._structuredContent;
-  }
-  getWidgetState() {
-    return this._widgetState;
-  }
-  getSafeArea() {
-    return this._hostContext.safeArea;
-  }
-  getViewport() {
-    return this._hostContext.viewport;
-  }
-  getHostContext() {
-    return { ...this._hostContext };
-  }
-  // ============================================
-  // Actions (override in subclasses for real functionality)
-  // ============================================
-  async callTool(_name, _args) {
-    if (!this._capabilities.canCallTools) {
-      throw new Error(`Tool calls are not supported by ${this.name} adapter`);
-    }
-    throw new Error("callTool not implemented");
-  }
-  async sendMessage(_content) {
-    if (!this._capabilities.canSendMessages) {
-      throw new Error(`Sending messages is not supported by ${this.name} adapter`);
-    }
-    throw new Error("sendMessage not implemented");
-  }
-  async openLink(url) {
-    if (!this._capabilities.canOpenLinks) {
-      if (typeof window !== "undefined") {
-        window.open(url, "_blank", "noopener,noreferrer");
-        return;
-      }
-      throw new Error(`Opening links is not supported by ${this.name} adapter`);
-    }
-    throw new Error("openLink not implemented");
-  }
-  async requestDisplayMode(_mode) {
-    if (!this._capabilities.supportsDisplayModes) {
-      return;
-    }
-    throw new Error("requestDisplayMode not implemented");
-  }
-  async requestClose() {
-  }
-  setWidgetState(state) {
-    this._widgetState = { ...this._widgetState, ...state };
-    this._persistWidgetState();
-  }
-  // ============================================
-  // Events
-  // ============================================
-  onContextChange(callback) {
-    this._contextListeners.add(callback);
-    return () => {
-      this._contextListeners.delete(callback);
-    };
-  }
-  onToolResult(callback) {
-    this._toolResultListeners.add(callback);
-    return () => {
-      this._toolResultListeners.delete(callback);
-    };
-  }
-  // ============================================
-  // Protected Helpers
-  // ============================================
-  /**
-   * Create default host context from environment detection.
-   */
-  _createDefaultHostContext() {
-    return {
-      theme: this._detectTheme(),
-      displayMode: "inline",
-      locale: this._detectLocale(),
-      userAgent: this._detectUserAgent(),
-      safeArea: DEFAULT_SAFE_AREA,
-      viewport: this._detectViewport()
-    };
-  }
-  /**
-   * Detect theme from CSS media query.
-   */
-  _detectTheme() {
-    if (typeof window !== "undefined" && window.matchMedia) {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-    }
-    return "light";
-  }
-  /**
-   * Detect locale from navigator.
-   */
-  _detectLocale() {
-    if (typeof navigator !== "undefined") {
-      return navigator.language || "en-US";
-    }
-    return "en-US";
-  }
-  /**
-   * Detect user agent capabilities.
-   */
-  _detectUserAgent() {
-    if (typeof navigator === "undefined") {
-      return { type: "web", hover: true, touch: false };
-    }
-    const ua = navigator.userAgent || "";
-    const isMobile = /iPhone|iPad|iPod|Android/i.test(ua);
-    const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
-    const hasHover = typeof window !== "undefined" && window.matchMedia && window.matchMedia("(hover: hover)").matches;
-    return {
-      type: isMobile ? "mobile" : "web",
-      hover: hasHover !== false,
-      touch: hasTouch
-    };
-  }
-  /**
-   * Detect viewport dimensions.
-   */
-  _detectViewport() {
-    if (typeof window !== "undefined") {
-      return {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-    }
-    return void 0;
-  }
-  /**
-   * Read injected tool data from window globals.
-   */
-  _readInjectedData() {
-    if (typeof window === "undefined") return;
-    const win = window;
-    if (win.__mcpToolInput) {
-      this._toolInput = win.__mcpToolInput;
-    }
-    if (win.__mcpToolOutput) {
-      this._toolOutput = win.__mcpToolOutput;
-    }
-    if (win.__mcpStructuredContent) {
-      this._structuredContent = win.__mcpStructuredContent;
-    }
-    if (win.__mcpHostContext) {
-      this._hostContext = { ...this._hostContext, ...win.__mcpHostContext };
-    }
-  }
-  /**
-   * Load widget state from localStorage.
-   */
-  _loadWidgetState() {
-    if (typeof localStorage === "undefined") return;
-    try {
-      const key = this._getStateKey();
-      const stored = localStorage.getItem(key);
-      if (stored) {
-        this._widgetState = JSON.parse(stored);
-      }
-    } catch {
-    }
-  }
-  /**
-   * Persist widget state to localStorage.
-   */
-  _persistWidgetState() {
-    if (typeof localStorage === "undefined") return;
-    try {
-      const key = this._getStateKey();
-      localStorage.setItem(key, JSON.stringify(this._widgetState));
-    } catch {
-    }
-  }
-  /**
-   * Get localStorage key for widget state.
-   */
-  _getStateKey() {
-    if (typeof window !== "undefined") {
-      const toolName = window.__mcpToolName || "unknown";
-      return `frontmcp:widget:${toolName}`;
-    }
-    return "frontmcp:widget:unknown";
-  }
-  /**
-   * Notify context change listeners.
-   */
-  _notifyContextChange(changes) {
-    this._hostContext = { ...this._hostContext, ...changes };
-    this._contextListeners.forEach((cb) => {
-      try {
-        cb(changes);
-      } catch (e) {
-        console.error("[FrontMcpBridge] Context change listener error:", e);
-      }
-    });
-  }
-  /**
-   * Notify tool result listeners.
-   */
-  _notifyToolResult(result) {
-    this._toolOutput = result;
-    this._toolResultListeners.forEach((cb) => {
-      try {
-        cb(result);
-      } catch (e) {
-        console.error("[FrontMcpBridge] Tool result listener error:", e);
-      }
-    });
-  }
-};
-
-// libs/ui/src/bridge/adapters/openai.adapter.ts
-var OpenAIAdapter = class extends BaseAdapter {
-  id = "openai";
-  name = "OpenAI ChatGPT";
-  priority = 100;
-  // Highest priority
-  _openai;
-  _unsubscribeContext;
-  _unsubscribeToolResult;
-  constructor() {
-    super();
-    this._capabilities = {
-      ...DEFAULT_CAPABILITIES,
-      canCallTools: true,
-      canSendMessages: true,
-      canOpenLinks: true,
-      canPersistState: true,
-      hasNetworkAccess: true,
-      supportsDisplayModes: true,
-      supportsTheme: true
-    };
-  }
-  /**
-   * Check if OpenAI Apps SDK is available.
-   */
-  canHandle() {
-    if (typeof window === "undefined") return false;
-    const win = window;
-    return Boolean(win.openai?.canvas);
-  }
-  /**
-   * Initialize the OpenAI adapter.
-   */
-  async initialize() {
-    if (this._initialized) return;
-    this._openai = window.openai;
-    await super.initialize();
-    this._syncContextFromSDK();
-    if (this._openai?.canvas?.onContextChange) {
-      this._unsubscribeContext = this._openai.canvas.onContextChange((changes) => {
-        this._notifyContextChange(changes);
-      });
-    }
-    if (this._openai?.canvas?.onToolResult) {
-      this._unsubscribeToolResult = this._openai.canvas.onToolResult((result) => {
-        this._notifyToolResult(result);
-      });
-    }
-  }
-  /**
-   * Dispose adapter resources.
-   */
-  dispose() {
-    if (this._unsubscribeContext) {
-      this._unsubscribeContext();
-      this._unsubscribeContext = void 0;
-    }
-    if (this._unsubscribeToolResult) {
-      this._unsubscribeToolResult();
-      this._unsubscribeToolResult = void 0;
-    }
-    this._openai = void 0;
-    super.dispose();
-  }
-  // ============================================
-  // Data Access (override with SDK calls)
-  // ============================================
-  getTheme() {
-    if (this._openai?.canvas?.getTheme) {
-      const theme = this._openai.canvas.getTheme();
-      return theme === "dark" ? "dark" : "light";
-    }
-    return super.getTheme();
-  }
-  getDisplayMode() {
-    if (this._openai?.canvas?.getDisplayMode) {
-      const mode = this._openai.canvas.getDisplayMode();
-      if (mode === "fullscreen" || mode === "pip" || mode === "carousel") {
-        return mode;
-      }
-      return "inline";
-    }
-    return super.getDisplayMode();
-  }
-  // ============================================
-  // Actions (proxy to SDK)
-  // ============================================
-  async callTool(name, args) {
-    if (!this._openai?.canvas?.callServerTool) {
-      throw new Error("callServerTool not available in OpenAI SDK");
-    }
-    return this._openai.canvas.callServerTool(name, args);
-  }
-  async sendMessage(content) {
-    if (!this._openai?.canvas?.sendMessage) {
-      throw new Error("sendMessage not available in OpenAI SDK");
-    }
-    await this._openai.canvas.sendMessage(content);
-  }
-  async openLink(url) {
-    if (!this._openai?.canvas?.openLink) {
-      return super.openLink(url);
-    }
-    await this._openai.canvas.openLink(url);
-  }
-  async requestDisplayMode(mode) {
-    if (!this._openai?.canvas?.setDisplayMode) {
-      return super.requestDisplayMode(mode);
-    }
-    await this._openai.canvas.setDisplayMode(mode);
-    this._hostContext = { ...this._hostContext, displayMode: mode };
-  }
-  async requestClose() {
-    if (this._openai?.canvas?.close) {
-      await this._openai.canvas.close();
-    }
-  }
-  // ============================================
-  // Private Helpers
-  // ============================================
-  /**
-   * Sync context from OpenAI SDK.
-   */
-  _syncContextFromSDK() {
-    if (!this._openai?.canvas) return;
-    if (this._openai.canvas.getTheme) {
-      const theme = this._openai.canvas.getTheme();
-      this._hostContext.theme = theme === "dark" ? "dark" : "light";
-    }
-    if (this._openai.canvas.getDisplayMode) {
-      const mode = this._openai.canvas.getDisplayMode();
-      if (mode === "fullscreen" || mode === "pip" || mode === "carousel" || mode === "inline") {
-        this._hostContext.displayMode = mode;
-      }
-    }
-    if (this._openai.canvas.getContext) {
-      const ctx = this._openai.canvas.getContext();
-      if (ctx) {
-        this._hostContext = { ...this._hostContext, ...ctx };
-      }
-    }
-  }
-};
-function createOpenAIAdapter() {
-  return new OpenAIAdapter();
-}
-
-// libs/ui/src/bridge/adapters/ext-apps.adapter.ts
-var ExtAppsAdapter = class extends BaseAdapter {
-  id = "ext-apps";
-  name = "ext-apps (SEP-1865)";
-  priority = 80;
-  // High priority, but below OpenAI native
-  _config;
-  _messageListener;
-  _pendingRequests = /* @__PURE__ */ new Map();
-  _requestId = 0;
-  _trustedOrigin;
-  _hostCapabilities = {};
-  constructor(config) {
-    super();
-    this._config = config || {};
-    this._capabilities = {
-      ...DEFAULT_CAPABILITIES,
-      canPersistState: true,
-      hasNetworkAccess: true,
-      // ext-apps usually allows network
-      supportsTheme: true
-    };
-  }
-  /**
-   * Check if we're in an iframe (potential ext-apps context).
-   */
-  canHandle() {
-    if (typeof window === "undefined") return false;
-    const inIframe = window.parent !== window;
-    if (!inIframe) return false;
-    const win = window;
-    if (win.openai?.canvas) return false;
-    if (win.__mcpPlatform === "ext-apps") return true;
-    return true;
-  }
-  /**
-   * Initialize the ext-apps adapter with protocol handshake.
-   */
-  async initialize() {
-    if (this._initialized) return;
-    this._setupMessageListener();
-    await super.initialize();
-    await this._performHandshake();
-    this._initialized = true;
-  }
-  /**
-   * Dispose adapter resources.
-   */
-  dispose() {
-    if (this._messageListener && typeof window !== "undefined") {
-      window.removeEventListener("message", this._messageListener);
-      this._messageListener = void 0;
-    }
-    for (const [id, pending] of this._pendingRequests) {
-      clearTimeout(pending.timeout);
-      pending.reject(new Error("Adapter disposed"));
-    }
-    this._pendingRequests.clear();
-    super.dispose();
-  }
-  // ============================================
-  // Actions (via JSON-RPC)
-  // ============================================
-  async callTool(name, args) {
-    if (!this._hostCapabilities.serverToolProxy) {
-      throw new Error("Server tool proxy not supported by host");
-    }
-    return this._sendRequest("ui/callServerTool", {
-      name,
-      arguments: args
-    });
-  }
-  async sendMessage(content) {
-    await this._sendRequest("ui/message", { content });
-  }
-  async openLink(url) {
-    if (!this._hostCapabilities.openLink) {
-      return super.openLink(url);
-    }
-    await this._sendRequest("ui/openLink", { url });
-  }
-  async requestDisplayMode(mode) {
-    await this._sendRequest("ui/setDisplayMode", { mode });
-    this._hostContext = { ...this._hostContext, displayMode: mode };
-  }
-  async requestClose() {
-    await this._sendRequest("ui/close", {});
-  }
-  // ============================================
-  // Private: Message Handling
-  // ============================================
-  /**
-   * Setup postMessage listener for incoming messages.
-   */
-  _setupMessageListener() {
-    if (typeof window === "undefined") return;
-    this._messageListener = (event) => {
-      this._handleMessage(event);
-    };
-    window.addEventListener("message", this._messageListener);
-  }
-  /**
-   * Handle incoming postMessage events.
-   */
-  _handleMessage(event) {
-    if (!this._isOriginTrusted(event.origin)) {
-      return;
-    }
-    const data = event.data;
-    if (!data || typeof data !== "object") return;
-    if (data.jsonrpc !== "2.0") return;
-    if ("id" in data && (data.result !== void 0 || data.error !== void 0)) {
-      this._handleResponse(data);
-      return;
-    }
-    if ("method" in data && !("id" in data)) {
-      this._handleNotification(data);
-      return;
-    }
-  }
-  /**
-   * Handle JSON-RPC response.
-   */
-  _handleResponse(response) {
-    const pending = this._pendingRequests.get(response.id);
-    if (!pending) return;
-    clearTimeout(pending.timeout);
-    this._pendingRequests.delete(response.id);
-    if (response.error) {
-      pending.reject(new Error(`${response.error.message} (code: ${response.error.code})`));
-    } else {
-      pending.resolve(response.result);
-    }
-  }
-  /**
-   * Handle JSON-RPC notification from host.
-   */
-  _handleNotification(notification) {
-    switch (notification.method) {
-      case "ui/notifications/tool-input":
-        this._handleToolInput(notification.params);
-        break;
-      case "ui/notifications/tool-input-partial":
-        this._handleToolInputPartial(notification.params);
-        break;
-      case "ui/notifications/tool-result":
-        this._handleToolResult(notification.params);
-        break;
-      case "ui/notifications/host-context-changed":
-        this._handleHostContextChange(notification.params);
-        break;
-      case "ui/notifications/initialized":
-        break;
-      case "ui/notifications/cancelled":
-        this._handleCancelled(notification.params);
-        break;
-    }
-  }
-  /**
-   * Handle tool input notification.
-   */
-  _handleToolInput(params) {
-    this._toolInput = params.arguments || {};
-    this._emitBridgeEvent("tool:input", { arguments: this._toolInput });
-  }
-  /**
-   * Handle partial tool input (streaming).
-   */
-  _handleToolInputPartial(params) {
-    this._toolInput = { ...this._toolInput, ...params.arguments };
-    this._emitBridgeEvent("tool:input-partial", { arguments: this._toolInput });
-  }
-  /**
-   * Handle tool result notification.
-   */
-  _handleToolResult(params) {
-    this._toolOutput = params.content;
-    this._structuredContent = params.structuredContent;
-    this._notifyToolResult(params.content);
-    this._emitBridgeEvent("tool:result", {
-      content: params.content,
-      structuredContent: params.structuredContent
-    });
-  }
-  /**
-   * Handle host context change notification.
-   */
-  _handleHostContextChange(params) {
-    const changes = {};
-    if (params.theme !== void 0) {
-      changes.theme = params.theme;
-    }
-    if (params.displayMode !== void 0) {
-      changes.displayMode = params.displayMode;
-    }
-    if (params.viewport !== void 0) {
-      changes.viewport = params.viewport;
-    }
-    if (params.locale !== void 0) {
-      changes.locale = params.locale;
-    }
-    if (params.timezone !== void 0) {
-      changes.timezone = params.timezone;
-    }
-    this._notifyContextChange(changes);
-  }
-  /**
-   * Handle cancellation notification.
-   */
-  _handleCancelled(params) {
-    const reason = params?.reason;
-    this._emitBridgeEvent("tool:cancelled", { reason });
-  }
-  // ============================================
-  // Private: JSON-RPC Transport
-  // ============================================
-  /**
-   * Send a JSON-RPC request to the host.
-   */
-  _sendRequest(method, params) {
-    return new Promise((resolve, reject) => {
-      const id = ++this._requestId;
-      const timeout = this._config.options?.initTimeout || 1e4;
-      const request = {
-        jsonrpc: "2.0",
-        id,
-        method,
-        params
-      };
-      const timeoutHandle = setTimeout(() => {
-        this._pendingRequests.delete(id);
-        reject(new Error(`Request ${method} timed out after ${timeout}ms`));
-      }, timeout);
-      this._pendingRequests.set(id, {
-        resolve,
-        reject,
-        timeout: timeoutHandle
-      });
-      this._postMessage(request);
-    });
-  }
-  /**
-   * Send a JSON-RPC notification (no response expected).
-   */
-  _sendNotification(method, params) {
-    const notification = {
-      jsonrpc: "2.0",
-      method,
-      params
-    };
-    this._postMessage(notification);
-  }
-  /**
-   * Post a message to the parent window.
-   */
-  _postMessage(message) {
-    if (typeof window === "undefined") return;
-    const targetOrigin = this._trustedOrigin || "*";
-    window.parent.postMessage(message, targetOrigin);
-  }
-  // ============================================
-  // Private: Handshake
-  // ============================================
-  /**
-   * Perform the ui/initialize handshake with the host.
-   */
-  async _performHandshake() {
-    const params = {
-      appInfo: {
-        name: this._config.options?.appName || "FrontMCP Widget",
-        version: this._config.options?.appVersion || "1.0.0"
-      },
-      appCapabilities: {
-        tools: {
-          listChanged: false
-        }
-      },
-      protocolVersion: this._config.options?.protocolVersion || "2024-11-05"
-    };
-    try {
-      const result = await this._sendRequest("ui/initialize", params);
-      this._hostCapabilities = result.hostCapabilities || {};
-      this._capabilities = {
-        ...this._capabilities,
-        canCallTools: Boolean(this._hostCapabilities.serverToolProxy),
-        canSendMessages: true,
-        canOpenLinks: Boolean(this._hostCapabilities.openLink),
-        supportsDisplayModes: true
-      };
-      if (result.hostContext) {
-        this._hostContext = {
-          ...this._hostContext,
-          ...result.hostContext
-        };
-      }
-      if (!this._config.options?.trustedOrigins?.length) {
-      }
-    } catch (error) {
-      throw new Error(`ext-apps handshake failed: ${error}`);
-    }
-  }
-  // ============================================
-  // Private: Origin Security
-  // ============================================
-  /**
-   * Check if an origin is trusted.
-   * Uses trust-on-first-use if no explicit origins configured.
-   */
-  _isOriginTrusted(origin) {
-    const trustedOrigins = this._config.options?.trustedOrigins;
-    if (trustedOrigins && trustedOrigins.length > 0) {
-      return trustedOrigins.includes(origin);
-    }
-    if (!this._trustedOrigin) {
-      this._trustedOrigin = origin;
-      return true;
-    }
-    return this._trustedOrigin === origin;
-  }
-  // ============================================
-  // Private: Events
-  // ============================================
-  /**
-   * Emit a bridge event via CustomEvent.
-   */
-  _emitBridgeEvent(type, detail) {
-    if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") {
-      try {
-        const event = new CustomEvent(type, { detail });
-        window.dispatchEvent(event);
-      } catch {
-      }
-    }
-  }
-};
-function createExtAppsAdapter(config) {
-  return new ExtAppsAdapter(config);
-}
-
-// libs/ui/src/bridge/adapters/claude.adapter.ts
-var ClaudeAdapter = class extends BaseAdapter {
-  id = "claude";
-  name = "Claude (Anthropic)";
-  priority = 60;
-  constructor() {
-    super();
-    this._capabilities = {
-      ...DEFAULT_CAPABILITIES,
-      canCallTools: false,
-      // Claude artifacts can't call tools
-      canSendMessages: false,
-      // Can't send messages back to conversation
-      canOpenLinks: true,
-      // Can open links via window.open
-      canPersistState: true,
-      // localStorage works
-      hasNetworkAccess: false,
-      // Network is blocked
-      supportsDisplayModes: false,
-      // No display mode control
-      supportsTheme: true
-      // Can detect system theme
-    };
-  }
-  /**
-   * Check if we're running in a Claude artifact/widget context.
-   */
-  canHandle() {
-    if (typeof window === "undefined") return false;
-    const win = window;
-    if (win.__mcpPlatform === "claude") return true;
-    if (win.claude) return true;
-    if (win.__claudeArtifact) return true;
-    if (typeof location !== "undefined") {
-      const href = location.href;
-      if (href.includes("claude.ai") || href.includes("anthropic.com")) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /**
-   * Initialize the Claude adapter.
-   */
-  async initialize() {
-    if (this._initialized) return;
-    await super.initialize();
-    this._setupThemeListener();
-  }
-  /**
-   * Open a link in a new tab.
-   * This is one of the few actions available in Claude artifacts.
-   */
-  async openLink(url) {
-    if (typeof window !== "undefined") {
-      window.open(url, "_blank", "noopener,noreferrer");
-    }
-  }
-  /**
-   * Request display mode change (no-op for Claude).
-   */
-  async requestDisplayMode(_mode) {
-  }
-  /**
-   * Request close (no-op for Claude).
-   */
-  async requestClose() {
-  }
-  // ============================================
-  // Private Helpers
-  // ============================================
-  /**
-   * Setup listener for system theme changes.
-   */
-  _setupThemeListener() {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      const newTheme = e.matches ? "dark" : "light";
-      if (newTheme !== this._hostContext.theme) {
-        this._notifyContextChange({ theme: newTheme });
-      }
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handleChange);
-    }
-  }
-};
-function createClaudeAdapter() {
-  return new ClaudeAdapter();
-}
-
-// libs/ui/src/bridge/adapters/gemini.adapter.ts
-var GeminiAdapter = class extends BaseAdapter {
-  id = "gemini";
-  name = "Google Gemini";
-  priority = 40;
-  _gemini;
-  constructor() {
-    super();
-    this._capabilities = {
-      ...DEFAULT_CAPABILITIES,
-      canCallTools: false,
-      // May be enabled if SDK supports it
-      canSendMessages: false,
-      // May be enabled if SDK supports it
-      canOpenLinks: true,
-      canPersistState: true,
-      hasNetworkAccess: true,
-      supportsDisplayModes: false,
-      supportsTheme: true
-    };
-  }
-  /**
-   * Check if we're running in a Gemini context.
-   */
-  canHandle() {
-    if (typeof window === "undefined") return false;
-    const win = window;
-    if (win.__mcpPlatform === "gemini") return true;
-    if (win.gemini) return true;
-    if (typeof location !== "undefined") {
-      const href = location.href;
-      if (href.includes("gemini.google.com") || href.includes("bard.google.com")) {
-        return true;
-      }
-    }
-    return false;
-  }
-  /**
-   * Initialize the Gemini adapter.
-   */
-  async initialize() {
-    if (this._initialized) return;
-    const win = window;
-    this._gemini = win.gemini;
-    if (this._gemini?.ui) {
-      if (this._gemini.ui.sendMessage) {
-        this._capabilities = { ...this._capabilities, canSendMessages: true };
-      }
-    }
-    await super.initialize();
-    this._setupThemeListener();
-  }
-  /**
-   * Get current theme.
-   */
-  getTheme() {
-    if (this._gemini?.ui?.getTheme) {
-      const theme = this._gemini.ui.getTheme();
-      return theme === "dark" ? "dark" : "light";
-    }
-    return super.getTheme();
-  }
-  /**
-   * Send a message (if supported by SDK).
-   */
-  async sendMessage(content) {
-    if (this._gemini?.ui?.sendMessage) {
-      await this._gemini.ui.sendMessage(content);
-      return;
-    }
-    throw new Error("Sending messages is not supported by Gemini adapter");
-  }
-  /**
-   * Open a link.
-   */
-  async openLink(url) {
-    if (this._gemini?.ui?.openLink) {
-      await this._gemini.ui.openLink(url);
-      return;
-    }
-    return super.openLink(url);
-  }
-  // ============================================
-  // Private Helpers
-  // ============================================
-  /**
-   * Setup listener for system theme changes.
-   */
-  _setupThemeListener() {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      if (!this._gemini?.ui?.getTheme) {
-        const newTheme = e.matches ? "dark" : "light";
-        if (newTheme !== this._hostContext.theme) {
-          this._notifyContextChange({ theme: newTheme });
-        }
-      }
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handleChange);
-    }
-  }
-};
-function createGeminiAdapter() {
-  return new GeminiAdapter();
-}
-
-// libs/ui/src/bridge/adapters/generic.adapter.ts
-var GenericAdapter = class extends BaseAdapter {
-  id = "generic";
-  name = "Generic Web";
-  priority = 0;
-  // Lowest priority - fallback only
-  constructor() {
-    super();
-    this._capabilities = {
-      ...DEFAULT_CAPABILITIES,
-      canCallTools: false,
-      canSendMessages: false,
-      canOpenLinks: true,
-      // window.open works
-      canPersistState: true,
-      // localStorage works
-      hasNetworkAccess: true,
-      // Assume network available
-      supportsDisplayModes: false,
-      supportsTheme: true
-      // System theme detection
-    };
-  }
-  /**
-   * Generic adapter can always handle the environment.
-   * It serves as the fallback when no other adapter matches.
-   */
-  canHandle() {
-    return typeof window !== "undefined";
-  }
-  /**
-   * Initialize the generic adapter.
-   */
-  async initialize() {
-    if (this._initialized) return;
-    await super.initialize();
-    this._setupThemeListener();
-  }
-  /**
-   * Open a link using window.open.
-   */
-  async openLink(url) {
-    if (typeof window !== "undefined") {
-      window.open(url, "_blank", "noopener,noreferrer");
-    }
-  }
-  // ============================================
-  // Private Helpers
-  // ============================================
-  /**
-   * Setup listener for system theme changes.
-   */
-  _setupThemeListener() {
-    if (typeof window === "undefined" || !window.matchMedia) return;
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e) => {
-      const newTheme = e.matches ? "dark" : "light";
-      if (newTheme !== this._hostContext.theme) {
-        this._notifyContextChange({ theme: newTheme });
-      }
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-    } else if (mediaQuery.addListener) {
-      mediaQuery.addListener(handleChange);
-    }
-  }
-};
-function createGenericAdapter() {
-  return new GenericAdapter();
-}
-
-// libs/ui/src/bridge/adapters/index.ts
-function registerBuiltInAdapters() {
-  defaultRegistry.register("openai", createOpenAIAdapter);
-  defaultRegistry.register("ext-apps", createExtAppsAdapter);
-  defaultRegistry.register("claude", createClaudeAdapter);
-  defaultRegistry.register("gemini", createGeminiAdapter);
-  defaultRegistry.register("generic", createGenericAdapter);
-}
-registerBuiltInAdapters();
-
-// libs/ui/src/bridge/runtime/iife-generator.ts
-function generateBridgeIIFE(options = {}) {
-  const { debug = false, trustedOrigins = [], minify = false } = options;
-  const adapters = options.adapters || ["openai", "ext-apps", "claude", "gemini", "generic"];
-  const parts = [];
-  parts.push("(function() {");
-  parts.push('"use strict";');
-  parts.push("");
-  if (debug) {
-    parts.push('function log(msg) { console.log("[FrontMcpBridge] " + msg); }');
-  } else {
-    parts.push("function log() {}");
-  }
-  parts.push("");
-  parts.push("var DEFAULT_SAFE_AREA = { top: 0, bottom: 0, left: 0, right: 0 };");
-  parts.push("");
-  parts.push(generateContextDetection());
-  parts.push("");
-  parts.push(generateBaseCapabilities());
-  parts.push("");
-  if (adapters.includes("openai")) {
-    parts.push(generateOpenAIAdapter());
-    parts.push("");
-  }
-  if (adapters.includes("ext-apps")) {
-    parts.push(generateExtAppsAdapter(trustedOrigins));
-    parts.push("");
-  }
-  if (adapters.includes("claude")) {
-    parts.push(generateClaudeAdapter());
-    parts.push("");
-  }
-  if (adapters.includes("gemini")) {
-    parts.push(generateGeminiAdapter());
-    parts.push("");
-  }
-  if (adapters.includes("generic")) {
-    parts.push(generateGenericAdapter());
-    parts.push("");
-  }
-  parts.push(generatePlatformDetection(adapters));
-  parts.push("");
-  parts.push(generateBridgeClass());
-  parts.push("");
-  parts.push("var bridge = new FrontMcpBridge();");
-  parts.push("bridge.initialize().then(function() {");
-  parts.push('  log("Bridge initialized with adapter: " + bridge.adapterId);');
-  parts.push('  window.dispatchEvent(new CustomEvent("bridge:ready", { detail: { adapter: bridge.adapterId } }));');
-  parts.push("}).catch(function(err) {");
-  parts.push('  console.error("[FrontMcpBridge] Init failed:", err);');
-  parts.push('  window.dispatchEvent(new CustomEvent("bridge:error", { detail: { error: err } }));');
-  parts.push("});");
-  parts.push("");
-  parts.push("window.FrontMcpBridge = bridge;");
-  parts.push("})();");
-  const code = parts.join("\n");
-  if (minify) {
-    return minifyJS(code);
-  }
-  return code;
-}
-function generateContextDetection() {
-  return `
-function detectTheme() {
-  if (typeof window !== 'undefined' && window.matchMedia) {
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-  }
-  return 'light';
-}
-
-function detectLocale() {
-  if (typeof navigator !== 'undefined') {
-    return navigator.language || 'en-US';
-  }
-  return 'en-US';
-}
-
-function detectUserAgent() {
-  if (typeof navigator === 'undefined') {
-    return { type: 'web', hover: true, touch: false };
-  }
-  var ua = navigator.userAgent || '';
-  var isMobile = /iPhone|iPad|iPod|Android/i.test(ua);
-  var hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-  var hasHover = window.matchMedia && window.matchMedia('(hover: hover)').matches;
-  return { type: isMobile ? 'mobile' : 'web', hover: hasHover !== false, touch: hasTouch };
-}
-
-function detectViewport() {
-  if (typeof window !== 'undefined') {
-    return { width: window.innerWidth, height: window.innerHeight };
-  }
-  return undefined;
-}
-
-function readInjectedData() {
-  var data = { toolInput: {}, toolOutput: undefined, structuredContent: undefined };
-  if (typeof window !== 'undefined') {
-    if (window.__mcpToolInput) data.toolInput = window.__mcpToolInput;
-    if (window.__mcpToolOutput) data.toolOutput = window.__mcpToolOutput;
-    if (window.__mcpStructuredContent) data.structuredContent = window.__mcpStructuredContent;
-  }
-  return data;
-}
-`.trim();
-}
-function generateBaseCapabilities() {
-  return `
-var DEFAULT_CAPABILITIES = {
-  canCallTools: false,
-  canSendMessages: false,
-  canOpenLinks: false,
-  canPersistState: true,
-  hasNetworkAccess: true,
-  supportsDisplayModes: false,
-  supportsTheme: true
-};
-`.trim();
-}
-function generateOpenAIAdapter() {
-  return `
-var OpenAIAdapter = {
-  id: 'openai',
-  name: 'OpenAI ChatGPT',
-  priority: 100,
-  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
-    canCallTools: true,
-    canSendMessages: true,
-    canOpenLinks: true,
-    supportsDisplayModes: true
-  }),
-  canHandle: function() {
-    if (typeof window === 'undefined') return false;
-    // Check for window.openai.callTool (the actual OpenAI SDK API)
-    if (window.openai && typeof window.openai.callTool === 'function') return true;
-    // Also check if we're being injected with tool metadata (OpenAI injects toolOutput)
-    if (window.openai && (window.openai.toolOutput !== undefined || window.openai.toolInput !== undefined)) return true;
-    return false;
-  },
-  initialize: function(context) {
-    var sdk = window.openai;
-    context.sdk = sdk;
-    // OpenAI SDK exposes theme and displayMode directly as properties
-    if (sdk.theme) {
-      context.hostContext.theme = sdk.theme;
-    }
-    if (sdk.displayMode) {
-      context.hostContext.displayMode = sdk.displayMode;
-    }
-    // Note: OpenAI SDK does not have an onContextChange equivalent
-    return Promise.resolve();
-  },
-  callTool: function(context, name, args) {
-    return context.sdk.callTool(name, args);
-  },
-  sendMessage: function(context, content) {
-    if (typeof context.sdk.sendFollowUpMessage === 'function') {
-      return context.sdk.sendFollowUpMessage(content);
-    }
-    return Promise.reject(new Error('Messages not supported'));
-  },
-  openLink: function(context, url) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-    return Promise.resolve();
-  },
-  requestDisplayMode: function(context, mode) {
-    return Promise.resolve();
-  },
-  requestClose: function(context) {
-    return Promise.resolve();
-  }
-};
-`.trim();
-}
-function generateExtAppsAdapter(trustedOrigins) {
-  const originsArray = trustedOrigins.length > 0 ? JSON.stringify(trustedOrigins) : "[]";
-  return `
-var ExtAppsAdapter = {
-  id: 'ext-apps',
-  name: 'ext-apps (SEP-1865)',
-  priority: 80,
-  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, { canPersistState: true, hasNetworkAccess: true }),
-  trustedOrigins: ${originsArray},
-  trustedOrigin: null,
-  pendingRequests: {},
-  requestId: 0,
-  hostCapabilities: {},
-  canHandle: function() {
-    if (typeof window === 'undefined') return false;
-    if (window.parent === window) return false;
-    // Check for OpenAI SDK (window.openai.callTool) - defer to OpenAIAdapter
-    if (window.openai && typeof window.openai.callTool === 'function') return false;
-    if (window.__mcpPlatform === 'ext-apps') return true;
-    return true;
-  },
-  initialize: function(context) {
-    var self = this;
-    context.extApps = this;
-
-    window.addEventListener('message', function(event) {
-      self.handleMessage(context, event);
-    });
-
-    return self.performHandshake(context);
-  },
-  handleMessage: function(context, event) {
-    if (!this.isOriginTrusted(event.origin)) return;
-    var data = event.data;
-    if (!data || typeof data !== 'object' || data.jsonrpc !== '2.0') return;
-
-    if ('id' in data && (data.result !== undefined || data.error !== undefined)) {
-      var pending = this.pendingRequests[data.id];
-      if (pending) {
-        clearTimeout(pending.timeout);
-        delete this.pendingRequests[data.id];
-        if (data.error) {
-          pending.reject(new Error(data.error.message + ' (code: ' + data.error.code + ')'));
-        } else {
-          pending.resolve(data.result);
-        }
-      }
-      return;
-    }
-
-    if ('method' in data && !('id' in data)) {
-      this.handleNotification(context, data);
-    }
-  },
-  handleNotification: function(context, notification) {
-    var params = notification.params || {};
-    switch (notification.method) {
-      case 'ui/notifications/tool-input':
-        context.toolInput = params.arguments || {};
-        window.dispatchEvent(new CustomEvent('tool:input', { detail: { arguments: context.toolInput } }));
-        break;
-      case 'ui/notifications/tool-result':
-        context.toolOutput = params.content;
-        context.structuredContent = params.structuredContent;
-        context.notifyToolResult(params.content);
-        window.dispatchEvent(new CustomEvent('tool:result', { detail: params }));
-        break;
-      case 'ui/notifications/host-context-changed':
-        Object.assign(context.hostContext, params);
-        context.notifyContextChange(params);
-        break;
-    }
-  },
-  isOriginTrusted: function(origin) {
-    if (this.trustedOrigins.length > 0) {
-      return this.trustedOrigins.indexOf(origin) !== -1;
-    }
-    // When no trusted origins configured, only trust first message in iframe context
-    // This helps mitigate race conditions where a malicious iframe could establish trust
-    if (!this.trustedOrigin) {
-      if (window.parent !== window && origin) {
-        this.trustedOrigin = origin;
-        return true;
-      }
-      return false;
-    }
-    return this.trustedOrigin === origin;
-  },
-  sendRequest: function(method, params) {
-    var self = this;
-    return new Promise(function(resolve, reject) {
-      // Security: Require trusted origin before sending requests to prevent message leaks
-      if (!self.trustedOrigin && self.trustedOrigins.length === 0) {
-        reject(new Error('Cannot send request: no trusted origin established'));
-        return;
-      }
-
-      var id = ++self.requestId;
-      var timeout = setTimeout(function() {
-        delete self.pendingRequests[id];
-        reject(new Error('Request ' + method + ' timed out'));
-      }, 10000);
-
-      self.pendingRequests[id] = { resolve: resolve, reject: reject, timeout: timeout };
-
-      var targetOrigin = self.trustedOrigin || self.trustedOrigins[0];
-      window.parent.postMessage({ jsonrpc: '2.0', id: id, method: method, params: params }, targetOrigin);
-    });
-  },
-  performHandshake: function(context) {
-    var self = this;
-    var params = {
-      appInfo: { name: 'FrontMCP Widget', version: '1.0.0' },
-      appCapabilities: { tools: { listChanged: false } },
-      protocolVersion: '2024-11-05'
-    };
-
-    return this.sendRequest('ui/initialize', params).then(function(result) {
-      self.hostCapabilities = result.hostCapabilities || {};
-      self.capabilities = Object.assign({}, self.capabilities, {
-        canCallTools: Boolean(self.hostCapabilities.serverToolProxy),
-        canSendMessages: true,
-        canOpenLinks: Boolean(self.hostCapabilities.openLink),
-        supportsDisplayModes: true
-      });
-      if (result.hostContext) {
-        Object.assign(context.hostContext, result.hostContext);
-      }
-    });
-  },
-  callTool: function(context, name, args) {
-    if (!this.hostCapabilities.serverToolProxy) {
-      return Promise.reject(new Error('Server tool proxy not supported'));
-    }
-    return this.sendRequest('ui/callServerTool', { name: name, arguments: args });
-  },
-  sendMessage: function(context, content) {
-    return this.sendRequest('ui/message', { content: content });
-  },
-  openLink: function(context, url) {
-    if (!this.hostCapabilities.openLink) {
-      window.open(url, '_blank', 'noopener,noreferrer');
-      return Promise.resolve();
-    }
-    return this.sendRequest('ui/openLink', { url: url });
-  },
-  requestDisplayMode: function(context, mode) {
-    return this.sendRequest('ui/setDisplayMode', { mode: mode });
-  },
-  requestClose: function(context) {
-    return this.sendRequest('ui/close', {});
-  }
-};
-`.trim();
-}
-function generateClaudeAdapter() {
-  return `
-var ClaudeAdapter = {
-  id: 'claude',
-  name: 'Claude (Anthropic)',
-  priority: 60,
-  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
-    canCallTools: false,
-    canSendMessages: false,
-    canOpenLinks: true,
-    hasNetworkAccess: false,
-    supportsDisplayModes: false
-  }),
-  canHandle: function() {
-    if (typeof window === 'undefined') return false;
-    if (window.__mcpPlatform === 'claude') return true;
-    if (window.claude) return true;
-    if (window.__claudeArtifact) return true;
-    if (typeof location !== 'undefined') {
-      var href = location.href;
-      if (href.indexOf('claude.ai') !== -1 || href.indexOf('anthropic.com') !== -1) return true;
-    }
-    return false;
-  },
-  initialize: function(context) {
-    return Promise.resolve();
-  },
-  callTool: function() {
-    return Promise.reject(new Error('Tool calls not supported in Claude'));
-  },
-  sendMessage: function() {
-    return Promise.reject(new Error('Messages not supported in Claude'));
-  },
-  openLink: function(context, url) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-    return Promise.resolve();
-  },
-  requestDisplayMode: function() {
-    return Promise.resolve();
-  },
-  requestClose: function() {
-    return Promise.resolve();
-  }
-};
-`.trim();
-}
-function generateGeminiAdapter() {
-  return `
-var GeminiAdapter = {
-  id: 'gemini',
-  name: 'Google Gemini',
-  priority: 40,
-  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
-    canOpenLinks: true,
-    hasNetworkAccess: true
-  }),
-  canHandle: function() {
-    if (typeof window === 'undefined') return false;
-    if (window.__mcpPlatform === 'gemini') return true;
-    if (window.gemini) return true;
-    if (typeof location !== 'undefined') {
-      var href = location.href;
-      if (href.indexOf('gemini.google.com') !== -1 || href.indexOf('bard.google.com') !== -1) return true;
-    }
-    return false;
-  },
-  initialize: function(context) {
-    if (window.gemini && window.gemini.ui && window.gemini.ui.getTheme) {
-      context.hostContext.theme = window.gemini.ui.getTheme() === 'dark' ? 'dark' : 'light';
-    }
-    return Promise.resolve();
-  },
-  callTool: function() {
-    return Promise.reject(new Error('Tool calls not supported in Gemini'));
-  },
-  sendMessage: function(context, content) {
-    if (window.gemini && window.gemini.ui && window.gemini.ui.sendMessage) {
-      return window.gemini.ui.sendMessage(content);
-    }
-    return Promise.reject(new Error('Messages not supported in Gemini'));
-  },
-  openLink: function(context, url) {
-    if (window.gemini && window.gemini.ui && window.gemini.ui.openLink) {
-      return window.gemini.ui.openLink(url);
-    }
-    window.open(url, '_blank', 'noopener,noreferrer');
-    return Promise.resolve();
-  },
-  requestDisplayMode: function() {
-    return Promise.resolve();
-  },
-  requestClose: function() {
-    return Promise.resolve();
+  setWidgetState(state) {
+    const adapter = this._ensureInitialized();
+    adapter.setWidgetState(state);
   }
-};
-`.trim();
-}
-function generateGenericAdapter() {
-  return `
-var GenericAdapter = {
-  id: 'generic',
-  name: 'Generic Web',
-  priority: 0,
-  capabilities: Object.assign({}, DEFAULT_CAPABILITIES, {
-    canOpenLinks: true,
-    hasNetworkAccess: true
-  }),
-  canHandle: function() {
-    return typeof window !== 'undefined';
-  },
-  initialize: function(context) {
-    return Promise.resolve();
-  },
-  callTool: function() {
-    return Promise.reject(new Error('Tool calls not supported'));
-  },
-  sendMessage: function() {
-    return Promise.reject(new Error('Messages not supported'));
-  },
-  openLink: function(context, url) {
-    window.open(url, '_blank', 'noopener,noreferrer');
-    return Promise.resolve();
-  },
-  requestDisplayMode: function() {
-    return Promise.resolve();
-  },
-  requestClose: function() {
-    return Promise.resolve();
+  // ============================================
+  // Events (delegate to adapter)
+  // ============================================
+  /**
+   * Subscribe to host context changes.
+   * @param callback - Called when context changes
+   * @returns Unsubscribe function
+   */
+  onContextChange(callback) {
+    const adapter = this._ensureInitialized();
+    return adapter.onContextChange(callback);
   }
-};
-`.trim();
-}
-function generatePlatformDetection(adapters) {
-  const adapterVars = adapters.map((a) => {
-    switch (a) {
-      case "openai":
-        return "OpenAIAdapter";
-      case "ext-apps":
-        return "ExtAppsAdapter";
-      case "claude":
-        return "ClaudeAdapter";
-      case "gemini":
-        return "GeminiAdapter";
-      case "generic":
-        return "GenericAdapter";
-      default:
-        return "";
-    }
-  }).filter(Boolean);
-  return `
-var ADAPTERS = [${adapterVars.join(", ")}].sort(function(a, b) { return b.priority - a.priority; });
-
-function detectPlatform() {
-  for (var i = 0; i < ADAPTERS.length; i++) {
-    if (ADAPTERS[i].canHandle()) {
-      log('Detected platform: ' + ADAPTERS[i].id);
-      return ADAPTERS[i];
-    }
+  /**
+   * Subscribe to tool result updates.
+   * @param callback - Called when tool result is received
+   * @returns Unsubscribe function
+   */
+  onToolResult(callback) {
+    const adapter = this._ensureInitialized();
+    return adapter.onToolResult(callback);
   }
-  log('No platform detected, using generic');
-  return GenericAdapter;
-}
-`.trim();
-}
-function generateBridgeClass() {
-  return `
-function FrontMcpBridge() {
-  this._adapter = null;
-  this._initialized = false;
-  this._context = {
-    hostContext: {
-      theme: detectTheme(),
-      displayMode: 'inline',
-      locale: detectLocale(),
-      userAgent: detectUserAgent(),
-      safeArea: DEFAULT_SAFE_AREA,
-      viewport: detectViewport()
-    },
-    toolInput: {},
-    toolOutput: undefined,
-    structuredContent: undefined,
-    widgetState: {},
-    contextListeners: [],
-    toolResultListeners: [],
-    notifyContextChange: function(changes) {
-      Object.assign(this.hostContext, changes);
-      for (var i = 0; i < this.contextListeners.length; i++) {
-        try { this.contextListeners[i](changes); } catch(e) {}
-      }
-    },
-    notifyToolResult: function(result) {
-      this.toolOutput = result;
-      for (var i = 0; i < this.toolResultListeners.length; i++) {
-        try { this.toolResultListeners[i](result); } catch(e) {}
-      }
+  // ============================================
+  // Private Helpers
+  // ============================================
+  /**
+   * Ensure the bridge is initialized before operations.
+   * Returns the adapter for type-safe access.
+   */
+  _ensureInitialized() {
+    if (!this._initialized || !this._adapter) {
+      throw new Error("FrontMcpBridge is not initialized. Call initialize() first.");
     }
-  };
-
-  var injected = readInjectedData();
-  this._context.toolInput = injected.toolInput;
-  this._context.toolOutput = injected.toolOutput;
-  this._context.structuredContent = injected.structuredContent;
-
-  this._loadWidgetState();
-}
-
-FrontMcpBridge.prototype._loadWidgetState = function() {
-  try {
-    var key = 'frontmcp:widget:' + (window.__mcpToolName || 'unknown');
-    var stored = localStorage.getItem(key);
-    if (stored) this._context.widgetState = JSON.parse(stored);
-  } catch(e) {}
-};
-
-FrontMcpBridge.prototype._saveWidgetState = function() {
-  try {
-    var key = 'frontmcp:widget:' + (window.__mcpToolName || 'unknown');
-    localStorage.setItem(key, JSON.stringify(this._context.widgetState));
-  } catch(e) {}
-};
-
-FrontMcpBridge.prototype.initialize = function() {
-  if (this._initialized) return Promise.resolve();
-  var self = this;
-  this._adapter = detectPlatform();
-  return this._adapter.initialize(this._context).then(function() {
-    self._initialized = true;
-    // Set up the data-tool-call click handler after initialization
-    self._setupDataToolCallHandler();
-  });
-};
-
-Object.defineProperty(FrontMcpBridge.prototype, 'initialized', { get: function() { return this._initialized; } });
-Object.defineProperty(FrontMcpBridge.prototype, 'adapterId', { get: function() { return this._adapter ? this._adapter.id : undefined; } });
-Object.defineProperty(FrontMcpBridge.prototype, 'capabilities', { get: function() { return this._adapter ? this._adapter.capabilities : DEFAULT_CAPABILITIES; } });
-
-FrontMcpBridge.prototype.getTheme = function() { return this._context.hostContext.theme; };
-FrontMcpBridge.prototype.getDisplayMode = function() { return this._context.hostContext.displayMode; };
-FrontMcpBridge.prototype.getToolInput = function() { return this._context.toolInput; };
-FrontMcpBridge.prototype.getToolOutput = function() { return this._context.toolOutput; };
-FrontMcpBridge.prototype.getStructuredContent = function() { return this._context.structuredContent; };
-FrontMcpBridge.prototype.getWidgetState = function() { return this._context.widgetState; };
-FrontMcpBridge.prototype.getHostContext = function() { return Object.assign({}, this._context.hostContext); };
-FrontMcpBridge.prototype.hasCapability = function(cap) { return this._adapter && this._adapter.capabilities[cap] === true; };
-
-// Get tool response metadata (platform-agnostic)
-// Used by inline mode widgets to detect when ui/html arrives
-FrontMcpBridge.prototype.getToolResponseMetadata = function() {
-  // OpenAI injects toolResponseMetadata for widget-producing tools
-  if (typeof window !== 'undefined' && window.openai && window.openai.toolResponseMetadata) {
-    return window.openai.toolResponseMetadata;
-  }
-  // Claude (future support)
-  if (typeof window !== 'undefined' && window.claude && window.claude.toolResponseMetadata) {
-    return window.claude.toolResponseMetadata;
-  }
-  // FrontMCP direct injection (for testing/ext-apps)
-  if (typeof window !== 'undefined' && window.__mcpToolResponseMetadata) {
-    return window.__mcpToolResponseMetadata;
-  }
-  return null;
-};
-
-// Subscribe to tool response metadata changes (for inline mode injection)
-FrontMcpBridge.prototype.onToolResponseMetadata = function(callback) {
-  var self = this;
-  var called = false;
-
-  // Check if already available
-  var existing = self.getToolResponseMetadata();
-  if (existing) {
-    called = true;
-    callback(existing);
+    return this._adapter;
   }
-
-  // Set up property interceptors for OpenAI
-  if (typeof window !== 'undefined') {
-    // OpenAI: Intercept toolResponseMetadata assignment
-    if (!window.__frontmcpMetadataIntercepted) {
-      window.__frontmcpMetadataIntercepted = true;
-      window.__frontmcpMetadataCallbacks = [];
-
-      // Create openai object if it doesn't exist
-      if (!window.openai) window.openai = {};
-
-      var originalMetadata = window.openai.toolResponseMetadata;
-      Object.defineProperty(window.openai, 'toolResponseMetadata', {
-        get: function() { return originalMetadata; },
-        set: function(val) {
-          originalMetadata = val;
-          log('toolResponseMetadata set, notifying ' + window.__frontmcpMetadataCallbacks.length + ' listeners');
-          for (var i = 0; i < window.__frontmcpMetadataCallbacks.length; i++) {
-            try { window.__frontmcpMetadataCallbacks[i](val); } catch(e) {}
-          }
-        },
-        configurable: true
+  /**
+   * Wrap a promise with a timeout.
+   */
+  _withTimeout(promise, ms) {
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error(`Operation timed out after ${ms}ms`));
+      }, ms);
+      promise.then((result) => {
+        clearTimeout(timer);
+        resolve(result);
+      }).catch((error) => {
+        clearTimeout(timer);
+        reject(error);
       });
-    }
-
-    // Register callback wrapper (store reference for unsubscribe)
-    var wrapper = function(metadata) {
-      if (!called) {
-        called = true;
-        callback(metadata);
-      }
-    };
-    window.__frontmcpMetadataCallbacks.push(wrapper);
-
-    // Return unsubscribe function that removes the wrapper (not the original callback)
-    return function() {
-      if (window.__frontmcpMetadataCallbacks) {
-        var idx = window.__frontmcpMetadataCallbacks.indexOf(wrapper);
-        if (idx !== -1) window.__frontmcpMetadataCallbacks.splice(idx, 1);
-      }
-    };
-  }
-
-  // Return no-op unsubscribe for non-window environments
-  return function() {};
-};
-
-FrontMcpBridge.prototype.callTool = function(name, args) {
-  // Priority 1: Direct OpenAI SDK call (most reliable in OpenAI iframe)
-  // This bypasses adapter abstraction for maximum compatibility
-  if (typeof window !== 'undefined' && window.openai && typeof window.openai.callTool === 'function') {
-    log('callTool: Using OpenAI SDK directly');
-    return window.openai.callTool(name, args);
-  }
-
-  // Priority 2: Use adapter (if initialized and supports tool calls)
-  if (this._adapter && this._adapter.capabilities && this._adapter.capabilities.canCallTools) {
-    log('callTool: Using adapter ' + this._adapter.id);
-    return this._adapter.callTool(this._context, name, args);
-  }
-
-  // Not initialized or no tool support
-  if (!this._adapter) {
-    return Promise.reject(new Error('Bridge not initialized. Wait for bridge:ready event.'));
+    });
   }
-  return Promise.reject(new Error('Tool calls not supported on this platform (' + this._adapter.id + ')'));
-};
-
-FrontMcpBridge.prototype.sendMessage = function(content) {
-  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
-  return this._adapter.sendMessage(this._context, content);
-};
-
-FrontMcpBridge.prototype.openLink = function(url) {
-  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
-  return this._adapter.openLink(this._context, url);
-};
-
-FrontMcpBridge.prototype.requestDisplayMode = function(mode) {
-  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
-  var self = this;
-  return this._adapter.requestDisplayMode(this._context, mode).then(function() {
-    self._context.hostContext.displayMode = mode;
-  });
-};
-
-FrontMcpBridge.prototype.requestClose = function() {
-  if (!this._adapter) return Promise.reject(new Error('Not initialized'));
-  return this._adapter.requestClose(this._context);
-};
-
-FrontMcpBridge.prototype.setWidgetState = function(state) {
-  Object.assign(this._context.widgetState, state);
-  this._saveWidgetState();
-};
-
-FrontMcpBridge.prototype.onContextChange = function(callback) {
-  var listeners = this._context.contextListeners;
-  listeners.push(callback);
-  return function() {
-    var idx = listeners.indexOf(callback);
-    if (idx !== -1) listeners.splice(idx, 1);
-  };
-};
-
-FrontMcpBridge.prototype.onToolResult = function(callback) {
-  var listeners = this._context.toolResultListeners;
-  listeners.push(callback);
-  return function() {
-    var idx = listeners.indexOf(callback);
-    if (idx !== -1) listeners.splice(idx, 1);
-  };
-};
-
-// ==================== data-tool-call Click Handler ====================
-
-FrontMcpBridge.prototype._setupDataToolCallHandler = function() {
-  var self = this;
-
-  document.addEventListener('click', function(e) {
-    // Find the closest element with data-tool-call attribute
-    var target = e.target;
-    while (target && target !== document) {
-      if (target.hasAttribute && target.hasAttribute('data-tool-call')) {
-        var toolName = target.getAttribute('data-tool-call');
-        var argsAttr = target.getAttribute('data-tool-args');
-        var args = {};
-
-        try {
-          if (argsAttr) {
-            args = JSON.parse(argsAttr);
-          }
-        } catch (parseErr) {
-          console.error('[frontmcp] Failed to parse data-tool-args:', parseErr);
-        }
-
-        log('data-tool-call clicked: ' + toolName);
-
-        // Show loading state - save original content first
-        var originalContent = target.innerHTML;
-        var originalDisabled = target.disabled;
-        target.disabled = true;
-        target.classList.add('opacity-50', 'cursor-not-allowed');
-
-        // Add spinner for buttons
-        var spinner = '<svg class="animate-spin -ml-1 mr-2 h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" 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>';
-        if (target.tagName === 'BUTTON') {
-          target.innerHTML = spinner + 'Loading...';
-        }
-
-        // Helper to reset button state
-        function resetButton() {
-          target.innerHTML = originalContent;
-          target.disabled = originalDisabled;
-          target.classList.remove('opacity-50', 'cursor-not-allowed');
-        }
-
-        // Determine how to call the tool
-        var toolCallPromise;
-
-        // Priority 1: Direct OpenAI SDK call (bypasses adapter abstraction)
-        if (typeof window !== 'undefined' && window.openai && typeof window.openai.callTool === 'function') {
-          log('Using OpenAI SDK directly for tool call');
-          toolCallPromise = window.openai.callTool(toolName, args);
-        }
-        // Priority 2: Use adapter (if it supports tool calls)
-        else if (self.hasCapability('canCallTools')) {
-          log('Using adapter for tool call');
-          toolCallPromise = self.callTool(toolName, args);
-        }
-        // No tool call capability
-        else {
-          console.error('[frontmcp] Tool calls not supported on this platform (' + self.adapterId + ')');
-          resetButton();
-          target.dispatchEvent(new CustomEvent('tool:error', {
-            detail: { name: toolName, args: args, error: 'Tool calls not supported on this platform' },
-            bubbles: true
-          }));
-          e.preventDefault();
-          return;
-        }
-
-        // Handle the tool call result
-        toolCallPromise.then(function(result) {
-          log('Tool call succeeded: ' + toolName);
-          resetButton();
-
-          // Update bridge state to trigger widget re-render
-          // React isn't hydrated in OpenAI iframe, so useState doesn't work
-          // Instead, we use the bridge's reactive state system
-          if (result && window.__frontmcp && window.__frontmcp.bridge && typeof window.__frontmcp.bridge.setWidgetState === 'function') {
-            var newData = result.structuredContent || result;
-            log('Updating bridge state with new data');
-            window.__frontmcp.bridge.setWidgetState(newData);
-          }
-
-          // Dispatch success event
-          target.dispatchEvent(new CustomEvent('tool:success', {
-            detail: { name: toolName, args: args, result: result },
-            bubbles: true
-          }));
-        }).catch(function(err) {
-          console.error('[frontmcp] Tool call failed: ' + toolName, err);
-          resetButton();
-          // Dispatch error event
-          target.dispatchEvent(new CustomEvent('tool:error', {
-            detail: { name: toolName, args: args, error: err.message || err },
-            bubbles: true
-          }));
-        });
-
-        // Prevent default behavior (e.g., form submission)
-        e.preventDefault();
-        return;
+  /**
+   * Emit a bridge event via CustomEvent.
+   */
+  _emitEvent(type, payload) {
+    if (typeof window !== "undefined" && typeof CustomEvent !== "undefined") {
+      try {
+        const event = new CustomEvent(type, { detail: payload });
+        window.dispatchEvent(event);
+      } catch {
       }
-      target = target.parentElement;
     }
-  }, true); // Use capture phase to handle before React handlers
+  }
+  /**
+   * Log debug message if debugging is enabled.
+   */
+  _log(message) {
+    if (this._config.debug) {
+      console.log(`[FrontMcpBridge] ${message}`);
+    }
+  }
 };
-`.trim();
-}
-function minifyJS(code) {
-  return code.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/.*$/gm, "").replace(/\s+/g, " ").replace(/\s*([{};,:()[\]])\s*/g, "$1").replace(/;\}/g, "}").trim();
-}
-function generatePlatformBundle(platform, options = {}) {
-  const platformAdapters = {
-    chatgpt: ["openai", "generic"],
-    claude: ["claude", "generic"],
-    gemini: ["gemini", "generic"],
-    universal: ["openai", "ext-apps", "claude", "gemini", "generic"]
-  };
-  return generateBridgeIIFE({
-    ...options,
-    adapters: platformAdapters[platform]
-  });
+async function createBridge(config, registry) {
+  const bridge = new FrontMcpBridge(config, registry);
+  await bridge.initialize();
+  return bridge;
 }
-var UNIVERSAL_BRIDGE_SCRIPT = generateBridgeIIFE();
-var BRIDGE_SCRIPT_TAGS = {
-  universal: `<script>${UNIVERSAL_BRIDGE_SCRIPT}</script>`,
-  chatgpt: `<script>${generatePlatformBundle("chatgpt")}</script>`,
-  claude: `<script>${generatePlatformBundle("claude")}</script>`,
-  gemini: `<script>${generatePlatformBundle("gemini")}</script>`
-};
+
+// libs/ui/src/bridge/runtime/index.ts
+var import_uipack = require("@frontmcp/uipack");
 
 // libs/ui/src/web-components/core/base-element.ts
 var import_validation2 = require("@frontmcp/uipack/validation");
@@ -7331,15 +4488,6 @@ function renderToStringSync(element) {
   const ReactDOMServer = require("react-dom/server");
   return ReactDOMServer.renderToStaticMarkup(element);
 }
-function isReactAvailable() {
-  try {
-    require("react");
-    require("react-dom/server");
-    return true;
-  } catch {
-    return false;
-  }
-}
 
 // libs/ui/src/react/Card.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -7902,51 +5050,19 @@ function useOpenLink() {
   );
 }
 
-// libs/ui/src/react/utils.ts
-var import_utils3 = require("@frontmcp/uipack/utils");
-var cachedReactDOMServer = null;
-function getReactDOMServer() {
-  if (!cachedReactDOMServer) {
-    try {
-      cachedReactDOMServer = require("react-dom/server");
-    } catch {
-      return null;
-    }
-  }
-  return cachedReactDOMServer;
+// libs/ui/src/renderers/react.renderer.ts
+var import_renderers = require("@frontmcp/uipack/renderers");
+var VALID_JS_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+function isValidComponentName(name) {
+  return VALID_JS_IDENTIFIER.test(name);
 }
-function renderChildrenToString(children) {
-  if (children == null) {
-    return "";
-  }
-  if (typeof children === "string") {
-    return (0, import_utils3.escapeHtml)(children);
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if (typeof children === "boolean") {
-    return "";
-  }
-  try {
-    const server = getReactDOMServer();
-    if (server) {
-      return server.renderToStaticMarkup(children);
-    }
-    return String(children);
-  } catch {
-    return String(children);
+function sanitizeComponentName(name) {
+  if (isValidComponentName(name)) {
+    return name;
   }
+  const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/^[0-9]/, "_$&");
+  return sanitized || "Component";
 }
-function isBrowser() {
-  return typeof window !== "undefined";
-}
-function isServer() {
-  return typeof window === "undefined";
-}
-
-// libs/ui/src/renderers/react.renderer.ts
-var import_renderers = require("@frontmcp/uipack/renderers");
 var REACT_CDN = {
   react: "https://esm.sh/react@19",
   reactDom: "https://esm.sh/react-dom@19/client"
@@ -7960,13 +5076,6 @@ var ReactRenderer = class {
   type = "react";
   priority = 20;
   // Higher priority than HTML
-  /**
-   * Lazy-loaded React modules.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React = null;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ReactDOMServer = null;
   /**
    * Check if this renderer can handle the given template.
    *
@@ -8007,46 +5116,109 @@ var ReactRenderer = class {
     throw new Error("Invalid template type for ReactRenderer");
   }
   /**
-   * Render the template to HTML string using react-dom/server.
+   * Render the template to HTML for client-side rendering.
+   *
+   * Unlike SSR, this method generates HTML that will be rendered
+   * client-side by React in the browser. No server-side React required.
+   *
+   * The generated HTML includes:
+   * - A container div for the React root
+   * - The component code (transpiled if needed)
+   * - Props embedded as a data attribute
+   * - A render script that initializes the component
    */
-  async render(template, context, options) {
-    await this.loadReact();
-    let Component;
+  async render(template, context, _options) {
+    const props = {
+      input: context.input,
+      output: context.output,
+      structuredContent: context.structuredContent,
+      helpers: context.helpers
+    };
+    const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const rootId = `frontmcp-react-${(0, import_renderers.hashString)(Date.now().toString()).slice(0, 8)}`;
+    let componentCode;
+    let componentName;
     if (typeof template === "function") {
-      Component = template;
+      const rawName = template.name || "Component";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = `
+        // Component should be registered via window.__frontmcp_components['${componentName}']
+        (function() {
+          if (!window.__frontmcp_components || !window.__frontmcp_components['${componentName}']) {
+            console.error('[FrontMCP] Component "${componentName}" not registered. Use buildHydrationScript() to register components.');
+          }
+        })();
+      `;
     } else if (typeof template === "string") {
       const transpiled = await this.transpile(template);
-      const cached = import_renderers.transpileCache.getByKey(`exec:${transpiled.hash}`);
-      if (cached) {
-        Component = cached.code;
-      } else {
-        Component = await (0, import_renderers.executeTranspiledCode)(transpiled.code, {
-          // Provide any additional MDX components if specified
-          ...options?.mdxComponents
-        });
-        import_renderers.transpileCache.setByKey(`exec:${transpiled.hash}`, {
-          code: Component,
-          hash: transpiled.hash,
-          cached: false
-        });
-      }
+      const match = transpiled.code.match(/function\s+(\w+)/);
+      const rawName = match?.[1] || "Widget";
+      componentName = sanitizeComponentName(rawName);
+      componentCode = transpiled.code;
     } else {
       throw new Error("Invalid template type for ReactRenderer");
     }
-    const props = {
-      input: context.input,
-      output: context.output,
-      structuredContent: context.structuredContent,
-      helpers: context.helpers
+    const html = `
+<div id="${rootId}" data-frontmcp-react data-component="${componentName}" data-props='${escapedProps}'>
+  <div class="flex items-center justify-center p-4 text-gray-500">
+    <svg class="animate-spin h-5 w-5 mr-2" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"></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>
+    Loading...
+  </div>
+</div>
+<script type="module">
+(function() {
+  ${componentCode}
+
+  // Wait for React to be available
+  function waitForReact(callback, maxAttempts) {
+    var attempts = 0;
+    var check = function() {
+      if (typeof React !== 'undefined' && typeof ReactDOM !== 'undefined') {
+        callback();
+      } else if (attempts < maxAttempts) {
+        attempts++;
+        setTimeout(check, 50);
+      } else {
+        console.error('[FrontMCP] React not loaded after ' + maxAttempts + ' attempts');
+      }
     };
-    const element = this.React.createElement(Component, props);
-    const html = this.ReactDOMServer.renderToString(element);
-    if (options?.hydrate) {
-      const componentName = Component.name || "Component";
-      const escapedProps = JSON.stringify(props).replace(/&/g, "&amp;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-      return `<div data-hydrate="${componentName}" data-props='${escapedProps}'>${html}</div>`;
+    check();
+  }
+
+  waitForReact(function() {
+    try {
+      var root = document.getElementById('${rootId}');
+      if (!root) return;
+
+      var propsJson = root.getAttribute('data-props');
+      var props = propsJson ? JSON.parse(propsJson.replace(/&amp;/g, '&').replace(/&#39;/g, "'").replace(/&lt;/g, '<').replace(/&gt;/g, '>')) : {};
+
+      // Get the component
+      var Component = ${componentName};
+
+      // Check if it's registered globally
+      if (typeof Component === 'undefined' && window.__frontmcp_components) {
+        Component = window.__frontmcp_components['${componentName}'];
+      }
+
+      if (typeof Component === 'function') {
+        var element = React.createElement(Component, props);
+        var reactRoot = ReactDOM.createRoot(root);
+        reactRoot.render(element);
+      } else {
+        console.error('[FrontMCP] Component "${componentName}" not found');
+      }
+    } catch (err) {
+      console.error('[FrontMCP] React render error:', err);
     }
-    return html;
+  }, 100);
+})();
+</script>
+`;
+    return html.trim();
   }
   /**
    * Get runtime scripts for client-side functionality.
@@ -8067,54 +5239,8 @@ var ReactRenderer = class {
       isInline: false
     };
   }
-  /**
-   * Load React and ReactDOMServer modules.
-   */
-  async loadReact() {
-    if (this.React && this.ReactDOMServer) {
-      return;
-    }
-    try {
-      this.React = await import("react");
-      this.ReactDOMServer = await import("react-dom/server");
-    } catch {
-      throw new Error("React is required for ReactRenderer. Install react and react-dom: npm install react react-dom");
-    }
-  }
 };
 var reactRenderer = new ReactRenderer();
-function buildHydrationScript() {
-  return `
-<script>
-(function() {
-  // Wait for React to be available
-  if (typeof React === 'undefined' || typeof ReactDOM === 'undefined') {
-    console.warn('[FrontMCP] React not available for hydration');
-    return;
-  }
-
-  // Find all elements marked for hydration
-  document.querySelectorAll('[data-hydrate]').forEach(function(root) {
-    var componentName = root.getAttribute('data-hydrate');
-    var propsJson = root.getAttribute('data-props');
-    var props = propsJson ? JSON.parse(propsJson) : {};
-
-    // Look for the component in the global scope
-    if (window.__frontmcp_components && window.__frontmcp_components[componentName]) {
-      try {
-        ReactDOM.hydrateRoot(root, React.createElement(
-          window.__frontmcp_components[componentName],
-          props
-        ));
-      } catch (e) {
-        console.error('[FrontMCP] Hydration failed for', componentName, e);
-      }
-    }
-  });
-})();
-</script>
-`;
-}
 
 // libs/ui/src/renderers/react.adapter.ts
 var mountedRoots = /* @__PURE__ */ new WeakMap();
@@ -8404,22 +5530,15 @@ async function loadReactAdapter() {
   badgeGroup,
   baseLayout,
   betaBadge,
-  buildHydrationScript,
   busyDot,
   button,
   buttonGroup,
   card,
   cardGroup,
   checkbox,
-  circularProgress,
-  codePreview,
   confirmModal,
-  consentDeniedPage,
   consentLayout,
   consentLayoutBuilder,
-  consentPage,
-  consentSuccessPage,
-  contentSkeleton,
   createBridge,
   createLayoutBuilder,
   createReactAdapter,
@@ -8432,10 +5551,8 @@ async function loadReactAdapter() {
   errorBadge,
   errorLayout,
   errorLayoutBuilder,
-  errorPage,
   escapeHtml,
   featureList,
-  forbiddenPage,
   form,
   formActions,
   formRow,
@@ -8444,33 +5561,23 @@ async function loadReactAdapter() {
   generatePlatformBundle,
   ghostButton,
   hiddenInput,
-  imagePreview,
   inactiveBadge,
   infoAlert,
   input,
-  isBrowser,
-  isReactAvailable,
-  isServer,
   linkButton,
   loadReactAdapter,
   loadingLayout,
-  maintenancePage,
   modal,
   modalTrigger,
   newBadge,
-  notFoundPage,
-  oauthErrorPage,
   offlineDot,
-  offlinePage,
   onlineDot,
   outlineButton,
   pagination,
   pendingBadge,
   permissionList,
   primaryButton,
-  progressBar,
   radioGroup,
-  rateLimitPage,
   reactRenderer,
   registerAdapter,
   registerAllComponents,
@@ -8488,26 +5595,14 @@ async function loadReactAdapter() {
   renderButtonSync,
   renderCard,
   renderCardSync,
-  renderChildrenToString,
-  renderToString,
-  renderToStringSync,
-  resourceItem,
-  resourceList,
-  resourceWidget,
   secondaryButton,
   select,
-  serverErrorPage,
-  sessionExpiredPage,
-  skeleton,
-  statusIndicator,
-  stepProgress,
   successAlert,
   successLayout,
   table,
   textarea,
   toast,
   toastContainer,
-  unauthorizedPage,
   useCallTool,
   useCapability,
   useDisplayMode,