@widgetic/editor 4.0.2 → 4.0.3

package/dist/components/ic/TextAreaInputController.svelte

@@ -285,12 +285,12 @@
         const containerHeight = contentArea.clientHeight;
         const isOverflowing = contentHeight > containerHeight;
         
-        console.log('Initial overflow check:', {
-          contentHeight,
-          containerHeight,
-          difference: contentHeight - containerHeight,
-          isOverflowing
-        });
+        // console.log('Initial overflow check:', {
+          // contentHeight,
+          // containerHeight,
+          // difference: contentHeight - containerHeight,
+          // isOverflowing
+        // });
         
         if (isOverflowing) {
           proseMirror.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
@@ -361,7 +361,7 @@
     // Only update if there's a change to prevent unnecessary rerenders
     if (JSON.stringify(newFormats) !== JSON.stringify($state.snapshot(activeFormats))) {
       activeFormats = newFormats;
-      console.log('Active formats updated:', $state.snapshot(activeFormats));
+      // console.log('Active formats updated:', $state.snapshot(activeFormats));
     }
   }
 
@@ -416,7 +416,7 @@
 
     // Use $state.snapshot() for logging
     const currentValues = $state.snapshot(toggleValues);
-    console.log('Toggle change:', { newValues, currentValues });
+    // console.log('Toggle change:', { newValues, currentValues });
     
     // Find which format was toggled by comparing the arrays
     const added = newValues.filter(v => !currentValues.includes(v));
@@ -427,14 +427,14 @@
       // Find the format type for the added value
       const format = Object.entries(formatMapping).find(([_, m]) => m.value === added[0])?.[0] as FormatType;
       if (format) {
-        console.log('Applying format:', format);
+        // console.log('Applying format:', format);
         applyFormat(format, true);
       }
     } else if (removed.length > 0) {
       // Find the format type for the removed value
       const format = Object.entries(formatMapping).find(([_, m]) => m.value === removed[0])?.[0] as FormatType;
       if (format) {
-        console.log('Removing format:', format);
+        // console.log('Removing format:', format);
         applyFormat(format, false);
       }
     }
@@ -454,7 +454,7 @@
       const { from, to } = editorInstance.state.selection;
       const selectedText = editorInstance.state.doc.textBetween(from, to);
       
-      console.log('Changing style for text "%s" to:', (selectedText || 'No text selected'), value);
+      // console.log('Changing style for text "%s" to:', (selectedText || 'No text selected'), value);
 
       // Store the current scroll position and selection
       const editorDom = editorInstance.view.dom;
@@ -696,18 +696,18 @@
         currentColor = color;
       }
 
-      console.log('Selection updated:', {
-        text: editorInstance.state.doc.textBetween(from, to),
-        range: { from, to },
-        style: currentTextStyle,
-        format: [
-          ...(editorInstance.isActive('bold') ? ['b'] : []),
-          ...(editorInstance.isActive('italic') ? ['i'] : []),
-          ...(editorInstance.isActive('underline') ? ['u'] : []),
-          ...(editorInstance.isActive('link') ? ['link'] : [])
-        ],
-        color: currentColor
-      });
+      // console.log('Selection updated:', {
+        // text: editorInstance.state.doc.textBetween(from, to),
+        // range: { from, to },
+        // style: currentTextStyle,
+        // format: [
+          // ...(editorInstance.isActive('bold') ? ['b'] : []),
+          // ...(editorInstance.isActive('italic') ? ['i'] : []),
+          // ...(editorInstance.isActive('underline') ? ['u'] : []),
+          // ...(editorInstance.isActive('link') ? ['link'] : [])
+        // ],
+        // color: currentColor
+      // });
     } else {
       selectedRange = null;
       currentColor = textColor; // Reset to default color when deselecting

package/dist/components/ic/TextAreaPreviewInputController.svelte

@@ -121,7 +121,7 @@
   }
 
   function handleClick() {
-    console.log('Opening text area in portal');
+    // console.log('Opening text area in portal');
     isShowingTextArea = !isShowingTextArea;
   }
 
@@ -145,7 +145,7 @@
   }
 
   $: if (value) {
-    console.log('[TextAreaPreview] compact preview html', value.slice(0, 180));
+    // console.log('[TextAreaPreview] compact preview html', value.slice(0, 180));
   }
 
   function handlePortalMouseEnter() {

package/dist/components/ic/VectorInputController.svelte

@@ -329,7 +329,7 @@
           const testImg = new Image();
           testImg.onload = () => {
             // Vector loads successfully
-            console.log(`✅ [VectorInput] Current vector loads successfully: ${value.name}`);
+            // console.log(`✅ [VectorInput] Current vector loads successfully: ${value.name}`);
           };
           testImg.onerror = () => {
             // Mark as error if it fails to load
@@ -420,13 +420,13 @@
 
       // Preload the vectors to detect missing files early
       if (filteredVectors.length > 0) {
-        console.log(`🔍 [VectorInput] Preloading ${filteredVectors.length} vectors to detect missing files...`);
+        // console.log(`🔍 [VectorInput] Preloading ${filteredVectors.length} vectors to detect missing files...`);
         preloadVectors(filteredVectors);
       }
       
       // Also preload recent vectors
       if (recentVectors.length > 0) {
-        console.log(`🔍 [VectorInput] Preloading ${recentVectors.length} recent vectors...`);
+        // console.log(`🔍 [VectorInput] Preloading ${recentVectors.length} recent vectors...`);
         preloadVectors(recentVectors);
       }
 
@@ -897,12 +897,12 @@
               }
             }, 0);
 
-            console.log('📝 [VectorSearch] Loaded next batch:', {
-              batchSize: nextBatch.length,
-              totalDisplayed: filteredVectors.length,
-              remainingVectors: currentSearchResults.length - filteredVectors.length,
-              nextBatchSize: SEARCH_BATCH_SIZE
-            });
+            // console.log('📝 [VectorSearch] Loaded next batch:', {
+              // batchSize: nextBatch.length,
+              // totalDisplayed: filteredVectors.length,
+              // remainingVectors: currentSearchResults.length - filteredVectors.length,
+              // nextBatchSize: SEARCH_BATCH_SIZE
+            // });
           }
         } else {
           // Normal vector list scrolling
@@ -971,17 +971,17 @@
     }
     showVectorModal = false;
     
-    console.log('🧹 [VectorInput] Cleanup complete:', {
-      controllerId,
-      lastFilter: currentFilter
-    });
+    // console.log('🧹 [VectorInput] Cleanup complete:', {
+      // controllerId,
+      // lastFilter: currentFilter
+    // });
   });
 
   /**
    * Opens the file browser for vector selection
    */
   async function openFileBrowser() {
-    console.log('🔍 [VectorInput] Opening file browser for vectors');
+    // console.log('🔍 [VectorInput] Opening file browser for vectors');
 
     try {
       // Get the current vector's ID if it exists in our custom vectors
@@ -990,10 +990,10 @@
           .find(v => v.name === value.name && v.category === 'Mine')?.name 
         : undefined;
 
-      console.log('🔍 [VectorInput] Opening file browser:', {
-        fileTypes: ['svg'],
-        selectedId
-      });
+      // console.log('🔍 [VectorInput] Opening file browser:', {
+        // fileTypes: ['svg'],
+        // selectedId
+      // });
 
       // TODO: Implement file browser functionality
       // This will be similar to FontInputController but for SVG files
@@ -1167,21 +1167,21 @@
   // Add to VectorInputController.svelte
   function handleToggle() {
     const beforeState = $openDropdowns?.has(controllerId);
-    console.log('🟡 [VectorInput] Toggle start:', {
-      controllerId,
-      beforeState,
-      openDropdowns: Array.from($openDropdowns || new Set())
-    });
+    // console.log('🟡 [VectorInput] Toggle start:', {
+      // controllerId,
+      // beforeState,
+      // openDropdowns: Array.from($openDropdowns || new Set())
+    // });
     
     toggleDropdown(controllerId);
     
     const afterState = $openDropdowns?.has(controllerId);
-    console.log('🟢 [VectorInput] Toggle complete:', {
-      controllerId,
-      beforeState,
-      afterState,
-      openDropdowns: Array.from($openDropdowns || new Set())
-    });
+    // console.log('🟢 [VectorInput] Toggle complete:', {
+      // controllerId,
+      // beforeState,
+      // afterState,
+      // openDropdowns: Array.from($openDropdowns || new Set())
+    // });
   }
 
   function closeDropdown() {
@@ -1216,7 +1216,7 @@
 
       // If scrolling outside our containers, close dropdowns
       if ($openDropdowns?.has(controllerId)) {
-        console.log('🔴 [VectorInput] Closing dropdown due to external scroll');
+        // console.log('🔴 [VectorInput] Closing dropdown due to external scroll');
         toggleDropdown(controllerId);
       }
     }
@@ -1283,7 +1283,7 @@
   // Create a Svelte action to handle image error events
   function handleImageError(node: HTMLElement, vectorName: string) {
     const errorHandler = (event: Event) => {
-      console.log(`❌ [VectorInput] Image failed to load: ${vectorName}`);
+      // console.log(`❌ [VectorInput] Image failed to load: ${vectorName}`);
       svgLoadErrors.set(vectorName, true);
       svgLoadErrors = new Map(svgLoadErrors);
       
@@ -1481,7 +1481,7 @@
                     if (hasSvgLoadError(value.name)) {
                       svgLoadErrors.delete(value.name);
                       svgLoadErrors = new Map(svgLoadErrors);
-                      console.log(`✅ [VectorInput] Vector now loads successfully: ${value.name}`);
+                      // console.log(`✅ [VectorInput] Vector now loads successfully: ${value.name}`);
                     }
                   };
                   testImg.onerror = () => {
@@ -1648,10 +1648,10 @@
                     // Ensure the observer is set up after the DOM updates
                     setTimeout(() => {
                       setupVectorObserver();
-                      console.log('🔄 [VectorSearch] Observer setup after search clear');
+                      // console.log('🔄 [VectorSearch] Observer setup after search clear');
                     }, 50);
                     
-                    console.log('🔄 [VectorSearch] Search cleared');
+                    // console.log('🔄 [VectorSearch] Search cleared');
                   }}
                 />
               </div>

package/dist/components/ic/shared/CategoryTabs.svelte

@@ -25,6 +25,7 @@
         {@const isActive = getCategoryKey(activeCategory) === getCategoryKey(category)}
         <button 
           type="button"
+          tabindex="-1"
           class="cursor-pointer caption transition-colors text-center {
             isActive 
               ? 'text-grey7' 

package/dist/components/ic/shared/RecentItemsSection.svelte

@@ -26,6 +26,7 @@
   export let displayMode: 'list' | 'grid' = 'list';
   export let hideTrashIcon: boolean = false;
   export let itemType: 'font' | 'vector' = 'font';
+  export let selectionToken = '';
   
   // Helper function to determine if the result has HTML content
   function hasHtml(result: { html: string } | string): result is { html: string } {
@@ -39,7 +40,7 @@
     
     {#if displayMode === 'list'}
       <div class="grid grid-cols-1">
-        {#each recentItems as item (getItemKey(item))}
+        {#each recentItems as item (getItemKey(item) + '-' + selectionToken)}
           {@const renderedItem = renderItem(item)}
           {@const selected = isItemSelected(item)}
           
@@ -47,9 +48,10 @@
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div 
-              class="w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
+              class="font-list-row w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
               class:bg-sage-green={selected}
               class:text-white={selected}
+              class:text-grey7={!selected}
               class:hover:bg-light-green={!selected}
               class:selected-item={selected}
               onclick={() => onItemSelect(item)}
@@ -69,6 +71,7 @@
                 {#if isCustomItem(item) && !hideTrashIcon}
                   <button 
                     type="button"
+                    tabindex="-1"
                     class="p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors"
                     onclick={(e) => {
                       e.stopPropagation();
@@ -84,9 +87,10 @@
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div 
-              class="w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
+              class="font-list-row w-full px-4 cursor-pointer overflow-hidden relative rounded-small"
               class:bg-sage-green={selected}
               class:text-white={selected}
+              class:text-grey7={!selected}
               class:hover:bg-light-green={!selected}
               class:selected-item={selected}
               onclick={() => onItemSelect(item)}
@@ -105,6 +109,7 @@
                 {#if isCustomItem(item) && !hideTrashIcon}
                   <button 
                     type="button"
+                    tabindex="-1"
                     class="p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors"
                     onclick={(e) => {
                       e.stopPropagation();
@@ -121,7 +126,7 @@
       </div>
     {:else}
       <div class="grid grid-cols-3 gap-x-6 gap-y-4 pt-2 pb-0">
-        {#each recentItems as item (getItemKey(item))}
+        {#each recentItems as item (getItemKey(item) + '-' + selectionToken)}
           {@const renderedItem = renderItem(item)}
           {@const selected = isItemSelected(item)}
           
@@ -132,6 +137,7 @@
               class="flex-shrink-0 flex items-center justify-center widgetic-radius rounded transition-colors cursor-pointer border-2 border-grey2"
               class:bg-sage-green={selected}
               class:text-white={selected}
+              class:text-grey7={!selected}
               class:border-sage-green={selected}
               class:hover:bg-light-green={!selected}
               class:selected-item={selected}
@@ -152,6 +158,7 @@
                   <button 
                     type="button"
                     class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    tabindex="-1"
                     onclick={(e) => {
                       e.stopPropagation();
                       onItemDelete(item, e);
@@ -169,6 +176,7 @@
               class="flex-shrink-0 flex items-center justify-center widgetic-radius rounded transition-colors cursor-pointer border-2 border-grey2"
               class:bg-sage-green={selected}
               class:text-white={selected}
+              class:text-grey7={!selected}
               class:border-sage-green={selected}
               class:hover:bg-light-green={!selected}
               class:selected-item={selected}
@@ -188,6 +196,7 @@
                   <button 
                     type="button"
                     class="absolute top-1 right-1 p-1 rounded-full hover:bg-red-100 hover:text-red-500 transition-colors bg-white"
+                    tabindex="-1"
                     onclick={(e) => {
                       e.stopPropagation();
                       onItemDelete(item, e);
@@ -252,9 +261,15 @@
     background-color: hsl(var(--light-green)) !important;
   }
   
-  /* Prevent hover effect on selected items */
-  :global(.selected-item:hover) {
+  :global(.font-list-row.selected-item:hover),
+  :global([data-item].selected-item:hover) {
     background-color: hsl(var(--sage-green)) !important;
+    color: white !important;
+  }
+
+  :global(.font-list-row:not(.selected-item)),
+  :global([data-item]:not(.selected-item)) {
+    color: hsl(var(--grey7)) !important;
   }
   
 </style> 

package/dist/components/ic/shared/RecentItemsSection.svelte.d.ts

@@ -28,6 +28,7 @@ declare const RecentItemsSection: $$__sveltets_2_IsomorphicComponent<{
     displayMode?: "list" | "grid";
     hideTrashIcon?: boolean;
     itemType?: "font" | "vector";
+    selectionToken?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/stores/userSession.d.ts

@@ -1,6 +1,6 @@
 export declare const userSession: import("svelte/store").Writable<{
     user: any;
-    jwt: any;
+    jwt: string | null;
 }>;
 export declare function setSession(user: any, jwt: any): void;
 export declare function clearSession(): void;

package/dist/stores/userSession.js

@@ -1,7 +1,22 @@
 import { writable } from 'svelte/store';
+const isBrowser = typeof window !== 'undefined';
+let initialJwt = null;
+let initialUser = null;
+if (isBrowser) {
+    try {
+        initialJwt = localStorage.getItem('jwt');
+        const userStr = localStorage.getItem('user');
+        if (userStr) {
+            initialUser = JSON.parse(userStr);
+        }
+    }
+    catch (error) {
+        console.error('Failed to read initial session from localStorage:', error);
+    }
+}
 export const userSession = writable({
-    user: null,
-    jwt: null
+    user: initialUser,
+    jwt: initialJwt
 });
 export function setSession(user, jwt) {
     userSession.set({ user, jwt });

package/dist/utils/FontManager.d.ts

@@ -25,7 +25,7 @@ export interface FontData {
     /** Google Web Fonts API variant ids (e.g. "400", "700", "regular") */
     variants?: string[];
 }
-/** Maps Google Fonts API variant ids to display weight labels. */
+/** Maps Google Fonts API variant ids to display weight labels (includes italic faces). */
 export declare function mapGoogleVariantIdsToWeightNames(variants: string[]): string[];
 declare class FontManager {
     private static readonly DEBUG_MODE;