shaders 2.0.656 → 2.0.658

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 (114) hide show
  1. package/dist/react/engine/component.template.d.ts +1 -0
  2. package/dist/react/engine/component.template.d.ts.map +1 -1
  3. package/dist/react/index.cjs +41 -41
  4. package/dist/react/index.cjs.map +1 -1
  5. package/dist/react/index.js +16003 -15970
  6. package/dist/react/index.js.map +1 -1
  7. package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
  8. package/dist/react/utils/generatePresetCode.template.d.ts.map +1 -1
  9. package/dist/svelte/components/Ascii.svelte +22 -15
  10. package/dist/svelte/components/Ascii.svelte.d.ts +4 -26
  11. package/dist/svelte/components/Checkerboard.svelte +22 -15
  12. package/dist/svelte/components/Checkerboard.svelte.d.ts +4 -26
  13. package/dist/svelte/components/Circle.svelte +22 -15
  14. package/dist/svelte/components/Circle.svelte.d.ts +4 -26
  15. package/dist/svelte/components/DotGrid.svelte +22 -15
  16. package/dist/svelte/components/DotGrid.svelte.d.ts +4 -26
  17. package/dist/svelte/components/FilmGrain.svelte +22 -15
  18. package/dist/svelte/components/FilmGrain.svelte.d.ts +4 -26
  19. package/dist/svelte/components/GlassTiles.svelte +22 -15
  20. package/dist/svelte/components/GlassTiles.svelte.d.ts +4 -26
  21. package/dist/svelte/components/Grayscale.svelte +22 -15
  22. package/dist/svelte/components/Grayscale.svelte.d.ts +4 -26
  23. package/dist/svelte/components/Grid.svelte +22 -15
  24. package/dist/svelte/components/Grid.svelte.d.ts +4 -26
  25. package/dist/svelte/components/GridDistortion.svelte +22 -15
  26. package/dist/svelte/components/GridDistortion.svelte.d.ts +4 -26
  27. package/dist/svelte/components/HueShift.svelte +22 -15
  28. package/dist/svelte/components/HueShift.svelte.d.ts +4 -26
  29. package/dist/svelte/components/ImageTexture.svelte +22 -15
  30. package/dist/svelte/components/ImageTexture.svelte.d.ts +4 -26
  31. package/dist/svelte/components/Invert.svelte +22 -15
  32. package/dist/svelte/components/Invert.svelte.d.ts +4 -26
  33. package/dist/svelte/components/LinearGradient.svelte +22 -15
  34. package/dist/svelte/components/LinearGradient.svelte.d.ts +4 -26
  35. package/dist/svelte/components/Liquify.svelte +22 -15
  36. package/dist/svelte/components/Liquify.svelte.d.ts +4 -26
  37. package/dist/svelte/components/Pixelate.svelte +22 -15
  38. package/dist/svelte/components/Pixelate.svelte.d.ts +4 -26
  39. package/dist/svelte/components/Posterize.svelte +22 -15
  40. package/dist/svelte/components/Posterize.svelte.d.ts +4 -26
  41. package/dist/svelte/components/RadialGradient.svelte +22 -15
  42. package/dist/svelte/components/RadialGradient.svelte.d.ts +4 -26
  43. package/dist/svelte/components/Ripple.svelte +22 -15
  44. package/dist/svelte/components/Ripple.svelte.d.ts +4 -26
  45. package/dist/svelte/components/Saturation.svelte +22 -15
  46. package/dist/svelte/components/Saturation.svelte.d.ts +4 -26
  47. package/dist/svelte/components/SolidColor.svelte +22 -15
  48. package/dist/svelte/components/SolidColor.svelte.d.ts +4 -26
  49. package/dist/svelte/components/Spiral.svelte +22 -15
  50. package/dist/svelte/components/Spiral.svelte.d.ts +4 -26
  51. package/dist/svelte/components/Swirl.svelte +22 -15
  52. package/dist/svelte/components/Swirl.svelte.d.ts +4 -26
  53. package/dist/svelte/components/Twirl.svelte +22 -15
  54. package/dist/svelte/components/Twirl.svelte.d.ts +4 -26
  55. package/dist/svelte/components/Vibrance.svelte +22 -15
  56. package/dist/svelte/components/Vibrance.svelte.d.ts +4 -26
  57. package/dist/svelte/engine/Shader.svelte +9 -8
  58. package/dist/svelte/engine/Shader.svelte.d.ts +3 -26
  59. package/dist/svelte/engine/component.template.svelte +22 -15
  60. package/dist/svelte/engine/component.template.svelte.d.ts +4 -26
  61. package/dist/svelte/utils/generatePresetCode.js +1 -0
  62. package/dist/svelte/utils/generatePresetCode.template.js +1 -0
  63. package/dist/vue/components/Ascii.vue.d.ts +4 -0
  64. package/dist/vue/components/Ascii.vue.d.ts.map +1 -1
  65. package/dist/vue/components/Checkerboard.vue.d.ts +4 -0
  66. package/dist/vue/components/Checkerboard.vue.d.ts.map +1 -1
  67. package/dist/vue/components/Circle.vue.d.ts +4 -0
  68. package/dist/vue/components/Circle.vue.d.ts.map +1 -1
  69. package/dist/vue/components/DotGrid.vue.d.ts +4 -0
  70. package/dist/vue/components/DotGrid.vue.d.ts.map +1 -1
  71. package/dist/vue/components/FilmGrain.vue.d.ts +4 -0
  72. package/dist/vue/components/FilmGrain.vue.d.ts.map +1 -1
  73. package/dist/vue/components/GlassTiles.vue.d.ts +4 -0
  74. package/dist/vue/components/GlassTiles.vue.d.ts.map +1 -1
  75. package/dist/vue/components/Grayscale.vue.d.ts +4 -0
  76. package/dist/vue/components/Grayscale.vue.d.ts.map +1 -1
  77. package/dist/vue/components/Grid.vue.d.ts +4 -0
  78. package/dist/vue/components/Grid.vue.d.ts.map +1 -1
  79. package/dist/vue/components/GridDistortion.vue.d.ts +4 -0
  80. package/dist/vue/components/GridDistortion.vue.d.ts.map +1 -1
  81. package/dist/vue/components/HueShift.vue.d.ts +4 -0
  82. package/dist/vue/components/HueShift.vue.d.ts.map +1 -1
  83. package/dist/vue/components/ImageTexture.vue.d.ts +4 -0
  84. package/dist/vue/components/ImageTexture.vue.d.ts.map +1 -1
  85. package/dist/vue/components/Invert.vue.d.ts +4 -0
  86. package/dist/vue/components/Invert.vue.d.ts.map +1 -1
  87. package/dist/vue/components/LinearGradient.vue.d.ts +4 -0
  88. package/dist/vue/components/LinearGradient.vue.d.ts.map +1 -1
  89. package/dist/vue/components/Liquify.vue.d.ts +4 -0
  90. package/dist/vue/components/Liquify.vue.d.ts.map +1 -1
  91. package/dist/vue/components/Pixelate.vue.d.ts +4 -0
  92. package/dist/vue/components/Pixelate.vue.d.ts.map +1 -1
  93. package/dist/vue/components/Posterize.vue.d.ts +4 -0
  94. package/dist/vue/components/Posterize.vue.d.ts.map +1 -1
  95. package/dist/vue/components/RadialGradient.vue.d.ts +4 -0
  96. package/dist/vue/components/RadialGradient.vue.d.ts.map +1 -1
  97. package/dist/vue/components/Ripple.vue.d.ts +4 -0
  98. package/dist/vue/components/Ripple.vue.d.ts.map +1 -1
  99. package/dist/vue/components/Saturation.vue.d.ts +4 -0
  100. package/dist/vue/components/Saturation.vue.d.ts.map +1 -1
  101. package/dist/vue/components/SolidColor.vue.d.ts +4 -0
  102. package/dist/vue/components/SolidColor.vue.d.ts.map +1 -1
  103. package/dist/vue/components/Spiral.vue.d.ts +4 -0
  104. package/dist/vue/components/Spiral.vue.d.ts.map +1 -1
  105. package/dist/vue/components/Swirl.vue.d.ts +4 -0
  106. package/dist/vue/components/Swirl.vue.d.ts.map +1 -1
  107. package/dist/vue/components/Twirl.vue.d.ts +4 -0
  108. package/dist/vue/components/Twirl.vue.d.ts.map +1 -1
  109. package/dist/vue/components/Vibrance.vue.d.ts +4 -0
  110. package/dist/vue/components/Vibrance.vue.d.ts.map +1 -1
  111. package/dist/vue/index.js +38 -38
  112. package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
  113. package/dist/vue/utils/generatePresetCode.template.d.ts.map +1 -1
  114. package/package.json +7 -7
@@ -21,11 +21,14 @@
21
21
  id?: string;
22
22
  maskSource?: string;
23
23
  maskType?: string;
24
+ renderOrder?: number;
25
+ children?: import('svelte').Snippet;
24
26
  }
25
27
 
26
28
  // Define the component props and their default values from the shader definition
27
29
  const componentDefaults = {
28
30
  blendMode: 'normal' as BlendMode,
31
+ renderOrder: 0,
29
32
  // opacity intentionally has no default - handled by renderer
30
33
  ...Object.entries(componentDefinition.props).reduce(
31
34
  (acc, [key, config]) => {
@@ -36,8 +39,8 @@
36
39
  )
37
40
  };
38
41
 
39
- // Declare props using Svelte 5's syntax with defaults
40
- const props = $props<ExtendedComponentProps>();
42
+ // Declare props using Svelte 5's syntax
43
+ const props: ExtendedComponentProps = $props();
41
44
 
42
45
  // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
43
46
  const blendMode = props.blendMode ?? componentDefaults.blendMode;
@@ -45,11 +48,13 @@
45
48
  const id = props.id;
46
49
  const maskSource = props.maskSource;
47
50
  const maskType = props.maskType;
51
+ const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
+ const { children } = props;
48
53
 
49
54
  /**
50
55
  * FIRST: Get the parent ID from context BEFORE setting our own context
51
56
  */
52
- const parentId = getContext<string>('ombreParentId');
57
+ const parentId = getContext<string>('shaderParentId');
53
58
  if (parentId === undefined) {
54
59
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
55
60
  }
@@ -62,7 +67,7 @@
62
67
  /**
63
68
  * THEN: Provide our unique identifier to child components
64
69
  */
65
- setContext('ombreParentId', instanceId);
70
+ setContext('shaderParentId', instanceId);
66
71
 
67
72
  /**
68
73
  * Creates a non-reactive object containing only props that differ from defaults
@@ -74,7 +79,7 @@
74
79
 
75
80
  // Only include props that differ from defaults (excluding special props)
76
81
  for (const key in props) {
77
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
82
+ if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
78
83
  const propValue = (props as any)[key];
79
84
  const defaultValue = (componentDefaults as any)[key];
80
85
  if (propValue !== undefined && propValue !== defaultValue) {
@@ -87,13 +92,15 @@
87
92
 
88
93
  /**
89
94
  * Creates the GPU uniform values map using only the changed props
95
+ * Note: Intentionally captures initial value - props are immutable after initialization
90
96
  */
97
+ // svelte-ignore state_referenced_locally
91
98
  const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
92
99
 
93
100
  /**
94
101
  * Get the node registration function from parent context
95
102
  */
96
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
103
+ const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
97
104
  if (parentRegister === undefined) {
98
105
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
99
106
  }
@@ -101,17 +108,17 @@
101
108
  /**
102
109
  * Get the uniform update function from parent context
103
110
  */
104
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
111
+ const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
105
112
  if (parentUniformUpdate === undefined) {
106
- throw new Error('Shader components require ombreUniformUpdate from parent');
113
+ throw new Error('Shader components require shaderUniformUpdate from parent');
107
114
  }
108
115
 
109
116
  /**
110
117
  * Get the metadata update function from parent context
111
118
  */
112
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
119
+ const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
113
120
  if (parentMetadataUpdate === undefined) {
114
- throw new Error('Shader components require ombreMetadataUpdate from parent');
121
+ throw new Error('Shader components require shaderMetadataUpdate from parent');
115
122
  }
116
123
 
117
124
  // Flag to track when component is registered
@@ -144,9 +151,9 @@
144
151
  id,
145
152
  mask: maskSource ? {
146
153
  source: maskSource,
147
- type: maskType || 'alpha'
154
+ type: (maskType || 'alpha') as MaskConfig['type']
148
155
  } : undefined,
149
- renderOrder: 0
156
+ renderOrder
150
157
  };
151
158
  parentMetadataUpdate(instanceId, metadata);
152
159
  });
@@ -172,9 +179,9 @@
172
179
  id,
173
180
  mask: maskSource ? {
174
181
  source: maskSource,
175
- type: maskType || 'alpha'
182
+ type: (maskType || 'alpha') as MaskConfig['type']
176
183
  } as MaskConfig : undefined,
177
- renderOrder: 0
184
+ renderOrder
178
185
  },
179
186
  uniforms
180
187
  );
@@ -199,4 +206,4 @@
199
206
  });
200
207
  </script>
201
208
 
202
- <slot></slot>
209
+ {@render children?.()}
@@ -9,31 +9,9 @@ interface ExtendedComponentProps extends Partial<ComponentProps> {
9
9
  id?: string;
10
10
  maskSource?: string;
11
11
  maskType?: string;
12
+ renderOrder?: number;
13
+ children?: import('svelte').Snippet;
12
14
  }
13
- 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> {
14
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
15
- $$bindings?: Bindings;
16
- } & Exports;
17
- (internal: unknown, props: Props & {
18
- $$events?: Events;
19
- $$slots?: Slots;
20
- }): Exports & {
21
- $set?: any;
22
- $on?: any;
23
- };
24
- z_$$bindings?: Bindings;
25
- }
26
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
27
- default: any;
28
- } ? Props extends Record<string, never> ? any : {
29
- children?: any;
30
- } : {});
31
- declare const LinearGradient: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
32
- default: {};
33
- }>, {
34
- [evt: string]: CustomEvent<any>;
35
- }, {
36
- default: {};
37
- }, {}, "">;
38
- type LinearGradient = InstanceType<typeof LinearGradient>;
15
+ declare const LinearGradient: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
+ type LinearGradient = ReturnType<typeof LinearGradient>;
39
17
  export default LinearGradient;
@@ -21,11 +21,14 @@
21
21
  id?: string;
22
22
  maskSource?: string;
23
23
  maskType?: string;
24
+ renderOrder?: number;
25
+ children?: import('svelte').Snippet;
24
26
  }
25
27
 
26
28
  // Define the component props and their default values from the shader definition
27
29
  const componentDefaults = {
28
30
  blendMode: 'normal' as BlendMode,
31
+ renderOrder: 0,
29
32
  // opacity intentionally has no default - handled by renderer
30
33
  ...Object.entries(componentDefinition.props).reduce(
31
34
  (acc, [key, config]) => {
@@ -36,8 +39,8 @@
36
39
  )
37
40
  };
38
41
 
39
- // Declare props using Svelte 5's syntax with defaults
40
- const props = $props<ExtendedComponentProps>();
42
+ // Declare props using Svelte 5's syntax
43
+ const props: ExtendedComponentProps = $props();
41
44
 
42
45
  // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
43
46
  const blendMode = props.blendMode ?? componentDefaults.blendMode;
@@ -45,11 +48,13 @@
45
48
  const id = props.id;
46
49
  const maskSource = props.maskSource;
47
50
  const maskType = props.maskType;
51
+ const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
+ const { children } = props;
48
53
 
49
54
  /**
50
55
  * FIRST: Get the parent ID from context BEFORE setting our own context
51
56
  */
52
- const parentId = getContext<string>('ombreParentId');
57
+ const parentId = getContext<string>('shaderParentId');
53
58
  if (parentId === undefined) {
54
59
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
55
60
  }
@@ -62,7 +67,7 @@
62
67
  /**
63
68
  * THEN: Provide our unique identifier to child components
64
69
  */
65
- setContext('ombreParentId', instanceId);
70
+ setContext('shaderParentId', instanceId);
66
71
 
67
72
  /**
68
73
  * Creates a non-reactive object containing only props that differ from defaults
@@ -74,7 +79,7 @@
74
79
 
75
80
  // Only include props that differ from defaults (excluding special props)
76
81
  for (const key in props) {
77
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
82
+ if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
78
83
  const propValue = (props as any)[key];
79
84
  const defaultValue = (componentDefaults as any)[key];
80
85
  if (propValue !== undefined && propValue !== defaultValue) {
@@ -87,13 +92,15 @@
87
92
 
88
93
  /**
89
94
  * Creates the GPU uniform values map using only the changed props
95
+ * Note: Intentionally captures initial value - props are immutable after initialization
90
96
  */
97
+ // svelte-ignore state_referenced_locally
91
98
  const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
92
99
 
93
100
  /**
94
101
  * Get the node registration function from parent context
95
102
  */
96
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
103
+ const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
97
104
  if (parentRegister === undefined) {
98
105
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
99
106
  }
@@ -101,17 +108,17 @@
101
108
  /**
102
109
  * Get the uniform update function from parent context
103
110
  */
104
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
111
+ const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
105
112
  if (parentUniformUpdate === undefined) {
106
- throw new Error('Shader components require ombreUniformUpdate from parent');
113
+ throw new Error('Shader components require shaderUniformUpdate from parent');
107
114
  }
108
115
 
109
116
  /**
110
117
  * Get the metadata update function from parent context
111
118
  */
112
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
119
+ const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
113
120
  if (parentMetadataUpdate === undefined) {
114
- throw new Error('Shader components require ombreMetadataUpdate from parent');
121
+ throw new Error('Shader components require shaderMetadataUpdate from parent');
115
122
  }
116
123
 
117
124
  // Flag to track when component is registered
@@ -144,9 +151,9 @@
144
151
  id,
145
152
  mask: maskSource ? {
146
153
  source: maskSource,
147
- type: maskType || 'alpha'
154
+ type: (maskType || 'alpha') as MaskConfig['type']
148
155
  } : undefined,
149
- renderOrder: 0
156
+ renderOrder
150
157
  };
151
158
  parentMetadataUpdate(instanceId, metadata);
152
159
  });
@@ -172,9 +179,9 @@
172
179
  id,
173
180
  mask: maskSource ? {
174
181
  source: maskSource,
175
- type: maskType || 'alpha'
182
+ type: (maskType || 'alpha') as MaskConfig['type']
176
183
  } as MaskConfig : undefined,
177
- renderOrder: 0
184
+ renderOrder
178
185
  },
179
186
  uniforms
180
187
  );
@@ -199,4 +206,4 @@
199
206
  });
200
207
  </script>
201
208
 
202
- <slot></slot>
209
+ {@render children?.()}
@@ -9,31 +9,9 @@ interface ExtendedComponentProps extends Partial<ComponentProps> {
9
9
  id?: string;
10
10
  maskSource?: string;
11
11
  maskType?: string;
12
+ renderOrder?: number;
13
+ children?: import('svelte').Snippet;
12
14
  }
13
- 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> {
14
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
15
- $$bindings?: Bindings;
16
- } & Exports;
17
- (internal: unknown, props: Props & {
18
- $$events?: Events;
19
- $$slots?: Slots;
20
- }): Exports & {
21
- $set?: any;
22
- $on?: any;
23
- };
24
- z_$$bindings?: Bindings;
25
- }
26
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
27
- default: any;
28
- } ? Props extends Record<string, never> ? any : {
29
- children?: any;
30
- } : {});
31
- declare const Liquify: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
32
- default: {};
33
- }>, {
34
- [evt: string]: CustomEvent<any>;
35
- }, {
36
- default: {};
37
- }, {}, "">;
38
- type Liquify = InstanceType<typeof Liquify>;
15
+ declare const Liquify: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
+ type Liquify = ReturnType<typeof Liquify>;
39
17
  export default Liquify;
@@ -21,11 +21,14 @@
21
21
  id?: string;
22
22
  maskSource?: string;
23
23
  maskType?: string;
24
+ renderOrder?: number;
25
+ children?: import('svelte').Snippet;
24
26
  }
25
27
 
26
28
  // Define the component props and their default values from the shader definition
27
29
  const componentDefaults = {
28
30
  blendMode: 'normal' as BlendMode,
31
+ renderOrder: 0,
29
32
  // opacity intentionally has no default - handled by renderer
30
33
  ...Object.entries(componentDefinition.props).reduce(
31
34
  (acc, [key, config]) => {
@@ -36,8 +39,8 @@
36
39
  )
37
40
  };
38
41
 
39
- // Declare props using Svelte 5's syntax with defaults
40
- const props = $props<ExtendedComponentProps>();
42
+ // Declare props using Svelte 5's syntax
43
+ const props: ExtendedComponentProps = $props();
41
44
 
42
45
  // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
43
46
  const blendMode = props.blendMode ?? componentDefaults.blendMode;
@@ -45,11 +48,13 @@
45
48
  const id = props.id;
46
49
  const maskSource = props.maskSource;
47
50
  const maskType = props.maskType;
51
+ const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
+ const { children } = props;
48
53
 
49
54
  /**
50
55
  * FIRST: Get the parent ID from context BEFORE setting our own context
51
56
  */
52
- const parentId = getContext<string>('ombreParentId');
57
+ const parentId = getContext<string>('shaderParentId');
53
58
  if (parentId === undefined) {
54
59
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
55
60
  }
@@ -62,7 +67,7 @@
62
67
  /**
63
68
  * THEN: Provide our unique identifier to child components
64
69
  */
65
- setContext('ombreParentId', instanceId);
70
+ setContext('shaderParentId', instanceId);
66
71
 
67
72
  /**
68
73
  * Creates a non-reactive object containing only props that differ from defaults
@@ -74,7 +79,7 @@
74
79
 
75
80
  // Only include props that differ from defaults (excluding special props)
76
81
  for (const key in props) {
77
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
82
+ if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
78
83
  const propValue = (props as any)[key];
79
84
  const defaultValue = (componentDefaults as any)[key];
80
85
  if (propValue !== undefined && propValue !== defaultValue) {
@@ -87,13 +92,15 @@
87
92
 
88
93
  /**
89
94
  * Creates the GPU uniform values map using only the changed props
95
+ * Note: Intentionally captures initial value - props are immutable after initialization
90
96
  */
97
+ // svelte-ignore state_referenced_locally
91
98
  const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
92
99
 
93
100
  /**
94
101
  * Get the node registration function from parent context
95
102
  */
96
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
103
+ const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
97
104
  if (parentRegister === undefined) {
98
105
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
99
106
  }
@@ -101,17 +108,17 @@
101
108
  /**
102
109
  * Get the uniform update function from parent context
103
110
  */
104
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
111
+ const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
105
112
  if (parentUniformUpdate === undefined) {
106
- throw new Error('Shader components require ombreUniformUpdate from parent');
113
+ throw new Error('Shader components require shaderUniformUpdate from parent');
107
114
  }
108
115
 
109
116
  /**
110
117
  * Get the metadata update function from parent context
111
118
  */
112
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
119
+ const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
113
120
  if (parentMetadataUpdate === undefined) {
114
- throw new Error('Shader components require ombreMetadataUpdate from parent');
121
+ throw new Error('Shader components require shaderMetadataUpdate from parent');
115
122
  }
116
123
 
117
124
  // Flag to track when component is registered
@@ -144,9 +151,9 @@
144
151
  id,
145
152
  mask: maskSource ? {
146
153
  source: maskSource,
147
- type: maskType || 'alpha'
154
+ type: (maskType || 'alpha') as MaskConfig['type']
148
155
  } : undefined,
149
- renderOrder: 0
156
+ renderOrder
150
157
  };
151
158
  parentMetadataUpdate(instanceId, metadata);
152
159
  });
@@ -172,9 +179,9 @@
172
179
  id,
173
180
  mask: maskSource ? {
174
181
  source: maskSource,
175
- type: maskType || 'alpha'
182
+ type: (maskType || 'alpha') as MaskConfig['type']
176
183
  } as MaskConfig : undefined,
177
- renderOrder: 0
184
+ renderOrder
178
185
  },
179
186
  uniforms
180
187
  );
@@ -199,4 +206,4 @@
199
206
  });
200
207
  </script>
201
208
 
202
- <slot></slot>
209
+ {@render children?.()}
@@ -9,31 +9,9 @@ interface ExtendedComponentProps extends Partial<ComponentProps> {
9
9
  id?: string;
10
10
  maskSource?: string;
11
11
  maskType?: string;
12
+ renderOrder?: number;
13
+ children?: import('svelte').Snippet;
12
14
  }
13
- 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> {
14
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
15
- $$bindings?: Bindings;
16
- } & Exports;
17
- (internal: unknown, props: Props & {
18
- $$events?: Events;
19
- $$slots?: Slots;
20
- }): Exports & {
21
- $set?: any;
22
- $on?: any;
23
- };
24
- z_$$bindings?: Bindings;
25
- }
26
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
27
- default: any;
28
- } ? Props extends Record<string, never> ? any : {
29
- children?: any;
30
- } : {});
31
- declare const Pixelate: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
32
- default: {};
33
- }>, {
34
- [evt: string]: CustomEvent<any>;
35
- }, {
36
- default: {};
37
- }, {}, "">;
38
- type Pixelate = InstanceType<typeof Pixelate>;
15
+ declare const Pixelate: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
+ type Pixelate = ReturnType<typeof Pixelate>;
39
17
  export default Pixelate;
@@ -21,11 +21,14 @@
21
21
  id?: string;
22
22
  maskSource?: string;
23
23
  maskType?: string;
24
+ renderOrder?: number;
25
+ children?: import('svelte').Snippet;
24
26
  }
25
27
 
26
28
  // Define the component props and their default values from the shader definition
27
29
  const componentDefaults = {
28
30
  blendMode: 'normal' as BlendMode,
31
+ renderOrder: 0,
29
32
  // opacity intentionally has no default - handled by renderer
30
33
  ...Object.entries(componentDefinition.props).reduce(
31
34
  (acc, [key, config]) => {
@@ -36,8 +39,8 @@
36
39
  )
37
40
  };
38
41
 
39
- // Declare props using Svelte 5's syntax with defaults
40
- const props = $props<ExtendedComponentProps>();
42
+ // Declare props using Svelte 5's syntax
43
+ const props: ExtendedComponentProps = $props();
41
44
 
42
45
  // Apply defaults manually since Svelte 5 doesn't have withDefaults equivalent
43
46
  const blendMode = props.blendMode ?? componentDefaults.blendMode;
@@ -45,11 +48,13 @@
45
48
  const id = props.id;
46
49
  const maskSource = props.maskSource;
47
50
  const maskType = props.maskType;
51
+ const renderOrder = props.renderOrder ?? componentDefaults.renderOrder;
52
+ const { children } = props;
48
53
 
49
54
  /**
50
55
  * FIRST: Get the parent ID from context BEFORE setting our own context
51
56
  */
52
- const parentId = getContext<string>('ombreParentId');
57
+ const parentId = getContext<string>('shaderParentId');
53
58
  if (parentId === undefined) {
54
59
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
55
60
  }
@@ -62,7 +67,7 @@
62
67
  /**
63
68
  * THEN: Provide our unique identifier to child components
64
69
  */
65
- setContext('ombreParentId', instanceId);
70
+ setContext('shaderParentId', instanceId);
66
71
 
67
72
  /**
68
73
  * Creates a non-reactive object containing only props that differ from defaults
@@ -74,7 +79,7 @@
74
79
 
75
80
  // Only include props that differ from defaults (excluding special props)
76
81
  for (const key in props) {
77
- if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType') {
82
+ if (key !== 'blendMode' && key !== 'opacity' && key !== 'id' && key !== 'maskSource' && key !== 'maskType' && key !== 'renderOrder') {
78
83
  const propValue = (props as any)[key];
79
84
  const defaultValue = (componentDefaults as any)[key];
80
85
  if (propValue !== undefined && propValue !== defaultValue) {
@@ -87,13 +92,15 @@
87
92
 
88
93
  /**
89
94
  * Creates the GPU uniform values map using only the changed props
95
+ * Note: Intentionally captures initial value - props are immutable after initialization
90
96
  */
97
+ // svelte-ignore state_referenced_locally
91
98
  const uniforms: UniformsMap = createUniformsMap(componentDefinition, shaderReadyProps, instanceId);
92
99
 
93
100
  /**
94
101
  * Get the node registration function from parent context
95
102
  */
96
- const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('ombreNodeRegister');
103
+ const parentRegister = getContext<(id: string, fragmentNodeFunc: any, parentId: string | null, metadata: NodeMetadata | null, uniforms: UniformsMap | null) => void>('shaderNodeRegister');
97
104
  if (parentRegister === undefined) {
98
105
  throw new Error('Shader components must be used inside an <Shader> component or another shader component');
99
106
  }
@@ -101,17 +108,17 @@
101
108
  /**
102
109
  * Get the uniform update function from parent context
103
110
  */
104
- const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('ombreUniformUpdate');
111
+ const parentUniformUpdate = getContext<(nodeId: string, uniformName: string, value: any) => void>('shaderUniformUpdate');
105
112
  if (parentUniformUpdate === undefined) {
106
- throw new Error('Shader components require ombreUniformUpdate from parent');
113
+ throw new Error('Shader components require shaderUniformUpdate from parent');
107
114
  }
108
115
 
109
116
  /**
110
117
  * Get the metadata update function from parent context
111
118
  */
112
- const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('ombreMetadataUpdate');
119
+ const parentMetadataUpdate = getContext<(nodeId: string, metadata: NodeMetadata) => void>('shaderMetadataUpdate');
113
120
  if (parentMetadataUpdate === undefined) {
114
- throw new Error('Shader components require ombreMetadataUpdate from parent');
121
+ throw new Error('Shader components require shaderMetadataUpdate from parent');
115
122
  }
116
123
 
117
124
  // Flag to track when component is registered
@@ -144,9 +151,9 @@
144
151
  id,
145
152
  mask: maskSource ? {
146
153
  source: maskSource,
147
- type: maskType || 'alpha'
154
+ type: (maskType || 'alpha') as MaskConfig['type']
148
155
  } : undefined,
149
- renderOrder: 0
156
+ renderOrder
150
157
  };
151
158
  parentMetadataUpdate(instanceId, metadata);
152
159
  });
@@ -172,9 +179,9 @@
172
179
  id,
173
180
  mask: maskSource ? {
174
181
  source: maskSource,
175
- type: maskType || 'alpha'
182
+ type: (maskType || 'alpha') as MaskConfig['type']
176
183
  } as MaskConfig : undefined,
177
- renderOrder: 0
184
+ renderOrder
178
185
  },
179
186
  uniforms
180
187
  );
@@ -199,4 +206,4 @@
199
206
  });
200
207
  </script>
201
208
 
202
- <slot></slot>
209
+ {@render children?.()}
@@ -9,31 +9,9 @@ interface ExtendedComponentProps extends Partial<ComponentProps> {
9
9
  id?: string;
10
10
  maskSource?: string;
11
11
  maskType?: string;
12
+ renderOrder?: number;
13
+ children?: import('svelte').Snippet;
12
14
  }
13
- 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> {
14
- new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
15
- $$bindings?: Bindings;
16
- } & Exports;
17
- (internal: unknown, props: Props & {
18
- $$events?: Events;
19
- $$slots?: Slots;
20
- }): Exports & {
21
- $set?: any;
22
- $on?: any;
23
- };
24
- z_$$bindings?: Bindings;
25
- }
26
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
27
- default: any;
28
- } ? Props extends Record<string, never> ? any : {
29
- children?: any;
30
- } : {});
31
- declare const Posterize: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<ExtendedComponentProps, {
32
- default: {};
33
- }>, {
34
- [evt: string]: CustomEvent<any>;
35
- }, {
36
- default: {};
37
- }, {}, "">;
38
- type Posterize = InstanceType<typeof Posterize>;
15
+ declare const Posterize: import("svelte").Component<ExtendedComponentProps, {}, "">;
16
+ type Posterize = ReturnType<typeof Posterize>;
39
17
  export default Posterize;