@poveste/app 0.14.0 → 0.16.0

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

@@ -2,7 +2,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCopyIcon } from '@poveste/controls'
+import { HstCopyIcon, HstTooltip } from '@poveste/controls'
 import { unindent } from '@poveste/shared'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
@@ -58,7 +58,7 @@ watch(() => [props.variant, generateSourceCodeFn.value], async () => {
   }
   catch (e) {
     console.error(e)
-    error.value = e.message
+    error.value = e instanceof Error ? e.message : String(e)
   }
 
   // Auto-switch
@@ -121,8 +121,8 @@ watch(() => props.variant, () => {
 
 const scroller = ref<HTMLElement>()
 
-function onScroll(event) {
-  if (sourceHtml.value) {
+function onScroll(event: Event) {
+  if (sourceHtml.value && event.target instanceof HTMLElement) {
     lastScroll = event.target.scrollTop
   }
 }
@@ -151,50 +151,56 @@ watch(sourceHtml, async () => {
 
       <!-- Display source modes -->
       <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="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' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
-            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : 'opacity-50',
-          ]"
-          @click="dynamicSourceCode && (displayedSource = 'dynamic')"
+        <HstTooltip
+          :content="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
         >
-          <Icon
-            icon="carbon:flash"
-            class="w-4 h-4 flex-none"
-          />
-          <span
-            class="transition-opacity duration-300"
-            :class="{
-              'opacity-0': displayedSource !== 'dynamic',
-            }"
+          <button
+            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' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
+              dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'dynamic' && 'opacity-50',
+            ]"
+            @click="dynamicSourceCode && (displayedSource = 'dynamic')"
           >
-            Dynamic
-          </span>
-        </button>
-        <button
-          v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
-          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' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 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:flash"
+              class="w-4 h-4 flex-none"
+            />
+            <span
+              class="transition-opacity duration-300"
+              :class="{
+                'opacity-0': displayedSource !== 'dynamic',
+              }"
+            >
+              Dynamic
+            </span>
+          </button>
+        </HstTooltip>
+        <HstTooltip
+          :content="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
         >
-          <Icon
-            icon="carbon:document"
-            class="w-4 h-4 flex-none"
-          />
-          <span
-            class="transition-opacity duration-300"
-            :class="{
-              'opacity-0': displayedSource !== 'static',
-            }"
+          <button
+            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' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 dark:text-primary-400',
+              staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'static' && 'opacity-50',
+            ]"
+            @click="staticSourceCode && (displayedSource = 'static')"
           >
-            Static
-          </span>
-        </button>
+            <Icon
+              icon="carbon:document"
+              class="w-4 h-4 flex-none"
+            />
+            <span
+              class="transition-opacity duration-300"
+              :class="{
+                'opacity-0': displayedSource !== 'static',
+              }"
+            >
+              Static
+            </span>
+          </button>
+        </HstTooltip>
       </div>
 
       <HstCopyIcon
@@ -223,6 +229,7 @@ watch(sourceHtml, async () => {
       ref="scroller"
       class="__poveste-code-placeholder w-full h-full p-4 outline-none bg-transparent resize-none m-0"
       :value="displayedSourceCode"
+      aria-label="Source code"
       readonly
       data-testid="story-source-code"
       @scroll="onScroll"

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

@@ -8,9 +8,10 @@ defineProps<{
   selected: boolean
 }>()
 
-const defaultIcons = {
+const defaultIcons: Record<SearchResult['kind'], string> = {
   story: 'carbon:cube',
   variant: 'carbon:cube',
+  command: 'carbon:chevron-right',
 }
 
 const kindLabels = {

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

@@ -138,8 +138,7 @@ watch(rateLimitedSearch, async (value) => {
         break
       }
       case 'variant': {
-        const [storyId] = idMapData.id.split(':')
-        const story = storyStore.getStoryById(storyId)
+        const story = storyStore.getStoryById(idMapData.id.replace(/:.*$/s, ''))
         const variant = storyStore.getVariantById(idMapData.id)
         if (!story || !variant) continue
         list.push(variantResultFactory(story, variant, rank))
@@ -268,7 +267,7 @@ const results = computed<SearchResult[]>(() => {
     ...commandResults.value,
     ...titleResults.value,
   ]
-  const seen = {}
+  const seen: Record<string, boolean> = {}
   for (const r of titleResults.value) {
     seen[r.id] = true
   }

package/src/app/components/story/StoryResponsivePreview.vue

@@ -2,8 +2,8 @@
 import type { Ref } from 'vue'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { useEventListener } from '@vueuse/core'
-import { VTooltip as vTooltip } from 'floating-vue'
 import { computed, onUnmounted, ref } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
@@ -101,7 +101,9 @@ function useDragger(el: Ref<HTMLDivElement | undefined>, value: Ref<number | nul
   function onTouchStart(event: TouchEvent) {
     event.preventDefault()
     event.stopPropagation()
-    const start = axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY
+    const [touch] = event.touches
+    if (!touch) return
+    const start = axis === 'x' ? touch.clientX : touch.clientY
     const startValue = startFrom()
     resizing.value = true
 
@@ -112,7 +114,9 @@ function useDragger(el: Ref<HTMLDivElement | undefined>, value: Ref<number | nul
     ]
 
     function onTouchMove(event: TouchEvent) {
-      const delta = (axis === 'x' ? event.touches[0].clientX : event.touches[0].clientY) - start
+      const [touch] = event.touches
+      if (!touch) return
+      const delta = (axis === 'x' ? touch.clientX : touch.clientY) - start
       value.value = Math.max(min, Math.min(max, startValue + delta))
     }
 
@@ -197,9 +201,18 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
              preview would otherwise be shown against the bare box below the
              first screenful. The checkerboard is measured against this for the
              same reason — but the draggers are not, since they belong to the
-             visible box rather than to the story's full height. -->
+             visible box rather than to the story's full height.
+             `flex`, and `flex-1` rather than `h-full` below, because that is the
+             half `min-h-full` costs: a percentage height resolves against a
+             parent's *specified* height, and this one's is `auto`. So `h-full`
+             collapsed all the way down to the iframe, which then fell back to
+             its own default of 150px and clipped every story taller than that
+             (#949). A flex child reads the used height instead, which
+             `min-height` does give it — and with `min-height: auto` it still
+             refuses to shrink below its content, so a tall story pushes this box
+             taller exactly as it did. -->
         <div
-          class="rounded-lg min-h-full relative"
+          class="rounded-lg min-h-full relative flex flex-col"
           :class="responsive ? 'bind-preview-bg' : ''"
           :data-testid="responsive ? 'responsive-preview-bg' : undefined"
         >
@@ -208,10 +221,17 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             class="absolute inset-0 w-full h-full text-gray-500/20"
           />
           <div
-            class="h-full relative"
+            class="flex-1 relative flex flex-col"
             :class="responsive ? 'p-8' : ''"
           >
-            <div class="w-full h-full relative">
+            <!-- `grid`, so the one in-flow child stretches to this box without
+                 asking for a percentage of it. `h-full` here read a height that
+                 is decided by flex, which Chrome treats as indefinite for
+                 percentage resolution — the same wall one level up. Stretching
+                 is not shrinking: the child keeps its `min-height: auto`, so an
+                 inline story taller than the preview still grows this and the
+                 box above it (#258). -->
+            <div class="w-full flex-1 relative grid">
               <div class="absolute inset-0" />
 
               <slot
@@ -239,31 +259,43 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
 
         <!-- Resize Dragger -->
         <template v-if="isResponsiveEnabled">
-          <div
-            ref="horizontalDragger"
-            v-tooltip.right="sizeTooltip"
-            class="absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+          <HstTooltip
+            :content="sizeTooltip"
+            side="right"
           >
-            <Icon
-              icon="mdi:drag-vertical-variant"
-              class="w-4 h-4 opacity-20 group-hover:opacity-90"
-            />
-          </div>
-          <div
-            ref="verticalDragger"
-            v-tooltip.bottom="sizeTooltip"
-            class="absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+            <div
+              ref="horizontalDragger"
+              class="absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-vertical-variant"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
+              />
+            </div>
+          </HstTooltip>
+          <HstTooltip
+            :content="sizeTooltip"
+            side="bottom"
           >
-            <Icon
-              icon="mdi:drag-horizontal-variant"
-              class="w-4 h-4 opacity-20 group-hover:opacity-90"
+            <div
+              ref="verticalDragger"
+              class="absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-horizontal-variant"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
+              />
+            </div>
+          </HstTooltip>
+          <HstTooltip
+            :content="sizeTooltip"
+            side="bottom"
+          >
+            <div
+              ref="cornerDragger"
+              class="absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
             />
-          </div>
-          <div
-            ref="cornerDragger"
-            v-tooltip.bottom="sizeTooltip"
-            class="absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
-          />
+          </HstTooltip>
         </template>
       </div>
     </div>

package/src/app/components/story/StoryVariantGridItem.vue

@@ -2,7 +2,7 @@
 import type { PropType } from 'vue'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCopyIcon } from '@poveste/controls'
+import { HstCopyIcon, HstTooltip } from '@poveste/controls'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, nextTick, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -111,28 +111,29 @@ const useIframe = computed(() => {
   >
     <!-- Header -->
     <div class="flex-none flex items-center">
-      <RouterLink
-        v-tooltip="variant.title"
-        :to="targetRoute"
-        class="rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink"
-        :class="{
-          'hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800': !isActive,
-          'bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200': isActive,
-        }"
-      >
-        <Icon
-          :icon="variant.icon ?? 'carbon:cube'"
-          class="w-4 h-4 opacity-50"
+      <HstTooltip :content="variant.title">
+        <RouterLink
+          :to="targetRoute"
+          class="rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink"
           :class="{
-            'text-gray-500': !isActive && !variant.iconColor,
-            'bind-icon-color': !isActive && variant.iconColor,
+            'hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800': !isActive,
+            'bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200': isActive,
           }"
-        />
-        <span class="truncate flex-1">{{ variant.title }}</span>
-      </RouterLink>
+        >
+          <Icon
+            :icon="variant.icon ?? 'carbon:cube'"
+            class="w-4 h-4 opacity-50"
+            :class="{
+              'text-gray-500': !isActive && !variant.iconColor,
+              'bind-icon-color': !isActive && variant.iconColor,
+            }"
+          />
+          <span class="truncate flex-1">{{ variant.title }}</span>
+        </RouterLink>
+      </HstTooltip>
 
       <!-- Toolbar -->
-      <div class="flex-none ml-auto hidden group-hover:flex items-center">
+      <div class="flex-none ml-auto hidden group-hover:flex group-focus-within:flex items-center">
         <HstCopyIcon
           :content="() => getSourceCode(story, variant)"
         />

package/src/app/components/story/StoryVariantSingle.vue

@@ -36,6 +36,7 @@ const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyS
   -->
   <BaseSplitPane
     save-id="story-single-main-split"
+    label="Resize the variant list"
     :min="5"
     :max="40"
     :default-split="17"

package/src/app/components/story/StoryVariantSinglePreviewRemote.vue

@@ -12,6 +12,7 @@ import { useStoryErrorStore } from '../../stores/story-errors'
 import { EVENT_SEND, PREVIEW_SETTINGS_REQUEST, PREVIEW_SETTINGS_SYNC, SANDBOX_HEIGHT, SANDBOX_READY, SANDBOX_RETARGET, STATE_SYNC } from '../../util/const'
 import { firstReportedHeight } from '../../util/grid-cell-height'
 import { trackWindow } from '../../util/keyboard'
+import { createRenderTracker } from '../../util/render-tracker'
 import { getSandboxUrl } from '../../util/sandbox'
 import { toRawDeep } from '../../util/state'
 import { createStateBridge } from '../../util/state-bridge'
@@ -31,11 +32,7 @@ const errorStore = useStoryErrorStore()
 
 const storyError = computed(() => errorStore.forVariant(props.story.id, props.variant.id))
 
-// The realm re-renders on every retarget, so a stale error must not outlive the
-// render that produced it — otherwise a fixed story stays marked until reload.
-watch(() => [props.story.id, props.variant.id], () => {
-  errorStore.clear(props.story.id, props.variant.id)
-})
+const render = createRenderTracker()
 
 // Iframe
 
@@ -103,6 +100,8 @@ function fromCurrentOccupant(data: { storyId?: string, variantId?: string }) {
 useEventListener(window, 'message', (event) => {
   // With many grid iframes mounted, every sandbox postMessage hits every
   // parent listener. Skip events that didn't originate from this iframe.
+  // Paired with the origin check in `sandbox.ts`, which guards the other
+  // direction (#379).
   if (event.source !== iframe.value?.contentWindow) return
   switch (event.data?.type) {
     case STATE_SYNC:
@@ -115,10 +114,15 @@ useEventListener(window, 'message', (event) => {
       break
     case SANDBOX_READY:
       if (!fromCurrentOccupant(event.data)) break
+      // Last render wins, which is what makes a fixed story stop being marked
+      // without a reload. Clearing on the id change instead cleared the pair
+      // being navigated *to*, so arriving at a broken story hid its error (#597).
+      if (render.wasClean()) errorStore.clear(props.story.id, props.variant.id)
       setPreviewReady()
       break
     case SANDBOX_ERROR:
       if (!fromCurrentOccupant(event.data)) break
+      render.threw()
       errorStore.report({
         message: event.data.message,
         stack: event.data.stack,
@@ -207,6 +211,7 @@ let stopTrackKeyboard: (() => void) | undefined
 let unmounted = false
 
 function reload(url: string) {
+  render.begin()
   retargets = 0
   retargeting.value = false
   clearTimeout(retargetTimer)
@@ -223,6 +228,7 @@ function reload(url: string) {
 }
 
 watch(sandboxUrl, (url) => {
+  render.begin()
   // A new occupant has agreed to nothing, so neither has this end. Kept as a
   // new bridge rather than a reset so there is one way to be in that state.
   bridge = createStateBridge(postState)
@@ -285,12 +291,12 @@ function previewStyle(isResponsiveEnabled: boolean, finalWidth: number | null, f
   const style: Record<string, string> = {}
 
   if (isResponsiveEnabled) {
-    if (finalWidth) style.width = `${finalWidth}px`
-    if (finalHeight) style.height = `${finalHeight}px`
+    if (finalWidth) style['width'] = `${finalWidth}px`
+    if (finalHeight) style['height'] = `${finalHeight}px`
   }
 
   if (props.autoHeight) {
-    style.height = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`
+    style['height'] = `${Math.min(reportedHeight.value ?? placeholderHeight.value, MAX_AUTO_HEIGHT)}px`
   }
 
   return style

package/src/app/components/story/StoryView.vue

@@ -47,7 +47,9 @@ watch(() => storyStore.currentVariant, (value) => {
 watch(() => [storyStore.currentStory, storyStore.currentVariant], () => {
   if (!storyStore.currentVariant && autoSelectsVariant(storyStore.currentStory)) {
     const variant = storyStore.currentStory.lastSelectedVariant ?? storyStore.currentStory.variants[0]
-    setVariant(variant.id)
+    if (variant) {
+      setVariant(variant.id)
+    }
   }
 }, {
   immediate: true,
@@ -109,6 +111,7 @@ function scrollDocsToTop() {
     <BaseSplitPane
       v-else
       :save-id="`story-main-${placement}`"
+      label="Resize the preview"
       :orientation="splitOrientation"
       :min="30"
       :max="95"

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { openInEditor } from '../../util/open-in-editor.js'
 import TopBarChipItem from '../app/TopBarChipItem.vue'
 
@@ -10,16 +11,17 @@ defineProps<{
 </script>
 
 <template>
-  <TopBarChipItem
-    v-tooltip="tooltip"
-    aria-label="Open story in editor"
-    target="_blank"
-    class="poveste-toolbar-open-in-editor"
-    @click="openInEditor(file)"
-  >
-    <Icon
-      icon="carbon:script-reference"
-      class="w-4 h-4"
-    />
-  </TopBarChipItem>
+  <HstTooltip :content="tooltip">
+    <TopBarChipItem
+      aria-label="Open story in editor"
+      target="_blank"
+      class="poveste-toolbar-open-in-editor"
+      @click="openInEditor(file)"
+    >
+      <Icon
+        icon="carbon:script-reference"
+        class="w-4 h-4"
+      />
+    </TopBarChipItem>
+  </HstTooltip>
 </template>

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -4,6 +4,7 @@ import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { povesteConfig } from '../../util/config'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
+import BaseDropdown from '../base/BaseDropdown.vue'
 
 const previewSettings = usePreviewSettingsStore()
 const settings = previewSettings.currentSettings
@@ -21,32 +22,30 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
 </script>
 
 <template>
-  <VDropdown
+  <BaseDropdown
     v-if="showDropdown"
-    placement="bottom-end"
-    :skidding="6"
+    side="bottom"
+    align="end"
+    :align-offset="6"
+    tooltip="Preview appearance"
     class="poveste-toolbar-background flex-none"
     data-testid="toolbar-background"
   >
-    <!-- The tooltip would sit on top of the first row of the dropdown, so drop
-    it while the dropdown is open. -->
-    <template #default="{ shown }">
-      <div
-        v-tooltip="shown ? '' : 'Preview appearance'"
-        class="flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group"
-      >
-        <Icon
-          icon="carbon:color-palette"
-          class="w-4 h-4"
-        />
-        <Icon
-          icon="carbon:chevron-down"
-          class="w-3 h-3 opacity-40 group-hover:opacity-70"
-        />
-      </div>
-    </template>
+    <button
+      class="flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group"
+      aria-label="Preview appearance"
+    >
+      <Icon
+        icon="carbon:color-palette"
+        class="w-4 h-4"
+      />
+      <Icon
+        icon="carbon:chevron-down"
+        class="w-3 h-3 opacity-40 group-hover:opacity-70"
+      />
+    </button>
 
-    <template #popper="{ hide }">
+    <template #popper="{ close }">
       <div
         class="flex flex-col items-stretch"
         data-testid="background-popper"
@@ -89,7 +88,7 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
               ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
               : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
-          @click="previewSettings.setBackgroundColor(option.color);hide()"
+          @click="previewSettings.setBackgroundColor(option.color);close()"
         >
           <span class="mr-auto">{{ option.label }}</span>
           <template v-if="option.color !== '$checkerboard'">
@@ -107,5 +106,5 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
         </button>
       </div>
     </template>
-  </VDropdown>
+  </BaseDropdown>
 </template>

package/src/app/components/toolbar/ToolbarNewTab.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { computed } from 'vue'
 import { getSandboxUrl } from '../../util/sandbox'
 import TopBarChipItem from '../app/TopBarChipItem.vue'
@@ -16,16 +17,17 @@ const sandboxUrl = computed(() => {
 </script>
 
 <template>
-  <TopBarChipItem
-    v-tooltip="'Open variant in new tab'"
-    :href="sandboxUrl"
-    target="_blank"
-    aria-label="Open variant in new tab"
-    class="poveste-toolbar-new-tab"
-  >
-    <Icon
-      icon="carbon:launch"
-      class="w-4 h-4"
-    />
-  </TopBarChipItem>
+  <HstTooltip content="Open variant in new tab">
+    <TopBarChipItem
+      :href="sandboxUrl"
+      target="_blank"
+      aria-label="Open variant in new tab"
+      class="poveste-toolbar-new-tab"
+    >
+      <Icon
+        icon="carbon:launch"
+        class="w-4 h-4"
+      />
+    </TopBarChipItem>
+  </HstTooltip>
 </template>