Merge branch 'main' into pkg-pr-new-version

Author: paoloricciuti

apps/svelte.dev/content/docs/svelte/02-runes/04-$effect.md

@@ -8,7 +8,7 @@ Most of the effects in a Svelte app are created by Svelte itself — they're the
 
 But you can also create your own effects with the `$effect` rune, which is useful when you need to synchronize an external system (whether that's a library, or a `<canvas>` element, or something across a network) with state inside your Svelte app.
 
-> [!NOTE] Avoid overusing effects! When you do too much work in them, code often becomes difficult to understand and maintain. See [when not to use effects](#When-not-to-use-effects) to learn about alternative approaches.
+> [!NOTE] Avoid overusing `$effect`! When you do too much work in effects, code often becomes difficult to understand and maintain. See [when not to use `$effect`](#When-not-to-use-$effect) to learn about alternative approaches.
 
 Your effects run after the component has been mounted to the DOM, and in a [microtask](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) after state changes ([demo](/playground/untitled#H4sIAAAAAAAAE31S246bMBD9lZF3pSRSAqTVvrCAVPUP2sdSKY4ZwJJjkD0hSVH-vbINuWxXfQH5zMyZc2ZmZLVUaFn6a2R06ZGlHmBrpvnBvb71fWQHVOSwPbf4GS46TajJspRlVhjZU1HqkhQSWPkHIYdXS5xw-Zas3ueI6FRn7qHFS11_xSRZhIxbFtcDtw7SJb1iXaOg5XIFeQGjzyPRaevYNOGZIJ8qogbpe8CWiy_VzEpTXiQUcvPDkSVrSNZz1UlW1N5eLcqmpdXUvaQ4BmqlhZNUCgxuzFHDqUWNAxrYeUM76AzsnOsdiJbrBp_71lKpn3RRbii-4P3f-IMsRxS-wcDV_bL4PmSdBa2wl7pKnbp8DMgVvJm8ZNskKRkEM_OzyOKQFkgqOYBQ3Nq89Ns0nbIl81vMFN-jKoLMTOr-SOBOJS-Z8f5Y6D1wdcR8dFqvEBdetK-PHwj-z-cH8oHPY54wRJ8Ys7iSQ3Bg3VA9azQbmC9k35kKzYa6PoVtfwbbKVnBixBiGn7Pq0rqJoUtHiCZwAM3jdTPWCVtr_glhVrhecIa3vuksJ_b7TqFs4DPyriSjd5IwoNNQaAmNI-ESfR2p8zimzvN1swdCkvJHPH6-_oX8o1SgcIDAAA=)):
 
@@ -261,7 +261,7 @@ The `$effect.root` rune is an advanced feature that creates a non-tracked scope
 </script>
 ```
 
-## When not to use effects
+## When not to use `$effect`
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
 
@@ -288,7 +288,7 @@ In general, `$effect` is best considered something of an escape hatch — useful
 
 > [!NOTE] For things that are more complicated than a simple expression like `count * 2`, you can also use `$derived.by`.
 
-You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy2rDMBD8lWXJwYE0dg-9KFYg31H3oNirIJBlYa1DjPG_F8l1XEop9LgzOzP7mFAbSwHF-4ROtYQCL97jAXn0sQh3skx4wNANfR2RMtS98XyuXMWWGLhjZUHCa1GcVix4cgwSdoEVU1bsn4wl_Y1I2kS6inekNdWcZXuQZ5giFDWpfwl5WYyT2fynbB1g1UWbTVbm2w6utOpKNq1TGucHhri6rLBX7kYVwtW4RtyVHUhOyXeGVj3klLxnyJP0i8lXNJUx6en-v6A48K85kTimpi0sYj-yAo-Wlh9FcL1LY4K3ahSgLT1OC3ZTXkBxfKN2uVC6T5LjAduuMdpQg4L7geaP-RNHPuClMQIAAA==)):
+You might be tempted to do something convoluted with effects to link one value to another. The following example shows two inputs for "money spent" and "money left" that are connected to each other. If you update one, the other should update accordingly. Don't use effects for this ([demo](/playground/untitled#H4sIAAAAAAAACpVRy26DMBD8FcvKgUhtoIdeHBwp31F6MGSJkBbHwksEQvx77aWQqooq9bgzOzP7mGTdIHipPiZJowOpGJAv0po2VmfnDv4OSBErjYdneHWzBJaCjcx91TWOToUtCIEE3cig0OIty44r5l1oDtjOkyFIsv3GINQ_CNYyGegd1DVUlCR7oU9iilDUcP8S8roYs9n8p2wdYNVFm4csTx872BxNCcjr5I11fdgonEkXsjP2CoUUZWMv6m6wBz2x7yxaM-iJvWeRsvSbSVeUy5i0uf8vKA78NIeJLSZWv1I8jQjLdyK4XuTSeIdmVKJGGI4LdjVOiezwDu1yG74My8PLCQaSiroe5s_5C2PHrkVGAgAA)):
 
 ```svelte
 <script>
@@ -316,7 +316,7 @@ You might be tempted to do something convoluted with effects to link one value t
 </label>
 ```
 
-Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo2SP2-DMBDFv8rp1CFR84cOXQhU6p6tY-ngwoEsGWPhI0pk8d0rG5yglqGj37v7veMJh7VUZDH9dKhFS5jiuzG4Q74Z_7AXUky4Q9sNfemVzJa9NPxW6IIVMXDHQkEOL0lyipo1pBlyeLIsmDbJ9u4oqhdG2A2mLrgedMmy0zCYSjB9eMaGtuC8WXBkPtOBRd8QHy5CDXSa3Jk7HbOfDgjWuAo_U71kz9vr6Bgc2X44orPjow2dKfFNKhSTSW0GBl9iXmAvdEMFQqDmLgBH6HQYyt3ie0doxTV3IWqEY2DN88eohqePvsf9O9mf_if4HMSVXD89NfEI99qvbMs3RdPv4MXYaSWtUeKWQq3oOlfZCJNCcnildlFgWMcdtl0la0kVptwPNH6NP_uzV0acAgAA)):
+Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAACo1SMW6EMBD8imWluFMSIEUaDiKlvy5lSOHjlhOSMRZeTiDkv8deMEEJRcqdmZ1ZjzzxqpZgePo5cRw18JQA_sSVaPz0rnVk7iDRYxdhYA8vW4Wg0NnwzJRdrfGtUAVKQIYtCsly9pIkp4AZ7cQOezAoEA7JcWUkVBuCdol0dNWrEutWsV5fHfnhPQ5wZJMnCwyejxCh6G6A0V3IHk4zu_jOxzzPBxBld83PTr7xXrb3rUNw8PbiYJ3FP22oTIoLSComq5XuXTeu8LzgnVA3KDgj13wiQ8taRaJ82rzXskYM-URRlsXktejjgNLoo9e4fyf70_8EnwncySX1GuunX6kGRwnzR_BgaPNaGy3FmLJKwrCUeBM6ZUn0Cs2mOlp3vwthQJ5i14P9st9vZqQlsQIAAA==)):
 
 ```svelte
 <script>
@@ -346,7 +346,7 @@ Instead, use callbacks where possible ([demo](/playground/untitled#H4sIAAAAAAAAC
 </label>
 ```
 
-If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACo2SQW-DMAyF_4pl7dBqXcsOu1CYtHtvO44dsmKqSCFExFRFiP8-xRCGth52tJ_9PecpA1bakMf0Y0CrasIU35zDHXLvQuGvZJhwh77p2nPoZP7casevhS3YEAM3rAzk8Jwkx9jzjixDDg-eFdMm2S6KoWolyK6ItuCqs2fWjYXOlYrpPTA2tIUhiAVH5iPtWbUX4v1VmY6Okzpzp2OepgNEGu_CT1St2fP2fXQ0juwwHNHZ4ScNmxn1RUaCybR1HUMIMS-wVfZCBYJQ80GAIzRWhvJh9d4RanXLB7Ea4SCsef4Qu1IG68Xu387h9D_GJ2ne8ZXpxTZUv1w994amjxCaMc1Se2dUn0Jl6DaHeFEuhWT_QvUqOlnHHdZNqStNJabcdjR-jt8IbC-7lgIAAA==)):
+If you need to use bindings, for whatever reason (for example when you want some kind of "writable `$derived`"), consider using getters and setters to synchronise state ([demo](/playground/untitled#H4sIAAAAAAAACpWRwW6DMBBEf8WyekikFOihFwcq9TvqHkyyQUjGsfCCQMj_XnvBNKpy6Qn2DTOD1wu_tRocF18Lx9kCFwT4iRvVxenT2syNoDGyWjl4xi93g2AwxPDSXfrW4oc0EjUgwzsqzSr2VhTnxJwNHwf24lAhHIpjVDZNwy1KS5wlNoGMSg9wOCYksQccerMlv65p51X0p_Xpdt_4YEy9yTkmV3z4MJT579-bUqsaNB2kbI0dwlnCgirJe2UakJzVrbkKaqkWivasU1O1ULxnOVk3JU-Uxti0p_-vKO4no_enbQ_yXhnZn0aHs4b1jiJMK7q2zmo1C3bTMG3LaZQVrMjeoSPgaUtkDxePMCEX2Ie6b_8D4WyJJEwCAAA=)):
 
 ```svelte
 <script>

apps/svelte.dev/scripts/sync-docs/index.ts

@@ -167,6 +167,11 @@ if (parsed.values.pull) {
 }
 
 async function sync(pkg: Package) {
+	if (!fs.existsSync(`${REPOS}/${pkg.name}/${pkg.docs}`)) {
+		console.warn(`No linked repo found for ${pkg.name}`);
+		return;
+	}
+
 	const dest = `${DOCS}/${pkg.name}`;
 
 	fs.rmSync(dest, { force: true, recursive: true });

apps/svelte.dev/src/lib/components/Modal.svelte

@@ -67,7 +67,6 @@
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;

apps/svelte.dev/src/lib/components/SecondaryNav.svelte

@@ -17,7 +17,6 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;

apps/svelte.dev/src/routes/(authed)/apps/+page.svelte

@@ -156,7 +156,6 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {

apps/svelte.dev/src/routes/blog/+page.svelte

@@ -74,7 +74,7 @@
 
 	h2 {
 		display: inline-block;
-		color: var(--sk-fg-2);
+		color: var(--sk-fg-1);
 		font: var(--sk-font-h3);
 	}
 
@@ -87,14 +87,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-fg-2);
+				color: var(--sk-fg-1);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-fg-2);
+			color: inherit;
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -163,7 +163,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-fg-2);
+				color: inherit;
 			}
 		}
 	}

apps/svelte.dev/src/routes/docs/+page.svelte

@@ -111,7 +111,7 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-fg-2);
+		color: inherit;
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
 		background-color: var(--sk-bg-1);

apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte

@@ -96,11 +96,7 @@
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
-
-				&:hover {
-					color: var(--sk-fg-3);
-				}
+				user-select: none;
 
 				&::before,
 				&::after {
@@ -148,6 +144,10 @@
 					color: var(--sk-fg-4);
 					margin: 0;
 					display: block;
+
+					&:hover {
+						color: var(--sk-fg-3);
+					}
 				}
 			}
 

apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte

@@ -77,7 +77,6 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte

@@ -23,7 +23,7 @@
 
 {#if $menu_items}
 	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
-		<div class="navbar" id="navbar">
+		<div class="context-menu">
 			<ul>
 				{#each $menu_items.items as item}
 					<li>
@@ -38,50 +38,39 @@
 <svelte:window on:click={() => menu_items.set(null)} />
 
 <style>
-	.navbar {
+	.context-menu {
 		display: inline-flex;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		background-color: var(--back);
+		background-color: var(--sk-bg-2);
 		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
-		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
+		filter: var(--sk-shadow);
 	}
 
 	ul {
 		margin: 0;
-		padding: 0;
-		background-color: var(--sk-bg-3);
-		border: 1px solid var(--sk-fg-accent);
+		padding: 0.5rem;
+		background-color: var(--sk-bg-2);
 	}
 
 	li {
 		display: block;
 		list-style-type: none;
-		width: 1fr;
-	}
-	li:hover {
-		background-color: var(--sk-bg-accent);
+
+		&:hover {
+			background-color: var(--sk-bg-4);
+		}
 	}
 
 	button {
-		color: var(--sk-fg-2);
+		display: block;
 		width: 100%;
+		height: 100%;
 		text-align: left;
 		border: 0px;
-		padding: 0.4rem 1rem 0.2rem 1rem;
+		padding: 1rem;
 		font: var(--sk-font-ui-small);
-	}
-
-	li:first-child button {
-		padding-top: 0.5rem;
-	}
-
-	li:last-child button {
-		padding-bottom: 0.4rem;
-	}
-
-	button:hover {
-		background-color: var(--back-api);
+		line-height: 1;
+		border-radius: var(--sk-border-radius);
 	}
 </style>