@glossarist/concept-browser 0.7.68 → 0.7.71

package/src/styles/tailwind.css

@@ -0,0 +1,503 @@
+@import "tailwindcss";
+
+@source "../index.html";
+@source "../src/**/*.{vue,astro,ts,js,css}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-ink: #1a1b2e;
+  --color-ink-50: #f0f0f4;
+  --color-ink-100: #dddde6;
+  --color-ink-200: #b8b9cc;
+  --color-ink-300: #8d8faa;
+  --color-ink-400: #636588;
+  --color-ink-500: #484a6e;
+  --color-ink-600: #36385a;
+  --color-ink-700: #2c2e4a;
+  --color-ink-800: #1a1b2e;
+  --color-ink-900: #0f1020;
+
+  --color-surface: #faf9f6;
+  --color-surface-alt: #f3f2ee;
+  --color-surface-raised: #ffffff;
+
+  --color-rel-definitional: #3b82f6;
+  --color-rel-designation: #10b981;
+  --color-rel-contextual: #f59e0b;
+  --color-rel-organizational: #8b5cf6;
+  --color-rel-temporal: #ec4899;
+
+  --color-status-valid: #10b981;
+  --color-status-superseded: #f59e0b;
+  --color-status-withdrawn: #ef4444;
+  --color-status-draft: #6366f1;
+
+  --color-group-lineage: #d97706;
+  --color-group-topic: #059669;
+  --color-group-family: #6366f1;
+  --color-group-collection: #0891b2;
+
+  --font-serif: "DM Serif Display", Georgia, serif;
+  --font-sans: "DM Sans", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+}
+
+:root {
+  --rel-definitional: var(--color-rel-definitional);
+  --rel-designation: var(--color-rel-designation);
+  --rel-contextual: var(--color-rel-contextual);
+  --rel-organizational: var(--color-rel-organizational);
+  --rel-temporal: var(--color-rel-temporal);
+  --status-valid: var(--color-status-valid);
+  --status-superseded: var(--color-status-superseded);
+  --status-withdrawn: var(--color-status-withdrawn);
+  --status-draft: var(--color-status-draft);
+  --group-lineage: var(--color-group-lineage);
+  --group-topic: var(--color-group-topic);
+  --group-family: var(--color-group-family);
+  --group-collection: var(--color-group-collection);
+  --brand-primary: #2563eb;
+  --brand-primary-rgb: 37, 99, 235;
+  --brand-dark: #1e293b;
+  --font-header: "DM Serif Display", Georgia, serif;
+  --font-body: "DM Sans", system-ui, sans-serif;
+  --gold-accent: #B8935A;
+  --gold-accent-deep: #8C6A3A;
+}
+
+@layer base {
+  body {
+    font-family: var(--font-body);
+    @apply antialiased bg-surface text-ink-800;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  h1, h2, h3, .font-serif {
+    font-family: var(--font-header);
+  }
+  code, pre, .font-mono {
+    font-family: var(--font-mono);
+  }
+}
+
+@utility card {
+  background-color: var(--color-surface-raised);
+  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--color-ink-100) 60%, transparent);
+  box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04), 0 1px 2px rgba(26, 27, 46, 0.02);
+}
+
+@utility badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+}
+
+@utility concept-link {
+  color: var(--brand-primary);
+  text-underline-offset: 2px;
+  cursor: pointer;
+  transition: color 150ms;
+  &:hover {
+    text-decoration: underline;
+    filter: brightness(0.8);
+  }
+}
+
+@utility xref-link {
+  color: var(--brand-primary);
+  text-underline-offset: 2px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 150ms;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@utility text-balance {
+  text-wrap: balance;
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@layer components {
+  .card-hover {
+    @apply card transition-all duration-200;
+  }
+  .card-hover:hover {
+    box-shadow: 0 4px 16px rgba(26, 27, 46, 0.08), 0 2px 4px rgba(26, 27, 46, 0.04);
+    border-color: var(--color-ink-200);
+    transform: translateY(-1px);
+  }
+  .card-hover:active {
+    transform: translateY(0);
+    box-shadow: 0 1px 3px rgba(26, 27, 46, 0.04);
+  }
+
+  .btn-primary {
+    @apply text-white px-5 py-2 rounded-lg font-medium text-sm transition-all duration-150;
+    background-color: var(--brand-dark);
+    box-shadow: 0 1px 2px rgba(26, 27, 46, 0.12);
+  }
+  .btn-primary:hover {
+    background-color: var(--brand-primary);
+    box-shadow: 0 2px 4px rgba(26, 27, 46, 0.16);
+  }
+  .btn-primary:disabled {
+    @apply bg-ink-300 cursor-not-allowed;
+    box-shadow: none;
+  }
+
+  .btn-secondary {
+    @apply bg-surface-raised text-ink-700 px-5 py-2 rounded-lg font-medium text-sm border border-ink-100 transition-all duration-150;
+  }
+  .btn-secondary:hover {
+    @apply bg-surface-alt border-ink-200;
+  }
+
+  .btn-ghost {
+    @apply text-ink-600 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors duration-150;
+  }
+  .btn-ghost:hover {
+    @apply bg-ink-50 text-ink-800;
+  }
+  .btn-ghost.active {
+    @apply bg-ink-50 text-ink-800 font-semibold;
+  }
+
+  .badge-blue {
+    @apply badge bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300;
+  }
+  .badge-green {
+    @apply badge bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300;
+  }
+  .badge-yellow {
+    @apply badge bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300;
+  }
+  .badge-gray {
+    @apply badge bg-ink-50 text-ink-600;
+  }
+  .badge-purple {
+    @apply badge bg-purple-50 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300;
+  }
+  .badge-brand {
+    @apply badge;
+    background-color: rgba(var(--brand-primary-rgb), 0.1);
+    color: var(--brand-primary);
+  }
+
+  .bib-link {
+    @apply text-ink-600 hover:text-ink-800 underline-offset-2 hover:underline transition-colors;
+  }
+  .bib-ref {
+    @apply text-ink-500 italic;
+  }
+  .fig-ref a {
+    @apply text-ink-600 hover:text-ink-800 underline-offset-2 hover:underline transition-colors;
+  }
+
+  .nv-entity--highlighted {
+    outline: 2px solid var(--brand-primary);
+    outline-offset: 4px;
+    animation: nv-entity-pulse 1.6s ease-out;
+  }
+  @keyframes nv-entity-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
+    20%      { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.25); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .nv-entity--highlighted { animation: none; }
+  }
+
+  .concept-list {
+    list-style: disc;
+    padding-left: 1.25rem;
+    margin: 0.5rem 0;
+  }
+  .concept-list-ordered {
+    list-style: decimal;
+  }
+  .concept-list li {
+    margin: 0.25rem 0;
+  }
+
+  .concept-table {
+    border-collapse: collapse;
+    margin: 0.75rem 0;
+    font-size: 0.875rem;
+    width: 100%;
+  }
+  .concept-table td {
+    border: 1px solid var(--color-ink-200);
+    padding: 0.375rem 0.625rem;
+    vertical-align: top;
+    text-align: left;
+  }
+
+  .lang-content {
+    overflow: hidden;
+    transition: max-height 250ms ease-out, opacity 200ms ease-out;
+  }
+
+  .section-label {
+    @apply text-[11px] font-semibold uppercase tracking-widest text-ink-400 mb-2;
+    font-family: var(--font-body);
+  }
+
+  .math-inline {
+    display: inline;
+  }
+  .math-inline math {
+    font-size: 1.05em;
+  }
+  .math-bold .math-inline math {
+    font-weight: bold;
+  }
+  .math-fallback {
+    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs;
+    font-family: var(--font-mono);
+  }
+
+  .prose-page,
+  .prose-news {
+    @apply text-sm text-ink-700 leading-relaxed;
+  }
+  .prose-page h2, .prose-news h2 {
+    @apply font-serif text-xl text-ink-800 mt-6 mb-3;
+  }
+  .prose-page h3, .prose-news h3 {
+    @apply font-serif text-lg text-ink-800 mt-5 mb-2;
+  }
+  .prose-page h4, .prose-news h4 {
+    @apply font-semibold text-ink-800 mt-4 mb-2;
+  }
+  .prose-page p, .prose-news p {
+    @apply mb-4;
+  }
+  .prose-page ul, .prose-page ol,
+  .prose-news ul, .prose-news ol {
+    @apply mb-4 pl-5;
+  }
+  .prose-page ul, .prose-news ul {
+    @apply list-disc;
+  }
+  .prose-page ol, .prose-news ol {
+    @apply list-decimal;
+  }
+  .prose-page li, .prose-news li {
+    @apply mb-1;
+  }
+  .prose-news li.list-level-2 {
+    @apply pl-3;
+    list-style-type: circle;
+  }
+  .prose-page a, .prose-news a {
+    @apply concept-link;
+  }
+  .prose-page strong, .prose-news strong {
+    @apply font-semibold text-ink-800;
+  }
+  .prose-page em, .prose-news em {
+    @apply italic;
+  }
+  .prose-page code, .prose-news code {
+    @apply bg-ink-50 text-ink-600 px-1 rounded text-xs;
+    font-family: var(--font-mono);
+  }
+  .prose-page pre, .prose-news pre {
+    @apply bg-ink-50 rounded-lg p-4 mb-4 overflow-x-auto text-xs;
+    font-family: var(--font-mono);
+  }
+  .prose-page pre code, .prose-news pre code {
+    @apply bg-transparent px-0 text-ink-700;
+  }
+  .prose-page blockquote, .prose-news blockquote {
+    @apply border-l-4 border-ink-200 pl-4 italic text-ink-500 mb-4;
+  }
+  .prose-page hr {
+    @apply border-ink-100 my-6;
+  }
+  .prose-page table, .prose-news table {
+    @apply w-full mb-4 text-sm;
+  }
+  .prose-page th, .prose-news th {
+    @apply text-left font-semibold text-ink-800 px-3 py-2 border-b-2 border-ink-200;
+  }
+  .prose-page td, .prose-news td {
+    @apply px-3 py-2 border-b border-ink-100;
+  }
+}
+
+.page-enter-active, .page-leave-active {
+  transition: opacity 150ms ease;
+}
+.page-enter-from, .page-leave-to {
+  opacity: 0;
+}
+
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.animate-entrance {
+  animation: fadeSlideIn 300ms ease both;
+}
+
+@keyframes shimmer {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f4 25%, #f7f7f9 50%, #f0f0f4 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 6px;
+}
+
+.dark body {
+  background-color: #0f1020;
+  color: #dddde6;
+}
+
+.dark {
+  --color-ink-50: #161728;
+  --color-ink-100: #484a6e;
+  --color-ink-200: #484a6e;
+  --color-ink-300: #636588;
+  --color-ink-400: #7a7c9a;
+  --color-ink-500: #9d9fbb;
+  --color-ink-600: #b8b9cc;
+  --color-ink-700: #c8c9d8;
+  --color-ink-800: #dddde6;
+  --color-ink-900: #eeeef4;
+  --color-surface: #0f1020;
+  --color-surface-alt: #161728;
+  --color-surface-raised: #1e1f34;
+  --brand-primary: #ff5d5d;
+  --brand-primary-rgb: 255, 93, 93;
+  --brand-dark: #1a1b2e;
+  --gold-accent: #D4AF6E;
+  --gold-accent-deep: #B8935A;
+}
+
+.dark .concept-link,
+.dark .xref-link,
+.dark .prose-page a,
+.dark .prose-news a,
+.dark .prose-page a:hover,
+.dark .prose-news a:hover {
+  color: #ff6b6b;
+}
+.dark .concept-link:hover,
+.dark .xref-link:hover {
+  filter: brightness(1.15);
+}
+
+.dark .badge-brand {
+  background-color: rgba(255, 93, 93, 0.15);
+  color: #ff8a8a;
+}
+
+.dark .btn-primary:hover {
+  background-color: #c41818;
+}
+
+.dark .bg-surface { background-color: #0f1020 !important; }
+.dark .bg-surface-alt { background-color: #161728 !important; }
+.dark .bg-surface-raised { background-color: #1e1f34 !important; }
+
+.dark .text-ink { color: #dddde6 !important; }
+.dark .text-ink-900 { color: #eeeef4 !important; }
+.dark .text-ink-800 { color: #dddde6 !important; }
+.dark .text-ink-700 { color: #c8c9d8 !important; }
+.dark .text-ink-600 { color: #b8b9cc !important; }
+.dark .text-ink-500 { color: #9d9fbb !important; }
+.dark .text-ink-400 { color: #7a7c9a !important; }
+.dark .text-ink-300 { color: #636588 !important; }
+.dark .text-ink-200 { color: #484a6e !important; }
+.dark .text-ink-100 { color: #484a6e !important; }
+
+.dark .bg-ink-50 { background-color: #161728 !important; }
+.dark .bg-ink-50\/30 { background-color: rgba(22, 23, 40, 0.3) !important; }
+.dark .bg-ink-50\/60 { background-color: rgba(22, 23, 40, 0.6) !important; }
+.dark .bg-ink-100 { background-color: #1e1f34 !important; }
+.dark .bg-ink-200 { background-color: #22243c !important; }
+.dark .bg-ink-800 { background-color: #0a0b18 !important; }
+.dark .bg-ink-800\/8 { background-color: rgba(10, 11, 24, 0.08) !important; }
+
+.dark .border-ink-100 { border-color: #2c2e4a !important; }
+.dark .border-ink-100\/30 { border-color: rgba(44, 46, 74, 0.3) !important; }
+.dark .border-ink-100\/60 { border-color: rgba(44, 46, 74, 0.6) !important; }
+.dark .border-ink-100\/80 { border-color: rgba(44, 46, 74, 0.8) !important; }
+.dark .border-ink-200 { border-color: #36385a !important; }
+.dark .border-ink-800 { border-color: #2c2e4a !important; }
+
+.dark .focus\:ring-ink-200:focus { --tw-ring-color: #36385a !important; }
+.dark .focus\:ring-ink-200\/30:focus { --tw-ring-color: rgba(54, 56, 90, 0.3) !important; }
+.dark .focus\:border-ink-400:focus { border-color: #7a7c9a !important; }
+
+.dark .card {
+  background-color: #1e1f34 !important;
+  border-color: rgba(44, 46, 74, 0.6) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+}
+
+.dark input {
+  background-color: #161728 !important;
+  border-color: #2c2e4a !important;
+  color: #dddde6 !important;
+}
+.dark input::placeholder { color: #484a6e !important; }
+
+.dark .skeleton {
+  background: linear-gradient(90deg, #1e1f34 25%, #2c2e4a 50%, #1e1f34 75%) !important;
+}
+
+.dark .hover\:bg-ink-50:hover { background-color: #1e1f34 !important; }
+.dark .hover\:bg-ink-50\/30:hover { background-color: rgba(30, 31, 52, 0.3) !important; }
+.dark .hover\:bg-ink-50\/50:hover { background-color: rgba(30, 31, 52, 0.5) !important; }
+.dark .hover\:bg-surface-alt:hover { background-color: #161728 !important; }
+.dark .hover\:text-ink-700:hover { color: #dddde6 !important; }
+.dark .hover\:text-ink-800:hover { color: #eeeef4 !important; }
+
+.dark .placeholder\:text-ink-300::placeholder { color: #484a6e !important; }
+
+.dark .concept-link {
+  filter: brightness(1.5);
+}
+.dark .concept-link:hover {
+  filter: brightness(1.3) underline;
+}
+
+.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
+.dark .text-blue-600 { color: #93bbfd !important; }
+.dark .text-blue-700 { color: #7aa8fb !important; }
+.dark .border-blue-100 { border-color: rgba(59, 130, 246, 0.25) !important; }
+.dark .border-blue-500 { border-color: #3b82f6 !important; }
+.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
+.dark .text-emerald-500 { color: #6ee7b7 !important; }
+.dark .text-emerald-700 { color: #6ee7b7 !important; }
+.dark .border-emerald-100 { border-color: rgba(16, 185, 129, 0.25) !important; }
+.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
+.dark .text-amber-600 { color: #fbbf24 !important; }
+.dark .text-amber-700 { color: #fbbf24 !important; }
+.dark .bg-purple-50 { background-color: rgba(139, 92, 246, 0.15) !important; }
+.dark .text-purple-700 { color: #c4b5fd !important; }
+.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; }
+.dark .text-red-600 { color: #fca5a5 !important; }
+
+.dark .section-label {
+  color: var(--color-ink-300) !important;
+}

package/src/views/ConceptView.vue

@@ -48,18 +48,20 @@ watch(
   { immediate: true }
 );
 
+/* 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 concept = computed(() => store.currentConcept);
 const manifest = computed(() => store.currentManifest);
 const edges = computed(() => store.conceptEdges);
+const activeRegisterId = computed(() => sphereFocusPayload.value?.registerId ?? props.registerId);
 const adjacent = ref({ prev: null as string | null, next: null as string | null });
 const viewMode = ref<'detail' | 'sphere'>(
   router.currentRoute.value.query.view === 'sphere' ? '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() {
@@ -88,26 +90,19 @@ function goAdjacent(id: string) {
   window.scrollTo({ top: 0, behavior: 'smooth' });
 }
 
-function onSphereNavigate(payload: { registerId: string; conceptId: string }) {
+async 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);
+  try {
+    const adapter = store.datasets.get(payload.registerId);
+    if (!adapter?.index) {
+      await store.loadDataset(payload.registerId);
     }
-  })();
+    await store.viewConcept(payload.registerId, payload.conceptId);
+    sphereFocusPayload.value = { registerId: payload.registerId, conceptId: payload.conceptId };
+    loadAdjacent();
+  } catch (e) {
+    console.warn('Sphere navigation failed:', e);
+  }
 }
 
 function switchToSphere() {
@@ -283,7 +278,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKeydown));
           v-if="viewMode === 'sphere'"
           :concept="concept"
           :manifest="manifest"
-          :register-id="registerId"
+          :register-id="activeRegisterId"
           :edges="edges"
           @navigate="onSphereNavigate"
         />

package/src/views/StatsView.vue

@@ -45,7 +45,7 @@ const stats = computed(() => {
 
   const langs: LangStat[] = [...allLangs].map(lang => ({
     lang,
-    terms: conceptCounts[lang] ?? ls[lang]?.terms ?? 0,
+    terms: ls[lang]?.terms ?? conceptCounts[lang] ?? 0,
     definitions: ls[lang]?.definitions ?? conceptCounts[lang] ?? 0,
   }));
 

package/tsconfig.json

@@ -20,5 +20,6 @@
     },
     "baseUrl": "."
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "env.d.ts", ".astro/types.d.ts"],
+  "exclude": ["src/content.config.ts", "src/pages/**", "src/layouts/**", "src/astro-islands/**", "src/lib/site-config.ts"]
 }

package/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, type Plugin } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 import { resolve, dirname, extname, join } from 'path'
 import { readFileSync, existsSync, statSync, createReadStream } from 'fs'
 import { fileURLToPath } from 'url'
@@ -162,7 +163,7 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['@plurimath/plurimath'],
   },
-  plugins: [yamlPlugin(), faviconPlugin(), brandingPlugin(), dataServePlugin(), inlineDataPlugin(), vue()],
+  plugins: [tailwindcss(), yamlPlugin(), faviconPlugin(), brandingPlugin(), dataServePlugin(), inlineDataPlugin(), vue()],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),
@@ -180,5 +181,6 @@ export default defineConfig({
   test: {
     environment: 'happy-dom',
     globals: true,
+    include: ['src/__tests__/**/*.test.ts'],
   },
 })

package/postcss.config.js

@@ -1,13 +0,0 @@
-import { dirname, resolve } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-export default {
-  plugins: {
-    tailwindcss: {
-      config: resolve(__dirname, 'tailwind.config.js'),
-    },
-    autoprefixer: {},
-  },
-};