@glossarist/concept-browser 0.7.51 → 0.7.53

package/src/components/DatasetSeriesCard.vue

@@ -0,0 +1,270 @@
+<script setup lang="ts">
+/**
+ * DatasetSeriesCard — sidebar widget showing all editions of the same
+ * vocabulary series as the current dataset. Click any edition to navigate.
+ *
+ * Plugged into the DatasetView main column so users browsing viml-2022 see the
+ * 1968 / 2000 / 2013 / 2022 family at a glance. Dark-mode aware via the
+ * `theme-dark` class (driven by uiStore.isDark).
+ */
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useDatasetSeries } from '../composables/useDatasetSeries';
+import { useUiStore } from '../stores/ui';
+
+const props = defineProps<{
+  registerId: string;
+}>();
+
+const router = useRouter();
+const uiStore = useUiStore();
+
+const { seriesForActive } = useDatasetSeries(() => props.registerId);
+const series = computed(() => seriesForActive.value);
+
+function navigate(registerId: string) {
+  if (registerId === props.registerId) return;
+  router.push({ name: 'dataset', params: { registerId } });
+}
+
+function memberBadge(member: { isCurrent: boolean; isActive: boolean; status: string }): string | null {
+  if (member.isActive) return 'viewing';
+  if (member.isCurrent) return 'current';
+  if (member.status === 'withdrawn' || member.status === 'superseded') return 'archived';
+  return null;
+}
+</script>
+
+<template>
+  <section
+    v-if="series && series.members.length > 1"
+    :class="['series-card', { 'theme-dark': uiStore.isDark }]"
+    :aria-label="`Series ${series.title}`"
+  >
+    <header class="series-head">
+      <span class="series-label">Edition series</span>
+      <span class="series-key">{{ series.key }}</span>
+    </header>
+
+    <h3 class="series-title">{{ series.title }}</h3>
+
+    <div class="series-meta">
+      <span class="series-count">{{ series.members.length }} editions</span>
+      <span class="series-sep">·</span>
+      <span class="series-total">{{ series.totalConcepts.toLocaleString() }} concepts</span>
+    </div>
+
+    <ol class="series-list">
+      <li
+        v-for="member in [...series.members].reverse()"
+        :key="member.id"
+        :class="['series-item', { active: member.isActive }]"
+      >
+        <button
+          class="series-button"
+          :disabled="member.isActive"
+          @click="navigate(member.id)"
+        >
+          <span class="series-year">{{ member.year ?? '—' }}</span>
+          <span class="series-detail">
+            <span class="series-ref">{{ member.ref }}</span>
+            <span v-if="member.conceptCount" class="series-concepts">
+              {{ member.conceptCount.toLocaleString() }} concepts
+            </span>
+          </span>
+          <span
+            v-if="memberBadge(member)"
+            class="series-badge"
+            :class="{
+              'badge-current': memberBadge(member) === 'current',
+              'badge-viewing': memberBadge(member) === 'viewing',
+              'badge-archived': memberBadge(member) === 'archived',
+            }"
+          >
+            {{ memberBadge(member) }}
+          </span>
+        </button>
+      </li>
+    </ol>
+  </section>
+</template>
+
+<style scoped>
+/* Light theme tokens */
+.series-card {
+  --sc-bg: linear-gradient(180deg, rgba(255, 252, 240, 0.96) 0%, rgba(248, 240, 220, 0.92) 100%);
+  --sc-bg-solid: #FFFCF2;
+  --sc-ink: #0F1A30;
+  --sc-ink-soft: #2D3A52;
+  --sc-ink-mute: #5A6577;
+  --sc-rule: rgba(184, 147, 90, 0.30);
+  --sc-gold: #B8935A;
+  --sc-gold-deep: #8C6A3A;
+  --sc-badge-text: #FFFCF2;
+
+  background: var(--sc-bg);
+  border: 1px solid var(--sc-rule);
+  border-radius: 8px;
+  padding: 14px 16px 10px;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    0 4px 14px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  color: var(--sc-ink);
+}
+
+/* Dark theme */
+.series-card.theme-dark,
+:global(.dark) .series-card {
+  --sc-bg: linear-gradient(180deg, rgba(36, 38, 60, 0.96) 0%, rgba(28, 30, 50, 0.92) 100%);
+  --sc-bg-solid: #1c1e32;
+  --sc-ink: #f0f0f4;
+  --sc-ink-soft: #dddde6;
+  --sc-ink-mute: #8d8faa;
+  --sc-rule: rgba(212, 175, 110, 0.40);
+  --sc-gold: #D4AF6E;
+  --sc-gold-deep: #B8935A;
+  --sc-badge-text: #1c1e32;
+}
+
+.series-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.series-label {
+  font-size: 9.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--sc-gold-deep);
+}
+.series-key {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--sc-ink-mute);
+  font-weight: 600;
+}
+
+.series-title {
+  font-family: 'DM Serif Display', Georgia, serif;
+  font-size: 15px;
+  color: var(--sc-ink);
+  margin: 0 0 4px;
+  line-height: 1.2;
+  letter-spacing: -0.005em;
+}
+
+.series-meta {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 10.5px;
+  color: var(--sc-ink-mute);
+  margin-bottom: 10px;
+  letter-spacing: 0.02em;
+}
+.series-sep { margin: 0 6px; opacity: 0.6; }
+
+.series-list { list-style: none; padding: 0; margin: 0; }
+
+.series-item {
+  position: relative;
+  margin-bottom: 1px;
+}
+.series-item.active::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  top: 6px;
+  bottom: 6px;
+  width: 2px;
+  background: var(--sc-gold);
+  border-radius: 1px;
+}
+
+.series-button {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  width: 100%;
+  background: transparent;
+  border: none;
+  padding: 7px 6px;
+  text-align: left;
+  cursor: pointer;
+  font-family: inherit;
+  border-radius: 4px;
+  transition: background 0.15s;
+  color: inherit;
+}
+.series-button:hover:not(:disabled) {
+  background: rgba(184, 147, 90, 0.10);
+}
+.series-button:disabled { cursor: default; }
+
+.series-year {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--sc-ink);
+  letter-spacing: 0.02em;
+  min-width: 38px;
+  flex-shrink: 0;
+}
+.series-item.active .series-year { color: var(--sc-gold-deep); }
+
+.series-detail {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.series-ref {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10.5px;
+  color: var(--sc-ink-soft);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.series-concepts {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 9px;
+  color: var(--sc-ink-mute);
+  font-style: italic;
+  text-transform: lowercase;
+  margin-top: 1px;
+}
+
+.series-badge {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 8.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  padding: 2px 6px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+.badge-current {
+  /* Outlined style — gold text on the card's surface color, with a thin
+     gold border. Contrast: ~12:1 in light mode, ~10:1 in dark mode.
+     The filled variant had white-on-gold which capped at 2.7:1 (light) /
+     2.0:1 (dark) — well below WCAG AA for small text. */
+  background: rgba(184, 147, 90, 0.10);
+  color: var(--sc-gold-deep);
+  border: 1px solid var(--sc-gold);
+}
+:global(.dark) .badge-current {
+  background: rgba(212, 175, 110, 0.12);
+  color: var(--sc-gold);
+}
+.badge-viewing {
+  background: var(--sc-gold-deep);
+  color: var(--sc-badge-text);
+}
+.badge-archived {
+  background: rgba(168, 168, 155, 0.18);
+  color: var(--sc-ink-mute);
+}
+</style>

package/src/components/ErrorBoundary.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { onErrorCaptured, ref } from 'vue';
+import { GlossaristError, formatError, isGlossaristError } from '../errors';
+
+defineOptions({ name: 'ErrorBoundary' });
+
+const props = defineProps<{
+  title?: string;
+  retryKey?: string | number;
+}>();
+
+const emit = defineEmits<{ (e: 'error', err: unknown): void }>();
+
+const error = ref<GlossaristError | Error | null>(null);
+
+onErrorCaptured((err: unknown) => {
+  error.value = err instanceof Error ? err : new Error(String(err));
+  emit('error', err);
+  return false;
+});
+
+function dismiss() {
+  error.value = null;
+}
+</script>
+
+<template>
+  <slot v-if="!error" />
+  <div
+    v-else
+    class="error-boundary"
+    :data-retry-key="props.retryKey"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div class="error-boundary__header">
+      <h3>{{ props.title ?? 'Something went wrong' }}</h3>
+      <button type="button" class="error-boundary__retry" @click="dismiss">
+        Retry
+      </button>
+    </div>
+    <p class="error-boundary__message">{{ error.message }}</p>
+    <details v-if="isGlossaristError(error)" class="error-boundary__details">
+      <summary>Details</summary>
+      <pre dir="auto">{{ formatError(error) }}</pre>
+    </details>
+  </div>
+</template>
+
+<style scoped>
+.error-boundary {
+  border: 1px solid #fca5a5;
+  background: #fef2f2;
+  color: #7f1d1d;
+  border-radius: 0.5rem;
+  padding: 1rem 1.25rem;
+}
+.error-boundary__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+.error-boundary__header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+.error-boundary__retry {
+  background: transparent;
+  border: 1px solid currentColor;
+  color: inherit;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+.error-boundary__message {
+  margin: 0.5rem 0 0;
+  font-size: 0.95rem;
+}
+.error-boundary__details {
+  margin-top: 0.5rem;
+}
+.error-boundary__details summary {
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+.error-boundary__details pre {
+  margin: 0.5rem 0 0;
+  white-space: pre-wrap;
+  font-size: 0.8rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+</style>

package/src/components/FormatDownloads.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { FORMAT_REGISTRY } from '../utils/concept-formats';
+import { getFormat } from '../composables/use-format-registry';
 import { useI18n } from '../i18n';
 
 const { t } = useI18n();
@@ -12,20 +12,24 @@ const props = defineProps<{
 }>();
 
 interface FormatLink {
-  key: string;
+  id: string;
   label: string;
   url: string;
+  download: string;
 }
 
-const links = computed<FormatLink[]>(() =>
-  props.formats
-    .filter(f => FORMAT_REGISTRY[f])
-    .map(f => ({
-      key: f,
-      label: FORMAT_REGISTRY[f].label,
-      url: `/data/${props.registerId}/concepts/${props.conceptId}.${FORMAT_REGISTRY[f].extension}`,
-    })),
-);
+const links = computed<FormatLink[]>(() => {
+  const base = import.meta.env.BASE_URL.replace(/\/+$/, '');
+  return props.formats
+    .map(id => ({ id, desc: getFormat(id) }))
+    .filter(({ desc }) => desc && (desc.available === 'per-concept' || desc.available === 'both'))
+    .map(({ id, desc }) => ({
+      id,
+      label: desc!.label,
+      url: `${base}/data/${props.registerId}/concepts/${props.conceptId}.${desc!.extension}`,
+      download: `${props.conceptId}.${desc!.extension}`,
+    }));
+});
 </script>
 
 <template>
@@ -34,9 +38,9 @@ const links = computed<FormatLink[]>(() =>
     <div class="flex flex-wrap gap-2">
       <a
         v-for="link in links"
-        :key="link.key"
+        :key="link.id"
         :href="link.url"
-        :download="`${conceptId}.${FORMAT_REGISTRY[link.key].extension}`"
+        :download="link.download"
         class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium bg-ink-50 text-ink-600 hover:bg-ink-100 hover:text-ink-800 transition-colors border border-ink-100"
       >
         <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">

package/src/components/HomeSeriesSection.vue

@@ -0,0 +1,277 @@
+<script setup lang="ts">
+/**
+ * HomeSeriesSection — vocabulary series overview for the home page.
+ *
+ * Groups all loaded datasets into series (e.g., all `viml-*` editions
+ * together) and renders each as a horizontal timeline of edition pills.
+ * The newest valid edition is highlighted; older editions are subtler.
+ *
+ * Only renders if at least one series has 2+ members — single-edition
+ * vocabs don't benefit from this view. Theme-aware (light/dark).
+ */
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUiStore } from '../stores/ui';
+import { useDatasetSeries } from '../composables/useDatasetSeries';
+
+const router = useRouter();
+const uiStore = useUiStore();
+const { series } = useDatasetSeries();
+
+const multiEditionSeries = computed(() =>
+  series.value.filter(s => s.members.length > 1)
+);
+
+function openDataset(registerId: string) {
+  router.push({ name: 'dataset', params: { registerId } });
+}
+</script>
+
+<template>
+  <section
+    v-if="multiEditionSeries.length"
+    :class="['series-section', { 'theme-dark': uiStore.isDark }]"
+    aria-label="Vocabulary edition series"
+  >
+    <header class="series-section-head">
+      <span class="series-section-ornament">✦</span>
+      <div>
+        <h2 class="series-section-title">Vocabulary Series</h2>
+        <p class="series-section-sub">Multi-edition terminology archives · click any edition</p>
+      </div>
+    </header>
+
+    <div class="series-grid">
+      <article
+        v-for="s in multiEditionSeries"
+        :key="s.key"
+        class="series-article"
+      >
+        <header class="series-article-head">
+          <h3 class="series-article-title">{{ s.title }}</h3>
+          <span class="series-article-meta">
+            {{ s.members.length }} editions · {{ s.totalConcepts.toLocaleString() }} concepts
+          </span>
+        </header>
+
+        <ol class="series-timeline">
+          <li
+            v-for="member in s.members"
+            :key="member.id"
+            :class="['timeline-item', { current: member.isCurrent }]"
+          >
+            <button
+              class="timeline-button"
+              :class="{ current: member.isCurrent }"
+              @click="openDataset(member.id)"
+            >
+              <span class="timeline-year">{{ member.year ?? '—' }}</span>
+              <span class="timeline-status">{{ member.status }}</span>
+              <span v-if="member.isCurrent" class="timeline-mark">◆</span>
+            </button>
+          </li>
+        </ol>
+      </article>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+/* Light theme (default) — warm parchment */
+.series-section {
+  --hs-bg: transparent;
+  --hs-ink: #0F1A30;
+  --hs-ink-soft: #2D3A52;
+  --hs-ink-mute: #5A6577;
+  --hs-rule: rgba(184, 147, 90, 0.25);
+  --hs-card-bg: linear-gradient(180deg, rgba(255, 252, 240, 0.96) 0%, rgba(248, 240, 220, 0.92) 100%);
+  --hs-timeline-bg: rgba(255, 255, 255, 0.6);
+  --hs-timeline-border: rgba(184, 147, 90, 0.20);
+  --hs-timeline-hover: rgba(255, 252, 240, 1);
+  --hs-gold: #B8935A;
+  --hs-gold-deep: #8C6A3A;
+  --hs-gold-tint: rgba(184, 147, 90, 0.12);
+
+  max-width: 80rem;
+  margin: 3rem auto 4rem;
+  padding: 0 1rem;
+  color: var(--hs-ink);
+}
+
+/* Dark theme */
+.series-section.theme-dark,
+:global(.dark) .series-section {
+  --hs-bg: transparent;
+  --hs-ink: #f0f0f4;
+  --hs-ink-soft: #dddde6;
+  --hs-ink-mute: #8d8faa;
+  --hs-rule: rgba(184, 147, 90, 0.30);
+  --hs-card-bg: linear-gradient(180deg, rgba(36, 38, 60, 0.96) 0%, rgba(28, 30, 50, 0.92) 100%);
+  --hs-timeline-bg: rgba(28, 30, 50, 0.6);
+  --hs-timeline-border: rgba(184, 147, 90, 0.25);
+  --hs-timeline-hover: rgba(36, 38, 60, 1);
+  --hs-gold: #D4AF6E;
+  --hs-gold-deep: #B8935A;
+  --hs-gold-tint: rgba(212, 175, 110, 0.15);
+}
+
+.series-section-head {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--hs-rule);
+}
+.series-section-ornament {
+  color: var(--hs-gold);
+  font-size: 22px;
+  transform: rotate(45deg);
+  display: inline-block;
+}
+.series-section-title {
+  font-family: 'DM Serif Display', Georgia, serif;
+  font-size: 28px;
+  color: var(--hs-ink);
+  letter-spacing: -0.015em;
+  line-height: 1;
+  margin: 0;
+}
+.series-section-sub {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 12px;
+  color: var(--hs-ink-mute);
+  margin-top: 4px;
+  font-style: italic;
+  letter-spacing: 0.02em;
+}
+
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+  gap: 1.25rem;
+}
+
+.series-article {
+  background: var(--hs-card-bg);
+  border: 1px solid var(--hs-rule);
+  border-radius: 10px;
+  padding: 18px 22px 16px;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.08),
+    0 6px 20px rgba(0, 0, 0, 0.10);
+}
+
+.series-article-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-bottom: 14px;
+}
+.series-article-title {
+  font-family: 'DM Serif Display', Georgia, serif;
+  font-size: 17px;
+  color: var(--hs-ink);
+  line-height: 1.15;
+  letter-spacing: -0.005em;
+  margin: 0;
+}
+.series-article-meta {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 10.5px;
+  color: var(--hs-ink-mute);
+  letter-spacing: 0.04em;
+  text-transform: lowercase;
+}
+
+.series-timeline {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: stretch;
+}
+
+.timeline-item {
+  position: relative;
+}
+.timeline-item:not(:last-child)::after {
+  content: '→';
+  position: absolute;
+  right: -5px;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 11px;
+  color: var(--hs-gold);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.timeline-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 8px 12px 6px;
+  background: var(--hs-timeline-bg);
+  border: 1px solid var(--hs-timeline-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+  min-width: 64px;
+  position: relative;
+  color: var(--hs-ink);
+}
+.timeline-button:hover {
+  background: var(--hs-timeline-hover);
+  border-color: var(--hs-gold);
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px var(--hs-gold-tint);
+}
+.timeline-button.current {
+  background: var(--hs-timeline-hover);
+  border-color: var(--hs-gold);
+  box-shadow:
+    0 0 0 3px var(--hs-gold-tint),
+    0 2px 8px var(--hs-gold-tint);
+}
+
+.timeline-year {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--hs-ink);
+  letter-spacing: 0.02em;
+}
+.timeline-button.current .timeline-year {
+  color: var(--hs-gold-deep);
+}
+
+.timeline-status {
+  font-family: 'DM Sans', system-ui, sans-serif;
+  font-size: 8.5px;
+  color: var(--hs-ink-mute);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 500;
+}
+
+.timeline-mark {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 14px;
+  height: 14px;
+  background: var(--hs-gold);
+  color: white;
+  border-radius: 50%;
+  font-size: 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+</style>