@poveste/app 0.2.0 → 0.3.0

package/src/app/components/panel/StoryControls.vue

@@ -32,18 +32,17 @@ const hasCustomControls = computed(() => props.variant.slots().controls || props
 
 const hasInitState = computed(() => Object
   .entries(props.variant.state || {})
-  .filter(([key]) => !key.startsWith('_h'))
-  .length > 0)
+  .some(([key]) => !key.startsWith('_h')))
 </script>
 
 <template>
   <div
     data-test-id="story-controls"
-    class="poveste-story-controls ptw-flex ptw-flex-col ptw-divide-y ptw-divide-gray-100 dark:ptw-divide-gray-750"
+    class="poveste-story-controls flex flex-col divide-y divide-gray-100 dark:divide-gray-750"
   >
     <!-- Toolbar -->
     <div
-      class="ptw-h-9 ptw-flex-none ptw-px-2 ptw-flex ptw-items-center"
+      class="h-9 flex-none px-2 flex items-center"
     >
       <StatePresets
         v-if="ready || !hasCustomControls"
@@ -59,7 +58,7 @@ const hasInitState = computed(() => Object
       slot-name="controls"
       :variant="variant"
       :story="story"
-      class="__poveste-render-custom-controls __histoire-render-custom-controls ptw-flex-none"
+      class="__poveste-render-custom-controls __histoire-render-custom-controls flex-none"
       @ready="ready = true"
     />
 
@@ -68,7 +67,7 @@ const hasInitState = computed(() => Object
       v-else-if="hasInitState"
     >
       <ControlsComponentState
-        class="ptw-flex-none ptw-my-2"
+        class="flex-none my-2"
         :variant="variant"
       />
     </div>
@@ -76,7 +75,7 @@ const hasInitState = computed(() => Object
     <BaseEmpty v-else-if="!variant.state?._hPropDefs?.length">
       <Icon
         icon="carbon:audio-console"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       <span>No controls available for this story</span>
     </BaseEmpty>
@@ -90,7 +89,7 @@ const hasInitState = computed(() => Object
         :key="index"
         :variant="variant"
         :definition="def"
-        class="ptw-flex-none ptw-my-2"
+        class="flex-none my-2"
       />
     </div>
   </div>

package/src/app/components/panel/StoryDocs.vue

@@ -35,7 +35,7 @@ export function useStoryDoc(story: Ref<Story>) {
         try {
           comp = await comp()
         }
-        catch (e) {
+        catch {
           // Noop
           // Could be a class that requires `new com()`
         }
@@ -170,9 +170,9 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
   >
     <div
       v-if="__POVESTE_DEV__ && renderedDoc && filePath"
-      class="ptw-flex ptw-items-center ptw-gap-2 ptw-p-2"
+      class="flex items-center gap-2 p-2"
       :class="{
-        'ptw-pt-4': !standalone,
+        'pt-4': !standalone,
       }"
     >
       <DevOnlyToolbarOpenInEditor
@@ -187,14 +187,14 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
     >
       <Icon
         icon="carbon:document-unknown"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       No documentation available
     </BaseEmpty>
     <div
       v-else
       ref="renderedEl"
-      class="ptw-prose dark:ptw-prose-invert ptw-p-4 ptw-max-w-none"
+      class="prose dark:prose-invert p-4 max-w-none"
       data-test-id="story-docs"
       v-html="renderedDoc"
     />

package/src/app/components/panel/StoryEvent.vue

@@ -20,34 +20,34 @@ const formattedArgument = computed(() => {
 
 <template>
   <VDropdown
-    class="poveste-story-event ptw-group"
+    class="poveste-story-event group"
     placement="right"
     data-test-id="event-item"
   >
     <template #default="{ shown }">
       <div
-        class="group-hover:ptw-bg-primary-100 dark:group-hover:ptw-bg-primary-700 ptw-cursor-pointer ptw-py-2 ptw-px-4 ptw-flex ptw-items-baseline ptw-gap-1 ptw-leading-normal"
+        class="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal"
         :class="[
-          shown ? 'ptw-bg-primary-50 dark:ptw-bg-primary-600' : 'group-odd:ptw-bg-gray-100/50 dark:group-odd:ptw-bg-gray-750/40',
+          shown ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
         ]"
       >
         <span
           :class="{
-            'ptw-text-primary-500': shown,
+            'text-primary-500': shown,
           }"
         >
           {{ event.name }}
         </span>
         <span
           v-if="event.argument"
-          class="ptw-text-xs ptw-opacity-50 ptw-truncate"
+          class="text-xs opacity-50 truncate"
         >{{ formattedArgument }}</span>
       </div>
     </template>
 
     <template #popper>
-      <div class="ptw-overflow-auto ptw-max-w-[400px] ptw-max-h-[400px]">
-        <pre class="ptw-p-4">{{ event.argument }}</pre>
+      <div class="overflow-auto max-w-[400px] max-h-[400px]">
+        <pre class="p-4">{{ event.argument }}</pre>
       </div>
     </template>
   </VDropdown>

package/src/app/components/panel/StoryEvents.vue

@@ -33,7 +33,7 @@ const eventsElement = ref<HTMLDivElement>()
     >
       <Icon
         icon="carbon:event-schedule"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       No event fired
     </BaseEmpty>

package/src/app/components/panel/StorySidePanel.vue

@@ -34,8 +34,8 @@ const panelContentComponent = computed(() => {
 </script>
 
 <template>
-  <div class="ptw-h-full ptw-w-full ptw-p-2">
-    <div class="ptw-h-full ptw-w-full ptw-rounded-lg ptw-border ptw-border-gray-200 dark:ptw-border-gray-700 ptw-overflow-hidden ptw-bg-white dark:ptw-bg-gray-700">
+  <div class="h-full w-full p-2">
+    <div class="h-full w-full rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden bg-white dark:bg-gray-700">
       <BaseEmpty
         v-if="!storyStore.currentVariant"
         class="poveste-story-side-panel poveste-selection"
@@ -54,11 +54,11 @@ const panelContentComponent = computed(() => {
         v-else
         :save-id="`story-sidepane-${innerOrientation}`"
         :orientation="innerOrientation"
-        class="poveste-story-side-panel poveste-loaded ptw-h-full"
+        class="poveste-story-side-panel poveste-loaded h-full"
         data-test-id="story-side-panel"
       >
         <template #first>
-          <div class="ptw-flex ptw-flex-col ptw-h-full">
+          <div class="flex flex-col h-full">
             <PaneTabs
               :story="storyStore.currentStory"
               :variant="storyStore.currentVariant"
@@ -68,7 +68,7 @@ const panelContentComponent = computed(() => {
               :is="panelContentComponent"
               :story="storyStore.currentStory"
               :variant="storyStore.currentVariant"
-              class="ptw-h-full ptw-overflow-auto"
+              class="h-full overflow-auto"
             />
           </div>
         </template>
@@ -77,7 +77,7 @@ const panelContentComponent = computed(() => {
           <StorySourceCode
             :story="storyStore.currentStory"
             :variant="storyStore.currentVariant"
-            class="ptw-h-full"
+            class="h-full"
           />
         </template>
       </BaseSplitPane>

package/src/app/components/panel/StorySourceCode.vue

@@ -4,10 +4,10 @@ import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
 import { unindent } from '@poveste/shared'
-import { createHighlighter } from 'shiki'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
 import { isDark } from '../../util/dark'
+import { getHighlighter } from '../../util/highlighter'
 import BaseEmpty from '../base/BaseEmpty.vue'
 
 const props = defineProps<{
@@ -87,23 +87,21 @@ const displayedSourceCode = computed(() => {
 // HTML render
 
 onMounted(async () => {
-  highlighter.value = await createHighlighter({
-    langs: [
-      'html',
-      'jsx',
-    ],
-    themes: [
-      'github-light',
-      'github-dark',
-    ],
-  })
+  try {
+    highlighter.value = await getHighlighter()
+  }
+  catch (e) {
+    // Leave `highlighter` unset so the pane falls back to the plain textarea
+    // rendering instead of showing nothing at all.
+    console.error(e)
+  }
 })
 
 const sourceHtml = computed(() => displayedSourceCode.value
   ? highlighter.value?.codeToHtml(displayedSourceCode.value, {
-    lang: 'html',
-    theme: isDark.value ? 'github-dark' : 'github-light',
-  })
+      lang: 'html',
+      theme: isDark.value ? 'github-dark' : 'github-light',
+    })
   : '')
 
 // Scrolling
@@ -133,32 +131,32 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    class="poveste-story-source-code ptw-bg-gray-50 dark:ptw-bg-gray-750 ptw-h-full ptw-overflow-hidden ptw-flex ptw-flex-col"
+    class="poveste-story-source-code bg-gray-50 dark:bg-gray-750 h-full overflow-hidden flex flex-col"
   >
     <!-- Toolbar -->
     <div
       v-if="!error"
-      class="ptw-h-10 ptw-flex-none ptw-border-b ptw-border-solid ptw-border-gray-500/5 ptw-px-4 ptw-flex ptw-items-center ptw-gap-2"
+      class="h-10 flex-none border-b border-solid border-gray-500/5 px-4 flex items-center gap-2"
     >
-      <div class="ptw-text-gray-900 dark:ptw-text-gray-100">
+      <div class="text-gray-900 dark:text-gray-100">
         Source
       </div>
-      <div class="ptw-flex-1" />
+      <div class="flex-1" />
 
       <!-- Display source modes -->
-      <div class="ptw-flex ptw-flex-none ptw-gap-px ptw-h-full ptw-py-2">
+      <div class="flex flex-none gap-px h-full py-2">
         <button
           v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
-          class="ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-l ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden"
+          class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
-            displayedSource !== 'dynamic' ? 'ptw-max-w-6 ptw-opacity-70' : 'ptw-max-w-[82px] ptw-text-primary-600 dark:ptw-text-primary-400',
-            dynamicSourceCode ? 'ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50' : 'ptw-opacity-50',
+            displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-600 dark:text-primary-400',
+            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="dynamicSourceCode && (displayedSource = 'dynamic')"
         >
           <Icon
             icon="carbon:flash"
-            class="ptw-w-4 ptw-h-4 ptw-flex-none"
+            class="w-4 h-4 flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -171,16 +169,16 @@ watch(sourceHtml, async () => {
         </button>
         <button
           v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
-          class="ptw-flex ptw-items-center ptw-gap-1 ptw-h-full ptw-px-1 ptw-bg-gray-500/10 ptw-rounded-r ptw-transition-all ptw-ease-[cubic-bezier(0,1,.6,1)] ptw-duration-300 ptw-overflow-hidden"
+          class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
           :class="[
-            displayedSource !== 'static' ? 'ptw-max-w-6 ptw-opacity-70' : 'ptw-max-w-[63px] ptw-text-primary-600 dark:ptw-text-primary-400',
-            staticSourceCode ? 'ptw-cursor-pointer hover:ptw-bg-gray-500/30 active:ptw-bg-gray-600/50' : 'ptw-opacity-50',
+            displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-600 dark:text-primary-400',
+            staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
           ]"
           @click="staticSourceCode && (displayedSource = 'static')"
         >
           <Icon
             icon="carbon:document"
-            class="ptw-w-4 ptw-h-4 ptw-flex-none"
+            class="w-4 h-4 flex-none"
           />
           <span
             class="transition-opacity duration-300"
@@ -195,13 +193,13 @@ watch(sourceHtml, async () => {
 
       <HstCopyIcon
         :content="displayedSourceCode"
-        class="ptw-flex-none"
+        class="flex-none"
       />
     </div>
 
     <div
       v-if="error"
-      class="ptw-text-red-500 ptw-h-full ptw-p-2 ptw-overflow-auto ptw-font-mono ptw-text-sm"
+      class="text-red-500 h-full p-2 overflow-auto font-mono text-sm"
     >
       Error: {{ error }}
     </div>
@@ -209,7 +207,7 @@ watch(sourceHtml, async () => {
     <BaseEmpty v-else-if="!displayedSourceCode">
       <Icon
         icon="carbon:code-hide"
-        class="ptw-w-8 ptw-h-8 ptw-opacity-50 ptw-mb-6"
+        class="w-8 h-8 opacity-50 mb-6"
       />
       <span>Not available</span>
     </BaseEmpty>
@@ -217,7 +215,7 @@ watch(sourceHtml, async () => {
     <textarea
       v-else-if="!sourceHtml"
       ref="scroller"
-      class="__poveste-code-placeholder ptw-w-full ptw-h-full ptw-p-4 ptw-outline-none ptw-bg-transparent ptw-resize-none ptw-m-0"
+      class="__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0"
       :value="displayedSourceCode"
       readonly
       data-test-id="story-source-code"
@@ -227,12 +225,12 @@ watch(sourceHtml, async () => {
     <div
       v-else
       ref="scroller"
-      class="ptw-w-full ptw-h-full ptw-overflow-auto"
+      class="w-full h-full overflow-auto"
       data-test-id="story-source-code"
       @scroll="onScroll"
     >
       <div
-        class="__poveste-code __histoire-code ptw-p-4 ptw-w-fit"
+        class="__poveste-code __histoire-code p-4 w-fit"
         v-html="sourceHtml"
       />
     </div>

package/src/app/components/search/SearchItem.vue

@@ -2,8 +2,6 @@
 import type { PropType } from 'vue'
 import type { SearchResult } from '../../types'
 import { ref, toRefs } from 'vue'
-import { useRouter } from 'vue-router'
-import { onKeyboardShortcut } from '../../util/keyboard'
 import { useScrollOnActive } from '../../util/scroll'
 import BaseListItem from '../base/BaseListItem.vue'
 import BaseListItemLink from '../base/BaseListItemLink.vue'
@@ -30,17 +28,7 @@ const el = ref<HTMLDivElement>()
 const { selected } = toRefs(props)
 useScrollOnActive(selected, el)
 
-const router = useRouter()
-
-onKeyboardShortcut(['enter'], () => {
-  if (!props.selected) return
-  action()
-})
-
-function action(fromClick = false) {
-  if ('route' in props.result && !fromClick) {
-    router.push(props.result.route)
-  }
+function action() {
   if ('onActivate' in props.result) {
     props.result.onActivate()
   }
@@ -59,8 +47,8 @@ function action(fromClick = false) {
       v-if="'route' in result"
       :to="result.route"
       :is-active="selected"
-      class="ptw-px-6 ptw-py-4 ptw-gap-4"
-      @navigate="action(true)"
+      class="px-6 py-4 gap-4"
+      @navigate="action()"
     >
       <SearchItemContent
         :result="result"
@@ -71,8 +59,8 @@ function action(fromClick = false) {
     <BaseListItem
       v-if="'onActivate' in result"
       :is-active="selected"
-      class="ptw-px-6 ptw-py-4 ptw-gap-4"
-      @navigate="action(true)"
+      class="px-6 py-4 gap-4"
+      @navigate="action()"
     >
       <SearchItemContent
         :result="result"

package/src/app/components/search/SearchItemContent.vue

@@ -23,14 +23,14 @@ const kindLabels = {
 <template>
   <BaseIcon
     :icon="result.icon ?? defaultIcons[result.kind]"
-    class="ptw-w-4 ptw-h-4"
+    class="w-4 h-4"
     :class="[
       !selected ? [
         result.iconColor
           ? 'bind-icon-color'
           : {
-            'ptw-text-primary-500': result.kind === 'story',
-            'ptw-text-gray-500': result.kind === 'variant',
+            'text-primary-500': result.kind === 'story',
+            'text-gray-500': result.kind === 'variant',
           },
       ] : [],
       {
@@ -38,27 +38,27 @@ const kindLabels = {
       },
     ]"
   />
-  <div class="ptw-flex-1">
-    <div class="ptw-flex">
+  <div class="flex-1">
+    <div class="flex">
       {{ result.title }}
-      <span class="ptw-ml-auto ptw-opacity-40">
+      <span class="ml-auto opacity-40">
         {{ kindLabels[result.kind] }}
       </span>
     </div>
 
     <div
       v-if="result.path?.length"
-      class="ptw-flex ptw-items-center ptw-gap-0.5 ptw-opacity-60"
+      class="flex items-center gap-0.5 opacity-60"
     >
       <div
         v-for="(p, index) of result.path"
         :key="index"
-        class="ptw-flex ptw-items-center ptw-gap-0.5"
+        class="flex items-center gap-0.5"
       >
         <Icon
           v-if="index > 0"
           icon="carbon:chevron-right"
-          class="ptw-w-4 ptw-h-4 ptw-mt-0.5 ptw-opacity-50"
+          class="w-4 h-4 mt-0.5 opacity-50"
         />
         <span>{{ p }}</span>
       </div>

package/src/app/components/search/SearchLoading.vue

@@ -4,11 +4,11 @@ import { Icon } from '@iconify/vue'
 
 <template>
   <div
-    class="poveste-search-loading ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500 ptw-h-[51px] ptw-opacity-30"
+    class="poveste-search-loading flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500 h-[51px] opacity-30"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none ptw-w-4 ptw-h-4"
+      class="flex-none w-4 h-4"
     />
 
     Loading...

package/src/app/components/search/SearchModal.vue

@@ -2,12 +2,6 @@
 import { defineAsyncComponent } from 'vue'
 import SearchLoading from './SearchLoading.vue'
 
-const SearchPane = defineAsyncComponent({
-  loader: () => import('./SearchPane.vue'),
-  loadingComponent: SearchLoading,
-  delay: 0,
-})
-
 defineProps({
   shown: {
     type: Boolean,
@@ -19,6 +13,12 @@ const emit = defineEmits({
   close: () => true,
 })
 
+const SearchPane = defineAsyncComponent({
+  loader: () => import('./SearchPane.vue'),
+  loadingComponent: SearchLoading,
+  delay: 0,
+})
+
 function close() {
   emit('close')
 }
@@ -27,14 +27,14 @@ function close() {
 <template>
   <div
     v-show="shown"
-    class="poveste-search-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
+    class="poveste-search-modal fixed inset-0 bg-white/80 dark:bg-gray-900/80 z-20"
     data-test-id="search-modal"
   >
     <div
-      class="ptw-absolute ptw-inset-0"
+      class="absolute inset-0"
       @click="close()"
     />
-    <div class="ptw-bg-white dark:ptw-bg-gray-900 md:ptw-mt-16 md:ptw-mx-auto ptw-w-screen ptw-max-w-[512px] ptw-shadow-xl ptw-border ptw-border-gray-200 dark:ptw-border-gray-750 ptw-rounded-lg ptw-relative ptw-divide-y ptw-divide-gray-200 dark:ptw-divide-gray-850">
+    <div class="bg-white dark:bg-gray-900 md:mt-16 md:mx-auto w-screen max-w-[512px] shadow-xl border border-gray-200 dark:border-gray-750 rounded-lg relative divide-y divide-gray-200 dark:divide-gray-850">
       <SearchPane
         :shown="shown"
         @close="close()"

package/src/app/components/search/SearchPane.vue

@@ -3,20 +3,20 @@ import type { ClientCommand } from '@poveste/shared'
 import type { SearchResult, SearchResultType, Story, Variant } from '../../types'
 import type { SearchData } from './types'
 import { Icon } from '@iconify/vue'
-import { useDebounce, useFocus } from '@vueuse/core'
+import { refDebounced, useFocus } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { registeredCommands } from 'virtual:$poveste-commands'
-import { computed, ref, watch } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useCommandStore } from '../../stores/command.js'
 import { useStoryStore } from '../../stores/story'
 import { builtinCommands, getCommandContext } from '../../util/commands.js'
+import { onKeyboardShortcut } from '../../util/keyboard.js'
 import { useSelection } from '../../util/select.js'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import { onUpdate, searchData } from './search-title-data'
 import SearchItem from './SearchItem.vue'
 
-const DocSearchData = () => import('./search-docs-data')
-
 const props = defineProps({
   shown: {
     type: Boolean,
@@ -28,6 +28,8 @@ const emit = defineEmits({
   close: () => true,
 })
 
+const DocSearchData = () => import('./search-docs-data')
+
 function close() {
   emit('close')
 }
@@ -51,7 +53,7 @@ watch(() => props.shown, (value) => {
 // Index
 
 const searchInputText = ref('')
-const rateLimitedSearch = useDebounce(searchInputText, 50)
+const rateLimitedSearch = refDebounced(searchInputText, 50)
 
 const storyStore = useStoryStore()
 
@@ -111,11 +113,13 @@ loadDocSearchIndex()
 
 // Search
 
-const titleResults = ref<SearchResult[]>([])
+const MAX_RESULTS = 50
+
+const titleResults = shallowRef<SearchResult[]>([])
 
 watch(rateLimitedSearch, async (value) => {
   const list: SearchResult[] = []
-  const result = titleSearchIndex.search(value)
+  const result = titleSearchIndex.search(value, { limit: MAX_RESULTS })
   let rank = 0
 
   for (const document of result) {
@@ -141,12 +145,12 @@ watch(rateLimitedSearch, async (value) => {
   titleResults.value = list
 })
 
-const docsResults = ref<SearchResult[]>([])
+const docsResults = shallowRef<SearchResult[]>([])
 
 async function searchOnDocField(query: string) {
   if (docSearchIndex) {
     const list: SearchResult[] = []
-    const result = docSearchIndex.search(query)
+    const result = docSearchIndex.search(query, { limit: MAX_RESULTS })
     let rank = 0
 
     for (const document of result) {
@@ -224,7 +228,7 @@ const allCommands = [
 const commandResults = computed(() => {
   if (__POVESTE_DEV__) {
     const commandCtx = getCommandContext()
-    const searchText = searchInputText.value.toLowerCase()
+    const searchText = rateLimitedSearch.value.toLowerCase()
     return allCommands
       .filter(command => !command.showIf || command.showIf(commandCtx))
       .filter(command => command.label.toLowerCase().includes(searchText) || command.searchText?.toLowerCase().includes(searchText))
@@ -250,8 +254,8 @@ function commandResultFactory(command: ClientCommand, rank: number): SearchResul
 
 // Results
 
-const results = computed(() => {
-  const list = [
+const results = computed<SearchResult[]>(() => {
+  const list: SearchResult[] = [
     ...commandResults.value,
     ...titleResults.value,
   ]
@@ -264,7 +268,7 @@ const results = computed(() => {
       list.push(r)
     }
   }
-  return list
+  return list.slice(0, MAX_RESULTS)
 })
 
 // Selection
@@ -274,23 +278,43 @@ const {
   selectNext,
   selectPrevious,
 } = useSelection(results)
+
+// Activation
+
+const router = useRouter()
+
+onKeyboardShortcut(['enter'], () => {
+  const result = results.value[selectedIndex.value]
+
+  if (!result) {
+    return
+  }
+
+  if ('route' in result) {
+    router.push(result.route)
+  }
+  if ('onActivate' in result) {
+    result.onActivate()
+  }
+  close()
+})
 </script>
 
 <template>
   <div
-    class="poveste-search-pane ptw-flex ptw-items-center ptw-gap-4 ptw-pl-6 ptw-border ptw-border-transparent focus-visible:ptw-border-primary-500"
+    class="poveste-search-pane flex items-center gap-4 pl-6 border border-transparent focus-visible:border-primary-500"
     @click="focused = true"
   >
     <Icon
       icon="carbon:search"
-      class="flex-none ptw-w-4 ptw-h-4"
+      class="flex-none w-4 h-4"
     />
 
     <input
       ref="input"
       v-model="searchInputText"
       placeholder="Search for stories, variants..."
-      class="ptw-bg-transparent ptw-w-full ptw-flex-1 ptw-pl-0 ptw-pr-6 ptw-py-4 ptw-outline-none"
+      class="bg-transparent w-full flex-1 pl-0 pr-6 py-4 outline-none"
       @keydown.down.prevent="selectNext()"
       @keydown.up.prevent="selectPrevious()"
       @keydown.escape="close()"
@@ -306,7 +330,7 @@ const {
 
   <div
     v-else-if="results.length"
-    class="ptw-max-h-[400px] ptw-overflow-y-auto ptw-rounded-b-lg"
+    class="max-h-[400px] overflow-y-auto rounded-b-lg"
   >
     <SearchItem
       v-for="(result, index) of results"