@widgetic/editor 4.0.1 → 4.0.2

package/dist/components/ic/FontInputController.svelte

@@ -78,7 +78,7 @@
    * @prop {Function} onFocus - Optional focus handler
    */
   export let label: string;
-  export let value: { family: string; weight: string; category: string } | null = null;
+  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;
   export let controllerId: string;
@@ -91,7 +91,7 @@
   
   // Font weight state - remove localStorage check on init
   let selectedWeight = `${controllerId}-Regular`;
-  let availableWeights: string[] = [];
+  let availableWeights: string[] = ['Regular', 'Medium', 'SemiBold', 'Bold'];
   
   // Font search and filter state
   let allFonts: FontItem[] = [];
@@ -120,6 +120,25 @@
   export let hideRecentFromList: boolean = false;
   export let hideTrashIcon: boolean = true;
 
+  function coerceFontValue(raw: typeof value): { family: string; weight: string; category: string } | null {
+    if (!raw) return null;
+    if (typeof raw === 'object' && raw.family) {
+      return {
+        family: raw.family,
+        weight: raw.weight || 'Regular',
+        category: raw.category || 'Sans Serif',
+      };
+    }
+    if (typeof raw === 'string' && raw.trim()) {
+      const family = raw.split(',')[0].replace(/['"]/g, '').trim();
+      if (!family) return null;
+      return { family, weight: 'Regular', category: 'Sans Serif' };
+    }
+    return null;
+  }
+
+  $: resolvedFont = coerceFontValue(value);
+
   // Add scroll state tracking
   let isScrolled = false;
 
@@ -188,9 +207,12 @@
   onMount(async () => {
     try {
       if (browser) {
-        // If we have an initial value, use its weight
-        if (value?.weight) {
-          selectedWeight = `${controllerId}-${value.weight}`;
+        const coerced = coerceFontValue(value);
+        if (coerced?.weight) {
+          selectedWeight = `${controllerId}-${coerced.weight}`;
+        }
+        if (typeof value === 'string' && coerced && onChange) {
+          onChange(coerced);
         }
         
         // Load saved filter
@@ -1368,8 +1390,8 @@
     }
   }
 
-  $: if (value?.family) {
-    fetchFontWeights(value.family);
+  $: if (resolvedFont?.family) {
+    fetchFontWeights(resolvedFont.family);
   }
 
   /**
@@ -1597,7 +1619,7 @@
   }
   
   function isFontSelected(font: FontItem) {
-    return value?.family === font.family;
+    return resolvedFont?.family === font.family;
   }
   
   function isCustomFont(font: FontItem) {
@@ -1617,30 +1639,25 @@
   }
 </script>
 
-<!-- Font Input Container -->
-<div class="flex flex-col widgetic-colors">
-  <!-- Font Family Section -->
-  <div class="flex flex-col gap-[8px]">
-    <div class="flex items-center w-full relative h-[48px]">
-      <div class="w-[185px] flex-shrink-0 ml-auto">
-        <InputControllerHeader 
-          label={label}
-          helpText={description}
-        />
-      </div>
-      
-      <div class="absolute right-0">
-        <div class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green">
+<!-- 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">
+  <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}
+        </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;">
           <!-- Font Family Button -->
           <Popover.Root 
             open={$openDropdowns?.has(controllerId)}
             onOpenChange={(isOpen) => {
               if (isOpen !== $openDropdowns?.has(controllerId)) {
-                if (!isOpen && value?.family && !shouldSkipFont(value.family)) {
+                if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
                   fontUtils.addRecentFont({
-                    family: value.family,
-                    category: normalizeCategory(value.category) as FontItem['category'],
-                    isCustom: fontManagerInstance?.isCustomFont(value.family) || false
+                    family: resolvedFont.family,
+                    category: normalizeCategory(resolvedFont.category) as FontItem['category'],
+                    isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
                   });
                 } else if (isOpen) {
                   // Reset active search index when opening the dropdown
@@ -1676,9 +1693,9 @@
             >
               <span
                 class="truncate flex-1 text-left subtext text-grey7"
-                style="font-family: '{value?.family || 'system-ui'}', sans-serif; font-display: swap;"
+                style="font-family: '{resolvedFont?.family || 'system-ui'}', sans-serif; font-display: swap;"
               >
-                {value?.family || "Select font..."}
+                {resolvedFont?.family || "Select font..."}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
@@ -1809,9 +1826,9 @@
                           {#each filteredFonts as font, index (`${font.family}-${searchTerm ? 'search' : currentFilter}-${index}`)}
                             <!-- svelte-ignore a11y_click_events_have_key_events -->
                             <div
-                              class="w-full py-1 px-4 cursor-pointer overflow-hidden relative rounded-small h-[42px] flex items-center
-                                {value?.family === font.family ? 'bg-sage-green text-white selected-item' : 
-                                index === activeSearchIndex && searchTerm ? 'bg-light-green text-sage-green' : 
+                              class="font-list-row w-full py-1 px-4 cursor-pointer overflow-hidden relative rounded-small h-[42px] flex items-center
+                                {isFontSelected(font) ? 'bg-sage-green selected-item' :
+                                index === activeSearchIndex && searchTerm ? 'bg-light-green' :
                                 'hover:bg-light-green'}"
                               data-font={font.family}
                               use:observeFont
@@ -1819,12 +1836,13 @@
                               onmouseenter={() => handleMouseEnter(index)}
                               role="button"
                               tabindex="0"
+                              style="color: {isFontSelected(font) ? '#ffffff' : 'hsl(var(--grey7))'};"
                             >
                               <div class="flex items-center flex-1 min-w-0 group">
-                                <Check class="mr-2 h-6 w-6 flex-shrink-0 {value?.family === font.family ? 'text-white' : 'text-sage-green opacity-0'}"/>
+                                <Check class="mr-2 h-6 w-6 flex-shrink-0 {isFontSelected(font) ? 'text-white' : 'text-sage-green opacity-0'}"/>
                                 <span 
                                   class="text-[24px] truncate {index === activeSearchIndex && searchTerm ? 'font-medium' : ''}"
-                                  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;"
                                 >
                                   {@html highlightMatch(font.family, searchTerm)}
                                 </span>
@@ -1861,15 +1879,13 @@
             </Popover.Content>
           </Popover.Root>
         </div>
-      </div>
-    </div>
+  </div>
 
-    <!-- Font Weight Section -->
-    <div class="flex items-center w-full relative h-[48px]">
-      <div class="w-[185px]"></div>
-      <div class="absolute right-0">
-        <div class="h-[48px] w-[185px] rounded-large border border-grey2 flex items-center bg-grey1 transition-colors duration-200 hover:border-forest-green">
-          <!-- Font Weight Button -->
+    <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" />
+      </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;">
           <Popover.Root 
             open={$openDropdowns?.has('weight-' + controllerId)}
             onOpenChange={(isOpen) => {
@@ -1880,33 +1896,33 @@
           >
             <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">
               <span class="truncate flex-1 text-left subtext text-grey7">
-                {displayWeight}
+                {displayWeight || 'Regular'}
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
             <Popover.Content class="p-0 w-[150px]">
               <Command.Root>
-                <Command.Group>
-                  {#each availableWeights as weight}
-                    <Command.Item
-                      value={weight}
-                      onSelect={() => handleWeightSelect(weight)}
-                      class="px-2 py-2"
-                    >
-                      <Check 
-                        class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
-                      />
-                      <span class="truncate">{weight}</span>
-                    </Command.Item>
-                  {/each}
-                </Command.Group>
+                <Command.List>
+                  <Command.Group>
+                    {#each availableWeights as weight}
+                      <Command.Item
+                        value={weight}
+                        onSelect={() => handleWeightSelect(weight)}
+                        class="px-2 py-2"
+                      >
+                        <Check 
+                          class="mr-1 h-4 w-4 {displayWeight === weight ? 'opacity-100' : 'opacity-0'}"
+                        />
+                        <span class="truncate">{weight}</span>
+                      </Command.Item>
+                    {/each}
+                  </Command.Group>
+                </Command.List>
               </Command.Root>
             </Popover.Content>
           </Popover.Root>
-        </div>
       </div>
     </div>
-  </div>
 
   {#if description}
     <p class="subtext text-grey5">{description}</p>
@@ -1914,6 +1930,24 @@
 </div>
 
 <style>
+  .font-family-row,
+  .font-weight-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .font-family-input-ct,
+  .font-weight-input-ct {
+    width: 185px !important;
+    max-width: 185px !important;
+    min-width: 185px !important;
+    margin-left: auto;
+    flex-shrink: 0;
+    position: relative;
+  }
+
   /* Update button styles */
   :global(button.bg-transparent) {
     background: transparent !important;
@@ -1932,9 +1966,11 @@
     scrollbar-color: hsl(var(--grey3)) transparent;
   }
 
-  /* Ensure buttons take full width */
-  :global(.popover-trigger),
-  :global(.popover-trigger button) {
+  /* Trigger fills the 185px column only — do not leak width:100% to other ICs */
+  .font-family-input-ct :global(.popover-trigger),
+  .font-family-input-ct :global(.popover-trigger button),
+  .font-weight-input-ct :global(.popover-trigger),
+  .font-weight-input-ct :global(.popover-trigger button) {
     width: 100% !important;
     height: 100% !important;
   }

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

@@ -28,7 +28,7 @@ declare const FontInputController: $$__sveltets_2_IsomorphicComponent<{
         family: string;
         weight: string;
         category: string;
-    } | null;
+    } | string | null;
     onChange?: ((newValue: {
         family: string;
         weight: string;