@rokkit/stories 1.0.0-next.124 → 1.0.0-next.127

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/stories",
-  "version": "1.0.0-next.124",
+  "version": "1.0.0-next.127",
   "description": "Utilities for building tutorials.",
   "publishConfig": {
     "access": "public"
@@ -28,9 +28,10 @@
     "build": "bun prepublishOnly"
   },
   "dependencies": {
-    "@vitest/expect": "^3.2.4",
+    "@vitest/expect": "^4.0.18",
     "frontmatter": "^0.0.3",
-    "ramda": "^0.31.3",
+    "ramda": "^0.32.0",
+    "shiki": "^3.23.0",
     "@rokkit/core": "latest"
   }
 }

package/src/Code.svelte

@@ -4,7 +4,7 @@
 	import CopyToClipboard from './CopyToClipboard.svelte'
 
 	let { content, language } = $props()
-	let theme = $derived(vibe.mode == 'dark' ? 'github-dark' : 'github-light')
+	let theme = $derived(vibe.mode === 'dark' ? 'github-dark' : 'github-light')
 	let highlightedCode = $derived(highlightCode(content, { lang: language, theme }))
 </script>
 

package/src/CodeViewer.svelte

@@ -2,7 +2,12 @@
 	import { Tabs } from '@rokkit/ui'
 	import Code from './Code.svelte'
 	let { files = [] } = $props()
-	let current = $state(files[0])
+	let current = $state(null)
+	$effect(() => {
+		if (files.length > 0 && current === null) {
+			current = files[0]
+		}
+	})
 	let fields = { text: 'name', icon: 'language' }
 </script>
 

package/src/Notes.svelte

@@ -12,7 +12,7 @@
 	 */
 	async function gotoPage(route) {
 		if (route) {
-			const location = '/' + page.params.segment + '/' + route
+			const location = `/${  page.params.segment  }/${  route}`
 			await goto(location)
 		}
 	}

package/src/lib/shiki.js

@@ -70,7 +70,7 @@ export async function preloadHighlighter() {
 	try {
 		await initializeHighlighter()
 	} catch (error) {
-		console.warn('Failed to preload syntax highlighter:', error.message)
+		console.warn('Failed to preload syntax highlighter:', error.message)  
 	}
 }