@widgetic/design-system 0.5.10 → 0.5.11

package/dist/components/CopyableHeader.svelte

@@ -32,8 +32,7 @@ const dispatch = createEventDispatcher();
  */
 // import { toast, Button, Tooltip, Portal } from '@widgetic/design-system/components';
 import { toast, Button, Tooltip, Portal } from './';
-// import { IconCopy, IconHelp } from '@widgetic/design-system/icons';
-import { IconCopy, IconHelp } from '../icons';
+import { IconCopy, IconHelp } from '@tabler/icons-svelte';
 
 /**
  * COMPONENT PROPS
@@ -64,6 +63,7 @@ let mouseY = 0;
 let showHelpTooltip = false;
 let showCopyTooltip = false;
 let tooltipDebounce = false;
+let contentElement: HTMLDivElement | null = null;
 
 /**
  * MOUSE EVENTS HANDLERS
@@ -115,8 +115,7 @@ async function handleCopyButtonClick(e: MouseEvent) {
   showCopyTooltip = false;
   setTooltipDebounce();
   
-  // Find the content element and select all text
-  const contentElement = document.querySelector('.copyable-content-area');
+  // Select all text in content element
   if (contentElement) {
     const selection = window.getSelection();
     const range = document.createRange();
@@ -312,6 +311,7 @@ function showToast(type: 'success' | 'error', message: string, options = {}) {
   <div class="px-6 pb-6">
     <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
     <div 
+      bind:this={contentElement}
       class="copyable-content-area text-[14px] w-full text-left bg-white relative {monospaceContent ? 'font-mono' : ''}"
       style="
         padding: 16px;

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

@@ -1,36 +1,40 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-         * COMPONENT PROPS
-         */ class?: string;
-        style?: string;
-        headerText?: string;
-        content?: string;
-        helpText?: string;
-        helpUrl?: string;
-        showHelp?: boolean;
-        monospaceContent?: boolean;
-        showStandaloneCopyButton?: boolean;
-        standaloneCopyButtonText?: string;
-        showButtonText?: boolean;
-        buttonClass?: string;
-        showInternalToast?: boolean;
-        headerTextClass?: string;
-        headerBackgroundColor?: string;
-        contentBorderColor?: string;
+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;
     };
-    events: {
-        copy: CustomEvent<any>;
-        copyError: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CopyableHeaderProps = typeof __propDef.props;
-export type CopyableHeaderEvents = typeof __propDef.events;
-export type CopyableHeaderSlots = typeof __propDef.slots;
-export default class CopyableHeader extends SvelteComponentTyped<CopyableHeaderProps, CopyableHeaderEvents, CopyableHeaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const CopyableHeader: $$__sveltets_2_IsomorphicComponent<{
+    /**
+     * COMPONENT PROPS
+     */ class?: string;
+    style?: string;
+    headerText?: string;
+    content?: string;
+    helpText?: string;
+    helpUrl?: string;
+    showHelp?: boolean;
+    monospaceContent?: boolean;
+    showStandaloneCopyButton?: boolean;
+    standaloneCopyButtonText?: string;
+    showButtonText?: boolean;
+    buttonClass?: string;
+    showInternalToast?: boolean;
+    headerTextClass?: string;
+    headerBackgroundColor?: string;
+    contentBorderColor?: string;
+}, {
+    copy: CustomEvent<any>;
+    copyError: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CopyableHeader = InstanceType<typeof CopyableHeader>;
+export default CopyableHeader;

package/dist/components/EmptyState.svelte

@@ -13,8 +13,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
 
-  // import { IconExclamationCircle } from '@widgetic/design-system/icons';
-  import { IconExclamationCircle } from '../icons';
+  import { IconExclamationCircle } from '@tabler/icons-svelte';
   
   /**
    * Component Props
@@ -74,7 +73,7 @@
   });
 </script>
 
-<div class="empty-state-container {className ? className + ' ' : ''}w-full" style="height: {height} {style}">
+<div class="empty-state-container {className ? className + ' ' : ''}w-full" style="height: {height}; {style}">
   <div class="empty-state-content" bind:this={contentContainer}>
     {#if shouldShowIcon}
       <div class="icon-container">
@@ -118,7 +117,7 @@
 
   /* Icon container to prevent scaling */
   .icon-container {
-    shrink: 0;
+    flex-shrink: 0;
     width: 24px;
     height: 24px;
     display: flex;

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

@@ -1,33 +1,37 @@
-import { SvelteComponentTyped } from "svelte";
-import { IconExclamationCircle } from '../icons';
-declare const __propDef: {
-    props: {
-        /**
-           * Component Props
-           * @prop {string} message - The message to display in the empty state
-           * @prop {string} height - The height of the empty state container (default: '50vh')
-           * @prop {boolean} showIcon - Whether to show the icon (default: true)
-           * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
-           * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
-           */ class?: string;
-        style?: string;
-        message?: string;
-        height?: string;
-        showIcon?: boolean;
-        iconColor?: string;
-        textColor?: string;
-        icon?: typeof IconExclamationCircle;
+import { IconExclamationCircle } from '@tabler/icons-svelte';
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        action: {};
-    };
-};
-export type EmptyStateProps = typeof __propDef.props;
-export type EmptyStateEvents = typeof __propDef.events;
-export type EmptyStateSlots = typeof __propDef.slots;
-export default class EmptyState extends SvelteComponentTyped<EmptyStateProps, EmptyStateEvents, EmptyStateSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const EmptyState: $$__sveltets_2_IsomorphicComponent<{
+    /**
+       * Component Props
+       * @prop {string} message - The message to display in the empty state
+       * @prop {string} height - The height of the empty state container (default: '50vh')
+       * @prop {boolean} showIcon - Whether to show the icon (default: true)
+       * @prop {string} iconColor - The color of the icon (default: 'hsl(var(--grey3))')
+       * @prop {string} textColor - The color of the text (default: 'hsl(var(--grey3))')
+       */ class?: string;
+    style?: string;
+    message?: string;
+    height?: string;
+    showIcon?: boolean;
+    iconColor?: string;
+    textColor?: string;
+    icon?: typeof IconExclamationCircle;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    action: {};
+}, {}, string>;
+type EmptyState = InstanceType<typeof EmptyState>;
+export default EmptyState;

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

@@ -1,21 +1,25 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        /** Primary status line */ title?: string;
-        /** Optional secondary line; pass empty string to hide */ subtitle?: string;
-        size?: "sm" | "md" | "lg";
-        /** Absolute overlay with opaque backdrop so idle placeholders cannot show through */ overlay?: boolean;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type GenerateLoaderProps = typeof __propDef.props;
-export type GenerateLoaderEvents = typeof __propDef.events;
-export type GenerateLoaderSlots = typeof __propDef.slots;
-export default class GenerateLoader extends SvelteComponentTyped<GenerateLoaderProps, GenerateLoaderEvents, GenerateLoaderSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const GenerateLoader: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    /** Primary status line */ title?: string;
+    /** Optional secondary line; pass empty string to hide */ subtitle?: string;
+    size?: "sm" | "md" | "lg";
+    /** Absolute overlay with opaque backdrop so idle placeholders cannot show through */ overlay?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type GenerateLoader = InstanceType<typeof GenerateLoader>;
+export default GenerateLoader;

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

@@ -1,22 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
 import type { FullAutoFill } from 'svelte/elements';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        value?: string | undefined;
-        placeholder?: string | undefined;
-        name?: string | undefined;
-        autocomplete?: FullAutoFill | undefined;
-        disabled?: boolean | undefined;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PasswordInputProps = typeof __propDef.props;
-export type PasswordInputEvents = typeof __propDef.events;
-export type PasswordInputSlots = typeof __propDef.slots;
-export default class PasswordInput extends SvelteComponentTyped<PasswordInputProps, PasswordInputEvents, PasswordInputSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const PasswordInput: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    value?: string | undefined;
+    placeholder?: string | undefined;
+    name?: string | undefined;
+    autocomplete?: FullAutoFill | undefined;
+    disabled?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PasswordInput = InstanceType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/ThumbHashImage.svelte

@@ -28,48 +28,56 @@
      **/
 
     // Convert hex string to base64
-    function hexToBase64(hexstring: string) {
-        if (showLogs) console.log('ThumbHashImage: Converting hash to base64', { 
-            input: hexstring,
-            src,
-            alt 
-        });
+    function hexToBase64(hexstring: string | null | undefined): string {
+        if (!hexstring || typeof hexstring !== 'string') return '';
+
+        // if (showLogs) console.log('ThumbHashImage: Converting hash to base64', { 
+        //     input: hexstring,
+        //     src,
+        //     alt 
+        // });
         
-        const hex = hexstring.replace(/\s+/g, '');
-        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);
+        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 '';
         }
-        const result = btoa(String.fromCharCode.apply(null, Array.from(bytes)));
-        if (showLogs) console.log('ThumbHashImage: Base64 conversion result', { result });
-        return result;
     }
 
     $: {
-        if (showLogs) console.log('ThumbHashImage: Props updated', { 
-            src, 
-            alt, 
-            thumbhash,
-            shouldShowThumbhash,
-            browser,
-            imageLoaded,
-            'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
-        });
+        // 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);
     }
 
     onMount(async () => {
-        if (showLogs) console.log('ThumbHashImage: Component mounted', { 
-            browser,
-            'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
-        });
+        // if (showLogs) console.log('ThumbHashImage: Component mounted', { 
+        //     browser,
+        //     'customElements.get("thumb-hash")': browser ? customElements.get('thumb-hash') : undefined
+        // });
 
         if (browser && !customElements.get('thumb-hash')) {
-            if (showLogs) console.log('ThumbHashImage: Initializing ThumbHashElement');
+            // 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');
+                // if (showLogs) console.log('ThumbHashImage: ThumbHashElement initialized successfully');
             } catch (error) {
                 if (showLogs) console.error('ThumbHashImage: Failed to initialize ThumbHashElement', error);
             }
@@ -77,7 +85,7 @@
 
         // Check if image is already cached
         if (imageElement?.complete) {
-            if (showLogs) console.log('ThumbHashImage: Image already cached');
+            // if (showLogs) console.log('ThumbHashImage: Image already cached');
             imageLoaded = true;
             shouldShowThumbhash = false;
             if (onLoad) onLoad();
@@ -90,7 +98,7 @@
     });
 
     function handleImageLoad() {
-        if (showLogs) console.log('ThumbHashImage: Image loaded', { src });
+        // if (showLogs) console.log('ThumbHashImage: Image loaded', { src });
         imageLoaded = true;
         // Delay removal of thumbhash so that the image fades in over it
         setTimeout(() => {
@@ -116,6 +124,8 @@
         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}

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

@@ -1,22 +1,26 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        src: string;
-        alt?: string;
-        thumbhash: string;
-        class_?: string;
-        style?: string;
-        roundedCorners?: string;
-        onLoad?: (() => void) | undefined;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ThumbHashImageProps = typeof __propDef.props;
-export type ThumbHashImageEvents = typeof __propDef.events;
-export type ThumbHashImageSlots = typeof __propDef.slots;
-export default class ThumbHashImage extends SvelteComponentTyped<ThumbHashImageProps, ThumbHashImageEvents, ThumbHashImageSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ThumbHashImage: $$__sveltets_2_IsomorphicComponent<{
+    src: string;
+    alt?: string;
+    thumbhash: string;
+    class_?: string;
+    style?: string;
+    roundedCorners?: string;
+    onLoad?: (() => void) | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThumbHashImage = InstanceType<typeof ThumbHashImage>;
+export default ThumbHashImage;

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

@@ -1,27 +1,38 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        viewPortClass?: string;
-        orientation?: "horizontal" | "vertical";
-        scrollOutside?: boolean;
-        scrollbarWidth?: number;
-        scrollbarYClasses?: string;
-        scrollHideDelay?: number;
-        type?: any;
-        element?: HTMLElement | null;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type WScrollAreaProps = typeof __propDef.props;
-export type WScrollAreaEvents = typeof __propDef.events;
-export type WScrollAreaSlots = typeof __propDef.slots;
-export default class WScrollArea extends SvelteComponentTyped<WScrollAreaProps, WScrollAreaEvents, WScrollAreaSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const WScrollArea: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    style?: string;
+    viewPortClass?: string;
+    orientation?: "horizontal" | "vertical";
+    scrollOutside?: boolean;
+    scrollbarWidth?: number;
+    scrollbarYClasses?: string;
+    scrollHideDelay?: number;
+    type?: any;
+    element?: HTMLElement | null;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type WScrollArea = InstanceType<typeof WScrollArea>;
+export default WScrollArea;

package/dist/components/debug-grid/DebugGrid.svelte

@@ -43,7 +43,7 @@
    * LIFECYCLE HOOKS
    **/
   onMount(() => {
-    if (showLogs) console.log('DebugGrid: Mounted!');
+    // if (showLogs) console.log('DebugGrid: Mounted!');
 
     // Set mounted to true
     mounted = true;

package/dist/components/debug-grid/DebugGrid.svelte.d.ts

@@ -1,28 +1,32 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /***
-           * COMPONENT PROPS
-           **/ class?: string;
-        gridClass?: string;
-        headerGridClass?: string;
-        mainGridClass?: string;
-        headerHeight?: string | undefined;
-        portalTarget?: string;
-        columns?: number;
-        columnWidth?: number;
-        isMobile?: boolean;
-        isTablet?: boolean;
-        isDesktop?: boolean;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DebugGridProps = typeof __propDef.props;
-export type DebugGridEvents = typeof __propDef.events;
-export type DebugGridSlots = typeof __propDef.slots;
-export default class DebugGrid extends SvelteComponentTyped<DebugGridProps, DebugGridEvents, DebugGridSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const DebugGrid: $$__sveltets_2_IsomorphicComponent<{
+    /***
+       * COMPONENT PROPS
+       **/ class?: string;
+    gridClass?: string;
+    headerGridClass?: string;
+    mainGridClass?: string;
+    headerHeight?: string | undefined;
+    portalTarget?: string;
+    columns?: number;
+    columnWidth?: number;
+    isMobile?: boolean;
+    isTablet?: boolean;
+    isDesktop?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DebugGrid = InstanceType<typeof DebugGrid>;
+export default DebugGrid;