@poveste/app 0.1.0 → 0.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/app",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Pre-bundled UI for Poveste",
   "author": {
     "name": "Sorin Gitlan"
@@ -15,6 +15,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -26,9 +30,9 @@
   "dependencies": {
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
-    "@poveste/controls": "^0.1.0",
-    "@poveste/vendors": "^0.1.0",
-    "@poveste/shared": "^0.1.0"
+    "@poveste/vendors": "^0.1.2",
+    "@poveste/controls": "^0.1.2",
+    "@poveste/shared": "^0.1.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",

package/src/app/App.vue

@@ -7,7 +7,7 @@ export default {
 <script lang="ts" setup>
 import type { StoryFile, Tree } from './types'
 import { useTitle } from '@vueuse/core'
-import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$histoire-stories'
+import { onUpdate, files as rawFiles, tree as rawTree } from 'virtual:$poveste-stories'
 import { computed, onMounted, ref, watch } from 'vue'
 import AppHeader from './components/app/AppHeader.vue'
 import Breadcrumb from './components/app/Breadcrumb.vue'
@@ -19,7 +19,7 @@ import GenericMountStory from './components/story/GenericMountStory.vue'
 import StoryList from './components/tree/StoryList.vue'
 import { useCommandStore } from './stores/command'
 import { useStoryStore } from './stores/story'
-import { histoireConfig } from './util/config'
+import { povesteConfig } from './util/config'
 import { onKeyboardShortcut } from './util/keyboard'
 import { mapFile } from './util/mapping'
 import { isMobile } from './util/responsive'
@@ -56,9 +56,9 @@ useTitle(computed(() => {
     if (storyStore.currentVariant) {
       title += ` › ${storyStore.currentVariant.title}`
     }
-    return `${title} | ${histoireConfig.theme.title}`
+    return `${title} | ${povesteConfig.theme.title}`
   }
-  return histoireConfig.theme.title
+  return povesteConfig.theme.title
 }))
 
 // Search
@@ -81,7 +81,7 @@ const loading = ref(false)
 
 if (import.meta.hot && !rawFiles.length) {
   loading.value = true
-  import.meta.hot.on('histoire:all-stories-loaded', () => {
+  import.meta.hot.on('poveste:all-stories-loaded', () => {
     loading.value = false
   })
 }
@@ -97,7 +97,7 @@ const commandStore = useCommandStore()
 <template>
   <div
     v-if="storyStore.currentStory"
-    class="histoire-app htw-hidden"
+    class="poveste-app htw-hidden"
   >
     <GenericMountStory
       :key="storyStore.currentStory.id"
@@ -133,7 +133,7 @@ const commandStore = useCommandStore()
       class="htw-h-full"
     >
       <template #first>
-        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __histoire-pane-shadow-from-right">
+        <div class="htw-flex htw-flex-col htw-h-full htw-bg-gray-100 dark:htw-bg-gray-750 __poveste-pane-shadow-from-right">
           <AppHeader
             class="htw-flex-none"
             @search="isSearchOpen = true"
@@ -158,13 +158,13 @@ const commandStore = useCommandStore()
     />
 
     <CommandPromptsModal
-      v-if="__HISTOIRE_DEV__"
+      v-if="__POVESTE_DEV__"
       :shown="commandStore.showPromptsModal"
       @close="commandStore.showPromptsModal = false"
     />
   </div>
 
-  <transition name="__histoire-fade">
+  <transition name="__poveste-fade">
     <InitialLoading
       v-if="loading"
     />

package/src/app/assets/poveste-text-dark.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1870 512" fill="none">
+  <defs>
+    <linearGradient id="pvw" x1="96" y1="416" x2="416" y2="96" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#24C56A"/>
+      <stop offset="1" stop-color="#17A6C6"/>
+    </linearGradient>
+  </defs>
+  <rect x="16" y="16" width="480" height="480" rx="112" fill="url(#pvw)"/>
+  <rect x="140" y="142" width="232" height="44" rx="16" fill="#fff"/>
+  <rect x="151" y="217" width="88" height="146" rx="9" stroke="#fff" stroke-width="22"/>
+  <rect x="172" y="244" width="30" height="92" rx="13" fill="#fff"/>
+  <rect x="262" y="206" width="110" height="168" rx="20" fill="#fff"/>
+  <rect x="284" y="226" width="66" height="58" rx="13" fill="url(#pvw)"/>
+  <text x="676" y="256" dominant-baseline="central" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="320" font-weight="400" letter-spacing="-4" fill="#f8fafc">Poveste</text>
+</svg>

package/src/app/assets/poveste-text.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1870 512" fill="none">
+  <defs>
+    <linearGradient id="pvw" x1="96" y1="416" x2="416" y2="96" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#24C56A"/>
+      <stop offset="1" stop-color="#17A6C6"/>
+    </linearGradient>
+  </defs>
+  <rect x="16" y="16" width="480" height="480" rx="112" fill="url(#pvw)"/>
+  <rect x="140" y="142" width="232" height="44" rx="16" fill="#fff"/>
+  <rect x="151" y="217" width="88" height="146" rx="9" stroke="#fff" stroke-width="22"/>
+  <rect x="172" y="244" width="30" height="92" rx="13" fill="#fff"/>
+  <rect x="262" y="206" width="110" height="168" rx="20" fill="#fff"/>
+  <rect x="284" y="226" width="66" height="58" rx="13" fill="url(#pvw)"/>
+  <text x="676" y="256" dominant-baseline="central" font-family="ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif" font-size="320" font-weight="400" letter-spacing="-4" fill="#1e293b">Poveste</text>
+</svg>

package/src/app/assets/poveste.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" fill="none">
+  <defs>
+    <linearGradient id="pv" x1="96" y1="416" x2="416" y2="96" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#24C56A"/>
+      <stop offset="1" stop-color="#17A6C6"/>
+    </linearGradient>
+  </defs>
+  <rect x="16" y="16" width="480" height="480" rx="112" fill="url(#pv)"/>
+  <rect x="140" y="142" width="232" height="44" rx="16" fill="#fff"/>
+  <rect x="151" y="217" width="88" height="146" rx="9" stroke="#fff" stroke-width="22"/>
+  <rect x="172" y="244" width="30" height="92" rx="13" fill="#fff"/>
+  <rect x="262" y="206" width="110" height="168" rx="20" fill="#fff"/>
+  <rect x="284" y="226" width="66" height="58" rx="13" fill="url(#pv)"/>
+</svg>

package/src/app/components/HomeView.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import PovesteLogo from '../assets/histoire.svg'
+import PovesteLogo from '../assets/poveste.svg'
 import { useStoryStore } from '../stores/story'
-import { customLogos, histoireConfig } from '../util/config'
+import { customLogos, povesteConfig } from '../util/config'
 import HomeCounter from './app/HomeCounter.vue'
 
-const logoUrl = computed(() => histoireConfig.theme?.logo?.square ? customLogos.square : PovesteLogo)
+const logoUrl = computed(() => povesteConfig.theme?.logo?.square ? customLogos.square : PovesteLogo)
 const storyStore = useStoryStore()
 
 const stats = computed(() => {
@@ -34,7 +34,7 @@ const stats = computed(() => {
 </script>
 
 <template>
-  <div class="histoire-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full">
+  <div class="poveste-home-view htw-flex md:htw-flex-col htw-gap-12 htw-items-center htw-justify-center htw-h-full">
     <img
       :src="logoUrl"
       alt="Logo"

package/src/app/components/app/AppHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
-import { histoireConfig } from '../../util/config'
+import { povesteConfig } from '../../util/config'
 import { isDark, toggleDark } from '../../util/dark'
 import { onKeyboardShortcut } from '../../util/keyboard'
 import { makeTooltip } from '../../util/tooltip'
@@ -23,11 +23,11 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
 
 <template>
   <div
-    class="histoire-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
+    class="poveste-app-header htw-px-4 htw-h-16 htw-flex htw-items-center htw-gap-2"
   >
     <div class="htw-py-3 sm:htw-py-4 htw-flex-1 htw-h-full htw-flex htw-items-center htw-pr-2">
       <a
-        :href="histoireConfig.theme?.logoHref"
+        :href="povesteConfig.theme?.logoHref"
         target="_blank"
         class="htw-w-full htw-h-full htw-flex htw-items-center"
       >
@@ -50,7 +50,7 @@ onKeyboardShortcut(['ctrl+shift+d', 'meta+shift+d'], (event) => {
       </a>
 
       <a
-        v-if="!histoireConfig.theme.hideColorSchemeSwitch"
+        v-if="!povesteConfig.theme.hideColorSchemeSwitch"
         v-tooltip="makeTooltip('Toggle dark mode', ({ isMac }) => isMac ? 'meta+shift+d' : 'ctrl+shift+d')"
         class="htw-p-2 sm:htw-p-1 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-text-gray-900 dark:htw-text-gray-100"
         @click="toggleDark()"

package/src/app/components/app/AppLogo.vue

@@ -1,24 +1,24 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import PovesteLogoDark from '../../assets/histoire-text-dark.svg'
-import PovesteLogoLight from '../../assets/histoire-text.svg'
+import PovesteLogoDark from '../../assets/poveste-text-dark.svg'
+import PovesteLogoLight from '../../assets/poveste-text.svg'
 
-import { customLogos, histoireConfig } from '../../util/config'
+import { customLogos, povesteConfig } from '../../util/config'
 import { isDark } from '../../util/dark'
 
 const logoUrl = computed(() => {
   if (isDark.value) {
-    return histoireConfig.theme.logo?.dark ? customLogos.dark : PovesteLogoDark
+    return povesteConfig.theme.logo?.dark ? customLogos.dark : PovesteLogoDark
   }
-  return histoireConfig.theme.logo?.light ? customLogos.light : PovesteLogoLight
+  return povesteConfig.theme.logo?.light ? customLogos.light : PovesteLogoLight
 })
 
-const altText = computed(() => `${histoireConfig.theme.title} logo`)
+const altText = computed(() => `${povesteConfig.theme.title} logo`)
 </script>
 
 <template>
   <img
-    class="histoire-app-logo"
+    class="poveste-app-logo"
     :src="logoUrl"
     :alt="altText"
   >

package/src/app/components/app/Breadcrumb.vue

@@ -35,7 +35,7 @@ watch(story, () => {
 </script>
 
 <template>
-  <div class="histoire-breadcrumb">
+  <div class="poveste-breadcrumb">
     <a
       class="htw-px-6 htw-h-12 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-cursor-pointer htw-flex htw-gap-2 htw-flex-wrap htw-w-full htw-items-center"
       @click="openMenu"

package/src/app/components/app/InitialLoading.vue

@@ -9,7 +9,7 @@ const progress = reactive({
 const maxCols = window.innerWidth / 20
 
 if (import.meta.hot) {
-  import.meta.hot.on('histoire:stories-loading-progress', (data) => {
+  import.meta.hot.on('poveste:stories-loading-progress', (data) => {
     progress.loaded = data.loadedFileCount
     progress.total = data.totalFileCount
   })
@@ -17,8 +17,8 @@ if (import.meta.hot) {
 </script>
 
 <template>
-  <div class="histoire-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
-    <transition name="__histoire-fade">
+  <div class="poveste-initial-loading htw-fixed htw-inset-0 htw-bg-white dark:htw-bg-gray-700 htw-flex htw-flex-col htw-gap-6 htw-items-center htw-justify-center">
+    <transition name="__poveste-fade">
       <div
         v-if="progress.total > 0"
         class="htw-grid htw-gap-2"

package/src/app/components/app/MobileOverlay.vue

@@ -10,10 +10,10 @@ const emit = defineEmits<{ (e: 'close'): void }>()
 </script>
 
 <template>
-  <transition name="__histoire-fade-bottom">
+  <transition name="__poveste-fade-bottom">
     <div
       v-if="opened"
-      class="histoire-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
+      class="poveste-mobile-overlay htw-absolute htw-z-10 htw-bg-white dark:htw-bg-gray-700 htw-w-screen htw-h-screen htw-inset-0 htw-overflow-hidden htw-flex htw-flex-col"
     >
       <div class="htw-p-4 htw-h-16 htw-flex htw-border-b htw-border-gray-100 dark:htw-border-gray-800 htw-items-center htw-place-content-between">
         <span class="htw-text-gray-500">{{ title }}</span>

package/src/app/components/base/BaseButton.vue

@@ -22,7 +22,7 @@ const comp = computed(() => {
 <template>
   <component
     :is="comp"
-    class="histoire-base-button htw-rounded htw-cursor-pointer"
+    class="poveste-base-button htw-rounded htw-cursor-pointer"
     :class="{
       'htw-bg-primary-200 dark:htw-bg-primary-800 hover:htw-bg-primary-300 dark:hover:htw-bg-primary-700': color === 'primary' || !color,
       'htw-bg-grey-100 dark:htw-bg-grey-900 hover:htw-bg-grey-200 dark:hover:htw-bg-grey-800': color === 'grey',

package/src/app/components/base/BaseCheckbox.vue

@@ -34,7 +34,7 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
-    class="histoire-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+    class="poveste-base-checkbox htw-flex htw-items-center htw-gap-2 htw-select-none htw-px-4 htw-py-3 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"

package/src/app/components/base/BaseCopyIcon.vue

@@ -28,7 +28,7 @@ const action = () => copy(props.content)
       delay: 0,
     }"
     icon="carbon:copy-file"
-    class="histoire-base-copy-icon htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
+    class="poveste-base-copy-icon htw-w-4 htw-h-4 htw-opacity-50 hover:htw-opacity-100 hover:htw-text-primary-500 htw-cursor-pointer"
     @click="action()"
   />
 </template>

package/src/app/components/base/BaseEmpty.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
+  <div class="poveste-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400  htw-text-lg">
     <slot />
   </div>
 </template>

package/src/app/components/base/BaseIcon.vue

@@ -15,12 +15,12 @@ const isUrl = computed(() => props.icon.startsWith('http') || props.icon.startsW
     v-if="isUrl"
     :src="icon"
     :alt="icon"
-    class="histoire-base-icon"
+    class="poveste-base-icon"
   >
   <Icon
     v-else
     :icon="icon"
-    class="histoire-base-icon"
+    class="poveste-base-icon"
   />
 </template>
 

package/src/app/components/base/BaseKeyboardShortcut.vue

@@ -10,7 +10,7 @@ const formatted = computed(() => props.shortcut.split('+').map(k => formatKey(k.
 </script>
 
 <template>
-  <span class="histoire-base-keyboard-shortcut htw-border htw-border-current htw-opacity-50 htw-px-1 htw-rounded-sm">
+  <span class="poveste-base-keyboard-shortcut htw-border htw-border-current htw-opacity-50 htw-px-1 htw-rounded-sm">
     {{ formatted }}
   </span>
 </template>

package/src/app/components/base/BaseListItemLink.vue

@@ -31,7 +31,7 @@ export default defineComponent({
 <template>
   <RouterLink
     v-slot="{ isActive: linkIsActive, href, navigate }"
-    class="histoire-base-list-item-link"
+    class="poveste-base-list-item-link"
     v-bind="$attrs"
     custom
   >

package/src/app/components/base/BaseOverflowMenu.vue

@@ -86,7 +86,7 @@ function ChildrenSlice(props, { slots }) {
 <template>
   <div
     ref="el"
-    class="histoire-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
+    class="poveste-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
   >
     <ChildrenRender>
       <slot />

package/src/app/components/base/BaseOverflowTab.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
-    class="histoire-base-overflow-tab"
+    class="poveste-base-overflow-tab"
     v-bind="$attrs"
     custom
   >
@@ -36,7 +36,7 @@ export default defineComponent({
     >
       <slot />
 
-      <transition name="__histoire-scale-y">
+      <transition name="__poveste-scale-y">
         <div
           v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
           class="htw-absolute htw-top-0 htw-left-0 htw-h-full htw-w-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"

package/src/app/components/base/BaseSelect.vue

@@ -32,7 +32,7 @@ function selectValue(value: string, hide: () => void) {
 
 <template>
   <VDropdown
-    class="histoire-base-select"
+    class="poveste-base-select"
     auto-size
     auto-boundary-max-size
   >

package/src/app/components/base/BaseSplitPane.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, onUnmounted, ref, watch } from 'vue'
 
-const SAVE_PREFIX = '__histoire'
+const SAVE_PREFIX = '__poveste'
 
 const props = defineProps({
   orientation: {
@@ -165,7 +165,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="el"
-    class="histoire-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
+    class="poveste-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
     :class="{
       'htw-flex-col': orientation === 'portrait',
       'htw-cursor-ew-resize': dragging && orientation === 'landscape',

package/src/app/components/base/BaseTab.vue

@@ -21,7 +21,7 @@ export default defineComponent({
 <template>
   <router-link
     v-slot="{ isActive, isExactActive, href, navigate }"
-    class="histoire-base-tab"
+    class="poveste-base-tab"
     v-bind="$attrs"
     custom
   >
@@ -36,7 +36,7 @@ export default defineComponent({
     >
       <slot />
 
-      <transition name="__histoire-scale-x">
+      <transition name="__poveste-scale-x">
         <div
           v-if="matched != null ? matched : (exact && isExactActive) || (!exact && isActive)"
           class="htw-absolute htw-bottom-0 htw-left-0 htw-w-full htw-h-[2px] htw-bg-primary-500 dark:htw-bg-primary-400"

package/src/app/components/base/BaseTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="histoire-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
+  <span class="poveste-base-tag htw-text-center htw-text-xs htw-mx-1 htw-px-0.5 htw-h-4 htw-uppercase htw-min-w-4 htw-rounded-full htw-bg-primary-500 htw-text-white dark:htw-text-black">
     <slot />
   </span>
 </template>

package/src/app/components/command/CommandPrompts.vue

@@ -59,7 +59,7 @@ onMounted(() => {
 
 <template>
   <form
-    class="histoire-command-prompts htw-flex htw-flex-col"
+    class="poveste-command-prompts htw-flex htw-flex-col"
     @submit.prevent="submit()"
     @keyup.escape="$emit('close')"
   >

package/src/app/components/command/CommandPromptsModal.vue

@@ -25,7 +25,7 @@ const commandStore = useCommandStore()
 <template>
   <div
     v-if="shown"
-    class="histoire-command-prompts-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
+    class="poveste-command-prompts-modal htw-fixed htw-inset-0 htw-bg-white/80 dark:htw-bg-gray-900/80 htw-z-20"
   >
     <div
       class="htw-absolute htw-inset-0"

package/src/app/components/command/PromptSelect.vue

@@ -84,7 +84,7 @@ function selectIndex(index: number) {
 </script>
 
 <template>
-  <div class="histoire-prompt-select htw-relative htw-group">
+  <div class="poveste-prompt-select htw-relative htw-group">
     <input
       v-model="model"
       :required="prompt.required"

package/src/app/components/command/PromptText.vue

@@ -45,7 +45,7 @@ watch(defaultValue, (value) => {
 </script>
 
 <template>
-  <div class="histoire-prompt-text">
+  <div class="poveste-prompt-text">
     <label class="htw-flex htw-flex-col htw-gap-2 htw-p-2">
       <span class="htw-px-2">
         <span>{{ prompt.label }}</span>

package/src/app/components/misc/HatchedPattern.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="__histoire-hatched-pattern" />
+  <div class="__poveste-hatched-pattern" />
 </template>
 
 <style scoped>
-.__histoire-hatched-pattern {
+.__poveste-hatched-pattern {
   background: repeating-linear-gradient(135deg,
   transparent 0px,
   transparent 32px,

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

@@ -55,7 +55,7 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
     v-if="comp"
     v-model="model"
     :placeholder="model === undefined ? definition?.default : null"
-    class="histoire-controls-component-prop-item"
+    class="poveste-controls-component-prop-item"
     :title="`${definition.name}${canReset ? ' *' : ''}`"
   >
     <template #actions>

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

@@ -11,7 +11,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="histoire-controls-component-props">
+  <div class="poveste-controls-component-props">
     <div class="htw-font-mono htw-p-2 htw-flex htw-items-center htw-gap-1">
       <Icon
         v-tooltip="'Auto-detected props'"

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

@@ -13,7 +13,7 @@ const stateKeys = computed(() => Object.keys(props.variant.state || {})
 </script>
 
 <template>
-  <div class="histoire-controls-component-init-state">
+  <div class="poveste-controls-component-init-state">
     <div class="htw-p-2 htw-flex htw-items-center htw-gap-1">
       <Icon
         v-tooltip="'Auto-detected state'"

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

@@ -38,7 +38,7 @@ const model = computed({
     :is="comp"
     v-if="comp"
     v-model="model"
-    class="histoire-controls-component-prop-item"
+    class="poveste-controls-component-prop-item"
     :title="props.item"
   />
 </template>

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

@@ -22,7 +22,7 @@ const hasEvents = computed(() => eventsStore.events.length)
 </script>
 
 <template>
-  <BaseOverflowMenu class="histoire-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
+  <BaseOverflowMenu class="poveste-pane-tabs htw-h-10 htw-flex-none htw-border-b htw-border-gray-100 dark:htw-border-gray-750">
     <BaseTab
       :to="{ ...$route, query: { ...$route.query, tab: '' } }"
       :matched="!$route.query.tab"

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

@@ -21,12 +21,12 @@ const omitKeys = ['_hPropDefs']
 const defaultState = clone(omit(toRawDeep(props.variant.state), omitKeys))
 
 const selectedOption = useStorage<string>(
-  `_histoire-presets/${saveId.value}/selected`,
+  `_poveste-presets/${saveId.value}/selected`,
   DEFAULT_ID,
 )
 
 const presetStates = useStorage<Map<string, { state: Record<string, unknown>, label: string }>>(
-  `_histoire-presets/${saveId.value}/states`,
+  `_poveste-presets/${saveId.value}/states`,
   new Map(),
 )
 
@@ -118,7 +118,7 @@ onClickOutside(select, stopEditing)
 </script>
 
 <template>
-  <div class="histoire-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
+  <div class="poveste-state-presets htw-flex htw-gap-2 htw-w-full htw-items-center">
     <div
       ref="select"
       class="htw-flex-1 htw-min-w-0"

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

@@ -39,7 +39,7 @@ const hasInitState = computed(() => Object
 <template>
   <div
     data-test-id="story-controls"
-    class="histoire-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
+    class="poveste-story-controls htw-flex htw-flex-col htw-divide-y htw-divide-gray-100 dark:htw-divide-gray-750"
   >
     <!-- Toolbar -->
     <div
@@ -59,7 +59,7 @@ const hasInitState = computed(() => Object
       slot-name="controls"
       :variant="variant"
       :story="story"
-      class="__histoire-render-custom-controls htw-flex-none"
+      class="__poveste-render-custom-controls __histoire-render-custom-controls htw-flex-none"
       @ready="ready = true"
     />