@widgetic/editor 4.0.6 → 4.0.7

package/dist/components/ic/DropdownInputController.svelte

@@ -51,6 +51,10 @@
    */
   $: open = $openDropdowns?.has(controllerId) || false;
 
+  /** Timestamp of the last open — used to ignore bits-ui's own opening scrolls. */
+  let lastOpenTimestamp = 0;
+  $: if (open) lastOpenTimestamp = performance.now();
+
   /**
    * Closes the dropdown if it's currently open
    * Used for cleanup and external close triggers
@@ -63,9 +67,25 @@
 
   /**
    * Scroll Event Handler
-   * Closes dropdown when scrolling occurs to prevent floating UI issues
+   * Closes dropdown when scrolling occurs to prevent floating UI issues.
+   * Guarded: bits-ui may scroll the viewport/list right after opening, and the
+   * capture-phase listener would otherwise close the dropdown in the same frame
+   * (which looked like "the dropdown never opens" in the Embed overlay).
    */
-  function handleScroll() {
+  function handleScroll(event?: Event) {
+    if (!open) return;
+    // Grace period after opening — ignore self-inflicted scrolls from bits-ui.
+    if (performance.now() - lastOpenTimestamp < 300) return;
+    // Never close on scrolls that happen inside the dropdown itself or its portal.
+    const target = event?.target as Node | null;
+    if (
+      target instanceof Element &&
+      (target.closest('[data-bits-floating-content-wrapper]') ||
+        target.closest('[role="listbox"]') ||
+        target.closest('.dropdown-ic-content'))
+    ) {
+      return;
+    }
     closeDropdown();
   }
 
@@ -104,7 +124,8 @@
     }
   }
 
-  $: triggerContent = options.find((o) => o.value === (value.value || value))?.label ?? defaultSelectedLabel;
+  $: selectedValue = typeof value === 'string' ? value : value?.value ?? '';
+  $: triggerContent = options.find((option) => option.value === selectedValue)?.label ?? defaultSelectedLabel;
 </script>
 
 <!-- Dropdown Container -->
@@ -122,7 +143,7 @@
       >
         <Select.Root 
           type="single"
-          value={value.value || value}
+          value={selectedValue}
           onValueChange={handleValueChange}
           open={open}
           onOpenChange={handleOpenChange}
@@ -218,9 +239,13 @@
     display: none;
   }
 
-  /* Override bits-ui floating wrapper z-index (default 50 is too low).
-     The wrapper is portaled to body by bits-ui, so we target it globally. */
+  /* bits-ui portals the Select content to <body> and wraps it in
+     [data-bits-floating-content-wrapper]. The floating layer's default z-index
+     (50) sat below page overlays — in the composition Embed overlay
+     (z-index 100000) the dropdown opened but was painted behind the dark
+     backdrop, so it looked like it never opened. Lift the wrapper above any
+     app overlay. */
   :global([data-bits-floating-content-wrapper]) {
-    z-index: 99999 !important;
+    z-index: 1000001 !important;
   }
 </style>

package/dist/components/ic/FontInputController.svelte

@@ -95,6 +95,7 @@
   // Font weight state - remove localStorage check on init
   let selectedWeight = `${controllerId}-Regular`;
   let availableWeights: string[] = ['Regular', 'Medium', 'SemiBold', 'Bold'];
+  let fontCatalogFallbackWarned = false;
   
   // Font search and filter state
   let allFonts: FontItem[] = [];
@@ -625,7 +626,7 @@
 
     // try {
     //   // Get the current font's ID if it exists in our custom fonts
-    //   const selectedId = value?.family ? 
+    //   const selectedId = resolvedFont?.family ?
     //     fontManagerInstance?.getCachedFontList()
     //       .find(f => f.family === value.family && f.category === 'Mine')?.id 
     //     : undefined;
@@ -1360,6 +1361,9 @@
    */
   async function fetchFontWeights(fontFamily: string) {
     try {
+      // Wait for FontManager init — reactive weight fetch can race ahead of onMount.
+      fontManagerInstance = await FontManager.getInstance(appConfig.GOOGLE_FONTS_API_KEY);
+
       // First check if it's a custom font using FontManager
       if (fontManagerInstance?.isCustomFont(fontFamily)) {
         // Get custom font data
@@ -1397,7 +1401,16 @@
       }
 
       // Google font: use catalog cached by FontManager (no extra API call per font)
-      const variantIds = fontManagerInstance?.getGoogleFontVariantIds(fontFamily);
+      let variantIds = fontManagerInstance?.getGoogleFontVariantIds(fontFamily);
+      if (!variantIds?.length) {
+        // Catalog may still be empty right after init edge cases — force list load once.
+        try {
+          await fontManagerInstance.getInitialFontList();
+        } catch (catalogError) {
+          console.warn('[FontInput] Catalog refresh failed before weight lookup:', catalogError);
+        }
+        variantIds = fontManagerInstance?.getGoogleFontVariantIds(fontFamily);
+      }
       if (variantIds?.length) {
         availableWeights = mapGoogleVariantIdsToWeightNames(variantIds);
         if (!availableWeights.includes(selectedWeight.replace(`${controllerId}-`, ''))) {
@@ -1407,7 +1420,11 @@
       }
 
       // API unavailable (403 / no catalog): sensible defaults, still loads via fonts.googleapis.com CSS
-      console.warn('[FontInput] Using default weights for font (Google catalog not loaded):', fontFamily);
+      // Warn once — not on every reactive re-run during catalog race.
+      if (!fontCatalogFallbackWarned) {
+        fontCatalogFallbackWarned = true;
+        console.warn('[FontInput] Using default weights (Google catalog not loaded). Later fonts will use the same fallback silently.');
+      }
       availableWeights = ['Regular', 'Bold'];
       selectedWeight = `${controllerId}-Regular`;
     } catch (error) {
@@ -1431,7 +1448,7 @@
    */
   function highlightMatch(name: string, term: string) {
     // Check if this font is the selected one
-    const isSelected = value?.family === name;
+    const isSelected = resolvedFont?.family === name;
     
     if (!term) {
       // If no search term, just return the name with appropriate color
@@ -1558,7 +1575,7 @@
       await fontManagerInstance?.removeCustomFont(fontFamily);
       
       // If the removed font was selected, clear the selection
-      if (value?.family === fontFamily && onChange) {
+      if (resolvedFont?.family === fontFamily && onChange) {
         onChange({
           family: '',
           weight: 'Regular',
@@ -1719,7 +1736,7 @@
               }
             }}
           >
-            <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"
+            <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
@@ -1896,7 +1913,7 @@
                                   <div
                                     role="button"
                                     tabindex="-1"
-                                    class="ml-auto transition-opacity {value?.family === font.family ? 'opacity-0 pointer-events-none' : 'opacity-0 group-hover:opacity-100'}"
+                                    class="ml-auto transition-opacity {resolvedFont?.family === font.family ? 'opacity-0 pointer-events-none' : 'opacity-0 group-hover:opacity-100'}"
                                     onclick={(e) => {
                                       e.stopPropagation();
                                       e.preventDefault();
@@ -1939,7 +1956,7 @@
               }
             }}
           >
-            <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">
+            <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>

package/dist/components/ic/InputControllerRenderer.svelte

@@ -0,0 +1,98 @@
+<script module lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import {
+    TextInputController, TextAreaPreviewInputController, NumberInputController,
+    SliderInputController, SliderRangeInputController, DropdownInputController,
+    DatePickerInputController, DateFieldInputController, RangeCalendarInputController,
+    SwitchInputController, ColorPickerInputController, CheckboxInputController,
+    RadioGroupInputController, FontInputController, PositionInputController,
+    BrowserInputController, FixedPositionInputController, VectorInputController,
+    AngleInputController, TimeInputController, RoundedCornersInputController, TagsInputController
+  } from './index';
+
+  type ControllerComponents = {
+    textinput: typeof TextInputController;
+    textarea: typeof TextAreaPreviewInputController;
+    number: typeof NumberInputController;
+    slider: typeof SliderInputController;
+    sliderrange: typeof SliderRangeInputController;
+    dropdown: typeof DropdownInputController;
+    datepicker: typeof DatePickerInputController;
+    datefield: typeof DateFieldInputController;
+    rangecalendar: typeof RangeCalendarInputController;
+    switch: typeof SwitchInputController;
+    colorpicker: typeof ColorPickerInputController;
+    checkbox: typeof CheckboxInputController;
+    radiogroup: typeof RadioGroupInputController;
+    font: typeof FontInputController;
+    position: typeof PositionInputController;
+    browser: typeof BrowserInputController;
+    fixedposition: typeof FixedPositionInputController;
+    vector: typeof VectorInputController;
+    angle: typeof AngleInputController;
+    time: typeof TimeInputController;
+    roundedcorners: typeof RoundedCornersInputController;
+    tags: typeof TagsInputController;
+  };
+
+  // Each branch preserves the relationship between a controller and its props.
+  export type ControllerDescriptor = {
+    [Kind in keyof ControllerComponents]: { kind: Kind; props: ComponentProps<ControllerComponents[Kind]> }
+  }[keyof ControllerComponents];
+</script>
+
+<script lang="ts">
+  let { controller, class: className = '', style = '' }: {
+    controller: ControllerDescriptor | null;
+    class?: string;
+    style?: string;
+  } = $props();
+</script>
+
+<div class="input-controller-renderer contents {className}" {style}>
+  {#if controller?.kind === 'textinput'}
+    <TextInputController {...controller.props} />
+  {:else if controller?.kind === 'textarea'}
+    <TextAreaPreviewInputController {...controller.props} />
+  {:else if controller?.kind === 'number'}
+    <NumberInputController {...controller.props} />
+  {:else if controller?.kind === 'slider'}
+    <SliderInputController {...controller.props} />
+  {:else if controller?.kind === 'sliderrange'}
+    <SliderRangeInputController {...controller.props} />
+  {:else if controller?.kind === 'dropdown'}
+    <DropdownInputController {...controller.props} />
+  {:else if controller?.kind === 'datepicker'}
+    <DatePickerInputController {...controller.props} />
+  {:else if controller?.kind === 'datefield'}
+    <DateFieldInputController {...controller.props} />
+  {:else if controller?.kind === 'rangecalendar'}
+    <RangeCalendarInputController {...controller.props} />
+  {:else if controller?.kind === 'switch'}
+    <SwitchInputController {...controller.props} />
+  {:else if controller?.kind === 'colorpicker'}
+    <ColorPickerInputController {...controller.props} />
+  {:else if controller?.kind === 'checkbox'}
+    <CheckboxInputController {...controller.props} />
+  {:else if controller?.kind === 'radiogroup'}
+    <RadioGroupInputController {...controller.props} />
+  {:else if controller?.kind === 'font'}
+    <FontInputController {...controller.props} />
+  {:else if controller?.kind === 'position'}
+    <PositionInputController {...controller.props} />
+  {:else if controller?.kind === 'browser'}
+    <BrowserInputController {...controller.props} />
+  {:else if controller?.kind === 'fixedposition'}
+    <FixedPositionInputController {...controller.props} />
+  {:else if controller?.kind === 'vector'}
+    <VectorInputController {...controller.props} />
+  {:else if controller?.kind === 'angle'}
+    <AngleInputController {...controller.props} />
+  {:else if controller?.kind === 'time'}
+    <TimeInputController {...controller.props} />
+  {:else if controller?.kind === 'roundedcorners'}
+    <RoundedCornersInputController {...controller.props} />
+  {:else if controller?.kind === 'tags'}
+    <TagsInputController {...controller.props} />
+  {/if}
+</div>

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

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'svelte';
+import { TextInputController, TextAreaPreviewInputController, NumberInputController, SliderInputController, SliderRangeInputController, DropdownInputController, DatePickerInputController, DateFieldInputController, RangeCalendarInputController, SwitchInputController, ColorPickerInputController, CheckboxInputController, RadioGroupInputController, FontInputController, PositionInputController, BrowserInputController, FixedPositionInputController, VectorInputController, AngleInputController, TimeInputController, RoundedCornersInputController, TagsInputController } from './index';
+type ControllerComponents = {
+    textinput: typeof TextInputController;
+    textarea: typeof TextAreaPreviewInputController;
+    number: typeof NumberInputController;
+    slider: typeof SliderInputController;
+    sliderrange: typeof SliderRangeInputController;
+    dropdown: typeof DropdownInputController;
+    datepicker: typeof DatePickerInputController;
+    datefield: typeof DateFieldInputController;
+    rangecalendar: typeof RangeCalendarInputController;
+    switch: typeof SwitchInputController;
+    colorpicker: typeof ColorPickerInputController;
+    checkbox: typeof CheckboxInputController;
+    radiogroup: typeof RadioGroupInputController;
+    font: typeof FontInputController;
+    position: typeof PositionInputController;
+    browser: typeof BrowserInputController;
+    fixedposition: typeof FixedPositionInputController;
+    vector: typeof VectorInputController;
+    angle: typeof AngleInputController;
+    time: typeof TimeInputController;
+    roundedcorners: typeof RoundedCornersInputController;
+    tags: typeof TagsInputController;
+};
+export type ControllerDescriptor = {
+    [Kind in keyof ControllerComponents]: {
+        kind: Kind;
+        props: ComponentProps<ControllerComponents[Kind]>;
+    };
+}[keyof ControllerComponents];
+type $$ComponentProps = {
+    controller: ControllerDescriptor | null;
+    class?: string;
+    style?: string;
+};
+declare const InputControllerRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputControllerRenderer = ReturnType<typeof InputControllerRenderer>;
+export default InputControllerRenderer;

package/dist/components/ic/RoundedCornersInputController.svelte

@@ -26,7 +26,6 @@
   export let label: string;
   export let value: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: number };
   export let onChange: (newValue: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: number }) => void;
-  export let config: InputControllerConfig = {};
   export let helpText: string | undefined = undefined;
   export let onFocus: () => void = () => {};
   
@@ -269,7 +268,7 @@
 </script>
 
 <!-- Main corner radius grid component -->
-<div class="corners-container {className}" 
+<div class="corners-container {className}" role="group" aria-label={label || 'Corner radius'} title={helpText}
   on:mouseenter={handleMouseEnter}
   on:mouseleave={handleMouseLeave}
   on:focusin={onFocus}>
@@ -360,9 +359,9 @@
       aria-pressed={isLocked}
     >
       <div class="flex items-center justify-center w-full h-full {isLocked ? 'text-sage-green' : 'text-grey7'}">
-        <svelte:component 
-          this={isLocked ? Lock : Unlock} 
-          class="w-5 h-5" 
+        <svelte:component
+          this={isLocked ? Lock : Unlock}
+          class="w-5 h-5"
         />
       </div>
     </button>
@@ -372,19 +371,10 @@
   <div 
     class="border-overlay {isHovering ? 'hovered' : ''}"
     aria-hidden="true"
-  />
+  ></div>
 </div>
 
 <style>
-  /* Hide number input spinners */
-  /* svelte-ignore css_unused_selector */
-  input[type="number"]::-webkit-inner-spin-button,
-  /* svelte-ignore css_unused_selector */
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  
   input {
     -moz-appearance: textfield;
     appearance: textfield;

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

@@ -1,4 +1,3 @@
-import type { InputControllerConfig } from './index';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -26,7 +25,6 @@ declare const RoundedCornersInputController: $$__sveltets_2_IsomorphicComponent<
         bottomRight: number;
         bottomLeft: number;
     }) => void;
-    config?: InputControllerConfig;
     helpText?: string | undefined;
     onFocus?: () => void;
     class?: string;

package/dist/components/ic/TextAreaInputController.svelte

@@ -83,7 +83,7 @@
   }>();
 
   // Use config values with fallbacks
-  const textColor = config.textColor || '#1a1a1a';
+  const textColor = $derived(config.textColor || '#1a1a1a');
 
   /**
    * State Variables
@@ -121,7 +121,7 @@
   let currentTextStyle = $state('text'); // Track current text style
 
   let showColorPicker = $state(false);
-  let currentColor = $state(textColor);
+  let currentColor = $derived(textColor);
   let selectedTextRange: { from: number, to: number } | null = $state(null);
 
   const textOptions = [
@@ -159,16 +159,16 @@
 
 
 
-  // Update to use $derived for reactive statement
-  const editorStyle = $derived(`
+  // Static styles — avoid $derived so teardown does not leave inert derived reads.
+  const editorStyle = `
     --editor-min-height: auto;
     --editor-max-height: none;
     --transition-duration: 0ms;
     --transition-timing: ease-out;
-  `);
+  `;
 
   // Add this with other state declarations
-  let editorClass = $derived(`border-none overflow-auto editor-height ${''}`);
+  let editorClass = 'border-none overflow-auto editor-height';
 
   // Add state to track if any dropdown is open
   let isDropdownOpen = $state(false);
@@ -191,6 +191,7 @@
   // Add these new state variables after the other state declarations
   let lastKnownContent = $state('');
   let wasVisible = $state(true);
+  let isDestroyed = false;
 
   function handleEditorMount(e: any) {
     editorInstance = e.detail.editor;
@@ -361,6 +362,7 @@
     // Only update if there's a change to prevent unnecessary rerenders
     if (JSON.stringify(newFormats) !== JSON.stringify($state.snapshot(activeFormats))) {
       activeFormats = newFormats;
+      syncToggleValues();
       // console.log('Active formats updated:', $state.snapshot(activeFormats));
     }
   }
@@ -440,11 +442,20 @@
     }
   }
 
-  // Update derived toggleValues with proper typing
-  const toggleValues = $derived(Object.entries(activeFormats)
-    .filter(([_, isActive]) => isActive)
-    .map(([format]) => formatMapping[format as FormatType].value)
-  );
+  // Compute toggle values without $derived — TipTap callbacks can run after unmount
+  // and reading an inert derived triggers Svelte's derived_inert warning.
+  function getToggleValues(): string[] {
+    if (isDestroyed) return [];
+    return Object.entries(activeFormats)
+      .filter(([_, isActive]) => isActive)
+      .map(([format]) => formatMapping[format as FormatType].value);
+  }
+
+  let toggleValues = $state<string[]>([]);
+  function syncToggleValues() {
+    if (isDestroyed) return;
+    toggleValues = getToggleValues();
+  }
 
   // Restore handleTextStyleChange for other style changes
   function handleTextStyleChange(value: string) {
@@ -823,7 +834,9 @@
 
   // Add effect to handle clicks outside Color Select
   $effect(() => {
+    if (isDestroyed) return;
     const handleClickOutside = (event: MouseEvent) => {
+      if (isDestroyed) return;
       const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
       const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
       
@@ -896,6 +909,7 @@
 
   // Update the effect that maintains selection during color picker interactions
   $effect(() => {
+    if (isDestroyed) return;
     if (showColorPicker && selectedTextRange && editorInstance) {
       const { from, to } = selectedTextRange;
       editorInstance.chain()
@@ -1020,6 +1034,7 @@
 
   // Add cleanup function
   onDestroy(() => {
+    isDestroyed = true;
     if (editorInstance) {
       // Store the current content before unmounting
       lastKnownContent = editorInstance.getHTML();
@@ -1336,8 +1351,6 @@
                 handleColorChange(color);
               }}
               controllerId="text-color-picker"
-              {openDropdowns}
-              {toggleDropdown}
               saveRecentColors={true}
               showOpacityControls={false}
               showRing={false}

package/dist/components/icons/locked.svelte

@@ -1,4 +1,8 @@
-<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script>
+  let { class: className = '', style = '' } = $props();
+</script>
+
+<svg class="locked-icon {className}" {style} width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M1 6C1 4.67392 1.52678 3.40215 2.46447 2.46447C3.40215 1.52678 4.67392 1 6 1C7.32608 1 8.59785 1.52678 9.53553 2.46447C10.4732 3.40215 11 4.67392 11 6V16C11 17.3261 10.4732 18.5979 9.53553 19.5355C8.59785 20.4732 7.32608 21 6 21C4.67392 21 3.40215 20.4732 2.46447 19.5355C1.52678 18.5979 1 17.3261 1 16V6Z" stroke="#7BA668" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 <rect x="5" y="6" width="2" height="10" fill="#7BA668"/>
 </svg>

package/dist/components/icons/locked.svelte.d.ts

@@ -1,26 +1,13 @@
 export default Locked;
-type Locked = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
+type Locked = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Locked: import("svelte").Component<{
+    class?: string;
+    style?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    style?: string;
 };
-declare const Locked: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/icons/unlocked.svelte

@@ -1,4 +1,8 @@
-<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<script>
+  let { class: className = '', style = '' } = $props();
+</script>
+
+<svg class="unlocked-icon {className}" {style} width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M3.17157 3.17157C3.92172 2.42143 4.93913 2 6 2C7.06087 2 8.07828 2.42143 8.82843 3.17157C9.57857 3.92172 10 4.93913 10 6V10H12V6C12 4.4087 11.3679 2.88258 10.2426 1.75736C9.11742 0.632141 7.5913 0 6 0C4.4087 0 2.88258 0.632141 1.75736 1.75736C0.632141 2.88258 0 4.4087 0 6V10H2V6C2 4.93913 2.42143 3.92172 3.17157 3.17157Z" fill="#666666"/>
 <path d="M2 12H0V16C0 17.5913 0.632141 19.1174 1.75736 20.2426C2.88258 21.3679 4.4087 22 6 22C7.5913 22 9.11742 21.3679 10.2426 20.2426C11.3679 19.1174 12 17.5913 12 16V12H10V16C10 17.0609 9.57857 18.0783 8.82843 18.8284C8.07828 19.5786 7.06087 20 6 20C4.93913 20 3.92172 19.5786 3.17157 18.8284C2.42143 18.0783 2 17.0609 2 16V12Z" fill="#666666"/>
 </svg>

package/dist/components/icons/unlocked.svelte.d.ts

@@ -1,26 +1,13 @@
 export default Unlocked;
-type Unlocked = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
+type Unlocked = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Unlocked: import("svelte").Component<{
+    class?: string;
+    style?: string;
+}, {}, "">;
+type $$ComponentProps = {
+    class?: string;
+    style?: string;
 };
-declare const Unlocked: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/utils/FontManager.js

@@ -245,13 +245,20 @@ class FontManager {
      * Gets or creates the singleton instance and initializes it
      */
     static async getInstance(apiKey) {
+        const trimmedKey = String(apiKey || '').trim();
         if (!FontManager.instance) {
-            FontManager.instance = new FontManager(apiKey);
-            // Initialize only once
+            FontManager.instance = new FontManager(trimmedKey);
             if (!FontManager.initializationPromise) {
                 FontManager.initializationPromise = FontManager.instance.initialize();
             }
-            // Wait for initialization to complete
+        }
+        else if (trimmedKey && !FontManager.instance.apiKey?.trim()) {
+            // Key arrived after a premature empty-key construction (race with setGoogleFontsApiKey).
+            FontManager.instance.apiKey = trimmedKey;
+            FontManager.instance.catalogFetchPromise = null;
+        }
+        // Always await in-flight init — concurrent callers used to return mid-initialize.
+        if (FontManager.initializationPromise) {
             await FontManager.initializationPromise;
         }
         return FontManager.instance;