@webspire/mcp 0.8.0 → 0.8.1

package/README.md

@@ -2,7 +2,7 @@
 
 MCP server for [Webspire](https://webspire.de) — AI-native discovery of CSS snippets, UI patterns, and page templates with a 3-layer design token system.
 
-**49 CSS snippets** + **212 UI patterns** + **18 page templates** — all Tailwind v4, token-based, dark mode, accessible.
+Includes CSS snippets, UI patterns, and page templates — all Tailwind v4, token-based, dark mode, accessible.
 
 ## Quick Start
 
@@ -19,7 +19,7 @@ MCP server for [Webspire](https://webspire.de) — AI-native discovery of CSS sn
 }
 ```
 
-## Available Tools (12)
+## Available Tools
 
 | Tool | Description |
 |------|-------------|
@@ -27,8 +27,9 @@ MCP server for [Webspire](https://webspire.de) — AI-native discovery of CSS sn
 | `search_snippets` | Search snippets by keyword, use case, or CSS technique |
 | `get_snippet` | Get full CSS source, metadata, and usage example |
 | `recommend_snippet` | Describe a UI problem, get best matching snippets |
-| `list_pattern_families` | List all 55 pattern families with counts |
-| `search_patterns` | Search 212 UI patterns by intent, family, or tier |
+| `list_pattern_families` | List pattern families with counts |
+| `search_patterns` | Search UI patterns by intent, family, or tier |
+| `compose_page` | Compose a full page structure and recommend matching snippets |
 | `get_pattern` | Get full pattern HTML with component token references |
 | `list_templates` | List all page templates by category |
 | `search_templates` | Search templates by keyword, category, or style |
@@ -90,15 +91,15 @@ Host Tokens (your project) → WebSpire Alias Tokens → Component Tokens → Ma
 
 ## Content
 
-### CSS Snippets (49)
+### CSS Snippets
 
-Effects that Tailwind v4 can't do natively: glass, animations, easing, scroll, decorative, interactions, text.
+Effects that Tailwind v4 can't do natively across 12 categories: glass, animations, easing, scroll, decorative, interactions, text, lighting, depth, masks, surfaces, atmosphere.
 
-### UI Patterns (212)
+### UI Patterns
 
-55 families across Page Sections and Content Elements — all using `--ws-*` component tokens.
+Patterns across page sections and content elements — all using `--ws-*` component tokens.
 
-### Page Templates (18)
+### Page Templates
 
 Complete standalone pages: SaaS, agency, portfolio, shop, company — with Tailwind CDN.
 
@@ -115,3 +116,15 @@ const results = searchSnippets(registry, {
 ```
 
 Docs: https://webspire.de/tokens
+
+## Page Composition
+
+`compose_page` combines semantic pattern selection with a lightweight snippet recommendation layer.
+
+Typical flow:
+
+1. Call `compose_page` with `domain`, `tone`, and `ux_goals`
+2. Retrieve section markup with `get_pattern(id)`
+3. Retrieve enhancement CSS with `get_snippet(id)` for the recommended snippets
+
+That keeps structure and polish separate, but coordinated.

package/css/webspire-components.css

@@ -479,3 +479,179 @@
   --ws-error-500-action-bg: var(--ws-color-primary);
   --ws-error-500-action-text: var(--ws-color-primary-text);
 }
+
+/* ── Widgets (inspired by Wigggle UI) ── */
+
+.ws-weather-widget {
+  --ws-weather-widget-bg: var(--ws-color-surface);
+  --ws-weather-widget-text: var(--ws-color-text);
+  --ws-weather-widget-text-soft: var(--ws-color-text-soft);
+  --ws-weather-widget-text-muted: var(--ws-color-text-muted);
+  --ws-weather-widget-border: var(--ws-color-border);
+  --ws-weather-widget-accent: var(--ws-color-accent);
+  --ws-weather-widget-accent-soft: var(--ws-color-accent-soft);
+}
+
+.ws-stock-widget {
+  --ws-stock-widget-bg: var(--ws-color-surface);
+  --ws-stock-widget-text: var(--ws-color-text);
+  --ws-stock-widget-text-soft: var(--ws-color-text-soft);
+  --ws-stock-widget-text-muted: var(--ws-color-text-muted);
+  --ws-stock-widget-border: var(--ws-color-border);
+  --ws-stock-widget-positive: var(--ws-color-success);
+  --ws-stock-widget-negative: var(--ws-color-danger);
+}
+
+.ws-calendar-widget {
+  --ws-calendar-widget-bg: var(--ws-color-surface);
+  --ws-calendar-widget-text: var(--ws-color-text);
+  --ws-calendar-widget-text-soft: var(--ws-color-text-soft);
+  --ws-calendar-widget-text-muted: var(--ws-color-text-muted);
+  --ws-calendar-widget-border: var(--ws-color-border);
+  --ws-calendar-widget-active: var(--ws-color-primary);
+  --ws-calendar-widget-active-text: var(--ws-color-primary-text);
+  --ws-calendar-widget-today-bg: var(--ws-color-primary-soft);
+}
+
+.ws-media-widget {
+  --ws-media-widget-bg: var(--ws-color-surface);
+  --ws-media-widget-text: var(--ws-color-text);
+  --ws-media-widget-text-soft: var(--ws-color-text-soft);
+  --ws-media-widget-text-muted: var(--ws-color-text-muted);
+  --ws-media-widget-border: var(--ws-color-border);
+  --ws-media-widget-accent: var(--ws-color-primary);
+  --ws-media-widget-accent-soft: var(--ws-color-primary-soft);
+}
+
+.ws-task-widget {
+  --ws-task-widget-bg: var(--ws-color-surface);
+  --ws-task-widget-text: var(--ws-color-text);
+  --ws-task-widget-text-soft: var(--ws-color-text-soft);
+  --ws-task-widget-text-muted: var(--ws-color-text-muted);
+  --ws-task-widget-border: var(--ws-color-border);
+  --ws-task-widget-accent: var(--ws-color-primary);
+  --ws-task-widget-success: var(--ws-color-success);
+  --ws-task-widget-muted-bg: var(--ws-color-surface-muted);
+}
+
+.ws-stat-widget {
+  --ws-stat-widget-bg: var(--ws-color-surface);
+  --ws-stat-widget-text: var(--ws-color-text);
+  --ws-stat-widget-text-soft: var(--ws-color-text-soft);
+  --ws-stat-widget-text-muted: var(--ws-color-text-muted);
+  --ws-stat-widget-border: var(--ws-color-border);
+  --ws-stat-widget-accent: var(--ws-color-primary);
+  --ws-stat-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-stat-widget-positive: var(--ws-color-success);
+  --ws-stat-widget-negative: var(--ws-color-danger);
+}
+
+.ws-clock-widget {
+  --ws-clock-widget-bg: var(--ws-color-surface);
+  --ws-clock-widget-text: var(--ws-color-text);
+  --ws-clock-widget-text-soft: var(--ws-color-text-soft);
+  --ws-clock-widget-text-muted: var(--ws-color-text-muted);
+  --ws-clock-widget-border: var(--ws-color-border);
+  --ws-clock-widget-accent: var(--ws-color-primary);
+  --ws-clock-widget-accent-soft: var(--ws-color-primary-soft);
+}
+
+.ws-profile-widget {
+  --ws-profile-widget-bg: var(--ws-color-surface);
+  --ws-profile-widget-text: var(--ws-color-text);
+  --ws-profile-widget-text-soft: var(--ws-color-text-soft);
+  --ws-profile-widget-text-muted: var(--ws-color-text-muted);
+  --ws-profile-widget-border: var(--ws-color-border);
+  --ws-profile-widget-accent: var(--ws-color-primary);
+  --ws-profile-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-profile-widget-success: var(--ws-color-success);
+}
+
+.ws-notification-widget {
+  --ws-notification-widget-bg: var(--ws-color-surface);
+  --ws-notification-widget-text: var(--ws-color-text);
+  --ws-notification-widget-text-soft: var(--ws-color-text-soft);
+  --ws-notification-widget-text-muted: var(--ws-color-text-muted);
+  --ws-notification-widget-border: var(--ws-color-border);
+  --ws-notification-widget-accent: var(--ws-color-primary);
+  --ws-notification-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-notification-widget-danger: var(--ws-color-danger);
+  --ws-notification-widget-warning: var(--ws-color-warning);
+  --ws-notification-widget-success: var(--ws-color-success);
+}
+
+.ws-progress-widget {
+  --ws-progress-widget-bg: var(--ws-color-surface);
+  --ws-progress-widget-text: var(--ws-color-text);
+  --ws-progress-widget-text-soft: var(--ws-color-text-soft);
+  --ws-progress-widget-text-muted: var(--ws-color-text-muted);
+  --ws-progress-widget-border: var(--ws-color-border);
+  --ws-progress-widget-accent: var(--ws-color-primary);
+  --ws-progress-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-progress-widget-track: var(--ws-color-surface-muted);
+}
+
+.ws-analytics-widget {
+  --ws-analytics-widget-bg: var(--ws-color-surface);
+  --ws-analytics-widget-text: var(--ws-color-text);
+  --ws-analytics-widget-text-soft: var(--ws-color-text-soft);
+  --ws-analytics-widget-text-muted: var(--ws-color-text-muted);
+  --ws-analytics-widget-border: var(--ws-color-border);
+  --ws-analytics-widget-accent: var(--ws-color-primary);
+  --ws-analytics-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-analytics-widget-positive: var(--ws-color-success);
+}
+
+.ws-storage-widget {
+  --ws-storage-widget-bg: var(--ws-color-surface);
+  --ws-storage-widget-text: var(--ws-color-text);
+  --ws-storage-widget-text-soft: var(--ws-color-text-soft);
+  --ws-storage-widget-text-muted: var(--ws-color-text-muted);
+  --ws-storage-widget-border: var(--ws-color-border);
+  --ws-storage-widget-accent: var(--ws-color-primary);
+  --ws-storage-widget-track: var(--ws-color-surface-muted);
+}
+
+.ws-currency-widget {
+  --ws-currency-widget-bg: var(--ws-color-surface);
+  --ws-currency-widget-text: var(--ws-color-text);
+  --ws-currency-widget-text-soft: var(--ws-color-text-soft);
+  --ws-currency-widget-text-muted: var(--ws-color-text-muted);
+  --ws-currency-widget-border: var(--ws-color-border);
+  --ws-currency-widget-accent: var(--ws-color-primary);
+  --ws-currency-widget-positive: var(--ws-color-success);
+  --ws-currency-widget-negative: var(--ws-color-danger);
+}
+
+.ws-shipping-widget {
+  --ws-shipping-widget-bg: var(--ws-color-surface);
+  --ws-shipping-widget-text: var(--ws-color-text);
+  --ws-shipping-widget-text-soft: var(--ws-color-text-soft);
+  --ws-shipping-widget-text-muted: var(--ws-color-text-muted);
+  --ws-shipping-widget-border: var(--ws-color-border);
+  --ws-shipping-widget-accent: var(--ws-color-primary);
+  --ws-shipping-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-shipping-widget-success: var(--ws-color-success);
+}
+
+.ws-rating-widget {
+  --ws-rating-widget-bg: var(--ws-color-surface);
+  --ws-rating-widget-text: var(--ws-color-text);
+  --ws-rating-widget-text-soft: var(--ws-color-text-soft);
+  --ws-rating-widget-text-muted: var(--ws-color-text-muted);
+  --ws-rating-widget-border: var(--ws-color-border);
+  --ws-rating-widget-accent: var(--ws-color-warning);
+  --ws-rating-widget-accent-soft: var(--ws-color-warning-soft);
+}
+
+.ws-chat-widget {
+  --ws-chat-widget-bg: var(--ws-color-surface);
+  --ws-chat-widget-text: var(--ws-color-text);
+  --ws-chat-widget-text-soft: var(--ws-color-text-soft);
+  --ws-chat-widget-text-muted: var(--ws-color-text-muted);
+  --ws-chat-widget-border: var(--ws-color-border);
+  --ws-chat-widget-accent: var(--ws-color-primary);
+  --ws-chat-widget-accent-soft: var(--ws-color-primary-soft);
+  --ws-chat-widget-accent-text: var(--ws-color-primary-text);
+  --ws-chat-widget-muted-bg: var(--ws-color-surface-muted);
+}