@petit-kit/scoped 0.0.6-beta.1 → 0.0.6

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.
package/README.md CHANGED
@@ -6,11 +6,11 @@
6
6
  <br />
7
7
  <br />
8
8
 
9
- # Scoped - 0.0.5
9
+ # Scoped - 0.0.6
10
10
 
11
11
  ### A lightweight, framework-agnostic library for building web components with reactive state, bindings, lifecycle hooks, template-based rendering and plugins.
12
12
 
13
- **4.1 Kb** Gzipped - **12.7kb** Minified
13
+ **4.2 Kb** Gzipped - **12.7kb** Minified
14
14
 
15
15
  <br />
16
16
 
@@ -43,6 +43,8 @@ It encourages expressiveness and rapid prototyping, giving you fine-grained cont
43
43
 
44
44
  # Installation
45
45
 
46
+ To install **Scoped**, you can use your favorite package manager.
47
+
46
48
  ```bash
47
49
  npm install @petit-kit/scoped
48
50
  # or
@@ -53,6 +55,8 @@ pnpm install @petit-kit/scoped
53
55
 
54
56
  # Getting started
55
57
 
58
+ To get started with **Scoped**, you can create a new component using the `define` function.
59
+
56
60
  ```javascript
57
61
  import { define } from '@petit-kit/scoped';
58
62
 
@@ -139,29 +143,30 @@ The `SetupFunction` is run only once on mount and should return a function that
139
143
 
140
144
  `host` is the component itself, it got those methods:
141
145
 
142
- | Method | Description |
143
- | --------------------------- | ------------------------------------------ |
144
- | `host.setState(partial)` | Update state + full re-render |
145
- | `host.updateState(partial)` | Update state, effects only (no re-render) |
146
- | `host.setProps(partial)` | Update props programmatically |
147
- | `host.scheduleUpdate()` | Schedule effects on next RAF |
148
- | `host.update(fullRender)` | Force update (full or partial) |
149
- | `host.forceRender()` | Force re-render even if template unchanged |
150
- | `host.destroy()` | Clean up and run destroy callbacks |
146
+ | Method | Description |
147
+ | ----------------------------- | ------------------------------------------ |
148
+ | **host.setState(partial)** | Update state + full re-render |
149
+ | **host.updateState(partial)** | Update state, effects only (no re-render) |
150
+ | **host.setProps(partial)** | Update props programmatically |
151
+ | **host.scheduleUpdate()** | Schedule effects on next RAF |
152
+ | **host.update(fullRender)** | Force update (full or partial) |
153
+ | **host.forceRender()** | Force re-render even if template unchanged |
154
+ | **host.destroy()** | Clean up and run destroy callbacks |
151
155
 
152
156
  ## Templating
153
157
 
154
- Templates in this framework are just functions that return a string of HTML. Inside your setup function, you can return a function — known as the template function — that uses template literals for HTML generation.
158
+ Inside your setup function, you can return a function that uses template literals for HTML generation.
155
159
 
156
160
  ### Basic Example
157
161
 
158
162
  ```typescript
159
- return () => `
160
- <div>
161
- <h2>Hello, ${props.name}!</h2>
162
- <button on:click="actions.addThing">Add thing</button>
163
- </div>
164
- `;
163
+ () => {
164
+ return () => `
165
+ <div>
166
+ <h2>Hello, ${props.name}!</h2>
167
+ </div>
168
+ `;
169
+ };
165
170
  ```
166
171
 
167
172
  ### Dynamic Content
@@ -169,16 +174,24 @@ return () => `
169
174
  Interpolation with `${...}` gives you access to state, props, or anything in closure:
170
175
 
171
176
  ```typescript
172
- return () => `
173
- <ul>
174
- ${state.items.map((item) => `<li>${item.title}</li>`).join('')}
175
- </ul>
176
- `;
177
+ () => {
178
+ return () => `
179
+ <ul>
180
+ ${state.items
181
+ .map(
182
+ (item) => `
183
+ <li>${item.title}</li>
184
+ `
185
+ )
186
+ .join('')}
187
+ </ul>
188
+ `;
189
+ };
177
190
  ```
178
191
 
179
192
  ### Event Handlers
180
193
 
181
- Use `on:eventName="handler"` to bind events, where `handler` is a function from your `actions` object or setup context:
194
+ Use `on:eventName="handler"` to bind events, where **handler** is a function from your **actions** object or setup context:
182
195
 
183
196
  ```typescript
184
197
  ({ actions }) => {
@@ -189,16 +202,19 @@ Use `on:eventName="handler"` to bind events, where `handler` is a function from
189
202
  };
190
203
  ```
191
204
 
192
- Arrow functions or direct expressions are not supported; you must use named action references.
205
+ Arrow functions or direct expressions are not supported, you must use named action references.
193
206
 
194
207
  ### Referencing DOM Elements
195
208
 
196
209
  Use the `ref` attribute to assign references:
197
210
 
198
211
  ```typescript
199
- return () => `
200
- <input ref="inputEl" type="text">
201
- `;
212
+ ({ onMount, refs }) => {
213
+ onMount(() => console.log(refs.inputElement));
214
+ return () => `
215
+ <input ref="inputElement" type="text"></input>
216
+ `;
217
+ };
202
218
  ```
203
219
 
204
220
  You can then access the element as `refs.inputEl` in your setup code or methods.
@@ -207,16 +223,6 @@ You can then access the element as `refs.inputEl` in your setup code or methods.
207
223
 
208
224
  Bindings let you connect the value of a DOM property or attribute to your component's state or props, making the element update reactively when the state changes, and optionally syncing changes back to your state.
209
225
 
210
- #### Value Binding
211
-
212
- For `<input>`, `<textarea>`, and `<select>`, use `bind:value="stateKey"` to bind the value to a property in your `state`. When the user edits the input, the component will automatically update that property.
213
-
214
- ```typescript
215
- return () => `
216
- <input bind:value="message">
217
- `;
218
- ```
219
-
220
226
  #### Supported Bindings
221
227
 
222
228
  - `bind:text="stateKey"` - Binds textContent
@@ -225,13 +231,22 @@ return () => `
225
231
  - `bind:checked="isChecked"` — Binds the checked property of checkbox/radio
226
232
  - `bind:prop="key"` — Generic property binding (any property, e.g. `bind:min`, `bind:max`)
227
233
 
228
- #### Example: Checkbox
234
+ <br />
229
235
 
230
236
  ```typescript
231
- return () => `
232
- <input type="checkbox" bind:checked="done">
233
- <label>${state.done ? 'Complete' : 'Incomplete'}</label>
234
- `;
237
+ ({ state }) => {
238
+ state.textValue = 'Hello, world!';
239
+ state.htmlValue = `<strong>Hello, world!</strong>`;
240
+ state.isChecked = true;
241
+ state.styleValue = `background-color: red;`;
242
+
243
+ return () => `
244
+ <p bind:text="textValue"></p>
245
+ <p bind:html="htmlValue"></p>
246
+ <input type="checkbox" bind:checked="isChecked">
247
+ <div bind:style="styleValue"></div>
248
+ `;
249
+ };
235
250
  ```
236
251
 
237
252
  ## State & props
@@ -242,8 +257,8 @@ State is a plain object that belongs to your component instance. It is fully rea
242
257
 
243
258
  You can update state in two main ways:
244
259
 
245
- - `host.setState(partial)`: Merges the partial state and triggers a full re-render.
246
- - `host.updateState(partial)`: Merges the partial state and only schedules effects/computed, but does NOT re-render the template.
260
+ - `host.setState(partial)` - Merges the partial state and triggers a full re-render.
261
+ - `host.updateState(partial)` - Merges the partial state and only schedules effects/computed, but does **NOT** re-render the template.
247
262
 
248
263
  ```typescript
249
264
  // Initialize state in setup (no re-render)
@@ -282,7 +297,7 @@ Props are available as the `props` object in the setup function:
282
297
 
283
298
  ```javascript
284
299
  define(
285
- 'c-my-thing',
300
+ 'c-my-component',
286
301
  {
287
302
  props: {
288
303
  value: { type: Number, default: 10 },
@@ -291,9 +306,9 @@ define(
291
306
  },
292
307
  ({ props }) => {
293
308
  return () => `
294
- <p>Value: ${props.value}</p>
295
- <span>${props.label}</span>
296
- `;
309
+ <p>Value: ${props.value}</p>
310
+ ${props.label}
311
+ `;
297
312
  }
298
313
  );
299
314
  ```
@@ -302,7 +317,7 @@ Props are always kept up to date with attribute changes, and updating props from
302
317
 
303
318
  **Two-way Binding:**
304
319
 
305
- Scoped allows props <=> state syncing using the `link` helper:
320
+ Scoped allows **props** ↔️ **state** syncing using the `link` helper:
306
321
 
307
322
  ```typescript
308
323
  ({ link }) => {
@@ -324,31 +339,42 @@ This updates the prop, reflects it as an attribute if needed, and triggers all u
324
339
 
325
340
  Props are also automatically parsed from their attribute string values into the appropriate type, based on your definition (Number, Boolean, etc.), so you always work with type-safe values in your setup and template logic.
326
341
 
342
+ **Setting large objects/arrays as props:**
343
+
344
+ You can set large objects/arrays as props by using the `host.setProps(...)` method:
345
+
346
+ ```typescript
347
+ const component = document.querySelector('c-my-component');
348
+ component.setProps({ data: largeArray, config: complexObject });
349
+ ```
350
+
327
351
  ## Effects
328
352
 
329
353
  Effects are functions that run in response to reactive changes and can be used for side effects, subscriptions, or manual cleanup logic within your components.
330
354
 
331
355
  ```typescript
332
- // Run on every render
333
- effect(() => console.log('Rendered'));
334
-
335
- // Run once (empty deps)
336
- effect(() => {
337
- const sub = api.subscribe();
338
- return () => sub.unsubscribe();
339
- }, []);
340
-
341
- // Run when deps change
342
- effect(
343
- (deps) => console.log('Count:', deps[0]),
344
- () => [state.count]
345
- );
356
+ ({ effect }) => {
357
+ // Run on every render
358
+ effect(() => console.log('Rendered'));
359
+
360
+ // Run once (empty deps)
361
+ effect(() => {
362
+ const sub = api.subscribe();
363
+ return () => sub.unsubscribe();
364
+ }, []);
365
+
366
+ // Run when deps change
367
+ effect(
368
+ (deps) => console.log('Count:', deps[0]),
369
+ () => [state.count]
370
+ );
346
371
 
347
- // Manual cleanup
348
- const cleanup = effect(() => {
349
- /* ... */
350
- });
351
- cleanup();
372
+ // Manual cleanup
373
+ const cleanup = effect(() => {
374
+ /* ... */
375
+ });
376
+ cleanup();
377
+ };
352
378
  ```
353
379
 
354
380
  ## Computed
@@ -356,36 +382,36 @@ cleanup();
356
382
  Computed values are memoized values used to derive data from state or props and automatically update when their dependencies change.
357
383
 
358
384
  ```typescript
359
- const fullName = computed(
360
- () => `${state.firstName} ${state.lastName}`,
361
- () => [state.firstName, state.lastName]
362
- );
363
- return () => `<p>Name: ${fullName()}</p>`;
385
+ ({ computed }) => {
386
+ const fullName = computed(
387
+ () => `${state.firstName} ${state.lastName}`, // getter
388
+ () => [state.firstName, state.lastName] // dependencies
389
+ );
390
+ return () => `<p>Name: ${fullName()}</p>`;
391
+ };
364
392
  ```
365
393
 
366
394
  ## Custom events
367
395
 
396
+ Custom events are a way to communicate between components.
397
+
368
398
  ### Emit
369
399
 
370
400
  To emit a custom event from your component, use `emit(name, detail?)`:
371
401
 
372
402
  ```typescript
373
- actions.handleButtonClick = () => {
374
- host.emit('my-event', { message: 'Hello from the component!' });
403
+ ({ emit }) => {
404
+ emit('my-event', { message: 'Hello from the component!' });
375
405
  };
376
-
377
- return () => `<button on:click="handleButtonClick">Emit Event</button>`;
378
406
  ```
379
407
 
380
- **Listening to custom events in parent:**
408
+ Listening to custom events in parent:
381
409
 
382
410
  ```javascript
383
- <my-component id="c1"></my-component>
384
- <script>
385
- document.getElementById('c1').addEventListener('my-event', (e) => {
386
- console.log('Received:', e.detail.message);
387
- });
388
- </script>
411
+ const component = document.querySelector('c-my-component');
412
+ component.addEventListener('my-event', (e) => {
413
+ console.log('Received:', e.detail.message);
414
+ });
389
415
  ```
390
416
 
391
417
  ### Listen
@@ -393,98 +419,73 @@ return () => `<button on:click="handleButtonClick">Emit Event</button>`;
393
419
  You can use `listen` to subscribe to events on any EventTarget (automatically cleaned up on destroy):
394
420
 
395
421
  ```typescript
396
- onMount(() => {
397
- // Listen to a custom event emitted by another component
398
- listen(
399
- someOtherElement, // can be `window`
400
- 'my-event',
401
- (e) => {
402
- console.log('Got custom event with detail:', e.detail);
403
- }
404
- );
405
- });
422
+ ({ listen }) => {
423
+ listen(window, 'my-event', (e) => {
424
+ console.log('Received:', e.detail.message);
425
+ });
426
+ };
406
427
  ```
407
428
 
408
- ---
409
-
410
- ### Event Delegation
429
+ ## Event Delegation
411
430
 
412
431
  `delegate` lets you efficiently handle events on descendants matching a selector:
413
432
 
414
433
  ```typescript
415
- onMount(() => {
416
- delegate('click', '.item', (e, target) => {
417
- console.log('Clicked item:', target.textContent);
418
- target.classList.toggle('active');
434
+ ({ onMount, delegate }) => {
435
+ onMount(() => {
436
+ delegate('click', '.item', (e, target) => {
437
+ console.log('Clicked item:', target.textContent);
438
+ target.classList.toggle('active');
439
+ });
419
440
  });
420
- });
421
441
 
422
- return () => `
423
- <ul>
424
- <li class="item">Apple</li>
425
- <li class="item">Banana</li>
426
- <li class="item">Cherry</li>
427
- </ul>
428
- `;
442
+ return () => `
443
+ <ul>
444
+ <li class="item">Apple</li>
445
+ <li class="item">Banana</li>
446
+ <li class="item">Cherry</li>
447
+ </ul>
448
+ `;
449
+ };
429
450
  ```
430
451
 
431
452
  ## Slots
432
453
 
433
454
  Slots allow you to render children inside your custom element, making it easy to compose interfaces or pass in dynamic content.
434
455
 
435
- ### Basic Usage
436
-
437
456
  By default, any child content placed inside your component tag will be rendered in the default slot:
438
457
 
439
458
  ```html
440
- <my-card>
441
- <h2>Title goes here</h2>
442
- <p>Some description or content.</p>
443
- </my-card>
459
+ <c-my-component>
460
+ <h2 slot="title">Title goes here</h2>
461
+ <p slot="description">Some description or content.</p>
462
+ </c-my-component>
444
463
  ```
445
464
 
446
465
  In your component template, use:
447
466
 
448
467
  ```typescript
449
- return () => `
450
- <div class="card">
451
- <slot></slot> <!-- default slot -->
452
- </div>
453
- `;
454
- ```
455
-
456
- ### Named Slots
457
-
458
- Named slots let your users provide content for specific areas:
459
-
460
- ```html
461
- <my-layout>
462
- <div slot="sidebar">Sidebar content</div>
463
- <div slot="main">Main content</div>
464
- </my-layout>
465
- ```
466
-
467
- In your component:
468
-
469
- ```typescript
470
- return () => `
471
- <aside><slot name="sidebar"></slot></aside>
472
- <main><slot name="main"></slot></main>
473
- `;
468
+ define('my-card', {}, () => {
469
+ return () => `
470
+ <aside><slot name="title"></slot></aside>
471
+ <main><slot name="description"></slot></main>
472
+ <slot></slot>
473
+ `;
474
+ });
474
475
  ```
475
476
 
476
477
  ## Lifecycle
477
478
 
478
479
  Lifecycle hooks let you run code at specific moments in the component's life, such as mount, update, or destruction.
479
480
 
480
- | Method | Description |
481
- | -------------------- | ------------------------ |
482
- | `onMount(cb)` | After mount |
483
- | `onDestroy(cb)` | On destroy |
484
- | `onUpdate(cb)` | After each update |
485
- | `onBeforeUpdate(cb)` | Before each update |
486
- | `onFirstUpdate(cb)` | Once, after first render |
487
- | `onPropsChanged(cb)` | When props change |
481
+ | Method | Description |
482
+ | ------------------------ | ------------------------ |
483
+ | **`onMount(cb)`** | After mount |
484
+ | **`onDestroy(cb)`** | On destroy |
485
+ | **`onUpdate(cb)`** | After each update |
486
+ | **`onBeforeUpdate(cb)`** | Before each update |
487
+ | **`onFirstUpdate(cb)`** | Once, after first render |
488
+ | **`onPropsChanged(cb)`** | When props change |
488
489
 
489
490
  ## Select
490
491
 
@@ -500,6 +501,7 @@ define('c-my-component', {}, ({ $, host }) => {
500
501
  const el = document.querySelector('c-my-component'); // self
501
502
  const inner = el.$('.list-item'); // same API on host
502
503
  });
504
+
503
505
  return () => `<div>
504
506
  <button class="primary">OK</button>
505
507
  <span class="list-item">
@@ -516,6 +518,8 @@ define('c-my-component', {}, ({ $, host }) => {
516
518
 
517
519
  Scoped includes a set of optional plugins to extend or enhance component behavior. You can import any of these plugins and register them via the `plugins` option.
518
520
 
521
+ ⏲ Document is working in progress
522
+
519
523
  **Available Plugins:**
520
524
 
521
525
  - **[lerpPlugin](src/plugins/lerp/README.md) & [springPlugin](src/plugins/spring/README.md)**
@@ -548,8 +552,7 @@ Scoped includes a set of optional plugins to extend or enhance component behavio
548
552
  **Usage Example:**
549
553
 
550
554
  ```javascript
551
- import { define } from '@petit-kit/scoped';
552
- import { inViewPlugin, timerPlugin } from '@petit-kit/scoped/plugins';
555
+ import { define, inViewPlugin, timerPlugin } from '@petit-kit/scoped';
553
556
 
554
557
  define(
555
558
  'my-component',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@petit-kit/scoped",
3
- "version": "0.0.6-beta.1",
3
+ "version": "0.0.6",
4
4
  "description": "A lightweight, reactive web component framework with built-in plugins for modern web development.",
5
5
  "keywords": [
6
6
  "web-components",
@@ -32,15 +32,6 @@
32
32
  "dist"
33
33
  ],
34
34
  "sideEffects": false,
35
- "scripts": {
36
- "build": "npm run clean && npm run format && rollup -c && npm run build:types",
37
- "build:types": "tsc -p tsconfig.declarations.json",
38
- "dev": "rollup -c -w",
39
- "clean": "rm -rf dist",
40
- "format": "prettier --write .",
41
- "format:check": "prettier --check .",
42
- "publish": "pnpm build && pnpm publish --access public"
43
- },
44
35
  "author": "",
45
36
  "license": "MIT",
46
37
  "devDependencies": {
@@ -55,5 +46,14 @@
55
46
  },
56
47
  "dependencies": {
57
48
  "@petit-kit/animate": "^0.0.1"
49
+ },
50
+ "scripts": {
51
+ "build": "pnpm run build:doc && pnpm run clean && pnpm run format && rollup -c && pnpm run build:types",
52
+ "build:types": "tsc -p tsconfig.declarations.json",
53
+ "build:doc": "node doc/index.js",
54
+ "dev": "rollup -c -w",
55
+ "clean": "rm -rf dist",
56
+ "format": "prettier --write .",
57
+ "format:check": "prettier --check ."
58
58
  }
59
- }
59
+ }
package/dist/index.cjs DELETED
@@ -1,2 +0,0 @@
1
- "use strict";function t({from:t=0,to:e=1,mass:n=1,stiffness:s=120,damping:i=14,velocity:a=0,tolerance:d=.001,resumeOnTarget:p=!0}={}){function m(){return c(v)}function w(t){if(M)return m();if(o(v)&&o(S)&&o(b)){let e=!0;for(let o=0;o<v.length;o+=1){const r=v[o]-S[o],c=(-s*r-i*b[o])/n;b[o]+=c*t,v[o]+=b[o]*t;const h=v[o]-S[o];(Math.abs(b[o])>=d||Math.abs(h)>=d)&&(e=!1)}if(e){for(let t=0;t<v.length;t+=1)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,c(v)}if(r(v)&&r(S)&&r(b)){const e=y.objectKeys??Object.keys(v);let o=!0;for(const r of e){const e=v[r]-S[r],c=(-s*e-i*b[r])/n;b[r]+=c*t,v[r]+=b[r]*t;const h=v[r]-S[r];(Math.abs(b[r])>=d||Math.abs(h)>=d)&&(o=!1)}if(o){for(const t of e)v[t]=S[t],b[t]=0;M=!0}return y.value=v,y.velocity=b,c(v)}const e=S;let h=b;h+=(-s*(v-e)-i*h)/n*t,v+=h*t,b=h,y.value=v,y.velocity=b;const f=v-e;return Math.abs(h)<d&&Math.abs(f)<d&&(v=e,b=0,y.value=v,y.velocity=b,M=!0),v}const y=u({from:t,to:e,velocity:a,label:"Spring"}),g=y.normalizeInput;let v=y.value,b=y.velocity??a,S=y.target,j=null,M=!1;const O=new Set;return{setTarget:function(t){const e=g(t),n=!h(e,S);if(S=e,y.target=e,v=y.value,p&&M&&n){M=!1,j=null;for(const t of O)t(S)}},setValue:function(t,e={}){const{resetVelocity:n=!0,resetTime:s=!0,setTarget:i=!1,markDone:o=!1}=e;v=g(t),y.value=v,i&&(S=c(v),y.target=S);const r=M||!h(v,S);if(n&&(b=null!=y.arrayLength?f(0,y.arrayLength):null!=y.objectKeys?l(0,y.objectKeys):0,y.velocity=b),s&&(j=null),o&&(M=!0),r&&!o){M=!1,j=null;for(const t of O)t(S)}},getValue:m,isDone:function(){return M},onResume:function(t){return O.add(t),()=>{O.delete(t)}},step:w,next:function(t=performance.now()){if(null==j)return j=t,m();const e=(t-j)/1e3;j=t;const n=1/30;let s=e,i=m();for(;s>0&&!M;){const t=Math.min(s,n);i=w(t),s-=t}return i}}}function e(t,e){if(!e||"object"!=typeof e||null==e.type)return null!=t?t:e;const{type:n,default:s}=e;if(null==t)return s;try{switch(n){case String:return String(t);case Number:{const e=Number(t);return Number.isNaN(e)?s:e}case Boolean:return""===t||"true"===t||"false"!==t&&"0"!==t&&null!=t;case Object:try{return"string"==typeof t?JSON.parse(t):t}catch{return s}case Array:try{return"string"==typeof t?JSON.parse(t):t}catch{return Array.isArray(s)?s:[]}default:return t}}catch{return s}}function n(t,e,n,s){if(!s||"object"!=typeof s||!s.reflect)return;let i=null;const o=s.type;if(o===Boolean)return n?void t.setAttribute(e,""):void t.removeAttribute(e);if(o===Object||o===Array)try{i=null==n?null:JSON.stringify(n)}catch{i=null}else i=null==n?null:String(n);null==i?t.removeAttribute(e):t.setAttribute(e,i)}const s=()=>({name:"timer",extend:t=>{const e=new Set,n=new Set,s=new Set,i={setTimeout:(t,n,...s)=>{let i;return i=setTimeout((...n)=>{e.delete(i),t(...n)},n,...s),e.add(i),i},setInterval:(t,e,...s)=>{const i=setInterval(t,e,...s);return n.add(i),i},raf:(t,e)=>{let n=0,i=!0,o=0;const r="number"==typeof e&&e>0?1e3/e:0,c=e=>{if(s.delete(n),i){if(r){if(e-o>=r){const n=o?e-o:r;o=e,t(e,n)}}else{const n=o?e-o:0;o=e,t(e,n)}n=requestAnimationFrame(c),s.add(n)}};return n=requestAnimationFrame(c),s.add(n),()=>{i&&(i=!1,s.delete(n),cancelAnimationFrame(n))}}};return t.onDestroy(()=>{for(const t of e)clearTimeout(t);e.clear();for(const t of n)clearInterval(t);n.clear();for(const t of s)cancelAnimationFrame(t);s.clear()}),{timer:i}}}),i=()=>({name:"mouse",extend:t=>{const e=new Map,n=(t,n)=>{if("undefined"==typeof window)return()=>{};const s=t=>{const e=t;n(e.clientX,e.clientY,e)};window.addEventListener(t,s);let i=e.get(t);return i||(i=new Set,e.set(t,i)),i.add(s),()=>{window.removeEventListener(t,s),i?.delete(s)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const[t,n]of e){for(const e of n)window.removeEventListener(t,e);n.clear()}e.clear()}}),{onMouseMove:t=>n("mousemove",t),onMouseDown:t=>n("mousedown",t),onMouseUp:t=>n("mouseup",t),onMouseWheel:t=>(t=>{if("undefined"==typeof window)return()=>{};const n=e=>{const n=e;t(n.clientX,n.clientY,n.deltaY,n)};window.addEventListener("wheel",n);let s=e.get("wheel");return s||(s=new Set,e.set("wheel",s)),s.add(n),()=>{window.removeEventListener("wheel",n),s?.delete(n)}})(t)}}}),o=t=>Array.isArray(t),r=t=>null!=t&&"object"==typeof t&&!Array.isArray(t),c=t=>o(t)?t.slice():r(t)?{...t}:t,h=(t,e)=>{if(o(t)&&o(e)){if(t.length!==e.length)return!1;for(let n=0;n<t.length;n+=1)if(!Object.is(t[n],e[n]))return!1;return!0}if(r(t)&&r(e)){const n=Object.keys(t),s=Object.keys(e);if(n.length!==s.length)return!1;for(const s of n){if(!(s in e))return!1;if(!Object.is(t[s],e[s]))return!1}return!0}return!(o(t)||o(e)||r(t)||r(e))&&Object.is(t,e)},f=(t,e)=>Array.from({length:e},()=>t),l=(t,e)=>e.reduce((e,n)=>(e[n]=t,e),{}),u=({from:t,to:e,velocity:n,label:s})=>{const i={value:t,target:e,velocity:n,arrayLength:null,objectKeys:null,normalizeInput:t=>t},c=t=>{if(null==i.arrayLength){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);i.arrayLength=t,o(i.value)||(i.value=f(i.value,t)),o(i.target)||(i.target=f(i.target,t)),void 0===i.velocity||o(i.velocity)||(i.velocity=f(i.velocity,t))}},h=t=>{if(null==i.objectKeys){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);i.objectKeys=t,r(i.value)||(i.value=l(i.value,t)),r(i.target)||(i.target=l(i.target,t)),void 0===i.velocity||r(i.velocity)||(i.velocity=l(i.velocity,t))}},u=t=>{if(o(t)){if(null!=i.objectKeys)throw new Error(`${s} value shape mismatch (array vs object).`);if(null==i.arrayLength&&c(t.length),t.length!==i.arrayLength)throw new Error(`${s} value length mismatch (expected ${i.arrayLength}, got ${t.length}).`);return t.slice()}if(r(t)){if(null!=i.arrayLength)throw new Error(`${s} value shape mismatch (object vs array).`);const e=Object.keys(t);if(null==i.objectKeys&&h(e),i.objectKeys&&e.length!==i.objectKeys.length)throw new Error(`${s} value keys mismatch (expected ${i.objectKeys.length}, got ${e.length}).`);if(i.objectKeys)for(const e of i.objectKeys)if(!(e in t))throw new Error(`${s} value keys mismatch (missing key "${e}").`);return{...t}}return null!=i.arrayLength?f(t,i.arrayLength):null!=i.objectKeys?l(t,i.objectKeys):t};i.normalizeInput=u;const a=o(t)||o(e)||void 0!==n&&o(n),d=r(t)||r(e)||void 0!==n&&r(n);if(a&&d)throw new Error(`${s} value shape mismatch (array vs object).`);if(a){const s=o(t)?t.length:o(e)?e.length:n.length;c(s),i.value=u(t),i.target=u(e),void 0!==i.velocity&&(i.velocity=u(i.velocity))}else if(d){const s=r(t)?Object.keys(t):r(e)?Object.keys(e):Object.keys(n);h(s),i.value=u(t),i.target=u(e),void 0!==i.velocity&&(i.velocity=u(i.velocity))}return i};let a={x:-1,y:-1};const d={stiffness:300,damping:30,mass:1},p="0.0.5",m=/\{([A-Za-z_$][\w$]*)\}/g;exports.SCOPE_VERSION=p,exports.define=function(t,s={},i){const{props:o={},shadow:r=!1,styles:c,plugins:h}=s,f=h??[],l=()=>{};class u extends HTMLElement{constructor(){super(),this.version=p,this.t={};for(const t of Object.keys(o)){const e=o[t];this.t[t]=e&&"object"==typeof e&&("type"in e||"default"in e)?e:{type:void 0,default:e,reflect:!1}}this.props={},this.state={},this.actions={},this.refs={},this.emit=this.emit.bind(this),this.listen=this.listen.bind(this),this.setState=this.setState.bind(this),this.updateState=this.updateState.bind(this),this.setProps=this.setProps.bind(this),this.scheduleUpdate=this.scheduleUpdate.bind(this),this.update=this.update.bind(this),this.forceRender=this.forceRender.bind(this),this.destroy=this.destroy.bind(this),this.$=this.$.bind(this),this.i=null,this.o=null,this.h=!1,this.l=!1,this.u=r,this.p=r?this.attachShadow({mode:"open"}):this,this.m=null,this.S=[],this.j=[],this.M=[],this.O=[],this._=[],this.A=[],this.T=[],this.k=[],this.L=new Map,this.F=!1,this.I=!1,this.R={},this.V=!1,this.C=t,this.H=!1,this.D=new Set,this.U=!1,this.q=new Map,this.B=0,this.N=!1}W(t){const e=this.u?this.p.host:this;let n=t.parentElement;for(;n;){if(n===e)return!1;if(n.tagName.includes("-"))return!0;n=n.parentElement}return!1}static get observedAttributes(){return Object.keys(o)}attributeChangedCallback(t,n,s){if(n===s)return;const i=this.t[t],o=this.R[t],r=e(s,i);if(this.props[t]=r,this.F&&o!==r)for(const e of this.k)try{e(t,o,r)}catch(t){l(String(t?.message||t))}this.R[t]=r,this.D.has(t)?this.D.delete(t):this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}connectedCallback(){for(const t in this.t){if(!this.t.hasOwnProperty(t))continue;const n=e(this.getAttribute(t),this.t[t]);this.props[t]=n,this.R[t]=n}r||this.m||(this.m=this.P());let t=null;try{if(i){const e={props:this.props,state:this.state,actions:this.actions,refs:this.refs,emit:this.emit,listen:this.listen,updateState:this.updateState.bind(this),$:this.$,host:this,onMount:t=>this.M.push(t),onDestroy:t=>this.O.push(t),onUpdate:t=>this._.push(t),onBeforeUpdate:t=>this.A.push(t),onFirstUpdate:t=>this.T.push(t),onPropsChanged:t=>this.k.push(t),link:(t,e)=>{const s=e||t;this.state[s]=this.props[t],this.k.push((e,n,i)=>{e===t&&(Object.is(this.state[s],i)||(this.state[s]=i))});const i={fn:()=>{const e=this.state[s];if(Object.is(this.props[t],e))return;this.props[t]=e,this.R[t]=e;const i=this.t[t],o=i?{...i,reflect:!0}:i,r=this.getAttribute(t);this.D.add(t),n(this,t,e,o),r===this.getAttribute(t)&&this.D.delete(t)},deps:()=>[this.state[s]]};this.S.push(i)},computed:(t,e)=>{let n;if(void 0!==e)try{const t="function"==typeof e?e():e;Array.isArray(t)&&(n=t)}catch(t){String(t?.message||t)}const s={getter:t,deps:e,value:void 0!==e?t(n):t()};this.j.push(s);const i=()=>s.value;return i.J=s,this.K(i),i},effect:(t,e)=>{const n={fn:t,deps:e};return this.S.push(n),()=>this.Z(n)},delegate:(t,e,n)=>(this.G(t,e,n),()=>this.X(t,e,n))};for(const t of f)if(t)try{const n=t.extend(e,this);n&&"object"==typeof n&&Object.assign(e,n)}catch(t){l(String(t?.message||t))}t=i(e)}}catch(t){String(t?.message||t)}if(this.i="function"!=typeof t?()=>"":t,this.U=!0,this.update(!0),this.U=!1,this.H&&(this.H=!1,this.update(!0)),!this.F){this.F=!0;for(const t of this.M)try{t()}catch(t){l(String(t?.message||t))}}}disconnectedCallback(){this.destroy()}remove(){super.remove()}$(t){const e=this.p.querySelectorAll(t);return 0===e.length?null:1===e.length?e[0]:Array.from(e)}destroy(){for(const t of this.O)try{t()}catch(t){l(String(t?.message||t))}for(const t of this.S)if(t.cleanup){try{t.cleanup()}catch(t){l(String(t?.message||t))}t.cleanup=void 0}for(const[,t]of this.L)try{this.p.removeEventListener(t.eventType,t.listener)}catch{}this.L.clear(),this.F=!1}emit(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}listen(t,e,n,s){const i=n;t.addEventListener(e,i,s);const o=()=>{try{t.removeEventListener(e,i,s)}catch{}};return this.O.push(o),o}setState(t){let e=!1;const n=t,s=this.state;for(const t in n){if(!Object.prototype.hasOwnProperty.call(n,t))continue;const i=n[t];Object.is(s[t],i)||(s[t]=i,e=!0)}if(e)if(this.U||!this.F)this.update(!0);else{if(!this.i||!this.isConnected)return;if(this.h)return;this.h=!0,requestAnimationFrame(()=>{this.h=!1,this.i&&this.isConnected&&this.update(!0)})}}updateState(t){Object.assign(this.state,t),this.i&&this.isConnected&&this.Y()}setProps(t){const e=Object.keys(t);if(0===e.length)return;const s=[];for(const i of e){const e=t[i],o=this.R[i];this.props[i]=e,this.F&&o!==e&&s.push(i);const r=this.t[i];r&&r.reflect&&n(this,i,e,r),this.F&&o===e||(this.R[i]=e)}if(this.F&&s.length>0)for(const e of s){const n=this.R[e],s=t[e];for(const t of this.k)try{t(e,n,s)}catch(t){l(String(t?.message||t))}}this.i&&this.isConnected?this.update(!0):this.H=!0}scheduleUpdate(){this.i&&this.isConnected&&this.Y()}Y(){this.l||this.h||(this.l=!0,("function"==typeof queueMicrotask?queueMicrotask:t=>Promise.resolve().then(t))(()=>{this.l=!1,this.i&&this.isConnected&&(this.h||this.update(!1))}))}update(t){if(this.i){if(t&&this.F)for(const t of this.A)try{t()}catch(t){l(String(t?.message||t))}if(t){this.tt();let t="";try{t=this.i()}catch(e){String(e?.message||e),t=""}if("string"!=typeof t&&(t=null==t?"":String(t)),t=((t,e)=>{const n={...this.props,...e};return t.replace(m,(t,e)=>{const s=n[e];return null==s?"":String(s)})})(t,this.state),!this.u){const e=`data-scope-owner="${this.C}"`;t=t.replace(/<slot(?![^>]*data-scope-owner)(\s|>)/g,`<slot ${e}$1`)}this.N=!1;const e=null!==this.o&&Object.is(this.o,t);let n=!1;e&&this.F||(this.u,this.p.innerHTML=t,this.o=t,n=!0),this.U?(this.et(),("function"==typeof requestAnimationFrame?requestAnimationFrame:t=>setTimeout(t,0))(()=>{this.i&&this.isConnected&&(n&&!r&&this.projectSlots(),n&&this.nt(),this.st(),this.it())})):(n&&!r&&this.projectSlots(),n&&this.ot(),this.st(),this.it())}else this.N&&this.tt(),this.st(),this.F&&this.it()}}forceRender(){this.o=null,this.i&&this.isConnected?this.U?this.H=!0:this.update(!0):this.H=!0}it(){if(!this.I){this.I=!0;for(const t of this.T)try{t()}catch(t){l(String(t?.message||t))}}for(const t of this._)try{t()}catch(t){l(String(t?.message||t))}this.rt()}rt(){const t=(this.u?this.p:this).querySelectorAll("*"),e=Object.prototype.hasOwnProperty,n=this.state,s=this.props;this.actions;for(let i=0;i<t.length;i++){const o=t[i];if(this.W(o))continue;if(0===o.attributes.length)continue;const r=o.attributes;for(let t=r.length-1;t>=0;t--){const i=r[t];if(!i.name.startsWith("bind:"))continue;const c=i.name.slice(5),h=i.value,f=h?h.trim():"";let l,u=!1;if(f){const t=this.q.get(f);if(t){t.J&&(this.N=!0);try{l=t()}catch{}u=!0}}if(!u){const t=f||c,i=e.call(n,t),o=!i&&e.call(s,t);i?l=n[t]:o&&(l=s[t])}if("text"===c){const t=null==l?"":String(l);o.textContent!==t&&(o.textContent=t)}else if("html"===c){const t=null==l?"":String(l);o.innerHTML!==t&&(o.innerHTML=t)}else if(c in o){if(!Object.is(o[c],l))try{o[c]=l}catch{}if("value"===c)try{null==l?o.removeAttribute("value"):o.setAttribute("value",String(l))}catch{}}else if(null!=l)try{o.setAttribute(c,String(l))}catch{}const a=`__scopeBind_${c}`,d=o[a];if(d){const t=d.ct;t&&o.removeEventListener(t,d),delete o[a]}}}}tt(){for(const t of this.j){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){try{t.value=void 0!==t.deps?t.getter(e):t.getter()}catch(t){l(String(t?.message||t))}e&&(t.prevDeps=e.slice())}}}st(){for(const t of this.S){let e,n=!0;if(void 0!==t.deps)try{const s="function"==typeof t.deps?t.deps():t.deps;if(Array.isArray(s)&&(e=s,t.prevDeps&&t.prevDeps.length===e.length)){n=!1;for(let s=0;s<e.length;s++)if(!Object.is(t.prevDeps[s],e[s])){n=!0;break}}}catch(t){l(String(t?.message||t)),n=!0,e=void 0}if(n){if(t.cleanup){try{t.cleanup()}catch{}t.cleanup=void 0}try{const n=void 0!==t.deps?t.fn(e):t.fn();"function"==typeof n&&(t.cleanup=n)}catch{}e&&(t.prevDeps=e.slice())}}}Z(t){const e=this.S.indexOf(t);if(-1!==e){if(t.cleanup)try{t.cleanup()}catch{}this.S.splice(e,1)}}K(t){const e=t.ht;if(e&&"string"==typeof e)return this.q.set(e,t),e;const n=`__scope_bind_${++this.B}__`;this.q.set(n,t);try{t.ht=n,t.toString=()=>n}catch{}return n}et(){const t=(this.u?this.p:this).querySelectorAll("[ref]"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];if(0!==t.length)for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s)}}nt(){const t=(this.u?this.p:this).querySelectorAll("*");for(let e=0;e<t.length;e++){const n=t[e];if(this.W(n))continue;if(0===n.attributes.length)continue;const s=n.attributes;for(let t=s.length-1;t>=0;t--){const e=s[t];if(!e.name.startsWith("on:"))continue;const i=e.name.slice(3),o=e.value,r=`__tinyHandler_${i}`,c=n[r];c&&n.removeEventListener(i,c),n.removeAttribute(e.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};n[r]=t,n.addEventListener(i,t)}}}}ot(){const t=(this.u?this.p:this).querySelectorAll("*"),e=this.refs;for(const t in e)e.hasOwnProperty(t)&&delete e[t];for(let n=0;n<t.length;n++){const s=t[n];if(this.W(s))continue;const i=s.getAttribute("ref");if(i&&(e[i]?Array.isArray(e[i])?e[i].push(s):e[i]=[e[i],s]:e[i]=s),s.attributes.length>0){const t=s.attributes;for(let e=t.length-1;e>=0;e--){const n=t[e];if(!n.name.startsWith("on:"))continue;const i=n.name.slice(3),o=n.value,r=`__tinyHandler_${i}`,c=s[r];c&&s.removeEventListener(i,c),s.removeAttribute(n.name);const h=this.actions[o];if(h&&"function"==typeof h){const t=t=>{h.call(this.actions,t)};s[r]=t,s.addEventListener(i,t)}}}}}P(){const t=new Map,e=this.childNodes,n=[];for(let t=0;t<e.length;t++)n.push(e[t]);for(let e=0;e<n.length;e++){const s=n[e];let i="";1===s.nodeType&&s.getAttribute&&(i=s.getAttribute("slot")||""),t.has(i)||t.set(i,[]),t.get(i).push(s)}for(let t=0;t<n.length;t++){const e=n[t];e.parentNode&&e.parentNode.removeChild(e)}return t}projectSlots(){const t=this.m||new Map,e=(this.u?this.p:this).querySelectorAll(`slot[data-scope-owner="${this.C}"]`);if(0!==e.length)for(let n=0;n<e.length;n++){const s=e[n],i=s.getAttribute("name")||"",o=t.get(i)||[];if(o.length){const t=document.createDocumentFragment();for(let e=0;e<o.length;e++){const n=o[e];let s;if(1===n.nodeType&&n.tagName.includes("-")&&n.m instanceof Map){const t=n,e=document.createElement(t.tagName.toLowerCase());for(let n=0;n<t.attributes.length;n++){const s=t.attributes[n];e.setAttribute(s.name,s.value)}for(const n of t.m.values())for(let t=0;t<n.length;t++)e.appendChild(n[t].cloneNode(!0));s=e}else s=n.cloneNode(!0);t.appendChild(s)}s.replaceWith(t)}else{const t=s.childNodes,e=[];for(let n=0;n<t.length;n++)e.push(t[n]);if(e.length>0){const t=document.createDocumentFragment();for(let n=0;n<e.length;n++)t.appendChild(e[n]);s.replaceWith(t)}}}}G(t,e,n){const s=`${t}::${e}`;let i=this.L.get(s);if(!i){const n=t=>{const n=t.target&&t.target.closest?t.target.closest(e):null;if(n)for(const e of i.handlers)try{e(t,n)}catch{}};i={eventType:t,selector:e,listener:n,handlers:new Set},this.L.set(s,i),this.p.addEventListener(t,n)}i.handlers.add(n)}X(t,e,n){const s=`${t}::${e}`,i=this.L.get(s);if(i&&(i.handlers.delete(n),0===i.handlers.size)){try{this.p.removeEventListener(t,i.listener)}catch{}this.L.delete(s)}}}if(!customElements.get(t)){if(c&&"undefined"!=typeof document){const e=`scope-${t}-styles`;if(!document.getElementById(e)){const t=document.createElement("style");t.id=e,t.textContent=c,document.head.appendChild(t)}}try{customElements.define(t,u)}catch(t){String(t?.message||t)}}return u},exports.devicePlugin=()=>({name:"device",extend:t=>{const e=new Map;return t.onDestroy(()=>{for(const[t,n]of e)t.removeEventListener("change",n);e.clear()}),{onMediaQuery:(t,n,s={})=>{if("undefined"==typeof window||"undefined"==typeof matchMedia)return()=>{};const{immediate:i=!0}=s,o=matchMedia(t),r=t=>{n(t.matches,t)};return o.addEventListener("change",r),e.set(o,r),i&&n(o.matches,null),()=>{o.removeEventListener("change",r),e.delete(o)}}}}}),exports.happy=()=>{console.info("The website is using @petit-kit/scoped v"+p,"\nhttps://github.com/petit-kit/scoped")},exports.inViewPlugin=()=>({name:"inview",extend:(t,e)=>{const n=new Set,s=(t,e,s={})=>{if("undefined"==typeof window||"undefined"==typeof IntersectionObserver)return()=>{};const{immediate:i=!0,...o}=s;let r=!i;const c=new IntersectionObserver(n=>{for(const s of n)s.target===t&&(r?r=!1:e(s.isIntersecting,s))},o);return c.observe(t),n.add(c),()=>{c.unobserve(t),c.disconnect(),n.delete(c)}};return t.onDestroy(()=>{for(const t of n)t.disconnect();n.clear()}),{onInView:(t,n)=>s(e,t,n),observeInView:(t,e,n)=>s(t,e,n)}}}),exports.lenisPlugin=t=>({name:"lenis",extend:e=>{const n=new Set;return e.onDestroy(()=>{for(const{lenis:t,handler:e}of n)"function"==typeof t.off&&t.off("scroll",e);n.clear()}),{onLenisScroll:e=>{const s=t();if(!s)return()=>{};const i=t=>{e(t)};s.on("scroll",i);const o={lenis:s,handler:i};return n.add(o),()=>{n.has(o)&&(n.delete(o),"function"==typeof s.off&&s.off("scroll",i))}}}}}),exports.lerpPlugin=()=>({name:"lerp",extend:t=>{const{timer:e}=s().extend(t,t.host),n=new Set;return t.onDestroy(()=>{for(const t of n)t();n.clear()}),{createLerp:t=>function({from:t=0,to:e=1,lerp:n=.1,tolerance:s=.001,resumeOnTarget:i=!0}={}){function f(){return c(p)}function l(t){if(y)return f();const e=(t=>t<0?0:t>1?1:t)(n);if(0===e)return f();if(1===e)return p=c(m),a.value=p,y=!0,f();const i=t>0?1-Math.pow(1-e,60*t):0;if(o(p)&&o(m)){let t=!0;for(let e=0;e<p.length;e+=1)p[e]+=(m[e]-p[e])*i,Math.abs(m[e]-p[e])>=s&&(t=!1);if(t){for(let t=0;t<p.length;t+=1)p[t]=m[t];y=!0}return a.value=p,c(p)}if(r(p)&&r(m)){const t=a.objectKeys??Object.keys(p);let e=!0;for(const n of t)p[n]+=(m[n]-p[n])*i,Math.abs(m[n]-p[n])>=s&&(e=!1);if(e){for(const e of t)p[e]=m[e];y=!0}return a.value=p,c(p)}const h=m;return p+=(h-p)*i,a.value=p,Math.abs(h-p)<s&&(p=h,a.value=p,y=!0),p}const a=u({from:t,to:e,label:"Lerp"}),d=a.normalizeInput;let p=a.value,m=a.target,w=null,y=!1;const g=new Set;return{setTarget:function(t){const e=d(t),n=!h(e,m);if(m=e,a.target=e,p=a.value,i&&y&&n){y=!1,w=null;for(const t of g)t(m)}},setValue:function(t,e={}){const{resetTime:n=!0,setTarget:s=!1,markDone:i=!1}=e;p=d(t),a.value=p,s&&(m=c(p),a.target=m);const o=y||!h(p,m);if(n&&(w=null),i&&(y=!0),o&&!i){y=!1,w=null;for(const t of g)t(m)}},getValue:f,isDone:function(){return y},onResume:function(t){return g.add(t),()=>{g.delete(t)}},step:l,next:function(t=performance.now()){if(null==w)return w=t,f();const e=(t-w)/1e3;w=t;const n=1/30;let s=e,i=f();for(;s>0&&!y;){const t=Math.min(s,n);i=l(t),s-=t}return i}}}(t),runLerp:(t,s,i={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=i;let h=!1,f=null;r&&s(t.getValue(),t);const l=()=>{f||(f=e.raf(e=>{if(h)return;const n=t.next(e);s(n,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&s(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),n.delete(d))};return n.add(d),d}}}}),exports.morphPlugin=(t,e={})=>({name:"morph",extend:(n,s)=>{const{ignoreActiveValue:i=!0,callbacks:o}=e,r=t(),c=s,h=c.p,f=c.u?ShadowRoot.prototype:HTMLElement.prototype,l=Object.getOwnPropertyDescriptor(f,"innerHTML"),u=t=>{r.morph(h,t,{morphStyle:"innerHTML",ignoreActiveValue:i,callbacks:o})};let a=!0;return Object.defineProperty(h,"innerHTML",{set(t){a?(l.set.call(this,t),a=!1):u(t)},get(){return l.get.call(this)},configurable:!0}),n.onDestroy(()=>{delete h.innerHTML}),{morph:u}}}),exports.mousePlugin=i,exports.pointerPlugin=()=>({name:"pointer",extend:e=>{const{onMouseMove:n}=i().extend(e,e.host),{timer:o}=s().extend(e,e.host);a.x=window.innerWidth/2,a.y=window.innerHeight/2;const r={x:t({from:a.x,to:a.x,...d}),y:t({from:a.y,to:a.y,...d})};return n((t,e)=>{r.x.setTarget(t),r.y.setTarget(e)}),{onPointerMove:t=>{let e=a.x,n=a.y;o.raf(s=>{const i=r.x.next(s),o=r.y.next(s);var c,h;e===i&&n===o||(t({x:i,y:o,v:(c={x:i,y:o},h={x:e,y:n},{x:c.x-h.x,y:c.y-h.y,magnitude:Math.sqrt((c.x-h.x)*(c.x-h.x)+(c.y-h.y)*(c.y-h.y))}).magnitude}),e=i,n=o)})},onMouseMove:n}}}),exports.springPlugin=()=>({name:"spring",extend:e=>{const{timer:n}=s().extend(e,e.host),i=new Set;return e.onDestroy(()=>{for(const t of i)t();i.clear()}),{createSpring:e=>t(e),runSpring:(t,e,s={})=>{const{fps:o,immediate:r=!0,stopWhenDone:c=!0}=s;let h=!1,f=null;r&&e(t.getValue(),t);const l=()=>{f||(f=n.raf(n=>{if(h)return;const s=t.next(n);e(s,t),c&&t.isDone()&&u()},o))},u=()=>{f&&(f(),f=null)};l();const a=t.onResume(()=>{!h&&c&&(r&&e(t.getValue(),t),l())}),d=()=>{h||(h=!0,a(),u(),i.delete(d))};return i.add(d),d}}}}),exports.timerPlugin=s,exports.windowPlugin=()=>({name:"window",extend:t=>{const e=new Set,n=new Set,s=new Set,i=(t,n={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=n,i=e=>{t(window.innerWidth,window.innerHeight,e)};return window.addEventListener("resize",i),e.add(i),s&&i(new UIEvent("resize")),()=>{window.removeEventListener("resize",i),e.delete(i)}};return t.onDestroy(()=>{if("undefined"!=typeof window){for(const t of e)window.removeEventListener("resize",t);e.clear();for(const t of s)t.disconnect();s.clear();for(const t of n)window.removeEventListener("scroll",t);n.clear()}}),{onViewportResize:i,onWindowResize:(t,e={})=>{if("undefined"==typeof window)return()=>{};if("undefined"==typeof ResizeObserver)return i((e,n,s)=>t(e,n,s),e);const{immediate:n=!0}=e,o=document.documentElement,r=new ResizeObserver(e=>{const n=e[0];if(!n)return;const{width:s,height:i}=n.contentRect;t(s,i,n)});if(r.observe(o),s.add(r),n){const e=o.getBoundingClientRect();t(e.width,e.height,new UIEvent("resize"))}return()=>{r.disconnect(),s.delete(r)}},onWindowScroll:(t,e={})=>{if("undefined"==typeof window)return()=>{};const{immediate:s=!0}=e,i=e=>{t(window.scrollX,window.scrollY,e)};return window.addEventListener("scroll",i,{passive:!0}),n.add(i),s&&i(new Event("scroll")),()=>{window.removeEventListener("scroll",i),n.delete(i)}}}}});
2
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}