twintrinsic 0.0.1

package/dist/components/CodeBlockSpeed/CodeBlockSpeed.svelte

@@ -0,0 +1,145 @@
+<script>
+	import { highlightElement } from '@speed-highlight/core';
+	import { detectLanguage } from '@speed-highlight/core/detect';
+	import { onDestroy, onMount } from 'svelte';
+
+	const {
+		/** @type {string} - The language for syntax highlighting */
+		language = '',
+		/** @type {string} - Additional CSS classes */
+		class: className = '',
+		/** @type {boolean} - Whether to show rendering time */
+		showRenderTime = false,
+	} = $props();
+
+	// className is used in the template below
+
+	let code = $state('');
+	let copied = $state(false);
+	let copyTimeout = $state();
+	let codeElement = $state();
+	let renderTime = $state(0);
+
+	onMount(() => {
+		if (!codeElement) return;
+
+		code = codeElement.textContent || '';
+
+		const detectedLang = language || detectLanguage(code);
+
+		codeElement.className = `shj-lang-${detectedLang}`;
+
+		if (showRenderTime) {
+			const startTime = performance.now();
+			highlightElement(codeElement, detectedLang);
+			const endTime = performance.now();
+			renderTime = Math.round((endTime - startTime) * 100) / 100;
+		} else {
+			highlightElement(codeElement, detectedLang);
+		}
+	});
+
+	onDestroy(() => {
+		if (copyTimeout) {
+			clearTimeout(copyTimeout);
+		}
+	});
+
+	/**
+	 * Copy code to clipboard
+	 */
+	async function copyCode() {
+		if (copied) return;
+
+		try {
+			await navigator.clipboard.writeText(code);
+			copied = true;
+
+			copyTimeout = setTimeout(() => {
+				copied = false;
+			}, 2000);
+		} catch (error) {
+			console.error('Failed to copy code:', error);
+		}
+	}
+</script>
+
+<div class="code-block-speed {className}">
+	<div class="code-header">
+		<div class="code-header-left">
+			{#if language}
+				<div class="code-language">{language}</div>
+			{/if}
+			{#if showRenderTime && renderTime > 0}
+				<div class="code-render-time">{renderTime}ms</div>
+			{/if}
+		</div>
+		<button
+			type="button"
+			class="code-copy"
+			onclick={copyCode}
+			aria-label={copied ? 'Copied!' : 'Copy code'}
+		>
+			{#if copied}
+				<svg viewBox="0 0 24 24" width="16" height="16">
+					<path
+						fill="currentColor"
+						d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+					/>
+				</svg>
+				<span>Copied!</span>
+			{:else}
+				<svg viewBox="0 0 24 24" width="16" height="16">
+					<path
+						fill="currentColor"
+						d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"
+					/>
+				</svg>
+				<span>Copy</span>
+			{/if}
+		</button>
+	</div>
+
+	<pre class="code-pre"><code bind:this={codeElement}><slot /></code></pre>
+</div>
+
+<style>
+	@reference '../../twintrinsic.css';
+	
+	.code-block-speed {
+		@apply relative my-4 rounded-lg overflow-hidden;
+		@apply bg-surface border border-border;
+	}
+	
+	.code-header {
+		@apply flex items-center justify-between px-4 py-2;
+		@apply bg-surface border-b border-border;
+	}
+	
+	.code-header-left {
+		@apply flex items-center gap-3;
+	}
+	
+	.code-language {
+		@apply text-xs font-mono text-muted;
+	}
+	
+	.code-render-time {
+		@apply text-xs font-mono text-primary-600 dark:text-primary-400;
+		@apply px-2 py-1 rounded bg-primary-50 dark:bg-primary-900;
+	}
+	
+	.code-copy {
+		@apply flex items-center gap-2 px-2 py-1;
+		@apply text-xs font-medium text-muted;
+		@apply rounded hover:bg-hover;
+		@apply transition-colors duration-150;
+		@apply focus:outline-none focus:ring-2 focus:ring-primary/50;
+	}
+	
+	.code-pre {
+		@apply m-0 p-4 overflow-x-auto;
+		@apply font-mono text-sm;
+		@apply bg-surface dark:bg-surface;
+	}
+</style>

package/dist/components/CodeBlockSpeed/CodeBlockSpeed.svelte.d.ts

@@ -0,0 +1,44 @@
+export default CodeBlockSpeed;
+type CodeBlockSpeed = SvelteComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> & {
+    $$bindings?: "" | undefined;
+};
+declare const CodeBlockSpeed: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    language?: string;
+    class?: string;
+    showRenderTime?: boolean;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type $$ComponentProps = {
+    language?: string;
+    class?: string;
+    showRenderTime?: boolean;
+};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -0,0 +1,229 @@
+<script>
+	import { EditorState } from '@codemirror/state';
+	import { EditorView } from '@codemirror/view';
+	import { onMount } from 'svelte';
+
+	const {
+		/** @type {string} - Initial code content */
+		code = '',
+		/** @type {string} - Language to use for syntax highlighting */
+		language = 'javascript',
+		/** @type {string} - Theme name to apply */
+		theme = 'light',
+		/** @type {string[]} - Array of extension URLs to load dynamically */
+		extensions = [],
+		/** @type {'jsdelivr' | 'esm.sh' | 'unpkg'} - CDN source for loading extensions */
+		cdnSource = 'esm.sh',
+		/** @type {(event: CustomEvent<string>) => void | undefined} - Callback when code changes */
+		onchange = undefined,
+		/** @type {string} - Height of the editor */
+		height = '400px',
+	} = $props();
+
+	/** @type {HTMLDivElement | undefined} */
+	let container;
+	/** @type {any} */
+	let view;
+
+	/**
+	 * Constructs the CDN URL for loading a package
+	 * @param {string} packageName - Package name
+	 * @param {string} version - Package version
+	 * @returns {string} CDN URL
+	 */
+	function getCdnUrl(packageName, version = 'latest') {
+		switch (cdnSource) {
+			case 'jsdelivr':
+				return `https://cdn.jsdelivr.net/npm/${packageName}@${version}/+esm`;
+			case 'unpkg':
+				return `https://unpkg.com/${packageName}@${version}?module`;
+			case 'esm.sh':
+			default:
+				return `https://esm.sh/${packageName}@${version}`;
+		}
+	}
+
+	/**
+	 * Dynamically loads an extension from a CDN
+	 * @param {string} extensionUrl - URL to load extension from
+	 * @returns {Promise<any|null>} Loaded extension or null
+	 */
+	async function loadExtension(extensionUrl) {
+		try {
+			const module = await import(/* @vite-ignore */ extensionUrl);
+			const ext = module.default || Object.values(module)[0];
+			return ext;
+		} catch (error) {
+			console.error(`Failed to load extension from ${extensionUrl}:`, error);
+			return null;
+		}
+	}
+
+	/**
+	 * Loads language support dynamically
+	 * @param {string} lang - Language name
+	 * @returns {Promise<any|null>} Language extension or null
+	 */
+	async function loadLanguageSupport(lang) {
+		/** @type {Record<string, string>} */
+		const languageMap = {
+			javascript: '@codemirror/lang-javascript',
+			typescript: '@codemirror/lang-javascript',
+			python: '@codemirror/lang-python',
+			html: '@codemirror/lang-html',
+			css: '@codemirror/lang-css',
+			json: '@codemirror/lang-json',
+			xml: '@codemirror/lang-xml',
+			markdown: '@codemirror/lang-markdown',
+			sql: '@codemirror/lang-sql',
+			java: '@codemirror/lang-java',
+			cpp: '@codemirror/lang-cpp',
+			rust: '@codemirror/lang-rust',
+			go: '@codemirror/lang-go',
+			php: '@codemirror/lang-php',
+			vue: '@codemirror/lang-vue',
+			svelte: '@codemirror/lang-svelte',
+		};
+
+		const packageName = languageMap[lang.toLowerCase()];
+		if (!packageName) {
+			console.warn(`Language support for ${lang} not available`);
+			return null;
+		}
+
+		try {
+			const url = getCdnUrl(packageName);
+			const module = await import(/* @vite-ignore */ url);
+			const langFn = module[lang.toLowerCase()] || module.default;
+			return langFn?.() || null;
+		} catch (error) {
+			console.error(`Failed to load language support for ${lang}:`, error);
+			return null;
+		}
+	}
+
+	/**
+	 * Loads theme dynamically
+	 * @param {string} themeName - Theme name
+	 * @returns {Promise<any|null>} Theme extension or null
+	 */
+	async function loadTheme(themeName) {
+		/** @type {Record<string, string>} */
+		const themeMap = {
+			'one-dark': '@codemirror/theme-one-dark',
+			'dracula': '@codemirror/theme-dracula',
+			'material-dark': '@codemirror/theme-material-dark',
+			'nord': '@codemirror/theme-nord',
+			'solarized-light': '@codemirror/theme-solarized-light',
+			'solarized-dark': '@codemirror/theme-solarized-dark',
+			'sublime': '@codemirror/theme-sublime',
+			'ayu-light': '@codemirror/theme-ayu-light',
+			'ayu-dark': '@codemirror/theme-ayu-dark',
+		};
+
+		const packageName = themeMap[themeName.toLowerCase()];
+		if (!packageName) {
+			console.warn(`Theme ${themeName} not available`);
+			return null;
+		}
+
+		try {
+			const url = getCdnUrl(packageName);
+			const module = await import(/* @vite-ignore */ url);
+			const themeFn = module[themeName.toLowerCase().replace(/-/g, '')] || module.default;
+			return themeFn || null;
+		} catch (error) {
+			console.error(`Failed to load theme ${themeName}:`, error);
+			return null;
+		}
+	}
+
+	/**
+	 * Initializes the editor with all extensions
+	 */
+	async function initializeEditor() {
+		const exts = [];
+
+		const langExt = await loadLanguageSupport(language);
+		if (langExt) exts.push(langExt);
+
+		if (theme !== 'light') {
+			const themeExt = await loadTheme(theme);
+			if (themeExt) exts.push(themeExt);
+		}
+
+		for (const extUrl of extensions) {
+			const ext = await loadExtension(extUrl);
+			if (ext) exts.push(ext);
+		}
+
+		exts.push(EditorView.lineNumbers());
+		exts.push(EditorView.highlightActiveLineGutter());
+		exts.push(EditorView.foldGutter());
+
+		const state = EditorState.create({
+			doc: code,
+			extensions: exts,
+		});
+
+		view = new EditorView({
+			state,
+			parent: container,
+			dispatch: (/** @type {any} */ tr) => {
+				view.update([tr]);
+				if (tr.docChanged) {
+					const newCode = tr.newDoc.toString();
+					onchange?.(new CustomEvent('change', { detail: newCode }));
+				}
+			},
+		});
+	}
+
+	/**
+	 * Updates the code content
+	 * @param {string} newCode - New code to set
+	 */
+	function setCode(newCode) {
+		if (view) {
+			const changes = {
+				from: 0,
+				to: view.state.doc.length,
+				insert: newCode,
+			};
+			view.dispatch({ changes });
+		}
+	}
+
+	/**
+	 * Gets the current code content
+	 * @returns {string} Current code
+	 */
+	function getCode() {
+		return view?.state.doc.toString() || code;
+	}
+
+	onMount(() => {
+		initializeEditor();
+
+		return () => {
+			if (view) {
+				view.destroy();
+			}
+		};
+	});
+</script>
+
+<div
+	bind:this={container}
+	class="code-editor-wrapper"
+	style="height: {height}; overflow: hidden; border: 1px solid var(--color-border, #e5e7eb);"
+></div>
+
+<style>
+	@reference "../../twintrinsic.css";
+
+	.code-editor-wrapper {
+		font-family: 'Fira Code', 'Courier New', monospace;
+		font-size: 14px;
+	}
+</style>

package/dist/components/CodeEditor/CodeEditor.svelte.d.ts

@@ -0,0 +1,23 @@
+export default CodeEditor;
+type CodeEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CodeEditor: import("svelte").Component<{
+    code?: string;
+    language?: string;
+    theme?: string;
+    extensions?: any[];
+    cdnSource?: string;
+    onchange?: any;
+    height?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    code?: string;
+    language?: string;
+    theme?: string;
+    extensions?: any[];
+    cdnSource?: string;
+    onchange?: any;
+    height?: string;
+};

package/dist/components/Combobox/Combobox.svelte

@@ -0,0 +1,279 @@
+<script lang="ts">
+import { createEventDispatcher } from "svelte"
+
+const {
+  class: className = "",
+  id = crypto.randomUUID(),
+  name,
+  options = [],
+  value = null,
+  placeholder = "Select an option",
+  optionLabel = "label",
+  optionValue = "value",
+  disabled = false,
+  searchable = false,
+  clearable = false,
+  ariaLabel,
+  children,
+} = $props()
+
+const dispatch = createEventDispatcher()
+
+let isOpen = $state(false)
+let searchValue = $state("")
+let highlightedIndex = $state(-1)
+let selectedValue = $state(null)
+let inputElement
+
+$effect(() => {
+  selectedValue = value
+})
+
+const getOptionLabel = (option) => {
+  if (typeof option === "object" && option !== null) {
+    return option[optionLabel]
+  }
+  return option
+}
+
+const getOptionValue = (option) => {
+  if (typeof option === "object" && option !== null) {
+    return option[optionValue]
+  }
+  return option
+}
+
+const filteredOptions = $derived.by(() => {
+  if (!searchable || !searchValue) {
+    return options
+  }
+  return options.filter((option) =>
+    getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())
+  )
+})
+
+const handleInputFocus = () => {
+  isOpen = true
+}
+
+const handleInputBlur = (e) => {
+  if (!e.relatedTarget?.closest(".combobox-dropdown")) {
+    isOpen = false
+  }
+}
+
+const handleInputChange = (e) => {
+  if (searchable) {
+    searchValue = e.target.value
+  }
+}
+
+const handleOptionClick = (option) => {
+  const newValue = getOptionValue(option)
+  selectedValue = newValue
+  isOpen = false
+  searchValue = ""
+  dispatch("change", { value: newValue, option })
+}
+
+const handleClear = (e) => {
+  e.stopPropagation()
+  selectedValue = null
+  searchValue = ""
+  dispatch("change", { value: null, option: null })
+  inputElement?.focus()
+}
+
+const handleKeydown = (e) => {
+  if (!isOpen) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      isOpen = true
+    }
+    return
+  }
+
+  switch (e.key) {
+    case "ArrowDown":
+      e.preventDefault()
+      highlightedIndex = Math.min(highlightedIndex + 1, filteredOptions.length - 1)
+      break
+    case "ArrowUp":
+      e.preventDefault()
+      highlightedIndex = Math.max(highlightedIndex - 1, -1)
+      break
+    case "Enter":
+      e.preventDefault()
+      if (highlightedIndex >= 0) {
+        handleOptionClick(filteredOptions[highlightedIndex])
+      }
+      break
+    case "Escape":
+      e.preventDefault()
+      isOpen = false
+      break
+  }
+}
+
+const selectedLabel = $derived.by(() => {
+  if (selectedValue === null || selectedValue === undefined) {
+    return placeholder
+  }
+  const selected = options.find((opt) => getOptionValue(opt) === selectedValue)
+  return selected ? getOptionLabel(selected) : placeholder
+})
+</script>
+
+<style>
+  @reference '$lib/twintrinsic.css';
+
+  .combobox-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
+
+  .combobox-input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    background-color: var(--color-background);
+    color: var(--color-text);
+    font-size: 1rem;
+    transition: all 0.2s ease;
+  }
+
+  .combobox-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+  }
+
+  .combobox-input:disabled {
+    background-color: var(--color-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .combobox-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .combobox-clear {
+    position: absolute;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0.25rem;
+    color: var(--color-text-secondary);
+    transition: color 0.2s ease;
+  }
+
+  .combobox-clear:hover {
+    color: var(--color-text);
+  }
+
+  .combobox-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 0.25rem;
+    background-color: var(--color-background);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 10;
+  }
+
+  .combobox-option {
+    padding: 0.5rem 0.75rem;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .combobox-option:hover,
+  .combobox-option.highlighted {
+    background-color: var(--color-hover);
+  }
+
+  .combobox-option.selected {
+    background-color: var(--color-primary);
+    color: white;
+  }
+
+  .combobox-empty {
+    padding: 1rem;
+    text-align: center;
+    color: var(--color-text-secondary);
+  }
+</style>
+
+<div class="combobox-wrapper {className}" {id}>
+  <div class="combobox-input-wrapper">
+    <input
+      bind:this={inputElement}
+      type="text"
+      class="combobox-input"
+      {placeholder}
+      {disabled}
+      value={searchable ? searchValue : selectedLabel}
+      on:focus={handleInputFocus}
+      on:blur={handleInputBlur}
+      on:change={handleInputChange}
+      on:keydown={handleKeydown}
+      aria-label={ariaLabel}
+      aria-description={ariaDescription}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      {name}
+    />
+    {#if clearable && value !== null && value !== undefined}
+      <button
+        class="combobox-clear"
+        on:click={handleClear}
+        aria-label="Clear selection"
+        tabindex="-1"
+      >
+        ✕
+      </button>
+    {/if}
+  </div>
+
+  {#if isOpen && filteredOptions.length > 0}
+    <div class="combobox-dropdown" bind:this={dropdownElement} role="listbox">
+      {#each filteredOptions as option, index}
+        <div
+          class="combobox-option"
+          class:highlighted={index === highlightedIndex}
+          class:selected={getOptionValue(option) === value}
+          on:click={() => handleOptionClick(option)}
+          on:keydown={(e) => {
+            if (e.key === "Enter") {
+              handleOptionClick(option)
+            }
+          }}
+          role="option"
+          aria-selected={getOptionValue(option) === value}
+          tabindex="-1"
+        >
+          {#if children}
+            {@render children(option)}
+          {:else}
+            {getOptionLabel(option)}
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {:else if isOpen}
+    <div class="combobox-dropdown">
+      <div class="combobox-empty">No options available</div>
+    </div>
+  {/if}
+</div>