Merge branch 'main' into db

Author: teemingc

.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/.gitignore

@@ -14,3 +14,5 @@
 
 # TODO remove this after https://github.com/sveltejs/kit/pull/12718 is merged
 /content/docs/kit/50-reference
+.vercel
+.env*.local

apps/svelte.dev/content/blog/2017-09-06-the-zen-of-just-writing-css.md

@@ -17,7 +17,7 @@ This article isn't in any way intended as criticism of the hard work the CSS-in-
 
 Everything in CSS is global. Because of that, styles intended for one bit of markup often end up affecting another. Because of _that_, developers often resort to wild namespacing conventions (not 'rules', since they're very difficult to enforce) that mostly just increase your risk of RSI.
 
-It gets worse when you're working on a team. No-one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
+It gets worse when you're working on a team. No one dares touch styles authored by someone else, because it's often unclear what they're doing, what markup they apply to, and what disasters will unfold if you remove them.
 
 The consequence of all this is the **append-only stylesheet**. There's no way of knowing which code can safely be removed, so it's common to undo some existing style with another, more specific style — even on relatively small projects.
 

apps/svelte.dev/content/blog/2018-12-27-virtual-dom-is-pure-overhead.md

@@ -42,7 +42,7 @@ Misunderstood claims about virtual DOM performance date back to the launch of Re
 	<figcaption>Screenshot from <a href="https://www.youtube.com/watch?v=x7cQ3mrcKaY">Rethinking Best Practices</a> at JSConfEU 2013</figcaption>
 </figure>
 
-But hang on a minute! The virtual DOM operations are _in addition to_ the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no-one actually does:
+But hang on a minute! The virtual DOM operations are _in addition to_ the eventual operations on the real DOM. The only way it could be faster is if we were comparing it to a less efficient framework (there were plenty to go around back in 2013!), or arguing against a straw man — that the alternative is to do something no one actually does:
 
 ```js
 // @noErrors

apps/svelte.dev/content/blog/2023-03-09-zero-config-type-safety.md

@@ -98,7 +98,7 @@ export type PageData = Kit.ReturnType<
 >;
 ```
 
-We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no-one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
+We don't actually write `$types.d.ts` into your `src` directory — that would be messy, and no one likes messy code. Instead, we use a TypeScript feature called [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs), which lets us map ‘virtual’ directories to real ones. By setting `rootDirs` to the project root (the default) and additionally to `.svelte-kit/types` (the output folder of all the generated types) and then mirroring the route structure inside it we get the desired behavior:
 
 ```tree
 // on disk:

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 👋🏼!