@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/ThumbHashImage.svelte

@@ -1,134 +1,132 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    // import { browser } from '$app/environment';
-    const browser = typeof window !== 'undefined';
-    import { fade } from 'svelte/transition';
-    
-    
-    export let src: string;
-    export let alt: string = '';
-    export let thumbhash: string;
-    export let class_ = '';
-    export let style = '';
-    export let roundedCorners = 'rounded-medium';
-    export let onLoad: (() => void) | undefined = undefined;
+	import { onMount } from 'svelte';
+	// import { browser } from '$app/environment';
+	const browser = typeof window !== 'undefined';
+	import { fade } from 'svelte/transition';
 
-    let imageLoaded = false;
-    let imageElement: HTMLImageElement;
-    let base64Hash: string;
-    let shouldShowThumbhash = true;
-    let thumbHashVisible = false;
-    
-    // Debug logs
-    let showLogs = false;
+	export let src: string;
+	export let alt: string = '';
+	export let thumbhash: string;
+	export let class_ = '';
+	export let style = '';
+	export let roundedCorners = 'rounded-card';
+	export let onLoad: (() => void) | undefined = undefined;
 
+	let imageLoaded = false;
+	let imageElement: HTMLImageElement;
+	let base64Hash: string;
+	let shouldShowThumbhash = true;
+	let thumbHashVisible = false;
 
-    /***
-     * METHODS
-     **/
+	// Debug logs
+	let showLogs = false;
 
-    // Convert hex string to base64
-    function hexToBase64(hexstring: string | null | undefined): string {
-        if (!hexstring || typeof hexstring !== 'string') return '';
+	/***
+	 * METHODS
+	 **/
 
-        // if (showLogs) console.log('ThumbHashImage: Converting hash to base64', { 
-        //     input: hexstring,
-        //     src,
-        //     alt 
-        // });
-        
-        try {
-            const hex = hexstring.replace(/\s+/g, '');
-            if (hex.length === 0 || hex.length % 2 !== 0) return '';
-            const bytes = new Uint8Array(hex.length / 2);
-            for (let i = 0; i < hex.length; i += 2) {
-                bytes[i/2] = parseInt(hex.substring(i, i + 2), 16);
-            }
-            const result = btoa(String.fromCharCode.apply(null, Array.from(bytes)));
-            // if (showLogs) console.log('ThumbHashImage: Base64 conversion result', { result });
-            return result;
-        } catch (error) {
-            console.error('ThumbHashImage: Error converting hex to base64:', error);
-            return '';
-        }
-    }
+	// Convert hex string to base64
+	function hexToBase64(hexstring: string | null | undefined): string {
+		if (!hexstring || typeof hexstring !== 'string') return '';
 
-    $: {
-        // if (showLogs) console.log('ThumbHashImage: Props updated', { 
-        //     src, 
-        //     alt, 
-        //     thumbhash,
-        //     shouldShowThumbhash,
-        //     browser,
-        //     imageLoaded,
-        //     'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
-        // });
-        base64Hash = hexToBase64(thumbhash);
-    }
+		// if (showLogs) console.log('ThumbHashImage: Converting hash to base64', {
+		//     input: hexstring,
+		//     src,
+		//     alt
+		// });
 
-    onMount(async () => {
-        // if (showLogs) console.log('ThumbHashImage: Component mounted', { 
-        //     browser,
-        //     'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
-        // });
+		try {
+			const hex = hexstring.replace(/\s+/g, '');
+			if (hex.length === 0 || hex.length % 2 !== 0) return '';
+			const bytes = new Uint8Array(hex.length / 2);
+			for (let i = 0; i < hex.length; i += 2) {
+				bytes[i / 2] = parseInt(hex.substring(i, i + 2), 16);
+			}
+			const result = btoa(String.fromCharCode.apply(null, Array.from(bytes)));
+			// if (showLogs) console.log('ThumbHashImage: Base64 conversion result', { result });
+			return result;
+		} catch (error) {
+			console.error('ThumbHashImage: Error converting hex to base64:', error);
+			return '';
+		}
+	}
 
-        if (browser && !customElements.get('thumb-hash')) {
-            // if (showLogs) console.log('ThumbHashImage: Initializing ThumbHashElement');
-            try {
-                const { ThumbHashElement } = await import('@hirasso/thumbhash-custom-element');
-                ThumbHashElement.init();
-                // if (showLogs) console.log('ThumbHashImage: ThumbHashElement initialized successfully');
-            } catch (error) {
-                if (showLogs) console.error('ThumbHashImage: Failed to initialize ThumbHashElement', error);
-            }
-        }
+	$: {
+		// if (showLogs) console.log('ThumbHashImage: Props updated', {
+		//     src,
+		//     alt,
+		//     thumbhash,
+		//     shouldShowThumbhash,
+		//     browser,
+		//     imageLoaded,
+		//     'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
+		// });
+		base64Hash = hexToBase64(thumbhash);
+	}
 
-        // Check if image is already cached
-        if (imageElement?.complete) {
-            // if (showLogs) console.log('ThumbHashImage: Image already cached');
-            imageLoaded = true;
-            shouldShowThumbhash = false;
-            if (onLoad) onLoad();
-        } else {
-            // Trigger thumbhash fade in
-            setTimeout(() => {
-                thumbHashVisible = true;
-            }, 50);
-        }
-    });
+	onMount(async () => {
+		// if (showLogs) console.log('ThumbHashImage: Component mounted', {
+		//     browser,
+		//     'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
+		// });
 
-    function handleImageLoad() {
-        // if (showLogs) console.log('ThumbHashImage: Image loaded', { src });
-        imageLoaded = true;
-        // Delay removal of thumbhash so that the image fades in over it
-        setTimeout(() => {
-            shouldShowThumbhash = false;
-        }, 600);
-        if (onLoad) onLoad();
-    }
+		if (browser && !customElements.get('thumb-hash')) {
+			// if (showLogs) console.log('ThumbHashImage: Initializing ThumbHashElement');
+			try {
+				const { ThumbHashElement } = await import('@hirasso/thumbhash-custom-element');
+				ThumbHashElement.init();
+				// if (showLogs) console.log('ThumbHashImage: ThumbHashElement initialized successfully');
+			} catch (error) {
+				if (showLogs) console.error('ThumbHashImage: Failed to initialize ThumbHashElement', error);
+			}
+		}
+
+		// Check if image is already cached
+		if (imageElement?.complete) {
+			// if (showLogs) console.log('ThumbHashImage: Image already cached');
+			imageLoaded = true;
+			shouldShowThumbhash = false;
+			if (onLoad) onLoad();
+		} else {
+			// Trigger thumbhash fade in
+			setTimeout(() => {
+				thumbHashVisible = true;
+			}, 50);
+		}
+	});
+
+	function handleImageLoad() {
+		// if (showLogs) console.log('ThumbHashImage: Image loaded', { src });
+		imageLoaded = true;
+		// Delay removal of thumbhash so that the image fades in over it
+		setTimeout(() => {
+			shouldShowThumbhash = false;
+		}, 600);
+		if (onLoad) onLoad();
+	}
 </script>
 
 <div class="relative overflow-hidden {roundedCorners} {class_}" {style}>
-    {#if shouldShowThumbhash && browser}
-        <div class="absolute inset-0">
-            <thumb-hash
-                value={base64Hash}
-                class="block w-full h-full transition-opacity duration-300"
-                style="object-fit: cover; opacity: {thumbHashVisible ? 1 : 0}"
-                class:opacity-0={imageLoaded}
-            ></thumb-hash>
-        </div>
-    {/if}
+	{#if shouldShowThumbhash && browser}
+		<div class="absolute inset-0">
+			<thumb-hash
+				value={base64Hash}
+				class="block h-full w-full transition-opacity duration-300"
+				style="object-fit: cover; opacity: {thumbHashVisible ? 1 : 0}"
+				class:opacity-0={imageLoaded}
+			></thumb-hash>
+		</div>
+	{/if}
 
-    <img 
-        bind:this={imageElement}
-        {src}
-        {alt}
-        loading="lazy"
-        decoding="async"
-        class="w-full h-full object-cover transition-opacity duration-300"
-        class:opacity-0={!imageLoaded}
-        class:opacity-100={imageLoaded}
-        on:load={handleImageLoad}
-    />
-</div>
+	<img
+		bind:this={imageElement}
+		{src}
+		{alt}
+		loading="lazy"
+		decoding="async"
+		class="h-full w-full object-cover transition-opacity duration-300"
+		class:opacity-0={!imageLoaded}
+		class:opacity-100={imageLoaded}
+		on:load={handleImageLoad}
+	/>
+</div>

package/dist/components/WScrollArea.svelte

@@ -1,47 +1,53 @@
 <script lang="ts">
-import { ScrollArea } from './ui/scroll-area';
-
-// COMPONENT PROPS
-let className = '';
-export { className as class };
-export let style: string = '';
-// Viewport Class
-export let viewPortClass: string = '';
-// Content Padding
-// export let contentPadding: number = 0;
-// Orientation
-export let orientation: 'horizontal' | 'vertical' = 'vertical';
-// Scrollbar Y Classes
-export let scrollOutside: boolean = false;
-export let scrollbarWidth = 16; // Default width of the scrollbar in pixels
-export let scrollbarYClasses = '';
-export let scrollHideDelay = 0;
-export let type : any = 'hover';
-//
-export let element: HTMLElement | null = null;
+	import { ScrollArea } from './ui/scroll-area';
 
+	// COMPONENT PROPS
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	// Viewport Class
+	export let viewPortClass: string = '';
+	// Content Padding
+	// export let contentPadding: number = 0;
+	// Orientation
+	export let orientation: 'horizontal' | 'vertical' = 'vertical';
+	// Scrollbar Y Classes
+	export let scrollOutside: boolean = false;
+	export let scrollbarWidth = 16; // Default width of the scrollbar in pixels
+	export let scrollbarYClasses = '';
+	export let scrollHideDelay = 0;
+	export let type: any = 'hover';
+	//
+	export let element: HTMLElement | null = null;
 </script>
 
 <!-- HTML Template -->
-<ScrollArea bind:ref={element}
-        class={(className ? className + ' ' : '') + "scroll-area-container w-full h-full " + 
-              "widgetic-radius widgetic-colors select-text " +  
-              "**:!data-scroll-area-viewport:pe-(--scrollbar-width)"}
-        style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
-                --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth/4}px; "
-        {orientation}
-        {type}
-        {scrollHideDelay}
-        scrollbarYClasses={scrollbarYClasses + "flex w-[var(--scrollbar-width)] !p-(--scrollbar-padding) " + 
-                          "!bg-transparent border-none select-none touch-none " + 
-                          "[&>div]:rounded-[var(--radius-pill)] [&>div]:cursor-pointer " + 
-                          "[&>div]:bg-[hsl(var(--grey1))] hover:[&>div]:bg-[hsl(var(--grey2))] " + 
-                          "[&>div]:transition-colors [&>div]:duration-250"}
-      >
-      <div class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]" style="margin-inline-end: {scrollbarWidth}px;">
-        <!-- <div class="viewport-inner absolute border border-red-500" style="inset: {contentPadding}px;"></div> -->
-      </div>
-      <slot/>
+<ScrollArea
+	bind:ref={element}
+	class={'scroll-area-container h-full w-full ' +
+		'widgetic-radius widgetic-colors select-text ' +
+		'**:!data-scroll-area-viewport:pe-(--scrollbar-width)' +
+		// The caller's classes come last: the class merge keeps the last of two that set the same thing (a caller's own
+		// height or width replaces the h-full and w-full above)
+		(className ? ' ' + className : '')}
+	style="{style} {scrollOutside ? `width: calc(100% + ${scrollbarWidth}px) !important;` : ''}
+                --scrollbar-width: {scrollbarWidth}px; --scrollbar-padding: {scrollbarWidth /
+		4}px; "
+	{orientation}
+	{type}
+	{scrollHideDelay}
+	scrollbarYClasses={scrollbarYClasses +
+		'flex w-[var(--scrollbar-width)] !p-(--scrollbar-padding) ' +
+		'!bg-transparent border-none select-none touch-none ' +
+		'[&>div]:rounded-full [&>div]:cursor-pointer ' +
+		'[&>div]:bg-muted-foreground/30 hover:[&>div]:bg-muted-foreground/50 ' +
+		'[&>div]:transition-colors [&>div]:duration-fast'}
+>
+	<div
+		class="actual-viewport {viewPortClass ? viewPortClass + ' ' : ''} absolute inset-0 z-[-1]"
+		style="margin-inline-end: {scrollbarWidth}px;"
+	>
+		<!-- <div class="viewport-inner absolute border border-red-500" style="inset: {contentPadding}px;"></div> -->
+	</div>
+	<slot />
 </ScrollArea>
-
-

package/dist/components/chat/ActivityRow.svelte

@@ -0,0 +1,115 @@
+<!--
+	Figma: Activity Row (component set 67:87, node 67:87)
+-->
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type ActivityRowStatus = 'pending' | 'running' | 'done' | 'failed';
+
+	export type ActivityRowProps = HTMLAttributes<HTMLDivElement> & {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		label: string;
+		status?: ActivityRowStatus;
+		detail?: string;
+		expanded?: boolean;
+		expandLabel?: string;
+		collapseLabel?: string;
+		onToggle?: () => void;
+		detailContent?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import IconChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import IconChevronRight from '@tabler/icons-svelte/icons/chevron-right';
+	import IconCircle from '@tabler/icons-svelte/icons/circle';
+	import IconCircleCheck from '@tabler/icons-svelte/icons/circle-check';
+	import IconCircleX from '@tabler/icons-svelte/icons/circle-x';
+	import IconLoader2 from '@tabler/icons-svelte/icons/loader-2';
+	import { cn } from '../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		label,
+		status = 'pending',
+		detail,
+		expanded = false,
+		expandLabel = 'Show details',
+		collapseLabel = 'Hide details',
+		onToggle,
+		detailContent,
+		...restProps
+	}: ActivityRowProps = $props();
+
+	const hasDetail = $derived(Boolean(detail || detailContent));
+	const toggleLabel = $derived(expanded ? collapseLabel : expandLabel);
+</script>
+
+<div
+	bind:this={ref}
+	class={cn('flex w-full max-w-[25.5rem] flex-col gap-1', className)}
+	{...restProps}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<svelte:element
+		this={hasDetail ? 'button' : 'div'}
+		type={hasDetail ? 'button' : undefined}
+		class={cn(
+			'duration-fast focus-visible:ring-ring focus-visible:ring-offset-background flex w-full items-center gap-2 rounded-lg px-2 py-1 text-start transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
+			hasDetail && 'hover:bg-accent'
+		)}
+		aria-expanded={hasDetail ? expanded : undefined}
+		aria-label={hasDetail ? toggleLabel : undefined}
+		onclick={() => {
+			if (hasDetail) onToggle?.();
+		}}
+	>
+		<span class="text-muted-foreground flex size-4 shrink-0 items-center justify-center">
+			{#if status === 'running'}
+				<IconLoader2
+					class="size-4 animate-spin stroke-[1.333] motion-reduce:animate-none"
+					aria-hidden="true"
+				/>
+			{:else if status === 'done'}
+				<IconCircleCheck class="text-brand size-4 stroke-[1.333]" aria-hidden="true" />
+			{:else if status === 'failed'}
+				<IconCircleX class="text-destructive size-4 stroke-[1.333]" aria-hidden="true" />
+			{:else}
+				<IconCircle class="size-4 stroke-[1.333]" aria-hidden="true" />
+			{/if}
+		</span>
+		<span
+			class={cn(
+				'text-body min-w-0 flex-1 truncate',
+				status === 'running' || status === 'done' ? 'text-foreground' : 'text-muted-foreground'
+			)}
+		>
+			{label}
+		</span>
+		{#if hasDetail}
+			{#if expanded}
+				<IconChevronDown
+					class="text-muted-foreground size-4 shrink-0 stroke-[1.333]"
+					aria-hidden="true"
+				/>
+			{:else}
+				<IconChevronRight
+					class="text-muted-foreground size-4 shrink-0 stroke-[1.333] rtl:-scale-x-100"
+					aria-hidden="true"
+				/>
+			{/if}
+		{/if}
+	</svelte:element>
+	{#if expanded && (detail || detailContent)}
+		<div class="text-caption text-muted-foreground ps-6 pe-2">
+			{#if detailContent}
+				{@render detailContent()}
+			{:else if detail}
+				{detail}
+			{/if}
+		</div>
+	{/if}
+</div>

package/dist/components/chat/ActivityRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ActivityRowStatus = 'pending' | 'running' | 'done' | 'failed';
+export type ActivityRowProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    label: string;
+    status?: ActivityRowStatus;
+    detail?: string;
+    expanded?: boolean;
+    expandLabel?: string;
+    collapseLabel?: string;
+    onToggle?: () => void;
+    detailContent?: Snippet;
+};
+declare const ActivityRow: import("svelte").Component<ActivityRowProps, {}, "ref">;
+type ActivityRow = ReturnType<typeof ActivityRow>;
+export default ActivityRow;

package/dist/components/chat/ChatHeader.svelte

@@ -0,0 +1,114 @@
+<!--
+	Figma: Chat Header (component set 69:26, page Chat Header)
+-->
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import IconChevronDown from '@tabler/icons-svelte/icons/chevron-down';
+	import IconMessagePlus from '@tabler/icons-svelte/icons/message-plus';
+	import IconMessages from '@tabler/icons-svelte/icons/messages';
+	import IconPin from '@tabler/icons-svelte/icons/pin';
+	import IconX from '@tabler/icons-svelte/icons/x';
+	import { Button } from '../ui/button';
+	import { IconButton } from '../ui/icon-button';
+	import { cn } from '../../utils.js';
+
+	export type ChatHeaderLayout = 'panel' | 'fullscreen';
+
+	export type ChatHeaderMessages = {
+		newChat: string;
+		history: string;
+		pin: string;
+		close: string;
+		openHistory: string;
+	};
+
+	const defaultMessages: ChatHeaderMessages = {
+		newChat: 'New chat',
+		history: 'Chat history',
+		pin: 'Pin chat',
+		close: 'Close chat',
+		openHistory: 'Open chat history'
+	};
+
+	type Props = HTMLAttributes<HTMLElement> & {
+		ref?: HTMLElement | null;
+		class?: string;
+		layout?: ChatHeaderLayout;
+		title?: string;
+		status?: string;
+		showClose?: boolean;
+		messages?: Partial<ChatHeaderMessages>;
+		onTitleClick?: () => void;
+		onNewChat?: () => void;
+		onHistory?: () => void;
+		onPin?: () => void;
+		onClose?: () => void;
+	};
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		layout = 'panel',
+		title,
+		status,
+		showClose = false,
+		messages: messagesProp,
+		onTitleClick,
+		onNewChat,
+		onHistory,
+		onPin,
+		onClose,
+		...restProps
+	}: Props = $props();
+
+	const messages = $derived({ ...defaultMessages, ...messagesProp });
+	const displayTitle = $derived(title?.trim() || messages.newChat);
+</script>
+
+<header
+	bind:this={ref}
+	class={cn(
+		'flex h-14 shrink-0 items-center gap-1 px-3',
+		layout === 'panel' && 'w-chat-panel max-w-full',
+		layout === 'fullscreen' && 'max-w-content w-full',
+		className
+	)}
+	{...restProps}
+>
+	<Button
+		variant="ghost"
+		size="sm"
+		class="max-w-[min(100%,14rem)] shrink-0 gap-1 px-2"
+		onclick={onTitleClick}
+		aria-label={messages.openHistory}
+	>
+		<span class="truncate">{displayTitle}</span>
+		<IconChevronDown class="size-4 shrink-0 stroke-[1.333]" aria-hidden="true" />
+	</Button>
+
+	{#if status}
+		<span class="text-caption text-muted-foreground hidden shrink-0 sm:inline">{status}</span>
+	{/if}
+
+	<span class="min-w-0 flex-1" aria-hidden="true"></span>
+
+	<IconButton variant="ghost" label={messages.pin} onclick={onPin}>
+		<IconPin class="stroke-[1.333]" />
+	</IconButton>
+
+	<IconButton variant="ghost" label={messages.newChat} onclick={onNewChat}>
+		<IconMessagePlus class="stroke-[1.333]" />
+	</IconButton>
+
+	{#if onHistory}
+		<IconButton variant="ghost" label={messages.history} onclick={onHistory}>
+			<IconMessages class="stroke-[1.333]" />
+		</IconButton>
+	{/if}
+
+	{#if showClose}
+		<IconButton variant="ghost" label={messages.close} onclick={onClose}>
+			<IconX class="stroke-[1.333]" />
+		</IconButton>
+	{/if}
+</header>

package/dist/components/chat/ChatHeader.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type ChatHeaderLayout = 'panel' | 'fullscreen';
+export type ChatHeaderMessages = {
+    newChat: string;
+    history: string;
+    pin: string;
+    close: string;
+    openHistory: string;
+};
+type Props = HTMLAttributes<HTMLElement> & {
+    ref?: HTMLElement | null;
+    class?: string;
+    layout?: ChatHeaderLayout;
+    title?: string;
+    status?: string;
+    showClose?: boolean;
+    messages?: Partial<ChatHeaderMessages>;
+    onTitleClick?: () => void;
+    onNewChat?: () => void;
+    onHistory?: () => void;
+    onPin?: () => void;
+    onClose?: () => void;
+};
+declare const ChatHeader: import("svelte").Component<Props, {}, "ref">;
+type ChatHeader = ReturnType<typeof ChatHeader>;
+export default ChatHeader;