@frontmcp/ui 0.5.0 → 0.6.0

package/esm/components/index.js

@@ -0,0 +1,2456 @@
+// libs/ui/src/components/button.schema.ts
+import { z } from "zod";
+var ButtonVariantSchema = z.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = z.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = z.object({
+  /** Button variant */
+  variant: ButtonVariantSchema.optional(),
+  /** Button size */
+  size: ButtonSizeSchema.optional(),
+  /** Button type attribute */
+  type: z.enum(["button", "submit", "reset"]).optional(),
+  /** Disabled state */
+  disabled: z.boolean().optional(),
+  /** Loading state */
+  loading: z.boolean().optional(),
+  /** Full width */
+  fullWidth: z.boolean().optional(),
+  /** Icon before text (HTML string) */
+  iconBefore: z.string().optional(),
+  /** Icon after text (HTML string) */
+  iconAfter: z.string().optional(),
+  /** Icon only (no text) */
+  iconOnly: z.boolean().optional(),
+  /** Additional CSS classes */
+  className: z.string().optional(),
+  /** Button ID */
+  id: z.string().optional(),
+  /** Name attribute */
+  name: z.string().optional(),
+  /** Value attribute */
+  value: z.string().optional(),
+  /** Click handler (URL for links) */
+  href: z.string().optional(),
+  /** Open in new tab */
+  target: z.enum(["_blank", "_self"]).optional(),
+  /** Data attributes */
+  data: z.record(z.string(), z.string()).optional(),
+  /** ARIA label */
+  ariaLabel: z.string().optional()
+}).strict();
+var ButtonGroupOptionsSchema = z.object({
+  /** Attach buttons visually */
+  attached: z.boolean().optional(),
+  /** Direction */
+  direction: z.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between buttons */
+  gap: z.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z.string().optional()
+}).strict();
+
+// libs/ui/src/components/card.schema.ts
+import { z as z2 } from "zod";
+var CardVariantSchema = z2.enum(["default", "outlined", "elevated", "filled", "ghost"]);
+var CardSizeSchema = z2.enum(["sm", "md", "lg"]);
+var CardOptionsSchema = z2.object({
+  /** Card variant */
+  variant: CardVariantSchema.optional(),
+  /** Card size (padding) */
+  size: CardSizeSchema.optional(),
+  /** Card title */
+  title: z2.string().optional(),
+  /** Card subtitle/description */
+  subtitle: z2.string().optional(),
+  /** Header actions (HTML string) */
+  headerActions: z2.string().optional(),
+  /** Footer content (HTML string) */
+  footer: z2.string().optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional(),
+  /** Card ID */
+  id: z2.string().optional(),
+  /** Data attributes */
+  data: z2.record(z2.string(), z2.string()).optional(),
+  /** Clickable card (adds hover effects) */
+  clickable: z2.boolean().optional(),
+  /** Click handler URL */
+  href: z2.string().optional()
+}).strict();
+var CardGroupOptionsSchema = z2.object({
+  /** Direction */
+  direction: z2.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between cards */
+  gap: z2.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional()
+}).strict();
+
+// libs/ui/src/components/badge.schema.ts
+import { z as z3 } from "zod";
+var BadgeVariantSchema = z3.enum([
+  "default",
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "outline"
+]);
+var BadgeSizeSchema = z3.enum(["sm", "md", "lg"]);
+var BadgeOptionsSchema = z3.object({
+  /** Badge variant */
+  variant: BadgeVariantSchema.optional(),
+  /** Badge size */
+  size: BadgeSizeSchema.optional(),
+  /** Rounded pill style */
+  pill: z3.boolean().optional(),
+  /** Icon before text (HTML string) */
+  icon: z3.string().optional(),
+  /** Dot indicator (no text) */
+  dot: z3.boolean().optional(),
+  /** Additional CSS classes */
+  className: z3.string().optional(),
+  /** Removable badge */
+  removable: z3.boolean().optional()
+}).strict();
+var BadgeGroupOptionsSchema = z3.object({
+  /** Gap between badges */
+  gap: z3.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z3.string().optional()
+}).strict();
+
+// libs/ui/src/components/alert.schema.ts
+import { z as z4 } from "zod";
+var AlertVariantSchema = z4.enum(["info", "success", "warning", "danger", "neutral"]);
+var AlertOptionsSchema = z4.object({
+  /** Alert variant */
+  variant: AlertVariantSchema.optional(),
+  /** Alert title */
+  title: z4.string().optional(),
+  /** Show icon */
+  showIcon: z4.boolean().optional(),
+  /** Custom icon (HTML string, overrides default) */
+  icon: z4.string().optional(),
+  /** Dismissible alert */
+  dismissible: z4.boolean().optional(),
+  /** Additional CSS classes */
+  className: z4.string().optional(),
+  /** Alert ID */
+  id: z4.string().optional(),
+  /** Actions (HTML string for buttons) */
+  actions: z4.string().optional()
+}).strict();
+var ToastPositionSchema = z4.enum([
+  "top-right",
+  "top-left",
+  "bottom-right",
+  "bottom-left",
+  "top-center",
+  "bottom-center"
+]);
+var ToastOptionsSchema = z4.object({
+  /** Toast variant */
+  variant: AlertVariantSchema.optional(),
+  /** Toast title */
+  title: z4.string().optional(),
+  /** Duration in ms (0 = no auto-dismiss) */
+  duration: z4.number().min(0).optional(),
+  /** Position */
+  position: ToastPositionSchema.optional(),
+  /** Toast ID */
+  id: z4.string().optional()
+}).strict();
+
+// libs/ui/src/components/avatar.schema.ts
+import { z as z5 } from "zod";
+var AvatarSizeSchema = z5.enum(["xs", "sm", "md", "lg", "xl", "2xl"]);
+var AvatarShapeSchema = z5.enum(["circle", "square", "rounded"]);
+var AvatarStatusSchema = z5.enum(["online", "offline", "busy", "away", "none"]);
+var AvatarOptionsSchema = z5.object({
+  /** Image source URL */
+  src: z5.string().optional(),
+  /** Alt text / name (required) */
+  alt: z5.string(),
+  /** Avatar size */
+  size: AvatarSizeSchema.optional(),
+  /** Avatar shape */
+  shape: AvatarShapeSchema.optional(),
+  /** Status indicator */
+  status: AvatarStatusSchema.optional(),
+  /** Additional CSS classes */
+  className: z5.string().optional(),
+  /** Click handler URL */
+  href: z5.string().optional(),
+  /** Custom initials (overrides auto-generation) */
+  initials: z5.string().optional(),
+  /** Background color for initials (CSS color) */
+  bgColor: z5.string().optional()
+}).strict();
+var AvatarSpacingSchema = z5.enum(["tight", "normal", "loose"]);
+var AvatarGroupOptionsSchema = z5.object({
+  /** Maximum visible avatars */
+  max: z5.number().min(1).optional(),
+  /** Avatar size */
+  size: AvatarSizeSchema.optional(),
+  /** Overlap amount */
+  spacing: AvatarSpacingSchema.optional(),
+  /** Additional CSS classes */
+  className: z5.string().optional()
+}).strict();
+var AvatarWithTextOptionsSchema = AvatarOptionsSchema.extend({
+  /** Primary text (name) */
+  name: z5.string(),
+  /** Secondary text (email, role, etc.) */
+  subtitle: z5.string().optional(),
+  /** Text alignment */
+  align: z5.enum(["left", "right"]).optional()
+}).strict();
+
+// libs/ui/src/components/modal.schema.ts
+import { z as z6 } from "zod";
+var ModalSizeSchema = z6.enum(["sm", "md", "lg", "xl", "full"]);
+var ModalOptionsSchema = z6.object({
+  /** Modal ID (required) */
+  id: z6.string(),
+  /** Modal title */
+  title: z6.string().optional(),
+  /** Modal size */
+  size: ModalSizeSchema.optional(),
+  /** Show close button */
+  showClose: z6.boolean().optional(),
+  /** Close on backdrop click */
+  closeOnBackdrop: z6.boolean().optional(),
+  /** Close on escape key */
+  closeOnEscape: z6.boolean().optional(),
+  /** Footer content (HTML string) */
+  footer: z6.string().optional(),
+  /** Additional CSS classes for modal */
+  className: z6.string().optional(),
+  /** Initially visible */
+  open: z6.boolean().optional()
+}).strict();
+var ConfirmModalVariantSchema = z6.enum(["info", "warning", "danger"]);
+var ConfirmModalOptionsSchema = z6.object({
+  /** Modal ID (required) */
+  id: z6.string(),
+  /** Confirm message */
+  message: z6.string(),
+  /** Title */
+  title: z6.string().optional(),
+  /** Variant/severity */
+  variant: ConfirmModalVariantSchema.optional(),
+  /** Confirm button text */
+  confirmText: z6.string().optional(),
+  /** Cancel button text */
+  cancelText: z6.string().optional(),
+  /** Initially visible */
+  open: z6.boolean().optional(),
+  /** Confirm action URL */
+  confirmHref: z6.string().optional()
+}).strict();
+var DrawerPositionSchema = z6.enum(["left", "right", "top", "bottom"]);
+var DrawerOptionsSchema = z6.object({
+  /** Drawer ID (required) */
+  id: z6.string(),
+  /** Position */
+  position: DrawerPositionSchema.optional(),
+  /** Size (width for left/right, height for top/bottom) */
+  size: ModalSizeSchema.optional(),
+  /** Drawer title */
+  title: z6.string().optional(),
+  /** Show close button */
+  showClose: z6.boolean().optional(),
+  /** Footer content (HTML string) */
+  footer: z6.string().optional(),
+  /** Additional CSS classes */
+  className: z6.string().optional(),
+  /** Initially visible */
+  open: z6.boolean().optional()
+}).strict();
+var ModalTriggerOptionsSchema = z6.object({
+  /** Target modal ID (required) */
+  targetId: z6.string(),
+  /** Trigger text */
+  text: z6.string().optional(),
+  /** HTML tag to use */
+  tag: z6.enum(["button", "a", "span", "div"]).optional(),
+  /** Additional CSS classes */
+  className: z6.string().optional()
+}).strict();
+
+// libs/ui/src/components/table.schema.ts
+import { z as z7 } from "zod";
+var TableAlignSchema = z7.enum(["left", "center", "right"]);
+var TableSortDirectionSchema = z7.enum(["asc", "desc"]).nullable();
+var TableColumnSchema = z7.object({
+  /** Column key (property name) */
+  key: z7.string(),
+  /** Column header text */
+  header: z7.string(),
+  /** Column width (CSS value) */
+  width: z7.string().optional(),
+  /** Text alignment */
+  align: TableAlignSchema.optional(),
+  /** Sortable column */
+  sortable: z7.boolean().optional(),
+  /** Current sort direction */
+  sortDirection: TableSortDirectionSchema.optional(),
+  /** Custom cell renderer (function - cannot validate at runtime) */
+  render: z7.any().optional(),
+  /** Additional header CSS classes */
+  headerClass: z7.string().optional(),
+  /** Additional cell CSS classes */
+  cellClass: z7.string().optional()
+}).strict();
+var TableOptionsSchema = z7.object({
+  /** Column definitions */
+  columns: z7.array(TableColumnSchema),
+  /** Table ID */
+  id: z7.string().optional(),
+  /** Show row selection checkboxes */
+  selectable: z7.boolean().optional(),
+  /** Row hover effect */
+  hoverable: z7.boolean().optional(),
+  /** Striped rows */
+  striped: z7.boolean().optional(),
+  /** Bordered cells */
+  bordered: z7.boolean().optional(),
+  /** Compact size */
+  compact: z7.boolean().optional(),
+  /** Fixed header (sticky) */
+  stickyHeader: z7.boolean().optional(),
+  /** Additional CSS classes */
+  className: z7.string().optional(),
+  /** Empty state message */
+  emptyMessage: z7.string().optional(),
+  /** Empty state HTML */
+  emptyContent: z7.string().optional(),
+  /** Loading state */
+  loading: z7.boolean().optional(),
+  /** Row key property for selection */
+  rowKey: z7.string().optional(),
+  /** Row click handler (URL template with {key}) */
+  onRowClick: z7.string().optional()
+}).strict();
+var PaginationOptionsSchema = z7.object({
+  /** Current page (1-indexed) */
+  page: z7.number().min(1),
+  /** Total pages */
+  totalPages: z7.number().min(0),
+  /** Total items count */
+  totalItems: z7.number().min(0).optional(),
+  /** Items per page */
+  pageSize: z7.number().min(1).optional(),
+  /** Page size options */
+  pageSizeOptions: z7.array(z7.number()).optional(),
+  /** Show first/last buttons */
+  showFirstLast: z7.boolean().optional(),
+  /** Show page count */
+  showPageCount: z7.boolean().optional(),
+  /** Show item count */
+  showItemCount: z7.boolean().optional(),
+  /** Show page size selector */
+  showPageSize: z7.boolean().optional(),
+  /** Max visible page buttons */
+  maxVisiblePages: z7.number().min(1).optional(),
+  /** Additional CSS classes */
+  className: z7.string().optional()
+}).strict();
+
+// libs/ui/src/components/form.schema.ts
+import { z as z8 } from "zod";
+var InputTypeSchema = z8.enum([
+  "text",
+  "email",
+  "password",
+  "number",
+  "tel",
+  "url",
+  "search",
+  "date",
+  "time",
+  "datetime-local",
+  "hidden"
+]);
+var InputSizeSchema = z8.enum(["sm", "md", "lg"]);
+var InputStateSchema = z8.enum(["default", "error", "success", "warning"]);
+var InputOptionsSchema = z8.object({
+  /** Input type */
+  type: InputTypeSchema.optional(),
+  /** Input name (required) */
+  name: z8.string(),
+  /** Input ID (defaults to name) */
+  id: z8.string().optional(),
+  /** Input value */
+  value: z8.string().optional(),
+  /** Placeholder text */
+  placeholder: z8.string().optional(),
+  /** Label text */
+  label: z8.string().optional(),
+  /** Helper text */
+  helper: z8.string().optional(),
+  /** Error message */
+  error: z8.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: z8.boolean().optional(),
+  /** Disabled state */
+  disabled: z8.boolean().optional(),
+  /** Readonly state */
+  readonly: z8.boolean().optional(),
+  /** Autocomplete attribute */
+  autocomplete: z8.string().optional(),
+  /** Pattern for validation */
+  pattern: z8.string().optional(),
+  /** Min value (for number/date) */
+  min: z8.union([z8.string(), z8.number()]).optional(),
+  /** Max value (for number/date) */
+  max: z8.union([z8.string(), z8.number()]).optional(),
+  /** Step value (for number) */
+  step: z8.union([z8.string(), z8.number()]).optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional(),
+  /** Data attributes */
+  data: z8.record(z8.string(), z8.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: z8.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: z8.string().optional()
+}).strict();
+var SelectOptionItemSchema = z8.object({
+  value: z8.string(),
+  label: z8.string(),
+  disabled: z8.boolean().optional(),
+  selected: z8.boolean().optional()
+}).strict();
+var SelectOptionsSchema = z8.object({
+  /** Input name (required) */
+  name: z8.string(),
+  /** Input ID (defaults to name) */
+  id: z8.string().optional(),
+  /** Input value */
+  value: z8.string().optional(),
+  /** Placeholder text */
+  placeholder: z8.string().optional(),
+  /** Label text */
+  label: z8.string().optional(),
+  /** Helper text */
+  helper: z8.string().optional(),
+  /** Error message */
+  error: z8.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: z8.boolean().optional(),
+  /** Disabled state */
+  disabled: z8.boolean().optional(),
+  /** Readonly state */
+  readonly: z8.boolean().optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional(),
+  /** Data attributes */
+  data: z8.record(z8.string(), z8.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: z8.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: z8.string().optional(),
+  /** Select options (required) */
+  options: z8.array(SelectOptionItemSchema),
+  /** Multiple selection */
+  multiple: z8.boolean().optional()
+}).strict();
+var TextareaResizeSchema = z8.enum(["none", "vertical", "horizontal", "both"]);
+var TextareaOptionsSchema = z8.object({
+  /** Input name (required) */
+  name: z8.string(),
+  /** Input ID (defaults to name) */
+  id: z8.string().optional(),
+  /** Input value */
+  value: z8.string().optional(),
+  /** Placeholder text */
+  placeholder: z8.string().optional(),
+  /** Label text */
+  label: z8.string().optional(),
+  /** Helper text */
+  helper: z8.string().optional(),
+  /** Error message */
+  error: z8.string().optional(),
+  /** Input size */
+  size: InputSizeSchema.optional(),
+  /** Input state */
+  state: InputStateSchema.optional(),
+  /** Required field */
+  required: z8.boolean().optional(),
+  /** Disabled state */
+  disabled: z8.boolean().optional(),
+  /** Readonly state */
+  readonly: z8.boolean().optional(),
+  /** Autocomplete attribute */
+  autocomplete: z8.string().optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional(),
+  /** Data attributes */
+  data: z8.record(z8.string(), z8.string()).optional(),
+  /** Icon before input (HTML string) */
+  iconBefore: z8.string().optional(),
+  /** Icon after input (HTML string) */
+  iconAfter: z8.string().optional(),
+  /** Number of rows */
+  rows: z8.number().min(1).optional(),
+  /** Resize behavior */
+  resize: TextareaResizeSchema.optional()
+}).strict();
+var CheckboxOptionsSchema = z8.object({
+  /** Input name (required) */
+  name: z8.string(),
+  /** Input ID */
+  id: z8.string().optional(),
+  /** Input value */
+  value: z8.string().optional(),
+  /** Label text (required) */
+  label: z8.string(),
+  /** Checked state */
+  checked: z8.boolean().optional(),
+  /** Disabled state */
+  disabled: z8.boolean().optional(),
+  /** Helper text */
+  helper: z8.string().optional(),
+  /** Error message */
+  error: z8.string().optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+var RadioOptionItemSchema = z8.object({
+  value: z8.string(),
+  label: z8.string(),
+  disabled: z8.boolean().optional()
+}).strict();
+var RadioGroupOptionsSchema = z8.object({
+  /** Group name (required) */
+  name: z8.string(),
+  /** Radio options (required) */
+  options: z8.array(RadioOptionItemSchema),
+  /** Selected value */
+  value: z8.string().optional(),
+  /** Label for the group */
+  label: z8.string().optional(),
+  /** Helper text */
+  helper: z8.string().optional(),
+  /** Error message */
+  error: z8.string().optional(),
+  /** Layout direction */
+  direction: z8.enum(["horizontal", "vertical"]).optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+var FormMethodSchema = z8.enum(["get", "post", "dialog"]);
+var FormEnctypeSchema = z8.enum(["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"]);
+var FormOptionsSchema = z8.object({
+  /** Form action URL */
+  action: z8.string().optional(),
+  /** Form method */
+  method: FormMethodSchema.optional(),
+  /** Form ID */
+  id: z8.string().optional(),
+  /** Form enctype */
+  enctype: FormEnctypeSchema.optional(),
+  /** Disable browser validation */
+  novalidate: z8.boolean().optional(),
+  /** Autocomplete behavior */
+  autocomplete: z8.enum(["on", "off"]).optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+var FormRowOptionsSchema = z8.object({
+  /** Number of columns */
+  cols: z8.number().min(1).max(12).optional(),
+  /** Gap between columns */
+  gap: z8.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+var FormSectionOptionsSchema = z8.object({
+  /** Section title */
+  title: z8.string().optional(),
+  /** Section description */
+  description: z8.string().optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+var FormActionsOptionsSchema = z8.object({
+  /** Alignment */
+  align: z8.enum(["left", "center", "right", "between"]).optional(),
+  /** Additional CSS classes */
+  className: z8.string().optional()
+}).strict();
+
+// libs/ui/src/components/list.schema.ts
+import { z as z9 } from "zod";
+var PermissionItemSchema = z9.object({
+  /** Scope identifier */
+  scope: z9.string(),
+  /** Display name */
+  name: z9.string(),
+  /** Description */
+  description: z9.string().optional(),
+  /** Icon HTML */
+  icon: z9.string().optional(),
+  /** Required permission (cannot be unchecked) */
+  required: z9.boolean().optional(),
+  /** Checked by default */
+  checked: z9.boolean().optional(),
+  /** Sensitive/dangerous permission */
+  sensitive: z9.boolean().optional()
+}).strict();
+var PermissionListOptionsSchema = z9.object({
+  /** List ID */
+  id: z9.string().optional(),
+  /** Checkable permissions */
+  checkable: z9.boolean().optional(),
+  /** Input name for checkable */
+  inputName: z9.string().optional(),
+  /** Group title */
+  title: z9.string().optional(),
+  /** Additional CSS classes */
+  className: z9.string().optional()
+}).strict();
+var FeatureItemSchema = z9.object({
+  /** Feature name */
+  name: z9.string(),
+  /** Feature description */
+  description: z9.string().optional(),
+  /** Icon HTML */
+  icon: z9.string().optional(),
+  /** Included in plan */
+  included: z9.boolean().optional()
+}).strict();
+var FeatureListOptionsSchema = z9.object({
+  /** Group title */
+  title: z9.string().optional(),
+  /** Show included/excluded styling */
+  showStatus: z9.boolean().optional(),
+  /** Additional CSS classes */
+  className: z9.string().optional()
+}).strict();
+var DescriptionItemSchema = z9.object({
+  /** Term/label */
+  term: z9.string(),
+  /** Description/value */
+  description: z9.string(),
+  /** Copy button */
+  copyable: z9.boolean().optional()
+}).strict();
+var DescriptionListOptionsSchema = z9.object({
+  /** Layout direction */
+  direction: z9.enum(["horizontal", "vertical"]).optional(),
+  /** Striped rows */
+  striped: z9.boolean().optional(),
+  /** Additional CSS classes */
+  className: z9.string().optional()
+}).strict();
+var ActionItemSchema = z9.object({
+  /** Action label */
+  label: z9.string(),
+  /** Action description */
+  description: z9.string().optional(),
+  /** Icon HTML */
+  icon: z9.string().optional(),
+  /** Click URL */
+  href: z9.string().optional(),
+  /** Destructive action styling */
+  destructive: z9.boolean().optional(),
+  /** Disabled state */
+  disabled: z9.boolean().optional()
+}).strict();
+var ActionListOptionsSchema = z9.object({
+  /** Divided items */
+  divided: z9.boolean().optional(),
+  /** Additional CSS classes */
+  className: z9.string().optional()
+}).strict();
+
+// libs/ui/src/theme/platforms.ts
+var CLAUDE_PLATFORM = {
+  id: "claude",
+  name: "Claude (Artifacts)",
+  supportsWidgets: true,
+  supportsTailwind: true,
+  supportsHtmx: false,
+  // Network blocked, HTMX won't work for API calls
+  networkMode: "blocked",
+  scriptStrategy: "inline",
+  maxInlineSize: 100 * 1024,
+  // 100KB limit for artifacts
+  cspRestrictions: ["script-src 'unsafe-inline'", "connect-src 'none'"],
+  options: {
+    mode: "artifacts",
+    framework: "react"
+    // Claude artifacts prefer React
+  }
+};
+
+// libs/ui/src/utils/escape-html.ts
+function escapeHtml(str) {
+  if (str === null || str === void 0) {
+    return "";
+  }
+  const s = String(str);
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+
+// libs/ui/src/validation/error-box.ts
+var errorIcon = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+</svg>`;
+function validationErrorBox(options) {
+  const { componentName, invalidParam } = options;
+  return `<div
+  class="validation-error flex items-start gap-3 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg"
+  role="alert"
+  data-testid="validation-error"
+  data-component="${escapeHtml(componentName)}"
+  data-param="${escapeHtml(invalidParam)}"
+>
+  ${errorIcon}
+  <div class="min-w-0">
+    <p class="font-semibold text-sm">${escapeHtml(componentName)}: Invalid Configuration</p>
+    <p class="text-sm opacity-90 mt-0.5">The "${escapeHtml(invalidParam)}" parameter is invalid.</p>
+  </div>
+</div>`;
+}
+
+// libs/ui/src/validation/wrapper.ts
+function getFirstInvalidPath(error) {
+  const firstError = error.issues[0];
+  if (!firstError || firstError.path.length === 0) {
+    return "options";
+  }
+  return firstError.path.map(String).join(".");
+}
+function validateOptions(options, config) {
+  const result = config.schema.safeParse(options);
+  if (result.success) {
+    return { success: true, data: result.data };
+  }
+  const invalidParam = getFirstInvalidPath(result.error);
+  return {
+    success: false,
+    error: validationErrorBox({
+      componentName: config.componentName,
+      invalidParam
+    })
+  };
+}
+
+// libs/ui/src/validation/schema-paths.ts
+import { z as z10 } from "zod";
+
+// libs/ui/src/components/button.ts
+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 = 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 ? 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}="${escapeHtml(val)}"` : "";
+  }).filter(Boolean).join(" ") : "";
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const nameAttr = name ? `name="${escapeHtml(name)}"` : "";
+  const valueAttr = value ? `value="${escapeHtml(value)}"` : "";
+  const disabledAttr = disabled || loading ? "disabled" : "";
+  const targetAttr = target ? `target="${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="${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 ? "" : escapeHtml(text);
+  const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
+  if (href && !disabled && !loading && isValidHrefProtocol(href)) {
+    return `<a href="${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 = 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 ? 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
+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}="${escapeHtml(value)}"`).join(" ");
+}
+function card(content, options = {}) {
+  const {
+    variant = "default",
+    size = "md",
+    title,
+    subtitle,
+    headerActions,
+    footer,
+    className = "",
+    id,
+    data,
+    clickable = false,
+    href
+  } = options;
+  const variantClasses = getVariantClasses2(variant);
+  const sizeClasses = getSizeClasses2(size);
+  const clickableClasses = clickable ? "cursor-pointer hover:shadow-md transition-shadow" : "";
+  const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs(data);
+  const idAttr = id ? `id="${escapeHtml(id)}"` : "";
+  const hasHeader = title || subtitle || headerActions;
+  const headerHtml = hasHeader ? `<div class="flex items-start justify-between mb-4">
+        <div>
+          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${escapeHtml(title)}</h3>` : ""}
+          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(subtitle)}</p>` : ""}
+        </div>
+        ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ""}
+      </div>` : "";
+  const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : "";
+  if (href) {
+    return `<a href="${escapeHtml(href)}" class="${allClasses}" ${idAttr} ${dataAttrs}>
+      ${headerHtml}
+      ${content}
+      ${footerHtml}
+    </a>`;
+  }
+  return `<div class="${allClasses}" ${idAttr} ${dataAttrs}>
+    ${headerHtml}
+    ${content}
+    ${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";
+  return `<div class="${directionClasses} ${gapClasses[gap]} ${className}">
+    ${cards.join("\n")}
+  </div>`;
+}
+
+// libs/ui/src/components/form.ts
+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}="${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
+  } = options;
+  const sizeClasses = getInputSizeClasses(size);
+  const stateClasses = getInputStateClasses(state);
+  const hasIcon = iconBefore || iconAfter;
+  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 ? (iconBefore ? "pl-10" : "") + (iconAfter ? " pr-10" : "") : "",
+    className
+  ].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs2(data);
+  const inputAttrs = [
+    `type="${type}"`,
+    `name="${escapeHtml(name)}"`,
+    `id="${escapeHtml(id)}"`,
+    value ? `value="${escapeHtml(value)}"` : "",
+    placeholder ? `placeholder="${escapeHtml(placeholder)}"` : "",
+    required ? "required" : "",
+    disabled ? "disabled" : "",
+    readonly ? "readonly" : "",
+    autocomplete ? `autocomplete="${escapeHtml(autocomplete)}"` : "",
+    pattern ? `pattern="${escapeHtml(pattern)}"` : "",
+    min !== void 0 ? `min="${escapeHtml(String(min))}"` : "",
+    max !== void 0 ? `max="${escapeHtml(String(max))}"` : "",
+    step !== void 0 ? `step="${escapeHtml(String(step))}"` : "",
+    `class="${baseClasses}"`,
+    dataAttrs
+  ].filter(Boolean).join(" ");
+  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${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">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  const iconBeforeHtml = iconBefore ? `<span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconBefore}</span>` : "";
+  const iconAfterHtml = iconAfter ? `<span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary">${iconAfter}</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 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,
+    className
+  ].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="${escapeHtml(opt.value)}" ${selected} ${optDisabled}>${escapeHtml(opt.label)}</option>`;
+  }).join("\n");
+  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${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">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  return `<div class="form-field">
+    ${labelHtml}
+    <select
+      name="${escapeHtml(name)}"
+      id="${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 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],
+    className
+  ].filter(Boolean).join(" ");
+  const dataAttrs = buildDataAttrs2(data);
+  const labelHtml = label ? `<label for="${escapeHtml(id)}" class="block text-sm font-medium text-text-primary mb-1.5">
+        ${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">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  return `<div class="form-field">
+    ${labelHtml}
+    <textarea
+      name="${escapeHtml(name)}"
+      id="${escapeHtml(id)}"
+      rows="${rows}"
+      class="${baseClasses}"
+      ${placeholder ? `placeholder="${escapeHtml(placeholder)}"` : ""}
+      ${required ? "required" : ""}
+      ${disabled ? "disabled" : ""}
+      ${readonly ? "readonly" : ""}
+      ${dataAttrs}
+    >${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">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  return `<div class="form-field ${className}">
+    <label class="flex items-start gap-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}">
+      <input
+        type="checkbox"
+        name="${escapeHtml(name)}"
+        id="${escapeHtml(id)}"
+        value="${escapeHtml(value)}"
+        class="${checkboxClasses}"
+        ${checked ? "checked" : ""}
+        ${disabled ? "disabled" : ""}
+      >
+      <div>
+        <span class="text-sm font-medium text-text-primary">${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="${escapeHtml(name)}"
+          id="${escapeHtml(radioId)}"
+          value="${escapeHtml(opt.value)}"
+          class="${radioClasses}"
+          ${checked}
+          ${disabled}
+        >
+        <span class="text-sm text-text-primary">${escapeHtml(opt.label)}</span>
+      </label>`;
+  }).join("\n");
+  const labelHtml = label ? `<label class="block text-sm font-medium text-text-primary mb-2">${escapeHtml(label)}</label>` : "";
+  const helperHtml = helper && !error ? `<p class="mt-1.5 text-sm text-text-secondary">${escapeHtml(helper)}</p>` : "";
+  const errorHtml = error ? `<p class="mt-1.5 text-sm text-danger">${escapeHtml(error)}</p>` : "";
+  return `<div class="form-field ${className}" 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="${escapeHtml(action)}"` : "",
+    `method="${method}"`,
+    id ? `id="${escapeHtml(id)}"` : "",
+    className ? `class="${escapeHtml(className)}"` : "",
+    autocomplete ? `autocomplete="${autocomplete}"` : "",
+    enctype ? `enctype="${enctype}"` : "",
+    preventDefault ? 'onsubmit="return false;"' : ""
+  ].filter(Boolean).join(" ");
+  return `<form ${attrs}>${content}</form>`;
+}
+function formRow(fields, options = {}) {
+  const { gap = "md", className = "" } = options;
+  const gapClasses = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
+  return `<div class="grid grid-cols-${fields.length} ${gapClasses[gap]} ${className}">
+    ${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">${escapeHtml(title)}</h3>
+        ${description ? `<p class="text-sm text-text-secondary mt-1">${escapeHtml(description)}</p>` : ""}
+      </div>` : "";
+  return `<div class="form-section ${className}">
+    ${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"
+  };
+  return `<div class="flex items-center gap-3 pt-4 ${alignClasses[align]} ${className}">
+    ${buttons.join("\n")}
+  </div>`;
+}
+function hiddenInput(name, value) {
+  return `<input type="hidden" name="${escapeHtml(name)}" value="${escapeHtml(value)}">`;
+}
+function csrfInput(token) {
+  return hiddenInput("_csrf", token);
+}
+
+// libs/ui/src/components/badge.ts
+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
+  } = options;
+  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], className].filter(Boolean).join(" ");
+    return `<span class="${dotClasses}" aria-label="${escapeHtml(text)}" title="${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,
+    className
+  ].filter(Boolean).join(" ");
+  const iconHtml = icon ? `<span class="mr-1">${icon}</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}${escapeHtml(text)}${removeHtml}
+  </span>`;
+}
+function badgeGroup(badges, options = {}) {
+  const { gap = "sm", className = "" } = options;
+  const gapClasses = { sm: "gap-1", md: "gap-2", lg: "gap-3" };
+  return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${className}">
+    ${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 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 } = options;
+  const variantClasses = getVariantClasses4(variant);
+  const baseClasses = ["rounded-lg border p-4", variantClasses.container, className].filter(Boolean).join(" ");
+  const iconHtml = showIcon ? `<div class="flex-shrink-0 ${variantClasses.icon}">
+        ${icon || alertIcons[variant]}
+      </div>` : "";
+  const titleHtml = title ? `<h3 class="font-semibold">${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 = actions ? `<div class="mt-3">${actions}</div>` : "";
+  const idAttr = id ? `id="${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" : ""}">${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">${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="${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" : ""}">${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="${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="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="w-full h-full object-cover">` : `<span class="font-medium text-white ${sizeClasses.text}">${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="${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">${escapeHtml(name)}</div>
+      ${subtitle ? `<div class="text-sm text-text-secondary">${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">${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('${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('${escapeHtml(id)}')?.classList.add('hidden');
+          }
+        });
+      </script>` : "";
+  return `
+    <div
+      id="${escapeHtml(id)}"
+      class="fixed inset-0 z-50 overflow-y-auto ${visibilityClasses}"
+      ${backdropClickHandler}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="${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('${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">${escapeHtml(title)}</h3>
+      <p class="text-text-secondary">${escapeHtml(message)}</p>
+    </div>
+  `;
+  const confirmButton = confirmHref && isSafeUrl(confirmHref) ? `<a
+        href="${escapeHtml(confirmHref)}"
+        class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
+      >
+        ${escapeHtml(confirmText)}
+      </a>` : `<button
+        type="button"
+        class="px-4 py-2 rounded-lg ${variantClasses[variant]} transition-colors"
+        onclick="document.getElementById('${escapeHtml(id)}').classList.add('hidden')"
+      >
+        ${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('${escapeHtml(id)}').classList.add('hidden')"
+    >
+      ${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">${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('${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="${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">${escapeHtml(col.header)}${buildSortIndicator(
+      col.sortDirection || null
+    )}</span>` : 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='${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="${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) : 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="${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="${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">${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="${escapeHtml(inputName)}[]"
+          value="${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 ? 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">${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">${escapeHtml(perm.description)}</p>` : ""}
+      </div>
+      <div class="flex-shrink-0">
+        ${checkboxHtml}
+      </div>
+    </div>`;
+  }).join("\n");
+  const idAttr = id ? `id="${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}">${escapeHtml(feature.name)}</span>
+        ${feature.description ? `<p class="text-sm text-text-secondary">${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('${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">${escapeHtml(item.term)}</dt>
+        <dd class="mt-1 sm:mt-0 sm:col-span-2 text-sm text-text-primary flex items-center">
+          ${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('${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">${escapeHtml(item.term)}</dt>
+        <dd class="mt-1 text-sm text-text-primary font-medium">${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('${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">${escapeHtml(item.term)}</dt>
+      <dd class="mt-1 text-sm text-text-primary font-medium flex items-center">
+        ${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"}">${escapeHtml(
+      item.label
+    )}</div>
+        ${item.description ? `<p class="text-sm text-text-secondary">${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="${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>`;
+}
+export {
+  ActionItemSchema,
+  ActionListOptionsSchema,
+  AlertOptionsSchema,
+  AlertVariantSchema,
+  AvatarGroupOptionsSchema,
+  AvatarOptionsSchema,
+  AvatarShapeSchema,
+  AvatarSizeSchema,
+  AvatarSpacingSchema,
+  AvatarStatusSchema,
+  AvatarWithTextOptionsSchema,
+  BadgeGroupOptionsSchema,
+  BadgeOptionsSchema,
+  BadgeSizeSchema,
+  BadgeVariantSchema,
+  ButtonGroupOptionsSchema,
+  ButtonOptionsSchema,
+  ButtonSizeSchema,
+  ButtonVariantSchema,
+  CardGroupOptionsSchema,
+  CardOptionsSchema,
+  CardSizeSchema,
+  CardVariantSchema,
+  CheckboxOptionsSchema,
+  ConfirmModalOptionsSchema,
+  ConfirmModalVariantSchema,
+  DescriptionItemSchema,
+  DescriptionListOptionsSchema,
+  DrawerOptionsSchema,
+  DrawerPositionSchema,
+  FeatureItemSchema,
+  FeatureListOptionsSchema,
+  FormActionsOptionsSchema,
+  FormEnctypeSchema,
+  FormMethodSchema,
+  FormOptionsSchema,
+  FormRowOptionsSchema,
+  FormSectionOptionsSchema,
+  InputOptionsSchema,
+  InputSizeSchema,
+  InputStateSchema,
+  InputTypeSchema,
+  ModalOptionsSchema,
+  ModalSizeSchema,
+  ModalTriggerOptionsSchema,
+  PaginationOptionsSchema,
+  PermissionItemSchema,
+  PermissionListOptionsSchema,
+  RadioGroupOptionsSchema,
+  RadioOptionItemSchema,
+  SelectOptionItemSchema,
+  SelectOptionsSchema,
+  TableAlignSchema,
+  TableColumnSchema,
+  TableOptionsSchema,
+  TableSortDirectionSchema,
+  TextareaOptionsSchema,
+  TextareaResizeSchema,
+  ToastOptionsSchema,
+  ToastPositionSchema,
+  actionList,
+  activeBadge,
+  alert,
+  avatar,
+  avatarGroup,
+  avatarWithText,
+  awayDot,
+  badge,
+  badgeGroup,
+  betaBadge,
+  busyDot,
+  button,
+  buttonGroup,
+  card,
+  cardGroup,
+  checkbox,
+  confirmModal,
+  csrfInput,
+  dangerAlert,
+  dangerButton,
+  descriptionList,
+  drawer,
+  errorBadge,
+  featureList,
+  form,
+  formActions,
+  formRow,
+  formSection,
+  ghostButton,
+  hiddenInput,
+  inactiveBadge,
+  infoAlert,
+  input,
+  linkButton,
+  modal,
+  modalTrigger,
+  newBadge,
+  offlineDot,
+  onlineDot,
+  outlineButton,
+  pagination,
+  pendingBadge,
+  permissionList,
+  primaryButton,
+  radioGroup,
+  secondaryButton,
+  select,
+  successAlert,
+  table,
+  textarea,
+  toast,
+  toastContainer,
+  warningAlert
+};