.

Author: sacrosanctic

app/components/Package/Playgrounds.vue

@@ -17,6 +17,7 @@ const providerIcons: Record<string, string> = {
   'nuxt-new': 'i-simple-icons:nuxtdotjs',
   'vite-new': 'i-simple-icons:vite',
   'jsfiddle': 'i-carbon:code',
+  'storybook': 'i-simple-icons:storybook',
 }
 
 // Map provider id to color class
@@ -30,6 +31,7 @@ const providerColors: Record<string, string> = {
   'nuxt-new': 'text-provider-nuxt',
   'vite-new': 'text-provider-vite',
   'jsfiddle': 'text-provider-jsfiddle',
+  'storybook': 'text-provider-storybook',
 }
 
 function getIcon(provider: string): string {

app/components/VersionSelector.vue

@@ -74,15 +74,7 @@ const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 
 /** Get URL for a specific version */
 function getVersionUrl(version: string): string {
-  let url = props.urlPattern.replace('{version}', version)
-  // Replace storyid placeholder if it exists
-  if (url.includes('{storyid}')) {
-    // Get current storyid from route query
-    const route = useRoute()
-    const currentStoryId = route.query.storyid as string
-    url = url.replace('{storyid}', currentStoryId || '')
-  }
-  return url
+  return props.urlPattern.replace('{version}', version)
 }
 
 /** Safe semver comparison with fallback */

app/pages/package-stories/[...path].vue

@@ -52,8 +52,8 @@ const { data: pkg } = usePackage(packageName)
 // URL pattern for version selector - maintain current story if available
 const versionUrlPattern = computed(() => {
   const base = `/package-stories/${packageName.value}/v/{version}`
-  // Use placeholder for storyid that will be handled by version switch watcher
-  return currentStoryId.value ? `${base}?storyid={storyid}` : base
+  // Directly include the current storyid if available
+  return currentStoryId.value ? `${base}?storyid=${currentStoryId.value}` : base
 })
 
 // Fetch package.json to get Storybook URL
@@ -383,7 +383,7 @@ defineOgImageComponent('Default', {
           </div>
           <div class="flex items-center gap-2">
             <a
-              :href="packageJson.storybook.url"
+              :href="packageJson.storybook.url + '?path=/story/' + currentStoryId"
               target="_blank"
               rel="noopener noreferrer"
               class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"

app/pages/package/[[org]]/[name].vue

@@ -70,6 +70,20 @@ const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   { default: () => ({ html: '', md: '', playgroundLinks: [], toc: [] }) },
 )
 
+const playgroundLinks = computed(() => [
+  ...readmeData.value.playgroundLinks,
+  ...(packageJson.value?.storybook
+    ? [
+        {
+          url: packageJson.value.storybook.url,
+          provider: 'storybook',
+          providerName: 'Storybook',
+          label: 'Storybook',
+        },
+      ]
+    : []),
+])
+
 //copy README file as Markdown
 const { copied: copiedReadme, copy: copyReadme } = useClipboard({
   source: () => readmeData.value?.md ?? '',
@@ -110,9 +124,7 @@ const {
     immediate: false,
   },
 )
-onMounted(() => {
-  fetchInstallSize()
-})
+onMounted(() => fetchInstallSize())
 
 const { data: skillsData } = useLazyFetch<SkillsListResponse>(
   () => {
@@ -639,6 +651,15 @@ onKeyStroke(
             >
               {{ $t('package.links.code') }}
             </LinkBase>
+            <LinkBase
+              v-if="packageJson?.storybook"
+              variant="button-secondary"
+              :to="{ name: 'stories', params: { path: [pkg.name, 'v', resolvedVersion] } }"
+              aria-keyshortcuts="."
+              classicon="i-carbon:code"
+            >
+              stories
+            </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
@@ -1160,23 +1181,7 @@ onKeyStroke(
           <PackageWeeklyDownloadStats :packageName :createdIso="pkg?.time?.created ?? null" />
 
           <!-- Playground links -->
-          <PackagePlaygrounds
-            v-if="readmeData?.playgroundLinks?.length"
-            :links="readmeData.playgroundLinks"
-          />
-
-          <!-- <StorybookPlaygrounds
-            v-if="readmeData?.storybookPlaygrounds?.length"
-            :links="readmeData.storybookPlaygroundLinks"
-          /> -->
-
-          <a v-if="packageJson?.storybook" :href="packageJson.storybook.url">storybook</a>
-          <a
-            v-if="packageJson?.storybook"
-            :href="`/package-stories/${pkg.name}/v/${resolvedVersion}`"
-            >sb internal</a
-          >
-          <!-- :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }" -->
+          <PackagePlaygrounds v-if="playgroundLinks.length" :links="playgroundLinks" />
 
           <PackageCompatibility :engines="displayVersion?.engines" />
 

app/utils/storybook-tree.ts

@@ -9,17 +9,13 @@ export function transformStorybookEntries(
   const tree: StorybookFileTree[] = []
   const dirMap = new Map<string, StorybookFileTree>()
 
-  // Sort entries by title for consistent ordering
-  const sortedEntries = Object.values(entries).sort((a, b) =>
-    (a.title || '').localeCompare(b.title || ''),
-  )
-
-  for (const entry of sortedEntries) {
+  // Use entries in original order to preserve object key ordering
+  for (const [_id, entry] of Object.entries(entries)) {
     // Parse title into path parts
     // "Example/Button/Primary" -> ["Example", "Button", "Primary"]
     if (!entry.title) continue
     const parts = entry.title.split('/')
-    const storyName = parts.pop()! // Last part is the story name
+    const storyName = entry.name
     const storyPath = parts.join('/') || '' || ''
 
     // Create directories as needed

lunaria/files/en-GB.json

@@ -630,25 +630,6 @@
     },
     "file_path": "File path"
   },
-  "stories": {
-    "stories_label": "Stories",
-    "story_path": "Story path",
-    "root": "Stories",
-    "version_required": "Version is required to browse stories",
-    "go_to_package": "Go to package",
-    "loading_stories": "Loading Storybook stories...",
-    "no_storybook_found": "No Storybook found",
-    "check_package_json": "Check if this package has Storybook configuration in package.json",
-    "back_to_package": "Back to package",
-    "failed_to_load_stories": "Failed to load Storybook stories",
-    "storybook_unavailable": "The Storybook instance may be unavailable or misconfigured",
-    "open_storybook": "Open Storybook",
-    "story": "Story",
-    "open_in_storybook": "Open in Storybook",
-    "select_story": "Select a story from the tree to view it here",
-    "toggle_tree": "Toggle story tree",
-    "close_tree": "Close story tree"
-  },
   "badges": {
     "provenance": {
       "verified": "verified",

uno.config.ts

@@ -98,6 +98,7 @@ export default defineConfig({
         nuxt: '#00DC82',
         vite: '#646CFF',
         jsfiddle: '#0084FF',
+        storybook: '#FF4785',
       },
     },
     animation: {