@glossarist/concept-browser 0.7.100 → 0.7.101

package/package.json

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

package/src/__tests__/components/learn/learn-card-dimension-card.test.ts

@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import LearnCard from '../../../components/learn/LearnCard.vue';
+import DimensionCard from '../../../components/learn/DimensionCard.vue';
+
+describe('LearnCard', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the title and ISO reference', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'partitive relation', isoReference: 'ISO 704:2022 §5.5.4.3' },
+    });
+    expect(w.find('h3').text()).toBe('partitive relation');
+    expect(w.find('.font-mono').text()).toBe('ISO 704:2022 §5.5.4.3');
+  });
+
+  it('renders the body slot', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x' },
+      slots: { default: '<p>Body content</p>' },
+    });
+    expect(w.find('.learn-card-body').html()).toContain('Body content');
+  });
+
+  it('renders the example slot in its own section', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x' },
+      slots: { example: 'VIM 1.9 measurement unit' },
+    });
+    expect(w.find('.learn-card-example').text()).toContain('VIM 1.9');
+  });
+
+  it('omits the "learn more" footer when learnMoreUrl is absent', () => {
+    const w = mount(LearnCard, { props: { title: 'x' } });
+    expect(w.find('.learn-card-footer').exists()).toBe(false);
+  });
+
+  it('renders the learn-more footer when learnMoreUrl is present', () => {
+    const w = mount(LearnCard, {
+      props: { title: 'x', learnMoreUrl: 'https://www.glossarist.org/model/x' },
+    });
+    const link = w.find('.learn-card-footer a');
+    expect(link.attributes('href')).toBe('https://www.glossarist.org/model/x');
+    expect(link.attributes('target')).toBe('_blank');
+    expect(link.attributes('rel')).toBe('noopener');
+  });
+
+  it('binds the id prop for deep-link anchors', () => {
+    const w = mount(LearnCard, {
+      props: { id: '__partitive__', title: 'x' },
+    });
+    expect(w.find('article').attributes('id')).toBe('__partitive__');
+  });
+});
+
+describe('DimensionCard', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders one row per value', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'Presence',
+        summary: 'Compulsory or optional',
+        values: [
+          { value: 'required', label: 'required', meaning: 'must be present' },
+          { value: 'optional', label: 'optional', meaning: 'may be absent' },
+        ],
+      },
+    });
+    expect(w.findAll('.dimension-value-row').length).toBe(2);
+  });
+
+  it('renders value labels and meanings', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'must be present' }],
+      },
+    });
+    const row = w.find('.dimension-value-row');
+    expect(row.text()).toContain('required');
+    expect(row.text()).toContain('must be present');
+  });
+
+  it('exposes a visual scoped slot per value', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'm' }],
+      },
+      slots: {
+        visual: '<svg data-test="custom-visual" />',
+      },
+    });
+    expect(w.find('svg[data-test="custom-visual"]').exists()).toBe(true);
+  });
+
+  it('binds the id prop for deep-link anchors', () => {
+    const w = mount(DimensionCard, {
+      props: {
+        id: 'partitive-presence',
+        name: 'x',
+        summary: 's',
+        values: [{ value: 'required', label: 'required', meaning: 'm' }],
+      },
+    });
+    expect(w.find('article').attributes('id')).toBe('partitive-presence');
+  });
+});

package/src/__tests__/views/learn/learn-designations-view.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnDesignationsView from '../../../views/learn/LearnDesignationsView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn/designations', name: 'learn-designations', component: LearnDesignationsView },
+    ],
+  });
+  await router.push('/learn/designations');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnDesignationsView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Designations');
+  });
+
+  it('renders three top-level sections (normative, kinds, types)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const sections = w.findAll('section[aria-label]');
+    expect(sections.length).toBe(3);
+  });
+
+  it('normative section has all three ratings (preferred/admitted/deprecated)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const normative = w.find('section[aria-label="Normative status"]');
+    const cardTitles = normative.findAll('h3').map(h => h.text());
+    expect(cardTitles).toEqual(expect.arrayContaining([
+      'preferred term', 'admitted term', 'deprecated term',
+    ]));
+  });
+
+  it('each normative card notes "there can be more than one"', async () => {
+    /* The user's specific concern: explain that there can be multiple. */
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const normative = w.find('section[aria-label="Normative status"]');
+    const notes = normative.findAll('.italic').map(i => i.text().toLowerCase());
+    expect(notes.filter(t => t.includes('more than one')).length).toBe(3);
+  });
+
+  it('kinds section renders all four kinds (full form, abbreviated, borrowed, variant)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const kinds = w.find('section[aria-label="Kinds and forms of term"]');
+    const titles = kinds.findAll('h3').map(h => h.text());
+    expect(titles).toEqual(expect.arrayContaining([
+      'full form', 'abbreviated form', 'borrowed term', 'variant',
+    ]));
+  });
+
+  it('types section renders term, acronym, initialism, symbol', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const types = w.find('section[aria-label="Designation types"]');
+    const titles = types.findAll('h3').map(h => h.text());
+    expect(titles).toEqual(expect.arrayContaining([
+      'term (expression)', 'acronym', 'initialism', 'symbol',
+    ]));
+  });
+
+  it('every example slot mentions a concrete ISO example', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnDesignationsView, { global: { plugins: [router] } });
+    const examples = w.findAll('.learn-card-example').map(e => e.text());
+    expect(examples.some(t => t.includes('compact disc'))).toBe(true);
+    expect(examples.some(t => t.includes('WWW'))).toBe(true);
+    expect(examples.some(t => t.includes('laser'))).toBe(true);
+    expect(examples.some(t => t.includes('OIML'))).toBe(true);
+  });
+});

package/src/__tests__/views/learn/learn-index-view.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnIndexView from '../../../views/learn/LearnIndexView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn', name: 'learn', component: LearnIndexView },
+      { path: '/learn/relationships', name: 'learn-relationships', component: { template: '<div/>' } },
+      { path: '/learn/designations', name: 'learn-designations', component: { template: '<div/>' } },
+      { path: '/learn/statuses', name: 'learn-statuses', component: { template: '<div/>' } },
+    ],
+  });
+  await router.push('/learn');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnIndexView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header with translated title', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Learn');
+  });
+
+  it('renders exactly 3 topic cards for Phase 1', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    /* Each RouterLink wraps a LearnCard. Phase 1 = 3 topics. */
+    expect(w.findAllComponents({ name: 'LearnCard' }).length).toBe(3);
+  });
+
+  it('each topic card links to one of the Phase 1 routes', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnIndexView, { global: { plugins: [router] } });
+    const links = w.findAll('a').map(a => a.attributes('href'));
+    expect(links).toEqual(expect.arrayContaining(['/learn/relationships', '/learn/designations', '/learn/statuses']));
+  });
+});

package/src/__tests__/views/learn/learn-relationships-view.test.ts

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnRelationshipsView from '../../../views/learn/LearnRelationshipsView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn/relationships', name: 'learn-relationships', component: LearnRelationshipsView },
+    ],
+  });
+  await router.push('/learn/relationships');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnRelationshipsView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header with translated title', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Relationships');
+  });
+
+  it('renders three top-level sections (bilateral, partitive, general)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const sections = w.findAll('section[aria-label]');
+    expect(sections.length).toBe(3);
+  });
+
+  it('renders the hyperedge cards with the expected anchors', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const ids = w.findAll('.learn-card[id]').map(c => c.attributes('id'));
+    expect(ids).toContain('__partitive__');
+    expect(ids).toContain('__generic__');
+  });
+
+  it('renders three DimensionCards for the partitive dimensions', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const dimIds = w.findAll('.dimension-card[id]').map(c => c.attributes('id'));
+    expect(dimIds).toEqual(expect.arrayContaining(['partitive-presence', 'partitive-count', 'partitive-delimiting']));
+  });
+
+  it('renders the bilateral section grouped by category', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const bilateralArticles = w.find('section[aria-label="Bilateral relations (one-to-one)"]').findAll('article');
+    expect(bilateralArticles.length).toBeGreaterThanOrEqual(5);
+  });
+
+  it('every bilateral type row has an id anchor matching the type key', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const rows = w.findAll('.bilateral-row');
+    expect(rows.length).toBeGreaterThan(10);
+    for (const row of rows) {
+      const id = row.attributes('id');
+      expect(id).toBeTruthy();
+      expect(id).toMatch(/^[a-z_]+$/);
+    }
+  });
+
+  it('renders a live diagram for each hyperedge card', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    expect(w.findAll('svg.hyperedge-diagram').length).toBe(2);
+  });
+
+  it('renders ISO references on each hyperedge card', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnRelationshipsView, { global: { plugins: [router] } });
+    const isoRefs = w.findAll('.learn-card span.font-mono').map(s => s.text());
+    expect(isoRefs.some(t => t.includes('ISO 704:2022 §5.5.4.3'))).toBe(true);
+    expect(isoRefs.some(t => t.includes('ISO 704:2022 §5.5.4.2'))).toBe(true);
+  });
+});

package/src/__tests__/views/learn/learn-statuses-view.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
+import { createRouter, createMemoryHistory } from 'vue-router';
+import LearnStatusesView from '../../../views/learn/LearnStatusesView.vue';
+
+async function makeRouter() {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div/>' } },
+      { path: '/learn/statuses', name: 'learn-statuses', component: LearnStatusesView },
+      { path: '/learn/designations', name: 'learn-designations', component: { template: '<div/>' } },
+    ],
+  });
+  await router.push('/learn/statuses');
+  await router.isReady();
+  return router;
+}
+
+describe('LearnStatusesView', () => {
+  beforeEach(() => setActivePinia(createPinia()));
+
+  it('renders the page header', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnStatusesView, { global: { plugins: [router] } });
+    expect(w.find('h1').text()).toContain('Statuses');
+  });
+
+  it('renders three top-level sections (entry, normative, source)', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnStatusesView, { global: { plugins: [router] } });
+    const sections = w.findAll('section[aria-label]');
+    expect(sections.length).toBe(3);
+  });
+
+  it('entry section renders all four entry statuses with anchors', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnStatusesView, { global: { plugins: [router] } });
+    const entrySection = w.find('section[aria-label="Entry status"]');
+    const ids = entrySection.findAll('.learn-card[id]').map(c => c.attributes('id'));
+    expect(ids).toEqual(expect.arrayContaining(['entry-valid', 'entry-withdrawn', 'entry-draft', 'entry-superseded']));
+  });
+
+  it('normative section cross-links to /learn/designations', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnStatusesView, { global: { plugins: [router] } });
+    const normative = w.find('section[aria-label="Normative status"]');
+    const link = normative.find('a');
+    expect(link.attributes('href')).toBe('/learn/designations');
+  });
+
+  it('source section renders the four source statuses with anchors', async () => {
+    const router = await makeRouter();
+    const w = mount(LearnStatusesView, { global: { plugins: [router] } });
+    const sourceSection = w.find('section[aria-label="Source status"]');
+    const ids = sourceSection.findAll('.learn-card[id]').map(c => c.attributes('id'));
+    expect(ids).toEqual(expect.arrayContaining(['source-identical', 'source-modified', 'source-restyled', 'source-lineage']));
+  });
+});

package/src/components/RelationSphere.vue

@@ -1419,7 +1419,7 @@ defineExpose({ navigate });
                 <span class="sp-count">{{ item.count }}</span>
               </button>
               <router-link class="sp-legend-label"
-                :to="{ name: 'relation-types', hash: '#' + item.type }"
+                :to="{ name: 'learn-relationships', hash: '#' + item.type }"
                 :title="t('sphere.learnAbout') + ': ' + item.label">{{ item.label }}</router-link>
             </div>
           </div>

package/src/components/learn/DimensionCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * DimensionCard — structured breakdown of a single dimension along
+ * which hyperedge members vary. Used on /learn/relationships for the
+ * partitive dimensions (presence, count, delimiting).
+ *
+ * Renders one row per value showing:
+ *   - the raw value (machine key)
+ *   - the human label
+ *   - a short meaning (what it encodes)
+ *   - a small visual representation (slot — typically a mini SVG)
+ *
+ * The user's specific concern: "individually show what dimensions
+ * there are and how lines look like". This component is the answer.
+ */
+export interface DimensionValue {
+  value: string;
+  label: string;
+  meaning: string;
+}
+
+defineProps<{
+  id?: string;
+  name: string;
+  isoReference?: string;
+  /** Plain-language summary of what this dimension captures. */
+  summary: string;
+  values: readonly DimensionValue[];
+}>();
+</script>
+
+<template>
+  <article :id="id" class="dimension-card card p-5 scroll-mt-20">
+    <header class="flex items-baseline justify-between gap-3 mb-2 flex-wrap">
+      <h4 class="text-base font-semibold text-ink-800 dark:text-ink-50">{{ name }}</h4>
+      <span v-if="isoReference" class="text-xs font-mono text-ink-400 dark:text-ink-500">
+        {{ isoReference }}
+      </span>
+    </header>
+    <p class="text-sm text-ink-600 dark:text-ink-200 mb-4">{{ summary }}</p>
+    <ul class="dimension-values space-y-3">
+      <li v-for="v in values" :key="v.value" class="dimension-value-row">
+        <div class="flex items-center gap-3">
+          <div class="dimension-visual">
+            <slot name="visual" :value="v.value" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <div class="flex items-baseline gap-2 flex-wrap">
+              <span class="font-medium text-ink-800 dark:text-ink-100">{{ v.label }}</span>
+              <code class="text-xs text-ink-400 dark:text-ink-500 font-mono">{{ v.value }}</code>
+            </div>
+            <p class="text-sm text-ink-600 dark:text-ink-300 mt-0.5">{{ v.meaning }}</p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </article>
+</template>
+
+<style scoped>
+.dimension-card {
+  scroll-margin-top: 5rem;
+}
+.dimension-visual {
+  flex-shrink: 0;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

package/src/components/learn/LearnCard.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * LearnCard — the standard topic container across all /learn pages.
+ *
+ * Layout: title + ISO reference on top, then a flexible body. Optional
+ * named slots:
+ *   - `diagram` — a small visual (live SVG, badge samples, etc.)
+ *   - `example` — a concrete real-world example
+ * Optional `learnMoreUrl` renders a "Learn more on glossarist.org"
+ * link at the bottom — keeps concept-browser reader-focused while
+ * bridging to the canonical author docs on glossarist.org.
+ *
+ * Anchored at the `id` prop so URLs like `/learn/relationships#partitive`
+ * deep-link to the right card.
+ */
+defineProps<{
+  id?: string;
+  title: string;
+  isoReference?: string;
+  learnMoreUrl?: string;
+  learnMoreLabel?: string;
+}>();
+</script>
+
+<template>
+  <article :id="id" class="learn-card card p-5 scroll-mt-20">
+    <header class="flex items-baseline justify-between gap-3 mb-3 flex-wrap">
+      <h3 class="text-lg font-semibold text-ink-800 dark:text-ink-50">{{ title }}</h3>
+      <span v-if="isoReference" class="text-xs font-mono text-ink-400 dark:text-ink-500">
+        {{ isoReference }}
+      </span>
+    </header>
+    <div v-if="$slots.diagram" class="learn-card-diagram mb-3">
+      <slot name="diagram" />
+    </div>
+    <div class="learn-card-body text-sm text-ink-600 dark:text-ink-200">
+      <slot />
+    </div>
+    <div v-if="$slots.example" class="learn-card-example mt-3 pt-3 border-t border-ink-100 dark:border-ink-700 text-xs text-ink-500 dark:text-ink-400">
+      <slot name="example" />
+    </div>
+    <footer v-if="learnMoreUrl" class="learn-card-footer mt-3 text-xs">
+      <a :href="learnMoreUrl" target="_blank" rel="noopener"
+         class="text-ink-500 dark:text-ink-400 hover:text-ink-800 dark:hover:text-ink-100 underline">
+        {{ learnMoreLabel ?? 'Learn more on glossarist.org' }} ↗
+      </a>
+    </footer>
+  </article>
+</template>
+
+<style scoped>
+.learn-card {
+  scroll-margin-top: 5rem;
+}
+.learn-card-diagram {
+  display: flex;
+  justify-content: center;
+}
+</style>

package/src/config/page-types.ts

@@ -35,7 +35,7 @@ export const PAGE_TYPES: readonly PageTypeDefinition[] = [
   { type: 'stats',      route: 'stats',   title: 'Statistics',   icon: 'chart',      scope: 'dataset', featureFlag: '!stats',     autoSynthesize: true },
   { type: 'sources',    route: 'sources', title: 'Sources',      icon: 'database',   scope: 'dataset', autoSynthesize: true },
   { type: 'about',      route: 'about',   title: 'About',        icon: 'info',       scope: 'dataset', featureFlag: '!about',     autoSynthesize: true },
-  { type: 'relation-types', route: 'relation-types', title: 'Relation Types', icon: 'schema', scope: 'global', autoSynthesize: true },
+  { type: 'learn',      route: 'learn',   title: 'Learn',        icon: 'book-open',  scope: 'global',  autoSynthesize: true },
 ] as const;
 
 export type BuiltinPageType = typeof PAGE_TYPES[number]['type'];