@frontmcp/ui 0.5.0 → 0.6.0

package/esm/widgets/index.js

@@ -0,0 +1,941 @@
+// 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/components/card.ts
+function getVariantClasses(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 getSizeClasses(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 = getVariantClasses(variant);
+  const sizeClasses = getSizeClasses(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>`;
+}
+
+// libs/ui/src/components/badge.ts
+function getVariantClasses2(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 getSizeClasses2(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", getSizeClasses2(size, true), dotVariants[variant], className].filter(Boolean).join(" ");
+    return `<span class="${dotClasses}" aria-label="${escapeHtml(text)}" title="${escapeHtml(text)}"></span>`;
+  }
+  const variantClasses = getVariantClasses2(variant);
+  const sizeClasses = getSizeClasses2(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>`;
+}
+
+// libs/ui/src/validation/error-box.ts
+var errorIcon = `<svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+</svg>`;
+function validationErrorBox(options) {
+  const { componentName, invalidParam } = options;
+  return `<div
+  class="validation-error flex items-start gap-3 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg"
+  role="alert"
+  data-testid="validation-error"
+  data-component="${escapeHtml(componentName)}"
+  data-param="${escapeHtml(invalidParam)}"
+>
+  ${errorIcon}
+  <div class="min-w-0">
+    <p class="font-semibold text-sm">${escapeHtml(componentName)}: Invalid Configuration</p>
+    <p class="text-sm opacity-90 mt-0.5">The "${escapeHtml(invalidParam)}" parameter is invalid.</p>
+  </div>
+</div>`;
+}
+
+// libs/ui/src/validation/wrapper.ts
+function getFirstInvalidPath(error) {
+  const firstError = error.issues[0];
+  if (!firstError || firstError.path.length === 0) {
+    return "options";
+  }
+  return firstError.path.map(String).join(".");
+}
+function validateOptions(options, config) {
+  const result = config.schema.safeParse(options);
+  if (result.success) {
+    return { success: true, data: result.data };
+  }
+  const invalidParam = getFirstInvalidPath(result.error);
+  return {
+    success: false,
+    error: validationErrorBox({
+      componentName: config.componentName,
+      invalidParam
+    })
+  };
+}
+
+// libs/ui/src/validation/schema-paths.ts
+import { z } from "zod";
+
+// libs/ui/src/components/button.schema.ts
+import { z as z2 } from "zod";
+var ButtonVariantSchema = z2.enum(["primary", "secondary", "outline", "ghost", "danger", "success", "link"]);
+var ButtonSizeSchema = z2.enum(["xs", "sm", "md", "lg", "xl"]);
+var ButtonOptionsSchema = z2.object({
+  /** Button variant */
+  variant: ButtonVariantSchema.optional(),
+  /** Button size */
+  size: ButtonSizeSchema.optional(),
+  /** Button type attribute */
+  type: z2.enum(["button", "submit", "reset"]).optional(),
+  /** Disabled state */
+  disabled: z2.boolean().optional(),
+  /** Loading state */
+  loading: z2.boolean().optional(),
+  /** Full width */
+  fullWidth: z2.boolean().optional(),
+  /** Icon before text (HTML string) */
+  iconBefore: z2.string().optional(),
+  /** Icon after text (HTML string) */
+  iconAfter: z2.string().optional(),
+  /** Icon only (no text) */
+  iconOnly: z2.boolean().optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional(),
+  /** Button ID */
+  id: z2.string().optional(),
+  /** Name attribute */
+  name: z2.string().optional(),
+  /** Value attribute */
+  value: z2.string().optional(),
+  /** Click handler (URL for links) */
+  href: z2.string().optional(),
+  /** Open in new tab */
+  target: z2.enum(["_blank", "_self"]).optional(),
+  /** Data attributes */
+  data: z2.record(z2.string(), z2.string()).optional(),
+  /** ARIA label */
+  ariaLabel: z2.string().optional()
+}).strict();
+var ButtonGroupOptionsSchema = z2.object({
+  /** Attach buttons visually */
+  attached: z2.boolean().optional(),
+  /** Direction */
+  direction: z2.enum(["horizontal", "vertical"]).optional(),
+  /** Gap between buttons */
+  gap: z2.enum(["sm", "md", "lg"]).optional(),
+  /** Additional CSS classes */
+  className: z2.string().optional()
+}).strict();
+
+// libs/ui/src/components/button.ts
+function getVariantClasses3(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 getSizeClasses3(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 = getVariantClasses3(variant);
+  const sizeClasses = getSizeClasses3(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>`;
+}
+
+// libs/ui/src/widgets/resource.ts
+var resourceIcons = {
+  document: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+  </svg>`,
+  image: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+  </svg>`,
+  code: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
+  </svg>`,
+  data: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/>
+  </svg>`,
+  file: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
+  </svg>`,
+  link: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+  </svg>`,
+  user: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+  </svg>`,
+  event: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+  </svg>`,
+  message: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"/>
+  </svg>`,
+  task: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
+  </svg>`,
+  custom: `<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+  </svg>`
+};
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function formatDate(date) {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+function resourceWidget(options) {
+  const {
+    type,
+    title,
+    description,
+    icon,
+    thumbnail,
+    url,
+    meta,
+    status,
+    actions = [],
+    className = "",
+    cardOptions = {}
+  } = options;
+  const iconHtml = thumbnail ? `<div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
+        <img src="${escapeHtml(thumbnail)}" alt="${escapeHtml(title)}" class="w-full h-full object-cover">
+      </div>` : `<div class="w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400">
+        ${icon || resourceIcons[type]}
+      </div>`;
+  const statusHtml = status ? badge(status.label, { variant: status.variant, size: "sm" }) : "";
+  const metaItems = [];
+  if (meta?.size) {
+    metaItems.push(formatFileSize(meta.size));
+  }
+  if (meta?.mimeType) {
+    metaItems.push(meta.mimeType);
+  }
+  if (meta?.updatedAt) {
+    metaItems.push(`Updated ${formatDate(meta.updatedAt)}`);
+  } else if (meta?.createdAt) {
+    metaItems.push(`Created ${formatDate(meta.createdAt)}`);
+  }
+  if (meta?.author) {
+    metaItems.push(`by ${meta.author}`);
+  }
+  const metaHtml = metaItems.length > 0 ? `<div class="text-xs text-text-secondary mt-1">${metaItems.join(" \u2022 ")}</div>` : "";
+  const tagsHtml = meta?.tags && meta.tags.length > 0 ? `<div class="flex flex-wrap gap-1 mt-2">
+        ${meta.tags.map((tag) => badge(tag, { variant: "default", size: "sm" })).join("")}
+      </div>` : "";
+  const actionsHtml = actions.length > 0 ? `<div class="flex gap-2 mt-4">
+        ${actions.map((action) => {
+    const variantMap = {
+      primary: "primary",
+      secondary: "secondary",
+      danger: "danger",
+      ghost: "ghost"
+    };
+    const variant = action.variant ? variantMap[action.variant] : "ghost";
+    const htmxAttrs = [];
+    if (action.htmx) {
+      if (action.htmx.get) htmxAttrs.push(`hx-get="${escapeHtml(action.htmx.get)}"`);
+      if (action.htmx.post) htmxAttrs.push(`hx-post="${escapeHtml(action.htmx.post)}"`);
+      if (action.htmx.delete) htmxAttrs.push(`hx-delete="${escapeHtml(action.htmx.delete)}"`);
+      if (action.htmx.target) htmxAttrs.push(`hx-target="${escapeHtml(action.htmx.target)}"`);
+      if (action.htmx.swap) htmxAttrs.push(`hx-swap="${escapeHtml(action.htmx.swap)}"`);
+      if (action.htmx.confirm) htmxAttrs.push(`hx-confirm="${escapeHtml(action.htmx.confirm)}"`);
+    }
+    return button(action.label, {
+      variant,
+      size: "sm",
+      href: action.href,
+      disabled: action.disabled,
+      iconBefore: action.icon
+    });
+  }).join("")}
+      </div>` : "";
+  const content = `
+    <div class="flex gap-4">
+      ${iconHtml}
+      <div class="flex-1 min-w-0">
+        <div class="flex items-start justify-between gap-2">
+          <div class="min-w-0">
+            ${url ? `<a href="${escapeHtml(
+    url
+  )}" class="font-semibold text-text-primary hover:text-primary truncate block">${escapeHtml(
+    title
+  )}</a>` : `<h3 class="font-semibold text-text-primary truncate">${escapeHtml(title)}</h3>`}
+            ${description ? `<p class="text-sm text-text-secondary mt-0.5 line-clamp-2">${escapeHtml(description)}</p>` : ""}
+            ${metaHtml}
+            ${tagsHtml}
+          </div>
+          ${statusHtml}
+        </div>
+        ${actionsHtml}
+      </div>
+    </div>
+  `;
+  return card(content, {
+    variant: "default",
+    size: "md",
+    className: `resource-widget resource-${type} ${className}`,
+    ...cardOptions
+  });
+}
+function resourceList(options) {
+  const {
+    resources,
+    title,
+    emptyMessage = "No resources found",
+    layout = "list",
+    columns = 2,
+    className = "",
+    showLoadMore = false,
+    loadMoreUrl
+  } = options;
+  const titleHtml = title ? `<h2 class="text-lg font-semibold text-text-primary mb-4">${escapeHtml(title)}</h2>` : "";
+  if (resources.length === 0) {
+    return `<div class="${className}">
+      ${titleHtml}
+      <div class="text-center py-12 text-text-secondary">
+        <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+        </svg>
+        <p>${escapeHtml(emptyMessage)}</p>
+      </div>
+    </div>`;
+  }
+  const layoutClasses = layout === "grid" ? `grid grid-cols-1 md:grid-cols-${columns} gap-4` : "space-y-4";
+  const resourcesHtml = resources.map((r) => resourceWidget(r)).join("\n");
+  const loadMoreHtml = showLoadMore && loadMoreUrl ? `<div class="text-center mt-6">
+        ${button("Load More", {
+    variant: "outline",
+    href: loadMoreUrl
+  })}
+      </div>` : "";
+  return `<div class="resource-list ${className}">
+    ${titleHtml}
+    <div class="${layoutClasses}">
+      ${resourcesHtml}
+    </div>
+    ${loadMoreHtml}
+  </div>`;
+}
+function resourceItem(options) {
+  const { type, title, description, icon, url, meta, status } = options;
+  const iconHtml = `<div class="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400">
+    ${icon || resourceIcons[type]}
+  </div>`;
+  const statusHtml = status ? badge(status.label, { variant: status.variant, size: "sm" }) : "";
+  const metaText = meta?.size ? formatFileSize(meta.size) : "";
+  const titleElement = url ? `<a href="${escapeHtml(url)}" class="font-medium text-text-primary hover:text-primary">${escapeHtml(title)}</a>` : `<span class="font-medium text-text-primary">${escapeHtml(title)}</span>`;
+  return `<div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
+    ${iconHtml}
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        ${titleElement}
+        ${statusHtml}
+      </div>
+      ${description || metaText ? `<p class="text-sm text-text-secondary truncate">${escapeHtml(description || metaText)}</p>` : ""}
+    </div>
+  </div>`;
+}
+function codePreview(options) {
+  const {
+    code,
+    language = "text",
+    filename,
+    lineNumbers = true,
+    maxHeight = "400px",
+    showCopy = true,
+    className = ""
+  } = options;
+  const lines = code.split("\n");
+  const lineNumbersHtml = lineNumbers ? `<div class="text-right select-none pr-4 text-gray-500">
+        ${lines.map((_, i) => `<div>${i + 1}</div>`).join("")}
+      </div>` : "";
+  const copyScript = showCopy ? `<script>
+        function copyCode(btn, code) {
+          navigator.clipboard.writeText(code).then(() => {
+            const original = btn.innerHTML;
+            btn.innerHTML = '<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+            setTimeout(() => btn.innerHTML = original, 2000);
+          });
+        }
+      </script>` : "";
+  const copyButton = showCopy ? `<button
+        type="button"
+        onclick="copyCode(this, ${escapeHtml(JSON.stringify(code))})"
+        class="p-1.5 rounded hover:bg-gray-700 transition-colors"
+        title="Copy code"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+        </svg>
+      </button>` : "";
+  return `<div class="code-preview rounded-lg overflow-hidden ${className}">
+    ${filename || showCopy ? `
+      <div class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700">
+        ${filename ? `<span class="text-sm text-gray-300">${escapeHtml(filename)}</span>` : "<span></span>"}
+        <div class="flex items-center gap-2">
+          ${language ? `<span class="text-xs text-gray-500">${escapeHtml(language)}</span>` : ""}
+          ${copyButton}
+        </div>
+      </div>
+    ` : ""}
+    <div class="bg-gray-900 p-4 overflow-auto" style="max-height: ${maxHeight}">
+      <div class="flex text-sm font-mono">
+        ${lineNumbersHtml}
+        <pre class="flex-1 text-gray-100"><code>${escapeHtml(code)}</code></pre>
+      </div>
+    </div>
+    ${copyScript}
+  </div>`;
+}
+function imagePreview(options) {
+  const { src, alt, caption, maxHeight = "400px", clickable = true, className = "" } = options;
+  const imageHtml = `<img
+    src="${escapeHtml(src)}"
+    alt="${escapeHtml(alt)}"
+    class="max-w-full h-auto rounded-lg"
+    style="max-height: ${maxHeight}"
+  >`;
+  const captionHtml = caption ? `<p class="text-sm text-text-secondary mt-2 text-center">${escapeHtml(caption)}</p>` : "";
+  const content = clickable ? `<a href="${escapeHtml(src)}" target="_blank" rel="noopener" class="block">${imageHtml}</a>` : imageHtml;
+  return `<div class="image-preview ${className}">
+    ${content}
+    ${captionHtml}
+  </div>`;
+}
+
+// libs/ui/src/widgets/progress.ts
+function progressBar(options) {
+  const {
+    value,
+    showLabel = true,
+    labelPosition = "outside",
+    size = "md",
+    variant = "primary",
+    animated = false,
+    className = "",
+    label
+  } = options;
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const sizeClasses = {
+    sm: "h-1.5",
+    md: "h-2.5",
+    lg: "h-4"
+  };
+  const variantClasses = {
+    primary: "bg-primary",
+    success: "bg-success",
+    warning: "bg-warning",
+    danger: "bg-danger",
+    info: "bg-blue-500"
+  };
+  const animatedClass = animated ? "bg-stripes animate-stripes" : "";
+  const displayLabel = label || `${Math.round(clampedValue)}%`;
+  const insideLabel = labelPosition === "inside" && size === "lg" && clampedValue > 10 ? `<span class="absolute inset-0 flex items-center justify-center text-xs font-medium text-white">${escapeHtml(
+    displayLabel
+  )}</span>` : "";
+  const outsideLabel = showLabel && labelPosition === "outside" ? `<div class="flex justify-between mb-1">
+        <span class="text-sm font-medium text-text-primary">${label ? escapeHtml(label) : "Progress"}</span>
+        <span class="text-sm text-text-secondary">${Math.round(clampedValue)}%</span>
+      </div>` : "";
+  return `<div class="progress-bar ${className}">
+    ${outsideLabel}
+    <div class="relative w-full ${sizeClasses[size]} bg-gray-200 rounded-full overflow-hidden">
+      <div
+        class="${variantClasses[variant]} ${sizeClasses[size]} ${animatedClass} rounded-full transition-all duration-300"
+        style="width: ${clampedValue}%"
+        role="progressbar"
+        aria-valuenow="${clampedValue}"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      ></div>
+      ${insideLabel}
+    </div>
+  </div>
+  ${animated ? `<style>
+    .bg-stripes {
+      background-image: linear-gradient(
+        45deg,
+        rgba(255,255,255,0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255,255,255,0.15) 50%,
+        rgba(255,255,255,0.15) 75%,
+        transparent 75%,
+        transparent
+      );
+      background-size: 1rem 1rem;
+    }
+    @keyframes stripes {
+      from { background-position: 1rem 0; }
+      to { background-position: 0 0; }
+    }
+    .animate-stripes {
+      animation: stripes 1s linear infinite;
+    }
+  </style>` : ""}`;
+}
+function stepProgress(options) {
+  const { steps, orientation = "horizontal", connector = "line", className = "" } = options;
+  const getStepIcon = (step, index) => {
+    if (step.icon) return step.icon;
+    if (step.status === "completed") {
+      return `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+      </svg>`;
+    }
+    return `<span class="font-medium">${index + 1}</span>`;
+  };
+  const getStepClasses = (status) => {
+    switch (status) {
+      case "completed":
+        return {
+          circle: "bg-success text-white",
+          text: "text-text-primary"
+        };
+      case "current":
+        return {
+          circle: "bg-primary text-white ring-4 ring-primary/20",
+          text: "text-primary font-medium"
+        };
+      case "upcoming":
+      default:
+        return {
+          circle: "bg-gray-200 text-gray-500",
+          text: "text-text-secondary"
+        };
+    }
+  };
+  if (orientation === "vertical") {
+    const stepsHtml2 = steps.map((step, index) => {
+      const classes = getStepClasses(step.status);
+      const isLast = index === steps.length - 1;
+      const connectorHtml = !isLast && connector !== "none" ? `<div class="ml-5 w-0.5 h-8 ${connector === "dashed" ? "border-l-2 border-dashed border-gray-300" : "bg-gray-200"} ${step.status === "completed" ? "bg-success" : ""}"></div>` : "";
+      const stepContent = `
+        <div class="flex items-start gap-4">
+          <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center flex-shrink-0">
+            ${getStepIcon(step, index)}
+          </div>
+          <div class="pt-2">
+            <div class="${classes.text}">${escapeHtml(step.label)}</div>
+            ${step.description ? `<p class="text-sm text-text-secondary mt-0.5">${escapeHtml(step.description)}</p>` : ""}
+          </div>
+        </div>
+        ${connectorHtml}
+      `;
+      return step.href && step.status === "completed" ? `<a href="${escapeHtml(step.href)}" class="block hover:opacity-80">${stepContent}</a>` : `<div>${stepContent}</div>`;
+    }).join("\n");
+    return `<div class="step-progress ${className}">${stepsHtml2}</div>`;
+  }
+  const stepsHtml = steps.map((step, index) => {
+    const classes = getStepClasses(step.status);
+    const isLast = index === steps.length - 1;
+    const connectorHtml = !isLast && connector !== "none" ? `<div class="flex-1 h-0.5 mx-2 ${connector === "dashed" ? "border-t-2 border-dashed border-gray-300" : "bg-gray-200"} ${step.status === "completed" ? "bg-success" : ""}"></div>` : "";
+    const stepHtml = `
+      <div class="flex flex-col items-center">
+        <div class="w-10 h-10 rounded-full ${classes.circle} flex items-center justify-center">
+          ${getStepIcon(step, index)}
+        </div>
+        <div class="mt-2 text-center">
+          <div class="${classes.text} text-sm">${escapeHtml(step.label)}</div>
+          ${step.description ? `<p class="text-xs text-text-secondary mt-0.5 max-w-[120px]">${escapeHtml(step.description)}</p>` : ""}
+        </div>
+      </div>
+    `;
+    const clickableStep = step.href && step.status === "completed" ? `<a href="${escapeHtml(step.href)}" class="hover:opacity-80">${stepHtml}</a>` : stepHtml;
+    return `${clickableStep}${connectorHtml}`;
+  }).join("\n");
+  return `<div class="step-progress flex items-start ${className}">${stepsHtml}</div>`;
+}
+function circularProgress(options) {
+  const { value, size = 80, strokeWidth = 8, variant = "primary", showLabel = true, label, className = "" } = options;
+  const clampedValue = Math.min(100, Math.max(0, value));
+  const radius = (size - strokeWidth) / 2;
+  const circumference = radius * 2 * Math.PI;
+  const offset = circumference - clampedValue / 100 * circumference;
+  const variantColors = {
+    primary: "text-primary",
+    success: "text-success",
+    warning: "text-warning",
+    danger: "text-danger"
+  };
+  const displayLabel = label || `${Math.round(clampedValue)}%`;
+  return `<div class="circular-progress inline-flex items-center justify-center ${className}" style="width: ${size}px; height: ${size}px;">
+    <svg class="transform -rotate-90" width="${size}" height="${size}">
+      <!-- Background circle -->
+      <circle
+        cx="${size / 2}"
+        cy="${size / 2}"
+        r="${radius}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="${strokeWidth}"
+        class="text-gray-200"
+      />
+      <!-- Progress circle -->
+      <circle
+        cx="${size / 2}"
+        cy="${size / 2}"
+        r="${radius}"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="${strokeWidth}"
+        stroke-linecap="round"
+        class="${variantColors[variant]}"
+        style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${offset}; transition: stroke-dashoffset 0.3s ease;"
+      />
+    </svg>
+    ${showLabel ? `<span class="absolute text-sm font-semibold text-text-primary">${escapeHtml(displayLabel)}</span>` : ""}
+  </div>`;
+}
+function statusIndicator(options) {
+  const { status, label, size = "md", pulse = false, className = "" } = options;
+  const sizeClasses = {
+    sm: { dot: "w-2 h-2", text: "text-xs" },
+    md: { dot: "w-2.5 h-2.5", text: "text-sm" },
+    lg: { dot: "w-3 h-3", text: "text-base" }
+  };
+  const statusClasses = {
+    online: { color: "bg-success", label: "Online" },
+    offline: { color: "bg-gray-400", label: "Offline" },
+    busy: { color: "bg-danger", label: "Busy" },
+    away: { color: "bg-warning", label: "Away" },
+    loading: { color: "bg-blue-500", label: "Loading" },
+    error: { color: "bg-danger", label: "Error" },
+    success: { color: "bg-success", label: "Success" }
+  };
+  const statusInfo = statusClasses[status];
+  const sizeInfo = sizeClasses[size];
+  const displayLabel = label || statusInfo.label;
+  const pulseHtml = pulse || status === "loading" ? `<span class="absolute ${sizeInfo.dot} ${statusInfo.color} rounded-full animate-ping opacity-75"></span>` : "";
+  return `<div class="status-indicator inline-flex items-center gap-2 ${className}">
+    <span class="relative flex">
+      ${pulseHtml}
+      <span class="relative ${sizeInfo.dot} ${statusInfo.color} rounded-full"></span>
+    </span>
+    ${displayLabel ? `<span class="${sizeInfo.text} text-text-secondary">${escapeHtml(displayLabel)}</span>` : ""}
+  </div>`;
+}
+function skeleton(options = {}) {
+  const { type = "text", width, height, lines = 3, animated = true, className = "" } = options;
+  const animateClass = animated ? "animate-pulse" : "";
+  const baseClass = `bg-gray-200 ${animateClass}`;
+  switch (type) {
+    case "circle":
+      return `<div class="${baseClass} rounded-full ${className}" style="width: ${width || "40px"}; height: ${height || "40px"}"></div>`;
+    case "rect":
+      return `<div class="${baseClass} rounded ${className}" style="width: ${width || "100%"}; height: ${height || "100px"}"></div>`;
+    case "card":
+      return `<div class="${animateClass} space-y-4 ${className}">
+        <div class="bg-gray-200 rounded h-40"></div>
+        <div class="space-y-2">
+          <div class="bg-gray-200 h-4 rounded w-3/4"></div>
+          <div class="bg-gray-200 h-4 rounded w-1/2"></div>
+        </div>
+      </div>`;
+    case "text":
+    default: {
+      const linesHtml = Array(lines).fill(0).map((_, i) => {
+        const lineWidth = i === lines - 1 ? "60%" : i === 0 ? "90%" : "80%";
+        return `<div class="bg-gray-200 h-4 rounded" style="width: ${lineWidth}"></div>`;
+      }).join("\n");
+      return `<div class="${animateClass} space-y-2 ${className}" style="width: ${width || "100%"}">
+        ${linesHtml}
+      </div>`;
+    }
+  }
+}
+function contentSkeleton(options = {}) {
+  const { animated = true, className = "" } = options;
+  const animateClass = animated ? "animate-pulse" : "";
+  return `<div class="${animateClass} flex gap-4 ${className}">
+    <div class="bg-gray-200 rounded-full w-12 h-12 flex-shrink-0"></div>
+    <div class="flex-1 space-y-2 py-1">
+      <div class="bg-gray-200 h-4 rounded w-3/4"></div>
+      <div class="bg-gray-200 h-4 rounded w-1/2"></div>
+    </div>
+  </div>`;
+}
+export {
+  circularProgress,
+  codePreview,
+  contentSkeleton,
+  imagePreview,
+  progressBar,
+  resourceItem,
+  resourceList,
+  resourceWidget,
+  skeleton,
+  statusIndicator,
+  stepProgress
+};