@widgetic/editor 4.0.6 → 4.0.8

package/dist/components/ic/DatePickerInputController.svelte

@@ -17,6 +17,23 @@
  * - Maintains dropdown state consistency
 -->
 
+<script module lang="ts">
+  import type { Writable } from 'svelte/store';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface DatePickerInputControllerProps {
+    label: string;
+    value?: any;
+    onChange: (newValue: CalendarDate) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
@@ -35,14 +52,14 @@
   import { IconCalendar } from '@widgetic/design-system/icons';
 
   // Component props with TypeScript types
-  export let label: string;
-  export let value: any;
-  export let onChange: (newValue: CalendarDate) => void;
-  export let description: string | undefined = undefined;
-  export let controllerId: string;
-  export let openDropdowns: any;
-  export let toggleDropdown: (id: string) => void;
-  export let onFocus: () => void = () => {};
+  export let label: DatePickerInputControllerProps['label'];
+  export let value: DatePickerInputControllerProps['value'];
+  export let onChange: DatePickerInputControllerProps['onChange'];
+  export let description: DatePickerInputControllerProps['description'] = undefined;
+  export let controllerId: DatePickerInputControllerProps['controllerId'];
+  export let openDropdowns: DatePickerInputControllerProps['openDropdowns'];
+  export let toggleDropdown: DatePickerInputControllerProps['toggleDropdown'];
+  export let onFocus: DatePickerInputControllerProps['onFocus'] = () => {};
 
   // Default to today's date in local timezone for placeholder
   let placeholder = today(getLocalTimeZone());

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

@@ -1,3 +1,16 @@
+import type { Writable } from 'svelte/store';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface DatePickerInputControllerProps {
+    label: string;
+    value?: any;
+    onChange: (newValue: CalendarDate) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}
 import { CalendarDate } from "@internationalized/date";
 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> & {
@@ -13,14 +26,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const DatePickerInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: any;
-    onChange: (newValue: CalendarDate) => void;
-    description?: string | undefined;
-    controllerId: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
-    onFocus?: () => void;
+    label: DatePickerInputControllerProps["label"];
+    value: DatePickerInputControllerProps["value"];
+    onChange: DatePickerInputControllerProps["onChange"];
+    description?: DatePickerInputControllerProps["description"];
+    controllerId: DatePickerInputControllerProps["controllerId"];
+    openDropdowns: DatePickerInputControllerProps["openDropdowns"];
+    toggleDropdown: DatePickerInputControllerProps["toggleDropdown"];
+    onFocus?: DatePickerInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/DropdownInputController.svelte

@@ -1,3 +1,24 @@
+<script module lang="ts">
+  import type { Writable } from 'svelte/store';
+  import type { InputControllerConfig } from './index';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface DropdownInputControllerProps {
+    label: string;
+    defaultSelectedLabel?: string;
+    value: string | { value: string; label: string };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    options?: { value: string; label: string }[];
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   /**
    * DropdownInputController Component
@@ -10,7 +31,6 @@
    * Required for component setup and cleanup
    */
   import { onMount, onDestroy } from 'svelte';
-  import type { InputControllerConfig } from './index';
 
   // Local Components imports
   import { InputControllerHeader } from './index';
@@ -28,22 +48,22 @@
    * Component Props
    * External properties that configure the dropdown's behavior and appearance
    */
-  export let label: string;                 // Display label for the dropdown
-  export let defaultSelectedLabel: string = "Select an option";          // Default value for the dropdown
-  export let value: string | { value: string; label: string };       // Currently selected value
-  export let onChange: (newValue: string) => void;  // Callback for value changes
-  export let config: InputControllerConfig = {};    // Additional configuration options
+  export let label: DropdownInputControllerProps['label'];
+  export let defaultSelectedLabel: DropdownInputControllerProps['defaultSelectedLabel'] = "Select an option";
+  export let value: DropdownInputControllerProps['value'];
+  export let onChange: DropdownInputControllerProps['onChange'];
+  export let config: DropdownInputControllerProps['config'] = {};
   
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let options: { value: string; label: string }[] = config.options || [];  // Available options
-  export let description: string | undefined = undefined;  // Optional help text
-  export let controllerId: string;          // Unique identifier for the controller
-  export let openDropdowns: any;           // External store tracking open dropdowns
-  export let toggleDropdown: (id: string) => void;  // Function to toggle dropdown state
-  export let onFocus: () => void = () => {};  // Focus event handler
+  export let options: DropdownInputControllerProps['options'] = config.options || [];
+  export let description: DropdownInputControllerProps['description'] = undefined;
+  export let controllerId: DropdownInputControllerProps['controllerId'];
+  export let openDropdowns: DropdownInputControllerProps['openDropdowns'];
+  export let toggleDropdown: DropdownInputControllerProps['toggleDropdown'];
+  export let onFocus: DropdownInputControllerProps['onFocus'] = () => {};
 
   /**
    * Reactive State
@@ -51,6 +71,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 +87,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 +144,13 @@
     }
   }
 
-  $: triggerContent = options.find((o) => o.value === (value.value || value))?.label ?? defaultSelectedLabel;
+  /**
+   * The option label for the current selection. `value` accepts a bare string
+   * or an option object; normalize once instead of re-narrowing at each read.
+   */
+  $: selectedValue = typeof value === 'string' ? value : value?.value;
+  $: triggerContent =
+    options.find((o) => o.value === selectedValue)?.label ?? defaultSelectedLabel;
 </script>
 
 <!-- Dropdown Container -->
@@ -122,7 +168,7 @@
       >
         <Select.Root 
           type="single"
-          value={value.value || value}
+          value={selectedValue}
           onValueChange={handleValueChange}
           open={open}
           onOpenChange={handleOpenChange}
@@ -218,9 +264,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/DropdownInputController.svelte.d.ts

@@ -1,4 +1,26 @@
+import type { Writable } from 'svelte/store';
 import type { InputControllerConfig } from './index';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface DropdownInputControllerProps {
+    label: string;
+    defaultSelectedLabel?: string;
+    value: string | {
+        value: string;
+        label: string;
+    };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+}
 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;
@@ -16,26 +38,20 @@ declare const DropdownInputController: $$__sveltets_2_IsomorphicComponent<{
     /**
        * Component Props
        * External properties that configure the dropdown's behavior and appearance
-       */ label: string;
-    defaultSelectedLabel?: string;
-    value: string | {
-        value: string;
-        label: string;
-    };
-    onChange: (newValue: string) => void;
-    config?: InputControllerConfig;
+       */ label: DropdownInputControllerProps["label"];
+    defaultSelectedLabel?: DropdownInputControllerProps["defaultSelectedLabel"];
+    value: DropdownInputControllerProps["value"];
+    onChange: DropdownInputControllerProps["onChange"];
+    config?: DropdownInputControllerProps["config"];
     /**
        * Configuration Options
        * Derived from config prop with fallbacks
-       */ options?: {
-        value: string;
-        label: string;
-    }[];
-    description?: string | undefined;
-    controllerId: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
-    onFocus?: () => void;
+       */ options?: DropdownInputControllerProps["options"];
+    description?: DropdownInputControllerProps["description"];
+    controllerId: DropdownInputControllerProps["controllerId"];
+    openDropdowns: DropdownInputControllerProps["openDropdowns"];
+    toggleDropdown: DropdownInputControllerProps["toggleDropdown"];
+    onFocus?: DropdownInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/FixedPositionInputController.svelte

@@ -17,6 +17,26 @@
  * - Manages dynamic SVG creation and disposal
 -->
 
+<script module lang="ts">
+  /** The nine grid alignments the controller can select — shared between the
+   *  props contract above and the instance script below. */
+  const positions = [
+    'top-left', 'top-center', 'top-right',
+    'center-left', 'center-center', 'center-right',
+    'bottom-left', 'bottom-center', 'bottom-right'
+  ] as const;
+  type Position = typeof positions[number];
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface FixedPositionInputControllerProps {
+    value?: Position;
+    onChange: (newValue: Position) => void;
+    onFocus?: () => void;
+    id?: string;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onDestroy } from 'svelte';
@@ -79,21 +99,15 @@
   };
 
   // Component props
-  export let value: Position = 'bottom-right';  // Update type to Position
-  export let onChange: (newValue: Position) => void;
-  export let onFocus: () => void = () => {};
-  export let id: string | undefined = undefined;
+  export let value: FixedPositionInputControllerProps['value'] = 'bottom-right';
+  export let onChange: FixedPositionInputControllerProps['onChange'];
+  export let onFocus: FixedPositionInputControllerProps['onFocus'] = () => {};
+  export let id: FixedPositionInputControllerProps['id'] = undefined;
 
   /**
    * Defines all valid position combinations in a 3x3 grid
    * Order matters for visual layout and keyboard navigation
  */
-  const positions = [
-    'top-left', 'top-center', 'top-right',
-    'center-left', 'center-center', 'center-right',
-    'bottom-left', 'bottom-center', 'bottom-right'
-  ] as const;
-
   type Position = typeof positions[number];
 
   // Map positions to their corresponding icons

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

@@ -1,3 +1,15 @@
+/** The nine grid alignments the controller can select — shared between the
+ *  props contract above and the instance script below. */
+declare const positions: readonly ["top-left", "top-center", "top-right", "center-left", "center-center", "center-right", "bottom-left", "bottom-center", "bottom-right"];
+type Position = typeof positions[number];
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface FixedPositionInputControllerProps {
+    value?: Position;
+    onChange: (newValue: Position) => void;
+    onFocus?: () => void;
+    id?: 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;
@@ -12,10 +24,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const FixedPositionInputController: $$__sveltets_2_IsomorphicComponent<{
-    value?: "top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
-    onChange: (newValue: "top-left" | "top-center" | "top-right" | "center-left" | "center-center" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right") => void;
-    onFocus?: () => void;
-    id?: string | undefined;
+    value?: FixedPositionInputControllerProps["value"];
+    onChange: FixedPositionInputControllerProps["onChange"];
+    onFocus?: FixedPositionInputControllerProps["onFocus"];
+    id?: FixedPositionInputControllerProps["id"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/FontInputController.svelte

@@ -18,6 +18,23 @@
  * - Uses font-display: swap for better loading UX
 -->
 
+<script module lang="ts">
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface FontInputControllerProps {
+    label?: string;
+    style?: string;
+    value?: { family: string; weight: string; category: string } | string | null;
+    onChange?: (newValue: { family: string; weight: string; category: string }) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    hideRecentFromList?: boolean;
+    hideTrashIcon?: boolean;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy, tick } from 'svelte';
@@ -46,6 +63,7 @@
   import FontManager, { mapGoogleVariantIdsToWeightNames } from '../../utils/FontManager';
   
   import { shouldSkipFont } from '../../utils/skipFonts';
+  import type { Writable } from 'svelte/store';
 
   import { InputControllerHeader } from './index';
 
@@ -77,16 +95,16 @@
    * @prop {Function} toggleDropdown - Function to toggle dropdown state
    * @prop {Function} onFocus - Optional focus handler
    */
-  export let label: string = '';
+  export let label: FontInputControllerProps['label'] = '';
   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;
-  export let controllerId: string;
-  export let openDropdowns: any;
-  export let toggleDropdown: (id: string) => void;
+  export let style: FontInputControllerProps['style'] = '';
+  export let value: FontInputControllerProps['value'] = null;
+  export let onChange: FontInputControllerProps['onChange'] = undefined;
+  export let description: FontInputControllerProps['description'] = undefined;
+  export let controllerId: FontInputControllerProps['controllerId'];
+  export let openDropdowns: FontInputControllerProps['openDropdowns'];
+  export let toggleDropdown: FontInputControllerProps['toggleDropdown'];
 
   // Initialize timeouts
   let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
@@ -95,6 +113,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[] = [];
@@ -123,8 +142,8 @@
   let isInitialLoading = true; // Start with loading state true
 
   // Add new prop for controlling font list behavior
-  export let hideRecentFromList: boolean = false;
-  export let hideTrashIcon: boolean = true;
+  export let hideRecentFromList: FontInputControllerProps['hideRecentFromList'] = false;
+  export let hideTrashIcon: FontInputControllerProps['hideTrashIcon'] = true;
 
   function updateFamilyPopoverBox() {
     if (!familyTriggerEl || typeof window === 'undefined') return;
@@ -625,7 +644,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 +1379,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 +1419,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 +1438,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 +1466,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 +1593,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 +1754,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 +1931,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 +1974,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/FontInputController.svelte.d.ts

@@ -1,3 +1,26 @@
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface FontInputControllerProps {
+    label?: string;
+    style?: string;
+    value?: {
+        family: string;
+        weight: string;
+        category: string;
+    } | string | null;
+    onChange?: (newValue: {
+        family: string;
+        weight: string;
+        category: string;
+    }) => void;
+    description?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    hideRecentFromList?: boolean;
+    hideTrashIcon?: boolean;
+}
+import type { Writable } from 'svelte/store';
 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;
@@ -23,25 +46,17 @@ 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?: FontInputControllerProps["label"];
     class?: string;
-    style?: string;
-    value?: {
-        family: string;
-        weight: string;
-        category: string;
-    } | string | null;
-    onChange?: ((newValue: {
-        family: string;
-        weight: string;
-        category: string;
-    }) => void) | undefined;
-    description?: string | undefined;
-    controllerId: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
-    hideRecentFromList?: boolean;
-    hideTrashIcon?: boolean;
+    style?: FontInputControllerProps["style"];
+    value?: FontInputControllerProps["value"];
+    onChange?: FontInputControllerProps["onChange"];
+    description?: FontInputControllerProps["description"];
+    controllerId: FontInputControllerProps["controllerId"];
+    openDropdowns: FontInputControllerProps["openDropdowns"];
+    toggleDropdown: FontInputControllerProps["toggleDropdown"];
+    hideRecentFromList?: FontInputControllerProps["hideRecentFromList"];
+    hideTrashIcon?: FontInputControllerProps["hideTrashIcon"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;