@widgetic/editor 4.0.2 → 4.0.3

package/dist/components/ic/FontInputController.svelte

@@ -77,7 +77,10 @@
    * @prop {Function} toggleDropdown - Function to toggle dropdown state
    * @prop {Function} onFocus - Optional focus handler
    */
-  export let label: string;
+  export let label: string = '';
+  let className = '';
+  export { className as class };
+  export let style = '';
   export let value: { family: string; weight: string; category: string } | string | null = null;
   export let onChange: ((newValue: { family: string; weight: string; category: string }) => void) | undefined = undefined;
   export let description: string | undefined = undefined;
@@ -103,6 +106,9 @@
 
   // Font loading optimization
   let fontListContainer: HTMLElement;
+  let familyTriggerEl: HTMLDivElement | undefined;
+  let familyPopoverStyle = '';
+  let familyPopoverSide: 'top' | 'bottom' = 'bottom';
   let fontObserver = new IntersectionObserver(() => {});
   
   // Initialize FontManager instance
@@ -120,6 +126,27 @@
   export let hideRecentFromList: boolean = false;
   export let hideTrashIcon: boolean = true;
 
+  function updateFamilyPopoverBox() {
+    if (!familyTriggerEl || typeof window === 'undefined') return;
+    const rect = familyTriggerEl.getBoundingClientRect();
+    const pad = 12;
+    const viewportH = window.visualViewport?.height ?? window.innerHeight;
+    const below = viewportH - rect.bottom - pad;
+    const above = rect.top - pad;
+    const openAbove = above > below;
+    familyPopoverSide = openAbove ? 'top' : 'bottom';
+    const available = Math.max(0, openAbove ? above : below);
+    const height = Math.min(565, available);
+    const width = Math.min(374, Math.max(240, window.innerWidth - 16));
+    familyPopoverStyle = `width: ${width}px; height: ${height}px; max-width: calc(100vw - 16px); max-height: ${height}px;`;
+  }
+
+  function handleFamilyPopoverViewportChange() {
+    if ($openDropdowns?.has(controllerId)) {
+      updateFamilyPopoverBox();
+    }
+  }
+
   function coerceFontValue(raw: typeof value): { family: string; weight: string; category: string } | null {
     if (!raw) return null;
     if (typeof raw === 'object' && raw.family) {
@@ -350,13 +377,13 @@
         preloadedFonts = fontManagerInstance.getPreloadedFonts('Mine');
         
         if (preloadedFonts.length > 0) {
-          console.log(`✅ [FontInput:${controllerId}] Using preloaded custom fonts for Mine category:`, {
-            count: preloadedFonts.length,
-            fonts: preloadedFonts.slice(0, 3).map(f => f.family)
-          });
+          // console.log(`✅ [FontInput:${controllerId}] Using preloaded custom fonts for Mine category:`, {
+            // count: preloadedFonts.length,
+            // fonts: preloadedFonts.slice(0, 3).map(f => f.family)
+          // });
         } else {
           // If no preloaded fonts found, load them now
-          console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+          // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
           preloadedFonts = await fontManagerInstance.loadCustomFonts();
         }
         
@@ -421,13 +448,13 @@
               initialFonts = fontManagerInstance.getPreloadedFonts('Mine');
               
               if (initialFonts.length > 0) {
-                console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
-                  count: initialFonts.length,
-                  fonts: initialFonts.slice(0, 3).map(f => f.family)
-                });
+                // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                  // count: initialFonts.length,
+                  // fonts: initialFonts.slice(0, 3).map(f => f.family)
+                // });
               } else {
                 // If no preloaded fonts, load them now
-                console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
                 initialFonts = await fontManagerInstance.loadCustomFonts();
               }
             } else if (currentFilter === 'All') {
@@ -537,14 +564,14 @@
       const preloadedCustomFonts = fontManagerInstance.getPreloadedFonts('Mine');
       
       if (preloadedCustomFonts.length > 0) {
-        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts in initializeFonts:`, {
-          count: preloadedCustomFonts.length,
-          fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
-        });
+        // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts in initializeFonts:`, {
+          // count: preloadedCustomFonts.length,
+          // fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+        // });
         return preloadedCustomFonts;
       } else {
         // If no preloaded fonts, load them now
-        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found in initializeFonts, loading them now...`);
+        // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found in initializeFonts, loading them now...`);
         const customFonts = await fontManagerInstance.loadCustomFonts();
         return customFonts;
       }
@@ -914,16 +941,16 @@
           
           if (preloadedCustomFonts.length > 0) {
             // Use preloaded custom fonts
-            console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts for empty search:`, {
-              count: preloadedCustomFonts.length,
-              fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
-            });
+            // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts for empty search:`, {
+              // count: preloadedCustomFonts.length,
+              // fonts: preloadedCustomFonts.slice(0, 3).map(f => f.family)
+            // });
             allFonts = preloadedCustomFonts;
             filteredFonts = [];
             updateFilteredFonts();
           } else {
             // If no preloaded fonts, load them asynchronously
-            console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found for empty search, loading them now...`);
+            // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found for empty search, loading them now...`);
             fontManagerInstance.loadCustomFonts().then(customFonts => {
               allFonts = customFonts || [];
               filteredFonts = [];
@@ -1021,13 +1048,13 @@
                     
                     if (fonts.length === 0) {
                         // If no preloaded custom fonts found, load them
-                        console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
+                        // console.log(`📚 [FontInput:${controllerId}] No preloaded custom fonts found, loading them now...`);
                         fonts = await fontManagerInstance.loadCustomFonts();
                     } else {
-                        console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
-                            count: fonts.length,
-                            fonts: fonts.slice(0, 3).map(f => f.family)
-                        });
+                        // console.log(`📚 [FontInput:${controllerId}] Using preloaded custom fonts:`, {
+                            // count: fonts.length,
+                            // fonts: fonts.slice(0, 3).map(f => f.family)
+                        // });
                     }
                 } else {
                     // For other categories, first try to get preloaded fonts
@@ -1475,6 +1502,8 @@
       capture: true,
       passive: true
     });
+    window.addEventListener('resize', handleFamilyPopoverViewportChange);
+    window.visualViewport?.addEventListener('resize', handleFamilyPopoverViewportChange);
 
     // Add touch listeners with passive option
     window.addEventListener('touchstart', () => {}, { passive: true });
@@ -1484,6 +1513,8 @@
   // Update onDestroy to remove all listeners
   onDestroy(() => {
     window.removeEventListener('scroll', handleGlobalScroll, true);
+    window.removeEventListener('resize', handleFamilyPopoverViewportChange);
+    window.visualViewport?.removeEventListener('resize', handleFamilyPopoverViewportChange);
     window.removeEventListener('touchstart', () => {});
     window.removeEventListener('touchmove', () => {});
     
@@ -1498,10 +1529,10 @@
       clearTimeout(initialLoadTimeout);
     }
     
-    console.log('🧹 [FontInput] Cleanup complete:', {
-      controllerId,
-      lastFilter: currentFilter
-    });
+    // console.log('🧹 [FontInput] Cleanup complete:', {
+      // controllerId,
+      // lastFilter: currentFilter
+    // });
   });
 
   // Add this function to the script section
@@ -1552,12 +1583,12 @@
       // Update filtered fonts
       updateFilteredFonts();
       
-      console.log('✅ [FontInput] Font removed:', {
-        fontFamily,
-        remainingFonts: allFonts.length,
-        filteredFonts: filteredFonts.length,
-        recentFonts: recentFonts.length
-      });
+      // console.log('✅ [FontInput] Font removed:', {
+        // fontFamily,
+        // remainingFonts: allFonts.length,
+        // filteredFonts: filteredFonts.length,
+        // recentFonts: recentFonts.length
+      // });
     } catch (error) {
       console.error('❌ [FontInput] Error removing font:', error);
     }
@@ -1569,11 +1600,12 @@
     if (browser) {
       localStorage.setItem(FONT_WEIGHT_KEY(controllerId), selectedWeight);
     }
+    const current = coerceFontValue(value);
     if (onChange) {
       onChange({
-        family: value?.family || '',
+        family: current?.family || '',
         weight: weight,
-        category: value?.category || ''
+        category: current?.category || 'Sans Serif'
       });
     }
   }
@@ -1609,7 +1641,7 @@
         <div class="flex items-center flex-1 min-w-0">
           <span 
             class="text-[24px] truncate"
-            style="font-family: '${font.family}', sans-serif; font-display: swap;"
+            style="font-family: '${font.family}', sans-serif; font-display: swap; color: inherit; -webkit-text-fill-color: currentColor;"
           >
             ${font.family}
           </span>
@@ -1639,15 +1671,17 @@
   }
 </script>
 
-<!-- Dual IC: labels left, 185px inputs on the right (even when label is empty) -->
-<div class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors">
+<!-- Dual IC: header zone always on the left (even if label is empty); 185px inputs on the right. -->
+<div class="font-ic flex flex-col gap-2 w-full min-w-0 widgetic-colors {className}" style={style}>
   <div class="font-family-row flex items-center justify-between w-full min-w-0 gap-2" style="min-height: 48px;">
         <div class="font-family-label-ct flex-1 min-w-0">
-          {#if label}
-            <InputControllerHeader {label} />
-          {/if}
+          <InputControllerHeader label={label || ''} />
         </div>
-        <div class="font-family-input-ct h-12 shrink-0 rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green" style="width: 185px; max-width: 185px; min-width: 185px; margin-left: auto;">
+        <div
+          class="font-family-input-ct h-12 shrink-0 rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green"
+          style="width: 185px; max-width: 185px; min-width: 185px;"
+          bind:this={familyTriggerEl}
+        >
           <!-- Font Family Button -->
           <Popover.Root 
             open={$openDropdowns?.has(controllerId)}
@@ -1660,8 +1694,11 @@
                     isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
                   });
                 } else if (isOpen) {
-                  // Reset active search index when opening the dropdown
                   activeSearchIndex = -1;
+                  void tick().then(() => {
+                    updateFamilyPopoverBox();
+                    requestAnimationFrame(updateFamilyPopoverBox);
+                  });
                   
                   // When opening, ensure we have fonts ready
                   if (filteredFonts.length === 0 && allFonts.length > 0) {
@@ -1682,7 +1719,7 @@
               }
             }}
           >
-            <Popover.Trigger class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
+            <Popover.Trigger tabindex="-1" class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group"
               onmouseenter={() => {
                 // Preload fonts when hovering over the button
                 // This reduces the delay when actually clicking to open
@@ -1700,13 +1737,20 @@
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
 
-            <Popover.Content class="font-input-popover w-[374px] h-[565px] !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2">
-              <div class="flex flex-col h-full font-popover-content">
+            <Popover.Content
+              collisionPadding={12}
+              side={familyPopoverSide}
+              sideOffset={4}
+              class="font-input-popover !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2"
+              style={familyPopoverStyle}
+            >
+              <div class="flex flex-col h-full min-h-0 font-popover-content">
                 <!-- Title and upload icon -->
-                <div class="relative pt-6 pb-[11px] px-5">
+                <div class="font-popover-header shrink-0 relative pt-6 pb-[11px] px-5">
                   <div class="h5 text-grey7 widgetic-colors">Fonts</div>
                   <button 
                     type="button" 
+                    tabindex="-1"
                     class="absolute right-6 top-[26px] bg-transparent border-0 cursor-pointer p-0 rounded-full hover:bg-grey3 transition-all duration-300"
                     onclick={() => {
                       try {
@@ -1725,7 +1769,7 @@
                 {/if}
 
                 <!-- Search input -->
-                <div class="relative px-4">
+                <div class="font-popover-search shrink-0 relative px-4">
                   <SearchInput
                     placeholder="Search fonts..."
                     bind:value={searchTerm}
@@ -1750,7 +1794,7 @@
                 </div>
                 <!-- Filter toggle group - sticky header -->
                 {#if !searchTerm}
-                  <div class="sticky top-0 bg-white z-10">
+                  <div class="font-popover-tabs shrink-0 sticky top-0 bg-white z-10">
                     <CategoryTabs
                       categories={filterOptions}
                       activeCategory={currentFilter}
@@ -1789,6 +1833,7 @@
                         displayMode="list"
                         hideTrashIcon={hideTrashIcon}
                         itemType="font"
+                        selectionToken={resolvedFont?.family || ''}
                       />
                     {/if}
 
@@ -1835,7 +1880,7 @@
                               onclick={() => handleFontSelect(font)}
                               onmouseenter={() => handleMouseEnter(index)}
                               role="button"
-                              tabindex="0"
+                              tabindex="-1"
                               style="color: {isFontSelected(font) ? '#ffffff' : 'hsl(var(--grey7))'};"
                             >
                               <div class="flex items-center flex-1 min-w-0 group">
@@ -1883,9 +1928,9 @@
 
     <div class="font-weight-row flex items-center justify-between w-full min-w-0 gap-2" style="min-height: 48px;">
       <div class="font-weight-label-ct flex-1 min-w-0">
-        <InputControllerHeader label="Font Weight" />
+        <InputControllerHeader label={label ? 'Font Weight' : ''} />
       </div>
-      <div class="font-weight-input-ct h-12 shrink-0 rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green" style="width: 185px; max-width: 185px; min-width: 185px; margin-left: auto;">
+      <div class="font-weight-input-ct h-12 shrink-0 rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green" style="width: 185px; max-width: 185px; min-width: 185px;">
           <Popover.Root 
             open={$openDropdowns?.has('weight-' + controllerId)}
             onOpenChange={(isOpen) => {
@@ -1894,7 +1939,7 @@
               }
             }}
           >
-            <Popover.Trigger class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group">
+            <Popover.Trigger tabindex="-1" class="w-full h-full flex items-center border-0 bg-transparent hover:bg-transparent focus:bg-transparent pl-3 pr-[16px] group">
               <span class="truncate flex-1 text-left subtext text-grey7">
                 {displayWeight || 'Regular'}
               </span>
@@ -1938,6 +1983,12 @@
     width: 100%;
   }
 
+  .font-family-label-ct,
+  .font-weight-label-ct {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   .font-family-input-ct,
   .font-weight-input-ct {
     width: 185px !important;
@@ -1989,12 +2040,28 @@
     background-color: hsl(var(--light-green)) !important;
   }
   
-  /* Optimize font popover rendering */
+  .font-family-input-ct :global(button:focus),
+  .font-family-input-ct :global(button:focus-visible),
+  .font-weight-input-ct :global(button:focus),
+  .font-weight-input-ct :global(button:focus-visible),
+  :global(.font-input-popover button:focus),
+  :global(.font-input-popover button:focus-visible),
+  :global(.font-list-row:focus),
+  :global(.font-list-row:focus-visible),
+  :global(.font-input-popover [data-item]:focus),
+  :global(.font-input-popover [data-item]:focus-visible) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Clamp to the viewport so the Fonts header and list stay on screen */
   :global(.font-input-popover) {
     z-index: 50;
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;
+    max-width: calc(100vw - 16px) !important;
+    overflow: hidden;
   }
   
   :global(.font-popover-content) {
@@ -2034,14 +2101,20 @@
     z-index: 10; /* Ensure it appears above other content */
   }
 
-  /* Prevent hover effect on selected items */
-  :global(.selected-item:hover) {
-    background-color: hsl(var(--sage-green)) !important;
+  /* Selected row only — never leave white text on a white (deselected) row. */
+  :global(.font-list-row.selected-item),
+  :global([data-item].selected-item) {
     color: white !important;
   }
-  
-  /* Ensure text is white in selected items */
-  :global(.selected-item) {
+  :global(.font-list-row:not(.selected-item)),
+  :global([data-item]:not(.selected-item)) {
+    color: hsl(var(--grey7)) !important;
+  }
+
+  /* Prevent hover from keeping sage+white on a row that is no longer selected. */
+  :global(.font-list-row.selected-item:hover),
+  :global([data-item].selected-item:hover) {
+    background-color: hsl(var(--sage-green)) !important;
     color: white !important;
   }
 

package/dist/components/ic/FontInputController.svelte.d.ts

@@ -23,7 +23,9 @@ declare const FontInputController: $$__sveltets_2_IsomorphicComponent<{
        * @prop {any} openDropdowns - Store tracking open dropdown states
        * @prop {Function} toggleDropdown - Function to toggle dropdown state
        * @prop {Function} onFocus - Optional focus handler
-       */ label: string;
+       */ label?: string;
+    class?: string;
+    style?: string;
     value?: {
         family: string;
         weight: string;

package/dist/components/ic/NumberInputController.svelte

@@ -57,9 +57,9 @@
 
     if (!isEditing && !bothBoundsUndefined) {
       if (value < minValue || value > maxValue) {
-        console.log('Value out of bounds, adjusting:', {
-          value, minValue, maxValue, isEditing
-        });
+        // console.log('Value out of bounds, adjusting:', {
+          // value, minValue, maxValue, isEditing
+        // });
         const clampedValue = Math.max(minValue, Math.min(maxValue, value));
         value = clampedValue;
         if (typeof onChange === 'function') {
@@ -98,24 +98,24 @@
    */
   function handleValueChange(adjustment: number) {
     try {
-      console.log('🔄 handleValueChange:', { currentValue: value, adjustment, min, max });
+      // console.log('🔄 handleValueChange:', { currentValue: value, adjustment, min, max });
       const newValue = value + adjustment;
       
       if (min !== undefined && newValue < min) {
-        console.log('⚠️ Value would go below min, clamping to:', min);
+        // console.log('⚠️ Value would go below min, clamping to:', min);
         value = min;
         if (onChange) onChange(min);
         return;
       }
       
       if (max !== undefined && newValue > max) {
-        console.log('⚠️ Value would exceed max, clamping to:', max);
+        // console.log('⚠️ Value would exceed max, clamping to:', max);
         value = max;
         if (onChange) onChange(max);
         return;
       }
       
-      console.log('✅ Setting new value:', newValue);
+      // console.log('✅ Setting new value:', newValue);
       value = newValue;
       if (onChange) onChange(newValue);
     } catch (error) {
@@ -132,24 +132,24 @@
       const input = e.currentTarget as HTMLInputElement;
       const inputValue = input.value;
       
-      console.log('handleInput start:', {
-        inputValue,
-        isEditing,
-        currentValue: value,
-        min,
-        max
-      });
+      // console.log('handleInput start:', {
+        // inputValue,
+        // isEditing,
+        // currentValue: value,
+        // min,
+        // max
+      // });
 
       // Handle empty input
       if (inputValue === '') {
-        console.log('Empty input detected - allowing editing');
+        // console.log('Empty input detected - allowing editing');
         isEditing = true;
         return;
       }
 
       // Prevent multiple minus signs
       if (inputValue.split('-').length > 2) {
-        console.log('Multiple minus signs detected, preventing');
+        // console.log('Multiple minus signs detected, preventing');
         input.value = inputValue.charAt(0) === '-' ? 
           '-' + inputValue.replace(/-/g, '') : 
           inputValue.replace(/-/g, '');
@@ -158,14 +158,14 @@
 
       // Allow single minus sign for negative numbers
       if (inputValue === '-' && min! < 0) {
-        console.log('Single minus sign detected');
+        // console.log('Single minus sign detected');
         isEditing = true;
         return;
       }
 
       // Validate numeric input
       if (!/^-?\d*$/.test(inputValue)) {
-        console.log('Invalid character detected');
+        // console.log('Invalid character detected');
         input.value = inputValue.replace(/[^\d-]/g, '');
         return;
       }
@@ -173,7 +173,7 @@
       const numValue = parseFloat(inputValue);
       if (!isNaN(numValue)) {
         if (max !== undefined && numValue > max) {
-          console.log('Number exceeds max:', { numValue, max });
+          // console.log('Number exceeds max:', { numValue, max });
           input.value = String(max);
           value = max;
           return;
@@ -190,7 +190,7 @@
    * Validates and normalizes input when focus is lost
    */
   function handleBlur() {
-    console.log('handleBlur:', { value, isEditing, min, max });
+    // console.log('handleBlur:', { value, isEditing, min, max });
     
     isEditing = false;
     const input = document.getElementById('number-input') as HTMLInputElement;
@@ -228,7 +228,7 @@
    * Handles continuous increment/decrement while button is held
    */
   function startAutoRepeat(operation: 'increment' | 'decrement', event: MouseEvent) {
-    console.log('🎯 startAutoRepeat called:', { operation });
+    // console.log('🎯 startAutoRepeat called:', { operation });
     event.preventDefault();
     event.stopPropagation();
     
@@ -239,20 +239,20 @@
     isPressed = true;
     
     // Handle initial click
-    console.log('👆 Initial click, applying adjustment:', adjustment);
+    // console.log('👆 Initial click, applying adjustment:', adjustment);
     handleValueChange(adjustment);
     
     // Set up auto-repeat
-    console.log('⏳ Setting up auto-repeat timer for', HOLD_DELAY, 'ms');
+    // console.log('⏳ Setting up auto-repeat timer for', HOLD_DELAY, 'ms');
     
     // Start auto-repeat after hold delay
     autoRepeatTimer = setTimeout(() => {
-      console.log('⌛ Hold delay completed, isPressed:', isPressed);
+      // console.log('⌛ Hold delay completed, isPressed:', isPressed);
       if (isPressed) {
-        console.log('🔄 Starting interval timer with delay:', REPEAT_INTERVAL);
+        // console.log('🔄 Starting interval timer with delay:', REPEAT_INTERVAL);
         autoRepeatInterval = setInterval(() => {
           if (isPressed) {
-            console.log('⚡ Interval tick - applying adjustment:', adjustment);
+            // console.log('⚡ Interval tick - applying adjustment:', adjustment);
             handleValueChange(adjustment);
           }
         }, REPEAT_INTERVAL);
@@ -270,15 +270,15 @@
       event.stopPropagation();
     }
     
-    console.log('🛑 stopAutoRepeat called');
+    // console.log('🛑 stopAutoRepeat called');
     
     if (autoRepeatTimer) {
-      console.log('🧹 Clearing auto-repeat timer');
+      // console.log('🧹 Clearing auto-repeat timer');
       clearTimeout(autoRepeatTimer);
       autoRepeatTimer = undefined;
     }
     if (autoRepeatInterval) {
-      console.log('🧹 Clearing auto-repeat interval');
+      // console.log('🧹 Clearing auto-repeat interval');
       clearInterval(autoRepeatInterval);
       autoRepeatInterval = undefined;
     }
@@ -291,7 +291,7 @@
    * Ensures auto-repeat timer is cleared when component is destroyed
    */
   onDestroy(() => {
-    console.log('♻️ Component destroying, cleaning up timers');
+    // console.log('♻️ Component destroying, cleaning up timers');
     stopAutoRepeat();
   });
 
@@ -321,16 +321,16 @@
    * Manages keyboard interactions and shortcuts
    */
   function handleKeyDown(e: KeyboardEvent) {
-    console.log('handleKeyDown:', {
-      key: e.key,
-      metaKey: e.metaKey,
-      ctrlKey: e.ctrlKey,
-      isEditing
-    });
+    // console.log('handleKeyDown:', {
+      // key: e.key,
+      // metaKey: e.metaKey,
+      // ctrlKey: e.ctrlKey,
+      // isEditing
+    // });
 
     // Handle selection shortcuts
     if ((e.metaKey || e.ctrlKey) && e.key === 'a') {
-      console.log('CMD+A detected, setting editing mode');
+      // console.log('CMD+A detected, setting editing mode');
       isEditing = true;
       return;
     }

package/dist/components/ic/RadioGroupInputController.svelte

@@ -44,7 +44,7 @@
    * @param newValue - The newly selected value
    */
   function handleValueChange(newValue: string) {
-    console.log('RadioGroupInputController: handleValueChange', newValue);
+    // console.log('RadioGroupInputController: handleValueChange', newValue);
     localValue = newValue;
     onChange(newValue);
   }

package/dist/components/ic/SliderRangeInputController.svelte

@@ -84,7 +84,7 @@
       const adjustedValue = validateAndAdjustValue(value);
       
       if (adjustedValue[0] !== value[0] || adjustedValue[1] !== value[1]) {
-        console.log('Adjusting initial range values to match constraints:', { original: value, adjusted: adjustedValue });
+        // console.log('Adjusting initial range values to match constraints:', { original: value, adjusted: adjustedValue });
         value = adjustedValue;
         
         // Wait for next tick to prevent scroll jump

package/dist/components/ic/SwitchInputController.svelte

@@ -15,7 +15,7 @@
 
   function toggle(newValue?: boolean) {
     value = typeof newValue === 'boolean' ? newValue : !value;
-    console.log('[SwitchIC] Toggled:', { label, value });
+    // console.log('[SwitchIC] Toggled:', { label, value });
     onChange(value);
   }
 </script>