@vylos/core 0.1.0

package/src/components/core/ChoicePanel.vue

@@ -0,0 +1,115 @@
+<template>
+  <Transition name="choice-fade">
+    <div v-if="engineState.choices" class="choice-overlay">
+      <p v-if="engineState.choices.prompt" class="choice-prompt">
+        {{ engineState.choices.prompt }}
+      </p>
+
+      <div class="choice-list">
+        <button
+          v-for="option in engineState.choices.options"
+          :key="option.value"
+          :disabled="option.disabled"
+          :class="[
+            'choice-btn',
+            { 'choice-btn--selected': isRedoMode && option.value === engineState.choices!.historySelectedValue },
+          ]"
+          @click="handleChoice(option.value)"
+        >
+          {{ option.text }}
+        </button>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+
+const engineState = useEngineStateStore();
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+
+const isRedoMode = computed(() => engineState.choices?.historyStepIndex != null);
+
+function handleChoice(value: string): void {
+  if (!engine) return;
+
+  if (isRedoMode.value) {
+    const stepIndex = engineState.choices!.historyStepIndex!;
+    engineState.historyBrowsing = false;
+    engineState.setChoices(null);
+    engine.eventRunner.requestRedoChoice(stepIndex, value);
+  } else {
+    engine.eventRunner.resolveWait(value);
+  }
+}
+</script>
+
+<style scoped>
+.choice-fade-enter-active,
+.choice-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+.choice-fade-enter-from,
+.choice-fade-leave-to {
+  opacity: 0;
+}
+
+.choice-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 35;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  padding: 0 4cqw;
+}
+
+.choice-prompt {
+  color: white;
+  font-size: 2cqw;
+  font-weight: 600;
+  margin-bottom: 3cqh;
+  text-align: center;
+}
+
+.choice-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5cqh;
+  width: 100%;
+  max-width: 50cqw;
+}
+
+.choice-btn {
+  padding: 1.5cqh 3cqw;
+  background: rgba(0, 0, 0, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: white;
+  font-size: 1.8cqw;
+  text-align: left;
+  border-radius: 0.5cqw;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.choice-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.6);
+}
+
+.choice-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.choice-btn--selected {
+  border-color: rgba(147, 197, 253, 0.6);
+  background: rgba(147, 197, 253, 0.15);
+}
+</style>

package/src/components/core/CustomOverlay.vue

@@ -0,0 +1,27 @@
+<template>
+  <div v-if="engineState.overlayId" class="absolute inset-0 z-40 pointer-events-none">
+    <!-- Project-specific overlay components are rendered here by ID -->
+    <!-- Actual dynamic component resolution is handled by the project layer -->
+    <component
+      :is="resolvedComponent"
+      v-if="resolvedComponent"
+      v-bind="engineState.overlayProps ?? {}"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import type { Component } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+
+const engineState = useEngineStateStore();
+
+/** Optional registry injected by the project shell */
+const overlayRegistry = inject<Record<string, Component>>('vylos-overlay-registry', {});
+
+const resolvedComponent = computed<Component | undefined>(() => {
+  if (!engineState.overlayId) return undefined;
+  return overlayRegistry[engineState.overlayId];
+});
+</script>

package/src/components/core/DialogueBox.vue

@@ -0,0 +1,144 @@
+<template>
+  <Transition name="dlg-slide">
+    <div
+      v-if="engineState.dialogue"
+      class="dlg-wrapper"
+      @click="handleClick"
+    >
+      <div class="dlg-box" :class="{ 'dlg-box--history': engineState.historyBrowsing }">
+        <!-- Speaker name -->
+        <div v-if="engineState.dialogue.speaker" class="dlg-speaker">
+          {{ engineState.dialogue.speaker }}
+        </div>
+
+        <!-- Dialogue text -->
+        <p class="dlg-text" :class="{ 'dlg-text--narration': engineState.dialogue.isNarration }">
+          {{ engineState.dialogue.text }}
+        </p>
+
+        <!-- Continue / History indicator -->
+        <div class="dlg-continue">
+          <template v-if="engineState.historyBrowsing">
+            &#9664; &#9654; history
+          </template>
+          <template v-else>
+            &#9660; continue
+          </template>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+
+const engineState = useEngineStateStore();
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+
+function handleClick(): void {
+  if (!engine) return;
+
+  if (engine.eventRunner.isBrowsingHistory) {
+    // In history mode — advance through history (click = forward)
+    const step = engine.eventRunner.historyForward();
+    if (step) {
+      if (step.type === 'say' && step.dialogue) {
+        engineState.setDialogue(step.dialogue);
+        engineState.setChoices(null);
+      } else if (step.type === 'choice' && step.choiceOptions) {
+        engineState.setDialogue(null);
+        engineState.setChoices({
+          prompt: null,
+          options: step.choiceOptions,
+          historyStepIndex: step.stepIndex,
+          historySelectedValue: step.choiceResult,
+        });
+      }
+    }
+    if (!engine.eventRunner.isBrowsingHistory) {
+      engineState.historyBrowsing = false;
+      const live = engine.eventRunner.getLiveDialogue();
+      if (live) {
+        engineState.setDialogue({
+          text: live.text,
+          speaker: live.speaker,
+          isNarration: !live.speaker,
+        });
+      }
+      engineState.setChoices(null);
+    }
+  } else {
+    // Normal mode — resolve the wait to advance dialogue
+    engine.eventRunner.resolveWait();
+  }
+}
+</script>
+
+<style scoped>
+.dlg-slide-enter-active,
+.dlg-slide-leave-active {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.dlg-slide-enter-from,
+.dlg-slide-leave-to {
+  transform: translateY(100%);
+  opacity: 0;
+}
+
+.dlg-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 30;
+  padding: 2cqh 2cqw;
+  cursor: pointer;
+  user-select: none;
+}
+
+.dlg-box {
+  background: rgba(0, 0, 0, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1cqw;
+  padding: 2cqh 2.5cqw;
+  max-width: 85cqw;
+  margin: 0 auto;
+  transition: border-color 0.2s ease;
+}
+
+.dlg-box--history {
+  border-color: rgba(147, 197, 253, 0.4);
+}
+
+.dlg-speaker {
+  color: #fde047;
+  font-weight: 700;
+  font-size: 1.8cqw;
+  margin-bottom: 1cqh;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dlg-text {
+  color: white;
+  font-size: 2cqw;
+  line-height: 1.6;
+  margin: 0;
+}
+
+.dlg-text--narration {
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.dlg-continue {
+  text-align: right;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 1.2cqw;
+  margin-top: 1cqh;
+}
+</style>

package/src/components/core/DrawableOverlay.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    v-if="engineState.drawableEvents.length > 0 && !engineState.dialogue && !engineState.choices"
+    class="draw-overlay"
+  >
+    <button
+      v-for="entry in engineState.drawableEvents"
+      :key="entry.id"
+      :title="entry.label"
+      :class="['draw-btn', `draw-btn--${entry.position}`]"
+      @click.stop="engine?.navigationManager.selectDrawableEvent(entry.id)"
+    >
+      <div class="draw-btn__bg"></div>
+      <div class="draw-btn__content">
+        <span v-if="entry.icon" class="draw-btn__icon">{{ entry.icon }}</span>
+        <span class="draw-btn__label">{{ entry.label }}</span>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+
+const engineState = useEngineStateStore();
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+</script>
+
+<style scoped>
+.draw-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 15;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3cqw;
+  padding: 5cqh 3cqw;
+}
+
+.draw-btn {
+  pointer-events: auto;
+  position: relative;
+  border: none;
+  border-radius: 1.5cqw;
+  padding: 2cqh 2.5cqw;
+  cursor: pointer;
+  transition: transform 0.2s ease-out;
+  background: none;
+}
+
+.draw-btn--left {
+  align-self: center;
+  margin-right: auto;
+}
+
+.draw-btn--center {
+  align-self: center;
+}
+
+.draw-btn--right {
+  align-self: center;
+  margin-left: auto;
+}
+
+.draw-btn:hover {
+  transform: scale(1.08) translateY(-0.5cqh);
+}
+
+.draw-btn__bg {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 1.5cqw;
+  transition: all 0.2s;
+}
+
+.draw-btn:hover .draw-btn__bg {
+  background: rgba(168, 85, 247, 0.5);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.draw-btn__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5cqh;
+}
+
+.draw-btn__icon {
+  font-size: 4cqw;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+}
+
+.draw-btn__label {
+  color: white;
+  font-weight: 500;
+  font-size: 2cqw;
+  text-align: center;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+}
+</style>

package/src/components/core/ForegroundLayer.vue

@@ -0,0 +1,31 @@
+<template>
+  <Transition name="fg-fade">
+    <div
+      v-if="engineState.foreground"
+      class="absolute inset-0 flex items-end justify-center z-10 pointer-events-none"
+    >
+      <img
+        :src="engineState.foreground"
+        class="max-h-full object-contain"
+        alt=""
+      />
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { useEngineStateStore } from '../../stores/engineState';
+
+const engineState = useEngineStateStore();
+</script>
+
+<style scoped>
+.fg-fade-enter-active,
+.fg-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fg-fade-enter-from,
+.fg-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/components/menu/ActionOverlay.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    v-if="engineState.availableActions.length > 0 && !engineState.dialogue && !engineState.choices"
+    class="act-overlay"
+  >
+    <div class="act-overlay__row">
+      <button
+        v-for="action in engineState.availableActions"
+        :key="action.id"
+        :title="action.label"
+        class="act-btn group"
+        @click="engine?.navigationManager.selectAction(action.id)"
+      >
+        <div class="act-btn__bg"></div>
+        <div class="act-btn__ring"></div>
+        <div class="act-btn__label">
+          <span class="act-btn__text">{{ action.label }}</span>
+        </div>
+        <div class="act-btn__gradient"></div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+
+const engineState = useEngineStateStore();
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+</script>
+
+<style scoped>
+.act-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  pointer-events: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding: 1.5cqh 1.5cqw;
+}
+
+.act-overlay__row {
+  display: flex;
+  gap: 1cqw;
+  pointer-events: auto;
+  height: 18cqh;
+  align-items: center;
+}
+
+.act-btn {
+  position: relative;
+  overflow: hidden;
+  border: none;
+  border-radius: 9999px;
+  height: 100%;
+  aspect-ratio: 1;
+  cursor: pointer;
+  transition: transform 0.2s ease-out;
+  background: none;
+}
+
+.act-btn:hover {
+  transform: scale(1.1) translateY(-0.8cqh);
+}
+
+.act-btn__bg {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 9999px;
+  transition: all 0.2s;
+}
+
+.act-btn:hover .act-btn__bg {
+  background: rgba(22, 163, 74, 0.6);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.act-btn__ring {
+  position: absolute;
+  inset: 0.6cqw;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: border-color 0.2s;
+}
+
+.act-btn:hover .act-btn__ring {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.act-btn__label {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.act-btn__text {
+  color: white;
+  font-weight: 500;
+  font-size: 2.2cqw;
+  text-align: center;
+  line-height: 1.1;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+}
+
+.act-btn__gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
+  border-radius: 9999px;
+  pointer-events: none;
+}
+</style>

package/src/components/menu/LocationOverlay.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    v-if="engineState.availableLocations.length > 0 && !engineState.dialogue && !engineState.choices"
+    class="loc-overlay"
+  >
+    <div class="loc-overlay__row">
+      <button
+        v-for="location in engineState.availableLocations"
+        :key="location.id"
+        :disabled="!location.accessible"
+        :title="location.name"
+        class="loc-btn group"
+        @click="engine?.navigationManager.selectLocation(location.id)"
+      >
+        <div class="loc-btn__bg"></div>
+        <div class="loc-btn__ring"></div>
+        <div class="loc-btn__label">
+          <span class="loc-btn__text">{{ location.name }}</span>
+        </div>
+        <div class="loc-btn__gradient"></div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { useEngineStateStore } from '../../stores/engineState';
+import { ENGINE_INJECT_KEY } from '../../composables/useEngine';
+import type { Engine } from '../../engine/core/Engine';
+
+const engineState = useEngineStateStore();
+const engine = inject<Engine>(ENGINE_INJECT_KEY);
+</script>
+
+<style scoped>
+.loc-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  pointer-events: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 1.5cqh 1.5cqw;
+}
+
+.loc-overlay__row {
+  display: flex;
+  gap: 1cqw;
+  pointer-events: auto;
+  height: 18cqh;
+  align-items: center;
+}
+
+.loc-btn {
+  position: relative;
+  overflow: hidden;
+  border: none;
+  border-radius: 9999px;
+  height: 100%;
+  aspect-ratio: 1;
+  cursor: pointer;
+  transition: transform 0.2s ease-out;
+  background: none;
+}
+
+.loc-btn:hover {
+  transform: scale(1.1) translateY(-0.8cqh);
+}
+
+.loc-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.loc-btn:disabled:hover {
+  transform: none;
+}
+
+.loc-btn__bg {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 9999px;
+  transition: all 0.2s;
+}
+
+.loc-btn:hover .loc-btn__bg {
+  background: rgba(37, 99, 235, 0.6);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
+.loc-btn__ring {
+  position: absolute;
+  inset: 0.6cqw;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transition: border-color 0.2s;
+}
+
+.loc-btn:hover .loc-btn__ring {
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.loc-btn__label {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loc-btn__text {
+  color: white;
+  font-weight: 500;
+  font-size: 2.2cqw;
+  text-align: center;
+  line-height: 1.1;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 90%;
+}
+
+.loc-btn__gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
+  border-radius: 9999px;
+  pointer-events: none;
+}
+</style>