@glossarist/concept-browser 0.7.50 → 0.7.52

package/src/views/ConceptView.vue

@@ -2,7 +2,9 @@
 import { computed, watch, ref, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useVocabularyStore } from '../stores/vocabulary';
+import { conceptUri } from '../adapters/model-bridge';
 import ConceptDetail from '../components/ConceptDetail.vue';
+import RelationSphere from '../components/RelationSphere.vue';
 import ShortcutsModal from '../components/ShortcutsModal.vue';
 import { useI18n } from '../i18n';
 
@@ -50,6 +52,24 @@ const concept = computed(() => store.currentConcept);
 const manifest = computed(() => store.currentManifest);
 const edges = computed(() => store.conceptEdges);
 const adjacent = ref({ prev: null as string | null, next: null as string | null });
+const viewMode = ref<'detail' | 'sphere'>('detail');
+
+/* When the user clicks a card in the sphere, we store the navigation
+   payload here. The concept loads via store.viewConcept (without
+   router.push). When the user switches to Detail, we commit the URL. */
+const sphereFocusPayload = ref<{ registerId: string; conceptId: string } | null>(null);
+const permalinkCopied = ref(false);
+
+async function copyPermalink() {
+  try {
+    await navigator.clipboard.writeText(window.location.href);
+    permalinkCopied.value = true;
+    setTimeout(() => { permalinkCopied.value = false; }, 1800);
+  } catch {
+    /* Clipboard API not available — fall back to URL prompt */
+    window.prompt('Copy this URL:', window.location.href);
+  }
+}
 
 async function loadAdjacent() {
   const adapter = store.datasets.get(props.registerId);
@@ -66,6 +86,45 @@ function goAdjacent(id: string) {
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
+function onSphereNavigate(payload: { registerId: string; conceptId: string }) {
+  if (!payload.registerId || !payload.conceptId) return;
+  /* DON'T router.push — that sets conceptLoading=true and unmounts the
+     sphere. Instead, load the concept directly via the store. This
+     updates store.currentConcept + store.conceptEdges, which flow as
+     props to RelationSphere without any loading flash. The sphere's
+     watch on props.concept fires → rebuilds the graph → animates. */
+  sphereFocusPayload.value = { registerId: payload.registerId, conceptId: payload.conceptId };
+  (async () => {
+    try {
+      const adapter = store.datasets.get(payload.registerId);
+      if (!adapter?.index) {
+        await store.loadDataset(payload.registerId);
+      }
+      await store.viewConcept(payload.registerId, payload.conceptId);
+      loadAdjacent();
+    } catch (e) {
+      console.warn('Sphere navigation failed:', e);
+    }
+  })();
+}
+
+function switchToSphere() {
+  viewMode.value = 'sphere';
+  sphereFocusPayload.value = null;
+}
+
+function switchToDetail() {
+  viewMode.value = 'detail';
+  /* Commit the URL if the sphere navigated to a different concept.
+     This triggers loadConcept → the Detail view shows the right concept. */
+  if (sphereFocusPayload.value) {
+    const { registerId, conceptId } = sphereFocusPayload.value;
+    if (registerId !== props.registerId || conceptId !== props.conceptId) {
+      router.push({ name: 'concept', params: { registerId, conceptId } });
+    }
+  }
+}
+
 function onKeydown(e: KeyboardEvent) {
   if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
 
@@ -78,6 +137,17 @@ function onKeydown(e: KeyboardEvent) {
     showShortcuts.value = false;
     return;
   }
+  /* View mode toggle: 's' for sphere, 'd' for detail */
+  if (e.key === 's' && concept.value) {
+    e.preventDefault();
+    switchToSphere();
+    return;
+  }
+  if (e.key === 'd') {
+    e.preventDefault();
+    switchToDetail();
+    return;
+  }
   if (e.key === 'j' && adjacent.value.prev) {
     e.preventDefault();
     goAdjacent(adjacent.value.prev);
@@ -92,7 +162,68 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
 </script>
 
 <template>
-  <div class="px-4 sm:px-6 lg:px-8 py-8">
+  <div :class="['concept-view', { 'sphere-mode': viewMode === 'sphere' }]">
+    <!-- View mode toolbar — slim sub-header with segmented control + permalink.
+         Sits ABOVE the content (not floating, doesn't block anything). -->
+    <div
+      v-if="!conceptLoading && !localError && concept"
+      class="flex-shrink-0 w-full max-w-7xl mx-auto mb-4 flex items-center justify-between gap-4 pb-3 border-b border-ink-100 dark:border-ink-700"
+    >
+      <nav aria-label="View mode" class="inline-flex gap-1 p-1 rounded-lg bg-surface-alt dark:bg-ink-800" role="tablist">
+        <button
+          role="tab"
+          :aria-selected="viewMode === 'detail'"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium rounded-md cursor-pointer transition-all border-none font-inherit"
+          :class="viewMode === 'detail'
+            ? 'bg-surface-raised dark:bg-ink-600 text-ink-800 dark:text-ink-50 shadow-sm'
+            : 'bg-transparent text-ink-500 dark:text-ink-400 hover:text-ink-700 dark:hover:text-ink-200'"
+          @click="switchToDetail"
+          title="Detail view (d)"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M4 6h16M4 12h16M4 18h10" stroke-linecap="round"/>
+          </svg>
+          <span>{{ t('concept.detailView') }}</span>
+          <kbd class="ml-1 px-1 py-0.5 font-mono text-[9px] font-semibold rounded bg-ink-100 dark:bg-ink-700 text-ink-500 dark:text-ink-400 tracking-wide">d</kbd>
+        </button>
+        <button
+          role="tab"
+          :aria-selected="viewMode === 'sphere'"
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium rounded-md cursor-pointer transition-all border-none font-inherit"
+          :class="viewMode === 'sphere'
+            ? 'bg-surface-raised dark:bg-ink-600 text-ink-800 dark:text-ink-50 shadow-sm'
+            : 'bg-transparent text-ink-500 dark:text-ink-400 hover:text-ink-700 dark:hover:text-ink-200'"
+          @click="switchToSphere"
+          title="Relation sphere view (s)"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="9"/>
+            <ellipse cx="12" cy="12" rx="9" ry="3.5"/>
+            <ellipse cx="12" cy="12" rx="3.5" ry="9"/>
+          </svg>
+          <span>{{ t('concept.relationSphere') }}</span>
+          <kbd class="ml-1 px-1 py-0.5 font-mono text-[9px] font-semibold rounded bg-ink-100 dark:bg-ink-700 text-ink-500 dark:text-ink-400 tracking-wide">s</kbd>
+        </button>
+      </nav>
+
+      <div class="flex items-center gap-2.5">
+        <button
+          class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[13px] font-medium text-ink-500 dark:text-ink-400 bg-transparent border border-ink-100 dark:border-ink-700 rounded-md cursor-pointer transition-all font-inherit hover:text-ink-800 dark:hover:text-ink-100 hover:bg-surface-raised dark:hover:bg-ink-700 hover:border-ink-200 dark:hover:border-ink-600"
+          title="Copy permalink to this concept"
+          @click="copyPermalink"
+        >
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101"/>
+            <path stroke-linecap="round" stroke-linejoin="round" d="M10.172 13.828a4 4 0 005.656 0l4-4a4 4 0 10-5.656-5.656l-1.1 1.1"/>
+          </svg>
+          <span>{{ t('concept.permalink') }}</span>
+        </button>
+        <Transition name="fade">
+          <span v-if="permalinkCopied" class="text-xs font-semibold text-green-600 dark:text-green-400">{{ t('concept.copied') }}</span>
+        </Transition>
+      </div>
+    </div>
+
     <div v-if="conceptLoading" class="max-w-5xl mx-auto py-8 space-y-5">
       <!-- Breadcrumb skeleton -->
       <div class="flex items-center gap-1.5">
@@ -141,15 +272,58 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
         </router-link>
       </div>
     </div>
-    <ConceptDetail
-      v-else-if="concept && manifest"
-      :concept="concept"
-      :manifest="manifest"
-      :edges="edges"
-      :adjacent="adjacent"
-      :register-id="registerId"
-    />
+    <template v-else-if="concept && manifest">
+      <div class="concept-content" :class="{ 'sphere-content': viewMode === 'sphere' }">
+        <!-- Sphere mode — receives concept + edges directly, no URI matching -->
+        <RelationSphere
+          v-if="viewMode === 'sphere'"
+          :concept="concept"
+          :manifest="manifest"
+          :register-id="registerId"
+          :edges="edges"
+          @navigate="onSphereNavigate"
+        />
+        <!-- Detail mode -->
+        <ConceptDetail
+          v-else
+          :concept="concept"
+          :manifest="manifest"
+          :edges="edges"
+          :adjacent="adjacent"
+          :register-id="registerId"
+        />
+      </div>
+    </template>
 
     <ShortcutsModal v-if="showShortcuts" @close="showShortcuts = false" />
   </div>
 </template>
+
+<style scoped>
+.concept-view {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 1rem;
+  min-height: calc(100vh - 56px);
+}
+.concept-view.sphere-mode {
+  height: calc(100vh - 56px);
+  overflow: hidden;
+}
+.concept-content {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+  max-width: 80rem;
+  margin: 0 auto;
+}
+.concept-content.sphere-content {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+.fade-enter-from, .fade-leave-to { opacity: 0; }
+</style>

package/src/views/DatasetView.vue

@@ -7,6 +7,7 @@ import { useDatasetLoader } from '../composables/use-dataset-loader';
 import { FORMAT_LABELS } from '../config/types';
 import { langName, langLabel, sortLanguages } from '../utils/lang';
 import ConceptCard from '../components/ConceptCard.vue';
+import DatasetSeriesCard from '../components/DatasetSeriesCard.vue';
 import { useI18n, locale } from '../i18n';
 import { useSiteConfig } from '../config/use-site-config';
 import type { SectionNode, ConceptSummary } from '../adapters/types';
@@ -321,6 +322,11 @@ function clearSection() {
       </div>
     </div>
 
+    <!-- Edition series sidebar (only renders if this dataset belongs to a multi-edition series) -->
+    <div v-if="manifest" class="mb-6">
+      <DatasetSeriesCard :register-id="registerId" />
+    </div>
+
     <!-- Downloads -->
     <div v-if="bulkDownloads.length" class="card p-4 mb-6">
       <h3 class="text-xs font-semibold text-ink-400 uppercase tracking-wide mb-3">{{ t('dataset.download') }}</h3>

package/src/views/HomeView.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 import { useDsStyle } from '../utils/dataset-style';
 import { useSiteConfig } from '../config/use-site-config';
 import { useI18n } from '../i18n';
+import HomeSeriesSection from '../components/HomeSeriesSection.vue';
 
 const store = useVocabularyStore();
 const router = useRouter();
@@ -74,6 +75,10 @@ function goToGraph() { router.push({ name: 'graph' }); }
       <p class="text-base text-ink-400 max-w-lg leading-relaxed">
         {{ localizedDescription || 'Explore standardized terminology datasets from ISO and IEC technical committees. Browse concepts, definitions, and cross-references across multilingual vocabularies.' }}
       </p>
+
+      <!-- Edition-series section (renders only if multi-edition series exist) -->
+      <HomeSeriesSection />
+
       <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>

package/vite.config.ts

@@ -10,6 +10,10 @@ const cwd = process.cwd()
 
 const isTest = process.env.VITEST !== undefined
 
+const pkgVersion = JSON.parse(
+  readFileSync(resolve(__dirname, 'package.json'), 'utf8'),
+).version
+
 function yamlPlugin() {
   return {
     name: 'yaml-transform',
@@ -170,6 +174,9 @@ export default defineConfig({
       } : {}),
     },
   },
+  define: {
+    __CONCEPT_BROWSER_VERSION__: JSON.stringify(pkgVersion),
+  },
   test: {
     environment: 'happy-dom',
     globals: true,