Merge branch 'main' into issue-1283

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/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-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/blog/2025-07-01-whats-new-in-svelte-july-2025.md

@@ -0,0 +1,77 @@
+---
+title: "What's new in Svelte: July 2025"
+description: 'Vite 7 and Rolldown support, better traces and vitest browser mode support'
+author: Dani Sandoval
+authorURL: https://dreamindani.com
+---
+
+Whether you're trying out Vite 7, vitest browser mode or [remote functions](https://github.com/sveltejs/kit/discussions/13897), there's lots of experimental features to try this month.
+
+Want some Svelte swag while you're chatting on Discord? With the new `sv ⚡` [server tag](https://support.discord.com/hc/en-us/articles/31444248479639-Server-Tags#h_01JT6VKRACHQADX7EBXR84QTAQ), you do just that. While signed into Discord, you can adopt our tag via profile settings.
+
+There's a bunch to cover, from blog posts to new libraries, so let's dive in...
+
+## What's new in Svelte and SvelteKit
+
+- `$inspect.trace` now includes source name logging to make it easy to find which file the log came from (**[email protected]**, [Docs](<https://svelte.dev/docs/svelte/$inspect#$inspect.trace()>), #[16060](https://github.com/sveltejs/svelte/pull/16060))
+- The latest version of SvelteKit now supports Vite 7 and Rolldown. Compilation should be faster using Rolldown, but with larger bundle sizes until additional tree-shaking is implemented in Rolldown (**[email protected]**, [Docs](https://vite.dev/guide/rolldown.html#how-to-try-rolldown), [#13747](https://github.com/sveltejs/kit/pull/13747))
+
+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).
+
+## What's new in the CLI and Language Tools
+
+- The `sv` CLI now supports Vite's browser mode in Vitest - allowing you to run your tests in the browser natively (**[email protected]**, [Docs](https://vitest.dev/guide/browser/), [#588](https://github.com/sveltejs/cli/pull/588))
+- The language server now makes it easier to search for symbol names (`Ctrl + T` in VSCode). Some of the handling is also synced to the Svelte TypeScript plugin so that it's more consistent, which also means vscode can better deduplicate the results from both tsserver and Svelte language server (**[email protected]**, [#2769](https://github.com/sveltejs/language-tools/pull/2769))
+
+---
+
+## Community Showcase
+
+### Apps & Sites built with Svelte
+
+- [Planet Poster](https://planet-poster.vercel.app/) is an interactive art work inspired by a poster of, you guessed it, planets
+- [roomy-worlds](https://flo-bit.dev/roomy-worlds/) lets you create small 3d worlds and share/edit with your community
+- [Prodcast](https://www.prodcastapp.com/) lets you discover products curated from your favorite podcasts
+- [Distill](https://www.distillintelligence.com/) automates company and industry monitoring with all news, updates, and summarized insights in one place
+- [thom.chat](https://github.com/tglide/thom-chat) is an open-source alternative/clone to T3 Chat
+- [Visual Source](https://github.com/jhwz/visual-source) is a GUI for managing your projects design tokens
+
+### Learning Resources
+
+_Featuring Svelte Contributors and Ambassadors_
+
+- [Type-Safe Persistence and Auto-Theming in Svelte 5](https://www.puruvj.dev/blog/svelte-5-runic-persist-theming) by Puru VJ
+- [$effect is fine but proxies are better](https://ricciuti.me/blog/effect-is-fine-but-proxies-are-better) and [How to build Web Components with Svelte](https://mainmatter.com/blog/2025/06/25/web-components-with-svelte/?utm_source=svelte_newsletter&utm_medium=social&utm_campaign=25-06-26-how-to-build-web-components-with-svelte) by Paolo Ricciuti
+
+_This Week in Svelte_
+
+- [Ep. 106](https://www.youtube.com/watch?v=_7_8HKvee8M) — Changelog
+- [Ep. 107](https://www.youtube.com/watch?v=Ijb8l9XEz2g) — svelte-lexical
+
+_To Watch/Read_
+
+- [Sveltest](https://sveltest.dev/docs/getting-started) is a guide to set up testing for Svelte 5 applications using the experimental vitest-browser-svelte library
+- [A Playful Onboarding: Your first interactive animation from A to Z](https://director.design/chapters/playful-onboarding) by Director.design
+- [Migrating from @testing-library/svelte to vitest-browser-svelte](https://scottspence.com/posts/migrating-from-testing-library-svelte-to-vitest-browser-svelte) by Scott Spence
+- [Why Silicon Valley CTOs Are Secretly Moving Away from React](https://freedium.cfd/https://javascript.plainenglish.io/why-silicon-valley-ctos-are-secretly-moving-away-from-react-bdf64f0b6072) by Freedium
+- [Async Local Storage](https://blog.robino.dev/posts/async-local-storage) by Ross Robino
+- [Mainmatter](https://mainmatter.com/events/?utm_source=svelte_newsletter&utm_medium=social&utm_campaign=25-06-25-how-to-build-web-components-with-svelte) has a bunch of Svelte workshops in July so be sure to check those out!
+
+### Libraries, Tools & Components
+
+- [shadcn-svelte v1](https://shadcn-svelte.com/) - after 11 months in pre-release (@next), shadcn-svelte has officially hit v1.0. Congrats!
+- [Quaff](https://github.com/quaffui/quaff) is a component library for Svelte that follows the Material Design 3 guidelines
+- [Neodrag v3](https://www.puruvj.dev/blog/neodrag-v3-alpha) Alpha is out with multi-framework adapters, event delegation and more
+- [Svelte Polaris](https://svelte-polaris-docs.storebud.workers.dev/) is port of Shopify's design system to build Shopify apps
+- [Origin UI](https://originui-svelte.pages.dev/) is a collection of copy-and-paste components for quickly build application UIs
+- [Svelte 5 MCP Server](https://github.com/StudentOfJS/svelte5-mcp) is a specialized Model Context Protocol (MCP) server for Svelte 5 frontend development
+- [Frizzante](https://razshare.github.io/frizzante-docs/guides/get-started/) is a minimalistic and opinionated web server framework written in Go that uses Svelte to render pages
+- [Storybook 9](https://storybook.js.org/blog/storybook-9/) is out now and includes updates to the Svelte CSF story format to support Svelte 5
+- [Sheepdog](https://github.com/mainmatter/sheepdog) supplies a simple way to introduce cancellable concurrency into your app
+- Flowbite Svelte now has [datatable](https://flowbite-svelte.com/docs/plugins/datatables) and [text editor (WYSIWYG)](https://flowbite-svelte.com/docs/plugins/wysiwyg) components
+- [Ark UI](https://ark-ui.com/), a headless UI library, now has a Svelte version
+- [SVAR Svelte Filter](https://svar.dev/svelte/filter/) helps you add complex filtering UI and logic to data-heavy apps like admin panels or dashboards
+
+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/10-introduction/10-overview.md

@@ -9,7 +9,7 @@ The command line interface (CLI), `sv`, is a toolkit for creating and maintainin
 
 The easiest way to run `sv` is with [`npx`](https://docs.npmjs.com/cli/v8/commands/npx) (or the equivalent command if you're using a different package manager — for example, `pnpx` if you're using [pnpm](https://pnpm.io/)):
 
-```bash
+```sh
 npx sv <command> <args>
 ```
 

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

@@ -7,7 +7,7 @@ title: sv create
 
 ## Usage
 
-```bash
+```sh
 npx sv create [options] [path]
 ```