Merge branch 'main' into feat-622

Author: 7nik

.github/workflows/docs-preview-create.yml

@@ -39,15 +39,18 @@ jobs:
       - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_TOKEN }}
+          ref: main # Explicitly checkout main branch first
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
       - run: pnpm install --frozen-lockfile
 
-      - name: Checkout
-        run: git fetch origin ${{ env.BRANCH }} && git checkout ${{ env.BRANCH }} || git checkout -b ${{ env.BRANCH }}
+      - name: Create or reset branch from main
+        run: |
+          git fetch origin
+          git checkout -B ${{ env.BRANCH }} # Force create/reset branch based on current main
 
       - name: Sync
         run: cd apps/svelte.dev && pnpm sync-docs --owner="${{ inputs.owner }}" -p "${{ inputs.repo }}#${{ inputs.branch }}"
@@ -59,7 +62,7 @@ jobs:
 
       - name: Push
         id: push
-        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }}
+        run: git add -A && git commit -m "sync docs" && git push -u origin ${{ env.BRANCH }} --force
 
       - name: Request preview comment
         uses: peter-evans/repository-dispatch@v3

apps/svelte.dev/content/blog/2025-05-01-whats-new-in-svelte-may-2025.md

@@ -0,0 +1,74 @@
+---
+title: "What's new in Svelte: May 2025"
+description: 'Svelte Summit soon! Plus, await in components'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Only a week until [Svelte Summit Spring 2025](https://www.sveltesummit.com/)! If you can't make it in-person to Barcelona, you can purchase a virtual ticket [here](https://www.sveltesummit.com/virtual-ticket).
+
+But before that, we've got a few updates to highlight...
+
+## What's new in Svelte and SvelteKit
+
+The Svelte maintainers have been hard at work building out [Asynchronous Svelte](https://github.com/sveltejs/svelte/discussions/15845) this month, but still found the time to ship some helpful features. If you're interested in trying out the async branch, or just want to follow along with the development, check out [feat: allow await in components #15844](https://github.com/sveltejs/svelte/pull/15844)
+
+- Certain expressions will now be partially evaluated to improve runtime performance (**[email protected]/5.28.0**, [#15494](https://github.com/sveltejs/svelte/pull/15494)/[#15781](https://github.com/sveltejs/svelte/pull/15781))
+- The Svelte CLI (`sv`) has added a `--install <package-manager>` flag to `create` and `add` to specify which package manager to use when running (**[email protected]**, [#531](https://github.com/sveltejs/cli/pull/531))
+- The two separate CloudFlare adapters have been merged into one: `adapter-cloudflare` (**[email protected]**, [#13634](https://github.com/sveltejs/kit/pull/13634))
+- `adapter-vercel` will now create symlink functions for each route, for better observability (**[email protected]**, [#13679](https://github.com/sveltejs/kit/pull/13679))
+
+There were a number of fixes in SvelteKit too - including an improvement to the `HandleServerError` hook to give it access to `getRequestEvent`! ([#13666](https://github.com/sveltejs/kit/pull/13666))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages). Interested in all the new fixes in language tools? You can find them [here](https://github.com/sveltejs/language-tools/releases).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [TableSlayer](https://github.com/siege-perilous/tableslayer) is an open source software for managing in person RPG games with digital displays (check out the video demo on [Reddit](https://www.reddit.com/r/sveltejs/comments/1jnco5h/built_with_svelte_my_open_source_software_for/))
+- [Iconia](https://iconia.dev/) is a free tool that understands natural language and responds with relevant icons from famous icon libraries
+- [CMSDocs](https://cmsdocs.com/) transforms your Google Docs into Blog CMS
+- [Svelte Changelog v2](https://svelte-changelog.dev/) is out now and is a reimagined way of staying up to date on all the new changes in the Svelte ecosystem
+- [Hookah UI](https://github.com/AdamShannag/hookah-ui) is a visual configuration builder for the Hookah project
+- [mockiapi](https://github.com/sfeSantos/mockiapi) is a mock API server that allows you to define endpoints, return custom JSON responses, and simulate real-world API behavior
+- [soarSQL](https://soarsql.com/) is an SQL editor made for analytical processing on Postgres, MySQL, and CSVs - powered by duckDB
+- [Persona Simulator](https://personasim.fow.sh/) helps you practice your communication skills by chatting with different personas
+- [Typo](https://typo.robino.dev/) is a web-based markdown editor with formatting in codeblocks and typescript execution
+- [FernOS](https://github.com/mrtechtroid/fernos) is a lightweight operating system running inside your browser
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [SvelteKit is the best way to build single page apps - and it just got even better!](https://www.youtube.com/watch?v=vCMTxL1jWbw) by Stanislav Khromov (Video)
+- [Svelte London - April 2025](https://www.youtube.com/watch?v=7m6HExTKAqM)
+  - Building cross-platform browser extensions with Svelte by Oliver Turner ([10:52](https://www.youtube.com/live/7m6HExTKAqM?si=tWUKbSm2IuhO0N_r&t=652))
+  - Kioko: Coding CAD by Armel de Montgros and Soloman Azizi ([43:00](https://www.youtube.com/live/7m6HExTKAqM?si=EOmS3Hy-AwIgrBTU&t=2613))
+
+_This Week in Svelte_
+
+- [Ep. 100](https://www.youtube.com/watch?v=BGNykPO4L7c) — Q&A with Rich Harris
+- [Ep. 101](https://www.youtube.com/watch?v=yp4330KsYcU) — Changelog
+
+_To Read_
+
+- Graphite - an open source 2D procedural graphics editor built with Svelte - has released a [product update blog post](https://graphite.rs/blog/graphite-progress-report-q4-2024/)
+- [Cloudflare Workers & SvelteKit: BetterAuth, Custom Domain, Google OAuth, OTP & Email - Securing Your Application](https://jilles.me/cloudflare-workers-sveltekit-betterauth-custom-domain-google-oauth-otp-email-securing-your-application/) by Jilles Soeters
+- [Building a Real-time Dashboard with Flask and Svelte](https://testdriven.io/blog/flask-svelte/) by Amir Tadrisi
+- [Copying Nuxt's useState in Qwik and Svelte](https://dev.to/jdgamble555/copying-nuxts-usestate-in-qwik-and-svelte-5eo3) by Jonathan Gamble
+
+### Libraries, Tools & Components
+
+- [diaper](https://github.com/devantic/diaper) is an advanced bottom sheet component for Svelte 5
+- [mcp-svelte-docs](https://github.com/spences10/mcp-svelte-docs) is an MCP server that lets you search and access Svelte documentation with built-in caching
+- [Version 4 of Anime.js](https://animejs.com/) - a popular JS animation library - has been released
+- [DeepWiki](https://deepwiki.com/sveltejs/svelte) has created a comprehensive introduction to the Svelte framework repository
+- [Vite Static Assets Plugin](https://www.npmjs.com/package/vite-static-assets-plugin) is a Vite plugin that automatically scans your static assets directory, generates a type-safe TypeScript module with all asset paths to help during build or development time
+- [Mode Watcher v1](https://github.com/svecosystem/mode-watcher) provides simple light/dark mode management, now rewritten with first-class Svelte 5 support
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

apps/svelte.dev/content/blog/2025-05-21-svelte-summit-videos.md

@@ -0,0 +1,16 @@
+---
+title: 'Bringing Svelte Summit to the whole community'
+description: We're sponsoring the release of talks from Barcelona, starting this weekend
+author: The Svelte team
+authorURL: https://bsky.app/profile/svelte.dev
+---
+
+This month's [Svelte Summit](https://www.sveltesummit.com/) in Barcelona was a glorious celebration of the community. We had lively conversations, delightful dinners, and funny, imaginative and thought-provoking talks.
+
+For everyone who couldn't make it there in person, the conference also sold virtual tickets to the livestream, which give on-demand access to the talks. These ticket sales make it possible to (for example) hire AV technicians and ensure that the stream is reliable and high-quality. Running a conference is extremely difficult and time-consuming, and we're very grateful to [Svelte Society](https://bsky.app/profile/sveltesociety.dev) ([Kevin](https://bsky.app/profile/kevinak.se) in particular), [Mainmatter](https://mainmatter.com/), and everyone who bought a ticket for making the event a reality.
+
+But we've heard from many of you that the talks should be freely available so that they can be shared with the widest possible audience and... we agree!
+
+So the Svelte team has decided to sponsor the release of the talks, beginning this weekend. We're able to do this because of the generous financial support so many of you have given us via [opencollective.com/svelte](https://opencollective.com/svelte), which also funds important development work on the project.
+
+Subscribe to the [Svelte Society YouTube account](https://www.youtube.com/sveltesociety) to be the first to know when the videos are released.

apps/svelte.dev/content/blog/2025-06-01-whats-new-in-svelte-june-2025.md

@@ -0,0 +1,81 @@
+---
+title: "What's new in Svelte: June 2025"
+description: 'Attachments are the new actions, plus better snippets and classes'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments.
+
+This month, we'll share a bit about the new API along with a huge showcase of apps/sites built with Svelte...
+
+Let's dive in!
+
+## What's new in Svelte and SvelteKit
+
+- Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR ([#1500](https://github.com/sveltejs/svelte/pull/15000)) or in the [Svelte docs](https://svelte.dev/docs/svelte/@attach) (**[email protected]**, **[email protected]**)
+- Do you have actions you love and want to use them as attachments? The `fromAction` utility lets you convert actions into attachments (**[email protected]**, [#15933](https://github.com/sveltejs/svelte/pull/15933))
+- Generics are now allowed on snippets - improving typing and type hints (**[email protected]**, **[email protected]**, [#15915](https://github.com/sveltejs/svelte/pull/15915))
+- The Svelte extension will now allow you to add missing imports on save (**[email protected]**, [#2744](https://github.com/sveltejs/language-tools/pull/2744))
+- State fields can now be declared inside class constructors (**[email protected]**, [#15820](https://github.com/sveltejs/svelte/pull/15820))
+- Svelte is now XHTML compliant and the new `fragments: 'html' | 'tree'` option adds wider CSP compliance (**[email protected]**, [#15538](https://github.com/sveltejs/svelte/pull/15538))
+- Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (**[email protected]**, [#13684](https://github.com/sveltejs/kit/pull/13684))
+
+For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages).
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Whimsy](https://whimsy.rocks/) is a small game engine and a fantasy console for making interactive stories
+- [DASHBOT](https://dashbot.jianong.me/) is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes
+- [Kraa](https://kraa.io/) is a web-based markdown editor that does things a little differently
+- [Shovel AI](https://www.shovel-ai.com/) is a batch tool for interacting with large amounts of a text data with AI models
+- [md.uy](https://md.uy/) is a collaborative, local-first, peer-to-peer markdown editor
+- [BringYourAI](https://bringyourai.com/) is a browser extension that provides instant codebase context on any AI chat website
+- [Joe Malatesta](https://www.joemmalatesta.com/film) figured out a way to present his film photos in a digital environment
+- [Notion Avatar](https://notion-avatar-svelte.vercel.app/) is a Notion-style avatar editor with Svelte 5 Runes
+- [ORBITS](https://www.orbits.so/) is your second brain for who you know and who you meet
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- In case you missed it, [all the videos from Svelte Summit](https://www.youtube.com/playlist?list=PL8bMgX1kyZThKy_B41FQHk_xsHMQouV1Z) are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month's [blog post](https://svelte.dev/blog/svelte-summit-videos)
+- [Svelte Attachments Are Here And They're Awesome](https://www.youtube.com/watch?v=9PREEREiPAE) by Joy of Code
+- [SvelteBench](https://khromov.github.io/svelte-bench/benchmark-results-merged.html) (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic's new Claude 4 models
+- [First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works!](https://www.youtube.com/watch?v=FRcOen6JuJc) by Stanislav Khromov (video)
+- [Truly Native Apps with Svelte?](https://mainmatter.com/blog/2025/05/22/native-apps-with-svelte/) by Paolo Ricciuti
+
+_This Week in Svelte_
+
+- [Ep. 102](https://www.youtube.com/watch?v=frp8BXlBAZY) — Svelte+Lynx and Async Svelte
+- [Ep. 103](https://www.youtube.com/watch?v=P3Ldkuksqu0) — Attachments
+- [Ep. 104](https://www.youtube.com/watch?v=txM-BCrZcbc) — Skeleton v3.0
+- [Ep. 105](https://www.youtube.com/watch?v=Tiq0wivUNAE) — Changelog
+
+_To Watch/Read_
+
+- [Svelte's Next Big Change? (server components soon?)](https://www.youtube.com/watch?v=nQB9iRijqBY) by Better Stack
+- [I spent some time using Better-Auth and Polar with SvelteKit and this is what I think](https://www.reddit.com/r/sveltejs/comments/1kaiwkk/i_spent_some_time_using_betterauth_and_polar_with/) by elansx
+- [Building md.uy - Peer-to-Peer Markdown Editor](https://mr19.xyz/blog/md-uy/) by mateor
+
+### Libraries, Tools & Components
+
+- [Bits UI v2 released](https://www.bits-ui.com) - with support for attachments, `$props.id()`, Shadow DOM, and more
+- [Composably](https://github.com/kompismoln/composably) is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time
+- [Svelte Flow is now 1.0](https://svelteflow.dev/) - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better
+- [fox ui](https://flo-bit.dev/ui-kit/) is a collection UI components built with Tailwind 4 and Svelte 5 - now with a [rich text editor](https://www.reddit.com/r/sveltejs/comments/1kjwuci/currently_building_a_svelte_rich_text_editor_on/)
+- [fluid-dnd](https://github.com/carlosjorger/fluid-dnd) is a drag and drop library for Vue, React and Svelte
+- [sveltekit-password-protect](https://github.com/humanshield-sidepack/sveltekit-password-protect) is a simple utility to add a layer of protection to your websites
+- [sveltekit-image-optimize](https://github.com/humanshield-sidepack/sveltekit-image-optimize) is a simple utility that helps you create an endpoint of your svelte app that optimizes your images
+- [[email protected] introduces Panels](https://inspect.eirik.space/reference/panel) - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website
+- [nuqs-svelte](https://github.com/rtrampox/nuqs-svelte) is an unnoficial Svelte port of nuqs library - a type-safe search params state manager
+- [sv-router](https://sv-router.vercel.app/) is a type-safe SPA router with file-based or code-based routing
+- [svelte-textcircle](https://github.com/LoStis-World/svelte-textcircle) displays text in a circular layout with customizable animations and styling
+
+That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte).
+
+Until next time 👋🏼!

apps/svelte.dev/content/docs/cli/20-commands/20-sv-add.md

@@ -26,16 +26,17 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 
 ## Official add-ons
 
-<!-- TODO this should be a separate section, each of these should have their own page -->
-
-- `drizzle`
-- `eslint`
-- `sveltekit-adapter`
-- `lucia`
-- `mdsvex`
-- `paraglide`
-- `playwright`
-- `prettier`
-- `storybook`
-- `tailwindcss`
-- `vitest`
+<!-- TODO: it'd be nice for this to live on the "add-ons" page, but we first need svelte.dev to support making pages from headings -->
+
+- [`drizzle`](drizzle)
+- [`eslint`](eslint)
+- [`lucia`](lucia)
+- [`mdsvex`](mdsvex)
+- [`paraglide`](paraglide)
+- [`playwright`](playwright)
+- [`prettier`](prettier)
+- [`storybook`](storybook)
+- [`sveltekit-adapter`](sveltekit-adapter)
+- [`tailwindcss`](tailwind)
+- [`vitest`](vitest)
+- [`devtools-json`](devtools-json)

apps/svelte.dev/content/docs/cli/30-add-ons/03-devtools-json.md

@@ -0,0 +1,40 @@
+---
+NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
+title: devtools-json
+---
+
+The `devtools-json` add-on installs [`vite-plugin-devtools-json`](https://github.com/ChromeDevTools/vite-plugin-devtools-json/), which is a Vite plugin for generating a Chromium DevTools project settings file on-the-fly in the development server. This file is served from `/.well-known/appspecific/com.chrome.devtools.json` and tells Chromium browsers where your project's source code lives so that you can use [the workspaces feature](https://developer.chrome.com/docs/devtools/workspaces) to edit source files in the browser.
+
+> [!NOTE]
+> Installing the plugin enables the feature for all users connecting to the dev server with a Chromium browser, and allows the browser to read and write all files within the directory. If using Chrome's AI Assistance feature, this may also result in data being sent to Google.
+
+## Alternatives
+
+If you'd prefer not to install the plugin, but still want to avoid seeing a message about the missing file, you have a couple of options.
+
+Firstly, you can prevent the request from being issued on your machine by disabling the feature in your browser. You can do this in Chrome by visiting `chrome://flags` and disabling the "DevTools Project Settings". You may also be interested in disabling "DevTools Automatic Workspace Folders" since it’s closely related.
+
+You can also prevent the web server from issuing a notice regarding the incoming request for all developers of your application by handling the request yourself. For example, you can create a file named `.well-known/appspecific/com.chrome.devtools.json` with the contents `"Go away, Chrome DevTools!"` or you can add logic to respond to the request in your [`handle`](https://svelte.dev/docs/kit/hooks#Server-hooks-handle) hook:
+
+```js
+/// file: src/hooks.server.js
+import { dev } from '$app/environment';
+
+export function handle({ event, resolve }) {
+	if (dev && event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json') {
+		return new Response(undefined, { status: 404 });
+	}
+
+	return resolve(event);
+}
+```
+
+## Usage
+
+```bash
+npx sv add devtools-json
+```
+
+## What you get
+
+- `vite-plugin-devtools-json` added to your Vite plugin options