docs: sync installation version and README

.changeset/popular-emus-lay.md

@@ -0,0 +1,20 @@
+---
+'@svelte-put/preprocess-external-link': patch
+'@svelte-put/cloudflare-turnstile': patch
+'@svelte-put/preprocess-auto-slug': patch
+'@svelte-put/clickoutside': patch
+'@svelte-put/dragscroll': patch
+'@svelte-put/inline-svg': patch
+'@svelte-put/lockscroll': patch
+'@svelte-put/intersect': patch
+'@svelte-put/shortcut': patch
+'@svelte-put/movable': patch
+'@svelte-put/avatar': patch
+'@svelte-put/resize': patch
+'@svelte-put/copy': patch
+'@svelte-put/noti': patch
+'@svelte-put/toc': patch
+'@svelte-put/qr': patch
+---
+
+sync README.md and installation version in docs page

README.md

@@ -31,6 +31,7 @@ Useful svelte stuff to put in your projects
 | [@svelte-put/movable][github.movable]                             | move node on mousedown                            | [![npm.movable.badge]][npm.movable]                             | [Changelog][github.movable.changelog]               | [![docs.badge]][docs.movable]               |
 | [@svelte-put/noti][github.noti]                                   | type-safe & headless async notification builder   | [![npm.noti.badge]][npm.noti]                                   | [Changelog][github.noti.changelog]                  | [![docs.badge]][docs.noti]                  |
 | [@svelte-put/preprocess-auto-slug][github.preprocess-auto-slug]   | auto add `id` and anchor to selected nodes        | [![npm.preprocess-auto-slug.badge]][npm.preprocess-auto-slug]   | [Changelog][github.preprocess-auto-slug.changelog]  | [![docs.badge]][docs.preprocess-auto-slug]  |
+| [@svelte-put/preprocess-external-link][github.preprocess-external-link]   | auto add `id` and anchor to selected nodes        | [![npm.preprocess-external-link.badge]][npm.preprocess-external-link]   | [Changelog][github.preprocess-external-link.changelog]  | [![docs.badge]][docs.preprocess-external-link]  |
 | [@svelte-put/qr][github.qr]                                       | render QR as `img` or `svg`                       | [![npm.qr.badge]][npm.qr]                                       | [Changelog][github.qr.changelog]                    | [![docs.badge]][docs.qr]                    |
 | [@svelte-put/resize][github.resize]                               | wrapper for ResizeObserver                        | [![npm.resize.badge]][npm.resize]                               | [Changelog][github.resize.changelog]                | [![docs.badge]][docs.resize]                |
 | [@svelte-put/shortcut][github.shortcut]                           | add keyboard shortcuts to node                    | [![npm.shortcut.badge]][npm.shortcut]                           | [Changelog][github.shortcut.changelog]              | [![docs.badge]][docs.shortcut]              |
@@ -82,8 +83,10 @@ pnpm turbo
 [github.movable.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/movable/CHANGELOG.md
 [github.noti]: https://github.com/vnphanquang/svelte-put/tree/main/packages/noti
 [github.noti.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/noti/CHANGELOG.md
-[github.preprocess-auto-slug]: https://github.com/vnphanquang/svelte-put/tree/main/packages/auto-slug
-[github.preprocess-auto-slug.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/auto-slug/CHANGELOG.md
+[github.preprocess-auto-slug]: https://github.com/vnphanquang/svelte-put/tree/main/packages/preprocess-auto-slug
+[github.preprocess-auto-slug.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/preprocess-auto-slug/CHANGELOG.md
+[github.preprocess-external-link]: https://github.com/vnphanquang/svelte-put/tree/main/packages/preprocess-external-link
+[github.preprocess-external-link.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/preprocess-external-link/CHANGELOG.md
 [github.qr]: https://github.com/vnphanquang/svelte-put/tree/main/packages/qr
 [github.qr.changelog]: https://github.com/vnphanquang/svelte-put/blob/main/packages/qr/CHANGELOG.md
 [github.resize]: https://github.com/vnphanquang/svelte-put/tree/main/packages/resize
@@ -126,6 +129,8 @@ pnpm turbo
 [npm.noti]: https://www.npmjs.com/package/@svelte-put/noti
 [npm.preprocess-auto-slug.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-auto-slug
 [npm.preprocess-auto-slug]: https://www.npmjs.com/package/@svelte-put/preprocess-auto-slug
+[npm.preprocess-external-link.badge]: https://img.shields.io/npm/v/@svelte-put/preprocess-external-link
+[npm.preprocess-external-link]: https://www.npmjs.com/package/@svelte-put/preprocess-external-link
 [npm.qr.badge]: https://img.shields.io/npm/v/@svelte-put/qr
 [npm.qr]: https://www.npmjs.com/package/@svelte-put/qr
 [npm.resize.badge]: https://img.shields.io/npm/v/@svelte-put/resize
@@ -155,6 +160,7 @@ pnpm turbo
 [docs.movable]: https://svelte-put.vnphanquang.com/docs/movable
 [docs.noti]: https://svelte-put.vnphanquang.com/docs/noti
 [docs.preprocess-auto-slug]: https://svelte-put.vnphanquang.com/docs/preprocess-auto-slug
+[docs.preprocess-external-link]: https://svelte-put.vnphanquang.com/docs/preprocess-external-link
 [docs.qr]: https://svelte-put.vnphanquang.com/docs/qr
 [docs.resize]: https://svelte-put.vnphanquang.com/docs/resize
 [docs.shortcut]: https://svelte-put.vnphanquang.com/docs/shortcut

packages/avatar/README.md

@@ -4,7 +4,7 @@
 
 [![npm.badge]][npm] [![bundlephobia.badge]][bundlephobia] [![docs.badge]][docs] [![repl.badge]][repl]
 
-Svelte `Avatar` component and utilities for building avatars with builtin supports [Gravatar] and [UI Avatar][uiavatar].
+Svelte `Avatar` component and utilities for building avatars with builtin supports for [Gravatar] and [UI Avatar][uiavatar].
 
 </div>
 
@@ -19,20 +19,17 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 ## Quick Start
 
 ```html
-<script lang="ts">
-	import Avatar from '@svelte-put/avatar/Avatar.svelte';
+<script>
+  import Avatar from '@svelte-put/avatar/Avatar.svelte';
 
-	export let id: string;
-	export let email = '';
-	export let firstName = '';
-	export let lastName = '';
+  let { id, email, firstName, lastName } = $props();
 </script>
 
 <Avatar
-	src="https://your.api/avatar/{id}"
-	gravatar="{email}"
-	uiAvatar="{firstName}+{lastName}"
-	fallback="https://your.api/avatar/default"
+  src="https://your.api/avatar/{id}"
+  gravatar="{email}"
+  uiAvatar="{firstName}+{lastName}"
+  fallback="https://your.api/avatar/default"
 />
 ```
 

packages/clickoutside/README.md

@@ -22,11 +22,11 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script lang="ts">
-	import { clickoutside } from '@svelte-put/clickoutside';
+  import { clickoutside } from '@svelte-put/clickoutside';
 
-	function doSomething(e: CustomEvent<MouseEvent>) {
-		console.log(e.target);
-	}
+  function doSomething(e: CustomEvent<MouseEvent>) {
+    console.log(e.target);
+  }
 </script>
 
 <div use:clickoutside onclickoutside="{doSomething}" />

packages/cloudflare-turnstile/README.md

@@ -20,16 +20,16 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <!-- component.svelte -->
-<script lang="ts">
-	import { turnstile } from '@svelte-put/cloudflare-turnstile';
+<script>
+  import { turnstile } from '@svelte-put/cloudflare-turnstile';
 </script>
 
 <div
-	use:turnstile
-	turnstile-sitekey="1x00000000000000000000AA"
-	turnstile-theme="dark"
-	turnstile-size="normal"
-/>
+  use:turnstile
+  turnstile-sitekey="1x00000000000000000000AA"
+  turnstile-theme="dark"
+  turnstile-size="normal"
+></div>
 ```
 
 ## [Changelog][github.changelog]

packages/copy/README.md

@@ -20,14 +20,14 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script lang="ts">
-	import { copy, type CopyDetail } from '@svelte-put/copy';
+  import { copy, type CopyDetail } from '@svelte-put/copy';
 
-	function handleCopied(e: CustomEvent<CopyDetail>) {
-		console.log('Text copied:', e.detail.text);
-	}
+  function handleCopied(e: CustomEvent<CopyDetail>) {
+    console.log('Text copied:', e.detail.text);
+  }
 </script>
 
-<button type="button" use:copy on:copied="{handleCopied}">Click to copy this</button>
+<button type="button" use:copy oncopied={handleCopied}>Click to copy this</button>
 ```
 
 ## [Changelog][github.changelog]

packages/dragscroll/README.md

@@ -20,7 +20,7 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script>
-	import { dragscroll } from '@svelte-put/dragscroll';
+  import { dragscroll } from '@svelte-put/dragscroll';
 </script>
 
 <div use:dragscroll>...</div>

packages/intersect/README.md

@@ -22,16 +22,17 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script lang="ts">
-	import { intersect, type IntersectDetail } from '@svelte-put/intersect';
-	function onIntersect(e: CustomEvent<IntersectDetail>) {
-		const { observer, entries, direction } = e.detail;
-		console.log('the observer itself', observer);
-		console.log('scrolling direction:', direction);
-		console.log('intersecting:', entries[0]?.isIntersecting ? 'entering' : 'leaving');
-	}
+  import { intersect, type IntersectDetail } from '@svelte-put/intersect';
+
+  function onIntersect(e: CustomEvent<IntersectDetail>) {
+    const { observer, entries, direction } = e.detail;
+    console.log('the observer itself', observer);
+    console.log('scrolling direction:', direction);
+    console.log('intersecting:', entries[0]?.isIntersecting ? 'entering' : 'leaving');
+  }
 </script>
 
-<div use:intersect on:intersect="{onIntersect}" on:intersectonce />
+<div use:intersect onintersect={onIntersect} onintersectonce></div>
 ```
 
 ## [Changelog][github.changelog]

packages/lockscroll/README.md

@@ -19,15 +19,15 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 ## Quick Start
 
 ```html
-<script lang="ts">
-	import { lockscroll, createLockScrollStore } from '@svelte-put/lockscroll';
+<script>
+  import { lockscroll } from '@svelte-put/lockscroll';
 
-	const locked = createLockScrollStore();
-	// ... later
-	locked.toggle();
+  let locked = $state(false);
 </script>
 
-<svelte:body use:lockscroll="{locked}" />
+<svelte:body use:lockscroll={locked} />
+
+<button onclick={() => locked = !locked}>Toggle lock scroll on body</button>
 ```
 
 ## [Changelog][github.changelog]

packages/movable/README.md

@@ -22,7 +22,7 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script lang="ts">
-	import { movable } from '@svelte-put/movable';
+  import { movable } from '@svelte-put/movable';
 </script>
 
 <div class="h-20 w-20" use:movable>...</div>

packages/noti/README.md

@@ -20,48 +20,54 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ```html
 <script lang="ts">
-	import { store, portal } from '@svelte-put/noti';
-
-	// any Svelte component to render as notification
-	import Notification from './Notification.svelte';
-
-	// define somewhere global, reuse across app
-	export const notiStore = store()
-		// add a minimalistic variant config
-		.variant('info', Notification)
-		// add a verbose variant config
-		.variant('special', {
-			timeout: false,
-			id: 'counter',
-			component: Notification,
-			props: {
-				// inferred from Notification component
-				special: true,
-				content: 'A very special notification',
-			},
-		})
-		// build the actual NotificationStore
-		.build();
-
-	onMount(async () => {
-		// push a special notification
-		const pushed = notiStore.push('special');
-
-		// wait for some user action to resolve (pop) the notification
-		const { userAction } = await pushed.resolve();
-
-		// push another notification with custom props
-		notiStore.push('info', {
-			props: {
-				content: 'An example information',
-			},
-		});
-	});
+  import { controller } from '@svelte-put/noti';
+
+  // any Svelte component to render as notification
+  import Notification from './Notification.svelte';
+
+  // define somewhere global, reuse across app
+  export const notiCtrl = controller()
+    // add a minimalistic variant config
+    .addVariant('info', Notification)
+    // add a verbose variant config
+    .addVariant('special', {
+      timeout: false,
+      id: 'counter',
+      component: Notification,
+      props: {
+        // inferred from Notification component
+        special: true,
+        content: 'A very special notification',
+      },
+    })
+    // build the actual NotificationController
+    .build();
+
+  onMount(async () => {
+    // push a special notification
+    const pushed = notiStore.push('special');
+
+    // wait for some user action for the notification
+    // to be resolved (popped) from within the component
+    const { userAction } = await pushed.resolution;
+
+    // push another notification with custom props
+    notiStore.push('info', {
+      props: {
+        content: 'An example information',
+      },
+    });
+  });
 </script>
 
-<div use:portal="{notiStore}">
-	<!-- notification instances rendered as direct children -->
-</div>
+<!-- notification portal, typically setup at somewhere global like root layout -->
+<aside class="applicable class">
+  {#each notiCtrl.notifications as notification (notification.config.id)}
+    <div use:notiCtrl.actions.render={notification}>
+      <!-- notification instances rendered as direct children -->
+    </div>
+  {/each}
+</aside>
 ```
 
 ## [Changelog][github.changelog]

packages/preprocess-auto-slug/README.md

@@ -19,27 +19,27 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 ## Quick Start
 
 ```html
-<!-- input -->
+<!-- input.svelte -->
 <h2>Quick start</h2>
 ```
 
 ```javascript
-// config
+// svelte.config.js
 import autoSlug from '@svelte-put/preprocess-auto-slug';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	preprocess: [autoSlug()],
+  preprocess: [autoSlug()],
 };
 
 export default config;
 ```
 
 ```html
-<!-- output -->
+<!-- output.html -->
 <h2 id="quick-start">
-	<a href="#quick-start" aria-hidden="true" tabindex="-1">#</a>
-	Quick Start
+  <a href="#quick-start" aria-hidden="true" tabindex="-1">#</a>
+  Quick Start
 </h2>
 ```
 

packages/preprocess-external-link/README.md

@@ -18,9 +18,10 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 
 ## Quick Start
 
-Given this `svelte.config.js`
+Given this `svelte.config.js`...
 
 ```javascript
+// svelte.config.js
 import externalLink from '@svelte-put/preprocess-external-link';
 
 /** @type {import('@sveltejs/kit').Config} */
@@ -33,9 +34,10 @@ const config = {
 export default config;
 ```
 
-and the following input markup
+..the following input markup...
 
-```svelte
+```html
+<!-- input.svelte -->
 <script>
   let href = 'https://developer.mozilla.org';
 </script>
@@ -50,9 +52,11 @@ and the following input markup
 <a {href} data-external>Svelte</a>
 ```
 
-will output
+...will output
 
 ```html
+<!-- output.html -->
+
 <!-- links that are treated as internal -->
 <a href="/internal-path">Internal Path</a>
 <a href="https//your-domain.com/some-path">Internal Path</a>