@widgetic/editor 3.11.4 → 4.0.1

package/dist/components/ic/BrowserInputController.svelte

@@ -0,0 +1,724 @@
+<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, tick } from 'svelte';
+
+  // Shadcn UI Components
+  import { Portal, Tooltip } from '@widgetic/design-system/components';
+  import { ThumbHashImage } from "@widgetic/design-system/components";
+  import { FileBrowser, setFileBrowserUploadConfig, persistentSelectStore } from '@widgetic/file-browser';
+  import X from '../icons/x.svelte';
+  // console.log("BrowserInputController - Tooltip:", Tooltip);
+  
+  // config imports 
+  import type { InputControllerConfig } from './index';
+
+  // utils imports
+  import MediaManager from '../../utils/MediaManager';
+
+  // Static asset imports (bundled via Vite, works when imported as library)
+  import icAudio from '../../assets/icons/ic-browser/audio.svg?url';
+  import icDocument from '../../assets/icons/ic-browser/document.svg?url';
+  import icError from '../../assets/icons/ic-browser/error.svg?url';
+  import icFolder from '../../assets/icons/ic-browser/folder.svg?url';
+  import icPlayerPause from '../../assets/icons/ic-browser/player-pause.svg?url';
+  import icPlayerPlay from '../../assets/icons/ic-browser/player-play.svg?url';
+
+  import { InputControllerHeader } from './index';
+
+  interface FileValue {
+    id: string;
+    file: string;
+    url: string;
+    hash?: string; // Add hash property for ThumbHash
+  }
+
+  // Component props with default values
+  export let header: { label: string; helpText?: string } | undefined = undefined;
+  export let label: string = '';
+  export let value: string | FileValue = '';
+  export let onChange: (newValue: string | FileValue) => void = () => {};
+  export let portalTarget: string | HTMLElement = 'portal-element';
+
+  /** Full-panel overlay when portaled to props-editor panel (not document body). */
+  $: fillEditorPanel =
+    portalTarget === 'props-editor-file-browser-portal' ||
+    (portalTarget instanceof HTMLElement &&
+      portalTarget.id === 'props-editor-file-browser-portal');
+  export let config: InputControllerConfig = {};
+  
+  // Extract allowed file types from config or default to all files
+  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 isFileBrowserOpen = 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;
+  }
+
+
+  /**
+   * 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 : '';
+  }
+
+  /**
+   * Gets the thumbnail URL for a video
+   * @param videoUrl - URL of the video file
+   * @returns URL of the thumbnail
+   */
+  function getVideoThumbnailUrl(videoUrl: string): string {
+    return videoUrl.replace(/\.[^/.]+$/, '.png');
+  }
+
+  /**
+   * 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';
+  }
+
+  /** Only embedded iframe mode (URL params) sets upload config here; standalone uses parent +page sync. */
+  function syncFileBrowserUploadConfigIfEmbedded() {
+    if (typeof window === 'undefined') return;
+    const params = new URLSearchParams(window.location.search);
+    const apiUrl = params.get('apiUrl');
+    const token = params.get('token');
+    if (!apiUrl || !token) return;
+    const widgetId = params.get('widgetId');
+    const apiBase = apiUrl.replace(/\/+$/, '');
+    setFileBrowserUploadConfig({
+      apiBasePath: `${apiBase}/v1`,
+      accessToken: token.replace(/^Bearer\s+/i, ''),
+      contextType: 'content-property',
+      source: 'file-browser-upload',
+      widgetId: widgetId || undefined,
+    });
+  }
+
+  /**
+   * Opens the shared FileBrowser package and lets the user select one file.
+   */
+  function getPortalHost(): HTMLElement | null {
+    if (portalTarget instanceof HTMLElement) return portalTarget;
+    if (typeof document === 'undefined') return null;
+    return document.getElementById('props-editor-file-browser-portal');
+  }
+
+  function setPortalHostInteractive(active: boolean) {
+    const host = getPortalHost();
+    if (host) {
+      host.classList.toggle('pointer-events-none', !active);
+      host.classList.toggle('pointer-events-auto', active);
+    }
+  }
+
+  async function openFileBrowser() {
+    try {
+      syncFileBrowserUploadConfigIfEmbedded();
+      console.log('BrowserInputController: opening file browser', {
+        fileTypes,
+        id: typeof value === 'object' ? value.id : undefined,
+        batch: 1
+      });
+      isFileBrowserOpen = true;
+      await tick();
+      syncFileBrowserInitialSelection();
+      setPortalHostInteractive(true);
+    } catch (error) {
+      console.error('Error opening file browser:', error);
+    }
+  }
+
+  function closeFileBrowser() {
+    isFileBrowserOpen = false;
+    setPortalHostInteractive(false);
+  }
+
+  function handleFileBrowserSelect(event: CustomEvent<{ files?: Array<FileValue & { name?: string; thumbnail?: string }> }>) {
+    try {
+      const selectedFile = event.detail?.files?.[0];
+      if (!selectedFile) {
+        console.log('BrowserInputController: file browser selection skipped, no file selected');
+        return;
+      }
+
+      const nextValue: FileValue = {
+        id: selectedFile.id,
+        file: selectedFile.file || selectedFile.name || '',
+        url: selectedFile.url,
+        hash: selectedFile.hash
+      };
+
+      console.log('BrowserInputController: selected file', {
+        id: nextValue.id,
+        file: nextValue.file,
+        url: nextValue.url
+      });
+
+      value = nextValue;
+      onChange(nextValue);
+      closeFileBrowser();
+    } catch (error) {
+      console.error('BrowserInputController: failed to select file', 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;
+    }
+  }
+
+  onDestroy(() => {
+    clearTimeout(showHelpTimeout);
+    setPortalHostInteractive(false);
+    if (audioElement) {
+      MediaManager.cleanup(audioElement);
+      audioElement = null;
+    }
+    if (videoElement) {
+      MediaManager.cleanup(videoElement);
+      videoElement = null;
+    }
+  });
+
+  /**
+   * Checks if an image URL is accessible using Image() constructor
+   * to avoid CORS issues with external services (picsum.photos, etc.)
+   */
+  async function checkFileExists(url: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(true);
+      img.onerror = () => resolve(false);
+      img.src = url;
+      setTimeout(() => resolve(false), 5000);
+    });
+  }
+
+  // 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 hash extraction helper
+  function getThumbHash(value: string | FileValue | null | undefined): string | undefined {
+    if (!value) return undefined;
+    if (typeof value === 'object' && 'hash' in value) {
+      return value.hash;
+    }
+    return undefined;
+  }
+
+  // Update the reactive statement to use getThumbHash
+  $: thumbHash = getThumbHash(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);
+
+  // Add placeholder text logic
+  function getAddToEditorLabelSingular(fileTypes: string[]): string {
+    if (!fileTypes || fileTypes.includes('*')) return 'Use file';
+    const type = fileTypes[0].split('/')[0];
+    switch (type) {
+      case 'image': return 'Use image';
+      case 'video': return 'Use video';
+      case 'audio': return 'Use audio';
+      case 'document': return 'Use document';
+      default: return 'Use file';
+    }
+  }
+
+  function getCurrentFileId(): string | null {
+    if (value && typeof value === 'object' && value.id) return value.id;
+    return null;
+  }
+
+  function syncFileBrowserInitialSelection() {
+    const fileId = getCurrentFileId();
+    persistentSelectStore.clearSelections(fileBrowserFilter);
+    if (fileId) {
+      persistentSelectStore.setSelections(fileBrowserFilter, [fileId]);
+      if (fileBrowserFilter !== 'all') {
+        persistentSelectStore.setSelections('all', [fileId]);
+      }
+    }
+  }
+
+  function getPlaceholderText(fileTypes: string[]): string {
+    if (!fileTypes || fileTypes.includes('*')) return 'Add file...';
+    const type = fileTypes[0].split('/')[0];
+    switch (type) {
+      case 'image': return 'Add image...';
+      case 'video': return 'Add video...';
+      case 'audio': return 'Add audio...';
+      case 'document': return 'Add docs...';
+      default: return 'Add file...';
+    }
+  }
+
+  function getInitialFileBrowserFilter(fileTypes: string[]): 'all' | 'image' | 'video' | 'audio' | 'document' | 'font' | 'svg' {
+    if (!fileTypes || fileTypes.includes('*')) return 'all';
+    const type = fileTypes[0].split('/')[0];
+    if (fileTypes[0] === 'image/svg+xml') return 'svg';
+    if (type === 'font') return 'font';
+    if (['image', 'video', 'audio'].includes(type)) return type as 'image' | 'video' | 'audio';
+    if (type === 'application' || type === 'text') return 'document';
+    return 'all';
+  }
+
+  $: fileBrowserFilter = getInitialFileBrowserFilter(fileTypes);
+  $: fileBrowserRestrictUpload = fileBrowserFilter !== 'all';
+  $: fileBrowserAddToEditorLabelSingular = getAddToEditorLabelSingular(fileTypes);
+
+  function handleContentRemoval(e: MouseEvent) {
+    e.stopPropagation();
+    e.preventDefault();
+    value = '';
+    onChange('');
+    isPlaying = false;
+    hasError = false;
+
+    if (audioElement) {
+      MediaManager.pause(audioElement);
+      MediaManager.cleanup(audioElement);
+      audioElement = null;
+    }
+    if (videoElement) {
+      MediaManager.pause(videoElement);
+      MediaManager.cleanup(videoElement);
+      videoElement = null;
+    }
+
+    onChange('');
+  }
+
+  function handleControllerClick(e: MouseEvent) {
+    const target = e.target as HTMLElement;
+    if (target.closest('.browser-ic-clear-btn')) return;
+    openFileBrowser();
+  }
+</script>
+
+<!-- Main container with updated styling -->
+<div class="flex flex-col gap-2 widgetic-colors">
+  <div class="flex items-center w-full relative">
+    <div class="flex-1 min-w-0">
+      <InputControllerHeader label={header?.label || label} helpText={header?.helpText} />
+    </div>
+    
+    <div class="absolute right-0">
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div 
+        class="browser-input-controller-field cursor-pointer h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green relative"
+        on:click={handleControllerClick}
+        on:keydown={(e) => e.key === 'Enter' && openFileBrowser()}
+        role="button"
+        tabindex={0}
+      >
+        <!-- File name or placeholder -->
+        <div class="browser-input-controller-label flex-1 min-w-0 px-4 flex items-center h-full">
+          <span class="subtext {value ? 'text-grey7' : 'text-grey3'} truncate inline-block">
+            {value ? getFileName(value) : getPlaceholderText(fileTypes)}
+          </span>
+        </div>
+
+        <!-- Preview area -->
+        <div class="flex-none h-full flex items-center pr-[16px]">
+          {#if isChecking}
+            <!-- Loading state -->
+            <div class="w-8 h-7 bg-gray-100 rounded-lg"></div>
+          {:else if previewUrl && !hasError}
+            <!-- File preview content -->
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            {#if getFileType(previewUrl) === 'image'}
+              <div 
+                class="w-8 h-7 overflow-hidden rounded-lg bg-gray-100 cursor-pointer hover:opacity-80 transition-opacity"
+                on:click|stopPropagation={() => window.open(previewUrl, '_blank')}
+                role="button"
+                tabindex={0}
+              >
+                {#if thumbHash}
+                  <div on:error={() => hasError = true}>
+                    <ThumbHashImage
+                      src={previewUrl || ''}
+                      alt={displayLabel || ''}
+                      thumbhash={thumbHash}
+                      class_="w-full h-full object-cover"
+                    />
+                  </div>
+                {:else}
+                  <img 
+                    src={previewUrl} 
+                    alt={displayLabel || ''}
+                    class="w-full h-full object-cover"
+                    on:error={() => hasError = true}
+                  />
+                {/if}
+              </div>
+            {:else if getFileType(previewUrl) === 'video'}
+              <div 
+                class="relative w-8 h-7 overflow-hidden rounded-lg cursor-pointer"
+                on:click|stopPropagation={togglePlayback}
+                role="button"
+                tabindex={0}
+              >
+                <!-- Video element always present -->
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <video 
+                  bind:this={videoElement}
+                  src={previewUrl} 
+                  class="absolute inset-0 w-full h-full object-cover {!isPlaying ? 'opacity-0' : 'opacity-100'}"
+                  on:error={() => hasError = true}
+                >
+                  <track kind="captions" />
+                </video>
+
+                <!-- Thumbnail image shown when not playing -->
+                {#if !isPlaying}
+                  {#if thumbHash}
+                    <div on:error={() => hasError = true}>
+                      <ThumbHashImage
+                        src={getVideoThumbnailUrl(previewUrl) || ''}
+                        alt={displayLabel || ''}
+                        thumbhash={thumbHash}
+                        class_="w-full h-full object-cover hover:opacity-80 transition-opacity"
+                      />
+                    </div>
+                  {:else}
+                    <img 
+                      src={getVideoThumbnailUrl(previewUrl)} 
+                      alt={getFileName(value)}
+                      class="w-full h-full object-cover hover:opacity-80 transition-opacity"
+                      on:error={() => hasError = true}
+                    />
+                  {/if}
+                {/if}
+                
+                <!-- Controls overlay -->
+                <div 
+                  class="absolute inset-0 flex items-center justify-center {!isPlaying ? 'bg-black bg-opacity-30' : 'bg-transparent hover:bg-black hover:bg-opacity-30'}"
+                >
+                  <img 
+                    src={isPlaying ? icPlayerPause : icPlayerPlay}
+                    alt={isPlaying ? "Pause" : "Play"}
+                    class="w-5 h-5 {isPlaying ? 'opacity-0 hover:opacity-100' : 'opacity-100'} transition-opacity"
+                  />
+                </div>
+              </div>
+            {:else if getFileType(previewUrl) === 'audio'}
+              <div 
+                class="relative w-8 h-7 cursor-pointer"
+                on:click|stopPropagation={togglePlayback}
+                role="button"
+                tabindex={0}
+              >
+                <!-- Audio icon -->
+                <img 
+                  src={icAudio} 
+                  alt={getFileName(value)}
+                  class="w-full h-full object-contain"
+                />
+                
+                <!-- Audio element hidden but needed for playback -->
+                <!-- svelte-ignore a11y-media-has-caption -->
+                <audio 
+                  bind:this={audioElement} 
+                  src={previewUrl}
+                  class="hidden"
+                  on:error={() => hasError = true}
+                >
+                  <track kind="captions" />
+                </audio>
+                
+                <!-- Controls overlay -->
+                <div 
+                  class="absolute inset-0 flex items-center justify-center"
+                >
+                  <img 
+                    src={isPlaying ? icPlayerPause : icPlayerPlay}
+                    alt={isPlaying ? "Pause" : "Play"}
+                    class="w-5 h-5"
+                  />
+                </div>
+              </div>
+            {:else if getFileType(previewUrl) === 'document'}
+              <div 
+                class="cursor-pointer hover:opacity-80 transition-opacity"
+                on:click|stopPropagation={() => window.open(previewUrl, '_blank')}
+                role="button"
+                tabindex={0}
+              >
+                <img 
+                  src={icDocument} 
+                  alt={displayLabel} 
+                  class="w-8 h-7 object-contain" 
+                />
+              </div>
+            {:else}
+              <img 
+                src={icFolder} 
+                alt={displayLabel} 
+                class="w-8 h-7 object-contain" 
+              />
+            {/if}
+          {:else if previewUrl}
+            <!-- Error state -->
+            <img 
+              src={icError} 
+              alt="File not found" 
+              class="w-8 h-7 object-contain" 
+            />
+          {:else}
+            <!-- Empty state -->
+            <img 
+              src={icFolder} 
+              alt="Empty folder" 
+              class="w-8 h-7 object-contain" 
+            />
+          {/if}
+
+          <!-- Close button - moved outside the content conditions -->
+          {#if value}
+            <button
+              type="button"
+              class="browser-ic-clear-btn absolute top-[-4px] right-[-4px] w-4 h-4 rounded-full hover:bg-grey2 transition-colors flex items-center justify-center"
+              on:click={handleContentRemoval}
+              aria-label="Clear file"
+            >
+              <div class="w-4 h-4 flex items-center justify-center">
+                <X class="w-4! h-4!" />
+              </div>
+            </button>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+{#if isFileBrowserOpen}
+  <Portal target={portalTarget}>
+    <div
+      class="browser-input-file-browser-overlay pointer-events-auto absolute inset-0 z-[999999] flex flex-col overflow-hidden bg-black/40"
+      class:p-3={!fillEditorPanel}
+    >
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <!-- svelte-ignore a11y_no_static_element_interactions -->
+      <div class="browser-input-file-browser-backdrop absolute inset-0" on:click={closeFileBrowser}></div>
+
+      <div
+        class="browser-input-file-browser-dialog browser-input-file-browser-dialog-animate relative z-[999999] flex min-h-0 w-full flex-col overflow-hidden bg-white"
+        class:absolute={fillEditorPanel}
+        class:inset-0={fillEditorPanel}
+        class:h-full={fillEditorPanel}
+        class:max-w-none={fillEditorPanel}
+        class:rounded-none={fillEditorPanel}
+        class:shadow-none={fillEditorPanel}
+        class:max-w-[520px]={!fillEditorPanel}
+        class:flex-1={!fillEditorPanel}
+        class:self-center={!fillEditorPanel}
+        class:mx-auto={!fillEditorPanel}
+        class:rounded-large={!fillEditorPanel}
+        class:shadow-2xl={!fillEditorPanel}
+      >
+        <div class="browser-input-file-browser-header flex h-[57px] shrink-0 items-center justify-between border-b border-grey2 px-4 py-3">
+          <span class="body-medium text-grey7">Select file</span>
+          <button
+            type="button"
+            class="browser-input-file-browser-close inline-flex h-8 w-8 items-center justify-center rounded-full hover:bg-grey2"
+            on:click={closeFileBrowser}
+            aria-label="Close file browser"
+          >
+            <X class="h-4! w-4!" />
+          </button>
+        </div>
+
+        <div class="browser-input-file-browser-body flex min-h-0 flex-1 flex-col overflow-hidden">
+          <FileBrowser
+            class="h-full min-h-0 flex-1"
+            instanceId={`props-editor-browser-input-${fileBrowserFilter}`}
+            initialFilter={fileBrowserFilter}
+            restrictUpload={fileBrowserRestrictUpload}
+            useDemoContent={false}
+            allowSelecting={true}
+            showAddToEditor={true}
+            maxSelections={1}
+            activeFileId={getCurrentFileId()}
+            addToEditorLabel={fileBrowserAddToEditorLabelSingular}
+            on:select={handleFileBrowserSelect}
+          />
+        </div>
+      </div>
+    </div>
+  </Portal>
+{/if}
+
+<style>
+  .browser-input-file-browser-dialog-animate {
+    transform-origin: center center;
+    animation: browser-input-fb-scale-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes browser-input-fb-scale-in {
+    from {
+      transform: scale(0.94);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+</style>
+