@widgetic/editor 4.0.7 → 4.0.9

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;
@@ -124,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;
@@ -232,9 +250,24 @@
   // Add a variable to store the debounced search function
   let debouncedSearch: (event: Event) => void;
 
+  let fontPickerReadyAt = 0;
+
+  function ensureFontPickerPortal() {
+    if (!browser) return;
+    const portalId = 'widgetic-font-picker-portal';
+    if (document.getElementById(portalId)) return;
+    const host = document.createElement('div');
+    host.id = portalId;
+    host.style.position = 'relative';
+    host.style.zIndex = '100000000';
+    document.body.appendChild(host);
+  }
+
   onMount(async () => {
     try {
       if (browser) {
+        fontPickerReadyAt = Date.now() + 400;
+        ensureFontPickerPortal();
         const coerced = coerceFontValue(value);
         if (coerced?.weight) {
           selectedWeight = `${controllerId}-${coerced.weight}`;
@@ -1703,37 +1736,31 @@
           <Popover.Root 
             open={$openDropdowns?.has(controllerId)}
             onOpenChange={(isOpen) => {
-              if (isOpen !== $openDropdowns?.has(controllerId)) {
-                if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
-                  fontUtils.addRecentFont({
-                    family: resolvedFont.family,
-                    category: normalizeCategory(resolvedFont.category) as FontItem['category'],
-                    isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
-                  });
-                } else if (isOpen) {
-                  activeSearchIndex = -1;
-                  void tick().then(() => {
-                    updateFamilyPopoverBox();
-                    requestAnimationFrame(updateFamilyPopoverBox);
-                  });
-                  
-                  // When opening, ensure we have fonts ready
-                  if (filteredFonts.length === 0 && allFonts.length > 0) {
-                    // If we have allFonts but no filtered fonts, update them
-                    updateFilteredFonts();
-                  }
-                  
-                  // Use a small timeout to ensure the DOM has updated before setting up the observer
-                  // This prevents the initial delay when opening the popover
-                  setTimeout(() => {
-                    if (fontListContainer) {
-                      setupFontObserver();
-                    }
-                  }, 50);
-                  
-                  toggleDropdown(controllerId);
+              if (isOpen && Date.now() < fontPickerReadyAt) return;
+              const wasOpen = !!$openDropdowns?.has(controllerId);
+              if (isOpen === wasOpen) return;
+              if (!isOpen && resolvedFont?.family && !shouldSkipFont(resolvedFont.family)) {
+                fontUtils.addRecentFont({
+                  family: resolvedFont.family,
+                  category: normalizeCategory(resolvedFont.category) as FontItem['category'],
+                  isCustom: fontManagerInstance?.isCustomFont(resolvedFont.family) || false
+                });
+              } else if (isOpen) {
+                activeSearchIndex = -1;
+                void tick().then(() => {
+                  updateFamilyPopoverBox();
+                  requestAnimationFrame(updateFamilyPopoverBox);
+                });
+                if (filteredFonts.length === 0 && allFonts.length > 0) {
+                  updateFilteredFonts();
                 }
+                setTimeout(() => {
+                  if (fontListContainer) {
+                    setupFontObserver();
+                  }
+                }, 50);
               }
+              toggleDropdown(controllerId);
             }}
           >
             <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"
@@ -1758,6 +1785,7 @@
               collisionPadding={12}
               side={familyPopoverSide}
               sideOffset={4}
+              portalProps={{ to: '#widgetic-font-picker-portal' }}
               class="font-input-popover !p-0 widgetic-colors widgetic-radius rounded-medium modal-shadow border border-grey2"
               style={familyPopoverStyle}
             >
@@ -1951,6 +1979,7 @@
           <Popover.Root 
             open={$openDropdowns?.has('weight-' + controllerId)}
             onOpenChange={(isOpen) => {
+              if (isOpen && Date.now() < fontPickerReadyAt) return;
               if (isOpen !== $openDropdowns?.has('weight-' + controllerId)) {
                 toggleDropdown('weight-' + controllerId);
               }
@@ -1962,7 +1991,7 @@
               </span>
               <IconCaretDownFilled class="w-5 h-5 shrink-0 text-grey5 group-hover:text-grey7" />
             </Popover.Trigger>
-            <Popover.Content class="p-0 w-[150px]">
+            <Popover.Content class="font-input-popover p-0 w-[150px]" portalProps={{ to: '#widgetic-font-picker-portal' }}>
               <Command.Root>
                 <Command.List>
                   <Command.Group>
@@ -2073,7 +2102,7 @@
 
   /* Clamp to the viewport so the Fonts header and list stay on screen */
   :global(.font-input-popover) {
-    z-index: 50;
+    z-index: 100000000 !important;
     will-change: transform;
     transform: translateZ(0);
     backface-visibility: hidden;

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>;

package/dist/components/ic/NumberInputController.svelte

@@ -1,3 +1,19 @@
+<script module lang="ts">
+  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 NumberInputControllerProps {
+    label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    description?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   /**
    * NumberInputController Component
@@ -13,8 +29,6 @@
   import { onDestroy } from 'svelte';
 
   
-  // Component config
-  import type { InputControllerConfig } from './index';
   import InputControllerHeader from './InputControllerHeader.svelte';
   import NumberControls from './NumberControls.svelte';
 
@@ -22,13 +36,13 @@
    * Component Props
    * External properties that configure the number input's behavior
    */
-  export let label: string;                 // Display label
-  export let value: number = 0;             // Current numeric value
-  export let onChange: (newValue: number) => void;  // Value change callback
-  export let config: InputControllerConfig = {};    // Additional configuration
-  export let helpText: string | undefined = undefined; // Help text for the input
-  export let description: string | undefined = undefined;
-  export let onFocus: () => void = () => {};  // Focus callback
+  export let label: NumberInputControllerProps['label'];
+  export let value: NumberInputControllerProps['value'] = 0;
+  export let onChange: NumberInputControllerProps['onChange'];
+  export let config: NumberInputControllerProps['config'] = {};
+  export let helpText: NumberInputControllerProps['helpText'] = undefined;
+  export let description: NumberInputControllerProps['description'] = undefined;
+  export let onFocus: NumberInputControllerProps['onFocus'] = () => {};
 
   /**
    * Configuration Options

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

@@ -1,4 +1,15 @@
 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 NumberInputControllerProps {
+    label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    description?: string;
+    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,13 +27,13 @@ declare const NumberInputController: $$__sveltets_2_IsomorphicComponent<{
     /**
        * Component Props
        * External properties that configure the number input's behavior
-       */ label: string;
-    value?: number;
-    onChange: (newValue: number) => void;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
-    description?: string | undefined;
-    onFocus?: () => void;
+       */ label: NumberInputControllerProps["label"];
+    value?: NumberInputControllerProps["value"];
+    onChange: NumberInputControllerProps["onChange"];
+    config?: NumberInputControllerProps["config"];
+    helpText?: NumberInputControllerProps["helpText"];
+    description?: NumberInputControllerProps["description"];
+    onFocus?: NumberInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/PositionInputController.svelte

@@ -17,6 +17,18 @@
  * - Maintains consistent state across input methods
 -->
 
+<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 PositionInputControllerProps {
+    value?: { x: number; y: number };
+    onChange: (newValue: { x: number; y: number }) => void;
+    onFocus?: () => void;
+    maskThumb?: boolean;
+    onDragStateChange?: (isDragging: boolean) => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
@@ -32,11 +44,11 @@
    * onFocus: Focus event handler
    * onDragStateChange: Callback for dragging state changes
    */
-  export let value: { x: number; y: number } | undefined = undefined;
-  export let onChange: (newValue: { x: number; y: number }) => void;
-  export let onFocus: () => void = () => {};
-  export let maskThumb: boolean = true;
-  export let onDragStateChange: (isDragging: boolean) => void = () => {};
+  export let value: PositionInputControllerProps['value'] = undefined;
+  export let onChange: PositionInputControllerProps['onChange'];
+  export let onFocus: PositionInputControllerProps['onFocus'] = () => {};
+  export let maskThumb: PositionInputControllerProps['maskThumb'] = true;
+  export let onDragStateChange: PositionInputControllerProps['onDragStateChange'] = () => {};
 
   /**
    * DOM references and state

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

@@ -1,3 +1,18 @@
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface PositionInputControllerProps {
+    value?: {
+        x: number;
+        y: number;
+    };
+    onChange: (newValue: {
+        x: number;
+        y: number;
+    }) => void;
+    onFocus?: () => void;
+    maskThumb?: boolean;
+    onDragStateChange?: (isDragging: boolean) => 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;
@@ -19,17 +34,11 @@ declare const PositionInputController: $$__sveltets_2_IsomorphicComponent<{
        * config: Additional configuration options
        * onFocus: Focus event handler
        * onDragStateChange: Callback for dragging state changes
-       */ value?: {
-        x: number;
-        y: number;
-    } | undefined;
-    onChange: (newValue: {
-        x: number;
-        y: number;
-    }) => void;
-    onFocus?: () => void;
-    maskThumb?: boolean;
-    onDragStateChange?: (isDragging: boolean) => void;
+       */ value?: PositionInputControllerProps["value"];
+    onChange: PositionInputControllerProps["onChange"];
+    onFocus?: PositionInputControllerProps["onFocus"];
+    maskThumb?: PositionInputControllerProps["maskThumb"];
+    onDragStateChange?: PositionInputControllerProps["onDragStateChange"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/RadioGroupInputController.svelte

@@ -1,3 +1,18 @@
+<script module lang="ts">
+  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 RadioGroupInputControllerProps {
+    value: string | { value: string; label: string };
+    onChange: (newValue: string) => void;
+    config?: InputControllerConfig;
+    description?: string;
+    onFocus?: () => void;
+    options?: { value: string; label: string }[];
+  }
+</script>
+
 <script lang="ts">
   /**
    * RadioGroupInputController Component
@@ -10,7 +25,6 @@
    * Required for component setup and cleanup
    */
   import { onMount, onDestroy } from 'svelte';
-  import type { InputControllerConfig } from './index';
 
   /**
    * UI Components Imports
@@ -22,17 +36,17 @@
    * Component Props
    * External properties that configure the radio group's behavior and appearance
    */
-  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 description: string | undefined = undefined;  // Optional help description text
-  export let onFocus: () => void = () => {};  // Focus event handler
+  export let value: RadioGroupInputControllerProps['value'];  // Currently selected value
+  export let onChange: RadioGroupInputControllerProps['onChange'];  // Callback for value changes
+  export let config: RadioGroupInputControllerProps['config'] = {};    // Additional configuration options
+  export let description: RadioGroupInputControllerProps['description'] = undefined;  // Optional help description text
+  export let onFocus: RadioGroupInputControllerProps['onFocus'] = () => {};  // Focus event handler
 
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let options: { value: string; label: string }[] = config.options || [];  // Available options
+  export let options: RadioGroupInputControllerProps['options'] = config.options || [];  // Available options
 
   /**
    * Local state