@widgetic/editor 4.0.6 → 4.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +12 -1
  2. package/dist/components/WidgetPreview.svelte +42 -1
  3. package/dist/components/WidgetPreview.svelte.d.ts +8 -0
  4. package/dist/components/editors/EmbedEditor.svelte +101 -530
  5. package/dist/components/editors/EmbedEditor.svelte.d.ts +7 -17
  6. package/dist/components/editors/PropsEditor.svelte +328 -142
  7. package/dist/components/editors/PropsEditor.svelte.d.ts +13 -2
  8. package/dist/components/ic/AngleInputController.svelte +21 -7
  9. package/dist/components/ic/AngleInputController.svelte.d.ts +16 -6
  10. package/dist/components/ic/BrowserInputController.svelte +28 -15
  11. package/dist/components/ic/BrowserInputController.svelte.d.ts +25 -19
  12. package/dist/components/ic/CheckboxInputController.svelte +21 -7
  13. package/dist/components/ic/CheckboxInputController.svelte.d.ts +25 -15
  14. package/dist/components/ic/ColorPickerInputController.svelte +47 -21
  15. package/dist/components/ic/ColorPickerInputController.svelte.d.ts +42 -19
  16. package/dist/components/ic/DateFieldInputController.svelte +21 -7
  17. package/dist/components/ic/DateFieldInputController.svelte.d.ts +24 -14
  18. package/dist/components/ic/DatePickerInputController.svelte +25 -8
  19. package/dist/components/ic/DatePickerInputController.svelte.d.ts +21 -8
  20. package/dist/components/ic/DropdownInputController.svelte +69 -19
  21. package/dist/components/ic/DropdownInputController.svelte.d.ts +33 -17
  22. package/dist/components/ic/FixedPositionInputController.svelte +24 -10
  23. package/dist/components/ic/FixedPositionInputController.svelte.d.ts +16 -4
  24. package/dist/components/ic/FontInputController.svelte +53 -18
  25. package/dist/components/ic/FontInputController.svelte.d.ts +33 -18
  26. package/dist/components/ic/InputControllerRenderer.svelte +98 -0
  27. package/dist/components/ic/InputControllerRenderer.svelte.d.ts +40 -0
  28. package/dist/components/ic/NumberInputController.svelte +23 -9
  29. package/dist/components/ic/NumberInputController.svelte.d.ts +18 -7
  30. package/dist/components/ic/PositionInputController.svelte +17 -5
  31. package/dist/components/ic/PositionInputController.svelte.d.ts +20 -11
  32. package/dist/components/ic/RadioGroupInputController.svelte +21 -7
  33. package/dist/components/ic/RadioGroupInputController.svelte.d.ts +22 -12
  34. package/dist/components/ic/RangeCalendarInputController.svelte +34 -16
  35. package/dist/components/ic/RangeCalendarInputController.svelte.d.ts +25 -11
  36. package/dist/components/ic/RoundedCornersInputController.svelte +26 -22
  37. package/dist/components/ic/RoundedCornersInputController.svelte.d.ts +26 -18
  38. package/dist/components/ic/SliderInputController.svelte +41 -18
  39. package/dist/components/ic/SliderInputController.svelte.d.ts +35 -19
  40. package/dist/components/ic/SliderRangeInputController.svelte +27 -11
  41. package/dist/components/ic/SliderRangeInputController.svelte.d.ts +22 -9
  42. package/dist/components/ic/SwitchInputController.svelte +17 -5
  43. package/dist/components/ic/SwitchInputController.svelte.d.ts +14 -5
  44. package/dist/components/ic/TagsInputController.svelte +21 -7
  45. package/dist/components/ic/TagsInputController.svelte.d.ts +16 -6
  46. package/dist/components/ic/TextAreaInputController.svelte +44 -25
  47. package/dist/components/ic/TextAreaInputController.svelte.d.ts +6 -4
  48. package/dist/components/ic/TextAreaPreviewInputController.svelte +21 -7
  49. package/dist/components/ic/TextAreaPreviewInputController.svelte.d.ts +16 -6
  50. package/dist/components/ic/TextInputController.svelte +23 -8
  51. package/dist/components/ic/TextInputController.svelte.d.ts +20 -8
  52. package/dist/components/ic/TimeInputController.svelte +17 -5
  53. package/dist/components/ic/TimeInputController.svelte.d.ts +14 -5
  54. package/dist/components/ic/VectorInputController.svelte +29 -10
  55. package/dist/components/ic/VectorInputController.svelte.d.ts +33 -18
  56. package/dist/components/icons/locked.svelte +5 -1
  57. package/dist/components/icons/locked.svelte.d.ts +11 -24
  58. package/dist/components/icons/unlocked.svelte +5 -1
  59. package/dist/components/icons/unlocked.svelte.d.ts +11 -24
  60. package/dist/index.d.ts +1 -0
  61. package/dist/schemaViews.d.ts +105 -0
  62. package/dist/schemaViews.js +11 -0
  63. package/dist/utils/FontManager.js +11 -4
  64. package/package.json +16 -12
@@ -1,3 +1,28 @@
1
+ <script module lang="ts">
2
+ import type { InputControllerConfig } from './index';
3
+ import type { SliderProps } from '@widgetic/design-system/components';
4
+
5
+ /** Declared props contract — export lets below are annotated from it so the
6
+ * interface cannot drift from what the component actually reads. */
7
+ export interface SliderInputControllerProps {
8
+ height?: number;
9
+ elementsGap?: number;
10
+ thumbSize?: number;
11
+ sliderType?: SliderProps['type'];
12
+ barHeight?: number;
13
+ label?: string;
14
+ value: number | number[];
15
+ onChange: (newValue: number | number[]) => void;
16
+ config?: InputControllerConfig;
17
+ helpText?: string;
18
+ min?: number;
19
+ max?: number;
20
+ step?: number;
21
+ onFocus?: () => void;
22
+ autofocus?: boolean;
23
+ }
24
+ </script>
25
+
1
26
  <script lang="ts">
2
27
  /**
3
28
  * SliderInputController Component
@@ -16,11 +41,9 @@
16
41
  /**
17
42
  * Shadcn UI components from Widgetic design-system package
18
43
  */
19
- import { Slider, type SliderProps } from '@widgetic/design-system/components';
44
+ import { Slider } from '@widgetic/design-system/components';
20
45
  import { InputControllerHeader } from './index';
21
46
 
22
- // Component config
23
- import type { InputControllerConfig } from './index';
24
47
 
25
48
  /**
26
49
  * Component Props
@@ -28,26 +51,26 @@
28
51
  */
29
52
  let className = '';
30
53
  export { className as class };
31
- export let height = 48; // pixels
32
- export let elementsGap = 8; // pixels
33
- export let thumbSize = 24; // pixels
34
- export let sliderType: SliderProps['type'] = "single";
35
- export let barHeight = 8; // pixels
36
- export let label: string = ''; // Display label
37
- export let value: number | number[]; // Current slider value
38
- export let onChange: (newValue: number | number[]) => void; // Value change callback
39
- export let config: InputControllerConfig = {}; // Additional configuration
40
- export let helpText: string | undefined = undefined; // Help text for the input
54
+ export let height: SliderInputControllerProps['height'] = 48;
55
+ export let elementsGap: SliderInputControllerProps['elementsGap'] = 8;
56
+ export let thumbSize: SliderInputControllerProps['thumbSize'] = 24;
57
+ export let sliderType: SliderInputControllerProps['sliderType'] = "single";
58
+ export let barHeight: SliderInputControllerProps['barHeight'] = 8;
59
+ export let label: SliderInputControllerProps['label'] = '';
60
+ export let value: SliderInputControllerProps['value'];
61
+ export let onChange: SliderInputControllerProps['onChange'];
62
+ export let config: SliderInputControllerProps['config'] = {};
63
+ export let helpText: SliderInputControllerProps['helpText'] = undefined;
41
64
 
42
65
  /**
43
66
  * Configuration Options
44
67
  * Derived from config prop with fallbacks
45
68
  */
46
- export let min: number = config.min || 0; // Minimum allowed value
47
- export let max: number = config.max || 100; // Maximum allowed value
48
- export let step: number = config.step || 1; // Step increment
49
- export let onFocus: () => void = () => {}; // Focus callback
50
- export let autofocus: boolean = false; // Auto-focus on mount
69
+ export let min: SliderInputControllerProps['min'] = config.min || 0;
70
+ export let max: SliderInputControllerProps['max'] = config.max || 100;
71
+ export let step: SliderInputControllerProps['step'] = config.step || 1;
72
+ export let onFocus: SliderInputControllerProps['onFocus'] = () => {};
73
+ export let autofocus: SliderInputControllerProps['autofocus'] = false; // Auto-focus on mount
51
74
 
52
75
  /**
53
76
  * Internal State
@@ -1,8 +1,24 @@
1
- /**
2
- * Shadcn UI components from Widgetic design-system package
3
- */
4
- import { type SliderProps } from '@widgetic/design-system/components';
5
1
  import type { InputControllerConfig } from './index';
2
+ import type { SliderProps } from '@widgetic/design-system/components';
3
+ /** Declared props contract — export lets below are annotated from it so the
4
+ * interface cannot drift from what the component actually reads. */
5
+ export interface SliderInputControllerProps {
6
+ height?: number;
7
+ elementsGap?: number;
8
+ thumbSize?: number;
9
+ sliderType?: SliderProps['type'];
10
+ barHeight?: number;
11
+ label?: string;
12
+ value: number | number[];
13
+ onChange: (newValue: number | number[]) => void;
14
+ config?: InputControllerConfig;
15
+ helpText?: string;
16
+ min?: number;
17
+ max?: number;
18
+ step?: number;
19
+ onFocus?: () => void;
20
+ autofocus?: boolean;
21
+ }
6
22
  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> {
7
23
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
8
24
  $$bindings?: Bindings;
@@ -21,24 +37,24 @@ declare const SliderInputController: $$__sveltets_2_IsomorphicComponent<{
21
37
  * Component Props
22
38
  * External properties that configure the slider's behavior
23
39
  */ class?: string;
24
- height?: number;
25
- elementsGap?: number;
26
- thumbSize?: number;
27
- sliderType?: SliderProps["type"];
28
- barHeight?: number;
29
- label?: string;
30
- value: number | number[];
31
- onChange: (newValue: number | number[]) => void;
32
- config?: InputControllerConfig;
33
- helpText?: string | undefined;
40
+ height?: SliderInputControllerProps["height"];
41
+ elementsGap?: SliderInputControllerProps["elementsGap"];
42
+ thumbSize?: SliderInputControllerProps["thumbSize"];
43
+ sliderType?: SliderInputControllerProps["sliderType"];
44
+ barHeight?: SliderInputControllerProps["barHeight"];
45
+ label?: SliderInputControllerProps["label"];
46
+ value: SliderInputControllerProps["value"];
47
+ onChange: SliderInputControllerProps["onChange"];
48
+ config?: SliderInputControllerProps["config"];
49
+ helpText?: SliderInputControllerProps["helpText"];
34
50
  /**
35
51
  * Configuration Options
36
52
  * Derived from config prop with fallbacks
37
- */ min?: number;
38
- max?: number;
39
- step?: number;
40
- onFocus?: () => void;
41
- autofocus?: boolean;
53
+ */ min?: SliderInputControllerProps["min"];
54
+ max?: SliderInputControllerProps["max"];
55
+ step?: SliderInputControllerProps["step"];
56
+ onFocus?: SliderInputControllerProps["onFocus"];
57
+ autofocus?: SliderInputControllerProps["autofocus"];
42
58
  }, {
43
59
  [evt: string]: CustomEvent<any>;
44
60
  }, {}, {}, string>;
@@ -17,6 +17,24 @@
17
17
  * - Manages focus states across multiple inputs
18
18
  -->
19
19
 
20
+ <script module lang="ts">
21
+ import type { InputControllerConfig } from './index';
22
+
23
+ /** Declared props contract — export lets below are annotated from it so the
24
+ * interface cannot drift from what the component actually reads. */
25
+ export interface SliderRangeInputControllerProps {
26
+ label: string;
27
+ value?: [number, number];
28
+ onChange: (newValue: [number, number]) => void;
29
+ config?: InputControllerConfig;
30
+ helpText?: string;
31
+ min?: number;
32
+ max?: number;
33
+ step?: number;
34
+ onFocus?: () => void;
35
+ }
36
+ </script>
37
+
20
38
  <script lang="ts">
21
39
  // Svelte imports
22
40
  import { onMount, tick } from 'svelte';
@@ -24,26 +42,24 @@
24
42
  // local components imports
25
43
  import SliderInputController from './SliderInputController.svelte';
26
44
 
27
- // Component config
28
- import type { InputControllerConfig } from './index';
29
45
 
30
46
  // Component props
31
47
  let className = '';
32
48
  export { className as class };
33
- export let label: string;
34
- export let value: [number, number] = [0, 100];
35
- export let onChange: (newValue: [number, number]) => void;
36
- export let config: InputControllerConfig = {};
37
- export let helpText: string | undefined = undefined;
49
+ export let label: SliderRangeInputControllerProps['label'];
50
+ export let value: SliderRangeInputControllerProps['value'] = [0, 100];
51
+ export let onChange: SliderRangeInputControllerProps['onChange'];
52
+ export let config: SliderRangeInputControllerProps['config'] = {};
53
+ export let helpText: SliderRangeInputControllerProps['helpText'] = undefined;
38
54
 
39
55
  /**
40
56
  * Configuration Options
41
57
  * Derived from config prop with fallbacks
42
58
  */
43
- export let min: number = config.min || 0;
44
- export let max: number = config.max || 100;
45
- export let step: number = config.step || 1;
46
- export let onFocus: () => void = () => {};
59
+ export let min: SliderRangeInputControllerProps['min'] = config.min || 0;
60
+ export let max: SliderRangeInputControllerProps['max'] = config.max || 100;
61
+ export let step: SliderRangeInputControllerProps['step'] = config.step || 1;
62
+ export let onFocus: SliderRangeInputControllerProps['onFocus'] = () => {};
47
63
  // export let autofocus: boolean = false;
48
64
 
49
65
  // Store initial scroll position
@@ -1,4 +1,17 @@
1
1
  import type { InputControllerConfig } from './index';
2
+ /** Declared props contract — export lets below are annotated from it so the
3
+ * interface cannot drift from what the component actually reads. */
4
+ export interface SliderRangeInputControllerProps {
5
+ label: string;
6
+ value?: [number, number];
7
+ onChange: (newValue: [number, number]) => void;
8
+ config?: InputControllerConfig;
9
+ helpText?: string;
10
+ min?: number;
11
+ max?: number;
12
+ step?: number;
13
+ onFocus?: () => void;
14
+ }
2
15
  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> {
3
16
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
17
  $$bindings?: Bindings;
@@ -14,18 +27,18 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
14
27
  }
15
28
  declare const SliderRangeInputController: $$__sveltets_2_IsomorphicComponent<{
16
29
  class?: string;
17
- label: string;
18
- value?: [number, number];
19
- onChange: (newValue: [number, number]) => void;
20
- config?: InputControllerConfig;
21
- helpText?: string | undefined;
30
+ label: SliderRangeInputControllerProps["label"];
31
+ value?: SliderRangeInputControllerProps["value"];
32
+ onChange: SliderRangeInputControllerProps["onChange"];
33
+ config?: SliderRangeInputControllerProps["config"];
34
+ helpText?: SliderRangeInputControllerProps["helpText"];
22
35
  /**
23
36
  * Configuration Options
24
37
  * Derived from config prop with fallbacks
25
- */ min?: number;
26
- max?: number;
27
- step?: number;
28
- onFocus?: () => void;
38
+ */ min?: SliderRangeInputControllerProps["min"];
39
+ max?: SliderRangeInputControllerProps["max"];
40
+ step?: SliderRangeInputControllerProps["step"];
41
+ onFocus?: SliderRangeInputControllerProps["onFocus"];
29
42
  }, {
30
43
  [evt: string]: CustomEvent<any>;
31
44
  }, {}, {}, string>;
@@ -1,3 +1,15 @@
1
+ <script module lang="ts">
2
+ /** Declared props contract — export lets below are annotated from it so the
3
+ * interface cannot drift from what the component actually reads. */
4
+ export interface SwitchInputControllerProps {
5
+ label: string;
6
+ value: boolean;
7
+ onChange: (newValue: boolean) => void;
8
+ description?: string;
9
+ onFocus?: () => void;
10
+ }
11
+ </script>
12
+
1
13
  <script lang="ts">
2
14
  // Svelte imports
3
15
  import { onMount } from 'svelte';
@@ -7,11 +19,11 @@
7
19
  import { InputControllerHeader } from './index';
8
20
 
9
21
  // Component props
10
- export let label: string;
11
- export let value: boolean;
12
- export let onChange: (newValue: boolean) => void;
13
- export let description: string | undefined = undefined;
14
- export let onFocus: () => void = () => {};
22
+ export let label: SwitchInputControllerProps['label'];
23
+ export let value: SwitchInputControllerProps['value'];
24
+ export let onChange: SwitchInputControllerProps['onChange'];
25
+ export let description: SwitchInputControllerProps['description'] = undefined;
26
+ export let onFocus: SwitchInputControllerProps['onFocus'] = () => {};
15
27
 
16
28
  function toggle(newValue?: boolean) {
17
29
  value = typeof newValue === 'boolean' ? newValue : !value;
@@ -1,3 +1,12 @@
1
+ /** Declared props contract — export lets below are annotated from it so the
2
+ * interface cannot drift from what the component actually reads. */
3
+ export interface SwitchInputControllerProps {
4
+ label: string;
5
+ value: boolean;
6
+ onChange: (newValue: boolean) => void;
7
+ description?: string;
8
+ onFocus?: () => void;
9
+ }
1
10
  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> {
2
11
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
12
  $$bindings?: Bindings;
@@ -12,11 +21,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
12
21
  z_$$bindings?: Bindings;
13
22
  }
14
23
  declare const SwitchInputController: $$__sveltets_2_IsomorphicComponent<{
15
- label: string;
16
- value: boolean;
17
- onChange: (newValue: boolean) => void;
18
- description?: string | undefined;
19
- onFocus?: () => void;
24
+ label: SwitchInputControllerProps["label"];
25
+ value: SwitchInputControllerProps["value"];
26
+ onChange: SwitchInputControllerProps["onChange"];
27
+ description?: SwitchInputControllerProps["description"];
28
+ onFocus?: SwitchInputControllerProps["onFocus"];
20
29
  }, {
21
30
  [evt: string]: CustomEvent<any>;
22
31
  }, {}, {}, string>;
@@ -11,19 +11,33 @@
11
11
  * - Prevents duplicate tags
12
12
  -->
13
13
 
14
+ <script module lang="ts">
15
+ import type { InputControllerConfig } from './index';
16
+
17
+ /** Declared props contract — export lets below are annotated from it so the
18
+ * interface cannot drift from what the component actually reads. */
19
+ export interface TagsInputControllerProps {
20
+ label: string;
21
+ value?: string[];
22
+ onChange: (newValue: string[]) => void;
23
+ config?: InputControllerConfig;
24
+ helpText?: string;
25
+ onFocus?: () => void;
26
+ }
27
+ </script>
28
+
14
29
  <script lang="ts">
15
30
  import { onMount, onDestroy } from 'svelte';
16
31
  import InputControllerHeader from './InputControllerHeader.svelte';
17
- import type { InputControllerConfig } from './index';
18
32
  import { IconX } from '@widgetic/design-system/icons';
19
33
 
20
34
  // Required props
21
- export let label: string;
22
- export let value: string[] = [];
23
- export let onChange: (newValue: string[]) => void;
24
- export let config: InputControllerConfig = {};
25
- export let helpText: string | undefined = undefined;
26
- export let onFocus: () => void = () => {};
35
+ export let label: TagsInputControllerProps['label'];
36
+ export let value: TagsInputControllerProps['value'] = [];
37
+ export let onChange: TagsInputControllerProps['onChange'];
38
+ export let config: TagsInputControllerProps['config'] = {};
39
+ export let helpText: TagsInputControllerProps['helpText'] = undefined;
40
+ export let onFocus: TagsInputControllerProps['onFocus'] = () => {};
27
41
 
28
42
  // Optional: Class prop for external styling
29
43
  let className = '';
@@ -1,4 +1,14 @@
1
1
  import type { InputControllerConfig } from './index';
2
+ /** Declared props contract — export lets below are annotated from it so the
3
+ * interface cannot drift from what the component actually reads. */
4
+ export interface TagsInputControllerProps {
5
+ label: string;
6
+ value?: string[];
7
+ onChange: (newValue: string[]) => void;
8
+ config?: InputControllerConfig;
9
+ helpText?: string;
10
+ onFocus?: () => void;
11
+ }
2
12
  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> {
3
13
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
14
  $$bindings?: Bindings;
@@ -13,12 +23,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
13
23
  z_$$bindings?: Bindings;
14
24
  }
15
25
  declare const TagsInputController: $$__sveltets_2_IsomorphicComponent<{
16
- label: string;
17
- value?: string[];
18
- onChange: (newValue: string[]) => void;
19
- config?: InputControllerConfig;
20
- helpText?: string | undefined;
21
- onFocus?: () => void;
26
+ label: TagsInputControllerProps["label"];
27
+ value?: TagsInputControllerProps["value"];
28
+ onChange: TagsInputControllerProps["onChange"];
29
+ config?: TagsInputControllerProps["config"];
30
+ helpText?: TagsInputControllerProps["helpText"];
31
+ onFocus?: TagsInputControllerProps["onFocus"];
22
32
  class?: string;
23
33
  }, {
24
34
  [evt: string]: CustomEvent<any>;
@@ -22,14 +22,29 @@
22
22
  - Maintains formatting consistency across operations
23
23
  -->
24
24
 
25
+ <script module lang="ts">
26
+ import type { InputControllerConfig } from './index';
27
+
28
+ /** Declared props contract — the instance script's $props() below is
29
+ * annotated from it so the interface cannot drift from what is read. */
30
+ export interface TextAreaInputControllerProps {
31
+ class?: string;
32
+ label: string;
33
+ value: string;
34
+ onChange: (newValue: string) => void;
35
+ config?: InputControllerConfig;
36
+ description?: string;
37
+ onFocus?: () => void;
38
+ onClose?: () => void;
39
+ }
40
+ </script>
41
+
25
42
  <script lang="ts">
26
43
  // Svelte imports
27
44
  import { onMount, onDestroy } from 'svelte';
28
45
  import { writable } from 'svelte/store';
29
46
  import type { ComponentEvents } from 'svelte';
30
47
 
31
- // Component config
32
- import type { InputControllerConfig } from './index';
33
48
 
34
49
  // Import Shadcn UI components
35
50
  import { Button, ToggleGroup, Popover, Command } from '@widgetic/design-system/components';
@@ -71,19 +86,10 @@
71
86
  description = undefined,
72
87
  onFocus = () => {},
73
88
  onClose = undefined
74
- } = $props<{
75
- class: string;
76
- label: string;
77
- value: string;
78
- onChange: (newValue: string) => void;
79
- config?: InputControllerConfig;
80
- description?: string;
81
- onFocus?: () => void;
82
- onClose?: () => void;
83
- }>();
89
+ }: TextAreaInputControllerProps = $props();
84
90
 
85
91
  // Use config values with fallbacks
86
- const textColor = config.textColor || '#1a1a1a';
92
+ const textColor = $derived(config.textColor || '#1a1a1a');
87
93
 
88
94
  /**
89
95
  * State Variables
@@ -121,7 +127,7 @@
121
127
  let currentTextStyle = $state('text'); // Track current text style
122
128
 
123
129
  let showColorPicker = $state(false);
124
- let currentColor = $state(textColor);
130
+ let currentColor = $derived(textColor);
125
131
  let selectedTextRange: { from: number, to: number } | null = $state(null);
126
132
 
127
133
  const textOptions = [
@@ -159,16 +165,16 @@
159
165
 
160
166
 
161
167
 
162
- // Update to use $derived for reactive statement
163
- const editorStyle = $derived(`
168
+ // Static styles — avoid $derived so teardown does not leave inert derived reads.
169
+ const editorStyle = `
164
170
  --editor-min-height: auto;
165
171
  --editor-max-height: none;
166
172
  --transition-duration: 0ms;
167
173
  --transition-timing: ease-out;
168
- `);
174
+ `;
169
175
 
170
176
  // Add this with other state declarations
171
- let editorClass = $derived(`border-none overflow-auto editor-height ${''}`);
177
+ let editorClass = 'border-none overflow-auto editor-height';
172
178
 
173
179
  // Add state to track if any dropdown is open
174
180
  let isDropdownOpen = $state(false);
@@ -191,6 +197,7 @@
191
197
  // Add these new state variables after the other state declarations
192
198
  let lastKnownContent = $state('');
193
199
  let wasVisible = $state(true);
200
+ let isDestroyed = false;
194
201
 
195
202
  function handleEditorMount(e: any) {
196
203
  editorInstance = e.detail.editor;
@@ -361,6 +368,7 @@
361
368
  // Only update if there's a change to prevent unnecessary rerenders
362
369
  if (JSON.stringify(newFormats) !== JSON.stringify($state.snapshot(activeFormats))) {
363
370
  activeFormats = newFormats;
371
+ syncToggleValues();
364
372
  // console.log('Active formats updated:', $state.snapshot(activeFormats));
365
373
  }
366
374
  }
@@ -440,11 +448,20 @@
440
448
  }
441
449
  }
442
450
 
443
- // Update derived toggleValues with proper typing
444
- const toggleValues = $derived(Object.entries(activeFormats)
445
- .filter(([_, isActive]) => isActive)
446
- .map(([format]) => formatMapping[format as FormatType].value)
447
- );
451
+ // Compute toggle values without $derived — TipTap callbacks can run after unmount
452
+ // and reading an inert derived triggers Svelte's derived_inert warning.
453
+ function getToggleValues(): string[] {
454
+ if (isDestroyed) return [];
455
+ return Object.entries(activeFormats)
456
+ .filter(([_, isActive]) => isActive)
457
+ .map(([format]) => formatMapping[format as FormatType].value);
458
+ }
459
+
460
+ let toggleValues = $state<string[]>([]);
461
+ function syncToggleValues() {
462
+ if (isDestroyed) return;
463
+ toggleValues = getToggleValues();
464
+ }
448
465
 
449
466
  // Restore handleTextStyleChange for other style changes
450
467
  function handleTextStyleChange(value: string) {
@@ -823,7 +840,9 @@
823
840
 
824
841
  // Add effect to handle clicks outside Color Select
825
842
  $effect(() => {
843
+ if (isDestroyed) return;
826
844
  const handleClickOutside = (event: MouseEvent) => {
845
+ if (isDestroyed) return;
827
846
  const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
828
847
  const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
829
848
 
@@ -896,6 +915,7 @@
896
915
 
897
916
  // Update the effect that maintains selection during color picker interactions
898
917
  $effect(() => {
918
+ if (isDestroyed) return;
899
919
  if (showColorPicker && selectedTextRange && editorInstance) {
900
920
  const { from, to } = selectedTextRange;
901
921
  editorInstance.chain()
@@ -1020,6 +1040,7 @@
1020
1040
 
1021
1041
  // Add cleanup function
1022
1042
  onDestroy(() => {
1043
+ isDestroyed = true;
1023
1044
  if (editorInstance) {
1024
1045
  // Store the current content before unmounting
1025
1046
  lastKnownContent = editorInstance.getHTML();
@@ -1336,8 +1357,6 @@
1336
1357
  handleColorChange(color);
1337
1358
  }}
1338
1359
  controllerId="text-color-picker"
1339
- {openDropdowns}
1340
- {toggleDropdown}
1341
1360
  saveRecentColors={true}
1342
1361
  showOpacityControls={false}
1343
1362
  showRing={false}
@@ -1,6 +1,8 @@
1
1
  import type { InputControllerConfig } from './index';
2
- type $$ComponentProps = {
3
- class: string;
2
+ /** Declared props contract — the instance script's $props() below is
3
+ * annotated from it so the interface cannot drift from what is read. */
4
+ export interface TextAreaInputControllerProps {
5
+ class?: string;
4
6
  label: string;
5
7
  value: string;
6
8
  onChange: (newValue: string) => void;
@@ -8,7 +10,7 @@ type $$ComponentProps = {
8
10
  description?: string;
9
11
  onFocus?: () => void;
10
12
  onClose?: () => void;
11
- };
12
- declare const TextAreaInputController: import("svelte").Component<$$ComponentProps, {}, "value">;
13
+ }
14
+ declare const TextAreaInputController: import("svelte").Component<TextAreaInputControllerProps, {}, "value">;
13
15
  type TextAreaInputController = ReturnType<typeof TextAreaInputController>;
14
16
  export default TextAreaInputController;
@@ -1,20 +1,34 @@
1
+ <script module lang="ts">
2
+ import type { InputControllerConfig } from './index';
3
+
4
+ /** Declared props contract — export lets below are annotated from it so the
5
+ * interface cannot drift from what the component actually reads. */
6
+ export interface TextAreaPreviewInputControllerProps {
7
+ label?: string;
8
+ value?: string;
9
+ onChange: (newValue: string) => void;
10
+ config?: InputControllerConfig;
11
+ description?: string;
12
+ portalTarget?: string | HTMLElement;
13
+ }
14
+ </script>
15
+
1
16
  <script lang="ts">
2
17
  import { Portal } from '@widgetic/design-system/components';
3
18
  import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
4
19
  import { onMount, onDestroy } from 'svelte';
5
20
 
6
21
  import { TextAreaInputController } from './index';
7
- import type { InputControllerConfig } from './index';
8
22
 
9
23
  /**
10
24
  * Component props
11
25
  */
12
- export let label: string = '';
13
- export let value: string = '';
14
- export let onChange: any;
15
- export let config: InputControllerConfig = {};
16
- export let description: string | undefined = undefined;
17
- export let portalTarget: string = '';
26
+ export let label: TextAreaPreviewInputControllerProps['label'] = '';
27
+ export let value: TextAreaPreviewInputControllerProps['value'] = '';
28
+ export let onChange: TextAreaPreviewInputControllerProps['onChange'];
29
+ export let config: TextAreaPreviewInputControllerProps['config'] = {};
30
+ export let description: TextAreaPreviewInputControllerProps['description'] = undefined;
31
+ export let portalTarget: TextAreaPreviewInputControllerProps['portalTarget'] = '';
18
32
  /**
19
33
  * Local Variables
20
34
  */
@@ -1,4 +1,14 @@
1
1
  import type { InputControllerConfig } from './index';
2
+ /** Declared props contract — export lets below are annotated from it so the
3
+ * interface cannot drift from what the component actually reads. */
4
+ export interface TextAreaPreviewInputControllerProps {
5
+ label?: string;
6
+ value?: string;
7
+ onChange: (newValue: string) => void;
8
+ config?: InputControllerConfig;
9
+ description?: string;
10
+ portalTarget?: string | HTMLElement;
11
+ }
2
12
  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> {
3
13
  new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
4
14
  $$bindings?: Bindings;
@@ -15,12 +25,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
15
25
  declare const TextAreaPreviewInputController: $$__sveltets_2_IsomorphicComponent<{
16
26
  /**
17
27
  * Component props
18
- */ label?: string;
19
- value?: string;
20
- onChange: any;
21
- config?: InputControllerConfig;
22
- description?: string | undefined;
23
- portalTarget?: string;
28
+ */ label?: TextAreaPreviewInputControllerProps["label"];
29
+ value?: TextAreaPreviewInputControllerProps["value"];
30
+ onChange: TextAreaPreviewInputControllerProps["onChange"];
31
+ config?: TextAreaPreviewInputControllerProps["config"];
32
+ description?: TextAreaPreviewInputControllerProps["description"];
33
+ portalTarget?: TextAreaPreviewInputControllerProps["portalTarget"];
24
34
  }, {
25
35
  [evt: string]: CustomEvent<any>;
26
36
  }, {}, {}, string>;