@liwe3/webcomponents-svelte 1.0.0

package/README.md

@@ -0,0 +1,112 @@
+# @liwe3/webcomponents-svelte
+
+Svelte 5 wrappers for [@liwe3/webcomponents](https://www.npmjs.com/package/@liwe3/webcomponents).
+
+## Installation
+
+```bash
+npm install @liwe3/webcomponents @liwe3/webcomponents-svelte
+# or
+pnpm add @liwe3/webcomponents @liwe3/webcomponents-svelte
+# or
+yarn add @liwe3/webcomponents @liwe3/webcomponents-svelte
+```
+
+## Usage
+
+### SmartSelect
+
+```svelte
+<script>
+  import { SmartSelect } from '@liwe3/webcomponents-svelte';
+
+  let selectedValue = $state();
+
+  const options = [
+    { value: 'js', label: 'JavaScript' },
+    { value: 'ts', label: 'TypeScript' },
+    { value: 'py', label: 'Python' }
+  ];
+
+  const handleChange = (newValue) => {
+    console.log('Selected:', newValue);
+  };
+</script>
+
+<SmartSelect
+  bind:value={selectedValue}
+  {options}
+  searchable
+  placeholder="Select a language"
+  onchange={handleChange}
+/>
+```
+
+### AITextEditor
+
+```svelte
+<script>
+  import { AITextEditor } from '@liwe3/webcomponents-svelte';
+
+  let content = $state('');
+  let systemPrompt = $state("You are a helpful writing assistant.");
+
+  const handleChange = (newValue) => {
+    console.log('Content changed:', newValue);
+  };
+</script>
+
+<AITextEditor
+  bind:value={content}
+  bind:systemPrompt
+  apiKey="your-api-key"
+  apiEndpoint="https://api.openai.com/v1/chat/completions"
+  modelName="gpt-3.5-turbo"
+  placeholder="Start writing..."
+  onchange={handleChange}
+  style="width: 100%; height: 400px;"
+/>
+```
+
+## Features
+
+- **Full Svelte 5 Support**: Uses Svelte 5 runes (`$state`, `$bindable`, `$effect`)
+- **TypeScript**: Full type safety
+- **Reactive**: All props are reactive and two-way bindable where appropriate
+- **SSR Safe**: Components are loaded dynamically to prevent SSR issues
+
+## Components
+
+### SmartSelect Props
+
+- `multiple` (boolean): Enable multi-select mode
+- `searchable` (boolean): Enable search functionality
+- `placeholder` (string): Placeholder text
+- `disabled` (boolean): Disable the select
+- `value` (string | string[], bindable): Selected value(s)
+- `options` (SelectOption[]): Array of `{value, label}` objects
+- `onchange` (function): Change event handler
+- `onopen` (function): Open event handler
+- `onclose` (function): Close event handler
+- `onsearch` (function): Search event handler
+
+### AITextEditor Props
+
+- `value` (string, bindable): Editor content
+- `apiKey` (string): API key for AI service
+- `suggestionDelay` (number): Delay before showing suggestions (ms)
+- `systemPrompt` (string, bindable): System prompt for AI
+- `apiEndpoint` (string): API endpoint URL
+- `modelName` (string): Model name to use
+- `placeholder` (string): Placeholder text
+- `onbeforesuggestion` (function): Called before requesting suggestion
+- `onchange` (function): Change event handler
+
+## License
+
+MIT
+
+## Links
+
+- [Core Package](https://www.npmjs.com/package/@liwe3/webcomponents)
+- [GitHub Repository](https://github.com/liwe3/webcomponents)

package/dist/AITextEditor.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	interface Props {
+		value?: string;
+		apiKey?: string;
+		suggestionDelay?: number;
+		systemPrompt?: string;
+		apiEndpoint?: string;
+		modelName?: string;
+		placeholder?: string;
+
+		onbeforesuggestion?: (data: any) => boolean;
+		onchange?: (value: string) => void;
+	}
+
+	let {
+		value = $bindable(''),
+		apiKey = '',
+		suggestionDelay = 3000,
+		systemPrompt = $bindable(
+			"You are a helpful writing assistant. Continue the user's text naturally and coherently. Provide 1-3 sentences that would logically follow their writing. Keep the same tone and style. Do not repeat what they've already written."
+		),
+		apiEndpoint = 'https://api.openai.com/v1/chat/completions',
+		modelName = 'gpt-3.5-turbo',
+		placeholder = 'Start writing your markdown text here...',
+
+		onbeforesuggestion,
+		onchange
+	} = $props();
+
+	let elementRef: HTMLElement;
+	let webComponent: any;
+
+	/**
+	 * Updates the web component property and syncs with Svelte state
+	 */
+	const updateWebComponentProperty = (
+		propertyName: string,
+		newValue: any,
+		setterMethod?: string
+	) => {
+		if (!webComponent) return;
+
+		const method =
+			setterMethod || `set${propertyName.charAt(0).toUpperCase() + propertyName.slice(1)}`;
+		if (typeof webComponent[method] === 'function') {
+			webComponent[method](newValue);
+		} else if (propertyName in webComponent) {
+			webComponent[propertyName] = newValue;
+		}
+	};
+
+	/**
+	 * Syncs all props with the web component
+	 */
+	const syncAllProps = () => {
+		if (!webComponent) return;
+
+		updateWebComponentProperty('apiKey', apiKey);
+		updateWebComponentProperty('suggestionDelay', suggestionDelay);
+		updateWebComponentProperty('systemPrompt', systemPrompt);
+		updateWebComponentProperty('apiEndpoint', apiEndpoint);
+		updateWebComponentProperty('modelName', modelName);
+
+		// Set initial text value
+		if (value && webComponent.getText() !== value) {
+			webComponent.setText(value);
+		}
+
+		// Set placeholder
+		const textarea = webComponent.shadowRoot?.getElementById('editor');
+		if (textarea && placeholder) {
+			textarea.placeholder = placeholder;
+		}
+	};
+
+	$effect(() => {
+		if (webComponent && webComponent.getText() !== value) {
+			webComponent.setText(value);
+		}
+	});
+
+	$effect(() => {
+		if (webComponent) {
+			const textarea = webComponent.shadowRoot?.getElementById('editor');
+			if (textarea && placeholder) {
+				textarea.placeholder = placeholder;
+			}
+		}
+	});
+
+	onMount(async () => {
+		// Dynamically import the web component
+		await import('@liwe3/webcomponents/ai-text-editor');
+
+		// Get reference to the web component
+		webComponent = elementRef;
+
+		// Sync all initial props
+		syncAllProps();
+
+		// Listen for changes from the web component
+		const handleChange = (event: CustomEvent) => {
+			const newValue = event.detail.value;
+			if (newValue !== value) {
+				value = newValue;
+				onchange?.(newValue);
+			}
+		};
+
+		// Forward beforeSuggestion event and allow parent to cancel
+		const handleBeforeSuggestion = (event: CustomEvent) => {
+			const cancel = onbeforesuggestion ? onbeforesuggestion(event.detail) : false;
+
+			// propagate cancellation back to the underlying web component
+			if (cancel) event.preventDefault();
+		};
+
+		webComponent.addEventListener('change', handleChange);
+		webComponent.addEventListener('beforeSuggestion', handleBeforeSuggestion as EventListener);
+
+		// Cleanup
+		return () => {
+			webComponent?.removeEventListener('change', handleChange);
+			webComponent?.removeEventListener(
+				'beforeSuggestion',
+				handleBeforeSuggestion as EventListener
+			);
+		};
+	});
+
+	// Public methods to expose web component functionality
+	export const setText = (text: string) => {
+		value = text;
+		webComponent?.setText(text);
+	};
+
+	// Expose setContext to parent components
+	export const setContext = (context: string) => {
+		webComponent?.setContext(context);
+	};
+
+	// Expose setSystemPrompt to allow changing the system prompt dynamically
+	export const setSystemPrompt = (prompt: string) => {
+		systemPrompt = prompt;
+		webComponent?.setSystemPrompt?.(prompt);
+	};
+</script>
+
+<liwe3-ai-text-editor bind:this={elementRef}></liwe3-ai-text-editor>

package/dist/AITextEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+declare const AITextEditor: import("svelte").Component<{
+    value?: string;
+    apiKey?: string;
+    suggestionDelay?: number;
+    systemPrompt?: string;
+    apiEndpoint?: string;
+    modelName?: string;
+    placeholder?: string;
+    onbeforesuggestion: any;
+    onchange: any;
+}, {
+    setText: (text: string) => void;
+    setContext: (context: string) => void;
+    setSystemPrompt: (prompt: string) => void;
+}, "value" | "systemPrompt">;
+type AITextEditor = ReturnType<typeof AITextEditor>;
+export default AITextEditor;
+//# sourceMappingURL=AITextEditor.svelte.d.ts.map

package/dist/AITextEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AITextEditor.svelte.d.ts","sourceRoot":"","sources":["../src/lib/AITextEditor.svelte.ts"],"names":[],"mappings":"AA+JA,QAAA,MAAM,YAAY;YA5IqC,MAAM;aAAW,MAAM;sBAAoB,MAAM;mBAAiB,MAAM;kBAAgB,MAAM;gBAAc,MAAM;kBAAgB,MAAM;wBAAsB,GAAG;cAAY,GAAG;;oBAuH9M,MAAM;0BAMA,MAAM;8BAKF,MAAM;4BAUiB,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/SmartSelect.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { SelectOption } from '@liwe3/webcomponents';
+
+	interface Props {
+		multiple?: boolean;
+		searchable?: boolean;
+		placeholder?: string;
+		disabled?: boolean;
+		value?: string | string[];
+		options?: SelectOption[];
+		onchange?: (value: string | string[] | undefined) => void;
+		onopen?: (event: CustomEvent) => void;
+		onclose?: (event: CustomEvent) => void;
+		onsearch?: (event: CustomEvent) => void;
+	}
+
+	let {
+		multiple = false,
+		searchable = false,
+		placeholder = 'Select an option',
+		disabled = false,
+		value = $bindable(),
+		options = [],
+		onchange,
+		onopen,
+		onclose,
+		onsearch,
+		...restProps
+	}: Props = $props();
+
+	let smartSelectElement: HTMLElement;
+
+	/**
+	 * Updates the web component's attributes based on props
+	 */
+	const updateAttributes = () => {
+		if (!smartSelectElement) return;
+
+		// Set boolean attributes
+		if (multiple) {
+			smartSelectElement.setAttribute('multiple', '');
+		} else {
+			smartSelectElement.removeAttribute('multiple');
+		}
+
+		if (searchable) {
+			smartSelectElement.setAttribute('searchable', '');
+		} else {
+			smartSelectElement.removeAttribute('searchable');
+		}
+
+		if (disabled) {
+			smartSelectElement.setAttribute('disabled', '');
+		} else {
+			smartSelectElement.removeAttribute('disabled');
+		}
+
+		// Set string attributes
+		smartSelectElement.setAttribute('placeholder', placeholder);
+
+		// Set options as JSON string
+		if (options.length > 0) {
+			smartSelectElement.setAttribute('options', JSON.stringify(options));
+		}
+
+		// Set value
+		if (value !== undefined && value !== null) {
+			if (Array.isArray(value)) {
+				(smartSelectElement as any).value = value;
+			} else {
+				(smartSelectElement as any).value = value;
+			}
+		}
+	};
+
+	/**
+	 * Binds event listeners to the web component
+	 */
+	const bindEvents = () => {
+		if (!smartSelectElement) return;
+
+		smartSelectElement.addEventListener('change', (event) => {
+			const customEvent = event as CustomEvent;
+			value = customEvent.detail.value;
+			onchange?.(value);
+		});
+
+		smartSelectElement.addEventListener('open', (event) => {
+			onopen?.(event as CustomEvent);
+		});
+
+		smartSelectElement.addEventListener('close', (event) => {
+			onclose?.(event as CustomEvent);
+		});
+
+		smartSelectElement.addEventListener('search', (event) => {
+			onsearch?.(event as CustomEvent);
+		});
+	};
+
+	onMount(async () => {
+		// Dynamically import the web component
+		await import('@liwe3/webcomponents/smart-select');
+
+		updateAttributes();
+		bindEvents();
+
+		// Watch for prop changes and update attributes
+		$effect(() => {
+			updateAttributes();
+		});
+	});
+
+	/**
+	 * Expose methods to parent component
+	 */
+	export const open = () => {
+		(smartSelectElement as any)?.open();
+	};
+
+	export const close = () => {
+		(smartSelectElement as any)?.close();
+	};
+
+	export const toggle = () => {
+		(smartSelectElement as any)?.toggle();
+	};
+
+	export const selectOption = (optionValue: string) => {
+		(smartSelectElement as any)?.selectOption(optionValue);
+	};
+
+	export const deselectOption = (optionValue: string) => {
+		(smartSelectElement as any)?.deselectOption(optionValue);
+	};
+
+	export const getSelectedOptions = () => {
+		return (smartSelectElement as any)?.getSelectedOptions() || [];
+	};
+
+	export const setOptions = (newOptions: SelectOption[]) => {
+		(smartSelectElement as any)?.setOptions(newOptions);
+	};
+</script>
+
+<!-- svelte-ignore a11y_unknown_aria_attribute -->
+<liwe3-select bind:this={smartSelectElement} {...restProps}></liwe3-select>

package/dist/SmartSelect.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { SelectOption } from '@liwe3/webcomponents';
+interface Props {
+    multiple?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    value?: string | string[];
+    options?: SelectOption[];
+    onchange?: (value: string | string[] | undefined) => void;
+    onopen?: (event: CustomEvent) => void;
+    onclose?: (event: CustomEvent) => void;
+    onsearch?: (event: CustomEvent) => void;
+}
+declare const SmartSelect: import("svelte").Component<Props, {
+    /**
+         * Expose methods to parent component
+         */ open: () => void;
+    close: () => void;
+    toggle: () => void;
+    selectOption: (optionValue: string) => void;
+    deselectOption: (optionValue: string) => void;
+    getSelectedOptions: () => any;
+    setOptions: (newOptions: SelectOption[]) => void;
+}, "value">;
+type SmartSelect = ReturnType<typeof SmartSelect>;
+export default SmartSelect;
+//# sourceMappingURL=SmartSelect.svelte.d.ts.map

package/dist/SmartSelect.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartSelect.svelte.d.ts","sourceRoot":"","sources":["../src/lib/SmartSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGxD,UAAU,KAAK;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1D,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AA+IF,QAAA,MAAM,WAAW;IAHjB;;WAEI;;;gCAxBiC,MAAM;kCAIJ,MAAM;;6BAQX,YAAY,EAAE;WAaS,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @liwe3/webcomponents-svelte
+ * Svelte 5 wrappers for @liwe3/webcomponents
+ */
+export type { SelectOption, AITextEditorConfig } from '@liwe3/webcomponents';
+export { default as SmartSelect } from './SmartSelect.svelte';
+export { default as AITextEditor } from './AITextEditor.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAG7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+/**
+ * @liwe3/webcomponents-svelte
+ * Svelte 5 wrappers for @liwe3/webcomponents
+ */
+// Export Svelte components
+export { default as SmartSelect } from './SmartSelect.svelte';
+export { default as AITextEditor } from './AITextEditor.svelte';

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@liwe3/webcomponents-svelte",
+  "version": "1.0.0",
+  "description": "Svelte 5 wrappers for @liwe3/webcomponents",
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src/lib",
+    "package": "svelte-package -i src/lib && publint",
+    "prepublishOnly": "pnpm run package",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "keywords": [
+    "svelte",
+    "svelte5",
+    "web-components",
+    "components",
+    "liwe3",
+    "smart-select",
+    "ai-text-editor"
+  ],
+  "author": "Liwe3",
+  "license": "MIT",
+  "peerDependencies": {
+    "@liwe3/webcomponents": "^1.0.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@liwe3/webcomponents": "workspace:*",
+    "@sveltejs/package": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "publint": "^0.2.0",
+    "svelte": "^5.38.10",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.16.0"
+}