@widgetic/editor 4.0.7 → 4.0.9

package/README.md

@@ -9,7 +9,7 @@ Based on the Widget's design schema and content schema it generates 2 panels of
 
 1. add the component as a dependency in the npm package of the project
 2. import the component in the project: 
-`import PropsEditor from '@widgetic/props-editor';`
+`import PropsEditor from '@widgetic/editor';`
 3. load the design and content schemas and pass them as props to the component:
 ```js
 let designSchemaUrl = '/design-debug-schema.json';
@@ -71,6 +71,17 @@ npm i --legacy-peer-deps
 Note: use --legacy-peer-deps if you get peer dependency errors
 as our project uses svelte 5 and some of the dependencies are still using svelte 4.
 
+### Sibling packages
+
+This app compiles sibling `@widgetic/*` source in dev through the dev-alias
+setup `@widgetic/dev-tools` owns. The alias tables, the `$lib` remap, and
+everything else the mapping needs come from the installed
+`@widgetic/dev-tools` dependency. An ordinary `npm install` is the whole
+setup — there is no linking step.
+
+The why and the silent-degrade failure mode live in
+[the dev-tools README](../dev-tools/README.md).
+
 ## Start the development server
 
 ```bash

package/dist/components/WidgetPreview.svelte

@@ -10,6 +10,7 @@
 		resize: { width: number; height: number };
 		mobileViewport: { width: number; height: number };
 		desktopViewport: void;
+		deviceView: { mobile: boolean };
 		fitToArea: void;
 		iframeLoad: Event;
 		iframeError: Event;
@@ -64,6 +65,9 @@
 	export let enableDrag: boolean = false;
 	/** W×H number inputs in the chrome header, live-synced with resize. */
 	export let showDimensionInputs: boolean = false;
+	/** Desktop / mobile pair in the chrome header, before the dimension inputs. */
+	export let showChromeDeviceToggle: boolean = false;
+	export let deviceMobile: boolean = false;
 	/**
 	 * concentric — always resize from center (widget-creator / Canvas).
 	 * corner — opposite corner fixed; hold Alt for concentric (composition page).
@@ -886,8 +890,35 @@
 							<span class="preview-chrome-drag-grip shrink-0 text-gray-400 text-xs leading-none" title="Drag preview" aria-hidden="true">⠿</span>
 						{/if}
 						<span class="preview-chrome-title text-[11px] font-semibold uppercase tracking-wide text-gray-500 shrink-0">Preview</span>
+						{#if showChromeDeviceToggle}
+							<div
+								class="preview-chrome-device-toggle ml-auto flex shrink-0 items-center overflow-hidden rounded border border-gray-300"
+								onpointerdown={(event) => event.stopPropagation()}
+							>
+								<button
+									type="button"
+									class="preview-chrome-device-desktop flex h-6 w-6 items-center justify-center {!deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+									aria-label="Desktop preview"
+									aria-pressed={!deviceMobile}
+									onclick={() => dispatch('deviceView', { mobile: false })}
+									onpointerdown={(event) => event.stopPropagation()}
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
+								</button>
+								<button
+									type="button"
+									class="preview-chrome-device-mobile flex h-6 w-6 items-center justify-center border-l border-gray-300 {deviceMobile ? 'bg-gray-100 text-gray-800' : 'bg-white text-gray-400'} hover:text-gray-800 focus:outline-none focus-visible:outline-none"
+									aria-label="Mobile preview"
+									aria-pressed={deviceMobile}
+									onclick={() => dispatch('deviceView', { mobile: true })}
+									onpointerdown={(event) => event.stopPropagation()}
+								>
+									<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+								</button>
+							</div>
+						{/if}
 						{#if showDimensionInputs}
-							<div class="preview-chrome-dimensions ml-auto flex items-center gap-1.5">
+							<div class="preview-chrome-dimensions flex items-center gap-1.5 {showChromeDeviceToggle ? '' : 'ml-auto'}">
 								<label class="preview-dim-label flex items-center gap-1 text-[10px] font-semibold text-gray-500">
 									<span>W</span>
 									<input

package/dist/components/WidgetPreview.svelte.d.ts

@@ -45,6 +45,8 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
     enableResize?: boolean;
     /** Drag only via the preview chrome header (keeps iframe interactive). */ enableDrag?: boolean;
     /** W×H number inputs in the chrome header, live-synced with resize. */ showDimensionInputs?: boolean;
+    /** Desktop / mobile pair in the chrome header, before the dimension inputs. */ showChromeDeviceToggle?: boolean;
+    deviceMobile?: boolean;
     /**
          * concentric — always resize from center (widget-creator / Canvas).
          * corner — opposite corner fixed; hold Alt for concentric (composition page).
@@ -86,6 +88,9 @@ declare const WidgetPreview: $$__sveltets_2_IsomorphicComponent<{
         height: number;
     }>;
     desktopViewport: CustomEvent<void>;
+    deviceView: CustomEvent<{
+        mobile: boolean;
+    }>;
     fitToArea: CustomEvent<void>;
     iframeLoad: CustomEvent<Event>;
     iframeError: CustomEvent<Event>;

package/dist/components/editors/PropsEditor.svelte

@@ -15,7 +15,16 @@
     // Svelte imports
     import { onMount, onDestroy, createEventDispatcher, afterUpdate } from 'svelte';
     const dispatch = createEventDispatcher();
-    import { writable, get } from 'svelte/store';
+    import { writable, get, type Writable } from 'svelte/store';
+    import type {
+        ContentSchemaItemView,
+        ContentSchemaPropertyView,
+        ContentSchemaView,
+        DesignSchemaComponentView,
+        DesignSchemaPropertyGroupView,
+        DesignSchemaPropertyView,
+        DesignSchemaView,
+    } from '../../schemaViews.js';
 
     /**
      * COMPONENTS IMPORTS
@@ -61,6 +70,7 @@
       TagsInputController,
       DateFieldInputController
     } from '../ic';
+    import type { InputControllerConfig } from '../ic';
 
     /**
      * UTILS IMPORTS
@@ -84,15 +94,6 @@
      */
     type InputValue = string | number | boolean | any | null;
 
-    interface PropertyGroup {
-      name: string;
-      properties: Array<Property>;
-      visibilityCondition?: {
-        dependsOn: string | string[];
-        condition: string;
-      };
-    }
-
     // Add this interface near the other interfaces at the top of the file
     interface ContentProperty {
       id: string;
@@ -117,9 +118,10 @@
     // Dimensions
     export let width: string = "450px";
     export let height: string = "720px";
-    // Schemas
-    export let designSchema: any = null;
-    export let contentSchema: any | undefined = undefined;
+    // Schemas — typed against the package's canonical schema views
+    // (`$lib/schemaViews`), the same shapes the consumers normalize to.
+    export let designSchema: DesignSchemaView | null = null;
+    export let contentSchema: ContentSchemaView | undefined = undefined;
     export let itemTemplate: any = null; // Store template for new items
     // Tab titles
     export let designTabTitle: string = 'Design';
@@ -214,7 +216,7 @@
     const DRAG_SHIFT_X = 24; // shift mirror left so cursor is over drag handle
 
     // Helper function to get visible groups
-    function getVisibleGroups(components: Array<{ propertyGroups: PropertyGroup[] }>): PropertyGroup[] {
+    function getVisibleGroups(components: DesignSchemaComponentView[]): PropertyGroup[] {
       return components?.reduce((acc: PropertyGroup[], component) => {
         const visibleGroups = component.propertyGroups.filter((group: PropertyGroup) => 
           shouldShowPropertyGroup(group, component.propertyGroups[0].properties, 'design')
@@ -228,7 +230,7 @@
 
     // Update the function with proper type annotations
     function getAccordionItemPosition(
-      component: { propertyGroups: PropertyGroup[] }, 
+      component: DesignSchemaComponentView, 
       propertyGroup: PropertyGroup, 
       groupIndex: number
     ): 'first' | 'middle' | 'last' | 'only' {
@@ -1357,7 +1359,44 @@
         return '';
     }
 
-    function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string) {
+    /**
+     * The bag `renderInputController()` builds for one controller instance.
+     * Declared keys are what PropsEditor itself always supplies; the index
+     * signature carries the schema-driven constraint keys (`min`, `max`,
+     * `options`, …) whose set depends on the property definition.
+     * `describeInputController` picks from this bag per controller kind, so
+     * anything a controller never reads never reaches it.
+     */
+    interface InputControllerProps {
+      id: string;
+      value: InputValue;
+      opacity?: number;
+      onChange: (value: InputValue) => void;
+      onOpacityChange: (opacity: number) => void;
+      portalTarget: string | HTMLElement;
+      header?: { label: string; helpText?: string };
+      config: InputControllerConfig;
+      controllerId: string;
+      openDropdowns: Writable<Set<string>>;
+      toggleDropdown: (id: string) => void;
+      onFocus: () => void;
+      [schemaKey: string]: any;
+    }
+
+    /**
+     * What `renderInputController()` hands the template.
+     * `component` is a 20-member union of controller component types — typing
+     * it as the union makes `<svelte:component this={...}>` collapse attribute
+     * checking to `never` (every prop errors); `any` restores the spread's
+     * intended looseness.
+     */
+    interface RenderedInputController {
+      component: any; // union of controller components — see comment above
+      props: InputControllerProps;
+      header: { label: string; helpText: string };
+    }
+
+    function renderInputController(schema: string, property: any, propertyIndex: number, isFirstGroup: boolean, contentItemId?: string): RenderedInputController {
         const basePropertyId = property.id || property.name;
         const propertyId = contentItemId ? `${contentItemId}__${basePropertyId}` : basePropertyId;
         const controllerId = `${schema}-${propertyId}`;
@@ -1368,7 +1407,7 @@
                 component: null,
                 props: { id: controllerId },
                 header: { label: basePropertyId, helpText: '' }
-            };
+            } as RenderedInputController;
         }
         const InputControllerComponent = getInputControllerComponent(inputController.type.toLowerCase());
 
@@ -1392,17 +1431,11 @@
 
         const { description, label, ...restInputController } = inputController;
 
-        // Only set shouldFocus on initial mount or explicit focus request
-        const shouldFocus = activeControllerId === controllerId;
-
         // Add special handling for position controller
         const additionalProps = inputController.type.toLowerCase() === 'position' 
             ? { onDragStateChange: (dragging: boolean) => isDragging = dragging } 
             : {};
 
-        // Add visibility dependency tracking
-        const hasVisibilityCondition = property.visibilityCondition !== undefined;
-        
         return {
             component: InputControllerComponent,
             props: {
@@ -1431,7 +1464,6 @@
                         openDropdowns.set(new Set([id]));
                     }
                 },
-                shouldFocus,
                 onFocus: () => {
                     const newControllerId = `${schema}-${propertyId}`;
                     if (schema === 'design' && lastFocusedDesignController !== newControllerId) {
@@ -1453,8 +1485,7 @@
                             groupName: schema
                         });
                     }
-                },
-                'data-visibility-dependent': hasVisibilityCondition
+                }
             },
             header: {
                 label: String(inputController.type || '').toLowerCase() === 'font'
@@ -1501,31 +1532,102 @@
       }
     }
     
-    /** Preserve the schema factory's props while narrowing each concrete render branch. */
-    function describeInputController(component: ReturnType<typeof getInputControllerComponent> | null, props: ReturnType<typeof renderInputController>['props']): ControllerDescriptor | null {
+    /**
+     * Narrows the render bag down to exactly the props the chosen controller
+     * declares. Each pick literal is contextually typed against that
+     * controller's declared props interface, so passing a key the controller
+     * never reads — or forgetting a required one — is a compile error here
+     * instead of a silent no-op at runtime.
+     */
+    function describeInputController(component: ReturnType<typeof getInputControllerComponent> | null, props: InputControllerProps): ControllerDescriptor | null {
       switch (component) {
-        case TextInputController: return { kind: 'textinput', props };
-        case TextAreaPreviewInputController: return { kind: 'textarea', props };
-        case NumberInputController: return { kind: 'number', props };
-        case SliderInputController: return { kind: 'slider', props };
-        case SliderRangeInputController: return { kind: 'sliderrange', props };
-        case DropdownInputController: return { kind: 'dropdown', props };
-        case DatePickerInputController: return { kind: 'datepicker', props };
-        case DateFieldInputController: return { kind: 'datefield', props };
-        case RangeCalendarInputController: return { kind: 'rangecalendar', props };
-        case SwitchInputController: return { kind: 'switch', props };
-        case ColorPickerInputController: return { kind: 'colorpicker', props };
-        case CheckboxInputController: return { kind: 'checkbox', props };
-        case RadioGroupInputController: return { kind: 'radiogroup', props };
-        case FontInputController: return { kind: 'font', props };
-        case PositionInputController: return { kind: 'position', props };
-        case BrowserInputController: return { kind: 'browser', props };
-        case FixedPositionInputController: return { kind: 'fixedposition', props };
-        case VectorInputController: return { kind: 'vector', props };
-        case AngleInputController: return { kind: 'angle', props };
-        case TimeInputController: return { kind: 'time', props };
-        case RoundedCornersInputController: return { kind: 'roundedcorners', props };
-        case TagsInputController: return { kind: 'tags', props };
+        case TextInputController: return { kind: 'textinput', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            config: props.config, type: props.type, placeholder: props.placeholder,
+            description: props.description, onFocus: props.onFocus } };
+        case TextAreaPreviewInputController: return { kind: 'textarea', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            config: props.config, description: props.description, portalTarget: props.portalTarget } };
+        case NumberInputController: return { kind: 'number', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, description: props.description, onFocus: props.onFocus } };
+        case SliderInputController: return { kind: 'slider', props: {
+            height: props.height, elementsGap: props.elementsGap, thumbSize: props.thumbSize,
+            sliderType: props.sliderType, barHeight: props.barHeight, label: props.label,
+            value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, min: props.min, max: props.max, step: props.step,
+            onFocus: props.onFocus, autofocus: props.autofocus } };
+        case SliderRangeInputController: return { kind: 'sliderrange', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, min: props.min, max: props.max, step: props.step,
+            onFocus: props.onFocus } };
+        case DropdownInputController: return { kind: 'dropdown', props: {
+            label: props.label, defaultSelectedLabel: props.defaultSelectedLabel, value: props.value,
+            onChange: props.onChange, config: props.config, options: props.options,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case DatePickerInputController: return { kind: 'datepicker', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case DateFieldInputController: return { kind: 'datefield', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case RangeCalendarInputController: return { kind: 'rangecalendar', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            helpText: props.helpText, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus } };
+        case SwitchInputController: return { kind: 'switch', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, onFocus: props.onFocus } };
+        case ColorPickerInputController: return { kind: 'colorpicker', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            controllerId: props.controllerId, id: props.id, config: props.config,
+            helpText: props.helpText, saveRecentColors: props.saveRecentColors,
+            showOpacityControls: props.showOpacityControls, autofocus: props.autofocus,
+            portalTarget: props.portalTarget, pickerSize: props.pickerSize,
+            sliderWidth: props.sliderWidth, opacity: props.opacity, showRing: props.showRing,
+            onFocus: props.onFocus, onOpacityChange: props.onOpacityChange } };
+        case CheckboxInputController: return { kind: 'checkbox', props: {
+            value: props.value, onChange: props.onChange, config: props.config,
+            description: props.description, onFocus: props.onFocus, options: props.options } };
+        case RadioGroupInputController: return { kind: 'radiogroup', props: {
+            value: props.value, onChange: props.onChange, config: props.config,
+            description: props.description, onFocus: props.onFocus, options: props.options } };
+        case FontInputController: return { kind: 'font', props: {
+            label: props.label, style: props.style, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            hideRecentFromList: props.hideRecentFromList, hideTrashIcon: props.hideTrashIcon } };
+        case PositionInputController: return { kind: 'position', props: {
+            value: props.value, onChange: props.onChange, onFocus: props.onFocus,
+            maskThumb: props.maskThumb, onDragStateChange: props.onDragStateChange } };
+        case BrowserInputController: return { kind: 'browser', props: {
+            header: props.header, label: props.label, value: props.value,
+            onChange: props.onChange, portalTarget: props.portalTarget, config: props.config } };
+        case FixedPositionInputController: return { kind: 'fixedposition', props: {
+            value: props.value, onChange: props.onChange, onFocus: props.onFocus, id: props.id } };
+        case VectorInputController: return { kind: 'vector', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            description: props.description, controllerId: props.controllerId,
+            openDropdowns: props.openDropdowns, toggleDropdown: props.toggleDropdown,
+            onFocus: props.onFocus, hideRecentFromList: props.hideRecentFromList,
+            hideTrashIcon: props.hideTrashIcon } };
+        case AngleInputController: return { kind: 'angle', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case TimeInputController: return { kind: 'time', props: {
+            label: props.label, value: props.value, onChange: props.onChange,
+            helpText: props.helpText, onFocus: props.onFocus } };
+        case RoundedCornersInputController: return { kind: 'roundedcorners', props: {
+            value: props.value, onChange: props.onChange, helpText: props.helpText,
+            onFocus: props.onFocus } };
+        case TagsInputController: return { kind: 'tags', props: {
+            label: props.label, value: props.value, onChange: props.onChange, config: props.config,
+            helpText: props.helpText, onFocus: props.onFocus } };
         default: return null;
       }
     }
@@ -1636,39 +1738,16 @@
     }
     
     /**
-     * Interface definitions for content structure
+     * SCHEMA SHAPES — aliases of the package's canonical schema views
+     * (`$lib/schemaViews`, exported at the package root). PropsEditor used to
+     * declare stricter local duplicates, which made every array flowing from
+     * the open view props unassignable to them; the canonical names are the
+     * same types now, so the contract holds across the package boundary.
      */
-    interface Property {
-      id: string;
-      name?: string;
-      type: string;
-      defaultValue?: any;
-      value?: any;  // Add value property to interface
-      constraints?: Record<string, any>;
-      inputController: {
-        type: string;
-        description?: string;
-        helpText?: string;
-        config?: Record<string, any>;
-      };
-    }
-
-    interface ContentItem {
-      // Saved content may carry schema-defined values alongside its metadata.
-      [propertyName: string]: unknown;
-      id: string;
-      properties: Array<Property>;
-      orderNumber?: number;
-      title?: string;
-    }
-
-    interface ContentSchema {
-      genericContent: {
-        title: string;
-        properties: Array<Property>;
-      };
-      contentItems: ContentItem[];
-    }
+    type Property = DesignSchemaPropertyView;
+    type PropertyGroup = DesignSchemaPropertyGroupView;
+    type ContentItem = ContentSchemaItemView;
+    type ContentSchema = ContentSchemaView;
     
     onMount(() => {
       const resizeObserver = new ResizeObserver(() => {
@@ -2091,7 +2170,13 @@
             const key = p.id || p.name;
             // Canonical state first; schema mirror/defaultValue are legacy
             // seeds for keys the editor never touched.
-            const liveOnItem = key != null ? (item as Record<string, unknown>)[key] : undefined;
+            const liveOnItem =
+              key != null
+                ? // Items legitimately carry canonical per-key state alongside
+                  // `properties`; route through unknown to the index signature
+                  // honestly.
+                  (item as unknown as Record<string, unknown>)[key]
+                : undefined;
             props[key] = normalizeContentPropertyValue(
               pickLiveContentValue(
                 contentState[`${item.id}__${key}`],
@@ -2587,8 +2672,7 @@
                                         <InputControllerRenderer
                                           controller={describeInputController(InputComponent, {
                                             ...props,
-                                            value: reactiveValue !== undefined ? reactiveValue : props.value,
-                                            shouldFocus: activeControllerId === props.id
+                                            value: reactiveValue !== undefined ? reactiveValue : props.value
                                           })}
                                         />
                                       </div>
@@ -2698,7 +2782,7 @@
                                         
                                         <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                           <InputControllerRenderer
-                                            controller={describeInputController(InputComponent, { ...props, header, shouldFocus: activeControllerId === props.id })}
+                                            controller={describeInputController(InputComponent, { ...props, header })}
                                           />
                                         </div>
                                       </div>
@@ -2796,7 +2880,7 @@
                                                 
                                                 <div class="ic-input-ct {isFontIc ? 'w-full' : 'shrink-0'}" style={isFontIc ? '' : 'width: 185px;'}>
                                                   <InputControllerRenderer
-                                                    controller={describeInputController(InputComponent, { ...props, header, shouldFocus: activeControllerId === props.id })}
+                                                    controller={describeInputController(InputComponent, { ...props, header })}
                                                   />
                                                 </div>
                                               </div>

package/dist/components/editors/PropsEditor.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { ContentSchemaView, DesignSchemaView } from '../../schemaViews.js';
 /**
      * STYLES from Widgetic Design System
      * Note: props-editor.css global rules (body, *) moved to app.css (standalone only).
@@ -24,8 +25,8 @@ declare const PropsEditor: $$__sveltets_2_IsomorphicComponent<{
     style?: string;
     width?: string;
     height?: string;
-    designSchema?: any;
-    contentSchema?: any | undefined;
+    designSchema?: DesignSchemaView | null;
+    contentSchema?: ContentSchemaView | undefined;
     itemTemplate?: any;
     designTabTitle?: string;
     contentTabTitle?: string;

package/dist/components/ic/AngleInputController.svelte

@@ -11,19 +11,33 @@
  * - Smooth transitions and visual feedback
  -->
 
+<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 AngleInputControllerProps {
+    label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    helpText?: string;
+    onFocus?: () => void;
+  }
+</script>
+
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
   import { Button, Input } from '@widgetic/design-system/components';
   import InputControllerHeader from './InputControllerHeader.svelte';
   import NumberControls from './NumberControls.svelte';
-  import type { InputControllerConfig } from './index';
 
-  export let label: string;
-  export let value: number = 0;
-  export let onChange: (newValue: number) => void;
-  export let config: InputControllerConfig = {};
-  export let helpText: string | undefined = undefined;
-  export let onFocus: () => void = () => {};
+  export let label: AngleInputControllerProps['label'];
+  export let value: AngleInputControllerProps['value'] = 0;
+  export let onChange: AngleInputControllerProps['onChange'];
+  export let config: AngleInputControllerProps['config'] = {};
+  export let helpText: AngleInputControllerProps['helpText'] = undefined;
+  export let onFocus: AngleInputControllerProps['onFocus'] = () => {};
 
   // Circle indicator state
   let isDragging = false;

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

@@ -1,4 +1,14 @@
 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 AngleInputControllerProps {
+    label: string;
+    value?: number;
+    onChange: (newValue: number) => void;
+    config?: InputControllerConfig;
+    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;
@@ -13,12 +23,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const AngleInputController: $$__sveltets_2_IsomorphicComponent<{
-    label: string;
-    value?: number;
-    onChange: (newValue: number) => void;
-    config?: InputControllerConfig;
-    helpText?: string | undefined;
-    onFocus?: () => void;
+    label: AngleInputControllerProps["label"];
+    value?: AngleInputControllerProps["value"];
+    onChange: AngleInputControllerProps["onChange"];
+    config?: AngleInputControllerProps["config"];
+    helpText?: AngleInputControllerProps["helpText"];
+    onFocus?: AngleInputControllerProps["onFocus"];
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/ic/BrowserInputController.svelte

@@ -1,3 +1,25 @@
+<script module lang="ts">
+  import type { InputControllerConfig } from './index';
+
+  interface FileValue {
+    id: string;
+    file: string;
+    url: string;
+    hash?: string; // Add hash property for ThumbHash
+  }
+
+  /** Declared props contract — export lets below are annotated from it so the
+   *  interface cannot drift from what the component actually reads. */
+  export interface BrowserInputControllerProps {
+    header?: { label: string; helpText?: string };
+    label?: string;
+    value?: string | FileValue;
+    onChange?: (newValue: string | FileValue) => void;
+    portalTarget?: string | HTMLElement;
+    config?: InputControllerConfig;
+  }
+</script>
+
 <script lang="ts">
   /**
    * BrowserInputController Component
@@ -16,8 +38,6 @@
   import X from '../icons/x.svelte';
   // console.log("BrowserInputController - Tooltip:", Tooltip);
   
-  // config imports 
-  import type { InputControllerConfig } from './index';
 
   // utils imports
   import MediaManager from '../../utils/MediaManager';
@@ -32,26 +52,19 @@
 
   import { InputControllerHeader } from './index';
 
-  interface FileValue {
-    id: string;
-    file: string;
-    url: string;
-    hash?: string; // Add hash property for ThumbHash
-  }
-
   // Component props with default values
-  export let header: { label: string; helpText?: string } | undefined = undefined;
-  export let label: string = '';
-  export let value: string | FileValue = '';
-  export let onChange: (newValue: string | FileValue) => void = () => {};
-  export let portalTarget: string | HTMLElement = 'portal-element';
+  export let header: BrowserInputControllerProps['header'] = undefined;
+  export let label: BrowserInputControllerProps['label'] = '';
+  export let value: BrowserInputControllerProps['value'] = '';
+  export let onChange: BrowserInputControllerProps['onChange'] = () => {};
+  export let portalTarget: BrowserInputControllerProps['portalTarget'] = 'portal-element';
 
   /** Full-panel overlay when portaled to props-editor panel (not document body). */
   $: fillEditorPanel =
     portalTarget === 'props-editor-file-browser-portal' ||
     (portalTarget instanceof HTMLElement &&
       portalTarget.id === 'props-editor-file-browser-portal');
-  export let config: InputControllerConfig = {};
+  export let config: BrowserInputControllerProps['config'] = {};
   
   // Extract allowed file types from config or default to all files
   const fileTypes = config.fileTypes || ['*'];