@poveste/app 0.1.2 → 0.2.0

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

@@ -34,35 +34,35 @@ watch(path, () => {
   <div
     role="checkbox"
     tabindex="0"
-    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"
+    class="poveste-base-checkbox ptw-flex ptw-items-center ptw-gap-2 ptw-select-none ptw-px-4 ptw-py-3 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
     @click="toggle()"
     @keydown.enter.prevent="toggle()"
     @keydown.space.prevent="toggle()"
   >
-    <div class="htw-text-white htw-w-[16px] htw-h-[16px] htw-relative">
+    <div class="ptw-text-white ptw-w-[16px] ptw-h-[16px] ptw-relative">
       <div
-        class="htw-border group-active:htw-bg-gray-500/20 htw-rounded-sm htw-box-border htw-absolute htw-inset-0 htw-transition-border htw-duration-150 htw-ease-out"
+        class="ptw-border group-active:ptw-bg-gray-500/20 ptw-rounded-sm ptw-box-border ptw-absolute ptw-inset-0 ptw-transition-border ptw-duration-150 ptw-ease-out"
         :class="[
           modelValue
-            ? 'htw-border-primary-500 htw-border-8'
-            : 'htw-border-black/25 dark:htw-border-white/25 htw-delay-150',
+            ? 'ptw-border-primary-500 ptw-border-8'
+            : 'ptw-border-black/25 dark:ptw-border-white/25 ptw-delay-150',
         ]"
       />
       <svg
         width="16"
         height="16"
         viewBox="0 0 24 24"
-        class="htw-relative htw-z-10"
+        class="ptw-relative ptw-z-10"
       >
         <path
           ref="path"
           d="m 4 12 l 5 5 l 10 -10"
           fill="none"
-          class="htw-stroke-white htw-stroke-2 htw-duration-200 htw-ease-in-out"
+          class="ptw-stroke-white ptw-stroke-2 ptw-duration-200 ptw-ease-in-out"
           :class="[
-            animationEnabled ? 'htw-transition-all' : 'htw-transition-none',
+            animationEnabled ? 'ptw-transition-all' : 'ptw-transition-none',
             {
-              'htw-delay-150': modelValue,
+              'ptw-delay-150': modelValue,
             },
           ]"
           :stroke-dasharray="dasharray"

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

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

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

@@ -1,15 +1,15 @@
 <template>
-  <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">
+  <div class="poveste-base-empty ptw-base-empty ptw-flex ptw-flex-col ptw-items-center ptw-justify-center ptw-space-y-4 ptw-py-12 ptw-h-full ptw-text-center ptw-text-gray-400  ptw-text-lg">
     <slot />
   </div>
 </template>
 
 <style scoped>
-.htw-base-empty:not(.no-animation) {
-  animation: htw-base-empty .15s .2s both;
+.ptw-base-empty:not(.no-animation) {
+  animation: ptw-base-empty .15s .2s both;
 }
 
-@keyframes htw-base-empty {
+@keyframes ptw-base-empty {
   0% {
     opacity: 0;
   }

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="poveste-base-keyboard-shortcut htw-border htw-border-current htw-opacity-50 htw-px-1 htw-rounded-sm">
+  <span class="poveste-base-keyboard-shortcut ptw-border ptw-border-current ptw-opacity-50 ptw-px-1 ptw-rounded-sm">
     {{ formatted }}
   </span>
 </template>

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

@@ -14,12 +14,12 @@ function handleNavigate() {
 
 <template>
   <a
-    class="istoire-base-list-ite htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+    class="poveste-base-list-item ptw-flex ptw-items-center ptw-gap-2 ptw-text-gray-900 dark:ptw-text-gray-100"
     :class="[
       $attrs.class,
       isActive
-        ? 'active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
-        : 'hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900',
+        ? 'active ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black'
+        : 'hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900',
     ]"
     @click="handleNavigate()"
     @keyup.enter="handleNavigate()"

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

@@ -37,12 +37,12 @@ export default defineComponent({
   >
     <a
       :href="href"
-      class="htw-flex htw-items-center htw-gap-2 htw-text-gray-900 dark:htw-text-gray-100"
+      class="ptw-flex ptw-items-center ptw-gap-2 ptw-text-gray-900 dark:ptw-text-gray-100"
       :class="[
         $attrs.class,
         (isActive != null ? isActive : linkIsActive)
-          ? 'active htw-bg-primary-500 hover:htw-bg-primary-600 htw-text-white dark:htw-text-black'
-          : 'hover:htw-bg-primary-100 dark:hover:htw-bg-primary-900',
+          ? 'active ptw-bg-primary-500 hover:ptw-bg-primary-600 ptw-text-white dark:ptw-text-black'
+          : 'hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-900',
       ]"
       @click="handleNavigate($event, navigate)"
       @keyup.enter="handleNavigate($event, navigate)"

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

@@ -86,7 +86,7 @@ function ChildrenSlice(props, { slots }) {
 <template>
   <div
     ref="el"
-    class="poveste-base-overflow-menu htw-flex htw-overflow-hidden htw-relative"
+    class="poveste-base-overflow-menu ptw-flex ptw-overflow-hidden ptw-relative"
   >
     <ChildrenRender>
       <slot />
@@ -97,16 +97,16 @@ function ChildrenSlice(props, { slots }) {
     >
       <div
         role="button"
-        class="htw-cursor-pointer hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-w-8 htw-h-full htw-flex htw-items-center htw-justify-center htw-absolute htw-top-0 htw-right-0"
+        class="ptw-cursor-pointer hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-w-8 ptw-h-full ptw-flex ptw-items-center ptw-justify-center ptw-absolute ptw-top-0 ptw-right-0"
       >
         <Icon
           icon="carbon:caret-down"
-          class="htw-w-4 htw-h-4 htw-opacity-50 group-hover:htw-opacity-100"
+          class="ptw-w-4 ptw-h-4 ptw-opacity-50 group-hover:ptw-opacity-100"
         />
       </div>
 
       <template #popper>
-        <div class="htw-flex htw-flex-col htw-items-stretch">
+        <div class="ptw-flex ptw-flex-col ptw-items-stretch">
           <ChildrenSlice
             :start="visibleChildrenCount"
           >

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

@@ -28,9 +28,9 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="htw-px-4 htw-h-10 htw-min-w-[150px] htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100"
+      class="ptw-px-4 ptw-h-10 ptw-min-w-[150px] ptw-inline-flex ptw-items-center hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-relative ptw-text-gray-900 dark:ptw-text-gray-100"
       :class="{
-        'htw-text-primary-500 dark:htw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'ptw-text-primary-500 dark:ptw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >
@@ -39,7 +39,7 @@ export default defineComponent({
       <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"
+          class="ptw-absolute ptw-top-0 ptw-left-0 ptw-h-full ptw-w-[2px] ptw-bg-primary-500 dark:ptw-bg-primary-400"
         />
       </transition>
     </a>

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

@@ -37,27 +37,27 @@ function selectValue(value: string, hide: () => void) {
     auto-boundary-max-size
   >
     <div
-      class="htw-cursor-pointer htw-w-full htw-outline-none htw-px-2 htw-h-[27px] -htw-my-1 htw-border htw-border-solid htw-border-black/25 dark:htw-border-white/25 hover:htw-border-primary-500 dark:hover:htw-border-primary-500 htw-rounded-sm htw-flex htw-gap-2 htw-items-center htw-leading-normal"
+      class="ptw-cursor-pointer ptw-w-full ptw-outline-none ptw-px-2 ptw-h-[27px] -ptw-my-1 ptw-border ptw-border-solid ptw-border-black/25 dark:ptw-border-white/25 hover:ptw-border-primary-500 dark:hover:ptw-border-primary-500 ptw-rounded-sm ptw-flex ptw-gap-2 ptw-items-center ptw-leading-normal"
     >
-      <div class="htw-flex-1 htw-truncate">
+      <div class="ptw-flex-1 ptw-truncate">
         <slot :label="selectedLabel">
           {{ selectedLabel }}
         </slot>
       </div>
       <Icon
         icon="carbon:chevron-sort"
-        class="htw-w-4 htw-h-4 htw-flex-none htw-ml-auto"
+        class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-ml-auto"
       />
     </div>
     <template #popper="{ hide }">
-      <div class="htw-flex htw-flex-col htw-bg-gray-50 dark:htw-bg-gray-700">
+      <div class="ptw-flex ptw-flex-col ptw-bg-gray-50 dark:ptw-bg-gray-700">
         <div
           v-for="(label, value) in formattedOptions"
           v-bind="{ ...$attrs, class: null, style: null }"
           :key="label"
-          class="htw-px-2 htw-py-1 htw-cursor-pointer hover:htw-bg-primary-100 dark:hover:htw-bg-primary-700"
+          class="ptw-px-2 ptw-py-1 ptw-cursor-pointer hover:ptw-bg-primary-100 dark:hover:ptw-bg-primary-700"
           :class="{
-            'htw-bg-primary-200 dark:htw-bg-primary-800': props.modelValue === value,
+            'ptw-bg-primary-200 dark:ptw-bg-primary-800': props.modelValue === value,
           }"
           @click="selectValue(value, hide)"
         >

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

@@ -45,6 +45,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+
+  showDivider: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits({
@@ -165,42 +170,42 @@ onUnmounted(() => {
 <template>
   <div
     ref="el"
-    class="poveste-base-split-pane htw-flex htw-h-full htw-isolate htw-overflow-auto"
+    class="poveste-base-split-pane ptw-flex ptw-h-full ptw-isolate ptw-overflow-auto"
     :class="{
-      'htw-flex-col': orientation === 'portrait',
-      'htw-cursor-ew-resize': dragging && orientation === 'landscape',
-      'htw-cursor-ns-resize': dragging && orientation === 'portrait',
+      'ptw-flex-col': orientation === 'portrait',
+      'ptw-cursor-ew-resize': dragging && orientation === 'landscape',
+      'ptw-cursor-ns-resize': dragging && orientation === 'portrait',
       [orientation]: true,
     }"
   >
     <div
-      class="htw-relative htw-top-0 htw-left-0 htw-z-20"
+      class="ptw-relative ptw-top-0 ptw-left-0 ptw-z-20"
       :class="{
-        'htw-pointer-events-none': dragging,
-        'htw-border-r htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'landscape',
-        'htw-flex-none': fixed,
+        'ptw-pointer-events-none': dragging,
+        'ptw-border-r ptw-border-gray-300/30 dark:ptw-border-gray-800': orientation === 'landscape' && showDivider,
+        'ptw-flex-none': fixed,
       }"
       :style="leftStyle"
     >
       <slot name="first" />
 
       <div
-        class="dragger htw-absolute htw-z-100 hover:htw-bg-primary-500/50 htw-transition-colors htw-duration-150 htw-delay-150"
+        class="dragger ptw-absolute ptw-z-100 hover:ptw-bg-primary-500/50 ptw-transition-colors ptw-duration-150 ptw-delay-150"
         :class="{
-          'htw-top-0 htw-bottom-0 htw-cursor-ew-resize': orientation === 'landscape',
-          'htw-left-0 htw-right-0 htw-cursor-ns-resize': orientation === 'portrait',
+          'ptw-top-0 ptw-bottom-0 ptw-cursor-ew-resize': orientation === 'landscape',
+          'ptw-left-0 ptw-right-0 ptw-cursor-ns-resize': orientation === 'portrait',
           [`dragger-offset-${draggerOffset}`]: true,
-          'htw-bg-primary-500/25': dragging,
+          'ptw-bg-primary-500/25': dragging,
         }"
         @mousedown.prevent="dragStart"
       />
     </div>
     <div
-      class="htw-relative htw-bottom-0 htw-right-0"
+      class="ptw-relative ptw-bottom-0 ptw-right-0"
       :class="{
-        'htw-pointer-events-none': dragging,
-        'htw-border-t htw-border-gray-300/30 dark:htw-border-gray-800': orientation === 'portrait',
-        'htw-flex-1': fixed,
+        'ptw-pointer-events-none': dragging,
+        'ptw-border-t ptw-border-gray-300/30 dark:ptw-border-gray-800': orientation === 'portrait' && showDivider,
+        'ptw-flex-1': fixed,
       }"
       :style="rightStyle"
     >

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

@@ -28,9 +28,9 @@ export default defineComponent({
     <a
       v-bind="$attrs"
       :href="href"
-      class="htw-px-4 htw-h-full htw-inline-flex htw-items-center hover:htw-bg-primary-50 dark:hover:htw-bg-primary-900 htw-relative htw-text-gray-900 dark:htw-text-gray-100"
+      class="ptw-px-4 ptw-h-full ptw-inline-flex ptw-items-center hover:ptw-bg-primary-50 dark:hover:ptw-bg-primary-900 ptw-relative ptw-text-gray-900 dark:ptw-text-gray-100"
       :class="{
-        'htw-text-primary-500 dark:htw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
+        'ptw-text-primary-500 dark:ptw-text-primary-400': matched != null ? matched : (exact && isExactActive) || (!exact && isActive),
       }"
       @click="navigate"
     >
@@ -39,7 +39,7 @@ export default defineComponent({
       <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"
+          class="ptw-absolute ptw-bottom-0 ptw-left-0 ptw-w-full ptw-h-[2px] ptw-bg-primary-500 dark:ptw-bg-primary-400"
         />
       </transition>
     </a>

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

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

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

@@ -59,11 +59,11 @@ onMounted(() => {
 
 <template>
   <form
-    class="poveste-command-prompts htw-flex htw-flex-col"
+    class="poveste-command-prompts ptw-flex ptw-flex-col"
     @submit.prevent="submit()"
     @keyup.escape="$emit('close')"
   >
-    <div class="htw-p-4 htw-opacity-70">
+    <div class="ptw-p-4 ptw-opacity-70">
       {{ command.label }}
     </div>
 
@@ -76,14 +76,14 @@ onMounted(() => {
       :prompt="prompt"
       :answers="answers"
       :index="index"
-      class="hover:htw-bg-gray-500/10 focus-within:htw-bg-gray-500/5"
+      class="hover:ptw-bg-gray-500/10 focus-within:ptw-bg-gray-500/5"
       @next="focusPrompt(index + 1)"
     />
 
-    <div class="htw-flex htw-justify-end htw-gap-2 htw-p-2">
+    <div class="ptw-flex ptw-justify-end ptw-gap-2 ptw-p-2">
       <BaseButton
         type="submit"
-        class="htw-px-4 htw-py-2 htw-flex htw-items-start htw-gap-2"
+        class="ptw-px-4 ptw-py-2 ptw-flex ptw-items-start ptw-gap-2"
       >
         <BaseKeyboardShortcut
           shortcut="Enter"

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

@@ -25,13 +25,13 @@ const commandStore = useCommandStore()
 <template>
   <div
     v-if="shown"
-    class="poveste-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 ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
   >
     <div
-      class="htw-absolute htw-inset-0"
+      class="ptw-absolute ptw-inset-0"
       @click="close()"
     />
-    <div class="htw-bg-white dark:htw-bg-gray-900 md:htw-mt-16 md:htw-mx-auto htw-w-screen htw-max-w-[512px] htw-max-h-[80vh] htw-overflow-y-auto htw-scroll-smooth htw-shadow-xl htw-border htw-border-gray-200 dark:htw-border-gray-750 htw-rounded-lg htw-relative htw-divide-y htw-divide-gray-200 dark:htw-divide-gray-850">
+    <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-max-h-[80vh] ptw-overflow-y-auto ptw-scroll-smooth 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">
       <CommandPrompts
         :command="commandStore.selectedCommand"
         @close="close()"

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

@@ -84,36 +84,36 @@ function selectIndex(index: number) {
 </script>
 
 <template>
-  <div class="poveste-prompt-select htw-relative htw-group">
+  <div class="poveste-prompt-select ptw-relative ptw-group">
     <input
       v-model="model"
       :required="prompt.required"
       tabindex="-1"
-      class="htw-absolute htw-inset-0 htw-opacity-0 htw-pointer-events-none"
+      class="ptw-absolute ptw-inset-0 ptw-opacity-0 ptw-pointer-events-none"
     >
-    <label class="htw-flex htw-flex-col htw-gap-2 htw-p-2">
-      <span class="htw-px-2 htw-flex">
+    <label class="ptw-flex ptw-flex-col ptw-gap-2 ptw-p-2">
+      <span class="ptw-px-2 ptw-flex">
         <span>{{ prompt.label }}</span>
         <span
           v-if="prompt.required"
-          class="htw-opacity-70"
+          class="ptw-opacity-70"
         >*</span>
 
-        <span class="htw-opacity-40 htw-text-sm htw-ml-auto htw-invisible group-focus-within:htw-visible">
+        <span class="ptw-opacity-40 ptw-text-sm ptw-ml-auto ptw-invisible group-focus-within:ptw-visible">
           Press <BaseKeyboardShortcut shortcut="Space" /> to select
         </span>
       </span>
       <input
         ref="input"
         v-model="search"
-        class="htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none"
+        class="ptw-bg-transparent ptw-w-full ptw-p-2 ptw-border ptw-border-gray-500/50 focus:ptw-border-primary-500/50 ptw-rounded ptw-outline-none"
         @keydown.down.prevent="selectNext()"
         @keydown.up.prevent="selectPrevious()"
         @keydown.space.prevent="selectIndex(selectedIndex)"
       >
     </label>
 
-    <div class="htw-overflow-auto max-h-[300px] htw-mb-2">
+    <div class="ptw-overflow-auto max-h-[300px] ptw-mb-2">
       <button
         v-for="(option, index) of formattedOptions"
         :key="option.value"
@@ -121,20 +121,20 @@ function selectIndex(index: number) {
         tabindex="-1"
         :class="[
           model === option.value
-            ? 'htw-bg-primary-500/20'
+            ? 'ptw-bg-primary-500/20'
             : index === selectedIndex
-              ? 'htw-bg-primary-500/10'
-              : 'htw-bg-transparent',
+              ? 'ptw-bg-primary-500/10'
+              : 'ptw-bg-transparent',
         ]"
-        class="htw-w-full htw-text-left htw-px-4 htw-py-2 hover:htw-bg-primary-500/10 htw-flex htw-items-center"
+        class="ptw-w-full ptw-text-left ptw-px-4 ptw-py-2 hover:ptw-bg-primary-500/10 ptw-flex ptw-items-center"
         @click="model = option.value"
       >
-        <span class="htw-flex-1">{{ option.label }}</span>
+        <span class="ptw-flex-1">{{ option.label }}</span>
 
         <Icon
           v-if="model === option.value"
           icon="carbon:checkmark"
-          class="htw-w-4 htw-h-4 htw-text-primary-500"
+          class="ptw-w-4 ptw-h-4 ptw-text-primary-500"
         />
       </button>
     </div>

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

@@ -46,18 +46,18 @@ watch(defaultValue, (value) => {
 
 <template>
   <div class="poveste-prompt-text">
-    <label class="htw-flex htw-flex-col htw-gap-2 htw-p-2">
-      <span class="htw-px-2">
+    <label class="ptw-flex ptw-flex-col ptw-gap-2 ptw-p-2">
+      <span class="ptw-px-2">
         <span>{{ prompt.label }}</span>
         <span
           v-if="prompt.required"
-          class="htw-opacity-70"
+          class="ptw-opacity-70"
         >*</span>
       </span>
       <input
         ref="input"
         v-model="model"
-        class="htw-bg-transparent htw-w-full htw-p-2 htw-border htw-border-gray-500/50 focus:htw-border-primary-500/50 htw-rounded htw-outline-none"
+        class="ptw-bg-transparent ptw-w-full ptw-p-2 ptw-border ptw-border-gray-500/50 focus:ptw-border-primary-500/50 ptw-rounded ptw-outline-none"
         :required="prompt.required"
       >
     </label>

package/src/app/components/layout/LayoutItem.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import BaseListItem from '../base/BaseListItem.vue'
+
+defineProps<{
+  title: string
+  icon: string
+  stateIcon?: string
+  isActive?: boolean
+}>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+</script>
+
+<template>
+  <BaseListItem
+    :is-active="isActive"
+    class="ptw-px-6 ptw-py-4 ptw-gap-4"
+    @navigate="$emit('click')"
+  >
+    <Icon
+      class="ptw-w-4 ptw-h-4 ptw-flex-none"
+      :icon="icon"
+      aria-hidden="true"
+    />
+    <span class="ptw-flex-1">{{ title }}</span>
+    <Icon
+      v-if="stateIcon"
+      class="ptw-w-4 ptw-h-4 ptw-flex-none ptw-opacity-70"
+      :icon="stateIcon"
+      aria-hidden="true"
+    />
+  </BaseListItem>
+</template>

package/src/app/components/layout/LayoutItemGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div role="group">
+    <div
+      role="heading"
+      aria-level="3"
+      class="ptw-px-6 ptw-pt-3 ptw-pb-1 ptw-text-xs ptw-uppercase ptw-tracking-wide ptw-opacity-50"
+    >
+      {{ title }}
+    </div>
+    <slot />
+  </div>
+</template>

package/src/app/components/layout/LayoutModal.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { onKeyboardShortcut } from '../../util/keyboard'
+import LayoutPane from './LayoutPane.vue'
+
+const props = defineProps({
+  shown: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits({
+  close: () => true,
+})
+
+function close() {
+  emit('close')
+}
+
+onKeyboardShortcut(['escape'], () => {
+  if (props.shown) {
+    close()
+  }
+})
+</script>
+
+<template>
+  <div
+    v-show="shown"
+    class="poveste-layout-modal ptw-fixed ptw-inset-0 ptw-bg-white/80 dark:ptw-bg-gray-900/80 ptw-z-20"
+    data-test-id="layout-modal"
+  >
+    <div
+      class="ptw-absolute ptw-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="ptw-flex ptw-items-center ptw-px-6 ptw-py-3 ptw-text-gray-900 dark:ptw-text-gray-100">
+        <h2 class="ptw-flex-1 ptw-text-sm ptw-font-medium ptw-m-0">
+          Customize Layout
+        </h2>
+        <button
+          type="button"
+          class="ptw-flex ptw-items-center ptw-justify-center ptw-p-1 ptw-bg-transparent ptw-border-0 ptw-text-gray-500 dark:ptw-text-gray-400 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-cursor-pointer"
+          aria-label="Close layout customization"
+          data-test-id="layout-modal-close"
+          @click="close()"
+        >
+          <Icon
+            icon="carbon:close"
+            class="ptw-w-5 ptw-h-5"
+            aria-hidden="true"
+          />
+        </button>
+      </div>
+      <LayoutPane />
+    </div>
+  </div>
+</template>

package/src/app/components/layout/LayoutPane.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useLayoutStore } from '../../stores/layout'
+import LayoutItem from './LayoutItem.vue'
+import LayoutItemGroup from './LayoutItemGroup.vue'
+
+const settings = useLayoutStore().settings
+</script>
+
+<template>
+  <div class="ptw-py-2">
+    <LayoutItemGroup title="Visibility">
+      <LayoutItem
+        title="Story List"
+        icon="carbon:open-panel-filled-left"
+        :state-icon="settings.storyListVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-list"
+        @click="settings.storyListVisible = !settings.storyListVisible"
+      />
+      <LayoutItem
+        title="Story Options"
+        icon="carbon:open-panel-filled-right"
+        :state-icon="settings.storyOptionsVisible ? 'carbon:view' : 'carbon:view-off'"
+        data-test-id="layout-toggle-story-options"
+        @click="settings.storyOptionsVisible = !settings.storyOptionsVisible"
+      />
+    </LayoutItemGroup>
+
+    <LayoutItemGroup title="Story Options Placement">
+      <LayoutItem
+        title="Right"
+        icon="carbon:open-panel-filled-right"
+        :is-active="settings.storyOptionsPlacement === 'right'"
+        data-test-id="layout-placement-right"
+        @click="settings.storyOptionsPlacement = 'right'"
+      />
+      <LayoutItem
+        title="Bottom"
+        icon="carbon:open-panel-filled-bottom"
+        :is-active="settings.storyOptionsPlacement === 'bottom'"
+        data-test-id="layout-placement-bottom"
+        @click="settings.storyOptionsPlacement = 'bottom'"
+      />
+    </LayoutItemGroup>
+  </div>
+</template>

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

@@ -62,9 +62,9 @@ const canReset = computed(() => props.variant.state?._hPropState?.[props.compone
       <Icon
         v-tooltip="'Remove override'"
         icon="carbon:erase"
-        class="htw-cursor-pointer htw-w-4 htw-h-4 hover:htw-text-primary-500 dark:hover:htw-text-primary-400 htw-text-gray-900 dark:htw-text-gray-100"
+        class="ptw-cursor-pointer ptw-w-4 ptw-h-4 hover:ptw-text-primary-500 dark:hover:ptw-text-primary-400 ptw-text-gray-900 dark:ptw-text-gray-100"
         :class="[
-          canReset ? 'htw-opacity-50 hover:htw-opacity-100' : 'htw-opacity-25 htw-pointer-events-none',
+          canReset ? 'ptw-opacity-50 hover:ptw-opacity-100' : 'ptw-opacity-25 ptw-pointer-events-none',
         ]"
         @click.stop="reset()"
       />