@glossarist/concept-browser 0.1.0

package/src/views/HomeView.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useRouter } from 'vue-router';
+import { useDsStyle } from '../utils/dataset-style';
+import { useSiteConfig } from '../config/use-site-config';
+
+const store = useVocabularyStore();
+const router = useRouter();
+const { getStyle } = useDsStyle();
+const { config: siteConfig, loadConfig } = useSiteConfig();
+const exploring = ref(false);
+
+onMounted(async () => {
+  await loadConfig();
+  if (siteConfig.value?.defaultDataset) {
+    const targetId = siteConfig.value.defaultDataset;
+    if (!store.initialized) await store.discoverDatasets();
+    if (store.datasets.has(targetId)) {
+      router.replace({ name: 'dataset', params: { registerId: targetId } });
+    }
+  }
+});
+
+async function exploreRandom() {
+  exploring.value = true;
+  try {
+    if (!store.initialized) await store.discoverDatasets();
+    const loaded = [...store.datasets.values()].filter(a => a.index);
+    if (!loaded.length) {
+      const first = filteredDatasets.value[0];
+      if (first) await store.loadDataset(first.id);
+    }
+    const result = await store.getRandomConcept();
+    if (result) {
+      await store.viewConcept(result.registerId, result.conceptId);
+      router.push({ name: 'concept', params: { registerId: result.registerId, conceptId: result.conceptId } });
+    }
+  } finally {
+    exploring.value = false;
+  }
+}
+
+const filteredDatasets = computed(() => {
+  if (!siteConfig.value) return store.datasetList;
+  const allowed = new Set(siteConfig.value.datasets);
+  return store.datasetList.filter(ds => allowed.has(ds.id));
+});
+
+const totalConcepts = computed(() =>
+  filteredDatasets.value.reduce((sum, ds) => sum + ds.manifest.conceptCount, 0)
+);
+
+const totalLanguages = computed(() => {
+  const langs = new Set<string>();
+  for (const ds of filteredDatasets.value) {
+    for (const l of ds.manifest.languages) langs.add(l);
+  }
+  return langs.size;
+});
+
+function goToDataset(id: string) {
+  router.push({ name: 'dataset', params: { registerId: id } });
+}
+function goToSearch() { router.push({ name: 'search' }); }
+function goToGraph() { router.push({ name: 'graph' }); }
+</script>
+
+<template>
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
+    <!-- Hero -->
+    <div class="mb-10 sm:mb-14">
+      <div class="flex items-center gap-2 mb-4">
+        <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300">{{ siteConfig?.branding?.ownerName || 'Glossarist' }}</span>
+        <span class="w-4 sm:w-6 h-px bg-ink-200"></span>
+        <span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-ink-300 hidden sm:inline">{{ siteConfig?.subtitle || 'Terminology Register' }}</span>
+      </div>
+      <h1 class="font-serif text-[2rem] sm:text-[2.75rem] text-ink-800 leading-[1.1] mb-4 tracking-tight">
+        {{ siteConfig?.title || 'Glossarist' }}<br class="hidden sm:block" /> <span v-if="siteConfig?.subtitle">{{ siteConfig.subtitle }}</span>
+        <template v-if="!siteConfig?.subtitle">Terminology<br class="hidden sm:block" /> Register</template>
+      </h1>
+      <p class="text-base text-ink-400 max-w-lg leading-relaxed">
+        Explore standardized terminology datasets from ISO and IEC technical committees.
+        Browse concepts, definitions, and cross-references across multilingual vocabularies.
+      </p>
+      <div class="flex flex-wrap gap-3 mt-7">
+        <button @click="goToSearch" class="btn-primary flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+          Search
+        </button>
+        <button @click="goToGraph" class="btn-secondary flex items-center gap-2">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
+          Graph View
+        </button>
+        <button @click="exploreRandom" :disabled="exploring" class="btn-secondary flex items-center gap-2">
+          <svg v-if="!exploring" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
+          <svg v-else class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
+          {{ exploring ? 'Exploring…' : 'Surprise Me' }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="grid grid-cols-1 sm:grid-cols-3 gap-px bg-ink-100/60 rounded-xl overflow-hidden mb-10 sm:mb-14">
+      <div class="bg-surface-raised px-4 sm:px-6 py-5 animate-entrance" style="animation-delay: 80ms">
+        <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ filteredDatasets.length }}</div>
+        <div class="text-sm text-ink-400 mt-1">Datasets</div>
+      </div>
+      <div class="bg-surface-raised px-6 py-5 animate-entrance" style="animation-delay: 140ms">
+        <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ totalConcepts.toLocaleString() }}</div>
+        <div class="text-sm text-ink-400 mt-1">Concepts</div>
+      </div>
+      <div class="bg-surface-raised px-6 py-5 animate-entrance" style="animation-delay: 200ms">
+        <div class="text-3xl font-serif text-ink-800 tabular-nums">{{ totalLanguages }}</div>
+        <div class="text-sm text-ink-400 mt-1">Languages</div>
+      </div>
+    </div>
+
+    <!-- Dataset cards -->
+    <div class="flex items-center justify-between mb-5">
+      <div class="section-label mb-0">Available Datasets</div>
+      <span class="text-xs text-ink-300">Click to browse</span>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <button
+        v-for="(ds, idx) in filteredDatasets"
+        :key="ds.id"
+        @click="goToDataset(ds.id)"
+        class="card-hover p-6 text-left group animate-entrance"
+        :style="{ borderLeft: `3px solid ${getStyle(ds.id).color}`, animationDelay: `${idx * 60}ms` }"
+      >
+        <div class="flex items-start gap-3 mb-4">
+          <span class="w-2.5 h-2.5 rounded-full mt-1.5 flex-shrink-0" :style="{ backgroundColor: getStyle(ds.id).color }"></span>
+          <div class="min-w-0">
+            <h2 class="font-serif text-xl text-ink-800 leading-snug group-hover:text-ink-900 transition-colors">
+              {{ ds.manifest.title }}
+            </h2>
+          </div>
+        </div>
+
+        <p class="text-sm text-ink-400 mb-5 line-clamp-2 leading-relaxed pl-[22px]">
+          {{ ds.manifest.description }}
+        </p>
+
+        <div class="flex items-center gap-3 pl-[22px] mb-3">
+          <span :style="{ color: getStyle(ds.id).color }" class="text-sm font-semibold tabular-nums">{{ ds.manifest.conceptCount.toLocaleString() }}</span>
+          <span class="text-xs text-ink-300">concepts</span>
+          <span class="text-ink-200 text-xs">&middot;</span>
+          <span class="text-sm text-ink-500 tabular-nums">{{ ds.manifest.languages.length }}</span>
+          <span class="text-xs text-ink-300">languages</span>
+        </div>
+
+        <div class="flex flex-wrap gap-1.5 pl-[22px] mb-3">
+          <span v-for="tag in (ds.manifest.tags ?? []).slice(0, 3)" :key="tag" class="badge text-[10px]" :style="{ backgroundColor: getStyle(ds.id).light, color: getStyle(ds.id).dark }">
+            {{ tag }}
+          </span>
+        </div>
+
+        <div class="flex items-center justify-between pl-[22px]">
+          <span class="text-[11px] text-ink-300">{{ ds.manifest.owner }}</span>
+          <svg class="w-4 h-4 text-ink-200 group-hover:text-ink-400 group-hover:translate-x-0.5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+          </svg>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>

package/src/views/NewsView.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useSiteConfig } from '../config/use-site-config';
+import { renderAsciiDocLite } from '../utils/asciidoc-lite';
+
+interface NewsPost {
+  slug: string;
+  title: string;
+  date: string;
+  categories: string[];
+  file: string;
+  excerpt: string;
+}
+
+const { config } = useSiteConfig();
+const posts = ref<NewsPost[]>([]);
+const loading = ref(true);
+const error = ref<string | null>(null);
+
+const activeSlug = ref<string | null>(null);
+const activeHtml = ref('');
+const activeLoading = ref(false);
+
+onMounted(async () => {
+  try {
+    const resp = await fetch('/news.json');
+    if (resp.ok) posts.value = await resp.json();
+  } catch (e: any) {
+    error.value = e.message;
+  }
+  loading.value = false;
+});
+
+async function openPost(post: NewsPost) {
+  if (activeSlug.value === post.slug) {
+    activeSlug.value = null;
+    activeHtml.value = '';
+    return;
+  }
+  activeSlug.value = post.slug;
+  activeLoading.value = true;
+  try {
+    const resp = await fetch(post.file);
+    if (resp.ok) {
+      const text = await resp.text();
+      const body = stripFrontmatter(text);
+      activeHtml.value = renderAsciiDocLite(body);
+    }
+  } catch { /* ignore */ }
+  activeLoading.value = false;
+}
+
+function stripFrontmatter(text: string): string {
+  const lines = text.split('\n');
+  if (lines[0] !== '---') return text;
+  let end = -1;
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i] === '---') { end = i; break; }
+  }
+  if (end < 0) return text;
+  return lines.slice(end + 1).join('\n').trim();
+}
+
+function formatDate(dateStr: string) {
+  if (!dateStr) return '';
+  try {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'long', day: 'numeric',
+    });
+  } catch {
+    return dateStr;
+  }
+}
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <h1 class="font-serif text-3xl text-ink-800 mb-2">News</h1>
+    <p class="text-ink-400 mb-8">
+      Updates from {{ config?.branding?.ownerName || config?.title || 'Glossarist' }}.
+    </p>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-6">
+        <div v-for="i in 3" :key="i" class="card p-6 space-y-3">
+          <div class="h-3 bg-ink-100 rounded w-24"></div>
+          <div class="h-6 bg-ink-100 rounded w-3/4"></div>
+          <div class="h-4 bg-ink-100 rounded w-full"></div>
+        </div>
+      </div>
+    </template>
+
+    <template v-else-if="error">
+      <div class="card p-8 text-center">
+        <p class="text-ink-500">Failed to load news posts.</p>
+      </div>
+    </template>
+
+    <template v-else-if="posts.length === 0">
+      <div class="card p-8 text-center">
+        <p class="text-ink-500">No news posts yet.</p>
+      </div>
+    </template>
+
+    <template v-else>
+      <div class="space-y-4">
+        <article v-for="post in posts" :key="post.slug">
+          <button
+            @click="openPost(post)"
+            class="w-full text-left card p-6 hover:bg-surface-alt/50 transition-colors"
+            :class="activeSlug === post.slug ? 'ring-1 ring-ink-200' : ''"
+          >
+            <div class="flex items-center gap-3 text-xs text-ink-400 mb-2">
+              <time :datetime="post.date">{{ formatDate(post.date) }}</time>
+              <span v-if="post.categories.length" class="flex gap-1">
+                <span
+                  v-for="cat in post.categories"
+                  :key="cat"
+                  class="bg-ink-50 text-ink-500 px-1.5 py-0.5 rounded"
+                >{{ cat }}</span>
+              </span>
+            </div>
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="font-serif text-xl text-ink-800">{{ post.title }}</h2>
+              <svg
+                class="w-5 h-5 text-ink-300 flex-shrink-0 mt-1 transition-transform"
+                :class="activeSlug === post.slug ? 'rotate-180' : ''"
+                fill="none" stroke="currentColor" viewBox="0 0 24 24"
+              ><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9l-7 7-7-7"/></svg>
+            </div>
+            <p v-if="activeSlug !== post.slug && post.excerpt" class="text-ink-500 text-sm mt-2 leading-relaxed">{{ post.excerpt }}</p>
+          </button>
+
+          <div v-if="activeSlug === post.slug" class="card border-t-0 rounded-t-none p-6 pt-2 -mt-1">
+            <div v-if="activeLoading" class="animate-pulse space-y-2">
+              <div class="h-4 bg-ink-100 rounded w-full"></div>
+              <div class="h-4 bg-ink-100 rounded w-5/6"></div>
+              <div class="h-4 bg-ink-100 rounded w-4/6"></div>
+            </div>
+            <div v-else class="prose-news" v-html="activeHtml"></div>
+          </div>
+        </article>
+      </div>
+    </template>
+  </div>
+</template>

package/src/views/ResolveView.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { getFactory } from '../adapters/factory';
+import { useVocabularyStore } from '../stores/vocabulary';
+
+const route = useRoute();
+const router = useRouter();
+const store = useVocabularyStore();
+
+const error = ref<string | null>(null);
+const uri = ref('');
+
+onMounted(async () => {
+  uri.value = decodeURIComponent(route.params.uri as string);
+  const factory = getFactory();
+
+  if (!factory.getAdapters().length) {
+    try {
+      await store.discoverDatasets();
+    } catch {
+      error.value = 'Failed to load datasets.';
+      return;
+    }
+  }
+
+  const resolution = factory.resolve(uri.value);
+
+  if (resolution.type === 'internal') {
+    if (!store.datasets.has(resolution.registerId)) {
+      try {
+        await store.loadDataset(resolution.registerId);
+      } catch {
+        error.value = `Failed to load dataset: ${resolution.registerId}`;
+        return;
+      }
+    }
+    router.replace({ name: 'concept', params: { registerId: resolution.registerId, conceptId: resolution.conceptId } });
+  } else if (resolution.type === 'site') {
+    window.location.href = `${resolution.baseUrl}/resolve/${encodeURIComponent(uri.value)}`;
+  } else if (resolution.type === 'url') {
+    window.location.href = resolution.url;
+  } else {
+    error.value = 'Concept not found';
+  }
+});
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto px-4 py-16 text-center">
+    <template v-if="error">
+      <h1 class="text-2xl font-serif text-ink-800 mb-4">Concept not found</h1>
+      <p class="text-ink-500 mb-2">The following concept URI could not be resolved:</p>
+      <code class="text-sm text-ink-600 break-all bg-ink-50 px-3 py-2 rounded">{{ uri }}</code>
+      <div class="mt-8">
+        <router-link :to="{ name: 'home' }" class="text-blue-600 hover:underline">Return to home</router-link>
+      </div>
+    </template>
+    <template v-else>
+      <p class="text-ink-400">Resolving...</p>
+    </template>
+  </div>
+</template>

package/src/views/SearchView.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import SearchBar from '../components/SearchBar.vue';
+import { useUiStore } from '../stores/ui';
+
+const route = useRoute();
+const router = useRouter();
+const ui = useUiStore();
+
+onMounted(() => {
+  if (route.query.q && typeof route.query.q === 'string') {
+    ui.searchQuery = route.query.q;
+  }
+});
+
+watch(() => route.query.q, (q) => {
+  if (typeof q === 'string' && q) {
+    ui.searchQuery = q;
+  }
+});
+</script>
+
+<template>
+  <div class="px-4 sm:px-6 lg:px-8 py-8">
+    <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">Search</span>
+    </nav>
+    <SearchBar />
+  </div>
+</template>

package/src/views/StatsView.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useVocabularyStore } from '../stores/vocabulary';
+import { useDsStyle } from '../utils/dataset-style';
+import { useDatasetLoader } from '../composables/use-dataset-loader';
+import { langName, langLabel } from '../utils/lang';
+
+const props = defineProps<{ registerId: string }>();
+
+const store = useVocabularyStore();
+const { getColor } = useDsStyle();
+const { loading, localError, ensureLoaded } = useDatasetLoader(() => props.registerId);
+
+const manifest = computed(() => store.manifests.get(props.registerId));
+
+interface LangStat {
+  lang: string;
+  terms: number;
+  definitions: number;
+}
+
+const stats = computed(() => {
+  const m = manifest.value;
+  if (!m) return { langs: [], total: 0 };
+
+  const ls = m.languageStats || {};
+  const langs: LangStat[] = m.languages.map(lang => ({
+    lang,
+    terms: ls[lang]?.terms ?? 0,
+    definitions: ls[lang]?.definitions ?? 0,
+  }));
+
+  // Sort: eng first, then by term count descending
+  langs.sort((a, b) => {
+    if (a.lang === 'eng') return -1;
+    if (b.lang === 'eng') return 1;
+    return b.terms - a.terms;
+  });
+
+  return { langs, total: m.conceptCount };
+});
+
+const maxTerms = computed(() => Math.max(...stats.value.langs.map(l => l.terms), 1));
+</script>
+
+<template>
+  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <!-- Breadcrumb -->
+    <nav aria-label="Breadcrumb" class="flex items-center gap-1.5 text-sm text-ink-400 mb-6">
+      <router-link :to="{ name: 'home' }" class="hover:text-ink-700 transition-colors">Home</router-link>
+      <span class="text-ink-200">/</span>
+      <router-link :to="{ name: 'dataset', params: { registerId } }" class="hover:text-ink-700 transition-colors">{{ manifest?.title || registerId }}</router-link>
+      <span class="text-ink-200">/</span>
+      <span class="text-ink-700">Statistics</span>
+    </nav>
+
+    <template v-if="loading">
+      <div class="animate-pulse space-y-6">
+        <div class="h-8 bg-ink-100 rounded w-32"></div>
+        <div class="h-4 bg-ink-100 rounded w-64"></div>
+        <div class="card overflow-hidden">
+          <div class="h-80 bg-ink-50"></div>
+        </div>
+      </div>
+    </template>
+    <template v-else-if="localError">
+      <div class="card p-8 border-red-200 bg-red-50/50 text-center">
+        <p class="text-red-700 font-medium mb-1">Failed to load statistics</p>
+        <p class="text-sm text-red-600/80 mb-4">{{ localError }}</p>
+        <button @click="ensureLoaded" class="btn-primary">Retry</button>
+      </div>
+    </template>
+    <template v-else-if="manifest">
+      <h1 class="font-serif text-3xl text-ink-800 mb-2">Statistics</h1>
+      <p class="text-ink-400 mb-8">
+        {{ stats.total.toLocaleString() }} concepts across {{ manifest.languages.length }} languages.
+      </p>
+
+      <!-- Language stats table -->
+      <div class="card -mx-4 sm:mx-0 overflow-x-auto">
+        <table class="w-full text-sm">
+          <thead>
+            <tr class="border-b border-ink-100/60 bg-ink-50/50">
+              <th class="text-left px-5 py-3 text-ink-500 font-medium">Language</th>
+              <th class="text-right px-5 py-3 text-ink-500 font-medium">Terms</th>
+              <th class="text-right px-5 py-3 text-ink-500 font-medium">Definitions</th>
+              <th class="px-5 py-3 text-ink-500 font-medium w-40"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="s in stats.langs" :key="s.lang" class="border-b border-ink-50 last:border-0">
+              <td class="px-5 py-3">
+                <div class="flex items-center gap-2">
+                  <span class="text-xs font-semibold text-ink-500 bg-ink-50 px-1.5 py-0.5 rounded">{{ langLabel(s.lang) }}</span>
+                  <span class="font-medium text-ink-800">{{ langName(s.lang) }}</span>
+                  <span class="text-ink-300 text-xs">({{ s.lang }})</span>
+                </div>
+              </td>
+              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.terms.toLocaleString() }}</td>
+              <td class="text-right px-5 py-3 font-mono text-ink-700">{{ s.definitions.toLocaleString() }}</td>
+              <td class="px-5 py-3">
+                <div class="flex items-center gap-2">
+                  <div class="h-2 rounded-full bg-ink-50 overflow-hidden flex-1">
+                    <div
+                      class="h-full rounded-full transition-all duration-500"
+                      :style="{
+                        width: (s.terms / maxTerms * 100) + '%',
+                        backgroundColor: getColor(registerId),
+                      }"
+                    ></div>
+                  </div>
+                  <span class="text-xs text-ink-300 w-10 text-right tabular-nums">{{ Math.round(s.terms / maxTerms * 100) }}%</span>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </template>
+  </div>
+</template>

package/tailwind.config.js

@@ -0,0 +1,43 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  content: [
+    "./index.html",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        serif: ['"DM Serif Display"', 'Georgia', 'serif'],
+        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
+        mono: ['"JetBrains Mono"', 'monospace'],
+      },
+      colors: {
+        ink: {
+          DEFAULT: '#1a1b2e',
+          50: '#f0f0f4',
+          100: '#dddde6',
+          200: '#b8b9cc',
+          300: '#8d8faa',
+          400: '#636588',
+          500: '#484a6e',
+          600: '#36385a',
+          700: '#2c2e4a',
+          800: '#1a1b2e',
+          900: '#0f1020',
+        },
+        surface: {
+          DEFAULT: '#faf9f6',
+          alt: '#f3f2ee',
+          raised: '#ffffff',
+        },
+      },
+      typography: {
+        serif: {
+          'font-family': '"DM Serif Display", Georgia, serif',
+        },
+      },
+    },
+  },
+  plugins: [],
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "baseUrl": "."
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const cwd = process.cwd()
+
+export default defineConfig({
+  base: process.env.BASE_PATH || '/',
+  root: __dirname,
+  publicDir: resolve(cwd, 'public'),
+  build: {
+    outDir: resolve(cwd, 'dist'),
+    emptyOutDir: true,
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    },
+  },
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+  },
+})