docs: interaction mode

src/routes/(docs)/+layout.server.ts

@@ -8,6 +8,7 @@ export const load: LayoutServerLoad = async () => {
     sidebar: [
       await getSidebarSection('Components', 'component'),
       await getSidebarSection('Interactions', 'interaction'),
+      await getSidebarSection('Stores', 'store'),
     ],
   }
 }

src/routes/(docs)/store/interaction-mode/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Page from './example/+page.svelte'
+  import PageSource from './example/+page.svelte?raw'
+  import Snippet from '../../Snippet.svelte'
+</script>
+
+<h1>Interaction mode</h1>
+
+<p>
+  The <code>interactionMode</code> store is used to determine whether the user is
+  using a mouse or a keyboard.
+</p>
+
+<p>
+  The interaction mode is updated automatically when the user is interacting
+  with the page using a mouse, keyboard, or touch screen.
+</p>
+
+<p>
+  If the user is typing text into an input, the interaction mode will not be
+  updated.
+</p>
+
+<h2>Example</h2>
+
+<div>
+  <Page />
+</div>
+
+<h2>Source</h2>
+
+<Snippet code={PageSource} />

src/routes/(docs)/store/interaction-mode/example/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { interactionMode } from '$lib'
+</script>
+
+<p>
+  You are currently using a <strong>{$interactionMode}</strong> device.
+</p>
+
+<input
+  type="text"
+  class="block rounded border border-gray-300 bg-white p-2 shadow-sm dark:border-neutral-700 dark:bg-neutral-700 dark:text-neutral-100 sm:text-sm"
+  placeholder="Type some text..."
+/>