@widgetic/design-system 0.5.10 → 0.5.11

package/dist/components/ic/browser/BrowserInputController.svelte

@@ -149,11 +149,11 @@
    */
   async function openFileBrowser() {
     try {
-      console.log('Opening file browser with config:', {
-        fileTypes,
-        id: typeof value === 'object' ? value.id : undefined,
-        batch: 1
-      });
+      // console.log('Opening file browser with config:', {
+      //   fileTypes,
+      //   id: typeof value === 'object' ? value.id : undefined,
+      //   batch: 1
+      // });
 
       // TODO: When UI SDK is available, replace with actual implementation
       // const result = await window.uiSDK.mountComponent('file-browser', {
@@ -218,29 +218,14 @@
     }
   });
 
-  /**
-   * Checks if a file exists and is accessible
-   * @param url - URL to check
-   * @returns Promise that resolves to boolean
-   */
-  async function checkFileExists(url: string): Promise<boolean> {
-    try {
-      const response = await fetch(url, { method: 'HEAD' });
-      return response.ok;
-    } catch {
-      return false;
-    }
-  }
-
   // Update error state handling
-  async function updateErrorState(url: string) {
-    isChecking = true;
+  function updateErrorState(url: string) {
     if (!url) {
       hasError = true;
       isChecking = false;
       return;
     }
-    hasError = !(await checkFileExists(url));
+    hasError = false;
     isChecking = false;
   }
 
@@ -266,37 +251,6 @@
   // Update the reactive statement to use trimString
   $: displayLabel = value ? trimString(getFileName(value)) : (header?.label || label);
   $: previewUrl = getPreviewUrl(value);
-
-  // Add event listeners for media elements
-  function setupMediaElement(element: HTMLMediaElement) {
-    if (!element) return;
-    
-    element.addEventListener('play', () => {
-      console.log('Media started playing');
-      isPlaying = true;
-    });
-    
-    element.addEventListener('pause', () => {
-      console.log('Media paused');
-      isPlaying = false;
-    });
-    
-    element.addEventListener('ended', () => {
-      console.log('Media ended');
-      isPlaying = false;
-    });
-
-    // Add listener for when the media is stopped externally
-    element.addEventListener('timeupdate', () => {
-      if (element.paused && isPlaying) {
-        isPlaying = false;
-      }
-    });
-  }
-
-  // Update bindings to setup media elements
-  $: if (audioElement) setupMediaElement(audioElement);
-  $: if (videoElement) setupMediaElement(videoElement);
 </script>
 
 <!-- Main container with flex layout for title and preview -->
@@ -372,7 +326,8 @@
             src={previewUrl} 
             alt={displayLabel}
             class="w-full h-full object-cover"
-            on:error={() => hasError = true}
+            on:error={() => { hasError = true; isChecking = false; }}
+            on:load={() => { isChecking = false; }}
           />
         </div>
       {:else if getFileType(previewUrl) === 'video'}
@@ -384,7 +339,11 @@
             bind:this={videoElement}
             src={previewUrl} 
             class="w-full h-full object-cover"
-            on:error={() => hasError = true}
+            on:play={() => { isPlaying = true; }}
+            on:pause={() => { isPlaying = false; }}
+            on:ended={() => { isPlaying = false; }}
+            on:error={() => { hasError = true; isChecking = false; }}
+            on:loadeddata={() => { isChecking = false; }}
           >
             <track kind="captions" />
           </video>
@@ -419,7 +378,11 @@
           <audio 
             bind:this={audioElement} 
             src={previewUrl}
-            on:error={() => hasError = true}
+            on:play={() => { isPlaying = true; }}
+            on:pause={() => { isPlaying = false; }}
+            on:ended={() => { isPlaying = false; }}
+            on:error={() => { hasError = true; isChecking = false; }}
+            on:loadeddata={() => { isChecking = false; }}
           >
             <track kind="captions" />
           </audio>

package/dist/components/ic/browser/BrowserInputController.svelte.d.ts

@@ -1,29 +1,34 @@
-import { SvelteComponentTyped } from "svelte";
 import type { InputControllerConfig } from '../types';
-declare const __propDef: {
-    props: {
-        header?: {
-            label: string;
-            helpText?: string;
-        } | undefined;
-        label?: string;
-        value?: string | {
-            id: string;
-            file: string;
-            url: string;
-        };
-        onChange?: (newValue: string) => void;
-        config?: InputControllerConfig;
+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 BrowserInputControllerProps = typeof __propDef.props;
-export type BrowserInputControllerEvents = typeof __propDef.events;
-export type BrowserInputControllerSlots = typeof __propDef.slots;
-export default class BrowserInputController extends SvelteComponentTyped<BrowserInputControllerProps, BrowserInputControllerEvents, BrowserInputControllerSlots> {
-    get onChange(): (newValue: string) => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BrowserInputController: $$__sveltets_2_IsomorphicComponent<{
+    header?: {
+        label: string;
+        helpText?: string;
+    } | undefined;
+    label?: string;
+    value?: string | {
+        id: string;
+        file: string;
+        url: string;
+    };
+    onChange?: (newValue: string) => void;
+    config?: InputControllerConfig;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    onChange: (newValue: string) => void;
+}, string>;
+type BrowserInputController = InstanceType<typeof BrowserInputController>;
+export default BrowserInputController;

package/dist/components/modals/ActionModal.svelte

@@ -76,7 +76,7 @@
     dispatch('confirm', { items });
    
     // Close the modal immediately to allow user to continue working
-    // isOpen = false;
+    isOpen = false;
   }
 
   // Support for restoring modal state
@@ -107,8 +107,8 @@
 
   // Only log when modal is actually open
   $: if (isOpen && isInitialized && items && items.length > 0 && showLogs) {
-    console.log('Items in open modal:', items);
-    console.log('First item name:', items[0]?.name);
+    // console.log('Items in open modal:', items);
+    // console.log('First item name:', items[0]?.name);
   }
 </script>
 
@@ -143,31 +143,24 @@
     {#if hasButtons}
     <div class="buttons-container flex justify-center gap-4 mb-[4px]">
         {#if cancelLabel}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <div 
-            class="cancel-button modal-btn-secondary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--grey1))] hover:bg-[hsl(var(--grey2))] text-[hsl(var(--grey7))] rounded-full" 
-            on:click={handleClose}
-            role="button"
-            tabindex="0"
+          <Button 
+            type="button"
+            variant="secondary"
+            class="cancel-button modal-btn-secondary !h-[34px] !rounded-[100px] px-4 py-2" 
+            onclick={handleClose}
           >
             {cancelLabel}
-          </div>
+          </Button>
         {/if}
         {#if confirmLabel}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <!-- svelte-ignore a11y-no-static-element-interactions -->
-          <div 
-            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white rounded-full' : 'confirm-button modal-btn-primary !h-[34px] radius-pill widgetic-radius flex items-center justify-center px-4 py-2 cursor-pointer bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white rounded-full'}"
-            on:click={handleConfirm}
-            role="button"
-            tabindex="0"
-            class:opacity-50={isConfirmDisabled}
-            class:cursor-not-allowed={isConfirmDisabled}
-            class:pointer-events-none={isConfirmDisabled}
+          <Button 
+            type="button"
+            class="{confirmVariant === 'attention' ? 'confirm-button modal-btn-attention !h-[34px] !rounded-[100px] px-4 py-2 bg-[hsl(var(--error))] hover:bg-[hsl(var(--error-dark))] text-white' : 'confirm-button modal-btn-primary !h-[34px] !rounded-[100px] px-4 py-2 bg-[hsl(var(--forest-green))] hover:bg-[hsl(var(--forest-green-dark))] text-white'}"
+            onclick={handleConfirm}
+            disabled={isConfirmDisabled}
           >
             {confirmLabel}
-          </div>
+          </Button>
         {/if}
       </div>
     {/if}

package/dist/components/modals/ActionModal.svelte.d.ts

@@ -1,38 +1,49 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        isOpen?: boolean;
-        items?: any[];
-        title?: string;
-        message?: string;
-        confirmLabel?: string;
-        onConfirm?: () => Promise<any>;
-        cancelLabel?: string;
-        onCancel?: () => void;
-        width?: string;
-        height?: string;
-        target?: string;
-        isConfirmDisabled?: boolean;
-        confirmVariant?: "primary" | "attention";
-        actionType?: string;
-        modalType?: string;
-        modalData?: 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;
     };
-    events: {
-        cancel: CustomEvent<any>;
-        confirm: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ActionModalProps = typeof __propDef.props;
-export type ActionModalEvents = typeof __propDef.events;
-export type ActionModalSlots = typeof __propDef.slots;
-export default class ActionModal extends SvelteComponentTyped<ActionModalProps, ActionModalEvents, ActionModalSlots> {
+    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 ActionModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    class?: string;
+    style?: string;
+    isOpen?: boolean;
+    items?: any[];
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    onConfirm?: () => Promise<any>;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    width?: string;
+    height?: string;
+    target?: string;
+    isConfirmDisabled?: boolean;
+    confirmVariant?: "primary" | "attention";
+    actionType?: string;
+    modalType?: string;
+    modalData?: any;
+}, {
+    default: {};
+}>, {
+    cancel: CustomEvent<any>;
+    confirm: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ActionModal = InstanceType<typeof ActionModal>;
+export default ActionModal;

package/dist/components/modals/BaseModal.svelte

@@ -7,7 +7,7 @@
 
   // Design system componentsimports
   import { Button, WScrollArea, Portal } from '..';
-  import { IconX } from '../../icons';
+  import { IconX } from '@tabler/icons-svelte';
 
   // Modal store
   import { modalState, openModal, closeModal } from './modalStore';
@@ -89,15 +89,15 @@
   // Check stored state on mount and reopen if needed
   onMount(() => {
     if ($modalState.isOpen && !open) {
-      if(showLogs) console.log('Checking modal restoration:', {
-        currentType: modalType,
-        storedType: $modalState.modalType,
-        storedData: $modalState.data
-      });
+      // if(showLogs) console.log('Checking modal restoration:', {
+      //   currentType: modalType,
+      //   storedType: $modalState.modalType,
+      //   storedData: $modalState.data
+      // });
       
       // Only reopen if this is the correct modal type
       if ($modalState.modalType === modalType) {
-        if(showLogs) console.log('Restoring modal state for:', modalType);
+        // if(showLogs) console.log('Restoring modal state for:', modalType);
         open = true;
         modalData = $modalState.data;
         dispatch('restore', $modalState.data);
@@ -134,7 +134,7 @@
     // update the conetent holder height
     // setTimeout(() => {
       allContentHeight = 2 * contentPadding + titleHeight + contentHolderHeight;
-      if(showLogs) console.log('Modal current height:', allContentHeight);
+      // if(showLogs) console.log('Modal current height:', allContentHeight);
       // let availableHeight = modalHeight - 2 * contentPadding;
       // if(showLogs) console.log('Modal current height:', allContentHeight, availableHeight);
       // contentHolderHeight = allContentHeight > availableHeight ? (availableHeight - titleHeight) + 'px' : 'auto';
@@ -186,9 +186,11 @@
   })();
 
   function handleKeydown(event: KeyboardEvent) {
+    if (!open) return;
+
     // Only log keyboard events that we actually handle
     if (['Backspace', 'Escape', 'Space'].includes(event.key)) {
-      if(showLogs) console.log('Modal handling key:', event.key, 'Target:', (event.target as HTMLElement).tagName);
+      // if(showLogs) console.log('Modal handling key:', event.key, 'Target:', (event.target as HTMLElement).tagName);
     }
     
     const target = event.target as HTMLElement;
@@ -218,7 +220,7 @@
   }
 
   function handleClose() {
-    if(showLogs) console.log('handleClose');
+    // if(showLogs) console.log('handleClose');
 
     // change the open state to false
     open = false;
@@ -238,7 +240,7 @@
   $: if (open !== previousOpen) {
     previousOpen = open;
     
-    if(showLogs) console.log('Modal open state changed:', { open, modalType, modalData });
+    // if(showLogs) console.log('Modal open state changed:', { open, modalType, modalData });
     
     // Open the modal if the open state is true
     if (open) {
@@ -258,7 +260,7 @@
     
     // Only handle clicks directly on the backdrop
     if (event.target === event.currentTarget) {
-      if(showLogs) console.log('Modal backdrop clicked!', event.type);
+      // if(showLogs) console.log('Modal backdrop clicked!', event.type);
       handleClose();
     }
   }

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -1,34 +1,38 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        width?: string;
-        height?: string;
-        modalType?: string | undefined;
-        modalData?: any;
-        target?: string;
-        title?: string | undefined;
-        titlePadding?: "small" | "large";
-        open?: boolean;
-        enableSpaceKey?: boolean;
-        isSelected?: boolean;
-        showScroll?: boolean;
-        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;
     };
-    events: {
-        click: PointerEvent;
-        restore: CustomEvent<any>;
-        spaceKey: CustomEvent<any>;
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type BaseModalProps = typeof __propDef.props;
-export type BaseModalEvents = typeof __propDef.events;
-export type BaseModalSlots = typeof __propDef.slots;
-export default class BaseModal extends SvelteComponentTyped<BaseModalProps, BaseModalEvents, BaseModalSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    width?: string;
+    height?: string;
+    modalType?: string | undefined;
+    modalData?: any;
+    target?: string;
+    title?: string | undefined;
+    titlePadding?: "small" | "large";
+    open?: boolean;
+    enableSpaceKey?: boolean;
+    isSelected?: boolean;
+    showScroll?: boolean;
+    children: any;
+}, {
+    click: PointerEvent;
+    restore: CustomEvent<any>;
+    spaceKey: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BaseModal = InstanceType<typeof BaseModal>;
+export default BaseModal;

package/dist/components/modals/NewItemDialog.svelte

@@ -101,7 +101,7 @@
       return;
     }
     
-    console.log(`Creating ${itemType}:`, { itemName, path: currentPath });
+    // console.log(`Creating ${itemType}:`, { itemName, path: currentPath });
     dispatch('create', { itemName: itemName.trim(), path: currentPath });
     handleClose();
   }

package/dist/components/modals/NewItemDialog.svelte.d.ts

@@ -1,35 +1,39 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        class?: string;
-        style?: string;
-        isOpen?: boolean;
-        title?: string;
-        showTitle?: boolean;
-        itemType?: string;
-        placeholder?: string;
-        target?: string;
-        currentPath?: string[];
-        currentPathNames?: string[];
-        confirmLabel?: string;
-        cancelLabel?: string;
-        modalType?: string;
-        modalWidth?: string;
-        modalHeight?: string;
-        maxLength?: number;
-        modalData?: Record<string, 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;
     };
-    events: {
-        create: CustomEvent<any>;
-        cancel: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type NewItemDialogProps = typeof __propDef.props;
-export type NewItemDialogEvents = typeof __propDef.events;
-export type NewItemDialogSlots = typeof __propDef.slots;
-export default class NewItemDialog extends SvelteComponentTyped<NewItemDialogProps, NewItemDialogEvents, NewItemDialogSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const NewItemDialog: $$__sveltets_2_IsomorphicComponent<{
+    class?: string;
+    style?: string;
+    isOpen?: boolean;
+    title?: string;
+    showTitle?: boolean;
+    itemType?: string;
+    placeholder?: string;
+    target?: string;
+    currentPath?: string[];
+    currentPathNames?: string[];
+    confirmLabel?: string;
+    cancelLabel?: string;
+    modalType?: string;
+    modalWidth?: string;
+    modalHeight?: string;
+    maxLength?: number;
+    modalData?: Record<string, any>;
+}, {
+    create: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type NewItemDialog = InstanceType<typeof NewItemDialog>;
+export default NewItemDialog;

package/dist/components/modals/Portal.svelte

@@ -19,7 +19,7 @@
     /**
      * Local Variables
      */
-    let host: HTMLElement; // host(target) container of the portal: parent target of the portal
+    let host: HTMLElement | null = null; // host(target) container of the portal: parent target of the portal
     let portal: HTMLElement; // root portal element
     /** Only remove host on destroy if Portal created it (never remove editor portal slots). */
     let hostCreatedByPortal = false;
@@ -27,10 +27,10 @@
     let showLogs = false;
 
     onMount(() => {
-        if(showLogs) console.log('DS Portal target:', target);
+        // if(showLogs) console.log('DS Portal target:', target);
         // If target is an HTML element, use it directly
         if (target instanceof HTMLElement) {
-            if(showLogs) console.log('DS Portal target is an HTML element:', target);
+            // if(showLogs) console.log('DS Portal target is an HTML element:', target);
             host = target;
         } else {
             const targetId = (target || defaultTarget).replace(/^#/, '');
@@ -39,7 +39,7 @@
             if (!host) {
                 host = document.querySelector(`.${targetId}`) as HTMLElement | null;
             }
-            if(showLogs) console.log('DS Portal host:', host, 'target:', target);
+            // if(showLogs) console.log('DS Portal host:', host, 'target:', target);
 
             // Create host container if it doesn't exist
             if (!host) {
@@ -51,10 +51,10 @@
             }
         }
 
-        if(showLogs) console.log('DS Portal target:', target, 'host:', host, 'portal:', portal);
+        // if(showLogs) console.log('DS Portal target:', target, 'host:', host, 'portal:', portal);
 
         // Move the portal content to the host
-        if (portal) host.appendChild(portal);
+        if (portal && host) host.appendChild(portal);
     });
 
     onDestroy(() => {

package/dist/components/modals/Portal.svelte.d.ts

@@ -1,23 +1,34 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        target?: string | HTMLElement | undefined;
-        clickThrough?: boolean;
-        class?: string;
-        style?: string;
-        clientWidth?: number;
-        clientHeight?: number;
+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 PortalProps = typeof __propDef.props;
-export type PortalEvents = typeof __propDef.events;
-export type PortalSlots = typeof __propDef.slots;
-export default class Portal extends SvelteComponentTyped<PortalProps, PortalEvents, PortalSlots> {
+    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 Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    target?: string | HTMLElement | undefined;
+    clickThrough?: boolean;
+    class?: string;
+    style?: string;
+    clientWidth?: number;
+    clientHeight?: number;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Portal = InstanceType<typeof Portal>;
+export default Portal;