@widgetic/editor 4.0.7 → 4.0.9

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

@@ -1,4 +1,20 @@
 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;
+    }[];
+}
 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,21 +32,15 @@ declare const RadioGroupInputController: $$__sveltets_2_IsomorphicComponent<{
     /**
        * Component Props
        * External properties that configure the radio group's behavior and appearance
-       */ value: string | {
-        value: string;
-        label: string;
-    };
-    onChange: (newValue: string) => void;
-    config?: InputControllerConfig;
-    description?: string | undefined;
-    onFocus?: () => void;
+       */ value: RadioGroupInputControllerProps["value"];
+    onChange: RadioGroupInputControllerProps["onChange"];
+    config?: RadioGroupInputControllerProps["config"];
+    description?: RadioGroupInputControllerProps["description"];
+    onFocus?: RadioGroupInputControllerProps["onFocus"];
     /**
        * Configuration Options
        * Derived from config prop with fallbacks
-       */ options?: {
-        value: string;
-        label: string;
-    }[];
+       */ options?: RadioGroupInputControllerProps["options"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/RangeCalendarInputController.svelte

@@ -17,6 +17,32 @@
  * - Preserves timezone consistency
 -->
 
+<script module lang="ts">
+  import type { DateValue } from "@internationalized/date";
+  import type { DateRange as BitsDateRange } from "bits-ui";
+
+  // Use a more flexible local type
+  type DateRange = {
+    start?: DateValue;
+    end?: DateValue;
+  }
+
+  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 RangeCalendarInputControllerProps {
+    label: string;
+    value?: BitsDateRange;
+    onChange: (newValue: DateRange) => void;
+    helpText?: string;
+    controllerId: string;
+    openDropdowns: Writable<Set<string>>;
+    toggleDropdown: (id: string) => void;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, onDestroy } from 'svelte';
@@ -29,24 +55,16 @@
 
   // Shadcn aditional: Internationalized Date
   import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
-  import type { DateValue } from "@internationalized/date";
-  import type { DateRange as BitsDateRange } from "bits-ui";
-
-  // Use a more flexible local type
-  type DateRange = {
-    start?: DateValue;
-    end?: DateValue;
-  }
 
   // Component props
-  export let label: string;
-  export let value: BitsDateRange | undefined;
-  export let onChange: (newValue: DateRange) => void;
-  export let helpText: string | undefined = undefined;
-  export let controllerId: string;
-  export let openDropdowns: any;
-  export let toggleDropdown: (id: string) => void;
-  export let onFocus: () => void = () => {};
+  export let label: RangeCalendarInputControllerProps['label'];
+  export let value: RangeCalendarInputControllerProps['value'];
+  export let onChange: RangeCalendarInputControllerProps['onChange'];
+  export let helpText: RangeCalendarInputControllerProps['helpText'] = undefined;
+  export let controllerId: RangeCalendarInputControllerProps['controllerId'];
+  export let openDropdowns: RangeCalendarInputControllerProps['openDropdowns'];
+  export let toggleDropdown: RangeCalendarInputControllerProps['toggleDropdown'];
+  export let onFocus: RangeCalendarInputControllerProps['onFocus'] = () => {};
 
   let currentValue: DateRange | undefined;
 

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

@@ -1,5 +1,22 @@
 import type { DateValue } from "@internationalized/date";
 import type { DateRange as BitsDateRange } from "bits-ui";
+type DateRange = {
+    start?: DateValue;
+    end?: DateValue;
+};
+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 RangeCalendarInputControllerProps {
+    label: string;
+    value?: BitsDateRange;
+    onChange: (newValue: DateRange) => void;
+    helpText?: 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;
@@ -14,17 +31,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RangeCalendarInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: BitsDateRange | undefined;
-    onChange: (newValue: {
-        start?: DateValue;
-        end?: DateValue;
-    }) => void;
-    helpText?: string | undefined;
-    controllerId: string;
-    openDropdowns: any;
-    toggleDropdown: (id: string) => void;
-    onFocus?: () => void;
+    label: RangeCalendarInputControllerProps["label"];
+    value: RangeCalendarInputControllerProps["value"];
+    onChange: RangeCalendarInputControllerProps["onChange"];
+    helpText?: RangeCalendarInputControllerProps["helpText"];
+    controllerId: RangeCalendarInputControllerProps["controllerId"];
+    openDropdowns: RangeCalendarInputControllerProps["openDropdowns"];
+    toggleDropdown: RangeCalendarInputControllerProps["toggleDropdown"];
+    onFocus?: RangeCalendarInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/RoundedCornersInputController.svelte

@@ -12,6 +12,17 @@
  * - Accepts only positive integer values
  -->
 
+<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 RoundedCornersInputControllerProps {
+    value: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: number };
+    onChange: (newValue: { topLeft: number; topRight: number; bottomRight: number; bottomLeft: number }) => void;
+    helpText?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   import { onMount } from 'svelte';
   import Lock from '../icons/locked.svelte';
@@ -22,12 +33,15 @@
   const MIN_RADIUS = 0;
   const MAX_RADIUS = 120;
 
-  // Required props
-  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 helpText: string | undefined = undefined;
-  export let onFocus: () => void = () => {};
+  // Required props. `label`, `config` and `helpText` arrive through the
+  // dynamic-component props object but are never read here — export const
+  // keeps the init-set contract without the unused-reactive warning. A live
+  // no-op default: nothing reads these, so it can never mask a real value.
+  export const label: string = '';
+  export let value: RoundedCornersInputControllerProps['value'];
+  export let onChange: RoundedCornersInputControllerProps['onChange'];
+  export let helpText: RoundedCornersInputControllerProps['helpText'] = undefined;
+  export let onFocus: RoundedCornersInputControllerProps['onFocus'] = () => {};
   
   // Optional: Class prop for external styling
   let className = '';
@@ -359,10 +373,10 @@
       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"
-        />
+        <!-- Lock/Unlock are bare SVG components (no props); the old
+             svelte:component + class here type-checked to never and the
+             class never rendered. -->
+        {#if isLocked}<Lock />{:else}<Unlock />{/if}
       </div>
     </button>
   </div>

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

@@ -1,3 +1,21 @@
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface RoundedCornersInputControllerProps {
+    value: {
+        topLeft: number;
+        topRight: number;
+        bottomRight: number;
+        bottomLeft: number;
+    };
+    onChange: (newValue: {
+        topLeft: number;
+        topRight: number;
+        bottomRight: number;
+        bottomLeft: number;
+    }) => void;
+    helpText?: 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;
@@ -12,24 +30,16 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const RoundedCornersInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: {
-        topLeft: number;
-        topRight: number;
-        bottomRight: number;
-        bottomLeft: number;
-    };
-    onChange: (newValue: {
-        topLeft: number;
-        topRight: number;
-        bottomRight: number;
-        bottomLeft: number;
-    }) => void;
-    helpText?: string | undefined;
-    onFocus?: () => void;
+    label?: string;
+    value: RoundedCornersInputControllerProps["value"];
+    onChange: RoundedCornersInputControllerProps["onChange"];
+    helpText?: RoundedCornersInputControllerProps["helpText"];
+    onFocus?: RoundedCornersInputControllerProps["onFocus"];
     class?: string;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {
+    label: string;
+}, string>;
 type RoundedCornersInputController = InstanceType<typeof RoundedCornersInputController>;
 export default RoundedCornersInputController;

package/dist/components/ic/SliderInputController.svelte

@@ -1,3 +1,28 @@
+<script module lang="ts">
+  import type { InputControllerConfig } from './index';
+  import type { SliderProps } from '@widgetic/design-system/components';
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface SliderInputControllerProps {
+    height?: number;
+    elementsGap?: number;
+    thumbSize?: number;
+    sliderType?: SliderProps['type'];
+    barHeight?: number;
+    label?: string;
+    value: number | number[];
+    onChange: (newValue: number | number[]) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: () => void;
+    autofocus?: boolean;
+  }
+</script>
+
 <script lang="ts">
   /**
    * SliderInputController Component
@@ -16,11 +41,9 @@
   /**
    * Shadcn UI components from Widgetic design-system package
    */
-  import { Slider, type SliderProps } from '@widgetic/design-system/components';
+  import { Slider } from '@widgetic/design-system/components';
   import { InputControllerHeader } from './index';
   
-  // Component config
-  import type { InputControllerConfig } from './index';
 
   /**
    * Component Props
@@ -28,26 +51,26 @@
    */
   let className = '';
   export { className as class };
-  export let height = 48; // pixels
-  export let elementsGap = 8; // pixels
-  export let thumbSize = 24; // pixels
-  export let sliderType: SliderProps['type'] = "single";
-  export let barHeight = 8; // pixels
-  export let label: string = '';                         // Display label
-  export let value: number | number[];  // Current slider value
-  export let onChange: (newValue: number | number[]) => void;   // Value change callback
-  export let config: InputControllerConfig = {};     // Additional configuration
-  export let helpText: string | undefined = undefined; // Help text for the input
+  export let height: SliderInputControllerProps['height'] = 48;
+  export let elementsGap: SliderInputControllerProps['elementsGap'] = 8;
+  export let thumbSize: SliderInputControllerProps['thumbSize'] = 24;
+  export let sliderType: SliderInputControllerProps['sliderType'] = "single";
+  export let barHeight: SliderInputControllerProps['barHeight'] = 8;
+  export let label: SliderInputControllerProps['label'] = '';
+  export let value: SliderInputControllerProps['value'];
+  export let onChange: SliderInputControllerProps['onChange'];
+  export let config: SliderInputControllerProps['config'] = {};
+  export let helpText: SliderInputControllerProps['helpText'] = undefined;
   
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let min: number = config.min || 0;         // Minimum allowed value
-  export let max: number = config.max || 100;       // Maximum allowed value
-  export let step: number = config.step || 1;       // Step increment
-  export let onFocus: () => void = () => {};        // Focus callback
-  export let autofocus: boolean = false;            // Auto-focus on mount
+  export let min: SliderInputControllerProps['min'] = config.min || 0;
+  export let max: SliderInputControllerProps['max'] = config.max || 100;
+  export let step: SliderInputControllerProps['step'] = config.step || 1;
+  export let onFocus: SliderInputControllerProps['onFocus'] = () => {};
+  export let autofocus: SliderInputControllerProps['autofocus'] = false;            // Auto-focus on mount
 
   /**
    * Internal State

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

@@ -1,8 +1,24 @@
-/**
-   * Shadcn UI components from Widgetic design-system package
-   */
-import { type SliderProps } from '@widgetic/design-system/components';
 import type { InputControllerConfig } from './index';
+import type { SliderProps } from '@widgetic/design-system/components';
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface SliderInputControllerProps {
+    height?: number;
+    elementsGap?: number;
+    thumbSize?: number;
+    sliderType?: SliderProps['type'];
+    barHeight?: number;
+    label?: string;
+    value: number | number[];
+    onChange: (newValue: number | number[]) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: () => void;
+    autofocus?: boolean;
+}
 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;
@@ -21,24 +37,24 @@ declare const SliderInputController: $$__sveltets_2_IsomorphicComponent<{
        * Component Props
        * External properties that configure the slider's behavior
        */ class?: string;
-    height?: number;
-    elementsGap?: number;
-    thumbSize?: number;
-    sliderType?: SliderProps["type"];
-    barHeight?: number;
-    label?: string;
-    value: number | number[];
-    onChange: (newValue: number | number[]) => void;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
+    height?: SliderInputControllerProps["height"];
+    elementsGap?: SliderInputControllerProps["elementsGap"];
+    thumbSize?: SliderInputControllerProps["thumbSize"];
+    sliderType?: SliderInputControllerProps["sliderType"];
+    barHeight?: SliderInputControllerProps["barHeight"];
+    label?: SliderInputControllerProps["label"];
+    value: SliderInputControllerProps["value"];
+    onChange: SliderInputControllerProps["onChange"];
+    config?: SliderInputControllerProps["config"];
+    helpText?: SliderInputControllerProps["helpText"];
     /**
        * Configuration Options
        * Derived from config prop with fallbacks
-       */ min?: number;
-    max?: number;
-    step?: number;
-    onFocus?: () => void;
-    autofocus?: boolean;
+       */ min?: SliderInputControllerProps["min"];
+    max?: SliderInputControllerProps["max"];
+    step?: SliderInputControllerProps["step"];
+    onFocus?: SliderInputControllerProps["onFocus"];
+    autofocus?: SliderInputControllerProps["autofocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/SliderRangeInputController.svelte

@@ -17,6 +17,24 @@
  * - Manages focus states across multiple inputs
 -->
 
+<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 SliderRangeInputControllerProps {
+    label: string;
+    value?: [number, number];
+    onChange: (newValue: [number, number]) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount, tick } from 'svelte';
@@ -24,26 +42,24 @@
   // local components imports
   import SliderInputController from './SliderInputController.svelte';
 
-  // Component config
-  import type { InputControllerConfig } from './index';
 
   // Component props
   let className = '';
   export { className as class };
-  export let label: string;
-  export let value: [number, number] = [0, 100];
-  export let onChange: (newValue: [number, number]) => void;
-  export let config: InputControllerConfig = {};
-  export let helpText: string | undefined = undefined;
+  export let label: SliderRangeInputControllerProps['label'];
+  export let value: SliderRangeInputControllerProps['value'] = [0, 100];
+  export let onChange: SliderRangeInputControllerProps['onChange'];
+  export let config: SliderRangeInputControllerProps['config'] = {};
+  export let helpText: SliderRangeInputControllerProps['helpText'] = undefined;
   
   /**
    * Configuration Options
    * Derived from config prop with fallbacks
    */
-  export let min: number = config.min || 0;
-  export let max: number = config.max || 100;
-  export let step: number = config.step || 1;
-  export let onFocus: () => void = () => {};
+  export let min: SliderRangeInputControllerProps['min'] = config.min || 0;
+  export let max: SliderRangeInputControllerProps['max'] = config.max || 100;
+  export let step: SliderRangeInputControllerProps['step'] = config.step || 1;
+  export let onFocus: SliderRangeInputControllerProps['onFocus'] = () => {};
   // export let autofocus: boolean = false;
 
   // Store initial scroll position

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

@@ -1,4 +1,17 @@
 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 SliderRangeInputControllerProps {
+    label: string;
+    value?: [number, number];
+    onChange: (newValue: [number, number]) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    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;
@@ -14,18 +27,18 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const SliderRangeInputController: $$__sveltets_2_IsomorphicComponent<{
     class?: string;
-    label: string;
-    value?: [number, number];
-    onChange: (newValue: [number, number]) => void;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
+    label: SliderRangeInputControllerProps["label"];
+    value?: SliderRangeInputControllerProps["value"];
+    onChange: SliderRangeInputControllerProps["onChange"];
+    config?: SliderRangeInputControllerProps["config"];
+    helpText?: SliderRangeInputControllerProps["helpText"];
     /**
        * Configuration Options
        * Derived from config prop with fallbacks
-       */ min?: number;
-    max?: number;
-    step?: number;
-    onFocus?: () => void;
+       */ min?: SliderRangeInputControllerProps["min"];
+    max?: SliderRangeInputControllerProps["max"];
+    step?: SliderRangeInputControllerProps["step"];
+    onFocus?: SliderRangeInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/SwitchInputController.svelte

@@ -1,3 +1,15 @@
+<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 SwitchInputControllerProps {
+    label: string;
+    value: boolean;
+    onChange: (newValue: boolean) => void;
+    description?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   // Svelte imports
   import { onMount } from 'svelte';
@@ -7,11 +19,11 @@
   import { InputControllerHeader } from './index';
 
   // Component props
-  export let label: string;
-  export let value: boolean;
-  export let onChange: (newValue: boolean) => void;
-  export let description: string | undefined = undefined;
-  export let onFocus: () => void = () => {};
+  export let label: SwitchInputControllerProps['label'];
+  export let value: SwitchInputControllerProps['value'];
+  export let onChange: SwitchInputControllerProps['onChange'];
+  export let description: SwitchInputControllerProps['description'] = undefined;
+  export let onFocus: SwitchInputControllerProps['onFocus'] = () => {};
 
   function toggle(newValue?: boolean) {
     value = typeof newValue === 'boolean' ? newValue : !value;

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

@@ -1,3 +1,12 @@
+/** Declared props contract — export lets below are annotated from it so the
+ *  interface cannot drift from what the component actually reads. */
+export interface SwitchInputControllerProps {
+    label: string;
+    value: boolean;
+    onChange: (newValue: boolean) => void;
+    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;
@@ -12,11 +21,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const SwitchInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value: boolean;
-    onChange: (newValue: boolean) => void;
-    description?: string | undefined;
-    onFocus?: () => void;
+    label: SwitchInputControllerProps["label"];
+    value: SwitchInputControllerProps["value"];
+    onChange: SwitchInputControllerProps["onChange"];
+    description?: SwitchInputControllerProps["description"];
+    onFocus?: SwitchInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/TagsInputController.svelte

@@ -11,19 +11,33 @@
  * - Prevents duplicate tags
  -->
 
+<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 TagsInputControllerProps {
+    label: string;
+    value?: string[];
+    onChange: (newValue: string[]) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import InputControllerHeader from './InputControllerHeader.svelte';
-  import type { InputControllerConfig } from './index';
   import { IconX } from '@widgetic/design-system/icons';
 
   // Required props
-  export let label: string;
-  export let value: string[] = [];
-  export let onChange: (newValue: string[]) => void;
-  export let config: InputControllerConfig = {};
-  export let helpText: string | undefined = undefined;
-  export let onFocus: () => void = () => {};
+  export let label: TagsInputControllerProps['label'];
+  export let value: TagsInputControllerProps['value'] = [];
+  export let onChange: TagsInputControllerProps['onChange'];
+  export let config: TagsInputControllerProps['config'] = {};
+  export let helpText: TagsInputControllerProps['helpText'] = undefined;
+  export let onFocus: TagsInputControllerProps['onFocus'] = () => {};
   
   // Optional: Class prop for external styling
   let className = '';