@motion-core/motion-gpu 0.4.0 → 0.4.2

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 (207) hide show
  1. package/dist/advanced.d.ts +1 -0
  2. package/dist/advanced.d.ts.map +1 -0
  3. package/dist/advanced.js +12 -6
  4. package/dist/core/advanced.d.ts +1 -0
  5. package/dist/core/advanced.d.ts.map +1 -0
  6. package/dist/core/advanced.js +12 -5
  7. package/dist/core/current-value.d.ts +1 -0
  8. package/dist/core/current-value.d.ts.map +1 -0
  9. package/dist/core/current-value.js +35 -34
  10. package/dist/core/current-value.js.map +1 -0
  11. package/dist/core/error-diagnostics.d.ts +1 -0
  12. package/dist/core/error-diagnostics.d.ts.map +1 -0
  13. package/dist/core/error-diagnostics.js +70 -137
  14. package/dist/core/error-diagnostics.js.map +1 -0
  15. package/dist/core/error-report.d.ts +1 -0
  16. package/dist/core/error-report.d.ts.map +1 -0
  17. package/dist/core/error-report.js +184 -233
  18. package/dist/core/error-report.js.map +1 -0
  19. package/dist/core/frame-registry.d.ts +1 -0
  20. package/dist/core/frame-registry.d.ts.map +1 -0
  21. package/dist/core/frame-registry.js +546 -662
  22. package/dist/core/frame-registry.js.map +1 -0
  23. package/dist/core/index.d.ts +1 -0
  24. package/dist/core/index.d.ts.map +1 -0
  25. package/dist/core/index.js +11 -12
  26. package/dist/core/material-preprocess.d.ts +1 -0
  27. package/dist/core/material-preprocess.d.ts.map +1 -0
  28. package/dist/core/material-preprocess.js +128 -151
  29. package/dist/core/material-preprocess.js.map +1 -0
  30. package/dist/core/material.d.ts +1 -0
  31. package/dist/core/material.d.ts.map +1 -0
  32. package/dist/core/material.js +263 -317
  33. package/dist/core/material.js.map +1 -0
  34. package/dist/core/recompile-policy.d.ts +1 -0
  35. package/dist/core/recompile-policy.d.ts.map +1 -0
  36. package/dist/core/recompile-policy.js +18 -13
  37. package/dist/core/recompile-policy.js.map +1 -0
  38. package/dist/core/render-graph.d.ts +1 -0
  39. package/dist/core/render-graph.d.ts.map +1 -0
  40. package/dist/core/render-graph.js +61 -68
  41. package/dist/core/render-graph.js.map +1 -0
  42. package/dist/core/render-targets.d.ts +2 -0
  43. package/dist/core/render-targets.d.ts.map +1 -0
  44. package/dist/core/render-targets.js +52 -53
  45. package/dist/core/render-targets.js.map +1 -0
  46. package/dist/core/renderer.d.ts +1 -0
  47. package/dist/core/renderer.d.ts.map +1 -0
  48. package/dist/core/renderer.js +942 -1081
  49. package/dist/core/renderer.js.map +1 -0
  50. package/dist/core/runtime-loop.d.ts +2 -0
  51. package/dist/core/runtime-loop.d.ts.map +1 -0
  52. package/dist/core/runtime-loop.js +305 -362
  53. package/dist/core/runtime-loop.js.map +1 -0
  54. package/dist/core/scheduler-helpers.d.ts +1 -0
  55. package/dist/core/scheduler-helpers.d.ts.map +1 -0
  56. package/dist/core/scheduler-helpers.js +52 -51
  57. package/dist/core/scheduler-helpers.js.map +1 -0
  58. package/dist/core/shader.d.ts +1 -0
  59. package/dist/core/shader.d.ts.map +1 -0
  60. package/dist/core/shader.js +92 -117
  61. package/dist/core/shader.js.map +1 -0
  62. package/dist/core/texture-loader.d.ts +1 -0
  63. package/dist/core/texture-loader.d.ts.map +1 -0
  64. package/dist/core/texture-loader.js +205 -273
  65. package/dist/core/texture-loader.js.map +1 -0
  66. package/dist/core/textures.d.ts +2 -0
  67. package/dist/core/textures.d.ts.map +1 -0
  68. package/dist/core/textures.js +106 -116
  69. package/dist/core/textures.js.map +1 -0
  70. package/dist/core/types.d.ts +2 -0
  71. package/dist/core/types.d.ts.map +1 -0
  72. package/dist/core/types.js +0 -4
  73. package/dist/core/uniforms.d.ts +1 -0
  74. package/dist/core/uniforms.d.ts.map +1 -0
  75. package/dist/core/uniforms.js +170 -191
  76. package/dist/core/uniforms.js.map +1 -0
  77. package/dist/index.d.ts +1 -0
  78. package/dist/index.d.ts.map +1 -0
  79. package/dist/index.js +11 -6
  80. package/dist/passes/BlitPass.d.ts +1 -0
  81. package/dist/passes/BlitPass.d.ts.map +1 -0
  82. package/dist/passes/BlitPass.js +23 -18
  83. package/dist/passes/BlitPass.js.map +1 -0
  84. package/dist/passes/CopyPass.d.ts +2 -0
  85. package/dist/passes/CopyPass.d.ts.map +1 -0
  86. package/dist/passes/CopyPass.js +58 -52
  87. package/dist/passes/CopyPass.js.map +1 -0
  88. package/dist/passes/FullscreenPass.d.ts +2 -0
  89. package/dist/passes/FullscreenPass.d.ts.map +1 -0
  90. package/dist/passes/FullscreenPass.js +127 -130
  91. package/dist/passes/FullscreenPass.js.map +1 -0
  92. package/dist/passes/ShaderPass.d.ts +1 -0
  93. package/dist/passes/ShaderPass.d.ts.map +1 -0
  94. package/dist/passes/ShaderPass.js +40 -37
  95. package/dist/passes/ShaderPass.js.map +1 -0
  96. package/dist/passes/index.d.ts +1 -0
  97. package/dist/passes/index.d.ts.map +1 -0
  98. package/dist/passes/index.js +4 -3
  99. package/dist/react/FragCanvas.d.ts +2 -0
  100. package/dist/react/FragCanvas.d.ts.map +1 -0
  101. package/dist/react/FragCanvas.js +234 -211
  102. package/dist/react/FragCanvas.js.map +1 -0
  103. package/dist/react/MotionGPUErrorOverlay.d.ts +1 -0
  104. package/dist/react/MotionGPUErrorOverlay.d.ts.map +1 -0
  105. package/dist/react/MotionGPUErrorOverlay.js +384 -48
  106. package/dist/react/MotionGPUErrorOverlay.js.map +1 -0
  107. package/dist/react/Portal.d.ts +1 -0
  108. package/dist/react/Portal.d.ts.map +1 -0
  109. package/dist/react/Portal.js +18 -21
  110. package/dist/react/Portal.js.map +1 -0
  111. package/dist/react/advanced.d.ts +1 -0
  112. package/dist/react/advanced.d.ts.map +1 -0
  113. package/dist/react/advanced.js +12 -6
  114. package/dist/react/frame-context.d.ts +1 -0
  115. package/dist/react/frame-context.d.ts.map +1 -0
  116. package/dist/react/frame-context.js +88 -94
  117. package/dist/react/frame-context.js.map +1 -0
  118. package/dist/react/index.d.ts +1 -0
  119. package/dist/react/index.d.ts.map +1 -0
  120. package/dist/react/index.js +10 -9
  121. package/dist/react/motiongpu-context.d.ts +1 -0
  122. package/dist/react/motiongpu-context.d.ts.map +1 -0
  123. package/dist/react/motiongpu-context.js +18 -15
  124. package/dist/react/motiongpu-context.js.map +1 -0
  125. package/dist/react/use-motiongpu-user-context.d.ts +1 -0
  126. package/dist/react/use-motiongpu-user-context.d.ts.map +1 -0
  127. package/dist/react/use-motiongpu-user-context.js +83 -82
  128. package/dist/react/use-motiongpu-user-context.js.map +1 -0
  129. package/dist/react/use-texture.d.ts +1 -0
  130. package/dist/react/use-texture.d.ts.map +1 -0
  131. package/dist/react/use-texture.js +132 -152
  132. package/dist/react/use-texture.js.map +1 -0
  133. package/dist/svelte/FragCanvas.svelte.d.ts +2 -0
  134. package/dist/svelte/FragCanvas.svelte.d.ts.map +1 -0
  135. package/dist/svelte/MotionGPUErrorOverlay.svelte +17 -20
  136. package/dist/svelte/MotionGPUErrorOverlay.svelte.d.ts +1 -0
  137. package/dist/svelte/MotionGPUErrorOverlay.svelte.d.ts.map +1 -0
  138. package/dist/svelte/Portal.svelte.d.ts +1 -0
  139. package/dist/svelte/Portal.svelte.d.ts.map +1 -0
  140. package/dist/svelte/advanced.d.ts +1 -0
  141. package/dist/svelte/advanced.d.ts.map +1 -0
  142. package/dist/svelte/advanced.js +11 -6
  143. package/dist/svelte/frame-context.d.ts +1 -0
  144. package/dist/svelte/frame-context.d.ts.map +1 -0
  145. package/dist/svelte/frame-context.js +27 -27
  146. package/dist/svelte/frame-context.js.map +1 -0
  147. package/dist/svelte/index.d.ts +1 -0
  148. package/dist/svelte/index.d.ts.map +1 -0
  149. package/dist/svelte/index.js +10 -9
  150. package/dist/svelte/motiongpu-context.d.ts +1 -0
  151. package/dist/svelte/motiongpu-context.d.ts.map +1 -0
  152. package/dist/svelte/motiongpu-context.js +24 -21
  153. package/dist/svelte/motiongpu-context.js.map +1 -0
  154. package/dist/svelte/use-motiongpu-user-context.d.ts +1 -0
  155. package/dist/svelte/use-motiongpu-user-context.d.ts.map +1 -0
  156. package/dist/svelte/use-motiongpu-user-context.js +69 -70
  157. package/dist/svelte/use-motiongpu-user-context.js.map +1 -0
  158. package/dist/svelte/use-texture.d.ts +1 -0
  159. package/dist/svelte/use-texture.d.ts.map +1 -0
  160. package/dist/svelte/use-texture.js +125 -147
  161. package/dist/svelte/use-texture.js.map +1 -0
  162. package/package.json +15 -7
  163. package/src/lib/advanced.ts +6 -0
  164. package/src/lib/core/advanced.ts +12 -0
  165. package/src/lib/core/current-value.ts +64 -0
  166. package/src/lib/core/error-diagnostics.ts +236 -0
  167. package/src/lib/core/error-report.ts +406 -0
  168. package/src/lib/core/frame-registry.ts +1189 -0
  169. package/src/lib/core/index.ts +77 -0
  170. package/src/lib/core/material-preprocess.ts +284 -0
  171. package/src/lib/core/material.ts +667 -0
  172. package/src/lib/core/recompile-policy.ts +31 -0
  173. package/src/lib/core/render-graph.ts +143 -0
  174. package/src/lib/core/render-targets.ts +107 -0
  175. package/src/lib/core/renderer.ts +1547 -0
  176. package/src/lib/core/runtime-loop.ts +458 -0
  177. package/src/lib/core/scheduler-helpers.ts +136 -0
  178. package/src/lib/core/shader.ts +258 -0
  179. package/src/lib/core/texture-loader.ts +476 -0
  180. package/src/lib/core/textures.ts +235 -0
  181. package/src/lib/core/types.ts +582 -0
  182. package/src/lib/core/uniforms.ts +282 -0
  183. package/src/lib/index.ts +6 -0
  184. package/src/lib/passes/BlitPass.ts +54 -0
  185. package/src/lib/passes/CopyPass.ts +80 -0
  186. package/src/lib/passes/FullscreenPass.ts +173 -0
  187. package/src/lib/passes/ShaderPass.ts +88 -0
  188. package/src/lib/passes/index.ts +3 -0
  189. package/src/lib/react/MotionGPUErrorOverlay.tsx +392 -0
  190. package/src/lib/react/advanced.ts +36 -0
  191. package/src/lib/react/frame-context.ts +169 -0
  192. package/src/lib/react/index.ts +51 -0
  193. package/src/lib/react/motiongpu-context.ts +88 -0
  194. package/src/lib/react/use-motiongpu-user-context.ts +186 -0
  195. package/src/lib/react/use-texture.ts +233 -0
  196. package/src/lib/svelte/FragCanvas.svelte +249 -0
  197. package/src/lib/svelte/MotionGPUErrorOverlay.svelte +382 -0
  198. package/src/lib/svelte/Portal.svelte +31 -0
  199. package/src/lib/svelte/advanced.ts +32 -0
  200. package/src/lib/svelte/frame-context.ts +87 -0
  201. package/src/lib/svelte/index.ts +51 -0
  202. package/src/lib/svelte/motiongpu-context.ts +97 -0
  203. package/src/lib/svelte/use-motiongpu-user-context.ts +145 -0
  204. package/src/lib/svelte/use-texture.ts +232 -0
  205. package/dist/react/MotionGPUErrorOverlay.tsx +0 -129
  206. /package/{dist → src/lib}/react/FragCanvas.tsx +0 -0
  207. /package/{dist → src/lib}/react/Portal.tsx +0 -0
@@ -1,52 +1,388 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Portal } from './Portal.js';
1
+ import { Portal } from "./Portal.js";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ //#region src/lib/react/MotionGPUErrorOverlay.tsx
4
+ var MOTIONGPU_ERROR_OVERLAY_STYLES = `
5
+ .motiongpu-error-overlay {
6
+ --motiongpu-base-hue: var(--base-hue, 265);
7
+ --motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));
8
+ --motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));
9
+ --motiongpu-color-foreground: oklch(1 0 0);
10
+ --motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));
11
+ --motiongpu-color-card: var(--motiongpu-color-background);
12
+ --motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);
13
+ --motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);
14
+ --motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);
15
+ --motiongpu-color-white-fixed: oklch(1 0 0);
16
+ --motiongpu-shadow-card: var(
17
+ --shadow-2xl,
18
+ 0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),
19
+ 0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),
20
+ 0px 6px 6px -3px rgba(0, 0, 0, 0.06),
21
+ 0px 12px 12px -6px rgba(0, 0, 0, 0.06),
22
+ 0px 24px 24px -12px rgba(0, 0, 0, 0.05),
23
+ 0px 48px 48px -24px rgba(0, 0, 0, 0.06)
24
+ );
25
+ --motiongpu-radius-md: var(--radius-md, 0.5rem);
26
+ --motiongpu-radius-lg: var(--radius-lg, 0.75rem);
27
+ --motiongpu-radius-xl: var(--radius-xl, 1rem);
28
+ --motiongpu-font-sans: var(
29
+ --font-sans,
30
+ 'Inter',
31
+ 'Segoe UI',
32
+ 'Helvetica Neue',
33
+ Arial,
34
+ sans-serif
35
+ );
36
+ --motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);
37
+ position: fixed;
38
+ inset: 0;
39
+ display: grid;
40
+ place-items: center;
41
+ padding: clamp(0.75rem, 1.4vw, 1.5rem);
42
+ background: rgba(0, 0, 0, 0.8);
43
+ backdrop-filter: blur(10px);
44
+ z-index: 2147483647;
45
+ font-family: var(--motiongpu-font-sans);
46
+ color-scheme: dark;
47
+ }
48
+
49
+ .motiongpu-error-dialog {
50
+ width: min(52rem, calc(100vw - 1.5rem));
51
+ max-height: min(84vh, 44rem);
52
+ overflow: auto;
53
+ margin: 0;
54
+ padding: 1.1rem;
55
+ border: 1px solid var(--motiongpu-color-border);
56
+ border-radius: var(--motiongpu-radius-xl);
57
+ max-width: calc(100vw - 1.5rem);
58
+ box-sizing: border-box;
59
+ font-size: 0.875rem;
60
+ font-weight: 400;
61
+ line-height: 1.45;
62
+ background: var(--motiongpu-color-card);
63
+ color: var(--motiongpu-color-foreground);
64
+ box-shadow: var(--motiongpu-shadow-card);
65
+ }
66
+
67
+ .motiongpu-error-header {
68
+ display: grid;
69
+ gap: 0.55rem;
70
+ padding-bottom: 0.9rem;
71
+ border-bottom: 1px solid var(--motiongpu-color-border);
72
+ }
73
+
74
+ .motiongpu-error-badge-wrap {
75
+ display: inline-flex;
76
+ align-items: center;
77
+ gap: 0.4rem;
78
+ width: fit-content;
79
+ padding: 0.18rem;
80
+ border-radius: 999px;
81
+ border: 1px solid var(--motiongpu-color-border);
82
+ background: var(--motiongpu-color-background-muted);
83
+ }
84
+
85
+ .motiongpu-error-phase {
86
+ display: inline-flex;
87
+ align-items: center;
88
+ margin: 0;
89
+ padding: 0.22rem 0.56rem;
90
+ border-radius: 999px;
91
+ font-size: 0.66rem;
92
+ letter-spacing: 0.08em;
93
+ line-height: 1;
94
+ font-weight: 500;
95
+ text-transform: uppercase;
96
+ color: var(--motiongpu-color-white-fixed);
97
+ background: linear-gradient(
98
+ 180deg,
99
+ var(--motiongpu-color-accent) 0%,
100
+ var(--motiongpu-color-accent-secondary) 100%
101
+ );
102
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
103
+ }
104
+
105
+ .motiongpu-error-title {
106
+ margin: 0;
107
+ font-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);
108
+ font-weight: 500;
109
+ line-height: 1.18;
110
+ letter-spacing: -0.02em;
111
+ text-wrap: balance;
112
+ color: var(--motiongpu-color-foreground);
113
+ }
114
+
115
+ .motiongpu-error-body {
116
+ display: grid;
117
+ gap: 0.62rem;
118
+ margin-top: 0.92rem;
119
+ }
120
+
121
+ .motiongpu-error-message {
122
+ margin: 0;
123
+ padding: 0.72rem 0.78rem;
124
+ border: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);
125
+ border-radius: var(--motiongpu-radius-md);
126
+ background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
127
+ font-size: 0.82rem;
128
+ line-height: 1.4;
129
+ font-weight: 400;
130
+ color: var(--motiongpu-color-foreground);
131
+ }
132
+
133
+ .motiongpu-error-hint {
134
+ margin: 0;
135
+ font-size: 0.82rem;
136
+ line-height: 1.45;
137
+ font-weight: 400;
138
+ color: var(--motiongpu-color-foreground-muted);
139
+ }
140
+
141
+ .motiongpu-error-sections {
142
+ display: grid;
143
+ gap: 0.62rem;
144
+ margin-top: 0.95rem;
145
+ }
146
+
147
+ .motiongpu-error-source {
148
+ display: grid;
149
+ gap: 0.48rem;
150
+ margin-top: 0.96rem;
151
+ }
152
+
153
+ .motiongpu-error-source-title {
154
+ margin: 0;
155
+ font-size: 0.8rem;
156
+ font-weight: 500;
157
+ line-height: 1.3;
158
+ letter-spacing: 0.045em;
159
+ text-transform: uppercase;
160
+ color: var(--motiongpu-color-foreground);
161
+ }
162
+
163
+ .motiongpu-error-source-frame {
164
+ border: 1px solid var(--motiongpu-color-border);
165
+ border-radius: var(--motiongpu-radius-lg);
166
+ overflow: hidden;
167
+ background: var(--motiongpu-color-background-muted);
168
+ }
169
+
170
+ .motiongpu-error-source-tabs {
171
+ display: flex;
172
+ align-items: stretch;
173
+ border-bottom: 1px solid var(--motiongpu-color-border);
174
+ background: var(--motiongpu-color-background);
175
+ }
176
+
177
+ .motiongpu-error-source-tab {
178
+ display: inline-flex;
179
+ align-items: center;
180
+ padding: 0.5rem 0.68rem;
181
+ font-size: 0.76rem;
182
+ font-weight: 400;
183
+ line-height: 1.2;
184
+ color: var(--motiongpu-color-foreground-muted);
185
+ border-right: 1px solid var(--motiongpu-color-border);
186
+ }
187
+
188
+ .motiongpu-error-source-tab-active {
189
+ color: var(--motiongpu-color-foreground);
190
+ background: var(--motiongpu-color-background-muted);
191
+ }
192
+
193
+ .motiongpu-error-source-tab-spacer {
194
+ flex: 1 1 auto;
195
+ }
196
+
197
+ .motiongpu-error-source-snippet {
198
+ display: grid;
199
+ background: var(--motiongpu-color-background-muted);
200
+ }
201
+
202
+ .motiongpu-error-source-row {
203
+ display: grid;
204
+ grid-template-columns: 2rem minmax(0, 1fr);
205
+ align-items: start;
206
+ gap: 0.42rem;
207
+ padding: 0.2rem 0.68rem;
208
+ }
209
+
210
+ .motiongpu-error-source-row-active {
211
+ background: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);
212
+ }
213
+
214
+ .motiongpu-error-source-line {
215
+ font-family: var(--motiongpu-font-mono);
216
+ font-size: 0.77rem;
217
+ font-weight: 400;
218
+ line-height: 1.3;
219
+ font-variant-numeric: tabular-nums;
220
+ font-feature-settings: 'tnum' 1;
221
+ border-right: 1px solid var(--motiongpu-color-border);
222
+ color: var(--motiongpu-color-foreground-muted);
223
+ text-align: left;
224
+ }
225
+
226
+ .motiongpu-error-source-code {
227
+ font-family: var(--motiongpu-font-mono);
228
+ font-size: 0.77rem;
229
+ font-weight: 400;
230
+ line-height: 1.3;
231
+ color: var(--motiongpu-color-foreground);
232
+ white-space: pre-wrap;
233
+ word-break: break-word;
234
+ }
235
+
236
+ .motiongpu-error-details {
237
+ border: 1px solid var(--motiongpu-color-border);
238
+ border-radius: var(--motiongpu-radius-lg);
239
+ overflow: hidden;
240
+ background: var(--motiongpu-color-background);
241
+ }
242
+
243
+ .motiongpu-error-details summary {
244
+ cursor: pointer;
245
+ padding: 0.56rem 0.68rem;
246
+ font-size: 0.7rem;
247
+ letter-spacing: 0.07em;
248
+ line-height: 1.2;
249
+ font-weight: 500;
250
+ text-transform: uppercase;
251
+ color: var(--motiongpu-color-foreground);
252
+ }
253
+
254
+ .motiongpu-error-details[open] summary {
255
+ border-bottom: 1px solid var(--motiongpu-color-border);
256
+ }
257
+
258
+ .motiongpu-error-details pre {
259
+ margin: 0;
260
+ padding: 0.62rem 0.68rem;
261
+ white-space: pre-wrap;
262
+ word-break: break-word;
263
+ overflow: auto;
264
+ background: var(--motiongpu-color-background-muted);
265
+ font-size: 0.74rem;
266
+ line-height: 1.4;
267
+ font-weight: 400;
268
+ color: var(--motiongpu-color-foreground);
269
+ font-family: var(--motiongpu-font-mono);
270
+ }
271
+
272
+ @media (max-width: 42rem) {
273
+ .motiongpu-error-overlay {
274
+ padding: 0.62rem;
275
+ }
276
+
277
+ .motiongpu-error-dialog {
278
+ padding: 0.85rem;
279
+ }
280
+
281
+ .motiongpu-error-title {
282
+ font-size: 1.02rem;
283
+ }
284
+ }
285
+
286
+ @media (prefers-reduced-motion: reduce) {
287
+ .motiongpu-error-overlay {
288
+ backdrop-filter: none;
289
+ }
290
+ }
291
+ `;
3
292
  function normalizeErrorText(value) {
4
- return value
5
- .trim()
6
- .replace(/[.:!]+$/g, '')
7
- .toLowerCase();
293
+ return value.trim().replace(/[.:!]+$/g, "").toLowerCase();
8
294
  }
9
295
  function shouldShowErrorMessage(value) {
10
- return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
11
- }
12
- export function MotionGPUErrorOverlay({ report }) {
13
- const detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';
14
- return (_jsx(Portal, { children: _jsx("div", { className: "motiongpu-error-overlay", role: "presentation", style: {
15
- position: 'fixed',
16
- inset: 0,
17
- display: 'grid',
18
- placeItems: 'center',
19
- padding: '1rem',
20
- background: 'rgba(12, 12, 14, 0.38)',
21
- backdropFilter: 'blur(10px)',
22
- zIndex: 2147483647
23
- }, children: _jsxs("section", { role: "alertdialog", "aria-live": "assertive", "aria-modal": "true", "data-testid": "motiongpu-error", style: {
24
- width: 'min(52rem, calc(100vw - 1.5rem))',
25
- maxHeight: 'min(84vh, 44rem)',
26
- overflow: 'auto',
27
- margin: 0,
28
- padding: '1rem',
29
- border: '1px solid rgba(107, 107, 107, 0.2)',
30
- borderRadius: '1rem',
31
- boxSizing: 'border-box',
32
- background: '#ffffff',
33
- color: '#262626',
34
- fontSize: '0.875rem',
35
- lineHeight: 1.45
36
- }, children: [_jsxs("header", { style: { display: 'grid', gap: '0.5rem' }, children: [_jsx("p", { style: {
37
- margin: 0,
38
- fontSize: '0.66rem',
39
- letterSpacing: '0.08em',
40
- textTransform: 'uppercase',
41
- color: '#5f6672'
42
- }, children: report.phase }), _jsx("h2", { style: { margin: 0, fontSize: '1.1rem', lineHeight: 1.2 }, children: report.title })] }), _jsxs("div", { style: { display: 'grid', gap: '0.5rem', marginTop: '0.75rem' }, children: [shouldShowErrorMessage(report) ? _jsx("p", { style: { margin: 0 }, children: report.message }) : null, _jsx("p", { style: { margin: 0, color: '#5f6672' }, children: report.hint })] }), report.source ? (_jsxs("section", { "aria-label": "Source", style: { marginTop: '0.75rem' }, children: [_jsx("h3", { style: { margin: 0, fontSize: '0.8rem', textTransform: 'uppercase' }, children: "Source" }), _jsxs("div", { style: { marginTop: '0.4rem', border: '1px solid rgba(107, 107, 107, 0.2)' }, children: [_jsx("div", { style: {
43
- padding: '0.45rem 0.6rem',
44
- borderBottom: '1px solid rgba(107, 107, 107, 0.2)'
45
- }, children: _jsxs("span", { children: [report.source.location, report.source.column ? `, col ${report.source.column}` : ''] }) }), _jsx("div", { style: { display: 'grid' }, children: report.source.snippet.map((snippetLine) => (_jsxs("div", { style: {
46
- display: 'grid',
47
- gridTemplateColumns: '2rem minmax(0, 1fr)',
48
- gap: '0.42rem',
49
- padding: '0.2rem 0.5rem',
50
- background: snippetLine.highlight ? 'rgba(255, 105, 0, 0.08)' : undefined
51
- }, children: [_jsx("span", { children: snippetLine.number }), _jsx("span", { className: "motiongpu-error-source-code", children: snippetLine.code || ' ' })] }, `snippet-${snippetLine.number}`))) })] })] })) : null, report.details.length > 0 ? (_jsxs("details", { open: true, style: { marginTop: '0.75rem' }, children: [_jsx("summary", { children: detailsSummary }), _jsx("pre", { style: { whiteSpace: 'pre-wrap' }, children: report.details.join('\n') })] })) : null, report.stack.length > 0 ? (_jsxs("details", { style: { marginTop: '0.75rem' }, children: [_jsx("summary", { children: "Stack trace" }), _jsx("pre", { style: { whiteSpace: 'pre-wrap' }, children: report.stack.join('\n') })] })) : null] }) }) }));
296
+ return normalizeErrorText(value.message) !== normalizeErrorText(value.title);
297
+ }
298
+ function MotionGPUErrorOverlay({ report }) {
299
+ const detailsSummary = report.source ? "Additional diagnostics" : "Technical details";
300
+ return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx("style", { children: MOTIONGPU_ERROR_OVERLAY_STYLES }), /* @__PURE__ */ jsx("div", {
301
+ className: "motiongpu-error-overlay",
302
+ role: "presentation",
303
+ children: /* @__PURE__ */ jsxs("section", {
304
+ className: "motiongpu-error-dialog",
305
+ role: "alertdialog",
306
+ "aria-live": "assertive",
307
+ "aria-modal": "true",
308
+ "data-testid": "motiongpu-error",
309
+ children: [
310
+ /* @__PURE__ */ jsxs("header", {
311
+ className: "motiongpu-error-header",
312
+ children: [/* @__PURE__ */ jsx("div", {
313
+ className: "motiongpu-error-badge-wrap",
314
+ children: /* @__PURE__ */ jsx("p", {
315
+ className: "motiongpu-error-phase",
316
+ children: report.phase
317
+ })
318
+ }), /* @__PURE__ */ jsx("h2", {
319
+ className: "motiongpu-error-title",
320
+ children: report.title
321
+ })]
322
+ }),
323
+ /* @__PURE__ */ jsxs("div", {
324
+ className: "motiongpu-error-body",
325
+ children: [shouldShowErrorMessage(report) ? /* @__PURE__ */ jsx("p", {
326
+ className: "motiongpu-error-message",
327
+ children: report.message
328
+ }) : null, /* @__PURE__ */ jsx("p", {
329
+ className: "motiongpu-error-hint",
330
+ children: report.hint
331
+ })]
332
+ }),
333
+ report.source ? /* @__PURE__ */ jsxs("section", {
334
+ className: "motiongpu-error-source",
335
+ "aria-label": "Source",
336
+ children: [/* @__PURE__ */ jsx("h3", {
337
+ className: "motiongpu-error-source-title",
338
+ children: "Source"
339
+ }), /* @__PURE__ */ jsxs("div", {
340
+ className: "motiongpu-error-source-frame",
341
+ role: "presentation",
342
+ children: [/* @__PURE__ */ jsxs("div", {
343
+ className: "motiongpu-error-source-tabs",
344
+ role: "tablist",
345
+ "aria-label": "Source files",
346
+ children: [/* @__PURE__ */ jsxs("span", {
347
+ className: "motiongpu-error-source-tab motiongpu-error-source-tab-active",
348
+ role: "tab",
349
+ "aria-selected": "true",
350
+ children: [report.source.location, report.source.column ? `, col ${report.source.column}` : ""]
351
+ }), /* @__PURE__ */ jsx("span", {
352
+ className: "motiongpu-error-source-tab-spacer",
353
+ "aria-hidden": "true"
354
+ })]
355
+ }), /* @__PURE__ */ jsx("div", {
356
+ className: "motiongpu-error-source-snippet",
357
+ children: report.source.snippet.map((snippetLine) => /* @__PURE__ */ jsxs("div", {
358
+ className: snippetLine.highlight ? "motiongpu-error-source-row motiongpu-error-source-row-active" : "motiongpu-error-source-row",
359
+ children: [/* @__PURE__ */ jsx("span", {
360
+ className: "motiongpu-error-source-line",
361
+ children: snippetLine.number
362
+ }), /* @__PURE__ */ jsx("span", {
363
+ className: "motiongpu-error-source-code",
364
+ children: snippetLine.code || " "
365
+ })]
366
+ }, `snippet-${snippetLine.number}`))
367
+ })]
368
+ })]
369
+ }) : null,
370
+ /* @__PURE__ */ jsxs("div", {
371
+ className: "motiongpu-error-sections",
372
+ children: [report.details.length > 0 ? /* @__PURE__ */ jsxs("details", {
373
+ className: "motiongpu-error-details",
374
+ open: true,
375
+ children: [/* @__PURE__ */ jsx("summary", { children: detailsSummary }), /* @__PURE__ */ jsx("pre", { children: report.details.join("\n") })]
376
+ }) : null, report.stack.length > 0 ? /* @__PURE__ */ jsxs("details", {
377
+ className: "motiongpu-error-details",
378
+ children: [/* @__PURE__ */ jsx("summary", { children: "Stack trace" }), /* @__PURE__ */ jsx("pre", { children: report.stack.join("\n") })]
379
+ }) : null]
380
+ })
381
+ ]
382
+ })
383
+ })] });
52
384
  }
385
+ //#endregion
386
+ export { MotionGPUErrorOverlay };
387
+
388
+ //# sourceMappingURL=MotionGPUErrorOverlay.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"MotionGPUErrorOverlay.js","names":[],"sources":["../../src/lib/react/MotionGPUErrorOverlay.tsx"],"sourcesContent":["import type { MotionGPUErrorReport } from '../core/error-report.js';\nimport { Portal } from './Portal.js';\n\ninterface MotionGPUErrorOverlayProps {\n\treport: MotionGPUErrorReport;\n}\n\nconst MOTIONGPU_ERROR_OVERLAY_STYLES = `\n.motiongpu-error-overlay {\n\t--motiongpu-base-hue: var(--base-hue, 265);\n\t--motiongpu-color-background: oklch(0.2178 0.0056 var(--motiongpu-base-hue));\n\t--motiongpu-color-background-muted: oklch(0.261 0.007 var(--motiongpu-base-hue));\n\t--motiongpu-color-foreground: oklch(1 0 0);\n\t--motiongpu-color-foreground-muted: oklch(0.6699 0.0081 var(--motiongpu-base-hue));\n\t--motiongpu-color-card: var(--motiongpu-color-background);\n\t--motiongpu-color-accent: oklch(0.6996 0.181959 44.4414);\n\t--motiongpu-color-accent-secondary: oklch(0.5096 0.131959 44.4414);\n\t--motiongpu-color-border: oklch(0.928 0.013 var(--motiongpu-base-hue) / 0.05);\n\t--motiongpu-color-white-fixed: oklch(1 0 0);\n\t--motiongpu-shadow-card: var(\n\t\t--shadow-2xl,\n\t\t0px 1px 1px -0.5px rgba(0, 0, 0, 0.06),\n\t\t0px 3px 3px -1.5px rgba(0, 0, 0, 0.06),\n\t\t0px 6px 6px -3px rgba(0, 0, 0, 0.06),\n\t\t0px 12px 12px -6px rgba(0, 0, 0, 0.06),\n\t\t0px 24px 24px -12px rgba(0, 0, 0, 0.05),\n\t\t0px 48px 48px -24px rgba(0, 0, 0, 0.06)\n\t);\n\t--motiongpu-radius-md: var(--radius-md, 0.5rem);\n\t--motiongpu-radius-lg: var(--radius-lg, 0.75rem);\n\t--motiongpu-radius-xl: var(--radius-xl, 1rem);\n\t--motiongpu-font-sans: var(\n\t\t--font-sans,\n\t\t'Inter',\n\t\t'Segoe UI',\n\t\t'Helvetica Neue',\n\t\tArial,\n\t\tsans-serif\n\t);\n\t--motiongpu-font-mono: var(--font-mono, 'SFMono-Regular', 'Menlo', 'Consolas', monospace);\n\tposition: fixed;\n\tinset: 0;\n\tdisplay: grid;\n\tplace-items: center;\n\tpadding: clamp(0.75rem, 1.4vw, 1.5rem);\n\tbackground: rgba(0, 0, 0, 0.8);\n\tbackdrop-filter: blur(10px);\n\tz-index: 2147483647;\n\tfont-family: var(--motiongpu-font-sans);\n\tcolor-scheme: dark;\n}\n\n.motiongpu-error-dialog {\n\twidth: min(52rem, calc(100vw - 1.5rem));\n\tmax-height: min(84vh, 44rem);\n\toverflow: auto;\n\tmargin: 0;\n\tpadding: 1.1rem;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-xl);\n\tmax-width: calc(100vw - 1.5rem);\n\tbox-sizing: border-box;\n\tfont-size: 0.875rem;\n\tfont-weight: 400;\n\tline-height: 1.45;\n\tbackground: var(--motiongpu-color-card);\n\tcolor: var(--motiongpu-color-foreground);\n\tbox-shadow: var(--motiongpu-shadow-card);\n}\n\n.motiongpu-error-header {\n\tdisplay: grid;\n\tgap: 0.55rem;\n\tpadding-bottom: 0.9rem;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-badge-wrap {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tgap: 0.4rem;\n\twidth: fit-content;\n\tpadding: 0.18rem;\n\tborder-radius: 999px;\n\tborder: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-phase {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmargin: 0;\n\tpadding: 0.22rem 0.56rem;\n\tborder-radius: 999px;\n\tfont-size: 0.66rem;\n\tletter-spacing: 0.08em;\n\tline-height: 1;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-white-fixed);\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\tvar(--motiongpu-color-accent) 0%,\n\t\tvar(--motiongpu-color-accent-secondary) 100%\n\t);\n\tbox-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);\n}\n\n.motiongpu-error-title {\n\tmargin: 0;\n\tfont-size: clamp(1.02rem, 1vw + 0.72rem, 1.32rem);\n\tfont-weight: 500;\n\tline-height: 1.18;\n\tletter-spacing: -0.02em;\n\ttext-wrap: balance;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-body {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.92rem;\n}\n\n.motiongpu-error-message {\n\tmargin: 0;\n\tpadding: 0.72rem 0.78rem;\n\tborder: 1px solid color-mix(in oklch, var(--motiongpu-color-accent) 28%, transparent);\n\tborder-radius: var(--motiongpu-radius-md);\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n\tfont-size: 0.82rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-hint {\n\tmargin: 0;\n\tfont-size: 0.82rem;\n\tline-height: 1.45;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground-muted);\n}\n\n.motiongpu-error-sections {\n\tdisplay: grid;\n\tgap: 0.62rem;\n\tmargin-top: 0.95rem;\n}\n\n.motiongpu-error-source {\n\tdisplay: grid;\n\tgap: 0.48rem;\n\tmargin-top: 0.96rem;\n}\n\n.motiongpu-error-source-title {\n\tmargin: 0;\n\tfont-size: 0.8rem;\n\tfont-weight: 500;\n\tline-height: 1.3;\n\tletter-spacing: 0.045em;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-source-frame {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tabs {\n\tdisplay: flex;\n\talign-items: stretch;\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-source-tab {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tpadding: 0.5rem 0.68rem;\n\tfont-size: 0.76rem;\n\tfont-weight: 400;\n\tline-height: 1.2;\n\tcolor: var(--motiongpu-color-foreground-muted);\n\tborder-right: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-source-tab-active {\n\tcolor: var(--motiongpu-color-foreground);\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-tab-spacer {\n\tflex: 1 1 auto;\n}\n\n.motiongpu-error-source-snippet {\n\tdisplay: grid;\n\tbackground: var(--motiongpu-color-background-muted);\n}\n\n.motiongpu-error-source-row {\n\tdisplay: grid;\n\tgrid-template-columns: 2rem minmax(0, 1fr);\n\talign-items: start;\n\tgap: 0.42rem;\n\tpadding: 0.2rem 0.68rem;\n}\n\n.motiongpu-error-source-row-active {\n\tbackground: color-mix(in oklch, var(--motiongpu-color-accent) 10%, transparent);\n}\n\n.motiongpu-error-source-line {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tfont-variant-numeric: tabular-nums;\n\tfont-feature-settings: 'tnum' 1;\n\tborder-right: 1px solid var(--motiongpu-color-border);\n\tcolor: var(--motiongpu-color-foreground-muted);\n\ttext-align: left;\n}\n\n.motiongpu-error-source-code {\n\tfont-family: var(--motiongpu-font-mono);\n\tfont-size: 0.77rem;\n\tfont-weight: 400;\n\tline-height: 1.3;\n\tcolor: var(--motiongpu-color-foreground);\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n}\n\n.motiongpu-error-details {\n\tborder: 1px solid var(--motiongpu-color-border);\n\tborder-radius: var(--motiongpu-radius-lg);\n\toverflow: hidden;\n\tbackground: var(--motiongpu-color-background);\n}\n\n.motiongpu-error-details summary {\n\tcursor: pointer;\n\tpadding: 0.56rem 0.68rem;\n\tfont-size: 0.7rem;\n\tletter-spacing: 0.07em;\n\tline-height: 1.2;\n\tfont-weight: 500;\n\ttext-transform: uppercase;\n\tcolor: var(--motiongpu-color-foreground);\n}\n\n.motiongpu-error-details[open] summary {\n\tborder-bottom: 1px solid var(--motiongpu-color-border);\n}\n\n.motiongpu-error-details pre {\n\tmargin: 0;\n\tpadding: 0.62rem 0.68rem;\n\twhite-space: pre-wrap;\n\tword-break: break-word;\n\toverflow: auto;\n\tbackground: var(--motiongpu-color-background-muted);\n\tfont-size: 0.74rem;\n\tline-height: 1.4;\n\tfont-weight: 400;\n\tcolor: var(--motiongpu-color-foreground);\n\tfont-family: var(--motiongpu-font-mono);\n}\n\n@media (max-width: 42rem) {\n\t.motiongpu-error-overlay {\n\t\tpadding: 0.62rem;\n\t}\n\n\t.motiongpu-error-dialog {\n\t\tpadding: 0.85rem;\n\t}\n\n\t.motiongpu-error-title {\n\t\tfont-size: 1.02rem;\n\t}\n}\n\n@media (prefers-reduced-motion: reduce) {\n\t.motiongpu-error-overlay {\n\t\tbackdrop-filter: none;\n\t}\n}\n`;\n\nfunction normalizeErrorText(value: string): string {\n\treturn value\n\t\t.trim()\n\t\t.replace(/[.:!]+$/g, '')\n\t\t.toLowerCase();\n}\n\nfunction shouldShowErrorMessage(value: MotionGPUErrorReport): boolean {\n\treturn normalizeErrorText(value.message) !== normalizeErrorText(value.title);\n}\n\nexport function MotionGPUErrorOverlay({ report }: MotionGPUErrorOverlayProps) {\n\tconst detailsSummary = report.source ? 'Additional diagnostics' : 'Technical details';\n\n\treturn (\n\t\t<Portal>\n\t\t\t<style>{MOTIONGPU_ERROR_OVERLAY_STYLES}</style>\n\t\t\t<div className=\"motiongpu-error-overlay\" role=\"presentation\">\n\t\t\t\t<section\n\t\t\t\t\tclassName=\"motiongpu-error-dialog\"\n\t\t\t\t\trole=\"alertdialog\"\n\t\t\t\t\taria-live=\"assertive\"\n\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\tdata-testid=\"motiongpu-error\"\n\t\t\t\t>\n\t\t\t\t\t<header className=\"motiongpu-error-header\">\n\t\t\t\t\t\t<div className=\"motiongpu-error-badge-wrap\">\n\t\t\t\t\t\t\t<p className=\"motiongpu-error-phase\">{report.phase}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<h2 className=\"motiongpu-error-title\">{report.title}</h2>\n\t\t\t\t\t</header>\n\t\t\t\t\t<div className=\"motiongpu-error-body\">\n\t\t\t\t\t\t{shouldShowErrorMessage(report) ? (\n\t\t\t\t\t\t\t<p className=\"motiongpu-error-message\">{report.message}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<p className=\"motiongpu-error-hint\">{report.hint}</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{report.source ? (\n\t\t\t\t\t\t<section className=\"motiongpu-error-source\" aria-label=\"Source\">\n\t\t\t\t\t\t\t<h3 className=\"motiongpu-error-source-title\">Source</h3>\n\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-frame\" role=\"presentation\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tabs\"\n\t\t\t\t\t\t\t\t\trole=\"tablist\"\n\t\t\t\t\t\t\t\t\taria-label=\"Source files\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName=\"motiongpu-error-source-tab motiongpu-error-source-tab-active\"\n\t\t\t\t\t\t\t\t\t\trole=\"tab\"\n\t\t\t\t\t\t\t\t\t\taria-selected=\"true\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{report.source.location}\n\t\t\t\t\t\t\t\t\t\t{report.source.column ? `, col ${report.source.column}` : ''}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-tab-spacer\" aria-hidden=\"true\"></span>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div className=\"motiongpu-error-source-snippet\">\n\t\t\t\t\t\t\t\t\t{report.source.snippet.map((snippetLine) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={`snippet-${snippetLine.number}`}\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tsnippetLine.highlight\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'motiongpu-error-source-row motiongpu-error-source-row-active'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'motiongpu-error-source-row'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-line\">{snippetLine.number}</span>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"motiongpu-error-source-code\">{snippetLine.code || ' '}</span>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</section>\n\t\t\t\t\t) : null}\n\n\t\t\t\t\t<div className=\"motiongpu-error-sections\">\n\t\t\t\t\t\t{report.details.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\" open>\n\t\t\t\t\t\t\t\t<summary>{detailsSummary}</summary>\n\t\t\t\t\t\t\t\t<pre>{report.details.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{report.stack.length > 0 ? (\n\t\t\t\t\t\t\t<details className=\"motiongpu-error-details\">\n\t\t\t\t\t\t\t\t<summary>Stack trace</summary>\n\t\t\t\t\t\t\t\t<pre>{report.stack.join('\\n')}</pre>\n\t\t\t\t\t\t\t</details>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</Portal>\n\t);\n}\n"],"mappings":"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"}
@@ -4,3 +4,4 @@ export interface PortalProps {
4
4
  children?: ReactNode;
5
5
  }
6
6
  export declare function Portal({ target, children }: PortalProps): import("react").ReactPortal | null;
7
+ //# sourceMappingURL=Portal.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../src/lib/react/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5D,MAAM,WAAW,WAAW;IAC3B,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAYD,wBAAgB,MAAM,CAAC,EAAE,MAAe,EAAE,QAAQ,EAAE,EAAE,WAAW,sCAehE"}
@@ -1,24 +1,21 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useEffect, useState } from 'react';
3
- import { createPortal } from 'react-dom';
1
+ import { useEffect, useState } from "react";
2
+ import { createPortal } from "react-dom";
3
+ import { jsx } from "react/jsx-runtime";
4
+ //#region src/lib/react/Portal.tsx
4
5
  function resolveTargetElement(input) {
5
- if (typeof document === 'undefined') {
6
- throw new Error('Portal target resolution requires a browser environment');
7
- }
8
- return typeof input === 'string'
9
- ? (document.querySelector(input) ?? document.body)
10
- : (input ?? document.body);
6
+ if (typeof document === "undefined") throw new Error("Portal target resolution requires a browser environment");
7
+ return typeof input === "string" ? document.querySelector(input) ?? document.body : input ?? document.body;
11
8
  }
12
- export function Portal({ target = 'body', children }) {
13
- const [targetElement, setTargetElement] = useState(null);
14
- useEffect(() => {
15
- if (typeof document === 'undefined') {
16
- return;
17
- }
18
- setTargetElement(resolveTargetElement(target));
19
- }, [target]);
20
- if (!targetElement) {
21
- return null;
22
- }
23
- return createPortal(_jsx("div", { children: children ?? null }), targetElement);
9
+ function Portal({ target = "body", children }) {
10
+ const [targetElement, setTargetElement] = useState(null);
11
+ useEffect(() => {
12
+ if (typeof document === "undefined") return;
13
+ setTargetElement(resolveTargetElement(target));
14
+ }, [target]);
15
+ if (!targetElement) return null;
16
+ return createPortal(/* @__PURE__ */ jsx("div", { children: children ?? null }), targetElement);
24
17
  }
18
+ //#endregion
19
+ export { Portal };
20
+
21
+ //# sourceMappingURL=Portal.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Portal.js","names":[],"sources":["../../src/lib/react/Portal.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport interface PortalProps {\n\ttarget?: string | HTMLElement | null;\n\tchildren?: ReactNode;\n}\n\nfunction resolveTargetElement(input: string | HTMLElement | null | undefined): HTMLElement {\n\tif (typeof document === 'undefined') {\n\t\tthrow new Error('Portal target resolution requires a browser environment');\n\t}\n\n\treturn typeof input === 'string'\n\t\t? (document.querySelector<HTMLElement>(input) ?? document.body)\n\t\t: (input ?? document.body);\n}\n\nexport function Portal({ target = 'body', children }: PortalProps) {\n\tconst [targetElement, setTargetElement] = useState<HTMLElement | null>(null);\n\n\tuseEffect(() => {\n\t\tif (typeof document === 'undefined') {\n\t\t\treturn;\n\t\t}\n\t\tsetTargetElement(resolveTargetElement(target));\n\t}, [target]);\n\n\tif (!targetElement) {\n\t\treturn null;\n\t}\n\n\treturn createPortal(<div>{children ?? null}</div>, targetElement);\n}\n"],"mappings":";;;;AAQA,SAAS,qBAAqB,OAA6D;AAC1F,KAAI,OAAO,aAAa,YACvB,OAAM,IAAI,MAAM,0DAA0D;AAG3E,QAAO,OAAO,UAAU,WACpB,SAAS,cAA2B,MAAM,IAAI,SAAS,OACvD,SAAS,SAAS;;AAGvB,SAAgB,OAAO,EAAE,SAAS,QAAQ,YAAyB;CAClE,MAAM,CAAC,eAAe,oBAAoB,SAA6B,KAAK;AAE5E,iBAAgB;AACf,MAAI,OAAO,aAAa,YACvB;AAED,mBAAiB,qBAAqB,OAAO,CAAC;IAC5C,CAAC,OAAO,CAAC;AAEZ,KAAI,CAAC,cACJ,QAAO;AAGR,QAAO,aAAa,oBAAC,OAAD,EAAA,UAAM,YAAY,MAAW,CAAA,EAAE,cAAc"}
@@ -9,3 +9,4 @@ export type { MotionGPUUserContext, MotionGPUUserNamespace } from './motiongpu-c
9
9
  export type { FrameProfilingSnapshot, FrameKey, FrameTaskInvalidation, FrameTaskInvalidationToken, FrameRunTimings, FrameScheduleSnapshot, FrameStage, FrameStageCallback, FrameTimingStats, FrameTask } from '../core/frame-registry.js';
10
10
  export type { SetMotionGPUUserContextOptions } from './use-motiongpu-user-context.js';
11
11
  export type { RenderPassContext, RenderTarget, UniformLayout, UniformLayoutEntry } from '../core/types.js';
12
+ //# sourceMappingURL=advanced.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"advanced.d.ts","sourceRoot":"","sources":["../../src/lib/react/advanced.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AACnG,OAAO,EACN,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,MAAM,iCAAiC,CAAC;AACzC,YAAY,EACX,2BAA2B,EAC3B,sBAAsB,EACtB,eAAe,EACf,qBAAqB,EACrB,MAAM,8BAA8B,CAAC;AACtC,YAAY,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAC3F,YAAY,EACX,sBAAsB,EACtB,QAAQ,EACR,qBAAqB,EACrB,0BAA0B,EAC1B,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,gBAAgB,EAChB,SAAS,EACT,MAAM,2BAA2B,CAAC;AACnC,YAAY,EAAE,8BAA8B,EAAE,MAAM,iCAAiC,CAAC;AACtF,YAAY,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,kBAAkB,EAClB,MAAM,kBAAkB,CAAC"}
@@ -1,6 +1,12 @@
1
- /**
2
- * React adapter advanced entrypoint for MotionGPU.
3
- */
4
- export * from './index.js';
5
- export { applySchedulerPreset, captureSchedulerDebugSnapshot } from '../core/scheduler-helpers.js';
6
- export { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from './use-motiongpu-user-context.js';
1
+ import { defineMaterial } from "../core/material.js";
2
+ import { BlitPass } from "../passes/BlitPass.js";
3
+ import { CopyPass } from "../passes/CopyPass.js";
4
+ import { ShaderPass } from "../passes/ShaderPass.js";
5
+ import { applySchedulerPreset, captureSchedulerDebugSnapshot } from "../core/scheduler-helpers.js";
6
+ import { useMotionGPU } from "./motiongpu-context.js";
7
+ import { useFrame } from "./frame-context.js";
8
+ import { FragCanvas } from "./FragCanvas.js";
9
+ import { useTexture } from "./use-texture.js";
10
+ import "./index.js";
11
+ import { setMotionGPUUserContext, useMotionGPUUserContext, useSetMotionGPUUserContext } from "./use-motiongpu-user-context.js";
12
+ export { BlitPass, CopyPass, FragCanvas, ShaderPass, applySchedulerPreset, captureSchedulerDebugSnapshot, defineMaterial, setMotionGPUUserContext, useFrame, useMotionGPU, useMotionGPUUserContext, useSetMotionGPUUserContext, useTexture };
@@ -12,3 +12,4 @@ export declare function useFrame(callback: FrameCallback, options?: UseFrameOpti
12
12
  * Registers a frame callback with an explicit task key.
13
13
  */
14
14
  export declare function useFrame(key: FrameKey, callback: FrameCallback, options?: UseFrameOptions): UseFrameResult;
15
+ //# sourceMappingURL=frame-context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"frame-context.d.ts","sourceRoot":"","sources":["../../src/lib/react/frame-context.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACX,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,qBAAqB,EACrB,0BAA0B,EAC1B,eAAe,EACf,cAAc,EACd,MAAM,2BAA2B,CAAC;AAOnC;;GAEG;AACH,eAAO,MAAM,yBAAyB,+CAA4C,CAAC;AAEnF,YAAY,EACX,aAAa,EACb,QAAQ,EACR,sBAAsB,EACtB,aAAa,EACb,eAAe,EACf,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,qBAAqB,EACrB,0BAA0B,EAC1B,eAAe,EACf,cAAc,EACd,CAAC;AAEF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,aAAa,EAAE,OAAO,CAAC,EAAE,eAAe,GAAG,cAAc,CAAC;AAE7F;;GAEG;AACH,wBAAgB,QAAQ,CACvB,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,aAAa,EACvB,OAAO,CAAC,EAAE,eAAe,GACvB,cAAc,CAAC"}