@widgetic/design-system 0.3.68

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

@@ -0,0 +1,481 @@
+<script lang="ts">
+  /**
+   * BrowserInputController Component
+   * A specialized input controller for file browsing and media preview functionality.
+   * Handles various file types (image, video, audio, document) with appropriate previews
+   * and playback controls.
+   */
+
+  // Svelte imports
+  import { onDestroy } from 'svelte';
+
+  // Shadcn UI Components
+  import * as Tooltip from '../../ui/tooltip';
+
+  // Tabler Icons imports
+  import { IconPlayerPlayFilled, IconPlayerPauseFilled } from '@tabler/icons-svelte';
+
+  // Import the icons from the local folder
+  // const iconsPath = '../icons/';
+  import documentIcon from './icons/document.svg';
+  import playerPlayIcon from './icons/player-play.svg';
+  import playerPauseIcon from './icons/player-pause.svg';
+  import folderIcon from './icons/folder.svg';
+  import audioIcon from './icons/audio.svg';
+  import errorIcon from './icons/error.svg';
+  import infoIcon from './icons/info-icon.svg';
+
+  const icons = {
+    playerPlay: playerPlayIcon,
+    playerPause: playerPauseIcon,
+    folder: folderIcon,
+    document: documentIcon,
+    audio: audioIcon,
+    error: errorIcon,
+    info: infoIcon
+  }
+  
+  // utils imports
+  import MediaManager from '../../../utils/MediaManager';
+
+  // Type Definitions
+  interface FileValue {
+    id: string;
+    file: string;
+    url: string;
+  }
+
+  // Component props with default values
+  export let header: { label: string; helpText?: string } | undefined = undefined;
+  export let label: string = '';
+  export let value: string | FileValue = '';
+  export const onChange: (newValue: string) => void = () => {};
+
+  // Config setup: extract allowed file types from config or default to all files
+  import type { InputControllerConfig } from '../types';
+  export let config: InputControllerConfig = {};
+  const fileTypes = config.fileTypes || ['*'];
+  
+  // Media element references for audio/video playback
+  let audioElement: HTMLAudioElement | null = null;
+  let videoElement: HTMLVideoElement | null = null;
+  let isPlaying = false;
+
+  // Add loading state
+  let isChecking = true;
+  let hasError = false;
+
+  let mouseX = 0;
+  let mouseY = 0;
+  let showHelp = false;
+  let showHelpTimeout: ReturnType<typeof setTimeout>;
+
+  function handleMouseEnter(event: MouseEvent) {
+    mouseX = event.clientX;
+    mouseY = event.clientY;
+    showHelpTimeout = setTimeout(() => {
+      showHelp = true;
+    }, 250);
+  }
+
+  function handleMouseMove(event: MouseEvent) {
+    mouseX = event.clientX;
+    mouseY = event.clientY;
+  }
+
+  function handleMouseLeave() {
+    clearTimeout(showHelpTimeout);
+    showHelp = false;
+  }
+
+  onDestroy(() => {
+    clearTimeout(showHelpTimeout);
+  });
+
+  /**
+   * Extracts filename from file value
+   * @param value - String path or FileValue object
+   * @returns Filename or empty string if invalid
+   */
+  function getFileName(value: string | FileValue | null | undefined): string {
+    if (!value) return '';
+    if (typeof value === 'object' && value.file) {
+      return value.file;
+    }
+    if (typeof value === 'string') {
+      try {
+        const parts = value.split('/');
+        return parts[parts.length - 1] || '';
+      } catch (error) {
+        console.error('Error extracting filename:', error);
+        return '';
+      }
+    }
+    return '';
+  }
+
+  /**
+   * Gets the URL for preview from the value
+   * @param value - String path or FileValue object
+   * @returns URL for preview
+   */
+  function getPreviewUrl(value: string | FileValue | null | undefined): string {
+    if (!value) return '';
+    if (typeof value === 'object' && value.url) {
+      return value.url;
+    }
+    return typeof value === 'string' ? value : '';
+  }
+
+  /**
+   * Determines the type of file based on its extension
+   * @param path - File path to analyze
+   * @returns File type category or 'unknown'
+   */
+  function getFileType(path: string | null | undefined): 'image' | 'video' | 'audio' | 'document' | 'unknown' {
+    if (!path || typeof path !== 'string') return 'unknown';
+    
+    const ext = path.split('.').pop()?.toLowerCase() || '';
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) return 'image';
+    if (['mp4', 'webm', 'ogg'].includes(ext)) return 'video';
+    if (['mp3', 'wav', 'ogg'].includes(ext)) return 'audio';
+    if (['pdf', 'doc', 'docx', 'txt'].includes(ext)) return 'document';
+    return 'unknown';
+  }
+
+  /**
+   * Opens the file browser using UI SDK
+   * Handles file selection and updates the value
+   */
+  async function openFileBrowser() {
+    try {
+      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', {
+      //   container: '#file-browser',
+      //   config: {
+      //     fileTypes,
+      //     selectedFileId: typeof value === 'object' ? value.id : undefined,
+      //     batch: 1
+      //   },
+      //   callbacks: {
+      //     onSelect: (file) => {
+      //       if (file) {
+      //         onChange({
+      //           id: file.id,
+      //           file: file.name,
+      //           url: file.url
+      //         });
+      //       }
+      //     },
+      //     onError: (error) => {
+      //       console.error('File Browser error:', error);
+      //     }
+      //   }
+      // });
+
+    } catch (error) {
+      console.error('Error opening file browser:', error);
+    }
+  }
+
+  /**
+   * Toggles playback for audio/video elements
+   * Uses MediaManager to ensure only one plays at a time
+   */
+  function togglePlayback() {
+    if (audioElement) {
+      if (isPlaying) {
+        MediaManager.pause(audioElement);
+      } else {
+        MediaManager.play(audioElement);
+      }
+      isPlaying = !isPlaying;
+    } else if (videoElement) {
+      if (isPlaying) {
+        MediaManager.pause(videoElement);
+      } else {
+        MediaManager.play(videoElement);
+      }
+      isPlaying = !isPlaying;
+    }
+  }
+
+  // Update cleanup to use MediaManager
+  onDestroy(() => {
+    if (audioElement) {
+      MediaManager.cleanup(audioElement);
+      audioElement = null;
+    }
+    if (videoElement) {
+      MediaManager.cleanup(videoElement);
+      videoElement = null;
+    }
+  });
+
+  /**
+   * 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;
+    if (!url) {
+      hasError = true;
+      isChecking = false;
+      return;
+    }
+    hasError = !(await checkFileExists(url));
+    isChecking = false;
+  }
+
+  // Watch previewUrl changes
+  $: if (previewUrl) {
+    updateErrorState(previewUrl);
+  } else {
+    hasError = false;
+    isChecking = false;
+  }
+
+  /**
+   * Trims a string to a maximum length and adds ellipsis if needed
+   * @param str - String to trim
+   * @param maxLength - Maximum length before trimming
+   * @returns Trimmed string with ellipsis if needed
+   */
+  function trimString(str: string, maxLength: number = 30): string {
+    if (str.length <= maxLength) return str;
+    return str.substring(0, maxLength - 3) + '...';
+  }
+
+  // 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 -->
+<div class="browser-input-container flex items-center justify-between min-h-[54px] gap-4 border">
+  <!-- Title container with help text -->
+  <div class="flex items-center gap-1.5 flex-1 min-w-0">
+    <span 
+      class="text-sm font-medium transition-all browser-input-label truncate underline decoration-gray-400"
+      role="button"
+      tabindex="0"
+      on:click={openFileBrowser}
+      on:keydown={(e) => e.key === 'Enter' && openFileBrowser()}
+      aria-label={`Select ${value ? getFileName(value) : (header?.label || label)}`}
+      title={value ? getFileName(value) : (header?.label || label)}>
+      {displayLabel}
+    </span>
+    
+    {#if header?.helpText}
+      <div class="flex items-center opacity-0 group-hover:opacity-60 transition-opacity duration-200" style="z-index: 99999;">
+      <Tooltip.Provider>
+        <Tooltip.Root open={showHelp}>
+          <Tooltip.Trigger>
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <span 
+              class="info-icon-container inline-flex cursor-help"
+              on:mouseenter={handleMouseEnter}
+              on:mousemove={handleMouseMove}
+              on:mouseleave={handleMouseLeave}
+            >
+              <img src={icons.info} alt="Help" class="w-[15px] h-[15px] translate-y-[1px]" />
+              <!-- <IconInfoCircle class="w-[15px] h-[15px] translate-y-[1px]" /> -->
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content 
+            side="right" 
+            sideOffset={5}
+            class="bg-gray-900 text-white z-[99999] overflow-hidden rounded-md px-3 py-1.5 text-sm shadow-md"
+            style="position: fixed; left: {mouseX + 20}px; top: {mouseY}px; z-index: 999999;"
+          >
+            <p class="text-sm">{header.helpText}</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </Tooltip.Provider>
+      </div>
+    {/if}
+  </div>
+
+  <!-- Preview area with loading and error handling -->
+  <div 
+    class="flex-none cursor-pointer w-[62px]" 
+    role="button"
+    tabindex="0"
+    on:click={(e) => {
+      // If it's an image or document preview that's being clicked
+      if (previewUrl && !hasError && ['image', 'document'].includes(getFileType(previewUrl))) {
+        e.stopPropagation(); // Prevent opening the file browser
+        window.open(previewUrl, '_blank');
+      } else {
+        openFileBrowser();
+      }
+    }}
+    on:keydown={(e) => e.key === 'Enter' && openFileBrowser()}
+    aria-label="Select file">
+    {#if isChecking}
+      <!-- Loading state - show nothing or a loading indicator -->
+      <div class="w-[62px] h-[54px] bg-gray-100 rounded-lg"></div>
+    {:else if previewUrl && !hasError}
+      <!-- File preview content -->
+      {#if getFileType(previewUrl) === 'image'}
+        <!-- Image preview with proper sizing and masking -->
+        <div class="w-[62px] h-[54px] overflow-hidden rounded-[15px] bg-gray-100 hover:opacity-80 transition-opacity">
+          <img 
+            src={previewUrl} 
+            alt={displayLabel}
+            class="w-full h-full object-cover"
+            on:error={() => hasError = true}
+          />
+        </div>
+      {:else if getFileType(previewUrl) === 'video'}
+        <!-- Video preview with play/pause controls -->
+        <div class="relative w-[62px] h-[54px] overflow-hidden rounded-[15px]">
+          <!-- Video element first -->
+          <!-- svelte-ignore a11y-media-has-caption -->
+          <video 
+            bind:this={videoElement}
+            src={previewUrl} 
+            class="w-full h-full object-cover"
+            on:error={() => hasError = true}
+          >
+            <track kind="captions" />
+          </video>
+          
+          <!-- Controls overlay only when needed -->
+          {#if !isPlaying}
+            <div 
+              role="button"
+              tabindex="0"
+              class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 transition-opacity hover:bg-opacity-50"
+              on:click|stopPropagation={togglePlayback}
+              on:keydown|stopPropagation={(e) => e.key === 'Enter' && togglePlayback()}
+              aria-label="Play video">
+              <img src={icons.playerPlay} alt="Play" class="w-8 h-8 text-white" />
+            </div>
+          {:else}
+            <div 
+              role="button"
+              tabindex="0"
+              class="absolute inset-0 flex items-center justify-center bg-transparent hover:bg-black hover:bg-opacity-30 transition-all"
+              on:click|stopPropagation={togglePlayback}
+              on:keydown|stopPropagation={(e) => e.key === 'Enter' && togglePlayback()}
+              aria-label="Pause video">
+              <img src={icons.playerPause} alt="Pause" class="w-8 h-8 text-white opacity-0 hover:opacity-100 transition-opacity" />
+            </div>
+          {/if}
+        </div>
+      {:else if getFileType(previewUrl) === 'audio'}
+        <!-- Audio preview with play/pause controls -->
+        <div class="relative w-[62px] h-[54px]">
+          <!-- svelte-ignore a11y-media-has-caption -->
+          <audio 
+            bind:this={audioElement} 
+            src={previewUrl}
+            on:error={() => hasError = true}
+          >
+            <track kind="captions" />
+          </audio>
+          <img src={icons.audio} alt={displayLabel} class="w-full h-full" />
+          <!-- <IconFileMusicFilled class="w-full h-full" /> -->
+          <div 
+            role="button"
+            tabindex="0"
+            class="absolute inset-0 flex items-center justify-center"
+            on:click|stopPropagation={togglePlayback}
+            on:keydown|stopPropagation={(e) => e.key === 'Enter' && togglePlayback()}
+            aria-label={isPlaying ? "Pause audio" : "Play audio"}>
+            {#if isPlaying}
+              <!-- <img src={icons.playerPause} alt ="Pause" class="w-8 h-8 text-primary" /> -->
+              <IconPlayerPauseFilled class="w-8 h-8 text-primary" />
+            {:else}
+              <!-- <img src={icons.playerPlay} alt="Play" class="w-8 h-8 text-primary" /> -->
+              <IconPlayerPlayFilled class="w-8 h-8 text-primary" />
+            {/if}
+          </div>
+        </div>
+      {:else if getFileType(previewUrl) === 'document'}
+        <!-- Document preview with hover effect -->
+        <div class="w-[62px] h-[54px] hover:opacity-80 transition-opacity">
+          <img src={icons.document} alt={displayLabel} class="w-full h-full" />
+          <!-- <IconFileDocumentFilled class="w-full h-full" /> -->
+        </div>
+      {:else}
+        <img src={icons.folder} alt={displayLabel} class="w-[62px] h-[54px]" />
+        <!-- <IconFileFolderFilled class="w-[62px] h-[54px]" /> -->
+      {/if}
+    {:else if previewUrl}
+      <!-- Error state -->
+      <img src={icons.error} alt="File not found" class="w-[62px] h-[54px]" />
+      <!-- <IconFileOffFilled class="w-[62px] h-[54px]" /> -->
+    {:else}
+      <!-- Empty state -->
+      <img src={icons.folder} alt="Empty folder" class="w-[62px] h-[54px]" />
+      <!-- <IconFileFolderFilled class="w-[62px] h-[54px]" /> -->
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Remove hover effect since underline is now permanent */
+  .browser-input-container .flex-none {
+    transition: opacity 150ms ease-in-out;
+  }
+
+  /* Add hover effect for the container */
+  .browser-input-container:hover :global(.opacity-0) {
+    opacity: 0.6 !important;
+  }
+
+  /* Add hover effect for the info icon */
+  .browser-input-container :global(.opacity-0:hover) {
+    opacity: 1 !important;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+import type { InputControllerConfig } from '../types';
+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;
+}
+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/ic/browser/icons/audio.svg

@@ -0,0 +1,7 @@
+<svg width="63" height="55" viewBox="0 0 63 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.155518" y="0.736923" width="62" height="54" rx="15" fill="#A7FF68"/>
+<g opacity="0.1">
+<path d="M58.734 26.3555C57.281 25.3053 57.0378 18.7466 56.2021 21.5913C55.582 23.7034 55.3673 26.9532 53.0974 25.9665C51.5323 25.2875 51.5568 19.2978 50.9505 17.9635C50.3457 16.6291 49.7042 24.2231 48.3146 25.5328C47.0427 26.7293 45.5856 25.6079 44.8767 21.3523C44.1756 17.1406 43.5764 12.9982 42.9579 15.4942C42.057 19.1245 41.4804 27.4745 39.4848 26.3351C38.1828 25.5927 37.894 19.9621 37.0963 23.4194C36.4815 26.0744 35.5943 26.8088 34.5451 26.1181C33.5864 25.4878 33.0507 20.5325 32.456 19.5734C31.8135 18.5335 30.9832 23.8614 29.9824 25.5341C29.673 26.0528 29.2778 26.1892 28.9414 26.0688C28.5661 25.9354 28.2743 25.6337 28.0975 25.2738C27.0048 23.0387 26.0166 16.5679 25.9583 16.1491C25.8719 15.5266 25.4777 14.8635 25.1752 16.1491C24.8729 17.4271 23.4319 25.7742 21.8844 25.7524C20.7339 25.7374 19.7319 22.1589 19.3945 19.9976C18.9193 16.9565 18.3721 19.0181 18.3721 19.0181C18.3721 19.0181 17.6053 23.0145 15.4595 24.6815C14.3308 25.5604 13.3449 24.2395 12.6157 22.2392C12.0877 20.5583 11.7016 17.546 11.7016 17.546C11.4976 15.8347 11.1627 13.8568 10.7077 13.9087C10.705 13.9087 10.7023 13.9087 10.6995 13.9087C10.6942 13.9087 10.6873 13.9101 10.6821 13.9114C10.5861 13.9317 10.4984 14.0516 10.4282 14.22C10.2391 14.5894 9.91774 15.4437 9.53149 17.3741C9.52194 17.415 9.51259 17.4588 9.50454 17.5076C9.50314 17.5157 9.50185 17.5226 9.50046 17.531C9.47758 17.6469 9.4545 17.7682 9.43153 17.8924C9.11163 19.4259 8.38917 21.4847 8.3081 21.7143C7.65189 23.163 6.76739 24.5426 5.55344 25.5084C4.47318 26.3666 1.28374 27.4484 0.261475 27.7813H62.1554C61.0969 27.537 59.7681 27.1035 58.734 26.3555Z" fill="black"/>
+<path d="M58.6279 29.1183C57.1749 30.1686 56.9317 36.7272 56.0962 33.8826C55.4759 31.7705 55.2615 28.5206 52.9915 29.5072C51.4266 30.1866 51.4509 36.1764 50.8443 37.5103C50.2396 38.8447 49.5984 31.2507 48.2086 29.941C46.9368 28.7446 45.4795 29.8658 44.7708 34.1217C44.0698 38.3332 43.4703 42.4755 42.8518 39.9797C41.9511 36.3493 41.3746 27.9994 39.3789 29.1386C38.0769 29.881 37.7879 35.5119 36.9901 32.0543C36.3757 29.3995 35.4885 28.665 34.4391 29.3556C33.4806 29.9861 32.9445 34.9413 32.3502 35.9004C31.7075 36.9404 30.8771 31.6124 29.8763 29.9397C29.5669 29.4211 29.1717 29.2846 28.8354 29.4051C28.4599 29.5384 28.1681 29.8401 27.9914 30.1999C26.8987 32.4351 25.9107 38.906 25.8521 39.3248C25.7658 39.9472 25.3716 40.6103 25.0691 39.3248C24.7668 38.0468 23.3257 29.6998 21.7786 29.7214C20.6278 29.7364 19.626 33.315 19.2884 35.4762C18.8132 38.5172 18.2662 36.4556 18.2662 36.4556C18.2662 36.4556 17.4992 32.4593 15.3534 30.7923C14.2247 29.9135 13.239 31.2342 12.5096 33.2346C11.9817 34.9156 11.5955 37.9278 11.5955 37.9278C11.3916 39.6391 11.0567 41.6173 10.6018 41.5651C10.5989 41.5651 10.5962 41.5651 10.5934 41.5651C10.5883 41.5651 10.5814 41.5638 10.576 41.5625C10.4801 41.5421 10.3924 41.4221 10.3222 41.254C10.1332 40.8845 9.81168 40.0301 9.42554 38.0997C9.41599 38.0588 9.40654 38.0151 9.39848 37.9664C9.39709 37.9582 9.39579 37.9512 9.3944 37.943C9.37152 37.8269 9.34845 37.7057 9.32557 37.5813C9.00557 36.0479 8.28321 33.9891 8.20204 33.7595C7.54593 32.3107 6.66133 30.9313 5.44748 29.9655C4.36713 29.1075 1.17768 28.0253 0.155518 27.6925H62.0496C60.9908 27.9368 59.6623 28.3703 58.6279 29.1183Z" fill="black"/>
+</g>
+</svg>

package/dist/components/ic/browser/icons/document.svg

@@ -0,0 +1,11 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.42334" width="62" height="54" rx="15" fill="#FFDC68"/>
+<g opacity="0.1">
+<path d="M21.4233 32.0543H46.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.4233 38.7935H21.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M36.4233 25.3152H46.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.4233 18.5761H36.4233" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.4233 21.9456H28.09C28.4196 21.9456 28.7419 22.0444 29.016 22.2296C29.29 22.4147 29.5037 22.6778 29.6298 22.9857C29.756 23.2935 29.789 23.6323 29.7246 23.9591C29.6603 24.2859 29.5016 24.5861 29.2685 24.8217C29.0354 25.0574 28.7385 25.2178 28.4152 25.2828C28.0919 25.3478 27.7567 25.3145 27.4522 25.1869C27.1477 25.0594 26.8874 24.8435 26.7042 24.5664C26.5211 24.2894 26.4233 23.9636 26.4233 23.6304V19.4185C26.4233 18.5248 26.7745 17.6677 27.3997 17.0358C28.0248 16.4039 28.8726 16.0489 29.7567 16.0489" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.4233 21.9456H18.09C18.4196 21.9456 18.7419 22.0444 19.016 22.2296C19.29 22.4147 19.5037 22.6778 19.6298 22.9857C19.756 23.2935 19.789 23.6323 19.7246 23.9591C19.6603 24.2859 19.5016 24.5861 19.2685 24.8217C19.0354 25.0574 18.7385 25.2178 18.4152 25.2828C18.0919 25.3478 17.7567 25.3145 17.4522 25.1869C17.1477 25.0594 16.8874 24.8435 16.7042 24.5664C16.5211 24.2894 16.4233 23.9636 16.4233 23.6304V19.4185C16.4233 18.5248 16.7745 17.6677 17.3997 17.0358C18.0248 16.4039 18.8726 16.0489 19.7567 16.0489" stroke="black" stroke-width="3.33333" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/components/ic/browser/icons/error.svg

@@ -0,0 +1,5 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.423828" width="62" height="54" rx="15" fill="#FF4848"/>
+<path d="M31.4238 20.9348V29.0217" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.4238 35.087V35.107" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/components/ic/browser/icons/folder.svg

@@ -0,0 +1,28 @@
+<svg width="63" height="54" viewBox="0 0 63 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.2133 0H14.6343C6.78609 0 0.423828 6.36226 0.423828 14.2105V39.7894C0.423828 47.6377 6.78609 53.9999 14.6343 53.9999H48.2133C56.0615 53.9999 62.4238 47.6377 62.4238 39.7894V14.2105C62.4238 6.36226 56.0615 0 48.2133 0Z" fill="url(#paint0_linear_48_184)"/>
+<rect x="7.42383" y="11" width="48" height="36" rx="1" fill="white"/>
+<rect x="7.42383" y="19" width="48" height="0.5" fill="#BFBFBF"/>
+<rect x="7.42383" y="15" width="48" height="0.5" fill="#BFBFBF"/>
+<rect x="7.42383" y="23" width="48" height="0.5" fill="#BFBFBF"/>
+<g filter="url(#filter0_bi_48_184)">
+<path d="M15.1839 15C16.7544 15 18.2112 15.8187 19.0278 17.1602L23.2371 24.0756C23.9248 25.2053 25.1516 25.8947 26.4741 25.8947H57.6865C60.2918 25.8947 62.4233 28.0263 62.4233 30.6316V39.7856C62.4233 47.6338 56.0611 53.9961 48.2128 53.9961H14.6339C6.78567 53.9961 0.42334 47.6338 0.42334 39.7856V19.6962C0.445386 17.1094 2.56855 15 5.16024 15H15.1839Z" fill="#45BCFE" fill-opacity="0.9"/>
+</g>
+<defs>
+<filter id="filter0_bi_48_184" x="-1.94508" y="12.6316" width="66.7368" height="43.7329" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="1.18421"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_48_184"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_48_184" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.236842"/>
+<feGaussianBlur stdDeviation="0.236842"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.478431 0 0 0 0 0.94902 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_48_184"/>
+</filter>
+<linearGradient id="paint0_linear_48_184" x1="27.4238" y1="0" x2="27.4238" y2="53.9999" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0699FF"/>
+<stop offset="1" stop-color="#0171EF"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/components/ic/browser/icons/info-icon.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.62311 5.07223C7.62311 4.96573 7.70936 4.88024 7.8151 4.88024H9.03156C9.1373 4.88024 9.22355 4.96573 9.22355 5.07223V6.28794C9.22355 6.39368 9.1373 6.47993 9.03156 6.47993H7.8151C7.70936 6.47993 7.62311 6.39368 7.62311 6.28794V5.07223ZM7.62311 8.27162C7.62311 8.16587 7.70936 8.07962 7.8151 8.07962H9.03156C9.1373 8.07962 9.22355 8.16587 9.22355 8.27162V12.6875C9.22355 12.794 9.1373 12.8795 9.03156 12.8795H7.8151C7.70936 12.8795 7.62311 12.794 7.62311 12.6875V8.27162ZM8.42334 0.879852C4.00748 0.879852 0.42334 4.46399 0.42334 8.87985C0.42334 13.2957 4.00748 16.8799 8.42334 16.8799C12.8392 16.8799 16.4233 13.2957 16.4233 8.87985C16.4233 4.46399 12.8392 0.879852 8.42334 0.879852ZM8.42334 15.2794C4.89545 15.2794 2.0238 12.4077 2.0238 8.87985C2.0238 5.35197 4.89545 2.48031 8.42334 2.48031C11.9512 2.48031 14.8229 5.35197 14.8229 8.87985C14.8229 12.4077 11.9512 15.2794 8.42334 15.2794Z" fill="#757575"/>
+</svg>

package/dist/components/ic/browser/icons/player-pause.svg

@@ -0,0 +1,12 @@
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  width="24" 
+  height="24" 
+  viewBox="0 0 24 24" 
+  fill="currentColor" 
+  class="icon icon-tabler icons-tabler-filled icon-tabler-player-pause"
+>
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z"/>
+  <path d="M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z"/>
+</svg>

package/dist/components/ic/browser/icons/player-play.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-player-play"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z" /></svg>

package/dist/components/ic/types.d.ts

@@ -0,0 +1,14 @@
+export interface InputControllerConfig {
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    fileTypes?: string[];
+    showOpacityControls?: boolean;
+    defaultTransparency?: number;
+    textColor?: string;
+}

package/dist/components/ic/types.js

@@ -0,0 +1,18 @@
+// Input Controllers
+// export { default as BrowserInputController } from './BrowserInputController.svelte';
+// export { default as DropdownInputController } from './DropdownInputController.svelte';
+// export { default as DatePickerInputController } from './DatePickerInputController.svelte';
+// export { default as SliderInputController } from './SliderInputController.svelte';
+// export { default as FontInputController } from './FontInputController.svelte';
+// export { default as SwitchInputController } from './SwitchInputController.svelte';
+// export { default as TextInputController } from './TextInputController.svelte';
+// export { default as TextAreaInputController } from './TextAreaInputController.svelte';
+// export { default as RangeCalendarInputController } from './RangeCalendarInputController.svelte';
+// export { default as NumberInputController } from './NumberInputController.svelte';
+// export { default as PositionInputController } from './PositionInputController.svelte';
+// export { default as ColorPickerInputController } from './ColorPickerInputController.svelte';
+// export { default as SliderRangeInputController } from './SliderRangeInputController.svelte';
+// export { default as FixedPositionInputController } from './FixedPositionInputController.svelte';
+// export { default as VectorInputController } from './VectorInputController.svelte';
+// export { default as InputControllerHeader } from './InputControllerHeader.svelte';
+export {};