@widgetic/editor 4.0.6 → 4.0.8

package/dist/components/ic/InputControllerRenderer.svelte

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

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

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

package/dist/components/ic/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

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,13 +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 config: InputControllerConfig = {};
-  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 = '';
@@ -269,7 +282,7 @@
 </script>
 
 <!-- Main corner radius grid component -->
-<div class="corners-container {className}" 
+<div class="corners-container {className}" role="group" aria-label={label || 'Corner radius'} title={helpText}
   on:mouseenter={handleMouseEnter}
   on:mouseleave={handleMouseLeave}
   on:focusin={onFocus}>
@@ -360,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>
@@ -372,19 +385,10 @@
   <div 
     class="border-overlay {isHovering ? 'hovered' : ''}"
     aria-hidden="true"
-  />
+  ></div>
 </div>
 
 <style>
-  /* Hide number input spinners */
-  /* svelte-ignore css_unused_selector */
-  input[type="number"]::-webkit-inner-spin-button,
-  /* svelte-ignore css_unused_selector */
-  input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  
   input {
     -moz-appearance: textfield;
     appearance: textfield;

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

@@ -1,4 +1,21 @@
-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 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;
@@ -13,25 +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;
-    config?: InputControllerConfig;
-    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;