@frontmcp/ui 0.12.2 → 1.0.0-beta.1

package/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,183 +15,21 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // libs/ui/src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  ActionItemSchema: () => ActionItemSchema,
-  ActionListOptionsSchema: () => ActionListOptionsSchema,
   AdapterRegistry: () => AdapterRegistry,
-  Alert: () => Alert,
-  AlertOptionsSchema: () => AlertOptionsSchema,
-  AlertVariantSchema: () => AlertVariantSchema,
-  AvatarGroupOptionsSchema: () => AvatarGroupOptionsSchema,
-  AvatarOptionsSchema: () => AvatarOptionsSchema,
-  AvatarShapeSchema: () => AvatarShapeSchema,
-  AvatarSizeSchema: () => AvatarSizeSchema,
-  AvatarSpacingSchema: () => AvatarSpacingSchema,
-  AvatarStatusSchema: () => AvatarStatusSchema,
-  AvatarWithTextOptionsSchema: () => AvatarWithTextOptionsSchema,
   BRIDGE_SCRIPT_TAGS: () => import_uipack.BRIDGE_SCRIPT_TAGS,
-  Badge: () => Badge,
-  BadgeGroupOptionsSchema: () => BadgeGroupOptionsSchema,
-  BadgeOptionsSchema: () => BadgeOptionsSchema,
-  BadgeSizeSchema: () => BadgeSizeSchema,
-  BadgeVariantSchema: () => BadgeVariantSchema,
-  Button: () => Button,
-  ButtonGroupOptionsSchema: () => ButtonGroupOptionsSchema,
-  ButtonOptionsSchema: () => ButtonOptionsSchema,
-  ButtonSizeSchema: () => ButtonSizeSchema,
-  ButtonVariantSchema: () => ButtonVariantSchema,
-  Card: () => Card,
-  CardGroupOptionsSchema: () => CardGroupOptionsSchema,
-  CardOptionsSchema: () => CardOptionsSchema,
-  CardSizeSchema: () => CardSizeSchema,
-  CardVariantSchema: () => CardVariantSchema,
-  CheckboxOptionsSchema: () => CheckboxOptionsSchema,
-  ConfirmModalOptionsSchema: () => ConfirmModalOptionsSchema,
-  ConfirmModalVariantSchema: () => ConfirmModalVariantSchema,
-  DescriptionItemSchema: () => DescriptionItemSchema,
-  DescriptionListOptionsSchema: () => DescriptionListOptionsSchema,
-  DrawerOptionsSchema: () => DrawerOptionsSchema,
-  DrawerPositionSchema: () => DrawerPositionSchema,
-  FeatureItemSchema: () => FeatureItemSchema,
-  FeatureListOptionsSchema: () => FeatureListOptionsSchema,
-  FmcpAlert: () => FmcpAlert,
-  FmcpBadge: () => FmcpBadge,
-  FmcpButton: () => FmcpButton,
-  FmcpCard: () => FmcpCard,
-  FmcpElement: () => FmcpElement,
-  FmcpInput: () => FmcpInput,
-  FmcpSelect: () => FmcpSelect,
-  FormActionsOptionsSchema: () => FormActionsOptionsSchema,
-  FormEnctypeSchema: () => FormEnctypeSchema,
-  FormMethodSchema: () => FormMethodSchema,
-  FormOptionsSchema: () => FormOptionsSchema,
-  FormRowOptionsSchema: () => FormRowOptionsSchema,
-  FormSectionOptionsSchema: () => FormSectionOptionsSchema,
   FrontMcpBridge: () => FrontMcpBridge,
-  InputOptionsSchema: () => InputOptionsSchema,
-  InputSizeSchema: () => InputSizeSchema,
-  InputStateSchema: () => InputStateSchema,
-  InputTypeSchema: () => InputTypeSchema,
   McpBridgeProvider: () => McpBridgeProvider,
-  ModalOptionsSchema: () => ModalOptionsSchema,
-  ModalSizeSchema: () => ModalSizeSchema,
-  ModalTriggerOptionsSchema: () => ModalTriggerOptionsSchema,
-  PaginationOptionsSchema: () => PaginationOptionsSchema,
-  PermissionItemSchema: () => PermissionItemSchema,
-  PermissionListOptionsSchema: () => PermissionListOptionsSchema,
-  RadioGroupOptionsSchema: () => RadioGroupOptionsSchema,
-  RadioOptionItemSchema: () => RadioOptionItemSchema,
-  ReactRenderer: () => ReactRenderer,
-  ReactRendererAdapter: () => ReactRendererAdapter,
-  SelectOptionItemSchema: () => SelectOptionItemSchema,
-  SelectOptionsSchema: () => SelectOptionsSchema,
-  TableAlignSchema: () => TableAlignSchema,
-  TableColumnSchema: () => TableColumnSchema,
-  TableOptionsSchema: () => TableOptionsSchema,
-  TableSortDirectionSchema: () => TableSortDirectionSchema,
-  TextareaOptionsSchema: () => TextareaOptionsSchema,
-  TextareaResizeSchema: () => TextareaResizeSchema,
-  ToastOptionsSchema: () => ToastOptionsSchema,
-  ToastPositionSchema: () => ToastPositionSchema,
   UNIVERSAL_BRIDGE_SCRIPT: () => import_uipack.UNIVERSAL_BRIDGE_SCRIPT,
-  actionList: () => actionList,
-  activeBadge: () => activeBadge,
-  alert: () => alert,
-  authLayout: () => authLayout,
-  authLayoutBuilder: () => authLayoutBuilder,
-  avatar: () => avatar,
-  avatarGroup: () => avatarGroup,
-  avatarWithText: () => avatarWithText,
-  awayDot: () => awayDot,
-  badge: () => badge,
-  badgeGroup: () => badgeGroup,
-  baseLayout: () => baseLayout,
-  betaBadge: () => betaBadge,
-  busyDot: () => busyDot,
-  button: () => button,
-  buttonGroup: () => buttonGroup,
-  card: () => card,
-  cardGroup: () => cardGroup,
-  checkbox: () => checkbox,
-  confirmModal: () => confirmModal,
-  consentLayout: () => consentLayout,
-  consentLayoutBuilder: () => consentLayoutBuilder,
   createBridge: () => createBridge,
-  createLayoutBuilder: () => createLayoutBuilder,
-  createReactAdapter: () => createReactAdapter,
-  csrfInput: () => csrfInput,
-  dangerAlert: () => dangerAlert,
-  dangerButton: () => dangerButton,
   defaultRegistry: () => defaultRegistry,
-  descriptionList: () => descriptionList,
-  drawer: () => drawer,
-  errorBadge: () => errorBadge,
-  errorLayout: () => errorLayout,
-  errorLayoutBuilder: () => errorLayoutBuilder,
-  escapeHtml: () => import_utils2.escapeHtml,
-  featureList: () => featureList,
-  form: () => form,
-  formActions: () => formActions,
-  formRow: () => formRow,
-  formSection: () => formSection,
   generateBridgeIIFE: () => import_uipack.generateBridgeIIFE,
   generatePlatformBundle: () => import_uipack.generatePlatformBundle,
-  ghostButton: () => ghostButton,
-  hiddenInput: () => hiddenInput,
-  inactiveBadge: () => inactiveBadge,
-  infoAlert: () => infoAlert,
-  input: () => input,
-  linkButton: () => linkButton,
-  loadReactAdapter: () => loadReactAdapter,
-  loadingLayout: () => loadingLayout,
-  modal: () => modal,
-  modalTrigger: () => modalTrigger,
-  newBadge: () => newBadge,
-  offlineDot: () => offlineDot,
-  onlineDot: () => onlineDot,
-  outlineButton: () => outlineButton,
-  pagination: () => pagination,
-  pendingBadge: () => pendingBadge,
-  permissionList: () => permissionList,
-  primaryButton: () => primaryButton,
-  radioGroup: () => radioGroup,
-  reactRenderer: () => reactRenderer,
   registerAdapter: () => registerAdapter,
-  registerAllComponents: () => registerAllComponents,
-  registerFmcpAlert: () => registerFmcpAlert,
-  registerFmcpBadge: () => registerFmcpBadge,
-  registerFmcpButton: () => registerFmcpButton,
-  registerFmcpCard: () => registerFmcpCard,
-  registerFmcpInput: () => registerFmcpInput,
-  registerFmcpSelect: () => registerFmcpSelect,
-  renderAlert: () => renderAlert,
-  renderAlertSync: () => renderAlertSync,
-  renderBadge: () => renderBadge,
-  renderBadgeSync: () => renderBadgeSync,
-  renderButton: () => renderButton,
-  renderButtonSync: () => renderButtonSync,
-  renderCard: () => renderCard,
-  renderCardSync: () => renderCardSync,
-  secondaryButton: () => secondaryButton,
-  select: () => select,
-  successAlert: () => successAlert,
-  successLayout: () => successLayout,
-  table: () => table,
-  textarea: () => textarea,
-  toast: () => toast,
-  toastContainer: () => toastContainer,
   useCallTool: () => useCallTool,
   useCapability: () => useCapability,
   useDisplayMode: () => useDisplayMode,
@@ -206,2718 +42,10 @@ __export(index_exports, {
   useTheme: () => useTheme,
   useToolCalls: () => useToolCalls,
   useToolInput: () => useToolInput,
-  useToolOutput: () => useToolOutput,
-  warningAlert: () => warningAlert,
-  widgetLayout: () => widgetLayout
+  useToolOutput: () => useToolOutput
 });
 module.exports = __toCommonJS(index_exports);
 
-// libs/ui/src/components/button.schema.ts
-var import_zod = require("zod");
-var ButtonVariantSchema = import_zod.z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
-var ButtonSizeSchema = import_zod.z.enum(["xs", "sm", "md", "lg", "xl"]);
-var ButtonOptionsSchema = import_zod.z.object({
-  /** Button variant */
-  variant: ButtonVariantSchema.optional(),
-  /** Button size */
-  size: ButtonSizeSchema.optional(),
-  /** Button type attribute */
-  type: import_zod.z.enum(["button", "submit", "reset"]).optional(),
-  /** Disabled state */
-  disabled: import_zod.z.boolean().optional(),
-  /** Loading state */
-  loading: import_zod.z.boolean().optional(),
-  /** Full width */
-  fullWidth: import_zod.z.boolean().optional(),
-  /** Icon before text (HTML string) */
-  iconBefore: import_zod.z.string().optional(),
-  /** Icon after text (HTML string) */
-  iconAfter: import_zod.z.string().optional(),
-  /** Icon only (no text) */
-  iconOnly: import_zod.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod.z.string().optional(),
-  /** Button ID */
-  id: import_zod.z.string().optional(),
-  /** Name attribute */
-  name: import_zod.z.string().optional(),
-  /** Value attribute */
-  value: import_zod.z.string().optional(),
-  /** Click handler (URL for links) */
-  href: import_zod.z.string().optional(),
-  /** Open in new tab */
-  target: import_zod.z.enum(["_blank", "_self"]).optional(),
-  /** Data attributes */
-  data: import_zod.z.record(import_zod.z.string(), import_zod.z.string()).optional(),
-  /** ARIA label */
-  ariaLabel: import_zod.z.string().optional()
-}).strict();
-var ButtonGroupOptionsSchema = import_zod.z.object({
-  /** Attach buttons visually */
-  attached: import_zod.z.boolean().optional(),
-  /** Direction */
-  direction: import_zod.z.enum(["horizontal", "vertical"]).optional(),
-  /** Gap between buttons */
-  gap: import_zod.z.enum(["sm", "md", "lg"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/card.schema.ts
-var import_zod2 = require("zod");
-var CardVariantSchema = import_zod2.z.enum(["default", "outlined", "elevated", "filled", "ghost"]);
-var CardSizeSchema = import_zod2.z.enum(["sm", "md", "lg"]);
-var CardOptionsSchema = import_zod2.z.object({
-  /** Card variant */
-  variant: CardVariantSchema.optional(),
-  /** Card size (padding) */
-  size: CardSizeSchema.optional(),
-  /** Card title */
-  title: import_zod2.z.string().optional(),
-  /** Card subtitle/description */
-  subtitle: import_zod2.z.string().optional(),
-  /** Header actions (HTML string) */
-  headerActions: import_zod2.z.string().optional(),
-  /** Footer content (HTML string) */
-  footer: import_zod2.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod2.z.string().optional(),
-  /** Card ID */
-  id: import_zod2.z.string().optional(),
-  /** Data attributes */
-  data: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.string()).optional(),
-  /** Clickable card (adds hover effects) */
-  clickable: import_zod2.z.boolean().optional(),
-  /** Click handler URL */
-  href: import_zod2.z.string().optional()
-}).strict();
-var CardGroupOptionsSchema = import_zod2.z.object({
-  /** Direction */
-  direction: import_zod2.z.enum(["horizontal", "vertical"]).optional(),
-  /** Gap between cards */
-  gap: import_zod2.z.enum(["sm", "md", "lg"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod2.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/badge.schema.ts
-var import_zod3 = require("zod");
-var BadgeVariantSchema = import_zod3.z.enum([
-  "default",
-  "primary",
-  "secondary",
-  "success",
-  "warning",
-  "danger",
-  "info",
-  "outline"
-]);
-var BadgeSizeSchema = import_zod3.z.enum(["sm", "md", "lg"]);
-var BadgeOptionsSchema = import_zod3.z.object({
-  /** Badge variant */
-  variant: BadgeVariantSchema.optional(),
-  /** Badge size */
-  size: BadgeSizeSchema.optional(),
-  /** Rounded pill style */
-  pill: import_zod3.z.boolean().optional(),
-  /** Icon before text (HTML string) */
-  icon: import_zod3.z.string().optional(),
-  /** Dot indicator (no text) */
-  dot: import_zod3.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod3.z.string().optional(),
-  /** Removable badge */
-  removable: import_zod3.z.boolean().optional()
-}).strict();
-var BadgeGroupOptionsSchema = import_zod3.z.object({
-  /** Gap between badges */
-  gap: import_zod3.z.enum(["sm", "md", "lg"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod3.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/alert.schema.ts
-var import_zod4 = require("zod");
-var AlertVariantSchema = import_zod4.z.enum(["info", "success", "warning", "danger", "neutral"]);
-var AlertOptionsSchema = import_zod4.z.object({
-  /** Alert variant */
-  variant: AlertVariantSchema.optional(),
-  /** Alert title */
-  title: import_zod4.z.string().optional(),
-  /** Show icon */
-  showIcon: import_zod4.z.boolean().optional(),
-  /** Custom icon (HTML string, overrides default) */
-  icon: import_zod4.z.string().optional(),
-  /** Dismissible alert */
-  dismissible: import_zod4.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod4.z.string().optional(),
-  /** Alert ID */
-  id: import_zod4.z.string().optional(),
-  /** Actions (HTML string for buttons) */
-  actions: import_zod4.z.string().optional()
-}).strict();
-var ToastPositionSchema = import_zod4.z.enum([
-  "top-right",
-  "top-left",
-  "bottom-right",
-  "bottom-left",
-  "top-center",
-  "bottom-center"
-]);
-var ToastOptionsSchema = import_zod4.z.object({
-  /** Toast variant */
-  variant: AlertVariantSchema.optional(),
-  /** Toast title */
-  title: import_zod4.z.string().optional(),
-  /** Duration in ms (0 = no auto-dismiss) */
-  duration: import_zod4.z.number().min(0).optional(),
-  /** Position */
-  position: ToastPositionSchema.optional(),
-  /** Toast ID */
-  id: import_zod4.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/avatar.schema.ts
-var import_zod5 = require("zod");
-var AvatarSizeSchema = import_zod5.z.enum(["xs", "sm", "md", "lg", "xl", "2xl"]);
-var AvatarShapeSchema = import_zod5.z.enum(["circle", "square", "rounded"]);
-var AvatarStatusSchema = import_zod5.z.enum(["online", "offline", "busy", "away", "none"]);
-var AvatarOptionsSchema = import_zod5.z.object({
-  /** Image source URL */
-  src: import_zod5.z.string().optional(),
-  /** Alt text / name (required) */
-  alt: import_zod5.z.string(),
-  /** Avatar size */
-  size: AvatarSizeSchema.optional(),
-  /** Avatar shape */
-  shape: AvatarShapeSchema.optional(),
-  /** Status indicator */
-  status: AvatarStatusSchema.optional(),
-  /** Additional CSS classes */
-  className: import_zod5.z.string().optional(),
-  /** Click handler URL */
-  href: import_zod5.z.string().optional(),
-  /** Custom initials (overrides auto-generation) */
-  initials: import_zod5.z.string().optional(),
-  /** Background color for initials (CSS color) */
-  bgColor: import_zod5.z.string().optional()
-}).strict();
-var AvatarSpacingSchema = import_zod5.z.enum(["tight", "normal", "loose"]);
-var AvatarGroupOptionsSchema = import_zod5.z.object({
-  /** Maximum visible avatars */
-  max: import_zod5.z.number().min(1).optional(),
-  /** Avatar size */
-  size: AvatarSizeSchema.optional(),
-  /** Overlap amount */
-  spacing: AvatarSpacingSchema.optional(),
-  /** Additional CSS classes */
-  className: import_zod5.z.string().optional()
-}).strict();
-var AvatarWithTextOptionsSchema = AvatarOptionsSchema.extend({
-  /** Primary text (name) */
-  name: import_zod5.z.string(),
-  /** Secondary text (email, role, etc.) */
-  subtitle: import_zod5.z.string().optional(),
-  /** Text alignment */
-  align: import_zod5.z.enum(["left", "right"]).optional()
-}).strict();
-
-// libs/ui/src/components/modal.schema.ts
-var import_zod6 = require("zod");
-var ModalSizeSchema = import_zod6.z.enum(["sm", "md", "lg", "xl", "full"]);
-var ModalOptionsSchema = import_zod6.z.object({
-  /** Modal ID (required) */
-  id: import_zod6.z.string(),
-  /** Modal title */
-  title: import_zod6.z.string().optional(),
-  /** Modal size */
-  size: ModalSizeSchema.optional(),
-  /** Show close button */
-  showClose: import_zod6.z.boolean().optional(),
-  /** Close on backdrop click */
-  closeOnBackdrop: import_zod6.z.boolean().optional(),
-  /** Close on escape key */
-  closeOnEscape: import_zod6.z.boolean().optional(),
-  /** Footer content (HTML string) */
-  footer: import_zod6.z.string().optional(),
-  /** Additional CSS classes for modal */
-  className: import_zod6.z.string().optional(),
-  /** Initially visible */
-  open: import_zod6.z.boolean().optional()
-}).strict();
-var ConfirmModalVariantSchema = import_zod6.z.enum(["info", "warning", "danger"]);
-var ConfirmModalOptionsSchema = import_zod6.z.object({
-  /** Modal ID (required) */
-  id: import_zod6.z.string(),
-  /** Confirm message */
-  message: import_zod6.z.string(),
-  /** Title */
-  title: import_zod6.z.string().optional(),
-  /** Variant/severity */
-  variant: ConfirmModalVariantSchema.optional(),
-  /** Confirm button text */
-  confirmText: import_zod6.z.string().optional(),
-  /** Cancel button text */
-  cancelText: import_zod6.z.string().optional(),
-  /** Initially visible */
-  open: import_zod6.z.boolean().optional(),
-  /** Confirm action URL */
-  confirmHref: import_zod6.z.string().optional()
-}).strict();
-var DrawerPositionSchema = import_zod6.z.enum(["left", "right", "top", "bottom"]);
-var DrawerOptionsSchema = import_zod6.z.object({
-  /** Drawer ID (required) */
-  id: import_zod6.z.string(),
-  /** Position */
-  position: DrawerPositionSchema.optional(),
-  /** Size (width for left/right, height for top/bottom) */
-  size: ModalSizeSchema.optional(),
-  /** Drawer title */
-  title: import_zod6.z.string().optional(),
-  /** Show close button */
-  showClose: import_zod6.z.boolean().optional(),
-  /** Footer content (HTML string) */
-  footer: import_zod6.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod6.z.string().optional(),
-  /** Initially visible */
-  open: import_zod6.z.boolean().optional()
-}).strict();
-var ModalTriggerOptionsSchema = import_zod6.z.object({
-  /** Target modal ID (required) */
-  targetId: import_zod6.z.string(),
-  /** Trigger text */
-  text: import_zod6.z.string().optional(),
-  /** HTML tag to use */
-  tag: import_zod6.z.enum(["button", "a", "span", "div"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod6.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/table.schema.ts
-var import_zod7 = require("zod");
-var TableAlignSchema = import_zod7.z.enum(["left", "center", "right"]);
-var TableSortDirectionSchema = import_zod7.z.enum(["asc", "desc"]).nullable();
-var TableColumnSchema = import_zod7.z.object({
-  /** Column key (property name) */
-  key: import_zod7.z.string(),
-  /** Column header text */
-  header: import_zod7.z.string(),
-  /** Column width (CSS value) */
-  width: import_zod7.z.string().optional(),
-  /** Text alignment */
-  align: TableAlignSchema.optional(),
-  /** Sortable column */
-  sortable: import_zod7.z.boolean().optional(),
-  /** Current sort direction */
-  sortDirection: TableSortDirectionSchema.optional(),
-  /** Custom cell renderer (function - cannot validate at runtime) */
-  render: import_zod7.z.any().optional(),
-  /** Additional header CSS classes */
-  headerClass: import_zod7.z.string().optional(),
-  /** Additional cell CSS classes */
-  cellClass: import_zod7.z.string().optional()
-}).strict();
-var TableOptionsSchema = import_zod7.z.object({
-  /** Column definitions */
-  columns: import_zod7.z.array(TableColumnSchema),
-  /** Table ID */
-  id: import_zod7.z.string().optional(),
-  /** Show row selection checkboxes */
-  selectable: import_zod7.z.boolean().optional(),
-  /** Row hover effect */
-  hoverable: import_zod7.z.boolean().optional(),
-  /** Striped rows */
-  striped: import_zod7.z.boolean().optional(),
-  /** Bordered cells */
-  bordered: import_zod7.z.boolean().optional(),
-  /** Compact size */
-  compact: import_zod7.z.boolean().optional(),
-  /** Fixed header (sticky) */
-  stickyHeader: import_zod7.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod7.z.string().optional(),
-  /** Empty state message */
-  emptyMessage: import_zod7.z.string().optional(),
-  /** Empty state HTML */
-  emptyContent: import_zod7.z.string().optional(),
-  /** Loading state */
-  loading: import_zod7.z.boolean().optional(),
-  /** Row key property for selection */
-  rowKey: import_zod7.z.string().optional(),
-  /** Row click handler (URL template with {key}) */
-  onRowClick: import_zod7.z.string().optional()
-}).strict();
-var PaginationOptionsSchema = import_zod7.z.object({
-  /** Current page (1-indexed) */
-  page: import_zod7.z.number().min(1),
-  /** Total pages */
-  totalPages: import_zod7.z.number().min(0),
-  /** Total items count */
-  totalItems: import_zod7.z.number().min(0).optional(),
-  /** Items per page */
-  pageSize: import_zod7.z.number().min(1).optional(),
-  /** Page size options */
-  pageSizeOptions: import_zod7.z.array(import_zod7.z.number()).optional(),
-  /** Show first/last buttons */
-  showFirstLast: import_zod7.z.boolean().optional(),
-  /** Show page count */
-  showPageCount: import_zod7.z.boolean().optional(),
-  /** Show item count */
-  showItemCount: import_zod7.z.boolean().optional(),
-  /** Show page size selector */
-  showPageSize: import_zod7.z.boolean().optional(),
-  /** Max visible page buttons */
-  maxVisiblePages: import_zod7.z.number().min(1).optional(),
-  /** Additional CSS classes */
-  className: import_zod7.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/form.schema.ts
-var import_zod8 = require("zod");
-var InputTypeSchema = import_zod8.z.enum([
-  "text",
-  "email",
-  "password",
-  "number",
-  "tel",
-  "url",
-  "search",
-  "date",
-  "time",
-  "datetime-local",
-  "hidden"
-]);
-var InputSizeSchema = import_zod8.z.enum(["sm", "md", "lg"]);
-var InputStateSchema = import_zod8.z.enum(["default", "error", "success", "warning"]);
-var InputOptionsSchema = import_zod8.z.object({
-  /** Input type */
-  type: InputTypeSchema.optional(),
-  /** Input name (required) */
-  name: import_zod8.z.string(),
-  /** Input ID (defaults to name) */
-  id: import_zod8.z.string().optional(),
-  /** Input value */
-  value: import_zod8.z.string().optional(),
-  /** Placeholder text */
-  placeholder: import_zod8.z.string().optional(),
-  /** Label text */
-  label: import_zod8.z.string().optional(),
-  /** Helper text */
-  helper: import_zod8.z.string().optional(),
-  /** Error message */
-  error: import_zod8.z.string().optional(),
-  /** Input size */
-  size: InputSizeSchema.optional(),
-  /** Input state */
-  state: InputStateSchema.optional(),
-  /** Required field */
-  required: import_zod8.z.boolean().optional(),
-  /** Disabled state */
-  disabled: import_zod8.z.boolean().optional(),
-  /** Readonly state */
-  readonly: import_zod8.z.boolean().optional(),
-  /** Autocomplete attribute */
-  autocomplete: import_zod8.z.string().optional(),
-  /** Pattern for validation */
-  pattern: import_zod8.z.string().optional(),
-  /** Min value (for number/date) */
-  min: import_zod8.z.union([import_zod8.z.string(), import_zod8.z.number()]).optional(),
-  /** Max value (for number/date) */
-  max: import_zod8.z.union([import_zod8.z.string(), import_zod8.z.number()]).optional(),
-  /** Step value (for number) */
-  step: import_zod8.z.union([import_zod8.z.string(), import_zod8.z.number()]).optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional(),
-  /** Data attributes */
-  data: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.string()).optional(),
-  /** Icon before input (HTML string) */
-  iconBefore: import_zod8.z.string().optional(),
-  /** Icon after input (HTML string) */
-  iconAfter: import_zod8.z.string().optional()
-}).strict();
-var SelectOptionItemSchema = import_zod8.z.object({
-  value: import_zod8.z.string(),
-  label: import_zod8.z.string(),
-  disabled: import_zod8.z.boolean().optional(),
-  selected: import_zod8.z.boolean().optional()
-}).strict();
-var SelectOptionsSchema = import_zod8.z.object({
-  /** Input name (required) */
-  name: import_zod8.z.string(),
-  /** Input ID (defaults to name) */
-  id: import_zod8.z.string().optional(),
-  /** Input value */
-  value: import_zod8.z.string().optional(),
-  /** Placeholder text */
-  placeholder: import_zod8.z.string().optional(),
-  /** Label text */
-  label: import_zod8.z.string().optional(),
-  /** Helper text */
-  helper: import_zod8.z.string().optional(),
-  /** Error message */
-  error: import_zod8.z.string().optional(),
-  /** Input size */
-  size: InputSizeSchema.optional(),
-  /** Input state */
-  state: InputStateSchema.optional(),
-  /** Required field */
-  required: import_zod8.z.boolean().optional(),
-  /** Disabled state */
-  disabled: import_zod8.z.boolean().optional(),
-  /** Readonly state */
-  readonly: import_zod8.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional(),
-  /** Data attributes */
-  data: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.string()).optional(),
-  /** Icon before input (HTML string) */
-  iconBefore: import_zod8.z.string().optional(),
-  /** Icon after input (HTML string) */
-  iconAfter: import_zod8.z.string().optional(),
-  /** Select options (required) */
-  options: import_zod8.z.array(SelectOptionItemSchema),
-  /** Multiple selection */
-  multiple: import_zod8.z.boolean().optional()
-}).strict();
-var TextareaResizeSchema = import_zod8.z.enum(["none", "vertical", "horizontal", "both"]);
-var TextareaOptionsSchema = import_zod8.z.object({
-  /** Input name (required) */
-  name: import_zod8.z.string(),
-  /** Input ID (defaults to name) */
-  id: import_zod8.z.string().optional(),
-  /** Input value */
-  value: import_zod8.z.string().optional(),
-  /** Placeholder text */
-  placeholder: import_zod8.z.string().optional(),
-  /** Label text */
-  label: import_zod8.z.string().optional(),
-  /** Helper text */
-  helper: import_zod8.z.string().optional(),
-  /** Error message */
-  error: import_zod8.z.string().optional(),
-  /** Input size */
-  size: InputSizeSchema.optional(),
-  /** Input state */
-  state: InputStateSchema.optional(),
-  /** Required field */
-  required: import_zod8.z.boolean().optional(),
-  /** Disabled state */
-  disabled: import_zod8.z.boolean().optional(),
-  /** Readonly state */
-  readonly: import_zod8.z.boolean().optional(),
-  /** Autocomplete attribute */
-  autocomplete: import_zod8.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional(),
-  /** Data attributes */
-  data: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.string()).optional(),
-  /** Icon before input (HTML string) */
-  iconBefore: import_zod8.z.string().optional(),
-  /** Icon after input (HTML string) */
-  iconAfter: import_zod8.z.string().optional(),
-  /** Number of rows */
-  rows: import_zod8.z.number().min(1).optional(),
-  /** Resize behavior */
-  resize: TextareaResizeSchema.optional()
-}).strict();
-var CheckboxOptionsSchema = import_zod8.z.object({
-  /** Input name (required) */
-  name: import_zod8.z.string(),
-  /** Input ID */
-  id: import_zod8.z.string().optional(),
-  /** Input value */
-  value: import_zod8.z.string().optional(),
-  /** Label text (required) */
-  label: import_zod8.z.string(),
-  /** Checked state */
-  checked: import_zod8.z.boolean().optional(),
-  /** Disabled state */
-  disabled: import_zod8.z.boolean().optional(),
-  /** Helper text */
-  helper: import_zod8.z.string().optional(),
-  /** Error message */
-  error: import_zod8.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-var RadioOptionItemSchema = import_zod8.z.object({
-  value: import_zod8.z.string(),
-  label: import_zod8.z.string(),
-  disabled: import_zod8.z.boolean().optional()
-}).strict();
-var RadioGroupOptionsSchema = import_zod8.z.object({
-  /** Group name (required) */
-  name: import_zod8.z.string(),
-  /** Radio options (required) */
-  options: import_zod8.z.array(RadioOptionItemSchema),
-  /** Selected value */
-  value: import_zod8.z.string().optional(),
-  /** Label for the group */
-  label: import_zod8.z.string().optional(),
-  /** Helper text */
-  helper: import_zod8.z.string().optional(),
-  /** Error message */
-  error: import_zod8.z.string().optional(),
-  /** Layout direction */
-  direction: import_zod8.z.enum(["horizontal", "vertical"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-var FormMethodSchema = import_zod8.z.enum(["get", "post", "dialog"]);
-var FormEnctypeSchema = import_zod8.z.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
-var FormOptionsSchema = import_zod8.z.object({
-  /** Form action URL */
-  action: import_zod8.z.string().optional(),
-  /** Form method */
-  method: FormMethodSchema.optional(),
-  /** Form ID */
-  id: import_zod8.z.string().optional(),
-  /** Form enctype */
-  enctype: FormEnctypeSchema.optional(),
-  /** Disable browser validation */
-  novalidate: import_zod8.z.boolean().optional(),
-  /** Autocomplete behavior */
-  autocomplete: import_zod8.z.enum(["on", "off"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-var FormRowOptionsSchema = import_zod8.z.object({
-  /** Number of columns */
-  cols: import_zod8.z.number().min(1).max(12).optional(),
-  /** Gap between columns */
-  gap: import_zod8.z.enum(["sm", "md", "lg"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-var FormSectionOptionsSchema = import_zod8.z.object({
-  /** Section title */
-  title: import_zod8.z.string().optional(),
-  /** Section description */
-  description: import_zod8.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-var FormActionsOptionsSchema = import_zod8.z.object({
-  /** Alignment */
-  align: import_zod8.z.enum(["left", "center", "right", "between"]).optional(),
-  /** Additional CSS classes */
-  className: import_zod8.z.string().optional()
-}).strict();
-
-// libs/ui/src/components/list.schema.ts
-var import_zod9 = require("zod");
-var PermissionItemSchema = import_zod9.z.object({
-  /** Scope identifier */
-  scope: import_zod9.z.string(),
-  /** Display name */
-  name: import_zod9.z.string(),
-  /** Description */
-  description: import_zod9.z.string().optional(),
-  /** Icon HTML */
-  icon: import_zod9.z.string().optional(),
-  /** Required permission (cannot be unchecked) */
-  required: import_zod9.z.boolean().optional(),
-  /** Checked by default */
-  checked: import_zod9.z.boolean().optional(),
-  /** Sensitive/dangerous permission */
-  sensitive: import_zod9.z.boolean().optional()
-}).strict();
-var PermissionListOptionsSchema = import_zod9.z.object({
-  /** List ID */
-  id: import_zod9.z.string().optional(),
-  /** Checkable permissions */
-  checkable: import_zod9.z.boolean().optional(),
-  /** Input name for checkable */
-  inputName: import_zod9.z.string().optional(),
-  /** Group title */
-  title: import_zod9.z.string().optional(),
-  /** Additional CSS classes */
-  className: import_zod9.z.string().optional()
-}).strict();
-var FeatureItemSchema = import_zod9.z.object({
-  /** Feature name */
-  name: import_zod9.z.string(),
-  /** Feature description */
-  description: import_zod9.z.string().optional(),
-  /** Icon HTML */
-  icon: import_zod9.z.string().optional(),
-  /** Included in plan */
-  included: import_zod9.z.boolean().optional()
-}).strict();
-var FeatureListOptionsSchema = import_zod9.z.object({
-  /** Group title */
-  title: import_zod9.z.string().optional(),
-  /** Show included/excluded styling */
-  showStatus: import_zod9.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod9.z.string().optional()
-}).strict();
-var DescriptionItemSchema = import_zod9.z.object({
-  /** Term/label */
-  term: import_zod9.z.string(),
-  /** Description/value */
-  description: import_zod9.z.string(),
-  /** Copy button */
-  copyable: import_zod9.z.boolean().optional()
-}).strict();
-var DescriptionListOptionsSchema = import_zod9.z.object({
-  /** Layout direction */
-  direction: import_zod9.z.enum(["horizontal", "vertical"]).optional(),
-  /** Striped rows */
-  striped: import_zod9.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod9.z.string().optional()
-}).strict();
-var ActionItemSchema = import_zod9.z.object({
-  /** Action label */
-  label: import_zod9.z.string(),
-  /** Action description */
-  description: import_zod9.z.string().optional(),
-  /** Icon HTML */
-  icon: import_zod9.z.string().optional(),
-  /** Click URL */
-  href: import_zod9.z.string().optional(),
-  /** Destructive action styling */
-  destructive: import_zod9.z.boolean().optional(),
-  /** Disabled state */
-  disabled: import_zod9.z.boolean().optional()
-}).strict();
-var ActionListOptionsSchema = import_zod9.z.object({
-  /** Divided items */
-  divided: import_zod9.z.boolean().optional(),
-  /** Additional CSS classes */
-  className: import_zod9.z.string().optional()
-}).strict();
-
-// libs/ui/src/layouts/base.ts
-var import_theme = require("@frontmcp/uipack/theme");
-var import_utils = require("@frontmcp/uipack/utils");
-var import_utils2 = require("@frontmcp/uipack/utils");
-function getSizeClass(size) {
-  const sizeMap = {
-    xs: "max-w-sm",
-    sm: "max-w-md",
-    md: "max-w-lg",
-    lg: "max-w-xl",
-    xl: "max-w-2xl",
-    "2xl": "max-w-3xl",
-    "3xl": "max-w-4xl",
-    full: "max-w-full"
-  };
-  return sizeMap[size];
-}
-function getAlignmentClasses(alignment) {
-  const alignMap = {
-    center: "min-h-screen flex items-center justify-center",
-    top: "min-h-screen flex flex-col items-center pt-12",
-    start: "min-h-screen"
-  };
-  return alignMap[alignment];
-}
-function getBackgroundClasses(background) {
-  switch (background) {
-    case "gradient":
-      return "bg-gradient-to-br from-primary to-secondary";
-    case "pattern":
-      return 'bg-surface bg-[url("data:image/svg+xml,...")]';
-    // Pattern would be defined
-    case "solid":
-      return "bg-background";
-    case "none":
-    default:
-      return "";
-  }
-}
-function buildMetaTags(options) {
-  const tags = [];
-  if (options.description) {
-    tags.push(`<meta name="description" content="${(0, import_utils.escapeHtml)(options.description)}">`);
-  }
-  if (options.og) {
-    if (options.og.title) {
-      tags.push(`<meta property="og:title" content="${(0, import_utils.escapeHtml)(options.og.title)}">`);
-    }
-    if (options.og.description) {
-      tags.push(`<meta property="og:description" content="${(0, import_utils.escapeHtml)(options.og.description)}">`);
-    }
-    if (options.og.image) {
-      tags.push(`<meta property="og:image" content="${(0, import_utils.escapeHtml)(options.og.image)}">`);
-    }
-    if (options.og.type) {
-      tags.push(`<meta property="og:type" content="${(0, import_utils.escapeHtml)(options.og.type)}">`);
-    }
-  }
-  if (options.favicon) {
-    tags.push(`<link rel="icon" href="${(0, import_utils.escapeHtml)(options.favicon)}">`);
-  }
-  return tags.join("\n  ");
-}
-function buildBodyAttrs(attrs) {
-  if (!attrs) return "";
-  return Object.entries(attrs).map(([key, value]) => `${key}="${(0, import_utils.escapeHtml)(value)}"`).join(" ");
-}
-function baseLayout(content, options) {
-  const {
-    title,
-    pageType: _pageType = "custom",
-    size = "md",
-    alignment = "center",
-    background = "solid",
-    platform = import_theme.OPENAI_PLATFORM,
-    theme: themeOverrides,
-    includeHtmx,
-    includeAlpine = false,
-    includeIcons = false,
-    headExtra = "",
-    bodyAttrs,
-    bodyClass = "",
-    titleSuffix = "FrontMCP"
-  } = options;
-  const theme = themeOverrides ? (0, import_theme.mergeThemes)(import_theme.DEFAULT_THEME, themeOverrides) : import_theme.DEFAULT_THEME;
-  const shouldIncludeHtmx = includeHtmx ?? platform.supportsHtmx;
-  const useCdn = (0, import_theme.canUseCdn)(platform);
-  const useInline = (0, import_theme.needsInlineScripts)(platform);
-  const fontPreconnect = useCdn ? (0, import_theme.buildFontPreconnect)() : "";
-  const fontStylesheets = useCdn ? (0, import_theme.buildFontStylesheets)({ inter: true }) : "";
-  const scripts = (0, import_theme.buildCdnScripts)({
-    tailwind: platform.supportsTailwind,
-    htmx: shouldIncludeHtmx,
-    alpine: includeAlpine,
-    icons: includeIcons,
-    inline: useInline
-  });
-  const themeCss = (0, import_theme.buildThemeCss)(theme);
-  const customCss = theme.customCss || "";
-  const styleBlock = platform.supportsTailwind ? `<style type="text/tailwindcss">
-    @theme {
-      ${themeCss}
-    }
-    ${customCss}
-  </style>` : "";
-  const sizeClass = getSizeClass(size);
-  const alignmentClasses = getAlignmentClasses(alignment);
-  const backgroundClasses = getBackgroundClasses(background);
-  const allBodyClasses = [backgroundClasses, "font-sans antialiased", bodyClass].filter(Boolean).join(" ");
-  const metaTags = buildMetaTags(options);
-  const bodyAttrStr = buildBodyAttrs(bodyAttrs);
-  const wrappedContent = alignment === "center" ? `<div class="${alignmentClasses} p-4">
-    <div class="w-full ${sizeClass}">
-      ${content}
-    </div>
-  </div>` : `<div class="${alignmentClasses}">
-    <div class="w-full ${sizeClass} mx-auto px-4 py-8">
-      ${content}
-    </div>
-  </div>`;
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${(0, import_utils.escapeHtml)(title)}${titleSuffix ? ` - ${(0, import_utils.escapeHtml)(titleSuffix)}` : ""}</title>
-  ${metaTags}
-
-  <!-- Fonts -->
-  ${fontPreconnect}
-  ${fontStylesheets}
-
-  <!-- Tailwind CSS -->
-  ${scripts}
-  ${styleBlock}
-
-  ${headExtra}
-</head>
-<body class="${(0, import_utils.escapeHtml)(allBodyClasses)}"${bodyAttrStr ? ` ${bodyAttrStr}` : ""}>
-  ${wrappedContent}
-</body>
-</html>`;
-}
-function createLayoutBuilder(defaults) {
-  return (content, options = {}) => {
-    let mergedTheme = import_theme.DEFAULT_THEME;
-    if (defaults.theme) {
-      mergedTheme = (0, import_theme.mergeThemes)(mergedTheme, defaults.theme);
-    }
-    if (options.theme) {
-      mergedTheme = (0, import_theme.mergeThemes)(mergedTheme, options.theme);
-    }
-    const merged = {
-      ...defaults,
-      ...options,
-      theme: mergedTheme
-    };
-    if (!merged.title) {
-      throw new Error("createLayoutBuilder: title is required either in defaults or options");
-    }
-    return baseLayout(content, merged);
-  };
-}
-
-// libs/ui/src/components/button.ts
-var import_validation = require("@frontmcp/uipack/validation");
-function getVariantClasses(variant) {
-  const variants = {
-    primary: "bg-primary hover:bg-primary/90 text-white shadow-sm",
-    secondary: "bg-secondary hover:bg-secondary/90 text-white shadow-sm",
-    outline: "border-2 border-primary text-primary hover:bg-primary/10",
-    ghost: "text-text-primary hover:bg-gray-100",
-    danger: "bg-danger hover:bg-danger/90 text-white shadow-sm",
-    success: "bg-success hover:bg-success/90 text-white shadow-sm",
-    link: "text-primary hover:text-primary/80 hover:underline"
-  };
-  return variants[variant];
-}
-function getSizeClasses(size, iconOnly) {
-  if (iconOnly) {
-    const iconSizes = {
-      xs: "p-1.5",
-      sm: "p-2",
-      md: "p-2.5",
-      lg: "p-3",
-      xl: "p-4"
-    };
-    return iconSizes[size];
-  }
-  const sizes = {
-    xs: "px-2.5 py-1.5 text-xs",
-    sm: "px-3 py-2 text-sm",
-    md: "px-4 py-2.5 text-sm",
-    lg: "px-5 py-3 text-base",
-    xl: "px-6 py-3.5 text-lg"
-  };
-  return sizes[size];
-}
-function sanitizeDataKey(key) {
-  const sanitized = key.toLowerCase().replace(/[^a-z0-9_-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-  if (!sanitized) {
-    console.warn(`[frontmcp/ui] Dropping invalid data-* key: "${key}"`);
-    return null;
-  }
-  return sanitized;
-}
-var loadingSpinner = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" 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>`;
-function isValidHrefProtocol(href) {
-  const trimmed = href.trim().toLowerCase();
-  return trimmed.startsWith("http://") || trimmed.startsWith("https://") || trimmed.startsWith("/") || trimmed.startsWith("#") || trimmed.startsWith("mailto:") || trimmed.startsWith("tel:");
-}
-function button(text, options = {}) {
-  const validation = (0, import_validation.validateOptions)(options, {
-    schema: ButtonOptionsSchema,
-    componentName: "button"
-  });
-  if (!validation.success) {
-    return validation.error;
-  }
-  const validatedOptions = validation.data;
-  const {
-    variant = "primary",
-    size = "md",
-    type = "button",
-    disabled = false,
-    loading = false,
-    fullWidth = false,
-    iconBefore,
-    iconAfter,
-    iconOnly = false,
-    className = "",
-    id,
-    name,
-    value,
-    href,
-    target,
-    data,
-    ariaLabel
-  } = validatedOptions;
-  if (!iconOnly && !text.trim()) {
-    console.warn("[frontmcp/ui] Button has empty text. Consider providing text or using iconOnly with ariaLabel.");
-  }
-  if (iconOnly && !ariaLabel && !text.trim()) {
-    console.warn(
-      "[frontmcp/ui] iconOnly button requires non-empty text or ariaLabel for accessibility; control will have no label."
-    );
-  }
-  if (href && !isValidHrefProtocol(href)) {
-    console.warn(`[frontmcp/ui] Button href contains potentially dangerous protocol: "${href.slice(0, 20)}..."`);
-  }
-  const variantClasses = getVariantClasses(variant);
-  const sizeClasses = getSizeClasses(size, iconOnly);
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const baseClasses = [
-    "inline-flex items-center justify-center",
-    "font-medium",
-    "rounded-lg",
-    "transition-colors duration-200",
-    "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2",
-    disabled || loading ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-    fullWidth ? "w-full" : "",
-    variantClasses,
-    sizeClasses,
-    safeClassName
-  ].filter(Boolean).join(" ");
-  const dataAttrs = data ? Object.entries(data).map(([key, val]) => {
-    const safeKey = sanitizeDataKey(key);
-    return safeKey ? `data-${safeKey}="${(0, import_utils2.escapeHtml)(val)}"` : "";
-  }).filter(Boolean).join(" ") : "";
-  const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  const nameAttr = name ? `name="${(0, import_utils2.escapeHtml)(name)}"` : "";
-  const valueAttr = value ? `value="${(0, import_utils2.escapeHtml)(value)}"` : "";
-  const disabledAttr = disabled || loading ? "disabled" : "";
-  const targetAttr = target ? `target="${(0, import_utils2.escapeHtml)(target)}"` : "";
-  const relAttr = target === "_blank" ? 'rel="noopener noreferrer"' : "";
-  const trimmedText = text.trim();
-  const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : void 0);
-  const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${(0, import_utils2.escapeHtml)(effectiveAriaLabel)}"` : "";
-  const iconBeforeHtml = iconBefore && !loading ? `<span class="${iconOnly ? "" : "mr-2"}">${iconBefore}</span>` : "";
-  const iconAfterHtml = iconAfter && !loading ? `<span class="${iconOnly ? "" : "ml-2"}">${iconAfter}</span>` : "";
-  const loadingHtml = loading ? loadingSpinner : "";
-  const textHtml = iconOnly ? "" : (0, import_utils2.escapeHtml)(text);
-  const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
-  if (href && !disabled && !loading && isValidHrefProtocol(href)) {
-    return `<a href="${(0, import_utils2.escapeHtml)(
-      href
-    )}" class="${baseClasses}" ${idAttr} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
-      ${contentHtml}
-    </a>`;
-  }
-  return `<button type="${type}" class="${baseClasses}" ${idAttr} ${nameAttr} ${valueAttr} ${disabledAttr} ${dataAttrs} ${ariaLabelAttr}>
-    ${contentHtml}
-  </button>`;
-}
-function buttonGroup(buttons, options = {}) {
-  if (buttons.length === 0) {
-    console.warn("[frontmcp/ui] buttonGroup called with empty buttons array");
-    return "";
-  }
-  const validation = (0, import_validation.validateOptions)(options, {
-    schema: ButtonGroupOptionsSchema,
-    componentName: "buttonGroup"
-  });
-  if (!validation.success) {
-    return validation.error;
-  }
-  const validatedOptions = validation.data;
-  const { attached = false, direction = "horizontal", gap = "md", className = "" } = validatedOptions;
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  if (attached) {
-    const classes = direction === "horizontal" ? "inline-flex rounded-lg shadow-sm [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px" : "inline-flex flex-col rounded-lg shadow-sm [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px";
-    return `<div class="${classes} ${safeClassName}">${buttons.join("")}</div>`;
-  }
-  const gapClasses = { sm: "gap-2", md: "gap-3", lg: "gap-4" };
-  const directionClasses = direction === "horizontal" ? "flex flex-row" : "flex flex-col";
-  return `<div class="${directionClasses} ${gapClasses[gap]} ${safeClassName}">${buttons.join("")}</div>`;
-}
-var primaryButton = (text, opts) => button(text, { ...opts, variant: "primary" });
-var secondaryButton = (text, opts) => button(text, { ...opts, variant: "secondary" });
-var outlineButton = (text, opts) => button(text, { ...opts, variant: "outline" });
-var ghostButton = (text, opts) => button(text, { ...opts, variant: "ghost" });
-var dangerButton = (text, opts) => button(text, { ...opts, variant: "danger" });
-var linkButton = (text, opts) => button(text, { ...opts, variant: "link" });
-
-// libs/ui/src/components/card.ts
-var import_runtime = require("@frontmcp/uipack/runtime");
-function getVariantClasses2(variant) {
-  const variants = {
-    default: "bg-white border border-border rounded-xl shadow-sm",
-    outlined: "bg-transparent border-2 border-border rounded-xl",
-    elevated: "bg-white rounded-xl shadow-lg",
-    filled: "bg-gray-50 rounded-xl",
-    ghost: "bg-transparent"
-  };
-  return variants[variant];
-}
-function getSizeClasses2(size) {
-  const sizes = {
-    sm: "p-4",
-    md: "p-6",
-    lg: "p-8"
-  };
-  return sizes[size];
-}
-function buildDataAttrs(data) {
-  if (!data) return "";
-  return Object.entries(data).map(([key, value]) => `data-${key}="${(0, import_utils2.escapeHtml)(value)}"`).join(" ");
-}
-function card(content, options = {}) {
-  const {
-    variant = "default",
-    size = "md",
-    title,
-    subtitle,
-    headerActions,
-    footer,
-    className = "",
-    id,
-    data,
-    clickable = false,
-    href,
-    sanitize = false
-  } = options;
-  const safeContent = sanitize ? (0, import_runtime.sanitizeHtmlContent)(content) : content;
-  const safeHeaderActions = sanitize && headerActions ? (0, import_runtime.sanitizeHtmlContent)(headerActions) : headerActions;
-  const safeFooter = sanitize && footer ? (0, import_runtime.sanitizeHtmlContent)(footer) : footer;
-  const variantClasses = getVariantClasses2(variant);
-  const sizeClasses = getSizeClasses2(size);
-  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const allClasses = [variantClasses, sizeClasses, clickableClasses, safeClassName].filter(Boolean).join(" ");
-  const dataAttrs = buildDataAttrs(data);
-  const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  const hasHeader = title || subtitle || safeHeaderActions;
-  const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
-        <div>
-          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>` : ""}
-          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${(0, import_utils2.escapeHtml)(subtitle)}</p>` : ""}
-        </div>
-        ${safeHeaderActions ? `<div class="flex items-center gap-2">${safeHeaderActions}</div>` : ""}
-      </div>` : "";
-  const footerHtml = safeFooter ? `<div class="mt-4 pt-4 border-t border-divider">${safeFooter}</div>` : "";
-  if (href) {
-    return `<a href="${(0, import_utils2.escapeHtml)(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
-      ${headerHtml}
-      ${safeContent}
-      ${footerHtml}
-    </a>`;
-  }
-  return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
-    ${headerHtml}
-    ${safeContent}
-    ${footerHtml}
-  </div>`;
-}
-function cardGroup(cards, options = {}) {
-  const { direction = "vertical", gap = "md", className = "" } = options;
-  const gapClasses = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
-  const directionClasses = direction === "horizontal" ? "flex flex-row flex-wrap" : "flex flex-col";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="${directionClasses} ${gapClasses[gap]} ${safeClassName}">
-    ${cards.join("\n")}
-  </div>`;
-}
-
-// libs/ui/src/components/form.ts
-var import_runtime2 = require("@frontmcp/uipack/runtime");
-function getInputSizeClasses(size) {
-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2.5 text-sm",
-    lg: "px-5 py-3 text-base"
-  };
-  return sizes[size];
-}
-function getInputStateClasses(state) {
-  const states = {
-    default: "border-border focus:border-primary focus:ring-primary/20",
-    error: "border-danger focus:border-danger focus:ring-danger/20",
-    success: "border-success focus:border-success focus:ring-success/20",
-    warning: "border-warning focus:border-warning focus:ring-warning/20"
-  };
-  return states[state];
-}
-function buildDataAttrs2(data) {
-  if (!data) return "";
-  return Object.entries(data).map(([key, value]) => `data-${key}="${(0, import_utils2.escapeHtml)(value)}"`).join(" ");
-}
-function input(options) {
-  const {
-    type = "text",
-    name,
-    id = name,
-    value = "",
-    placeholder = "",
-    label,
-    helper,
-    error,
-    size = "md",
-    state = error ? "error" : "default",
-    required = false,
-    disabled = false,
-    readonly = false,
-    autocomplete,
-    pattern,
-    min,
-    max,
-    step,
-    className = "",
-    data,
-    iconBefore,
-    iconAfter,
-    sanitize = false
-  } = options;
-  const safeIconBefore = sanitize && iconBefore ? (0, import_runtime2.sanitizeHtmlContent)(iconBefore) : iconBefore;
-  const safeIconAfter = sanitize && iconAfter ? (0, import_runtime2.sanitizeHtmlContent)(iconAfter) : iconAfter;
-  const sizeClasses = getInputSizeClasses(size);
-  const stateClasses = getInputStateClasses(state);
-  const hasIcon = safeIconBefore || safeIconAfter;
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const baseClasses = [
-    "w-full rounded-lg border bg-white",
-    "transition-colors duration-200",
-    "focus:outline-none focus:ring-2",
-    disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
-    sizeClasses,
-    stateClasses,
-    hasIcon ? (safeIconBefore ? "pl-10" : "") + (safeIconAfter ? " pr-10" : "") : "",
-    safeClassName
-  ].filter(Boolean).join(" ");
-  const dataAttrs = buildDataAttrs2(data);
-  const inputAttrs = [
-    `type="${type}"`,
-    `name="${(0, import_utils2.escapeHtml)(name)}"`,
-    `id="${(0, import_utils2.escapeHtml)(id)}"`,
-    value ? `value="${(0, import_utils2.escapeHtml)(value)}"` : "",
-    placeholder ? `placeholder="${(0, import_utils2.escapeHtml)(placeholder)}"` : "",
-    required ? "required" : "",
-    disabled ? "disabled" : "",
-    readonly ? "readonly" : "",
-    autocomplete ? `autocomplete="${(0, import_utils2.escapeHtml)(autocomplete)}"` : "",
-    pattern ? `pattern="${(0, import_utils2.escapeHtml)(pattern)}"` : "",
-    min !== void 0 ? `min="${(0, import_utils2.escapeHtml)(String(min))}"` : "",
-    max !== void 0 ? `max="${(0, import_utils2.escapeHtml)(String(max))}"` : "",
-    step !== void 0 ? `step="${(0, import_utils2.escapeHtml)(String(step))}"` : "",
-    `class="${baseClasses}"`,
-    dataAttrs
-  ].filter(Boolean).join(" ");
-  const labelHtml = label ? `<label for="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${(0, import_utils2.escapeHtml)(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
-      </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  const iconBeforeHtml = safeIconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconBefore}</span>` : "";
-  const iconAfterHtml = safeIconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${safeIconAfter}</span>` : "";
-  const inputHtml = hasIcon ? `<div class="relative">
-        ${iconBeforeHtml}
-        <input ${inputAttrs}>
-        ${iconAfterHtml}
-      </div>` : `<input ${inputAttrs}>`;
-  return `<div class="form-field">
-    ${labelHtml}
-    ${inputHtml}
-    ${helperHtml}
-    ${errorHtml}
-  </div>`;
-}
-function select(options) {
-  const {
-    name,
-    id = name,
-    options: selectOptions,
-    value,
-    label,
-    helper,
-    error,
-    size = "md",
-    state = error ? "error" : "default",
-    required = false,
-    disabled = false,
-    multiple = false,
-    className = "",
-    data
-  } = options;
-  const sizeClasses = getInputSizeClasses(size);
-  const stateClasses = getInputStateClasses(state);
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const baseClasses = [
-    "w-full rounded-lg border bg-white",
-    "transition-colors duration-200",
-    "focus:outline-none focus:ring-2",
-    disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
-    sizeClasses,
-    stateClasses,
-    safeClassName
-  ].filter(Boolean).join(" ");
-  const dataAttrs = buildDataAttrs2(data);
-  const optionsHtml = selectOptions.map((opt) => {
-    const selected = opt.selected || opt.value === value ? "selected" : "";
-    const optDisabled = opt.disabled ? "disabled" : "";
-    return `<option value="${(0, import_utils2.escapeHtml)(opt.value)}" ${selected} ${optDisabled}>${(0, import_utils2.escapeHtml)(opt.label)}</option>`;
-  }).join("\n");
-  const labelHtml = label ? `<label for="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${(0, import_utils2.escapeHtml)(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
-      </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  return `<div class="form-field">
-    ${labelHtml}
-    <select
-      name="${(0, import_utils2.escapeHtml)(name)}"
-      id="${(0, import_utils2.escapeHtml)(id)}"
-      class="${baseClasses}"
-      ${required ? "required" : ""}
-      ${disabled ? "disabled" : ""}
-      ${multiple ? "multiple" : ""}
-      ${dataAttrs}
-    >
-      ${optionsHtml}
-    </select>
-    ${helperHtml}
-    ${errorHtml}
-  </div>`;
-}
-function textarea(options) {
-  const {
-    name,
-    id = name,
-    value = "",
-    placeholder = "",
-    label,
-    helper,
-    error,
-    size = "md",
-    state = error ? "error" : "default",
-    required = false,
-    disabled = false,
-    readonly = false,
-    rows = 4,
-    resize = "vertical",
-    className = "",
-    data
-  } = options;
-  const sizeClasses = getInputSizeClasses(size);
-  const stateClasses = getInputStateClasses(state);
-  const resizeClasses = {
-    none: "resize-none",
-    vertical: "resize-y",
-    horizontal: "resize-x",
-    both: "resize"
-  };
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const baseClasses = [
-    "w-full rounded-lg border bg-white",
-    "transition-colors duration-200",
-    "focus:outline-none focus:ring-2",
-    disabled ? "opacity-50 cursor-not-allowed bg-gray-50" : "",
-    sizeClasses,
-    stateClasses,
-    resizeClasses[resize],
-    safeClassName
-  ].filter(Boolean).join(" ");
-  const dataAttrs = buildDataAttrs2(data);
-  const labelHtml = label ? `<label for="${(0, import_utils2.escapeHtml)(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
-        ${(0, import_utils2.escapeHtml)(label)}${required ? '<span class="text-danger ml-1">*</span>' : ""}
-      </label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  return `<div class="form-field">
-    ${labelHtml}
-    <textarea
-      name="${(0, import_utils2.escapeHtml)(name)}"
-      id="${(0, import_utils2.escapeHtml)(id)}"
-      rows="${rows}"
-      class="${baseClasses}"
-      ${placeholder ? `placeholder="${(0, import_utils2.escapeHtml)(placeholder)}"` : ""}
-      ${required ? "required" : ""}
-      ${disabled ? "disabled" : ""}
-      ${readonly ? "readonly" : ""}
-      ${dataAttrs}
-    >${(0, import_utils2.escapeHtml)(value)}</textarea>
-    ${helperHtml}
-    ${errorHtml}
-  </div>`;
-}
-function checkbox(options) {
-  const {
-    name,
-    id = name,
-    value = "true",
-    label,
-    checked = false,
-    disabled = false,
-    helper,
-    error,
-    className = ""
-  } = options;
-  const checkboxClasses = [
-    "h-4 w-4 rounded border-border text-primary",
-    "focus:ring-2 focus:ring-primary/20 focus:ring-offset-0",
-    disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
-  ].join(" ");
-  const helperHtml = helper && !error ? `<p class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="form-field ${safeClassName}">
-    <label class="flex items-start gap-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}">
-      <input
-        type="checkbox"
-        name="${(0, import_utils2.escapeHtml)(name)}"
-        id="${(0, import_utils2.escapeHtml)(id)}"
-        value="${(0, import_utils2.escapeHtml)(value)}"
-        class="${checkboxClasses}"
-        ${checked ? "checked" : ""}
-        ${disabled ? "disabled" : ""}
-      >
-      <div>
-        <span class="text-sm font-medium text-text-primary">${(0, import_utils2.escapeHtml)(label)}</span>
-        ${helperHtml}
-        ${errorHtml}
-      </div>
-    </label>
-  </div>`;
-}
-function radioGroup(options) {
-  const { name, options: radioOptions, value, label, helper, error, direction = "vertical", className = "" } = options;
-  const directionClasses = direction === "horizontal" ? "flex flex-row flex-wrap gap-4" : "flex flex-col gap-2";
-  const radioClasses = "h-4 w-4 border-border text-primary focus:ring-2 focus:ring-primary/20 focus:ring-offset-0";
-  const radiosHtml = radioOptions.map((opt, index) => {
-    const radioId = `${name}-${index}`;
-    const checked = opt.value === value ? "checked" : "";
-    const disabled = opt.disabled ? "disabled" : "";
-    const cursorClass = opt.disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer";
-    return `<label class="flex items-center gap-2 ${cursorClass}">
-        <input
-          type="radio"
-          name="${(0, import_utils2.escapeHtml)(name)}"
-          id="${(0, import_utils2.escapeHtml)(radioId)}"
-          value="${(0, import_utils2.escapeHtml)(opt.value)}"
-          class="${radioClasses}"
-          ${checked}
-          ${disabled}
-        >
-        <span class="text-sm text-text-primary">${(0, import_utils2.escapeHtml)(opt.label)}</span>
-      </label>`;
-  }).join("\n");
-  const labelHtml = label ? `<label class="block text-sm font-medium text-text-primary mb-2">${(0, import_utils2.escapeHtml)(label)}</label>` : "";
-  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(helper)}</p>` : "";
-  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${(0, import_utils2.escapeHtml)(error)}</p>` : "";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="form-field ${safeClassName}" role="radiogroup">
-    ${labelHtml}
-    <div class="${directionClasses}">
-      ${radiosHtml}
-    </div>
-    ${helperHtml}
-    ${errorHtml}
-  </div>`;
-}
-function form(content, options = {}) {
-  const { action, method = "post", id, className = "", preventDefault = false, autocomplete, enctype } = options;
-  const attrs = [
-    action ? `action="${(0, import_utils2.escapeHtml)(action)}"` : "",
-    `method="${method}"`,
-    id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "",
-    className ? `class="${(0, import_utils2.escapeHtml)(className)}"` : "",
-    autocomplete ? `autocomplete="${autocomplete}"` : "",
-    enctype ? `enctype="${enctype}"` : "",
-    preventDefault ? 'onsubmit="return false;"' : ""
-  ].filter(Boolean).join(" ");
-  return `<form ${attrs}>${content}</form>`;
-}
-var GRID_COLS_MAP = {
-  1: "grid-cols-1",
-  2: "grid-cols-2",
-  3: "grid-cols-3",
-  4: "grid-cols-4",
-  5: "grid-cols-5",
-  6: "grid-cols-6",
-  7: "grid-cols-7",
-  8: "grid-cols-8",
-  9: "grid-cols-9",
-  10: "grid-cols-10",
-  11: "grid-cols-11",
-  12: "grid-cols-12"
-};
-function formRow(fields, options = {}) {
-  const { gap = "md", className = "" } = options;
-  const gapClasses = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
-  const gridCols = GRID_COLS_MAP[fields.length] ?? "grid-cols-1";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="grid ${gridCols} ${gapClasses[gap]} ${safeClassName}">
-    ${fields.join("\n")}
-  </div>`;
-}
-function formSection(content, options = {}) {
-  const { title, description, className = "" } = options;
-  const headerHtml = title ? `<div class="mb-4">
-        <h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>
-        ${description ? `<p class="text-sm text-text-secondary mt-1">${(0, import_utils2.escapeHtml)(description)}</p>` : ""}
-      </div>` : "";
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="form-section ${safeClassName}">
-    ${headerHtml}
-    <div class="space-y-4">
-      ${content}
-    </div>
-  </div>`;
-}
-function formActions(buttons, options = {}) {
-  const { align = "right", className = "" } = options;
-  const alignClasses = {
-    left: "justify-start",
-    center: "justify-center",
-    right: "justify-end",
-    between: "justify-between"
-  };
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="flex items-center gap-3 pt-4 ${alignClasses[align]} ${safeClassName}">
-    ${buttons.join("\n")}
-  </div>`;
-}
-function hiddenInput(name, value) {
-  return `<input type="hidden" name="${(0, import_utils2.escapeHtml)(name)}" value="${(0, import_utils2.escapeHtml)(value)}">`;
-}
-function csrfInput(token) {
-  return hiddenInput("_csrf", token);
-}
-
-// libs/ui/src/components/badge.ts
-var import_runtime3 = require("@frontmcp/uipack/runtime");
-function getVariantClasses3(variant) {
-  const variants = {
-    default: "bg-gray-100 text-gray-800",
-    primary: "bg-primary/10 text-primary",
-    secondary: "bg-secondary/10 text-secondary",
-    success: "bg-success/10 text-success",
-    warning: "bg-warning/10 text-warning",
-    danger: "bg-danger/10 text-danger",
-    info: "bg-blue-100 text-blue-800",
-    outline: "border border-border text-text-primary bg-transparent"
-  };
-  return variants[variant];
-}
-function getSizeClasses3(size, dot) {
-  if (dot) {
-    const dotSizes = {
-      sm: "w-2 h-2",
-      md: "w-2.5 h-2.5",
-      lg: "w-3 h-3"
-    };
-    return dotSizes[size];
-  }
-  const sizes = {
-    sm: "px-2 py-0.5 text-xs",
-    md: "px-2.5 py-1 text-xs",
-    lg: "px-3 py-1.5 text-sm"
-  };
-  return sizes[size];
-}
-function badge(text, options = {}) {
-  const {
-    variant = "default",
-    size = "md",
-    pill = false,
-    icon,
-    dot = false,
-    className = "",
-    removable = false,
-    sanitize = false
-  } = options;
-  const safeIcon = sanitize && icon ? (0, import_runtime3.sanitizeHtmlContent)(icon) : icon;
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  if (dot) {
-    const dotVariants = {
-      default: "bg-gray-400",
-      primary: "bg-primary",
-      secondary: "bg-secondary",
-      success: "bg-success",
-      warning: "bg-warning",
-      danger: "bg-danger",
-      info: "bg-blue-500",
-      outline: "border border-current"
-    };
-    const dotClasses = ["inline-block rounded-full", getSizeClasses3(size, true), dotVariants[variant], safeClassName].filter(Boolean).join(" ");
-    return `<span class="${dotClasses}" aria-label="${(0, import_utils2.escapeHtml)(text)}" title="${(0, import_utils2.escapeHtml)(text)}"></span>`;
-  }
-  const variantClasses = getVariantClasses3(variant);
-  const sizeClasses = getSizeClasses3(size, false);
-  const baseClasses = [
-    "inline-flex items-center font-medium",
-    pill ? "rounded-full" : "rounded-md",
-    variantClasses,
-    sizeClasses,
-    safeClassName
-  ].filter(Boolean).join(" ");
-  const iconHtml = safeIcon ? `<span class="mr-1">${safeIcon}</span>` : "";
-  const removeHtml = removable ? `<button
-        type="button"
-        class="ml-1.5 -mr-1 hover:opacity-70 transition-opacity"
-        onclick="this.parentElement.remove()"
-        aria-label="Remove"
-      >
-        <svg class="w-3 h-3" 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>
-      </button>` : "";
-  return `<span class="${baseClasses}">
-    ${iconHtml}${(0, import_utils2.escapeHtml)(text)}${removeHtml}
-  </span>`;
-}
-function badgeGroup(badges, options = {}) {
-  const { gap = "sm", className = "" } = options;
-  const gapClasses = { sm: "gap-1", md: "gap-2", lg: "gap-3" };
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${safeClassName}">
-    ${badges.join("\n")}
-  </div>`;
-}
-var activeBadge = (text = "Active") => badge(text, { variant: "success", dot: false });
-var inactiveBadge = (text = "Inactive") => badge(text, { variant: "default", dot: false });
-var pendingBadge = (text = "Pending") => badge(text, { variant: "warning", dot: false });
-var errorBadge = (text = "Error") => badge(text, { variant: "danger", dot: false });
-var newBadge = (text = "New") => badge(text, { variant: "primary", size: "sm", pill: true });
-var betaBadge = (text = "Beta") => badge(text, { variant: "secondary", size: "sm", pill: true });
-var onlineDot = (label = "Online") => badge(label, { variant: "success", dot: true });
-var offlineDot = (label = "Offline") => badge(label, { variant: "default", dot: true });
-var busyDot = (label = "Busy") => badge(label, { variant: "danger", dot: true });
-var awayDot = (label = "Away") => badge(label, { variant: "warning", dot: true });
-
-// libs/ui/src/components/alert.ts
-var import_runtime4 = require("@frontmcp/uipack/runtime");
-var alertIcons = {
-  info: `<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  success: `<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  warning: `<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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-  </svg>`,
-  danger: `<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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`,
-  neutral: `<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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-  </svg>`
-};
-function getVariantClasses4(variant) {
-  const variants = {
-    info: {
-      container: "bg-blue-50 border-blue-200 text-blue-800",
-      icon: "text-blue-500"
-    },
-    success: {
-      container: "bg-success/10 border-success/30 text-success",
-      icon: "text-success"
-    },
-    warning: {
-      container: "bg-warning/10 border-warning/30 text-warning",
-      icon: "text-warning"
-    },
-    danger: {
-      container: "bg-danger/10 border-danger/30 text-danger",
-      icon: "text-danger"
-    },
-    neutral: {
-      container: "bg-gray-50 border-gray-200 text-gray-800",
-      icon: "text-gray-500"
-    }
-  };
-  return variants[variant];
-}
-function alert(message, options = {}) {
-  const {
-    variant = "info",
-    title,
-    showIcon = true,
-    icon,
-    dismissible = false,
-    className = "",
-    id,
-    actions,
-    sanitize = false
-  } = options;
-  const safeIcon = sanitize && icon ? (0, import_runtime4.sanitizeHtmlContent)(icon) : icon;
-  const safeActions = sanitize && actions ? (0, import_runtime4.sanitizeHtmlContent)(actions) : actions;
-  const variantClasses = getVariantClasses4(variant);
-  const safeClassName = className ? (0, import_utils2.escapeHtml)(className) : "";
-  const baseClasses = ["rounded-lg border p-4", variantClasses.container, safeClassName].filter(Boolean).join(" ");
-  const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
-        ${safeIcon || alertIcons[variant]}
-      </div>` : "";
-  const titleHtml = title ? `<h3 class="font-semibold">${(0, import_utils2.escapeHtml)(title)}</h3>` : "";
-  const dismissHtml = dismissible ? `<button
-        type="button"
-        class="flex-shrink-0 ml-auto -mr-1 -mt-1 p-1 rounded hover:bg-black/5 transition-colors"
-        onclick="this.closest('.alert').remove()"
-        aria-label="Dismiss"
-      >
-        <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="M6 18L18 6M6 6l12 12"/>
-        </svg>
-      </button>` : "";
-  const actionsHtml = safeActions ? `<div class="mt-3">${safeActions}</div>` : "";
-  const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  return `<div class="alert ${baseClasses}" role="alert" ${idAttr}>
-    <div class="flex gap-3">
-      ${iconHtml}
-      <div class="flex-1">
-        ${titleHtml}
-        <div class="${title ? "mt-1" : ""}">${(0, import_utils2.escapeHtml)(message)}</div>
-        ${actionsHtml}
-      </div>
-      ${dismissHtml}
-    </div>
-  </div>`;
-}
-var infoAlert = (message, opts) => alert(message, { ...opts, variant: "info" });
-var successAlert = (message, opts) => alert(message, { ...opts, variant: "success" });
-var warningAlert = (message, opts) => alert(message, { ...opts, variant: "warning" });
-var dangerAlert = (message, opts) => alert(message, { ...opts, variant: "danger" });
-function toast(message, options = {}) {
-  const { variant = "info", title, duration = 5e3, position = "top-right", id = `toast-${Date.now()}` } = options;
-  const variantClasses = getVariantClasses4(variant);
-  const positionClasses = {
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2",
-    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
-  };
-  const titleHtml = title ? `<h4 class="font-semibold">${(0, import_utils2.escapeHtml)(title)}</h4>` : "";
-  const autoDismissScript = duration > 0 ? `<script>
-        setTimeout(() => {
-          const toast = document.getElementById('${id}');
-          if (toast) {
-            toast.classList.add('opacity-0', 'translate-x-2');
-            setTimeout(() => toast.remove(), 300);
-          }
-        }, ${duration});
-      </script>` : "";
-  return `<div
-    id="${(0, import_utils2.escapeHtml)(id)}"
-    class="fixed ${positionClasses[position]} z-50 min-w-[300px] max-w-md rounded-lg border shadow-lg ${variantClasses.container} transition-all duration-300 transform"
-    role="alert"
-  >
-    <div class="flex gap-3 p-4">
-      <div class="flex-shrink-0 ${variantClasses.icon}">
-        ${alertIcons[variant]}
-      </div>
-      <div class="flex-1">
-        ${titleHtml}
-        <p class="${title ? "mt-1 text-sm opacity-90" : ""}">${(0, import_utils2.escapeHtml)(message)}</p>
-      </div>
-      <button
-        type="button"
-        class="flex-shrink-0 p-1 rounded hover:bg-black/5 transition-colors"
-        onclick="this.closest('#${id}').remove()"
-        aria-label="Close"
-      >
-        <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="M6 18L18 6M6 6l12 12"/>
-        </svg>
-      </button>
-    </div>
-  </div>
-  ${autoDismissScript}`;
-}
-function toastContainer(position = "top-right", id = "toast-container") {
-  const positionClasses = {
-    "top-right": "top-4 right-4",
-    "top-left": "top-4 left-4",
-    "bottom-right": "bottom-4 right-4",
-    "bottom-left": "bottom-4 left-4",
-    "top-center": "top-4 left-1/2 -translate-x-1/2",
-    "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
-  };
-  return `<div id="${(0, import_utils2.escapeHtml)(id)}" class="fixed ${positionClasses[position]} z-50 flex flex-col gap-2"></div>`;
-}
-
-// libs/ui/src/components/avatar.ts
-function getSizeClasses4(size) {
-  const sizes = {
-    xs: { container: "w-6 h-6", text: "text-xs", status: "w-2 h-2 border" },
-    sm: { container: "w-8 h-8", text: "text-xs", status: "w-2.5 h-2.5 border" },
-    md: { container: "w-10 h-10", text: "text-sm", status: "w-3 h-3 border-2" },
-    lg: { container: "w-12 h-12", text: "text-base", status: "w-3.5 h-3.5 border-2" },
-    xl: { container: "w-16 h-16", text: "text-lg", status: "w-4 h-4 border-2" },
-    "2xl": { container: "w-24 h-24", text: "text-2xl", status: "w-5 h-5 border-2" }
-  };
-  return sizes[size];
-}
-function getShapeClasses(shape) {
-  const shapes = {
-    circle: "rounded-full",
-    square: "rounded-none",
-    rounded: "rounded-lg"
-  };
-  return shapes[shape];
-}
-function getStatusClasses(status) {
-  const statuses = {
-    online: "bg-success",
-    offline: "bg-gray-400",
-    busy: "bg-danger",
-    away: "bg-warning",
-    none: ""
-  };
-  return statuses[status];
-}
-function generateInitials(name) {
-  const parts = name.trim().split(/\s+/);
-  if (parts.length === 1) {
-    return parts[0].charAt(0).toUpperCase();
-  }
-  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-function generateBgColor(name) {
-  const colors = [
-    "bg-blue-500",
-    "bg-green-500",
-    "bg-yellow-500",
-    "bg-purple-500",
-    "bg-pink-500",
-    "bg-indigo-500",
-    "bg-red-500",
-    "bg-orange-500",
-    "bg-teal-500",
-    "bg-cyan-500"
-  ];
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return colors[Math.abs(hash) % colors.length];
-}
-function avatar(options) {
-  const { src, alt, size = "md", shape = "circle", status = "none", className = "", href, initials, bgColor } = options;
-  const sizeClasses = getSizeClasses4(size);
-  const shapeClasses = getShapeClasses(shape);
-  const statusColor = getStatusClasses(status);
-  const displayInitials = initials || generateInitials(alt);
-  const displayBgColor = bgColor || generateBgColor(alt);
-  const containerClasses = [
-    "relative inline-flex items-center justify-center",
-    "overflow-hidden",
-    sizeClasses.container,
-    shapeClasses,
-    className
-  ].filter(Boolean).join(" ");
-  const contentHtml = src ? `<img src="${(0, import_utils2.escapeHtml)(src)}" alt="${(0, import_utils2.escapeHtml)(alt)}" class="w-full h-full object-cover">` : `<span class="font-medium text-white ${sizeClasses.text}">${(0, import_utils2.escapeHtml)(displayInitials)}</span>`;
-  const bgClasses = src ? "bg-gray-200" : displayBgColor;
-  const statusHtml = status !== "none" ? `<span class="absolute bottom-0 right-0 block ${sizeClasses.status} ${shapeClasses} ${statusColor} border-white"></span>` : "";
-  const innerHtml = `
-    <div class="${containerClasses} ${bgClasses}">
-      ${contentHtml}
-      ${statusHtml}
-    </div>
-  `;
-  if (href) {
-    return `<a href="${(0, import_utils2.escapeHtml)(href)}" class="inline-block">${innerHtml}</a>`;
-  }
-  return innerHtml;
-}
-function avatarGroup(avatars, options = {}) {
-  const { max = 5, size = "md", spacing = "normal", className = "" } = options;
-  const spacingClasses = {
-    tight: "-space-x-3",
-    normal: "-space-x-2",
-    loose: "-space-x-1"
-  };
-  const visibleAvatars = avatars.slice(0, max);
-  const remainingCount = avatars.length - max;
-  const avatarsHtml = visibleAvatars.map((opts, index) => {
-    const avatarHtml = avatar({ ...opts, size });
-    return `<div class="relative ring-2 ring-white rounded-full" style="z-index: ${visibleAvatars.length - index}">
-        ${avatarHtml}
-      </div>`;
-  }).join("\n");
-  const sizeClasses = getSizeClasses4(size);
-  const overflowHtml = remainingCount > 0 ? `<div class="relative ring-2 ring-white rounded-full" style="z-index: 0">
-        <div class="${sizeClasses.container} rounded-full bg-gray-200 flex items-center justify-center">
-          <span class="${sizeClasses.text} font-medium text-gray-600">+${remainingCount}</span>
-        </div>
-      </div>` : "";
-  return `<div class="flex ${spacingClasses[spacing]} ${className}">
-    ${avatarsHtml}
-    ${overflowHtml}
-  </div>`;
-}
-function avatarWithText(options) {
-  const { name, subtitle, align = "left", ...avatarOptions } = options;
-  const avatarHtml = avatar({ ...avatarOptions, alt: avatarOptions.alt || name });
-  const textHtml = `
-    <div class="${align === "right" ? "text-right" : ""}">
-      <div class="font-medium text-text-primary">${(0, import_utils2.escapeHtml)(name)}</div>
-      ${subtitle ? `<div class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(subtitle)}</div>` : ""}
-    </div>
-  `;
-  const flexDirection = align === "right" ? "flex-row-reverse" : "flex-row";
-  return `<div class="flex items-center gap-3 ${flexDirection}">
-    ${avatarHtml}
-    ${textHtml}
-  </div>`;
-}
-
-// libs/ui/src/components/modal.ts
-function isSafeUrl(url) {
-  if (!url) return false;
-  const lower = url.toLowerCase().trim();
-  const isSafe = lower.startsWith("http://") || lower.startsWith("https://") || lower.startsWith("/") || lower.startsWith("#") || lower.startsWith("mailto:") || lower.startsWith("tel:");
-  if (!isSafe) {
-    console.warn(`[FrontMCP] Blocked unsafe URL scheme in modal confirmHref: "${url.substring(0, 50)}..."`);
-  }
-  return isSafe;
-}
-function getSizeClasses5(size) {
-  const sizes = {
-    sm: "max-w-sm",
-    md: "max-w-md",
-    lg: "max-w-lg",
-    xl: "max-w-2xl",
-    full: "max-w-full mx-4"
-  };
-  return sizes[size];
-}
-function modal(content, options) {
-  const {
-    id,
-    title,
-    size = "md",
-    showClose = true,
-    closeOnBackdrop = true,
-    closeOnEscape = true,
-    footer,
-    className = "",
-    open = false
-  } = options;
-  const sizeClasses = getSizeClasses5(size);
-  const visibilityClasses = open ? "" : "hidden";
-  const headerHtml = title || showClose ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>` : "<div></div>"}
-        ${showClose ? `
-          <button
-            type="button"
-            class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${(0, import_utils2.escapeHtml)(id)}').classList.add('hidden')"
-            aria-label="Close"
-          >
-            <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="M6 18L18 6M6 6l12 12"/>
-            </svg>
-          </button>
-        ` : ""}
-      </div>` : "";
-  const footerHtml = footer ? `<div class="flex items-center justify-end gap-3 p-4 border-t border-divider">
-        ${footer}
-      </div>` : "";
-  const backdropClickHandler = closeOnBackdrop ? `onclick="if (event.target === this) this.classList.add('hidden')"` : "";
-  const escapeHandler = closeOnEscape ? `<script>
-        document.addEventListener('keydown', function(e) {
-          if (e.key === 'Escape') {
-            document.getElementById('${(0, import_utils2.escapeHtml)(id)}')?.classList.add('hidden');
-          }
-        });
-      </script>` : "";
-  return `
-    <div
-      id="${(0, import_utils2.escapeHtml)(id)}"
-      class="fixed inset-0 z-50 overflow-y-auto ${visibilityClasses}"
-      ${backdropClickHandler}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="${(0, import_utils2.escapeHtml)(id)}-title"
-    >
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
-
-      <!-- Modal container -->
-      <div class="flex min-h-full items-center justify-center p-4">
-        <div class="relative w-full ${sizeClasses} bg-white rounded-xl shadow-xl ${className}">
-          ${headerHtml}
-          <div class="p-4">
-            ${content}
-          </div>
-          ${footerHtml}
-        </div>
-      </div>
-    </div>
-    ${escapeHandler}
-  `;
-}
-function modalTrigger(triggerContent, modalId, options = {}) {
-  const { className = "", tag = "button" } = options;
-  const attrs = `
-    class="${className}"
-    onclick="document.getElementById('${(0, import_utils2.escapeHtml)(modalId)}').classList.remove('hidden')"
-  `;
-  if (tag === "button") {
-    return `<button type="button" ${attrs}>${triggerContent}</button>`;
-  }
-  return `<${tag} ${attrs}>${triggerContent}</${tag}>`;
-}
-function confirmModal(options) {
-  const {
-    id,
-    title = "Confirm Action",
-    message,
-    confirmText = "Confirm",
-    cancelText = "Cancel",
-    variant = "primary",
-    icon,
-    confirmHref
-  } = options;
-  const variantClasses = {
-    primary: "bg-primary hover:bg-primary/90 text-white",
-    danger: "bg-danger hover:bg-danger/90 text-white",
-    warning: "bg-warning hover:bg-warning/90 text-white"
-  };
-  const iconColors = {
-    primary: "text-primary bg-primary/10",
-    danger: "text-danger bg-danger/10",
-    warning: "text-warning bg-warning/10"
-  };
-  const defaultIcons = {
-    primary: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-    </svg>`,
-    danger: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-    </svg>`,
-    warning: `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-    </svg>`
-  };
-  const displayIcon = icon || defaultIcons[variant];
-  const content = `
-    <div class="text-center">
-      <div class="mx-auto w-12 h-12 rounded-full ${iconColors[variant]} flex items-center justify-center mb-4">
-        ${displayIcon}
-      </div>
-      <h3 class="text-lg font-semibold text-text-primary mb-2">${(0, import_utils2.escapeHtml)(title)}</h3>
-      <p class="text-text-secondary">${(0, import_utils2.escapeHtml)(message)}</p>
-    </div>
-  `;
-  const confirmButton = confirmHref && isSafeUrl(confirmHref) ? `<a
-        href="${(0, import_utils2.escapeHtml)(confirmHref)}"
-        class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
-      >
-        ${(0, import_utils2.escapeHtml)(confirmText)}
-      </a>` : `<button
-        type="button"
-        class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
-        onclick="document.getElementById('${(0, import_utils2.escapeHtml)(id)}').classList.add('hidden')"
-      >
-        ${(0, import_utils2.escapeHtml)(confirmText)}
-      </button>`;
-  const footer = `
-    <button
-      type="button"
-      class="px-4 py-2 rounded-lg border border-border text-text-primary hover:bg-gray-50 transition-colors"
-      onclick="document.getElementById('${(0, import_utils2.escapeHtml)(id)}').classList.add('hidden')"
-    >
-      ${(0, import_utils2.escapeHtml)(cancelText)}
-    </button>
-    ${confirmButton}
-  `;
-  return modal(content, {
-    id,
-    size: "sm",
-    showClose: false,
-    footer
-  });
-}
-function drawer(content, options) {
-  const {
-    id,
-    title,
-    position = "right",
-    size = "md",
-    showClose = true,
-    closeOnBackdrop = true,
-    footer,
-    className = "",
-    open = false
-  } = options;
-  const sizeClasses = {
-    left: { sm: "w-64", md: "w-80", lg: "w-96", xl: "w-[32rem]" },
-    right: { sm: "w-64", md: "w-80", lg: "w-96", xl: "w-[32rem]" },
-    top: { sm: "h-32", md: "h-48", lg: "h-64", xl: "h-96" },
-    bottom: { sm: "h-32", md: "h-48", lg: "h-64", xl: "h-96" }
-  };
-  const positionClasses = {
-    left: "inset-y-0 left-0",
-    right: "inset-y-0 right-0",
-    top: "inset-x-0 top-0",
-    bottom: "inset-x-0 bottom-0"
-  };
-  const fullSizeClasses = {
-    left: "h-full",
-    right: "h-full",
-    top: "w-full",
-    bottom: "w-full"
-  };
-  const visibilityClasses = open ? "" : "hidden";
-  const headerHtml = title || showClose ? `<div class="flex items-center justify-between p-4 border-b border-divider">
-        ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, import_utils2.escapeHtml)(title)}</h3>` : "<div></div>"}
-        ${showClose ? `
-          <button
-            type="button"
-            class="p-1 rounded-lg text-text-secondary hover:text-text-primary hover:bg-gray-100 transition-colors"
-            onclick="document.getElementById('${(0, import_utils2.escapeHtml)(id)}').classList.add('hidden')"
-            aria-label="Close"
-          >
-            <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="M6 18L18 6M6 6l12 12"/>
-            </svg>
-          </button>
-        ` : ""}
-      </div>` : "";
-  const footerHtml = footer ? `<div class="p-4 border-t border-divider">${footer}</div>` : "";
-  const backdropClickHandler = closeOnBackdrop ? `onclick="if (event.target === this) this.classList.add('hidden')"` : "";
-  return `
-    <div
-      id="${(0, import_utils2.escapeHtml)(id)}"
-      class="fixed inset-0 z-50 ${visibilityClasses}"
-      ${backdropClickHandler}
-      role="dialog"
-      aria-modal="true"
-    >
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50 transition-opacity"></div>
-
-      <!-- Drawer -->
-      <div class="fixed ${positionClasses[position]} ${sizeClasses[position][size]} ${fullSizeClasses[position]} bg-white shadow-xl flex flex-col ${className}">
-        ${headerHtml}
-        <div class="flex-1 overflow-y-auto p-4">
-          ${content}
-        </div>
-        ${footerHtml}
-      </div>
-    </div>
-  `;
-}
-
-// libs/ui/src/components/table.ts
-function getAlignClasses(align = "left") {
-  const alignments = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right"
-  };
-  return alignments[align];
-}
-function buildSortIndicator(direction) {
-  if (direction === "asc") {
-    return `<svg class="w-4 h-4 ml-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
-    </svg>`;
-  }
-  if (direction === "desc") {
-    return `<svg class="w-4 h-4 ml-1 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
-    </svg>`;
-  }
-  return `<svg class="w-4 h-4 ml-1 inline-block opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/>
-  </svg>`;
-}
-function buildTableHeader(columns, options) {
-  const { selectable, compact } = options;
-  const paddingClass = compact ? "px-3 py-2" : "px-4 py-3";
-  const selectAllCell = selectable ? `<th class="${paddingClass} w-12">
-        <input
-          type="checkbox"
-          class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
-          aria-label="Select all"
-        >
-      </th>` : "";
-  const headerCells = columns.map((col) => {
-    const alignClass = getAlignClasses(col.align);
-    const widthStyle = col.width ? `style="width: ${col.width}"` : "";
-    const sortableClasses = col.sortable ? "cursor-pointer hover:bg-gray-50" : "";
-    return `<th
-      class="${paddingClass} ${alignClass} font-semibold text-text-primary ${sortableClasses} ${col.headerClass || ""}"
-      ${widthStyle}
-    >
-      ${col.sortable ? `<span class="inline-flex items-center">${(0, import_utils2.escapeHtml)(col.header)}${buildSortIndicator(
-      col.sortDirection || null
-    )}</span>` : (0, import_utils2.escapeHtml)(col.header)}
-    </th>`;
-  }).join("\n");
-  return `<thead class="bg-gray-50 border-b border-border">
-    <tr>
-      ${selectAllCell}
-      ${headerCells}
-    </tr>
-  </thead>`;
-}
-function buildTableBody(data, columns, options) {
-  const { selectable, hoverable, striped, bordered, compact, rowKey = "id", onRowClick } = options;
-  const paddingClass = compact ? "px-3 py-2" : "px-4 py-3";
-  if (data.length === 0) {
-    const colspan = columns.length + (selectable ? 1 : 0);
-    const emptyContent = options.emptyContent || `
-      <div class="text-center py-8">
-        <svg class="w-12 h-12 mx-auto text-gray-300 mb-4" 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 class="text-text-secondary">${options.emptyMessage || "No data available"}</p>
-      </div>
-    `;
-    return `<tbody>
-      <tr>
-        <td colspan="${colspan}">${emptyContent}</td>
-      </tr>
-    </tbody>`;
-  }
-  const rows = data.map((row, rowIndex) => {
-    const rowId = String(row[rowKey] || rowIndex);
-    const rowClasses = [
-      hoverable ? "hover:bg-gray-50" : "",
-      striped && rowIndex % 2 === 1 ? "bg-gray-50/50" : "",
-      bordered ? "border-b border-border" : "",
-      onRowClick ? "cursor-pointer" : ""
-    ].filter(Boolean).join(" ");
-    const clickHandler = onRowClick ? `onclick="window.location.href='${(0, import_utils2.escapeHtml)(onRowClick.replace("{key}", rowId))}'"` : "";
-    const selectCell = selectable ? `<td class="${paddingClass}" onclick="event.stopPropagation()">
-          <input
-            type="checkbox"
-            class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
-            name="selected[]"
-            value="${(0, import_utils2.escapeHtml)(rowId)}"
-            aria-label="Select row"
-          >
-        </td>` : "";
-    const cells = columns.map((col) => {
-      const value = row[col.key];
-      const alignClass = getAlignClasses(col.align);
-      const cellContent = col.render ? col.render(value, row, rowIndex) : (0, import_utils2.escapeHtml)(String(value ?? ""));
-      return `<td class="${paddingClass} ${alignClass} ${col.cellClass || ""}">${cellContent}</td>`;
-    }).join("\n");
-    return `<tr class="${rowClasses}" ${clickHandler}>
-      ${selectCell}
-      ${cells}
-    </tr>`;
-  }).join("\n");
-  return `<tbody class="divide-y divide-border">${rows}</tbody>`;
-}
-function buildLoadingOverlay() {
-  return `<div class="absolute inset-0 bg-white/70 flex items-center justify-center">
-    <svg class="animate-spin w-8 h-8 text-primary" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-    </svg>
-  </div>`;
-}
-function table(data, options) {
-  const { id, bordered, stickyHeader, className = "", loading = false } = options;
-  const tableClasses = ["w-full", bordered ? "border border-border" : "", "text-sm"].filter(Boolean).join(" ");
-  const wrapperClasses = ["relative overflow-x-auto", stickyHeader ? "max-h-96 overflow-y-auto" : "", className].filter(Boolean).join(" ");
-  const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  const header = buildTableHeader(options.columns, options);
-  const body = buildTableBody(data, options.columns, options);
-  const loadingOverlay = loading ? buildLoadingOverlay() : "";
-  return `<div class="${wrapperClasses}" ${idAttr}>
-    <table class="${tableClasses}">
-      ${header}
-      ${body}
-    </table>
-    ${loadingOverlay}
-  </div>`;
-}
-function pagination(options) {
-  const {
-    page,
-    totalPages,
-    totalItems,
-    pageSize = 10,
-    showPageSize = false,
-    pageSizeOptions = [10, 25, 50, 100],
-    className = "",
-    baseUrl = ""
-  } = options;
-  const buildPageLink = (pageNum, label, disabled, active) => {
-    const baseClasses = "px-3 py-2 text-sm rounded-lg transition-colors";
-    const stateClasses = disabled ? "text-gray-300 cursor-not-allowed" : active ? "bg-primary text-white" : "text-text-primary hover:bg-gray-100";
-    if (disabled) {
-      return `<span class="${baseClasses} ${stateClasses}">${label}</span>`;
-    }
-    const pageUrl = baseUrl ? `${baseUrl}${baseUrl.includes("?") ? "&" : "?"}page=${pageNum}` : `?page=${pageNum}`;
-    return `<a href="${(0, import_utils2.escapeHtml)(pageUrl)}" class="${baseClasses} ${stateClasses}">${label}</a>`;
-  };
-  const pageNumbers = [];
-  const maxVisible = 5;
-  if (totalPages <= maxVisible) {
-    for (let i = 1; i <= totalPages; i++) {
-      pageNumbers.push(i);
-    }
-  } else {
-    pageNumbers.push(1);
-    let start = Math.max(2, page - 1);
-    let end = Math.min(totalPages - 1, page + 1);
-    if (page <= 2) {
-      end = 4;
-    } else if (page >= totalPages - 1) {
-      start = totalPages - 3;
-    }
-    if (start > 2) {
-      pageNumbers.push(-1);
-    }
-    for (let i = start; i <= end; i++) {
-      pageNumbers.push(i);
-    }
-    if (end < totalPages - 1) {
-      pageNumbers.push(-1);
-    }
-    pageNumbers.push(totalPages);
-  }
-  const pagesHtml = pageNumbers.map((num) => {
-    if (num === -1) {
-      return '<span class="px-2 py-2 text-text-secondary">...</span>';
-    }
-    return buildPageLink(num, String(num), false, num === page);
-  }).join("\n");
-  const prevLink = buildPageLink(page - 1, "&larr; Previous", page <= 1, false);
-  const nextLink = buildPageLink(page + 1, "Next &rarr;", page >= totalPages, false);
-  const infoHtml = totalItems !== void 0 ? `<span class="text-sm text-text-secondary">
-        Showing ${(page - 1) * pageSize + 1} to ${Math.min(page * pageSize, totalItems)} of ${totalItems} results
-      </span>` : "";
-  const pageSizeHtml = showPageSize ? `<select
-        class="ml-4 px-2 py-1 text-sm border border-border rounded-lg bg-white"
-        onchange="window.location.href = '${baseUrl}${baseUrl.includes("?") ? "&" : "?"}page=1&pageSize=' + this.value"
-      >
-        ${pageSizeOptions.map((size) => `<option value="${size}" ${size === pageSize ? "selected" : ""}>${size} per page</option>`).join("")}
-      </select>` : "";
-  return `<div class="flex items-center justify-between ${className}">
-    <div class="flex items-center">
-      ${infoHtml}
-      ${pageSizeHtml}
-    </div>
-    <div class="flex items-center gap-1">
-      ${prevLink}
-      ${pagesHtml}
-      ${nextLink}
-    </div>
-  </div>`;
-}
-
-// libs/ui/src/components/list.ts
-var permissionIcons = {
-  read: `<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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
-  </svg>`,
-  write: `<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
-  </svg>`,
-  delete: `<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
-  </svg>`,
-  profile: `<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
-  </svg>`,
-  email: `<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
-  </svg>`,
-  settings: `<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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
-  </svg>`,
-  default: `<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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
-  </svg>`
-};
-function getPermissionIcon(scope, customIcon) {
-  if (customIcon) return customIcon;
-  const scopeLower = scope.toLowerCase();
-  if (scopeLower.includes("read")) return permissionIcons["read"];
-  if (scopeLower.includes("write") || scopeLower.includes("create") || scopeLower.includes("update"))
-    return permissionIcons["write"];
-  if (scopeLower.includes("delete")) return permissionIcons["delete"];
-  if (scopeLower.includes("profile")) return permissionIcons["profile"];
-  if (scopeLower.includes("email")) return permissionIcons["email"];
-  if (scopeLower.includes("settings") || scopeLower.includes("config")) return permissionIcons["settings"];
-  return permissionIcons["default"];
-}
-function permissionList(permissions, options = {}) {
-  const { id, checkable = false, inputName = "scopes", title, className = "" } = options;
-  const titleHtml = title ? `<h4 class="font-medium text-text-primary mb-3">${(0, import_utils2.escapeHtml)(title)}</h4>` : "";
-  const itemsHtml = permissions.map((perm, index) => {
-    const icon = getPermissionIcon(perm.scope, perm.icon);
-    const sensitiveClasses = perm.sensitive ? "border-warning/30 bg-warning/5" : "border-border";
-    const sensitiveLabel = perm.sensitive ? '<span class="text-xs text-warning font-medium ml-2">Sensitive</span>' : "";
-    const checkboxHtml = checkable ? `<input
-          type="checkbox"
-          name="${(0, import_utils2.escapeHtml)(inputName)}[]"
-          value="${(0, import_utils2.escapeHtml)(perm.scope)}"
-          class="w-4 h-4 rounded border-border text-primary focus:ring-primary/20"
-          ${perm.checked || perm.required ? "checked" : ""}
-          ${perm.required ? "disabled" : ""}
-          id="${id ? (0, import_utils2.escapeHtml)(id) : "perm"}-${index}"
-        >` : `<div class="w-5 h-5 rounded-full bg-success/10 text-success flex items-center justify-center">
-          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
-          </svg>
-        </div>`;
-    return `<div class="flex items-start gap-3 p-3 border ${sensitiveClasses} rounded-lg">
-      <div class="flex-shrink-0 mt-0.5 text-text-secondary">
-        ${icon}
-      </div>
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center">
-          <span class="font-medium text-text-primary">${(0, import_utils2.escapeHtml)(perm.name)}</span>
-          ${perm.required ? '<span class="text-xs text-text-secondary ml-2">(Required)</span>' : ""}
-          ${sensitiveLabel}
-        </div>
-        ${perm.description ? `<p class="text-sm text-text-secondary mt-0.5">${(0, import_utils2.escapeHtml)(perm.description)}</p>` : ""}
-      </div>
-      <div class="flex-shrink-0">
-        ${checkboxHtml}
-      </div>
-    </div>`;
-  }).join("\n");
-  const idAttr = id ? `id="${(0, import_utils2.escapeHtml)(id)}"` : "";
-  return `<div class="permission-list ${className}" ${idAttr}>
-    ${titleHtml}
-    <div class="space-y-2">
-      ${itemsHtml}
-    </div>
-  </div>`;
-}
-function featureList(features, options = {}) {
-  const { style = "check", includedIcon, excludedIcon, className = "" } = options;
-  const defaultIncludedIcon = `<svg class="w-5 h-5 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>`;
-  const defaultExcludedIcon = `<svg class="w-5 h-5 text-gray-300" 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>`;
-  const itemsHtml = features.map((feature, index) => {
-    const included = feature.included !== false;
-    let iconHtml;
-    if (style === "check") {
-      iconHtml = included ? includedIcon || defaultIncludedIcon : excludedIcon || defaultExcludedIcon;
-    } else if (style === "bullet") {
-      iconHtml = `<span class="w-2 h-2 rounded-full ${included ? "bg-primary" : "bg-gray-300"}"></span>`;
-    } else {
-      iconHtml = `<span class="text-sm font-medium ${included ? "text-primary" : "text-gray-400"}">${index + 1}.</span>`;
-    }
-    const textClasses = included ? "text-text-primary" : "text-text-secondary line-through";
-    return `<li class="flex items-start gap-3">
-      <div class="flex-shrink-0 mt-0.5">${iconHtml}</div>
-      <div class="flex-1">
-        <span class="${textClasses}">${(0, import_utils2.escapeHtml)(feature.name)}</span>
-        ${feature.description ? `<p class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(feature.description)}</p>` : ""}
-      </div>
-    </li>`;
-  }).join("\n");
-  return `<ul class="space-y-3 ${className}">${itemsHtml}</ul>`;
-}
-function descriptionList(items, options = {}) {
-  const { layout = "stacked", dividers = false, className = "" } = options;
-  const copyScript = `
-    <script>
-      function copyToClipboard(text, btn) {
-        navigator.clipboard.writeText(text).then(() => {
-          const originalText = 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 = originalText, 2000);
-        });
-      }
-    </script>
-  `;
-  const hasCopyable = items.some((item) => item.copyable);
-  if (layout === "horizontal") {
-    const itemsHtml2 = items.map((item) => {
-      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${(0, import_utils2.escapeHtml)(
-        item.description
-      )}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
-            <svg class="w-4 h-4 text-text-secondary" 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="py-3 sm:grid sm:grid-cols-3 sm:gap-4 ${dividers ? "border-b border-divider" : ""}">
-        <dt class="text-sm font-medium text-text-secondary">${(0, import_utils2.escapeHtml)(item.term)}</dt>
-        <dd class="mt-1 sm:mt-0 sm:col-span-2 text-sm text-text-primary flex items-center">
-          ${(0, import_utils2.escapeHtml)(item.description)}
-          ${copyBtn}
-        </dd>
-      </div>`;
-    }).join("\n");
-    return `<dl class="${className}">${itemsHtml2}</dl>${hasCopyable ? copyScript : ""}`;
-  }
-  if (layout === "grid") {
-    const itemsHtml2 = items.map((item) => {
-      const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${(0, import_utils2.escapeHtml)(
-        item.description
-      )}', this)" class="absolute top-2 right-2 p-1 rounded hover:bg-gray-100 transition-colors">
-            <svg class="w-4 h-4 text-text-secondary" 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="relative p-4 bg-gray-50 rounded-lg">
-        <dt class="text-sm font-medium text-text-secondary">${(0, import_utils2.escapeHtml)(item.term)}</dt>
-        <dd class="mt-1 text-sm text-text-primary font-medium">${(0, import_utils2.escapeHtml)(item.description)}</dd>
-        ${copyBtn}
-      </div>`;
-    }).join("\n");
-    return `<dl class="grid grid-cols-2 gap-4 ${className}">${itemsHtml2}</dl>${hasCopyable ? copyScript : ""}`;
-  }
-  const itemsHtml = items.map((item) => {
-    const copyBtn = item.copyable ? `<button type="button" onclick="copyToClipboard('${(0, import_utils2.escapeHtml)(
-      item.description
-    )}', this)" class="ml-2 p-1 rounded hover:bg-gray-100 transition-colors">
-          <svg class="w-4 h-4 text-text-secondary" 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="${dividers ? "py-3 border-b border-divider last:border-0" : "py-2"}">
-      <dt class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(item.term)}</dt>
-      <dd class="mt-1 text-sm text-text-primary font-medium flex items-center">
-        ${(0, import_utils2.escapeHtml)(item.description)}
-        ${copyBtn}
-      </dd>
-    </div>`;
-  }).join("\n");
-  return `<dl class="${className}">${itemsHtml}</dl>${hasCopyable ? copyScript : ""}`;
-}
-function actionList(items, className = "") {
-  const itemsHtml = items.map((item) => {
-    const baseClasses = [
-      "flex items-center gap-3 px-4 py-3 transition-colors",
-      item.disabled ? "opacity-50 cursor-not-allowed" : item.destructive ? "hover:bg-danger/5 text-danger cursor-pointer" : "hover:bg-gray-50 cursor-pointer"
-    ].join(" ");
-    const iconHtml = item.icon ? `<span class="flex-shrink-0 ${item.destructive ? "text-danger" : "text-text-secondary"}">${item.icon}</span>` : "";
-    const contentHtml = `
-      ${iconHtml}
-      <div class="flex-1 min-w-0">
-        <div class="font-medium ${item.destructive ? "text-danger" : "text-text-primary"}">${(0, import_utils2.escapeHtml)(
-      item.label
-    )}</div>
-        ${item.description ? `<p class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(item.description)}</p>` : ""}
-      </div>
-      <svg class="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-      </svg>
-    `;
-    if (item.disabled) {
-      return `<div class="${baseClasses}">${contentHtml}</div>`;
-    }
-    if (item.href) {
-      return `<a href="${(0, import_utils2.escapeHtml)(item.href)}" class="${baseClasses}">${contentHtml}</a>`;
-    }
-    return `<div class="${baseClasses}">${contentHtml}</div>`;
-  }).join("\n");
-  return `<div class="divide-y divide-divider ${className}">${itemsHtml}</div>`;
-}
-
-// libs/ui/src/layouts/presets.ts
-function authLayout(content, options) {
-  const { showBranding = true, logo, footer, ...baseOptions } = options;
-  const brandingHtml = showBranding && logo ? `<div class="text-center mb-8">${logo}</div>` : showBranding ? `<div class="text-center mb-8">
-          <div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary mb-4">
-            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
-            </svg>
-          </div>
-        </div>` : "";
-  const footerHtml = footer ? `<div class="mt-8 text-center text-sm text-text-secondary">${footer}</div>` : "";
-  const wrappedContent = `
-    <div class="bg-white rounded-2xl shadow-xl p-8">
-      ${brandingHtml}
-      ${content}
-    </div>
-    ${footerHtml}
-  `;
-  return baseLayout(wrappedContent, {
-    ...baseOptions,
-    pageType: "auth",
-    size: baseOptions.size ?? "sm",
-    alignment: "center",
-    background: "gradient"
-  });
-}
-function consentLayout(content, options) {
-  const { clientName, clientIcon, userInfo, ...baseOptions } = options;
-  const headerHtml = clientName ? `<div class="text-center mb-6">
-        ${clientIcon ? `<img src="${(0, import_utils2.escapeHtml)(clientIcon)}" alt="${(0, import_utils2.escapeHtml)(
-    clientName
-  )}" class="w-16 h-16 rounded-xl mx-auto mb-4">` : `<div class="inline-flex items-center justify-center w-16 h-16 rounded-xl bg-gradient-to-br from-primary to-secondary text-white font-bold text-2xl mx-auto mb-4">
-              ${(0, import_utils2.escapeHtml)(clientName.charAt(0).toUpperCase())}
-            </div>`}
-        <h1 class="text-2xl font-bold text-text-primary">${(0, import_utils2.escapeHtml)(clientName)}</h1>
-      </div>` : "";
-  const userInfoHtml = userInfo ? `<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg mb-6">
-        ${userInfo.avatar ? `<img src="${(0, import_utils2.escapeHtml)(userInfo.avatar)}" class="w-10 h-10 rounded-full">` : `<div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center font-medium">
-              ${(0, import_utils2.escapeHtml)((userInfo.name || userInfo.email || "U").charAt(0).toUpperCase())}
-            </div>`}
-        <div>
-          ${userInfo.name ? `<div class="font-medium text-text-primary">${(0, import_utils2.escapeHtml)(userInfo.name)}</div>` : ""}
-          ${userInfo.email ? `<div class="text-sm text-text-secondary">${(0, import_utils2.escapeHtml)(userInfo.email)}</div>` : ""}
-        </div>
-      </div>` : "";
-  const wrappedContent = `
-    ${headerHtml}
-    ${userInfoHtml}
-    ${content}
-  `;
-  return baseLayout(wrappedContent, {
-    ...baseOptions,
-    pageType: "consent",
-    size: baseOptions.size ?? "lg",
-    alignment: "top",
-    background: "solid"
-  });
-}
-function errorLayout(content, options) {
-  const {
-    errorCode,
-    errorTitle = "Something went wrong",
-    errorMessage,
-    showRetry = true,
-    retryUrl,
-    showHome = true,
-    homeUrl = "/",
-    ...baseOptions
-  } = options;
-  const errorHtml = `
-    <div class="text-center">
-      <!-- Error icon -->
-      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-danger/10 mb-6">
-        <svg class="w-10 h-10 text-danger" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-        </svg>
-      </div>
-
-      ${errorCode ? `<p class="text-6xl font-bold text-danger mb-2">${(0, import_utils2.escapeHtml)(errorCode)}</p>` : ""}
-      <h1 class="text-2xl font-bold text-text-primary mb-4">${(0, import_utils2.escapeHtml)(errorTitle)}</h1>
-      ${errorMessage ? `<p class="text-text-secondary mb-8">${(0, import_utils2.escapeHtml)(errorMessage)}</p>` : ""}
-
-      ${content}
-
-      <div class="flex gap-4 justify-center mt-8">
-        ${showRetry ? `<button onclick="${retryUrl ? `window.location.href='${(0, import_utils2.escapeHtml)(retryUrl)}'` : "window.location.reload()"}" class="px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">Try Again</button>` : ""}
-        ${showHome ? `<a href="${(0, import_utils2.escapeHtml)(
-    homeUrl
-  )}" class="px-6 py-3 bg-gray-100 hover:bg-gray-200 text-text-primary font-medium rounded-lg transition-colors">Go Home</a>` : ""}
-      </div>
-    </div>
-  `;
-  return baseLayout(errorHtml, {
-    ...baseOptions,
-    pageType: "error",
-    size: "sm",
-    alignment: "center",
-    background: "solid",
-    title: baseOptions.title ?? errorTitle
-  });
-}
-function loadingLayout(content, options) {
-  const { message = "Loading...", showSpinner = true, showProgress = false, progress = 0, ...baseOptions } = options;
-  const spinnerHtml = showSpinner ? `<div class="inline-flex items-center justify-center w-16 h-16 mb-6">
-        <svg class="animate-spin w-12 h-12 text-primary" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-      </div>` : "";
-  const progressHtml = showProgress ? `<div class="w-full bg-gray-200 rounded-full h-2 mb-4">
-        <div class="bg-primary h-2 rounded-full transition-all duration-300" style="width: ${progress}%"></div>
-      </div>` : "";
-  const loadingHtml = `
-    <div class="text-center">
-      ${spinnerHtml}
-      <h2 class="text-xl font-medium text-text-primary mb-2">${(0, import_utils2.escapeHtml)(message)}</h2>
-      ${progressHtml}
-      ${content}
-    </div>
-  `;
-  return baseLayout(loadingHtml, {
-    ...baseOptions,
-    pageType: "loading",
-    size: "sm",
-    alignment: "center",
-    background: "solid",
-    title: baseOptions.title ?? "Loading"
-  });
-}
-function successLayout(content, options) {
-  const {
-    successTitle = "Success!",
-    successMessage,
-    continueText = "Continue",
-    continueUrl,
-    autoClose,
-    ...baseOptions
-  } = options;
-  const autoCloseScript = autoClose ? `<script>
-        let countdown = ${autoClose};
-        const countdownEl = document.getElementById('countdown');
-        const interval = setInterval(() => {
-          countdown--;
-          if (countdownEl) countdownEl.textContent = countdown;
-          if (countdown <= 0) {
-            clearInterval(interval);
-            ${continueUrl ? `window.location.href = '${(0, import_utils2.escapeHtml)(continueUrl)}';` : "window.close();"}
-          }
-        }, 1000);
-      </script>` : "";
-  const successHtml = `
-    <div class="text-center">
-      <!-- Success icon -->
-      <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-success/10 mb-6">
-        <svg class="w-10 h-10 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
-        </svg>
-      </div>
-
-      <h1 class="text-2xl font-bold text-text-primary mb-4">${(0, import_utils2.escapeHtml)(successTitle)}</h1>
-      ${successMessage ? `<p class="text-text-secondary mb-8">${(0, import_utils2.escapeHtml)(successMessage)}</p>` : ""}
-
-      ${content}
-
-      ${continueUrl ? `<a href="${(0, import_utils2.escapeHtml)(
-    continueUrl
-  )}" class="inline-block mt-6 px-6 py-3 bg-primary hover:bg-primary/90 text-white font-medium rounded-lg transition-colors">${(0, import_utils2.escapeHtml)(
-    continueText
-  )}</a>` : ""}
-
-      ${autoClose ? `<p class="mt-4 text-sm text-text-secondary">Closing in <span id="countdown">${autoClose}</span> seconds...</p>` : ""}
-    </div>
-    ${autoCloseScript}
-  `;
-  return baseLayout(successHtml, {
-    ...baseOptions,
-    pageType: "success",
-    size: "sm",
-    alignment: "center",
-    background: "solid",
-    title: baseOptions.title ?? successTitle
-  });
-}
-function widgetLayout(content, options) {
-  const { maxWidth = "100%", showBorder = false, transparent = true, ...baseOptions } = options;
-  const containerClasses = [
-    "widget-container",
-    showBorder ? "border border-border rounded-lg" : "",
-    transparent ? "" : "bg-surface"
-  ].filter(Boolean).join(" ");
-  const wrappedContent = `
-    <div class="${containerClasses}" style="max-width: ${(0, import_utils2.escapeHtml)(maxWidth)}">
-      ${content}
-    </div>
-  `;
-  return baseLayout(wrappedContent, {
-    ...baseOptions,
-    pageType: "widget",
-    size: "full",
-    alignment: "start",
-    background: "none"
-  });
-}
-var authLayoutBuilder = createLayoutBuilder({
-  pageType: "auth",
-  size: "sm",
-  alignment: "center",
-  background: "gradient"
-});
-var consentLayoutBuilder = createLayoutBuilder({
-  pageType: "consent",
-  size: "lg",
-  alignment: "top",
-  background: "solid"
-});
-var errorLayoutBuilder = createLayoutBuilder({
-  pageType: "error",
-  size: "sm",
-  alignment: "center",
-  background: "solid"
-});
-
 // libs/ui/src/bridge/core/adapter-registry.ts
 var AdapterRegistry = class {
   _adapters = /* @__PURE__ */ new Map();
@@ -3465,1361 +593,70 @@ async function createBridge(config, registry) {
 // 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");
-
-// libs/ui/src/web-components/core/attribute-parser.ts
-function parseAttributeValue(attrName, value) {
-  if (attrName.startsWith("data-fmcp-")) {
-    return { key: null, value: void 0 };
-  }
-  if (attrName.startsWith("data-")) {
-    const dataKey = attrName.slice(5);
-    return {
-      key: dataKey,
-      value: value ?? "",
-      isData: true
+// libs/ui/src/react/hooks/context.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var McpBridgeContext = (0, import_react.createContext)(null);
+function McpBridgeProvider({ children, config, onReady, onError }) {
+  const [bridge, setBridge] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    let mounted = true;
+    let bridgeInstance = null;
+    const initBridge = async () => {
+      try {
+        bridgeInstance = new FrontMcpBridge(config);
+        await bridgeInstance.initialize();
+        if (mounted) {
+          setBridge(bridgeInstance);
+          setLoading(false);
+          onReady?.(bridgeInstance);
+        }
+      } catch (err) {
+        if (mounted) {
+          const error2 = err instanceof Error ? err : new Error(String(err));
+          setError(error2);
+          setLoading(false);
+          onError?.(error2);
+        }
+      }
     };
-  }
-  const camelName = kebabToCamel(attrName);
-  if (value === null || value === "") {
-    return { key: camelName, value: true };
-  }
-  if (value === "true") {
-    return { key: camelName, value: true };
-  }
-  if (value === "false") {
-    return { key: camelName, value: false };
-  }
-  const numValue = Number(value);
-  if (!isNaN(numValue) && value.trim() !== "") {
-    return { key: camelName, value: numValue };
-  }
-  if (value.startsWith("{") || value.startsWith("[")) {
-    try {
-      return { key: camelName, value: JSON.parse(value) };
-    } catch {
-    }
-  }
-  return { key: camelName, value };
+    initBridge();
+    return () => {
+      mounted = false;
+      if (bridgeInstance) {
+        bridgeInstance.dispose();
+      }
+    };
+  }, [config, onReady, onError]);
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      bridge,
+      loading,
+      error,
+      ready: !loading && !error && bridge !== null,
+      adapterId: bridge?.adapterId,
+      capabilities: bridge?.capabilities
+    }),
+    [bridge, loading, error]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(McpBridgeContext.Provider, { value: contextValue, children });
 }
-function kebabToCamel(str) {
-  return str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
-}
-function camelToKebab(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function getObservedAttributesFromSchema(schema) {
-  const attributes = [];
-  const schemaAny = schema;
-  if (schemaAny.shape) {
-    for (const key of Object.keys(schemaAny.shape)) {
-      attributes.push(camelToKebab(key));
-    }
-  }
-  const commonAttrs = ["class", "id", "style"];
-  attributes.push(...commonAttrs);
-  return [...new Set(attributes)];
-}
-function mergeAttributeIntoOptions(options, parsed) {
-  if (parsed.key === null || parsed.value === void 0) {
-    return options;
-  }
-  const result = { ...options };
-  if (parsed.isData) {
-    const data = result["data"] ?? {};
-    data[parsed.key] = String(parsed.value);
-    result["data"] = data;
-  } else {
-    result[parsed.key] = parsed.value;
-  }
-  return result;
-}
-
-// libs/ui/src/web-components/core/base-element.ts
-var HTMLElementBase = typeof HTMLElement !== "undefined" ? HTMLElement : class {
-  innerHTML = "";
-  dispatchEvent() {
-    return true;
-  }
-  getAttribute() {
-    return null;
-  }
-};
-var FmcpElement = class extends HTMLElementBase {
-  /** Internal options state */
-  _options = {};
-  /** Content passed as children (captured on connect) */
-  _content = "";
-  /** Whether component has been connected to DOM */
-  _connected = false;
-  /** Whether a render is pending (for batching) */
-  _pendingRender = false;
-  /** Whether initial render has completed */
-  _initialRenderComplete = false;
-  // ============================================
-  // Lifecycle Callbacks
-  // ============================================
-  /**
-   * Called when element is added to DOM.
-   * Captures content, parses attributes, and renders.
-   *
-   * Supports SSR hydration via `data-ssr` attribute:
-   * - If `data-ssr` is present, content was pre-rendered by server
-   * - Web component adopts existing content without re-rendering
-   * - This enables progressive enhancement for LLM platforms
-   */
-  connectedCallback() {
-    this._connected = true;
-    const isHydrating = this.hasAttribute("data-ssr");
-    if (isHydrating) {
-      this._content = this.innerHTML;
-      this._initialRenderComplete = true;
-      this.removeAttribute("data-ssr");
-      this._parseAttributes();
-      return;
-    }
-    if (!this._initialRenderComplete) {
-      this._content = this.innerHTML;
-    }
-    this._parseAttributes();
-    this._render();
-  }
-  /**
-   * Called when element is removed from DOM.
-   */
-  disconnectedCallback() {
-    this._connected = false;
-  }
-  /**
-   * Called when an observed attribute changes.
-   * Updates options and schedules re-render.
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (oldValue === newValue) return;
-    this._updateOptionFromAttribute(name, newValue);
-    this._scheduleRender();
-  }
-  // ============================================
-  // Property Accessors (React/Vue Compatibility)
-  // ============================================
-  /**
-   * Set all options at once (React pattern).
-   *
-   * @example
-   * ```typescript
-   * const el = document.querySelector('fmcp-button');
-   * el.options = { variant: 'danger', size: 'lg' };
-   * ```
-   */
-  set options(value) {
-    this._options = { ...this._options, ...value };
-    this._scheduleRender();
-  }
-  /**
-   * Get current options.
-   */
-  get options() {
-    return { ...this._options };
-  }
-  // ============================================
-  // Attribute Parsing
-  // ============================================
-  /**
-   * Parse all current attributes into options.
-   */
-  _parseAttributes() {
-    for (const attr of Array.from(this.attributes)) {
-      this._updateOptionFromAttribute(attr.name, attr.value);
-    }
-  }
-  /**
-   * Update a single option from an attribute change.
-   */
-  _updateOptionFromAttribute(attrName, value) {
-    const parsed = parseAttributeValue(attrName, value);
-    this._options = mergeAttributeIntoOptions(this._options, parsed);
-  }
-  // ============================================
-  // Rendering
-  // ============================================
-  /**
-   * Schedule a render on next microtask.
-   * Batches multiple attribute/property changes.
-   */
-  _scheduleRender() {
-    if (!this._connected || this._pendingRender) return;
-    this._pendingRender = true;
-    queueMicrotask(() => {
-      this._pendingRender = false;
-      if (this._connected) {
-        this._render();
-      }
-    });
-  }
-  /**
-   * Perform the actual render.
-   * Validates options and updates innerHTML.
-   */
-  _render() {
-    const mergedOptions = {
-      ...this.config.defaults,
-      ...this._options
-    };
-    const result = this.config.schema.safeParse(mergedOptions);
-    if (!result.success) {
-      const firstError = result.error.issues[0];
-      const invalidParam = firstError?.path.join(".") || "options";
-      this.innerHTML = (0, import_validation2.validationErrorBox)({
-        componentName: this.config.name,
-        invalidParam
-      });
-      this._initialRenderComplete = true;
-      return;
-    }
-    const html = this.renderHtml(result.data, this._content);
-    this.innerHTML = html;
-    this._initialRenderComplete = true;
-    this.dispatchEvent(
-      new CustomEvent("fmcp:render", {
-        bubbles: true,
-        detail: { options: result.data }
-      })
-    );
-  }
-  // ============================================
-  // Public API
-  // ============================================
-  /**
-   * Force an immediate re-render.
-   *
-   * @example
-   * ```typescript
-   * el.options = { loading: true };
-   * el.refresh(); // Force immediate render
-   * ```
-   */
-  refresh() {
-    if (this._connected) {
-      this._render();
-    }
-  }
-  /**
-   * Get the first child element (the actual rendered component).
-   *
-   * @typeParam T - Expected element type
-   * @returns The first child element or null
-   *
-   * @example
-   * ```typescript
-   * const button = el.getInnerElement<HTMLButtonElement>();
-   * button?.focus();
-   * ```
-   */
-  getInnerElement() {
-    return this.firstElementChild;
-  }
-  /**
-   * Update content and re-render.
-   *
-   * @param content - New content string
-   */
-  setContent(content) {
-    this._content = content;
-    this._scheduleRender();
-  }
-};
-
-// libs/ui/src/web-components/elements/fmcp-button.ts
-var FmcpButton = class extends FmcpElement {
-  config = {
-    name: "button",
-    schema: ButtonOptionsSchema,
-    defaults: {
-      variant: "primary",
-      size: "md",
-      type: "button"
-    }
-  };
-  /**
-   * Attributes to observe for changes.
-   */
-  static get observedAttributes() {
-    return getObservedAttributesFromSchema(ButtonOptionsSchema);
-  }
-  /**
-   * Render the button HTML using the button() function.
-   */
-  renderHtml(options, content) {
-    return button(content, options);
-  }
-  // ============================================
-  // Property Setters (Individual Props)
-  // ============================================
-  set variant(value) {
-    this._options.variant = value;
-    this._scheduleRender();
-  }
-  get variant() {
-    return this._options.variant;
-  }
-  set size(value) {
-    this._options.size = value;
-    this._scheduleRender();
-  }
-  get size() {
-    return this._options.size;
-  }
-  set type(value) {
-    this._options.type = value;
-    this._scheduleRender();
-  }
-  get type() {
-    return this._options.type;
-  }
-  set disabled(value) {
-    this._options.disabled = value;
-    this._scheduleRender();
-  }
-  get disabled() {
-    return this._options.disabled ?? false;
-  }
-  set loading(value) {
-    this._options.loading = value;
-    this._scheduleRender();
-  }
-  get loading() {
-    return this._options.loading ?? false;
-  }
-  set fullWidth(value) {
-    this._options.fullWidth = value;
-    this._scheduleRender();
-  }
-  get fullWidth() {
-    return this._options.fullWidth ?? false;
-  }
-  set iconOnly(value) {
-    this._options.iconOnly = value;
-    this._scheduleRender();
-  }
-  get iconOnly() {
-    return this._options.iconOnly ?? false;
-  }
-  set iconBefore(value) {
-    this._options.iconBefore = value;
-    this._scheduleRender();
-  }
-  get iconBefore() {
-    return this._options.iconBefore;
-  }
-  set iconAfter(value) {
-    this._options.iconAfter = value;
-    this._scheduleRender();
-  }
-  get iconAfter() {
-    return this._options.iconAfter;
-  }
-  set href(value) {
-    this._options.href = value;
-    this._scheduleRender();
-  }
-  get href() {
-    return this._options.href;
-  }
-  set buttonAriaLabel(value) {
-    this._options.ariaLabel = value;
-    this._scheduleRender();
-  }
-  get buttonAriaLabel() {
-    return this._options.ariaLabel;
-  }
-  // ============================================
-  // Event Forwarding
-  // ============================================
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("click", this._handleClick.bind(this));
-  }
-  _handleClick(e) {
-    const innerButton = this.getInnerElement();
-    if (innerButton && (e.target === innerButton || innerButton.contains(e.target))) {
-      this.dispatchEvent(
-        new CustomEvent("fmcp:click", {
-          bubbles: true,
-          detail: { options: this.options }
-        })
-      );
-    }
-  }
-  // ============================================
-  // Public API
-  // ============================================
-  /**
-   * Focus the inner button element.
-   */
-  focus() {
-    const inner = this.getInnerElement();
-    inner?.focus();
-  }
-  /**
-   * Blur the inner button element.
-   */
-  blur() {
-    const inner = this.getInnerElement();
-    inner?.blur();
-  }
-  /**
-   * Click the inner button programmatically.
-   */
-  click() {
-    const inner = this.getInnerElement();
-    inner?.click();
-  }
-};
-function registerFmcpButton() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-button")) {
-    customElements.define("fmcp-button", FmcpButton);
-  }
-}
-
-// libs/ui/src/web-components/elements/fmcp-card.ts
-var FmcpCard = class extends FmcpElement {
-  config = {
-    name: "card",
-    schema: CardOptionsSchema,
-    defaults: {
-      variant: "default",
-      size: "md"
-    }
-  };
-  static get observedAttributes() {
-    return getObservedAttributesFromSchema(CardOptionsSchema);
-  }
-  renderHtml(options, content) {
-    return card(content, options);
-  }
-  // Property setters
-  set variant(value) {
-    this._options.variant = value;
-    this._scheduleRender();
-  }
-  get variant() {
-    return this._options.variant;
-  }
-  set size(value) {
-    this._options.size = value;
-    this._scheduleRender();
-  }
-  get size() {
-    return this._options.size;
-  }
-  set cardTitle(value) {
-    this._options.title = value;
-    this._scheduleRender();
-  }
-  get cardTitle() {
-    return this._options.title;
-  }
-  set subtitle(value) {
-    this._options.subtitle = value;
-    this._scheduleRender();
-  }
-  get subtitle() {
-    return this._options.subtitle;
-  }
-  set clickable(value) {
-    this._options.clickable = value;
-    this._scheduleRender();
-  }
-  get clickable() {
-    return this._options.clickable ?? false;
-  }
-  set href(value) {
-    this._options.href = value;
-    this._scheduleRender();
-  }
-  get href() {
-    return this._options.href;
-  }
-  set footer(value) {
-    this._options.footer = value;
-    this._scheduleRender();
-  }
-  get footer() {
-    return this._options.footer;
-  }
-  set headerActions(value) {
-    this._options.headerActions = value;
-    this._scheduleRender();
-  }
-  get headerActions() {
-    return this._options.headerActions;
-  }
-};
-function registerFmcpCard() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-card")) {
-    customElements.define("fmcp-card", FmcpCard);
-  }
-}
-
-// libs/ui/src/web-components/elements/fmcp-alert.ts
-var FmcpAlert = class extends FmcpElement {
-  config = {
-    name: "alert",
-    schema: AlertOptionsSchema,
-    defaults: {
-      variant: "info",
-      showIcon: true
-    }
-  };
-  static get observedAttributes() {
-    return getObservedAttributesFromSchema(AlertOptionsSchema);
-  }
-  renderHtml(options, content) {
-    return alert(content, options);
-  }
-  // Property setters
-  set variant(value) {
-    this._options.variant = value;
-    this._scheduleRender();
-  }
-  get variant() {
-    return this._options.variant;
-  }
-  set alertTitle(value) {
-    this._options.title = value;
-    this._scheduleRender();
-  }
-  get alertTitle() {
-    return this._options.title;
-  }
-  set showIcon(value) {
-    this._options.showIcon = value;
-    this._scheduleRender();
-  }
-  get showIcon() {
-    return this._options.showIcon ?? true;
-  }
-  set dismissible(value) {
-    this._options.dismissible = value;
-    this._scheduleRender();
-  }
-  get dismissible() {
-    return this._options.dismissible ?? false;
-  }
-  set actions(value) {
-    this._options.actions = value;
-    this._scheduleRender();
-  }
-  get actions() {
-    return this._options.actions;
-  }
-};
-function registerFmcpAlert() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-alert")) {
-    customElements.define("fmcp-alert", FmcpAlert);
-  }
-}
-
-// libs/ui/src/web-components/elements/fmcp-badge.ts
-var FmcpBadge = class extends FmcpElement {
-  config = {
-    name: "badge",
-    schema: BadgeOptionsSchema,
-    defaults: {
-      variant: "default",
-      size: "md"
-    }
-  };
-  static get observedAttributes() {
-    return getObservedAttributesFromSchema(BadgeOptionsSchema);
-  }
-  renderHtml(options, content) {
-    return badge(content, options);
-  }
-  // Property setters
-  set variant(value) {
-    this._options.variant = value;
-    this._scheduleRender();
-  }
-  get variant() {
-    return this._options.variant;
-  }
-  set size(value) {
-    this._options.size = value;
-    this._scheduleRender();
-  }
-  get size() {
-    return this._options.size;
-  }
-  set pill(value) {
-    this._options.pill = value;
-    this._scheduleRender();
-  }
-  get pill() {
-    return this._options.pill ?? false;
-  }
-  set dot(value) {
-    this._options.dot = value;
-    this._scheduleRender();
-  }
-  get dot() {
-    return this._options.dot ?? false;
-  }
-  set removable(value) {
-    this._options.removable = value;
-    this._scheduleRender();
-  }
-  get removable() {
-    return this._options.removable ?? false;
-  }
-  set icon(value) {
-    this._options.icon = value;
-    this._scheduleRender();
-  }
-  get icon() {
-    return this._options.icon;
-  }
-};
-function registerFmcpBadge() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-badge")) {
-    customElements.define("fmcp-badge", FmcpBadge);
-  }
-}
-
-// libs/ui/src/web-components/elements/fmcp-input.ts
-var FmcpInput = class extends FmcpElement {
-  config = {
-    name: "input",
-    schema: InputOptionsSchema,
-    defaults: {
-      type: "text",
-      size: "md",
-      state: "default"
-    }
-  };
-  static get observedAttributes() {
-    return [
-      "name",
-      "type",
-      "id",
-      "value",
-      "placeholder",
-      "label",
-      "helper",
-      "error",
-      "size",
-      "state",
-      "required",
-      "disabled",
-      "readonly",
-      "autocomplete",
-      "pattern",
-      "min",
-      "max",
-      "step",
-      "class",
-      "icon-before",
-      "icon-after"
-    ];
-  }
-  renderHtml(options, _content) {
-    return input(options);
-  }
-  // ============================================
-  // Property Setters
-  // ============================================
-  set name(value) {
-    this._options.name = value;
-    this._scheduleRender();
-  }
-  get name() {
-    return this._options.name ?? "";
-  }
-  set type(value) {
-    this._options.type = value;
-    this._scheduleRender();
-  }
-  get type() {
-    return this._options.type;
-  }
-  set label(value) {
-    this._options.label = value;
-    this._scheduleRender();
-  }
-  get label() {
-    return this._options.label;
-  }
-  set placeholder(value) {
-    this._options.placeholder = value;
-    this._scheduleRender();
-  }
-  get placeholder() {
-    return this._options.placeholder;
-  }
-  set helper(value) {
-    this._options.helper = value;
-    this._scheduleRender();
-  }
-  get helper() {
-    return this._options.helper;
-  }
-  set error(value) {
-    this._options.error = value;
-    this._scheduleRender();
-  }
-  get error() {
-    return this._options.error;
-  }
-  set size(value) {
-    this._options.size = value;
-    this._scheduleRender();
-  }
-  get size() {
-    return this._options.size;
-  }
-  set state(value) {
-    this._options.state = value;
-    this._scheduleRender();
-  }
-  get state() {
-    return this._options.state;
-  }
-  set required(value) {
-    this._options.required = value;
-    this._scheduleRender();
-  }
-  get required() {
-    return this._options.required ?? false;
-  }
-  set disabled(value) {
-    this._options.disabled = value;
-    this._scheduleRender();
-  }
-  get disabled() {
-    return this._options.disabled ?? false;
-  }
-  set readonly(value) {
-    this._options.readonly = value;
-    this._scheduleRender();
-  }
-  get readonly() {
-    return this._options.readonly ?? false;
-  }
-  // ============================================
-  // Form Integration
-  // ============================================
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("input", this._handleInput.bind(this));
-    this.addEventListener("change", this._handleChange.bind(this));
-  }
-  _handleInput(e) {
-    const inputEl = this.querySelector("input");
-    if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
-      this.dispatchEvent(
-        new CustomEvent("fmcp:input", {
-          bubbles: true,
-          detail: { value: inputEl.value, name: this._options.name }
-        })
-      );
-    }
-  }
-  _handleChange(e) {
-    const inputEl = this.querySelector("input");
-    if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
-      this.dispatchEvent(
-        new CustomEvent("fmcp:change", {
-          bubbles: true,
-          detail: { value: inputEl.value, name: this._options.name }
-        })
-      );
-    }
-  }
-  /**
-   * Get current input value.
-   */
-  get value() {
-    const inputEl = this.querySelector("input");
-    return inputEl?.value ?? this._options.value ?? "";
-  }
-  /**
-   * Set input value.
-   */
-  set value(val) {
-    const inputEl = this.querySelector("input");
-    if (inputEl) {
-      inputEl.value = val;
-    }
-    this._options.value = val;
-  }
-  /**
-   * Get validity state.
-   */
-  get validity() {
-    return this.querySelector("input")?.validity;
-  }
-  /**
-   * Check validity.
-   */
-  checkValidity() {
-    return this.querySelector("input")?.checkValidity() ?? true;
-  }
-  /**
-   * Report validity.
-   */
-  reportValidity() {
-    return this.querySelector("input")?.reportValidity() ?? true;
-  }
-  /**
-   * Focus the input.
-   */
-  focus() {
-    this.querySelector("input")?.focus();
-  }
-  /**
-   * Blur the input.
-   */
-  blur() {
-    this.querySelector("input")?.blur();
-  }
-  /**
-   * Select all text.
-   */
-  select() {
-    this.querySelector("input")?.select();
-  }
-};
-function registerFmcpInput() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-input")) {
-    customElements.define("fmcp-input", FmcpInput);
-  }
-}
-
-// libs/ui/src/web-components/elements/fmcp-select.ts
-var FmcpSelect = class extends FmcpElement {
-  config = {
-    name: "select",
-    schema: SelectOptionsSchema,
-    defaults: {
-      size: "md",
-      state: "default"
-    }
-  };
-  /** Select options stored separately since they're complex objects */
-  _selectOptions = [];
-  static get observedAttributes() {
-    return [
-      "name",
-      "id",
-      "value",
-      "placeholder",
-      "label",
-      "helper",
-      "error",
-      "size",
-      "state",
-      "required",
-      "disabled",
-      "multiple",
-      "class"
-    ];
-  }
-  renderHtml(options, _content) {
-    const mergedOptions = {
-      ...options,
-      options: this._selectOptions.length > 0 ? this._selectOptions : options.options
-    };
-    return select(mergedOptions);
-  }
-  // ============================================
-  // Property Setters
-  // ============================================
-  set name(value) {
-    this._options.name = value;
-    this._scheduleRender();
-  }
-  get name() {
-    return this._options.name ?? "";
-  }
-  set label(value) {
-    this._options.label = value;
-    this._scheduleRender();
-  }
-  get label() {
-    return this._options.label;
-  }
-  set placeholder(value) {
-    this._options.placeholder = value;
-    this._scheduleRender();
-  }
-  get placeholder() {
-    return this._options.placeholder;
-  }
-  set helper(value) {
-    this._options.helper = value;
-    this._scheduleRender();
-  }
-  get helper() {
-    return this._options.helper;
-  }
-  set error(value) {
-    this._options.error = value;
-    this._scheduleRender();
-  }
-  get error() {
-    return this._options.error;
-  }
-  set size(value) {
-    this._options.size = value;
-    this._scheduleRender();
-  }
-  get size() {
-    return this._options.size;
-  }
-  set state(value) {
-    this._options.state = value;
-    this._scheduleRender();
-  }
-  get state() {
-    return this._options.state;
-  }
-  set required(value) {
-    this._options.required = value;
-    this._scheduleRender();
-  }
-  get required() {
-    return this._options.required ?? false;
-  }
-  set disabled(value) {
-    this._options.disabled = value;
-    this._scheduleRender();
-  }
-  get disabled() {
-    return this._options.disabled ?? false;
-  }
-  set multiple(value) {
-    this._options.multiple = value;
-    this._scheduleRender();
-  }
-  get multiple() {
-    return this._options.multiple ?? false;
-  }
-  /**
-   * Set select options (array of { value, label, disabled?, selected? })
-   */
-  set selectOptions(value) {
-    this._selectOptions = value;
-    this._scheduleRender();
-  }
-  get selectOptions() {
-    return this._selectOptions;
-  }
-  // ============================================
-  // Form Integration
-  // ============================================
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("change", this._handleChange.bind(this));
-  }
-  _handleChange(e) {
-    const selectEl = this.querySelector("select");
-    if (selectEl && (e.target === selectEl || selectEl.contains(e.target))) {
-      this.dispatchEvent(
-        new CustomEvent("fmcp:change", {
-          bubbles: true,
-          detail: {
-            value: selectEl.value,
-            name: this._options.name,
-            selectedOptions: Array.from(selectEl.selectedOptions).map((opt) => opt.value)
-          }
-        })
-      );
-    }
-  }
-  /**
-   * Get current select value.
-   */
-  get value() {
-    const selectEl = this.querySelector("select");
-    return selectEl?.value ?? this._options.value ?? "";
-  }
-  /**
-   * Set select value.
-   */
-  set value(val) {
-    const selectEl = this.querySelector("select");
-    if (selectEl) {
-      selectEl.value = val;
-    }
-    this._options.value = val;
-  }
-  /**
-   * Get selected options (for multiple select).
-   */
-  get selectedOptions() {
-    const selectEl = this.querySelector("select");
-    return selectEl ? Array.from(selectEl.selectedOptions).map((opt) => opt.value) : [];
-  }
-  /**
-   * Get validity state.
-   */
-  get validity() {
-    return this.querySelector("select")?.validity;
-  }
-  /**
-   * Check validity.
-   */
-  checkValidity() {
-    return this.querySelector("select")?.checkValidity() ?? true;
-  }
-  /**
-   * Report validity.
-   */
-  reportValidity() {
-    return this.querySelector("select")?.reportValidity() ?? true;
-  }
-  /**
-   * Focus the select.
-   */
-  focus() {
-    this.querySelector("select")?.focus();
-  }
-  /**
-   * Blur the select.
-   */
-  blur() {
-    this.querySelector("select")?.blur();
-  }
-};
-function registerFmcpSelect() {
-  if (typeof customElements !== "undefined" && !customElements.get("fmcp-select")) {
-    customElements.define("fmcp-select", FmcpSelect);
-  }
-}
-
-// libs/ui/src/web-components/register.ts
-function registerAllComponents() {
-  registerFmcpButton();
-  registerFmcpCard();
-  registerFmcpAlert();
-  registerFmcpBadge();
-  registerFmcpInput();
-  registerFmcpSelect();
-}
-if (typeof window !== "undefined" && typeof document !== "undefined") {
-  const script = document.currentScript;
-  if (script?.hasAttribute("data-auto-register")) {
-    registerAllComponents();
-  }
-}
-
-// libs/ui/src/react/Card.tsx
-var import_styles = require("@frontmcp/uipack/styles");
-
-// libs/ui/src/render/prerender.ts
-async function renderToString(element) {
-  const { prerender } = await import("react-dom/static");
-  const { prelude } = await prerender(element);
-  const reader = prelude.getReader();
-  const chunks = [];
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    if (value) chunks.push(value);
-  }
-  const totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
-  const combined = new Uint8Array(totalLength);
-  let offset = 0;
-  for (const chunk of chunks) {
-    combined.set(chunk, offset);
-    offset += chunk.length;
-  }
-  return new TextDecoder().decode(combined);
-}
-function renderToStringSync(element) {
-  const ReactDOMServer = require("react-dom/server");
-  return ReactDOMServer.renderToStaticMarkup(element);
-}
-
-// libs/ui/src/react/Card.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function Card({
-  title,
-  subtitle,
-  headerActions,
-  footer,
-  variant = "default",
-  size = "md",
-  className,
-  id,
-  clickable,
-  href,
-  children
-}) {
-  const variantClasses = (0, import_styles.getCardVariantClasses)(variant);
-  const sizeClasses = (0, import_styles.getCardSizeClasses)(size);
-  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
-  const allClasses = (0, import_styles.cn)(variantClasses, sizeClasses, clickableClasses, className);
-  const hasHeader = title || subtitle || headerActions;
-  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold text-text-primary", children: title }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-text-secondary mt-1", children: subtitle })
-      ] }),
-      headerActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center gap-2", children: headerActions })
-    ] }),
-    children,
-    footer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4 pt-4 border-t border-divider", children: footer })
-  ] });
-  if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, className: allClasses, id, children: content });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: allClasses, id, children: content });
-}
-async function renderCard(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToString(element);
-}
-function renderCardSync(props) {
-  const { children, headerActions, footer, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Card,
-    {
-      ...rest,
-      headerActions: headerActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: headerActions } }) : void 0,
-      footer: footer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: footer } }) : void 0,
-      children: children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { dangerouslySetInnerHTML: { __html: children } }) : void 0
-    }
-  );
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Badge.tsx
-var import_styles2 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function Badge({
-  variant = "default",
-  size = "md",
-  pill = false,
-  icon,
-  dot = false,
-  className,
-  removable = false,
-  onRemove,
-  children
-}) {
-  if (dot) {
-    const dotClasses = (0, import_styles2.cn)(
-      "inline-block rounded-full",
-      (0, import_styles2.getBadgeDotSizeClasses)(size),
-      (0, import_styles2.getBadgeDotVariantClasses)(variant),
-      className
-    );
-    const label = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: dotClasses, "aria-label": label, title: label });
-  }
-  const variantClasses = (0, import_styles2.getBadgeVariantClasses)(variant);
-  const sizeClasses = (0, import_styles2.getBadgeSizeClasses)(size);
-  const baseClasses = (0, import_styles2.cn)(
-    "inline-flex items-center font-medium",
-    pill ? "rounded-full" : "rounded-md",
-    variantClasses,
-    sizeClasses,
-    className
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: baseClasses, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mr-1", children: icon }),
-    children,
-    removable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "ml-1.5 -mr-1 hover:opacity-70 transition-opacity",
-        "aria-label": "Remove",
-        onClick: onRemove,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
-      }
-    )
-  ] });
-}
-async function renderBadge(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderBadgeSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Badge, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Button.tsx
-var import_styles3 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function Button({
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  loading = false,
-  fullWidth = false,
-  iconPosition = "left",
-  icon,
-  iconOnly = false,
-  type = "button",
-  className,
-  onClick,
-  children
-}) {
-  const variantClasses = (0, import_styles3.getButtonVariantClasses)(variant);
-  const sizeClasses = (0, import_styles3.getButtonSizeClasses)(size, iconOnly);
-  const disabledClasses = disabled || loading ? "opacity-50 cursor-not-allowed" : "";
-  const widthClasses = fullWidth ? "w-full" : "";
-  const allClasses = (0, import_styles3.cn)(import_styles3.BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
-  const iconElement = icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: iconPosition === "left" ? "mr-2" : "ml-2", children: icon });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type, className: allClasses, disabled: disabled || loading, onClick, children: [
-    loading && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mr-2", dangerouslySetInnerHTML: { __html: import_styles3.LOADING_SPINNER } }),
-    !loading && icon && iconPosition === "left" && iconElement,
-    !iconOnly && children,
-    !loading && icon && iconPosition === "right" && iconElement
-  ] });
-}
-async function renderButton(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderButtonSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/Alert.tsx
-var import_styles4 = require("@frontmcp/uipack/styles");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function Alert({
-  variant = "info",
-  title,
-  icon,
-  showIcon = true,
-  dismissible = false,
-  onDismiss,
-  className,
-  children
-}) {
-  const variantStyles = (0, import_styles4.getAlertVariantClasses)(variant);
-  const allClasses = (0, import_styles4.cn)(import_styles4.ALERT_BASE_CLASSES, variantStyles.container, className);
-  const iconContent = icon || (showIcon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      className: (0, import_styles4.cn)("flex-shrink-0", variantStyles.icon),
-      dangerouslySetInnerHTML: { __html: import_styles4.ALERT_ICONS[variant] }
-    }
-  ) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: allClasses, role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex", children: [
-    iconContent && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-shrink-0 mr-3", children: iconContent }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h4", { className: "font-semibold mb-1", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm", children })
-    ] }),
-    dismissible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "flex-shrink-0 ml-3 hover:opacity-70 transition-opacity",
-        "aria-label": "Dismiss",
-        onClick: onDismiss,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: import_styles4.CLOSE_ICON } })
-      }
-    )
-  ] }) });
-}
-async function renderAlert(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToString(element);
-}
-function renderAlertSync(props) {
-  const { children, icon, ...rest } = props;
-  const element = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Alert, { ...rest, icon: icon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : void 0, children });
-  return renderToStringSync(element);
-}
-
-// libs/ui/src/react/hooks/context.tsx
-var import_react = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var McpBridgeContext = (0, import_react.createContext)(null);
-function McpBridgeProvider({ children, config, onReady, onError }) {
-  const [bridge, setBridge] = (0, import_react.useState)(null);
-  const [loading, setLoading] = (0, import_react.useState)(true);
-  const [error, setError] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
-    let mounted = true;
-    let bridgeInstance = null;
-    const initBridge = async () => {
-      try {
-        bridgeInstance = new FrontMcpBridge(config);
-        await bridgeInstance.initialize();
-        if (mounted) {
-          setBridge(bridgeInstance);
-          setLoading(false);
-          onReady?.(bridgeInstance);
-        }
-      } catch (err) {
-        if (mounted) {
-          const error2 = err instanceof Error ? err : new Error(String(err));
-          setError(error2);
-          setLoading(false);
-          onError?.(error2);
-        }
-      }
-    };
-    initBridge();
-    return () => {
-      mounted = false;
-      if (bridgeInstance) {
-        bridgeInstance.dispose();
-      }
-    };
-  }, [config, onReady, onError]);
-  const contextValue = (0, import_react.useMemo)(
-    () => ({
-      bridge,
-      loading,
-      error,
-      ready: !loading && !error && bridge !== null,
-      adapterId: bridge?.adapterId,
-      capabilities: bridge?.capabilities
-    }),
-    [bridge, loading, error]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(McpBridgeContext.Provider, { value: contextValue, children });
-}
-var SSR_DEFAULT_CONTEXT = {
-  bridge: null,
-  loading: false,
-  error: null,
-  ready: false,
-  adapterId: void 0,
-  capabilities: void 0
-};
-function useMcpBridgeContext() {
-  const context = (0, import_react.useContext)(McpBridgeContext);
-  if (!context) {
-    return SSR_DEFAULT_CONTEXT;
-  }
-  return context;
+var SSR_DEFAULT_CONTEXT = {
+  bridge: null,
+  loading: false,
+  error: null,
+  ready: false,
+  adapterId: void 0,
+  capabilities: void 0
+};
+function useMcpBridgeContext() {
+  const context = (0, import_react.useContext)(McpBridgeContext);
+  if (!context) {
+    return SSR_DEFAULT_CONTEXT;
+  }
+  return context;
 }
 function useMcpBridge() {
   const { bridge } = useMcpBridgeContext();
@@ -5102,583 +939,3 @@ function useOpenLink() {
     [bridge]
   );
 }
-
-// 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 sanitizeComponentName(name) {
-  if (isValidComponentName(name)) {
-    return name;
-  }
-  const sanitized = name.replace(/[^a-zA-Z0-9_$]/g, "_").replace(/^[0-9]/, "_$&");
-  return sanitized || "Component";
-}
-var REACT_CDN = {
-  react: "https://esm.sh/react@19",
-  reactDom: "https://esm.sh/react-dom@19/client"
-};
-var INLINE_REACT_PLACEHOLDER = `
-// React runtime not available inline yet.
-// For blocked-network platforms, use pre-rendered HTML templates.
-console.warn('[FrontMCP] React hydration not available on this platform.');
-`;
-var ReactRenderer = class {
-  type = "react";
-  priority = 20;
-  // Higher priority than HTML
-  /**
-   * Check if this renderer can handle the given template.
-   *
-   * Accepts:
-   * - React component functions (imported, already transpiled)
-   * - Strings containing JSX syntax
-   */
-  canHandle(template) {
-    if (typeof template === "function" && (0, import_renderers.isReactComponent)(template)) {
-      return true;
-    }
-    if (typeof template === "string" && (0, import_renderers.containsJsx)(template)) {
-      return true;
-    }
-    return false;
-  }
-  /**
-   * Transpile the template if needed.
-   *
-   * For imported React components, no transpilation is needed.
-   * For JSX strings, SWC transpilation is performed.
-   */
-  async transpile(template, options) {
-    if (typeof template === "function") {
-      const hash = (0, import_renderers.hashString)(template.toString());
-      return {
-        code: "",
-        // No transpiled code for already-compiled components
-        hash,
-        cached: true
-      };
-    }
-    if (typeof template === "string") {
-      return (0, import_renderers.transpileJsx)(template, {
-        development: options?.sourceMaps ?? false
-      });
-    }
-    throw new Error("Invalid template type for ReactRenderer");
-  }
-  /**
-   * 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) {
-    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") {
-      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 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 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');
-      }
-    };
-    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);
-    }
-  }, 100);
-})();
-</script>
-`;
-    return html.trim();
-  }
-  /**
-   * Get runtime scripts for client-side functionality.
-   */
-  getRuntimeScripts(platform) {
-    if (platform.networkMode === "blocked") {
-      return {
-        headScripts: "",
-        inlineScripts: INLINE_REACT_PLACEHOLDER,
-        isInline: true
-      };
-    }
-    return {
-      headScripts: `
-        <script crossorigin src="${REACT_CDN.react}"></script>
-        <script crossorigin src="${REACT_CDN.reactDom}"></script>
-      `,
-      isInline: false
-    };
-  }
-};
-var reactRenderer = new ReactRenderer();
-
-// libs/ui/src/renderers/react.adapter.ts
-var mountedRoots = /* @__PURE__ */ new WeakMap();
-var ReactRendererAdapter = class {
-  type = "react";
-  // Lazy-loaded React runtime
-  react = null;
-  reactDOM = null;
-  loadPromise = null;
-  /**
-   * Check if this adapter can handle the given content.
-   */
-  canHandle(content) {
-    if (typeof content === "function") {
-      return true;
-    }
-    if (typeof content === "string") {
-      if (content.includes("React.createElement") || content.includes("jsx(") || content.includes("jsxs(")) {
-        return true;
-      }
-      const funcIndex = content.indexOf("function");
-      if (funcIndex !== -1) {
-        const afterFunc = content.slice(funcIndex, Math.min(funcIndex + 2e3, content.length));
-        if (afterFunc.includes("return") && afterFunc.includes("<")) {
-          return true;
-        }
-      }
-      return false;
-    }
-    return false;
-  }
-  /**
-   * Render React component to a string.
-   * This is a client-side fallback - SSR should be done at build time.
-   */
-  async render(content, context, _options) {
-    return `<div data-frontmcp-react data-tool="${context.toolName}">${content}</div>`;
-  }
-  /**
-   * Render React component directly to the DOM.
-   */
-  async renderToDOM(content, target, context, options) {
-    try {
-      await this.ensureReactLoaded();
-      if (!this.react || !this.reactDOM) {
-        throw new Error("React runtime not available");
-      }
-      const componentName = target.getAttribute("data-component");
-      const component = this.getComponent(componentName, content);
-      if (!component) {
-        target.innerHTML = content;
-        return { success: true };
-      }
-      const element = this.react.createElement(component, {
-        input: context.input,
-        output: context.output,
-        structuredContent: context.structuredContent,
-        toolName: context.toolName
-      });
-      if (options?.hydrate && this.reactDOM.hydrateRoot) {
-        const root = this.reactDOM.hydrateRoot(target, element);
-        mountedRoots.set(target, root);
-      } else if (this.reactDOM.createRoot) {
-        const root = this.reactDOM.createRoot(target);
-        root.render(element);
-        mountedRoots.set(target, root);
-      } else if (this.reactDOM.render) {
-        this.reactDOM.render(element, target);
-        mountedRoots.set(target, {
-          unmount: () => this.reactDOM?.unmountComponentAtNode?.(target)
-        });
-      } else {
-        throw new Error("No suitable React render method available");
-      }
-      target.dispatchEvent(
-        new CustomEvent("frontmcp:rendered", {
-          bubbles: true,
-          detail: { type: "react", toolName: context.toolName }
-        })
-      );
-      return { success: true };
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      console.error("[FrontMCP] React render failed:", message);
-      return { success: false, error: message };
-    }
-  }
-  /**
-   * Hydrate existing SSR content with React.
-   */
-  async hydrate(target, context, options) {
-    return this.renderToDOM("", target, context, { ...options, hydrate: true });
-  }
-  /**
-   * Update rendered React component with new data.
-   */
-  async update(target, context) {
-    try {
-      await this.ensureReactLoaded();
-      if (!this.react) {
-        throw new Error("React runtime not available");
-      }
-      const existingRoot = mountedRoots.get(target);
-      const componentName = target.getAttribute("data-component");
-      const component = this.getComponent(componentName, "");
-      if (!component) {
-        return { success: false, error: "No component found for update" };
-      }
-      const element = this.react.createElement(component, {
-        input: context.input,
-        output: context.output,
-        structuredContent: context.structuredContent,
-        toolName: context.toolName
-      });
-      if (existingRoot && "render" in existingRoot) {
-        existingRoot.render(element);
-        return { success: true };
-      }
-      return this.renderToDOM("", target, context);
-    } catch (error) {
-      const message = error instanceof Error ? error.message : String(error);
-      console.error("[FrontMCP] React update failed:", message);
-      return { success: false, error: message };
-    }
-  }
-  /**
-   * Clean up React root.
-   */
-  destroy(target) {
-    const root = mountedRoots.get(target);
-    if (root) {
-      root.unmount();
-      mountedRoots.delete(target);
-    }
-  }
-  /**
-   * Ensure React is loaded.
-   */
-  async ensureReactLoaded() {
-    if (this.react && this.reactDOM) {
-      return;
-    }
-    if (this.loadPromise) {
-      return this.loadPromise;
-    }
-    this.loadPromise = this.loadReact();
-    return this.loadPromise;
-  }
-  /**
-   * Load React runtime.
-   */
-  async loadReact() {
-    const win = typeof window !== "undefined" ? window : globalThis;
-    if (win.React) {
-      this.react = win.React;
-    }
-    if (win.ReactDOM) {
-      this.reactDOM = win.ReactDOM;
-    }
-    if (this.react && this.reactDOM) {
-      return;
-    }
-    try {
-      if (!this.react) {
-        const reactModule = await import(
-          /* webpackIgnore: true */
-          "react"
-        );
-        this.react = reactModule.default || reactModule;
-      }
-      if (!this.reactDOM) {
-        const reactDOMModule = await import(
-          /* webpackIgnore: true */
-          "react-dom/client"
-        );
-        this.reactDOM = reactDOMModule.default || reactDOMModule;
-      }
-    } catch {
-      if (!this.react || !this.reactDOM) {
-        console.warn("[FrontMCP] React runtime not available. Ensure React is loaded via CDN or bundled.");
-      }
-    }
-  }
-  /**
-   * Get a React component by name or from content.
-   */
-  getComponent(componentName, content) {
-    const win = typeof window !== "undefined" ? window : globalThis;
-    if (componentName && win.__frontmcp_components) {
-      const registered = win.__frontmcp_components?.[componentName];
-      if (registered) {
-        return registered;
-      }
-    }
-    if (content && typeof content === "function") {
-      return content;
-    }
-    return null;
-  }
-};
-function createReactAdapter() {
-  return new ReactRendererAdapter();
-}
-async function loadReactAdapter() {
-  return createReactAdapter();
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ActionItemSchema,
-  ActionListOptionsSchema,
-  AdapterRegistry,
-  Alert,
-  AlertOptionsSchema,
-  AlertVariantSchema,
-  AvatarGroupOptionsSchema,
-  AvatarOptionsSchema,
-  AvatarShapeSchema,
-  AvatarSizeSchema,
-  AvatarSpacingSchema,
-  AvatarStatusSchema,
-  AvatarWithTextOptionsSchema,
-  BRIDGE_SCRIPT_TAGS,
-  Badge,
-  BadgeGroupOptionsSchema,
-  BadgeOptionsSchema,
-  BadgeSizeSchema,
-  BadgeVariantSchema,
-  Button,
-  ButtonGroupOptionsSchema,
-  ButtonOptionsSchema,
-  ButtonSizeSchema,
-  ButtonVariantSchema,
-  Card,
-  CardGroupOptionsSchema,
-  CardOptionsSchema,
-  CardSizeSchema,
-  CardVariantSchema,
-  CheckboxOptionsSchema,
-  ConfirmModalOptionsSchema,
-  ConfirmModalVariantSchema,
-  DescriptionItemSchema,
-  DescriptionListOptionsSchema,
-  DrawerOptionsSchema,
-  DrawerPositionSchema,
-  FeatureItemSchema,
-  FeatureListOptionsSchema,
-  FmcpAlert,
-  FmcpBadge,
-  FmcpButton,
-  FmcpCard,
-  FmcpElement,
-  FmcpInput,
-  FmcpSelect,
-  FormActionsOptionsSchema,
-  FormEnctypeSchema,
-  FormMethodSchema,
-  FormOptionsSchema,
-  FormRowOptionsSchema,
-  FormSectionOptionsSchema,
-  FrontMcpBridge,
-  InputOptionsSchema,
-  InputSizeSchema,
-  InputStateSchema,
-  InputTypeSchema,
-  McpBridgeProvider,
-  ModalOptionsSchema,
-  ModalSizeSchema,
-  ModalTriggerOptionsSchema,
-  PaginationOptionsSchema,
-  PermissionItemSchema,
-  PermissionListOptionsSchema,
-  RadioGroupOptionsSchema,
-  RadioOptionItemSchema,
-  ReactRenderer,
-  ReactRendererAdapter,
-  SelectOptionItemSchema,
-  SelectOptionsSchema,
-  TableAlignSchema,
-  TableColumnSchema,
-  TableOptionsSchema,
-  TableSortDirectionSchema,
-  TextareaOptionsSchema,
-  TextareaResizeSchema,
-  ToastOptionsSchema,
-  ToastPositionSchema,
-  UNIVERSAL_BRIDGE_SCRIPT,
-  actionList,
-  activeBadge,
-  alert,
-  authLayout,
-  authLayoutBuilder,
-  avatar,
-  avatarGroup,
-  avatarWithText,
-  awayDot,
-  badge,
-  badgeGroup,
-  baseLayout,
-  betaBadge,
-  busyDot,
-  button,
-  buttonGroup,
-  card,
-  cardGroup,
-  checkbox,
-  confirmModal,
-  consentLayout,
-  consentLayoutBuilder,
-  createBridge,
-  createLayoutBuilder,
-  createReactAdapter,
-  csrfInput,
-  dangerAlert,
-  dangerButton,
-  defaultRegistry,
-  descriptionList,
-  drawer,
-  errorBadge,
-  errorLayout,
-  errorLayoutBuilder,
-  escapeHtml,
-  featureList,
-  form,
-  formActions,
-  formRow,
-  formSection,
-  generateBridgeIIFE,
-  generatePlatformBundle,
-  ghostButton,
-  hiddenInput,
-  inactiveBadge,
-  infoAlert,
-  input,
-  linkButton,
-  loadReactAdapter,
-  loadingLayout,
-  modal,
-  modalTrigger,
-  newBadge,
-  offlineDot,
-  onlineDot,
-  outlineButton,
-  pagination,
-  pendingBadge,
-  permissionList,
-  primaryButton,
-  radioGroup,
-  reactRenderer,
-  registerAdapter,
-  registerAllComponents,
-  registerFmcpAlert,
-  registerFmcpBadge,
-  registerFmcpButton,
-  registerFmcpCard,
-  registerFmcpInput,
-  registerFmcpSelect,
-  renderAlert,
-  renderAlertSync,
-  renderBadge,
-  renderBadgeSync,
-  renderButton,
-  renderButtonSync,
-  renderCard,
-  renderCardSync,
-  secondaryButton,
-  select,
-  successAlert,
-  successLayout,
-  table,
-  textarea,
-  toast,
-  toastContainer,
-  useCallTool,
-  useCapability,
-  useDisplayMode,
-  useHostContext,
-  useMcpBridge,
-  useMcpBridgeContext,
-  useOpenLink,
-  useSendMessage,
-  useStructuredContent,
-  useTheme,
-  useToolCalls,
-  useToolInput,
-  useToolOutput,
-  warningAlert,
-  widgetLayout
-});