@poveste/app 0.1.0 → 0.1.2

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

@@ -2,10 +2,10 @@
 import type { PropType, Ref } from 'vue'
 import type { Story } from '../../types'
 import { Icon } from '@iconify/vue'
-import { markdownFiles } from 'virtual:$histoire-markdown-files'
+import { markdownFiles } from 'virtual:$poveste-markdown-files'
 import { computed, nextTick, ref, toRefs, watch, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { histoireConfig } from '../../util/config.js'
+import { povesteConfig } from '../../util/config.js'
 import BaseEmpty from '../base/BaseEmpty.vue'
 import DevOnlyToolbarOpenInEditor from '../toolbar/DevOnlyToolbarOpenInEditor.vue'
 
@@ -103,7 +103,7 @@ function onClick(e: MouseEvent) {
 
 function getHash() {
   const hash = location.hash
-  if (histoireConfig.routerMode === 'hash') {
+  if (povesteConfig.routerMode === 'hash') {
     const index = hash.indexOf('#', 1)
     if (index !== -1) {
       return hash.slice(index)
@@ -141,7 +141,7 @@ const route = useRoute()
 
 async function patchAnchorLinks() {
   await nextTick()
-  if (histoireConfig.routerMode === 'hash' && renderedEl.value) {
+  if (povesteConfig.routerMode === 'hash' && renderedEl.value) {
     const links = renderedEl.value.querySelectorAll('a.header-anchor')
     for (const link of links) {
       const href = link.getAttribute('href')
@@ -165,11 +165,11 @@ const filePath = computed(() => story.value.file?.docsFilePath ?? (props.standal
 
 <template>
   <div
-    class="histoire-story-docs"
+    class="poveste-story-docs"
     @click.capture="onClick"
   >
     <div
-      v-if="__HISTOIRE_DEV__ && renderedDoc && filePath"
+      v-if="__POVESTE_DEV__ && renderedDoc && filePath"
       class="htw-flex htw-items-center htw-gap-2 htw-p-2"
       :class="{
         'htw-pt-4': !standalone,

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

@@ -20,7 +20,7 @@ const formattedArgument = computed(() => {
 
 <template>
   <VDropdown
-    class="histoire-story-event htw-group"
+    class="poveste-story-event htw-group"
     placement="right"
     data-test-id="event-item"
   >

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

@@ -26,7 +26,7 @@ const eventsElement = ref<HTMLDivElement>()
 <template>
   <div
     ref="eventsElement"
-    class="histoire-story-events"
+    class="poveste-story-events"
   >
     <BaseEmpty
       v-if="!hasEvents"

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

@@ -30,14 +30,14 @@ const panelContentComponent = computed(() => {
 <template>
   <BaseEmpty
     v-if="!storyStore.currentVariant"
-    class="histoire-story-side-panel histoire-selection"
+    class="poveste-story-side-panel poveste-selection"
   >
     <span>Select a variant</span>
   </BaseEmpty>
 
   <BaseEmpty
     v-else-if="!storyStore.currentVariant.configReady || !storyStore.currentVariant.previewReady"
-    class="histoire-story-side-panel histoire-loading"
+    class="poveste-story-side-panel poveste-loading"
   >
     <span>Loading...</span>
   </BaseEmpty>
@@ -46,7 +46,7 @@ const panelContentComponent = computed(() => {
     v-else
     save-id="story-sidepane"
     orientation="portrait"
-    class="histoire-story-side-panel histoire-loaded htw-h-full"
+    class="poveste-story-side-panel poveste-loaded htw-h-full"
     data-test-id="story-side-panel"
   >
     <template #first>

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

@@ -5,7 +5,7 @@ import { Icon } from '@iconify/vue'
 import { HstCopyIcon } from '@poveste/controls'
 import { unindent } from '@poveste/shared'
 import { createHighlighter } from 'shiki'
-import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+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 BaseEmpty from '../base/BaseEmpty.vue'
@@ -133,7 +133,7 @@ watch(sourceHtml, async () => {
 
 <template>
   <div
-    class="histoire-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
+    class="poveste-story-source-code htw-bg-gray-50 dark:htw-bg-gray-750 htw-h-full htw-overflow-hidden htw-flex htw-flex-col"
   >
     <!-- Toolbar -->
     <div
@@ -217,7 +217,7 @@ watch(sourceHtml, async () => {
     <textarea
       v-else-if="!sourceHtml"
       ref="scroller"
-      class="__histoire-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
+      class="__poveste-code-placeholder htw-w-full htw-h-full htw-p-4 htw-outline-none htw-bg-transparent htw-resize-none htw-m-0"
       :value="displayedSourceCode"
       readonly
       data-test-id="story-source-code"
@@ -232,7 +232,7 @@ watch(sourceHtml, async () => {
       @scroll="onScroll"
     >
       <div
-        class="__histoire-code htw-p-4 htw-w-fit"
+        class="__poveste-code __histoire-code htw-p-4 htw-w-fit"
         v-html="sourceHtml"
       />
     </div>
@@ -241,7 +241,7 @@ watch(sourceHtml, async () => {
 </template>
 
 <style scoped>
-.__histoire-code-placeholder {
+.__poveste-code-placeholder {
   color: inherit;
   font-size: inherit;
 }

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

@@ -51,7 +51,7 @@ function action(fromClick = false) {
 <template>
   <div
     ref="el"
-    class="histoire-search-item"
+    class="poveste-search-item"
     data-test-id="search-item"
     :data-selected="selected ? '' : undefined"
   >

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

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

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

@@ -27,7 +27,7 @@ function close() {
 <template>
   <div
     v-show="shown"
-    class="histoire-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    class="poveste-search-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
     data-test-id="search-modal"
   >
     <div

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

@@ -5,7 +5,7 @@ import type { SearchData } from './types'
 import { Icon } from '@iconify/vue'
 import { useDebounce, useFocus } from '@vueuse/core'
 import Fuse from 'fuse.js'
-import { registeredCommands } from 'virtual:$histoire-commands'
+import { registeredCommands } from 'virtual:$poveste-commands'
 import { computed, ref, watch } from 'vue'
 import { useCommandStore } from '../../stores/command.js'
 import { useStoryStore } from '../../stores/story'
@@ -222,7 +222,7 @@ const allCommands = [
 ]
 
 const commandResults = computed(() => {
-  if (__HISTOIRE_DEV__) {
+  if (__POVESTE_DEV__) {
     const commandCtx = getCommandContext()
     const searchText = searchInputText.value.toLowerCase()
     return allCommands
@@ -278,7 +278,7 @@ const {
 
 <template>
   <div
-    class="histoire-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
+    class="poveste-search-pane htw-flex htw-items-center htw-gap-4 htw-pl-6 htw-border htw-border-transparent focus-visible:htw-border-primary-500"
     @click="focused = true"
   >
     <Icon

package/src/app/components/search/search-docs-data.ts

@@ -1,5 +1,5 @@
 import type { SearchData } from './types.js'
-import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-docs-data'
+import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$poveste-search-docs-data'
 import { markRaw } from 'vue'
 
 export const searchData: SearchData = markRaw(_searchData)

package/src/app/components/search/search-title-data.ts

@@ -1,5 +1,5 @@
 import type { SearchData } from './types.js'
-import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$histoire-search-title-data'
+import { onUpdate as _onUpdate, searchData as _searchData } from 'virtual:$poveste-search-title-data'
 import { markRaw } from 'vue'
 
 export const searchData: SearchData = markRaw(_searchData)

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

@@ -6,7 +6,7 @@ export default {
 
 <script lang="ts" setup>
 import type { Story } from '../../types'
-import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
 
 const props = defineProps<{
@@ -28,7 +28,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
-    class="histoire-generic-mount-story"
+    class="poveste-generic-mount-story histoire-generic-mount-story"
     :story="story"
     v-bind="$attrs"
   />

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

@@ -6,7 +6,7 @@ export default {
 
 <script lang="ts" setup>
 import type { Story } from '../../types'
-import { clientSupportPlugins } from 'virtual:$histoire-support-plugins-client'
+import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { markRaw, ref, watchEffect } from 'vue'
 
 const props = defineProps<{
@@ -34,7 +34,7 @@ watchEffect(async () => {
   <component
     :is="mountComponent"
     v-if="mountComponent"
-    class="histoire-generic-render-story __histoire-render-story"
+    class="poveste-generic-render-story __poveste-render-story histoire-generic-render-story __histoire-render-story"
     :story="story"
     v-bind="$attrs"
   />

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

@@ -122,7 +122,7 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
 </script>
 
 <template>
-  <div class="histoire-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
+  <div class="poveste-story-responsive-preview htw-w-full htw-h-full htw-flex-1 htw-rounded-lg htw-relative htw-overflow-hidden">
     <div
       v-if="isResponsiveEnabled"
       class="htw-absolute htw-inset-0 htw-w-full htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 htw-rounded-r-lg htw-border-l-2 htw-border-gray-500/10 dark:htw-border-gray-700/30 htw-overflow-hidden"

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

@@ -119,7 +119,7 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
 </script>
 
 <template>
-  <div class="histoire-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __histoire-pane-shadow-from-right">
+  <div class="poveste-story-variant-grid htw-flex htw-flex-col htw-items-stretch htw-h-full __poveste-pane-shadow-from-right">
     <!-- Toolbar -->
     <div
       v-if="!isMobile"
@@ -129,7 +129,7 @@ const columnCount = computed(() => Math.min(storyStore.currentStory.variants.len
       <ToolbarTextDirection />
 
       <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
+        v-if="__POVESTE_DEV__"
         :file="storyStore.currentStory.file?.filePath"
         tooltip="Edit story in editor"
       />

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

@@ -7,7 +7,7 @@ import { useResizeObserver } from '@vueuse/core'
 import { computed, ref, toRefs } from 'vue'
 import { useRouter } from 'vue-router'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { histoireConfig } from '../../util/config'
+import { povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 import { getSourceCode } from '../../util/docs'
 import { getContrastColor } from '../../util/preview-settings'
@@ -67,13 +67,13 @@ useResizeObserver(el, () => {
 const settings = usePreviewSettingsStore().currentSettings
 
 const contrastColor = computed(() => getContrastColor(settings))
-const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
+const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor)
 </script>
 
 <template>
   <div
     ref="el"
-    class="histoire-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
+    class="poveste-story-variant-grid-item htw-cursor-default htw-flex htw-flex-col htw-gap-y-1 htw-group"
   >
     <!-- Header -->
     <div class="htw-flex-none htw-flex htw-items-center">
@@ -133,6 +133,8 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
       <div
         class="htw-relative htw-h-full"
         :style="{
+          '--poveste-contrast-color': contrastColor,
+          // Deprecated alias — keep so stories referencing `var(--histoire-contrast-color)` still work.
           '--histoire-contrast-color': contrastColor,
           'color': autoApplyContrastColor ? contrastColor : undefined,
         }"
@@ -143,7 +145,7 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
           :story="story"
           :dir="settings.textDirection"
           :class="{
-            [histoireConfig.theme.darkClass]: isDark,
+            [povesteConfig.theme.darkClass]: isDark,
           }"
           @ready="onReady"
         />

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

@@ -23,7 +23,7 @@ useScrollOnActive(isActive, el)
 <template>
   <div
     ref="el"
-    class="histoire-story-variant-list-item"
+    class="poveste-story-variant-list-item"
     data-test-id="story-variant-list-item"
   >
     <BaseListItemLink

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

@@ -21,7 +21,7 @@ const variant = computed(() => storyStore.currentVariant)
 <template>
   <div
     v-if="hasSingleVariant && variant"
-    class="histoire-story-variant-single htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+    class="poveste-story-variant-single htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
   >
     <StoryVariantSingleView
       :variant="variant"
@@ -86,7 +86,7 @@ const variant = computed(() => storyStore.currentVariant)
       <template #last>
         <div
           v-if="storyStore.currentVariant"
-          class="htw-p-2 htw-h-full __histoire-pane-shadow-from-right"
+          class="htw-p-2 htw-h-full __poveste-pane-shadow-from-right"
         >
           <StoryVariantSingleView
             :variant="storyStore.currentVariant"

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

@@ -2,7 +2,7 @@
 import type { Story, Variant } from '../../types'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { histoireConfig } from '../../util/config'
+import { povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 import { getContrastColor } from '../../util/preview-settings'
 import GenericRenderStory from './GenericRenderStory.vue'
@@ -26,13 +26,13 @@ function onReady() {
 const settings = usePreviewSettingsStore().currentSettings
 
 const contrastColor = computed(() => getContrastColor(settings))
-const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrastColor)
+const autoApplyContrastColor = computed(() => !!povesteConfig.autoApplyContrastColor)
 </script>
 
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight }"
-    class="histoire-story-variant-single-preview-native"
+    class="poveste-story-variant-single-preview-native"
     :variant="variant"
   >
     <div
@@ -42,6 +42,8 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
           height: finalHeight ? `${finalHeight}px` : '100%',
         } : { width: '100%', height: '100%' },
         {
+          '--poveste-contrast-color': contrastColor,
+          // Deprecated alias — keep so stories referencing `var(--histoire-contrast-color)` still work.
           '--histoire-contrast-color': contrastColor,
           'color': autoApplyContrastColor ? contrastColor : undefined,
         },
@@ -55,8 +57,8 @@ const autoApplyContrastColor = computed(() => !!histoireConfig.autoApplyContrast
         :story="story"
         class="htw-h-full"
         :class="{
-          [histoireConfig.sandboxDarkClass]: isDark, // @TODO remove
-          [histoireConfig.theme.darkClass]: isDark,
+          [povesteConfig.sandboxDarkClass]: isDark, // @TODO remove
+          [povesteConfig.theme.darkClass]: isDark,
         }"
         :dir="settings.textDirection"
         @ready="onReady"

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

@@ -121,7 +121,7 @@ function onIframeLoad() {
 <template>
   <StoryResponsivePreview
     v-slot="{ isResponsiveEnabled, finalWidth, finalHeight, resizing }"
-    class="histoire-story-variant-single-preview-remote"
+    class="poveste-story-variant-single-preview-remote"
     :variant="variant"
   >
     <iframe

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

@@ -18,7 +18,7 @@ defineProps<{
 
 <template>
   <div
-    class="histoire-story-variant-single-view htw-h-full htw-flex htw-flex-col"
+    class="poveste-story-variant-single-view htw-h-full htw-flex htw-flex-col"
     data-test-id="story-variant-single-view"
   >
     <!-- Toolbar -->
@@ -40,7 +40,7 @@ defineProps<{
       />
 
       <DevOnlyToolbarOpenInEditor
-        v-if="__HISTOIRE_DEV__"
+        v-if="__POVESTE_DEV__"
         :file="story.file?.filePath"
         tooltip="Edit story in editor"
       />

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

@@ -63,7 +63,7 @@ function scrollDocsToTop() {
 <template>
   <BaseEmpty
     v-if="!storyStore.currentStory"
-    class="histoire-story-view histoire-no-story"
+    class="poveste-story-view poveste-no-story"
   >
     <Icon
       icon="carbon:software-resource-resource"
@@ -73,7 +73,7 @@ function scrollDocsToTop() {
 
   <div
     v-else
-    class="histoire-story-view histoire-with-story htw-h-full"
+    class="poveste-story-view poveste-with-story htw-h-full"
   >
     <div
       v-if="storyStore.currentStory.docsOnly"

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

@@ -22,7 +22,7 @@ watch(variant, () => {
 </script>
 
 <template>
-  <div class="histoire-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
+  <div class="poveste-story-viewer htw-bg-gray-50 htw-h-full dark:htw-bg-gray-750">
     <StoryVariantGrid
       v-if="storyStore.currentStory.layout.type === 'grid'"
     />

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

@@ -12,7 +12,7 @@ defineProps<{
   <a
     v-tooltip="tooltip"
     target="_blank"
-    class="histoire-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="poveste-toolbar-open-in-editor htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
     @click="openInEditor(file)"
   >
     <Icon

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

@@ -2,7 +2,7 @@
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { histoireConfig } from '../../util/config'
+import { povesteConfig } from '../../util/config'
 import { getContrastColor } from '../../util/preview-settings'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
@@ -13,10 +13,10 @@ const contrastColor = computed(() => getContrastColor(settings))
 
 <template>
   <VDropdown
-    v-if="histoireConfig.backgroundPresets.length"
+    v-if="povesteConfig.backgroundPresets.length"
     placement="bottom-end"
     :skidding="6"
-    class="histoire-toolbar-background htw-h-full htw-flex-none"
+    class="poveste-toolbar-background htw-h-full htw-flex-none"
     data-test-id="toolbar-background"
   >
     <div
@@ -44,7 +44,7 @@ const contrastColor = computed(() => getContrastColor(settings))
         </BaseCheckbox>
 
         <button
-          v-for="(option, index) in histoireConfig.backgroundPresets"
+          v-for="(option, index) in povesteConfig.backgroundPresets"
           :key="index"
           class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-items-baseline htw-gap-4"
           :class="[

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

@@ -19,7 +19,7 @@ const sandboxUrl = computed(() => {
     v-tooltip="'Open variant in new tab'"
     :href="sandboxUrl"
     target="_blank"
-    class="histoire-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="poveste-toolbar-new-tab htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
   >
     <Icon
       icon="carbon:launch"

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
-import { histoireConfig } from '../../util/config'
+import { povesteConfig } from '../../util/config'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
 
 const settings = usePreviewSettingsStore().currentSettings
@@ -12,14 +12,14 @@ const settings = usePreviewSettingsStore().currentSettings
   <VDropdown
     placement="bottom-end"
     :skidding="6"
-    :disabled="!histoireConfig.responsivePresets?.length"
-    class="histoire-toolbar-responsive-size htw-h-full htw-flex-none"
+    :disabled="!povesteConfig.responsivePresets?.length"
+    class="poveste-toolbar-responsive-size htw-h-full htw-flex-none"
   >
     <div
       v-tooltip="'Responsive sizes'"
       class="htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 htw-group"
       :class="{
-        'htw-cursor-pointer hover:htw-text-primary-500': histoireConfig.responsivePresets?.length,
+        'htw-cursor-pointer hover:htw-text-primary-500': povesteConfig.responsivePresets?.length,
       }"
     >
       <Icon
@@ -59,7 +59,7 @@ const settings = usePreviewSettingsStore().currentSettings
         </div>
 
         <button
-          v-for="(preset, index) in histoireConfig.responsivePresets"
+          v-for="(preset, index) in povesteConfig.responsivePresets"
           :key="index"
           class="htw-px-4 htw-py-3 htw-cursor-pointer htw-text-left htw-flex htw-gap-4"
           :class="[

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

@@ -8,7 +8,7 @@ const settings = usePreviewSettingsStore().currentSettings
 <template>
   <a
     v-tooltip="`Switch to text direction ${settings.textDirection === 'ltr' ? 'Right to Left' : 'Left to Right'}`"
-    class="histoire-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+    class="poveste-toolbar-text-direction htw-flex htw-items-center htw-gap-1 htw-h-full htw-px-2 hover:htw-text-primary-500 htw-opacity-50 hover:htw-opacity-100 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
     @click="settings.textDirection = settings.textDirection === 'ltr' ? 'rtl' : 'ltr'"
   >
     <Icon

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

@@ -8,7 +8,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="histoire-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
+  <div class="poveste-toolbar-title htw-flex htw-items-center htw-gap-1 htw-text-gray-500 htw-flex-1 htw-truncate htw-min-w-0">
     <Icon
       :icon="variant.icon ?? 'carbon:cube'"
       class="htw-w-4 htw-h-4 htw-opacity-50"

package/src/app/components/tree/StoryGroup.vue

@@ -27,7 +27,7 @@ function toggleOpen() {
 <template>
   <div
     data-test-id="story-group"
-    class="histoire-story-group htw-my-2 first:htw-mt-0 last:htw-mb-0 htw-group"
+    class="poveste-story-group htw-my-2 first:htw-mt-0 last:htw-mb-0 htw-group"
   >
     <template v-if="group.title">
       <div class="htw-h-[1px] htw-bg-gray-500/10 htw-mx-6 htw-mb-2 group-first:htw-hidden" />

package/src/app/components/tree/StoryList.vue

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="histoire-story-list htw-overflow-y-auto">
+  <div class="poveste-story-list htw-overflow-y-auto">
     <template
       v-for="element of tree"
       :key="element.title"

package/src/app/components/tree/StoryListFolder.vue

@@ -32,18 +32,18 @@ const folderPadding = computed(() => {
 <template>
   <div
     data-test-id="story-list-folder"
-    class="histoire-story-list-folder"
+    class="poveste-story-list-folder"
   >
     <div
       role="button"
       tabindex="0"
-      class="histoire-story-list-folder-button htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex"
+      class="poveste-story-list-folder-button htw-px-0.5 htw-py-2 md:htw-py-1.5 htw-mx-1 htw-rounded-sm hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900 htw-cursor-pointer htw-select-none htw-flex"
       @click="toggleOpen"
       @keyup.enter="toggleOpen"
       @keyup.space="toggleOpen"
     >
       <span class="bind-tree-padding htw-flex htw-items-center htw-gap-2 htw-min-w-0">
-        <span class="htw-flex htw-flex-none htw-items-center htw-opacity-30 [.histoire-story-list-folder-button:hover_&]:htw-opacity-100 htw-ml-4 htw-w-4 htw-h-4 htw-rounded-sm htw-border htw-border-gray-500/40">
+        <span class="htw-flex htw-flex-none htw-items-center htw-opacity-30 [.poveste-story-list-folder-button:hover_&]:htw-opacity-100 htw-ml-4 htw-w-4 htw-h-4 htw-rounded-sm htw-border htw-border-gray-500/40">
           <Icon
             icon="carbon:caret-right"
             class="htw-w-full htw-h-full htw-transition-transform htw-duration-150"

package/src/app/components/tree/StoryListItem.vue

@@ -27,7 +27,7 @@ useScrollOnActive(isActive, el)
   <div
     ref="el"
     data-test-id="story-list-item"
-    class="histoire-story-list-item"
+    class="poveste-story-list-item"
   >
     <BaseListItemLink
       v-slot="{ active }"

package/src/app/index.ts

@@ -4,7 +4,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { setupPluginApi } from './plugin.js'
 import { router } from './router'
-import 'virtual:$histoire-theme'
+import 'virtual:$poveste-theme'
 
 export async function mountMainApp() {
   const app = createApp(App)
@@ -26,7 +26,7 @@ export async function mountMainApp() {
   app.mount('#app')
 
   if (import.meta.hot) {
-    import.meta.hot.send('histoire:mount', {})
+    import.meta.hot.send('poveste:mount', {})
 
     /* #__PURE__ */ setupPluginApi()
   }