@aspect-ops/exon-ui 0.2.0 → 0.2.1

package/README.md

@@ -1047,6 +1047,206 @@ Components optimized for Capacitor mobile apps with gesture support, haptic feed
 
 - `edges` - Array of edges: `'top'` | `'right'` | `'bottom'` | `'left'` (default: all)
 
+## Website Components
+
+### Chatbot
+
+AI-ready chat widget with session management, typing indicators, and lead capture.
+
+```svelte
+<script>
+	import { Chatbot } from '@aspect-ops/exon-ui';
+
+	async function handleMessage(message, sessionId) {
+		// Call your AI backend (OpenAI, Claude, etc.)
+		const response = await fetch('/api/chat', {
+			method: 'POST',
+			body: JSON.stringify({ message, sessionId })
+		});
+		return (await response.json()).reply;
+	}
+
+	async function handleLeadCapture(data, sessionId) {
+		// Send to your CRM
+		await fetch('/api/leads', {
+			method: 'POST',
+			body: JSON.stringify({ ...data, sessionId })
+		});
+	}
+</script>
+
+<Chatbot
+	title="Support Chat"
+	subtitle="We typically reply within minutes"
+	welcomeMessage="Hello! How can I help you today?"
+	onSendMessage={handleMessage}
+	onLeadCapture={handleLeadCapture}
+	position="bottom-right"
+/>
+```
+
+**Props:**
+
+| Prop                | Type       | Default          | Description                               |
+| ------------------- | ---------- | ---------------- | ----------------------------------------- |
+| `title`             | `string`   | `'Chat Support'` | Chat header title                         |
+| `subtitle`          | `string`   | -                | Chat header subtitle                      |
+| `welcomeMessage`    | `string`   | -                | Initial welcome message                   |
+| `placeholder`       | `string`   | `'Type...'`      | Input placeholder text                    |
+| `defaultOpen`       | `boolean`  | `false`          | Open chat on mount                        |
+| `position`          | `string`   | `'bottom-right'` | Position: bottom-right, bottom-left       |
+| `inactivityTimeout` | `number`   | `40000`          | Auto-open after inactivity (ms), 0=off    |
+| `onSendMessage`     | `function` | -                | Callback: `(msg, sessionId) => reply`     |
+| `onLeadCapture`     | `function` | -                | Callback: `(data, sessionId) => void`     |
+| `onEscalate`        | `function` | -                | Callback: `(sessionId, messages) => void` |
+
+### ContactForm
+
+Customizable contact form with real-time validation and UTM tracking.
+
+```svelte
+<script>
+	import { ContactForm } from '@aspect-ops/exon-ui';
+
+	async function handleSubmit(data) {
+		const response = await fetch('/api/contact', {
+			method: 'POST',
+			body: JSON.stringify(data)
+		});
+		return { success: response.ok };
+	}
+</script>
+
+<ContactForm
+	submitText="Send Message"
+	successMessage="Thank you! We'll be in touch soon."
+	onSubmit={handleSubmit}
+/>
+```
+
+**Props:**
+
+| Prop               | Type            | Default        | Description                           |
+| ------------------ | --------------- | -------------- | ------------------------------------- |
+| `fields`           | `FieldConfig[]` | Default fields | Array of field configurations         |
+| `initialValues`    | `object`        | `{}`           | Initial form values                   |
+| `submitText`       | `string`        | `'Submit'`     | Submit button text                    |
+| `successMessage`   | `string`        | `'Thank you!'` | Success message after submit          |
+| `privacyNotice`    | `string`        | -              | Privacy policy text                   |
+| `extractUtmParams` | `boolean`       | `true`         | Extract UTM params from URL           |
+| `onSubmit`         | `function`      | -              | Callback: `(data) => { success }`     |
+| `onValidate`       | `function`      | -              | Callback: `(isValid, errors) => void` |
+
+**Default fields:** firstName, lastName, email, phone, company, message
+
+### ViewCounter
+
+Track and display page views with session-based deduplication.
+
+```svelte
+<script>
+	import { ViewCounter } from '@aspect-ops/exon-ui';
+
+	async function getCount(slug) {
+		const res = await fetch(`/api/views/${slug}`);
+		return (await res.json()).count;
+	}
+
+	async function trackView(slug) {
+		const res = await fetch(`/api/views/${slug}`, { method: 'POST' });
+		return (await res.json()).count;
+	}
+</script>
+
+<ViewCounter slug="blog-post-123" onGetCount={getCount} onTrackView={trackView} />
+```
+
+**Props:**
+
+| Prop          | Type       | Default | Description                  |
+| ------------- | ---------- | ------- | ---------------------------- |
+| `slug`        | `string`   | -       | Unique content identifier    |
+| `showLabel`   | `boolean`  | `true`  | Show "views" label           |
+| `trackView`   | `boolean`  | `true`  | Track view (or just display) |
+| `onGetCount`  | `function` | -       | Callback: `(slug) => count`  |
+| `onTrackView` | `function` | -       | Callback: `(slug) => count`  |
+
+### DoughnutChart
+
+Pure SVG doughnut chart with interactive legend (no external dependencies).
+
+```svelte
+<script>
+	import { DoughnutChart } from '@aspect-ops/exon-ui';
+
+	const data = [
+		{ label: 'Direct', value: 45000 },
+		{ label: 'Referral', value: 28000 },
+		{ label: 'Organic', value: 32000 },
+		{ label: 'Social', value: 15000 }
+	];
+</script>
+
+<DoughnutChart title="Traffic Sources" {data} size={200} showLegend showTotal />
+```
+
+**Props:**
+
+| Prop         | Type       | Default         | Description               |
+| ------------ | ---------- | --------------- | ------------------------- |
+| `title`      | `string`   | -               | Chart title               |
+| `data`       | `array`    | `[]`            | `[{ label, value }, ...]` |
+| `size`       | `number`   | `200`           | Chart size in pixels      |
+| `thickness`  | `number`   | `0.6`           | Doughnut thickness (0-1)  |
+| `colors`     | `string[]` | Default palette | Custom color array        |
+| `showLegend` | `boolean`  | `true`          | Show legend               |
+| `showTotal`  | `boolean`  | `true`          | Show center total         |
+
+### Mermaid
+
+Render Mermaid diagrams with customizable theming.
+
+**Note:** Requires `mermaid` package: `npm install mermaid`
+
+```svelte
+<script>
+	import { Mermaid } from '@aspect-ops/exon-ui';
+
+	const diagram = `flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Action 1]
+    B -->|No| D[Action 2]
+    C --> E[End]
+    D --> E`;
+</script>
+
+<!-- Using code prop -->
+<Mermaid code={diagram} />
+
+<!-- Using slot -->
+<Mermaid>flowchart LR A --> B --> C</Mermaid>
+```
+
+**Props:**
+
+| Prop    | Type     | Default       | Description            |
+| ------- | -------- | ------------- | ---------------------- |
+| `code`  | `string` | -             | Mermaid diagram code   |
+| `theme` | `object` | ExonPro theme | Custom theme variables |
+
+**Theme variables:**
+
+```javascript
+const theme = {
+	primaryColor: '#4654A3',
+	primaryTextColor: '#270949',
+	primaryBorderColor: '#4654A3',
+	lineColor: '#270949',
+	secondaryColor: '#FF3131',
+	tertiaryColor: '#f3f4f6'
+};
+```
+
 ## Theming & Customization
 
 ### Quick Setup

package/dist/components/Accordion/Accordion.svelte

@@ -25,8 +25,8 @@
 		return value ? [value] : [];
 	});
 
-	// Context key
-	const ACCORDION_KEY = Symbol('accordion');
+	// Context key - must match AccordionItem
+	const ACCORDION_KEY = 'exon-accordion-context';
 
 	// Context API
 	const accordionContext = {

package/dist/components/Accordion/AccordionItem.svelte

@@ -11,8 +11,8 @@
 
 	let { value, disabled = false, class: className = '', header, children }: Props = $props();
 
-	// Context key (must match parent)
-	const ACCORDION_KEY = Symbol('accordion');
+	// Context key (must match parent Accordion)
+	const ACCORDION_KEY = 'exon-accordion-context';
 
 	// Get context from parent Accordion
 	const ctx = getContext<{

package/dist/components/Chatbot/ChatMessage.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import type { ChatMessage } from './types.js';
+
+	interface Props {
+		message: ChatMessage;
+		class?: string;
+	}
+
+	let { message, class: className = '' }: Props = $props();
+
+	// Format message content (bold, links)
+	function formatContent(content: string): string {
+		// Convert **text** to bold
+		let formatted = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+		// Convert [text](url) to links
+		formatted = formatted.replace(
+			/\[([^\]]+)\]\(([^)]+)\)/g,
+			'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+		);
+		return formatted;
+	}
+
+	const formattedContent = $derived(formatContent(message.content));
+	const isUser = $derived(message.role === 'user');
+	const isSystem = $derived(message.role === 'system');
+</script>
+
+<div
+	class="chat-message chat-message--{message.role} {className}"
+	class:chat-message--user={isUser}
+	class:chat-message--assistant={!isUser && !isSystem}
+	class:chat-message--system={isSystem}
+>
+	{#if !isUser && !isSystem}
+		<div class="chat-message__avatar">
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="20"
+				height="20"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M12 8V4H8" />
+				<rect width="16" height="12" x="4" y="8" rx="2" />
+				<path d="M2 14h2" />
+				<path d="M20 14h2" />
+				<path d="M15 13v2" />
+				<path d="M9 13v2" />
+			</svg>
+		</div>
+	{/if}
+	<div class="chat-message__bubble">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html formattedContent}
+	</div>
+	{#if message.timestamp}
+		<div class="chat-message__time">
+			{new Date(message.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.chat-message {
+		display: flex;
+		gap: var(--space-sm, 0.5rem);
+		max-width: 85%;
+		margin-bottom: var(--space-sm, 0.5rem);
+	}
+
+	.chat-message--user {
+		margin-left: auto;
+		flex-direction: row-reverse;
+	}
+
+	.chat-message--assistant {
+		margin-right: auto;
+	}
+
+	.chat-message--system {
+		margin: var(--space-sm, 0.5rem) auto;
+		max-width: 90%;
+	}
+
+	.chat-message__avatar {
+		flex-shrink: 0;
+		width: 2rem;
+		height: 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: var(--radius-full, 9999px);
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+	}
+
+	.chat-message__bubble {
+		padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
+		border-radius: var(--radius-lg, 0.75rem);
+		font-size: var(--text-sm, 0.875rem);
+		line-height: var(--leading-relaxed, 1.625);
+		word-wrap: break-word;
+	}
+
+	.chat-message--user .chat-message__bubble {
+		background: var(--color-primary, #3b82f6);
+		color: var(--color-text-inverse, #ffffff);
+		border-bottom-right-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.chat-message--assistant .chat-message__bubble {
+		background: var(--color-bg-muted, #f3f4f6);
+		color: var(--color-text, #1f2937);
+		border-bottom-left-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.chat-message--system .chat-message__bubble {
+		background: var(--color-bg-elevated, #ffffff);
+		border: 1px solid var(--color-border, #e5e7eb);
+		color: var(--color-text-muted, #6b7280);
+		font-style: italic;
+		text-align: center;
+	}
+
+	.chat-message__bubble :global(a) {
+		color: inherit;
+		text-decoration: underline;
+	}
+
+	.chat-message__bubble :global(strong) {
+		font-weight: var(--font-semibold, 600);
+	}
+
+	.chat-message__time {
+		align-self: flex-end;
+		font-size: var(--text-xs, 0.75rem);
+		color: var(--color-text-subtle, #9ca3af);
+	}
+</style>

package/dist/components/Chatbot/ChatMessage.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ChatMessage } from './types.js';
+interface Props {
+    message: ChatMessage;
+    class?: string;
+}
+declare const ChatMessage: import("svelte").Component<Props, {}, "">;
+type ChatMessage = ReturnType<typeof ChatMessage>;
+export default ChatMessage;