@frontmcp/ui 0.5.0

package/src/widgets/resource.js

@@ -0,0 +1,340 @@
+"use strict";
+/**
+ * OpenAI App SDK Resource Widgets
+ *
+ * Components for displaying resources in OpenAI's App SDK format.
+ * These widgets are designed to work with OpenAI Canvas and similar interfaces.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resourceWidget = resourceWidget;
+exports.resourceList = resourceList;
+exports.resourceItem = resourceItem;
+exports.codePreview = codePreview;
+exports.imagePreview = imagePreview;
+const base_1 = require("../layouts/base");
+const card_1 = require("../components/card");
+const badge_1 = require("../components/badge");
+const button_1 = require("../components/button");
+// ============================================
+// Resource Icons
+// ============================================
+const 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>`,
+};
+// ============================================
+// Utility Functions
+// ============================================
+/**
+ * Format file size
+ */
+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]}`;
+}
+/**
+ * Format date
+ */
+function formatDate(date) {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    return d.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+}
+// ============================================
+// Resource Widget Builder
+// ============================================
+/**
+ * Build a resource widget
+ */
+function resourceWidget(options) {
+    const { type, title, description, icon, thumbnail, url, meta, status, actions = [], className = '', cardOptions = {}, } = options;
+    // Icon/Thumbnail
+    const iconHtml = thumbnail
+        ? `<div class="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
+        <img src="${(0, base_1.escapeHtml)(thumbnail)}" alt="${(0, base_1.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>`;
+    // Status badge
+    const statusHtml = status ? (0, badge_1.badge)(status.label, { variant: status.variant, size: 'sm' }) : '';
+    // Metadata
+    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(' • ')}</div>` : '';
+    // Tags
+    const tagsHtml = meta?.tags && meta.tags.length > 0
+        ? `<div class="flex flex-wrap gap-1 mt-2">
+        ${meta.tags.map((tag) => (0, badge_1.badge)(tag, { variant: 'default', size: 'sm' })).join('')}
+      </div>`
+        : '';
+    // Actions
+    const actionsHtml = actions.length > 0
+        ? `<div class="flex gap-2 mt-4">
+        ${actions
+            .map((action) => {
+            const variantMap = {
+                primary: 'primary',
+                secondary: 'secondary',
+                danger: 'danger',
+                ghost: 'ghost',
+            };
+            const variant = action.variant ? variantMap[action.variant] : 'ghost';
+            const htmxAttrs = [];
+            if (action.htmx) {
+                if (action.htmx.get)
+                    htmxAttrs.push(`hx-get="${(0, base_1.escapeHtml)(action.htmx.get)}"`);
+                if (action.htmx.post)
+                    htmxAttrs.push(`hx-post="${(0, base_1.escapeHtml)(action.htmx.post)}"`);
+                if (action.htmx.delete)
+                    htmxAttrs.push(`hx-delete="${(0, base_1.escapeHtml)(action.htmx.delete)}"`);
+                if (action.htmx.target)
+                    htmxAttrs.push(`hx-target="${(0, base_1.escapeHtml)(action.htmx.target)}"`);
+                if (action.htmx.swap)
+                    htmxAttrs.push(`hx-swap="${(0, base_1.escapeHtml)(action.htmx.swap)}"`);
+                if (action.htmx.confirm)
+                    htmxAttrs.push(`hx-confirm="${(0, base_1.escapeHtml)(action.htmx.confirm)}"`);
+            }
+            return (0, button_1.button)(action.label, {
+                variant: variant,
+                size: 'sm',
+                href: action.href,
+                disabled: action.disabled,
+                iconBefore: action.icon,
+            });
+        })
+            .join('')}
+      </div>`
+        : '';
+    // Content
+    const content = `
+    <div class="flex gap-4">
+      ${iconHtml}
+      <div class="flex-1 min-w-0">
+        <div class="flex items-start justify-between gap-2">
+          <div class="min-w-0">
+            ${url
+        ? `<a href="${(0, base_1.escapeHtml)(url)}" class="font-semibold text-text-primary hover:text-primary truncate block">${(0, base_1.escapeHtml)(title)}</a>`
+        : `<h3 class="font-semibold text-text-primary truncate">${(0, base_1.escapeHtml)(title)}</h3>`}
+            ${description
+        ? `<p class="text-sm text-text-secondary mt-0.5 line-clamp-2">${(0, base_1.escapeHtml)(description)}</p>`
+        : ''}
+            ${metaHtml}
+            ${tagsHtml}
+          </div>
+          ${statusHtml}
+        </div>
+        ${actionsHtml}
+      </div>
+    </div>
+  `;
+    return (0, card_1.card)(content, {
+        variant: 'default',
+        size: 'md',
+        className: `resource-widget resource-${type} ${className}`,
+        ...cardOptions,
+    });
+}
+/**
+ * Build a resource list widget
+ */
+function resourceList(options) {
+    const { resources, title, emptyMessage = 'No resources found', layout = 'list', columns = 2, className = '', showLoadMore = false, loadMoreUrl, } = options;
+    // Title
+    const titleHtml = title ? `<h2 class="text-lg font-semibold text-text-primary mb-4">${(0, base_1.escapeHtml)(title)}</h2>` : '';
+    // Empty state
+    if (resources.length === 0) {
+        return `<div class="${className}">
+      ${titleHtml}
+      <div class="text-center py-12 text-text-secondary">
+        <svg class="w-12 h-12 mx-auto mb-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
+        </svg>
+        <p>${(0, base_1.escapeHtml)(emptyMessage)}</p>
+      </div>
+    </div>`;
+    }
+    // Layout classes
+    const layoutClasses = layout === 'grid' ? `grid grid-cols-1 md:grid-cols-${columns} gap-4` : 'space-y-4';
+    // Resources
+    const resourcesHtml = resources.map((r) => resourceWidget(r)).join('\n');
+    // Load more button
+    const loadMoreHtml = showLoadMore && loadMoreUrl
+        ? `<div class="text-center mt-6">
+        ${(0, button_1.button)('Load More', {
+            variant: 'outline',
+            htmx: {
+                get: loadMoreUrl,
+                target: 'closest .resource-list',
+                swap: 'beforeend',
+            },
+        })}
+      </div>`
+        : '';
+    return `<div class="resource-list ${className}">
+    ${titleHtml}
+    <div class="${layoutClasses}">
+      ${resourcesHtml}
+    </div>
+    ${loadMoreHtml}
+  </div>`;
+}
+// ============================================
+// Compact Resource Item
+// ============================================
+/**
+ * Build a compact resource item (for inline display)
+ */
+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 ? (0, badge_1.badge)(status.label, { variant: status.variant, size: 'sm' }) : '';
+    const metaText = meta?.size ? formatFileSize(meta.size) : '';
+    const titleElement = url
+        ? `<a href="${(0, base_1.escapeHtml)(url)}" class="font-medium text-text-primary hover:text-primary">${(0, base_1.escapeHtml)(title)}</a>`
+        : `<span class="font-medium text-text-primary">${(0, base_1.escapeHtml)(title)}</span>`;
+    return `<div class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors">
+    ${iconHtml}
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center gap-2">
+        ${titleElement}
+        ${statusHtml}
+      </div>
+      ${description || metaText
+        ? `<p class="text-sm text-text-secondary truncate">${(0, base_1.escapeHtml)(description || metaText)}</p>`
+        : ''}
+    </div>
+  </div>`;
+}
+/**
+ * Build a code preview widget
+ */
+function codePreview(options) {
+    const { code, language = 'text', filename, lineNumbers = true, maxHeight = '400px', showCopy = true, className = '', } = options;
+    const lines = code.split('\n');
+    const lineNumbersHtml = lineNumbers
+        ? `<div class="text-right select-none pr-4 text-gray-500">
+        ${lines.map((_, i) => `<div>${i + 1}</div>`).join('')}
+      </div>`
+        : '';
+    const copyScript = showCopy
+        ? `<script>
+        function copyCode(btn, code) {
+          navigator.clipboard.writeText(code).then(() => {
+            const original = btn.innerHTML;
+            btn.innerHTML = '<svg class="w-4 h-4 text-success" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>';
+            setTimeout(() => btn.innerHTML = original, 2000);
+          });
+        }
+      </script>`
+        : '';
+    const copyButton = showCopy
+        ? `<button
+        type="button"
+        onclick="copyCode(this, ${(0, base_1.escapeHtml)(JSON.stringify(code))})"
+        class="p-1.5 rounded hover:bg-gray-700 transition-colors"
+        title="Copy code"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+        </svg>
+      </button>`
+        : '';
+    return `<div class="code-preview rounded-lg overflow-hidden ${className}">
+    ${filename || showCopy
+        ? `
+      <div class="flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700">
+        ${filename ? `<span class="text-sm text-gray-300">${(0, base_1.escapeHtml)(filename)}</span>` : '<span></span>'}
+        <div class="flex items-center gap-2">
+          ${language ? `<span class="text-xs text-gray-500">${(0, base_1.escapeHtml)(language)}</span>` : ''}
+          ${copyButton}
+        </div>
+      </div>
+    `
+        : ''}
+    <div class="bg-gray-900 p-4 overflow-auto" style="max-height: ${maxHeight}">
+      <div class="flex text-sm font-mono">
+        ${lineNumbersHtml}
+        <pre class="flex-1 text-gray-100"><code>${(0, base_1.escapeHtml)(code)}</code></pre>
+      </div>
+    </div>
+    ${copyScript}
+  </div>`;
+}
+/**
+ * Build an image preview widget
+ */
+function imagePreview(options) {
+    const { src, alt, caption, maxHeight = '400px', clickable = true, className = '' } = options;
+    const imageHtml = `<img
+    src="${(0, base_1.escapeHtml)(src)}"
+    alt="${(0, base_1.escapeHtml)(alt)}"
+    class="max-w-full h-auto rounded-lg"
+    style="max-height: ${maxHeight}"
+  >`;
+    const captionHtml = caption
+        ? `<p class="text-sm text-text-secondary mt-2 text-center">${(0, base_1.escapeHtml)(caption)}</p>`
+        : '';
+    const content = clickable
+        ? `<a href="${(0, base_1.escapeHtml)(src)}" target="_blank" rel="noopener" class="block">${imageHtml}</a>`
+        : imageHtml;
+    return `<div class="image-preview ${className}">
+    ${content}
+    ${captionHtml}
+  </div>`;
+}
+//# sourceMappingURL=resource.js.map

package/src/widgets/resource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource.js","sourceRoot":"","sources":["../../../src/widgets/resource.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * OpenAI App SDK Resource Widgets\n *\n * Components for displaying resources in OpenAI's App SDK format.\n * These widgets are designed to work with OpenAI Canvas and similar interfaces.\n */\n\nimport { escapeHtml } from '../layouts/base';\nimport { card, type CardOptions } from '../components/card';\nimport { badge, type BadgeVariant } from '../components/badge';\nimport { button } from '../components/button';\n\n// ============================================\n// Resource Types\n// ============================================\n\n/**\n * Resource type identifiers\n */\nexport type ResourceType =\n  | 'document'\n  | 'image'\n  | 'code'\n  | 'data'\n  | 'file'\n  | 'link'\n  | 'user'\n  | 'event'\n  | 'message'\n  | 'task'\n  | 'custom';\n\n/**\n * Resource metadata\n */\nexport interface ResourceMeta {\n  /** Creation timestamp */\n  createdAt?: string | Date;\n  /** Last modified timestamp */\n  updatedAt?: string | Date;\n  /** Author/creator */\n  author?: string;\n  /** File size (bytes) */\n  size?: number;\n  /** MIME type */\n  mimeType?: string;\n  /** Tags */\n  tags?: string[];\n  /** Custom metadata */\n  [key: string]: unknown;\n}\n\n/**\n * Resource action\n */\nexport interface ResourceAction {\n  /** Action label */\n  label: string;\n  /** Action icon */\n  icon?: string;\n  /** Action URL */\n  href?: string;\n  /** HTMX attributes */\n  htmx?: {\n    get?: string;\n    post?: string;\n    delete?: string;\n    target?: string;\n    swap?: string;\n    confirm?: string;\n  };\n  /** Variant */\n  variant?: 'primary' | 'secondary' | 'danger' | 'ghost';\n  /** Disabled */\n  disabled?: boolean;\n}\n\n/**\n * Base resource options\n */\nexport interface ResourceOptions {\n  /** Resource type */\n  type: ResourceType;\n  /** Resource title */\n  title: string;\n  /** Resource description */\n  description?: string;\n  /** Resource icon */\n  icon?: string;\n  /** Resource thumbnail URL */\n  thumbnail?: string;\n  /** Resource URL */\n  url?: string;\n  /** Resource metadata */\n  meta?: ResourceMeta;\n  /** Resource status */\n  status?: {\n    label: string;\n    variant: BadgeVariant;\n  };\n  /** Available actions */\n  actions?: ResourceAction[];\n  /** Additional CSS classes */\n  className?: string;\n  /** Card options */\n  cardOptions?: Partial<CardOptions>;\n}\n\n// ============================================\n// Resource Icons\n// ============================================\n\nconst resourceIcons: Record<ResourceType, string> = {\n  document: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  image: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  code: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"/>\n  </svg>`,\n  data: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  file: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  link: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  user: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  event: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  message: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  task: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n  custom: `<svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n    <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\"/>\n  </svg>`,\n};\n\n// ============================================\n// Utility Functions\n// ============================================\n\n/**\n * Format file size\n */\nfunction formatFileSize(bytes: number): string {\n  if (bytes === 0) return '0 B';\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;\n}\n\n/**\n * Format date\n */\nfunction formatDate(date: string | Date): string {\n  const d = typeof date === 'string' ? new Date(date) : date;\n  return d.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\n// ============================================\n// Resource Widget Builder\n// ============================================\n\n/**\n * Build a resource widget\n */\nexport function resourceWidget(options: ResourceOptions): string {\n  const {\n    type,\n    title,\n    description,\n    icon,\n    thumbnail,\n    url,\n    meta,\n    status,\n    actions = [],\n    className = '',\n    cardOptions = {},\n  } = options;\n\n  // Icon/Thumbnail\n  const iconHtml = thumbnail\n    ? `<div class=\"w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0\">\n        <img src=\"${escapeHtml(thumbnail)}\" alt=\"${escapeHtml(title)}\" class=\"w-full h-full object-cover\">\n      </div>`\n    : `<div class=\"w-16 h-16 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400\">\n        ${icon || resourceIcons[type]}\n      </div>`;\n\n  // Status badge\n  const statusHtml = status ? badge(status.label, { variant: status.variant, size: 'sm' }) : '';\n\n  // Metadata\n  const metaItems: string[] = [];\n  if (meta?.size) {\n    metaItems.push(formatFileSize(meta.size));\n  }\n  if (meta?.mimeType) {\n    metaItems.push(meta.mimeType);\n  }\n  if (meta?.updatedAt) {\n    metaItems.push(`Updated ${formatDate(meta.updatedAt)}`);\n  } else if (meta?.createdAt) {\n    metaItems.push(`Created ${formatDate(meta.createdAt)}`);\n  }\n  if (meta?.author) {\n    metaItems.push(`by ${meta.author}`);\n  }\n\n  const metaHtml =\n    metaItems.length > 0 ? `<div class=\"text-xs text-text-secondary mt-1\">${metaItems.join(' • ')}</div>` : '';\n\n  // Tags\n  const tagsHtml =\n    meta?.tags && meta.tags.length > 0\n      ? `<div class=\"flex flex-wrap gap-1 mt-2\">\n        ${meta.tags.map((tag) => badge(tag, { variant: 'default', size: 'sm' })).join('')}\n      </div>`\n      : '';\n\n  // Actions\n  const actionsHtml =\n    actions.length > 0\n      ? `<div class=\"flex gap-2 mt-4\">\n        ${actions\n          .map((action) => {\n            const variantMap: Record<string, string> = {\n              primary: 'primary',\n              secondary: 'secondary',\n              danger: 'danger',\n              ghost: 'ghost',\n            };\n            const variant = action.variant ? variantMap[action.variant] : 'ghost';\n\n            const htmxAttrs: string[] = [];\n            if (action.htmx) {\n              if (action.htmx.get) htmxAttrs.push(`hx-get=\"${escapeHtml(action.htmx.get)}\"`);\n              if (action.htmx.post) htmxAttrs.push(`hx-post=\"${escapeHtml(action.htmx.post)}\"`);\n              if (action.htmx.delete) htmxAttrs.push(`hx-delete=\"${escapeHtml(action.htmx.delete)}\"`);\n              if (action.htmx.target) htmxAttrs.push(`hx-target=\"${escapeHtml(action.htmx.target)}\"`);\n              if (action.htmx.swap) htmxAttrs.push(`hx-swap=\"${escapeHtml(action.htmx.swap)}\"`);\n              if (action.htmx.confirm) htmxAttrs.push(`hx-confirm=\"${escapeHtml(action.htmx.confirm)}\"`);\n            }\n\n            return button(action.label, {\n              variant: variant as 'primary' | 'secondary' | 'danger' | 'ghost',\n              size: 'sm',\n              href: action.href,\n              disabled: action.disabled,\n              iconBefore: action.icon,\n            });\n          })\n          .join('')}\n      </div>`\n      : '';\n\n  // Content\n  const content = `\n    <div class=\"flex gap-4\">\n      ${iconHtml}\n      <div class=\"flex-1 min-w-0\">\n        <div class=\"flex items-start justify-between gap-2\">\n          <div class=\"min-w-0\">\n            ${\n              url\n                ? `<a href=\"${escapeHtml(\n                    url,\n                  )}\" class=\"font-semibold text-text-primary hover:text-primary truncate block\">${escapeHtml(\n                    title,\n                  )}</a>`\n                : `<h3 class=\"font-semibold text-text-primary truncate\">${escapeHtml(title)}</h3>`\n            }\n            ${\n              description\n                ? `<p class=\"text-sm text-text-secondary mt-0.5 line-clamp-2\">${escapeHtml(description)}</p>`\n                : ''\n            }\n            ${metaHtml}\n            ${tagsHtml}\n          </div>\n          ${statusHtml}\n        </div>\n        ${actionsHtml}\n      </div>\n    </div>\n  `;\n\n  return card(content, {\n    variant: 'default',\n    size: 'md',\n    className: `resource-widget resource-${type} ${className}`,\n    ...cardOptions,\n  });\n}\n\n// ============================================\n// Resource List Widget\n// ============================================\n\n/**\n * Resource list options\n */\nexport interface ResourceListOptions {\n  /** Resources to display */\n  resources: ResourceOptions[];\n  /** List title */\n  title?: string;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Grid or list layout */\n  layout?: 'list' | 'grid';\n  /** Grid columns */\n  columns?: 1 | 2 | 3 | 4;\n  /** Additional CSS classes */\n  className?: string;\n  /** Show load more button */\n  showLoadMore?: boolean;\n  /** Load more URL */\n  loadMoreUrl?: string;\n}\n\n/**\n * Build a resource list widget\n */\nexport function resourceList(options: ResourceListOptions): string {\n  const {\n    resources,\n    title,\n    emptyMessage = 'No resources found',\n    layout = 'list',\n    columns = 2,\n    className = '',\n    showLoadMore = false,\n    loadMoreUrl,\n  } = options;\n\n  // Title\n  const titleHtml = title ? `<h2 class=\"text-lg font-semibold text-text-primary mb-4\">${escapeHtml(title)}</h2>` : '';\n\n  // Empty state\n  if (resources.length === 0) {\n    return `<div class=\"${className}\">\n      ${titleHtml}\n      <div class=\"text-center py-12 text-text-secondary\">\n        <svg class=\"w-12 h-12 mx-auto mb-4 text-gray-300\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <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\"/>\n        </svg>\n        <p>${escapeHtml(emptyMessage)}</p>\n      </div>\n    </div>`;\n  }\n\n  // Layout classes\n  const layoutClasses = layout === 'grid' ? `grid grid-cols-1 md:grid-cols-${columns} gap-4` : 'space-y-4';\n\n  // Resources\n  const resourcesHtml = resources.map((r) => resourceWidget(r)).join('\\n');\n\n  // Load more button\n  const loadMoreHtml =\n    showLoadMore && loadMoreUrl\n      ? `<div class=\"text-center mt-6\">\n        ${button('Load More', {\n          variant: 'outline',\n          htmx: {\n            get: loadMoreUrl,\n            target: 'closest .resource-list',\n            swap: 'beforeend',\n          },\n        })}\n      </div>`\n      : '';\n\n  return `<div class=\"resource-list ${className}\">\n    ${titleHtml}\n    <div class=\"${layoutClasses}\">\n      ${resourcesHtml}\n    </div>\n    ${loadMoreHtml}\n  </div>`;\n}\n\n// ============================================\n// Compact Resource Item\n// ============================================\n\n/**\n * Build a compact resource item (for inline display)\n */\nexport function resourceItem(options: Omit<ResourceOptions, 'cardOptions'>): string {\n  const { type, title, description, icon, url, meta, status } = options;\n\n  const iconHtml = `<div class=\"w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0 text-gray-400\">\n    ${icon || resourceIcons[type]}\n  </div>`;\n\n  const statusHtml = status ? badge(status.label, { variant: status.variant, size: 'sm' }) : '';\n\n  const metaText = meta?.size ? formatFileSize(meta.size) : '';\n\n  const titleElement = url\n    ? `<a href=\"${escapeHtml(url)}\" class=\"font-medium text-text-primary hover:text-primary\">${escapeHtml(title)}</a>`\n    : `<span class=\"font-medium text-text-primary\">${escapeHtml(title)}</span>`;\n\n  return `<div class=\"flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors\">\n    ${iconHtml}\n    <div class=\"flex-1 min-w-0\">\n      <div class=\"flex items-center gap-2\">\n        ${titleElement}\n        ${statusHtml}\n      </div>\n      ${\n        description || metaText\n          ? `<p class=\"text-sm text-text-secondary truncate\">${escapeHtml(description || metaText)}</p>`\n          : ''\n      }\n    </div>\n  </div>`;\n}\n\n// ============================================\n// Preview Widget\n// ============================================\n\n/**\n * Code preview options\n */\nexport interface CodePreviewOptions {\n  /** Code content */\n  code: string;\n  /** Language */\n  language?: string;\n  /** Filename */\n  filename?: string;\n  /** Show line numbers */\n  lineNumbers?: boolean;\n  /** Max height */\n  maxHeight?: string;\n  /** Copy button */\n  showCopy?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build a code preview widget\n */\nexport function codePreview(options: CodePreviewOptions): string {\n  const {\n    code,\n    language = 'text',\n    filename,\n    lineNumbers = true,\n    maxHeight = '400px',\n    showCopy = true,\n    className = '',\n  } = options;\n\n  const lines = code.split('\\n');\n\n  const lineNumbersHtml = lineNumbers\n    ? `<div class=\"text-right select-none pr-4 text-gray-500\">\n        ${lines.map((_, i) => `<div>${i + 1}</div>`).join('')}\n      </div>`\n    : '';\n\n  const copyScript = showCopy\n    ? `<script>\n        function copyCode(btn, code) {\n          navigator.clipboard.writeText(code).then(() => {\n            const original = btn.innerHTML;\n            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>';\n            setTimeout(() => btn.innerHTML = original, 2000);\n          });\n        }\n      </script>`\n    : '';\n\n  const copyButton = showCopy\n    ? `<button\n        type=\"button\"\n        onclick=\"copyCode(this, ${escapeHtml(JSON.stringify(code))})\"\n        class=\"p-1.5 rounded hover:bg-gray-700 transition-colors\"\n        title=\"Copy code\"\n      >\n        <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <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\"/>\n        </svg>\n      </button>`\n    : '';\n\n  return `<div class=\"code-preview rounded-lg overflow-hidden ${className}\">\n    ${\n      filename || showCopy\n        ? `\n      <div class=\"flex items-center justify-between px-4 py-2 bg-gray-800 border-b border-gray-700\">\n        ${filename ? `<span class=\"text-sm text-gray-300\">${escapeHtml(filename)}</span>` : '<span></span>'}\n        <div class=\"flex items-center gap-2\">\n          ${language ? `<span class=\"text-xs text-gray-500\">${escapeHtml(language)}</span>` : ''}\n          ${copyButton}\n        </div>\n      </div>\n    `\n        : ''\n    }\n    <div class=\"bg-gray-900 p-4 overflow-auto\" style=\"max-height: ${maxHeight}\">\n      <div class=\"flex text-sm font-mono\">\n        ${lineNumbersHtml}\n        <pre class=\"flex-1 text-gray-100\"><code>${escapeHtml(code)}</code></pre>\n      </div>\n    </div>\n    ${copyScript}\n  </div>`;\n}\n\n/**\n * Image preview options\n */\nexport interface ImagePreviewOptions {\n  /** Image URL */\n  src: string;\n  /** Alt text */\n  alt: string;\n  /** Caption */\n  caption?: string;\n  /** Max height */\n  maxHeight?: string;\n  /** Clickable (opens in new tab) */\n  clickable?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build an image preview widget\n */\nexport function imagePreview(options: ImagePreviewOptions): string {\n  const { src, alt, caption, maxHeight = '400px', clickable = true, className = '' } = options;\n\n  const imageHtml = `<img\n    src=\"${escapeHtml(src)}\"\n    alt=\"${escapeHtml(alt)}\"\n    class=\"max-w-full h-auto rounded-lg\"\n    style=\"max-height: ${maxHeight}\"\n  >`;\n\n  const captionHtml = caption\n    ? `<p class=\"text-sm text-text-secondary mt-2 text-center\">${escapeHtml(caption)}</p>`\n    : '';\n\n  const content = clickable\n    ? `<a href=\"${escapeHtml(src)}\" target=\"_blank\" rel=\"noopener\" class=\"block\">${imageHtml}</a>`\n    : imageHtml;\n\n  return `<div class=\"image-preview ${className}\">\n    ${content}\n    ${captionHtml}\n  </div>`;\n}\n"]}