@widgetic/editor 4.0.1 → 4.0.3

package/dist/components/ic/BrowserInputController.svelte

@@ -188,11 +188,11 @@
   async function openFileBrowser() {
     try {
       syncFileBrowserUploadConfigIfEmbedded();
-      console.log('BrowserInputController: opening file browser', {
-        fileTypes,
-        id: typeof value === 'object' ? value.id : undefined,
-        batch: 1
-      });
+      // console.log('BrowserInputController: opening file browser', {
+        // fileTypes,
+        // id: typeof value === 'object' ? value.id : undefined,
+        // batch: 1
+      // });
       isFileBrowserOpen = true;
       await tick();
       syncFileBrowserInitialSelection();
@@ -211,7 +211,7 @@
     try {
       const selectedFile = event.detail?.files?.[0];
       if (!selectedFile) {
-        console.log('BrowserInputController: file browser selection skipped, no file selected');
+        // console.log('BrowserInputController: file browser selection skipped, no file selected');
         return;
       }
 
@@ -222,11 +222,11 @@
         hash: selectedFile.hash
       };
 
-      console.log('BrowserInputController: selected file', {
-        id: nextValue.id,
-        file: nextValue.file,
-        url: nextValue.url
-      });
+      // console.log('BrowserInputController: selected file', {
+        // id: nextValue.id,
+        // file: nextValue.file,
+        // url: nextValue.url
+      // });
 
       value = nextValue;
       onChange(nextValue);
@@ -337,17 +337,17 @@
     if (!element) return;
     
     element.addEventListener('play', () => {
-      console.log('Media started playing');
+      // console.log('Media started playing');
       isPlaying = true;
     });
     
     element.addEventListener('pause', () => {
-      console.log('Media paused');
+      // console.log('Media paused');
       isPlaying = false;
     });
     
     element.addEventListener('ended', () => {
-      console.log('Media ended');
+      // console.log('Media ended');
       isPlaying = false;
     });
 
@@ -650,8 +650,7 @@
 {#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}
+      class="browser-input-file-browser-overlay pointer-events-auto absolute inset-0 z-[999999] flex flex-col overflow-hidden bg-black/40 p-0"
     >
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -667,20 +666,22 @@
         class:shadow-none={fillEditorPanel}
         class:max-w-[520px]={!fillEditorPanel}
         class:flex-1={!fillEditorPanel}
+        class:min-h-[550px]={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">
+        <div class="browser-input-file-browser-header relative flex h-[48px] shrink-0 items-center border-b border-grey2 pl-4 pr-8">
           <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"
+            class="browser-input-file-browser-close inline-flex h-6 w-6 items-center justify-center p-0"
+            style="position:absolute;top:4px;right:4px;"
             on:click={closeFileBrowser}
             aria-label="Close file browser"
           >
-            <X class="h-4! w-4!" />
+            <X class="h-6! w-6!" />
           </button>
         </div>
 
@@ -705,6 +706,12 @@
 {/if}
 
 <style>
+  .browser-input-file-browser-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+
   .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);

package/dist/components/ic/CheckboxInputController.svelte

@@ -54,7 +54,7 @@
    * @param checked - Whether the checkbox is checked or not
    */
   function handleValueChange(optionValue: string, checked: boolean) {
-    console.log('CheckboxInputController: handleValueChange', optionValue, checked);
+    // console.log('CheckboxInputController: handleValueChange', optionValue, checked);
     
     if (checked) {
       // Add value if not already in array

package/dist/components/ic/ColorPickerInputController.svelte

@@ -349,7 +349,7 @@
 
     // if newValue is empty or contains invalid characters, clear the suggestions
     if (!newValue || /[^a-z\s]/.test(newValue)) {
-      console.log('Clearing suggestions due to invalid input');
+      // console.log('Clearing suggestions due to invalid input');
       suggestionVisible = false;
       currentSuggestion = null;
       return;
@@ -357,7 +357,7 @@
 
     // if newValue is a valid color name, get the suggestions and show them
     const suggestions = getColorSuggestions(newValue, colorNames);
-    console.log('Color suggestions:', { input: newValue, suggestions });
+    // console.log('Color suggestions:', { input: newValue, suggestions });
     if (suggestions) {
       currentSuggestion = suggestions;
       suggestionVisible = true;
@@ -373,11 +373,11 @@
    * @param isShiftPressed - Indicates if the shift key was held during selection
    */
   function handleColorSelection(colorName: string, isShiftPressed: boolean) {
-    console.log('Handling color selection:', { 
-      colorName, 
-      isShiftPressed,
-      currentOpacity: lastKnownOpacity 
-    });
+    // console.log('Handling color selection:', { 
+      // colorName, 
+      // isShiftPressed,
+      // currentOpacity: lastKnownOpacity 
+    // });
 
     const colorValue = colorNames[colorName];
     value = colorValue;
@@ -385,7 +385,7 @@
     
     // If Shift is pressed, set opacity to 100%
     if (isShiftPressed) {
-      console.log('Shift pressed: Setting opacity to 100%');
+      // console.log('Shift pressed: Setting opacity to 100%');
       lastKnownOpacity = 1;
       rgb = { ...newRgb, a: 1 };
       opacityPercentage = 100;
@@ -701,16 +701,16 @@
    */
   function onColorEvent(event: CustomEvent) {
     // Safe logging that won't throw errors
-    console.log('Color event received:', {
-      type: event.type,
-      rgb: event.detail?.rgb || rgb,
-      mode: event.detail?.mode,
-      rawEvent: {
-        detail: event.detail,
-        target: event.target ? 'exists' : 'null',
-        currentTarget: event.currentTarget ? 'exists' : 'null'
-      }
-    });
+    // console.log('Color event received:', {
+      // type: event.type,
+      // rgb: event.detail?.rgb || rgb,
+      // mode: event.detail?.mode,
+      // rawEvent: {
+        // detail: event.detail,
+        // target: event.target ? 'exists' : 'null',
+        // currentTarget: event.currentTarget ? 'exists' : 'null'
+      // }
+    // });
   }
 
   /**
@@ -718,7 +718,7 @@
    * @param event - Custom event containing hue information
    */
   function handleHueChange(event: CustomEvent) {
-    console.log('Hue change event:', event.detail);
+    // console.log('Hue change event:', event.detail);
     try {
       isInternalUpdate = true;
       lastKnownHue = event.detail.h;
@@ -733,11 +733,11 @@
       rgb = newRgb;
       handleColorChange();
       
-      console.log('After hue change:', {
-        hue: lastKnownHue,
-        rgb: newRgb,
-        hexValue: rgbaToHex(newRgb.r, newRgb.g, newRgb.b, lastKnownOpacity)
-      });
+      // console.log('After hue change:', {
+        // hue: lastKnownHue,
+        // rgb: newRgb,
+        // hexValue: rgbaToHex(newRgb.r, newRgb.g, newRgb.b, lastKnownOpacity)
+      // });
     } finally {
       isInternalUpdate = false;
     }
@@ -812,10 +812,10 @@
       if (rect.width === 31 && rect.height === 256) {
         if (top < 50) {  // Hue slider is typically at the top
           dragState.isHueDragging = true;
-          console.log('Hue drag started (top slider)');
+          // console.log('Hue drag started (top slider)');
         } else {  // Opacity slider is typically at the bottom
           dragState.isOpacityDragging = true;
-          console.log('Opacity drag started (bottom slider)');
+          // console.log('Opacity drag started (bottom slider)');
         }
       } else {
         dragState.isColorDragging = true;
@@ -977,7 +977,7 @@
    */
   function saveToRecentColors(color: string, alpha: number) {
     if (!saveRecentColors) {
-      console.log('Recent colors saving is disabled');
+      // console.log('Recent colors saving is disabled');
       return;
     }
     
@@ -990,7 +990,7 @@
     if (mostRecent && 
         mostRecent.color.toLowerCase() === color.toLowerCase() && 
         mostRecent.alpha === alpha) {
-      console.log('Color already most recent, skipping save:', { color, alpha });
+      // console.log('Color already most recent, skipping save:', { color, alpha });
       return;
     }
 
@@ -1022,10 +1022,10 @@
    * @param match - The matched color name clicked by the user
    */
   function handleSuggestionClick(match: string) {
-    console.log('Color name selected:', match);
+    // console.log('Color name selected:', match);
     hexInput = match;
     const colorValue = colorNames[match];
-    console.log('Converting color name to hex:', { name: match, hex: colorValue });
+    // console.log('Converting color name to hex:', { name: match, hex: colorValue });
     
     value = colorValue;
     const newRgb = hexToRgba(colorValue);
@@ -1072,11 +1072,11 @@
    * - Forces the input field to update and regain focus
    */
   function restoreCurrentColor() {
-    console.log('Restoring current color:', {
-      currentValue: value,
-      hexToRestore: value.slice(0, 7),
-      currentHexInput: hexInput
-    });
+    // console.log('Restoring current color:', {
+      // currentValue: value,
+      // hexToRestore: value.slice(0, 7),
+      // currentHexInput: hexInput
+    // });
 
     if (value && value.startsWith('#')) {
       const colorToRestore = value.slice(0, 7);
@@ -1104,7 +1104,7 @@
   onMount(() => {
     if (autofocus && inputRef) {
       inputRef.focus();
-      console.log('ColorPickerInputController focused');
+      // console.log('ColorPickerInputController focused');
     }
   });
 
@@ -1114,7 +1114,7 @@
   export function focus() {
     if (inputRef) {
       inputRef.focus();
-      console.log('ColorPickerInputController focus method called');
+      // console.log('ColorPickerInputController focus method called');
     }
   }
 

package/dist/components/ic/DatePickerInputController.svelte

@@ -76,22 +76,22 @@
    * Creates a new CalendarDate instance to prevent reference issues
    */
   function updateCurrentValue() {
-    console.log('🔄 [DatePicker] updateCurrentValue called with:', { value, type: typeof value });
+    // console.log('🔄 [DatePicker] updateCurrentValue called with:', { value, type: typeof value });
     
     if (!value) {
       currentValue = undefined;
       placeholder = today(getLocalTimeZone());
-      console.log('✅ [DatePicker] Set to undefined, placeholder:', placeholder);
+      // console.log('✅ [DatePicker] Set to undefined, placeholder:', placeholder);
       return;
     }
 
     if (value instanceof CalendarDate) {
       currentValue = value;
-      console.log('✅ [DatePicker] Already CalendarDate:', currentValue);
+      // console.log('✅ [DatePicker] Already CalendarDate:', currentValue);
     } else if (typeof value === 'object' && value !== null && 'year' in value && 'month' in value && 'day' in value) {
       try {
         currentValue = new CalendarDate(value.year, value.month, value.day);
-        console.log('✅ [DatePicker] Created CalendarDate from object:', { original: value, created: currentValue });
+        // console.log('✅ [DatePicker] Created CalendarDate from object:', { original: value, created: currentValue });
       } catch (error) {
         console.error('❌ [DatePicker] Failed to create CalendarDate from object:', { value, error });
         currentValue = undefined;
@@ -102,7 +102,7 @@
     }
 
     placeholder = currentValue ?? today(getLocalTimeZone());
-    console.log('🎯 [DatePicker] Final state:', { currentValue, placeholder });
+    // console.log('🎯 [DatePicker] Final state:', { currentValue, placeholder });
   }
 
   // Watch for value changes and update internal state
@@ -308,7 +308,7 @@
                 <Calendar
                   mode="single"
                   onValueChange={(date: DateValue | undefined) => {
-                    console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
+                    // console.log('📅 [DatePicker] Calendar onValueChange:', { date, isCalendarDate: date instanceof CalendarDate });
                     if (date instanceof CalendarDate) {
                       currentValue = date;
                       placeholder = date;

package/dist/components/ic/DropdownInputController.svelte

@@ -88,7 +88,7 @@
    * @param newValue - The newly selected value
    */
   function handleValueChange(newValue: string) {
-    console.log('DropdownInputController: handleValueChange', newValue);
+    // console.log('DropdownInputController: handleValueChange', newValue);
     onChange(newValue);
     closeDropdown();
   }