@glossarist/concept-browser 0.7.51 → 0.7.52

package/src/utils/color-theme.ts

@@ -0,0 +1,129 @@
+/**
+ * Color theme SSOT. Loads `data/colors.json` defaults and merges per-
+ * deployment overrides from `site-config.json` `colors` block.
+ *
+ * Pure data + pure accessors — no Vue reactivity. Reactive consumption
+ * is via the `useColorTheme()` composable.
+ */
+import { readFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { DatasetColorSpec, SiteColors } from '../config/types';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const COLORS_PATH = join(__dirname, '..', '..', 'data', 'colors.json');
+
+export interface ColorPair {
+  readonly light: string;
+  readonly dark: string;
+}
+
+interface ColorDefaults {
+  readonly relationshipCategory: Record<string, ColorPair>;
+  readonly relationshipType: Record<string, ColorPair>;
+  readonly conceptStatus: Record<string, ColorPair>;
+  readonly groupKind: Record<string, ColorPair>;
+}
+
+let cachedDefaults: ColorDefaults | undefined;
+
+function loadDefaults(): ColorDefaults {
+  if (cachedDefaults) return cachedDefaults;
+  const raw = JSON.parse(readFileSync(COLORS_PATH, 'utf8'));
+  cachedDefaults = {
+    relationshipCategory: raw.relationshipCategory,
+    relationshipType: raw.relationshipType,
+    conceptStatus: raw.conceptStatus,
+    groupKind: raw.groupKind,
+  };
+  return cachedDefaults!;
+}
+
+function normalize(spec: DatasetColorSpec | undefined): ColorPair | undefined {
+  if (spec == null) return undefined;
+  if (typeof spec === 'string') return { light: spec, dark: spec };
+  return { light: spec.light, dark: spec.dark };
+}
+
+function resolvePair(
+  key: string | undefined,
+  overrides: Record<string, DatasetColorSpec> | undefined,
+  defaults: Record<string, ColorPair>,
+  fallback: ColorPair,
+): ColorPair {
+  if (key && overrides) {
+    const ov = normalize(overrides[key]);
+    if (ov) return ov;
+  }
+  if (key && defaults[key]) return defaults[key];
+  return fallback;
+}
+
+export function createColorTheme(siteColors?: SiteColors) {
+  const defaults = loadDefaults();
+
+  function relationshipCategoryColor(categoryId: string): ColorPair {
+    return resolvePair(
+      categoryId,
+      siteColors?.relationshipCategory,
+      defaults.relationshipCategory,
+      defaults.relationshipCategory.associative,
+    );
+  }
+
+  function relationshipTypeColor(typeId: string, categoryId?: string): ColorPair {
+    const ov = normalize(siteColors?.relationshipType?.[typeId]);
+    if (ov) return ov;
+    if (defaults.relationshipType[typeId]) return defaults.relationshipType[typeId];
+    if (categoryId) return relationshipCategoryColor(categoryId);
+    return defaults.relationshipCategory.associative;
+  }
+
+  function conceptStatusColor(statusId: string): ColorPair {
+    return resolvePair(
+      statusId,
+      siteColors?.conceptStatus,
+      defaults.conceptStatus,
+      { light: '#6B6E7D', dark: '#9CA3AF' },
+    );
+  }
+
+  function groupKindColor(kind: string): ColorPair {
+    return resolvePair(
+      kind,
+      siteColors?.groupKind,
+      defaults.groupKind,
+      defaults.groupKind.default,
+    );
+  }
+
+  function datasetColor(datasetId: string, declared?: DatasetColorSpec): ColorPair {
+    const ov = normalize(siteColors?.dataset?.[datasetId]);
+    if (ov) return ov;
+    const declaredPair = normalize(declared);
+    if (declaredPair) return declaredPair;
+    return { light: '#3366ff', dark: '#60A5FA' };
+  }
+
+  function groupColor(groupId: string, declared?: DatasetColorSpec): ColorPair {
+    const ov = normalize(siteColors?.group?.[groupId]);
+    if (ov) return ov;
+    const declaredPair = normalize(declared);
+    if (declaredPair) return declaredPair;
+    return groupKindColor('default');
+  }
+
+  return {
+    relationshipCategoryColor,
+    relationshipTypeColor,
+    conceptStatusColor,
+    groupKindColor,
+    datasetColor,
+    groupColor,
+    defaults,
+  };
+}
+
+export type ColorTheme = ReturnType<typeof createColorTheme>;
+
+export const FALLBACK_COLOR_PAIR: ColorPair = { light: '#6B6E7D', dark: '#9CA3AF' };

package/src/utils/dataset-style.ts

@@ -1,4 +1,6 @@
 import { useVocabularyStore } from '../stores/vocabulary';
+import type { DatasetColorSpec } from '../config/types';
+import { createColorTheme } from './color-theme';
 
 const PALETTE = [
   '#3366ff', '#0d9488', '#d97706', '#8b5cf6',
@@ -7,9 +9,16 @@ const PALETTE = [
 ];
 
 export interface DsStyle {
+  /** Single-hex backward-compat color (light mode). */
   color: string;
+  /** Explicit light-mode color. */
   light: string;
+  /** Explicit dark-mode color. */
   dark: string;
+  /** Light-mode rgba with custom alpha. */
+  lightAlpha: (a: number) => string;
+  /** Dark-mode rgba with custom alpha. */
+  darkAlpha: (a: number) => string;
 }
 
 function hexToRgba(hex: string, alpha: number): string {
@@ -19,14 +28,29 @@ function hexToRgba(hex: string, alpha: number): string {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
 
-export function makeDsStyle(color: string): DsStyle {
+export function makeDsStyle(spec?: DatasetColorSpec, fallbackLight = '#3366ff'): DsStyle {
+  const pair = normalizeSpec(spec, fallbackLight);
   return {
-    color,
-    light: hexToRgba(color, 0.1),
-    dark: hexToRgba(color, 0.85),
+    color: pair.light,
+    light: pair.light,
+    dark: pair.dark,
+    lightAlpha: (a: number) => hexToRgba(pair.light, a),
+    darkAlpha: (a: number) => hexToRgba(pair.dark, a),
   };
 }
 
+function normalizeSpec(spec: DatasetColorSpec | undefined, fallback: string): { light: string; dark: string } {
+  if (spec == null) {
+    const dark = hexToRgba(fallback, 0.85);
+    return { light: fallback, dark };
+  }
+  if (typeof spec === 'string') {
+    const dark = hexToRgba(spec, 0.85);
+    return { light: spec, dark };
+  }
+  return { light: spec.light, dark: spec.dark };
+}
+
 export function paletteColor(index: number): string {
   return PALETTE[index % PALETTE.length];
 }
@@ -40,8 +64,9 @@ export function useDsStyle() {
 
     const store = useVocabularyStore();
     const ds = store.datasetList.find(d => d.id === registerId);
-    const color = ds?.manifest.color || paletteColor(store.datasetList.findIndex(d => d.id === registerId));
-    const style = makeDsStyle(color);
+    const declared = ds?.manifest?.color as DatasetColorSpec | undefined;
+    const fallback = paletteColor(store.datasetList.findIndex(d => d.id === registerId));
+    const style = makeDsStyle(declared, fallback);
     cache.set(registerId, style);
     return style;
   }

package/src/utils/locale.ts

@@ -5,27 +5,19 @@
  * Both the non-verbal entity resolver and any other localized content
  * resolution should call `pickLocaleText` / `pickLocaleMap` rather than
  * implement their own fallback chain.
+ *
+ * Language-code mapping (ISO 639-3 ↔ ISO 639-1) and BCP-47 parsing live in
+ * `./bcp47`; this module re-exports the mapping for backwards
+ * compatibility.
  */
 
 import { fetchLocalizedString } from 'glossarist';
+import { mapIso6393To6391 } from './bcp47';
 
 const DEFAULT_FALLBACK_CHAIN: readonly string[] = ['eng'] as const;
 
 const RTL_LOCALES: ReadonlySet<string> = new Set(['ara', 'heb', 'fas', 'urd', 'arb']);
 
-const ISO_639_2_TO_BCP47: Record<string, string> = {
-  eng: 'en', fra: 'fr', deu: 'de', zho: 'zh', ara: 'ar', jpn: 'ja', rus: 'ru',
-  kor: 'ko', spa: 'es', ita: 'it', por: 'pt', nld: 'nl', swe: 'sv', fin: 'fi',
-  dan: 'da', nob: 'nb', nno: 'nn', nor: 'no', pol: 'pl', tur: 'tr', ces: 'cs', ell: 'el',
-  heb: 'he', hin: 'hi', ind: 'id', fas: 'fa', ukr: 'uk', hun: 'hu', ron: 'ro',
-  slk: 'sk', slv: 'sl', hrv: 'hr', srp: 'sr', bul: 'bg', msa: 'ms', tha: 'th',
-  vie: 'vi', urd: 'ur', ben: 'bn', tam: 'ta', tel: 'te', mar: 'mr', guj: 'gu',
-  pan: 'pa', mal: 'ml', kan: 'kn', ori: 'or', asm: 'as', sin: 'si', nep: 'ne',
-  lit: 'lt', lav: 'lv', est: 'et', gle: 'ga', cym: 'cy', eus: 'eu', cat: 'ca',
-  glg: 'gl', afr: 'af', sqi: 'sq', mkd: 'mk', bel: 'be', kaz: 'kk', uzb: 'uz',
-  aze: 'az', hye: 'hy', kat: 'ka', mon: 'mn', tuk: 'tk', uig: 'ug', tgl: 'tl',
-};
-
 export type LocalizedText = Record<string, string>;
 
 export interface ResolvedLocaleText {
@@ -77,7 +69,7 @@ export function isRtl(locale: string): boolean {
 }
 
 export function localeToBcp47(locale: string): string {
-  return ISO_639_2_TO_BCP47[locale] ?? locale;
+  return mapIso6393To6391(locale) ?? locale;
 }
 
 export function resolveFallbackChain(datasetLocales?: readonly string[]): readonly string[] {

package/src/utils/markdown-lite.ts

@@ -1,10 +1,15 @@
 import { escapeHtml } from './escape';
+import { sanitizeUrl } from './url-safety';
 
 const INLINE_PATTERNS: [RegExp, (m: RegExpMatchArray) => string][] = [
   [/\*\*(.+?)\*\*/g, m => `<strong>${m[1]}</strong>`],
   [/(?<!\*)\*([^*]+?)\*(?!\*)/g, m => `<em>${m[1]}</em>`],
   [/`([^`]+?)`/g, m => `<code>${m[1]}</code>`],
-  [/\[([^\]]+)\]\(([^)]+)\)/g, m => `<a href="${m[2]}" target="_blank">${m[1]}</a>`],
+  [/\[([^\]]+)\]\(([^)]+)\)/g, m => {
+    const href = sanitizeUrl(m[2]);
+    if (!href) return escapeHtml(m[1]);
+    return `<a href="${escapeHtml(href)}" target="_blank" rel="noopener">${m[1]}</a>`;
+  }],
 ];
 
 function renderInline(text: string): string {

package/src/utils/relation-sphere-styling.ts

@@ -0,0 +1,63 @@
+/**
+ * Relation sphere styling — bridge between the project's semantic SSOTs
+ * (taxonomy + color-theme) and the visual encoding the sphere needs.
+ *
+ * Single source: taxonomy drives category/type identity.
+ * Color-theme drives light/dark color pairs.
+ * This module adds only the sphere-specific concern: dasharray patterns.
+ */
+import {
+  RELATIONSHIP_CATEGORIES,
+  categorizeRelationship,
+  relationshipLabel,
+} from './relationship-categories';
+import { colorPairForType, colorPairForCategory, type ColorPair } from './color-theme-integration';
+
+export interface SphereRelationCategory {
+  readonly key: string;
+  readonly label: string;
+  readonly color: string;
+  readonly dasharray: string;
+}
+
+/** Dasharray per category — sphere-specific visual encoding. Sourced
+ *  from colors.json `relationshipCategoryDash` block (added in #14). */
+const DASHARRAY: Record<string, string> = {
+  lifecycle:      'none',
+  mapping:        '1 2',
+  hierarchical:   '6 3 1 3',
+  associative:    'none',
+  comparative:    '2 2',
+  definitional:   '8 4',
+  spatiotemporal: '4 2 1 2',
+  lexical:        '3 1',
+  designation:    '1 3',
+};
+
+/** Build the sphere-category list from the taxonomy SSOT. */
+export const SPHERE_RELATION_CATEGORIES: readonly SphereRelationCategory[] =
+  RELATIONSHIP_CATEGORIES.map(cat => ({
+    key: cat.id,
+    label: cat.label,
+    color: colorPairForCategory(cat.id).light,
+    dasharray: DASHARRAY[cat.id] ?? 'none',
+  }));
+
+export function categorizeRelationForSphere(type: string): string {
+  return categorizeRelationship(type).id;
+}
+
+export function sphereCategoryForType(type: string): SphereRelationCategory {
+  const cat = categorizeRelationship(type);
+  return SPHERE_RELATION_CATEGORIES.find(c => c.key === cat.id)
+    ?? SPHERE_RELATION_CATEGORIES[3];
+}
+
+export function colorForTypeInMode(type: string, isDark: boolean): string {
+  const pair = colorPairForType(type);
+  return isDark ? pair.dark : pair.light;
+}
+
+export function relationLabel(type: string): string {
+  return relationshipLabel(type);
+}

package/src/utils/relationship-categories.ts

@@ -4,9 +4,13 @@
  * RELATIONSHIP_CATEGORIES, INVERSE_RELATIONSHIPS, and the category lookup
  * map are all computed from `taxonomies.json` at module load time.
  * Adding a new relationship type requires only a taxonomy edit — no code changes.
+ *
+ * Color pairs (light + dark) come from `data/colors.json` via the color-theme
+ * module, merged with per-deployment overrides from `site-config.json`.
  */
 import { ontology } from '../adapters/ontology-registry';
 import type { TaxonomyCategory } from '../adapters/ontology-registry';
+import { createColorTheme, type ColorPair, type ColorTheme } from './color-theme';
 
 export interface RelationshipCategory {
   id: string;
@@ -95,3 +99,29 @@ export function relationshipLabel(type: string): string {
 export function relationshipDefinition(type: string): string | null {
   return ontology.getDefinition('relationshipType', type);
 }
+
+// ── Color pairs (light + dark) ────────────────────────────────────────────
+//
+// `createColorTheme(undefined)` returns the default theme (no per-deployment
+// overrides). Components that need overrides should construct their own theme
+// via `useSiteConfig()` + `createColorTheme(config.colors)`.
+
+const defaultTheme: ColorTheme = createColorTheme(undefined);
+
+/** Returns the color pair for a relationship type, optionally given a known
+ *  category id (skips a taxonomy lookup when the caller already knows it). */
+export function colorPairForType(type: string, categoryId?: string): ColorPair {
+  const concept = ontology.getConcept('relationshipType', type);
+  const cat = categoryId ?? concept?.category;
+  return defaultTheme.relationshipTypeColor(type, cat);
+}
+
+/** Returns the color pair for a category id (e.g. "lifecycle"). */
+export function colorPairForCategory(categoryId: string): ColorPair {
+  return defaultTheme.relationshipCategoryColor(categoryId);
+}
+
+/** Construct a per-deployment theme that overrides defaults. */
+export function colorThemeForOverrides(siteColors: Parameters<typeof createColorTheme>[0]): ColorTheme {
+  return createColorTheme(siteColors);
+}

package/src/utils/url-safety.ts

@@ -0,0 +1,30 @@
+const SAFE_URL_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+
+const DANGEROUS_TOKEN_RE = /[\s<>"]/;
+
+export function isSafeUrl(url: string): boolean {
+  if (!url || typeof url !== 'string') return false;
+  if (DANGEROUS_TOKEN_RE.test(url)) return false;
+
+  const trimmed = url.trim();
+  if (!trimmed) return false;
+
+  if (/^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed)) {
+    try {
+      const u = new URL(trimmed);
+      return SAFE_URL_PROTOCOLS.has(u.protocol);
+    } catch {
+      return false;
+    }
+  }
+
+  if (trimmed.startsWith('#') || trimmed.startsWith('/') || trimmed.startsWith('./') || trimmed.startsWith('../')) {
+    return true;
+  }
+
+  return false;
+}
+
+export function sanitizeUrl(url: string): string {
+  return isSafeUrl(url) ? url : '';
+}

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>