Merge branch 'main' into visual-regression-action

packages/kitbook/src/docs/1-get-started.md

@@ -38,7 +38,7 @@ src/routes/
 
 You may find it a bit jarring to have your component workbench included in your main app. Kitbook originally worked as a companion app, like all previous art does, but this created a lot of friction:
 - Starting two dev servers is a pain and you will find yourself only working in Kitbook or only in your app, but not both which is the sweet spot. 
-- Set up the component workbench with just the right scaffolding to match the main app is a pain. It's annoying to have to keep everything in sync (like i18n) for example. The layout structure above makes it easy to clearly specify what context is needed for components and what is app only. 
+- Setting up the component workbench with just the right scaffolding to match the main app is a pain. It's annoying to have to keep everything in sync (like i18n for example). The layout structure above makes it easy to clearly specify what context is needed for components and what is app only. 
 - The status checks for Playwright E2E tests running against Vercel deployments breaks down when your app deployment finishes before your Kitbook workbench deployment. 
 
 Furthermore the combined app + Kitbook approach is the only way to get the [[2-viewer]] tool which is a huge benefit. Let's move on to learn about Kitbook's [[2-viewer]] tool which bridges the gap between our app and our component workbench. 

packages/kitbook/src/docs/2-viewer.md

@@ -9,7 +9,7 @@ In dev mode you'll see a cross-hairs button in the lower right corner. This is K
 
 These docs will be updated in the future as the tool is fleshed out. It's kind of a hybrid between Nuxt DevTools and Storybook, but much simpler than both of those.
 
-For now, why don't you try activating it by clicking the button and selecting one of your components that you'd like to create variants for. Click the `Add Variant from Current State` button (this will be more interesting if you choose a component with props) and you should find yourself in VSCode with a new file. If you selected `Button.svelte` for example, you'll now see yourself looking at a file named `Button.variants.ts`. You'll notice it's an array of variants, and you have been given one to start, using the current props of the component you just clicked on. Now you probably want to continue on to learn more about [[3-component-variants]].
+With Kitbook added to your app and your dev server running, try activating the Viewer by clicking the button and selecting one of your components that you'd like to create variants for. Click the `Add Variant from Current State` button (this will be more interesting if you choose a component with props) and you should find yourself in VSCode with a new file. If you selected `Button.svelte` for example, you'll now see yourself looking at a file named `Button.variants.ts`. You'll notice it's an array of variants, and you have been given one to start, using the current props of the component you just clicked on. Now you probably want to continue on to learn more about [[3-component-variants]].
 
 
 [//begin]: # "Autogenerated link references for markdown compatibility"

packages/kitbook/src/docs/3-component-variants.md

@@ -91,9 +91,9 @@ The same applies to layout files. Just add a `_layout.variants.ts` file and you'
 
 The wonderful thing about variants is they're written in TypeScript so you can easily spin up varieties of variants with minimal effort without having to duplicate data. Just use features of the language like `...spread` and `.map()` or import data from mocks folder and apply it across multiple different components.
 
-That will be enough to keep you busy for awhile, but there may come a point where you want to mock something which uses named slots* or perhaps is a composition of components working together. You'll want to keep reading to learn about [[4-component-compositions|Compositions]].
+That will be enough to keep you busy for awhile, but there may come a point where you want to mock something which uses named slots[^1] or perhaps is a composition of components working together. You'll want to keep reading to learn about [[4-component-compositions|Compositions]].
 
-**Yes, there is a way to dynamically create slots but it's a bit of hack using Svelte's internal API and hasn't been implemented.*
+[^1]: Yes, there is a way to dynamically create slots but it's a bit of hack using Svelte's internal API and hasn't been implemented.
 
 
 [//begin]: # "Autogenerated link references for markdown compatibility"

packages/kitbook/src/docs/8-i18n.md

@@ -45,7 +45,7 @@ If you use [[7-visual-regression-testing]], screenshots will be automatically be
 
 ## Fine-grained language control
 
-Just like viewport have [[3-component-variants#Fine-grained viewport control]], you can override project language defaults on a variant file basis or for an individual variant. For example, in a project with English, Spanish, and French, we could do the following to restrict down to just two or even one language:
+Just like viewports have [[3-component-variants#Fine-grained viewport control]], you can override project language defaults on a variant file basis or for an individual variant. For example, in a project with English, Spanish, and French, we could do the following to restrict down to just two or even one language:
 
 ```ts title="foo.variants.ts"
 import type { Language, Variant } from 'kitbook'
@@ -80,7 +80,7 @@ There is also an optional `languages` export from the composition file:
 
   export const languages: Language[] = [
     { code: 'en', name: 'English' },
-    { code: 'es', name: 'Spanish' },
+    { code: 'fr', name: 'French' },
   ]
 </script>
 ```