feat: add initial application structure with configuration, UI components, and state management

components/GlossaryTooltip.vue

@@ -0,0 +1,54 @@
+<template>
+  <UTooltip 
+    :text="definition"
+    :ui="{ 
+      background: 'bg-white dark:bg-gray-900',
+      ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+      rounded: 'rounded-lg',
+      shadow: 'shadow-lg',
+      base: 'px-3 py-2 text-sm max-w-xs'
+    }"
+    :popper="{ arrow: true }"
+  >
+    <template #text>
+      <div class="space-y-2">
+        <div class="font-medium">{{ term }}</div>
+        <div class="text-gray-600">{{ definition }}</div>
+        <NuxtLink 
+          :to="`/glossary#${termId}`" 
+          class="text-primary-600 hover:text-primary-700 text-xs inline-flex items-center gap-1"
+          @click="$emit('glossary-click')"
+        >
+          <UIcon name="i-heroicons-book-open" class="w-3 h-3" />
+          See full definition
+        </NuxtLink>
+      </div>
+    </template>
+    
+    <span 
+      class="underline decoration-dotted decoration-gray-400 hover:decoration-primary-500 cursor-help"
+      :class="{ 'font-medium': emphasis }"
+      :tabindex="0"
+      :aria-describedby="`tooltip-${termId}`"
+      @keydown.enter="$emit('glossary-click')"
+      @keydown.space.prevent="$emit('glossary-click')"
+    >
+      <slot>{{ term }}</slot>
+    </span>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  term: string
+  termId: string
+  definition: string
+  emphasis?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emphasis: false
+})
+
+defineEmits(['glossary-click'])
+</script>