@seed-ship/mcp-ui-solid 2.2.4 → 2.2.7

package/dist/services/component-registry.d.ts

@@ -48,6 +48,46 @@ export declare const CarouselRegistry: ComponentRegistryEntry;
  * Display downloadable artifacts like generated files
  */
 export declare const ArtifactRegistry: ComponentRegistryEntry;
+/**
+ * Code Block Registry Entry
+ */
+export declare const CodeRegistry: ComponentRegistryEntry;
+/**
+ * Map Registry Entry
+ */
+export declare const MapRegistry: ComponentRegistryEntry;
+/**
+ * Form Registry Entry
+ */
+export declare const FormRegistry: ComponentRegistryEntry;
+/**
+ * Modal Registry Entry
+ */
+export declare const ModalRegistry: ComponentRegistryEntry;
+/**
+ * Action Group Registry Entry
+ */
+export declare const ActionGroupRegistry: ComponentRegistryEntry;
+/**
+ * Image Gallery Registry Entry
+ */
+export declare const ImageGalleryRegistry: ComponentRegistryEntry;
+/**
+ * Video Registry Entry
+ */
+export declare const VideoRegistry: ComponentRegistryEntry;
+/**
+ * Iframe Registry Entry
+ */
+export declare const IframeRegistry: ComponentRegistryEntry;
+/**
+ * Image Registry Entry
+ */
+export declare const ImageRegistry: ComponentRegistryEntry;
+/**
+ * Link Registry Entry
+ */
+export declare const LinkRegistry: ComponentRegistryEntry;
 /**
  * Component Registry - All components indexed by type
  */

package/dist/services/component-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../../src/services/component-registry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGrE;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,sBA0GhC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,sBAqE3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,sBA2D5B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,sBA2C1B,CAAA;AAMD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,sBAsC1B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,sBAqD5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,sBAgD5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,sBAsB9B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,sBAsC9B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,GAAG,CAAC,aAAa,EAAE,sBAAsB,CAWvE,CAAA;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,aAAa,GAAG,sBAAsB,GAAG,SAAS,CAEzF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,aAAa,EAAE,CAEtD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAc1C;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,GAAG,GACV;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAmB5D"}
+{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../../src/services/component-registry.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAGrE;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,sBA0GhC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,sBAqE3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,sBA2D5B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,sBA2C1B,CAAA;AAMD;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,sBAsC1B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,sBAqD5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,sBAgD5B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,sBAsB9B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,sBAsC9B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,sBAkC1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,sBAgDzB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,sBAiD1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,sBAgC3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,sBA+CjC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,sBA+ClC,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,sBAiC3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,sBA+B5B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,sBA+B3B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,sBA+B1B,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,GAAG,CAAC,aAAa,EAAE,sBAAsB,CAsBvE,CAAA;AAEF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,aAAa,GAAG,sBAAsB,GAAG,SAAS,CAEzF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,aAAa,EAAE,CAEtD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAc1C;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CACrC,aAAa,EAAE,aAAa,EAC5B,MAAM,EAAE,GAAG,GACV;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;CAAE,CAmB5D"}

package/dist/services/component-registry.js

@@ -478,6 +478,389 @@ const ArtifactRegistry = {
     renderTimeout: 1e3
   }
 };
+const CodeRegistry = {
+  type: "code",
+  name: "CodeBlock",
+  description: "Render syntax-highlighted code blocks with line numbers, copy button, and word wrap toggle. Supports all languages via highlight.js auto-detection. Best for displaying source code, configuration files, CLI output, or API responses.",
+  schema: {
+    type: "object",
+    properties: {
+      code: { type: "string", description: "The code content to display" },
+      language: { type: "string", description: "Programming language for syntax highlighting (auto-detected if omitted)" },
+      filename: { type: "string", description: "Filename shown in header bar" },
+      showLineNumbers: { type: "boolean", description: "Show line numbers (default: true)" },
+      startLine: { type: "number", description: "Starting line number (default: 1)" },
+      maxHeight: { type: "string", description: "CSS max-height for scrollable code blocks" },
+      theme: { type: "string", enum: ["light", "dark"], description: "Color theme (follows system preference by default)" }
+    },
+    required: ["code"]
+  },
+  examples: [
+    {
+      query: "Show me how to connect to the API",
+      component: {
+        id: "example-code-1",
+        type: "code",
+        position: { colStart: 1, colSpan: 8 },
+        params: {
+          code: 'const client = new MCPClient({ url: "https://api.example.com" });\nawait client.connect();\nconst result = await client.query("SELECT * FROM documents");',
+          language: "typescript",
+          filename: "example.ts"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const MapRegistry = {
+  type: "map",
+  name: "InteractiveMap",
+  description: "Render interactive maps with markers using Leaflet. Supports marker clustering, custom tile layers, and auto-fitting bounds. Best for displaying geographic data with up to 1000 markers.",
+  schema: {
+    type: "object",
+    properties: {
+      center: { type: "array", items: { type: "number" }, minItems: 2, maxItems: 2, description: "Map center [lat, lng]" },
+      zoom: { type: "number", description: "Zoom level (1-18, default: 13)" },
+      markers: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            position: { type: "array", items: { type: "number" }, minItems: 2, maxItems: 2 },
+            title: { type: "string" },
+            popup: { type: "string" }
+          },
+          required: ["position"]
+        }
+      },
+      height: { type: "string", description: "CSS height (default: 400px)" },
+      fitBounds: { type: "boolean", description: "Auto-fit to show all markers" },
+      clustering: { type: "boolean", description: "Enable marker clustering for large datasets" }
+    },
+    required: []
+  },
+  examples: [
+    {
+      query: "Show office locations on a map",
+      component: {
+        id: "example-map-1",
+        type: "map",
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          center: [48.8566, 2.3522],
+          zoom: 5,
+          markers: [
+            { position: [48.8566, 2.3522], tooltip: "Paris", popup: "HQ — 120 employees" },
+            { position: [51.5074, -0.1278], tooltip: "London", popup: "UK Office — 45 employees" }
+          ],
+          fitBounds: true
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const FormRegistry = {
+  type: "form",
+  name: "Form",
+  description: "Render interactive forms with text inputs, selects, checkboxes, date pickers, and conditional fields. Supports persistence, validation, and submit actions that trigger MCP tool calls.",
+  schema: {
+    type: "object",
+    properties: {
+      title: { type: "string", description: "Form title" },
+      fields: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            name: { type: "string" },
+            label: { type: "string" },
+            type: { type: "string", enum: ["text", "number", "email", "password", "textarea", "select", "checkbox", "radio", "date"] },
+            required: { type: "boolean" },
+            placeholder: { type: "string" },
+            options: { type: "array", items: { type: "object", properties: { label: { type: "string" }, value: { type: "string" } } } }
+          },
+          required: ["name", "label", "type"]
+        }
+      },
+      submitLabel: { type: "string", description: 'Submit button text (default: "Submit")' },
+      layout: { type: "string", enum: ["vertical", "horizontal", "inline"] }
+    },
+    required: ["fields"]
+  },
+  examples: [
+    {
+      query: "Create a document upload form",
+      component: {
+        id: "example-form-1",
+        type: "form",
+        position: { colStart: 1, colSpan: 6 },
+        params: {
+          title: "Upload Document",
+          fields: [
+            { name: "title", label: "Document Title", type: "text", required: true },
+            { name: "category", label: "Category", type: "select", options: [{ label: "Report", value: "report" }, { label: "Invoice", value: "invoice" }] },
+            { name: "notes", label: "Notes", type: "textarea" }
+          ],
+          submitLabel: "Upload"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const ModalRegistry = {
+  type: "modal",
+  name: "Modal",
+  description: "Render a dialog overlay with Portal rendering. Supports sizes from small to fullscreen, close on Escape/backdrop, and nested content. Best for confirmations, detail views, and focused interactions.",
+  schema: {
+    type: "object",
+    properties: {
+      title: { type: "string", description: "Modal header title" },
+      size: { type: "string", enum: ["sm", "md", "lg", "xl", "full"], description: "Modal width (default: md)" },
+      showClose: { type: "boolean", description: "Show close button (default: true)" },
+      closeOnEscape: { type: "boolean", description: "Close on Escape key (default: true)" },
+      closeOnBackdrop: { type: "boolean", description: "Close on backdrop click (default: true)" },
+      maxHeight: { type: "string", description: "CSS max-height for scrollable content" }
+    },
+    required: []
+  },
+  examples: [
+    {
+      query: "Show document details in a dialog",
+      component: {
+        id: "example-modal-1",
+        type: "modal",
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          title: "Document Details",
+          size: "lg"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const ActionGroupRegistry = {
+  type: "action-group",
+  name: "ActionGroup",
+  description: "Render a group of action buttons in horizontal, vertical, or grid layout. Each action triggers an MCP tool call. Best for presenting multiple related actions like CRUD operations or workflow steps.",
+  schema: {
+    type: "object",
+    properties: {
+      actions: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            label: { type: "string" },
+            toolName: { type: "string" },
+            params: { type: "object" },
+            variant: { type: "string", enum: ["primary", "secondary", "danger", "ghost"] },
+            icon: { type: "string" }
+          },
+          required: ["label", "toolName"]
+        }
+      },
+      layout: { type: "string", enum: ["horizontal", "vertical", "grid"], description: "Button layout" },
+      label: { type: "string", description: "Group label" }
+    },
+    required: ["actions"]
+  },
+  examples: [
+    {
+      query: "Show actions for this document",
+      component: {
+        id: "example-action-group-1",
+        type: "action-group",
+        position: { colStart: 1, colSpan: 6 },
+        params: {
+          label: "Document Actions",
+          actions: [
+            { label: "Download", type: "button", action: "tool-call", toolName: "document_download", params: { id: "123" }, variant: "primary" },
+            { label: "Share", type: "button", action: "tool-call", toolName: "document_share", params: { id: "123" }, variant: "secondary" },
+            { label: "Delete", type: "button", action: "tool-call", toolName: "document_delete", params: { id: "123" }, variant: "danger" }
+          ],
+          layout: "horizontal"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const ImageGalleryRegistry = {
+  type: "image-gallery",
+  name: "ImageGallery",
+  description: "Render a grid of images with lightbox overlay for fullscreen viewing. Supports captions, configurable columns, aspect ratios, and keyboard navigation in lightbox mode.",
+  schema: {
+    type: "object",
+    properties: {
+      title: { type: "string", description: "Gallery title" },
+      images: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            url: { type: "string", description: "Image URL" },
+            alt: { type: "string", description: "Alt text" },
+            caption: { type: "string", description: "Caption text" },
+            thumbnail: { type: "string", description: "Thumbnail URL (optional, falls back to url)" }
+          },
+          required: ["url"]
+        }
+      },
+      columns: { type: "number", enum: [2, 3, 4, 5], description: "Grid columns (default: 3)" },
+      aspectRatio: { type: "string", enum: ["1:1", "16:9", "4:3", "auto"] },
+      lightbox: { type: "boolean", description: "Enable lightbox overlay (default: true)" }
+    },
+    required: ["images"]
+  },
+  examples: [
+    {
+      query: "Show document thumbnails",
+      component: {
+        id: "example-gallery-1",
+        type: "image-gallery",
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          title: "Recent Documents",
+          images: [
+            { url: "/thumbnails/doc1.png", alt: "Q4 Report", caption: "Q4 Report — 24 pages" },
+            { url: "/thumbnails/doc2.png", alt: "Invoice #4521", caption: "Invoice #4521" }
+          ],
+          columns: 4
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const VideoRegistry = {
+  type: "video",
+  name: "Video",
+  description: "Embed video from YouTube, Vimeo, or direct URLs. Auto-detects provider from URL and renders appropriate embed. Supports aspect ratios, autoplay, and start time.",
+  schema: {
+    type: "object",
+    properties: {
+      url: { type: "string", description: "Video URL (YouTube, Vimeo, or direct)" },
+      title: { type: "string", description: "Video title" },
+      caption: { type: "string", description: "Caption below video" },
+      aspectRatio: { type: "string", enum: ["16:9", "4:3", "1:1", "21:9"], description: "Aspect ratio (default: 16:9)" },
+      autoplay: { type: "boolean", description: "Auto-play video" },
+      startTime: { type: "number", description: "Start time in seconds" }
+    },
+    required: ["url"]
+  },
+  examples: [
+    {
+      query: "Show the product demo video",
+      component: {
+        id: "example-video-1",
+        type: "video",
+        position: { colStart: 1, colSpan: 8 },
+        params: {
+          url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+          title: "Product Demo",
+          aspectRatio: "16:9"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const IframeRegistry = {
+  type: "iframe",
+  name: "Iframe",
+  description: "Embed external content via sandboxed iframe. Domain whitelist enforced for security. Supports Mermaid diagrams, Excalidraw, GitHub Gists, Figma, and 60+ whitelisted domains.",
+  schema: {
+    type: "object",
+    properties: {
+      url: { type: "string", description: "URL to embed (must be on whitelist)" },
+      title: { type: "string", description: "Iframe title for accessibility" },
+      height: { type: "string", description: "CSS height (default: 400px)" },
+      sandbox: { type: "string", description: "Sandbox attribute (default: restrictive)" }
+    },
+    required: ["url"]
+  },
+  examples: [
+    {
+      query: "Show the architecture diagram",
+      component: {
+        id: "example-iframe-1",
+        type: "iframe",
+        position: { colStart: 1, colSpan: 12 },
+        params: {
+          url: "https://mermaid.ink/svg/graph+TD;A-->B;B-->C",
+          title: "Architecture Diagram",
+          height: "500px"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const ImageRegistry = {
+  type: "image",
+  name: "Image",
+  description: "Render a single image with optional alt text, caption, and link. Best for logos, screenshots, diagrams, or any standalone visual content.",
+  schema: {
+    type: "object",
+    properties: {
+      url: { type: "string", description: "Image URL" },
+      alt: { type: "string", description: "Alt text for accessibility" },
+      title: { type: "string", description: "Image title / heading" },
+      width: { type: "string", description: "CSS width" },
+      height: { type: "string", description: "CSS height" }
+    },
+    required: ["url"]
+  },
+  examples: [
+    {
+      query: "Show the company logo",
+      component: {
+        id: "example-image-1",
+        type: "image",
+        position: { colStart: 1, colSpan: 4 },
+        params: {
+          url: "/images/logo.png",
+          alt: "Company Logo"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
+const LinkRegistry = {
+  type: "link",
+  name: "Link",
+  description: "Render a styled link card with title, description, and URL. Best for navigation, references, and external resource links.",
+  schema: {
+    type: "object",
+    properties: {
+      url: { type: "string", description: "Link destination URL" },
+      label: { type: "string", description: "Link display text" },
+      description: { type: "string", description: "Link description" },
+      icon: { type: "string", description: "Icon identifier" }
+    },
+    required: ["url", "label"]
+  },
+  examples: [
+    {
+      query: "Link to the API documentation",
+      component: {
+        id: "example-link-1",
+        type: "link",
+        position: { colStart: 1, colSpan: 4 },
+        params: {
+          url: "https://docs.example.com/api",
+          label: "API Documentation",
+          description: "Full reference for the REST API"
+        }
+      }
+    }
+  ],
+  limits: DEFAULT_RESOURCE_LIMITS
+};
 const ComponentRegistry = /* @__PURE__ */ new Map([
   ["chart", QuickchartRegistry],
   ["table", TableRegistry],
@@ -488,18 +871,39 @@ const ComponentRegistry = /* @__PURE__ */ new Map([
   ["action", ActionRegistry],
   ["footer", FooterRegistry],
   ["carousel", CarouselRegistry],
-  ["artifact", ArtifactRegistry]
+  ["artifact", ArtifactRegistry],
+  // v2.2.5: Complete registry
+  ["code", CodeRegistry],
+  ["map", MapRegistry],
+  ["form", FormRegistry],
+  ["modal", ModalRegistry],
+  ["action-group", ActionGroupRegistry],
+  ["image-gallery", ImageGalleryRegistry],
+  ["video", VideoRegistry],
+  ["iframe", IframeRegistry],
+  ["image", ImageRegistry],
+  ["link", LinkRegistry]
 ]);
 export {
+  ActionGroupRegistry,
   ActionRegistry,
   ArtifactRegistry,
   CarouselRegistry,
+  CodeRegistry,
   ComponentRegistry,
   FooterRegistry,
+  FormRegistry,
   GridRegistry,
+  IframeRegistry,
+  ImageGalleryRegistry,
+  ImageRegistry,
+  LinkRegistry,
+  MapRegistry,
   MetricRegistry,
+  ModalRegistry,
   QuickchartRegistry,
   TableRegistry,
-  TextRegistry
+  TextRegistry,
+  VideoRegistry
 };
 //# sourceMappingURL=component-registry.js.map