@glossarist/concept-browser 0.7.37 → 0.7.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glossarist/concept-browser",
-  "version": "0.7.37",
+  "version": "0.7.42",
   "description": "Vue SPA for browsing Glossarist terminology datasets with cross-reference resolution, graph visualization, and multi-language support",
   "type": "module",
   "bin": {

package/src/components/ConceptDetail.vue

@@ -74,6 +74,8 @@ const {
   navigateRelated,
 } = useConceptEdges(conceptComputed, registerIdComputed, manifestComputed, edgesComputed, router);
 
+const hoveredEdgeDisplay = ref<{ designation: string; conceptId: string; tooltip: string } | null>(null);
+
 const uriCopied = ref(false);
 function copyUri() {
   const uri = conceptUri(props.concept, props.registerId, props.manifest.uriBase);
@@ -473,42 +475,63 @@ const nonVerbalReps = computed(() => {
           <!-- Relations -->
           <div v-if="outgoingEdges.length || incomingEdges.length" class="card p-5">
             <div class="section-label">{{ t('concept.relations') }}</div>
+
+            <!-- Outgoing -->
             <div v-if="outgoingEdges.length" class="mt-3">
-              <div class="text-xs text-ink-300 mb-2">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
-              <div class="space-y-1 max-h-64 overflow-y-auto">
+              <div class="text-xs text-ink-300 mb-1.5">{{ t('concept.outgoing') }} ({{ outgoingEdges.length }})</div>
+              <div class="space-y-0.5 max-h-56 overflow-y-auto pr-1 -mr-1">
                 <button
                   v-for="edge in outgoingEdges"
                   :key="edge.target + edge.type"
                   @click="navigateEdge(edge)"
-                  :title="getEdgeDisplay(edge.target).tooltip"
-                  class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  @mouseenter="hoveredEdgeDisplay = getEdgeDisplay(edge.target)"
+                  @mouseleave="hoveredEdgeDisplay = null"
+                  @focus="hoveredEdgeDisplay = getEdgeDisplay(edge.target)"
+                  class="concept-link block w-full text-left rounded-md px-1.5 py-1 hover:bg-ink-50 transition-colors"
                   :class="getEdgeDisplay(edge.target).isLocal ? '' : 'xref-external'"
                 >
-                  <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'out')">{{ relationshipLabel(edge.type) }} →</span>
-                  <span class="truncate">{{ getEdgeDisplay(edge.target).designation || edge.label || getEdgeDisplay(edge.target).conceptId }}</span>
-                  <span class="text-[9px] text-ink-300 flex-shrink-0 font-mono">{{ getEdgeDisplay(edge.target).conceptId }}</span>
-                  <span v-if="getEdgeDisplay(edge.target).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ getEdgeDisplay(edge.target).badge!.title }}</span>
+                  <div class="flex items-center gap-1 mb-0.5">
+                    <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'out')">{{ relationshipLabel(edge.type) }} →</span>
+                    <span v-if="getEdgeDisplay(edge.target).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate">{{ getEdgeDisplay(edge.target).badge!.title }}</span>
+                  </div>
+                  <div class="text-sm text-ink-700 leading-snug line-clamp-2">{{ getEdgeDisplay(edge.target).designation || edge.label || getEdgeDisplay(edge.target).conceptId }}</div>
                 </button>
               </div>
             </div>
+
+            <!-- Incoming -->
             <div v-if="incomingEdges.length" class="mt-3 pt-3 border-t border-ink-100/60">
-              <div class="text-xs text-ink-300 mb-2">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
-              <div class="space-y-1 max-h-48 overflow-y-auto">
+              <div class="text-xs text-ink-300 mb-1.5">{{ t('concept.incoming') }} ({{ incomingEdges.length }})</div>
+              <div class="space-y-0.5 max-h-40 overflow-y-auto pr-1 -mr-1">
                 <button
                   v-for="edge in incomingEdges"
                   :key="edge.source + edge.type"
                   @click="navigateEdge(edge)"
-                  :title="getEdgeDisplay(edge.source).tooltip"
-                  class="text-sm concept-link block truncate w-full text-left flex items-center gap-1.5"
+                  @mouseenter="hoveredEdgeDisplay = getEdgeDisplay(edge.source)"
+                  @mouseleave="hoveredEdgeDisplay = null"
+                  @focus="hoveredEdgeDisplay = getEdgeDisplay(edge.source)"
+                  class="concept-link block w-full text-left rounded-md px-1.5 py-1 hover:bg-ink-50 transition-colors"
                   :class="getEdgeDisplay(edge.source).isLocal ? '' : 'xref-external'"
                 >
-                  <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'in')">← {{ relationshipLabel(inverseEdgeType(edge.type)) }}</span>
-                  <span class="truncate">{{ getEdgeDisplay(edge.source).designation || edge.label || getEdgeDisplay(edge.source).conceptId }}</span>
-                  <span class="text-[9px] text-ink-300 flex-shrink-0 font-mono">{{ getEdgeDisplay(edge.source).conceptId }}</span>
-                  <span v-if="getEdgeDisplay(edge.source).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate max-w-[100px]">{{ getEdgeDisplay(edge.source).badge!.title }}</span>
+                  <div class="flex items-center gap-1 mb-0.5">
+                    <span class="badge text-[9px] flex-shrink-0" :class="edgeBadgeColor(edge.type, 'in')">← {{ relationshipLabel(inverseEdgeType(edge.type)) }}</span>
+                    <span v-if="getEdgeDisplay(edge.source).badge" class="badge badge-gray text-[9px] flex-shrink-0 truncate">{{ getEdgeDisplay(edge.source).badge!.title }}</span>
+                  </div>
+                  <div class="text-sm text-ink-700 leading-snug line-clamp-2">{{ getEdgeDisplay(edge.source).designation || edge.label || getEdgeDisplay(edge.source).conceptId }}</div>
                 </button>
               </div>
             </div>
+
+            <!-- Hover detail strip (fixed area at bottom of card) -->
+            <Transition name="fade">
+              <div
+                v-if="hoveredEdgeDisplay"
+                class="mt-3 pt-3 border-t border-ink-100/60"
+              >
+                <div class="text-xs text-ink-300 mb-0.5">{{ t('concept.identifier') || 'Identifier' }}</div>
+                <div class="font-mono text-[10px] text-ink-500 break-all leading-tight">{{ hoveredEdgeDisplay.conceptId }}</div>
+              </div>
+            </Transition>
           </div>
 
           <!-- Domains -->
@@ -659,3 +682,14 @@ const nonVerbalReps = computed(() => {
     </div>
   </div>
 </template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.15s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/composables/use-concept-edges.ts

@@ -58,12 +58,13 @@ export function useConceptEdges(
       const designation = node
         ? (node.designations[locale.value] || node.designations.eng || Object.values(node.designations)[0] || '')
         : '';
-      const tooltipLines: string[] = [uri];
+      const tooltipLines: string[] = [conceptId];
       if (node) {
         for (const [lang, des] of Object.entries(node.designations)) {
           tooltipLines.push(`${langLabel(lang)}: ${des}`);
         }
       }
+      tooltipLines.push(uri);
       let badge: { id: string; title: string } | null = null;
       if (resolution.type === 'internal' && resolution.registerId !== registerId.value) {
         const m = store.manifests.get(resolution.registerId);

package/src/style.css

@@ -334,6 +334,35 @@
   color: #dddde6;
 }
 
+/* ── Brand colors: lighten for dark backgrounds ── */
+/* ISO red (#e3000f) is too harsh on dark — use a softer coral */
+.dark {
+  --brand-primary: #ff5d5d;
+  --brand-primary-rgb: 255, 93, 93;
+  --brand-dark: #1a1b2e;
+}
+
+/* Concept/xref links: lighten in dark mode (override pure red) */
+.dark .concept-link,
+.dark .xref-link {
+  color: #ff6b6b;
+}
+.dark .concept-link:hover,
+.dark .xref-link:hover {
+  filter: brightness(1.15);
+}
+
+/* Brand badges: readable background in dark mode */
+.dark .badge-brand {
+  background-color: rgba(255, 93, 93, 0.15);
+  color: #ff8a8a;
+}
+
+/* Primary buttons: avoid harsh red hover in dark mode */
+.dark .btn-primary:hover {
+  background-color: #c41818;
+}
+
 /* ── Surfaces ── */
 .dark .bg-surface { background-color: #0f1020 !important; }
 .dark .bg-surface-alt { background-color: #161728 !important; }

package/src/views/DatasetView.vue

@@ -30,10 +30,17 @@ const chunkLoading = ref(false);
 // Background chunk preloading via requestIdleCallback
 let idlePreloadHandle: ReturnType<typeof requestIdleCallback> | ReturnType<typeof setTimeout> | null = null;
 
-watch(adapter, (a) => {
-  if (idlePreloadHandle !== null) return;
+watch(adapter, async (a) => {
   if (!a || !a.index) return;
 
+  // If a section filter is active, load all chunks immediately (not idle)
+  if (sectionQuery.value && !allChunksLoaded.value) {
+    await ensureAllChunksForFilter(true);
+    return;
+  }
+
+  if (idlePreloadHandle !== null) return;
+
   const schedule: (cb: () => void) => number = typeof requestIdleCallback !== 'undefined'
     ? (cb) => requestIdleCallback(cb, { timeout: 2000 })
     : (cb) => window.setTimeout(cb, 0);
@@ -87,6 +94,7 @@ const allChunksLoaded = ref(false);
 const selectedLang = ref<string | null>(null);
 const viewMode = ref<'systematic' | 'alphabetical'>('systematic');
 const sectionQuery = computed(() => (route.query.section as string) || null);
+const page = ref(1);
 
 interface LangOption {
   code: string;
@@ -124,10 +132,14 @@ onUnmounted(() => window.removeEventListener('keydown', onGlobalKeydown));
 
 async function ensureAllChunksForFilter(needsLoad: boolean) {
   page.value = 1;
-  if (needsLoad && !allChunksLoaded.value && adapter.value) {
-    chunkLoading.value = true;
-    await adapter.value.ensureAllChunksLoaded();
+  if (!needsLoad || allChunksLoaded.value) return;
+  const a = adapter.value;
+  if (!a?.index) return;
+  chunkLoading.value = true;
+  try {
+    await a.ensureAllChunksLoaded();
     allChunksLoaded.value = true;
+  } finally {
     chunkLoading.value = false;
   }
 }
@@ -138,7 +150,7 @@ watch(filter, async (q) => {
 
 watch(sectionQuery, async () => {
   await ensureAllChunksForFilter(!!sectionQuery.value);
-});
+}, { immediate: true });
 
 watch(selectedLang, async (lang) => {
   await ensureAllChunksForFilter(!!lang);
@@ -202,7 +214,6 @@ const alphabetGroups = computed(() => {
   return [...groups.entries()].sort((a, b) => a[0].localeCompare(b[0]));
 });
 
-const page = ref(1);
 const perPage = 50;
 
 // Check if the current page range is loaded in the index